From 91959b503631bdfaaaef2c644fcd681d78a20efa Mon Sep 17 00:00:00 2001
From: Jake Albaugh <jalbaugh@figma.com>
Date: Thu, 20 Jun 2024 15:04:07 -0500
Subject: [PATCH] inputs code connect

---
 figma.config.json                           |  16 +--
 package-lock.json                           |  14 +--
 package.json                                |   2 +-
 scripts/descriptions/exportComponentJSON.js | 113 +-------------------
 src/figma/compositions/Forms.figma.tsx      |   8 +-
 src/figma/primitives/Checkbox.figma.tsx     |  42 ++------
 src/figma/primitives/Input.figma.tsx        |  43 +++-----
 src/figma/primitives/Radio.figma.tsx        |  14 +--
 src/figma/primitives/Select.figma.tsx       |  58 +++++-----
 src/figma/primitives/Slider.figma.tsx       |  12 +--
 src/figma/primitives/Switch.figma.tsx       |  33 +-----
 src/figma/primitives/Textarea.figma.tsx     |  42 +++-----
 12 files changed, 90 insertions(+), 307 deletions(-)

diff --git a/figma.config.json b/figma.config.json
index ae2974a..7054a52 100644
--- a/figma.config.json
+++ b/figma.config.json
@@ -30,7 +30,6 @@
       "<FIGMA_URL_BUTTON_DANGER>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=185-852",
       "<FIGMA_URL_BUTTON_GROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2072-9432",
       "<FIGMA_URL_CARD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2142-11380",
-      "<FIGMA_URL_CHECKBOX>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1454",
       "<FIGMA_URL_CHECKBOX_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1441",
       "<FIGMA_URL_CHECKBOX_GROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1426",
       "<FIGMA_URL_DIALOG>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762-696",
@@ -50,7 +49,6 @@
       "<FIGMA_URL_HEADER>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2287-22651",
       "<FIGMA_URL_HEADER_AUTH>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=18-9389",
       "<FIGMA_URL_ICON_BUTTON>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=11-11508",
-      "<FIGMA_URL_INPUT>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:850",
       "<FIGMA_URL_INPUT_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2136-2263",
       "<FIGMA_URL_LOGO>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2159-5053",
       "<FIGMA_URL_MENU_MENU>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:720",
@@ -70,9 +68,8 @@
       "<FIGMA_URL_PAGINATION_NEXT>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:870",
       "<FIGMA_URL_PAGINATION_LIST>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:903",
       "<FIGMA_URL_PAGINATION>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:899",
-      "<FIGMA_URL_RADIO>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1204",
-      "<FIGMA_URL_RADIOFIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1412",
-      "<FIGMA_URL_RADIOGROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1200",
+      "<FIGMA_URL_RADIO_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1412",
+      "<FIGMA_URL_RADIO_GROUP>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=624-23642",
       "<FIGMA_URL_SEARCH>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2236-14989",
       "<FIGMA_URL_SECTION_CARD_GRID_ICON>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348:13221",
       "<FIGMA_URL_SECTION_CARD_GRID_TESTIMONIALS>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348:13347",
@@ -93,13 +90,9 @@
       "<FIGMA_URL_SECTION_PANEL_IMAGE_CONTENT_REVERSE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348-15101",
       "<FIGMA_URL_SECTION_PANEL_IMAGE_DOUBLE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348-13470",
       "<FIGMA_URL_SECTION_PANEL_IMAGE_IMAGE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=348-15098",
-      "<FIGMA_URL_SELECT>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1162",
       "<FIGMA_URL_SELECT_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2136-2336",
-      "<FIGMA_URL_SLIDER>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=3734-22471",
-      "<FIGMA_URL_SLIDER_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=151-9617",
-      "<FIGMA_URL_SWITCH_GROUP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1921",
+      "<FIGMA_URL_SLIDER_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=589-17676",
       "<FIGMA_URL_SWITCH_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1902",
