npm - @persona/design-system - Versions diffs - 0.7.1 → 0.8.0 - Mend

@persona/design-system 0.7.1 → 0.8.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 (567) hide show

package/dist/FormControl-BEk4F1EV.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"FormControl-BEk4F1EV.mjs","names":[],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-label';\nimport { uniqueId } from 'lodash-es';\nimport {\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n isValidElement,\n type ReactNode,\n useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport useFormField, {\n FormControlContext,\n type FormControlContextProps,\n} from 'design-system/components/FormControl/useFormField';\nimport Tooltip, { TextWithDashedUnderline } from 'design-system/components/Tooltip';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\ntype LabelSizes = 'md' | 'sm';\n\ninterface StyledLabelProps {\n $size?: LabelSizes;\n}\n\nconst LabelBase = styled(Root)<StyledLabelProps>`\n ${({ $size }) => {\n switch ($size) {\n default:\n case 'md':\n return css`\n ${Typography.TextMedium};\n `;\n case 'sm':\n return css`\n ${Typography.TextSmall};\n `;\n }\n }}\n\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n`;\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<typeof Root> {\n tooltip?: ReactNode;\n size?: LabelSizes;\n side?: 'top' | 'right' | 'bottom' | 'left';\n labelTooltipZIndex?: number;\n}\n\nexport const FormLabel = ({\n tooltip,\n side,\n size,\n children,\n labelTooltipZIndex,\n ...props\n}: FormLabelProps) => {\n const field = useFormField({ labelId: props.id });\n const formGroup = useFormGroup();\n const labelProps = {\n id: field.labelId,\n htmlFor: field.inputId,\n ...props,\n };\n\n // Use labelTooltipZIndex from props, then from form group context\n const effectivelabelTooltipZIndex = labelTooltipZIndex ?? formGroup.labelTooltipZIndex;\n\n if (tooltip) {\n return (\n <Tooltip\n size={size}\n trigger={\n <LabelBase {...labelProps} $size={size}>\n <TextWithDashedUnderline>{children}</TextWithDashedUnderline>\n </LabelBase>\n }\n side={side}\n {...(effectivelabelTooltipZIndex != null && { zIndex: effectivelabelTooltipZIndex })}\n >\n {tooltip}\n </Tooltip>\n );\n }\n\n return (\n <LabelBase {...labelProps} $size={size}>\n {children}\n </LabelBase>\n );\n};\n\n/**\n * Used to target an input field within a FormControl.\n */\nexport const FormInputContainer = styled.div``;\n\nconst HelperTextBase = styled.div<ErrorProps>`\n ${Typography.TextSmall};\n line-height: 1;\n color: ${({ theme, hasWarning, hasError }) =>\n hasError\n ? semanticColor(theme, 'FgDanger1', theme.color.variants.danger.default)\n : hasWarning\n ? semanticColor(theme, 'FgWarning1', Color.CoreOrange900)\n : semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n`;\n\ninterface HelperTextProps extends ComponentPropsWithoutRef<'div'>, ErrorProps {}\n\nexport const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(\n function HelperText(props, ref) {\n const field = useFormField({ helperTextId: props.id });\n return (\n <HelperTextBase\n hasError={field.hasError}\n hasWarning={field.hasWarning}\n id={field.helperTextId}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nexport const ErrorText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n function ErrorText(props, ref) {\n const field = useFormField({ errorTextId: props.id });\n return <HelperTextBase hasError id={field.errorTextId} ref={ref} {...props} />;\n },\n);\n\nexport const WarningText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n function WarningText(props, ref) {\n const field = useFormField({ warningTextId: props.id });\n return <HelperTextBase hasWarning id={field.warningTextId} ref={ref} {...props} />;\n },\n);\n\nexport const Container = styled.div<{\n $configField?: boolean;\n $hasRightActions?: boolean;\n $configFieldInputWidth?: string;\n}>`\n display: flex;\n ${({ $configField, $hasRightActions, $configFieldInputWidth }) =>\n $configField\n ? $hasRightActions\n ? css`\n flex-direction: column;\n `\n : css`\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[4]};\n min-width: 288px;\n\n > ${FormInputContainer} {\n display: flex;\n flex-direction: row-reverse;\n width: ${$configFieldInputWidth ?? '50%'};\n min-width: 180px;\n }\n\n &:has(textarea) {\n flex-direction: column;\n align-items: flex-start;\n gap: ${Spacing[1]};\n\n > ${FormInputContainer} {\n width: 100%;\n }\n }\n `\n : css`\n flex-direction: column;\n margin-bottom: ${Spacing[3]};\n `}\n\n > *:not(:first-child) {\n margin-top: ${({ $configField, $hasRightActions }) =>\n $hasRightActions ? Spacing[1] : $configField ? Spacing[0] : Spacing[2]};\n }\n\n > ${HelperTextBase} {\n margin-top: ${Spacing[1]};\n }\n`;\n\nexport interface FormControlBaseProps extends ErrorProps {\n inputId?: string;\n disabled?: boolean;\n /**\n * Whether to render the form field as a config field.\n * This will remove the label and helper text.\n */\n configField?: boolean;\n /**\n * Whether the form field has right actions.\n */\n hasRightActions?: boolean;\n /**\n * Override the width of the form input container when `configField` is true.\n * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n * Defaults to `'50%'`.\n */\n configFieldInputWidth?: string;\n}\n\nexport interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlBaseProps {}\n\nexport const FormControl = forwardRef<HTMLDivElement, FormControlProps>(function FormControl(\n {\n children,\n hasError,\n hasWarning,\n inputId,\n disabled,\n configField,\n hasRightActions,\n configFieldInputWidth,\n ...props\n }: FormControlProps,\n ref,\n) {\n const generatedId = useMemo(() => uniqueId('pds_form_control__'), []);\n\n const initFormField: FormControlContextProps = {\n hasError,\n hasWarning,\n disabled,\n inputId: inputId ?? generatedId,\n configField,\n };\n\n Children.map(children, (child: ReactNode) => {\n if (isValidElement(child)) {\n switch (child.type) {\n case FormLabel: {\n initFormField.labelId = child.props.id ?? `${initFormField.inputId}-label`;\n break;\n }\n case HelperText: {\n initFormField.helperTextId = child.props.id ?? `${initFormField.inputId}-help-text`;\n break;\n }\n case ErrorText: {\n initFormField.errorTextId = child.props.id ?? `${initFormField.inputId}-error-text`;\n break;\n }\n case WarningText: {\n initFormField.warningTextId = child.props.id ?? `${initFormField.inputId}-warning-text`;\n break;\n }\n }\n }\n });\n\n const field = useFormField(initFormField);\n\n return (\n <FormControlContext.Provider value={field}>\n <Container\n ref={ref}\n $configField={field.configField}\n $hasRightActions={hasRightActions}\n $configFieldInputWidth={configFieldInputWidth}\n {...props}\n >\n {children}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default FormControl;\n"],"mappings":"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"}

