@seed-design/figma 0.0.21 → 0.0.22

package/lib/index.js

@@ -1,5 +1,4 @@
-import { match } from 'ts-pattern';
-import { camelCase, pascalCase } from 'change-case';
+export * from './codegen/index.js';
 
 function createRestNormalizer(ctx) {
     function normalizeNodes(nodes) {
@@ -457,628 +456,9 @@ function createPluginNormalizer() {
     return normalizeNode;
 }
 
-function ensureArray(maybeArray) {
-    if (Array.isArray(maybeArray)) {
-        return maybeArray;
-    }
-    return [
-        maybeArray
-    ];
-}
-function exists(value) {
-    return value != null;
-}
-function compactObject(obj) {
-    return Object.fromEntries(Object.entries(obj).filter(([, value])=>value != null));
-}
-function objectEntries(obj) {
-    return Object.entries(obj);
-}
-/**
- * camelCase but preserve underscore between numbers.
- * temporary workaround to avoid x1_5 -> x15
- * @example "color-1_5" -> "color1_5"
- */ function camelCasePreserveUnderscoreBetweenNumbers(input) {
-    return camelCase(input, {
-        mergeAmbiguousCharacters: false
-    }).replaceAll(/(\D)_(\d)/g, "$1$2").replaceAll(/(\d)_(\D)/g, "$1$2");
-}
-
-function createElement(tag, props = {}, children, comment) {
-    return {
-        __IS_JSX_ELEMENT_NODE: true,
-        tag,
-        props,
-        children: ensureArray(children).filter(exists),
-        comment
-    };
-}
-function cloneElement(element, props = {}, children) {
-    return {
-        ...element,
-        props: {
-            ...element.props,
-            ...props
-        },
-        children: children ? ensureArray(children).filter(exists) : element.children
-    };
-}
-function appendSource(element, source) {
-    return {
-        ...element,
-        source
-    };
-}
-function isElement(node) {
-    return typeof node === "object" && node != null && "__IS_JSX_ELEMENT_NODE" in node && node.__IS_JSX_ELEMENT_NODE === true;
-}
-function stringifyElement(element, options = {}) {
-    function recursive(node, depth) {
-        if (typeof node === "string") {
-            return node;
-        }
-        const { tag, props, children, comment } = node;
-        const propEntries = Object.entries(options.printSource ? {
-            ...props,
-            "data-figma-node-id": node.source
-        } : props);
-        const propFragments = propEntries.map(([key, value])=>{
-            if (typeof value === "string") {
-                if (value.includes("\n")) {
-                    return `${key}={\"${value.replace("\n", "\\n")}\"}`;
-                }
-                return `${key}="${value}"`;
-            }
-            if (typeof value === "number") {
-                return `${key}={${value}}`;
-            }
-            if (typeof value === "boolean") {
-                return `${key}={${value}}`;
-            }
-            if (isElement(value)) {
-                return `${key}={${recursive(value, depth + 1)}}`;
-            }
-            if (typeof value === "object") {
-                return `${key}={${JSON.stringify(value)}}`;
-            }
-            if (typeof value === "undefined") {
-                return undefined;
-            }
-        }).filter(exists);
-        const oneLiner = propFragments.join(" ");
-        const propsString = propEntries.length === 0 ? "" : ` ${oneLiner.length < 80 ? oneLiner : `\n${"  ".repeat(depth + 1)}${propFragments.join(`\n${"  ".repeat(depth + 1)}`)}\n${"  ".repeat(depth)}`}`;
-        if (children == null || children.length === 0) {
-            return `<${tag}${propsString} />${comment ? `{/* ${comment} */}` : ""}`;
-        }
-        const result = [
-            `<${tag}${propsString}>`,
-            ...ensureArray(children).filter(exists).map((child)=>recursive(child, depth + 1)).map((str)=>"  ".repeat(depth + 1) + str),
-            `${"  ".repeat(depth)}</${tag}>${comment ? `{/* ${comment} */}` : ""}`
-        ].join("\n");
-        return result;
-    }
-    return recursive(element, 0);
-}
-
-// --- Helper Functions ---
-function getCollectiveBoundingBox(nodes) {
-    if (nodes.length === 0) {
-        return null;
-    }
-    let minX = Number.POSITIVE_INFINITY;
-    let minY = Number.POSITIVE_INFINITY;
-    let maxX = Number.NEGATIVE_INFINITY;
-    let maxY = Number.NEGATIVE_INFINITY;
-    nodes.forEach((node)=>{
-        const box = node.absoluteBoundingBox;
-        minX = Math.min(minX, box.x);
-        minY = Math.min(minY, box.y);
-        maxX = Math.max(maxX, box.x + box.width);
-        maxY = Math.max(maxY, box.y + box.height);
-    });
-    return {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY
-    };
-}
-function calculateMean(arr) {
-    if (arr.length === 0) return 0;
-    return arr.reduce((sum, val)=>sum + val, 0) / arr.length;
-}
-function calculateVariance(arr) {
-    if (arr.length < 2) return 0;
-    const mean = calculateMean(arr);
-    return arr.reduce((sum, val)=>sum + (val - mean) ** 2, 0) / arr.length;
-}
-function calculateMedian(arr) {
-    if (arr.length === 0) return 0;
-    const sortedArr = [
-        ...arr
-    ].sort((a, b)=>a - b);
-    const mid = Math.floor(sortedArr.length / 2);
-    if (sortedArr.length % 2 === 0) {
-        return (sortedArr[mid - 1] + sortedArr[mid]) / 2;
-    }
-    return sortedArr[mid];
-}
-// Tolerance for floating point comparisons and alignment checks
-const EPSILON = 1; // 1 pixel tolerance
-// --- Main Inference Function ---
-function inferLayout(parentNode) {
-    if (parentNode.layoutMode !== "NONE") {
-        return {
-            properties: {},
-            childProperties: {}
-        };
-    }
-    const children = parentNode.children || [];
-    const parentBox = parentNode.absoluteBoundingBox;
-    const result = {
-        layoutMode: "NONE"
-    };
-    if (children.length === 0) {
-        return {
-            properties: result,
-            childProperties: {}
-        }; // Cannot infer layout for no children
-    }
-    if (children.length === 1) {
-        // Default for single child: Horizontal, Hug contents, No spacing, Calculate padding
-        result.layoutMode = "HORIZONTAL";
-        result.primaryAxisSizingMode = "AUTO";
-        result.counterAxisSizingMode = "AUTO";
-        result.itemSpacing = 0;
-        result.primaryAxisAlignItems = "MIN"; // Doesn't matter for one item
-        result.counterAxisAlignItems = "MIN"; // Doesn't matter for one item
-        const childBox = children[0].absoluteBoundingBox;
-        result.paddingLeft = Math.max(0, childBox.x - parentBox.x);
-        result.paddingRight = Math.max(0, parentBox.x + parentBox.width - (childBox.x + childBox.width));
-        result.paddingTop = Math.max(0, childBox.y - parentBox.y);
-        result.paddingBottom = Math.max(0, parentBox.y + parentBox.height - (childBox.y + childBox.height));
-        return {
-            properties: result,
-            childProperties: {}
-        };
-    }
-    // --- 1. Determine Layout Direction ---
-    const sortedByX = [
-        ...children
-    ].sort((a, b)=>a.absoluteBoundingBox.x - b.absoluteBoundingBox.x);
-    const sortedByY = [
-        ...children
-    ].sort((a, b)=>a.absoluteBoundingBox.y - b.absoluteBoundingBox.y);
-    const horizontalGaps = [];
-    for(let i = 0; i < sortedByX.length - 1; i++){
-        const current = sortedByX[i].absoluteBoundingBox;
-        const next = sortedByX[i + 1].absoluteBoundingBox;
-        // Ensure items don't significantly overlap vertically for horizontal check
-        if (Math.max(current.y, next.y) < Math.min(current.y + current.height, next.y + next.height)) {
-            horizontalGaps.push(next.x - (current.x + current.width));
-        }
-    }
-    const verticalGaps = [];
-    for(let i = 0; i < sortedByY.length - 1; i++){
-        const current = sortedByY[i].absoluteBoundingBox;
-        const next = sortedByY[i + 1].absoluteBoundingBox;
-        // Ensure items don't significantly overlap horizontally for vertical check
-        if (Math.max(current.x, next.x) < Math.min(current.x + current.width, next.x + next.width)) {
-            verticalGaps.push(next.y - (current.y + current.height));
-        }
-    }
-    // Heuristic: Prefer axis with more non-negative gaps and lower variance
-    const hVariance = calculateVariance(horizontalGaps.filter((g)=>g >= -1));
-    const vVariance = calculateVariance(verticalGaps.filter((g)=>g >= -1));
-    const hCount = horizontalGaps.filter((g)=>g >= -1).length;
-    const vCount = verticalGaps.filter((g)=>g >= -1).length;
-    let primaryAxisSortedNodes = sortedByX; // Default guess
-    // Basic variance check (lower is better). Add slight bias for horizontal if equal.
-    if (vCount > 0 && (hCount === 0 || vVariance < hVariance - EPSILON && vCount >= hCount || vVariance <= hVariance && vCount > hCount)) {
-        result.layoutMode = "VERTICAL";
-        primaryAxisSortedNodes = sortedByY;
-    } else if (hCount > 0) {
-        result.layoutMode = "HORIZONTAL";
-        primaryAxisSortedNodes = sortedByX;
-    } else {
-        // Ambiguous case based on gaps, fall back to bounding box aspect ratio
-        const collectiveBox = getCollectiveBoundingBox(children);
-        if (collectiveBox) {
-            if (collectiveBox.height > collectiveBox.width) {
-                result.layoutMode = "VERTICAL";
-                primaryAxisSortedNodes = sortedByY;
-            } else {
-                result.layoutMode = "HORIZONTAL";
-                primaryAxisSortedNodes = sortedByX;
-            }
-        } else {
-            // Still nothing? Default to Horizontal
-            result.layoutMode = "HORIZONTAL";
-            primaryAxisSortedNodes = sortedByX;
-        }
-    }
-    const primaryGaps = result.layoutMode === "HORIZONTAL" ? horizontalGaps : verticalGaps;
-    const validGaps = primaryGaps.filter((g)=>g >= -1); // Allow slight overlap
-    // --- 2. Calculate Spacing & Primary Alignment ---
-    let isSpaceBetween = false;
-    const collectiveBox = getCollectiveBoundingBox(children);
-    if (collectiveBox && children.length >= 2) {
-        // Check for Space Between potential
-        const first = primaryAxisSortedNodes[0].absoluteBoundingBox;
-        const last = primaryAxisSortedNodes[primaryAxisSortedNodes.length - 1].absoluteBoundingBox;
-        let firstStart;
-        let lastEnd;
-        let parentSize;
-        if (result.layoutMode === "HORIZONTAL") {
-            firstStart = first.x;
-            lastEnd = last.x + last.width;
-            parentSize = parentBox.width;
-        } else {
-            firstStart = first.y;
-            lastEnd = last.y + last.height;
-            parentSize = parentBox.height;
-        }
-        const contentSpan = lastEnd - firstStart;
-        // Heuristic for Space Between: Content spans most of the parent & average gap is large
-        const averageGap = calculateMean(validGaps);
-        // Example threshold: Content fills > 85% AND average gap is > 20% of average item size? Or just large?
-        if (contentSpan > parentSize * 0.8 && validGaps.length > 0 && averageGap > 10) {
-            // Additional check: are first/last items close to parent edges (considering padding)?
-            const startPadding = result.layoutMode === "HORIZONTAL" ? first.x - parentBox.x : first.y - parentBox.y;
-            const endPadding = result.layoutMode === "HORIZONTAL" ? parentBox.x + parentBox.width - (last.x + last.width) : parentBox.y + parentBox.height - (last.y + last.height);
-            // If start/end items are reasonably close to edges (e.g., < 2 * average gap?)
-            if (Math.abs(startPadding) < Math.max(20, averageGap * 1.5) && Math.abs(endPadding) < Math.max(20, averageGap * 1.5)) {
-                isSpaceBetween = true;
-            }
-        }
-    }
-    if (isSpaceBetween) {
-        result.primaryAxisAlignItems = "SPACE_BETWEEN";
-        result.itemSpacing = 0; // Spacing is implicit
-        result.primaryAxisSizingMode = "FIXED"; // Usually fixed when using space between
-    } else {
-        result.primaryAxisAlignItems = "MIN"; // Default to MIN for packed, could refine later
-        if (validGaps.length > 0) {
-            // Use median spacing for robustness against outliers
-            result.itemSpacing = calculateMedian(validGaps);
-            // Clamp negative spacing if it's very small (likely float error)
-            if (result.itemSpacing < 0 && result.itemSpacing > -1) {
-                result.itemSpacing = 0;
-            }
-        } else {
-            result.itemSpacing = 0; // No valid gaps found
-        }
-        result.primaryAxisSizingMode = "AUTO"; // Default to hug content for packed
-    }
-    // --- 3. Calculate Padding ---
-    if (collectiveBox) {
-        result.paddingLeft = Math.max(0, collectiveBox.x - parentBox.x);
-        result.paddingRight = Math.max(0, parentBox.x + parentBox.width - (collectiveBox.x + collectiveBox.width));
-        result.paddingTop = Math.max(0, collectiveBox.y - parentBox.y);
-        result.paddingBottom = Math.max(0, parentBox.y + parentBox.height - (collectiveBox.y + collectiveBox.height));
-    } else {
-        result.paddingLeft = 0;
-        result.paddingRight = 0;
-        result.paddingTop = 0;
-        result.paddingBottom = 0;
-    }
-    // --- 4. Determine Counter Axis Alignment ---
-    const counterCoordsMin = [];
-    const counterCoordsCenter = [];
-    const counterCoordsMax = [];
-    if (result.layoutMode === "HORIZONTAL") {
-        // Check vertical alignment (Y)
-        children.forEach((node)=>{
-            const box = node.absoluteBoundingBox;
-            counterCoordsMin.push(box.y);
-            counterCoordsCenter.push(box.y + box.height / 2);
-            counterCoordsMax.push(box.y + box.height);
-        });
-    } else {
-        // VERTICAL layout
-        // Check horizontal alignment (X)
-        children.forEach((node)=>{
-            const box = node.absoluteBoundingBox;
-            counterCoordsMin.push(box.x);
-            counterCoordsCenter.push(box.x + box.width / 2);
-            counterCoordsMax.push(box.x + box.width);
-        });
-    }
-    const minVariance = calculateVariance(counterCoordsMin);
-    const centerVariance = calculateVariance(counterCoordsCenter);
-    const maxVariance = calculateVariance(counterCoordsMax);
-    const alignmentTolerance = EPSILON * EPSILON * 4; // Allow slightly more variance for alignment match
-    if (minVariance <= centerVariance && minVariance <= maxVariance && minVariance < alignmentTolerance) {
-        result.counterAxisAlignItems = "MIN";
-    } else if (centerVariance <= minVariance && centerVariance <= maxVariance && centerVariance < alignmentTolerance) {
-        result.counterAxisAlignItems = "CENTER";
-    } else if (maxVariance <= minVariance && maxVariance <= centerVariance && maxVariance < alignmentTolerance) {
-        result.counterAxisAlignItems = "MAX";
-    } else {
-        // Default if variances are high or similar
-        result.counterAxisAlignItems = "CENTER";
-    }
-    // --- 5. Determine Counter Axis Sizing Mode ---
-    // Default to AUTO unless children perfectly fill the parent counter dimension
-    result.counterAxisSizingMode = "AUTO";
-    if (collectiveBox) {
-        let collectiveCounterSize;
-        let parentCounterSize;
-        if (result.layoutMode === "HORIZONTAL") {
-            collectiveCounterSize = collectiveBox.height;
-            parentCounterSize = parentBox.height - (result.paddingTop ?? 0) - (result.paddingBottom ?? 0);
-        } else {
-            collectiveCounterSize = collectiveBox.width;
-            parentCounterSize = parentBox.width - (result.paddingLeft ?? 0) - (result.paddingRight ?? 0);
-        }
-        // If collective size is very close to parent size on counter axis
-        if (Math.abs(collectiveCounterSize - parentCounterSize) < EPSILON) {
-            result.counterAxisSizingMode = "FIXED";
-        }
-    }
-    // 6. Infer layoutAlign for each child
-    const childProperties = {};
-    const availableWidth = parentBox.width - (result.paddingLeft ?? 0) - (result.paddingRight ?? 0);
-    const availableHeight = parentBox.height - (result.paddingTop ?? 0) - (result.paddingBottom ?? 0);
-    children.forEach((child)=>{
-        const childBox = child.absoluteBoundingBox;
-        let inferredChildAlign = undefined;
-        // Check STRETCH
-        if (result.layoutMode === "HORIZONTAL") {
-            // Counter: Vertical
-            if (Math.abs(childBox.height - availableHeight) < EPSILON && availableHeight > 0) {
-                inferredChildAlign = "STRETCH";
-            }
-        } else {
-            // Counter: Horizontal
-            if (Math.abs(childBox.width - availableWidth) < EPSILON && availableWidth > 0) {
-                inferredChildAlign = "STRETCH";
-            }
-        }
-        if (inferredChildAlign) {
-            childProperties[child.id] = {
-                layoutAlign: inferredChildAlign
-            };
-        }
-    });
-    return {
-        properties: result,
-        childProperties
-    };
-}
-function applyInferredLayout(parentNode, result) {
-    const { properties, childProperties } = result;
-    if (properties.layoutMode === "NONE") {
-        return parentNode;
-    }
-    return {
-        ...parentNode,
-        ...properties,
-        children: parentNode.children.map((child)=>{
-            const props = childProperties[child.id];
-            if (props) {
-                return {
-                    ...child,
-                    ...props
-                };
-            }
-            return child;
-        })
-    };
-}
-
-function createCodegenTransformer({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
-    function traverse(node) {
-        if ("visible" in node && !node.visible) {
-            return;
-        }
-        const result = match(node).with({
-            type: "FRAME"
-        }, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
-            type: "TEXT"
-        }, (node)=>textTransformer(node, traverse)).with({
-            type: "RECTANGLE"
-        }, (node)=>rectangleTransformer(node, traverse)).with({
-            type: "COMPONENT"
-        }, (node)=>frameTransformer(node, traverse)) // NOTE: Treat component node as Frame for now
-        .with({
-            type: "INSTANCE"
-        }, (node)=>instanceTransformer(node, traverse)).with({
-            type: "VECTOR"
-        }, (node)=>vectorTransformer(node, traverse)).with({
-            type: "BOOLEAN_OPERATION"
-        }, (node)=>booleanOperationTransformer(node, traverse)).with({
-            type: "UNHANDLED"
-        }, ()=>createElement("UnhandledFigmaNode")).exhaustive();
-        if (result) {
-            return appendSource(result, node.id);
-        }
-        return;
-    }
-    return (node)=>traverse(node);
-}
-
-function defineComponentTransformer(key, transform) {
-    return {
-        key,
-        transform
-    };
-}
-
-function defineElementTransformer(transformer) {
-    return transformer;
-}
-
-function definePropsTransformer(transformer) {
-    return transformer;
-}
-function createPropsTransformer({ handlers, shorthands, defaults }) {
-    return definePropsTransformer((node)=>{
-        const result = {};
-        for (const [prop, handler] of objectEntries(handlers)){
-            const value = handler(node);
-            if (value !== undefined && (!defaults || value !== defaults[prop])) {
-                result[prop] = value;
-            }
-        }
-        if (shorthands) {
-            for (const [shorthand, props] of objectEntries(shorthands)){
-                const values = props.map((prop)=>result[prop]);
-                const allDefined = values.every((value)=>value !== undefined);
-                const allEqual = allDefined && values.every((value)=>value === values[0]);
-                if (allEqual && values[0] !== undefined) {
-                    result[shorthand] = values[0];
-                    for (const prop of props){
-                        delete result[prop];
-                    }
-                }
-            }
-        }
-        return result;
-    });
-}
-
-function traverseNode(node, callback) {
-    if ("children" in node) {
-        node.children.forEach((child)=>traverseNode(child, callback));
-    } else {
-        callback(node);
-    }
-}
-function findOne(node, callback) {
-    let result;
-    traverseNode(node, (n)=>{
-        if (callback(n)) {
-            result = n;
-        }
-    });
-    return result;
-}
-function findAll(node, callback) {
-    const result = [];
-    traverseNode(node, (n)=>{
-        if (callback(n)) {
-            result.push(n);
-        }
-    });
-    return result;
-}
-function findAllInstances({ node, key }) {
-    return findAll(node, (n)=>n.type === "INSTANCE" && (n.componentKey === key || n.componentSetKey === key));
-}
-function getFirstSolidFill(node) {
-    const fills = node.fills.filter((fill)=>fill.type === "SOLID" && (!("visible" in fill) || fill.visible === true));
-    if (fills.length === 0) {
-        return undefined;
-    }
-    return fills[0];
-}
-function getFirstFillVariable(node) {
-    return node.boundVariables?.fills?.[0];
-}
-function getFirstStroke(node) {
-    const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID" && (!("visible" in stroke) || stroke.visible === true)) ?? [];
-    if (strokes.length === 0) {
-        return undefined;
-    }
-    return strokes[0];
-}
-function getFirstStrokeVariable(node) {
-    return node.boundVariables?.strokes?.[0];
-}
-
-function createValueTransformer({ variableService, formatters, shouldInferVariableName }) {
-    function processColor(key, value, scope) {
-        if (key) {
-            return variableService.getVariableName(key);
-        }
-        if (value) {
-            if (shouldInferVariableName) {
-                return variableService.inferVariableName(value, scope) ?? formatters.color(value);
-            }
-            return formatters.color(value);
-        }
-        return undefined;
-    }
-    function processDimension(key, value, scope) {
-        if (key) {
-            return variableService.getVariableName(key);
-        }
-        if (value) {
-            if (shouldInferVariableName) {
-                return variableService.inferVariableName(value, scope) ?? formatters.dimension(value);
-            }
-            return formatters.dimension(value);
-        }
-        return undefined;
-    }
-    function processFontDimension(key, value, scope) {
-        if (key) {
-            return variableService.getVariableName(key);
-        }
-        if (value) {
-            if (shouldInferVariableName) {
-                return variableService.inferVariableName(value, scope) ?? formatters.fontDimension(value);
-            }
-            return formatters.fontDimension(value);
-        }
-        return undefined;
-    }
-    function processFontWeight(key, value) {
-        if (key) {
-            return variableService.getVariableName(key);
-        }
-        if (value) {
-            if (shouldInferVariableName) {
-                const fontWeightToString = {
-                    100: "thin",
-                    200: "extra-light",
-                    300: "light",
-                    400: "regular",
-                    500: "medium",
-                    600: "semi-bold",
-                    700: "bold",
-                    800: "extra-bold",
-                    900: "black"
-                };
-                return variableService.inferVariableName(value, "FONT_WEIGHT") ?? variableService.inferVariableName(fontWeightToString[value], "FONT_STYLE") ?? formatters.fontWeight(value);
-            }
-            return formatters.fontWeight(value);
-        }
-        return undefined;
-    }
-    const getFormattedValue = {
-        width: (node)=>processDimension(node.boundVariables?.size?.x?.id, node.absoluteBoundingBox?.width, "WIDTH_HEIGHT"),
-        height: (node)=>processDimension(node.boundVariables?.size?.y?.id, node.absoluteBoundingBox?.height, "WIDTH_HEIGHT"),
-        minWidth: (node)=>processDimension(node.boundVariables?.minWidth?.id, node.minWidth, "WIDTH_HEIGHT"),
-        minHeight: (node)=>processDimension(node.boundVariables?.minHeight?.id, node.minHeight, "WIDTH_HEIGHT"),
-        maxWidth: (node)=>processDimension(node.boundVariables?.maxWidth?.id, node.maxWidth, "WIDTH_HEIGHT"),
-        maxHeight: (node)=>processDimension(node.boundVariables?.maxHeight?.id, node.maxHeight, "WIDTH_HEIGHT"),
-        paddingLeft: (node)=>processDimension(node.boundVariables?.paddingLeft?.id, node.paddingLeft, "GAP"),
-        paddingRight: (node)=>processDimension(node.boundVariables?.paddingRight?.id, node.paddingRight, "GAP"),
-        paddingTop: (node)=>processDimension(node.boundVariables?.paddingTop?.id, node.paddingTop, "GAP"),
-        paddingBottom: (node)=>processDimension(node.boundVariables?.paddingBottom?.id, node.paddingBottom, "GAP"),
-        itemSpacing: (node)=>processDimension(node.boundVariables?.itemSpacing?.id, node.itemSpacing, "GAP"),
-        frameFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "FRAME_FILL"),
-        shapeFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "SHAPE_FILL"),
-        textFill: (node)=>processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "TEXT_FILL"),
-        stroke: (node)=>processColor(getFirstStrokeVariable(node)?.id, getFirstStroke(node)?.color, "STROKE_COLOR"),
-        topLeftRadius: (node)=>processDimension(node.boundVariables?.topLeftRadius?.id, node.rectangleCornerRadii?.[0] ?? node.cornerRadius, "CORNER_RADIUS"),
-        topRightRadius: (node)=>processDimension(node.boundVariables?.topRightRadius?.id, node.rectangleCornerRadii?.[1] ?? node.cornerRadius, "CORNER_RADIUS"),
-        bottomLeftRadius: (node)=>processDimension(node.boundVariables?.bottomLeftRadius?.id, node.rectangleCornerRadii?.[2] ?? node.cornerRadius, "CORNER_RADIUS"),
-        bottomRightRadius: (node)=>processDimension(node.boundVariables?.bottomRightRadius?.id, node.rectangleCornerRadii?.[3] ?? node.cornerRadius, "CORNER_RADIUS"),
-        fontSize: (node)=>processFontDimension(node.boundVariables?.fontSize?.[0]?.id, node.style.fontSize, "FONT_SIZE"),
-        fontWeight: (node)=>processFontWeight(node.boundVariables?.fontWeight?.[0]?.id, node.style.fontWeight),
-        lineHeight: (node)=>processFontDimension(node.boundVariables?.lineHeight?.[0]?.id, node.style.lineHeightPx, "LINE_HEIGHT")
-    };
-    return {
-        getFormattedValue
-    };
-}
-
 function createStaticIconRepository(iconRecord) {
     return {
-        getIconData: (key)=>iconRecord[key]
+        getOne: (key)=>iconRecord[key]
     };
 }
 
