@seed-design/figma 1.3.3 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,13 +39,13 @@
     "sync-entities": "find src/entities/data/__generated__ -mindepth 1 -maxdepth 1 ! -name 'archive' -exec rm -rf {} + 2>/dev/null; bun figma-extractor src/entities/data/__generated__"
   },
   "dependencies": {
-    "@seed-design/css": "1.2.2",
+    "@seed-design/css": "1.2.4",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.110.0",
-    "@figma/rest-api-spec": "^0.35.0",
+    "@figma/rest-api-spec": "^0.36.0",
     "@karrotmarket/icon-data": "^1.17.0",
     "@seed-design/figma-extractor": "^1.1.0",
     "typescript": "^5.9.2"

package/src/codegen/component-properties.ts

@@ -110,6 +110,26 @@ export type HelpBubbleProperties = InferComponentDefinition<
   typeof sets.componentHelpBubble.componentPropertyDefinitions
 >;
 
+export type IdentityPlaceholderProperties = InferComponentDefinition<
+  typeof sets.privateComponentIdentityPlaceholder.componentPropertyDefinitions
+>;
+
+export type ImageFrameProperties = InferComponentDefinition<
+  typeof sets.componentImageFrame.componentPropertyDefinitions
+>;
+
+export type ImageFrameIconProperties = InferComponentDefinition<
+  typeof components.componentImageFrameIcon.componentPropertyDefinitions
+>;
+
+export type ImageFrameOverlayIndicatorProperties = InferComponentDefinition<
+  typeof components.componentImageFrameOverlayIndicator.componentPropertyDefinitions
+>;
+
+export type ImageFrameReactionButtonProperties = InferComponentDefinition<
+  typeof sets.componentImageFrameReactionButton.componentPropertyDefinitions
+>;
+
 export type PageBannerProperties = InferComponentDefinition<
   typeof sets.componentPageBanner.componentPropertyDefinitions
 >;

package/src/codegen/core/codegen.ts

@@ -12,6 +12,7 @@ import { match } from "ts-pattern";
 import { appendSource, createElement, stringifyElement, type ElementNode } from "../core/jsx";
 import type { ElementTransformer } from "./element-transformer";
 import { applyInferredLayout, inferLayout } from "./infer-layout";
+import { pascalCase } from "change-case";
 
 export interface CodeGeneratorDeps {
   frameTransformer: ElementTransformer<
@@ -23,6 +24,7 @@ export interface CodeGeneratorDeps {
   vectorTransformer: ElementTransformer<NormalizedVectorNode>;
   booleanOperationTransformer: ElementTransformer<NormalizedBooleanOperationNode>;
   shouldInferAutoLayout: boolean;
+  skipComponentKeys?: Set<string>;
 }
 
 export interface CodeGenerator {
@@ -41,12 +43,29 @@ export function createCodeGenerator({
   vectorTransformer,
   booleanOperationTransformer,
   shouldInferAutoLayout,
+  skipComponentKeys,
 }: CodeGeneratorDeps): CodeGenerator {
+  function isSkippedInstance(node: NormalizedSceneNode): boolean {
+    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: NormalizedSceneNode): ElementNode | undefined {
     if ("visible" in node && !node.visible) {
       return;
     }
 
+    if (isSkippedInstance(node)) {
+      return;
+    }
+
     const result = match(node)
       .with({ type: "FRAME" }, (node) =>
         shouldInferAutoLayout
@@ -59,7 +78,9 @@ export function createCodeGenerator({
       .with({ type: "INSTANCE" }, (node) => instanceTransformer(node, traverse))
       .with({ type: "VECTOR" }, (node) => vectorTransformer(node, traverse))
       .with({ type: "BOOLEAN_OPERATION" }, (node) => booleanOperationTransformer(node, traverse))
-      .with({ type: "UNHANDLED" }, () => createElement("UnhandledFigmaNode"))
+      .with({ type: "UNHANDLED" }, (node) =>
+        createElement(`Unhandled${pascalCase(node.original.type)}Node`),
+      )
       .exhaustive();
 
     if (result) {
@@ -74,6 +95,10 @@ export function createCodeGenerator({
   }
 
   function generateCode(node: NormalizedSceneNode, options: { shouldPrintSource: boolean }) {
+    if (isSkippedInstance(node)) {
+      return { imports: "", jsx: "// This component is intentionally excluded from codegen" };
+    }
+
     const jsxTree = generateJsxTree(node);
 
     if (!jsxTree) {

package/src/codegen/skip-components.ts

@@ -0,0 +1,7 @@
+import * as metadata from "../entities/data/__generated__/component-sets";
+
+export const SKIP_COMPONENT_KEYS: Set<string> = new Set([
+  metadata.componentOsBottomIndicatorFigmaOnly.key,
+  metadata.componentOsKeyboardFigmaOnly.key,
+  metadata.componentOsStatusBarFigmaOnly.key,
+]);

package/src/codegen/targets/figma/pipeline.ts

@@ -1,6 +1,7 @@
 import { createCodeGenerator, createValueResolver } from "@/codegen/core";
 import type { CodeGenerator } from "@/codegen/core/codegen";
 import { styleService, variableService } from "@/codegen/default-services";
+import { SKIP_COMPONENT_KEYS } from "@/codegen/skip-components";
 import { componentRepository } from "@/entities";
 import { createFrameTransformer } from "./frame";
 import { createInstanceTransformer } from "./instance";
@@ -98,6 +99,7 @@ export function createPipeline(options: CreatePipelineConfig = {}): CodeGenerato
     vectorTransformer,
     booleanOperationTransformer,
     shouldInferAutoLayout,
+    skipComponentKeys: SKIP_COMPONENT_KEYS,
   });
 
   return codegenTransformer;

package/src/codegen/targets/react/component/handlers/action-button.ts

@@ -17,7 +17,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("action-button");
 export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ActionButtonProperties>(
     metadata.componentActionButton.key,
-    ({ componentProperties: props }) => {
+    ({ componentProperties: props, layoutGrow }) => {
       const states = props.State.value.split("-");
 
       const { layout, children } = match(props.Layout.value)
@@ -63,6 +63,7 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
         size: handleSizeProp(props.Size.value),
         variant: camelCase(props.Variant.value),
         layout,
+        ...(layoutGrow === 1 && { flexGrow: true }),
       };
 
       return createLocalSnippetElement("ActionButton", commonProps, children);
@@ -140,6 +141,7 @@ export const createActionButtonGhostHandler = (ctx: ComponentHandlerDeps) =>
           bleedX: "asPadding",
           bleedY: "asPadding",
         }),
+        ...(node.layoutGrow === 1 && { flexGrow: true }),
       };
 
       return createLocalSnippetElement("ActionButton", commonProps, children);

package/src/codegen/targets/react/component/handlers/app-bar.ts

@@ -150,3 +150,20 @@ export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
     },
   );
 };
+
+export const createAppBarPresetHandler = (ctx: ComponentHandlerDeps) => {
+  const appBarHandler = createAppBarHandler(ctx);
+
+  return defineComponentHandler(metadata.templateTopNavigationPreset.key, (node, traverse) => {
+    const [appBarNode] = findAllInstances<AppBarProperties>({
+      node,
+      key: metadata.componentTopNavigation.key,
+    });
+
+    if (!appBarNode) {
+      return createLocalSnippetElement("AppBar");
+    }
+
+    return appBarHandler.transform(appBarNode, traverse);
+  });
+};

package/src/codegen/targets/react/component/handlers/bottom-sheet.ts

@@ -1,7 +1,6 @@
 import type { BottomSheetProperties } from "@/codegen/component-properties";
 import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import * as components from "@/entities/data/__generated__/components";
 import { match } from "ts-pattern";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
@@ -33,7 +32,7 @@ export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
 
       const bodyNodes = findAllInstances({
         node,
-        key: components.privateComponentBottomSheetContentsPlaceholder.key,
+        key: props["Contents#25320:0"].componentKey,
       });
 
       const bottomSheetBody =

package/src/codegen/targets/react/component/handlers/identity-placeholder.ts

@@ -1,24 +1,15 @@
-import { defineComponentHandler, type InferComponentDefinition } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import { camelCase } from "change-case";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-
-// hardcoded since this lives in a different figma file
-const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
-
-export type IdentityPlaceholderProperties = InferComponentDefinition<{
-  Identity: {
-    type: "VARIANT";
-    defaultValue: "Person";
-    variantOptions: ["Person", "Business"];
-  };
-}>;
+import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("identity-placeholder");
 
 export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<IdentityPlaceholderProperties>(
-    IDENTITY_PLACEHOLDER_KEY,
+    metadata.privateComponentIdentityPlaceholder.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         identity: camelCase(props.Identity.value),

package/src/codegen/targets/react/component/handlers/image-frame.ts

@@ -0,0 +1,134 @@
+import type {
+  BadgeProperties,
+  ImageFrameIconProperties,
+  ImageFrameOverlayIndicatorProperties,
+  ImageFrameProperties,
+  ImageFrameReactionButtonProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { createBadgeHandler } from "@/codegen/targets/react/component/handlers/badge";
+
+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",
+  },
+] as const satisfies ReadonlyArray<{
+  showKey: keyof ImageFrameProperties;
+  placement: string;
+}>;
+
+function formatRatio(ratioStr: `${number}:${number}`): string {
+  const [w, h] = ratioStr.split(":");
+
+  return `${w} / ${h}`;
+}
+
+export const createImageFrameBadgeHandler = (ctx: ComponentHandlerDeps) => {
+  const badgeHandler = createBadgeHandler(ctx);
+
+  return defineComponentHandler<{}>(components.componentImageFrameBadge.key, (node, traverse) => {
+    const [badge] = findAllInstances<BadgeProperties>({
+      node,
+      key: badgeHandler.key,
+    });
+
+    if (!badge) throw new Error("Badge component not found within ImageFrameBadge");
+
+    return { ...badgeHandler.transform(badge, traverse), tag: "ImageFrameBadge" };
+  });
+};
+
+export const createImageFrameReactionButtonHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameReactionButtonProperties>(
+    metadata.componentImageFrameReactionButton.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameReactionButton", {
+        ...(props.Selected.value === "True" && { defaultPressed: true }),
+      });
+    },
+  );
+};
+
+export const createImageFrameOverlayIndicatorHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameOverlayIndicatorProperties>(
+    components.componentImageFrameOverlayIndicator.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameIndicator", undefined, props["Text#58708:0"].value);
+    },
+  );
+};
+
+export const createImageFrameIconHandler = (ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameIconProperties>(
+    components.componentImageFrameIcon.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameIcon", {
+        svg: ctx.iconHandler.transform(props["Icon#58686:297"]),
+      });
+    },
+  );
+};
+
+export const createImageFrameHandler = (ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameProperties>(
+    metadata.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 텍스트를 제공해야 합니다." },
+      );
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/index.ts

@@ -15,6 +15,7 @@ export * from "./field-button";
 export * from "./floating-action-button";
 export * from "./help-bubble";
 export * from "./identity-placeholder";
+export * from "./image-frame";
 export * from "./legacy-select-box";
 export * from "./legacy-text-field";
 export * from "./list-header";

package/src/codegen/targets/react/component/handlers/menu-sheet.ts

@@ -105,7 +105,7 @@ export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
         createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
       );
 
