@persona/design-system 0.10.6 → 0.10.7

package/dist/{Grid-BtTuj5mR.mjs.map → Grid-CYpOqTUu.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Grid-BtTuj5mR.mjs","names":[],"sources":["../src/components/Grid/Grid.tsx","../src/components/Grid/GridItem.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const GRID_BREAKPOINTS = { sm: 768, md: 1024, lg: 1408 } as const;\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg';\n\nconst GridBreakpointContext = createContext<Breakpoint>('md');\n\n/** Breakpoint of the nearest `Grid`, measured from that grid's width. */\nexport const useGridBreakpoint = (): Breakpoint => useContext(GridBreakpointContext);\n\nconst getBreakpoint = (width: number): Breakpoint => {\n  if (width >= GRID_BREAKPOINTS.lg) {\n    return 'lg';\n  }\n  if (width >= GRID_BREAKPOINTS.md) {\n    return 'md';\n  }\n  if (width >= GRID_BREAKPOINTS.sm) {\n    return 'sm';\n  }\n  return 'xs';\n};\n\nconst useMeasuredGridBreakpoint = (ref: RefObject<HTMLDivElement>) => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>('md');\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n    const update = () => setBreakpoint(getBreakpoint(node.offsetWidth));\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [ref]);\n  return breakpoint;\n};\n\nconst Root = styled.div<{ $mode: GridProps['mode']; $breakpoint: Breakpoint }>`\n  display: grid;\n  width: 100%;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  box-sizing: border-box;\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' &&\n    css`\n      min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n    `}\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' || $breakpoint === 'sm'\n      ? css`\n          gap: ${Spacing[3]};\n          padding-inline: ${Spacing[5]};\n        `\n      : css`\n          gap: ${Spacing[4]};\n          padding-inline: ${Spacing[6]};\n        `}\n\n  // max-width equals the lg threshold; offsetWidth reads the clamped border-box width and getBreakpoint uses >=, so the clamp stays 'lg'\n  ${({ $mode, $breakpoint }) =>\n    $mode === 'fixed' &&\n    $breakpoint === 'lg' &&\n    css`\n      max-width: ${GRID_BREAKPOINTS.lg}px;\n      margin-inline: auto;\n    `}\n`;\n\nexport interface GridProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Selects the grid width behavior at the large breakpoint. `fixed` centers the grid at a\n   * maximum width of 1408px, while `fluid` fills the available width.\n   *\n   * Breakpoints:\n   * - ≤767px: 12 columns, 24px margins, 12px gutters, and a 767px minimum width.\n   * - 768–1023px: 12 columns, 24px margins, 12px gutters, and 100% width.\n   * - 1024–1407px: 12 columns, 32px margins, 16px gutters, and 100% width.\n   * - ≥1408px: 12 columns, 32px margins, 16px gutters, and either fixed or fluid width.\n   */\n  mode: 'fixed' | 'fluid';\n  children: ReactNode;\n}\n\n/**\n * Provides a 12-column CSS grid that measures its own width with a ResizeObserver for responsive\n * horizontal margins and gutters. Vertical spacing is left to the consumer.\n *\n * The grid measures breakpoints against its own width rather than the viewport. Use `fixed` to\n * center the grid at its large-screen maximum width, or `fluid` to keep it at 100% width.\n */\nexport const Grid = ({ mode, children, ...rest }: GridProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const breakpoint = useMeasuredGridBreakpoint(ref);\n  return (\n    <GridBreakpointContext.Provider value={breakpoint}>\n      <Root ref={ref} $mode={mode} $breakpoint={breakpoint} {...rest}>\n        {children}\n      </Root>\n    </GridBreakpointContext.Provider>\n  );\n};\n\nexport default Grid;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport interface GridItemProps extends ComponentPropsWithoutRef<'div'> {\n  span: GridSpan;\n  children: ReactNode;\n}\n\nconst Item = styled.div<{ $span: GridSpan }>`\n  grid-column: span ${({ $span }) => $span};\n  min-width: 0;\n`;\n\nexport const GridItem = ({ span, children, ...rest }: GridItemProps) => (\n  <Item $span={span} {...rest}>\n    {children}\n  </Item>\n);\n\nexport default GridItem;\n"],"mappings":";;;;;AAcA,MAAa,mBAAmB;CAAE,IAAI;CAAK,IAAI;CAAM,IAAI;CAAM;AAI/D,MAAM,wBAAwB,cAA0B,KAAK;;AAG7D,MAAa,0BAAsC,WAAW,sBAAsB;AAEpF,MAAM,iBAAiB,UAA8B;AACnD,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,QAAO;;AAGT,MAAM,6BAA6B,QAAmC;CACpE,MAAM,CAAC,YAAY,iBAAiB,SAAqB,KAAK;AAC9D,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,cAAc,cAAc,KAAK,YAAY,CAAC;AACnE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,CAAC,IAAI,CAAC;AACT,QAAO;;AAGT,MAAM,OAAO,OAAO,GAA0D;;;;;;KAMzE,EAAE,kBACH,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,KAAK,EAAE;MACrC;;KAED,EAAE,kBACH,gBAAgB,QAAQ,gBAAgB,OACpC,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;YAE/B,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;UAC7B;;;KAGL,EAAE,OAAO,kBACV,UAAU,WACV,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,GAAG;;MAEjC;;;;;;;;;AAyBN,MAAa,QAAQ,EAAE,MAAM,UAAU,GAAG,WAAsB;CAC9D,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,aAAa,0BAA0B,IAAI;AACjD,QACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,MAAD;GAAW;GAAK,OAAO;GAAM,aAAa;GAAY,GAAI;GACvD;GACI,CAAA;EACwB,CAAA;;;;ACzGrC,MAAM,OAAO,OAAO,GAAwB;uBACrB,EAAE,YAAY,MAAM;;;AAI3C,MAAa,YAAY,EAAE,MAAM,UAAU,GAAG,WAC5C,oBAAC,MAAD;CAAM,OAAO;CAAM,GAAI;CACpB;CACI,CAAA"}
+{"version":3,"file":"Grid-CYpOqTUu.mjs","names":[],"sources":["../src/components/Grid/Grid.tsx","../src/components/Grid/GridItem.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const GRID_BREAKPOINTS = { sm: 768, md: 1024, lg: 1408 } as const;\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg';\n\nconst GridBreakpointContext = createContext<Breakpoint>('md');\n\n/** Breakpoint of the nearest `Grid`, measured from that grid's width. */\nexport const useGridBreakpoint = (): Breakpoint => useContext(GridBreakpointContext);\n\nconst getBreakpoint = (width: number): Breakpoint => {\n  if (width >= GRID_BREAKPOINTS.lg) {\n    return 'lg';\n  }\n  if (width >= GRID_BREAKPOINTS.md) {\n    return 'md';\n  }\n  if (width >= GRID_BREAKPOINTS.sm) {\n    return 'sm';\n  }\n  return 'xs';\n};\n\nconst useMeasuredGridBreakpoint = (ref: RefObject<HTMLDivElement>) => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>('md');\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n    const update = () => setBreakpoint(getBreakpoint(node.offsetWidth));\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [ref]);\n  return breakpoint;\n};\n\nconst Root = styled.div<{ $mode: GridProps['mode']; $breakpoint: Breakpoint }>`\n  display: grid;\n  width: 100%;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  box-sizing: border-box;\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' &&\n    css`\n      min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n    `}\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' || $breakpoint === 'sm'\n      ? css`\n          gap: ${Spacing[3]};\n          padding-inline: ${Spacing[5]};\n        `\n      : css`\n          gap: ${Spacing[4]};\n          padding-inline: ${Spacing[6]};\n        `}\n\n  // max-width equals the lg threshold; offsetWidth reads the clamped border-box width and getBreakpoint uses >=, so the clamp stays 'lg'\n  ${({ $mode, $breakpoint }) =>\n    $mode === 'fixed' &&\n    $breakpoint === 'lg' &&\n    css`\n      max-width: ${GRID_BREAKPOINTS.lg}px;\n      margin-inline: auto;\n    `}\n`;\n\nexport interface GridProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Selects the grid width behavior at the large breakpoint. `fixed` centers the grid at a\n   * maximum width of 1408px, while `fluid` fills the available width.\n   *\n   * Breakpoints:\n   * - ≤767px: 12 columns, 24px margins, 12px gutters, and a 767px minimum width.\n   * - 768–1023px: 12 columns, 24px margins, 12px gutters, and 100% width.\n   * - 1024–1407px: 12 columns, 32px margins, 16px gutters, and 100% width.\n   * - ≥1408px: 12 columns, 32px margins, 16px gutters, and either fixed or fluid width.\n   */\n  mode: 'fixed' | 'fluid';\n  children: ReactNode;\n}\n\n/**\n * Provides a 12-column CSS grid that measures its own width with a ResizeObserver for responsive\n * horizontal margins and gutters. Vertical spacing is left to the consumer.\n *\n * The grid measures breakpoints against its own width rather than the viewport. Use `fixed` to\n * center the grid at its large-screen maximum width, or `fluid` to keep it at 100% width.\n */\nexport const Grid = ({ mode, children, ...rest }: GridProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const breakpoint = useMeasuredGridBreakpoint(ref);\n  return (\n    <GridBreakpointContext.Provider value={breakpoint}>\n      <Root ref={ref} $mode={mode} $breakpoint={breakpoint} {...rest}>\n        {children}\n      </Root>\n    </GridBreakpointContext.Provider>\n  );\n};\n\nexport default Grid;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport interface GridItemProps extends ComponentPropsWithoutRef<'div'> {\n  span: GridSpan;\n  children: ReactNode;\n}\n\nconst Item = styled.div<{ $span: GridSpan }>`\n  grid-column: span ${({ $span }) => $span};\n  min-width: 0;\n`;\n\nexport const GridItem = ({ span, children, ...rest }: GridItemProps) => (\n  <Item $span={span} {...rest}>\n    {children}\n  </Item>\n);\n\nexport default GridItem;\n"],"mappings":";;;;;AAcA,MAAa,mBAAmB;CAAE,IAAI;CAAK,IAAI;CAAM,IAAI;CAAM;AAI/D,MAAM,wBAAwB,cAA0B,KAAK;;AAG7D,MAAa,0BAAsC,WAAW,sBAAsB;AAEpF,MAAM,iBAAiB,UAA8B;AACnD,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,QAAO;;AAGT,MAAM,6BAA6B,QAAmC;CACpE,MAAM,CAAC,YAAY,iBAAiB,SAAqB,KAAK;AAC9D,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,cAAc,cAAc,KAAK,YAAY,CAAC;AACnE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,CAAC,IAAI,CAAC;AACT,QAAO;;AAGT,MAAM,OAAO,OAAO,GAA0D;;;;;;KAMzE,EAAE,kBACH,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,KAAK,EAAE;MACrC;;KAED,EAAE,kBACH,gBAAgB,QAAQ,gBAAgB,OACpC,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;YAE/B,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;UAC7B;;;KAGL,EAAE,OAAO,kBACV,UAAU,WACV,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,GAAG;;MAEjC;;;;;;;;;AAyBN,MAAa,QAAQ,EAAE,MAAM,UAAU,GAAG,WAAsB;CAC9D,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,aAAa,0BAA0B,IAAI;AACjD,QACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,MAAD;GAAW;GAAK,OAAO;GAAM,aAAa;GAAY,GAAI;GACvD;GACI,CAAA;EACwB,CAAA;;;;ACzGrC,MAAM,OAAO,OAAO,GAAwB;uBACrB,EAAE,YAAY,MAAM;;;AAI3C,MAAa,YAAY,EAAE,MAAM,UAAU,GAAG,WAC5C,oBAAC,MAAD;CAAM,OAAO;CAAM,GAAI;CACpB;CACI,CAAA"}

