@seed-design/figma 0.1.6 → 0.1.8

package/lib/codegen/targets/react/index.js

@@ -65,11 +65,12 @@ function stringifyElement(element, options = {}) {
         const { tag, props, children, meta: { comment, source, importPath } } = node;
         if (importPath) {
             const existing = importMap.get(importPath);
+            const [namespace] = tag.split(".");
             if (existing) {
-                existing.add(tag);
+                existing.add(namespace);
             } else {
                 importMap.set(importPath, new Set([
-                    tag
+                    namespace
                 ]));
             }
         }
@@ -88,6 +89,7 @@ function stringifyElement(element, options = {}) {
                 return `${key}={${value}}`;
             }
             if (typeof value === "boolean") {
+                if (value === true) return key;
                 return `${key}={${value}}`;
             }
             if (isElement(value)) {
@@ -514,10 +516,9 @@ function createPropsConverter({ handlers, shorthands, defaults }) {
 }
 
 function traverseNode(node, callback) {
+    callback(node);
     if ("children" in node) {
         node.children.forEach((child)=>traverseNode(child, callback));
-    } else {
-        callback(node);
     }
 }
 function findOne(node, callback) {
@@ -562,7 +563,7 @@ function getFirstStrokeVariable(node) {
     return node.boundVariables?.strokes?.[0];
 }
 
-function createValueResolver({ variableService, variableNameFormatter, styleService, styleNameFormatter, rawValueFormatters, shouldInferVariableName }) {
+function createValueResolver({ variableService, variableNameFormatter, styleService, textStyleNameFormatter, fillStyleResolver, rawValueFormatters, shouldInferVariableName }) {
     function getVariableName(key) {
         const slug = variableService.getSlug(key);
         if (!slug) {
@@ -582,15 +583,6 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
         }
         return getVariableName(inferred.key);
     }
-    function getStyleName(key) {
-        const slug = styleService.getSlug(key);
-        if (!slug) {
-            return undefined;
-        }
-        return styleNameFormatter({
-            slug
-        });
-    }
     function processColor(key, value, scope) {
         if (key) {
             return getVariableName(key);
@@ -600,6 +592,15 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
         }
         return undefined;
     }
+    function processFillStyle(key) {
+        const slug = styleService.getSlug(key);
+        if (!slug) {
+            return undefined;
+        }
+        return fillStyleResolver({
+            slug
+        });
+    }
     function processDimension(key, value, scope) {
         if (key) {
             return getVariableName(key);
@@ -650,7 +651,7 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
         paddingTop: (node)=>processDimension(node.boundVariables?.paddingTop?.id, node.paddingTop, "GAP"),
         paddingBottom: (node)=>processDimension(node.boundVariables?.paddingBottom?.id, node.paddingBottom, "GAP"),
         itemSpacing: (node)=>processDimension(node.boundVariables?.itemSpacing?.id, node.itemSpacing, "GAP"),
-        frameFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "FRAME_FILL"),
+        frameFill: (node)=>node.fillStyleKey ? processFillStyle(node.fillStyleKey) : processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "FRAME_FILL"),
         shapeFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "SHAPE_FILL"),
         textFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "TEXT_FILL"),
         stroke: (node)=>processColor(getFirstStrokeVariable(node)?.id, getFirstStroke(node)?.color, "STROKE_COLOR"),
@@ -663,10 +664,14 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
         lineHeight: (node)=>processFontDimension(node.boundVariables?.lineHeight?.[0]?.id, node.style.lineHeightPx, "LINE_HEIGHT")
     };
     function getTextStyleValue(node) {
-        if (node.textStyleKey) {
-            return getStyleName(node.textStyleKey);
+        if (!node.textStyleKey) return undefined;
+        const slug = styleService.getSlug(node.textStyleKey);
+        if (!slug) {
+            return undefined;
         }
-        return undefined;
+        return textStyleNameFormatter({
+            slug
+        });
     }
     return {
         getFormattedValue,
@@ -810,8 +815,16 @@ function createTypeStylePropsConverter({ valueResolver }) {
 function createFrameFillPropsConverter(valueResolver) {
     return definePropsConverter((node)=>{
         const bg = valueResolver.getFormattedValue.frameFill(node);
+        if (bg === undefined || typeof bg === "string") {
+            return {
+                bg
+            };
+        }
         return {
-            bg
+            bgGradient: bg.value,
+            ...bg.direction && {
+                bgGradientDirection: bg.direction
+            }
         };
     });
 }
@@ -974,7 +987,7 @@ function createInstanceTransformer({ iconHandler, propsConverters, componentHand
         }
         const componentHandler = componentSetKey ? componentHandlers[componentSetKey] : componentHandlers[componentKey];
         if (componentHandler) {
-            return componentHandler.transform(node);
+            return componentHandler.transform(node, traverse);
         }
         return frameTransformer(node, traverse);
     });
@@ -997,128 +1010,126 @@ function createTextTransformer({ propsConverters }) {
 }
 
 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 Divider": {
+        "Show Button#28427:7": {
+            "type": "BOOLEAN"
+        },
+        "Show Top Navigation#28427:8": {
+            "type": "BOOLEAN"
+        },
+        "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": {
@@ -1143,13 +1154,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": [
@@ -1158,36 +1178,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": [
@@ -1229,100 +1242,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"
             ]
         }
     }
@@ -1330,12 +1271,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": {
@@ -1350,13 +1288,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",
@@ -1364,24 +1311,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"
             ]
         }
     }
@@ -1418,13 +1352,6 @@ const metadata$A = {
                 "Weak",
                 "Outline"
             ]
-        },
-        "Shape": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Rectangle",
-                "Pill"
-            ]
         }
     }
 };
