@seed-design/figma 0.2.3 → 0.2.4

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

@@ -81,7 +81,7 @@ function stringifyElement(element, options = {}) {
         const propFragments = propEntries.map(([key, value])=>{
             if (typeof value === "string") {
                 if (value.includes("\n")) {
-                    return `${key}={\"${value.replace("\n", "\\n")}\"}`;
+                    return `${key}={"${value.replaceAll("\n", "\\n")}"}`;
                 }
                 return `${key}="${value}"`;
             }
@@ -93,7 +93,13 @@ function stringifyElement(element, options = {}) {
                 return `${key}={${value}}`;
             }
             if (isElement(value)) {
-                return `${key}={${recursive(value, depth + 1)}}`;
+                const elementStr = recursive(value, depth + 1);
+                const commentMatch = elementStr.match(/\{\/\* (.+?)\*\/\}$/);
+                if (commentMatch) {
+                    const elementWithoutComment = elementStr.replace(/\{\/\* .+? \*\/\}$/, "");
+                    return `${key}={${elementWithoutComment}}/* ${commentMatch[1]} */`;
+                }
+                return `${key}={${elementStr}}`;
             }
             if (typeof value === "object") {
                 return `${key}={${JSON.stringify(value)}}`;
@@ -101,6 +107,7 @@ function stringifyElement(element, options = {}) {
             if (typeof value === "undefined") {
                 return undefined;
             }
+            return undefined;
         }).filter(exists);
         const oneLiner = propFragments.join(" ");
         const propsString = propEntries.length === 0 ? "" : ` ${oneLiner.length < 80 ? oneLiner : `\n${"  ".repeat(depth + 1)}${propFragments.join(`\n${"  ".repeat(depth + 1)}`)}\n${"  ".repeat(depth)}`}`;
@@ -1026,7 +1033,7 @@ function createTextTransformer({ propsConverters }) {
     });
 }
 
-const metadata$L = {
+const metadata$N = {
     "name": "🔵 [Template] Button Group",
     "key": "29109a34197f2eb5d390b1d9ebba270979a7b302",
     "componentPropertyDefinitions": {
@@ -1054,7 +1061,7 @@ const metadata$L = {
     }
 };
 
-const metadata$K = {
+const metadata$M = {
     "name": "🔵 [Template] Chip Group",
     "key": "5b1155aae0f90d1bce6a7499f53a547e88ec3b86",
     "componentPropertyDefinitions": {
@@ -1084,7 +1091,7 @@ const metadata$K = {
     }
 };
 
-const metadata$J = {
+const metadata$L = {
     "name": "🔵 [Template] Completion",
     "key": "d91c789c66c2da665d820318f1a4d8671946eb79",
     "componentPropertyDefinitions": {
@@ -1113,7 +1120,7 @@ const metadata$J = {
     }
 };
 
-const metadata$I = {
+const metadata$K = {
     "name": "🔵 [Template] Error State",
     "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
     "componentPropertyDefinitions": {
@@ -1146,7 +1153,7 @@ const metadata$I = {
     }
 };
 
-const metadata$H = {
+const metadata$J = {
     "name": "🔵 [Template] Select Box Group",
     "key": "a3d58bb8540600878742cdcf2608a4b3851667ec",
     "componentPropertyDefinitions": {
@@ -1171,7 +1178,7 @@ const metadata$H = {
     }
 };
 
-const metadata$G = {
+const metadata$I = {
     "name": "🔵 [Template] Top Navigation",
     "key": "74f045c1972dc31d0fddd0a0027537b6779cd0e8",
     "componentPropertyDefinitions": {
@@ -1199,7 +1206,7 @@ const metadata$G = {
     }
 };
 
-const metadata$F = {
+const metadata$H = {
     "name": "🟢 Action Button",
     "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89",
     "componentPropertyDefinitions": {
@@ -1259,7 +1266,7 @@ const metadata$F = {
     }
 };
 
-const metadata$E = {
+const metadata$G = {
     "name": "🟢 Alert Dialog",
     "key": "e0c89524a554ca1bf95c016b7255f29e257624aa",
     "componentPropertyDefinitions": {
@@ -1286,7 +1293,7 @@ const metadata$E = {
     }
 };
 
-const metadata$D = {
+const metadata$F = {
     "name": "🟢 Avatar",
     "key": "4a8853c3068c08b69b13e71dd42ce186e968697e",
     "componentPropertyDefinitions": {
@@ -1319,7 +1326,7 @@ const metadata$D = {
     }
 };
 
-const metadata$C = {
+const metadata$E = {
     "name": "🟢 Avatar Stack",
     "key": "e8e91e01000d878742c55cd6e44b6786460440f7",
     "componentPropertyDefinitions": {
@@ -1340,7 +1347,7 @@ const metadata$C = {
     }
 };
 
-const metadata$B = {
+const metadata$D = {
     "name": "🟢 Badge",
     "key": "04609a35d47a1a0ef4904b3c25f79451892a85a1",
     "componentPropertyDefinitions": {
@@ -1376,7 +1383,7 @@ const metadata$B = {
     }
 };
 
-const metadata$A = {
+const metadata$C = {
     "name": "🟢 Bottom Navigation / Global",
     "key": "983650a4dff639b38bf68ff6004efc8ec4fb5c20",
     "componentPropertyDefinitions": {
@@ -1400,7 +1407,7 @@ const metadata$A = {
     }
 };
 
-const metadata$z = {
+const metadata$B = {
     "name": "🟢 Bottom Navigation / KR",
     "key": "accc7cea2d0250cdfbf0197ce00a677c6b9e0dae",
     "componentPropertyDefinitions": {
@@ -1417,7 +1424,7 @@ const metadata$z = {
     }
 };
 
-const metadata$y = {
+const metadata$A = {
     "name": "🟢 Bottom Sheet",
     "key": "16bafa5d1155896fe18fb6f52f904f5cd2048686",
     "componentPropertyDefinitions": {
@@ -1481,7 +1488,7 @@ const metadata$y = {
     }
 };
 
-const metadata$x = {
+const metadata$z = {
     "name": "🟢 Callout",
     "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe",
     "componentPropertyDefinitions": {
@@ -1530,7 +1537,7 @@ const metadata$x = {
     }
 };
 
-const metadata$w = {
+const metadata$y = {
     "name": "🟢 Checkbox",
     "key": "94a2f6957a86f8ae3b8c7ca200dfcd5e29f6075b",
     "componentPropertyDefinitions": {
@@ -1544,6 +1551,13 @@ const metadata$w = {
                 "Large"
             ]
         },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "🚫[Deprecated]Brand",
+                "Neutral"
+            ]
+        },
         "Shape": {
             "type": "VARIANT",
             "variantOptions": [
@@ -1554,8 +1568,8 @@ const metadata$w = {
         "Weight": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
-                "Stronger"
+                "Bold",
+                "Regular"
             ]
         },
         "Selected": {
@@ -1577,22 +1591,29 @@ const metadata$w = {
     }
 };
 
-const metadata$v = {
+const metadata$x = {
     "name": "🟢 Checkmark",
     "key": "fae60fb392f55bde60de1dbccb2f453320068805",
     "componentPropertyDefinitions": {
-        "Shape": {
+        "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Square",
-                "Ghost"
+                "Medium",
+                "Large"
             ]
         },
-        "Size": {
+        "Tone": {
             "type": "VARIANT",
             "variantOptions": [
-                "Medium",
-                "Large"
+                "🚫[Deprecated]Brand",
+                "Neutral"
+            ]
+        },
+        "Shape": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Square",
+                "Ghost"
             ]
         },
         "Selected": {
@@ -1614,7 +1635,7 @@ const metadata$v = {
     }
 };
 
-const metadata$u = {
+const metadata$w = {
     "name": "🟢 Chip",
     "key": "8156ef08d9aaa2b0de1cc4a113ec0c9d0586f831",
     "componentPropertyDefinitions": {
@@ -1705,7 +1726,7 @@ const metadata$u = {
     }
 };
 
-const metadata$t = {
+const metadata$v = {
     "name": "🟢 Chlid",
     "key": "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc",
     "componentPropertyDefinitions": {
@@ -1720,7 +1741,7 @@ const metadata$t = {
     }
 };
 
-const metadata$s = {
+const metadata$u = {
     "name": "🟢 Contextual Floating Button",
     "key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f",
     "componentPropertyDefinitions": {
@@ -1757,7 +1778,7 @@ const metadata$s = {
     }
 };
 
-const metadata$r = {
+const metadata$t = {
     "name": "🟢 Divider",
     "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
     "componentPropertyDefinitions": {
@@ -1767,8 +1788,8 @@ const metadata$r = {
         "Tone": {
             "type": "VARIANT",
             "variantOptions": [
-                "Neutral",
-                "Neutral Muted"
+                "Neutral Muted",
+                "Neutral Subtle"
             ]
         },
         "Orientation": {
@@ -1781,7 +1802,7 @@ const metadata$r = {
     }
 };
 
-const metadata$q = {
+const metadata$s = {
     "name": "🟢 Floating Action Button",
     "key": "65f9e7eede627b893fb8ff94ed9a7d0db900c464",
     "componentPropertyDefinitions": {
@@ -1795,10 +1816,13 @@ const metadata$q = {
     }
 };
 
-const metadata$p = {
+const metadata$r = {
     "name": "🟢 Help Bubble",
     "key": "804b327c091278a40d5891939eaed90bb2889659",
     "componentPropertyDefinitions": {
+        "Show Close Button#40538:0": {
+            "type": "BOOLEAN"
+        },
         "Show Description#62499:0": {
             "type": "BOOLEAN"
         },
@@ -1828,6 +1852,184 @@ const metadata$p = {
     }
 };
 
+const metadata$q = {
+    "name": "🟢 List Header",
+    "key": "609f93ed0608ef0a6d9a351e47595ad631bae0fa",
+    "componentPropertyDefinitions": {
+        "Title#28588:0": {
+            "type": "TEXT"
+        },
+        "Suffix": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "None",
+                "Button",
+                "Custom"
+            ]
+        },
+        "Title Weight": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Bold"
+            ]
+        }
+    }
+};
+
+const metadata$p = {
+    "name": "🟢 List Item",
+    "key": "b51b7d07c659fee5d696565b8e1151636573b27c",
+    "componentPropertyDefinitions": {
+        "Divider#28441:0": {
+            "type": "BOOLEAN"
+        },
+        "Suffix Type#28441:42": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT",
+                    "key": "8c52207687ffed15cd5931d71ed9d196b3358a68"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "fe0e25f4fecda59d0a3730ead7c5bc0a66a41e7e"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "abf9810103ae6e6afe8fa253ec5f05d6a7304b38"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "0a9464ad270bfd7f56438f62bb0155a25ca146a9"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "4cc7e9b84a8388a36cb3898c6c02e6110a3281b9"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "1e933f75dd6bb4b21c3289b5c3b4402d2c623125"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "11ba71b11b336199654cd2801967a44996705449"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "c0eaee6146c6dc92bfd9b081d667f45ee611b1d2"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "3d788f28c785d1c60b937b253c39ce582dbe1ed3"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "5636566f6de6f58200dce388f7b1ac9f517b30e1"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "3a70bf5bb9856c13893931b7a0df652bcf0be895"
+                }
+            ]
+        },
+        "Title#28452:21": {
+            "type": "TEXT"
+        },
+        "Has Suffix#28452:64": {
+            "type": "BOOLEAN"
+        },
+        "Has Prefix#28452:85": {
+            "type": "BOOLEAN"
+        },
+        "Prefix Type#28452:106": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT",
+                    "key": "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "ef0e8bd6c2f92e620acf204bb9a8079ef25a1e5c"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "82239325aa1cb65af7c649fc71a8f2b48fb9b9f3"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "f24c9ef42ef08df79483fbae0fa7d9037e566748"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "5a77ad37a2291989dfe77c44ddee9aa39e447f90"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "81f201fc876e38f016ab7427a6b3da000ee919a2"
+                }
+            ]
+        },
+        "Has Detail#28469:1": {
+            "type": "BOOLEAN"
+        },
+        "Detail Type#28469:11": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT",
+                    "key": "b27f70404d8f055ec39f9049a5a86920c11be979"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "43795c2e3e507dc555f9ec08bf4bf1abf8c2051a"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "73bcdff1b73998d1f440fb8827df2eafc4338c1d"
+                }
+            ]
+        },
+        "Title #28487:0": {
+            "type": "TEXT"
+        },
+        "Detail Type #28487:11": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT",
+                    "key": "870d50d39feae5bcfd59d7fbf8ae510233a97a8b"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "43795c2e3e507dc555f9ec08bf4bf1abf8c2051a"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "73bcdff1b73998d1f440fb8827df2eafc4338c1d"
+                }
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Disabled",
+                "Highlighted"
+            ]
+        },
+        "Variants": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Single Line",
+                "Multi Line"
+            ]
+        }
+    }
+};
+
 const metadata$o = {
     "name": "🟢 Main Tab Navigation / Global",
     "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
@@ -2119,6 +2321,20 @@ const metadata$g = {
                 "Large"
             ]
         },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "🚫[Deprecated]Brand",
+                "Neutral"
+            ]
+        },
+        "Weight": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Regular",
+                "Bold"
+            ]
+        },
         "Selected": {
             "type": "VARIANT",
             "variantOptions": [
@@ -2148,6 +2364,13 @@ const metadata$f = {
                 "Large"
             ]
         },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "🚫[Deprecated]Brand"
+            ]
+        },
         "Selected": {
             "type": "VARIANT",
             "variantOptions": [
@@ -2453,6 +2676,13 @@ const metadata$4 = {
                 "32"
             ]
         },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "🚫[Deprecated] Brand"
+            ]
+        },
         "Selected": {
             "type": "VARIANT",
             "variantOptions": [
@@ -2470,9 +2700,9 @@ const metadata$4 = {
         "Label Layout(Figma Only)": {
             "type": "VARIANT",
             "variantOptions": [
-                "None",
-                "Right",
-                "Left"
+                "Label Last",
+                "Label First",
+                "Switch Only"
             ]
         }
     }
@@ -2485,7 +2715,7 @@ const metadata$3 = {
         "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "Underline",
+                "Line",
                 "Chip"
             ]
         }
@@ -2691,23 +2921,25 @@ const metadata = {
 
 var FIGMA_COMPONENTS = {
   __proto__: null,
-  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,
+  actionButton: metadata$H,
+  alertDialog: metadata$G,
+  avatar: metadata$F,
+  avatarStack: metadata$E,
+  badge: metadata$D,
+  bottomNavigationGlobal: metadata$C,
+  bottomNavigationKr: metadata$B,
+  bottomSheet: metadata$A,
+  callout: metadata$z,
+  checkbox: metadata$y,
+  checkmark: metadata$x,
+  chip: metadata$w,
+  chlid: metadata$v,
+  contextualFloatingButton: metadata$u,
+  divider: metadata$t,
+  floatingActionButton: metadata$s,
+  helpBubble: metadata$r,
+  listHeader: metadata$q,
+  listItem: metadata$p,
   mainTabNavigationGlobal: metadata$o,
   mainTabNavigationKr: metadata$n,
   mannerTemp: metadata$m,
@@ -2730,12 +2962,12 @@ var FIGMA_COMPONENTS = {
   superscriptChild: metadata$5,
   switch: metadata$4,
   tabs: metadata$3,
-  templateButtonGroup: metadata$L,
-  templateChipGroup: metadata$K,
-  templateCompletion: metadata$J,
-  templateErrorState: metadata$I,
-  templateSelectBoxGroup: metadata$H,
-  templateTopNavigation: metadata$G,
+  templateButtonGroup: metadata$N,
+  templateChipGroup: metadata$M,
+  templateCompletion: metadata$L,
+  templateErrorState: metadata$K,
+  templateSelectBoxGroup: metadata$J,
+  templateTopNavigation: metadata$I,
   textField: metadata$2,
   toggleButton: metadata$1,
   topNavigation: metadata
@@ -2759,8 +2991,8 @@ function handleSizeProp(size) {
     }
 }
 
-const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("action-button");
-const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$F.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$u } = createLocalSnippetHelper("action-button");
+const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$H.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -2800,7 +3032,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$F.key,
             variant: camelCase(props.Variant.value),
             layout
         };
-        return createLocalSnippetElement$q("ActionButton", commonProps, children);
+        return createLocalSnippetElement$u("ActionButton", commonProps, children);
     });
 const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
 const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTTON_GHOST_BUTTON_KEY, ({ componentProperties: props })=>{
@@ -2847,26 +3079,26 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTT
                 bleedY: "asPadding"
             }
         };
-        return createLocalSnippetElement$q("ActionButton", commonProps, children);
+        return createLocalSnippetElement$u("ActionButton", commonProps, children);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElement$t } = createLocalSnippetHelper("alert-dialog");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$3 } = createLocalSnippetHelper("action-button");
 const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
-const createAlertDialogHandler = (_ctx)=>defineComponentHandler(metadata$E.key, (node, traverse)=>{
+const createAlertDialogHandler = (_ctx)=>defineComponentHandler(metadata$G.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const alertDialogHeader = createLocalSnippetElement$p("AlertDialogHeader", undefined, [
+        const alertDialogHeader = createLocalSnippetElement$t("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
-                createLocalSnippetElement$p("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
+                createLocalSnippetElement$t("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
             ] : [],
-            createLocalSnippetElement$p("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
+            createLocalSnippetElement$t("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$p("AlertDialog", undefined, alertDialogHeader, {
+            return createLocalSnippetElement$t("AlertDialog", undefined, alertDialogHeader, {
                 comment: "Footer 영역을 확인해주세요."
             });
         }
@@ -2874,21 +3106,21 @@ const createAlertDialogHandler = (_ctx)=>defineComponentHandler(metadata$E.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$p("AlertDialogFooter", undefined, alertDialogFooterChildren);
-        return createLocalSnippetElement$p("AlertDialogRoot", {
+        const alertDialogFooter = createLocalSnippetElement$t("AlertDialogFooter", undefined, alertDialogFooterChildren);
+        return createLocalSnippetElement$t("AlertDialogRoot", {
             open: true
         }, [
-            createLocalSnippetElement$p("AlertDialogTrigger", {
+            createLocalSnippetElement$t("AlertDialogTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$3("ActionButton", {}, "AlertDialog 열기")),
-            createLocalSnippetElement$p("AlertDialogContent", undefined, [
+            createLocalSnippetElement$t("AlertDialogContent", undefined, [
                 alertDialogHeader,
                 alertDialogFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("app-bar");
+const { createLocalSnippetElement: createLocalSnippetElement$s } = 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";
@@ -2905,12 +3137,12 @@ const createAppBarMainHandler = (_ctx)=>{
                 subtitle: undefined
             })).exhaustive();
         if (title) {
-            return createLocalSnippetElement$o("AppBarMain", {
+            return createLocalSnippetElement$s("AppBarMain", {
                 title,
                 subtitle
             });
         }
-        return createLocalSnippetElement$o("AppBarMain", undefined, undefined, {
+        return createLocalSnippetElement$s("AppBarMain", undefined, undefined, {
             comment: "AppBarMain 내부를 직접 작성해주세요."
         });
     });
@@ -2937,33 +3169,33 @@ const createAppBarHandler = (ctx)=>{
             return appBarMainHandler.transform(mainNode, traverse);
         })();
         const leftChildren = match(props.Left.value).with("None", ()=>undefined).with("Back", ()=>[
-                createLocalSnippetElement$o("AppBarBackButton")
+                createLocalSnippetElement$s("AppBarBackButton")
             ]).with("Close", ()=>[
-                createLocalSnippetElement$o("AppBarCloseButton")
+                createLocalSnippetElement$s("AppBarCloseButton")
             ]).with("Custom", ()=>{
             const buttons = findAllInstances({
                 node,
                 key: APP_BAR_LEFT_ICON_BUTTON_KEY
             });
             if (buttons.length > 0) {
-                return buttons.map((button)=>createLocalSnippetElement$o("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
+                return buttons.map((button)=>createLocalSnippetElement$s("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
                         comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
                     }));
             }
             return undefined;
         }).exhaustive();
-        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$o("AppBarLeft", {}, leftChildren) : undefined;
+        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$s("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$o("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]), {
+            return buttons.map((button)=>createLocalSnippetElement$s("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$o("AppBarRight", {}, rightChildren) : undefined;
-        return createLocalSnippetElement$o("AppBar", {
+        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$s("AppBarRight", {}, rightChildren) : undefined;
+        return createLocalSnippetElement$s("AppBar", {
             theme,
             tone
         }, [
@@ -2977,18 +3209,18 @@ const createAppBarHandler = (ctx)=>{
 };
 
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
-const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("identity-placeholder");
+const { createLocalSnippetElement: createLocalSnippetElement$r } = createLocalSnippetHelper("identity-placeholder");
 const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
-        return createLocalSnippetElement$n("IdentityPlaceholder", commonProps);
+        return createLocalSnippetElement$r("IdentityPlaceholder", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("avatar");
 const createAvatarHandler = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler();
-    return defineComponentHandler(metadata$D.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$F.key, (node, traverse)=>{
         const [placeholder] = findAllInstances({
             node,
             key: identityPlaceholderHandler.key
@@ -3008,7 +3240,7 @@ const createAvatarHandler = (ctx)=>{
             },
             size: props.Size.value
         };
-        return createLocalSnippetElement$m("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$m("AvatarBadge", {
+        return createLocalSnippetElement$q("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$q("AvatarBadge", {
             asChild: true
         }, createElement("img", {
             src: "https://placehold.co/20x20"
@@ -3020,10 +3252,10 @@ const createAvatarHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
-    return defineComponentHandler(metadata$C.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$E.key, (node, traverse)=>{
         const avatarNodes = findAllInstances({
             node,
             key: avatarHandler.key
@@ -3033,11 +3265,11 @@ const createAvatarStackHandler = (ctx)=>{
             size: props.Size.value
         };
         const avatarStackChildren = avatarNodes.map((avatarNode)=>avatarHandler.transform(avatarNode, traverse));
-        return createLocalSnippetElement$l("AvatarStack", commonProps, avatarStackChildren);
+        return createLocalSnippetElement$p("AvatarStack", commonProps, avatarStackChildren);
     });
 };
 
-const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$B.key, ({ componentProperties: props })=>{
+const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$D.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
             tone: camelCase(props.Tone.value),
@@ -3046,12 +3278,12 @@ const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$B.key, ({ com
         return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("bottom-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("bottom-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$2 } = createLocalSnippetHelper("action-button");
 // TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
 const BOTTOM_SHEET_FOOTER_KEY = "de6c65d34cc4a01c18c9a7c0ded34635170ca11f";
 const BOTTOM_SHEET_BODY_KEY = "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc";
-const createBottomSheetHandler = (_ctx)=>defineComponentHandler(metadata$y.key, (node, traverse)=>{
+const createBottomSheetHandler = (_ctx)=>defineComponentHandler(metadata$A.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 = {
@@ -3067,32 +3299,32 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(metadata$y.key,
             node,
             key: BOTTOM_SHEET_BODY_KEY
         });
-        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$k("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$k("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
+        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$o("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$o("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
         const footerNodes = findAllInstances({
             node,
             key: BOTTOM_SHEET_FOOTER_KEY
         });
-        const bottomSheetFooter = props["Show Footer#25162:14"] && footerNodes.length === 1 ? createLocalSnippetElement$k("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
-        return createLocalSnippetElement$k("BottomSheetRoot", {
+        const bottomSheetFooter = props["Show Footer#25162:14"] && footerNodes.length === 1 ? createLocalSnippetElement$o("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
+        return createLocalSnippetElement$o("BottomSheetRoot", {
             defaultOpen: true,
             headerAlign
         }, [
-            createLocalSnippetElement$k("BottomSheetTrigger", {
+            createLocalSnippetElement$o("BottomSheetTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$2("ActionButton", {}, "BottomSheet 열기")),
-            createLocalSnippetElement$k("BottomSheetContent", contentProps, [
+            createLocalSnippetElement$o("BottomSheetContent", contentProps, [
                 bottomSheetBody,
                 bottomSheetFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("callout");
-const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$x.key, ({ componentProperties: props, children })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("callout");
+const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$z.key, ({ componentProperties: props, children })=>{
         const tag = match(props.Interaction.value).with("Display", ()=>"Callout").with("Actionable", ()=>"ActionableCallout").with("Dismissible", ()=>"DismissibleCallout").exhaustive();
         const textNode = children.find((child)=>child.type === "TEXT");
         if (!textNode) {
-            return createLocalSnippetElement$j(tag, undefined, undefined, {
+            return createLocalSnippetElement$n(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -3144,14 +3376,16 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$x.key, ({ co
                 prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#35087:0"])
             }
         };
-        return createLocalSnippetElement$j(tag, commonProps);
+        return createLocalSnippetElement$n(tag, commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("checkbox");
-const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$w.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("checkbox");
+const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$y.key, ({ componentProperties: props })=>{
+        const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
             label: props["Label#49990:0"].value,
             weight: camelCase(props.Weight.value),
+            tone,
             variant: camelCase(props.Shape.value),
             size: handleSizeProp(props.Size.value),
             ...props.Selected.value === "True" && {
@@ -3165,14 +3399,25 @@ const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$w.key, ({
                 disabled: true
             }
         };
-        return createLocalSnippetElement$i("Checkbox", commonProps);
+        return createLocalSnippetElement$m("Checkbox", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("chip");
+const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("checkbox");
+const createCheckmarkHandler = (_ctx)=>defineComponentHandler(metadata$x.key, ({ componentProperties: props })=>{
+        const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
+        const commonProps = {
+            tone,
+            variant: camelCase(props.Shape.value),
+            size: handleSizeProp(props.Size.value)
+        };
+        return createLocalSnippetElement$l("Checkmark", commonProps);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$k } = 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", {
+        return createLocalSnippetElement$k("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
             svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"])
         }));
     });
@@ -3180,19 +3425,19 @@ const createChipIconSuffixHandler = (ctx)=>{
 const createChipHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
     const iconSuffixHandler = createChipIconSuffixHandler(ctx);
-    return defineComponentHandler(metadata$u.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$w.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$h("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
+        const prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$k("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
             }))).with("Avatar", ()=>{
             const [avatar] = findAllInstances({
                 node,
-                key: metadata$D.key
+                key: metadata$F.key
             });
             if (!avatar) return undefined;
-            return createLocalSnippetElement$h("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar, traverse));
+            return createLocalSnippetElement$k("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar, traverse));
         }).exhaustive();
-        const label = createLocalSnippetElement$h("Chip.Label", undefined, props["Label#7185:0"].value);
+        const label = createLocalSnippetElement$k("Chip.Label", undefined, props["Label#7185:0"].value);
         const [suffixIcon] = findAllInstances({
             node,
             key: CHIP_ICON_SUFFIX_KEY
@@ -3201,22 +3446,25 @@ const createChipHandler = (ctx)=>{
             variant: camelCase(props.Variant.value),
             size: handleSizeProp(props.Size.value),
             layout: props["Label#7185:0"].value ? "withText" : "iconOnly",
+            ...props.Selected.value === "True" && {
+                defaultChecked: true
+            },
             ...props.State.value === "Disabled" && {
                 disabled: true
             }
         };
-        return createLocalSnippetElement$h("Chip.Button", commonProps, [
+        return createLocalSnippetElement$k("Chip.Toggle", commonProps, [
             prefix,
             label,
             suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined
         ], {
-            comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로 바꿔 사용하세요."
+            comment: "목적에 따라 Chip.Button, Chip.RadioItem 등으로 바꿔 사용하세요."
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("contextual-floating-button");
-const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(metadata$s.key, ({ componentProperties: props })=>{
+const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("contextual-floating-button");
+const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(metadata$u.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -3244,24 +3492,26 @@ const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(meta
             variant: match(props.Variant.value).with("Solid", ()=>"solid").with("Layer", ()=>"layer").exhaustive(),
             layout
         };
-        return createLocalSnippetElement$g("ContextualFloatingButton", commonProps, children);
+        return createLocalSnippetElement$j("ContextualFloatingButton", commonProps, children);
     });
 
-const createDividerHandler = (_ctx)=>defineComponentHandler(metadata$r.key, ({ componentProperties: props })=>{
-        const { color } = match(props.Tone.value).with("Neutral", ()=>({
-                color: "stroke.neutral"
-            })).with("Neutral Muted", ()=>({
+const createDividerHandler = (_ctx)=>defineComponentHandler(metadata$t.key, ({ componentProperties: props })=>{
+        const { color } = match(props.Tone.value).with("Neutral Muted", ()=>({
                 color: "stroke.neutralMuted"
+            })).with("Neutral Subtle", ()=>({
+                color: "stroke.neutralSubtle"
             })).exhaustive();
-        return createSeedReactElement("Divider", {
-            color
-        });
+        const commonProps = {
+            color,
+            orientation: camelCase(props.Orientation.value)
+        };
+        return createSeedReactElement("Divider", commonProps, undefined);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("error-state");
+const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("error-state");
 const createErrorStateHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
-    return defineComponentHandler(metadata$I.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$K.key, (node, traverse)=>{
         const props = node.componentProperties;
         const [actionButtonNode] = findAllInstances({
             node,
@@ -3282,14 +3532,14 @@ const createErrorStateHandler = (ctx)=>{
                 }
             }
         };
-        return createLocalSnippetElement$f("ErrorState", commonProps);
+        return createLocalSnippetElement$i("ErrorState", commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("floating-action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("floating-action-button");
 const BUTTON_TYPE_KEY = "8cecc85275115d653579d4c3156567ebf19f7b27";
 const MENU_TYPE_KEY = "400124347392c15473f9cd2d8a6aedb64f3baf36";
-const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(metadata$q.key, (node)=>{
+const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(metadata$s.key, (node)=>{
         const [button] = findAllInstances({
             node,
             key: BUTTON_TYPE_KEY
@@ -3310,12 +3560,12 @@ const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(metadata
                 label: menu.componentProperties["Label#29766:9"].value
             };
         })();
-        return createLocalSnippetElement$e("FloatingActionButton", commonProps);
+        return createLocalSnippetElement$h("FloatingActionButton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("help-bubble");
+const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("help-bubble");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$1 } = createLocalSnippetHelper("action-button");
-const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$p.key, ({ componentProperties: props })=>{
+const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$r.key, ({ componentProperties: props })=>{
         const placement = (()=>{
             switch(props.Placement.value){
                 case "Bottom-Left":
@@ -3350,101 +3600,33 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$p.key, (
                 description: props["Description#62535:98"].value
             },
             defaultOpen: true,
+            showCloseButton: props["Show Close Button#40538:0"].value,
             placement
         };
-        return createLocalSnippetElement$d("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"));
-    });
-
-const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("page-banner");
-const SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
-const createPageBannerButtonHandler = (_ctx)=>defineComponentHandler(SUFFIX_BUTTON_KEY, (node)=>{
-        return createElement("PageBannerButton", undefined, node.componentProperties["Label#39890:0"].value);
-    });
-const createPageBannerHandler = (ctx)=>{
-    const buttonHandler = createPageBannerButtonHandler();
-    return defineComponentHandler(metadata$i.key, (node, traverse)=>{
-        const { componentProperties: props } = node;
-        const { tag, suffix } = match(props.Interaction.value).with("Actionable", ()=>({
-                tag: "ActionablePageBanner",
-                suffix: undefined
-            })).with("Dismissible", ()=>({
-                tag: "DismissiblePageBanner",
-                suffix: undefined
-            })).with("Display", ()=>({
-                tag: "PageBanner",
-                suffix: undefined
-            })).with("With Action", ()=>{
-            const [buttonNode] = findAllInstances({
-                node,
-                key: SUFFIX_BUTTON_KEY
-            });
-            const suffix = buttonNode ? buttonHandler.transform(buttonNode, traverse) : undefined;
-            return {
-                tag: "PageBanner",
-                suffix
-            };
-        }).with("Custom", ()=>({
-                tag: "PageBanner",
-                suffix: createElement("div", undefined, "Custom Content")
-            })).exhaustive();
-        const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Text");
-        if (!textNode) {
-            return createLocalSnippetElement$c(tag, undefined, undefined, {
-                comment: "내용을 제공해주세요."
-            });
-        }
-        const slices = textNode.segments;
-        let title;
-        let description;
-        switch(slices.length){
-            case 1:
-                {
-                    description = slices[0]?.characters.trim();
-                    break;
-                }
-            case 2:
-                {
-                    title = slices[0]?.characters.trim();
-                    description = slices[1]?.characters.trim();
-                    break;
-                }
-        }
-        const iconNode = findOne(node, (child)=>child.type === "INSTANCE" && child.name === "icon");
-        const showPrefixIcon = props["Show Prefix Icon#11840:27"].value && iconNode;
-        const prefixIcon = showPrefixIcon ? ctx.iconHandler.transform(iconNode) : undefined;
-        const commonProps = {
-            title,
-            description,
-            prefixIcon,
-            tone: camelCase(props.Tone.value),
-            variant: camelCase(props.Variant.value),
-            ...suffix && {
-                suffix
-            }
-        };
-        return createLocalSnippetElement$c(tag, commonProps);
+        return createLocalSnippetElement$g("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"), {
+            comment: "필요에 따라 HelpBubbleAnchor로 변경하여 사용하세요."
+        });
     });
-};
 
-const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("manner-temp-badge");
+const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("manner-temp-badge");
 const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$l.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createLocalSnippetElement$b("MannerTempBadge", commonProps);
+        return createLocalSnippetElement$f("MannerTempBadge", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp");
+const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("manner-temp");
 const createMannerTempHandler = (_ctx)=>defineComponentHandler(metadata$m.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createLocalSnippetElement$a("MannerTemp", commonProps);
+        return createLocalSnippetElement$e("MannerTemp", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("menu-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger } = createLocalSnippetHelper("action-button");
 const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
 const createMenuSheetItemHandler = (ctx)=>defineComponentHandler(MENU_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
@@ -3455,7 +3637,7 @@ const createMenuSheetItemHandler = (ctx)=>defineComponentHandler(MENU_SHEET_ITEM
                 disabled: true
             }
         };
-        return createLocalSnippetElement$9("MenuSheetItem", commonProps, [
+        return createLocalSnippetElement$d("MenuSheetItem", commonProps, [
             props["Show Prefix Icon#17043:5"].value ? createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"])
             }) : undefined,
@@ -3471,7 +3653,7 @@ const createMenuSheetGroupHandler = (ctx)=>{
             key: menuSheetItemHandler.key
         });
         const contentChildren = items.map((item)=>menuSheetItemHandler.transform(item, traverse));
-        return createLocalSnippetElement$9("MenuSheetGroup", undefined, contentChildren);
+        return createLocalSnippetElement$d("MenuSheetGroup", undefined, contentChildren);
     });
 };
 const createMenuSheetHandler = (ctx)=>{
@@ -3491,23 +3673,23 @@ const createMenuSheetHandler = (ctx)=>{
             })).with("Text Only", ()=>({
                 labelAlignment: "center"
             })).exhaustive();
-        const content = createLocalSnippetElement$9("MenuSheetContent", {
+        const content = createLocalSnippetElement$d("MenuSheetContent", {
             title,
             labelAlignment
         }, contentChildren, {
             comment: title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
-        const trigger = createLocalSnippetElement$9("MenuSheetTrigger", {
+        const trigger = createLocalSnippetElement$d("MenuSheetTrigger", {
             asChild: true
         }, createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"));
-        return createLocalSnippetElement$9("MenuSheet", undefined, [
+        return createLocalSnippetElement$d("MenuSheet", undefined, [
             trigger,
             content
         ]);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("text-field");
+const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("text-field");
 const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$j.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("-");
@@ -3549,11 +3731,82 @@ const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createLocalSnippetElement$8("TextFieldTextarea", inputProps);
-        return createLocalSnippetElement$8("TextField", commonProps, TextFieldChildren);
+        const TextFieldChildren = createLocalSnippetElement$c("TextFieldTextarea", inputProps);
+        return createLocalSnippetElement$c("TextField", commonProps, TextFieldChildren);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("page-banner");
+const SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
+const createPageBannerButtonHandler = (_ctx)=>defineComponentHandler(SUFFIX_BUTTON_KEY, (node)=>{
+        return createElement("PageBannerButton", undefined, node.componentProperties["Label#39890:0"].value);
+    });
+const createPageBannerHandler = (ctx)=>{
+    const buttonHandler = createPageBannerButtonHandler();
+    return defineComponentHandler(metadata$i.key, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const { tag, suffix } = match(props.Interaction.value).with("Actionable", ()=>({
+                tag: "ActionablePageBanner",
+                suffix: undefined
+            })).with("Dismissible", ()=>({
+                tag: "DismissiblePageBanner",
+                suffix: undefined
+            })).with("Display", ()=>({
+                tag: "PageBanner",
+                suffix: undefined
+            })).with("With Action", ()=>{
+            const [buttonNode] = findAllInstances({
+                node,
+                key: SUFFIX_BUTTON_KEY
+            });
+            const suffix = buttonNode ? buttonHandler.transform(buttonNode, traverse) : undefined;
+            return {
+                tag: "PageBanner",
+                suffix
+            };
+        }).with("Custom", ()=>({
+                tag: "PageBanner",
+                suffix: createElement("div", undefined, "Custom Content")
+            })).exhaustive();
+        const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Text");
+        if (!textNode) {
+            return createLocalSnippetElement$b(tag, undefined, undefined, {
+                comment: "내용을 제공해주세요."
+            });
+        }
+        const slices = textNode.segments;
+        let title;
+        let description;
+        switch(slices.length){
+            case 1:
+                {
+                    description = slices[0]?.characters.trim();
+                    break;
+                }
+            case 2:
+                {
+                    title = slices[0]?.characters.trim();
+                    description = slices[1]?.characters.trim();
+                    break;
+                }
+        }
+        const iconNode = findOne(node, (child)=>child.type === "INSTANCE" && child.name === "icon");
+        const showPrefixIcon = props["Show Prefix Icon#11840:27"].value && iconNode;
+        const prefixIcon = showPrefixIcon ? ctx.iconHandler.transform(iconNode) : undefined;
+        const commonProps = {
+            title,
+            description,
+            prefixIcon,
+            tone: camelCase(props.Tone.value),
+            variant: camelCase(props.Variant.value),
+            ...suffix && {
+                suffix
+            }
+        };
+        return createLocalSnippetElement$b(tag, commonProps);
     });
+};
 
-const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("progress-circle");
+const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("progress-circle");
 const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$h.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
@@ -3585,10 +3838,36 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$h.ke
                 tone: camelCase(props.Tone.value)
             }
         };
-        return createLocalSnippetElement$7("ProgressCircle", commonProps);
+        return createLocalSnippetElement$a("ProgressCircle", commonProps);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("radio-group");
+const createRadioMarkHandler = (_ctx)=>defineComponentHandler(metadata$f.key, ({ componentProperties: props })=>{
+        const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
+        const commonProps = {
+            tone,
+            size: handleSizeProp(props.Size.value)
+        };
+        return createLocalSnippetElement$9("RadioMark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("reaction-button");
+const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("radio-group");
+const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(metadata$g.key, ({ componentProperties: props })=>{
+        const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
+        const commonProps = {
+            ...props.State.value === "Disabled" && {
+                disabled: true
+            },
+            label: props["Label#49990:171"].value,
+            value: props["Label#49990:171"].value,
+            size: handleSizeProp(props.Size.value),
+            tone,
+            weight: camelCase(props.Weight.value)
+        };
+        return createLocalSnippetElement$8("RadioGroupItem", commonProps);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("reaction-button");
 const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$d.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
@@ -3602,7 +3881,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$d.key
                 defaultPressed: true
             }
         };
-        return createLocalSnippetElement$6("ReactionButton", commonProps, [
+        return createLocalSnippetElement$7("ReactionButton", commonProps, [
             createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#12379:0"])
             }),
@@ -3611,7 +3890,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$d.key
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("segmented-control");
+const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("segmented-control");
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENTED_CONTROL_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -3621,7 +3900,7 @@ const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENT
                 disabled: true
             }
         };
-        return createLocalSnippetElement$5("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+        return createLocalSnippetElement$6("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
     });
 const createSegmentedControlHandler = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler();
@@ -3637,13 +3916,13 @@ const createSegmentedControlHandler = (ctx)=>{
                 defaultValue: selectedSegment.componentProperties["Label#11366:15"].value
             }
         };
-        return createLocalSnippetElement$5("SegmentedControl", commonProps, segmentedControlChildren, {
+        return createLocalSnippetElement$6("SegmentedControl", commonProps, segmentedControlChildren, {
             comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("select-box");
+const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("select-box");
 const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$9.key, ({ componentProperties: props })=>{
         const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
         const commonProps = {
@@ -3658,11 +3937,11 @@ const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$9.key, ({
                 defaultChecked: true
             }
         };
-        return createLocalSnippetElement$4(tag, commonProps);
+        return createLocalSnippetElement$5(tag, commonProps);
     });
 const createSelectBoxGroupHandler = (ctx)=>{
     const selectBoxHandler = createSelectBoxHandler();
-    return defineComponentHandler(metadata$H.key, (node, traverse)=>{
+    return defineComponentHandler(metadata$J.key, (node, traverse)=>{
         const props = node.componentProperties;
         const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBoxGroup").with("Radio", ()=>"RadioSelectBoxRoot").exhaustive();
         const selectBoxes = findAllInstances({
@@ -3681,7 +3960,7 @@ const createSelectBoxGroupHandler = (ctx)=>{
                 defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
             }
         };
-        return createLocalSnippetElement$4(tag, commonProps, stack);
+        return createLocalSnippetElement$5(tag, commonProps, stack);
     });
 };
 
@@ -3695,7 +3974,7 @@ const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$8.key, (nod
         return createSeedReactElement("Skeleton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$3 } = createLocalSnippetHelper("snackbar");
+const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("snackbar");
 const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$6.key, ({ componentProperties: props })=>{
         const commonProps = {
             message: props["Message#1528:4"].value,
@@ -3705,12 +3984,14 @@ const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$6.key, ({
             }
         };
         // TODO: adapter.create({ render })
-        return createLocalSnippetElement$3("Snackbar", commonProps);
+        return createLocalSnippetElement$4("Snackbar", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("switch");
+const { createLocalSnippetElement: createLocalSnippetElement$3 } = createLocalSnippetHelper("switch");
 const createSwitchHandler = (_ctx)=>defineComponentHandler(metadata$4.key, ({ componentProperties: props })=>{
+        const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated] Brand", ()=>"brand").exhaustive();
         const commonProps = {
+            tone,
             size: props.Size.value,
             label: props["Label#36578:0"].value,
             ...props.Selected.value === "True" && {
@@ -3720,10 +4001,219 @@ const createSwitchHandler = (_ctx)=>defineComponentHandler(metadata$4.key, ({ co
                 disabled: true
             }
         };
-        return createLocalSnippetElement$2("Switch", commonProps);
+        return createLocalSnippetElement$3("Switch", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$1 } = createLocalSnippetHelper("text-field");
+const { createLocalSnippetElement: createTabsLocalSnippetElement } = createLocalSnippetHelper("tabs");
+const { createLocalSnippetElement: createChipTabsLocalSnippetElement } = createLocalSnippetHelper("chip-tabs");
+const LINE_TABS_WRAPPER_KEY = "e114161387f800d3668d0585bed1d109e4edcbe4";
+const CHIP_TABS_WRAPPER_KEY = "d7cf2983c79c8394aaab0185af83a9d1b9d10ece";
+const createTabsHandler = (_ctx)=>{
+    const lineHandler = createLineTabsHandler();
+    const chipHandler = createChipTabsHandler();
+    return defineComponentHandler(metadata$3.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const elementNode = match(props.Variant.value).with("Line", ()=>{
+            const [wrapper] = findAllInstances({
+                node,
+                key: LINE_TABS_WRAPPER_KEY
+            });
+            if (!wrapper) throw new Error("Line Tab wrapper not found");
+            return lineHandler.transform(wrapper, traverse);
+        }).with("Chip", ()=>{
+            const [wrapper] = findAllInstances({
+                node,
+                key: CHIP_TABS_WRAPPER_KEY
+            });
+            if (!wrapper) throw new Error("Chip Tab wrapper not found");
+            return chipHandler.transform(wrapper, traverse);
+        }).exhaustive();
+        return elementNode;
+    });
+};
+/*
+<TabsRoot defaultValue="2" triggerLayout="fill">
+  <TabsList>
+    <TabsTrigger value="1">라벨1</TabsTrigger>
+    <TabsTrigger value="2">라벨2</TabsTrigger>
+    <TabsTrigger value="3">라벨3</TabsTrigger>
+  </TabsList>
+  <TabsCarousel>
+    <TabsContent value="1">
+      <Content>Content 1</Content>
+    </TabsContent>
+    <TabsContent value="2">
+      <Content>Content 2</Content>
+    </TabsContent>
+    <TabsContent value="3">
+      <Content>Content 3</Content>
+    </TabsContent>
+  </TabsCarousel>
+</TabsRoot>
+*/ const LINE_TABS_HUG_ITEM_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
+const LINE_TABS_FILL_ITEM_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
+const createLineTabsHandler = (_ctx)=>{
+    const hugHandler = createLineTriggerHugHandler();
+    const fillHandler = createLineTriggerFillHandler();
+    return defineComponentHandler(LINE_TABS_WRAPPER_KEY, (node, traverse)=>{
+        const props = node.componentProperties;
+        const { triggers, defaultValue } = match(props.Layout.value).with("Hug", ()=>{
+            const nodes = findAllInstances({
+                node,
+                key: LINE_TABS_HUG_ITEM_KEY
+            });
+            return {
+                triggers: nodes.map((node)=>({
+                        elementNode: hugHandler.transform(node, traverse),
+                        value: node.componentProperties["Label#4478:2"].value
+                    })),
+                defaultValue: nodes.find((node)=>node.componentProperties.State.value === "Selected")?.componentProperties["Label#4478:2"].value
+            };
+        }).with("Fill", ()=>{
+            const nodes = findAllInstances({
+                node,
+                key: LINE_TABS_FILL_ITEM_KEY
+            });
+            return {
+                triggers: nodes.map((node)=>({
+                        elementNode: fillHandler.transform(node, traverse),
+                        value: node.componentProperties["Label#4478:2"].value
+                    })),
+                defaultValue: nodes.find((node)=>node.componentProperties.State.value === "Selected")?.componentProperties["Label#4478:2"].value
+            };
+        }).exhaustive();
+        const rootProps = {
+            triggerLayout: camelCase(props.Layout.value),
+            size: handleSizeProp(props.Size.value),
+            defaultValue
+        };
+        const tabsCarousel = createTabsLocalSnippetElement("TabsCarousel", undefined, triggers.map(({ value })=>createTabsLocalSnippetElement("TabsContent", {
+                value
+            }, value)));
+        const tabsList = createTabsLocalSnippetElement("TabsList", undefined, triggers.map(({ elementNode })=>elementNode));
+        return createTabsLocalSnippetElement("TabsRoot", rootProps, [
+            tabsList,
+            tabsCarousel
+        ]);
+    });
+};
+const LINE_TRIGGER_HUG_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
+const createLineTriggerHugHandler = (_ctx)=>defineComponentHandler(LINE_TRIGGER_HUG_KEY, ({ componentProperties: props })=>{
+        const commonProps = {
+            value: props["Label#4478:2"].value,
+            ...props.State.value === "Disabled" && {
+                disabled: true
+            },
+            ...props["Has Notification#32892:0"].value && {
+                notification: true
+            }
+        };
+        return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+    });
+const LINE_TRIGGER_FILL_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
+const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(LINE_TRIGGER_FILL_KEY, ({ componentProperties: props })=>{
+        const commonProps = {
+            value: props["Label#4478:2"].value,
+            ...props.State.value === "Disabled" && {
+                disabled: true
+            },
+            ...props["Has Notification#32904:13"].value && {
+                notification: true
+            }
+        };
+        return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+    });
+/*
+<ChipTabsRoot
+  variant="neutralOutline"
+  defaultValue="1"
+>
+  <ChipTabsList>
+    <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
+    <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
+    <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
+  </ChipTabsList>
+  <ChipTabsCarousel>
+    <ChipTabsContent value="1">
+      <Content>Content 1</Content>
+    </ChipTabsContent>
+    <ChipTabsContent value="2">
+      <Content>Content 2</Content>
+    </ChipTabsContent>
+    <ChipTabsContent value="3">
+      <Content>Content 3</Content>
+    </ChipTabsContent>
+  </ChipTabsCarousel>
+</ChipTabsRoot>
+*/ const createChipTabsHandler = (_ctx)=>{
+    const triggerHandler = createChipTabsTriggerHandler();
+    return defineComponentHandler(CHIP_TABS_WRAPPER_KEY, (node, traverse)=>{
+        const props = node.componentProperties;
+        const nodes = findAllInstances({
+            node,
+            key: CHIP_TRIGGER_KEY
+        });
+        const triggers = nodes.map((node)=>{
+            // this is redundant; can this be better?
+            const [chip] = findAllInstances({
+                node,
+                key: metadata$w.key
+            });
+            if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
+            return {
+                elementNode: triggerHandler.transform(node, traverse),
+                value: chip.componentProperties["Label#7185:0"].value
+            };
+        });
+        const selectedTrigger = nodes.find((node)=>node.componentProperties.State.value === "Selected");
+        const [selectedChip] = selectedTrigger ? findAllInstances({
+            node: selectedTrigger,
+            key: metadata$w.key
+        }) : [
+            undefined
+        ];
+        if (!selectedChip) throw new Error("Chip not found in ChipTabsTrigger");
+        const defaultValue = selectedChip.componentProperties["Label#7185:0"].value;
+        const variant = match(props.Variant.value).with("Outline", ()=>"neutralOutline").with("Solid", ()=>"neutralSolid").exhaustive();
+        const rootProps = {
+            size: handleSizeProp(props.Size.value),
+            variant,
+            defaultValue
+        };
+        const tabsCarousel = createChipTabsLocalSnippetElement("ChipTabsCarousel", {
+            swipeable: false
+        }, triggers.map(({ value })=>createChipTabsLocalSnippetElement("ChipTabsContent", {
+                value
+            }, value)));
+        const tabsList = createChipTabsLocalSnippetElement("ChipTabsList", undefined, triggers.map(({ elementNode })=>elementNode));
+        return createChipTabsLocalSnippetElement("ChipTabsRoot", rootProps, [
+            tabsList,
+            tabsCarousel
+        ]);
+    });
+};
+const CHIP_TRIGGER_KEY = "95bf31a329f9e8bba0d9aa2299d1552f1d388148";
+const createChipTabsTriggerHandler = (_ctx)=>defineComponentHandler(CHIP_TRIGGER_KEY, (node)=>{
+        const [chip] = findAllInstances({
+            node,
+            key: metadata$w.key
+        });
+        if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
+        const props = node.componentProperties;
+        const chipProps = chip.componentProperties;
+        const commonProps = {
+            value: chipProps["Label#7185:0"].value,
+            ...chipProps.State.value === "Disabled" && {
+                disabled: true
+            },
+            ...props["Has Notification"].value === "True" && {
+                notification: true
+            }
+        };
+        return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("text-field");
 const createTextFieldHandler = (ctx)=>defineComponentHandler(metadata$2.key, ({ componentProperties: props })=>{
         const { Size: { value: size }, State: { value: state }, Filled: { value: filled }, "Show Header#870:0": { value: showHeader }, "Label#14964:0": { value: label }, "Show Indicator#1259:0": { value: showIndicator }, "Indicator#15327:249": { value: indicator }, "Show Prefix#958:125": { value: showPrefix }, "Show Prefix Icon#1267:50": { value: showPrefixIcon }, "Prefix Icon#1267:25": prefixIcon, "Show Prefix Text#1267:0": { value: showPrefixText }, "Prefix Text#15327:101": { value: prefix }, "Placeholder#958:0": { value: placeholder }, "Filled Text#1304:0": { value: defaultValue }, "Show Suffix#958:100": { value: showSuffix }, "Show Suffix Icon#1267:75": { value: showSuffixIcon }, "Suffix Icon #1267:100": suffixIcon, "Show Suffix Text#1267:125": { value: showSuffixText }, "Suffix Text#15327:138": { value: suffix }, "Show Footer#958:25": { value: showFooter }, "Show Description#958:50": { value: showDescription }, "Description#12626:5": { value: description }, "Show Character Count#958:75": { value: showCharacterCount }, "Character Count#15327:64": { value: _characterCount }, "Max Character Count#15327:27": { value: maxCharacterCount } } = props;
         const states = state.split("-");
@@ -3778,11 +4268,11 @@ const createTextFieldHandler = (ctx)=>defineComponentHandler(metadata$2.key, ({
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createLocalSnippetElement$1("TextFieldInput", inputProps);
-        return createLocalSnippetElement$1("TextField", commonProps, TextFieldChildren);
+        const TextFieldChildren = createLocalSnippetElement$2("TextFieldInput", inputProps);
+        return createLocalSnippetElement$2("TextField", commonProps, TextFieldChildren);
     });
 
-const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
+const { createLocalSnippetElement: createLocalSnippetElement$1 } = createLocalSnippetHelper("toggle-button");
 const createToggleButtonHandler = (ctx)=>defineComponentHandler(metadata$1.key, ({ componentProperties: props })=>{
         const commonProps = {
             variant: camelCase(props.Variant.value),
@@ -3797,7 +4287,7 @@ const createToggleButtonHandler = (ctx)=>defineComponentHandler(metadata$1.key,
                 loading: true
             }
         };
-        return createLocalSnippetElement("ToggleButton", commonProps, [
+        return createLocalSnippetElement$1("ToggleButton", commonProps, [
             props["Show Prefix Icon#6122:392"].value ? createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"])
             }) : undefined,
@@ -3808,6 +4298,125 @@ const createToggleButtonHandler = (ctx)=>defineComponentHandler(metadata$1.key,
         ]);
     });
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("list");
+const PREFIX_KEYS = {
+    checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
+    radioMark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
+    icon: "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca",
+    avatar: "ef0e8bd6c2f92e620acf204bb9a8079ef25a1e5c",
+    image: "82239325aa1cb65af7c649fc71a8f2b48fb9b9f3",
+    custom: "81f201fc876e38f016ab7427a6b3da000ee919a2"
+};
+const SUFFIX_KEYS = {
+    checkmark: "abf9810103ae6e6afe8fa253ec5f05d6a7304b38",
+    radioMark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
+    chevron: "8c52207687ffed15cd5931d71ed9d196b3358a68",
+    switch: "1e933f75dd6bb4b21c3289b5c3b4402d2c623125",
+    custom: "3a70bf5bb9856c13893931b7a0df652bcf0be895",
+    icon: "4cc7e9b84a8388a36cb3898c6c02e6110a3281b9",
+    chevronWithText: "fe0e25f4fecda59d0a3730ead7c5bc0a66a41e7e",
+    iconButton: "5636566f6de6f58200dce388f7b1ac9f517b30e1",
+    actionButton: "3d788f28c785d1c60b937b253c39ce582dbe1ed3"
+};
+const createListItemHandler = (ctx)=>defineComponentHandler(metadata$p.key, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const { alignItems, title } = match(props.Variants.value).with("Single Line", ()=>({
+                alignItems: undefined,
+                title: props["Title#28452:21"].value
+            })).with("Multi Line", ()=>({
+                alignItems: "flex-start",
+                title: props["Title #28487:0"].value
+            })).exhaustive();
+        const detailNode = findOne(node, (node)=>node.type === "TEXT" && node.name === "Sub Text");
+        const prefixNode = (()=>{
+            if (props["Has Prefix#28452:85"].value === false) return null;
+            for (const key of Object.values(PREFIX_KEYS)){
+                const [found] = findAllInstances({
+                    node,
+                    key
+                });
+                if (found) return found;
+            }
+            return null;
+        })();
+        const prefix = (()=>{
+            if (!prefixNode) return undefined;
+            if ("Icon#28452:111" in prefixNode.componentProperties) {
+                return createSeedReactElement("Icon", {
+                    svg: ctx.iconHandler.transform(prefixNode.componentProperties["Icon#28452:111"])
+                });
+            }
+            return traverse(prefixNode.children[0]);
+        })();
+        const suffixNode = (()=>{
+            if (props["Has Suffix#28452:64"].value === false) return null;
+            for (const key of Object.values(SUFFIX_KEYS)){
+                const [found] = findAllInstances({
+                    node,
+                    key
+                });
+                if (found) return found;
+            }
+            return null;
+        })();
+        const suffix = (()=>{
+            if (!suffixNode) return undefined;
+            if ("Icon#28347:9" in suffixNode.componentProperties) {
+                return createSeedReactElement("Icon", {
+                    svg: ctx.iconHandler.transform(suffixNode.componentProperties["Icon#28347:9"])
+                });
+            }
+            return traverse(suffixNode.children[0]);
+        })();
+        const disabled = props.State.value === "Disabled";
+        const tag = (()=>{
+            if (prefix?.tag === "Checkmark" || suffix?.tag === "Checkmark") {
+                return "ListCheckItem";
+            }
+            if (prefix?.tag === "RadioMark" || suffix?.tag === "RadioMark") {
+                return "ListRadioItem";
+            }
+            // checkmark/radioMark 없는데 disabled인 경우 Button으로 추측
+            if (disabled) {
+                return "ListButtonItem";
+            }
+            return "ListItem";
+        })();
+        const commonProps = {
+            ...tag === "ListRadioItem" && {
+                value: title
+            },
+            alignItems,
+            title,
+            ...props["Has Detail#28469:1"].value && detailNode && {
+                detail: detailNode.characters
+            },
+            ...prefix && {
+                prefix
+            },
+            ...suffix && {
+                suffix
+            },
+            ...disabled && (tag === "ListButtonItem" || tag === "ListCheckItem" || tag === "ListRadioItem") && {
+                disabled: true
+            },
+            ...props.State.value === "Highlighted" && {
+                highlighted: true
+            }
+        };
+        const comment = match(tag).with("ListItem", ()=>"목적에 따라 ListButtonItem이나 ListLinkItem으로 바꿔 사용하세요.").with("ListCheckItem", ()=>`<List as="fieldset">과 함께 사용하세요.`).with("ListRadioItem", ()=>"<RadioGroup.Root>와 함께 사용하세요.").otherwise(()=>undefined);
+        const list = createLocalSnippetElement(tag, commonProps, undefined, {
+            comment
+        });
+        if (props["Divider#28441:0"].value) {
+            return createElement("", {}, [
+                list,
+                createLocalSnippetElement("ListDivider")
+            ]);
+        }
+        return list;
+    });
+
 function bindComponentHandler(unbound, deps) {
     return unbound(deps);
 }
@@ -3822,6 +4431,7 @@ const unboundSeedComponentHandlers = [
     createBottomSheetHandler,
     createCalloutHandler,
     createCheckboxHandler,
+    createCheckmarkHandler,
     createChipHandler,
     createContextualFloatingButtonHandler,
     createDividerHandler,
@@ -3829,12 +4439,15 @@ const unboundSeedComponentHandlers = [
     createFloatingActionButtonHandler,
     createHelpBubbleHandler,
     createIdentityPlaceholderHandler,
-    createPageBannerHandler,
+    createListItemHandler,
     createMannerTempBadgeHandler,
     createMannerTempHandler,
     createMenuSheetHandler,
     createMultilineTextFieldHandler,
+    createPageBannerHandler,
     createProgressCircleHandler,
+    createRadioGroupItemHandler,
+    createRadioMarkHandler,
     createReactionButtonHandler,
     createSegmentedControlHandler,
     createSelectBoxGroupHandler,
@@ -3842,6 +4455,7 @@ const unboundSeedComponentHandlers = [
     createSkeletonHandler,
     createSnackbarHandler,
     createSwitchHandler,
+    createTabsHandler,
     createTextFieldHandler,
     createToggleButtonHandler
 ];