@seed-design/figma 1.1.19 → 1.2.1

package/src/codegen/targets/react/component/handlers/result-section.ts

@@ -18,7 +18,7 @@ export const createResultSectionHandler = (ctx: ComponentHandlerDeps) => {
   const ghostButtonHandler = createActionButtonGhostHandler(ctx);
 
   return defineComponentHandler<ResultSectionProperties>(
-    metadata.resultSection.key,
+    metadata.componentResultSection.key,
     (node, traverse) => {
       const props = node.componentProperties;
 

package/src/codegen/targets/react/component/handlers/segmented-control.ts

@@ -10,10 +10,9 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("segmented-control");
 
-const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SegmentedControlItemProperties>(
-    SEGMENTED_CONTROL_ITEM_KEY,
+    metadata.privateComponentSegmentedControlItem.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
       const commonProps = {
@@ -35,7 +34,7 @@ export const createSegmentedControlHandler = (ctx: ComponentHandlerDeps) => {
   const segmentedControlItemHandler = createSegmentedControlItemHandler(ctx);
 
   return defineComponentHandler<SegmentedControlProperties>(
-    metadata.segmentedControl.key,
+    metadata.componentSegmentedControl.key,
     (node, traverse) => {
       const segments = findAllInstances<SegmentedControlItemProperties>({
         node,

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

@@ -7,7 +7,7 @@ import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
 export const createSkeletonHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<SkeletonProperties>(metadata.skeleton.key, (node) => {
+  defineComponentHandler<SkeletonProperties>(metadata.componentSkeleton.key, (node) => {
     const { componentProperties: props, layoutSizingHorizontal, layoutSizingVertical } = node;
 
     const commonProps = {

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

@@ -14,15 +14,12 @@ import { findAllInstances } from "@/utils/figma-node";
 import {
   createFieldFooterHandler,
   createFieldHeaderHandler,
-  FIELD_KEYS,
   type FieldFooterProps,
   type FieldHeaderProps,
 } from "@/codegen/targets/react/component/handlers/field";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("slider");
 
-const SLIDER_TICK_KEY = "ace432ffb7a2af13bce549b19c932ac5f96a9a78";
-
 function getSliderComment(props: { markers?: unknown; ticks?: unknown } & Record<string, unknown>) {
   return [
     "min, max, step 값을 적절히 조정해주세요.",
@@ -43,14 +40,17 @@ export const createSliderFieldHandler = (ctx: ComponentHandlerDeps) => {
     (node, traverse) => {
       const props = node.componentProperties;
 
-      const [slider] = findAllInstances<SliderProperties>({ node, key: metadata.slider.key });
+      const [slider] = findAllInstances<SliderProperties>({
+        node,
+        key: metadata.componentSlider.key,
+      });
       const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
         node,
-        key: FIELD_KEYS.HEADER,
+        key: metadata.privateComponentFieldHeader.key,
       });
       const [fieldFooter] = findAllInstances<FieldFooterProperties>({
         node,
-        key: FIELD_KEYS.FOOTER,
+        key: metadata.privateComponentFieldFooter.key,
       });
 
       const sliderProps = sliderHandler.transform(slider, traverse).props;
@@ -79,7 +79,7 @@ export const createSliderFieldHandler = (ctx: ComponentHandlerDeps) => {
 };
 
 export const createSliderHandler = (_ctx: ComponentHandlerDeps) => {
-  return defineComponentHandler<SliderProperties>(metadata.slider.key, (node) => {
+  return defineComponentHandler<SliderProperties>(metadata.componentSlider.key, (node) => {
     const { componentProperties: props } = node;
 
     const { min, max, defaultValues } = match(props.Value.value)
@@ -87,7 +87,10 @@ export const createSliderHandler = (_ctx: ComponentHandlerDeps) => {
       .with("Range", () => ({ min: 0, max: 100, defaultValues: [0, 50] }))
       .exhaustive();
 
-    const [ticks] = findAllInstances<SliderTicksProperties>({ node, key: SLIDER_TICK_KEY });
+    const [ticks] = findAllInstances<SliderTicksProperties>({
+      node,
+      key: metadata.privateComponentSliderItemTickMark.key,
+    });
 
     const commonProps = {
       min,

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

@@ -9,7 +9,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("snackbar");
 
 export const createSnackbarHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SnackbarProperties>(
-    metadata.snackbar.key,
+    metadata.componentSnackbar.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         message: props["Message#1528:4"].value,

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

@@ -9,7 +9,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
 
 export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SwitchProperties>(
-    metadata._switch.key,
+    metadata.componentSwitch.key,
     ({ componentProperties: props }) => {
       const tone = match(props.Tone.value)
         .with("Neutral", () => "neutral")
@@ -22,7 +22,7 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
       };
 
       if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
-        return createLocalSnippetElement("SwitchMark", commonProps);
+        return createLocalSnippetElement("Switchmark", commonProps);
       }
 
       return createLocalSnippetElement("Switch", {

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

@@ -9,7 +9,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
 
 export const createSwitchmarkHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SwitchmarkProperties>(
-    metadata.switchmark.key,
+    metadata.componentSwitchmark.key,
     ({ componentProperties: props }) => {
       const tone = match(props.Tone.value)
         .with("Neutral", () => "neutral")
@@ -21,6 +21,6 @@ export const createSwitchmarkHandler = (_ctx: ComponentHandlerDeps) =>
         size: props.Size.value,
       };
 
-      return createLocalSnippetElement("SwitchMark", commonProps);
+      return createLocalSnippetElement("Switchmark", commonProps);
     },
   );

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

@@ -22,21 +22,18 @@ const { createLocalSnippetElement: createTabsLocalSnippetElement } =
 const { createLocalSnippetElement: createChipTabsLocalSnippetElement } =
   createLocalSnippetHelper("chip-tabs");
 
-const LINE_TABS_WRAPPER_KEY = "e114161387f800d3668d0585bed1d109e4edcbe4";
-const CHIP_TABS_WRAPPER_KEY = "d7cf2983c79c8394aaab0185af83a9d1b9d10ece";
-
 export const createTabsHandler = (_ctx: ComponentHandlerDeps) => {
   const lineHandler = createLineTabsHandler(_ctx);
   const chipHandler = createChipTabsHandler(_ctx);
 
-  return defineComponentHandler<TabsProperties>(metadata.tabs.key, (node, traverse) => {
+  return defineComponentHandler<TabsProperties>(metadata.componentTabs.key, (node, traverse) => {
     const props = node.componentProperties;
 
     const elementNode = match(props.Variant.value)
       .with("Line", () => {
         const [wrapper] = findAllInstances<TabsLineWrapperProperties>({
           node,
-          key: LINE_TABS_WRAPPER_KEY,
+          key: metadata.privateComponentTabsLine.key,
         });
 
         if (!wrapper) throw new Error("Line Tab wrapper not found");
@@ -46,7 +43,7 @@ export const createTabsHandler = (_ctx: ComponentHandlerDeps) => {
       .with("Chip", () => {
         const [wrapper] = findAllInstances<TabsChipWrapperProperties>({
           node,
-          key: CHIP_TABS_WRAPPER_KEY,
+          key: metadata.privateComponentTabsChip.key,
         });
 
         if (!wrapper) throw new Error("Chip Tab wrapper not found");
@@ -80,15 +77,12 @@ export const createTabsHandler = (_ctx: ComponentHandlerDeps) => {
 </TabsRoot>
 */
 
-const LINE_TABS_HUG_ITEM_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
-const LINE_TABS_FILL_ITEM_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
-
 const createLineTabsHandler = (_ctx: ComponentHandlerDeps) => {
   const hugHandler = createLineTriggerHugHandler(_ctx);
   const fillHandler = createLineTriggerFillHandler(_ctx);
 
   return defineComponentHandler<TabsLineWrapperProperties>(
-    LINE_TABS_WRAPPER_KEY,
+    metadata.privateComponentTabsLine.key,
     (node, traverse) => {
       const props = node.componentProperties;
 
@@ -96,7 +90,7 @@ const createLineTabsHandler = (_ctx: ComponentHandlerDeps) => {
         .with("Hug", () => {
           const nodes = findAllInstances<TabsLineTriggerHugProperties>({
             node,
-            key: LINE_TABS_HUG_ITEM_KEY,
+            key: metadata.privateComponentTabItemLineHug.key,
           });
 
           return {
@@ -111,7 +105,7 @@ const createLineTabsHandler = (_ctx: ComponentHandlerDeps) => {
         .with("Fill", () => {
           const nodes = findAllInstances<TabsLineTriggerFillProperties>({
             node,
-            key: LINE_TABS_FILL_ITEM_KEY,
+            key: metadata.privateComponentTabItemLineFill.key,
           });
 
           return {
@@ -148,11 +142,9 @@ const createLineTabsHandler = (_ctx: ComponentHandlerDeps) => {
   );
 };
 
-const LINE_TRIGGER_HUG_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
-
 const createLineTriggerHugHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<TabsLineTriggerHugProperties>(
-    LINE_TRIGGER_HUG_KEY,
+    metadata.privateComponentTabItemLineHug.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         value: props["Label#4478:2"].value,
@@ -168,11 +160,9 @@ const createLineTriggerHugHandler = (_ctx: ComponentHandlerDeps) =>
     },
   );
 
-const LINE_TRIGGER_FILL_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
-
 const createLineTriggerFillHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<TabsLineTriggerFillProperties>(
-    LINE_TRIGGER_FILL_KEY,
+    metadata.privateComponentTabItemLineFill.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         value: props["Label#4478:2"].value,
@@ -216,15 +206,18 @@ const createChipTabsHandler = (_ctx: ComponentHandlerDeps) => {
   const triggerHandler = createChipTabsTriggerHandler(_ctx);
 
   return defineComponentHandler<TabsChipWrapperProperties>(
-    CHIP_TABS_WRAPPER_KEY,
+    metadata.privateComponentTabsChip.key,
     (node, traverse) => {
       const props = node.componentProperties;
 
-      const nodes = findAllInstances<ChipTabsTriggerProperties>({ node, key: CHIP_TRIGGER_KEY });
+      const nodes = findAllInstances<ChipTabsTriggerProperties>({
+        node,
+        key: metadata.privateComponentTabItemChip.key,
+      });
 
       const triggers = nodes.map((node) => {
         // this is redundant; can this be better?
-        const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.chip.key });
+        const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.componentChip.key });
         if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
 
         return {
@@ -237,7 +230,10 @@ const createChipTabsHandler = (_ctx: ComponentHandlerDeps) => {
         (node) => node.componentProperties.State.value === "Selected",
       );
       const [selectedChip] = selectedTrigger
-        ? findAllInstances<ChipProperties>({ node: selectedTrigger, key: metadata.chip.key })
+        ? findAllInstances<ChipProperties>({
+            node: selectedTrigger,
+            key: metadata.componentChip.key,
+          })
         : [undefined];
       if (!selectedChip) throw new Error("Chip not found in ChipTabsTrigger");
 
@@ -273,25 +269,26 @@ const createChipTabsHandler = (_ctx: ComponentHandlerDeps) => {
   );
 };
 
-const CHIP_TRIGGER_KEY = "95bf31a329f9e8bba0d9aa2299d1552f1d388148";
-
 const createChipTabsTriggerHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ChipTabsTriggerProperties>(CHIP_TRIGGER_KEY, (node) => {
-    const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.chip.key });
-    if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
+  defineComponentHandler<ChipTabsTriggerProperties>(
+    metadata.privateComponentTabItemChip.key,
+    (node) => {
+      const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.componentChip.key });
+      if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
 
-    const props = node.componentProperties;
-    const chipProps = chip.componentProperties;
-
-    const commonProps = {
-      value: chipProps["Label#7185:0"].value,
-      ...(chipProps.State.value === "Disabled" && {
-        disabled: true,
-      }),
-      ...(props["Has Notification"].value === "True" && {
-        notification: true,
-      }),
-    };
-
-    return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
-  });
+      const props = node.componentProperties;
+      const chipProps = chip.componentProperties;
+
+      const commonProps = {
+        value: chipProps["Label#7185:0"].value,
+        ...(chipProps.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(props["Has Notification"].value === "True" && {
+          notification: true,
+        }),
+      };
+
+      return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+    },
+  );

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

@@ -1,65 +1,72 @@
 import type { TagGroupItemProperties, TagGroupProperties } from "@/codegen/component-properties";
 import { defineComponentHandler, type ElementNode } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import { createSeedReactElement } from "../../element-factories";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
 import { findAllInstances } from "@/utils/figma-node";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("tag-group");
+
 export const createTagGroupHandler = (ctx: ComponentHandlerDeps) => {
   const itemHandler = createTagGroupItemHandler(ctx);
 
-  return defineComponentHandler<TagGroupProperties>(metadata.tagGroup.key, (node, traverse) => {
-    const itemNodes = findAllInstances<TagGroupItemProperties>({ node, key: TAG_GROUP_ITEM_KEY });
+  return defineComponentHandler<TagGroupProperties>(
+    metadata.componentTagGroup.key,
+    (node, traverse) => {
+      const itemNodes = findAllInstances<TagGroupItemProperties>({
+        node,
+        key: metadata.privateComponentItemTag.key,
+      });
 
-    const items = itemNodes.map((itemNode) =>
-      itemHandler.transform(itemNode, traverse),
-    ) as (ElementNode & {
-      props: { size?: string; weight?: string; tone?: string };
-    })[];
+      const items = itemNodes.map((itemNode) =>
+        itemHandler.transform(itemNode, traverse),
+      ) as (ElementNode & {
+        props: { size?: string; weight?: string; tone?: string };
+      })[];
 
-    if (items.length === 0) {
-      return createSeedReactElement("TagGroup.Root");
-    }
+      if (items.length === 0) {
+        return createLocalSnippetElement("TagGroupRoot");
+      }
 
-    // if size/weight/tone are all the same among item[n].props, lift them up to TagGroup.Root
+      // if size/weight/tone are all the same among item[n].props, lift them up to TagGroupRoot
 
-    const consistent = {
-      size: items.map((item) => item.props.size).every((size) => size === items[0].props.size),
-      weight: items
-        .map((item) => item.props.weight)
-        .every((weight) => weight === items[0].props.weight),
-      tone: items.map((item) => item.props.tone).every((tone) => tone === items[0].props.tone),
-    };
+      const consistent = {
+        size: items.map((item) => item.props.size).every((size) => size === items[0].props.size),
+        weight: items
+          .map((item) => item.props.weight)
+          .every((weight) => weight === items[0].props.weight),
+        tone: items.map((item) => item.props.tone).every((tone) => tone === items[0].props.tone),
+      };
 
-    return createSeedReactElement(
-      "TagGroup.Root",
-      {
-        // lift up consistent props
-        ...(consistent.size && { size: items[0].props.size }),
-        ...(consistent.weight && { weight: items[0].props.weight }),
-        ...(consistent.tone && { tone: items[0].props.tone }),
-      },
-      items.map((item) => ({
-        ...item,
-        props: {
-          // remove lifted props
-          ...item.props,
-          size: consistent.size ? undefined : item.props.size,
-          weight: consistent.weight ? undefined : item.props.weight,
-          tone: consistent.tone ? undefined : item.props.tone,
+      return createLocalSnippetElement(
+        "TagGroupRoot",
+        {
+          // lift up consistent props
+          ...(consistent.size && { size: items[0].props.size }),
+          ...(consistent.weight && { weight: items[0].props.weight }),
+          ...(consistent.tone && { tone: items[0].props.tone }),
         },
-      })),
-    );
-  });
+        items.map((item) => ({
+          ...item,
+          props: {
+            // remove lifted props
+            ...item.props,
+            size: consistent.size ? undefined : item.props.size,
+            weight: consistent.weight ? undefined : item.props.weight,
+            tone: consistent.tone ? undefined : item.props.tone,
+          },
+        })),
+        { comment: "`truncate` prop을 통해 한 줄로 표시되도록 할 수 있습니다." },
+      );
+    },
+  );
 };
 
-const TAG_GROUP_ITEM_KEY = "a7bbc318919053f96be00e509469f6294d6bb6bb";
-
 export const createTagGroupItemHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<TagGroupItemProperties>(
-    TAG_GROUP_ITEM_KEY,
+    metadata.privateComponentItemTag.key,
     ({ componentProperties: props }) => {
       const size = match(props.Size.value)
         .with("t2(12pt)", () => "t2")
@@ -67,26 +74,17 @@ export const createTagGroupItemHandler = (ctx: ComponentHandlerDeps) =>
         .with("t4(14pt)", () => "t4")
         .exhaustive();
 
-      const commonProps = {
+      return createLocalSnippetElement("TagGroupItem", {
         size,
         weight: camelCase(props["Weight"].value),
         tone: camelCase(props["Tone"].value),
-      };
-
-      const children = [
-        props.Layout.value === "Icon First"
-          ? createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#47948:0"]),
-            })
-          : undefined,
-        props["Label#5409:0"].value,
-        props.Layout.value === "Icon Last"
-          ? createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#47948:55"]),
-            })
-          : undefined,
-      ].filter(Boolean);
-
-      return createSeedReactElement("TagGroup.Item", commonProps, children);
+        label: props["Label#5409:0"].value,
+        ...(props.Layout.value === "Icon First" && {
+          prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#47948:0"]),
+        }),
+        ...(props.Layout.value === "Icon Last" && {
+          suffixIcon: ctx.iconHandler.transform(props["Suffix Icon#47948:55"]),
+        }),
+      });
     },
   );

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

@@ -5,7 +5,6 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 import {
   createFieldFooterHandler,
   createFieldHeaderHandler,
-  FIELD_KEYS,
   type FieldFooterProps,
   type FieldHeaderProps,
 } from "@/codegen/targets/react/component/handlers/field";
@@ -27,16 +26,6 @@ import type { NormalizedTextNode } from "@/normalizer";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
 
-const TEXT_INPUT_OUTLINE_KEY = "22eebd645d310c086d9f5f69d8f179ff5c7cf7ca";
-const TEXT_INPUT_OUTLINE_PREFIX_KEY = "1ab174dd51bc42a5efe530f52f1dd02255c50b18";
-const TEXT_INPUT_OUTLINE_SUFFIX_KEY = "555fee288d9053760e301791665bbac31d19c43f";
-
-const TEXT_INPUT_UNDERLINE_KEY = "16e9e343fc319190149369bd61076d6415e09a8a";
-const TEXT_INPUT_UNDERLINE_PREFIX_KEY = "a7ceae43b6daf4490e8ab408d2c29fb63b2eb891";
-const TEXT_INPUT_UNDERLINE_SUFFIX_KEY = "1b88368820be61f358e24a8aaa601e7f2a2ea101";
-
-const TEXTAREA_KEY = "22bb206483f00cd635188eea6ae8a6aac058b5d5";
-
 export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldHeaderHandler = createFieldHeaderHandler(ctx);
   const fieldFooterHandler = createFieldFooterHandler(ctx);
@@ -48,20 +37,20 @@ export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
 
       const [textInputOutline] = findAllInstances<TextInputOutlineProperties>({
         node,
-        key: TEXT_INPUT_OUTLINE_KEY,
+        key: metadata.privateComponentTextInput.key,
       });
       const [textInputUnderline] = findAllInstances<TextInputUnderlineProperties>({
         node,
-        key: TEXT_INPUT_UNDERLINE_KEY,
+        key: metadata.privateComponentUnderlineTextInput.key,
       });
 
       const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
         node,
-        key: FIELD_KEYS.HEADER,
+        key: metadata.privateComponentFieldHeader.key,
       });
       const [fieldFooter] = findAllInstances<FieldFooterProperties>({
         node,
-        key: FIELD_KEYS.FOOTER,
+        key: metadata.privateComponentFieldFooter.key,
       });
 
       const fieldProps = {
@@ -77,12 +66,12 @@ export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
         if (textInputOutline) {
           const [prefix] = findAllInstances<TextInputOutlinePrefixProperties>({
             node: textInputOutline,
-            key: TEXT_INPUT_OUTLINE_PREFIX_KEY,
+            key: metadata.privateComponentTextInputPrefix.key,
           });
 
           const [suffix] = findAllInstances<TextInputOutlineSuffixProperties>({
             node: textInputOutline,
-            key: TEXT_INPUT_OUTLINE_SUFFIX_KEY,
+            key: metadata.privateComponentTextInputSuffix.key,
           });
 
           return {
@@ -120,12 +109,12 @@ export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
         if (textInputUnderline) {
           const [prefix] = findAllInstances<TextInputUnderlinePrefixProperties>({
             node: textInputUnderline,
-            key: TEXT_INPUT_UNDERLINE_PREFIX_KEY,
+            key: metadata.privateComponentUnderlineTextInputPrefix.key,
           });
 
           const [suffix] = findAllInstances<TextInputUnderlineSuffixProperties>({
             node: textInputUnderline,
-            key: TEXT_INPUT_UNDERLINE_SUFFIX_KEY,
+            key: metadata.privateComponentUnderlineTextInputSuffix.key,
           });
 
           return {
@@ -204,15 +193,15 @@ export const createTextareaFieldHandler = (ctx: ComponentHandlerDeps) => {
     (node, traverse) => {
       const [textarea] = findAllInstances<TextareaProperties>({
         node,
-        key: TEXTAREA_KEY,
+        key: metadata.privateComponentTextarea.key,
       });
       const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
         node,
-        key: FIELD_KEYS.HEADER,
+        key: metadata.privateComponentFieldHeader.key,
       });
       const [fieldFooter] = findAllInstances<FieldFooterProperties>({
         node,
-        key: FIELD_KEYS.FOOTER,
+        key: metadata.privateComponentFieldFooter.key,
       });
 
       const fieldProps = {

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

@@ -10,7 +10,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
 
 export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ToggleButtonProperties>(
-    metadata.toggleButton.key,
+    metadata.componentToggleButton.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         variant: camelCase(props.Variant.value),