@persona/design-system 0.10.5 → 0.10.6

package/dist/FormField-BStxmlZT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField-BStxmlZT.mjs","names":["Input","TextArea","DropdownMenu","DropdownMenu"],"sources":["../src/components/FormField/FormField.tsx","../src/components/FormField/inputFields.tsx","../src/components/FormField/CheckboxGroupField.tsx","../src/components/FormField/ListBoxField.tsx","../src/components/FormField/TableBoxField.tsx"],"sourcesContent":["import { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport useFormGroup from '#src/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n  ErrorText,\n  type FormControlProps,\n  FormInputContainer,\n  FormLabel,\n  HelperText,\n  WarningText,\n} from '#src/components/FormControl';\nimport { HStack } from '#src/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  /** Marks the field as required. The label renders an asterisk; composed fields also forward `required` to their input. */\n  required?: boolean;\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 '@persona/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 '#src/components/Checkbox';\nimport Combobox from '#src/components/Combobox';\nimport type { ComboboxMultiSelectProps } from '#src/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from '#src/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from '#src/components/FormField/FormField';\nimport Input, { type InputProps } from '#src/components/Input';\nimport RadioGroup, { type RadioGroupProps } from '#src/components/RadioGroup';\nimport SegmentedControl, { type SegmentedControlProps } from '#src/components/SegmentedControl';\nimport Select, { type SelectProps } from '#src/components/Select';\nimport TextArea, { type TextAreaProps } from '#src/components/TextArea';\nimport Toggle, { type ToggleProps } from '#src/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n  T,\n  | 'label'\n  | 'inputId'\n  | 'required'\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<\n  T,\n  Exclude<keyof ExtractFormFieldProps<T>, 'required'>\n>;\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      required: props.required,\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  required,\n  children,\n  ...props\n}: RadioGroupFieldProps) => {\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      required={required}\n    >\n      <RadioGroup {...props} aria-required={required}>\n        {children}\n      </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  required,\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      required={required}\n    >\n      <Checkbox label={checkboxLabel} required={required} {...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    {\n      label,\n      helperText,\n      errorText,\n      warningText,\n      configField,\n      required,\n      children,\n      labelProps,\n      ...props\n    },\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        required={required}\n      >\n        <SegmentedControl fullWidth {...props} aria-required={required} 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 '#src/components/Checkbox';\nimport type Checkbox from '#src/components/Checkbox';\nimport { FormControlContext } from '#src/components/FormControl/useFormField';\nimport FormField from '#src/components/FormField/FormField';\nimport type { ImplementsFormField } from '#src/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      required={required}\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';\n\nimport { IconButton } from '#src/components/Button';\nimport useFormGroup from '#src/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport FormField from '#src/components/FormField/FormField';\nimport type { ImplementsFormField } from '#src/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from '#src/components/ListBox';\nimport type { MenuItemProps } from '#src/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  required,\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      required={required}\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  required,\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      required={required}\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/{FormField-PBo1ctY8.d.mts → FormField-D10LW9-a.d.mts}

@@ -61,10 +61,10 @@ interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBa
  * ## Usage
  *
  * ```tsx
- * import FormField from 'design-system/components/FormField';
+ * import FormField from '@persona/design-system/components/FormField';
  * ```
  */
 declare const FormField: _$react.ForwardRefExoticComponent<FormFieldProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { FormFieldBaseProps as n, FormFieldProps as r, FormField as t };
-//# sourceMappingURL=FormField-PBo1ctY8.d.mts.map
+//# sourceMappingURL=FormField-D10LW9-a.d.mts.map

package/dist/FormField.d.mts

@@ -1,2 +1,2 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-PBo1ctY8.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-D10LW9-a.mjs";
 export { FormField, FormField as default, FormFieldBaseProps, FormFieldProps };

package/dist/HoverCopyableField-CW7Jxmni.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCopyableField-CW7Jxmni.mjs","names":["Card","Popover"],"sources":["../src/components/HoverCopyableField/HoverCopyableField.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport Card from 'design-system/components/Card';\nimport Popover from 'design-system/components/Popover';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type CopySuccessDetail = {\n  text: string;\n  clientX: number;\n  clientY: number;\n};\n\nexport type HoverCopyableFieldProps = {\n  copyValue: string | undefined;\n  confirmationText?: string;\n  /**\n   * Called after a successful clipboard write. When provided, the Copied\n   * popover is skipped so the host can own post-copy UX.\n   */\n  onCopySuccess?: (detail: CopySuccessDetail) => void;\n  children: ReactNode;\n};\n\nconst copyToClipboard = async (text: string): Promise<boolean> => {\n  try {\n    if ('clipboard' in navigator) {\n      await navigator.clipboard.writeText(text);\n      return true;\n    } else {\n      return document.execCommand('copy', true, text);\n    }\n  } catch {\n    return false;\n  }\n};\n\nconst clickOrigin = (e: MouseEvent<HTMLButtonElement>): { clientX: number; clientY: number } => {\n  const rect = e.currentTarget.getBoundingClientRect();\n  const hasPointer = e.clientX !== 0 || e.clientY !== 0;\n  return {\n    clientX: hasPointer ? e.clientX : rect.left + rect.width / 2,\n    clientY: rect.top,\n  };\n};\n\nconst CopyableFieldContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n`;\n\nconst CopyButton = styled(Button).attrs(() => ({\n  type: 'button',\n  variant: 'inverse',\n  width: 'icon',\n}))<{ isActive: boolean }>`\n  height: ${Spacing[5]};\n  width: ${Spacing[5]};\n  visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\nconst StyledCard = styled(Card)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  padding: 6px;\n  margin: 0;\n`;\n\nconst HoverCopyableField = ({\n  copyValue,\n  confirmationText = 'Copied',\n  onCopySuccess,\n  children,\n}: HoverCopyableFieldProps) => {\n  const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);\n  const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] =\n    useToggle(false);\n\n  const copyTextToClipboard = async (origin: { clientX: number; clientY: number }) => {\n    if (copyValue == null) {\n      return;\n    }\n    const copyWasSuccessful = await copyToClipboard(copyValue);\n    if (!copyWasSuccessful) {\n      return;\n    }\n    if (onCopySuccess) {\n      onCopySuccess({ text: copyValue, ...origin });\n      hideCopyButton();\n      return;\n    }\n    showConfirmation();\n    setTimeout(() => {\n      hideCopyButton();\n      hideConfirmation();\n    }, 1200);\n  };\n\n  const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    void copyTextToClipboard(clickOrigin(e));\n  };\n\n  return copyValue != null && copyValue.trim().length > 0 ? (\n    <CopyableFieldContainer onMouseEnter={showCopyButton} onMouseLeave={hideCopyButton}>\n      {children}\n      <Popover open={confirmationActive}>\n        <Popover.Anchor asChild>\n          <CopyButton\n            id='hover-copyable-field__copy-button'\n            isActive={copyButtonActive || confirmationActive}\n            onClick={copyField}\n          >\n            <CopyIcon width={16} height={16} />\n          </CopyButton>\n        </Popover.Anchor>\n        <Popover.Content side='top' align='center' style={{ zIndex: 2 }}>\n          <StyledCard elevated>\n            <Paragraph>{confirmationText}</Paragraph>\n          </StyledCard>\n        </Popover.Content>\n      </Popover>\n    </CopyableFieldContainer>\n  ) : null;\n};\n\nexport default HoverCopyableField;\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAM,kBAAkB,OAAO,SAAmC;AAChE,KAAI;AACF,MAAI,eAAe,WAAW;AAC5B,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,UAAO;QAEP,QAAO,SAAS,YAAY,QAAQ,MAAM,KAAK;SAE3C;AACN,SAAO;;;AAIX,MAAM,eAAe,MAA2E;CAC9F,MAAM,OAAO,EAAE,cAAc,uBAAuB;AAEpD,QAAO;EACL,SAFiB,EAAE,YAAY,KAAK,EAAE,YAAY,IAE5B,EAAE,UAAU,KAAK,OAAO,KAAK,QAAQ;EAC3D,SAAS,KAAK;EACf;;AAGH,MAAM,yBAAyB,OAAO,GAAG;;SAEhC,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,OAAO,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACS,QAAQ,GAAG;WACZ,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrD,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,OAAOA,aAAK;;;;;eAKhB,OAAO,GAAA,QAA6B;;;;AAKnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eACA,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoB,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9D,UAAU,MAAM;CAElB,MAAM,sBAAsB,OAAO,WAAiD;AAClF,MAAI,aAAa,KACf;AAGF,MAAI,CAAC,MAD2B,gBAAgB,UAAU,CAExD;AAEF,MAAI,eAAe;AACjB,iBAAc;IAAE,MAAM;IAAW,GAAG;IAAQ,CAAC;AAC7C,mBAAgB;AAChB;;AAEF,oBAAkB;AAClB,mBAAiB;AACf,mBAAgB;AAChB,qBAAkB;KACjB,KAAK;;CAGV,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACd,sBAAoB,YAAY,EAAE,CAAC;;AAG1C,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,qBAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,qBAACC,iBAAD;GAAS,MAAM;aAAf,CACE,oBAACA,gBAAQ,QAAT;IAAgB,SAAA;cACd,oBAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,oBAAC,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,oBAACA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,oBAAC,YAAD;KAAY,UAAA;eACV,oBAAC,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB"}
+{"version":3,"file":"HoverCopyableField-CW7Jxmni.mjs","names":["Card","Popover"],"sources":["../src/components/HoverCopyableField/HoverCopyableField.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons';\n\nimport Button from '#src/components/Button';\nimport Card from '#src/components/Card';\nimport Popover from '#src/components/Popover';\nimport { Paragraph } from '#src/components/Text';\nimport useToggle from '#src/lib/useToggle';\nimport { fadeIn } from '#src/variables/keyframes';\nimport { TransitionDuration } from '#src/variables/transitions';\n\nexport type CopySuccessDetail = {\n  text: string;\n  clientX: number;\n  clientY: number;\n};\n\nexport type HoverCopyableFieldProps = {\n  copyValue: string | undefined;\n  confirmationText?: string;\n  /**\n   * Called after a successful clipboard write. When provided, the Copied\n   * popover is skipped so the host can own post-copy UX.\n   */\n  onCopySuccess?: (detail: CopySuccessDetail) => void;\n  children: ReactNode;\n};\n\nconst copyToClipboard = async (text: string): Promise<boolean> => {\n  try {\n    if ('clipboard' in navigator) {\n      await navigator.clipboard.writeText(text);\n      return true;\n    } else {\n      return document.execCommand('copy', true, text);\n    }\n  } catch {\n    return false;\n  }\n};\n\nconst clickOrigin = (e: MouseEvent<HTMLButtonElement>): { clientX: number; clientY: number } => {\n  const rect = e.currentTarget.getBoundingClientRect();\n  const hasPointer = e.clientX !== 0 || e.clientY !== 0;\n  return {\n    clientX: hasPointer ? e.clientX : rect.left + rect.width / 2,\n    clientY: rect.top,\n  };\n};\n\nconst CopyableFieldContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n`;\n\nconst CopyButton = styled(Button).attrs(() => ({\n  type: 'button',\n  variant: 'inverse',\n  width: 'icon',\n}))<{ isActive: boolean }>`\n  height: ${Spacing[5]};\n  width: ${Spacing[5]};\n  visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\nconst StyledCard = styled(Card)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  padding: 6px;\n  margin: 0;\n`;\n\nconst HoverCopyableField = ({\n  copyValue,\n  confirmationText = 'Copied',\n  onCopySuccess,\n  children,\n}: HoverCopyableFieldProps) => {\n  const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);\n  const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] =\n    useToggle(false);\n\n  const copyTextToClipboard = async (origin: { clientX: number; clientY: number }) => {\n    if (copyValue == null) {\n      return;\n    }\n    const copyWasSuccessful = await copyToClipboard(copyValue);\n    if (!copyWasSuccessful) {\n      return;\n    }\n    if (onCopySuccess) {\n      onCopySuccess({ text: copyValue, ...origin });\n      hideCopyButton();\n      return;\n    }\n    showConfirmation();\n    setTimeout(() => {\n      hideCopyButton();\n      hideConfirmation();\n    }, 1200);\n  };\n\n  const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    void copyTextToClipboard(clickOrigin(e));\n  };\n\n  return copyValue != null && copyValue.trim().length > 0 ? (\n    <CopyableFieldContainer onMouseEnter={showCopyButton} onMouseLeave={hideCopyButton}>\n      {children}\n      <Popover open={confirmationActive}>\n        <Popover.Anchor asChild>\n          <CopyButton\n            id='hover-copyable-field__copy-button'\n            isActive={copyButtonActive || confirmationActive}\n            onClick={copyField}\n          >\n            <CopyIcon width={16} height={16} />\n          </CopyButton>\n        </Popover.Anchor>\n        <Popover.Content side='top' align='center' style={{ zIndex: 2 }}>\n          <StyledCard elevated>\n            <Paragraph>{confirmationText}</Paragraph>\n          </StyledCard>\n        </Popover.Content>\n      </Popover>\n    </CopyableFieldContainer>\n  ) : null;\n};\n\nexport default HoverCopyableField;\n"],"mappings":";;;;;;;;;;;;AA+BA,MAAM,kBAAkB,OAAO,SAAmC;AAChE,KAAI;AACF,MAAI,eAAe,WAAW;AAC5B,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,UAAO;QAEP,QAAO,SAAS,YAAY,QAAQ,MAAM,KAAK;SAE3C;AACN,SAAO;;;AAIX,MAAM,eAAe,MAA2E;CAC9F,MAAM,OAAO,EAAE,cAAc,uBAAuB;AAEpD,QAAO;EACL,SAFiB,EAAE,YAAY,KAAK,EAAE,YAAY,IAE5B,EAAE,UAAU,KAAK,OAAO,KAAK,QAAQ;EAC3D,SAAS,KAAK;EACf;;AAGH,MAAM,yBAAyB,OAAO,GAAG;;SAEhC,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,OAAO,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACS,QAAQ,GAAG;WACZ,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrD,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,OAAOA,aAAK;;;;;eAKhB,OAAO,GAAA,QAA6B;;;;AAKnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eACA,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoB,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9D,UAAU,MAAM;CAElB,MAAM,sBAAsB,OAAO,WAAiD;AAClF,MAAI,aAAa,KACf;AAGF,MAAI,CAAC,MAD2B,gBAAgB,UAAU,CAExD;AAEF,MAAI,eAAe;AACjB,iBAAc;IAAE,MAAM;IAAW,GAAG;IAAQ,CAAC;AAC7C,mBAAgB;AAChB;;AAEF,oBAAkB;AAClB,mBAAiB;AACf,mBAAgB;AAChB,qBAAkB;KACjB,KAAK;;CAGV,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACd,sBAAoB,YAAY,EAAE,CAAC;;AAG1C,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,qBAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,qBAACC,iBAAD;GAAS,MAAM;aAAf,CACE,oBAACA,gBAAQ,QAAT;IAAgB,SAAA;cACd,oBAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,oBAAC,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,oBAACA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,oBAAC,YAAD;KAAY,UAAA;eACV,oBAAC,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB"}