-      return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
+      return createLocalSnippetElement("MenuSheetRoot", undefined, [trigger, content]);
     },
   );
 };

package/src/codegen/targets/react/component/handlers/switch.ts

@@ -21,10 +21,6 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
         size: props.Size.value,
       };
 
-      if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
-        return createLocalSnippetElement("Switchmark", commonProps);
-      }
-
       return createLocalSnippetElement("Switch", {
         ...commonProps,
         label: props["Label#36578:0"].value,

package/src/codegen/targets/react/component/handlers/tabs.ts

@@ -156,7 +156,7 @@ const createLineTriggerHugHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+      return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     },
   );
 
@@ -174,7 +174,7 @@ const createLineTriggerFillHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+      return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     },
   );
 
@@ -289,6 +289,10 @@ const createChipTabsTriggerHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+      return createChipTabsLocalSnippetElement(
+        "ChipTabsTrigger",
+        commonProps,
+        chipProps["Label#7185:0"].value,
+      );
     },
   );

package/src/codegen/targets/react/pipeline.ts

@@ -1,5 +1,6 @@
 import { createCodeGenerator, createValueResolver } from "@/codegen/core";
 import { iconService, styleService, variableService } from "@/codegen/default-services";
+import { SKIP_COMPONENT_KEYS } from "@/codegen/skip-components";
 import {
   type UnboundComponentHandler,
   bindComponentHandler,
@@ -125,6 +126,7 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
     vectorTransformer,
     booleanOperationTransformer,
     shouldInferAutoLayout,
+    skipComponentKeys: SKIP_COMPONENT_KEYS,
   });
 
   return codeGenerator;

