@primer/react 38.0.0-rc.6 → 38.0.0-rc.7

package/dist/LabelGroup/LabelGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAkID,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA0OlE,CAAA;AAID,eAAe,UAAU,CAAA"}
+{"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA2FD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA0OlE,CAAA;AAID,eAAe,UAAU,CAAA"}

package/dist/LabelGroup/LabelGroup.js

@@ -1,26 +1,16 @@
 import { c } from 'react-compiler-runtime';
 import React from 'react';
-import styled from 'styled-components';
 import { XIcon } from '@primer/octicons-react';
 import { getFocusableChild } from '@primer/behaviors/utils';
-import { get } from '../constants.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
 import { IconButton } from '../Button/IconButton.js';
 import { ButtonComponent } from '../Button/Button.js';
-import { useTheme } from '../ThemeProvider.js';
+import { clsx } from 'clsx';
+import theme from '../theme.js';
 import classes from './LabelGroup.module.css.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { AnchoredOverlay } from '../AnchoredOverlay/AnchoredOverlay.js';
 
-const StyledLabelGroupContainer = styled.div.withConfig({
-  displayName: "LabelGroup__StyledLabelGroupContainer",
-  componentId: "sc-6tqg8q-0"
-})(["display:flex;flex-wrap:nowrap;gap:", ";line-height:1;max-width:100%;overflow:hidden;&[data-overflow='inline']{flex-wrap:wrap;}&[data-list]{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;}"], get('space.1'));
-const ItemWrapper = styled.div.withConfig({
-  displayName: "LabelGroup__ItemWrapper",
-  componentId: "sc-6tqg8q-1"
-})(["display:flex;align-items:center;min-height:28px;&.ItemWrapper--hidden{order:9999;pointer-events:none;visibility:hidden;}"]);
-
 // Calculates the width of the overlay to cover the labels/tokens and the expand button.
 const getOverlayWidth = (buttonClientRect, containerRef, overlayPaddingPx) => {
   var _containerRef$current;
@@ -146,7 +136,7 @@ const LabelGroup = ({
   children,
   visibleChildCount,
   overflowStyle = 'overlay',
-  as = 'ul',
+  as: Component = 'ul',
   className
 }) => {
   const containerRef = React.useRef(null);
@@ -165,10 +155,7 @@ const LabelGroup = ({
     bottom: 0,
     toJSON: () => undefined
   });
-  const {
-    theme
-  } = useTheme();
-  const overlayPaddingPx = parseInt(get('space.2')(theme), 10);
+  const overlayPaddingPx = parseInt(theme.space[2], 10);
   const hiddenItemIds = Object.keys(visibilityMap).filter(key => !visibilityMap[key]);
 
   // `overlayWidth` is only needed when we render an overlay
@@ -296,22 +283,23 @@ const LabelGroup = ({
       }
     }
   }, [overflowStyle, isOverflowShown]);
-  const isList = as === 'ul' || as === 'ol';
+  const isList = Component === 'ul' || Component === 'ol';
   const ToggleWrapper = isList ? 'li' : React.Fragment;
+  const ItemWrapperComponent = isList ? 'li' : 'span';
 
   // If truncation is enabled, we need to render based on truncation logic.
