@persona/design-system 0.10.13 → 0.10.15

package/dist/{Menu-BVn1jh46.mjs.map → Menu-DQPxDJ11.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Menu-BVn1jh46.mjs","names":["Card"],"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type StyledComponent,\n  type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport Card from '#src/components/Card';\nimport { withAlpha } from '#src/lib/color';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { type MaybeSemanticTheme, semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { darkTheme, withPdsTheming } from '#src/theme';\nimport type { PersonaTheme } from '#src/theme';\n\ntype MenuTheme = PersonaTheme & MaybeSemanticTheme;\n\nconst legacyDarkTheme = withPdsTheming(darkTheme, 'off');\n\nconst hoverForeground = (theme: MenuTheme, variant: MenuItemProps['variant']) =>\n  variant === 'danger'\n    ? semanticColor(theme, 'FgDanger2', Color.CoreRed900)\n    : semanticColor(theme, 'FgPrimary', theme.color.text.primary);\n\nconst hoverSurface = (theme: MenuTheme, variant: MenuItemProps['variant']) => {\n  const tokens = semanticTokens(theme);\n  if (variant === 'danger') {\n    return tokens\n      ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n      : theme.color.variants.danger.highlightLight;\n  }\n  return tokens ? tokens.SurfaceHover : theme.color.background.secondary;\n};\n\nconst selectedSurface = (theme: MenuTheme) => {\n  const tokens = semanticTokens(theme);\n  return tokens\n    ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n    : theme.color.background.highlight;\n};\n\nexport const FloatingCard: StyledComponent<\n  ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n  DefaultTheme\n> = styled(Card)`\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  outline: none;\n  z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n  ({ role, doNotSetRole = false }) => ({\n    role: doNotSetRole ? undefined : (role ?? 'menu'),\n  }),\n)<{ padding?: Spacing }>`\n  list-style: none;\n  margin: 0;\n  padding: ${({ padding }) => padding || Spacing[2]};\n  outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n  children: ReactNode;\n  prefixIcon?: ReactNode;\n  suffixIcon?: ReactNode;\n  disabled?: boolean;\n  variant?: 'basic' | 'danger';\n  as?: T;\n  stretchLabel?: boolean;\n  subtitle?: string;\n  focused?: boolean;\n  selected?: boolean;\n  size?: 'sm' | 'md';\n}\n\nexport const ListItem = styled.li<\n  Pick<MenuItemProps, 'variant' | 'disabled' | 'focused' | 'selected' | 'size'>\n>`\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  display: flex;\n  align-items: center;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n  border-radius: 4px;\n  list-style: none;\n  text-decoration: none;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  cursor: pointer;\n  ${({ focused, selected, theme, variant }) => {\n    if (!focused || selected) {\n      return undefined;\n    }\n    const semantic = semanticTokens(theme) != null;\n    return css`\n      outline: none;\n      color: ${semantic ? hoverForeground(theme, variant) : theme.color.text.primary};\n      background-color: ${semantic ? hoverSurface(theme, variant) : theme.color.background.secondary};\n    `;\n  }}\n\n  &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n    ${({ selected, variant }) =>\n      !selected &&\n      css`\n        outline: none;\n        color: ${({ theme }) => hoverForeground(theme, variant)};\n        background-color: ${({ theme }) => hoverSurface(theme, variant)};\n      `}\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n    outline-offset: 1px;\n  }\n\n  ${({ selected, theme }) =>\n    selected &&\n    css`\n      outline: none;\n      color: ${semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n      background-color: ${selectedSurface(theme)};\n    `}\n\n  &${isDisabled} {\n    color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Variant Styling */\n  ${({ theme, variant }) =>\n    variant === 'danger' &&\n    css`\n      color: ${semanticColor(theme, 'FgDanger1', theme.color.variants[variant].default)};\n\n      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n        color: ${hoverForeground(theme, variant)};\n        background-color: ${hoverSurface(theme, variant)};\n      }\n\n      &${isDisabled} {\n        color: ${semanticColor(theme, 'FgDisabled', theme.color.variants[variant].disabled)};\n      }\n    `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: ${Spacing[2]};\n  line-height: 1;\n\n  ${({ suffix }) =>\n    suffix &&\n    css`\n      margin-left: ${Spacing[2]};\n    `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n  line-height: 16px;\n  ${({ stretchLabel }) =>\n    stretchLabel &&\n    css`\n      width: 100%;\n    `}\n`;\n\n/**\n * https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n  MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n  {\n    children,\n    disabled,\n    variant,\n    prefixIcon,\n    suffixIcon,\n    stretchLabel,\n    selected,\n    size,\n    ...elemProps\n  },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <ListItem\n      disabled={disabled}\n      variant={variant}\n      selected={selected}\n      ref={ref}\n      aria-disabled={disabled}\n      // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n      aria-current={selected ? 'true' : undefined}\n      role='menuitem'\n      tabIndex={disabled ? -1 : 0}\n      size={size}\n      {...elemProps}\n    >\n      {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n      <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n      {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n    </ListItem>\n  );\n});\n\nconst StyledMenuDivider = styled.hr`\n  height: 0px;\n  padding: 0px;\n  font-size: 0;\n  margin: ${Spacing[2]} -${Spacing[2]};\n  border: none;\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n  <DropdownMenu.Separator asChild>\n    <StyledMenuDivider {...props} />\n  </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n  size?: 'sm' | 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n  ${paragraphMixins.smMono};\n  text-transform: uppercase;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n  display: block;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  letter-spacing: 0.15px;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n  children?: ReactNode;\n  className?: string;\n  variant?: 'light' | 'dark';\n  as?: T;\n  doNotSetRole?: boolean;\n  containerProps?: ComponentPropsWithRef<'div'>;\n  listRef?: RefObject<T>;\n  itemProps?:\n    | ComponentPropsWithoutRef<'li'>\n    | ((\n        props: ComponentPropsWithoutRef<'li'>,\n        index: number,\n      ) => Partial<ComponentPropsWithRef<'li'>>);\n  onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n  children,\n  variant,\n  containerProps,\n  itemProps,\n  listRef,\n  className,\n  onClose,\n  as,\n  ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n  const menu = (\n    <FloatingCard {...containerProps} className={className}>\n      <MenuList {...props} as={as as any} ref={listRef}>\n        {children}\n        <DismissButton onDismiss={onClose} />\n      </MenuList>\n    </FloatingCard>\n  );\n\n  if (variant === 'dark') {\n    return <PDSProvider theme={legacyDarkTheme}>{menu}</PDSProvider>;\n  }\n\n  return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}
+{"version":3,"file":"Menu-DQPxDJ11.mjs","names":["Card"],"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type StyledComponent,\n  type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport Card from '#src/components/Card';\nimport { withAlpha } from '#src/lib/color';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { type MaybeSemanticTheme, semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { darkTheme, withPdsTheming } from '#src/theme';\nimport type { PersonaTheme } from '#src/theme';\n\ntype MenuTheme = PersonaTheme & MaybeSemanticTheme;\n\nconst legacyDarkTheme = withPdsTheming(darkTheme, 'off');\n\nconst hoverForeground = (theme: MenuTheme, variant: MenuItemProps['variant']) =>\n  variant === 'danger'\n    ? semanticColor(theme, 'FgDanger2', Color.CoreRed900)\n    : semanticColor(theme, 'FgPrimary', theme.color.text.primary);\n\nconst hoverSurface = (theme: MenuTheme, variant: MenuItemProps['variant']) => {\n  const tokens = semanticTokens(theme);\n  if (variant === 'danger') {\n    return tokens\n      ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n      : theme.color.variants.danger.highlightLight;\n  }\n  return tokens ? tokens.SurfaceHover : theme.color.background.secondary;\n};\n\nconst selectedSurface = (theme: MenuTheme) => {\n  const tokens = semanticTokens(theme);\n  return tokens\n    ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n    : theme.color.background.highlight;\n};\n\nexport const FloatingCard: StyledComponent<\n  ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n  DefaultTheme\n> = styled(Card)`\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  outline: none;\n  z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n  ({ role, doNotSetRole = false }) => ({\n    role: doNotSetRole ? undefined : (role ?? 'menu'),\n  }),\n)<{ padding?: Spacing }>`\n  list-style: none;\n  margin: 0;\n  padding: ${({ padding }) => padding || Spacing[2]};\n  outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n  children: ReactNode;\n  prefixIcon?: ReactNode;\n  suffixIcon?: ReactNode;\n  disabled?: boolean;\n  variant?: 'basic' | 'danger';\n  as?: T;\n  stretchLabel?: boolean;\n  subtitle?: string;\n  focused?: boolean;\n  selected?: boolean;\n  size?: 'sm' | 'md';\n}\n\nexport const ListItem = styled.li<\n  Pick<MenuItemProps, 'variant' | 'disabled' | 'focused' | 'selected' | 'size'>\n>`\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  display: flex;\n  align-items: center;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n  border-radius: 4px;\n  list-style: none;\n  text-decoration: none;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  cursor: pointer;\n  ${({ focused, selected, theme, variant }) => {\n    if (!focused || selected) {\n      return undefined;\n    }\n    const semantic = semanticTokens(theme) != null;\n    return css`\n      outline: none;\n      color: ${semantic ? hoverForeground(theme, variant) : theme.color.text.primary};\n      background-color: ${semantic ? hoverSurface(theme, variant) : theme.color.background.secondary};\n    `;\n  }}\n\n  &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n    ${({ selected, variant }) =>\n      !selected &&\n      css`\n        outline: none;\n        color: ${({ theme }) => hoverForeground(theme, variant)};\n        background-color: ${({ theme }) => hoverSurface(theme, variant)};\n      `}\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n    outline-offset: 1px;\n  }\n\n  ${({ selected, theme }) =>\n    selected &&\n    css`\n      outline: none;\n      color: ${semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n      background-color: ${selectedSurface(theme)};\n    `}\n\n  &${isDisabled} {\n    color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Variant Styling */\n  ${({ theme, variant }) =>\n    variant === 'danger' &&\n    css`\n      color: ${semanticColor(theme, 'FgDanger1', theme.color.variants[variant].default)};\n\n      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n        color: ${hoverForeground(theme, variant)};\n        background-color: ${hoverSurface(theme, variant)};\n      }\n\n      &${isDisabled} {\n        color: ${semanticColor(theme, 'FgDisabled', theme.color.variants[variant].disabled)};\n      }\n    `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: ${Spacing[2]};\n  line-height: 1;\n\n  ${({ suffix }) =>\n    suffix &&\n    css`\n      margin-left: ${Spacing[2]};\n    `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n  line-height: 16px;\n  ${({ stretchLabel }) =>\n    stretchLabel &&\n    css`\n      width: 100%;\n    `}\n`;\n\n/**\n * https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n  MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n  {\n    children,\n    disabled,\n    variant,\n    prefixIcon,\n    suffixIcon,\n    stretchLabel,\n    selected,\n    size,\n    ...elemProps\n  },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <ListItem\n      disabled={disabled}\n      variant={variant}\n      selected={selected}\n      ref={ref}\n      aria-disabled={disabled}\n      // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n      aria-current={selected ? 'true' : undefined}\n      role='menuitem'\n      tabIndex={disabled ? -1 : 0}\n      size={size}\n      {...elemProps}\n    >\n      {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n      <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n      {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n    </ListItem>\n  );\n});\n\nconst StyledMenuDivider = styled.hr`\n  height: 0px;\n  padding: 0px;\n  font-size: 0;\n  margin: ${Spacing[2]} -${Spacing[2]};\n  border: none;\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n  <DropdownMenu.Separator asChild>\n    <StyledMenuDivider {...props} />\n  </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n  size?: 'sm' | 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n  ${paragraphMixins.smMono};\n  text-transform: uppercase;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n  display: block;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  letter-spacing: 0.15px;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n  children?: ReactNode;\n  className?: string;\n  variant?: 'light' | 'dark';\n  as?: T;\n  doNotSetRole?: boolean;\n  containerProps?: ComponentPropsWithRef<'div'>;\n  listRef?: RefObject<T>;\n  itemProps?:\n    | ComponentPropsWithoutRef<'li'>\n    | ((\n        props: ComponentPropsWithoutRef<'li'>,\n        index: number,\n      ) => Partial<ComponentPropsWithRef<'li'>>);\n  onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n  children,\n  variant,\n  containerProps,\n  itemProps,\n  listRef,\n  className,\n  onClose,\n  as,\n  ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n  const menu = (\n    <FloatingCard {...containerProps} className={className}>\n      <MenuList {...props} as={as as any} ref={listRef}>\n        {children}\n        <DismissButton onDismiss={onClose} />\n      </MenuList>\n    </FloatingCard>\n  );\n\n  if (variant === 'dark') {\n    return <PDSProvider theme={legacyDarkTheme}>{menu}</PDSProvider>;\n  }\n\n  return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}

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-keVl-eKm.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-DNJMfxfw.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/{MiddleTruncatedText-DicQsLDG.mjs → MiddleTruncatedText--jzGTD00.mjs}

@@ -1,6 +1,6 @@
 import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Typography } from "@persona/design-tokens";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/middleTruncateText.ts
 const ELLIPSIS = "…";
@@ -168,4 +168,4 @@ const MiddleTruncatedText = ({ value, maxWidth = "96px", font, titleBehavior = "
 //#endregion
 export { MiddleTruncatedText as t };
 
-//# sourceMappingURL=MiddleTruncatedText-DicQsLDG.mjs.map
+//# sourceMappingURL=MiddleTruncatedText--jzGTD00.mjs.map

package/dist/{MiddleTruncatedText-DicQsLDG.mjs.map → MiddleTruncatedText--jzGTD00.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"MiddleTruncatedText-DicQsLDG.mjs","names":[],"sources":["../src/lib/middleTruncateText.ts","../src/lib/MiddleTruncatedText.tsx"],"sourcesContent":["import { Typography } from '@persona/design-tokens';\n\nconst ELLIPSIS = '…';\nconst DEFAULT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;\nconst MEASUREMENT_TOLERANCE_PX = 1;\n\nfunction createMeasurementCanvas(): [HTMLCanvasElement, () => void] {\n  // oxlint-disable-next-line persona-web/document-create-element-canvas\n  const canvas = document.createElement('canvas');\n  const cleanup = () => {\n    canvas.width = 0;\n    canvas.height = 0;\n    canvas.remove();\n  };\n\n  return [canvas, cleanup];\n}\n\nexport function buildMiddleTruncatedText(text: string, charsToShow: number): string {\n  if (charsToShow >= text.length) {\n    return text;\n  }\n\n  if (charsToShow <= ELLIPSIS.length) {\n    return ELLIPSIS.slice(0, Math.max(charsToShow, 0));\n  }\n\n  const contentChars = charsToShow - ELLIPSIS.length;\n  const front = Math.ceil(contentChars / 2);\n  const back = Math.floor(contentChars / 2);\n\n  return text.slice(0, front) + ELLIPSIS + text.slice(text.length - back);\n}\n\nexport function isMiddleTruncated(displayText: string, fullText: string): boolean {\n  return displayText !== fullText;\n}\n\nexport function parseMaxWidthPx(maxWidth: number | string): number | null {\n  if (typeof maxWidth === 'number') {\n    return maxWidth;\n  }\n\n  if (maxWidth.endsWith('px')) {\n    const parsed = Number.parseFloat(maxWidth);\n    return Number.isNaN(parsed) ? null : parsed;\n  }\n\n  return null;\n}\n\nexport function measureTextWidth(text: string, font = DEFAULT_FONT): number {\n  const [canvas, cleanupCanvas] = createMeasurementCanvas();\n\n  try {\n    const context = canvas.getContext('2d');\n\n    if (!context) {\n      return text.length * 6;\n    }\n\n    context.font = font;\n    const measuredWidth = context.measureText(text).width;\n    const minimumReasonableWidth = text.length * 4;\n\n    if (measuredWidth === 0 || measuredWidth < minimumReasonableWidth) {\n      return text.length * 6;\n    }\n\n    return measuredWidth;\n  } finally {\n    cleanupCanvas();\n  }\n}\n\nexport function findMiddleTruncatedTextForWidth(\n  text: string,\n  maxWidthPx: number,\n  font = DEFAULT_FONT,\n): string {\n  const fitBudget = maxWidthPx + MEASUREMENT_TOLERANCE_PX;\n\n  if (measureTextWidth(text, font) <= fitBudget) {\n    return text;\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n\n    if (measureTextWidth(candidate, font) <= fitBudget) {\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return bestDisplay;\n}\n\nexport function findMaxMiddleTruncatedCharsThatFit(\n  element: HTMLElement,\n  text: string,\n  maxWidthPx?: number | null,\n  font?: string,\n): { displayText: string; charsToShow: number } {\n  const measuredWidth = element.clientWidth > 0 ? element.clientWidth : null;\n  const parsedMaxWidth = maxWidthPx ?? parseMaxWidthPx(element.style.maxWidth);\n  const widthBudget =\n    measuredWidth != null && parsedMaxWidth != null\n      ? Math.min(measuredWidth, parsedMaxWidth)\n      : (measuredWidth ?? parsedMaxWidth);\n\n  if (widthBudget != null && widthBudget > 0) {\n    const displayText = findMiddleTruncatedTextForWidth(text, widthBudget, font);\n    return { displayText, charsToShow: displayText.length };\n  }\n\n  element.textContent = text;\n  if (element.scrollWidth <= element.clientWidth) {\n    return { displayText: text, charsToShow: text.length };\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestCharsToShow = ELLIPSIS.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n    element.textContent = candidate;\n\n    if (element.scrollWidth <= element.clientWidth) {\n      bestCharsToShow = mid;\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return { displayText: bestDisplay, charsToShow: bestCharsToShow };\n}\n","import {\n  type ComponentPropsWithoutRef,\n  type FC,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  findMaxMiddleTruncatedCharsThatFit,\n  isMiddleTruncated,\n  parseMaxWidthPx,\n} from './middleTruncateText';\n\nconst TruncationSpan = styled.span`\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  min-width: 0;\n  position: relative;\n`;\n\nconst AccessibleText = styled.span`\n  opacity: 0;\n  user-select: text;\n`;\n\nconst VisualTruncatedText = styled.span`\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  color: inherit;\n  pointer-events: none;\n`;\n\nexport interface MiddleTruncatedTextProps extends ComponentPropsWithoutRef<'span'> {\n  value: string;\n  maxWidth?: number | string;\n  font?: string;\n  titleBehavior?: 'always' | 'conditional' | 'never';\n  onTruncatedChange?: (isTruncated: boolean) => void;\n}\n\nexport const MiddleTruncatedText: FC<MiddleTruncatedTextProps> = ({\n  value,\n  maxWidth = '96px',\n  font,\n  titleBehavior = 'conditional',\n  onTruncatedChange,\n  'aria-label': ariaLabel,\n  style,\n  ...props\n}) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const [displayText, setDisplayText] = useState(value);\n  const maxWidthPx = parseMaxWidthPx(maxWidth);\n\n  const updateTruncation = useCallback(\n    (element: HTMLElement) => {\n      const { displayText: nextDisplayText } = findMaxMiddleTruncatedCharsThatFit(\n        element,\n        value,\n        maxWidthPx,\n        font,\n      );\n      setDisplayText((current) => (current === nextDisplayText ? current : nextDisplayText));\n      onTruncatedChange?.(isMiddleTruncated(nextDisplayText, value));\n    },\n    [value, maxWidthPx, font, onTruncatedChange],\n  );\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    updateTruncation(element);\n\n    let cancelled = false;\n    void document.fonts?.ready.then(() => {\n      if (!cancelled) {\n        updateTruncation(element);\n      }\n    });\n\n    const resizeObserver =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => updateTruncation(element));\n    resizeObserver?.observe(element);\n\n    return () => {\n      cancelled = true;\n      resizeObserver?.disconnect();\n    };\n  }, [maxWidth, updateTruncation]);\n\n  const isTruncated = isMiddleTruncated(displayText, value);\n\n  return (\n    <TruncationSpan\n      style={{ ...style, maxWidth }}\n      aria-label={ariaLabel ?? (isTruncated ? value : undefined)}\n      title={\n        titleBehavior !== 'never' && (titleBehavior === 'always' || isTruncated) ? value : undefined\n      }\n      {...props}\n      // After the spread: on React 19 `ref` is an ordinary prop, so a `styled(MiddleTruncatedText)`\n      // wrapper hands us `ref: null` in `props`, which would clobber the ref measured below.\n      ref={ref}\n    >\n      {isTruncated ? (\n        <>\n          <AccessibleText>{value}</AccessibleText>\n          <VisualTruncatedText aria-hidden='true'>{displayText}</VisualTruncatedText>\n        </>\n      ) : (\n        displayText\n      )}\n    </TruncationSpan>\n  );\n};\n\nexport default MiddleTruncatedText;\n"],"mappings":"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"}
+{"version":3,"file":"MiddleTruncatedText--jzGTD00.mjs","names":[],"sources":["../src/lib/middleTruncateText.ts","../src/lib/MiddleTruncatedText.tsx"],"sourcesContent":["import { Typography } from '@persona/design-tokens';\n\nconst ELLIPSIS = '…';\nconst DEFAULT_FONT = `${Typography.TextMono.fontWeight} ${Typography.TextExtraSmall.fontSize} ${Typography.TextMono.fontFamily}`;\nconst MEASUREMENT_TOLERANCE_PX = 1;\n\nfunction createMeasurementCanvas(): [HTMLCanvasElement, () => void] {\n  // oxlint-disable-next-line persona-web/document-create-element-canvas\n  const canvas = document.createElement('canvas');\n  const cleanup = () => {\n    canvas.width = 0;\n    canvas.height = 0;\n    canvas.remove();\n  };\n\n  return [canvas, cleanup];\n}\n\nexport function buildMiddleTruncatedText(text: string, charsToShow: number): string {\n  if (charsToShow >= text.length) {\n    return text;\n  }\n\n  if (charsToShow <= ELLIPSIS.length) {\n    return ELLIPSIS.slice(0, Math.max(charsToShow, 0));\n  }\n\n  const contentChars = charsToShow - ELLIPSIS.length;\n  const front = Math.ceil(contentChars / 2);\n  const back = Math.floor(contentChars / 2);\n\n  return text.slice(0, front) + ELLIPSIS + text.slice(text.length - back);\n}\n\nexport function isMiddleTruncated(displayText: string, fullText: string): boolean {\n  return displayText !== fullText;\n}\n\nexport function parseMaxWidthPx(maxWidth: number | string): number | null {\n  if (typeof maxWidth === 'number') {\n    return maxWidth;\n  }\n\n  if (maxWidth.endsWith('px')) {\n    const parsed = Number.parseFloat(maxWidth);\n    return Number.isNaN(parsed) ? null : parsed;\n  }\n\n  return null;\n}\n\nexport function measureTextWidth(text: string, font = DEFAULT_FONT): number {\n  const [canvas, cleanupCanvas] = createMeasurementCanvas();\n\n  try {\n    const context = canvas.getContext('2d');\n\n    if (!context) {\n      return text.length * 6;\n    }\n\n    context.font = font;\n    const measuredWidth = context.measureText(text).width;\n    const minimumReasonableWidth = text.length * 4;\n\n    if (measuredWidth === 0 || measuredWidth < minimumReasonableWidth) {\n      return text.length * 6;\n    }\n\n    return measuredWidth;\n  } finally {\n    cleanupCanvas();\n  }\n}\n\nexport function findMiddleTruncatedTextForWidth(\n  text: string,\n  maxWidthPx: number,\n  font = DEFAULT_FONT,\n): string {\n  const fitBudget = maxWidthPx + MEASUREMENT_TOLERANCE_PX;\n\n  if (measureTextWidth(text, font) <= fitBudget) {\n    return text;\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n\n    if (measureTextWidth(candidate, font) <= fitBudget) {\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return bestDisplay;\n}\n\nexport function findMaxMiddleTruncatedCharsThatFit(\n  element: HTMLElement,\n  text: string,\n  maxWidthPx?: number | null,\n  font?: string,\n): { displayText: string; charsToShow: number } {\n  const measuredWidth = element.clientWidth > 0 ? element.clientWidth : null;\n  const parsedMaxWidth = maxWidthPx ?? parseMaxWidthPx(element.style.maxWidth);\n  const widthBudget =\n    measuredWidth != null && parsedMaxWidth != null\n      ? Math.min(measuredWidth, parsedMaxWidth)\n      : (measuredWidth ?? parsedMaxWidth);\n\n  if (widthBudget != null && widthBudget > 0) {\n    const displayText = findMiddleTruncatedTextForWidth(text, widthBudget, font);\n    return { displayText, charsToShow: displayText.length };\n  }\n\n  element.textContent = text;\n  if (element.scrollWidth <= element.clientWidth) {\n    return { displayText: text, charsToShow: text.length };\n  }\n\n  let low = ELLIPSIS.length;\n  let high = text.length;\n  let bestCharsToShow = ELLIPSIS.length;\n  let bestDisplay = buildMiddleTruncatedText(text, ELLIPSIS.length);\n\n  while (low <= high) {\n    const mid = Math.floor((low + high) / 2);\n    const candidate = buildMiddleTruncatedText(text, mid);\n    element.textContent = candidate;\n\n    if (element.scrollWidth <= element.clientWidth) {\n      bestCharsToShow = mid;\n      bestDisplay = candidate;\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n\n  return { displayText: bestDisplay, charsToShow: bestCharsToShow };\n}\n","import {\n  type ComponentPropsWithoutRef,\n  type FC,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  findMaxMiddleTruncatedCharsThatFit,\n  isMiddleTruncated,\n  parseMaxWidthPx,\n} from './middleTruncateText';\n\nconst TruncationSpan = styled.span`\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  min-width: 0;\n  position: relative;\n`;\n\nconst AccessibleText = styled.span`\n  opacity: 0;\n  user-select: text;\n`;\n\nconst VisualTruncatedText = styled.span`\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  color: inherit;\n  pointer-events: none;\n`;\n\nexport interface MiddleTruncatedTextProps extends ComponentPropsWithoutRef<'span'> {\n  value: string;\n  maxWidth?: number | string;\n  font?: string;\n  titleBehavior?: 'always' | 'conditional' | 'never';\n  onTruncatedChange?: (isTruncated: boolean) => void;\n}\n\nexport const MiddleTruncatedText: FC<MiddleTruncatedTextProps> = ({\n  value,\n  maxWidth = '96px',\n  font,\n  titleBehavior = 'conditional',\n  onTruncatedChange,\n  'aria-label': ariaLabel,\n  style,\n  ...props\n}) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const [displayText, setDisplayText] = useState(value);\n  const maxWidthPx = parseMaxWidthPx(maxWidth);\n\n  const updateTruncation = useCallback(\n    (element: HTMLElement) => {\n      const { displayText: nextDisplayText } = findMaxMiddleTruncatedCharsThatFit(\n        element,\n        value,\n        maxWidthPx,\n        font,\n      );\n      setDisplayText((current) => (current === nextDisplayText ? current : nextDisplayText));\n      onTruncatedChange?.(isMiddleTruncated(nextDisplayText, value));\n    },\n    [value, maxWidthPx, font, onTruncatedChange],\n  );\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    updateTruncation(element);\n\n    let cancelled = false;\n    void document.fonts?.ready.then(() => {\n      if (!cancelled) {\n        updateTruncation(element);\n      }\n    });\n\n    const resizeObserver =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => updateTruncation(element));\n    resizeObserver?.observe(element);\n\n    return () => {\n      cancelled = true;\n      resizeObserver?.disconnect();\n    };\n  }, [maxWidth, updateTruncation]);\n\n  const isTruncated = isMiddleTruncated(displayText, value);\n\n  return (\n    <TruncationSpan\n      style={{ ...style, maxWidth }}\n      aria-label={ariaLabel ?? (isTruncated ? value : undefined)}\n      title={\n        titleBehavior !== 'never' && (titleBehavior === 'always' || isTruncated) ? value : undefined\n      }\n      {...props}\n      // After the spread: on React 19 `ref` is an ordinary prop, so a `styled(MiddleTruncatedText)`\n      // wrapper hands us `ref: null` in `props`, which would clobber the ref measured below.\n      ref={ref}\n    >\n      {isTruncated ? (\n        <>\n          <AccessibleText>{value}</AccessibleText>\n          <VisualTruncatedText aria-hidden='true'>{displayText}</VisualTruncatedText>\n        </>\n      ) : (\n        displayText\n      )}\n    </TruncationSpan>\n  );\n};\n\nexport default MiddleTruncatedText;\n"],"mappings":"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"}

package/dist/{Modal-CujB7DuB.d.mts → Modal-7ZHanMzZ.d.mts}

@@ -1,6 +1,6 @@
-import { r as ButtonProps } from "./Button-DjD8QxcY.mjs";
-import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
+import { r as ButtonProps } from "./Button-C4a4BTjL.mjs";
 import * as _$styled_components0 from "styled-components";
+import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
 import { Dialog, DialogTrigger, Pressable } from "react-aria-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -126,6 +126,10 @@ interface ModalProps {
    * Whether pressing the escape key closes the modal
    */
   isKeyboardDismissDisabled?: boolean;
+  /**
+   * Element the modal overlay is portaled into. Defaults to `document.body`.
+   */
+  portalContainer?: HTMLElement | null;
 }
 declare const _default: (({
   children,
@@ -140,7 +144,8 @@ declare const _default: (({
   onOpenChange,
   isDismissable,
   isKeyboardDismissDisabled,
-  open
+  open,
+  portalContainer
 }: ModalProps) => _$react_jsx_runtime0.JSX.Element) & {
   Title: ({
     children,
@@ -149,4 +154,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-CujB7DuB.d.mts.map
+//# sourceMappingURL=Modal-7ZHanMzZ.d.mts.map

package/dist/{Modal-SnCo7ecm.mjs → Modal-bsjGJxTM.mjs}

@@ -1,17 +1,17 @@
 import { a as styled, i as keyframes } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
+import { ReducedMotionFade } from "./variables/transitions.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { l as usePDSStrings } from "./i18n-DaOKaFc2.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
 import { n as Heading$1 } from "./Text-D0vEReED.mjs";
-import { ReducedMotionFade } from "./variables/transitions.mjs";
 import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "./lib/useEmbeddedSurface.mjs";
 import useModalInsetRight, { SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, SIDEBAR_TRANSITION_EASING } from "./lib/useModalInsetRight.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack, t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button$1 } from "./IconButton-Bj1fry_K.mjs";
-import { i as TabBar, r as Tab } from "./TabBar-d4sdknti.mjs";
-import { forwardRef, useContext, useEffect, useState } from "react";
+import { n as Button$1 } from "./IconButton-kSjnfhWt.mjs";
+import { i as TabBar, r as Tab } from "./TabBar-B7U2uVD3.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
+import { forwardRef, useContext, useEffect, useState } from "react";
 import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
@@ -251,8 +251,8 @@ const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButt
 		})
 	});
 });
-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 Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size = "md", title, footer, tabs, defaultOpen, onOpenChange, isDismissable = false, isKeyboardDismissDisabled = false, open, portalContainer }) => {
+	const [modalElement, setModalElement] = useState(null);
 	const overlayState = useOverlayTriggerState({
 		isOpen: open,
 		defaultOpen,
@@ -260,26 +260,29 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 	});
 	const surfaceId = useEmbeddedSurfaceId();
 	const { insetRight: modalInsetRight, panelState } = useModalInsetRight();
+	const transitionMs = panelState === "opening" ? SIDEBAR_OPEN_TRANSITION_MS : panelState === "closing" ? SIDEBAR_CLOSE_TRANSITION_MS : 0;
+	const content = /* @__PURE__ */ jsx(ModalCard, {
+		size,
+		title,
+		footer,
+		tabs,
+		noBodyPadding,
+		...contentProps,
+		portalContainer: modalElement,
+		children: typeof children === "function" ? children({ portalContainer: modalElement }) : children
+	});
 	const overlay = /* @__PURE__ */ jsx(EmbeddedSurfaceOverlay, {
 		surfaceId,
 		$insetRight: modalInsetRight,
-		$transitionMs: panelState === "opening" ? SIDEBAR_OPEN_TRANSITION_MS : panelState === "closing" ? SIDEBAR_CLOSE_TRANSITION_MS : 0,
+		$transitionMs: transitionMs,
 		isDismissable,
 		isKeyboardDismissDisabled,
+		UNSTABLE_portalContainer: portalContainer ?? void 0,
 		shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
 		children: /* @__PURE__ */ jsx(EmbeddedSurfaceModal, {
-			ref: setPortalContainer,
+			ref: setModalElement,
 			surfaceId,
-			children: /* @__PURE__ */ jsx(ModalCard, {
-				size,
-				title,
-				footer,
-				tabs,
-				noBodyPadding,
-				...contentProps,
-				portalContainer,
-				children: typeof children === "function" ? children({ portalContainer }) : children
-			})
+			children: content
 		})
 	});
 	if (!trigger) return /* @__PURE__ */ jsx(OverlayTriggerStateContext.Provider, {
@@ -297,4 +300,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-SnCo7ecm.mjs.map
+//# sourceMappingURL=Modal-bsjGJxTM.mjs.map

package/dist/{Modal-SnCo7ecm.mjs.map → Modal-bsjGJxTM.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Modal-SnCo7ecm.mjs","names":["AriaModal","Button","Heading","AriaHeading","Card","Modal"],"sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\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 { useOverlayTriggerState } from 'react-stately';\nimport styled, { keyframes } 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  SIDEBAR_TRANSITION_EASING,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport {\n  ReducedMotionFade,\n  TransitionDuration,\n  TransitionEasing,\n} from '#src/variables/transitions';\n\nconst overlayEnter = keyframes`\n  from {\n    opacity: 0;\n  }\n`;\n\nconst overlayExit = keyframes`\n  to {\n    opacity: 0;\n  }\n`;\n\nconst modalRise = keyframes`\n  from {\n    transform: translateY(${Spacing[2]});\n  }\n`;\n\n// The card's rise reads the overlay's embedded-surface gate through these inherited properties, so\n// the two start on the same frame. The exit is layered over the entrance rather than replacing it, so\n// it fades from wherever the entrance had got to; the entrance runs on so a pending gate can't hold\n// the exit open.\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  --pds-modal-animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  --pds-modal-animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\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 ${SIDEBAR_TRANSITION_EASING};\n  animation: ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\n\n  &[data-exiting] {\n    animation:\n      ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both,\n      ${overlayExit} ${TransitionDuration.Faster} ${TransitionEasing.Exit} both;\n    animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms, 0ms;\n    animation-play-state: running;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &,\n    &[data-exiting] {\n      animation-duration: ${ReducedMotionFade.duration};\n      animation-timing-function: ${ReducedMotionFade.easing};\n    }\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  /* No forwards fill: a held transform makes the card the containing block for portaled menus. */\n  animation: ${modalRise} ${TransitionDuration.Fast} ${TransitionEasing.Enter} backwards;\n  animation-delay: var(--pds-modal-animation-delay, 0ms);\n  animation-play-state: var(--pds-modal-animation-play-state, running);\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n\n  &[data-exiting] {\n    animation: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\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 = ({ onClick, ...props }: ButtonProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <ModalCloseButton\n      variant='text'\n      width='icon'\n      size='md'\n      {...props}\n      onClick={(event: MouseEvent<HTMLButtonElement>) => {\n        // Return the consumer's result so Button can await a returned Promise (pending state,\n        // swallowed rejection). The modal still closes immediately, as it did before.\n        const result = onClick?.(event);\n        if (!event.defaultPrevented) {\n          state?.close();\n        }\n        return result;\n      }}\n    >\n      <XIcon />\n    </ModalCloseButton>\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 overlayState = useOverlayTriggerState({\n    isOpen: open,\n    defaultOpen,\n    onOpenChange,\n  });\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 overlay = (\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  );\n\n  // Without a trigger (controlled modals) DialogTrigger would render a PressResponder with no\n  // pressable child, which react-aria warns about, so provide the overlay state directly.\n  if (!trigger) {\n    return (\n      <OverlayTriggerStateContext.Provider value={overlayState}>\n        {overlay}\n      </OverlayTriggerStateContext.Provider>\n    );\n  }\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <Pressable>{trigger}</Pressable>\n      {overlay}\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Modal-bsjGJxTM.mjs","names":["AriaModal","Button","Heading","AriaHeading","Card","Modal"],"sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\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 { useOverlayTriggerState } from 'react-stately';\nimport styled, { keyframes } 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  SIDEBAR_TRANSITION_EASING,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport {\n  ReducedMotionFade,\n  TransitionDuration,\n  TransitionEasing,\n} from '#src/variables/transitions';\n\nconst overlayEnter = keyframes`\n  from {\n    opacity: 0;\n  }\n`;\n\nconst overlayExit = keyframes`\n  to {\n    opacity: 0;\n  }\n`;\n\nconst modalRise = keyframes`\n  from {\n    transform: translateY(${Spacing[2]});\n  }\n`;\n\n// The card's rise reads the overlay's embedded-surface gate through these inherited properties, so\n// the two start on the same frame. The exit is layered over the entrance rather than replacing it, so\n// it fades from wherever the entrance had got to; the entrance runs on so a pending gate can't hold\n// the exit open.\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  --pds-modal-animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  --pds-modal-animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\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 ${SIDEBAR_TRANSITION_EASING};\n  animation: ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\n\n  &[data-exiting] {\n    animation:\n      ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both,\n      ${overlayExit} ${TransitionDuration.Faster} ${TransitionEasing.Exit} both;\n    animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms, 0ms;\n    animation-play-state: running;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &,\n    &[data-exiting] {\n      animation-duration: ${ReducedMotionFade.duration};\n      animation-timing-function: ${ReducedMotionFade.easing};\n    }\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  /* No forwards fill: a held transform makes the card the containing block for portaled menus. */\n  animation: ${modalRise} ${TransitionDuration.Fast} ${TransitionEasing.Enter} backwards;\n  animation-delay: var(--pds-modal-animation-delay, 0ms);\n  animation-play-state: var(--pds-modal-animation-play-state, running);\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n\n  &[data-exiting] {\n    animation: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\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 = ({ onClick, ...props }: ButtonProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <ModalCloseButton\n      variant='text'\n      width='icon'\n      size='md'\n      {...props}\n      onClick={(event: MouseEvent<HTMLButtonElement>) => {\n        // Return the consumer's result so Button can await a returned Promise (pending state,\n        // swallowed rejection). The modal still closes immediately, as it did before.\n        const result = onClick?.(event);\n        if (!event.defaultPrevented) {\n          state?.close();\n        }\n        return result;\n      }}\n    >\n      <XIcon />\n    </ModalCloseButton>\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  /**\n   * Element the modal overlay is portaled into. Defaults to `document.body`.\n   */\n  portalContainer?: HTMLElement | null;\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  portalContainer,\n}: ModalProps) => {\n  const [modalElement, setModalElement] = useState<HTMLDivElement | null>(null);\n  const overlayState = useOverlayTriggerState({\n    isOpen: open,\n    defaultOpen,\n    onOpenChange,\n  });\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={modalElement}\n    >\n      {typeof children === 'function' ? children({ portalContainer: modalElement }) : children}\n    </ModalCard>\n  );\n\n  // Wrap trigger element to ensure it works with react-aria-components\n  const overlay = (\n    <EmbeddedSurfaceOverlay\n      surfaceId={surfaceId}\n      $insetRight={modalInsetRight}\n      $transitionMs={transitionMs}\n      isDismissable={isDismissable}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      UNSTABLE_portalContainer={portalContainer ?? undefined}\n      shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n    >\n      <EmbeddedSurfaceModal ref={setModalElement} surfaceId={surfaceId}>\n        {content}\n      </EmbeddedSurfaceModal>\n    </EmbeddedSurfaceOverlay>\n  );\n\n  // Without a trigger (controlled modals) DialogTrigger would render a PressResponder with no\n  // pressable child, which react-aria warns about, so provide the overlay state directly.\n  if (!trigger) {\n    return (\n      <OverlayTriggerStateContext.Provider value={overlayState}>\n        {overlay}\n      </OverlayTriggerStateContext.Provider>\n    );\n  }\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <Pressable>{trigger}</Pressable>\n      {overlay}\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}

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-CujB7DuB.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-7ZHanMzZ.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/{PageHeader-UPiqJpIF.d.mts → PageHeader-BeBmYmUX.d.mts}

@@ -1,6 +1,6 @@
 import { r as BreadcrumbsProps } from "./Breadcrumbs-3MtvzTPi.mjs";
-import { ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/PageHeader/PageHeader.d.ts
@@ -45,4 +45,4 @@ declare const PageHeader: ({
 }: PageHeaderProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageHeaderContainer as n, PageHeaderProps as r, PageHeader as t };
-//# sourceMappingURL=PageHeader-UPiqJpIF.d.mts.map
+//# sourceMappingURL=PageHeader-BeBmYmUX.d.mts.map

package/dist/{PageHeader-6KvtGED-.mjs → PageHeader-jvLx6GUu.mjs}

@@ -1,7 +1,7 @@
 import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
 import { i as Paragraph } from "./Text-D0vEReED.mjs";
-import { t as Breadcrumbs } from "./Breadcrumbs-DRs9eo1o.mjs";
+import { t as Breadcrumbs } from "./Breadcrumbs-I4VWR3NE.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PageHeader/PageHeader.tsx
@@ -78,4 +78,4 @@ const PageHeader = ({ title, breadcrumbs, subtitle, level: _level, prepend, appe
 //#endregion
 export { PageHeaderContainer as n, PageHeader as t };
 
-//# sourceMappingURL=PageHeader-6KvtGED-.mjs.map
+//# sourceMappingURL=PageHeader-jvLx6GUu.mjs.map

package/dist/{PageHeader-6KvtGED-.mjs.map → PageHeader-jvLx6GUu.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"PageHeader-6KvtGED-.mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { 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;\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    ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  }\n`;\n\nconst LeftContainer = styled.div<{ $hasSubtitle: boolean }>`\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  & > :not(${TitleContainer}):not(p) {\n    flex-shrink: 0;\n  }\n  > p {\n    ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n  }\n  /* Title and subtitle differ in size, so align their baselines rather than their boxes. */\n  ${({ $hasSubtitle }) =>\n    $hasSubtitle &&\n    css`\n      > ${TitleContainer}, > p {\n        align-self: baseline;\n      }\n    `}\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n  flex-shrink: 0;\n`;\n\ninterface PageHeaderCommonProps {\n  /**\n   * @deprecated Has no effect. Use `title` on index pages and `breadcrumbs` on detail pages.\n   */\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        /**\n         * Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size.\n         * For detail pages: pass the ancestor crumb(s) plus the current page. Pages without\n         * ancestors should pass `title` instead of a single crumb.\n         */\n        breadcrumbs: BreadcrumbsProps;\n      }\n  );\n\nconst PageHeader = ({\n  title,\n  breadcrumbs,\n  subtitle,\n  level: _level,\n  prepend,\n  append,\n  children,\n  ...props\n}: PageHeaderProps) => (\n  <PageHeaderContainer {...props}>\n    <LeftContainer $hasSubtitle={Boolean(subtitle)}>\n      {prepend}\n      <TitleContainer>\n        {breadcrumbs ? (\n          <Breadcrumbs size='lg' {...breadcrumbs} />\n        ) : (\n          <Paragraph as='h1' size='lg' weight='bold' color='primary'>\n            {title}\n          </Paragraph>\n        )}\n      </TitleContainer>\n      {append}\n      {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\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;;;;;;MAM3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;AAI9D,MAAM,gBAAgB,OAAO,GAA8B;;;;SAIlD,QAAQ,GAAG;;aAEP,eAAe;;;;MAItB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;KAG3D,EAAE,mBACH,gBACA,GAAG;UACG,eAAe;;;MAGnB;;AAGN,MAAM,iBAAiB,OAAO,GAAG;;;SAGxB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AAkC5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,OAAO,QACP,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD;EAAe,cAAc,QAAQ,SAAS;YAA9C;GACG;GACD,oBAAC,gBAAD,EAAA,UACG,cACC,oBAAC,aAAD;IAAa,MAAK;IAAK,GAAI;IAAe,CAAA,GAE1C,oBAAC,WAAD;IAAW,IAAG;IAAK,MAAK;IAAK,QAAO;IAAO,OAAM;cAC9C;IACS,CAAA,EAEC,CAAA;GAChB;GACA,YAAY,oBAAC,WAAD;IAAW,MAAK;cAAM;IAAqB,CAAA;GAC1C;KACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}
+{"version":3,"file":"PageHeader-jvLx6GUu.mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { 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;\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    ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  }\n`;\n\nconst LeftContainer = styled.div<{ $hasSubtitle: boolean }>`\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: ${Spacing[2]};\n  min-width: 0;\n  & > :not(${TitleContainer}):not(p) {\n    flex-shrink: 0;\n  }\n  > p {\n    ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n  }\n  /* Title and subtitle differ in size, so align their baselines rather than their boxes. */\n  ${({ $hasSubtitle }) =>\n    $hasSubtitle &&\n    css`\n      > ${TitleContainer}, > p {\n        align-self: baseline;\n      }\n    `}\n`;\n\nconst RightContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  margin-left: ${Spacing[3]};\n  flex-shrink: 0;\n`;\n\ninterface PageHeaderCommonProps {\n  /**\n   * @deprecated Has no effect. Use `title` on index pages and `breadcrumbs` on detail pages.\n   */\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        /**\n         * Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size.\n         * For detail pages: pass the ancestor crumb(s) plus the current page. Pages without\n         * ancestors should pass `title` instead of a single crumb.\n         */\n        breadcrumbs: BreadcrumbsProps;\n      }\n  );\n\nconst PageHeader = ({\n  title,\n  breadcrumbs,\n  subtitle,\n  level: _level,\n  prepend,\n  append,\n  children,\n  ...props\n}: PageHeaderProps) => (\n  <PageHeaderContainer {...props}>\n    <LeftContainer $hasSubtitle={Boolean(subtitle)}>\n      {prepend}\n      <TitleContainer>\n        {breadcrumbs ? (\n          <Breadcrumbs size='lg' {...breadcrumbs} />\n        ) : (\n          <Paragraph as='h1' size='lg' weight='bold' color='primary'>\n            {title}\n          </Paragraph>\n        )}\n      </TitleContainer>\n      {append}\n      {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\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;;;;;;MAM3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;AAI9D,MAAM,gBAAgB,OAAO,GAA8B;;;;SAIlD,QAAQ,GAAG;;aAEP,eAAe;;;;MAItB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;KAG3D,EAAE,mBACH,gBACA,GAAG;UACG,eAAe;;;MAGnB;;AAGN,MAAM,iBAAiB,OAAO,GAAG;;;SAGxB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AAkC5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,OAAO,QACP,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD;EAAe,cAAc,QAAQ,SAAS;YAA9C;GACG;GACD,oBAAC,gBAAD,EAAA,UACG,cACC,oBAAC,aAAD;IAAa,MAAK;IAAK,GAAI;IAAe,CAAA,GAE1C,oBAAC,WAAD;IAAW,IAAG;IAAK,MAAK;IAAK,QAAO;IAAO,OAAM;cAC9C;IACS,CAAA,EAEC,CAAA;GAChB;GACA,YAAY,oBAAC,WAAD;IAAW,MAAK;cAAM;IAAqB,CAAA;GAC1C;KACf,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-UPiqJpIF.mjs";
+import { n as PageHeaderContainer, r as PageHeaderProps, t as PageHeader } from "./PageHeader-BeBmYmUX.mjs";
 export { PageHeaderContainer, PageHeaderProps, PageHeader as default };

package/dist/{PageLayout-BdVM37bV.d.mts → PageLayout-BXM_pyrU.d.mts}

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/patterns/PageLayout/PageLayout.d.ts
@@ -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-BdVM37bV.d.mts.map
+//# sourceMappingURL=PageLayout-BXM_pyrU.d.mts.map

package/dist/{PageLayout-CPiVnS_r.mjs → PageLayout-D_NZNEit.mjs}

@@ -1,9 +1,9 @@
 import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "./lib/semanticColor.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-CYpOqTUu.mjs";
-import { useLayoutEffect, useRef, useState } from "react";
+import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "./Grid-DVC0SSEZ.mjs";
 import { Spacing } from "@persona/design-tokens";
+import { useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/PageLayout/PageLayout.tsx
 const Backdrop = styled.div`
@@ -131,4 +131,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-CPiVnS_r.mjs.map
+//# sourceMappingURL=PageLayout-D_NZNEit.mjs.map

package/dist/{PageLayout-CPiVnS_r.mjs.map → PageLayout-D_NZNEit.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"PageLayout-CPiVnS_r.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';\nimport { semanticColor } from '#src/lib/semanticColor';\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  background-color: ${({ theme }) =>\n    semanticColor(theme, 'SurfacePage', theme.color.background.secondary)};\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;;;;ACTxB,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;uBACxC,EAAE,YACrB,cAAc,OAAO,eAAe,MAAM,MAAM,WAAW,UAAU,CAAC;;AAG1E,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;;;;AC3DX,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-D_NZNEit.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';\nimport { semanticColor } from '#src/lib/semanticColor';\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  background-color: ${({ theme }) =>\n    semanticColor(theme, 'SurfacePage', theme.color.background.secondary)};\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;;;;ACTxB,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;uBACxC,EAAE,YACrB,cAAc,OAAO,eAAe,MAAM,MAAM,WAAW,UAAU,CAAC;;AAG1E,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;;;;AC3DX,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-BdVM37bV.mjs";
+import { n as Container, r as Section, t as Backdrop } from "./PageLayout-BXM_pyrU.mjs";
 export { Backdrop, Container, Section };

package/dist/{PageSelector-B5CcAzss.d.mts → PageSelector-C14ABZVL.d.mts}

@@ -1,4 +1,4 @@
-import { n as HStackProps } from "./Stack-CODxfzhl.mjs";
+import { n as HStackProps } from "./Stack-B6MrjJeW.mjs";
 import { t as PaginationParams } from "./types-CRymR_J9.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -33,4 +33,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-B5CcAzss.d.mts.map
+//# sourceMappingURL=PageSelector-C14ABZVL.d.mts.map

package/dist/PageSelector.d.mts

@@ -1,2 +1,2 @@
-import { n as PageInput, r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "./PageSelector-B5CcAzss.mjs";
+import { n as PageInput, r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "./PageSelector-C14ABZVL.mjs";
 export { PAGE_LIMIT_BEFORE_SCROLL_MODE, PageInput, PageSelector as default };

package/dist/{Pagination-CqFvnlXc.mjs → Pagination-CgT2eQrk.mjs}

@@ -2,11 +2,11 @@ import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
 import { l as usePDSStrings } from "./i18n-DaOKaFc2.mjs";
 import { t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button } from "./IconButton-Bj1fry_K.mjs";
-import { n as Input } from "./Input-DcbzPaax.mjs";
-import { n as Select, t as Option } from "./Select-DbWEgH5c.mjs";
-import { useEffect, useMemo, useState } from "react";
+import { n as Button } from "./IconButton-kSjnfhWt.mjs";
+import { n as Input } from "./Input-BIHbRmmU.mjs";
+import { n as Select, t as Option } from "./Select-Bicuj8VD.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
+import { useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash-es";
 //#region src/components/Pagination/constants.ts
@@ -198,4 +198,4 @@ var Pagination_default = Pagination;
 //#endregion
 export { MIN_PAGE_SIZE as a, DEFAULT_PAGE_SIZE_OPTIONS as i, PAGE_LIMIT_BEFORE_SCROLL_MODE as n, PageSelector as r, Pagination_default as t };
 
-//# sourceMappingURL=Pagination-CqFvnlXc.mjs.map
+//# sourceMappingURL=Pagination-CgT2eQrk.mjs.map