npm - @persona/design-system - Versions diffs - 0.5.0 → 0.6.0 - Mend

@persona/design-system 0.5.0 → 0.6.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 (575) hide show

package/dist/IconButton-BnSEV7eR.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"IconButton-BnSEV7eR.mjs","names":["noop"],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash-es';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\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 { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\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\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: Link,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const palette = theme.color.variants[variant] as any;\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n svg path {\n stroke: ${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 ${({ variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${({ theme }) => 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, $isPending, $onSecondaryBackground }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n let palette = theme.color.variants[variant] as any;\n\n if (variant === 'basic' && $onSecondaryBackground) {\n palette = {\n ...palette,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n default: Color.CoreSlate300,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n hover: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n active: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\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: ${({ theme }) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return theme.color.variants[variant].active;\n }};\n user-select: none;\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?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';\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 * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n * `https://` URL to render an `<a>` tag that opens in a new tab.\n */\n to?: LinkProps['to'];\n\n /**\n * Overrides the target of the link if `to` is provided and is an external link.\n */\n target?: LinkProps['target'];\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 ...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\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 {...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';\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 ${({ 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/Input-D7of_GtJ.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Input-D7of_GtJ.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 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 }>`\n position: absolute;\n left: ${Spacing[2]};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n color: ${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: ${Color.BorderIconSecondary};\n\n ${({ disabled }) =>\n disabled &&\n css`\n color: ${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 }) => theme.color.text.secondary};\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 && <LeftIcon $size={size}>{leftIcon}</LeftIcon>}\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/ListBox-jzXQDraS.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ListBox-jzXQDraS.mjs","names":["ListBox","Button","FormControlContainer","DropdownMenu","MoreIcon","XIcon","Popover","Section","ListBox","BaseListBox"],"sources":["../components/ListBox/ListBox.tsx","../components/ListBox/LogicRow.tsx","../components/ListBox/index.ts"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n type ComponentPropsWithoutRef,\n createContext,\n type PropsWithChildren,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n DropIndicator,\n type DroppableCollectionReorderEvent,\n GridList,\n GridListItem,\n Header,\n ListBoxSection as Section,\n useDragAndDrop,\n} from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons';\nimport { MoreIcon, XIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps, IconButton } from 'design-system/components/Button';\nimport { FormGroupContext } from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { Container as FormControlContainer } from 'design-system/components/FormControl';\nimport { ListItem, MenuHeading, type MenuItemProps } from 'design-system/components/Menu';\nimport Popover from 'design-system/components/Popover/Popover';\nimport Stack from 'design-system/components/Stack';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { findIndexByKey, moveItemByIndex } from 'design-system/lib/reorderItems';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\n// Context for sharing ListBox configuration with child items\ninterface ListBoxContextValue {\n size: 'sm' | 'md';\n listBoxId: string;\n setItemHasActionsOrDelete: (value: boolean) => void;\n}\n\nconst ListBoxContext = createContext<ListBoxContextValue | null>(null);\n\n/**\n * Hook to access ListBox context values (like size) from child components\n */\nexport const useListBoxContext = () => {\n return useContext(ListBoxContext);\n};\n\nexport interface ListBoxProps<T extends object> extends Omit<\n ComponentPropsWithoutRef<typeof GridList<T>>,\n 'slot' | 'autoFocus' | 'orientation' | 'shouldFocusWrap' | 'dragAndDropHooks' | 'layout'\n> {\n /**\n * Called when \"Add\" button is clicked. Only renders \"Add\" button if this prop is present.\n */\n onAdd?: ButtonProps['onClick'];\n\n /**\n * Called when \"Delete\" button is clicked. Only renders \"Delete\" button if this prop is present.\n */\n onDelete?: (selectedKeys: ListBoxProps<T>['selectedKeys']) => void;\n\n /**\n * Whether or not delete button should be disabled.\n */\n deleteDisabled?: boolean;\n\n /**\n * Whether or not the Add/Delete buttons should be shown.\n */\n editable?: boolean;\n\n /**\n * Text to display if no options are available.\n */\n emptyText?: string;\n\n /**\n * Whether or not to expand the box to the full width of the container.\n */\n fullWidth?: boolean;\n\n /**\n * When provided, enables drag and drop functionality.\n */\n reorderConfig?: {\n /**\n * Called when items are reordered via drag and drop. Receives the reordered\n * array of items when an item is dropped.\n */\n onReorder: (reorderedItems: T[]) => void;\n /**\n * The name of the property on the item that was passed as the key to\n * `ListBox.Item`. For exanple, if the item is`{ id: '1', name: 'First Item' }`,\n * and you passed ListBox.Item `key={item.id}`, then the `itemKeyPath`\n * should be `'id'`.\n */\n itemKeyPath: string;\n };\n\n /**\n * Size of the list box.\n */\n size?: 'sm' | 'md';\n\n /**\n * Caps the list height and scrolls vertically inside the bordered container.\n */\n maxHeight?: number | string;\n}\n\nconst StyledListBox = styled(GridList)<{\n fullWidth?: boolean;\n $size?: 'sm' | 'md';\n $maxHeight?: number | string;\n}>`\n ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n box-sizing: border-box;\n background: ${Color.BackgroundPrimary};\n border-radius: ${BorderRadius.Md};\n border: 1px solid ${Color.BorderDivider};\n padding: ${Spacing[1]};\n\n ${({ $maxHeight }) =>\n $maxHeight != null &&\n css`\n max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n overflow-y: auto;\n `}\n\n ${({ fullWidth }) =>\n !fullWidth &&\n css`\n width: 204px;\n `}\n`;\n\nconst StyledDropIndicator = styled(DropIndicator)`\n height: 2px;\n background: ${({ theme }) => theme.color.text.brand};\n`;\n\nconst ListBoxEmptyState = styled.button<{ $size?: 'sm' | 'md' }>`\n ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n background-color: transparent;\n outline: none;\n border: none;\n padding: ${Spacing[1]};\n color: ${Color.TextSecondary};\n`;\n\nconst ListBoxEmptyStateButton = styled(ListBoxEmptyState)`\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const ListBox = <T extends object>({\n children,\n onAdd,\n onDelete,\n emptyText,\n deleteDisabled,\n selectedKeys,\n onSelectionChange,\n editable = true,\n size = 'md',\n reorderConfig,\n items,\n maxHeight,\n ...props\n}: PropsWithChildren<ListBoxProps<T>>) => {\n const listBoxRef = useRef<HTMLDivElement>(null);\n const listBoxId = useMemo(() => uniqueId('listbox-'), []);\n const rowDropdownId = `${listBoxId}-row-dropdown`;\n const [itemHasActionsOrDelete, setItemHasActionsOrDelete] = useState(false);\n\n const { dragAndDropHooks } = useDragAndDrop({\n getItems: (keys) =>\n Array.from(keys).map((key) => ({\n 'text/plain': String(key),\n })),\n getAllowedDropOperations: () => ['move'],\n onReorder: (e: DroppableCollectionReorderEvent) => {\n if (!reorderConfig || !items) {\n return;\n }\n const { onReorder, itemKeyPath } = reorderConfig;\n if (!onReorder || !itemKeyPath) {\n return;\n }\n\n const draggedKey = Array.from(e.keys)[0];\n if (draggedKey == null) {\n return;\n }\n\n const itemsArr = Array.from(items);\n const fromIndex = findIndexByKey(itemsArr, itemKeyPath, String(draggedKey));\n const targetIndex = findIndexByKey(itemsArr, itemKeyPath, String(e.target.key));\n if (fromIndex === -1 || targetIndex === -1) {\n return;\n }\n\n // After removing the dragged item, a target that sat after it shifts down by one.\n const targetIndexAfterRemoval = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;\n const toIndex =\n e.target.dropPosition === 'before' ? targetIndexAfterRemoval : targetIndexAfterRemoval + 1;\n\n onReorder(moveItemByIndex(itemsArr, fromIndex, toIndex));\n },\n renderDropIndicator: (target) => <StyledDropIndicator target={target} />,\n });\n\n // If row dropdowns are open, deselect items (which also closes the dropdown) when clicking outside the ListBox\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n const rowDropdownIsOpen = document.querySelector(\n `[id=\"${rowDropdownId}\"][data-state=\"open\"]`,\n );\n if (!rowDropdownIsOpen) {\n return;\n }\n\n const target = event.target as HTMLElement;\n const isOutsideListBox = listBoxRef.current && !listBoxRef.current.contains(target);\n const isOnRowDropdownContent = target.closest(`[id=\"${rowDropdownId}\"]`);\n\n // Only deselect if:\n // 1. Click is outside the ListBox\n // 2. Click is not on popover content\n // 3. There are selected items\n // 4. onSelectionChange is available (to allow deselection)\n if (\n isOutsideListBox &&\n !isOnRowDropdownContent &&\n selectedKeys != null &&\n selectedKeys !== 'all' &&\n Array.from(selectedKeys).length > 0 &&\n onSelectionChange\n ) {\n // Deselect all items when clicking outside (but not on popover content)\n onSelectionChange(new Set());\n }\n },\n [selectedKeys, onSelectionChange, rowDropdownId],\n );\n\n // Set up outside click listener\n useEffect(() => {\n document.addEventListener('mousedown', handleOutsideClick);\n return () => {\n document.removeEventListener('mousedown', handleOutsideClick);\n };\n }, [handleOutsideClick]);\n\n return (\n <ListBoxContext.Provider value={{ size, listBoxId, setItemHasActionsOrDelete }}>\n <Stack spacing={Spacing[1]}>\n <StyledListBox\n ref={listBoxRef}\n onSelectionChange={onSelectionChange}\n renderEmptyState={() =>\n onAdd ? (\n <ListBoxEmptyStateButton as='button' onClick={onAdd} $size={size}>\n {emptyText || 'Click to add an option'}\n </ListBoxEmptyStateButton>\n ) : (\n <ListBoxEmptyState type='button' $size={size}>\n {emptyText || 'No options.'}\n </ListBoxEmptyState>\n )\n }\n selectedKeys={selectedKeys}\n $size={size}\n $maxHeight={maxHeight}\n items={items}\n // Without this, clicking delete triggers item selection (on press down)\n // before the delete/action callback fires (on click/press up)\n {...(itemHasActionsOrDelete && { shouldSelectOnPressUp: true })}\n {...(reorderConfig && { dragAndDropHooks })}\n {...props}\n >\n {children}\n </StyledListBox>\n {editable && (onAdd || onDelete) && (\n <Stack direction='horizontal' spacing={Spacing[1]}>\n {onAdd && (\n <Button size='sm' variant='basic' width='auto' onClick={onAdd}>\n Add\n </Button>\n )}\n {onDelete && (\n <Button\n size='sm'\n variant='basic'\n width='auto'\n onClick={() => onDelete?.(selectedKeys)}\n disabled={deleteDisabled || selectedKeys == null}\n >\n Delete\n </Button>\n )}\n </Stack>\n )}\n </Stack>\n </ListBoxContext.Provider>\n );\n};\n\nconst IconButtonWidth = 16;\nconst BackgroundFadeWidth = parseInt(Spacing[3]);\n\nconst RowActionsContainer = styled('div')`\n width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth + parseInt(Spacing[2])}px;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n padding-right: ${Spacing[2]};\n display: flex;\n align-items: center;\n justify-content: end;\n`;\n\nconst StyledItem = styled(ListItem)<{\n $hasActions?: boolean;\n $hasDelete?: boolean;\n}>`\n position: relative;\n padding: ${Spacing[1]} ${Spacing[2]};\n overflow: hidden;\n white-space: nowrap;\n\n ${RowActionsContainer} {\n background: linear-gradient(\n to right,\n transparent,\n ${Color.BackgroundPrimary} ${BackgroundFadeWidth}px\n );\n }\n\n // If both actions and delete are present or only delete is present, hide actions by default, show on hover\n ${({ $hasActions, $hasDelete }) =>\n (($hasActions && $hasDelete) || (!$hasActions && $hasDelete)) &&\n css`\n ${RowActionsContainer} {\n opacity: 0;\n }\n `}\n\n // increase the width of the row actions container when both actions and delete are present\n ${({ $hasActions, $hasDelete }) =>\n $hasActions &&\n $hasDelete &&\n css`\n ${RowActionsContainer} {\n width: ${\n BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth * 2 + parseInt(Spacing[2])\n }px;\n }\n `}\n\n &[data-focus-visible]:not([data-selected], [data-dragging]),\n &[data-hovered]:not([data-selected], [data-dragging]) {\n cursor: pointer;\n color: ${({ theme }) => theme.color.text.primary};\n background-color: ${Color.BackgroundSecondary};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${Color.BackgroundSecondary} ${BackgroundFadeWidth}px\n );\n }\n }\n\n // react-aria leaves data-hovered off a row with no selection and no action, and reports a\n // pointer-driven focus as not focus-visible; ListItem still styles both from raw pseudo-classes.\n &&:hover:not([data-hovered], [data-selected], [data-dragging]),\n &&:focus:not([data-focus-visible], [data-selected], [data-dragging]) {\n cursor: default;\n background-color: transparent;\n }\n\n &[data-selected],\n &[data-selected]${isFocused}, &[data-selected]:focus,\n &${isNotDisabled}${isHovered}[data-selected] {\n outline: none;\n color: ${({ theme }) => theme.color.text.brand};\n background-color: ${({ theme }) => theme.color.background.highlight};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => theme.color.background.highlight} ${BackgroundFadeWidth}px\n );\n }\n }\n\n &[data-dragging] {\n opacity: 0.5;\n background-color: ${Color.BackgroundPrimary};\n }\n\n .react-aria-Section:not(:first-child) {\n margin-top: ${Spacing[1]};\n }\n`;\n\nconst ContentContainer = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\n// The drag handle wraps a 16x16 icon in an HTML <button>. Without this, the\n// button inherits the row's line-height and the icon aligns to the text\n// baseline, leaving a descender gap below it — so the icon visually sits\n// above the row's center. Making the button itself a flex container forces\n// the icon to be centered within the button's box.\nconst DragHandle = styled(HeadlessAriaButton)`\n display: flex;\n align-items: center;\n`;\n\nconst TextContent = styled.span`\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst DropdownPopoverHeading = styled.div<{ $size: 'sm' | 'md' }>`\n ${({ $size }) => ($size === 'md' ? Typography.TextMediumBold : Typography.TextSmallBold)};\n border-bottom: 1px solid ${Color.BorderHairline};\n padding: ${Spacing[2]} ${Spacing[3]} ${Spacing[1]};\n`;\n\nconst DropdownPopoverContent = styled(Stack)`\n min-width: var(--radix-popover-trigger-width);\n padding: ${Spacing[3]};\n\n ${FormControlContainer} {\n min-width: 0;\n }\n`;\n\nconst DropdownPopoverFooter = styled.div`\n border-top: 1px solid ${Color.BorderHairline};\n padding: ${Spacing[1]};\n`;\n\nexport interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem> {\n /**\n * Actions to display in a dropdown menu.\n * Supports all props from `MenuItem`.\n */\n actions?: Array<\n {\n label: string;\n onClick: () => void;\n } & Omit<MenuItemProps, 'children'>\n >;\n\n /**\n * Called when the delete (X) icon is clicked. Only renders item-level delete icon if this prop is present.\n * Receives the item's id and the click event as parameters.\n */\n onDelete?: (id: string | number, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /**\n * Size of the list box item.\n */\n size?: 'sm' | 'md';\n\n /**\n * Form fields to be rendered inside a row dropdown popover.\n * The configField prop will be set to true for all fields via FormGroupContext.\n * Dropdown will be opened when the item is selected.\n */\n dropdownFormFields?: ReactNode;\n\n /**\n * Content to be rendered inside the row dropdown popover.\n * Dropdown will be opened when the item is selected.\n */\n dropdownContent?: ReactNode;\n\n /**\n * Optional heading text to display in the row dropdown popover.\n * Either dropdownFormFields or dropdownContent must also be provided,\n * otherwise the dropdown will not be rendered.\n */\n dropdownHeadingText?: string;\n\n /**\n * Footer to be rendered inside the row dropdown popover.\n * Either dropdownFormFields or dropdownContent must also be provided,\n * otherwise the dropdown will not be rendered.\n */\n dropdownFooter?: ReactNode;\n}\n\nconst ListBoxItem = ({\n children,\n actions,\n onDelete,\n size,\n dropdownHeadingText,\n dropdownFormFields,\n dropdownContent,\n dropdownFooter,\n ...props\n}: ListBoxItemProps) => {\n const context = useListBoxContext();\n // Use explicit prop if provided, otherwise fall back to context value, then default to 'md'\n const effectiveSize = size ?? context?.size ?? 'md';\n\n // Update context if this item has actions or onDelete\n useEffect(() => {\n if (context && (actions || onDelete)) {\n context.setItemHasActionsOrDelete(true);\n }\n }, [context, actions, onDelete]);\n\n // Only render dropdown if there are form fields or content provided, not if there's just a header or footer.\n const shouldRenderDropdown = dropdownFormFields || dropdownContent;\n\n const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {\n // avoid triggering row selection\n e.preventDefault();\n e.stopPropagation();\n\n if (onDelete && props.id != null) {\n onDelete(props.id, e);\n }\n };\n\n return (\n <StyledItem\n as={GridListItem}\n $hasActions={actions && actions.length > 0}\n $hasDelete={!!onDelete}\n textValue={typeof children === 'string' ? children : undefined}\n size={effectiveSize}\n {...props}\n >\n {({ isSelected, allowsDragging }) => {\n const contentWithDragHandle = (\n <ContentContainer>\n {allowsDragging && (\n <DragHandle slot='drag' aria-label='Drag to reorder'>\n <DragIcon />\n </DragHandle>\n )}\n {typeof children === 'string' || typeof children === 'number' ? (\n <TextContent>{children}</TextContent>\n ) : (\n children\n )}\n {(onDelete || actions) && (\n <RowActionsContainer>\n {actions && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions'>\n <MoreIcon />\n </IconButton>\n }\n align='start'\n portal\n >\n {actions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n onClick={action.onClick}\n size={effectiveSize}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n {onDelete && (\n <IconButton aria-label='Delete' onClick={handleDelete}>\n <XIcon />\n </IconButton>\n )}\n </RowActionsContainer>\n )}\n </ContentContainer>\n );\n\n return shouldRenderDropdown ? (\n <Popover trigger={contentWithDragHandle} open={isSelected}>\n <Popover.Card\n id={`${context?.listBoxId}-row-dropdown`}\n noPadding\n style={{ zIndex: Z_INDICES.modalDropdown }}\n >\n {dropdownHeadingText && (\n <DropdownPopoverHeading $size={effectiveSize}>\n {dropdownHeadingText}\n </DropdownPopoverHeading>\n )}\n {dropdownFormFields && (\n <DropdownPopoverContent spacing={Spacing[2]}>\n <FormGroupContext.Provider\n value={{\n configField: true,\n labelTooltipZIndex: Z_INDICES.modalDropdownTooltip,\n }}\n >\n {dropdownFormFields}\n </FormGroupContext.Provider>\n </DropdownPopoverContent>\n )}\n {dropdownContent && (\n <DropdownPopoverContent spacing={Spacing[3]}>\n {dropdownContent}\n </DropdownPopoverContent>\n )}\n {dropdownFooter && <DropdownPopoverFooter>{dropdownFooter}</DropdownPopoverFooter>}\n </Popover.Card>\n </Popover>\n ) : (\n contentWithDragHandle\n );\n }}\n </StyledItem>\n );\n};\n\nconst StyledMenuHeading = styled(MenuHeading)`\n padding: ${Spacing[1]} ${Spacing[2]};\n`;\n\nconst ListBoxHeader = (props: ComponentPropsWithoutRef<typeof Header>) => {\n return <StyledMenuHeading as={Header} {...props} />;\n};\n\nListBox.Item = ListBoxItem;\n\nListBox.Section = Section;\n\nListBox.Header = ListBoxHeader;\n\nexport default ListBox;\n","import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport Sticker, {\n StickerContainer,\n StickerContentContainer,\n StyledTruncatedText,\n} from 'design-system/components/Sticker';\nimport { isFocused, isHovered } from 'design-system/lib/pseudoClass';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nimport ListBox, { type ListBoxItemProps } from './ListBox';\n\nconst LogicRowSticker = styled(Sticker)`\n display: inline;\n height: initial;\n\n ${StickerContainer}, ${StickerContentContainer}, ${StyledTruncatedText} {\n display: inline;\n }\n`;\n\nconst LogicListBoxItem = styled(ListBox.Item)`\n padding: 0;\n\n &[data-selected],\n &[data-selected]${isFocused}, &[data-selected]:focus,\n &[data-selected]${isHovered}, &[data-selected]:hover,\n &[data-selected]:not(:disabled)${isHovered}, &[data-selected]:not(:disabled):hover {\n color: ${Color.TextPrimary};\n\n ${LogicRowSticker} {\n background-color: ${Color.BackgroundLabelPurple};\n }\n }\n\n &[data-hovered]:not([data-selected]) {\n ${LogicRowSticker} {\n background-color: ${Color.BackgroundLabelGreyHover};\n }\n }\n`;\n\nconst LogicRuleContainer = styled.div<{ $hideCondition?: boolean; $size?: InputSizes }>`\n display: grid;\n grid-template-columns: ${({ $hideCondition }) =>\n $hideCondition ? 'repeat(3, min-content)' : '32px repeat(3, min-content)'};\n grid-gap: 6px;\n align-items: baseline;\n padding: ${Spacing[1]};\n width: 100%;\n ${({ $size }) => ($size === 'md' ? Typography.TextMedium : Typography.TextSmall)}\n`;\n\nexport interface LogicRowProps extends ListBoxItemProps {\n condition: string;\n attributeName?: string;\n operator?: string;\n matchLevelName?: string;\n editable?: boolean;\n id: string | number;\n dropdownHeadingText?: string;\n /** Form fields rendered inside the row dropdown. */\n dropdownFormFields?: ReactNode;\n size?: InputSizes;\n /**\n * Removes the condition column when the surrounding group already communicates\n * the conjunction.\n */\n hideCondition?: boolean;\n}\n\nconst LogicRow = ({\n condition,\n attributeName,\n operator,\n matchLevelName,\n editable = true,\n id,\n onDelete,\n dropdownHeadingText,\n dropdownFormFields,\n size,\n hideCondition = false,\n ...listBoxItemProps\n}: LogicRowProps) => {\n return (\n <LogicListBoxItem\n id={id}\n disabled={!editable}\n onDelete={onDelete}\n dropdownHeadingText={dropdownHeadingText}\n dropdownFormFields={dropdownFormFields}\n {...listBoxItemProps}\n size={size}\n >\n <LogicRuleContainer $hideCondition={hideCondition} $size={size}>\n {!hideCondition && (condition || '\\u00A0')}\n {attributeName && (\n <>\n <LogicRowSticker disabled={!editable}>{attributeName}</LogicRowSticker>\n {operator}\n {matchLevelName && (\n <LogicRowSticker disabled={!editable}>{matchLevelName}</LogicRowSticker>\n )}\n </>\n )}\n </LogicRuleContainer>\n </LogicListBoxItem>\n );\n};\n\nexport default LogicRow;\n","import BaseListBox, { useListBoxContext } from './ListBox';\nimport LogicRow from './LogicRow';\n\nconst ListBox = Object.assign(BaseListBox, { LogicRow });\n\nexport { ListBox, useListBoxContext };\nexport type { ListBoxProps, ListBoxItemProps } from './ListBox';\nexport type { LogicRowProps } from './LogicRow';\n\nexport default ListBox;\n"],"mappings":"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"}

package/dist/LoadingShimmer-a2Hv0kAq.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"LoadingShimmer-a2Hv0kAq.mjs","names":[],"sources":["../components/LoadingShimmer/LoadingShimmer.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { ComponentPropsWithoutRef, FC } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color } from '@persona/design-tokens';\nimport type { HeadingSize, ParagraphSize } from 'design-system/mixins/text';\n\ninterface LoadingShimmerProps extends ComponentPropsWithoutRef<'span'> {\n height?: string;\n width?: string;\n variant?: 'primary' | 'secondary';\n}\n\ntype ShimmerContainerProps = {\n width?: string;\n height?: string;\n $variant: 'primary' | 'secondary';\n};\nconst ShimmerContainer = styled.span<ShimmerContainerProps>`\n position: relative;\n display: inline-block;\n /* Using a one off color since our current color tokens are not quite what we need */\n background-color: ${({ $variant }) => ($variant === 'secondary' ? '#eaeaea' : Color.CoreSlate50)};\n width: ${({ width }) => width ?? '100px'};\n height: ${({ height }) => height ?? 'auto'};\n border-radius: ${BorderRadius.Md};\n overflow: hidden;\n`;\n\ntype ShimmerProps = {\n $variant: 'primary' | 'secondary';\n};\nconst Shimmer = styled(motion.span)<ShimmerProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${({ $variant }) =>\n `linear-gradient(90deg, transparent 0%, ${$variant === 'secondary' ? Color.CoreSlate50 : Color.CoreSlate25} 50%, transparent 100%)`};\n filter: blur(4px);\n`;\n\n/**\n * Base class of all Loading Shimmer components.\n */\nexport function LoadingShimmer({\n width,\n height,\n variant = 'primary',\n ...props\n}: LoadingShimmerProps) {\n return (\n <ShimmerContainer\n width={width}\n height={height}\n $variant={variant}\n aria-live='polite'\n aria-busy='true'\n data-test='loading-shimmer'\n data-loading-indicator='true'\n {...props}\n >\n <Shimmer\n initial={{ x: '-100%', skew: -30 }}\n animate={{ x: '100%', skew: -30 }}\n $variant={variant}\n transition={{ repeat: Infinity, duration: 1, ease: 'easeOut' }}\n />\n </ShimmerContainer>\n );\n}\n\nexport interface LoadingShimmerHeadingProps extends LoadingShimmerProps {\n size?: HeadingSize;\n}\n\nexport const LoadingShimmerHeading = styled(LoadingShimmer)<LoadingShimmerHeadingProps>`\n height: ${({ theme, size = 'lg' }) => theme.text.heading[size].fontSize};\n`;\n\ninterface LoadingShimmerParagraphProps extends LoadingShimmerProps {\n size?: ParagraphSize;\n // eg. 200px\n width?: string;\n}\n\nexport const LoadingShimmerParagraph = styled(LoadingShimmer)<LoadingShimmerParagraphProps>`\n height: ${({ theme, size = 'md' }) => theme.text.paragraph[size].fontSize};\n`;\n\n// A \"maybe\" shimmer block that is shimmering if the `isLoading`\n// value is set to true and otherwise just displays its children\ninterface MaybeLoadingShimmerProps {\n isLoading: boolean;\n height?: string;\n width?: string;\n}\n\nexport const MaybeLoadingShimmer: FC<MaybeLoadingShimmerProps> = ({\n isLoading,\n children,\n height,\n width,\n}) => (isLoading ? <LoadingShimmer height={height} width={width} /> : <>{children}</>);\n"],"mappings":";;;;;AAkBA,MAAM,mBAAmB,OAAO,IAA2B;;;;uBAIpC,EAAE,eAAgB,aAAa,cAAc,YAAY,MAAM,YAAa;YACvF,EAAE,YAAY,SAAS,QAAQ;aAC9B,EAAE,aAAa,UAAU,OAAO;mBAC1B,aAAa,GAAG;;;AAOnC,MAAM,UAAU,OAAO,OAAO,KAAK;;;;iBAIlB,EAAE,eACf,0CAA0C,aAAa,cAAc,MAAM,cAAc,MAAM,YAAY,yBAAyB;;;;;;AAOxI,SAAgB,eAAe,EAC7B,OACA,QACA,UAAU,WACV,GAAG,SACmB;AACtB,QACE,oBAAC,kBAAD;EACS;EACC;EACR,UAAU;EACV,aAAU;EACV,aAAU;EACV,aAAU;EACV,0BAAuB;EACvB,GAAI;YAEJ,oBAAC,SAAD;GACE,SAAS;IAAE,GAAG;IAAS,MAAM;IAAK;GAClC,SAAS;IAAE,GAAG;IAAQ,MAAM;IAAK;GACjC,UAAU;GACV,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAW;GAC9D,CAAA;EACe,CAAA;;AAQvB,MAAa,wBAAwB,OAAO,eAAe;aAC9C,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,QAAQ,MAAM,SAAS;;AAS1E,MAAa,0BAA0B,OAAO,eAAe;aAChD,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,UAAU,MAAM,SAAS;;AAW5E,MAAa,uBAAqD,EAChE,WACA,UACA,QACA,YACK,YAAY,oBAAC,gBAAD;CAAwB;CAAe;CAAS,CAAA,GAAG,oBAAA,UAAA,EAAG,UAAY,CAAA"}

