@seed-design/figma 0.1.9 → 0.1.11

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

@@ -682,7 +682,7 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
 function createContainerLayoutPropsConverter(valueResolver) {
     return createPropsConverter({
         handlers: {
-            direction: ({ layoutMode })=>tsPattern.match(layoutMode).with("HORIZONTAL", ()=>"row").with("VERTICAL", ()=>"column").with("NONE", ()=>undefined).with(undefined, ()=>undefined).exhaustive(),
+            direction: ({ layoutMode })=>tsPattern.match(layoutMode).with("HORIZONTAL", ()=>"row").with("VERTICAL", ()=>"column").with("GRID", ()=>undefined).with("NONE", ()=>undefined).with(undefined, ()=>undefined).exhaustive(),
             justify: ({ primaryAxisAlignItems })=>tsPattern.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)=>{
@@ -954,20 +954,26 @@ function createFrameTransformer({ propsConverters }) {
             ...propsConverters.stroke(node)
         };
         const isStretch = props.align === undefined || props.align === "stretch";
-        const processedChildren = isStretch ? transformedChildren.map((child)=>child ? cloneElement(child, {
-                alignSelf: undefined
-            }) : child) : transformedChildren;
         const layoutComponent = inferLayoutComponent(props, isFlex);
-        if (layoutComponent === "VStack") {
-            const { direction, ...rest } = props;
-            return createSeedReactElement("VStack", rest, processedChildren);
-        }
-        if (layoutComponent === "HStack") {
-            const { direction, ...rest } = props;
-            return createSeedReactElement("HStack", rest, processedChildren);
-        }
-        if (layoutComponent === "Box") {
-            return createSeedReactElement("Box", props, processedChildren);
+        const hasImageFill = node.fills.some(({ type })=>type === "IMAGE");
+        const imgElement = hasImageFill ? createElement("img", {
+            src: `https://placehold.co/${node.absoluteBoundingBox?.width ?? 100}x${node.absoluteBoundingBox?.height ?? 100}`
+        }) : undefined;
+        const processedChildren = [
+            imgElement,
+            ...isStretch ? transformedChildren.map((child)=>child ? cloneElement(child, {
+                    alignSelf: undefined
+                }) : child) : transformedChildren
+        ];
+        switch(layoutComponent){
+            case "VStack":
+            case "HStack":
+                {
+                    const { direction: _direction, ...rest } = props;
+                    return createSeedReactElement(layoutComponent, rest, processedChildren);
+                }
+            case "Box":
+                return createSeedReactElement("Box", props, processedChildren);
         }
     });
 }
@@ -987,7 +993,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 +1026,7 @@ function createTextTransformer({ propsConverters }) {
     });
 }
 
