@seed-design/figma 0.1.7 → 0.1.9

package/lib/index.js

@@ -159,6 +159,95 @@ function createRestNormalizer(ctx) {
     return normalizeNode;
 }
 
+/**
+ * @see https://gist.github.com/yagudaev/0c2b89674c6aee8b38cd379752ef58d0
+ */ const identityMatrixHandlePositions = [
+    [
+        0,
+        1,
+        0
+    ],
+    [
+        0.5,
+        0.5,
+        1
+    ],
+    [
+        1,
+        1,
+        1
+    ]
+];
+/**
+ * Inverts a 2x3 affine transformation matrix
+ * For a 2x3 matrix [[a, b, c], [d, e, f]], we treat it as a 3x3 matrix with [0, 0, 1] as the third row
+ */ function inv(matrix) {
+    const [[a, b, c], [d, e, f]] = matrix;
+    // Calculate determinant of the 2x2 linear part
+    const det = a * e - b * d;
+    if (Math.abs(det) < 1e-10) {
+        throw new Error("Matrix is not invertible");
+    }
+    // Invert the 2x2 linear part
+    const invDet = 1 / det;
+    const a_inv = e * invDet;
+    const b_inv = -b * invDet;
+    const d_inv = -d * invDet;
+    const e_inv = a * invDet;
+    // Calculate the inverted translation
+    const c_inv = -(a_inv * c + b_inv * f);
+    const f_inv = -(d_inv * c + e_inv * f);
+    return [
+        [
+            a_inv,
+            b_inv,
+            c_inv
+        ],
+        [
+            d_inv,
+            e_inv,
+            f_inv
+        ]
+    ];
+}
+/**
+ * Multiplies a 2x3 matrix with a 3x3 matrix
+ * Result is a 2x3 matrix
+ */ function multiply(matrix1, matrix2) {
+    const [[a, b, c], [d, e, f]] = matrix1;
+    const result = [
+        [],
+        []
+    ];
+    // For each column in matrix2
+    for(let col = 0; col < matrix2[0].length; col++){
+        // First row of result
+        result[0][col] = a * matrix2[0][col] + b * matrix2[1][col] + c * matrix2[2][col];
+        // Second row of result
+        result[1][col] = d * matrix2[0][col] + e * matrix2[1][col] + f * matrix2[2][col];
+    }
+    return result;
+}
+function convertTransformToGradientHandles(transform) {
+    const inverseTransform = inv(transform);
+    // point matrix
+    const mp = multiply(inverseTransform, identityMatrixHandlePositions);
+    return [
+        {
+            x: mp[0][0],
+            y: mp[1][0]
+        },
+        {
+            x: mp[0][1],
+            y: mp[1][1]
+        },
+        {
+            x: mp[0][2],
+            y: mp[1][2]
+        }
+    ];
+}
+
 function createPluginNormalizer() {
     async function normalizeNodes(nodes) {
         return Promise.all(nodes.filter((node)=>node.visible).map(normalizeNode));
@@ -201,7 +290,7 @@ function createPluginNormalizer() {
             name: node.name,
             boundVariables: await normalizeBoundVariables(node),
             ...normalizeRadiusProps(node),
-            ...normalizeAutolayoutProps(node),
+            ...await normalizeAutolayoutProps(node),
             children: await normalizeNodes(node.children)
         };
     }
@@ -241,7 +330,7 @@ function createPluginNormalizer() {
             name: node.name,
             boundVariables: await normalizeBoundVariables(node),
             ...normalizeRadiusProps(node),
-            ...normalizeShapeProps(node)
+            ...await normalizeShapeProps(node)
         };
     }
     async function normalizeVectorNode(node) {
@@ -250,7 +339,7 @@ function createPluginNormalizer() {
             id: node.id,
             name: node.name,
             boundVariables: await normalizeBoundVariables(node),
-            ...normalizeShapeProps(node)
+            ...await normalizeShapeProps(node)
         };
     }
     async function normalizeBooleanOperationNode(node) {
@@ -260,7 +349,7 @@ function createPluginNormalizer() {
             name: node.name,
             boundVariables: await normalizeBoundVariables(node),
             children: await normalizeNodes(node.children),
-            ...normalizeShapeProps(node)
+            ...await normalizeShapeProps(node)
         };
     }
     async function normalizeTextNode(node) {
@@ -273,7 +362,8 @@ function createPluginNormalizer() {
             "paragraphSpacing",
             "textStyleId",
             "fills",
-            "boundVariables"
+            "boundVariables",
+            "textDecoration"
         ]);
         const first = segments[0];
         const textStyleKey = typeof node.textStyleId === "string" ? (await figma.getStyleByIdAsync(node.textStyleId))?.key : undefined;
@@ -308,7 +398,7 @@ function createPluginNormalizer() {
                         lineHeightPx: segment.lineHeight.unit === "PIXELS" ? segment.lineHeight.value : undefined
                     }
                 })),
-            ...normalizeShapeProps(node)
+            ...await normalizeShapeProps(node)
         };
     }
     async function normalizeComponentNode(node) {
@@ -318,7 +408,7 @@ function createPluginNormalizer() {
             name: node.name,
             boundVariables: await normalizeBoundVariables(node),
             ...normalizeRadiusProps(node),
-            ...normalizeAutolayoutProps(node),
+            ...await normalizeAutolayoutProps(node),
             children: await normalizeNodes(node.children)
         };
     }
@@ -346,7 +436,7 @@ function createPluginNormalizer() {
             name: node.name,
             boundVariables: await normalizeBoundVariables(node),
             ...normalizeRadiusProps(node),
-            ...normalizeAutolayoutProps(node),
+            ...await normalizeAutolayoutProps(node),
             children: await normalizeNodes(node.children),
             componentKey: mainComponent.key,
             componentSetKey: mainComponent.parent?.type === "COMPONENT_SET" ? mainComponent.parent.key : undefined,
@@ -368,28 +458,44 @@ function createPluginNormalizer() {
         };
     }
     function normalizePaint(paint) {
-        if (paint.type === "SOLID") {
-            return normalizeSolidPaint(paint);
+        switch(paint.type){
+            case "SOLID":
+                return normalizeSolidPaint(paint);
+            case "IMAGE":
+                return {
+                    type: "IMAGE",
+                    scaleMode: paint.scaleMode === "CROP" ? "STRETCH" : paint.scaleMode,
+                    imageTransform: paint.imageTransform,
+                    scalingFactor: paint.scalingFactor,
+                    filters: paint.filters,
+                    rotation: paint.rotation,
+                    imageRef: paint.imageHash ?? "",
+                    blendMode: paint.blendMode ?? "NORMAL",
+                    visible: paint.visible,
+                    opacity: paint.opacity
+                };
+            case "GRADIENT_LINEAR":
+            case "GRADIENT_RADIAL":
+            case "GRADIENT_ANGULAR":
+            case "GRADIENT_DIAMOND":
+                return {
+                    type: paint.type,
+                    gradientStops: [
+                        ...paint.gradientStops
+                    ],
+                    visible: paint.visible,
+                    opacity: paint.opacity,
+                    blendMode: paint.blendMode ?? "NORMAL",
+                    gradientHandlePositions: convertTransformToGradientHandles(paint.gradientTransform)
+                };
+            default:
+                throw new Error(`Unimplemented paint type: ${paint.type}`);
         }
-        if (paint.type === "IMAGE") {
-            return {
-                type: "IMAGE",
-                scaleMode: paint.scaleMode === "CROP" ? "STRETCH" : paint.scaleMode,
-                imageTransform: paint.imageTransform,
-                scalingFactor: paint.scalingFactor,
-                filters: paint.filters,
-                rotation: paint.rotation,
-                imageRef: paint.imageHash ?? "",
-                blendMode: paint.blendMode ?? "NORMAL",
-                visible: paint.visible,
-                opacity: paint.opacity
-            };
-        }
-        throw new Error(`Unimplemented paint type: ${paint.type}`);
     }
     function normalizePaints(fills) {
         if (fills === figma.mixed) {
-            throw new Error("Mixed fills are not supported");
+            console.warn("Mixed fills are not supported");
+            return [];
         }
         return fills.map(normalizePaint);
     }
@@ -404,7 +510,8 @@ function createPluginNormalizer() {
             ]
         };
     }
