@seed-design/figma 1.0.7 → 1.1.2

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

@@ -885,7 +885,7 @@ function createStrokePropsConverter(valueResolver) {
 }
 
 const SEED_REACT_IMPORT_PATH = "@seed-design/react";
-const LOCAL_SNIPPET_BASE_PATH = "@/seed-design/ui";
+const LOCAL_SNIPPET_BASE_PATH = "seed-design/ui";
 const MONOCHROME_ICON_IMPORT_PATH = "@karrotmarket/react-monochrome-icon";
 const MULTICOLOR_ICON_IMPORT_PATH = "@karrotmarket/react-multicolor-icon";
 function createSeedReactElement(tag, props, children, meta) {
@@ -989,6 +989,18 @@ function createFrameTransformer({ propsConverters }) {
     });
 }
 
+const OVERRIDE_ACCEPTABLE_PROPERTIES = new Set([
+    "characters",
+    "parent",
+    "locked",
+    "visible",
+    "name",
+    "x",
+    "y",
+    "componentProperties",
+    "componentPropertyDefinitions",
+    "componentPropertyReferences"
+]);
 function createInstanceTransformer({ iconHandler, propsConverters, componentHandlers, frameTransformer }) {
     const transform = defineElementTransformer((node, traverse)=>{
         const { componentKey, componentSetKey } = node;
@@ -1006,12 +1018,15 @@ function createInstanceTransformer({ iconHandler, propsConverters, componentHand
         if (componentHandler) {
             const handled = componentHandler.transform(node, traverse);
             if (node.overrides && node.overrides.length > 0) {
-                const overriddenFields = node.overrides.flatMap(({ overriddenFields })=>overriddenFields);
+                const overriddenFields = node.overrides.flatMap(({ overriddenFields })=>overriddenFields).filter((field)=>OVERRIDE_ACCEPTABLE_PROPERTIES.has(field) === false);
+                if (overriddenFields.length === 0) {
+                    return handled;
+                }
                 return {
                     ...handled,
                     meta: {
                         ...handled.meta,
-                        comment: `${handled.meta.comment ? `${handled.meta.comment} ` : ""}오버라이드된 필드: ${overriddenFields.join(", ")}`
+                        comment: `${handled.meta.comment ? `${handled.meta.comment} ` : ""}오버라이드된 필드: ${Array.from(new Set(overriddenFields)).join(", ")}`
                     }
                 };
             }
@@ -1143,11 +1158,39 @@ const templateCompletion = {
         }
     }
 };
+const templateCustomPickerField = {
+    "name": "templateCustomPickerField",
+    "key": "91d73dfc297a467d78dc91ade6ff9be9a152619e",
+    "componentPropertyDefinitions": {
+        "Show Header#40606:8": {
+            "type": "BOOLEAN"
+        },
+        "Show Footer#40606:9": {
+            "type": "BOOLEAN"
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Error",
+                "Disabled",
+                "Read Only"
+            ]
+        },
+        "Has Value": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "False",
+                "True"
+            ]
+        }
+    }
+};
 const templateErrorState = {
     "name": "templateErrorState",
     "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
     "componentPropertyDefinitions": {
-        "Show Buttons#9080:5": {
+        "Show Action Button#9080:5": {
             "type": "BOOLEAN"
         },
         "Title#16237:0": {
@@ -1156,9 +1199,6 @@ const templateErrorState = {
         "Description#16237:5": {
             "type": "TEXT"
         },
-        "Secondary Action Label#17042:0": {
-            "type": "TEXT"
-        },
         "Variant": {
             "type": "VARIANT",
             "variantOptions": [
@@ -1199,6 +1239,83 @@ const templateSelectBoxGroup = {
         }
     }
 };
+const templateSliderField = {
+    "name": "templateSliderField",
+    "key": "7d2b449bcfb28ebf3c509ed76a141511f7d955eb",
+    "componentPropertyDefinitions": {
+        "Show Header#40606:8": {
+            "type": "BOOLEAN"
+        },
+        "Show Footer#40606:9": {
+            "type": "BOOLEAN"
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Error",
+                "Disabled",
+                "Read Only",
+                "Pressed"
+            ]
+        }
+    }
+};
+const templateTextField = {
+    "name": "templateTextField",
+    "key": "0a83a0ff9d18d98a14536b21aa5411622f9f0c05",
+    "componentPropertyDefinitions": {
+        "Show Header#40606:8": {
+            "type": "BOOLEAN"
+        },
+        "Show Footer#40606:9": {
+            "type": "BOOLEAN"
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Outline",
+                "Underline"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Focused",
+                "Error",
+                "Error Focused",
+                "Disabled",
+                "Read Only",
+                "AI Loading (Figma Only)"
+            ]
+        }
+    }
+};
+const templateTextareaField = {
+    "name": "templateTextareaField",
+    "key": "cdc688eccd78b947289e8089a620bdc494f6c809",
+    "componentPropertyDefinitions": {
+        "Show Header#40606:8": {
+            "type": "BOOLEAN"
+        },
+        "Show Footer#40606:9": {
+            "type": "BOOLEAN"
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Focused",
+                "Error",
+                "Error Focused",
+                "Disabled",
+                "Read Only",
+                "AI Loading (Figma Only)"
+            ]
+        }
+    }
+};
 const templateTopNavigation = {
     "name": "templateTopNavigation",
     "key": "74f045c1972dc31d0fddd0a0027537b6779cd0e8",
@@ -1488,6 +1605,9 @@ const bottomSheet = {
         "Show Safe Area#25488:8": {
             "type": "BOOLEAN"
         },
+        "Show Handle#49774:6": {
+            "type": "BOOLEAN"
+        },
         "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
@@ -1867,8 +1987,8 @@ const listHeader = {
             "type": "VARIANT",
             "variantOptions": [
                 "None",
-                "Button",
-                "Custom"
+                "Custom",
+                "Button"
             ]
         },
         "Variant": {
@@ -2159,74 +2279,6 @@ const menuSheet = {
         }
     }
 };
-const multilineTextField = {
-    "name": "multilineTextField",
-    "key": "88b2399c930c85f9ce2972163a078bc684b84bbe",
-    "componentPropertyDefinitions": {
-        "Show Header#870:0": {
-            "type": "BOOLEAN"
-        },
-        "Placeholder#958:0": {
-            "type": "TEXT"
-        },
-        "Show Footer#958:25": {
-            "type": "BOOLEAN"
-        },
-        "Show Description#958:50": {
-            "type": "BOOLEAN"
-        },
-        "Show Character count#958:75": {
-            "type": "BOOLEAN"
-        },
-        "Show Indicator#1259:0": {
-            "type": "BOOLEAN"
-        },
-        "Filled Text#1304:0": {
-            "type": "TEXT"
-        },
-        "Max Character Count#15327:175": {
-            "type": "TEXT"
-        },
-        "Description#15327:212": {
-            "type": "TEXT"
-        },
-        "Indicator#15327:286": {
-            "type": "TEXT"
-        },
-        "Label#15327:323": {
-            "type": "TEXT"
-        },
-        "Character Count#15327:360": {
-            "type": "TEXT"
-        },
-        "Size": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Medium",
-                "Large",
-                "XLarge"
-            ]
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Focused",
-                "Invalid",
-                "Invalid-Focused",
-                "Disabled",
-                "Read Only"
-            ]
-        },
-        "Filled": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "True",
-                "False"
-            ]
-        }
-    }
-};
 const pageBanner = {
     "name": "pageBanner",
     "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
@@ -2389,37 +2441,6 @@ const radioMark = {
         }
     }
 };
-const rangeSlider = {
-    "name": "rangeSlider",
-    "key": "64fc49184979e0be40aa367ca98868601eb7dad5",
-    "componentPropertyDefinitions": {
-        "Steps": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "0",
-                "1",
-                "2",
-                "3",
-                "4"
-            ]
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Disabled"
-            ]
-        },
-        "Marker": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "None",
-                "Min Max",
-                "All"
-            ]
-        }
-    }
-};
 const reactionButton = {
     "name": "reactionButton",
     "key": "ec43e4e881f7048e95601f8b58c01a0905a174e0",
@@ -2498,6 +2519,28 @@ const resizableChild = {
         }
     }
 };
