@primer/react-brand 0.80.1-rc.2b5ba1e3 → 0.80.1-rc.bcf1e5f2

package/docs/components/IconButton/react.md

@@ -59,6 +59,7 @@ IconButton inherits standard variants from Button and adds `danger` and `invisib
   <IconButton icon={SearchIcon} aria-label="Search" size="small" />
   <IconButton icon={SearchIcon} aria-label="Search" size="medium" />
   <IconButton icon={SearchIcon} aria-label="Search" size="large" />
+  <IconButton icon={SearchIcon} aria-label="Search" size={80} />
 </Stack>
 ```
 
@@ -196,7 +197,7 @@ Inactive controls use the same muted style for every variant and retain focus an
 | `icon`                | `Icon \| ReactElement` |               |  `true`  | Octicon component or custom SVG element rendered in the center of the button            |
 | `aria-label`          | `string`               |               |  `true`  | Required non-empty accessible action name and default tooltip label                     |
 | `variant`             | `IconButtonVariants`   | `'secondary'` |  `false` | Button variants plus IconButton-only `danger` and `invisible` variations                |
-| `size`                | `IconButtonSizes`      |   `'medium'`  |  `false` | Control sizes inherited from Button                                                     |
+| `size`                |                        |   `'medium'`  |  `false` | Named size or custom control dimensions in CSS pixels                                   |
 | `description`         | `string`               |  `undefined`  |  `false` | Supplementary tooltip description                                                       |
 | `tooltipDirection`    | `TooltipDirections`    |     `'s'`     |  `false` | Preferred tooltip direction                                                             |
 | `inactive`            | `boolean`              |    `false`    |  `false` | Applies variant-independent muted styling while preserving input for required feedback  |

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.80.1-rc.2b5ba1e3)
+# Primer Brand docs (v0.80.1-rc.bcf1e5f2)
 