-      "<FIGMA_URL_SWITCH>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1701",
       "<FIGMA_URL_TAB>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=3729-12963",
       "<FIGMA_URL_TABS>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=3729-13362",
       "<FIGMA_URL_TAG>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=56-8830",
@@ -123,8 +116,7 @@
       "<FIGMA_URL_TEXT_PRICE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2142-11622",
       "<FIGMA_URL_TEXT_CONTENT_HEADING>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2153-7834",
       "<FIGMA_URL_TEXT_CONTENT_TITLE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2153-7838",
-      "<FIGMA_URL_TEXT_AREA>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1135",
-      "<FIGMA_URL_TEXT_AREA_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762-3088",
+      "<FIGMA_URL_TEXTAREA_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762-3088",
       "<FIGMA_URL_TOOLTIP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=315-32700",
       "<FIGMA_URL_CARDS_PRODUCT_INFO_CARD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=7753-4465&m=dev",
       "<FIGMA_URL_CARDS_PRICING_CARD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=7722-3736&t=zlze7QSzfpWykbLu-11",
diff --git a/package-lock.json b/package-lock.json
index 333438b..10cdb82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "sds",
       "version": "0.0.0",
       "devDependencies": {
-        "@figma/code-connect": "^1.0.0",
+        "@figma/code-connect": "^1.0.1",
         "@react-aria/accordion": "^3.0.0-alpha.28",
         "@react-aria/focus": "^3.17.0",
         "@react-aria/interactions": "^3.21.2",
@@ -2370,9 +2370,9 @@
       "license": "MIT"
     },
     "node_modules/@figma/code-connect": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@figma/code-connect/-/code-connect-1.0.0.tgz",
-      "integrity": "sha512-nnI7Z0bCHRL2f7DZJGtyAWBlL4rX0q+DTqHT4AulopHx9dBb1XGJ+ynX4puxa8bZGup6y2LMWVyGmvIjZLLRSA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@figma/code-connect/-/code-connect-1.0.1.tgz",
+      "integrity": "sha512-5/msUQe6crsTXm1wfGyz/PJmennauPANApqGUM+xrD0MDJyA65ns1EoWFc9Oby6+cknbeiIuFrKMooGnXxFLYQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -18032,9 +18032,9 @@
       "dev": true
     },
     "@figma/code-connect": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@figma/code-connect/-/code-connect-1.0.0.tgz",
