@primer/react-brand 0.79.1-rc.5d6b749b → 0.80.0-rc.e1dc6447

package/docs/components/Spinner/index.md

@@ -0,0 +1,56 @@
+---
+title: Spinner
+description: Use a spinner to indicate that content or an action is loading.
+source: https://github.com/primer/brand/blob/main/packages/react/src/Spinner/Spinner.tsx
+keywords: ['loading', 'progress', 'status', 'spinner']
+storybook: '/brand/storybook/?path=/story/components-spinner--playground'
+---
+
+```js
+import {Spinner} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<Spinner />
+```
+
+### Sizes
+
+Use a named size or a number of CSS pixels for a custom size.
+
+```jsx
+<Stack direction="horizontal" alignItems="center" gap="spacious">
+  <Spinner size="small" />
+  <Spinner size="medium" />
+  <Spinner size="large" />
+  <Spinner size={32} />
+</Stack>
+```
+
+### Custom accessible label
+
+Use a concise label that describes the pending operation. Set `accessibleLabel` to `null` only when a parent component already communicates the loading state to assistive technologies.
+
+```jsx
+<Spinner accessibleLabel="Loading notification settings" />
+```
+
+## Accessibility
+
+`Spinner` is non-interactive, and its SVG is hidden from assistive technologies. Use `accessibleLabel` to provide equivalent visually hidden loading text.
+
+Do not rely on Spinner alone to communicate loading. It should be used as part of a broader loading state UI, which announces progress through a persistent `role="status"` or `aria-live` region.
+
+When available, prefer a component's built-in loading behavior. Components such as [ToggleSwitch](../../forms/ToggleSwitch/index.md) and [IconButton](../IconButton/index.md) already provide the appropriate semantics and announcements.
+
+## Component Props
+
+| Name              | Type                                       | Default     | Description                                                                      |
+| ----------------- | ------------------------------------------ | ----------- | -------------------------------------------------------------------------------- |
+| `size`            | `'small' \| 'medium' \| 'large' \| number` | `'medium'`  | Named size or custom dimensions in CSS pixels.                                   |
+| `accessibleLabel` | `string \| null`                           | `'Loading'` | Visually hidden loading text. Use `null` when loading is communicated elsewhere. |
+| `className`       | `string`                                   |             | Class applied to the animated SVG.                                               |

package/docs/components/index.md

@@ -44,6 +44,7 @@ description: Primer Brand UI components
 - [Section](Section/react.md): Use the section component to group related content together.
 - [Section intro](SectionIntro/react.md): Use the section intro component to provide a title, optional description and link to a new section in the page.
 - [Section intro stacked](SectionIntroStacked/index.md): Use this section intro component to provide a heading, link and itemized content in a stacked layout.
+- [Spinner](Spinner/index.md): Use a spinner to indicate that content or an action is loading.
 - [Statistic](Statistic/index.md): Use the statistic component display concise numerical information
 - [Sub nav](SubNav/index.md): A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
 - [Subdomain nav bar](SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites.

package/docs/forms/FormControl/index.md

@@ -56,6 +56,11 @@ import {FormControl} from '@primer/react-brand'
     <FormControl.Label>Textarea</FormControl.Label>
     <Textarea />
   </FormControl>
+  {/* ToggleSwitch */}
+  <FormControl>
+    <FormControl.Label>Enable notifications</FormControl.Label>
+    <ToggleSwitch />
+  </FormControl>
 </Stack>
 ```
 

package/docs/forms/ToggleSwitch/index.md

@@ -0,0 +1,129 @@
+---
+title: ToggleSwitch
+description: Use a toggle switch for a boolean setting that takes effect immediately.
+source: https://github.com/primer/brand/blob/main/packages/react/src/forms/ToggleSwitch/ToggleSwitch.tsx
+keywords: ['form', 'control', 'switch', 'toggle', 'setting']
+figma: 'https://www.figma.com/design/hUT1gnfCRTX7iPZSjOg8Vp/?node-id=7985-43209'
+storybook: '/brand/storybook/?path=/story/components-forms-toggleswitch--playground'
+---
+
+```js
+import {ToggleSwitch} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<FormControl>
+  <FormControl.Label>Enable notifications</FormControl.Label>
+  <ToggleSwitch />
+</FormControl>
+```
+
+### Uncontrolled
+
+`defaultChecked` sets the initial value. `onChange` receives the next boolean value, not a native change event.
+
+```jsx
+<FormControl>
+  <FormControl.Label>Automatically watch repositories</FormControl.Label>
+  <ToggleSwitch defaultChecked />
+</FormControl>
+```
+
+### Controlled
+
+```jsx filename="noinline"
+function Example() {
+  const [checked, setChecked] = React.useState(false)
+  return (
+    <FormControl>
+      <FormControl.Label>Automatically watch repositories</FormControl.Label>
+      <ToggleSwitch checked={checked} onChange={setChecked} />
+    </FormControl>
+  )
+}
+
+render(Example)
+```
+
+### Sizes
+
+```jsx
+<Stack direction="horizontal">
+  <FormControl>
+    <FormControl.Label>Small</FormControl.Label>
+    <ToggleSwitch size="small" />
+  </FormControl>
+  <FormControl>
+    <FormControl.Label>Medium</FormControl.Label>
+    <ToggleSwitch />
+  </FormControl>
+</Stack>
+```
+
+### Disabled
+
+```jsx
+<FormControl>
+  <FormControl.Label>Enable notifications</FormControl.Label>
+  <ToggleSwitch defaultChecked disabled />
+  <FormControl.Hint>Notification settings are managed by your organization.</FormControl.Hint>
+</FormControl>
+```
+
+### Without `FormControl`
+
+```jsx
+<Stack direction="horizontal" alignItems="center" gap="normal">
+  <Text as="span" id="notification-setting-label">
+    Enable notifications
+  </Text>
+  <ToggleSwitch aria-labelledby="notification-setting-label" />
+</Stack>
+```
+
+### Visually hidden label with `FormControl`
+
+```jsx
+<Stack gap="normal" direction="horizontal">
+  <Text as="span" id="visible-notification-label">
+    Enable notifications
+  </Text>
+  <FormControl>
+    <FormControl.Label visuallyHidden>Enable notifications</FormControl.Label>
+    <ToggleSwitch aria-labelledby="visible-notification-label" />
+  </FormControl>
+</Stack>
+```
+
+## Component Props
+
+| Name                | Type                                         | Default     | Description                                                                           |
+| ------------------- | -------------------------------------------- | ----------- | ------------------------------------------------------------------------------------- |
+| `checked`           | `boolean`                                    |             | Controlled on/off value.                                                              |
+| `defaultChecked`    | `boolean`                                    | `false`     | Initial uncontrolled value.                                                           |
+| `onChange`          | `(checked: boolean) => void`                 |             | Called once per accepted activation with the next value.                              |
+| `onClick`           | `React.MouseEventHandler<HTMLButtonElement>` |             | Activation callback receiving the button event.                                       |
+| `disabled`          | `boolean`                                    | `false`     | Blocks activation while retaining keyboard focusability.                              |
+| `loading`           | `boolean`                                    | `false`     | Displays pending feedback and exposes `aria-busy` without blocking interaction.       |
+| `size`              | `'small' \| 'medium'`                        | `'medium'`  | Alternative sizes.                                                                    |
+| `loadingLabel`      | `string`                                     | `'Loading'` | Localized loading announcement.                                                       |
+| `loadingLabelDelay` | `number`                                     | `2000`      | Announcement delay in milliseconds.                                                   |
+| `spinnerPosition`   | `'start' \| 'end'`                           | `'end'`     | Indicator placement beside the switch when no visible FormControl label is available. |
+| `aria-label`        | `string`                                     |             | Explicit accessible name matching equivalent visible labeling.                        |
+| `aria-labelledby`   | `string`                                     |             | IDs of visible labeling elements.                                                     |
+| `aria-describedby`  | `string`                                     |             | Description IDs, combined with FormControl and loading descriptions.                  |
+| `aria-invalid`      | React ARIA attribute                         |             | Validation state of the switch button.                                                |
+| `ref`               | `React.Ref<HTMLButtonElement>`               |             | Ref for the focusable button.                                                         |
+| `className`         | `string`                                     |             | Class applied to the component wrapper.                                               |
+| `data-testid`       | `string`                                     |             | Test ID applied to the component wrapper.                                             |
+
+Other standard button attributes, including `aria-controls`, `tabIndex`, keyboard handlers, and `style`, apply to the switch button.
+
+## Related Components
+
+- [FormControl](../FormControl/index.md)
+- [Checkbox](../Checkbox/index.md)

package/docs/forms/index.md

@@ -12,3 +12,4 @@ title: Forms
 - [Select](Select/index.md): Use the select component to enable selection of one option from a list.
 - [Text input](TextInput/index.md): Use the text input component for single-line text field.
 - [Textarea](TextArea/index.md): Use the textarea component for multi-line text input form fields.
+- [ToggleSwitch](ToggleSwitch/index.md): Use a toggle switch for a boolean setting that takes effect immediately.

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.79.1-rc.5d6b749b)
+# Primer Brand docs (v0.80.0-rc.e1dc6447)
 
-These docs are bundled with `@primer/react-brand@0.79.1-rc.5d6b749b` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.80.0-rc.e1dc6447` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.
@@ -78,6 +78,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Section](components/Section/react.md): Use the section component to group related content together.
 - [Section intro](components/SectionIntro/react.md): Use the section intro component to provide a title, optional description and link to a new section in the page.
 - [Section intro stacked](components/SectionIntroStacked/index.md): Use this section intro component to provide a heading, link and itemized content in a stacked layout.
