@seed-design/figma 1.1.9 → 1.1.12

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

@@ -1060,9 +1060,7 @@ const templateBannerDetach = {
             "type": "VARIANT",
             "variantOptions": [
                 "Title + Description",
-                "Description + Title",
-                "Layout3",
-                "Layout4"
+                "Description + Title"
             ]
         },
         "Rounded": {
@@ -1130,34 +1128,6 @@ const templateChipGroup = {
         }
     }
 };
-const templateCompletion = {
-    "name": "templateCompletion",
-    "key": "d91c789c66c2da665d820318f1a4d8671946eb79",
-    "componentPropertyDefinitions": {
-        "Description#28427:4": {
-            "type": "TEXT"
-        },
-        "Title#28427:5": {
-            "type": "TEXT"
-        },
-        "Show Description#28427:6": {
-            "type": "BOOLEAN"
-        },
-        "Show Button#28427:7": {
-            "type": "BOOLEAN"
-        },
-        "Show Top Navigation#28427:8": {
-            "type": "BOOLEAN"
-        },
-        "Variant": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Screen",
-                "Dialog"
-            ]
-        }
-    }
-};
 const templateCustomPickerField = {
     "name": "templateCustomPickerField",
     "key": "91d73dfc297a467d78dc91ade6ff9be9a152619e",
@@ -1171,7 +1141,7 @@ const templateCustomPickerField = {
         "State": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
+                "Enabled",
                 "Error",
                 "Disabled",
                 "Read Only"
@@ -1186,31 +1156,70 @@ const templateCustomPickerField = {
         }
     }
 };
-const templateErrorState = {
-    "name": "templateErrorState",
-    "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
+const templateResultSection = {
+    "name": "templateResultSection",
+    "key": "fabd52c41c63d921e37e0a1de373e4df2b496f30",
     "componentPropertyDefinitions": {
-        "Show Action Button#9080:5": {
-            "type": "BOOLEAN"
-        },
         "Title#16237:0": {
             "type": "TEXT"
         },
         "Description#16237:5": {
             "type": "TEXT"
         },
-        "Variant": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Default",
-                "Basement"
+        "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"
+                }
             ]
         },
-        "Layout": {
+        "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": [
-                "With Title",
-                "Description Only"
+                "Large",
+                "Medium"
             ]
         }
     }
@@ -1252,11 +1261,11 @@ const templateSliderField = {
         "State": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
+                "Enabled",
+                "Pressed",
                 "Error",
                 "Disabled",
-                "Read Only",
-                "Pressed"
+                "Read Only"
             ]
         }
     }
@@ -1281,7 +1290,7 @@ const templateTextField = {
         "State": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
+                "Enabled",
                 "Focused",
                 "Error",
                 "Error Focused",
@@ -1305,7 +1314,7 @@ const templateTextareaField = {
         "State": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
+                "Enabled",
                 "Focused",
                 "Error",
                 "Error Focused",
@@ -1335,7 +1344,8 @@ const templateTopNavigation = {
         "Variants": {
             "type": "VARIANT",
             "variantOptions": [
-                "Main Tab",
+                "Root",
+                "Root Preset",
                 "Standard",
                 "Standard Transparent",
                 "Large Title"
@@ -1608,6 +1618,9 @@ const bottomSheet = {
         "Show Handle#49774:6": {
             "type": "BOOLEAN"
         },
+        "Show Scroll Fog(Figma Only)#53171:3": {
+            "type": "BOOLEAN"
+        },
         "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
@@ -2139,8 +2152,7 @@ const listItem = {
             "variantOptions": [
                 "Enabled",
                 "Pressed",
-                "Disabled",
-                "Highlighted"
+                "Disabled"
             ]
         },
         "Variants": {
@@ -2149,54 +2161,12 @@ const listItem = {
                 "Single Line",
                 "Multi Line"
             ]
-        }
-    }
-};
-const mainTabNavigationGlobal = {
-    "name": "mainTabNavigationGlobal",
-    "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
-    "componentPropertyDefinitions": {
-        "Title#6406:6": {
-            "type": "TEXT"
-        },
-        "Button Label#6409:18": {
-            "type": "TEXT"
-        },
-        "Title Type": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Text",
-                "Text +  Button"
-            ]
-        },
-        "Variant": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Layer Default",
-                "Transparent"
-            ]
-        }
-    }
-};
-const mainTabNavigationKr = {
-    "name": "mainTabNavigationKr",
-    "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
-    "componentPropertyDefinitions": {
-        "Title#6406:6": {
-            "type": "TEXT"
-        },
-        "Title Type": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Text",
-                "Button"
-            ]
         },
-        "Variant": {
+        "Highlighted": {
             "type": "VARIANT",
             "variantOptions": [
-                "Layer Default",
-                "Transparent"
+                "True",
+                "False"
             ]
         }
     }
@@ -2259,7 +2229,7 @@ const menuSheet = {
         "Show Safe Area#25531:15": {
             "type": "BOOLEAN"
         },
-        "Show Description#32984:0": {
+        "Show Header Description#32984:0": {
             "type": "BOOLEAN"
         },
         "Menu Group Count": {
@@ -2274,7 +2244,8 @@ const menuSheet = {
             "type": "VARIANT",
             "variantOptions": [
                 "Text Only",
-                "Text with Icon"
+                "Text with Icon",
+                "Text with Subtext"
             ]
         }
     }
@@ -2310,7 +2281,8 @@ const pageBanner = {
                 "Informative",
                 "Positive",
                 "Warning",
-                "Critical"
+                "Critical",
+                "Magic"
             ]
         },
         "Variant": {
@@ -2519,24 +2491,45 @@ const resizableChild = {
         }
     }
 };
-const scrollFog = {
-    "name": "scrollFog",
-    "key": "0a06ea65fe164e0245fde6ac6c97135990a4de3c",
+const rootTopNavigationGlobal = {
+    "name": "rootTopNavigationGlobal",
+    "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
     "componentPropertyDefinitions": {
-        "Orientation": {
+        "Title#6406:6": {
+            "type": "TEXT"
+        },
+        "Button Label#6409:18": {
+            "type": "TEXT"
+        },
+        "Show Button#52619:0": {
+            "type": "BOOLEAN"
+        },
+        "Title Type": {
             "type": "VARIANT",
             "variantOptions": [
-                "Top ⬇️",
-                "Bottom ⬆️",
-                "Right ➡️",
-                "Left ⬅️"
+                "Text"
             ]
         },
-        "Layer": {
+        "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "Default",
-                "Floating"
+                "Layer Default"
+            ]
+        }
+    }
+};
+const rootTopNavigationKr = {
+    "name": "rootTopNavigationKr",
+    "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
+    "componentPropertyDefinitions": {
+        "Title#6406:6": {
+            "type": "TEXT"
+        },
+        "Title Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Text",
+                "Button"
             ]
         }
     }
