@persona/design-system 0.10.10 → 0.10.11

package/dist/{LogicRow-BakOUtzx.d.mts → LogicRow-Do7t7Suf.d.mts}

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

package/dist/LogicRow.d.mts

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

package/dist/MaskedInput.d.mts

@@ -1,10 +1,10 @@
-import { a as InputProps } from "./Input-DH-5dKor.mjs";
+import { a as InputProps } from "./Input-CwvrBsiS.mjs";
 import * as _$react from "react";
 import { IMaskInputProps } from "react-imask/mixin";
 
 //#region src/components/MaskedInput/MaskedInput.d.ts
 type MaskedInputProps = Omit<IMaskInputProps<HTMLInputElement>, 'inputRef' | 'componentProps' | 'size' | 'ref'> & InputProps;
-declare const MaskedInput: _$react.ForwardRefExoticComponent<Omit<IMaskInputProps<HTMLInputElement>, "ref" | "size" | "inputRef" | "componentProps"> & InputProps & _$react.RefAttributes<HTMLInputElement>>;
+declare const MaskedInput: _$react.ForwardRefExoticComponent<Omit<IMaskInputProps<HTMLInputElement>, "size" | "ref" | "inputRef" | "componentProps"> & InputProps & _$react.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { MaskedInput, MaskedInput as default, MaskedInputProps };
 //# sourceMappingURL=MaskedInput.d.mts.map

