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

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.4bfa3a79)
 
-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.4bfa3a79` 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/docs/introduction/theming.md

@@ -42,6 +42,7 @@ Primer Brand supports the following color modes through a dedicated prop by appl
 | ----- | ---------------------- | ------------------------- |
 | Light | `light`                | `data-color-mode="light"` |
 | Dark  | `dark`                 | `data-color-mode="dark"`  |
+| Auto  | `auto`                 | `data-color-mode="auto"`  |
 
 In-product appearance modes such as `dark_dimmed` and `light_high_contrast` resolve internally to Primer Brand's `dark` or `light` defaults. The resolved value is returned by `useTheme().colorMode` and applied to `data-color-mode`.
 
@@ -84,6 +85,18 @@ const Example = () => {
 render(Example)
 ```
 
+### Following the system preference
+
+Use `colorMode="auto"` to use the browser's system preference:
+
+```jsx
+<ThemeProvider colorMode="auto">
+  <App />
+</ThemeProvider>
+```
+
+`useTheme()` returns a `colorMode` property with a resolved light or dark value. `originalColorMode` is also returned, which can be helpful for forwarding or persisting the unresolved value.
+
 ### Locking the color mode
 
 For tighter control over appearance - such as forcing areas of a layout to appear in dark mode - we recommend nesting `ThemeProvider` and explicitly applying a color mode.

package/esm/Accordion/Accordion.js