+const scrollFog = {
+    "name": "scrollFog",
+    "key": "0a06ea65fe164e0245fde6ac6c97135990a4de3c",
+    "componentPropertyDefinitions": {
+        "Orientation": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Top ⬇️",
+                "Bottom ⬆️",
+                "Right ➡️",
+                "Left ⬅️"
+            ]
+        },
+        "Layer": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Floating"
+            ]
+        }
+    }
+};
 const segmentedControl = {
     "name": "segmentedControl",
     "key": "3ad7133ba52755867f42f9232375f75639e00d58",
@@ -2572,32 +2615,31 @@ const skeleton = {
 };
 const slider = {
     "name": "slider",
-    "key": "aee027230a478315e380704c4523141e67e464ee",
+    "key": "c748f314f790eb804138bd105bfb0bd0584c9aa1",
     "componentPropertyDefinitions": {
-        "Steps": {
+        "Has Tick Mark#47921:0": {
+            "type": "BOOLEAN"
+        },
+        "Show Active Track#48156:0": {
+            "type": "BOOLEAN"
+        },
+        "Show Markers#49596:0": {
+            "type": "BOOLEAN"
+        },
+        "Value": {
             "type": "VARIANT",
             "variantOptions": [
-                "0",
-                "1",
-                "2",
-                "3",
-                "4"
+                "Single",
+                "Range"
             ]
         },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
+                "Pressed",
                 "Disabled"
             ]
-        },
-        "Marker": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "None",
-                "Min Max",
-                "All"
-            ]
         }
     }
 };
@@ -2759,105 +2801,6 @@ const tagGroup = {
         }
     }
 };
-const textField = {
-    "name": "textField",
-    "key": "c49873c37a639f0dffdea4efd0eb43760d66c141",
-    "componentPropertyDefinitions": {
-        "Show Header#870:0": {
-            "type": "BOOLEAN"
-        },
-        "Placeholder#958:0": {
-            "type": "TEXT"
-        },
-        "Show Footer#958:25": {
-            "type": "BOOLEAN"
-        },
-        "Show Description#958:50": {
-            "type": "BOOLEAN"
-        },
-        "Show Character Count#958:75": {
-            "type": "BOOLEAN"
-        },
-        "Show Suffix#958:100": {
-            "type": "BOOLEAN"
-        },
-        "Show Prefix#958:125": {
-            "type": "BOOLEAN"
-        },
-        "Show Indicator#1259:0": {
-            "type": "BOOLEAN"
-        },
-        "Show Prefix Text#1267:0": {
-            "type": "BOOLEAN"
-        },
-        "Prefix Icon#1267:25": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
-        },
-        "Show Prefix Icon#1267:50": {
-            "type": "BOOLEAN"
-        },
-        "Show Suffix Icon#1267:75": {
-            "type": "BOOLEAN"
-        },
-        "Suffix Icon #1267:100": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": []
-        },
-        "Show Suffix Text#1267:125": {
-            "type": "BOOLEAN"
-        },
-        "Filled Text#1304:0": {
-            "type": "TEXT"
-        },
-        "Description#12626:5": {
-            "type": "TEXT"
-        },
-        "Label#14964:0": {
-            "type": "TEXT"
-        },
-        "Max Character Count#15327:27": {
-            "type": "TEXT"
-        },
-        "Character Count#15327:64": {
-            "type": "TEXT"
-        },
-        "Prefix Text#15327:101": {
-            "type": "TEXT"
-        },
-        "Suffix Text#15327:138": {
-            "type": "TEXT"
-        },
-        "Indicator#15327:249": {
-            "type": "TEXT"
-        },
-        "Size": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Medium",
-                "Large(Default)"
-            ]
-        },
-        "State": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Enabled",
-                "Focused",
-                "Invalid",
-                "Invalid-Focused",
-                "Disabled",
-                "Read Only"
-            ]
-        },
-        "Filled": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "True",
-                "False"
-            ]
-        }
-    }
-};
 const toggleButton = {
     "name": "toggleButton",
     "key": "1d240ee5fd7a56879713e69cbea1b6f006f0ea22",
@@ -2953,11 +2896,84 @@ const topNavigation = {
         }
     }
 };
