@seed-design/figma 0.1.7 → 0.1.9

package/src/entities/data/__generated__/component-sets/toggle-button.mjs

@@ -2,22 +2,22 @@ export const metadata = {
   "name": "🟢 Toggle Button",
   "key": "1d240ee5fd7a56879713e69cbea1b6f006f0ea22",
   "componentPropertyDefinitions": {
-    "Suffix Icon#6122:343": {
+    "Label#6122:49": {
+      "type": "TEXT"
+    },
+    "Prefix Icon#6122:98": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Show Prefix Icon#6122:392": {
-      "type": "BOOLEAN"
-    },
     "Show Suffix Icon#6122:147": {
       "type": "BOOLEAN"
     },
-    "Prefix Icon#6122:98": {
+    "Suffix Icon#6122:343": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Label#6122:49": {
-      "type": "TEXT"
+    "Show Prefix Icon#6122:392": {
+      "type": "BOOLEAN"
     },
     "Size": {
       "type": "VARIANT",

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

@@ -0,0 +1,42 @@
+export declare const metadata: {
+  "name": "🟢 Top Navigation",
+  "key": "f6d069d65f8ffc8b430fd8f3013910557f36e9da",
+  "componentPropertyDefinitions": {
+    "Show Title#33588:82": {
+      "type": "BOOLEAN"
+    },
+    "OS (Figma Only)": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "iOS",
+        "Android"
+      ]
+    },
+    "Variant": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Layer Default",
+        "Transparent"
+      ]
+    },
+    "Left": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Back",
+        "Close",
+        "Custom",
+        "None"
+      ]
+    },
+    "Right": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "1 Icon Button",
+        "2 Icon Button",
+        "3 Icon Button",
+        "Text Button",
+        "None"
+      ]
+    }
+  }
+};

package/src/entities/data/__generated__/component-sets/top-navigation.mjs

@@ -0,0 +1,42 @@
+export const metadata = {
+  "name": "🟢 Top Navigation",
+  "key": "f6d069d65f8ffc8b430fd8f3013910557f36e9da",
+  "componentPropertyDefinitions": {
+    "Show Title#33588:82": {
+      "type": "BOOLEAN"
+    },
+    "OS (Figma Only)": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "iOS",
+        "Android"
+      ]
+    },
+    "Variant": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Layer Default",
+        "Transparent"
+      ]
+    },
+    "Left": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Back",
+        "Close",
+        "Custom",
+        "None"
+      ]
+    },
+    "Right": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "1 Icon Button",
+        "2 Icon Button",
+        "3 Icon Button",
+        "Text Button",
+        "None"
+      ]
+    }
+  }
+};

package/src/entities/data/styles.ts

@@ -1,5 +1,99 @@
 import type { Style } from "../style.interface";
 
