@persona/design-system 0.1.8 → 0.1.9

package/dist/ListBox-TrL3Tb7X.mjs.map

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

package/dist/ListBox.d.mts

@@ -1,2 +1,2 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "./ListBox-_fcSPynx.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "./ListBox-D09N1a5D.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, useListBoxContext };

package/dist/ListBoxField.d.mts

@@ -1,6 +1,6 @@
-import { l as MenuItemProps } from "./Menu-CUp_9HgC.mjs";
+import { l as MenuItemProps } from "./Menu-Bv8dsrz6.mjs";
 import { ImplementsFormField } from "./inputFields.mjs";
-import { r as ListBoxProps } from "./ListBox-_fcSPynx.mjs";
+import { r as ListBoxProps } from "./ListBox-D09N1a5D.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
 

package/dist/{LogicRow-BtCKGX_j.d.mts → LogicRow-BcuiSTHN.d.mts}

@@ -1,5 +1,5 @@
 import { n as InputSizes } from "./input-Bv5fKt5J.mjs";
-import { n as ListBoxItemProps } from "./ListBox-_fcSPynx.mjs";
+import { n as ListBoxItemProps } from "./ListBox-D09N1a5D.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
@@ -37,4 +37,4 @@ declare const LogicRow: ({
 }: LogicRowProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { LogicRowProps as n, LogicRow as t };
-//# sourceMappingURL=LogicRow-BtCKGX_j.d.mts.map
+//# sourceMappingURL=LogicRow-BcuiSTHN.d.mts.map

package/dist/LogicRow.d.mts

@@ -1,2 +1,2 @@
-import { n as LogicRowProps, t as LogicRow } from "./LogicRow-BtCKGX_j.mjs";
+import { n as LogicRowProps, t as LogicRow } from "./LogicRow-BcuiSTHN.mjs";
 export { LogicRowProps, LogicRow as default };

package/dist/MaskedInput.d.mts

@@ -1,4 +1,4 @@
-import { a as InputProps } from "./Input-BPClVzwD.mjs";
+import { a as InputProps } from "./Input-DMgVyZyq.mjs";
 import * as _$react from "react";
 import { IMaskInputProps } from "react-imask/mixin";
 

package/dist/{Menu-CUp_9HgC.d.mts → Menu-Bv8dsrz6.d.mts}

@@ -22,7 +22,7 @@ interface MenuItemProps<T extends ElementType = 'div'> {
   selected?: boolean;
   size?: 'sm' | 'md';
 }
-declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "disabled" | "size" | "variant" | "focused" | "selected">, never>;
+declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "disabled" | "size" | "selected" | "focused" | "variant">, never>;
 declare const IconContainer: StyledComponent<"div", any, {
   suffix?: boolean;
 }, never>;
@@ -67,4 +67,4 @@ declare const Menu: {
 };
 //#endregion
 export { MenuDivider as a, MenuItem as c, MenuList as d, MenuProps as f, Menu as i, MenuItemProps as l, IconContainer as n, MenuHeading as o, ListItem as r, MenuHeadingProps as s, FloatingCard as t, MenuItemType as u };
-//# sourceMappingURL=Menu-CUp_9HgC.d.mts.map
+//# sourceMappingURL=Menu-Bv8dsrz6.d.mts.map

package/dist/{Menu-CPYXo61N.mjs → Menu-DmeMgN-i.mjs}

@@ -2,9 +2,9 @@ import { darkTheme } from "./theme.mjs";
 import { isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import PDSProvider from "./lib/PDSProvider.mjs";
-import "./variables/text.mjs";
 import { t as Card_default } from "./Card-BMCB9eFC.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
+import "./variables/text.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -164,4 +164,4 @@ Menu.Item = MenuItem;
 //#endregion
 export { MenuDivider as a, MenuList as c, Menu as i, IconContainer as n, MenuHeading as o, ListItem as r, MenuItem as s, FloatingCard as t };
 
-//# sourceMappingURL=Menu-CPYXo61N.mjs.map
+//# sourceMappingURL=Menu-DmeMgN-i.mjs.map

package/dist/{Menu-CPYXo61N.mjs.map → Menu-DmeMgN-i.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Menu-CPYXo61N.mjs","names":["Card"],"sources":["../components/Menu/Menu.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type StyledComponent,\n  type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Card from 'design-system/components/Card';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { darkTheme } from 'design-system/theme';\nimport { FontWeight } from 'design-system/variables/text';\n\nexport const FloatingCard: StyledComponent<\n  ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n  DefaultTheme\n> = styled(Card)`\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  outline: none;\n  z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n  ({ role, doNotSetRole = false }) => ({\n    role: doNotSetRole ? undefined : (role ?? 'menu'),\n  }),\n)<{ padding?: Spacing }>`\n  list-style: none;\n  margin: 0;\n  padding: ${({ padding }) => padding || Spacing[2]};\n  outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n  children: ReactNode;\n  prefixIcon?: ReactNode;\n  suffixIcon?: ReactNode;\n  disabled?: boolean;\n  variant?: 'basic' | 'danger';\n  as?: T;\n  stretchLabel?: boolean;\n  subtitle?: string;\n  focused?: boolean;\n  selected?: boolean;\n  size?: 'sm' | 'md';\n}\n\nexport const ListItem = styled.li<\n  Pick<MenuItemProps, 'variant' | 'disabled' | 'focused' | 'selected' | 'size'>\n>`\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  display: flex;\n  align-items: center;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n  border-radius: 4px;\n  list-style: none;\n  text-decoration: none;\n  color: ${({ theme }) => theme.color.text.primary};\n  cursor: pointer;\n  ${({ focused, selected, theme }) =>\n    focused &&\n    !selected &&\n    css`\n      outline: none;\n      color: ${theme.color.text.primary};\n      background-color: ${theme.color.background.secondary};\n    `}\n\n  &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n    ${({ selected }) =>\n      !selected &&\n      css`\n        outline: none;\n        color: ${({ theme }) => theme.color.text.primary};\n        background-color: ${({ theme }) => theme.color.background.secondary};\n      `}\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${Color.BorderFocus};\n    outline-offset: 1px;\n  }\n\n  ${({ selected, theme }) =>\n    selected &&\n    css`\n      outline: none;\n      color: ${theme.color.text.brand};\n      background-color: ${theme.color.background.highlight};\n    `}\n\n  &${isDisabled} {\n    color: ${({ theme }) => theme.color.text.disabled};\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Variant Styling */\n  ${({ theme, variant }) =>\n    variant === 'danger' &&\n    css`\n      color: ${theme.color.variants[variant].default};\n\n      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n        color: ${Color.CoreRed900};\n        background-color: ${theme.color.variants[variant].highlightLight};\n      }\n\n      &${isDisabled} {\n        color: ${({ theme }) => theme.color.variants[variant].disabled};\n      }\n    `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: ${Spacing[2]};\n  line-height: 1;\n\n  ${({ suffix }) =>\n    suffix &&\n    css`\n      margin-left: ${Spacing[2]};\n    `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n  line-height: 16px;\n  ${({ stretchLabel }) =>\n    stretchLabel &&\n    css`\n      width: 100%;\n    `}\n`;\n\n/**\n * https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n  MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n  {\n    children,\n    disabled,\n    variant,\n    prefixIcon,\n    suffixIcon,\n    stretchLabel,\n    selected,\n    size,\n    ...elemProps\n  },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <ListItem\n      disabled={disabled}\n      variant={variant}\n      selected={selected}\n      ref={ref}\n      aria-disabled={disabled}\n      // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n      aria-current={selected ? 'true' : undefined}\n      role='menuitem'\n      tabIndex={disabled ? -1 : 0}\n      size={size}\n      {...elemProps}\n    >\n      {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n      <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n      {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n    </ListItem>\n  );\n});\n\nconst StyledMenuDivider = styled.hr`\n  height: 0px;\n  padding: 0px;\n  font-size: 0;\n  margin: ${Spacing[2]} -${Spacing[2]};\n  border: none;\n  border-top: 1px solid ${({ theme }) => theme.color.border.primary};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n  <DropdownMenu.Separator asChild>\n    <StyledMenuDivider {...props} />\n  </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n  size?: 'sm' | 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n  ${paragraphMixins.sm};\n  text-transform: uppercase;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n  display: block;\n  color: ${({ theme }) => theme.color.text.secondary};\n  font-weight: ${FontWeight.Regular};\n  letter-spacing: 0.1em;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n  children?: ReactNode;\n  className?: string;\n  variant?: 'light' | 'dark';\n  as?: T;\n  doNotSetRole?: boolean;\n  containerProps?: ComponentPropsWithRef<'div'>;\n  listRef?: RefObject<T>;\n  itemProps?:\n    | ComponentPropsWithoutRef<'li'>\n    | ((\n        props: ComponentPropsWithoutRef<'li'>,\n        index: number,\n      ) => Partial<ComponentPropsWithRef<'li'>>);\n  onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n  children,\n  variant,\n  containerProps,\n  itemProps,\n  listRef,\n  className,\n  onClose,\n  as,\n  ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n  const menu = (\n    <FloatingCard {...containerProps} className={className}>\n      <MenuList {...props} as={as as any} ref={listRef}>\n        {children}\n        <DismissButton onDismiss={onClose} />\n      </MenuList>\n    </FloatingCard>\n  );\n\n  if (variant === 'dark') {\n    return <PDSProvider theme={darkTheme}>{menu}</PDSProvider>;\n  }\n\n  return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}
+{"version":3,"file":"Menu-DmeMgN-i.mjs","names":["Card"],"sources":["../components/Menu/Menu.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type StyledComponent,\n  type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Card from 'design-system/components/Card';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { darkTheme } from 'design-system/theme';\nimport { FontWeight } from 'design-system/variables/text';\n\nexport const FloatingCard: StyledComponent<\n  ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n  DefaultTheme\n> = styled(Card)`\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  outline: none;\n  z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n  ({ role, doNotSetRole = false }) => ({\n    role: doNotSetRole ? undefined : (role ?? 'menu'),\n  }),\n)<{ padding?: Spacing }>`\n  list-style: none;\n  margin: 0;\n  padding: ${({ padding }) => padding || Spacing[2]};\n  outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n  children: ReactNode;\n  prefixIcon?: ReactNode;\n  suffixIcon?: ReactNode;\n  disabled?: boolean;\n  variant?: 'basic' | 'danger';\n  as?: T;\n  stretchLabel?: boolean;\n  subtitle?: string;\n  focused?: boolean;\n  selected?: boolean;\n  size?: 'sm' | 'md';\n}\n\nexport const ListItem = styled.li<\n  Pick<MenuItemProps, 'variant' | 'disabled' | 'focused' | 'selected' | 'size'>\n>`\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  display: flex;\n  align-items: center;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n  border-radius: 4px;\n  list-style: none;\n  text-decoration: none;\n  color: ${({ theme }) => theme.color.text.primary};\n  cursor: pointer;\n  ${({ focused, selected, theme }) =>\n    focused &&\n    !selected &&\n    css`\n      outline: none;\n      color: ${theme.color.text.primary};\n      background-color: ${theme.color.background.secondary};\n    `}\n\n  &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n    ${({ selected }) =>\n      !selected &&\n      css`\n        outline: none;\n        color: ${({ theme }) => theme.color.text.primary};\n        background-color: ${({ theme }) => theme.color.background.secondary};\n      `}\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${Color.BorderFocus};\n    outline-offset: 1px;\n  }\n\n  ${({ selected, theme }) =>\n    selected &&\n    css`\n      outline: none;\n      color: ${theme.color.text.brand};\n      background-color: ${theme.color.background.highlight};\n    `}\n\n  &${isDisabled} {\n    color: ${({ theme }) => theme.color.text.disabled};\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Variant Styling */\n  ${({ theme, variant }) =>\n    variant === 'danger' &&\n    css`\n      color: ${theme.color.variants[variant].default};\n\n      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n        color: ${Color.CoreRed900};\n        background-color: ${theme.color.variants[variant].highlightLight};\n      }\n\n      &${isDisabled} {\n        color: ${({ theme }) => theme.color.variants[variant].disabled};\n      }\n    `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: ${Spacing[2]};\n  line-height: 1;\n\n  ${({ suffix }) =>\n    suffix &&\n    css`\n      margin-left: ${Spacing[2]};\n    `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n  line-height: 16px;\n  ${({ stretchLabel }) =>\n    stretchLabel &&\n    css`\n      width: 100%;\n    `}\n`;\n\n/**\n * https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n  MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n  {\n    children,\n    disabled,\n    variant,\n    prefixIcon,\n    suffixIcon,\n    stretchLabel,\n    selected,\n    size,\n    ...elemProps\n  },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <ListItem\n      disabled={disabled}\n      variant={variant}\n      selected={selected}\n      ref={ref}\n      aria-disabled={disabled}\n      // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n      aria-current={selected ? 'true' : undefined}\n      role='menuitem'\n      tabIndex={disabled ? -1 : 0}\n      size={size}\n      {...elemProps}\n    >\n      {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n      <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n      {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n    </ListItem>\n  );\n});\n\nconst StyledMenuDivider = styled.hr`\n  height: 0px;\n  padding: 0px;\n  font-size: 0;\n  margin: ${Spacing[2]} -${Spacing[2]};\n  border: none;\n  border-top: 1px solid ${({ theme }) => theme.color.border.primary};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n  <DropdownMenu.Separator asChild>\n    <StyledMenuDivider {...props} />\n  </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n  size?: 'sm' | 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n  ${paragraphMixins.sm};\n  text-transform: uppercase;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n  display: block;\n  color: ${({ theme }) => theme.color.text.secondary};\n  font-weight: ${FontWeight.Regular};\n  letter-spacing: 0.1em;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n  children?: ReactNode;\n  className?: string;\n  variant?: 'light' | 'dark';\n  as?: T;\n  doNotSetRole?: boolean;\n  containerProps?: ComponentPropsWithRef<'div'>;\n  listRef?: RefObject<T>;\n  itemProps?:\n    | ComponentPropsWithoutRef<'li'>\n    | ((\n        props: ComponentPropsWithoutRef<'li'>,\n        index: number,\n      ) => Partial<ComponentPropsWithRef<'li'>>);\n  onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n  children,\n  variant,\n  containerProps,\n  itemProps,\n  listRef,\n  className,\n  onClose,\n  as,\n  ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n  const menu = (\n    <FloatingCard {...containerProps} className={className}>\n      <MenuList {...props} as={as as any} ref={listRef}>\n        {children}\n        <DismissButton onDismiss={onClose} />\n      </MenuList>\n    </FloatingCard>\n  );\n\n  if (variant === 'dark') {\n    return <PDSProvider theme={darkTheme}>{menu}</PDSProvider>;\n  }\n\n  return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}

package/dist/Menu.d.mts

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-CUp_9HgC.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "./Menu-Bv8dsrz6.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/Modal.d.mts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "./Button-9p469xA1.mjs";
+import { r as ButtonProps } from "./Button-Vd5O4DUp.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react_aria_components0 from "react-aria-components";

package/dist/{PageHeader-D-6W61E_.mjs → PageHeader-jSLud2JI.mjs}

@@ -1,5 +1,5 @@
 import { i as Paragraph, n as Heading } from "./Text-RcEfNFLx.mjs";
-import { t as Breadcrumbs } from "./Breadcrumbs-CDZ_Mrcg.mjs";
+import { t as Breadcrumbs } from "./Breadcrumbs-W8hIhdHD.mjs";
 import { Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -29,6 +29,7 @@ const TitleContainer = styled.div`
 const LeftContainer = styled.div`
   display: flex;
   align-items: center;
+  gap: ${Spacing[2]};
 `;
 const RightContainer = styled.div`
   display: flex;
@@ -38,7 +39,7 @@ const RightContainer = styled.div`
 const PageHeader = ({ title, breadcrumbs, subtitle, level = "product", prepend, append, children, ...props }) => /* @__PURE__ */ jsxs(PageHeaderContainer, {
 	...props,
 	children: [/* @__PURE__ */ jsxs(LeftContainer, { children: [
-		prepend && /* @__PURE__ */ jsx("div", { children: prepend }),
+		prepend,
 		/* @__PURE__ */ jsxs(TitleContainer, { children: [breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, {
 			size: "lg",
 			...breadcrumbs
@@ -55,10 +56,10 @@ const PageHeader = ({ title, breadcrumbs, subtitle, level = "product", prepend,
 			size: "md",
 			children: subtitle
 		})] }),
-		append && /* @__PURE__ */ jsx("div", { children: append })
+		append
 	] }), children && /* @__PURE__ */ jsx(RightContainer, { children })]
 });
 //#endregion
 export { PageHeaderContainer as n, PageHeader as t };
 
-//# sourceMappingURL=PageHeader-D-6W61E_.mjs.map
+//# sourceMappingURL=PageHeader-jSLud2JI.mjs.map

package/dist/PageHeader-jSLud2JI.mjs.map

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

package/dist/PageHeader.d.mts

@@ -7,7 +7,6 @@ import { ReactNode } from "react";
 declare const PageHeaderContainer: _$styled_components0.StyledComponent<"header", any, {}, never>;
 interface PageHeaderCommonProps {
   level?: 'product' | 'detail';
-  subtitle?: ReactNode;
   prepend?: ReactNode;
   append?: ReactNode;
   children?: ReactNode;
@@ -15,9 +14,15 @@ interface PageHeaderCommonProps {
 /** Exactly one heading source is required: either `title` or `breadcrumbs`. */
 type PageHeaderProps = PageHeaderCommonProps & ({
   title: ReactNode;
+  subtitle?: ReactNode;
   breadcrumbs?: never;
 } | {
-  title?: never; /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */
+  title?: never;
+  /**
+   * The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it
+   * carried (e.g. an object ID) into the current crumb, with a copy action if useful.
+   */
+  subtitle?: never; /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */
   breadcrumbs: BreadcrumbsProps;
 });
 declare const PageHeader: ({

package/dist/{Pagination-ztqhywAP.mjs → Pagination-BeYukNCj.mjs}

@@ -1,7 +1,7 @@
 import { t as HStack } from "./Stack-Bl54WmhY.mjs";
-import { n as Button } from "./IconButton-CIWiEsS-.mjs";
-import { n as Input } from "./Input-BFI_e7aU.mjs";
-import { n as Select, t as Option } from "./Select-cPEORy70.mjs";
+import { n as Button } from "./IconButton-P8w0JDI5.mjs";
+import { n as Input } from "./Input-QC6xla6I.mjs";
+import { n as Select, t as Option } from "./Select-C1ZoRk39.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -202,4 +202,4 @@ var Pagination_default = Pagination;
 //#endregion
 export { MIN_PAGE_SIZE as a, DEFAULT_PAGE_SIZE_OPTIONS as i, PAGE_LIMIT_BEFORE_SCROLL_MODE as n, PageSelector as r, Pagination_default as t };
 
-//# sourceMappingURL=Pagination-ztqhywAP.mjs.map
+//# sourceMappingURL=Pagination-BeYukNCj.mjs.map

package/dist/{Pagination-ztqhywAP.mjs.map → Pagination-BeYukNCj.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Pagination-ztqhywAP.mjs","names":[],"sources":["../components/Pagination/constants.ts","../components/Pagination/PageSelector.tsx","../components/Pagination/PageSizeSelector.tsx","../components/Pagination/Pagination.tsx","../components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash/fp';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nimport type { PaginationParams } from './types';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n  padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n  white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n  paginationParams: PaginationParams;\n  handlePageLinkClick: (pageNumber: number) => void;\n  isLoading?: boolean;\n  /**\n   * Called with the new page number after the page changes (next, prev, or\n   * typed input). Lets the consumer react to page changes -- e.g. scroll the\n   * page back to the top.\n   */\n  onPageChange?: (pageNumber: number) => void;\n}\n\nexport default function PageSelector({\n  paginationParams,\n  handlePageLinkClick,\n  isLoading,\n  onPageChange,\n}: PageSelectorProps) {\n  const {\n    'current-page': currentPage,\n    'total-pages': totalPages,\n    'lower-bound': lowerBound,\n  } = paginationParams ?? {};\n  const [selectedPage, setSelectedPage] = useState<number | undefined>(currentPage);\n\n  // We don't use useDebounced to avoid function object reference issues.\n  const handlePageLinkClickDebounced = useMemo(\n    () => debounce(500, handlePageLinkClick),\n    [handlePageLinkClick],\n  );\n\n  // Keep input state synced to pagination state when other user action changes\n  // pagination state.\n  useEffect(() => {\n    if (currentPage != null) {\n      setSelectedPage(currentPage);\n    }\n  }, [currentPage]);\n\n  if (!paginationParams) {\n    return <div />;\n  }\n\n  return (\n    <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n      <PageInput>\n        {totalPages < PAGE_LIMIT_BEFORE_SCROLL_MODE && !lowerBound ? (\n          <Input\n            aria-label='Go to page number'\n            size='sm'\n            inputSize={2}\n            onChange={(e) => {\n              const value = e.target.valueAsNumber;\n              if (Number.isNaN(value)) {\n                setSelectedPage(undefined);\n              } else {\n                // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n                setSelectedPage(value);\n                const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n                handlePageLinkClickDebounced(boundedValue);\n                onPageChange?.(boundedValue);\n              }\n            }}\n            onBlur={(e) => {\n              // Fill blank value on blur.\n              if (Number.isNaN(e.target.valueAsNumber)) {\n                setSelectedPage(currentPage);\n              }\n            }}\n            min={1}\n            max={totalPages}\n            type='number'\n            disabled={isLoading}\n            value={selectedPage ?? ''}\n          />\n        ) : (\n          currentPage + ' '\n        )}\n        of {lowerBound ? 'many' : totalPages} pages\n      </PageInput>\n      <Button\n        id='pagination__page-selector--left'\n        disabled={currentPage === 1 || isLoading}\n        onClick={() => {\n          if (currentPage !== 1) {\n            const prevPageNum = currentPage - 1;\n            setSelectedPage(prevPageNum);\n            handlePageLinkClick(prevPageNum);\n            onPageChange?.(prevPageNum);\n          }\n        }}\n        data-test='pagination__page-selector-paddle-left'\n        variant='inverse'\n        size='sm'\n        width='auto'\n        aria-label='Previous page'\n      >\n        Prev\n      </Button>\n      <Button\n        id='pagination__page-selector--right'\n        disabled={(currentPage === totalPages && !lowerBound) || isLoading}\n        onClick={() => {\n          if (currentPage !== totalPages || lowerBound) {\n            const nextPageNum = currentPage + 1;\n            setSelectedPage(nextPageNum);\n            handlePageLinkClick(nextPageNum);\n            onPageChange?.(nextPageNum);\n          }\n        }}\n        data-test='pagination__page-selector-paddle-right'\n        variant='inverse'\n        size='sm'\n        width='auto'\n        aria-label='Next page'\n      >\n        Next\n      </Button>\n    </PageSelectorStack>\n  );\n}\n","import styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nconst Selector = styled('div')`\n  padding: ${Spacing[2]};\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  gap: ${Spacing[2]};\n  padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n  currentPageSize: number;\n  pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n  padding: 0 ${Spacing[1]};\n  color: ${Color.PrimaryPurple};\n  cursor: pointer;\n\n  ${({ currentPageSize, pageSizeOption }) => {\n    if (currentPageSize === pageSizeOption) {\n      return `\n        ${Typography.TextMediumBold};\n        text-decoration: underline;\n      `;\n    }\n  }};\n\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\ninterface PageSizeSelectorProps {\n  pageSize: number;\n  pageSizeOptions: number[];\n  handlePageSizeClick: (pageSize: number) => void;\n  /**\n   * Element the options menu renders into. Pass a container inside the surrounding dialog when the\n   * pager sits in a clipping container, where the menu would otherwise be cut off.\n   */\n  menuPortalContainer?: HTMLElement | null;\n}\n\nconst PageSizeSelector = ({\n  pageSize,\n  pageSizeOptions,\n  handlePageSizeClick,\n  menuPortalContainer,\n}: PageSizeSelectorProps) => {\n  // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n  const pageSizes = [\n    ...pageSizeOptions,\n    ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n  ].sort((a, b) => a - b);\n\n  return (\n    <Selector data-test='pagination__page-size-selector'>\n      <Label>\n        Items per page:\n        <Select\n          value={pageSize.toString()}\n          onValueChange={(val) => handlePageSizeClick(Number(val))}\n          size='sm'\n          portal={menuPortalContainer != null}\n          portalContainer={menuPortalContainer}\n        >\n          {pageSizes.map((size) => (\n            <Option key={size} value={size.toString()}>\n              {size}\n            </Option>\n          ))}\n        </Select>\n      </Label>\n    </Selector>\n  );\n};\n\nexport default PageSizeSelector;\n","import styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n  ${Typography.TextMedium};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n  display: flex;\n  align-items: center;\n\n  color: ${Color.TextPrimary};\n`;\n\ninterface PaginationProps {\n  pageSize?: number;\n  pageSizeOptions?: number[];\n  paginationParams?: PaginationParams;\n  handlePageSizeClick: (pageSize: number) => void;\n  handlePageLinkClick: (pageNumber: number) => void;\n  isLoading?: boolean;\n  showPageSizeSelector?: boolean;\n  /**\n   * Called with the new page number after the page changes. Lets the consumer\n   * react to page changes -- e.g. scroll the page back to the top.\n   */\n  onPageChange?: (pageNumber: number) => void;\n  /**\n   * Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n   * the pager sits in a clipping container, where the menu would otherwise be cut off.\n   */\n  menuPortalContainer?: HTMLElement | null;\n}\n\nconst Pagination = ({\n  pageSize,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  paginationParams,\n  handlePageSizeClick,\n  handlePageLinkClick,\n  isLoading,\n  showPageSizeSelector = true,\n  onPageChange,\n  menuPortalContainer,\n}: PaginationProps) => {\n  if (!paginationParams || !pageSize) {\n    return <div />;\n  }\n\n  const {\n    'current-page': currentPage,\n    'total-count': totalCount,\n    'total-pages': totalPages,\n    'lower-bound': lowerBound,\n  } = paginationParams;\n\n  // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n  // items might be limited by max pages, and that the total could change based on page size.\n  // To limit user confusion here, we use 'many' instead of a specific number.\n  const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? 'many' : totalCount;\n\n  const lastItemIndex = lowerBound\n    ? currentPage * pageSize\n    : Math.min(currentPage * pageSize, totalCount);\n  const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n  return (\n    <Container role='navigation' aria-label='pagination'>\n      {showPageSizeSelector && (\n        <PageSizeSelector\n          pageSize={pageSize}\n          pageSizeOptions={pageSizeOptions}\n          handlePageSizeClick={handlePageSizeClick}\n          menuPortalContainer={menuPortalContainer}\n        />\n      )}\n      {totalCount > 0 && (\n        <>\n          <div>\n            Showing {firstItemIndex}-{lastItemIndex} of {totalCountDisplay} items\n          </div>\n          <PaginationInfo>\n            <PageSelector\n              paginationParams={paginationParams}\n              handlePageLinkClick={handlePageLinkClick}\n              isLoading={isLoading}\n              onPageChange={onPageChange}\n            />\n          </PaginationInfo>\n        </>\n      )}\n    </Container>\n  );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport * from './constants';\nexport default Pagination;\n"],"mappings":"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"}
+{"version":3,"file":"Pagination-BeYukNCj.mjs","names":[],"sources":["../components/Pagination/constants.ts","../components/Pagination/PageSelector.tsx","../components/Pagination/PageSizeSelector.tsx","../components/Pagination/Pagination.tsx","../components/Pagination/index.ts"],"sourcesContent":["export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 300];\nexport const MIN_PAGE_SIZE = 10;\n","import { debounce } from 'lodash/fp';\nimport { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport Button from '@persona/design-system/components/Button';\nimport { Input } from '@persona/design-system/components/Input';\nimport { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nimport type { PaginationParams } from './types';\n\n// After a certain limit, it no longer makes sense for someone\n// to jump to the last page. Deep paging has performance limitations.\nexport const PAGE_LIMIT_BEFORE_SCROLL_MODE = 100;\n\nconst PageSelectorStack = styled(HStack).attrs({ justify: 'flex-end' })`\n  padding: ${Spacing[2]};\n`;\n\nexport const PageInput = styled(HStack).attrs({ align: 'center' })`\n  white-space: nowrap;\n`;\n\ninterface PageSelectorProps {\n  paginationParams: PaginationParams;\n  handlePageLinkClick: (pageNumber: number) => void;\n  isLoading?: boolean;\n  /**\n   * Called with the new page number after the page changes (next, prev, or\n   * typed input). Lets the consumer react to page changes -- e.g. scroll the\n   * page back to the top.\n   */\n  onPageChange?: (pageNumber: number) => void;\n}\n\nexport default function PageSelector({\n  paginationParams,\n  handlePageLinkClick,\n  isLoading,\n  onPageChange,\n}: PageSelectorProps) {\n  const {\n    'current-page': currentPage,\n    'total-pages': totalPages,\n    'lower-bound': lowerBound,\n  } = paginationParams ?? {};\n  const [selectedPage, setSelectedPage] = useState<number | undefined>(currentPage);\n\n  // We don't use useDebounced to avoid function object reference issues.\n  const handlePageLinkClickDebounced = useMemo(\n    () => debounce(500, handlePageLinkClick),\n    [handlePageLinkClick],\n  );\n\n  // Keep input state synced to pagination state when other user action changes\n  // pagination state.\n  useEffect(() => {\n    if (currentPage != null) {\n      setSelectedPage(currentPage);\n    }\n  }, [currentPage]);\n\n  if (!paginationParams) {\n    return <div />;\n  }\n\n  return (\n    <PageSelectorStack data-test='pagination__page-selector' id='pagination__page-selector'>\n      <PageInput>\n        {totalPages < PAGE_LIMIT_BEFORE_SCROLL_MODE && !lowerBound ? (\n          <Input\n            aria-label='Go to page number'\n            size='sm'\n            inputSize={2}\n            onChange={(e) => {\n              const value = e.target.valueAsNumber;\n              if (Number.isNaN(value)) {\n                setSelectedPage(undefined);\n              } else {\n                // Setting unbounded value feels smoother as the value is not corrected until after the fetch via useEffect.\n                setSelectedPage(value);\n                const boundedValue = Math.min(Math.max(e.target.valueAsNumber, 1), totalPages);\n                handlePageLinkClickDebounced(boundedValue);\n                onPageChange?.(boundedValue);\n              }\n            }}\n            onBlur={(e) => {\n              // Fill blank value on blur.\n              if (Number.isNaN(e.target.valueAsNumber)) {\n                setSelectedPage(currentPage);\n              }\n            }}\n            min={1}\n            max={totalPages}\n            type='number'\n            disabled={isLoading}\n            value={selectedPage ?? ''}\n          />\n        ) : (\n          currentPage + ' '\n        )}\n        of {lowerBound ? 'many' : totalPages} pages\n      </PageInput>\n      <Button\n        id='pagination__page-selector--left'\n        disabled={currentPage === 1 || isLoading}\n        onClick={() => {\n          if (currentPage !== 1) {\n            const prevPageNum = currentPage - 1;\n            setSelectedPage(prevPageNum);\n            handlePageLinkClick(prevPageNum);\n            onPageChange?.(prevPageNum);\n          }\n        }}\n        data-test='pagination__page-selector-paddle-left'\n        variant='inverse'\n        size='sm'\n        width='auto'\n        aria-label='Previous page'\n      >\n        Prev\n      </Button>\n      <Button\n        id='pagination__page-selector--right'\n        disabled={(currentPage === totalPages && !lowerBound) || isLoading}\n        onClick={() => {\n          if (currentPage !== totalPages || lowerBound) {\n            const nextPageNum = currentPage + 1;\n            setSelectedPage(nextPageNum);\n            handlePageLinkClick(nextPageNum);\n            onPageChange?.(nextPageNum);\n          }\n        }}\n        data-test='pagination__page-selector-paddle-right'\n        variant='inverse'\n        size='sm'\n        width='auto'\n        aria-label='Next page'\n      >\n        Next\n      </Button>\n    </PageSelectorStack>\n  );\n}\n","import styled from 'styled-components';\n\nimport Select, { Option } from '@persona/design-system/components/Select';\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\n\nconst Selector = styled('div')`\n  padding: ${Spacing[2]};\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst Label = styled.label`\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  gap: ${Spacing[2]};\n  padding: ${Spacing[2]};\n`;\n\ninterface PageSizeOptionProps {\n  currentPageSize: number;\n  pageSizeOption: number;\n}\n\nexport const PageSizeOption = styled('div')<PageSizeOptionProps>`\n  padding: 0 ${Spacing[1]};\n  color: ${Color.PrimaryPurple};\n  cursor: pointer;\n\n  ${({ currentPageSize, pageSizeOption }) => {\n    if (currentPageSize === pageSizeOption) {\n      return `\n        ${Typography.TextMediumBold};\n        text-decoration: underline;\n      `;\n    }\n  }};\n\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\ninterface PageSizeSelectorProps {\n  pageSize: number;\n  pageSizeOptions: number[];\n  handlePageSizeClick: (pageSize: number) => void;\n  /**\n   * Element the options menu renders into. Pass a container inside the surrounding dialog when the\n   * pager sits in a clipping container, where the menu would otherwise be cut off.\n   */\n  menuPortalContainer?: HTMLElement | null;\n}\n\nconst PageSizeSelector = ({\n  pageSize,\n  pageSizeOptions,\n  handlePageSizeClick,\n  menuPortalContainer,\n}: PageSizeSelectorProps) => {\n  // Add pageSize to selector just in case it isn't part of the options so UI doesn't look weird\n  const pageSizes = [\n    ...pageSizeOptions,\n    ...(pageSizeOptions.includes(pageSize) ? [] : [pageSize]),\n  ].sort((a, b) => a - b);\n\n  return (\n    <Selector data-test='pagination__page-size-selector'>\n      <Label>\n        Items per page:\n        <Select\n          value={pageSize.toString()}\n          onValueChange={(val) => handlePageSizeClick(Number(val))}\n          size='sm'\n          portal={menuPortalContainer != null}\n          portalContainer={menuPortalContainer}\n        >\n          {pageSizes.map((size) => (\n            <Option key={size} value={size.toString()}>\n              {size}\n            </Option>\n          ))}\n        </Select>\n      </Label>\n    </Selector>\n  );\n};\n\nexport default PageSizeSelector;\n","import styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';\nimport PageSelector from './PageSelector';\nimport PageSizeSelector from './PageSizeSelector';\nimport type { PaginationParams } from './types';\n\n// NB: this is configured in config/initializers/kaminari.rb\nconst MAX_PAGES = 100;\n\nconst Container = styled('nav')`\n  ${Typography.TextMedium};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nexport const PaginationInfo = styled('div')`\n  display: flex;\n  align-items: center;\n\n  color: ${Color.TextPrimary};\n`;\n\ninterface PaginationProps {\n  pageSize?: number;\n  pageSizeOptions?: number[];\n  paginationParams?: PaginationParams;\n  handlePageSizeClick: (pageSize: number) => void;\n  handlePageLinkClick: (pageNumber: number) => void;\n  isLoading?: boolean;\n  showPageSizeSelector?: boolean;\n  /**\n   * Called with the new page number after the page changes. Lets the consumer\n   * react to page changes -- e.g. scroll the page back to the top.\n   */\n  onPageChange?: (pageNumber: number) => void;\n  /**\n   * Element the page-size menu renders into. Pass a container inside the surrounding dialog when\n   * the pager sits in a clipping container, where the menu would otherwise be cut off.\n   */\n  menuPortalContainer?: HTMLElement | null;\n}\n\nconst Pagination = ({\n  pageSize,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  paginationParams,\n  handlePageSizeClick,\n  handlePageLinkClick,\n  isLoading,\n  showPageSizeSelector = true,\n  onPageChange,\n  menuPortalContainer,\n}: PaginationProps) => {\n  if (!paginationParams || !pageSize) {\n    return <div />;\n  }\n\n  const {\n    'current-page': currentPage,\n    'total-count': totalCount,\n    'total-pages': totalPages,\n    'lower-bound': lowerBound,\n  } = paginationParams;\n\n  // If the total number of pages is the same as MAX_PAGES, we guess that the total number of\n  // items might be limited by max pages, and that the total could change based on page size.\n  // To limit user confusion here, we use 'many' instead of a specific number.\n  const totalCountDisplay = lowerBound || totalPages >= MAX_PAGES ? 'many' : totalCount;\n\n  const lastItemIndex = lowerBound\n    ? currentPage * pageSize\n    : Math.min(currentPage * pageSize, totalCount);\n  const firstItemIndex = pageSize * (currentPage - 1) + 1;\n\n  return (\n    <Container role='navigation' aria-label='pagination'>\n      {showPageSizeSelector && (\n        <PageSizeSelector\n          pageSize={pageSize}\n          pageSizeOptions={pageSizeOptions}\n          handlePageSizeClick={handlePageSizeClick}\n          menuPortalContainer={menuPortalContainer}\n        />\n      )}\n      {totalCount > 0 && (\n        <>\n          <div>\n            Showing {firstItemIndex}-{lastItemIndex} of {totalCountDisplay} items\n          </div>\n          <PaginationInfo>\n            <PageSelector\n              paginationParams={paginationParams}\n              handlePageLinkClick={handlePageLinkClick}\n              isLoading={isLoading}\n              onPageChange={onPageChange}\n            />\n          </PaginationInfo>\n        </>\n      )}\n    </Container>\n  );\n};\n\nexport default Pagination;\n","import Pagination from './Pagination';\n\nexport { default as PageSelector, PAGE_LIMIT_BEFORE_SCROLL_MODE } from './PageSelector';\nexport * from './constants';\nexport default Pagination;\n"],"mappings":";;;;;;;;;;AAAA,MAAa,4BAA4B;CAAC;CAAI;CAAI;CAAI;CAAK;CAAI;AAC/D,MAAa,gBAAgB;;;ACY7B,MAAa,gCAAgC;AAE7C,MAAM,oBAAoB,OAAO,OAAO,CAAC,MAAM,EAAE,SAAS,YAAY,CAAC;aAC1D,QAAQ,GAAG;;AAGxB,MAAa,YAAY,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;;;AAgBlE,SAAwB,aAAa,EACnC,kBACA,qBACA,WACA,gBACoB;CACpB,MAAM,EACJ,gBAAgB,aAChB,eAAe,YACf,eAAe,eACb,oBAAoB,EAAE;CAC1B,MAAM,CAAC,cAAc,mBAAmB,SAA6B,YAAY;CAGjF,MAAM,+BAA+B,cAC7B,SAAS,KAAK,oBAAoB,EACxC,CAAC,oBAAoB,CACtB;AAID,iBAAgB;AACd,MAAI,eAAe,KACjB,iBAAgB,YAAY;IAE7B,CAAC,YAAY,CAAC;AAEjB,KAAI,CAAC,iBACH,QAAO,oBAAC,OAAD,EAAO,CAAA;AAGhB,QACE,qBAAC,mBAAD;EAAmB,aAAU;EAA4B,IAAG;YAA5D;GACE,qBAAC,WAAD,EAAA,UAAA;IACG,aAAA,OAA8C,CAAC,aAC9C,oBAAC,OAAD;KACE,cAAW;KACX,MAAK;KACL,WAAW;KACX,WAAW,MAAM;MACf,MAAM,QAAQ,EAAE,OAAO;AACvB,UAAI,OAAO,MAAM,MAAM,CACrB,iBAAgB,KAAA,EAAU;WACrB;AAEL,uBAAgB,MAAM;OACtB,MAAM,eAAe,KAAK,IAAI,KAAK,IAAI,EAAE,OAAO,eAAe,EAAE,EAAE,WAAW;AAC9E,oCAA6B,aAAa;AAC1C,sBAAe,aAAa;;;KAGhC,SAAS,MAAM;AAEb,UAAI,OAAO,MAAM,EAAE,OAAO,cAAc,CACtC,iBAAgB,YAAY;;KAGhC,KAAK;KACL,KAAK;KACL,MAAK;KACL,UAAU;KACV,OAAO,gBAAgB;KACvB,CAAA,GAEF,cAAc;IACd;IACE,aAAa,SAAS;IAAW;IAC3B,EAAA,CAAA;GACZ,oBAAC,QAAD;IACE,IAAG;IACH,UAAU,gBAAgB,KAAK;IAC/B,eAAe;AACb,SAAI,gBAAgB,GAAG;MACrB,MAAM,cAAc,cAAc;AAClC,sBAAgB,YAAY;AAC5B,0BAAoB,YAAY;AAChC,qBAAe,YAAY;;;IAG/B,aAAU;IACV,SAAQ;IACR,MAAK;IACL,OAAM;IACN,cAAW;cACZ;IAEQ,CAAA;GACT,oBAAC,QAAD;IACE,IAAG;IACH,UAAW,gBAAgB,cAAc,CAAC,cAAe;IACzD,eAAe;AACb,SAAI,gBAAgB,cAAc,YAAY;MAC5C,MAAM,cAAc,cAAc;AAClC,sBAAgB,YAAY;AAC5B,0BAAoB,YAAY;AAChC,qBAAe,YAAY;;;IAG/B,aAAU;IACV,SAAQ;IACR,MAAK;IACL,OAAM;IACN,cAAW;cACZ;IAEQ,CAAA;GACS;;;;;ACxIxB,MAAM,WAAW,OAAO,MAAM;aACjB,QAAQ,GAAG;;;;AAKxB,MAAM,QAAQ,OAAO,KAAK;;;;SAIjB,QAAQ,GAAG;aACP,QAAQ,GAAG;;AAQM,OAAO,MAAM;eAC5B,QAAQ,GAAG;WACf,MAAM,cAAc;;;KAG1B,EAAE,iBAAiB,qBAAqB;AACzC,KAAI,oBAAoB,eACtB,QAAO;UACH,WAAW,eAAe;;;EAIhC;;;;;;AAkBJ,MAAM,oBAAoB,EACxB,UACA,iBACA,qBACA,0BAC2B;CAE3B,MAAM,YAAY,CAChB,GAAG,iBACH,GAAI,gBAAgB,SAAS,SAAS,GAAG,EAAE,GAAG,CAAC,SAAS,CACzD,CAAC,MAAM,GAAG,MAAM,IAAI,EAAE;AAEvB,QACE,oBAAC,UAAD;EAAU,aAAU;YAClB,qBAAC,OAAD,EAAA,UAAA,CAAO,mBAEL,oBAAC,QAAD;GACE,OAAO,SAAS,UAAU;GAC1B,gBAAgB,QAAQ,oBAAoB,OAAO,IAAI,CAAC;GACxD,MAAK;GACL,QAAQ,uBAAuB;GAC/B,iBAAiB;aAEhB,UAAU,KAAK,SACd,oBAAC,QAAD;IAAmB,OAAO,KAAK,UAAU;cACtC;IACM,EAFI,KAEJ,CACT;GACK,CAAA,CACH,EAAA,CAAA;EACC,CAAA;;;;AC1Ef,MAAM,YAAY;AAElB,MAAM,YAAY,OAAO,MAAM;IAC3B,WAAW,WAAW;;;;;AAM1B,MAAa,iBAAiB,OAAO,MAAM;;;;WAIhC,MAAM,YAAY;;AAuB7B,MAAM,cAAc,EAClB,UACA,kBAAkB,2BAClB,kBACA,qBACA,qBACA,WACA,uBAAuB,MACvB,cACA,0BACqB;AACrB,KAAI,CAAC,oBAAoB,CAAC,SACxB,QAAO,oBAAC,OAAD,EAAO,CAAA;CAGhB,MAAM,EACJ,gBAAgB,aAChB,eAAe,YACf,eAAe,YACf,eAAe,eACb;CAKJ,MAAM,oBAAoB,cAAc,cAAc,YAAY,SAAS;CAE3E,MAAM,gBAAgB,aAClB,cAAc,WACd,KAAK,IAAI,cAAc,UAAU,WAAW;CAChD,MAAM,iBAAiB,YAAY,cAAc,KAAK;AAEtD,QACE,qBAAC,WAAD;EAAW,MAAK;EAAa,cAAW;YAAxC,CACG,wBACC,oBAAC,kBAAD;GACY;GACO;GACI;GACA;GACrB,CAAA,EAEH,aAAa,KACZ,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA;GAAK;GACM;GAAe;GAAE;GAAc;GAAK;GAAkB;GAC3D,EAAA,CAAA,EACN,oBAAC,gBAAD,EAAA,UACE,oBAAC,cAAD;GACoB;GACG;GACV;GACG;GACd,CAAA,EACa,CAAA,CAChB,EAAA,CAAA,CAEK;;;;;ACnGhB,IAAA,qBAAe"}

package/dist/{Pii-DrrtEz7U.mjs → Pii-QsTrz8wn.mjs}

@@ -1,4 +1,4 @@
-import { n as Sticker } from "./Sticker-DbqKLe33.mjs";
+import { n as Sticker } from "./Sticker-CyGb9dEu.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region components/Pii/Pii.tsx
 const Pii = ({ children, isRedacted, hideOnRedacted }) => {
@@ -16,4 +16,4 @@ var Pii_default = Pii;
 //#endregion
 export { Pii_default as t };
 
-//# sourceMappingURL=Pii-DrrtEz7U.mjs.map
+//# sourceMappingURL=Pii-QsTrz8wn.mjs.map

package/dist/{Pii-DrrtEz7U.mjs.map → Pii-QsTrz8wn.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Pii-DrrtEz7U.mjs","names":[],"sources":["../components/Pii/Pii.tsx","../components/Pii/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport Sticker from '@persona/design-system/components/Sticker';\n\ninterface PiiProps {\n  children?: ReactNode;\n  isRedacted: boolean;\n  hideOnRedacted?: boolean;\n}\n\nconst Pii = ({ children, isRedacted, hideOnRedacted }: PiiProps) => {\n  if (isRedacted) {\n    return hideOnRedacted ? null : <Sticker data-test='pii__redacted'>Redacted</Sticker>;\n  }\n\n  if (children == null || children === '') {\n    return null;\n  }\n\n  // There used to be code inserting a classname here in certain cases. There's\n  // no other reason for this to be conditionally wrapped in a span, but\n  // removing it breaks a lot of tests. Someday, the tests will be fixed...\n  // hopefully.\n  if (['string', 'number'].includes(typeof children)) {\n    return <span>{children}</span>;\n  }\n\n  return <>{children}</>;\n};\n\nexport default Pii;\n","import Pii from './Pii';\n\nexport default Pii;\n"],"mappings":";;;AAUA,MAAM,OAAO,EAAE,UAAU,YAAY,qBAA+B;AAClE,KAAI,WACF,QAAO,iBAAiB,OAAO,oBAAC,SAAD;EAAS,aAAU;YAAgB;EAAkB,CAAA;AAGtF,KAAI,YAAY,QAAQ,aAAa,GACnC,QAAO;AAOT,KAAI,CAAC,UAAU,SAAS,CAAC,SAAS,OAAO,SAAS,CAChD,QAAO,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAGhC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;;;;ACzBxB,IAAA,cAAe"}
+{"version":3,"file":"Pii-QsTrz8wn.mjs","names":[],"sources":["../components/Pii/Pii.tsx","../components/Pii/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport Sticker from '@persona/design-system/components/Sticker';\n\ninterface PiiProps {\n  children?: ReactNode;\n  isRedacted: boolean;\n  hideOnRedacted?: boolean;\n}\n\nconst Pii = ({ children, isRedacted, hideOnRedacted }: PiiProps) => {\n  if (isRedacted) {\n    return hideOnRedacted ? null : <Sticker data-test='pii__redacted'>Redacted</Sticker>;\n  }\n\n  if (children == null || children === '') {\n    return null;\n  }\n\n  // There used to be code inserting a classname here in certain cases. There's\n  // no other reason for this to be conditionally wrapped in a span, but\n  // removing it breaks a lot of tests. Someday, the tests will be fixed...\n  // hopefully.\n  if (['string', 'number'].includes(typeof children)) {\n    return <span>{children}</span>;\n  }\n\n  return <>{children}</>;\n};\n\nexport default Pii;\n","import Pii from './Pii';\n\nexport default Pii;\n"],"mappings":";;;AAUA,MAAM,OAAO,EAAE,UAAU,YAAY,qBAA+B;AAClE,KAAI,WACF,QAAO,iBAAiB,OAAO,oBAAC,SAAD;EAAS,aAAU;YAAgB;EAAkB,CAAA;AAGtF,KAAI,YAAY,QAAQ,aAAa,GACnC,QAAO;AAOT,KAAI,CAAC,UAAU,SAAS,CAAC,SAAS,OAAO,SAAS,CAChD,QAAO,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAGhC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;;;;ACzBxB,IAAA,cAAe"}

package/dist/{Select-2KbtKawr.d.mts → Select-Bk27TgN8.d.mts}

@@ -1,5 +1,5 @@
 import { n as InputSizes, t as InputMixinProps } from "./input-Bv5fKt5J.mjs";
-import { l as MenuItemProps } from "./Menu-CUp_9HgC.mjs";
+import { l as MenuItemProps } from "./Menu-Bv8dsrz6.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ReactNode } from "react";
@@ -80,4 +80,4 @@ declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.Re
 declare const Option: _$react.ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & MenuItemProps<"div"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { SelectProps as i, Select as n, SelectHeader as r, Option as t };
-//# sourceMappingURL=Select-2KbtKawr.d.mts.map
+//# sourceMappingURL=Select-Bk27TgN8.d.mts.map

package/dist/{Select-cPEORy70.mjs → Select-C1ZoRk39.mjs}

@@ -4,9 +4,9 @@ import { paragraphMixins } from "./mixins/text.mjs";
 import { t as HStack } from "./Stack-Bl54WmhY.mjs";
 import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { t as IconButton } from "./IconButton-CIWiEsS-.mjs";
-import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-CPYXo61N.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-DGYexb7s.mjs";
+import { t as IconButton } from "./IconButton-P8w0JDI5.mjs";
+import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-DmeMgN-i.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-D25WBCah.mjs";
 import { n as useFormField } from "./useFormField-DhYd6bNn.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
@@ -242,4 +242,4 @@ const Option = forwardRef(function Option({ children, subtitle, ...props }, forw
 //#endregion
 export { Select as n, SelectHeader as r, Option as t };
 
-//# sourceMappingURL=Select-cPEORy70.mjs.map
+//# sourceMappingURL=Select-C1ZoRk39.mjs.map

package/dist/{Select-cPEORy70.mjs.map → Select-C1ZoRk39.mjs.map}

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

package/dist/Select.d.mts

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "./Select-2KbtKawr.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "./Select-Bk27TgN8.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/{Sticker-DbqKLe33.mjs → Sticker-CyGb9dEu.mjs}

@@ -2,7 +2,7 @@ import { isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/ps
 import { paragraphMixins } from "./mixins/text.mjs";
 import { n as Stack } from "./Stack-Bl54WmhY.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { t as IconButton } from "./IconButton-CIWiEsS-.mjs";
+import { t as IconButton } from "./IconButton-P8w0JDI5.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -210,4 +210,4 @@ const Sticker = ({ variant, icon, children, onDismiss, disabled, dismissButtonPr
 //#endregion
 export { StyledTruncatedText as a, StickerContentContainer as i, Sticker as n, StickerContainer as r, STICKER_COLOR_CONFIG as t };
 
-//# sourceMappingURL=Sticker-DbqKLe33.mjs.map
+//# sourceMappingURL=Sticker-CyGb9dEu.mjs.map