package/src/entities/data/__generated__/component-sets/index.d.ts

@@ -1,5 +1,5 @@
-export declare const privateTemplateAttechmentField: {
-  "name": "privateTemplateAttechmentField",
+export declare const privateTemplateAttachmentField: {
+  "name": "privateTemplateAttachmentField",
   "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
   "componentPropertyDefinitions": {
     "Show Header#40606:8": {
@@ -223,6 +223,20 @@ export declare const privateComponentFieldHeaderSuffix: {
   }
 };
 
+export declare const privateComponentIdentityPlaceholder: {
+  "name": "privateComponentIdentityPlaceholder",
+  "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+  "componentPropertyDefinitions": {
+    "Identity": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Person",
+        "Business"
+      ]
+    }
+  }
+};
+
 export declare const privateComponentInputButtonPrefix: {
   "name": "privateComponentInputButtonPrefix",
   "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -2079,11 +2093,11 @@ export declare const componentBottomSheet: {
     "Header Layout": {
       "type": "VARIANT",
       "variantOptions": [
+        "Top Left",
+        "Top Center",
         "Bottom Left",
-        "None",
         "Bottom Center",
-        "Top Center",
-        "Top Left"
+        "None"
       ]
     }
   }
@@ -2648,7 +2662,7 @@ export declare const componentImageFrame: {
         "80",
         "96",
         "120",
-        "\bFree"
+        "Free"
       ]
     },
     "Rounded": {
@@ -3541,8 +3555,7 @@ export declare const componentSwitch: {
       "type": "VARIANT",
       "variantOptions": [
         "Label Last",
-        "Label First",
-        "🚫[Switch Mark 사용] Switch Only"
+        "Label First"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/index.mjs

@@ -1,5 +1,5 @@
-export const privateTemplateAttechmentField = {
-  "name": "privateTemplateAttechmentField",
+export const privateTemplateAttachmentField = {
+  "name": "privateTemplateAttachmentField",
   "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
   "componentPropertyDefinitions": {
     "Show Header#40606:8": {
@@ -223,6 +223,20 @@ export const privateComponentFieldHeaderSuffix = {
   }
 };
 
+export const privateComponentIdentityPlaceholder = {
+  "name": "privateComponentIdentityPlaceholder",
+  "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+  "componentPropertyDefinitions": {
+    "Identity": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Person",
+        "Business"
+      ]
+    }
+  }
+};
+
 export const privateComponentInputButtonPrefix = {
   "name": "privateComponentInputButtonPrefix",
   "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -2079,11 +2093,11 @@ export const componentBottomSheet = {
     "Header Layout": {
       "type": "VARIANT",
       "variantOptions": [
+        "Top Left",
+        "Top Center",
         "Bottom Left",
-        "None",
         "Bottom Center",
-        "Top Center",
-        "Top Left"
+        "None"
       ]
     }
   }
@@ -2648,7 +2662,7 @@ export const componentImageFrame = {
         "80",
         "96",
         "120",
-        "\bFree"
+        "Free"
       ]
     },
     "Rounded": {
@@ -3541,8 +3555,7 @@ export const componentSwitch = {
       "type": "VARIANT",
       "variantOptions": [
         "Label Last",
-        "Label First",
-        "🚫[Switch Mark 사용] Switch Only"
+        "Label First"
       ]
     }
   }
@@ -4245,4 +4258,4 @@ export const componentSelectBoxItemVertical = {
       ]
     }
   }
