@primer/react 37.32.0-rc.97555af75 → 37.32.0-rc.ac9dc8093

package/generated/components.json

@@ -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",
@@ -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);

package/lib-esm/Select/Select.js

@@ -64,7 +64,7 @@ const ArrowIndicator = t0 => {
 };
 const Select = /*#__PURE__*/React.forwardRef((t0, ref) => {
   var _ref, _defaultValue;
-  const $ = c(39);
+  const $ = c(41);
   let block;
   let children;
   let className;
@@ -119,93 +119,101 @@ const Select = /*#__PURE__*/React.forwardRef((t0, ref) => {
     sx = $[11];
     validationStatus = $[12];
   }
-  const t1 = validationStatus === "error" ? "true" : "false";
-  const t2 = disabled && classes.Disabled;
-  let t3;
-  if ($[13] !== className || $[14] !== t2) {
-    t3 = clsx(className, classes.Select, t2);
+  let t1;
+  if ($[13] !== className) {
+    t1 = clsx(classes.TextInputWrapper, className);
     $[13] = className;
-    $[14] = t2;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  const t2 = validationStatus === "error" ? "true" : "false";
+  const t3 = disabled && classes.Disabled;
+  let t4;
+  if ($[15] !== t3) {
+    t4 = clsx(classes.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__*/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__*/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__*/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__*/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__*/jsx(ArrowIndicator, {
+  let t9;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /*#__PURE__*/jsx(ArrowIndicator, {
       className: classes.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__*/jsxs(TextInputWrapper, {
+  let t10;
+  if ($[32] !== block || $[33] !== contrast || $[34] !== disabled || $[35] !== size || $[36] !== sx || $[37] !== t1 || $[38] !== t8 || $[39] !== validationStatus) {
+    t10 = /*#__PURE__*/jsxs(TextInputWrapper, {
       block: block,
       contrast: contrast,
       disabled: disabled,
       size: size,
       validationStatus: validationStatus,
-      className: classes.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 $ = c(2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.32.0-rc.97555af75",
+  "version": "37.32.0-rc.ac9dc8093",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",