@persona/design-system 0.7.1 → 0.7.2

package/dist/Modal-BN0K8QXi.mjs

@@ -0,0 +1,258 @@
+import { a as styled } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
+import { t as Card_default } from "./Card-Dz6jqJuJ.mjs";
+import { n as Heading$1 } from "./Text-BdluS7Fy.mjs";
+import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "./lib/useEmbeddedSurface.mjs";
+import useModalInsetRight from "./lib/useModalInsetRight.mjs";
+import { n as Stack, t as HStack } from "./Stack-ChsImaEY.mjs";
+import { n as Button$1 } from "./IconButton-CqTPMhjV.mjs";
+import { i as TabBar, r as Tab } from "./TabBar-BepWbJHz.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import { forwardRef, useContext, useEffect, useState } from "react";
+import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "@persona/icons";
+//#region components/Modal/Modal.tsx
+const StyledModalOverlay = styled(ModalOverlay)`
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: ${({ $insetRight }) => $insetRight};
+  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;
+  animation-fill-mode: both;
+  ${({ $hostPending }) => $hostPending && `
+    animation-play-state: paused;
+  `}
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0ms;
+    animation-delay: 0ms;
+    animation-play-state: running;
+  }
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledModal = styled(Modal)`
+  z-index: 10001;
+  outline: none;
+  width: fit-content;
+  max-width: 100%;
+  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
+`;
+/**
+* React Aria keeps the overlay mounted through the exit animation, so announcing the surface from
+* here — rather than from the persistent gate below — releases the host's backdrop exactly when the
+* modal stops being painted.
+*/
+const EmbeddedSurfaceModal = forwardRef(function EmbeddedSurfaceModal({ children, surfaceId }, ref) {
+	useEmbeddedSurface(surfaceId);
+	return /* @__PURE__ */ jsx(StyledModal, {
+		ref,
+		children
+	});
+});
+const EmbeddedSurfaceOverlay = ({ surfaceId, ...props }) => {
+	const isOpen = useContext(OverlayTriggerStateContext)?.isOpen ?? false;
+	const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);
+	const { $insetRight, $transitionMs, ...overlayProps } = props;
+	return /* @__PURE__ */ jsx(StyledModalOverlay, {
+		...overlayProps,
+		$insetRight,
+		$transitionMs,
+		$animationDelayMs: animationDelayMs,
+		$hostPending: isOpen && !ready
+	});
+};
+const ModalCloseButton = styled(Button$1)`
+  display: inline-flex;
+  padding: ${Spacing[2]};
+  border-radius: ${Spacing[1]};
+  width: fit-content;
+  min-width: unset;
+`;
+const ModalFooter = styled(HStack).attrs({
+	justify: "flex-end",
+	align: "center",
+	spacing: Spacing[2]
+})`
+  padding: ${Spacing[3]} ${Spacing[4]};
+  border-top: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+`;
+const ModalHeaderTitle = styled.div`
+  flex: 1;
+`;
+const ModalTrigger = DialogTrigger;
+const ModalContent = StyledModal;
+const ModalClose = (props) => {
+	return /* @__PURE__ */ jsx(Button, {
+		slot: "close",
+		style: {
+			all: "unset",
+			display: "contents"
+		},
+		children: /* @__PURE__ */ jsx(ModalCloseButton, {
+			variant: "text",
+			width: "icon",
+			size: "md",
+			...props,
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		})
+	});
+};
+const ModalTitle = ({ children, ...props }) => {
+	return /* @__PURE__ */ jsx(Heading$1, {
+		size: "sm",
+		color: "primary",
+		as: Heading,
+		slot: "title",
+		...props,
+		children
+	});
+};
+const ModalHeader = styled(HStack)`
+  border-bottom: ${({ $hasTabs, theme }) => $hasTabs ? "none" : `1px solid ${semanticColor(theme, "BorderSubtle", Color.BorderDivider)}`};
+  padding: ${({ $hasTabs }) => $hasTabs ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}` : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};
+`;
+const ModalTabBar = styled(TabBar)`
+  padding-left: ${Spacing[4]};
+`;
+const StyledDialog = styled(Dialog)`
+  outline: none;
+`;
+const StyledCard = styled(Card_default)`
+  position: relative;
+  width: ${({ $size }) => {
+	switch ($size) {
+		case "auto": return "auto";
+		case "full": return "calc(100vw - 160px)";
+		default: return "90vw";
+	}
+}};
+  max-width: ${({ theme, $size }) => {
+	switch ($size) {
+		case "auto": return "auto";
+		case "full": return "calc(100vw - 160px)";
+		default: return theme.modal.width[$size];
+	}
+}};
+  /* TODO: Use breakpoints to make this responsive */
+  max-height: ${({ $size }) => $size === "full" ? "calc(100vh - 160px)" : "85vh"};
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  ${({ $size }) => $size === "full" && `
+    height: calc(100vh - 160px);
+  `}
+  margin-bottom: 0;
+`;
+const StyledModalCardBody = styled(Card_default.Body)`
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  ${({ $noPadding }) => $noPadding ? "padding: 0;" : `
+    padding-left: ${Spacing[4]};
+    padding-right: ${Spacing[4]};
+  `}
+  ${({ $hidden }) => $hidden && "display: none;"}
+`;
+/**
+* Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.
+*/
+const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, portalContainer, ...props }, ref) {
+	const [selectedTabIdx, setSelectedTabIdx] = useState(0);
+	useEffect(() => {
+		setSelectedTabIdx(0);
+	}, [tabs?.length ?? 0]);
+	const titleAndClose = /* @__PURE__ */ jsxs(ModalHeader, {
+		justify: "flex-start",
+		align: "center",
+		spacing: Spacing[2],
+		$hasTabs: Boolean(tabs),
+		children: [/* @__PURE__ */ jsx(ModalHeaderTitle, { children: title ? /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null }), showCloseButton && /* @__PURE__ */ jsx(ModalClose, { "aria-label": "Close" })]
+	});
+	const modalHeader = tabs ? /* @__PURE__ */ jsxs(Stack, { children: [titleAndClose, /* @__PURE__ */ jsx(ModalTabBar, { children: tabs.map((tab, idx) => /* @__PURE__ */ jsx(Tab, {
+		selected: selectedTabIdx === idx,
+		id: `pds-modal_tab-${idx}`,
+		onClick: () => setSelectedTabIdx(idx),
+		"aria-controls": `pds-modal_tab-panel-${idx}`,
+		children: tab.name
+	}, tab.name)) })] }) : titleAndClose;
+	return /* @__PURE__ */ jsx(StyledDialog, {
+		...props,
+		ref,
+		children: /* @__PURE__ */ jsxs(StyledCard, {
+			elevated: true,
+			$size: size,
+			children: [
+				(showCloseButton || title) && modalHeader,
+				tabs ? tabs.map((tab, idx) => /* @__PURE__ */ jsx(StyledModalCardBody, {
+					$noPadding: noBodyPadding,
+					$hidden: selectedTabIdx !== idx,
+					role: tabs ? "tabpanel" : void 0,
+					id: `pds-modal_tab-panel-${tab.name}`,
+					"aria-labelledby": `pds-modal_tab-${tab.name}`,
+					children: typeof tab.contents === "function" ? tab.contents({ portalContainer }) : tab.contents
+				}, tab.name)) : /* @__PURE__ */ jsx(StyledModalCardBody, {
+					$noPadding: noBodyPadding,
+					role: tabs ? "tabpanel" : void 0,
+					id: `pds-modal_tab-panel-${selectedTabIdx}`,
+					"aria-labelledby": `pds-modal_tab-${selectedTabIdx}`,
+					children
+				}),
+				footer && /* @__PURE__ */ jsx(ModalFooter, { children: footer })
+			]
+		})
+	});
+});
+const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size = "md", title, footer, tabs, defaultOpen, onOpenChange, isDismissable = false, isKeyboardDismissDisabled = false, open }) => {
+	const [portalContainer, setPortalContainer] = useState(null);
+	const surfaceId = useEmbeddedSurfaceId();
+	const { insetRight: modalInsetRight, panelState } = useModalInsetRight();
+	const transitionMs = panelState === "opening" ? 425 : panelState === "closing" ? 200 : 0;
+	const content = /* @__PURE__ */ jsx(ModalCard, {
+		size,
+		title,
+		footer,
+		tabs,
+		noBodyPadding,
+		...contentProps,
+		portalContainer,
+		children: typeof children === "function" ? children({ portalContainer }) : children
+	});
+	return /* @__PURE__ */ jsxs(DialogTrigger, {
+		isOpen: open,
+		defaultOpen,
+		onOpenChange,
+		children: [trigger ? /* @__PURE__ */ jsx(Pressable, { children: trigger }) : null, /* @__PURE__ */ jsx(EmbeddedSurfaceOverlay, {
+			surfaceId,
+			$insetRight: modalInsetRight,
+			$transitionMs: transitionMs,
+			isDismissable,
+			isKeyboardDismissDisabled,
+			shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
+			children: /* @__PURE__ */ jsx(EmbeddedSurfaceModal, {
+				ref: setPortalContainer,
+				surfaceId,
+				children: content
+			})
+		})]
+	});
+};
+var Modal_default = Object.assign(Modal$1, { Title: ModalTitle });
+//#endregion
+export { Modal_default as i, ModalContent as n, ModalTrigger as r, ModalClose as t };
+
+//# sourceMappingURL=Modal-BN0K8QXi.mjs.map

