@seed-design/figma 0.0.25 → 0.0.28

package/lib/codegen/targets/react/index.js

@@ -726,14 +726,14 @@ function createContainerLayoutPropsConverter(valueResolver) {
             justify: "flex-start",
             align: "stretch",
             wrap: "nowrap",
-            gap: 0,
-            p: 0,
-            px: 0,
-            py: 0,
-            pb: 0,
-            pl: 0,
-            pr: 0,
-            pt: 0
+            gap: "0px",
+            p: "0px",
+            px: "0px",
+            py: "0px",
+            pb: "0px",
+            pl: "0px",
+            pr: "0px",
+            pt: "0px"
         }
     });
 }
@@ -781,11 +781,11 @@ function createRadiusPropsConverter(valueResolver) {
             ]
         },
         defaults: {
-            borderRadius: 0,
-            borderTopLeftRadius: 0,
-            borderTopRightRadius: 0,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0
+            borderRadius: "0px",
+            borderTopLeftRadius: "0px",
+            borderTopRightRadius: "0px",
+            borderBottomLeftRadius: "0px",
+            borderBottomRightRadius: "0px"
         }
     });
 }
@@ -996,101 +996,1674 @@ function createTextTransformer({ propsConverters }) {
     });
 }
 
+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 = {
-    "key": "a3d58bb8540600878742cdcf2608a4b3851667ec"};
+    "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 = {
-    "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89"};
+    "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 = {
-    "key": "3d21594ef116e94a9465d507447b858aea062575"};
+    "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 = {
-    "key": "7c29b70b7e71618e1894c26f61f336de2730d76e"};
+    "name": "🟢 Divider",
+    "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
+    "componentPropertyDefinitions": {
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "Neutral Muted"
+            ]
+        }
+    }
+};
 
 const metadata$r = {
-    "key": "d71644aeba2e29deda366798fdfe35977166d120"};
+    "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 = {
-    "key": "019467fdad2192abb48699dcfb79e344df04b799"};
+    "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 = {
-    "key": "04609a35d47a1a0ef4904b3c25f79451892a85a1"};
+    "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 = {
-    "key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe"};
+    "name": "🟢 Floating Action Button",
+    "key": "1974b94703032585bb9e20bd54743e01094b965c",
+    "componentPropertyDefinitions": {
+        "Icon#28796:0": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "State": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Enabled",
+                "Pressed"
+            ]
+        }
+    }
+};
 
 const metadata$n = {
-    "key": "94a2f6957a86f8ae3b8c7ca200dfcd5e29f6075b"};
+    "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 = {
-    "key": "d098159beacf7713e9116f0ef38d8a20f64ec84f"};
+    "name": "🟢 Identity Placeholder",
+    "key": "808206c07408aa1056ec85a55925e9844e9265c2",
+    "componentPropertyDefinitions": {
+        "Identity": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Person",
+                "Business"
+            ]
+        }
+    }
+};
 
 const metadata$l = {
-    "key": "5780d56fc2f9bc4bbd6bc3db93949d8a8b7b7563"};
+    "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 = {
-    "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172"};
+    "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 = {
-    "key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb"};
+    "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 = {
-    "key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f"};
+    "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 = {
-    "key": "1974b94703032585bb9e20bd54743e01094b965c"};
+    "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 = {
-    "key": "804b327c091278a40d5891939eaed90bb2889659"};
+    "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 = {
-    "key": "808206c07408aa1056ec85a55925e9844e9265c2"};
+    "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 = {
-    "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1"};
+    "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 = {
-    "key": "ac5331cec7a2c75b671df5b85ef247dfd820dd2f"};
+    "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 = {
-    "key": "88b2399c930c85f9ce2972163a078bc684b84bbe"};
+    "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 = {
-    "key": "6e6779a372cab2485a0e25529bc4dbc9932a7346"};
+    "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 = {
-    "key": "ec43e4e881f7048e95601f8b58c01a0905a174e0"};
+    "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 = {
-    "key": "3ad7133ba52755867f42f9232375f75639e00d58"};
+    "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 = {
-    "key": "38722ffeb4c966256a709155e8ddac50c93d7c60"};
+    "name": "🟢 Skeleton",
+    "key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a",
+    "componentPropertyDefinitions": {
+        "Radius": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "0",
+                "8",
+                "16",
+                "Full"
+            ]
+        }
+    }
+};
 
 const metadata$7 = {
-    "key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a"};
+    "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 = {
-    "key": "81b17fb8c7d731a19cf8d36a8605559d41414eca"};
+    "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 = {
-    "key": "c07bfe331cf214375fce9ad47cb6fdb459d1fb1b"};
+    "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 = {
-    "key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3"};
+    "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 = {
-    "key": "ffe33411fb8796f7a95d3637b90150007f0dd954"};
+    "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 = {
-    "key": "601f788792916250e33d04bd3165dee1404342df"};
+    "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 = {
-    "key": "c49873c37a639f0dffdea4efd0eb43760d66c141"};
+    "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 = {
-    "key": "1d240ee5fd7a56879713e69cbea1b6f006f0ea22"};
+    "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
+};
 
 // TODO: move this file to relevant directory
 function handleSizeProp(size) {
@@ -1111,7 +2684,7 @@ function handleSizeProp(size) {
 }
 
 const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("action-button");
-const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$u.key, ({ componentProperties: props })=>{
+const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$F.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -1154,7 +2727,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$u.key,
         return createLocalSnippetElement$n("ActionButton", commonProps, children);
     });
 
