@persona/design-system 0.10.2 → 0.10.4

package/dist/{FormField-D0y1uRV5.mjs.map → FormField-C0cd1zVd.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FormField-D0y1uRV5.mjs","names":["Input","TextArea","DropdownMenu","DropdownMenu"],"sources":["../components/FormField/FormField.tsx","../components/FormField/inputFields.tsx","../components/FormField/CheckboxGroupField.tsx","../components/FormField/ListBoxField.tsx","../components/FormField/TableBoxField.tsx"],"sourcesContent":["import { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n  ErrorText,\n  type FormControlProps,\n  FormInputContainer,\n  FormLabel,\n  HelperText,\n  WarningText,\n} from 'design-system/components/FormControl';\nimport { HStack } from 'design-system/components/Stack';\n\nexport interface FormFieldBaseProps {\n  /**\n   * Renders `<Label>` above input\n   */\n  label?: ReactNode;\n\n  /**\n   * ID of the input element. Providing this will automatically link the label to the input.\n   */\n  inputId?: string;\n\n  /** 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 'design-system/components/FormField';\n * ```\n */\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    label,\n    children,\n    helperText,\n    warningText,\n    errorText,\n    labelProps,\n    helperProps,\n    warningProps,\n    errorProps,\n    configField: configFieldProp,\n    configFieldInputWidth,\n    rightActions,\n    ...props\n  }: FormFieldProps,\n  ref,\n) {\n  const { configField: configFieldFormGroup } = useFormGroup();\n  const configField = configFieldProp ?? configFieldFormGroup;\n\n  const labelElement = label ? (\n    <FormLabel tooltip={configField && helperText ? helperText : undefined} {...labelProps}>\n      {label}\n    </FormLabel>\n  ) : null;\n\n  return (\n    <FormControl\n      hasError={!!errorText}\n      hasWarning={!!warningText}\n      ref={ref}\n      configField={configField}\n      hasRightActions={!!rightActions}\n      configFieldInputWidth={configFieldInputWidth}\n      {...props}\n    >\n      {rightActions ? (\n        <HStack justify='space-between' align='center'>\n          {labelElement}\n          <HStack spacing={Spacing[1]}>{rightActions}</HStack>\n        </HStack>\n      ) : (\n        labelElement\n      )}\n      <FormInputContainer>{children}</FormInputContainer>\n      {!configField && helperText && <HelperText {...helperProps}>{helperText}</HelperText>}\n      {!configField && warningText && <WarningText {...warningProps}>{warningText}</WarningText>}\n      {!configField && errorText && <ErrorText {...errorProps}>{errorText}</ErrorText>}\n    </FormControl>\n  );\n});\n\nexport default FormField;\n","import { uniqueId } from 'lodash-es';\nimport { forwardRef, useMemo } from 'react';\n\nimport Checkbox, { type CheckboxProps } from 'design-system/components/Checkbox';\nimport Combobox from 'design-system/components/Combobox';\nimport type { ComboboxMultiSelectProps } from 'design-system/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from 'design-system/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from 'design-system/components/FormField/FormField';\nimport Input, { type InputProps } from 'design-system/components/Input';\nimport RadioGroup, { type RadioGroupProps } from 'design-system/components/RadioGroup';\nimport SegmentedControl, {\n  type SegmentedControlProps,\n} from 'design-system/components/SegmentedControl';\nimport Select, { type SelectProps } from 'design-system/components/Select';\nimport TextArea, { type TextAreaProps } from 'design-system/components/TextArea';\nimport Toggle, { type ToggleProps } from 'design-system/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n  T,\n  | 'label'\n  | 'inputId'\n  | '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 'design-system/components/Checkbox';\nimport type Checkbox from 'design-system/components/Checkbox';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst CheckboxGroupContext = createContext<CheckboxGroupState>(null);\n\n/** Preserves the parent FormControl context (disabled, hasError, etc.) but clears\n *  inputId so each Checkbox inside the group generates its own unique id. */\nconst ClearGroupInputId = ({ children }: { children: ReactNode }) => {\n  const parentContext = useContext(FormControlContext);\n  return (\n    <FormControlContext.Provider value={{ ...parentContext, inputId: undefined }}>\n      {children}\n    </FormControlContext.Provider>\n  );\n};\n\ninterface CheckboxGroupItemProps {\n  children: ReactElement<ComponentPropsWithRef<typeof Checkbox>>;\n}\n\nconst CheckboxGroupItem = (props: CheckboxGroupItemProps) => {\n  const { children } = props;\n  const checkboxProps = children.props;\n\n  const state = useContext(CheckboxGroupContext);\n  const ref = useRef();\n  const { inputProps } = useCheckboxGroupItem(\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    {\n      ...checkboxProps,\n      onChange: undefined,\n      isDisabled: checkboxProps.disabled,\n      isReadOnly: checkboxProps.readOnly,\n      isRequired: checkboxProps.required,\n      isIndeterminate: checkboxProps.indeterminate,\n      value: String(children.props.value),\n      'aria-label': innerText(checkboxProps.label),\n    },\n    state,\n    ref,\n  );\n\n  return cloneElement(\n    children,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    mergeProps(inputProps, {\n      onChange: checkboxProps.onChange,\n      disabled: state.isDisabled || checkboxProps.disabled,\n      checked: state.isSelected(String(inputProps.value)),\n      ref,\n    } as ComponentPropsWithRef<typeof Checkbox>),\n  );\n};\n\ninterface CheckboxGroupFieldProps\n  extends\n    Omit<ImplementsFormField, 'configField'>,\n    Omit<\n      AriaCheckboxGroupProps,\n      'description' | 'disabled' | 'isReadOnly' | 'isRequired' | 'errorMessage'\n    > {\n  children?: ReactElement<CheckboxProps>[];\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n}\n\nconst CheckboxGroupField = ({\n  children,\n  name,\n  onChange,\n  disabled,\n  readOnly,\n  required,\n  ...props\n}: CheckboxGroupFieldProps) => {\n  const reactAriaProps = {\n    ...props,\n    description: props.helperText,\n    errorMessage: props.errorText,\n    onChange,\n    name,\n    isDisabled: disabled,\n    isReadOnly: readOnly,\n    isRequired: required,\n  };\n  const state = useCheckboxGroupState(reactAriaProps);\n  const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(\n    reactAriaProps,\n    state,\n  );\n\n  return (\n    <FormField\n      labelProps={labelProps}\n      helperProps={descriptionProps}\n      errorProps={errorMessageProps}\n      disabled={disabled}\n      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';\nimport { IconButton } from 'design-system/components/Button';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from 'design-system/components/ListBox';\nimport type { MenuItemProps } from 'design-system/components/Menu';\n\ninterface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n  label: string;\n  onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;\n}\n\ninterface AddDropdownConfig {\n  options: ({ label: ReactNode; value: string } & Omit<MenuItemProps, 'children'>)[];\n  onSelection: (value: string) => void;\n}\n\ninterface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {\n  actions?: ListBoxFieldAction[];\n  addDropdownConfig?: AddDropdownConfig;\n  /** Disables the add button, e.g. while the list is read-only. */\n  addDisabled?: boolean;\n}\n\nconst ListBoxField = <T extends object>({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  labelProps,\n  helperProps,\n  errorProps,\n  warningProps,\n  inputId,\n  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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"}
+{"version":3,"file":"FormField-C0cd1zVd.mjs","names":["Input","TextArea","DropdownMenu","DropdownMenu"],"sources":["../components/FormField/FormField.tsx","../components/FormField/inputFields.tsx","../components/FormField/CheckboxGroupField.tsx","../components/FormField/ListBoxField.tsx","../components/FormField/TableBoxField.tsx"],"sourcesContent":["import { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n  ErrorText,\n  type FormControlProps,\n  FormInputContainer,\n  FormLabel,\n  HelperText,\n  WarningText,\n} from 'design-system/components/FormControl';\nimport { HStack } from 'design-system/components/Stack';\n\nexport interface FormFieldBaseProps {\n  /**\n   * Renders `<Label>` above input\n   */\n  label?: ReactNode;\n\n  /**\n   * ID of the input element. Providing this will automatically link the label to the input.\n   */\n  inputId?: string;\n\n  /** 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 'design-system/components/FormField';\n * ```\n */\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    label,\n    children,\n    helperText,\n    warningText,\n    errorText,\n    labelProps,\n    helperProps,\n    warningProps,\n    errorProps,\n    configField: configFieldProp,\n    configFieldInputWidth,\n    rightActions,\n    ...props\n  }: FormFieldProps,\n  ref,\n) {\n  const { configField: configFieldFormGroup } = useFormGroup();\n  const configField = configFieldProp ?? configFieldFormGroup;\n\n  const labelElement = label ? (\n    <FormLabel tooltip={configField && helperText ? helperText : undefined} {...labelProps}>\n      {label}\n    </FormLabel>\n  ) : null;\n\n  return (\n    <FormControl\n      hasError={!!errorText}\n      hasWarning={!!warningText}\n      ref={ref}\n      configField={configField}\n      hasRightActions={!!rightActions}\n      configFieldInputWidth={configFieldInputWidth}\n      {...props}\n    >\n      {rightActions ? (\n        <HStack justify='space-between' align='center'>\n          {labelElement}\n          <HStack spacing={Spacing[1]}>{rightActions}</HStack>\n        </HStack>\n      ) : (\n        labelElement\n      )}\n      <FormInputContainer>{children}</FormInputContainer>\n      {!configField && helperText && <HelperText {...helperProps}>{helperText}</HelperText>}\n      {!configField && warningText && <WarningText {...warningProps}>{warningText}</WarningText>}\n      {!configField && errorText && <ErrorText {...errorProps}>{errorText}</ErrorText>}\n    </FormControl>\n  );\n});\n\nexport default FormField;\n","import { uniqueId } from 'lodash-es';\nimport { forwardRef, useMemo } from 'react';\n\nimport Checkbox, { type CheckboxProps } from 'design-system/components/Checkbox';\nimport Combobox from 'design-system/components/Combobox';\nimport type { ComboboxMultiSelectProps } from 'design-system/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from 'design-system/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from 'design-system/components/FormField/FormField';\nimport Input, { type InputProps } from 'design-system/components/Input';\nimport RadioGroup, { type RadioGroupProps } from 'design-system/components/RadioGroup';\nimport SegmentedControl, {\n  type SegmentedControlProps,\n} from 'design-system/components/SegmentedControl';\nimport Select, { type SelectProps } from 'design-system/components/Select';\nimport TextArea, { type TextAreaProps } from 'design-system/components/TextArea';\nimport Toggle, { type ToggleProps } from 'design-system/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n  T,\n  | 'label'\n  | 'inputId'\n  | '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 'design-system/components/Checkbox';\nimport type Checkbox from 'design-system/components/Checkbox';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst CheckboxGroupContext = createContext<CheckboxGroupState>(null);\n\n/** Preserves the parent FormControl context (disabled, hasError, etc.) but clears\n *  inputId so each Checkbox inside the group generates its own unique id. */\nconst ClearGroupInputId = ({ children }: { children: ReactNode }) => {\n  const parentContext = useContext(FormControlContext);\n  return (\n    <FormControlContext.Provider value={{ ...parentContext, inputId: undefined }}>\n      {children}\n    </FormControlContext.Provider>\n  );\n};\n\ninterface CheckboxGroupItemProps {\n  children: ReactElement<ComponentPropsWithRef<typeof Checkbox>>;\n}\n\nconst CheckboxGroupItem = (props: CheckboxGroupItemProps) => {\n  const { children } = props;\n  const checkboxProps = children.props;\n\n  const state = useContext(CheckboxGroupContext);\n  const ref = useRef();\n  const { inputProps } = useCheckboxGroupItem(\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    {\n      ...checkboxProps,\n      onChange: undefined,\n      isDisabled: checkboxProps.disabled,\n      isReadOnly: checkboxProps.readOnly,\n      isRequired: checkboxProps.required,\n      isIndeterminate: checkboxProps.indeterminate,\n      value: String(children.props.value),\n      'aria-label': innerText(checkboxProps.label),\n    },\n    state,\n    ref,\n  );\n\n  return cloneElement(\n    children,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    mergeProps(inputProps, {\n      onChange: checkboxProps.onChange,\n      disabled: state.isDisabled || checkboxProps.disabled,\n      checked: state.isSelected(String(inputProps.value)),\n      ref,\n    } as ComponentPropsWithRef<typeof Checkbox>),\n  );\n};\n\ninterface CheckboxGroupFieldProps\n  extends\n    Omit<ImplementsFormField, 'configField'>,\n    Omit<\n      AriaCheckboxGroupProps,\n      'description' | 'disabled' | 'isReadOnly' | 'isRequired' | 'errorMessage'\n    > {\n  children?: ReactElement<CheckboxProps>[];\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n}\n\nconst CheckboxGroupField = ({\n  children,\n  name,\n  onChange,\n  disabled,\n  readOnly,\n  required,\n  ...props\n}: CheckboxGroupFieldProps) => {\n  const reactAriaProps = {\n    ...props,\n    description: props.helperText,\n    errorMessage: props.errorText,\n    onChange,\n    name,\n    isDisabled: disabled,\n    isReadOnly: readOnly,\n    isRequired: required,\n  };\n  const state = useCheckboxGroupState(reactAriaProps);\n  const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(\n    reactAriaProps,\n    state,\n  );\n\n  return (\n    <FormField\n      labelProps={labelProps}\n      helperProps={descriptionProps}\n      errorProps={errorMessageProps}\n      disabled={disabled}\n      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';\nimport { IconButton } from 'design-system/components/Button';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from 'design-system/components/ListBox';\nimport type { MenuItemProps } from 'design-system/components/Menu';\n\ninterface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n  label: string;\n  onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;\n}\n\ninterface AddDropdownConfig {\n  options: ({ label: ReactNode; value: string } & Omit<MenuItemProps, 'children'>)[];\n  onSelection: (value: string) => void;\n}\n\ninterface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {\n  actions?: ListBoxFieldAction[];\n  addDropdownConfig?: AddDropdownConfig;\n  /** Disables the add button, e.g. while the list is read-only. */\n  addDisabled?: boolean;\n}\n\nconst ListBoxField = <T extends object>({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  labelProps,\n  helperProps,\n  errorProps,\n  warningProps,\n  inputId,\n  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/{HoverCopyableField-DkOosH8z.mjs → HoverCopyableField-D-BubaRd.mjs}

@@ -5,7 +5,7 @@ import { t as useToggle } from "./useToggle-DRzCDqrc.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
 import "./variables/transitions.mjs";
 import { n as Button } from "./IconButton-HWx5Hlmi.mjs";
-import { s as Popover_default } from "./Popover-532iYFek.mjs";
+import { s as Popover_default } from "./Popover-BcII7usF.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CopyIcon } from "@persona/icons";
@@ -111,4 +111,4 @@ const HoverCopyableField = ({ copyValue, confirmationText = "Copied", onCopySucc
 //#endregion
 export { HoverCopyableField as t };
 
-//# sourceMappingURL=HoverCopyableField-DkOosH8z.mjs.map
+//# sourceMappingURL=HoverCopyableField-D-BubaRd.mjs.map

package/dist/{HoverCopyableField-DkOosH8z.mjs.map → HoverCopyableField-D-BubaRd.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"HoverCopyableField-DkOosH8z.mjs","names":["Card","Popover"],"sources":["../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-D-BubaRd.mjs","names":["Card","Popover"],"sources":["../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"}

package/dist/IndexTableLayout.d.mts

@@ -1,8 +1,8 @@
-import { r as BreadcrumbsProps } from "./Breadcrumbs-C2ThOYJ-.mjs";
+import { r as BreadcrumbsProps } from "./Breadcrumbs-47jYLqNP.mjs";
 import { i as BaseFilterConfig, s as FilterConfig } from "./types-CrRWZ0Ia.mjs";
-import { r as TableControlsProps } from "./TableControls-DCtTiWk6.mjs";
-import { i as DataTableProps } from "./DataTable-BdKUCgcZ.mjs";
-import { r as PageHeaderProps } from "./PageHeader-Czj42pyK.mjs";
+import { r as TableControlsProps } from "./TableControls-ETB0Xk5X.mjs";
+import { i as DataTableProps } from "./DataTable-D15C5lfd.mjs";
+import { r as PageHeaderProps } from "./PageHeader-CnpDVOck.mjs";
 import { UseColumnConfigurationOptions } from "./useColumnConfiguration.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/{Link-BSuXrvTu.mjs → Link-Cf__H8gD.mjs}

@@ -76,4 +76,4 @@ const Link = ({ children, url, ...props }) => {
 //#endregion
 export { Link as t };
 
-//# sourceMappingURL=Link-BSuXrvTu.mjs.map
+//# sourceMappingURL=Link-Cf__H8gD.mjs.map

package/dist/{Link-BSuXrvTu.mjs.map → Link-Cf__H8gD.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Link-BSuXrvTu.mjs","names":[],"sources":["../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-Cf__H8gD.mjs","names":[],"sources":["../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"}

package/dist/{ListBox-BLoJVezh.mjs → ListBox-eoyBHtnJ.mjs}

@@ -13,7 +13,7 @@ import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r
 import { t as FormGroupContext } from "./useFormGroup-CsKC93Pt.mjs";
 import { o as MenuHeading, r as ListItem } from "./Menu-Dw6Rcpk6.mjs";
 import { n as DropdownMenu_default } from "./DropdownMenu-CedsmO5h.mjs";
-import { s as Popover_default } from "./Popover-532iYFek.mjs";
+import { s as Popover_default } from "./Popover-BcII7usF.mjs";
 import { t as Container } from "./FormControl-C4CiA0H-.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -472,4 +472,4 @@ const ListBox = Object.assign(ListBox$1, { LogicRow });
 //#endregion
 export { useListBoxContext as n, ListBox as t };
 
-//# sourceMappingURL=ListBox-BLoJVezh.mjs.map
+//# sourceMappingURL=ListBox-eoyBHtnJ.mjs.map

package/dist/{ListBox-BLoJVezh.mjs.map → ListBox-eoyBHtnJ.mjs.map}

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

package/dist/{Modal-IJdbLORi.mjs → Modal-kjUptzg1.mjs}

@@ -259,4 +259,4 @@ var Modal_default = Object.assign(Modal$1, { Title: ModalTitle });
 //#endregion
 export { Modal_default as i, ModalContent as n, ModalTrigger as r, ModalClose as t };
 
-//# sourceMappingURL=Modal-IJdbLORi.mjs.map
+//# sourceMappingURL=Modal-kjUptzg1.mjs.map

package/dist/{Modal-IJdbLORi.mjs.map → Modal-kjUptzg1.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Modal-IJdbLORi.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  Button as AriaButton,\n  Dialog,\n  DialogTrigger,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay,\n  type ModalOverlayProps,\n  OverlayTriggerStateContext,\n  Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport { usePDSStrings } from 'design-system/lib/i18n';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from 'design-system/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  @keyframes overlayShow {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  background-color: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: ${({ $insetRight }) => $insetRight};\n  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-fill-mode: both;\n  ${({ $hostPending }) =>\n    $hostPending &&\n    `\n    animation-play-state: paused;\n  `}\n  @media (prefers-reduced-motion: reduce) {\n    animation-duration: 0ms;\n    animation-delay: 0ms;\n    animation-play-state: running;\n  }\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n  z-index: 10001;\n  outline: none;\n  width: fit-content;\n  max-width: 100%;\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n`;\n\n/**\n * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n */\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n  function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n    useEmbeddedSurface(surfaceId);\n    return <StyledModal ref={ref}>{children}</StyledModal>;\n  },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n  $insetRight: string;\n  $transitionMs: number;\n  surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  const isOpen = state?.isOpen ?? false;\n  const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n  const { $insetRight, $transitionMs, ...overlayProps } = props;\n  return (\n    <StyledModalOverlay\n      {...overlayProps}\n      $insetRight={$insetRight}\n      $transitionMs={$transitionMs}\n      $animationDelayMs={animationDelayMs}\n      $hostPending={isOpen && !ready}\n    />\n  );\n};\n\nconst ModalCloseButton = styled(Button)`\n  display: inline-flex;\n  padding: ${Spacing[2]};\n  border-radius: ${Spacing[1]};\n  width: fit-content;\n  min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n  justify: 'flex-end',\n  align: 'center',\n  spacing: Spacing[2],\n})`\n  padding: ${Spacing[3]} ${Spacing[4]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n  flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n  return (\n    <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n      <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n        <XIcon />\n      </ModalCloseButton>\n    </AriaButton>\n  );\n};\n\nexport interface ModalTitleProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/** Props passed to modal content render functions. */\nexport interface ModalRenderProps {\n  /** Element that floating content should use as its portal container. */\n  portalContainer: HTMLDivElement | null;\n}\n\ntype ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n  return (\n    <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n      {children}\n    </Heading>\n  );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n  border-bottom: ${({ $hasTabs, theme }) =>\n    $hasTabs ? 'none' : `1px solid ${semanticColor(theme, 'BorderSubtle', Color.BorderDivider)}`};\n  padding: ${({ $hasTabs }) =>\n    $hasTabs\n      ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n      : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n  padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n  outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' | 'md' | 'lg' | 'xl' | 'full' }>`\n  position: relative;\n  width: ${({ $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return '90vw';\n    }\n  }};\n  max-width: ${({ theme, $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return theme.modal.width[$size];\n    }\n  }};\n  /* TODO: Use breakpoints to make this responsive */\n  max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${({ $size }) =>\n    $size === 'full' &&\n    `\n    height: calc(100vh - 160px);\n  `}\n  margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n  /**\n   * Display X button to close popover\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Accessible label for the built-in close button. Defaults to the PDS closeModal string (\"Close\").\n   */\n  closeButtonLabel?: string;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer content\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   * Tab contents can be render functions that receive the modal portal container.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Title of the modal\n   */\n  title?: ReactNode;\n\n  /**\n   * Children content\n   */\n  children?: ReactNode;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Additional props for the Dialog element\n   */\n  className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n  portalContainer: HTMLDivElement | null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n  $noPadding?: boolean;\n  $hidden?: boolean;\n}>`\n  overflow-y: auto;\n  ${semanticScrollbar}\n  flex: 1;\n  min-height: 0;\n  ${({ $noPadding }) =>\n    $noPadding\n      ? 'padding: 0;'\n      : `\n    padding-left: ${Spacing[4]};\n    padding-right: ${Spacing[4]};\n  `}\n  ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/**\n * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n */\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n  {\n    title,\n    children,\n    showCloseButton = true,\n    closeButtonLabel,\n    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\n  const strings = usePDSStrings();\n  const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n  const tabCount = tabs?.length ?? 0;\n\n  useEffect(() => {\n    setSelectedTabIdx(0);\n  }, [tabCount]);\n\n  const titleAndClose = (\n    <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n      <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n      {showCloseButton && <ModalClose aria-label={closeButtonLabel ?? strings.closeModal} />}\n    </ModalHeader>\n  );\n\n  const modalHeader = tabs ? (\n    <Stack>\n      {titleAndClose}\n      <ModalTabBar>\n        {tabs.map((tab, idx) => (\n          <Tab\n            key={tab.name}\n            selected={selectedTabIdx === idx}\n            id={`pds-modal_tab-${idx}`}\n            onClick={() => setSelectedTabIdx(idx)}\n            aria-controls={`pds-modal_tab-panel-${idx}`}\n          >\n            {tab.name}\n          </Tab>\n        ))}\n      </ModalTabBar>\n    </Stack>\n  ) : (\n    titleAndClose\n  );\n\n  return (\n    <StyledDialog {...props} ref={ref}>\n      <StyledCard elevated $size={size}>\n        {(showCloseButton || title) && modalHeader}\n        {tabs ? (\n          tabs.map((tab, idx) => (\n            <StyledModalCardBody\n              key={tab.name}\n              $noPadding={noBodyPadding}\n              $hidden={selectedTabIdx !== idx}\n              role={tabs ? 'tabpanel' : undefined}\n              id={`pds-modal_tab-panel-${tab.name}`}\n              aria-labelledby={`pds-modal_tab-${tab.name}`}\n            >\n              {typeof tab.contents === 'function'\n                ? tab.contents({ portalContainer })\n                : tab.contents}\n            </StyledModalCardBody>\n          ))\n        ) : (\n          <StyledModalCardBody\n            $noPadding={noBodyPadding}\n            role={tabs ? 'tabpanel' : undefined}\n            id={`pds-modal_tab-panel-${selectedTabIdx}`}\n            aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n          >\n            {children}\n          </StyledModalCardBody>\n        )}\n\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </StyledCard>\n    </StyledDialog>\n  );\n});\n\ninterface TabView {\n  name: string;\n  contents: ModalRenderable;\n  badge?: React.ReactElement;\n  disabled?: boolean;\n  'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n  /**\n   * Title of the Card\n   */\n  title?: string;\n\n  /**\n   * Component to use as trigger. React Aria trigger props will be merged with this element.\n   */\n  trigger?: ComponentProps<typeof Pressable>['children'];\n\n  /**\n   * Props to apply to Modal.Card within\n   */\n  contentProps?: ModalCardProps;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer section intended for actions.\n   * You can pass in Buttons directly and they will render in a HStack.\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Children content\n   */\n  children?: ModalRenderable;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   * Can also be set via contentProps.noBodyPadding.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Controls whether the modal is open (controlled)\n   */\n  open?: boolean;\n\n  /**\n   * Default open state (uncontrolled)\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Handler called when open state changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Whether the modal can be dismissed by clicking outside or pressing escape\n   */\n  isDismissable?: boolean;\n\n  /**\n   * Whether pressing the escape key closes the modal\n   */\n  isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n  children,\n  trigger,\n  contentProps,\n  noBodyPadding = false,\n  size = 'md',\n  title,\n  footer,\n  tabs,\n  defaultOpen,\n  onOpenChange,\n  isDismissable = false,\n  isKeyboardDismissDisabled = false,\n  open,\n}: ModalProps) => {\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n  const surfaceId = useEmbeddedSurfaceId();\n  const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n  const transitionMs =\n    panelState === 'opening'\n      ? SIDEBAR_OPEN_TRANSITION_MS\n      : panelState === 'closing'\n        ? SIDEBAR_CLOSE_TRANSITION_MS\n        : 0;\n\n  const content = (\n    <ModalCard\n      size={size}\n      title={title}\n      footer={footer}\n      tabs={tabs}\n      noBodyPadding={noBodyPadding}\n      {...contentProps}\n      portalContainer={portalContainer}\n    >\n      {typeof children === 'function' ? children({ portalContainer }) : children}\n    </ModalCard>\n  );\n\n  // Wrap trigger element to ensure it works with react-aria-components\n  const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {wrappedTrigger}\n      <EmbeddedSurfaceOverlay\n        surfaceId={surfaceId}\n        $insetRight={modalInsetRight}\n        $transitionMs={transitionMs}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n      >\n        <EmbeddedSurfaceModal ref={setPortalContainer} surfaceId={surfaceId}>\n          {content}\n        </EmbeddedSurfaceModal>\n      </EmbeddedSurfaceOverlay>\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Modal-kjUptzg1.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  Button as AriaButton,\n  Dialog,\n  DialogTrigger,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay,\n  type ModalOverlayProps,\n  OverlayTriggerStateContext,\n  Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport { usePDSStrings } from 'design-system/lib/i18n';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from 'design-system/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  @keyframes overlayShow {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  background-color: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: ${({ $insetRight }) => $insetRight};\n  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-fill-mode: both;\n  ${({ $hostPending }) =>\n    $hostPending &&\n    `\n    animation-play-state: paused;\n  `}\n  @media (prefers-reduced-motion: reduce) {\n    animation-duration: 0ms;\n    animation-delay: 0ms;\n    animation-play-state: running;\n  }\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n  z-index: 10001;\n  outline: none;\n  width: fit-content;\n  max-width: 100%;\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n`;\n\n/**\n * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n */\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n  function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n    useEmbeddedSurface(surfaceId);\n    return <StyledModal ref={ref}>{children}</StyledModal>;\n  },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n  $insetRight: string;\n  $transitionMs: number;\n  surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  const isOpen = state?.isOpen ?? false;\n  const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n  const { $insetRight, $transitionMs, ...overlayProps } = props;\n  return (\n    <StyledModalOverlay\n      {...overlayProps}\n      $insetRight={$insetRight}\n      $transitionMs={$transitionMs}\n      $animationDelayMs={animationDelayMs}\n      $hostPending={isOpen && !ready}\n    />\n  );\n};\n\nconst ModalCloseButton = styled(Button)`\n  display: inline-flex;\n  padding: ${Spacing[2]};\n  border-radius: ${Spacing[1]};\n  width: fit-content;\n  min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n  justify: 'flex-end',\n  align: 'center',\n  spacing: Spacing[2],\n})`\n  padding: ${Spacing[3]} ${Spacing[4]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n  flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n  return (\n    <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n      <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n        <XIcon />\n      </ModalCloseButton>\n    </AriaButton>\n  );\n};\n\nexport interface ModalTitleProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/** Props passed to modal content render functions. */\nexport interface ModalRenderProps {\n  /** Element that floating content should use as its portal container. */\n  portalContainer: HTMLDivElement | null;\n}\n\ntype ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n  return (\n    <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n      {children}\n    </Heading>\n  );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n  border-bottom: ${({ $hasTabs, theme }) =>\n    $hasTabs ? 'none' : `1px solid ${semanticColor(theme, 'BorderSubtle', Color.BorderDivider)}`};\n  padding: ${({ $hasTabs }) =>\n    $hasTabs\n      ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n      : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n  padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n  outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' | 'md' | 'lg' | 'xl' | 'full' }>`\n  position: relative;\n  width: ${({ $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return '90vw';\n    }\n  }};\n  max-width: ${({ theme, $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return theme.modal.width[$size];\n    }\n  }};\n  /* TODO: Use breakpoints to make this responsive */\n  max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${({ $size }) =>\n    $size === 'full' &&\n    `\n    height: calc(100vh - 160px);\n  `}\n  margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n  /**\n   * Display X button to close popover\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Accessible label for the built-in close button. Defaults to the PDS closeModal string (\"Close\").\n   */\n  closeButtonLabel?: string;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer content\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   * Tab contents can be render functions that receive the modal portal container.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Title of the modal\n   */\n  title?: ReactNode;\n\n  /**\n   * Children content\n   */\n  children?: ReactNode;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Additional props for the Dialog element\n   */\n  className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n  portalContainer: HTMLDivElement | null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n  $noPadding?: boolean;\n  $hidden?: boolean;\n}>`\n  overflow-y: auto;\n  ${semanticScrollbar}\n  flex: 1;\n  min-height: 0;\n  ${({ $noPadding }) =>\n    $noPadding\n      ? 'padding: 0;'\n      : `\n    padding-left: ${Spacing[4]};\n    padding-right: ${Spacing[4]};\n  `}\n  ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/**\n * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n */\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n  {\n    title,\n    children,\n    showCloseButton = true,\n    closeButtonLabel,\n    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\n  const strings = usePDSStrings();\n  const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n  const tabCount = tabs?.length ?? 0;\n\n  useEffect(() => {\n    setSelectedTabIdx(0);\n  }, [tabCount]);\n\n  const titleAndClose = (\n    <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n      <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n      {showCloseButton && <ModalClose aria-label={closeButtonLabel ?? strings.closeModal} />}\n    </ModalHeader>\n  );\n\n  const modalHeader = tabs ? (\n    <Stack>\n      {titleAndClose}\n      <ModalTabBar>\n        {tabs.map((tab, idx) => (\n          <Tab\n            key={tab.name}\n            selected={selectedTabIdx === idx}\n            id={`pds-modal_tab-${idx}`}\n            onClick={() => setSelectedTabIdx(idx)}\n            aria-controls={`pds-modal_tab-panel-${idx}`}\n          >\n            {tab.name}\n          </Tab>\n        ))}\n      </ModalTabBar>\n    </Stack>\n  ) : (\n    titleAndClose\n  );\n\n  return (\n    <StyledDialog {...props} ref={ref}>\n      <StyledCard elevated $size={size}>\n        {(showCloseButton || title) && modalHeader}\n        {tabs ? (\n          tabs.map((tab, idx) => (\n            <StyledModalCardBody\n              key={tab.name}\n              $noPadding={noBodyPadding}\n              $hidden={selectedTabIdx !== idx}\n              role={tabs ? 'tabpanel' : undefined}\n              id={`pds-modal_tab-panel-${tab.name}`}\n              aria-labelledby={`pds-modal_tab-${tab.name}`}\n            >\n              {typeof tab.contents === 'function'\n                ? tab.contents({ portalContainer })\n                : tab.contents}\n            </StyledModalCardBody>\n          ))\n        ) : (\n          <StyledModalCardBody\n            $noPadding={noBodyPadding}\n            role={tabs ? 'tabpanel' : undefined}\n            id={`pds-modal_tab-panel-${selectedTabIdx}`}\n            aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n          >\n            {children}\n          </StyledModalCardBody>\n        )}\n\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </StyledCard>\n    </StyledDialog>\n  );\n});\n\ninterface TabView {\n  name: string;\n  contents: ModalRenderable;\n  badge?: React.ReactElement;\n  disabled?: boolean;\n  'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n  /**\n   * Title of the Card\n   */\n  title?: string;\n\n  /**\n   * Component to use as trigger. React Aria trigger props will be merged with this element.\n   */\n  trigger?: ComponentProps<typeof Pressable>['children'];\n\n  /**\n   * Props to apply to Modal.Card within\n   */\n  contentProps?: ModalCardProps;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer section intended for actions.\n   * You can pass in Buttons directly and they will render in a HStack.\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Children content\n   */\n  children?: ModalRenderable;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   * Can also be set via contentProps.noBodyPadding.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Controls whether the modal is open (controlled)\n   */\n  open?: boolean;\n\n  /**\n   * Default open state (uncontrolled)\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Handler called when open state changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Whether the modal can be dismissed by clicking outside or pressing escape\n   */\n  isDismissable?: boolean;\n\n  /**\n   * Whether pressing the escape key closes the modal\n   */\n  isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n  children,\n  trigger,\n  contentProps,\n  noBodyPadding = false,\n  size = 'md',\n  title,\n  footer,\n  tabs,\n  defaultOpen,\n  onOpenChange,\n  isDismissable = false,\n  isKeyboardDismissDisabled = false,\n  open,\n}: ModalProps) => {\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n  const surfaceId = useEmbeddedSurfaceId();\n  const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n  const transitionMs =\n    panelState === 'opening'\n      ? SIDEBAR_OPEN_TRANSITION_MS\n      : panelState === 'closing'\n        ? SIDEBAR_CLOSE_TRANSITION_MS\n        : 0;\n\n  const content = (\n    <ModalCard\n      size={size}\n      title={title}\n      footer={footer}\n      tabs={tabs}\n      noBodyPadding={noBodyPadding}\n      {...contentProps}\n      portalContainer={portalContainer}\n    >\n      {typeof children === 'function' ? children({ portalContainer }) : children}\n    </ModalCard>\n  );\n\n  // Wrap trigger element to ensure it works with react-aria-components\n  const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {wrappedTrigger}\n      <EmbeddedSurfaceOverlay\n        surfaceId={surfaceId}\n        $insetRight={modalInsetRight}\n        $transitionMs={transitionMs}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n      >\n        <EmbeddedSurfaceModal ref={setPortalContainer} surfaceId={surfaceId}>\n          {content}\n        </EmbeddedSurfaceModal>\n      </EmbeddedSurfaceOverlay>\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}