@primer/react-brand 0.74.0 → 0.75.0-rc.89e3cadf

package/docs/components/RiverAccordion/index.md

@@ -155,6 +155,47 @@ Use the `gridline` variant to add horizontal border lines, equal-width columns,
 </RiverAccordion>
 ```
 
+Set `hasBackground={false}` on a `RiverAccordion.Visual` to remove its background and inline start padding.
+
+`leadingVisual` can also be set on `RiverAccordion.Heading` to add optional Octicons to the summary.
+
+```jsx
+<RiverAccordion variant="gridline">
+  <RiverAccordion.Item>
+    <RiverAccordion.Heading leadingVisual={<Icon icon={CopilotIcon} />}>Heading 1</RiverAccordion.Heading>
+    <RiverAccordion.Content>
+      <Text>This item removes the visual background and padding while preserving the media's aspect ratio.</Text>
+      <Link href="#">Call to action</Link>
+    </RiverAccordion.Content>
+    <RiverAccordion.Visual hasBackground={false}>
+      <img src="/images/placeholder-1.png" alt="Visual content for item 1" />
+    </RiverAccordion.Visual>
+  </RiverAccordion.Item>
+
+  <RiverAccordion.Item>
+    <RiverAccordion.Heading leadingVisual={<Icon icon={CopilotIcon} />}>Heading 2</RiverAccordion.Heading>
+    <RiverAccordion.Content>
+      <Text>The visual is displayed without a background while the accordion interaction stays the same.</Text>
+      <Link href="#">Call to action</Link>
+    </RiverAccordion.Content>
+    <RiverAccordion.Visual hasBackground={false}>
+      <img src="/images/placeholder-2.png" alt="Visual content for item 2" />
+    </RiverAccordion.Visual>
+  </RiverAccordion.Item>
+
+  <RiverAccordion.Item>
+    <RiverAccordion.Heading leadingVisual={<Icon icon={CopilotIcon} />}>Heading 3</RiverAccordion.Heading>
+    <RiverAccordion.Content>
+      <Text>Use this treatment when visuals should appear without a surrounding background panel.</Text>
+      <Link href="#">Call to action</Link>
+    </RiverAccordion.Content>
+    <RiverAccordion.Visual hasBackground={false}>
+      <img src="/images/placeholder-3.png" alt="Visual content for item 3" />
+    </RiverAccordion.Visual>
+  </RiverAccordion.Item>
+</RiverAccordion>
+```
+
 ## Component props
 
 ### RiverAccordion `Required`
@@ -177,9 +218,10 @@ Use the `gridline` variant to add horizontal border lines, equal-width columns,
 
 ### RiverAccordion.Heading `Required`
 
-| Name       | Type     | Default | Description  |
-| :--------- | :------- | :-----: | :----------- |
-| `children` | `string` |         | Heading text |
+| Name            | Type                   | Default | Description                                    |
+| :-------------- | :--------------------- | :-----: | :--------------------------------------------- |
+| `children`      | `string`               |         | Heading text                                   |
+| `leadingVisual` | `ReactElement \| Icon` |         | Decorative visual displayed before the heading |
 
 `RiverAccordion.Heading` extends the [`Heading`](../../typography/Heading/index.md) component and supports all `Heading` props.
 
@@ -193,8 +235,9 @@ Use the `gridline` variant to add horizontal border lines, equal-width columns,
 
 ### RiverAccordion.Visual `Required`
 
-| Name       | Type                 | Default | Description                  |
-| :--------- | :------------------- | :-----: | :--------------------------- |
-| `children` | `React.ReactElement` |         | Visual content (e.g., image) |
+| Name            | Type                 | Default | Description                                                    |
+| :-------------- | :------------------- | :-----: | :------------------------------------------------------------- |
+| `children`      | `React.ReactElement` |         | Visual content (e.g., image)                                   |
+| `hasBackground` | `boolean`            |  `true` | Displays a padded background when using the `gridline` variant |
 
 `RiverAccordion.Visual` extends the HTML `div` element and supports all `div` props.

package/docs/components/SubdomainNavBar/index.md

@@ -21,116 +21,245 @@ import {SubdomainNavBar} from '@primer/react-brand'
 ### Basic
 
 ```jsx
-<SubdomainNavBar title="Subdomain" fixed={false}>
-  <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
-  <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
-  <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
-  <SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
-  <SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
-</SubdomainNavBar>
+<div style={{width: '100%'}}>
+  <SubdomainNavBar title="Subdomain" fixed={false}>
+    <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
+    <SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
+    <SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
+  </SubdomainNavBar>
+</div>
 ```
 
 ### Search
 
-`SubdomainNavBar` offers an optional search form control. The form can operate in both `onSubmit` and `onChange` modes, with the latter facilitating inline results to appear.
+`SubdomainNavBar` offers an optional search form control that supports both `onSubmit` and `onChange`; use `onChange` to display inline results. The `placeholder` labels the input in the opened dialog and defaults to `Search {title}`, or `Search` when no navigation title is available.
+
+Keyboard shortcuts are disabled by default. Pass `keyboardShortcut`, such as `keyboardShortcut="/"`, to opt into a global shortcut that opens the search dialog. For programmatic control with `openSearch()` and `closeSearch()`, see the Imperative Search API Storybook example.
 
 ```jsx filename="noinline"