-      "integrity": "sha512-nnI7Z0bCHRL2f7DZJGtyAWBlL4rX0q+DTqHT4AulopHx9dBb1XGJ+ynX4puxa8bZGup6y2LMWVyGmvIjZLLRSA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@figma/code-connect/-/code-connect-1.0.1.tgz",
+      "integrity": "sha512-5/msUQe6crsTXm1wfGyz/PJmennauPANApqGUM+xrD0MDJyA65ns1EoWFc9Oby6+cknbeiIuFrKMooGnXxFLYQ==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.24.7",
diff --git a/package.json b/package.json
index 6ae87c1..c7b575f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     ]
   },
   "devDependencies": {
-    "@figma/code-connect": "^1.0.0",
+    "@figma/code-connect": "^1.0.1",
     "@react-aria/accordion": "^3.0.0-alpha.28",
     "@react-aria/focus": "^3.17.0",
     "@react-aria/interactions": "^3.21.2",
diff --git a/scripts/descriptions/exportComponentJSON.js b/scripts/descriptions/exportComponentJSON.js
index 6f1e904..1cc322c 100644
--- a/scripts/descriptions/exportComponentJSON.js
+++ b/scripts/descriptions/exportComponentJSON.js
@@ -1,116 +1,5 @@
 // Run this in the console
-const reverseLookup = {
-  "7753:4779": "<ACCORDION>",
-  "7753:4634": "<ACCORDION_ITEM>",
-  "9762:1103": "<AVATAR>",
-  "2010:15581": "<AVATAR_BLOCK>",
-  "56:15608": "<AVATAR_GROUP>",
-  "9762:426": "<BUTTON>",
-  "185:852": "<BUTTON_DANGER>",
-  "2072:9432": "<BUTTON_GROUP>",
-  "2142:11380": "<CARD>",
-  "9762:1454": "<CHECKBOX>",
-  "9762:1441": "<CHECKBOX_FIELD>",
-  "9762:1426": "<CHECKBOX_GROUP>",
-  "9762:696": "<DIALOG>",
-  "9762:3084": "<DESCRIPTION>",
-  "9762:3080": "<LABEL>",
-  "9762:3082": "<LEGEND>",
-  "9762:3086": "<ERROR_MESSAGE>",
-  "9762:3121": "<FIELD_GROUP>",
-  "9762:3128": "<FIELDSET>",
-  "321:11357": "<FOOTER>",
-  "197:19740": "<FORM_LOG_IN>",
-  "197:19741": "<FORM_CONTACT>",
-  "197:19742": "<FORM_REGISTER>",
-  "197:19743": "<FORM_NEWSLETTER>",
-  "197:19744": "<FORM_FORGOT_PASSWORD>",
-  "197:23153": "<FORM_SHIPPING>",
-  "2287:22651": "<HEADER>",
-  "18:9389": "<HEADER_AUTH>",
-  "11:11508": "<ICON_BUTTON>",
-  "9762:850": "<INPUT>",
-  "2136:2263": "<INPUT_FIELD>",
-  "2159:5053": "<LOGO>",
-  "9762:720": "<MENU_MENU>",
-  "9762:760": "<MENU_HEADING>",
-  "9762:739": "<MENU_SHORTCUT>",
-  "9762:743": "<MENU_ITEM>",
-  "9762:728": "<MENU_HEADER>",
-  "9762:731": "<MENU_SEPARATOR>",
-  "2194:14984": "<NAVIGATION_PILL_LIST>",
-  "7768:19970": "<NAVIGATION_PILL>",
-  "515:5459": "<NAVIGATION_BUTTON>",
-  "524:503": "<NAVIGATION_BUTTON_LIST>",
-  "124:8256": "<NOTIFICATION>",
-  "9762:890": "<PAGINATION_PAGE>",
-  "9762:868": "<PAGINATION_GAP>",
-  "9762:880": "<PAGINATION_PREVIOUS>",
-  "9762:870": "<PAGINATION_NEXT>",
-  "9762:903": "<PAGINATION_LIST>",
-  "9762:899": "<PAGINATION>",
-  "9762:1204": "<RADIO>",
-  "9762:1412": "<RADIOFIELD>",
-  "9762:1200": "<RADIOGROUP>",
-  "2236:14989": "<SEARCH>",
-  "348:13221": "<SECTION_CARD_GRID_ICON>",
-  "348:13347": "<SECTION_CARD_GRID_TESTIMONIALS>",
-  "348:13407": "<SECTION_CARD_GRID_CONTENT_LIST>",
-  "348:14431": "<SECTION_CARD_GRID_IMAGE>",
-  "348:14983": "<SECTION_CARD_GRID_PRICING>",
-  "348:15213": "<SECTION_CARD_GRID_REVIEWS>",
-  "348:15896": "<SECTION_HERO_BASIC>",
-  "348:15901": "<SECTION_HERO_ACTIONS>",
-  "348:15919": "<SECTION_HERO_NEWSLETTER>",
-  "348:15933": "<SECTION_HERO_FORM>",
-  "348:15970": "<SECTION_HERO_IMAGE>",
-  "348:13173": "<SECTION_PAGE_ACCORDION>",
-  "348:13517": "<SECTION_PAGE_PRODUCT_RESULTS>",
-  "348:15133": "<SECTION_PAGE_NEWSLETTER>",
-  "348:15147": "<SECTION_PAGE_PRODUCT>",
-  "348:13474": "<SECTION_PANEL_IMAGE_CONTENT>",
-  "348:15101": "<SECTION_PANEL_IMAGE_CONTENT_REVERSE>",
-  "348:13470": "<SECTION_PANEL_IMAGE_DOUBLE>",
-  "348:15098": "<SECTION_PANEL_IMAGE_IMAGE>",
-  "9762:1162": "<SELECT>",
-  "2136:2336": "<SELECT_FIELD>",
-  "3734:22471": "<SLIDER>",
-  "151:9617": "<SLIDER_FIELD>",
-  "9762:1921": "<SWITCH_GROUP>",
-  "9762:1902": "<SWITCH_FIELD>",
-  "9762:1701": "<SWITCH>",
-  "3729:12963": "<TAB>",
-  "3729:13362": "<TABS>",
-  "56:8830": "<TAG>",
-  "157:10316": "<TAG_TOGGLE>",
-  "157:10352": "<TAG_TOGGLE_GROUP>",
-  "2087:8491": "<TEXT_TITLE_HERO>",
-  "2087:8490": "<TEXT_TITLE_PAGE>",
-  "2103:22298": "<TEXT_SUBTITLE>",
-  "2087:8488": "<TEXT_HEADING>",
-  "2103:22303": "<TEXT_SUBHEADING>",
-  "2087:8487": "<TEXT>",
-  "2087:8485": "<TEXT_EMPHASIS>",
-  "2087:8483": "<TEXT_LINK>",
-  "2087:8486": "<TEXT_STRONG>",
-  "2087:8484": "<TEXT_SMALL>",
-  "2104:22325": "<TEXT_CODE>",
-  "480:6149": "<TEXT_LIST>",
-  "2077:11663": "<TEXT_LIST_ITEM>",
-  "322:9321": "<TEXT_LINK_LIST>",
-  "2153:7973": "<TEXT_LINK_LIST_ITEM>",
-  "2142:11622": "<TEXT_PRICE>",
-  "2153:7834": "<TEXT_CONTENT_HEADING>",
-  "2153:7838": "<TEXT_CONTENT_TITLE>",
-  "9762:1135": "<TEXT_AREA>",
-  "9762:3088": "<TEXT_AREA_FIELD>",
-  "315:32700": "<TOOLTIP>",
-  "7753:4465": "<CARDS_PRODUCT_INFO_CARD>",
-  "7722:3736": "<CARDS_PRICING_CARD>",
-  "7717:3946": "<CARDS_TESTIMONIAL_CARD>",
-  "2236:15082": "<CARDS_STATS_CARD>",
-  "2236:16106": "<CARDS_REVIEW_CARD>",
-};
+const reverseLookup = {};
 
 figma.root.children.reduce((into, page) => {
   page
diff --git a/src/figma/compositions/Forms.figma.tsx b/src/figma/compositions/Forms.figma.tsx
index 6530086..37f8aa5 100644
--- a/src/figma/compositions/Forms.figma.tsx
+++ b/src/figma/compositions/Forms.figma.tsx
@@ -12,11 +12,7 @@ figma.connect(FormBox, "<FIGMA_URL_FORM_LOG_IN>", {
 
 figma.connect(FormBox, "<FIGMA_URL_FORM_CONTACT>", {
   props: {
-    children: figma.children([
-      "Input Field",
-      "Text Area Field",
-      "Button Group",
-    ]),
+    children: figma.children(["Input Field", "Textarea Field", "Button Group"]),
   },
   example: ({ children }) => <FormBox onSubmit={() => {}}>{children}</FormBox>,
 });
@@ -48,7 +44,7 @@ figma.connect(FormBox, "<FIGMA_URL_FORM_SHIPPING>", {
     children: figma.children([
       "Input Field",
       "Select Field",
-      "Text Area Field",
+      "Textarea Field",
       "Checkbox Field",
       "Button Group",
     ]),
diff --git a/src/figma/primitives/Checkbox.figma.tsx b/src/figma/primitives/Checkbox.figma.tsx
index ffd15a6..37a7e9b 100644
--- a/src/figma/primitives/Checkbox.figma.tsx
+++ b/src/figma/primitives/Checkbox.figma.tsx
@@ -1,53 +1,27 @@
 import figma from "@figma/code-connect";
 import { CheckboxField, CheckboxGroup } from "primitives";
 
-figma.connect(CheckboxField, "<FIGMA_URL_CHECKBOX>", {
+figma.connect(CheckboxField, "<FIGMA_URL_CHECKBOX_FIELD>", {
   props: {
-    defaultSelected: figma.enum("State", {
+    label: figma.string("Label"),
+    description: figma.boolean("Has Description", {
+      true: figma.string("Description"),
+      false: undefined,
+    }),
+    defaultSelected: figma.enum("Value Type", {
       Checked: true,
-      "Disabled Checked": true,
       Indeterminate: true,
     }),
-    isIndeterminate: figma.enum("State", {
+    isIndeterminate: figma.enum("Value Type", {
       Indeterminate: true,
     }),
     isDisabled: figma.enum("State", {
-      "Disabled Checked": true,
       Disabled: true,
     }),
   },
-
   example: ({ ...props }) => <CheckboxField {...props} />,
 });
 
-figma.connect(CheckboxField, "<FIGMA_URL_CHECKBOX_FIELD>", {
-  props: {
-    label: figma.string("Label"),
-    description: figma.boolean("Has Description", {
-      true: figma.string("Description"),
-      false: undefined,
-    }),
-    isDisabled: figma.enum("State", { Disabled: true }),
-    checkboxProps: figma.nestedProps("Checkbox", {
-      defaultSelected: figma.enum("State", {
-        Checked: true,
-        "Disabled Checked": true,
-        Indeterminate: true,
-      }),
-      isIndeterminate: figma.enum("State", {
-        Indeterminate: true,
-      }),
-    }),
-  },
-  example: ({ checkboxProps, ...props }) => (
-    <CheckboxField
-      defaultSelected={checkboxProps.defaultSelected}
-      isIndeterminate={checkboxProps.isIndeterminate}
-      {...props}
-    />
-  ),
-});
-
 figma.connect(CheckboxGroup, "<FIGMA_URL_CHECKBOX_GROUP>", {
   props: { children: figma.children(["Checkbox Field"]) },
   example: ({ children }) => <CheckboxGroup>{children}</CheckboxGroup>,
diff --git a/src/figma/primitives/Input.figma.tsx b/src/figma/primitives/Input.figma.tsx
index 032b081..cb55581 100644
--- a/src/figma/primitives/Input.figma.tsx
+++ b/src/figma/primitives/Input.figma.tsx
@@ -1,49 +1,38 @@
 import figma from "@figma/code-connect";
-import { Field, Input, InputField } from "primitives";
+import { Input, InputField } from "primitives";
 
-figma.connect(Input, "<FIGMA_URL_INPUT>", {
+figma.connect(Input, "<FIGMA_URL_INPUT_FIELD>", {
+  variant: { "Has Label": false },
   props: {
+    isDisabled: figma.enum("State", { Disabled: true }),
     value: figma.enum("Value Type", {
       Default: figma.string("Value"),
     }),
     placeholder: figma.enum("Value Type", {
-      Default: "Placeholder here...",
+      default: "I am a placeholder...",
       Placeholder: figma.string("Value"),
     }),
-    isDisabled: figma.enum("State", {
-      Disabled: true,
-    }),
   },
-  example: ({ value, placeholder, isDisabled }) => (
-    <Input value={value} placeholder={placeholder} disabled={isDisabled} />
-  ),
+  example: ({ ...props }) => <Input {...props} />,
 });
 
-figma.connect(Field, "<FIGMA_URL_INPUT_FIELD>", {
+figma.connect(InputField, "<FIGMA_URL_INPUT_FIELD>", {
+  variant: { "Has Label": true },
   props: {
     isDisabled: figma.enum("State", { Disabled: true }),
+    errorMessage: figma.enum("State", { Error: figma.string("Error") }),
+    label: figma.string("Label"),
     description: figma.boolean("Has Description", {
       true: figma.string("Description"),
       false: undefined,
     }),
-    label: figma.boolean("Has Label", {
-      true: figma.string("Label"),
-      false: undefined,
-    }),
-    errorMessage: figma.boolean("Has Error Message", {
-      true: figma.string("Error Message"),
-      false: undefined,
+    value: figma.enum("Value Type", {
+      Default: figma.string("Value"),
     }),
-    inputProps: figma.nestedProps("Input", {
-      value: figma.string("Value"),
-      placeholder: figma.string("Value"),
+    placeholder: figma.enum("Value Type", {
+      default: "I am a placeholder...",
+      Placeholder: figma.string("Value"),
     }),
   },
-  example: ({ inputProps, ...props }) => (
-    <InputField
-      value={inputProps.value}
-      placeholder={inputProps.placeholder}
-      {...props}
-    />
-  ),
+  example: ({ ...props }) => <InputField {...props} />,
 });
diff --git a/src/figma/primitives/Radio.figma.tsx b/src/figma/primitives/Radio.figma.tsx
index c2defae..2cd8f7d 100644
--- a/src/figma/primitives/Radio.figma.tsx
+++ b/src/figma/primitives/Radio.figma.tsx
@@ -1,17 +1,7 @@
 import figma from "@figma/code-connect";
 import { RadioField, RadioGroup } from "primitives";
 
-figma.connect(RadioField, "<FIGMA_URL_RADIO>", {
-  props: {
-    isDisabled: figma.enum("State", {
-      "Checked Disabled": true,
-      Disabled: true,
-    }),
-  },
-  example: ({ ...props }) => <RadioField {...props} value="unique-value" />,
-});
-
-figma.connect(RadioField, "<FIGMA_URL_RADIOFIELD>", {
+figma.connect(RadioField, "<FIGMA_URL_RADIO_FIELD>", {
   props: {
     label: figma.string("Label"),
     description: figma.boolean("Has Description", {
@@ -23,7 +13,7 @@ figma.connect(RadioField, "<FIGMA_URL_RADIOFIELD>", {
   example: ({ ...props }) => <RadioField value="Initial value" {...props} />,
 });
 
-figma.connect(RadioGroup, "<FIGMA_URL_RADIOGROUP>", {
+figma.connect(RadioGroup, "<FIGMA_URL_RADIO_GROUP>", {
   props: { children: figma.children(["Radio Field"]) },
   example: ({ children }) => <RadioGroup>{children}</RadioGroup>,
 });
diff --git a/src/figma/primitives/Select.figma.tsx b/src/figma/primitives/Select.figma.tsx
index 3785f81..f2d0c41 100644
--- a/src/figma/primitives/Select.figma.tsx
+++ b/src/figma/primitives/Select.figma.tsx
@@ -1,21 +1,22 @@
 import figma from "@figma/code-connect";
-import { Field, Select, SelectField, SelectItem } from "primitives";
+import { Select, SelectField, SelectItem } from "primitives";
 
-figma.connect(Select, "<FIGMA_URL_SELECT>", {
+figma.connect(Select, "<FIGMA_URL_SELECT_FIELD>", {
+  variant: { "Has Label": false },
   props: {
-    defaultSelectedKey: figma.string("Value"),
-    isDisabled: figma.enum("State", {
-      Disabled: true,
+    isDisabled: figma.enum("State", { Disabled: true }),
+    value: figma.enum("Value Type", {
+      Default: figma.string("Value"),
     }),
-    item1: figma.string("Value"),
-    item2: figma.string("Option 2"),
-    item3: figma.string("Option 3"),
-    item4: figma.string("Option 4"),
-    item5: figma.string("Option 5"),
+    placeholder: figma.enum("Value Type", {
+      default: "I am a placeholder...",
+      Placeholder: figma.string("Value"),
+    }),
+    defaultSelectedKey: figma.string("Value"),
   },
-  example: ({ item1, item2, item3, item4, item5, ...props }) => (
-    <Select {...props} placeholder="Select item...">
-      <SelectItem>Option 1</SelectItem>
+  example: ({ defaultSelectedKey, ...props }) => (
+    <Select defaultSelectedKey={defaultSelectedKey} {...props}>
+      <SelectItem>{defaultSelectedKey}</SelectItem>
       <SelectItem>Option 2</SelectItem>
       <SelectItem>Option 3</SelectItem>
       <SelectItem>Option 4</SelectItem>
@@ -24,33 +25,28 @@ figma.connect(Select, "<FIGMA_URL_SELECT>", {
   ),
 });
 
-figma.connect(Field, "<FIGMA_URL_SELECT_FIELD>", {
+figma.connect(SelectField, "<FIGMA_URL_SELECT_FIELD>", {
+  variant: { "Has Label": true },
   props: {
     isDisabled: figma.enum("State", { Disabled: true }),
+    errorMessage: figma.enum("State", { Error: figma.string("Error") }),
+    label: figma.string("Label"),
     description: figma.boolean("Has Description", {
       true: figma.string("Description"),
       false: undefined,
     }),
-    label: figma.boolean("Has Label", {
-      true: figma.string("Label"),
-      false: undefined,
-    }),
-    errorMessage: figma.boolean("Has Error Message", {
-      true: figma.string("Error Message"),
-      false: undefined,
+    value: figma.enum("Value Type", {
+      Default: figma.string("Value"),
     }),
-    selectProps: figma.nestedProps("Select", {
-      defaultSelectedKey: figma.string("Value"),
-      item1: figma.string("Value"),
-      item2: figma.string("Option 2"),
-      item3: figma.string("Option 3"),
-      item4: figma.string("Option 4"),
-      item5: figma.string("Option 5"),
+    placeholder: figma.enum("Value Type", {
+      Default: "I am a placeholder...",
+      Placeholder: figma.string("Value"),
     }),
+    defaultSelectedKey: figma.string("Value"),
   },
-  example: ({ selectProps, ...props }) => (
-    <SelectField defaultSelectedKey={selectProps.defaultSelectedKey} {...props}>
-      <SelectItem>{selectProps.defaultSelectedKey}</SelectItem>
+  example: ({ defaultSelectedKey, ...props }) => (
+    <SelectField defaultSelectedKey={defaultSelectedKey} {...props}>
+      <SelectItem>{defaultSelectedKey}</SelectItem>
       <SelectItem>Option 2</SelectItem>
       <SelectItem>Option 3</SelectItem>
       <SelectItem>Option 4</SelectItem>
diff --git a/src/figma/primitives/Slider.figma.tsx b/src/figma/primitives/Slider.figma.tsx
index 405ea29..fb89537 100644
--- a/src/figma/primitives/Slider.figma.tsx
+++ b/src/figma/primitives/Slider.figma.tsx
@@ -1,17 +1,9 @@
 import figma from "@figma/code-connect";
-import { Slider, SliderField } from "primitives";
-
-figma.connect(Slider, "<FIGMA_URL_SLIDER>", {
-  props: {
-    isDisabled: figma.enum("State", {
-      Disabled: true,
-    }),
-  },
-  example: ({ ...props }) => <Slider {...props} />,
-});
+import { SliderField } from "primitives";
 
 figma.connect(SliderField, "<FIGMA_URL_SLIDER_FIELD>", {
   props: {
+    isDisabled: figma.enum("State", { Disabled: true }),
     label: figma.string("Label"),
     description: figma.boolean("Has Description", {
       true: figma.string("Description"),
diff --git a/src/figma/primitives/Switch.figma.tsx b/src/figma/primitives/Switch.figma.tsx
index 42dcf6d..9d17ee2 100644
--- a/src/figma/primitives/Switch.figma.tsx
+++ b/src/figma/primitives/Switch.figma.tsx
@@ -1,42 +1,17 @@
 import figma from "@figma/code-connect";
-import { Switch, SwitchField, SwitchGroup } from "primitives";
+import { SwitchField } from "primitives";
 
-figma.connect(SwitchGroup, "<FIGMA_URL_SWITCH_GROUP>", {
-  props: { children: figma.children("Switch Field") },
-  example: ({ children }) => <SwitchGroup>{children}</SwitchGroup>,
-});
-
-figma.connect(Switch, "<FIGMA_URL_SWITCH_FIELD>", {
+figma.connect(SwitchField, "<FIGMA_URL_SWITCH_FIELD>", {
   props: {
-    label: figma.boolean("Has Label", {
-      true: figma.string("Label"),
-      false: undefined,
-    }),
+    label: figma.string("Label"),
     description: figma.boolean("Has Description", {
       true: figma.string("Description"),
       false: undefined,
     }),
-    isDisabled: figma.enum("State", { Disabled: true }),
-    switchProps: figma.nestedProps("Switch", {
-      defaultSelected: figma.enum("State", {
-        Checked: true,
-        "Disabled Checked": true,
-      }),
-    }),
-  },
-  example: ({ switchProps, ...props }) => (
-    <SwitchField defaultSelected={switchProps.defaultSelected} {...props} />
-  ),
-});
-
-figma.connect(Switch, "<FIGMA_URL_SWITCH>", {
-  props: {
-    defaultSelected: figma.enum("State", {
+    defaultSelected: figma.enum("Value Type", {
       Checked: true,
-      "Disabled Checked": true,
     }),
     isDisabled: figma.enum("State", {
-      "Disabled Checked": true,
       Disabled: true,
     }),
   },
diff --git a/src/figma/primitives/Textarea.figma.tsx b/src/figma/primitives/Textarea.figma.tsx
index 5909c54..4659ed9 100644
--- a/src/figma/primitives/Textarea.figma.tsx
+++ b/src/figma/primitives/Textarea.figma.tsx
@@ -1,48 +1,38 @@
 import figma from "@figma/code-connect";
-import { Field, Textarea, TextareaField } from "primitives";
+import { Textarea, TextareaField } from "primitives";
 
-figma.connect(Textarea, "<FIGMA_URL_TEXT_AREA>", {
+figma.connect(Textarea, "<FIGMA_URL_TEXTAREA_FIELD>", {
+  variant: { "Has Label": false },
   props: {
+    isDisabled: figma.enum("State", { Disabled: true }),
     value: figma.enum("Value Type", {
       Default: figma.string("Value"),
-      Placeholder: "",
     }),
     placeholder: figma.enum("Value Type", {
-      Default: "Placeholder here...",
+      default: "I am a placeholder...",
       Placeholder: figma.string("Value"),
     }),
-    disabled: figma.enum("State", {
-      Disabled: true,
-    }),
   },
-  example: ({ value, ...props }) => <Textarea {...props}>{value}</Textarea>,
+  example: ({ ...props }) => <Textarea {...props} />,
 });
 
-figma.connect(Field, "<FIGMA_URL_TEXT_AREA_FIELD>", {
+figma.connect(TextareaField, "<FIGMA_URL_TEXTAREA_FIELD>", {
+  variant: { "Has Label": true },
   props: {
     isDisabled: figma.enum("State", { Disabled: true }),
+    errorMessage: figma.enum("State", { Error: figma.string("Error") }),
+    label: figma.string("Label"),
     description: figma.boolean("Has Description", {
       true: figma.string("Description"),
       false: undefined,
     }),
-    label: figma.boolean("Has Label", {
-      true: figma.string("Label"),
-      false: undefined,
-    }),
-    errorMessage: figma.boolean("Has Error Message", {
-      true: figma.string("Error Message"),
-      false: undefined,
+    value: figma.enum("Value Type", {
+      Default: figma.string("Value"),
     }),
-    textAreaProps: figma.nestedProps("Text Area", {
-      value: figma.string("Value"),
-      placeholder: figma.string("Value"),
+    placeholder: figma.enum("Value Type", {
+      default: "I am a placeholder...",
+      Placeholder: figma.string("Value"),
     }),
   },
-  example: ({ textAreaProps, ...props }) => (
-    <TextareaField
-      value={textAreaProps.value}
-      placeholder={textAreaProps.placeholder}
-      {...props}
-    />
-  ),
+  example: ({ ...props }) => <TextareaField {...props} />,
 });