@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.09f015db1

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

@@ -0,0 +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;;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

@@ -0,0 +1,40 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * @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;
+  if ($[0] !== props) {
+    ({
+      icon: IconComponent,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = IconComponent;
+    $[2] = rest;
+  } else {
+    IconComponent = $[1];
+    rest = $[2];
+  }
+  let t0;
+  if ($[3] !== IconComponent || $[4] !== ref || $[5] !== rest) {
+    t0 = /*#__PURE__*/jsx(IconComponent, {
+      ...rest,
+      ref: ref
+    });
+    $[3] = IconComponent;
+    $[4] = ref;
+    $[5] = rest;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  return t0;
+});
+
+export { Octicon as default };

package/dist/Overlay/Overlay.d.ts

@@ -0,0 +1,93 @@
+import type { ComponentPropsWithRef } from 'react';
+import React from 'react';
+import type { AriaRole, Merge } from '../utils/types';
+import type { TouchOrMouseEvent } from '../hooks';
+import type { AnchorSide } from '@primer/behaviors';
+import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
+type StyledOverlayProps = {
+    width?: keyof typeof widthMap;
+    height?: keyof typeof heightMap;
+    maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>;
+    maxWidth?: keyof Omit<typeof widthMap, 'auto'>;
+    visibility?: 'visible' | 'hidden';
+    overflow?: 'auto' | 'hidden' | 'scroll' | 'visible';
+    style?: React.CSSProperties;
+};
+export declare const heightMap: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+    auto: string;
+    initial: string;
+    'fit-content': string;
+};
+declare const widthMap: {
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+    xxlarge: string;
+    auto: string;
+};
+type BaseOverlayProps = {
+    visibility?: 'visible' | 'hidden';
+    'data-test-id'?: unknown;
+    position?: React.CSSProperties['position'];
+    top?: React.CSSProperties['top'];
+    left?: React.CSSProperties['left'];
+    right?: React.CSSProperties['right'];
+    bottom?: React.CSSProperties['bottom'];
+    role?: AriaRole;
+    children?: React.ReactNode;
+    className?: string;
+    responsiveVariant?: 'fullscreen';
+};
+type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>;
+/**
+ * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
+ * selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay`
+ * component handles all behaviors needed by overlay UIs as well as the common styles that all overlays * should have.
+ * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
+ * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
+ * @param maxHeight Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
+ * @param top Optional. Vertical top position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param left Optional. Horizontal left position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning.
+ */
+export declare const BaseOverlay: PolymorphicForwardRefComponent<"div", OwnOverlayProps>;
+type ContainerProps = {
+    anchorSide?: AnchorSide;
+    ignoreClickRefs?: React.RefObject<HTMLElement>[];
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    onClickOutside: (e: TouchOrMouseEvent) => void;
+    onEscape: (e: KeyboardEvent) => void;
+    portalContainerName?: string;
+    preventOverflow?: boolean;
+    preventFocusOnOpen?: boolean;
+    returnFocusRef: React.RefObject<HTMLElement>;
+};
+type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
+/**
+ * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
+ * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
+ * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
+ * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
+ * @param left Optional. Horizontal left position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.
+ * @param onEscape Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.
+ * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
+ * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
+ * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
+ * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
+ * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
+
+ */
+declare const Overlay: PolymorphicForwardRefComponent<"div", internalOverlayProps>;
+export type OverlayProps = ComponentPropsWithRef<typeof Overlay>;
+export default Overlay;
+//# sourceMappingURL=Overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAC9D,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,OAAO,KAAK,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAI/C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAA;AACjD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,OAAO,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC9C,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAA;AAGD,QAAA,MAAM,QAAQ;;;;;;;CAOb,CAAA;AAiBD,KAAK,gBAAgB,GAAG;IACtB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,YAAY,CAAA;CACjC,CAAA;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAA;AAElE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,EA8CnB,8BAA8B,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;AAE3D,KAAK,cAAc,GAAG;IACpB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAA;IAChD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC9C,cAAc,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;CAC7C,CAAA;AAED,KAAK,oBAAoB,GAAG,KAAK,CAAC,eAAe,EAAE,cAAc,CAAC,CAAA;AAElE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,OAAO,EAiFR,8BAA8B,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAA;AAEhE,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,OAAO,CAAC,CAAA;AAEhE,eAAe,OAAO,CAAA"}

package/dist/Overlay/Overlay.js