-    function normalizeShapeProps(node) {
+    async function normalizeShapeProps(node) {
+        const fillStyleKey = typeof node.fillStyleId === "string" ? (await figma.getStyleByIdAsync(node.fillStyleId))?.key : undefined;
         return {
             layoutGrow: node.inferredAutoLayout?.layoutGrow ?? node.layoutGrow,
             layoutAlign: node.inferredAutoLayout?.layoutAlign ?? node.layoutAlign,
@@ -413,6 +520,9 @@ function createPluginNormalizer() {
             absoluteBoundingBox: node.absoluteBoundingBox,
             relativeTransform: node.relativeTransform,
             fills: normalizePaints(node.fills),
+            ...fillStyleKey ? {
+                fillStyleKey
+            } : {},
             strokes: normalizePaints(node.strokes),
             strokeWeight: node.strokeWeight === figma.mixed ? undefined : node.strokeWeight,
             minHeight: node.minHeight ?? undefined,
@@ -421,9 +531,9 @@ function createPluginNormalizer() {
             maxWidth: node.maxWidth ?? undefined
         };
     }
-    function normalizeAutolayoutProps(node) {
+    async function normalizeAutolayoutProps(node) {
         return {
-            ...normalizeShapeProps(node),
+            ...await normalizeShapeProps(node),
             layoutMode: node.inferredAutoLayout?.layoutMode ?? node.layoutMode,
             layoutWrap: node.inferredAutoLayout?.layoutWrap ?? node.layoutWrap,
             paddingLeft: node.inferredAutoLayout?.paddingLeft ?? node.paddingLeft,
@@ -438,18 +548,55 @@ function createPluginNormalizer() {
             counterAxisSpacing: node.inferredAutoLayout?.counterAxisSpacing ?? node.counterAxisSpacing ?? undefined
         };
     }
-    async function normalizeBoundVariables(node) {
+    async function normalizeBoundVariables({ boundVariables }) {
+        if (!boundVariables) return undefined;
+        const { width, height, componentProperties: _componentProperties, ...rest } = boundVariables;
+        // replace VariableAlias' id with the actual variable key
+        const resolveVariableId = async (variable)=>({
+                ...variable,
+                id: (await figma.variables.getVariableByIdAsync(variable.id))?.key ?? variable.id
+            });
+        const needsResolution = [
+            "fills",
+            "itemSpacing",
+            "counterAxisSpacing",
+            "bottomLeftRadius",
+            "bottomRightRadius",
+            "topLeftRadius",
+            "topRightRadius",
+            "paddingBottom",
+            "paddingLeft",
+            "paddingRight",
+            "paddingTop",
+            "maxHeight",
+            "minHeight",
+            "maxWidth",
+            "minWidth"
+        ];
+        // Process all properties in parallel
+        const resolvedEntries = await Promise.all(Object.entries(rest).map(async ([key, value])=>{
+            if (!value || !needsResolution.includes(key)) return [
+                key,
+                value
+            ];
+            if (Array.isArray(value)) {
+                return [
+                    key,
+                    await Promise.all(value.map(resolveVariableId))
+                ];
+            }
+            return [
+                key,
+                await resolveVariableId(value)
+            ];
+        }));
         return {
-            ...node.boundVariables,
-            fills: await Promise.all(node.boundVariables?.fills?.map((fill)=>figma.variables.getVariableByIdAsync(fill.id).then((res)=>{
-                    return {
-                        ...fill,
-                        id: res?.key ?? fill.id
-                    };
-                })) ?? []),
-            size: {
-                x: node.boundVariables?.width,
-                y: node.boundVariables?.height
+            ...Object.fromEntries(resolvedEntries),
+            ...width && height && {
+                size: {
+                    x: width,
+                    y: height
+                }
             }
         };
     }
@@ -3231,6 +3378,99 @@ const FIGMA_ICONS = {
     }
 };
 
+const FIGMA_FILL_STYLES = [
+    {
+        styleType: "FILL",
+        key: "46186d7dd037e8e54983ee6677cf7915790d84cc",
+        name: "gradient/fade/layer-floating/↑(to-top)",
+        description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "b28d9c9adc816fdd4ecec3a0b3e25d8aec802b6a",
+        name: "gradient/fade/layer-floating/↓(to-bottom)",
+        description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "063c0dc05b438ac36499492e783520a722782d74",
+        name: "gradient/fade/layer-floating/→(to-right)",
+        description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "c1cee6b89c357c6a12d020654d73a4490cafdf51",
+        name: "gradient/fade/layer-default/←(to-left)",
+        description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "826457503b7ee3d472eab91581b1fcd499c47c00",
+        name: "gradient/fade/layer-default/↑(to-top)",
+        description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "df22450a8f8e9c323baf40d8981920d1b6376cbf",
+        name: "gradient/fade/layer-floating/←(to-left)",
+        description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "ff436e73cf9477a1006e6f8a1f9d2c9dbe0e5edd",
+        name: "gradient/fade/layer-default/→(to-right)",
+        description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "353baa82e0440385eb121cd0ae98d2fcb1a70b18",
+        name: "gradient/glow/magic",
+        description: "반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "f83f54c1840aaf26742629e2c696c363b8df0a82",
+        name: "gradient/glow/magic-pressed",
+        description: "반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러의 pressed컬러입니다.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "408cb970f1de672217f452152b0398a4bb4f4e12",
+        name: "gradient/fade/layer-default/↓(to-bottom)",
+        description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "71971dde923a11c615296a16f8172c0671d5a3a6",
+        name: "gradient/shimmer/neutral",
+        description: "Skeleton shimmer",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "2ed61bff1a187f39389698cf63b74d6997aed609",
+        name: "gradient/shimmer/magic",
+        description: "Skeleton AI shimmer",
+        remote: false
+    },
+    {
+        styleType: "FILL",
+        key: "1101a7c6a505d97904c3a0ce6a9ee17fe15de879",
+        name: "gradient/highlight/magic",
+        description: "아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러입니다.",
+        remote: false
+    }
+];
 const FIGMA_TEXT_STYLES = [
     {
         styleType: "TEXT",
@@ -10121,128 +10361,126 @@ const FIGMA_VARIABLES = {
 };
 
 const metadata$K = {
-    "name": "🔵 [Template] Bottom Fixed Bar",
-    "key": "bac8592d10ee12452d79d5db6353850c0f0c9c3f",
+    "name": "🔵 [Template] Button Group",
+    "key": "29109a34197f2eb5d390b1d9ebba270979a7b302",
     "componentPropertyDefinitions": {
-        "Text#30483:84": {
-            "type": "TEXT"
-        },
-        "Show Text Button#30483:80": {
-            "type": "BOOLEAN"
-        },
-        "Show Favorite#29056:0": {
-            "type": "BOOLEAN"
-        },
-        "Show Indicator#28768:0": {
-            "type": "BOOLEAN"
-        },
-        "Show Pay Logo#15354:5": {
-            "type": "BOOLEAN"
-        },
-        "Type": {
+        "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Information",
-                "Multi Actions"
+                "Small",
+                "Medium"
             ]
         },
-        "OS": {
+        "Type": {
             "type": "VARIANT",
             "variantOptions": [
-                "iOS",
-                "Andorid"
+                "horizontal Equal",
+                "Horizontal Ratio"
             ]
         },
-        "Show Divider": {
+        "Item Count": {
             "type": "VARIANT",
             "variantOptions": [
-                "True",
-                "False"
+                "2",
+                "3"
             ]
         }
     }
 };
 
 const metadata$J = {
-    "name": "🔵 [Template] Button Group",
-    "key": "de6c65d34cc4a01c18c9a7c0ded34635170ca11f",
+    "name": "🔵 [Template] Chip Group",
+    "key": "5b1155aae0f90d1bce6a7499f53a547e88ec3b86",
     "componentPropertyDefinitions": {
-        "Show Secondary Button#29056:29": {
-            "type": "BOOLEAN"
-        },
-        "Show Favorite Button#29056:0": {
-            "type": "BOOLEAN"
-        },
-        "Show Step Indicator#25896:0": {
-            "type": "BOOLEAN"
-        },
-        "Show Indicator#28768:0": {
-            "type": "BOOLEAN"
-        },
-        "Text#16839:0": {
-            "type": "TEXT"
-        },
-        "OS": {
+        "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "iOS",
-                "Andorid"
+                "Solid",
+                "Outline Strong",
+                "Outline Weak"
             ]
         },
-        "Position": {
+        "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Bottom fixed",
-                "On keyboard"
+                "Large",
+                "Medium",
+                "Small"
             ]
         },
-        "Type": {
+        "Layout": {
             "type": "VARIANT",
             "variantOptions": [
-                "Single",
-                "Vertical",
-                "Horizontal",
-                "Horizontal ratio"
+                "Scrollable",
+                "Overflow"
             ]
+        }
+    }
+};
+
+const metadata$I = {
+    "name": "🔵 [Template] Completion",
+    "key": "d91c789c66c2da665d820318f1a4d8671946eb79",
+    "componentPropertyDefinitions": {
+        "Description#28427:4": {
+            "type": "TEXT"
+        },
+        "Title#28427:5": {
+            "type": "TEXT"
+        },
+        "Show Description#28427:6": {
+            "type": "BOOLEAN"
+        },
+        "Show Button#28427:7": {
+            "type": "BOOLEAN"
+        },
+        "Show Top Navigation#28427:8": {
+            "type": "BOOLEAN"
         },
-        "Show Divider": {
+        "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "True",
-                "False"
+                "Screen",
+                "Dialog"
             ]
         }
     }
 };
 
-const metadata$I = {
-    "name": "🔵 [Template] Chip Group",
-    "key": "d46dc9059bf351928a2d403317ad7db34e70826e",
+const metadata$H = {
+    "name": "🔵 [Template] Error State",
+    "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
     "componentPropertyDefinitions": {
-        "Refresh Button#15888:2": {
+        "Show Buttons#9080:5": {
             "type": "BOOLEAN"
         },
-        "Type": {
+        "Title#16237:0": {
+            "type": "TEXT"
+        },
+        "Description#16237:5": {
+            "type": "TEXT"
+        },
+        "Secondary Action Label#17042:0": {
+            "type": "TEXT"
+        },
+        "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "Filter",
-                "Control",
-                "Action"
+                "Default",
+                "Basement"
             ]
         },
-        "Chip Count": {
+        "Layout": {
             "type": "VARIANT",
             "variantOptions": [
-                "Full",
-                "3",
-                "2",
-                "4"
+                "With Title",
+                "Description Only"
             ]
         }
     }
 };
 
-const metadata$H = {
+const metadata$G = {
     "name": "🔵 [Template] Select Box Group",
     "key": "a3d58bb8540600878742cdcf2608a4b3851667ec",
     "componentPropertyDefinitions": {
@@ -10267,13 +10505,22 @@ const metadata$H = {
     }
 };
 
-const metadata$G = {
+const metadata$F = {
     "name": "🔵 [Template] Top Navigation",
     "key": "74f045c1972dc31d0fddd0a0027537b6779cd0e8",
     "componentPropertyDefinitions": {
         "Action Button#17406:0": {
             "type": "BOOLEAN"
         },
+        "Sub Title#20497:0": {
+            "type": "BOOLEAN"
+        },
+        "Large Title#20497:5": {
+            "type": "TEXT"
+        },
+        "Sub Title #20497:10": {
+            "type": "TEXT"
+        },
         "Variants": {
             "type": "VARIANT",
             "variantOptions": [
@@ -10282,36 +10529,29 @@ const metadata$G = {
                 "Standard Transparent",
                 "Large Title"
             ]
-        },
-        "OS": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "iOS",
-                "Android"
-            ]
         }
     }
 };
 
-const metadata$F = {
+const metadata$E = {
     "name": "🟢 Action Button",
     "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89",
     "componentPropertyDefinitions": {
+        "Label#5987:61": {
+            "type": "TEXT"
+        },
         "Suffix Icon#5987:244": {
             "type": "INSTANCE_SWAP",
             "preferredValues": []
         },
-        "Icon#7574:0": {
+        "Prefix Icon#5987:305": {
             "type": "INSTANCE_SWAP",
             "preferredValues": []
         },
-        "Prefix Icon#5987:305": {
+        "Icon#7574:0": {
             "type": "INSTANCE_SWAP",
             "preferredValues": []
         },
-        "Label#5987:61": {
-            "type": "TEXT"
-        },
         "Size": {
             "type": "VARIANT",
             "variantOptions": [
@@ -10353,100 +10593,28 @@ const metadata$F = {
     }
 };
 
-const metadata$E = {
-    "name": "🟢 Action Chip",
-    "key": "3d21594ef116e94a9465d507447b858aea062575",
-    "componentPropertyDefinitions": {
-        "Icon#8714:0": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
-        },
-        "Prefix Icon#8711:0": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": [
-                {
-                    "type": "COMPONENT_SET",
-                    "key": "8ed05ef62a40f2dc034ee7eb6945bd0e63ad49aa"
-                }
-            ]
-        },
-        "Suffix Icon#8711:3": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
-        },
-        "Label#7185:0": {
-            "type": "TEXT"
-        },
-        "Show Count#7185:42": {
-            "type": "BOOLEAN"
-        },
-        "Count#7185:21": {
-            "type": "TEXT"
-        },
-        "Size": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Medium",
-                "Small"
-            ]
-        },
-        "Layout": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Text Only",
-                "Icon First",
-                "Icon Last",
-                "Icon Both",
-                "Icon Only"
-            ]
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Pressed",
-                "Disabled"
-            ]
-        }
-    }
-};
-
 const metadata$D = {
-    "name": "🟢 Action Sheet",
-    "key": "7c29b70b7e71618e1894c26f61f336de2730d76e",
+    "name": "🟢 Alert Dialog",
+    "key": "e0c89524a554ca1bf95c016b7255f29e257624aa",
     "componentPropertyDefinitions": {
-        "Description#15641:70": {
+        "Title Text#20361:0": {
             "type": "TEXT"
         },
-        "Title#15641:37": {
+        "Description Text#20361:7": {
             "type": "TEXT"
         },
-        "OS Indicator (Figma Only)#15641:20": {
+        "Show Title#20361:14": {
             "type": "BOOLEAN"
         },
-        "Type": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Normal",
-                "Destructive"
-            ]
-        },
-        "Header": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Title Only",
-                "Description Only",
-                "Title With Description",
-                "None"
-            ]
-        },
-        "Action Count": {
+        "Layout": {
             "type": "VARIANT",
             "variantOptions": [
-                "1",
-                "2",
-                "3",
-                "4"
+                "Single",
+                "Neutral",
+                "Neutral (Overflow)",
+                "Critical",
+                "Critical (Overflow)",
+                "Nonpreferred"
             ]
         }
     }
@@ -10454,12 +10622,9 @@ const metadata$D = {
 
 const metadata$C = {
     "name": "🟢 Avatar",
-    "key": "d71644aeba2e29deda366798fdfe35977166d120",
+    "key": "4a8853c3068c08b69b13e71dd42ce186e968697e",
     "componentPropertyDefinitions": {
-        "Show Image#71850:57": {
-            "type": "BOOLEAN"
-        },
-        "Show Badge#1398:26": {
+        "Has Image Contents#33407:0": {
             "type": "BOOLEAN"
         },
         "Size": {
@@ -10474,13 +10639,22 @@ const metadata$C = {
                 "80",
                 "96"
             ]
+        },
+        "Badge": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "None",
+                "Circle",
+                "Shield",
+                "Flower"
+            ]
         }
     }
 };
 
 const metadata$B = {
     "name": "🟢 Avatar Stack",
-    "key": "019467fdad2192abb48699dcfb79e344df04b799",
+    "key": "e8e91e01000d878742c55cd6e44b6786460440f7",
     "componentPropertyDefinitions": {
         "Size": {
             "type": "VARIANT",
@@ -10488,24 +10662,11 @@ const metadata$B = {
                 "20",
                 "24",
                 "36",
+                "42",
                 "48",
-                "64"
-            ]
-        },
-        "Item Count": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "2",
-                "3",
-                "4",
-                "5"
-            ]
-        },
-        "Top Item": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Last Item",
-                "First Item"
+                "64",
+                "80",
+                "96"
             ]
         }
     }
@@ -10542,13 +10703,6 @@ const metadata$A = {
                 "Weak",
                 "Outline"
             ]
-        },
-        "Shape": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Rectangle",
-                "Pill"
-            ]
         }
     }
 };
@@ -10557,6 +10711,9 @@ const metadata$z = {
     "name": "🟢 Bottom Navigation / Global",
     "key": "983650a4dff639b38bf68ff6004efc8ec4fb5c20",
     "componentPropertyDefinitions": {
+        "Show Safe Area#25445:3": {
+            "type": "BOOLEAN"
+        },
         "OS": {
             "type": "VARIANT",
             "variantOptions": [
@@ -10578,6 +10735,9 @@ const metadata$y = {
     "name": "🟢 Bottom Navigation / KR",
     "key": "accc7cea2d0250cdfbf0197ce00a677c6b9e0dae",
     "componentPropertyDefinitions": {
+        "Show Safe Area#25445:0": {
+            "type": "BOOLEAN"
+        },
         "OS": {
             "type": "VARIANT",
             "variantOptions": [
@@ -10592,12 +10752,61 @@ const metadata$x = {
     "name": "🟢 Bottom Sheet",
     "key": "16bafa5d1155896fe18fb6f52f904f5cd2048686",
     "componentPropertyDefinitions": {
-        "Layout": {
+        "Title#19787:3": {
+            "type": "TEXT"
+        },
+        "Description#19787:7": {
+            "type": "TEXT"
+        },
+        "Show Close Button#19787:11": {
+            "type": "BOOLEAN"
+        },
+        "Show Footer#25162:14": {
+            "type": "BOOLEAN"
+        },
+        "Show Description#25192:0": {
+            "type": "BOOLEAN"
+        },
+        "Contents#25320:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "ec1901cb37dc88360ae8fd2b61f71e630fda7924"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "5c5369d9c22115fd240d7b75ac2a334e9163ea57"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "8670afb7520ac44dfed003e3e9c7cce359897d0c"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "e3d337e6eddbe9ec025fe69520c1cff0bd697b60"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "0c6c58d5b7a159e7db1a0c1ccf32916ca8a51164"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "088624580ee501efed377bb4f42561a387db5699"
+                }
+            ]
+        },
+        "Show Safe Area#25488:8": {
+            "type": "BOOLEAN"
+        },
+        "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
-                "Center",
-                "Left",
-                "None"
+                "Bottom Left",
+                "None",
+                "Bottom Center",
+                "Top Center",
+                "Top Left"
             ]
         }
     }
@@ -10607,22 +10816,20 @@ const metadata$w = {
     "name": "🟢 Callout",
     "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe",
     "componentPropertyDefinitions": {
-        "Show Icon#12598:229": {
+        "Prefix Icon#35087:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Show Prefix Icon#35087:1": {
             "type": "BOOLEAN"
         },
-        "Icon#12598:210": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": [
-                {
-                    "type": "COMPONENT_SET",
-                    "key": "f2c04b68b0bec4ec9145d832de45947030d3b653"
-                }
-            ]
+        "Pressed#35087:2": {
+            "type": "BOOLEAN"
         },
         "Interaction": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
+                "Display",
                 "Actionable",
                 "Dismissible"
             ]
@@ -10637,25 +10844,18 @@ const metadata$w = {
                 "Magic"
             ]
         },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Pressed"
-            ]
-        },
         "Show Title": {
             "type": "VARIANT",
             "variantOptions": [
-                "True",
-                "False"
+                "False",
+                "True"
             ]
         },
-        "Show Link Label": {
+        "Show Link Text": {
             "type": "VARIANT",
             "variantOptions": [
-                "True",
-                "False"
+                "False",
+                "True"
             ]
         }
     }
@@ -10694,61 +10894,60 @@ const metadata$v = {
             "variantOptions": [
                 "Enabled",
                 "Pressed",
+                "Disabled",
                 "Selected",
                 "Selected-Pressed",
+                "Selected-Disabled",
                 "Indeterminate",
                 "Indeterminate-Pressed",
-                "Disabled",
-                "Disabled-Selected",
-                "Disabled-Indeterminate"
+                "Indeterminate-Disabled"
             ]
         }
     }
 };
 
 const metadata$u = {
-    "name": "🟢 Chip Tablist",
-    "key": "d098159beacf7713e9116f0ef38d8a20f64ec84f",
+    "name": "🟢 Checkmark",
+    "key": "fae60fb392f55bde60de1dbccb2f453320068805",
     "componentPropertyDefinitions": {
-        "Tab Count": {
+        "Shape": {
             "type": "VARIANT",
             "variantOptions": [
-                "2",
-                "3",
-                "4",
-                "5",
-                "6",
-                "Max"
+                "Square",
+                "Ghost"
             ]
         },
-        "Variant": {
+        "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Neutral Solid",
-                "Brand Solid"
+                "Medium",
+                "Large"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Selected",
+                "Selected-Pressed",
+                "Indeterminate",
+                "Indeterminate-Pressed",
+                "Disabled",
+                "Disabled-Selected",
+                "Disabled-Indeterminate"
             ]
         }
     }
 };
 
 const metadata$t = {
-    "name": "🟢 Control Chip",
-    "key": "5780d56fc2f9bc4bbd6bc3db93949d8a8b7b7563",
+    "name": "🟢 Chip",
+    "key": "8156ef08d9aaa2b0de1cc4a113ec0c9d0586f831",
     "componentPropertyDefinitions": {
-        "Suffix Icon#8722:82": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
-        },
         "Label#7185:0": {
             "type": "TEXT"
         },
-        "Show Count#7185:42": {
-            "type": "BOOLEAN"
-        },
-        "Icon#8722:41": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
-        },
         "Prefix Icon#8722:0": {
             "type": "INSTANCE_SWAP",
             "preferredValues": [
@@ -10758,24 +10957,52 @@ const metadata$t = {
                 }
             ]
         },
-        "Count#7185:21": {
-            "type": "TEXT"
+        "Suffix Type#32538:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT",
+                    "key": "27343e0e5ab2c66948e9b10fde03d58b5e037212"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "5f0d74c959c49dadf5920b19c6267924982ab130"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "a1233c35c4368aba2439d39bc8aedc37cf95bd86"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "43b6e51bc372e108a4ee17fbf4c75800d95f4b8c"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "19923052d4152393ecdc6e2f5853ea0359849127"
+                }
+            ]
         },
