npm - @persona/design-system - Versions diffs - 0.10.14 → 0.10.15 - Mend

@persona/design-system 0.10.14 → 0.10.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (381) hide show

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

	@@ -1 +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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"}
1	+ {"version":3,"file":"Menu-DQPxDJ11.mjs","names":["Card"],"sources":["../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n type ComponentPropsWithoutRef,\n type ComponentPropsWithRef,\n type ComponentType,\n type ElementType,\n type FC,\n forwardRef,\n type ReactNode,\n type Ref,\n type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n css,\n type DefaultTheme,\n type StyledComponent,\n type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport Card from '#src/components/Card';\nimport { withAlpha } from '#src/lib/color';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { type MaybeSemanticTheme, semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { darkTheme, withPdsTheming } from '#src/theme';\nimport type { PersonaTheme } from '#src/theme';\n\ntype MenuTheme = PersonaTheme & MaybeSemanticTheme;\n\nconst legacyDarkTheme = withPdsTheming(darkTheme, 'off');\n\nconst hoverForeground = (theme: MenuTheme, variant: MenuItemProps['variant']) =>\n variant === 'danger'\n ? semanticColor(theme, 'FgDanger2', Color.CoreRed900)\n : semanticColor(theme, 'FgPrimary', theme.color.text.primary);\n\nconst hoverSurface = (theme: MenuTheme, variant: MenuItemProps['variant']) => {\n const tokens = semanticTokens(theme);\n if (variant === 'danger') {\n return tokens\n ? withAlpha(tokens.FeedbackDanger1, tokens.Opacity25)\n : theme.color.variants.danger.highlightLight;\n }\n return tokens ? tokens.SurfaceHover : theme.color.background.secondary;\n};\n\nconst selectedSurface = (theme: MenuTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n : theme.color.background.highlight;\n};\n\nexport const FloatingCard: StyledComponent<\n ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n DefaultTheme\n> = styled(Card)`\n box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n outline: none;\n z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n ({ role, doNotSetRole = false }) => ({\n role: doNotSetRole ? undefined : (role ?? 'menu'),\n }),\n)<{ padding?: Spacing }>`\n list-style: none;\n margin: 0;\n padding: ${({ padding }) => padding \|\| Spacing[2]};\n outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n children: ReactNode;\n prefixIcon?: ReactNode;\n suffixIcon?: ReactNode;\n disabled?: boolean;\n variant?: 'basic' \| 'danger';\n as?: T;\n stretchLabel?: boolean;\n subtitle?: string;\n focused?: boolean;\n selected?: boolean;\n size?: 'sm' \| 'md';\n}\n\nexport const ListItem = styled.li<\n Pick<MenuItemProps, 'variant' \| 'disabled' \| 'focused' \| 'selected' \| 'size'>\n>`\n ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n display: flex;\n align-items: center;\n padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n border-radius: 4px;\n list-style: none;\n text-decoration: none;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n cursor: pointer;\n ${({ focused, selected, theme, variant }) => {\n if (!focused \|\| selected) {\n return undefined;\n }\n const semantic = semanticTokens(theme) != null;\n return css`\n outline: none;\n color: ${semantic ? hoverForeground(theme, variant) : theme.color.text.primary};\n background-color: ${semantic ? hoverSurface(theme, variant) : theme.color.background.secondary};\n `;\n }}\n\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n ${({ selected, variant }) =>\n !selected &&\n css`\n outline: none;\n color: ${({ theme }) => hoverForeground(theme, variant)};\n background-color: ${({ theme }) => hoverSurface(theme, variant)};\n `}\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: 1px;\n }\n\n ${({ selected, theme }) =>\n selected &&\n css`\n outline: none;\n color: ${semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n background-color: ${selectedSurface(theme)};\n `}\n\n &${isDisabled} {\n color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n cursor: default;\n pointer-events: none;\n }\n\n /* Variant Styling /\n ${({ theme, variant }) =>\n variant === 'danger' &&\n css`\n color: ${semanticColor(theme, 'FgDanger1', theme.color.variants[variant].default)};\n\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n color: ${hoverForeground(theme, variant)};\n background-color: ${hoverSurface(theme, variant)};\n }\n\n &${isDisabled} {\n color: ${semanticColor(theme, 'FgDisabled', theme.color.variants[variant].disabled)};\n }\n `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-right: ${Spacing[2]};\n line-height: 1;\n\n ${({ suffix }) =>\n suffix &&\n css`\n margin-left: ${Spacing[2]};\n `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n line-height: 16px;\n ${({ stretchLabel }) =>\n stretchLabel &&\n css`\n width: 100%;\n `}\n`;\n\n/\n https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n <T extends ElementType = 'div'>(\n props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n {\n children,\n disabled,\n variant,\n prefixIcon,\n suffixIcon,\n stretchLabel,\n selected,\n size,\n ...elemProps\n },\n ref: Ref<HTMLDivElement>,\n) {\n return (\n <ListItem\n disabled={disabled}\n variant={variant}\n selected={selected}\n ref={ref}\n aria-disabled={disabled}\n // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n aria-current={selected ? 'true' : undefined}\n role='menuitem'\n tabIndex={disabled ? -1 : 0}\n size={size}\n {...elemProps}\n >\n {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n </ListItem>\n );\n});\n\nconst StyledMenuDivider = styled.hr`\n height: 0px;\n padding: 0px;\n font-size: 0;\n margin: ${Spacing[2]} -${Spacing[2]};\n border: none;\n border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n <DropdownMenu.Separator asChild>\n <StyledMenuDivider {...props} />\n </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n size?: 'sm' \| 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n ${paragraphMixins.smMono};\n text-transform: uppercase;\n padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n display: block;\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n letter-spacing: 0.15px;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n children?: ReactNode;\n className?: string;\n variant?: 'light' \| 'dark';\n as?: T;\n doNotSetRole?: boolean;\n containerProps?: ComponentPropsWithRef<'div'>;\n listRef?: RefObject<T>;\n itemProps?:\n \| ComponentPropsWithoutRef<'li'>\n \| ((\n props: ComponentPropsWithoutRef<'li'>,\n index: number,\n ) => Partial<ComponentPropsWithRef<'li'>>);\n onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n children,\n variant,\n containerProps,\n itemProps,\n listRef,\n className,\n onClose,\n as,\n ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n const menu = (\n <FloatingCard {...containerProps} className={className}>\n <MenuList {...props} as={as as any} ref={listRef}>\n {children}\n <DismissButton onDismiss={onClose} />\n </MenuList>\n </FloatingCard>\n );\n\n if (variant === 'dark') {\n return <PDSProvider theme={legacyDarkTheme}>{menu}</PDSProvider>;\n }\n\n return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,MAAM,kBAAkB,eAAe,WAAW,MAAM;AAExD,MAAM,mBAAmB,OAAkB,YACzC,YAAY,WACR,cAAc,OAAO,aAAa,MAAM,WAAW,GACnD,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ;AAEjE,MAAM,gBAAgB,OAAkB,YAAsC;CAC5E,MAAM,SAAS,eAAe,MAAM;AACpC,KAAI,YAAY,SACd,QAAO,SACH,UAAU,OAAO,iBAAiB,OAAO,UAAU,GACnD,MAAM,MAAM,SAAS,OAAO;AAElC,QAAO,SAAS,OAAO,eAAe,MAAM,MAAM,WAAW;;AAG/D,MAAM,mBAAmB,UAAqB;CAC5C,MAAM,SAAS,eAAe,MAAM;AACpC,QAAO,SACH,UAAU,OAAO,eAAe,OAAO,UAAU,GACjD,MAAM,MAAM,WAAW;;AAG7B,MAAa,eAGT,OAAOA,aAAK;;;aAGH,UAAU,QAAQ;;AAG/B,MAAa,WAAW,OAAO,IAAI,OAChC,EAAE,MAAM,eAAe,aAAa,EACnC,MAAM,eAAe,KAAA,IAAa,QAAQ,QAC3C,EACF;;;cAGa,EAAE,cAAc,WAAW,QAAQ,GAAG;;;AAkBpD,MAAa,WAAW,OAAO,EAE9B;KACI,EAAE,WAAY,SAAS,OAAO,gBAAgB,KAAK,gBAAgB,GAAI;;;cAG9D,EAAE,WAAY,SAAS,OAAO,GAAG,QAAQ,GAAG,GAAG,QAAQ,OAAO,GAAG,QAAQ,KAAM;;;;YAIjF,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ,CAAC;;KAEjF,EAAE,SAAS,UAAU,OAAO,cAAc;AAC3C,KAAI,CAAC,WAAW,SACd;CAEF,MAAM,WAAW,eAAe,MAAM,IAAI;AAC1C,QAAO,GAAG;;eAEC,WAAW,gBAAgB,OAAO,QAAQ,GAAG,MAAM,MAAM,KAAK,QAAQ;0BAC3D,WAAW,aAAa,OAAO,QAAQ,GAAG,MAAM,MAAM,WAAW,UAAU;;EAEjG;;KAEC,gBAAgB,UAAU,KAAK,gBAAgB,UAAU;OACvD,EAAE,UAAU,cACb,CAAC,YACD,GAAG;;kBAES,EAAE,YAAY,gBAAgB,OAAO,QAAQ,CAAC;6BACnC,EAAE,YAAY,aAAa,OAAO,QAAQ,CAAC;QAChE;;;;0BAIkB,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,YAAY,CAAC;;;;KAI1F,EAAE,UAAU,YACb,YACA,GAAG;;eAEQ,cAAc,OAAO,YAAY,MAAM,MAAM,KAAK,MAAM,CAAC;0BAC9C,gBAAgB,MAAM,CAAC;MAC3C;;KAED,WAAW;cACF,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;;;;;;KAMrF,EAAE,OAAO,cACV,YAAY,YACZ,GAAG;eACQ,cAAc,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,QAAQ,CAAC;;SAE/E,gBAAgB,UAAU,KAAK,gBAAgB,UAAU;iBACjD,gBAAgB,OAAO,QAAQ,CAAC;4BACrB,aAAa,OAAO,QAAQ,CAAC;;;SAGhD,WAAW;iBACH,cAAc,OAAO,cAAc,MAAM,MAAM,SAAS,SAAS,SAAS,CAAC;;MAEtF;;AAGN,MAAa,gBAAgB,OAAO,MAAM;;;;kBAIxB,QAAQ,GAAG;;;KAGxB,EAAE,aACH,UACA,GAAG;qBACc,QAAQ,GAAG;MAC1B;;AAGN,MAAM,iBAAiB,OAAO,MAAM;;KAE/B,EAAE,mBACH,gBACA,GAAG;;MAED;;AAcN,MAAa,WAAyB,WAAW,SAAS,SACxD,EACE,UACA,UACA,SACA,YACA,YACA,cACA,UACA,MACA,GAAG,aAEL,KACA;AACA,QACE,qBAAC,UAAD;EACY;EACD;EACC;EACL;EACL,iBAAe;EAEf,gBAAc,WAAW,SAAS,KAAA;EAClC,MAAK;EACL,UAAU,WAAW,KAAK;EACpB;EACN,GAAI;YAXN;GAaG,cAAc,oBAAC,eAAD,EAAA,UAAgB,YAA2B,CAAA;GAC1D,oBAAC,gBAAD;IAAgB,cAAc,CAAC,CAAC;IAAe;IAA0B,CAAA;GACxE,cAAc,oBAAC,eAAD;IAAe,QAAA;cAAQ;IAA2B,CAAA;GACxD;;EAEb;AAEF,MAAM,oBAAoB,OAAO,EAAE;;;;YAIvB,QAAQ,GAAG,IAAI,QAAQ,GAAG;;2BAEX,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;AAG3G,MAAa,eAAe,UAC1B,oBAAC,aAAa,WAAd;CAAwB,SAAA;WACtB,oBAAC,mBAAD,EAAmB,GAAI,OAAS,CAAA;CACT,CAAA;AAO3B,MAAa,cAAc,OAAO,EAAoB;IAClD,gBAAgB,OAAO;;cAEb,EAAE,WAAY,SAAS,OAAO,GAAG,QAAQ,GAAG,GAAG,QAAQ,OAAO,QAAQ,GAAI;;YAE5E,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,MAAM,KAAK,UAAU,CAAC;;;AAqB1F,MAAa,QAAuC,EAClD,UACA,SACA,gBACA,WACA,SACA,WACA,SACA,IACA,GAAG,YAC6C;CAChD,MAAM,OACJ,oBAAC,cAAD;EAAc,GAAI;EAA2B;YAC3C,qBAAC,UAAD;GAAU,GAAI;GAAW;GAAW,KAAK;aAAzC,CACG,UACD,oBAAC,eAAD,EAAe,WAAW,SAAW,CAAA,CAC5B;;EACE,CAAA;AAGjB,KAAI,YAAY,OACd,QAAO,oBAAC,aAAD;EAAa,OAAO;YAAkB;EAAmB,CAAA;AAGlE,QAAO;;AAGT,KAAK,UAAU;AACf,KAAK,UAAU;AACf,KAAK,OAAO"}

package/dist/Menu.d.mts CHANGED Viewed

@@ -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-DvzoR8e7.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-DNJMfxfw.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

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

@@ -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} RENAMED Viewed

	@@ -1 +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":";;;;;AAEA,MAAM,WAAW;AACjB,MAAM,eAAe,GAAG,WAAW,SAAS,WAAW,GAAG,WAAW,eAAe,SAAS,GAAG,WAAW,SAAS;AACpH,MAAM,2BAA2B;AAEjC,SAAS,0BAA2D;CAElE,MAAM,SAAS,SAAS,cAAc,SAAS;CAC/C,MAAM,gBAAgB;AACpB,SAAO,QAAQ;AACf,SAAO,SAAS;AAChB,SAAO,QAAQ;;AAGjB,QAAO,CAAC,QAAQ,QAAQ;;AAG1B,SAAgB,yBAAyB,MAAc,aAA6B;AAClF,KAAI,eAAe,KAAK,OACtB,QAAO;AAGT,KAAI,eAAe,EACjB,QAAO,SAAS,MAAM,GAAG,KAAK,IAAI,aAAa,EAAE,CAAC;CAGpD,MAAM,eAAe,cAAc;CACnC,MAAM,QAAQ,KAAK,KAAK,eAAe,EAAE;CACzC,MAAM,OAAO,KAAK,MAAM,eAAe,EAAE;AAEzC,QAAO,KAAK,MAAM,GAAG,MAAM,GAAG,WAAW,KAAK,MAAM,KAAK,SAAS,KAAK;;AAGzE,SAAgB,kBAAkB,aAAqB,UAA2B;AAChF,QAAO,gBAAgB;;AAGzB,SAAgB,gBAAgB,UAA0C;AACxE,KAAI,OAAO,aAAa,SACtB,QAAO;AAGT,KAAI,SAAS,SAAS,KAAK,EAAE;EAC3B,MAAM,SAAS,OAAO,WAAW,SAAS;AAC1C,SAAO,OAAO,MAAM,OAAO,GAAG,OAAO;;AAGvC,QAAO;;AAGT,SAAgB,iBAAiB,MAAc,OAAO,cAAsB;CAC1E,MAAM,CAAC,QAAQ,iBAAiB,yBAAyB;AAEzD,KAAI;EACF,MAAM,UAAU,OAAO,WAAW,KAAK;AAEvC,MAAI,CAAC,QACH,QAAO,KAAK,SAAS;AAGvB,UAAQ,OAAO;EACf,MAAM,gBAAgB,QAAQ,YAAY,KAAK,CAAC;EAChD,MAAM,yBAAyB,KAAK,SAAS;AAE7C,MAAI,kBAAkB,KAAK,gBAAgB,uBACzC,QAAO,KAAK,SAAS;AAGvB,SAAO;WACC;AACR,iBAAe;;;AAInB,SAAgB,gCACd,MACA,YACA,OAAO,cACC;CACR,MAAM,YAAY,aAAa;AAE/B,KAAI,iBAAiB,MAAM,KAAK,IAAI,UAClC,QAAO;CAGT,IAAI,MAAM;CACV,IAAI,OAAO,KAAK;CAChB,IAAI,cAAc,yBAAyB,MAAM,EAAgB;AAEjE,QAAO,OAAO,MAAM;EAClB,MAAM,MAAM,KAAK,OAAO,MAAM,QAAQ,EAAE;EACxC,MAAM,YAAY,yBAAyB,MAAM,IAAI;AAErD,MAAI,iBAAiB,WAAW,KAAK,IAAI,WAAW;AAClD,iBAAc;AACd,SAAM,MAAM;QAEZ,QAAO,MAAM;;AAIjB,QAAO;;AAGT,SAAgB,mCACd,SACA,MACA,YACA,MAC8C;CAC9C,MAAM,gBAAgB,QAAQ,cAAc,IAAI,QAAQ,cAAc;CACtE,MAAM,iBAAiB,cAAc,gBAAgB,QAAQ,MAAM,SAAS;CAC5E,MAAM,cACJ,iBAAiB,QAAQ,kBAAkB,OACvC,KAAK,IAAI,eAAe,eAAe,GACtC,iBAAiB;AAExB,KAAI,eAAe,QAAQ,cAAc,GAAG;EAC1C,MAAM,cAAc,gCAAgC,MAAM,aAAa,KAAK;AAC5E,SAAO;GAAE;GAAa,aAAa,YAAY;GAAQ;;AAGzD,SAAQ,cAAc;AACtB,KAAI,QAAQ,eAAe,QAAQ,YACjC,QAAO;EAAE,aAAa;EAAM,aAAa,KAAK;EAAQ;CAGxD,IAAI,MAAM;CACV,IAAI,OAAO,KAAK;CAChB,IAAI,kBAAkB;CACtB,IAAI,cAAc,yBAAyB,MAAM,EAAgB;AAEjE,QAAO,OAAO,MAAM;EAClB,MAAM,MAAM,KAAK,OAAO,MAAM,QAAQ,EAAE;EACxC,MAAM,YAAY,yBAAyB,MAAM,IAAI;AACrD,UAAQ,cAAc;AAEtB,MAAI,QAAQ,eAAe,QAAQ,aAAa;AAC9C,qBAAkB;AAClB,iBAAc;AACd,SAAM,MAAM;QAEZ,QAAO,MAAM;;AAIjB,QAAO;EAAE,aAAa;EAAa,aAAa;EAAiB;;;;ACnInE,MAAM,iBAAiB,OAAO,IAAI;;;;;;;AAQlC,MAAM,iBAAiB,OAAO,IAAI;;;;AAKlC,MAAM,sBAAsB,OAAO,IAAI;;;;;;;;AAiBvC,MAAa,uBAAqD,EAChE,OACA,WAAW,QACX,MACA,gBAAgB,eAChB,mBACA,cAAc,WACd,OACA,GAAG,YACC;CACJ,MAAM,MAAM,OAAwB,KAAK;CACzC,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,aAAa,gBAAgB,SAAS;CAE5C,MAAM,mBAAmB,aACtB,YAAyB;EACxB,MAAM,EAAE,aAAa,oBAAoB,mCACvC,SACA,OACA,YACA,KACD;AACD,kBAAgB,YAAa,YAAY,kBAAkB,UAAU,gBAAiB;AACtF,sBAAoB,kBAAkB,iBAAiB,MAAM,CAAC;IAEhE;EAAC;EAAO;EAAY;EAAM;EAAkB,CAC7C;AAED,uBAAsB;EACpB,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QACH;AAGF,mBAAiB,QAAQ;EAEzB,IAAI,YAAY;AACX,WAAS,OAAO,MAAM,WAAW;AACpC,OAAI,CAAC,UACH,kBAAiB,QAAQ;IAE3B;EAEF,MAAM,iBACJ,OAAO,mBAAmB,cACtB,OACA,IAAI,qBAAqB,iBAAiB,QAAQ,CAAC;AACzD,kBAAgB,QAAQ,QAAQ;AAEhC,eAAa;AACX,eAAY;AACZ,mBAAgB,YAAY;;IAE7B,CAAC,UAAU,iBAAiB,CAAC;CAEhC,MAAM,cAAc,kBAAkB,aAAa,MAAM;AAEzD,QACE,oBAAC,gBAAD;EACE,OAAO;GAAE,GAAG;GAAO;GAAU;EAC7B,cAAY,cAAc,cAAc,QAAQ,KAAA;EAChD,OACE,kBAAkB,YAAY,kBAAkB,YAAY,eAAe,QAAQ,KAAA;EAErF,GAAI;EAGC;YAEJ,cACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EAAA,UAAiB,OAAuB,CAAA,EACxC,oBAAC,qBAAD;GAAqB,eAAY;aAAQ;GAAkC,CAAA,CAC1E,EAAA,CAAA,GAEH;EAEa,CAAA"}