package/dist/{I18nContext-EPmbUprm.d.mts → I18nContext-BBVKF9ui.d.mts}

@@ -1,4 +1,4 @@
-import { i as CommonStrings, n as CommonStringOverrides } from "./strings-CK9n6b65.mjs";
+import { i as CommonStrings, n as CommonStringOverrides } from "./strings-BGXKl_m6.mjs";
 import { FC, PropsWithChildren } from "react";
 
 //#region src/lib/i18n/I18nContext.d.ts
@@ -19,4 +19,4 @@ declare function usePDSStrings(): CommonStrings;
 declare function usePDSLocale(): string | undefined;
 //#endregion
 export { usePDSStrings as i, PDSI18nProviderProps as n, usePDSLocale as r, PDSI18nProvider as t };
-//# sourceMappingURL=I18nContext-EPmbUprm.d.mts.map
+//# sourceMappingURL=I18nContext-BBVKF9ui.d.mts.map

package/dist/I18nContext.d.mts

@@ -1,2 +1,2 @@
-import { i as usePDSStrings, n as PDSI18nProviderProps, r as usePDSLocale, t as PDSI18nProvider } from "./I18nContext-EPmbUprm.mjs";
+import { i as usePDSStrings, n as PDSI18nProviderProps, r as usePDSLocale, t as PDSI18nProvider } from "./I18nContext-BBVKF9ui.mjs";
 export { PDSI18nProvider, PDSI18nProviderProps, usePDSLocale, usePDSStrings };