-        "Size": {
+        "Has Suffix#32538:181": {
+            "type": "BOOLEAN"
+        },
+        "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "Medium",
-                "Small"
+                "Solid",
+                "Outline Strong",
+                "Outline Weak"
             ]
         },
-        "Layout": {
+        "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Text Only",
-                "Icon First",
-                "Icon Last",
-                "Icon Both",
-                "Icon Only"
+                "Large",
+                "Medium",
+                "Small"
             ]
         },
         "State": {
@@ -10783,161 +11010,121 @@ const metadata$t = {
             "variantOptions": [
                 "Enabled",
                 "Pressed",
-                "Selected",
-                "Selected-Pressed",
-                "Disabled",
-                "Disabled-Selected"
-            ]
-        }
-    }
-};
-
-const metadata$s = {
-    "name": "🟢 Divider",
-    "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
-    "componentPropertyDefinitions": {
-        "Tone": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Neutral",
-                "Neutral Muted"
+                "Disabled"
             ]
-        }
-    }
-};
-
-const metadata$r = {
-    "name": "🟢 Error State",
-    "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
-    "componentPropertyDefinitions": {
-        "Secondary Action Label#17042:0": {
-            "type": "TEXT"
-        },
-        "Title#16237:0": {
-            "type": "TEXT"
-        },
-        "Description#16237:5": {
-            "type": "TEXT"
         },
-        "Show Buttons#9080:5": {
-            "type": "BOOLEAN"
-        },
-        "Variant": {
+        "Selected": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
-                "Basement"
+                "False",
+                "True"
             ]
         },
-        "Layout": {
+        "Prefix Type": {
             "type": "VARIANT",
             "variantOptions": [
-                "With Title",
-                "Description Only"
+                "None",
+                "Icon",
+                "Avatar",
+                "Image"
             ]
         }
     }
 };
 