+const actionButtonGhostButton = {
+    "name": "actionButtonGhostButton",
+    "key": "ea69291fb4d76217419f3d9613ae16aadafb56a5",
+    "componentPropertyDefinitions": {
+        "Label#30511:2": {
+            "type": "TEXT"
+        },
+        "Prefix Icon#30511:3": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Suffix Icon#30525:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "c8415f85843e5aea5a1d3620d03d16b643bf86cd"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "0d0a2bc648a2c4e1f06a56a30ef16299b6e91037"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "8f28ae559baf8f388d84ccc3ad65a282966e1b05"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "57341e8a9961bf31590240dd288e57c76969098d"
+                }
+            ]
+        },
+        "Icon#30525:15": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "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"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Loading",
+                "Disabled"
+            ]
+        }
+    }
+};
 
 var FIGMA_COMPONENTS = {
   __proto__: null,
   _switch: _switch,
   actionButton: actionButton,
+  actionButtonGhostButton: actionButtonGhostButton,
   alertDialog: alertDialog,
   avatar: avatar,
   avatarStack: avatarStack,
@@ -2981,15 +2997,14 @@ var FIGMA_COMPONENTS = {
   mannerTemp: mannerTemp,
   mannerTempBadge: mannerTempBadge,
   menuSheet: menuSheet,
-  multilineTextField: multilineTextField,
   pageBanner: pageBanner,
   progressCircle: progressCircle,
   radio: radio,
   radioMark: radioMark,
-  rangeSlider: rangeSlider,
   reactionButton: reactionButton,
   resizableChild: resizableChild,
   resizableIcon: resizableIcon,
+  scrollFog: scrollFog,
   segmentedControl: segmentedControl,
   selectBox: selectBox,
   skeleton: skeleton,
@@ -3003,10 +3018,13 @@ var FIGMA_COMPONENTS = {
   templateButtonGroup: templateButtonGroup,
   templateChipGroup: templateChipGroup,
   templateCompletion: templateCompletion,
+  templateCustomPickerField: templateCustomPickerField,
   templateErrorState: templateErrorState,
   templateSelectBoxGroup: templateSelectBoxGroup,
+  templateSliderField: templateSliderField,
+  templateTextField: templateTextField,
+  templateTextareaField: templateTextareaField,
   templateTopNavigation: templateTopNavigation,
-  textField: textField,
   toggleButton: toggleButton,
   topNavigation: topNavigation
 };
@@ -3029,7 +3047,7 @@ function handleSizeProp(size) {
     }
 }
 
-const { createLocalSnippetElement: createLocalSnippetElement$w } = createLocalSnippetHelper("action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$x } = createLocalSnippetHelper("action-button");
 const createActionButtonHandler = (ctx)=>defineComponentHandler(actionButton.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
@@ -3070,11 +3088,16 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(actionButton.key
             variant: camelCase(props.Variant.value),
             layout
         };
-        return createLocalSnippetElement$w("ActionButton", commonProps, children);
+        return createLocalSnippetElement$x("ActionButton", commonProps, children);
     });
 const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
-const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTTON_GHOST_BUTTON_KEY, ({ componentProperties: props })=>{
+const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTTON_GHOST_BUTTON_KEY, (node)=>{
+        const props = node.componentProperties;
         const states = props.State.value.split("-");
+        const buttonWrapperNode = findOne(node, (n)=>n.type === "FRAME" && n.layoutPositioning !== "ABSOLUTE");
+        const labelNode = buttonWrapperNode ? findOne(buttonWrapperNode, (n)=>n.type === "TEXT") : undefined;
+        const color = labelNode ? ctx.valueResolver.getFormattedValue.textFill(labelNode) : null;
+        const fontWeight = labelNode ? ctx.valueResolver.getFormattedValue.fontWeight(labelNode) : null;
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
                 children: [
@@ -3112,31 +3135,37 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTT
             size: handleSizeProp(props.Size.value),
             variant: "ghost",
             layout,
+            ...color && {
+                color
+            },
+            ...fontWeight && {
+                fontWeight
+            },
             ...props.Bleed.value === "true" && {
                 bleedX: "asPadding",
                 bleedY: "asPadding"
             }
         };
-        return createLocalSnippetElement$w("ActionButton", commonProps, children);
+        return createLocalSnippetElement$x("ActionButton", commonProps, children);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$v } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElement$w } = createLocalSnippetHelper("alert-dialog");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$3 } = createLocalSnippetHelper("action-button");
 const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
 const createAlertDialogHandler = (_ctx)=>defineComponentHandler(alertDialog.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const alertDialogHeader = createLocalSnippetElement$v("AlertDialogHeader", undefined, [
+        const alertDialogHeader = createLocalSnippetElement$w("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
-                createLocalSnippetElement$v("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
+                createLocalSnippetElement$w("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
             ] : [],
-            createLocalSnippetElement$v("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
+            createLocalSnippetElement$w("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$v("AlertDialog", undefined, alertDialogHeader, {
+            return createLocalSnippetElement$w("AlertDialog", undefined, alertDialogHeader, {
                 comment: "Footer 영역을 확인해주세요."
             });
         }
@@ -3144,21 +3173,21 @@ const createAlertDialogHandler = (_ctx)=>defineComponentHandler(alertDialog.key,
         const footerNodeProps = traverse(footerNode)?.props;
         const buttons = footerNode.children.map(traverse);
         const alertDialogFooterChildren = match(footerNode.componentProperties.Type.value).with("Single", ()=>buttons).with("Neutral", "Critical", ()=>createSeedReactElement("ResponsivePair", footerNodeProps, buttons)).with("Neutral (Overflow)", "Critical (Overflow)", "Nonpreferred", ()=>createSeedReactElement("VStack", footerNodeProps, buttons)).exhaustive();
-        const alertDialogFooter = createLocalSnippetElement$v("AlertDialogFooter", undefined, alertDialogFooterChildren);
-        return createLocalSnippetElement$v("AlertDialogRoot", {
+        const alertDialogFooter = createLocalSnippetElement$w("AlertDialogFooter", undefined, alertDialogFooterChildren);
+        return createLocalSnippetElement$w("AlertDialogRoot", {
             open: true
         }, [
-            createLocalSnippetElement$v("AlertDialogTrigger", {
+            createLocalSnippetElement$w("AlertDialogTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$3("ActionButton", {}, "AlertDialog 열기")),
-            createLocalSnippetElement$v("AlertDialogContent", undefined, [
+            createLocalSnippetElement$w("AlertDialogContent", undefined, [
                 alertDialogHeader,
                 alertDialogFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$u } = createLocalSnippetHelper("app-bar");
+const { createLocalSnippetElement: createLocalSnippetElement$v } = 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";
@@ -3175,12 +3204,12 @@ const createAppBarMainHandler = (_ctx)=>{
                 subtitle: undefined
             })).exhaustive();
         if (title) {
-            return createLocalSnippetElement$u("AppBarMain", {
+            return createLocalSnippetElement$v("AppBarMain", {
                 title,
                 subtitle
             });
         }
-        return createLocalSnippetElement$u("AppBarMain", undefined, undefined, {
+        return createLocalSnippetElement$v("AppBarMain", undefined, undefined, {
             comment: "AppBarMain 내부를 직접 작성해주세요."
         });
     });
@@ -3207,33 +3236,33 @@ const createAppBarHandler = (ctx)=>{
             return appBarMainHandler.transform(mainNode, traverse);
         })();
         const leftChildren = match(props.Left.value).with("None", ()=>undefined).with("Back", ()=>[
-                createLocalSnippetElement$u("AppBarBackButton")
+                createLocalSnippetElement$v("AppBarBackButton")
             ]).with("Close", ()=>[
-                createLocalSnippetElement$u("AppBarCloseButton")
+                createLocalSnippetElement$v("AppBarCloseButton")
             ]).with("Custom", ()=>{
             const buttons = findAllInstances({
                 node,
                 key: APP_BAR_LEFT_ICON_BUTTON_KEY
             });
             if (buttons.length > 0) {
-                return buttons.map((button)=>createLocalSnippetElement$u("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
+                return buttons.map((button)=>createLocalSnippetElement$v("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
                         comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
                     }));
             }
             return undefined;
         }).exhaustive();
-        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$u("AppBarLeft", {}, leftChildren) : undefined;
+        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$v("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$u("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]), {
+            return buttons.map((button)=>createLocalSnippetElement$v("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$u("AppBarRight", {}, rightChildren) : undefined;
-        return createLocalSnippetElement$u("AppBar", {
+        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$v("AppBarRight", {}, rightChildren) : undefined;
+        return createLocalSnippetElement$v("AppBar", {
             theme,
             tone
         }, [
@@ -3247,15 +3276,15 @@ const createAppBarHandler = (ctx)=>{
 };
 
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
-const { createLocalSnippetElement: createLocalSnippetElement$t } = createLocalSnippetHelper("identity-placeholder");
+const { createLocalSnippetElement: createLocalSnippetElement$u } = createLocalSnippetHelper("identity-placeholder");
 const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
-        return createLocalSnippetElement$t("IdentityPlaceholder", commonProps);
+        return createLocalSnippetElement$u("IdentityPlaceholder", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$s } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$t } = createLocalSnippetHelper("avatar");
 const createAvatarHandler = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler();
     return defineComponentHandler(avatar.key, (node, traverse)=>{
@@ -3278,7 +3307,7 @@ const createAvatarHandler = (ctx)=>{
             },
             size: props.Size.value
         };
-        return createLocalSnippetElement$s("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$s("AvatarBadge", {
+        return createLocalSnippetElement$t("Avatar", commonProps, props["Badge"].value === "None" ? undefined : createLocalSnippetElement$t("AvatarBadge", {
             asChild: true
         }, createElement("img", {
             src: "https://placehold.co/20x20"
@@ -3290,7 +3319,7 @@ const createAvatarHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$r } = createLocalSnippetHelper("avatar");
+const { createLocalSnippetElement: createLocalSnippetElement$s } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
     return defineComponentHandler(avatarStack.key, (node, traverse)=>{
@@ -3303,7 +3332,7 @@ const createAvatarStackHandler = (ctx)=>{
             size: props.Size.value
         };
         const avatarStackChildren = avatarNodes.map((avatarNode)=>avatarHandler.transform(avatarNode, traverse));
-        return createLocalSnippetElement$r("AvatarStack", commonProps, avatarStackChildren);
+        return createLocalSnippetElement$s("AvatarStack", commonProps, avatarStackChildren);
     });
 };
 
@@ -3316,7 +3345,7 @@ const createBadgeHandler = (_ctx)=>defineComponentHandler(badge.key, ({ componen
         return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("bottom-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$r } = createLocalSnippetHelper("bottom-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$2 } = createLocalSnippetHelper("action-button");
 // TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
 const BOTTOM_SHEET_FOOTER_KEY = "de6c65d34cc4a01c18c9a7c0ded34635170ca11f";
@@ -3329,40 +3358,39 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(bottomSheet.key,
             ...props["Show Description#25192:0"].value === true && {
                 description: props["Description#19787:7"].value
             },
-            ...props["Show Close Button#19787:11"].value === false && {
-                hideCloseButton: true
-            }
+            showHandle: props["Show Handle#49774:6"].value,
+            showCloseButton: props["Show Close Button#19787:11"].value
         };
         const bodyNodes = findAllInstances({
             node,
             key: BOTTOM_SHEET_BODY_KEY
         });
-        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$q("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$q("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
+        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$r("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$r("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
         const footerNodes = findAllInstances({
             node,
             key: BOTTOM_SHEET_FOOTER_KEY
         });
-        const bottomSheetFooter = props["Show Footer#25162:14"] && footerNodes.length === 1 ? createLocalSnippetElement$q("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
-        return createLocalSnippetElement$q("BottomSheetRoot", {
+        const bottomSheetFooter = props["Show Footer#25162:14"] && footerNodes.length === 1 ? createLocalSnippetElement$r("BottomSheetFooter", {}, footerNodes[0].children.map(traverse)) : undefined;
+        return createLocalSnippetElement$r("BottomSheetRoot", {
             defaultOpen: true,
             headerAlign
         }, [
-            createLocalSnippetElement$q("BottomSheetTrigger", {
+            createLocalSnippetElement$r("BottomSheetTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$2("ActionButton", {}, "BottomSheet 열기")),
-            createLocalSnippetElement$q("BottomSheetContent", contentProps, [
+            createLocalSnippetElement$r("BottomSheetContent", contentProps, [
                 bottomSheetBody,
                 bottomSheetFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("callout");
+const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("callout");
 const createCalloutHandler = (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$p(tag, undefined, undefined, {
+            return createLocalSnippetElement$q(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -3414,10 +3442,10 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(callout.key, ({ compo
                 prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#35087:0"])
             }
         };
-        return createLocalSnippetElement$p(tag, commonProps);
+        return createLocalSnippetElement$q(tag, commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("checkbox");
+const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("checkbox");
 const createCheckboxHandler = (_ctx)=>defineComponentHandler(checkbox.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -3437,10 +3465,10 @@ const createCheckboxHandler = (_ctx)=>defineComponentHandler(checkbox.key, ({ co
                 disabled: true
             }
         };
-        return createLocalSnippetElement$o("Checkbox", commonProps);
+        return createLocalSnippetElement$p("Checkbox", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("checkbox");
+const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("checkbox");
 const createCheckmarkHandler = (_ctx)=>defineComponentHandler(checkmark.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -3448,14 +3476,14 @@ const createCheckmarkHandler = (_ctx)=>defineComponentHandler(checkmark.key, ({
             variant: camelCase(props.Shape.value),
             size: handleSizeProp(props.Size.value)
         };
-        return createLocalSnippetElement$n("Checkmark", commonProps);
+        return createLocalSnippetElement$o("Checkmark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("chip");
+const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("chip");
 const CHIP_ICON_SUFFIX_KEY = "27343e0e5ab2c66948e9b10fde03d58b5e037212";
 const createChipIconSuffixHandler = (ctx)=>{
     return defineComponentHandler(CHIP_ICON_SUFFIX_KEY, ({ componentProperties })=>{
-        return createLocalSnippetElement$m("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
+        return createLocalSnippetElement$n("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
             svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"])
         }));
     });
@@ -3465,7 +3493,7 @@ const createChipHandler = (ctx)=>{
     const iconSuffixHandler = createChipIconSuffixHandler(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$m("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
+        const prefix = match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$n("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
             }))).with("Avatar", ()=>{
             const [avatar$1] = findAllInstances({
@@ -3473,9 +3501,9 @@ const createChipHandler = (ctx)=>{
                 key: avatar.key
             });
             if (!avatar$1) return undefined;
-            return createLocalSnippetElement$m("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar$1, traverse));
+            return createLocalSnippetElement$n("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar$1, traverse));
         }).exhaustive();
-        const label = createLocalSnippetElement$m("Chip.Label", undefined, props["Label#7185:0"].value);
+        const label = createLocalSnippetElement$n("Chip.Label", undefined, props["Label#7185:0"].value);
         const [suffixIcon] = findAllInstances({
             node,
             key: CHIP_ICON_SUFFIX_KEY
@@ -3491,7 +3519,7 @@ const createChipHandler = (ctx)=>{
                 disabled: true
             }
         };
-        return createLocalSnippetElement$m("Chip.Toggle", commonProps, [
+        return createLocalSnippetElement$n("Chip.Toggle", commonProps, [
             prefix,
             label,
             suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined
@@ -3501,7 +3529,7 @@ const createChipHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("contextual-floating-button");
+const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("contextual-floating-button");
 const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(contextualFloatingButton.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
@@ -3530,7 +3558,7 @@ const createContextualFloatingButtonHandler = (ctx)=>defineComponentHandler(cont
             variant: match(props.Variant.value).with("Solid", ()=>"solid").with("Layer", ()=>"layer").exhaustive(),
             layout
         };
-        return createLocalSnippetElement$l("ContextualFloatingButton", commonProps, children);
+        return createLocalSnippetElement$m("ContextualFloatingButton", commonProps, children);
     });
 
 const createDividerHandler = (_ctx)=>defineComponentHandler(divider.key, ({ componentProperties: props })=>{
@@ -3546,31 +3574,257 @@ const createDividerHandler = (_ctx)=>defineComponentHandler(divider.key, ({ comp
         return createSeedReactElement("Divider", commonProps, undefined);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("error-state");
+const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("error-state");
 const createErrorStateHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
+    const ghostButtonHandler = createActionButtonGhostHandler(ctx);
     return defineComponentHandler(templateErrorState.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const [actionButtonNode] = findAllInstances({
+        const [actionButton] = findAllInstances({
             node,
             key: actionButtonHandler.key
         });
+        const [ghostButton] = findAllInstances({
+            node,
+            key: ghostButtonHandler.key
+        });
         const commonProps = {
             variant: camelCase(props.Variant.value),
             ...props.Layout.value === "With Title" && {
                 title: props["Title#16237:0"].value
             },
             description: props["Description#16237:5"].value,
-            ...actionButtonNode && {
+            ...actionButton && {
                 primaryActionProps: {
-                    children: actionButtonHandler.transform(actionButtonNode, traverse).children[0]
-                },
+                    children: actionButtonHandler.transform(actionButton, traverse).children[0]
+                }
+            },
+            ...ghostButton && {
                 secondaryActionProps: {
-                    children: props["Secondary Action Label#17042:0"].value
+                    children: ghostButtonHandler.transform(ghostButton, traverse).children[0]
                 }
             }
         };
-        return createLocalSnippetElement$k("ErrorState", commonProps);
+        return createLocalSnippetElement$l("ErrorState", commonProps);
+    });
+};
+
+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";
+const FIELD_CHARACTER_COUNT_KEY = "25dd9a96f4bf3b866b8713f6d8deec370eebfa72";
+const FIELD_KEYS = {
+    HEADER: FIELD_HEADER_KEY,
+    FOOTER: FIELD_FOOTER_KEY
+};
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */ const createFieldHeaderHandler = (ctx)=>{
+    const indicatorHandler = createFieldIndicatorHandler();
+    return defineComponentHandler(FIELD_HEADER_KEY, (node, traverse)=>{
+        const { componentProperties: props } = node;
+        const [indicator] = findAllInstances({
+            node,
+            key: FIELD_INDICATOR_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(FIELD_INDICATOR_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(FIELD_FOOTER_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: FIELD_CHARACTER_COUNT_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(FIELD_CHARACTER_COUNT_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$k } = createLocalSnippetHelper("field-button");
+const INPUT_BUTTON_KEY = "965bdecb58755af9a08d60cc3c8d2d33b42e15f0";
+const INPUT_BUTTON_PREFIX_KEY = "12b40c736a098298c64ba16de85702b4b460d1f1";
+const INPUT_BUTTON_SUFFIX_KEY = "5dda27af9f4afafa471925c17acf97d81912877a";
+const createFieldButtonHandler = (ctx)=>{
+    const fieldHeaderHandler = createFieldHeaderHandler();
+    const fieldFooterHandler = createFieldFooterHandler();
+    return defineComponentHandler(templateCustomPickerField.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const [inputButton] = findAllInstances({
+            node,
+            key: INPUT_BUTTON_KEY
+        });
+        const [clearButton] = findAllInstances({
+            node,
+            key: actionButtonGhostButton.key
+        });
+        const [fieldHeader] = findAllInstances({
+            node,
+            key: FIELD_KEYS.HEADER
+        });
+        const [fieldFooter] = findAllInstances({
+            node,
+            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 [prefix] = findAllInstances({
+            node: inputButton,
+            key: INPUT_BUTTON_PREFIX_KEY
+        });
+        const [suffix] = findAllInstances({
+            node: inputButton,
+            key: INPUT_BUTTON_SUFFIX_KEY
+        });
+        const commonProps = {
+            ...inputButton.componentProperties.State.value === "Disabled" && {
+                disabled: true
+            },
+            ...(inputButton.componentProperties.State.value === "Error" || inputButton.componentProperties.State.value === "Error Pressed") && {
+                invalid: true
+            },
+            ...clearButton && {
+                showClearButton: true
+            },
+            ...inputButton.componentProperties["Has Prefix#32514:10"].value === true && prefix && prefix.componentProperties.Type.value === "Icon" && {
+                prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"])
+            },
+            ...inputButton.componentProperties["Has Suffix#32865:68"].value === true && suffix && suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#37963:0"])
+            },
+            ...inputButton.componentProperties["Has Suffix#32865:68"].value === true && suffix && suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                suffix: suffix.componentProperties["Suffix Text#34021:4"].value
+            }
+        };
+        // 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$k("FieldButton", {
+            ...headerProps,
+            ...footerProps,
+            ...commonProps
+        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$k("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$k("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
+            comment: "buttonProps를 통해 aria-label을 제공하세요."
+        });
+    });
+};
+// TODO: those 4 are basically the same
+const createSelectFieldHandler = (ctx)=>{
+    const fieldButtonHandler = createFieldButtonHandler(ctx);
+    return defineComponentHandler(templateSelectField.key, (node, traverse)=>{
+        const [fieldButton] = findAllInstances({
+            node,
+            key: fieldButtonHandler.key
+        });
+        return fieldButtonHandler.transform(fieldButton, traverse);
+    });
+};
+const createDatePickerFieldHandler = (ctx)=>{
+    const fieldButtonHandler = createFieldButtonHandler(ctx);
+    return defineComponentHandler(templateDatePickerField.key, (node, traverse)=>{
+        const [fieldButton] = findAllInstances({
+            node,
+            key: fieldButtonHandler.key
+        });
+        return fieldButtonHandler.transform(fieldButton, traverse);
+    });
+};
+const createTimePickerFieldHandler = (ctx)=>{
+    const fieldButtonHandler = createFieldButtonHandler(ctx);
+    return defineComponentHandler(templateTimePickerField.key, (node, traverse)=>{
+        const [fieldButton] = findAllInstances({
+            node,
+            key: fieldButtonHandler.key
+        });
+        return fieldButtonHandler.transform(fieldButton, traverse);
+    });
+};
+const createAddressFieldHandler = (ctx)=>{
+    const fieldButtonHandler = createFieldButtonHandler(ctx);
+    return defineComponentHandler(templateAddressPickerField.key, (node, traverse)=>{
+        const [fieldButton] = findAllInstances({
+            node,
+            key: fieldButtonHandler.key
+        });
+        return fieldButtonHandler.transform(fieldButton, traverse);
     });
 };
 
@@ -3857,53 +4111,7 @@ const createMenuSheetHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("text-field");
-const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(multilineTextField.key, ({ componentProperties: props })=>{
-        const { Size: { value: size }, State: { value: state }, Filled: { value: filled }, "Show Header#870:0": { value: showHeader }, "Label#15327:323": { value: label }, "Show Indicator#1259:0": { value: showIndicator }, "Indicator#15327:286": { value: indicator }, "Placeholder#958:0": { value: placeholder }, "Filled Text#1304:0": { value: defaultValue }, "Show Footer#958:25": { value: showFooter }, "Show Description#958:50": { value: showDescription }, "Description#15327:212": { value: description }, "Show Character count#958:75": { value: showCharacterCount }, "Character Count#15327:360": { value: _characterCount }, "Max Character Count#15327:175": { value: maxCharacterCount } } = props;
-        const states = state.split("-");
-        const commonProps = {
-            size: handleSizeProp(size),
-            // header
-            ...showHeader && {
-                label
-            },
-            ...showHeader && showIndicator && {
-                indicator
-            },
-            // input
-            ...filled === "True" && {
-                defaultValue
-            },
-            ...states.includes("Invalid") && {
-                invalid: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            },
-            ...states.includes("Read Only") && {
-                readOnly: true
-            },
-            // footer
-            ...showFooter && showDescription && states.includes("Invalid") && {
-                // invalid인 경우 description을 error로 사용
-                errorMessage: description
-            },
-            ...showFooter && showDescription && !states.includes("Invalid") && {
-                // invalid가 아닌 경우 description을 description으로 사용
-                description
-            },
-            ...showFooter && showCharacterCount && {
-                maxGraphemeCount: Number(maxCharacterCount)
-            }
-        };
-        const inputProps = {
-            placeholder
-        };
-        const TextFieldChildren = createLocalSnippetElement$c("TextFieldTextarea", inputProps);
-        return createLocalSnippetElement$c("TextField", commonProps, TextFieldChildren);
-    });
-
-const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("page-banner");
+const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("page-banner");
 const SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
 const createPageBannerButtonHandler = (_ctx)=>defineComponentHandler(SUFFIX_BUTTON_KEY, (node)=>{
         return createElement("PageBannerButton", undefined, node.componentProperties["Label#39890:0"].value);
@@ -3937,7 +4145,7 @@ const createPageBannerHandler = (ctx)=>{
             })).exhaustive();
         const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Text");
         if (!textNode) {
-            return createLocalSnippetElement$b(tag, undefined, undefined, {
+            return createLocalSnippetElement$c(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -3970,11 +4178,11 @@ const createPageBannerHandler = (ctx)=>{
                 suffix
             }
         };
-        return createLocalSnippetElement$b(tag, commonProps);
+        return createLocalSnippetElement$c(tag, commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("progress-circle");
+const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("progress-circle");
 const createProgressCircleHandler = (_ctx)=>defineComponentHandler(progressCircle.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
@@ -4006,10 +4214,10 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(progressCircl
                 tone: camelCase(props.Tone.value)
             }
         };
-        return createLocalSnippetElement$a("ProgressCircle", commonProps);
+        return createLocalSnippetElement$b("ProgressCircle", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("radio-group");
 const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(radio.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -4022,20 +4230,20 @@ const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(radio.key, ({
             tone,
             weight: camelCase(props.Weight.value)
         };
-        return createLocalSnippetElement$9("RadioGroupItem", commonProps);
+        return createLocalSnippetElement$a("RadioGroupItem", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("radio-group");
 const createRadioMarkHandler = (_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$8("RadioMark", commonProps);
+        return createLocalSnippetElement$9("RadioMark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("reaction-button");
+const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("reaction-button");
 const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
@@ -4049,7 +4257,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton
                 defaultPressed: true
             }
         };
-        return createLocalSnippetElement$7("ReactionButton", commonProps, [
+        return createLocalSnippetElement$8("ReactionButton", commonProps, [
             createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#12379:0"])
             }),
@@ -4058,7 +4266,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("segmented-control");
+const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("segmented-control");
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENTED_CONTROL_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -4068,7 +4276,7 @@ const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENT
                 disabled: true
             }
         };
-        return createLocalSnippetElement$6("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+        return createLocalSnippetElement$7("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
     });
 const createSegmentedControlHandler = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler();
@@ -4084,13 +4292,13 @@ const createSegmentedControlHandler = (ctx)=>{
                 defaultValue: selectedSegment.componentProperties["Label#11366:15"].value
             }
         };
-        return createLocalSnippetElement$6("SegmentedControl", commonProps, segmentedControlChildren, {
+        return createLocalSnippetElement$7("SegmentedControl", commonProps, segmentedControlChildren, {
             comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("select-box");
+const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("select-box");
 const createSelectBoxHandler = (_ctx)=>defineComponentHandler(selectBox.key, ({ componentProperties: props })=>{
         const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
         const commonProps = {
@@ -4105,7 +4313,7 @@ const createSelectBoxHandler = (_ctx)=>defineComponentHandler(selectBox.key, ({
                 defaultChecked: true
             }
         };
-        return createLocalSnippetElement$5(tag, commonProps);
+        return createLocalSnippetElement$6(tag, commonProps);
     });
 const createSelectBoxGroupHandler = (ctx)=>{
     const selectBoxHandler = createSelectBoxHandler();
@@ -4128,7 +4336,7 @@ const createSelectBoxGroupHandler = (ctx)=>{
                 defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
             }
         };
-        return createLocalSnippetElement$5(tag, commonProps, stack);
+        return createLocalSnippetElement$6(tag, commonProps, stack);
     });
 };
 
@@ -4142,6 +4350,90 @@ const createSkeletonHandler = (ctx)=>defineComponentHandler(skeleton.key, (node)
         return createSeedReactElement("Skeleton", commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("slider");
+const SLIDER_TICK_KEY = "ace432ffb7a2af13bce549b19c932ac5f96a9a78";
+function getSliderComment(props) {
+    return [
+        "min, max, step 값을 적절히 조정해주세요.",
+        props.markers && "markers 배열을 채워주세요.",
+        props.ticks && "ticks 배열을 채워주세요."
+    ].filter(Boolean).join(" ");
+}
+const createSliderFieldHandler = (ctx)=>{
+    const sliderHandler = createSliderHandler();
+    const fieldHeaderHandler = createFieldHeaderHandler();
+    const fieldFooterHandler = createFieldFooterHandler();
+    return defineComponentHandler(templateSliderField.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const [slider$1] = findAllInstances({
+            node,
+            key: slider.key
+        });
+        const [fieldHeader] = findAllInstances({
+            node,
+            key: FIELD_KEYS.HEADER
+        });
+        const [fieldFooter] = findAllInstances({
+            node,
+            key: FIELD_KEYS.FOOTER
+        });
+        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 commonProps = {
+            ...sliderProps,
+            ...headerProps,
+            ...footerProps
+        };
+        return createLocalSnippetElement$5("Slider", commonProps, undefined, {
+            comment: getSliderComment(commonProps)
+        });
+    });
+};
+const createSliderHandler = (_ctx)=>{
+    return defineComponentHandler(slider.key, (node)=>{
+        const { componentProperties: props } = node;
+        const { min, max, defaultValues } = match(props.Value.value).with("Single", ()=>({
+                min: 0,
+                max: 100,
+                defaultValues: [
+                    50
+                ]
+            })).with("Range", ()=>({
+                min: 0,
+                max: 100,
+                defaultValues: [
+                    0,
+                    50
+                ]
+            })).exhaustive();
+        const [ticks] = findAllInstances({
+            node,
+            key: SLIDER_TICK_KEY
+        });
+        const commonProps = {
+            min,
+            max,
+            defaultValues,
+            hideRange: props["Show Active Track#48156:0"].value === false,
+            ...props["Show Markers#49596:0"].value === true && {
+                markers: []
+            },
+            ...props["Has Tick Mark#47921:0"].value === true && ticks && {
+                ticks: [],
+                tickWeight: ticks.componentProperties.Type.value === "Discrete" ? "thick" : "thin"
+            },
+            ...props.State.value === "Disabled" && {
+                disabled: true
+            }
+        };
+        return createLocalSnippetElement$5("Slider", commonProps, undefined, {
+            comment: getSliderComment(commonProps)
+        });
+    });
+};
+
 const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("snackbar");
 const createSnackbarHandler = (_ctx)=>defineComponentHandler(snackbar.key, ({ componentProperties: props })=>{
         const commonProps = {
@@ -4363,97 +4655,206 @@ const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(LINE_TRIGGER
             variant,
             defaultValue
         };
-        const tabsCarousel = createChipTabsLocalSnippetElement("ChipTabsCarousel", {
-            swipeable: false
-        }, triggers.map(({ value })=>createChipTabsLocalSnippetElement("ChipTabsContent", {
-                value
-            }, value)));
-        const tabsList = createChipTabsLocalSnippetElement("ChipTabsList", undefined, triggers.map(({ elementNode })=>elementNode));
-        return createChipTabsLocalSnippetElement("ChipTabsRoot", rootProps, [
-            tabsList,
-            tabsCarousel
-        ]);
+        const tabsCarousel = createChipTabsLocalSnippetElement("ChipTabsCarousel", {
+            swipeable: false
+        }, triggers.map(({ value })=>createChipTabsLocalSnippetElement("ChipTabsContent", {
+                value
+            }, value)));
+        const tabsList = createChipTabsLocalSnippetElement("ChipTabsList", undefined, triggers.map(({ elementNode })=>elementNode));
+        return createChipTabsLocalSnippetElement("ChipTabsRoot", rootProps, [
+            tabsList,
+            tabsCarousel
+        ]);
+    });
+};
+const CHIP_TRIGGER_KEY = "95bf31a329f9e8bba0d9aa2299d1552f1d388148";
+const createChipTabsTriggerHandler = (_ctx)=>defineComponentHandler(CHIP_TRIGGER_KEY, (node)=>{
+        const [chip$1] = findAllInstances({
+            node,
+            key: chip.key
+        });
+        if (!chip$1) throw new Error("Chip not found in ChipTabsTrigger");
+        const props = node.componentProperties;
+        const chipProps = chip$1.componentProperties;
+        const commonProps = {
+            value: chipProps["Label#7185:0"].value,
+            ...chipProps.State.value === "Disabled" && {
+                disabled: true
+            },
+            ...props["Has Notification"].value === "True" && {
+                notification: true
+            }
+        };
+        return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+    });
+
+const { createLocalSnippetElement: createLocalSnippetElement$1 } = createLocalSnippetHelper("text-field");
+const TEXT_INPUT_OUTLINE_KEY = "22eebd645d310c086d9f5f69d8f179ff5c7cf7ca";
+const TEXT_INPUT_OUTLINE_PREFIX_KEY = "1ab174dd51bc42a5efe530f52f1dd02255c50b18";
+const TEXT_INPUT_OUTLINE_SUFFIX_KEY = "555fee288d9053760e301791665bbac31d19c43f";
+const TEXT_INPUT_UNDERLINE_KEY = "16e9e343fc319190149369bd61076d6415e09a8a";
+const TEXT_INPUT_UNDERLINE_PREFIX_KEY = "a7ceae43b6daf4490e8ab408d2c29fb63b2eb891";
+const TEXT_INPUT_UNDERLINE_SUFFIX_KEY = "1b88368820be61f358e24a8aaa601e7f2a2ea101";
+const TEXTAREA_KEY = "22bb206483f00cd635188eea6ae8a6aac058b5d5";
+const createTextInputFieldHandler = (ctx)=>{
+    const fieldHeaderHandler = createFieldHeaderHandler();
+    const fieldFooterHandler = createFieldFooterHandler();
+    return defineComponentHandler(templateTextField.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const [textInputOutline] = findAllInstances({
+            node,
+            key: TEXT_INPUT_OUTLINE_KEY
+        });
+        const [textInputUnderline] = findAllInstances({
+            node,
+            key: TEXT_INPUT_UNDERLINE_KEY
+        });
+        const [fieldHeader] = findAllInstances({
+            node,
+            key: FIELD_KEYS.HEADER
+        });
+        const [fieldFooter] = findAllInstances({
+            node,
+            key: FIELD_KEYS.FOOTER
+        });
+        const fieldProps = {
+            ...props["Show Header#40606:8"].value && fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {},
+            ...props["Show Footer#40606:9"].value && fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {}
+        };
+        const commonProps = (()=>{
+            if (textInputOutline) {
+                const [prefix] = findAllInstances({
+                    node: textInputOutline,
+                    key: TEXT_INPUT_OUTLINE_PREFIX_KEY
+                });
+                const [suffix] = findAllInstances({
+                    node: textInputOutline,
+                    key: TEXT_INPUT_OUTLINE_SUFFIX_KEY
+                });
+                return {
+                    variant: "outline",
+                    ...textInputOutline.componentProperties.State.value === "Disabled" && {
+                        disabled: true
+                    },
+                    ...textInputOutline.componentProperties.State.value === "Read Only" && {
+                        readOnly: true
+                    },
+                    ...textInputOutline.componentProperties.State.value === "Error" && {
+                        invalid: true
+                    },
+                    ...textInputOutline.componentProperties.State.value === "Error Focused" && {
+                        invalid: true
+                    },
+                    ...textInputOutline.componentProperties["Has Prefix#32514:10"].value === true && prefix && prefix.componentProperties.Type.value === "Icon" && {
+                        prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"])
+                    },
+                    ...textInputOutline.componentProperties["Has Suffix#32865:68"].value === true && suffix && suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                        suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#45391:0"])
+                    },
+                    ...textInputOutline.componentProperties["Has Suffix#32865:68"].value === true && suffix && suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                        suffix: suffix.componentProperties["Suffix Text#34021:4"].value
+                    }
+                };
+            }
+            if (textInputUnderline) {
+                const [prefix] = findAllInstances({
+                    node: textInputUnderline,
+                    key: TEXT_INPUT_UNDERLINE_PREFIX_KEY
+                });
+                const [suffix] = findAllInstances({
+                    node: textInputUnderline,
+                    key: TEXT_INPUT_UNDERLINE_SUFFIX_KEY
+                });
+                return {
+                    variant: "underline",
+                    ...textInputUnderline.componentProperties.State.value === "Disabled" && {
+                        disabled: true
+                    },
+                    ...textInputUnderline.componentProperties.State.value === "Read Only" && {
+                        readOnly: true
+                    },
+                    ...textInputUnderline.componentProperties.State.value === "Error" && {
+                        invalid: true
+                    },
+                    ...textInputUnderline.componentProperties.State.value === "Error Focused" && {
+                        invalid: true
+                    },
+                    ...textInputUnderline.componentProperties["Has Prefix#34125:0"].value === true && prefix && prefix.componentProperties.Type.value === "Icon" && {
+                        prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"])
+                    },
+                    ...textInputUnderline.componentProperties["Has Suffix#34125:8"].value === true && suffix && suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                        suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#45391:5"])
+                    },
+                    ...textInputUnderline.componentProperties["Has Suffix#34125:8"].value === true && suffix && suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                        suffix: suffix.componentProperties["Suffix Text#34021:4"].value
+                    }
+                };
+            }
+            return {};
+        })();
+        // 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"));
+        const inputProps = {
+            ...placeholder && {
+                placeholder: placeholder.characters
+            }
+        };
+        return createLocalSnippetElement$1("TextField", {
+            ...fieldProps,
+            ...commonProps,
+            ...value && {
+                defaultValue: value.characters
+            }
+        }, createLocalSnippetElement$1("TextFieldInput", inputProps));
     });
 };
-const CHIP_TRIGGER_KEY = "95bf31a329f9e8bba0d9aa2299d1552f1d388148";
-const createChipTabsTriggerHandler = (_ctx)=>defineComponentHandler(CHIP_TRIGGER_KEY, (node)=>{
-        const [chip$1] = findAllInstances({
+const createTextareaFieldHandler = (ctx)=>{
+    const fieldHeaderHandler = createFieldHeaderHandler();
+    const fieldFooterHandler = createFieldFooterHandler();
+    return defineComponentHandler(templateTextareaField.key, (node, traverse)=>{
+        const [textarea] = findAllInstances({
             node,
-            key: chip.key
+            key: TEXTAREA_KEY
         });
-        if (!chip$1) throw new Error("Chip not found in ChipTabsTrigger");
-        const props = node.componentProperties;
-        const chipProps = chip$1.componentProperties;
-        const commonProps = {
-            value: chipProps["Label#7185:0"].value,
-            ...chipProps.State.value === "Disabled" && {
-                disabled: true
-            },
-            ...props["Has Notification"].value === "True" && {
-                notification: true
+        const [fieldHeader] = findAllInstances({
+            node,
+            key: FIELD_KEYS.HEADER
+        });
+        const [fieldFooter] = findAllInstances({
+            node,
+            key: FIELD_KEYS.FOOTER
+        });
+        const fieldProps = {
+            ...fieldHeader ? fieldHeaderHandler.transform(fieldHeader, traverse).props : {},
+            ...fieldFooter ? fieldFooterHandler.transform(fieldFooter, traverse).props : {}
+        };
+        // 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"));
+        const inputProps = {
+            autoresize: textarea.componentProperties["Auto Size (Figma Only)"].value === "true",
+            ...placeholder && {
+                placeholder: placeholder.characters
             }
         };
-        return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
-    });
-
-const { createLocalSnippetElement: createLocalSnippetElement$1 } = createLocalSnippetHelper("text-field");
-const createTextFieldHandler = (ctx)=>defineComponentHandler(textField.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("-");
         const commonProps = {
-            size: handleSizeProp(size),
-            // header
-            ...showHeader && {
-                label
-            },
-            ...showHeader && showIndicator && {
-                indicator
-            },
-            // input affixes
-            ...showPrefix && showPrefixIcon && {
-                prefixIcon: ctx.iconHandler.transform(prefixIcon)
-            },
-            ...showPrefix && showPrefixText && {
-                prefix
-            },
-            ...showSuffix && showSuffixIcon && {
-                suffixIcon: ctx.iconHandler.transform(suffixIcon)
-            },
-            ...showSuffix && showSuffixText && {
-                suffix
-            },
-            // input
-            ...filled === "True" && {
-                defaultValue
-            },
-            ...states.includes("Invalid") && {
-                invalid: true
-            },
-            ...states.includes("Disabled") && {
+            ...textarea.componentProperties.State.value === "Disabled" && {
                 disabled: true
             },
-            ...states.includes("Read Only") && {
+            ...textarea.componentProperties.State.value === "Read Only" && {
                 readOnly: true
             },
-            // footer
-            ...showFooter && showDescription && states.includes("Invalid") && {
-                // invalid인 경우 description을 error로 사용
-                errorMessage: description
-            },
-            ...showFooter && showDescription && !states.includes("Invalid") && {
-                // invalid가 아닌 경우 description을 description으로 사용
-                description
-            },
-            ...showFooter && showCharacterCount && {
-                maxGraphemeCount: Number(maxCharacterCount)
+            ...value && {
+                defaultValue: value.characters
             }
         };
-        const inputProps = {
-            placeholder
-        };
-        const TextFieldChildren = createLocalSnippetElement$1("TextFieldInput", inputProps);
-        return createLocalSnippetElement$1("TextField", commonProps, TextFieldChildren);
+        return createLocalSnippetElement$1("TextField", {
+            ...fieldProps,
+            ...commonProps
+        }, createLocalSnippetElement$1("TextFieldTextarea", inputProps));
     });
+};
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
 const createToggleButtonHandler = (ctx)=>defineComponentHandler(toggleButton.key, ({ componentProperties: props })=>{
@@ -4547,19 +4948,40 @@ function bindComponentHandler(unbound, deps) {
 const unboundSeedComponentHandlers = [
     createActionButtonGhostHandler,
     createActionButtonHandler,
-    createAlertDialogHandler,
-    createAppBarHandler,
-    createAvatarHandler,
-    createAvatarStackHandler,
+    createTextInputFieldHandler,
+    createTextareaFieldHandler,
     createBadgeHandler,
-    createBottomSheetHandler,
+    createChipHandler,
     createCalloutHandler,
+    createPageBannerHandler,
     createCheckboxHandler,
     createCheckmarkHandler,
-    createChipHandler,
-    createContextualFloatingButtonHandler,
+    createRadioGroupItemHandler,
+    createRadioMarkHandler,
+    createSwitchHandler,
+    createSwitchMarkHandler,
+    createAlertDialogHandler,
     createDividerHandler,
+    createAvatarHandler,
+    createAvatarStackHandler,
+    createSegmentedControlHandler,
+    createSelectBoxGroupHandler,
+    createSelectBoxHandler,
+    createSliderHandler,
+    createSliderFieldHandler,
+    createTabsHandler,
+    createTagGroupHandler,
+    createTagGroupItemHandler,
+    createToggleButtonHandler,
+    createAppBarHandler,
+    createBottomSheetHandler,
+    createFieldButtonHandler,
+    createAddressFieldHandler,
+    createDatePickerFieldHandler,
+    createSelectFieldHandler,
+    createTimePickerFieldHandler,
     createErrorStateHandler,
+    createContextualFloatingButtonHandler,
     createFloatingActionButtonHandler,
     createHelpBubbleHandler,
     createIdentityPlaceholderHandler,
@@ -4568,24 +4990,10 @@ const unboundSeedComponentHandlers = [
     createMannerTempBadgeHandler,
     createMannerTempHandler,
     createMenuSheetHandler,
-    createMultilineTextFieldHandler,
-    createPageBannerHandler,
     createProgressCircleHandler,
-    createRadioGroupItemHandler,
-    createRadioMarkHandler,
     createReactionButtonHandler,
-    createSegmentedControlHandler,
-    createSelectBoxGroupHandler,
-    createSelectBoxHandler,
     createSkeletonHandler,
-    createSnackbarHandler,
-    createSwitchHandler,
-    createSwitchMarkHandler,
-    createTabsHandler,
-    createTagGroupHandler,
-    createTagGroupItemHandler,
-    createTextFieldHandler,
-    createToggleButtonHandler
+    createSnackbarHandler
 ];
 
 function createStaticIconRepository(iconRecord) {
@@ -5985,6 +6393,16 @@ const FIGMA_ICONS = {
         "type": "monochrome",
         "weight": "Line"
     },
+    "8c85104333ba7cc69fc866b41770316a6bd226d9": {
+        "name": "icon_grid_dot5",
+        "type": "monochrome",
+        "weight": "Fill"
+    },
+    "29482f6a02c7c0fe2d714271ca540c197e2c5e9a": {
+        "name": "icon_grid_dot5",
+        "type": "monochrome",
+        "weight": "Line"
+    },
     "94396773c3208ff19b7650bb7f48de6600492c83": {
         "name": "icon_grid_heart",
         "type": "monochrome",
@@ -6375,6 +6793,16 @@ const FIGMA_ICONS = {
         "type": "monochrome",
         "weight": "Line"
     },
+    "af40e22f4795e41a24778fae19232b7ffe8d0b95": {
+        "name": "icon_midcut_square",
+        "type": "monochrome",
+        "weight": "Fill"
+    },
+    "7c104076f1c7d9bbe9e14f5957012f2c7a5710d7": {
+        "name": "icon_midcut_square",
+        "type": "monochrome",
+        "weight": "Line"
+    },
     "5fa174f09a36f25f6af68e8a7b268e1d9a7f4752": {
         "name": "icon_minus_circle",
         "type": "monochrome",
@@ -7777,6 +8205,10 @@ const FIGMA_ICONS = {
         "name": "icon_gift",
         "type": "multicolor"
     },
+    "e44bf2ccec8dd6a9b720e15f1660854234aeb9ca": {
+        "name": "icon_grid_dot5",
+        "type": "multicolor"
+    },
     "9d3511905b35064003bf689e7f536f120e1fa5ad": {
         "name": "icon_horizline_viewfinder",
         "type": "multicolor"
@@ -7869,6 +8301,10 @@ const FIGMA_ICONS = {
         "name": "icon_sneaker_lifted_leftside",
         "type": "multicolor"
     },
+    "e8eb13395b0696f63d148a8c31401b21382f03ef": {
+        "name": "icon_sofa",
+        "type": "multicolor"
+    },
     "7fa76e36cb5397446a8ac3105d882ea685290c1b": {
         "name": "icon_sparkle2",
         "type": "multicolor"
@@ -7924,62 +8360,6 @@ const FIGMA_ICONS = {
 };
 
 const FIGMA_STYLES = [
-    {
-        "styleType": "FILL",
-        "key": "c1cee6b89c357c6a12d020654d73a4490cafdf51",
-        "name": "gradient/fade/layer-default/←(to-left)",
-        "description": "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
-        "remote": false
-    },
-    {
-        "styleType": "FILL",
-        "key": "ff436e73cf9477a1006e6f8a1f9d2c9dbe0e5edd",
-        "name": "gradient/fade/layer-default/→(to-right)",
-        "description": "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
-        "remote": false
-    },
-    {
-        "styleType": "FILL",
-        "key": "826457503b7ee3d472eab91581b1fcd499c47c00",
-        "name": "gradient/fade/layer-default/↑(to-top)",
-        "description": "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
-        "remote": false
-    },
-    {
-        "styleType": "FILL",
-        "key": "408cb970f1de672217f452152b0398a4bb4f4e12",
-        "name": "gradient/fade/layer-default/↓(to-bottom)",
-        "description": "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
-        "remote": false
-    },
-    {
-        "styleType": "FILL",
-        "key": "df22450a8f8e9c323baf40d8981920d1b6376cbf",
-        "name": "gradient/fade/layer-floating/←(to-left)",
-        "description": "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
-        "remote": false
-    },
-    {
-        "styleType": "FILL",
-        "key": "063c0dc05b438ac36499492e783520a722782d74",
-        "name": "gradient/fade/layer-floating/→(to-right)",
-        "description": "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
-        "remote": false
-    },
-    {
-        "styleType": "FILL",
-        "key": "46186d7dd037e8e54983ee6677cf7915790d84cc",
-        "name": "gradient/fade/layer-floating/↑(to-top)",
-        "description": "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
-        "remote": false
-    },
-    {
-        "styleType": "FILL",
-        "key": "b28d9c9adc816fdd4ecec3a0b3e25d8aec802b6a",
-        "name": "gradient/fade/layer-floating/↓(to-bottom)",
-        "description": "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
-        "remote": false
-    },
     {
         "styleType": "FILL",
         "key": "353baa82e0440385eb121cd0ae98d2fcb1a70b18",
@@ -8270,10 +8650,10 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:238:17662",
             "VariableID:17544:4057",
             "VariableID:1:171",
-            "VariableID:41186:6437",
             "VariableID:670:2700",
-            "VariableID:1:158",
+            "VariableID:41186:6437",
             "VariableID:1:172",
+            "VariableID:1:158",
             "VariableID:1:161",
             "VariableID:1:159",
             "VariableID:576:22878",
@@ -8321,8 +8701,8 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:12479:23364",
             "VariableID:12479:23365",
             "VariableID:12479:23366",
-            "VariableID:1:7",
             "VariableID:12548:1437",
+            "VariableID:1:7",
             "VariableID:12479:23367",
             "VariableID:12479:23368",
             "VariableID:12479:23371",
@@ -8457,14 +8837,12 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:10181:34417",
             "VariableID:1:168",
             "VariableID:29913:8440",
-            "VariableID:29917:289",
             "VariableID:29917:362",
-            "VariableID:30009:40284",
             "VariableID:29917:5084",
+            "VariableID:30009:40284",
             "VariableID:30009:40393",
             "VariableID:30021:1313",
             "VariableID:30023:1876",
-            "VariableID:30023:1877",
             "VariableID:30023:3032",
             "VariableID:30023:1878",
             "VariableID:30023:3347",
@@ -8485,7 +8863,12 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:43290:12820",
             "VariableID:43290:12822",
             "VariableID:43290:12823",
-            "VariableID:43290:12824"
+            "VariableID:43290:12824",
+            "VariableID:49497:1643",
+            "VariableID:49497:1644",
+            "VariableID:49495:1861",
+            "VariableID:49497:1645",
+            "VariableID:49497:1646"
         ]
     },
     "VariableCollectionId:1:174": {
@@ -8611,9 +8994,9 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:289:13772",
             "VariableID:1886:93038",
             "VariableID:289:13773",
+            "VariableID:796:4448",
             "VariableID:15518:15916",
             "VariableID:19225:68732",
-            "VariableID:796:4448",
             "VariableID:17955:50606",
             "VariableID:514:13178",
             "VariableID:535:1747",
@@ -8704,6 +9087,136 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
+    "VariableID:49495:1861": {
+        "name": "_scroll-fog",
+        "id": "VariableID:49495:1861",
+        "remote": false,
+        "key": "12f1d88d590090e396c9b283bb51d4e89d9016d2",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:29453:35711"
+            },
+            "1928:8": {
+                "r": 1,
+                "g": 1,
+                "b": 1,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:49497:1643": {
+        "name": "_scroll-fog/layer-default/0",
+        "id": "VariableID:49497:1643",
+        "remote": false,
+        "key": "fae00f7e2fc2ee7cd4bef58de19f468255ca4c5c",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1:155"
+            },
+            "1928:8": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1:155"
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:49497:1644": {
+        "name": "_scroll-fog/layer-default/1",
+        "id": "VariableID:49497:1644",
+        "remote": false,
+        "key": "fac0ada2e11c8d54997dce0fc72a723fce514a9f",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 1,
+                "g": 1,
+                "b": 1,
+                "a": 0
+            },
+            "1928:8": {
+                "r": 0.08627451211214066,
+                "g": 0.09019608050584793,
+                "b": 0.10588235408067703,
+                "a": 0
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:49497:1645": {
+        "name": "_scroll-fog/layer-floating/0",
+        "id": "VariableID:49497:1645",
+        "remote": false,
+        "key": "334d485b6f54e6ed8dce767cd150b578f4323ad3",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:238:17662"
+            },
+            "1928:8": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:238:17662"
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:49497:1646": {
+        "name": "_scroll-fog/layer-floating/1",
+        "id": "VariableID:49497:1646",
+        "remote": false,
+        "key": "3259bea6c3999bc3ad72999fd3123648544bd002",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 1,
+                "g": 1,
+                "b": 1,
+                "a": 0
+            },
+            "1928:8": {
+                "r": 0.11555555462837219,
+                "g": 0.12638889253139496,
+                "b": 0.14444443583488464,
+                "a": 0
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
     "VariableID:1:151": {
         "name": "bg/brand-solid",
         "id": "VariableID:1:151",