@persona/design-system 0.1.5-pre.4 → 0.1.6

package/dist/{Select-CVB-Q1g1.cjs.map → Select-CowngLd7.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Select-CVB-Q1g1.cjs","names":["inputMixin","Spacing","isNotDisabled","Menu","MenuList","paragraphMixins","MenuHeading","SelectPrimitive","Z_INDICES","HStack","Color","MenuItem","Paragraph","DropdownMenu","IconButton","MoreIcon","useFormField","CaretDownIcon"],"sources":["../components/Select/Select.tsx"],"sourcesContent":["import { Color, Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, MoreIcon } from '@persona/icons';\nimport * 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 { 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   * 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, 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 ? <SelectPrimitive.Portal>{content}</SelectPrimitive.Portal> : content}\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-CowngLd7.cjs","names":["inputMixin","Spacing","isNotDisabled","Menu","MenuList","paragraphMixins","MenuHeading","SelectPrimitive","Z_INDICES","HStack","Color","MenuItem","Paragraph","DropdownMenu","IconButton","MoreIcon","useFormField","CaretDownIcon"],"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   * 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, 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 ? <SelectPrimitive.Portal>{content}</SelectPrimitive.Portal> : content}\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-Cl3AOq0-.mjs → Select-Fg2z5J-p.mjs}

@@ -1,21 +1,17 @@
 import { isNotDisabled } from "./lib/pseudoClass.mjs";
 import inputMixin from "./mixins/input.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as HStack } from "./Stack-hwgS2FU1.mjs";
