@seed-design/figma 1.1.13 → 1.1.14

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

@@ -524,8 +524,9 @@ function createPropsConverter({ handlers, shorthands, defaults }) {
 
 function traverseNode(node, callback) {
     callback(node);
-    if ("children" in node) {
-        node.children.forEach((child)=>traverseNode(child, callback));
+    if (!("children" in node)) return;
+    for (const child of node.children){
+        traverseNode(child, callback);
     }
 }
 function findOne(node, callback) {
@@ -557,7 +558,8 @@ function getFirstSolidFill(node) {
     return fills[0];
 }
 function getFirstFillVariable(node) {
-    return node.boundVariables?.fills?.[0];
+    const fill = getFirstSolidFill(node);
+    return fill?.boundVariables?.color;
 }
 function getFirstStroke(node) {
     const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID" && (!("visible" in stroke) || stroke.visible === true)) ?? [];
@@ -567,10 +569,11 @@ function getFirstStroke(node) {
     return strokes[0];
 }
 function getFirstStrokeVariable(node) {
-    return node.boundVariables?.strokes?.[0];
+    const stroke = getFirstStroke(node);
+    return stroke?.boundVariables?.color;
 }
 
-function createValueResolver({ variableService, variableNameFormatter, styleService, textStyleNameFormatter, fillStyleResolver, rawValueFormatters, shouldInferVariableName }) {
+function createValueResolver({ variableService, variableNameFormatter, styleService, textStyleNameFormatter, effectStyleNameFormatter, fillStyleResolver, rawValueFormatters, shouldInferVariableName }) {
     function getVariableName(key) {
         const slug = variableService.getSlug(key);
         if (!slug) {
@@ -594,9 +597,9 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
             return undefined;
         }
     }
-    function processColor(key, value, scope) {
-        if (key) {
-            return getVariableName(key);
+    function processColor(id, value, scope) {
+        if (id) {
+            return getVariableName(id);
         }
         if (value !== undefined) {
             return inferVariableName(value, scope) ?? rawValueFormatters.color(value);
@@ -612,27 +615,27 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
             slug
         });
     }
-    function processDimension(key, value, scope) {
-        if (key) {
-            return getVariableName(key);
+    function processDimension(id, value, scope) {
+        if (id) {
+            return getVariableName(id);
         }
         if (value !== undefined) {
             return inferVariableName(value, scope) ?? rawValueFormatters.dimension(value);
         }
         return undefined;
     }
-    function processFontDimension(key, value, scope) {
-        if (key) {
-            return getVariableName(key);
+    function processFontDimension(id, value, scope) {
+        if (id) {
+            return getVariableName(id);
         }
         if (value !== undefined) {
             return inferVariableName(value, scope) ?? rawValueFormatters.fontDimension(value);
         }
         return undefined;
     }
-    function processFontWeight(key, value) {
-        if (key) {
-            return getVariableName(key);
+    function processFontWeight(id, value) {
+        if (id) {
+            return getVariableName(id);
         }
         if (value !== undefined) {
             const fontWeightToString = {
@@ -662,6 +665,7 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
         paddingTop: (node)=>processDimension(node.boundVariables?.paddingTop?.id, node.paddingTop, "GAP"),
         paddingBottom: (node)=>processDimension(node.boundVariables?.paddingBottom?.id, node.paddingBottom, "GAP"),
         itemSpacing: (node)=>processDimension(node.boundVariables?.itemSpacing?.id, node.itemSpacing, "GAP"),
+        counterAxisSpacing: (node)=>processDimension(node.boundVariables?.counterAxisSpacing?.id, node.counterAxisSpacing, "GAP"),
         frameFill: (node)=>node.fillStyleKey ? processFillStyle(node.fillStyleKey) : processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "FRAME_FILL"),
         shapeFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "SHAPE_FILL"),
         textFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "TEXT_FILL"),
@@ -672,7 +676,11 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
         bottomRightRadius: (node)=>processDimension(node.boundVariables?.bottomRightRadius?.id, node.rectangleCornerRadii?.[3] ?? node.cornerRadius, "CORNER_RADIUS"),
         fontSize: (node)=>processFontDimension(node.boundVariables?.fontSize?.[0]?.id, node.style.fontSize, "FONT_SIZE"),
         fontWeight: (node)=>processFontWeight(node.boundVariables?.fontWeight?.[0]?.id, node.style.fontWeight),
-        lineHeight: (node)=>processFontDimension(node.boundVariables?.lineHeight?.[0]?.id, node.style.lineHeightPx, "LINE_HEIGHT")
+        lineHeight: (node)=>processFontDimension(node.boundVariables?.lineHeight?.[0]?.id, node.style.lineHeightPx, "LINE_HEIGHT"),
+        boxShadow: (node)=>{
+            if (node.effects.length === 0) return undefined;
+            return node.effects.map(rawValueFormatters.boxShadow).join(", ");
+        }
     };
     function getTextStyleValue(node) {
         if (!node.textStyleKey) return undefined;
@@ -684,9 +692,20 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
             slug
         });
     }
+    function getEffectStyleValue(node) {
+        if (!node.effectStyleKey) return undefined;
+        const slug = styleService.getSlug(node.effectStyleKey);
+        if (!slug) {
+            return undefined;
+        }
+        return effectStyleNameFormatter({
+            slug
+        });
+    }
     return {
         getFormattedValue,
-        getTextStyleValue
+        getTextStyleValue,
+        getEffectStyleValue
     };
 }
 
@@ -883,6 +902,20 @@ function createStrokePropsConverter(valueResolver) {
         };
     });
 }
+function createShadowPropsConverter(valueResolver) {
+    return definePropsConverter((node)=>{
+        const effectStyleName = valueResolver.getEffectStyleValue(node);
+        if (effectStyleName) {
+            return {
+                boxShadow: effectStyleName
+            };
+        }
+        const boxShadow = valueResolver.getFormattedValue.boxShadow(node);
+        return {
+            boxShadow
+        };
+    });
+}
 
 const SEED_REACT_IMPORT_PATH = "@seed-design/react";
 const LOCAL_SNIPPET_BASE_PATH = "seed-design/ui";
@@ -922,6 +955,7 @@ function createRectangleTransformer({ propsConverters }) {
     return defineElementTransformer((node)=>{
         return createSeedReactElement("Box", {
             ...propsConverters.selfLayout(node),
+            ...propsConverters.shadow(node),
             background: "palette.gray200"
         }, undefined, {
             comment: "Rectangle Node Placeholder"
@@ -962,10 +996,12 @@ function createFrameTransformer({ propsConverters }) {
             ...isFlex ? propsConverters.containerLayout(node) : {},
             ...propsConverters.selfLayout(node),
             ...propsConverters.frameFill(node),
-            ...propsConverters.stroke(node)
+            ...propsConverters.stroke(node),
+            ...propsConverters.shadow(node)
         };
         const isStretch = props.align === undefined || props.align === "stretch";
         const layoutComponent = inferLayoutComponent(props, isFlex);
+        const hasSpacingMismatch = node.layoutWrap === "WRAP" && node.counterAxisSpacing !== undefined && node.itemSpacing !== node.counterAxisSpacing;
         const hasImageFill = node.fills.some(({ type })=>type === "IMAGE");
         const imgElement = hasImageFill ? createElement("img", {
             src: `https://placehold.co/${node.absoluteBoundingBox?.width ?? 100}x${node.absoluteBoundingBox?.height ?? 100}`
@@ -976,15 +1012,23 @@ function createFrameTransformer({ propsConverters }) {
                     alignSelf: undefined
                 }) : child) : transformedChildren
         ];
+        const comment = [
+            hasSpacingMismatch && // currently counterAxisSpacing is only supported when direction=row
+            `row-gap과 column-gap이 다릅니다. (row-gap: ${node.counterAxisSpacing}, column-gap: ${node.itemSpacing})`
+        ].filter((cmt)=>cmt).join(" ");
         switch(layoutComponent){
             case "VStack":
             case "HStack":
                 {
                     const { direction: _direction, ...rest } = props;
-                    return createSeedReactElement(layoutComponent, rest, processedChildren);
+                    return createSeedReactElement(layoutComponent, rest, processedChildren, {
+                        comment
+                    });
                 }
             case "Box":
-                return createSeedReactElement("Box", props, processedChildren);
+                return createSeedReactElement("Box", props, processedChildren, {
+                    comment
+                });
         }
     });
 }
@@ -1052,26 +1096,6 @@ function createTextTransformer({ propsConverters }) {
     });
 }
 
-const templateBannerDetach = {
-    "name": "templateBannerDetach",
-    "key": "b9670e4d68d2b1057f28916728a845dc9c160c0f",
-    "componentPropertyDefinitions": {
-        "Layout": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Title + Description",
-                "Description + Title"
-            ]
-        },
-        "Rounded": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "True",
-                "False"
-            ]
-        }
-    }
-};
 const templateButtonGroup = {
     "name": "templateButtonGroup",
     "key": "29109a34197f2eb5d390b1d9ebba270979a7b302",
@@ -1156,70 +1180,18 @@ const templateCustomPickerField = {
         }
     }
 };