-const App = () => {
-  const inputRef = React.useRef(null)
-  const [searchResults, setSearchResults] = React.useState([])
+const groupedResults = [
+  {
+    title: 'Recommended',
+    results: [
+      {
+        title: 'Getting started with GitHub',
+        description: 'Create an account and learn the basics.',
+        url: '/en/get-started',
+        date: '2026-07-01',
+        category: 'Guide',
+      },
+    ],
+  },
+  {
+    title: 'API reference',
+    results: [
+      {
+        title: 'REST API documentation',
+        description: 'Integrate with GitHub using the REST API.',
+        url: 'https://docs.github.com/en/rest',
+        date: '2026-07-01',
+        category: 'Reference',
+        isExternal: true,
+      },
+    ],
+  },
+]
+
+const SearchNav = () => {
   const [searchTerm, setSearchTerm] = React.useState('')
 
-  const mockSearchData = [
-    {
-      title: 'How to transform your business in a digital world',
-      description:
-        'GitHub Enterprise empowers developers with tools they already know and love, accelerates high-quality software development and secure delivery, and enhances the speed and power of innovation.\n',
-      url: 'https://resources.github.com/devops/github-enterprise-ebook',
-      date: '2022-08-29T00:00+02:00',
-    },
-    {
-      title: 'The fundamentals of continuous deployment in DevOps',
-      description:
-        'What is continuous deployment?\nContinuous deployment (CD) is an automated software release practice where code changes are deployed to different stages as they pass predefined tests. The goal of CD is to facilitate faster releases by using automation to help remove the need for human intervention as much as possible during the deployment process.',
-      url: 'https://resources.github.com/devops/fundamentals/ci-cd/deployment',
-      date: '2022-05-23T12:00+00:00',
-    },
-  ]
-
-  const handleChange = () => {
-    if (!inputRef.current) return
-    if (inputRef.current.value.length === 0) {
-      setSearchResults(undefined)
-      return
-    }
-    if (inputRef.current.value.length > 2) {
-      setTimeout(() => setSearchResults(mockSearchData), 1000)
-      setSearchTerm(inputRef.current.value)
-      return
-    }
-  }
-
-  const handleSubmit = e => {
-    e.preventDefault()
-    if (!inputRef.current) return
-    if (!inputRef.current.value) {
-      alert(`Enter a value and try again.`)
-      return
-    }
-
-    alert(`Name: ${inputRef.current.value}`)
-  }
+  return (
+    <div style={{width: '100%'}}>
+      <SubdomainNavBar title="GitHub Docs" fixed={false} fullWidth>
+        <SubdomainNavBar.Link href="/en/get-started">Get started</SubdomainNavBar.Link>
+        <SubdomainNavBar.Search
+          placeholder="Search GitHub Docs"
+          keyboardShortcut="/"
+          searchTerm={searchTerm}
+          searchResults={searchTerm ? groupedResults : []}
+          onChange={event => setSearchTerm(event.currentTarget.value)}
+          onSubmit={event => {
+            event.preventDefault()
+          }}
+        />
+      </SubdomainNavBar>
+    </div>
+  )
+}
+
+render(<SearchNav />)
+```
+
+Search results can be a flat list or grouped by title. Do not mix both formats in the same array.
+
+### Localized search
+
+Use the `labels` prop to localize search text. Any labels you omit fall back to English.
+
+```jsx filename="noinline"
+const searchProps = {
+  searchLabel: 'Buscar',
+  closeLabel: 'Cerrar',
+  resultsLabel: 'Resultados',
+  searchResultsLabel: 'Resultados de búsqueda',
+  formatSearchWithTitle: title => `Buscar en ${title}`,
+  formatSearchTrigger: placeholder => `Abrir ${placeholder}`,
+  formatResultsHeading: searchTerm => `Resultados para «${searchTerm}»`,
+  formatResultsLabel: searchTerm => `Resultados para ${searchTerm}`,
+  formatSuggestions: count => `${count} sugerencia${count === 1 ? '' : 's'}.`,
+  placeholder: 'Buscar documentación',
+}
+
+const LocalizedSearch = () => {
+  const [searchTerm, setSearchTerm] = React.useState('')
 
   return (
-    <SubdomainNavBar title="Subdomain" fixed={false}>
-      <SubdomainNavBar.Link href="#collections">Collections</SubdomainNavBar.Link>
-      <SubdomainNavBar.Link href="#topics">Topics</SubdomainNavBar.Link>
-      <SubdomainNavBar.Search
-        ref={inputRef}
-        searchTerm={searchTerm}
-        onSubmit={handleSubmit}
-        onChange={handleChange}
-        searchResults={searchResults}
-      />
-    </SubdomainNavBar>
+    <div style={{width: '100%'}}>
+      <SubdomainNavBar title="Documentación" fixed={false}>
+        <SubdomainNavBar.Search
+          {...searchProps}
+          searchTerm={searchTerm}
+          onChange={event => setSearchTerm(event.currentTarget.value)}
+          onSubmit={event => event.preventDefault()}
+        />
+      </SubdomainNavBar>
+    </div>
   )
 }
 
-render(App)
+render(<LocalizedSearch />)
 ```
 
-## Accessibility
+### Localized menu controls
+
+Use `menuLabels` to localize the narrow menu control and desktop overflow menu. The narrow menu label changes when the menu opens, and any omitted value falls back to English.
+
+```jsx filename="noinline"
+const LocalizedMenu = () => (
+  <div style={{width: '100%'}}>
+    <SubdomainNavBar
+      title="Documentación"
+      fixed={false}
+      menuLabels={{
+        menuLabel: 'Menú',
+        closeLabel: 'Cerrar',
+        overflowMenuLabel: 'Más',
+      }}
+    >
+      <SubdomainNavBar.Link href="/es/get-started">Primeros pasos</SubdomainNavBar.Link>
+      <SubdomainNavBar.PrimaryAction href="/es/signup">Registrarse</SubdomainNavBar.PrimaryAction>
+    </SubdomainNavBar>
+  </div>
+)
 
-When the menu is open on narrow viewports, ensure that the rest of the document is hidden from screen readers. This can be achieved by adding `aria-hidden="true"` or `inert` to the main content area when the menu is open.
+render(<LocalizedMenu />)
+```
+
+## Accessibility
 
-Use the `onNarrowMenuToggle` prop to detect when the mobile menu is opened or closed.
+- Render `SubdomainNavBar` before other focusable page content so its skip-to-content link is the first keyboard-accessible control.
+- Provide a concise, meaningful `title`. It labels the navigation and communicates the subdomain to assistive technologies.
+- Set `skipToContentTargetId` to the ID of the page's active main content element. Activating the skip link moves focus to that element and clears the fixed navigation bar. When omitted, or if the explicit target is unavailable, the component targets the first rendered `main` that is not hidden from assistive technologies.
+- When the menu opens on narrow viewports, hide the rest of the document from screen readers with `inert` or `aria-hidden="true"`. Use `onNarrowMenuToggle` to track the menu state.
+- Localize the menu controls' visible and accessible labels with `menuLabels`.
+- Only opt into a `keyboardShortcut` that does not conflict with browser, operating system, or application shortcuts. Always provide another visible way to open search.
+- For search, localize its visible text, accessible labels, result headings, and live-region announcements. Supplying only some `labels` values produces a mix of localized text and English defaults.
 
 ## Component props
 
 ### SubdomainNavBar `Required`
 
-| Name                 | Type                                                                                                                                                 |        Default       | Description                                                                                                                            |
-| :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------: | :------------------------------------------------------------------------------------------------------------------------------------- |
-| `children`           | `'SubdomainNavBar.Link' \| 'SubdomainNavBar.Search' \| 'SubdomainNavBar.PrimaryAction' \| 'SubdomainNavBar.SecondaryAction' \| 'React.ReactElement'` |                      | Valid child nodes                                                                                                                      |
-| `className`          | `string`                                                                                                                                             |                      | Sets a custom class                                                                                                                    |
-| `id`                 | `string`                                                                                                                                             |                      | Sets a custom id                                                                                                                       |
-| `logoHref`           | `string`                                                                                                                                             | `https://github.com` | Optionally change the URL of the logo                                                                                                  |
-| `title`              | `string`                                                                                                                                             |                      | The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies. |
-| `titleHref`          | `string`                                                                                                                                             |          `/`         | The URL for the site. Typically used to link the title prop value to the site root.                                                    |
-| `ref`                | `React.RefObject`                                                                                                                                    |                      | Forward a Ref to the underlying DOM node                                                                                               |
-| `onNarrowMenuToggle` | `(isOpen: boolean) => void`                                                                                                                          |                      | When the mobile menu is opened or closed, this callback is called with the new open state.                                             |
+| Name                    | Type                                                                                                                                                 | Default              | Description                                                             |
+| :---------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :---------------------------------------------------------------------- |
+| `children`              | `'SubdomainNavBar.Link' \| 'SubdomainNavBar.Search' \| 'SubdomainNavBar.PrimaryAction' \| 'SubdomainNavBar.SecondaryAction' \| 'React.ReactElement'` |                      | Valid child nodes                                                       |
+| `className`             | `string`                                                                                                                                             |                      | Sets a custom class on the root element                                 |
+| `id`                    | `string`                                                                                                                                             |                      | Sets a custom ID on the root element                                    |
+| `style`                 | `React.CSSProperties`                                                                                                                                |                      | Forwards custom inline styles to the root element                       |
+| `fixed`                 | `boolean`                                                                                                                                            | `true`               | Fixes the navigation bar to the top of the viewport                     |
+| `fullWidth`             | `boolean`                                                                                                                                            | `false`              | Allows the inner content to fill the available width                    |
+| `logoHref`              | `string`                                                                                                                                             | `https://github.com` | Changes the URL of the GitHub logo                                      |
+| `title`                 | `string`                                                                                                                                             |                      | Required subdomain name used visibly and by assistive technologies      |
+| `titleHref`             | `string`                                                                                                                                             | `/`                  | Links the title to the subdomain root                                   |
+| `menuLabels`            | `Partial<SubdomainNavBarMenuLabels>`                                                                                                                 | English labels       | Overrides the menu controls' visible and accessible labels              |
+| `skipToContentTargetId` | `string`                                                                                                                                             | First visible `main` | ID of the element focused by the skip-to-content link                   |
+| `ref`                   | `React.Ref<SubdomainNavBarHandle>`                                                                                                                   |                      | Ref to the root element with `openSearch()` and `closeSearch()` methods |
+| `onNarrowMenuToggle`    | `(isOpen: boolean) => void`                                                                                                                          |                      | Called with the new state when the narrow menu opens or closes          |
+
+`SubdomainNavBarProps`, `SubdomainNavBarHandle`, and `SubdomainNavBarMenuLabels` are exported from `@primer/react-brand`.
+
+### Menu labels
+
+| Field               | Type     | English default | Purpose                                                      |
+| :------------------ | :------- | :-------------- | :----------------------------------------------------------- |
+| `menuLabel`         | `string` | `Menu`          | Visible and accessible label while the narrow menu is closed |
+| `closeLabel`        | `string` | `Close`         | Visible and accessible label while the narrow menu is open   |
+| `overflowMenuLabel` | `string` | `More`          | Visible and accessible label for the desktop overflow menu   |
+
+### SubdomainNavBar.Search
+
+| Name               | Type                                             | Default          | Description                                                           |
+| :----------------- | :----------------------------------------------- | :--------------- | :-------------------------------------------------------------------- |
+| `onSubmit`         | `(event: FormEvent<HTMLFormElement>) => void`    |                  | Required search form submit handler                                   |
+| `onChange`         | `(event: ChangeEvent<HTMLInputElement>) => void` |                  | Required search input change handler                                  |
+| `placeholder`      | `string`                                         | `Search {title}` | Text shown in the input trigger and opened search input               |
+| `shortcutLabel`    | `string`                                         | Shortcut value   | Visible input-trigger hint; pass an empty string to hide it           |
+| `keyboardShortcut` | `string \| false`                                |                  | Optional global key or modifier combination that opens search         |
+| `labels`           | `Partial<SubdomainNavBarSearchLabels>`           | English labels   | Overrides visible and accessible search text and formatting functions |
+| `searchResults`    | `SubdomainNavBarSearchResults`                   |                  | Flat or explicitly grouped results                                    |
+| `searchTerm`       | `string`                                         |                  | Current query used in result headings and accessible labels           |
+| `className`        | `string`                                         |                  | Sets a custom class on the search trigger container                   |
+| `ref`              | `React.Ref<HTMLInputElement>`                    |                  | Ref to the input inside the opened search dialog                      |
+
+`SubdomainNavBarSearchProps` and `SubdomainNavBarSearchLabels` are exported from `@primer/react-brand`.
+
+### Search labels
+
+| Field                   | Type                              | English default               | Purpose                                                  |
+| :---------------------- | :-------------------------------- | :---------------------------- | :------------------------------------------------------- |
+| `searchLabel`           | `string`                          | `Search`                      | Accessible label for the search input                    |
+| `closeLabel`            | `string`                          | `Close`                       | Visible and accessible close action                      |
+| `resultsLabel`          | `string`                          | `Results`                     | Accessible label for an untitled result group            |
+| `searchResultsLabel`    | `string`                          | `Search results`              | Accessible label for grouped results without a query     |
+| `formatSearchWithTitle` | `(title: string) => string`       | `Search ${title}`             | Formats the default placeholder and dialog label         |
+| `formatSearchTrigger`   | `(placeholder: string) => string` | `${placeholder} search`       | Formats the responsive search trigger's accessible label |
+| `formatResultsHeading`  | `(searchTerm: string) => string`  | `Results for “${searchTerm}”` | Formats the visible heading for ungrouped results        |
+| `formatResultsLabel`    | `(searchTerm: string) => string`  | `Results for ${searchTerm}`   | Formats the accessible label for grouped results         |
+| `formatSuggestions`     | `(count: number) => string`       | `${count} suggestions.`       | Formats the polite live-region result-count announcement |
+
+### Search result types
+
+`SubdomainNavBarSearchResultProps`, `SubdomainNavBarSearchResultGroupProps`, and `SubdomainNavBarSearchResults` are exported from `@primer/react-brand`.
+
+#### `SubdomainNavBarSearchResultProps`
+
+| Field         | Type      | Required | Description                                                              |
+| :------------ | :-------- | :------: | :----------------------------------------------------------------------- |
+| `title`       | `string`  |    Yes   | Linked result title                                                      |
+| `description` | `string`  |    Yes   | Result summary                                                           |
+| `url`         | `string`  |    Yes   | Link destination                                                         |
+| `date`        | `string`  |    Yes   | Displayed date string; format it for the user's locale before passing it |
+| `category`    | `string`  |          | Optional metadata displayed after the date                               |
+| `group`       | `string`  |          | Groups flat results under a shared heading                               |
+| `isExternal`  | `boolean` |          | Shows an external-link indicator for grouped results                     |
+
+#### `SubdomainNavBarSearchResultGroupProps`
+
+| Field     | Type                                 | Required | Description                       |
+| :-------- | :----------------------------------- | :------: | :-------------------------------- |
+| `title`   | `string`                             |    Yes   | Visible and accessible group name |
+| `results` | `SubdomainNavBarSearchResultProps[]` |    Yes   | Results in the group              |
 
 ### SubdomainNavBar.Link `Required`
 
-`SubdomainNavBar.Link` are anchor links.
+`SubdomainNavBar.Link` renders an anchor link.
 
-| Name         | Type              | Default | Description                                               |
-| :----------- | :---------------- | :-----: | :-------------------------------------------------------- |
-| `children`   | `string`          |         | Label text                                                |
-| `className`  | `string`          |         | Applies a custom class                                    |
-| `href`       | `string`          |         | Destination path for the anchor element                   |
-| `id`         | `string`          |         | Sets a custom id                                          |
-| `ref`        | `React.RefObject` |         | Forward a Ref to the underlying DOM node                  |
-| `isExternal` | `boolean`         | `false` | When true, renders a external link icon after to the link |
+| Name         | Type              | Default | Description                                              |
+| :----------- | :---------------- | :-----: | :------------------------------------------------------- |
+| `children`   | `React.ReactNode` |         | Link content                                             |
+| `className`  | `string`          |         | Applies a custom class                                   |
+| `href`       | `string`          |         | Destination path for the anchor element                  |
+| `isExternal` | `boolean`         | `false` | Renders an external-link icon after the link when `true` |
 
-Additional props can be passed to the `<a>` element. [See MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) accepted by the `<anchor>` element.
+Additional props are passed to the wrapping `<li>` element. [See MDN for accepted list item attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes).

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.74.0)
+# Primer Brand docs (v0.75.0-rc.89e3cadf)
 