-const metadata$q = {
-    "name": "🟢 Extended Action Sheet",
-    "key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb",
+const metadata$s = {
+    "name": "🟢 Chlid",
+    "key": "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc",
     "componentPropertyDefinitions": {
-        "Show Title#17043:12": {
-            "type": "BOOLEAN"
-        },
-        "OS Indicator (Figma Only)#81637:129": {
-            "type": "BOOLEAN"
-        },
-        "Description#14599:13": {
-            "type": "TEXT"
-        },
-        "Title#14599:0": {
-            "type": "TEXT"
-        },
         "Type": {
             "type": "VARIANT",
             "variantOptions": [
-                "Normal",
-                "Destructive"
-            ]
-        },
-        "Action Group Count": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "1",
-                "2"
+                "Child",
+                "Text",
+                "Slot"
             ]
         }
     }
 };
 
-const metadata$p = {
-    "name": "🟢 Extended Floating Action Button",
+const metadata$r = {
+    "name": "🟢 Contextual Floating Button",
     "key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f",
     "componentPropertyDefinitions": {
-        "Label#28936:0": {
-            "type": "TEXT"
-        },
         "Icon#28796:0": {
             "type": "INSTANCE_SWAP",
             "preferredValues": []
         },
-        "Size": {
+        "Label#28936:0": {
+            "type": "TEXT"
+        },
+        "Layout": {
             "type": "VARIANT",
             "variantOptions": [
-                "Small",
-                "Medium"
+                "Icon First",
+                "Icon Only"
             ]
         },
         "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "Neutral Solid",
-                "Layer Floating"
+                "Solid",
+                "Layer"
             ]
         },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
-                "Pressed"
+                "Pressed",
+                "Loading",
+                "Disabled"
             ]
         }
     }
 };
 