package/dist/{Header-fwlbzxYx.d.mts → Header-C9oYPBLv.d.mts}

@@ -32,4 +32,4 @@ declare const Root: ({
 }: HeaderProps & ComponentPropsWithoutRef<"div">) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Root as a, HeaderProps as i, Header as n, Title as o, HeaderContainer as r, TitleContainer as s, ActionsContainer as t };
-//# sourceMappingURL=Header-fwlbzxYx.d.mts.map
+//# sourceMappingURL=Header-C9oYPBLv.d.mts.map

package/dist/Header.d.mts

@@ -1,2 +1,2 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-fwlbzxYx.mjs";
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-C9oYPBLv.mjs";
 export { ActionsContainer, HeaderContainer, HeaderProps, Root, Title, TitleContainer, Header as default };

package/dist/{HelperTooltip-BLfPfJRN.d.mts → HelperTooltip-jHTdkLQq.d.mts}

@@ -1,4 +1,4 @@
-import { i as TooltipWithIconProps } from "./Tooltip-CysnLwST.mjs";
+import { i as TooltipWithIconProps } from "./Tooltip-CrpfAAfA.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -17,4 +17,4 @@ declare const HelperTooltip: ({
 }: HelperTooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { HelperTooltipProps as n, HelperTooltip as t };
-//# sourceMappingURL=HelperTooltip-BLfPfJRN.d.mts.map
+//# sourceMappingURL=HelperTooltip-jHTdkLQq.d.mts.map

package/dist/HelperTooltip.d.mts

@@ -1,2 +1,2 @@
-import { n as HelperTooltipProps, t as HelperTooltip } from "./HelperTooltip-BLfPfJRN.mjs";
+import { n as HelperTooltipProps, t as HelperTooltip } from "./HelperTooltip-jHTdkLQq.mjs";
 export { HelperTooltipProps, HelperTooltip as default };

package/dist/HighlightedText.d.mts

@@ -1,5 +1,5 @@
-import { t as ASTNode } from "./types-dmItSshr.mjs";
-import { a as Mode, l as TextStyle, u as ValueType } from "./types-XjJqUj-p.mjs";
+import { t as ASTNode } from "./types-Bg_sfqXE.mjs";
+import { a as Mode, l as TextStyle, u as ValueType } from "./types-BnXYfNrd.mjs";
 import { SchemaValidator } from "./validation2.mjs";
 import * as _$react from "react";
 import { FC, ReactNode } from "react";

package/dist/{I18nContext-BBVKF9ui.d.mts → I18nContext-DzV-RDIh.d.mts}

@@ -1,4 +1,4 @@
-import { i as CommonStrings, n as CommonStringOverrides } from "./strings-BGXKl_m6.mjs";
+import { i as CommonStrings, n as CommonStringOverrides } from "./strings-T-gsdqiJ.mjs";
 import { FC, PropsWithChildren } from "react";
 
 //#region src/lib/i18n/I18nContext.d.ts
@@ -19,4 +19,4 @@ declare function usePDSStrings(): CommonStrings;
 declare function usePDSLocale(): string | undefined;
 //#endregion
 export { usePDSStrings as i, PDSI18nProviderProps as n, usePDSLocale as r, PDSI18nProvider as t };