-  return visibleChildCount ? /*#__PURE__*/jsxs(StyledLabelGroupContainer, {
+  return visibleChildCount ? /*#__PURE__*/jsxs(Component, {
     ref: containerRef,
     "data-overflow": overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined,
     "data-list": isList || undefined,
-    className: className,
-    as: as,
-    children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapper
+    className: clsx(className, classes.Container),
+    children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapperComponent
     // data-index is used as an identifier we can use in the IntersectionObserver
     , {
       "data-index": index,
-      className: hiddenItemIds.includes(index.toString()) ? 'ItemWrapper--hidden' : undefined,
-      as: isList ? 'li' : 'span',
+      className: clsx(classes.ItemWrapper, {
+        [classes['ItemWrapper--hidden']]: hiddenItemIds.includes(index.toString())
+      }),
       children: child_0
     }, index)), /*#__PURE__*/jsx(ToggleWrapper, {
       children: overflowStyle === 'inline' ? /*#__PURE__*/jsx(InlineToggle, {
@@ -334,11 +322,10 @@ const LabelGroup = ({
         children: children
       })
     })]
-  }) : /*#__PURE__*/jsx(StyledLabelGroupContainer, {
+  }) : /*#__PURE__*/jsx(Component, {
     "data-overflow": "inline",
     "data-list": isList || undefined,
-    as: as,
-    className: className,
+    className: clsx(className, classes.Container),
     children: isList ? React.Children.map(children, (child_1, index_0) => {
       return /*#__PURE__*/jsx("li", {
         children: child_1

package/dist/LabelGroup/LabelGroup.module.css.js

@@ -1,5 +1,5 @@
-import './LabelGroup-eda75c0f.css';
+import './LabelGroup-7d19205a.css';
 
-var classes = {"OverlayContainer":"prc-LabelGroup-OverlayContainer-pt4uv","OverlayInner":"prc-LabelGroup-OverlayInner-qvwGT","CloseButton":"prc-LabelGroup-CloseButton-GyJi3"};
+var classes = {"Container":"prc-LabelGroup-Container-0bBKg","ItemWrapper":"prc-LabelGroup-ItemWrapper-ETvGq","ItemWrapper--hidden":"prc-LabelGroup-ItemWrapper--hidden-HzoA1","OverlayContainer":"prc-LabelGroup-OverlayContainer-pt4uv","OverlayInner":"prc-LabelGroup-OverlayInner-qvwGT","CloseButton":"prc-LabelGroup-CloseButton-GyJi3"};
 
 export { classes as default };

package/dist/NavList/NavList.d.ts

@@ -41,10 +41,10 @@ export type NavListGroupHeadingProps = ActionListGroupHeadingProps;
 export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref"> & React.RefAttributes<HTMLElement>> & {
     Item: PolymorphicForwardRefComponent<"a", NavListItemProps>;
     SubNav: PolymorphicForwardRefComponent<"ul", NavListSubNavProps>;
-    LeadingVisual: React.FC<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
-    TrailingVisual: React.FC<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
+    LeadingVisual: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
+    TrailingVisual: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
     TrailingAction: PolymorphicForwardRefComponent<"button" | "a", ActionListTrailingActionProps>;
-    Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>>;
+    Divider: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<ActionListDividerProps>>;
     Group: React.FC<NavListGroupProps>;
     GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
     GroupHeading: React.FC<ActionListGroupHeadingProps>;

package/dist/NavList/NavList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;AAatB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAqB/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AA6GD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAkCD,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAA;AASpE,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAA;AAQxD,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,6BAA6B,CAAA;IAC9C,0BAA0B,CAAC,EAAE,MAAM,CAAA;CACpC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,mGAgFvB,CAAA;AAKD,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,CAAA;AAqBlE,eAAO,MAAM,OAAO;;;;;;;;;;CAUlB,CAAA"}
+{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;AActB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAqB/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AA+GD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAkCD,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAA;AASpE,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAA;AAQxD,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,6BAA6B,CAAA;IAC9C,0BAA0B,CAAC,EAAE,MAAM,CAAA;CACpC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,mGAgFvB,CAAA;AAKD,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,CAAA;AAqBlE,eAAO,MAAM,OAAO;;;;;;;;;;CAUlB,CAAA"}

package/dist/NavList/NavList.js

@@ -10,6 +10,7 @@ import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import classes from '../ActionList/ActionList.module.css.js';
 import navListClasses from './NavList.module.css.js';
 import { flushSync } from 'react-dom';
+import { isSlot } from '../utils/is-slot.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 const Root = /*#__PURE__*/React.forwardRef((t0, ref) => {
@@ -695,7 +696,7 @@ const NavList = Object.assign(Root, {
   GroupHeading
 });
 function _temp(child) {
-  return /*#__PURE__*/isValidElement(child) && child.type === SubNav;
+  return /*#__PURE__*/isValidElement(child) && (child.type === SubNav || isSlot(child, SubNav));
 }
 function _temp2(child_0) {
   return /*#__PURE__*/isValidElement(child_0) ? child_0.type !== SubNav && child_0.type !== TrailingAction : true;

package/dist/Octicon/Octicon.d.ts

@@ -1,17 +1,18 @@
 import type { IconProps } from '@primer/octicons-react';
 import React from 'react';
-import type { SxProp } from '../sx';
-import type { ComponentProps } from '../utils/types';
 /**
  * @deprecated Use the icon component directly from `@primer/octicons-react` instead
  */
-declare const Octicon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
+export type OcticonProps = {
     icon: React.ElementType;
-    color?: string;
-} & IconProps & SxProp & React.RefAttributes<SVGSVGElement>>, any, SxProp, never>;
+    as?: React.ElementType;
+} & IconProps;
 /**
  * @deprecated Use the icon component directly from `@primer/octicons-react` instead
  */
-export type OcticonProps = ComponentProps<typeof Octicon>;
+declare const Octicon: React.ForwardRefExoticComponent<{
+    icon: React.ElementType;
+    as?: React.ElementType;
+} & IconProps & React.RefAttributes<SVGSVGElement>>;
 export default Octicon;
 //# sourceMappingURL=Octicon.d.ts.map

package/dist/Octicon/Octicon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Octicon.d.ts","sourceRoot":"","sources":["../../src/Octicon/Octicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AASlD;;GAEG;AACH,QAAA,MAAM,OAAO;UAVoB,KAAK,CAAC,WAAW;YAAU,MAAM;iFAgBjE,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACzD,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Octicon.d.ts","sourceRoot":"","sources":["../../src/Octicon/Octicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAAC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,GAAG,SAAS,CAAA;AAExF;;GAEG;AACH,QAAA,MAAM,OAAO;UALqB,KAAK,CAAC,WAAW;SAAO,KAAK,CAAC,WAAW;mDAQzE,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/Octicon/Octicon.js

@@ -1,10 +1,11 @@
 import { c } from 'react-compiler-runtime';
 import React from 'react';
-import styled from 'styled-components';
-import sx from '../sx.js';
 import { jsx } from 'react/jsx-runtime';
 
-const Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
+/**
+ * @deprecated Use the icon component directly from `@primer/octicons-react` instead
+ */
+const Octicon = /*#__PURE__*/React.forwardRef((props, ref) => {
   const $ = c(7);
   let IconComponent;
   let rest;
@@ -36,24 +37,4 @@ const Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
   return t0;
 });
 
-/**
- * @deprecated Use the icon component directly from `@primer/octicons-react` instead
- */
-const Octicon = styled(Icon).withConfig({
-  shouldForwardProp(prop) {
-    return prop !== 'sx';
-  }
-}).withConfig({
-  displayName: "Octicon",
-  componentId: "sc-9kayk9-0"
-})(["", ""], ({
-  color,
-  sx: sxProp
-}) => sx({
-  sx: {
-    color,
-    ...sxProp
-  }
-}));
-
 export { Octicon as default };

package/dist/Overlay/Overlay.d.ts.map

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

package/dist/Overlay/Overlay.js

@@ -1,12 +1,11 @@
 import { c } from 'react-compiler-runtime';
 import React, { useRef, useEffect } from 'react';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
-import { get } from '../constants.js';
 import { Portal } from '../Portal/Portal.js';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
-import { useTheme } from '../ThemeProvider.js';
 import classes from './Overlay.module.css.js';
 import { clsx } from 'clsx';
+import theme from '../theme.js';
 import { jsx } from 'react/jsx-runtime';
 import { useOverlay } from '../hooks/useOverlay.js';
 import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
@@ -116,7 +115,7 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
 
  */
 const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(51);
+  const $ = c(45);
   let anchorSide;
   let ignoreClickRefs;
   let initialFocusRef;
@@ -198,30 +197,11 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const width = t5 === undefined ? "auto" : t5;
   const overlayRef = useRef(null);
   useRefObjectAsForwardedRef(forwardedRef, overlayRef);
-  const {
-    theme
-  } = useTheme();
+  const slideAnimationDistance = parseInt(theme.space[2], 10);
+  const slideAnimationEasing = theme.animation.easeOutCubic;
   let t6;
-  if ($[18] !== theme) {
-    t6 = get("space.2")(theme).replace("px", "");
-    $[18] = theme;
-    $[19] = t6;
-  } else {
-    t6 = $[19];
-  }
-  const slideAnimationDistance = parseInt(t6);
-  let t7;
-  if ($[20] !== theme) {
-    t7 = get("animation.easeOutCubic")(theme);
-    $[20] = theme;
-    $[21] = t7;
-  } else {
-    t7 = $[21];
-  }
-  const slideAnimationEasing = t7;
-  let t8;
-  if ($[22] !== ignoreClickRefs || $[23] !== initialFocusRef || $[24] !== onClickOutside || $[25] !== onEscape || $[26] !== preventFocusOnOpen || $[27] !== returnFocusRef) {
-    t8 = {
+  if ($[18] !== ignoreClickRefs || $[19] !== initialFocusRef || $[20] !== onClickOutside || $[21] !== onEscape || $[22] !== preventFocusOnOpen || $[23] !== returnFocusRef) {
+    t6 = {
       overlayRef,
       returnFocusRef,
       onEscape,
@@ -230,39 +210,39 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       initialFocusRef,
       preventFocusOnOpen
     };
-    $[22] = ignoreClickRefs;
-    $[23] = initialFocusRef;
-    $[24] = onClickOutside;
-    $[25] = onEscape;
-    $[26] = preventFocusOnOpen;
-    $[27] = returnFocusRef;
-    $[28] = t8;
+    $[18] = ignoreClickRefs;
+    $[19] = initialFocusRef;
+    $[20] = onClickOutside;
+    $[21] = onEscape;
+    $[22] = preventFocusOnOpen;
+    $[23] = returnFocusRef;
+    $[24] = t6;
   } else {
-    t8 = $[28];
+    t6 = $[24];
   }
-  useOverlay(t8);
-  let t10;
-  let t9;
-  if ($[29] !== height) {
-    t9 = () => {
+  useOverlay(t6);
+  let t7;
+  let t8;
+  if ($[25] !== height) {
+    t7 = () => {
       var _overlayRef$current;
       if (height === "initial" && (_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.clientHeight) {
         overlayRef.current.style.height = `${overlayRef.current.clientHeight}px`;
       }
     };
-    t10 = [height];
-    $[29] = height;
-    $[30] = t10;
-    $[31] = t9;
+    t8 = [height];
+    $[25] = height;
+    $[26] = t7;
+    $[27] = t8;
   } else {
-    t10 = $[30];
-    t9 = $[31];
+    t7 = $[26];
+    t8 = $[27];
   }
-  useEffect(t9, t10);
-  let t11;
-  let t12;
-  if ($[32] !== anchorSide || $[33] !== slideAnimationDistance || $[34] !== slideAnimationEasing || $[35] !== visibility) {
-    t11 = () => {
+  useEffect(t7, t8);
+  let t10;
+  let t9;
+  if ($[28] !== anchorSide || $[29] !== visibility) {
+    t9 = () => {
       var _overlayRef$current2;
       const {
         x,
@@ -278,27 +258,25 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
         easing: slideAnimationEasing
       });
     };
-    t12 = [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility];
-    $[32] = anchorSide;
-    $[33] = slideAnimationDistance;
-    $[34] = slideAnimationEasing;
-    $[35] = visibility;
-    $[36] = t11;
-    $[37] = t12;
+    t10 = [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility];
+    $[28] = anchorSide;
+    $[29] = visibility;
+    $[30] = t10;
+    $[31] = t9;
   } else {
-    t11 = $[36];
-    t12 = $[37];
+    t10 = $[30];
+    t9 = $[31];
   }
-  useIsomorphicLayoutEffect(t11, t12);
+  useIsomorphicLayoutEffect(t9, t10);
   const leftPosition = left === undefined && right === undefined ? 0 : left;
   const overflowEnabled = useFeatureFlag("primer_react_overlay_overflow");
-  const t13 = overflowEnabled || !preventOverflow ? true : undefined;
-  let t14;
-  if ($[38] !== height || $[39] !== leftPosition || $[40] !== props || $[41] !== responsiveVariant || $[42] !== right || $[43] !== role || $[44] !== t13 || $[45] !== visibility || $[46] !== width) {
-    t14 = /*#__PURE__*/jsx(BaseOverlay, {
+  const t11 = overflowEnabled || !preventOverflow ? true : undefined;
+  let t12;
+  if ($[32] !== height || $[33] !== leftPosition || $[34] !== props || $[35] !== responsiveVariant || $[36] !== right || $[37] !== role || $[38] !== t11 || $[39] !== visibility || $[40] !== width) {
+    t12 = /*#__PURE__*/jsx(BaseOverlay, {
       role: role,
       width: width,
-      "data-reflow-container": t13,
+      "data-reflow-container": t11,
       ref: overlayRef,
       left: leftPosition,
       right: right,
@@ -307,32 +285,32 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       "data-responsive": responsiveVariant,
       ...props
     });
-    $[38] = height;
-    $[39] = leftPosition;
-    $[40] = props;
-    $[41] = responsiveVariant;
-    $[42] = right;
-    $[43] = role;
-    $[44] = t13;
-    $[45] = visibility;
-    $[46] = width;
-    $[47] = t14;
+    $[32] = height;
+    $[33] = leftPosition;
+    $[34] = props;
+    $[35] = responsiveVariant;
+    $[36] = right;
+    $[37] = role;
+    $[38] = t11;
+    $[39] = visibility;
+    $[40] = width;
+    $[41] = t12;
   } else {
-    t14 = $[47];
+    t12 = $[41];
   }
-  let t15;
-  if ($[48] !== portalContainerName || $[49] !== t14) {
-    t15 = /*#__PURE__*/jsx(Portal, {
+  let t13;
+  if ($[42] !== portalContainerName || $[43] !== t12) {
+    t13 = /*#__PURE__*/jsx(Portal, {
       containerName: portalContainerName,
-      children: t14
+      children: t12
     });
-    $[48] = portalContainerName;
-    $[49] = t14;
-    $[50] = t15;
+    $[42] = portalContainerName;
+    $[43] = t12;
+    $[44] = t13;
   } else {
-    t15 = $[50];
+    t13 = $[44];
   }
-  return t15;
+  return t13;
 });
 
 export { BaseOverlay, Overlay as default, heightMap };

package/dist/PageHeader/PageHeader.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ResponsiveValue } from '../hooks/useResponsiveValue';
 import type { LinkProps as BaseLinkProps } from '../Link';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import type { AriaRole } from '../utils/types';
+import type { AriaRole, FCWithSlotMarker } from '../utils/types';
 export type ChildrenPropTypes = {
     className?: string;
     hidden?: boolean | ResponsiveValue<boolean>;
@@ -31,12 +31,12 @@ export type NavigationProps = {
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
 } & ChildrenPropTypes;
 export declare const PageHeader: PolymorphicForwardRefComponent<"div", PageHeaderProps> & {
-    ContextArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
+    ContextArea: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>;
     ParentLink: PolymorphicForwardRefComponent<"a", ParentLinkProps>;
     ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
     TitleArea: PolymorphicForwardRefComponent<"div", TitleAreaProps>;
     ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
-    LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
+    LeadingAction: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>;
     Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
     LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
     Title: React.FC<React.PropsWithChildren<TitleProps>>;

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,EAAC,MAAM,gBAAgB,CAAA;AAM5C,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;AAuFD,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;AAoErB,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;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"}

package/dist/PageHeader/PageHeader.js

@@ -6,6 +6,7 @@ import { areAllValuesTheSame, haveRegularAndWideSameValue } from '../utils/getBr
 import { warning } from '../utils/warning.js';
 import { clsx } from 'clsx';
 import classes from './PageHeader.module.css.js';
+import { isSlot } from '../utils/is-slot.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
 import Heading from '../Heading/Heading.js';
@@ -58,10 +59,10 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
         return;
       }
       for (const child_0 of React.Children.toArray(children)) {
-        if (/*#__PURE__*/React.isValidElement(child_0) && child_0.type === ContextArea) {
+        if (/*#__PURE__*/React.isValidElement(child_0) && (child_0.type === ContextArea || isSlot(child_0, ContextArea))) {
           hasContextArea = true;
         }
-        if (/*#__PURE__*/React.isValidElement(child_0) && child_0.type === LeadingAction) {
+        if (/*#__PURE__*/React.isValidElement(child_0) && (child_0.type === LeadingAction || isSlot(child_0, LeadingAction))) {
           hasLeadingAction = true;
         }
       }
@@ -155,6 +156,7 @@ const ContextArea = t0 => {
   }
   return t4;
 };
+ContextArea.__SLOT__ = Symbol('PageHeader.ContextArea');
 // PageHeader.ParentLink : Only visible on narrow viewports by default to let users navigate up in the hierarchy.
 const ParentLink = /*#__PURE__*/React.forwardRef((t0, ref) => {
   const $ = c(15);
@@ -415,6 +417,7 @@ const LeadingAction = t0 => {
   }
   return t4;
 };
+LeadingAction.__SLOT__ = Symbol('PageHeader.LeadingAction');
 
 // This is reserved for only breadcrumbs.
 const Breadcrumbs = t0 => {

package/dist/PageLayout/{PageLayout-8a294e74.css → PageLayout-a276fa3b.css}

@@ -1,2 +1,2 @@
-body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot-1zlEO{--region-order-header:0;--region-order-pane-start:1;--region-order-content:2;--region-order-pane-end:3;--region-order-footer:4;--spacing-none:0;--spacing-condensed:var(--base-size-16,1rem);--spacing-normal:var(--base-size-16,1rem)}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:100%;--pane-width-medium:100%;--pane-width-large:100%;--pane-max-width-diff:511px}@media screen and (min-width:768px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing:0;--spacing-row:0;--spacing-column:0;--spacing-divider:0;--offset-header:0;--pane-width:0;--pane-min-width:0;--pane-max-width:0;--pane-width-custom:0;--pane-width-size:0;padding:var(--spacing)}.prc-PageLayout-PageLayoutWrapper-s2ao4{display:flex;flex-wrap:wrap;margin-left:auto;margin-right:auto}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-jzDMn{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}@media screen and (min-width:768px){.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-4A4Qm{height:100%;position:relative}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}.prc-PageLayout-Header-mQXK1{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-HeaderContent-dVIQb{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-bofyb{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-b-QRo{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;flex-shrink:1;min-width:1px;order:var(--region-order-content)}.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden=true]){display:none}.prc-PageLayout-Content--F7-I{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content--F7-I:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content--F7-I:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content--F7-I:where([data-width=full]){max-width:100%}.prc-PageLayout-Content--F7-I:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-nGO0U{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}@media screen and (min-width:768px){.prc-PageLayout-PaneWrapper-nGO0U{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-nGO0U:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column)}}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=end]){margin-right:var(--spacing)}.prc-PageLayout-Pane-Vl5LI{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI{overflow:auto}}.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=end]){margin-bottom:var(--spacing)}.prc-PageLayout-FooterWrapper-WZwgZ{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterHorizontalDivider-sNLmj{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-UFWGW{padding:var(--spacing)}
-/*# sourceMappingURL=PageLayout-8a294e74.css.map */
+body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot-1zlEO{--region-order-header:0;--region-order-pane-start:1;--region-order-content:2;--region-order-pane-end:3;--region-order-footer:4;--spacing-none:0;--spacing-condensed:var(--base-size-16,1rem);--spacing-normal:var(--base-size-16,1rem)}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:100%;--pane-width-medium:100%;--pane-width-large:100%;--pane-max-width-diff:511px}@media screen and (min-width:768px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing:0;--spacing-row:0;--spacing-column:0;--spacing-divider:0;--offset-header:0;--pane-width:0;--pane-min-width:0;--pane-max-width:0;--pane-width-custom:0;--pane-width-size:0;padding:var(--spacing)}.prc-PageLayout-PageLayoutWrapper-s2ao4{display:flex;flex-wrap:wrap;margin-left:auto;margin-right:auto}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-jzDMn{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}@media screen and (min-width:768px){.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-4A4Qm{height:100%;position:relative}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}.prc-PageLayout-Header-mQXK1{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-HeaderContent-dVIQb{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-bofyb{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-b-QRo{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;flex-shrink:1;min-width:1px;order:var(--region-order-content)}.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden=true]){display:none}.prc-PageLayout-Content--F7-I{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content--F7-I:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content--F7-I:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content--F7-I:where([data-width=full]){max-width:100%}.prc-PageLayout-Content--F7-I:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-nGO0U{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}@media screen and (min-width:768px){.prc-PageLayout-PaneWrapper-nGO0U{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-nGO0U:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column)}}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=end]){margin-right:var(--spacing)}.prc-PageLayout-Pane-Vl5LI{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI{overflow:auto}}.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=end]){margin-bottom:var(--spacing)}.prc-PageLayout-FooterWrapper-WZwgZ{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterHorizontalDivider-sNLmj{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-UFWGW{padding:var(--spacing)}.prc-PageLayout-DraggableHandle-zPw82{background-color:transparent;cursor:col-resize;inset:0 -2px;position:absolute;transition-delay:.1s}.prc-PageLayout-DraggableHandle-zPw82:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle))}.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true],.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true]:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis))}
+/*# sourceMappingURL=PageLayout-a276fa3b.css.map */

package/dist/PageLayout/PageLayout-a276fa3b.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PageLayout/PageLayout.module.css"],"names":[],"mappings":"AAEA,qCACE,iBACF,CAIA,uCACE,wBAAiB,CAAjB,gBACF,CAEA,qCAEE,uBAAwB,CACxB,2BAA4B,CAC5B,wBAAyB,CACzB,yBAA0B,CAC1B,uBAAwB,CAGxB,gBAAiB,CACjB,4CAAwC,CACxC,yCA0CF,CAxCE,qCAbF,qCAcI,2CAuCJ,CAtCE,CAfF,qCAkBE,uBAAwB,CACxB,wBAAyB,CACzB,uBAAwB,CACxB,2BAgCF,CA9BE,oCAvBF,qCAwBI,wBAAyB,CACzB,yBAA0B,CAC1B,wBA2BJ,CA1BE,CAEA,qCA7BF,qCA8BI,wBAAyB,CACzB,yBAA0B,CAC1B,wBAqBJ,CApBE,CAEA,qCAnCF,qCAoCI,2BAiBJ,CAhBE,CArCF,qCAwCE,WAAY,CACZ,eAAgB,CAChB,kBAAmB,CACnB,mBAAoB,CACpB,iBAAkB,CAClB,cAAe,CACf,kBAAmB,CACnB,kBAAmB,CACnB,qBAAsB,CACtB,mBAAoB,CAGpB,sBACF,CAEA,wCACE,YAAa,CAGb,cAAe,CADf,gBAAiB,CADjB,iBAmBF,CAfE,mEACE,eACF,CAEA,kEACE,gBACF,CAEA,iEACE,cACF,CAEA,mEACE,gBACF,CAGF,wCACE,YAAa,CACb,aAAc,CACd,cAAe,CACf,cACF,CAEA,wCAIE,2CAA8C,CAF9C,4CA6BF,CAzBE,mEACE,YACF,CAEA,mEAIE,uEAA4C,CAH5C,aAAc,CACd,UAGF,CAEA,qEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,+BAMF,CAEA,oCA3BF,wCA6BI,uBAAyB,CADzB,wBAGJ,CADE,CAGF,sCAEE,WAAY,CADZ,iBAuBF,CApBE,iEACE,YACF,CAEA,iEAIE,uEAA4C,CAH5C,aAAc,CACd,SAGF,CAEA,mEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,8BAMF,CAGF,6BAGE,4BAA6B,CAF7B,UAGF,CAEA,oCAEE,sBACF,CAEA,8CAEE,yBACF,CAEA,qCACE,YAAa,CAUb,YAAa,CANb,qBAAsB,CAOtB,WAAY,CACZ,aAAc,CATd,aAAc,CAEd,iCAYF,CAHE,kEACE,YACF,CAGF,8BAOE,WAAY,CADZ,gBAAiB,CADjB,iBAAkB,CADlB,sBAAuB,CAHvB,UAuBF,CAfE,yDACE,eACF,CAEA,wDACE,gBACF,CAEA,uDACE,cACF,CAEA,yDACE,gBACF,CAGF,kCACE,YAAa,CAGb,aAAc,CADd,cAAe,CADf,UA8CF,CA1CE,+DACE,YACF,CAEA,6DAGE,qBAAsB,CADtB,6BAA8B,CAE9B,kCACF,CAEA,+DAGE,6BAA8B,CAD9B,gCAAiC,CAEjC,oCACF,CAEA,oCAxBF,kCA2BI,yBAA2B,CAD3B,sBAAwB,CADxB,UAuBJ,CAnBI,uDAIE,gBAAiB,CAHjB,eAAgB,CAEhB,wBAEF,CAEA,6DAGE,0BAA2B,CAD3B,iCAEF,CAEA,+DAGE,kBAAmB,CADnB,kCAEF,CACF,CAIA,uEAEE,0BACF,CAEA,qEAEE,2BACF,CAGF,2BAGE,sBAAuB,CAFvB,4BAeF,CAXE,oCALF,2BAMI,aAUJ,CATE,CAEA,mDACE,UAKF,CAHE,oCAHF,mDAII,0EAEJ,CADE,CAKF,yEAEE,yBACF,CAEA,uEAEE,4BACF,CAGF,oCAKE,yBAA0B,CAH1B,gCAAiC,CADjC,UAKF,CAEA,8CAEE,4BACF,CAEA,oCAEE,sBACF,CAEA,sCAIE,4BAA6B,CAD7B,iBAAkB,CADlB,YAAa,CADb,iBAAkB,CAIlB,oBACF,CAEA,4CACE,yEACF,CAMA,0HACE,4EACF","file":"PageLayout-a276fa3b.css","sourcesContent":["/* Maintain resize cursor while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] {\n  cursor: col-resize;\n}\n\n/* Disable text selection while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] * {\n  user-select: none;\n}\n\n.PageLayoutRoot {\n  /* Region Order */\n  --region-order-header: 0;\n  --region-order-pane-start: 1;\n  --region-order-content: 2;\n  --region-order-pane-end: 3;\n  --region-order-footer: 4;\n\n  /* Spacing Values */\n  --spacing-none: 0;\n  --spacing-condensed: var(--base-size-16);\n  --spacing-normal: var(--base-size-16);\n\n  @media screen and (min-width: 1012px) {\n    --spacing-normal: var(--base-size-24);\n  }\n\n  /* Pane Width Values */\n  --pane-width-small: 100%;\n  --pane-width-medium: 100%;\n  --pane-width-large: 100%;\n  --pane-max-width-diff: 511px;\n\n  @media screen and (min-width: 768px) {\n    --pane-width-small: 240px;\n    --pane-width-medium: 256px;\n    --pane-width-large: 256px;\n  }\n\n  @media screen and (min-width: 1012px) {\n    --pane-width-small: 256px;\n    --pane-width-medium: 296px;\n    --pane-width-large: 320px;\n  }\n\n  @media screen and (min-width: 1280px) {\n    --pane-max-width-diff: 959px;\n  }\n\n  /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n  --spacing: 0;\n  --spacing-row: 0;\n  --spacing-column: 0;\n  --spacing-divider: 0;\n  --offset-header: 0;\n  --pane-width: 0;\n  --pane-min-width: 0;\n  --pane-max-width: 0;\n  --pane-width-custom: 0;\n  --pane-width-size: 0;\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n  display: flex;\n  margin-right: auto;\n  margin-left: auto;\n  flex-wrap: wrap;\n\n  &:where([data-width='medium']) {\n    max-width: 768px;\n  }\n\n  &:where([data-width='large']) {\n    max-width: 1012px;\n  }\n\n  &:where([data-width='full']) {\n    max-width: 100%;\n  }\n\n  &:where([data-width='xlarge']) {\n    max-width: 1280px;\n  }\n}\n\n.PageLayoutContent {\n  display: flex;\n  flex: 1 1 100%;\n  flex-wrap: wrap;\n  max-width: 100%;\n}\n\n.HorizontalDivider {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: calc(-1 * var(--spacing-divider));\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: calc(-1 * var(--spacing-divider));\n\n  &:where([data-variant='none']) {\n    display: none;\n  }\n\n  &:where([data-variant='line']) {\n    display: block;\n    height: 1px;\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-default);\n  }\n\n  &:where([data-variant='filled']) {\n    display: block;\n    height: var(--base-size-8);\n    background-color: var(--bgColor-inset);\n    box-shadow:\n      /* stylelint-disable-next-line primer/box-shadow */\n      inset 0 -1px 0 0 var(--borderColor-default),\n      inset 0 1px 0 0 var(--borderColor-default);\n  }\n\n  @media screen and (min-width: 768px) {\n    margin-right: 0 !important;\n    margin-left: 0 !important;\n  }\n}\n\n.VerticalDivider {\n  position: relative;\n  height: 100%;\n\n  &:where([data-variant='none']) {\n    display: none;\n  }\n\n  &:where([data-variant='line']) {\n    display: block;\n    width: 1px;\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-default);\n  }\n\n  &:where([data-variant='filled']) {\n    display: block;\n    width: var(--base-size-8);\n    background-color: var(--bgColor-inset);\n    box-shadow:\n      /* stylelint-disable-next-line primer/box-shadow */\n      inset -1px 0 0 0 var(--borderColor-default),\n      inset 1px 0 0 0 var(--borderColor-default);\n  }\n}\n\n.Header {\n  width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--spacing);\n}\n\n.HeaderContent {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--spacing);\n}\n\n.HeaderHorizontalDivider {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: var(--spacing);\n}\n\n.ContentWrapper {\n  display: flex;\n\n  /* Hack to prevent overflowing content from pushing the pane region to the next line */\n  min-width: 1px;\n  flex-direction: column;\n  order: var(--region-order-content);\n\n  /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.\n      Without this, the content region could wrap onto a different line\n      than the pane region on wide viewports if its contents are too wide. */\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n\n  &:where([data-is-hidden='true']) {\n    display: none;\n  }\n}\n\n.Content {\n  width: 100%;\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--spacing);\n  margin-right: auto;\n  margin-left: auto;\n  flex-grow: 1;\n\n  &:where([data-width='medium']) {\n    max-width: 768px;\n  }\n\n  &:where([data-width='large']) {\n    max-width: 1012px;\n  }\n\n  &:where([data-width='full']) {\n    max-width: 100%;\n  }\n\n  &:where([data-width='xlarge']) {\n    max-width: 1280px;\n  }\n}\n\n.PaneWrapper {\n  display: flex;\n  width: 100%;\n  margin-right: 0;\n  margin-left: 0;\n\n  &:where([data-is-hidden='true']) {\n    display: none;\n  }\n\n  &:where([data-position='end']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--spacing-row);\n    flex-direction: column;\n    order: var(--region-order-pane-end);\n  }\n\n  &:where([data-position='start']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--spacing-row);\n    flex-direction: column-reverse;\n    order: var(--region-order-pane-start);\n  }\n\n  @media screen and (min-width: 768px) {\n    width: auto;\n    margin-top: 0 !important;\n    margin-bottom: 0 !important;\n\n    &:where([data-sticky]) {\n      position: sticky;\n      /* stylelint-disable-next-line primer/spacing */\n      top: var(--offset-header);\n      max-height: 100vh;\n    }\n\n    &:where([data-position='end']) {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--spacing-column);\n      flex-direction: row-reverse;\n    }\n\n    &:where([data-position='start']) {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-right: var(--spacing-column);\n      flex-direction: row;\n    }\n  }\n}\n\n.PaneVerticalDivider {\n  &:where([data-position='start']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: var(--spacing);\n  }\n\n  &:where([data-position='end']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--spacing);\n  }\n}\n\n.Pane {\n  width: var(--pane-width-size);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--spacing);\n\n  @media screen and (min-width: 768px) {\n    overflow: auto;\n  }\n\n  &:where([data-resizable]) {\n    width: 100%;\n\n    @media screen and (min-width: 768px) {\n      width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));\n    }\n  }\n}\n\n.PaneHorizontalDivider {\n  &:where([data-position='start']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--spacing);\n  }\n\n  &:where([data-position='end']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--spacing);\n  }\n}\n\n.FooterWrapper {\n  width: 100%;\n  order: var(--region-order-footer);\n\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: var(--spacing);\n}\n\n.FooterHorizontalDivider {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--spacing);\n}\n\n.FooterContent {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--spacing);\n}\n\n.DraggableHandle {\n  position: absolute;\n  inset: 0 -2px;\n  cursor: col-resize;\n  background-color: transparent;\n  transition-delay: 0.1s;\n}\n\n.DraggableHandle:hover {\n  background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n  background-color: var(--bgColor-accent-emphasis);\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n  background-color: var(--bgColor-accent-emphasis);\n}\n"]}