+- [Spinner](components/Spinner/index.md): Use a spinner to indicate that content or an action is loading.
 - [Statistic](components/Statistic/index.md): Use the statistic component display concise numerical information
 - [Sub nav](components/SubNav/index.md): A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
 - [Subdomain nav bar](components/SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites.
@@ -101,3 +102,4 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Select](forms/Select/index.md): Use the select component to enable selection of one option from a list.
 - [Text input](forms/TextInput/index.md): Use the text input component for single-line text field.
 - [Textarea](forms/TextArea/index.md): Use the textarea component for multi-line text input form fields.
+- [ToggleSwitch](forms/ToggleSwitch/index.md): Use a toggle switch for a boolean setting that takes effect immediately.

package/esm/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAUhD,OAAO,EAA0B,KAAK,gBAAgB,EAAC,MAAM,YAAY,CAAA;AACzE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAGtH,eAAO,MAAM,kBAAkB,oEAAsD,CAAA;AACrF,eAAO,MAAM,eAAe,uCAA4B,CAAA;AACxD,eAAO,MAAM,wBAAwB,aAAuB,CAAA;AAC5D,eAAO,MAAM,qBAAqB,UAAoB,CAAA;AAEtD,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAA;AAYpF,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAC/D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;AAwG9B,eAAO,MAAM,UAAU,EAAiC,mBAAmB,CAAA"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAUhD,OAAO,EAA0B,KAAK,gBAAgB,EAAC,MAAM,YAAY,CAAA;AACzE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAGtH,eAAO,MAAM,kBAAkB,oEAAsD,CAAA;AACrF,eAAO,MAAM,eAAe,uCAA4B,CAAA;AACxD,eAAO,MAAM,wBAAwB,aAAuB,CAAA;AAC5D,eAAO,MAAM,qBAAqB,UAAoB,CAAA;AAEtD,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,KAAK,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAA;AAYpF,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAC/D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;AAwG9B,eAAO,MAAM,UAAU,EAAiC,mBAAmB,CAAA"}

package/esm/IconButton/IconButton.js

@@ -1,68 +1,70 @@
 import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Button as t, ButtonSizes as n, ButtonVariants as r, defaultButtonSize as i, defaultButtonVariant as a } from "../Button/Button.js";
 import { Tooltip as o, TooltipContext as s } from "../Tooltip/Tooltip.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes-D7iaptsa.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/base-DLPw97mz.css';/* empty css                                                                                            */
+import { Spinner as c } from "../Spinner/Spinner.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes-D7iaptsa.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/base-_lTjJKpQ.css';/* empty css                                                                                            */
 /* empty css                                                                                                         */