@@ -2615,7 +2608,7 @@ const skeleton = {
 };
 const slider = {
     "name": "slider",
-    "key": "c748f314f790eb804138bd105bfb0bd0584c9aa1",
+    "key": "14b3278452f03fa01ecc8012a07f124766714566",
     "componentPropertyDefinitions": {
         "Has Tick Mark#47921:0": {
             "type": "BOOLEAN"
@@ -2992,8 +2985,6 @@ var FIGMA_COMPONENTS = {
   helpBubble: helpBubble,
   listHeader: listHeader,
   listItem: listItem,
-  mainTabNavigationGlobal: mainTabNavigationGlobal,
-  mainTabNavigationKr: mainTabNavigationKr,
   mannerTemp: mannerTemp,
   mannerTempBadge: mannerTempBadge,
   menuSheet: menuSheet,
@@ -3004,7 +2995,8 @@ var FIGMA_COMPONENTS = {
   reactionButton: reactionButton,
   resizableChild: resizableChild,
   resizableIcon: resizableIcon,
-  scrollFog: scrollFog,
+  rootTopNavigationGlobal: rootTopNavigationGlobal,
+  rootTopNavigationKr: rootTopNavigationKr,
   segmentedControl: segmentedControl,
   selectBox: selectBox,
   skeleton: skeleton,
@@ -3017,9 +3009,8 @@ var FIGMA_COMPONENTS = {
   templateBannerDetach: templateBannerDetach,
   templateButtonGroup: templateButtonGroup,
   templateChipGroup: templateChipGroup,
-  templateCompletion: templateCompletion,
   templateCustomPickerField: templateCustomPickerField,
-  templateErrorState: templateErrorState,
+  templateResultSection: templateResultSection,
   templateSelectBoxGroup: templateSelectBoxGroup,
   templateSliderField: templateSliderField,
   templateTextField: templateTextField,
@@ -3152,7 +3143,10 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTT
 const { createLocalSnippetElement: createLocalSnippetElement$x } = createLocalSnippetHelper("alert-dialog");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$3 } = createLocalSnippetHelper("action-button");
 const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
-const createAlertDialogHandler = (_ctx)=>defineComponentHandler(alertDialog.key, (node, traverse)=>{
+const createAlertDialogHandler = (ctx)=>{
+    const actionButtonHandler = createActionButtonHandler(ctx);
+    const actionButtonGhostHandler = createActionButtonGhostHandler(ctx);
+    return defineComponentHandler(alertDialog.key, (node, traverse)=>{
         const props = node.componentProperties;
         const alertDialogHeader = createLocalSnippetElement$x("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
@@ -3172,7 +3166,30 @@ const createAlertDialogHandler = (_ctx)=>defineComponentHandler(alertDialog.key,
         const footerNode = footerNodes[0];
         const footerNodeProps = traverse(footerNode)?.props;
         const buttons = footerNode.children.map(traverse);
-        const alertDialogFooterChildren = match(footerNode.componentProperties.Type.value).with("Single", ()=>buttons).with("Neutral", "Critical", ()=>createSeedReactElement("ResponsivePair", footerNodeProps, buttons)).with("Neutral (Overflow)", "Critical (Overflow)", "Nonpreferred", ()=>createSeedReactElement("VStack", footerNodeProps, buttons)).exhaustive();
+        const alertDialogFooterChildren = match(footerNode.componentProperties.Type.value).with("Single", ()=>buttons).with("Neutral", "Critical", ()=>createSeedReactElement("ResponsivePair", footerNodeProps, buttons)).with("Neutral (Overflow)", "Critical (Overflow)", ()=>createSeedReactElement("VStack", footerNodeProps, buttons)).with("Nonpreferred", ()=>{
+            const [actionButtonNode] = findAllInstances({
+                node: footerNode,
+                key: actionButtonHandler.key
+            });
+            const [ghostButtonNode] = findAllInstances({
+                node: footerNode,
+                key: actionButtonGhostHandler.key
+            });
+            const actionButton = actionButtonHandler.transform(actionButtonNode, traverse);
+            const ghostButton = actionButtonGhostHandler.transform(ghostButtonNode, traverse);
+            const buttons = [
+                actionButton,
+                {
+                    ...ghostButton,
+                    props: {
+                        ...ghostButton.props,
+                        // nonpreferred shouldn't have bleedX, but in Figma it's not possible to represent that
+                        bleedX: undefined
+                    }
+                }
+            ];
+            return createSeedReactElement("VStack", footerNodeProps, buttons);
+        }).exhaustive();
         const alertDialogFooter = createLocalSnippetElement$x("AlertDialogFooter", undefined, alertDialogFooterChildren);
         return createLocalSnippetElement$x("AlertDialogRoot", {
             open: true
@@ -3186,6 +3203,7 @@ const createAlertDialogHandler = (_ctx)=>defineComponentHandler(alertDialog.key,
             ])
         ]);
     });
+};
 
 const { createLocalSnippetElement: createLocalSnippetElement$w } = createLocalSnippetHelper("app-bar");
 const APP_BAR_TITLE_KEY = "d2cc4f615b2b44098be89448ad1c573f94af0355";
@@ -3574,41 +3592,6 @@ const createDividerHandler = (_ctx)=>defineComponentHandler(divider.key, ({ comp
         return createSeedReactElement("Divider", commonProps, undefined);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("error-state");
-const createErrorStateHandler = (ctx)=>{
-    const actionButtonHandler = createActionButtonHandler(ctx);
-    const ghostButtonHandler = createActionButtonGhostHandler(ctx);
-    return defineComponentHandler(templateErrorState.key, (node, traverse)=>{
-        const props = node.componentProperties;
-        const [actionButton] = findAllInstances({
-            node,
-            key: actionButtonHandler.key
-        });
-        const [ghostButton] = findAllInstances({
-            node,
-            key: ghostButtonHandler.key
-        });
-        const commonProps = {
-            variant: camelCase(props.Variant.value),
-            ...props.Layout.value === "With Title" && {
-                title: props["Title#16237:0"].value
-            },
-            description: props["Description#16237:5"].value,
-            ...actionButton && {
-                primaryActionProps: {
-                    children: actionButtonHandler.transform(actionButton, traverse).children[0]
-                }
-            },
-            ...ghostButton && {
-                secondaryActionProps: {
-                    children: ghostButtonHandler.transform(ghostButton, traverse).children[0]
-                }
-            }
-        };
-        return createLocalSnippetElement$m("ErrorState", commonProps);
-    });
-};
-
 const templateAddressPickerField = {
     "key": "a6cb0e888094d95ca0e9862f4775b34407b3611d"
 };
@@ -3718,7 +3701,7 @@ const FIELD_KEYS = {
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("field-button");
+const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("field-button");
 const INPUT_BUTTON_KEY = "965bdecb58755af9a08d60cc3c8d2d33b42e15f0";
 const INPUT_BUTTON_PREFIX_KEY = "12b40c736a098298c64ba16de85702b4b460d1f1";
 const INPUT_BUTTON_SUFFIX_KEY = "5dda27af9f4afafa471925c17acf97d81912877a";
@@ -3777,11 +3760,11 @@ const createFieldButtonHandler = (ctx)=>{
         // these can be fragile but better than having 9 different handlers
         const placeholder = findOne(node, (node)=>node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"));
         const value = findOne(node, (node)=>node.type === "TEXT" && node.name.toLowerCase().includes("value"));
-        return createLocalSnippetElement$l("FieldButton", {
+        return createLocalSnippetElement$m("FieldButton", {
             ...headerProps,
             ...footerProps,
             ...commonProps
-        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$l("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$l("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
+        }, props["Has Value"].value === "True" && value ? createLocalSnippetElement$m("FieldButtonValue", undefined, value.characters) : placeholder ? createLocalSnippetElement$m("FieldButtonPlaceholder", undefined, placeholder.characters) : undefined, {
             comment: "buttonProps를 통해 aria-label을 제공하세요."
         });
     });
@@ -3828,7 +3811,7 @@ const createAddressFieldHandler = (ctx)=>{
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("floating-action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("floating-action-button");
 const BUTTON_TYPE_KEY = "8cecc85275115d653579d4c3156567ebf19f7b27";
 const MENU_TYPE_KEY = "400124347392c15473f9cd2d8a6aedb64f3baf36";
 const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(floatingActionButton.key, (node)=>{
@@ -3852,10 +3835,10 @@ const createFloatingActionButtonHandler = (ctx)=>defineComponentHandler(floating
                 label: menu.componentProperties["Label#29766:9"].value
             };
         })();
-        return createLocalSnippetElement$k("FloatingActionButton", commonProps);
+        return createLocalSnippetElement$l("FloatingActionButton", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("help-bubble");
+const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("help-bubble");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$1 } = createLocalSnippetHelper("action-button");
 const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(helpBubble.key, ({ componentProperties: props })=>{
         const placement = (()=>{
@@ -3895,20 +3878,20 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(helpBubble.key, (
             showCloseButton: props["Show Close Button#40538:0"].value,
             placement
         };
-        return createLocalSnippetElement$j("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"), {
+        return createLocalSnippetElement$k("HelpBubbleTrigger", commonProps, createLocalSnippetElementTrigger$1("ActionButton", {}, "HelpBubble 열기"), {
             comment: "필요에 따라 HelpBubbleAnchor로 변경하여 사용하세요."
         });
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("list-header");
+const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("list-header");
 const createListHeaderHandler = (_ctx)=>defineComponentHandler(listHeader.key, ({ componentProperties: props })=>{
         const commonProps = {
             variant: camelCase(props["Variant"].value)
         };
-        return createLocalSnippetElement$i("ListHeader", commonProps, props["Title#28588:0"].value);
+        return createLocalSnippetElement$j("ListHeader", commonProps, props["Title#28588:0"].value);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("list");
+const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("list");
 const PREFIX_KEYS = {
     checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
     radioMark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
@@ -4013,42 +3996,42 @@ const createListItemHandler = (ctx)=>defineComponentHandler(listItem.key, (node,
             ...disabled && (tag === "ListButtonItem" || tag === "ListCheckItem" || tag === "ListRadioItem" || tag === "ListSwitchItem") && {
                 disabled: true
             },
-            ...props.State.value === "Highlighted" && {
+            ...props.Highlighted.value === "True" && {
                 highlighted: true
             }
         };
         const comment = match(tag).with("ListItem", ()=>"목적에 따라 ListButtonItem이나 ListLinkItem으로 바꿔 사용하세요.").with("ListCheckItem", ()=>`<List as="fieldset">과 함께 사용하세요.`).with("ListRadioItem", ()=>"<RadioGroup.Root>와 함께 사용하세요.").otherwise(()=>undefined);
-        const list = createLocalSnippetElement$h(tag, commonProps, undefined, {
+        const list = createLocalSnippetElement$i(tag, commonProps, undefined, {
             comment
         });
         if (props["Divider#28441:0"].value) {
             return createElement("", {}, [
                 list,
-                createLocalSnippetElement$h("ListDivider")
+                createLocalSnippetElement$i("ListDivider")
             ]);
         }
         return list;
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("manner-temp-badge");
+const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("manner-temp-badge");
 const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(mannerTempBadge.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createLocalSnippetElement$g("MannerTempBadge", commonProps);
+        return createLocalSnippetElement$h("MannerTempBadge", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("manner-temp");
+const { createLocalSnippetElement: createLocalSnippetElement$g } = createLocalSnippetHelper("manner-temp");
 const createMannerTempHandler = (_ctx)=>defineComponentHandler(mannerTemp.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
         };
-        return createLocalSnippetElement$f("MannerTemp", commonProps);
+        return createLocalSnippetElement$g("MannerTemp", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("menu-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger } = createLocalSnippetHelper("action-button");
 const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
 const createMenuSheetItemHandler = (ctx)=>defineComponentHandler(MENU_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
@@ -4059,7 +4042,7 @@ const createMenuSheetItemHandler = (ctx)=>defineComponentHandler(MENU_SHEET_ITEM
                 disabled: true
             }
         };
-        return createLocalSnippetElement$e("MenuSheetItem", commonProps, [
+        return createLocalSnippetElement$f("MenuSheetItem", commonProps, [
             props["Show Prefix Icon#17043:5"].value ? createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"])
             }) : undefined,
@@ -4075,7 +4058,7 @@ const createMenuSheetGroupHandler = (ctx)=>{
             key: menuSheetItemHandler.key
         });
         const contentChildren = items.map((item)=>menuSheetItemHandler.transform(item, traverse));
-        return createLocalSnippetElement$e("MenuSheetGroup", undefined, contentChildren);
+        return createLocalSnippetElement$f("MenuSheetGroup", undefined, contentChildren);
     });
 };
 const createMenuSheetHandler = (ctx)=>{
@@ -4090,28 +4073,28 @@ 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 { labelAlignment } = match(props.Layout.value).with("Text with Icon", ()=>({
-                labelAlignment: undefined
+        const { labelAlign } = match(props.Layout.value).with("Text with Icon", "Text with Subtext", ()=>({
+                labelAlign: "left"
             })).with("Text Only", ()=>({
-                labelAlignment: "center"
+                labelAlign: "center"
             })).exhaustive();
-        const content = createLocalSnippetElement$e("MenuSheetContent", {
+        const content = createLocalSnippetElement$f("MenuSheetContent", {
             title,
-            labelAlignment
+            labelAlign
         }, contentChildren, {
             comment: title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다."
         });
-        const trigger = createLocalSnippetElement$e("MenuSheetTrigger", {
+        const trigger = createLocalSnippetElement$f("MenuSheetTrigger", {
             asChild: true
         }, createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"));
-        return createLocalSnippetElement$e("MenuSheet", undefined, [
+        return createLocalSnippetElement$f("MenuSheet", undefined, [
             trigger,
             content
         ]);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("page-banner");
+const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("page-banner");
 const SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
 const createPageBannerButtonHandler = (_ctx)=>defineComponentHandler(SUFFIX_BUTTON_KEY, (node)=>{
         return createElement("PageBannerButton", undefined, node.componentProperties["Label#39890:0"].value);
@@ -4145,7 +4128,7 @@ const createPageBannerHandler = (ctx)=>{
             })).exhaustive();
         const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Text");
         if (!textNode) {
-            return createLocalSnippetElement$d(tag, undefined, undefined, {
+            return createLocalSnippetElement$e(tag, undefined, undefined, {
                 comment: "내용을 제공해주세요."
             });
         }
@@ -4178,11 +4161,11 @@ const createPageBannerHandler = (ctx)=>{
                 suffix
             }
         };
-        return createLocalSnippetElement$d(tag, commonProps);
+        return createLocalSnippetElement$e(tag, commonProps);
     });
 };
 
-const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("progress-circle");
+const { createLocalSnippetElement: createLocalSnippetElement$d } = createLocalSnippetHelper("progress-circle");
 const createProgressCircleHandler = (_ctx)=>defineComponentHandler(progressCircle.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
@@ -4214,10 +4197,10 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(progressCircl
                 tone: camelCase(props.Tone.value)
             }
         };
-        return createLocalSnippetElement$c("ProgressCircle", commonProps);
+        return createLocalSnippetElement$d("ProgressCircle", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("radio-group");
 const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(radio.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
@@ -4230,20 +4213,20 @@ const createRadioGroupItemHandler = (_ctx)=>defineComponentHandler(radio.key, ({
             tone,
             weight: camelCase(props.Weight.value)
         };
-        return createLocalSnippetElement$b("RadioGroupItem", commonProps);
+        return createLocalSnippetElement$c("RadioGroupItem", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("radio-group");
+const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("radio-group");
 const createRadioMarkHandler = (_ctx)=>defineComponentHandler(radioMark.key, ({ componentProperties: props })=>{
         const tone = match(props.Tone.value).with("Neutral", ()=>"neutral").with("🚫[Deprecated]Brand", ()=>"brand").exhaustive();
         const commonProps = {
             tone,
             size: handleSizeProp(props.Size.value)
         };
-        return createLocalSnippetElement$a("RadioMark", commonProps);
+        return createLocalSnippetElement$b("RadioMark", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("reaction-button");
+const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("reaction-button");
 const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
@@ -4257,7 +4240,7 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton
                 defaultPressed: true
             }
         };
-        return createLocalSnippetElement$9("ReactionButton", commonProps, [
+        return createLocalSnippetElement$a("ReactionButton", commonProps, [
             createSeedReactElement("PrefixIcon", {
                 svg: ctx.iconHandler.transform(props["Icon#12379:0"])
             }),
@@ -4266,6 +4249,48 @@ const createReactionButtonHandler = (ctx)=>defineComponentHandler(reactionButton
         ]);
     });
 
+const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("result-section");
+const createResultSectionHandler = (ctx)=>{
+    const actionButtonHandler = createActionButtonHandler(ctx);
+    const ghostButtonHandler = createActionButtonGhostHandler(ctx);
+    return defineComponentHandler(templateResultSection.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const [actionButton] = props["Show Buttons#53435:0"].value && props["ㄴShow First Button#53766:0"].value ? findAllInstances({
+            node,
+            key: actionButtonHandler.key
+        }) : [
+            undefined
+        ];
+        const [ghostButton] = props["Show Buttons#53435:0"].value && props["ㄴShow Second Button#53766:3"].value ? findAllInstances({
+            node,
+            key: ghostButtonHandler.key
+        }) : [
+            undefined
+        ];
+        const commonProps = {
+            size: handleSizeProp(props.Size.value),
+            ...props["Show Asset#45154:14"].value && {
+                asset: createSeedReactElement("Box", undefined, createElement("div", undefined, undefined, {
+                    comment: "Asset Placeholder"
+                }))
+            },
+            title: props["Title#16237:0"].value,
+            description: props["Description#16237:5"].value,
+            ...actionButton && {
+                primaryActionProps: {
+                    children: actionButtonHandler.transform(actionButton, traverse).children[0]
+                }
+            },
+            ...ghostButton && {
+                secondaryActionProps: {
+                    children: ghostButtonHandler.transform(ghostButton, traverse).children[0]
+                }
+            }
+        };
+        return createLocalSnippetElement$9("ResultSection", commonProps);
+    });
+};
+
 const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("segmented-control");
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENTED_CONTROL_ITEM_KEY, ({ componentProperties: props })=>{
@@ -5091,7 +5116,7 @@ const unboundSeedComponentHandlers = [
     createDatePickerFieldHandler,
     createSelectFieldHandler,
     createTimePickerFieldHandler,
-    createErrorStateHandler,
+    createResultSectionHandler,
     createContextualFloatingButtonHandler,
     createFloatingActionButtonHandler,
     createHelpBubbleHandler,
@@ -5664,6 +5689,16 @@ const FIGMA_ICONS = {
         "type": "monochrome",
         "weight": "Line"
     },
+    "070afb84fd59445e20d5ceac41203c4211cf48bd": {
+        "name": "icon_carrot",
+        "type": "monochrome",
+        "weight": "Fill"
+    },
+    "a892412e4eddf35d5a48a5e6bfc70018287e532c": {
+        "name": "icon_carrot",
+        "type": "monochrome",
+        "weight": "Line"
+    },
     "4f15a5694c3c19f92fe4650601d97d485a65c4f9": {
         "name": "icon_cart",
         "type": "monochrome",
@@ -6394,6 +6429,16 @@ const FIGMA_ICONS = {
         "type": "monochrome",
         "weight": "Line"
     },
+    "aeb546ca8da1616fc188ed81da905f689e2614df": {
+        "name": "icon_fish_wave2",
+        "type": "monochrome",
+        "weight": "Fill"
+    },
+    "6772e68d0ff5041f1d40df574cac895a8f47260c": {
+        "name": "icon_fish_wave2",
+        "type": "monochrome",
+        "weight": "Line"
+    },
     "b237945ab37fbe826d1bb5fdd2f6bdba3d616c85": {
         "name": "icon_flag",
         "type": "monochrome",
@@ -6514,6 +6559,11 @@ const FIGMA_ICONS = {
         "type": "monochrome",
         "weight": "Line"
     },
+    "de30fbf4eab742befbb46aa5487945e257a796b5": {
+        "name": "icon_grid",
+        "type": "monochrome",
+        "weight": "Fill"
+    },
     "94396773c3208ff19b7650bb7f48de6600492c83": {
         "name": "icon_grid_heart",
         "type": "monochrome",
@@ -6524,6 +6574,11 @@ const FIGMA_ICONS = {
         "type": "monochrome",
         "weight": "Line"
     },
+    "e1595ab44ecfde3538e5945c3e529641cda50197": {
+        "name": "icon_grid",
+        "type": "monochrome",
+        "weight": "Line"
+    },
     "0076cc19d6b14f57194f3d8a5c8660010e9c1b45": {
         "name": "icon_hand_point_up",
         "type": "monochrome",
@@ -7994,6 +8049,26 @@ const FIGMA_ICONS = {
         "type": "monochrome",
         "weight": "Line"
     },
+    "831d309f1a99b1f06cb17e2f69816ed1ce0be2fb": {
+        "name": "icon_vertline_coupon",
+        "type": "monochrome",
+        "weight": "Fill"
+    },
+    "17c2d6e18ae4b5cc53ac7b4e2eb3a6cd12166793": {
+        "name": "icon_vertline_coupon",
+        "type": "monochrome",
+        "weight": "Line"
+    },
+    "d8edabc61872457829905a0e0d11b2b222b29b94": {
+        "name": "icon_vertline3_viewfinder",
+        "type": "monochrome",
+        "weight": "Fill"
+    },
+    "95b4017d83a1d3b09968b7bceeec4e06b0b950b4": {
+        "name": "icon_vertline3_viewfinder",
+        "type": "monochrome",
+        "weight": "Line"
+    },
     "a1a83f702b7d2144d67f73f521c385985e1c8fc7": {
         "name": "icon_vertline4_sparkle",
         "type": "monochrome",
@@ -8296,6 +8371,10 @@ const FIGMA_ICONS = {
         "name": "icon_figure_walk",
         "type": "multicolor"
     },
+    "bfb3fa82c3642bd55ae5ab9da241fd4a6a593736": {
+        "name": "icon_fish_wave2",
+        "type": "multicolor"
+    },
     "fe769cca256bb3fc7fa70682e1d85169ba104f53": {
         "name": "icon_fork_spoon",
         "type": "multicolor"
@@ -8729,6 +8808,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
         ],
         "key": "34e782f5d238a8c5be4618ff4a24ae0f4fc4e1da",
         "hiddenFromPublishing": false,
+        "isExtension": false,
         "variableIds": [
             "VariableID:1:129",
             "VariableID:1:130",
@@ -8755,23 +8835,24 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:8482:98909",
             "VariableID:1:155",
             "VariableID:1:156",
-            "VariableID:1:164",
             "VariableID:1:157",
-            "VariableID:1:165",
             "VariableID:238:17662",
-            "VariableID:17544:4057",
-            "VariableID:1:171",
             "VariableID:670:2700",
-            "VariableID:41186:6437",
-            "VariableID:1:172",
-            "VariableID:1:158",
+            "VariableID:52349:2",
+            "VariableID:52349:3",
+            "VariableID:1:164",
+            "VariableID:1:165",
+            "VariableID:654:20851",
+            "VariableID:1:171",
+            "VariableID:41186:6437",
+            "VariableID:1:172",
+            "VariableID:1:158",
             "VariableID:1:161",
             "VariableID:1:159",
             "VariableID:576:22878",
             "VariableID:10181:32557",
             "VariableID:10181:8465",
             "VariableID:10181:35817",
-            "VariableID:654:20851",
             "VariableID:36929:111145",
             "VariableID:36929:111146",
             "VariableID:1:151",
@@ -8796,7 +8877,6 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:33327:83273",
             "VariableID:1:167",
             "VariableID:764:14294",
-            "VariableID:1:170",
             "VariableID:1883:92911",
             "VariableID:1:169",
             "VariableID:41338:804",
@@ -8837,15 +8917,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:14609:41561",
             "VariableID:14609:41562",
             "VariableID:14609:41563",
-            "VariableID:12548:1440",
-            "VariableID:29453:35711",
-            "VariableID:29453:35712",
-            "VariableID:12548:1441",
-            "VariableID:12548:1442",
-            "VariableID:12548:1443",
             "VariableID:1:21",
-            "VariableID:12548:1444",
-            "VariableID:12548:1445",
             "VariableID:1:30",
             "VariableID:1883:92912",
             "VariableID:1883:92913",
@@ -8940,17 +9012,55 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:30894:36313",
             "VariableID:30894:36314",
             "VariableID:30894:36315",
+            "VariableID:54554:3095",
+            "VariableID:54554:3097",
+            "VariableID:54554:3098",
+            "VariableID:50088:12999",
             "VariableID:1884:93034",
+            "VariableID:1:168",
             "VariableID:1883:93030",
             "VariableID:1883:93031",
             "VariableID:30501:79135",
             "VariableID:12973:26217",
             "VariableID:10181:34417",
-            "VariableID:1:168",
+            "VariableID:17544:4057",
+            "VariableID:1:170",
+            "VariableID:54461:116345",
+            "VariableID:51280:230267",
+            "VariableID:51280:230268",
+            "VariableID:51280:230269",
+            "VariableID:51280:230270",
+            "VariableID:51280:230271",
+            "VariableID:51280:230272",
+            "VariableID:51280:230273",
+            "VariableID:51280:230274",
+            "VariableID:51280:230275",
+            "VariableID:51280:230276",
+            "VariableID:51280:230277",
+            "VariableID:51280:230278",
+            "VariableID:51280:230279",
+            "VariableID:51280:230280",
+            "VariableID:51280:230281",
+            "VariableID:51280:230282",
+            "VariableID:51280:230214",
+            "VariableID:51280:230218",
+            "VariableID:51280:230222",
+            "VariableID:51280:230226",
+            "VariableID:51280:230230",
+            "VariableID:51280:230234",
+            "VariableID:51280:230238",
+            "VariableID:51280:230242",
+            "VariableID:51280:230246",
+            "VariableID:51280:230250",
+            "VariableID:51280:230254",
+            "VariableID:51280:230258",
+            "VariableID:51280:230262",
+            "VariableID:51280:230266",
+            "VariableID:50088:12995",
             "VariableID:29913:8440",
             "VariableID:29917:362",
-            "VariableID:29917:5084",
             "VariableID:30009:40284",
+            "VariableID:29917:5084",
             "VariableID:30009:40393",
             "VariableID:30021:1313",
             "VariableID:30023:1876",
@@ -8975,11 +9085,24 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:43290:12822",
             "VariableID:43290:12823",
             "VariableID:43290:12824",
+            "VariableID:51280:230283",
+            "VariableID:51280:230284",
+            "VariableID:51280:230285",
+            "VariableID:51280:230286",
+            "VariableID:51280:230287",
+            "VariableID:51280:230288",
+            "VariableID:51280:230289",
+            "VariableID:51280:230290",
+            "VariableID:51280:230291",
+            "VariableID:51280:230292",
+            "VariableID:51280:230293",
+            "VariableID:51280:230294",
+            "VariableID:51280:230295",
+            "VariableID:51280:230296",
+            "VariableID:51280:230297",
+            "VariableID:51280:230298",
             "VariableID:49497:1643",
-            "VariableID:49497:1644",
-            "VariableID:49495:1861",
-            "VariableID:49497:1645",
-            "VariableID:49497:1646"
+            "VariableID:49497:1644"
         ]
     },
     "VariableCollectionId:1:174": {
@@ -8995,6 +9118,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
         ],
         "key": "2d3b4ad8e4ba14ef53b92ba019942ca633ce21ba",
         "hiddenFromPublishing": false,
+        "isExtension": false,
         "variableIds": [
             "VariableID:1:189",
             "VariableID:1:196",
@@ -9054,10 +9178,15 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             {
                 "modeId": "1:8",
                 "name": "Android"
+            },
+            {
+                "modeId": "51907:0",
+                "name": "Android-xlarge"
             }
         ],
         "key": "75a9a164e0f9d49ba07e82176cbc7240569928a5",
         "hiddenFromPublishing": false,
+        "isExtension": false,
         "variableIds": [
             "VariableID:1:199",
             "VariableID:1:200",
@@ -9139,6 +9268,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
         ],
         "key": "7b0f506ae5e0955f152efe15b7982265075ad655",
         "hiddenFromPublishing": false,
+        "isExtension": false,
         "variableIds": [
             "VariableID:6075:34488",
             "VariableID:6075:34489",
@@ -9148,11 +9278,11 @@ const FIGMA_VARIABLE_COLLECTIONS = {
 };
 
 const FIGMA_VARIABLES = {
-    "VariableID:1:170": {
-        "name": "_legacy/stroke/field",
-        "id": "VariableID:1:170",
+    "VariableID:54461:116345": {
+        "name": "_legacy/bg/layer-fill",
+        "id": "VariableID:54461:116345",
         "remote": false,
-        "key": "bffc4d796285b14756405c8faf1eb619eabf8b19",
+        "key": "f015408caaf8301430455d23312a5b0a3cb9fb43",
         "variableCollectionId": "VariableCollectionId:1:3",
         "resolvedType": "COLOR",
         "description": "",
@@ -9160,63 +9290,11 @@ const FIGMA_VARIABLES = {
         "valuesByMode": {
             "1928:7": {
                 "type": "VARIABLE_ALIAS",
-                "id": "VariableID:1883:92915"
-            },
-            "1928:8": {
-                "type": "VARIABLE_ALIAS",
-                "id": "VariableID:1883:92915"
-            }
-        },
-        "scopes": [
-            "FRAME_FILL",
-            "SHAPE_FILL",
-            "STROKE_COLOR"
-        ],
-        "codeSyntax": {}
-    },
-    "VariableID:17544:4057": {
-        "name": "_legacy/stroke/on-image",
-        "id": "VariableID:17544:4057",
-        "remote": false,
-        "key": "7dda7b5c673d7026f25eccc7533f6c81468b4518",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "type": "VARIABLE_ALIAS",
-                "id": "VariableID:30894:36296"
+                "id": "VariableID:1883:92912"
             },
             "1928:8": {
                 "type": "VARIABLE_ALIAS",
-                "id": "VariableID:30894:36305"
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {}
-    },
-    "VariableID:49495:1861": {
-        "name": "_scroll-fog",
-        "id": "VariableID:49495:1861",
-        "remote": false,
-        "key": "12f1d88d590090e396c9b283bb51d4e89d9016d2",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "type": "VARIABLE_ALIAS",
-                "id": "VariableID:29453:35711"
-            },
-            "1928:8": {
-                "r": 1,
-                "g": 1,
-                "b": 1,
-                "a": 1
+                "id": "VariableID:1883:92913"
             }
         },
         "scopes": [
@@ -9224,11 +9302,11 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
-    "VariableID:49497:1643": {
-        "name": "_scroll-fog/layer-default/0",
-        "id": "VariableID:49497:1643",
+    "VariableID:1:170": {
+        "name": "_legacy/stroke/field",
+        "id": "VariableID:1:170",
         "remote": false,
-        "key": "fae00f7e2fc2ee7cd4bef58de19f468255ca4c5c",
+        "key": "bffc4d796285b14756405c8faf1eb619eabf8b19",
         "variableCollectionId": "VariableCollectionId:1:3",
         "resolvedType": "COLOR",
         "description": "",
@@ -9236,51 +9314,25 @@ const FIGMA_VARIABLES = {
         "valuesByMode": {
             "1928:7": {
                 "type": "VARIABLE_ALIAS",
-                "id": "VariableID:1:155"
+                "id": "VariableID:1883:92915"
             },
             "1928:8": {
                 "type": "VARIABLE_ALIAS",
-                "id": "VariableID:1:155"
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {}
-    },
-    "VariableID:49497:1644": {
-        "name": "_scroll-fog/layer-default/1",
-        "id": "VariableID:49497:1644",
-        "remote": false,
-        "key": "fac0ada2e11c8d54997dce0fc72a723fce514a9f",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "r": 1,
-                "g": 1,
-                "b": 1,
-                "a": 0
-            },
-            "1928:8": {
-                "r": 0.08627451211214066,
-                "g": 0.09019608050584793,
-                "b": 0.10588235408067703,
-                "a": 0
+                "id": "VariableID:1883:92915"
             }
         },
         "scopes": [
-            "ALL_SCOPES"
+            "FRAME_FILL",
+            "SHAPE_FILL",
+            "STROKE_COLOR"
         ],
         "codeSyntax": {}
     },
-    "VariableID:49497:1645": {
-        "name": "_scroll-fog/layer-floating/0",
-        "id": "VariableID:49497:1645",
+    "VariableID:17544:4057": {
+        "name": "_legacy/stroke/on-image",
+        "id": "VariableID:17544:4057",
         "remote": false,
-        "key": "334d485b6f54e6ed8dce767cd150b578f4323ad3",
+        "key": "7dda7b5c673d7026f25eccc7533f6c81468b4518",
         "variableCollectionId": "VariableCollectionId:1:3",
         "resolvedType": "COLOR",
         "description": "",
@@ -9288,39 +9340,11 @@ const FIGMA_VARIABLES = {
         "valuesByMode": {
             "1928:7": {
                 "type": "VARIABLE_ALIAS",
-                "id": "VariableID:238:17662"
+                "id": "VariableID:30894:36296"
             },
             "1928:8": {
                 "type": "VARIABLE_ALIAS",
-                "id": "VariableID:238:17662"
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {}
-    },
-    "VariableID:49497:1646": {
-        "name": "_scroll-fog/layer-floating/1",
-        "id": "VariableID:49497:1646",
-        "remote": false,
-        "key": "3259bea6c3999bc3ad72999fd3123648544bd002",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "r": 1,
-                "g": 1,
-                "b": 1,
-                "a": 0
-            },
-            "1928:8": {
-                "r": 0.11555555462837219,
-                "g": 0.12638889253139496,
-                "b": 0.14444443583488464,
-                "a": 0
+                "id": "VariableID:30894:36305"
             }
         },
         "scopes": [
@@ -9697,7 +9721,8 @@ const FIGMA_VARIABLES = {
         "scopes": [
             "FRAME_FILL",
             "SHAPE_FILL",
-            "STROKE_COLOR"
+            "STROKE_COLOR",
+            "EFFECT_COLOR"
         ],
         "codeSyntax": {}
     },
@@ -9727,7 +9752,7 @@ const FIGMA_VARIABLES = {
         "codeSyntax": {}
     },
     "VariableID:1:157": {
-        "name": "bg/layer-fill",
+        "name": "bg/layer-elevated",
         "id": "VariableID:1:157",
         "remote": false,
         "key": "7f7f5cddc3c06ed9d96e55a9276273b642b0e3a8",
@@ -9738,7 +9763,7 @@ const FIGMA_VARIABLES = {
         "valuesByMode": {
             "1928:7": {
                 "type": "VARIABLE_ALIAS",
-                "id": "VariableID:1883:92912"
+                "id": "VariableID:1883:92911"
             },
             "1928:8": {
                 "type": "VARIABLE_ALIAS",
@@ -9749,7 +9774,8 @@ const FIGMA_VARIABLES = {
             "FRAME_FILL",
             "SHAPE_FILL"
         ],
-        "codeSyntax": {}
+        "codeSyntax": {},
+        "deletedButReferenced": true
     },
     "VariableID:238:17662": {
         "name": "bg/layer-floating",
@@ -10228,6 +10254,58 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
+    "VariableID:52349:2": {
+        "name": "bg/transparent",
+        "id": "VariableID:52349:2",
+        "remote": false,
+        "key": "00e78d0aac4330afd6729d7cce7b7821ef26ae29",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "r": 0,
+                "g": 0,
+                "b": 0,
+                "a": 0
+            },
+            "1928:8": {
+                "r": 1,
+                "g": 1,
+                "b": 1,
+                "a": 0
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
+    "VariableID:52349:3": {
+        "name": "bg/transparent-pressed",
+        "id": "VariableID:52349:3",
+        "remote": false,
+        "key": "25d97fe91509757204110a16673a67adfe7b159b",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:30894:36295"
+            },
+            "1928:8": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:30894:36305"
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
     "VariableID:1:145": {
         "name": "bg/warning-solid",
         "id": "VariableID:1:145",
@@ -11312,7 +11390,8 @@ const FIGMA_VARIABLES = {
             "1:5": "Figma Only iOS",
             "1:6": "Figma Only iOS",
             "1:7": "Figma Only iOS",
-            "1:8": "Roboto"
+            "1:8": "Roboto",
+            "51907:0": "Roboto"
         },
         "scopes": [
             "FONT_FAMILY"
@@ -11332,7 +11411,8 @@ const FIGMA_VARIABLES = {
             "1:5": "Figma Only iOS Text",
             "1:6": "Figma Only iOS Text",
             "1:7": "Figma Only iOS Text",
-            "1:8": "Roboto"
+            "1:8": "Roboto",
+            "51907:0": "Roboto"
         },
         "scopes": [
             "FONT_FAMILY"
@@ -11352,7 +11432,8 @@ const FIGMA_VARIABLES = {
             "1:5": 11,
             "1:6": 17,
             "1:7": 8,
-            "1:8": 11
+            "1:8": 11,
+            "51907:0": 16.5
         },
         "scopes": [
             "FONT_SIZE"
@@ -11372,7 +11453,8 @@ const FIGMA_VARIABLES = {
             "1:5": 26,
             "1:6": 32,
             "1:7": 23,
-            "1:8": 26
+            "1:8": 26,
+            "51907:0": 39
         },
         "scopes": [
             "FONT_SIZE"
@@ -11392,7 +11474,8 @@ const FIGMA_VARIABLES = {
             "1:5": 26,
             "1:6": 26,
             "1:7": 26,
-            "1:8": 26
+            "1:8": 26,
+            "51907:0": 26
         },
         "scopes": [
             "ALL_SCOPES"
@@ -11412,7 +11495,8 @@ const FIGMA_VARIABLES = {
             "1:5": 12,
             "1:6": 18,
             "1:7": 9,
-            "1:8": 12
+            "1:8": 12,
+            "51907:0": 18
         },
         "scopes": [
             "FONT_SIZE"
@@ -11432,7 +11516,8 @@ const FIGMA_VARIABLES = {
             "1:5": 13,
             "1:6": 19,
             "1:7": 10,
-            "1:8": 13
+            "1:8": 13,
+            "51907:0": 19.5
         },
         "scopes": [
             "FONT_SIZE"
@@ -11452,7 +11537,8 @@ const FIGMA_VARIABLES = {
             "1:5": 14,
             "1:6": 20,
             "1:7": 11,
-            "1:8": 14
+            "1:8": 14,
+            "51907:0": 21
         },
         "scopes": [
             "FONT_SIZE"
@@ -11472,7 +11558,8 @@ const FIGMA_VARIABLES = {
             "1:5": 16,
             "1:6": 22,
             "1:7": 13,
-            "1:8": 16
+            "1:8": 16,
+            "51907:0": 24
         },
         "scopes": [
             "FONT_SIZE"
@@ -11492,7 +11579,8 @@ const FIGMA_VARIABLES = {
             "1:5": 18,
             "1:6": 24,
             "1:7": 15,
-            "1:8": 18
+            "1:8": 18,
+            "51907:0": 27
         },
         "scopes": [
             "FONT_SIZE"
@@ -11512,7 +11600,8 @@ const FIGMA_VARIABLES = {
             "1:5": 20,
             "1:6": 26,
             "1:7": 17,
-            "1:8": 20
+            "1:8": 20,
+            "51907:0": 30
         },
         "scopes": [
             "FONT_SIZE"
@@ -11532,7 +11621,8 @@ const FIGMA_VARIABLES = {
             "1:5": 22,
             "1:6": 28,
             "1:7": 19,
-            "1:8": 22
+            "1:8": 22,
+            "51907:0": 33
         },
         "scopes": [
             "FONT_SIZE"
@@ -11552,7 +11642,8 @@ const FIGMA_VARIABLES = {
             "1:5": 24,
             "1:6": 30,
             "1:7": 21,
-            "1:8": 24
+            "1:8": 24,
+            "51907:0": 36
         },
         "scopes": [
             "FONT_SIZE"
@@ -11572,7 +11663,8 @@ const FIGMA_VARIABLES = {
             "1:5": "bold",
             "1:6": "bold",
             "1:7": "bold",
-            "1:8": "bold"
+            "1:8": "bold",
+            "51907:0": "bold"
         },
         "scopes": [
             "FONT_STYLE"
@@ -11592,7 +11684,8 @@ const FIGMA_VARIABLES = {
             "1:5": "medium",
             "1:6": "medium",
             "1:7": "medium",
-            "1:8": "medium"
+            "1:8": "medium",
+            "51907:0": "medium"
         },
         "scopes": [
             "FONT_STYLE"
@@ -11612,7 +11705,8 @@ const FIGMA_VARIABLES = {
             "1:5": "regular",
             "1:6": "regular",
             "1:7": "regular",
-            "1:8": "regular"
+            "1:8": "regular",
+            "51907:0": "regular"
         },
         "scopes": [
             "FONT_STYLE"
@@ -11632,7 +11726,8 @@ const FIGMA_VARIABLES = {
             "1:5": 30,
             "1:6": 36,
             "1:7": 27,
-            "1:8": 30
+            "1:8": 30,
+            "51907:0": 30
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11653,7 +11748,8 @@ const FIGMA_VARIABLES = {
             "1:5": 15,
             "1:6": 19,
             "1:7": 10,
-            "1:8": 15
+            "1:8": 15,
+            "51907:0": 22.5
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11673,7 +11769,8 @@ const FIGMA_VARIABLES = {
             "1:5": 35,
             "1:6": 40,
             "1:7": 31,
-            "1:8": 35
+            "1:8": 35,
+            "51907:0": 52.5
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11693,7 +11790,8 @@ const FIGMA_VARIABLES = {
             "1:5": 35,
             "1:6": 35,
             "1:7": 35,
-            "1:8": 35
+            "1:8": 35,
+            "51907:0": 35
         },
         "scopes": [
             "ALL_SCOPES"
@@ -11713,7 +11811,8 @@ const FIGMA_VARIABLES = {
             "1:5": 16,
             "1:6": 22,
             "1:7": 13,
-            "1:8": 16
+            "1:8": 16,
+            "51907:0": 24
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11733,7 +11832,8 @@ const FIGMA_VARIABLES = {
             "1:5": 18,
             "1:6": 24,
             "1:7": 15,
-            "1:8": 18
+            "1:8": 18,
+            "51907:0": 27
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11753,7 +11853,8 @@ const FIGMA_VARIABLES = {
             "1:5": 19,
             "1:6": 25,
             "1:7": 16,
-            "1:8": 19
+            "1:8": 19,
+            "51907:0": 28.5
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11773,7 +11874,8 @@ const FIGMA_VARIABLES = {
             "1:5": 22,
             "1:6": 27,
             "1:7": 18,
-            "1:8": 22
+            "1:8": 22,
+            "51907:0": 33
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11793,7 +11895,8 @@ const FIGMA_VARIABLES = {
             "1:5": 24,
             "1:6": 29,
             "1:7": 20,
-            "1:8": 24
+            "1:8": 24,
+            "51907:0": 36
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11813,7 +11916,8 @@ const FIGMA_VARIABLES = {
             "1:5": 27,
             "1:6": 31,
             "1:7": 22,
-            "1:8": 27
+            "1:8": 27,
+            "51907:0": 40.5
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11833,7 +11937,8 @@ const FIGMA_VARIABLES = {
             "1:5": 30,
             "1:6": 34,
             "1:7": 25,
-            "1:8": 30
+            "1:8": 30,
+            "51907:0": 45
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11853,7 +11958,8 @@ const FIGMA_VARIABLES = {
             "1:5": 32,
             "1:6": 38,
             "1:7": 29,
-            "1:8": 32
+            "1:8": 32,
+            "51907:0": 48
         },
         "scopes": [
             "LINE_HEIGHT"
@@ -11888,35 +11994,6 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
-    "VariableID:12548:1440": {
-        "name": "manner-temp/l1/static",
-        "id": "VariableID:12548:1440",
-        "remote": false,
-        "key": "b2e39001b13e619a940631b952ef0cd8156049cc",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "r": 0.46666666865348816,
-                "g": 0.49803921580314636,
-                "b": 0.529411792755127,
-                "a": 1
-            },
-            "1928:8": {
-                "r": 0.46666666865348816,
-                "g": 0.49803921580314636,
-                "b": 0.529411792755127,
-                "a": 1
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {},
-        "deletedButReferenced": true
-    },
     "VariableID:12479:23363": {
         "name": "manner-temp/l1/text",
         "id": "VariableID:12479:23363",
@@ -12029,35 +12106,6 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
-    "VariableID:12548:1441": {
-        "name": "manner-temp/l2/static",
-        "id": "VariableID:12548:1441",
-        "remote": false,
-        "key": "eec52a8d360d27647570d4a53220bfbe0af644ac",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "r": 0.23963896930217743,
-                "g": 0.605954647064209,
-                "b": 0.9475748538970947,
-                "a": 1
-            },
-            "1928:8": {
-                "r": 0.21176470816135406,
-                "g": 0.5607843399047852,
-                "b": 0.886274516582489,
-                "a": 1
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {},
-        "deletedButReferenced": true
-    },
     "VariableID:12479:23364": {
         "name": "manner-temp/l2/text",
         "id": "VariableID:12479:23364",
@@ -12114,35 +12162,6 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
-    "VariableID:12548:1442": {
-        "name": "manner-temp/l3/static",
-        "id": "VariableID:12548:1442",
-        "remote": false,
-        "key": "155ad6dee47603c9ae025559345083a8bbf224df",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "r": 0.08627451211214066,
-                "g": 0.7137255072593689,
-                "b": 0.9137254953384399,
-                "a": 1
-            },
-            "1928:8": {
-                "r": 0.08627451211214066,
-                "g": 0.7137255072593689,
-                "b": 0.9137254953384399,
-                "a": 1
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {},
-        "deletedButReferenced": true
-    },
     "VariableID:12479:23365": {
         "name": "manner-temp/l3/text",
         "id": "VariableID:12479:23365",
@@ -12199,35 +12218,6 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
-    "VariableID:12548:1443": {
-        "name": "manner-temp/l4/static",
-        "id": "VariableID:12548:1443",
-        "remote": false,
-        "key": "01f8a395aab2c47497262b0da2e4b333abfdb96c",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "r": 0.1882352977991104,
-                "g": 0.7803921699523926,
-                "b": 0.5843137502670288,
-                "a": 1
-            },
-            "1928:8": {
-                "r": 0.1882352977991104,
-                "g": 0.7803921699523926,
-                "b": 0.5843137502670288,
-                "a": 1
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {},
-        "deletedButReferenced": true
-    },
     "VariableID:12479:23366": {
         "name": "manner-temp/l4/text",
         "id": "VariableID:12479:23366",
@@ -12284,35 +12274,6 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
-    "VariableID:12548:1444": {
-        "name": "manner-temp/l5/static",
-        "id": "VariableID:12548:1444",
-        "remote": false,
-        "key": "9cedfcdca910a043de0cb216a1f2593a3029ff33",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "r": 1,
-                "g": 0.6313725709915161,
-                "b": 0.07450980693101883,
-                "a": 1
-            },
-            "1928:8": {
-                "r": 1,
-                "g": 0.6313725709915161,
-                "b": 0.07450980693101883,
-                "a": 1
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {},
-        "deletedButReferenced": true
-    },
     "VariableID:12479:23367": {
         "name": "manner-temp/l5/text",
         "id": "VariableID:12479:23367",
@@ -12369,35 +12330,6 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
-    "VariableID:12548:1445": {
-        "name": "manner-temp/l6/static",
-        "id": "VariableID:12548:1445",
-        "remote": false,
-        "key": "b7d244e9c771ea91fcd18e6f1c566d84cfb396f8",
-        "variableCollectionId": "VariableCollectionId:1:3",
-        "resolvedType": "COLOR",
-        "description": "",
-        "hiddenFromPublishing": false,
-        "valuesByMode": {
-            "1928:7": {
-                "r": 1,
-                "g": 0.43529412150382996,
-                "b": 0.05882352963089943,
-                "a": 1
-            },
-            "1928:8": {
-                "r": 1,
-                "g": 0.43529412150382996,
-                "b": 0.05882352963089943,
-                "a": 1
-            }
-        },
-        "scopes": [
-            "ALL_SCOPES"
-        ],
-        "codeSyntax": {},
-        "deletedButReferenced": true
-    },
     "VariableID:12479:23368": {
         "name": "manner-temp/l6/text",
         "id": "VariableID:12479:23368",
@@ -12607,7 +12539,8 @@ const FIGMA_VARIABLES = {
             "1:5": "iOS",
             "1:6": "iOS",
             "1:7": "iOS",
-            "1:8": "Android"
+            "1:8": "Android",
+            "51907:0": "Android"
         },
         "scopes": [
             "ALL_SCOPES"