@seed-design/figma 1.2.1 → 1.3.3

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

@@ -3194,7 +3194,7 @@ function handleSizeProp(size) {
     }
 }
 
-const { createLocalSnippetElement: createLocalSnippetElement$17 } = createLocalSnippetHelper("action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$18 } = createLocalSnippetHelper("action-button");
 const createActionButtonHandler$1 = (ctx)=>defineComponentHandler(actionButton.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
@@ -3235,7 +3235,7 @@ const createActionButtonHandler$1 = (ctx)=>defineComponentHandler(actionButton.k
             variant: camelCase(props.Variant.value),
             layout
         };
-        return createLocalSnippetElement$17("ActionButton", commonProps, children);
+        return createLocalSnippetElement$18("ActionButton", commonProps, children);
     });
 const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
 const createActionButtonGhostHandler$1 = (ctx)=>defineComponentHandler(ACTION_BUTTON_GHOST_BUTTON_KEY, (node)=>{
@@ -3293,10 +3293,10 @@ const createActionButtonGhostHandler$1 = (ctx)=>defineComponentHandler(ACTION_BU
                 bleedY: "asPadding"
             }
         };
-        return createLocalSnippetElement$17("ActionButton", commonProps, children);
+        return createLocalSnippetElement$18("ActionButton", commonProps, children);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$16 } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElement$17 } = createLocalSnippetHelper("alert-dialog");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$7 } = createLocalSnippetHelper("action-button");
 const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
 const createAlertDialogHandler$1 = (ctx)=>{
@@ -3304,18 +3304,18 @@ const createAlertDialogHandler$1 = (ctx)=>{
     const actionButtonGhostHandler = createActionButtonGhostHandler$1(ctx);
     return defineComponentHandler(alertDialog.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const alertDialogHeader = createLocalSnippetElement$16("AlertDialogHeader", undefined, [
+        const alertDialogHeader = createLocalSnippetElement$17("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
-                createLocalSnippetElement$16("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
+                createLocalSnippetElement$17("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
             ] : [],
-            createLocalSnippetElement$16("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
+            createLocalSnippetElement$17("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$16("AlertDialog", undefined, alertDialogHeader, {
+            return createLocalSnippetElement$17("AlertDialog", undefined, alertDialogHeader, {
                 comment: "Footer 영역을 확인해주세요."
             });
         }
@@ -3346,14 +3346,14 @@ const createAlertDialogHandler$1 = (ctx)=>{
             ];
             return createSeedReactElement("VStack", footerNodeProps, buttons);
         }).exhaustive();
-        const alertDialogFooter = createLocalSnippetElement$16("AlertDialogFooter", undefined, alertDialogFooterChildren);
-        return createLocalSnippetElement$16("AlertDialogRoot", {
+        const alertDialogFooter = createLocalSnippetElement$17("AlertDialogFooter", undefined, alertDialogFooterChildren);
+        return createLocalSnippetElement$17("AlertDialogRoot", {
             open: true
         }, [
-            createLocalSnippetElement$16("AlertDialogTrigger", {
+            createLocalSnippetElement$17("AlertDialogTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$7("ActionButton", {}, "AlertDialog 열기")),
-            createLocalSnippetElement$16("AlertDialogContent", undefined, [
+            createLocalSnippetElement$17("AlertDialogContent", undefined, [
                 alertDialogHeader,
                 alertDialogFooter
             ])
@@ -3361,7 +3361,7 @@ const createAlertDialogHandler$1 = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$15 } = createLocalSnippetHelper("app-bar");
+const { createLocalSnippetElement: createLocalSnippetElement$16 } = 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$1 = (_ctx)=>{
                 subtitle: undefined
             })).exhaustive();
         if (title) {
-            return createLocalSnippetElement$15("AppBarMain", {
+            return createLocalSnippetElement$16("AppBarMain", {
                 title,
                 subtitle
             });
         }
-        return createLocalSnippetElement$15("AppBarMain", undefined, undefined, {
+        return createLocalSnippetElement$16("AppBarMain", undefined, undefined, {
             comment: "AppBarMain 내부를 직접 작성해주세요."
         });
     });
@@ -3410,33 +3410,33 @@ const createAppBarHandler$1 = (ctx)=>{
             return appBarMainHandler.transform(mainNode, traverse);
         })();
         const leftChildren = match(props.Left.value).with("None", ()=>undefined).with("Back", ()=>[
-                createLocalSnippetElement$15("AppBarBackButton")
+                createLocalSnippetElement$16("AppBarBackButton")
             ]).with("Close", ()=>[
-                createLocalSnippetElement$15("AppBarCloseButton")
+                createLocalSnippetElement$16("AppBarCloseButton")
             ]).with("Custom", ()=>{
             const buttons = findAllInstances({
                 node,
                 key: APP_BAR_LEFT_ICON_BUTTON_KEY
             });
             if (buttons.length > 0) {
-                return buttons.map((button)=>createLocalSnippetElement$15("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
+                return buttons.map((button)=>createLocalSnippetElement$16("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
                         comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
                     }));
             }
             return undefined;
         }).exhaustive();
-        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$15("AppBarLeft", {}, leftChildren) : undefined;
+        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$16("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$15("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]), {
+            return buttons.map((button)=>createLocalSnippetElement$16("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$15("AppBarRight", {}, rightChildren) : undefined;
-        return createLocalSnippetElement$15("AppBar", {
+        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$16("AppBarRight", {}, rightChildren) : undefined;
+        return createLocalSnippetElement$16("AppBar", {
             theme,
             tone
         }, [
@@ -3450,15 +3450,15 @@ const createAppBarHandler$1 = (ctx)=>{
 };
 
 const IDENTITY_PLACEHOLDER_KEY$1 = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
-const { createLocalSnippetElement: createLocalSnippetElement$14 } = createLocalSnippetHelper("identity-placeholder");
+const { createLocalSnippetElement: createLocalSnippetElement$15 } = createLocalSnippetHelper("identity-placeholder");
 const createIdentityPlaceholderHandler$1 = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY$1, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
-        return createLocalSnippetElement$14("IdentityPlaceholder", commonProps);
+        return createLocalSnippetElement$15("IdentityPlaceholder", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$13 } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$14 } = createLocalSnippetHelper("avatar");
 const createAvatarHandler$1 = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler$1();
     return defineComponentHandler(avatar.key, (node, traverse)=>{
@@ -3481,7 +3481,7 @@ const createAvatarHandler$1 = (ctx)=>{
             },
             size: props.Size.value
         };
-        return createLocalSnippetElement$13("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$13("AvatarBadge", {
+        return createLocalSnippetElement$14("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$14("AvatarBadge", {
             asChild: true
         }, createElement("img", {
             src: "https://placehold.co/20x20"
@@ -3493,7 +3493,7 @@ const createAvatarHandler$1 = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$12 } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$13 } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler$1 = (ctx)=>{
     const avatarHandler = createAvatarHandler$1();
     return defineComponentHandler(avatarStack.key, (node, traverse)=>{
@@ -3506,7 +3506,7 @@ const createAvatarStackHandler$1 = (ctx)=>{
             size: props.Size.value
         };
         const avatarStackChildren = avatarNodes.map((avatarNode)=>avatarHandler.transform(avatarNode, traverse));
-        return createLocalSnippetElement$12("AvatarStack", commonProps, avatarStackChildren);
+        return createLocalSnippetElement$13("AvatarStack", commonProps, avatarStackChildren);
     });
 };
 
@@ -3519,11 +3519,11 @@ const createBadgeHandler$1 = (_ctx)=>defineComponentHandler(badge.key, ({ compon
         return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$11 } = createLocalSnippetHelper("bottom-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$12 } = createLocalSnippetHelper("bottom-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$6 } = createLocalSnippetHelper("action-button");
 // TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
-const BOTTOM_SHEET_FOOTER_KEY$1 = "de6c65d34cc4a01c18c9a7c0ded34635170ca11f";
-const BOTTOM_SHEET_BODY_KEY$1 = "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc";
+const BOTTOM_SHEET_FOOTER_KEY = "de6c65d34cc4a01c18c9a7c0ded34635170ca11f";
+const BOTTOM_SHEET_BODY_KEY = "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc";
 const createBottomSheetHandler$1 = (_ctx)=>defineComponentHandler(bottomSheet.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();
@@ -3537,34 +3537,34 @@ const createBottomSheetHandler$1 = (_ctx)=>defineComponentHandler(bottomSheet.ke
         };
         const bodyNodes = findAllInstances({
             node,
-            key: BOTTOM_SHEET_BODY_KEY$1
+            key: BOTTOM_SHEET_BODY_KEY
         });
-        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$11("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$11("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
+        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$12("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$12("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
         const footerNodes = findAllInstances({
             node,
-            key: BOTTOM_SHEET_FOOTER_KEY$1
+            key: BOTTOM_SHEET_FOOTER_KEY
         });
-        const bottomSheetFooter = props["Show Footer#25162:14"].value && footerNodes.length === 1 ? createLocalSnippetElement$11("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
-        return createLocalSnippetElement$11("BottomSheetRoot", {
+        const bottomSheetFooter = props["Show Footer#25162:14"].value && footerNodes.length === 1 ? createLocalSnippetElement$12("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
+        return createLocalSnippetElement$12("BottomSheetRoot", {
             defaultOpen: true,
             headerAlign
         }, [
-            createLocalSnippetElement$11("BottomSheetTrigger", {
+            createLocalSnippetElement$12("BottomSheetTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$6("ActionButton", {}, "BottomSheet 열기")),
-            createLocalSnippetElement$11("BottomSheetContent", contentProps, [
+            createLocalSnippetElement$12("BottomSheetContent", contentProps, [
                 bottomSheetBody,
                 bottomSheetFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$10 } = createLocalSnippetHelper("callout");
+const { createLocalSnippetElement: createLocalSnippetElement$11 } = createLocalSnippetHelper("callout");
 const createCalloutHandler$1 = (ctx)=>defineComponentHandler(callout.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$10(tag, undefined, undefined, {
+            return createLocalSnippetElement$11(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -3616,10 +3616,10 @@ const createCalloutHandler$1 = (ctx)=>defineComponentHandler(callout.key, ({ com
                 prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#35087:0"])
             }
         };
-        return createLocalSnippetElement$10(tag, commonProps);
+        return createLocalSnippetElement$11(tag, commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$$ } = createLocalSnippetHelper("checkbox");
+const { createLocalSnippetElement: createLocalSnippetElement$10 } = createLocalSnippetHelper("checkbox");
 const createCheckboxHandler$1 = (_ctx)=>defineComponentHandler(checkbox.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -3639,10 +3639,12 @@ const createCheckboxHandler$1 = (_ctx)=>defineComponentHandler(checkbox.key, ({
                 disabled: true
             }
         };
-        return createLocalSnippetElement$$("Checkbox", commonProps);
+        return createLocalSnippetElement$10("Checkbox", commonProps, undefined, {
+            comment: "CheckboxGroup으로 묶어서 사용하는 것을 권장합니다."
+        });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$_ } = createLocalSnippetHelper("checkbox");
+const { createLocalSnippetElement: createLocalSnippetElement$$ } = createLocalSnippetHelper("checkbox");
 const createCheckmarkHandler$1 = (_ctx)=>defineComponentHandler(checkmark.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -3650,14 +3652,14 @@ const createCheckmarkHandler$1 = (_ctx)=>defineComponentHandler(checkmark.key, (
             variant: camelCase(props.Shape.value),
             size: handleSizeProp(props.Size.value)
         };
-        return createLocalSnippetElement$_("Checkmark", commonProps);
+        return createLocalSnippetElement$$("Checkmark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$Z } = createLocalSnippetHelper("chip");
+const { createLocalSnippetElement: createLocalSnippetElement$_ } = createLocalSnippetHelper("chip");
 const CHIP_ICON_SUFFIX_KEY = "27343e0e5ab2c66948e9b10fde03d58b5e037212";
 const createChipIconSuffixHandler$1 = (ctx)=>{
     return defineComponentHandler(CHIP_ICON_SUFFIX_KEY, ({ componentProperties })=>{
-        return createLocalSnippetElement$Z("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
+        return createLocalSnippetElement$_("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
             svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"])
         }));
     });
@@ -3667,7 +3669,7 @@ const createChipHandler$1 = (ctx)=>{
     const iconSuffixHandler = createChipIconSuffixHandler$1(ctx);
     return defineComponentHandler(chip.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$Z("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
+        const prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$_("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
             }))).with("Avatar", ()=>{
             const [avatar$1] = findAllInstances({
@@ -3675,9 +3677,9 @@ const createChipHandler$1 = (ctx)=>{
                 key: avatar.key
             });
             if (!avatar$1) return undefined;
-            return createLocalSnippetElement$Z("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar$1, traverse));
+            return createLocalSnippetElement$_("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar$1, traverse));
         }).exhaustive();
-        const label = createLocalSnippetElement$Z("Chip.Label", undefined, props["Label#7185:0"].value);
+        const label = createLocalSnippetElement$_("Chip.Label", undefined, props["Label#7185:0"].value);
         const [suffixIcon] = findAllInstances({
             node,
             key: CHIP_ICON_SUFFIX_KEY
@@ -3693,7 +3695,7 @@ const createChipHandler$1 = (ctx)=>{
                 disabled: true
             }
         };
-        return createLocalSnippetElement$Z("Chip.Toggle", commonProps, [
+        return createLocalSnippetElement$_("Chip.Toggle", commonProps, [
             prefix,
             label,
             suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined
@@ -3703,7 +3705,7 @@ const createChipHandler$1 = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$Y } = createLocalSnippetHelper("contextual-floating-button");
+const { createLocalSnippetElement: createLocalSnippetElement$Z } = createLocalSnippetHelper("contextual-floating-button");
 const createContextualFloatingButtonHandler$1 = (ctx)=>defineComponentHandler(contextualFloatingButton.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
@@ -3732,7 +3734,7 @@ const createContextualFloatingButtonHandler$1 = (ctx)=>defineComponentHandler(co
             variant: match(props.Variant.value).with("Solid", ()=>"solid").with("Layer", ()=>"layer").exhaustive(),
             layout
         };
-        return createLocalSnippetElement$Y("ContextualFloatingButton", commonProps, children);
+        return createLocalSnippetElement$Z("ContextualFloatingButton", commonProps, children);
     });
 
 const createDividerHandler$1 = (_ctx)=>defineComponentHandler(divider.key, ({ componentProperties: props })=>{
@@ -3748,6 +3750,19 @@ const createDividerHandler$1 = (_ctx)=>defineComponentHandler(divider.key, ({ co
         return createSeedReactElement("Divider", commonProps, undefined);
     });
 
+const templateAddressPickerField = {
+    "key": "a6cb0e888094d95ca0e9862f4775b34407b3611d"
+};
+const templateDatePickerField = {
+    "key": "9fac6c04140c81cdb2e446979952381f1afc0e1a"
+};
+const templateSelectField = {
+    "key": "a43d16a5c3cbb5fe22ca230d6a28338da21c7562"
+};
+const templateTimePickerField = {
+    "key": "0ee0729eb92d55acfa557e8fe3f0a21a0e43f117"
+};
+
 const FIELD_HEADER_KEY = "84fe2e479c3291177662e41c71af29716e48789b";
 const FIELD_INDICATOR_KEY = "a0a170973212ea0cd952b45a8acb11a92561f402";
 const FIELD_FOOTER_KEY = "ab528f3b51a6dc529bb144de1495b07deef77ffa";
@@ -3844,20 +3859,7 @@ const FIELD_KEYS = {
     });
 };
 
-const templateAddressPickerField = {
-    "key": "a6cb0e888094d95ca0e9862f4775b34407b3611d"
-};
-const templateDatePickerField = {
-    "key": "9fac6c04140c81cdb2e446979952381f1afc0e1a"
-};
-const templateSelectField = {
-    "key": "a43d16a5c3cbb5fe22ca230d6a28338da21c7562"
-};
-const templateTimePickerField = {
-    "key": "0ee0729eb92d55acfa557e8fe3f0a21a0e43f117"
-};
-
-const { createLocalSnippetElement: createLocalSnippetElement$X } = createLocalSnippetHelper("field-button");
+const { createLocalSnippetElement: createLocalSnippetElement$Y } = createLocalSnippetHelper("field-button");
 const INPUT_BUTTON_KEY = "965bdecb58755af9a08d60cc3c8d2d33b42e15f0";
 const INPUT_BUTTON_PREFIX_KEY = "12b40c736a098298c64ba16de85702b4b460d1f1";
 const INPUT_BUTTON_SUFFIX_KEY = "5dda27af9f4afafa471925c17acf97d81912877a";
@@ -3883,8 +3885,8 @@ const createFieldButtonHandler$1 = (ctx)=>{
             key: FIELD_KEYS.FOOTER
         });
         // maxGraphemeCount and required can't be props of FieldButton
-        const { required: __required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
-        const { maxGraphemeCount: __maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
+        const { required: _required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
+        const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
         const [prefix] = findAllInstances({
             node: inputButton,
             key: INPUT_BUTTON_PREFIX_KEY
@@ -3916,11 +3918,11 @@ const createFieldButtonHandler$1 = (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$X("FieldButton", {
+        return createLocalSnippetElement$Y("FieldButton", {
             ...headerProps,
             ...footerProps,
             ...commonProps
-        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$X("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$X("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
+        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$Y("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$Y("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
             comment: "buttonProps를 통해 aria-label을 제공하세요."
         });
     });
@@ -3967,7 +3969,7 @@ const createAddressFieldHandler$1 = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$W } = createLocalSnippetHelper("floating-action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$X } = createLocalSnippetHelper("floating-action-button");
 const BUTTON_TYPE_KEY = "8cecc85275115d653579d4c3156567ebf19f7b27";
 const MENU_TYPE_KEY = "400124347392c15473f9cd2d8a6aedb64f3baf36";
 const createFloatingActionButtonHandler$1 = (ctx)=>defineComponentHandler(floatingActionButton.key, (node)=>{
@@ -3991,10 +3993,10 @@ const createFloatingActionButtonHandler$1 = (ctx)=>defineComponentHandler(floati
                 label: menu.componentProperties["Label#29766:9"].value
             };
         })();
-        return createLocalSnippetElement$W("FloatingActionButton", commonProps);
+        return createLocalSnippetElement$X("FloatingActionButton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$V } = createLocalSnippetHelper("help-bubble");
+const { createLocalSnippetElement: createLocalSnippetElement$W } = createLocalSnippetHelper("help-bubble");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$5 } = createLocalSnippetHelper("action-button");
 const createHelpBubbleHandler$1 = (_ctx)=>defineComponentHandler(helpBubble.key, ({ componentProperties: props })=>{
         const placement = (()=>{
@@ -4034,12 +4036,12 @@ const createHelpBubbleHandler$1 = (_ctx)=>defineComponentHandler(helpBubble.key,
             showCloseButton: props["Show Close Button#40538:0"].value,
             placement
         };
-        return createLocalSnippetElement$V("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$5("ActionButton", {}, "HelpBubble 열기"), {
+        return createLocalSnippetElement$W("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$5("ActionButton", {}, "HelpBubble 열기"), {
             comment: "필요에 따라 HelpBubbleAnchor로 변경하여 사용하세요."
         });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$U } = createLocalSnippetHelper("select-box");
+const { createLocalSnippetElement: createLocalSnippetElement$V } = createLocalSnippetHelper("select-box");
 const LEGACY_SELECT_BOX_KEY = "38722ffeb4c966256a709155e8ddac50c93d7c60";
 const LEGACY_SELECT_BOX_GROUP_KEY = "a3d58bb8540600878742cdcf2608a4b3851667ec";
 const createLegacySelectBoxHandler$1 = (_ctx)=>defineComponentHandler(LEGACY_SELECT_BOX_KEY, ({ componentProperties: props })=>{
@@ -4056,7 +4058,7 @@ const createLegacySelectBoxHandler$1 = (_ctx)=>defineComponentHandler(LEGACY_SEL
                 defaultChecked: true
             }
         };
-        return createLocalSnippetElement$U(tag, commonProps, undefined, {
+        return createLocalSnippetElement$V(tag, commonProps, undefined, {
             comment: "이 Figma 컴포넌트는 @seed-design/react@1.2보다 낮은 버전의 SelectBox입니다. 신규 컴포넌트로 교체할 수 있습니다."
         });
     });
@@ -4081,13 +4083,13 @@ const createLegacySelectBoxGroupHandler$1 = (ctx)=>{
                 defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
             }
         };
-        return createLocalSnippetElement$U(tag, commonProps, stack, {
+        return createLocalSnippetElement$V(tag, commonProps, stack, {
             comment: "이 Figma 컴포넌트는 @seed-design/react@1.2보다 낮은 버전의 SelectBox입니다. 신규 컴포넌트로 교체할 수 있습니다."
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$T } = createLocalSnippetHelper("text-field");
+const { createLocalSnippetElement: createLocalSnippetElement$U } = createLocalSnippetHelper("text-field");
 const LEGACY_TEXT_FIELD_KEY = "c49873c37a639f0dffdea4efd0eb43760d66c141";
 const LEGACY_MULTILINE_TEXT_FIELD_KEY = "88b2399c930c85f9ce2972163a078bc684b84bbe";
 const createLegacyTextFieldHandler$1 = (ctx)=>defineComponentHandler(LEGACY_TEXT_FIELD_KEY, ({ componentProperties: props })=>{
@@ -4144,8 +4146,8 @@ const createLegacyTextFieldHandler$1 = (ctx)=>defineComponentHandler(LEGACY_TEXT
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createLocalSnippetElement$T("TextFieldInput", inputProps);
-        return createLocalSnippetElement$T("TextField", commonProps, TextFieldChildren, {
+        const TextFieldChildren = createLocalSnippetElement$U("TextFieldInput", inputProps);
+        return createLocalSnippetElement$U("TextField", commonProps, TextFieldChildren, {
             comment: "이 Figma 컴포넌트는 @seed-design/react@1.1보다 낮은 버전의 TextField입니다. 신규 컴포넌트로 교체할 수 있습니다."
         });
     });
@@ -4190,22 +4192,22 @@ const createLegacyMultilineTextFieldHandler$1 = (_ctx)=>defineComponentHandler(L
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createLocalSnippetElement$T("TextFieldTextarea", inputProps);
-        return createLocalSnippetElement$T("TextField", commonProps, TextFieldChildren, {
+        const TextFieldChildren = createLocalSnippetElement$U("TextFieldTextarea", inputProps);
+        return createLocalSnippetElement$U("TextField", commonProps, TextFieldChildren, {
             comment: "이 Figma 컴포넌트는 @seed-design/react@1.1보다 낮은 버전의 TextField입니다. 신규 컴포넌트로 교체할 수 있습니다."
         });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$S } = createLocalSnippetHelper("list-header");
+const { createLocalSnippetElement: createLocalSnippetElement$T } = createLocalSnippetHelper("list-header");
 const createListHeaderHandler$1 = (_ctx)=>defineComponentHandler(listHeader.key, ({ componentProperties: props })=>{
         const commonProps = {
             variant: camelCase(props["Variant"].value)
         };
-        return createLocalSnippetElement$S("ListHeader", commonProps, props["Title#28588:0"].value);
+        return createLocalSnippetElement$T("ListHeader", commonProps, props["Title#28588:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$R } = createLocalSnippetHelper("list");
-const PREFIX_KEYS$1 = {
+const { createLocalSnippetElement: createLocalSnippetElement$S } = createLocalSnippetHelper("list");
+const PREFIX_KEYS$2 = {
     checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
     radiomark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
     icon: "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca",
@@ -4236,7 +4238,7 @@ const createListItemHandler$1 = (ctx)=>defineComponentHandler(listItem.key, (nod
         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$1)){
+            for (const key of Object.values(PREFIX_KEYS$2)){
                 const [found] = findAllInstances({
                     node,
                     key
@@ -4314,37 +4316,37 @@ const createListItemHandler$1 = (ctx)=>defineComponentHandler(listItem.key, (nod
             }
         };
         const comment = match(tag).with("ListItem", ()=>"목적에 따라 ListButtonItem이나 ListLinkItem으로 바꿔 사용하세요.").with("ListCheckItem", ()=>`<List as="fieldset">과 함께 사용하세요.`).with("ListRadioItem", ()=>"<RadioGroup.Root>와 함께 사용하세요.").otherwise(()=>undefined);
-        const list = createLocalSnippetElement$R(tag, commonProps, undefined, {
+        const list = createLocalSnippetElement$S(tag, commonProps, undefined, {
             comment
         });
         if (props["Divider#28441:0"].value) {
             return createElement("", {}, [
                 list,
-                createLocalSnippetElement$R("ListDivider")
+                createLocalSnippetElement$S("ListDivider")
             ]);
         }
         return list;
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$Q } = createLocalSnippetHelper("manner-temp");
+const { createLocalSnippetElement: createLocalSnippetElement$R } = createLocalSnippetHelper("manner-temp");
 const createMannerTempHandler$1 = (_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$Q("MannerTemp", commonProps);
+        return createLocalSnippetElement$R("MannerTemp", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$P } = createLocalSnippetHelper("manner-temp-badge");
+const { createLocalSnippetElement: createLocalSnippetElement$Q } = createLocalSnippetHelper("manner-temp-badge");
 const createMannerTempBadgeHandler$1 = (_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$P("MannerTempBadge", commonProps);
+        return createLocalSnippetElement$Q("MannerTempBadge", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$O } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$P } = createLocalSnippetHelper("menu-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$4 } = createLocalSnippetHelper("action-button");
 const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
 const createMenuSheetItemHandler$1 = (ctx)=>defineComponentHandler(MENU_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
@@ -4362,7 +4364,7 @@ const createMenuSheetItemHandler$1 = (ctx)=>defineComponentHandler(MENU_SHEET_IT
                 description: props["Sub Text#51411:0"].value
             }
         };
-        return createLocalSnippetElement$O("MenuSheetItem", commonProps);
+        return createLocalSnippetElement$P("MenuSheetItem", commonProps);
     });
 const MENU_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
 const createMenuSheetGroupHandler$1 = (ctx)=>{
@@ -4373,7 +4375,7 @@ const createMenuSheetGroupHandler$1 = (ctx)=>{
             key: menuSheetItemHandler.key
         });
         const contentChildren = items.map((item)=>menuSheetItemHandler.transform(item, traverse));
-        return createLocalSnippetElement$O("MenuSheetGroup", undefined, contentChildren);
+        return createLocalSnippetElement$P("MenuSheetGroup", undefined, contentChildren);
     });
 };
 const createMenuSheetHandler$1 = (ctx)=>{
@@ -4392,24 +4394,24 @@ const createMenuSheetHandler$1 = (ctx)=>{
             })).with("Text Only", ()=>({
                 labelAlign: "center"
             })).exhaustive();
-        const content = createLocalSnippetElement$O("MenuSheetContent", {
+        const content = createLocalSnippetElement$P("MenuSheetContent", {
             title,
             description,
             labelAlign
         }, contentChildren, {
             comment: title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
-        const trigger = createLocalSnippetElement$O("MenuSheetTrigger", {
+        const trigger = createLocalSnippetElement$P("MenuSheetTrigger", {
             asChild: true
         }, createLocalSnippetElementTrigger$4("ActionButton", {}, "MenuSheet 열기"));
-        return createLocalSnippetElement$O("MenuSheet", undefined, [
+        return createLocalSnippetElement$P("MenuSheet", undefined, [
             trigger,
             content
         ]);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$N } = createLocalSnippetHelper("page-banner");
+const { createLocalSnippetElement: createLocalSnippetElement$O } = createLocalSnippetHelper("page-banner");
 const SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
 const createPageBannerButtonHandler$1 = (_ctx)=>defineComponentHandler(SUFFIX_BUTTON_KEY, (node)=>{
         return createElement("PageBannerButton", undefined, node.componentProperties["Label#39890:0"].value);
@@ -4443,7 +4445,7 @@ const createPageBannerHandler$1 = (ctx)=>{
             })).exhaustive();
         const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Text");
         if (!textNode) {
-            return createLocalSnippetElement$N(tag, undefined, undefined, {
+            return createLocalSnippetElement$O(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -4476,11 +4478,11 @@ const createPageBannerHandler$1 = (ctx)=>{
                 suffix
             }
         };
-        return createLocalSnippetElement$N(tag, commonProps);
+        return createLocalSnippetElement$O(tag, commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$M } = createLocalSnippetHelper("progress-circle");
+const { createLocalSnippetElement: createLocalSnippetElement$N } = createLocalSnippetHelper("progress-circle");
 const createProgressCircleHandler$1 = (_ctx)=>defineComponentHandler(progressCircle.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
@@ -4512,10 +4514,10 @@ const createProgressCircleHandler$1 = (_ctx)=>defineComponentHandler(progressCir
                 tone: camelCase(props.Tone.value)
             }
         };
-        return createLocalSnippetElement$M("ProgressCircle", commonProps);
+        return createLocalSnippetElement$N("ProgressCircle", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$L } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$M } = createLocalSnippetHelper("radio-group");
 const createRadioGroupItemHandler$1 = (_ctx)=>defineComponentHandler(radio.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -4528,20 +4530,20 @@ const createRadioGroupItemHandler$1 = (_ctx)=>defineComponentHandler(radio.key,
             tone,
             weight: camelCase(props.Weight.value)
         };
-        return createLocalSnippetElement$L("RadioGroupItem", commonProps);
+        return createLocalSnippetElement$M("RadioGroupItem", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$K } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$L } = createLocalSnippetHelper("radio-group");
 const createRadiomarkHandler$1 = (_ctx)=>defineComponentHandler(radiomark.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$K("Radiomark", commonProps);
+        return createLocalSnippetElement$L("Radiomark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$J } = createLocalSnippetHelper("reaction-button");
+const { createLocalSnippetElement: createLocalSnippetElement$K } = createLocalSnippetHelper("reaction-button");
 const createReactionButtonHandler$1 = (ctx)=>defineComponentHandler(reactionButton.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
@@ -4555,7 +4557,7 @@ const createReactionButtonHandler$1 = (ctx)=>defineComponentHandler(reactionButt
                 defaultPressed: true
             }
         };
-        return createLocalSnippetElement$J("ReactionButton", commonProps, [
+        return createLocalSnippetElement$K("ReactionButton", commonProps, [
             createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#12379:0"])
             }),
@@ -4564,7 +4566,7 @@ const createReactionButtonHandler$1 = (ctx)=>defineComponentHandler(reactionButt
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$I } = createLocalSnippetHelper("result-section");
+const { createLocalSnippetElement: createLocalSnippetElement$J } = createLocalSnippetHelper("result-section");
 const createResultSectionHandler$1 = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler$1(ctx);
     const ghostButtonHandler = createActionButtonGhostHandler$1(ctx);
@@ -4602,11 +4604,11 @@ const createResultSectionHandler$1 = (ctx)=>{
                 }
             }
         };
-        return createLocalSnippetElement$I("ResultSection", commonProps);
+        return createLocalSnippetElement$J("ResultSection", commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$H } = createLocalSnippetHelper("segmented-control");
+const { createLocalSnippetElement: createLocalSnippetElement$I } = createLocalSnippetHelper("segmented-control");
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemHandler$1 = (_ctx)=>defineComponentHandler(SEGMENTED_CONTROL_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -4616,7 +4618,7 @@ const createSegmentedControlItemHandler$1 = (_ctx)=>defineComponentHandler(SEGME
                 disabled: true
             }
         };
-        return createLocalSnippetElement$H("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+        return createLocalSnippetElement$I("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
     });
 const createSegmentedControlHandler$1 = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler$1();
@@ -4632,7 +4634,7 @@ const createSegmentedControlHandler$1 = (ctx)=>{
                 defaultValue: selectedSegment.componentProperties["Label#11366:15"].value
             }
         };
-        return createLocalSnippetElement$H("SegmentedControl", commonProps, segmentedControlChildren, {
+        return createLocalSnippetElement$I("SegmentedControl", commonProps, segmentedControlChildren, {
             comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
     });
@@ -4648,7 +4650,7 @@ const createSkeletonHandler$1 = (ctx)=>defineComponentHandler(skeleton.key, (nod
         return createSeedReactElement("Skeleton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$G } = createLocalSnippetHelper("slider");
+const { createLocalSnippetElement: createLocalSnippetElement$H } = createLocalSnippetHelper("slider");
 const SLIDER_TICK_KEY = "ace432ffb7a2af13bce549b19c932ac5f96a9a78";
 function getSliderComment$1(props) {
     return [
@@ -4677,14 +4679,14 @@ const createSliderFieldHandler$1 = (ctx)=>{
         });
         const sliderProps = sliderHandler.transform(slider$1, traverse).props;
         // maxGraphemeCount and required can't be props of Slider
-        const { required: __required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
-        const { maxGraphemeCount: __maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
+        const { required: _required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
+        const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
         const commonProps = {
             ...sliderProps,
             ...headerProps,
             ...footerProps
         };
-        return createLocalSnippetElement$G("Slider", commonProps, undefined, {
+        return createLocalSnippetElement$H("Slider", commonProps, undefined, {
             comment: getSliderComment$1(commonProps)
         });
     });
@@ -4726,13 +4728,13 @@ const createSliderHandler$1 = (_ctx)=>{
                 disabled: true
             }
         };
-        return createLocalSnippetElement$G("Slider", commonProps, undefined, {
+        return createLocalSnippetElement$H("Slider", commonProps, undefined, {
             comment: getSliderComment$1(commonProps)
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$F } = createLocalSnippetHelper("snackbar");
+const { createLocalSnippetElement: createLocalSnippetElement$G } = createLocalSnippetHelper("snackbar");
 const createSnackbarHandler$1 = (_ctx)=>defineComponentHandler(snackbar.key, ({ componentProperties: props })=>{
         const commonProps = {
             message: props["Message#1528:4"].value,
@@ -4742,10 +4744,10 @@ const createSnackbarHandler$1 = (_ctx)=>defineComponentHandler(snackbar.key, ({
             }
         };
         // TODO: adapter.create({ render })
-        return createLocalSnippetElement$F("Snackbar", commonProps);
+        return createLocalSnippetElement$G("Snackbar", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$E } = createLocalSnippetHelper("switch");
+const { createLocalSnippetElement: createLocalSnippetElement$F } = createLocalSnippetHelper("switch");
 const createSwitchHandler$1 = (_ctx)=>defineComponentHandler(_switch.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated] Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -4753,9 +4755,9 @@ const createSwitchHandler$1 = (_ctx)=>defineComponentHandler(_switch.key, ({ com
             size: props.Size.value
         };
         if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
-            return createLocalSnippetElement$E("Switchmark", commonProps);
+            return createLocalSnippetElement$F("Switchmark", commonProps);
         }
-        return createLocalSnippetElement$E("Switch", {
+        return createLocalSnippetElement$F("Switch", {
             ...commonProps,
             label: props["Label#36578:0"].value,
             ...props.Selected.value === "True" && {
@@ -4767,14 +4769,14 @@ const createSwitchHandler$1 = (_ctx)=>defineComponentHandler(_switch.key, ({ com
         });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$D } = createLocalSnippetHelper("switch");
+const { createLocalSnippetElement: createLocalSnippetElement$E } = createLocalSnippetHelper("switch");
 const createSwitchmarkHandler$1 = (_ctx)=>defineComponentHandler(switchmark.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated] Brand", ()=>"brand").exhaustive();
         const commonProps = {
             tone,
             size: props.Size.value
         };
-        return createLocalSnippetElement$D("Switchmark", commonProps);
+        return createLocalSnippetElement$E("Switchmark", commonProps);
     });
 
 const { createLocalSnippetElement: createTabsLocalSnippetElement$1 } = createLocalSnippetHelper("tabs");
@@ -4986,7 +4988,7 @@ const createChipTabsTriggerHandler$1 = (_ctx)=>defineComponentHandler(CHIP_TRIGG
         return createChipTabsLocalSnippetElement$1("ChipTabsTrigger", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$C } = createLocalSnippetHelper("tag-group");
+const { createLocalSnippetElement: createLocalSnippetElement$D } = createLocalSnippetHelper("tag-group");
 const createTagGroupHandler$1 = (ctx)=>{
     const itemHandler = createTagGroupItemHandler$1(ctx);
     return defineComponentHandler(tagGroup.key, (node, traverse)=>{
@@ -4996,7 +4998,7 @@ const createTagGroupHandler$1 = (ctx)=>{
         });
         const items = itemNodes.map((itemNode)=>itemHandler.transform(itemNode, traverse));
         if (items.length === 0) {
-            return createLocalSnippetElement$C("TagGroupRoot");
+            return createLocalSnippetElement$D("TagGroupRoot");
         }
         // if size/weight/tone are all the same among item[n].props, lift them up to TagGroupRoot
         const consistent = {
@@ -5004,7 +5006,7 @@ const createTagGroupHandler$1 = (ctx)=>{
             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 createLocalSnippetElement$C("TagGroupRoot", {
+        return createLocalSnippetElement$D("TagGroupRoot", {
             // lift up consistent props
             ...consistent.size && {
                 size: items[0].props.size
@@ -5032,7 +5034,7 @@ const createTagGroupHandler$1 = (ctx)=>{
 const TAG_GROUP_ITEM_KEY = "a7bbc318919053f96be00e509469f6294d6bb6bb";
 const createTagGroupItemHandler$1 = (ctx)=>defineComponentHandler(TAG_GROUP_ITEM_KEY, ({ componentProperties: props })=>{
         const size = match(props.Size.value).with("t2(12pt)", ()=>"t2").with("t3(13pt)", ()=>"t3").with("t4(14pt)", ()=>"t4").exhaustive();
-        return createLocalSnippetElement$C("TagGroupItem", {
+        return createLocalSnippetElement$D("TagGroupItem", {
             size,
             weight: camelCase(props["Weight"].value),
             tone: camelCase(props["Tone"].value),
@@ -5046,7 +5048,7 @@ const createTagGroupItemHandler$1 = (ctx)=>defineComponentHandler(TAG_GROUP_ITEM
         });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$B } = createLocalSnippetHelper("text-field");
+const { createLocalSnippetElement: createLocalSnippetElement$C } = createLocalSnippetHelper("text-field");
 const TEXT_INPUT_OUTLINE_KEY = "22eebd645d310c086d9f5f69d8f179ff5c7cf7ca";
 const TEXT_INPUT_OUTLINE_PREFIX_KEY = "1ab174dd51bc42a5efe530f52f1dd02255c50b18";
 const TEXT_INPUT_OUTLINE_SUFFIX_KEY = "555fee288d9053760e301791665bbac31d19c43f";
@@ -5158,13 +5160,13 @@ const createTextInputFieldHandler$1 = (ctx)=>{
                 placeholder: placeholder.characters
             }
         };
-        return createLocalSnippetElement$B("TextField", {
+        return createLocalSnippetElement$C("TextField", {
             ...fieldProps,
             ...commonProps,
             ...value && {
                 defaultValue: value.characters
             }
-        }, createLocalSnippetElement$B("TextFieldInput", inputProps));
+        }, createLocalSnippetElement$C("TextFieldInput", inputProps));
     });
 };
 const createTextareaFieldHandler$1 = (ctx)=>{
@@ -5207,14 +5209,14 @@ const createTextareaFieldHandler$1 = (ctx)=>{
                 defaultValue: value.characters
             }
         };
-        return createLocalSnippetElement$B("TextField", {
+        return createLocalSnippetElement$C("TextField", {
             ...fieldProps,
             ...commonProps
-        }, createLocalSnippetElement$B("TextFieldTextarea", inputProps));
+        }, createLocalSnippetElement$C("TextFieldTextarea", inputProps));
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$A } = createLocalSnippetHelper("toggle-button");
+const { createLocalSnippetElement: createLocalSnippetElement$B } = createLocalSnippetHelper("toggle-button");
 const createToggleButtonHandler$1 = (ctx)=>defineComponentHandler(toggleButton.key, ({ componentProperties: props })=>{
         const commonProps = {
             variant: camelCase(props.Variant.value),
@@ -5229,7 +5231,7 @@ const createToggleButtonHandler$1 = (ctx)=>defineComponentHandler(toggleButton.k
                 loading: true
             }
         };
-        return createLocalSnippetElement$A("ToggleButton", commonProps, [
+        return createLocalSnippetElement$B("ToggleButton", commonProps, [
             props["Show Prefix Icon#6122:392"].value ? createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"])
             }) : undefined,
@@ -5259,8 +5261,6 @@ var archivedHandlers = {
   createDatePickerFieldHandler: createDatePickerFieldHandler$1,
   createDividerHandler: createDividerHandler$1,
   createFieldButtonHandler: createFieldButtonHandler$1,
-  createFieldFooterHandler: createFieldFooterHandler$1,
-  createFieldHeaderHandler: createFieldHeaderHandler$1,
   createFloatingActionButtonHandler: createFloatingActionButtonHandler$1,
   createHelpBubbleHandler: createHelpBubbleHandler$1,
   createIdentityPlaceholderHandler: createIdentityPlaceholderHandler$1,
@@ -5460,36 +5460,6 @@ const privateTemplateChipGroup = {
         }
     }
 };
-const privateComponentFieldFooter = {
-    "name": "privateComponentFieldFooter",
-    "key": "a2e73c375b787756a11e84c5915f8251c621ee3a",
-    "componentPropertyDefinitions": {
-        "Text#2770:0": {
-            "type": "TEXT"
-        },
-        "Has Prefix#2778:13": {
-            "type": "BOOLEAN"
-        },
-        "Error Text#32821:0": {
-            "type": "TEXT"
-        },
-        "Type": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Description",
-                "Description With Character Count",
-                "Character Count"
-            ]
-        },
-        "Error": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "true",
-                "false"
-            ]
-        }
-    }
-};
 const privateComponentFieldFooterCharacterCount = {
     "name": "privateComponentFieldFooterCharacterCount",
     "key": "73f1a9275275c87b563e879e6948318523faf8e4",
@@ -5510,28 +5480,6 @@ const privateComponentFieldFooterCharacterCount = {
         }
     }
 };
-const privateComponentFieldHeader = {
-    "name": "privateComponentFieldHeader",
-    "key": "8371fe9083cb9bebfb4ee51b0791bfb00a799dd6",
-    "componentPropertyDefinitions": {
-        "Label#34796:0": {
-            "type": "TEXT"
-        },
-        "Has Indicator#34796:1": {
-            "type": "BOOLEAN"
-        },
-        "Has Suffix#34796:2": {
-            "type": "BOOLEAN"
-        },
-        "Weight": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Medium",
-                "Bold"
-            ]
-        }
-    }
-};
 const privateComponentFieldHeaderIndicator = {
     "name": "privateComponentFieldHeaderIndicator",
     "key": "c3f7843103c1efcc3a8ac365b1175df6d10173e2",
@@ -5562,29 +5510,6 @@ const privateComponentFieldHeaderSuffix = {
         }
     }
 };
-const privateComponentInputButton = {
-    "name": "privateComponentInputButton",
-    "key": "1220e63a59a31b50eefe5c4ec1a4e516ba70b07b",
-    "componentPropertyDefinitions": {
-        "Has Prefix#32514:10": {
-            "type": "BOOLEAN"
-        },
-        "Has Suffix#32865:68": {
-            "type": "BOOLEAN"
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Error",
-                "Disabled",
-                "Read Only",
-                "Pressed",
-                "Error Pressed"
-            ]
-        }
-    }
-};
 const privateComponentInputButtonPrefix = {
     "name": "privateComponentInputButtonPrefix",
     "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -5949,6 +5874,21 @@ const privateComponentSegmentedControlItem = {
         }
     }
 };
+const privateComponentSelectBoxItemCheckmark = {
+    "name": "privateComponentSelectBoxItemCheckmark",
+    "key": "2d91bde3c21bc38b2b07d8e1b87a03116e96555d",
+    "componentPropertyDefinitions": {
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Selected",
+                "Disabled"
+            ]
+        }
+    }
+};
 const privateComponentSliderItemHandles = {
     "name": "privateComponentSliderItemHandles",
     "key": "950b33735d6dda594436c876386b921908dedf64",
@@ -6173,33 +6113,6 @@ const privateComponentTabsLine = {
         }
     }
 };
-const privateComponentTextInput = {
-    "name": "privateComponentTextInput",
-    "key": "1f3e7bd2f1d39a76e304188b5a8b800d7c87aff2",
-    "componentPropertyDefinitions": {
-        "Has Prefix#32514:10": {
-            "type": "BOOLEAN"
-        },
-        "Loading Text#32734:0": {
-            "type": "TEXT"
-        },
-        "Has Suffix#32865:68": {
-            "type": "BOOLEAN"
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Focused",
-                "Error",
-                "Error Focused",
-                "Disabled",
-                "Read Only",
-                "AI Loading (Figma Only)"
-            ]
-        }
-    }
-};
 const privateComponentTextInputCardNumberInput = {
     "name": "privateComponentTextInputCardNumberInput",
     "key": "60888e1eba691721f0ec6a41df43c1c075e5beac",
@@ -6353,31 +6266,6 @@ const privateComponentTextInputSuffix = {
         }
     }
 };
-const privateComponentTextarea = {
-    "name": "privateComponentTextarea",
-    "key": "e20ec5b725e0fdbaca728cecdc72b0c485728b4d",
-    "componentPropertyDefinitions": {
-        "Auto Size (Figma Only)": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "true",
-                "false"
-            ]
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Focused",
-                "Error",
-                "Error Focused",
-                "Disabled",
-                "Read Only",
-                "AI Loading (Figma Only)"
-            ]
-        }
-    }
-};
 const privateComponentTextareaInput = {
     "name": "privateComponentTextareaInput",
     "key": "a75e057f13d05ee57003a90cc91c74f130b22135",
@@ -6535,30 +6423,6 @@ const privateComponentTopNavigationTitleRight = {
         }
     }
 };
-const privateComponentUnderlineTextInput = {
-    "name": "privateComponentUnderlineTextInput",
-    "key": "004c8591153865af3fe3efb9c552cd280b9fd31d",
-    "componentPropertyDefinitions": {
-        "Has Prefix#34125:0": {
-            "type": "BOOLEAN"
-        },
-        "Has Suffix#34125:8": {
-            "type": "BOOLEAN"
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Focused",
-                "Error",
-                "Error Focused",
-                "Disabled",
-                "Read Only",
-                "AI Loading (Figma Only)"
-            ]
-        }
-    }
-};
 const privateComponentUnderlineTextInputInput = {
     "name": "privateComponentUnderlineTextInputInput",
     "key": "a8a39cf124e7b4c3b873429e81b4278639a7031b",
@@ -7596,8 +7460,8 @@ const componentCheckbox = {
         }
     }
 };
-const templateCheckboxGroupField = {
-    "name": "templateCheckboxGroupField",
+const templateCheckboxField = {
+    "name": "templateCheckboxField",
     "key": "214dd0fc8a3c5bc1e0c90cce29936f1ec6a26c3c",
     "componentPropertyDefinitions": {
         "Show Header#40606:8": {
@@ -8396,8 +8260,8 @@ const componentRadio = {
         }
     }
 };
-const templateRadioGroupField = {
-    "name": "templateRadioGroupField",
+const templateRadioField = {
+    "name": "templateRadioField",
     "key": "a3f159c223e3a0888fc48098c1580793297f82e9",
     "componentPropertyDefinitions": {
         "Show Header#40606:8": {
@@ -8629,6 +8493,27 @@ const componentSegmentedControl = {
         }
     }
 };
+const templateSelectBoxField = {
+    "name": "templateSelectBoxField",
+    "key": "cddac54129eed15830319d1e30480f42ea80d4d3",
+    "componentPropertyDefinitions": {
+        "Show Header#40606:8": {
+            "type": "BOOLEAN"
+        },
+        "Show Footer#40606:9": {
+            "type": "BOOLEAN"
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Error",
+                "Disabled",
+                "Read Only"
+            ]
+        }
+    }
+};
 const componentSelectBoxGroup = {
     "name": "componentSelectBoxGroup",
     "key": "cbf6ddeb6d6f889e983399291ec8b60ee3390177",
@@ -9088,43 +8973,194 @@ const componentUserSelectionFigmaOnly = {
         }
     }
 };
-const componentActionButtonGhostButton = {
-    "name": "componentActionButtonGhostButton",
-    "key": "0dd8c776368619b13886924cd65974f821887753",
+const componentFieldFooter = {
+    "name": "componentFieldFooter",
+    "key": "a2e73c375b787756a11e84c5915f8251c621ee3a",
     "componentPropertyDefinitions": {
-        "Label#30511:2": {
+        "Text#2770:0": {
             "type": "TEXT"
         },
-        "Prefix Icon#30511:3": {
-            "type": "INSTANCE_SWAP"
+        "Has Prefix#2778:13": {
+            "type": "BOOLEAN"
         },
-        "Suffix Icon#30525:0": {
-            "type": "INSTANCE_SWAP"
+        "Error Text#32821:0": {
+            "type": "TEXT"
         },
-        "Icon#30525:15": {
-            "type": "INSTANCE_SWAP"
+        "Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Description",
+                "Description With Character Count",
+                "Character Count"
+            ]
         },
-        "Bleed": {
+        "Error": {
             "type": "VARIANT",
             "variantOptions": [
                 "true",
                 "false"
             ]
+        }
+    }
+};
+const componentFieldHeader = {
+    "name": "componentFieldHeader",
+    "key": "8371fe9083cb9bebfb4ee51b0791bfb00a799dd6",
+    "componentPropertyDefinitions": {
+        "Label#34796:0": {
+            "type": "TEXT"
         },
-        "Size": {
+        "Has Indicator#34796:1": {
+            "type": "BOOLEAN"
+        },
+        "Has Suffix#34796:2": {
+            "type": "BOOLEAN"
+        },
+        "Weight": {
             "type": "VARIANT",
             "variantOptions": [
-                "Xsmall",
-                "Small",
                 "Medium",
-                "Large"
+                "Bold"
             ]
-        },
-        "Layout": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Text Only",
-                "Icon First",
+        }
+    }
+};
+const componentInputButton = {
+    "name": "componentInputButton",
+    "key": "1220e63a59a31b50eefe5c4ec1a4e516ba70b07b",
+    "componentPropertyDefinitions": {
+        "Has Prefix#32514:10": {
+            "type": "BOOLEAN"
+        },
+        "Has Suffix#32865:68": {
+            "type": "BOOLEAN"
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Error",
+                "Disabled",
+                "Read Only",
+                "Pressed",
+                "Error Pressed"
+            ]
+        }
+    }
+};
+const componentTextInput = {
+    "name": "componentTextInput",
+    "key": "1f3e7bd2f1d39a76e304188b5a8b800d7c87aff2",
+    "componentPropertyDefinitions": {
+        "Has Prefix#32514:10": {
+            "type": "BOOLEAN"
+        },
+        "Loading Text#32734:0": {
+            "type": "TEXT"
+        },
+        "Has Suffix#32865:68": {
+            "type": "BOOLEAN"
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Focused",
+                "Error",
+                "Error Focused",
+                "Disabled",
+                "Read Only",
+                "AI Loading (Figma Only)"
+            ]
+        }
+    }
+};
+const componentTextarea = {
+    "name": "componentTextarea",
+    "key": "e20ec5b725e0fdbaca728cecdc72b0c485728b4d",
+    "componentPropertyDefinitions": {
+        "Auto Size (Figma Only)": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "true",
+                "false"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Focused",
+                "Error",
+                "Error Focused",
+                "Disabled",
+                "Read Only",
+                "AI Loading (Figma Only)"
+            ]
+        }
+    }
+};
+const componentUnderlineTextInput = {
+    "name": "componentUnderlineTextInput",
+    "key": "004c8591153865af3fe3efb9c552cd280b9fd31d",
+    "componentPropertyDefinitions": {
+        "Has Prefix#34125:0": {
+            "type": "BOOLEAN"
+        },
+        "Has Suffix#34125:8": {
+            "type": "BOOLEAN"
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Focused",
+                "Error",
+                "Error Focused",
+                "Disabled",
+                "Read Only",
+                "AI Loading (Figma Only)"
+            ]
+        }
+    }
+};
+const componentActionButtonGhostButton = {
+    "name": "componentActionButtonGhostButton",
+    "key": "0dd8c776368619b13886924cd65974f821887753",
+    "componentPropertyDefinitions": {
+        "Label#30511:2": {
+            "type": "TEXT"
+        },
+        "Prefix Icon#30511:3": {
+            "type": "INSTANCE_SWAP"
+        },
+        "Suffix Icon#30525:0": {
+            "type": "INSTANCE_SWAP"
+        },
+        "Icon#30525:15": {
+            "type": "INSTANCE_SWAP"
+        },
+        "Bleed": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "true",
+                "false"
+            ]
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Xsmall",
+                "Small",
+                "Medium",
+                "Large"
+            ]
+        },
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Text Only",
+                "Icon First",
                 "Icon Last",
                 "Icon Only"
             ]
@@ -9390,11 +9426,14 @@ var FIGMA_COMPONENTS = {
   componentDerpecatedTopNavigation: componentDerpecatedTopNavigation,
   componentDivider: componentDivider,
   componentEditorToolbarFigmaOnly: componentEditorToolbarFigmaOnly,
+  componentFieldFooter: componentFieldFooter,
+  componentFieldHeader: componentFieldHeader,
   componentFloatingActionButton: componentFloatingActionButton,
   componentHelpBubble: componentHelpBubble,
   componentIOsLiveAcitivityScreenFigmaOnly: componentIOsLiveAcitivityScreenFigmaOnly,
   componentImageFrame: componentImageFrame,
   componentImageFrameReactionButton: componentImageFrameReactionButton,
+  componentInputButton: componentInputButton,
   componentKakaoTalkBubbleFigmaOnly: componentKakaoTalkBubbleFigmaOnly,
   componentListHeader: componentListHeader,
   componentListItem: componentListItem,
@@ -9432,18 +9471,18 @@ var FIGMA_COMPONENTS = {
   componentSwitchmark: componentSwitchmark,
   componentTabs: componentTabs,
   componentTagGroup: componentTagGroup,
+  componentTextInput: componentTextInput,
+  componentTextarea: componentTextarea,
   componentToggleButton: componentToggleButton,
   componentTopNavigation: componentTopNavigation,
+  componentUnderlineTextInput: componentUnderlineTextInput,
   componentUserSelectionFigmaOnly: componentUserSelectionFigmaOnly,
   privateComponentAlertDialogActions: privateComponentAlertDialogActions,
   privateComponentBottomSheetCloseButton: privateComponentBottomSheetCloseButton,
   privateComponentBottomSheetHandle: privateComponentBottomSheetHandle,
-  privateComponentFieldFooter: privateComponentFieldFooter,
   privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
-  privateComponentFieldHeader: privateComponentFieldHeader,
   privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
   privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
-  privateComponentInputButton: privateComponentInputButton,
   privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
   privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
   privateComponentInputButtonValue: privateComponentInputButtonValue,
@@ -9458,6 +9497,7 @@ var FIGMA_COMPONENTS = {
   privateComponentRootTopNavigationActionList: privateComponentRootTopNavigationActionList,
   privateComponentRootTopNavigationIconButton: privateComponentRootTopNavigationIconButton,
   privateComponentSegmentedControlItem: privateComponentSegmentedControlItem,
+  privateComponentSelectBoxItemCheckmark: privateComponentSelectBoxItemCheckmark,
   privateComponentSliderItemHandles: privateComponentSliderItemHandles,
   privateComponentSliderItemMarker: privateComponentSliderItemMarker,
   privateComponentSliderItemRange: privateComponentSliderItemRange,
@@ -9467,7 +9507,6 @@ var FIGMA_COMPONENTS = {
   privateComponentTabItemLineHug: privateComponentTabItemLineHug,
   privateComponentTabsChip: privateComponentTabsChip,
   privateComponentTabsLine: privateComponentTabsLine,
-  privateComponentTextInput: privateComponentTextInput,
   privateComponentTextInputCardNumberInput: privateComponentTextInputCardNumberInput,
   privateComponentTextInputIdNumberInput: privateComponentTextInputIdNumberInput,
   privateComponentTextInputInput: privateComponentTextInputInput,
@@ -9475,7 +9514,6 @@ var FIGMA_COMPONENTS = {
   privateComponentTextInputInputReadOnly: privateComponentTextInputInputReadOnly,
   privateComponentTextInputPrefix: privateComponentTextInputPrefix,
   privateComponentTextInputSuffix: privateComponentTextInputSuffix,
-  privateComponentTextarea: privateComponentTextarea,
   privateComponentTextareaInput: privateComponentTextareaInput,
   privateComponentTextareaInputDisabled: privateComponentTextareaInputDisabled,
   privateComponentTextareaInputReadOnly: privateComponentTextareaInputReadOnly,
@@ -9484,7 +9522,6 @@ var FIGMA_COMPONENTS = {
   privateComponentTopNavigationTitle: privateComponentTopNavigationTitle,
   privateComponentTopNavigationTitleLeft: privateComponentTopNavigationTitleLeft,
   privateComponentTopNavigationTitleRight: privateComponentTopNavigationTitleRight,
-  privateComponentUnderlineTextInput: privateComponentUnderlineTextInput,
   privateComponentUnderlineTextInputInput: privateComponentUnderlineTextInputInput,
   privateComponentUnderlineTextInputInputDisabled: privateComponentUnderlineTextInputInputDisabled,
   privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
@@ -9498,13 +9535,14 @@ var FIGMA_COMPONENTS = {
   privateTemplateRootTopNavigationPreset: privateTemplateRootTopNavigationPreset,
   templateButtonGroup: templateButtonGroup,
   templateChatScreenPreset: templateChatScreenPreset,
-  templateCheckboxGroupField: templateCheckboxGroupField,
+  templateCheckboxField: templateCheckboxField,
   templateChipGroup: templateChipGroup,
   templateDeprecatedChipGroup: templateDeprecatedChipGroup,
   templateDisclaimer: templateDisclaimer,
   templateFieldButton: templateFieldButton,
-  templateRadioGroupField: templateRadioGroupField,
+  templateRadioField: templateRadioField,
   templateResultPage: templateResultPage,
+  templateSelectBoxField: templateSelectBoxField,
   templateSkeletonPreset: templateSkeletonPreset,
   templateSliderField: templateSliderField,
   templateTextField: templateTextField,
@@ -9512,7 +9550,7 @@ var FIGMA_COMPONENTS = {
   templateTopNavigationPreset: templateTopNavigationPreset
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$z } = createLocalSnippetHelper("action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$A } = createLocalSnippetHelper("action-button");
 const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionButton.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
@@ -9553,7 +9591,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionB
             variant: camelCase(props.Variant.value),
             layout
         };
-        return createLocalSnippetElement$z("ActionButton", commonProps, children);
+        return createLocalSnippetElement$A("ActionButton", commonProps, children);
     });
 const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(componentActionButtonGhostButton.key, (node)=>{
         const props = node.componentProperties;
@@ -9610,28 +9648,28 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(componentAc
                 bleedY: "asPadding"
             }
         };
-        return createLocalSnippetElement$z("ActionButton", commonProps, children);
+        return createLocalSnippetElement$A("ActionButton", commonProps, children);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$y } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElement$z } = createLocalSnippetHelper("alert-dialog");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$3 } = createLocalSnippetHelper("action-button");
 const createAlertDialogHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
     const actionButtonGhostHandler = createActionButtonGhostHandler(ctx);
     return defineComponentHandler(componentAlertDialog.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const alertDialogHeader = createLocalSnippetElement$y("AlertDialogHeader", undefined, [
+        const alertDialogHeader = createLocalSnippetElement$z("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
-                createLocalSnippetElement$y("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
+                createLocalSnippetElement$z("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
             ] : [],
-            createLocalSnippetElement$y("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
+            createLocalSnippetElement$z("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
         ]);
         const footerNodes = findAllInstances({
             node,
             key: privateComponentAlertDialogActions.key
         });
         if (footerNodes.length === 0 || footerNodes.length > 1) {
-            return createLocalSnippetElement$y("AlertDialog", undefined, alertDialogHeader, {
+            return createLocalSnippetElement$z("AlertDialog", undefined, alertDialogHeader, {
                 comment: "Footer 영역을 확인해주세요."
             });
         }
@@ -9662,14 +9700,14 @@ const createAlertDialogHandler = (ctx)=>{
             ];
             return createSeedReactElement("VStack", footerNodeProps, buttons);
         }).exhaustive();
-        const alertDialogFooter = createLocalSnippetElement$y("AlertDialogFooter", undefined, alertDialogFooterChildren);
-        return createLocalSnippetElement$y("AlertDialogRoot", {
+        const alertDialogFooter = createLocalSnippetElement$z("AlertDialogFooter", undefined, alertDialogFooterChildren);
+        return createLocalSnippetElement$z("AlertDialogRoot", {
             open: true
         }, [
-            createLocalSnippetElement$y("AlertDialogTrigger", {
+            createLocalSnippetElement$z("AlertDialogTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$3("ActionButton", {}, "AlertDialog 열기")),
-            createLocalSnippetElement$y("AlertDialogContent", undefined, [
+            createLocalSnippetElement$z("AlertDialogContent", undefined, [
                 alertDialogHeader,
                 alertDialogFooter
             ])
@@ -9677,22 +9715,78 @@ const createAlertDialogHandler = (ctx)=>{
     });
 };
 
+const privateTemplateAddressPickerField = {
+    "key": "4af06df28eca43fe2be5fe5ba5e6019587de9fac"
+};
+const privateTemplateDatePickerField = {
+    "key": "c161d1326a1087258e4f762aa3c378c098308d98"
+};
+const privateTemplateSelectField = {
+    "key": "a2138764f60a9b5a35e22ff40bc6cd701c660260"
+};
+const privateTemplateTimePickerField = {
+    "key": "e38df17cf1e0f96e09774b015739dfde30d46115"
+};
+const privateComponentBottomSheetContentsPlaceholder = {
+    "key": "e68b006d572300d3c987776192c8ab387fa45e05"
+};
 const privateComponentTopNavigationLeftIconButton = {
     "key": "c3e708bab11d8ea90a909b4539b6ba6b2a4e7b9c"};
 const componentChipSuffixIcon = {
     "key": "2f79e3c5a78315c854d7bd4499d142cfcc94548f"};
+const componentListItemPrefixAvatar = {
+    "key": "27e33754113178be97e07195528c4ea020b3d3b7"
+};
+const componentListItemPrefixCheckbox = {
+    "key": "563275de82ea1282cece0c35c0cd8d1625bc3a9d"
+};
+const componentListItemPrefixCustom = {
+    "key": "b8059f5e0f85e0745fc61ff70f04571177c2cdfc"
+};
 const componentListItemPrefixIcon = {
     "key": "6c03690f1ce9f6c8b2fcdf4a7c57784f6cca12b9"};
+const componentListItemPrefixImage = {
+    "key": "d06216ff143a960844799c0b8f9212628f78c69d"
+};
+const componentListItemPrefixRadiomark = {
+    "key": "51f7c0917ebc559d81e63d0639cb632a792f40de"
+};
+const componentListItemSuffixCheckbox = {
+    "key": "385ba8d607029e15e0d38ab415f783016488b185"
+};
 const componentListItemSuffixChevron = {
     "key": "259054ad63bb89ca119c7f45ddad6452acc731f2"};
 const componentListItemSuffixChevronWithText = {
     "key": "7bd907ab44dff56fb07317c7b74d7ad9377994f0"};
+const componentListItemSuffixCustom = {
+    "key": "26b86c9f8965d38aa5a1181a5cdc89fa487988d1"
+};
 const componentListItemSuffixIcon = {
     "key": "b7582e74a4bae29df8bc3f81368e528701a75855"};
+const componentListItemSuffixRadiomark = {
+    "key": "09871d64c5c30407da586fb34425c2e83e147c81"
+};
+const componentListItemSuffixSwitch = {
+    "key": "0c26bd64e117e168b06eea69be903e4be762a728"
+};
 const componentPageBannerSuffixAction = {
     "key": "1bbd6fff9a32b4211bbe3eeb09fde4e12e87caed"};
+const componentSelectBoxItemPrefixAvatar = {
+    "key": "3d1ea583297f35880d9ec588326d9b82608565cc"
+};
+const componentSelectBoxItemPrefixBadge = {
+    "key": "d8c60ae70dee3a35795d83a9fd68282c0a90b554"
+};
+const componentSelectBoxItemPrefixCustom = {
+    "key": "8129b7b7804c8b22cf67d42df2383c1f5152298e"
+};
+const componentSelectBoxItemPrefixIcon = {
+    "key": "7184053a74eef18503170d08a1bdb74d37cbb65f"};
+const componentSelectBoxItemPrefixImage = {
+    "key": "d4a3d2da63f6da1552f5d8f947105390248c9018"
+};
 
-const { createLocalSnippetElement: createLocalSnippetElement$x } = createLocalSnippetHelper("app-bar");
+const { createLocalSnippetElement: createLocalSnippetElement$y } = createLocalSnippetHelper("app-bar");
 const createAppBarMainHandler = (_ctx)=>{
     return defineComponentHandler(privateComponentTopNavigationTitle.key, ({ componentProperties: props })=>{
         const { title, subtitle } = match(props.Type.value).with("Title", ()=>({
@@ -9706,12 +9800,12 @@ const createAppBarMainHandler = (_ctx)=>{
                 subtitle: undefined
             })).exhaustive();
         if (title) {
-            return createLocalSnippetElement$x("AppBarMain", {
+            return createLocalSnippetElement$y("AppBarMain", {
                 title,
                 subtitle
             });
         }
-        return createLocalSnippetElement$x("AppBarMain", undefined, undefined, {
+        return createLocalSnippetElement$y("AppBarMain", undefined, undefined, {
             comment: "AppBarMain 내부를 직접 작성해주세요."
         });
     });
@@ -9738,33 +9832,33 @@ const createAppBarHandler = (ctx)=>{
             return appBarMainHandler.transform(mainNode, traverse);
         })();
         const leftChildren = match(props.Left.value).with("None", ()=>undefined).with("Back", ()=>[
-                createLocalSnippetElement$x("AppBarBackButton")
+                createLocalSnippetElement$y("AppBarBackButton")
             ]).with("Close", ()=>[
-                createLocalSnippetElement$x("AppBarCloseButton")
+                createLocalSnippetElement$y("AppBarCloseButton")
             ]).with("Custom", ()=>{
             const buttons = findAllInstances({
                 node,
                 key: privateComponentTopNavigationLeftIconButton.key
             });
             if (buttons.length > 0) {
-                return buttons.map((button)=>createLocalSnippetElement$x("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
+                return buttons.map((button)=>createLocalSnippetElement$y("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
                         comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
                     }));
             }
             return undefined;
         }).exhaustive();
-        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$x("AppBarLeft", {}, leftChildren) : undefined;
+        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$y("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: privateComponentTopNavigationRightIconButton.key
             });
-            return buttons.map((button)=>createLocalSnippetElement$x("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]), {
+            return buttons.map((button)=>createLocalSnippetElement$y("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$x("AppBarRight", {}, rightChildren) : undefined;
-        return createLocalSnippetElement$x("AppBar", {
+        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$y("AppBarRight", {}, rightChildren) : undefined;
+        return createLocalSnippetElement$y("AppBar", {
             theme,
             tone
         }, [
@@ -9779,15 +9873,15 @@ const createAppBarHandler = (ctx)=>{
 
 // hardcoded since this lives in a different figma file
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
-const { createLocalSnippetElement: createLocalSnippetElement$w } = createLocalSnippetHelper("identity-placeholder");
+const { createLocalSnippetElement: createLocalSnippetElement$x } = createLocalSnippetHelper("identity-placeholder");
 const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
-        return createLocalSnippetElement$w("IdentityPlaceholder", commonProps);
+        return createLocalSnippetElement$x("IdentityPlaceholder", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$v } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$w } = createLocalSnippetHelper("avatar");
 const createAvatarHandler = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler();
     return defineComponentHandler(componentAvatar.key, (node, traverse)=>{
@@ -9810,7 +9904,7 @@ const createAvatarHandler = (ctx)=>{
             },
             size: props.Size.value
         };
-        return createLocalSnippetElement$v("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$v("AvatarBadge", {
+        return createLocalSnippetElement$w("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$w("AvatarBadge", {
             asChild: true
         }, createElement("img", {
             src: "https://placehold.co/20x20"
@@ -9822,7 +9916,7 @@ const createAvatarHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$u } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$v } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
     return defineComponentHandler(componentAvatarStack.key, (node, traverse)=>{
@@ -9835,7 +9929,7 @@ const createAvatarStackHandler = (ctx)=>{
             size: props.Size.value
         };
         const avatarStackChildren = avatarNodes.map((avatarNode)=>avatarHandler.transform(avatarNode, traverse));
-        return createLocalSnippetElement$u("AvatarStack", commonProps, avatarStackChildren);
+        return createLocalSnippetElement$v("AvatarStack", commonProps, avatarStackChildren);
     });
 };
 
@@ -9848,11 +9942,8 @@ const createBadgeHandler = (_ctx)=>defineComponentHandler(componentBadge.key, ({
         return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$t } = createLocalSnippetHelper("bottom-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$u } = createLocalSnippetHelper("bottom-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$2 } = createLocalSnippetHelper("action-button");
-// TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
-const BOTTOM_SHEET_FOOTER_KEY = "6475aac366b2b18edf8cbabff4f84a9f1619253a";
-const BOTTOM_SHEET_BODY_KEY = "e68b006d572300d3c987776192c8ab387fa45e05";
 const createBottomSheetHandler = (_ctx)=>defineComponentHandler(componentBottomSheet.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();
@@ -9866,34 +9957,35 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(componentBottomS
         };
         const bodyNodes = findAllInstances({
             node,
-            key: BOTTOM_SHEET_BODY_KEY
+            key: privateComponentBottomSheetContentsPlaceholder.key
         });
-        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$t("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$t("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
+        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$u("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$u("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
         const footerNodes = findAllInstances({
             node,
-            key: BOTTOM_SHEET_FOOTER_KEY
+            // TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
+            key: componentBottomActionBarFigmaOnly.key
         });
-        const bottomSheetFooter = props["Show Footer#25162:14"].value && footerNodes.length === 1 ? createLocalSnippetElement$t("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
-        return createLocalSnippetElement$t("BottomSheetRoot", {
+        const bottomSheetFooter = props["Show Footer#25162:14"].value && footerNodes.length === 1 ? createLocalSnippetElement$u("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
+        return createLocalSnippetElement$u("BottomSheetRoot", {
             defaultOpen: true,
             headerAlign
         }, [
-            createLocalSnippetElement$t("BottomSheetTrigger", {
+            createLocalSnippetElement$u("BottomSheetTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$2("ActionButton", {}, "BottomSheet 열기")),
-            createLocalSnippetElement$t("BottomSheetContent", contentProps, [
+            createLocalSnippetElement$u("BottomSheetContent", contentProps, [
                 bottomSheetBody,
                 bottomSheetFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$s } = createLocalSnippetHelper("callout");
+const { createLocalSnippetElement: createLocalSnippetElement$t } = createLocalSnippetHelper("callout");
 const createCalloutHandler = (ctx)=>defineComponentHandler(componentCallout.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$s(tag, undefined, undefined, {
+            return createLocalSnippetElement$t(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -9945,10 +10037,98 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(componentCallout.key,
                 prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#35087:0"])
             }
         };
-        return createLocalSnippetElement$s(tag, commonProps);
+        return createLocalSnippetElement$t(tag, commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$r } = createLocalSnippetHelper("checkbox");
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */ const createFieldHeaderHandler = (ctx)=>{
+    const indicatorHandler = createFieldIndicatorHandler();
+    return defineComponentHandler(componentFieldHeader.key, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const [indicator] = findAllInstances({
+            node,
+            key: indicatorHandler.key
+        });
+        // only returns some nice common props for Slider, TextField and more
+        return createSeedReactElement("__FieldHeader__", {
+            label: props["Label#34796:0"].value,
+            labelWeight: camelCase(props.Weight.value),
+            ...indicator && indicatorHandler.transform(indicator, traverse).props
+        });
+    });
+};
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */ const createFieldIndicatorHandler = (_ctx)=>{
+    return defineComponentHandler(privateComponentFieldHeaderIndicator.key, ({ componentProperties: props })=>{
+        const { required, showRequiredIndicator, indicator } = match(props.Type.value).with("Required Mark", ()=>({
+                required: true,
+                showRequiredIndicator: true,
+                indicator: undefined
+            })).with("Text", ()=>({
+                required: undefined,
+                showRequiredIndicator: undefined,
+                indicator: props["Required Label#40606:3"].value
+            })).exhaustive();
+        // only returns some nice common props for Slider, TextField and more
+        return createSeedReactElement("__FieldIndicator__", {
+            required,
+            showRequiredIndicator,
+            indicator
+        });
+    });
+};
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */ const createFieldFooterHandler = (ctx)=>{
+    const characterCountHandler = createFieldCharacterCountHandler();
+    return defineComponentHandler(componentFieldFooter.key, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const { description, maxGraphemeCount } = match(props.Type.value).with("Description", ()=>({
+                description: props["Text#2770:0"].value,
+                maxGraphemeCount: undefined
+            })).with("Description With Character Count", ()=>({
+                description: props["Text#2770:0"].value,
+                maxGraphemeCount: undefined
+            })).with("Character Count", ()=>{
+            const [characterCount] = findAllInstances({
+                node,
+                key: characterCountHandler.key
+            });
+            return {
+                description: undefined,
+                ...characterCount && characterCountHandler.transform(characterCount, traverse).props
+            };
+        }).exhaustive();
+        const { errorMessage, invalid } = match(props.Error.value === "true").with(true, ()=>({
+                invalid: true,
+                errorMessage: props["Error Text#32821:0"].value
+            })).with(false, ()=>({
+                invalid: undefined,
+                errorMessage: undefined
+            })).exhaustive();
+        // only returns some nice common props for Slider, TextField and more
+        return createSeedReactElement("__FieldFooter__", {
+            description,
+            maxGraphemeCount,
+            invalid,
+            errorMessage
+        });
+    });
+};
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */ const createFieldCharacterCountHandler = (_ctx)=>{
+    return defineComponentHandler(privateComponentFieldFooterCharacterCount.key, ({ componentProperties: props })=>{
+        // only returns some nice common props for Slider, TextField and more
+        return createSeedReactElement("__FieldCharacterCount__", {
+            maxGraphemeCount: Number(props["Max Count#40960:4"].value)
+        });
+    });
+};
+
+const { createLocalSnippetElement: createLocalSnippetElement$s } = createLocalSnippetHelper("checkbox");
 const createCheckboxHandler = (_ctx)=>defineComponentHandler(componentCheckbox.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -9968,10 +10148,55 @@ const createCheckboxHandler = (_ctx)=>defineComponentHandler(componentCheckbox.k
                 disabled: true
             }
         };
-        return createLocalSnippetElement$r("Checkbox", commonProps);
+        return createLocalSnippetElement$s("Checkbox", commonProps, undefined, {
+            comment: "CheckboxGroup으로 묶어서 사용하는 것을 권장합니다."
+        });
+    });
+const createCheckboxGroupFieldHandler = (ctx)=>{
+    const checkboxHandler = createCheckboxHandler();
+    const fieldHeaderHandler = createFieldHeaderHandler();
+    const fieldFooterHandler = createFieldFooterHandler();
+    return defineComponentHandler(templateCheckboxField.key, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const items = findAllInstances({
+            node,
+            key: checkboxHandler.key
+        });
+        const [fieldHeader] = findAllInstances({
+            node,
+            key: fieldHeaderHandler.key
+        });
+        const [fieldFooter] = findAllInstances({
+            node,
+            key: fieldFooterHandler.key
+        });
+        // maxGraphemeCount / required / invalid can't be props of CheckboxGroup
+        const { required: _required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
+        const { maxGraphemeCount: _maxGraphemeCount, invalid: _invalid, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
+        const commonProps = {
+            ...headerProps,
+            ...footerProps
+        };
+        return createLocalSnippetElement$s("CheckboxGroup", commonProps, items.map((item)=>{
+            const result = checkboxHandler.transform(item, traverse);
+            return {
+                ...result,
+                meta: {
+                    ...result.meta,
+                    // remove comment from individual Checkbox items
+                    comment: undefined
+                }
+            };
+        }), {
+            comment: [
+                headerProps.label ? undefined : "label을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+                footerProps.errorMessage ? "errorMessage를 표시하는 경우, 접근성을 위해 개별 Checkbox 중 무효한 항목에 invalid를 설정해주세요." : undefined
+            ].filter(Boolean).join(" ")
+        });
     });
+};
 
-const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("checkbox");
+const { createLocalSnippetElement: createLocalSnippetElement$r } = createLocalSnippetHelper("checkbox");
 const createCheckmarkHandler = (_ctx)=>defineComponentHandler(componentCheckmark.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -9979,13 +10204,13 @@ const createCheckmarkHandler = (_ctx)=>defineComponentHandler(componentCheckmark
             variant: camelCase(props.Shape.value),
             size: handleSizeProp(props.Size.value)
         };
-        return createLocalSnippetElement$q("Checkmark", commonProps);
+        return createLocalSnippetElement$r("Checkmark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("chip");
+const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("chip");
 const createChipIconSuffixHandler = (ctx)=>{
     return defineComponentHandler(componentChipSuffixIcon.key, ({ componentProperties })=>{
-        return createLocalSnippetElement$p("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
+        return createLocalSnippetElement$q("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
             svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"])
         }));
     });
@@ -9995,17 +10220,17 @@ const createChipHandler = (ctx)=>{
     const iconSuffixHandler = createChipIconSuffixHandler(ctx);
     return defineComponentHandler(componentChip.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$p("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
+        const prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$q("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
             }))).with("Avatar", ()=>{
             const [avatar] = findAllInstances({
                 node,
-                key: componentAvatar.key
+                key: avatarHandler.key
             });
             if (!avatar) return undefined;
-            return createLocalSnippetElement$p("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar, traverse));
+            return createLocalSnippetElement$q("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar, traverse));
         }).exhaustive();
-        const label = createLocalSnippetElement$p("Chip.Label", undefined, props["Label#7185:0"].value);
+        const label = createLocalSnippetElement$q("Chip.Label", undefined, props["Label#7185:0"].value);
         const [suffixIcon] = findAllInstances({
             node,
             key: componentChipSuffixIcon.key
@@ -10021,7 +10246,7 @@ const createChipHandler = (ctx)=>{
                 disabled: true
             }
         };
-        return createLocalSnippetElement$p("Chip.Toggle", commonProps, [
+        return createLocalSnippetElement$q("Chip.Toggle", commonProps, [
             prefix,
             label,
             suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined
@@ -10031,7 +10256,7 @@ const createChipHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("contextual-floating-button");
+const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("contextual-floating-button");
 const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(componentContextualFloatingButton.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
@@ -10060,7 +10285,7 @@ const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(comp
             variant: match(props.Variant.value).with("Solid", ()=>"solid").with("Layer", ()=>"layer").exhaustive(),
             layout
         };
-        return createLocalSnippetElement$o("ContextualFloatingButton", commonProps, children);
+        return createLocalSnippetElement$p("ContextualFloatingButton", commonProps, children);
     });
 
 const createDividerHandler = (_ctx)=>defineComponentHandler(componentDivider.key, ({ componentProperties: props })=>{
@@ -10076,102 +10301,7 @@ const createDividerHandler = (_ctx)=>defineComponentHandler(componentDivider.key
         return createSeedReactElement("Divider", commonProps, undefined);
     });
 
-/**
- * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
- */ const createFieldHeaderHandler = (ctx)=>{
-    const indicatorHandler = createFieldIndicatorHandler();
-    return defineComponentHandler(privateComponentFieldHeader.key, (node, traverse)=>{
-        const { componentProperties: props } = node;
-        const [indicator] = findAllInstances({
-            node,
-            key: privateComponentFieldHeaderIndicator.key
-        });
-        // only returns some nice common props for Slider, TextField and more
-        return createSeedReactElement("__FieldHeader__", {
-            label: props["Label#34796:0"].value,
-            labelWeight: camelCase(props.Weight.value),
-            ...indicator && indicatorHandler.transform(indicator, traverse).props
-        });
-    });
-};
-/**
- * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
- */ const createFieldIndicatorHandler = (_ctx)=>{
-    return defineComponentHandler(privateComponentFieldHeaderIndicator.key, ({ componentProperties: props })=>{
-        const { required, showRequiredIndicator, indicator } = match(props.Type.value).with("Required Mark", ()=>({
-                required: true,
-                showRequiredIndicator: true,
-                indicator: undefined
-            })).with("Text", ()=>({
-                required: undefined,
-                showRequiredIndicator: undefined,
-                indicator: props["Required Label#40606:3"].value
-            })).exhaustive();
-        // only returns some nice common props for Slider, TextField and more
-        return createSeedReactElement("__FieldIndicator__", {
-            required,
-            showRequiredIndicator,
-            indicator
-        });
-    });
-};
-/**
- * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
- */ const createFieldFooterHandler = (ctx)=>{
-    const characterCountHandler = createFieldCharacterCountHandler();
-    return defineComponentHandler(privateComponentFieldFooter.key, (node, traverse)=>{
-        const { componentProperties: props } = node;
-        const { description, maxGraphemeCount } = match(props.Type.value).with("Description", ()=>({
-                description: props["Text#2770:0"].value,
-                maxGraphemeCount: undefined
-            })).with("Description With Character Count", ()=>({
-                description: props["Text#2770:0"].value,
-                maxGraphemeCount: undefined
-            })).with("Character Count", ()=>{
-            const [characterCount] = findAllInstances({
-                node,
-                key: privateComponentFieldFooterCharacterCount.key
-            });
-            return {
-                description: undefined,
-                ...characterCount && characterCountHandler.transform(characterCount, traverse).props
-            };
-        }).exhaustive();
-        const { errorMessage, invalid } = match(props.Error.value === "true").with(true, ()=>({
-                invalid: true,
-                errorMessage: props["Error Text#32821:0"].value
-            })).with(false, ()=>({
-                invalid: undefined,
-                errorMessage: undefined
-            })).exhaustive();
-        // only returns some nice common props for Slider, TextField and more
-        return createSeedReactElement("__FieldFooter__", {
-            description,
-            maxGraphemeCount,
-            invalid,
-            errorMessage
-        });
-    });
-};
-/**
- * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
- */ const createFieldCharacterCountHandler = (_ctx)=>{
-    return defineComponentHandler(privateComponentFieldFooterCharacterCount.key, ({ componentProperties: props })=>{
-        // only returns some nice common props for Slider, TextField and more
-        return createSeedReactElement("__FieldCharacterCount__", {
-            maxGraphemeCount: Number(props["Max Count#40960:4"].value)
-        });
-    });
-};
-
-const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("field-button");
-// published but taken down now
-const FIELD_BUTTON_KEYS = {
-    selectField: "a2138764f60a9b5a35e22ff40bc6cd701c660260",
-    datePickerField: "c161d1326a1087258e4f762aa3c378c098308d98",
-    timePickerField: "e38df17cf1e0f96e09774b015739dfde30d46115",
-    addressPickerField: "4af06df28eca43fe2be5fe5ba5e6019587de9fac"
-};
+const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("field-button");
 const createFieldButtonHandler = (ctx)=>{
     const fieldHeaderHandler = createFieldHeaderHandler();
     const fieldFooterHandler = createFieldFooterHandler();
@@ -10179,7 +10309,7 @@ const createFieldButtonHandler = (ctx)=>{
         const props = node.componentProperties;
         const [inputButton] = findAllInstances({
             node,
-            key: privateComponentInputButton.key
+            key: componentInputButton.key
         });
         const [clearButton] = findAllInstances({
             node,
@@ -10187,15 +10317,15 @@ const createFieldButtonHandler = (ctx)=>{
         });
         const [fieldHeader] = findAllInstances({
             node,
-            key: privateComponentFieldHeader.key
+            key: componentFieldHeader.key
         });
         const [fieldFooter] = findAllInstances({
             node,
-            key: privateComponentFieldFooter.key
+            key: componentFieldFooter.key
         });
         // maxGraphemeCount and required can't be props of FieldButton
-        const { required: __required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
-        const { maxGraphemeCount: __maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
+        const { required: _required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
+        const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
         const [prefix] = findAllInstances({
             node: inputButton,
             key: privateComponentInputButtonPrefix.key
@@ -10227,11 +10357,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$n("FieldButton", {
+        return createLocalSnippetElement$o("FieldButton", {
             ...headerProps,
             ...footerProps,
             ...commonProps
-        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$n("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$n("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
+        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$o("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$o("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
             comment: "buttonProps를 통해 aria-label을 제공하세요."
         });
     });
@@ -10239,7 +10369,7 @@ const createFieldButtonHandler = (ctx)=>{
 // TODO: those 4 are basically the same
 const createSelectFieldHandler = (ctx)=>{
     const fieldButtonHandler = createFieldButtonHandler(ctx);
-    return defineComponentHandler(FIELD_BUTTON_KEYS.selectField, (node, traverse)=>{
+    return defineComponentHandler(privateTemplateSelectField.key, (node, traverse)=>{
         const [fieldButton] = findAllInstances({
             node,
             key: fieldButtonHandler.key
@@ -10249,7 +10379,7 @@ const createSelectFieldHandler = (ctx)=>{
 };
 const createDatePickerFieldHandler = (ctx)=>{
     const fieldButtonHandler = createFieldButtonHandler(ctx);
-    return defineComponentHandler(FIELD_BUTTON_KEYS.datePickerField, (node, traverse)=>{
+    return defineComponentHandler(privateTemplateDatePickerField.key, (node, traverse)=>{
         const [fieldButton] = findAllInstances({
             node,
             key: fieldButtonHandler.key
@@ -10259,7 +10389,7 @@ const createDatePickerFieldHandler = (ctx)=>{
 };
 const createTimePickerFieldHandler = (ctx)=>{
     const fieldButtonHandler = createFieldButtonHandler(ctx);
-    return defineComponentHandler(FIELD_BUTTON_KEYS.timePickerField, (node, traverse)=>{
+    return defineComponentHandler(privateTemplateTimePickerField.key, (node, traverse)=>{
         const [fieldButton] = findAllInstances({
             node,
             key: fieldButtonHandler.key
@@ -10269,7 +10399,7 @@ const createTimePickerFieldHandler = (ctx)=>{
 };
 const createAddressFieldHandler = (ctx)=>{
     const fieldButtonHandler = createFieldButtonHandler(ctx);
-    return defineComponentHandler(FIELD_BUTTON_KEYS.addressPickerField, (node, traverse)=>{
+    return defineComponentHandler(privateTemplateAddressPickerField.key, (node, traverse)=>{
         const [fieldButton] = findAllInstances({
             node,
             key: fieldButtonHandler.key
@@ -10278,7 +10408,7 @@ const createAddressFieldHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("floating-action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("floating-action-button");
 const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(componentFloatingActionButton.key, (node)=>{
         const [button] = findAllInstances({
             node,
@@ -10300,10 +10430,10 @@ const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(componen
                 label: menu.componentProperties["Label#29766:9"].value
             };
         })();
-        return createLocalSnippetElement$m("FloatingActionButton", commonProps);
+        return createLocalSnippetElement$n("FloatingActionButton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("help-bubble");
+const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("help-bubble");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$1 } = createLocalSnippetHelper("action-button");
 const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(componentHelpBubble.key, ({ componentProperties: props })=>{
         const placement = (()=>{
@@ -10343,12 +10473,12 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(componentHelpBubb
             showCloseButton: props["Show Close Button#40538:0"].value,
             placement
         };
-        return createLocalSnippetElement$l("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"), {
+        return createLocalSnippetElement$m("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"), {
             comment: "필요에 따라 HelpBubbleAnchor로 변경하여 사용하세요."
         });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("select-box");
+const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("select-box");
 const createLegacySelectBoxHandler = (_ctx)=>defineComponentHandler(componentDeprecatedSelectBox.key, ({ componentProperties: props })=>{
         const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
         const commonProps = {
@@ -10363,7 +10493,7 @@ const createLegacySelectBoxHandler = (_ctx)=>defineComponentHandler(componentDep
                 defaultChecked: true
             }
         };
-        return createLocalSnippetElement$k(tag, commonProps, undefined, {
+        return createLocalSnippetElement$l(tag, commonProps, undefined, {
             comment: "이 Figma 컴포넌트는 @seed-design/react@1.2보다 낮은 버전의 SelectBox입니다. 신규 컴포넌트로 교체할 수 있습니다."
         });
     });
@@ -10388,13 +10518,13 @@ const createLegacySelectBoxGroupHandler = (ctx)=>{
                 defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
             }
         };
-        return createLocalSnippetElement$k(tag, commonProps, stack, {
+        return createLocalSnippetElement$l(tag, commonProps, stack, {
             comment: "이 Figma 컴포넌트는 @seed-design/react@1.2보다 낮은 버전의 SelectBox입니다. 신규 컴포넌트로 교체할 수 있습니다."
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("text-field");
+const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("text-field");
 const createLegacyTextFieldHandler = (ctx)=>defineComponentHandler(componentDeprecatedTextField.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("-");
@@ -10449,8 +10579,8 @@ const createLegacyTextFieldHandler = (ctx)=>defineComponentHandler(componentDepr
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createLocalSnippetElement$j("TextFieldInput", inputProps);
-        return createLocalSnippetElement$j("TextField", commonProps, TextFieldChildren, {
+        const TextFieldChildren = createLocalSnippetElement$k("TextFieldInput", inputProps);
+        return createLocalSnippetElement$k("TextField", commonProps, TextFieldChildren, {
             comment: "이 Figma 컴포넌트는 @seed-design/react@1.1보다 낮은 버전의 TextField입니다. 신규 컴포넌트로 교체할 수 있습니다."
         });
     });
@@ -10495,40 +10625,40 @@ const createLegacyMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(com
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createLocalSnippetElement$j("TextFieldTextarea", inputProps);
-        return createLocalSnippetElement$j("TextField", commonProps, TextFieldChildren, {
+        const TextFieldChildren = createLocalSnippetElement$k("TextFieldTextarea", inputProps);
+        return createLocalSnippetElement$k("TextField", commonProps, TextFieldChildren, {
             comment: "이 Figma 컴포넌트는 @seed-design/react@1.1보다 낮은 버전의 TextField입니다. 신규 컴포넌트로 교체할 수 있습니다."
         });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("list-header");
+const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("list-header");
 const createListHeaderHandler = (_ctx)=>defineComponentHandler(componentListHeader.key, ({ componentProperties: props })=>{
         const commonProps = {
             variant: camelCase(props["Variant"].value)
         };
-        return createLocalSnippetElement$i("ListHeader", commonProps, props["Title#28588:0"].value);
+        return createLocalSnippetElement$j("ListHeader", commonProps, props["Title#28588:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("list");
-const PREFIX_KEYS = {
-    checkmark: "563275de82ea1282cece0c35c0cd8d1625bc3a9d",
-    radiomark: "51f7c0917ebc559d81e63d0639cb632a792f40de",
-    icon: componentListItemPrefixIcon.key,
-    avatar: "27e33754113178be97e07195528c4ea020b3d3b7",
-    image: "d06216ff143a960844799c0b8f9212628f78c69d",
-    custom: "b8059f5e0f85e0745fc61ff70f04571177c2cdfc"
-};
-const SUFFIX_KEYS = {
-    checkmark: "385ba8d607029e15e0d38ab415f783016488b185",
-    radiomark: "09871d64c5c30407da586fb34425c2e83e147c81",
-    chevron: componentListItemSuffixChevron.key,
-    switch: "0c26bd64e117e168b06eea69be903e4be762a728",
-    custom: "26b86c9f8965d38aa5a1181a5cdc89fa487988d1",
-    icon: componentListItemSuffixIcon.key,
-    chevronWithText: componentListItemSuffixChevronWithText.key,
-    iconButton: componentListItemSuffixIconButton.key,
-    actionButton: componentListItemSuffixActionButton.key
-};
+const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("list");
+const PREFIX_KEYS$1 = [
+    componentListItemPrefixCheckbox.key,
+    componentListItemPrefixRadiomark.key,
+    componentListItemPrefixIcon.key,
+    componentListItemPrefixAvatar.key,
+    componentListItemPrefixImage.key,
+    componentListItemPrefixCustom.key
+];
+const SUFFIX_KEYS = [
+    componentListItemSuffixCheckbox.key,
+    componentListItemSuffixRadiomark.key,
+    componentListItemSuffixChevron.key,
+    componentListItemSuffixSwitch.key,
+    componentListItemSuffixCustom.key,
+    componentListItemSuffixIcon.key,
+    componentListItemSuffixChevronWithText.key,
+    componentListItemSuffixIconButton.key,
+    componentListItemSuffixActionButton.key
+];
 const createListItemHandler = (ctx)=>defineComponentHandler(componentListItem.key, (node, traverse)=>{
         const { componentProperties: props } = node;
         const { alignItems, title } = match(props.Variants.value).with("Single Line", ()=>({
@@ -10541,7 +10671,7 @@ const createListItemHandler = (ctx)=>defineComponentHandler(componentListItem.ke
         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)){
+            for (const key of PREFIX_KEYS$1){
                 const [found] = findAllInstances({
                     node,
                     key
@@ -10561,7 +10691,7 @@ const createListItemHandler = (ctx)=>defineComponentHandler(componentListItem.ke
         })();
         const suffixNode = (()=>{
             if (props["Has Suffix#28452:64"].value === false) return null;
-            for (const key of Object.values(SUFFIX_KEYS)){
+            for (const key of SUFFIX_KEYS){
                 const [found] = findAllInstances({
                     node,
                     key
@@ -10619,37 +10749,37 @@ const createListItemHandler = (ctx)=>defineComponentHandler(componentListItem.ke
             }
         };
         const comment = match(tag).with("ListItem", ()=>"목적에 따라 ListButtonItem이나 ListLinkItem으로 바꿔 사용하세요.").with("ListCheckItem", ()=>`<List as="fieldset">과 함께 사용하세요.`).with("ListRadioItem", ()=>"<RadioGroup.Root>와 함께 사용하세요.").otherwise(()=>undefined);
-        const list = createLocalSnippetElement$h(tag, commonProps, undefined, {
+        const list = createLocalSnippetElement$i(tag, commonProps, undefined, {
             comment
         });
         if (props["Divider#28441:0"].value) {
             return createElement("", {}, [
                 list,
-                createLocalSnippetElement$h("ListDivider")
+                createLocalSnippetElement$i("ListDivider")
             ]);
         }
         return list;
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("manner-temp");
+const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("manner-temp");
 const createMannerTempHandler = (_ctx)=>defineComponentHandler(componentMannerTemp.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("manner-temp-badge");
+const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("manner-temp-badge");
 const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(componentMannerTempBadge.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createLocalSnippetElement$f("MannerTempBadge", commonProps);
+        return createLocalSnippetElement$g("MannerTempBadge", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("menu-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger } = createLocalSnippetHelper("action-button");
 const createMenuSheetItemHandler = (ctx)=>defineComponentHandler(privateComponentMenuSheetMenuItem.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -10666,7 +10796,7 @@ const createMenuSheetItemHandler = (ctx)=>defineComponentHandler(privateComponen
                 description: props["Sub Text#51411:0"].value
             }
         };
-        return createLocalSnippetElement$e("MenuSheetItem", commonProps);
+        return createLocalSnippetElement$f("MenuSheetItem", commonProps);
     });
 const createMenuSheetGroupHandler = (ctx)=>{
     const menuSheetItemHandler = createMenuSheetItemHandler(ctx);
@@ -10676,7 +10806,7 @@ const createMenuSheetGroupHandler = (ctx)=>{
             key: menuSheetItemHandler.key
         });
         const contentChildren = items.map((item)=>menuSheetItemHandler.transform(item, traverse));
-        return createLocalSnippetElement$e("MenuSheetGroup", undefined, contentChildren);
+        return createLocalSnippetElement$f("MenuSheetGroup", undefined, contentChildren);
     });
 };
 const createMenuSheetHandler = (ctx)=>{
@@ -10695,24 +10825,24 @@ const createMenuSheetHandler = (ctx)=>{
             })).with("Text Only", ()=>({
                 labelAlign: "center"
             })).exhaustive();
-        const content = createLocalSnippetElement$e("MenuSheetContent", {
+        const content = createLocalSnippetElement$f("MenuSheetContent", {
             title,
             description,
             labelAlign
         }, contentChildren, {
             comment: title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
-        const trigger = createLocalSnippetElement$e("MenuSheetTrigger", {
+        const trigger = createLocalSnippetElement$f("MenuSheetTrigger", {
             asChild: true
         }, createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"));
-        return createLocalSnippetElement$e("MenuSheet", undefined, [
+        return createLocalSnippetElement$f("MenuSheet", undefined, [
             trigger,
             content
         ]);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("page-banner");
+const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("page-banner");
 const createPageBannerButtonHandler = (_ctx)=>defineComponentHandler(componentPageBannerSuffixAction.key, (node)=>{
         return createElement("PageBannerButton", undefined, node.componentProperties["Label#39890:0"].value);
     });
@@ -10745,7 +10875,7 @@ const createPageBannerHandler = (ctx)=>{
             })).exhaustive();
         const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Text");
         if (!textNode) {
-            return createLocalSnippetElement$d(tag, undefined, undefined, {
+            return createLocalSnippetElement$e(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -10778,11 +10908,11 @@ const createPageBannerHandler = (ctx)=>{
                 suffix
             }
         };
-        return createLocalSnippetElement$d(tag, commonProps);
+        return createLocalSnippetElement$e(tag, commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("progress-circle");
+const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("progress-circle");
 const createProgressCircleHandler = (_ctx)=>defineComponentHandler(componentProgressCircle.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
@@ -10814,10 +10944,10 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(componentProg
                 tone: camelCase(props.Tone.value)
             }
         };
-        return createLocalSnippetElement$c("ProgressCircle", commonProps);
+        return createLocalSnippetElement$d("ProgressCircle", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("radio-group");
 const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(componentRadio.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -10830,20 +10960,64 @@ const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(componentRadi
             tone,
             weight: camelCase(props.Weight.value)
         };
-        return createLocalSnippetElement$b("RadioGroupItem", commonProps);
+        return createLocalSnippetElement$c("RadioGroupItem", commonProps, undefined, {
+            comment: "RadioGroup으로 묶어서 사용하세요."
+        });
+    });
+const createRadioGroupFieldHandler = (ctx)=>{
+    const radioItemHandler = createRadioGroupItemHandler();
+    const fieldHeaderHandler = createFieldHeaderHandler();
+    const fieldFooterHandler = createFieldFooterHandler();
+    return defineComponentHandler(templateRadioField.key, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const items = findAllInstances({
+            node,
+            key: radioItemHandler.key
+        });
+        const [fieldHeader] = findAllInstances({
+            node,
+            key: fieldHeaderHandler.key
+        });
+        const [fieldFooter] = findAllInstances({
+            node,
+            key: fieldFooterHandler.key
+        });
+        // maxGraphemeCount and required can't be props of RadioGroup
+        const { required: _required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
+        const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
+        const selectedItem = items.find((item)=>item.componentProperties.Selected.value === "True");
+        const commonProps = {
+            ...headerProps,
+            ...footerProps,
+            ...selectedItem && {
+                defaultValue: selectedItem.componentProperties["Label#49990:171"].value
+            }
+        };
+        return createLocalSnippetElement$c("RadioGroup", commonProps, items.map((item)=>{
+            const result = radioItemHandler.transform(item, traverse);
+            return {
+                ...result,
+                meta: {
+                    ...result.meta,
+                    // remove comment from individual RadioGroupItem items
+                    comment: undefined
+                }
+            };
+        }));
     });
+};
 
-const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("radio-group");
 const createRadiomarkHandler = (_ctx)=>defineComponentHandler(componentRadiomark.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$a("Radiomark", commonProps);
+        return createLocalSnippetElement$b("Radiomark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("reaction-button");
+const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("reaction-button");
 const createReactionButtonHandler = (ctx)=>defineComponentHandler(componentReactionButton.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
@@ -10857,7 +11031,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(componentReact
                 defaultPressed: true
             }
         };
-        return createLocalSnippetElement$9("ReactionButton", commonProps, [
+        return createLocalSnippetElement$a("ReactionButton", commonProps, [
             createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#12379:0"])
             }),
@@ -10866,7 +11040,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(componentReact
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("result-section");
+const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("result-section");
 const createResultSectionHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
     const ghostButtonHandler = createActionButtonGhostHandler(ctx);
@@ -10904,11 +11078,11 @@ const createResultSectionHandler = (ctx)=>{
                 }
             }
         };
-        return createLocalSnippetElement$8("ResultSection", commonProps);
+        return createLocalSnippetElement$9("ResultSection", commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("segmented-control");
+const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("segmented-control");
 const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(privateComponentSegmentedControlItem.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
@@ -10917,7 +11091,7 @@ const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(private
                 disabled: true
             }
         };
-        return createLocalSnippetElement$7("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+        return createLocalSnippetElement$8("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
     });
 const createSegmentedControlHandler = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler();
@@ -10933,12 +11107,245 @@ const createSegmentedControlHandler = (ctx)=>{
                 defaultValue: selectedSegment.componentProperties["Label#11366:15"].value
             }
         };
-        return createLocalSnippetElement$7("SegmentedControl", commonProps, segmentedControlChildren, {
+        return createLocalSnippetElement$8("SegmentedControl", commonProps, segmentedControlChildren, {
             comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
     });
 };
 
+const PREFIX_KEYS = [
+    componentSelectBoxItemPrefixIcon.key,
+    componentSelectBoxItemPrefixAvatar.key,
+    componentSelectBoxItemPrefixImage.key,
+    componentSelectBoxItemPrefixBadge.key,
+    componentSelectBoxItemPrefixCustom.key
+];
+const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("select-box");
+const createSelectBoxHorizontalHandler = (ctx)=>defineComponentHandler(componentSelectBoxItemHorizontal.key, (node)=>{
+        const { componentProperties: props } = node;
+        const { tag, suffix } = match(props.Control.value).with("Checkmark", ()=>({
+                tag: "CheckSelectBox",
+                suffix: createLocalSnippetElement$7("CheckSelectBoxCheckmark")
+            })).with("Radiomark", ()=>({
+                tag: "RadioSelectBoxItem",
+                suffix: createLocalSnippetElement$7("RadioSelectBoxRadiomark")
+            })).with("None", ()=>({
+                tag: "UnknownSelectBox",
+                suffix: undefined
+            })).exhaustive();
+        const prefixNode = (()=>{
+            if (props["Has Prefix#28452:85"].value === false) return null;
+            for (const key of PREFIX_KEYS){
+                const [found] = findAllInstances({
+                    node,
+                    key
+                });
+                if (found) return found;
+            }
+            return null;
+        })();
+        const prefixIcon = (()=>{
+            if (!prefixNode) return undefined;
+            if ("Icon#2475:0" in prefixNode.componentProperties) {
+                return ctx.iconHandler.transform(prefixNode.componentProperties["Icon#2475:0"]);
+            }
+            // React Select Box only supports icon for now
+            // return undefined if not icon
+            return undefined;
+        })();
+        const commonProps = {
+            // layout: "horizontal",
+            ...prefixIcon && {
+                prefixIcon
+            },
+            label: props["Title#28452:21"].value,
+            ...props["Show Description#28469:1"].value && {
+                description: props["Description#56540:0"].value
+            },
+            ...suffix && {
+                suffix
+            },
+            ...props["Show Custom Content#56903:0"].value && {
+                footer: createSeedReactElement("Box", undefined, "Footer Placeholder")
+            },
+            ...tag === "RadioSelectBoxItem" && {
+                value: props["Title#28452:21"].value
+            },
+            ...tag === "CheckSelectBox" && props.Selected.value === "True" && {
+                defaultChecked: true
+            },
+            ...props.State.value === "Disabled" && {
+                disabled: true
+            }
+        };
+        return createLocalSnippetElement$7(tag, commonProps, undefined);
+    });
+const createSelectBoxVerticalHandler = (ctx)=>defineComponentHandler(componentSelectBoxItemVertical.key, (node)=>{
+        const { componentProperties: props } = node;
+        const { tag, suffix } = match(props.Control.value).with("Checkmark", ()=>({
+                tag: "CheckSelectBox",
+                suffix: createLocalSnippetElement$7("CheckSelectBoxCheckmark")
+            })).with("Radiomark", ()=>({
+                tag: "RadioSelectBoxItem",
+                suffix: createLocalSnippetElement$7("RadioSelectBoxRadiomark")
+            })).with("None", ()=>({
+                tag: "UnknownSelectBox",
+                suffix: undefined
+            })).exhaustive();
+        const prefixNode = (()=>{
+            if (props["Has Prefix#58766:115"].value === false) return null;
+            for (const key of PREFIX_KEYS){
+                const [found] = findAllInstances({
+                    node,
+                    key
+                });
+                if (found) return found;
+            }
+            return null;
+        })();
+        const prefixIcon = (()=>{
+            if (!prefixNode) return undefined;
+            if ("Icon#2475:0" in prefixNode.componentProperties) {
+                return ctx.iconHandler.transform(prefixNode.componentProperties["Icon#2475:0"]);
+            }
+            // React Select Box only supports icon for now
+            // return undefined if not icon
+            return undefined;
+        })();
+        const commonProps = {
+            // layout: "vertical",
+            ...prefixIcon && {
+                prefixIcon
+            },
+            label: props["Title#58766:114"].value,
+            ...props["Show Description#58766:117"].value && {
+                description: props["Description#58766:118"].value
+            },
+            ...suffix && {
+                suffix
+            },
+            ...props["Show Custom Content#58766:119"].value && {
+                footer: createSeedReactElement("Box", undefined, "Footer Placeholder")
+            },
+            ...tag === "RadioSelectBoxItem" && {
+                value: props["Title#58766:114"].value
+            },
+            ...tag === "CheckSelectBox" && props.Selected.value === "True" && {
+                defaultChecked: true
+            },
+            ...props.State.value === "Disabled" && {
+                disabled: true
+            }
+        };
+        return createLocalSnippetElement$7(tag, commonProps, undefined);
+    });
+const createSelectBoxGroupHandler = (ctx)=>{
+    const horizontalHandler = createSelectBoxHorizontalHandler(ctx);
+    const verticalHandler = createSelectBoxVerticalHandler(ctx);
+    return defineComponentHandler(componentSelectBoxGroup.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const horizontalBoxes = findAllInstances({
+            node,
+            key: horizontalHandler.key
+        });
+        const verticalBoxes = findAllInstances({
+            node,
+            key: verticalHandler.key
+        });
+        const boxes = [
+            ...horizontalBoxes,
+            ...verticalBoxes
+        ];
+        const selectedSelectBox = boxes.find((selectBox)=>selectBox.componentProperties.Selected.value === "True");
+        const { tag, comment } = match([
+            boxes.every((box)=>box.componentProperties.Control.value === "Radiomark"),
+            boxes.every((box)=>box.componentProperties.Control.value === "Checkmark")
+        ]).with([
+            true,
+            false
+        ], ()=>({
+                tag: "RadioSelectBoxRoot",
+                comment: undefined
+            })).with([
+            false,
+            true
+        ], ()=>({
+                tag: "CheckSelectBoxGroup",
+                comment: undefined
+            })).otherwise(()=>({
+                tag: "UnknownSelectBoxGroup",
+                comment: "모든 SelectBox의 Control 프로퍼티가 동일하지 않거나 None이 포함되어 있기 때문에 코드에서 어떻게 사용될지 파악할 수 없습니다. 모든 children 요소들을 CheckSelectBox 또는 RadioSelectBoxItem으로 변경하고 CheckSelectBoxGroup 또는 RadioSelectBoxRoot로 묶어 사용하세요."
+            }));
+        const selectedSelectBoxProperties = selectedSelectBox?.componentProperties;
+        const commonProps = {
+            columns: Number(props.Column.value[0]),
+            ...selectedSelectBoxProperties && tag === "RadioSelectBoxRoot" && {
+                defaultValue: "Title#28452:21" in selectedSelectBoxProperties ? selectedSelectBoxProperties["Title#28452:21"].value : selectedSelectBoxProperties["Title#58766:114"].value
+            }
+        };
+        const children = [
+            ...horizontalBoxes.map((box)=>horizontalHandler.transform(box, traverse)),
+            ...verticalBoxes.map((box)=>verticalHandler.transform(box, traverse))
+        ];
+        return createLocalSnippetElement$7(tag, commonProps, children, {
+            comment
+        });
+    });
+};
+const createSelectBoxGroupFieldHandler = (ctx)=>{
+    const fieldHeaderHandler = createFieldHeaderHandler();
+    const fieldFooterHandler = createFieldFooterHandler();
+    const selectBoxGroupHandler = createSelectBoxGroupHandler(ctx);
+    return defineComponentHandler(templateSelectBoxField.key, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const [group] = findAllInstances({
+            node,
+            key: selectBoxGroupHandler.key
+        });
+        const [fieldHeader] = findAllInstances({
+            node,
+            key: fieldHeaderHandler.key
+        });
+        const [fieldFooter] = findAllInstances({
+            node,
+            key: fieldFooterHandler.key
+        });
+        const __headerProps = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
+        const __footerProps = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
+        const groupResult = selectBoxGroupHandler.transform(group, traverse);
+        const { headerProps, footerProps } = match(groupResult.tag).with("RadioSelectBoxRoot", ()=>{
+            const { required: _required, ...headerProps } = __headerProps;
+            const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } = __footerProps;
+            return {
+                headerProps,
+                footerProps
+            };
+        }).with("CheckSelectBoxGroup", ()=>{
+            const { required: _required, ...headerProps } = __headerProps;
+            const { maxGraphemeCount: _maxGraphemeCount, invalid: _invalid, ...footerProps } = __footerProps;
+            return {
+                headerProps,
+                footerProps
+            };
+        }).with("UnknownSelectBoxGroup", ()=>{
+            const { required: _required, ...headerProps } = __headerProps;
+            const { maxGraphemeCount: _maxGraphemeCount, invalid: _invalid, ...footerProps } = __footerProps;
+            return {
+                headerProps,
+                footerProps
+            };
+        }).exhaustive();
+        return {
+            ...groupResult,
+            props: {
+                ...groupResult.props,
+                ...headerProps,
+                ...footerProps
+            }
+        };
+    });
+};
+
 const createSkeletonHandler = (ctx)=>defineComponentHandler(componentSkeleton.key, (node)=>{
         const { componentProperties: props, layoutSizingHorizontal, layoutSizingVertical } = node;
         const commonProps = {
@@ -10965,20 +11372,20 @@ const createSliderFieldHandler = (ctx)=>{
         const props = node.componentProperties;
         const [slider] = findAllInstances({
             node,
-            key: componentSlider.key
+            key: sliderHandler.key
         });
         const [fieldHeader] = findAllInstances({
             node,
-            key: privateComponentFieldHeader.key
+            key: fieldHeaderHandler.key
         });
         const [fieldFooter] = findAllInstances({
             node,
-            key: privateComponentFieldFooter.key
+            key: fieldFooterHandler.key
         });
         const sliderProps = sliderHandler.transform(slider, traverse).props;
         // maxGraphemeCount and required can't be props of Slider
-        const { required: __required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
-        const { maxGraphemeCount: __maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
+        const { required: _required, ...headerProps } = props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {};
+        const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } = props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {};
         const commonProps = {
             ...sliderProps,
             ...headerProps,
@@ -11087,14 +11494,14 @@ const createTabsHandler = (_ctx)=>{
         const elementNode = match(props.Variant.value).with("Line", ()=>{
             const [wrapper] = findAllInstances({
                 node,
-                key: privateComponentTabsLine.key
+                key: lineHandler.key
             });
             if (!wrapper) throw new Error("Line Tab wrapper not found");
             return lineHandler.transform(wrapper, traverse);
         }).with("Chip", ()=>{
             const [wrapper] = findAllInstances({
                 node,
-                key: privateComponentTabsChip.key
+                key: chipHandler.key
             });
             if (!wrapper) throw new Error("Chip Tab wrapper not found");
             return chipHandler.transform(wrapper, traverse);
@@ -11129,7 +11536,7 @@ const createTabsHandler = (_ctx)=>{
         const { triggers, defaultValue } = match(props.Layout.value).with("Hug", ()=>{
             const nodes = findAllInstances({
                 node,
-                key: privateComponentTabItemLineHug.key
+                key: hugHandler.key
             });
             return {
                 triggers: nodes.map((node)=>({
@@ -11141,7 +11548,7 @@ const createTabsHandler = (_ctx)=>{
         }).with("Fill", ()=>{
             const nodes = findAllInstances({
                 node,
-                key: privateComponentTabItemLineFill.key
+                key: fillHandler.key
             });
             return {
                 triggers: nodes.map((node)=>({
@@ -11218,7 +11625,7 @@ const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(privateCompo
         const props = node.componentProperties;
         const nodes = findAllInstances({
             node,
-            key: privateComponentTabItemChip.key
+            key: triggerHandler.key
         });
         const triggers = nodes.map((node)=>{
             // this is redundant; can this be better?
@@ -11285,7 +11692,7 @@ const createTagGroupHandler = (ctx)=>{
     return defineComponentHandler(componentTagGroup.key, (node, traverse)=>{
         const itemNodes = findAllInstances({
             node,
-            key: privateComponentItemTag.key
+            key: itemHandler.key
         });
         const items = itemNodes.map((itemNode)=>itemHandler.transform(itemNode, traverse));
         if (items.length === 0) {
@@ -11346,19 +11753,19 @@ const createTextInputFieldHandler = (ctx)=>{
         const props = node.componentProperties;
         const [textInputOutline] = findAllInstances({
             node,
-            key: privateComponentTextInput.key
+            key: componentTextInput.key
         });
         const [textInputUnderline] = findAllInstances({
             node,
-            key: privateComponentUnderlineTextInput.key
+            key: componentUnderlineTextInput.key
         });
         const [fieldHeader] = findAllInstances({
             node,
-            key: privateComponentFieldHeader.key
+            key: fieldHeaderHandler.key
         });
         const [fieldFooter] = findAllInstances({
             node,
-            key: privateComponentFieldFooter.key
+            key: fieldFooterHandler.key
         });
         const fieldProps = {
             ...props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {},
@@ -11458,15 +11865,15 @@ const createTextareaFieldHandler = (ctx)=>{
     return defineComponentHandler(templateTextareaField.key, (node, traverse)=>{
         const [textarea] = findAllInstances({
             node,
-            key: privateComponentTextarea.key
+            key: componentTextarea.key
         });
         const [fieldHeader] = findAllInstances({
             node,
-            key: privateComponentFieldHeader.key
+            key: fieldHeaderHandler.key
         });
         const [fieldFooter] = findAllInstances({
             node,
-            key: privateComponentFieldFooter.key
+            key: fieldFooterHandler.key
         });
         const fieldProps = {
             ...fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {},
@@ -11537,6 +11944,7 @@ var currentHandlers = {
   createBadgeHandler: createBadgeHandler,
   createBottomSheetHandler: createBottomSheetHandler,
   createCalloutHandler: createCalloutHandler,
+  createCheckboxGroupFieldHandler: createCheckboxGroupFieldHandler,
   createCheckboxHandler: createCheckboxHandler,
   createCheckmarkHandler: createCheckmarkHandler,
   createChipHandler: createChipHandler,
@@ -11544,14 +11952,11 @@ var currentHandlers = {
   createDatePickerFieldHandler: createDatePickerFieldHandler,
   createDividerHandler: createDividerHandler,
   createFieldButtonHandler: createFieldButtonHandler,
-  createFieldFooterHandler: createFieldFooterHandler,
-  createFieldHeaderHandler: createFieldHeaderHandler,
   createFloatingActionButtonHandler: createFloatingActionButtonHandler,
   createHelpBubbleHandler: createHelpBubbleHandler,
   createIdentityPlaceholderHandler: createIdentityPlaceholderHandler,
   createLegacyMultilineTextFieldHandler: createLegacyMultilineTextFieldHandler,
   createLegacySelectBoxGroupHandler: createLegacySelectBoxGroupHandler,
-  createLegacySelectBoxHandler: createLegacySelectBoxHandler,
   createLegacyTextFieldHandler: createLegacyTextFieldHandler,
   createListHeaderHandler: createListHeaderHandler,
   createListItemHandler: createListItemHandler,
@@ -11560,11 +11965,14 @@ var currentHandlers = {
   createMenuSheetHandler: createMenuSheetHandler,
   createPageBannerHandler: createPageBannerHandler,
   createProgressCircleHandler: createProgressCircleHandler,
+  createRadioGroupFieldHandler: createRadioGroupFieldHandler,
   createRadioGroupItemHandler: createRadioGroupItemHandler,
   createRadiomarkHandler: createRadiomarkHandler,
   createReactionButtonHandler: createReactionButtonHandler,
   createResultSectionHandler: createResultSectionHandler,
   createSegmentedControlHandler: createSegmentedControlHandler,
+  createSelectBoxGroupFieldHandler: createSelectBoxGroupFieldHandler,
+  createSelectBoxGroupHandler: createSelectBoxGroupHandler,
   createSelectFieldHandler: createSelectFieldHandler,
   createSkeletonHandler: createSkeletonHandler,
   createSliderFieldHandler: createSliderFieldHandler,
@@ -11574,7 +11982,6 @@ var currentHandlers = {
   createSwitchmarkHandler: createSwitchmarkHandler,
   createTabsHandler: createTabsHandler,
   createTagGroupHandler: createTagGroupHandler,
-  createTagGroupItemHandler: createTagGroupItemHandler,
   createTextInputFieldHandler: createTextInputFieldHandler,
   createTextareaFieldHandler: createTextareaFieldHandler,
   createTimePickerFieldHandler: createTimePickerFieldHandler,