@seed-design/figma 1.3.3 → 1.3.5

package/lib/codegen/index.js

@@ -1,5 +1,5 @@
 import { match } from 'ts-pattern';
-import { camelCase } from 'change-case';
+import { pascalCase, camelCase } from 'change-case';
 import * as index_js from './targets/react/index.js';
 export { index_js as react };
 
@@ -429,11 +429,20 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
+function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
+    function isSkippedInstance(node) {
+        if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
+        if (node.type !== "INSTANCE") return false;
+        const { componentKey, componentSetKey } = node;
+        return skipComponentKeys.has(componentKey) || !!componentSetKey && skipComponentKeys.has(componentSetKey);
+    }
     function traverse(node) {
         if ("visible" in node && !node.visible) {
             return;
         }
+        if (isSkippedInstance(node)) {
+            return;
+        }
         const result = match(node).with({
             type: "FRAME"
         }, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
@@ -451,7 +460,7 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
             type: "BOOLEAN_OPERATION"
         }, (node)=>booleanOperationTransformer(node, traverse)).with({
             type: "UNHANDLED"
-        }, ()=>createElement("UnhandledFigmaNode")).exhaustive();
+        }, (node)=>createElement(`Unhandled${pascalCase(node.original.type)}Node`)).exhaustive();
         if (result) {
             return appendSource(result, node.id);
         }
@@ -461,6 +470,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
         return traverse(node);
     }
     function generateCode(node, options) {
+        if (isSkippedInstance(node)) {
+            return {
+                imports: "",
+                jsx: "// This component is intentionally excluded from codegen"
+            };
+        }
         const jsxTree = generateJsxTree(node);
         if (!jsxTree) {
             return undefined;
@@ -11498,6 +11513,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:576:22878",
             "VariableID:59176:2",
             "VariableID:59176:3",
+            "VariableID:61337:3",
             "VariableID:654:20851",
             "VariableID:670:2700",
             "VariableID:6782:76317",
@@ -18331,6 +18347,30 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
+    "VariableID:61337:3": {
+        "name": "stroke/focus-ring",
+        "id": "VariableID:61337:3",
+        "remote": false,
+        "key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            },
+            "1928:8": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
     "VariableID:41338:806": {
         "name": "stroke/informative-solid",
         "id": "VariableID:41338:806",
@@ -18632,8 +18672,8 @@ const FIGMA_VARIABLES = {
     }
 };
 
-const privateTemplateAttechmentField = {
-    "name": "privateTemplateAttechmentField",
+const privateTemplateAttachmentField = {
+    "name": "privateTemplateAttachmentField",
     "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
     "componentPropertyDefinitions": {
         "Show Header#40606:8": {
@@ -18846,6 +18886,19 @@ const privateComponentFieldHeaderSuffix = {
         }
     }
 };
+const privateComponentIdentityPlaceholder = {
+    "name": "privateComponentIdentityPlaceholder",
+    "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+    "componentPropertyDefinitions": {
+        "Identity": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Person",
+                "Business"
+            ]
+        }
+    }
+};
 const privateComponentInputButtonPrefix = {
     "name": "privateComponentInputButtonPrefix",
     "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -20638,11 +20691,11 @@ const componentBottomSheet = {
         "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
+                "Top Left",
+                "Top Center",
                 "Bottom Left",
-                "None",
                 "Bottom Center",
-                "Top Center",
-                "Top Left"
+                "None"
             ]
         }
     }
@@ -21190,7 +21243,7 @@ const componentImageFrame = {
                 "80",
                 "96",
                 "120",
-                "\bFree"
+                "Free"
             ]
         },
         "Rounded": {
@@ -22049,8 +22102,7 @@ const componentSwitch = {
             "type": "VARIANT",
             "variantOptions": [
                 "Label Last",
-                "Label First",
-                "🚫[Switch Mark 사용] Switch Only"
+                "Label First"
             ]
         }
     }
