@seed-design/figma 0.0.24 → 0.0.25

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

@@ -28,13 +28,13 @@ function objectEntries(obj) {
     }).replaceAll(/(\D)_(\d)/g, "$1$2").replaceAll(/(\d)_(\D)/g, "$1$2");
 }
 
-function createElement(tag, props = {}, children, comment) {
+function createElement(tag, props = {}, children, meta) {
     return {
         __IS_JSX_ELEMENT_NODE: true,
         tag,
         props,
         children: ensureArray(children).filter(exists),
-        comment
+        meta: meta ?? {}
     };
 }
 function cloneElement(element, props = {}, children) {
@@ -57,14 +57,25 @@ function isElement(node) {
     return typeof node === "object" && node != null && "__IS_JSX_ELEMENT_NODE" in node && node.__IS_JSX_ELEMENT_NODE === true;
 }
 function stringifyElement(element, options = {}) {
+    const importMap = new Map();
     function recursive(node, depth) {
         if (typeof node === "string") {
             return node;
         }
-        const { tag, props, children, comment } = node;
+        const { tag, props, children, meta: { comment, source, importPath } } = node;
+        if (importPath) {
+            const existing = importMap.get(importPath);
+            if (existing) {
+                existing.add(tag);
+            } else {
+                importMap.set(importPath, new Set([
+                    tag
+                ]));
+            }
+        }
         const propEntries = Object.entries(options.printSource ? {
             ...props,
-            "data-figma-node-id": node.source
+            "data-figma-node-id": source
         } : props);
         const propFragments = propEntries.map(([key, value])=>{
             if (typeof value === "string") {
@@ -101,7 +112,12 @@ function stringifyElement(element, options = {}) {
         ].join("\n");
         return result;
     }
-    return recursive(element, 0);
+    const jsx = recursive(element, 0);
+    const imports = Array.from(importMap.entries()).sort((a, b)=>a[0].localeCompare(b[0])).map(([importPath, tags])=>`import { ${Array.from(tags).join(", ")} } from "${importPath}";`).join("\n");
+    return {
+        imports,
+        jsx
+    };
 }
 
 // --- Helper Functions ---
@@ -444,9 +460,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
     }
     function generateCode(node, options) {
         const jsxTree = generateJsxTree(node);
-        return jsxTree ? stringifyElement(jsxTree, {
+        if (!jsxTree) {
+            return undefined;
+        }
+        return stringifyElement(jsxTree, {
             printSource: options.shouldPrintSource
-        }) : undefined;
+        });
     }
     return {
         generateJsxTree,
@@ -841,22 +860,62 @@ function createStrokePropsConverter(valueResolver) {
     });
 }
 
+const SEED_REACT_IMPORT_PATH = "@seed-design/react";
+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) {
+    return createElement(tag, props, children, {
+        importPath: SEED_REACT_IMPORT_PATH,
+        ...meta
+    });
+}
+function createMonochromeIconElement(tag, props, children, meta) {
+    return createElement(tag, props, children, {
+        ...meta,
+        importPath: MONOCHROME_ICON_IMPORT_PATH
+    });
+}
+function createMulticolorIconElement(tag, props, children, meta) {
+    return createElement(tag, props, children, {
+        ...meta,
+        importPath: MULTICOLOR_ICON_IMPORT_PATH
+    });
+}
+function createLocalSnippetHelper(moduleName) {
+    function createLocalSnippetElement(tag, props, children, meta) {
+        return createElement(tag, props, children, {
+            importPath: `${LOCAL_SNIPPET_BASE_PATH}/${moduleName}`,
+            ...meta
+        });
+    }
+    return {
+        createLocalSnippetElement
+    };
+}
+
 function createRectangleTransformer({ propsConverters }) {
     return defineElementTransformer((node)=>{
-        return createElement("Box", {
+        return createSeedReactElement("Box", {
             ...propsConverters.selfLayout(node),
             background: "palette.gray200"
-        }, undefined, "Rectangle Node Placeholder");
+        }, undefined, {
+            comment: "Rectangle Node Placeholder"
+        });
     });
 }
 function createVectorTransformer() {
     return defineElementTransformer(()=>{
-        return createElement("svg", {}, [], "Vector Node Placeholder");
+        return createElement("svg", {}, [], {
+            comment: "Vector Node Placeholder"
+        });
     });
 }
 function createBooleanOperationTransformer() {
     return defineElementTransformer(()=>{
-        return createElement("svg", {}, [], "Boolean Operation Node Placeholder");
+        return createElement("svg", {}, [], {
+            comment: "Boolean Operation Node Placeholder"
+        });
     });
 }
 
@@ -888,14 +947,14 @@ function createFrameTransformer({ propsConverters }) {
         const layoutComponent = inferLayoutComponent(props, isFlex);
         if (layoutComponent === "VStack") {
             const { direction, ...rest } = props;
-            return createElement("VStack", rest, processedChildren);
+            return createSeedReactElement("VStack", rest, processedChildren);
         }
         if (layoutComponent === "HStack") {
             const { direction, ...rest } = props;
-            return createElement("HStack", rest, processedChildren);
+            return createSeedReactElement("HStack", rest, processedChildren);
         }
         if (layoutComponent === "Box") {
-            return createElement("Box", props, processedChildren);
+            return createSeedReactElement("Box", props, processedChildren);
         }
     });
 }