@@ -1433,6 +1360,9 @@ const metadata$z = {
     "name": "🟢 Bottom Navigation / Global",
     "key": "983650a4dff639b38bf68ff6004efc8ec4fb5c20",
     "componentPropertyDefinitions": {
+        "Show Safe Area#25445:3": {
+            "type": "BOOLEAN"
+        },
         "OS": {
             "type": "VARIANT",
             "variantOptions": [
@@ -1454,6 +1384,9 @@ const metadata$y = {
     "name": "🟢 Bottom Navigation / KR",
     "key": "accc7cea2d0250cdfbf0197ce00a677c6b9e0dae",
     "componentPropertyDefinitions": {
+        "Show Safe Area#25445:0": {
+            "type": "BOOLEAN"
+        },
         "OS": {
             "type": "VARIANT",
             "variantOptions": [
@@ -1468,37 +1401,84 @@ const metadata$x = {
     "name": "🟢 Bottom Sheet",
     "key": "16bafa5d1155896fe18fb6f52f904f5cd2048686",
     "componentPropertyDefinitions": {
-        "Layout": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Center",
-                "Left",
-                "None"
-            ]
-        }
-    }
-};
-
-const metadata$w = {
-    "name": "🟢 Callout",
-    "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe",
-    "componentPropertyDefinitions": {
-        "Show Icon#12598:229": {
-            "type": "BOOLEAN"
+        "Title#19787:3": {
+            "type": "TEXT"
         },
-        "Icon#12598:210": {
-            "type": "INSTANCE_SWAP",
+        "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": "f2c04b68b0bec4ec9145d832de45947030d3b653"
+                    "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": [
+                "Bottom Left",
+                "None",
+                "Bottom Center",
+                "Top Center",
+                "Top Left"
+            ]
+        }
+    }
+};
+
+const metadata$w = {
+    "name": "🟢 Callout",
+    "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe",
+    "componentPropertyDefinitions": {
+        "Prefix Icon#35087:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Show Prefix Icon#35087:1": {
+            "type": "BOOLEAN"
+        },
+        "Pressed#35087:2": {
+            "type": "BOOLEAN"
+        },
         "Interaction": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
+                "Display",
                 "Actionable",
                 "Dismissible"
             ]
@@ -1513,25 +1493,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"
             ]
         }
     }
@@ -1570,61 +1543,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": [
@@ -1634,24 +1606,48 @@ 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"
+                }
+            ]
         },
-        "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": {
@@ -1659,161 +1655,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": [
@@ -1830,41 +1786,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": [
@@ -1896,14 +1831,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": {
@@ -1923,7 +1858,7 @@ const metadata$k = {
     }
 };
 
-const metadata$j = {
+const metadata$l = {
     "name": "🟢 Main Tab Navigation / KR",
     "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
     "componentPropertyDefinitions": {
@@ -1947,11 +1882,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)",
@@ -1965,21 +1900,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)",
@@ -1989,63 +1918,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",
@@ -2076,7 +2024,7 @@ const metadata$f = {
     }
 };
 
-const metadata$e = {
+const metadata$g = {
     "name": "🟢 Progress Circle",
     "key": "6e6779a372cab2485a0e25529bc4dbc9932a7346",
     "componentPropertyDefinitions": {
@@ -2092,7 +2040,8 @@ const metadata$e = {
             "variantOptions": [
                 "Neutral",
                 "Brand",
-                "Static White"
+                "Static White",
+                "Custom"
             ]
         },
         "Value": {
@@ -2108,7 +2057,7 @@ const metadata$e = {
     }
 };
 
-const metadata$d = {
+const metadata$f = {
     "name": "🟢 Radio",
     "key": "ac72d9e5ab04a1d59eaf77dffd380fd6e491ecf8",
     "componentPropertyDefinitions": {
@@ -2127,16 +2076,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": {
@@ -2168,21 +2152,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": {
@@ -2208,7 +2192,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": {
@@ -2232,18 +2254,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",
@@ -2264,7 +2286,7 @@ const metadata$9 = {
     }
 };
 
-const metadata$8 = {
+const metadata$7 = {
     "name": "🟢 Skeleton",
     "key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a",
     "componentPropertyDefinitions": {
@@ -2276,11 +2298,18 @@ const metadata$8 = {
                 "16",
                 "Full"
             ]
+        },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Magic",
+                "Neutral"
+            ]
         }
     }
 };
 
-const metadata$7 = {
+const metadata$6 = {
     "name": "🟢 Slider",
     "key": "aee027230a478315e380704c4523141e67e464ee",
     "componentPropertyDefinitions": {
@@ -2304,57 +2333,33 @@ const metadata$7 = {
         "Marker": {
             "type": "VARIANT",
             "variantOptions": [
-                "None",
-                "Min Max",
-                "All"
-            ]
-        }
-    }
-};
-
-const metadata$6 = {
-    "name": "🟢 Snackbar",
-    "key": "81b17fb8c7d731a19cf8d36a8605559d41414eca",
-    "componentPropertyDefinitions": {
-        "Action Button Label#1528:8": {
-            "type": "TEXT"
-        },
-        "Message#1528:4": {
-            "type": "TEXT"
-        },
-        "Show Action Button#1528:0": {
-            "type": "BOOLEAN"
-        },
-        "Variant": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Default",
-                "Positive",
-                "Critical"
+                "None",
+                "Min Max",
+                "All"
             ]
         }
     }
 };
 
 const metadata$5 = {
-    "name": "🟢 Standard Navigation",
-    "key": "c07bfe331cf214375fce9ad47cb6fdb459d1fb1b",
+    "name": "🟢 Snackbar",
+    "key": "81b17fb8c7d731a19cf8d36a8605559d41414eca",
     "componentPropertyDefinitions": {
-        "Title#28176:5": {
+        "Show Action#1528:0": {
             "type": "BOOLEAN"
         },
-        "Variant": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Layer Default",
-                "Transparent"
-            ]
+        "Message#1528:4": {
+            "type": "TEXT"
         },
-        "OS": {
+        "Action Label#1528:8": {
+            "type": "TEXT"
+        },
+        "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "iOS",
-                "Android"
+                "Default",
+                "Positive",
+                "Critical"
             ]
         }
     }
@@ -2380,166 +2385,103 @@ const metadata$4 = {
                 "Enabled",
                 "Selected",
                 "Disabled",
-                "Disabled-Selected"
+                "Selected-Disabled"
             ]
         }
     }
 };
 
 const metadata$3 = {
-    "name": "🟢 Tablist",
-    "key": "ffe33411fb8796f7a95d3637b90150007f0dd954",
+    "name": "🟢 Tabs",
+    "key": "3e3af9f7f235cbcbbe862d5da552ab23e16ff34e",
     "componentPropertyDefinitions": {
-        "Size": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Small",
-                "Medium"
-            ]
-        },
-        "Layout": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Hug",
-                "Fill"
-            ]
-        },
-        "Tab Count": {
+        "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "2",
-                "3",
-                "4",
-                "5+"
+                "Underline",
+                "Chip"
             ]
         }
     }
 };
 
 const metadata$2 = {
-    "name": "🟢 Text Button",
-    "key": "601f788792916250e33d04bd3165dee1404342df",
-    "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": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Pressed",
-                "Disabled"
-            ]
-        }
-    }
-};
-
-const metadata$1 = {
     "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": {
@@ -2563,26 +2505,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",
@@ -2614,11 +2556,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,
@@ -2627,42 +2611,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
 };
 
 // TODO: move this file to relevant directory
@@ -2683,20 +2668,20 @@ function handleSizeProp(size) {
     }
 }
 