-import c from "./IconButton.module.js";
-import l, { forwardRef as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import l from "./IconButton.module.js";
+import u, { forwardRef as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/IconButton/IconButton.tsx
-var m = [
+var h = [
 	...r,
 	"danger",
 	"invisible"
-], h = [...n], g = a, _ = i, v = {
+], g = [...n], _ = a, v = i, y = {
 	root: "IconButton",
-	get loadingIndicator() {
-		return `${this.root}-loading-indicator`;
+	get spinner() {
+		return `${this.root}-spinner`;
 	},
 	get loadingAnnouncement() {
 		return `${this.root}-loading-announcement`;
 	}
 };
-function y({ as: n, icon: r, "aria-label": i, description: a, loading: u = !1, loadingAnnouncement: m = "Loading", rounded: h = !1, tooltipDirection: y = "s", size: b = _, variant: x = g, inactive: S = !1, disabled: C, className: w, onClick: T, "aria-disabled": E, "aria-expanded": D, "aria-haspopup": O, "data-testid": k, ...A }, j) {
-	let { tooltipId: M } = l.useContext(s), N = u && !C, P = S && !C && !N, F = !C && !M, I = a || i, L = x === "danger" ? "secondary" : x === "invisible" ? "subtle" : x;
+function b({ as: n, icon: r, "aria-label": i, description: a, loading: d = !1, loadingAnnouncement: h = "Loading", rounded: g = !1, tooltipDirection: b = "s", size: x = v, variant: S = _, inactive: C = !1, disabled: w, className: T, onClick: E, "aria-disabled": D, "aria-expanded": O, "aria-haspopup": k, "data-testid": A, ...j }, M) {
+	let { tooltipId: N } = u.useContext(s), P = d && !w, F = C && !w && !P, I = !w && !N, L = a || i, R = S === "danger" ? "secondary" : S === "invisible" ? "subtle" : S;
 	process.env.NODE_ENV !== "production" && (i.trim() || console.warn("IconButton requires a non-empty `aria-label`."), [
-		C,
-		u,
-		S
+		w,
+		d,
+		C
 	].filter(Boolean).length > 1 && console.warn("IconButton has conflicting props for `disabled`, `loading`, or `inactive` states."));
-	let R = N ? /* @__PURE__ */ f("span", {
-		className: c.IconButton__loadingIndicator,
-		"data-testid": v.loadingIndicator
-	}) : /* @__PURE__ */ f(r, { className: c.IconButton__icon }), z = /* @__PURE__ */ f(t, {
-		...A,
-		ref: F ? void 0 : j,
+	let z = P ? /* @__PURE__ */ p(c, {
+		accessibleLabel: null,
+		className: l.IconButton__spinner,
+		"data-testid": y.spinner
+	}) : /* @__PURE__ */ p(r, { className: l.IconButton__icon }), B = /* @__PURE__ */ p(t, {
+		...j,
+		ref: I ? void 0 : M,
 		as: n,
-		variant: L,
-		size: b,
-		disabled: C,
-		"aria-disabled": N || P ? !0 : E,
-		"aria-expanded": D,
-		"aria-haspopup": O,
-		"aria-label": !F || a ? i : void 0,
-		className: e(c.IconButton, c[`IconButton--${b}`], c[`IconButton--variant-${x}`], P && c["IconButton--inactive"], h && c["IconButton--rounded"], w),
-		"data-testid": k || v.root,
-		leadingVisual: R,
-		onClick: N ? (e) => {
+		variant: R,
+		size: x,
+		disabled: w,
+		"aria-disabled": P || F ? !0 : D,
+		"aria-expanded": O,
+		"aria-haspopup": k,
+		"aria-label": !I || a ? i : void 0,
+		className: e(l.IconButton, l[`IconButton--${x}`], l[`IconButton--variant-${S}`], F && l["IconButton--inactive"], g && l["IconButton--rounded"], T),
+		"data-testid": A || y.root,
+		leadingVisual: z,
+		onClick: P ? (e) => {
 			e.preventDefault(), e.stopPropagation();
-		} : T
+		} : E
 	});
-	return /* @__PURE__ */ p(d, { children: [F ? /* @__PURE__ */ f(o, {
-		ref: j,
-		direction: y,
-		text: I,
+	return /* @__PURE__ */ m(f, { children: [I ? /* @__PURE__ */ p(o, {
+		ref: M,
+		direction: b,
+		text: L,
 		type: a ? "description" : "label",
-		children: z
-	}) : z, /* @__PURE__ */ f("span", {
+		children: B
+	}) : B, /* @__PURE__ */ p("span", {
 		"aria-live": "polite",
-		className: c.IconButton__loadingAnnouncement,
-		"data-testid": v.loadingAnnouncement,
-		children: N ? m : null
+		className: l.IconButton__loadingAnnouncement,
+		"data-testid": y.loadingAnnouncement,
+		children: P ? h : null
 	})] });
 }
-var b = u(y);
+var x = d(b);
 //#endregion
-export { b as IconButton, h as IconButtonSizes, m as IconButtonVariants, _ as defaultIconButtonSize, g as defaultIconButtonVariant };
+export { x as IconButton, g as IconButtonSizes, h as IconButtonVariants, v as defaultIconButtonSize, _ as defaultIconButtonVariant };
 
 //# sourceMappingURL=IconButton.js.map

package/esm/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":[],"sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {\n  Button,\n  ButtonSizes,\n  ButtonVariants,\n  defaultButtonSize,\n  defaultButtonVariant,\n  type ButtonVariant,\n} from '../Button'\nimport {Tooltip, TooltipContext, type TooltipDirection} from '../Tooltip'\nimport type {BaseProps} from '../component-helpers'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes.css'\nimport styles from './IconButton.module.css'\n\nexport const IconButtonVariants = [...ButtonVariants, 'danger', 'invisible'] as const\nexport const IconButtonSizes = [...ButtonSizes] as const\nexport const defaultIconButtonVariant = defaultButtonVariant\nexport const defaultIconButtonSize = defaultButtonSize\n\nexport type IconButtonVariant = (typeof IconButtonVariants)[number]\nexport type IconButtonSize = (typeof IconButtonSizes)[number]\n\ntype IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {\n  as?: C\n  variant?: IconButtonVariant\n  icon: Icon\n  'aria-label': string\n  description?: string\n  inactive?: boolean\n  loading?: boolean\n  loadingAnnouncement?: string\n  rounded?: boolean\n  size?: IconButtonSize\n  tooltipDirection?: TooltipDirection\n}\n\nexport type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonBaseProps<C> &\n  Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonBaseProps<C> | 'children'>\n\nconst iconButtonTestIds = {\n  root: 'IconButton',\n  get loadingIndicator() {\n    return `${this.root}-loading-indicator`\n  },\n  get loadingAnnouncement() {\n    return `${this.root}-loading-announcement`\n  },\n}\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement | null\n\nfunction IconButtonRoot(\n  {\n    as,\n    icon: IconComponent,\n    'aria-label': ariaLabel,\n    description,\n    loading = false,\n    loadingAnnouncement = 'Loading',\n    rounded = false,\n    tooltipDirection = 's',\n    size = defaultIconButtonSize,\n    variant = defaultIconButtonVariant,\n    inactive = false,\n    disabled,\n    className,\n    onClick,\n    'aria-disabled': ariaDisabled,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'data-testid': testId,\n    ...props\n  }: React.PropsWithoutRef<IconButtonProps<React.ElementType>>,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {tooltipId: externalTooltipId} = React.useContext(TooltipContext)\n  const isLoading = loading && !disabled\n  const isInactive = inactive && !disabled && !isLoading\n  const shouldRenderTooltip = !disabled && !externalTooltipId\n  const tooltipText = description || ariaLabel\n  const buttonVariant: ButtonVariant = variant === 'danger' ? 'secondary' : variant === 'invisible' ? 'subtle' : variant\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (!ariaLabel.trim()) {\n      // eslint-disable-next-line no-console\n      console.warn('IconButton requires a non-empty `aria-label`.')\n    }\n\n    if ([disabled, loading, inactive].filter(Boolean).length > 1) {\n      // eslint-disable-next-line no-console\n      console.warn('IconButton has conflicting props for `disabled`, `loading`, or `inactive` states.')\n    }\n  }\n\n  const ButtonIcon = isLoading ? (\n    <span className={styles.IconButton__loadingIndicator} data-testid={iconButtonTestIds.loadingIndicator} />\n  ) : (\n    <IconComponent className={styles.IconButton__icon} />\n  )\n\n  const ButtonElement = (\n    <Button\n      {...props}\n      ref={shouldRenderTooltip ? undefined : ref}\n      as={as}\n      variant={buttonVariant}\n      size={size}\n      disabled={disabled}\n      aria-disabled={isLoading || isInactive ? true : ariaDisabled}\n      aria-expanded={ariaExpanded}\n      aria-haspopup={ariaHasPopup}\n      aria-label={!shouldRenderTooltip || description ? ariaLabel : undefined}\n      className={clsx(\n        styles.IconButton,\n        styles[`IconButton--${size}`],\n        styles[`IconButton--variant-${variant}`],\n        isInactive && styles['IconButton--inactive'],\n        rounded && styles['IconButton--rounded'],\n        className,\n      )}\n      data-testid={testId || iconButtonTestIds.root}\n      leadingVisual={ButtonIcon}\n      onClick={\n        isLoading\n          ? event => {\n              event.preventDefault()\n              event.stopPropagation()\n            }\n          : onClick\n      }\n    />\n  )\n\n  return (\n    <>\n      {shouldRenderTooltip ? (\n        <Tooltip ref={ref} direction={tooltipDirection} text={tooltipText} type={description ? 'description' : 'label'}>\n          {ButtonElement}\n        </Tooltip>\n      ) : (\n        ButtonElement\n      )}\n      <span\n        aria-live=\"polite\"\n        className={styles.IconButton__loadingAnnouncement}\n        data-testid={iconButtonTestIds.loadingAnnouncement}\n      >\n        {isLoading ? loadingAnnouncement : null}\n      </span>\n    </>\n  )\n}\n\nexport const IconButton = forwardRef(IconButtonRoot) as IconButtonComponent\n"],"mappings":";;;;;;;;;AAmBA,IAAa,IAAqB;CAAC,GAAG;CAAgB;CAAU;AAAW,GAC9D,IAAkB,CAAC,GAAG,CAAW,GACjC,IAA2B,GAC3B,IAAwB,GAsB/B,IAAoB;CACxB,MAAM;CACN,IAAI,mBAAmB;EACrB,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,sBAAsB;EACxB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF;AAMA,SAAS,EACP,EACE,OACA,MAAM,GACN,cAAc,GACd,gBACA,aAAU,IACV,yBAAsB,WACtB,aAAU,IACV,sBAAmB,KACnB,UAAO,GACP,aAAU,GACV,cAAW,IACX,aACA,cACA,YACA,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,GAAG,KAEL,GACA;CACA,IAAM,EAAC,WAAW,MAAqB,EAAM,WAAW,CAAc,GAChE,IAAY,KAAW,CAAC,GACxB,IAAa,KAAY,CAAC,KAAY,CAAC,GACvC,IAAsB,CAAC,KAAY,CAAC,GACpC,IAAc,KAAe,GAC7B,IAA+B,MAAY,WAAW,cAAc,MAAY,cAAc,WAAW;CAE/G,AAAA,QAAA,IAAA,aAA6B,iBACtB,EAAU,KAAK,KAElB,QAAQ,KAAK,+CAA+C,GAG1D;EAAC;EAAU;EAAS;CAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,SAAS,KAEzD,QAAQ,KAAK,mFAAmF;CAIpG,IAAM,IAAa,IACjB,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA8B,eAAa,EAAkB;CAAmB,CAAA,IAExG,kBAAC,GAAD,EAAe,WAAW,EAAO,iBAAmB,CAAA,GAGhD,IACJ,kBAAC,GAAD;EACE,GAAI;EACJ,KAAK,IAAsB,KAAA,IAAY;EACnC;EACJ,SAAS;EACH;EACI;EACV,iBAAe,KAAa,IAAa,KAAO;EAChD,iBAAe;EACf,iBAAe;EACf,cAAY,CAAC,KAAuB,IAAc,IAAY,KAAA;EAC9D,WAAW,EACT,EAAO,YACP,EAAO,eAAe,MACtB,EAAO,uBAAuB,MAC9B,KAAc,EAAO,yBACrB,KAAW,EAAO,wBAClB,CACF;EACA,eAAa,KAAU,EAAkB;EACzC,eAAe;EACf,SACE,KACI,MAAS;GAEP,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;EACxB,IACA;CAEP,CAAA;CAGH,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,IACC,kBAAC,GAAD;EAAc;EAAK,WAAW;EAAkB,MAAM;EAAa,MAAM,IAAc,gBAAgB;YACpG;CACM,CAAA,IAET,GAEF,kBAAC,QAAD;EACE,aAAU;EACV,WAAW,EAAO;EAClB,eAAa,EAAkB;YAE9B,IAAY,IAAsB;CAC/B,CAAA,CACN,EAAA,CAAA;AAEN;AAEA,IAAa,IAAa,EAAW,CAAc"}
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {\n  Button,\n  ButtonSizes,\n  ButtonVariants,\n  defaultButtonSize,\n  defaultButtonVariant,\n  type ButtonVariant,\n} from '../Button'\nimport {Tooltip, TooltipContext, type TooltipDirection} from '../Tooltip'\nimport type {BaseProps} from '../component-helpers'\nimport {Spinner} from '../Spinner/Spinner'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes.css'\nimport styles from './IconButton.module.css'\n\nexport const IconButtonVariants = [...ButtonVariants, 'danger', 'invisible'] as const\nexport const IconButtonSizes = [...ButtonSizes] as const\nexport const defaultIconButtonVariant = defaultButtonVariant\nexport const defaultIconButtonSize = defaultButtonSize\n\nexport type IconButtonVariant = (typeof IconButtonVariants)[number]\nexport type IconButtonSize = (typeof IconButtonSizes)[number]\n\ntype IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {\n  as?: C\n  variant?: IconButtonVariant\n  icon: Icon\n  'aria-label': string\n  description?: string\n  inactive?: boolean\n  loading?: boolean\n  loadingAnnouncement?: string\n  rounded?: boolean\n  size?: IconButtonSize\n  tooltipDirection?: TooltipDirection\n}\n\nexport type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonBaseProps<C> &\n  Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonBaseProps<C> | 'children'>\n\nconst iconButtonTestIds = {\n  root: 'IconButton',\n  get spinner() {\n    return `${this.root}-spinner`\n  },\n  get loadingAnnouncement() {\n    return `${this.root}-loading-announcement`\n  },\n}\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement | null\n\nfunction IconButtonRoot(\n  {\n    as,\n    icon: IconComponent,\n    'aria-label': ariaLabel,\n    description,\n    loading = false,\n    loadingAnnouncement = 'Loading',\n    rounded = false,\n    tooltipDirection = 's',\n    size = defaultIconButtonSize,\n    variant = defaultIconButtonVariant,\n    inactive = false,\n    disabled,\n    className,\n    onClick,\n    'aria-disabled': ariaDisabled,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'data-testid': testId,\n    ...props\n  }: React.PropsWithoutRef<IconButtonProps<React.ElementType>>,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {tooltipId: externalTooltipId} = React.useContext(TooltipContext)\n  const isLoading = loading && !disabled\n  const isInactive = inactive && !disabled && !isLoading\n  const shouldRenderTooltip = !disabled && !externalTooltipId\n  const tooltipText = description || ariaLabel\n  const buttonVariant: ButtonVariant = variant === 'danger' ? 'secondary' : variant === 'invisible' ? 'subtle' : variant\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (!ariaLabel.trim()) {\n      // eslint-disable-next-line no-console\n      console.warn('IconButton requires a non-empty `aria-label`.')\n    }\n\n    if ([disabled, loading, inactive].filter(Boolean).length > 1) {\n      // eslint-disable-next-line no-console\n      console.warn('IconButton has conflicting props for `disabled`, `loading`, or `inactive` states.')\n    }\n  }\n\n  const ButtonIcon = isLoading ? (\n    <Spinner accessibleLabel={null} className={styles.IconButton__spinner} data-testid={iconButtonTestIds.spinner} />\n  ) : (\n    <IconComponent className={styles.IconButton__icon} />\n  )\n\n  const ButtonElement = (\n    <Button\n      {...props}\n      ref={shouldRenderTooltip ? undefined : ref}\n      as={as}\n      variant={buttonVariant}\n      size={size}\n      disabled={disabled}\n      aria-disabled={isLoading || isInactive ? true : ariaDisabled}\n      aria-expanded={ariaExpanded}\n      aria-haspopup={ariaHasPopup}\n      aria-label={!shouldRenderTooltip || description ? ariaLabel : undefined}\n      className={clsx(\n        styles.IconButton,\n        styles[`IconButton--${size}`],\n        styles[`IconButton--variant-${variant}`],\n        isInactive && styles['IconButton--inactive'],\n        rounded && styles['IconButton--rounded'],\n        className,\n      )}\n      data-testid={testId || iconButtonTestIds.root}\n      leadingVisual={ButtonIcon}\n      onClick={\n        isLoading\n          ? event => {\n              event.preventDefault()\n              event.stopPropagation()\n            }\n          : onClick\n      }\n    />\n  )\n\n  return (\n    <>\n      {shouldRenderTooltip ? (\n        <Tooltip ref={ref} direction={tooltipDirection} text={tooltipText} type={description ? 'description' : 'label'}>\n          {ButtonElement}\n        </Tooltip>\n      ) : (\n        ButtonElement\n      )}\n      <span\n        aria-live=\"polite\"\n        className={styles.IconButton__loadingAnnouncement}\n        data-testid={iconButtonTestIds.loadingAnnouncement}\n      >\n        {isLoading ? loadingAnnouncement : null}\n      </span>\n    </>\n  )\n}\n\nexport const IconButton = forwardRef(IconButtonRoot) as IconButtonComponent\n"],"mappings":";;;;;;;;;;AAoBA,IAAa,IAAqB;CAAC,GAAG;CAAgB;CAAU;AAAW,GAC9D,IAAkB,CAAC,GAAG,CAAW,GACjC,IAA2B,GAC3B,IAAwB,GAsB/B,IAAoB;CACxB,MAAM;CACN,IAAI,UAAU;EACZ,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,sBAAsB;EACxB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF;AAMA,SAAS,EACP,EACE,OACA,MAAM,GACN,cAAc,GACd,gBACA,aAAU,IACV,yBAAsB,WACtB,aAAU,IACV,sBAAmB,KACnB,UAAO,GACP,aAAU,GACV,cAAW,IACX,aACA,cACA,YACA,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,GAAG,KAEL,GACA;CACA,IAAM,EAAC,WAAW,MAAqB,EAAM,WAAW,CAAc,GAChE,IAAY,KAAW,CAAC,GACxB,IAAa,KAAY,CAAC,KAAY,CAAC,GACvC,IAAsB,CAAC,KAAY,CAAC,GACpC,IAAc,KAAe,GAC7B,IAA+B,MAAY,WAAW,cAAc,MAAY,cAAc,WAAW;CAE/G,AAAA,QAAA,IAAA,aAA6B,iBACtB,EAAU,KAAK,KAElB,QAAQ,KAAK,+CAA+C,GAG1D;EAAC;EAAU;EAAS;CAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,SAAS,KAEzD,QAAQ,KAAK,mFAAmF;CAIpG,IAAM,IAAa,IACjB,kBAAC,GAAD;EAAS,iBAAiB;EAAM,WAAW,EAAO;EAAqB,eAAa,EAAkB;CAAU,CAAA,IAEhH,kBAAC,GAAD,EAAe,WAAW,EAAO,iBAAmB,CAAA,GAGhD,IACJ,kBAAC,GAAD;EACE,GAAI;EACJ,KAAK,IAAsB,KAAA,IAAY;EACnC;EACJ,SAAS;EACH;EACI;EACV,iBAAe,KAAa,IAAa,KAAO;EAChD,iBAAe;EACf,iBAAe;EACf,cAAY,CAAC,KAAuB,IAAc,IAAY,KAAA;EAC9D,WAAW,EACT,EAAO,YACP,EAAO,eAAe,MACtB,EAAO,uBAAuB,MAC9B,KAAc,EAAO,yBACrB,KAAW,EAAO,wBAClB,CACF;EACA,eAAa,KAAU,EAAkB;EACzC,eAAe;EACf,SACE,KACI,MAAS;GAEP,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;EACxB,IACA;CAEP,CAAA;CAGH,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,IACC,kBAAC,GAAD;EAAc;EAAK,WAAW;EAAkB,MAAM;EAAa,MAAM,IAAc,gBAAgB;YACpG;CACM,CAAA,IAET,GAEF,kBAAC,QAAD;EACE,aAAU;EACV,WAAW,EAAO;EAClB,eAAa,EAAkB;YAE9B,IAAY,IAAsB;CAC/B,CAAA,CACN,EAAA,CAAA;AAEN;AAEA,IAAa,IAAa,EAAW,CAAc"}

package/esm/IconButton/{IconButton.module-tmxv8TCl.css → IconButton.module-D2UJBm7x.css}

@@ -1 +1 @@
-.Primer_Brand__IconButton-module__IconButton___68DKi{flex:none;gap:0;padding:0}.Primer_Brand__IconButton-module__IconButton___68DKi.Primer_Brand__IconButton-module__IconButton___68DKi{min-width:var(--brand-IconButton-control-size-medium);width:var(--brand-IconButton-control-size-medium);height:var(--brand-IconButton-control-size-medium)}.Primer_Brand__IconButton-module__IconButton--small___KXgb_.Primer_Brand__IconButton-module__IconButton--small___KXgb_{min-width:var(--brand-IconButton-control-size-small);width:var(--brand-IconButton-control-size-small);height:var(--brand-IconButton-control-size-small)}.Primer_Brand__IconButton-module__IconButton--large___ypAna.Primer_Brand__IconButton-module__IconButton--large___ypAna{min-width:var(--brand-IconButton-control-size-large);width:var(--brand-IconButton-control-size-large);height:var(--brand-IconButton-control-size-large)}.Primer_Brand__IconButton-module__IconButton--rounded___g_ngl.Primer_Brand__IconButton-module__IconButton--rounded___g_ngl{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH:not([disabled]):not([aria-disabled=true]){color:var(--brand-IconButton-danger-fgColor-rest);background-color:var(--brand-IconButton-danger-bgColor-rest);border-color:var(--brand-IconButton-danger-borderColor-rest)}.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH:not([disabled]):not([aria-disabled=true]):not([aria-expanded=true]):hover{color:var(--brand-IconButton-danger-fgColor-hover);background-color:var(--brand-IconButton-danger-bgColor-hover);border-color:var(--brand-IconButton-danger-borderColor-hover)}.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH:not([disabled]):not([aria-disabled=true]):active,.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH:not([disabled]):not([aria-disabled=true])[aria-expanded=true]{color:var(--brand-IconButton-danger-fgColor-active);background-color:var(--brand-IconButton-danger-bgColor-active);border-color:var(--brand-IconButton-danger-borderColor-active)}.Primer_Brand__IconButton-module__IconButton--variant-invisible___gp_QC.Primer_Brand__IconButton-module__IconButton--variant-invisible___gp_QC:where(:not(:hover):not(:active):not([aria-expanded=true])){background-color:var(--brand-IconButton-invisible-bgColor-rest);border-color:var(--brand-IconButton-invisible-borderColor-rest);-webkit-backdrop-filter:none;backdrop-filter:none}.Primer_Brand__IconButton-module__IconButton--inactive___UanYd.Primer_Brand__IconButton-module__IconButton--inactive___UanYd,.Primer_Brand__IconButton-module__IconButton--inactive___UanYd.Primer_Brand__IconButton-module__IconButton--inactive___UanYd:hover,.Primer_Brand__IconButton-module__IconButton--inactive___UanYd.Primer_Brand__IconButton-module__IconButton--inactive___UanYd:active{color:var(--brand-IconButton-inactive-fgColor);cursor:auto;background-color:var(--brand-IconButton-inactive-bgColor);border-color:var(--brand-IconButton-inactive-borderColor);-webkit-backdrop-filter:none;backdrop-filter:none}.Primer_Brand__IconButton-module__IconButton--inactive___UanYd .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{color:inherit}.Primer_Brand__IconButton-module__IconButton--small___KXgb_ .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{width:var(--brand-IconButton-icon-size-small);height:var(--brand-IconButton-icon-size-small)}.Primer_Brand__IconButton-module__IconButton--medium____oYr1 .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{width:var(--brand-IconButton-icon-size-medium);height:var(--brand-IconButton-icon-size-medium)}.Primer_Brand__IconButton-module__IconButton--large___ypAna .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{width:var(--brand-IconButton-icon-size-large);height:var(--brand-IconButton-icon-size-large)}.Primer_Brand__IconButton-module__IconButton__loadingIndicator___RXZPC.Primer_Brand__IconButton-module__IconButton__loadingIndicator___RXZPC{box-sizing:border-box;width:var(--brand-IconButton-icon-size-medium);height:var(--brand-IconButton-icon-size-medium);border:var(--brand-borderWidth-thin) solid currentcolor;animation:Primer_Brand__IconButton-module__IconButton-spin___f8JZW var(--brand-IconButton-loadingIndicator-animationDuration-default) linear infinite;border-inline-end-color:#0000;border-radius:50%;display:block}.Primer_Brand__IconButton-module__IconButton--small___KXgb_ .Primer_Brand__IconButton-module__IconButton__loadingIndicator___RXZPC{width:var(--brand-IconButton-icon-size-small);height:var(--brand-IconButton-icon-size-small)}.Primer_Brand__IconButton-module__IconButton--large___ypAna .Primer_Brand__IconButton-module__IconButton__loadingIndicator___RXZPC{width:var(--brand-IconButton-icon-size-large);height:var(--brand-IconButton-icon-size-large)}.Primer_Brand__IconButton-module__IconButton__loadingAnnouncement___Ga8mZ{width:var(--base-size-1);height:var(--base-size-1);margin:calc(var(--base-size-1) * -1);clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}@keyframes Primer_Brand__IconButton-module__IconButton-spin___f8JZW{to{transform:rotate(360deg)}}@media (forced-colors:active){.Primer_Brand__IconButton-module__IconButton--inactive___UanYd{color:graytext;border-color:graytext}.Primer_Brand__IconButton-module__IconButton__loadingIndicator___RXZPC{border-color:buttontext;border-inline-end-color:#0000}}@media (prefers-reduced-motion:reduce){.Primer_Brand__IconButton-module__IconButton__loadingIndicator___RXZPC{animation-duration:var(--brand-IconButton-loadingIndicator-animationDuration-reducedMotion)}}
+.Primer_Brand__IconButton-module__IconButton___68DKi{flex:none;gap:0;padding:0}.Primer_Brand__IconButton-module__IconButton___68DKi.Primer_Brand__IconButton-module__IconButton___68DKi{min-width:var(--brand-IconButton-control-size-medium);width:var(--brand-IconButton-control-size-medium);height:var(--brand-IconButton-control-size-medium)}.Primer_Brand__IconButton-module__IconButton--small___KXgb_.Primer_Brand__IconButton-module__IconButton--small___KXgb_{min-width:var(--brand-IconButton-control-size-small);width:var(--brand-IconButton-control-size-small);height:var(--brand-IconButton-control-size-small)}.Primer_Brand__IconButton-module__IconButton--large___ypAna.Primer_Brand__IconButton-module__IconButton--large___ypAna{min-width:var(--brand-IconButton-control-size-large);width:var(--brand-IconButton-control-size-large);height:var(--brand-IconButton-control-size-large)}.Primer_Brand__IconButton-module__IconButton--rounded___g_ngl.Primer_Brand__IconButton-module__IconButton--rounded___g_ngl{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH:not([disabled]):not([aria-disabled=true]){color:var(--brand-IconButton-danger-fgColor-rest);background-color:var(--brand-IconButton-danger-bgColor-rest);border-color:var(--brand-IconButton-danger-borderColor-rest)}.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH:not([disabled]):not([aria-disabled=true]):not([aria-expanded=true]):hover{color:var(--brand-IconButton-danger-fgColor-hover);background-color:var(--brand-IconButton-danger-bgColor-hover);border-color:var(--brand-IconButton-danger-borderColor-hover)}.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH:not([disabled]):not([aria-disabled=true]):active,.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH.Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH:not([disabled]):not([aria-disabled=true])[aria-expanded=true]{color:var(--brand-IconButton-danger-fgColor-active);background-color:var(--brand-IconButton-danger-bgColor-active);border-color:var(--brand-IconButton-danger-borderColor-active)}.Primer_Brand__IconButton-module__IconButton--variant-invisible___gp_QC.Primer_Brand__IconButton-module__IconButton--variant-invisible___gp_QC:where(:not(:hover):not(:active):not([aria-expanded=true])){background-color:var(--brand-IconButton-invisible-bgColor-rest);border-color:var(--brand-IconButton-invisible-borderColor-rest);-webkit-backdrop-filter:none;backdrop-filter:none}.Primer_Brand__IconButton-module__IconButton--inactive___UanYd.Primer_Brand__IconButton-module__IconButton--inactive___UanYd,.Primer_Brand__IconButton-module__IconButton--inactive___UanYd.Primer_Brand__IconButton-module__IconButton--inactive___UanYd:hover,.Primer_Brand__IconButton-module__IconButton--inactive___UanYd.Primer_Brand__IconButton-module__IconButton--inactive___UanYd:active{color:var(--brand-IconButton-inactive-fgColor);cursor:auto;background-color:var(--brand-IconButton-inactive-bgColor);border-color:var(--brand-IconButton-inactive-borderColor);-webkit-backdrop-filter:none;backdrop-filter:none}.Primer_Brand__IconButton-module__IconButton--inactive___UanYd .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{color:inherit}.Primer_Brand__IconButton-module__IconButton--small___KXgb_ .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{width:var(--brand-IconButton-icon-size-small);height:var(--brand-IconButton-icon-size-small)}.Primer_Brand__IconButton-module__IconButton--medium____oYr1 .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{width:var(--brand-IconButton-icon-size-medium);height:var(--brand-IconButton-icon-size-medium)}.Primer_Brand__IconButton-module__IconButton--large___ypAna .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{width:var(--brand-IconButton-icon-size-large);height:var(--brand-IconButton-icon-size-large)}.Primer_Brand__IconButton-module__IconButton__spinner___I4dHE.Primer_Brand__IconButton-module__IconButton__spinner___I4dHE{width:var(--brand-IconButton-icon-size-medium);height:var(--brand-IconButton-icon-size-medium);animation-duration:var(--brand-IconButton-spinner-animationDuration-default);display:block}.Primer_Brand__IconButton-module__IconButton--small___KXgb_ .Primer_Brand__IconButton-module__IconButton__spinner___I4dHE{width:var(--brand-IconButton-icon-size-small);height:var(--brand-IconButton-icon-size-small)}.Primer_Brand__IconButton-module__IconButton--large___ypAna .Primer_Brand__IconButton-module__IconButton__spinner___I4dHE{width:var(--brand-IconButton-icon-size-large);height:var(--brand-IconButton-icon-size-large)}.Primer_Brand__IconButton-module__IconButton__loadingAnnouncement___Ga8mZ{width:var(--base-size-1);height:var(--base-size-1);margin:calc(var(--base-size-1) * -1);clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}@media (forced-colors:active){.Primer_Brand__IconButton-module__IconButton--inactive___UanYd{color:graytext;border-color:graytext}.Primer_Brand__IconButton-module__IconButton__spinner___I4dHE{color:buttontext}}@media (prefers-reduced-motion:reduce){.Primer_Brand__IconButton-module__IconButton__spinner___I4dHE{animation-duration:var(--brand-IconButton-spinner-animationDuration-reducedMotion)}}

package/esm/IconButton/IconButton.module.js

@@ -1,5 +1,5 @@
-import './IconButton.module-tmxv8TCl.css';//#region src/IconButton/IconButton.module.css
-var e = "Primer_Brand__IconButton-module__IconButton___68DKi", t = "Primer_Brand__IconButton-module__IconButton__icon___ilqkK", n = "Primer_Brand__IconButton-module__IconButton__loadingIndicator___RXZPC", r = "Primer_Brand__IconButton-module__IconButton__loadingAnnouncement___Ga8mZ", i = {
+import './IconButton.module-D2UJBm7x.css';//#region src/IconButton/IconButton.module.css
+var e = "Primer_Brand__IconButton-module__IconButton___68DKi", t = "Primer_Brand__IconButton-module__IconButton__icon___ilqkK", n = "Primer_Brand__IconButton-module__IconButton__spinner___I4dHE", r = "Primer_Brand__IconButton-module__IconButton__loadingAnnouncement___Ga8mZ", i = {
 	IconButton: e,
 	"IconButton--small": "Primer_Brand__IconButton-module__IconButton--small___KXgb_",
 	"IconButton--large": "Primer_Brand__IconButton-module__IconButton--large___ypAna",
@@ -9,11 +9,10 @@ var e = "Primer_Brand__IconButton-module__IconButton___68DKi", t = "Primer_Brand
 	"IconButton--inactive": "Primer_Brand__IconButton-module__IconButton--inactive___UanYd",
 	IconButton__icon: t,
 	"IconButton--medium": "Primer_Brand__IconButton-module__IconButton--medium____oYr1",
-	IconButton__loadingIndicator: n,
-	"IconButton-spin": "Primer_Brand__IconButton-module__IconButton-spin___f8JZW",
+	IconButton__spinner: n,
 	IconButton__loadingAnnouncement: r
 };
 //#endregion
-export { e as IconButton, t as IconButton__icon, r as IconButton__loadingAnnouncement, n as IconButton__loadingIndicator, i as default };
+export { e as IconButton, t as IconButton__icon, r as IconButton__loadingAnnouncement, n as IconButton__spinner, i as default };
 
 //# sourceMappingURL=IconButton.module.js.map

package/esm/IconButton/IconButton.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.module.js","names":[],"sources":["../../src/IconButton/IconButton.module.css"],"sourcesContent":[".IconButton {\n  flex: none;\n  gap: 0;\n  padding: 0;\n}\n\n.IconButton.IconButton {\n  min-width: var(--brand-IconButton-control-size-medium);\n  width: var(--brand-IconButton-control-size-medium);\n  height: var(--brand-IconButton-control-size-medium);\n}\n\n.IconButton--small.IconButton--small {\n  min-width: var(--brand-IconButton-control-size-small);\n  width: var(--brand-IconButton-control-size-small);\n  height: var(--brand-IconButton-control-size-small);\n}\n\n.IconButton--large.IconButton--large {\n  min-width: var(--brand-IconButton-control-size-large);\n  width: var(--brand-IconButton-control-size-large);\n  height: var(--brand-IconButton-control-size-large);\n}\n\n.IconButton--rounded.IconButton--rounded {\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true']) {\n  color: var(--brand-IconButton-danger-fgColor-rest);\n  background-color: var(--brand-IconButton-danger-bgColor-rest);\n  border-color: var(--brand-IconButton-danger-borderColor-rest);\n}\n\n.IconButton--variant-danger.IconButton--variant-danger:not(\n    [disabled],\n    [aria-disabled='true'],\n    [aria-expanded='true']\n  ):hover {\n  color: var(--brand-IconButton-danger-fgColor-hover);\n  background-color: var(--brand-IconButton-danger-bgColor-hover);\n  border-color: var(--brand-IconButton-danger-borderColor-hover);\n}\n\n.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true']):active,\n.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true'])[aria-expanded='true'] {\n  color: var(--brand-IconButton-danger-fgColor-active);\n  background-color: var(--brand-IconButton-danger-bgColor-active);\n  border-color: var(--brand-IconButton-danger-borderColor-active);\n}\n\n.IconButton--variant-invisible.IconButton--variant-invisible:where(:not(:hover, :active, [aria-expanded='true'])) {\n  background-color: var(--brand-IconButton-invisible-bgColor-rest);\n  border-color: var(--brand-IconButton-invisible-borderColor-rest);\n  backdrop-filter: none;\n}\n\n.IconButton--inactive.IconButton--inactive,\n.IconButton--inactive.IconButton--inactive:hover,\n.IconButton--inactive.IconButton--inactive:active {\n  color: var(--brand-IconButton-inactive-fgColor);\n  cursor: auto;\n  background-color: var(--brand-IconButton-inactive-bgColor);\n  border-color: var(--brand-IconButton-inactive-borderColor);\n  backdrop-filter: none;\n}\n\n.IconButton--inactive .IconButton__icon {\n  color: inherit;\n}\n\n.IconButton--small .IconButton__icon {\n  width: var(--brand-IconButton-icon-size-small);\n  height: var(--brand-IconButton-icon-size-small);\n}\n\n.IconButton--medium .IconButton__icon {\n  width: var(--brand-IconButton-icon-size-medium);\n  height: var(--brand-IconButton-icon-size-medium);\n}\n\n.IconButton--large .IconButton__icon {\n  width: var(--brand-IconButton-icon-size-large);\n  height: var(--brand-IconButton-icon-size-large);\n}\n\n.IconButton__loadingIndicator.IconButton__loadingIndicator {\n  display: block;\n  box-sizing: border-box;\n  width: var(--brand-IconButton-icon-size-medium);\n  height: var(--brand-IconButton-icon-size-medium);\n  border: var(--brand-borderWidth-thin) solid currentcolor;\n  border-inline-end-color: transparent;\n  border-radius: 50%;\n  animation: IconButton-spin var(--brand-IconButton-loadingIndicator-animationDuration-default) linear infinite;\n}\n\n.IconButton--small .IconButton__loadingIndicator {\n  width: var(--brand-IconButton-icon-size-small);\n  height: var(--brand-IconButton-icon-size-small);\n}\n\n.IconButton--large .IconButton__loadingIndicator {\n  width: var(--brand-IconButton-icon-size-large);\n  height: var(--brand-IconButton-icon-size-large);\n}\n\n.IconButton__loadingAnnouncement {\n  position: absolute;\n  width: var(--base-size-1);\n  height: var(--base-size-1);\n  padding: 0;\n  margin: calc(var(--base-size-1) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes IconButton-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (forced-colors: active) {\n  .IconButton--inactive {\n    color: GrayText;\n    border-color: GrayText;\n  }\n\n  .IconButton__loadingIndicator {\n    border-color: ButtonText;\n    border-inline-end-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IconButton__loadingIndicator {\n    animation-duration: var(--brand-IconButton-loadingIndicator-animationDuration-reducedMotion);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"IconButton.module.js","names":[],"sources":["../../src/IconButton/IconButton.module.css"],"sourcesContent":[".IconButton {\n  flex: none;\n  gap: 0;\n  padding: 0;\n}\n\n.IconButton.IconButton {\n  min-width: var(--brand-IconButton-control-size-medium);\n  width: var(--brand-IconButton-control-size-medium);\n  height: var(--brand-IconButton-control-size-medium);\n}\n\n.IconButton--small.IconButton--small {\n  min-width: var(--brand-IconButton-control-size-small);\n  width: var(--brand-IconButton-control-size-small);\n  height: var(--brand-IconButton-control-size-small);\n}\n\n.IconButton--large.IconButton--large {\n  min-width: var(--brand-IconButton-control-size-large);\n  width: var(--brand-IconButton-control-size-large);\n  height: var(--brand-IconButton-control-size-large);\n}\n\n.IconButton--rounded.IconButton--rounded {\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true']) {\n  color: var(--brand-IconButton-danger-fgColor-rest);\n  background-color: var(--brand-IconButton-danger-bgColor-rest);\n  border-color: var(--brand-IconButton-danger-borderColor-rest);\n}\n\n.IconButton--variant-danger.IconButton--variant-danger:not(\n    [disabled],\n    [aria-disabled='true'],\n    [aria-expanded='true']\n  ):hover {\n  color: var(--brand-IconButton-danger-fgColor-hover);\n  background-color: var(--brand-IconButton-danger-bgColor-hover);\n  border-color: var(--brand-IconButton-danger-borderColor-hover);\n}\n\n.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true']):active,\n.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true'])[aria-expanded='true'] {\n  color: var(--brand-IconButton-danger-fgColor-active);\n  background-color: var(--brand-IconButton-danger-bgColor-active);\n  border-color: var(--brand-IconButton-danger-borderColor-active);\n}\n\n.IconButton--variant-invisible.IconButton--variant-invisible:where(:not(:hover, :active, [aria-expanded='true'])) {\n  background-color: var(--brand-IconButton-invisible-bgColor-rest);\n  border-color: var(--brand-IconButton-invisible-borderColor-rest);\n  backdrop-filter: none;\n}\n\n.IconButton--inactive.IconButton--inactive,\n.IconButton--inactive.IconButton--inactive:hover,\n.IconButton--inactive.IconButton--inactive:active {\n  color: var(--brand-IconButton-inactive-fgColor);\n  cursor: auto;\n  background-color: var(--brand-IconButton-inactive-bgColor);\n  border-color: var(--brand-IconButton-inactive-borderColor);\n  backdrop-filter: none;\n}\n\n.IconButton--inactive .IconButton__icon {\n  color: inherit;\n}\n\n.IconButton--small .IconButton__icon {\n  width: var(--brand-IconButton-icon-size-small);\n  height: var(--brand-IconButton-icon-size-small);\n}\n\n.IconButton--medium .IconButton__icon {\n  width: var(--brand-IconButton-icon-size-medium);\n  height: var(--brand-IconButton-icon-size-medium);\n}\n\n.IconButton--large .IconButton__icon {\n  width: var(--brand-IconButton-icon-size-large);\n  height: var(--brand-IconButton-icon-size-large);\n}\n\n.IconButton__spinner.IconButton__spinner {\n  display: block;\n  width: var(--brand-IconButton-icon-size-medium);\n  height: var(--brand-IconButton-icon-size-medium);\n  animation-duration: var(--brand-IconButton-spinner-animationDuration-default);\n}\n\n.IconButton--small .IconButton__spinner {\n  width: var(--brand-IconButton-icon-size-small);\n  height: var(--brand-IconButton-icon-size-small);\n}\n\n.IconButton--large .IconButton__spinner {\n  width: var(--brand-IconButton-icon-size-large);\n  height: var(--brand-IconButton-icon-size-large);\n}\n\n.IconButton__loadingAnnouncement {\n  position: absolute;\n  width: var(--base-size-1);\n  height: var(--base-size-1);\n  padding: 0;\n  margin: calc(var(--base-size-1) * -1);\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@media (forced-colors: active) {\n  .IconButton--inactive {\n    color: GrayText;\n    border-color: GrayText;\n  }\n\n  .IconButton__spinner {\n    color: ButtonText;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IconButton__spinner {\n    animation-duration: var(--brand-IconButton-spinner-animationDuration-reducedMotion);\n  }\n}\n"],"mappings":""}

package/esm/Spinner/Spinner.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/spinner/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/spinner/colors-with-modes.css';
+export type SpinnerProps = {
+    size?: 'small' | 'medium' | 'large' | number;
+    accessibleLabel?: string | null;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare function Spinner({ size, accessibleLabel, className, 'data-testid': testId, }: SpinnerProps): React.JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

package/esm/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,8FAA8F,CAAA;AACrG,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IAC5C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAe,EACf,eAA2B,EAC3B,SAAS,EACT,aAAa,EAAE,MAAkB,GAClC,EAAE,YAAY,qBAqCd"}

package/esm/Spinner/Spinner.js

@@ -0,0 +1,48 @@
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/spinner/colors-with-modes-izIk82NS.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/spinner/base-BUCpHNCY.css';/* empty css                                                                                        */
+/* empty css                                                                                                     */
+import t from "./Spinner.module.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/Spinner/Spinner.tsx
+function i({ size: i = "medium", accessibleLabel: a = "Loading", className: o, "data-testid": s = "Spinner" }) {
+	let c = typeof i == "number" ? i : void 0;
+	return /* @__PURE__ */ r("span", {
+		className: t.Spinner__box,
+		"data-component": "Spinner",
+		children: [/* @__PURE__ */ r("svg", {
+			width: c,
+			height: c,
+			viewBox: "0 0 16 16",
+			fill: "none",
+			"aria-hidden": "true",
+			focusable: "false",
+			className: e(t.Spinner, typeof i == "string" && t[`Spinner--${i}`], o),
+			"data-testid": s,
+			children: [/* @__PURE__ */ n("circle", {
+				cx: "8",
+				cy: "8",
+				r: "7",
+				fill: "none",
+				stroke: "currentColor",
+				strokeOpacity: "0.25",
+				strokeWidth: "2",
+				vectorEffect: "non-scaling-stroke"
+			}), /* @__PURE__ */ n("path", {
+				d: "M15 8a7.002 7.002 0 00-7-7",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				vectorEffect: "non-scaling-stroke"
+			})]
+		}), a === null ? null : /* @__PURE__ */ n("span", {
+			className: "visually-hidden",
+			children: a
+		})]
+	});
+}
+//#endregion
+export { i as Spinner };
+
+//# sourceMappingURL=Spinner.js.map

package/esm/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":[],"sources":["../../src/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/spinner/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/spinner/colors-with-modes.css'\nimport styles from './Spinner.module.css'\n\nexport type SpinnerProps = {\n  size?: 'small' | 'medium' | 'large' | number\n  accessibleLabel?: string | null\n  className?: string\n  'data-testid'?: string\n}\n\nexport function Spinner({\n  size = 'medium',\n  accessibleLabel = 'Loading',\n  className,\n  'data-testid': testId = 'Spinner',\n}: SpinnerProps) {\n  const customSize = typeof size === 'number' ? size : undefined\n\n  return (\n    <span className={styles.Spinner__box} data-component=\"Spinner\">\n      <svg\n        width={customSize}\n        height={customSize}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        className={clsx(styles.Spinner, typeof size === 'string' && styles[`Spinner--${size}`], className)}\n        data-testid={testId}\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"7\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.25\"\n          strokeWidth=\"2\"\n          vectorEffect=\"non-scaling-stroke\"\n        />\n        <path\n          d=\"M15 8a7.002 7.002 0 00-7-7\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          vectorEffect=\"non-scaling-stroke\"\n        />\n      </svg>\n      {accessibleLabel !== null ? <span className=\"visually-hidden\">{accessibleLabel}</span> : null}\n    </span>\n  )\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,EAAQ,EACtB,UAAO,UACP,qBAAkB,WAClB,cACA,eAAe,IAAS,aACT;CACf,IAAM,IAAa,OAAO,KAAS,WAAW,IAAO,KAAA;CAErD,OACE,kBAAC,QAAD;EAAM,WAAW,EAAO;EAAc,kBAAe;YAArD,CACE,kBAAC,OAAD;GACE,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,MAAK;GACL,eAAY;GACZ,WAAU;GACV,WAAW,EAAK,EAAO,SAAS,OAAO,KAAS,YAAY,EAAO,YAAY,MAAS,CAAS;GACjG,eAAa;aARf,CAUE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,eAAc;IACd,aAAY;IACZ,cAAa;GACd,CAAA,GACD,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,cAAa;GACd,CAAA,CACE;MACJ,MAAoB,OAAoE,OAA7D,kBAAC,QAAD;GAAM,WAAU;aAAmB;EAAsB,CAAA,CACjF;;AAEV"}

package/esm/Spinner/Spinner.module-BjDTZLR7.css

@@ -0,0 +1 @@
+.Primer_Brand__Spinner-module__Spinner__box___aHcR4{display:inline-flex}.Primer_Brand__Spinner-module__Spinner___udHxF{box-sizing:border-box;color:var(--brand-Spinner-fgColor);animation-name:Primer_Brand__Spinner-module__Spinner-spin___itSEr;animation-duration:var(--brand-Spinner-animationDuration-default);animation-timing-function:linear;animation-iteration-count:infinite;display:block;overflow:visible}.Primer_Brand__Spinner-module__Spinner--small___cMahj{width:var(--brand-Spinner-size-small);height:var(--brand-Spinner-size-small)}.Primer_Brand__Spinner-module__Spinner--medium___buMi2{width:var(--brand-Spinner-size-medium);height:var(--brand-Spinner-size-medium)}.Primer_Brand__Spinner-module__Spinner--large___8Bjgb{width:var(--brand-Spinner-size-large);height:var(--brand-Spinner-size-large)}@keyframes Primer_Brand__Spinner-module__Spinner-spin___itSEr{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Spinner-module__Spinner___udHxF{animation-duration:var(--brand-Spinner-animationDuration-reducedMotion)}}

package/esm/Spinner/Spinner.module.js

@@ -0,0 +1,13 @@
+import './Spinner.module-BjDTZLR7.css';//#region src/Spinner/Spinner.module.css
+var e = "Primer_Brand__Spinner-module__Spinner__box___aHcR4", t = "Primer_Brand__Spinner-module__Spinner___udHxF", n = {
+	Spinner__box: e,
+	Spinner: t,
+	"Spinner-spin": "Primer_Brand__Spinner-module__Spinner-spin___itSEr",
+	"Spinner--small": "Primer_Brand__Spinner-module__Spinner--small___cMahj",
+	"Spinner--medium": "Primer_Brand__Spinner-module__Spinner--medium___buMi2",
+	"Spinner--large": "Primer_Brand__Spinner-module__Spinner--large___8Bjgb"
+};
+//#endregion
+export { t as Spinner, e as Spinner__box, n as default };
+
+//# sourceMappingURL=Spinner.module.js.map

package/esm/Spinner/Spinner.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.module.js","names":[],"sources":["../../src/Spinner/Spinner.module.css"],"sourcesContent":[".Spinner__box {\n  display: inline-flex;\n}\n\n.Spinner {\n  display: block;\n  box-sizing: border-box;\n  overflow: visible;\n  color: var(--brand-Spinner-fgColor);\n  animation-name: Spinner-spin;\n  animation-duration: var(--brand-Spinner-animationDuration-default);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n.Spinner--small {\n  width: var(--brand-Spinner-size-small);\n  height: var(--brand-Spinner-size-small);\n}\n\n.Spinner--medium {\n  width: var(--brand-Spinner-size-medium);\n  height: var(--brand-Spinner-size-medium);\n}\n\n.Spinner--large {\n  width: var(--brand-Spinner-size-large);\n  height: var(--brand-Spinner-size-large);\n}\n\n@keyframes Spinner-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .Spinner {\n    animation-duration: var(--brand-Spinner-animationDuration-reducedMotion);\n  }\n}\n"],"mappings":""}

package/esm/Spinner/index.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+//# sourceMappingURL=index.d.ts.map

package/esm/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAA;AACjC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAA"}

package/esm/forms/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@ import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
 import r from "../../hooks/useIsomorphicLayoutEffect.js";
-import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-ChBPnVuN.css';/* empty css                                                                                                        */
 import i from "./Checkbox.module.js";
 import { forwardRef as a, useCallback as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";

package/esm/forms/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAS7D,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAY7D,OAAO,2GAA2G,CAAA;AAIlH,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AAmMD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGA3QrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAgMnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}