@primer/react 38.1.0-rc.ee8ca60b6 → 38.1.0-rc.f826eb31c

package/CHANGELOG.md

@@ -4,12 +4,20 @@
 
 ### Minor Changes
 
+- [#7065](https://github.com/primer/react/pull/7065) [`9090053`](https://github.com/primer/react/commit/90900532e7566da2d12ff74685678463d5c7f247) Thanks [@TylerJDev](https://github.com/TylerJDev)! - ActionBar: Add `ActionBar.Menu` subcomponent
+
 - [#7056](https://github.com/primer/react/pull/7056) [`6ff2797`](https://github.com/primer/react/commit/6ff2797662bf7ab8cf8575d13ad061923bf0d9c1) Thanks [@adierkens](https://github.com/adierkens)! - Update active indicators for ActionList & FilteredActionList to follow content height
 
 - [#7063](https://github.com/primer/react/pull/7063) [`247c66a`](https://github.com/primer/react/commit/247c66a3c297afba73c6e9e3842cc15ff8a845c1) Thanks [@francinelucca](https://github.com/francinelucca)! - Feat: popover implement click outside
 
+- [#7123](https://github.com/primer/react/pull/7123) [`01b16db`](https://github.com/primer/react/commit/01b16dbe6bf7984bcd282ba5d640d2f6b19b887f) Thanks [@adierkens](https://github.com/adierkens)! - Adds an experimental `Tabs` utility component & associated hooks
+
 - [#7109](https://github.com/primer/react/pull/7109) [`34e7108`](https://github.com/primer/react/commit/34e71089ea7668d7b0ab4572f125d13b998e8754) Thanks [@adierkens](https://github.com/adierkens)! - Add support to ActionList for 'tablist' and 'tab' roles
 
+- [#7112](https://github.com/primer/react/pull/7112) [`7160709`](https://github.com/primer/react/commit/71607096f1ed60455313d3e1e26ce803f985307c) Thanks [@hectahertz](https://github.com/hectahertz)! - PageHeader: Remove useResponsiveValue hook from TitleArea variant prop
+
+  Migrates PageHeader.TitleArea's `variant` prop to use `getResponsiveAttributes` following ADR-018 for SSR-safe responsive values. This prevents layout shift during hydration when using responsive variants.
+
 ### Patch Changes
 
 - [#7114](https://github.com/primer/react/pull/7114) [`15a13c6`](https://github.com/primer/react/commit/15a13c64917676d47e4ce899ce1f96939cc754d6) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - ActionList: Fix trailing action button to take full height.
@@ -18,8 +26,12 @@
 
 - [#7060](https://github.com/primer/react/pull/7060) [`3468793`](https://github.com/primer/react/commit/3468793e15269d6d9f226ee7844921e44bfc4622) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore(Dialog): allow direct children
 
+- [#7115](https://github.com/primer/react/pull/7115) [`21cefb9`](https://github.com/primer/react/commit/21cefb96c1ed7d00d6b16f29ea5d358c6502d160) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionBar: IconButton no longer adds it's own `data-testid`
+
 - [#7061](https://github.com/primer/react/pull/7061) [`e58e102`](https://github.com/primer/react/commit/e58e1027d7f3cdae5223c08d83f7b86918db370b) Thanks [@francinelucca](https://github.com/francinelucca)! - PageLayout: update wrapper dimensions to match PageLayout's root element
 
+- [#7130](https://github.com/primer/react/pull/7130) [`57ffdbc`](https://github.com/primer/react/commit/57ffdbce7fa2bedd762b7e4d6dcea1d916e0da9c) Thanks [@joshblack](https://github.com/joshblack)! - Update the `AnchoredOverlay` component so that the `ref` value is not overridden when spreading props
+
 - [#7097](https://github.com/primer/react/pull/7097) [`12fad7a`](https://github.com/primer/react/commit/12fad7af4d9d31898dfff5d3419987100b398d9e) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: fix UnderlineWrapper html structure
 
 - [#7101](https://github.com/primer/react/pull/7101) [`9382e52`](https://github.com/primer/react/commit/9382e529a8a4a0204ce0c412a0c8840cfbfe9f2c) Thanks [@hectahertz](https://github.com/hectahertz)! - Remove use of useResponsiveValue hook - PageLayout

package/dist/ActionBar/ActionBar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ActionListItemProps } from '../ActionList';
 import type { IconButtonProps } from '../Button';
 type Size = 'small' | 'medium' | 'large';
 type A11yProps = {
@@ -37,11 +38,80 @@ export type ActionBarProps = {
 export type ActionBarIconButtonProps = {
     disabled?: boolean;
 } & IconButtonProps;
+export type ActionBarMenuItemProps = ({
+    /**
+     * Type of menu item to be rendered in the menu (action | group).
+     * Defaults to 'action' if not specified.
+     */
+    type?: 'action';
+    /**
+     * Whether the menu item is disabled.
+     * All interactions will be prevented if true.
+     */
+    disabled?: boolean;
+    /**
+     * Leading visual rendered for the menu item.
+     */
+    leadingVisual?: ActionBarIconButtonProps['icon'];
+    /**
+     * Trailing visual rendered for the menu item.
+     */
+    trailingVisual?: ActionBarIconButtonProps['icon'] | string;
+    /**
+     * Label for the menu item.
+     */
+    label: string;
+    /**
+     * Callback fired when the menu item is selected.
+     */
+    onClick?: ActionListItemProps['onSelect'];
+    /**
+     * Nested menu items to render within a submenu.
+     * If provided, the menu item will render a submenu.
+     */
+    items?: ActionBarMenuItemProps[];
+} & Pick<ActionListItemProps, 'variant'>) | {
+    type: 'divider';
+};
+export type ActionBarMenuProps = {
+    /** Accessible label for the menu button */
+    'aria-label': string;
+    /** Icon for the menu button */
+    icon: ActionBarIconButtonProps['icon'];
+    items: ActionBarMenuItemProps[];
+    /**
+     * Icon displayed when the menu item is overflowing.
+     * If 'none' is provided, no icon will be shown in the overflow menu.
+     */
+    overflowIcon?: ActionBarIconButtonProps['icon'] | 'none';
+} & IconButtonProps;
 export declare const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>>;
 export declare const ActionBarIconButton: React.ForwardRefExoticComponent<ActionBarIconButtonProps & React.RefAttributes<unknown>>;
 export declare const ActionBarGroup: React.ForwardRefExoticComponent<{
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<unknown>>;
+export declare const ActionBarMenu: React.ForwardRefExoticComponent<{
+    /** Accessible label for the menu button */
+    'aria-label': string;
+    /** Icon for the menu button */
+    icon: ActionBarIconButtonProps["icon"];
+    items: ActionBarMenuItemProps[];
+    /**
+     * Icon displayed when the menu item is overflowing.
+     * If 'none' is provided, no icon will be shown in the overflow menu.
+     */
+    overflowIcon?: ActionBarIconButtonProps["icon"] | "none";
+} & {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+} & {
+    icon: React.ElementType;
+    unsafeDisableTooltip?: boolean;
+    description?: string;
+    tooltipDirection?: import("../TooltipV2").TooltipDirection;
+    keyshortcuts?: string;
+    keybindingHint?: string;
+} & Omit<import("..").ButtonBaseProps, "aria-label" | "aria-labelledby"> & React.RefAttributes<unknown>>;
 export declare const VerticalDivider: () => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=ActionBar.d.ts.map

package/dist/ActionBar/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAS7E,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AA8C9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IACE,wDAAwD;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IAChD,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,GACD;IACE,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC3D,CAAA;AAEL,KAAK,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B;;;SAGK;IACL,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AA+E7E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAyLvE,CAAA;AAED,eAAO,MAAM,mBAAmB,0FAsD/B,CAAA;AAMD,eAAO,MAAM,cAAc;;iCA6BzB,CAAA;AAEF,eAAO,MAAM,eAAe,gCAoB3B,CAAA"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAE7E,OAAO,EAAa,KAAK,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAOlE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAoD9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IACE,wDAAwD;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IAChD,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,GACD;IACE,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC3D,CAAA;AAEL,KAAK,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B;;;SAGK;IACL,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AAE7E,MAAM,MAAM,sBAAsB,GAC9B,CAAC;IACC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IAChD;;OAEG;IACH,cAAc,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAA;CACjC,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,GACzC;IACE,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAEL,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAA;IACpB,+BAA+B;IAC/B,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IACtC,KAAK,EAAE,sBAAsB,EAAE,CAAA;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CACzD,GAAG,eAAe,CAAA;AAgInB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAgNvE,CAAA;AAED,eAAO,MAAM,mBAAmB,0FAqD/B,CAAA;AAMD,eAAO,MAAM,cAAc;;iCA6BzB,CAAA;AAEF,eAAO,MAAM,aAAa;IAtbxB,2CAA2C;kBAC7B,MAAM;IACpB,+BAA+B;UACzB,wBAAwB,CAAC,MAAM,CAAC;WAC/B,sBAAsB,EAAE;IAC/B;;;OAGG;mBACY,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM;;;;;;;;;;;wGAydzD,CAAA;AAED,eAAO,MAAM,eAAe,gCAoB3B,CAAA"}

package/dist/ActionBar/ActionBar.js

@@ -50,6 +50,54 @@ const calculatePossibleItems = (registryEntries, navWidth, gap, moreMenuWidth =
   }
   return breakpoint;
 };
+const renderMenuItem = (item, index) => {
+  if (item.type === 'divider') {
+    return /*#__PURE__*/jsx(ActionList.Divider, {}, index);
+  }
+  const {
+    label,
+    onClick,
+    disabled,
+    trailingVisual: TrailingIcon,
+    leadingVisual: LeadingIcon,
+    items,
+    variant
+  } = item;
+  if (items && items.length > 0) {
+    return /*#__PURE__*/jsxs(ActionMenu, {
+      children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
+        children: /*#__PURE__*/jsxs(ActionList.Item, {
+          disabled: disabled,
+          variant: variant,
+          children: [LeadingIcon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
+            children: /*#__PURE__*/jsx(LeadingIcon, {})
+          }) : null, label, TrailingIcon ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+            children: typeof TrailingIcon === 'string' ? /*#__PURE__*/jsx("span", {
+              children: TrailingIcon
+            }) : /*#__PURE__*/jsx(TrailingIcon, {})
+          }) : null]
+        })
+      }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+        children: /*#__PURE__*/jsx(ActionList, {
+          children: items.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))
+        })
+      })]
+    }, label);
+  }
+  return /*#__PURE__*/jsxs(ActionList.Item, {
+    onSelect: onClick,
+    disabled: disabled,
+    variant: variant,
+    children: [LeadingIcon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
+      children: /*#__PURE__*/jsx(LeadingIcon, {})
+    }) : null, label, TrailingIcon ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+      children: typeof TrailingIcon === 'string' ? /*#__PURE__*/jsx("span", {
+        children: TrailingIcon
+      }) : /*#__PURE__*/jsx(TrailingIcon, {})
+    }) : null]
+  }, label);
+};
+renderMenuItem.displayName = "renderMenuItem";
 const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap) => {
   const registryEntries = Array.from(childRegistry).filter(entry => entry[1] !== null && (entry[1].type !== 'action' || entry[1].groupId === undefined));
   if (registryEntries.length === 0) return new Set();
@@ -321,6 +369,26 @@ const ActionBar = props => {
                 }, label);
               }
             }