@@ -3,7 +3,7 @@ import { BiColorGradients as t, Colors as n } from "../constants.js";
 import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
 import { Heading as i } from "../Heading/Heading.js";
 import { TriangleDownIcon as a } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes-PcQKqJQI.css';/* empty css                                                                                                       */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes-DKHKbQRW.css';/* empty css                                                                                                       */
 import o from "./Accordion.module.js";
 import { createContext as s, forwardRef as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";

package/esm/Accordion/{Accordion.module-B-iFuyHy.css → Accordion.module-B-vGHUg7.css}

@@ -1 +1 @@
-.Primer_Brand__Accordion-module__Accordion___RSoMC{--brand-Accordion-content-height:0px;box-sizing:border-box;position:relative}.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8:after,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8 .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transition:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{background-color:var(--brand-color-canvas-subtle);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-20);padding-inline:var(--base-size-20);justify-content:flex-start;align-items:center;gap:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{content:"";width:calc(var(--base-size-8) - 1px);height:var(--base-size-12);background-color:var(--brand-Accordion-indicator-idle);flex-shrink:0;margin-inline-end:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:hover:before{background-color:var(--brand-Accordion-indicator-hover)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{background-color:var(--brand-Accordion-indicator-active)}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h3,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h4,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h5,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h6{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:.15px;text-transform:uppercase}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)+.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{border-block-start:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{padding-block-start:var(--base-size-12);padding-inline:var(--base-size-20)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{block-size:var(--base-size-12)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child{border-bottom:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child:after{display:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{content:"";background-color:var(--brand-Accordion-border-color-default);height:var(--brand-borderWidth-thin);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);transform-origin:50% 100%;width:100%;position:absolute;bottom:0;left:0;transform:scaleY(0)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:hover:after,details[open].Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{background-color:var(--brand-color-accent-primary);transform:scaleY(1)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{cursor:pointer;padding:var(--base-size-24) 0;justify-content:space-between;align-items:center;display:flex;position:relative}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC::-webkit-details-marker{display:none}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC:has(>summary:focus-visible){outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:none}.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);color:var(--brand-color-text-emphasized);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{right:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-color-text-default);order:1;margin-inline-start:auto;position:static;transform:none}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{left:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-Accordion-toggle-color-start,var(--brand-color-text-emphasized))}.Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(-180deg)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-default)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue-purple-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-coral)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-gray)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-indigo)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lemon)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lime)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-orange)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple-red-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red-orange-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-teal)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-yellow)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W){padding-inline-end:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W{padding-inline-start:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion__content___GhUVO p,.Primer_Brand__Accordion-module__Accordion__content___GhUVO span:not(.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_),.Primer_Brand__Accordion-module__Accordion__content___GhUVO ul,.Primer_Brand__Accordion-module__Accordion__content___GhUVO ol{color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);position:relative;overflow:hidden}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0;transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{top:calc(var(--base-size-2) - var(--base-size-24))}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:before{content:"";block-size:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{content:"";display:block}[data-color-mode=dark] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Accordion-module__Accordion__content___GhUVO p:not(:first-child){margin-block-start:var(--base-size-16)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a>span{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active>span{color:var(--brand-InlineLink-color-pressed)}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:var(--brand-Accordion-content-height);z-index:0;position:relative}details[open].Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:none}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:1}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details[open]>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{margin-block-start:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(0)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-inline-start:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{gap:var(--base-size-40)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Accordion-module__Accordion___RSoMC,.Primer_Brand__Accordion-module__Accordion___RSoMC:before,.Primer_Brand__Accordion-module__Accordion___RSoMC:after,.Primer_Brand__Accordion-module__Accordion___RSoMC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
+.Primer_Brand__Accordion-module__Accordion___RSoMC{--brand-Accordion-content-height:0px;box-sizing:border-box;position:relative}.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8:after,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8 .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{transition:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{background-color:var(--brand-color-canvas-subtle);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-20);padding-inline:var(--base-size-20);justify-content:flex-start;align-items:center;gap:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{content:"";width:calc(var(--base-size-8) - 1px);height:var(--base-size-12);background-color:var(--brand-Accordion-indicator-idle);flex-shrink:0;margin-inline-end:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:hover:before{background-color:var(--brand-Accordion-indicator-hover)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI:before{background-color:var(--brand-Accordion-indicator-active)}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h3,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h4,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h5,.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI h6{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:.15px;text-transform:uppercase}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)+.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{border-block-start:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{padding-block-start:var(--base-size-12);padding-inline:var(--base-size-20)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT:not(.Primer_Brand__Accordion-module__Accordion___RSoMC .Primer_Brand__Accordion-module__Accordion___RSoMC)>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{block-size:var(--base-size-12)}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child{border-bottom:none}.Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT .Primer_Brand__Accordion-module__Accordion--default___R_5ld:last-child:after{display:none}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{content:"";background-color:var(--brand-Accordion-border-color-default);height:var(--brand-borderWidth-thin);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);transform-origin:50% 100%;width:100%;position:absolute;bottom:0;left:0;transform:scaleY(0)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld:hover:after,details[open].Primer_Brand__Accordion-module__Accordion--default___R_5ld:after{background-color:var(--brand-color-accent-primary);transform:scaleY(1)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{cursor:pointer;padding:var(--base-size-24) 0;justify-content:space-between;align-items:center;display:flex;position:relative}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC::-webkit-details-marker{display:none}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC:has(>summary:focus-visible){outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}details[open].Primer_Brand__Accordion-module__Accordion___RSoMC>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:focus-visible{outline:none}.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);color:var(--brand-color-text-emphasized);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__Accordion-module__Accordion__summary___zYOXC:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W) .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{right:0}.Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-color-text-default);order:1;margin-inline-start:auto;position:static;transform:none}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{left:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT .Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_{color:var(--brand-Accordion-toggle-color-start,var(--brand-color-text-emphasized))}.Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(-180deg)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-default___Hd_up{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-default)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue___TGA5S{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-blue-purple___dnh9G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-blue-purple-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-coral____IedP{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-coral)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green___Q_oKN{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-green-blue___UPhxW{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-green-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-gray___XAdlE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-gray)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-indigo___MbEJo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-indigo)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lemon___yKljE{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lemon)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-lime___dXlEo{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-lime)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-orange___DIqep{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-orange)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink___JQk2J{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-pink-blue___8wMk6{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-pink-blue-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple___P3aRT{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-purple-red___DuF8G{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-purple-red-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red___uRFGS{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-red-orange___cmXlh{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-red-orange-start)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-teal___fE9fd{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-teal)}.Primer_Brand__Accordion-module__Accordion__summary--toggleColor-yellow___ws5We{--brand-Accordion-toggle-color-start:var(--brand-Accordion-toggle-color-yellow)}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT:not(.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W){padding-inline-end:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W{padding-inline-start:var(--base-size-48)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO,.Primer_Brand__Accordion-module__Accordion__content___GhUVO p,.Primer_Brand__Accordion-module__Accordion__content___GhUVO span:not(.Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_),.Primer_Brand__Accordion-module__Accordion__content___GhUVO ul,.Primer_Brand__Accordion-module__Accordion__content___GhUVO ol{color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);position:relative;overflow:hidden}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0;transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide)}.Primer_Brand__Accordion-module__Accordion--default___R_5ld>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{top:calc(var(--base-size-2) - var(--base-size-24))}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:before{content:"";block-size:var(--base-size-12);display:block}.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof:after{content:"";display:block}[data-color-mode=dark] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}@media (prefers-color-scheme:dark){[data-color-mode=auto] .Primer_Brand__Accordion-module__Accordion__content___GhUVO{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}}.Primer_Brand__Accordion-module__Accordion__content___GhUVO p:not(:first-child){margin-block-start:var(--base-size-16)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a{color:var(--brand-InlineLink-color-rest);-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-color:var(--brand-InlineLink-color-rest);text-decoration-thickness:var(--brand-borderWidth-thin);text-underline-position:under;transition:var(--brand-InlineLink-transition-timing) text-decoration;position:relative}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:hover{text-decoration-thickness:var(--brand-borderWidth-thick)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a>span{font-weight:inherit;color:var(--brand-InlineLink-color-rest)}.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active,.Primer_Brand__Accordion-module__Accordion__content___GhUVO a:active>span{color:var(--brand-InlineLink-color-pressed)}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:var(--brand-Accordion-content-height);z-index:0;position:relative}details[open].Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:none}details[open]>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:1}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO{max-height:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__content___GhUVO>.Primer_Brand__Accordion-module__Accordion__content-inner___R4pof{opacity:0}.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details[open]>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO,details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary--default___LV2dT+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{margin-block-start:0}details.Primer_Brand__Accordion-module__Accordion--closing___R_qJH>.Primer_Brand__Accordion-module__Accordion__summary___zYOXC .Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5{transform:rotate(0)}details[open]>.Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W+.Primer_Brand__Accordion-module__Accordion__content___GhUVO{padding-inline-start:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Accordion-module__Accordion__summary___zYOXC{gap:var(--base-size-40)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Accordion-module__Accordion___RSoMC,.Primer_Brand__Accordion-module__Accordion___RSoMC:before,.Primer_Brand__Accordion-module__Accordion___RSoMC:after,.Primer_Brand__Accordion-module__Accordion___RSoMC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Accordion/Accordion.module.js

@@ -1,4 +1,4 @@
-import './Accordion.module-B-iFuyHy.css';//#region src/Accordion/Accordion.module.css
+import './Accordion.module-B-vGHUg7.css';//#region src/Accordion/Accordion.module.css
 var e = "Primer_Brand__Accordion-module__Accordion___RSoMC", t = "Primer_Brand__Accordion-module__Accordion__content___GhUVO", n = "Primer_Brand__Accordion-module__Accordion__summary___zYOXC", r = {
 	Accordion: e,
 	"Accordion--disableAnimation": "Primer_Brand__Accordion-module__Accordion--disableAnimation____eC_8",

package/esm/Accordion/Accordion.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n  --brand-Accordion-content-height: 0px;\n\n  box-sizing: border-box;\n  position: relative;\n}\n\n.Accordion--disableAnimation::after,\n.Accordion--disableAnimation .Accordion__summary-toggleIcon,\n.Accordion--disableAnimation > .Accordion__content,\n.Accordion--disableAnimation > .Accordion__content > .Accordion__content-inner {\n  transition: none;\n}\n\n.Accordion--default {\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n  background-color: var(--brand-color-canvas-subtle);\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  padding-block: var(--base-size-20);\n  padding-inline: var(--base-size-20);\n  gap: 0;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n  content: '';\n  display: block;\n  width: calc(var(--base-size-8) - 1px);\n  height: var(--base-size-12);\n  flex-shrink: 0;\n  margin-inline-end: var(--base-size-12);\n  background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n  background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n  background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--brand-text-weight-500);\n  line-height: var(--brand-text-lineHeight-100);\n  letter-spacing: 0.15px;\n  text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n  + .Accordion--emphasis:not(.Accordion .Accordion)\n  > .Accordion__summary {\n  border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner {\n  padding-block-start: var(--base-size-12);\n  padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner::after {\n  block-size: var(--base-size-12);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n  border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n  display: none;\n}\n\n.Accordion--default::after {\n  content: '';\n  background-color: var(--brand-Accordion-border-color-default);\n  height: var(--brand-borderWidth-thin);\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n  transform: scaleY(0);\n  transform-origin: 50% 100%;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n  background-color: var(--brand-color-accent-primary);\n  transform: scaleY(1);\n}\n\n.Accordion__summary {\n  cursor: pointer;\n  padding: var(--base-size-24) 0;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n  padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n  display: none;\n}\n\n.Accordion__summary:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit */\ndetails[open].Accordion:has(> summary:focus-visible) {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n  outline: none;\n}\n\n.Accordion__summary-toggle {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--base-size-24);\n  width: var(--base-size-24);\n  color: var(--brand-color-text-emphasized);\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary-toggle {\n  right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary-toggle {\n  position: static;\n  transform: none;\n  order: 1;\n  margin-inline-start: auto;\n  color: var(--brand-color-text-default);\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary-toggle {\n  left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary-toggle {\n  color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-emphasized));\n}\n\n.Accordion__summary-toggleIcon {\n  transform-origin: 50% 50%;\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\ndetails[open] > .Accordion__summary .Accordion__summary-toggleIcon {\n  transform: rotate(-180deg);\n}\n\n.Accordion__summary--toggleColor-default {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n  padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n  padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary-toggle),\n.Accordion__content ul,\n.Accordion__content ol {\n  color: var(--brand-color-text-muted);\n  font-family: var(--brand-fontStack-sansSerif);\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n}\n\n.Accordion__content {\n  overflow: hidden;\n  max-height: 0;\n  transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n  position: relative;\n}\n\n.Accordion__content-inner {\n  opacity: 0;\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.Accordion--default > .Accordion__content {\n  top: calc(var(--base-size-2) - var(--base-size-24));\n}\n\n.Accordion__summary--default + .Accordion__content > .Accordion__content-inner::before {\n  content: '';\n  display: block;\n  block-size: var(--base-size-12);\n}\n\n.Accordion__content-inner::after {\n  content: '';\n  display: block;\n}\n\n[data-color-mode='dark'] .Accordion__content {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n\n.Accordion__content p:not(:first-child) {\n  margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n  color: var(--brand-InlineLink-color-rest);\n  position: relative;\n  text-decoration: underline;\n  text-decoration-color: var(--brand-InlineLink-color-rest);\n  text-decoration-thickness: var(--brand-borderWidth-thin);\n  text-underline-position: under;\n  transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n  text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n  font-weight: inherit;\n  color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n  color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n  max-height: var(--brand-Accordion-content-height);\n  position: relative;\n  z-index: 0;\n}\n\ndetails[open].Accordion--disableAnimation > .Accordion__content {\n  max-height: none;\n}\n\ndetails[open] > .Accordion__content > .Accordion__content-inner {\n  opacity: 1;\n}\n\ndetails.Accordion--closing > .Accordion__content {\n  max-height: 0;\n}\n\ndetails.Accordion--closing > .Accordion__content > .Accordion__content-inner {\n  opacity: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n  margin-block-start: 0;\n}\n\ndetails[open] > .Accordion__summary--default + .Accordion__content {\n  margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary--default + .Accordion__content {\n  margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary .Accordion__summary-toggleIcon {\n  transform: rotate(0deg);\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n  padding-inline-start: var(--base-size-48);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n  .Accordion__summary {\n    gap: var(--base-size-40);\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Accordion,\n  .Accordion::before,\n  .Accordion::after,\n  .Accordion * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Accordion.module.js","names":[],"sources":["../../src/Accordion/Accordion.module.css"],"sourcesContent":[".Accordion {\n  --brand-Accordion-content-height: 0px;\n\n  box-sizing: border-box;\n  position: relative;\n}\n\n.Accordion--disableAnimation::after,\n.Accordion--disableAnimation .Accordion__summary-toggleIcon,\n.Accordion--disableAnimation > .Accordion__content,\n.Accordion--disableAnimation > .Accordion__content > .Accordion__content-inner {\n  transition: none;\n}\n\n.Accordion--default {\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {\n  background-color: var(--brand-color-canvas-subtle);\n  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  padding-block: var(--base-size-20);\n  padding-inline: var(--base-size-20);\n  gap: 0;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.Accordion__summary--emphasis::before {\n  content: '';\n  display: block;\n  width: calc(var(--base-size-8) - 1px);\n  height: var(--base-size-12);\n  flex-shrink: 0;\n  margin-inline-end: var(--base-size-12);\n  background-color: var(--brand-Accordion-indicator-idle);\n}\n\n.Accordion__summary--emphasis:hover::before {\n  background-color: var(--brand-Accordion-indicator-hover);\n}\n\ndetails[open] > .Accordion__summary--emphasis::before {\n  background-color: var(--brand-Accordion-indicator-active);\n}\n\n.Accordion__summary--emphasis :is(h3, h4, h5, h6) {\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--brand-text-weight-500);\n  line-height: var(--brand-text-lineHeight-100);\n  letter-spacing: 0.15px;\n  text-transform: uppercase;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion)\n  + .Accordion--emphasis:not(.Accordion .Accordion)\n  > .Accordion__summary {\n  border-block-start: none;\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner {\n  padding-block-start: var(--base-size-12);\n  padding-inline: var(--base-size-20);\n}\n\n.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner::after {\n  block-size: var(--base-size-12);\n}\n\n.Accordion--emphasis .Accordion--default:last-child {\n  border-bottom: none;\n}\n\n.Accordion--emphasis .Accordion--default:last-child::after {\n  display: none;\n}\n\n.Accordion--default::after {\n  content: '';\n  background-color: var(--brand-Accordion-border-color-default);\n  height: var(--brand-borderWidth-thin);\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n  transform: scaleY(0);\n  transform-origin: 50% 100%;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n.Accordion--default:hover::after,\ndetails[open].Accordion--default::after {\n  background-color: var(--brand-color-accent-primary);\n  transform: scaleY(1);\n}\n\n.Accordion__summary {\n  cursor: pointer;\n  padding: var(--base-size-24) 0;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.Accordion__summary--reversed-toggles {\n  padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__summary::-webkit-details-marker {\n  display: none;\n}\n\n.Accordion__summary:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n/* When open, move focus ring to the details element to wrap summary + content as one unit */\ndetails[open].Accordion:has(> summary:focus-visible) {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\ndetails[open].Accordion > .Accordion__summary:focus-visible {\n  outline: none;\n}\n\n.Accordion__summary-toggle {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--base-size-24);\n  width: var(--base-size-24);\n  color: var(--brand-color-text-emphasized);\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary-toggle {\n  right: 0;\n}\n\n.Accordion__summary--emphasis .Accordion__summary-toggle {\n  position: static;\n  transform: none;\n  order: 1;\n  margin-inline-start: auto;\n  color: var(--brand-color-text-default);\n}\n\n.Accordion__summary--reversed-toggles .Accordion__summary-toggle {\n  left: 0;\n}\n\n.Accordion__summary--default .Accordion__summary-toggle {\n  color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-emphasized));\n}\n\n.Accordion__summary-toggleIcon {\n  transform-origin: 50% 50%;\n  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\ndetails[open] > .Accordion__summary .Accordion__summary-toggleIcon {\n  transform: rotate(-180deg);\n}\n\n.Accordion__summary--toggleColor-default {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);\n}\n\n.Accordion__summary--toggleColor-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);\n}\n\n.Accordion__summary--toggleColor-blue-purple {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);\n}\n\n.Accordion__summary--toggleColor-coral {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);\n}\n\n.Accordion__summary--toggleColor-green {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);\n}\n\n.Accordion__summary--toggleColor-green-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);\n}\n\n.Accordion__summary--toggleColor-gray {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);\n}\n\n.Accordion__summary--toggleColor-indigo {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);\n}\n\n.Accordion__summary--toggleColor-lemon {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);\n}\n\n.Accordion__summary--toggleColor-lime {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);\n}\n\n.Accordion__summary--toggleColor-orange {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);\n}\n\n.Accordion__summary--toggleColor-pink {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);\n}\n\n.Accordion__summary--toggleColor-pink-blue {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);\n}\n\n.Accordion__summary--toggleColor-purple {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);\n}\n\n.Accordion__summary--toggleColor-purple-red {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);\n}\n\n.Accordion__summary--toggleColor-red {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);\n}\n\n.Accordion__summary--toggleColor-red-orange {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);\n}\n\n.Accordion__summary--toggleColor-teal {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);\n}\n\n.Accordion__summary--toggleColor-yellow {\n  --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);\n}\n\n.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {\n  padding-inline-end: var(--base-size-48);\n}\n\n.Accordion__summary--reversed-toggles {\n  padding-inline-start: var(--base-size-48);\n}\n\n.Accordion__content,\n.Accordion__content p,\n.Accordion__content span:not(.Accordion__summary-toggle),\n.Accordion__content ul,\n.Accordion__content ol {\n  color: var(--brand-color-text-muted);\n  font-family: var(--brand-fontStack-sansSerif);\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n}\n\n.Accordion__content {\n  overflow: hidden;\n  max-height: 0;\n  transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n  position: relative;\n}\n\n.Accordion__content-inner {\n  opacity: 0;\n  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.Accordion--default > .Accordion__content {\n  top: calc(var(--base-size-2) - var(--base-size-24));\n}\n\n.Accordion__summary--default + .Accordion__content > .Accordion__content-inner::before {\n  content: '';\n  display: block;\n  block-size: var(--base-size-12);\n}\n\n.Accordion__content-inner::after {\n  content: '';\n  display: block;\n}\n\n[data-color-mode='dark'] .Accordion__content {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-color-mode='auto'] .Accordion__content {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: auto;\n  }\n}\n\n.Accordion__content p:not(:first-child) {\n  margin-block-start: var(--base-size-16);\n}\n\n.Accordion__content a {\n  color: var(--brand-InlineLink-color-rest);\n  position: relative;\n  text-decoration: underline;\n  text-decoration-color: var(--brand-InlineLink-color-rest);\n  text-decoration-thickness: var(--brand-borderWidth-thin);\n  text-underline-position: under;\n  transition: var(--brand-InlineLink-transition-timing) text-decoration;\n}\n\n.Accordion__content a:hover {\n  text-decoration-thickness: var(--brand-borderWidth-thick);\n}\n\n.Accordion__content a,\n.Accordion__content a > span {\n  font-weight: inherit;\n  color: var(--brand-InlineLink-color-rest);\n}\n\n.Accordion__content a:active,\n.Accordion__content a:active > span {\n  color: var(--brand-InlineLink-color-pressed);\n}\n\ndetails[open] > .Accordion__content {\n  max-height: var(--brand-Accordion-content-height);\n  position: relative;\n  z-index: 0;\n}\n\ndetails[open].Accordion--disableAnimation > .Accordion__content {\n  max-height: none;\n}\n\ndetails[open] > .Accordion__content > .Accordion__content-inner {\n  opacity: 1;\n}\n\ndetails.Accordion--closing > .Accordion__content {\n  max-height: 0;\n}\n\ndetails.Accordion--closing > .Accordion__content > .Accordion__content-inner {\n  opacity: 0;\n}\n\n.Accordion__summary--default + .Accordion__content {\n  margin-block-start: 0;\n}\n\ndetails[open] > .Accordion__summary--default + .Accordion__content {\n  margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary--default + .Accordion__content {\n  margin-block-start: 0;\n}\n\ndetails.Accordion--closing > .Accordion__summary .Accordion__summary-toggleIcon {\n  transform: rotate(0deg);\n}\n\ndetails[open] > .Accordion__summary--reversed-toggles + .Accordion__content {\n  padding-inline-start: var(--base-size-48);\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 48rem) {\n  .Accordion__summary {\n    gap: var(--base-size-40);\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Accordion,\n  .Accordion::before,\n  .Accordion::after,\n  .Accordion * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/ActionMenu/ActionMenu.js

@@ -11,7 +11,7 @@ import { useKeyboardEscape as l } from "../hooks/useKeyboardEscape.js";
 import { ActionMenuButtonModes as u, ActionMenuProvider as d, ActionMenuSizes as f, useActionMenuContext as p } from "./ActionMenuContext.js";
 import { CheckIcon as m } from "../node_modules/@primer/octicons-react/dist/icons/CheckIcon.js";
 import { ChevronDownIcon as h } from "../node_modules/@primer/octicons-react/dist/icons/ChevronDownIcon.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes-mgXFtgvP.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes-CyS5r4GY.css';/* empty css                                                                                                         */
 import g from "./ActionMenu.module.js";
 import _, { Children as v, cloneElement as y, forwardRef as b, isValidElement as x, memo as S, useCallback as C, useEffect as w, useMemo as T, useRef as E, useState as D } from "react";
 import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
@@ -359,9 +359,9 @@ var N = {
 		children: S
 	});
 }, B = b(({ children: t, className: n, "data-testid": r, menuOpen: i, ...s }, c) => {
-	let { colorMode: l } = o();
+	let { originalColorMode: l, colorMode: u } = o();
 	return /* @__PURE__ */ k(a, {
-		colorMode: n?.includes("ActionMenu__menu--split") ? "light" : l,
+		colorMode: n?.includes("ActionMenu__menu--split") ? "light" : l ?? u,
 		children: /* @__PURE__ */ k("ul", {
 			ref: c,
 			className: e(n),

package/esm/ActionMenu/ActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useCallback,\n  useState,\n  useEffect,\n  PropsWithChildren,\n  forwardRef,\n  memo,\n  ReactElement,\n  useMemo,\n} from 'react'\nimport {Button, ButtonProps} from '../Button'\nimport {IconButton, type IconButtonProps} from '../IconButton'\nimport {Text} from '../Text'\nimport {ThemeProvider, useTheme} from '../ThemeProvider'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {\n  ActionMenuProvider,\n  useActionMenuContext,\n  type ActionMenuButtonModes as ActionMenuButtonMode,\n  type ActionMenuSizes as ActionMenuSize,\n} from './ActionMenuContext'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n  root: 'ActionMenu',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get list() {\n    return `${this.root}-list`\n  },\n  get item() {\n    return `${this.root}-list-item`\n  },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n  'inside-top',\n  'inside-bottom',\n  'inside-left',\n  'inside-right',\n  'inside-center',\n  'outside-top',\n  'outside-bottom',\n  'outside-left',\n  'outside-right',\n] as PositionSettings['side'][]\n\nexport {ActionMenuButtonModes, ActionMenuProvider, ActionMenuSizes, useActionMenuContext} from './ActionMenuContext'\n\nexport type ActionMenuProps = {\n  /**\n   * The content of the ActionMenu. Must include an ActionMenu.Button or ActionMenu.IconButton and an ActionMenu.Overlay\n   */\n  children:\n    | ReactElement<ActionMenuButtonProps>\n    | ReactElement<ActionMenuIconButtonProps>\n    | ReactElement<ActionMenuOverlayProps>\n    | Array<\n        | ReactElement<ActionMenuButtonProps>\n        | ReactElement<ActionMenuIconButtonProps>\n        | ReactElement<ActionMenuOverlayProps>\n      >\n  /**\n   * Determines whether the ActionMenu is disabled\n   */\n  disabled?: boolean\n  /**\n   * Determines whether the ActionMenu is open by default\n   */\n  open?: boolean\n  /**\n   * Callback that is called when an item is selected.\n   * The value of the selected item is passed as an argument.\n   */\n  onSelect?: (newValue: string) => void\n  /**\n   * The selection variant of the ActionMenu.\n   * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n   * - `none`: No items can be selected. Menu items as a menuitem.\n   */\n  selectionVariant?: 'single' | 'none'\n  /**\n   * Test id for the ActionMenu\n   */\n  'data-testid'?: string\n  /**\n   * Horizontal alignment of the menu relative to the bottom of the button\n   */\n  menuAlignment?: 'start' | 'end'\n  /**\n   * Size configuratin of the ActionMenu\n   */\n  size?: ActionMenuSize\n  /*\n   * Side the menu overlay appears\n   */\n  menuSide?: PositionSettings['side']\n  /**\n   * Alternative behavior for the button and menu items\n   * - `default`: The button and menu items behave as a standard button and menu item.\n   * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n   */\n  mode?: ActionMenuButtonMode\n} & BaseProps<HTMLDivElement>\n\nconst _ActionMenuRoot = memo(\n  ({\n    id,\n    children,\n    'data-testid': testId,\n    disabled,\n    open = false,\n    selectionVariant = 'none',\n    menuAlignment = 'end',\n    size = 'medium',\n    menuSide,\n    onSelect,\n    mode = 'default',\n  }: ActionMenuProps) => {\n    const [showMenu, setShowMenu] = useState(open)\n    const floatingElementRef = useRef<HTMLUListElement>(null)\n    const anchorElementRef = useRef<HTMLButtonElement>(null)\n    const instanceId = useId(id)\n\n    useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n    const closeMenuCallback = useCallback(() => {\n      setShowMenu(false)\n    }, [])\n\n    useKeyboardEscape(closeMenuCallback)\n\n    const toggleMenu = useCallback(() => {\n      setShowMenu(!showMenu)\n    }, [showMenu])\n\n    const handleOnSelect = useCallback(\n      (newValue: string) => {\n        if (onSelect) onSelect(newValue)\n        toggleMenu()\n      },\n      [onSelect, toggleMenu],\n    )\n\n    const handleItemSelection = useCallback(\n      (newValue: string) => {\n        handleOnSelect(newValue)\n        toggleMenu()\n        anchorElementRef.current?.focus()\n      },\n      [handleOnSelect, toggleMenu, anchorElementRef],\n    )\n\n    useEffect(() => {\n      if (showMenu && floatingElementRef.current) {\n        const floatingElement = floatingElementRef.current\n        const isSplitLayout = mode === 'split-button'\n        const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n        focusZone(floatingElementRef.current, {\n          bindKeys: FocusKeys.ArrowVertical,\n          focusableElementFilter: splitLayoutFilter,\n          focusInStrategy: isSplitLayout ? 'first' : undefined,\n        })\n\n        // enter selects item\n        floatingElement.addEventListener('keydown', event => {\n          if (event.key === 'Enter') {\n            const target = event.target as HTMLElement\n\n            // Get the proper element containing the data-value\n            const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n            if (!targetElement || targetElement.getAttribute('aria-disabled') === 'true') return\n\n            const value = targetElement.getAttribute('data-value')\n            if (value) {\n              handleOnSelect(value)\n              setShowMenu(false)\n              setTimeout(() => {\n                anchorElementRef.current?.focus()\n              }, 10)\n            }\n          }\n        })\n\n        const targetSelector = isSplitLayout ? 'a' : 'li'\n\n        // focusses first item\n        const firstItem = floatingElementRef.current.querySelector(targetSelector)\n        if (firstItem) {\n          setTimeout(() => {\n            firstItem.focus()\n          }, 10)\n        }\n\n        const lastItem =\n          floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n        lastItem.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowDown') {\n            keyboardEvent.preventDefault()\n            firstItem?.focus()\n          }\n        })\n\n        firstItem?.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowUp') {\n            keyboardEvent.preventDefault()\n            lastItem.focus()\n          }\n        })\n\n        //on escape refocus\n        floatingElement.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'Escape') {\n            anchorElementRef.current?.focus()\n          }\n        })\n      }\n    }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n    // Calculate the position of the menu\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef,\n        anchorElementRef,\n        align: menuAlignment,\n        allowOutOfBounds: true,\n        side: menuSide,\n      },\n      [showMenu],\n    )\n\n    const childrenArray = Children.toArray(children)\n    const menuLabel = childrenArray.find(\n      (child): child is ReactElement<ActionMenuOverlayProps> =>\n        isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay,\n    )?.props['aria-label']\n\n    const {Button: SelectButton, Overlay: SelectOverlay} = childrenArray.reduce<{\n      Button?: ReactElement<ActionMenuButtonProps | ActionMenuIconButtonProps>\n      Overlay?: ReactElement<ActionMenuOverlayProps>\n    }>((acc, child) => {\n      if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n        acc.Button = cloneElement(child, {\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\n        })\n      } else if (isValidElement<ActionMenuIconButtonInternalProps>(child) && child.type === ActionMenuIconButton) {\n        acc.Button = cloneElement(child, {\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, mode === 'split-button' && styles['ActionMenu__button--split-button']),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\n        })\n      } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n        acc.Overlay = cloneElement(child, {\n          ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n          className: clsx(\n            styles.ActionMenu__menu,\n            position && styles['ActionMenu__menu--visible'],\n            position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n            styles[`ActionMenu__menu--${size}`],\n            mode === 'split-button' && 'ActionMenu__menu--split',\n          ),\n          style: {\n            top: `${position?.top ?? 0}px`,\n            left: `${position?.left ?? 0}px`,\n          },\n          id: `${instanceId}-menu`,\n          children: Children.map(child.props.children, item => {\n            if (isValidElement<ActionMenuItemBaseProps>(item)) {\n              return cloneElement(item, {\n                handler: handleItemSelection,\n                type: mode === 'split-button' ? 'link' : selectionVariant,\n              })\n            }\n            return item\n          }),\n        })\n      }\n      return acc\n    }, {})\n\n    return (\n      <ActionMenuProvider size={size} mode={mode} menuLabel={menuLabel} onMenuToggle={toggleMenu}>\n        <div\n          id={instanceId}\n          className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n          data-testid={testId || testIds.root}\n        >\n          {SelectButton}\n          {showMenu ? SelectOverlay : null}\n        </div>\n      </ActionMenuProvider>\n    )\n  },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n  BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>\n> & {\n  as?: ButtonProps<'a'>['as']\n  href?: ButtonProps<'a'>['href']\n  menuOpen?: boolean\n  'data-testid'?: string\n  size?: ActionMenuSize\n  variant?: ButtonProps<'a'>['variant']\n  leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n  (\n    {\n      as,\n      href,\n      id,\n      children,\n      className,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      onClick,\n      leadingVisual,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [disabled, onClick, onMenuToggle],\n    )\n    const handlePrimaryActionClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n      },\n      [disabled, onClick],\n    )\n\n    if (mode === 'split-button') {\n      const splitButtonVariant = variant ?? 'primary'\n\n      return (\n        <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n          <Button\n            as={as}\n            href={href}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-primary'],\n              styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n              styles[`ActionMenu__innerButton--${size}`],\n              disabled && styles['ActionMenu__innerButton--disabled'],\n            )}\n            variant={splitButtonVariant}\n            aria-disabled={disabled}\n            data-testid={testId || testIds.button}\n            size={size}\n            leadingVisual={leadingVisual}\n            onClick={handlePrimaryActionClick}\n            {...props}\n          >\n            <span className={styles['ActionMenu__button-text']}>{children}</span>\n          </Button>\n          <Button\n            ref={ref}\n            id={id}\n            as=\"button\"\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-menu'],\n            )}\n            variant={splitButtonVariant}\n            aria-haspopup=\"true\"\n            aria-label={menuLabel}\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onMenuToggle}\n            disabled={disabled}\n          >\n            <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n          </Button>\n        </div>\n      )\n    }\n\n    return (\n      <Button\n        ref={ref}\n        id={id}\n        className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n        aria-haspopup=\"true\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        variant={variant}\n        leadingVisual={leadingVisual}\n        trailingVisual={<ChevronDownIcon />}\n        onClick={handleClick}\n        {...props}\n      >\n        <span className={styles['ActionMenu__button-text']}>{children}</span>\n      </Button>\n    )\n  },\n)\n\nexport type ActionMenuIconButtonProps<C extends React.ElementType = 'button'> = Omit<IconButtonProps<C>, 'size'> & {\n  'data-testid'?: string\n}\n\ntype ActionMenuIconButtonInternalProps = React.PropsWithoutRef<ActionMenuIconButtonProps<React.ElementType>> & {\n  ref?: React.Ref<HTMLButtonElement>\n  menuOpen?: boolean\n  size?: ActionMenuSize\n}\n\ntype ActionMenuIconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: ActionMenuIconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement | null\n\nconst ActionMenuIconButton = forwardRef<HTMLButtonElement, ActionMenuIconButtonInternalProps>(\n  (\n    {\n      as,\n      id,\n      icon,\n      className,\n      'aria-label': ariaLabel,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      variant,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [disabled, onClick, onMenuToggle],\n    )\n    const handlePrimaryActionClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n      },\n      [disabled, onClick],\n    )\n\n    if (mode === 'split-button') {\n      const splitButtonVariant = variant ?? 'primary'\n\n      return (\n        <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n          <IconButton\n            {...props}\n            as={as}\n            icon={icon}\n            aria-label={ariaLabel}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-primary'],\n              styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n              styles[`ActionMenu__innerButton--${size}`],\n              disabled && styles['ActionMenu__innerButton--disabled'],\n            )}\n            variant={splitButtonVariant}\n            aria-disabled={disabled}\n            data-testid={testId || testIds.button}\n            size={size}\n            onClick={handlePrimaryActionClick}\n          />\n          <IconButton\n            ref={ref}\n            id={id}\n            icon={ChevronDownIcon}\n            aria-label={menuLabel}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-menu'],\n            )}\n            variant={splitButtonVariant}\n            aria-haspopup=\"menu\"\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onMenuToggle}\n            disabled={disabled}\n          />\n        </div>\n      )\n    }\n\n    return (\n      <IconButton\n        {...props}\n        ref={ref}\n        as={as}\n        id={id}\n        icon={icon}\n        aria-label={ariaLabel}\n        className={className}\n        aria-haspopup=\"menu\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        variant={variant}\n        onClick={handleClick}\n      />\n    )\n  },\n) as ActionMenuIconButtonComponent\n\ntype ActionMenuItemBaseProps = {\n  handler?: (newValue: string) => void\n  type?: 'none' | 'single' | 'link'\n  disabled?: boolean\n  size?: ActionMenuSize\n  leadingVisual?: React.ReactElement | React.ReactNode | Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n  as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n  as?: string\n  value?: string\n  selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>\n\nconst roleTypeMap = {\n  none: 'menuitem',\n  single: 'menuitemradio',\n  link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n  as,\n  children,\n  className,\n  disabled,\n  handler,\n  selected,\n  type,\n  value,\n  onClick,\n  onKeyDown,\n  leadingVisual: LeadingVisual,\n  ...props\n}: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => {\n  const {size} = useActionMenuContext()\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onClick?.(e)\n\n      if (!disabled) {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLLIElement>) => {\n      onKeyDown?.(e)\n\n      if (!disabled && e.key === 'Enter') {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onKeyDown],\n  )\n\n  const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n    () => ({\n      className: clsx(\n        styles.ActionMenu__item,\n        type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n        size && styles[`ActionMenu__item--${size}`],\n        className,\n      ),\n      role: roleTypeMap[type || 'single'],\n      'aria-disabled': disabled,\n      tabIndex: -1,\n      'data-value': value,\n      ...props,\n    }),\n    [props, type, size, className, disabled, value],\n  )\n\n  const contents = useMemo(\n    () => (\n      <>\n        {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n          ? React.cloneElement(LeadingVisual, {\n              width: LeadingVisual.props.width || 20,\n              height: LeadingVisual.props.width || 20,\n            })\n          : null}\n        {type === 'single' && (\n          <span className={styles['ActionMenu__item-leadingVisual']}>\n            {selected && (\n              <CheckIcon\n                className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n                size={16}\n              />\n            )}\n          </span>\n        )}\n\n        <span className={styles['ActionMenu__item-text']}>\n          <Text\n            variant={disabled ? 'muted' : 'default'}\n            size={size === 'medium' ? '200' : '100'}\n            className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n          >\n            {children}\n          </Text>\n        </span>\n      </>\n    ),\n    [LeadingVisual, children, selected, disabled, size, type],\n  )\n\n  if (as === 'a') {\n    return (\n      <li\n        // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n        role=\"menuitem\"\n        {...liProps}\n        // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        <a\n          className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n          href={props.href}\n        >\n          {contents}\n        </a>\n      </li>\n    )\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n    <li\n      // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n      role=\"menuitem\"\n      {...liProps}\n      aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      {contents}\n    </li>\n  )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n  'aria-label': string\n  id?: string\n  'data-testid'?: string\n  menuOpen?: boolean\n  style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n  ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n    const {colorMode: defaultColorMode} = useTheme()\n\n    const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : defaultColorMode\n\n    return (\n      <ThemeProvider colorMode={colorMode}>\n        <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId || testIds.list} {...rest}>\n          {children}\n        </ul>\n      </ThemeProvider>\n    )\n  },\n)\n\n/**\n * Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n  Button: ActionMenuButton,\n  IconButton: ActionMenuIconButton,\n  Item: ActionMenuItem,\n  Overlay: ActionMenuOverlay,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useCallback,\n  useState,\n  useEffect,\n  PropsWithChildren,\n  forwardRef,\n  memo,\n  ReactElement,\n  useMemo,\n} from 'react'\nimport {Button, ButtonProps} from '../Button'\nimport {IconButton, type IconButtonProps} from '../IconButton'\nimport {Text} from '../Text'\nimport {ThemeProvider, useTheme} from '../ThemeProvider'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {\n  ActionMenuProvider,\n  useActionMenuContext,\n  type ActionMenuButtonModes as ActionMenuButtonMode,\n  type ActionMenuSizes as ActionMenuSize,\n} from './ActionMenuContext'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n  root: 'ActionMenu',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get list() {\n    return `${this.root}-list`\n  },\n  get item() {\n    return `${this.root}-list-item`\n  },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n  'inside-top',\n  'inside-bottom',\n  'inside-left',\n  'inside-right',\n  'inside-center',\n  'outside-top',\n  'outside-bottom',\n  'outside-left',\n  'outside-right',\n] as PositionSettings['side'][]\n\nexport {ActionMenuButtonModes, ActionMenuProvider, ActionMenuSizes, useActionMenuContext} from './ActionMenuContext'\n\nexport type ActionMenuProps = {\n  /**\n   * The content of the ActionMenu. Must include an ActionMenu.Button or ActionMenu.IconButton and an ActionMenu.Overlay\n   */\n  children:\n    | ReactElement<ActionMenuButtonProps>\n    | ReactElement<ActionMenuIconButtonProps>\n    | ReactElement<ActionMenuOverlayProps>\n    | Array<\n        | ReactElement<ActionMenuButtonProps>\n        | ReactElement<ActionMenuIconButtonProps>\n        | ReactElement<ActionMenuOverlayProps>\n      >\n  /**\n   * Determines whether the ActionMenu is disabled\n   */\n  disabled?: boolean\n  /**\n   * Determines whether the ActionMenu is open by default\n   */\n  open?: boolean\n  /**\n   * Callback that is called when an item is selected.\n   * The value of the selected item is passed as an argument.\n   */\n  onSelect?: (newValue: string) => void\n  /**\n   * The selection variant of the ActionMenu.\n   * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n   * - `none`: No items can be selected. Menu items as a menuitem.\n   */\n  selectionVariant?: 'single' | 'none'\n  /**\n   * Test id for the ActionMenu\n   */\n  'data-testid'?: string\n  /**\n   * Horizontal alignment of the menu relative to the bottom of the button\n   */\n  menuAlignment?: 'start' | 'end'\n  /**\n   * Size configuratin of the ActionMenu\n   */\n  size?: ActionMenuSize\n  /*\n   * Side the menu overlay appears\n   */\n  menuSide?: PositionSettings['side']\n  /**\n   * Alternative behavior for the button and menu items\n   * - `default`: The button and menu items behave as a standard button and menu item.\n   * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n   */\n  mode?: ActionMenuButtonMode\n} & BaseProps<HTMLDivElement>\n\nconst _ActionMenuRoot = memo(\n  ({\n    id,\n    children,\n    'data-testid': testId,\n    disabled,\n    open = false,\n    selectionVariant = 'none',\n    menuAlignment = 'end',\n    size = 'medium',\n    menuSide,\n    onSelect,\n    mode = 'default',\n  }: ActionMenuProps) => {\n    const [showMenu, setShowMenu] = useState(open)\n    const floatingElementRef = useRef<HTMLUListElement>(null)\n    const anchorElementRef = useRef<HTMLButtonElement>(null)\n    const instanceId = useId(id)\n\n    useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n    const closeMenuCallback = useCallback(() => {\n      setShowMenu(false)\n    }, [])\n\n    useKeyboardEscape(closeMenuCallback)\n\n    const toggleMenu = useCallback(() => {\n      setShowMenu(!showMenu)\n    }, [showMenu])\n\n    const handleOnSelect = useCallback(\n      (newValue: string) => {\n        if (onSelect) onSelect(newValue)\n        toggleMenu()\n      },\n      [onSelect, toggleMenu],\n    )\n\n    const handleItemSelection = useCallback(\n      (newValue: string) => {\n        handleOnSelect(newValue)\n        toggleMenu()\n        anchorElementRef.current?.focus()\n      },\n      [handleOnSelect, toggleMenu, anchorElementRef],\n    )\n\n    useEffect(() => {\n      if (showMenu && floatingElementRef.current) {\n        const floatingElement = floatingElementRef.current\n        const isSplitLayout = mode === 'split-button'\n        const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n        focusZone(floatingElementRef.current, {\n          bindKeys: FocusKeys.ArrowVertical,\n          focusableElementFilter: splitLayoutFilter,\n          focusInStrategy: isSplitLayout ? 'first' : undefined,\n        })\n\n        // enter selects item\n        floatingElement.addEventListener('keydown', event => {\n          if (event.key === 'Enter') {\n            const target = event.target as HTMLElement\n\n            // Get the proper element containing the data-value\n            const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n            if (!targetElement || targetElement.getAttribute('aria-disabled') === 'true') return\n\n            const value = targetElement.getAttribute('data-value')\n            if (value) {\n              handleOnSelect(value)\n              setShowMenu(false)\n              setTimeout(() => {\n                anchorElementRef.current?.focus()\n              }, 10)\n            }\n          }\n        })\n\n        const targetSelector = isSplitLayout ? 'a' : 'li'\n\n        // focusses first item\n        const firstItem = floatingElementRef.current.querySelector(targetSelector)\n        if (firstItem) {\n          setTimeout(() => {\n            firstItem.focus()\n          }, 10)\n        }\n\n        const lastItem =\n          floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n        lastItem.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowDown') {\n            keyboardEvent.preventDefault()\n            firstItem?.focus()\n          }\n        })\n\n        firstItem?.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowUp') {\n            keyboardEvent.preventDefault()\n            lastItem.focus()\n          }\n        })\n\n        //on escape refocus\n        floatingElement.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'Escape') {\n            anchorElementRef.current?.focus()\n          }\n        })\n      }\n    }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n    // Calculate the position of the menu\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef,\n        anchorElementRef,\n        align: menuAlignment,\n        allowOutOfBounds: true,\n        side: menuSide,\n      },\n      [showMenu],\n    )\n\n    const childrenArray = Children.toArray(children)\n    const menuLabel = childrenArray.find(\n      (child): child is ReactElement<ActionMenuOverlayProps> =>\n        isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay,\n    )?.props['aria-label']\n\n    const {Button: SelectButton, Overlay: SelectOverlay} = childrenArray.reduce<{\n      Button?: ReactElement<ActionMenuButtonProps | ActionMenuIconButtonProps>\n      Overlay?: ReactElement<ActionMenuOverlayProps>\n    }>((acc, child) => {\n      if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n        acc.Button = cloneElement(child, {\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\n        })\n      } else if (isValidElement<ActionMenuIconButtonInternalProps>(child) && child.type === ActionMenuIconButton) {\n        acc.Button = cloneElement(child, {\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, mode === 'split-button' && styles['ActionMenu__button--split-button']),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\n        })\n      } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n        acc.Overlay = cloneElement(child, {\n          ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n          className: clsx(\n            styles.ActionMenu__menu,\n            position && styles['ActionMenu__menu--visible'],\n            position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n            styles[`ActionMenu__menu--${size}`],\n            mode === 'split-button' && 'ActionMenu__menu--split',\n          ),\n          style: {\n            top: `${position?.top ?? 0}px`,\n            left: `${position?.left ?? 0}px`,\n          },\n          id: `${instanceId}-menu`,\n          children: Children.map(child.props.children, item => {\n            if (isValidElement<ActionMenuItemBaseProps>(item)) {\n              return cloneElement(item, {\n                handler: handleItemSelection,\n                type: mode === 'split-button' ? 'link' : selectionVariant,\n              })\n            }\n            return item\n          }),\n        })\n      }\n      return acc\n    }, {})\n\n    return (\n      <ActionMenuProvider size={size} mode={mode} menuLabel={menuLabel} onMenuToggle={toggleMenu}>\n        <div\n          id={instanceId}\n          className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n          data-testid={testId || testIds.root}\n        >\n          {SelectButton}\n          {showMenu ? SelectOverlay : null}\n        </div>\n      </ActionMenuProvider>\n    )\n  },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n  BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>\n> & {\n  as?: ButtonProps<'a'>['as']\n  href?: ButtonProps<'a'>['href']\n  menuOpen?: boolean\n  'data-testid'?: string\n  size?: ActionMenuSize\n  variant?: ButtonProps<'a'>['variant']\n  leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n  (\n    {\n      as,\n      href,\n      id,\n      children,\n      className,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      onClick,\n      leadingVisual,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [disabled, onClick, onMenuToggle],\n    )\n    const handlePrimaryActionClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n      },\n      [disabled, onClick],\n    )\n\n    if (mode === 'split-button') {\n      const splitButtonVariant = variant ?? 'primary'\n\n      return (\n        <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n          <Button\n            as={as}\n            href={href}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-primary'],\n              styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n              styles[`ActionMenu__innerButton--${size}`],\n              disabled && styles['ActionMenu__innerButton--disabled'],\n            )}\n            variant={splitButtonVariant}\n            aria-disabled={disabled}\n            data-testid={testId || testIds.button}\n            size={size}\n            leadingVisual={leadingVisual}\n            onClick={handlePrimaryActionClick}\n            {...props}\n          >\n            <span className={styles['ActionMenu__button-text']}>{children}</span>\n          </Button>\n          <Button\n            ref={ref}\n            id={id}\n            as=\"button\"\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-menu'],\n            )}\n            variant={splitButtonVariant}\n            aria-haspopup=\"true\"\n            aria-label={menuLabel}\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onMenuToggle}\n            disabled={disabled}\n          >\n            <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n          </Button>\n        </div>\n      )\n    }\n\n    return (\n      <Button\n        ref={ref}\n        id={id}\n        className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n        aria-haspopup=\"true\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        variant={variant}\n        leadingVisual={leadingVisual}\n        trailingVisual={<ChevronDownIcon />}\n        onClick={handleClick}\n        {...props}\n      >\n        <span className={styles['ActionMenu__button-text']}>{children}</span>\n      </Button>\n    )\n  },\n)\n\nexport type ActionMenuIconButtonProps<C extends React.ElementType = 'button'> = Omit<IconButtonProps<C>, 'size'> & {\n  'data-testid'?: string\n}\n\ntype ActionMenuIconButtonInternalProps = React.PropsWithoutRef<ActionMenuIconButtonProps<React.ElementType>> & {\n  ref?: React.Ref<HTMLButtonElement>\n  menuOpen?: boolean\n  size?: ActionMenuSize\n}\n\ntype ActionMenuIconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: ActionMenuIconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement | null\n\nconst ActionMenuIconButton = forwardRef<HTMLButtonElement, ActionMenuIconButtonInternalProps>(\n  (\n    {\n      as,\n      id,\n      icon,\n      className,\n      'aria-label': ariaLabel,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      variant,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [disabled, onClick, onMenuToggle],\n    )\n    const handlePrimaryActionClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n      },\n      [disabled, onClick],\n    )\n\n    if (mode === 'split-button') {\n      const splitButtonVariant = variant ?? 'primary'\n\n      return (\n        <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n          <IconButton\n            {...props}\n            as={as}\n            icon={icon}\n            aria-label={ariaLabel}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-primary'],\n              styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n              styles[`ActionMenu__innerButton--${size}`],\n              disabled && styles['ActionMenu__innerButton--disabled'],\n            )}\n            variant={splitButtonVariant}\n            aria-disabled={disabled}\n            data-testid={testId || testIds.button}\n            size={size}\n            onClick={handlePrimaryActionClick}\n          />\n          <IconButton\n            ref={ref}\n            id={id}\n            icon={ChevronDownIcon}\n            aria-label={menuLabel}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-menu'],\n            )}\n            variant={splitButtonVariant}\n            aria-haspopup=\"menu\"\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onMenuToggle}\n            disabled={disabled}\n          />\n        </div>\n      )\n    }\n\n    return (\n      <IconButton\n        {...props}\n        ref={ref}\n        as={as}\n        id={id}\n        icon={icon}\n        aria-label={ariaLabel}\n        className={className}\n        aria-haspopup=\"menu\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        variant={variant}\n        onClick={handleClick}\n      />\n    )\n  },\n) as ActionMenuIconButtonComponent\n\ntype ActionMenuItemBaseProps = {\n  handler?: (newValue: string) => void\n  type?: 'none' | 'single' | 'link'\n  disabled?: boolean\n  size?: ActionMenuSize\n  leadingVisual?: React.ReactElement | React.ReactNode | Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n  as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n  as?: string\n  value?: string\n  selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>\n\nconst roleTypeMap = {\n  none: 'menuitem',\n  single: 'menuitemradio',\n  link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n  as,\n  children,\n  className,\n  disabled,\n  handler,\n  selected,\n  type,\n  value,\n  onClick,\n  onKeyDown,\n  leadingVisual: LeadingVisual,\n  ...props\n}: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => {\n  const {size} = useActionMenuContext()\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onClick?.(e)\n\n      if (!disabled) {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLLIElement>) => {\n      onKeyDown?.(e)\n\n      if (!disabled && e.key === 'Enter') {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onKeyDown],\n  )\n\n  const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n    () => ({\n      className: clsx(\n        styles.ActionMenu__item,\n        type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n        size && styles[`ActionMenu__item--${size}`],\n        className,\n      ),\n      role: roleTypeMap[type || 'single'],\n      'aria-disabled': disabled,\n      tabIndex: -1,\n      'data-value': value,\n      ...props,\n    }),\n    [props, type, size, className, disabled, value],\n  )\n\n  const contents = useMemo(\n    () => (\n      <>\n        {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n          ? React.cloneElement(LeadingVisual, {\n              width: LeadingVisual.props.width || 20,\n              height: LeadingVisual.props.width || 20,\n            })\n          : null}\n        {type === 'single' && (\n          <span className={styles['ActionMenu__item-leadingVisual']}>\n            {selected && (\n              <CheckIcon\n                className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n                size={16}\n              />\n            )}\n          </span>\n        )}\n\n        <span className={styles['ActionMenu__item-text']}>\n          <Text\n            variant={disabled ? 'muted' : 'default'}\n            size={size === 'medium' ? '200' : '100'}\n            className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n          >\n            {children}\n          </Text>\n        </span>\n      </>\n    ),\n    [LeadingVisual, children, selected, disabled, size, type],\n  )\n\n  if (as === 'a') {\n    return (\n      <li\n        // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n        role=\"menuitem\"\n        {...liProps}\n        // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        <a\n          className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n          href={props.href}\n        >\n          {contents}\n        </a>\n      </li>\n    )\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n    <li\n      // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n      role=\"menuitem\"\n      {...liProps}\n      aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      {contents}\n    </li>\n  )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n  'aria-label': string\n  id?: string\n  'data-testid'?: string\n  menuOpen?: boolean\n  style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n  ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n    const {originalColorMode, colorMode: defaultColorMode} = useTheme()\n\n    const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : originalColorMode ?? defaultColorMode\n\n    return (\n      <ThemeProvider colorMode={colorMode}>\n        <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId || testIds.list} {...rest}>\n          {children}\n        </ul>\n      </ThemeProvider>\n    )\n  },\n)\n\n/**\n * Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n  Button: ActionMenuButton,\n  IconButton: ActionMenuIconButton,\n  Item: ActionMenuItem,\n  Overlay: ActionMenuOverlay,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/AnchorNav/AnchorNav.js

@@ -8,7 +8,7 @@ import { ChevronUpIcon as o } from "../node_modules/@primer/octicons-react/dist/
 import { useWindowSize as s } from "../hooks/useWindowSize.js";
 import c from "./AnchorNav.module.js";
 import { useExpandedMenu as l } from "./useExpandedMenu.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes-98imfMkq.css';/* empty css                                                                                                        */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes-CD0Na993.css';/* empty css                                                                                                        */
 import u, { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/AnchorNav/AnchorNav.tsx