@primer/react 37.32.0-rc.528af41bb → 37.32.0-rc.6c9ce56d4

package/generated/components.json

@@ -989,7 +989,7 @@
       "stories": [
         {
           "id": "components-autocomplete--default",
-          "code": "() => {\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n      onSubmit={(event) => event.preventDefault()}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel-default\">\n          Label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              selectedItemIds={[]}\n              aria-labelledby=\"autocompleteLabel-default\"\n              items={items}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form\n      className={classes.DefaultForm}\n      onSubmit={(event) => event.preventDefault()}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel-default\">\n          Label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              selectedItemIds={[]}\n              aria-labelledby=\"autocompleteLabel-default\"\n              items={items}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--with-token-input",
@@ -2161,19 +2161,19 @@
         },
         {
           "id": "components-checkbox-features--with-leading-visual",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <MarkGithubIcon />\n        </FormControl.LeadingVisual>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <MarkGithubIcon />\n        </FormControl.LeadingVisual>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--disabled",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl disabled>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl disabled>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--with-caption",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n        <FormControl.Caption>This is a caption</FormControl.Caption>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n        <FormControl.Caption>This is a caption</FormControl.Caption>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--indeterminate",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <Checkbox value=\"default\" indeterminate />\n      <FormControl.Label>Default label</FormControl.Label>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <Checkbox value=\"default\" indeterminate />\n      <FormControl.Label>Default label</FormControl.Label>\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6334,51 +6334,51 @@
       "stories": [
         {
           "id": "components-select--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-option-groups",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.OptGroup label=\"Group one\">\n          <Select.Option value=\"one\">Choice one</Select.Option>\n          <Select.Option value=\"two\">Choice two</Select.Option>\n          <Select.Option value=\"three\">Choice three</Select.Option>\n          <Select.Option value=\"four\">Choice four</Select.Option>\n        </Select.OptGroup>\n        <Select.OptGroup disabled label=\"Group two\">\n          <Select.Option value=\"five\">Choice five</Select.Option>\n          <Select.Option value=\"six\">Choice six</Select.Option>\n        </Select.OptGroup>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.OptGroup label=\"Group one\">\n          <Select.Option value=\"one\">Choice one</Select.Option>\n          <Select.Option value=\"two\">Choice two</Select.Option>\n          <Select.Option value=\"three\">Choice three</Select.Option>\n          <Select.Option value=\"four\">Choice four</Select.Option>\n        </Select.OptGroup>\n        <Select.OptGroup disabled label=\"Group two\">\n          <Select.Option value=\"five\">Choice five</Select.Option>\n          <Select.Option value=\"six\">Choice six</Select.Option>\n        </Select.OptGroup>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl disabled>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl disabled>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select block>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select block>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--small",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"small\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"small\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--large",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"large\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"large\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-custom-styling",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select\n        sx={{\n          borderRadius: '12px',\n          border: '1px dashed #000000',\n        }}\n      >\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select className={classes.CustomSelect}>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-placeholder-option",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select placeholder=\"No choice selected\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select placeholder=\"No choice selected\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6836,7 +6836,7 @@
         },
         {
           "id": "components-spinner-features--suppress-screen-reader-text",
-          "code": "() => (\n  <Box\n    sx={{\n      alignItems: 'center',\n      display: 'flex',\n      gap: '0.25rem',\n    }}\n  >\n    <Spinner size=\"small\" srText={null} />\n    <AriaStatus>Loading...</AriaStatus>\n  </Box>\n)"
+          "code": "() => (\n  <Stack direction=\"horizontal\" className={classes.SuppressScreenReaderText}>\n    <Spinner size=\"small\" srText={null} />\n    <AriaStatus>Loading...</AriaStatus>\n  </Stack>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6889,7 +6889,7 @@
         },
         {
           "id": "components-splitpagelayout-features--settings-page",
-          "code": "() => (\n  <SplitPageLayout>\n    <SplitPageLayout.Pane position=\"start\" aria-label=\"Navigation Pane\">\n      <NavList aria-label=\"Main navigation\">\n        <NavList.Item href=\"#\">Profile</NavList.Item>\n        <NavList.Item href=\"#\" aria-current=\"page\">\n          Account\n        </NavList.Item>\n        <NavList.Item href=\"#\">Emails</NavList.Item>\n        <NavList.Item href=\"#\">Notifications</NavList.Item>\n      </NavList>\n    </SplitPageLayout.Pane>\n    <SplitPageLayout.Content>\n      <Heading\n        as=\"h2\"\n        sx={{\n          fontSize: 4,\n          fontWeight: 'normal',\n          color: 'danger.fg',\n          mb: 2,\n        }}\n      >\n        Danger zone\n      </Heading>\n      <Box\n        sx={{\n          border: '1px solid',\n          borderColor: 'danger.emphasis',\n          borderRadius: 2,\n          p: 3,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 3,\n        }}\n      >\n        <Box\n          sx={{\n            display: 'grid',\n            gap: 1,\n          }}\n        >\n          <Text\n            sx={{\n              fontSize: 1,\n              fontWeight: 'bold',\n              color: 'danger.fg',\n            }}\n          >\n            Delete account\n          </Text>\n          <Text\n            sx={{\n              fontSize: 1,\n              color: 'fg.muted',\n            }}\n          >\n            Are you sure you don&apos;t want to just downgrade your account to a\n            free account? We won&apos;t charge your credit card anymore.\n          </Text>\n        </Box>\n        <Button variant=\"danger\">Delete account</Button>\n      </Box>\n    </SplitPageLayout.Content>\n  </SplitPageLayout>\n)"
+          "code": "() => (\n  <SplitPageLayout>\n    <SplitPageLayout.Pane position=\"start\" aria-label=\"Navigation Pane\">\n      <NavList aria-label=\"Main navigation\">\n        <NavList.Item href=\"#\">Profile</NavList.Item>\n        <NavList.Item href=\"#\" aria-current=\"page\">\n          Account\n        </NavList.Item>\n        <NavList.Item href=\"#\">Emails</NavList.Item>\n        <NavList.Item href=\"#\">Notifications</NavList.Item>\n      </NavList>\n    </SplitPageLayout.Pane>\n    <SplitPageLayout.Content>\n      <Heading as=\"h2\" className={classes.SectionHeading}>\n        Danger zone\n      </Heading>\n      <div className={classes.DeleteAccountContainer}>\n        <div className={classes.DeleteAccountTextContainer}>\n          <Text className={classes.DeleteAccountTitle}>Delete account</Text>\n          <Text className={classes.DeleteAccountDescription}>\n            Are you sure you don&apos;t want to just downgrade your account to a\n            free account? We won&apos;t charge your credit card anymore.\n          </Text>\n        </div>\n        <Button variant=\"danger\">Delete account</Button>\n      </div>\n    </SplitPageLayout.Content>\n  </SplitPageLayout>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -7419,11 +7419,11 @@
         },
         {
           "id": "components-text-features--polymorphism",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'flex',\n      flexDirection: 'column',\n    }}\n  >\n    <Text as=\"em\">Emphasized text</Text>\n    <Text as=\"i\">Italicized text</Text>\n    <Text as=\"strong\">Strong text</Text>\n    <Text as=\"small\">Small text</Text>\n    <Text as=\"u\">Text with underline</Text>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PolymorphismContainer}>\n    <Text as=\"em\">Emphasized text</Text>\n    <Text as=\"i\">Italicized text</Text>\n    <Text as=\"strong\">Strong text</Text>\n    <Text as=\"small\">Small text</Text>\n    <Text as=\"u\">Text with underline</Text>\n  </div>\n)"
         },
         {
           "id": "components-text-features--styled-text",
-          "code": "() => (\n  <Text\n    as=\"p\"\n    sx={{\n      color: 'fg.onEmphasis',\n      bg: 'neutral.emphasis',\n      p: 2,\n    }}\n    size=\"small\"\n  >\n    Stylized text\n  </Text>\n)"
+          "code": "() => (\n  <Text as=\"p\" className={classes.StyledText} size=\"small\">\n    Stylized text\n  </Text>\n)"
         },
         {
           "id": "components-text-features--size-small",
@@ -7490,67 +7490,67 @@
       "stories": [
         {
           "id": "components-textinput--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput disabled />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput disabled />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <TextInput />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <TextInput />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <TextInput />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <TextInput />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"success\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"success\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput block />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput block />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--small",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"small\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"small\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--large",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--required",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl required>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl required>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--with-leading-visual",
-          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput leadingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput leadingVisual=\"$\" />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput leadingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput leadingVisual=\"$\" />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-trailing-icon",
-          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <Box>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput trailingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput trailingVisual=\"minutes\" placeholder=\"200\" />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <div>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput trailingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput trailingVisual=\"minutes\" placeholder=\"200\" />\n      </FormControl>\n    </div>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-trailing-action",
-          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-tooltip-direction",
-          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                  tooltipDirection=\"nw\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                  tooltipDirection=\"nw\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-loading-indicator",
-          "code": "(args: FormControlArgs<TextInputProps>) => {\n  return (\n    <Box as=\"form\">\n      <h3>No visual</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"auto\" {...args} />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"leading\" {...args} loaderPosition=\"leading\" />\n        </FormControl>\n      </Box>\n      <Box mb={5}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"trailing\" {...args} loaderPosition=\"trailing\" />\n        </FormControl>\n      </Box>\n\n      <h3>Leading visual</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput leadingVisual={Calendar} {...args} value=\"auto\" />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={5}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </Box>\n\n      <h3>Trailing visual</h3>\n      <FormControl>\n        <Box mb={2}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput trailingVisual={Calendar} {...args} value=\"auto\" />\n          </FormControl>\n        </Box>\n        <Box mb={2}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"leading\"\n              value=\"leading\"\n            />\n          </FormControl>\n        </Box>\n        <Box mb={5}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"trailing\"\n              value=\"trailing\"\n            />\n          </FormControl>\n        </Box>\n      </FormControl>\n\n      <h3>Both visuals</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"small\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            value=\"auto\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"large\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </Box>\n    </Box>\n  )\n}"
+          "code": "(args: FormControlArgs<TextInputProps>) => {\n  return (\n    <div>\n      <h3>No visual</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"auto\" {...args} />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"leading\" {...args} loaderPosition=\"leading\" />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottomLarge}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"trailing\" {...args} loaderPosition=\"trailing\" />\n        </FormControl>\n      </div>\n\n      <h3>Leading visual</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput leadingVisual={Calendar} {...args} value=\"auto\" />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottomLarge}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </div>\n\n      <h3>Trailing visual</h3>\n      <FormControl>\n        <div className={classes.MarginBottom}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput trailingVisual={Calendar} {...args} value=\"auto\" />\n          </FormControl>\n        </div>\n        <div className={classes.MarginBottom}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"leading\"\n              value=\"leading\"\n            />\n          </FormControl>\n        </div>\n        <div className={classes.MarginBottomLarge}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"trailing\"\n              value=\"trailing\"\n            />\n          </FormControl>\n        </div>\n      </FormControl>\n\n      <h3>Both visuals</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"small\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            value=\"auto\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"large\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </div>\n    </div>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-autocomplete-attribute",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>First name</FormControl.Label>\n      <TextInput autoComplete=\"given-name\" />\n    </FormControl>\n    <FormControl>\n      <FormControl.Label>Last name</FormControl.Label>\n      <TextInput autoComplete=\"family-name\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>First name</FormControl.Label>\n      <TextInput autoComplete=\"given-name\" />\n    </FormControl>\n    <FormControl>\n      <FormControl.Label>Last name</FormControl.Label>\n      <TextInput autoComplete=\"family-name\" />\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -7750,31 +7750,31 @@
         },
         {
           "id": "components-textinputwithtokens-features--with-loading-indicator",
-          "code": "(args: FormControlArgs<TextInputWithTokensProps>) => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box\n      display=\"grid\"\n      sx={{\n        gap: 3,\n      }}\n      as=\"form\"\n    >\n      <FormControl>\n        <FormControl.Label>No visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Leading visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Both visuals</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n          trailingVisual={CheckIcon}\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "(args: FormControlArgs<TextInputWithTokensProps>) => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form className={classes.Grid}>\n      <FormControl>\n        <FormControl.Label>No visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Leading visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Both visuals</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n          trailingVisual={CheckIcon}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinputwithtokens-features--using-issue-label-tokens",
-          "code": "() => {\n  const [tokens, setTokens] = useState([\n    {\n      text: 'enhancement',\n      id: 1,\n      fillColor: '#a2eeef',\n    },\n    {\n      text: 'bug',\n      id: 2,\n      fillColor: '#d73a4a',\n    },\n    {\n      text: 'good first issue',\n      id: 3,\n      fillColor: '#0cf478',\n    },\n  ])\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokenComponent={IssueLabelToken}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [tokens, setTokens] = useState([\n    {\n      text: 'enhancement',\n      id: 1,\n      fillColor: '#a2eeef',\n    },\n    {\n      text: 'bug',\n      id: 2,\n      fillColor: '#d73a4a',\n    },\n    {\n      text: 'good first issue',\n      id: 3,\n      fillColor: '#0cf478',\n    },\n  ])\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokenComponent={IssueLabelToken}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinputwithtokens-features--unstyled",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label visuallyHidden>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          sx={{\n            border: '0',\n            padding: '0',\n            boxShadow: 'none',\n            ':focus-within': {\n              border: '0',\n              boxShadow: 'none',\n            },\n          }}\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label visuallyHidden>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          className={classes.Unstyled}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinputwithtokens-features--prevent-tokens-from-wrapping",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          preventTokenWrapping\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          preventTokenWrapping\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinputwithtokens-features--max-height",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 7))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box\n      sx={{\n        maxWidth: '300px',\n      }}\n    >\n      {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */}\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          maxHeight={70}\n          block // `block` only needed to fill parent width without overflowing\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 7))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <div className={classes.MaxWidth}>\n      {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */}\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          maxHeight={70}\n          block // `block` only needed to fill parent width without overflowing\n        />\n      </FormControl>\n    </div>\n  )\n}"
         },
         {
           "id": "components-textinputwithtokens-features--size",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          size=\"small\"\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          size=\"small\"\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinputwithtokens-features--truncated",
-          "code": "() => {\n  const [tokens, setTokens] = useState(mockTokens)\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          visibleTokenCount={5}\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [tokens, setTokens] = useState(mockTokens)\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          visibleTokenCount={5}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -7851,39 +7851,39 @@
       "stories": [
         {
           "id": "components-textarea--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea disabled />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea disabled />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Textarea />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Textarea />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Textarea />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Textarea />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea block />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea block />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-height",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea rows={3} />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea rows={3} />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-width",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea cols={60} />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea cols={60} />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-resize-behavior",

package/lib/Select/Select.js

@@ -70,7 +70,7 @@ const ArrowIndicator = t0 => {
 };
 const Select = /*#__PURE__*/React__default.default.forwardRef((t0, ref) => {
   var _ref, _defaultValue;
-  const $ = reactCompilerRuntime.c(39);
+  const $ = reactCompilerRuntime.c(41);
   let block;
   let children;
   let className;
@@ -125,93 +125,101 @@ const Select = /*#__PURE__*/React__default.default.forwardRef((t0, ref) => {
     sx = $[11];
     validationStatus = $[12];
   }
-  const t1 = validationStatus === "error" ? "true" : "false";
-  const t2 = disabled && Select_module.Disabled;
-  let t3;
-  if ($[13] !== className || $[14] !== t2) {
-    t3 = clsx.clsx(className, Select_module.Select, t2);
+  let t1;
+  if ($[13] !== className) {
+    t1 = clsx.clsx(Select_module.TextInputWrapper, className);
     $[13] = className;
-    $[14] = t2;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  const t2 = validationStatus === "error" ? "true" : "false";
+  const t3 = disabled && Select_module.Disabled;
+  let t4;
+  if ($[15] !== t3) {
+    t4 = clsx.clsx(Select_module.Select, t3);
     $[15] = t3;
+    $[16] = t4;
   } else {
-    t3 = $[15];
+    t4 = $[16];
   }
-  const t4 = Boolean(placeholder);
-  const t5 = (_ref = (_defaultValue = defaultValue) !== null && _defaultValue !== void 0 ? _defaultValue : placeholder) !== null && _ref !== void 0 ? _ref : undefined;
-  let t6;
-  if ($[16] !== placeholder || $[17] !== required) {
-    t6 = placeholder && /*#__PURE__*/jsxRuntime.jsx("option", {
+  const t5 = Boolean(placeholder);
+  const t6 = (_ref = (_defaultValue = defaultValue) !== null && _defaultValue !== void 0 ? _defaultValue : placeholder) !== null && _ref !== void 0 ? _ref : undefined;
+  let t7;
+  if ($[17] !== placeholder || $[18] !== required) {
+    t7 = placeholder && /*#__PURE__*/jsxRuntime.jsx("option", {
       value: "",
       disabled: required,
       hidden: required,
       children: placeholder
     });
-    $[16] = placeholder;
-    $[17] = required;
-    $[18] = t6;
+    $[17] = placeholder;
+    $[18] = required;
+    $[19] = t7;
   } else {
-    t6 = $[18];
+    t7 = $[19];
   }
-  let t7;
-  if ($[19] !== children || $[20] !== disabled || $[21] !== ref || $[22] !== required || $[23] !== rest || $[24] !== t1 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6) {
-    t7 = /*#__PURE__*/jsxRuntime.jsxs("select", {
+  let t8;
+  if ($[20] !== children || $[21] !== disabled || $[22] !== ref || $[23] !== required || $[24] !== rest || $[25] !== t2 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6 || $[29] !== t7) {
+    t8 = /*#__PURE__*/jsxRuntime.jsxs("select", {
       ...rest,
       ref: ref,
       required: required,
       disabled: disabled,
-      "aria-invalid": t1,
-      className: t3,
-      "data-hasplaceholder": t4,
-      defaultValue: t5,
-      children: [t6, children]
+      "aria-invalid": t2,
+      className: t4,
+      "data-hasplaceholder": t5,
+      defaultValue: t6,
+      children: [t7, children]
     });
-    $[19] = children;
-    $[20] = disabled;
-    $[21] = ref;
-    $[22] = required;
-    $[23] = rest;
-    $[24] = t1;
-    $[25] = t3;
+    $[20] = children;
+    $[21] = disabled;
+    $[22] = ref;
+    $[23] = required;
+    $[24] = rest;
+    $[25] = t2;
     $[26] = t4;
     $[27] = t5;
     $[28] = t6;
     $[29] = t7;
+    $[30] = t8;
   } else {
-    t7 = $[29];
+    t8 = $[30];
   }
-  let t8;
-  if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = /*#__PURE__*/jsxRuntime.jsx(ArrowIndicator, {
+  let t9;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /*#__PURE__*/jsxRuntime.jsx(ArrowIndicator, {
       className: Select_module.ArrowIndicator
     });
-    $[30] = t8;
+    $[31] = t9;
   } else {
-    t8 = $[30];
+    t9 = $[31];
   }
-  let t9;
-  if ($[31] !== block || $[32] !== contrast || $[33] !== disabled || $[34] !== size || $[35] !== sx || $[36] !== t7 || $[37] !== validationStatus) {
-    t9 = /*#__PURE__*/jsxRuntime.jsxs(TextInputWrapper.TextInputWrapper, {
+  let t10;
+  if ($[32] !== block || $[33] !== contrast || $[34] !== disabled || $[35] !== size || $[36] !== sx || $[37] !== t1 || $[38] !== t8 || $[39] !== validationStatus) {
+    t10 = /*#__PURE__*/jsxRuntime.jsxs(TextInputWrapper.TextInputWrapper, {
       block: block,
       contrast: contrast,
       disabled: disabled,
       size: size,
       validationStatus: validationStatus,
-      className: Select_module.TextInputWrapper,
+      className: t1,
       sx: sx,
-      children: [t7, t8]
+      children: [t8, t9]
     });
-    $[31] = block;
-    $[32] = contrast;
-    $[33] = disabled;
-    $[34] = size;
-    $[35] = sx;
-    $[36] = t7;
-    $[37] = validationStatus;
-    $[38] = t9;
+    $[32] = block;
+    $[33] = contrast;
+    $[34] = disabled;
+    $[35] = size;
+    $[36] = sx;
+    $[37] = t1;
+    $[38] = t8;
+    $[39] = validationStatus;
+    $[40] = t10;
   } else {
-    t9 = $[38];
+    t10 = $[40];
   }
-  return t9;
+  return t10;
 });
 const Option = props => {
   const $ = reactCompilerRuntime.c(2);