-const createActionChipHandler = (ctx)=>defineComponentHandler(metadata$t.key, ({ componentProperties: props })=>{
+const createActionChipHandler = (ctx)=>defineComponentHandler(metadata$E.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -1222,7 +2795,7 @@ const createActionSheetItemHandler = (_ctx)=>defineComponentHandler(ACTION_SHEET
     });
 const createActionSheetHandler = (ctx)=>{
     const actionSheetItemHandler = createActionSheetItemHandler();
-    return defineComponentHandler(metadata$s.key, (node)=>{
+    return defineComponentHandler(metadata$D.key, (node)=>{
         const { componentProperties: props } = node;
         const contentProps = match(props.Header.value).with("None", ()=>({
                 title: undefined,
@@ -1379,7 +2952,7 @@ const createAppBarHandler = (ctx)=>{
     });
 };
 
-const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(metadata$f.key, ({ componentProperties: props })=>{
+const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(metadata$m.key, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
@@ -1389,7 +2962,7 @@ const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(metadata
 const { createLocalSnippetElement: createLocalSnippetElement$k } = createLocalSnippetHelper("avatar");
 const createAvatarHandler = (ctx)=>{
     const identityPlaceholderHandler = createIdentityPlaceholderHandler();
-    return defineComponentHandler(metadata$r.key, (node)=>{
+    return defineComponentHandler(metadata$C.key, (node)=>{
         const [placeholder] = findAllInstances({
             node,
             key: identityPlaceholderHandler.key
@@ -1415,7 +2988,7 @@ const createAvatarHandler = (ctx)=>{
 const { createLocalSnippetElement: createLocalSnippetElement$j } = createLocalSnippetHelper("avatar");
 const createAvatarStackHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
-    return defineComponentHandler(metadata$q.key, (node)=>{
+    return defineComponentHandler(metadata$B.key, (node)=>{
         const avatarNodes = findAllInstances({
             node,
             key: avatarHandler.key
@@ -1429,7 +3002,7 @@ const createAvatarStackHandler = (ctx)=>{
     });
 };
 
-const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$p.key, ({ componentProperties: props })=>{
+const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$A.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
             tone: camelCase(props.Tone.value),
@@ -1440,7 +3013,7 @@ const createBadgeHandler = (_ctx)=>defineComponentHandler(metadata$p.key, ({ com
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$i } = createLocalSnippetHelper("callout");
-const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$o.key, ({ componentProperties: props, children })=>{
+const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$w.key, ({ componentProperties: props, children })=>{
         const tag = (()=>{
             switch(props.Interaction.value){
                 case "Default":
@@ -1509,7 +3082,7 @@ const createCalloutHandler = (ctx)=>defineComponentHandler(metadata$o.key, ({ co
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("checkbox");
-const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$n.key, ({ componentProperties: props })=>{
+const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$v.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
             label: props["Label#49990:0"].value,
@@ -1544,7 +3117,7 @@ const createChipTabsItemHandler = (_ctx)=>defineComponentHandler(CHIP_TABS_ITEM_
     });
 const createChipTabsHandler = (ctx)=>{
     const chipTabsItemHandler = createChipTabsItemHandler();
-    return defineComponentHandler(metadata$m.key, (node)=>{
+    return defineComponentHandler(metadata$u.key, (node)=>{
         const chipTabsItems = findAllInstances({
             node,
             key: chipTabsItemHandler.key
@@ -1562,7 +3135,7 @@ const createChipTabsHandler = (ctx)=>{
 };
 
 const { createLocalSnippetElement: createLocalSnippetElement$f } = createLocalSnippetHelper("control-chip");
-const createControlChipHandler = (ctx)=>defineComponentHandler(metadata$l.key, ({ componentProperties: props })=>{
+const createControlChipHandler = (ctx)=>defineComponentHandler(metadata$t.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const count = props["Show Count#7185:42"].value ? props["Count#7185:21"].value : undefined;
         const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
@@ -1625,7 +3198,7 @@ const createControlChipHandler = (ctx)=>defineComponentHandler(metadata$l.key, (
 const { createLocalSnippetElement: createLocalSnippetElement$e } = createLocalSnippetHelper("error-state");
 const createErrorStateHandler = (ctx)=>{
     const actionButtonHandler = createActionButtonHandler(ctx);
-    return defineComponentHandler(metadata$k.key, (node)=>{
+    return defineComponentHandler(metadata$r.key, (node)=>{
         const props = node.componentProperties;
         const [actionButtonNode] = findAllInstances({
             node,
@@ -1681,7 +3254,7 @@ const createExtendedActionSheetGroupHandler = (ctx)=>{
 };
 const createExtendedActionSheetHandler = (ctx)=>{
     const extendedActionSheetGroupHandler = createExtendedActionSheetGroupHandler(ctx);
-    return defineComponentHandler(metadata$j.key, (node)=>{
+    return defineComponentHandler(metadata$q.key, (node)=>{
         const { componentProperties: props } = node;
         const groups = findAllInstances({
             node,
@@ -1706,7 +3279,7 @@ const createExtendedActionSheetHandler = (ctx)=>{
     });
 };
 
-const createExtendedFabHandler = (ctx)=>defineComponentHandler(metadata$i.key, ({ componentProperties: props })=>{
+const createExtendedFabHandler = (ctx)=>defineComponentHandler(metadata$p.key, ({ componentProperties: props })=>{
         const commonProps = {
             size: handleSizeProp(props.Size.value),
             variant: camelCase(props.Variant.value)
@@ -1719,7 +3292,7 @@ const createExtendedFabHandler = (ctx)=>defineComponentHandler(metadata$i.key, (
         ]);
     });
 
-const createFabHandler = (ctx)=>defineComponentHandler(metadata$h.key, ({ componentProperties: props })=>{
+const createFabHandler = (ctx)=>defineComponentHandler(metadata$o.key, ({ componentProperties: props })=>{
         return createSeedReactElement("Fab", undefined, createSeedReactElement("Icon", {
             svg: ctx.iconHandler.transform(props["Icon#28796:0"])
         }), {
@@ -1728,7 +3301,7 @@ const createFabHandler = (ctx)=>defineComponentHandler(metadata$h.key, ({ compon
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$c } = createLocalSnippetHelper("help-bubble");
-const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$g.key, ({ componentProperties: props })=>{
+const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$n.key, ({ componentProperties: props })=>{
         const placement = (()=>{
             switch(props.Placement.value){
                 case "Bottom-Left":
@@ -1772,7 +3345,7 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(metadata$g.key, (
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$b } = createLocalSnippetHelper("inline-banner");
-const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$e.key, (node)=>{
+const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$l.key, (node)=>{
         const { componentProperties: props } = node;
         const tag = (()=>{
             switch(props.Interaction.value){
@@ -1828,7 +3401,7 @@ const createInlineBannerHandler = (ctx)=>defineComponentHandler(metadata$e.key,
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp-badge");
-const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$d.key, ({ children })=>{
+const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$g.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
             temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1")
@@ -1837,7 +3410,7 @@ const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$d.k
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$9 } = createLocalSnippetHelper("multiline-text-field");
-const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$c.key, ({ componentProperties: props })=>{
+const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$f.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 = {
@@ -1883,7 +3456,7 @@ const createMultilineTextFieldHandler = (_ctx)=>defineComponentHandler(metadata$
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$8 } = createLocalSnippetHelper("progress-circle");
-const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$b.key, ({ componentProperties: props })=>{
+const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$e.key, ({ componentProperties: props })=>{
         const { value, minValue, maxValue } = match(props.Value.value).with("Indeterminate", ()=>({
                 value: undefined,
                 minValue: undefined,
@@ -1916,7 +3489,7 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$b.ke
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("reaction-button");
-const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$a.key, ({ componentProperties: props })=>{
+const createReactionButtonHandler = (ctx)=>defineComponentHandler(metadata$b.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const commonProps = {
             size: handleSizeProp(props.Size.value),
@@ -1953,7 +3526,7 @@ const createSegmentedControlItemHandler = (_ctx)=>defineComponentHandler(SEGMENT
     });
 const createSegmentedControlHandler = (ctx)=>{
     const segmentedControlItemHandler = createSegmentedControlItemHandler();
-    return defineComponentHandler(metadata$9.key, (node)=>{
+    return defineComponentHandler(metadata$a.key, (node)=>{
         const segments = findAllInstances({
             node,
             key: segmentedControlItemHandler.key
@@ -1972,7 +3545,7 @@ const createSegmentedControlHandler = (ctx)=>{
 };
 
 const { createLocalSnippetElement: createLocalSnippetElement$5 } = createLocalSnippetHelper("select-box");
-const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({ componentProperties: props })=>{
+const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$9.key, ({ componentProperties: props })=>{
         const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBox").exhaustive();
         const states = props.State.value.split("-");
         const commonProps = {
@@ -1991,7 +3564,7 @@ const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({
     });
 const createSelectBoxGroupHandler = (ctx)=>{
     const selectBoxHandler = createSelectBoxHandler();
-    return defineComponentHandler(metadata$v.key, (node)=>{
+    return defineComponentHandler(metadata$H.key, (node)=>{
         const props = node.componentProperties;
         const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBoxGroup").with("Radio", ()=>"RadioSelectBoxGroup").exhaustive();
         const selectBoxes = findAllInstances({
@@ -2011,7 +3584,7 @@ const createSelectBoxGroupHandler = (ctx)=>{
     });
 };
 
-const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$7.key, (node)=>{
+const createSkeletonHandler = (ctx)=>defineComponentHandler(metadata$8.key, (node)=>{
         const { componentProperties: props, layoutSizingHorizontal, layoutSizingVertical } = node;
         const commonProps = {
             radius: camelCase(props.Radius.value),
@@ -11999,6 +13572,16 @@ function createStaticVariableRepository({ variables, variableCollections }) {
     };
 }
 
+function createStaticComponentRepository(data) {
+    const componentRecord = {};
+    Object.values(data).forEach((component)=>{
+        componentRecord[component.key] = component;
+    });
+    return {
+        getOne: (key)=>componentRecord[key]
+    };
+}
+
 function createIconService({ iconRepository }) {
     function isAvailable(componentKey) {
         return iconRepository.getOne(componentKey) !== undefined;
@@ -12121,6 +13704,7 @@ const variableRepository = createStaticVariableRepository({
     variableCollections: FIGMA_VARIABLE_COLLECTIONS
 });
 const iconRepository = createStaticIconRepository(FIGMA_ICONS);
+createStaticComponentRepository(FIGMA_COMPONENTS);
 
 const styleService = createStyleService({
     styleRepository