@seed-design/figma 1.1.19 → 1.2.1

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

@@ -11,20 +11,17 @@ import { findAllInstances } from "@/utils/figma-node";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("floating-action-button");
 
-const BUTTON_TYPE_KEY = "8cecc85275115d653579d4c3156567ebf19f7b27";
-const MENU_TYPE_KEY = "400124347392c15473f9cd2d8a6aedb64f3baf36";
-
 export const createFloatingActionButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<FloatingActionButtonProperties>(
-    metadata.floatingActionButton.key,
+    metadata.componentFloatingActionButton.key,
     (node) => {
       const [button] = findAllInstances<FloatingActionButtonButtonItemProperties>({
         node,
-        key: BUTTON_TYPE_KEY,
+        key: metadata.privateComponentItemButtonType.key,
       });
       const [menu] = findAllInstances<FloatingActionButtonMenuItemProperties>({
         node,
-        key: MENU_TYPE_KEY,
+        key: metadata.privateComponentItemMenuType.key,
       });
 
       const commonProps = (() => {

package/src/codegen/targets/react/component/handlers/help-bubble.ts

@@ -10,7 +10,7 @@ const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
 
 export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<HelpBubbleProperties>(
-    metadata.helpBubble.key,
+    metadata.componentHelpBubble.key,
     ({ componentProperties: props }) => {
       const placement:
         | "top"

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

@@ -1,11 +1,19 @@
-import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
+import { defineComponentHandler, type InferComponentDefinition } 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"];
+  };
+}>;
+
 const { createLocalSnippetElement } = createLocalSnippetHelper("identity-placeholder");
 
 export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>

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

@@ -0,0 +1,41 @@
+export * from "./action-button";
+export * from "./alert-dialog";
+export * from "./app-bar";
+export * from "./avatar";
+export * from "./avatar-stack";
+export * from "./badge";
+export * from "./bottom-sheet";
+export * from "./callout";
+export * from "./checkbox";
+export * from "./checkmark";
+export * from "./chip";
+export * from "./contextual-floating-button";
+export * from "./divider";
+export * from "./field";
+export * from "./field-button";
+export * from "./floating-action-button";
+export * from "./help-bubble";
+export * from "./identity-placeholder";
+export * from "./legacy-select-box";
+export * from "./legacy-text-field";
+export * from "./list-header";
+export * from "./list-item";
+export * from "./manner-temp";
+export * from "./manner-temp-badge";
+export * from "./menu-sheet";
+export * from "./page-banner";
+export * from "./progress-circle";
+export * from "./radio-group";
+export * from "./radiomark";
+export * from "./reaction-button";
+export * from "./result-section";
+export * from "./segmented-control";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./snackbar";
+export * from "./switch";
+export * from "./switchmark";
+export * from "./tabs";
+export * from "./tag-group";
+export * from "./text-field";
+export * from "./toggle-button";

package/src/codegen/targets/react/component/handlers/legacy-select-box.ts

@@ -3,6 +3,7 @@ import type {
   LegacySelectBoxProperties,
 } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
 import { match } from "ts-pattern";
 import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
@@ -10,12 +11,9 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("select-box");
 
-const LEGACY_SELECT_BOX_KEY = "38722ffeb4c966256a709155e8ddac50c93d7c60";
-const LEGACY_SELECT_BOX_GROUP_KEY = "a3d58bb8540600878742cdcf2608a4b3851667ec";
-
 export const createLegacySelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<LegacySelectBoxProperties>(
-    LEGACY_SELECT_BOX_KEY,
+    metadata.componentDeprecatedSelectBox.key,
     ({ componentProperties: props }) => {
       const tag = match(props.Control.value)
         .with("Checkbox", () => "CheckSelectBox")
@@ -47,7 +45,7 @@ export const createLegacySelectBoxGroupHandler = (ctx: ComponentHandlerDeps) =>
   const selectBoxHandler = createLegacySelectBoxHandler(ctx);
 
   return defineComponentHandler<LegacySelectBoxGroupProperties>(
-    LEGACY_SELECT_BOX_GROUP_KEY,
+    metadata.componentDeprecatedSelectBoxGroup.key,
     (node, traverse) => {
       const props = node.componentProperties;
 

package/src/codegen/targets/react/component/handlers/legacy-text-field.ts

@@ -3,18 +3,16 @@ import type {
   LegacyTextFieldProperties,
 } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
 
-const LEGACY_TEXT_FIELD_KEY = "c49873c37a639f0dffdea4efd0eb43760d66c141";
-const LEGACY_MULTILINE_TEXT_FIELD_KEY = "88b2399c930c85f9ce2972163a078bc684b84bbe";
-
 export const createLegacyTextFieldHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<LegacyTextFieldProperties>(
-    LEGACY_TEXT_FIELD_KEY,
+    metadata.componentDeprecatedTextField.key,
     ({ componentProperties: props }) => {
       const {
         Size: { value: size },
@@ -120,7 +118,7 @@ export const createLegacyTextFieldHandler = (ctx: ComponentHandlerDeps) =>
 
 export const createLegacyMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<LegacyMultilineTextFieldProperties>(
-    LEGACY_MULTILINE_TEXT_FIELD_KEY,
+    metadata.componentDeprecatedMultilineTextField.key,
     ({ componentProperties: props }) => {
       const {
         Size: { value: size },

package/src/codegen/targets/react/component/handlers/list-header.ts

@@ -9,7 +9,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("list-header");
 
 export const createListHeaderHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ListHeaderProperties>(
-    metadata.listHeader.key,
+    metadata.componentListHeader.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         variant: camelCase(props["Variant"].value),

package/src/codegen/targets/react/component/handlers/list-item.ts

@@ -5,6 +5,7 @@ import type {
 } 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 type { NormalizedTextNode } from "@/normalizer";
 import { findAllInstances, findOne } from "@/utils/figma-node";
 import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
@@ -14,28 +15,28 @@ import { match } from "ts-pattern";
 const { createLocalSnippetElement } = createLocalSnippetHelper("list");
 
 const PREFIX_KEYS = {
-  checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
-  radioMark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
-  icon: "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca",
-  avatar: "ef0e8bd6c2f92e620acf204bb9a8079ef25a1e5c",
-  image: "82239325aa1cb65af7c649fc71a8f2b48fb9b9f3",
-  custom: "81f201fc876e38f016ab7427a6b3da000ee919a2",
-} as const;
+  checkmark: "563275de82ea1282cece0c35c0cd8d1625bc3a9d",
+  radiomark: "51f7c0917ebc559d81e63d0639cb632a792f40de",
+  icon: components.componentListItemPrefixIcon.key,
+  avatar: "27e33754113178be97e07195528c4ea020b3d3b7",
+  image: "d06216ff143a960844799c0b8f9212628f78c69d",
+  custom: "b8059f5e0f85e0745fc61ff70f04571177c2cdfc",
+};
 
 const SUFFIX_KEYS = {
-  checkmark: "abf9810103ae6e6afe8fa253ec5f05d6a7304b38",
-  radioMark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
-  chevron: "8c52207687ffed15cd5931d71ed9d196b3358a68",
-  switch: "1e933f75dd6bb4b21c3289b5c3b4402d2c623125",
-  custom: "3a70bf5bb9856c13893931b7a0df652bcf0be895",
-  icon: "4cc7e9b84a8388a36cb3898c6c02e6110a3281b9",
-  chevronWithText: "fe0e25f4fecda59d0a3730ead7c5bc0a66a41e7e",
-  iconButton: "5636566f6de6f58200dce388f7b1ac9f517b30e1",
-  actionButton: "3d788f28c785d1c60b937b253c39ce582dbe1ed3",
-} as const;
+  checkmark: "385ba8d607029e15e0d38ab415f783016488b185",
+  radiomark: "09871d64c5c30407da586fb34425c2e83e147c81",
+  chevron: components.componentListItemSuffixChevron.key,
+  switch: "0c26bd64e117e168b06eea69be903e4be762a728",
+  custom: "26b86c9f8965d38aa5a1181a5cdc89fa487988d1",
+  icon: components.componentListItemSuffixIcon.key,
+  chevronWithText: components.componentListItemSuffixChevronWithText.key,
+  iconButton: metadata.componentListItemSuffixIconButton.key,
+  actionButton: metadata.componentListItemSuffixActionButton.key,
+};
 
 export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ListItemProperties>(metadata.listItem.key, (node, traverse) => {
+  defineComponentHandler<ListItemProperties>(metadata.componentListItem.key, (node, traverse) => {
     const { componentProperties: props } = node;
 
     const { alignItems, title } = match(props.Variants.value)
@@ -102,7 +103,7 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
     const disabled = props.State.value === "Disabled";
 
     const tag = (() => {
-      if (suffix?.tag === "SwitchMark") {
+      if (suffix?.tag === "Switchmark") {
         return "ListSwitchItem";
       }
 
@@ -110,11 +111,11 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
         return "ListCheckItem";
       }
 
-      if (prefix?.tag === "RadioMark" || suffix?.tag === "RadioMark") {
+      if (prefix?.tag === "Radiomark" || suffix?.tag === "Radiomark") {
         return "ListRadioItem";
       }
 
-      // checkmark/radioMark 없는데 disabled인 경우 Button으로 추측
+      // checkmark/radiomark 없는데 disabled인 경우 Button으로 추측
       if (disabled) {
         return "ListButtonItem";
       }

package/src/codegen/targets/react/component/handlers/manner-temp-badge.ts

@@ -8,7 +8,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp-badg
 
 export const createMannerTempBadgeHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MannerTempBadgeProperties>(
-    metadata.mannerTempBadge.key,
+    metadata.componentMannerTempBadge.key,
     ({ children }) => {
       const textNode = children.find((child) => child.type === "TEXT");
 

package/src/codegen/targets/react/component/handlers/manner-temp.ts

@@ -7,7 +7,7 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp");
 
 export const createMannerTempHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<MannerTempProperties>(metadata.mannerTemp.key, ({ children }) => {
+  defineComponentHandler<MannerTempProperties>(metadata.componentMannerTemp.key, ({ children }) => {
     const textNode = children.find((child) => child.type === "TEXT");
 
     const commonProps = {

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

@@ -7,7 +7,7 @@ import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
 import { camelCase } from "change-case";
-import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { match } from "ts-pattern";
 
@@ -15,10 +15,9 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("menu-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
   createLocalSnippetHelper("action-button");
 
-const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
 const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MenuSheetItemProperties>(
-    MENU_SHEET_ITEM_KEY,
+    metadata.privateComponentMenuSheetMenuItem.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
 
@@ -27,25 +26,24 @@ const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
         ...(states.includes("Disabled") && {
           disabled: true,
         }),
+        ...(props["Show Prefix Icon#17043:5"].value && {
+          prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
+        }),
+        label: props["Label#55905:8"].value,
+        ...(props["Show Item Description#51411:19"].value && {
+          description: props["Sub Text#51411:0"].value,
+        }),
       };
 
-      return createLocalSnippetElement("MenuSheetItem", commonProps, [
-        props["Show Prefix Icon#17043:5"].value
-          ? createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
-            })
-          : undefined,
-        props["Label#55905:8"].value,
-      ]);
+      return createLocalSnippetElement("MenuSheetItem", commonProps);
     },
   );
 
-const MENU_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
 const createMenuSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
   const menuSheetItemHandler = createMenuSheetItemHandler(ctx);
 
   return defineComponentHandler<MenuSheetGroupProperties>(
-    MENU_SHEET_GROUP_KEY,
+    metadata.privateComponentMenuSheetMenuGroup.key,
     (node, traverse) => {
       const items = findAllInstances<MenuSheetItemProperties>({
         node,
@@ -62,45 +60,52 @@ const createMenuSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
 export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
   const menuSheetGroupHandler = createMenuSheetGroupHandler(ctx);
 
-  return defineComponentHandler<MenuSheetProperties>(metadata.menuSheet.key, (node, traverse) => {
-    const { componentProperties: props } = node;
-
-    const groups = findAllInstances<MenuSheetGroupProperties>({
-      node,
-      key: menuSheetGroupHandler.key,
-    });
-
-    const contentChildren = groups.map((group) => menuSheetGroupHandler.transform(group, traverse));
-
-    const title = props["Show Header#17043:12"].value
-      ? props["Title Text#14599:0"].value
-      : undefined;
-
-    // TODO: React 구현체에 description 추가 이후
-    // const description = props["Description Text#21827:0"].value;
-
-    const { labelAlign } = match(props.Layout.value)
-      .with("Text with Icon", () => ({ labelAlign: "left" }))
-      .with("Text Only", () => ({ labelAlign: "center" }))
-      .exhaustive();
-
-    const content = createLocalSnippetElement(
-      "MenuSheetContent",
-      { title, labelAlign },
-      contentChildren,
-      {
-        comment: title
-          ? undefined
-          : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
-      },
-    );
-
-    const trigger = createLocalSnippetElement(
-      "MenuSheetTrigger",
-      { asChild: true },
-      createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
-    );
-
-    return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
-  });
+  return defineComponentHandler<MenuSheetProperties>(
+    metadata.componentMenuSheet.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const groups = findAllInstances<MenuSheetGroupProperties>({
+        node,
+        key: menuSheetGroupHandler.key,
+      });
+
+      const contentChildren = groups.map((group) =>
+        menuSheetGroupHandler.transform(group, traverse),
+      );
+
+      const title = props["Show Header#17043:12"].value
+        ? props["Title Text#14599:0"].value
+        : undefined;
+
+      const description =
+        props["Show Header#17043:12"].value && props["Show Header Description#32984:0"].value
+          ? props["Description Text#21827:0"].value
+          : undefined;
+
+      const { labelAlign } = match(props.Layout.value)
+        .with("Text with Icon", () => ({ labelAlign: "left" }))
+        .with("Text Only", () => ({ labelAlign: "center" }))
+        .exhaustive();
+
+      const content = createLocalSnippetElement(
+        "MenuSheetContent",
+        { title, description, labelAlign },
+        contentChildren,
+        {
+          comment: title
+            ? undefined
+            : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+        },
+      );
+
+      const trigger = createLocalSnippetElement(
+        "MenuSheetTrigger",
+        { asChild: true },
+        createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
+      );
+
+      return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
+    },
+  );
 };

package/src/codegen/targets/react/component/handlers/page-banner.ts

@@ -4,6 +4,7 @@ import type {
 } 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 type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
 import { findAllInstances, findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
@@ -13,89 +14,93 @@ import { match } from "ts-pattern";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("page-banner");
 
-const SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
-
 const createPageBannerButtonHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<PageBannerButtonProperties>(SUFFIX_BUTTON_KEY, (node) => {
-    return createElement(
-      "PageBannerButton",
-      undefined,
-      node.componentProperties["Label#39890:0"].value,
-    );
-  });
+  defineComponentHandler<PageBannerButtonProperties>(
+    components.componentPageBannerSuffixAction.key,
+    (node) => {
+      return createElement(
+        "PageBannerButton",
+        undefined,
+        node.componentProperties["Label#39890:0"].value,
+      );
+    },
+  );
 
 export const createPageBannerHandler = (ctx: ComponentHandlerDeps) => {
   const buttonHandler = createPageBannerButtonHandler(ctx);
 
-  return defineComponentHandler<PageBannerProperties>(metadata.pageBanner.key, (node, traverse) => {
-    const { componentProperties: props } = node;
-
-    const { tag, suffix } = match(props.Interaction.value)
-      .with("Actionable", () => ({ tag: "ActionablePageBanner", suffix: undefined }))
-      .with("Dismissible", () => ({ tag: "DismissiblePageBanner", suffix: undefined }))
-      .with("Display", () => ({ tag: "PageBanner", suffix: undefined }))
-      .with("Display (With Action)", () => {
-        const [buttonNode] = findAllInstances<PageBannerButtonProperties>({
-          node,
-          key: SUFFIX_BUTTON_KEY,
+  return defineComponentHandler<PageBannerProperties>(
+    metadata.componentPageBanner.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const { tag, suffix } = match(props.Interaction.value)
+        .with("Actionable", () => ({ tag: "ActionablePageBanner", suffix: undefined }))
+        .with("Dismissible", () => ({ tag: "DismissiblePageBanner", suffix: undefined }))
+        .with("Display", () => ({ tag: "PageBanner", suffix: undefined }))
+        .with("Display (With Action)", () => {
+          const [buttonNode] = findAllInstances<PageBannerButtonProperties>({
+            node,
+            key: components.componentPageBannerSuffixAction.key,
+          });
+          const suffix = buttonNode ? buttonHandler.transform(buttonNode, traverse) : undefined;
+
+          return { tag: "PageBanner", suffix };
+        })
+        .with("Actionable (Custom)", () => ({
+          tag: "PageBanner",
+          suffix: createElement("div", undefined, "Custom Content"),
+        }))
+        .exhaustive();
+
+      const textNode = findOne(
+        node,
+        (child) => child.type === "TEXT" && child.name === "Text",
+      ) as NormalizedTextNode | null;
+
+      if (!textNode) {
+        return createLocalSnippetElement(tag, undefined, undefined, {
+          comment: "내용을 제공해주세요.",
         });
-        const suffix = buttonNode ? buttonHandler.transform(buttonNode, traverse) : undefined;
-
-        return { tag: "PageBanner", suffix };
-      })
-      .with("Actionable (Custom)", () => ({
-        tag: "PageBanner",
-        suffix: createElement("div", undefined, "Custom Content"),
-      }))
-      .exhaustive();
-
-    const textNode = findOne(
-      node,
-      (child) => child.type === "TEXT" && child.name === "Text",
-    ) as NormalizedTextNode | null;
+      }
 
-    if (!textNode) {
-      return createLocalSnippetElement(tag, undefined, undefined, {
-        comment: "내용을 제공해주세요.",
-      });
-    }
+      const slices = textNode.segments;
 
-    const slices = textNode.segments;
+      let title: string | undefined;
+      let description: string | undefined;
 
-    let title: string | undefined;
-    let description: string | undefined;
+      switch (slices.length) {
+        case 1: {
+          description = slices[0]?.characters.trim();
 
-    switch (slices.length) {
-      case 1: {
-        description = slices[0]?.characters.trim();
+          break;
+        }
+        case 2: {
+          title = slices[0]?.characters.trim();
+          description = slices[1]?.characters.trim();
 
-        break;
+          break;
+        }
       }
-      case 2: {
-        title = slices[0]?.characters.trim();
-        description = slices[1]?.characters.trim();
 
-        break;
-      }
-    }
-
-    const iconNode = findOne(
-      node,
-      (child) => child.type === "INSTANCE" && child.name === "icon",
-    ) as NormalizedInstanceNode | null;
-
-    const showPrefixIcon = props["Show Prefix Icon#11840:27"].value && iconNode;
-    const prefixIcon = showPrefixIcon ? ctx.iconHandler.transform(iconNode) : undefined;
-
-    const commonProps = {
-      title,
-      description,
-      prefixIcon,
-      tone: camelCase(props.Tone.value),
-      variant: camelCase(props.Variant.value),
-      ...(suffix && { suffix }),
-    };
-
-    return createLocalSnippetElement(tag, commonProps);
-  });
+      const iconNode = findOne(
+        node,
+        (child) => child.type === "INSTANCE" && child.name === "icon",
+      ) as NormalizedInstanceNode | null;
+
+      const showPrefixIcon = props["Show Prefix Icon#11840:27"].value && iconNode;
+      const prefixIcon = showPrefixIcon ? ctx.iconHandler.transform(iconNode) : undefined;
+
+      const commonProps = {
+        title,
+        description,
+        prefixIcon,
+        tone: camelCase(props.Tone.value),
+        variant: camelCase(props.Variant.value),
+        ...(suffix && { suffix }),
+      };
+
+      return createLocalSnippetElement(tag, commonProps);
+    },
+  );
 };

package/src/codegen/targets/react/component/handlers/progress-circle.ts

@@ -10,7 +10,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("progress-circle"
 
 export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ProgressCircleProperties>(
-    metadata.progressCircle.key,
+    metadata.componentProgressCircle.key,
     ({ componentProperties: props }) => {
       const { value, minValue, maxValue } = match(props.Value.value)
         .with("Indeterminate", () => ({

package/src/codegen/targets/react/component/handlers/radio-group.ts

@@ -10,7 +10,7 @@ import { match } from "ts-pattern";
 const { createLocalSnippetElement } = createLocalSnippetHelper("radio-group");
 
 export const createRadioGroupItemHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<RadioProperties>(metadata.radio.key, ({ componentProperties: props }) => {
+  defineComponentHandler<RadioProperties>(metadata.componentRadio.key, ({ componentProperties: props }) => {
     const tone = match(props.Tone.value)
       .with("Neutral", () => "neutral")
       .with("🚫[Deprecated]Brand", () => "brand")

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

@@ -10,7 +10,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("radio-group");
 
 export const createRadiomarkHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<RadiomarkProperties>(
-    metadata.radiomark.key,
+    metadata.componentRadiomark.key,
     ({ componentProperties: props }) => {
       const tone = match(props.Tone.value)
         .with("Neutral", () => "neutral")
@@ -22,6 +22,6 @@ export const createRadiomarkHandler = (_ctx: ComponentHandlerDeps) =>
         size: handleSizeProp(props.Size.value),
       };
 
-      return createLocalSnippetElement("RadioMark", commonProps);
+      return createLocalSnippetElement("Radiomark", commonProps);
     },
   );

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

@@ -9,7 +9,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("reaction-button"
 
 export const createReactionButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ReactionButtonProperties>(
-    metadata.reactionButton.key,
+    metadata.componentReactionButton.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         size: handleSizeProp(props.Size.value),