-import "./components/Stack/index.mjs";
-import { i as Paragraph } from "./Text-DOTYjIt0.mjs";
+import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { t as IconButton } from "./IconButton-C28qxOdi.mjs";
-import "./components/Button/index.mjs";
-import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
-import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-DNRHo2i_.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-BTk--LWo.mjs";
-import "./components/DropdownMenu/index.mjs";
-import "./components/Menu/index.mjs";
+import { t as HStack } from "./Stack-ckRN7LrP.mjs";
+import { t as IconButton } from "./IconButton-DC4rh6ow.mjs";
+import { n as useFormField } from "./useFormField-D0RTrPld.mjs";
+import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-BbSyWxFD.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-cN_AnKAT.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon, MoreIcon } from "@persona/icons";
 import { useId } from "react-aria";
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -184,7 +180,7 @@ const Select = forwardRef(function Select({ portal = false, size = "md", ...prop
 			children: [
 				header,
 				/* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children }),
-				footer && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(SelectFooter, { children: footer }) })
+				footer && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(SelectFooter, { children: footer }) })
 			]
 		})
 	});
@@ -243,4 +239,4 @@ const Option = forwardRef(function Option({ children, subtitle, ...props }, forw
 //#endregion
 export { Select as n, SelectHeader as r, Option as t };
 
-//# sourceMappingURL=Select-Cl3AOq0-.mjs.map
+//# sourceMappingURL=Select-Fg2z5J-p.mjs.map

package/dist/{Select-Cl3AOq0-.mjs.map → Select-Fg2z5J-p.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Select-Cl3AOq0-.mjs","names":["DropdownMenu"],"sources":["../components/Select/Select.tsx"],"sourcesContent":["import { Color, Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, MoreIcon } from '@persona/icons';\nimport * 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 { 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   * 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, 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 ? <SelectPrimitive.Portal>{content}</SelectPrimitive.Portal> : content}\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-Fg2z5J-p.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   * 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, 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 ? <SelectPrimitive.Portal>{content}</SelectPrimitive.Portal> : content}\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-BdPdgtfU.d.cts → Select-XN23Ui_j.d.cts}

@@ -1,9 +1,9 @@
 import { n as InputSizes, t as InputMixinProps } from "./input-Bm_anD8X.cjs";
-import { t as Property } from "./index-BM1DqNZf.cjs";
-import { l as MenuItemProps } from "./Menu-DPrNMatb.cjs";
+import { l as MenuItemProps } from "./Menu-C_NOsHAm.cjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { Property } from "csstype";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 //#region components/Select/Select.d.ts
@@ -74,4 +74,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-BdPdgtfU.d.cts.map
+//# sourceMappingURL=Select-XN23Ui_j.d.cts.map

package/dist/Select.d.cts

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

package/dist/Select.d.mts

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

package/dist/Slider.d.cts

@@ -1,2 +1,51 @@
-import { n as SliderProps, t as Slider } from "./Slider-uH5MOu2D.cjs";
-export { Slider, Slider as default, SliderProps };
+import { FocusEventHandler, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { NumberFormatOptions } from "@internationalized/number";
+
+//#region components/Slider/Slider.d.ts
+interface SliderProps<T = number | number[]> {
+  min?: number;
+  minLabel?: ReactNode;
+  max?: number;
+  maxLabel?: ReactNode;
+  onChange?: (value: T) => void;
+  value?: T;
+  defaultValue?: T;
+  step?: number;
+  /**
+   * Show labels on ends of track
+   */
+  showLabels?: boolean;
+  /**
+   * Track style
+   */
+  track?: boolean;
+  /**
+   * Hide tooltips on slider thumbs
+   */
+  hideTooltips?: boolean;
+  width?: number | 'auto';
+  disabled?: boolean;
+  formatOptions?: NumberFormatOptions;
+  id?: string;
+  className?: string;
+  name?: string;
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+declare const Slider: ({
+  minLabel,
+  maxLabel,
+  showLabels,
+  track,
+  width,
+  hideTooltips,
+  className,
+  id,
+  onBlur,
+  ...elemProps
+}: SliderProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Slider, Slider as default, SliderProps };
+//# sourceMappingURL=Slider.d.cts.map

package/dist/Slider.d.mts

@@ -1,2 +1,51 @@
-import { n as SliderProps, t as Slider } from "./Slider-D3gz7otf.mjs";
-export { Slider, Slider as default, SliderProps };
+import { FocusEventHandler, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { NumberFormatOptions } from "@internationalized/number";
+
+//#region components/Slider/Slider.d.ts
+interface SliderProps<T = number | number[]> {
+  min?: number;
+  minLabel?: ReactNode;
+  max?: number;
+  maxLabel?: ReactNode;
+  onChange?: (value: T) => void;
+  value?: T;
+  defaultValue?: T;
+  step?: number;
+  /**
+   * Show labels on ends of track
+   */
+  showLabels?: boolean;
+  /**
+   * Track style
+   */
+  track?: boolean;
+  /**
+   * Hide tooltips on slider thumbs
+   */
+  hideTooltips?: boolean;
+  width?: number | 'auto';
+  disabled?: boolean;
+  formatOptions?: NumberFormatOptions;
+  id?: string;
+  className?: string;
+  name?: string;
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+declare const Slider: ({
+  minLabel,
+  maxLabel,
+  showLabels,
+  track,
+  width,
+  hideTooltips,
+  className,
+  id,
+  onBlur,
+  ...elemProps
+}: SliderProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Slider, Slider as default, SliderProps };
+//# sourceMappingURL=Slider.d.mts.map

package/dist/SliderRHF.d.cts

@@ -1,2 +1,18 @@
-import { t as SliderRHF } from "./SliderRHF-Cc-9RuPe.cjs";
-export = SliderRHF;
+import { Slider } from "./Slider.cjs";
+import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { Control, FieldValues } from "react-hook-form";
+
+//#region components/Slider/SliderRHF.d.ts
+interface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {
+  control: Control<FieldValues, object>;
+  name: string;
+}
+declare const SliderRHF: ({
+  control,
+  name: nameProp,
+  defaultValue,
+  ...elemProps
+}: SliderRHFProps) => _$react_jsx_runtime0.JSX.Element;
+export = SliderRHF;
+//# sourceMappingURL=SliderRHF.d.cts.map

package/dist/SliderRHF.d.mts

@@ -1,2 +1,19 @@
-import { t as SliderRHF } from "./SliderRHF-DIV-tCEv.mjs";
-export { SliderRHF as default };
+import { Slider } from "./Slider.mjs";
+import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Control, FieldValues } from "react-hook-form";
+
+//#region components/Slider/SliderRHF.d.ts
+interface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {
+  control: Control<FieldValues, object>;
+  name: string;
+}
+declare const SliderRHF: ({
+  control,
+  name: nameProp,
+  defaultValue,
+  ...elemProps
+}: SliderRHFProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SliderRHF as default };
+//# sourceMappingURL=SliderRHF.d.mts.map

package/dist/SliderThumb.d.mts

@@ -1,124 +1,7 @@
-import { t as Orientation } from "./index-CKu60b9I.mjs";
+import { OutputHTMLAttributes, RefObject } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { OutputHTMLAttributes, ReactNode, RefObject } from "react";
+import { SliderState } from "@react-stately/slider";
 
-//#region ../../node_modules/@react-stately/slider/dist/types.d.ts
-interface SliderState {
-  /**
-   * Values managed by the slider by thumb index.
-   */
-  readonly values: number[];
-  /**
-   * The default values for each thumb.
-   */
-  readonly defaultValues: number[];
-  /**
-   * Get the value for the specified thumb.
-   * @param index
-   */
-  getThumbValue(index: number): number;
-  /**
-   * Sets the value for the specified thumb.
-   * The actual value set will be clamped and rounded according to min/max/step.
-   * @param index
-   * @param value
-   */
-  setThumbValue(index: number, value: number): void;
-  /**
-   * Sets value for the specified thumb by percent offset (between 0 and 1).
-   * @param index
-   * @param percent
-   */
-  setThumbPercent(index: number, percent: number): void;
-  /**
-   * Whether the specific thumb is being dragged.
-   * @param index
-   */
-  isThumbDragging(index: number): boolean;
-  /**
-   * Set is dragging on the specified thumb.
-   * @param index
-   * @param dragging
-   */
-  setThumbDragging(index: number, dragging: boolean): void;
-  /**
-   * Currently-focused thumb index.
-   */
-  readonly focusedThumb: number | undefined;
-  /**
-   * Set focused true on specified thumb. This will remove focus from
-   * any thumb that had it before.
-   * @param index
-   */
-  setFocusedThumb(index: number | undefined): void;
-  /**
-   * Returns the specified thumb's value as a percentage from 0 to 1.
-   * @param index
-   */
-  getThumbPercent(index: number): number;
-  /**
-   * Returns the value as a percent between the min and max of the slider.
-   * @param index
-   */
-  getValuePercent(value: number): number;
-  /**
-   * Returns the string label for the specified thumb's value, per props.formatOptions.
-   * @param index
-   */
-  getThumbValueLabel(index: number): string;
-  /**
-   * Returns the string label for the value, per props.formatOptions.
-   * @param index
-   */
-  getFormattedValue(value: number): string;
-  /**
-   * Returns the min allowed value for the specified thumb.
-   * @param index
-   */
-  getThumbMinValue(index: number): number;
-  /**
-   * Returns the max allowed value for the specified thumb.
-   * @param index
-   */
-  getThumbMaxValue(index: number): number;
-  /**
-   * Converts a percent along track (between 0 and 1) to the corresponding value.
-   * @param percent
-   */
-  getPercentValue(percent: number): number;
-  /**
-   * Returns if the specified thumb is editable.
-   * @param index
-   */
-  isThumbEditable(index: number): boolean;
-  /**
-   * Set the specified thumb's editable state.
-   * @param index
-   * @param editable
-   */
-  setThumbEditable(index: number, editable: boolean): void;
-  /**
-   * Increments the value of the thumb by the step or page amount.
-   */
-  incrementThumb(index: number, stepSize?: number): void;
-  /**
-   * Decrements the value of the thumb by the step or page amount.
-   */
-  decrementThumb(index: number, stepSize?: number): void;
-  /**
-   * The step amount for the slider.
-   */
-  readonly step: number;
-  /**
-   * The page size for the slider, used to do a bigger step.
-   */
-  readonly pageSize: number;
-  /** The orientation of the slider. */
-  readonly orientation: Orientation;
-  /** Whether the slider is disabled. */
-  readonly isDisabled: boolean;
-}
-//#endregion
 //#region components/Slider/SliderThumb.d.ts
 interface SliderThumbProps {
   state: SliderState;

package/dist/{Spacer-DWGkX170.cjs → Spacer-GYHbk-dS.cjs}

@@ -1,4 +1,4 @@
-const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_chunk = require("./chunk-CKQMccvm.cjs");
 require("./variables/spacing.cjs");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
@@ -17,4 +17,4 @@ Object.defineProperty(exports, "Spacer_default", {
 	}
 });
 
-//# sourceMappingURL=Spacer-DWGkX170.cjs.map
+//# sourceMappingURL=Spacer-GYHbk-dS.cjs.map

package/dist/{Spacer-DWGkX170.cjs.map → Spacer-GYHbk-dS.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Spacer-DWGkX170.cjs","names":[],"sources":["../components/Spacer/Spacer.tsx","../components/Spacer/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface SpacerProps {\n  height?: number;\n  width?: number;\n}\n\n/**\n * A simple spacer element used to provide vertical space in grids.\n *\n * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.\n */\nconst Spacer = styled.div.attrs(() => ({ 'aria-hidden': true }))<SpacerProps>`\n  height: ${({ height = 5 }) => height * BASE}px;\n  width: ${({ width = 0 }) => width * BASE}px;\n  flex: none;\n`;\n\nexport default Spacer;\n","import Spacer from './Spacer';\n\nexport default Spacer;\n"],"mappings":";;;;;;ACEA,IAAA,iBAAe,ADYA,kBAAA,QAAO,IAAI,aAAa,EAAE,eAAe,MAAM,EAAE;aACnD,EAAE,SAAS,QAAQ,SAAA,EAAc;YAClC,EAAE,QAAQ,QAAQ,QAAA,EAAa"}
+{"version":3,"file":"Spacer-GYHbk-dS.cjs","names":[],"sources":["../components/Spacer/Spacer.tsx","../components/Spacer/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface SpacerProps {\n  height?: number;\n  width?: number;\n}\n\n/**\n * A simple spacer element used to provide vertical space in grids.\n *\n * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.\n */\nconst Spacer = styled.div.attrs(() => ({ 'aria-hidden': true }))<SpacerProps>`\n  height: ${({ height = 5 }) => height * BASE}px;\n  width: ${({ width = 0 }) => width * BASE}px;\n  flex: none;\n`;\n\nexport default Spacer;\n","import Spacer from './Spacer';\n\nexport default Spacer;\n"],"mappings":";;;;;;ACEA,IAAA,iBAAe,ADYA,kBAAA,QAAO,IAAI,aAAa,EAAE,eAAe,MAAM,EAAE;aACnD,EAAE,SAAS,QAAQ,SAAA,EAAc;YAClC,EAAE,QAAQ,QAAQ,QAAA,EAAa"}

package/dist/{Spacer-DxH_sQrV.mjs → Spacer-Ln3KChb5.mjs}

@@ -10,4 +10,4 @@ var Spacer_default = styled.div.attrs(() => ({ "aria-hidden": true }))`
 //#endregion
 export { Spacer_default as t };
 
-//# sourceMappingURL=Spacer-DxH_sQrV.mjs.map
+//# sourceMappingURL=Spacer-Ln3KChb5.mjs.map

package/dist/{Spacer-DxH_sQrV.mjs.map → Spacer-Ln3KChb5.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Spacer-DxH_sQrV.mjs","names":[],"sources":["../components/Spacer/Spacer.tsx","../components/Spacer/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface SpacerProps {\n  height?: number;\n  width?: number;\n}\n\n/**\n * A simple spacer element used to provide vertical space in grids.\n *\n * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.\n */\nconst Spacer = styled.div.attrs(() => ({ 'aria-hidden': true }))<SpacerProps>`\n  height: ${({ height = 5 }) => height * BASE}px;\n  width: ${({ width = 0 }) => width * BASE}px;\n  flex: none;\n`;\n\nexport default Spacer;\n","import Spacer from './Spacer';\n\nexport default Spacer;\n"],"mappings":";;;;ACEA,IAAA,iBAAe,ADYA,OAAO,IAAI,aAAa,EAAE,eAAe,MAAM,EAAE;aACnD,EAAE,SAAS,QAAQ,SAAA,EAAc;YAClC,EAAE,QAAQ,QAAQ,QAAA,EAAa"}
+{"version":3,"file":"Spacer-Ln3KChb5.mjs","names":[],"sources":["../components/Spacer/Spacer.tsx","../components/Spacer/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface SpacerProps {\n  height?: number;\n  width?: number;\n}\n\n/**\n * A simple spacer element used to provide vertical space in grids.\n *\n * @deprecated You probably want to use `Stack` instead with a `gap` for spacing.\n */\nconst Spacer = styled.div.attrs(() => ({ 'aria-hidden': true }))<SpacerProps>`\n  height: ${({ height = 5 }) => height * BASE}px;\n  width: ${({ width = 0 }) => width * BASE}px;\n  flex: none;\n`;\n\nexport default Spacer;\n","import Spacer from './Spacer';\n\nexport default Spacer;\n"],"mappings":";;;;ACEA,IAAA,iBAAe,ADYA,OAAO,IAAI,aAAa,EAAE,eAAe,MAAM,EAAE;aACnD,EAAE,SAAS,QAAQ,SAAA,EAAc;YAClC,EAAE,QAAQ,QAAQ,QAAA,EAAa"}

package/dist/{Spinner-C05An_fn.mjs → Spinner-D9-u_5zS.mjs}

@@ -38,4 +38,4 @@ const Spinner = ({ variant = "default", size = "sm", srText, className }) => {
 //#endregion
 export { Spinner as t };
 
-//# sourceMappingURL=Spinner-C05An_fn.mjs.map
+//# sourceMappingURL=Spinner-D9-u_5zS.mjs.map

package/dist/Spinner-D9-u_5zS.mjs.map

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

package/dist/{Spinner-z7DrPE1d.cjs → Spinner-DaSlM4kU.cjs}

@@ -1,4 +1,4 @@
-const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_chunk = require("./chunk-CKQMccvm.cjs");
 require("./variables/transitions.cjs");
 const require_variables_keyframes = require("./variables/keyframes.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
@@ -45,4 +45,4 @@ Object.defineProperty(exports, "Spinner", {
 	}
 });
 
-//# sourceMappingURL=Spinner-z7DrPE1d.cjs.map
+//# sourceMappingURL=Spinner-DaSlM4kU.cjs.map

package/dist/Spinner-DaSlM4kU.cjs.map

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

package/dist/{Stack-toDRLy--.d.cts → Stack-B5VYkPBe.d.cts}

@@ -1,8 +1,8 @@
-import { t as Property } from "./index-BM1DqNZf.cjs";
 import { ComponentPropsWithoutRef } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 import { Spacing } from "@persona/design-tokens";
+import * as CSS from "csstype";
 
 //#region components/Stack/Stack.d.ts
 interface StackProps {
@@ -21,15 +21,15 @@ interface StackProps {
   /**
    * Passed through as `align-items`
    */
-  align?: Property.AlignItems;
+  align?: CSS.Property.AlignItems;
   /**
    * Passed through as `justify-content`
    */
-  justify?: Property.JustifyContent;
+  justify?: CSS.Property.JustifyContent;
   /**
    * Passed through as `flex-wrap`
    */
-  wrap?: Property.FlexWrap;
+  wrap?: CSS.Property.FlexWrap;
   /**
    * Give each item an equal width/height.
    */
@@ -44,4 +44,4 @@ type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;
 declare const HStack: (props: HStackProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { StackProps as i, HStackProps as n, Stack as r, HStack as t };
-//# sourceMappingURL=Stack-toDRLy--.d.cts.map
+//# sourceMappingURL=Stack-B5VYkPBe.d.cts.map

package/dist/{Stack-BHb3ZB2A.cjs → Stack-BF-9YjA1.cjs}

@@ -1,4 +1,4 @@
-const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_chunk = require("./chunk-CKQMccvm.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
@@ -50,4 +50,4 @@ Object.defineProperty(exports, "Stack", {
 	}
 });
 
-//# sourceMappingURL=Stack-BHb3ZB2A.cjs.map
+//# sourceMappingURL=Stack-BF-9YjA1.cjs.map