package/dist/Menu-DVI8l-4Q.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Menu-DVI8l-4Q.mjs","names":["Card"],"sources":["../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';\nimport Card from 'design-system/components/Card';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { darkTheme } from 'design-system/theme';\nimport { FontWeight } from 'design-system/variables/text';\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 }) => theme.color.text.primary};\n cursor: pointer;\n ${({ focused, selected, theme }) =>\n focused &&\n !selected &&\n css`\n outline: none;\n color: ${theme.color.text.primary};\n background-color: ${theme.color.background.secondary};\n `}\n\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n ${({ selected }) =>\n !selected &&\n css`\n outline: none;\n color: ${({ theme }) => theme.color.text.primary};\n background-color: ${({ theme }) => theme.color.background.secondary};\n `}\n }\n\n &:focus-visible {\n outline: 2px solid ${Color.BorderFocus};\n outline-offset: 1px;\n }\n\n ${({ selected, theme }) =>\n selected &&\n css`\n outline: none;\n color: ${theme.color.text.brand};\n background-color: ${theme.color.background.highlight};\n `}\n\n &${isDisabled} {\n color: ${({ theme }) => 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: ${theme.color.variants[variant].default};\n\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n color: ${Color.CoreRed900};\n background-color: ${theme.color.variants[variant].highlightLight};\n }\n\n &${isDisabled} {\n color: ${({ theme }) => 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 }) => 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.sm};\n text-transform: uppercase;\n padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n display: block;\n color: ${({ theme }) => theme.color.text.secondary};\n font-weight: ${FontWeight.Regular};\n letter-spacing: 0.1em;\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={darkTheme}>{menu}</PDSProvider>;\n }\n\n return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}

