@seed-design/figma 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,298 @@
+import { createLocalSnippetHelper } from "../../element-factories";
+import type {
+  ChipProperties,
+  ChipTabsTriggerProperties,
+  TabsChipWrapperProperties,
+  TabsLineTriggerFillProperties,
+  TabsLineTriggerHugProperties,
+  TabsLineWrapperProperties,
+  TabsProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { camelCase } from "change-case";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { handleSizeProp } from "../size";
+import { match } from "ts-pattern";
+import { findAllInstances } from "@/utils/figma-node";
+
+const { createLocalSnippetElement: createTabsLocalSnippetElement } =
+  createLocalSnippetHelper("tabs");
+
+const { createLocalSnippetElement: createChipTabsLocalSnippetElement } =
+  createLocalSnippetHelper("chip-tabs");
+
+export const createTabsHandler = (_ctx: ComponentHandlerDeps) => {
+  const lineHandler = createLineTabsHandler(_ctx);
+  const chipHandler = createChipTabsHandler(_ctx);
+
+  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: lineHandler.key,
+        });
+
+        if (!wrapper) throw new Error("Line Tab wrapper not found");
+
+        return lineHandler.transform(wrapper, traverse);
+      })
+      .with("Chip", () => {
+        const [wrapper] = findAllInstances<TabsChipWrapperProperties>({
+          node,
+          key: chipHandler.key,
+        });
+
+        if (!wrapper) throw new Error("Chip Tab wrapper not found");
+
+        return chipHandler.transform(wrapper, traverse);
+      })
+      .exhaustive();
+
+    return elementNode;
+  });
+};
+
+/*
+<TabsRoot defaultValue="2" triggerLayout="fill">
+  <TabsList>
+    <TabsTrigger value="1">라벨1</TabsTrigger>
+    <TabsTrigger value="2">라벨2</TabsTrigger>
+    <TabsTrigger value="3">라벨3</TabsTrigger>
+  </TabsList>
+  <TabsCarousel>
+    <TabsContent value="1">
+      <Content>Content 1</Content>
+    </TabsContent>
+    <TabsContent value="2">
+      <Content>Content 2</Content>
+    </TabsContent>
+    <TabsContent value="3">
+      <Content>Content 3</Content>
+    </TabsContent>
+  </TabsCarousel>
+</TabsRoot>
+*/
+
+const createLineTabsHandler = (_ctx: ComponentHandlerDeps) => {
+  const hugHandler = createLineTriggerHugHandler(_ctx);
+  const fillHandler = createLineTriggerFillHandler(_ctx);
+
+  return defineComponentHandler<TabsLineWrapperProperties>(
+    metadata.privateComponentTabsLine.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const { triggers, defaultValue } = match(props.Layout.value)
+        .with("Hug", () => {
+          const nodes = findAllInstances<TabsLineTriggerHugProperties>({
+            node,
+            key: hugHandler.key,
+          });
+
+          return {
+            triggers: nodes.map((node) => ({
+              elementNode: hugHandler.transform(node, traverse),
+              value: node.componentProperties["Label#4478:2"].value,
+            })),
+            defaultValue: nodes.find((node) => node.componentProperties.State.value === "Selected")
+              ?.componentProperties["Label#4478:2"].value,
+          };
+        })
+        .with("Fill", () => {
+          const nodes = findAllInstances<TabsLineTriggerFillProperties>({
+            node,
+            key: fillHandler.key,
+          });
+
+          return {
+            triggers: nodes.map((node) => ({
+              elementNode: fillHandler.transform(node, traverse),
+              value: node.componentProperties["Label#4478:2"].value,
+            })),
+            defaultValue: nodes.find((node) => node.componentProperties.State.value === "Selected")
+              ?.componentProperties["Label#4478:2"].value,
+          };
+        })
+        .exhaustive();
+
+      const rootProps = {
+        triggerLayout: camelCase(props.Layout.value),
+        size: handleSizeProp(props.Size.value),
+        defaultValue,
+      };
+
+      const tabsCarousel = createTabsLocalSnippetElement(
+        "TabsCarousel",
+        undefined,
+        triggers.map(({ value }) => createTabsLocalSnippetElement("TabsContent", { value }, value)),
+      );
+
+      const tabsList = createTabsLocalSnippetElement(
+        "TabsList",
+        undefined,
+        triggers.map(({ elementNode }) => elementNode),
+      );
+
+      return createTabsLocalSnippetElement("TabsRoot", rootProps, [tabsList, tabsCarousel]);
+    },
+  );
+};
+
+const createLineTriggerHugHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TabsLineTriggerHugProperties>(
+    metadata.privateComponentTabItemLineHug.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        value: props["Label#4478:2"].value,
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(props["Has Notification#32892:0"].value && {
+          notification: true,
+        }),
+      };
+
+      return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+    },
+  );
+
+const createLineTriggerFillHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TabsLineTriggerFillProperties>(
+    metadata.privateComponentTabItemLineFill.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        value: props["Label#4478:2"].value,
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(props["Has Notification#32904:13"].value && {
+          notification: true,
+        }),
+      };
+
+      return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+    },
+  );
+
+/*
+<ChipTabsRoot
+  variant="neutralOutline"
+  defaultValue="1"
+>
+  <ChipTabsList>
+    <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
+    <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
+    <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
+  </ChipTabsList>
+  <ChipTabsCarousel>
+    <ChipTabsContent value="1">
+      <Content>Content 1</Content>
+    </ChipTabsContent>
+    <ChipTabsContent value="2">
+      <Content>Content 2</Content>
+    </ChipTabsContent>
+    <ChipTabsContent value="3">
+      <Content>Content 3</Content>
+    </ChipTabsContent>
+  </ChipTabsCarousel>
+</ChipTabsRoot>
+*/
+
+const createChipTabsHandler = (_ctx: ComponentHandlerDeps) => {
+  const triggerHandler = createChipTabsTriggerHandler(_ctx);
+
+  return defineComponentHandler<TabsChipWrapperProperties>(
+    metadata.privateComponentTabsChip.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const nodes = findAllInstances<ChipTabsTriggerProperties>({
+        node,
+        key: triggerHandler.key,
+      });
+
+      const triggers = nodes.map((node) => {
+        // this is redundant; can this be better?
+        const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.componentChip.key });
+        if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
+
+        return {
+          elementNode: triggerHandler.transform(node, traverse),
+          value: chip.componentProperties["Label#7185:0"].value,
+        };
+      });
+
+      const selectedTrigger = nodes.find(
+        (node) => node.componentProperties.State.value === "Selected",
+      );
+      const [selectedChip] = selectedTrigger
+        ? findAllInstances<ChipProperties>({
+            node: selectedTrigger,
+            key: metadata.componentChip.key,
+          })
+        : [undefined];
+      if (!selectedChip) throw new Error("Chip not found in ChipTabsTrigger");
+
+      const defaultValue = selectedChip.componentProperties["Label#7185:0"].value;
+
+      const variant = match(props.Variant.value)
+        .with("Outline", () => "neutralOutline")
+        .with("Solid", () => "neutralSolid")
+        .exhaustive();
+
+      const rootProps = {
+        size: handleSizeProp(props.Size.value),
+        variant,
+        defaultValue,
+      };
+
+      const tabsCarousel = createChipTabsLocalSnippetElement(
+        "ChipTabsCarousel",
+        { swipeable: false },
+        triggers.map(({ value }) =>
+          createChipTabsLocalSnippetElement("ChipTabsContent", { value }, value),
+        ),
+      );
+
+      const tabsList = createChipTabsLocalSnippetElement(
+        "ChipTabsList",
+        undefined,
+        triggers.map(({ elementNode }) => elementNode),
+      );
+
+      return createChipTabsLocalSnippetElement("ChipTabsRoot", rootProps, [tabsList, tabsCarousel]);
+    },
+  );
+};
+
+const createChipTabsTriggerHandler = (_ctx: ComponentHandlerDeps) =>
+  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,
+        chipProps["Label#7185:0"].value,
+      );
+    },
+  );

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