package/dist/FormField-ByT0avVx.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"FormField-ByT0avVx.mjs","names":["Input","TextArea","DropdownMenu","DropdownMenu"],"sources":["../components/FormField/FormField.tsx","../components/FormField/inputFields.tsx","../components/FormField/CheckboxGroupField.tsx","../components/FormField/ListBoxField.tsx","../components/FormField/TableBoxField.tsx"],"sourcesContent":["import { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n ErrorText,\n type FormControlProps,\n FormInputContainer,\n FormLabel,\n HelperText,\n WarningText,\n} from 'design-system/components/FormControl';\nimport { HStack } from 'design-system/components/Stack';\n\nexport interface FormFieldBaseProps {\n /**\n * Renders `<Label>` above input\n */\n label?: ReactNode;\n\n /**\n * ID of the input element. Providing this will automatically link the label to the input.\n */\n inputId?: string;\n\n /**\n * Renders `<HelperText>` below input\n */\n helperText?: ReactNode;\n\n /**\n * Renders `<ErrorText>` below input and helper text.\n */\n errorText?: ReactNode;\n\n /**\n * Renders `<WarningText>` below input and helper text.\n */\n warningText?: ReactNode;\n\n /**\n * Should be an input of some sort\n */\n children?: ReactElement;\n\n labelProps?: ComponentPropsWithRef<typeof FormLabel>;\n helperProps?: ComponentPropsWithRef<typeof HelperText>;\n warningProps?: ComponentPropsWithRef<typeof WarningText>;\n errorProps?: ComponentPropsWithRef<typeof ErrorText>;\n\n /**\n * Whether to render the form field as a config field.\n * This will render the helper text as a tooltip.\n */\n configField?: boolean;\n\n /**\n * Override the width of the input area when `configField` is true.\n * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n * Defaults to `'50%'`.\n */\n configFieldInputWidth?: string;\n\n /**\n * Renders actions to the right of the label.\n */\n rightActions?: ReactNode;\n}\n\nexport interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}\n\n/**\n * Helper component with preset slots for label, input, and helper texts.\n *\n * Prefer a composed field component, such as `<TextField>`, `<SelectField>`, or\n * `<CheckboxField>`, when one is available for the input type. Use `<FormField>` directly\n * when composing a custom control or layout.\n *\n * ## Usage\n *\n * ```tsx\n * import FormField from 'design-system/components/FormField';\n * ```\n */\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n {\n label,\n children,\n helperText,\n warningText,\n errorText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField: configFieldProp,\n configFieldInputWidth,\n rightActions,\n ...props\n }: FormFieldProps,\n ref,\n) {\n const { configField: configFieldFormGroup } = useFormGroup();\n const configField = configFieldProp ?? configFieldFormGroup;\n\n const labelElement = label ? (\n <FormLabel tooltip={configField && helperText ? helperText : undefined} {...labelProps}>\n {label}\n </FormLabel>\n ) : null;\n\n return (\n <FormControl\n hasError={!!errorText}\n hasWarning={!!warningText}\n ref={ref}\n configField={configField}\n hasRightActions={!!rightActions}\n configFieldInputWidth={configFieldInputWidth}\n {...props}\n >\n {rightActions ? (\n <HStack justify='space-between' align='center'>\n {labelElement}\n <HStack spacing={Spacing[1]}>{rightActions}</HStack>\n </HStack>\n ) : (\n labelElement\n )}\n <FormInputContainer>{children}</FormInputContainer>\n {!configField && helperText && <HelperText {...helperProps}>{helperText}</HelperText>}\n {!configField && warningText && <WarningText {...warningProps}>{warningText}</WarningText>}\n {!configField && errorText && <ErrorText {...errorProps}>{errorText}</ErrorText>}\n </FormControl>\n );\n});\n\nexport default FormField;\n","import { uniqueId } from 'lodash-es';\nimport { forwardRef, useMemo } from 'react';\n\nimport Checkbox, { type CheckboxProps } from 'design-system/components/Checkbox';\nimport Combobox from 'design-system/components/Combobox';\nimport type { ComboboxMultiSelectProps } from 'design-system/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from 'design-system/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from 'design-system/components/FormField/FormField';\nimport Input, { type InputProps } from 'design-system/components/Input';\nimport RadioGroup, { type RadioGroupProps } from 'design-system/components/RadioGroup';\nimport SegmentedControl, {\n type SegmentedControlProps,\n} from 'design-system/components/SegmentedControl';\nimport Select, { type SelectProps } from 'design-system/components/Select';\nimport TextArea, { type TextAreaProps } from 'design-system/components/TextArea';\nimport Toggle, { type ToggleProps } from 'design-system/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n T,\n | 'label'\n | 'inputId'\n | 'helperText'\n | 'errorText'\n | 'warningText'\n | 'labelProps'\n | 'helperProps'\n | 'warningProps'\n | 'errorProps'\n | 'configField'\n | 'configFieldInputWidth'\n | 'rightActions'\n>;\ntype OmitFormFieldProps<T extends ImplementsFormField> = Omit<T, keyof ExtractFormFieldProps<T>>;\n\n/**\n * Helper to split out props that are sent to the FormField component from props sent\n * to the underlying input component.\n */\nexport const splitOutFormFieldProps = <T extends ImplementsFormField>(\n props: T,\n): {\n formFieldProps: ExtractFormFieldProps<T>;\n inputProps: OmitFormFieldProps<T>;\n} => {\n const {\n label,\n inputId,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField,\n configFieldInputWidth,\n rightActions,\n ...inputProps\n } = props;\n\n return {\n formFieldProps: {\n label,\n inputId,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField,\n configFieldInputWidth,\n rightActions,\n },\n inputProps,\n };\n};\n\nexport interface TextFieldProps extends ImplementsFormField, InputProps {}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n function TextField(props, ref) {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n const { id, ...rest } = inputProps;\n\n return (\n <FormField\n {...formFieldProps}\n labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n inputId={formFieldProps.inputId ?? id}\n >\n <Input {...rest} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface TextAreaFieldProps extends ImplementsFormField, TextAreaProps {}\n\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n function TextAreaField(props, ref) {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n const { id, ...rest } = inputProps;\n\n return (\n <FormField\n {...formFieldProps}\n labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n inputId={formFieldProps.inputId ?? id}\n >\n <TextArea {...rest} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface SelectFieldProps extends ImplementsFormField, SelectProps {}\n\nexport const SelectField = ({ id, children, ...props }: SelectFieldProps) => {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n const linkedId = useMemo(\n () => formFieldProps.inputId ?? id ?? uniqueId('pds-form-field-input-fields-select__'),\n [formFieldProps.inputId, id],\n );\n\n return (\n <FormField\n {...formFieldProps}\n inputId={linkedId}\n labelProps={{ htmlFor: linkedId, size: inputProps.size, ...formFieldProps.labelProps }}\n >\n <Select {...inputProps} id={linkedId}>\n {children}\n </Select>\n </FormField>\n );\n};\n\nexport interface RadioGroupFieldProps\n extends Omit<ImplementsFormField, 'configField'>, RadioGroupProps {}\n\nexport const RadioGroupField = ({\n label,\n helperText,\n errorText,\n warningText,\n children,\n ...props\n}: RadioGroupFieldProps) => {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n >\n <RadioGroup {...props}>{children}</RadioGroup>\n </FormField>\n );\n};\n\nexport interface CheckboxFieldProps extends ImplementsFormField, CheckboxProps {\n checkboxLabel?: CheckboxProps['label'];\n}\n\nexport const CheckboxField = ({\n label,\n helperText,\n errorText,\n warningText,\n checkboxLabel,\n configField,\n labelProps,\n ...props\n}: CheckboxFieldProps) => {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n labelProps={labelProps}\n >\n <Checkbox label={checkboxLabel} {...props} />\n </FormField>\n );\n};\n\nexport interface ToggleFieldProps extends ImplementsFormField, ToggleProps {}\n\nexport const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(\n function ToggleField(props, ref) {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n\n return (\n <FormField\n {...formFieldProps}\n labelProps={{ size: inputProps.size, ...formFieldProps.labelProps }}\n >\n <Toggle {...inputProps} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface SegmentedControlFieldProps\n extends ImplementsFormField, Omit<SegmentedControlProps, 'children'> {\n children?: SegmentedControlProps['children'];\n}\n\nexport const SegmentedControlField = forwardRef<HTMLDivElement, SegmentedControlFieldProps>(\n function SegmentedControlField(\n { label, helperText, errorText, warningText, configField, children, labelProps, ...props },\n ref,\n ) {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n labelProps={labelProps}\n >\n <SegmentedControl fullWidth {...props} ref={ref}>\n {children}\n </SegmentedControl>\n </FormField>\n );\n },\n);\n\nexport type ComboboxSingleSelectFieldProps<T = string> = ImplementsFormField &\n ComboboxSingleSelectProps<T>;\nexport type ComboboxMultiSelectFieldProps<T = string> = ImplementsFormField &\n ComboboxMultiSelectProps<T>;\n\nexport const ComboboxField = (\n props: ComboboxSingleSelectFieldProps | ComboboxMultiSelectFieldProps,\n) => {\n // `Combobox` registers its own id with the surrounding `FormControl`, which is what links the\n // label to it, so the field only forwards an explicit `inputId` when one is given. Each mode is\n // split separately: `multiple` discriminates the two, and a union split at once loses that.\n if (props.multiple) {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n\n return (\n <FormField {...formFieldProps}>\n <Combobox {...inputProps} />\n </FormField>\n );\n }\n\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n\n return (\n <FormField {...formFieldProps}>\n <Combobox {...inputProps} />\n </FormField>\n );\n};\n","import {\n Children,\n cloneElement,\n type ComponentPropsWithRef,\n createContext,\n type ReactElement,\n type ReactNode,\n useContext,\n useRef,\n} from 'react';\nimport {\n type AriaCheckboxGroupProps,\n mergeProps,\n useCheckboxGroup,\n useCheckboxGroupItem,\n} from 'react-aria';\nimport innerText from 'react-innertext';\nimport { type CheckboxGroupState, useCheckboxGroupState } from 'react-stately';\n\nimport type { CheckboxProps } from 'design-system/components/Checkbox';\nimport type Checkbox from 'design-system/components/Checkbox';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst CheckboxGroupContext = createContext<CheckboxGroupState>(null);\n\n/** Preserves the parent FormControl context (disabled, hasError, etc.) but clears\n * inputId so each Checkbox inside the group generates its own unique id. */\nconst ClearGroupInputId = ({ children }: { children: ReactNode }) => {\n const parentContext = useContext(FormControlContext);\n return (\n <FormControlContext.Provider value={{ ...parentContext, inputId: undefined }}>\n {children}\n </FormControlContext.Provider>\n );\n};\n\ninterface CheckboxGroupItemProps {\n children: ReactElement<ComponentPropsWithRef<typeof Checkbox>>;\n}\n\nconst CheckboxGroupItem = (props: CheckboxGroupItemProps) => {\n const { children } = props;\n const checkboxProps = children.props;\n\n const state = useContext(CheckboxGroupContext);\n const ref = useRef();\n const { inputProps } = useCheckboxGroupItem(\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n {\n ...checkboxProps,\n onChange: undefined,\n isDisabled: checkboxProps.disabled,\n isReadOnly: checkboxProps.readOnly,\n isRequired: checkboxProps.required,\n isIndeterminate: checkboxProps.indeterminate,\n value: String(children.props.value),\n 'aria-label': innerText(checkboxProps.label),\n },\n state,\n ref,\n );\n\n return cloneElement(\n children,\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n mergeProps(inputProps, {\n onChange: checkboxProps.onChange,\n disabled: state.isDisabled || checkboxProps.disabled,\n checked: state.isSelected(String(inputProps.value)),\n ref,\n } as ComponentPropsWithRef<typeof Checkbox>),\n );\n};\n\ninterface CheckboxGroupFieldProps\n extends\n Omit<ImplementsFormField, 'configField'>,\n Omit<\n AriaCheckboxGroupProps,\n 'description' | 'disabled' | 'isReadOnly' | 'isRequired' | 'errorMessage'\n > {\n children?: ReactElement<CheckboxProps>[];\n disabled?: boolean;\n readOnly?: boolean;\n required?: boolean;\n}\n\nconst CheckboxGroupField = ({\n children,\n name,\n onChange,\n disabled,\n readOnly,\n required,\n ...props\n}: CheckboxGroupFieldProps) => {\n const reactAriaProps = {\n ...props,\n description: props.helperText,\n errorMessage: props.errorText,\n onChange,\n name,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n };\n const state = useCheckboxGroupState(reactAriaProps);\n const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(\n reactAriaProps,\n state,\n );\n\n return (\n <FormField\n labelProps={labelProps}\n helperProps={descriptionProps}\n errorProps={errorMessageProps}\n disabled={disabled}\n {...groupProps}\n {...props}\n >\n <ClearGroupInputId>\n <CheckboxGroupContext.Provider value={state}>\n {Children.map(children, (checkbox) => (\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <CheckboxGroupItem>{checkbox}</CheckboxGroupItem>\n ))}\n </CheckboxGroupContext.Provider>\n </ClearGroupInputId>\n </FormField>\n );\n};\n\nexport default CheckboxGroupField;\n","import { type ReactNode, useState } from 'react';\n\nimport { MoreIcon, PlusIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from 'design-system/components/ListBox';\nimport type { MenuItemProps } from 'design-system/components/Menu';\n\ninterface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n label: string;\n onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;\n}\n\ninterface AddDropdownConfig {\n options: ({ label: ReactNode; value: string } & Omit<MenuItemProps, 'children'>)[];\n onSelection: (value: string) => void;\n}\n\ninterface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {\n actions?: ListBoxFieldAction[];\n addDropdownConfig?: AddDropdownConfig;\n /** Disables the add button, e.g. while the list is read-only. */\n addDisabled?: boolean;\n}\n\nconst ListBoxField = <T extends object>({\n label,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n errorProps,\n warningProps,\n inputId,\n onAdd,\n onDelete,\n deleteDisabled,\n configField: configFieldProp,\n size = 'md',\n actions = [],\n addDropdownConfig,\n addDisabled,\n selectedKeys: selectedKeysProp,\n onSelectionChange,\n defaultSelectedKeys,\n ...props\n}: ListBoxFieldProps<T>) => {\n const { configField } = useFormGroup({ configField: configFieldProp });\n const menuActions: ListBoxFieldAction[] = [...actions];\n const [selectedKeysState, setSelectedKeys] = useState(defaultSelectedKeys);\n const selectedKeys = selectedKeysProp ?? selectedKeysState;\n const effectiveSize = configField ? 'sm' : size;\n\n if (onDelete) {\n menuActions.unshift({\n label: 'Delete',\n onClick: () => onDelete(selectedKeys),\n disabled:\n deleteDisabled ||\n selectedKeys == null ||\n (typeof selectedKeys === 'object' && [...selectedKeys].length === 0),\n });\n }\n\n const addButton = (\n <IconButton size='sm' onClick={onAdd} aria-label='Add item to list' disabled={addDisabled}>\n <PlusIcon />\n </IconButton>\n );\n\n return (\n <FormField\n label={label}\n helperText={helperText}\n errorText={errorText}\n warningText={warningText}\n labelProps={labelProps}\n helperProps={helperProps}\n errorProps={errorProps}\n warningProps={warningProps}\n inputId={inputId}\n configField={configField}\n rightActions={\n configField && (\n <>\n {menuActions.length > 0 && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions' size='sm'>\n <MoreIcon />\n </IconButton>\n }\n portal\n >\n {menuActions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n onClick={() => action.onClick(selectedKeys)}\n size={effectiveSize}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n {onAdd && !addDropdownConfig && addButton}\n {addDropdownConfig && (\n <DropdownMenu trigger={addButton} align='start' portal>\n {addDropdownConfig.options.map((option) => (\n <DropdownMenu.Item\n key={option.value}\n {...option}\n onClick={() => addDropdownConfig.onSelection(option.value)}\n size={effectiveSize}\n >\n {option.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n </>\n )\n }\n >\n <ListBox\n id={inputId}\n fullWidth={configField}\n size={effectiveSize}\n deleteDisabled={deleteDisabled}\n // We have to control the keys so we can power the `rightActions`\n selectedKeys={selectedKeys}\n onSelectionChange={(keys) => {\n onSelectionChange?.(keys);\n setSelectedKeys(keys);\n }}\n {...props}\n />\n </FormField>\n );\n};\n\nexport default ListBoxField;\n","import { Fragment, type MouseEvent, type ReactNode, useState } from 'react';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport { useFormGroup } from '@persona/design-system/components/ConfigFormGroup';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport type { FormLabelProps } from '@persona/design-system/components/FormControl';\nimport type { MenuItemProps } from '@persona/design-system/components/Menu';\nimport TableBox, { type TableBoxProps } from '@persona/design-system/components/TableBox';\nimport { MoreIcon, PlusIcon } from '@persona/icons';\n\nimport FormField from './FormField';\nimport type { ImplementsFormField } from './inputFields';\n\nexport interface TableBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n label: string;\n onClick: (selectedKey: TableBoxProps['selectedKey']) => void;\n}\n\nexport interface TableBoxFieldActionGroup {\n type: 'group';\n heading: string;\n actions: TableBoxFieldAction[];\n}\n\nexport type TableBoxFieldActionEntry = TableBoxFieldAction | TableBoxFieldActionGroup;\n\n/** Aria-label on TableBoxField's + button. Consumers that style or detect that\n * button (e.g. popover toggle guards) should import this rather than redefining it. */\nexport const TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL = 'Add item to table';\n\nconst isActionGroup = (action: TableBoxFieldActionEntry): action is TableBoxFieldActionGroup =>\n 'type' in action && action.type === 'group';\n\ninterface AddDropdownConfig {\n options: Array<{ label: string; value: string }>;\n onSelection: (value: string) => void;\n}\n\ninterface TableBoxFieldProps<T extends object = object>\n extends ImplementsFormField, Omit<TableBoxProps<T>, 'aria-label' | 'onCreateNewRow'> {\n onAdd?: (e: MouseEvent<HTMLButtonElement>) => void;\n onDelete?: (selectedKey: string | null) => void;\n deleteDisabled?: boolean;\n /** Actions and labeled action groups rendered in order. Empty groups are omitted. */\n actions?: TableBoxFieldActionEntry[];\n addDropdownConfig?: AddDropdownConfig;\n\n /**\n * Callback to create a new row and add it to the rows array\n * Should return the id of the newly created row\n */\n createNewRow?: () => string;\n children?: ReactNode;\n}\n\nconst TableBoxField = <T extends object = object>({\n label,\n helperText,\n errorText,\n warningText,\n labelProps: labelPropsProp,\n helperProps,\n errorProps,\n warningProps,\n inputId,\n onAdd,\n onDelete,\n deleteDisabled,\n configField: configFieldProp = true,\n actions = [],\n addDropdownConfig,\n selectedKey: selectedKeyProp,\n onSelectionChange,\n defaultSelectedKey,\n selectionMode,\n disabled,\n createNewRow,\n children,\n emptyText = 'No data',\n ...props\n}: TableBoxFieldProps<T>) => {\n const { configField } = useFormGroup({ configField: configFieldProp });\n const menuActions: TableBoxFieldActionEntry[] = [...actions];\n const [selectedKeyState, setSelectedKey] = useState(defaultSelectedKey);\n const selectedKey = selectedKeyProp ?? selectedKeyState;\n const [newRowId, setNewRowId] = useState<string | null>(null);\n const labelProps: FormLabelProps = { size: 'sm', ...labelPropsProp };\n\n const handleCreateNewRow = () => {\n if (createNewRow) {\n setNewRowId(createNewRow());\n }\n };\n\n // Handle add button click\n const handleAddClick = (e: MouseEvent<HTMLButtonElement>) => {\n if (createNewRow) {\n handleCreateNewRow();\n } else if (onAdd) {\n onAdd(e);\n }\n };\n\n if (onDelete) {\n menuActions.unshift({\n label: 'Delete',\n onClick: () => selectedKey && onDelete(selectedKey),\n disabled: deleteDisabled || selectedKey == null,\n });\n }\n const visibleMenuActions = menuActions.filter(\n (action) => !isActionGroup(action) || action.actions.length > 0,\n );\n\n const addButton = (\n <IconButton\n size='sm'\n onClick={handleAddClick}\n aria-label={TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL}\n disabled={disabled}\n >\n <PlusIcon />\n </IconButton>\n );\n\n return (\n <FormField\n label={label}\n helperText={helperText}\n errorText={errorText}\n warningText={warningText}\n labelProps={labelProps}\n helperProps={helperProps}\n errorProps={errorProps}\n warningProps={warningProps}\n inputId={inputId}\n rightActions={\n configField && (\n <>\n {visibleMenuActions.length > 0 && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions' size='sm' disabled={disabled}>\n <MoreIcon />\n </IconButton>\n }\n portal\n >\n {visibleMenuActions.map((entry, entryIndex) => {\n const previousEntry = visibleMenuActions[entryIndex - 1];\n if (isActionGroup(entry)) {\n return (\n <Fragment key={`${entry.heading}-${entryIndex}`}>\n {entryIndex > 0 && <DropdownMenu.Divider />}\n <DropdownMenu.Heading size='sm'>{entry.heading}</DropdownMenu.Heading>\n {entry.actions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n disabled={disabled || action.disabled}\n onClick={() => action.onClick(selectedKey)}\n size='sm'\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </Fragment>\n );\n }\n\n return (\n <Fragment key={`${entry.label}-${entryIndex}`}>\n {previousEntry && isActionGroup(previousEntry) && <DropdownMenu.Divider />}\n <DropdownMenu.Item\n {...entry}\n disabled={disabled || entry.disabled}\n onClick={() => entry.onClick(selectedKey)}\n size='sm'\n >\n {entry.label}\n </DropdownMenu.Item>\n </Fragment>\n );\n })}\n </DropdownMenu>\n )}\n {(onAdd || createNewRow) && !addDropdownConfig && addButton}\n {addDropdownConfig && (\n <DropdownMenu trigger={addButton} portal>\n {addDropdownConfig.options.map((option) => (\n <DropdownMenu.Item\n key={option.value}\n {...option}\n onClick={() => addDropdownConfig.onSelection(option.value)}\n size='sm'\n >\n {option.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n </>\n )\n }\n >\n <TableBox\n aria-label={`${label} table`}\n // We have to control the keys so we can power the `rightActions`\n selectedKey={selectedKey}\n onSelectionChange={(key) => {\n onSelectionChange?.(key);\n setSelectedKey(key);\n }}\n selectionMode={selectionMode}\n newRowId={newRowId}\n onCreateNewRow={createNewRow ? handleCreateNewRow : undefined}\n emptyText={emptyText}\n disabled={disabled}\n {...props}\n >\n {children}\n </TableBox>\n </FormField>\n );\n};\n\n// Attach subcomponents to TableBoxField\nTableBoxField.Row = TableBox.Row;\nTableBoxField.Cell = TableBox.Cell;\n\nexport default TableBoxField;\n"],"mappings":"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"}