+export const FIGMA_FILL_STYLES: Style[] = [
+  {
+    styleType: "FILL",
+    key: "46186d7dd037e8e54983ee6677cf7915790d84cc",
+    name: "gradient/fade/layer-floating/↑(to-top)",
+    description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "b28d9c9adc816fdd4ecec3a0b3e25d8aec802b6a",
+    name: "gradient/fade/layer-floating/↓(to-bottom)",
+    description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "063c0dc05b438ac36499492e783520a722782d74",
+    name: "gradient/fade/layer-floating/→(to-right)",
+    description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "c1cee6b89c357c6a12d020654d73a4490cafdf51",
+    name: "gradient/fade/layer-default/←(to-left)",
+    description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "826457503b7ee3d472eab91581b1fcd499c47c00",
+    name: "gradient/fade/layer-default/↑(to-top)",
+    description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "df22450a8f8e9c323baf40d8981920d1b6376cbf",
+    name: "gradient/fade/layer-floating/←(to-left)",
+    description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "ff436e73cf9477a1006e6f8a1f9d2c9dbe0e5edd",
+    name: "gradient/fade/layer-default/→(to-right)",
+    description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "353baa82e0440385eb121cd0ae98d2fcb1a70b18",
+    name: "gradient/glow/magic",
+    description: "반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "f83f54c1840aaf26742629e2c696c363b8df0a82",
+    name: "gradient/glow/magic-pressed",
+    description: "반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러의 pressed컬러입니다.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "408cb970f1de672217f452152b0398a4bb4f4e12",
+    name: "gradient/fade/layer-default/↓(to-bottom)",
+    description: "스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "71971dde923a11c615296a16f8172c0671d5a3a6",
+    name: "gradient/shimmer/neutral",
+    description: "Skeleton shimmer",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "2ed61bff1a187f39389698cf63b74d6997aed609",
+    name: "gradient/shimmer/magic",
+    description: "Skeleton AI shimmer",
+    remote: false,
+  },
+  {
+    styleType: "FILL",
+    key: "1101a7c6a505d97904c3a0ce6a9ee17fe15de879",
+    name: "gradient/highlight/magic",
+    description: "아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러입니다.",
+    remote: false,
+  },
+];
+
 export const FIGMA_TEXT_STYLES: Style[] = [
   {
     styleType: "TEXT",

package/src/entities/index.ts

@@ -1,6 +1,6 @@
 import { createStaticIconRepository } from "./icon.repository";
 import { FIGMA_ICONS } from "./data/icons";
-import { FIGMA_TEXT_STYLES } from "./data/styles";
+import { FIGMA_FILL_STYLES, FIGMA_TEXT_STYLES } from "./data/styles";
 import { FIGMA_VARIABLE_COLLECTIONS } from "./data/variable-collections";
 import { FIGMA_VARIABLES } from "./data/variables";
 import * as FIGMA_COMPONENTS from "./data/__generated__/component-sets";
@@ -20,7 +20,10 @@ export * from "./variable.service";
 export * from "./component.interface";
 export * from "./component.repository";
 
-export const styleRepository = createStaticStyleRepository(FIGMA_TEXT_STYLES);
+export const styleRepository = createStaticStyleRepository([
+  ...FIGMA_TEXT_STYLES,
+  ...FIGMA_FILL_STYLES,
+]);
 export const variableRepository = createStaticVariableRepository({
   variables: FIGMA_VARIABLES,
   variableCollections: FIGMA_VARIABLE_COLLECTIONS,

package/src/normalizer/from-plugin.ts

@@ -9,6 +9,7 @@ import type {
   NormalizedVectorNode,
   NormalizedBooleanOperationNode,
 } from "./types";
+import { convertTransformToGradientHandles } from "@/utils/figma-gradient";
 
 export function createPluginNormalizer() {
   async function normalizeNodes(nodes: readonly SceneNode[]): Promise<NormalizedSceneNode[]> {
@@ -55,7 +56,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
-      ...normalizeAutolayoutProps(node),
+      ...(await normalizeAutolayoutProps(node)),
       children: await normalizeNodes(node.children),
     };
   }
@@ -99,7 +100,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
     };
   }
 
@@ -109,7 +110,7 @@ export function createPluginNormalizer() {
       id: node.id,
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
     };
   }
 
@@ -122,7 +123,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       children: await normalizeNodes(node.children),
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
     };
   }
   async function normalizeTextNode(node: TextNode): Promise<NormalizedTextNode> {
@@ -136,6 +137,7 @@ export function createPluginNormalizer() {
       "textStyleId",
       "fills",
       "boundVariables",
+      "textDecoration",
     ]);
     const first = segments[0]!;
 
@@ -175,7 +177,7 @@ export function createPluginNormalizer() {
           lineHeightPx: segment.lineHeight.unit === "PIXELS" ? segment.lineHeight.value : undefined,
         },
       })),
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
     };
   }
 
@@ -186,7 +188,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
-      ...normalizeAutolayoutProps(node),
+      ...(await normalizeAutolayoutProps(node)),
       children: await normalizeNodes(node.children),
     };
   }
@@ -219,7 +221,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
-      ...normalizeAutolayoutProps(node),
+      ...(await normalizeAutolayoutProps(node)),
       children: await normalizeNodes(node.children),
       componentKey: mainComponent.key,
       componentSetKey:
@@ -244,29 +246,44 @@ export function createPluginNormalizer() {
   }
 
   function normalizePaint(paint: Paint): FigmaRestSpec.Paint {
-    if (paint.type === "SOLID") {
-      return normalizeSolidPaint(paint);
+    switch (paint.type) {
+      case "SOLID":
+        return normalizeSolidPaint(paint);
+      case "IMAGE":
+        return {
+          type: "IMAGE",
+          scaleMode: paint.scaleMode === "CROP" ? "STRETCH" : paint.scaleMode,
+          imageTransform: paint.imageTransform,
+          scalingFactor: paint.scalingFactor,
+          filters: paint.filters,
+          rotation: paint.rotation,
+          imageRef: paint.imageHash ?? "",
+          blendMode: paint.blendMode ?? "NORMAL",
+          visible: paint.visible,
+          opacity: paint.opacity,
+        };
+      case "GRADIENT_LINEAR":
+      case "GRADIENT_RADIAL":
+      case "GRADIENT_ANGULAR":
+      case "GRADIENT_DIAMOND":
+        return {
+          type: paint.type,
+          gradientStops: [...paint.gradientStops],
+          visible: paint.visible,
+          opacity: paint.opacity,
+          blendMode: paint.blendMode ?? "NORMAL",
+          gradientHandlePositions: convertTransformToGradientHandles(paint.gradientTransform),
+        };
+      default:
+        throw new Error(`Unimplemented paint type: ${paint.type}`);
     }
-    if (paint.type === "IMAGE") {
-      return {
-        type: "IMAGE",
-        scaleMode: paint.scaleMode === "CROP" ? "STRETCH" : paint.scaleMode,
-        imageTransform: paint.imageTransform,
-        scalingFactor: paint.scalingFactor,
-        filters: paint.filters,
-        rotation: paint.rotation,
-        imageRef: paint.imageHash ?? "",
-        blendMode: paint.blendMode ?? "NORMAL",
-        visible: paint.visible,
-        opacity: paint.opacity,
-      };
-    }
-    throw new Error(`Unimplemented paint type: ${paint.type}`);
   }
 
   function normalizePaints(fills: readonly Paint[] | PluginAPI["mixed"]): FigmaRestSpec.Paint[] {
     if (fills === figma.mixed) {
-      throw new Error("Mixed fills are not supported");
+      console.warn("Mixed fills are not supported");
+
+      return [];
     }
 
     return fills.map(normalizePaint);
@@ -289,10 +306,11 @@ export function createPluginNormalizer() {
     };
   }
 
-  function normalizeShapeProps(
+  async function normalizeShapeProps(
     node: Pick<
       RectangleNode,
       | "fills"
+      | "fillStyleId"
       | "strokes"
       | "strokeWeight"
       | "layoutGrow"
@@ -308,6 +326,11 @@ export function createPluginNormalizer() {
     > &
       Partial<Pick<FrameNode, "inferredAutoLayout">>,
   ) {
+    const fillStyleKey =
+      typeof node.fillStyleId === "string"
+        ? (await figma.getStyleByIdAsync(node.fillStyleId))?.key
+        : undefined;
+
     return {
       layoutGrow: (node.inferredAutoLayout?.layoutGrow ?? node.layoutGrow) as 0 | 1 | undefined,
       layoutAlign: node.inferredAutoLayout?.layoutAlign ?? node.layoutAlign,
@@ -316,6 +339,7 @@ export function createPluginNormalizer() {
       absoluteBoundingBox: node.absoluteBoundingBox,
       relativeTransform: node.relativeTransform,
       fills: normalizePaints(node.fills),
+      ...(fillStyleKey ? { fillStyleKey } : {}),
       strokes: normalizePaints(node.strokes),
       strokeWeight: node.strokeWeight === figma.mixed ? undefined : node.strokeWeight,
       minHeight: node.minHeight ?? undefined,
@@ -325,9 +349,9 @@ export function createPluginNormalizer() {
     };
   }
 
-  function normalizeAutolayoutProps(node: Omit<FrameNode, "type" | "clone">) {
+  async function normalizeAutolayoutProps(node: Omit<FrameNode, "type" | "clone">) {
     return {
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
       layoutMode: node.inferredAutoLayout?.layoutMode ?? node.layoutMode,
       layoutWrap: node.inferredAutoLayout?.layoutWrap ?? node.layoutWrap,
       paddingLeft: node.inferredAutoLayout?.paddingLeft ?? node.paddingLeft,
@@ -348,23 +372,59 @@ export function createPluginNormalizer() {
     };
   }
 
-  async function normalizeBoundVariables(node: Pick<FrameNode, "boundVariables">) {
+  async function normalizeBoundVariables({
+    boundVariables,
+  }: Pick<FrameNode, "boundVariables">): Promise<FigmaRestSpec.IsLayerTrait["boundVariables"]> {
+    if (!boundVariables) return undefined;
+
+    const { width, height, componentProperties: _componentProperties, ...rest } = boundVariables;
+
+    // replace VariableAlias' id with the actual variable key
+    const resolveVariableId = async (variable: VariableAlias): Promise<VariableAlias> => ({
+      ...variable,
+      id: (await figma.variables.getVariableByIdAsync(variable.id))?.key ?? variable.id,
+    });
+
+    const needsResolution = [
+      "fills",
+      "itemSpacing",
+      "counterAxisSpacing",
+      "bottomLeftRadius",
+      "bottomRightRadius",
+      "topLeftRadius",
+      "topRightRadius",
+      "paddingBottom",
+      "paddingLeft",
+      "paddingRight",
+      "paddingTop",
+      "maxHeight",
+      "minHeight",
+      "maxWidth",
+      "minWidth",
+    ];
+
+    // Process all properties in parallel
+    const resolvedEntries = await Promise.all(
+      Object.entries(rest).map(async ([key, value]) => {
+        if (!value || !needsResolution.includes(key)) return [key, value];
+
+        if (Array.isArray(value)) {
+          return [key, await Promise.all(value.map(resolveVariableId))];
+        }
+
+        return [key, await resolveVariableId(value)];
+      }),
+    );
+
     return {
-      ...node.boundVariables,
-      fills: await Promise.all(
-        node.boundVariables?.fills?.map((fill) =>
-          figma.variables.getVariableByIdAsync(fill.id).then((res) => {
-            return {
-              ...fill,
-              id: res?.key ?? fill.id,
-            };
-          }),
-        ) ?? [],
-      ),
-      size: {
-        x: node.boundVariables?.width,
-        y: node.boundVariables?.height,
-      },
+      ...Object.fromEntries(resolvedEntries),
+      ...(width &&
+        height && {
+          size: {
+            x: width,
+            y: height,
+          },
+        }),
     };
   }
 

package/src/normalizer/types.ts

@@ -32,7 +32,9 @@ export type NormalizedHasLayoutTrait = Pick<
 export type NormalizedHasGeometryTrait = Pick<
   FigmaRestSpec.HasGeometryTrait,
   "fills" | "strokes" | "strokeWeight" | "styles"
->;
+> & {
+  fillStyleKey?: string;
+};
 
 export type NormalizedHasFramePropertiesTrait = Pick<
   FigmaRestSpec.HasFramePropertiesTrait,

package/src/utils/figma-gradient.ts

@@ -0,0 +1,72 @@
+/**
+ * @see https://gist.github.com/yagudaev/0c2b89674c6aee8b38cd379752ef58d0
+ */
+
+const identityMatrixHandlePositions = [
+  [0, 1, 0],
+  [0.5, 0.5, 1],
+  [1, 1, 1],
+];
+
+/**
+ * Inverts a 2x3 affine transformation matrix
+ * For a 2x3 matrix [[a, b, c], [d, e, f]], we treat it as a 3x3 matrix with [0, 0, 1] as the third row
+ */
+function inv(matrix: number[][]): number[][] {
+  const [[a, b, c], [d, e, f]] = matrix;
+  
+  // Calculate determinant of the 2x2 linear part
+  const det = a * e - b * d;
+  
+  if (Math.abs(det) < 1e-10) {
+    throw new Error("Matrix is not invertible");
+  }
+  
+  // Invert the 2x2 linear part
+  const invDet = 1 / det;
+  const a_inv = e * invDet;
+  const b_inv = -b * invDet;
+  const d_inv = -d * invDet;
+  const e_inv = a * invDet;
+  
+  // Calculate the inverted translation
+  const c_inv = -(a_inv * c + b_inv * f);
+  const f_inv = -(d_inv * c + e_inv * f);
+  
+  return [
+    [a_inv, b_inv, c_inv],
+    [d_inv, e_inv, f_inv]
+  ];
+}
+
+/**
+ * Multiplies a 2x3 matrix with a 3x3 matrix
+ * Result is a 2x3 matrix
+ */
+function multiply(matrix1: number[][], matrix2: number[][]): number[][] {
+  const [[a, b, c], [d, e, f]] = matrix1;
+  const result: number[][] = [[], []];
+  
+  // For each column in matrix2
+  for (let col = 0; col < matrix2[0].length; col++) {
+    // First row of result
+    result[0][col] = a * matrix2[0][col] + b * matrix2[1][col] + c * matrix2[2][col];
+    // Second row of result
+    result[1][col] = d * matrix2[0][col] + e * matrix2[1][col] + f * matrix2[2][col];
+  }
+  
+  return result;
+}
+
+export function convertTransformToGradientHandles(transform: number[][]) {
+  const inverseTransform = inv(transform);
+
+  // point matrix
+  const mp = multiply(inverseTransform, identityMatrixHandlePositions);
+
+  return [
+    { x: mp[0][0], y: mp[1][0] },
+    { x: mp[0][1], y: mp[1][1] },
+    { x: mp[0][2], y: mp[1][2] },
+  ];
+}

package/src/utils/figma-node.ts

@@ -5,14 +5,15 @@ import type {
   NormalizedIsLayerTrait,
   NormalizedSceneNode,
 } from "../normalizer";
+
 export function traverseNode(
   node: NormalizedSceneNode,
   callback: (node: NormalizedSceneNode) => void,
 ) {
+  callback(node);
+
   if ("children" in node) {
     node.children.forEach((child) => traverseNode(child, callback));
-  } else {
-    callback(node);
   }
 }
 
@@ -50,7 +51,7 @@ export function findAllInstances<T>({ node, key }: { node: NormalizedSceneNode;
   return findAll(
     node,
     (n) => n.type === "INSTANCE" && (n.componentKey === key || n.componentSetKey === key),
-  ) as (NormalizedInstanceNode & { componentProperties: T })[];
+  ) as (Omit<NormalizedInstanceNode, "componentProperties"> & { componentProperties: T })[];
 }
 
 export function getFirstSolidFill(node: NormalizedHasGeometryTrait) {

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

@@ -1,72 +0,0 @@
-import type { ActionChipProperties } from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { match } from "ts-pattern";
-import { createSeedReactElement } from "../../element-factories";
-import type { ComponentHandlerDeps } from "../deps.interface";
-import { handleSizeProp } from "../size";
-
-export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ActionChipProperties>(
-    metadata.actionChip.key,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
-      const { layout, children } = match(props.Layout.value)
-        .with("Icon Only", () => ({
-          layout: "iconOnly",
-          children: [
-            createSeedReactElement("Icon", {
-              svg: ctx.iconHandler.transform(props["Icon#8714:0"]),
-            }),
-          ],
-        }))
-        .with("Icon First", () => ({
-          layout: "withText",
-          children: [
-            createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
-            }),
-            props["Label#7185:0"].value,
-          ],
-        }))
-        .with("Icon Last", () => ({
-          layout: "withText",
-          children: [
-            props["Label#7185:0"].value,
-            createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
-            }),
-          ],
-        }))
-        .with("Icon Both", () => ({
-          layout: "withText",
-          children: [
-            createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
-            }),
-            props["Label#7185:0"].value,
-            createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
-            }),
-          ],
-        }))
-        .with("Text Only", () => ({
-          layout: "withText",
-          children: props["Label#7185:0"].value,
-        }))
-        .exhaustive();
-
-      const commonProps = {
-        size: handleSizeProp(props.Size.value),
-        layout,
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-        ...(props["Show Count#7185:42"].value && {
-          count: Number(props["Count#7185:21"].value),
-        }),
-      };
-      return createSeedReactElement("ActionChip", commonProps, children);
-    },
-  );