-const templateResultSection = {
-    "name": "templateResultSection",
-    "key": "fabd52c41c63d921e37e0a1de373e4df2b496f30",
+const templateDisclaimer = {
+    "name": "templateDisclaimer",
+    "key": "e08d2594b76c6c0107e34c0071cab8ef844c8998",
     "componentPropertyDefinitions": {
-        "Title#16237:0": {
-            "type": "TEXT"
-        },
-        "Description#16237:5": {
-            "type": "TEXT"
-        },
-        "Asset Type#45154:9": {
-            "type": "INSTANCE_SWAP",
-            "preferredValues": [
-                {
-                    "type": "COMPONENT",
-                    "key": "3f2ed06bd34fbaf24d371cefa973e09e2c2572bf"
-                },
-                {
-                    "type": "COMPONENT",
-                    "key": "bf1ad3ad5c45a2e94fd800f7f6ecbe52ba0667ab"
-                },
-                {
-                    "type": "COMPONENT",
-                    "key": "d357dcf0fbff80f3bfa70fe4fd5d48a9bddd1b49"
-                },
-                {
-                    "type": "COMPONENT",
-                    "key": "a53df434b562c1eeb04dab9abd88431989c5fc33"
-                },
-                {
-                    "type": "COMPONENT",
-                    "key": "5e53811a1e1444deccb5147b6a57196a3be467c9"
-                },
-                {
-                    "type": "COMPONENT",
-                    "key": "3ff3999d2d2bbed2c7656210793d4f083901f73b"
-                },
-                {
-                    "type": "COMPONENT",
-                    "key": "56fcf964b7784ca83eaf6c9b1531de6150d23a0d"
-                },
-                {
-                    "type": "COMPONENT",
-                    "key": "5652618ddd66c844ab977d083d0dc41cb98f98ae"
-                }
-            ]
-        },
-        "Show Asset#45154:14": {
-            "type": "BOOLEAN"
-        },
-        "Show Buttons#53435:0": {
-            "type": "BOOLEAN"
-        },
-        "ㄴShow First Button#53766:0": {
-            "type": "BOOLEAN"
-        },
-        "ㄴShow Second Button#53766:3": {
+        "Show Title#54910:2": {
             "type": "BOOLEAN"
         },
         "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Large",
-                "Medium"
+                "t4(14pt)",
+                "t5(16pt)"
             ]
         }
     }
@@ -2235,17 +2207,16 @@ const menuSheet = {
         "Menu Group Count": {
             "type": "VARIANT",
             "variantOptions": [
+                "1",
                 "2",
-                "3",
-                "1"
+                "3"
             ]
         },
         "Layout": {
             "type": "VARIANT",
             "variantOptions": [
                 "Text Only",
-                "Text with Icon",
-                "Text with Subtext"
+                "Text with Icon"
             ]
         }
     }
@@ -2268,10 +2239,10 @@ const pageBanner = {
             "type": "VARIANT",
             "variantOptions": [
                 "Display",
+                "Display (With Action)",
                 "Actionable",
                 "Dismissible",
-                "With Action",
-                "Custom"
+                "Actionable (Custom)"
             ]
         },
         "Tone": {
@@ -2378,8 +2349,8 @@ const radio = {
         }
     }
 };