-const metadata$K = {
+const metadata$L = {
     "name": "🔵 [Template] Button Group",
     "key": "29109a34197f2eb5d390b1d9ebba270979a7b302",
     "componentPropertyDefinitions": {
@@ -1037,7 +1054,7 @@ const metadata$K = {
     }
 };
 
-const metadata$J = {
+const metadata$K = {
     "name": "🔵 [Template] Chip Group",
     "key": "5b1155aae0f90d1bce6a7499f53a547e88ec3b86",
     "componentPropertyDefinitions": {
@@ -1067,7 +1084,7 @@ const metadata$J = {
     }
 };
 
-const metadata$I = {
+const metadata$J = {
     "name": "🔵 [Template] Completion",
     "key": "d91c789c66c2da665d820318f1a4d8671946eb79",
     "componentPropertyDefinitions": {
@@ -1096,7 +1113,7 @@ const metadata$I = {
     }
 };
 
-const metadata$H = {
+const metadata$I = {
     "name": "🔵 [Template] Error State",
     "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
     "componentPropertyDefinitions": {
@@ -1129,7 +1146,7 @@ const metadata$H = {
     }
 };
 
-const metadata$G = {
+const metadata$H = {
     "name": "🔵 [Template] Select Box Group",
     "key": "a3d58bb8540600878742cdcf2608a4b3851667ec",
     "componentPropertyDefinitions": {
@@ -1154,7 +1171,7 @@ const metadata$G = {
     }
 };
 
-const metadata$F = {
+const metadata$G = {
     "name": "🔵 [Template] Top Navigation",
     "key": "74f045c1972dc31d0fddd0a0027537b6779cd0e8",
     "componentPropertyDefinitions": {
@@ -1182,7 +1199,7 @@ const metadata$F = {
     }
 };
 
-const metadata$E = {
+const metadata$F = {
     "name": "🟢 Action Button",
     "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89",
     "componentPropertyDefinitions": {
@@ -1242,7 +1259,7 @@ const metadata$E = {
     }
 };
 
-const metadata$D = {
+const metadata$E = {
     "name": "🟢 Alert Dialog",
     "key": "e0c89524a554ca1bf95c016b7255f29e257624aa",
     "componentPropertyDefinitions": {
@@ -1269,7 +1286,7 @@ const metadata$D = {
     }
 };
 
-const metadata$C = {
+const metadata$D = {
     "name": "🟢 Avatar",
     "key": "4a8853c3068c08b69b13e71dd42ce186e968697e",
     "componentPropertyDefinitions": {
@@ -1301,7 +1318,7 @@ const metadata$C = {
     }
 };
 
-const metadata$B = {
+const metadata$C = {
     "name": "🟢 Avatar Stack",
     "key": "e8e91e01000d878742c55cd6e44b6786460440f7",
     "componentPropertyDefinitions": {
@@ -1321,7 +1338,7 @@ const metadata$B = {
     }
 };
 
-const metadata$A = {
+const metadata$B = {
     "name": "🟢 Badge",
     "key": "04609a35d47a1a0ef4904b3c25f79451892a85a1",
     "componentPropertyDefinitions": {
@@ -1356,7 +1373,7 @@ const metadata$A = {
     }
 };
 
-const metadata$z = {
+const metadata$A = {
     "name": "🟢 Bottom Navigation / Global",
     "key": "983650a4dff639b38bf68ff6004efc8ec4fb5c20",
     "componentPropertyDefinitions": {
@@ -1380,7 +1397,7 @@ const metadata$z = {
     }
 };
 
-const metadata$y = {
+const metadata$z = {
     "name": "🟢 Bottom Navigation / KR",
     "key": "accc7cea2d0250cdfbf0197ce00a677c6b9e0dae",
     "componentPropertyDefinitions": {
@@ -1397,7 +1414,7 @@ const metadata$y = {
     }
 };
 
-const metadata$x = {
+const metadata$y = {
     "name": "🟢 Bottom Sheet",
     "key": "16bafa5d1155896fe18fb6f52f904f5cd2048686",
     "componentPropertyDefinitions": {
@@ -1461,7 +1478,7 @@ const metadata$x = {
     }
 };
 
-const metadata$w = {
+const metadata$x = {
     "name": "🟢 Callout",
     "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe",
     "componentPropertyDefinitions": {
@@ -1510,7 +1527,7 @@ const metadata$w = {
     }
 };
 
-const metadata$v = {
+const metadata$w = {
     "name": "🟢 Checkbox",
     "key": "94a2f6957a86f8ae3b8c7ca200dfcd5e29f6075b",
     "componentPropertyDefinitions": {
@@ -1538,24 +1555,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 +1592,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": {
@@ -1654,19 +1675,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": {
@@ -1681,7 +1702,7 @@ const metadata$t = {
     }
 };
 
-const metadata$s = {
+const metadata$t = {
     "name": "🟢 Chlid",
     "key": "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc",
     "componentPropertyDefinitions": {
@@ -1696,7 +1717,7 @@ const metadata$s = {
     }
 };
 
-const metadata$r = {
+const metadata$s = {
     "name": "🟢 Contextual Floating Button",
     "key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f",
     "componentPropertyDefinitions": {
@@ -1733,7 +1754,7 @@ const metadata$r = {
     }
 };
 
-const metadata$q = {
+const metadata$r = {
     "name": "🟢 Divider",
     "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
     "componentPropertyDefinitions": {
@@ -1747,7 +1768,7 @@ const metadata$q = {
     }
 };
 
-const metadata$p = {
+const metadata$q = {
     "name": "🟢 Floating Action Button",
     "key": "65f9e7eede627b893fb8ff94ed9a7d0db900c464",
     "componentPropertyDefinitions": {
@@ -1761,7 +1782,7 @@ const metadata$p = {
     }
 };
 
-const metadata$o = {
+const metadata$p = {
     "name": "🟢 Help Bubble",
     "key": "804b327c091278a40d5891939eaed90bb2889659",
     "componentPropertyDefinitions": {
@@ -1794,7 +1815,7 @@ const metadata$o = {
     }
 };
 
-const metadata$n = {
+const metadata$o = {
     "name": "🟢 Inline Banner",
     "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
     "componentPropertyDefinitions": {
@@ -1835,7 +1856,7 @@ const metadata$n = {
     }
 };
 
-const metadata$m = {
+const metadata$n = {
     "name": "🟢 Main Tab Navigation / Global",
     "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
     "componentPropertyDefinitions": {
@@ -1862,7 +1883,7 @@ const metadata$m = {
     }
 };
 
-const metadata$l = {
+const metadata$m = {
     "name": "🟢 Main Tab Navigation / KR",
     "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
     "componentPropertyDefinitions": {
@@ -1886,7 +1907,7 @@ const metadata$l = {
     }
 };
 
-const metadata$k = {
+const metadata$l = {
     "name": "🟢 Manner Temp",
     "key": "37c0a35f73a730fdfba7929cea91a7590fc93733",
     "componentPropertyDefinitions": {
@@ -1904,7 +1925,7 @@ const metadata$k = {
     }
 };
 
-const metadata$j = {
+const metadata$k = {
     "name": "🟢 Manner Temp Badge",
     "key": "3ef9a84d4d80046ff9a581136bd56269554a6e00",
     "componentPropertyDefinitions": {
@@ -1922,7 +1943,7 @@ const metadata$j = {
     }
 };
 
-const metadata$i = {
+const metadata$j = {
     "name": "🟢 Menu Sheet",
     "key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb",
     "componentPropertyDefinitions": {
@@ -1959,7 +1980,7 @@ const metadata$i = {
     }
 };
 
-const metadata$h = {
+const metadata$i = {
     "name": "🟢 Multiline Text Field",
     "key": "88b2399c930c85f9ce2972163a078bc684b84bbe",
     "componentPropertyDefinitions": {
@@ -2028,7 +2049,7 @@ const metadata$h = {
     }
 };
 
-const metadata$g = {
+const metadata$h = {
     "name": "🟢 Progress Circle",
     "key": "6e6779a372cab2485a0e25529bc4dbc9932a7346",
     "componentPropertyDefinitions": {
@@ -2061,7 +2082,7 @@ const metadata$g = {
     }
 };
 
-const metadata$f = {
+const metadata$g = {
     "name": "🟢 Radio",
     "key": "ac72d9e5ab04a1d59eaf77dffd380fd6e491ecf8",
     "componentPropertyDefinitions": {
@@ -2075,21 +2096,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": {
@@ -2107,24 +2132,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": {
@@ -2156,7 +2175,7 @@ const metadata$d = {
     }
 };
 
-const metadata$c = {
+const metadata$d = {
     "name": "🟢 Reaction Button",
     "key": "ec43e4e881f7048e95601f8b58c01a0905a174e0",
     "componentPropertyDefinitions": {
@@ -2180,23 +2199,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": {
@@ -2215,7 +2237,7 @@ const metadata$b = {
     }
 };
 
-const metadata$a = {
+const metadata$b = {
     "name": "🟢 ResizableChild",
     "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6",
     "componentPropertyDefinitions": {
@@ -2234,7 +2256,7 @@ const metadata$a = {
     }
 };
 
-const metadata$9 = {
+const metadata$a = {
     "name": "🟢 Segmented Control",
     "key": "3ad7133ba52755867f42f9232375f75639e00d58",
     "componentPropertyDefinitions": {
@@ -2258,7 +2280,7 @@ const metadata$9 = {
     }
 };
 
-const metadata$8 = {
+const metadata$9 = {
     "name": "🟢 Select Box",
     "key": "38722ffeb4c966256a709155e8ddac50c93d7c60",
     "componentPropertyDefinitions": {
@@ -2278,19 +2300,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": {
@@ -2313,7 +2340,7 @@ const metadata$7 = {
     }
 };
 
-const metadata$6 = {
+const metadata$7 = {
     "name": "🟢 Slider",
     "key": "aee027230a478315e380704c4523141e67e464ee",
     "componentPropertyDefinitions": {
@@ -2345,7 +2372,7 @@ const metadata$6 = {
     }
 };
 
-const metadata$5 = {
+const metadata$6 = {
     "name": "🟢 Snackbar",
     "key": "81b17fb8c7d731a19cf8d36a8605559d41414eca",
     "componentPropertyDefinitions": {
@@ -2369,6 +2396,25 @@ 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": "65e0e7ba1a0c13b42e5fd0ceb17d5f756128dd6b",
@@ -2384,13 +2430,18 @@ const metadata$4 = {
                 "32"
             ]
         },
+        "Selected": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
-                "Disabled",
-                "Selected",
-                "Selected-Disabled"
+                "Disabled"
             ]
         },
         "Label Layout(Figma Only)": {
@@ -2553,17 +2604,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"
             ]
         }
     }
@@ -2614,50 +2668,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
@@ -2682,7 +2737,7 @@ function handleSizeProp(size) {
 }
 
 const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("action-button");
-const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$E.key, ({ componentProperties: props })=>{
+const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$F.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = tsPattern.match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -2775,7 +2830,7 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTT
 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$p("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
@@ -2910,7 +2965,7 @@ const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY
 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
@@ -2945,7 +3000,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
@@ -2954,12 +3009,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: changeCase.camelCase(props.Tone.value),
@@ -2973,7 +3028,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 = tsPattern.match(props["Header Layout"].value).with("Bottom Left", "Top Left", ()=>"left").with("Bottom Center", "Top Center", ()=>"center").with("None", ()=>undefined).exhaustive();
         const contentProps = {
@@ -3010,7 +3065,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 = tsPattern.match(props.Interaction.value).with("Display", ()=>"Callout").with("Actionable", ()=>"ActionableCallout").with("Dismissible", ()=>"DismissibleCallout").exhaustive();
         const textNode = children.find((child)=>child.type === "TEXT");
         if (!textNode) {
@@ -3070,21 +3125,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: changeCase.camelCase(props.Weight.value),
             variant: changeCase.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
             }
         };
@@ -3103,15 +3157,14 @@ const createChipIconSuffixHandler = (ctx)=>{
 const createChipHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
     const iconSuffixHandler = createChipIconSuffixHandler(ctx);
-    return defineComponentHandler(metadata$t.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$u.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const states = props.State.value.split("-");
         const prefix = tsPattern.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));
@@ -3125,7 +3178,7 @@ const createChipHandler = (ctx)=>{
             variant: changeCase.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
             }
         };
@@ -3140,7 +3193,7 @@ const createChipHandler = (ctx)=>{
 };
 
 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 } = tsPattern.match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -3171,7 +3224,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 } = tsPattern.match(props.Tone.value).with("Neutral", ()=>({
                 color: "stroke.neutral"
             })).with("Neutral Muted", ()=>({
@@ -3185,7 +3238,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,
@@ -3213,7 +3266,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
@@ -3239,7 +3292,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":
@@ -3280,7 +3333,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 = tsPattern.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");
@@ -3323,7 +3376,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")
@@ -3332,7 +3385,7 @@ const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$j.k
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp");
-const createMannerTempHandler = (_ctx)=>defineComponentHandler(metadata$k.key, ({ children })=>{
+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")
@@ -3372,7 +3425,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,
@@ -3404,7 +3457,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 = {
@@ -3450,7 +3503,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 } = tsPattern.match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
                 minValue: undefined,
@@ -3485,17 +3538,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
             }
         };
@@ -3522,7 +3574,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
@@ -3541,9 +3593,8 @@ const createSegmentedControlHandler = (ctx)=>{
 };
 
 const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("select-box");
-const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({ componentProperties: props })=>{
+const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$9.key, ({ componentProperties: props })=>{
         const tag = tsPattern.match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
-        const states = props.State.value.split("-");
         const commonProps = {
             label: props["Label#3635:0"].value,
             ...props["Show Description#3033:0"].value && {
@@ -3552,7 +3603,7 @@ const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({
             ...tag === "RadioSelectBoxItem" && {
                 value: props["Label#3635:0"].value
             },
-            ...tag === "CheckSelectBox" && states.includes("Selected") && {
+            ...tag === "CheckSelectBox" && props.Selected.value === "True" && {
                 defaultChecked: true
             }
         };
@@ -3560,14 +3611,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 = tsPattern.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,
@@ -3583,7 +3634,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: changeCase.camelCase(props.Radius.value),
@@ -3594,7 +3645,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: changeCase.camelCase(props.Variant.value),
@@ -3608,14 +3659,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 commonProps = {
             size: props.Size.value,
             label: props["Label#36578:0"].value,
-            ...states.includes("Selected") && {
+            ...props.Selected.value === "True" && {
                 defaultChecked: true
             },
-            ...states.includes("Disabled") && {
+            ...props.State.value === "Disabled" && {
                 disabled: true
             }
         };
@@ -3683,17 +3733,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: changeCase.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
             }
         };