package/dist/IconButton-DftINsp7.mjs.map

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

package/dist/IndexTableLayout.d.mts

@@ -1,7 +1,7 @@
 import { r as BreadcrumbsProps } from "./Breadcrumbs-DRu_JfdI.mjs";
-import { i as BaseFilterConfig, s as FilterConfig } from "./types-CayYd8EX.mjs";
-import { r as TableControlsProps } from "./TableControls-DAjx1TYG.mjs";
-import { i as DataTableProps } from "./DataTable-C000E74h.mjs";
+import { i as BaseFilterConfig, s as FilterConfig } from "./types-sUEmxsGM.mjs";
+import { r as TableControlsProps } from "./TableControls-BHv-tXA-.mjs";
+import { i as DataTableProps } from "./DataTable-BXHmi-SW.mjs";
 import { r as PageHeaderProps } from "./PageHeader-D2QLrS7-.mjs";
 import { UseColumnConfigurationOptions } from "./useColumnConfiguration.mjs";
 import { ReactNode } from "react";

package/dist/InlineCombobox.d.mts

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

package/dist/InlineInput.d.mts

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

package/dist/Input-DtO3qMnE.mjs.map

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

package/dist/Link-DKYmdL9t.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link-DKYmdL9t.mjs","names":[],"sources":["../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\nimport { RouterLink, type RouterLinkComponentProps } from 'design-system/lib/router';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\ninterface BaseLinkProps {\n  /**\n   * The content to display inside the link.\n   *\n   */\n  children?: ReactNode;\n  /**\n   * Provides an accessible name for the link when the visible text alone\n   * isn't descriptive enough for screen reader users\n   */\n  'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n   */\n  url: string;\n\n  /**\n   * Where to open the link. Use \"_blank\" for external links to open in a new tab.\n   */\n  target?: Target;\n}\n\ninterface InternalLinkProps\n  extends BaseLinkProps, Omit<RouterLinkComponentProps, 'to' | 'children'> {\n  /**\n   * The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n   */\n  url: string;\n}\n\nexport type LinkProps = ExternalLinkProps | InternalLinkProps;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  /* Uses padding here since we can't define flex on the element for multiline support */\n  padding-left: 2px;\n  /* Needed to reset the height of the container for SVG */\n  line-height: 0;\n  position: relative;\n  /* Optical alignment adjustments */\n  bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple600)};\n  width: fit-content;\n  position: relative;\n  overflow: hidden;\n  text-decoration: underline;\n\n  transition:\n    color ${TransitionDuration.ExtraFast} ease-out,\n    text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n  text-underline-offset: 2px;\n\n  &:hover {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentHover', Color.CorePurple800)};\n    text-underline-offset: ${Spacing[1]};\n  }\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  ${focusOutline}\n\n  &:active {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentActive', Color.CorePurple900)};\n  }\n`;\n\nconst StyledAnchor = styled.a`\n  ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n  ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n  // Check if the URL is external by looking at the protocol or if target is _blank\n  const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n  const hasBlankTarget = props.target === '_blank';\n  const isExternal = isAbsoluteUrl || hasBlankTarget;\n\n  if (isExternal) {\n    const { 'aria-label': ariaLabel, ...anchorProps } = props;\n    const externalProps = {\n      href: url,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      'aria-label': ariaLabel,\n      // Automatically inform screen readers that link opens in new window\n      title: ariaLabel ? undefined : 'Opens in new window',\n      ...anchorProps,\n    };\n\n    return (\n      <StyledAnchor {...externalProps}>\n        {children}\n        <IconContainer>\n          <LinkExternalIcon size={12} />\n        </IconContainer>\n      </StyledAnchor>\n    );\n  }\n\n  const { 'aria-label': ariaLabel, ...routerProps } = props;\n  const internalProps = {\n    to: url,\n    'aria-label': ariaLabel,\n\n    ...routerProps,\n  };\n\n  return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;;AAgDA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;;;;;;;oBAOvC;oCACgB;;;;cAI3C,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,cAAc,CAAC;6BAC1D,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;cAGH,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,cAAc,CAAC;;;AAIxF,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAO,WAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAInB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}
+{"version":3,"file":"Link-DKYmdL9t.mjs","names":[],"sources":["../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\n\nimport { RouterLink, type RouterLinkComponentProps } from '#src/lib/router';\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { focusOutline } from '#src/mixins/focus';\nimport { paragraphMixins } from '#src/mixins/text';\nimport { TransitionDuration } from '#src/variables/transitions';\n\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\ninterface BaseLinkProps {\n  /**\n   * The content to display inside the link.\n   *\n   */\n  children?: ReactNode;\n  /**\n   * Provides an accessible name for the link when the visible text alone\n   * isn't descriptive enough for screen reader users\n   */\n  'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n   */\n  url: string;\n\n  /**\n   * Where to open the link. Use \"_blank\" for external links to open in a new tab.\n   */\n  target?: Target;\n}\n\ninterface InternalLinkProps\n  extends BaseLinkProps, Omit<RouterLinkComponentProps, 'to' | 'children'> {\n  /**\n   * The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n   */\n  url: string;\n}\n\nexport type LinkProps = ExternalLinkProps | InternalLinkProps;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  /* Uses padding here since we can't define flex on the element for multiline support */\n  padding-left: 2px;\n  /* Needed to reset the height of the container for SVG */\n  line-height: 0;\n  position: relative;\n  /* Optical alignment adjustments */\n  bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple600)};\n  width: fit-content;\n  position: relative;\n  overflow: hidden;\n  text-decoration: underline;\n\n  transition:\n    color ${TransitionDuration.ExtraFast} ease-out,\n    text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n  text-underline-offset: 2px;\n\n  &:hover {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentHover', Color.CorePurple800)};\n    text-underline-offset: ${Spacing[1]};\n  }\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  ${focusOutline}\n\n  &:active {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentActive', Color.CorePurple900)};\n  }\n`;\n\nconst StyledAnchor = styled.a`\n  ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n  ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n  // Check if the URL is external by looking at the protocol or if target is _blank\n  const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n  const hasBlankTarget = props.target === '_blank';\n  const isExternal = isAbsoluteUrl || hasBlankTarget;\n\n  if (isExternal) {\n    const { 'aria-label': ariaLabel, ...anchorProps } = props;\n    const externalProps = {\n      href: url,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      'aria-label': ariaLabel,\n      // Automatically inform screen readers that link opens in new window\n      title: ariaLabel ? undefined : 'Opens in new window',\n      ...anchorProps,\n    };\n\n    return (\n      <StyledAnchor {...externalProps}>\n        {children}\n        <IconContainer>\n          <LinkExternalIcon size={12} />\n        </IconContainer>\n      </StyledAnchor>\n    );\n  }\n\n  const { 'aria-label': ariaLabel, ...routerProps } = props;\n  const internalProps = {\n    to: url,\n    'aria-label': ariaLabel,\n\n    ...routerProps,\n  };\n\n  return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;;AAiDA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;;;;;;;oBAOvC;oCACgB;;;;cAI3C,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,cAAc,CAAC;6BAC1D,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;cAGH,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,cAAc,CAAC;;;AAIxF,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAO,WAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAInB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}