+            if (menuItem.type === "menu") {
+              const menuItems = menuItem.items;
+              const {
+                icon: Icon_0,
+                label: label_0
+              } = menuItem;
+              return /*#__PURE__*/jsxs(ActionMenu, {
+                children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
+                  children: /*#__PURE__*/jsxs(ActionList.Item, {
+                    children: [Icon_0 !== "none" ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
+                      children: /*#__PURE__*/jsx(Icon_0, {})
+                    }) : null, label_0]
+                  })
+                }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+                  children: /*#__PURE__*/jsx(ActionList, {
+                    children: menuItems.map(_temp3)
+                  })
+                })]
+              }, id_2);
+            }
             const groupedMenuItems = groupedItems.get(id_2) || [];
             if (menuItem.type === "group") {
               return /*#__PURE__*/jsx(React.Fragment, {
@@ -329,8 +397,8 @@ const ActionBar = props => {
                   if (childProps_1.type === "action") {
                     const {
                       onClick: onClick_0,
-                      icon: Icon_0,
-                      label: label_0,
+                      icon: Icon_1,
+                      label: label_1,
                       disabled: disabled_0
                     } = childProps_1;
                     return /*#__PURE__*/jsxs(ActionList.Item, {
@@ -341,8 +409,8 @@ const ActionBar = props => {
                       },
                       disabled: disabled_0,
                       children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
-                        children: /*#__PURE__*/jsx(Icon_0, {})
-                      }), label_0]
+                        children: /*#__PURE__*/jsx(Icon_1, {})
+                      }), label_1]
                     }, key_0);
                   }
                   return null;
@@ -411,7 +479,7 @@ const ActionBar = props => {
   return t20;
 };
 const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(28);
+  const $ = c(27);
   let disabled;
   let onClick;
   let props;
@@ -513,24 +581,22 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     return null;
   }
   let t5;
-  if ($[22] !== clickHandler || $[23] !== disabled || $[24] !== id || $[25] !== props || $[26] !== size) {
+  if ($[22] !== clickHandler || $[23] !== disabled || $[24] !== props || $[25] !== size) {
     t5 = /*#__PURE__*/jsx(IconButton, {
       "aria-disabled": disabled,
       ref: ref,
       size: size,
       onClick: clickHandler,
       ...props,
-      variant: "invisible",
-      "data-testid": id
+      variant: "invisible"
     });
     $[22] = clickHandler;
     $[23] = disabled;
-    $[24] = id;
-    $[25] = props;
-    $[26] = size;
-    $[27] = t5;
+    $[24] = props;
+    $[25] = size;
+    $[26] = t5;
   } else {
-    t5 = $[27];
+    t5 = $[26];
   }
   return t5;
 });
@@ -624,6 +690,150 @@ const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   }
   return t5;
 });