@@ -22819,6 +22871,7 @@ var FIGMA_COMPONENTS = {
   privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
   privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
   privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
+  privateComponentIdentityPlaceholder: privateComponentIdentityPlaceholder,
   privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
   privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
   privateComponentInputButtonValue: privateComponentInputButtonValue,
@@ -22863,7 +22916,7 @@ var FIGMA_COMPONENTS = {
   privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
   privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
   privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
-  privateTemplateAttechmentField: privateTemplateAttechmentField,
+  privateTemplateAttachmentField: privateTemplateAttachmentField,
   privateTemplateChipGroup: privateTemplateChipGroup,
   privateTemplateChipGroupField: privateTemplateChipGroupField,
   privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,
@@ -23040,6 +23093,12 @@ const variableService = createVariableService({
     }
 });
 
+const SKIP_COMPONENT_KEYS = new Set([
+    componentOsBottomIndicatorFigmaOnly.key,
+    componentOsKeyboardFigmaOnly.key,
+    componentOsStatusBarFigmaOnly.key
+]);
+
 function createFrameTransformer({ propsConverters }) {
     return defineElementTransformer((node, traverse)=>{
         const children = node.children;
@@ -23362,7 +23421,8 @@ function createPipeline(options = {}) {
         instanceTransformer,
         vectorTransformer,
         booleanOperationTransformer,
-        shouldInferAutoLayout
+        shouldInferAutoLayout,
+        skipComponentKeys: SKIP_COMPONENT_KEYS
     });
     return codegenTransformer;
 }

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

@@ -436,11 +436,20 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
+function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
+    function isSkippedInstance(node) {
+        if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
+        if (node.type !== "INSTANCE") return false;
+        const { componentKey, componentSetKey } = node;
+        return skipComponentKeys.has(componentKey) || !!componentSetKey && skipComponentKeys.has(componentSetKey);
+    }
     function traverse(node) {
         if ("visible" in node && !node.visible) {
             return;
         }
+        if (isSkippedInstance(node)) {
+            return;
+        }
         const result = tsPattern.match(node).with({
             type: "FRAME"
         }, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
@@ -458,7 +467,7 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
             type: "BOOLEAN_OPERATION"
         }, (node)=>booleanOperationTransformer(node, traverse)).with({
             type: "UNHANDLED"
-        }, ()=>createElement("UnhandledFigmaNode")).exhaustive();
+        }, (node)=>createElement(`Unhandled${changeCase.pascalCase(node.original.type)}Node`)).exhaustive();
         if (result) {
             return appendSource(result, node.id);
         }
@@ -468,6 +477,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
         return traverse(node);
     }
     function generateCode(node, options) {
+        if (isSkippedInstance(node)) {
+            return {
+                imports: "",
+                jsx: "// This component is intentionally excluded from codegen"
+            };
+        }
         const jsxTree = generateJsxTree(node);
         if (!jsxTree) {
             return undefined;
@@ -3449,9 +3464,9 @@ const createAppBarHandler$1 = (ctx)=>{
     });
 };
 
-const IDENTITY_PLACEHOLDER_KEY$1 = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
+const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
 const { createLocalSnippetElement: createLocalSnippetElement$15 } = createLocalSnippetHelper("identity-placeholder");
-const createIdentityPlaceholderHandler$1 = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY$1, ({ componentProperties: props })=>{
+const createIdentityPlaceholderHandler$1 = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: changeCase.camelCase(props.Identity.value)
         };
@@ -5296,8 +5311,8 @@ var archivedHandlers = {
   createToggleButtonHandler: createToggleButtonHandler$1
 };
 
-const privateTemplateAttechmentField = {
-    "name": "privateTemplateAttechmentField",
+const privateTemplateAttachmentField = {
+    "name": "privateTemplateAttachmentField",
     "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
     "componentPropertyDefinitions": {
         "Show Header#40606:8": {
@@ -5510,6 +5525,19 @@ const privateComponentFieldHeaderSuffix = {
         }
     }
 };
+const privateComponentIdentityPlaceholder = {
+    "name": "privateComponentIdentityPlaceholder",
+    "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+    "componentPropertyDefinitions": {
+        "Identity": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Person",
+                "Business"
+            ]
+        }
+    }
+};
 const privateComponentInputButtonPrefix = {
     "name": "privateComponentInputButtonPrefix",
     "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -7302,11 +7330,11 @@ const componentBottomSheet = {
         "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
+                "Top Left",
+                "Top Center",
                 "Bottom Left",
-                "None",
                 "Bottom Center",
-                "Top Center",
-                "Top Left"
+                "None"
             ]
         }
     }