package/dist/Modal-BN0K8QXi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-BN0K8QXi.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  Button as AriaButton,\n  Dialog,\n  DialogTrigger,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay,\n  type ModalOverlayProps,\n  OverlayTriggerStateContext,\n  Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from 'design-system/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  @keyframes overlayShow {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  background-color: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: ${({ $insetRight }) => $insetRight};\n  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-fill-mode: both;\n  ${({ $hostPending }) =>\n    $hostPending &&\n    `\n    animation-play-state: paused;\n  `}\n  @media (prefers-reduced-motion: reduce) {\n    animation-duration: 0ms;\n    animation-delay: 0ms;\n    animation-play-state: running;\n  }\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n  z-index: 10001;\n  outline: none;\n  width: fit-content;\n  max-width: 100%;\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n`;\n\n/**\n * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n */\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n  function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n    useEmbeddedSurface(surfaceId);\n    return <StyledModal ref={ref}>{children}</StyledModal>;\n  },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n  $insetRight: string;\n  $transitionMs: number;\n  surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  const isOpen = state?.isOpen ?? false;\n  const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n  const { $insetRight, $transitionMs, ...overlayProps } = props;\n  return (\n    <StyledModalOverlay\n      {...overlayProps}\n      $insetRight={$insetRight}\n      $transitionMs={$transitionMs}\n      $animationDelayMs={animationDelayMs}\n      $hostPending={isOpen && !ready}\n    />\n  );\n};\n\nconst ModalCloseButton = styled(Button)`\n  display: inline-flex;\n  padding: ${Spacing[2]};\n  border-radius: ${Spacing[1]};\n  width: fit-content;\n  min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n  justify: 'flex-end',\n  align: 'center',\n  spacing: Spacing[2],\n})`\n  padding: ${Spacing[3]} ${Spacing[4]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n  flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n  return (\n    <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n      <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n        <XIcon />\n      </ModalCloseButton>\n    </AriaButton>\n  );\n};\n\nexport interface ModalTitleProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/** Props passed to modal content render functions. */\nexport interface ModalRenderProps {\n  /** Element that floating content should use as its portal container. */\n  portalContainer: HTMLDivElement | null;\n}\n\ntype ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n  return (\n    <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n      {children}\n    </Heading>\n  );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n  border-bottom: ${({ $hasTabs, theme }) =>\n    $hasTabs ? 'none' : `1px solid ${semanticColor(theme, 'BorderSubtle', Color.BorderDivider)}`};\n  padding: ${({ $hasTabs }) =>\n    $hasTabs\n      ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n      : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n  padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n  outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' | 'md' | 'lg' | 'xl' | 'full' }>`\n  position: relative;\n  width: ${({ $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return '90vw';\n    }\n  }};\n  max-width: ${({ theme, $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return theme.modal.width[$size];\n    }\n  }};\n  /* TODO: Use breakpoints to make this responsive */\n  max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${({ $size }) =>\n    $size === 'full' &&\n    `\n    height: calc(100vh - 160px);\n  `}\n  margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n  /**\n   * Display X button to close popover\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer content\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   * Tab contents can be render functions that receive the modal portal container.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Title of the modal\n   */\n  title?: ReactNode;\n\n  /**\n   * Children content\n   */\n  children?: ReactNode;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Additional props for the Dialog element\n   */\n  className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n  portalContainer: HTMLDivElement | null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n  $noPadding?: boolean;\n  $hidden?: boolean;\n}>`\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  ${({ $noPadding }) =>\n    $noPadding\n      ? 'padding: 0;'\n      : `\n    padding-left: ${Spacing[4]};\n    padding-right: ${Spacing[4]};\n  `}\n  ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/**\n * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n */\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n  {\n    title,\n    children,\n    showCloseButton = true,\n    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\n  const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n  const tabCount = tabs?.length ?? 0;\n\n  useEffect(() => {\n    setSelectedTabIdx(0);\n  }, [tabCount]);\n\n  const titleAndClose = (\n    <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n      <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n      {showCloseButton && <ModalClose aria-label='Close' />}\n    </ModalHeader>\n  );\n\n  const modalHeader = tabs ? (\n    <Stack>\n      {titleAndClose}\n      <ModalTabBar>\n        {tabs.map((tab, idx) => (\n          <Tab\n            key={tab.name}\n            selected={selectedTabIdx === idx}\n            id={`pds-modal_tab-${idx}`}\n            onClick={() => setSelectedTabIdx(idx)}\n            aria-controls={`pds-modal_tab-panel-${idx}`}\n          >\n            {tab.name}\n          </Tab>\n        ))}\n      </ModalTabBar>\n    </Stack>\n  ) : (\n    titleAndClose\n  );\n\n  return (\n    <StyledDialog {...props} ref={ref}>\n      <StyledCard elevated $size={size}>\n        {(showCloseButton || title) && modalHeader}\n        {tabs ? (\n          tabs.map((tab, idx) => (\n            <StyledModalCardBody\n              key={tab.name}\n              $noPadding={noBodyPadding}\n              $hidden={selectedTabIdx !== idx}\n              role={tabs ? 'tabpanel' : undefined}\n              id={`pds-modal_tab-panel-${tab.name}`}\n              aria-labelledby={`pds-modal_tab-${tab.name}`}\n            >\n              {typeof tab.contents === 'function'\n                ? tab.contents({ portalContainer })\n                : tab.contents}\n            </StyledModalCardBody>\n          ))\n        ) : (\n          <StyledModalCardBody\n            $noPadding={noBodyPadding}\n            role={tabs ? 'tabpanel' : undefined}\n            id={`pds-modal_tab-panel-${selectedTabIdx}`}\n            aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n          >\n            {children}\n          </StyledModalCardBody>\n        )}\n\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </StyledCard>\n    </StyledDialog>\n  );\n});\n\ninterface TabView {\n  name: string;\n  contents: ModalRenderable;\n  badge?: React.ReactElement;\n  disabled?: boolean;\n  'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n  /**\n   * Title of the Card\n   */\n  title?: string;\n\n  /**\n   * Component to use as trigger. React Aria trigger props will be merged with this element.\n   */\n  trigger?: ComponentProps<typeof Pressable>['children'];\n\n  /**\n   * Props to apply to Modal.Card within\n   */\n  contentProps?: ModalCardProps;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer section intended for actions.\n   * You can pass in Buttons directly and they will render in a HStack.\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Children content\n   */\n  children?: ModalRenderable;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   * Can also be set via contentProps.noBodyPadding.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Controls whether the modal is open (controlled)\n   */\n  open?: boolean;\n\n  /**\n   * Default open state (uncontrolled)\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Handler called when open state changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Whether the modal can be dismissed by clicking outside or pressing escape\n   */\n  isDismissable?: boolean;\n\n  /**\n   * Whether pressing the escape key closes the modal\n   */\n  isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n  children,\n  trigger,\n  contentProps,\n  noBodyPadding = false,\n  size = 'md',\n  title,\n  footer,\n  tabs,\n  defaultOpen,\n  onOpenChange,\n  isDismissable = false,\n  isKeyboardDismissDisabled = false,\n  open,\n}: ModalProps) => {\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n  const surfaceId = useEmbeddedSurfaceId();\n  const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n  const transitionMs =\n    panelState === 'opening'\n      ? SIDEBAR_OPEN_TRANSITION_MS\n      : panelState === 'closing'\n        ? SIDEBAR_CLOSE_TRANSITION_MS\n        : 0;\n\n  const content = (\n    <ModalCard\n      size={size}\n      title={title}\n      footer={footer}\n      tabs={tabs}\n      noBodyPadding={noBodyPadding}\n      {...contentProps}\n      portalContainer={portalContainer}\n    >\n      {typeof children === 'function' ? children({ portalContainer }) : children}\n    </ModalCard>\n  );\n\n  // Wrap trigger element to ensure it works with react-aria-components\n  const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {wrappedTrigger}\n      <EmbeddedSurfaceOverlay\n        surfaceId={surfaceId}\n        $insetRight={modalInsetRight}\n        $transitionMs={transitionMs}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n      >\n        <EmbeddedSurfaceModal ref={setPortalContainer} surfaceId={surfaceId}>\n          {content}\n        </EmbeddedSurfaceModal>\n      </EmbeddedSurfaceOverlay>\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}

package/dist/Modal-Dwq-QBw_.d.mts

@@ -0,0 +1,145 @@
+import { r as ButtonProps } from "./Button-Dhiund3f.mjs";
+import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/Modal/Modal.d.ts
+declare const ModalTrigger: typeof DialogTrigger;
+declare const ModalContent: _$styled_components0.StyledComponent<any, any, any, any>;
+declare const ModalClose: (props: ButtonProps) => _$react_jsx_runtime0.JSX.Element;
+interface ModalTitleProps {
+  children: ReactNode;
+  className?: string;
+}
+/** Props passed to modal content render functions. */
+interface ModalRenderProps {
+  /** Element that floating content should use as its portal container. */
+  portalContainer: HTMLDivElement | null;
+}
+type ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);
+interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
+  /**
+   * Display X button to close popover
+   */
+  showCloseButton?: boolean;
+  /**
+   * Max width of the modal
+   */
+  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';
+  /**
+   * Footer content
+   */
+  footer?: ReactNode;
+  /**
+   * Renders tabs within the modal.
+   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
+   * Overrides `children`.
+   * Tab contents can be render functions that receive the modal portal container.
+   */
+  tabs?: TabView[];
+  /**
+   * Title of the modal
+   */
+  title?: ReactNode;
+  /**
+   * Children content
+   */
+  children?: ReactNode;
+  /**
+   * When true, removes horizontal and vertical padding from the body. Defaults to false.
+   */
+  noBodyPadding?: boolean;
+  /**
+   * Additional props for the Dialog element
+   */
+  className?: string;
+}
+interface TabView {
+  name: string;
+  contents: ModalRenderable;
+  badge?: React.ReactElement;
+  disabled?: boolean;
+  'data-tour-target'?: string;
+}
+interface ModalProps {
+  /**
+   * Title of the Card
+   */
+  title?: string;
+  /**
+   * Component to use as trigger. React Aria trigger props will be merged with this element.
+   */
+  trigger?: ComponentProps<typeof Pressable>['children'];
+  /**
+   * Props to apply to Modal.Card within
+   */
+  contentProps?: ModalCardProps;
+  /**
+   * Max width of the modal
+   */
+  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';
+  /**
+   * Footer section intended for actions.
+   * You can pass in Buttons directly and they will render in a HStack.
+   */
+  footer?: ReactNode;
+  /**
+   * Renders tabs within the modal.
+   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
+   * Overrides `children`.
+   */
+  tabs?: TabView[];
+  /**
+   * Children content
+   */
+  children?: ModalRenderable;
+  /**
+   * When true, removes horizontal and vertical padding from the body. Defaults to false.
+   * Can also be set via contentProps.noBodyPadding.
+   */
+  noBodyPadding?: boolean;
+  /**
+   * Controls whether the modal is open (controlled)
+   */
+  open?: boolean;
+  /**
+   * Default open state (uncontrolled)
+   */
+  defaultOpen?: boolean;
+  /**
+   * Handler called when open state changes
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Whether the modal can be dismissed by clicking outside or pressing escape
+   */
+  isDismissable?: boolean;
+  /**
+   * Whether pressing the escape key closes the modal
+   */
+  isKeyboardDismissDisabled?: boolean;
+}
+declare const _default: (({
+  children,
+  trigger,
+  contentProps,
+  noBodyPadding,
+  size,
+  title,
+  footer,
+  tabs,
+  defaultOpen,
+  onOpenChange,
+  isDismissable,
+  isKeyboardDismissDisabled,
+  open
+}: ModalProps) => _$react_jsx_runtime0.JSX.Element) & {
+  Title: ({
+    children,
+    ...props
+  }: ModalTitleProps) => _$react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { ModalTitleProps as a, ModalRenderProps as i, ModalContent as n, ModalTrigger as o, ModalProps as r, _default as s, ModalClose as t };
+//# sourceMappingURL=Modal-Dwq-QBw_.d.mts.map

package/dist/Modal.d.mts

@@ -1,145 +1,2 @@
-import { r as ButtonProps } from "./Button-HodDf_bB.mjs";
-import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
-import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region components/Modal/Modal.d.ts
-declare const ModalTrigger: typeof DialogTrigger;
-declare const ModalContent: _$styled_components0.StyledComponent<any, any, any, any>;
-declare const ModalClose: (props: ButtonProps) => _$react_jsx_runtime0.JSX.Element;
-interface ModalTitleProps {
-  children: ReactNode;
-  className?: string;
-}
-/** Props passed to modal content render functions. */
-interface ModalRenderProps {
-  /** Element that floating content should use as its portal container. */
-  portalContainer: HTMLDivElement | null;
-}
-type ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);
-interface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {
-  /**
-   * Display X button to close popover
-   */
-  showCloseButton?: boolean;
-  /**
-   * Max width of the modal
-   */
-  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';
-  /**
-   * Footer content
-   */
-  footer?: ReactNode;
-  /**
-   * Renders tabs within the modal.
-   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
-   * Overrides `children`.
-   * Tab contents can be render functions that receive the modal portal container.
-   */
-  tabs?: TabView[];
-  /**
-   * Title of the modal
-   */
-  title?: ReactNode;
-  /**
-   * Children content
-   */
-  children?: ReactNode;
-  /**
-   * When true, removes horizontal and vertical padding from the body. Defaults to false.
-   */
-  noBodyPadding?: boolean;
-  /**
-   * Additional props for the Dialog element
-   */
-  className?: string;
-}
-interface TabView {
-  name: string;
-  contents: ModalRenderable;
-  badge?: React.ReactElement;
-  disabled?: boolean;
-  'data-tour-target'?: string;
-}
-interface ModalProps {
-  /**
-   * Title of the Card
-   */
-  title?: string;
-  /**
-   * Component to use as trigger. React Aria trigger props will be merged with this element.
-   */
-  trigger?: ComponentProps<typeof Pressable>['children'];
-  /**
-   * Props to apply to Modal.Card within
-   */
-  contentProps?: ModalCardProps;
-  /**
-   * Max width of the modal
-   */
-  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';
-  /**
-   * Footer section intended for actions.
-   * You can pass in Buttons directly and they will render in a HStack.
-   */
-  footer?: ReactNode;
-  /**
-   * Renders tabs within the modal.
-   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.
-   * Overrides `children`.
-   */
-  tabs?: TabView[];
-  /**
-   * Children content
-   */
-  children?: ModalRenderable;
-  /**
-   * When true, removes horizontal and vertical padding from the body. Defaults to false.
-   * Can also be set via contentProps.noBodyPadding.
-   */
-  noBodyPadding?: boolean;
-  /**
-   * Controls whether the modal is open (controlled)
-   */
-  open?: boolean;
-  /**
-   * Default open state (uncontrolled)
-   */
-  defaultOpen?: boolean;
-  /**
-   * Handler called when open state changes
-   */
-  onOpenChange?: (isOpen: boolean) => void;
-  /**
-   * Whether the modal can be dismissed by clicking outside or pressing escape
-   */
-  isDismissable?: boolean;
-  /**
-   * Whether pressing the escape key closes the modal
-   */
-  isKeyboardDismissDisabled?: boolean;
-}
-declare const _default: (({
-  children,
-  trigger,
-  contentProps,
-  noBodyPadding,
-  size,
-  title,
-  footer,
-  tabs,
-  defaultOpen,
-  onOpenChange,
-  isDismissable,
-  isKeyboardDismissDisabled,
-  open
-}: ModalProps) => _$react_jsx_runtime0.JSX.Element) & {
-  Title: ({
-    children,
-    ...props
-  }: ModalTitleProps) => _$react_jsx_runtime0.JSX.Element;
-};
-//#endregion
-export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };
-//# sourceMappingURL=Modal.d.mts.map
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "./Modal-Dwq-QBw_.mjs";
+export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/{PageHeader-DJOlcAiW.mjs → PageHeader-BTtm3hRQ.mjs}