+const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
+  const $ = c(35);
+  let ariaLabel;
+  let icon;
+  let items;
+  let overflowIcon;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      "aria-label": ariaLabel,
+      icon,
+      overflowIcon,
+      items,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = ariaLabel;
+    $[2] = icon;
+    $[3] = items;
+    $[4] = overflowIcon;
+    $[5] = props;
+  } else {
+    ariaLabel = $[1];
+    icon = $[2];
+    items = $[3];
+    overflowIcon = $[4];
+    props = $[5];
+  }
+  const backupRef = useRef(null);
+  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+  const id = useId();
+  const {
+    registerChild,
+    unregisterChild,
+    isVisibleChild
+  } = React.useContext(ActionBarContext);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const widthRef = useRef();
+  let t1;
+  if ($[6] !== ariaLabel || $[7] !== icon || $[8] !== id || $[9] !== items || $[10] !== overflowIcon || $[11] !== ref || $[12] !== registerChild || $[13] !== unregisterChild) {
+    t1 = () => {
+      var _ref$current3;
+      const width = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.getBoundingClientRect().width;
+      if (width) {
+        widthRef.current = width;
+      }
+      if (!widthRef.current) {
+        return;
+      }
+      registerChild(id, {
+        type: "menu",
+        width: widthRef.current,
+        label: ariaLabel,
+        icon: overflowIcon ? overflowIcon : icon,
+        items
+      });
+      return () => {
+        unregisterChild(id);
+      };
+    };
+    $[6] = ariaLabel;
+    $[7] = icon;
+    $[8] = id;
+    $[9] = items;
+    $[10] = overflowIcon;
+    $[11] = ref;
+    $[12] = registerChild;
+    $[13] = unregisterChild;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  let t2;
+  if ($[15] !== ariaLabel || $[16] !== icon || $[17] !== items || $[18] !== overflowIcon || $[19] !== registerChild || $[20] !== unregisterChild) {
+    t2 = [registerChild, unregisterChild, ariaLabel, overflowIcon, icon, items];
+    $[15] = ariaLabel;
+    $[16] = icon;
+    $[17] = items;
+    $[18] = overflowIcon;
+    $[19] = registerChild;
+    $[20] = unregisterChild;
+    $[21] = t2;
+  } else {
+    t2 = $[21];
+  }
+  useIsomorphicLayoutEffect(t1, t2);
+  if (!isVisibleChild(id)) {
+    return null;
+  }
+  let t3;
+  if ($[22] !== ariaLabel || $[23] !== icon || $[24] !== props) {
+    t3 = /*#__PURE__*/jsx(ActionMenu.Anchor, {
+      children: /*#__PURE__*/jsx(IconButton, {
+        variant: "invisible",
+        "aria-label": ariaLabel,
+        icon: icon,
+        ...props
+      })
+    });
+    $[22] = ariaLabel;
+    $[23] = icon;
+    $[24] = props;
+    $[25] = t3;
+  } else {
+    t3 = $[25];
+  }
+  let t4;
+  if ($[26] !== items) {
+    t4 = items.map(_temp4);
+    $[26] = items;
+    $[27] = t4;
+  } else {
+    t4 = $[27];
+  }
+  let t5;
+  if ($[28] !== t4) {
+    t5 = /*#__PURE__*/jsx(ActionMenu.Overlay, {
+      children: /*#__PURE__*/jsx(ActionList, {
+        children: t4
+      })
+    });
+    $[28] = t4;
+    $[29] = t5;
+  } else {
+    t5 = $[29];
+  }
+  let t6;
+  if ($[30] !== menuOpen || $[31] !== ref || $[32] !== t3 || $[33] !== t5) {
+    t6 = /*#__PURE__*/jsxs(ActionMenu, {
+      anchorRef: ref,
+      open: menuOpen,
+      onOpenChange: setMenuOpen,
+      children: [t3, t5]
+    });
+    $[30] = menuOpen;
+    $[31] = ref;
+    $[32] = t3;
+    $[33] = t5;
+    $[34] = t6;
+  } else {
+    t6 = $[34];
+  }
+  return t6;
+});
 const VerticalDivider = () => {
   const $ = c(8);
   const ref = useRef(null);
@@ -637,8 +847,8 @@ const VerticalDivider = () => {
   let t0;
   if ($[0] !== id || $[1] !== registerChild || $[2] !== unregisterChild) {
     t0 = () => {
-      var _ref$current3;
-      const width = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.getBoundingClientRect().width;
+      var _ref$current4;
+      const width = (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.getBoundingClientRect().width;
       if (width) {
         widthRef.current = width;
       }
@@ -691,5 +901,11 @@ function _temp() {
 function _temp2() {
   return new Set();
 }
+function _temp3(item, index) {
+  return renderMenuItem(item, index);
+}
+function _temp4(item, index) {
+  return renderMenuItem(item, index);
+}
 
-export { ActionBar, ActionBarGroup, ActionBarIconButton, VerticalDivider };
+export { ActionBar, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };

package/dist/ActionBar/index.d.ts

@@ -1,10 +1,26 @@
-export type { ActionBarProps } from './ActionBar';
+export type { ActionBarProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
 declare const ActionBar: import("react").FC<import("react").PropsWithChildren<import("./ActionBar").ActionBarProps>> & {
     IconButton: import("react").ForwardRefExoticComponent<import("./ActionBar").ActionBarIconButtonProps & import("react").RefAttributes<unknown>>;
     Divider: () => import("react").JSX.Element | null;
     Group: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<unknown>>;
+    Menu: import("react").ForwardRefExoticComponent<{
+        'aria-label': string;
+        icon: import("./ActionBar").ActionBarIconButtonProps["icon"];
+        items: import("./ActionBar").ActionBarMenuItemProps[];
+        overflowIcon?: import("./ActionBar").ActionBarIconButtonProps["icon"] | "none";
+    } & {
+        'aria-label': string;
+        'aria-labelledby'?: undefined;
+    } & {
+        icon: React.ElementType;
+        unsafeDisableTooltip?: boolean;
+        description?: string;
+        tooltipDirection?: import("../TooltipV2").TooltipDirection;
+        keyshortcuts?: string;
+        keybindingHint?: string;
+    } & Omit<import("..").ButtonBaseProps, "aria-label" | "aria-labelledby"> & import("react").RefAttributes<unknown>>;
 };
 export default ActionBar;
 export { ActionBar };

package/dist/ActionBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,QAAA,MAAM,SAAS;;;;;;CAIb,CAAA;AAEF,eAAe,SAAS,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAC,cAAc,EAAE,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,aAAa,CAAA;AAE3F,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAKb,CAAA;AAEF,eAAe,SAAS,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,CAAA"}

package/dist/ActionBar/index.js

@@ -1,9 +1,10 @@
-import { ActionBar as ActionBar$1, ActionBarGroup, VerticalDivider, ActionBarIconButton } from './ActionBar.js';
+import { ActionBar as ActionBar$1, ActionBarMenu, ActionBarGroup, VerticalDivider, ActionBarIconButton } from './ActionBar.js';
 
 const ActionBar = Object.assign(ActionBar$1, {
   IconButton: ActionBarIconButton,
   Divider: VerticalDivider,
-  Group: ActionBarGroup
+  Group: ActionBarGroup,
+  Menu: ActionBarMenu
 });
 
 export { ActionBar, ActionBar as default };

package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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"}

package/dist/AnchoredOverlay/AnchoredOverlay.js

@@ -124,7 +124,6 @@ const AnchoredOverlay = ({
       onClickOutside: onClickOutside,
       ignoreClickRefs: [anchorRef],
       onEscape: onEscape,
-      ref: updateOverlayRef,
       role: "none",
       visibility: position_0 ? 'visible' : 'hidden',
       height: height,
@@ -137,6 +136,12 @@ const AnchoredOverlay = ({
       className: className,
       preventOverflow: preventOverflow,
       ...overlayProps,
+      ref: node => {
+        if (overlayProps !== null && overlayProps !== void 0 && overlayProps.ref) {
+          assignRef(overlayProps.ref, node);
+        }
+        updateOverlayRef(node);
+      },
       children: [showXIcon ? /*#__PURE__*/jsx("div", {
         className: classes.ResponsiveCloseButtonContainer,
         children: /*#__PURE__*/jsx(IconButton, {
@@ -160,6 +165,13 @@ const AnchoredOverlay = ({
     }) : null]
   });
 };
+function assignRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
 AnchoredOverlay.displayName = 'AnchoredOverlay';
 
 export { AnchoredOverlay };

package/dist/PageHeader/PageHeader-9f4a690a.css

@@ -0,0 +1,2 @@
+.prc-PageHeader-PageHeader-sT1Hp{--grid-row-order-context-area:1;--grid-row-order-leading-action:2;--grid-row-order-breadcrumbs:2;--grid-row-order-title-area:2;--grid-row-order-trailing-action:2;--grid-row-order-actions:2;--grid-row-order-description:3;--grid-row-order-navigation:4;--title-area-region-order-leading-visual:0;--title-area-region-order-title:1;--title-area-region-order-trailing-visual:2;--context-area-region-order-parent-link:0;--context-area-region-order-context-bar:1;--context-area-region-order-context-area-actions:2;display:grid;grid-template-areas:"context-area context-area context-area context-area context-area" "leading-action breadcrumbs title-area trailing-action actions" "description description description description description" "navigation navigation navigation navigation navigation";grid-template-columns:auto auto auto auto 1fr}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant=large]){font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}@media (max-width:calc(48rem - 0.02px)){.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-narrow=large]){font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-narrow=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-narrow=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}}@media (min-width:48rem){.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-regular=large]){font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-regular=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-regular=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}}@media (min-width:87.5rem){.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-wide=large]){font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-wide=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant-wide=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}}.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-all]),.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:not(:has([data-component=PH_Navigation])){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}@media (max-width:calc(48rem - 0.02px)){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-narrow]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}@media (min-width:48rem){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-regular]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}@media (min-width:87.5rem){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-wide]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_Actions],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_LeadingAction],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_LeadingVisual],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_TrailingAction],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_TrailingVisual]{height:calc(var(--title-line-height)*1em)}.prc-PageHeader-PageHeader-sT1Hp [data-hidden-all]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-narrow]{display:none}}@media (min-width:48rem){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-regular]{display:none}}@media (min-width:87.5rem){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-wide]{display:none}}.prc-PageHeader-ContextArea-6ykSJ{flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:context-area;grid-row:var(--grid-row-order-context-area);line-height:var(--text-body-lineHeight-medium,1.4285);padding-bottom:var(--base-size-8,.5rem)}.prc-PageHeader-ContextArea-6ykSJ,.prc-PageHeader-ParentLink-BvDS0{align-items:center;display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-PageHeader-ParentLink-BvDS0{order:var(--context-area-region-order-parent-link)}.prc-PageHeader-ContextBar-XQ8Q0{display:flex;order:var(--context-area-region-order-context-bar)}.prc-PageHeader-ContextAreaActions-RTJRk{align-items:center;flex-grow:1;justify-content:flex-end;order:var(--context-area-region-order-context-area-actions)}.prc-PageHeader-ContextAreaActions-RTJRk,.prc-PageHeader-TitleArea-jxJZy{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.prc-PageHeader-TitleArea-jxJZy{align-items:flex-start;grid-area:title-area;grid-row:var(--grid-row-order-title-area)}.prc-PageHeader-LeadingAction-88LQ0{grid-area:leading-action;grid-row:var(--grid-row-order-leading-action)}.prc-PageHeader-Breadcrumbs-3c6ig,.prc-PageHeader-LeadingAction-88LQ0{align-items:center;display:flex;padding-right:var(--base-size-8,.5rem)}.prc-PageHeader-Breadcrumbs-3c6ig{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:breadcrumbs;grid-row:var(--grid-row-order-breadcrumbs);line-height:var(--text-body-lineHeight-medium,1.4285)}.prc-PageHeader-LeadingVisual-7zjCx{align-items:center;display:flex;order:var(--title-area-region-order-leading-visual)}.prc-PageHeader-Title-LKOsd{display:block;font-size:inherit;font-weight:inherit;order:var(--title-area-region-order-title)}.prc-PageHeader-Title-LKOsd:where([data-hidden=true]){display:none}.prc-PageHeader-TrailingVisual-7Ft0D{align-items:center;display:flex;order:var(--title-area-region-order-trailing-visual)}.prc-PageHeader-TrailingAction-QOaow{grid-area:trailing-action;grid-row:var(--grid-row-order-trailing-action)}.prc-PageHeader-Actions-ygtmj,.prc-PageHeader-TrailingAction-QOaow{align-items:center;display:flex;padding-left:var(--base-size-8,.5rem)}.prc-PageHeader-Actions-ygtmj{flex-direction:row;gap:var(--stack-gap-condensed,.5rem);grid-area:actions;grid-row:var(--grid-row-order-actions);justify-content:flex-end;min-width:max-content}.prc-PageHeader-Description-kFg8r{align-items:center;display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem);grid-area:description;grid-row:var(--grid-row-order-description)}.prc-PageHeader-Description-kFg8r,.prc-PageHeader-Navigation-9Uvch{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-medium,1.4285);padding-top:var(--base-size-8,.5rem)}.prc-PageHeader-Navigation-9Uvch{display:block;grid-area:navigation;grid-row:var(--grid-row-order-navigation)}
+/*# sourceMappingURL=PageHeader-9f4a690a.css.map */