-const radioMark = {
-    "name": "radioMark",
+const radiomark = {
+    "name": "radiomark",
     "key": "832d696d6e9566610968cd70f128f500ec009d6a",
     "componentPropertyDefinitions": {
         "Size": {
@@ -2491,6 +2462,74 @@ const resizableChild = {
         }
     }
 };
+const resultSection = {
+    "name": "resultSection",
+    "key": "fabd52c41c63d921e37e0a1de373e4df2b496f30",
+    "componentPropertyDefinitions": {
+        "Title#16237:0": {
+            "type": "TEXT"
+        },
+        "Description#16237:5": {
+            "type": "TEXT"
+        },
+        "Asset Type#45154:9": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT",
+                    "key": "3f2ed06bd34fbaf24d371cefa973e09e2c2572bf"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "bf1ad3ad5c45a2e94fd800f7f6ecbe52ba0667ab"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "d357dcf0fbff80f3bfa70fe4fd5d48a9bddd1b49"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "a53df434b562c1eeb04dab9abd88431989c5fc33"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "5e53811a1e1444deccb5147b6a57196a3be467c9"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "3ff3999d2d2bbed2c7656210793d4f083901f73b"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "56fcf964b7784ca83eaf6c9b1531de6150d23a0d"
+                },
+                {
+                    "type": "COMPONENT",
+                    "key": "5652618ddd66c844ab977d083d0dc41cb98f98ae"
+                }
+            ]
+        },
+        "Show Asset#45154:14": {
+            "type": "BOOLEAN"
+        },
+        "Show Buttons#53435:0": {
+            "type": "BOOLEAN"
+        },
+        "ㄴShow First Button#53766:0": {
+            "type": "BOOLEAN"
+        },
+        "ㄴShow Second Button#53766:3": {
+            "type": "BOOLEAN"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Large",
+                "Medium"
+            ]
+        }
+    }
+};
 const rootTopNavigationGlobal = {
     "name": "rootTopNavigationGlobal",
     "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
@@ -2723,8 +2762,8 @@ const _switch = {
         }
     }
 };
