@seed-design/figma 0.0.27 → 0.0.29

package/lib/codegen/index.js

@@ -1,5 +1,5 @@
 import { match } from 'ts-pattern';
-import 'change-case';
+import { camelCase } from 'change-case';
 import * as index_js from './targets/react/index.js';
 export { index_js as react };
 
@@ -7528,6 +7528,1675 @@ const FIGMA_VARIABLES = {
     }
 };
 
+const metadata$K = {
+    "name": "🔵 [Template] Bottom Fixed Bar",
+    "key": "bac8592d10ee12452d79d5db6353850c0f0c9c3f",
+    "componentPropertyDefinitions": {
+        "Text#30483:84": {
+            "type": "TEXT"
+        },
+        "Show Text Button#30483:80": {
+            "type": "BOOLEAN"
+        },
+        "Show Favorite#29056:0": {
+            "type": "BOOLEAN"
+        },
+        "Show Indicator#28768:0": {
+            "type": "BOOLEAN"
+        },
+        "Show Pay Logo#15354:5": {
+            "type": "BOOLEAN"
+        },
+        "Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Information",
+                "Multi Actions"
+            ]
+        },
+        "OS": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "iOS",
+                "Andorid"
+            ]
+        },
+        "Show Divider": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        }
+    }
+};
+
+const metadata$J = {
+    "name": "🔵 [Template] Button Group",
+    "key": "de6c65d34cc4a01c18c9a7c0ded34635170ca11f",
+    "componentPropertyDefinitions": {
+        "Show Secondary Button#29056:29": {
+            "type": "BOOLEAN"
+        },
+        "Show Favorite Button#29056:0": {
+            "type": "BOOLEAN"
+        },
+        "Show Step Indicator#25896:0": {
+            "type": "BOOLEAN"
+        },
+        "Show Indicator#28768:0": {
+            "type": "BOOLEAN"
+        },
+        "Text#16839:0": {
+            "type": "TEXT"
+        },
+        "OS": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "iOS",
+                "Andorid"
+            ]
+        },
+        "Position": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Bottom fixed",
+                "On keyboard"
+            ]
+        },
+        "Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Single",
+                "Vertical",
+                "Horizontal",
+                "Horizontal ratio"
+            ]
+        },
+        "Show Divider": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        }
+    }
+};
+
+const metadata$I = {
+    "name": "🔵 [Template] Chip Group",
+    "key": "d46dc9059bf351928a2d403317ad7db34e70826e",
+    "componentPropertyDefinitions": {
+        "Refresh Button#15888:2": {
+            "type": "BOOLEAN"
+        },
+        "Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Filter",
+                "Control",
+                "Action"
+            ]
+        },
+        "Chip Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Full",
+                "3",
+                "2",
+                "4"
+            ]
+        }
+    }
+};
+
+const metadata$H = {
+    "name": "🔵 [Template] Select Box Group",
+    "key": "a3d58bb8540600878742cdcf2608a4b3851667ec",
+    "componentPropertyDefinitions": {
+        "Control": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Checkbox",
+                "Radio"
+            ]
+        },
+        "Item Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6"
+            ]
+        }
+    }
+};
+
+const metadata$G = {
+    "name": "🔵 [Template] Top Navigation",
+    "key": "74f045c1972dc31d0fddd0a0027537b6779cd0e8",
+    "componentPropertyDefinitions": {
+        "Action Button#17406:0": {
+            "type": "BOOLEAN"
+        },
+        "Variants": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Main Tab",
+                "Standard",
+                "Standard Transparent",
+                "Large Title"
+            ]
+        },
+        "OS": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "iOS",
+                "Android"
+            ]
+        }
+    }
+};
+
+const metadata$F = {
+    "name": "🟢 Action Button",
+    "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89",
+    "componentPropertyDefinitions": {
+        "Suffix Icon#5987:244": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Icon#7574:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Prefix Icon#5987:305": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Label#5987:61": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "XSmall",
+                "Small",
+                "Medium",
+                "Large"
+            ]
+        },
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Text Only",
+                "Icon First",
+                "Icon Last",
+                "Icon Only"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral Solid",
+                "Neutral Weak",
+                "Neutral Outline",
+                "Brand Solid",
+                "Brand Outline",
+                "Critical Solid"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Loading",
+                "Disabled"
+            ]
+        }
+    }
+};
+
+const metadata$E = {
+    "name": "🟢 Action Chip",
+    "key": "3d21594ef116e94a9465d507447b858aea062575",
+    "componentPropertyDefinitions": {
+        "Icon#8714:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Prefix Icon#8711:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "8ed05ef62a40f2dc034ee7eb6945bd0e63ad49aa"
+                }
+            ]
+        },
+        "Suffix Icon#8711:3": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Label#7185:0": {
+            "type": "TEXT"
+        },
+        "Show Count#7185:42": {
+            "type": "BOOLEAN"
+        },
+        "Count#7185:21": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Small"
+            ]
+        },
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Text Only",
+                "Icon First",
+                "Icon Last",
+                "Icon Both",
+                "Icon Only"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Disabled"
+            ]
+        }
+    }
+};
+
+const metadata$D = {
+    "name": "🟢 Action Sheet",
+    "key": "7c29b70b7e71618e1894c26f61f336de2730d76e",
+    "componentPropertyDefinitions": {
+        "Description#15641:70": {
+            "type": "TEXT"
+        },
+        "Title#15641:37": {
+            "type": "TEXT"
+        },
+        "OS Indicator (Figma Only)#15641:20": {
+            "type": "BOOLEAN"
+        },
+        "Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Normal",
+                "Destructive"
+            ]
+        },
+        "Header": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Title Only",
+                "Description Only",
+                "Title With Description",
+                "None"
+            ]
+        },
+        "Action Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "1",
+                "2",
+                "3",
+                "4"
+            ]
+        }
+    }
+};
+
+const metadata$C = {
+    "name": "🟢 Avatar",
+    "key": "d71644aeba2e29deda366798fdfe35977166d120",
+    "componentPropertyDefinitions": {
+        "Show Image#71850:57": {
+            "type": "BOOLEAN"
+        },
+        "Show Badge#1398:26": {
+            "type": "BOOLEAN"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "20",
+                "24",
+                "36",
+                "42",
+                "48",
+                "64",
+                "80",
+                "96"
+            ]
+        }
+    }
+};
+
+const metadata$B = {
+    "name": "🟢 Avatar Stack",
+    "key": "019467fdad2192abb48699dcfb79e344df04b799",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "20",
+                "24",
+                "36",
+                "48",
+                "64"
+            ]
+        },
+        "Item Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "2",
+                "3",
+                "4",
+                "5"
+            ]
+        },
+        "Top Item": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Last Item",
+                "First Item"
+            ]
+        }
+    }
+};
+
+const metadata$A = {
+    "name": "🟢 Badge",
+    "key": "04609a35d47a1a0ef4904b3c25f79451892a85a1",
+    "componentPropertyDefinitions": {
+        "Label#1584:0": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Large"
+            ]
+        },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "Brand",
+                "Informative",
+                "Positive",
+                "Critical"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Solid",
+                "Weak",
+                "Outline"
+            ]
+        },
+        "Shape": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Rectangle",
+                "Pill"
+            ]
+        }
+    }
+};
+
+const metadata$z = {
+    "name": "🟢 Bottom Navigation / Global",
+    "key": "983650a4dff639b38bf68ff6004efc8ec4fb5c20",
+    "componentPropertyDefinitions": {
+        "OS": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "iOS",
+                "Android"
+            ]
+        },
+        "Language": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "English",
+                "Japanese"
+            ]
+        }
+    }
+};
+
+const metadata$y = {
+    "name": "🟢 Bottom Navigation / KR",
+    "key": "accc7cea2d0250cdfbf0197ce00a677c6b9e0dae",
+    "componentPropertyDefinitions": {
+        "OS": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "\biOS",
+                "Android"
+            ]
+        }
+    }
+};
+
+const metadata$x = {
+    "name": "🟢 Bottom Sheet",
+    "key": "16bafa5d1155896fe18fb6f52f904f5cd2048686",
+    "componentPropertyDefinitions": {
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Center",
+                "Left",
+                "None"
+            ]
+        }
+    }
+};
+
+const metadata$w = {
+    "name": "🟢 Callout",
+    "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe",
+    "componentPropertyDefinitions": {
+        "Show Icon#12598:229": {
+            "type": "BOOLEAN"
+        },
+        "Icon#12598:210": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "f2c04b68b0bec4ec9145d832de45947030d3b653"
+                }
+            ]
+        },
+        "Interaction": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Actionable",
+                "Dismissible"
+            ]
+        },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "Informative",
+                "Warning",
+                "Critical",
+                "Magic"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed"
+            ]
+        },
+        "Show Title": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        },
+        "Show Link Label": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        }
+    }
+};
+
+const metadata$v = {
+    "name": "🟢 Checkbox",
+    "key": "94a2f6957a86f8ae3b8c7ca200dfcd5e29f6075b",
+    "componentPropertyDefinitions": {
+        "Label#49990:0": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Large"
+            ]
+        },
+        "Shape": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Square",
+                "Ghost"
+            ]
+        },
+        "Weight": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Stronger"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Selected",
+                "Selected-Pressed",
+                "Indeterminate",
+                "Indeterminate-Pressed",
+                "Disabled",
+                "Disabled-Selected",
+                "Disabled-Indeterminate"
+            ]
+        }
+    }
+};
+
+const metadata$u = {
+    "name": "🟢 Chip Tablist",
+    "key": "d098159beacf7713e9116f0ef38d8a20f64ec84f",
+    "componentPropertyDefinitions": {
+        "Tab Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "2",
+                "3",
+                "4",
+                "5",
+                "6",
+                "Max"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral Solid",
+                "Brand Solid"
+            ]
+        }
+    }
+};
+
+const metadata$t = {
+    "name": "🟢 Control Chip",
+    "key": "5780d56fc2f9bc4bbd6bc3db93949d8a8b7b7563",
+    "componentPropertyDefinitions": {
+        "Suffix Icon#8722:82": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Label#7185:0": {
+            "type": "TEXT"
+        },
+        "Show Count#7185:42": {
+            "type": "BOOLEAN"
+        },
+        "Icon#8722:41": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Prefix Icon#8722:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": [
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "8ed05ef62a40f2dc034ee7eb6945bd0e63ad49aa"
+                }
+            ]
+        },
+        "Count#7185:21": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Small"
+            ]
+        },
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Text Only",
+                "Icon First",
+                "Icon Last",
+                "Icon Both",
+                "Icon Only"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Selected",
+                "Selected-Pressed",
+                "Disabled",
+                "Disabled-Selected"
+            ]
+        }
+    }
+};
+
+const metadata$s = {
+    "name": "🟢 Divider",
+    "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
+    "componentPropertyDefinitions": {
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "Neutral Muted"
+            ]
+        }
+    }
+};
+
+const metadata$r = {
+    "name": "🟢 Error State",
+    "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
+    "componentPropertyDefinitions": {
+        "Secondary Action Label#17042:0": {
+            "type": "TEXT"
+        },
+        "Title#16237:0": {
+            "type": "TEXT"
+        },
+        "Description#16237:5": {
+            "type": "TEXT"
+        },
+        "Show Buttons#9080:5": {
+            "type": "BOOLEAN"
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Basement"
+            ]
+        },
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "With Title",
+                "Description Only"
+            ]
+        }
+    }
+};
+
+const metadata$q = {
+    "name": "🟢 Extended Action Sheet",
+    "key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb",
+    "componentPropertyDefinitions": {
+        "Show Title#17043:12": {
+            "type": "BOOLEAN"
+        },
+        "OS Indicator (Figma Only)#81637:129": {
+            "type": "BOOLEAN"
+        },
+        "Description#14599:13": {
+            "type": "TEXT"
+        },
+        "Title#14599:0": {
+            "type": "TEXT"
+        },
+        "Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Normal",
+                "Destructive"
+            ]
+        },
+        "Action Group Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "1",
+                "2"
+            ]
+        }
+    }
+};
+
+const metadata$p = {
+    "name": "🟢 Extended Floating Action Button",
+    "key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f",
+    "componentPropertyDefinitions": {
+        "Label#28936:0": {
+            "type": "TEXT"
+        },
+        "Icon#28796:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Small",
+                "Medium"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral Solid",
+                "Layer Floating"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed"
+            ]
+        }
+    }
+};
+
+const metadata$o = {
+    "name": "🟢 Floating Action Button",
+    "key": "1974b94703032585bb9e20bd54743e01094b965c",
+    "componentPropertyDefinitions": {
+        "Icon#28796:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed"
+            ]
+        }
+    }
+};
+
+const metadata$n = {
+    "name": "🟢 Help Bubble",
+    "key": "804b327c091278a40d5891939eaed90bb2889659",
+    "componentPropertyDefinitions": {
+        "Title#62535:0": {
+            "type": "TEXT"
+        },
+        "Description#62535:98": {
+            "type": "TEXT"
+        },
+        "Show Description#62499:0": {
+            "type": "BOOLEAN"
+        },
+        "Placement": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Right-Top",
+                "Right-Center",
+                "Right-Bottom",
+                "Left-Top",
+                "Left-Center",
+                "Left-Bottom",
+                "Bottom-Left",
+                "Bottom-Center",
+                "Bottom-Right",
+                "Top-Left",
+                "Top-Center",
+                "Top-Right"
+            ]
+        },
+        "Show Close Button": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        }
+    }
+};
+
+const metadata$m = {
+    "name": "🟢 Identity Placeholder",
+    "key": "808206c07408aa1056ec85a55925e9844e9265c2",
+    "componentPropertyDefinitions": {
+        "Identity": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Person",
+                "Business"
+            ]
+        }
+    }
+};
+
+const metadata$l = {
+    "name": "🟢 Inline Banner",
+    "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
+    "componentPropertyDefinitions": {
+        "Show Icon#11840:27": {
+            "type": "BOOLEAN"
+        },
+        "Link Label#1547:81": {
+            "type": "TEXT"
+        },
+        "Interaction": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Link",
+                "Actionable",
+                "Dismissible"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral Weak",
+                "Informative Weak",
+                "Positive Weak",
+                "Warning Solid",
+                "Warning Weak",
+                "Critical Solid",
+                "Critical Weak"
+            ]
+        },
+        "Show Title": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        }
+    }
+};
+
+const metadata$k = {
+    "name": "🟢 Main Tab Navigation / Global",
+    "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
+    "componentPropertyDefinitions": {
+        "Button Label#6409:18": {
+            "type": "TEXT"
+        },
+        "Title#6406:6": {
+            "type": "TEXT"
+        },
+        "Title Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Text",
+                "Text +  Button"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Layer Default",
+                "Transparent"
+            ]
+        }
+    }
+};
+
+const metadata$j = {
+    "name": "🟢 Main Tab Navigation / KR",
+    "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
+    "componentPropertyDefinitions": {
+        "Title#6406:6": {
+            "type": "TEXT"
+        },
+        "Title Type": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Text",
+                "Button"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Layer Default",
+                "Transparent"
+            ]
+        }
+    }
+};
+
+const metadata$i = {
+    "name": "🟢 Manner Temp",
+    "key": "030dc68a26c24c37090c8b95ae21043855b5d589",
+    "componentPropertyDefinitions": {
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "L1 (~29.9)",
+                "L2 (30.0~36.2)",
+                "L3 (36.3~37.5)",
+                "L4 (37.6~41.9)",
+                "L5 (42~51.9)",
+                "L6 (52~)"
+            ]
+        }
+    }
+};
+
+const metadata$h = {
+    "name": "🟢 Manner Temp (Bar)",
+    "key": "49ca92c450fb5d450be00f69fae709dbb8edc494",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "L1 (29.9 이하)",
+                "L2 (29.9~36.2)",
+                "L3 (36.3~37.5)",
+                "L4 (37.6~41.9)",
+                "L5 (42~51.9)",
+                "L6 (52~)"
+            ]
+        }
+    }
+};
+
+const metadata$g = {
+    "name": "🟢 Manner Temp Badge",
+    "key": "ac5331cec7a2c75b671df5b85ef247dfd820dd2f",
+    "componentPropertyDefinitions": {
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "L1 (~29.9)",
+                "L2 (30.0~36.2)",
+                "L3 (36.3~37.5)",
+                "L4 (37.6~41.9)",
+                "L5 (42~51.9)",
+                "L6 (52~)"
+            ]
+        }
+    }
+};
+
+const metadata$f = {
+    "name": "🟢 Multiline Text Field",
+    "key": "88b2399c930c85f9ce2972163a078bc684b84bbe",
+    "componentPropertyDefinitions": {
+        "Indicator#15327:286": {
+            "type": "TEXT"
+        },
+        "Character Count#15327:360": {
+            "type": "TEXT"
+        },
+        "Max Character Count#15327:175": {
+            "type": "TEXT"
+        },
+        "Label#15327:323": {
+            "type": "TEXT"
+        },
+        "Filled Text#1304:0": {
+            "type": "TEXT"
+        },
+        "Show Character count#958:75": {
+            "type": "BOOLEAN"
+        },
+        "Show Footer#958:25": {
+            "type": "BOOLEAN"
+        },
+        "Show Description#958:50": {
+            "type": "BOOLEAN"
+        },
+        "Description#15327:212": {
+            "type": "TEXT"
+        },
+        "Show Indicator#1259:0": {
+            "type": "BOOLEAN"
+        },
+        "Placeholder#958:0": {
+            "type": "TEXT"
+        },
+        "Show Header#870:0": {
+            "type": "BOOLEAN"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Large",
+                "XLarge"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Focused",
+                "Invalid",
+                "Invalid-Focused",
+                "Disabled",
+                "Read Only"
+            ]
+        },
+        "Filled": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        }
+    }
+};
+
+const metadata$e = {
+    "name": "🟢 Progress Circle",
+    "key": "6e6779a372cab2485a0e25529bc4dbc9932a7346",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "24",
+                "40"
+            ]
+        },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "Brand",
+                "Static White"
+            ]
+        },
+        "Value": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Indeterminate",
+                "0%",
+                "25%",
+                "75%",
+                "100%"
+            ]
+        }
+    }
+};
+
+const metadata$d = {
+    "name": "🟢 Radio",
+    "key": "ac72d9e5ab04a1d59eaf77dffd380fd6e491ecf8",
+    "componentPropertyDefinitions": {
+        "Label#49990:171": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Large"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Selected",
+                "Selected-Pressed",
+                "Disabled",
+                "Disabled-Selected"
+            ]
+        }
+    }
+};
+
+const metadata$c = {
+    "name": "🟢 Range Slider",
+    "key": "64fc49184979e0be40aa367ca98868601eb7dad5",
+    "componentPropertyDefinitions": {
+        "Steps": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "0",
+                "1",
+                "2",
+                "3",
+                "4"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Disabled"
+            ]
+        },
+        "Marker": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "None",
+                "Min Max",
+                "All"
+            ]
+        }
+    }
+};
+
+const metadata$b = {
+    "name": "🟢 Reaction Button",
+    "key": "ec43e4e881f7048e95601f8b58c01a0905a174e0",
+    "componentPropertyDefinitions": {
+        "Icon#12379:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Show Count#6397:33": {
+            "type": "BOOLEAN"
+        },
+        "Count#15816:0": {
+            "type": "TEXT"
+        },
+        "Label#6397:0": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "XSmall",
+                "Small"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Loading",
+                "Selected",
+                "Selected-Pressed",
+                "Selected-Loading",
+                "Disabled",
+                "Disabled-Selected"
+            ]
+        }
+    }
+};
+
+const metadata$a = {
+    "name": "🟢 Segmented Control",
+    "key": "3ad7133ba52755867f42f9232375f75639e00d58",
+    "componentPropertyDefinitions": {
+        "Item Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "2",
+                "3",
+                "4"
+            ]
+        },
+        "Selected Item": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "1",
+                "2",
+                "3",
+                "4"
+            ]
+        }
+    }
+};
+
+const metadata$9 = {
+    "name": "🟢 Select Box",
+    "key": "38722ffeb4c966256a709155e8ddac50c93d7c60",
+    "componentPropertyDefinitions": {
+        "Label#3635:0": {
+            "type": "TEXT"
+        },
+        "Description #3033:5": {
+            "type": "TEXT"
+        },
+        "Show Description#3033:0": {
+            "type": "BOOLEAN"
+        },
+        "Control": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Checkbox",
+                "Radio"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Selected",
+                "Selected-Pressed"
+            ]
+        }
+    }
+};
+
+const metadata$8 = {
+    "name": "🟢 Skeleton",
+    "key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a",
+    "componentPropertyDefinitions": {
+        "Radius": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "0",
+                "8",
+                "16",
+                "Full"
+            ]
+        }
+    }
+};
+
+const metadata$7 = {
+    "name": "🟢 Slider",
+    "key": "aee027230a478315e380704c4523141e67e464ee",
+    "componentPropertyDefinitions": {
+        "Steps": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "0",
+                "1",
+                "2",
+                "3",
+                "4"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Disabled"
+            ]
+        },
+        "Marker": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "None",
+                "Min Max",
+                "All"
+            ]
+        }
+    }
+};
+
+const metadata$6 = {
+    "name": "🟢 Snackbar",
+    "key": "81b17fb8c7d731a19cf8d36a8605559d41414eca",
+    "componentPropertyDefinitions": {
+        "Action Button Label#1528:8": {
+            "type": "TEXT"
+        },
+        "Message#1528:4": {
+            "type": "TEXT"
+        },
+        "Show Action Button#1528:0": {
+            "type": "BOOLEAN"
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Default",
+                "Positive",
+                "Critical"
+            ]
+        }
+    }
+};
+
+const metadata$5 = {
+    "name": "🟢 Standard Navigation",
+    "key": "c07bfe331cf214375fce9ad47cb6fdb459d1fb1b",
+    "componentPropertyDefinitions": {
+        "Title#28176:5": {
+            "type": "BOOLEAN"
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Layer Default",
+                "Transparent"
+            ]
+        },
+        "OS": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "iOS",
+                "Android"
+            ]
+        }
+    }
+};
+
+const metadata$4 = {
+    "name": "🟢 Switch",
+    "key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3",
+    "componentPropertyDefinitions": {
+        "Label#15191:2": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Small",
+                "Medium"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Selected",
+                "Disabled",
+                "Disabled-Selected"
+            ]
+        }
+    }
+};
+
+const metadata$3 = {
+    "name": "🟢 Tablist",
+    "key": "ffe33411fb8796f7a95d3637b90150007f0dd954",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Small",
+                "Medium"
+            ]
+        },
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Hug",
+                "Fill"
+            ]
+        },
+        "Tab Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "2",
+                "3",
+                "4",
+                "5+"
+            ]
+        }
+    }
+};
+
+const metadata$2 = {
+    "name": "🟢 Text Button",
+    "key": "601f788792916250e33d04bd3165dee1404342df",
+    "componentPropertyDefinitions": {
+        "Prefix Icon#7561:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Label#6148:0": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Small",
+                "Medium",
+                "Large"
+            ]
+        },
+        "Layout": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Icon First",
+                "Icon Last"
+            ]
+        },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "Neutral Subtle",
+                "Brand",
+                "Critical"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Disabled"
+            ]
+        }
+    }
+};
+
+const metadata$1 = {
+    "name": "🟢 Text Field",
+    "key": "c49873c37a639f0dffdea4efd0eb43760d66c141",
+    "componentPropertyDefinitions": {
+        "Suffix Text#15327:138": {
+            "type": "TEXT"
+        },
+        "Indicator#15327:249": {
+            "type": "TEXT"
+        },
+        "Label#14964:0": {
+            "type": "TEXT"
+        },
+        "Character Count#15327:64": {
+            "type": "TEXT"
+        },
+        "Description#12626:5": {
+            "type": "TEXT"
+        },
+        "Filled Text#1304:0": {
+            "type": "TEXT"
+        },
+        "Show Suffix Icon#1267:75": {
+            "type": "BOOLEAN"
+        },
+        "Show Prefix Icon#1267:50": {
+            "type": "BOOLEAN"
+        },
+        "Prefix Icon#1267:25": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Show Prefix#958:125": {
+            "type": "BOOLEAN"
+        },
+        "Show Suffix#958:100": {
+            "type": "BOOLEAN"
+        },
+        "Show Character Count#958:75": {
+            "type": "BOOLEAN"
+        },
+        "Show Footer#958:25": {
+            "type": "BOOLEAN"
+        },
+        "Max Character Count#15327:27": {
+            "type": "TEXT"
+        },
+        "Show Prefix Text#1267:0": {
+            "type": "BOOLEAN"
+        },
+        "Show Suffix Text#1267:125": {
+            "type": "BOOLEAN"
+        },
+        "Suffix Icon #1267:100": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Show Description#958:50": {
+            "type": "BOOLEAN"
+        },
+        "Prefix Text#15327:101": {
+            "type": "TEXT"
+        },
+        "Show Indicator#1259:0": {
+            "type": "BOOLEAN"
+        },
+        "Placeholder#958:0": {
+            "type": "TEXT"
+        },
+        "Show Header#870:0": {
+            "type": "BOOLEAN"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Medium",
+                "Large",
+                "XLarge"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Focused",
+                "Invalid",
+                "Invalid-Focused",
+                "Disabled",
+                "Read Only"
+            ]
+        },
+        "Filled": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "True",
+                "False"
+            ]
+        }
+    }
+};
+
+const metadata = {
+    "name": "🟢 Toggle Button",
+    "key": "1d240ee5fd7a56879713e69cbea1b6f006f0ea22",
+    "componentPropertyDefinitions": {
+        "Suffix Icon#6122:343": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Show Prefix Icon#6122:392": {
+            "type": "BOOLEAN"
+        },
+        "Show Suffix Icon#6122:147": {
+            "type": "BOOLEAN"
+        },
+        "Prefix Icon#6122:98": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Label#6122:49": {
+            "type": "TEXT"
+        },
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Small",
+                "XSmall"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral Weak",
+                "Brand Solid"
+            ]
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed",
+                "Loading",
+                "Selected",
+                "Selected-Pressed",
+                "Selected-Loading",
+                "Disabled",
+                "Disabled-Selected"
+            ]
+        }
+    }
+};
+
+var FIGMA_COMPONENTS = {
+  __proto__: null,
+  actionButton: metadata$F,
+  actionChip: metadata$E,
+  actionSheet: metadata$D,
+  avatar: metadata$C,
+  avatarStack: metadata$B,
+  badge: metadata$A,
+  bottomNavigationGlobal: metadata$z,
+  bottomNavigationKr: metadata$y,
+  bottomSheet: metadata$x,
+  callout: metadata$w,
+  checkbox: metadata$v,
+  chipTablist: metadata$u,
+  controlChip: metadata$t,
+  divider: metadata$s,
+  errorState: metadata$r,
+  extendedActionSheet: metadata$q,
+  extendedFloatingActionButton: metadata$p,
+  floatingActionButton: metadata$o,
+  helpBubble: metadata$n,
+  identityPlaceholder: metadata$m,
+  inlineBanner: metadata$l,
+  mainTabNavigationGlobal: metadata$k,
+  mainTabNavigationKr: metadata$j,
+  mannerTemp: metadata$i,
+  mannerTempBadge: metadata$g,
+  mannerTempBar: metadata$h,
+  multilineTextField: metadata$f,
+  progressCircle: metadata$e,
+  radio: metadata$d,
+  rangeSlider: metadata$c,
+  reactionButton: metadata$b,
+  segmentedControl: metadata$a,
+  selectBox: metadata$9,
+  skeleton: metadata$8,
+  slider: metadata$7,
+  snackbar: metadata$6,
+  standardNavigation: metadata$5,
+  switch: metadata$4,
+  tablist: metadata$3,
+  templateBottomFixedBar: metadata$K,
+  templateButtonGroup: metadata$J,
+  templateChipGroup: metadata$I,
+  templateSelectBoxGroup: metadata$H,
+  templateTopNavigation: metadata$G,
+  textButton: metadata$2,
+  textField: metadata$1,
+  toggleButton: metadata
+};
+
 function createStaticStyleRepository(styles) {
     const stylesMap = new Map();
     const stylesNameMap = new Map();
@@ -7582,6 +9251,16 @@ function createStaticVariableRepository({ variables, variableCollections }) {
     };
 }
 
