npm - @persona/design-system - Versions diffs - 0.9.0 → 0.10.0 - Mend

@persona/design-system 0.9.0 → 0.10.0

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 (572) hide show

package/dist/{IconButton-Cqxfmrea.mjs.map → IconButton-HWx5Hlmi.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton-Cqxfmrea.mjs","names":["noop"],"sources":["../components/Button/palette.ts","../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import type { Color } from '@persona/design-tokens';\nimport { type PdsColor, transparent, withAlpha } from 'design-system/lib/color';\nimport { semanticTokens } from 'design-system/lib/semanticColor';\nimport type { PersonaTheme } from 'design-system/theme';\nimport type { SemanticTokens } from 'design-system/variables/semantic';\n\nexport type ButtonVariant = 'basic' \| 'primary' \| 'inverse' \| 'danger' \| 'text' \| 'outline';\n\nexport interface ButtonPalette {\n default: PdsColor;\n hover: Color;\n active: Color;\n disabled: PdsColor;\n text: Color;\n textDisabled: PdsColor;\n /** Set only under semantic theming; legacy leaves disabled icon colour to the stroke rules. /\n iconDisabled?: PdsColor;\n highlightDark: Color;\n}\n\nconst buildSemanticPalettes = (tokens: SemanticTokens): Record<ButtonVariant, ButtonPalette> => {\n const neutral = {\n hover: tokens.ActionNeutralHover,\n active: tokens.ActionNeutralActive,\n text: tokens.FgPrimary,\n textDisabled: tokens.FgDisabled,\n iconDisabled: tokens.FgDisabled,\n highlightDark: tokens.FgDisabled,\n };\n return {\n basic: {\n ...neutral,\n default: tokens.ActionNeutral,\n disabled: withAlpha(tokens.ActionNeutral, tokens.Opacity65),\n },\n text: { ...neutral, default: transparent, disabled: transparent },\n outline: {\n ...neutral,\n default: transparent,\n hover: tokens.ActionOutlineHover,\n active: tokens.ActionOutlineActive,\n disabled: transparent,\n },\n primary: {\n default: tokens.ActionPrimary,\n hover: tokens.ActionPrimaryHover,\n active: tokens.ActionPrimaryActive,\n disabled: tokens.ActionPrimary,\n text: tokens.FgInverse,\n textDisabled: tokens.FgInverse,\n iconDisabled: tokens.FgInverse,\n highlightDark: tokens.FgInverse,\n },\n danger: {\n default: tokens.ActionDanger,\n hover: tokens.ActionDangerHover,\n active: tokens.ActionDangerActive,\n disabled: tokens.ActionDanger,\n text: tokens.FgInverse,\n textDisabled: tokens.FgInverse,\n iconDisabled: tokens.FgInverse,\n highlightDark: tokens.FgInverse,\n },\n inverse: {\n default: tokens.ActionInverse,\n hover: tokens.ActionInverseHover,\n active: tokens.ActionInverseActive,\n disabled: withAlpha(tokens.ActionInverse, tokens.Opacity65),\n text: tokens.FgPrimaryStatic,\n textDisabled: withAlpha(tokens.FgPrimaryStatic, tokens.Opacity65),\n iconDisabled: withAlpha(tokens.FgPrimaryStatic, tokens.Opacity65),\n highlightDark: tokens.ActionNeutralActive,\n },\n };\n};\n\nconst semanticPaletteCache = new WeakMap<SemanticTokens, Record<ButtonVariant, ButtonPalette>>();\n\nconst semanticPalettes = (tokens: SemanticTokens): Record<ButtonVariant, ButtonPalette> => {\n let palettes = semanticPaletteCache.get(tokens);\n if (!palettes) {\n palettes = buildSemanticPalettes(tokens);\n semanticPaletteCache.set(tokens, palettes);\n }\n return palettes;\n};\n\nexport const buttonPalette = (theme: PersonaTheme, variant: ButtonVariant): ButtonPalette => {\n const tokens = semanticTokens(theme);\n return tokens ? semanticPalettes(tokens)[variant] : theme.color.variants[variant];\n};\n","import { isEmpty, isFunction } from 'lodash-es';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type HTMLAttributeAnchorTarget,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { opacityOf, withAlpha } from 'design-system/lib/color';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { RouterLink, type To } from 'design-system/lib/router';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport { type ButtonVariant, buttonPalette } from './palette';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n};\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: RouterLink,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant = 'primary' }) => {\n const palette = buttonPalette(theme, variant);\n const tokens = semanticTokens(theme);\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n ${\n tokens &&\n (variant === 'primary' \|\| variant === 'danger') &&\n css`\n opacity: ${opacityOf(tokens.Opacity65)};\n `\n }\n ${\n palette.iconDisabled &&\n css`\n svg {\n color: ${palette.iconDisabled};\n }\n `\n }\n svg path {\n stroke: ${palette.iconDisabled ?? palette.textDisabled};\n }\n\n / For backwards compatibility with current coloring scheme (targeting stroke property) /\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n / Support icons with stroke /\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ theme, variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${semanticColor(theme, 'BorderDefault', theme.color.border.input)};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n / To properly position loading spinner /\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return sizeStyles[size];\n }}\n ${({ width }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return widthStyles[width];\n }}\n\n / Variant styling /\n ${({ theme, variant = 'primary', $isPending, $onSecondaryBackground }) => {\n let palette = buttonPalette(theme, variant);\n\n if (variant === 'basic' && $onSecondaryBackground) {\n const tokens = semanticTokens(theme);\n palette = tokens\n ? {\n ...palette,\n default: tokens.ActionNeutralHover,\n hover: tokens.ActionNeutralActive,\n active: tokens.ActionNeutralActive,\n disabled: withAlpha(tokens.ActionNeutralHover, tokens.Opacity65),\n }\n : {\n ...palette,\n default: Color.CoreSlate300,\n hover: Color.CoreSlate400,\n active: Color.CoreSlate400,\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${buttonPalette(theme, variant).active};\n user-select: none;\n ${semanticOnly(() => 'opacity: 1;')}\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' \| 'sm'; width: 'full' \| 'auto' \| 'button' \| 'icon' }>`\n position: relative;\n\n / Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n /\n\n / Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work /\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n \| ((e: MouseEvent<HTMLButtonElement>) => void)\n \| ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /\n Visual style of the button.\n \n - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n \n @defaultValue 'primary'\n /\n variant?: ButtonVariant;\n /\n Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n /\n isPending?: boolean;\n /\n Icon rendered to the left of the button label.\n * Import from `@persona/icons`.\n /\n prefixIcon?: ReactNode;\n /\n Controls how the prefix icon inherits sizing.\n \n - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n \n @defaultValue 'basic'\n /\n prefixIconType?: 'basic' \| 'inherit';\n\n /\n Icon rendered to the right of the button label.\n * Import from `@persona/icons`.\n /\n suffixIcon?: ReactNode;\n\n /\n Height and typography scale of the button.\n \n @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n\n /\n Changes the button into a link.\n * A relative path renders a router-aware link (PDS `RouterProvider` adapter,\n * react-router when present, otherwise a plain `<a>`); an absolute `https://`\n * URL renders an `<a>` that opens in a new tab.\n /\n to?: To;\n\n /\n Overrides the target of the link if `to` is provided and is an external link.\n /\n target?: HTMLAttributeAnchorTarget;\n\n /\n History state attached to the navigation when `to` is an internal link.\n /\n state?: unknown;\n\n /\n Replaces the current history entry instead of pushing, when `to` is an internal link.\n /\n replace?: boolean;\n\n /\n Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Controls the width of the button.\n \n - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n \n @defaultValue 'full'\n /\n width?: 'full' \| 'auto' \| 'button' \| 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /\n In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n /\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n to,\n target,\n state,\n replace,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending \|\| isResolving;\n const isInternalLink = !isEmpty(to) && !(typeof to === 'string' && to.startsWith('https://'));\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n await maybePromise;\n disable();\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled \|\| loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n to={to}\n target={target}\n {...(isInternalLink ? { state, replace } : {})}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] \|\| ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\nimport { semanticOnly } from 'design-system/lib/semanticColor';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${semanticOnly(\n () => css`\n &:disabled {\n background-color: transparent;\n }\n `,\n )}\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' \| 'prefixIcon' \| 'prefixIconType' \| 'suffixIcon' \| 'variant' \| 'size'\n> {\n /\n `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n /\n size?: IconBtnSize;\n}\n\n/\n Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}
1	+ {"version":3,"file":"IconButton-HWx5Hlmi.mjs","names":["noop"],"sources":["../components/Button/palette.ts","../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import type { Color } from '@persona/design-tokens';\nimport { type PdsColor, transparent, withAlpha } from 'design-system/lib/color';\nimport { semanticTokens } from 'design-system/lib/semanticColor';\nimport type { PersonaTheme } from 'design-system/theme';\nimport type { SemanticTokens } from 'design-system/variables/semantic';\n\nexport type ButtonVariant = 'basic' \| 'primary' \| 'inverse' \| 'danger' \| 'text' \| 'outline';\n\nexport interface ButtonPalette {\n default: PdsColor;\n hover: Color;\n active: Color;\n disabled: PdsColor;\n text: Color;\n textDisabled: PdsColor;\n /** Set only under semantic theming; legacy leaves disabled icon colour to the stroke rules. /\n iconDisabled?: PdsColor;\n highlightDark: Color;\n}\n\nconst buildSemanticPalettes = (tokens: SemanticTokens): Record<ButtonVariant, ButtonPalette> => {\n const neutral = {\n hover: tokens.ActionNeutralHover,\n active: tokens.ActionNeutralActive,\n text: tokens.FgPrimary,\n textDisabled: tokens.FgDisabled,\n iconDisabled: tokens.FgDisabled,\n highlightDark: tokens.FgDisabled,\n };\n return {\n basic: {\n ...neutral,\n default: tokens.ActionNeutral,\n disabled: withAlpha(tokens.ActionNeutral, tokens.Opacity65),\n },\n text: { ...neutral, default: transparent, disabled: transparent },\n outline: {\n ...neutral,\n default: transparent,\n hover: tokens.ActionOutlineHover,\n active: tokens.ActionOutlineActive,\n disabled: transparent,\n },\n primary: {\n default: tokens.ActionPrimary,\n hover: tokens.ActionPrimaryHover,\n active: tokens.ActionPrimaryActive,\n disabled: tokens.ActionPrimary,\n text: tokens.FgInverse,\n textDisabled: tokens.FgInverse,\n iconDisabled: tokens.FgInverse,\n highlightDark: tokens.FgInverse,\n },\n danger: {\n default: tokens.ActionDanger,\n hover: tokens.ActionDangerHover,\n active: tokens.ActionDangerActive,\n disabled: tokens.ActionDanger,\n text: tokens.FgInverse,\n textDisabled: tokens.FgInverse,\n iconDisabled: tokens.FgInverse,\n highlightDark: tokens.FgInverse,\n },\n inverse: {\n default: tokens.ActionInverse,\n hover: tokens.ActionInverseHover,\n active: tokens.ActionInverseActive,\n disabled: withAlpha(tokens.ActionInverse, tokens.Opacity65),\n text: tokens.FgPrimaryStatic,\n textDisabled: withAlpha(tokens.FgPrimaryStatic, tokens.Opacity65),\n iconDisabled: withAlpha(tokens.FgPrimaryStatic, tokens.Opacity65),\n highlightDark: tokens.ActionNeutralActive,\n },\n };\n};\n\nconst semanticPaletteCache = new WeakMap<SemanticTokens, Record<ButtonVariant, ButtonPalette>>();\n\nconst semanticPalettes = (tokens: SemanticTokens): Record<ButtonVariant, ButtonPalette> => {\n let palettes = semanticPaletteCache.get(tokens);\n if (!palettes) {\n palettes = buildSemanticPalettes(tokens);\n semanticPaletteCache.set(tokens, palettes);\n }\n return palettes;\n};\n\nexport const buttonPalette = (theme: PersonaTheme, variant: ButtonVariant): ButtonPalette => {\n const tokens = semanticTokens(theme);\n return tokens ? semanticPalettes(tokens)[variant] : theme.color.variants[variant];\n};\n","import { isEmpty, isFunction } from 'lodash-es';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type HTMLAttributeAnchorTarget,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { opacityOf, withAlpha } from 'design-system/lib/color';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { RouterLink, type To } from 'design-system/lib/router';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport { type ButtonVariant, buttonPalette } from './palette';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 12px;\n width: 12px;\n }\n `,\n};\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: RouterLink,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant = 'primary' }) => {\n const palette = buttonPalette(theme, variant);\n const tokens = semanticTokens(theme);\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n ${\n tokens &&\n (variant === 'primary' \|\| variant === 'danger') &&\n css`\n opacity: ${opacityOf(tokens.Opacity65)};\n `\n }\n ${\n palette.iconDisabled &&\n css`\n svg {\n color: ${palette.iconDisabled};\n }\n `\n }\n svg path {\n stroke: ${palette.iconDisabled ?? palette.textDisabled};\n }\n\n / For backwards compatibility with current coloring scheme (targeting stroke property) /\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n / Support icons with stroke /\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ theme, variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${semanticColor(theme, 'BorderDefault', theme.color.border.input)};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n / To properly position loading spinner /\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return sizeStyles[size];\n }}\n ${({ width }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return widthStyles[width];\n }}\n\n / Variant styling /\n ${({ theme, variant = 'primary', $isPending, $onSecondaryBackground }) => {\n let palette = buttonPalette(theme, variant);\n\n if (variant === 'basic' && $onSecondaryBackground) {\n const tokens = semanticTokens(theme);\n palette = tokens\n ? {\n ...palette,\n default: tokens.ActionNeutralHover,\n hover: tokens.ActionNeutralActive,\n active: tokens.ActionNeutralActive,\n disabled: withAlpha(tokens.ActionNeutralHover, tokens.Opacity65),\n }\n : {\n ...palette,\n default: Color.CoreSlate300,\n hover: Color.CoreSlate400,\n active: Color.CoreSlate400,\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${buttonPalette(theme, variant).active};\n user-select: none;\n ${semanticOnly(() => 'opacity: 1;')}\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' \| 'sm'; width: 'full' \| 'auto' \| 'button' \| 'icon' }>`\n position: relative;\n\n / Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n /\n\n / Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work /\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n \| ((e: MouseEvent<HTMLButtonElement>) => void)\n \| ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /\n Visual style of the button.\n \n - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n \n @defaultValue 'primary'\n /\n variant?: ButtonVariant;\n /\n Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n /\n isPending?: boolean;\n /\n Icon rendered to the left of the button label.\n * Import from `@persona/icons`.\n /\n prefixIcon?: ReactNode;\n /\n Controls how the prefix icon inherits sizing.\n \n - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n \n @defaultValue 'basic'\n /\n prefixIconType?: 'basic' \| 'inherit';\n\n /\n Icon rendered to the right of the button label.\n * Import from `@persona/icons`.\n /\n suffixIcon?: ReactNode;\n\n /\n Height and typography scale of the button.\n \n @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n\n /\n Changes the button into a link.\n * A relative path renders a router-aware link (PDS `RouterProvider` adapter,\n * react-router when present, otherwise a plain `<a>`); an absolute `https://`\n * URL renders an `<a>` that opens in a new tab.\n /\n to?: To;\n\n /\n Overrides the target of the link if `to` is provided and is an external link.\n /\n target?: HTMLAttributeAnchorTarget;\n\n /\n History state attached to the navigation when `to` is an internal link.\n /\n state?: unknown;\n\n /\n Replaces the current history entry instead of pushing, when `to` is an internal link.\n /\n replace?: boolean;\n\n /\n Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Controls the width of the button.\n \n - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n \n @defaultValue 'full'\n /\n width?: 'full' \| 'auto' \| 'button' \| 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /\n In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n /\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n to,\n target,\n state,\n replace,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending \|\| isResolving;\n const isInternalLink = !isEmpty(to) && !(typeof to === 'string' && to.startsWith('https://'));\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n try {\n await maybePromise;\n } catch {\n // A failed action should not leave the button pending.\n } finally {\n disable();\n }\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled \|\| loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n to={to}\n target={target}\n {...(isInternalLink ? { state, replace } : {})}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] \|\| ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\nimport { semanticOnly } from 'design-system/lib/semanticColor';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${semanticOnly(\n () => css`\n &:disabled {\n background-color: transparent;\n }\n `,\n )}\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' \| 'prefixIcon' \| 'prefixIconType' \| 'suffixIcon' \| 'variant' \| 'size'\n> {\n /\n `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n /\n size?: IconBtnSize;\n}\n\n/\n Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/IconButton.d.mts CHANGED Viewed

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

package/dist/ImageTile.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { i as TextAction } from "./Action-DcK0fRrq.mjs";
+import { i as TextAction } from "./Action-DT8WqfEg.mjs";
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -33,8 +33,9 @@ interface ImageTileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children
   /**
    * Metadata rows rendered beneath the thumbnail. Each entry becomes a
    * full-width, left-aligned row in a vertical Stack. Block content fills the
-   * row; inline content (e.g. a Sticker) hugs the left. Region is omitted when
-   * the array is empty or undefined.
+   * row; inline content (e.g. a Sticker) hugs the left. The region is omitted
+   * entirely — including while the image is loading — when the array is empty
+   * or undefined, so the tile is only the image.
    */
   metadata?: ReactNode[];
   /** Optional click handler for the whole tile. When provided, the tile is keyboard-activatable. */

package/dist/IndexTableLayout.d.mts ADDED Viewed

@@ -0,0 +1,45 @@
+import { r as BreadcrumbsProps } from "./Breadcrumbs-C2ThOYJ-.mjs";
+import { i as BaseFilterConfig, s as FilterConfig } from "./types-Dx8PgO8a.mjs";
+import { n as TableControlsProps } from "./TableControls-UfObf-ZN.mjs";
+import { i as DataTableProps } from "./DataTable-fZ7SNbIH.mjs";
+import { r as PageHeaderProps } from "./PageHeader-Czj42pyK.mjs";
+import { UseColumnConfigurationOptions } from "./useColumnConfiguration.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { RowData } from "@tanstack/react-table";
+//#region patterns/IndexTableLayout/IndexTableLayout.d.ts
+type IndexTableLayoutHeaderProps = (Omit<Extract<PageHeaderProps, {
+  breadcrumbs?: never;
+}>, 'title'> & {
+  title?: ReactNode;
+}) | Extract<PageHeaderProps, {
+  breadcrumbs: BreadcrumbsProps;
+}>;
+interface IndexTableLayoutProps<TData extends RowData, TFilter extends BaseFilterConfig = FilterConfig> extends Omit<DataTableProps<TData, TFilter>, 'title' | 'showControls' | 'controls' | 'columns' | 'enableRowSelection' | 'showColumnProperties' | 'onUpdateColumnProperties'>, UseColumnConfigurationOptions<TData> {
+  title: string;
+  tableTitle?: string;
+  headerProps?: IndexTableLayoutHeaderProps;
+  banner?: ReactNode;
+  className?: string;
+  /** Host-built table controls: search, filters/filterResolver/filterPanel, saved-view ControlBar props, tableActions… */
+  controls?: Omit<TableControlsProps<TFilter>, 'columnConfigurationProps'>;
+}
+declare const IndexTableLayout: <TData extends RowData, TFilter extends BaseFilterConfig = FilterConfig>({
+  title,
+  tableTitle,
+  headerProps,
+  banner,
+  className,
+  controls,
+  columnDefinitions,
+  defaultColumns,
+  columnConfiguration,
+  onColumnConfigurationChange,
+  getColumnDisabled,
+  sortByRelevance,
+  ...dataTableProps
+}: IndexTableLayoutProps<TData, TFilter>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { IndexTableLayout, IndexTableLayout as default, IndexTableLayoutHeaderProps, IndexTableLayoutProps };
+//# sourceMappingURL=IndexTableLayout.d.mts.map

package/dist/InlineCombobox.d.mts CHANGED Viewed

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

package/dist/InlineInput.d.mts CHANGED Viewed

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

package/dist/{Input-CAsOWM0S.d.mts → Input-Bg4bi6VZ.d.mts} RENAMED Viewed

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

package/dist/{Input-Cg2HxteL.mjs → Input-Dap055xf.mjs} RENAMED Viewed

@@ -3,8 +3,8 @@ import { semanticColor } from "./lib/semanticColor.mjs";
 import { i as Paragraph } from "./Text-CSwFifQF.mjs";
 import { isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { n as Button } from "./IconButton-Cqxfmrea.mjs";
-import { n as useFormField, t as FormControlContext } from "./useFormField-J0LiPcpm.mjs";
+import { n as Button } from "./IconButton-HWx5Hlmi.mjs";
+import { n as useFormField, t as FormControlContext } from "./useFormField-CbNYbDdp.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -193,4 +193,4 @@ const InputGroup = forwardRef(function InputGroup({ size = "md", leftIcon, onCle
 //#endregion
 export { Input as n, InputGroup as r, ClearButton as t };
-//# sourceMappingURL=Input-Cg2HxteL.mjs.map
+//# sourceMappingURL=Input-Dap055xf.mjs.map

package/dist/{Input-Cg2HxteL.mjs.map → Input-Dap055xf.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input-Cg2HxteL.mjs","names":["SmallCircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactElement,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n display: flex;\n position: relative;\n width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes; $disabled?: boolean }>`\n position: absolute;\n left: ${Spacing[2]};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n color: ${({ theme, $disabled }) =>\n $disabled\n ? semanticColor(theme, 'FgDisabled', Color.BorderIconSecondary)\n : semanticColor(theme, 'FgSecondary', Color.BorderIconSecondary)};\n height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n pointer-events: none;\n\n svg {\n height: 100%;\n width: 100%;\n }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n display: flex;\n gap: ${Spacing[2]};\n right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n border-radius: ${BorderRadius.Md};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.BorderIconSecondary)};\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n color: ${semanticColor(theme, 'FgDisabled', Color.BorderIconDisabled)};\n `}\n\n &${isHovered}${isNotDisabled} {\n background-color: transparent;\n }\n\n svg {\n height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n position: absolute;\n right: ${Spacing[2]};\n top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n $leftIcon?: ReactNode;\n $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n /*\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n `size` HTML attr on `<input>`\n /\n inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n leftIcon?: StyledInputProps['$leftIcon'];\n hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n ${inputMixin};\n line-height: 1;\n\n &::placeholder {\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n }\n\n &:disabled::placeholder {\n color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n }\n\n ${({ $size, $leftIcon, $hasRightItem }) => {\n let btnSpacing: string;\n switch ($size) {\n default:\n case 'md':\n btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n `;\n case 'sm':\n btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n `;\n }\n }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n return (\n <InputBase\n $size={size}\n $leftIcon={leftIcon}\n $hasRightItem={hasRightItem}\n ref={ref}\n id={field.inputId}\n aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n aria-errormessage={field.hasError ? field.errorTextId : undefined}\n aria-invalid={field.hasError}\n hasWarning={field.hasWarning}\n hasError={field.hasError}\n disabled={field.disabled}\n maxLength={field.maxLength}\n {...props}\n size={props.inputSize}\n />\n );\n});\n\nexport interface InputGroupProps\n extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n /\n Input\n /\n children: ReactElement<InputProps>;\n\n /\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n Icon to render to the left of the input field.\n \n Import icon from `@persona/icons`. Use 24px for `lg` input size.\n /\n leftIcon?: ReactNode;\n\n /\n Renders clear button to the right and calls function upon click.\n /\n onClear?: MouseEventHandler<HTMLButtonElement>;\n\n /\n Button to be rendered to the right of the input\n /\n rightButton?: ReactElement<ButtonProps>;\n\n /\n Disabled prop will be passed down to `<Input>`\n /\n disabled?: boolean;\n\n /\n Suffix text to be shown to the right of the input (inside the input field)\n /\n suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n size = 'md',\n leftIcon,\n onClear,\n rightButton,\n children,\n disabled,\n hasWarning,\n hasError,\n suffix,\n ...props\n },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled });\n const inputButtonContainerRef = useRef<HTMLDivElement>();\n const [inputPaddingRight, setInputPaddingRight] = useState<string \| null>(null);\n\n const suffixContainerRef = useRef<HTMLDivElement \| null>(null);\n const [suffixPaddingRight, setSuffixPaddingRight] = useState<string \| null>(null);\n\n useEffect(() => {\n // We only need to calculate padding in presence of the right button\n if (rightButton && inputButtonContainerRef.current) {\n setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n }\n }, [setInputPaddingRight]);\n\n useEffect(() => {\n if (suffix && suffixContainerRef.current) {\n // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n }\n }, [suffix, setSuffixPaddingRight]);\n\n const rightButtonStyles: CSSProperties =\n size === 'sm'\n ? {\n height: '18px',\n }\n : {};\n\n return (\n <FormControlContext.Provider value={field}>\n <Container ref={ref} {...props}>\n {leftIcon && (\n <LeftIcon $size={size} $disabled={field.disabled}>\n {leftIcon}\n </LeftIcon>\n )}\n {cloneElement(children, {\n size,\n leftIcon: leftIcon,\n ...(rightButton ? { rightButton } : {}),\n hasRightItem: onClear \|\| suffix,\n style:\n inputPaddingRight \|\| suffixPaddingRight\n ? {\n paddingRight: inputPaddingRight \|\| suffixPaddingRight,\n }\n : {},\n })}\n\n {/ Renders only if there's a suffix and NO button /}\n {/ At some point, this should be moved so that it's not absolutely positioned, and\n these are both wrapped within an \"input\" container /}\n {suffix && !(onClear \|\| rightButton) && (\n <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n <Paragraph size={size}>{suffix}</Paragraph>\n </SuffixTextContainer>\n )}\n\n {(onClear \|\| rightButton) && ( // TODO: Render only if value is present\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n {onClear && (\n <ClearButton\n onClick={onClear}\n disabled={field.disabled}\n aria-label='Clear'\n size={size}\n >\n {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n </ClearButton>\n )}\n {rightButton &&\n cloneElement(rightButton, {\n size: 'sm',\n width: rightButton.props.width \|\| 'auto',\n style: rightButtonStyles,\n })}\n </InputButtonContainer>\n )}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Input-Dap055xf.mjs","names":["SmallCircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactElement,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n display: flex;\n position: relative;\n width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes; $disabled?: boolean }>`\n position: absolute;\n left: ${Spacing[2]};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n color: ${({ theme, $disabled }) =>\n $disabled\n ? semanticColor(theme, 'FgDisabled', Color.BorderIconSecondary)\n : semanticColor(theme, 'FgSecondary', Color.BorderIconSecondary)};\n height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n pointer-events: none;\n\n svg {\n height: 100%;\n width: 100%;\n }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n display: flex;\n gap: ${Spacing[2]};\n right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n border-radius: ${BorderRadius.Md};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.BorderIconSecondary)};\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n color: ${semanticColor(theme, 'FgDisabled', Color.BorderIconDisabled)};\n `}\n\n &${isHovered}${isNotDisabled} {\n background-color: transparent;\n }\n\n svg {\n height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n position: absolute;\n right: ${Spacing[2]};\n top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n $leftIcon?: ReactNode;\n $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n /*\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n `size` HTML attr on `<input>`\n /\n inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n leftIcon?: StyledInputProps['$leftIcon'];\n hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n ${inputMixin};\n line-height: 1;\n\n &::placeholder {\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n }\n\n &:disabled::placeholder {\n color: ${({ theme }) => semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n }\n\n ${({ $size, $leftIcon, $hasRightItem }) => {\n let btnSpacing: string;\n switch ($size) {\n default:\n case 'md':\n btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n `;\n case 'sm':\n btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n `;\n }\n }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n return (\n <InputBase\n $size={size}\n $leftIcon={leftIcon}\n $hasRightItem={hasRightItem}\n ref={ref}\n id={field.inputId}\n aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n aria-errormessage={field.hasError ? field.errorTextId : undefined}\n aria-invalid={field.hasError}\n hasWarning={field.hasWarning}\n hasError={field.hasError}\n disabled={field.disabled}\n maxLength={field.maxLength}\n {...props}\n size={props.inputSize}\n />\n );\n});\n\nexport interface InputGroupProps\n extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n /\n Input\n /\n children: ReactElement<InputProps>;\n\n /\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n Icon to render to the left of the input field.\n \n Import icon from `@persona/icons`. Use 24px for `lg` input size.\n /\n leftIcon?: ReactNode;\n\n /\n Renders clear button to the right and calls function upon click.\n /\n onClear?: MouseEventHandler<HTMLButtonElement>;\n\n /\n Button to be rendered to the right of the input\n /\n rightButton?: ReactElement<ButtonProps>;\n\n /\n Disabled prop will be passed down to `<Input>`\n /\n disabled?: boolean;\n\n /\n Suffix text to be shown to the right of the input (inside the input field)\n /\n suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n size = 'md',\n leftIcon,\n onClear,\n rightButton,\n children,\n disabled,\n hasWarning,\n hasError,\n suffix,\n ...props\n },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled });\n const inputButtonContainerRef = useRef<HTMLDivElement>();\n const [inputPaddingRight, setInputPaddingRight] = useState<string \| null>(null);\n\n const suffixContainerRef = useRef<HTMLDivElement \| null>(null);\n const [suffixPaddingRight, setSuffixPaddingRight] = useState<string \| null>(null);\n\n useEffect(() => {\n // We only need to calculate padding in presence of the right button\n if (rightButton && inputButtonContainerRef.current) {\n setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n }\n }, [setInputPaddingRight]);\n\n useEffect(() => {\n if (suffix && suffixContainerRef.current) {\n // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n }\n }, [suffix, setSuffixPaddingRight]);\n\n const rightButtonStyles: CSSProperties =\n size === 'sm'\n ? {\n height: '18px',\n }\n : {};\n\n return (\n <FormControlContext.Provider value={field}>\n <Container ref={ref} {...props}>\n {leftIcon && (\n <LeftIcon $size={size} $disabled={field.disabled}>\n {leftIcon}\n </LeftIcon>\n )}\n {cloneElement(children, {\n size,\n leftIcon: leftIcon,\n ...(rightButton ? { rightButton } : {}),\n hasRightItem: onClear \|\| suffix,\n style:\n inputPaddingRight \|\| suffixPaddingRight\n ? {\n paddingRight: inputPaddingRight \|\| suffixPaddingRight,\n }\n : {},\n })}\n\n {/ Renders only if there's a suffix and NO button /}\n {/ At some point, this should be moved so that it's not absolutely positioned, and\n these are both wrapped within an \"input\" container /}\n {suffix && !(onClear \|\| rightButton) && (\n <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n <Paragraph size={size}>{suffix}</Paragraph>\n </SuffixTextContainer>\n )}\n\n {(onClear \|\| rightButton) && ( // TODO: Render only if value is present\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n {onClear && (\n <ClearButton\n onClick={onClear}\n disabled={field.disabled}\n aria-label='Clear'\n size={size}\n >\n {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n </ClearButton>\n )}\n {rightButton &&\n cloneElement(rightButton, {\n size: 'sm',\n width: rightButton.props.width \|\| 'auto',\n style: rightButtonStyles,\n })}\n </InputButtonContainer>\n )}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}

package/dist/Input.d.mts CHANGED Viewed

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

package/dist/{InputProps-BU9iiBBz.d.mts → InputProps-Bl-G826g.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-DMPo8gRT.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-CKhARTlS.mjs";
 //#region types/InputProps.d.ts
 interface InputProps extends Omit<InputMixinProps, '$size'> {
@@ -13,4 +13,4 @@ interface InputProps extends Omit<InputMixinProps, '$size'> {
 }
 //#endregion
 export { InputProps as t };
-//# sourceMappingURL=InputProps-BU9iiBBz.d.mts.map
+//# sourceMappingURL=InputProps-Bl-G826g.d.mts.map

package/dist/InputProps.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as InputProps } from "./InputProps-BU9iiBBz.mjs";
+import { t as InputProps } from "./InputProps-Bl-G826g.mjs";
 export { InputProps };

package/dist/Inserter-BKVrJ4M5.d.mts ADDED Viewed

@@ -0,0 +1,12 @@
+//#region components/DataTable/Inserter.d.ts
+interface InserterProps {
+  priorRowLabel: string;
+  colSpan: number;
+  nestSpacing?: number;
+  label?: string;
+  onAddRow: () => void;
+}
+declare const Inserter: React.FC<InserterProps>;
+//#endregion
+export { Inserter as t };
+//# sourceMappingURL=Inserter-BKVrJ4M5.d.mts.map

package/dist/Inserter.d.mts CHANGED Viewed

@@ -1,12 +1,2 @@
-//#region components/DataTable/Inserter.d.ts
-interface InserterProps {
-  priorRowLabel: string;
-  colSpan: number;
-  nestSpacing?: number;
-  label?: string;
-  onAddRow: () => void;
-}
-declare const Inserter: React.FC<InserterProps>;
-//#endregion
-export { Inserter };
-//# sourceMappingURL=Inserter.d.mts.map
+import { t as Inserter } from "./Inserter-BKVrJ4M5.mjs";
+export { Inserter };

package/dist/IntegerValueControl.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-eemD0jxb.mjs";
+import { t as ValueControlProps } from "./types-BhHdS6QP.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/value-controls/IntegerValueControl/IntegerValueControl.d.ts
@@ -6,10 +6,11 @@ type IntegerValueControlProps = ValueControlProps;
 /**
  * Integer-typed value control for the Filter UI v2 popover.
  *
- * Used for `integer` fields with operators `is` / `is_not`. The popover
+ * Used for `integer` fields with operators `is` / `is_not`, and with the
+ * opt-in comparisons `gt` / `lt` when the field's
+ * `allowedOperators` lists them — all carry a single number. The popover
  * renders nothing when the operator is valueless (`is_empty` /
- * `is_not_empty`). Range operators are not part of the current numeric
- * field vocabulary.
+ * `is_not_empty`). Range operators are not part of the numeric vocabulary.
  *
  * The control accepts any numeric input but always emits an integer via
  * `onChange`. We truncate (rather than round) so that typing `3` -> `3.` -> `3.7`

package/dist/Link.d.mts CHANGED Viewed

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

package/dist/{ListBox--IH6uofo.d.mts → ListBox-Bj5c626-.d.mts} RENAMED Viewed

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

package/dist/{ListBox-CjNokYs6.mjs → ListBox-C80J7DCG.mjs} RENAMED Viewed

@@ -8,13 +8,13 @@ import { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack } from "./Stack-BkC7FCdF.mjs";
-import { n as Button$1, t as IconButton } from "./IconButton-Cqxfmrea.mjs";
-import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer } from "./Sticker-_vmpUMfk.mjs";
-import { t as FormGroupContext } from "./useFormGroup-CALbrUkl.mjs";
-import { o as MenuHeading, r as ListItem } from "./Menu-CwKmfxKI.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-C2BHv8Lc.mjs";
+import { n as Button$1, t as IconButton } from "./IconButton-HWx5Hlmi.mjs";
+import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer } from "./Sticker-yhxtIYH8.mjs";
+import { t as FormGroupContext } from "./useFormGroup-CsKC93Pt.mjs";
+import { o as MenuHeading, r as ListItem } from "./Menu-Dw6Rcpk6.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CedsmO5h.mjs";
 import { s as Popover_default } from "./Popover-BcII7usF.mjs";
-import { t as Container } from "./FormControl-jfjKwUfK.mjs";
+import { t as Container } from "./FormControl-C4CiA0H-.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { DropIndicator, GridList, GridListItem, Header, ListBoxSection, useDragAndDrop } from "react-aria-components";
@@ -472,4 +472,4 @@ const ListBox = Object.assign(ListBox$1, { LogicRow });
 //#endregion
 export { useListBoxContext as n, ListBox as t };
-//# sourceMappingURL=ListBox-CjNokYs6.mjs.map
+//# sourceMappingURL=ListBox-C80J7DCG.mjs.map