-//# sourceMappingURL=I18nContext-BBVKF9ui.d.mts.map
+//# sourceMappingURL=I18nContext-DzV-RDIh.d.mts.map

package/dist/I18nContext.d.mts

@@ -1,2 +1,2 @@
-import { i as usePDSStrings, n as PDSI18nProviderProps, r as usePDSLocale, t as PDSI18nProvider } from "./I18nContext-BBVKF9ui.mjs";
+import { i as usePDSStrings, n as PDSI18nProviderProps, r as usePDSLocale, t as PDSI18nProvider } from "./I18nContext-DzV-RDIh.mjs";
 export { PDSI18nProvider, PDSI18nProviderProps, usePDSLocale, usePDSStrings };

package/dist/{IconButton-KhCwTwPx.d.mts → IconButton-CaEvsrOn.d.mts}

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "./Button-Cg8KyT5M.mjs";
+import { r as ButtonProps } from "./Button-B79_aXfC.mjs";
 import * as _$react from "react";
 
 //#region src/components/Button/IconButton.d.ts
@@ -21,4 +21,4 @@ interface IconButtonProps extends Omit<ButtonProps, 'width' | 'prefixIcon' | 'pr
 declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=IconButton-KhCwTwPx.d.mts.map
+//# sourceMappingURL=IconButton-CaEvsrOn.d.mts.map

package/dist/IconButton.d.mts

@@ -1,2 +1,2 @@
-import { n as IconButtonProps, t as IconButton } from "./IconButton-KhCwTwPx.mjs";
+import { n as IconButtonProps, t as IconButton } from "./IconButton-CaEvsrOn.mjs";
 export { IconButtonProps, IconButton as default };

package/dist/ImageTile.d.mts

@@ -1,4 +1,4 @@
-import { i as TextAction } from "./Action-Bmo8B-Q3.mjs";
+import { i as TextAction } from "./Action-BLMJwLBV.mjs";
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/IndexTableLayout.d.mts

@@ -1,8 +1,8 @@
-import { r as BreadcrumbsProps } from "./Breadcrumbs-DRu_JfdI.mjs";
-import { i as BaseFilterConfig, s as FilterConfig } from "./types-sUEmxsGM.mjs";
-import { r as TableControlsProps } from "./TableControls-BHv-tXA-.mjs";
-import { i as DataTableProps } from "./DataTable-BXHmi-SW.mjs";
-import { r as PageHeaderProps } from "./PageHeader-D2QLrS7-.mjs";
+import { r as BreadcrumbsProps } from "./Breadcrumbs-ChKWIuRq.mjs";
+import { i as BaseFilterConfig, s as FilterConfig } from "./types-BiRayNak.mjs";
+import { r as TableControlsProps } from "./TableControls-r58fZb_C.mjs";
+import { i as DataTableProps } from "./DataTable-Cblw6bLk.mjs";
+import { r as PageHeaderProps } from "./PageHeader-BGGhOS81.mjs";
 import { UseColumnConfigurationOptions } from "./useColumnConfiguration.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/InlineCombobox.d.mts

@@ -1,4 +1,4 @@
-import { r as InlineEditConfig } from "./TableBoxCell-DPXrw63v.mjs";
+import { r as InlineEditConfig } from "./TableBoxCell-DuvWTwOm.mjs";
 import { RefObject } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/InlineInput.d.mts

@@ -1,4 +1,4 @@
-import { r as InlineEditConfig } from "./TableBoxCell-DPXrw63v.mjs";
+import { r as InlineEditConfig } from "./TableBoxCell-DuvWTwOm.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/TableBox/InlineInput.d.ts

package/dist/{Input-QNjbGo38.d.mts → Input-DQ2J9wlC.d.mts}

@@ -1,5 +1,5 @@
-import { r as ButtonProps } from "./Button-Cg8KyT5M.mjs";
-import { n as InputSizes, t as InputMixinProps } from "./input-gtTnb9M8.mjs";
+import { r as ButtonProps } from "./Button-B79_aXfC.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-RTMLTvG1.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -58,4 +58,4 @@ interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, Omit<InputMix
 declare const InputGroup: _$react.ForwardRefExoticComponent<InputGroupProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { InputProps as a, InputGroupProps as i, Input as n, InputGroup as r, ClearButton as t };
-//# sourceMappingURL=Input-QNjbGo38.d.mts.map
+//# sourceMappingURL=Input-DQ2J9wlC.d.mts.map

package/dist/Input.d.mts

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-QNjbGo38.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-DQ2J9wlC.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/{InputProps-BT7-RfnD.d.mts → InputProps-DrG94eFF.d.mts}

@@ -1,4 +1,4 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-gtTnb9M8.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-RTMLTvG1.mjs";
 
 //#region src/types/InputProps.d.ts
 interface InputProps extends Omit<InputMixinProps, '$size'> {
@@ -13,4 +13,4 @@ interface InputProps extends Omit<InputMixinProps, '$size'> {
 }
 //#endregion
 export { InputProps as t };
-//# sourceMappingURL=InputProps-BT7-RfnD.d.mts.map
+//# sourceMappingURL=InputProps-DrG94eFF.d.mts.map

package/dist/InputProps.d.mts

@@ -1,2 +1,2 @@
-import { t as InputProps } from "./InputProps-BT7-RfnD.mjs";
+import { t as InputProps } from "./InputProps-DrG94eFF.mjs";
 export { InputProps };

package/dist/{Inserter-BnQVEqHV.d.mts → Inserter-CZeKlPqj.d.mts}

@@ -9,4 +9,4 @@ interface InserterProps {
 declare const Inserter: React.FC<InserterProps>;
 //#endregion
 export { Inserter as t };
-//# sourceMappingURL=Inserter-BnQVEqHV.d.mts.map
+//# sourceMappingURL=Inserter-CZeKlPqj.d.mts.map

package/dist/Inserter.d.mts

@@ -1,2 +1,2 @@
-import { t as Inserter } from "./Inserter-BnQVEqHV.mjs";
+import { t as Inserter } from "./Inserter-CZeKlPqj.mjs";
 export { Inserter };

package/dist/IntegerValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-B4KbdEDc.mjs";
+import { t as ValueControlProps } from "./types-1p-ij0cd.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/DataTable/TableControls/FiltersV2/value-controls/IntegerValueControl/IntegerValueControl.d.ts

package/dist/Link.d.mts

@@ -1,4 +1,4 @@
-import { r as RouterLinkComponentProps } from "./types-Dhz6VMKx.mjs";
+import { r as RouterLinkComponentProps } from "./types-B5RbKp2V.mjs";
 import { AnchorHTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/{ListBox-CvnFiHK5.d.mts → ListBox-DxbXE_EE.d.mts}

@@ -1,5 +1,5 @@
-import { r as ButtonProps } from "./Button-Cg8KyT5M.mjs";
-import { l as MenuItemProps } from "./Menu-ByYFNvgS.mjs";
+import { r as ButtonProps } from "./Button-B79_aXfC.mjs";
+import { l as MenuItemProps } from "./Menu-Bq6Lij2L.mjs";
 import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
 import * as _$react_aria_components0 from "react-aria-components";
 import { GridList, GridListItem, Header } from "react-aria-components";
@@ -140,4 +140,4 @@ interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem>
 }
 //#endregion
 export { useListBoxContext as i, ListBoxItemProps as n, ListBoxProps$1 as r, ListBox as t };
-//# sourceMappingURL=ListBox-CvnFiHK5.d.mts.map
+//# sourceMappingURL=ListBox-DxbXE_EE.d.mts.map

package/dist/ListBox.d.mts

@@ -1,2 +1,2 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "./ListBox-CvnFiHK5.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "./ListBox-DxbXE_EE.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, useListBoxContext };

package/dist/{ListBoxField-DuUwx9Cv.d.mts → ListBoxField-DVLggscv.d.mts}

@@ -1,6 +1,6 @@
-import { l as MenuItemProps } from "./Menu-ByYFNvgS.mjs";
-import { o as ImplementsFormField } from "./inputFields-Dfpxi68z.mjs";
-import { r as ListBoxProps } from "./ListBox-CvnFiHK5.mjs";
+import { l as MenuItemProps } from "./Menu-Bq6Lij2L.mjs";
+import { o as ImplementsFormField } from "./inputFields-iRg_emVK.mjs";
+import { r as ListBoxProps } from "./ListBox-DxbXE_EE.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -48,4 +48,4 @@ declare const ListBoxField: <T extends object>({
 }: ListBoxFieldProps<T>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ListBoxField as t };
