npm - @primer/react-brand - Versions diffs - 0.71.1-rc.ee7cd7e2 → 0.72.0-rc.0349c28f - Mend

@primer/react-brand 0.71.1-rc.ee7cd7e2 → 0.72.0-rc.0349c28f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (416) hide show

package/docs/components/ActionMenu/index.md CHANGED Viewed

@@ -64,9 +64,6 @@ render(<App />)
 In this `mode`, the `ActionMenu` can be shown as a split button with an action (left) and dropdown button (right) with an additional list of actions.
-> In split-button mode, each action must be rendered as a link element using the as="a" prop, including the main button
-> and all menu items.
 ```jsx
 <ActionMenu mode="split-button">
   <ActionMenu.Button variant="subtle" as="a" href="#location-for-link" leadingVisual={<StarIcon />}>
@@ -129,11 +126,14 @@ In this `mode`, the `ActionMenu` can be shown as a split button with an action (
 ### ActionMenu.Button `Required`
-| name        | type           | default | required | description                        |
-| ----------- | -------------- | ------- | -------- | ---------------------------------- |
-| `className` | `string`       |         |          | Sets a custom class on the element |
-| `children`  | `ReactElement` |         |          |                                    |
-| `id`        | `string`       |         |          | Sets a custom `id`                 |
+| name            | type                                   | default     | required | description                                      |
+| --------------- | -------------------------------------- | ----------- | -------- | ------------------------------------------------ |
+| `className`     | `string`                               |             |          | Sets a custom class on the element               |
+| `children`      | `ReactElement`                         |             |          |                                                  |
+| `id`            | `string`                               |             |          | Sets a custom `id`                               |
+| `variant`       | `'primary' \| 'secondary' \| 'subtle'` |             | `false`  | Sets the button styling variation                |
+| `onClick`       | `(event: MouseEvent) => void`          | `undefined` | `false`  | Handles activation of the button                 |
+| `leadingVisual` | `ReactElement`                         | `undefined` | `false`  | Renders a leading visual before the button label |
 ### ActionMenu.Overlay `Required`

package/docs/components/River/index.md CHANGED Viewed

@@ -10,7 +10,7 @@ keywords: ['feature', 'showcase', 'highlight', 'story']
 Use rivers to showcase features and introduce topics. Rivers are composed of images or videos paired alongside text content like headings, paragraphs, and links.
-A river’s content should be short and concise, no longer than 3 or 4 sentences and in a single paragraph when possible.
+A river’s content should be short and concise, no longer than 160 characters, and contained in a single paragraph when possible.
 **✅ Do**
@@ -26,21 +26,9 @@ _Don't overload the river with too much content._
 ### Stacked
-Two or more rivers can be stacked to guide the user through a set of features. When stacking rivers, alternate between left and right alignments to create a more dynamic reading flow. When alternating alignments, use a `40:60` image to text ratio, otherwise keep the ratio to `50:50`.
+Two or more rivers can be stacked to guide the user through a set of features. Keep rivers in a stack consistently aligned to create a predictable reading flow. For gridline rivers, always use start alignment. Don't use zig-zag layouts.
-It is possible to use 2 or more following left or right river to create a simple alignment promoting easy scroll scan.
-**✅ Do**
-![](https://github.com/primer/brand/assets/912236/a7f8bca8-78e6-4e29-a44b-5a305ffeeeae)
-_Alternate rivers with left and right alignments._
-**❌ Don't**
-![](https://github.com/primer/brand/assets/6951037/169d5c19-67f4-4f15-8e3b-80c877b34af1)
-_Don't break the flow in a stack of rivers that would otherwise stay aligned._
+Prefer the default 50:50 image-to-text ratio where possible. Use 60:40 only when the visual needs more space or emphasis.
 Note that too many rivers can make the design feel repetitive. In that situation, consider introducing a breakout section or break the content with a different component, such as [pillar](../Pillar/index.md) or [card](../Card/index.md) to provide a better visual hierarchy and experience. For example, use the river for the top features you want to highlight and then use pillars to showcase the rest.
@@ -170,7 +158,7 @@ The image is automatically styled to fit the width of the parent container. If y
 - We recommend using a river left as the first river of the flow to start with a visual and avoid stacking text with above section on mobile
 - River components stacks create a unit, the set should be considered to be the main parent section. The parent section should be spaced as a regular section with the largest spacing while internal elements should use smaller spacing
-- If the image is critical for the user to understand the message, default to right aligned. If the text is critical for the user to understand the image, choose left aligned.
+- For a standalone river, choose its alignment based on whether the visual or text needs emphasis. Keep every river in a stack consistently aligned.
 ### Link

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.71.1-rc.ee7cd7e2)
+# Primer Brand docs (v0.72.0-rc.0349c28f)
-These docs are bundled with `@primer/react-brand@0.71.1-rc.ee7cd7e2` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.72.0-rc.0349c28f` 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/ActionMenu/ActionMenu.d.ts CHANGED Viewed

