@seed-design/figma 0.1.8 → 0.1.10

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

@@ -682,7 +682,7 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
 function createContainerLayoutPropsConverter(valueResolver) {
     return createPropsConverter({
         handlers: {
-            direction: ({ layoutMode })=>match(layoutMode).with("HORIZONTAL", ()=>"row").with("VERTICAL", ()=>"column").with("NONE", ()=>undefined).with(undefined, ()=>undefined).exhaustive(),
+            direction: ({ layoutMode })=>match(layoutMode).with("HORIZONTAL", ()=>"row").with("VERTICAL", ()=>"column").with("GRID", ()=>undefined).with("NONE", ()=>undefined).with(undefined, ()=>undefined).exhaustive(),
             justify: ({ primaryAxisAlignItems })=>match(primaryAxisAlignItems).with("MIN", ()=>"flex-start").with("CENTER", ()=>"center").with("MAX", ()=>"flex-end").with("SPACE_BETWEEN", ()=>"space-between").with(undefined, ()=>undefined).exhaustive(),
             align: ({ counterAxisAlignItems, children })=>{
                 const isStretch = children.every((child)=>{
@@ -745,7 +745,7 @@ function createContainerLayoutPropsConverter(valueResolver) {
 function createSelfLayoutPropsConverter(valueResolver) {
     return createPropsConverter({
         handlers: {
-            grow: ({ layoutGrow })=>layoutGrow === 1 ? true : layoutGrow,
+            flexGrow: ({ layoutGrow })=>layoutGrow === 1 ? true : layoutGrow,
             alignSelf: ({ layoutAlign })=>match(layoutAlign).with("STRETCH", ()=>"stretch").with("INHERIT", ()=>undefined).with("MIN", ()=>undefined) // Deprecated in Figma
                 .with("CENTER", ()=>undefined) // Deprecated in Figma
                 .with("MAX", ()=>undefined) // Deprecated in Figma
@@ -758,7 +758,7 @@ function createSelfLayoutPropsConverter(valueResolver) {
             maxWidth: (node)=>node.layoutSizingHorizontal === "HUG" ? valueResolver.getFormattedValue.maxWidth(node) : undefined
         },
         defaults: {
-            grow: 0
+            flexGrow: 0
         }
     });
 }
@@ -865,7 +865,7 @@ function createVectorChildrenFillPropsConverter(valueResolver) {
 function createStrokePropsConverter(valueResolver) {
     return definePropsConverter((node)=>{
         const borderColor = valueResolver.getFormattedValue.stroke(node);
-        const borderWidth = borderColor ? node.strokeWeight : undefined;
+        const borderWidth = borderColor && node.strokeWeight ? `${node.strokeWeight}` : undefined;
         return {
             borderColor,
             borderWidth
@@ -987,7 +987,18 @@ function createInstanceTransformer({ iconHandler, propsConverters, componentHand
         }
         const componentHandler = componentSetKey ? componentHandlers[componentSetKey] : componentHandlers[componentKey];
         if (componentHandler) {
-            return componentHandler.transform(node, traverse);
+            const handled = componentHandler.transform(node, traverse);
+            if (node.overrides && node.overrides.length > 0) {
+                const overriddenFields = node.overrides.flatMap(({ overriddenFields })=>overriddenFields);
+                return {
+                    ...handled,
+                    meta: {
+                        ...handled.meta,
+                        comment: `${handled.meta.comment ? `${handled.meta.comment} ` : ""}오버라이드된 필드: ${overriddenFields.join(", ")}`
+                    }
+                };
+            }
+            return handled;
         }
         return frameTransformer(node, traverse);
     });
@@ -1009,7 +1020,7 @@ function createTextTransformer({ propsConverters }) {
     });
 }
 
-const metadata$K = {
+const metadata$L = {
     "name": "🔵 [Template] Button Group",
     "key": "29109a34197f2eb5d390b1d9ebba270979a7b302",
     "componentPropertyDefinitions": {
@@ -1037,7 +1048,7 @@ const metadata$K = {
     }
 };
 
-const metadata$J = {
+const metadata$K = {
     "name": "🔵 [Template] Chip Group",
     "key": "5b1155aae0f90d1bce6a7499f53a547e88ec3b86",
     "componentPropertyDefinitions": {
@@ -1067,7 +1078,7 @@ const metadata$J = {
     }
 };
 
-const metadata$I = {
+const metadata$J = {
     "name": "🔵 [Template] Completion",
     "key": "d91c789c66c2da665d820318f1a4d8671946eb79",
     "componentPropertyDefinitions": {
@@ -1096,7 +1107,7 @@ const metadata$I = {
     }
 };
 
-const metadata$H = {
+const metadata$I = {
     "name": "🔵 [Template] Error State",
     "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
     "componentPropertyDefinitions": {
@@ -1129,7 +1140,7 @@ const metadata$H = {
     }
 };
 
-const metadata$G = {
+const metadata$H = {
     "name": "🔵 [Template] Select Box Group",
     "key": "a3d58bb8540600878742cdcf2608a4b3851667ec",
     "componentPropertyDefinitions": {
@@ -1154,7 +1165,7 @@ const metadata$G = {
     }
 };
 
-const metadata$F = {
+const metadata$G = {
     "name": "🔵 [Template] Top Navigation",
     "key": "74f045c1972dc31d0fddd0a0027537b6779cd0e8",
     "componentPropertyDefinitions": {
@@ -1182,7 +1193,7 @@ const metadata$F = {
     }
 };
 
-const metadata$E = {
+const metadata$F = {
     "name": "🟢 Action Button",
     "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89",
     "componentPropertyDefinitions": {
@@ -1242,7 +1253,7 @@ const metadata$E = {
     }
 };
 
-const metadata$D = {
+const metadata$E = {
     "name": "🟢 Alert Dialog",
     "key": "e0c89524a554ca1bf95c016b7255f29e257624aa",
     "componentPropertyDefinitions": {
@@ -1269,7 +1280,7 @@ const metadata$D = {
     }
 };
 
-const metadata$C = {
+const metadata$D = {
     "name": "🟢 Avatar",
     "key": "4a8853c3068c08b69b13e71dd42ce186e968697e",
     "componentPropertyDefinitions": {
@@ -1301,7 +1312,7 @@ const metadata$C = {
     }
 };
 
-const metadata$B = {
+const metadata$C = {
     "name": "🟢 Avatar Stack",
     "key": "e8e91e01000d878742c55cd6e44b6786460440f7",
     "componentPropertyDefinitions": {
@@ -1321,7 +1332,7 @@ const metadata$B = {
     }
 };
 
-const metadata$A = {
+const metadata$B = {
     "name": "🟢 Badge",
     "key": "04609a35d47a1a0ef4904b3c25f79451892a85a1",
     "componentPropertyDefinitions": {
@@ -1356,7 +1367,7 @@ const metadata$A = {
     }
 };
 
-const metadata$z = {
+const metadata$A = {
     "name": "🟢 Bottom Navigation / Global",
     "key": "983650a4dff639b38bf68ff6004efc8ec4fb5c20",
     "componentPropertyDefinitions": {
@@ -1380,7 +1391,7 @@ const metadata$z = {
     }
 };
 
-const metadata$y = {
+const metadata$z = {
     "name": "🟢 Bottom Navigation / KR",
     "key": "accc7cea2d0250cdfbf0197ce00a677c6b9e0dae",
     "componentPropertyDefinitions": {
@@ -1397,7 +1408,7 @@ const metadata$y = {
     }
 };
 
-const metadata$x = {
+const metadata$y = {
     "name": "🟢 Bottom Sheet",
     "key": "16bafa5d1155896fe18fb6f52f904f5cd2048686",
     "componentPropertyDefinitions": {
@@ -1461,7 +1472,7 @@ const metadata$x = {
     }
 };
 
-const metadata$w = {
+const metadata$x = {
     "name": "🟢 Callout",
     "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe",
     "componentPropertyDefinitions": {
@@ -1510,7 +1521,7 @@ const metadata$w = {
     }
 };
 
-const metadata$v = {
+const metadata$w = {
     "name": "🟢 Checkbox",
     "key": "94a2f6957a86f8ae3b8c7ca200dfcd5e29f6075b",
     "componentPropertyDefinitions": {
@@ -1538,24 +1549,26 @@ const metadata$v = {
                 "Stronger"
             ]
         },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False",
+                "Indeterminate"
+            ]
+        },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
                 "Pressed",
-                "Disabled",
-                "Selected",
-                "Selected-Pressed",
-                "Selected-Disabled",
-                "Indeterminate",
-                "Indeterminate-Pressed",
-                "Indeterminate-Disabled"
+                "Disabled"
             ]
         }
     }
 };
 
-const metadata$u = {
+const metadata$v = {
     "name": "🟢 Checkmark",
     "key": "fae60fb392f55bde60de1dbccb2f453320068805",
     "componentPropertyDefinitions": {
@@ -1573,24 +1586,26 @@ const metadata$u = {
                 "Large"
             ]
         },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False",
+                "Indeterminate"
+            ]
+        },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
                 "Pressed",
-                "Selected",
-                "Selected-Pressed",
-                "Indeterminate",
-                "Indeterminate-Pressed",
-                "Disabled",
-                "Disabled-Selected",
-                "Disabled-Indeterminate"
+                "Disabled"
             ]
         }
     }
 };
 
-const metadata$t = {
+const metadata$u = {
     "name": "🟢 Chip",
     "key": "8156ef08d9aaa2b0de1cc4a113ec0c9d0586f831",
     "componentPropertyDefinitions": {
@@ -1628,6 +1643,10 @@ const metadata$t = {
                 {
                     "type": "COMPONENT_SET",
                     "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "19923052d4152393ecdc6e2f5853ea0359849127"
                 }
             ]
         },
@@ -1650,19 +1669,19 @@ const metadata$t = {
                 "Small"
             ]
         },
-        "State": {
+        "Selected": {
             "type": "VARIANT",
             "variantOptions": [
-                "Enabled",
-                "Pressed",
-                "Disabled"
+                "False",
+                "True"
             ]
         },
-        "Selected": {
+        "State": {
             "type": "VARIANT",
             "variantOptions": [
-                "False",
-                "True"
+                "Enabled",
+                "Pressed",
+                "Disabled"
             ]
         },
         "Prefix Type": {
@@ -1677,7 +1696,7 @@ const metadata$t = {
     }
 };
 
-const metadata$s = {
+const metadata$t = {
     "name": "🟢 Chlid",
     "key": "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc",
     "componentPropertyDefinitions": {
@@ -1692,7 +1711,7 @@ const metadata$s = {
     }
 };
 
-const metadata$r = {
+const metadata$s = {
     "name": "🟢 Contextual Floating Button",
     "key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f",
     "componentPropertyDefinitions": {
@@ -1729,7 +1748,7 @@ const metadata$r = {
     }
 };
 
-const metadata$q = {
+const metadata$r = {
     "name": "🟢 Divider",
     "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
     "componentPropertyDefinitions": {
@@ -1743,7 +1762,7 @@ const metadata$q = {
     }
 };
 
-const metadata$p = {
+const metadata$q = {
     "name": "🟢 Floating Action Button",
     "key": "65f9e7eede627b893fb8ff94ed9a7d0db900c464",
     "componentPropertyDefinitions": {
@@ -1757,7 +1776,7 @@ const metadata$p = {
     }
 };
 
-const metadata$o = {
+const metadata$p = {
     "name": "🟢 Help Bubble",
     "key": "804b327c091278a40d5891939eaed90bb2889659",
     "componentPropertyDefinitions": {
@@ -1790,7 +1809,7 @@ const metadata$o = {
     }
 };
 
-const metadata$n = {
+const metadata$o = {
     "name": "🟢 Inline Banner",
     "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
     "componentPropertyDefinitions": {
@@ -1831,7 +1850,7 @@ const metadata$n = {
     }
 };
 
-const metadata$m = {
+const metadata$n = {
     "name": "🟢 Main Tab Navigation / Global",
     "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
     "componentPropertyDefinitions": {
@@ -1858,7 +1877,7 @@ const metadata$m = {
     }
 };
 
-const metadata$l = {
+const metadata$m = {
     "name": "🟢 Main Tab Navigation / KR",
     "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
     "componentPropertyDefinitions": {
@@ -1882,7 +1901,7 @@ const metadata$l = {
     }
 };
 
-const metadata$k = {
+const metadata$l = {
     "name": "🟢 Manner Temp",
     "key": "37c0a35f73a730fdfba7929cea91a7590fc93733",
     "componentPropertyDefinitions": {
@@ -1900,7 +1919,7 @@ const metadata$k = {
     }
 };
 
-const metadata$j = {
+const metadata$k = {
     "name": "🟢 Manner Temp Badge",
     "key": "3ef9a84d4d80046ff9a581136bd56269554a6e00",
     "componentPropertyDefinitions": {
@@ -1918,7 +1937,7 @@ const metadata$j = {
     }
 };
 
-const metadata$i = {
+const metadata$j = {
     "name": "🟢 Menu Sheet",
     "key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb",
     "componentPropertyDefinitions": {
@@ -1955,7 +1974,7 @@ const metadata$i = {
     }
 };
 
-const metadata$h = {
+const metadata$i = {
     "name": "🟢 Multiline Text Field",
     "key": "88b2399c930c85f9ce2972163a078bc684b84bbe",
     "componentPropertyDefinitions": {
@@ -2024,7 +2043,7 @@ const metadata$h = {
     }
 };
 
-const metadata$g = {
+const metadata$h = {
     "name": "🟢 Progress Circle",
     "key": "6e6779a372cab2485a0e25529bc4dbc9932a7346",
     "componentPropertyDefinitions": {
@@ -2041,7 +2060,7 @@ const metadata$g = {
                 "Neutral",
                 "Brand",
                 "Static White",
-                "Custom"
+                "Custom(inherit)"
             ]
         },
         "Value": {
@@ -2057,7 +2076,7 @@ const metadata$g = {
     }
 };
 
-const metadata$f = {
+const metadata$g = {
     "name": "🟢 Radio",
     "key": "ac72d9e5ab04a1d59eaf77dffd380fd6e491ecf8",
     "componentPropertyDefinitions": {
@@ -2071,21 +2090,25 @@ const metadata$f = {
                 "Large"
             ]
         },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
                 "Pressed",
-                "Disabled",
-                "Selected",
-                "Selected-Pressed",
-                "Selected-Disabled"
+                "Disabled"
             ]
         }
     }
 };
 
-const metadata$e = {
+const metadata$f = {
     "name": "🟢 Radio Mark",
     "key": "832d696d6e9566610968cd70f128f500ec009d6a",
     "componentPropertyDefinitions": {
@@ -2103,24 +2126,18 @@ const metadata$e = {
                 "False"
             ]
         },
-        "Pressed": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "True",
-                "False"
-            ]
-        },
-        "Disabled": {
+        "State": {
             "type": "VARIANT",
             "variantOptions": [
-                "True",
-                "False"
+                "Enabled",
+                "Pressed",
+                "Disabled"
             ]
         }
     }
 };
 
-const metadata$d = {
+const metadata$e = {
     "name": "🟢 Range Slider",
     "key": "64fc49184979e0be40aa367ca98868601eb7dad5",
     "componentPropertyDefinitions": {
@@ -2152,7 +2169,7 @@ const metadata$d = {
     }
 };
 
-const metadata$c = {
+const metadata$d = {
     "name": "🟢 Reaction Button",
     "key": "ec43e4e881f7048e95601f8b58c01a0905a174e0",
     "componentPropertyDefinitions": {
@@ -2176,23 +2193,26 @@ const metadata$c = {
                 "Small"
             ]
         },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
                 "Pressed",
                 "Loading",
-                "Selected",
-                "Selected-Pressed",
-                "Selected-Loading",
-                "Disabled",
-                "Disabled-Selected"
+                "Disabled"
             ]
         }
     }
 };
 
-const metadata$b = {
+const metadata$c = {
     "name": "🟢 Resizable.Icon",
     "key": "1f74eedb6fb186fd201d6ad5b2dbcd46a2bddf3e",
     "componentPropertyDefinitions": {
@@ -2211,7 +2231,7 @@ const metadata$b = {
     }
 };
 
-const metadata$a = {
+const metadata$b = {
     "name": "🟢 ResizableChild",
     "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6",
     "componentPropertyDefinitions": {
@@ -2230,7 +2250,7 @@ const metadata$a = {
     }
 };
 
-const metadata$9 = {
+const metadata$a = {
     "name": "🟢 Segmented Control",
     "key": "3ad7133ba52755867f42f9232375f75639e00d58",
     "componentPropertyDefinitions": {
@@ -2254,7 +2274,7 @@ const metadata$9 = {
     }
 };
 
-const metadata$8 = {
+const metadata$9 = {
     "name": "🟢 Select Box",
     "key": "38722ffeb4c966256a709155e8ddac50c93d7c60",
     "componentPropertyDefinitions": {
@@ -2274,19 +2294,24 @@ const metadata$8 = {
                 "Radio"
             ]
         },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
-                "Pressed",
-                "Selected",
-                "Selected-Pressed"
+                "Pressed"
             ]
         }
     }
 };
 
-const metadata$7 = {
+const metadata$8 = {
     "name": "🟢 Skeleton",
     "key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a",
     "componentPropertyDefinitions": {
@@ -2309,7 +2334,7 @@ const metadata$7 = {
     }
 };
 
-const metadata$6 = {
+const metadata$7 = {
     "name": "🟢 Slider",
     "key": "aee027230a478315e380704c4523141e67e464ee",
     "componentPropertyDefinitions": {
@@ -2341,7 +2366,7 @@ const metadata$6 = {
     }
 };
 
-const metadata$5 = {
+const metadata$6 = {
     "name": "🟢 Snackbar",
     "key": "81b17fb8c7d731a19cf8d36a8605559d41414eca",
     "componentPropertyDefinitions": {
@@ -2365,27 +2390,60 @@ const metadata$5 = {
     }
 };
 
+const metadata$5 = {
+    "name": "🟢 SuperscriptChild",
+    "key": "19923052d4152393ecdc6e2f5853ea0359849127",
+    "componentPropertyDefinitions": {
+        "Icon#37641:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Icon",
+                "Notification Badge",
+                "Custom"
+            ]
+        }
+    }
+};
+
 const metadata$4 = {
     "name": "🟢 Switch",
-    "key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3",
+    "key": "65e0e7ba1a0c13b42e5fd0ceb17d5f756128dd6b",
     "componentPropertyDefinitions": {
-        "Label#15191:2": {
+        "Label#36578:0": {
             "type": "TEXT"
         },
         "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Small",
-                "Medium"
+                "16",
+                "24",
+                "32"
+            ]
+        },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
             ]
         },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
-                "Selected",
-                "Disabled",
-                "Selected-Disabled"
+                "Disabled"
+            ]
+        },
+        "Label Layout(Figma Only)": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "None",
+                "Right",
+                "Left"
             ]
         }
     }
@@ -2540,17 +2598,20 @@ const metadata$1 = {
                 "Brand Solid"
             ]
         },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
                 "Pressed",
                 "Loading",
-                "Selected",
-                "Selected-Pressed",
-                "Selected-Loading",
-                "Disabled",
-                "Disabled-Selected"
+                "Disabled"
             ]
         }
     }
@@ -2601,50 +2662,51 @@ const metadata = {
 
 var FIGMA_COMPONENTS = {
   __proto__: null,
-  actionButton: metadata$E,
-  alertDialog: metadata$D,
-  avatar: metadata$C,
-  avatarStack: metadata$B,
-  badge: metadata$A,
-  bottomNavigationGlobal: metadata$z,
-  bottomNavigationKr: metadata$y,
-  bottomSheet: metadata$x,
-  callout: metadata$w,
-  checkbox: metadata$v,
-  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,
+  actionButton: metadata$F,
+  alertDialog: metadata$E,
+  avatar: metadata$D,
+  avatarStack: metadata$C,
+  badge: metadata$B,
+  bottomNavigationGlobal: metadata$A,
+  bottomNavigationKr: metadata$z,
+  bottomSheet: metadata$y,
+  callout: metadata$x,
+  checkbox: metadata$w,
+  checkmark: metadata$v,
+  chip: metadata$u,
+  chlid: metadata$t,
+  contextualFloatingButton: metadata$s,
+  divider: metadata$r,
+  floatingActionButton: metadata$q,
+  helpBubble: metadata$p,
+  inlineBanner: metadata$o,
+  mainTabNavigationGlobal: metadata$n,
+  mainTabNavigationKr: metadata$m,
+  mannerTemp: metadata$l,
+  mannerTempBadge: metadata$k,
+  menuSheet: metadata$j,
+  multilineTextField: metadata$i,
+  progressCircle: metadata$h,
+  radio: metadata$g,
+  radioMark: metadata$f,
+  rangeSlider: metadata$e,
+  reactionButton: metadata$d,
+  resizableChild: metadata$b,
+  resizableIcon: metadata$c,
+  segmentedControl: metadata$a,
+  selectBox: metadata$9,
+  skeleton: metadata$8,
+  slider: metadata$7,
+  snackbar: metadata$6,
+  superscriptChild: metadata$5,
   switch: metadata$4,
   tabs: metadata$3,
-  templateButtonGroup: metadata$K,
-  templateChipGroup: metadata$J,
-  templateCompletion: metadata$I,
-  templateErrorState: metadata$H,
-  templateSelectBoxGroup: metadata$G,
-  templateTopNavigation: metadata$F,
+  templateButtonGroup: metadata$L,
+  templateChipGroup: metadata$K,
+  templateCompletion: metadata$J,
+  templateErrorState: metadata$I,
+  templateSelectBoxGroup: metadata$H,
+  templateTopNavigation: metadata$G,
   textField: metadata$2,
   toggleButton: metadata$1,
   topNavigation: metadata
@@ -2668,8 +2730,8 @@ function handleSizeProp(size) {
     }
 }
 
-const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("action-button");
-const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$E.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("action-button");
+const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$F.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -2709,7 +2771,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$E.key,
             variant: camelCase(props.Variant.value),
             layout
         };
-        return createLocalSnippetElement$p("ActionButton", commonProps, children);
+        return createLocalSnippetElement$q("ActionButton", commonProps, children);
     });
 const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
 const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTTON_GHOST_BUTTON_KEY, ({ componentProperties: props })=>{
@@ -2756,26 +2818,26 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTT
                 bleedY: "asPadding"
             }
         };
-        return createLocalSnippetElement$p("ActionButton", commonProps, children);
+        return createLocalSnippetElement$q("ActionButton", commonProps, children);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElement$p } = 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 createAlertDialogHandler = (_ctx)=>defineComponentHandler(metadata$E.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const alertDialogHeader = createLocalSnippetElement$o("AlertDialogHeader", undefined, [
+        const alertDialogHeader = createLocalSnippetElement$p("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
-                createLocalSnippetElement$o("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
+                createLocalSnippetElement$p("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
             ] : [],
-            createLocalSnippetElement$o("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
+            createLocalSnippetElement$p("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
         ]);
         const footerNodes = findAllInstances({
             node,
             key: ALERT_DIALOG_FOOTER_KEY
         });
         if (footerNodes.length === 0 || footerNodes.length > 1) {
-            return createLocalSnippetElement$o("AlertDialog", undefined, alertDialogHeader, {
+            return createLocalSnippetElement$p("AlertDialog", undefined, alertDialogHeader, {
                 comment: "Footer 영역을 확인해주세요."
             });
         }
@@ -2783,21 +2845,21 @@ const createAlertDialogHandler = (_ctx)=>defineComponentHandler(metadata$D.key,
         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", {
+        const alertDialogFooter = createLocalSnippetElement$p("AlertDialogFooter", undefined, alertDialogFooterChildren);
+        return createLocalSnippetElement$p("AlertDialogRoot", {
             open: true
         }, [
-            createLocalSnippetElement$o("AlertDialogTrigger", {
+            createLocalSnippetElement$p("AlertDialogTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$3("ActionButton", {}, "AlertDialog 열기")),
-            createLocalSnippetElement$o("AlertDialogContent", undefined, [
+            createLocalSnippetElement$p("AlertDialogContent", undefined, [
                 alertDialogHeader,
                 alertDialogFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("app-bar");
+const { createLocalSnippetElement: createLocalSnippetElement$o } = 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";
@@ -2814,12 +2876,12 @@ const createAppBarMainHandler = (_ctx)=>{
                 subtitle: undefined
             })).exhaustive();
         if (title) {
-            return createLocalSnippetElement$n("AppBarMain", {
+            return createLocalSnippetElement$o("AppBarMain", {
                 title,
                 subtitle
             });
         }
-        return createLocalSnippetElement$n("AppBarMain", undefined, undefined, {
+        return createLocalSnippetElement$o("AppBarMain", undefined, undefined, {
             comment: "AppBarMain 내부를 직접 작성해주세요."
         });
     });
@@ -2846,33 +2908,33 @@ const createAppBarHandler = (ctx)=>{
             return appBarMainHandler.transform(mainNode, traverse);
         })();
         const leftChildren = match(props.Left.value).with("None", ()=>undefined).with("Back", ()=>[
-                createLocalSnippetElement$n("AppBarBackButton")
+                createLocalSnippetElement$o("AppBarBackButton")
             ]).with("Close", ()=>[
-                createLocalSnippetElement$n("AppBarCloseButton")
+                createLocalSnippetElement$o("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"]), {
+                return buttons.map((button)=>createLocalSnippetElement$o("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 left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$o("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"]), {
+            return buttons.map((button)=>createLocalSnippetElement$o("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", {
+        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$o("AppBarRight", {}, rightChildren) : undefined;
+        return createLocalSnippetElement$o("AppBar", {
             theme,
             tone
         }, [
@@ -2886,17 +2948,18 @@ const createAppBarHandler = (ctx)=>{
 };
 
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
+const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("identity-placeholder");
 const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
-        return createSeedReactElement("IdentityPlaceholder", commonProps);
+        return createLocalSnippetElement$n("IdentityPlaceholder", commonProps);
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("avatar");
 const createAvatarHandler = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler();
-    return defineComponentHandler(metadata$C.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$D.key, (node, traverse)=>{
         const [placeholder] = findAllInstances({
             node,
             key: identityPlaceholderHandler.key
@@ -2931,7 +2994,7 @@ const createAvatarHandler = (ctx)=>{
 const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
-    return defineComponentHandler(metadata$B.key, (node)=>{
+    return defineComponentHandler(metadata$C.key, (node, traverse)=>{
         const avatarNodes = findAllInstances({
             node,
             key: avatarHandler.key
@@ -2940,12 +3003,12 @@ const createAvatarStackHandler = (ctx)=>{
         const commonProps = {
             size: props.Size.value
         };
-        const avatarStackChildren = avatarNodes.map(avatarHandler.transform);
+        const avatarStackChildren = avatarNodes.map((avatarNode)=>avatarHandler.transform(avatarNode, traverse));
         return createLocalSnippetElement$l("AvatarStack", commonProps, avatarStackChildren);
     });
 };
 
-const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$A.key, ({ componentProperties: props })=>{
+const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$B.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
             tone: camelCase(props.Tone.value),
@@ -2959,7 +3022,7 @@ const { createLocalSnippetElement: createLocalSnippetElementTrigger$2 } = create
 // 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 createBottomSheetHandler = (_ctx)=>defineComponentHandler(metadata$y.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 = {
@@ -2996,7 +3059,7 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(metadata$x.key,
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("callout");
-const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$w.key, ({ componentProperties: props, children })=>{
+const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$x.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) {
@@ -3056,21 +3119,20 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$w.key, ({ co
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("checkbox");
-const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$v.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
+const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$w.key, ({ componentProperties: props })=>{
         const commonProps = {
             label: props["Label#49990:0"].value,
             weight: camelCase(props.Weight.value),
             variant: camelCase(props.Shape.value),
             size: handleSizeProp(props.Size.value),
-            ...states.includes("Selected") && {
+            ...props.Selected.value === "True" && {
                 defaultChecked: true
             },
-            ...states.includes("Indeterminate") && {
+            ...props.Selected.value === "Indeterminate" && {
                 defaultChecked: true,
                 indeterminate: true
             },
-            ...states.includes("Disabled") && {
+            ...props.State.value === "Disabled" && {
                 disabled: true
             }
         };
@@ -3078,40 +3140,54 @@ const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$v.key, ({
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("chip");
+const CHIP_ICON_SUFFIX_KEY = "27343e0e5ab2c66948e9b10fde03d58b5e037212";
+const createChipIconSuffixHandler = (ctx)=>{
+    return defineComponentHandler(CHIP_ICON_SUFFIX_KEY, ({ componentProperties })=>{
+        return createLocalSnippetElement$h("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
+            svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"])
+        }));
+    });
+};
 const createChipHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
-    return defineComponentHandler(metadata$t.key, (node, traverse)=>{
+    const iconSuffixHandler = createChipIconSuffixHandler(ctx);
+    return defineComponentHandler(metadata$u.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 prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$h("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
+                svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
+            }))).with("Avatar", ()=>{
             const [avatar] = findAllInstances({
                 node,
-                key: metadata$C.key
+                key: metadata$D.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 label = createLocalSnippetElement$h("Chip.Label", undefined, props["Label#7185:0"].value);
+        const [suffixIcon] = findAllInstances({
+            node,
+            key: CHIP_ICON_SUFFIX_KEY
+        });
         const commonProps = {
             variant: camelCase(props.Variant.value),
             size: handleSizeProp(props.Size.value),
             layout: props["Label#7185:0"].value ? "withText" : "iconOnly",
-            ...states.includes("Disabled") && {
+            ...props.State.value === "Disabled" && {
                 disabled: true
             }
         };
         return createLocalSnippetElement$h("Chip.Button", commonProps, [
             prefix,
-            props["Label#7185:0"].value,
-            suffix
+            label,
+            suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined
         ], {
-            comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로도 사용할 수 있습니다."
+            comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로 바꿔 사용하세요."
         });
     });
 };
 
 const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("contextual-floating-button");
-const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(metadata$r.key, ({ componentProperties: props })=>{
+const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(metadata$s.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -3142,7 +3218,7 @@ const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(meta
         return createLocalSnippetElement$g("ContextualFloatingButton", commonProps, children);
     });
 
-const createDividerHandler = (_ctx)=>defineComponentHandler(metadata$q.key, ({ componentProperties: props })=>{
+const createDividerHandler = (_ctx)=>defineComponentHandler(metadata$r.key, ({ componentProperties: props })=>{
         const { color } = match(props.Tone.value).with("Neutral", ()=>({
                 color: "stroke.neutral"
             })).with("Neutral Muted", ()=>({
@@ -3156,7 +3232,7 @@ const createDividerHandler = (_ctx)=>defineComponentHandler(metadata$q.key, ({ c
 const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("error-state");
 const createErrorStateHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
-    return defineComponentHandler(metadata$H.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$I.key, (node, traverse)=>{
         const props = node.componentProperties;
         const [actionButtonNode] = findAllInstances({
             node,
@@ -3184,7 +3260,7 @@ const createErrorStateHandler = (ctx)=>{
 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 createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(metadata$q.key, (node)=>{
         const [button] = findAllInstances({
             node,
             key: BUTTON_TYPE_KEY
@@ -3210,7 +3286,7 @@ const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(metadata
 
 const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("help-bubble");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$1 } = createLocalSnippetHelper("action-button");
-const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$o.key, ({ componentProperties: props })=>{
+const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$p.key, ({ componentProperties: props })=>{
         const placement = (()=>{
             switch(props.Placement.value){
                 case "Bottom-Left":
@@ -3251,7 +3327,7 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$o.key, (
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("inline-banner");
-const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$n.key, (node)=>{
+const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$o.key, (node)=>{
         const { componentProperties: props } = node;
         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");
@@ -3294,7 +3370,7 @@ const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$n.key,
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("manner-temp-badge");
-const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$j.key, ({ children })=>{
+const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$k.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
@@ -3302,8 +3378,8 @@ const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$j.k
         return createLocalSnippetElement$b("MannerTempBadge", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp-badge");
-const createMannerTempHandler = (_ctx)=>defineComponentHandler(metadata$k.key, ({ children })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp");
+const createMannerTempHandler = (_ctx)=>defineComponentHandler(metadata$l.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
@@ -3343,7 +3419,7 @@ const createMenuSheetGroupHandler = (ctx)=>{
 };
 const createMenuSheetHandler = (ctx)=>{
     const menuSheetGroupHandler = createMenuSheetGroupHandler(ctx);
-    return defineComponentHandler(metadata$i.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$j.key, (node, traverse)=>{
         const { componentProperties: props } = node;
         const groups = findAllInstances({
             node,
@@ -3375,7 +3451,7 @@ const createMenuSheetHandler = (ctx)=>{
 };
 
 const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("text-field");
-const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$h.key, ({ componentProperties: props })=>{
+const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$i.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 = {
@@ -3421,7 +3497,7 @@ const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("progress-circle");
-const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$g.key, ({ componentProperties: props })=>{
+const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$h.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
                 minValue: undefined,
@@ -3448,7 +3524,7 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$g.ke
             minValue,
             maxValue,
             size: props.Size.value,
-            ...props.Tone.value !== "Custom" && {
+            ...props.Tone.value !== "Custom(inherit)" && {
                 tone: camelCase(props.Tone.value)
             }
         };
@@ -3456,17 +3532,16 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$g.ke
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("reaction-button");
-const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$c.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
+const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$d.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
-            ...states.includes("Loading") && {
+            ...props.State.value === "Loading" && {
                 loading: true
             },
-            ...states.includes("Disabled") && {
+            ...props.State.value === "Disabled" && {
                 disabled: true
             },
-            ...states.includes("Selected") && {
+            ...props.Selected.value === "True" && {
                 defaultPressed: true
             }
         };
@@ -3493,7 +3568,7 @@ const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENT
     });
 const createSegmentedControlHandler = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler();
-    return defineComponentHandler(metadata$9.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$a.key, (node, traverse)=>{
         const segments = findAllInstances({
             node,
             key: segmentedControlItemHandler.key
@@ -3512,18 +3587,17 @@ const createSegmentedControlHandler = (ctx)=>{
 };
 
 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 createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$9.key, ({ componentProperties: props })=>{
+        const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
         const commonProps = {
             label: props["Label#3635:0"].value,
             ...props["Show Description#3033:0"].value && {
                 description: props["Description #3033:5"].value
             },
-            ...tag === "RadioSelectBox" && {
+            ...tag === "RadioSelectBoxItem" && {
                 value: props["Label#3635:0"].value
             },
-            ...tag === "CheckSelectBox" && states.includes("Selected") && {
+            ...tag === "CheckSelectBox" && props.Selected.value === "True" && {
                 defaultChecked: true
             }
         };
@@ -3531,14 +3605,14 @@ const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({
     });
 const createSelectBoxGroupHandler = (ctx)=>{
     const selectBoxHandler = createSelectBoxHandler();
-    return defineComponentHandler(metadata$G.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$H.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBoxGroup").with("Radio", ()=>"RadioSelectBoxGroup").exhaustive();
+        const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBoxGroup").with("Radio", ()=>"RadioSelectBoxRoot").exhaustive();
         const selectBoxes = findAllInstances({
             node,
             key: selectBoxHandler.key
         });
-        const selectedSelectBox = selectBoxes.find((selectBox)=>selectBox.componentProperties.State.value.split("-").includes("Selected"));
+        const selectedSelectBox = selectBoxes.find((selectBox)=>selectBox.componentProperties.Selected.value === "True");
         // traverse the container like it's a frame
         const vStackProps = traverse({
             ...node,
@@ -3546,7 +3620,7 @@ const createSelectBoxGroupHandler = (ctx)=>{
         })?.props;
         const stack = createSeedReactElement("VStack", vStackProps, selectBoxes.map((box)=>selectBoxHandler.transform(box, traverse)));
         const commonProps = {
-            ...tag === "RadioSelectBoxGroup" && {
+            ...tag === "RadioSelectBoxRoot" && {
                 defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
             }
         };
@@ -3554,7 +3628,7 @@ const createSelectBoxGroupHandler = (ctx)=>{
     });
 };
 
-const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$7.key, (node)=>{
+const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$8.key, (node)=>{
         const { componentProperties: props, layoutSizingHorizontal, layoutSizingVertical } = node;
         const commonProps = {
             radius: camelCase(props.Radius.value),
@@ -3565,7 +3639,7 @@ const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$7.key, (nod
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$3 } = createLocalSnippetHelper("snackbar");
-const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$5.key, ({ componentProperties: props })=>{
+const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$6.key, ({ componentProperties: props })=>{
         const commonProps = {
             message: props["Message#1528:4"].value,
             variant: camelCase(props.Variant.value),
@@ -3579,17 +3653,13 @@ const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$5.key, ({
 
 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);
         const commonProps = {
-            size,
-            ...size === "small" && {
-                label: props["Label#15191:2"].value
-            },
-            ...states.includes("Selected") && {
+            size: props.Size.value,
+            label: props["Label#36578:0"].value,
+            ...props.Selected.value === "True" && {
                 defaultChecked: true
             },
-            ...states.includes("Disabled") && {
+            ...props.State.value === "Disabled" && {
                 disabled: true
             }
         };
@@ -3657,17 +3727,16 @@ const createTextFieldHandler = (ctx)=>defineComponentHandler(metadata$2.key, ({
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
 const createToggleButtonHandler = (ctx)=>defineComponentHandler(metadata$1.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
         const commonProps = {
             variant: camelCase(props.Variant.value),
             size: handleSizeProp(props.Size.value),
-            ...states.includes("Selected") && {
+            ...props.Selected.value === "True" && {
                 defaultPressed: true
             },
-            ...states.includes("Disabled") && {
+            ...props.State.value === "Disabled" && {
                 disabled: true
             },
-            ...states.includes("Loading") && {
+            ...props.State.value === "Loading" && {
                 loading: true
             }
         };