-//# sourceMappingURL=ListBoxField-DuUwx9Cv.d.mts.map
+//# sourceMappingURL=ListBoxField-DVLggscv.d.mts.map

package/dist/ListBoxField.d.mts

@@ -1,2 +1,2 @@
-import { t as ListBoxField } from "./ListBoxField-DuUwx9Cv.mjs";
+import { t as ListBoxField } from "./ListBoxField-DVLggscv.mjs";
 export { ListBoxField as default };

package/dist/LoadingShimmer.d.mts

@@ -1,4 +1,4 @@
-import { i as ParagraphSize, n as HeadingSize } from "./text-Csytfclh.mjs";
+import { i as ParagraphSize, n as HeadingSize } from "./text-CKLxMlG4.mjs";
 import { ComponentPropsWithoutRef, FC } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/{LogicRow-COvZNiUd.d.mts → LogicRow-DG06PsUe.d.mts}

@@ -1,5 +1,5 @@
-import { n as InputSizes } from "./input-gtTnb9M8.mjs";
-import { n as ListBoxItemProps } from "./ListBox-CvnFiHK5.mjs";
+import { n as InputSizes } from "./input-RTMLTvG1.mjs";
+import { n as ListBoxItemProps } from "./ListBox-DxbXE_EE.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -37,4 +37,4 @@ declare const LogicRow: ({
 }: LogicRowProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { LogicRowProps as n, LogicRow as t };
-//# sourceMappingURL=LogicRow-COvZNiUd.d.mts.map
+//# sourceMappingURL=LogicRow-DG06PsUe.d.mts.map

package/dist/LogicRow.d.mts

@@ -1,2 +1,2 @@
-import { n as LogicRowProps, t as LogicRow } from "./LogicRow-COvZNiUd.mjs";
+import { n as LogicRowProps, t as LogicRow } from "./LogicRow-DG06PsUe.mjs";
 export { LogicRowProps, LogicRow as default };

package/dist/MaskedInput.d.mts

@@ -1,4 +1,4 @@
-import { a as InputProps } from "./Input-QNjbGo38.mjs";
+import { a as InputProps } from "./Input-DQ2J9wlC.mjs";
 import * as _$react from "react";
 import { IMaskInputProps } from "react-imask/mixin";
 

package/dist/{Menu-ByYFNvgS.d.mts → Menu-Bq6Lij2L.d.mts}

@@ -1,4 +1,4 @@
-import { r as _default } from "./Card-CfECLwQ6.mjs";
+import { r as _default } from "./Card-DOIqF954.mjs";
 import { ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, ElementType, FC, ReactNode, RefObject } from "react";
 import { DefaultTheme, StyledComponent, StyledComponentPropsWithRef } from "styled-components";
 import { Spacing } from "@persona/design-tokens";
@@ -22,7 +22,7 @@ interface MenuItemProps<T extends ElementType = 'div'> {
   selected?: boolean;
   size?: 'sm' | 'md';
 }
-declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "size" | "disabled" | "selected" | "focused" | "variant">, never>;
+declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "size" | "disabled" | "variant" | "selected" | "focused">, never>;
 declare const IconContainer: StyledComponent<"div", any, {
   suffix?: boolean;
 }, never>;
@@ -67,4 +67,4 @@ declare const Menu: {
 };
 //#endregion
 export { MenuDivider as a, MenuItem as c, MenuList as d, MenuProps as f, Menu as i, MenuItemProps as l, IconContainer as n, MenuHeading as o, ListItem as r, MenuHeadingProps as s, FloatingCard as t, MenuItemType as u };
-//# sourceMappingURL=Menu-ByYFNvgS.d.mts.map
+//# sourceMappingURL=Menu-Bq6Lij2L.d.mts.map

package/dist/Menu.d.mts

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-ByYFNvgS.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-Bq6Lij2L.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/{Modal-ziuzDCPN.mjs → Modal-BBlilB-B.mjs}

@@ -1,5 +1,5 @@
 import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { l as usePDSStrings } from "./i18n-CKRi992F.mjs";
+import { l as usePDSStrings } from "./i18n-DaOKaFc2.mjs";
 import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
 import { n as Heading$1 } from "./Text-D0vEReED.mjs";
@@ -259,4 +259,4 @@ 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-ziuzDCPN.mjs.map
+//# sourceMappingURL=Modal-BBlilB-B.mjs.map