-const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("action-button");
-const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$F.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("action-button");
+const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$E.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
                 children: [
-                    createLocalSnippetElement$n("Icon", {
+                    createSeedReactElement("Icon", {
                         svg: ctx.iconHandler.transform(props["Icon#7574:0"])
                     })
                 ]
             })).with("Icon First", ()=>({
                 layout: "withText",
                 children: [
-                    createLocalSnippetElement$n("PrefixIcon", {
+                    createSeedReactElement("PrefixIcon", {
                         svg: ctx.iconHandler.transform(props["Prefix Icon#5987:305"])
                     }),
                     props["Label#5987:61"].value
@@ -2705,7 +2690,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$F.key,
                 layout: "withText",
                 children: [
                     props["Label#5987:61"].value,
-                    createLocalSnippetElement$n("SuffixIcon", {
+                    createSeedReactElement("SuffixIcon", {
                         svg: ctx.iconHandler.transform(props["Suffix Icon#5987:244"])
                     })
                 ]
@@ -2724,222 +2709,170 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$F.key,
             variant: camelCase(props.Variant.value),
             layout
         };
-        return createLocalSnippetElement$n("ActionButton", commonProps, children);
+        return createLocalSnippetElement$p("ActionButton", commonProps, children);
     });
-
-const createActionChipHandler = (ctx)=>defineComponentHandler(metadata$E.key, ({ componentProperties: props })=>{
+const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
+const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTTON_GHOST_BUTTON_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
                 children: [
                     createSeedReactElement("Icon", {
-                        svg: ctx.iconHandler.transform(props["Icon#8714:0"])
+                        svg: ctx.iconHandler.transform(props["Icon#30525:15"])
                     })
                 ]
             })).with("Icon First", ()=>({
                 layout: "withText",
                 children: [
                     createSeedReactElement("PrefixIcon", {
-                        svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"])
+                        svg: ctx.iconHandler.transform(props["Prefix Icon#30511:3"])
                     }),
-                    props["Label#7185:0"].value
+                    props["Label#30511:2"].value
                 ]
             })).with("Icon Last", ()=>({
                 layout: "withText",
                 children: [
-                    props["Label#7185:0"].value,
-                    createSeedReactElement("SuffixIcon", {
-                        svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"])
-                    })
-                ]
-            })).with("Icon Both", ()=>({
-                layout: "withText",
-                children: [
-                    createSeedReactElement("PrefixIcon", {
-                        svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"])
-                    }),
-                    props["Label#7185:0"].value,
+                    props["Label#30511:2"].value,
                     createSeedReactElement("SuffixIcon", {
-                        svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"])
+                        svg: ctx.iconHandler.transform(props["Suffix Icon#30525:0"])
                     })
                 ]
             })).with("Text Only", ()=>({
                 layout: "withText",
-                children: props["Label#7185:0"].value
+                children: props["Label#30511:2"].value
             })).exhaustive();
         const commonProps = {
-            size: handleSizeProp(props.Size.value),
-            layout,
             ...states.includes("Disabled") && {
                 disabled: true
             },
-            ...props["Show Count#7185:42"].value && {
-                count: Number(props["Count#7185:21"].value)
+            ...states.includes("Loading") && {
+                loading: true
+            },
+            size: handleSizeProp(props.Size.value),
+            variant: "ghost",
+            layout,
+            ...props.Bleed.value === "true" && {
+                bleedX: "asPadding",
+                bleedY: "asPadding"
             }
         };
-        return createSeedReactElement("ActionChip", commonProps, children);
+        return createLocalSnippetElement$p("ActionButton", commonProps, children);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("action-sheet");
-const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
-const createActionSheetItemHandler = (_ctx)=>defineComponentHandler(ACTION_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            label: props["Label#15420:4"].value,
-            tone: camelCase(props.Tone.value),
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createLocalSnippetElement$m("ActionSheetItem", commonProps);
-    });
-const createActionSheetHandler = (ctx)=>{
-    const actionSheetItemHandler = createActionSheetItemHandler();
-    return defineComponentHandler(metadata$D.key, (node)=>{
-        const { componentProperties: props } = node;
-        const contentProps = match(props.Header.value).with("None", ()=>({
-                title: undefined,
-                description: undefined
-            })).with("Title Only", ()=>({
-                title: props["Title#15641:37"].value,
-                description: undefined
-            })).with("Description Only", ()=>({
-                title: undefined,
-                description: props["Description#15641:70"].value
-            })).with("Title With Description", ()=>({
-                title: props["Title#15641:37"].value,
-                description: props["Description#15641:70"].value
-            })).exhaustive();
-        const items = findAllInstances({
+const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger$3 } = createLocalSnippetHelper("action-button");
+const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
+const createAlertDialogHandler = (_ctx)=>defineComponentHandler(metadata$D.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const alertDialogHeader = createLocalSnippetElement$o("AlertDialogHeader", undefined, [
+            ...props["Show Title#20361:14"].value ? [
+                createLocalSnippetElement$o("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
+            ] : [],
+            createLocalSnippetElement$o("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
+        ]);
+        const footerNodes = findAllInstances({
             node,
-            key: actionSheetItemHandler.key
+            key: ALERT_DIALOG_FOOTER_KEY
         });
-        const contentChildren = items.map(actionSheetItemHandler.transform);
-        const content = createLocalSnippetElement$m("ActionSheetContent", contentProps, contentChildren, {
-            comment: contentProps.title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
-        });
-        const trigger = createLocalSnippetElement$m("ActionSheetTrigger", {
-            asChild: true
-        }, createElement("button", undefined, "열기", {
-            comment: "ActionSheet을 여는 요소를 제공해주세요."
-        }));
-        return createLocalSnippetElement$m("ActionSheet", undefined, [
-            trigger,
-            content
+        if (footerNodes.length === 0 || footerNodes.length > 1) {
+            return createLocalSnippetElement$o("AlertDialog", undefined, alertDialogHeader, {
+                comment: "Footer 영역을 확인해주세요."
+            });
+        }
+        const footerNode = footerNodes[0];
+        const footerNodeProps = traverse(footerNode)?.props;
+        const buttons = footerNode.children.map(traverse);
+        const alertDialogFooterChildren = match(footerNode.componentProperties.Type.value).with("Single", ()=>buttons).with("Neutral", "Critical", ()=>createSeedReactElement("ResponsivePair", footerNodeProps, buttons)).with("Neutral (Overflow)", "Critical (Overflow)", "Nonpreferred", ()=>createSeedReactElement("VStack", footerNodeProps, buttons)).exhaustive();
+        const alertDialogFooter = createLocalSnippetElement$o("AlertDialogFooter", undefined, alertDialogFooterChildren);
+        return createLocalSnippetElement$o("AlertDialogRoot", {
+            open: true
+        }, [
+            createLocalSnippetElement$o("AlertDialogTrigger", {
+                asChild: true
+            }, createLocalSnippetElementTrigger$3("ActionButton", {}, "AlertDialog 열기")),
+            createLocalSnippetElement$o("AlertDialogContent", undefined, [
+                alertDialogHeader,
+                alertDialogFooter
+            ])
         ]);
     });
-};
 
-const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("app-bar");
-const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
-const createAppBarMainHandler = (_ctx)=>defineComponentHandler(APP_BAR_MAIN_KEY, ({ componentProperties: props })=>{
-        const { title, subtitle, layout } = match(props.Type.value).with("Title", ()=>({
+const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("app-bar");
+const APP_BAR_TITLE_KEY = "d2cc4f615b2b44098be89448ad1c573f94af0355";
+const APP_BAR_LEFT_ICON_BUTTON_KEY = "5a953f7bafc0df744777517458396e9f6c915825";
+const APP_BAR_RIGHT_ICON_BUTTON_KEY = "c08db793288077e53bd45ef11aa419a835e88fce";
+const createAppBarMainHandler = (_ctx)=>{
+    return defineComponentHandler(APP_BAR_TITLE_KEY, ({ componentProperties: props })=>{
+        const { title, subtitle } = match(props.Type.value).with("Title", ()=>({
                 title: props["Title#16944:0"].value,
-                subtitle: undefined,
-                layout: undefined
+                subtitle: undefined
             })).with("Title-Subtitle", ()=>({
                 title: props["Title#16944:0"].value,
-                subtitle: props["Subtitle#16958:9"].value,
-                layout: "withSubtitle"
-            })).otherwise(()=>({
+                subtitle: props["Subtitle#16958:9"].value
+            })).with("Logo (Figma Only)", ()=>({
                 title: undefined,
-                subtitle: undefined,
-                layout: undefined
-            }));
-        const commonProps = {
-            title,
-            subtitle,
-            layout
-        };
-        return createLocalSnippetElement$l("AppBarMain", commonProps, undefined, {
-            comment: title === undefined ? "Title을 제공해주세요." : undefined
+                subtitle: undefined
+            })).exhaustive();
+        if (title) {
+            return createLocalSnippetElement$n("AppBarMain", {
+                title,
+                subtitle
+            });
+        }
+        return createLocalSnippetElement$n("AppBarMain", undefined, undefined, {
+            comment: "AppBarMain 내부를 직접 작성해주세요."
         });
     });
-const APP_BAR_LEFT_KEY = "e5d2e47052a22395db79f195a0991a570dc1b6c9";
-const createAppBarLeftHandler = (ctx)=>defineComponentHandler(APP_BAR_LEFT_KEY, (node)=>{
-        const props = node.componentProperties;
-        const children = (()=>{
-            switch(props.Action.value){
-                case "Back":
-                    return createLocalSnippetElement$l("AppBarBackButton");
-                case "Close":
-                    return createLocalSnippetElement$l("AppBarCloseButton");
-                case "Other":
-                    {
-                        const iconNode = findOne(node, (child)=>child.type === "INSTANCE" && child.name === "Icon");
-                        if (!iconNode) {
-                            return undefined;
-                        }
-                        return createLocalSnippetElement$l("AppBarIconButton", undefined, ctx.iconHandler.transform(iconNode), {
-                            comment: "aria-label 또는 aria-labelledby를 제공해주세요."
-                        });
-                    }
-            }
-        })();
-        return createLocalSnippetElement$l("AppBarLeft", undefined, children);
-    });
-const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
-const createAppBarRightHandler = (ctx)=>defineComponentHandler(APP_BAR_RIGHT_KEY, (node)=>{
-        const props = node.componentProperties;
-        const children = (()=>{
-            switch(props.Type.value){
-                case "1 Text":
-                    {
-                        const textNode = findOne(node, (child)=>child.type === "TEXT");
-                        return textNode?.characters;
-                    }
-                default:
-                    {
-                        const iconNodes = findAll(node, (child)=>child.type === "INSTANCE" && child.name === "Icon");
-                        return iconNodes.map((iconNode)=>createLocalSnippetElement$l("AppBarIconButton", undefined, ctx.iconHandler.transform(iconNode), {
-                                comment: "aria-label 또는 aria-labelledby를 제공해주세요."
-                            }));
-                    }
-            }
-        })();
-        return createLocalSnippetElement$l("AppBarRight", undefined, children);
-    });
+};
 const createAppBarHandler = (ctx)=>{
     const appBarMainHandler = createAppBarMainHandler();
-    const appBarLeftHandler = createAppBarLeftHandler(ctx);
-    const appBarRightHandler = createAppBarRightHandler(ctx);
-    return defineComponentHandler(metadata$5.key, (node)=>{
+    return defineComponentHandler(metadata.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const theme = (()=>{
-            switch(props.OS.value){
-                case "Android":
-                    return "android";
-                case "iOS":
-                    return "cupertino";
+        const { theme, tone } = {
+            theme: match(props["OS (Figma Only)"].value).with("Android", ()=>"android").with("iOS", ()=>"cupertino").exhaustive(),
+            tone: match(props.Variant.value).with("Layer Default", ()=>"layer").with("Transparent", ()=>"transparent").exhaustive()
+        };
+        const main = (()=>{
+            if (!props["Show Title#33588:82"].value) {
+                return undefined;
             }
-        })();
-        const tone = (()=>{
-            switch(props.Variant.value){
-                case "Layer Default":
-                    return "layer";
-                case "Transparent":
-                    return "transparent";
+            const [mainNode] = findAllInstances({
+                node,
+                key: APP_BAR_TITLE_KEY
+            });
+            if (!mainNode) {
+                return undefined;
             }
+            return appBarMainHandler.transform(mainNode, traverse);
         })();
-        const mainNode = findAllInstances({
-            key: appBarMainHandler.key,
-            node
-        });
-        const onlyMainNode = mainNode.length === 1 ? mainNode[0] : undefined;
-        const main = onlyMainNode ? appBarMainHandler.transform(onlyMainNode) : undefined;
-        const leftNode = findAllInstances({
-            key: appBarLeftHandler.key,
-            node
-        });
-        const onlyLeftNode = leftNode.length === 1 ? leftNode[0] : undefined;
-        const left = onlyLeftNode ? appBarLeftHandler.transform(onlyLeftNode) : undefined;
-        const rightNode = findAllInstances({
-            key: appBarRightHandler.key,
-            node
-        });
-        const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
-        const right = onlyRightNode ? appBarRightHandler.transform(onlyRightNode) : undefined;
-        return createLocalSnippetElement$l("AppBar", {
+        const leftChildren = match(props.Left.value).with("None", ()=>undefined).with("Back", ()=>[
+                createLocalSnippetElement$n("AppBarBackButton")
+            ]).with("Close", ()=>[
+                createLocalSnippetElement$n("AppBarCloseButton")
+            ]).with("Custom", ()=>{
+            const buttons = findAllInstances({
+                node,
+                key: APP_BAR_LEFT_ICON_BUTTON_KEY
+            });
+            if (buttons.length > 0) {
+                return buttons.map((button)=>createLocalSnippetElement$n("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
+                        comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
+                    }));
+            }
+            return undefined;
+        }).exhaustive();
+        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$n("AppBarLeft", {}, leftChildren) : undefined;
+        const rightChildren = match(props.Right.value).with("None", ()=>undefined).with("1 Icon Button", "2 Icon Button", "3 Icon Button", ()=>{
+            const buttons = findAllInstances({
+                node,
+                key: APP_BAR_RIGHT_ICON_BUTTON_KEY
+            });
+            return buttons.map((button)=>createLocalSnippetElement$n("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]), {
+                    comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
+                }));
+        }).with("Text Button", ()=>undefined).exhaustive();
+        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$n("AppBarRight", {}, rightChildren) : undefined;
+        return createLocalSnippetElement$n("AppBar", {
             theme,
             tone
         }, [
@@ -2952,40 +2885,50 @@ const createAppBarHandler = (ctx)=>{
     });
 };
 
-const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(metadata$m.key, ({ componentProperties: props })=>{
+const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
+const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
         return createSeedReactElement("IdentityPlaceholder", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("avatar");
 const createAvatarHandler = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler();
-    return defineComponentHandler(metadata$C.key, (node)=>{
+    return defineComponentHandler(metadata$C.key, (node, traverse)=>{
         const [placeholder] = findAllInstances({
             node,
             key: identityPlaceholderHandler.key
         });
         const { componentProperties: props } = node;
-        const avatarHasSrc = props["Show Image#71850:57"].value;
+        const avatarHasSrc = props["Has Image Contents#33407:0"].value;
         const commonProps = {
             ...avatarHasSrc && {
                 // Placeholder
                 src: `https://placehold.co/${props.Size.value}x${props.Size.value}`
             },
             ...placeholder && {
-                fallback: identityPlaceholderHandler.transform(placeholder)
+                fallback: identityPlaceholderHandler.transform(placeholder, traverse)
+            },
+            ...props["Badge"].value !== "None" && {
+                badgeMask: camelCase(props["Badge"].value)
             },
             size: props.Size.value
         };
-        return createLocalSnippetElement$k("Avatar", commonProps, props["Show Badge#1398:26"].value ? createLocalSnippetElement$k("AvatarBadge", {}) : undefined, {
+        return createLocalSnippetElement$m("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$m("AvatarBadge", {
+            asChild: true
+        }, createElement("img", {
+            src: "https://placehold.co/20x20"
+        }), {
+            comment: "뱃지를 설명하는 alt 텍스트를 제공해야 합니다."
+        }), {
             comment: avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
     return defineComponentHandler(metadata$B.key, (node)=>{
@@ -2998,7 +2941,7 @@ const createAvatarStackHandler = (ctx)=>{
             size: props.Size.value
         };
         const avatarStackChildren = avatarNodes.map(avatarHandler.transform);
-        return createLocalSnippetElement$j("AvatarStack", commonProps, avatarStackChildren);
+        return createLocalSnippetElement$l("AvatarStack", commonProps, avatarStackChildren);
     });
 };
 
@@ -3006,29 +2949,58 @@ const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$A.key, ({ com
         const commonProps = {
             size: handleSizeProp(props.Size.value),
             tone: camelCase(props.Tone.value),
-            variant: camelCase(props.Variant.value),
-            shape: camelCase(props.Shape.value)
+            variant: camelCase(props.Variant.value)
         };
         return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("callout");
-const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$w.key, ({ componentProperties: props, children })=>{
-        const tag = (()=>{
-            switch(props.Interaction.value){
-                case "Default":
-                    return "Callout";
-                case "Actionable":
-                    return "ActionableCallout";
-                case "Dismissible":
-                    return "DismissibleCallout";
-                default:
-                    return "Callout";
+const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("bottom-sheet");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger$2 } = createLocalSnippetHelper("action-button");
+// TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
+const BOTTOM_SHEET_FOOTER_KEY = "de6c65d34cc4a01c18c9a7c0ded34635170ca11f";
+const BOTTOM_SHEET_BODY_KEY = "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc";
+const createBottomSheetHandler = (_ctx)=>defineComponentHandler(metadata$x.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const headerAlign = match(props["Header Layout"].value).with("Bottom Left", "Top Left", ()=>"left").with("Bottom Center", "Top Center", ()=>"center").with("None", ()=>undefined).exhaustive();
+        const contentProps = {
+            title: props["Title#19787:3"].value,
+            ...props["Show Description#25192:0"].value === true && {
+                description: props["Description#19787:7"].value
+            },
+            ...props["Show Close Button#19787:11"].value === false && {
+                showCloseButton: false
             }
-        })();
+        };
+        const bodyNodes = findAllInstances({
+            node,
+            key: BOTTOM_SHEET_BODY_KEY
+        });
+        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$k("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$k("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
+        const footerNodes = findAllInstances({
+            node,
+            key: BOTTOM_SHEET_FOOTER_KEY
+        });
+        const bottomSheetFooter = props["Show Footer#25162:14"] && footerNodes.length === 1 ? createLocalSnippetElement$k("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
+        return createLocalSnippetElement$k("BottomSheetRoot", {
+            defaultOpen: true,
+            headerAlign
+        }, [
+            createLocalSnippetElement$k("BottomSheetTrigger", {
+                asChild: true
+            }, createLocalSnippetElementTrigger$2("ActionButton", {}, "BottomSheet 열기")),
+            createLocalSnippetElement$k("BottomSheetContent", contentProps, [
+                bottomSheetBody,
+                bottomSheetFooter
+            ])
+        ]);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("callout");
+const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$w.key, ({ componentProperties: props, children })=>{
+        const tag = match(props.Interaction.value).with("Display", ()=>"Callout").with("Actionable", ()=>"ActionableCallout").with("Dismissible", ()=>"DismissibleCallout").exhaustive();
         const textNode = children.find((child)=>child.type === "TEXT");
         if (!textNode) {
-            return createLocalSnippetElement$i(tag, undefined, undefined, {
+            return createLocalSnippetElement$j(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -3071,17 +3043,19 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$w.key, ({ co
             tone: camelCase(props.Tone.value),
             title,
             description,
-            linkProps: {
-                children: linkLabel
+            ...linkLabel && {
+                linkProps: {
+                    children: linkLabel
+                }
             },
-            ...props["Icon#12598:210"].value && {
-                prefixIcon: ctx.iconHandler.transform(props["Icon#12598:210"])
+            ...props["Show Prefix Icon#35087:1"].value && {
+                prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#35087:0"])
             }
         };
-        return createLocalSnippetElement$i(tag, commonProps);
+        return createLocalSnippetElement$j(tag, commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("checkbox");
+const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("checkbox");
 const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$v.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
@@ -3100,105 +3074,89 @@ const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$v.key, ({
                 disabled: true
             }
         };
-        return createLocalSnippetElement$h("Checkbox", commonProps);
+        return createLocalSnippetElement$i("Checkbox", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("chip-tabs");
-const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
-const createChipTabsItemHandler = (_ctx)=>defineComponentHandler(CHIP_TABS_ITEM_KEY, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("chip");
+const createChipHandler = (ctx)=>{
+    const avatarHandler = createAvatarHandler();
+    return defineComponentHandler(metadata$t.key, (node, traverse)=>{
+        const props = node.componentProperties;
         const states = props.State.value.split("-");
+        const prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$h("Chip.PrefixIcon", undefined, ctx.iconHandler.transform(props["Prefix Icon#8722:0"]))).with("Avatar", ()=>{
+            const [avatar] = findAllInstances({
+                node,
+                key: metadata$C.key
+            });
+            if (!avatar) return undefined;
+            return createLocalSnippetElement$h("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar, traverse));
+        }).exhaustive();
+        const suffix = props["Has Suffix#32538:181"].value ? createLocalSnippetElement$h("Chip.SuffixIcon", undefined, ctx.iconHandler.transform(props["Suffix Type#32538:0"])) : undefined;
         const commonProps = {
-            value: props["Label#8876:0"].value,
+            variant: camelCase(props.Variant.value),
+            size: handleSizeProp(props.Size.value),
+            layout: props["Label#7185:0"].value ? "withText" : "iconOnly",
             ...states.includes("Disabled") && {
                 disabled: true
             }
         };
-        return createLocalSnippetElement$g("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
-    });
-const createChipTabsHandler = (ctx)=>{
-    const chipTabsItemHandler = createChipTabsItemHandler();
-    return defineComponentHandler(metadata$u.key, (node)=>{
-        const chipTabsItems = findAllInstances({
-            node,
-            key: chipTabsItemHandler.key
+        return createLocalSnippetElement$h("Chip.Button", commonProps, [
+            prefix,
+            props["Label#7185:0"].value,
+            suffix
+        ], {
+            comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로도 사용할 수 있습니다."
         });
-        const selectedChipTabsItem = chipTabsItems.find((chipTabsItem)=>chipTabsItem.componentProperties.State.value.split("-").includes("Selected"));
-        const chipTabsList = createLocalSnippetElement$g("ChipTabsList", undefined, chipTabsItems.map(chipTabsItemHandler.transform));
-        const commonProps = {
-            variant: camelCase(node.componentProperties.Variant.value),
-            ...selectedChipTabsItem && {
-                defaultValue: selectedChipTabsItem.componentProperties["Label#8876:0"].value
-            }
-        };
-        return createLocalSnippetElement$g("ChipTabs", commonProps, chipTabsList);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("control-chip");
-const createControlChipHandler = (ctx)=>defineComponentHandler(metadata$t.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("contextual-floating-button");
+const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(metadata$r.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
-        const count = props["Show Count#7185:42"].value ? props["Count#7185:21"].value : undefined;
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
                 children: [
                     createSeedReactElement("Icon", {
-                        svg: ctx.iconHandler.transform(props["Icon#8722:41"])
+                        svg: ctx.iconHandler.transform(props["Icon#28796:0"])
                     })
                 ]
             })).with("Icon First", ()=>({
                 layout: "withText",
                 children: [
                     createSeedReactElement("PrefixIcon", {
-                        svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
-                    }),
-                    props["Label#7185:0"].value,
-                    count ? createSeedReactElement("Count", undefined, [
-                        count
-                    ]) : undefined
-                ]
-            })).with("Icon Last", ()=>({
-                layout: "withText",
-                children: [
-                    props["Label#7185:0"].value,
-                    createSeedReactElement("SuffixIcon", {
-                        svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"])
-                    })
-                ]
-            })).with("Icon Both", ()=>({
-                layout: "withText",
-                children: [
-                    createSeedReactElement("PrefixIcon", {
-                        svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
+                        svg: ctx.iconHandler.transform(props["Icon#28796:0"])
                     }),
-                    props["Label#7185:0"].value,
-                    createSeedReactElement("SuffixIcon", {
-                        svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"])
-                    })
+                    props["Label#28936:0"].value
                 ]
-            })).with("Text Only", ()=>({
-                layout: "withText",
-                children: props["Label#7185:0"].value
             })).exhaustive();
         const commonProps = {
-            size: handleSizeProp(props.Size.value),
-            layout,
-            ...states.includes("Selected") && {
-                defaultChecked: true
-            },
             ...states.includes("Disabled") && {
                 disabled: true
             },
-            ...props["Show Count#7185:42"].value && {
-                count: Number(props["Count#7185:21"].value)
-            }
+            ...states.includes("Loading") && {
+                loading: true
+            },
+            variant: match(props.Variant.value).with("Solid", ()=>"solid").with("Layer", ()=>"layer").exhaustive(),
+            layout
         };
-        return createLocalSnippetElement$f("ControlChip.Toggle", commonProps, children);
+        return createLocalSnippetElement$g("ContextualFloatingButton", commonProps, children);
+    });
+
+const createDividerHandler = (_ctx)=>defineComponentHandler(metadata$q.key, ({ componentProperties: props })=>{
+        const { color } = match(props.Tone.value).with("Neutral", ()=>({
+                color: "stroke.neutral"
+            })).with("Neutral Muted", ()=>({
+                color: "stroke.neutralMuted"
+            })).exhaustive();
+        return createSeedReactElement("Divider", {
+            color
+        });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("error-state");
+const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("error-state");
 const createErrorStateHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
-    return defineComponentHandler(metadata$r.key, (node)=>{
+    return defineComponentHandler(metadata$H.key, (node, traverse)=>{
         const props = node.componentProperties;
         const [actionButtonNode] = findAllInstances({
             node,
@@ -3212,96 +3170,47 @@ const createErrorStateHandler = (ctx)=>{
             description: props["Description#16237:5"].value,
             ...actionButtonNode && {
                 primaryActionProps: {
-                    children: actionButtonHandler.transform(actionButtonNode).children[0]
+                    children: actionButtonHandler.transform(actionButtonNode, traverse).children[0]
                 },
                 secondaryActionProps: {
                     children: props["Secondary Action Label#17042:0"].value
                 }
             }
         };
-        return createLocalSnippetElement$e("ErrorState", commonProps);
+        return createLocalSnippetElement$f("ErrorState", commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("extended-action-sheet");
-const EXTENDED_ACTION_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
-const createExtendedActionSheetItemHandler = (ctx)=>defineComponentHandler(EXTENDED_ACTION_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            tone: camelCase(props.Tone.value),
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createLocalSnippetElement$d("ExtendedActionSheetItem", commonProps, [
-            props["Show Prefix Icon#17043:5"].value ? createSeedReactElement("PrefixIcon", {
-                svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"])
-            }) : undefined,
-            props["Label#55905:8"].value
-        ]);
-    });
-const EXTENDED_ACTION_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
-const createExtendedActionSheetGroupHandler = (ctx)=>{
-    const extendedActionSheetItemHandler = createExtendedActionSheetItemHandler(ctx);
-    return defineComponentHandler(EXTENDED_ACTION_SHEET_GROUP_KEY, (node)=>{
-        const items = findAllInstances({
+const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("floating-action-button");
+const BUTTON_TYPE_KEY = "8cecc85275115d653579d4c3156567ebf19f7b27";
+const MENU_TYPE_KEY = "400124347392c15473f9cd2d8a6aedb64f3baf36";
+const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(metadata$p.key, (node)=>{
+        const [button] = findAllInstances({
             node,
-            key: extendedActionSheetItemHandler.key
+            key: BUTTON_TYPE_KEY
         });
-        const contentChildren = items.map(extendedActionSheetItemHandler.transform);
-        return createLocalSnippetElement$d("ExtendedActionSheetGroup", undefined, contentChildren);
-    });
-};
-const createExtendedActionSheetHandler = (ctx)=>{
-    const extendedActionSheetGroupHandler = createExtendedActionSheetGroupHandler(ctx);
-    return defineComponentHandler(metadata$q.key, (node)=>{
-        const { componentProperties: props } = node;
-        const groups = findAllInstances({
+        const [menu] = findAllInstances({
             node,
-            key: extendedActionSheetGroupHandler.key
-        });
-        const contentChildren = groups.map(extendedActionSheetGroupHandler.transform);
-        const title = props["Show Title#17043:12"].value ? props["Title#14599:0"].value : undefined;
-        const content = createLocalSnippetElement$d("ExtendedActionSheetContent", {
-            title
-        }, contentChildren, {
-            comment: title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
-        });
-        const trigger = createLocalSnippetElement$d("ExtendedActionSheetTrigger", {
-            asChild: true
-        }, createElement("button", undefined, "열기", {
-            comment: "ExtendedActionSheet을 여는 요소를 제공해주세요."
-        }));
-        return createLocalSnippetElement$d("ExtendedActionSheet", undefined, [
-            trigger,
-            content
-        ]);
-    });
-};
-
-const createExtendedFabHandler = (ctx)=>defineComponentHandler(metadata$p.key, ({ componentProperties: props })=>{
-        const commonProps = {
-            size: handleSizeProp(props.Size.value),
-            variant: camelCase(props.Variant.value)
-        };
-        return createSeedReactElement("ExtendedFab", commonProps, [
-            createSeedReactElement("PrefixIcon", {
-                svg: ctx.iconHandler.transform(props["Icon#28796:0"])
-            }),
-            props["Label#28936:0"].value
-        ]);
-    });
-
-const createFabHandler = (ctx)=>defineComponentHandler(metadata$o.key, ({ componentProperties: props })=>{
-        return createSeedReactElement("Fab", undefined, createSeedReactElement("Icon", {
-            svg: ctx.iconHandler.transform(props["Icon#28796:0"])
-        }), {
-            comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
+            key: MENU_TYPE_KEY
         });
+        const commonProps = (()=>{
+            if (button) return {
+                icon: ctx.iconHandler.transform(button.componentProperties["Icon#29766:18"]),
+                extended: button.componentProperties.Extended.value === "True",
+                label: button.componentProperties["Label#29808:0"].value
+            };
+            if (menu) return {
+                icon: ctx.iconHandler.transform(menu.componentProperties["Icon#29766:0"]),
+                extended: menu.componentProperties.Extended.value === "True",
+                label: menu.componentProperties["Label#29766:9"].value
+            };
+        })();
+        return createLocalSnippetElement$e("FloatingActionButton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("help-bubble");
-const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$n.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("help-bubble");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger$1 } = createLocalSnippetHelper("action-button");
+const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$o.key, ({ componentProperties: props })=>{
         const placement = (()=>{
             switch(props.Placement.value){
                 case "Bottom-Left":
@@ -3335,35 +3244,19 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$n.key, (
             ...props["Show Description#62499:0"].value && {
                 description: props["Description#62535:98"].value
             },
-            showCloseButton: props["Show Close Button"].value === "True",
             defaultOpen: true,
             placement
         };
-        return createLocalSnippetElement$c("HelpBubbleTrigger", commonProps, createElement("button", undefined, "열기", {
-            comment: "HelpBubble을 여는 요소를 제공해주세요."
-        }));
+        return createLocalSnippetElement$d("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"));
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("inline-banner");
-const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$l.key, (node)=>{
+const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("inline-banner");
+const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$n.key, (node)=>{
         const { componentProperties: props } = node;
-        const tag = (()=>{
-            switch(props.Interaction.value){
-                case "Default":
-                    return "InlineBanner";
-                case "Actionable":
-                    return "ActionableInlineBanner";
-                case "Dismissible":
-                    return "DismissibleInlineBanner";
-                case "Link":
-                    return "InlineBanner";
-                default:
-                    return "InlineBanner";
-            }
-        })();
+        const tag = match(props.Interaction.value).with("Default", ()=>"InlineBanner").with("Actionable", ()=>"ActionableInlineBanner").with("Dismissible", ()=>"DismissibleInlineBanner").with("Link", ()=>"InlineBanner").exhaustive();
         const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Label");
         if (!textNode) {
-            return createLocalSnippetElement$b(tag, undefined, undefined, {
+            return createLocalSnippetElement$c(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -3397,20 +3290,92 @@ const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$l.key,
             },
             prefixIcon
         };
-        return createLocalSnippetElement$b(tag, commonProps);
+        return createLocalSnippetElement$c(tag, commonProps);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("manner-temp-badge");
+const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$j.key, ({ children })=>{
+        const textNode = children.find((child)=>child.type === "TEXT");
+        const commonProps = {
+            temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
+        };
+        return createLocalSnippetElement$b("MannerTempBadge", commonProps);
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp-badge");
-const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$g.key, ({ children })=>{
+const createMannerTempHandler = (_ctx)=>defineComponentHandler(metadata$k.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createLocalSnippetElement$a("MannerTempBadge", commonProps);
+        return createLocalSnippetElement$a("MannerTemp", commonProps);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } = createLocalSnippetHelper("action-button");
+const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
+const createMenuSheetItemHandler = (ctx)=>defineComponentHandler(MENU_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
+        const states = props.State.value.split("-");
+        const commonProps = {
+            tone: camelCase(props.Tone.value),
+            ...states.includes("Disabled") && {
+                disabled: true
+            }
+        };
+        return createLocalSnippetElement$9("MenuSheetItem", commonProps, [
+            props["Show Prefix Icon#17043:5"].value ? createSeedReactElement("PrefixIcon", {
+                svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"])
+            }) : undefined,
+            props["Label#55905:8"].value
+        ]);
+    });
+const MENU_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
+const createMenuSheetGroupHandler = (ctx)=>{
+    const menuSheetItemHandler = createMenuSheetItemHandler(ctx);
+    return defineComponentHandler(MENU_SHEET_GROUP_KEY, (node, traverse)=>{
+        const items = findAllInstances({
+            node,
+            key: menuSheetItemHandler.key
+        });
+        const contentChildren = items.map((item)=>menuSheetItemHandler.transform(item, traverse));
+        return createLocalSnippetElement$9("MenuSheetGroup", undefined, contentChildren);
+    });
+};
+const createMenuSheetHandler = (ctx)=>{
+    const menuSheetGroupHandler = createMenuSheetGroupHandler(ctx);
+    return defineComponentHandler(metadata$i.key, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const groups = findAllInstances({
+            node,
+            key: menuSheetGroupHandler.key
+        });
+        const contentChildren = groups.map((group)=>menuSheetGroupHandler.transform(group, traverse));
+        const title = props["Show Header#17043:12"].value ? props["Title Text#14599:0"].value : undefined;
+        // TODO: React 구현체에 description 추가 이후
+        // const description = props["Description Text#21827:0"].value;
+        const { labelAlignment } = match(props.Layout.value).with("Text with Icon", ()=>({
+                labelAlignment: undefined
+            })).with("Text Only", ()=>({
+                labelAlignment: "center"
+            })).exhaustive();
+        const content = createLocalSnippetElement$9("MenuSheetContent", {
+            title,
+            labelAlignment
+        }, contentChildren, {
+            comment: title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
+        });
+        const trigger = createLocalSnippetElement$9("MenuSheetTrigger", {
+            asChild: true
+        }, createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"));
+        return createLocalSnippetElement$9("MenuSheet", undefined, [
+            trigger,
+            content
+        ]);
     });
+};
 
-const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("multiline-text-field");
-const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$f.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("text-field");
+const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$h.key, ({ componentProperties: props })=>{
         const { Size: { value: size }, State: { value: state }, Filled: { value: filled }, "Show Header#870:0": { value: showHeader }, "Label#15327:323": { value: label }, "Show Indicator#1259:0": { value: showIndicator }, "Indicator#15327:286": { value: indicator }, "Placeholder#958:0": { value: placeholder }, "Filled Text#1304:0": { value: defaultValue }, "Show Footer#958:25": { value: showFooter }, "Show Description#958:50": { value: showDescription }, "Description#15327:212": { value: description }, "Show Character count#958:75": { value: showCharacterCount }, "Character Count#15327:360": { value: _characterCount }, "Max Character Count#15327:175": { value: maxCharacterCount } } = props;
         const states = state.split("-");
         const commonProps = {
@@ -3451,12 +3416,12 @@ const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createLocalSnippetElement$9("TextFieldTextarea", inputProps);
-        return createLocalSnippetElement$9("TextField", commonProps, TextFieldChildren);
+        const TextFieldChildren = createLocalSnippetElement$8("TextFieldTextarea", inputProps);
+        return createLocalSnippetElement$8("TextField", commonProps, TextFieldChildren);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("progress-circle");
-const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$e.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("progress-circle");
+const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$g.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
                 minValue: undefined,
@@ -3483,13 +3448,15 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$e.ke
             minValue,
             maxValue,
             size: props.Size.value,
-            tone: camelCase(props.Tone.value)
+            ...props.Tone.value !== "Custom" && {
+                tone: camelCase(props.Tone.value)
+            }
         };
-        return createLocalSnippetElement$8("ProgressCircle", commonProps);
+        return createLocalSnippetElement$7("ProgressCircle", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("reaction-button");
-const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$b.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("reaction-button");
+const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$c.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
             size: handleSizeProp(props.Size.value),
@@ -3503,7 +3470,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$b.key
                 defaultPressed: true
             }
         };
-        return createLocalSnippetElement$7("ReactionButton", commonProps, [
+        return createLocalSnippetElement$6("ReactionButton", commonProps, [
             createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#12379:0"])
             }),
@@ -3512,7 +3479,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$b.key
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("segmented-control");
+const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("segmented-control");
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENTED_CONTROL_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -3522,30 +3489,30 @@ const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENT
                 disabled: true
             }
         };
-        return createLocalSnippetElement$6("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+        return createLocalSnippetElement$5("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
     });
 const createSegmentedControlHandler = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler();
-    return defineComponentHandler(metadata$a.key, (node)=>{
+    return defineComponentHandler(metadata$9.key, (node, traverse)=>{
         const segments = findAllInstances({
             node,
             key: segmentedControlItemHandler.key
         });
         const selectedSegment = segments.find((segment)=>segment.componentProperties.State.value.split("-").includes("Selected"));
-        const segmentedControlChildren = segments.map(segmentedControlItemHandler.transform);
+        const segmentedControlChildren = segments.map((segment)=>segmentedControlItemHandler.transform(segment, traverse));
         const commonProps = {
             ...selectedSegment && {
                 defaultValue: selectedSegment.componentProperties["Label#11366:15"].value
             }
         };
-        return createLocalSnippetElement$6("SegmentedControl", commonProps, segmentedControlChildren, {
+        return createLocalSnippetElement$5("SegmentedControl", commonProps, segmentedControlChildren, {
             comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("select-box");
-const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$9.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("select-box");
+const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({ componentProperties: props })=>{
         const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBox").exhaustive();
         const states = props.State.value.split("-");
         const commonProps = {
@@ -3560,11 +3527,11 @@ const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$9.key, ({
                 defaultChecked: true
             }
         };
-        return createLocalSnippetElement$5(tag, commonProps);
+        return createLocalSnippetElement$4(tag, commonProps);
     });
 const createSelectBoxGroupHandler = (ctx)=>{
     const selectBoxHandler = createSelectBoxHandler();
-    return defineComponentHandler(metadata$H.key, (node)=>{
+    return defineComponentHandler(metadata$G.key, (node, traverse)=>{
         const props = node.componentProperties;
         const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBoxGroup").with("Radio", ()=>"RadioSelectBoxGroup").exhaustive();
         const selectBoxes = findAllInstances({
@@ -3572,19 +3539,22 @@ const createSelectBoxGroupHandler = (ctx)=>{
             key: selectBoxHandler.key
         });
         const selectedSelectBox = selectBoxes.find((selectBox)=>selectBox.componentProperties.State.value.split("-").includes("Selected"));
-        const stack = createSeedReactElement("Stack", {
-            gap: "spacingY.componentDefault"
-        }, selectBoxes.map(selectBoxHandler.transform));
+        // traverse the container like it's a frame
+        const vStackProps = traverse({
+            ...node,
+            type: "FRAME"
+        })?.props;
+        const stack = createSeedReactElement("VStack", vStackProps, selectBoxes.map((box)=>selectBoxHandler.transform(box, traverse)));
         const commonProps = {
             ...tag === "RadioSelectBoxGroup" && {
                 defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
             }
         };
-        return createLocalSnippetElement$5(tag, commonProps, stack);
+        return createLocalSnippetElement$4(tag, commonProps, stack);
     });
 };
 
-const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$8.key, (node)=>{
+const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$7.key, (node)=>{
         const { componentProperties: props, layoutSizingHorizontal, layoutSizingVertical } = node;
         const commonProps = {
             radius: camelCase(props.Radius.value),
@@ -3594,20 +3564,20 @@ const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$8.key, (nod
         return createSeedReactElement("Skeleton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("snackbar");
-const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$6.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$3 } = createLocalSnippetHelper("snackbar");
+const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$5.key, ({ componentProperties: props })=>{
         const commonProps = {
             message: props["Message#1528:4"].value,
             variant: camelCase(props.Variant.value),
-            ...props["Show Action Button#1528:0"].value && {
-                actionLabel: props["Action Button Label#1528:8"].value
+            ...props["Show Action#1528:0"].value && {
+                actionLabel: props["Action Label#1528:8"].value
             }
         };
         // TODO: adapter.create({ render })
-        return createLocalSnippetElement$4("Snackbar", commonProps);
+        return createLocalSnippetElement$3("Snackbar", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$3 } = createLocalSnippetHelper("switch");
+const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("switch");
 const createSwitchHandler = (_ctx)=>defineComponentHandler(metadata$4.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const size = handleSizeProp(props.Size.value);
@@ -3623,115 +3593,11 @@ const createSwitchHandler = (_ctx)=>defineComponentHandler(metadata$4.key, ({ co
                 disabled: true
             }
         };
-        return createLocalSnippetElement$3("Switch", commonProps);
-    });
-
-const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("tabs");
-const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
-const createTabsHugItemHandler = (_ctx)=>defineComponentHandler(TABS_HUG_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            value: props["Label#4478:2"].value,
-            ...props.Notification.value === "True" && {
-                alert: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createLocalSnippetElement$2("TabsTrigger", commonProps, props["Label#4478:2"].value);
-    });
-const TABS_FILL_ITEM_KEY = "7275293344efb40ee9a3f5248ba2659b94a0b305";
-const createTabsFillItemHandler = (_ctx)=>defineComponentHandler(TABS_FILL_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            value: props["Label#4478:2"].value,
-            ...props.Notification.value === "True" && {
-                alert: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createLocalSnippetElement$2("TabsTrigger", commonProps, props["Label#4478:2"].value);
-    });
-const createTabsHandler = (ctx)=>{
-    const tabsHugItemHandler = createTabsHugItemHandler();
-    const tabsFillItemHandler = createTabsFillItemHandler();
-    return defineComponentHandler(metadata$3.key, (node)=>{
-        const { componentProperties: props, children } = node;
-        const mappedItems = children.map((child)=>{
-            if (child.type !== "INSTANCE") return null;
-            const componentKey = child.componentSetKey ? child.componentSetKey : child.componentKey;
-            if (componentKey === tabsHugItemHandler.key) return {
-                triggerLayout: "hug",
-                node: child
-            };
-            if (componentKey === tabsFillItemHandler.key) return {
-                triggerLayout: "fill",
-                node: child
-            };
-            return null;
-        });
-        const tabsItems = mappedItems.filter((item)=>item !== null);
-        const selectedTabsItem = tabsItems.find(({ node: { componentProperties } })=>componentProperties.State.value.split("-").includes("Selected"))?.node;
-        const tabTriggerList = createLocalSnippetElement$2("TabsList", undefined, tabsItems.map(({ triggerLayout, node })=>{
-            switch(triggerLayout){
-                case "hug":
-                    return tabsHugItemHandler.transform(node);
-                case "fill":
-                    return tabsFillItemHandler.transform(node);
-            }
-        }));
-        const tabContents = tabsItems.map(({ node })=>{
-            const value = node.componentProperties["Label#4478:2"].value;
-            return createLocalSnippetElement$2("TabsContent", {
-                value
-            }, "{/* TODO: 컨텐츠 추가 */}");
-        });
-        const commonProps = {
-            triggerLayout: camelCase(props.Layout.value),
-            size: handleSizeProp(props.Size.value),
-            ...selectedTabsItem && {
-                defaultValue: selectedTabsItem.componentProperties["Label#4478:2"].value
-            }
-        };
-        return createLocalSnippetElement$2("TabsRoot", commonProps, [
-            tabTriggerList,
-            ...tabContents
-        ]);
-    });
-};
-
-const createTextButtonHandler = (ctx)=>defineComponentHandler(metadata$2.key, (node)=>{
-        const { componentProperties: props } = node;
-        const states = props.State.value.split("-");
-        const { prefixIcon, suffixIcon, children } = match(props.Layout.value).with("Icon First", ()=>({
-                prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#7561:0"]),
-                suffixIcon: undefined,
-                children: props["Label#6148:0"].value
-            })).with("Icon Last", ()=>{
-            const suffixIconNode = findOne(node, (node)=>node.type === "INSTANCE" && node.name === "Suffix Icon");
-            return {
-                prefixIcon: undefined,
-                suffixIcon: suffixIconNode ? ctx.iconHandler.transform(suffixIconNode) : undefined,
-                children: props["Label#6148:0"].value
-            };
-        }).exhaustive();
-        const commonProps = {
-            tone: camelCase(props.Tone.value),
-            size: handleSizeProp(props.Size.value),
-            prefixIcon,
-            suffixIcon,
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createSeedReactElement("TextButton", commonProps, children);
+        return createLocalSnippetElement$2("Switch", commonProps);
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$1 } = createLocalSnippetHelper("text-field");
-const createTextFieldHandler = (ctx)=>defineComponentHandler(metadata$1.key, ({ componentProperties: props })=>{
+const createTextFieldHandler = (ctx)=>defineComponentHandler(metadata$2.key, ({ componentProperties: props })=>{
         const { Size: { value: size }, State: { value: state }, Filled: { value: filled }, "Show Header#870:0": { value: showHeader }, "Label#14964:0": { value: label }, "Show Indicator#1259:0": { value: showIndicator }, "Indicator#15327:249": { value: indicator }, "Show Prefix#958:125": { value: showPrefix }, "Show Prefix Icon#1267:50": { value: showPrefixIcon }, "Prefix Icon#1267:25": prefixIcon, "Show Prefix Text#1267:0": { value: showPrefixText }, "Prefix Text#15327:101": { value: prefix }, "Placeholder#958:0": { value: placeholder }, "Filled Text#1304:0": { value: defaultValue }, "Show Suffix#958:100": { value: showSuffix }, "Show Suffix Icon#1267:75": { value: showSuffixIcon }, "Suffix Icon #1267:100": suffixIcon, "Show Suffix Text#1267:125": { value: showSuffixText }, "Suffix Text#15327:138": { value: suffix }, "Show Footer#958:25": { value: showFooter }, "Show Description#958:50": { value: showDescription }, "Description#12626:5": { value: description }, "Show Character Count#958:75": { value: showCharacterCount }, "Character Count#15327:64": { value: _characterCount }, "Max Character Count#15327:27": { value: maxCharacterCount } } = props;
         const states = state.split("-");
         const commonProps = {
@@ -3790,7 +3656,7 @@ const createTextFieldHandler = (ctx)=>defineComponentHandler(metadata$1.key, ({
     });
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
-const createToggleButtonHandler = (ctx)=>defineComponentHandler(metadata.key, ({ componentProperties: props })=>{
+const createToggleButtonHandler = (ctx)=>defineComponentHandler(metadata$1.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
             variant: camelCase(props.Variant.value),
@@ -3820,25 +3686,27 @@ function bindComponentHandler(unbound, deps) {
     return unbound(deps);
 }
 const unboundSeedComponentHandlers = [
+    createActionButtonGhostHandler,
     createActionButtonHandler,
-    createActionChipHandler,
-    createActionSheetHandler,
+    createAlertDialogHandler,
     createAppBarHandler,
     createAvatarHandler,
     createAvatarStackHandler,
     createBadgeHandler,
+    createBottomSheetHandler,
     createCalloutHandler,
     createCheckboxHandler,
-    createChipTabsHandler,
-    createControlChipHandler,
+    createChipHandler,
+    createContextualFloatingButtonHandler,
+    createDividerHandler,
     createErrorStateHandler,
-    createExtendedActionSheetHandler,
-    createExtendedFabHandler,
-    createFabHandler,
+    createFloatingActionButtonHandler,
     createHelpBubbleHandler,
     createIdentityPlaceholderHandler,
     createInlineBannerHandler,
     createMannerTempBadgeHandler,
+    createMannerTempHandler,
+    createMenuSheetHandler,
     createMultilineTextFieldHandler,
     createProgressCircleHandler,
     createReactionButtonHandler,
@@ -3848,8 +3716,6 @@ const unboundSeedComponentHandlers = [
     createSkeletonHandler,
     createSnackbarHandler,
     createSwitchHandler,
-    createTabsHandler,
-    createTextButtonHandler,
     createTextFieldHandler,
     createToggleButtonHandler
 ];
@@ -6629,6 +6495,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",
@@ -13698,7 +13657,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
@@ -13783,9 +13745,36 @@ function toCssRgba(color) {
 }
 
 const defaultVariableNameFormatter = ({ slug })=>slug.filter((s)=>!(s === "dimension" || s === "radius" || s === "font-size" || s === "font-weight" || s === "line-height")).map((s)=>s.replaceAll(",", "_")).map(camelCasePreserveUnderscoreBetweenNumbers).join(".");
-const defaultStyleNameFormatter = ({ slug })=>camelCase(slug[slug.length - 1], {
+const defaultTextStyleNameFormatter = ({ slug })=>{
+    return camelCase(slug[slug.length - 1], {
         mergeAmbiguousCharacters: true
     });
+};
+const defaultFillStyleResolver = ({ slug })=>{
+    const [, ...rest] = slug;
+    if (rest[0] === "fade") {
+        // ["fade", "layer-default", "↓(to-bottom)"]
+        const last = rest[rest.length - 1];
+        const direction = (()=>{
+            if (last.startsWith("↓")) return "to bottom";
+            if (last.startsWith("↑")) return "to top";
+            if (last.startsWith("→")) return "to right";
+            if (last.startsWith("←")) return "to left";
+            return "unknown";
+        })();
+        return {
+            value: camelCase(rest.slice(0, -1).join("-"), {
+                mergeAmbiguousCharacters: true
+            }),
+            direction
+        };
+    }
+    return {
+        value: camelCase(rest.join("-"), {
+            mergeAmbiguousCharacters: true
+        })
+    };
+};
 const defaultRawValueFormatters = {
     color: (value)=>toCssRgba(value),
     dimension: (value)=>toCssPixel(value),
@@ -13802,7 +13791,8 @@ function createPipeline(options = {}) {
         variableService,
         variableNameFormatter: defaultVariableNameFormatter,
         styleService,
-        styleNameFormatter: defaultStyleNameFormatter,
+        textStyleNameFormatter: defaultTextStyleNameFormatter,
+        fillStyleResolver: defaultFillStyleResolver,
         rawValueFormatters: defaultRawValueFormatters,
         shouldInferVariableName
     });