@@ -7854,7 +7882,7 @@ const componentImageFrame = {
                 "80",
                 "96",
                 "120",
-                "\bFree"
+                "Free"
             ]
         },
         "Rounded": {
@@ -8713,8 +8741,7 @@ const componentSwitch = {
             "type": "VARIANT",
             "variantOptions": [
                 "Label Last",
-                "Label First",
-                "🚫[Switch Mark 사용] Switch Only"
+                "Label First"
             ]
         }
     }
@@ -9483,6 +9510,7 @@ var FIGMA_COMPONENTS = {
   privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
   privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
   privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
+  privateComponentIdentityPlaceholder: privateComponentIdentityPlaceholder,
   privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
   privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
   privateComponentInputButtonValue: privateComponentInputButtonValue,
@@ -9527,7 +9555,7 @@ var FIGMA_COMPONENTS = {
   privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
   privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
   privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
-  privateTemplateAttechmentField: privateTemplateAttechmentField,
+  privateTemplateAttachmentField: privateTemplateAttachmentField,
   privateTemplateChipGroup: privateTemplateChipGroup,
   privateTemplateChipGroupField: privateTemplateChipGroupField,
   privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,
@@ -9551,7 +9579,7 @@ var FIGMA_COMPONENTS = {
 };
 
 const { createLocalSnippetElement: createLocalSnippetElement$A } = createLocalSnippetHelper("action-button");
-const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionButton.key, ({ componentProperties: props })=>{
+const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionButton.key, ({ componentProperties: props, layoutGrow })=>{
         const states = props.State.value.split("-");
         const { layout, children } = tsPattern.match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -9589,7 +9617,10 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionB
             },
             size: handleSizeProp(props.Size.value),
             variant: changeCase.camelCase(props.Variant.value),
-            layout
+            layout,
+            ...layoutGrow === 1 && {
+                flexGrow: true
+            }
         };
         return createLocalSnippetElement$A("ActionButton", commonProps, children);
     });
@@ -9646,6 +9677,9 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(componentAc
             ...props.Bleed.value === "true" && {
                 bleedX: "asPadding",
                 bleedY: "asPadding"
+            },
+            ...node.layoutGrow === 1 && {
+                flexGrow: true
             }
         };
         return createLocalSnippetElement$A("ActionButton", commonProps, children);
@@ -9727,13 +9761,17 @@ const privateTemplateSelectField = {
 const privateTemplateTimePickerField = {
     "key": "e38df17cf1e0f96e09774b015739dfde30d46115"
 };
-const privateComponentBottomSheetContentsPlaceholder = {
-    "key": "e68b006d572300d3c987776192c8ab387fa45e05"
-};
 const privateComponentTopNavigationLeftIconButton = {
     "key": "c3e708bab11d8ea90a909b4539b6ba6b2a4e7b9c"};
 const componentChipSuffixIcon = {
     "key": "2f79e3c5a78315c854d7bd4499d142cfcc94548f"};
+const componentImageFrameBadge = {
+    "key": "6a1feb47139040d6f7522528f7c91bf4fe7bcc84"
+};
+const componentImageFrameIcon = {
+    "key": "4f495448eeda5d10f41e6195e16b4eff49aaec17"};
+const componentImageFrameOverlayIndicator = {
+    "key": "e3e3596f8c535facae4d23c21bc1d62dd721fe23"};
 const componentListItemPrefixAvatar = {
     "key": "27e33754113178be97e07195528c4ea020b3d3b7"
 };
@@ -9870,11 +9908,22 @@ const createAppBarHandler = (ctx)=>{
         });
     });
 };
+const createAppBarPresetHandler = (ctx)=>{
+    const appBarHandler = createAppBarHandler(ctx);
+    return defineComponentHandler(templateTopNavigationPreset.key, (node, traverse)=>{
+        const [appBarNode] = findAllInstances({
+            node,
+            key: componentTopNavigation.key
+        });
+        if (!appBarNode) {
+            return createLocalSnippetElement$y("AppBar");
+        }
+        return appBarHandler.transform(appBarNode, traverse);
+    });
+};
 
-// hardcoded since this lives in a different figma file
-const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
 const { createLocalSnippetElement: createLocalSnippetElement$x } = createLocalSnippetHelper("identity-placeholder");
