{
  "extractedAt": "2026-05-08T03:56:19.852Z",
  "figmaFileKey": "YbsPRUVmNdsbN40NNwh1Gn",
  "figmaName": "Popup Box",
  "nodeId": "1939:43682",
  "type": "COMPONENT_SET",
  "pageId": "1379:4191",
  "pageName": "— — Notifications & Pop box",
  "description": "",
  "key": "196ff739b62d48bc359eaa0236e577ecefae8921",
  "variants": [
    {
      "id": "1939:43644",
      "name": "Theme=Dark",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 416,
      "w": 680,
      "x": -10382,
      "y": 3201,
      "pH": 16,
      "pV": null,
      "pR": 16,
      "pB": null,
      "gap": null,
      "r": 4,
      "layoutMode": "VERTICAL",
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": null,
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#1f1f1f",
          "v": "VariableID:VariableID:1558:94791",
          "token": {
            "cssVar": "--color-grey-12",
            "figmaName": "UX/Grey/grey-12 #1F1F1F",
            "variableId": "VariableID:1558:94791",
            "strategy": "normalized-variable-id"
          }
        }
      ],
      "strokes": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#595959",
          "v": "VariableID:VariableID:1558:94787",
          "token": {
            "cssVar": "--color-grey-8",
            "figmaName": "UX/Grey/grey-8 #595959",
            "variableId": "VariableID:1558:94787",
            "strategy": "normalized-variable-id"
          }
        }
      ],
      "strokeWeight": 1,
      "effects": [
        {
          "type": "DROP_SHADOW",
          "visible": true,
          "radius": 12,
          "spread": 4,
          "blendMode": "NORMAL",
          "offset": {
            "x": 0,
            "y": 5
          },
          "color": {
            "hex": "#000000",
            "opacity": 0.09000000357627869
          }
        },
        {
          "type": "DROP_SHADOW",
          "visible": true,
          "radius": 6,
          "spread": null,
          "blendMode": "NORMAL",
          "offset": {
            "x": 0,
            "y": 3
          },
          "color": {
            "hex": "#000000",
            "opacity": 0.11999999731779099
          }
        },
        {
          "type": "DROP_SHADOW",
          "visible": true,
          "radius": 2,
          "spread": -2,
          "blendMode": "NORMAL",
          "offset": {
            "x": 0,
            "y": 1
          },
          "color": {
            "hex": "#000000",
            "opacity": 0.1599999964237213
          }
        }
      ],
      "text": {
        "characters": "Output name xxxx",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 16,
        "fontFamily": "Roboto",
        "fontWeight": 600,
        "lineHeightPx": 24,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#f8f8f8",
            "v": "VariableID:VariableID:1558:94782",
            "token": {
              "cssVar": "--color-grey-2",
              "figmaName": "UX/Grey/grey-2 #F8F8F8",
              "variableId": "VariableID:1558:94782",
              "strategy": "normalized-variable-id"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [
        "I1869:68901;2043:2464",
        "I1869:68902;1480:73575",
        "I1869:68902;1480:73576",
        "I1869:68902;1480:74296",
        "I1869:68904;1923:49081;1283:40359",
        "I1869:68904;1923:49081;1544:33561",
        "I1869:68904;1923:49082;1436:33905;2107:20124",
        "I1869:68912;1923:49067;1283:40359",
        "I1869:68912;1923:49067;1544:33561",
        "I1869:68913;1923:49067;1283:40359",
        "I1869:68913;1923:49067;1544:33561",
        "I1869:68914;1923:49234;1283:40359",
        "I1869:68914;1923:49234;1544:33561"
      ],
      "description": null,
      "componentSetId": "1939:43682",
      "componentPropertyReferences": null
    },
    {
      "id": "1939:43606",
      "name": "Theme=Light",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 416,
      "w": 680,
      "x": -10382,
      "y": 3657,
      "pH": 16,
      "pV": null,
      "pR": 16,
      "pB": null,
      "gap": null,
      "r": 4,
      "layoutMode": "VERTICAL",
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": null,
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#f8f8f8",
          "v": "VariableID:VariableID:1558:94782",
          "token": {
            "cssVar": "--color-grey-2",
            "figmaName": "UX/Grey/grey-2 #F8F8F8",
            "variableId": "VariableID:1558:94782",
            "strategy": "normalized-variable-id"
          }
        }
      ],
      "strokes": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#f0f0f0",
          "v": "VariableID:VariableID:1558:94783",
          "token": {
            "cssVar": "--color-grey-3",
            "figmaName": "UX/Grey/grey-3 #F0F0F0",
            "variableId": "VariableID:1558:94783",
            "strategy": "normalized-variable-id"
          }
        }
      ],
      "strokeWeight": 1,
      "effects": [
        {
          "type": "DROP_SHADOW",
          "visible": true,
          "radius": 28,
          "spread": 8,
          "blendMode": "NORMAL",
          "offset": {
            "x": 0,
            "y": 9
          },
          "color": {
            "hex": "#000000",
            "opacity": 0.05000000074505806
          }
        },
        {
          "type": "DROP_SHADOW",
          "visible": true,
          "radius": 16,
          "spread": null,
          "blendMode": "NORMAL",
          "offset": {
            "x": 0,
            "y": 6
          },
          "color": {
            "hex": "#000000",
            "opacity": 0.07999999821186066
          }
        },
        {
          "type": "DROP_SHADOW",
          "visible": true,
          "radius": 6,
          "spread": -4,
          "blendMode": "NORMAL",
          "offset": {
            "x": 0,
            "y": 3
          },
          "color": {
            "hex": "#000000",
            "opacity": 0.11999999731779099
          }
        }
      ],
      "text": {
        "characters": "Output name xxxx",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 16,
        "fontFamily": "Roboto",
        "fontWeight": 600,
        "lineHeightPx": 24,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#141414",
            "v": "VariableID:VariableID:1558:94792",
            "token": {
              "cssVar": "--color-grey-13",
              "figmaName": "UX/Grey/grey-13 #141414",
              "variableId": "VariableID:1558:94792",
              "strategy": "normalized-variable-id"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [
        "I1939:43264;2043:2464",
        "I1939:43265;1480:73575",
        "I1939:43265;1480:73576",
        "I1939:43265;1480:74296",
        "I4993:1296;1923:49336;1283:40359",
        "I4993:1296;1923:49336;1544:33561",
        "I4993:1296;1923:49337;1804:26930;2107:20124",
        "I4993:1297;1923:49322;1283:40359",
        "I4993:1297;1923:49322;1544:33561",
        "I4993:1298;1923:49322;1283:40359",
        "I4993:1298;1923:49322;1544:33561",
        "I4993:1299;1923:49489;1283:40359",
        "I4993:1299;1923:49489;1544:33561"
      ],
      "description": null,
      "componentSetId": "1939:43682",
      "componentPropertyReferences": null
    }
  ],
  "tokenizedAt": "2026-05-08T04:02:55.934Z",
  "tokenizationStrategy": "variable-id-first-then-hex-fallback",
  "source": {
    "sourceLayer": "figma-data/raw/components",
    "sourceFile": "figma-data/raw/components/popup_box__1939_43682.json",
    "rawExtractedAt": "2026-05-08T03:56:19.852Z",
    "rawNodeId": "1939:43682",
    "rawSha256": "48b1d53bf3ee2b628103e5c769ea561e3e23d5f48a4003f7a701297446788db1"
  }
}