-const metadata$o = {
+const metadata$q = {
+    "name": "🟢 Divider",
+    "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
+    "componentPropertyDefinitions": {
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "Neutral Muted"
+            ]
+        }
+    }
+};
+
+const metadata$p = {
     "name": "🟢 Floating Action Button",
-    "key": "1974b94703032585bb9e20bd54743e01094b965c",
+    "key": "65f9e7eede627b893fb8ff94ed9a7d0db900c464",
     "componentPropertyDefinitions": {
-        "Icon#28796:0": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
-        },
-        "State": {
+        "Type": {
             "type": "VARIANT",
             "variantOptions": [
-                "Enabled",
-                "Pressed"
+                "Button",
+                "Menu"
             ]
         }
     }
 };
 
-const metadata$n = {
+const metadata$o = {
     "name": "🟢 Help Bubble",
     "key": "804b327c091278a40d5891939eaed90bb2889659",
     "componentPropertyDefinitions": {
+        "Show Description#62499:0": {
+            "type": "BOOLEAN"
+        },
         "Title#62535:0": {
             "type": "TEXT"
         },
         "Description#62535:98": {
             "type": "TEXT"
         },
-        "Show Description#62499:0": {
-            "type": "BOOLEAN"
-        },
         "Placement": {
             "type": "VARIANT",
             "variantOptions": [
@@ -10954,41 +11141,20 @@ const metadata$n = {
                 "Top-Center",
                 "Top-Right"
             ]
-        },
-        "Show Close Button": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "True",
-                "False"
-            ]
         }
     }
 };
 