@@ -10795,79 +10175,78 @@ function createStaticVariableRepository({ variables, variableCollections }) {
 }
 
 function createIconService({ iconRepository }) {
-    function isIconComponent(componentKey) {
-        return iconRepository.getIconData(componentKey) !== undefined;
+    function isAvailable(componentKey) {
+        return iconRepository.getOne(componentKey) !== undefined;
     }
-    function createIconTagName(key) {
-        if (!key) {
-            return "UnknownIcon";
-        }
-        const iconData = iconRepository.getIconData(key);
-        if (!iconData) {
-            return "UnknownIcon";
-        }
-        const { name, weight } = iconData;
-        return pascalCase(`${name}${weight ? weight : ""}`);
+    function getOne(componentKey) {
+        return iconRepository.getOne(componentKey);
     }
     return {
-        isIconComponent,
-        createIconTagName
+        isAvailable,
+        getOne
     };
 }
 
 // TODO: inferStyleName 추가해야 함, rest api에서 style value가 제공되지 않고 있어 보류
-function createStyleService({ styleRepository, styleNameTransformer }) {
-    function getFigmaStyleName(id) {
+function createStyleService({ styleRepository }) {
+    function getName(id) {
         const style = styleRepository.findOneByKey(id);
         if (!style) {
             return undefined;
         }
         return style.name;
     }
-    function getFigmaStyleSlug(id) {
-        const name = getFigmaStyleName(id);
+    function getSlug(id) {
+        const name = getName(id);
         if (!name) {
             return undefined;
         }
         return name.split("/");
     }
-    function getStyleName(id) {
-        const slug = getFigmaStyleSlug(id);
-        if (!slug) {
-            return undefined;
-        }
-        return styleNameTransformer({
-            slug
-        });
-    }
     return {
-        getStyleName
+        getSlug
     };
 }
 
-function isVariableAlias(value) {
-    return typeof value === "object" && value !== null && "type" in value && value.type === "VARIABLE_ALIAS";
-}
 // boundVariable.id is formatted as "VariableID:{key}/{localId}", we have to extract the key
 function sanitizeVariableId(id) {
     return id.replace("VariableID:", "").split("/")[0];
 }
+function isVariableAlias(value) {
+    return typeof value === "object" && value !== null && "type" in value && value.type === "VARIABLE_ALIAS";
+}
+function isIdenticalVariableValue(value1, value2) {
+    if (typeof value1 !== typeof value2) {
+        return false;
+    }
+    if (typeof value1 === "string" || typeof value1 === "number" || typeof value1 === "boolean") {
+        return value1 === value2;
+    }
+    return value1.r === value2.r && value1.g === value2.g && value1.b === value2.b && value1.a === value2.a;
+}
+function isInsideScope(variable, scope) {
+    if (variable.scopes.includes("ALL_SCOPES")) {
+        return true;
+    }
+    if (variable.scopes.includes("ALL_FILLS")) {
+        if (scope === "FRAME_FILL" || scope === "SHAPE_FILL" || scope === "TEXT_FILL") {
+            return true;
+        }
+    }
+    return variable.scopes.includes(scope);
+}
 
-function createVariableService({ variableRepository, variableNameTransformer, inferCompareFunction }) {
+function createVariableService({ variableRepository, inferCompareFunction }) {
     const variables = variableRepository.getVariableList();
     // private
-    function getFigmaVariableName(key) {
+    function getName(key) {
         const sanitizedId = sanitizeVariableId(key);
         const variable = variableRepository.findVariableByKey(sanitizedId);
         if (!variable) {
-            return "UNKNOWN_VARIABLE";
+            return undefined;
         }
         return variable.name;
     }
-    function getFigmaVariableSlug(key) {
-        const name = getFigmaVariableName(key);
-        return name.split("/");
-    }
     function getDefaultModeId(variable) {
         const variableCollection = variableRepository.findVariableCollectionById(variable.variableCollectionId);
         if (!variableCollection) {
@@ -10876,57 +10255,38 @@ function createVariableService({ variableRepository, variableNameTransformer, in
         }
         return variableCollection.defaultModeId;
     }
-    function resolveVariableValue(id, mode) {
-        const variable = variableRepository.findVariableById(id);
-        if (!variable) {
-            throw new Error(`Variable not found: ${id}`);
+    // public
+    function getSlug(key) {
+        const name = getName(key);
+        if (!name) {
+            return undefined;
         }
+        return name.split("/");
+    }
+    function resolveValue(variable, mode) {
         const value = variable.valuesByMode[mode];
         if (value === undefined) {
-            throw new Error(`Variable value not found: ${id} ${mode}`);
+            throw new Error(`Variable value not found: ${variable.id} ${mode}`);
         }
         if (isVariableAlias(value)) {
-            return resolveVariableValue(value.id, mode);
-        }
-        return value;
-    }
-    function isIdenticalVariableValue(value1, value2) {
-        if (typeof value1 !== typeof value2) {
-            return false;
-        }
-        if (typeof value1 === "string" || typeof value1 === "number" || typeof value1 === "boolean") {
-            return value1 === value2;
-        }
-        return value1.r === value2.r && value1.g === value2.g && value1.b === value2.b && value1.a === value2.a;
-    }
-    function isInsideScope(variable, scope) {
-        if (variable.scopes.includes("ALL_SCOPES")) {
-            return true;
-        }
-        if (variable.scopes.includes("ALL_FILLS")) {
-            if (scope === "FRAME_FILL" || scope === "SHAPE_FILL" || scope === "TEXT_FILL") {
-                return true;
+            const resolvedVariable = variableRepository.findVariableById(value.id);
+            if (!resolvedVariable) {
+                throw new Error(`Variable not found: ${value.id}`);
             }
+            return resolveValue(resolvedVariable, mode);
         }
-        return variable.scopes.includes(scope);
-    }
-    // public
-    function getVariableName(key) {
-        const slug = getFigmaVariableSlug(key);
-        return variableNameTransformer({
-            slug
-        });
+        return value;
     }
-    function inferVariableName(value, scope) {
+    function infer(value, scope) {
         // NOTE: We assume that the variable is in the default mode or value is equal between all modes for simplicity.
-        const inferredVariables = variables.filter((variable)=>isInsideScope(variable, scope) && isIdenticalVariableValue(resolveVariableValue(variable.id, getDefaultModeId(variable)), value));
-        const inferredVariableNames = inferredVariables.map((variable)=>getVariableName(variable.key));
-        const sortedVariableNames = inferredVariableNames.sort(inferCompareFunction);
-        return sortedVariableNames[0];
+        const inferredVariables = variables.filter((variable)=>isInsideScope(variable, scope) && isIdenticalVariableValue(resolveValue(variable, getDefaultModeId(variable)), value));
+        const sortedVariables = inferredVariables.sort(inferCompareFunction);
+        return sortedVariables[0];
     }
     return {
-        getVariableName,
-        inferVariableName
+        getSlug,
+        resolveValue,
+        infer
     };
 }
 
@@ -10947,2018 +10307,4 @@ function getFigmaColorVariableNames(scopes) {
     return variables.filter((variable)=>scopes.includes(variable.name.split("/")[0])).map((variable)=>variable.name);
 }
 
-function toCssPixel(value) {
-    return `${value}px`;
-}
-function toCssRgba(color) {
-    if (color.a === 1) {
-        return `rgb(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)})`;
-    }
-    return `rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${color.a})`;
-}
-
-function createFrameTransformer$1({ propsTransformers }) {
-    return defineElementTransformer((node, traverse)=>{
-        const children = node.children;
-        const props = {
-            ...propsTransformers.radius(node, traverse),
-            ...propsTransformers.containerLayout(node, traverse),
-            ...propsTransformers.selfLayout(node, traverse),
-            ...propsTransformers.frameFill(node, traverse),
-            ...propsTransformers.stroke(node, traverse)
-        };
-        return createElement("Frame", props, children.map((child)=>traverse(child)));
-    });
-}
-
-function createInstanceTransformer$1({ frameTransformer }) {
-    const transform = defineElementTransformer((node, traverse)=>{
-        return frameTransformer(node, traverse);
-    });
-    return transform;
-}
-
-function createContainerLayoutPropsTransformer$1(valueTransformer) {
-    return createPropsTransformer({
-        handlers: {
-            layoutMode: ({ layoutMode })=>layoutMode ?? "NONE",
-            primaryAxisAlignItems: ({ primaryAxisAlignItems })=>primaryAxisAlignItems,
-            counterAxisAlignItems: ({ counterAxisAlignItems })=>counterAxisAlignItems,
-            layoutWrap: ({ layoutWrap })=>layoutWrap,
-            itemSpacing: ({ itemSpacing })=>itemSpacing,
-            paddingTop: (node)=>valueTransformer.getFormattedValue.paddingTop(node),
-            paddingBottom: (node)=>valueTransformer.getFormattedValue.paddingBottom(node),
-            paddingLeft: (node)=>valueTransformer.getFormattedValue.paddingLeft(node),
-            paddingRight: (node)=>valueTransformer.getFormattedValue.paddingRight(node)
-        },
-        shorthands: {
-            horizontalPadding: [
-                "paddingLeft",
-                "paddingRight"
-            ],
-            verticalPadding: [
-                "paddingTop",
-                "paddingBottom"
-            ]
-        },
-        defaults: {}
-    });
-}
-function createSelfLayoutPropsTransformer$1(valueTransformer) {
-    return createPropsTransformer({
-        handlers: {
-            layoutGrow: ({ layoutGrow })=>layoutGrow,
-            layoutAlign: ({ layoutAlign })=>layoutAlign,
-            layoutSizingVertical: ({ layoutSizingVertical })=>layoutSizingVertical,
-            layoutSizingHorizontal: ({ layoutSizingHorizontal })=>layoutSizingHorizontal,
-            width: (node)=>valueTransformer.getFormattedValue.width(node),
-            height: (node)=>valueTransformer.getFormattedValue.height(node),
-            minWidth: (node)=>valueTransformer.getFormattedValue.minWidth(node),
-            minHeight: (node)=>valueTransformer.getFormattedValue.minHeight(node),
-            maxWidth: (node)=>valueTransformer.getFormattedValue.maxWidth(node),
-            maxHeight: (node)=>valueTransformer.getFormattedValue.maxHeight(node)
-        },
-        defaults: {}
-    });
-}
-function createRadiusPropsTransformer$1(valueTransformer) {
-    return createPropsTransformer({
-        handlers: {
-            topLeftRadius: (node)=>valueTransformer.getFormattedValue.topLeftRadius(node),
-            topRightRadius: (node)=>valueTransformer.getFormattedValue.topRightRadius(node),
-            bottomLeftRadius: (node)=>valueTransformer.getFormattedValue.bottomLeftRadius(node),
-            bottomRightRadius: (node)=>valueTransformer.getFormattedValue.bottomRightRadius(node)
-        },
-        shorthands: {
-            cornerRadius: [
-                "topLeftRadius",
-                "topRightRadius",
-                "bottomLeftRadius",
-                "bottomRightRadius"
-            ]
-        },
-        defaults: {
-            cornerRadius: 0,
-            topLeftRadius: 0,
-            topRightRadius: 0,
-            bottomLeftRadius: 0,
-            bottomRightRadius: 0
-        }
-    });
-}
-function createFrameFillPropsTransformer$1(valueTransformer) {
-    return definePropsTransformer((node)=>{
-        const fill = valueTransformer.getFormattedValue.frameFill(node);
-        return {
-            fill
-        };
-    });
-}
-function createShapeFillPropsTransformer$1(valueTransformer) {
-    return definePropsTransformer((node)=>{
-        const fill = valueTransformer.getFormattedValue.shapeFill(node);
-        return {
-            fill
-        };
-    });
-}
-function createTextFillPropsTransformer$1(valueTransformer) {
-    return definePropsTransformer((node)=>{
-        const fill = valueTransformer.getFormattedValue.textFill(node);
-        return {
-            fill
-        };
-    });
-}
-function createStrokePropsTransformer$1(valueTransformer) {
-    return definePropsTransformer((node)=>{
-        const stroke = valueTransformer.getFormattedValue.stroke(node);
-        const strokeWeight = node.strokeWeight;
-        return {
-            stroke,
-            strokeWeight
-        };
-    });
-}
-function createTypeStylePropsTransformer$1({ valueTransformer, styleService }) {
-    return definePropsTransformer((node)=>{
-        const styleName = node.textStyleKey ? styleService.getStyleName(node.textStyleKey) : undefined;
-        const maxLines = node.style.textTruncation === "ENDING" ? node.style.maxLines ?? undefined : undefined;
-        if (styleName) {
-            return {
-                textStyle: styleName,
-                maxLines
-            };
-        }
-        return {
-            fontSize: valueTransformer.getFormattedValue.fontSize(node),
-            fontWeight: valueTransformer.getFormattedValue.fontWeight(node),
-            lineHeight: valueTransformer.getFormattedValue.lineHeight(node),
-            maxLines
-        };
-    });
-}
-
-function createRectangleTransformer$1({ propsTransformers }) {
-    return defineElementTransformer((node, traverse)=>{
-        return createElement("Rectangle", {
-            ...propsTransformers.selfLayout(node, traverse)
-        });
-    });
-}
-function createVectorTransformer$1({ propsTransformers }) {
-    return defineElementTransformer((node, traverse)=>{
-        return createElement("Vector", {
-            ...propsTransformers.selfLayout(node, traverse),
-            ...propsTransformers.radius(node, traverse),
-            ...propsTransformers.stroke(node, traverse),
-            ...propsTransformers.shapeFill(node, traverse)
-        }, [], "Vector Node Placeholder");
-    });
-}
-function createBooleanOperationTransformer$1({ propsTransformers }) {
-    return defineElementTransformer((node, traverse)=>{
-        return createElement("BooleanOperation", {
-            ...propsTransformers.selfLayout(node, traverse),
-            ...propsTransformers.radius(node, traverse),
-            ...propsTransformers.stroke(node, traverse),
-            ...propsTransformers.shapeFill(node, traverse)
-        }, node.children.map(traverse));
-    });
-}
-
-function createTextTransformer$1({ propsTransformers }) {
-    return defineElementTransformer((node, traverse)=>{
-        const hasMultipleFills = node.fills.length > 1;
-        const fillProps = propsTransformers.textFill(node, traverse);
-        const typeStyleProps = propsTransformers.typeStyle(node, traverse);
-        const props = compactObject({
-            ...typeStyleProps,
-            ...fillProps
-        });
-        return createElement("Text", props, node.characters, hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : "");
-    });
-}
-
-const styleService$1 = createStyleService({
-    styleRepository,
-    styleNameTransformer: ({ slug })=>slug[slug.length - 1]
-});
-const variableService$1 = createVariableService({
-    variableRepository,
-    variableNameTransformer: ({ slug })=>slug.filter((s)=>s !== "dimension").map((s)=>s.replaceAll(",", "_")).join("/"),
-    inferCompareFunction: (name1, name2)=>{
-        const scoreFn = (name)=>{
-            let score = 0;
-            if (name.includes("bg")) {
-                score += 100;
-            }
-            if (name.includes("fg")) {
-                score += 100;
-            }
-            if (name.includes("stroke")) {
-                score += 100;
-            }
-            if (name.includes("spacing-x")) {
-                score -= 100;
-            }
-            if (name.includes("spacing-y")) {
-                score -= 100;
-            }
-            if (name.endsWith("pressed")) {
-                score -= 100;
-            }
-            return score;
-        };
-        return scoreFn(name2) - scoreFn(name1);
-    }
-});
-function createContext$1(options) {
-    const { shouldInferVariableName, shouldInferAutoLayout } = options;
-    const valueTransformer = createValueTransformer({
-        variableService: variableService$1,
-        formatters: {
-            color: (value)=>toCssRgba(value),
-            dimension: (value)=>value,
-            fontDimension: (value)=>value,
-            fontWeight: (value)=>value
-        },
-        shouldInferVariableName
-    });
-    const containerLayoutPropsTransformer = createContainerLayoutPropsTransformer$1(valueTransformer);
-    const selfLayoutPropsTransformer = createSelfLayoutPropsTransformer$1(valueTransformer);
-    const frameFillPropsTransformer = createFrameFillPropsTransformer$1(valueTransformer);
-    const shapeFillPropsTransformer = createShapeFillPropsTransformer$1(valueTransformer);
-    const textFillPropsTransformer = createTextFillPropsTransformer$1(valueTransformer);
-    const radiusPropsTransformer = createRadiusPropsTransformer$1(valueTransformer);
-    const strokePropsTransformer = createStrokePropsTransformer$1(valueTransformer);
-    const typeStylePropsTransformer = createTypeStylePropsTransformer$1({
-        valueTransformer,
-        styleService: styleService$1
-    });
-    const propsTransformers = {
-        containerLayout: containerLayoutPropsTransformer,
-        selfLayout: selfLayoutPropsTransformer,
-        frameFill: frameFillPropsTransformer,
-        shapeFill: shapeFillPropsTransformer,
-        textFill: textFillPropsTransformer,
-        radius: radiusPropsTransformer,
-        stroke: strokePropsTransformer,
-        typeStyle: typeStylePropsTransformer
-    };
-    const frameTransformer = createFrameTransformer$1({
-        propsTransformers
-    });
-    const instanceTransformer = createInstanceTransformer$1({
-        frameTransformer
-    });
-    const textTransformer = createTextTransformer$1({
-        propsTransformers
-    });
-    const rectangleTransformer = createRectangleTransformer$1({
-        propsTransformers
-    });
-    const vectorTransformer = createVectorTransformer$1({
-        propsTransformers
-    });
-    const booleanOperationTransformer = createBooleanOperationTransformer$1({
-        propsTransformers
-    });
-    const codegenTransformer = createCodegenTransformer({
-        frameTransformer,
-        textTransformer,
-        rectangleTransformer,
-        instanceTransformer,
-        vectorTransformer,
-        booleanOperationTransformer,
-        shouldInferAutoLayout
-    });
-    return codegenTransformer;
-}
-
-var index$1 = {
-  __proto__: null,
-  createBooleanOperationTransformer: createBooleanOperationTransformer$1,
-  createContainerLayoutPropsTransformer: createContainerLayoutPropsTransformer$1,
-  createContext: createContext$1,
-  createFrameFillPropsTransformer: createFrameFillPropsTransformer$1,
-  createFrameTransformer: createFrameTransformer$1,
-  createInstanceTransformer: createInstanceTransformer$1,
-  createRadiusPropsTransformer: createRadiusPropsTransformer$1,
-  createRectangleTransformer: createRectangleTransformer$1,
-  createSelfLayoutPropsTransformer: createSelfLayoutPropsTransformer$1,
-  createShapeFillPropsTransformer: createShapeFillPropsTransformer$1,
-  createStrokePropsTransformer: createStrokePropsTransformer$1,
-  createTextFillPropsTransformer: createTextFillPropsTransformer$1,
-  createTextTransformer: createTextTransformer$1,
-  createTypeStylePropsTransformer: createTypeStylePropsTransformer$1,
-  createVectorTransformer: createVectorTransformer$1
-};
-
-function createContainerLayoutPropsTransformer(valueTransformer) {
-    return createPropsTransformer({
-        handlers: {
-            direction: ({ layoutMode })=>match(layoutMode).with("HORIZONTAL", ()=>"row").with("VERTICAL", ()=>"column").with("NONE", ()=>undefined).with(undefined, ()=>undefined).exhaustive(),
-            justify: ({ primaryAxisAlignItems })=>match(primaryAxisAlignItems).with("MIN", ()=>"flex-start").with("CENTER", ()=>"center").with("MAX", ()=>"flex-end").with("SPACE_BETWEEN", ()=>"space-between").with(undefined, ()=>undefined).exhaustive(),
-            align: ({ counterAxisAlignItems, children })=>{
-                const isStretch = children.every((child)=>{
-                    if (!("layoutAlign" in child)) {
-                        return false;
-                    }
-                    return child.layoutAlign === "STRETCH";
-                });
-                if (isStretch) {
-                    return "stretch";
-                }
-                return match(counterAxisAlignItems).with("MIN", ()=>"flex-start").with("CENTER", ()=>"center").with("MAX", ()=>"flex-end").with("BASELINE", ()=>"baseline").with(undefined, ()=>undefined).exhaustive();
-            },
-            wrap: ({ layoutWrap })=>match(layoutWrap).with("WRAP", ()=>true).with("NO_WRAP", ()=>"nowrap").with(undefined, ()=>undefined).exhaustive(),
-            gap: (node)=>{
-                if (node.children.length <= 1) {
-                    return undefined;
-                }
-                if (node.primaryAxisAlignItems === "SPACE_BETWEEN") {
-                    return undefined;
-                }
-                return valueTransformer.getFormattedValue.itemSpacing(node);
-            },
-            pt: (node)=>valueTransformer.getFormattedValue.paddingTop(node),
-            pb: (node)=>valueTransformer.getFormattedValue.paddingBottom(node),
-            pl: (node)=>valueTransformer.getFormattedValue.paddingLeft(node),
-            pr: (node)=>valueTransformer.getFormattedValue.paddingRight(node)
-        },
-        shorthands: {
-            p: [
-                "pt",
-                "pb",
-                "pl",
-                "pr"
-            ],
-            px: [
-                "pl",
-                "pr"
-            ],
-            py: [
-                "pt",
-                "pb"
-            ]
-        },
-        defaults: {
-            justify: "flex-start",
-            align: "stretch",
-            wrap: "nowrap",
-            gap: 0,
-            p: 0,
-            px: 0,
-            py: 0,
-            pb: 0,
-            pl: 0,
-            pr: 0,
-            pt: 0
-        }
-    });
-}
-function createSelfLayoutPropsTransformer(valueTransformer) {
-    return createPropsTransformer({
-        handlers: {
-            grow: ({ layoutGrow })=>layoutGrow === 1 ? true : layoutGrow,
-            alignSelf: ({ layoutAlign })=>match(layoutAlign).with("STRETCH", ()=>"stretch").with("INHERIT", ()=>undefined).with("MIN", ()=>undefined) // Deprecated in Figma
-                .with("CENTER", ()=>undefined) // Deprecated in Figma
-                .with("MAX", ()=>undefined) // Deprecated in Figma
-                .with(undefined, ()=>undefined).exhaustive(),
-            height: (node)=>node.layoutSizingVertical === "FIXED" ? valueTransformer.getFormattedValue.height(node) : undefined,
-            width: (node)=>node.layoutSizingHorizontal === "FIXED" ? valueTransformer.getFormattedValue.width(node) : undefined,
-            minHeight: (node)=>node.layoutSizingVertical === "HUG" ? valueTransformer.getFormattedValue.minHeight(node) : undefined,
-            maxHeight: (node)=>node.layoutSizingVertical === "HUG" ? valueTransformer.getFormattedValue.maxHeight(node) : undefined,
-            minWidth: (node)=>node.layoutSizingHorizontal === "HUG" ? valueTransformer.getFormattedValue.minWidth(node) : undefined,
-            maxWidth: (node)=>node.layoutSizingHorizontal === "HUG" ? valueTransformer.getFormattedValue.maxWidth(node) : undefined
-        },
-        defaults: {
-            grow: 0
-        }
-    });
-}
-function createIconSelfLayoutPropsTransformer(valueTransformer) {
-    return createPropsTransformer({
-        handlers: {
-            size: (node)=>valueTransformer.getFormattedValue.width(node)
-        }
-    });
-}
-function createRadiusPropsTransformer(valueTransformer) {
-    return createPropsTransformer({
-        handlers: {
-            borderTopLeftRadius: (node)=>valueTransformer.getFormattedValue.topLeftRadius(node),
-            borderTopRightRadius: (node)=>valueTransformer.getFormattedValue.topRightRadius(node),
-            borderBottomLeftRadius: (node)=>valueTransformer.getFormattedValue.bottomLeftRadius(node),
-            borderBottomRightRadius: (node)=>valueTransformer.getFormattedValue.bottomRightRadius(node)
-        },
-        shorthands: {
-            borderRadius: [
-                "borderTopLeftRadius",
-                "borderTopRightRadius",
-                "borderBottomLeftRadius",
-                "borderBottomRightRadius"
-            ]
-        },
-        defaults: {
-            borderRadius: 0,
-            borderTopLeftRadius: 0,
-            borderTopRightRadius: 0,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0
-        }
-    });
-}
-function createTypeStylePropsTransformer({ valueTransformer, styleService }) {
-    return definePropsTransformer((node)=>{
-        const styleName = node.textStyleKey ? styleService.getStyleName(node.textStyleKey) : undefined;
-        const maxLines = node.style.textTruncation === "ENDING" ? node.style.maxLines ?? undefined : undefined;
-        if (styleName) {
-            return {
-                textStyle: styleName,
-                maxLines
-            };
-        }
-        return {
-            fontSize: valueTransformer.getFormattedValue.fontSize(node),
-            fontWeight: valueTransformer.getFormattedValue.fontWeight(node),
-            lineHeight: valueTransformer.getFormattedValue.lineHeight(node),
-            maxLines
-        };
-    });
-}
-function createFrameFillPropsTransformer(valueTransformer) {
-    return definePropsTransformer((node)=>{
-        const bg = valueTransformer.getFormattedValue.frameFill(node);
-        return {
-            bg
-        };
-    });
-}
-function createShapeFillPropsTransformer(valueTransformer) {
-    return definePropsTransformer((node)=>{
-        const color = valueTransformer.getFormattedValue.shapeFill(node);
-        return {
-            color
-        };
-    });
-}
-function createTextFillPropsTransformer(valueTransformer) {
-    return definePropsTransformer((node)=>{
-        const color = valueTransformer.getFormattedValue.textFill(node);
-        return {
-            color
-        };
-    });
-}
-function createStrokePropsTransformer(valueTransformer) {
-    return definePropsTransformer((node)=>{
-        const borderColor = valueTransformer.getFormattedValue.stroke(node);
-        const borderWidth = borderColor ? node.strokeWeight : undefined;
-        return {
-            borderColor,
-            borderWidth
-        };
-    });
-}
-
-function createRectangleTransformer({ propsTransformers }) {
-    return defineElementTransformer((node, traverse)=>{
-        return createElement("Box", {
-            ...propsTransformers.selfLayout(node, traverse),
-            background: "palette.gray200"
-        }, undefined, "Rectangle Node Placeholder");
-    });
-}
-function createVectorTransformer() {
-    return defineElementTransformer(()=>{
-        return createElement("svg", {}, [], "Vector Node Placeholder");
-    });
-}
-function createBooleanOperationTransformer() {
-    return defineElementTransformer(()=>{
-        return createElement("svg", {}, [], "Boolean Operation Node Placeholder");
-    });
-}
-
-function createFrameTransformer({ propsTransformers }) {
-    function inferLayoutComponent(props, isFlex) {
-        if (!isFlex) {
-            return "Box";
-        }
-        if (props.direction === "column") {
-            return "VStack";
-        }
-        return "HStack";
-    }
-    return defineElementTransformer((node, traverse)=>{
-        const children = node.children;
-        const transformedChildren = children.map(traverse);
-        const isFlex = node.layoutMode === "HORIZONTAL" || node.layoutMode === "VERTICAL";
-        const props = {
-            ...propsTransformers.radius(node, traverse),
-            ...isFlex ? propsTransformers.containerLayout(node, traverse) : {},
-            ...propsTransformers.selfLayout(node, traverse),
-            ...propsTransformers.frameFill(node, traverse),
-            ...propsTransformers.stroke(node, traverse)
-        };
-        const isStretch = props.align === undefined || props.align === "stretch";
-        const processedChildren = isStretch ? transformedChildren.map((child)=>child ? cloneElement(child, {
-                alignSelf: undefined
-            }) : child) : transformedChildren;
-        const layoutComponent = inferLayoutComponent(props, isFlex);
-        if (layoutComponent === "VStack") {
-            const { direction, ...rest } = props;
-            return createElement("VStack", rest, processedChildren);
-        }
-        if (layoutComponent === "HStack") {
-            const { direction, ...rest } = props;
-            return createElement("HStack", rest, processedChildren);
-        }
-        if (layoutComponent === "Box") {
-            return createElement("Box", props, processedChildren);
-        }
-    });
-}
-
-function createInstanceTransformer({ iconService, ignoredComponentKeys, propsTransformers, componentTransformers, frameTransformer }) {
-    const transformIconColorProps = definePropsTransformer((node, traverse)=>{
-        if (node.children.length === 0) {
-            throw new Error("Node has no children");
-        }
-        const vectors = node.children.filter((child)=>child.type === "VECTOR" || child.type === "BOOLEAN_OPERATION");
-        const colorProps = vectors.map((vector)=>propsTransformers.shapeFill(vector, traverse));
-        const fills = new Set(colorProps.map((props)=>props.color).filter((color)=>color !== undefined));
-        // If there are more than 1 color, colors are likely pre-defined in the icon component; we should ignore the color prop.
-        if (fills.size > 1) {
-            return {};
-        }
-        return {
-            color: fills.values().next().value
-        };
-    });
-    const transform = defineElementTransformer((node, traverse)=>{
-        const { componentKey, componentSetKey } = node;
-        if (ignoredComponentKeys?.has(componentKey)) {
-            return undefined;
-        }
-        if (iconService?.isIconComponent(componentKey)) {
-            const tagName = iconService.createIconTagName(componentKey);
-            const props = {
-                ...propsTransformers.iconSelfLayout(node, traverse),
-                ...transformIconColorProps(node, traverse)
-            };
-            return createElement("Icon", {
-                svg: createElement(tagName),
-                ...props
-            });
-        }
-        const componentTransformer = componentSetKey ? componentTransformers[componentSetKey] : componentTransformers[componentKey];
-        if (componentTransformer) {
-            return componentTransformer.transform(node);
-        }
-        return frameTransformer(node, traverse);
-    });
-    return transform;
-}
-
-function createTextTransformer({ propsTransformers }) {
-    return defineElementTransformer((node, traverse)=>{
-        const hasMultipleFills = node.fills.length > 1;
-        const fillProps = propsTransformers.textFill(node, traverse);
-        const typeStyleProps = propsTransformers.typeStyle(node, traverse);
-        const props = compactObject({
-            ...typeStyleProps,
-            ...fillProps
-        });
-        return createElement("Text", props, node.characters.replace(/\n/g, "<br />"), hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : "");
-    });
-}
-
-const metadata$v = {
-    "key": "a3d58bb8540600878742cdcf2608a4b3851667ec"};
-
-const metadata$u = {
-    "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89"};
-
-const metadata$t = {
-    "key": "3d21594ef116e94a9465d507447b858aea062575"};
-
-const metadata$s = {
-    "key": "7c29b70b7e71618e1894c26f61f336de2730d76e"};
-
-const metadata$r = {
-    "key": "d71644aeba2e29deda366798fdfe35977166d120"};
-
-const metadata$q = {
-    "key": "019467fdad2192abb48699dcfb79e344df04b799"};
-
-const metadata$p = {
-    "key": "04609a35d47a1a0ef4904b3c25f79451892a85a1"};
-
-const metadata$o = {
-    "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe"};
-
-const metadata$n = {
-    "key": "94a2f6957a86f8ae3b8c7ca200dfcd5e29f6075b"};
-
-const metadata$m = {
-    "key": "d098159beacf7713e9116f0ef38d8a20f64ec84f"};
-
-const metadata$l = {
-    "key": "5780d56fc2f9bc4bbd6bc3db93949d8a8b7b7563"};
-
-const metadata$k = {
-    "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172"};
-
-const metadata$j = {
-    "key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb"};
-
-const metadata$i = {
-    "key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f"};
-
-const metadata$h = {
-    "key": "1974b94703032585bb9e20bd54743e01094b965c"};
-
-const metadata$g = {
-    "key": "804b327c091278a40d5891939eaed90bb2889659"};
-
-const metadata$f = {
-    "key": "808206c07408aa1056ec85a55925e9844e9265c2"};
-
-const metadata$e = {
-    "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1"};
-
-const metadata$d = {
-    "key": "ac5331cec7a2c75b671df5b85ef247dfd820dd2f"};
-
-const metadata$c = {
-    "key": "88b2399c930c85f9ce2972163a078bc684b84bbe"};
-
-const metadata$b = {
-    "key": "6e6779a372cab2485a0e25529bc4dbc9932a7346"};
-
-const metadata$a = {
-    "key": "ec43e4e881f7048e95601f8b58c01a0905a174e0"};
-
-const metadata$9 = {
-    "key": "3ad7133ba52755867f42f9232375f75639e00d58"};
-
-const metadata$8 = {
-    "key": "38722ffeb4c966256a709155e8ddac50c93d7c60"};
-
-const metadata$7 = {
-    "key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a"};
-
-const metadata$6 = {
-    "key": "81b17fb8c7d731a19cf8d36a8605559d41414eca"};
-
-const metadata$5 = {
-    "key": "c07bfe331cf214375fce9ad47cb6fdb459d1fb1b"};
-
-const metadata$4 = {
-    "key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3"};
-
-const metadata$3 = {
-    "key": "ffe33411fb8796f7a95d3637b90150007f0dd954"};
-
-const metadata$2 = {
-    "key": "601f788792916250e33d04bd3165dee1404342df"};
-
-const metadata$1 = {
-    "key": "c49873c37a639f0dffdea4efd0eb43760d66c141"};
-
-const metadata = {
-    "key": "1d240ee5fd7a56879713e69cbea1b6f006f0ea22"};
-
-// TODO: move this file to relevant directory
-function handleSizeProp(size) {
-    switch(size){
-        case "XSmall":
-            return "xsmall";
-        case "Small":
-            return "small";
-        case "Medium":
-            return "medium";
-        case "Large":
-            return "large";
-        case "XLarge":
-            return "xlarge";
-        default:
-            return camelCase(size);
-    }
-}
-
-const createActionButtonTransformer = (ctx)=>defineComponentTransformer(metadata$u.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
-                layout: "iconOnly",
-                children: [
-                    createElement("Icon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Icon#7574:0"].componentKey))
-                    })
-                ]
-            })).with("Icon First", ()=>({
-                layout: "withText",
-                children: [
-                    createElement("PrefixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Prefix Icon#5987:305"].componentKey))
-                    }),
-                    props["Label#5987:61"].value
-                ]
-            })).with("Icon Last", ()=>({
-                layout: "withText",
-                children: [
-                    props["Label#5987:61"].value,
-                    createElement("SuffixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Suffix Icon#5987:244"].componentKey))
-                    })
-                ]
-            })).with("Text Only", ()=>({
-                layout: "withText",
-                children: props["Label#5987:61"].value
-            })).exhaustive();
-        const commonProps = {
-            ...states.includes("Disabled") && {
-                disabled: true
-            },
-            ...states.includes("Loading") && {
-                loading: true
-            },
-            size: handleSizeProp(props.Size.value),
-            variant: camelCase(props.Variant.value),
-            layout
-        };
-        return createElement("ActionButton", commonProps, children);
-    });
-
-const createActionChipTransformer = (ctx)=>defineComponentTransformer(metadata$t.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
-                layout: "iconOnly",
-                children: [
-                    createElement("Icon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Icon#8714:0"].componentKey))
-                    })
-                ]
-            })).with("Icon First", ()=>({
-                layout: "withText",
-                children: [
-                    createElement("PrefixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Prefix Icon#8711:0"].componentKey))
-                    }),
-                    props["Label#7185:0"].value
-                ]
-            })).with("Icon Last", ()=>({
-                layout: "withText",
-                children: [
-                    props["Label#7185:0"].value,
-                    createElement("SuffixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Suffix Icon#8711:3"].componentKey))
-                    })
-                ]
-            })).with("Icon Both", ()=>({
-                layout: "withText",
-                children: [
-                    createElement("PrefixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Prefix Icon#8711:0"].componentKey))
-                    }),
-                    props["Label#7185:0"].value,
-                    createElement("SuffixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Suffix Icon#8711:3"].componentKey))
-                    })
-                ]
-            })).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 createElement("ActionChip", commonProps, children);
-    });
-
-const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
-const createActionSheetItemTransformer = (_ctx)=>defineComponentTransformer(ACTION_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            label: props["Label#15420:4"].value,
-            tone: camelCase(props.Tone.value),
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("ActionSheetItem", commonProps);
-    });
-const createActionSheetTransformer = (ctx)=>{
-    const actionSheetItemTransformer = createActionSheetItemTransformer();
-    return defineComponentTransformer(metadata$s.key, (node)=>{
-        const { componentProperties: props } = node;
-        const contentProps = match(props.Header.value).with("None", ()=>({
-                title: undefined,
-                description: undefined
-            })).with("Title Only", ()=>({
-                title: props["Title#15641:37"].value,
-                description: undefined
-            })).with("Description Only", ()=>({
-                title: undefined,
-                description: props["Description#15641:70"].value
-            })).with("Title With Description", ()=>({
-                title: props["Title#15641:37"].value,
-                description: props["Description#15641:70"].value
-            })).exhaustive();
-        const items = findAllInstances({
-            node,
-            key: actionSheetItemTransformer.key
-        });
-        const contentChildren = items.map(actionSheetItemTransformer.transform);
-        const content = createElement("ActionSheetContent", contentProps, contentChildren, contentProps.title ? "" : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
-        const trigger = createElement("ActionSheetTrigger", {
-            asChild: true
-        }, createElement("ActionButton", undefined, "열기", "ActionSheet을 여는 요소를 제공해주세요."));
-        return createElement("ActionSheet", undefined, [
-            trigger,
-            content
-        ]);
-    });
-};
-
-const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
-const createAppBarMainTransformer = (_ctx)=>defineComponentTransformer(APP_BAR_MAIN_KEY, ({ componentProperties: props })=>{
-        const { title, subtitle, layout } = match(props.Type.value).with("Title", ()=>({
-                title: props["Title#16944:0"].value,
-                subtitle: undefined,
-                layout: undefined
-            })).with("Title-Subtitle", ()=>({
-                title: props["Title#16944:0"].value,
-                subtitle: props["Subtitle#16958:9"].value,
-                layout: "withSubtitle"
-            })).otherwise(()=>({
-                title: undefined,
-                subtitle: undefined,
-                layout: undefined
-            }));
-        const commonProps = {
-            title,
-            subtitle,
-            layout
-        };
-        return createElement("AppBarMain", commonProps, undefined, title === undefined ? "Title을 제공해주세요." : undefined);
-    });
-const APP_BAR_LEFT_KEY = "e5d2e47052a22395db79f195a0991a570dc1b6c9";
-const createAppBarLeftTransformer = (ctx)=>defineComponentTransformer(APP_BAR_LEFT_KEY, (node)=>{
-        const props = node.componentProperties;
-        const children = (()=>{
-            switch(props.Action.value){
-                case "Back":
-                    return createElement("AppBarBackButton", undefined);
-                case "Close":
-                    return createElement("AppBarCloseButton", undefined);
-                case "Other":
-                    {
-                        const iconNode = findOne(node, (child)=>child.type === "INSTANCE" && child.name === "Icon");
-                        const iconComponentKey = iconNode?.componentKey ?? undefined;
-                        return createElement("AppBarIconButton", undefined, iconComponentKey ? createElement(ctx.iconService.createIconTagName(iconComponentKey)) : undefined, iconComponentKey === undefined ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요." : "aria-label 또는 aria-labelledby를 제공해주세요.");
-                    }
-            }
-        })();
-        return createElement("AppBarLeft", undefined, children);
-    });
-const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
-const createAppBarRightTransformer = (ctx)=>defineComponentTransformer(APP_BAR_RIGHT_KEY, (node)=>{
-        const props = node.componentProperties;
-        const children = (()=>{
-            switch(props.Type.value){
-                case "1 Text":
-                    {
-                        const textNode = findOne(node, (child)=>child.type === "TEXT");
-                        return textNode?.characters;
-                    }
-                default:
-                    {
-                        const iconNodes = findAll(node, (child)=>child.type === "INSTANCE" && child.name === "Icon");
-                        const iconComponentKeys = iconNodes.map((iconNode)=>iconNode.componentKey);
-                        return iconComponentKeys.map((iconComponentKey)=>createElement("AppBarIconButton", undefined, iconComponentKey ? createElement(ctx.iconService.createIconTagName(iconComponentKey)) : undefined, iconComponentKey === undefined ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요." : "aria-label 또는 aria-labelledby를 제공해주세요."));
-                    }
-            }
-        })();
-        return createElement("AppBarRight", undefined, children);
-    });
-const createAppBarTransformer = (ctx)=>{
-    const appBarMainTransformer = createAppBarMainTransformer();
-    const appBarLeftTransformer = createAppBarLeftTransformer(ctx);
-    const appBarRightTransformer = createAppBarRightTransformer(ctx);
-    return defineComponentTransformer(metadata$5.key, (node)=>{
-        const props = node.componentProperties;
-        const theme = (()=>{
-            switch(props.OS.value){
-                case "Android":
-                    return "android";
-                case "iOS":
-                    return "cupertino";
-            }
-        })();
-        const tone = (()=>{
-            switch(props.Variant.value){
-                case "Layer Default":
-                    return "layer";
-                case "Transparent":
-                    return "transparent";
-            }
-        })();
-        const mainNode = findAllInstances({
-            key: appBarMainTransformer.key,
-            node
-        });
-        const onlyMainNode = mainNode.length === 1 ? mainNode[0] : undefined;
-        const main = onlyMainNode ? appBarMainTransformer.transform(onlyMainNode) : undefined;
-        const leftNode = findAllInstances({
-            key: appBarLeftTransformer.key,
-            node
-        });
-        const onlyLeftNode = leftNode.length === 1 ? leftNode[0] : undefined;
-        const left = onlyLeftNode ? appBarLeftTransformer.transform(onlyLeftNode) : undefined;
-        const rightNode = findAllInstances({
-            key: appBarRightTransformer.key,
-            node
-        });
-        const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
-        const right = onlyRightNode ? appBarRightTransformer.transform(onlyRightNode) : undefined;
-        return createElement("AppBar", {
-            theme,
-            tone
-        }, [
-            left,
-            main,
-            right
-        ].filter(Boolean), tone === "transparent" ? `<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.` : undefined);
-    });
-};
-
-const createIdentityPlaceholderTransformer = (_ctx)=>defineComponentTransformer(metadata$f.key, ({ componentProperties: props })=>{
-        const commonProps = {
-            identity: camelCase(props.Identity.value)
-        };
-        return createElement("IdentityPlaceholder", commonProps);
-    });
-
-const createAvatarTransformer = (ctx)=>{
-    const identityPlaceholderTransformer = createIdentityPlaceholderTransformer();
-    return defineComponentTransformer(metadata$r.key, (node)=>{
-        const [placeholder] = findAllInstances({
-            node,
-            key: identityPlaceholderTransformer.key
-        });
-        const { componentProperties: props } = node;
-        const avatarHasSrc = props["Show Image#71850:57"].value;
-        const commonProps = {
-            ...avatarHasSrc && {
-                // Placeholder
-                src: `https://placehold.co/${props.Size.value}x${props.Size.value}`
-            },
-            ...placeholder && {
-                fallback: identityPlaceholderTransformer.transform(placeholder)
-            },
-            size: props.Size.value
-        };
-        return createElement("Avatar", commonProps, props["Show Badge#1398:26"].value ? createElement("AvatarBadge", {}) : undefined, avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined);
-    });
-};
-
-const createAvatarStackTransformer = (ctx)=>{
-    const avatarTransformer = createAvatarTransformer();
-    return defineComponentTransformer(metadata$q.key, (node)=>{
-        const avatarNodes = findAllInstances({
-            node,
-            key: avatarTransformer.key
-        });
-        const { componentProperties: props } = node;
-        const commonProps = {
-            size: props.Size.value
-        };
-        const avatarStackChildren = avatarNodes.map(avatarTransformer.transform);
-        return createElement("AvatarStack", commonProps, avatarStackChildren);
-    });
-};
-
-const createBadgeTransformer = (_ctx)=>defineComponentTransformer(metadata$p.key, ({ componentProperties: props })=>{
-        const commonProps = {
-            size: handleSizeProp(props.Size.value),
-            tone: camelCase(props.Tone.value),
-            variant: camelCase(props.Variant.value),
-            shape: camelCase(props.Shape.value)
-        };
-        return createElement("Badge", commonProps, props["Label#1584:0"].value);
-    });
-
-const createCalloutTransformer = (ctx)=>defineComponentTransformer(metadata$o.key, ({ componentProperties: props, children })=>{
-        const tag = (()=>{
-            switch(props.Interaction.value){
-                case "Default":
-                    return "Callout";
-                case "Actionable":
-                    return "ActionableCallout";
-                case "Dismissible":
-                    return "DismissibleCallout";
-                default:
-                    return "Callout";
-            }
-        })();
-        const textNode = children.find((child)=>child.type === "TEXT");
-        if (!textNode) {
-            return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
-        }
-        const slices = textNode.segments;
-        let title;
-        let description;
-        let linkLabel;
-        switch(slices.length){
-            case 1:
-                {
-                    description = slices[0]?.characters.trim();
-                    break;
-                }
-            case 2:
-                {
-                    const firstSlice = slices[0];
-                    const secondSlice = slices[1];
-                    if (firstSlice?.style.fontWeight === 700) {
-                        title = firstSlice?.characters.trim();
-                        description = secondSlice?.characters.trim();
-                        break;
-                    }
-                    description = firstSlice?.characters.trim();
-                    if (tag !== "ActionableCallout") {
-                        linkLabel = secondSlice?.characters.trim();
-                    }
-                    break;
-                }
-            case 3:
-                {
-                    title = slices[0]?.characters.trim();
-                    description = slices[1]?.characters.trim();
-                    if (tag !== "ActionableCallout") {
-                        linkLabel = slices[2]?.characters.trim();
-                    }
-                    break;
-                }
-        }
-        const commonProps = {
-            tone: camelCase(props.Tone.value),
-            title,
-            description,
-            linkProps: {
-                children: linkLabel
-            },
-            ...props["Icon#12598:210"].value && {
-                prefixIcon: createElement(ctx.iconService.createIconTagName(props["Icon#12598:210"].componentKey))
-            }
-        };
-        return createElement(tag, commonProps);
-    });
-
-const createCheckboxTransformer = (_ctx)=>defineComponentTransformer(metadata$n.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            label: props["Label#49990:0"].value,
-            weight: camelCase(props.Weight.value),
-            variant: camelCase(props.Shape.value),
-            size: handleSizeProp(props.Size.value),
-            ...states.includes("Selected") && {
-                defaultChecked: true
-            },
-            ...states.includes("Indeterminate") && {
-                defaultChecked: true,
-                indeterminate: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("Checkbox", commonProps);
-    });
-
-const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
-const createChipTabsItemTransformer = (_ctx)=>defineComponentTransformer(CHIP_TABS_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            value: props["Label#8876:0"].value,
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
-    });
-const createChipTabsTransformer = (ctx)=>{
-    const chipTabsItemTransformer = createChipTabsItemTransformer();
-    return defineComponentTransformer(metadata$m.key, (node)=>{
-        const chipTabsItems = findAllInstances({
-            node,
-            key: chipTabsItemTransformer.key
-        });
-        const selectedChipTabsItem = chipTabsItems.find((chipTabsItem)=>chipTabsItem.componentProperties.State.value.split("-").includes("Selected"));
-        const chipTabsList = createElement("ChipTabsList", undefined, chipTabsItems.map(chipTabsItemTransformer.transform));
-        const commonProps = {
-            variant: camelCase(node.componentProperties.Variant.value),
-            ...selectedChipTabsItem && {
-                defaultValue: selectedChipTabsItem.componentProperties["Label#8876:0"].value
-            }
-        };
-        return createElement("ChipTabs", commonProps, chipTabsList);
-    });
-};
-
-const createControlChipTransformer = (ctx)=>defineComponentTransformer(metadata$l.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
-                layout: "iconOnly",
-                children: [
-                    createElement("Icon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Icon#8722:41"].componentKey))
-                    })
-                ]
-            })).with("Icon First", ()=>({
-                layout: "withText",
-                children: [
-                    createElement("PrefixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey))
-                    }),
-                    props["Label#7185:0"].value
-                ]
-            })).with("Icon Last", ()=>({
-                layout: "withText",
-                children: [
-                    props["Label#7185:0"].value,
-                    createElement("SuffixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey))
-                    })
-                ]
-            })).with("Icon Both", ()=>({
-                layout: "withText",
-                children: [
-                    createElement("PrefixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey))
-                    }),
-                    props["Label#7185:0"].value,
-                    createElement("SuffixIcon", {
-                        svg: createElement(ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey))
-                    })
-                ]
-            })).with("Text Only", ()=>({
-                layout: "withText",
-                children: props["Label#7185:0"].value
-            })).exhaustive();
-        const commonProps = {
-            size: handleSizeProp(props.Size.value),
-            layout,
-            ...states.includes("Selected") && {
-                defaultChecked: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            },
-            ...props["Show Count#7185:42"].value && {
-                count: Number(props["Count#7185:21"].value)
-            }
-        };
-        return createElement("ControlChip.Toggle", commonProps, children);
-    });
-
-const createErrorStateTransformer = (ctx)=>{
-    const actionButtonTransformer = createActionButtonTransformer(ctx);
-    return defineComponentTransformer(metadata$k.key, (node)=>{
-        const props = node.componentProperties;
-        const [actionButtonNode] = findAllInstances({
-            node,
-            key: actionButtonTransformer.key
-        });
-        const commonProps = {
-            variant: camelCase(props.Variant.value),
-            ...props.Layout.value === "With Title" && {
-                title: props["Title#16237:0"].value
-            },
-            description: props["Description#16237:5"].value,
-            ...actionButtonNode && {
-                primaryActionProps: {
-                    children: actionButtonTransformer.transform(actionButtonNode).children[0]
-                },
-                secondaryActionProps: {
-                    children: props["Secondary Action Label#17042:0"].value
-                }
-            }
-        };
-        return createElement("ErrorState", commonProps);
-    });
-};
-
-const EXTENDED_ACTION_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
-const createExtendedActionSheetItemTransformer = (ctx)=>defineComponentTransformer(EXTENDED_ACTION_SHEET_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            tone: camelCase(props.Tone.value),
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("ExtendedActionSheetItem", commonProps, [
-            props["Show Prefix Icon#17043:5"].value ? createElement("PrefixIcon", {
-                svg: createElement(ctx.iconService.createIconTagName(props["Prefix Icon#55948:0"].componentKey))
-            }) : undefined,
-            props["Label#55905:8"].value
-        ]);
-    });
-const EXTENDED_ACTION_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
-const createExtendedActionSheetGroupTransformer = (ctx)=>{
-    const extendedActionSheetItemTransformer = createExtendedActionSheetItemTransformer(ctx);
-    return defineComponentTransformer(EXTENDED_ACTION_SHEET_GROUP_KEY, (node)=>{
-        const items = findAllInstances({
-            node,
-            key: extendedActionSheetItemTransformer.key
-        });
-        const contentChildren = items.map(extendedActionSheetItemTransformer.transform);
-        return createElement("ExtendedActionSheetGroup", undefined, contentChildren);
-    });
-};
-const createExtendedActionSheetTransformer = (ctx)=>{
-    const extendedActionSheetGroupTransformer = createExtendedActionSheetGroupTransformer(ctx);
-    return defineComponentTransformer(metadata$j.key, (node)=>{
-        const { componentProperties: props } = node;
-        const groups = findAllInstances({
-            node,
-            key: extendedActionSheetGroupTransformer.key
-        });
-        const contentChildren = groups.map(extendedActionSheetGroupTransformer.transform);
-        const title = props["Show Title#17043:12"].value ? props["Title#14599:0"].value : undefined;
-        const content = createElement("ExtendedActionSheetContent", {
-            title
-        }, contentChildren, title ? undefined : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
-        const trigger = createElement("ExtendedActionSheetTrigger", {
-            asChild: true
-        }, createElement("ActionButton", undefined, "열기", "ExtendedActionSheet을 여는 요소를 제공해주세요."));
-        return createElement("ExtendedActionSheet", undefined, [
-            trigger,
-            content
-        ]);
-    });
-};
-
-const createExtendedFabTransformer = (ctx)=>defineComponentTransformer(metadata$i.key, ({ componentProperties: props })=>{
-        const commonProps = {
-            size: handleSizeProp(props.Size.value),
-            variant: camelCase(props.Variant.value)
-        };
-        return createElement("ExtendedFab", commonProps, [
-            createElement("PrefixIcon", {
-                svg: createElement(ctx.iconService.createIconTagName(props["Icon#28796:0"].componentKey))
-            }),
-            props["Label#28936:0"].value
-        ]);
-    });
-
-const createFabTransformer = (ctx)=>defineComponentTransformer(metadata$h.key, ({ componentProperties: props })=>{
-        return createElement("Fab", undefined, createElement(ctx.iconService.createIconTagName(props["Icon#28796:0"].componentKey)), "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
-    });
-
-const createHelpBubbleTransformer = (_ctx)=>defineComponentTransformer(metadata$g.key, ({ componentProperties: props })=>{
-        const placement = (()=>{
-            switch(props.Placement.value){
-                case "Bottom-Left":
-                    return "top-start";
-                case "Bottom-Center":
-                    return "top";
-                case "Bottom-Right":
-                    return "top-end";
-                case "Left-Top":
-                    return "right-start";
-                case "Left-Center":
-                    return "right";
-                case "Left-Bottom":
-                    return "right-end";
-                case "Top-Left":
-                    return "bottom-start";
-                case "Top-Center":
-                    return "bottom";
-                case "Top-Right":
-                    return "bottom-end";
-                case "Right-Top":
-                    return "left-start";
-                case "Right-Center":
-                    return "left";
-                case "Right-Bottom":
-                    return "left-end";
-            }
-        })();
-        const commonProps = {
-            title: props["Title#62535:0"].value,
-            ...props["Show Description#62499:0"].value && {
-                description: props["Description#62535:98"].value
-            },
-            showCloseButton: props["Show Close Button"].value === "True",
-            defaultOpen: true,
-            placement
-        };
-        return createElement("HelpBubbleTrigger", commonProps, createElement("ActionButton", undefined, "열기", "HelpBubble을 여는 요소를 제공해주세요."));
-    });
-
-const createInlineBannerTransformer = (ctx)=>defineComponentTransformer(metadata$e.key, (node)=>{
-        const { componentProperties: props } = node;
-        const tag = (()=>{
-            switch(props.Interaction.value){
-                case "Default":
-                    return "InlineBanner";
-                case "Actionable":
-                    return "ActionableInlineBanner";
-                case "Dismissible":
-                    return "DismissibleInlineBanner";
-                case "Link":
-                    return "InlineBanner";
-                default:
-                    return "InlineBanner";
-            }
-        })();
-        const textNode = findOne(node, (child)=>child.type === "TEXT" && child.name === "Label");
-        if (!textNode) {
-            return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
-        }
-        const slices = textNode.segments;
-        let title;
-        let description;
-        switch(slices.length){
-            case 1:
-                {
-                    description = slices[0]?.characters.trim();
-                    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");
-        const iconComponentKey = props["Show Icon#11840:27"] && iconNode ? iconNode.componentKey : undefined;
-        const prefixIcon = iconComponentKey ? createElement(ctx.iconService.createIconTagName(iconComponentKey)) : undefined;
-        const commonProps = {
-            variant: camelCase(props.Variant.value),
-            title,
-            description,
-            ...props.Interaction.value === "Link" && {
-                linkProps: {
-                    children: props["Link Label#1547:81"].value
-                }
-            },
-            prefixIcon
-        };
-        return createElement(tag, commonProps);
-    });
-
-const createMannerTempBadgeTransformer = (_ctx)=>defineComponentTransformer(metadata$d.key, ({ children })=>{
-        const textNode = children.find((child)=>child.type === "TEXT");
-        const commonProps = {
-            temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
-        };
-        return createElement("MannerTempBadge", commonProps);
-    });
-
-const createMultilineTextFieldTransformer = (_ctx)=>defineComponentTransformer(metadata$c.key, ({ componentProperties: props })=>{
-        const { Size: { value: size }, State: { value: state }, Filled: { value: filled }, "Show Header#870:0": { value: showHeader }, "Label#15327:323": { value: label }, "Show Indicator#1259:0": { value: showIndicator }, "Indicator#15327:286": { value: indicator }, "Placeholder#958:0": { value: placeholder }, "Filled Text#1304:0": { value: defaultValue }, "Show Footer#958:25": { value: showFooter }, "Show Description#958:50": { value: showDescription }, "Description#15327:212": { value: description }, "Show Character count#958:75": { value: showCharacterCount }, "Character Count#15327:360": { value: _characterCount }, "Max Character Count#15327:175": { value: maxCharacterCount } } = props;
-        const states = state.split("-");
-        const commonProps = {
-            size: handleSizeProp(size),
-            // header
-            ...showHeader && {
-                label
-            },
-            ...showHeader && showIndicator && {
-                indicator
-            },
-            // input
-            ...filled === "True" && {
-                defaultValue
-            },
-            ...states.includes("Invalid") && {
-                invalid: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            },
-            ...states.includes("Read Only") && {
-                readOnly: true
-            },
-            // footer
-            ...showFooter && showDescription && states.includes("Invalid") && {
-                // invalid인 경우 description을 error로 사용
-                errorMessage: description
-            },
-            ...showFooter && showDescription && !states.includes("Invalid") && {
-                // invalid가 아닌 경우 description을 description으로 사용
-                description
-            },
-            ...showFooter && showCharacterCount && {
-                maxGraphemeCount: Number(maxCharacterCount)
-            }
-        };
-        const inputProps = {
-            placeholder
-        };
-        const TextFieldChildren = createElement("TextFieldTextarea", inputProps);
-        return createElement("TextField", commonProps, TextFieldChildren);
-    });
-
-const createProgressCircleTransformer = (_ctx)=>defineComponentTransformer(metadata$b.key, ({ componentProperties: props })=>{
-        const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
-                value: undefined,
-                minValue: undefined,
-                maxValue: undefined
-            })).with("0%", ()=>({
-                value: 0,
-                minValue: 0,
-                maxValue: 100
-            })).with("25%", ()=>({
-                value: 25,
-                minValue: 0,
-                maxValue: 100
-            })).with("75%", ()=>({
-                value: 75,
-                minValue: 0,
-                maxValue: 100
-            })).with("100%", ()=>({
-                value: 100,
-                minValue: 0,
-                maxValue: 100
-            })).exhaustive();
-        const commonProps = {
-            value,
-            minValue,
-            maxValue,
-            size: props.Size.value,
-            tone: camelCase(props.Tone.value)
-        };
-        return createElement("ProgressCircle", commonProps);
-    });
-
-const createReactionButtonTransformer = (ctx)=>defineComponentTransformer(metadata$a.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            size: handleSizeProp(props.Size.value),
-            ...states.includes("Loading") && {
-                loading: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            },
-            ...states.includes("Selected") && {
-                defaultPressed: true
-            }
-        };
-        return createElement("ReactionButton", commonProps, [
-            createElement("PrefixIcon", {
-                svg: createElement(ctx.iconService.createIconTagName(props["Icon#12379:0"].componentKey))
-            }),
-            props["Label#6397:0"].value,
-            props["Show Count#6397:33"].value ? createElement("Count", {}, props["Count#15816:0"].value) : undefined
-        ]);
-    });
-
-const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
-const createSegmentedControlItemTransformer = (_ctx)=>defineComponentTransformer(SEGMENTED_CONTROL_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            value: props["Label#11366:15"].value,
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
-    });
-const createSegmentedControlTransformer = (ctx)=>{
-    const segmentedControlItemTransformer = createSegmentedControlItemTransformer();
-    return defineComponentTransformer(metadata$9.key, (node)=>{
-        const segments = findAllInstances({
-            node,
-            key: segmentedControlItemTransformer.key
-        });
-        const selectedSegment = segments.find((segment)=>segment.componentProperties.State.value.split("-").includes("Selected"));
-        const segmentedControlChildren = segments.map(segmentedControlItemTransformer.transform);
-        const commonProps = {
-            ...selectedSegment && {
-                defaultValue: selectedSegment.componentProperties["Label#11366:15"].value
-            }
-        };
-        return createElement("SegmentedControl", commonProps, segmentedControlChildren, "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
-    });
-};
-
-const createSelectBoxTransformer = (_ctx)=>defineComponentTransformer(metadata$8.key, ({ componentProperties: props })=>{
-        const tag = (()=>{
-            switch(props.Control.value){
-                case "Checkbox":
-                    return "CheckSelectBox";
-                case "Radio":
-                    return "RadioSelectBox";
-            }
-        })();
-        const states = props.State.value.split("-");
-        const commonProps = {
-            label: props["Label#3635:0"].value,
-            ...props["Show Description#3033:0"].value && {
-                description: props["Description #3033:5"].value
-            },
-            ...tag === "RadioSelectBox" && {
-                value: props["Label#3635:0"].value
-            },
-            ...tag === "CheckSelectBox" && states.includes("Selected") && {
-                defaultChecked: true
-            }
-        };
-        return createElement(tag, commonProps);
-    });
-const createSelectBoxGroupTransformer = (ctx)=>{
-    const selectBoxTransformer = createSelectBoxTransformer();
-    return defineComponentTransformer(metadata$v.key, (node)=>{
-        const props = node.componentProperties;
-        const tag = (()=>{
-            switch(props.Control.value){
-                case "Checkbox":
-                    return "CheckSelectBoxGroup";
-                case "Radio":
-                    return "RadioSelectBoxGroup";
-            }
-        })();
-        const selectBoxes = findAllInstances({
-            node,
-            key: selectBoxTransformer.key
-        });
-        const selectedSelectBox = selectBoxes.find((selectBox)=>selectBox.componentProperties.State.value.split("-").includes("Selected"));
-        const stack = createElement("Stack", {
-            gap: "spacingY.componentDefault"
-        }, selectBoxes.map(selectBoxTransformer.transform));
-        const commonProps = {
-            ...tag === "RadioSelectBoxGroup" && {
-                defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
-            }
-        };
-        return createElement(tag, commonProps, stack);
-    });
-};
-
-const createSkeletonTransformer = (ctx)=>defineComponentTransformer(metadata$7.key, ({ componentProperties: props, absoluteBoundingBox, layoutSizingHorizontal, layoutSizingVertical, boundVariables })=>{
-        const commonProps = {
-            radius: camelCase(props.Radius.value),
-            width: (()=>{
-                switch(layoutSizingHorizontal){
-                    case "FIXED":
-                        {
-                            const variableId = boundVariables?.size?.x?.id;
-                            if (variableId) return ctx.variableService.getVariableName(variableId);
-                            return `${absoluteBoundingBox?.width}px`;
-                        }
-                    case "FILL":
-                        return "full";
-                    default:
-                        return "full";
-                }
-            })(),
-            height: (()=>{
-                switch(layoutSizingVertical){
-                    case "FIXED":
-                        {
-                            const variableId = boundVariables?.size?.y?.id;
-                            if (variableId) return ctx.variableService.getVariableName(variableId);
-                            return `${absoluteBoundingBox?.height}px`;
-                        }
-                    case "FILL":
-                        return "full";
-                    default:
-                        return "full";
-                }
-            })()
-        };
-        return createElement("Skeleton", commonProps);
-    });
-
-const createSnackbarTransformer = (_ctx)=>defineComponentTransformer(metadata$6.key, ({ componentProperties: props })=>{
-        const commonProps = {
-            message: props["Message#1528:4"].value,
-            variant: camelCase(props.Variant.value),
-            ...props["Show Action Button#1528:0"].value && {
-                actionLabel: props["Action Button Label#1528:8"].value
-            }
-        };
-        // TODO: adapter.create({ render })
-        return createElement("Snackbar", commonProps);
-    });
-
-const createSwitchTransformer = (_ctx)=>defineComponentTransformer(metadata$4.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const size = handleSizeProp(props.Size.value);
-        const commonProps = {
-            size,
-            ...size === "small" && {
-                label: props["Label#15191:2"].value
-            },
-            ...states.includes("Selected") && {
-                defaultChecked: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("Switch", commonProps);
-    });
-
-const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
-const createTabsHugItemTransformer = (_ctx)=>defineComponentTransformer(TABS_HUG_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            value: props["Label#4478:2"].value,
-            ...props.Notification.value === "True" && {
-                alert: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
-    });
-const TABS_FILL_ITEM_KEY = "7275293344efb40ee9a3f5248ba2659b94a0b305";
-const createTabsFillItemTransformer = (_ctx)=>defineComponentTransformer(TABS_FILL_ITEM_KEY, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            value: props["Label#4478:2"].value,
-            ...props.Notification.value === "True" && {
-                alert: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
-    });
-const createTabsTransformer = (ctx)=>{
-    const tabsHugItemTransformer = createTabsHugItemTransformer();
-    const tabsFillItemTransformer = createTabsFillItemTransformer();
-    return defineComponentTransformer(metadata$3.key, (node)=>{
-        const { componentProperties: props, children } = node;
-        const mappedItems = children.map((child)=>{
-            if (child.type !== "INSTANCE") return null;
-            const componentKey = child.componentSetKey ? child.componentSetKey : child.componentKey;
-            if (componentKey === tabsHugItemTransformer.key) return {
-                triggerLayout: "hug",
-                node: child
-            };
-            if (componentKey === tabsFillItemTransformer.key) return {
-                triggerLayout: "fill",
-                node: child
-            };
-            return null;
-        });
-        const tabsItems = mappedItems.filter((item)=>item !== null);
-        const selectedTabsItem = tabsItems.find(({ node: { componentProperties } })=>componentProperties.State.value.split("-").includes("Selected"))?.node;
-        const tabTriggerList = createElement("TabsList", undefined, tabsItems.map(({ triggerLayout, node })=>{
-            switch(triggerLayout){
-                case "hug":
-                    return tabsHugItemTransformer.transform(node);
-                case "fill":
-                    return tabsFillItemTransformer.transform(node);
-            }
-        }));
-        const tabContents = tabsItems.map(({ node })=>{
-            const value = node.componentProperties["Label#4478:2"].value;
-            return createElement("TabsContent", {
-                value
-            }, "{/* TODO: 컨텐츠 추가 */}");
-        });
-        const commonProps = {
-            triggerLayout: camelCase(props.Layout.value),
-            size: handleSizeProp(props.Size.value),
-            ...selectedTabsItem && {
-                defaultValue: selectedTabsItem.componentProperties["Label#4478:2"].value
-            }
-        };
-        return createElement("TabsRoot", commonProps, [
-            tabTriggerList,
-            ...tabContents
-        ]);
-    });
-};
-
-const createTextButtonTransformer = (ctx)=>defineComponentTransformer(metadata$2.key, (node)=>{
-        const { componentProperties: props } = node;
-        const states = props.State.value.split("-");
-        const { prefixIcon, suffixIcon, children } = match(props.Layout.value).with("Icon First", ()=>({
-                prefixIcon: createElement(ctx.iconService.createIconTagName(props["Prefix Icon#7561:0"].componentKey)),
-                suffixIcon: undefined,
-                children: props["Label#6148:0"].value
-            })).with("Icon Last", ()=>{
-            const suffixIconNode = findOne(node, (node)=>node.type === "INSTANCE" && node.name === "Suffix Icon");
-            const suffixIconComponentKey = suffixIconNode?.componentKey;
-            return {
-                prefixIcon: undefined,
-                suffixIcon: suffixIconComponentKey ? createElement(ctx.iconService.createIconTagName(suffixIconComponentKey)) : undefined,
-                children: props["Label#6148:0"].value
-            };
-        }).exhaustive();
-        const commonProps = {
-            tone: camelCase(props.Tone.value),
-            size: handleSizeProp(props.Size.value),
-            prefixIcon,
-            suffixIcon,
-            ...states.includes("Disabled") && {
-                disabled: true
-            }
-        };
-        return createElement("TextButton", commonProps, children);
-    });
-
-const createTextFieldTransformer = (ctx)=>defineComponentTransformer(metadata$1.key, ({ componentProperties: props })=>{
-        const { Size: { value: size }, State: { value: state }, Filled: { value: filled }, "Show Header#870:0": { value: showHeader }, "Label#14964:0": { value: label }, "Show Indicator#1259:0": { value: showIndicator }, "Indicator#15327:249": { value: indicator }, "Show Prefix#958:125": { value: showPrefix }, "Show Prefix Icon#1267:50": { value: showPrefixIcon }, "Prefix Icon#1267:25": { componentKey: prefixIcon }, "Show Prefix Text#1267:0": { value: showPrefixText }, "Prefix Text#15327:101": { value: prefix }, "Placeholder#958:0": { value: placeholder }, "Filled Text#1304:0": { value: defaultValue }, "Show Suffix#958:100": { value: showSuffix }, "Show Suffix Icon#1267:75": { value: showSuffixIcon }, "Suffix Icon #1267:100": { componentKey: suffixIcon }, "Show Suffix Text#1267:125": { value: showSuffixText }, "Suffix Text#15327:138": { value: suffix }, "Show Footer#958:25": { value: showFooter }, "Show Description#958:50": { value: showDescription }, "Description#12626:5": { value: description }, "Show Character Count#958:75": { value: showCharacterCount }, "Character Count#15327:64": { value: _characterCount }, "Max Character Count#15327:27": { value: maxCharacterCount } } = props;
-        const states = state.split("-");
-        const commonProps = {
-            size: handleSizeProp(size),
-            // header
-            ...showHeader && {
-                label
-            },
-            ...showHeader && showIndicator && {
-                indicator
-            },
-            // input affixes
-            ...showPrefix && showPrefixIcon && {
-                prefixIcon: createElement(ctx.iconService.createIconTagName(prefixIcon))
-            },
-            ...showPrefix && showPrefixText && {
-                prefix
-            },
-            ...showSuffix && showSuffixIcon && {
-                suffixIcon: createElement(ctx.iconService.createIconTagName(suffixIcon))
-            },
-            ...showSuffix && showSuffixText && {
-                suffix
-            },
-            // input
-            ...filled === "True" && {
-                defaultValue
-            },
-            ...states.includes("Invalid") && {
-                invalid: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            },
-            ...states.includes("Read Only") && {
-                readOnly: true
-            },
-            // footer
-            ...showFooter && showDescription && states.includes("Invalid") && {
-                // invalid인 경우 description을 error로 사용
-                errorMessage: description
-            },
-            ...showFooter && showDescription && !states.includes("Invalid") && {
-                // invalid가 아닌 경우 description을 description으로 사용
-                description
-            },
-            ...showFooter && showCharacterCount && {
-                maxGraphemeCount: Number(maxCharacterCount)
-            }
-        };
-        const inputProps = {
-            placeholder
-        };
-        const TextFieldChildren = createElement("TextFieldInput", inputProps);
-        return createElement("TextField", commonProps, TextFieldChildren);
-    });
-
-const createToggleButtonTransformer = (ctx)=>defineComponentTransformer(metadata.key, ({ componentProperties: props })=>{
-        const states = props.State.value.split("-");
-        const commonProps = {
-            variant: camelCase(props.Variant.value),
-            size: handleSizeProp(props.Size.value),
-            ...states.includes("Selected") && {
-                defaultPressed: true
-            },
-            ...states.includes("Disabled") && {
-                disabled: true
-            },
-            ...states.includes("Loading") && {
-                loading: true
-            }
-        };
-        return createElement("ToggleButton", commonProps, [
-            props["Show Prefix Icon#6122:392"].value ? createElement("PrefixIcon", {
-                svg: createElement(ctx.iconService.createIconTagName(props["Prefix Icon#6122:98"].componentKey))
-            }) : undefined,
-            props["Label#6122:49"].value,
-            props["Show Suffix Icon#6122:147"].value ? createElement("SuffixIcon", {
-                svg: createElement(ctx.iconService.createIconTagName(props["Suffix Icon#6122:343"].componentKey))
-            }) : undefined
-        ]);
-    });
-
-const createSeedComponentTransformers = (ctx)=>Object.fromEntries([
-        createActionButtonTransformer(ctx),
-        createActionChipTransformer(ctx),
-        createActionSheetTransformer(),
-        createAppBarTransformer(ctx),
-        createAvatarTransformer(),
-        createAvatarStackTransformer(),
-        createBadgeTransformer(),
-        createCalloutTransformer(ctx),
-        createCheckboxTransformer(),
-        createChipTabsTransformer(),
-        createControlChipTransformer(ctx),
-        createErrorStateTransformer(ctx),
-        createExtendedActionSheetTransformer(ctx),
-        createExtendedFabTransformer(ctx),
-        createFabTransformer(ctx),
-        createHelpBubbleTransformer(),
-        createIdentityPlaceholderTransformer(),
-        createInlineBannerTransformer(ctx),
-        createMannerTempBadgeTransformer(),
-        createMultilineTextFieldTransformer(),
-        createProgressCircleTransformer(),
-        createReactionButtonTransformer(ctx),
-        createSegmentedControlTransformer(),
-        createSelectBoxGroupTransformer(),
-        createSelectBoxTransformer(),
-        createSkeletonTransformer(ctx),
-        createSnackbarTransformer(),
-        createSwitchTransformer(),
-        createTabsTransformer(),
-        createTextButtonTransformer(ctx),
-        createTextFieldTransformer(ctx),
-        createToggleButtonTransformer(ctx)
-    ].map((x)=>[
-            x.key,
-            x
-        ]));
-
-const IGNORED_COMPONENT_KEYS = new Set([
-    "1acdc7247c83a73a0504d6fad86d08783938cb1a",
-    "b38b719b61cdf1a24458d7a7888bee74b7649084"
-]);
-const styleService = createStyleService({
-    styleRepository,
-    styleNameTransformer: ({ slug })=>camelCase(slug[slug.length - 1], {
-            mergeAmbiguousCharacters: true
-        })
-});
-const variableService = createVariableService({
-    variableRepository,
-    variableNameTransformer: ({ slug })=>slug.filter((s)=>!(s === "dimension" || s === "radius" || s === "font-size" || s === "font-weight" || s === "line-height")).map((s)=>s.replaceAll(",", "_")).map(camelCasePreserveUnderscoreBetweenNumbers).join("."),
-    inferCompareFunction: (name1, name2)=>{
-        const scoreFn = (name)=>{
-            let score = 0;
-            if (name.includes("bg")) {
-                score += 100;
-            }
-            if (name.includes("fg")) {
-                score += 100;
-            }
-            if (name.includes("stroke")) {
-                score += 100;
-            }
-            if (name.includes("spacing-x")) {
-                score -= 100;
-            }
-            if (name.includes("spacing-y")) {
-                score -= 100;
-            }
-            if (name.endsWith("pressed")) {
-                score -= 100;
-            }
-            return score;
-        };
-        return scoreFn(name2) - scoreFn(name1);
-    }
-});
-const iconService = createIconService({
-    iconRepository
-});
-// TODO: implement figma component service
-const componentTransformers = createSeedComponentTransformers({
-    iconService,
-    variableService
-});
-function createContext(options) {
-    const { ignoredComponentKeys = IGNORED_COMPONENT_KEYS, shouldInferVariableName, shouldInferAutoLayout } = options;
-    const valueTransformer = createValueTransformer({
-        variableService,
-        formatters: {
-            color: (value)=>toCssRgba(value),
-            dimension: (value)=>toCssPixel(value),
-            fontDimension: (value)=>toCssPixel(value),
-            fontWeight: (value)=>value
-        },
-        shouldInferVariableName
-    });
-    const containerLayoutPropsTransformer = createContainerLayoutPropsTransformer(valueTransformer);
-    const selfLayoutPropsTransformer = createSelfLayoutPropsTransformer(valueTransformer);
-    const iconSelfLayoutPropsTransformer = createIconSelfLayoutPropsTransformer(valueTransformer);
-    const frameFillPropsTransformer = createFrameFillPropsTransformer(valueTransformer);
-    const shapeFillPropsTransformer = createShapeFillPropsTransformer(valueTransformer);
-    const textFillPropsTransformer = createTextFillPropsTransformer(valueTransformer);
-    const radiusPropsTransformer = createRadiusPropsTransformer(valueTransformer);
-    const strokePropsTransformer = createStrokePropsTransformer(valueTransformer);
-    const typeStylePropsTransformer = createTypeStylePropsTransformer({
-        valueTransformer,
-        styleService
-    });
-    const propsTransformers = {
-        containerLayout: containerLayoutPropsTransformer,
-        selfLayout: selfLayoutPropsTransformer,
-        iconSelfLayout: iconSelfLayoutPropsTransformer,
-        frameFill: frameFillPropsTransformer,
-        shapeFill: shapeFillPropsTransformer,
-        textFill: textFillPropsTransformer,
-        radius: radiusPropsTransformer,
-        stroke: strokePropsTransformer,
-        typeStyle: typeStylePropsTransformer
-    };
-    const frameTransformer = createFrameTransformer({
-        propsTransformers
-    });
-    const instanceTransformer = createInstanceTransformer({
-        iconService,
-        ignoredComponentKeys,
-        propsTransformers,
-        componentTransformers,
-        frameTransformer
-    });
-    const textTransformer = createTextTransformer({
-        propsTransformers
-    });
-    const rectangleTransformer = createRectangleTransformer({
-        propsTransformers
-    });
-    const vectorTransformer = createVectorTransformer();
-    const booleanOperationTransformer = createBooleanOperationTransformer();
-    const codegenTransformer = createCodegenTransformer({
-        frameTransformer,
-        textTransformer,
-        rectangleTransformer,
-        instanceTransformer,
-        vectorTransformer,
-        booleanOperationTransformer,
-        shouldInferAutoLayout
-    });
-    return codegenTransformer;
-}
-
-var index = {
-  __proto__: null,
-  createBooleanOperationTransformer: createBooleanOperationTransformer,
-  createContainerLayoutPropsTransformer: createContainerLayoutPropsTransformer,
-  createContext: createContext,
-  createFrameFillPropsTransformer: createFrameFillPropsTransformer,
-  createFrameTransformer: createFrameTransformer,
-  createIconSelfLayoutPropsTransformer: createIconSelfLayoutPropsTransformer,
-  createInstanceTransformer: createInstanceTransformer,
-  createRadiusPropsTransformer: createRadiusPropsTransformer,
-  createRectangleTransformer: createRectangleTransformer,
-  createSeedComponentTransformers: createSeedComponentTransformers,
-  createSelfLayoutPropsTransformer: createSelfLayoutPropsTransformer,
-  createShapeFillPropsTransformer: createShapeFillPropsTransformer,
-  createStrokePropsTransformer: createStrokePropsTransformer,
-  createTextFillPropsTransformer: createTextFillPropsTransformer,
-  createTextTransformer: createTextTransformer,
-  createTypeStylePropsTransformer: createTypeStylePropsTransformer,
-  createVectorTransformer: createVectorTransformer
-};
-
-function generateJsxTree(node, options = {}) {
-    const { shouldInferVariableName = true, shouldInferAutoLayout = true } = options;
-    const codegen = createContext({
-        shouldInferVariableName,
-        shouldInferAutoLayout
-    });
-    return codegen(node);
-}
-function generateCode(node, options = {}) {
-    const result = generateJsxTree(node, options);
-    return result ? stringifyElement(result, {
-        printSource: options.shouldPrintSource
-    }) : undefined;
-}
-function generateFigmaSummary(node, options = {}) {
-    const { shouldInferVariableName = false, shouldPrintSource = false, shouldInferAutoLayout = false } = options;
-    const codegen = createContext$1({
-        shouldInferVariableName,
-        shouldInferAutoLayout
-    });
-    const result = codegen(node);
-    return result ? stringifyElement(result, {
-        printSource: shouldPrintSource
-    }) : undefined;
-}
-
-export { cloneElement, createCodegenTransformer, createElement, createIconService, createPluginNormalizer, createPropsTransformer, createRestNormalizer, createStaticIconRepository, createStaticStyleRepository, createStaticVariableRepository, createStyleService, createValueTransformer, createVariableService, defineComponentTransformer, defineElementTransformer, definePropsTransformer, index$1 as figma, generateCode, generateFigmaSummary, generateJsxTree, getFigmaColorVariableNames, getFigmaStyleKey, getFigmaVariableKey, iconRepository, inferLayout, index as react, styleRepository, variableRepository };
+export { createIconService, createPluginNormalizer, createRestNormalizer, createStaticIconRepository, createStaticStyleRepository, createStaticVariableRepository, createStyleService, createVariableService, getFigmaColorVariableNames, getFigmaStyleKey, getFigmaVariableKey, iconRepository, styleRepository, variableRepository };