package/dist/PageHeader-BpGT-BM0.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PageHeader-BpGT-BM0.mjs","names":[],"sources":["../components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Breadcrumbs, { type BreadcrumbsProps } from 'design-system/components/Breadcrumbs';\nimport { Heading, Paragraph } from 'design-system/components/Text';\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 }) => theme.color.background.primary};\n border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n box-sizing: border-box;\n min-height: 56px; /* Standardize height for most PageHeaders */\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n flex: 1;\n align-items: center;\n h1 {\n margin: 0;\n }\n p {\n margin: 0 0 0 ${Spacing[2]};\n }\n`;\n\nconst LeftContainer = styled.div`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\nconst RightContainer = styled.div`\n display: flex;\n gap: ${Spacing[2]};\n margin-left: ${Spacing[3]};\n`;\n\ninterface PageHeaderCommonProps {\n level?: 'product' | 'detail';\n prepend?: ReactNode;\n append?: ReactNode;\n children?: ReactNode;\n}\n\n/** Exactly one heading source is required: either `title` or `breadcrumbs`. */\nexport type PageHeaderProps = PageHeaderCommonProps &\n (\n | { title: ReactNode; subtitle?: ReactNode; breadcrumbs?: never }\n | {\n title?: never;\n /**\n * The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it\n * carried (e.g. an object ID) into the current crumb, with a copy action if useful.\n */\n subtitle?: never;\n /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */\n breadcrumbs: BreadcrumbsProps;\n }\n );\n\nconst PageHeader = ({\n title,\n breadcrumbs,\n subtitle,\n level = 'product',\n prepend,\n append,\n children,\n ...props\n}: PageHeaderProps) => (\n <PageHeaderContainer {...props}>\n <LeftContainer>\n {prepend}\n <TitleContainer>\n {breadcrumbs ? (\n <Breadcrumbs size='lg' {...breadcrumbs} />\n ) : (\n <>\n {level === 'product' && (\n <Heading as='h1' size='sm'>\n {title}\n </Heading>\n )}\n {level === 'detail' && (\n <Paragraph as='h1' size='lg' color='primary'>\n {title}\n </Paragraph>\n )}\n </>\n )}\n {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n </TitleContainer>\n {append}\n </LeftContainer>\n {children && <RightContainer>{children}</RightContainer>}\n </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;AAOA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;8BACtC,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;;;;AAKvE,MAAM,iBAAiB,OAAO,GAAG;;;;;;;;oBAQb,QAAQ,GAAG;;;AAI/B,MAAM,gBAAgB,OAAO,GAAG;;;SAGvB,QAAQ,GAAG;;AAGpB,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;AA0B5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,QAAQ,WACR,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD,EAAA,UAAA;EACG;EACD,qBAAC,gBAAD,EAAA,UAAA,CACG,cACC,oBAAC,aAAD;GAAa,MAAK;GAAK,GAAI;GAAe,CAAA,GAE1C,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,aACT,oBAAC,SAAD;GAAS,IAAG;GAAK,MAAK;aACnB;GACO,CAAA,EAEX,UAAU,YACT,oBAAC,WAAD;GAAW,IAAG;GAAK,MAAK;GAAK,OAAM;aAChC;GACS,CAAA,CAEb,EAAA,CAAA,EAEJ,YAAY,oBAAC,WAAD;GAAW,MAAK;aAAM;GAAqB,CAAA,CACzC,EAAA,CAAA;EAChB;EACa,EAAA,CAAA,EACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}

package/dist/Pagination-CVRTcKSG.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Pagination-CVRTcKSG.mjs","names":[],"sources":["../components/Pagination/constants.ts","../components/Pagination/PageSelector.tsx","../components/Pagination/PageSizeSelector.tsx","../components/Pagination/Pagination.tsx","../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 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.\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\nexport default function PageSelector({\n paginationParams,\n handlePageLinkClick,\n isLoading,\n onPageChange,\n}: PageSelectorProps) {\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\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 && !lowerBound ? (\n <Input\n aria-label='Go to page number'\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 of {lowerBound ? 'many' : totalPages} pages\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='Previous page'\n >\n Prev\n </Button>\n <Button\n id='pagination__page-selector--right'\n disabled={(currentPage === totalPages && !lowerBound) || isLoading}\n onClick={() => {\n if (currentPage !== totalPages || lowerBound) {\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='Next page'\n >\n 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\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: ${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 // 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 Items per page:\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 { 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: ${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\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}: PaginationProps) => {\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 const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? 'many' : totalCount;\n\n const lastItemIndex = lowerBound\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='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>\n Showing {firstItemIndex}-{lastItemIndex} of {totalCountDisplay} items\n </div>\n <PaginationInfo>\n <PageSelector\n paginationParams={paginationParams}\n handlePageLinkClick={handlePageLinkClick}\n isLoading={isLoading}\n onPageChange={onPageChange}\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/Popover-DlXyKYL5.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Popover-DlXyKYL5.mjs","names":["Card"],"sources":["../components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Children, forwardRef, isValidElement, type ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport Card from 'design-system/components/Card';\nimport { Paragraph } from 'design-system/components/Text';\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverPortal = PopoverPrimitive.Portal;\n\n// TODO: Investigate how we can get date popovers to work properly with the new date picker\nexport const PopoverContent = PopoverPrimitive.PopoverContent;\n\nconst PopoverContentStyled = styled(PopoverContent)<{ zIndex?: number; $maxHeight?: string }>`\n z-index: ${({ zIndex }) => zIndex || 'inherit'};\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${$maxHeight};\n overflow: auto;\n `}\n`;\n\nconst PopoverCloseButton = styled(PopoverPrimitive.Close)<{ isHeader?: boolean }>`\n ${({ isHeader }) =>\n !isHeader &&\n css`\n position: absolute;\n top: 8px;\n right: 8px;\n `}\n ${({ isHeader }) =>\n isHeader &&\n css`\n height: 16px;\n `}\n background: transparent;\n border: 0;\n cursor: pointer;\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PopoverClose = (\n props: PopoverPrimitive.PopoverCloseProps & { isHeader?: boolean },\n) => {\n return (\n <PopoverCloseButton {...props}>\n <XIcon />\n </PopoverCloseButton>\n );\n};\n\nexport interface PopoverCardProps extends PopoverPrimitive.PopoverContentProps {\n /**\n * Display X button to close popover\n */\n showCloseButton?: boolean;\n\n /**\n * Remove padding from Card\n */\n noPadding?: boolean;\n\n padding?: Spacing;\n\n /**\n * Text to display in the header of the card\n */\n heading?: string;\n\n /**\n * Z-index to apply to the popover content\n */\n zIndex?: number;\n\n /**\n * Maximum height for the popover content.\n */\n maxHeight?: string;\n}\n\n/**\n * Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.\n */\nexport const PopoverCard = forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n PopoverCardProps\n>(function PopoverCard(\n { children, showCloseButton, heading, noPadding, padding, zIndex, maxHeight, ...props },\n ref,\n) {\n const header = heading && (\n <HeadingContainer>\n <Paragraph size='md' weight='bold' color='primary'>\n {heading}\n </Paragraph>\n {showCloseButton && <PopoverClose aria-label='Close' isHeader />}\n </HeadingContainer>\n );\n return (\n <PopoverContentStyled\n asChild\n sideOffset={8}\n collisionPadding={8}\n zIndex={zIndex}\n $maxHeight={maxHeight}\n {...props}\n ref={ref}\n >\n <Card elevated>\n {!heading && showCloseButton && <PopoverClose aria-label='Close' />}\n {noPadding ? (\n <>\n {heading && header}\n {children}\n </>\n ) : (\n <Card.Body padding={padding}>\n {heading && header}\n {children}\n </Card.Body>\n )}\n </Card>\n </PopoverContentStyled>\n );\n});\n\ninterface PopoverProps extends PopoverPrimitive.PopoverProps {\n /**\n * Component to use as trigger. Radix UI trigger component props will be merged with this element.\n */\n trigger?: ReactElement;\n\n /**\n * Props to apply to Popover.Trigger within\n */\n triggerProps?: PopoverPrimitive.PopoverTriggerProps;\n\n /**\n * An optional element to position the Popover.Content against.\n * If this part is not used, the content will position alongside the trigger.\n */\n anchor?: ReactElement<PopoverPrimitive.PopoverAnchorProps>;\n\n /**\n * Props to apply to Popover.Card within\n */\n contentProps?: PopoverCardProps;\n\n /**\n * Render content within a portal\n */\n portal?: boolean;\n\n /**\n * Props applied to Radix UI Portal component\n */\n portalProps?: PopoverPrimitive.PopoverPortalProps;\n}\n\nconst Popover = ({\n children,\n trigger,\n triggerProps,\n contentProps,\n anchor,\n portal = true,\n portalProps,\n ...props\n}: PopoverProps) => {\n let triggerElem;\n let contentElem;\n let anchorElem = anchor;\n\n const renderChildren = Children.toArray(children).filter((child) => {\n if (isValidElement(child)) {\n switch (child.type) {\n case PopoverPrimitive.Trigger:\n triggerElem = child;\n return false;\n case PopoverCard:\n case PopoverPrimitive.Content:\n contentElem = child;\n break;\n case PopoverPrimitive.Anchor:\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n anchorElem = child;\n return false;\n }\n }\n\n return true;\n });\n\n const content = contentElem || <PopoverCard {...contentProps}>{renderChildren}</PopoverCard>;\n\n return (\n <PopoverPrimitive.Root {...props}>\n {triggerElem ||\n (trigger && (\n <PopoverTrigger asChild {...triggerProps}>\n {trigger}\n </PopoverTrigger>\n ))}\n {anchorElem}\n {portal ? <PopoverPortal {...portalProps}>{content}</PopoverPortal> : content}\n </PopoverPrimitive.Root>\n );\n};\n\nexport default Object.assign(Popover, {\n Trigger: PopoverTrigger,\n Anchor: PopoverAnchor,\n Portal: PopoverPortal,\n Content: PopoverContent,\n Card: PopoverCard,\n Close: PopoverClose,\n});\n"],"mappings":";;;;;;;;AASA,MAAa,iBAAiB,iBAAiB;AAC/C,MAAa,gBAAgB,iBAAiB;AAC9C,MAAa,gBAAgB,iBAAiB;AAG9C,MAAa,iBAAiB,iBAAiB;AAE/C,MAAM,uBAAuB,OAAO,eAAe;cACrC,EAAE,aAAa,UAAU,UAAU;KAC5C,EAAE,iBACH,cACA,GAAG;oBACa,WAAW;;MAEzB;;AAGN,MAAM,qBAAqB,OAAO,iBAAiB,MAAM;KACpD,EAAE,eACH,CAAC,YACD,GAAG;;;;MAID;KACD,EAAE,eACH,YACA,GAAG;;MAED;;;;;AAMN,MAAM,mBAAmB,OAAO,GAAG;;;;;AAMnC,MAAa,gBACX,UACG;AACH,QACE,oBAAC,oBAAD;EAAoB,GAAI;YACtB,oBAAC,OAAD,EAAS,CAAA;EACU,CAAA;;;;;AAoCzB,MAAa,cAAc,WAGzB,SAAS,YACT,EAAE,UAAU,iBAAiB,SAAS,WAAW,SAAS,QAAQ,WAAW,GAAG,SAChF,KACA;CACA,MAAM,SAAS,WACb,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,WAAD;EAAW,MAAK;EAAK,QAAO;EAAO,OAAM;YACtC;EACS,CAAA,EACX,mBAAmB,oBAAC,cAAD;EAAc,cAAW;EAAQ,UAAA;EAAW,CAAA,CAC/C,EAAA,CAAA;AAErB,QACE,oBAAC,sBAAD;EACE,SAAA;EACA,YAAY;EACZ,kBAAkB;EACV;EACR,YAAY;EACZ,GAAI;EACC;YAEL,qBAACA,cAAD;GAAM,UAAA;aAAN,CACG,CAAC,WAAW,mBAAmB,oBAAC,cAAD,EAAc,cAAW,SAAU,CAAA,EAClE,YACC,qBAAA,YAAA,EAAA,UAAA,CACG,WAAW,QACX,SACA,EAAA,CAAA,GAEH,qBAACA,aAAK,MAAN;IAAoB;cAApB,CACG,WAAW,QACX,SACS;MAET;;EACc,CAAA;EAEzB;AAmCF,MAAM,WAAW,EACf,UACA,SACA,cACA,cACA,QACA,SAAS,MACT,aACA,GAAG,YACe;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI,aAAa;CAEjB,MAAM,iBAAiB,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAClE,MAAI,eAAe,MAAM,CACvB,SAAQ,MAAM,MAAd;GACE,KAAK,iBAAiB;AACpB,kBAAc;AACd,WAAO;GACT,KAAK;GACL,KAAK,iBAAiB;AACpB,kBAAc;AACd;GACF,KAAK,iBAAiB;AAEpB,iBAAa;AACb,WAAO;;AAIb,SAAO;GACP;CAEF,MAAM,UAAU,eAAe,oBAAC,aAAD;EAAa,GAAI;YAAe;EAA6B,CAAA;AAE5F,QACE,qBAAC,iBAAiB,MAAlB;EAAuB,GAAI;YAA3B;GACG,eACE,WACC,oBAAC,gBAAD;IAAgB,SAAA;IAAQ,GAAI;cACzB;IACc,CAAA;GAEpB;GACA,SAAS,oBAAC,eAAD;IAAe,GAAI;cAAc;IAAwB,CAAA,GAAG;GAChD;;;AAI5B,IAAA,kBAAe,OAAO,OAAO,SAAS;CACpC,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACN,OAAO;CACR,CAAC"}

package/dist/Radio-DYGEt0FT.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Radio-DYGEt0FT.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n isChecked,\n isDisabled,\n isFocusedVisible,\n isHovered,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n cursor: pointer;\n display: flex;\n align-items: flex-start;\n flex-wrap: nowrap;\n position: relative;\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n align-items: center;\n height: 16px;\n `}\n\n &${isDisabled} {\n cursor: default;\n }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n cursor: inherit;\n padding: 0 ${Spacing[2]};\n color: ${Color.TextSecondary};\n\n ${({ size }) =>\n size === 'sm'\n ? css`\n ${Typography.TextSmall};\n line-height: 16px;\n `\n : css`\n ${Typography.TextMedium};\n `}\n\n ${({ theme, disabled }) =>\n disabled &&\n css`\n cursor: default;\n color: ${theme.color.text.disabled};\n `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: box-shadow ${TransitionDuration.Fast};\n border-radius: 100%;\n height: ${Spacing[4]};\n width: ${Spacing[4]};\n flex: 0 0 16px;\n box-sizing: border-box;\n margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n border: 1px solid ${Color.BorderInputCheckbox};\n background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n cursor: inherit;\n height: ${Spacing[4]};\n width: ${Spacing[4]};\n margin: 0;\n border: 0;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n border-radius: 100%;\n z-index: 10; // this needs to be above the dot in the checked input\n\n &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n border-color: ${Color.BorderInputCheckboxHover};\n }\n\n &${isChecked}, &:checked {\n &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n background: ${Color.BackgroundInputActiveHover};\n border-color: ${Color.BackgroundInputActiveHover};\n }\n }\n\n &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n ${focusStyle}\n }\n\n // RadioCircle state styles; Uses pure CSS\n &${isDisabled} + ${RadioCircle} {\n cursor: default;\n background: ${Color.BackgroundInputDisabled};\n border-color: ${Color.BorderInputDisabled};\n }\n\n &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n border-color: ${Color.BackgroundInputActive};\n background: ${Color.BackgroundInputActive};\n\n &::after {\n background: ${Color.BackgroundInputDefault};\n height: 6px;\n width: 6px;\n border-radius: 100%;\n content: '';\n position: absolute;\n }\n }\n\n &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n border-color: ${Color.BackgroundInputActiveDisabled};\n background: ${Color.BackgroundInputActiveDisabled};\n }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n /**\n * If not provided, a unique ID will be generated.\n */\n id?: string;\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n label?: ReactNode;\n disabled?: boolean;\n checked?: boolean;\n value: string;\n 'data-test'?: string;\n size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n {\n id,\n label,\n className,\n value,\n disabled,\n checked,\n defaultChecked,\n onChange,\n 'data-test': dataTest,\n size = 'md',\n ...elemProps\n },\n ref,\n) {\n const field = useFormField({ disabled });\n const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n return (\n <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n <RadioInput\n id={id || generatedId}\n disabled={field.disabled}\n onChange={onChange}\n type='radio'\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n ref={ref}\n $size={size}\n {...elemProps}\n />\n <RadioCircle size={size} />\n {label && (\n <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n {label}\n </Label>\n )}\n </Container>\n );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;WACf,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpC,MAAM,oBAAoB;gBAChC,MAAM,aAAa;;AAGnC,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;oBAC5B,MAAM,yBAAyB;;;KAG9C,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;oBAC9B,MAAM,2BAA2B;sBAC/B,MAAM,2BAA2B;;;;KAIlD,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;kBAEf,MAAM,wBAAwB;oBAC5B,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAK,UAAU,KAAK,YAAY;oBACxC,MAAM,sBAAsB;kBAC9B,MAAM,sBAAsB;;;oBAG1B,MAAM,uBAAuB;;;;;;;;;aASpC,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;oBAClE,MAAM,8BAA8B;kBACtC,MAAM,8BAA8B;;;AAkBtD,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,cAAc,cAAc,SAAS,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,qBAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,oBAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,oBAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}

package/dist/SegmentedControl-DwbltwDQ.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"SegmentedControl-DwbltwDQ.mjs","names":[],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext, forwardRef, type Key, type ReactNode, useContext } from 'react';\nimport { ToggleButton, ToggleButtonGroup, type ToggleButtonProps } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SegmentedControlSizeContext = createContext<'sm' | 'md'>('md');\n\nexport interface SegmentedControlProps {\n id?: string;\n className?: string;\n\n /**\n * Current selected key (controlled)\n */\n selectedKey?: Key;\n\n /**\n * Default selected key (uncontrolled)\n */\n defaultSelectedKey?: Key;\n\n /**\n * Callback when selection changes\n */\n onSelectionChange?: (key: Key) => void;\n\n /**\n * Whether the entire component is disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the component should take full width\n */\n fullWidth?: boolean;\n\n /**\n * Size of the segmented control\n */\n size?: 'sm' | 'md';\n\n /**\n * Accessible label for the group\n */\n 'aria-label'?: string;\n\n /**\n * Segment components\n */\n children: ReactNode;\n}\n\ninterface StyledSegmentedControlProps {\n id?: string;\n $fullWidth?: boolean;\n $size?: 'sm' | 'md';\n}\n\nconst StyledSegmentedControl = styled(ToggleButtonGroup)<StyledSegmentedControlProps>`\n display: inline-flex;\n background-color: ${({ theme }) => theme.color.variants.basic.default};\n border-radius: 5px;\n padding: 1px;\n width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};\n height: ${({ $size = 'md' }) => ($size === 'sm' ? '20px' : '24px')};\n`;\n\n/**\n * A segmented control component that allows users to select between multiple options.\n * Built with React Aria for accessibility and keyboard navigation.\n */\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n function SegmentedControl(\n {\n id,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n disabled,\n fullWidth = false,\n size = 'md',\n className,\n 'aria-label': ariaLabel,\n children,\n ...props\n },\n ref,\n ) {\n const field = useFormField({ inputId: id, disabled });\n\n return (\n <SegmentedControlSizeContext.Provider value={size}>\n <StyledSegmentedControl\n ref={ref}\n className={className}\n selectionMode='single'\n selectedKeys={selectedKey ? [selectedKey] : undefined}\n defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}\n onSelectionChange={(keys) => {\n const key = Array.from(keys)[0];\n if (key && onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n isDisabled={field.disabled}\n aria-label={ariaLabel}\n aria-labelledby={field.labelId}\n aria-describedby={field.helperTextId}\n aria-errormessage={field.hasError ? field.helperTextId : undefined}\n aria-invalid={field.hasError}\n $fullWidth={fullWidth}\n $size={size}\n {...props}\n id={field.inputId}\n >\n {children}\n </StyledSegmentedControl>\n </SegmentedControlSizeContext.Provider>\n );\n },\n);\n\nconst StyledSegment = styled(ToggleButton)<{ $size?: 'sm' | 'md' }>`\n ${paragraphMixins.sm};\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: none;\n border-radius: ${BorderRadius.Md};\n color: ${({ theme }) => theme.color.text.secondary};\n cursor: pointer;\n flex: 1;\n line-height: 1;\n\n & * {\n cursor: inherit;\n }\n padding: 0 ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[1] : Spacing[2])};\n position: relative;\n transition: all 0.15s ease-in-out;\n white-space: nowrap;\n\n /* Hover state */\n &[data-hovered] {\n background-color: ${({ theme }) => theme.color.variants.basic.hover};\n }\n\n /* Selected state */\n &[data-selected] {\n background-color: ${({ theme }) => theme.color.primary.white};\n box-shadow: inset 0 0 0 1px ${({ theme }) => theme.color.border.input};\n color: ${({ theme }) => theme.color.text.primary};\n }\n\n /* Disabled state */\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n /* Remove focus outline unless we're using a keyboard */\n &[data-focused]:not([data-focus-visible]) {\n outline: none;\n }\n`;\n\nexport interface SegmentedControlItemProps extends Omit<\n ToggleButtonProps,\n 'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'\n> {\n /**\n * Whether this control item is disabled\n */\n disabled?: boolean;\n}\n\n/**\n * A segment item component for use within SegmentedControl.\n */\nconst SegmentedControlItem = forwardRef<HTMLButtonElement, SegmentedControlItemProps>(\n function SegmentedControlItem({ disabled, children, ...props }, ref) {\n const size = useContext(SegmentedControlSizeContext);\n return (\n <StyledSegment ref={ref} isDisabled={disabled} $size={size} {...props}>\n {children}\n </StyledSegment>\n );\n },\n);\n\nexport default SegmentedControl;\nexport { SegmentedControlItem };\n"],"mappings":";;;;;;;;AAQA,MAAM,8BAA8B,cAA2B,KAAK;AAqDpE,MAAM,yBAAyB,OAAO,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,QAAQ;;;YAG5D,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,mBAAmB,WAC9B,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,oBAAC,wBAAD;GACO;GACM;GACX,eAAc;GACd,cAAc,cAAc,CAAC,YAAY,GAAG,KAAA;GAC5C,qBAAqB,qBAAqB,CAAC,mBAAmB,GAAG,KAAA;GACjE,oBAAoB,SAAS;IAC3B,MAAM,MAAM,MAAM,KAAK,KAAK,CAAC;AAC7B,QAAI,OAAO,kBACT,mBAAkB,IAAI;;GAG1B,YAAY,MAAM;GAClB,cAAY;GACZ,mBAAiB,MAAM;GACvB,oBAAkB,MAAM;GACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;GACzD,gBAAc,MAAM;GACpB,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,IAAI,MAAM;GAET;GACsB,CAAA;EACY,CAAA;EAG5C;AAED,MAAM,gBAAgB,OAAO,aAAa;IACtC,gBAAgB,GAAG;;;;;;mBAMJ,aAAa,GAAG;YACvB,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;mCAC9B,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;cAC5D,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,MAAM,uBAAuB,WAC3B,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,oBAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,OAFpC,WAAW,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}

package/dist/Select-CBVvPyRJ.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Select-CBVvPyRJ.mjs","names":["DropdownMenu"],"sources":["../components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from '@radix-ui/react-select';\nimport type { Property } from 'csstype';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, MoreIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Menu, {\n MenuHeading,\n MenuItem,\n type MenuItemProps,\n MenuList,\n type MenuProps,\n} from 'design-system/components/Menu';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {\n 'aria-label'?: string;\n placeholder?: string;\n\n /**\n * id will be applied to trigger\n */\n id?: string;\n\n /**\n * Class name will be applied to trigger\n */\n className?: string;\n\n /**\n * Max height of options menu\n */\n maxHeight?: number;\n\n /**\n * Min width of the select\n */\n minWidth?: number;\n\n /**\n * Width of the selected value container\n */\n valueContainerWidth?: 'auto' | '100%';\n\n /**\n * Render dropdown menu in a portal.\n */\n portal?: boolean;\n\n /**\n * Element the portalled menu renders into. Defaults to `document.body`. Pass a container inside\n * the current dialog so the menu escapes clipping ancestors without leaving the dialog's\n * dismiss scope, which would close it on click. Requires `portal`.\n */\n portalContainer?: HTMLElement | null;\n\n /**\n * Props to apply to Radix Select.Trigger within\n */\n triggerProps?: SelectPrimitive.SelectTriggerProps;\n\n /**\n * Props to apply to Radix Select.Content within\n */\n contentProps?: SelectPrimitive.SelectContentProps;\n\n /**\n * Callback meant for use with `react-hook-form`'s `useForm` (or Persona's `useFormSecurely`)\n */\n onChange?: (event: { target: { value: string } }) => void;\n\n size?: InputSizes;\n\n value?: string | null;\n\n width?: string;\n\n header?: ReactNode;\n\n footer?: ReactNode;\n\n /**\n * z-index of content. Please use sparingly.\n */\n zIndex?: Property.ZIndex;\n}\n\ninterface SelectButtonProps extends InputMixinProps {\n isSelectingPlaceholder: boolean;\n $width?: string;\n $minWidth?: number;\n}\n\nconst SelectButton = styled('button')<SelectButtonProps>`\n ${inputMixin};\n display: inline-flex;\n position: relative;\n align-items: center;\n outline: none;\n appearance: none;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-right: ${Spacing[6]};\n width: ${({ $width }) => $width ?? '100%'};\n min-width: ${({ $minWidth }) => ($minWidth != null ? `${$minWidth}px` : 'auto')};\n\n &${isNotDisabled} {\n cursor: pointer;\n }\n\n ${({ theme, isSelectingPlaceholder }) =>\n isSelectingPlaceholder &&\n css`\n color: ${theme.color.text.secondary};\n `}\n`;\n\ninterface SelectValueContainerProps {\n width?: string;\n}\n\nconst SelectValueContainer = styled.span<SelectValueContainerProps>`\n text-overflow: ellipsis;\n min-width: 0px;\n overflow: hidden;\n text-align: start;\n\n ${({ width }) =>\n width &&\n css`\n width: ${width};\n `}\n`;\n\nconst OptionSubtitle = styled.div`\n color: ${({ theme }) => theme.color.text.secondary};\n font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};\n margin-top: ${Spacing[1]};\n`;\n\ninterface OptionsMenuProps {\n maxHeight?: number;\n size?: InputSizes;\n}\n\nconst OptionsMenu = styled(Menu)<OptionsMenuProps>`\n width: var(--radix-select-trigger-width);\n max-height: ${({ maxHeight }) => maxHeight ?? '225px !important'};\n overflow-y: auto;\n margin-bottom: 0;\n\n ${({ size }) => {\n switch (size) {\n case 'md': {\n return css`\n ${MenuList} {\n padding: ${Spacing[2]};\n }\n\n ${OptionItem} {\n ${paragraphMixins.md};\n padding: ${Spacing[2]};\n }\n\n ${MenuHeading} {\n padding: ${Spacing[2]};\n }\n `;\n }\n case 'sm': {\n return css`\n ${MenuList} {\n padding: ${Spacing[1]};\n }\n\n ${OptionItem} {\n ${paragraphMixins.sm};\n padding: ${Spacing[1]};\n }\n\n ${MenuHeading} {\n padding: ${Spacing[1]};\n }\n `;\n }\n }\n }}\n`;\n\nconst SelectContent = styled(SelectPrimitive.Content)<{ $zIndex?: number | string }>`\n z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.dropdown};\n`;\n\nconst SelectHeaderContainer = styled(HStack)`\n display: flex;\n justify-content: space-between;\n padding: ${Spacing[1]} ${Spacing[1]} 0 ${Spacing[1]};\n margin-bottom: ${Spacing[1]};\n`;\n\nconst SelectFooter = styled.div`\n padding: ${Spacing[1]} 0;\n margin-top: ${Spacing[1]};\n border-top: 1px solid ${Color.BorderDivider};\n`;\n\nconst SelectMenu = forwardRef<HTMLUListElement, MenuProps & OptionsMenuProps>(function SelectMenu(\n props: MenuProps,\n forwardedRef,\n) {\n return <OptionsMenu listRef={forwardedRef} {...props} />;\n});\n\nconst OptionItem = styled(MenuItem)`\n ${paragraphMixins.md};\n padding: ${Spacing[4]};\n`;\n\nconst SelectItem = forwardRef<HTMLDivElement, MenuItemProps>(function SelectItem(\n props: MenuItemProps,\n forwardedRef,\n) {\n return <OptionItem ref={forwardedRef} {...props} />;\n});\n\nconst StyledIconContainer = styled(SelectPrimitive.Icon)<{ disabled?: boolean }>`\n position: absolute;\n right: ${Spacing[2]};\n display: flex;\n justify-content: center;\n\n ${({ disabled }) => css`\n color: ${disabled ? Color.BorderIconDisabled : Color.BorderIconPrimary};\n `}\n`;\n\ninterface SelectHeaderProps {\n title?: ReactNode;\n menuItems?: ReactNode;\n menuTriggerLabel?: string;\n}\n\nexport const SelectHeader = ({ title, menuItems, menuTriggerLabel }: SelectHeaderProps) => {\n const uniqueId = useId();\n\n return (\n <SelectHeaderContainer align='center'>\n {title && (\n <Paragraph color='primary' weight='bold' size='md'>\n {title}\n </Paragraph>\n )}\n {menuItems && (\n <DropdownMenu\n portal={true}\n trigger={\n <IconButton>\n <MoreIcon />\n </IconButton>\n }\n triggerProps={{\n 'aria-label': menuTriggerLabel,\n id: `select-header-menu-trigger-${uniqueId}`,\n }}\n side='right'\n align='start'\n zIndex={Z_INDICES.layeredDropdown}\n contentProps={{\n // Fix for Radix UI 2.1.15 upgrade breaking changes:\n // 1. Portal rendering causes pointer-events issues preventing dropdown interaction\n // 2. Portal timing causes onFocusOutside to fire immediately, closing dropdown\n style: {\n pointerEvents: 'auto', // Ensure dropdown items receive mouse events\n },\n onFocusOutside: (event) => event.preventDefault(), // Prevent immediate portal closing\n }}\n >\n {menuItems}\n </DropdownMenu>\n )}\n </SelectHeaderContainer>\n );\n};\n\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n { portal = false, portalContainer, size = 'md', ...props }: SelectProps,\n forwardedRef,\n) {\n const {\n 'aria-label': ariaLabel,\n hasError,\n hasWarning,\n focused,\n active,\n hovered,\n disabled,\n placeholder,\n maxHeight,\n children,\n triggerProps,\n contentProps,\n id,\n className,\n onChange,\n onValueChange,\n value,\n width,\n header,\n footer,\n minWidth,\n valueContainerWidth,\n zIndex,\n } = props;\n\n const field = useFormField({ inputId: props.id, disabled, hasWarning, hasError });\n\n const content = (\n <SelectContent\n position='popper'\n side='bottom'\n sideOffset={8}\n $zIndex={zIndex}\n {...contentProps}\n >\n <SelectMenu maxHeight={maxHeight} size={size}>\n {header}\n <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n {footer && (\n <>\n <SelectFooter>{footer}</SelectFooter>\n </>\n )}\n </SelectMenu>\n </SelectContent>\n );\n\n return (\n <SelectPrimitive.Root\n {...props}\n onValueChange={(value) => {\n onChange?.({ target: { value } });\n onValueChange?.(value);\n }}\n // Custom behavior to consider null as empty value\n value={value === null ? '' : value} // eslint-disable-line @persona-id/eqeq-null-undefined\n >\n <SelectPrimitive.Trigger\n ref={forwardedRef}\n asChild\n id={id}\n className={className}\n disabled={field.disabled}\n aria-describedby={field.helperTextId}\n aria-errormessage={field.hasError ? field.helperTextId : undefined}\n aria-invalid={field.hasError}\n aria-label={ariaLabel}\n {...triggerProps}\n >\n <SelectButton\n hasWarning={field.hasWarning}\n hasError={field.hasError}\n hovered={hovered}\n focused={focused}\n active={active}\n disabled={field.disabled}\n placeholder={placeholder}\n isSelectingPlaceholder={props.value === '' || props.value == null}\n $minWidth={minWidth}\n $size={size}\n $width={width}\n >\n <SelectValueContainer width={valueContainerWidth}>\n <SelectPrimitive.Value placeholder={placeholder} />\n </SelectValueContainer>\n <StyledIconContainer disabled={disabled}>\n <CaretDownIcon />\n </StyledIconContainer>\n </SelectButton>\n </SelectPrimitive.Trigger>\n {portal ? (\n <SelectPrimitive.Portal container={portalContainer}>{content}</SelectPrimitive.Portal>\n ) : (\n content\n )}\n </SelectPrimitive.Root>\n );\n});\n\nexport default Select;\n\nexport const Option = forwardRef<HTMLDivElement, SelectPrimitive.SelectItemProps & MenuItemProps>(\n function Option({ children, subtitle, ...props }, forwardedRef) {\n return (\n <SelectPrimitive.Item {...props} ref={forwardedRef} asChild>\n <SelectItem {...props}>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n {subtitle && <OptionSubtitle>{subtitle}</OptionSubtitle>}\n </SelectItem>\n </SelectPrimitive.Item>\n );\n },\n);\n"],"mappings":"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"}

package/dist/Spinner-e725Rxkd.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Spinner-e725Rxkd.mjs","names":["LoaderIconMedium"],"sources":["../components/Spinner/Spinner.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { rotate } from '@persona/design-system/variables/keyframes';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Color } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { LoaderIcon as LoaderIconMedium } from '@persona/icons/24px';\n\nexport type SpinnerVariant = 'default' | 'inverse';\n\nconst SPINNER_COLOR: Record<SpinnerVariant, string> = {\n default: Color.BorderIconPrimary,\n inverse: Color.BorderIconInverse,\n};\n\ntype SpinnerSize = 'sm' | 'md';\n\ninterface SpinnerProps {\n /**\n * `default` uses {@link Color.BorderIconPrimary}; `inverse` uses {@link Color.BorderIconInverse}\n * (e.g. on dark backgrounds).\n */\n variant?: SpinnerVariant;\n /** Size of the spinner. Defaults to 'sm'. */\n size?: SpinnerSize;\n /** Screen reader text. Defaults to \"Loading...\". */\n srText?: string;\n className?: string;\n}\n\nconst Container = styled.span`\n line-height: 0;\n display: inline-block;\n`;\n\nconst VisuallyHidden = styled.span`\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n`;\n\nconst IconContainer = styled.span`\n display: inline-block;\n animation: ${rotate} ${TransitionDuration.OneSecond} linear infinite;\n`;\n\nexport const Spinner = ({ variant = 'default', size = 'sm', srText, className }: SpinnerProps) => {\n const resolvedColor = SPINNER_COLOR[variant];\n return (\n <Container role='status' aria-label='loading spinner' className={className}>\n <VisuallyHidden>{srText ?? 'Loading...'}</VisuallyHidden>\n <IconContainer>\n {size === 'sm' ? (\n <LoaderIcon color={resolvedColor} />\n ) : (\n <LoaderIconMedium color={resolvedColor} />\n )}\n </IconContainer>\n </Container>\n );\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;AAUA,MAAM,gBAAgD;CACpD,SAAS,MAAM;CACf,SAAS,MAAM;CAChB;AAiBD,MAAM,YAAY,OAAO,IAAI;;;;AAK7B,MAAM,iBAAiB,OAAO,IAAI;;;;;;;;AASlC,MAAM,gBAAgB,OAAO,IAAI;;eAElB,OAAO,GAAA,SAAgC;;AAGtD,MAAa,WAAW,EAAE,UAAU,WAAW,OAAO,MAAM,QAAQ,gBAA8B;CAChG,MAAM,gBAAgB,cAAc;AACpC,QACE,qBAAC,WAAD;EAAW,MAAK;EAAS,cAAW;EAA6B;YAAjE,CACE,oBAAC,gBAAD,EAAA,UAAiB,UAAU,cAA8B,CAAA,EACzD,oBAAC,eAAD,EAAA,UACG,SAAS,OACR,oBAAC,YAAD,EAAY,OAAO,eAAiB,CAAA,GAEpC,oBAACA,cAAD,EAAkB,OAAO,eAAiB,CAAA,EAE9B,CAAA,CACN"}

package/dist/Sticker-By3F8Aip.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Sticker-By3F8Aip.mjs","names":[],"sources":["../components/Sticker/Sticker.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons/12px';\nimport { IconButton } from 'design-system/components/Button';\nimport Stack from 'design-system/components/Stack';\nimport {\n isDisabled,\n isFocusedVisible,\n isHovered,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { Variant } from 'design-system/theme';\n// Define the options with labels\nexport const STICKER_COLOR_CONFIG = {\n white: 'White',\n blue: 'Blue',\n teal: 'Teal',\n green: 'Green',\n yellow: 'Yellow',\n orange: 'Orange',\n pink: 'Pink',\n red: 'Red',\n purple: 'Purple',\n darkGrey: 'Dark Grey',\n grey: 'Grey',\n} as const;\n\n// Derive the type from the object keys\nexport type LabelBackgrounds = keyof typeof STICKER_COLOR_CONFIG;\n\nexport interface StickerProps extends ComponentPropsWithoutRef<'div'> {\n variant?: LabelBackgrounds | Exclude<Variant, 'inverse'>;\n\n /**\n * Icon to render to the left of the Sticker. 12px icons recommended.\n */\n icon?: ReactNode;\n\n /**\n * Callback to call upon clicking \"x\" button. Non-null will render the button.\n */\n onDismiss?: MouseEventHandler;\n\n /**\n * Additional props to pass to the dismiss \"x\" button.\n */\n dismissButtonProps?: ComponentPropsWithoutRef<'button'>;\n\n /**\n * Renders disabled style for the entire Sticker and disables \"x\" button.\n */\n disabled?: boolean;\n\n /**\n * Shows a required asterisk (*) that won't be cut off when text is truncated.\n */\n isRequired?: boolean;\n\n /**\n * In some cases we render a sticker/badge on a secondary background, which needs an adjustment\n * for certain variants.\n */\n onSecondaryBackground?: boolean;\n}\n\nconst StickerIcon = styled('div')<Pick<StickerProps, 'variant'>>`\n color: ${({ theme, variant }) => {\n switch (variant) {\n case 'darkGrey':\n case 'red':\n return theme.color.text.inverse;\n default:\n return 'inherit';\n }\n }};\n line-height: 0;\n svg {\n width: 12px;\n height: 12px;\n }\n`;\n\nconst RequiredAsterisk = styled.span`\n color: ${Color.TextDanger};\n /* Ensure asterisk never gets hidden and takes minimal space */\n flex-shrink: 0;\n`;\n\nexport const StickerContainer = styled(Stack)`\n padding: 2px ${Spacing[1]};\n /* Ensure container can shrink for text truncation */\n min-width: 0;\n flex: 1;\n`;\n\nexport const StickerContentContainer = styled(StickerContainer)`\n ${paragraphMixins.sm}\n padding: 0;\n`;\n\nexport const StyledTruncatedText = styled(TruncatedText)`\n ${paragraphMixins.sm}\n flex: 1;\n min-width: 0;\n line-height: 1;\n transform: translateY(0.5px);\n`;\n\nconst DismissButton = styled(IconButton)<Pick<StickerProps, 'variant' | 'disabled'>>`\n /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n --background-color-behind-sticker: ${Color.PrimaryWhite};\n\n border: none;\n\n padding: 0 ${Spacing[1]};\n border-radius: ${BorderRadius.Sm};\n width: 1rem;\n\n height: 100%;\n\n display: inline-flex;\n align-items: center;\n\n svg {\n width: 12px;\n height: 12px;\n }\n color: ${({ theme, variant, disabled }) => {\n if (variant === 'red' || variant === 'darkGrey') {\n return theme.color.text.inverse;\n }\n return disabled ? 'inherit' : Color.BorderIconPrimary;\n }};\n\n &${isDisabled} {\n background-color: inherit !important;\n color: inherit !important;\n }\n\n &${isFocusedVisible}${isNotDisabled} {\n box-shadow: 0 0 0 1px var(--background-color-behind-sticker);\n }\n\n &${isHovered}${isNotDisabled} {\n cursor: pointer;\n\n background: ${({ variant }) => {\n if (variant === 'grey' || variant === 'basic') {\n return Color.BackgroundLabelGreyHover;\n } else if (variant === 'darkGrey') {\n return Color.BackgroundLabelDarkGreyHover;\n } else if (variant === 'purple') {\n return Color.BackgroundLabelPurpleHover;\n } else if (variant === 'red' || variant === 'danger') {\n return Color.BackgroundLabelDarkRedHover;\n } else if (variant === 'orange') {\n return Color.BackgroundLabelOrangeHover;\n } else if (variant === 'yellow' || variant === 'caution') {\n return Color.BackgroundLabelYellowHover;\n } else if (variant === 'green' || variant === 'success') {\n return Color.BackgroundLabelGreenHover;\n } else if (variant === 'teal') {\n return Color.BackgroundLabelTealHover;\n } else if (variant === 'blue') {\n return Color.BackgroundLabelBlueHover;\n } else if (variant === 'pink') {\n return Color.BackgroundLabelRedHover;\n } else if (variant === 'white') {\n return Color.BackgroundLabelWhiteHover;\n } else {\n return 'inherit';\n }\n }};\n }\n`;\n\nconst StyledSticker = styled('div')<\n StickerProps & { sizeIcon?: boolean; $onSecondaryBackground?: boolean }\n>`\n display: inline-flex;\n white-space: nowrap;\n\n border-radius: ${BorderRadius.Sm};\n height: 1rem;\n max-width: 100%;\n\n color: ${({ theme, variant, disabled }) => {\n if (disabled) {\n return variant === 'red' || variant === 'darkGrey'\n ? theme.color.text.inverse\n : theme.color.text.disabled;\n }\n switch (variant) {\n case 'darkGrey':\n case 'red':\n return theme.color.text.inverse;\n default:\n return theme.color.text.primary;\n }\n }};\n background: ${({ variant, disabled, $onSecondaryBackground }) => {\n if (disabled) {\n switch (variant) {\n case 'white':\n return Color.BackgroundLabelWhite;\n case 'blue':\n return Color.BackgroundLabelBlueDisabled;\n case 'teal':\n return Color.BackgroundLabelTealDisabled;\n case 'green':\n case 'success':\n return Color.BackgroundLabelGreenDisabled;\n case 'yellow':\n case 'caution':\n return Color.BackgroundLabelYellowDisabled;\n case 'orange':\n return Color.BackgroundLabelOrangeDisabled;\n case 'pink':\n case 'danger':\n return Color.BackgroundLabelRedDisabled;\n case 'red':\n return Color.BackgroundLabelDarkRedDisabled;\n case 'purple':\n case 'primary':\n return Color.BackgroundLabelPurpleDisabled;\n case 'darkGrey':\n return Color.BackgroundLabelDarkGreyDisabled;\n case 'basic':\n case 'grey':\n default:\n if ($onSecondaryBackground) {\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n return Color.CoreSlate100;\n }\n return Color.BackgroundLabelGreyDisabled;\n }\n }\n switch (variant) {\n case 'white':\n return Color.BackgroundLabelWhiteDisabled;\n case 'blue':\n return Color.BackgroundLabelBlue;\n case 'teal':\n return Color.BackgroundLabelTeal;\n case 'green':\n case 'success':\n return Color.BackgroundLabelGreen;\n case 'yellow':\n case 'caution':\n return Color.BackgroundLabelYellow;\n case 'orange':\n return Color.BackgroundLabelOrange;\n case 'pink':\n case 'danger':\n return Color.BackgroundLabelRed;\n case 'red':\n return Color.BackgroundLabelDarkRed;\n case 'purple':\n case 'primary':\n return Color.BackgroundLabelPurple;\n case 'darkGrey':\n return Color.BackgroundLabelDarkGrey;\n case 'basic':\n default:\n if ($onSecondaryBackground) {\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n return Color.CoreSlate200;\n }\n return Color.BackgroundLabelGrey;\n }\n }};\n`;\n\nexport const Sticker = ({\n variant,\n icon,\n children,\n onDismiss,\n disabled,\n dismissButtonProps,\n isRequired,\n onSecondaryBackground,\n ...props\n}: StickerProps) => {\n const hasContent = children != null;\n\n if (!hasContent) {\n const hasIcon = icon != null;\n if (!hasIcon) {\n console.warn('Sticker component requires content and/or an icon to render');\n return null;\n }\n\n if (hasIcon && !props['aria-label']) {\n console.warn('Sticker component requires an aria-label when only rendering an icon');\n }\n }\n\n return (\n <StyledSticker\n $onSecondaryBackground={onSecondaryBackground}\n variant={variant}\n disabled={disabled}\n sizeIcon={!!icon && !hasContent}\n {...props}\n >\n <StickerContainer direction='horizontal' align='center' spacing={Spacing[0]}>\n <StickerContentContainer direction='horizontal' align='center' spacing={Spacing[1]}>\n {icon && <StickerIcon variant={variant}>{icon}</StickerIcon>}\n {hasContent && <StyledTruncatedText>{children}</StyledTruncatedText>}\n </StickerContentContainer>\n {isRequired && <RequiredAsterisk>*</RequiredAsterisk>}\n </StickerContainer>\n\n {onDismiss && (\n <DismissButton\n variant={variant}\n disabled={disabled}\n id='sticker__dismiss-button'\n size='sm'\n onClick={onDismiss}\n aria-label='Remove'\n {...dismissButtonProps}\n >\n <XIcon />\n </DismissButton>\n )}\n </StyledSticker>\n );\n};\n\nexport default Sticker;\n"],"mappings":"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"}

package/dist/TabBar-CWF65Tv4.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"TabBar-CWF65Tv4.mjs","names":["TabBarContext","TabBarContext"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { mergeRefs } from '@react-aria/utils';\nimport {\n type ComponentPropsWithoutRef,\n type ForwardedRef,\n forwardRef,\n type KeyboardEventHandler,\n type ReactNode,\n useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n display: flex;\n height: ${Spacing[6]};\n position: relative;\n box-sizing: border-box;\n border-bottom: 1px solid ${Color.BorderDivider};\n justify-content: space-between;\n gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n align-self: center;\n`;\n\nconst TitleTab = styled.div`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n display: flex;\n gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n margin-bottom: -2px;\n padding-bottom: 2px;\n overflow: hidden;\n flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n children: ReactNode;\n /**\n * Truncate tab text to the specified number of characters.\n */\n maxTabChars?: number;\n /**\n * Size of the tabs. Affects font size.\n */\n size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n { children, maxTabChars, size, ...props },\n forwardedRef,\n) {\n const tabListRef = useRef<HTMLDivElement>(null);\n\n const getIndexOfCurrentTab = (list: Element[]) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return getIndex(list, document.activeElement);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const list = getTabList(tabListRef.current.children);\n\n if (document.activeElement && !list.includes(document.activeElement)) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft': {\n // Go to previous tab\n const curIndex = getIndexOfCurrentTab(list);\n const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n (list[nextIndex] as HTMLElement).focus();\n break;\n }\n case 'ArrowRight': {\n // Go to next tab\n const curIndex = getIndexOfCurrentTab(list);\n (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n break;\n }\n case 'Home': {\n // Go to first tab\n (list[0] as HTMLElement).focus();\n break;\n }\n case 'End': {\n // Go to last tab\n (list[list.length - 1] as HTMLElement).focus();\n break;\n }\n default:\n break;\n }\n };\n\n return (\n <TabBarContext.Provider value={{ maxTabChars, size }}>\n <StyledTabContainer\n role='tablist'\n ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n onKeyDown={handleKeyDown}\n $size={size}\n {...props}\n >\n {children}\n </StyledTabContainer>\n </TabBarContext.Provider>\n );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return Array.from(list).filter((e: HTMLElement) => {\n return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n actions?: ReactNode;\n title?: string;\n 'data-tour-target'?: string;\n /**\n * Truncate tab text to the specified number of characters.\n */\n maxTabChars?: number;\n /**\n * Size of the tabs. Affects font size.\n */\n size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n {\n children,\n actions,\n title,\n 'data-tour-target': dataTourTarget,\n maxTabChars,\n size,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...elemProps\n },\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <TabBarContainer {...elemProps}>\n <TabContainer\n ref={forwardedRef}\n maxTabChars={maxTabChars}\n size={size}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n {children}\n </TabContainer>\n {actions && <RightActions>{actions}</RightActions>}\n </TabBarContainer>\n );\n});\n\nexport default TabBar;\n","import {\n cloneElement,\n type ComponentPropsWithoutRef,\n type ElementType,\n type ReactElement,\n useContext,\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 Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/** A tab carries either a count or a label beside its text, never both. */\ntype TabAdornment =\n | { badge?: ReactElement; sticker?: never }\n | { badge?: never; sticker?: ReactElement };\n\ninterface TabBaseProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n typeof Button\n> {\n selected?: boolean;\n as?: T;\n size?: 'md' | 'sm';\n}\n\ntype TabProps<T extends ElementType = 'button'> = TabBaseProps<T> & TabAdornment;\n\nconst AdornmentContainer = styled.span`\n display: inline-flex;\n vertical-align: middle;\n /* Align the atomic badge with the label's cap midpoint, not its x-height midpoint. */\n transform: translateY(calc((1ex - 1cap) / 2));\n padding: 0;\n margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n NonNullable<TabBaseProps['size']>,\n FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n md: css`\n ${paragraphMixins.md}\n `,\n sm: css`\n ${paragraphMixins.sm}\n `,\n};\n\nconst tabSelectedStyle = css`\n color: ${({ theme }) => theme.color.primary.brand};\n border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n box-shadow: none;\n &:after {\n transition: border-bottom-color ${TransitionDuration.Fast};\n border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabBaseProps>({\n width: 'auto',\n variant: 'basic',\n})<TabBaseProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n white-space: nowrap;\n background-color: transparent;\n color: ${({ theme, disabled }) =>\n disabled ? theme.color.variants.basic.textDisabled : theme.color.text.tertiary};\n transition: color ${TransitionDuration.Fast} ease-out;\n height: 32px;\n margin: 0;\n padding: 0;\n ${({ size }) => sizeStyles[size || 'md']};\n outline: none;\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n a {\n color: currentColor;\n }\n\n /* remove default button focused/hovered box shadow */\n &${isActive}${isNotDisabled} {\n background-color: unset;\n }\n &${isHovered}${isNotDisabled} {\n background-color: unset;\n ${({ selected }) =>\n !selected &&\n css`\n color: ${Color.TextPrimary};\n `}\n }\n &${isFocused}${isNotDisabled} {\n box-shadow: none;\n background-color: unset;\n }\n &${isHovered}${isFocused}${isNotDisabled} {\n background-color: unset;\n }\n &:disabled {\n background-color: unset;\n }\n\n &:after {\n position: absolute;\n bottom: 0px;\n width: 100%;\n border-bottom: 1px solid transparent;\n content: '';\n }\n\n &.selected,\n &.active {\n ${tabSelectedStyle}\n }\n\n ${({ selected }) => selected && tabSelectedStyle}\n\n ${({ disabled }) =>\n disabled &&\n css`\n cursor: default;\n `}\n\n a& {\n text-decoration: none;\n }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n if (text.length <= maxCharacters) {\n return text;\n }\n return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n selected,\n disabled,\n children,\n badge,\n sticker,\n as,\n size,\n ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n const finalSize = size || contextSize || 'md';\n\n // Truncate text if maxTabChars is provided and children is a string\n const hasTruncation = maxTabChars && typeof children === 'string';\n const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n return (\n <StyledTab\n role='tab'\n selected={selected}\n aria-selected={selected}\n aria-disabled={disabled}\n disabled={disabled}\n as={as as ElementType}\n size={finalSize}\n title={hasTruncation ? children : undefined}\n {...elemProps}\n >\n {displayChildren}\n {badge && (\n <AdornmentContainer>\n {badge.type === Badge\n ? cloneElement(badge, {\n variant: selected ? 'active' : 'basic',\n onSecondaryBackground: true,\n })\n : badge}\n </AdornmentContainer>\n )}\n {sticker && <AdornmentContainer>{sticker}</AdornmentContainer>}\n </StyledTab>\n );\n};\n\nexport default Tab;\n","import styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport default styled(IconButton).attrs({\n size: 'sm',\n})`\n padding-left: ${Spacing[2]};\n padding-right: ${Spacing[2]};\n border-radius: ${BorderRadius.Sm};\n\n // remove default button focused/hovered box shadow\n &${isActive}${isNotDisabled} {\n background-color: transparent;\n }\n &${isHovered}${isNotDisabled} {\n box-shadow: none;\n }\n &${isFocused}${isNotDisabled} {\n box-shadow: none;\n }\n &${isHovered}${isFocused}${isNotDisabled} {\n box-shadow: none;\n }\n &:disabled {\n background-color: transparent;\n }\n &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n box-shadow: 0 0 0 3px ${({ theme }) => theme.color.variants.basic.highlight};\n }\n\n svg {\n color: ${Color.CoreSlate800};\n }\n\n &:hover {\n svg {\n color: ${Color.CoreSlate900};\n }\n }\n`;\n"],"mappings":"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"}

package/dist/Table-nWd5ZVbm.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Table-nWd5ZVbm.mjs","names":["slideKeyframes"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n size?: 'sm' | 'md';\n isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n display: table;\n width: 100%;\n border-spacing: 0;\n ${paragraphMixins.md};\n\n ${({ size }) =>\n size === 'sm' &&\n css`\n td,\n th {\n padding: ${Spacing[2]};\n }\n `}\n\n ${({ isLoading }) =>\n isLoading &&\n css`\n thead {\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n }\n }\n `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n size?: 'sm' | 'md';\n sortable?: boolean;\n width?: 'auto' | 'min' | 'max' | string;\n isSticky?: boolean;\n align?: 'left' | 'right';\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n display: table-cell;\n /* Self-contained box model: don't depend on a consumer's global\n border-box reset, so header padding + border are included in the\n declared width/height. */\n box-sizing: border-box;\n\n background-color: ${({ theme }) => theme.color.background.secondary};\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n text-align: left;\n white-space: nowrap;\n ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n line-height: 1;\n width: ${({ width }) => {\n switch (width) {\n case 'min':\n return '1px';\n case 'max':\n return '100%';\n default:\n if (width) {\n return width;\n } else {\n return 'auto';\n }\n }\n }};\n\n &:first-child {\n border-radius: ${({ theme }) =>\n `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n }\n\n &:last-child {\n border-radius: ${({ theme }) =>\n `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n }\n\n ${({ sortable }) =>\n sortable &&\n css`\n cursor: pointer;\n\n &:hover ${TableIconContainer} {\n display: inline;\n visibility: visible;\n }\n `};\n\n ${({ isSticky }) =>\n isSticky\n ? css`\n position: sticky;\n top: 0;\n z-index: 1;\n `\n : css`\n position: relative;\n `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n display: flex;\n align-items: center;\n gap: ${Spacing[1]};\n flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\ninterface TableIconContainerProps {\n sortDirection?: 'asc' | 'desc' | false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n display: inline-block;\n\n ${({ sortDirection }) => {\n if (sortDirection) {\n return css`\n display: inline;\n `;\n } else {\n return css`\n display: inline;\n visibility: hidden;\n color: ${({ theme }) => theme.color.text.disabled};\n `;\n }\n }};\n`;\n\nconst TableHeaderCell = forwardRef<\n HTMLTableCellElement,\n ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {\n let ariaSort: 'none' | 'ascending' | 'descending' | 'other' = 'none';\n\n if (sortable && sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n\n return (\n <StyledTableHeaderCell\n sortable={sortable}\n aria-sort={ariaSort}\n role='columnheader'\n {...elemProps}\n ref={ref}\n >\n <VerticalAlign $align={align}>\n {children}\n {sortable && (\n <TableIconContainer sortDirection={sortDirection}>\n {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n </TableIconContainer>\n )}\n </VerticalAlign>\n </StyledTableHeaderCell>\n );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n role: 'row',\n})<TableRowProps>`\n display: table-row;\n\n ${({ onClick }) =>\n onClick != null &&\n css`\n cursor: pointer;\n `}\n\n ${({ disableHoverBackground, theme }) =>\n !disableHoverBackground &&\n css`\n &${isHovered} {\n background-color: ${theme.color.background.highlight};\n transition-duration: ${TransitionDuration.Fast};\n }\n `}\n\n ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n height: 14px;\n margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n canSort?: boolean;\n isSorted?: boolean;\n isDescending?: boolean;\n isSticky?: boolean;\n /**\n * Display help icon and tooltip for column header\n */\n helpText?: ReactNode;\n align?: 'left' | 'right';\n size?: 'sm' | 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n ref,\n) {\n return (\n <TableHeaderCell\n sortable={canSort}\n sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n ref={ref}\n isSticky={isSticky}\n align={align}\n size={size}\n {...props}\n >\n {/* We have to wrap the children to make it easier to use tooltips */}\n <span className='th__text'>{children}</span>\n {helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n </TableHeaderCell>\n );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n breakWord?: boolean;\n size?: 'sm' | 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n display: table-cell;\n vertical-align: middle;\n /* Self-contained box model: don't depend on a consumer's global\n border-box reset, so a fixed cell height includes its padding + border\n and rows stay compact. */\n box-sizing: border-box;\n\n border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};\n text-align: left;\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n color: ${({ theme }) => theme.color.text.primary};\n white-space: nowrap;\n ${paragraphMixins.md};\n line-height: 1;\n ${({ breakWord }) =>\n breakWord\n ? `white-space: normal;\n overflow-wrap: break-word;`\n : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n return (\n <CellTitleContainer {...elemProps}>\n <CellTitle>{children}</CellTitle>\n {subtitle && <Paragraph>{subtitle}</Paragraph>}\n </CellTitleContainer>\n );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n white-space: normal;\n overflow-wrap: break-word;\n ${(props) =>\n props.unclickable &&\n css`\n cursor: default;\n `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n text-align: right;\n line-height: 0; /* To center icon; cannot use flex here */\n padding: 0;\n padding-left: ${Spacing[4]};\n width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n text-align: right;\n padding: 0;\n padding-right: ${Spacing[4]};\n width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n left?: number;\n hasRightBorder?: boolean;\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n background-color: ${({ theme }) => theme.color.background.primary};\n\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n left?: number;\n hasRightBorder?: boolean;\n size?: 'sm' | 'md';\n}>`\n position: sticky;\n left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n z-index: 2;\n max-width: 10%;\n background-color: ${({ theme }) => theme.color.background.secondary};\n ${({ hasRightBorder, theme }) =>\n hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n ${({ disableHoverBackground }) =>\n disableHoverBackground &&\n css`\n &:hover {\n background-color: transparent !important;\n }\n `}\n\n ${({ $isActive }) =>\n $isActive &&\n css`\n background-color: ${({ theme }) => theme.color.background.highlight};\n &:hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n `}\n\n ${({ onClick, disableHoverBackground, $isActive }) =>\n onClick != null &&\n !disableHoverBackground &&\n !$isActive &&\n css`\n cursor: pointer;\n :hover {\n background-color: ${({ theme }) => theme.color.background.highlight};\n }\n transition-duration: ${TransitionDuration.Fast};\n `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n display: table-header-group;\n ${({ sticky }) =>\n sticky &&\n css`\n position: sticky;\n top: 0;\n z-index: 1;\n `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableBody, TableHead, TableRow } from 'design-system/components/Table';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\n// `visible` rather than a narrower opt-out because CSS blockifies the other axis: any\n// `overflow-x` other than `visible`/`clip` forces `overflow-y` to compute to `auto` too, which\n// makes this element the scrollport that descendant sticky offsets resolve against.\nconst Container = styled.div<{ maxHeight?: number; $scrollsHorizontally: boolean }>`\n position: relative;\n z-index: 0;\n overflow-x: ${({ $scrollsHorizontally }) => ($scrollsHorizontally ? 'auto' : 'visible')};\n ${({ maxHeight }) => {\n if (maxHeight != null) {\n return `max-height: ${maxHeight}px;`;\n }\n }}\n `;\n\nconst slideKeyframes = keyframes`\n 0% {\n transform: translateX(-50%) scaleX(0);\n }\n 50% {\n transform: translateX(0) scaleX(1);\n }\n 100% {\n transform: translateX(50%) scaleX(0);\n }\n `;\n\nconst Loader = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};\n width: 100%;\n \n animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n `;\n\nconst Overlay = styled.div`\n position: absolute;\n z-index: ${Z_INDICES.loadingOverlays};\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ${({ theme }) => theme.color.primary.white};\n opacity: 50%;\n `;\n\nconst SpinnerWrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[5]} 0;\n animation: ${fadeIn} 1s;\n animation-delay: 0.5s;\n animation-fill-mode: backwards;\n `;\n\nconst TableSpinner = styled(Spinner)`\n svg {\n width: 120px;\n height: 120px;\n }\n \n path {\n stroke: ${Color.CorePurple500};\n stroke-width: 0.46;\n }\n `;\n\ninterface TableLayoutProps {\n className?: string;\n containerMaxHeight?: number;\n /**\n * When false, the container does not scroll horizontally and an ancestor is expected to.\n * Sticky offsets inside the table then resolve against that ancestor's scrollport rather\n * than against the container.\n */\n containerScrollsHorizontally?: boolean;\n dataTest?: string;\n headerTR: JSX.Element;\n isEmpty?: boolean;\n isLoading?: boolean;\n nullState: ReactNode;\n showHeader?: boolean;\n size?: 'sm' | 'md';\n stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n children,\n className,\n containerMaxHeight,\n containerScrollsHorizontally = true,\n dataTest,\n headerTR,\n isEmpty,\n isLoading,\n nullState,\n showHeader,\n size = 'md',\n stickyHeader = false,\n}) => {\n if (isEmpty && !showHeader) {\n if (isLoading) {\n return (\n <SpinnerWrapper\n role='status'\n aria-live='polite'\n aria-busy='true'\n aria-label='Loading...'\n data-loading-indicator='true'\n >\n <TableSpinner size='md' />\n </SpinnerWrapper>\n );\n } else {\n return (\n <Container data-test={dataTest} $scrollsHorizontally={containerScrollsHorizontally}>\n {nullState}\n </Container>\n );\n }\n }\n\n return (\n <Container\n data-test={dataTest}\n maxHeight={containerMaxHeight}\n className={className}\n $scrollsHorizontally={containerScrollsHorizontally}\n >\n {isLoading && <Loader data-test='table-layout__loader' />}\n {isLoading && <Overlay />}\n\n <Table size={size} aria-busy={isLoading || undefined}>\n <TableHead sticky={stickyHeader}>\n <TableRow>{headerTR}</TableRow>\n </TableHead>\n {!isEmpty && <TableBody>{children}</TableBody>}\n </Table>\n\n {isEmpty && nullState}\n </Container>\n );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}