@@ -0,0 +1,313 @@
+import { c } from 'react-compiler-runtime';
+import React, { useRef, useEffect } from 'react';
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
+import { Portal } from '../Portal/Portal.js';
+import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import classes from './Overlay.module.css.js';
+import { clsx } from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+import { useOverlay } from '../hooks/useOverlay.js';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
+
+const heightMap = {
+  xsmall: '192px',
+  small: '256px',
+  medium: '320px',
+  large: '432px',
+  xlarge: '600px',
+  auto: 'auto',
+  initial: 'auto',
+  // Passing 'initial' initially applies 'auto'
+  'fit-content': 'fit-content'
+};
+const animationDuration = 200;
+function getSlideAnimationStartingVector(anchorSide) {
+  if (anchorSide !== null && anchorSide !== void 0 && anchorSide.endsWith('bottom')) {
+    return {
+      x: 0,
+      y: -1
+    };
+  } else if (anchorSide !== null && anchorSide !== void 0 && anchorSide.endsWith('top')) {
+    return {
+      x: 0,
+      y: 1
+    };
+  } else if (anchorSide !== null && anchorSide !== void 0 && anchorSide.endsWith('right')) {
+    return {
+      x: -1,
+      y: 0
+    };
+  } else if (anchorSide !== null && anchorSide !== void 0 && anchorSide.endsWith('left')) {
+    return {
+      x: 1,
+      y: 0
+    };
+  }
+  return {
+    x: 0,
+    y: 0
+  };
+}
+/**
+ * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
+ * selection options, dialogs, and more. Overlays use shadows to express elevation. The `Overlay`
+ * component handles all behaviors needed by overlay UIs as well as the common styles that all overlays * should have.
+ * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
+ * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
+ * @param maxHeight Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
+ * @param top Optional. Vertical top position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param left Optional. Horizontal left position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning.
+ */
+const BaseOverlay = /*#__PURE__*/React.forwardRef(({
+  visibility,
+  height,
+  width,
+  top,
+  left,
+  right,
+  bottom,
+  position,
+  style: styleFromProps,
+  className,
+  maxHeight,
+  maxWidth,
+  as: Component = 'div',
+  ...rest
+}, forwardedRef) => {
+  return /*#__PURE__*/jsx(Component, {
+    ...rest,
+    ref: forwardedRef,
+    style: {
+      left,
+      right,
+      top,
+      bottom,
+      position,
+      ...styleFromProps
+    },
+    [`data-width-${width}`]: '',
+    [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined,
+    [`data-height-${height}`]: '',
+    [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined,
+    [`data-visibility-${visibility}`]: '',
+    [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined,
+    className: clsx(className, classes.Overlay)
+  });
+});
+/**
+ * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
+ * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
+ * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
+ * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
+ * @param left Optional. Horizontal left position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param onClickOutside  Required. Function to call when clicking outside of the `Overlay`. Typically this function removes the Overlay.
+ * @param onEscape Required. Function to call when user presses `Escape`. Typically this function removes the Overlay.
+ * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
+ * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
+ * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
+ * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
+ * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
+ * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
+
+ */
+const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
+  const $ = c(45);
+  let anchorSide;
+  let ignoreClickRefs;
+  let initialFocusRef;
+  let left;
+  let onClickOutside;
+  let onEscape;
+  let portalContainerName;
+  let preventFocusOnOpen;
+  let props;
+  let responsiveVariant;
+  let returnFocusRef;
+  let right;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[0] !== t0) {
+    ({
+      anchorSide,
+      height: t1,
+      ignoreClickRefs,
+      initialFocusRef,
+      left,
+      onClickOutside,
+      onEscape,
+      portalContainerName,
+      preventOverflow: t2,
+      preventFocusOnOpen,
+      returnFocusRef,
+      right,
+      role: t3,
+      visibility: t4,
+      width: t5,
+      responsiveVariant,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = anchorSide;
+    $[2] = ignoreClickRefs;
+    $[3] = initialFocusRef;
+    $[4] = left;
+    $[5] = onClickOutside;
+    $[6] = onEscape;
+    $[7] = portalContainerName;
+    $[8] = preventFocusOnOpen;
+    $[9] = props;
+    $[10] = responsiveVariant;
+    $[11] = returnFocusRef;
+    $[12] = right;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    anchorSide = $[1];
+    ignoreClickRefs = $[2];
+    initialFocusRef = $[3];
+    left = $[4];
+    onClickOutside = $[5];
+    onEscape = $[6];
+    portalContainerName = $[7];
+    preventFocusOnOpen = $[8];
+    props = $[9];
+    responsiveVariant = $[10];
+    returnFocusRef = $[11];
+    right = $[12];
+    t1 = $[13];
+    t2 = $[14];
+    t3 = $[15];
+    t4 = $[16];
+    t5 = $[17];
+  }
+  const height = t1 === undefined ? "auto" : t1;
+  const preventOverflow = t2 === undefined ? true : t2;
+  const role = t3 === undefined ? "none" : t3;
+  const visibility = t4 === undefined ? "visible" : t4;
+  const width = t5 === undefined ? "auto" : t5;
+  const overlayRef = useRef(null);
+  useRefObjectAsForwardedRef(forwardedRef, overlayRef);
+  let t6;
+  if ($[18] !== ignoreClickRefs || $[19] !== initialFocusRef || $[20] !== onClickOutside || $[21] !== onEscape || $[22] !== preventFocusOnOpen || $[23] !== returnFocusRef) {
+    t6 = {
+      overlayRef,
+      returnFocusRef,
+      onEscape,
+      ignoreClickRefs,
+      onClickOutside,
+      initialFocusRef,
+      preventFocusOnOpen
+    };
+    $[18] = ignoreClickRefs;
+    $[19] = initialFocusRef;
+    $[20] = onClickOutside;
+    $[21] = onEscape;
+    $[22] = preventFocusOnOpen;
+    $[23] = returnFocusRef;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  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`;
+      }
+    };
+    t8 = [height];
+    $[25] = height;
+    $[26] = t7;
+    $[27] = t8;
+  } else {
+    t7 = $[26];
+    t8 = $[27];
+  }
+  useEffect(t7, t8);
+  let t10;
+  let t9;
+  if ($[28] !== anchorSide || $[29] !== visibility) {
+    t9 = () => {
+      var _overlayRef$current2;
+      const {
+        x,
+        y
+      } = getSlideAnimationStartingVector(anchorSide);
+      if (!x && !y || !((_overlayRef$current2 = overlayRef.current) !== null && _overlayRef$current2 !== void 0 && _overlayRef$current2.animate) || visibility === "hidden") {
+        return;
+      }
+      overlayRef.current.animate({
+        transform: [`translate(${8 * x}px, ${8 * y}px)`, "translate(0, 0)"]
+      }, {
+        duration: animationDuration,
+        easing: "cubic-bezier(0.33, 1, 0.68, 1)"
+      });
+    };
+    t10 = [anchorSide, 8, "cubic-bezier(0.33, 1, 0.68, 1)", visibility];
+    $[28] = anchorSide;
+    $[29] = visibility;
+    $[30] = t10;
+    $[31] = t9;
+  } else {
+    t10 = $[30];
+    t9 = $[31];
+  }
+  useIsomorphicLayoutEffect(t9, t10);
+  const leftPosition = left === undefined && right === undefined ? 0 : left;
+  const overflowEnabled = useFeatureFlag("primer_react_overlay_overflow");
+  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": t11,
+      ref: overlayRef,
+      left: leftPosition,
+      right: right,
+      height: height,
+      visibility: visibility,
+      "data-responsive": responsiveVariant,
+      ...props
+    });
+    $[32] = height;
+    $[33] = leftPosition;
+    $[34] = props;
+    $[35] = responsiveVariant;
+    $[36] = right;
+    $[37] = role;
+    $[38] = t11;
+    $[39] = visibility;
+    $[40] = width;
+    $[41] = t12;
+  } else {
+    t12 = $[41];
+  }
+  let t13;
+  if ($[42] !== portalContainerName || $[43] !== t12) {
+    t13 = /*#__PURE__*/jsx(Portal, {
+      containerName: portalContainerName,
+      children: t12
+    });
+    $[42] = portalContainerName;
+    $[43] = t12;
+    $[44] = t13;
+  } else {
+    t13 = $[44];
+  }
+  return t13;
+});
+
+export { BaseOverlay, Overlay as default, heightMap };

package/dist/PageHeader/PageHeader.d.ts

@@ -0,0 +1,50 @@
+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, FCWithSlotMarker } from '../utils/types';
+export type ChildrenPropTypes = {
+    className?: string;
+    hidden?: boolean | ResponsiveValue<boolean>;
+};
+export type PageHeaderProps = {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    as?: React.ElementType | 'header' | 'div';
+    className?: string;
+    role?: AriaRole;
+    hasBorder?: boolean;
+};
+type LinkProps = Pick<React.AnchorHTMLAttributes<HTMLAnchorElement> & BaseLinkProps, 'download' | 'href' | 'hrefLang' | 'media' | 'ping' | 'rel' | 'target' | 'type' | 'referrerPolicy' | 'as'> & {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+};
+export type ParentLinkProps = React.PropsWithChildren<ChildrenPropTypes & LinkProps>;
+export type TitleAreaProps = {
+    variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>;
+} & ChildrenPropTypes;
+export type TitleProps = {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & ChildrenPropTypes;
+export type ActionsProps = React.PropsWithChildren<ChildrenPropTypes>;
+export type NavigationProps = {
+    as?: 'nav' | 'div';
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+} & ChildrenPropTypes;
+export declare const PageHeader: PolymorphicForwardRefComponent<"div", PageHeaderProps> & {
+    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: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>;
+    Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
+    LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
+    Title: React.FC<React.PropsWithChildren<TitleProps>>;
+    TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
+    TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
+    Actions: ({ children, className, hidden }: ActionsProps) => React.JSX.Element;
+    Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
+    Navigation: React.FC<React.PropsWithChildren<NavigationProps>>;
+};
+export {};
+//# sourceMappingURL=PageHeader.d.ts.map

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

@@ -0,0 +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"}