-These docs are bundled with `@primer/react-brand@0.80.1-rc.2b5ba1e3` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.80.1-rc.bcf1e5f2` 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.

package/esm/IconButton/IconButton.d.ts

@@ -9,7 +9,7 @@ export declare const IconButtonSizes: readonly ["small", "medium", "large"];
 export declare const defaultIconButtonVariant: "secondary";
 export declare const defaultIconButtonSize: "medium";
 export type IconButtonVariant = (typeof IconButtonVariants)[number];
-export type IconButtonSize = (typeof IconButtonSizes)[number];
+export type IconButtonSize = (typeof IconButtonSizes)[number] | number;
 type IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {
     as?: C;
     variant?: IconButtonVariant;

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;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,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAA;IAC9D,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;AA4G9B,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,GAAG,MAAM,CAAA;AAEtE,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,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAA;IAC9D,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;AAwH9B,eAAO,MAAM,UAAU,EAAiC,mBAAmB,CAAA"}

package/esm/IconButton/IconButton.js

@@ -2,7 +2,7 @@ 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 { Spinner as c } from "../Spinner/Spinner.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes-BsaQYf6M.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/base-_lTjJKpQ.css';/* empty css                                                                                            */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes-krqIK_mv.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/base-C6FA-p8L.css';/* empty css                                                                                            */
 /* empty css                                                                                                         */
 import l from "./IconButton.module.js";
 import u, { forwardRef as d } from "react";
@@ -21,46 +21,51 @@ var h = [
 		return `${this.root}-loading-announcement`;
 	}
 };
-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;
+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, style: j, ...M }, N) {
+	let { tooltipId: P } = u.useContext(s), F = d && !w, I = C && !w && !F, L = !w && !P, R = a || i, z = S === "danger" ? "secondary" : S === "invisible" ? "subtle" : S, B = typeof x == "number" ? x : void 0, V = B === void 0 ? x : v, H = B === void 0 ? j : {
+		"--brand-IconButton-control-size": `${B}px`,
+		"--brand-IconButton-icon-size": `${B / 2}px`,
+		...j
+	};
 	process.env.NODE_ENV !== "production" && (i.trim() || console.warn("IconButton requires a non-empty `aria-label`."), [
 		w,
 		d,
 		C
 	].filter(Boolean).length > 1 && console.warn("IconButton has conflicting props for `disabled`, `loading`, or `inactive` states."));
-	let z = P ? /* @__PURE__ */ p(c, {
+	let U = F ? /* @__PURE__ */ p(c, {
 		accessibleLabel: null,
 		className: l.IconButton__spinner,
 		"data-testid": y.spinner
-	}) : u.isValidElement(r) ? u.cloneElement(r, { className: e(r.props.className, l.IconButton__icon) }) : /* @__PURE__ */ p(r, { className: l.IconButton__icon }), B = /* @__PURE__ */ p(t, {
-		...j,
-		ref: I ? void 0 : M,
+	}) : u.isValidElement(r) ? u.cloneElement(r, { className: e(r.props.className, l.IconButton__icon) }) : /* @__PURE__ */ p(r, { className: l.IconButton__icon }), W = /* @__PURE__ */ p(t, {
+		...M,
+		ref: L ? void 0 : N,
 		as: n,
-		variant: R,
-		size: x,
+		variant: z,
+		size: V,
+		style: H,
 		disabled: w,
-		"aria-disabled": P || F ? !0 : D,
+		"aria-disabled": F || I ? !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),
+		"aria-label": !L || a ? i : void 0,
+		className: e(l.IconButton, typeof x == "string" && l[`IconButton--${x}`], l[`IconButton--variant-${S}`], I && l["IconButton--inactive"], g && l["IconButton--rounded"], T),
 		"data-testid": A || y.root,
-		leadingVisual: z,
-		onClick: P ? (e) => {
+		leadingVisual: U,
+		onClick: F ? (e) => {
 			e.preventDefault(), e.stopPropagation();
 		} : E
 	});
-	return /* @__PURE__ */ m(f, { children: [I ? /* @__PURE__ */ p(o, {
-		ref: M,
+	return /* @__PURE__ */ m(f, { children: [L ? /* @__PURE__ */ p(o, {
+		ref: N,
 		direction: b,
-		text: L,
+		text: R,
 		type: a ? "description" : "label",
-		children: B
-	}) : B, /* @__PURE__ */ p("span", {
+		children: W
+	}) : W, /* @__PURE__ */ p("span", {
 		"aria-live": "polite",
 		className: l.IconButton__loadingAnnouncement,
 		"data-testid": y.loadingAnnouncement,
-		children: P ? h : null
+		children: F ? h : null
 	})] });
 }
 var x = d(b);

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'\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 | React.ReactElement<React.SVGProps<SVGSVGElement>>\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  ) : React.isValidElement<React.SVGProps<SVGSVGElement>>(IconComponent) ? (\n    React.cloneElement(IconComponent, {\n      className: clsx(IconComponent.props.className, styles.IconButton__icon),\n    })\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,IAC9G,EAAM,eAA8C,CAAa,IACnE,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAc,MAAM,WAAW,EAAO,gBAAgB,EACxE,CAAC,IAED,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] | number\n\ntype IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {\n  as?: C\n  variant?: IconButtonVariant\n  icon: Icon | React.ReactElement<React.SVGProps<SVGSVGElement>>\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    style,\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  const customSize = typeof size === 'number' ? size : undefined\n  const buttonSize = customSize === undefined ? size : defaultIconButtonSize\n  const buttonStyle =\n    customSize === undefined\n      ? style\n      : {\n          ['--brand-IconButton-control-size' as string]: `${customSize}px`,\n          ['--brand-IconButton-icon-size' as string]: `${customSize / 2}px`,\n          ...style,\n        }\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  ) : React.isValidElement<React.SVGProps<SVGSVGElement>>(IconComponent) ? (\n    React.cloneElement(IconComponent, {\n      className: clsx(IconComponent.props.className, styles.IconButton__icon),\n    })\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={buttonSize}\n      style={buttonStyle}\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        typeof size === 'string' && 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,UACA,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,GACzG,IAAa,OAAO,KAAS,WAAW,IAAO,KAAA,GAC/C,IAAa,MAAe,KAAA,IAAY,IAAO,GAC/C,IACJ,MAAe,KAAA,IACX,IACA;EACG,mCAA8C,GAAG,EAAW;EAC5D,gCAA2C,GAAG,IAAa,EAAE;EAC9D,GAAG;CACL;CAEN,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,IAC9G,EAAM,eAA8C,CAAa,IACnE,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAc,MAAM,WAAW,EAAO,gBAAgB,EACxE,CAAC,IAED,kBAAC,GAAD,EAAe,WAAW,EAAO,iBAAmB,CAAA,GAGhD,IACJ,kBAAC,GAAD;EACE,GAAI;EACJ,KAAK,IAAsB,KAAA,IAAY;EACnC;EACJ,SAAS;EACT,MAAM;EACN,OAAO;EACG;EACV,iBAAe,KAAa,IAAa,KAAO;EAChD,iBAAe;EACf,iBAAe;EACf,cAAY,CAAC,KAAuB,IAAc,IAAY,KAAA;EAC9D,WAAW,EACT,EAAO,YACP,OAAO,KAAS,YAAY,EAAO,eAAe,MAClD,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-DYMP512l.css

@@ -0,0 +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);width:var(--brand-IconButton-control-size);min-height:var(--brand-IconButton-control-size);height:var(--brand-IconButton-control-size)}.Primer_Brand__IconButton-module__IconButton--small___KXgb_.Primer_Brand__IconButton-module__IconButton--small___KXgb_{--brand-IconButton-control-size:var(--brand-IconButton-control-size-small);--brand-IconButton-icon-size:var(--brand-IconButton-icon-size-small)}.Primer_Brand__IconButton-module__IconButton--medium____oYr1.Primer_Brand__IconButton-module__IconButton--medium____oYr1{--brand-IconButton-control-size:var(--brand-IconButton-control-size-medium);--brand-IconButton-icon-size:var(--brand-IconButton-icon-size-medium)}.Primer_Brand__IconButton-module__IconButton--large___ypAna.Primer_Brand__IconButton-module__IconButton--large___ypAna{--brand-IconButton-control-size:var(--brand-IconButton-control-size-large);--brand-IconButton-icon-size:var(--brand-IconButton-icon-size-large)}.Primer_Brand__IconButton-module__IconButton--variant-secondary___uk1g_.Primer_Brand__IconButton-module__IconButton--variant-secondary___uk1g_{color:var(--brand-IconButton-secondary-fgColor)}.Primer_Brand__IconButton-module__IconButton--variant-subtle___mrBvK.Primer_Brand__IconButton-module__IconButton--variant-subtle___mrBvK{color:var(--brand-IconButton-subtle-fgColor)}.Primer_Brand__IconButton-module__IconButton--variant-invisible___gp_QC.Primer_Brand__IconButton-module__IconButton--variant-invisible___gp_QC{color:var(--brand-IconButton-invisible-fgColor)}.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___68DKi .Primer_Brand__IconButton-module__IconButton__icon___ilqkK{width:var(--brand-IconButton-icon-size);height:var(--brand-IconButton-icon-size)}.Primer_Brand__IconButton-module__IconButton__spinner___I4dHE.Primer_Brand__IconButton-module__IconButton__spinner___I4dHE{width:var(--brand-IconButton-icon-size);height:var(--brand-IconButton-icon-size);animation-duration:var(--brand-IconButton-spinner-animationDuration-default);display:block}.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-path:inset(50%);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,14 +1,16 @@
-import './IconButton.module-DDLfSj96.css';//#region src/IconButton/IconButton.module.css
+import './IconButton.module-DYMP512l.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--medium": "Primer_Brand__IconButton-module__IconButton--medium____oYr1",
 	"IconButton--large": "Primer_Brand__IconButton-module__IconButton--large___ypAna",
+	"IconButton--variant-secondary": "Primer_Brand__IconButton-module__IconButton--variant-secondary___uk1g_",
+	"IconButton--variant-subtle": "Primer_Brand__IconButton-module__IconButton--variant-subtle___mrBvK",
+	"IconButton--variant-invisible": "Primer_Brand__IconButton-module__IconButton--variant-invisible___gp_QC",
 	"IconButton--rounded": "Primer_Brand__IconButton-module__IconButton--rounded___g_ngl",
 	"IconButton--variant-danger": "Primer_Brand__IconButton-module__IconButton--variant-danger____mjeH",
-	"IconButton--variant-invisible": "Primer_Brand__IconButton-module__IconButton--variant-invisible___gp_QC",
 	"IconButton--inactive": "Primer_Brand__IconButton-module__IconButton--inactive___UanYd",
 	IconButton__icon: t,
-	"IconButton--medium": "Primer_Brand__IconButton-module__IconButton--medium____oYr1",
 	IconButton__spinner: n,
 	IconButton__loadingAnnouncement: r
 };

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__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-path: inset(50%);\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":""}
+{"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);\n  width: var(--brand-IconButton-control-size);\n  min-height: var(--brand-IconButton-control-size);\n  height: var(--brand-IconButton-control-size);\n}\n\n.IconButton--small.IconButton--small {\n  --brand-IconButton-control-size: var(--brand-IconButton-control-size-small);\n  --brand-IconButton-icon-size: var(--brand-IconButton-icon-size-small);\n}\n\n.IconButton--medium.IconButton--medium {\n  --brand-IconButton-control-size: var(--brand-IconButton-control-size-medium);\n  --brand-IconButton-icon-size: var(--brand-IconButton-icon-size-medium);\n}\n\n.IconButton--large.IconButton--large {\n  --brand-IconButton-control-size: var(--brand-IconButton-control-size-large);\n  --brand-IconButton-icon-size: var(--brand-IconButton-icon-size-large);\n}\n\n.IconButton--variant-secondary.IconButton--variant-secondary {\n  color: var(--brand-IconButton-secondary-fgColor);\n}\n\n.IconButton--variant-subtle.IconButton--variant-subtle {\n  color: var(--brand-IconButton-subtle-fgColor);\n}\n\n.IconButton--variant-invisible.IconButton--variant-invisible {\n  color: var(--brand-IconButton-invisible-fgColor);\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 .IconButton__icon {\n  width: var(--brand-IconButton-icon-size);\n  height: var(--brand-IconButton-icon-size);\n}\n\n.IconButton__spinner.IconButton__spinner {\n  display: block;\n  width: var(--brand-IconButton-icon-size);\n  height: var(--brand-IconButton-icon-size);\n  animation-duration: var(--brand-IconButton-spinner-animationDuration-default);\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-path: inset(50%);\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/TestimonialGroup/TestimonialGroup.module-BDQZa1f9.css

@@ -0,0 +1 @@
+.Primer_Brand__TestimonialGroup-module__TestimonialGroup___WSHAX{width:100%;min-width:0}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__content____OwRq{flex-direction:column;width:100%;display:flex}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__slides___bujxD{flex-direction:column;justify-content:center;width:100%;display:flex;position:relative}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__slide___BQN5P{visibility:hidden;pointer-events:none;width:100%;position:absolute}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__slide--active___Po_Ui{visibility:visible;pointer-events:auto;position:relative}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__avatar___g6C4c{border:var(--base-size-2) solid var(--brand-Testimonial-quoteMarkColor-green);border-radius:50%;flex:none}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__avatar___g6C4c.Primer_Brand__TestimonialGroup-module__TestimonialGroup__avatar--size-large___RDqmT{width:var(--base-size-48);height:var(--base-size-48)}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__quoteMark___kFAR6,.Primer_Brand__TestimonialGroup-module__TestimonialGroup__quote___EojHF,.Primer_Brand__TestimonialGroup-module__TestimonialGroup__media____4w1m{transition:opacity var(--brand-TestimonialGroup-fadeInDuration) ease-in-out}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__testimonial--out___3J8b7 .Primer_Brand__TestimonialGroup-module__TestimonialGroup__quoteMark___kFAR6{opacity:0;transition:opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out .12s}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__testimonial--out___3J8b7 .Primer_Brand__TestimonialGroup-module__TestimonialGroup__quote___EojHF{opacity:0;transition:opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 80ms}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__testimonial--out___3J8b7 .Primer_Brand__TestimonialGroup-module__TestimonialGroup__media____4w1m{opacity:0;transition:opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 40ms}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__testimonial--in___oPvYa .Primer_Brand__TestimonialGroup-module__TestimonialGroup__quote___EojHF{transition-delay:.1s}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__testimonial--in___oPvYa .Primer_Brand__TestimonialGroup-module__TestimonialGroup__media____4w1m{transition-delay:var(--brand-animation-duration-faster)}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__controls___S4ca5{flex:none;order:1;align-items:center;margin-block-start:var(--base-size-32);padding-block-start:var(--base-size-16);display:flex}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__content--expressive___Ff_H7 .Primer_Brand__TestimonialGroup-module__TestimonialGroup__controls___S4ca5{margin-block-start:0}.Primer_Brand__TestimonialGroup-module__TestimonialGroup__announcement___mOAht{width:var(--brand-borderWidth-thin);height:var(--brand-borderWidth-thin);clip-path:inset(50%);white-space:nowrap;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.Primer_Brand__TestimonialGroup-module__TestimonialGroup__quoteMark___kFAR6,.Primer_Brand__TestimonialGroup-module__TestimonialGroup__quote___EojHF,.Primer_Brand__TestimonialGroup-module__TestimonialGroup__media____4w1m{transition:none}}

package/esm/TestimonialGroup/TestimonialGroup.module.js

@@ -1,4 +1,4 @@
-import './TestimonialGroup.module-kFxPa1k1.css';//#region src/TestimonialGroup/TestimonialGroup.module.css
+import './TestimonialGroup.module-BDQZa1f9.css';//#region src/TestimonialGroup/TestimonialGroup.module.css
 var e = "Primer_Brand__TestimonialGroup-module__TestimonialGroup___WSHAX", t = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__content____OwRq", n = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__slides___bujxD", r = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__slide___BQN5P", i = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__avatar___g6C4c", a = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__quoteMark___kFAR6", o = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__quote___EojHF", s = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__media____4w1m", c = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__controls___S4ca5", l = "Primer_Brand__TestimonialGroup-module__TestimonialGroup__announcement___mOAht", u = {
 	TestimonialGroup: e,
 	TestimonialGroup__content: t,

package/esm/TestimonialGroup/TestimonialGroup.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestimonialGroup.module.js","names":[],"sources":["../../src/TestimonialGroup/TestimonialGroup.module.css"],"sourcesContent":[".TestimonialGroup {\n  width: 100%;\n  min-width: 0;\n  padding-block: calc(var(--base-size-48) + var(--base-size-8));\n  padding-inline: var(--base-size-32);\n}\n\n.TestimonialGroup__content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.TestimonialGroup__slides {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n}\n\n.TestimonialGroup__slide {\n  position: absolute;\n  width: 100%;\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.TestimonialGroup__slide--active {\n  position: relative;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.TestimonialGroup__avatar {\n  flex: none;\n  border: var(--base-size-2) solid var(--brand-Testimonial-quoteMarkColor-green);\n  border-radius: 50%;\n}\n\n.TestimonialGroup__avatar.TestimonialGroup__avatar--size-large {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.TestimonialGroup__quoteMark,\n.TestimonialGroup__quote,\n.TestimonialGroup__media {\n  transition: opacity var(--brand-TestimonialGroup-fadeInDuration) ease-in-out;\n}\n\n.TestimonialGroup__testimonial--out .TestimonialGroup__quoteMark {\n  opacity: 0;\n  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 120ms;\n}\n\n.TestimonialGroup__testimonial--out .TestimonialGroup__quote {\n  opacity: 0;\n  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 80ms;\n}\n\n.TestimonialGroup__testimonial--out .TestimonialGroup__media {\n  opacity: 0;\n  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 40ms;\n}\n\n.TestimonialGroup__testimonial--in .TestimonialGroup__quote {\n  transition-delay: 100ms;\n}\n\n.TestimonialGroup__testimonial--in .TestimonialGroup__media {\n  transition-delay: var(--brand-animation-duration-faster);\n}\n\n.TestimonialGroup__controls {\n  display: flex;\n  flex: none;\n  order: 1;\n  align-items: center;\n  margin-block-start: var(--base-size-32);\n  padding-block-start: var(--base-size-16);\n}\n\n.TestimonialGroup__content--expressive .TestimonialGroup__controls {\n  margin-block-start: 0;\n}\n\n.TestimonialGroup__announcement {\n  position: absolute;\n  width: var(--brand-borderWidth-thin);\n  height: var(--brand-borderWidth-thin);\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TestimonialGroup__quoteMark,\n  .TestimonialGroup__quote,\n  .TestimonialGroup__media {\n    transition: none;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .TestimonialGroup {\n    padding-block: var(--base-size-60);\n    padding-inline: var(--base-size-60);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TestimonialGroup.module.js","names":[],"sources":["../../src/TestimonialGroup/TestimonialGroup.module.css"],"sourcesContent":[".TestimonialGroup {\n  width: 100%;\n  min-width: 0;\n}\n\n.TestimonialGroup__content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.TestimonialGroup__slides {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n}\n\n.TestimonialGroup__slide {\n  position: absolute;\n  width: 100%;\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.TestimonialGroup__slide--active {\n  position: relative;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.TestimonialGroup__avatar {\n  flex: none;\n  border: var(--base-size-2) solid var(--brand-Testimonial-quoteMarkColor-green);\n  border-radius: 50%;\n}\n\n.TestimonialGroup__avatar.TestimonialGroup__avatar--size-large {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.TestimonialGroup__quoteMark,\n.TestimonialGroup__quote,\n.TestimonialGroup__media {\n  transition: opacity var(--brand-TestimonialGroup-fadeInDuration) ease-in-out;\n}\n\n.TestimonialGroup__testimonial--out .TestimonialGroup__quoteMark {\n  opacity: 0;\n  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 120ms;\n}\n\n.TestimonialGroup__testimonial--out .TestimonialGroup__quote {\n  opacity: 0;\n  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 80ms;\n}\n\n.TestimonialGroup__testimonial--out .TestimonialGroup__media {\n  opacity: 0;\n  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 40ms;\n}\n\n.TestimonialGroup__testimonial--in .TestimonialGroup__quote {\n  transition-delay: 100ms;\n}\n\n.TestimonialGroup__testimonial--in .TestimonialGroup__media {\n  transition-delay: var(--brand-animation-duration-faster);\n}\n\n.TestimonialGroup__controls {\n  display: flex;\n  flex: none;\n  order: 1;\n  align-items: center;\n  margin-block-start: var(--base-size-32);\n  padding-block-start: var(--base-size-16);\n}\n\n.TestimonialGroup__content--expressive .TestimonialGroup__controls {\n  margin-block-start: 0;\n}\n\n.TestimonialGroup__announcement {\n  position: absolute;\n  width: var(--brand-borderWidth-thin);\n  height: var(--brand-borderWidth-thin);\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TestimonialGroup__quoteMark,\n  .TestimonialGroup__quote,\n  .TestimonialGroup__media {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/base-C6FA-p8L.css

@@ -0,0 +1 @@
+:root{--brand-IconButton-spinner-animationDuration-reducedMotion:1.6s;--brand-IconButton-spinner-animationDuration-default:.8s;--brand-IconButton-icon-size-large:var(--brand-Button-icon-size-large);--brand-IconButton-icon-size-medium:var(--brand-Button-icon-size-large);--brand-IconButton-icon-size-small:var(--brand-Button-icon-size-small);--brand-IconButton-icon-size:var(--brand-Button-icon-size-large);--brand-IconButton-control-size-large:var(--brand-Button-control-size-large);--brand-IconButton-control-size-medium:var(--brand-Button-control-size-medium);--brand-IconButton-control-size-small:var(--brand-Button-control-size-small);--brand-IconButton-control-size:var(--brand-Button-control-size-medium)}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/icon-button/colors-with-modes-krqIK_mv.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light],[data-color-mode=auto],[data-color-mode=dark]{--brand-IconButton-secondary-fgColor:var(--brand-color-text-muted);--brand-IconButton-subtle-fgColor:var(--brand-color-text-muted);--brand-IconButton-danger-fgColor-rest:var(--brand-color-danger-fg);--brand-IconButton-danger-fgColor-hover:var(--base-color-scale-white-0);--brand-IconButton-danger-fgColor-active:var(--base-color-scale-white-0);--brand-IconButton-danger-bgColor-rest:var(--brand-button-secondary-bgColor-rest);--brand-IconButton-danger-bgColor-hover:var(--brand-color-danger-emphasis);--brand-IconButton-danger-bgColor-active:var(--brand-color-danger-emphasis);--brand-IconButton-danger-borderColor-rest:var(--brand-button-secondary-borderColor-rest);--brand-IconButton-danger-borderColor-hover:var(--brand-color-danger-emphasis);--brand-IconButton-danger-borderColor-active:var(--brand-color-danger-emphasis);--brand-IconButton-inactive-fgColor:var(--brand-color-text-muted);--brand-IconButton-inactive-bgColor:var(--brand-color-canvas-subtle);--brand-IconButton-inactive-borderColor:var(--brand-color-canvas-subtle);--brand-IconButton-invisible-fgColor:var(--brand-color-text-muted);--brand-IconButton-invisible-bgColor-rest:transparent;--brand-IconButton-invisible-borderColor-rest:transparent}@media (prefers-color-scheme:dark){[data-color-mode=auto]{--brand-IconButton-secondary-fgColor:var(--brand-color-text-muted);--brand-IconButton-subtle-fgColor:var(--brand-color-text-muted);--brand-IconButton-danger-fgColor-rest:var(--brand-color-danger-fg);--brand-IconButton-danger-fgColor-hover:var(--base-color-scale-white-0);--brand-IconButton-danger-fgColor-active:var(--base-color-scale-white-0);--brand-IconButton-danger-bgColor-rest:var(--brand-button-secondary-bgColor-rest);--brand-IconButton-danger-bgColor-hover:var(--brand-color-danger-emphasis);--brand-IconButton-danger-bgColor-active:var(--brand-color-danger-emphasis);--brand-IconButton-danger-borderColor-rest:var(--brand-button-secondary-borderColor-rest);--brand-IconButton-danger-borderColor-hover:var(--brand-color-danger-emphasis);--brand-IconButton-danger-borderColor-active:var(--brand-color-danger-emphasis);--brand-IconButton-inactive-fgColor:var(--brand-color-text-muted);--brand-IconButton-inactive-bgColor:var(--brand-color-canvas-subtle);--brand-IconButton-inactive-borderColor:var(--brand-color-canvas-subtle);--brand-IconButton-invisible-fgColor:var(--brand-color-text-muted);--brand-IconButton-invisible-bgColor-rest:transparent;--brand-IconButton-invisible-borderColor-rest:transparent}}

package/lib/IconButton/IconButton.d.ts

@@ -9,7 +9,7 @@ export declare const IconButtonSizes: readonly ["small", "medium", "large"];
 export declare const defaultIconButtonVariant: "secondary";
 export declare const defaultIconButtonSize: "medium";
 export type IconButtonVariant = (typeof IconButtonVariants)[number];
-export type IconButtonSize = (typeof IconButtonSizes)[number];
+export type IconButtonSize = (typeof IconButtonSizes)[number] | number;
 type IconButtonBaseProps<C extends React.ElementType> = Omit<BaseProps<C>, 'ref'> & {
     as?: C;
     variant?: IconButtonVariant;