package/dist/PageHeader/PageHeader-9f4a690a.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PageHeader/PageHeader.module.css"],"names":[],"mappings":"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","file":"PageHeader-9f4a690a.css","sourcesContent":[".PageHeader {\n  /* Grid Row Order */\n  --grid-row-order-context-area: 1;\n  --grid-row-order-leading-action: 2;\n  --grid-row-order-breadcrumbs: 2;\n  --grid-row-order-title-area: 2;\n  --grid-row-order-trailing-action: 2;\n  --grid-row-order-actions: 2;\n  --grid-row-order-description: 3;\n  --grid-row-order-navigation: 4;\n\n  /* Title Area Region Order */\n  --title-area-region-order-leading-visual: 0;\n  --title-area-region-order-title: 1;\n  --title-area-region-order-trailing-visual: 2;\n\n  /* Context Area Region Order */\n  --context-area-region-order-parent-link: 0;\n  --context-area-region-order-context-bar: 1;\n  --context-area-region-order-context-area-actions: 2;\n\n  display: grid;\n\n  /* We have max 5 columns. */\n  grid-template-columns: auto auto auto auto 1fr;\n  grid-template-areas:\n    'context-area context-area context-area context-area context-area'\n    'leading-action breadcrumbs title-area trailing-action actions'\n    'description description description description description'\n    'navigation navigation navigation navigation navigation';\n\n  /*\n    line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives.\n    --custom-font-size, --custom-line-height, --custom-font-weight are custom properties that can be used to override the below values.\n    We don't want these values to be overridden but still want to allow consumers to override them if needed.\n  */\n  &:has([data-component='TitleArea'][data-size-variant='large']) {\n    font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n  }\n\n  &:has([data-component='TitleArea'][data-size-variant='medium']) {\n    font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n  }\n\n  &:has([data-component='TitleArea'][data-size-variant='subtitle']) {\n    font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n  }\n\n  /* Responsive size variants */\n  @media (--viewportRange-narrow) {\n    &:has([data-component='TitleArea'][data-size-variant-narrow='large']) {\n      font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n    }\n\n    &:has([data-component='TitleArea'][data-size-variant-narrow='medium']) {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n\n    &:has([data-component='TitleArea'][data-size-variant-narrow='subtitle']) {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &:has([data-component='TitleArea'][data-size-variant-regular='large']) {\n      font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n    }\n\n    &:has([data-component='TitleArea'][data-size-variant-regular='medium']) {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n\n    &:has([data-component='TitleArea'][data-size-variant-regular='subtitle']) {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &:has([data-component='TitleArea'][data-size-variant-wide='large']) {\n      font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n    }\n\n    &:has([data-component='TitleArea'][data-size-variant-wide='medium']) {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n\n    &:has([data-component='TitleArea'][data-size-variant-wide='subtitle']) {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n  }\n\n  &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-all]),\n  &[data-has-border='true']:not(:has([data-component='PH_Navigation'])) {\n    border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n    padding-block-end: var(--base-size-8);\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-narrow]) {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-regular]) {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-wide]) {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  & [data-component='PH_LeadingAction'],\n  & [data-component='PH_TrailingAction'],\n  & [data-component='PH_Actions'],\n  & [data-component='PH_LeadingVisual'],\n  & [data-component='PH_TrailingVisual'] {\n    height: calc(var(--title-line-height) * 1em);\n  }\n\n  & [data-hidden-all] {\n    display: none;\n  }\n\n  & [data-hidden-narrow] {\n    @media (--viewportRange-narrow) {\n      display: none;\n    }\n  }\n\n  & [data-hidden-regular] {\n    @media (--viewportRange-regular) {\n      display: none;\n    }\n  }\n\n  & [data-hidden-wide] {\n    @media (--viewportRange-wide) {\n      display: none;\n    }\n  }\n}\n\n.ContextArea {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-context-area);\n  grid-area: context-area;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.ParentLink {\n  display: flex;\n  align-items: center;\n  order: var(--context-area-region-order-parent-link);\n  gap: var(--stack-gap-condensed);\n}\n\n.ContextBar {\n  display: flex;\n  order: var(--context-area-region-order-context-bar);\n}\n\n.ContextAreaActions {\n  display: flex;\n  flex-direction: row;\n  order: var(--context-area-region-order-context-area-actions);\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  flex-grow: 1;\n  justify-content: flex-end;\n}\n\n.TitleArea {\n  grid-row: var(--grid-row-order-title-area);\n  grid-area: title-area;\n  display: flex;\n  gap: var(--stack-gap-condensed);\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.LeadingAction {\n  display: flex;\n  padding-right: var(--base-size-8);\n  grid-row: var(--grid-row-order-leading-action);\n  grid-area: leading-action;\n  align-items: center;\n}\n\n.Breadcrumbs {\n  display: flex;\n  padding-right: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  grid-row: var(--grid-row-order-breadcrumbs);\n  grid-area: breadcrumbs;\n  align-items: center;\n}\n\n.LeadingVisual {\n  /* using flex and order to display the leading visual in the title area. */\n  display: flex;\n  order: var(--title-area-region-order-leading-visual);\n  align-items: center;\n}\n\n.Title {\n  /* using flex and order to display the title in the title area. */\n  display: block;\n  order: var(--title-area-region-order-title);\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n.Title:where([data-hidden='true']) {\n  display: none;\n}\n\n.TrailingVisual {\n  /* using flex and order to display the trailing visual in the title area. */\n  display: flex;\n  order: var(--title-area-region-order-trailing-visual);\n  align-items: center;\n}\n\n.TrailingAction {\n  display: flex;\n  padding-left: var(--base-size-8);\n  grid-row: var(--grid-row-order-trailing-action);\n  grid-area: trailing-action;\n  align-items: center;\n}\n\n.Actions {\n  display: flex;\n  min-width: max-content;\n  padding-left: var(--base-size-8);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-actions);\n  grid-area: actions;\n  gap: var(--stack-gap-condensed);\n  justify-content: flex-end;\n  align-items: center;\n}\n\n.Description {\n  display: flex;\n  padding-top: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-description);\n  grid-area: description;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.Navigation {\n  display: block;\n  padding-top: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  grid-row: var(--grid-row-order-navigation);\n  grid-area: navigation;\n}\n"]}

package/dist/PageHeader/PageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAIhE,OAAO,KAAK,EAAC,SAAS,IAAI,aAAa,EAAC,MAAM,SAAS,CAAA;AAGvD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,OAAO,KAAK,EAAC,QAAQ,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAO9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;CAC5C,CAAA;AAkBD,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AA0FD,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,aAAa,EAC7D,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAC1G,GAAG;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;CAClD,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAA;AAuDpF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;CAC7F,GAAG,iBAAiB,CAAA;AAsErB,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,GAAG,iBAAiB,CAAA;AAiDrB,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;AAmBrE,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC5D,GAAG,iBAAiB,CAAA;AAsFrB,eAAO,MAAM,UAAU;;;;;;;;;;;;+CA3GiC,YAAY;;;CA0HlE,CAAA"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAIhE,OAAO,KAAK,EAAC,SAAS,IAAI,aAAa,EAAC,MAAM,SAAS,CAAA;AAIvD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,OAAO,KAAK,EAAC,QAAQ,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAO9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;CAC5C,CAAA;AAkBD,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AA0FD,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,aAAa,EAC7D,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAC1G,GAAG;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;CAClD,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAA;AAuDpF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;CAC7F,GAAG,iBAAiB,CAAA;AAqErB,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,GAAG,iBAAiB,CAAA;AAiDrB,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;AAmBrE,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC5D,GAAG,iBAAiB,CAAA;AAsFrB,eAAO,MAAM,UAAU;;;;;;;;;;;;+CA3GiC,YAAY;;;CA0HlE,CAAA"}

package/dist/PageHeader/PageHeader.js

@@ -1,7 +1,8 @@
 import { c } from 'react-compiler-runtime';
 import React, { useEffect } from 'react';
-import { useResponsiveValue, isResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
 import { ArrowLeftIcon } from '@primer/octicons-react';
+import { getResponsiveAttributes } from '../internal/utils/getResponsiveAttributes.js';
 import { areAllValuesTheSame, haveRegularAndWideSameValue } from '../utils/getBreakpointDeclarations.js';
 import { warning } from '../utils/warning.js';
 import { clsx } from 'clsx';
@@ -324,7 +325,7 @@ const ContextAreaActions = t0 => {
 // ---------------------------------------------------------------------
 
 const TitleArea = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(10);
+  const $ = c(12);
   const {
     children,
     className,
@@ -334,7 +335,6 @@ const TitleArea = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const hidden = t1 === undefined ? false : t1;
   const variant = t2 === undefined ? "medium" : t2;
   const titleAreaRef = useProvidedRefOrCreate(forwardedRef);
-  const currentVariant = useResponsiveValue(variant, "medium");
   let t3;
   if ($[0] !== className) {
     t3 = clsx(classes.TitleArea, className);
@@ -344,33 +344,41 @@ const TitleArea = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
     t3 = $[1];
   }
   let t4;
-  if ($[2] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
-    $[2] = hidden;
+  if ($[2] !== variant) {
+    t4 = getResponsiveAttributes("size-variant", variant);
+    $[2] = variant;
     $[3] = t4;
   } else {
     t4 = $[3];
   }
   let t5;
-  if ($[4] !== children || $[5] !== currentVariant || $[6] !== t3 || $[7] !== t4 || $[8] !== titleAreaRef) {
-    t5 = /*#__PURE__*/jsx("div", {
+  if ($[4] !== hidden) {
+    t5 = getHiddenDataAttributes(hidden);
+    $[4] = hidden;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== children || $[7] !== t3 || $[8] !== t4 || $[9] !== t5 || $[10] !== titleAreaRef) {
+    t6 = /*#__PURE__*/jsx("div", {
       className: t3,
       ref: titleAreaRef,
       "data-component": "TitleArea",
-      "data-size-variant": currentVariant,
       ...t4,
+      ...t5,
       children: children
     });
-    $[4] = children;
-    $[5] = currentVariant;
-    $[6] = t3;
-    $[7] = t4;
-    $[8] = titleAreaRef;
+    $[6] = children;
+    $[7] = t3;
+    $[8] = t4;
     $[9] = t5;
+    $[10] = titleAreaRef;
+    $[11] = t6;
   } else {
-    t5 = $[9];
+    t6 = $[11];
   }
-  return t5;
+  return t6;
 });
 TitleArea.displayName = 'TitleArea';
 

package/dist/PageHeader/PageHeader.module.css.js

@@ -1,4 +1,4 @@
-import './PageHeader-4e1d8fee.css';
+import './PageHeader-9f4a690a.css';
 
 var classes = {"PageHeader":"prc-PageHeader-PageHeader-sT1Hp","ContextArea":"prc-PageHeader-ContextArea-6ykSJ","ParentLink":"prc-PageHeader-ParentLink-BvDS0","ContextBar":"prc-PageHeader-ContextBar-XQ8Q0","ContextAreaActions":"prc-PageHeader-ContextAreaActions-RTJRk","TitleArea":"prc-PageHeader-TitleArea-jxJZy","LeadingAction":"prc-PageHeader-LeadingAction-88LQ0","Breadcrumbs":"prc-PageHeader-Breadcrumbs-3c6ig","LeadingVisual":"prc-PageHeader-LeadingVisual-7zjCx","Title":"prc-PageHeader-Title-LKOsd","TrailingVisual":"prc-PageHeader-TrailingVisual-7Ft0D","TrailingAction":"prc-PageHeader-TrailingAction-QOaow","Actions":"prc-PageHeader-Actions-ygtmj","Description":"prc-PageHeader-Description-kFg8r","Navigation":"prc-PageHeader-Navigation-9Uvch"};
 

package/dist/experimental/Tabs/Tabs.d.ts

@@ -0,0 +1,127 @@
+import React, { type AriaAttributes, type PropsWithChildren } from 'react';
+/**
+ * Props to be used when the Tabs component's state is controlled by the parent
+ */
+type ControlledTabsProps = {
+    /**
+     * Specify the selected tab
+     */
+    value: string;
+    /**
+     * `defaultValue` can only be used in the uncontrolled variant of the component
+     * If you need to use `defaultValue`, please switch to the uncontrolled variant by removing the `value` prop.
+     */
+    defaultValue?: never;
+    /**
+     * Provide an optional callback that is called when the selected tab changes
+     */
+    onValueChange: ({ value }: {
+        value: string;
+    }) => void;
+};
+/**
+ * Props to be used when the Tabs component is managing its own state
+ */
+type UncontrolledTabsProps = {
+    /**
+     * Specify the default selected tab
+     */
+    defaultValue: string;
+    /**
+     * `value` can only be used in the controlled variant of the component
+     * If you need to use `value`, please switch to the controlled variant by removing the `defaultValue` prop.
+     */
+    value?: never;
+    /**
+     * Provide an optional callback that is called when the selected tab changes
+     */
+    onValueChange?: ({ value }: {
+        value: string;
+    }) => void;
+};
+type TabsProps = PropsWithChildren<ControlledTabsProps | UncontrolledTabsProps>;
+/**
+ * The Tabs component provides the base structure for a tabbed interface, without providing any formal requirement on DOM structure or styling.
+ * It manages the state of the selected tab, handles tab ordering/selection and provides context to its child components to ensure an accessible experience.
+ *
+ * This is intended to be used in conjunction with the `useTab`, `useTabList`, and `useTabPanel` hooks to build a fully accessible tabs component.
+ * The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
+ */
+declare function Tabs(props: TabsProps): React.JSX.Element;
+type Label = {
+    'aria-label': string;
+};
+type LabelledBy = {
+    'aria-labelledby': string;
+};
+type Labelled = Label | LabelledBy;
+type TabListProps = Labelled & React.HTMLAttributes<HTMLElement>;
+declare function useTabList<T extends HTMLElement>(props: TabListProps & {
+    /** Optional ref to use for the tablist. If none is provided, one will be generated automatically */
+    ref?: React.RefObject<T>;
+}): {
+    /** Props to be spread onto the tablist element */
+    tabListProps: {
+        onKeyDown: React.KeyboardEventHandler<T>;
+        'aria-orientation': AriaAttributes['aria-orientation'];
+        'aria-label': AriaAttributes['aria-label'];
+        'aria-labelledby': AriaAttributes['aria-labelledby'];
+        ref: React.RefObject<T>;
+        role: 'tablist';
+    };
+};
+declare function TabList({ children, ...rest }: TabListProps): React.JSX.Element;
+type TabProps = React.ComponentPropsWithoutRef<'button'> & {
+    /**
+     * Specify whether the tab is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide a value that uniquely identifies the tab. This should mirror the
+     * value provided to the corresponding TabPanel
+     */
+    value: string;
+};
+/**
+ * A custom hook that provides the props needed for a tab component.
+ * The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
+ */
+declare function useTab<T extends HTMLElement>(props: Pick<TabProps, 'disabled' | 'value'>): {
+    /** Props to be spread onto the tab component */
+    tabProps: Pick<React.HTMLProps<T>, 'aria-controls' | 'aria-disabled' | 'aria-selected' | 'id' | 'tabIndex' | 'onKeyDown' | 'onMouseDown' | 'onFocus'> & {
+        role: 'tab';
+    };
+};
+declare const Tab: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    /**
+     * Specify whether the tab is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide a value that uniquely identifies the tab. This should mirror the
+     * value provided to the corresponding TabPanel
+     */
+    value: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+type TabPanelProps = {
+    /**
+     * Provide a value that uniquely identifies the tab panel. This should mirror
+     * the value set for the corresponding tab
+     */
+    value: string;
+};
+/** Utility hook for tab panels */
+declare function useTabPanel<T extends HTMLElement>(props: TabPanelProps): {
+    /** Props to be spread onto the tabpanel component */
+    tabPanelProps: Pick<React.HTMLProps<T>, 'aria-labelledby' | 'id' | 'hidden'> & {
+        /**
+         * An identifier to aid in styling when this panel is selected & active
+         */
+        'data-selected': string | undefined;
+        role: 'tabpanel';
+    };
+};
+declare function TabPanel({ children, value, ...rest }: React.HTMLAttributes<HTMLDivElement> & TabPanelProps): React.JSX.Element;
+export { Tabs, TabList, Tab, TabPanel, useTab, useTabList, useTabPanel };
+export type { TabsProps, TabListProps, TabProps, TabPanelProps };
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/experimental/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/dist/experimental/Tabs/Tabs.js

@@ -0,0 +1,317 @@
+import { c } from 'react-compiler-runtime';
+import React, { useId, createContext, useContext } from 'react';
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { jsx } from 'react/jsx-runtime';
+import { useProvidedRefOrCreate } from '../../hooks/useProvidedRefOrCreate.js';
+
+/**
+ * The Tabs component provides the base structure for a tabbed interface, without providing any formal requirement on DOM structure or styling.
+ * It manages the state of the selected tab, handles tab ordering/selection and provides context to its child components to ensure an accessible experience.
+ *
+ * This is intended to be used in conjunction with the `useTab`, `useTabList`, and `useTabPanel` hooks to build a fully accessible tabs component.
+ * The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
+ */
+function Tabs(props) {
+  var _props$defaultValue;
+  const $ = c(13);
+  const {
+    children,
+    onValueChange
+  } = props;
+  const groupId = useId();
+  const t0 = (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : props.value;
+  let t1;
+  if ($[0] !== props.value || $[1] !== t0) {
+    t1 = {
+      name: "tab-selection",
+      defaultValue: t0,
+      value: props.value
+    };
+    $[0] = props.value;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const [selectedValue, setSelectedValue] = useControllableState(t1);
+  const savedOnValueChange = React.useRef(onValueChange);
+  let t2;
+  if ($[3] !== groupId || $[4] !== selectedValue || $[5] !== setSelectedValue) {
+    t2 = {
+      groupId,
+      selectedValue,
+      selectTab(value) {
+        var _savedOnValueChange$c;
+        setSelectedValue(value);
+        (_savedOnValueChange$c = savedOnValueChange.current) === null || _savedOnValueChange$c === void 0 ? void 0 : _savedOnValueChange$c.call(savedOnValueChange, {
+          value
+        });
+      }
+    };
+    $[3] = groupId;
+    $[4] = selectedValue;
+    $[5] = setSelectedValue;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const contextValue = t2;
+  let t3;
+  let t4;
+  if ($[7] !== onValueChange) {
+    t3 = () => {
+      savedOnValueChange.current = onValueChange;
+    };
+    t4 = [onValueChange];
+    $[7] = onValueChange;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t3 = $[8];
+    t4 = $[9];
+  }
+  useIsomorphicLayoutEffect(t3, t4);
+  let t5;
+  if ($[10] !== children || $[11] !== contextValue) {
+    t5 = /*#__PURE__*/jsx(TabsContext.Provider, {
+      value: contextValue,
+      children: children
+    });
+    $[10] = children;
+    $[11] = contextValue;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
+function useTabList(props) {
+  const $ = c(9);
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-orientation": ariaOrientation
+  } = props;
+  const ref = useProvidedRefOrCreate(props.ref);
+  let t0;
+  if ($[0] !== ariaOrientation || $[1] !== ref) {
+    t0 = event => {
+      const {
+        current: tablist
+      } = ref;
+      if (tablist === null) {
+        return;
+      }
+      const tabs = getFocusableTabs(tablist);
+      const isVertical = ariaOrientation === "vertical";
+      const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+      const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+      if (event.key === nextKey || event.key === prevKey || event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (event.key === nextKey) {
+        const selectedTabIndex = tabs.findIndex(_temp);
+        if (selectedTabIndex === -1) {
+          return;
+        }
+        const nextTabIndex = (selectedTabIndex + 1) % tabs.length;
+        tabs[nextTabIndex].focus();
+      } else {
+        if (event.key === prevKey) {
+          const selectedTabIndex_0 = tabs.findIndex(_temp2);
+          if (selectedTabIndex_0 === -1) {
+            return;
+          }
+          const nextTabIndex_0 = (tabs.length + selectedTabIndex_0 - 1) % tabs.length;
+          tabs[nextTabIndex_0].focus();
+        } else {
+          if (event.key === "Home") {
+            if (tabs[0]) {
+              tabs[0].focus();
+            }
+          } else {
+            if (event.key === "End") {
+              if (tabs.length > 0) {
+                tabs[tabs.length - 1].focus();
+              }
+            }
+          }
+        }
+      }
+    };
+    $[0] = ariaOrientation;
+    $[1] = ref;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const onKeyDown = t0;
+  const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
+  let t2;
+  if ($[3] !== ariaLabel || $[4] !== ariaLabelledby || $[5] !== onKeyDown || $[6] !== ref || $[7] !== t1) {
+    t2 = {
+      tabListProps: {
+        ref,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-orientation": t1,
+        role: "tablist",
+        onKeyDown
+      }
+    };
+    $[3] = ariaLabel;
+    $[4] = ariaLabelledby;
+    $[5] = onKeyDown;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+function _temp2(tab_0) {
+  return tab_0.getAttribute("aria-selected") === "true";
+}
+function _temp(tab) {
+  return tab.getAttribute("aria-selected") === "true";
+}
+function getFocusableTabs(tablist) {
+  return Array.from(tablist.querySelectorAll('[role="tab"]:not([aria-disabled])'));
+}
+/**
+ * A custom hook that provides the props needed for a tab component.
+ * The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
+ */
+function useTab(props) {
+  const $ = c(21);
+  const {
+    disabled,
+    value
+  } = props;
+  const tabs = useTabs();
+  const selected = tabs.selectedValue === value;
+  const id = `${tabs.groupId}-tab-${value}`;
+  const panelId = `${tabs.groupId}-panel-${value}`;
+  let t0;
+  if ($[0] !== tabs || $[1] !== value) {
+    t0 = function onKeyDown(event) {
+      if (event.key === " " || event.key === "Enter") {
+        tabs.selectTab(value);
+      }
+    };
+    $[0] = tabs;
+    $[1] = value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const onKeyDown = t0;
+  let t1;
+  if ($[3] !== disabled || $[4] !== tabs || $[5] !== value) {
+    t1 = function onMouseDown(event_0) {
+      if (!disabled && event_0.button === 0 && event_0.ctrlKey === false) {
+        tabs.selectTab(value);
+      } else {
+        event_0.preventDefault();
+      }
+    };
+    $[3] = disabled;
+    $[4] = tabs;
+    $[5] = value;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const onMouseDown = t1;
+  let t2;
+  if ($[7] !== disabled || $[8] !== selected || $[9] !== tabs || $[10] !== value) {
+    t2 = function onFocus() {
+      if (!selected && !disabled) {
+        tabs.selectTab(value);
+      }
+    };
+    $[7] = disabled;
+    $[8] = selected;
+    $[9] = tabs;
+    $[10] = value;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  const onFocus = t2;
+  const t3 = disabled ? true : undefined;
+  const t4 = selected ? 0 : -1;
+  let t5;
+  if ($[12] !== id || $[13] !== onFocus || $[14] !== onKeyDown || $[15] !== onMouseDown || $[16] !== panelId || $[17] !== selected || $[18] !== t3 || $[19] !== t4) {
+    t5 = {
+      tabProps: {
+        "aria-disabled": t3,
+        "aria-controls": panelId,
+        "aria-selected": selected,
+        onKeyDown,
+        onMouseDown,
+        onFocus,
+        id,
+        role: "tab",
+        tabIndex: t4
+      }
+    };
+    $[12] = id;
+    $[13] = onFocus;
+    $[14] = onKeyDown;
+    $[15] = onMouseDown;
+    $[16] = panelId;
+    $[17] = selected;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  return t5;
+}
+/** Utility hook for tab panels */
+function useTabPanel(props) {
+  const $ = c(5);
+  const {
+    value
+  } = props;
+  const tabs = useTabs();
+  const id = `${tabs.groupId}-panel-${value}`;
+  const tabId = `${tabs.groupId}-tab-${value}`;
+  const t0 = tabs.selectedValue === value ? "" : undefined;
+  const t1 = tabs.selectedValue !== value;
+  let t2;
+  if ($[0] !== id || $[1] !== t0 || $[2] !== t1 || $[3] !== tabId) {
+    t2 = {
+      tabPanelProps: {
+        "aria-labelledby": tabId,
+        "data-selected": t0,
+        id,
+        hidden: t1,
+        role: "tabpanel"
+      }
+    };
+    $[0] = id;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = tabId;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+const TabsContext = /*#__PURE__*/createContext(null);
+function useTabs() {
+  const context = useContext(TabsContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("Component must be used within a <Tabs> component");
+}
+
+export { Tabs, useTab, useTabList, useTabPanel };

package/dist/experimental/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { Tabs, useTab, useTabList, useTabPanel } from './Tabs';
+export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './Tabs';
+//# sourceMappingURL=index.d.ts.map

package/dist/experimental/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,QAAQ,CAAA;AAC5D,YAAY,EAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAC,MAAM,QAAQ,CAAA"}

package/dist/experimental/index.d.ts

@@ -45,4 +45,5 @@ export type { FilteredActionListProps } from '../FilteredActionList';
 export { IssueLabel } from './IssueLabel';
 export type { IssueLabelProps } from './IssueLabel';
 export * from '../KeybindingHint';
+export * from './Tabs';
 //# sourceMappingURL=index.d.ts.map

package/dist/experimental/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,eAAe,CAAA;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAA;AACpC,YAAY,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAC,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAA;AACjE,YAAY,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,GACZ,MAAM,cAAc,CAAA;AAErB,cAAc,kBAAkB,CAAA;AAEhC,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAA;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAA;AAExD,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,YAAY,EACV,eAAe,EACf,UAAU,EACV,UAAU,IAAI,oBAAoB,EAClC,YAAY,IAAI,sBAAsB,GACvC,MAAM,eAAe,CAAA;AAEtB,cAAc,WAAW,CAAA;AAEzB,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAA;AAClC,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AACpC,YAAY,EAAC,YAAY,EAAC,MAAM,cAAc,CAAA;AAC9C,cAAc,cAAc,CAAA;AAE5B,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAA;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAA;AAE9D,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAA;AAC9B,YAAY,EAAC,UAAU,EAAE,cAAc,EAAC,MAAM,UAAU,CAAA;AAExD,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAC9D,YAAY,EAAC,aAAa,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElF,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAE,uBAAuB,EAAE,yBAAyB,EAAC,MAAM,mBAAmB,CAAA;AAE/G,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAA;AACvC,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAA;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAA;AACjF,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AAEtD,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAA;AACxD,YAAY,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AAEjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA"}

package/dist/experimental/index.js

@@ -29,3 +29,4 @@ export { useOverflow } from '../hooks/useOverflow.js';
 export { useSlots } from '../hooks/useSlots.js';
 export { SelectPanel } from './SelectPanel2/SelectPanel.js';
 export { KeybindingHint, getAccessibleKeybindingHintString } from '../KeybindingHint/KeybindingHint.js';
+export { Tabs, useTab, useTabList, useTabPanel } from './Tabs/Tabs.js';

package/generated/components.json

@@ -111,6 +111,35 @@
               "defaultValue": ""
             }
           ]
+        },
+        {
+          "name": "ActionBar.Menu",
+          "props": [
+            {
+              "name": "aria-label",
+              "type": "string",
+              "required": true,
+              "description": "Accessible label for the menu button."
+            },
+            {
+              "name": "icon",
+              "type": "Component",
+              "required": true,
+              "description": "Icon for the menu button."
+            },
+            {
+              "name": "items",
+              "type": "ActionBarMenuItemProps[]",
+              "required": true,
+              "description": "Array of menu items to render in the menu. Each item can be an action, group, or divider."
+            },
+            {
+              "name": "overflowIcon",
+              "type": "Component | 'none'",
+              "required": false,
+              "description": "Icon displayed when the menu item is within the overflow menu. If 'none' is provided, no icon will be shown in the overflow menu."
+            }
+          ]
         }
       ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.1.0-rc.ee8ca60b6",
+  "version": "38.1.0-rc.f826eb31c",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/PageHeader/PageHeader-4e1d8fee.css

@@ -1,2 +0,0 @@
-.prc-PageHeader-PageHeader-sT1Hp{--grid-row-order-context-area:1;--grid-row-order-leading-action:2;--grid-row-order-breadcrumbs:2;--grid-row-order-title-area:2;--grid-row-order-trailing-action:2;--grid-row-order-actions:2;--grid-row-order-description:3;--grid-row-order-navigation:4;--title-area-region-order-leading-visual:0;--title-area-region-order-title:1;--title-area-region-order-trailing-visual:2;--context-area-region-order-parent-link:0;--context-area-region-order-context-bar:1;--context-area-region-order-context-area-actions:2;display:grid;grid-template-areas:"context-area context-area context-area context-area context-area" "leading-action breadcrumbs title-area trailing-action actions" "description description description description description" "navigation navigation navigation navigation navigation";grid-template-columns:auto auto auto auto 1fr}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant=large]){font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-sT1Hp:has([data-component=TitleArea][data-size-variant=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-all]),.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:not(:has([data-component=PH_Navigation])){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}@media screen and (max-width:768px){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-narrow]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}@media screen and (min-width:768px){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-regular]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}@media screen and (min-width:1440px){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-wide]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_Actions],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_LeadingAction],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_LeadingVisual],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_TrailingAction],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_TrailingVisual]{height:calc(var(--title-line-height)*1em)}.prc-PageHeader-PageHeader-sT1Hp [data-hidden-all]{display:none}@media screen and (max-width:768px){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-narrow]{display:none}}@media screen and (min-width:768px){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-regular]{display:none}}@media screen and (min-width:1440px){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-wide]{display:none}}.prc-PageHeader-ContextArea-6ykSJ{flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:context-area;grid-row:var(--grid-row-order-context-area);line-height:var(--text-body-lineHeight-medium,1.4285);padding-bottom:var(--base-size-8,.5rem)}.prc-PageHeader-ContextArea-6ykSJ,.prc-PageHeader-ParentLink-BvDS0{align-items:center;display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-PageHeader-ParentLink-BvDS0{order:var(--context-area-region-order-parent-link)}.prc-PageHeader-ContextBar-XQ8Q0{display:flex;order:var(--context-area-region-order-context-bar)}.prc-PageHeader-ContextAreaActions-RTJRk{align-items:center;flex-grow:1;justify-content:flex-end;order:var(--context-area-region-order-context-area-actions)}.prc-PageHeader-ContextAreaActions-RTJRk,.prc-PageHeader-TitleArea-jxJZy{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.prc-PageHeader-TitleArea-jxJZy{align-items:flex-start;grid-area:title-area;grid-row:var(--grid-row-order-title-area)}.prc-PageHeader-LeadingAction-88LQ0{grid-area:leading-action;grid-row:var(--grid-row-order-leading-action)}.prc-PageHeader-Breadcrumbs-3c6ig,.prc-PageHeader-LeadingAction-88LQ0{align-items:center;display:flex;padding-right:var(--base-size-8,.5rem)}.prc-PageHeader-Breadcrumbs-3c6ig{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:breadcrumbs;grid-row:var(--grid-row-order-breadcrumbs);line-height:var(--text-body-lineHeight-medium,1.4285)}.prc-PageHeader-LeadingVisual-7zjCx{align-items:center;display:flex;order:var(--title-area-region-order-leading-visual)}.prc-PageHeader-Title-LKOsd{display:block;font-size:inherit;font-weight:inherit;order:var(--title-area-region-order-title)}.prc-PageHeader-Title-LKOsd:where([data-hidden=true]){display:none}.prc-PageHeader-TrailingVisual-7Ft0D{align-items:center;display:flex;order:var(--title-area-region-order-trailing-visual)}.prc-PageHeader-TrailingAction-QOaow{grid-area:trailing-action;grid-row:var(--grid-row-order-trailing-action)}.prc-PageHeader-Actions-ygtmj,.prc-PageHeader-TrailingAction-QOaow{align-items:center;display:flex;padding-left:var(--base-size-8,.5rem)}.prc-PageHeader-Actions-ygtmj{flex-direction:row;gap:var(--stack-gap-condensed,.5rem);grid-area:actions;grid-row:var(--grid-row-order-actions);justify-content:flex-end;min-width:max-content}.prc-PageHeader-Description-kFg8r{align-items:center;display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem);grid-area:description;grid-row:var(--grid-row-order-description)}.prc-PageHeader-Description-kFg8r,.prc-PageHeader-Navigation-9Uvch{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-medium,1.4285);padding-top:var(--base-size-8,.5rem)}.prc-PageHeader-Navigation-9Uvch{display:block;grid-area:navigation;grid-row:var(--grid-row-order-navigation)}
-/*# sourceMappingURL=PageHeader-4e1d8fee.css.map */

package/dist/PageHeader/PageHeader-4e1d8fee.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/PageHeader/PageHeader.module.css"],"names":[],"mappings":"AAAA,iCAEE,+BAAgC,CAChC,iCAAkC,CAClC,8BAA+B,CAC/B,6BAA8B,CAC9B,kCAAmC,CACnC,0BAA2B,CAC3B,8BAA+B,CAC/B,6BAA8B,CAG9B,0CAA2C,CAC3C,iCAAkC,CAClC,2CAA4C,CAG5C,yCAA0C,CAC1C,yCAA0C,CAC1C,kDAAmD,CAEnD,YAAa,CAIb,6QAI0D,CAL1D,6CA4FF,CAhFE,0FACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,2FACE,uEAA0E,CAC1E,0EAA6E,CAC7E,6EAAgF,CAEhF,qFACF,CAEA,6FACE,uEAA0E,CAC1E,wEAA2E,CAC3E,6EAAgF,CAEhF,qFACF,CAEA,6MAEE,8GAA0E,CAC1E,0CACF,CAEA,oCACE,+GACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,oCACE,gHACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,qCACE,6GACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,2UAKE,yCACF,CAEA,mDACE,YACF,CAGE,oCADF,sDAEI,YAEJ,CADE,CAIA,oCADF,uDAEI,YAEJ,CADE,CAIA,qCADF,oDAEI,YAEJ,CADE,CAIJ,kCAME,kBAAmB,CAHnB,8CAAiD,CACjD,8CAA2C,CAI3C,sBAAuB,CADvB,2CAA4C,CAF5C,qDAAuD,CAHvD,uCASF,CAEA,mEAJE,kBAAmB,CARnB,YAAa,CASb,oCAQF,CALA,iCAGE,kDAEF,CAEA,iCACE,YAAa,CACb,kDACF,CAEA,yCAIE,kBAAmB,CAEnB,WAAY,CACZ,wBAAyB,CAJzB,2DAKF,CAEA,yEATE,YAAa,CACb,kBAAmB,CAGnB,oCAYF,CAPA,gCAME,sBAAuB,CAJvB,oBAAqB,CADrB,yCAMF,CAEA,oCAIE,wBAAyB,CADzB,6CAGF,CAEA,sEAHE,kBAAmB,CAJnB,YAAa,CACb,sCAeF,CATA,kCAGE,8CAAiD,CACjD,8CAA2C,CAG3C,qBAAsB,CADtB,0CAA2C,CAD3C,qDAIF,CAEA,oCAIE,kBAAmB,CAFnB,YAAa,CACb,mDAEF,CAEA,4BAEE,aAAc,CAEd,iBAAkB,CAClB,mBAAoB,CAFpB,0CAGF,CAEA,sDACE,YACF,CAEA,qCAIE,kBAAmB,CAFnB,YAAa,CACb,oDAEF,CAEA,qCAIE,yBAA0B,CAD1B,8CAGF,CAEA,mEAHE,kBAAmB,CAJnB,YAAa,CACb,qCAgBF,CAVA,8BAIE,kBAAmB,CAGnB,oCAA+B,CAD/B,iBAAkB,CADlB,sCAAuC,CAGvC,wBAAyB,CANzB,qBAQF,CAEA,kCASE,kBAAmB,CARnB,YAAa,CAKb,kBAAmB,CAInB,oCAA+B,CAF/B,qBAAsB,CADtB,0CAIF,CAEA,mEAVE,8CAAiD,CACjD,8CAA2C,CAC3C,qDAAuD,CAHvD,oCAmBF,CARA,iCACE,aAAc,CAMd,oBAAqB,CADrB,yCAEF","file":"PageHeader-4e1d8fee.css","sourcesContent":[".PageHeader {\n  /* Grid Row Order */\n  --grid-row-order-context-area: 1;\n  --grid-row-order-leading-action: 2;\n  --grid-row-order-breadcrumbs: 2;\n  --grid-row-order-title-area: 2;\n  --grid-row-order-trailing-action: 2;\n  --grid-row-order-actions: 2;\n  --grid-row-order-description: 3;\n  --grid-row-order-navigation: 4;\n\n  /* Title Area Region Order */\n  --title-area-region-order-leading-visual: 0;\n  --title-area-region-order-title: 1;\n  --title-area-region-order-trailing-visual: 2;\n\n  /* Context Area Region Order */\n  --context-area-region-order-parent-link: 0;\n  --context-area-region-order-context-bar: 1;\n  --context-area-region-order-context-area-actions: 2;\n\n  display: grid;\n\n  /* We have max 5 columns. */\n  grid-template-columns: auto auto auto auto 1fr;\n  grid-template-areas:\n    'context-area context-area context-area context-area context-area'\n    'leading-action breadcrumbs title-area trailing-action actions'\n    'description description description description description'\n    'navigation navigation navigation navigation navigation';\n\n  /*\n    line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives.\n    --custom-font-size, --custom-line-height, --custom-font-weight are custom properties that can be used to override the below values.\n    We don't want these values to be overridden but still want to allow consumers to override them if needed.\n  */\n  &:has([data-component='TitleArea'][data-size-variant='large']) {\n    font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n  }\n\n  &:has([data-component='TitleArea'][data-size-variant='medium']) {\n    font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n  }\n\n  &:has([data-component='TitleArea'][data-size-variant='subtitle']) {\n    font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n  }\n\n  &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-all]),\n  &[data-has-border='true']:not(:has([data-component='PH_Navigation'])) {\n    border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n    padding-block-end: var(--base-size-8);\n  }\n\n  @media screen and (max-width: 768px) {\n    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-narrow]) {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  @media screen and (min-width: 768px) {\n    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-regular]) {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  @media screen and (min-width: 1440px) {\n    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-wide]) {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  & [data-component='PH_LeadingAction'],\n  & [data-component='PH_TrailingAction'],\n  & [data-component='PH_Actions'],\n  & [data-component='PH_LeadingVisual'],\n  & [data-component='PH_TrailingVisual'] {\n    height: calc(var(--title-line-height) * 1em);\n  }\n\n  & [data-hidden-all] {\n    display: none;\n  }\n\n  & [data-hidden-narrow] {\n    @media screen and (max-width: 768px) {\n      display: none;\n    }\n  }\n\n  & [data-hidden-regular] {\n    @media screen and (min-width: 768px) {\n      display: none;\n    }\n  }\n\n  & [data-hidden-wide] {\n    @media screen and (min-width: 1440px) {\n      display: none;\n    }\n  }\n}\n\n.ContextArea {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-context-area);\n  grid-area: context-area;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.ParentLink {\n  display: flex;\n  align-items: center;\n  order: var(--context-area-region-order-parent-link);\n  gap: var(--stack-gap-condensed);\n}\n\n.ContextBar {\n  display: flex;\n  order: var(--context-area-region-order-context-bar);\n}\n\n.ContextAreaActions {\n  display: flex;\n  flex-direction: row;\n  order: var(--context-area-region-order-context-area-actions);\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  flex-grow: 1;\n  justify-content: flex-end;\n}\n\n.TitleArea {\n  grid-row: var(--grid-row-order-title-area);\n  grid-area: title-area;\n  display: flex;\n  gap: var(--stack-gap-condensed);\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.LeadingAction {\n  display: flex;\n  padding-right: var(--base-size-8);\n  grid-row: var(--grid-row-order-leading-action);\n  grid-area: leading-action;\n  align-items: center;\n}\n\n.Breadcrumbs {\n  display: flex;\n  padding-right: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  grid-row: var(--grid-row-order-breadcrumbs);\n  grid-area: breadcrumbs;\n  align-items: center;\n}\n\n.LeadingVisual {\n  /* using flex and order to display the leading visual in the title area. */\n  display: flex;\n  order: var(--title-area-region-order-leading-visual);\n  align-items: center;\n}\n\n.Title {\n  /* using flex and order to display the title in the title area. */\n  display: block;\n  order: var(--title-area-region-order-title);\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n.Title:where([data-hidden='true']) {\n  display: none;\n}\n\n.TrailingVisual {\n  /* using flex and order to display the trailing visual in the title area. */\n  display: flex;\n  order: var(--title-area-region-order-trailing-visual);\n  align-items: center;\n}\n\n.TrailingAction {\n  display: flex;\n  padding-left: var(--base-size-8);\n  grid-row: var(--grid-row-order-trailing-action);\n  grid-area: trailing-action;\n  align-items: center;\n}\n\n.Actions {\n  display: flex;\n  min-width: max-content;\n  padding-left: var(--base-size-8);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-actions);\n  grid-area: actions;\n  gap: var(--stack-gap-condensed);\n  justify-content: flex-end;\n  align-items: center;\n}\n\n.Description {\n  display: flex;\n  padding-top: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-description);\n  grid-area: description;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.Navigation {\n  display: block;\n  padding-top: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  grid-row: var(--grid-row-order-navigation);\n  grid-area: navigation;\n}\n"]}