@@ -59,9 +59,11 @@ export type ActionMenuProps = {
 type ActionMenuContextType = {
     size?: ActionMenuSizes;
     setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>;
+    onMenuToggle?: () => void;
 };
 export declare const useActionMenuContext: () => ActionMenuContextType;
-export declare const ActionMenuProvider: React.FC<ActionMenuProps>;
+type ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>;
+export declare const ActionMenuProvider: React.FC<ActionMenuProviderProps>;
 type ActionMenuButtonProps = PropsWithChildren<BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>> & {
     as?: ButtonProps<'a'>['as'];
     href?: ButtonProps<'a'>['href'];

package/esm/ActionMenu/ActionMenu.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,iBAAiB,EAGjB,YAAY,EAEb,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAgC,MAAM,KAAK,CAAA;AAMtE,OAAO,EAA6B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAG5E,OAAO,EAAY,KAAK,gBAAgB,EAAY,MAAM,mBAAmB,CAAA;AAC7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,+GAA+G,CAAA;AAuBtH,eAAO,MAAM,sBAAsB,EAU9B,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAA;AAE/B,eAAO,MAAM,eAAe,8BAA+B,CAAA;AAE3D,eAAO,MAAM,qBAAqB,sCAAuC,CAAA;AACzE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EACJ,YAAY,CAAC,qBAAqB,CAAC,GACnC,YAAY,CAAC,sBAAsB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAA;IACrF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IAItB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;AAE7B,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAA;~~CAC5E~~,CAAA;AAID,eAAO,MAAM,oBAAoB,QAAO,qBAEvC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,~~eAAe~~,~~CAIxD~~,CAAA;~~AAgMD~~,KAAK,qBAAqB,GAAG,iBAAiB,CAC5C,SAAS,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,CAClH,GAAG;IACF,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,KAAK,CAAC,EAAE,qBAAqB,CAAA;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAA;IACrC,aAAa,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAA;CAClD,CAAA;~~AA+ED~~,KAAK,uBAAuB,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;CAC5D,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;AAErD,KAAK,yBAAyB,GAAG,uBAAuB,GAAG;IACzD,EAAE,EAAE,GAAG,CAAA;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAA;AAGlF,KAAK,0BAA0B,GAAG,uBAAuB,GAAG;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAA;AAoI9E,KAAK,sBAAsB,GAAG,iBAAiB,CAC7C,SAAS,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CACrE,GAAG;IACF,YAAY,EAAE,MAAM,CAAA;IACpB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAkBD;;;GAGG;AACH,eAAO,MAAM,UAAU;~~IA9gBrB~~;;OAEG;cAEC,YAAY,CAAC,qBAAqB,CAAC,GACnC,YAAY,CAAC,sBAAsB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC;IACrF;;OAEG;eACQ,OAAO;IAClB;;OAEG;WACI,OAAO;IACd;;;OAGG;eACQ,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI;IACrC;;;;OAIG;uBACgB,QAAQ,GAAG,MAAM;IACpC;;OAEG;oBACa,MAAM;IACtB;;OAEG;oBACa,OAAO,GAAG,KAAK;IAC/B;;OAEG;WACI,eAAe;eAIX,gBAAgB,CAAC,MAAM,CAAC;IACnC;;;;OAIG;WACI,qBAAqB;;+~~IAiCzB~~,eAAe;;;~~8IAiTjB~~,yBAAyB,GAAG,0BAA0B;;;;;;;;;CAkJvD,CAAA"}
1	+ {"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,iBAAiB,EAGjB,YAAY,EAEb,MAAM,OAAO,CAAA;AACd,OAAO,EAAS,WAAW,EAAgC,MAAM,KAAK,CAAA;AAMtE,OAAO,EAA6B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAG5E,OAAO,EAAY,KAAK,gBAAgB,EAAY,MAAM,mBAAmB,CAAA;AAC7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,+GAA+G,CAAA;AAuBtH,eAAO,MAAM,sBAAsB,EAU9B,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAA;AAE/B,eAAO,MAAM,eAAe,8BAA+B,CAAA;AAE3D,eAAO,MAAM,qBAAqB,sCAAuC,CAAA;AACzE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EACJ,YAAY,CAAC,qBAAqB,CAAC,GACnC,YAAY,CAAC,sBAAsB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAA;IACrF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IAItB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;AAE7B,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAA;IAC3E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAID,eAAO,MAAM,oBAAoB,QAAO,qBAEvC,CAAA;AAED,KAAK,uBAAuB,GAAG,eAAe,GAAG,IAAI,CAAC,qBAAqB,EAAE,cAAc,CAAC,CAAA;AAE5F,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQhE,CAAA;AA+LD,KAAK,qBAAqB,GAAG,iBAAiB,CAC5C,SAAS,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,CAClH,GAAG;IACF,EAAE,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,KAAK,CAAC,EAAE,qBAAqB,CAAA;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAA;IACrC,aAAa,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAA;CAClD,CAAA;AAmGD,KAAK,uBAAuB,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;CAC5D,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;AAErD,KAAK,yBAAyB,GAAG,uBAAuB,GAAG;IACzD,EAAE,EAAE,GAAG,CAAA;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAA;AAGlF,KAAK,0BAA0B,GAAG,uBAAuB,GAAG;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,MAAM,uBAAuB,GAAG,IAAI,CAAC,CAAA;AAoI9E,KAAK,sBAAsB,GAAG,iBAAiB,CAC7C,SAAS,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CACrE,GAAG;IACF,YAAY,EAAE,MAAM,CAAA;IACpB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAkBD;;;GAGG;AACH,eAAO,MAAM,UAAU;IAxiBrB;;OAEG;cAEC,YAAY,CAAC,qBAAqB,CAAC,GACnC,YAAY,CAAC,sBAAsB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC;IACrF;;OAEG;eACQ,OAAO;IAClB;;OAEG;WACI,OAAO;IACd;;;OAGG;eACQ,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI;IACrC;;;;OAIG;uBACgB,QAAQ,GAAG,MAAM;IACpC;;OAEG;oBACa,MAAM;IACtB;;OAEG;oBACa,OAAO,GAAG,KAAK;IAC/B;;OAEG;WACI,eAAe;eAIX,gBAAgB,CAAC,MAAM,CAAC;IACnC;;;;OAIG;WACI,qBAAqB;;+IAwCzB,eAAe;;;8IAoUjB,yBAAyB,GAAG,0BAA0B;;;;;;;;;CAkJvD,CAAA"}

package/esm/ActionMenu/ActionMenu.js CHANGED Viewed

@@ -38,12 +38,13 @@ var O = {
 	"outside-bottom",
 	"outside-left",
 	"outside-right"
-], A = ["small", "medium"], j = ["default", "split-button"], M = f.createContext({}), N = () => f.useContext(M), P = ({ size: e, children: t }) => {
-	let [n, r] = S(e);
+], A = ["small", "medium"], j = ["default", "split-button"], M = f.createContext({}), N = () => f.useContext(M), P = ({ size: e, children: t, onMenuToggle: n }) => {
+	let [r, i] = S(e);
 	return /* @__PURE__ */ w(M.Provider, {
 		value: {
-			size: n,
-			setSize: r
+			size: r,
+			setSize: i,
+			onMenuToggle: n
 		},
 		children: t
 	});
@@ -110,7 +111,6 @@ var O = {
 		allowOutOfBounds: !0,
 		side: _
 	}, [k]), { Button: V, Overlay: H } = p.toArray(r).reduce((t, n) => (g(n) && n.type === I ? t.Button = m(n, {
-		onClick: F,
 		ref: M,
 		className: e(n.props.className, d[`ActionMenu__button--${C}`], k),
 		menuOpen: k,
@@ -133,6 +133,7 @@ var O = {
 	})), t), {});
 	return /* @__PURE__ */ w(P, {
 		size: h,
+		onMenuToggle: F,
 		children: /* @__PURE__ */ T("div", {
 			id: N,
 			className: e(d.ActionMenu, a && d["ActionMenu--disabled"]),
@@ -140,51 +141,65 @@ var O = {
 			children: [V, k ? H : null]
 		})
 	});
-}), I = h(({ as: t, href: n, children: r, className: o, "data-testid": s, disabled: c, menuOpen: l, size: u, _mode: f = "default", onClick: p, leadingVisual: m, variant: h = "primary", ...g }, _) => f === "split-button" ? /* @__PURE__ */ T("div", {
-	className: e(d.ActionMenu__button, d[`ActionMenu__button--${u}`], o),
-	children: [/* @__PURE__ */ w(a, {
-		as: t,
-		href: n,
-		className: e(d["ActionMenu__innerButton--split-button"], d[`ActionMenu__innerButton--${h}`], d[`ActionMenu__innerButton--${u}`], c && d["ActionMenu__innerButton--disabled"]),
-		variant: h,
-		"aria-disabled": c,
-		"data-testid": s || O.button,
-		size: u,
-		leadingVisual: m,
+}), I = h(({ as: t, href: n, id: r, children: o, className: s, "data-testid": c, disabled: l, menuOpen: u, size: f, _mode: p = "default", onClick: m, leadingVisual: h, variant: g, ..._ }, y) => {
+	let { onMenuToggle: b } = N(), x = v((e) => {
+		m?.(e), e.defaultPrevented || b?.();
+	}, [m, b]);
+	if (p === "split-button") {
+		let p = g ?? "primary";
+		return /* @__PURE__ */ T("div", {
+			className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], s),
+			children: [/* @__PURE__ */ w(a, {
+				as: t,
+				href: n,
+				className: e(d["ActionMenu__innerButton--split-button"], d[`ActionMenu__innerButton--${p}`], d[`ActionMenu__innerButton--${f}`], l && d["ActionMenu__innerButton--disabled"]),
+				variant: p,
+				"aria-disabled": l,
+				"data-testid": c || O.button,
+				size: f,
+				leadingVisual: h,
+				onClick: m,
+				..._,
+				children: /* @__PURE__ */ w("span", {
+					className: d["ActionMenu__button-text"],
+					children: o
+				})
+			}), /* @__PURE__ */ w(a, {
+				ref: y,
+				id: r,
+				as: "button",
+				className: d["ActionMenu__innerButton--split-button"],
+				variant: p,
+				"aria-haspopup": "true",
+				"aria-label": "Menu",
+				size: f,
+				"aria-expanded": u ? "true" : "false",
+				onClick: b,
+				disabled: l,
+				children: /* @__PURE__ */ w(i, { className: d["ActionMenu__inner-button-dropdown-icon"] })
+			})]
+		});
+	}
+	return /* @__PURE__ */ w(a, {
+		ref: y,
+		id: r,
+		className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], s),
+		"aria-haspopup": "true",
+		"aria-expanded": u ? "true" : "false",
+		disabled: l,
+		"data-testid": c || O.button,
+		size: f,
+		variant: g,
+		leadingVisual: h,
+		trailingVisual: /* @__PURE__ */ w(i, {}),
+		onClick: x,
+		..._,
 		children: /* @__PURE__ */ w("span", {
 			className: d["ActionMenu__button-text"],
-			children: r
+			children: o
 		})
-	}), /* @__PURE__ */ w(a, {
-		ref: _,
-		as: "button",
-		className: d["ActionMenu__innerButton--split-button"],
-		variant: h,
-		"aria-haspopup": "true",
-		"aria-label": "Menu",
-		size: u,
-		"aria-expanded": l ? "true" : "false",
-		onClick: p,
-		disabled: c,
-		...g,
-		children: /* @__PURE__ */ w(i, { className: d["ActionMenu__inner-button-dropdown-icon"] })
-	})]
-}) : /* @__PURE__ */ w(a, {
-	ref: _,
-	className: e(d.ActionMenu__button, d[`ActionMenu__button--${u}`], o),
-	"aria-haspopup": "true",
-	"aria-expanded": l ? "true" : "false",
-	disabled: c,
-	"data-testid": s || O.button,
-	size: u,
-	trailingVisual: /* @__PURE__ */ w(i, {}),
-	onClick: p,
-	...g,
-	children: /* @__PURE__ */ w("span", {
-		className: d["ActionMenu__button-text"],
-		children: r
-	})
-})), L = {
+	});
+}), L = {
 	none: "menuitem",
 	single: "menuitemradio",
 	link: "menuitem"

package/esm/ActionMenu/ActionMenu.js.map CHANGED Viewed

	@@ -1 +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, Text, ThemeProvider, useTheme} from '../'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\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 const ActionMenuSizes = ['small', 'medium'] as const\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport type ActionMenuProps = {\n /\n The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay\n /\n children:\n \| ReactElement<ActionMenuButtonProps>\n \| ReactElement<ActionMenuOverlayProps>\n \| Array<ReactElement<ActionMenuButtonProps> \| ReactElement<ActionMenuOverlayProps>>\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?: ActionMenuSizes\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?: ActionMenuButtonModes\n} & BaseProps<HTMLDivElement>\n\ntype ActionMenuContextType = {\n size?: ActionMenuSizes\n setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes \| undefined>>\n}\n\nconst ActionMenuContext = React.createContext<ActionMenuContextType>({})\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n return React.useContext(ActionMenuContext)\n}\n\nexport const ActionMenuProvider: React.FC<ActionMenuProps> = ({size, children}) => {\n const [currentSize, setSize] = useState(size)\n\n return <ActionMenuContext.Provider value={{size: currentSize, setSize}}>{children}</ActionMenuContext.Provider>\n}\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 {Button: SelectButton, Overlay: SelectOverlay} = Children.toArray(children).reduce<{\n Button?: ReactElement<ActionMenuButtonProps>\n Overlay?: ReactElement<ActionMenuOverlayProps>\n }>((acc, child) => {\n if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n acc.Button = cloneElement(child, {\n onClick: toggleMenu,\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 _mode: mode,\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}>\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?: ActionMenuSizes\n _mode?: ActionMenuButtonModes\n variant?: ButtonProps<'a'>['variant']\n leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n (\n {\n as,\n href,\n children,\n className,\n 'data-testid': testId,\n disabled,\n menuOpen,\n size,\n _mode = 'default',\n onClick,\n leadingVisual,\n variant = 'primary',\n ...props\n },\n ref,\n ) => {\n if (_mode === 'split-button') {\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--${variant}`],\n styles[`ActionMenu__innerButton--${size}`],\n disabled && styles['ActionMenu__innerButton--disabled'],\n )}\n variant={variant}\n aria-disabled={disabled}\n data-testid={testId \|\| testIds.button}\n size={size}\n leadingVisual={leadingVisual}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n <Button\n ref={ref}\n as=\"button\"\n className={styles['ActionMenu__innerButton--split-button']}\n variant={variant}\n aria-haspopup=\"true\"\n aria-label=\"Menu\"\n size={size}\n aria-expanded={menuOpen ? 'true' : 'false'}\n onClick={onClick}\n disabled={disabled}\n {...props}\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 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 trailingVisual={<ChevronDownIcon />}\n onClick={onClick}\n {...props}\n >\n <span className={styles['ActionMenu__button-text']}>{children}</span>\n </Button>\n )\n },\n)\n\ntype ActionMenuItemBaseProps = {\n handler?: (newValue: string) => void\n type?: 'none' \| 'single' \| 'link'\n disabled?: boolean\n size?: ActionMenuSizes\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 Item: ActionMenuItem,\n Overlay: ActionMenuOverlay,\n testIds,\n})\n"],"mappings":"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"}
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, Text, ThemeProvider, useTheme} from '../'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\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 const ActionMenuSizes = ['small', 'medium'] as const\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport type ActionMenuProps = {\n /\n The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay\n /\n children:\n \| ReactElement<ActionMenuButtonProps>\n \| ReactElement<ActionMenuOverlayProps>\n \| Array<ReactElement<ActionMenuButtonProps> \| ReactElement<ActionMenuOverlayProps>>\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?: ActionMenuSizes\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?: ActionMenuButtonModes\n} & BaseProps<HTMLDivElement>\n\ntype ActionMenuContextType = {\n size?: ActionMenuSizes\n setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes \| undefined>>\n onMenuToggle?: () => void\n}\n\nconst ActionMenuContext = React.createContext<ActionMenuContextType>({})\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n return React.useContext(ActionMenuContext)\n}\n\ntype ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>\n\nexport const ActionMenuProvider: React.FC<ActionMenuProviderProps> = ({size, children, onMenuToggle}) => {\n const [currentSize, setSize] = useState(size)\n\n return (\n <ActionMenuContext.Provider value={{size: currentSize, setSize, onMenuToggle}}>\n {children}\n </ActionMenuContext.Provider>\n )\n}\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 {Button: SelectButton, Overlay: SelectOverlay} = Children.toArray(children).reduce<{\n Button?: ReactElement<ActionMenuButtonProps>\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 _mode: mode,\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} 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?: ActionMenuSizes\n _mode?: ActionMenuButtonModes\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 _mode = 'default',\n onClick,\n leadingVisual,\n variant,\n ...props\n },\n ref,\n ) => {\n const {onMenuToggle} = useActionMenuContext()\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(event)\n\n if (!event.defaultPrevented) {\n onMenuToggle?.()\n }\n },\n [onClick, onMenuToggle],\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--${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={onClick}\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={styles['ActionMenu__innerButton--split-button']}\n variant={splitButtonVariant}\n aria-haspopup=\"true\"\n aria-label=\"Menu\"\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\ntype ActionMenuItemBaseProps = {\n handler?: (newValue: string) => void\n type?: 'none' \| 'single' \| 'link'\n disabled?: boolean\n size?: ActionMenuSizes\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 Item: ActionMenuItem,\n Overlay: ActionMenuOverlay,\n testIds,\n})\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,UAAU;AACZ,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAIY,IAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,IAAkB,CAAC,SAAS,SAAS,EAErC,IAAwB,CAAC,WAAW,eAAe,EA8D1D,IAAoB,EAAM,cAAqC,EAAE,CAAC,EAE3D,UACJ,EAAM,WAAW,EAAkB,EAK/B,KAAyD,EAAC,SAAM,aAAU,sBAAkB;CACvG,IAAM,CAAC,GAAa,KAAW,EAAS,EAAK;AAE7C,QACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;GAAC,MAAM;GAAa;GAAS;GAAa;EAC1E;EAC0B,CAAA;GAI3B,IAAkB,GACrB,EACC,OACA,aACA,eAAe,GACf,aACA,UAAO,IACP,sBAAmB,QACnB,mBAAgB,OAChB,UAAO,UACP,aACA,aACA,UAAO,gBACc;CACrB,IAAM,CAAC,GAAU,KAAe,EAAS,EAAK,EACxC,IAAqB,EAAyB,KAAK,EACnD,IAAmB,EAA0B,KAAK,EAClD,IAAa,EAAM,EAAG;AAQ5B,CANA,EAAkB,SAA0B,EAAY,GAAM,EAAE,EAAiB,EAMjF,EAJ0B,QAAkB;AAC1C,IAAY,GAAM;IACjB,EAAE,CAEa,CAAkB;CAEpC,IAAM,IAAa,QAAkB;AACnC,IAAY,CAAC,EAAS;IACrB,CAAC,EAAS,CAAC,EAER,IAAiB,GACpB,MAAqB;AAEpB,EADI,KAAU,EAAS,EAAS,EAChC,GAAY;IAEd,CAAC,GAAU,EAAW,CACvB,EAEK,IAAsB,GACzB,MAAqB;AAGpB,EAFA,EAAe,EAAS,EACxB,GAAY,EACZ,EAAiB,SAAS,OAAO;IAEnC;EAAC;EAAgB;EAAY;EAAiB,CAC/C;AAED,SAAgB;AACd,MAAI,KAAY,EAAmB,SAAS;GAC1C,IAAM,IAAkB,EAAmB,SACrC,IAAgB,MAAS,gBACzB,IAAoB,KAAgB,MAAW,EAAQ,YAAY,MAAM,KAAA;AAS/E,GAPA,EAAU,EAAmB,SAAS;IACpC,UAAU,EAAU;IACpB,wBAAwB;IACxB,iBAAiB,IAAgB,UAAU,KAAA;IAC5C,CAAC,EAGF,EAAgB,iBAAiB,YAAW,MAAS;AACnD,QAAI,EAAM,QAAQ,SAAS;KACzB,IAAM,IAAS,EAAM,QAGf,IAAgB,EAAO,YAAY,MAAM,EAAO,QAAQ,KAAK,GAAG;AAEtE,SAAI,CAAC,KAAiB,EAAc,aAAa,gBAAgB,KAAK,OAAQ;KAE9E,IAAM,IAAQ,EAAc,aAAa,aAAa;AACtD,KAAI,MACF,EAAe,EAAM,EACrB,EAAY,GAAM,EAClB,iBAAiB;AACf,QAAiB,SAAS,OAAO;QAChC,GAAG;;KAGV;GAEF,IAAM,IAAiB,IAAgB,MAAM,MAGvC,IAAY,EAAmB,QAAQ,cAAc,EAAe;AAC1E,GAAI,KACF,iBAAiB;AACf,MAAU,OAAO;MAChB,GAAG;GAGR,IAAM,IACJ,EAAgB,iBAAiB,EAAe,CAAC,EAAgB,iBAAiB,EAAe,CAAC,SAAS;AAkB7G,GAjBA,EAAS,iBAAiB,YAAY,MAAiB;IACrD,IAAM,IAAgB;AACtB,IAAI,EAAc,QAAQ,gBACxB,EAAc,gBAAgB,EAC9B,GAAW,OAAO;KAEpB,EAEF,GAAW,iBAAiB,YAAY,MAAiB;IACvD,IAAM,IAAgB;AACtB,IAAI,EAAc,QAAQ,cACxB,EAAc,gBAAgB,EAC9B,EAAS,OAAO;KAElB,EAGF,EAAgB,iBAAiB,YAAY,MAAiB;AAE5D,IAAI,EAAc,QAAQ,YACxB,EAAiB,SAAS,OAAO;KAEnC;;IAEH;EAAC;EAAU;EAAoB;EAAM;EAAqB;EAAY;EAAe,CAAC;CAGzF,IAAM,EAAC,gBAAY,EACjB;EACE;EACA;EACA,OAAO;EACP,kBAAkB;EAClB,MAAM;EACP,EACD,CAAC,EAAS,CACX,EAEK,EAAC,QAAQ,GAAc,SAAS,MAAiB,EAAS,QAAQ,EAAS,CAAC,QAG9E,GAAK,OACH,EAAsC,EAAM,IAAI,EAAM,SAAS,IACjE,EAAI,SAAS,EAAa,GAAO;EAC/B,KAAK;EACL,WAAW,EAAK,EAAM,MAAM,WAAW,EAAO,uBAAuB,MAAS,EAAS;EACvF,UAAU;EACV;EACA,IAAI,GAAG,EAAW;EAClB;EACA,OAAO;EACR,CAAC,GACO,EAAuC,EAAM,IAAI,EAAM,SAAS,MACzE,EAAI,UAAU,EAAa,GAAO;EAChC,KAAK;EACL,WAAW,EACT,EAAO,kBACP,KAAY,EAAO,8BACnB,KAAY,EAAO,yBAAyB,EAAS,eACrD,EAAO,qBAAqB,MAC5B,MAAS,kBAAkB,0BAC5B;EACD,OAAO;GACL,KAAK,GAAG,GAAU,OAAO,EAAE;GAC3B,MAAM,GAAG,GAAU,QAAQ,EAAE;GAC9B;EACD,IAAI,GAAG,EAAW;EAClB,UAAU,EAAS,IAAI,EAAM,MAAM,WAAU,MACvC,EAAwC,EAAK,GACxC,EAAa,GAAM;GACxB,SAAS;GACT,MAAM,MAAS,iBAAiB,SAAS;GAC1C,CAAC,GAEG,EACP;EACH,CAAC,GAEG,IACN,EAAE,CAAC;AAEN,QACE,kBAAC,GAAD;EAA0B;EAAM,cAAc;YAC5C,kBAAC,OAAD;GACE,IAAI;GACJ,WAAW,EAAK,EAAO,YAAY,KAAY,EAAO,wBAAwB;GAC9E,eAAa,KAAU,EAAQ;aAHjC,CAKG,GACA,IAAW,IAAgB,KACxB;;EACa,CAAA;EAG1B,EAeK,IAAmB,GAErB,EACE,OACA,SACA,OACA,aACA,cACA,eAAe,GACf,aACA,aACA,SACA,WAAQ,WACR,YACA,kBACA,YACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,oBAAgB,GAAsB,EACvC,IAAc,GACjB,MAA+C;AAG9C,EAFA,IAAU,EAAM,EAEX,EAAM,oBACT,KAAgB;IAGpB,CAAC,GAAS,EAAa,CACxB;AAED,KAAI,MAAU,gBAAgB;EAC5B,IAAM,IAAqB,KAAW;AAEtC,SACE,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,oBAAoB,EAAO,uBAAuB,MAAS,EAAU;aAAjG,CACE,kBAAC,GAAD;IACM;IACE;IACN,WAAW,EACT,EAAO,0CACP,EAAO,4BAA4B,MACnC,EAAO,4BAA4B,MACnC,KAAY,EAAO,qCACpB;IACD,SAAS;IACT,iBAAe;IACf,eAAa,KAAU,EAAQ;IACzB;IACS;IACN;IACT,GAAI;cAEJ,kBAAC,QAAD;KAAM,WAAW,EAAO;KAA6B;KAAgB,CAAA;IAC9D,CAAA,EACT,kBAAC,GAAD;IACO;IACD;IACJ,IAAG;IACH,WAAW,EAAO;IAClB,SAAS;IACT,iBAAc;IACd,cAAW;IACL;IACN,iBAAe,IAAW,SAAS;IACnC,SAAS;IACC;cAEV,kBAAC,GAAD,EAAiB,WAAW,EAAO,2CAA6C,CAAA;IACzE,CAAA,CACL;;;AAIV,QACE,kBAAC,GAAD;EACO;EACD;EACJ,WAAW,EAAK,EAAO,oBAAoB,EAAO,uBAAuB,MAAS,EAAU;EAC5F,iBAAc;EACd,iBAAe,IAAW,SAAS;EACzB;EACV,eAAa,KAAU,EAAQ;EACzB;EACG;EACM;EACf,gBAAgB,kBAAC,GAAD,EAAmB,CAAA;EACnC,SAAS;EACT,GAAI;YAEJ,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA6B;GAAgB,CAAA;EAC9D,CAAA;EAGd,EAqBK,IAAc;CAClB,MAAM;CACN,QAAQ;CACR,MAAM;CACP,EAEK,KAAkB,EACtB,OACA,aACA,cACA,aACA,YACA,aACA,SACA,UACA,YACA,cACA,eAAe,GACf,GAAG,QACyD;CAC5D,IAAM,EAAC,YAAQ,GAAsB,EAE/B,IAAc,GACjB,MAAuC;AAGtC,EAFA,IAAU,EAAE,EAEP,KACH,IAAU,OAAO,EAAM,CAAC;IAG5B;EAAC;EAAS;EAAO;EAAU;EAAQ,CACpC,EAEK,IAAgB,GACnB,MAA0C;AAGzC,EAFA,IAAY,EAAE,EAEV,CAAC,KAAY,EAAE,QAAQ,WACzB,IAAU,OAAO,EAAM,CAAC;IAG5B;EAAC;EAAS;EAAO;EAAU;EAAU,CACtC,EAEK,IAAU,SACP;EACL,WAAW,EACT,EAAO,kBACP,MAAS,YAAY,EAAO,oCAAoC,MAChE,KAAQ,EAAO,qBAAqB,MACpC,EACD;EACD,MAAM,EAAY,KAAQ;EAC1B,iBAAiB;EACjB,UAAU;EACV,cAAc;EACd,GAAG;EACJ,GACD;EAAC;EAAO;EAAM;EAAM;EAAW;EAAU;EAAM,CAChD,EAEK,IAAW,QAEb,kBAAA,GAAA,EAAA,UAAA;EACG,EAAM,eAAkD,EAAc,GACnE,EAAM,aAAa,GAAe;GAChC,OAAO,EAAc,MAAM,SAAS;GACpC,QAAQ,EAAc,MAAM,SAAS;GACtC,CAAC,GACF;EACH,MAAS,YACR,kBAAC,QAAD;GAAM,WAAW,EAAO;aACrB,KACC,kBAAC,GAAD;IACE,WAAW,EAAK,EAAO,0BAA0B,KAAY,EAAO,mCAAmC;IACvG,MAAM;IACN,CAAA;GAEC,CAAA;EAGT,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IACE,SAAS,IAAW,UAAU;IAC9B,MAAM,MAAS,WAAW,QAAQ;IAClC,WAAW,EAAK,KAAY,EAAO,sCAAsC;IAExE;IACI,CAAA;GACF,CAAA;EACN,EAAA,CAAA,EAEL;EAAC;EAAe;EAAU;EAAU;EAAU;EAAM;EAAK,CAC1D;AAsBD,QApBI,MAAO,MAEP,kBAAC,MAAD;EAEE,MAAK;EACL,GAAI;EAEK;EACE;YAEX,kBAAC,KAAD;GACE,WAAW,EAAK,EAAO,4BAA4B,KAAY,EAAO,8BAA8B;GACpG,MAAM,EAAM;aAEX;GACC,CAAA;EACD,CAAA,GAMP,kBAAC,MAAD;EAEE,MAAK;EACL,GAAI;EACJ,gBAAc,MAAS,SAAS,KAAA,IAAY,IAAW,SAAS;EAChE,SAAS;EACT,WAAW;YAEV;EACE,CAAA;GAcH,IAAoB,GACvB,EAAC,aAAU,cAAW,eAAe,GAAQ,aAAU,GAAG,KAAO,MAAQ;CACxE,IAAM,EAAC,WAAW,MAAoB,GAAU;AAIhD,QACE,kBAAC,GAAD;EAA0B,WAHV,GAAW,SAAS,0BAA0B,GAAG,UAAU;YAIzE,kBAAC,MAAD;GAAS;GAAK,WAAW,EAAK,EAAU;GAAE,MAAK;GAAO,eAAa,KAAU,EAAQ;GAAM,GAAI;GAC5F;GACE,CAAA;EACS,CAAA;EAGrB,EAMY,IAAa,OAAO,OAAO,GAAiB;CACvD,QAAQ;CACR,MAAM;CACN,SAAS;CACT;CACD,CAAC"}

package/esm/Hero/Hero.module-DjsgFkIQ.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Hero-module__Hero___It6gj{flex-direction:column;display:flex}.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-narrow-padding)}.Primer_Brand__Hero-module__Hero--align-start___ouSp3{text-align:left;align-items:flex-start}.Primer_Brand__Hero-module__Hero--align-center___6FMoH{text-align:center;place-items:center}.Primer_Brand__Hero-module__Hero-grid___gXNGW{--brand-Grid-spacing-margin:0}.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{width:100%;max-width:1280px;padding:var(--base-size-32);background-color:var(--brand-Hero-bgColor-gridlineGridInner);margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V,.Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq{--brand-Grid-spacing-row:var(--base-size-40)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{padding:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V{--brand-Grid-spacing-row:var(--base-size-80)}}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-actions___RUotq{justify-content:center}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-content___lpGj0{flex-direction:column;align-items:center;display:flex}.Primer_Brand__Hero-module__Hero-image___GC10l{border-radius:var(--brand-borderRadius-medium);width:100%}.Primer_Brand__Hero-module__Hero-image___GC10l>img{border-radius:inherit}.Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR{flex:1;width:100%;height:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-32);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{justify-content:center;width:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{background-color:var(--brand-color-canvas-subtle);align-items:stretch;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{min-height:calc(600px - var(--base-size-24))}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI{border-radius:var(--brand-borderRadius-medium)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{width:100%;max-width:1280px;margin-inline:auto}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{min-height:440px}}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh.Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-32);flex-direction:column;justify-content:center;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr:not(.Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk),.Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG{border-radius:0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk{align-self:center;max-width:100%;height:auto}.Primer_Brand__Hero-module__Hero-video___Ne5zN{width:100%}.Primer_Brand__Hero-module__Hero-media-item___Ia3pn{border-radius:var(--brand-borderRadius-large);width:100%}.Primer_Brand__Hero-module__Hero-label___XJftM{text-transform:uppercase;letter-spacing:1px;align-items:center;margin-block-end:calc(var(--base-size-16) - var(--base-size-2));display:flex}.Primer_Brand__Hero-module__Hero-heading___HMve3{max-width:924px;margin:0}.Primer_Brand__Hero-module__Hero-heading___HMve3 b{color:var(--brand-color-accent-primary);font-style:normal;font-weight:inherit}.Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY{max-width:none;max-width:initial}.Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi{height:100%}.Primer_Brand__Hero-module__Hero-description___7raSC{margin:var(--base-size-24) 0 0;max-width:600px}.Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:auto;padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:center;gap:var(--base-size-8) var(--base-size-16);flex-wrap:wrap;margin-block-start:var(--base-size-28);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:stretch;gap:var(--base-size-8) var(--base-size-12)}.Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-eyebrow___mlxSE{margin-block-end:var(--base-size-32)}@media screen and (width>=34rem){.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-regular-padding)}}.Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt{cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0;font-size:0;line-height:0;display:block;position:relative}.Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5{width:100%;height:auto;display:block}.Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p{width:var(--base-size-96);height:var(--base-size-96);z-index:1;color:var(--base-color-scale-white-0);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__Hero-module__Hero-video-poster-header___13M9x{padding:var(--base-size-16) var(--base-size-24);align-items:center;gap:var(--base-size-16);height:var(--base-size-80);background:linear-gradient(#000000b3 60%,#0000);display:flex;position:absolute;inset:0 0 auto}.Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff,.Primer_Brand__Hero-module__Hero-video-poster-text___4R755{color:var(--base-color-scale-white-0)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{--brand-Grid-spacing-row:0;gap:0;width:100%;max-width:1280px;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-36);padding-inline:var(--base-size-20);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-28);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);padding-inline:var(--base-size-20);padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{margin-block-start:var(--base-size-28)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-24)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-64);border-block-end:none;border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline-end:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-64);flex-direction:column;justify-content:flex-end;padding-inline-start:var(--base-size-64);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{margin-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-20)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-image___GC10l:not(.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}

package/esm/Hero/Hero.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Hero.module-DqG5f0MT.css';var e = {
+import './Hero.module-DjsgFkIQ.css';var e = {
 	Hero: "Primer_Brand__Hero-module__Hero___It6gj",
 	"Hero--variant-default": "Primer_Brand__Hero-module__Hero--variant-default___lNgHw",
 	"Hero--align-start": "Primer_Brand__Hero-module__Hero--align-start___ouSp3",

package/esm/Hero/Hero.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n display: flex;\n flex-direction: column;\n}\n\n.Hero--variant-default {\n padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Hero--align-center {\n justify-items: center;\n align-items: center;\n text-align: center;\n}\n\n.Hero-grid {\n --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32);\n background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed /\n}\n\n/ Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width. /\n@container (min-width: 1280px) {\n .Hero-grid--contained {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--contained {\n padding: var(--base-size-64);\n }\n\n .Hero-grid--block-end {\n --brand-Grid-spacing-row: var(--base-size-80);\n }\n}\n\n.Hero--align-center .Hero-actions {\n justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.Hero-image {\n border-radius: var(--brand-borderRadius-medium);\n width: 100%;\n}\n\n.Hero-mediaContainer {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-32);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n background-color: var(--brand-color-canvas-subtle);\n display: flex;\n align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-imageContainer--inline-bordered {\n min-height: calc(600px - var(--base-size-24));\n }\n\n .Hero-imageWrapper--bg-subtle {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Shared media styles for images and videos /\n.Hero--variant-gridline .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ Applied directly to video/iframe elements for block-end position /\n.Hero-media-item--block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ GridLine variant with inline (side-by-side) layout /\n.Hero-grid--bordered-inline {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--bordered-inline {\n min-height: 440px;\n }\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--bordered-inline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/ Text column styling for gridline inline positions /\n.Hero-contentColumn--bordered-inline {\n padding: var(--base-size-32);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-contentColumn--bordered-inline {\n padding: var(--base-size-64);\n }\n}\n\n/ Media styling for gridline inline positions /\n\n/ Edge-to-edge inline media (no padding) - remove border radius /\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n border-radius: 0;\n}\n\n/ Applied directly to video/iframe elements for inline position /\n.Hero-media-item--inline {\n border-radius: 0;\n}\n\n/ Padded inline media - constrain size and center /\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n max-width: 100%;\n height: auto;\n align-self: center;\n}\n\n/ Image column styling now handled by .Hero-imageContainer--inline-bordered /\n\n.Hero-video {\n width: 100%;\n}\n\n/ Base styles for video/iframe media elements /\n.Hero-media-item {\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-block-end: calc(var(--base-size-16) - var(--base-size-2));\n display: flex;\n align-items: center;\n}\n\n.Hero-heading {\n margin: 0;\n max-width: 924px;\n}\n\n.Hero-heading b {\n color: var(--brand-color-accent-primary);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n height: 100%;\n}\n\n.Hero-description {\n margin: var(--base-size-24) 0 0;\n max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n padding-block-start: var(--base-size-24);\n margin-block-start: auto;\n}\n\n.Hero-actions {\n margin-block-start: var(--base-size-28);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n align-items: stretch;\n gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n margin-block-end: var(--base-size-32);\n}\n\n/ Small breakpoint and up /\n@media screen and (min-width: 34rem) {\n .Hero--variant-default {\n padding: var(--brand-Hero-regular-padding);\n }\n}\n\n.Hero-video-poster-button {\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n display: block;\n height: 100%;\n position: relative;\n line-height: 0;\n font-size: 0;\n width: 100%;\n}\n\n.Hero-video-poster-image {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.Hero-video-poster-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--base-size-96);\n height: var(--base-size-96);\n z-index: 1;\n color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n position: absolute;\n inset: 0 0 auto;\n padding: var(--base-size-16) var(--base-size-24);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n color: var(--base-color-scale-white-0);\n}\n\n/ ========================================\n Gridline-Expressive Variant\n ======================================== /\n\n.Hero--variant-gridline-expressive {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Grid container for expressive variant /\n.Hero-grid--expressive {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n gap: 0;\n --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--expressive {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Header column (eyebrow, heading) /\n.Hero-expressive-header-column {\n padding: var(--base-size-36);\n padding-inline: var(--base-size-20);\n padding-block-end: var(--base-size-28);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: flex;\n align-items: center;\n}\n\n/ Body column (description, actions, trailing) /\n.Hero-expressive-body-column {\n padding: var(--base-size-32);\n padding-inline: var(--base-size-20);\n padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-28);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-24);\n}\n\n/ Desktop: Side-by-side layout with vertical divider /\n@media screen and (min-width: 63.25rem) {\n .Hero-expressive-header-column {\n padding: var(--base-size-64);\n padding-inline-end: var(--base-size-64);\n border-block-end: none;\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .Hero-expressive-body-column {\n padding: var(--base-size-64);\n padding-inline-start: var(--base-size-64);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n .Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-24);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-20);\n }\n}\n\n/ Media wrapper styles for gridline-expressive (same as gridline) /\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n display: flex;\n flex-direction: column;\n}\n\n.Hero--variant-default {\n padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Hero--align-center {\n justify-items: center;\n align-items: center;\n text-align: center;\n}\n\n.Hero-grid {\n --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32);\n background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed /\n}\n\n/ Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width. /\n@container (min-width: 1280px) {\n .Hero-grid--contained {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--contained {\n padding: var(--base-size-64);\n }\n\n .Hero-grid--block-end {\n --brand-Grid-spacing-row: var(--base-size-80);\n }\n}\n\n.Hero--align-center .Hero-actions {\n justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.Hero-image {\n border-radius: var(--brand-borderRadius-medium);\n width: 100%;\n}\n\n.Hero-image > img {\n border-radius: inherit;\n}\n\n.Hero-mediaContainer {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-32);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n background-color: var(--brand-color-canvas-subtle);\n display: flex;\n align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-imageContainer--inline-bordered {\n min-height: calc(600px - var(--base-size-24));\n }\n\n .Hero-imageWrapper--bg-subtle {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Shared media styles for images and videos /\n.Hero--variant-gridline .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ Applied directly to video/iframe elements for block-end position /\n.Hero-media-item--block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ GridLine variant with inline (side-by-side) layout /\n.Hero-grid--bordered-inline {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--bordered-inline {\n min-height: 440px;\n }\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--bordered-inline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/ Text column styling for gridline inline positions /\n.Hero-contentColumn--bordered-inline {\n padding: var(--base-size-32);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-contentColumn--bordered-inline {\n padding: var(--base-size-64);\n }\n}\n\n/ Media styling for gridline inline positions /\n\n/ Edge-to-edge inline media (no padding) - remove border radius /\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n border-radius: 0;\n}\n\n/ Applied directly to video/iframe elements for inline position /\n.Hero-media-item--inline {\n border-radius: 0;\n}\n\n/ Padded inline media - constrain size and center /\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n max-width: 100%;\n height: auto;\n align-self: center;\n}\n\n/ Image column styling now handled by .Hero-imageContainer--inline-bordered /\n\n.Hero-video {\n width: 100%;\n}\n\n/ Base styles for video/iframe media elements /\n.Hero-media-item {\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-block-end: calc(var(--base-size-16) - var(--base-size-2));\n display: flex;\n align-items: center;\n}\n\n.Hero-heading {\n margin: 0;\n max-width: 924px;\n}\n\n.Hero-heading b {\n color: var(--brand-color-accent-primary);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n height: 100%;\n}\n\n.Hero-description {\n margin: var(--base-size-24) 0 0;\n max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n padding-block-start: var(--base-size-24);\n margin-block-start: auto;\n}\n\n.Hero-actions {\n margin-block-start: var(--base-size-28);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n align-items: stretch;\n gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n margin-block-end: var(--base-size-32);\n}\n\n/ Small breakpoint and up /\n@media screen and (min-width: 34rem) {\n .Hero--variant-default {\n padding: var(--brand-Hero-regular-padding);\n }\n}\n\n.Hero-video-poster-button {\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n display: block;\n height: 100%;\n position: relative;\n line-height: 0;\n font-size: 0;\n width: 100%;\n}\n\n.Hero-video-poster-image {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.Hero-video-poster-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--base-size-96);\n height: var(--base-size-96);\n z-index: 1;\n color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n position: absolute;\n inset: 0 0 auto;\n padding: var(--base-size-16) var(--base-size-24);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n color: var(--base-color-scale-white-0);\n}\n\n/ ========================================\n Gridline-Expressive Variant\n ======================================== /\n\n.Hero--variant-gridline-expressive {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Grid container for expressive variant /\n.Hero-grid--expressive {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n gap: 0;\n --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--expressive {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Header column (eyebrow, heading) /\n.Hero-expressive-header-column {\n padding: var(--base-size-36);\n padding-inline: var(--base-size-20);\n padding-block-end: var(--base-size-28);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: flex;\n align-items: center;\n}\n\n/ Body column (description, actions, trailing) /\n.Hero-expressive-body-column {\n padding: var(--base-size-32);\n padding-inline: var(--base-size-20);\n padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-28);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-24);\n}\n\n/ Desktop: Side-by-side layout with vertical divider /\n@media screen and (min-width: 63.25rem) {\n .Hero-expressive-header-column {\n padding: var(--base-size-64);\n padding-inline-end: var(--base-size-64);\n border-block-end: none;\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .Hero-expressive-body-column {\n padding: var(--base-size-64);\n padding-inline-start: var(--base-size-64);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n .Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-24);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-20);\n }\n}\n\n/ Media wrapper styles for gridline-expressive (same as gridline) /\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}

package/esm/NavList/NavList.module-zvpwnkzz.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__NavList-module__NavList___tuR_C{--brand-NavList-label-indent-level-2:0px;--brand-NavList-label-indent-level-3:var(--base-size-16);--brand-NavList-label-indent-level-4:var(--base-size-32);--brand-NavList-label-indent-level-5:var(--base-size-48);--brand-NavList-item-paddingInlineStart-base:var(--base-size-24);--brand-NavList-control-paddingInlineStart:var(--base-size-8);--brand-NavList-label-paddingInlineStart:var(--base-size-6);box-sizing:border-box;font-family:var(--brand-fontStack-sansSerif);color:var(--brand-color-text-default);width:100%;padding-inline-start:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__list___gwquf,.Primer_Brand__NavList-module__NavList__subNav___Q4xI7,.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{margin:0;padding:0;list-style:none}.Primer_Brand__NavList-module__NavList__list___gwquf{flex-direction:column;gap:0;display:flex}.Primer_Brand__NavList-module__NavList__list--flat___xvRQl,.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{--brand-NavList-item-paddingInlineStart-base:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__groupList___Mtk4a .Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ{--brand-NavList-item-paddingInlineStart-base:0px;--brand-NavList-label-paddingInlineStart:var(--base-size-8)}.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__group___Jnwkd{position:relative}.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__item___HTVCC+.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__item___HTVCC+.Primer_Brand__NavList-module__NavList__group___Jnwkd,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__group___Jnwkd+.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__group___Jnwkd+.Primer_Brand__NavList-module__NavList__group___Jnwkd{background-image:repeating-linear-gradient(to right, var(--brand-color-border-muted) 0 var(--base-size-2), transparent var(--base-size-2) var(--base-size-4));background-repeat:no-repeat;background-size:100% var(--brand-borderWidth-thin);background-position:0 0}.Primer_Brand__NavList-module__NavList__groupTitle___r47_e{padding:var(--base-size-24) var(--base-size-16) var(--base-size-16);color:var(--brand-color-text-default);font-size:var(--brand-text-size-200);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200);margin:0}.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{flex-direction:column;gap:0;padding-block-end:var(--base-size-16);display:flex}.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{align-items:center;gap:var(--base-size-8);min-width:0;display:flex}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-block:calc(var(--base-size-8) + var(--base-size-2));padding-inline-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-2)}.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-3)}.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-4)}.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-5)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{min-height:var(--base-size-32);padding-block:0;padding-inline-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:calc(var(--brand-NavList-item-paddingInlineStart-base) + var(--brand-NavList-item-label-indent))}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{padding-inline-start:var(--brand-NavList-control-paddingInlineStart)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{padding-inline-start:var(--brand-NavList-label-paddingInlineStart)}.Primer_Brand__NavList-module__NavList__link___k0zio{align-items:center;gap:var(--base-size-8);border-radius:var(--brand-borderRadius-medium);min-width:0;color:var(--brand-color-text-muted);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default), color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);flex:auto;padding:0;display:flex;position:relative;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{box-sizing:border-box;width:100%;color:var(--brand-color-text-muted);cursor:pointer;text-align:start;background:0 0;border:0;font-family:inherit;position:relative}.Primer_Brand__NavList-module__NavList__link___k0zio:hover{color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:hover{color:var(--brand-color-text-default);background-color:#0000}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{min-height:var(--base-size-32);order:2}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):hover .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled){color:var(--brand-color-text-default)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled) .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__link___k0zio:focus-visible,.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__link___k0zio:focus-visible,.Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:focus-visible{outline-offset:calc(-1 * var(--base-size-2))}.Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]):before{content:"";inset-block:var(--base-size-8);width:var(--base-size-4);border-radius:var(--base-size-2);background-color:var(--brand-NavList-activeIndicator-color);position:absolute;inset-inline-start:0}.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled):before{content:"";block-size:var(--base-size-16);width:var(--base-size-4);border-radius:var(--base-size-2);background-color:var(--brand-NavList-activeIndicator-color);z-index:1;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:before{inset-inline-start:calc(-1 * var(--base-size-8))}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:before{inset-inline-start:var(--base-size-4)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]{padding-inline-start:var(--base-size-12)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false] .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{padding-inline-start:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){padding-inline-start:0}.Primer_Brand__NavList-module__NavList__link--disabled___Eg304{color:var(--brand-color-text-disabled);pointer-events:none}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:disabled{color:var(--brand-color-text-disabled);cursor:not-allowed}.Primer_Brand__NavList-module__NavList__label___ogBmt{word-break:break-word;min-width:0}.Primer_Brand__NavList-module__NavList__labelArea___c4ORu{align-items:center;gap:var(--base-size-8);border-radius:var(--brand-borderRadius-small);flex:auto;min-width:0;display:flex}.Primer_Brand__NavList-module__NavList__leadingVisual___KqRaq,.Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI{color:inherit;flex:none;display:inline-flex}.Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI{margin-inline-start:auto;margin-inline-end:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);flex:none}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform:rotate(-180deg)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7{opacity:0;max-height:0;transform:translateY(calc(-1 * var(--base-size-8)));visibility:hidden;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear var(--brand-animation-duration-fast);flex-direction:column;gap:0;margin:0;padding:0;display:flex;overflow:hidden}.Primer_Brand__NavList-module__NavList__subNav--expanded___ap3X8{max-height:none;max-height:var(--brand-NavList-subNav-height,none);opacity:1;visibility:visible;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear 0s;transform:translateY(0)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7[aria-hidden=true] .Primer_Brand__NavList-module__NavList__subNav___Q4xI7{visibility:hidden}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding:var(--base-size-24) var(--base-size-16) var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--expanded___pH_PL{padding-block-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-200);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-200);order:1}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{color:var(--brand-color-text-default);min-height:var(--base-size-32);margin-block:calc(-1 * var(--base-size-8));border-radius:var(--brand-borderRadius-small);padding-inline-start:0;padding-inline-end:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc>*{z-index:1;position:relative}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):hover:after,.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):active:after,.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled):after{content:"";z-index:0;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);pointer-events:none;position:absolute;inset-block:0;inset-inline:0}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{order:2;margin-inline-start:auto}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{order:1}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{min-height:var(--base-size-32);margin-block:calc(-1 * var(--base-size-8));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{position:absolute;inset-block-start:50%;inset-inline-start:calc(-1 * var(--brand-NavList-control-paddingInlineStart));transform:translateY(-50%)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform:translateY(-50%)rotate(-180deg)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{inset-inline-start:calc(-1 * var(--base-size-16))}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);order:2}.Primer_Brand__NavList-module__NavList__list--flat___xvRQl>.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{min-height:var(--base-size-32);border-radius:var(--brand-borderRadius-small)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{min-height:calc(var(--base-size-32) - var(--brand-borderWidth-thin));margin-block-end:var(--brand-borderWidth-thin)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){background-color:#0000}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio:hover .Primer_Brand__NavList-module__NavList__labelArea___c4ORu,.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]) .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio:hover{background-color:#0000}[data-color-mode=dark] .Primer_Brand__NavList-module__NavList___tuR_C{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-reduced-motion:reduce){.Primer_Brand__NavList-module__NavList___tuR_C,.Primer_Brand__NavList-module__NavList___tuR_C:before,.Primer_Brand__NavList-module__NavList___tuR_C:after,.Primer_Brand__NavList-module__NavList___tuR_C *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/NavList/NavList.module.js CHANGED Viewed

@@ -1,30 +1,30 @@
-import './NavList.module-CZFnt8br.css';var e = {
+import './NavList.module-zvpwnkzz.css';var e = {
 	NavList: "Primer_Brand__NavList-module__NavList___tuR_C",
 	NavList__list: "Primer_Brand__NavList-module__NavList__list___gwquf",
 	NavList__subNav: "Primer_Brand__NavList-module__NavList__subNav___Q4xI7",
 	NavList__groupList: "Primer_Brand__NavList-module__NavList__groupList___Mtk4a",
 	"NavList__list--flat": "Primer_Brand__NavList-module__NavList__list--flat___xvRQl",
+	"NavList__item--leaf": "Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ",
 	NavList__item: "Primer_Brand__NavList-module__NavList__item___HTVCC",
 	NavList__group: "Primer_Brand__NavList-module__NavList__group___Jnwkd",
 	NavList__groupTitle: "Primer_Brand__NavList-module__NavList__groupTitle___r47_e",
 	NavList__itemContent: "Primer_Brand__NavList-module__NavList__itemContent___bYaVR",
+	"NavList__item--level-2": "Primer_Brand__NavList-module__NavList__item--level-2___kXyLx",
+	"NavList__item--level-3": "Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ",
+	"NavList__item--level-4": "Primer_Brand__NavList-module__NavList__item--level-4___k3h0P",
+	"NavList__item--level-5": "Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N",
+	"NavList__item--level-1": "Primer_Brand__NavList-module__NavList__item--level-1___gWx1n",
 	NavList__link: "Primer_Brand__NavList-module__NavList__link___k0zio",
 	NavList__accordionButton: "Primer_Brand__NavList-module__NavList__accordionButton___F5tOc",
-	"NavList__item--level-1": "Primer_Brand__NavList-module__NavList__item--level-1___gWx1n",
 	NavList__labelArea: "Primer_Brand__NavList-module__NavList__labelArea___c4ORu",
 	"NavList__item--has-current-descendant": "Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ",
-	"NavList__item--leaf": "Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ",
 	"NavList__link--disabled": "Primer_Brand__NavList-module__NavList__link--disabled___Eg304",
 	NavList__label: "Primer_Brand__NavList-module__NavList__label___ogBmt",
 	NavList__leadingVisual: "Primer_Brand__NavList-module__NavList__leadingVisual___KqRaq",
 	NavList__trailingVisual: "Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI",
 	NavList__toggleIcon: "Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF",
 	"NavList__subNav--expanded": "Primer_Brand__NavList-module__NavList__subNav--expanded___ap3X8",
-	"NavList__item--expanded": "Primer_Brand__NavList-module__NavList__item--expanded___pH_PL",
-	"NavList__item--level-2": "Primer_Brand__NavList-module__NavList__item--level-2___kXyLx",
-	"NavList__item--level-3": "Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ",
-	"NavList__item--level-4": "Primer_Brand__NavList-module__NavList__item--level-4___k3h0P",
-	"NavList__item--level-5": "Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N"
+	"NavList__item--expanded": "Primer_Brand__NavList-module__NavList__item--expanded___pH_PL"
 };
 //#endregion
 export { e as default };