-const metadata$m = {
-    "name": "🟢 Identity Placeholder",
-    "key": "808206c07408aa1056ec85a55925e9844e9265c2",
-    "componentPropertyDefinitions": {
-        "Identity": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Person",
-                "Business"
-            ]
-        }
-    }
-};
-
-const metadata$l = {
+const metadata$n = {
     "name": "🟢 Inline Banner",
     "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
     "componentPropertyDefinitions": {
-        "Show Icon#11840:27": {
-            "type": "BOOLEAN"
-        },
         "Link Label#1547:81": {
             "type": "TEXT"
         },
+        "Show Icon#11840:27": {
+            "type": "BOOLEAN"
+        },
         "Interaction": {
             "type": "VARIANT",
             "variantOptions": [
@@ -11020,14 +11186,14 @@ const metadata$l = {
     }
 };
 
-const metadata$k = {
+const metadata$m = {
     "name": "🟢 Main Tab Navigation / Global",
     "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
     "componentPropertyDefinitions": {
-        "Button Label#6409:18": {
+        "Title#6406:6": {
             "type": "TEXT"
         },
-        "Title#6406:6": {
+        "Button Label#6409:18": {
             "type": "TEXT"
         },
         "Title Type": {
@@ -11047,7 +11213,7 @@ const metadata$k = {
     }
 };
 
-const metadata$j = {
+const metadata$l = {
     "name": "🟢 Main Tab Navigation / KR",
     "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
     "componentPropertyDefinitions": {
@@ -11071,11 +11237,11 @@ const metadata$j = {
     }
 };
 
-const metadata$i = {
+const metadata$k = {
     "name": "🟢 Manner Temp",
-    "key": "030dc68a26c24c37090c8b95ae21043855b5d589",
+    "key": "37c0a35f73a730fdfba7929cea91a7590fc93733",
     "componentPropertyDefinitions": {
-        "State": {
+        "Level": {
             "type": "VARIANT",
             "variantOptions": [
                 "L1 (~29.9)",
@@ -11089,21 +11255,15 @@ const metadata$i = {
     }
 };
 
-const metadata$h = {
-    "name": "🟢 Manner Temp (Bar)",
-    "key": "49ca92c450fb5d450be00f69fae709dbb8edc494",
+const metadata$j = {
+    "name": "🟢 Manner Temp Badge",
+    "key": "3ef9a84d4d80046ff9a581136bd56269554a6e00",
     "componentPropertyDefinitions": {
-        "Size": {
+        "Level": {
             "type": "VARIANT",
             "variantOptions": [
-                "Medium"
-            ]
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "L1 (29.9 이하)",
-                "L2 (29.9~36.2)",
+                "L1 (~29.9)",
+                "L2 (30.0~36.2)",
                 "L3 (36.3~37.5)",
                 "L4 (37.6~41.9)",
                 "L5 (42~51.9)",
@@ -11113,63 +11273,82 @@ const metadata$h = {
     }
 };
 
-const metadata$g = {
-    "name": "🟢 Manner Temp Badge",
-    "key": "ac5331cec7a2c75b671df5b85ef247dfd820dd2f",
+const metadata$i = {
+    "name": "🟢 Menu Sheet",
+    "key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb",
     "componentPropertyDefinitions": {
-        "State": {
+        "Title Text#14599:0": {
+            "type": "TEXT"
+        },
+        "Show Header#17043:12": {
+            "type": "BOOLEAN"
+        },
+        "Description Text#21827:0": {
+            "type": "TEXT"
+        },
+        "Show Safe Area#25531:15": {
+            "type": "BOOLEAN"
+        },
+        "Show Description#32984:0": {
+            "type": "BOOLEAN"
+        },
+        "Menu Group Count": {
             "type": "VARIANT",
             "variantOptions": [
-                "L1 (~29.9)",
-                "L2 (30.0~36.2)",
-                "L3 (36.3~37.5)",
-                "L4 (37.6~41.9)",
-                "L5 (42~51.9)",
-                "L6 (52~)"
+                "2",
+                "3",
+                "1"
+            ]
+        },
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Text Only",
+                "Text with Icon"
             ]
         }
     }
 };
 
-const metadata$f = {
+const metadata$h = {
     "name": "🟢 Multiline Text Field",
     "key": "88b2399c930c85f9ce2972163a078bc684b84bbe",
     "componentPropertyDefinitions": {
-        "Indicator#15327:286": {
-            "type": "TEXT"
-        },
-        "Character Count#15327:360": {
-            "type": "TEXT"
+        "Show Header#870:0": {
+            "type": "BOOLEAN"
         },
-        "Max Character Count#15327:175": {
+        "Placeholder#958:0": {
             "type": "TEXT"
         },
-        "Label#15327:323": {
-            "type": "TEXT"
+        "Show Footer#958:25": {
+            "type": "BOOLEAN"
         },
-        "Filled Text#1304:0": {
-            "type": "TEXT"
+        "Show Description#958:50": {
+            "type": "BOOLEAN"
         },
         "Show Character count#958:75": {
             "type": "BOOLEAN"
         },
-        "Show Footer#958:25": {
+        "Show Indicator#1259:0": {
             "type": "BOOLEAN"
         },
-        "Show Description#958:50": {
-            "type": "BOOLEAN"
+        "Filled Text#1304:0": {
+            "type": "TEXT"
+        },
+        "Max Character Count#15327:175": {
+            "type": "TEXT"
         },
         "Description#15327:212": {
             "type": "TEXT"
         },
-        "Show Indicator#1259:0": {
-            "type": "BOOLEAN"
+        "Indicator#15327:286": {
+            "type": "TEXT"
         },
-        "Placeholder#958:0": {
+        "Label#15327:323": {
             "type": "TEXT"
         },
-        "Show Header#870:0": {
-            "type": "BOOLEAN"
+        "Character Count#15327:360": {
+            "type": "TEXT"
         },
         "Size": {
             "type": "VARIANT",
@@ -11200,7 +11379,7 @@ const metadata$f = {
     }
 };
 
-const metadata$e = {
+const metadata$g = {
     "name": "🟢 Progress Circle",
     "key": "6e6779a372cab2485a0e25529bc4dbc9932a7346",
     "componentPropertyDefinitions": {
@@ -11216,7 +11395,8 @@ const metadata$e = {
             "variantOptions": [
                 "Neutral",
                 "Brand",
-                "Static White"
+                "Static White",
+                "Custom(inherit)"
             ]
         },
         "Value": {
@@ -11232,7 +11412,7 @@ const metadata$e = {
     }
 };
 
-const metadata$d = {
+const metadata$f = {
     "name": "🟢 Radio",
     "key": "ac72d9e5ab04a1d59eaf77dffd380fd6e491ecf8",
     "componentPropertyDefinitions": {
@@ -11251,16 +11431,51 @@ const metadata$d = {
             "variantOptions": [
                 "Enabled",
                 "Pressed",
+                "Disabled",
                 "Selected",
                 "Selected-Pressed",
-                "Disabled",
-                "Disabled-Selected"
+                "Selected-Disabled"
             ]
         }
     }
 };
 
-const metadata$c = {
+const metadata$e = {
+    "name": "🟢 Radio Mark",
+    "key": "832d696d6e9566610968cd70f128f500ec009d6a",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Large"
+            ]
+        },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        },
+        "Pressed": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        },
+        "Disabled": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        }
+    }
+};
+
+const metadata$d = {
     "name": "🟢 Range Slider",
     "key": "64fc49184979e0be40aa367ca98868601eb7dad5",
     "componentPropertyDefinitions": {
@@ -11292,21 +11507,21 @@ const metadata$c = {
     }
 };
 
-const metadata$b = {
+const metadata$c = {
     "name": "🟢 Reaction Button",
     "key": "ec43e4e881f7048e95601f8b58c01a0905a174e0",
     "componentPropertyDefinitions": {
-        "Icon#12379:0": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
+        "Label#6397:0": {
+            "type": "TEXT"
         },
         "Show Count#6397:33": {
             "type": "BOOLEAN"
         },
-        "Count#15816:0": {
-            "type": "TEXT"
+        "Icon#12379:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
         },
-        "Label#6397:0": {
+        "Count#15816:0": {
             "type": "TEXT"
         },
         "Size": {
@@ -11332,7 +11547,45 @@ const metadata$b = {
     }
 };
 
+const metadata$b = {
+    "name": "🟢 Resizable.Icon",
+    "key": "1f74eedb6fb186fd201d6ad5b2dbcd46a2bddf3e",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "12",
+                "14",
+                "16",
+                "20",
+                "24",
+                "28",
+                "32"
+            ]
+        }
+    }
+};
+
 const metadata$a = {
+    "name": "🟢 ResizableChild",
+    "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "12",
+                "14",
+                "16",
+                "20",
+                "24",
+                "28",
+                "32"
+            ]
+        }
+    }
+};
+
+const metadata$9 = {
     "name": "🟢 Segmented Control",
     "key": "3ad7133ba52755867f42f9232375f75639e00d58",
     "componentPropertyDefinitions": {
@@ -11356,18 +11609,18 @@ const metadata$a = {
     }
 };
 
-const metadata$9 = {
+const metadata$8 = {
     "name": "🟢 Select Box",
     "key": "38722ffeb4c966256a709155e8ddac50c93d7c60",
     "componentPropertyDefinitions": {
-        "Label#3635:0": {
-            "type": "TEXT"
+        "Show Description#3033:0": {
+            "type": "BOOLEAN"
         },
         "Description #3033:5": {
             "type": "TEXT"
         },
-        "Show Description#3033:0": {
-            "type": "BOOLEAN"
+        "Label#3635:0": {
+            "type": "TEXT"
         },
         "Control": {
             "type": "VARIANT",
@@ -11388,7 +11641,7 @@ const metadata$9 = {
     }
 };
 
-const metadata$8 = {
+const metadata$7 = {
     "name": "🟢 Skeleton",
     "key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a",
     "componentPropertyDefinitions": {
@@ -11400,11 +11653,18 @@ const metadata$8 = {
                 "16",
                 "Full"
             ]
+        },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Magic",
+                "Neutral"
+            ]
         }
     }
 };
 
-const metadata$7 = {
+const metadata$6 = {
     "name": "🟢 Slider",
     "key": "aee027230a478315e380704c4523141e67e464ee",
     "componentPropertyDefinitions": {
@@ -11436,18 +11696,18 @@ const metadata$7 = {
     }
 };
 
-const metadata$6 = {
+const metadata$5 = {
     "name": "🟢 Snackbar",
     "key": "81b17fb8c7d731a19cf8d36a8605559d41414eca",
     "componentPropertyDefinitions": {
-        "Action Button Label#1528:8": {
-            "type": "TEXT"
+        "Show Action#1528:0": {
+            "type": "BOOLEAN"
         },
         "Message#1528:4": {
             "type": "TEXT"
         },
-        "Show Action Button#1528:0": {
-            "type": "BOOLEAN"
+        "Action Label#1528:8": {
+            "type": "TEXT"
         },
         "Variant": {
             "type": "VARIANT",
@@ -11460,210 +11720,132 @@ const metadata$6 = {
     }
 };
 
-const metadata$5 = {
-    "name": "🟢 Standard Navigation",
-    "key": "c07bfe331cf214375fce9ad47cb6fdb459d1fb1b",
-    "componentPropertyDefinitions": {
-        "Title#28176:5": {
-            "type": "BOOLEAN"
-        },
-        "Variant": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Layer Default",
-                "Transparent"
-            ]
-        },
-        "OS": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "iOS",
-                "Android"
-            ]
-        }
-    }
-};
-
 const metadata$4 = {
     "name": "🟢 Switch",
-    "key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3",
+    "key": "65e0e7ba1a0c13b42e5fd0ceb17d5f756128dd6b",
     "componentPropertyDefinitions": {
-        "Label#15191:2": {
+        "Label#36578:0": {
             "type": "TEXT"
         },
         "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Small",
-                "Medium"
+                "16",
+                "24",
+                "32"
             ]
         },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
-                "Selected",
                 "Disabled",
-                "Disabled-Selected"
-            ]
-        }
-    }
-};
-
-const metadata$3 = {
-    "name": "🟢 Tablist",
-    "key": "ffe33411fb8796f7a95d3637b90150007f0dd954",
-    "componentPropertyDefinitions": {
-        "Size": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Small",
-                "Medium"
-            ]
-        },
-        "Layout": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Hug",
-                "Fill"
+                "Selected",
+                "Selected-Disabled"
             ]
         },
-        "Tab Count": {
+        "Label Layout(Figma Only)": {
             "type": "VARIANT",
             "variantOptions": [
-                "2",
-                "3",
-                "4",
-                "5+"
+                "None",
+                "Right",
+                "Left"
             ]
         }
     }
 };
 
-const metadata$2 = {
-    "name": "🟢 Text Button",
-    "key": "601f788792916250e33d04bd3165dee1404342df",
+const metadata$3 = {
+    "name": "🟢 Tabs",
+    "key": "3e3af9f7f235cbcbbe862d5da552ab23e16ff34e",
     "componentPropertyDefinitions": {
-        "Prefix Icon#7561:0": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
-        },
-        "Label#6148:0": {
-            "type": "TEXT"
-        },
-        "Size": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Small",
-                "Medium",
-                "Large"
-            ]
-        },
-        "Layout": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Icon First",
-                "Icon Last"
-            ]
-        },
-        "Tone": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Neutral",
-                "Neutral Subtle",
-                "Brand",
-                "Critical"
-            ]
-        },
-        "State": {
+        "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "Enabled",
-                "Pressed",
-                "Disabled"
+                "Underline",
+                "Chip"
             ]
         }
     }
 };
 
-const metadata$1 = {
+const metadata$2 = {
     "name": "🟢 Text Field",
     "key": "c49873c37a639f0dffdea4efd0eb43760d66c141",
     "componentPropertyDefinitions": {
-        "Suffix Text#15327:138": {
-            "type": "TEXT"
+        "Show Header#870:0": {
+            "type": "BOOLEAN"
         },
-        "Indicator#15327:249": {
+        "Placeholder#958:0": {
             "type": "TEXT"
         },
-        "Label#14964:0": {
-            "type": "TEXT"
+        "Show Footer#958:25": {
+            "type": "BOOLEAN"
         },
-        "Character Count#15327:64": {
-            "type": "TEXT"
+        "Show Description#958:50": {
+            "type": "BOOLEAN"
         },
-        "Description#12626:5": {
-            "type": "TEXT"
+        "Show Character Count#958:75": {
+            "type": "BOOLEAN"
         },
-        "Filled Text#1304:0": {
-            "type": "TEXT"
+        "Show Suffix#958:100": {
+            "type": "BOOLEAN"
         },
-        "Show Suffix Icon#1267:75": {
+        "Show Prefix#958:125": {
             "type": "BOOLEAN"
         },
-        "Show Prefix Icon#1267:50": {
+        "Show Indicator#1259:0": {
+            "type": "BOOLEAN"
+        },
+        "Show Prefix Text#1267:0": {
             "type": "BOOLEAN"
         },
         "Prefix Icon#1267:25": {
             "type": "INSTANCE_SWAP",
             "preferredValues": []
         },
-        "Show Prefix#958:125": {
+        "Show Prefix Icon#1267:50": {
             "type": "BOOLEAN"
         },
-        "Show Suffix#958:100": {
+        "Show Suffix Icon#1267:75": {
             "type": "BOOLEAN"
         },
-        "Show Character Count#958:75": {
-            "type": "BOOLEAN"
+        "Suffix Icon #1267:100": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
         },
-        "Show Footer#958:25": {
+        "Show Suffix Text#1267:125": {
             "type": "BOOLEAN"
         },
-        "Max Character Count#15327:27": {
+        "Filled Text#1304:0": {
             "type": "TEXT"
         },
-        "Show Prefix Text#1267:0": {
-            "type": "BOOLEAN"
+        "Description#12626:5": {
+            "type": "TEXT"
         },
-        "Show Suffix Text#1267:125": {
-            "type": "BOOLEAN"
+        "Label#14964:0": {
+            "type": "TEXT"
         },
-        "Suffix Icon #1267:100": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
+        "Max Character Count#15327:27": {
+            "type": "TEXT"
         },
-        "Show Description#958:50": {
-            "type": "BOOLEAN"
+        "Character Count#15327:64": {
+            "type": "TEXT"
         },
         "Prefix Text#15327:101": {
             "type": "TEXT"
         },
-        "Show Indicator#1259:0": {
-            "type": "BOOLEAN"
-        },
-        "Placeholder#958:0": {
+        "Suffix Text#15327:138": {
             "type": "TEXT"
         },
-        "Show Header#870:0": {
-            "type": "BOOLEAN"
+        "Indicator#15327:249": {
+            "type": "TEXT"
         },
         "Size": {
             "type": "VARIANT",
             "variantOptions": [
                 "Medium",
-                "Large",
-                "XLarge"
+                "Large(Default)"
             ]
         },
         "State": {
@@ -11687,26 +11869,26 @@ const metadata$1 = {
     }
 };
 
-const metadata = {
+const metadata$1 = {
     "name": "🟢 Toggle Button",
     "key": "1d240ee5fd7a56879713e69cbea1b6f006f0ea22",
     "componentPropertyDefinitions": {
-        "Suffix Icon#6122:343": {
+        "Label#6122:49": {
+            "type": "TEXT"
+        },
+        "Prefix Icon#6122:98": {
             "type": "INSTANCE_SWAP",
             "preferredValues": []
         },
-        "Show Prefix Icon#6122:392": {
-            "type": "BOOLEAN"
-        },
         "Show Suffix Icon#6122:147": {
             "type": "BOOLEAN"
         },
-        "Prefix Icon#6122:98": {
+        "Suffix Icon#6122:343": {
             "type": "INSTANCE_SWAP",
             "preferredValues": []
         },
-        "Label#6122:49": {
-            "type": "TEXT"
+        "Show Prefix Icon#6122:392": {
+            "type": "BOOLEAN"
         },
         "Size": {
             "type": "VARIANT",
@@ -11738,11 +11920,53 @@ const metadata = {
     }
 };
 
+const metadata = {
+    "name": "🟢 Top Navigation",
+    "key": "f6d069d65f8ffc8b430fd8f3013910557f36e9da",
+    "componentPropertyDefinitions": {
+        "Show Title#33588:82": {
+            "type": "BOOLEAN"
+        },
+        "OS (Figma Only)": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "iOS",
+                "Android"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Layer Default",
+                "Transparent"
+            ]
+        },
+        "Left": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Back",
+                "Close",
+                "Custom",
+                "None"
+            ]
+        },
+        "Right": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "1 Icon Button",
+                "2 Icon Button",
+                "3 Icon Button",
+                "Text Button",
+                "None"
+            ]
+        }
+    }
+};
+
 var FIGMA_COMPONENTS = {
   __proto__: null,
-  actionButton: metadata$F,
-  actionChip: metadata$E,
-  actionSheet: metadata$D,
+  actionButton: metadata$E,
+  alertDialog: metadata$D,
   avatar: metadata$C,
   avatarStack: metadata$B,
   badge: metadata$A,
@@ -11751,42 +11975,43 @@ var FIGMA_COMPONENTS = {
   bottomSheet: metadata$x,
   callout: metadata$w,
   checkbox: metadata$v,
-  chipTablist: metadata$u,
-  controlChip: metadata$t,
-  divider: metadata$s,
-  errorState: metadata$r,
-  extendedActionSheet: metadata$q,
-  extendedFloatingActionButton: metadata$p,
-  floatingActionButton: metadata$o,
-  helpBubble: metadata$n,
-  identityPlaceholder: metadata$m,
-  inlineBanner: metadata$l,
-  mainTabNavigationGlobal: metadata$k,
-  mainTabNavigationKr: metadata$j,
-  mannerTemp: metadata$i,
-  mannerTempBadge: metadata$g,
-  mannerTempBar: metadata$h,
-  multilineTextField: metadata$f,
-  progressCircle: metadata$e,
-  radio: metadata$d,
-  rangeSlider: metadata$c,
-  reactionButton: metadata$b,
-  segmentedControl: metadata$a,
-  selectBox: metadata$9,
-  skeleton: metadata$8,
-  slider: metadata$7,
-  snackbar: metadata$6,
-  standardNavigation: metadata$5,
+  checkmark: metadata$u,
+  chip: metadata$t,
+  chlid: metadata$s,
+  contextualFloatingButton: metadata$r,
+  divider: metadata$q,
+  floatingActionButton: metadata$p,
+  helpBubble: metadata$o,
+  inlineBanner: metadata$n,
+  mainTabNavigationGlobal: metadata$m,
+  mainTabNavigationKr: metadata$l,
+  mannerTemp: metadata$k,
+  mannerTempBadge: metadata$j,
+  menuSheet: metadata$i,
+  multilineTextField: metadata$h,
+  progressCircle: metadata$g,
+  radio: metadata$f,
+  radioMark: metadata$e,
+  rangeSlider: metadata$d,
+  reactionButton: metadata$c,
+  resizableChild: metadata$a,
+  resizableIcon: metadata$b,
+  segmentedControl: metadata$9,
+  selectBox: metadata$8,
+  skeleton: metadata$7,
+  slider: metadata$6,
+  snackbar: metadata$5,
   switch: metadata$4,
-  tablist: metadata$3,
-  templateBottomFixedBar: metadata$K,
-  templateButtonGroup: metadata$J,
-  templateChipGroup: metadata$I,
-  templateSelectBoxGroup: metadata$H,
-  templateTopNavigation: metadata$G,
-  textButton: metadata$2,
-  textField: metadata$1,
-  toggleButton: metadata
+  tabs: metadata$3,
+  templateButtonGroup: metadata$K,
+  templateChipGroup: metadata$J,
+  templateCompletion: metadata$I,
+  templateErrorState: metadata$H,
+  templateSelectBoxGroup: metadata$G,
+  templateTopNavigation: metadata$F,
+  textField: metadata$2,
+  toggleButton: metadata$1,
+  topNavigation: metadata
 };
 
 function createStaticStyleRepository(styles) {
@@ -11969,7 +12194,10 @@ function createVariableService({ variableRepository, inferCompareFunction }) {
     };
 }
 
-const styleRepository = createStaticStyleRepository(FIGMA_TEXT_STYLES);
+const styleRepository = createStaticStyleRepository([
+    ...FIGMA_TEXT_STYLES,
+    ...FIGMA_FILL_STYLES
+]);
 const variableRepository = createStaticVariableRepository({
     variables: FIGMA_VARIABLES,
     variableCollections: FIGMA_VARIABLE_COLLECTIONS