@seed-design/figma 1.1.19 → 1.2.0

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

@@ -3194,7 +3194,7 @@ function handleSizeProp(size) {
     }
 }
 
-const { createLocalSnippetElement: createLocalSnippetElement$y } = createLocalSnippetHelper("action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$z } = createLocalSnippetHelper("action-button");
 const createActionButtonHandler = (ctx)=>defineComponentHandler(actionButton.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = tsPattern.match(props.Layout.value).with("Icon Only", ()=>({
@@ -3235,7 +3235,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(actionButton.key
             variant: changeCase.camelCase(props.Variant.value),
             layout
         };
-        return createLocalSnippetElement$y("ActionButton", commonProps, children);
+        return createLocalSnippetElement$z("ActionButton", commonProps, children);
     });
 const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
 const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTTON_GHOST_BUTTON_KEY, (node)=>{
@@ -3293,10 +3293,10 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTT
                 bleedY: "asPadding"
             }
         };
-        return createLocalSnippetElement$y("ActionButton", commonProps, children);
+        return createLocalSnippetElement$z("ActionButton", commonProps, children);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$x } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElement$y } = createLocalSnippetHelper("alert-dialog");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$3 } = createLocalSnippetHelper("action-button");
 const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
 const createAlertDialogHandler = (ctx)=>{
@@ -3304,18 +3304,18 @@ const createAlertDialogHandler = (ctx)=>{
     const actionButtonGhostHandler = createActionButtonGhostHandler(ctx);
     return defineComponentHandler(alertDialog.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const alertDialogHeader = createLocalSnippetElement$x("AlertDialogHeader", undefined, [
+        const alertDialogHeader = createLocalSnippetElement$y("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
-                createLocalSnippetElement$x("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
+                createLocalSnippetElement$y("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
             ] : [],
-            createLocalSnippetElement$x("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
+            createLocalSnippetElement$y("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$x("AlertDialog", undefined, alertDialogHeader, {
+            return createLocalSnippetElement$y("AlertDialog", undefined, alertDialogHeader, {
                 comment: "Footer 영역을 확인해주세요."
             });
         }
@@ -3346,14 +3346,14 @@ const createAlertDialogHandler = (ctx)=>{
             ];
             return createSeedReactElement("VStack", footerNodeProps, buttons);
         }).exhaustive();
-        const alertDialogFooter = createLocalSnippetElement$x("AlertDialogFooter", undefined, alertDialogFooterChildren);
-        return createLocalSnippetElement$x("AlertDialogRoot", {
+        const alertDialogFooter = createLocalSnippetElement$y("AlertDialogFooter", undefined, alertDialogFooterChildren);
+        return createLocalSnippetElement$y("AlertDialogRoot", {
             open: true
         }, [
-            createLocalSnippetElement$x("AlertDialogTrigger", {
+            createLocalSnippetElement$y("AlertDialogTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$3("ActionButton", {}, "AlertDialog 열기")),
-            createLocalSnippetElement$x("AlertDialogContent", undefined, [
+            createLocalSnippetElement$y("AlertDialogContent", undefined, [
                 alertDialogHeader,
                 alertDialogFooter
             ])
@@ -3361,7 +3361,7 @@ const createAlertDialogHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$w } = createLocalSnippetHelper("app-bar");
+const { createLocalSnippetElement: createLocalSnippetElement$x } = 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";
@@ -3378,12 +3378,12 @@ const createAppBarMainHandler = (_ctx)=>{
                 subtitle: undefined
             })).exhaustive();
         if (title) {
-            return createLocalSnippetElement$w("AppBarMain", {
+            return createLocalSnippetElement$x("AppBarMain", {
                 title,
                 subtitle
             });
         }
-        return createLocalSnippetElement$w("AppBarMain", undefined, undefined, {
+        return createLocalSnippetElement$x("AppBarMain", undefined, undefined, {
             comment: "AppBarMain 내부를 직접 작성해주세요."
         });
     });
@@ -3410,33 +3410,33 @@ const createAppBarHandler = (ctx)=>{
             return appBarMainHandler.transform(mainNode, traverse);
         })();
         const leftChildren = tsPattern.match(props.Left.value).with("None", ()=>undefined).with("Back", ()=>[
-                createLocalSnippetElement$w("AppBarBackButton")
+                createLocalSnippetElement$x("AppBarBackButton")
             ]).with("Close", ()=>[
-                createLocalSnippetElement$w("AppBarCloseButton")
+                createLocalSnippetElement$x("AppBarCloseButton")
             ]).with("Custom", ()=>{
             const buttons = findAllInstances({
                 node,
                 key: APP_BAR_LEFT_ICON_BUTTON_KEY
             });
             if (buttons.length > 0) {
-                return buttons.map((button)=>createLocalSnippetElement$w("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
+                return buttons.map((button)=>createLocalSnippetElement$x("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
                         comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
                     }));
             }
             return undefined;
         }).exhaustive();
-        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$w("AppBarLeft", {}, leftChildren) : undefined;
+        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$x("AppBarLeft", {}, leftChildren) : undefined;
         const rightChildren = tsPattern.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$w("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]), {
+            return buttons.map((button)=>createLocalSnippetElement$x("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$w("AppBarRight", {}, rightChildren) : undefined;
-        return createLocalSnippetElement$w("AppBar", {
+        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$x("AppBarRight", {}, rightChildren) : undefined;
+        return createLocalSnippetElement$x("AppBar", {
             theme,
             tone
         }, [
@@ -3450,15 +3450,15 @@ const createAppBarHandler = (ctx)=>{
 };
 
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
-const { createLocalSnippetElement: createLocalSnippetElement$v } = createLocalSnippetHelper("identity-placeholder");
+const { createLocalSnippetElement: createLocalSnippetElement$w } = createLocalSnippetHelper("identity-placeholder");
 const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: changeCase.camelCase(props.Identity.value)
         };
-        return createLocalSnippetElement$v("IdentityPlaceholder", commonProps);
+        return createLocalSnippetElement$w("IdentityPlaceholder", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$u } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$v } = createLocalSnippetHelper("avatar");
 const createAvatarHandler = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler();
     return defineComponentHandler(avatar.key, (node, traverse)=>{
@@ -3481,7 +3481,7 @@ const createAvatarHandler = (ctx)=>{
             },
             size: props.Size.value
         };
-        return createLocalSnippetElement$u("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$u("AvatarBadge", {
+        return createLocalSnippetElement$v("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$v("AvatarBadge", {
             asChild: true
         }, createElement("img", {
             src: "https://placehold.co/20x20"
@@ -3493,7 +3493,7 @@ const createAvatarHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$t } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$u } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
     return defineComponentHandler(avatarStack.key, (node, traverse)=>{
@@ -3506,7 +3506,7 @@ const createAvatarStackHandler = (ctx)=>{
             size: props.Size.value
         };
         const avatarStackChildren = avatarNodes.map((avatarNode)=>avatarHandler.transform(avatarNode, traverse));
-        return createLocalSnippetElement$t("AvatarStack", commonProps, avatarStackChildren);
+        return createLocalSnippetElement$u("AvatarStack", commonProps, avatarStackChildren);
     });
 };
 
@@ -3519,7 +3519,7 @@ const createBadgeHandler = (_ctx)=>defineComponentHandler(badge.key, ({ componen
         return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$s } = createLocalSnippetHelper("bottom-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$t } = createLocalSnippetHelper("bottom-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$2 } = createLocalSnippetHelper("action-button");
 // TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
 const BOTTOM_SHEET_FOOTER_KEY = "de6c65d34cc4a01c18c9a7c0ded34635170ca11f";
@@ -3539,32 +3539,32 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(bottomSheet.key,
             node,
             key: BOTTOM_SHEET_BODY_KEY
         });
-        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$s("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$s("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
+        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$t("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$t("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$s("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
-        return createLocalSnippetElement$s("BottomSheetRoot", {
+        const bottomSheetFooter = props["Show Footer#25162:14"] && footerNodes.length === 1 ? createLocalSnippetElement$t("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
+        return createLocalSnippetElement$t("BottomSheetRoot", {
             defaultOpen: true,
             headerAlign
         }, [
-            createLocalSnippetElement$s("BottomSheetTrigger", {
+            createLocalSnippetElement$t("BottomSheetTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$2("ActionButton", {}, "BottomSheet 열기")),
-            createLocalSnippetElement$s("BottomSheetContent", contentProps, [
+            createLocalSnippetElement$t("BottomSheetContent", contentProps, [
                 bottomSheetBody,
                 bottomSheetFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$r } = createLocalSnippetHelper("callout");
+const { createLocalSnippetElement: createLocalSnippetElement$s } = createLocalSnippetHelper("callout");
 const createCalloutHandler = (ctx)=>defineComponentHandler(callout.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) {
-            return createLocalSnippetElement$r(tag, undefined, undefined, {
+            return createLocalSnippetElement$s(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -3616,10 +3616,10 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(callout.key, ({ compo
                 prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#35087:0"])
             }
         };
-        return createLocalSnippetElement$r(tag, commonProps);
+        return createLocalSnippetElement$s(tag, commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("checkbox");
+const { createLocalSnippetElement: createLocalSnippetElement$r } = createLocalSnippetHelper("checkbox");
 const createCheckboxHandler = (_ctx)=>defineComponentHandler(checkbox.key, ({ componentProperties: props })=>{
         const tone = tsPattern.match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -3639,10 +3639,10 @@ const createCheckboxHandler = (_ctx)=>defineComponentHandler(checkbox.key, ({ co
                 disabled: true
             }
         };
-        return createLocalSnippetElement$q("Checkbox", commonProps);
+        return createLocalSnippetElement$r("Checkbox", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("checkbox");
+const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("checkbox");
 const createCheckmarkHandler = (_ctx)=>defineComponentHandler(checkmark.key, ({ componentProperties: props })=>{
         const tone = tsPattern.match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -3650,14 +3650,14 @@ const createCheckmarkHandler = (_ctx)=>defineComponentHandler(checkmark.key, ({
             variant: changeCase.camelCase(props.Shape.value),
             size: handleSizeProp(props.Size.value)
         };
-        return createLocalSnippetElement$p("Checkmark", commonProps);
+        return createLocalSnippetElement$q("Checkmark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("chip");
+const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("chip");
 const CHIP_ICON_SUFFIX_KEY = "27343e0e5ab2c66948e9b10fde03d58b5e037212";
 const createChipIconSuffixHandler = (ctx)=>{
     return defineComponentHandler(CHIP_ICON_SUFFIX_KEY, ({ componentProperties })=>{
-        return createLocalSnippetElement$o("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
+        return createLocalSnippetElement$p("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
             svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"])
         }));
     });
@@ -3667,7 +3667,7 @@ const createChipHandler = (ctx)=>{
     const iconSuffixHandler = createChipIconSuffixHandler(ctx);
     return defineComponentHandler(chip.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const prefix = tsPattern.match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$o("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
+        const prefix = tsPattern.match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$p("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
             }))).with("Avatar", ()=>{
             const [avatar$1] = findAllInstances({
@@ -3675,9 +3675,9 @@ const createChipHandler = (ctx)=>{
                 key: avatar.key
             });
             if (!avatar$1) return undefined;
-            return createLocalSnippetElement$o("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar$1, traverse));
+            return createLocalSnippetElement$p("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar$1, traverse));
         }).exhaustive();
-        const label = createLocalSnippetElement$o("Chip.Label", undefined, props["Label#7185:0"].value);
+        const label = createLocalSnippetElement$p("Chip.Label", undefined, props["Label#7185:0"].value);
         const [suffixIcon] = findAllInstances({
             node,
             key: CHIP_ICON_SUFFIX_KEY
@@ -3693,7 +3693,7 @@ const createChipHandler = (ctx)=>{
                 disabled: true
             }
         };
-        return createLocalSnippetElement$o("Chip.Toggle", commonProps, [
+        return createLocalSnippetElement$p("Chip.Toggle", commonProps, [
             prefix,
             label,
             suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined
@@ -3703,7 +3703,7 @@ const createChipHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("contextual-floating-button");
+const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("contextual-floating-button");
 const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(contextualFloatingButton.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = tsPattern.match(props.Layout.value).with("Icon Only", ()=>({
@@ -3732,7 +3732,7 @@ const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(cont
             variant: tsPattern.match(props.Variant.value).with("Solid", ()=>"solid").with("Layer", ()=>"layer").exhaustive(),
             layout
         };
-        return createLocalSnippetElement$n("ContextualFloatingButton", commonProps, children);
+        return createLocalSnippetElement$o("ContextualFloatingButton", commonProps, children);
     });
 
 const createDividerHandler = (_ctx)=>defineComponentHandler(divider.key, ({ componentProperties: props })=>{
@@ -3857,7 +3857,7 @@ const FIELD_KEYS = {
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("field-button");
+const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("field-button");
 const INPUT_BUTTON_KEY = "965bdecb58755af9a08d60cc3c8d2d33b42e15f0";
 const INPUT_BUTTON_PREFIX_KEY = "12b40c736a098298c64ba16de85702b4b460d1f1";
 const INPUT_BUTTON_SUFFIX_KEY = "5dda27af9f4afafa471925c17acf97d81912877a";
@@ -3916,11 +3916,11 @@ const createFieldButtonHandler = (ctx)=>{
         // these can be fragile but better than having 9 different handlers
         const placeholder = findOne(node, (node)=>node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"));
         const value = findOne(node, (node)=>node.type === "TEXT" && node.name.toLowerCase().includes("value"));
-        return createLocalSnippetElement$m("FieldButton", {
+        return createLocalSnippetElement$n("FieldButton", {
             ...headerProps,
             ...footerProps,
             ...commonProps
-        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$m("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$m("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
+        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$n("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$n("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
             comment: "buttonProps를 통해 aria-label을 제공하세요."
         });
     });
@@ -3967,7 +3967,7 @@ const createAddressFieldHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("floating-action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("floating-action-button");
 const BUTTON_TYPE_KEY = "8cecc85275115d653579d4c3156567ebf19f7b27";
 const MENU_TYPE_KEY = "400124347392c15473f9cd2d8a6aedb64f3baf36";
 const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(floatingActionButton.key, (node)=>{
@@ -3991,10 +3991,10 @@ const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(floating
                 label: menu.componentProperties["Label#29766:9"].value
             };
         })();
-        return createLocalSnippetElement$l("FloatingActionButton", commonProps);
+        return createLocalSnippetElement$m("FloatingActionButton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("help-bubble");
+const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("help-bubble");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$1 } = createLocalSnippetHelper("action-button");
 const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(helpBubble.key, ({ componentProperties: props })=>{
         const placement = (()=>{
@@ -4034,23 +4034,23 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(helpBubble.key, (
             showCloseButton: props["Show Close Button#40538:0"].value,
             placement
         };
-        return createLocalSnippetElement$k("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"), {
+        return createLocalSnippetElement$l("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"), {
             comment: "필요에 따라 HelpBubbleAnchor로 변경하여 사용하세요."
         });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("list-header");
+const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("list-header");
 const createListHeaderHandler = (_ctx)=>defineComponentHandler(listHeader.key, ({ componentProperties: props })=>{
         const commonProps = {
             variant: changeCase.camelCase(props["Variant"].value)
         };
-        return createLocalSnippetElement$j("ListHeader", commonProps, props["Title#28588:0"].value);
+        return createLocalSnippetElement$k("ListHeader", commonProps, props["Title#28588:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("list");
+const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("list");
 const PREFIX_KEYS = {
     checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
-    radioMark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
+    radiomark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
     icon: "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca",
     avatar: "ef0e8bd6c2f92e620acf204bb9a8079ef25a1e5c",
     image: "82239325aa1cb65af7c649fc71a8f2b48fb9b9f3",
@@ -4058,7 +4058,7 @@ const PREFIX_KEYS = {
 };
 const SUFFIX_KEYS = {
     checkmark: "abf9810103ae6e6afe8fa253ec5f05d6a7304b38",
-    radioMark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
+    radiomark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
     chevron: "8c52207687ffed15cd5931d71ed9d196b3358a68",
     switch: "1e933f75dd6bb4b21c3289b5c3b4402d2c623125",
     custom: "3a70bf5bb9856c13893931b7a0df652bcf0be895",
@@ -4119,16 +4119,16 @@ const createListItemHandler = (ctx)=>defineComponentHandler(listItem.key, (node,
         })();
         const disabled = props.State.value === "Disabled";
         const tag = (()=>{
-            if (suffix?.tag === "SwitchMark") {
+            if (suffix?.tag === "Switchmark") {
                 return "ListSwitchItem";
             }
             if (prefix?.tag === "Checkmark" || suffix?.tag === "Checkmark") {
                 return "ListCheckItem";
             }
-            if (prefix?.tag === "RadioMark" || suffix?.tag === "RadioMark") {
+            if (prefix?.tag === "Radiomark" || suffix?.tag === "Radiomark") {
                 return "ListRadioItem";
             }
-            // checkmark/radioMark 없는데 disabled인 경우 Button으로 추측
+            // checkmark/radiomark 없는데 disabled인 경우 Button으로 추측
             if (disabled) {
                 return "ListButtonItem";
             }
@@ -4157,37 +4157,37 @@ const createListItemHandler = (ctx)=>defineComponentHandler(listItem.key, (node,
             }
         };
         const comment = tsPattern.match(tag).with("ListItem", ()=>"목적에 따라 ListButtonItem이나 ListLinkItem으로 바꿔 사용하세요.").with("ListCheckItem", ()=>`<List as="fieldset">과 함께 사용하세요.`).with("ListRadioItem", ()=>"<RadioGroup.Root>와 함께 사용하세요.").otherwise(()=>undefined);
-        const list = createLocalSnippetElement$i(tag, commonProps, undefined, {
+        const list = createLocalSnippetElement$j(tag, commonProps, undefined, {
             comment
         });
         if (props["Divider#28441:0"].value) {
             return createElement("", {}, [
                 list,
-                createLocalSnippetElement$i("ListDivider")
+                createLocalSnippetElement$j("ListDivider")
             ]);
         }
         return list;
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("manner-temp-badge");
+const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("manner-temp-badge");
 const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(mannerTempBadge.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createLocalSnippetElement$h("MannerTempBadge", commonProps);
+        return createLocalSnippetElement$i("MannerTempBadge", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("manner-temp");
+const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("manner-temp");
 const createMannerTempHandler = (_ctx)=>defineComponentHandler(mannerTemp.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createLocalSnippetElement$g("MannerTemp", commonProps);
+        return createLocalSnippetElement$h("MannerTemp", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$g } = 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 })=>{
@@ -4196,14 +4196,16 @@ const createMenuSheetItemHandler = (ctx)=>defineComponentHandler(MENU_SHEET_ITEM
             tone: changeCase.camelCase(props.Tone.value),
             ...states.includes("Disabled") && {
                 disabled: true
+            },
+            ...props["Show Prefix Icon#17043:5"].value && {
+                prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#55948:0"])
+            },
+            label: props["Label#55905:8"].value,
+            ...props["Show Item Description#51411:19"].value && {
+                description: props["Sub Text#51411:0"].value
             }
         };
-        return createLocalSnippetElement$f("MenuSheetItem", commonProps, [
-            props["Show Prefix Icon#17043:5"].value ? createSeedReactElement("PrefixIcon", {
-                svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"])
-            }) : undefined,
-            props["Label#55905:8"].value
-        ]);
+        return createLocalSnippetElement$g("MenuSheetItem", commonProps);
     });
 const MENU_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
 const createMenuSheetGroupHandler = (ctx)=>{
@@ -4214,7 +4216,7 @@ const createMenuSheetGroupHandler = (ctx)=>{
             key: menuSheetItemHandler.key
         });
         const contentChildren = items.map((item)=>menuSheetItemHandler.transform(item, traverse));
-        return createLocalSnippetElement$f("MenuSheetGroup", undefined, contentChildren);
+        return createLocalSnippetElement$g("MenuSheetGroup", undefined, contentChildren);
     });
 };
 const createMenuSheetHandler = (ctx)=>{
@@ -4227,30 +4229,30 @@ const createMenuSheetHandler = (ctx)=>{
         });
         const contentChildren = groups.map((group)=>menuSheetGroupHandler.transform(group, traverse));
         const title = props["Show Header#17043:12"].value ? props["Title Text#14599:0"].value : undefined;
-        // TODO: React 구현체에 description 추가 이후
-        // const description = props["Description Text#21827:0"].value;
+        const description = props["Show Header#17043:12"].value && props["Show Header Description#32984:0"].value ? props["Description Text#21827:0"].value : undefined;
         const { labelAlign } = tsPattern.match(props.Layout.value).with("Text with Icon", ()=>({
                 labelAlign: "left"
             })).with("Text Only", ()=>({
                 labelAlign: "center"
             })).exhaustive();
-        const content = createLocalSnippetElement$f("MenuSheetContent", {
+        const content = createLocalSnippetElement$g("MenuSheetContent", {
             title,
+            description,
             labelAlign
         }, contentChildren, {
             comment: title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
-        const trigger = createLocalSnippetElement$f("MenuSheetTrigger", {
+        const trigger = createLocalSnippetElement$g("MenuSheetTrigger", {
             asChild: true
         }, createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"));
-        return createLocalSnippetElement$f("MenuSheet", undefined, [
+        return createLocalSnippetElement$g("MenuSheet", undefined, [
             trigger,
             content
         ]);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("page-banner");
+const { createLocalSnippetElement: createLocalSnippetElement$f } = 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);
@@ -4284,7 +4286,7 @@ const createPageBannerHandler = (ctx)=>{
             })).exhaustive();
         const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Text");
         if (!textNode) {
-            return createLocalSnippetElement$e(tag, undefined, undefined, {
+            return createLocalSnippetElement$f(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -4317,11 +4319,11 @@ const createPageBannerHandler = (ctx)=>{
                 suffix
             }
         };
-        return createLocalSnippetElement$e(tag, commonProps);
+        return createLocalSnippetElement$f(tag, commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("progress-circle");
+const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("progress-circle");
 const createProgressCircleHandler = (_ctx)=>defineComponentHandler(progressCircle.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = tsPattern.match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
@@ -4353,10 +4355,10 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(progressCircl
                 tone: changeCase.camelCase(props.Tone.value)
             }
         };
-        return createLocalSnippetElement$d("ProgressCircle", commonProps);
+        return createLocalSnippetElement$e("ProgressCircle", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("radio-group");
 const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(radio.key, ({ componentProperties: props })=>{
         const tone = tsPattern.match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -4369,20 +4371,20 @@ const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(radio.key, ({
             tone,
             weight: changeCase.camelCase(props.Weight.value)
         };
-        return createLocalSnippetElement$c("RadioGroupItem", commonProps);
+        return createLocalSnippetElement$d("RadioGroupItem", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("radio-group");
 const createRadiomarkHandler = (_ctx)=>defineComponentHandler(radiomark.key, ({ componentProperties: props })=>{
         const tone = tsPattern.match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
             tone,
             size: handleSizeProp(props.Size.value)
         };
-        return createLocalSnippetElement$b("RadioMark", commonProps);
+        return createLocalSnippetElement$c("Radiomark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("reaction-button");
+const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("reaction-button");
 const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
@@ -4396,7 +4398,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton
                 defaultPressed: true
             }
         };
-        return createLocalSnippetElement$a("ReactionButton", commonProps, [
+        return createLocalSnippetElement$b("ReactionButton", commonProps, [
             createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#12379:0"])
             }),
@@ -4405,7 +4407,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("result-section");
+const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("result-section");
 const createResultSectionHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
     const ghostButtonHandler = createActionButtonGhostHandler(ctx);
@@ -4443,11 +4445,11 @@ const createResultSectionHandler = (ctx)=>{
                 }
             }
         };
-        return createLocalSnippetElement$9("ResultSection", commonProps);
+        return createLocalSnippetElement$a("ResultSection", commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("segmented-control");
+const { createLocalSnippetElement: createLocalSnippetElement$9 } = 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("-");
@@ -4457,7 +4459,7 @@ const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENT
                 disabled: true
             }
         };
-        return createLocalSnippetElement$8("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+        return createLocalSnippetElement$9("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
     });
 const createSegmentedControlHandler = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler();
@@ -4473,7 +4475,7 @@ const createSegmentedControlHandler = (ctx)=>{
                 defaultValue: selectedSegment.componentProperties["Label#11366:15"].value
             }
         };
-        return createLocalSnippetElement$8("SegmentedControl", commonProps, segmentedControlChildren, {
+        return createLocalSnippetElement$9("SegmentedControl", commonProps, segmentedControlChildren, {
             comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
     });
@@ -4489,7 +4491,7 @@ const createSkeletonHandler = (ctx)=>defineComponentHandler(skeleton.key, (node)
         return createSeedReactElement("Skeleton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("slider");
+const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("slider");
 const SLIDER_TICK_KEY = "ace432ffb7a2af13bce549b19c932ac5f96a9a78";
 function getSliderComment(props) {
     return [
@@ -4525,7 +4527,7 @@ const createSliderFieldHandler = (ctx)=>{
             ...headerProps,
             ...footerProps
         };
-        return createLocalSnippetElement$7("Slider", commonProps, undefined, {
+        return createLocalSnippetElement$8("Slider", commonProps, undefined, {
             comment: getSliderComment(commonProps)
         });
     });
@@ -4567,13 +4569,13 @@ const createSliderHandler = (_ctx)=>{
                 disabled: true
             }
         };
-        return createLocalSnippetElement$7("Slider", commonProps, undefined, {
+        return createLocalSnippetElement$8("Slider", commonProps, undefined, {
             comment: getSliderComment(commonProps)
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("snackbar");
+const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("snackbar");
 const createSnackbarHandler = (_ctx)=>defineComponentHandler(snackbar.key, ({ componentProperties: props })=>{
         const commonProps = {
             message: props["Message#1528:4"].value,
@@ -4583,20 +4585,20 @@ const createSnackbarHandler = (_ctx)=>defineComponentHandler(snackbar.key, ({ co
             }
         };
         // TODO: adapter.create({ render })
-        return createLocalSnippetElement$6("Snackbar", commonProps);
+        return createLocalSnippetElement$7("Snackbar", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("switch");
+const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("switch");
 const createSwitchmarkHandler = (_ctx)=>defineComponentHandler(switchmark.key, ({ componentProperties: props })=>{
         const tone = tsPattern.match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated] Brand", ()=>"brand").exhaustive();
         const commonProps = {
             tone,
             size: props.Size.value
         };
-        return createLocalSnippetElement$5("SwitchMark", commonProps);
+        return createLocalSnippetElement$6("Switchmark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("switch");
+const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("switch");
 const createSwitchHandler = (_ctx)=>defineComponentHandler(_switch.key, ({ componentProperties: props })=>{
         const tone = tsPattern.match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated] Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -4604,9 +4606,9 @@ const createSwitchHandler = (_ctx)=>defineComponentHandler(_switch.key, ({ compo
             size: props.Size.value
         };
         if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
-            return createLocalSnippetElement$4("SwitchMark", commonProps);
+            return createLocalSnippetElement$5("Switchmark", commonProps);
         }
-        return createLocalSnippetElement$4("Switch", {
+        return createLocalSnippetElement$5("Switch", {
             ...commonProps,
             label: props["Label#36578:0"].value,
             ...props.Selected.value === "True" && {
@@ -4827,7 +4829,7 @@ const createChipTabsTriggerHandler = (_ctx)=>defineComponentHandler(CHIP_TRIGGER
         return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$3 } = createLocalSnippetHelper("text-field");
+const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("text-field");
 const TEXT_INPUT_OUTLINE_KEY = "22eebd645d310c086d9f5f69d8f179ff5c7cf7ca";
 const TEXT_INPUT_OUTLINE_PREFIX_KEY = "1ab174dd51bc42a5efe530f52f1dd02255c50b18";
 const TEXT_INPUT_OUTLINE_SUFFIX_KEY = "555fee288d9053760e301791665bbac31d19c43f";
@@ -4939,13 +4941,13 @@ const createTextInputFieldHandler = (ctx)=>{
                 placeholder: placeholder.characters
             }
         };
-        return createLocalSnippetElement$3("TextField", {
+        return createLocalSnippetElement$4("TextField", {
             ...fieldProps,
             ...commonProps,
             ...value && {
                 defaultValue: value.characters
             }
-        }, createLocalSnippetElement$3("TextFieldInput", inputProps));
+        }, createLocalSnippetElement$4("TextFieldInput", inputProps));
     });
 };
 const createTextareaFieldHandler = (ctx)=>{
@@ -4988,14 +4990,14 @@ const createTextareaFieldHandler = (ctx)=>{
                 defaultValue: value.characters
             }
         };
-        return createLocalSnippetElement$3("TextField", {
+        return createLocalSnippetElement$4("TextField", {
             ...fieldProps,
             ...commonProps
-        }, createLocalSnippetElement$3("TextFieldTextarea", inputProps));
+        }, createLocalSnippetElement$4("TextFieldTextarea", inputProps));
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("toggle-button");
+const { createLocalSnippetElement: createLocalSnippetElement$3 } = createLocalSnippetHelper("toggle-button");
 const createToggleButtonHandler = (ctx)=>defineComponentHandler(toggleButton.key, ({ componentProperties: props })=>{
         const commonProps = {
             variant: changeCase.camelCase(props.Variant.value),
@@ -5010,7 +5012,7 @@ const createToggleButtonHandler = (ctx)=>defineComponentHandler(toggleButton.key
                 loading: true
             }
         };
-        return createLocalSnippetElement$2("ToggleButton", commonProps, [
+        return createLocalSnippetElement$3("ToggleButton", commonProps, [
             props["Show Prefix Icon#6122:392"].value ? createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"])
             }) : undefined,
@@ -5021,6 +5023,7 @@ const createToggleButtonHandler = (ctx)=>defineComponentHandler(toggleButton.key
         ]);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("tag-group");
 const createTagGroupHandler = (ctx)=>{
     const itemHandler = createTagGroupItemHandler(ctx);
     return defineComponentHandler(tagGroup.key, (node, traverse)=>{
@@ -5030,15 +5033,15 @@ const createTagGroupHandler = (ctx)=>{
         });
         const items = itemNodes.map((itemNode)=>itemHandler.transform(itemNode, traverse));
         if (items.length === 0) {
-            return createSeedReactElement("TagGroup.Root");
+            return createLocalSnippetElement$2("TagGroupRoot");
         }
-        // if size/weight/tone are all the same among item[n].props, lift them up to TagGroup.Root
+        // if size/weight/tone are all the same among item[n].props, lift them up to TagGroupRoot
         const consistent = {
             size: items.map((item)=>item.props.size).every((size)=>size === items[0].props.size),
             weight: items.map((item)=>item.props.weight).every((weight)=>weight === items[0].props.weight),
             tone: items.map((item)=>item.props.tone).every((tone)=>tone === items[0].props.tone)
         };
-        return createSeedReactElement("TagGroup.Root", {
+        return createLocalSnippetElement$2("TagGroupRoot", {
             // lift up consistent props
             ...consistent.size && {
                 size: items[0].props.size
@@ -5058,27 +5061,26 @@ const createTagGroupHandler = (ctx)=>{
                     weight: consistent.weight ? undefined : item.props.weight,
                     tone: consistent.tone ? undefined : item.props.tone
                 }
-            })));
+            })), {
+            comment: "`truncate` prop을 통해 한 줄로 표시되도록 할 수 있습니다."
+        });
     });
 };
 const TAG_GROUP_ITEM_KEY = "a7bbc318919053f96be00e509469f6294d6bb6bb";
 const createTagGroupItemHandler = (ctx)=>defineComponentHandler(TAG_GROUP_ITEM_KEY, ({ componentProperties: props })=>{
         const size = tsPattern.match(props.Size.value).with("t2(12pt)", ()=>"t2").with("t3(13pt)", ()=>"t3").with("t4(14pt)", ()=>"t4").exhaustive();
-        const commonProps = {
+        return createLocalSnippetElement$2("TagGroupItem", {
             size,
             weight: changeCase.camelCase(props["Weight"].value),
-            tone: changeCase.camelCase(props["Tone"].value)
-        };
-        const children = [
-            props.Layout.value === "Icon First" ? createSeedReactElement("PrefixIcon", {
-                svg: ctx.iconHandler.transform(props["Prefix Icon#47948:0"])
-            }) : undefined,
-            props["Label#5409:0"].value,
-            props.Layout.value === "Icon Last" ? createSeedReactElement("SuffixIcon", {
-                svg: ctx.iconHandler.transform(props["Suffix Icon#47948:55"])
-            }) : undefined
-        ].filter(Boolean);
-        return createSeedReactElement("TagGroup.Item", commonProps, children);
+            tone: changeCase.camelCase(props["Tone"].value),
+            label: props["Label#5409:0"].value,
+            ...props.Layout.value === "Icon First" && {
+                prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#47948:0"])
+            },
+            ...props.Layout.value === "Icon Last" && {
+                suffixIcon: ctx.iconHandler.transform(props["Suffix Icon#47948:55"])
+            }
+        });
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$1 } = createLocalSnippetHelper("text-field");