@@ -65,4 +65,4 @@ const PageHeader = ({ title, breadcrumbs, subtitle, level = "product", prepend,
 //#endregion
 export { PageHeaderContainer as n, PageHeader as t };
 
-//# sourceMappingURL=PageHeader-DJOlcAiW.mjs.map
+//# sourceMappingURL=PageHeader-BTtm3hRQ.mjs.map

package/dist/{PageHeader-DJOlcAiW.mjs.map → PageHeader-BTtm3hRQ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"PageHeader-DJOlcAiW.mjs","names":[],"sources":["../components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Breadcrumbs, { type BreadcrumbsProps } from 'design-system/components/Breadcrumbs';\nimport { Heading, Paragraph } from 'design-system/components/Text';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\n\nexport const PageHeaderContainer = styled.header`\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  padding: ${Spacing[3]} ${Spacing[5]};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  box-sizing: border-box;\n  min-height: 56px; /* Standardize height for most PageHeaders */\n`;\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex: 1;\n  align-items: center;\n  h1 {\n    margin: 0;\n    ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  }\n  p {\n    margin: 0 0 0 ${Spacing[2]};\n    ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n  }\n`;\n\nconst LeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n`;\n\ninterface PageHeaderCommonProps {\n  level?: 'product' | 'detail';\n  prepend?: ReactNode;\n  append?: ReactNode;\n  children?: ReactNode;\n}\n\n/** Exactly one heading source is required: either `title` or `breadcrumbs`. */\nexport type PageHeaderProps = PageHeaderCommonProps &\n  (\n    | { title: ReactNode; subtitle?: ReactNode; breadcrumbs?: never }\n    | {\n        title?: never;\n        /**\n         * The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it\n         * carried (e.g. an object ID) into the current crumb, with a copy action if useful.\n         */\n        subtitle?: never;\n        /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */\n        breadcrumbs: BreadcrumbsProps;\n      }\n  );\n\nconst PageHeader = ({\n  title,\n  breadcrumbs,\n  subtitle,\n  level = 'product',\n  prepend,\n  append,\n  children,\n  ...props\n}: PageHeaderProps) => (\n  <PageHeaderContainer {...props}>\n    <LeftContainer>\n      {prepend}\n      <TitleContainer>\n        {breadcrumbs ? (\n          <Breadcrumbs size='lg' {...breadcrumbs} />\n        ) : (\n          <>\n            {level === 'product' && (\n              <Heading as='h1' size='sm'>\n                {title}\n              </Heading>\n            )}\n            {level === 'detail' && (\n              <Paragraph as='h1' size='lg' color='primary'>\n                {title}\n              </Paragraph>\n            )}\n          </>\n        )}\n        {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n      </TitleContainer>\n      {append}\n    </LeftContainer>\n    {children && <RightContainer>{children}</RightContainer>}\n  </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AAQA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;8BAC9E,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;;AAK9G,MAAM,iBAAiB,OAAO,GAAG;;;;;;MAM3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;oBAG1C,QAAQ,GAAG;MACzB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;AAIhE,MAAM,gBAAgB,OAAO,GAAG;;;SAGvB,QAAQ,GAAG;;AAGpB,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;AA0B5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,QAAQ,WACR,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD,EAAA,UAAA;EACG;EACD,qBAAC,gBAAD,EAAA,UAAA,CACG,cACC,oBAAC,aAAD;GAAa,MAAK;GAAK,GAAI;GAAe,CAAA,GAE1C,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,aACT,oBAAC,SAAD;GAAS,IAAG;GAAK,MAAK;aACnB;GACO,CAAA,EAEX,UAAU,YACT,oBAAC,WAAD;GAAW,IAAG;GAAK,MAAK;GAAK,OAAM;aAChC;GACS,CAAA,CAEb,EAAA,CAAA,EAEJ,YAAY,oBAAC,WAAD;GAAW,MAAK;aAAM;GAAqB,CAAA,CACzC,EAAA,CAAA;EAChB;EACa,EAAA,CAAA,EACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}
+{"version":3,"file":"PageHeader-BTtm3hRQ.mjs","names":[],"sources":["../components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Breadcrumbs, { type BreadcrumbsProps } from 'design-system/components/Breadcrumbs';\nimport { Heading, Paragraph } from 'design-system/components/Text';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\n\nexport const PageHeaderContainer = styled.header`\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  padding: ${Spacing[3]} ${Spacing[5]};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  box-sizing: border-box;\n  min-height: 56px; /* Standardize height for most PageHeaders */\n`;\n\nconst TitleContainer = styled.div`\n  display: flex;\n  flex: 1;\n  align-items: center;\n  h1 {\n    margin: 0;\n    ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  }\n  p {\n    margin: 0 0 0 ${Spacing[2]};\n    ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n  }\n`;\n\nconst LeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n`;\n\ninterface PageHeaderCommonProps {\n  level?: 'product' | 'detail';\n  prepend?: ReactNode;\n  append?: ReactNode;\n  children?: ReactNode;\n}\n\n/** Exactly one heading source is required: either `title` or `breadcrumbs`. */\nexport type PageHeaderProps = PageHeaderCommonProps &\n  (\n    | { title: ReactNode; subtitle?: ReactNode; breadcrumbs?: never }\n    | {\n        title?: never;\n        /**\n         * The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it\n         * carried (e.g. an object ID) into the current crumb, with a copy action if useful.\n         */\n        subtitle?: never;\n        /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */\n        breadcrumbs: BreadcrumbsProps;\n      }\n  );\n\nconst PageHeader = ({\n  title,\n  breadcrumbs,\n  subtitle,\n  level = 'product',\n  prepend,\n  append,\n  children,\n  ...props\n}: PageHeaderProps) => (\n  <PageHeaderContainer {...props}>\n    <LeftContainer>\n      {prepend}\n      <TitleContainer>\n        {breadcrumbs ? (\n          <Breadcrumbs size='lg' {...breadcrumbs} />\n        ) : (\n          <>\n            {level === 'product' && (\n              <Heading as='h1' size='sm'>\n                {title}\n              </Heading>\n            )}\n            {level === 'detail' && (\n              <Paragraph as='h1' size='lg' color='primary'>\n                {title}\n              </Paragraph>\n            )}\n          </>\n        )}\n        {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n      </TitleContainer>\n      {append}\n    </LeftContainer>\n    {children && <RightContainer>{children}</RightContainer>}\n  </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AAQA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;8BAC9E,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;;AAK9G,MAAM,iBAAiB,OAAO,GAAG;;;;;;MAM3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;oBAG1C,QAAQ,GAAG;MACzB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;AAIhE,MAAM,gBAAgB,OAAO,GAAG;;;SAGvB,QAAQ,GAAG;;AAGpB,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;AA0B5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,QAAQ,WACR,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD,EAAA,UAAA;EACG;EACD,qBAAC,gBAAD,EAAA,UAAA,CACG,cACC,oBAAC,aAAD;GAAa,MAAK;GAAK,GAAI;GAAe,CAAA,GAE1C,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,aACT,oBAAC,SAAD;GAAS,IAAG;GAAK,MAAK;aACnB;GACO,CAAA,EAEX,UAAU,YACT,oBAAC,WAAD;GAAW,IAAG;GAAK,MAAK;GAAK,OAAM;aAChC;GACS,CAAA,CAEb,EAAA,CAAA,EAEJ,YAAY,oBAAC,WAAD;GAAW,MAAK;aAAM;GAAqB,CAAA,CACzC,EAAA,CAAA;EAChB;EACa,EAAA,CAAA,EACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}

package/dist/PageHeader.d.mts

@@ -1,4 +1,4 @@
-import { r as BreadcrumbsProps } from "./Breadcrumbs-B6JyoS8n.mjs";
+import { r as BreadcrumbsProps } from "./Breadcrumbs-CP7eUYUy.mjs";
 import { ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/PageLayoutFrame.d.mts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region patterns/PageLayout/PageLayoutFrame.d.ts
+type PageLayoutWidth = 'standard' | 'wide';
+interface PageLayoutChromeProps {
+  /**
+   * `standard` uses the fixed grid (centered, max 1408px). `wide` uses the fluid grid.
+   *
+   * @defaultValue 'standard'
+   */
+  width?: PageLayoutWidth;
+  /** Tab group. Sits above the page notice and scrolls with the page. Omit to skip the region and its gap. */
+  tabs?: ReactNode;
+  /** Page notice under the tabs. Omit to skip the region and its gap. */
+  pageNotice?: ReactNode;
+}
+declare const PageLayoutFrame: ({
+  width,
+  tabs,
+  pageNotice,
+  children
+}: PageLayoutChromeProps & {
+  children: ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageLayoutChromeProps, PageLayoutFrame, PageLayoutWidth };
+//# sourceMappingURL=PageLayoutFrame.d.mts.map

package/dist/{PageSelector-BMz2Q4P6.d.mts → PageSelector-CeGC84N1.d.mts}

@@ -1,5 +1,5 @@
-import { n as HStackProps } from "./Stack-8KGPQp0u.mjs";
-import { t as PaginationParams } from "./types-CcZbBH0e.mjs";
+import { n as HStackProps } from "./Stack-RVptVTVi.mjs";
+import { t as PaginationParams } from "./types-ChkiGhjQ.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -27,4 +27,4 @@ declare function PageSelector({
 }: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageInput as n, PageSelector as r, PAGE_LIMIT_BEFORE_SCROLL_MODE as t };
-//# sourceMappingURL=PageSelector-BMz2Q4P6.d.mts.map
+//# sourceMappingURL=PageSelector-CeGC84N1.d.mts.map