@@ -908,7 +967,7 @@ function createInstanceTransformer({ iconHandler, propsConverters, componentHand
                 ...propsConverters.iconSelfLayout(node),
                 ...propsConverters.vectorChildrenFill(node)
             };
-            return createElement("Icon", {
+            return createSeedReactElement("Icon", {
                 svg: iconHandler.transform(node),
                 ...props
             });
@@ -931,7 +990,9 @@ function createTextTransformer({ propsConverters }) {
             ...typeStyleProps,
             ...fillProps
         });
-        return createElement("Text", props, node.characters.replace(/\n/g, "<br />"), hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : "");
+        return createSeedReactElement("Text", props, node.characters.replace(/\n/g, "<br />"), {
+            comment: hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : undefined
+        });
     });
 }
 
@@ -1049,19 +1110,20 @@ function handleSizeProp(size) {
     }
 }
 
+const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("action-button");
 const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$u.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
                 children: [
-                    createElement("Icon", {
+                    createLocalSnippetElement$n("Icon", {
                         svg: ctx.iconHandler.transform(props["Icon#7574:0"])
                     })
                 ]
             })).with("Icon First", ()=>({
                 layout: "withText",
                 children: [
-                    createElement("PrefixIcon", {
+                    createLocalSnippetElement$n("PrefixIcon", {
                         svg: ctx.iconHandler.transform(props["Prefix Icon#5987:305"])
                     }),
                     props["Label#5987:61"].value
@@ -1070,7 +1132,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$u.key,
                 layout: "withText",
                 children: [
                     props["Label#5987:61"].value,
-                    createElement("SuffixIcon", {
+                    createLocalSnippetElement$n("SuffixIcon", {
                         svg: ctx.iconHandler.transform(props["Suffix Icon#5987:244"])
                     })
                 ]
@@ -1089,7 +1151,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$u.key,
             variant: camelCase(props.Variant.value),
             layout
         };
-        return createElement("ActionButton", commonProps, children);
+        return createLocalSnippetElement$n("ActionButton", commonProps, children);
     });
 
 const createActionChipHandler = (ctx)=>defineComponentHandler(metadata$t.key, ({ componentProperties: props })=>{
@@ -1097,14 +1159,14 @@ const createActionChipHandler = (ctx)=>defineComponentHandler(metadata$t.key, ({
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
                 children: [
-                    createElement("Icon", {
+                    createSeedReactElement("Icon", {
                         svg: ctx.iconHandler.transform(props["Icon#8714:0"])
                     })
                 ]
             })).with("Icon First", ()=>({
                 layout: "withText",
                 children: [
-                    createElement("PrefixIcon", {
+                    createSeedReactElement("PrefixIcon", {
                         svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"])
                     }),
                     props["Label#7185:0"].value
@@ -1113,18 +1175,18 @@ const createActionChipHandler = (ctx)=>defineComponentHandler(metadata$t.key, ({
                 layout: "withText",
                 children: [
                     props["Label#7185:0"].value,
-                    createElement("SuffixIcon", {
+                    createSeedReactElement("SuffixIcon", {
                         svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"])
                     })
                 ]
             })).with("Icon Both", ()=>({
                 layout: "withText",
                 children: [
-                    createElement("PrefixIcon", {
+                    createSeedReactElement("PrefixIcon", {
                         svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"])
                     }),
                     props["Label#7185:0"].value,
-                    createElement("SuffixIcon", {
+                    createSeedReactElement("SuffixIcon", {
                         svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"])
                     })
                 ]
@@ -1142,9 +1204,10 @@ const createActionChipHandler = (ctx)=>defineComponentHandler(metadata$t.key, ({
                 count: Number(props["Count#7185:21"].value)
             }
         };
-        return createElement("ActionChip", commonProps, children);
+        return createSeedReactElement("ActionChip", commonProps, children);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("action-sheet");
 const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
 const createActionSheetItemHandler = (_ctx)=>defineComponentHandler(ACTION_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -1155,7 +1218,7 @@ const createActionSheetItemHandler = (_ctx)=>defineComponentHandler(ACTION_SHEET
                 disabled: true
             }
         };
-        return createElement("ActionSheetItem", commonProps);
+        return createLocalSnippetElement$m("ActionSheetItem", commonProps);
     });
 const createActionSheetHandler = (ctx)=>{
     const actionSheetItemHandler = createActionSheetItemHandler();
@@ -1179,17 +1242,22 @@ const createActionSheetHandler = (ctx)=>{
             key: actionSheetItemHandler.key
         });
         const contentChildren = items.map(actionSheetItemHandler.transform);
-        const content = createElement("ActionSheetContent", contentProps, contentChildren, contentProps.title ? "" : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
-        const trigger = createElement("ActionSheetTrigger", {
+        const content = createLocalSnippetElement$m("ActionSheetContent", contentProps, contentChildren, {
+            comment: contentProps.title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
+        });
+        const trigger = createLocalSnippetElement$m("ActionSheetTrigger", {
             asChild: true
-        }, createElement("ActionButton", undefined, "열기", "ActionSheet을 여는 요소를 제공해주세요."));
-        return createElement("ActionSheet", undefined, [
+        }, createElement("button", undefined, "열기", {
+            comment: "ActionSheet을 여는 요소를 제공해주세요."
+        }));
+        return createLocalSnippetElement$m("ActionSheet", undefined, [
             trigger,
             content
         ]);
     });
 };
 
+const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("app-bar");
 const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
 const createAppBarMainHandler = (_ctx)=>defineComponentHandler(APP_BAR_MAIN_KEY, ({ componentProperties: props })=>{
         const { title, subtitle, layout } = match(props.Type.value).with("Title", ()=>({
@@ -1210,7 +1278,9 @@ const createAppBarMainHandler = (_ctx)=>defineComponentHandler(APP_BAR_MAIN_KEY,
             subtitle,
             layout
         };
-        return createElement("AppBarMain", commonProps, undefined, title === undefined ? "Title을 제공해주세요." : undefined);
+        return createLocalSnippetElement$l("AppBarMain", commonProps, undefined, {
+            comment: title === undefined ? "Title을 제공해주세요." : undefined
+        });
     });
 const APP_BAR_LEFT_KEY = "e5d2e47052a22395db79f195a0991a570dc1b6c9";
 const createAppBarLeftHandler = (ctx)=>defineComponentHandler(APP_BAR_LEFT_KEY, (node)=>{
@@ -1218,20 +1288,22 @@ const createAppBarLeftHandler = (ctx)=>defineComponentHandler(APP_BAR_LEFT_KEY,
         const children = (()=>{
             switch(props.Action.value){
                 case "Back":
-                    return createElement("AppBarBackButton", undefined);
+                    return createLocalSnippetElement$l("AppBarBackButton");
                 case "Close":
-                    return createElement("AppBarCloseButton", undefined);
+                    return createLocalSnippetElement$l("AppBarCloseButton");
                 case "Other":
                     {
                         const iconNode = findOne(node, (child)=>child.type === "INSTANCE" && child.name === "Icon");
                         if (!iconNode) {
                             return undefined;
                         }
-                        return createElement("AppBarIconButton", undefined, ctx.iconHandler.transform(iconNode), "aria-label 또는 aria-labelledby를 제공해주세요.");
+                        return createLocalSnippetElement$l("AppBarIconButton", undefined, ctx.iconHandler.transform(iconNode), {
+                            comment: "aria-label 또는 aria-labelledby를 제공해주세요."
+                        });
                     }
             }
         })();
-        return createElement("AppBarLeft", undefined, children);
+        return createLocalSnippetElement$l("AppBarLeft", undefined, children);
     });
 const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
 const createAppBarRightHandler = (ctx)=>defineComponentHandler(APP_BAR_RIGHT_KEY, (node)=>{
@@ -1246,11 +1318,13 @@ const createAppBarRightHandler = (ctx)=>defineComponentHandler(APP_BAR_RIGHT_KEY
                 default:
                     {
                         const iconNodes = findAll(node, (child)=>child.type === "INSTANCE" && child.name === "Icon");
-                        return iconNodes.map((iconNode)=>createElement("AppBarIconButton", undefined, ctx.iconHandler.transform(iconNode), "aria-label 또는 aria-labelledby를 제공해주세요."));
+                        return iconNodes.map((iconNode)=>createLocalSnippetElement$l("AppBarIconButton", undefined, ctx.iconHandler.transform(iconNode), {
+                                comment: "aria-label 또는 aria-labelledby를 제공해주세요."
+                            }));
                     }
             }
         })();
-        return createElement("AppBarRight", undefined, children);
+        return createLocalSnippetElement$l("AppBarRight", undefined, children);
     });
 const createAppBarHandler = (ctx)=>{
     const appBarMainHandler = createAppBarMainHandler();
@@ -1292,14 +1366,16 @@ const createAppBarHandler = (ctx)=>{
         });
         const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
         const right = onlyRightNode ? appBarRightHandler.transform(onlyRightNode) : undefined;
-        return createElement("AppBar", {
+        return createLocalSnippetElement$l("AppBar", {
             theme,
             tone
         }, [
             left,
             main,
             right
-        ].filter(Boolean), tone === "transparent" ? `<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.` : undefined);
+        ].filter(Boolean), {
+            comment: tone === "transparent" ? '<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.' : undefined
+        });
     });
 };
 
@@ -1307,9 +1383,10 @@ const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(metadata
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
-        return createElement("IdentityPlaceholder", commonProps);
+        return createSeedReactElement("IdentityPlaceholder", commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("avatar");
 const createAvatarHandler = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler();
     return defineComponentHandler(metadata$r.key, (node)=>{
@@ -1329,10 +1406,13 @@ const createAvatarHandler = (ctx)=>{
             },
             size: props.Size.value
         };
-        return createElement("Avatar", commonProps, props["Show Badge#1398:26"].value ? createElement("AvatarBadge", {}) : undefined, avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined);
+        return createLocalSnippetElement$k("Avatar", commonProps, props["Show Badge#1398:26"].value ? createLocalSnippetElement$k("AvatarBadge", {}) : undefined, {
+            comment: avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined
+        });
     });
 };
 
+const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
     return defineComponentHandler(metadata$q.key, (node)=>{
@@ -1345,7 +1425,7 @@ const createAvatarStackHandler = (ctx)=>{
             size: props.Size.value
         };
         const avatarStackChildren = avatarNodes.map(avatarHandler.transform);
-        return createElement("AvatarStack", commonProps, avatarStackChildren);
+        return createLocalSnippetElement$j("AvatarStack", commonProps, avatarStackChildren);
     });
 };
 
@@ -1356,9 +1436,10 @@ const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$p.key, ({ com
             variant: camelCase(props.Variant.value),
             shape: camelCase(props.Shape.value)
         };
-        return createElement("Badge", commonProps, props["Label#1584:0"].value);
+        return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("callout");
 const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$o.key, ({ componentProperties: props, children })=>{
         const tag = (()=>{
             switch(props.Interaction.value){
@@ -1374,7 +1455,9 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$o.key, ({ co
         })();
         const textNode = children.find((child)=>child.type === "TEXT");
         if (!textNode) {
-            return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
+            return createLocalSnippetElement$i(tag, undefined, undefined, {
+                comment: "내용을 제공해주세요."
+            });
         }
         const slices = textNode.segments;
         let title;
@@ -1422,9 +1505,10 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$o.key, ({ co
                 prefixIcon: ctx.iconHandler.transform(props["Icon#12598:210"])
             }
         };
-        return createElement(tag, commonProps);
+        return createLocalSnippetElement$i(tag, commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("checkbox");
 const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$n.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
@@ -1443,9 +1527,10 @@ const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$n.key, ({
                 disabled: true
             }
         };
-        return createElement("Checkbox", commonProps);
+        return createLocalSnippetElement$h("Checkbox", commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("chip-tabs");
 const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
 const createChipTabsItemHandler = (_ctx)=>defineComponentHandler(CHIP_TABS_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -1455,7 +1540,7 @@ const createChipTabsItemHandler = (_ctx)=>defineComponentHandler(CHIP_TABS_ITEM_
                 disabled: true
             }
         };
-        return createElement("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
+        return createLocalSnippetElement$g("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
     });
 const createChipTabsHandler = (ctx)=>{
     const chipTabsItemHandler = createChipTabsItemHandler();
@@ -1465,50 +1550,55 @@ const createChipTabsHandler = (ctx)=>{
             key: chipTabsItemHandler.key
         });
         const selectedChipTabsItem = chipTabsItems.find((chipTabsItem)=>chipTabsItem.componentProperties.State.value.split("-").includes("Selected"));
-        const chipTabsList = createElement("ChipTabsList", undefined, chipTabsItems.map(chipTabsItemHandler.transform));
+        const chipTabsList = createLocalSnippetElement$g("ChipTabsList", undefined, chipTabsItems.map(chipTabsItemHandler.transform));
         const commonProps = {
             variant: camelCase(node.componentProperties.Variant.value),
             ...selectedChipTabsItem && {
                 defaultValue: selectedChipTabsItem.componentProperties["Label#8876:0"].value
             }
         };
-        return createElement("ChipTabs", commonProps, chipTabsList);
+        return createLocalSnippetElement$g("ChipTabs", commonProps, chipTabsList);
     });
 };
 
+const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("control-chip");
 const createControlChipHandler = (ctx)=>defineComponentHandler(metadata$l.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
+        const count = props["Show Count#7185:42"].value ? props["Count#7185:21"].value : undefined;
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
                 children: [
-                    createElement("Icon", {
+                    createSeedReactElement("Icon", {
                         svg: ctx.iconHandler.transform(props["Icon#8722:41"])
                     })
                 ]
             })).with("Icon First", ()=>({
                 layout: "withText",
                 children: [
-                    createElement("PrefixIcon", {
+                    createSeedReactElement("PrefixIcon", {
                         svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
                     }),
-                    props["Label#7185:0"].value
+                    props["Label#7185:0"].value,
+                    count ? createSeedReactElement("Count", undefined, [
+                        count
+                    ]) : undefined
                 ]
             })).with("Icon Last", ()=>({
                 layout: "withText",
                 children: [
                     props["Label#7185:0"].value,
-                    createElement("SuffixIcon", {
+                    createSeedReactElement("SuffixIcon", {
                         svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"])
                     })
                 ]
             })).with("Icon Both", ()=>({
                 layout: "withText",
                 children: [
-                    createElement("PrefixIcon", {
+                    createSeedReactElement("PrefixIcon", {
                         svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
                     }),
                     props["Label#7185:0"].value,
-                    createElement("SuffixIcon", {
+                    createSeedReactElement("SuffixIcon", {
                         svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"])
                     })
                 ]
@@ -1529,9 +1619,10 @@ const createControlChipHandler = (ctx)=>defineComponentHandler(metadata$l.key, (
                 count: Number(props["Count#7185:21"].value)
             }
         };
-        return createElement("ControlChip.Toggle", commonProps, children);
+        return createLocalSnippetElement$f("ControlChip.Toggle", commonProps, children);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("error-state");
 const createErrorStateHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
     return defineComponentHandler(metadata$k.key, (node)=>{
@@ -1555,10 +1646,11 @@ const createErrorStateHandler = (ctx)=>{
                 }
             }
         };
-        return createElement("ErrorState", commonProps);
+        return createLocalSnippetElement$e("ErrorState", commonProps);
     });
 };
 
+const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("extended-action-sheet");
 const EXTENDED_ACTION_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
 const createExtendedActionSheetItemHandler = (ctx)=>defineComponentHandler(EXTENDED_ACTION_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -1568,8 +1660,8 @@ const createExtendedActionSheetItemHandler = (ctx)=>defineComponentHandler(EXTEN
                 disabled: true
             }
         };
-        return createElement("ExtendedActionSheetItem", commonProps, [
-            props["Show Prefix Icon#17043:5"].value ? createElement("PrefixIcon", {
+        return createLocalSnippetElement$d("ExtendedActionSheetItem", commonProps, [
+            props["Show Prefix Icon#17043:5"].value ? createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"])
             }) : undefined,
             props["Label#55905:8"].value
@@ -1584,7 +1676,7 @@ const createExtendedActionSheetGroupHandler = (ctx)=>{
             key: extendedActionSheetItemHandler.key
         });
         const contentChildren = items.map(extendedActionSheetItemHandler.transform);
-        return createElement("ExtendedActionSheetGroup", undefined, contentChildren);
+        return createLocalSnippetElement$d("ExtendedActionSheetGroup", undefined, contentChildren);
     });
 };
 const createExtendedActionSheetHandler = (ctx)=>{
@@ -1597,13 +1689,17 @@ const createExtendedActionSheetHandler = (ctx)=>{
         });
         const contentChildren = groups.map(extendedActionSheetGroupHandler.transform);
         const title = props["Show Title#17043:12"].value ? props["Title#14599:0"].value : undefined;
-        const content = createElement("ExtendedActionSheetContent", {
+        const content = createLocalSnippetElement$d("ExtendedActionSheetContent", {
             title
-        }, contentChildren, title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
-        const trigger = createElement("ExtendedActionSheetTrigger", {
+        }, contentChildren, {
+            comment: title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
+        });
+        const trigger = createLocalSnippetElement$d("ExtendedActionSheetTrigger", {
             asChild: true
-        }, createElement("ActionButton", undefined, "열기", "ExtendedActionSheet을 여는 요소를 제공해주세요."));
-        return createElement("ExtendedActionSheet", undefined, [
+        }, createElement("button", undefined, "열기", {
+            comment: "ExtendedActionSheet을 여는 요소를 제공해주세요."
+        }));
+        return createLocalSnippetElement$d("ExtendedActionSheet", undefined, [
             trigger,
             content
         ]);
@@ -1615,8 +1711,8 @@ const createExtendedFabHandler = (ctx)=>defineComponentHandler(metadata$i.key, (
             size: handleSizeProp(props.Size.value),
             variant: camelCase(props.Variant.value)
         };
-        return createElement("ExtendedFab", commonProps, [
-            createElement("PrefixIcon", {
+        return createSeedReactElement("ExtendedFab", commonProps, [
+            createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#28796:0"])
             }),
             props["Label#28936:0"].value
@@ -1624,9 +1720,14 @@ const createExtendedFabHandler = (ctx)=>defineComponentHandler(metadata$i.key, (
     });
 
 const createFabHandler = (ctx)=>defineComponentHandler(metadata$h.key, ({ componentProperties: props })=>{
-        return createElement("Fab", undefined, ctx.iconHandler.transform(props["Icon#28796:0"]), "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
+        return createSeedReactElement("Fab", undefined, createSeedReactElement("Icon", {
+            svg: ctx.iconHandler.transform(props["Icon#28796:0"])
+        }), {
+            comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
+        });
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("help-bubble");
 const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$g.key, ({ componentProperties: props })=>{
         const placement = (()=>{
             switch(props.Placement.value){
@@ -1665,9 +1766,12 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$g.key, (
             defaultOpen: true,
             placement
         };
-        return createElement("HelpBubbleTrigger", commonProps, createElement("ActionButton", undefined, "열기", "HelpBubble을 여는 요소를 제공해주세요."));
+        return createLocalSnippetElement$c("HelpBubbleTrigger", commonProps, createElement("button", undefined, "열기", {
+            comment: "HelpBubble을 여는 요소를 제공해주세요."
+        }));
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("inline-banner");
 const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$e.key, (node)=>{
         const { componentProperties: props } = node;
         const tag = (()=>{
@@ -1686,7 +1790,9 @@ const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$e.key,
         })();
         const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Label");
         if (!textNode) {
-            return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
+            return createLocalSnippetElement$b(tag, undefined, undefined, {
+                comment: "내용을 제공해주세요."
+            });
         }
         const slices = textNode.segments;
         let title;
@@ -1718,17 +1824,19 @@ const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$e.key,
             },
             prefixIcon
         };
-        return createElement(tag, commonProps);
+        return createLocalSnippetElement$b(tag, commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp-badge");
 const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$d.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createElement("MannerTempBadge", commonProps);
+        return createLocalSnippetElement$a("MannerTempBadge", commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("multiline-text-field");
 const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$c.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("-");
@@ -1770,10 +1878,11 @@ const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createElement("TextFieldTextarea", inputProps);
-        return createElement("TextField", commonProps, TextFieldChildren);
+        const TextFieldChildren = createLocalSnippetElement$9("TextFieldTextarea", inputProps);
+        return createLocalSnippetElement$9("TextField", commonProps, TextFieldChildren);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("progress-circle");
 const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$b.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
@@ -1803,9 +1912,10 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$b.ke
             size: props.Size.value,
             tone: camelCase(props.Tone.value)
         };
-        return createElement("ProgressCircle", commonProps);
+        return createLocalSnippetElement$8("ProgressCircle", commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("reaction-button");
 const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$a.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
@@ -1820,15 +1930,16 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$a.key
                 defaultPressed: true
             }
         };
-        return createElement("ReactionButton", commonProps, [
-            createElement("PrefixIcon", {
+        return createLocalSnippetElement$7("ReactionButton", commonProps, [
+            createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#12379:0"])
             }),
             props["Label#6397:0"].value,
-            props["Show Count#6397:33"].value ? createElement("Count", {}, props["Count#15816:0"].value) : undefined
+            props["Show Count#6397:33"].value ? createSeedReactElement("Count", {}, props["Count#15816:0"].value) : undefined
         ]);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$6 } = createLocalSnippetHelper("segmented-control");
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENTED_CONTROL_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -1838,7 +1949,7 @@ const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENT
                 disabled: true
             }
         };
-        return createElement("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+        return createLocalSnippetElement$6("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
     });
 const createSegmentedControlHandler = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler();
@@ -1854,19 +1965,15 @@ const createSegmentedControlHandler = (ctx)=>{
                 defaultValue: selectedSegment.componentProperties["Label#11366:15"].value
             }
         };
-        return createElement("SegmentedControl", commonProps, segmentedControlChildren, "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
+        return createLocalSnippetElement$6("SegmentedControl", commonProps, segmentedControlChildren, {
+            comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
+        });
     });
 };
 
+const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("select-box");
 const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({ componentProperties: props })=>{
-        const tag = (()=>{
-            switch(props.Control.value){
-                case "Checkbox":
-                    return "CheckSelectBox";
-                case "Radio":
-                    return "RadioSelectBox";
-            }
-        })();
+        const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBox").exhaustive();
         const states = props.State.value.split("-");
         const commonProps = {
             label: props["Label#3635:0"].value,
@@ -1880,26 +1987,19 @@ const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({
                 defaultChecked: true
             }
         };
-        return createElement(tag, commonProps);
+        return createLocalSnippetElement$5(tag, commonProps);
     });
 const createSelectBoxGroupHandler = (ctx)=>{
     const selectBoxHandler = createSelectBoxHandler();
     return defineComponentHandler(metadata$v.key, (node)=>{
         const props = node.componentProperties;
-        const tag = (()=>{
-            switch(props.Control.value){
-                case "Checkbox":
-                    return "CheckSelectBoxGroup";
-                case "Radio":
-                    return "RadioSelectBoxGroup";
-            }
-        })();
+        const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBoxGroup").with("Radio", ()=>"RadioSelectBoxGroup").exhaustive();
         const selectBoxes = findAllInstances({
             node,
             key: selectBoxHandler.key
         });
         const selectedSelectBox = selectBoxes.find((selectBox)=>selectBox.componentProperties.State.value.split("-").includes("Selected"));
-        const stack = createElement("Stack", {
+        const stack = createSeedReactElement("Stack", {
             gap: "spacingY.componentDefault"
         }, selectBoxes.map(selectBoxHandler.transform));
         const commonProps = {
@@ -1907,7 +2007,7 @@ const createSelectBoxGroupHandler = (ctx)=>{
                 defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
             }
         };
-        return createElement(tag, commonProps, stack);
+        return createLocalSnippetElement$5(tag, commonProps, stack);
     });
 };
 
@@ -1918,9 +2018,10 @@ const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$7.key, (nod
             width: match(layoutSizingHorizontal).with("FIXED", ()=>ctx.valueResolver.getFormattedValue.width(node)).with("FILL", ()=>"full").otherwise(()=>"full"),
             height: match(layoutSizingVertical).with("FIXED", ()=>ctx.valueResolver.getFormattedValue.height(node)).with("FILL", ()=>"full").otherwise(()=>"full")
         };
-        return createElement("Skeleton", commonProps);
+        return createSeedReactElement("Skeleton", commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("snackbar");
 const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$6.key, ({ componentProperties: props })=>{
         const commonProps = {
             message: props["Message#1528:4"].value,
@@ -1930,9 +2031,10 @@ const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$6.key, ({
             }
         };
         // TODO: adapter.create({ render })
-        return createElement("Snackbar", commonProps);
+        return createLocalSnippetElement$4("Snackbar", commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$3 } = createLocalSnippetHelper("switch");
 const createSwitchHandler = (_ctx)=>defineComponentHandler(metadata$4.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const size = handleSizeProp(props.Size.value);
@@ -1948,9 +2050,10 @@ const createSwitchHandler = (_ctx)=>defineComponentHandler(metadata$4.key, ({ co
                 disabled: true
             }
         };
-        return createElement("Switch", commonProps);
+        return createLocalSnippetElement$3("Switch", commonProps);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("tabs");
 const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
 const createTabsHugItemHandler = (_ctx)=>defineComponentHandler(TABS_HUG_ITEM_KEY, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
@@ -1963,7 +2066,7 @@ const createTabsHugItemHandler = (_ctx)=>defineComponentHandler(TABS_HUG_ITEM_KE
                 disabled: true
             }
         };
-        return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+        return createLocalSnippetElement$2("TabsTrigger", commonProps, props["Label#4478:2"].value);
     });
 const TABS_FILL_ITEM_KEY = "7275293344efb40ee9a3f5248ba2659b94a0b305";
 const createTabsFillItemHandler = (_ctx)=>defineComponentHandler(TABS_FILL_ITEM_KEY, ({ componentProperties: props })=>{
@@ -1977,7 +2080,7 @@ const createTabsFillItemHandler = (_ctx)=>defineComponentHandler(TABS_FILL_ITEM_
                 disabled: true
             }
         };
-        return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+        return createLocalSnippetElement$2("TabsTrigger", commonProps, props["Label#4478:2"].value);
     });
 const createTabsHandler = (ctx)=>{
     const tabsHugItemHandler = createTabsHugItemHandler();
@@ -1999,7 +2102,7 @@ const createTabsHandler = (ctx)=>{
         });
         const tabsItems = mappedItems.filter((item)=>item !== null);
         const selectedTabsItem = tabsItems.find(({ node: { componentProperties } })=>componentProperties.State.value.split("-").includes("Selected"))?.node;
-        const tabTriggerList = createElement("TabsList", undefined, tabsItems.map(({ triggerLayout, node })=>{
+        const tabTriggerList = createLocalSnippetElement$2("TabsList", undefined, tabsItems.map(({ triggerLayout, node })=>{
             switch(triggerLayout){
                 case "hug":
                     return tabsHugItemHandler.transform(node);
@@ -2009,7 +2112,7 @@ const createTabsHandler = (ctx)=>{
         }));
         const tabContents = tabsItems.map(({ node })=>{
             const value = node.componentProperties["Label#4478:2"].value;
-            return createElement("TabsContent", {
+            return createLocalSnippetElement$2("TabsContent", {
                 value
             }, "{/* TODO: 컨텐츠 추가 */}");
         });
@@ -2020,7 +2123,7 @@ const createTabsHandler = (ctx)=>{
                 defaultValue: selectedTabsItem.componentProperties["Label#4478:2"].value
             }
         };
-        return createElement("TabsRoot", commonProps, [
+        return createLocalSnippetElement$2("TabsRoot", commonProps, [
             tabTriggerList,
             ...tabContents
         ]);
@@ -2051,9 +2154,10 @@ const createTextButtonHandler = (ctx)=>defineComponentHandler(metadata$2.key, (n
                 disabled: true
             }
         };
-        return createElement("TextButton", commonProps, children);
+        return createSeedReactElement("TextButton", commonProps, children);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$1 } = createLocalSnippetHelper("text-field");
 const createTextFieldHandler = (ctx)=>defineComponentHandler(metadata$1.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("-");
@@ -2108,10 +2212,11 @@ const createTextFieldHandler = (ctx)=>defineComponentHandler(metadata$1.key, ({
         const inputProps = {
             placeholder
         };
-        const TextFieldChildren = createElement("TextFieldInput", inputProps);
-        return createElement("TextField", commonProps, TextFieldChildren);
+        const TextFieldChildren = createLocalSnippetElement$1("TextFieldInput", inputProps);
+        return createLocalSnippetElement$1("TextField", commonProps, TextFieldChildren);
     });
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
 const createToggleButtonHandler = (ctx)=>defineComponentHandler(metadata.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
@@ -2127,12 +2232,12 @@ const createToggleButtonHandler = (ctx)=>defineComponentHandler(metadata.key, ({
                 loading: true
             }
         };
-        return createElement("ToggleButton", commonProps, [
-            props["Show Prefix Icon#6122:392"].value ? createElement("PrefixIcon", {
+        return createLocalSnippetElement("ToggleButton", commonProps, [
+            props["Show Prefix Icon#6122:392"].value ? createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"])
             }) : undefined,
             props["Label#6122:49"].value,
-            props["Show Suffix Icon#6122:147"].value ? createElement("SuffixIcon", {
+            props["Show Suffix Icon#6122:147"].value ? createSeedReactElement("SuffixIcon", {
                 svg: ctx.iconHandler.transform(props["Suffix Icon#6122:343"])
             }) : undefined
         ]);
@@ -12067,12 +12172,15 @@ function createIconHandler({ iconService, iconNameFormatter = defaultIconNameFor
         if (!iconData) {
             return createElement("UnknownIcon");
         }
-        const { name, weight } = iconData;
+        const { name, weight, type } = iconData;
         const tagName = iconNameFormatter({
             name,
             weight
         });
-        return createElement(tagName);
+        if (type === "multicolor") {
+            return createMulticolorIconElement(tagName);
+        }
+        return createMonochromeIconElement(tagName);
     }
     return {
         isIconInstance,