package/dist/Input-Bc2yWH3j.mjs.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/ListBox-CFBhILRy.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ListBox-CFBhILRy.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 { withAlpha } from 'design-system/lib/color';\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 {\n type MaybeSemanticTheme,\n semanticColor,\n semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { PersonaTheme } from 'design-system/theme';\n\nconst selectedHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n : theme.color.background.highlight;\n};\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: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n border-radius: ${BorderRadius.Md};\n border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', 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 }) => semanticColor(theme, 'BorderAccent', 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: ${({ theme }) => semanticColor(theme, 'FgSecondary', 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 ${({ theme }) => semanticColor(theme, 'SurfacePrimary', 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 }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfaceHover', Color.BackgroundSecondary)};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => semanticColor(theme, 'SurfaceHover', 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 }) => semanticColor(theme, 'FgAccent', theme.color.text.brand)};\n background-color: ${({ theme }) => selectedHighlight(theme)};\n\n ${RowActionsContainer} {\n opacity: 1;\n background: linear-gradient(\n to right,\n transparent,\n ${({ theme }) => selectedHighlight(theme)} ${BackgroundFadeWidth}px\n );\n }\n }\n\n &[data-dragging] {\n opacity: 0.5;\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', 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 ${({ theme }) => semanticColor(theme, 'BorderDivider', 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 ${({ theme }) => semanticColor(theme, 'BorderDivider', 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 { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\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: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n\n ${LogicRowSticker} {\n background-color: ${({ theme }) =>\n semanticColor(theme, 'FeedbackAccent2', Color.BackgroundLabelPurple)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\n }\n }\n\n &[data-hovered]:not([data-selected]) {\n ${LogicRowSticker} {\n background-color: ${({ theme }) =>\n semanticColor(theme, 'FeedbackNeutral2Static', Color.BackgroundLabelGreyHover)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\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-Dizk2sZu.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"LoadingShimmer-Dizk2sZu.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 { CssColor } from 'design-system/lib/color';\nimport { type MaybeSemanticTheme, semanticColor } from 'design-system/lib/semanticColor';\nimport type { HeadingSize, ParagraphSize } from 'design-system/mixins/text';\n\n// A one-off colour predating the token set; no primitive matches it exactly.\n// oxlint-disable-next-line persona-web/no-raw-hex-colors\nconst LEGACY_SECONDARY_BAR = '#eaeaea' as CssColor;\n\n// Relay renders this under its own theme, which has neither a semantic namespace nor `theme.color`,\n// so each fallback is a constant rather than a theme expression — the latter would throw there.\nconst shimmerColors = (theme: MaybeSemanticTheme, variant: 'primary' | 'secondary') =>\n variant === 'secondary'\n ? {\n bar: semanticColor(theme, 'FeedbackNeutral2', LEGACY_SECONDARY_BAR),\n highlight: semanticColor(theme, 'FeedbackNeutral1', Color.CoreSlate50),\n }\n : {\n bar: semanticColor(theme, 'FeedbackNeutral1', Color.CoreSlate50),\n highlight: semanticColor(theme, 'SurfaceSecondary', Color.CoreSlate25),\n };\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 background-color: ${({ theme, $variant }) => shimmerColors(theme, $variant).bar};\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: ${({ theme, $variant }) =>\n `linear-gradient(90deg, transparent 0%, ${shimmerColors(theme, $variant).highlight} 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":";;;;;;AAWA,MAAM,uBAAuB;AAI7B,MAAM,iBAAiB,OAA2B,YAChD,YAAY,cACR;CACE,KAAK,cAAc,OAAO,oBAAoB,qBAAqB;CACnE,WAAW,cAAc,OAAO,oBAAoB,MAAM,YAAY;CACvE,GACD;CACE,KAAK,cAAc,OAAO,oBAAoB,MAAM,YAAY;CAChE,WAAW,cAAc,OAAO,oBAAoB,MAAM,YAAY;CACvE;AAaP,MAAM,mBAAmB,OAAO,IAA2B;;;uBAGpC,EAAE,OAAO,eAAe,cAAc,OAAO,SAAS,CAAC,IAAI;YACtE,EAAE,YAAY,SAAS,QAAQ;aAC9B,EAAE,aAAa,UAAU,OAAO;mBAC1B,aAAa,GAAG;;;AAOnC,MAAM,UAAU,OAAO,OAAO,KAAK;;;;iBAIlB,EAAE,OAAO,eACtB,0CAA0C,cAAc,OAAO,SAAS,CAAC,UAAU,yBAAyB;;;;;;AAOhH,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/Popover-opVa9Xhc.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Popover-opVa9Xhc.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';\nimport { semanticOnly } from 'design-system/lib/semanticColor';\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 PopoverPanel = styled(Card)`\n ${semanticOnly((tokens) => `background-color: ${tokens.SurfaceElevated};`)}\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 <PopoverPanel 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 </PopoverPanel>\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":";;;;;;;;;AAUA,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,eAAe,OAAOA,aAAK;IAC7B,cAAc,WAAW,qBAAqB,OAAO,gBAAgB,GAAG,CAAC;;AAG7E,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,qBAAC,cAAD;GAAc,UAAA;aAAd,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;MAED;;EACM,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/SegmentedControl-OHrfJiw0.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"SegmentedControl-OHrfJiw0.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 { semanticColor } from 'design-system/lib/semanticColor';\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 }) =>\n semanticColor(theme, 'SurfaceInset', 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 }) => semanticColor(theme, 'FgSecondary', 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 }) => semanticColor(theme, 'ActionNeutralHover', theme.color.variants.basic.hover)};\n }\n\n /* Selected state */\n &[data-selected] {\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.primary.white)};\n box-shadow: inset 0 0 0 1px ${({ theme }) => semanticColor(theme, 'BorderDefault', theme.color.border.input)};\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', 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":";;;;;;;;;AASA,MAAM,8BAA8B,cAA2B,KAAK;AAqDpE,MAAM,yBAAyB,OAAO,kBAAkB;;uBAEjC,EAAE,YACrB,cAAc,OAAO,gBAAgB,MAAM,MAAM,SAAS,MAAM,QAAQ,CAAC;;;YAGjE,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,cAAc,OAAO,eAAe,MAAM,MAAM,KAAK,UAAU,CAAC;;;;;;;;gBAQ1E,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,MAAM,SAAS,MAAM,MAAM,CAAC;;;;;yBAK3F,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,QAAQ,MAAM,CAAC;mCACtE,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,MAAM,CAAC;cACnG,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ,CAAC;;;;;;;;;;;;;;;;;AA4BxF,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-DE7uv9C8.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Select-DE7uv9C8.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 { semanticColor } from 'design-system/lib/semanticColor';\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: ${semanticColor(theme, 'FgSecondary', 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 }) => semanticColor(theme, 'FgSecondary', 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 ${({ theme }) => semanticColor(theme, 'BorderSubtle', 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 ${({ theme, disabled }) => css`\n color: ${\n disabled\n ? semanticColor(theme, 'FgDisabled', Color.BorderIconDisabled)\n : semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary)\n };\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}\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/Sticker-C3Eb13OQ.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Sticker-C3Eb13OQ.mjs","names":[],"sources":["../components/Sticker/tone.ts","../components/Sticker/Sticker.tsx"],"sourcesContent":["import type { Color } from '@persona/design-tokens';\nimport { type PdsColor, withAlpha } from 'design-system/lib/color';\nimport type { SemanticTokens } from 'design-system/variables/semantic';\n\nimport type { StickerProps } from './Sticker';\n\nexport interface StickerTone {\n background: Color;\n backgroundHover: Color;\n color: Color;\n colorHover: Color;\n colorDisabled: PdsColor;\n}\n\nconst buildSemanticStickerTone = (\n t: SemanticTokens,\n variant: StickerProps['variant'],\n onSecondaryBackground: boolean,\n): StickerTone => {\n switch (variant) {\n case 'white':\n return {\n background: t.FeedbackNeutralInverse,\n backgroundHover: t.FeedbackNeutral1,\n color: t.FgPrimary,\n colorHover: t.FgPrimary,\n colorDisabled: t.FgDisabled,\n };\n case 'blue':\n return {\n background: t.FeedbackInfo2,\n backgroundHover: t.FeedbackInfo3,\n color: t.FgPrimaryStatic,\n colorHover: t.FgPrimaryStatic,\n colorDisabled: t.FgDisabled,\n };\n case 'teal':\n return {\n background: t.FeedbackMisc1,\n backgroundHover: t.FeedbackMisc2,\n color: t.FgPrimaryStatic,\n colorHover: t.FgPrimaryStatic,\n colorDisabled: t.FgDisabled,\n };\n case 'green':\n case 'success':\n return {\n background: t.FeedbackSuccess2,\n backgroundHover: t.FeedbackSuccess3,\n color: t.FgPrimaryStatic,\n colorHover: t.FgPrimaryStatic,\n colorDisabled: t.FgDisabled,\n };\n case 'yellow':\n case 'caution':\n return {\n background: t.FeedbackHighlight1,\n backgroundHover: t.FeedbackHighlight2,\n color: t.FgPrimaryStatic,\n colorHover: t.FgPrimaryStatic,\n colorDisabled: t.FgDisabled,\n };\n case 'orange':\n return {\n background: t.FeedbackWarning2,\n backgroundHover: t.FeedbackWarning3,\n color: t.FgPrimaryStatic,\n colorHover: t.FgPrimaryStatic,\n colorDisabled: t.FgDisabled,\n };\n case 'pink':\n case 'danger':\n return {\n background: t.FeedbackDanger2,\n backgroundHover: t.FeedbackDanger3,\n color: t.FgPrimaryStatic,\n colorHover: t.FgPrimaryStatic,\n colorDisabled: t.FgDisabled,\n };\n case 'red':\n return {\n background: t.FeedbackDanger3,\n backgroundHover: t.FeedbackDanger4,\n color: t.FgInverse,\n colorHover: t.FgInverseStatic,\n colorDisabled: withAlpha(t.FgInverseStatic, t.Opacity65),\n };\n case 'purple':\n case 'primary':\n return {\n background: t.FeedbackAccent2,\n backgroundHover: t.FeedbackAccent3,\n color: t.FgPrimaryStatic,\n colorHover: t.FgInverseStatic,\n colorDisabled: t.FgDisabled,\n };\n case 'darkGrey':\n return {\n background: t.FeedbackNeutral4,\n backgroundHover: t.FeedbackNeutral5,\n color: t.FgInverseStatic,\n colorHover: t.FgInverseStatic,\n colorDisabled: withAlpha(t.FgInverseStatic, t.Opacity65),\n };\n default:\n return {\n background: onSecondaryBackground ? t.FeedbackNeutral2Static : t.FeedbackNeutral1,\n backgroundHover: t.FeedbackNeutral3,\n color: t.FgPrimary,\n colorHover: t.FgPrimary,\n colorDisabled: t.FgDisabled,\n };\n }\n};\n\nconst semanticStickerToneCache = new WeakMap<SemanticTokens, Map<string, StickerTone>>();\n\nexport const semanticStickerTone = (\n t: SemanticTokens,\n variant: StickerProps['variant'],\n onSecondaryBackground = false,\n): StickerTone => {\n let tones = semanticStickerToneCache.get(t);\n if (!tones) {\n tones = new Map();\n semanticStickerToneCache.set(t, tones);\n }\n\n const key = `${variant ?? ''}:${onSecondaryBackground ? 'secondary' : 'default'}`;\n let tone = tones.get(key);\n if (!tone) {\n tone = buildSemanticStickerTone(t, variant, onSecondaryBackground);\n tones.set(key, tone);\n }\n return tone;\n};\n","import type { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';\nimport styled, { css } 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 { withAlpha } from 'design-system/lib/color';\nimport {\n isDisabled,\n isFocusedVisible,\n isHovered,\n isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { Variant } from 'design-system/theme';\n\nimport { semanticStickerTone } from './tone';\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' | 'disabled'>>`\n color: ${({ theme, variant, disabled }) => {\n const tokens = semanticTokens(theme);\n if (tokens) {\n const tone = semanticStickerTone(tokens, variant);\n return disabled ? tone.colorDisabled : tone.color;\n }\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<Pick<StickerProps, 'variant' | 'disabled'>>`\n color: ${({ theme, variant, disabled }) => {\n const tokens = semanticTokens(theme);\n return disabled && tokens\n ? semanticStickerTone(tokens, variant).colorDisabled\n : semanticColor(theme, 'FgDanger1', Color.TextDanger);\n }};\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: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', 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 const tokens = semanticTokens(theme);\n if (tokens) {\n const tone = semanticStickerTone(tokens, variant);\n return disabled ? tone.colorDisabled : tone.color;\n }\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: ${({ theme, variant }) => {\n const tokens = semanticTokens(theme);\n return tokens ? semanticStickerTone(tokens, variant).colorDisabled : 'inherit';\n }} !important;\n\n svg,\n svg path {\n color: inherit !important;\n }\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 ${({ theme, variant }) =>\n semanticOnly(\n (tokens) => css`\n color: ${semanticStickerTone(tokens, variant).colorHover};\n `,\n )({ theme })}\n background: ${({ theme, variant }) => {\n const tokens = semanticTokens(theme);\n if (tokens) {\n return semanticStickerTone(tokens, variant).backgroundHover;\n }\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, $onSecondaryBackground }) => {\n const tokens = semanticTokens(theme);\n if (tokens) {\n const tone = semanticStickerTone(tokens, variant, $onSecondaryBackground);\n return disabled ? tone.colorDisabled : tone.color;\n }\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: ${({ theme, variant, disabled, $onSecondaryBackground }) => {\n const tokens = semanticTokens(theme);\n if (tokens) {\n const background = semanticStickerTone(tokens, variant, $onSecondaryBackground).background;\n return disabled ? withAlpha(background, tokens.Opacity65) : background;\n }\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 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 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 && (\n <StickerIcon variant={variant} disabled={disabled}>\n {icon}\n </StickerIcon>\n )}\n {hasContent && <StyledTruncatedText>{children}</StyledTruncatedText>}\n </StickerContentContainer>\n {isRequired && (\n <RequiredAsterisk variant={variant} disabled={disabled}>\n *\n </RequiredAsterisk>\n )}\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/Table-B1gRr2XT.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Table-B1gRr2XT.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 { semanticColor } from 'design-system/lib/semanticColor';\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 }) => semanticColor(theme, 'FeedbackAccent3', 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, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\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 trailing?: ReactNode;\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 }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\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 ${SortButton}:focus-visible ${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\nconst SortButton = styled.button`\n background: none;\n border: 0;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: ${Spacing[1]};\n min-width: 0;\n ${focusOutline}\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 }) => semanticColor(theme, 'FgTertiary', theme.color.text.disabled)};\n `;\n }\n }};\n`;\n\nconst TableHeaderCell = forwardRef<\n HTMLTableCellElement,\n ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell(\n { sortable, sortDirection, children, align, trailing, onClick, ...elemProps },\n ref,\n) {\n let ariaSort: 'none' | 'ascending' | 'descending' | undefined;\n\n if (sortable && sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n } else if (sortable) {\n ariaSort = 'none';\n }\n\n return (\n <StyledTableHeaderCell\n sortable={sortable}\n aria-sort={ariaSort}\n onClick={sortable ? undefined : onClick}\n {...elemProps}\n ref={ref}\n >\n <VerticalAlign $align={align}>\n {sortable ? (\n <SortButton type='button' onClick={onClick}>\n {children}\n <TableIconContainer aria-hidden='true' sortDirection={sortDirection}>\n {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n </TableIconContainer>\n </SortButton>\n ) : (\n children\n )}\n {trailing}\n </VerticalAlign>\n </StyledTableHeaderCell>\n );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { withAlpha } from 'design-system/lib/color';\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport { semanticTokens } from 'design-system/lib/semanticColor';\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 if (disableHoverBackground) {\n return null;\n }\n const tokens = semanticTokens(theme);\n return css`\n &${isHovered} {\n background-color: ${\n tokens\n ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n : theme.color.background.highlight\n };\n ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n transition-duration: ${TransitionDuration.Fast};\n }\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 trailing={helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\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 </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 { withAlpha } from 'design-system/lib/color';\nimport {\n type MaybeSemanticTheme,\n semanticColor,\n semanticOnly,\n semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { PersonaTheme } from 'design-system/theme';\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 }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n text-align: left;\n padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', 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 ${semanticOnly(() => 'color: inherit;')}\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n`;\n\nconst CellSubtitle = styled(Paragraph)`\n ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst activeHighlight = (theme: PersonaTheme & MaybeSemanticTheme) =>\n semanticColor(theme, 'ActionAccent', theme.color.background.highlight);\n\nconst hoverHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n const tokens = semanticTokens(theme);\n return tokens\n ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n : theme.color.background.highlight;\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 && <CellSubtitle>{subtitle}</CellSubtitle>}\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 }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n\n ${({ hasRightBorder, theme }) =>\n hasRightBorder &&\n `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', 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 }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n ${({ hasRightBorder, theme }) =>\n hasRightBorder &&\n `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', 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 }) => activeHighlight(theme)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n &:hover {\n background-color: ${({ theme }) => activeHighlight(theme)};\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 }) => hoverHighlight(theme)};\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\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 { semanticColor } from 'design-system/lib/semanticColor';\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 }) => semanticColor(theme, 'BorderAccent', 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 }) => semanticColor(theme, 'SurfacePrimary', 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: ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', 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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"}