1	+ {"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-IVXc4p8Y.d.mts → Modal-7ZHanMzZ.d.mts} RENAMED Viewed

@@ -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";
@@ -154,4 +154,4 @@ declare const _default: (({
 };
 //#endregion
 export { ModalTitleProps as a, ModalRenderProps as i, ModalContent as n, ModalTrigger as o, ModalProps as r, _default as s, ModalClose as t };
-//# sourceMappingURL=Modal-IVXc4p8Y.d.mts.map
+//# sourceMappingURL=Modal-7ZHanMzZ.d.mts.map

package/dist/{Modal-C_vSgqgl.mjs → Modal-bsjGJxTM.mjs} RENAMED Viewed

@@ -1,17 +1,17 @@
 import { a as styled, i as keyframes } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
+import { ReducedMotionFade } from "./variables/transitions.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { l as usePDSStrings } from "./i18n-DaOKaFc2.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
 import { n as Heading$1 } from "./Text-D0vEReED.mjs";
-import { ReducedMotionFade } from "./variables/transitions.mjs";
 import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "./lib/useEmbeddedSurface.mjs";
 import useModalInsetRight, { SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, SIDEBAR_TRANSITION_EASING } from "./lib/useModalInsetRight.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack, t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button$1 } from "./IconButton-Bj1fry_K.mjs";
-import { i as TabBar, r as Tab } from "./TabBar-d4sdknti.mjs";
-import { forwardRef, useContext, useEffect, useState } from "react";
+import { n as Button$1 } from "./IconButton-kSjnfhWt.mjs";
+import { i as TabBar, r as Tab } from "./TabBar-B7U2uVD3.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
+import { forwardRef, useContext, useEffect, useState } from "react";
 import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
@@ -300,4 +300,4 @@ var Modal_default = Object.assign(Modal$1, { Title: ModalTitle });
 //#endregion
 export { Modal_default as i, ModalContent as n, ModalTrigger as r, ModalClose as t };
-//# sourceMappingURL=Modal-C_vSgqgl.mjs.map
+//# sourceMappingURL=Modal-bsjGJxTM.mjs.map

package/dist/{Modal-C_vSgqgl.mjs.map → Modal-bsjGJxTM.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal-C_vSgqgl.mjs","names":["AriaModal","Button","Heading","AriaHeading","Card","Modal"],"sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n forwardRef,\n type ComponentProps,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ReactNode,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport {\n Dialog,\n DialogTrigger,\n Heading as AriaHeading,\n Modal as AriaModal,\n ModalOverlay,\n type ModalOverlayProps,\n OverlayTriggerStateContext,\n Pressable,\n} from 'react-aria-components';\nimport { useOverlayTriggerState } from 'react-stately';\nimport styled, { keyframes } from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useEmbeddedSurface, {\n useEmbeddedSurfaceGate,\n useEmbeddedSurfaceId,\n} from '#src/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n SIDEBAR_CLOSE_TRANSITION_MS,\n SIDEBAR_OPEN_TRANSITION_MS,\n SIDEBAR_TRANSITION_EASING,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport {\n ReducedMotionFade,\n TransitionDuration,\n TransitionEasing,\n} from '#src/variables/transitions';\n\nconst overlayEnter = keyframes`\n from {\n opacity: 0;\n }\n`;\n\nconst overlayExit = keyframes`\n to {\n opacity: 0;\n }\n`;\n\nconst modalRise = keyframes`\n from {\n transform: translateY(${Spacing[2]});\n }\n`;\n\n// The card's rise reads the overlay's embedded-surface gate through these inherited properties, so\n// the two start on the same frame. The exit is layered over the entrance rather than replacing it, so\n// it fades from wherever the entrance had got to; the entrance runs on so a pending gate can't hold\n// the exit open.\nconst StyledModalOverlay = styled(ModalOverlay)<{\n $hostPending: boolean;\n $animationDelayMs: number;\n $insetRight: string;\n $transitionMs: number;\n}>`\n --pds-modal-animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n --pds-modal-animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: ${({ $insetRight }) => $insetRight};\n transition: right ${({ $transitionMs }) => $transitionMs}ms ${SIDEBAR_TRANSITION_EASING};\n animation: ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\n animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\n\n &[data-exiting] {\n animation:\n ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both,\n ${overlayExit} ${TransitionDuration.Faster} ${TransitionEasing.Exit} both;\n animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms, 0ms;\n animation-play-state: running;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &,\n &[data-exiting] {\n animation-duration: ${ReducedMotionFade.duration};\n animation-timing-function: ${ReducedMotionFade.easing};\n }\n }\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n z-index: 10001;\n outline: none;\n width: fit-content;\n max-width: 100%;\n /* No forwards fill: a held transform makes the card the containing block for portaled menus. /\n animation: ${modalRise} ${TransitionDuration.Fast} ${TransitionEasing.Enter} backwards;\n animation-delay: var(--pds-modal-animation-delay, 0ms);\n animation-play-state: var(--pds-modal-animation-play-state, running);\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n\n &[data-exiting] {\n animation: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n`;\n\n/\n React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n /\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n useEmbeddedSurface(surfaceId);\n return <StyledModal ref={ref}>{children}</StyledModal>;\n },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n $insetRight: string;\n $transitionMs: number;\n surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n const state = useContext(OverlayTriggerStateContext);\n const isOpen = state?.isOpen ?? false;\n const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n const { $insetRight, $transitionMs, ...overlayProps } = props;\n return (\n <StyledModalOverlay\n {...overlayProps}\n $insetRight={$insetRight}\n $transitionMs={$transitionMs}\n $animationDelayMs={animationDelayMs}\n $hostPending={isOpen && !ready}\n />\n );\n};\n\nconst ModalCloseButton = styled(Button)`\n display: inline-flex;\n padding: ${Spacing[2]};\n border-radius: ${Spacing[1]};\n width: fit-content;\n min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n justify: 'flex-end',\n align: 'center',\n spacing: Spacing[2],\n})`\n padding: ${Spacing[3]} ${Spacing[4]};\n border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = ({ onClick, ...props }: ButtonProps) => {\n const state = useContext(OverlayTriggerStateContext);\n return (\n <ModalCloseButton\n variant='text'\n width='icon'\n size='md'\n {...props}\n onClick={(event: MouseEvent<HTMLButtonElement>) => {\n // Return the consumer's result so Button can await a returned Promise (pending state,\n // swallowed rejection). The modal still closes immediately, as it did before.\n const result = onClick?.(event);\n if (!event.defaultPrevented) {\n state?.close();\n }\n return result;\n }}\n >\n <XIcon />\n </ModalCloseButton>\n );\n};\n\nexport interface ModalTitleProps {\n children: ReactNode;\n className?: string;\n}\n\n/* Props passed to modal content render functions. /\nexport interface ModalRenderProps {\n /* Element that floating content should use as its portal container. /\n portalContainer: HTMLDivElement \| null;\n}\n\ntype ModalRenderable = ReactNode \| ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n return (\n <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n {children}\n </Heading>\n );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n border-bottom: ${({ $hasTabs, theme }) =>\n $hasTabs ? 'none' : `1px solid ${semanticColor(theme, 'BorderSubtle', Color.BorderDivider)}`};\n padding: ${({ $hasTabs }) =>\n $hasTabs\n ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full' }>`\n position: relative;\n width: ${({ $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return '90vw';\n }\n }};\n max-width: ${({ theme, $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return theme.modal.width[$size];\n }\n }};\n / TODO: Use breakpoints to make this responsive /\n max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n ${({ $size }) =>\n $size === 'full' &&\n `\n height: calc(100vh - 160px);\n `}\n margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n /\n Display X button to close popover\n /\n showCloseButton?: boolean;\n\n /\n Accessible label for the built-in close button. Defaults to the PDS closeModal string (\"Close\").\n /\n closeButtonLabel?: string;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer content\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n * Tab contents can be render functions that receive the modal portal container.\n /\n tabs?: TabView[];\n\n /\n Title of the modal\n /\n title?: ReactNode;\n\n /\n Children content\n /\n children?: ReactNode;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n /\n noBodyPadding?: boolean;\n\n /\n Additional props for the Dialog element\n /\n className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n portalContainer: HTMLDivElement \| null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n $noPadding?: boolean;\n $hidden?: boolean;\n}>`\n overflow-y: auto;\n ${semanticScrollbar}\n flex: 1;\n min-height: 0;\n ${({ $noPadding }) =>\n $noPadding\n ? 'padding: 0;'\n : `\n padding-left: ${Spacing[4]};\n padding-right: ${Spacing[4]};\n `}\n ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/\n Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n /\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n {\n title,\n children,\n showCloseButton = true,\n closeButtonLabel,\n size,\n footer,\n tabs,\n noBodyPadding = false,\n portalContainer,\n ...props\n },\n ref,\n) {\n const strings = usePDSStrings();\n const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n const tabCount = tabs?.length ?? 0;\n\n useEffect(() => {\n setSelectedTabIdx(0);\n }, [tabCount]);\n\n const titleAndClose = (\n <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n {showCloseButton && <ModalClose aria-label={closeButtonLabel ?? strings.closeModal} />}\n </ModalHeader>\n );\n\n const modalHeader = tabs ? (\n <Stack>\n {titleAndClose}\n <ModalTabBar>\n {tabs.map((tab, idx) => (\n <Tab\n key={tab.name}\n selected={selectedTabIdx === idx}\n id={`pds-modal_tab-${idx}`}\n onClick={() => setSelectedTabIdx(idx)}\n aria-controls={`pds-modal_tab-panel-${idx}`}\n >\n {tab.name}\n </Tab>\n ))}\n </ModalTabBar>\n </Stack>\n ) : (\n titleAndClose\n );\n\n return (\n <StyledDialog {...props} ref={ref}>\n <StyledCard elevated $size={size}>\n {(showCloseButton \|\| title) && modalHeader}\n {tabs ? (\n tabs.map((tab, idx) => (\n <StyledModalCardBody\n key={tab.name}\n $noPadding={noBodyPadding}\n $hidden={selectedTabIdx !== idx}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${tab.name}`}\n aria-labelledby={`pds-modal_tab-${tab.name}`}\n >\n {typeof tab.contents === 'function'\n ? tab.contents({ portalContainer })\n : tab.contents}\n </StyledModalCardBody>\n ))\n ) : (\n <StyledModalCardBody\n $noPadding={noBodyPadding}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${selectedTabIdx}`}\n aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n >\n {children}\n </StyledModalCardBody>\n )}\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </StyledCard>\n </StyledDialog>\n );\n});\n\ninterface TabView {\n name: string;\n contents: ModalRenderable;\n badge?: React.ReactElement;\n disabled?: boolean;\n 'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n /\n Title of the Card\n /\n title?: string;\n\n /\n Component to use as trigger. React Aria trigger props will be merged with this element.\n /\n trigger?: ComponentProps<typeof Pressable>['children'];\n\n /\n Props to apply to Modal.Card within\n /\n contentProps?: ModalCardProps;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer section intended for actions.\n * You can pass in Buttons directly and they will render in a HStack.\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n /\n tabs?: TabView[];\n\n /\n Children content\n /\n children?: ModalRenderable;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n * Can also be set via contentProps.noBodyPadding.\n /\n noBodyPadding?: boolean;\n\n /\n Controls whether the modal is open (controlled)\n /\n open?: boolean;\n\n /\n Default open state (uncontrolled)\n /\n defaultOpen?: boolean;\n\n /\n Handler called when open state changes\n /\n onOpenChange?: (isOpen: boolean) => void;\n\n /\n Whether the modal can be dismissed by clicking outside or pressing escape\n /\n isDismissable?: boolean;\n\n /\n Whether pressing the escape key closes the modal\n /\n isKeyboardDismissDisabled?: boolean;\n\n /\n Element the modal overlay is portaled into. Defaults to `document.body`.\n */\n portalContainer?: HTMLElement \| null;\n}\n\nconst Modal = ({\n children,\n trigger,\n contentProps,\n noBodyPadding = false,\n size = 'md',\n title,\n footer,\n tabs,\n defaultOpen,\n onOpenChange,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n open,\n portalContainer,\n}: ModalProps) => {\n const [modalElement, setModalElement] = useState<HTMLDivElement \| null>(null);\n const overlayState = useOverlayTriggerState({\n isOpen: open,\n defaultOpen,\n onOpenChange,\n });\n const surfaceId = useEmbeddedSurfaceId();\n const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n const transitionMs =\n panelState === 'opening'\n ? SIDEBAR_OPEN_TRANSITION_MS\n : panelState === 'closing'\n ? SIDEBAR_CLOSE_TRANSITION_MS\n : 0;\n\n const content = (\n <ModalCard\n size={size}\n title={title}\n footer={footer}\n tabs={tabs}\n noBodyPadding={noBodyPadding}\n {...contentProps}\n portalContainer={modalElement}\n >\n {typeof children === 'function' ? children({ portalContainer: modalElement }) : children}\n </ModalCard>\n );\n\n // Wrap trigger element to ensure it works with react-aria-components\n const overlay = (\n <EmbeddedSurfaceOverlay\n surfaceId={surfaceId}\n $insetRight={modalInsetRight}\n $transitionMs={transitionMs}\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n UNSTABLE_portalContainer={portalContainer ?? undefined}\n shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n >\n <EmbeddedSurfaceModal ref={setModalElement} surfaceId={surfaceId}>\n {content}\n </EmbeddedSurfaceModal>\n </EmbeddedSurfaceOverlay>\n );\n\n // Without a trigger (controlled modals) DialogTrigger would render a PressResponder with no\n // pressable child, which react-aria warns about, so provide the overlay state directly.\n if (!trigger) {\n return (\n <OverlayTriggerStateContext.Provider value={overlayState}>\n {overlay}\n </OverlayTriggerStateContext.Provider>\n );\n }\n\n return (\n <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n <Pressable>{trigger}</Pressable>\n {overlay}\n </DialogTrigger>\n );\n};\n\nexport default Object.assign(Modal, {\n Title: ModalTitle,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,MAAM,eAAe,SAAS;;;;;AAM9B,MAAM,cAAc,SAAS;;;;;AAM7B,MAAM,YAAY,SAAS;;4BAEC,QAAQ,GAAG;;;AAQvC,MAAM,qBAAqB,OAAO,aAAa;kCAMb,EAAE,wBAAwB,kBAAkB;uCACvC,EAAE,mBAAoB,eAAe,WAAW,UAAW;;;;;;YAMtF,EAAE,kBAAkB,YAAY;uBACrB,EAAE,oBAAoB,cAAc,KAAK,0BAA0B;eAC3E,aAAa,GAAA,QAA2B,GAAA,6BAA0B;sBAC3D,EAAE,wBAAwB,kBAAkB;2BACvC,EAAE,mBAAoB,eAAe,WAAW,UAAW;;;;QAI9E,aAAa,GAAA,QAA2B,GAAA,6BAA0B;QAClE,YAAY,GAAA,QAA6B,GAAA,6BAAyB;wBAClD,EAAE,wBAAwB,kBAAkB;;;;;;;4BAOxC,kBAAkB,SAAS;mCACpB,kBAAkB,OAAO;;;;;;;;AAS5D,MAAM,cAAc,OAAOA,MAAU;;;;;;eAMtB,UAAU,GAAA,QAA2B,GAAA,6BAA0B;;;IAG1E,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;;;;;;;;;;;;;AAgB5D,MAAM,uBAAuB,WAC3B,SAAS,qBAAqB,EAAE,UAAU,aAAa,KAAK;AAC1D,oBAAmB,UAAU;AAC7B,QAAO,oBAAC,aAAD;EAAkB;EAAM;EAAuB,CAAA;EAEzD;AAQD,MAAM,0BAA0B,EAAE,WAAW,GAAG,YAAyC;CAEvF,MAAM,SADQ,WAAW,2BACL,EAAE,UAAU;CAChC,MAAM,EAAE,OAAO,qBAAqB,uBAAuB,WAAW,OAAO;CAE7E,MAAM,EAAE,aAAa,eAAe,GAAG,iBAAiB;AACxD,QACE,oBAAC,oBAAD;EACE,GAAI;EACS;EACE;EACf,mBAAmB;EACnB,cAAc,UAAU,CAAC;EACzB,CAAA;;AAIN,MAAM,mBAAmB,OAAOC,SAAO;;aAE1B,QAAQ,GAAG;mBACL,QAAQ,GAAG;;;;AAK9B,MAAM,cAAc,OAAO,OAAO,CAAC,MAAM;CACvC,SAAS;CACT,OAAO;CACP,SAAS,QAAQ;CAClB,CAAC;aACW,QAAQ,GAAG,GAAG,QAAQ,GAAG;2BACX,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;;AAGnG,MAAM,mBAAmB,OAAO,GAAG;;;AAInC,MAAa,eAAe;AAC5B,MAAa,eAAe;AAE5B,MAAa,cAAc,EAAE,SAAS,GAAG,YAAyB;CAChE,MAAM,QAAQ,WAAW,2BAA2B;AACpD,QACE,oBAAC,kBAAD;EACE,SAAQ;EACR,OAAM;EACN,MAAK;EACL,GAAI;EACJ,UAAU,UAAyC;GAGjD,MAAM,SAAS,UAAU,MAAM;AAC/B,OAAI,CAAC,MAAM,iBACT,QAAO,OAAO;AAEhB,UAAO;;YAGT,oBAAC,OAAD,EAAS,CAAA;EACQ,CAAA;;AAiBvB,MAAM,cAAc,EAAE,UAAU,GAAG,YAA6B;AAC9D,QACE,oBAACC,WAAD;EAAS,MAAK;EAAK,OAAM;EAAU,IAAIC;EAAa,MAAK;EAAQ,GAAI;EAClE;EACO,CAAA;;AAId,MAAM,cAAc,OAAO,OAAO;oBACd,EAAE,UAAU,YAC5B,WAAW,SAAS,aAAa,cAAc,OAAO,gBAAgB,MAAM,cAAc,GAAG;cACnF,EAAE,eACZ,WACI,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,OACrD,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,KAAK;;AAGlE,MAAM,cAAc,OAAO,OAAO;kBAChB,QAAQ,GAAG;;AAG7B,MAAM,eAAe,OAAO,OAAO;;;AAInC,MAAM,aAAa,OAAOC,aAAK;;YAEnB,EAAE,YAAY;AACtB,SAAQ,OAAR;EACE,KAAK,OACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,QACE,QAAO;;EAEX;gBACY,EAAE,OAAO,YAAY;AACjC,SAAQ,OAAR;EACE,KAAK,OACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,QACE,QAAO,MAAM,MAAM,MAAM;;EAE7B;;iBAEa,EAAE,YAAa,UAAU,SAAS,wBAAwB,OAAQ;;;;KAI9E,EAAE,YACH,UAAU,UACV;;IAEA;;;AA0DJ,MAAM,sBAAsB,OAAOA,aAAK,KAAK;;IAKzC,kBAAkB;;;KAGjB,EAAE,iBACH,aACI,gBACA;oBACY,QAAQ,GAAG;qBACV,QAAQ,GAAG;IAC5B;KACC,EAAE,cAAc,WAAW,iBAAiB;;;;;AAMjD,MAAM,YAAY,WAAmD,SAAS,UAC5E,EACE,OACA,UACA,kBAAkB,MAClB,kBACA,MACA,QACA,MACA,gBAAgB,OAChB,iBACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,eAAe;CAC/B,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,EAAE;AAGvD,iBAAgB;AACd,oBAAkB,EAAE;IACnB,CAJc,MAAM,UAAU,EAIpB,CAAC;CAEd,MAAM,gBACJ,qBAAC,aAAD;EAAa,SAAQ;EAAa,OAAM;EAAS,SAAS,QAAQ;EAAI,UAAU,QAAQ,KAAK;YAA7F,CACE,oBAAC,kBAAD,EAAA,UAAmB,QAAQ,oBAAC,YAAD,EAAA,UAAa,OAAmB,CAAA,GAAG,MAAwB,CAAA,EACrF,mBAAmB,oBAAC,YAAD,EAAY,cAAY,oBAAoB,QAAQ,YAAc,CAAA,CAC1E;;CAGhB,MAAM,cAAc,OAClB,qBAAC,OAAD,EAAA,UAAA,CACG,eACD,oBAAC,aAAD,EAAA,UACG,KAAK,KAAK,KAAK,QACd,oBAAC,KAAD;EAEE,UAAU,mBAAmB;EAC7B,IAAI,iBAAiB;EACrB,eAAe,kBAAkB,IAAI;EACrC,iBAAe,uBAAuB;YAErC,IAAI;EACD,EAPC,IAAI,KAOL,CACN,EACU,CAAA,CACR,EAAA,CAAA,GAER;AAGF,QACE,oBAAC,cAAD;EAAc,GAAI;EAAY;YAC5B,qBAAC,YAAD;GAAY,UAAA;GAAS,OAAO;aAA5B;KACI,mBAAmB,UAAU;IAC9B,OACC,KAAK,KAAK,KAAK,QACb,oBAAC,qBAAD;KAEE,YAAY;KACZ,SAAS,mBAAmB;KAC5B,MAAM,OAAO,aAAa,KAAA;KAC1B,IAAI,uBAAuB,IAAI;KAC/B,mBAAiB,iBAAiB,IAAI;eAErC,OAAO,IAAI,aAAa,aACrB,IAAI,SAAS,EAAE,iBAAiB,CAAC,GACjC,IAAI;KACY,EAVf,IAAI,KAUW,CACtB,GAEF,oBAAC,qBAAD;KACE,YAAY;KACZ,MAAM,OAAO,aAAa,KAAA;KAC1B,IAAI,uBAAuB;KAC3B,mBAAiB,iBAAiB;KAEjC;KACmB,CAAA;IAGvB,UAAU,oBAAC,aAAD,EAAA,UAAc,QAAqB,CAAA;IACnC;;EACA,CAAA;EAEjB;AAsFF,MAAMC,WAAS,EACb,UACA,SACA,cACA,gBAAgB,OAChB,OAAO,MACP,OACA,QACA,MACA,aACA,cACA,gBAAgB,OAChB,4BAA4B,OAC5B,MACA,sBACgB;CAChB,MAAM,CAAC,cAAc,mBAAmB,SAAgC,KAAK;CAC7E,MAAM,eAAe,uBAAuB;EAC1C,QAAQ;EACR;EACA;EACD,CAAC;CACF,MAAM,YAAY,sBAAsB;CACxC,MAAM,EAAE,YAAY,iBAAiB,eAAe,oBAAoB;CACxE,MAAM,eACJ,eAAe,YACX,6BACA,eAAe,YACb,8BACA;CAER,MAAM,UACJ,oBAAC,WAAD;EACQ;EACC;EACC;EACF;EACS;EACf,GAAI;EACJ,iBAAiB;YAEhB,OAAO,aAAa,aAAa,SAAS,EAAE,iBAAiB,cAAc,CAAC,GAAG;EACtE,CAAA;CAId,MAAM,UACJ,oBAAC,wBAAD;EACa;EACX,aAAa;EACb,eAAe;EACA;EACY;EAC3B,0BAA0B,mBAAmB,KAAA;EAC7C,+BAA+B,YAAY,CAAC,QAAQ,QAAQ,8BAA8B;YAE1F,oBAAC,sBAAD;GAAsB,KAAK;GAA4B;aACpD;GACoB,CAAA;EACA,CAAA;AAK3B,KAAI,CAAC,QACH,QACE,oBAAC,2BAA2B,UAA5B;EAAqC,OAAO;YACzC;EACmC,CAAA;AAI1C,QACE,qBAAC,eAAD;EAAe,QAAQ;EAAmB;EAA2B;YAArE,CACE,oBAAC,WAAD,EAAA,UAAY,SAAoB,CAAA,EAC/B,QACa;;;AAIpB,IAAA,gBAAe,OAAO,OAAOA,SAAO,EAClC,OAAO,YACR,CAAC"}
1	+ {"version":3,"file":"Modal-bsjGJxTM.mjs","names":["AriaModal","Button","Heading","AriaHeading","Card","Modal"],"sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n forwardRef,\n type ComponentProps,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ReactNode,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport {\n Dialog,\n DialogTrigger,\n Heading as AriaHeading,\n Modal as AriaModal,\n ModalOverlay,\n type ModalOverlayProps,\n OverlayTriggerStateContext,\n Pressable,\n} from 'react-aria-components';\nimport { useOverlayTriggerState } from 'react-stately';\nimport styled, { keyframes } from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\nimport useEmbeddedSurface, {\n useEmbeddedSurfaceGate,\n useEmbeddedSurfaceId,\n} from '#src/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n SIDEBAR_CLOSE_TRANSITION_MS,\n SIDEBAR_OPEN_TRANSITION_MS,\n SIDEBAR_TRANSITION_EASING,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport {\n ReducedMotionFade,\n TransitionDuration,\n TransitionEasing,\n} from '#src/variables/transitions';\n\nconst overlayEnter = keyframes`\n from {\n opacity: 0;\n }\n`;\n\nconst overlayExit = keyframes`\n to {\n opacity: 0;\n }\n`;\n\nconst modalRise = keyframes`\n from {\n transform: translateY(${Spacing[2]});\n }\n`;\n\n// The card's rise reads the overlay's embedded-surface gate through these inherited properties, so\n// the two start on the same frame. The exit is layered over the entrance rather than replacing it, so\n// it fades from wherever the entrance had got to; the entrance runs on so a pending gate can't hold\n// the exit open.\nconst StyledModalOverlay = styled(ModalOverlay)<{\n $hostPending: boolean;\n $animationDelayMs: number;\n $insetRight: string;\n $transitionMs: number;\n}>`\n --pds-modal-animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n --pds-modal-animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: ${({ $insetRight }) => $insetRight};\n transition: right ${({ $transitionMs }) => $transitionMs}ms ${SIDEBAR_TRANSITION_EASING};\n animation: ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\n animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\n\n &[data-exiting] {\n animation:\n ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both,\n ${overlayExit} ${TransitionDuration.Faster} ${TransitionEasing.Exit} both;\n animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms, 0ms;\n animation-play-state: running;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &,\n &[data-exiting] {\n animation-duration: ${ReducedMotionFade.duration};\n animation-timing-function: ${ReducedMotionFade.easing};\n }\n }\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n z-index: 10001;\n outline: none;\n width: fit-content;\n max-width: 100%;\n /* No forwards fill: a held transform makes the card the containing block for portaled menus. /\n animation: ${modalRise} ${TransitionDuration.Fast} ${TransitionEasing.Enter} backwards;\n animation-delay: var(--pds-modal-animation-delay, 0ms);\n animation-play-state: var(--pds-modal-animation-play-state, running);\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n\n &[data-exiting] {\n animation: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n`;\n\n/\n React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n /\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n useEmbeddedSurface(surfaceId);\n return <StyledModal ref={ref}>{children}</StyledModal>;\n },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n $insetRight: string;\n $transitionMs: number;\n surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n const state = useContext(OverlayTriggerStateContext);\n const isOpen = state?.isOpen ?? false;\n const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n const { $insetRight, $transitionMs, ...overlayProps } = props;\n return (\n <StyledModalOverlay\n {...overlayProps}\n $insetRight={$insetRight}\n $transitionMs={$transitionMs}\n $animationDelayMs={animationDelayMs}\n $hostPending={isOpen && !ready}\n />\n );\n};\n\nconst ModalCloseButton = styled(Button)`\n display: inline-flex;\n padding: ${Spacing[2]};\n border-radius: ${Spacing[1]};\n width: fit-content;\n min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n justify: 'flex-end',\n align: 'center',\n spacing: Spacing[2],\n})`\n padding: ${Spacing[3]} ${Spacing[4]};\n border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = ({ onClick, ...props }: ButtonProps) => {\n const state = useContext(OverlayTriggerStateContext);\n return (\n <ModalCloseButton\n variant='text'\n width='icon'\n size='md'\n {...props}\n onClick={(event: MouseEvent<HTMLButtonElement>) => {\n // Return the consumer's result so Button can await a returned Promise (pending state,\n // swallowed rejection). The modal still closes immediately, as it did before.\n const result = onClick?.(event);\n if (!event.defaultPrevented) {\n state?.close();\n }\n return result;\n }}\n >\n <XIcon />\n </ModalCloseButton>\n );\n};\n\nexport interface ModalTitleProps {\n children: ReactNode;\n className?: string;\n}\n\n/* Props passed to modal content render functions. /\nexport interface ModalRenderProps {\n /* Element that floating content should use as its portal container. /\n portalContainer: HTMLDivElement \| null;\n}\n\ntype ModalRenderable = ReactNode \| ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n return (\n <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n {children}\n </Heading>\n );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n border-bottom: ${({ $hasTabs, theme }) =>\n $hasTabs ? 'none' : `1px solid ${semanticColor(theme, 'BorderSubtle', Color.BorderDivider)}`};\n padding: ${({ $hasTabs }) =>\n $hasTabs\n ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full' }>`\n position: relative;\n width: ${({ $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return '90vw';\n }\n }};\n max-width: ${({ theme, $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100vw - 160px)';\n default:\n return theme.modal.width[$size];\n }\n }};\n / TODO: Use breakpoints to make this responsive /\n max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n ${({ $size }) =>\n $size === 'full' &&\n `\n height: calc(100vh - 160px);\n `}\n margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n /\n Display X button to close popover\n /\n showCloseButton?: boolean;\n\n /\n Accessible label for the built-in close button. Defaults to the PDS closeModal string (\"Close\").\n /\n closeButtonLabel?: string;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer content\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n * Tab contents can be render functions that receive the modal portal container.\n /\n tabs?: TabView[];\n\n /\n Title of the modal\n /\n title?: ReactNode;\n\n /\n Children content\n /\n children?: ReactNode;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n /\n noBodyPadding?: boolean;\n\n /\n Additional props for the Dialog element\n /\n className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n portalContainer: HTMLDivElement \| null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n $noPadding?: boolean;\n $hidden?: boolean;\n}>`\n overflow-y: auto;\n ${semanticScrollbar}\n flex: 1;\n min-height: 0;\n ${({ $noPadding }) =>\n $noPadding\n ? 'padding: 0;'\n : `\n padding-left: ${Spacing[4]};\n padding-right: ${Spacing[4]};\n `}\n ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/\n Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n /\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n {\n title,\n children,\n showCloseButton = true,\n closeButtonLabel,\n size,\n footer,\n tabs,\n noBodyPadding = false,\n portalContainer,\n ...props\n },\n ref,\n) {\n const strings = usePDSStrings();\n const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n const tabCount = tabs?.length ?? 0;\n\n useEffect(() => {\n setSelectedTabIdx(0);\n }, [tabCount]);\n\n const titleAndClose = (\n <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n {showCloseButton && <ModalClose aria-label={closeButtonLabel ?? strings.closeModal} />}\n </ModalHeader>\n );\n\n const modalHeader = tabs ? (\n <Stack>\n {titleAndClose}\n <ModalTabBar>\n {tabs.map((tab, idx) => (\n <Tab\n key={tab.name}\n selected={selectedTabIdx === idx}\n id={`pds-modal_tab-${idx}`}\n onClick={() => setSelectedTabIdx(idx)}\n aria-controls={`pds-modal_tab-panel-${idx}`}\n >\n {tab.name}\n </Tab>\n ))}\n </ModalTabBar>\n </Stack>\n ) : (\n titleAndClose\n );\n\n return (\n <StyledDialog {...props} ref={ref}>\n <StyledCard elevated $size={size}>\n {(showCloseButton \|\| title) && modalHeader}\n {tabs ? (\n tabs.map((tab, idx) => (\n <StyledModalCardBody\n key={tab.name}\n $noPadding={noBodyPadding}\n $hidden={selectedTabIdx !== idx}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${tab.name}`}\n aria-labelledby={`pds-modal_tab-${tab.name}`}\n >\n {typeof tab.contents === 'function'\n ? tab.contents({ portalContainer })\n : tab.contents}\n </StyledModalCardBody>\n ))\n ) : (\n <StyledModalCardBody\n $noPadding={noBodyPadding}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${selectedTabIdx}`}\n aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n >\n {children}\n </StyledModalCardBody>\n )}\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </StyledCard>\n </StyledDialog>\n );\n});\n\ninterface TabView {\n name: string;\n contents: ModalRenderable;\n badge?: React.ReactElement;\n disabled?: boolean;\n 'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n /\n Title of the Card\n /\n title?: string;\n\n /\n Component to use as trigger. React Aria trigger props will be merged with this element.\n /\n trigger?: ComponentProps<typeof Pressable>['children'];\n\n /\n Props to apply to Modal.Card within\n /\n contentProps?: ModalCardProps;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer section intended for actions.\n * You can pass in Buttons directly and they will render in a HStack.\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n /\n tabs?: TabView[];\n\n /\n Children content\n /\n children?: ModalRenderable;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n * Can also be set via contentProps.noBodyPadding.\n /\n noBodyPadding?: boolean;\n\n /\n Controls whether the modal is open (controlled)\n /\n open?: boolean;\n\n /\n Default open state (uncontrolled)\n /\n defaultOpen?: boolean;\n\n /\n Handler called when open state changes\n /\n onOpenChange?: (isOpen: boolean) => void;\n\n /\n Whether the modal can be dismissed by clicking outside or pressing escape\n /\n isDismissable?: boolean;\n\n /\n Whether pressing the escape key closes the modal\n /\n isKeyboardDismissDisabled?: boolean;\n\n /\n Element the modal overlay is portaled into. Defaults to `document.body`.\n */\n portalContainer?: HTMLElement \| null;\n}\n\nconst Modal = ({\n children,\n trigger,\n contentProps,\n noBodyPadding = false,\n size = 'md',\n title,\n footer,\n tabs,\n defaultOpen,\n onOpenChange,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n open,\n portalContainer,\n}: ModalProps) => {\n const [modalElement, setModalElement] = useState<HTMLDivElement \| null>(null);\n const overlayState = useOverlayTriggerState({\n isOpen: open,\n defaultOpen,\n onOpenChange,\n });\n const surfaceId = useEmbeddedSurfaceId();\n const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n const transitionMs =\n panelState === 'opening'\n ? SIDEBAR_OPEN_TRANSITION_MS\n : panelState === 'closing'\n ? SIDEBAR_CLOSE_TRANSITION_MS\n : 0;\n\n const content = (\n <ModalCard\n size={size}\n title={title}\n footer={footer}\n tabs={tabs}\n noBodyPadding={noBodyPadding}\n {...contentProps}\n portalContainer={modalElement}\n >\n {typeof children === 'function' ? children({ portalContainer: modalElement }) : children}\n </ModalCard>\n );\n\n // Wrap trigger element to ensure it works with react-aria-components\n const overlay = (\n <EmbeddedSurfaceOverlay\n surfaceId={surfaceId}\n $insetRight={modalInsetRight}\n $transitionMs={transitionMs}\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n UNSTABLE_portalContainer={portalContainer ?? undefined}\n shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n >\n <EmbeddedSurfaceModal ref={setModalElement} surfaceId={surfaceId}>\n {content}\n </EmbeddedSurfaceModal>\n </EmbeddedSurfaceOverlay>\n );\n\n // Without a trigger (controlled modals) DialogTrigger would render a PressResponder with no\n // pressable child, which react-aria warns about, so provide the overlay state directly.\n if (!trigger) {\n return (\n <OverlayTriggerStateContext.Provider value={overlayState}>\n {overlay}\n </OverlayTriggerStateContext.Provider>\n );\n }\n\n return (\n <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n <Pressable>{trigger}</Pressable>\n {overlay}\n </DialogTrigger>\n );\n};\n\nexport default Object.assign(Modal, {\n Title: ModalTitle,\n});\n"],"mappings":"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"}

package/dist/Modal.d.mts CHANGED Viewed

@@ -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-IVXc4p8Y.mjs";
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "./Modal-7ZHanMzZ.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeader-~~6KvtGED-.~~mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { Paragraph } from '#src/components/Text';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\n\nexport const PageHeaderContainer = styled.header`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ${Spacing[3]} ${Spacing[5]};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n box-sizing: border-box;\n min-height: 56px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n flex: 0 1 auto;\n min-width: 0;\n align-items: center;\n h1 {\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n }\n`;\n\nconst LeftContainer = styled.div<{ $hasSubtitle: boolean }>`\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n gap: ${Spacing[2]};\n min-width: 0;\n & > :not(${TitleContainer}):not(p) {\n flex-shrink: 0;\n }\n > p {\n ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n }\n /* Title and subtitle differ in size, so align their baselines rather than their boxes. /\n ${({ $hasSubtitle }) =>\n $hasSubtitle &&\n css`\n > ${TitleContainer}, > p {\n align-self: baseline;\n }\n `}\n`;\n\nconst RightContainer = styled.div`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n margin-left: ${Spacing[3]};\n flex-shrink: 0;\n`;\n\ninterface PageHeaderCommonProps {\n /\n @deprecated Has no effect. Use `title` on index pages and `breadcrumbs` on detail pages.\n /\n level?: 'product' \| 'detail';\n prepend?: ReactNode;\n append?: ReactNode;\n children?: ReactNode;\n}\n\n/* Exactly one heading source is required: either `title` or `breadcrumbs`. /\nexport type PageHeaderProps = PageHeaderCommonProps &\n (\n \| { title: ReactNode; subtitle?: ReactNode; breadcrumbs?: never }\n \| {\n title?: never;\n /\n The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it\n * carried (e.g. an object ID) into the current crumb, with a copy action if useful.\n /\n subtitle?: never;\n /\n Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size.\n * For detail pages: pass the ancestor crumb(s) plus the current page. Pages without\n * ancestors should pass `title` instead of a single crumb.\n */\n breadcrumbs: BreadcrumbsProps;\n }\n );\n\nconst PageHeader = ({\n title,\n breadcrumbs,\n subtitle,\n level: _level,\n prepend,\n append,\n children,\n ...props\n}: PageHeaderProps) => (\n <PageHeaderContainer {...props}>\n <LeftContainer $hasSubtitle={Boolean(subtitle)}>\n {prepend}\n <TitleContainer>\n {breadcrumbs ? (\n <Breadcrumbs size='lg' {...breadcrumbs} />\n ) : (\n <Paragraph as='h1' size='lg' weight='bold' color='primary'>\n {title}\n </Paragraph>\n )}\n </TitleContainer>\n {append}\n {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n </LeftContainer>\n {children && <RightContainer>{children}</RightContainer>}\n </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AASA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;8BAC9E,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;;AAK9G,MAAM,iBAAiB,OAAO,GAAG;;;;;;MAM3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;AAI9D,MAAM,gBAAgB,OAAO,GAA8B;;;;SAIlD,QAAQ,GAAG;;aAEP,eAAe;;;;MAItB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;KAG3D,EAAE,mBACH,gBACA,GAAG;UACG,eAAe;;;MAGnB;;AAGN,MAAM,iBAAiB,OAAO,GAAG;;;SAGxB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AAkC5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,OAAO,QACP,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD;EAAe,cAAc,QAAQ,SAAS;YAA9C;GACG;GACD,oBAAC,gBAAD,EAAA,UACG,cACC,oBAAC,aAAD;IAAa,MAAK;IAAK,GAAI;IAAe,CAAA,GAE1C,oBAAC,WAAD;IAAW,IAAG;IAAK,MAAK;IAAK,QAAO;IAAO,OAAM;cAC9C;IACS,CAAA,EAEC,CAAA;GAChB;GACA,YAAY,oBAAC,WAAD;IAAW,MAAK;cAAM;IAAqB,CAAA;GAC1C;KACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}
1	+ {"version":3,"file":"PageHeader-jvLx6GUu.mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { Paragraph } from '#src/components/Text';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\n\nexport const PageHeaderContainer = styled.header`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ${Spacing[3]} ${Spacing[5]};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n box-sizing: border-box;\n min-height: 56px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n flex: 0 1 auto;\n min-width: 0;\n align-items: center;\n h1 {\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n }\n`;\n\nconst LeftContainer = styled.div<{ $hasSubtitle: boolean }>`\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n gap: ${Spacing[2]};\n min-width: 0;\n & > :not(${TitleContainer}):not(p) {\n flex-shrink: 0;\n }\n > p {\n ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n }\n /* Title and subtitle differ in size, so align their baselines rather than their boxes. /\n ${({ $hasSubtitle }) =>\n $hasSubtitle &&\n css`\n > ${TitleContainer}, > p {\n align-self: baseline;\n }\n `}\n`;\n\nconst RightContainer = styled.div`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n margin-left: ${Spacing[3]};\n flex-shrink: 0;\n`;\n\ninterface PageHeaderCommonProps {\n /\n @deprecated Has no effect. Use `title` on index pages and `breadcrumbs` on detail pages.\n /\n level?: 'product' \| 'detail';\n prepend?: ReactNode;\n append?: ReactNode;\n children?: ReactNode;\n}\n\n/* Exactly one heading source is required: either `title` or `breadcrumbs`. /\nexport type PageHeaderProps = PageHeaderCommonProps &\n (\n \| { title: ReactNode; subtitle?: ReactNode; breadcrumbs?: never }\n \| {\n title?: never;\n /\n The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it\n * carried (e.g. an object ID) into the current crumb, with a copy action if useful.\n /\n subtitle?: never;\n /\n Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size.\n * For detail pages: pass the ancestor crumb(s) plus the current page. Pages without\n * ancestors should pass `title` instead of a single crumb.\n */\n breadcrumbs: BreadcrumbsProps;\n }\n );\n\nconst PageHeader = ({\n title,\n breadcrumbs,\n subtitle,\n level: _level,\n prepend,\n append,\n children,\n ...props\n}: PageHeaderProps) => (\n <PageHeaderContainer {...props}>\n <LeftContainer $hasSubtitle={Boolean(subtitle)}>\n {prepend}\n <TitleContainer>\n {breadcrumbs ? (\n <Breadcrumbs size='lg' {...breadcrumbs} />\n ) : (\n <Paragraph as='h1' size='lg' weight='bold' color='primary'>\n {title}\n </Paragraph>\n )}\n </TitleContainer>\n {append}\n {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n </LeftContainer>\n {children && <RightContainer>{children}</RightContainer>}\n </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AASA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;8BAC9E,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;;AAK9G,MAAM,iBAAiB,OAAO,GAAG;;;;;;MAM3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;AAI9D,MAAM,gBAAgB,OAAO,GAA8B;;;;SAIlD,QAAQ,GAAG;;aAEP,eAAe;;;;MAItB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;KAG3D,EAAE,mBACH,gBACA,GAAG;UACG,eAAe;;;MAGnB;;AAGN,MAAM,iBAAiB,OAAO,GAAG;;;SAGxB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AAkC5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,OAAO,QACP,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD;EAAe,cAAc,QAAQ,SAAS;YAA9C;GACG;GACD,oBAAC,gBAAD,EAAA,UACG,cACC,oBAAC,aAAD;IAAa,MAAK;IAAK,GAAI;IAAe,CAAA,GAE1C,oBAAC,WAAD;IAAW,IAAG;IAAK,MAAK;IAAK,QAAO;IAAO,OAAM;cAC9C;IACS,CAAA,EAEC,CAAA;GAChB;GACA,YAAY,oBAAC,WAAD;IAAW,MAAK;cAAM;IAAqB,CAAA;GAC1C;KACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}

package/dist/PageHeader.d.mts CHANGED Viewed

@@ -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} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/patterns/PageLayout/PageLayout.d.ts
@@ -13,4 +13,4 @@ declare const Container: ({
 declare const Section: _$styled_components0.StyledComponent<"div", any, {}, never>;
 //#endregion
 export { Container as n, Section as r, Backdrop as t };
-//# sourceMappingURL=PageLayout-BdVM37bV.d.mts.map
+//# sourceMappingURL=PageLayout-BXM_pyrU.d.mts.map

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

@@ -1,9 +1,9 @@
 import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
 import { n as Stack } from "./Stack-Bzom2BTR.mjs";
-import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "./Grid-CYpOqTUu.mjs";
-import { useLayoutEffect, useRef, useState } from "react";
+import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "./Grid-DVC0SSEZ.mjs";
 import { Spacing } from "@persona/design-tokens";
+import { useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/PageLayout/PageLayout.tsx
 const Backdrop = styled.div`
@@ -131,4 +131,4 @@ const SplitColumnLayout = ({ main, aside, ...chrome }) => /* @__PURE__ */ jsx(Pa
 //#endregion
 export { Section as a, Container as i, SingleColumnLayout as n, Backdrop as r, SplitColumnLayout as t };
-//# sourceMappingURL=PageLayout-CPiVnS_r.mjs.map
+//# sourceMappingURL=PageLayout-D_NZNEit.mjs.map

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

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

package/dist/PageLayout.d.mts CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-import { n as HStackProps } from "./Stack-CODxfzhl.mjs";
+import { n as HStackProps } from "./Stack-B6MrjJeW.mjs";
 import { t as PaginationParams } from "./types-CRymR_J9.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -33,4 +33,4 @@ declare function PageSelector({
 }: PageSelectorProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { PageInput as n, PageSelector as r, PAGE_LIMIT_BEFORE_SCROLL_MODE as t };
-//# sourceMappingURL=PageSelector-B5CcAzss.d.mts.map
+//# sourceMappingURL=PageSelector-C14ABZVL.d.mts.map

package/dist/PageSelector.d.mts CHANGED Viewed

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination-CqFvnlXc.mjs","names":[],"sources":["../src/components/Pagination/constants.ts","../src/components/Pagination/PageSelector.tsx","../src/components/Pagination/PageSizeSelector.tsx","../src/components/Pagination/Pagination.tsx","../src/components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash-es';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nimport { usePDSStrings } from '#src/lib/i18n';\n\nimport type { PaginationParams } from './types';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations. A collection\n// with exactly this many pages still gets the page input: servers that cap paging\n// at this limit (Kaminari's max_pages) report every page up to it as reachable.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n paginationParams: PaginationParams;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n /*\n Called with the new page number after the page changes (next, prev, or\n * typed input). Lets the consumer react to page changes -- e.g. scroll the\n * page back to the top.\n /\n onPageChange?: (pageNumber: number) => void;\n /\n `total-pages` is only a lower bound: render it as `13+` and keep Next enabled past it. See\n * `Pagination`'s prop of the same name.\n /\n totalIsLowerBound?: boolean;\n}\n\nexport default function PageSelector({\n paginationParams,\n handlePageLinkClick,\n isLoading,\n onPageChange,\n totalIsLowerBound = false,\n}: PageSelectorProps) {\n const strings = usePDSStrings();\n const {\n 'current-page': currentPage,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams ?? {};\n const [selectedPage, setSelectedPage] = useState<number \| undefined>(currentPage);\n // Next stays enabled at the last page the totals know of when more may follow.\n const morePagesMayFollow = lowerBound \|\| totalIsLowerBound;\n // Paged past a minimum page count, how many pages there are is no longer known.\n const totalUnknown = lowerBound \|\| (totalIsLowerBound && currentPage > totalPages);\n\n // We don't use useDebounced to avoid function object reference issues.\n const handlePageLinkClickDebounced = useMemo(\n () => debounce(handlePageLinkClick, 500),\n [handlePageLinkClick],\n );\n\n // Keep input state synced to pagination state when other user action changes\n // pagination state.\n useEffect(() => {\n if (currentPage != null) {\n setSelectedPage(currentPage);\n }\n }, [currentPage]);\n\n if (!paginationParams) {\n return <div />;\n }\n\n return (\n <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n <PageInput>\n {totalPages <= PAGE_LIMIT_BEFORE_SCROLL_MODE && !totalUnknown ? (\n <Input\n aria-label={strings.goToPageNumber}\n size='sm'\n inputSize={2}\n onChange={(e) => {\n const value = e.target.valueAsNumber;\n if (Number.isNaN(value)) {\n setSelectedPage(undefined);\n } else {\n // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n setSelectedPage(value);\n const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n handlePageLinkClickDebounced(boundedValue);\n onPageChange?.(boundedValue);\n }\n }}\n onBlur={(e) => {\n // Fill blank value on blur.\n if (Number.isNaN(e.target.valueAsNumber)) {\n setSelectedPage(currentPage);\n }\n }}\n min={1}\n max={totalPages}\n type='number'\n disabled={isLoading}\n value={selectedPage ?? ''}\n />\n ) : (\n currentPage + ' '\n )}\n {strings.pageCount(\n currentPage,\n totalUnknown\n ? strings.many\n : totalIsLowerBound\n ? strings.atLeast(totalPages)\n : totalPages,\n )}\n </PageInput>\n <Button\n id='pagination__page-selector--left'\n disabled={currentPage === 1 \|\| isLoading}\n onClick={() => {\n if (currentPage !== 1) {\n const prevPageNum = currentPage - 1;\n setSelectedPage(prevPageNum);\n handlePageLinkClick(prevPageNum);\n onPageChange?.(prevPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-left'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label={strings.previousPage}\n >\n {strings.previousShort}\n </Button>\n <Button\n id='pagination__page-selector--right'\n disabled={(currentPage === totalPages && !morePagesMayFollow) \|\| isLoading}\n onClick={() => {\n if (currentPage !== totalPages \|\| morePagesMayFollow) {\n const nextPageNum = currentPage + 1;\n setSelectedPage(nextPageNum);\n handlePageLinkClick(nextPageNum);\n onPageChange?.(nextPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-right'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label={strings.nextPage}\n >\n {strings.next}\n </Button>\n </PageSelectorStack>\n );\n}\n","import styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor } from '#src/lib/semanticColor';\n\nconst Selector = styled('div')`\n padding: ${Spacing[2]};\n display: flex;\n justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: ${Spacing[2]};\n padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n currentPageSize: number;\n pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n padding: 0 ${Spacing[1]};\n color: ${({ theme }) => semanticColor(theme, 'FgAccentStatic', Color.PrimaryPurple)};\n cursor: pointer;\n\n ${({ currentPageSize, pageSizeOption }) => {\n if (currentPageSize === pageSizeOption) {\n return `\n ${Typography.TextMediumBold};\n text-decoration: underline;\n `;\n }\n }};\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\ninterface PageSizeSelectorProps {\n pageSize: number;\n pageSizeOptions: number[];\n handlePageSizeClick: (pageSize: number) => void;\n /\n Element the options menu renders into. Pass a container inside the surrounding dialog when the\n * pager sits in a clipping container, where the menu would otherwise be cut off.\n /\n menuPortalContainer?: HTMLElement \| null;\n}\n\nconst PageSizeSelector = ({\n pageSize,\n pageSizeOptions,\n handlePageSizeClick,\n menuPortalContainer,\n}: PageSizeSelectorProps) => {\n const strings = usePDSStrings();\n // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n const pageSizes = [\n ...pageSizeOptions,\n ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n ].sort((a, b) => a - b);\n\n return (\n <Selector data-test='pagination__page-size-selector'>\n <Label>\n {strings.itemsPerPage}\n <Select\n value={pageSize.toString()}\n onValueChange={(val) => handlePageSizeClick(Number(val))}\n size='sm'\n portal={menuPortalContainer != null}\n portalContainer={menuPortalContainer}\n >\n {pageSizes.map((size) => (\n <Option key={size} value={size.toString()}>\n {size}\n </Option>\n ))}\n </Select>\n </Label>\n </Selector>\n );\n};\n\nexport default PageSizeSelector;\n","import styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor } from '#src/lib/semanticColor';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n ${Typography.TextMedium};\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n display: flex;\n align-items: center;\n\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\ninterface PaginationProps {\n pageSize?: number;\n pageSizeOptions?: number[];\n paginationParams?: PaginationParams;\n handlePageSizeClick: (pageSize: number) => void;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n showPageSizeSelector?: boolean;\n /\n Called with the new page number after the page changes. Lets the consumer\n * react to page changes -- e.g. scroll the page back to the top.\n /\n onPageChange?: (pageNumber: number) => void;\n /\n Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n * the pager sits in a clipping container, where the menu would otherwise be cut off.\n /\n menuPortalContainer?: HTMLElement \| null;\n /\n The totals in `paginationParams` are only a lower bound: there are at least that many items\n * and pages, e.g. when the server counts a bounded number of pages ahead. They render as `650+`\n * and `13+`, any page up to `total-pages` can still be typed in, and Next stays enabled past it.\n * `lower-bound` in `paginationParams`, a total that is not known at all, takes precedence.\n /\n totalIsLowerBound?: boolean;\n}\n\nconst Pagination = ({\n pageSize,\n pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n paginationParams,\n handlePageSizeClick,\n handlePageLinkClick,\n isLoading,\n showPageSizeSelector = true,\n onPageChange,\n menuPortalContainer,\n totalIsLowerBound = false,\n}: PaginationProps) => {\n const strings = usePDSStrings();\n\n if (!paginationParams \|\| !pageSize) {\n return <div />;\n }\n\n const {\n 'current-page': currentPage,\n 'total-count': totalCount,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams;\n\n // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n // items might be limited by max pages, and that the total could change based on page size.\n // To limit user confusion here, we use 'many' instead of a specific number.\n // Paged past the minimum the totals give, how many there are is no longer known: render it like\n // `lower-bound` rather than an item range that ends before it starts.\n const pastKnownTotal = totalIsLowerBound && !lowerBound && currentPage > totalPages;\n const totalUnknown = lowerBound \|\| pastKnownTotal;\n const totalAtLeast = totalIsLowerBound && !totalUnknown;\n const totalCountDisplay =\n totalUnknown \|\| totalPages >= MAX_PAGES\n ? strings.many\n : totalAtLeast\n ? strings.atLeast(totalCount)\n : totalCount;\n\n const lastItemIndex = totalUnknown\n ? currentPage pageSize\n : Math.min(currentPage * pageSize, totalCount);\n const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n return (\n <Container role='navigation' aria-label={strings.pagination}>\n {showPageSizeSelector && (\n <PageSizeSelector\n pageSize={pageSize}\n pageSizeOptions={pageSizeOptions}\n handlePageSizeClick={handlePageSizeClick}\n menuPortalContainer={menuPortalContainer}\n />\n )}\n {totalCount > 0 && (\n <>\n <div>{strings.showingItems(firstItemIndex, lastItemIndex, totalCountDisplay)}</div>\n <PaginationInfo>\n <PageSelector\n paginationParams={paginationParams}\n handlePageLinkClick={handlePageLinkClick}\n isLoading={isLoading}\n onPageChange={onPageChange}\n totalIsLowerBound={totalIsLowerBound && !lowerBound}\n />\n </PaginationInfo>\n </>\n )}\n </Container>\n );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport * from './constants';\nexport default Pagination;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Pagination-CgT2eQrk.mjs","names":[],"sources":["../src/components/Pagination/constants.ts","../src/components/Pagination/PageSelector.tsx","../src/components/Pagination/PageSizeSelector.tsx","../src/components/Pagination/Pagination.tsx","../src/components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash-es';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nimport { usePDSStrings } from '#src/lib/i18n';\n\nimport type { PaginationParams } from './types';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations. A collection\n// with exactly this many pages still gets the page input: servers that cap paging\n// at this limit (Kaminari's max_pages) report every page up to it as reachable.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n paginationParams: PaginationParams;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n /*\n Called with the new page number after the page changes (next, prev, or\n * typed input). Lets the consumer react to page changes -- e.g. scroll the\n * page back to the top.\n /\n onPageChange?: (pageNumber: number) => void;\n /\n `total-pages` is only a lower bound: render it as `13+` and keep Next enabled past it. See\n * `Pagination`'s prop of the same name.\n /\n totalIsLowerBound?: boolean;\n}\n\nexport default function PageSelector({\n paginationParams,\n handlePageLinkClick,\n isLoading,\n onPageChange,\n totalIsLowerBound = false,\n}: PageSelectorProps) {\n const strings = usePDSStrings();\n const {\n 'current-page': currentPage,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams ?? {};\n const [selectedPage, setSelectedPage] = useState<number \| undefined>(currentPage);\n // Next stays enabled at the last page the totals know of when more may follow.\n const morePagesMayFollow = lowerBound \|\| totalIsLowerBound;\n // Paged past a minimum page count, how many pages there are is no longer known.\n const totalUnknown = lowerBound \|\| (totalIsLowerBound && currentPage > totalPages);\n\n // We don't use useDebounced to avoid function object reference issues.\n const handlePageLinkClickDebounced = useMemo(\n () => debounce(handlePageLinkClick, 500),\n [handlePageLinkClick],\n );\n\n // Keep input state synced to pagination state when other user action changes\n // pagination state.\n useEffect(() => {\n if (currentPage != null) {\n setSelectedPage(currentPage);\n }\n }, [currentPage]);\n\n if (!paginationParams) {\n return <div />;\n }\n\n return (\n <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n <PageInput>\n {totalPages <= PAGE_LIMIT_BEFORE_SCROLL_MODE && !totalUnknown ? (\n <Input\n aria-label={strings.goToPageNumber}\n size='sm'\n inputSize={2}\n onChange={(e) => {\n const value = e.target.valueAsNumber;\n if (Number.isNaN(value)) {\n setSelectedPage(undefined);\n } else {\n // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n setSelectedPage(value);\n const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n handlePageLinkClickDebounced(boundedValue);\n onPageChange?.(boundedValue);\n }\n }}\n onBlur={(e) => {\n // Fill blank value on blur.\n if (Number.isNaN(e.target.valueAsNumber)) {\n setSelectedPage(currentPage);\n }\n }}\n min={1}\n max={totalPages}\n type='number'\n disabled={isLoading}\n value={selectedPage ?? ''}\n />\n ) : (\n currentPage + ' '\n )}\n {strings.pageCount(\n currentPage,\n totalUnknown\n ? strings.many\n : totalIsLowerBound\n ? strings.atLeast(totalPages)\n : totalPages,\n )}\n </PageInput>\n <Button\n id='pagination__page-selector--left'\n disabled={currentPage === 1 \|\| isLoading}\n onClick={() => {\n if (currentPage !== 1) {\n const prevPageNum = currentPage - 1;\n setSelectedPage(prevPageNum);\n handlePageLinkClick(prevPageNum);\n onPageChange?.(prevPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-left'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label={strings.previousPage}\n >\n {strings.previousShort}\n </Button>\n <Button\n id='pagination__page-selector--right'\n disabled={(currentPage === totalPages && !morePagesMayFollow) \|\| isLoading}\n onClick={() => {\n if (currentPage !== totalPages \|\| morePagesMayFollow) {\n const nextPageNum = currentPage + 1;\n setSelectedPage(nextPageNum);\n handlePageLinkClick(nextPageNum);\n onPageChange?.(nextPageNum);\n }\n }}\n data-test='pagination__page-selector-paddle-right'\n variant='inverse'\n size='sm'\n width='auto'\n aria-label={strings.nextPage}\n >\n {strings.next}\n </Button>\n </PageSelectorStack>\n );\n}\n","import styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor } from '#src/lib/semanticColor';\n\nconst Selector = styled('div')`\n padding: ${Spacing[2]};\n display: flex;\n justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: ${Spacing[2]};\n padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n currentPageSize: number;\n pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n padding: 0 ${Spacing[1]};\n color: ${({ theme }) => semanticColor(theme, 'FgAccentStatic', Color.PrimaryPurple)};\n cursor: pointer;\n\n ${({ currentPageSize, pageSizeOption }) => {\n if (currentPageSize === pageSizeOption) {\n return `\n ${Typography.TextMediumBold};\n text-decoration: underline;\n `;\n }\n }};\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\ninterface PageSizeSelectorProps {\n pageSize: number;\n pageSizeOptions: number[];\n handlePageSizeClick: (pageSize: number) => void;\n /\n Element the options menu renders into. Pass a container inside the surrounding dialog when the\n * pager sits in a clipping container, where the menu would otherwise be cut off.\n /\n menuPortalContainer?: HTMLElement \| null;\n}\n\nconst PageSizeSelector = ({\n pageSize,\n pageSizeOptions,\n handlePageSizeClick,\n menuPortalContainer,\n}: PageSizeSelectorProps) => {\n const strings = usePDSStrings();\n // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n const pageSizes = [\n ...pageSizeOptions,\n ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n ].sort((a, b) => a - b);\n\n return (\n <Selector data-test='pagination__page-size-selector'>\n <Label>\n {strings.itemsPerPage}\n <Select\n value={pageSize.toString()}\n onValueChange={(val) => handlePageSizeClick(Number(val))}\n size='sm'\n portal={menuPortalContainer != null}\n portalContainer={menuPortalContainer}\n >\n {pageSizes.map((size) => (\n <Option key={size} value={size.toString()}>\n {size}\n </Option>\n ))}\n </Select>\n </Label>\n </Selector>\n );\n};\n\nexport default PageSizeSelector;\n","import styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { usePDSStrings } from '#src/lib/i18n';\nimport { semanticColor } from '#src/lib/semanticColor';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n ${Typography.TextMedium};\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n display: flex;\n align-items: center;\n\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\ninterface PaginationProps {\n pageSize?: number;\n pageSizeOptions?: number[];\n paginationParams?: PaginationParams;\n handlePageSizeClick: (pageSize: number) => void;\n handlePageLinkClick: (pageNumber: number) => void;\n isLoading?: boolean;\n showPageSizeSelector?: boolean;\n /\n Called with the new page number after the page changes. Lets the consumer\n * react to page changes -- e.g. scroll the page back to the top.\n /\n onPageChange?: (pageNumber: number) => void;\n /\n Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n * the pager sits in a clipping container, where the menu would otherwise be cut off.\n /\n menuPortalContainer?: HTMLElement \| null;\n /\n The totals in `paginationParams` are only a lower bound: there are at least that many items\n * and pages, e.g. when the server counts a bounded number of pages ahead. They render as `650+`\n * and `13+`, any page up to `total-pages` can still be typed in, and Next stays enabled past it.\n * `lower-bound` in `paginationParams`, a total that is not known at all, takes precedence.\n /\n totalIsLowerBound?: boolean;\n}\n\nconst Pagination = ({\n pageSize,\n pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n paginationParams,\n handlePageSizeClick,\n handlePageLinkClick,\n isLoading,\n showPageSizeSelector = true,\n onPageChange,\n menuPortalContainer,\n totalIsLowerBound = false,\n}: PaginationProps) => {\n const strings = usePDSStrings();\n\n if (!paginationParams \|\| !pageSize) {\n return <div />;\n }\n\n const {\n 'current-page': currentPage,\n 'total-count': totalCount,\n 'total-pages': totalPages,\n 'lower-bound': lowerBound,\n } = paginationParams;\n\n // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n // items might be limited by max pages, and that the total could change based on page size.\n // To limit user confusion here, we use 'many' instead of a specific number.\n // Paged past the minimum the totals give, how many there are is no longer known: render it like\n // `lower-bound` rather than an item range that ends before it starts.\n const pastKnownTotal = totalIsLowerBound && !lowerBound && currentPage > totalPages;\n const totalUnknown = lowerBound \|\| pastKnownTotal;\n const totalAtLeast = totalIsLowerBound && !totalUnknown;\n const totalCountDisplay =\n totalUnknown \|\| totalPages >= MAX_PAGES\n ? strings.many\n : totalAtLeast\n ? strings.atLeast(totalCount)\n : totalCount;\n\n const lastItemIndex = totalUnknown\n ? currentPage pageSize\n : Math.min(currentPage * pageSize, totalCount);\n const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n return (\n <Container role='navigation' aria-label={strings.pagination}>\n {showPageSizeSelector && (\n <PageSizeSelector\n pageSize={pageSize}\n pageSizeOptions={pageSizeOptions}\n handlePageSizeClick={handlePageSizeClick}\n menuPortalContainer={menuPortalContainer}\n />\n )}\n {totalCount > 0 && (\n <>\n <div>{strings.showingItems(firstItemIndex, lastItemIndex, totalCountDisplay)}</div>\n <PaginationInfo>\n <PageSelector\n paginationParams={paginationParams}\n handlePageLinkClick={handlePageLinkClick}\n isLoading={isLoading}\n onPageChange={onPageChange}\n totalIsLowerBound={totalIsLowerBound && !lowerBound}\n />\n </PaginationInfo>\n </>\n )}\n </Container>\n );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport * from './constants';\nexport default Pagination;\n"],"mappings":"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"}

package/dist/{Pii-BYPkrBuT.mjs → Pii-x1UInvWe.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { n as Sticker } from "./Sticker-4VdGEFAu.mjs";
+import { n as Sticker } from "./Sticker-jfOM4Yi6.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/components/Pii/Pii.tsx
 const Pii = ({ children, isRedacted, hideOnRedacted }) => {
@@ -16,4 +16,4 @@ var Pii_default = Pii;
 //#endregion
 export { Pii_default as t };
-//# sourceMappingURL=Pii-BYPkrBuT.mjs.map
+//# sourceMappingURL=Pii-x1UInvWe.mjs.map