-const switchMark = {
-    "name": "switchMark",
+const switchmark = {
+    "name": "switchmark",
     "key": "bc53f269089e02a1d241e2a21ac7631bfa49834e",
     "componentPropertyDefinitions": {
         "Size": {
@@ -2991,10 +3030,11 @@ var FIGMA_COMPONENTS = {
   pageBanner: pageBanner,
   progressCircle: progressCircle,
   radio: radio,
-  radioMark: radioMark,
+  radiomark: radiomark,
   reactionButton: reactionButton,
   resizableChild: resizableChild,
   resizableIcon: resizableIcon,
+  resultSection: resultSection,
   rootTopNavigationGlobal: rootTopNavigationGlobal,
   rootTopNavigationKr: rootTopNavigationKr,
   segmentedControl: segmentedControl,
@@ -3003,14 +3043,13 @@ var FIGMA_COMPONENTS = {
   slider: slider,
   snackbar: snackbar,
   superscriptChild: superscriptChild,
-  switchMark: switchMark,
+  switchmark: switchmark,
   tabs: tabs,
   tagGroup: tagGroup,
-  templateBannerDetach: templateBannerDetach,
   templateButtonGroup: templateButtonGroup,
   templateChipGroup: templateChipGroup,
   templateCustomPickerField: templateCustomPickerField,
-  templateResultSection: templateResultSection,
+  templateDisclaimer: templateDisclaimer,
   templateSelectBoxGroup: templateSelectBoxGroup,
   templateSliderField: templateSliderField,
   templateTextField: templateTextField,
@@ -4073,7 +4112,7 @@ const createMenuSheetHandler = (ctx)=>{
         const title = props["Show Header#17043:12"].value ? props["Title Text#14599:0"].value : undefined;
         // TODO: React 구현체에 description 추가 이후
         // const description = props["Description Text#21827:0"].value;
-        const { labelAlign } = match(props.Layout.value).with("Text with Icon", "Text with Subtext", ()=>({
+        const { labelAlign } = match(props.Layout.value).with("Text with Icon", ()=>({
                 labelAlign: "left"
             })).with("Text Only", ()=>({
                 labelAlign: "center"
@@ -4112,7 +4151,7 @@ const createPageBannerHandler = (ctx)=>{
             })).with("Display", ()=>({
                 tag: "PageBanner",
                 suffix: undefined
-            })).with("With Action", ()=>{
+            })).with("Display (With Action)", ()=>{
             const [buttonNode] = findAllInstances({
                 node,
                 key: SUFFIX_BUTTON_KEY
@@ -4122,7 +4161,7 @@ const createPageBannerHandler = (ctx)=>{
                 tag: "PageBanner",
                 suffix
             };
-        }).with("Custom", ()=>({
+        }).with("Actionable (Custom)", ()=>({
                 tag: "PageBanner",
                 suffix: createElement("div", undefined, "Custom Content")
             })).exhaustive();
@@ -4217,7 +4256,7 @@ const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(radio.key, ({
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("radio-group");
-const createRadioMarkHandler = (_ctx)=>defineComponentHandler(radioMark.key, ({ componentProperties: props })=>{
+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,
@@ -4253,7 +4292,7 @@ const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSn
 const createResultSectionHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
     const ghostButtonHandler = createActionButtonGhostHandler(ctx);
-    return defineComponentHandler(templateResultSection.key, (node, traverse)=>{
+    return defineComponentHandler(resultSection.key, (node, traverse)=>{
         const props = node.componentProperties;
         const [actionButton] = props["Show Buttons#53435:0"].value && props["ㄴShow First Button#53766:0"].value ? findAllInstances({
             node,
@@ -4473,7 +4512,7 @@ const createSnackbarHandler = (_ctx)=>defineComponentHandler(snackbar.key, ({ co
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("switch");
-const createSwitchMarkHandler = (_ctx)=>defineComponentHandler(switchMark.key, ({ componentProperties: props })=>{
+const createSwitchmarkHandler = (_ctx)=>defineComponentHandler(switchmark.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated] Brand", ()=>"brand").exhaustive();
         const commonProps = {
             tone,
@@ -5093,9 +5132,9 @@ const unboundSeedComponentHandlers = [
     createCheckboxHandler,
     createCheckmarkHandler,
     createRadioGroupItemHandler,
-    createRadioMarkHandler,
+    createRadiomarkHandler,
     createSwitchHandler,
-    createSwitchMarkHandler,
+    createSwitchmarkHandler,
     createAlertDialogHandler,
     createDividerHandler,
     createAvatarHandler,
@@ -6779,6 +6818,16 @@ const FIGMA_ICONS = {
         "type": "monochrome",
         "weight": "Line"
     },
+    "27885dd88c45e55e1ce6790b6517b663fbc89286": {
+        "name": "icon_keyhole_shield",
+        "type": "monochrome",
+        "weight": "Fill"
+    },
+    "2111483a75d693815d578415279d077e66412da1": {
+        "name": "icon_keyhole_shield",
+        "type": "monochrome",
+        "weight": "Line"
+    },
     "fe92b27029511a3fa4745e4d49cba81ee303cf48": {
         "name": "icon_laptop",
         "type": "monochrome",
@@ -8519,6 +8568,10 @@ const FIGMA_ICONS = {
         "name": "icon_tshirt_bubble2",
         "type": "multicolor"
     },
+    "ab66ee11be5539d340a87f1e9ca021fef1db3ef8": {
+        "name": "icon_vest_horizstripe",
+        "type": "multicolor"
+    },
     "7ddb6f0f63708485a75cb21a25fae01671a34562": {
         "name": "icon_warninglight",
         "type": "multicolor"
@@ -8595,7 +8648,7 @@ const FIGMA_STYLES = [
     {
         "styleType": "TEXT",
         "key": "af24f9e7cc90af3bf2a18029dd59ae0646966486",
-        "name": "legacy-13-150",
+        "name": "scale/legacy-13-150",
         "description": "13",
         "remote": false
     },
@@ -8627,6 +8680,27 @@ const FIGMA_STYLES = [
         "description": "11",
         "remote": false
     },
+    {
+        "styleType": "TEXT",
+        "key": "ab6db5fae979eef82d7eece9237bd04c02707f57",
+        "name": "scale/t1-static-bold",
+        "description": "11",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "16c25fb788efbfe8f6d042820e342077a461f9bf",
+        "name": "scale/t1-static-medium",
+        "description": "11",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "5579ed6f529f5e97049e0842212b4958437eea34",
+        "name": "scale/t1-static-regular",
+        "description": "11",
+        "remote": false
+    },
     {
         "styleType": "TEXT",
         "key": "6ea6b06312771259d59de265a5ef12cd1dae9102",
@@ -8634,6 +8708,13 @@ const FIGMA_STYLES = [
         "description": "26",
         "remote": false
     },
+    {
+        "styleType": "TEXT",
+        "key": "08861e25c3f74a29c2ae4ce007fe50b63e302392",
+        "name": "scale/t10-static-bold",
+        "description": "26",
+        "remote": false
+    },
     {
         "styleType": "TEXT",
         "key": "8378bd59b14f5682dcaf20110efde4b7a1fb18e3",
@@ -8655,6 +8736,27 @@ const FIGMA_STYLES = [
         "description": "12",
         "remote": false
     },
+    {
+        "styleType": "TEXT",
+        "key": "4c6e5c31b949694aa08bf8d4d5cc445e22cf301f",
+        "name": "scale/t2-static-bold",
+        "description": "12",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "7d4bb16ddefb735fd197123b013864e7c412a934",
+        "name": "scale/t2-static-medium",
+        "description": "12",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "e05fbcacd044da0c9e6b73c7382bc4562a4a5d30",
+        "name": "scale/t2-static-regular",
+        "description": "12",
+        "remote": false
+    },
     {
         "styleType": "TEXT",
         "key": "f749d659a689cbbecbdbb1b559056731234332a3",
@@ -8676,6 +8778,27 @@ const FIGMA_STYLES = [
         "description": "13",
         "remote": false
     },
+    {
+        "styleType": "TEXT",
+        "key": "3174e2a628cf75bc8f906af35b9b5d04595267c8",
+        "name": "scale/t3-static-bold",
+        "description": "13",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "c19d7f5ec3290802216aa3b0993931835d8fa3b5",
+        "name": "scale/t3-static-medium",
+        "description": "13",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "0cda3e483e52409e3ca59a019f29c16be078355f",
+        "name": "scale/t3-static-regular",
+        "description": "13",
+        "remote": false
+    },
     {
         "styleType": "TEXT",
         "key": "a85ea49c1625319427c047bc206c26e708012030",
@@ -8697,6 +8820,27 @@ const FIGMA_STYLES = [
         "description": "14",
         "remote": false
     },
+    {
+        "styleType": "TEXT",
+        "key": "35fd98a75610254f7c8c15c6e7b71d67fccd9eed",
+        "name": "scale/t4-static-bold",
+        "description": "14",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "c785ba7fed186bd4c98295bdc2292933faed98ef",
+        "name": "scale/t4-static-medium",
+        "description": "14",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "51a90741bcc1a7dc81293eae0f085a8d5fb01855",
+        "name": "scale/t4-static-regular",
+        "description": "14",
+        "remote": false
+    },
     {
         "styleType": "TEXT",
         "key": "8eff229c53f06eeb418f39ad1cb3dbe12480f12b",
@@ -8718,6 +8862,27 @@ const FIGMA_STYLES = [
         "description": "16",
         "remote": false
     },
+    {
+        "styleType": "TEXT",
+        "key": "37a672b087c5d72461b75c679924245ad89bcb06",
+        "name": "scale/t5-static-bold",
+        "description": "16",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "8b295f9759faed27b6a03cc50a8b257bf3af5cd0",
+        "name": "scale/t5-static-medium",
+        "description": "16",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "2011f31d265d6bb4535da4f16eb4f5d68f48d56e",
+        "name": "scale/t5-static-regular",
+        "description": "16",
+        "remote": false
+    },
     {
         "styleType": "TEXT",
         "key": "adf921a56e89b5737a6b626034cfea184e828370",
@@ -8741,23 +8906,65 @@ const FIGMA_STYLES = [
     },
     {
         "styleType": "TEXT",
-        "key": "182d9252d7f7380075915a89e6160d7595124bc3",
-        "name": "scale/t7-bold",
-        "description": "20",
+        "key": "122ff9fd500bc63517b01a103a399b26130e7f0b",
+        "name": "scale/t6-static-bold",
+        "description": "18",
         "remote": false
     },
     {
         "styleType": "TEXT",
-        "key": "b2e24640e7dc1264fc638434511c9f994e1e149c",
-        "name": "scale/t7-medium",
-        "description": "20",
+        "key": "0de548c3afd5c31e8b1c42a0170d44beba400a55",
+        "name": "scale/t6-static-medium",
+        "description": "18",
         "remote": false
     },
     {
         "styleType": "TEXT",
-        "key": "eb1c0409582609a51fe9afc9e31301d529e3d12f",
-        "name": "scale/t7-regular",
-        "description": "20",
+        "key": "c6d683f532e80c0c04e05057674e92265541a231",
+        "name": "scale/t6-static-regular",
+        "description": "18",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "182d9252d7f7380075915a89e6160d7595124bc3",
+        "name": "scale/t7-bold",
+        "description": "20",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "b2e24640e7dc1264fc638434511c9f994e1e149c",
+        "name": "scale/t7-medium",
+        "description": "20",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "eb1c0409582609a51fe9afc9e31301d529e3d12f",
+        "name": "scale/t7-regular",
+        "description": "20",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "2454dff78b9ac153728a2cff00ca1d28f234e3a0",
+        "name": "scale/t7-static-bold",
+        "description": "20",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "f0da131559e6b466810b06343f94c551a0593bb4",
+        "name": "scale/t7-static-medium",
+        "description": "20",
+        "remote": false
+    },
+    {
+        "styleType": "TEXT",
+        "key": "07ef3b8fcb31319d1d83100957eb06fc0e37c1e9",
+        "name": "scale/t7-static-regular",
+        "description": "20",
         "remote": false
     },
     {
@@ -8767,6 +8974,13 @@ const FIGMA_STYLES = [
         "description": "22",
         "remote": false
     },
+    {
+        "styleType": "TEXT",
+        "key": "37821f18bc4416d7a81fa429d89240317a8f17e6",
+        "name": "scale/t8-static-bold",
+        "description": "22",
+        "remote": false
+    },
     {
         "styleType": "TEXT",
         "key": "b146e1317c67db787834f1890493225bdbba4e48",
@@ -8774,6 +8988,13 @@ const FIGMA_STYLES = [
         "description": "24",
         "remote": false
     },
+    {
+        "styleType": "TEXT",
+        "key": "c06e147e98440109199e2e3fa2a63390d19afb0c",
+        "name": "scale/t9-static-bold",
+        "description": "24",
+        "remote": false
+    },
     {
         "styleType": "TEXT",
         "key": "85422ef9f0230f821f1a9e6d2f8f86b3ba87f20d",
@@ -8787,6 +9008,27 @@ const FIGMA_STYLES = [
         "name": "semantic/screen-title",
         "description": "26",
         "remote": false
+    },
+    {
+        "styleType": "EFFECT",
+        "key": "4717150d124a52434b2777609b046aa73a94c7ba",
+        "name": "shadow/s1",
+        "description": "",
+        "remote": false
+    },
+    {
+        "styleType": "EFFECT",
+        "key": "906bc739e1b77bc1719762826f6d1154893c8266",
+        "name": "shadow/s2",
+        "description": "",
+        "remote": false
+    },
+    {
+        "styleType": "EFFECT",
+        "key": "56f376d9146d9e158ba127ee8347c3cbf8329f19",
+        "name": "shadow/s3",
+        "description": "화면의 다른 요소들보다 가장 높은 계층에 위치할 때 사용됩니다.",
+        "remote": false
     }
 ];
 
@@ -8845,8 +9087,8 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:654:20851",
             "VariableID:1:171",
             "VariableID:41186:6437",
-            "VariableID:1:172",
             "VariableID:1:158",
+            "VariableID:1:172",
             "VariableID:1:161",
             "VariableID:1:159",
             "VariableID:576:22878",
@@ -8901,6 +9143,16 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:12548:1436",
             "VariableID:12548:1438",
             "VariableID:12548:1439",
+            "VariableID:54897:41770",
+            "VariableID:54897:41771",
+            "VariableID:54897:41772",
+            "VariableID:54897:41773",
+            "VariableID:54897:41775",
+            "VariableID:54897:41776",
+            "VariableID:54897:41777",
+            "VariableID:54897:41778",
+            "VariableID:54897:41779",
+            "VariableID:54897:41780",
             "VariableID:14609:16910",
             "VariableID:29333:3993",
             "VariableID:29333:10509",
@@ -9352,6 +9604,286 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
+    "VariableID:54897:41776": {
+        "name": "banner/blue",
+        "id": "VariableID:54897:41776",
+        "remote": false,
+        "key": "f0d9f5531252da917ad0d0b5618c384218463fa1",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 0.8823529481887817,
+                "g": 0.9686274528503418,
+                "b": 1,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.05098039284348488,
+                "g": 0.16470588743686676,
+                "b": 0.22745098173618317,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41780": {
+        "name": "banner/cool-gray",
+        "id": "VariableID:54897:41780",
+        "remote": false,
+        "key": "406783eff4302eda53767dc58be1467df8e36ba9",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 0.9215686321258545,
+                "g": 0.9450980424880981,
+                "b": 0.9607843160629272,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.1411764770746231,
+                "g": 0.1725490242242813,
+                "b": 0.20000000298023224,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41773": {
+        "name": "banner/green",
+        "id": "VariableID:54897:41773",
+        "remote": false,
+        "key": "550727f1d9dd9badfe54ff576b58b0333366a9e3",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 0.9411764740943909,
+                "g": 0.9843137264251709,
+                "b": 0.8980392217636108,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.11764705926179886,
+                "g": 0.21176470816135406,
+                "b": 0.10980392247438431,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41771": {
+        "name": "banner/orange",
+        "id": "VariableID:54897:41771",
+        "remote": false,
+        "key": "ef1b5c743d00c45c11fbc851e22c06159b5df1e0",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 1,
+                "g": 0.9490196108818054,
+                "b": 0.8823529481887817,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.25882354378700256,
+                "g": 0.13725490868091583,
+                "b": 0.03921568766236305,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41778": {
+        "name": "banner/pink",
+        "id": "VariableID:54897:41778",
+        "remote": false,
+        "key": "04118a56e71ec0771842a975f80b1704daf0d087",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 1,
+                "g": 0.9215686321258545,
+                "b": 0.9450980424880981,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.23137255012989044,
+                "g": 0.09019608050584793,
+                "b": 0.1725490242242813,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41777": {
+        "name": "banner/purple",
+        "id": "VariableID:54897:41777",
+        "remote": false,
+        "key": "2b4f397b4df3df91aae0020b486d03e7e59de3a1",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 0.9607843160629272,
+                "g": 0.9254902005195618,
+                "b": 1,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.18039216101169586,
+                "g": 0.11764705926179886,
+                "b": 0.2705882489681244,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41770": {
+        "name": "banner/red",
+        "id": "VariableID:54897:41770",
+        "remote": false,
+        "key": "332c3632c7252e24d088ff6775a717f2f27514b7",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 1,
+                "g": 0.9254902005195618,
+                "b": 0.9333333373069763,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.22745098173618317,
+                "g": 0.05882352963089943,
+                "b": 0.08235294371843338,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41775": {
+        "name": "banner/teal",
+        "id": "VariableID:54897:41775",
+        "remote": false,
+        "key": "44155474e492d3bf5a93f8d5b68324c052c279e6",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 0.9019607901573181,
+                "g": 0.9803921580314636,
+                "b": 0.9647058844566345,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.0784313753247261,
+                "g": 0.21176470816135406,
+                "b": 0.20000000298023224,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41779": {
+        "name": "banner/warm-gray",
+        "id": "VariableID:54897:41779",
+        "remote": false,
+        "key": "795d9d04de8ba3479af2ff06e3359e7a8648caa3",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 0.9490196108818054,
+                "g": 0.9411764740943909,
+                "b": 0.9333333373069763,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.18431372940540314,
+                "g": 0.16862745583057404,
+                "b": 0.15294118225574493,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:54897:41772": {
+        "name": "banner/yellow",
+        "id": "VariableID:54897:41772",
+        "remote": false,
+        "key": "dc09473d4db3cb127f45ee30f88ecb682d25d723",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 1,
+                "g": 0.9803921580314636,
+                "b": 0.8823529481887817,
+                "a": 1
+            },
+            "1928:8": {
+                "r": 0.24313725531101227,
+                "g": 0.16862745583057404,
+                "b": 0,
+                "a": 1
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
     "VariableID:1:151": {
         "name": "bg/brand-solid",
         "id": "VariableID:1:151",
@@ -16176,6 +16708,11 @@ const defaultTextStyleNameFormatter = ({ slug })=>{
         mergeAmbiguousCharacters: true
     });
 };
+const defaultEffectStyleNameFormatter = ({ slug })=>{
+    return camelCase(slug[slug.length - 1], {
+        mergeAmbiguousCharacters: true
+    });
+};
 const defaultFillStyleResolver = ({ slug })=>{
     const [, ...rest] = slug;
     if (rest[0] === "fade") {
@@ -16201,11 +16738,18 @@ const defaultFillStyleResolver = ({ slug })=>{
         })
     };
 };
+function formatBoxShadow({ type, color, offset, radius, spread }) {
+    const inset = type === "INNER_SHADOW" ? "inset " : "";
+    const colorStr = toCssRgba(color);
+    const spreadStr = spread ? ` ${spread}px` : "";
+    return `${inset}${offset.x}px ${offset.y}px ${radius}px${spreadStr} ${colorStr}`;
+}
 const defaultRawValueFormatters = {
     color: (value)=>toCssRgba(value),
     dimension: (value)=>toCssPixel(value),
     fontDimension: (value)=>toCssPixel(value),
-    fontWeight: (value)=>value
+    fontWeight: (value)=>value,
+    boxShadow: formatBoxShadow
 };
 
 const iconHandler = createIconHandler({
@@ -16218,6 +16762,7 @@ function createPipeline(options = {}) {
         variableNameFormatter: defaultVariableNameFormatter,
         styleService,
         textStyleNameFormatter: defaultTextStyleNameFormatter,
+        effectStyleNameFormatter: defaultEffectStyleNameFormatter,
         fillStyleResolver: defaultFillStyleResolver,
         rawValueFormatters: defaultRawValueFormatters,
         shouldInferVariableName
@@ -16231,6 +16776,7 @@ function createPipeline(options = {}) {
     const vectorChildrenFillPropsConverter = createVectorChildrenFillPropsConverter(valueResolver);
     const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
     const strokePropsConverter = createStrokePropsConverter(valueResolver);
+    const shadowPropsConverter = createShadowPropsConverter(valueResolver);
     const typeStylePropsConverter = createTypeStylePropsConverter({
         valueResolver
     });
@@ -16244,6 +16790,7 @@ function createPipeline(options = {}) {
         vectorChildrenFill: vectorChildrenFillPropsConverter,
         radius: radiusPropsConverter,
         stroke: strokePropsConverter,
+        shadow: shadowPropsConverter,
         typeStyle: typeStylePropsConverter
     };
     const componentHandlers = Object.fromEntries([
@@ -16285,4 +16832,4 @@ function createPipeline(options = {}) {
     return codeGenerator;
 }
 
-export { bindComponentHandler, createBooleanOperationTransformer, createContainerLayoutPropsConverter, createFrameFillPropsConverter, createFrameTransformer, createIconSelfLayoutPropsConverter, createInstanceTransformer, createPipeline, createRadiusPropsConverter, createRectangleTransformer, createSelfLayoutPropsConverter, createShapeFillPropsConverter, createStrokePropsConverter, createTextFillPropsConverter, createTextTransformer, createTypeStylePropsConverter, createVectorChildrenFillPropsConverter, createVectorTransformer, unboundSeedComponentHandlers };
+export { bindComponentHandler, createBooleanOperationTransformer, createContainerLayoutPropsConverter, createFrameFillPropsConverter, createFrameTransformer, createIconSelfLayoutPropsConverter, createInstanceTransformer, createPipeline, createRadiusPropsConverter, createRectangleTransformer, createSelfLayoutPropsConverter, createShadowPropsConverter, createShapeFillPropsConverter, createStrokePropsConverter, createTextFillPropsConverter, createTextTransformer, createTypeStylePropsConverter, createVectorChildrenFillPropsConverter, createVectorTransformer, unboundSeedComponentHandlers };