-const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
+const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(privateComponentIdentityPlaceholder.key, ({ componentProperties: props })=>{
         const commonProps = {
             identity: changeCase.camelCase(props.Identity.value)
         };
@@ -9957,7 +10006,7 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(componentBottomS
         };
         const bodyNodes = findAllInstances({
             node,
-            key: privateComponentBottomSheetContentsPlaceholder.key
+            key: props["Contents#25320:0"].componentKey
         });
         const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$u("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$u("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
         const footerNodes = findAllInstances({
@@ -10478,6 +10527,99 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(componentHelpBubb
         });
     });
 
+const CORNER_CONFIGS = [
+    {
+        showKey: "ㄴ Left Top#58686:165",
+        placement: "top-start"
+    },
+    {
+        showKey: "ㄴ Right Top#58686:198",
+        placement: "top-end"
+    },
+    {
+        showKey: "ㄴ Left Bottom#58686:231",
+        placement: "bottom-start"
+    },
+    {
+        showKey: "ㄴ Right Bottom#58686:264",
+        placement: "bottom-end"
+    }
+];
+function formatRatio(ratioStr) {
+    const [w, h] = ratioStr.split(":");
+    return `${w} / ${h}`;
+}
+const createImageFrameBadgeHandler = (ctx)=>{
+    const badgeHandler = createBadgeHandler();
+    return defineComponentHandler(componentImageFrameBadge.key, (node, traverse)=>{
+        const [badge] = findAllInstances({
+            node,
+            key: badgeHandler.key
+        });
+        if (!badge) throw new Error("Badge component not found within ImageFrameBadge");
+        return {
+            ...badgeHandler.transform(badge, traverse),
+            tag: "ImageFrameBadge"
+        };
+    });
+};
+const createImageFrameReactionButtonHandler = (_ctx)=>{
+    return defineComponentHandler(componentImageFrameReactionButton.key, ({ componentProperties: props })=>{
+        return createSeedReactElement("ImageFrameReactionButton", {
+            ...props.Selected.value === "True" && {
+                defaultPressed: true
+            }
+        });
+    });
+};
+const createImageFrameOverlayIndicatorHandler = (_ctx)=>{
+    return defineComponentHandler(componentImageFrameOverlayIndicator.key, ({ componentProperties: props })=>{
+        return createSeedReactElement("ImageFrameIndicator", undefined, props["Text#58708:0"].value);
+    });
+};
+const createImageFrameIconHandler = (ctx)=>{
+    return defineComponentHandler(componentImageFrameIcon.key, ({ componentProperties: props })=>{
+        return createSeedReactElement("ImageFrameIcon", {
+            svg: ctx.iconHandler.transform(props["Icon#58686:297"])
+        });
+    });
+};
+const createImageFrameHandler = (ctx)=>{
+    return defineComponentHandler(componentImageFrame.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const floaters = [];
+        for (const { showKey, placement } of CORNER_CONFIGS){
+            if (!props[showKey].value) continue;
+            const slotName = showKey.split("#")[0];
+            const slotNode = findOne(node, (n)=>"name" in n && n.name === slotName);
+            if (!slotNode) continue;
+            const child = traverse(slotNode);
+            if (!child) continue;
+            floaters.push(createSeedReactElement("ImageFrameFloater", {
+                placement
+            }, child));
+        }
+        const commonProps = {
+            src: `https://placehold.co/${node.absoluteBoundingBox?.width ?? 100}x${node.absoluteBoundingBox?.height ?? 100}`,
+            alt: "",
+            ratio: formatRatio(props.Ratio.value),
+            ...props.Rounded.value === "True" && {
+                borderRadius: ctx.valueResolver.getFormattedValue.topLeftRadius(node)
+            },
+            ...node.layoutGrow === 1 ? {
+                flexGrow: true
+            } : node.layoutAlign === "STRETCH" ? {
+                alignSelf: "stretch"
+            } : {
+                width: ctx.valueResolver.getFormattedValue.width(node)
+            }
+        };
+        return createSeedReactElement("ImageFrame", commonProps, props["Show Overlay#58686:33"].value && floaters.length > 0 ? floaters : undefined, {
+            comment: "alt 텍스트를 제공해야 합니다."
+        });
+    });
+};
+
 const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("select-box");
 const createLegacySelectBoxHandler = (_ctx)=>defineComponentHandler(componentDeprecatedSelectBox.key, ({ componentProperties: props })=>{
         const tag = tsPattern.match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
@@ -10835,7 +10977,7 @@ const createMenuSheetHandler = (ctx)=>{
         const trigger = createLocalSnippetElement$f("MenuSheetTrigger", {
             asChild: true
         }, createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"));
-        return createLocalSnippetElement$f("MenuSheet", undefined, [
+        return createLocalSnippetElement$f("MenuSheetRoot", undefined, [
             trigger,
             content
         ]);
@@ -11459,9 +11601,6 @@ const createSwitchHandler = (_ctx)=>defineComponentHandler(componentSwitch.key,
             tone,
             size: props.Size.value
         };
-        if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
-            return createLocalSnippetElement$4("Switchmark", commonProps);
-        }
         return createLocalSnippetElement$4("Switch", {
             ...commonProps,
             label: props["Label#36578:0"].value,
@@ -11583,7 +11722,7 @@ const createLineTriggerHugHandler = (_ctx)=>defineComponentHandler(privateCompon
                 notification: true
             }
         };
-        return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+        return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     });
 const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(privateComponentTabItemLineFill.key, ({ componentProperties: props })=>{
         const commonProps = {
@@ -11595,7 +11734,7 @@ const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(privateCompo
                 notification: true
             }
         };
-        return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+        return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     });
 /*
 <ChipTabsRoot
@@ -11683,7 +11822,7 @@ const createChipTabsTriggerHandler = (_ctx)=>defineComponentHandler(privateCompo
                 notification: true
             }
         };
-        return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+        return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps, chipProps["Label#7185:0"].value);
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("tag-group");
@@ -11939,6 +12078,7 @@ var currentHandlers = {
   createAddressFieldHandler: createAddressFieldHandler,
   createAlertDialogHandler: createAlertDialogHandler,
   createAppBarHandler: createAppBarHandler,
+  createAppBarPresetHandler: createAppBarPresetHandler,
   createAvatarHandler: createAvatarHandler,
   createAvatarStackHandler: createAvatarStackHandler,
   createBadgeHandler: createBadgeHandler,
@@ -11955,6 +12095,11 @@ var currentHandlers = {
   createFloatingActionButtonHandler: createFloatingActionButtonHandler,
   createHelpBubbleHandler: createHelpBubbleHandler,
   createIdentityPlaceholderHandler: createIdentityPlaceholderHandler,
+  createImageFrameBadgeHandler: createImageFrameBadgeHandler,
+  createImageFrameHandler: createImageFrameHandler,
+  createImageFrameIconHandler: createImageFrameIconHandler,
+  createImageFrameOverlayIndicatorHandler: createImageFrameOverlayIndicatorHandler,
+  createImageFrameReactionButtonHandler: createImageFrameReactionButtonHandler,
   createLegacyMultilineTextFieldHandler: createLegacyMultilineTextFieldHandler,
   createLegacySelectBoxGroupHandler: createLegacySelectBoxGroupHandler,
   createLegacyTextFieldHandler: createLegacyTextFieldHandler,
@@ -24196,6 +24341,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:576:22878",
             "VariableID:59176:2",
             "VariableID:59176:3",
+            "VariableID:61337:3",
             "VariableID:654:20851",
             "VariableID:670:2700",
             "VariableID:6782:76317",
@@ -31029,6 +31175,30 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
+    "VariableID:61337:3": {
+        "name": "stroke/focus-ring",
+        "id": "VariableID:61337:3",
+        "remote": false,
+        "key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            },
+            "1928:8": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
     "VariableID:41338:806": {
         "name": "stroke/informative-solid",
         "id": "VariableID:41338:806",
@@ -31501,6 +31671,12 @@ const iconService = createIconService({
     iconRepository
 });
 
+const SKIP_COMPONENT_KEYS = new Set([
+    componentOsBottomIndicatorFigmaOnly.key,
+    componentOsKeyboardFigmaOnly.key,
+    componentOsStatusBarFigmaOnly.key
+]);
+
 const defaultIconNameFormatter = ({ name, weight })=>changeCase.pascalCase(`${name}${weight ? weight : ""}`);
 function createIconHandler({ iconService, iconNameFormatter = defaultIconNameFormatter }) {
     function isIconInstance(node) {
@@ -31667,7 +31843,8 @@ function createPipeline(options = {}) {
         instanceTransformer,
         vectorTransformer,
         booleanOperationTransformer,
-        shouldInferAutoLayout
+        shouldInferAutoLayout,
+        skipComponentKeys: SKIP_COMPONENT_KEYS
     });
     return codeGenerator;
 }