@primer/react 37.32.0-rc.f648ca0d1 → 38.0.0-rc.0

package/dist/components.css

@@ -2010,8 +2010,7 @@ Add a border between the body and footer if:
     }
   }
 
-  &:focus,
-  &:focus-within {
+  &:focus-visible {
     @mixin focusOutline 2px;
   }
 
@@ -5517,9 +5516,11 @@ span wrapping svg or text */
   display: flex;
   overflow: hidden;
   /* stylelint-disable-next-line primer/colors */
-  background-color: var(--borderColor-default);
+  background-color: var(--progressBar-track-bgColor);
   border-radius: var(--borderRadius-small);
   gap: 2px;
+  outline: solid 1px var(--progressBar-track-borderColor);
+  outline-offset: -1px;
 
   &:where([data-progress-display='inline']) {
     display: inline-flex;

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",
@@ -2440,11 +2440,11 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/CircleOcticon",
       "id": "circle_octicon",
       "name": "CircleOcticon",
-      "status": "alpha",
+      "status": "deprecated",
       "a11yReviewed": "2025-01-08",
       "stories": [
         {
-          "id": "components-circleocticon--default",
+          "id": "deprecated-components-circleocticon--default",
           "code": "() => (\n  <CircleOcticon\n    icon={CheckIcon}\n    size={32}\n    sx={{\n      backgroundColor: 'success.emphasis',\n      color: 'fg.onEmphasis',\n    }}\n    aria-label=\"Changes approved\"\n  />\n)"
         }
       ],
@@ -2488,6 +2488,10 @@
         {
           "id": "components-confirmationdialog-features--shorthand-hook-from-action-menu",
           "code": "() => {\n  const confirm = useConfirm()\n  const [text, setText] = useState('open me')\n  const onButtonClick = useCallback(async () => {\n    if (\n      await confirm({\n        title: 'Are you sure?',\n        content: 'Do you really want to do a trick?',\n      })\n    ) {\n      setText('tada!')\n    }\n  }, [confirm])\n  return (\n    <div className={classes.ButtonContainer}>\n      <ActionMenu>\n        <ActionMenu.Button>{text}</ActionMenu.Button>\n        <ActionMenu.Overlay>\n          <ActionList>\n            <ActionList.Item onSelect={onButtonClick}>\n              Do a trick!\n            </ActionList.Item>\n          </ActionList>\n        </ActionMenu.Overlay>\n      </ActionMenu>\n    </div>\n  )\n}"
+        },
+        {
+          "id": "components-confirmationdialog-features--loading-states",
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [isConfirmLoading, setIsConfirmLoading] = useState(false)\n  const [isCancelLoading, setIsCancelLoading] = useState(false)\n  const handleConfirm = useCallback(() => {\n    setIsConfirmLoading(true)\n    // Simulate async operation\n    setTimeout(() => {\n      setIsConfirmLoading(false)\n      setIsOpen(false)\n    }, 2000)\n  }, [])\n  const handleCancel = useCallback(() => {\n    setIsCancelLoading(true)\n    // Simulate async operation\n    setTimeout(() => {\n      setIsCancelLoading(false)\n      setIsOpen(false)\n    }, 1500)\n  }, [])\n  const handleClose = useCallback(\n    (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => {\n      if (gesture === 'confirm') {\n        handleConfirm()\n      } else if (gesture === 'cancel') {\n        handleCancel()\n      } else {\n        setIsOpen(false)\n      }\n    },\n    [handleConfirm, handleCancel],\n  )\n  return (\n    <div className={classes.ButtonContainer}>\n      <Button onClick={() => setIsOpen(true)}>Show Loading Dialog</Button>\n      {isOpen && (\n        <ConfirmationDialog\n          title=\"Delete this file?\"\n          confirmButtonType=\"danger\"\n          confirmButtonContent=\"Delete\"\n          confirmButtonLoading={isConfirmLoading}\n          cancelButtonLoading={isCancelLoading}\n          onClose={handleClose}\n        >\n          This action cannot be undone. The file will be permanently deleted\n          from your repository.\n        </ConfirmationDialog>\n      )}\n    </div>\n  )\n}"
         }
       ],
       "props": [
@@ -5661,15 +5665,15 @@
         },
         {
           "id": "components-progressbar-features--inline",
-          "code": "() => (\n  <ProgressBar\n    inline\n    progress=\"66\"\n    sx={{\n      width: '100px',\n    }}\n    aria-label=\"Upload test.png\"\n  />\n)"
+          "code": "() => (\n  <ProgressBar\n    inline\n    progress=\"66\"\n    style={{\n      width: '100px',\n    }}\n    aria-label=\"Upload test.png\"\n  />\n)"
         },
         {
-          "id": "components-progressbar-features--color",
-          "code": "() => (\n  <ProgressBar progress=\"66\" bg=\"done.emphasis\" aria-label=\"Upload test.png\" />\n)"
+          "id": "components-progressbar-features--all-colors",
+          "code": "() => (\n  <ProgressBar aria-label=\"Upload test.png\">\n    <ProgressBar.Item\n      progress={20}\n      aria-label=\"Photo Usage\"\n      bg=\"accent.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={15}\n      aria-label=\"Application Usage\"\n      bg=\"danger.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={12}\n      aria-label=\"Music Usage\"\n      bg=\"severe.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={11}\n      aria-label=\"Music Usage\"\n      bg=\"done.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={8}\n      aria-label=\"Music Usage\"\n      bg=\"sponsors.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={7}\n      aria-label=\"Music Usage\"\n      bg=\"neutral.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={7}\n      aria-label=\"Music Usage\"\n      bg=\"attention.emphasis\"\n    />\n  </ProgressBar>\n)"
         },
         {
           "id": "components-progressbar-features--multiple-items",
-          "code": "() => (\n  <ProgressBar>\n    <ProgressBar.Item\n      progress={33}\n      aria-label=\"Photo Usage\"\n      sx={{\n        bg: 'accent.emphasis',\n      }}\n    />\n    <ProgressBar.Item\n      progress={23}\n      aria-label=\"Application Usage\"\n      bg={'danger.emphasis'}\n    />\n    <ProgressBar.Item\n      progress={14}\n      aria-label=\"Music Usage\"\n      bg={'severe.emphasis'}\n    />\n  </ProgressBar>\n)"
+          "code": "() => (\n  <ProgressBar>\n    <ProgressBar.Item\n      progress={33}\n      aria-label=\"Photo Usage\"\n      bg=\"accent.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={23}\n      aria-label=\"Application Usage\"\n      bg={'danger.emphasis'}\n    />\n    <ProgressBar.Item\n      progress={14}\n      aria-label=\"Music Usage\"\n      bg={'severe.emphasis'}\n    />\n  </ProgressBar>\n)"
         },
         {
           "id": "components-progressbar-features--animated",
@@ -6334,51 +6338,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 +6840,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 +6893,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",
@@ -8555,7 +8559,7 @@
         },
         {
           "id": "components-treeview-features--controlled",
-          "code": "() => {\n  const [currentPath, setCurrentPath] = React.useState<string[]>([\n    'src',\n    'Avatar.tsx',\n  ])\n  const [tree, setTree] = React.useState<TreeItem[]>(initialTree)\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gap: 3,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          gap: 2,\n        }}\n      >\n        <Button onClick={() => setTree(collapseAll)}>Collapse all</Button>\n        <Button onClick={() => setTree(expandAll)}>Expand all</Button>\n      </Box>\n      <nav aria-label=\"Files\">\n        <CurrentPathContext.Provider\n          value={{\n            currentPath,\n            setCurrentPath,\n          }}\n        >\n          <TreeView aria-label=\"Files\">\n            {tree.map((item) => (\n              <TreeItem\n                key={item.data.name}\n                item={item}\n                path={[item.data.name]}\n                onExpandedChange={(path, expanded) =>\n                  setTree((tree) => setExpanded(tree, path, expanded))\n                }\n              />\n            ))}\n          </TreeView>\n        </CurrentPathContext.Provider>\n      </nav>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [currentPath, setCurrentPath] = React.useState<string[]>([\n    'src',\n    'Avatar.tsx',\n  ])\n  const [tree, setTree] = React.useState<TreeItem[]>(initialTree)\n  return (\n    <div className={classes.ControlledContainer}>\n      <div className={classes.ButtonContainer}>\n        <Button onClick={() => setTree(collapseAll)}>Collapse all</Button>\n        <Button onClick={() => setTree(expandAll)}>Expand all</Button>\n      </div>\n      <nav aria-label=\"Files\">\n        <CurrentPathContext.Provider\n          value={{\n            currentPath,\n            setCurrentPath,\n          }}\n        >\n          <TreeView aria-label=\"Files\">\n            {tree.map((item) => (\n              <TreeItem\n                key={item.data.name}\n                item={item}\n                path={[item.data.name]}\n                onExpandedChange={(path, expanded) =>\n                  setTree((tree) => setExpanded(tree, path, expanded))\n                }\n              />\n            ))}\n          </TreeView>\n        </CurrentPathContext.Provider>\n      </nav>\n    </div>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",

package/lib/Autocomplete/AutocompleteMenu.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var React = require('react');
-var index = require('../node_modules/@github/mini-throttle/dist/index.js');
+var miniThrottle = require('@github/mini-throttle');
 var liveRegionElement = require('@primer/live-region-element');
 var behaviors = require('@primer/behaviors');
-var index$1 = require('../ActionList/index.js');
+var index = require('../ActionList/index.js');
 var useFocusZone = require('../hooks/useFocusZone.js');
 var useId = require('../hooks/useId.js');
 var AutocompleteContext = require('./AutocompleteContext.js');
@@ -49,7 +49,7 @@ function getItemById(itemId, items) {
  * Announces a message to screen readers at a slowed-down rate. This is useful when you want to announce don't want to
  * overwhelm the user with too many announcements in rapid succession.
  */
-const debounceAnnouncement = index.debounce(announcement => {
+const debounceAnnouncement = miniThrottle.debounce(announcement => {
   liveRegionElement.announce(announcement);
 }, 250);
 function AutocompleteMenu(props) {
@@ -207,7 +207,7 @@ function AutocompleteMenu(props) {
       children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: listContainerRef,
-      children: allItemsToRender.length ? /*#__PURE__*/jsxRuntime.jsx(index$1.ActionList, {
+      children: allItemsToRender.length ? /*#__PURE__*/jsxRuntime.jsx(index.ActionList, {
         selectionVariant: selectionVariant // TODO: make this configurable
         ,
         role: "listbox",
@@ -226,14 +226,14 @@ function AutocompleteMenu(props) {
             key,
             ...itemProps
           } = item_2;
-          return /*#__PURE__*/jsxRuntime.jsxs(index$1.ActionList.Item, {
+          return /*#__PURE__*/jsxRuntime.jsxs(index.ActionList.Item, {
             onSelect: () => onAction(item_2),
             ...itemProps,
             id: id_0,
             "data-id": id_0,
-            children: [LeadingVisual && /*#__PURE__*/jsxRuntime.jsx(index$1.ActionList.LeadingVisual, {
+            children: [LeadingVisual && /*#__PURE__*/jsxRuntime.jsx(index.ActionList.LeadingVisual, {
               children: reactIs.isElement(LeadingVisual) ? LeadingVisual : /*#__PURE__*/jsxRuntime.jsx(LeadingVisual, {})
-            }), children !== null && children !== void 0 ? children : text, TrailingVisual && /*#__PURE__*/jsxRuntime.jsx(index$1.ActionList.TrailingVisual, {
+            }), children !== null && children !== void 0 ? children : text, TrailingVisual && /*#__PURE__*/jsxRuntime.jsx(index.ActionList.TrailingVisual, {
               children: reactIs.isElement(TrailingVisual) ? TrailingVisual : /*#__PURE__*/jsxRuntime.jsx(TrailingVisual, {})
             })]
           }, key !== null && key !== void 0 ? key : id_0);

package/lib/CircleOcticon/CircleOcticon.d.ts

@@ -8,6 +8,9 @@ export type CircleOcticonProps = {
         size?: IconProps['size'];
     }>>;
 } & BoxProps;
+/**
+ * @deprecated This component is deprecated. Replace component with specific icon imports from `@primer/octicons-react` and customized styling.)
+ */
 declare function CircleOcticon(props: CircleOcticonProps): React.JSX.Element;
 export default CircleOcticon;
 //# sourceMappingURL=CircleOcticon.d.ts.map

package/lib/CircleOcticon/CircleOcticon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircleOcticon.d.ts","sourceRoot":"","sources":["../../src/CircleOcticon/CircleOcticon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAQ,CAAA;AAGpC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;KAAC,CAAC,CAAC,CAAA;CAC/E,GAAG,QAAQ,CAAA;AAEZ,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAkB/C;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"CircleOcticon.d.ts","sourceRoot":"","sources":["../../src/CircleOcticon/CircleOcticon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAQ,CAAA;AAGpC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;KAAC,CAAC,CAAC,CAAA;CAC/E,GAAG,QAAQ,CAAA;AAEZ;;GAEG;AACH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAkB/C;AAED,eAAe,aAAa,CAAA"}

package/lib/CircleOcticon/CircleOcticon.js

@@ -4,6 +4,9 @@ var reactCompilerRuntime = require('react-compiler-runtime');
 var jsxRuntime = require('react/jsx-runtime');
 var Box = require('../Box/Box.js');
 
+/**
+ * @deprecated This component is deprecated. Replace component with specific icon imports from `@primer/octicons-react` and customized styling.)
+ */
 function CircleOcticon(props) {
   const $ = reactCompilerRuntime.c(21);
   let IconComponent;

package/lib/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -26,6 +26,14 @@ export interface ConfirmationDialogProps {
      * The type of button to use for the confirm button. Default: Button.
      */
     confirmButtonType?: 'normal' | 'primary' | 'danger';
+    /**
+     * Whether the cancel button is in a loading state. Default: false.
+     */
+    cancelButtonLoading?: boolean;
+    /**
+     * Whether the confirm button is in a loading state. Default: false.
+     */
+    confirmButtonLoading?: boolean;
     /**
      * Additional class names to apply to the dialog
      */

package/lib/ConfirmationDialog/ConfirmationDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAoD,WAAW,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAA;AAMlH;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAA;IAE5E;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAErC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEnD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAiCD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAgDzF,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AA2BlG;;;;GAIG;AACH,wBAAgB,UAAU,cAGZ,cAAc,sBAO3B"}
+{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAoD,WAAW,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAA;AAMlH;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAA;IAE5E;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAErC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEnD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAiCD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAoDzF,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AA2BlG;;;;GAIG;AACH,wBAAgB,UAAU,cAGZ,cAAc,sBAO3B"}

package/lib/ConfirmationDialog/ConfirmationDialog.js

@@ -71,6 +71,8 @@ const ConfirmationDialog = props => {
     cancelButtonContent = 'Cancel',
     confirmButtonContent = 'OK',
     confirmButtonType = 'normal',
+    cancelButtonLoading = false,
+    confirmButtonLoading = false,
     children,
     className,
     width = 'medium',
@@ -86,13 +88,15 @@ const ConfirmationDialog = props => {
   const cancelButton = {
     content: cancelButtonContent,
     onClick: onCancelButtonClick,
-    autoFocus: isConfirmationDangerous
+    autoFocus: isConfirmationDangerous,
+    loading: cancelButtonLoading
   };
   const confirmButton = {
     content: confirmButtonContent,
     buttonType: confirmButtonType,
     onClick: onConfirmButtonClick,
-    autoFocus: !isConfirmationDangerous
+    autoFocus: !isConfirmationDangerous,
+    loading: confirmButtonLoading
   };
   const footerButtons = [cancelButton, confirmButton];
   return /*#__PURE__*/jsxRuntime.jsx(Dialog.Dialog, {

package/lib/ProgressBar/ProgressBar-a0957632.css

@@ -0,0 +1,2 @@
+@keyframes prc-ProgressBar-shimmer-i1RxN{0%{mask-position:200%}to{mask-position:0}}.prc-ProgressBar-ProgressBarItem-stL6O{background-color:var(--progress-bg);width:var(--progress-width)}@media (prefers-reduced-motion:no-preference){.prc-ProgressBar-ProgressBarItem-stL6O[data-animated=true]{animation-duration:1s;animation-iteration-count:infinite;animation-name:prc-ProgressBar-shimmer-i1RxN;mask-image:linear-gradient(75deg,#000 30%,rgba(0,0,0,.65) 80%);mask-size:200%}}.prc-ProgressBar-ProgressBarContainer-E-z8S{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-small,.1875rem);display:flex;gap:2px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-display=inline]){display:inline-flex}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=default]){height:8px}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=small]){height:5px}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=large]){height:10px}
+/*# sourceMappingURL=ProgressBar-a0957632.css.map */

package/lib/ProgressBar/ProgressBar-a0957632.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ProgressBar/ProgressBar.module.css"],"names":[],"mappings":"AAAA,yCACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,uCAGE,mCAAoC,CAFpC,2BAaF,CATE,8CACE,2DAIE,qBAAsB,CACtB,kCAAmC,CAFnC,4CAAuB,CAFvB,8DAAqE,CACrE,cAIF,CACF,CAGF,4CAIE,iDAAkD,CAClD,gDAAwC,CAJxC,YAAa,CAKb,OAAQ,CACR,sDAAuD,CACvD,mBAAoB,CANpB,eAuBF,CAfE,kFACE,mBACF,CAEA,oFACE,UACF,CAEA,kFACE,UACF,CAEA,kFACE,WACF","file":"ProgressBar-a0957632.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.ProgressBarItem {\n  width: var(--progress-width);\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--progress-bg);\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-animated='true'] {\n      mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);\n      mask-size: 200%;\n      animation-name: shimmer;\n      animation-duration: 1s;\n      animation-iteration-count: infinite;\n    }\n  }\n}\n\n.ProgressBarContainer {\n  display: flex;\n  overflow: hidden;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--progressBar-track-bgColor);\n  border-radius: var(--borderRadius-small);\n  gap: 2px;\n  outline: solid 1px var(--progressBar-track-borderColor);\n  outline-offset: -1px;\n\n  &:where([data-progress-display='inline']) {\n    display: inline-flex;\n  }\n\n  &:where([data-progress-bar-size='default']) {\n    height: 8px;\n  }\n\n  &:where([data-progress-bar-size='small']) {\n    height: 5px;\n  }\n\n  &:where([data-progress-bar-size='large']) {\n    height: 10px;\n  }\n}\n"]}

package/lib/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AAC7C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAKjC,KAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,UAAU,GACZ,MAAM,CAAA;AAER,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,YAAY,GACd,MAAM,CAAA;AAER,eAAO,MAAM,IAAI;mBALA,MAAM;gBACT,MAAM;iEAiDnB,CAAA;AAID,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,4BAA4B,GAC9B,YAAY,CAAA;AAEd,eAAO,MAAM,WAAW;SALjB,MAAM;gBACC,MAAM;;aA/DT,OAAO;cACN,OAAO,GAAG,SAAS,GAAG,OAAO;eAC5B,OAAO;mPAkHnB,CAAA"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AAC7C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAKjC,KAAK,YAAY,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,UAAU,GACZ,MAAM,CAAA;AAER,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,YAAY,GACd,MAAM,CAAA;AAER,eAAO,MAAM,IAAI;mBALA,MAAM;gBACT,MAAM;iEAmDnB,CAAA;AAID,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,4BAA4B,GAC9B,YAAY,CAAA;AAEd,eAAO,MAAM,WAAW;SALjB,MAAM;gBACC,MAAM;;aAjET,OAAO;cACN,OAAO,GAAG,SAAS,GAAG,OAAO;eAC5B,OAAO;mPAoHnB,CAAA"}

package/lib/ProgressBar/ProgressBar.js

@@ -12,10 +12,11 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 const Item = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = reactCompilerRuntime.c(32);
+  const $ = reactCompilerRuntime.c(33);
   let ariaLabel;
   let ariaValueNow;
   let ariaValueText;
+  let bg;
   let className;
   let progress;
   let rest;
@@ -28,93 +29,96 @@ const Item = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       "aria-valuetext": ariaValueText,
       className,
       style,
+      bg,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = ariaLabel;
     $[2] = ariaValueNow;
     $[3] = ariaValueText;
-    $[4] = className;
-    $[5] = progress;
-    $[6] = rest;
-    $[7] = style;
+    $[4] = bg;
+    $[5] = className;
+    $[6] = progress;
+    $[7] = rest;
+    $[8] = style;
   } else {
     ariaLabel = $[1];
     ariaValueNow = $[2];
     ariaValueText = $[3];
-    className = $[4];
-    progress = $[5];
-    rest = $[6];
-    style = $[7];
+    bg = $[4];
+    className = $[5];
+    progress = $[6];
+    rest = $[7];
+    style = $[8];
   }
   const progressAsNumber = typeof progress === "string" ? parseInt(progress, 10) : progress;
   let t1;
-  if ($[8] !== ariaValueNow || $[9] !== progressAsNumber) {
+  if ($[9] !== ariaValueNow || $[10] !== progressAsNumber) {
     var _ariaValueNow;
     t1 = (_ariaValueNow = ariaValueNow) !== null && _ariaValueNow !== void 0 ? _ariaValueNow : progressAsNumber !== undefined && progressAsNumber >= 0 ? Math.round(progressAsNumber) : 0;
-    $[8] = ariaValueNow;
-    $[9] = progressAsNumber;
-    $[10] = t1;
+    $[9] = ariaValueNow;
+    $[10] = progressAsNumber;
+    $[11] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[11];
   }
   let t2;
-  if ($[11] !== ariaValueText || $[12] !== t1) {
+  if ($[12] !== ariaValueText || $[13] !== t1) {
     t2 = {
       "aria-valuenow": t1,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuetext": ariaValueText
     };
-    $[11] = ariaValueText;
-    $[12] = t1;
-    $[13] = t2;
+    $[12] = ariaValueText;
+    $[13] = t1;
+    $[14] = t2;
   } else {
-    t2 = $[13];
+    t2 = $[14];
   }
   const ariaAttributes = t2;
   let styles;
-  if ($[14] !== progress || $[15] !== rest.bg) {
+  if ($[15] !== bg || $[16] !== progress) {
     styles = {};
     let t3;
-    if ($[17] !== rest.bg) {
-      t3 = rest.bg && rest.bg.split(".");
-      $[17] = rest.bg;
-      $[18] = t3;
+    if ($[18] !== bg) {
+      t3 = bg && bg.split(".");
+      $[18] = bg;
+      $[19] = t3;
     } else {
-      t3 = $[18];
+      t3 = $[19];
     }
     const bgType = t3;
     styles["--progress-width"] = progress ? `${progress}%` : "0%";
-    styles["--progress-bg"] = bgType && `var(--bgColor-${bgType[0]}-${bgType[1]})` || "var(--bgColor-success-emphasis)";
-    $[14] = progress;
-    $[15] = rest.bg;
-    $[16] = styles;
+    styles["--progress-bg"] = bgType && `var(--bgColor-${bgType[0]}-${bgType[1] || "emphasis"})` || "var(--bgColor-success-emphasis)";
+    $[15] = bg;
+    $[16] = progress;
+    $[17] = styles;
   } else {
-    styles = $[16];
+    styles = $[17];
   }
   let t3;
-  if ($[19] !== className) {
+  if ($[20] !== className) {
     t3 = clsx.clsx(className, ProgressBar_module.ProgressBarItem);
-    $[19] = className;
-    $[20] = t3;
+    $[20] = className;
+    $[21] = t3;
   } else {
-    t3 = $[20];
+    t3 = $[21];
   }
   let t4;
-  if ($[21] !== style || $[22] !== styles) {
+  if ($[22] !== style || $[23] !== styles) {
     t4 = {
       ...styles,
       ...style
     };
-    $[21] = style;
-    $[22] = styles;
-    $[23] = t4;
+    $[22] = style;
+    $[23] = styles;
+    $[24] = t4;
   } else {
-    t4 = $[23];
+    t4 = $[24];
   }
   let t5;
-  if ($[24] !== ariaAttributes || $[25] !== ariaLabel || $[26] !== forwardRef || $[27] !== progress || $[28] !== rest || $[29] !== t3 || $[30] !== t4) {
+  if ($[25] !== ariaAttributes || $[26] !== ariaLabel || $[27] !== forwardRef || $[28] !== progress || $[29] !== rest || $[30] !== t3 || $[31] !== t4) {
     t5 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
       as: "span",
       className: t3,
@@ -126,16 +130,16 @@ const Item = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       style: t4,
       ...ariaAttributes
     });
-    $[24] = ariaAttributes;
-    $[25] = ariaLabel;
-    $[26] = forwardRef;
-    $[27] = progress;
-    $[28] = rest;
-    $[29] = t3;
-    $[30] = t4;
-    $[31] = t5;
+    $[25] = ariaAttributes;
+    $[26] = ariaLabel;
+    $[27] = forwardRef;
+    $[28] = progress;
+    $[29] = rest;
+    $[30] = t3;
+    $[31] = t4;
+    $[32] = t5;
   } else {
-    t5 = $[31];
+    t5 = $[32];
   }
   return t5;
 });

package/lib/ProgressBar/ProgressBar.module.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-require('./ProgressBar-430cdef7.css');
+require('./ProgressBar-a0957632.css');
 
 var classes = {"ProgressBarItem":"prc-ProgressBar-ProgressBarItem-stL6O","ProgressBarContainer":"prc-ProgressBar-ProgressBarContainer-E-z8S"};
 

package/{lib-esm/Radio/Radio-b2a92b7d.css → lib/Radio/Radio-df9a5c02.css}

@@ -1,2 +1,2 @@
-.prc-Radio-Radio-Ly4MR{border-radius:var(--borderRadius-full,100vh);transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1)}.prc-Radio-Radio-Ly4MR:where(:checked){background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));border-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));border-width:var(--borderWidth-thicker,.25rem)}.prc-Radio-Radio-Ly4MR:where(:checked):disabled{background-color:var(--fgColor-muted,var(--color-fg-muted));border-color:var(--fgColor-muted,var(--color-fg-muted));cursor:not-allowed}.prc-Radio-Radio-Ly4MR:focus,.prc-Radio-Radio-Ly4MR:focus-within{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}@media (forced-colors:active){.prc-Radio-Radio-Ly4MR{background-color:canvastext;border-color:canvastext}}
-/*# sourceMappingURL=Radio-b2a92b7d.css.map */
+.prc-Radio-Radio-Ly4MR{border-radius:var(--borderRadius-full,100vh);transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1)}.prc-Radio-Radio-Ly4MR:where(:checked){background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));border-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));border-width:var(--borderWidth-thicker,.25rem)}.prc-Radio-Radio-Ly4MR:where(:checked):disabled{background-color:var(--fgColor-muted,var(--color-fg-muted));border-color:var(--fgColor-muted,var(--color-fg-muted));cursor:not-allowed}.prc-Radio-Radio-Ly4MR:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}@media (forced-colors:active){.prc-Radio-Radio-Ly4MR{background-color:canvastext;border-color:canvastext}}
+/*# sourceMappingURL=Radio-df9a5c02.css.map */

package/{lib-esm/Radio/Radio-b2a92b7d.css.map → lib/Radio/Radio-df9a5c02.css.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Radio/Radio.module.css","../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"AAAA,uBACE,4CAA8C,CAC9C,uEA+BF,CA3BE,uCAEE,yFAAqD,CAIrD,qFAAiD,CACjD,8CASF,CAPE,gDAGE,2DAAsC,CAEtC,uDAAkC,CAJlC,kBAKF,CAGF,iECrBA,eAAgB,CAFhB,kEAAgC,CAChC,kBDyBA,CAEA,8BA7BF,uBA8BI,2BAA4B,CAC5B,uBAEJ,CADE","file":"Radio-b2a92b7d.css","sourcesContent":[".Radio {\n  border-radius: var(--borderRadius-full, 100vh);\n  transition:\n    background-color,\n    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n\n  &:where(:checked) {\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--control-checked-fgColor-rest);\n\n    /* using bgColor here to avoid a border change in dark high contrast */\n    /* stylelint-disable-next-line primer/colors */\n    border-color: var(--control-checked-bgColor-rest);\n    border-width: var(--borderWidth-thicker);\n\n    &:disabled {\n      cursor: not-allowed;\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-muted);\n      /* stylelint-disable-next-line primer/colors */\n      border-color: var(--fgColor-muted);\n    }\n  }\n\n  &:focus,\n  &:focus-within {\n    @mixin focusOutline 2px;\n  }\n\n  @media (forced-colors: active) {\n    background-color: canvastext;\n    border-color: canvastext;\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}
+{"version":3,"sources":["../src/Radio/Radio.module.css","../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"AAAA,uBACE,4CAA8C,CAC9C,uEA8BF,CA1BE,uCAEE,yFAAqD,CAIrD,qFAAiD,CACjD,8CASF,CAPE,gDAGE,2DAAsC,CAEtC,uDAAkC,CAJlC,kBAKF,CAGF,qCCrBA,eAAgB,CAFhB,kEAAgC,CAChC,kBDwBA,CAEA,8BA5BF,uBA6BI,2BAA4B,CAC5B,uBAEJ,CADE","file":"Radio-df9a5c02.css","sourcesContent":[".Radio {\n  border-radius: var(--borderRadius-full, 100vh);\n  transition:\n    background-color,\n    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n\n  &:where(:checked) {\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--control-checked-fgColor-rest);\n\n    /* using bgColor here to avoid a border change in dark high contrast */\n    /* stylelint-disable-next-line primer/colors */\n    border-color: var(--control-checked-bgColor-rest);\n    border-width: var(--borderWidth-thicker);\n\n    &:disabled {\n      cursor: not-allowed;\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-muted);\n      /* stylelint-disable-next-line primer/colors */\n      border-color: var(--fgColor-muted);\n    }\n  }\n\n  &:focus-visible {\n    @mixin focusOutline 2px;\n  }\n\n  @media (forced-colors: active) {\n    background-color: canvastext;\n    border-color: canvastext;\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}

package/lib/Radio/Radio.module.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-require('./Radio-b2a92b7d.css');
+require('./Radio-df9a5c02.css');
 
 var classes = {"Radio":"prc-Radio-Radio-Ly4MR"};