-These docs are bundled with `@primer/react-brand@0.74.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.75.0-rc.89e3cadf` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Accordion/Accordion.d.ts

@@ -35,14 +35,14 @@ export declare const AccordionHeading: React.ForwardRefExoticComponent<React.HTM
     weight?: HeadingProps["weight"];
 } & React.RefAttributes<HTMLHeadingElement>>;
 export type AccordionContentProps = HTMLAttributes<HTMLElement>;
-export declare const AccordionContent: ({ children, className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionContent: ({ children, className, ...rest }: AccordionContentProps) => React.JSX.Element;
 export declare const Accordion: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
     children: ReactElement<AccordionHeadingProps | AccordionContentProps>[];
     variant?: "default" | "emphasis";
     disableAnimation?: boolean;
     handleOpen?: (isOpen: boolean) => void;
 } & React.RefAttributes<HTMLDetailsElement>> & {
-    Content: ({ children, className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...rest }: AccordionContentProps) => React.JSX.Element;
     Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
         as?: HeadingProps["as"];
         reversedToggles?: boolean;

package/esm/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EAGnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,KAAK,CAAA;AAK9C;;GAEG;AACH,OAAO,6GAA6G,CAAA;AAKpH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE,CAAA;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAkBD,eAAO,MAAM,aAAa;cAtBd,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;4CAkNvC,CAAA;AAED,eAAO,MAAM,qBAAqB,8MAAqC,CAAA;AAEvE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;SAXtB,YAAY,CAAC,IAAI,CAAC;sBACL,OAAO;kBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;aAC3C,YAAY,CAAC,QAAQ,CAAC;4CAiChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,GAAI,kCAAgC,qBAAqB,4CAIrF,CAAA;AAED,eAAO,MAAM,SAAS;cAxQV,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;;gDA+PyB,qBAAqB;;aAxC/E,YAAY,CAAC,IAAI,CAAC;0BACL,OAAO;sBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;iBAC3C,YAAY,CAAC,QAAQ,CAAC;;CA2C4E,CAAA"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EAGnB,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAU,KAAK,YAAY,EAAC,MAAM,KAAK,CAAA;AAK9C;;GAEG;AACH,OAAO,6GAA6G,CAAA;AAKpH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,GAAG;IAC3E,QAAQ,EAAE,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE,CAAA;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAkBD,eAAO,MAAM,aAAa;cAtBd,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;4CAkNvC,CAAA;AAED,eAAO,MAAM,qBAAqB,8MAAqC,CAAA;AAEvE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;SAXtB,YAAY,CAAC,IAAI,CAAC;sBACL,OAAO;kBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;aAC3C,YAAY,CAAC,QAAQ,CAAC;4CAiChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,GAAI,kCAAgC,qBAAqB,sBAIrF,CAAA;AAED,eAAO,MAAM,SAAS;cAxQV,YAAY,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,EAAE;cAC7D,SAAS,GAAG,UAAU;uBACb,OAAO;iBACb,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI;;gDA+PyB,qBAAqB;;aAxC/E,YAAY,CAAC,IAAI,CAAC;0BACL,OAAO;sBACX,CAAC,OAAO,qBAAqB,EAAE,MAAM,CAAC;iBAC3C,YAAY,CAAC,QAAQ,CAAC;;CA2C4E,CAAA"}

package/esm/Accordion/Accordion.js

@@ -1,8 +1,8 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 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/index.esm.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 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";

package/esm/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  type DetailsHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type ReactElement,\n  type RefObject,\n  type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {TriangleDownIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n  children: ReactElement<AccordionHeadingProps | AccordionContentProps>[]\n  variant?: 'default' | 'emphasis'\n  disableAnimation?: boolean\n  handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n  variant: 'default' | 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType | null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n  const context = useContext(AccordionContext)\n\n  if (context === null) {\n    throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n  }\n\n  return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n  (\n    {\n      children,\n      className,\n      variant = 'default',\n      disableAnimation = false,\n      open,\n      onClick,\n      onToggle,\n      onKeyDown,\n      handleOpen,\n      ...rest\n    },\n    forwardedRef,\n  ) => {\n    const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement | null>)\n    const closeAnimationTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)\n    const isClosingRef = useRef(false)\n    const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n    const setContentHeight = useCallback((details: HTMLDetailsElement) => {\n      const content = details.querySelector<HTMLElement>(`:scope > .${styles.Accordion__content}`)\n      const contentInner = content?.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n\n      if (!content || !contentInner) {\n        return null\n      }\n\n      const contentOffset = parseFloat(getComputedStyle(content).getPropertyValue('--brand-Accordion-content-offset'))\n      const contentHeight = Math.max(0, contentInner.scrollHeight - (Number.isNaN(contentOffset) ? 0 : contentOffset))\n\n      details.style.setProperty('--brand-Accordion-content-height', `${contentHeight}px`)\n\n      return content\n    }, [])\n\n    const clearCloseAnimation = useCallback(() => {\n      if (closeAnimationTimeout.current) {\n        clearTimeout(closeAnimationTimeout.current)\n        closeAnimationTimeout.current = null\n      }\n    }, [])\n\n    const closeWithAnimation = useCallback(\n      (details: HTMLDetailsElement) => {\n        clearCloseAnimation()\n        const reducedMotionQuery =\n          typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n            ? window.matchMedia('(prefers-reduced-motion: reduce)')\n            : null\n        const prefersReducedMotion = reducedMotionQuery !== null && reducedMotionQuery.matches\n\n        if (prefersReducedMotion) {\n          details.open = false\n          isClosingRef.current = false\n          details.classList.remove(styles['Accordion--closing'])\n          return\n        }\n\n        const content = setContentHeight(details)\n\n        if (content) {\n          content.getBoundingClientRect()\n        }\n\n        isClosingRef.current = true\n        details.classList.add(styles['Accordion--closing'])\n\n        closeAnimationTimeout.current = setTimeout(() => {\n          details.open = false\n          isClosingRef.current = false\n          details.classList.remove(styles['Accordion--closing'])\n          closeAnimationTimeout.current = null\n        }, 300)\n      },\n      [clearCloseAnimation, setContentHeight],\n    )\n\n    const handleToggle = useCallback<(event: Event) => void>(\n      event => {\n        const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n        if (toggleEvent.currentTarget.open) {\n          clearCloseAnimation()\n          isClosingRef.current = false\n          toggleEvent.currentTarget.classList.remove(styles['Accordion--closing'])\n          setContentHeight(toggleEvent.currentTarget)\n        }\n        onToggle?.(toggleEvent)\n        handleOpen?.(toggleEvent.currentTarget.open)\n      },\n      [clearCloseAnimation, onToggle, handleOpen, setContentHeight],\n    )\n\n    const handleClick = useCallback<MouseEventHandler<HTMLDetailsElement>>(\n      event => {\n        onClick?.(event)\n\n        if (event.defaultPrevented || disableAnimation) {\n          return\n        }\n\n        const details = event.currentTarget\n        const target = event.target\n\n        if (!(target instanceof Element) || !details.open) {\n          return\n        }\n\n        const summary = target.closest('summary')\n\n        if (summary?.parentElement === details) {\n          event.preventDefault()\n\n          if (!isClosingRef.current) {\n            closeWithAnimation(details)\n          }\n        }\n      },\n      [closeWithAnimation, disableAnimation, onClick],\n    )\n\n    const handleKeyDown = useCallback<EventListener>(\n      event => {\n        const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n        onKeyDown?.(keyboardEvent)\n\n        const details = ref.current\n\n        if (keyboardEvent.key === 'Escape' && details?.open) {\n          clearCloseAnimation()\n          details.open = false\n          isClosingRef.current = false\n          details.classList.remove(styles['Accordion--closing'])\n          details.querySelector('summary')?.focus()\n        }\n      },\n      [clearCloseAnimation, onKeyDown, ref],\n    )\n\n    useEffect(() => {\n      const detailsElement = ref.current\n      if (detailsElement) {\n        const contentInner = detailsElement.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n        let resizeObserver: ResizeObserver | undefined\n\n        if (detailsElement.open) {\n          setContentHeight(detailsElement)\n        }\n\n        if (typeof ResizeObserver !== 'undefined' && contentInner) {\n          resizeObserver = new ResizeObserver(() => {\n            if (detailsElement.open) {\n              setContentHeight(detailsElement)\n            }\n          })\n          resizeObserver.observe(contentInner)\n        }\n\n        detailsElement.addEventListener('toggle', handleToggle)\n        detailsElement.addEventListener('keydown', handleKeyDown)\n\n        return () => {\n          clearCloseAnimation()\n          resizeObserver?.disconnect()\n          detailsElement.removeEventListener('toggle', handleToggle)\n          detailsElement.removeEventListener('keydown', handleKeyDown)\n        }\n      }\n    }, [clearCloseAnimation, handleToggle, handleKeyDown, ref, setContentHeight])\n\n    return (\n      <AccordionContext.Provider value={accordionContextValue}>\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events -- summary is natively keyboard-operable and keyboard activation also fires click; onClick only intercepts to animate the close */}\n        <details\n          className={clsx(\n            styles.Accordion,\n            styles[`Accordion--${variant}`],\n            disableAnimation && styles['Accordion--disableAnimation'],\n            className,\n          )}\n          ref={ref}\n          open={open}\n          {...rest}\n          onClick={handleClick}\n        >\n          {children}\n        </details>\n      </AccordionContext.Provider>\n    )\n  },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n  as?: HeadingProps['as']\n  reversedToggles?: boolean\n  toggleColor?: (typeof AccordionToggleColors)[number]\n  weight?: HeadingProps['weight']\n}\n\n/**\n * TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n  ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n    const {variant} = useAccordionContext()\n\n    return (\n      <summary\n        className={clsx(\n          styles.Accordion__summary,\n          reversedToggles && styles['Accordion__summary--reversed-toggles'],\n          styles[`Accordion__summary--${variant}`],\n          toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <span aria-hidden=\"true\" className={styles['Accordion__summary-toggle']}>\n          <TriangleDownIcon className={styles['Accordion__summary-toggleIcon']} size={22} />\n        </span>\n        <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n          {children}\n        </Heading>\n      </summary>\n    )\n  },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({children, className, ...rest}: AccordionContentProps) => (\n  <section className={clsx(styles.Accordion__content, className)} {...rest}>\n    <div className={styles['Accordion__content-inner']}>{children}</div>\n  </section>\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  type DetailsHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type ReactElement,\n  type RefObject,\n  type ToggleEvent,\n} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, type HeadingProps} from '../'\nimport {TriangleDownIcon} from '@primer/octicons-react'\nimport {Colors, BiColorGradients as Gradients} from '../constants'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Accordion.module.css'\n\nexport type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {\n  children: ReactElement<AccordionHeadingProps | AccordionContentProps>[]\n  variant?: 'default' | 'emphasis'\n  disableAnimation?: boolean\n  handleOpen?: (isOpen: boolean) => void\n}\n\ntype AccordionContextType = {\n  variant: 'default' | 'emphasis'\n}\n\nconst AccordionContext = createContext<AccordionContextType | null>(null)\n\nconst useAccordionContext = (): AccordionContextType => {\n  const context = useContext(AccordionContext)\n\n  if (context === null) {\n    throw new Error('Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?')\n  }\n\n  return context\n}\n\nexport const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(\n  (\n    {\n      children,\n      className,\n      variant = 'default',\n      disableAnimation = false,\n      open,\n      onClick,\n      onToggle,\n      onKeyDown,\n      handleOpen,\n      ...rest\n    },\n    forwardedRef,\n  ) => {\n    const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDetailsElement | null>)\n    const closeAnimationTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)\n    const isClosingRef = useRef(false)\n    const accordionContextValue = useMemo(() => ({variant}), [variant])\n\n    const setContentHeight = useCallback((details: HTMLDetailsElement) => {\n      const content = details.querySelector<HTMLElement>(`:scope > .${styles.Accordion__content}`)\n      const contentInner = content?.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n\n      if (!content || !contentInner) {\n        return null\n      }\n\n      const contentOffset = parseFloat(getComputedStyle(content).getPropertyValue('--brand-Accordion-content-offset'))\n      const contentHeight = Math.max(0, contentInner.scrollHeight - (Number.isNaN(contentOffset) ? 0 : contentOffset))\n\n      details.style.setProperty('--brand-Accordion-content-height', `${contentHeight}px`)\n\n      return content\n    }, [])\n\n    const clearCloseAnimation = useCallback(() => {\n      if (closeAnimationTimeout.current) {\n        clearTimeout(closeAnimationTimeout.current)\n        closeAnimationTimeout.current = null\n      }\n    }, [])\n\n    const closeWithAnimation = useCallback(\n      (details: HTMLDetailsElement) => {\n        clearCloseAnimation()\n        const reducedMotionQuery =\n          typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n            ? window.matchMedia('(prefers-reduced-motion: reduce)')\n            : null\n        const prefersReducedMotion = reducedMotionQuery !== null && reducedMotionQuery.matches\n\n        if (prefersReducedMotion) {\n          details.open = false\n          isClosingRef.current = false\n          details.classList.remove(styles['Accordion--closing'])\n          return\n        }\n\n        const content = setContentHeight(details)\n\n        if (content) {\n          content.getBoundingClientRect()\n        }\n\n        isClosingRef.current = true\n        details.classList.add(styles['Accordion--closing'])\n\n        closeAnimationTimeout.current = setTimeout(() => {\n          details.open = false\n          isClosingRef.current = false\n          details.classList.remove(styles['Accordion--closing'])\n          closeAnimationTimeout.current = null\n        }, 300)\n      },\n      [clearCloseAnimation, setContentHeight],\n    )\n\n    const handleToggle = useCallback<(event: Event) => void>(\n      event => {\n        const toggleEvent = event as unknown as ToggleEvent<HTMLDetailsElement>\n        if (toggleEvent.currentTarget.open) {\n          clearCloseAnimation()\n          isClosingRef.current = false\n          toggleEvent.currentTarget.classList.remove(styles['Accordion--closing'])\n          setContentHeight(toggleEvent.currentTarget)\n        }\n        onToggle?.(toggleEvent)\n        handleOpen?.(toggleEvent.currentTarget.open)\n      },\n      [clearCloseAnimation, onToggle, handleOpen, setContentHeight],\n    )\n\n    const handleClick = useCallback<MouseEventHandler<HTMLDetailsElement>>(\n      event => {\n        onClick?.(event)\n\n        if (event.defaultPrevented || disableAnimation) {\n          return\n        }\n\n        const details = event.currentTarget\n        const target = event.target\n\n        if (!(target instanceof Element) || !details.open) {\n          return\n        }\n\n        const summary = target.closest('summary')\n\n        if (summary?.parentElement === details) {\n          event.preventDefault()\n\n          if (!isClosingRef.current) {\n            closeWithAnimation(details)\n          }\n        }\n      },\n      [closeWithAnimation, disableAnimation, onClick],\n    )\n\n    const handleKeyDown = useCallback<EventListener>(\n      event => {\n        const keyboardEvent = event as unknown as KeyboardEvent<HTMLDetailsElement>\n        onKeyDown?.(keyboardEvent)\n\n        const details = ref.current\n\n        if (keyboardEvent.key === 'Escape' && details?.open) {\n          clearCloseAnimation()\n          details.open = false\n          isClosingRef.current = false\n          details.classList.remove(styles['Accordion--closing'])\n          details.querySelector('summary')?.focus()\n        }\n      },\n      [clearCloseAnimation, onKeyDown, ref],\n    )\n\n    useEffect(() => {\n      const detailsElement = ref.current\n      if (detailsElement) {\n        const contentInner = detailsElement.querySelector<HTMLElement>(`.${styles['Accordion__content-inner']}`)\n        let resizeObserver: ResizeObserver | undefined\n\n        if (detailsElement.open) {\n          setContentHeight(detailsElement)\n        }\n\n        if (typeof ResizeObserver !== 'undefined' && contentInner) {\n          resizeObserver = new ResizeObserver(() => {\n            if (detailsElement.open) {\n              setContentHeight(detailsElement)\n            }\n          })\n          resizeObserver.observe(contentInner)\n        }\n\n        detailsElement.addEventListener('toggle', handleToggle)\n        detailsElement.addEventListener('keydown', handleKeyDown)\n\n        return () => {\n          clearCloseAnimation()\n          resizeObserver?.disconnect()\n          detailsElement.removeEventListener('toggle', handleToggle)\n          detailsElement.removeEventListener('keydown', handleKeyDown)\n        }\n      }\n    }, [clearCloseAnimation, handleToggle, handleKeyDown, ref, setContentHeight])\n\n    return (\n      <AccordionContext.Provider value={accordionContextValue}>\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events -- summary is natively keyboard-operable and keyboard activation also fires click; onClick only intercepts to animate the close */}\n        <details\n          className={clsx(\n            styles.Accordion,\n            styles[`Accordion--${variant}`],\n            disableAnimation && styles['Accordion--disableAnimation'],\n            className,\n          )}\n          ref={ref}\n          open={open}\n          {...rest}\n          onClick={handleClick}\n        >\n          {children}\n        </details>\n      </AccordionContext.Provider>\n    )\n  },\n)\n\nexport const AccordionToggleColors = [...Colors, ...Gradients] as const\n\nexport type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {\n  as?: HeadingProps['as']\n  reversedToggles?: boolean\n  toggleColor?: (typeof AccordionToggleColors)[number]\n  weight?: HeadingProps['weight']\n}\n\n/**\n * TODO This type is incorrect\n * The ref is applied to the summary, not the heading, so the correct type is\n * `forwardRef<HTMLElement, AccordionHeadingProps>`\n */\nexport const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(\n  ({children, className, as = 'h4', toggleColor, reversedToggles, weight = 'normal', ...rest}, ref) => {\n    const {variant} = useAccordionContext()\n\n    return (\n      <summary\n        className={clsx(\n          styles.Accordion__summary,\n          reversedToggles && styles['Accordion__summary--reversed-toggles'],\n          styles[`Accordion__summary--${variant}`],\n          toggleColor && styles[`Accordion__summary--toggleColor-${toggleColor}`],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <span aria-hidden=\"true\" className={styles['Accordion__summary-toggle']}>\n          <TriangleDownIcon className={styles['Accordion__summary-toggleIcon']} size={22} />\n        </span>\n        <Heading as={as} size={variant === 'emphasis' ? '6' : 'subhead-large'} weight={weight}>\n          {children}\n        </Heading>\n      </summary>\n    )\n  },\n)\n\nexport type AccordionContentProps = HTMLAttributes<HTMLElement>\n\nexport const AccordionContent = ({children, className, ...rest}: AccordionContentProps) => (\n  <section className={clsx(styles.Accordion__content, className)} {...rest}>\n    <div className={styles['Accordion__content-inner']}>{children}</div>\n  </section>\n)\n\nexport const Accordion = Object.assign(AccordionRoot, {Content: AccordionContent, Heading: AccordionHeading})\n"],"mappings":"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"}

package/esm/Accordion/Accordion.module.js

@@ -1,12 +1,13 @@
-import './Accordion.module-COckontb.css';var e = {
-	Accordion: "Primer_Brand__Accordion-module__Accordion___RSoMC",
+import './Accordion.module-COckontb.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",
 	"Accordion__summary-toggleIcon": "Primer_Brand__Accordion-module__Accordion__summary-toggleIcon___WFUk5",
-	Accordion__content: "Primer_Brand__Accordion-module__Accordion__content___GhUVO",
+	Accordion__content: t,
 	"Accordion__content-inner": "Primer_Brand__Accordion-module__Accordion__content-inner___R4pof",
 	"Accordion--default": "Primer_Brand__Accordion-module__Accordion--default___R_5ld",
 	"Accordion--emphasis": "Primer_Brand__Accordion-module__Accordion--emphasis___V_1VT",
-	Accordion__summary: "Primer_Brand__Accordion-module__Accordion__summary___zYOXC",
+	Accordion__summary: n,
 	"Accordion__summary--emphasis": "Primer_Brand__Accordion-module__Accordion__summary--emphasis___29_eI",
 	"Accordion__summary--reversed-toggles": "Primer_Brand__Accordion-module__Accordion__summary--reversed-toggles____uX_W",
 	"Accordion__summary-toggle": "Primer_Brand__Accordion-module__Accordion__summary-toggle___YSgM_",
@@ -33,6 +34,6 @@ import './Accordion.module-COckontb.css';var e = {
 	"Accordion--closing": "Primer_Brand__Accordion-module__Accordion--closing___R_qJH"
 };
 //#endregion
-export { e as default };
+export { e as Accordion, t as Accordion__content, n as Accordion__summary, r as default };
 
 //# sourceMappingURL=Accordion.module.js.map

package/esm/ActionMenu/ActionMenu.d.ts

@@ -144,10 +144,10 @@ export declare const ActionMenu: React.NamedExoticComponent<{
      */
     mode?: ActionMenuButtonModes;
 } & BaseProps<HTMLDivElement>> & {
-    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
+    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => React.JSX.Element;
 } & {
     Button: React.ForwardRefExoticComponent<Omit<ActionMenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => React.JSX.Element;
     Overlay: React.ForwardRefExoticComponent<Omit<ActionMenuOverlayProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
     testIds: {
         root: string;

package/esm/ActionMenu/ActionMenu.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { Text as n } from "../Text/Text.js";
 import { Button as r } from "../Button/Button.js";
@@ -7,7 +7,8 @@ import { useTheme as a } from "../ThemeProvider/useTheme.js";
 import { useAnchoredPosition as o } from "../hooks/useAnchoredPosition.js";
 import { useOnClickOutside as s } from "../hooks/useOnClickOutside.js";
 import { useKeyboardEscape as c } from "../hooks/useKeyboardEscape.js";
-import { CheckIcon as l, ChevronDownIcon as u } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { CheckIcon as l } from "../node_modules/@primer/octicons-react/dist/icons/CheckIcon.js";
+import { ChevronDownIcon as u } 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-B69RzUbe.css';/* empty css                                                                                                         */
 import d from "./ActionMenu.module.js";
 import f, { Children as p, cloneElement as m, forwardRef as h, isValidElement as g, memo as _, useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";