@@ -0,0 +1,90 @@
+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 { 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.componentTagGroup.key,
+    (node, traverse) => {
+      const itemNodes = findAllInstances<TagGroupItemProperties>({
+        node,
+        key: itemHandler.key,
+      });
+
+      const items = itemNodes.map((itemNode) =>
+        itemHandler.transform(itemNode, traverse),
+      ) as (ElementNode & {
+        props: { size?: string; weight?: string; tone?: string };
+      })[];
+
+      if (items.length === 0) {
+        return createLocalSnippetElement("TagGroupRoot");
+      }
+
+      // 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),
+      };
+
+      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 createTagGroupItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TagGroupItemProperties>(
+    metadata.privateComponentItemTag.key,
+    ({ componentProperties: props }) => {
+      const size = match(props.Size.value)
+        .with("t2(12pt)", () => "t2")
+        .with("t3(13pt)", () => "t3")
+        .with("t4(14pt)", () => "t4")
+        .exhaustive();
+
+      return createLocalSnippetElement("TagGroupItem", {
+        size,
+        weight: camelCase(props["Weight"].value),
+        tone: camelCase(props["Tone"].value),
+        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

@@ -0,0 +1,253 @@
+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 {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+import type {
+  FieldHeaderProperties,
+  FieldFooterProperties,
+  TextareaProperties,
+  TextInputFieldProperties,
+  TextInputOutlineProperties,
+  TextInputUnderlineProperties,
+  TextInputOutlinePrefixProperties,
+  TextInputOutlineSuffixProperties,
+  TextInputUnderlinePrefixProperties,
+  TextInputUnderlineSuffixProperties,
+  TextareaFieldProperties,
+} from "@/codegen/component-properties";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import type { NormalizedTextNode } from "@/normalizer";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
+
+export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<TextInputFieldProperties>(
+    metadata.templateTextField.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [textInputOutline] = findAllInstances<TextInputOutlineProperties>({
+        node,
+        key: metadata.componentTextInput.key,
+      });
+      const [textInputUnderline] = findAllInstances<TextInputUnderlineProperties>({
+        node,
+        key: metadata.componentUnderlineTextInput.key,
+      });
+
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: fieldHeaderHandler.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: fieldFooterHandler.key,
+      });
+
+      const fieldProps = {
+        ...(props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {}),
+        ...(props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {}),
+      };
+
+      const commonProps = (() => {
+        if (textInputOutline) {
+          const [prefix] = findAllInstances<TextInputOutlinePrefixProperties>({
+            node: textInputOutline,
+            key: metadata.privateComponentTextInputPrefix.key,
+          });
+
+          const [suffix] = findAllInstances<TextInputOutlineSuffixProperties>({
+            node: textInputOutline,
+            key: metadata.privateComponentTextInputSuffix.key,
+          });
+
+          return {
+            variant: "outline",
+            ...(textInputOutline.componentProperties.State.value === "Disabled" && {
+              disabled: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Read Only" && {
+              readOnly: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Error" && {
+              invalid: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Error Focused" && {
+              invalid: true,
+            }),
+            ...(textInputOutline.componentProperties["Has Prefix#32514:10"].value === true &&
+              prefix &&
+              prefix.componentProperties.Type.value === "Icon" && {
+                prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"]),
+              }),
+            ...(textInputOutline.componentProperties["Has Suffix#32865:68"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#45391:0"]),
+              }),
+            ...(textInputOutline.componentProperties["Has Suffix#32865:68"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                suffix: suffix.componentProperties["Suffix Text#34021:4"].value,
+              }),
+          };
+        }
+
+        if (textInputUnderline) {
+          const [prefix] = findAllInstances<TextInputUnderlinePrefixProperties>({
+            node: textInputUnderline,
+            key: metadata.privateComponentUnderlineTextInputPrefix.key,
+          });
+
+          const [suffix] = findAllInstances<TextInputUnderlineSuffixProperties>({
+            node: textInputUnderline,
+            key: metadata.privateComponentUnderlineTextInputSuffix.key,
+          });
+
+          return {
+            variant: "underline",
+            ...(textInputUnderline.componentProperties.State.value === "Disabled" && {
+              disabled: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Read Only" && {
+              readOnly: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Error" && {
+              invalid: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Error Focused" && {
+              invalid: true,
+            }),
+            ...(textInputUnderline.componentProperties["Has Prefix#34125:0"].value === true &&
+              prefix &&
+              prefix.componentProperties.Type.value === "Icon" && {
+                prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"]),
+              }),
+            ...(textInputUnderline.componentProperties["Has Suffix#34125:8"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#45391:5"]),
+              }),
+            ...(textInputUnderline.componentProperties["Has Suffix#34125:8"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                suffix: suffix.componentProperties["Suffix Text#34021:4"].value,
+              }),
+          };
+        }
+
+        return {};
+      })();
+
+      // these can be fragile but better than having 9 different handlers
+      const placeholder = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"),
+      ) as NormalizedTextNode;
+
+      const value = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("value"),
+      ) as NormalizedTextNode;
+
+      const inputProps = {
+        ...(placeholder && {
+          placeholder: placeholder.characters,
+        }),
+      };
+
+      return createLocalSnippetElement(
+        "TextField",
+        {
+          ...fieldProps,
+          ...commonProps,
+          ...(value && {
+            defaultValue: value.characters,
+          }),
+        },
+        createLocalSnippetElement("TextFieldInput", inputProps),
+      );
+    },
+  );
+};
+
+export const createTextareaFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<TextareaFieldProperties>(
+    metadata.templateTextareaField.key,
+    (node, traverse) => {
+      const [textarea] = findAllInstances<TextareaProperties>({
+        node,
+        key: metadata.componentTextarea.key,
+      });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: fieldHeaderHandler.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: fieldFooterHandler.key,
+      });
+
+      const fieldProps = {
+        ...(fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {}),
+        ...(fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {}),
+      };
+
+      // these can be fragile but better than having 9 different handlers
+      const placeholder = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"),
+      ) as NormalizedTextNode;
+
+      const value = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("value"),
+      ) as NormalizedTextNode;
+
+      const inputProps = {
+        autoresize: textarea.componentProperties["Auto Size (Figma Only)"].value === "true",
+        ...(placeholder && {
+          placeholder: placeholder.characters,
+        }),
+      };
+
+      const commonProps = {
+        ...(textarea.componentProperties.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(textarea.componentProperties.State.value === "Read Only" && {
+          readOnly: true,
+        }),
+        ...(value && {
+          defaultValue: value.characters,
+        }),
+      };
+
+      return createLocalSnippetElement(
+        "TextField",
+        { ...fieldProps, ...commonProps },
+        createLocalSnippetElement("TextFieldTextarea", inputProps),
+      );
+    },
+  );
+};

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

@@ -0,0 +1,43 @@
+import type { ToggleButtonProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { handleSizeProp } from "../size";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
+
+export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ToggleButtonProperties>(
+    metadata.componentToggleButton.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        variant: camelCase(props.Variant.value),
+        size: handleSizeProp(props.Size.value),
+        ...(props.Selected.value === "True" && {
+          defaultPressed: true,
+        }),
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(props.State.value === "Loading" && {
+          loading: true,
+        }),
+      };
+
+      return createLocalSnippetElement("ToggleButton", commonProps, [
+        props["Show Prefix Icon#6122:392"].value
+          ? createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"]),
+            })
+          : undefined,
+        props["Label#6122:49"].value,
+        props["Show Suffix Icon#6122:147"].value
+          ? createSeedReactElement("SuffixIcon", {
+              svg: ctx.iconHandler.transform(props["Suffix Icon#6122:343"]),
+            })
+          : undefined,
+      ]);
+    },
+  );