+function createStaticComponentRepository(data) {
+    const componentRecord = {};
+    Object.values(data).forEach((component)=>{
+        componentRecord[component.key] = component;
+    });
+    return {
+        getOne: (key)=>componentRecord[key]
+    };
+}
+
 // TODO: inferStyleName 추가해야 함, rest api에서 style value가 제공되지 않고 있어 보류
 function createStyleService({ styleRepository }) {
     function getName(id) {
@@ -7690,6 +9369,7 @@ const variableRepository = createStaticVariableRepository({
     variables: FIGMA_VARIABLES,
     variableCollections: FIGMA_VARIABLE_COLLECTIONS
 });
+const componentRepository = createStaticComponentRepository(FIGMA_COMPONENTS);
 
 const styleService = createStyleService({
     styleRepository
@@ -7737,8 +9417,18 @@ function createFrameTransformer({ propsConverters }) {
     });
 }
 
-function createInstanceTransformer({ frameTransformer }) {
+function createInstanceTransformer({ frameTransformer, componentRepository }) {
     const transform = defineElementTransformer((node, traverse)=>{
+        const component = componentRepository?.getOne(node.componentSetKey ?? node.componentKey);
+        if (component) {
+            return createElement("Instance", {
+                componentName: component.name,
+                ...Object.fromEntries(Object.entries(node.componentProperties).filter(([_, props])=>props.type === "VARIANT" || props.type === "TEXT").map(([key, props])=>[
+                        camelCase(key.split("#")[0]),
+                        camelCase(props.value)
+                    ]))
+            });
+        }
         return frameTransformer(node, traverse);
     });
     return transform;
@@ -7958,7 +9648,8 @@ function createPipeline(options = {}) {
         propsConverters
     });
     const instanceTransformer = createInstanceTransformer({
-        frameTransformer
+        frameTransformer,
+        componentRepository
     });
     const textTransformer = createTextTransformer({
         propsConverters