package/dist/{Modal-ziuzDCPN.mjs.map → Modal-BBlilB-B.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Modal-ziuzDCPN.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../src/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';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from '#src/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\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   * Accessible label for the built-in close button. Defaults to the PDS closeModal string (\"Close\").\n   */\n  closeButtonLabel?: string;\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  ${semanticScrollbar}\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    closeButtonLabel,\n    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\n  const strings = usePDSStrings();\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={closeButtonLabel ?? strings.closeModal} />}\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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"}
+{"version":3,"file":"Modal-BBlilB-B.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../src/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';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from '#src/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\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   * Accessible label for the built-in close button. Defaults to the PDS closeModal string (\"Close\").\n   */\n  closeButtonLabel?: string;\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  ${semanticScrollbar}\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    closeButtonLabel,\n    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\n  const strings = usePDSStrings();\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={closeButtonLabel ?? strings.closeModal} />}\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":";;;;;;;;;;;;;;;;;AA0CA,MAAM,qBAAqB,OAAO,aAAa;;;;;;;;;;;;;;YAmBnC,EAAE,kBAAkB,YAAY;uBACrB,EAAE,oBAAoB,cAAc;;sBAErC,EAAE,wBAAwB,kBAAkB;;KAE7D,EAAE,mBACH,gBACA;;IAEA;;;;;;;;;;;AAYJ,MAAM,cAAc,OAAOA,MAAU;;;;;IAKjC,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;;;;;AAQ5D,MAAM,uBAAuB,WAC3B,SAAS,qBAAqB,EAAE,UAAU,aAAa,KAAK;AAC1D,oBAAmB,UAAU;AAC7B,QAAO,oBAAC,aAAD;EAAkB;EAAM;EAAuB,CAAA;EAEzD;AAQD,MAAM,0BAA0B,EAAE,WAAW,GAAG,YAAyC;CAEvF,MAAM,SADQ,WAAW,2BACL,EAAE,UAAU;CAChC,MAAM,EAAE,OAAO,qBAAqB,uBAAuB,WAAW,OAAO;CAE7E,MAAM,EAAE,aAAa,eAAe,GAAG,iBAAiB;AACxD,QACE,oBAAC,oBAAD;EACE,GAAI;EACS;EACE;EACf,mBAAmB;EACnB,cAAc,UAAU,CAAC;EACzB,CAAA;;AAIN,MAAM,mBAAmB,OAAOC,SAAO;;aAE1B,QAAQ,GAAG;mBACL,QAAQ,GAAG;;;;AAK9B,MAAM,cAAc,OAAO,OAAO,CAAC,MAAM;CACvC,SAAS;CACT,OAAO;CACP,SAAS,QAAQ;CAClB,CAAC;aACW,QAAQ,GAAG,GAAG,QAAQ,GAAG;2BACX,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;;AAGnG,MAAM,mBAAmB,OAAO,GAAG;;;AAInC,MAAa,eAAe;AAC5B,MAAa,eAAe;AAE5B,MAAa,cAAc,UAAuB;AAChD,QACE,oBAACC,QAAD;EAAY,MAAK;EAAQ,OAAO;GAAE,KAAK;GAAS,SAAS;GAAY;YACnE,oBAAC,kBAAD;GAAkB,SAAQ;GAAO,OAAM;GAAO,MAAK;GAAK,GAAI;aAC1D,oBAAC,OAAD,EAAS,CAAA;GACQ,CAAA;EACR,CAAA;;AAiBjB,MAAM,cAAc,EAAE,UAAU,GAAG,YAA6B;AAC9D,QACE,oBAACC,WAAD;EAAS,MAAK;EAAK,OAAM;EAAU,IAAIC;EAAa,MAAK;EAAQ,GAAI;EAClE;EACO,CAAA;;AAId,MAAM,cAAc,OAAO,OAAO;oBACd,EAAE,UAAU,YAC5B,WAAW,SAAS,aAAa,cAAc,OAAO,gBAAgB,MAAM,cAAc,GAAG;cACnF,EAAE,eACZ,WACI,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,OACrD,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,KAAK;;AAGlE,MAAM,cAAc,OAAO,OAAO;kBAChB,QAAQ,GAAG;;AAG7B,MAAM,eAAe,OAAO,OAAO;;;AAInC,MAAM,aAAa,OAAOC,aAAK;;YAEnB,EAAE,YAAY;AACtB,SAAQ,OAAR;EACE,KAAK,OACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,QACE,QAAO;;EAEX;gBACY,EAAE,OAAO,YAAY;AACjC,SAAQ,OAAR;EACE,KAAK,OACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,QACE,QAAO,MAAM,MAAM,MAAM;;EAE7B;;iBAEa,EAAE,YAAa,UAAU,SAAS,wBAAwB,OAAQ;;;;KAI9E,EAAE,YACH,UAAU,UACV;;IAEA;;;AA0DJ,MAAM,sBAAsB,OAAOA,aAAK,KAAK;;IAKzC,kBAAkB;;;KAGjB,EAAE,iBACH,aACI,gBACA;oBACY,QAAQ,GAAG;qBACV,QAAQ,GAAG;IAC5B;KACC,EAAE,cAAc,WAAW,iBAAiB;;;;;AAMjD,MAAM,YAAY,WAAmD,SAAS,UAC5E,EACE,OACA,UACA,kBAAkB,MAClB,kBACA,MACA,QACA,MACA,gBAAgB,OAChB,iBACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,eAAe;CAC/B,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,EAAE;AAGvD,iBAAgB;AACd,oBAAkB,EAAE;IACnB,CAJc,MAAM,UAAU,EAIpB,CAAC;CAEd,MAAM,gBACJ,qBAAC,aAAD;EAAa,SAAQ;EAAa,OAAM;EAAS,SAAS,QAAQ;EAAI,UAAU,QAAQ,KAAK;YAA7F,CACE,oBAAC,kBAAD,EAAA,UAAmB,QAAQ,oBAAC,YAAD,EAAA,UAAa,OAAmB,CAAA,GAAG,MAAwB,CAAA,EACrF,mBAAmB,oBAAC,YAAD,EAAY,cAAY,oBAAoB,QAAQ,YAAc,CAAA,CAC1E;;CAGhB,MAAM,cAAc,OAClB,qBAAC,OAAD,EAAA,UAAA,CACG,eACD,oBAAC,aAAD,EAAA,UACG,KAAK,KAAK,KAAK,QACd,oBAAC,KAAD;EAEE,UAAU,mBAAmB;EAC7B,IAAI,iBAAiB;EACrB,eAAe,kBAAkB,IAAI;EACrC,iBAAe,uBAAuB;YAErC,IAAI;EACD,EAPC,IAAI,KAOL,CACN,EACU,CAAA,CACR,EAAA,CAAA,GAER;AAGF,QACE,oBAAC,cAAD;EAAc,GAAI;EAAY;YAC5B,qBAAC,YAAD;GAAY,UAAA;GAAS,OAAO;aAA5B;KACI,mBAAmB,UAAU;IAC9B,OACC,KAAK,KAAK,KAAK,QACb,oBAAC,qBAAD;KAEE,YAAY;KACZ,SAAS,mBAAmB;KAC5B,MAAM,OAAO,aAAa,KAAA;KAC1B,IAAI,uBAAuB,IAAI;KAC/B,mBAAiB,iBAAiB,IAAI;eAErC,OAAO,IAAI,aAAa,aACrB,IAAI,SAAS,EAAE,iBAAiB,CAAC,GACjC,IAAI;KACY,EAVf,IAAI,KAUW,CACtB,GAEF,oBAAC,qBAAD;KACE,YAAY;KACZ,MAAM,OAAO,aAAa,KAAA;KAC1B,IAAI,uBAAuB;KAC3B,mBAAiB,iBAAiB;KAEjC;KACmB,CAAA;IAGvB,UAAU,oBAAC,aAAD,EAAA,UAAc,QAAqB,CAAA;IACnC;;EACA,CAAA;EAEjB;AAiFF,MAAMC,WAAS,EACb,UACA,SACA,cACA,gBAAgB,OAChB,OAAO,MACP,OACA,QACA,MACA,aACA,cACA,gBAAgB,OAChB,4BAA4B,OAC5B,WACgB;CAChB,MAAM,CAAC,iBAAiB,sBAAsB,SAAgC,KAAK;CACnF,MAAM,YAAY,sBAAsB;CACxC,MAAM,EAAE,YAAY,iBAAiB,eAAe,oBAAoB;CACxE,MAAM,eACJ,eAAe,YAAA,MAEX,eAAe,YAAA,MAEb;CAER,MAAM,UACJ,oBAAC,WAAD;EACQ;EACC;EACC;EACF;EACS;EACf,GAAI;EACa;YAEhB,OAAO,aAAa,aAAa,SAAS,EAAE,iBAAiB,CAAC,GAAG;EACxD,CAAA;AAMd,QACE,qBAAC,eAAD;EAAe,QAAQ;EAAmB;EAA2B;YAArE,CAHqB,UAAU,oBAAC,WAAD,EAAA,UAAY,SAAoB,CAAA,GAAG,MAKhE,oBAAC,wBAAD;GACa;GACX,aAAa;GACb,eAAe;GACA;GACY;GAC3B,+BAA+B,YAAY,CAAC,QAAQ,QAAQ,8BAA8B;aAE1F,oBAAC,sBAAD;IAAsB,KAAK;IAA+B;cACvD;IACoB,CAAA;GACA,CAAA,CACX;;;AAIpB,IAAA,gBAAe,OAAO,OAAOA,SAAO,EAClC,OAAO,YACR,CAAC"}

package/dist/{Modal-Bhwq1bQJ.d.mts → Modal-kEgKwLg4.d.mts}

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "./Button-Cg8KyT5M.mjs";
+import { r as ButtonProps } from "./Button-B79_aXfC.mjs";
 import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
@@ -146,4 +146,4 @@ declare const _default: (({
 };
 //#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-Bhwq1bQJ.d.mts.map
+//# sourceMappingURL=Modal-kEgKwLg4.d.mts.map

package/dist/Modal.d.mts

@@ -1,2 +1,2 @@
-import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "./Modal-Bhwq1bQJ.mjs";
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "./Modal-kEgKwLg4.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/{PageHeader-D2QLrS7-.d.mts → PageHeader-BGGhOS81.d.mts}

@@ -1,4 +1,4 @@
-import { r as BreadcrumbsProps } from "./Breadcrumbs-DRu_JfdI.mjs";
+import { r as BreadcrumbsProps } from "./Breadcrumbs-ChKWIuRq.mjs";
 import { ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -37,4 +37,4 @@ declare const PageHeader: ({
 }: PageHeaderProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageHeaderContainer as n, PageHeaderProps as r, PageHeader as t };
-//# sourceMappingURL=PageHeader-D2QLrS7-.d.mts.map
+//# sourceMappingURL=PageHeader-BGGhOS81.d.mts.map

package/dist/{PageHeader-BzvA_NNt.mjs → PageHeader-DEKTopzU.mjs}

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

package/dist/{PageHeader-BzvA_NNt.mjs.map → PageHeader-DEKTopzU.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"PageHeader-BzvA_NNt.mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport { semanticColor, semanticOnly } from '#src/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: 0 1 auto;\n  min-width: 0;\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  flex: 1 1 auto;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  & > :not(${TitleContainer}) {\n    flex-shrink: 0;\n  }\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n  flex-shrink: 0;\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":";;;;;;;AASA,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;;;;;;;MAO3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;oBAG1C,QAAQ,GAAG;MACzB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;AAIhE,MAAM,gBAAgB,OAAO,GAAG;;;;SAIvB,QAAQ,GAAG;;aAEP,eAAe;;;;AAK5B,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AA2B5B,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-DEKTopzU.mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport { semanticColor, semanticOnly } from '#src/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: 0 1 auto;\n  min-width: 0;\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  flex: 1 1 auto;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  & > :not(${TitleContainer}) {\n    flex-shrink: 0;\n  }\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n  flex-shrink: 0;\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":";;;;;;;AASA,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;;;;;;;MAO3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;oBAG1C,QAAQ,GAAG;MACzB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;AAIhE,MAAM,gBAAgB,OAAO,GAAG;;;;SAIvB,QAAQ,GAAG;;aAEP,eAAe;;;;AAK5B,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AA2B5B,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,2 +1,2 @@
-import { n as PageHeaderContainer, r as PageHeaderProps, t as PageHeader } from "./PageHeader-D2QLrS7-.mjs";
+import { n as PageHeaderContainer, r as PageHeaderProps, t as PageHeader } from "./PageHeader-BGGhOS81.mjs";
 export { PageHeaderContainer, PageHeaderProps, PageHeader as default };

package/dist/{PageLayout-DfAbeFIh.d.mts → PageLayout-B_LKPZD8.d.mts}

@@ -13,4 +13,4 @@ declare const Container: ({
 declare const Section: _$styled_components0.StyledComponent<"div", any, {}, never>;
 //#endregion
 export { Container as n, Section as r, Backdrop as t };
-//# sourceMappingURL=PageLayout-DfAbeFIh.d.mts.map
+//# sourceMappingURL=PageLayout-B_LKPZD8.d.mts.map

package/dist/{PageLayout-DCe3F76N.mjs → PageLayout-DjtGrvJa.mjs}

@@ -1,6 +1,6 @@
 import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { n as Stack } from "./Stack-Bzom2BTR.mjs";
-import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "./Grid-BtTuj5mR.mjs";
+import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "./Grid-CYpOqTUu.mjs";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Spacing } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -129,4 +129,4 @@ const SplitColumnLayout = ({ main, aside, ...chrome }) => /* @__PURE__ */ jsx(Pa
 //#endregion
 export { Section as a, Container as i, SingleColumnLayout as n, Backdrop as r, SplitColumnLayout as t };
 
-//# sourceMappingURL=PageLayout-DCe3F76N.mjs.map
+//# sourceMappingURL=PageLayout-DjtGrvJa.mjs.map

package/dist/{PageLayout-DCe3F76N.mjs.map → PageLayout-DjtGrvJa.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"PageLayout-DCe3F76N.mjs","names":[],"sources":["../src/patterns/PageLayout/PageLayout.tsx","../src/patterns/PageLayout/PageLayoutFrame.tsx","../src/patterns/PageLayout/SingleColumnLayout.tsx","../src/patterns/PageLayout/SplitColumnLayout.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Backdrop = styled.div`\n  position: relative;\n  width: 100%;\n  padding: ${Spacing[7]} ${Spacing[5]};\n\n  display: flex;\n  flex-direction: column;\n`;\n\nconst StyledContainer = styled('div')`\n  position: relative;\n  width: 100%;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const Container = ({\n  children,\n  ...rest\n}: { children: ReactNode } & ComponentPropsWithoutRef<'div'>) => {\n  return <StyledContainer {...rest}>{children}</StyledContainer>;\n};\n\nexport const Section = styled('div')`\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Grid, { GRID_BREAKPOINTS, GridItem } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nexport type PageLayoutWidth = 'standard' | 'wide';\n\nexport interface PageLayoutChromeProps {\n  /**\n   * `standard` uses the fixed grid (centered, max 1408px). `wide` uses the fluid grid.\n   *\n   * @defaultValue 'standard'\n   */\n  width?: PageLayoutWidth;\n  /** Tab group. Sits above the page notice and scrolls with the page. Omit to skip the region and its gap. */\n  tabs?: ReactNode;\n  /** Page notice under the tabs. Omit to skip the region and its gap. */\n  pageNotice?: ReactNode;\n}\n\nconst topPadding = (condensed: boolean) => (condensed ? Spacing[5] : Spacing[6]);\n\nconst Root = styled.div<{ $condensed: boolean; $tabs: boolean }>`\n  width: 100%;\n  min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n  padding-top: ${({ $condensed, $tabs }) => ($tabs ? Spacing[5] : topPadding($condensed))};\n  padding-bottom: ${({ $condensed }) => topPadding($condensed)};\n`;\n\nconst gridMode = (width: PageLayoutWidth): 'fixed' | 'fluid' =>\n  width === 'wide' ? 'fluid' : 'fixed';\n\nconst FullWidthBand = ({ mode, children }: { mode: 'fixed' | 'fluid'; children: ReactNode }) => (\n  <Grid mode={mode}>\n    <GridItem span={12}>{children}</GridItem>\n  </Grid>\n);\n\nexport const PageLayoutFrame = ({\n  width = 'standard',\n  tabs,\n  pageNotice,\n  children,\n}: PageLayoutChromeProps & { children: ReactNode }) => {\n  const mode = gridMode(width);\n  const ref = useRef<HTMLDivElement>(null);\n  const [condensed, setCondensed] = useState(false);\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n    const update = () => setCondensed(node.offsetWidth < GRID_BREAKPOINTS.md);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Root ref={ref} $condensed={condensed} $tabs={Boolean(tabs)}>\n      <Stack spacing={Spacing[5]}>\n        {tabs && <FullWidthBand mode={mode}>{tabs}</FullWidthBand>}\n        {pageNotice && <FullWidthBand mode={mode}>{pageNotice}</FullWidthBand>}\n        <Grid mode={mode}>{children}</Grid>\n      </Stack>\n    </Root>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { GridItem } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nexport interface SingleColumnLayoutProps extends PageLayoutChromeProps {\n  /** Primary page content. Direct children stack vertically. */\n  main: ReactNode;\n}\n\nexport const SingleColumnLayout = ({ main, ...chrome }: SingleColumnLayoutProps) => (\n  <PageLayoutFrame {...chrome}>\n    <GridItem span={12}>\n      <Stack spacing={Spacing[4]}>{main}</Stack>\n    </GridItem>\n  </PageLayoutFrame>\n);\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { GridItem, type GridSpan, useGridBreakpoint } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nconst SPLIT_COLUMN_SPANS = { main: 8, aside: 4 } as const satisfies Record<string, GridSpan>;\n\nexport interface SplitColumnLayoutProps extends PageLayoutChromeProps {\n  /** Primary column. Direct children stack vertically and stay in this column. */\n  main: ReactNode;\n  /** Supporting column. Direct children stack vertically and stay in this column. */\n  aside: ReactNode;\n}\n\nconst Region = ({ children }: { children: ReactNode }) => (\n  <Stack spacing={Spacing[4]}>{children}</Stack>\n);\n\nconst SplitBody = ({ main, aside }: { main: ReactNode; aside: ReactNode }) => {\n  const stacked = useGridBreakpoint() === 'xs';\n  const mainSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.main;\n  const asideSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.aside;\n\n  return (\n    <>\n      <GridItem span={mainSpan}>\n        <Region>{main}</Region>\n      </GridItem>\n      <GridItem span={asideSpan}>\n        <aside>\n          <Region>{aside}</Region>\n        </aside>\n      </GridItem>\n    </>\n  );\n};\n\nexport const SplitColumnLayout = ({ main, aside, ...chrome }: SplitColumnLayoutProps) => (\n  <PageLayoutFrame {...chrome}>\n    <SplitBody main={main} aside={aside} />\n  </PageLayoutFrame>\n);\n"],"mappings":";;;;;;;AAKA,MAAa,WAAW,OAAO,GAAG;;;aAGrB,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;;;AAMtC,MAAM,kBAAkB,OAAO,MAAM;;;;;;;;;AAUrC,MAAa,aAAa,EACxB,UACA,GAAG,WAC4D;AAC/D,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO;EAA2B,CAAA;;AAGhE,MAAa,UAAU,OAAO,MAAM;;aAEvB,QAAQ,GAAG;;;;ACVxB,MAAM,cAAc,cAAwB,YAAY,QAAQ,KAAK,QAAQ;AAE7E,MAAM,OAAO,OAAO,GAA4C;;eAEjD,iBAAiB,KAAK,EAAE;kBACrB,EAAE,YAAY,YAAa,QAAQ,QAAQ,KAAK,WAAW,WAAW,CAAE;qBACrE,EAAE,iBAAiB,WAAW,WAAW,CAAC;;AAG/D,MAAM,YAAY,UAChB,UAAU,SAAS,UAAU;AAE/B,MAAM,iBAAiB,EAAE,MAAM,eAC7B,oBAAC,MAAD;CAAY;WACV,oBAAC,UAAD;EAAU,MAAM;EAAK;EAAoB,CAAA;CACpC,CAAA;AAGT,MAAa,mBAAmB,EAC9B,QAAQ,YACR,MACA,YACA,eACqD;CACrD,MAAM,OAAO,SAAS,MAAM;CAC5B,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,aAAa,KAAK,cAAc,iBAAiB,GAAG;AACzE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;AAEN,QACE,oBAAC,MAAD;EAAW;EAAK,YAAY;EAAW,OAAO,QAAQ,KAAK;YACzD,qBAAC,OAAD;GAAO,SAAS,QAAQ;aAAxB;IACG,QAAQ,oBAAC,eAAD;KAAqB;eAAO;KAAqB,CAAA;IACzD,cAAc,oBAAC,eAAD;KAAqB;eAAO;KAA2B,CAAA;IACtE,oBAAC,MAAD;KAAY;KAAO;KAAgB,CAAA;IAC7B;;EACH,CAAA;;;;ACxDX,MAAa,sBAAsB,EAAE,MAAM,GAAG,aAC5C,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,OAAD;GAAO,SAAS,QAAQ;aAAK;GAAa,CAAA;EACjC,CAAA;CACK,CAAA;;;ACVpB,MAAM,qBAAqB;CAAE,MAAM;CAAG,OAAO;CAAG;AAShD,MAAM,UAAU,EAAE,eAChB,oBAAC,OAAD;CAAO,SAAS,QAAQ;CAAK;CAAiB,CAAA;AAGhD,MAAM,aAAa,EAAE,MAAM,YAAmD;CAC5E,MAAM,UAAU,mBAAmB,KAAK;CACxC,MAAM,WAAW,UAAU,KAAK,mBAAmB;CACnD,MAAM,YAAY,UAAU,KAAK,mBAAmB;AAEpD,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,QAAD,EAAA,UAAS,MAAc,CAAA;EACd,CAAA,EACX,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,SAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAS,OAAe,CAAA,EAClB,CAAA;EACC,CAAA,CACV,EAAA,CAAA;;AAIP,MAAa,qBAAqB,EAAE,MAAM,OAAO,GAAG,aAClD,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,WAAD;EAAiB;EAAa;EAAS,CAAA;CACvB,CAAA"}
+{"version":3,"file":"PageLayout-DjtGrvJa.mjs","names":[],"sources":["../src/patterns/PageLayout/PageLayout.tsx","../src/patterns/PageLayout/PageLayoutFrame.tsx","../src/patterns/PageLayout/SingleColumnLayout.tsx","../src/patterns/PageLayout/SplitColumnLayout.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Backdrop = styled.div`\n  position: relative;\n  width: 100%;\n  padding: ${Spacing[7]} ${Spacing[5]};\n\n  display: flex;\n  flex-direction: column;\n`;\n\nconst StyledContainer = styled('div')`\n  position: relative;\n  width: 100%;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const Container = ({\n  children,\n  ...rest\n}: { children: ReactNode } & ComponentPropsWithoutRef<'div'>) => {\n  return <StyledContainer {...rest}>{children}</StyledContainer>;\n};\n\nexport const Section = styled('div')`\n  width: 100%;\n  padding: ${Spacing[7]};\n`;\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Grid, { GRID_BREAKPOINTS, GridItem } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nexport type PageLayoutWidth = 'standard' | 'wide';\n\nexport interface PageLayoutChromeProps {\n  /**\n   * `standard` uses the fixed grid (centered, max 1408px). `wide` uses the fluid grid.\n   *\n   * @defaultValue 'standard'\n   */\n  width?: PageLayoutWidth;\n  /** Tab group. Sits above the page notice and scrolls with the page. Omit to skip the region and its gap. */\n  tabs?: ReactNode;\n  /** Page notice under the tabs. Omit to skip the region and its gap. */\n  pageNotice?: ReactNode;\n}\n\nconst topPadding = (condensed: boolean) => (condensed ? Spacing[5] : Spacing[6]);\n\nconst Root = styled.div<{ $condensed: boolean; $tabs: boolean }>`\n  width: 100%;\n  min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n  padding-top: ${({ $condensed, $tabs }) => ($tabs ? Spacing[5] : topPadding($condensed))};\n  padding-bottom: ${({ $condensed }) => topPadding($condensed)};\n`;\n\nconst gridMode = (width: PageLayoutWidth): 'fixed' | 'fluid' =>\n  width === 'wide' ? 'fluid' : 'fixed';\n\nconst FullWidthBand = ({ mode, children }: { mode: 'fixed' | 'fluid'; children: ReactNode }) => (\n  <Grid mode={mode}>\n    <GridItem span={12}>{children}</GridItem>\n  </Grid>\n);\n\nexport const PageLayoutFrame = ({\n  width = 'standard',\n  tabs,\n  pageNotice,\n  children,\n}: PageLayoutChromeProps & { children: ReactNode }) => {\n  const mode = gridMode(width);\n  const ref = useRef<HTMLDivElement>(null);\n  const [condensed, setCondensed] = useState(false);\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n    const update = () => setCondensed(node.offsetWidth < GRID_BREAKPOINTS.md);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Root ref={ref} $condensed={condensed} $tabs={Boolean(tabs)}>\n      <Stack spacing={Spacing[5]}>\n        {tabs && <FullWidthBand mode={mode}>{tabs}</FullWidthBand>}\n        {pageNotice && <FullWidthBand mode={mode}>{pageNotice}</FullWidthBand>}\n        <Grid mode={mode}>{children}</Grid>\n      </Stack>\n    </Root>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { GridItem } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nexport interface SingleColumnLayoutProps extends PageLayoutChromeProps {\n  /** Primary page content. Direct children stack vertically. */\n  main: ReactNode;\n}\n\nexport const SingleColumnLayout = ({ main, ...chrome }: SingleColumnLayoutProps) => (\n  <PageLayoutFrame {...chrome}>\n    <GridItem span={12}>\n      <Stack spacing={Spacing[4]}>{main}</Stack>\n    </GridItem>\n  </PageLayoutFrame>\n);\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { GridItem, type GridSpan, useGridBreakpoint } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nconst SPLIT_COLUMN_SPANS = { main: 8, aside: 4 } as const satisfies Record<string, GridSpan>;\n\nexport interface SplitColumnLayoutProps extends PageLayoutChromeProps {\n  /** Primary column. Direct children stack vertically and stay in this column. */\n  main: ReactNode;\n  /** Supporting column. Direct children stack vertically and stay in this column. */\n  aside: ReactNode;\n}\n\nconst Region = ({ children }: { children: ReactNode }) => (\n  <Stack spacing={Spacing[4]}>{children}</Stack>\n);\n\nconst SplitBody = ({ main, aside }: { main: ReactNode; aside: ReactNode }) => {\n  const stacked = useGridBreakpoint() === 'xs';\n  const mainSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.main;\n  const asideSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.aside;\n\n  return (\n    <>\n      <GridItem span={mainSpan}>\n        <Region>{main}</Region>\n      </GridItem>\n      <GridItem span={asideSpan}>\n        <aside>\n          <Region>{aside}</Region>\n        </aside>\n      </GridItem>\n    </>\n  );\n};\n\nexport const SplitColumnLayout = ({ main, aside, ...chrome }: SplitColumnLayoutProps) => (\n  <PageLayoutFrame {...chrome}>\n    <SplitBody main={main} aside={aside} />\n  </PageLayoutFrame>\n);\n"],"mappings":";;;;;;;AAKA,MAAa,WAAW,OAAO,GAAG;;;aAGrB,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;;;AAMtC,MAAM,kBAAkB,OAAO,MAAM;;;;;;;;;AAUrC,MAAa,aAAa,EACxB,UACA,GAAG,WAC4D;AAC/D,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO;EAA2B,CAAA;;AAGhE,MAAa,UAAU,OAAO,MAAM;;aAEvB,QAAQ,GAAG;;;;ACVxB,MAAM,cAAc,cAAwB,YAAY,QAAQ,KAAK,QAAQ;AAE7E,MAAM,OAAO,OAAO,GAA4C;;eAEjD,iBAAiB,KAAK,EAAE;kBACrB,EAAE,YAAY,YAAa,QAAQ,QAAQ,KAAK,WAAW,WAAW,CAAE;qBACrE,EAAE,iBAAiB,WAAW,WAAW,CAAC;;AAG/D,MAAM,YAAY,UAChB,UAAU,SAAS,UAAU;AAE/B,MAAM,iBAAiB,EAAE,MAAM,eAC7B,oBAAC,MAAD;CAAY;WACV,oBAAC,UAAD;EAAU,MAAM;EAAK;EAAoB,CAAA;CACpC,CAAA;AAGT,MAAa,mBAAmB,EAC9B,QAAQ,YACR,MACA,YACA,eACqD;CACrD,MAAM,OAAO,SAAS,MAAM;CAC5B,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,aAAa,KAAK,cAAc,iBAAiB,GAAG;AACzE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;AAEN,QACE,oBAAC,MAAD;EAAW;EAAK,YAAY;EAAW,OAAO,QAAQ,KAAK;YACzD,qBAAC,OAAD;GAAO,SAAS,QAAQ;aAAxB;IACG,QAAQ,oBAAC,eAAD;KAAqB;eAAO;KAAqB,CAAA;IACzD,cAAc,oBAAC,eAAD;KAAqB;eAAO;KAA2B,CAAA;IACtE,oBAAC,MAAD;KAAY;KAAO;KAAgB,CAAA;IAC7B;;EACH,CAAA;;;;ACxDX,MAAa,sBAAsB,EAAE,MAAM,GAAG,aAC5C,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,OAAD;GAAO,SAAS,QAAQ;aAAK;GAAa,CAAA;EACjC,CAAA;CACK,CAAA;;;ACVpB,MAAM,qBAAqB;CAAE,MAAM;CAAG,OAAO;CAAG;AAShD,MAAM,UAAU,EAAE,eAChB,oBAAC,OAAD;CAAO,SAAS,QAAQ;CAAK;CAAiB,CAAA;AAGhD,MAAM,aAAa,EAAE,MAAM,YAAmD;CAC5E,MAAM,UAAU,mBAAmB,KAAK;CACxC,MAAM,WAAW,UAAU,KAAK,mBAAmB;CACnD,MAAM,YAAY,UAAU,KAAK,mBAAmB;AAEpD,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,QAAD,EAAA,UAAS,MAAc,CAAA;EACd,CAAA,EACX,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,SAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAS,OAAe,CAAA,EAClB,CAAA;EACC,CAAA,CACV,EAAA,CAAA;;AAIP,MAAa,qBAAqB,EAAE,MAAM,OAAO,GAAG,aAClD,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,WAAD;EAAiB;EAAa;EAAS,CAAA;CACvB,CAAA"}

package/dist/PageLayout.d.mts

@@ -1,2 +1,2 @@
-import { n as Container, r as Section, t as Backdrop } from "./PageLayout-DfAbeFIh.mjs";
+import { n as Container, r as Section, t as Backdrop } from "./PageLayout-B_LKPZD8.mjs";
 export { Backdrop, Container, Section };

package/dist/{PageLayoutFrame-CQLREOBH.d.mts → PageLayoutFrame-uf17F41p.d.mts}

@@ -25,4 +25,4 @@ declare const PageLayoutFrame: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageLayoutFrame as n, PageLayoutWidth as r, PageLayoutChromeProps as t };
-//# sourceMappingURL=PageLayoutFrame-CQLREOBH.d.mts.map
+//# sourceMappingURL=PageLayoutFrame-uf17F41p.d.mts.map

package/dist/PageLayoutFrame.d.mts

@@ -1,2 +1,2 @@
-import { n as PageLayoutFrame, r as PageLayoutWidth, t as PageLayoutChromeProps } from "./PageLayoutFrame-CQLREOBH.mjs";
+import { n as PageLayoutFrame, r as PageLayoutWidth, t as PageLayoutChromeProps } from "./PageLayoutFrame-uf17F41p.mjs";
 export { PageLayoutChromeProps, PageLayoutFrame, PageLayoutWidth };