-};
+};

package/src/entities/data/__generated__/components/index.d.ts

@@ -84,11 +84,6 @@ export declare const templateInformationList: {
   "key": "ea1ff4070a5ef4ada5974dc7030e8f9a1b759cdb"
 };
 
-export declare const componentFigmaOnly: {
-  "name": "componentFigmaOnly",
-  "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
-};
-
 export declare const componentBottomSheetContentsAgreement: {
   "name": "componentBottomSheetContentsAgreement",
   "key": "9d530235407646750ce8298b2815093dffcbbd83"
@@ -375,4 +370,9 @@ export declare const componentSelectBoxItemSuffixCheck: {
 export declare const componentSelectBoxItemSuffixRadiomark: {
   "name": "componentSelectBoxItemSuffixRadiomark",
   "key": "cfb712b12fe2805b5594f8c143147c8aa3de490e"
-};
+};
+
+export declare const componentFigmaOnly: {
+  "name": "componentFigmaOnly",
+  "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
+};

package/src/entities/data/__generated__/components/index.mjs

@@ -84,11 +84,6 @@ export const templateInformationList = {
   "key": "ea1ff4070a5ef4ada5974dc7030e8f9a1b759cdb"
 };
 
-export const componentFigmaOnly = {
-  "name": "componentFigmaOnly",
-  "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
-};
-
 export const componentBottomSheetContentsAgreement = {
   "name": "componentBottomSheetContentsAgreement",
   "key": "9d530235407646750ce8298b2815093dffcbbd83"
@@ -375,4 +370,9 @@ export const componentSelectBoxItemSuffixCheck = {
 export const componentSelectBoxItemSuffixRadiomark = {
   "name": "componentSelectBoxItemSuffixRadiomark",
   "key": "cfb712b12fe2805b5594f8c143147c8aa3de490e"
-};
+};
+
+export const componentFigmaOnly = {
+  "name": "componentFigmaOnly",
+  "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
+};

package/src/entities/data/__generated__/variable-collections/index.mjs

@@ -289,6 +289,7 @@ export 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",

package/src/entities/data/__generated__/variables/index.mjs

@@ -6643,6 +6643,30 @@ export 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",