package/dist/MatchHighlight.d.mts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithoutRef } from "react";
 
 //#region src/components/MatchHighlight/MatchHighlight.d.ts
 interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {

package/dist/{Menu-BVn1jh46.mjs → Menu-BvMzSH2I.mjs}

@@ -1,14 +1,14 @@
 import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
+import { isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { semanticColor, semanticTokens } from "./lib/semanticColor.mjs";
+import { withAlpha } from "./lib/color.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
 import { darkTheme, withPdsTheming } from "./theme.mjs";
 import PDSProvider from "./lib/PDSProvider.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
-import { withAlpha } from "./lib/color.mjs";
-import { isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { forwardRef } from "react";
 import { Color, Spacing } from "@persona/design-tokens";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DismissButton } from "react-aria";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
@@ -179,4 +179,4 @@ Menu.Item = MenuItem;
 //#endregion
 export { MenuDivider as a, MenuList as c, Menu as i, IconContainer as n, MenuHeading as o, ListItem as r, MenuItem as s, FloatingCard as t };
 
-//# sourceMappingURL=Menu-BVn1jh46.mjs.map
+//# sourceMappingURL=Menu-BvMzSH2I.mjs.map

package/dist/{Menu-BVn1jh46.mjs.map → Menu-BvMzSH2I.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-BvMzSH2I.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-D6OrKCTC.d.mts → Menu-Ca5ftvo6.d.mts}

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

package/dist/Menu.d.mts

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-D6OrKCTC.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-Ca5ftvo6.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-De5_bPJ_.mjs → Modal-B6X5AgWj.mjs}

@@ -1,48 +1,66 @@
-import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
+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 useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "./lib/useEmbeddedSurface.mjs";
-import useModalInsetRight from "./lib/useModalInsetRight.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import useModalInsetRight, { SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, SIDEBAR_TRANSITION_EASING } from "./lib/useModalInsetRight.mjs";
 import { n as Stack, t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button$1 } from "./IconButton-DxHB2g80.mjs";
-import { i as TabBar, r as Tab } from "./TabBar-BCFO38E0.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-DwHgbIQ6.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";
 import { useOverlayTriggerState } from "react-stately";
 //#region src/components/Modal/Modal.tsx
-const StyledModalOverlay = styled(ModalOverlay)`
-  @keyframes overlayShow {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+const overlayEnter = keyframes`
+  from {
+    opacity: 0;
   }
+`;
+const overlayExit = keyframes`
+  to {
+    opacity: 0;
+  }
+`;
+const modalRise = keyframes`
+  from {
+    transform: translateY(${Spacing[2]});
+  }
+`;
+const StyledModalOverlay = styled(ModalOverlay)`
+  --pds-modal-animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;
+  --pds-modal-animation-play-state: ${({ $hostPending }) => $hostPending ? "paused" : "running"};
   background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: ${({ $insetRight }) => $insetRight};
-  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;
-  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: right ${({ $transitionMs }) => $transitionMs}ms ${SIDEBAR_TRANSITION_EASING};
+  animation: ${overlayEnter} ${"200ms"} ${"cubic-bezier(0, 0, 0.2, 1)"} both;
   animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;
-  animation-fill-mode: both;
-  ${({ $hostPending }) => $hostPending && `
-    animation-play-state: paused;
-  `}
-  @media (prefers-reduced-motion: reduce) {
-    animation-duration: 0ms;
-    animation-delay: 0ms;
+  animation-play-state: ${({ $hostPending }) => $hostPending ? "paused" : "running"};
+
+  &[data-exiting] {
+    animation:
+      ${overlayEnter} ${"200ms"} ${"cubic-bezier(0, 0, 0.2, 1)"} both,
+      ${overlayExit} ${"150ms"} ${"cubic-bezier(0.4, 0, 1, 1)"} both;
+    animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms, 0ms;
     animation-play-state: running;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    &,
+    &[data-exiting] {
+      animation-duration: ${ReducedMotionFade.duration};
+      animation-timing-function: ${ReducedMotionFade.easing};
+    }
+  }
   z-index: 10000;
   display: flex;
   align-items: center;
@@ -53,7 +71,18 @@ const StyledModal = styled(Modal)`
   outline: none;
   width: fit-content;
   max-width: 100%;
+  animation: ${modalRise} ${"200ms"} ${"cubic-bezier(0, 0, 0.2, 1)"} both;
+  animation-delay: var(--pds-modal-animation-delay, 0ms);
+  animation-play-state: var(--pds-modal-animation-play-state, running);
   ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
+
+  &[data-exiting] {
+    animation: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 `;
 /**
 * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from
@@ -233,7 +262,7 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 	const overlay = /* @__PURE__ */ jsx(EmbeddedSurfaceOverlay, {
 		surfaceId,
 		$insetRight: modalInsetRight,
-		$transitionMs: panelState === "opening" ? 425 : panelState === "closing" ? 200 : 0,
+		$transitionMs: panelState === "opening" ? SIDEBAR_OPEN_TRANSITION_MS : panelState === "closing" ? SIDEBAR_CLOSE_TRANSITION_MS : 0,
 		isDismissable,
 		isKeyboardDismissDisabled,
 		shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
@@ -267,4 +296,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-De5_bPJ_.mjs.map
+//# sourceMappingURL=Modal-B6X5AgWj.mjs.map

package/dist/{Modal-De5_bPJ_.mjs.map → Modal-B6X5AgWj.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Modal-De5_bPJ_.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 from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from '#src/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  @keyframes overlayShow {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  background-color: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: ${({ $insetRight }) => $insetRight};\n  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-fill-mode: both;\n  ${({ $hostPending }) =>\n    $hostPending &&\n    `\n    animation-play-state: paused;\n  `}\n  @media (prefers-reduced-motion: reduce) {\n    animation-duration: 0ms;\n    animation-delay: 0ms;\n    animation-play-state: running;\n  }\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n  z-index: 10001;\n  outline: none;\n  width: fit-content;\n  max-width: 100%;\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n`;\n\n/**\n * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n */\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n  function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n    useEmbeddedSurface(surfaceId);\n    return <StyledModal ref={ref}>{children}</StyledModal>;\n  },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n  $insetRight: string;\n  $transitionMs: number;\n  surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  const isOpen = state?.isOpen ?? false;\n  const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n  const { $insetRight, $transitionMs, ...overlayProps } = props;\n  return (\n    <StyledModalOverlay\n      {...overlayProps}\n      $insetRight={$insetRight}\n      $transitionMs={$transitionMs}\n      $animationDelayMs={animationDelayMs}\n      $hostPending={isOpen && !ready}\n    />\n  );\n};\n\nconst ModalCloseButton = styled(Button)`\n  display: inline-flex;\n  padding: ${Spacing[2]};\n  border-radius: ${Spacing[1]};\n  width: fit-content;\n  min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n  justify: 'flex-end',\n  align: 'center',\n  spacing: Spacing[2],\n})`\n  padding: ${Spacing[3]} ${Spacing[4]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n  flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = ({ 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-B6X5AgWj.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  animation: ${modalRise} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\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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"}

package/dist/{Modal-CujB7DuB.d.mts → Modal-BPfFyzkw.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";
 
@@ -149,4 +149,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-BPfFyzkw.d.mts.map

package/dist/Modal.d.mts

@@ -1,2 +1,2 @@
-import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "./Modal-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-BPfFyzkw.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-7_Hf6rHl.mjs → PageHeader-bhQTjuZF.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-CMf3Uvow.mjs";
+import { t as Breadcrumbs } from "./Breadcrumbs-DpsNZWF9.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-7_Hf6rHl.mjs.map
+//# sourceMappingURL=PageHeader-bhQTjuZF.mjs.map

package/dist/{PageHeader-7_Hf6rHl.mjs.map → PageHeader-bhQTjuZF.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"PageHeader-7_Hf6rHl.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-bhQTjuZF.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-DjtGrvJa.mjs → PageLayout-DgEGcZgB.mjs}

@@ -1,8 +1,8 @@
 import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { n as Stack } from "./Stack-Bzom2BTR.mjs";
-import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "./Grid-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`
@@ -129,4 +129,4 @@ const SplitColumnLayout = ({ main, aside, ...chrome }) => /* @__PURE__ */ jsx(Pa
 //#endregion
 export { Section as a, Container as i, SingleColumnLayout as n, Backdrop as r, SplitColumnLayout as t };
 
-//# sourceMappingURL=PageLayout-DjtGrvJa.mjs.map
+//# sourceMappingURL=PageLayout-DgEGcZgB.mjs.map