@persona/design-system 0.8.0 → 0.8.1

package/dist/{Select-yC2t_gZb.mjs.map → Select-BoZuM_e9.mjs.map}

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

@@ -1,5 +1,5 @@
-import { l as MenuItemProps } from "./Menu-BekLwm8w.mjs";
-import { n as InputSizes, t as InputMixinProps } from "./input-C6cyiqm2.mjs";
+import { l as MenuItemProps } from "./Menu-CUN9bmc1.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-DpHBIUpP.mjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -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-wqTtGyga.d.mts.map
+//# sourceMappingURL=Select-Cv_9PLOt.d.mts.map

package/dist/Select.d.mts

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

package/dist/SmartTextInput.d.mts

@@ -0,0 +1,107 @@
+import { t as ASTNode } from "./types-BYRTxB0a.mjs";
+import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-Bl-qzgrr.mjs";
+import { n as PossibleChainSchema, t as ChainRoot } from "./chainTypes-D8SGRGba.mjs";
+import { a as Mode, i as FunctionFormRenderProps, n as CustomFunctionDetailRenderProps, s as PopoverFooterRenderer, t as CodeChainFunctionPanelRenderProps, u as ValueType } from "./types-Cs6CdZCO.mjs";
+import { n as useChain } from "./useChain-CEsXE2Bx.mjs";
+import { t as ContextMenuExamples } from "./listbox-options-BjOkovND.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/SmartTextInput/SmartTextInput.d.ts
+interface SmartTextInputProps {
+  /**
+   * Lock the input to a single value type. When set, transitions between value types are
+   * prohibited. null or undefined allows free switching (default behavior).
+   */
+  valueType?: ValueType;
+  /**
+   * Restrict which interpolation expression types are available. Applies only when
+   * valueType is 'interpolation' or unset. Ignored when valueType is 'method-chain'.
+   *
+   * - ['handlebars']: only {{...}} expressions
+   * - ['code']: only ${...} expressions
+   * - ['handlebars', 'code'] or undefined: both (default)
+   */
+  allowedInterpolationModes?: (Mode.MethodChain | Mode.Code)[];
+  chainRoots: ChainRoot[];
+  primitivesSchema?: 'none' | 'default' | ObjectSchemaMap;
+  platformObjectJsonSchema: ObjectSchemaMap;
+  defaultPrimitiveUtilities: ObjectSchemaMap;
+  codeChainFunctionSchema?: Record<string, Record<string, FunctionJsonSchema>>;
+  getSchemaOptionsOverride?: Parameters<typeof useChain>[0]['getSchemaOptionsOverride'];
+  isLoading?: boolean;
+  sortOptionsBy?: (option: PossibleChainSchema) => number;
+  useChainRootDescriptions?: boolean;
+  value?: string;
+  onChange?: (value: string, meta: {
+    valueType: ValueType;
+    schema: JsonSchema | null;
+    ast: ASTNode;
+  }) => void;
+  /**
+   * Override the example labels shown in the context menu (Text mode listbox).
+   * Each key corresponds to one context menu option. Omitted keys keep their defaults.
+   */
+  contextMenuExamples?: ContextMenuExamples;
+  /**
+   * Called when the component's internally-computed validation error changes.
+   * Receives a ReactNode (or null when valid) that can be passed directly to
+   * a FormField's errorText prop. Covers syntax errors, schema errors, and
+   * incomplete-expression errors.
+   */
+  onValidationChange?: (errorText: ReactNode | null) => void;
+  size?: 'sm' | 'md';
+  variant?: 'default' | 'table-cell';
+  /**
+   * Container to render the input's popover into using a portal.
+   * - If undefiend, the popover will be portaled into a default element.
+   * - If null, the popover will not be portaled and will be rendered in-place.
+   */
+  portalContainerRef?: HTMLElement | null;
+  creatable?: boolean;
+  renderFunctionForm?: (props: FunctionFormRenderProps) => ReactNode;
+  renderCustomFunctionDetail?: (props: CustomFunctionDetailRenderProps) => ReactNode;
+  renderCodeChainFunctionPanel?: (props: CodeChainFunctionPanelRenderProps) => ReactNode;
+  canCreateCodeChainFunction?: boolean;
+  popoverFooter?: PopoverFooterRenderer;
+  id?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}
+/**
+ * Smart text input for configuring access to data, interpolated strings, or inline code.
+ */
+declare const SmartTextInput: ({
+  value: passedValue,
+  onChange,
+  valueType: allowedValueType,
+  allowedInterpolationModes,
+  chainRoots,
+  platformObjectJsonSchema,
+  defaultPrimitiveUtilities,
+  codeChainFunctionSchema,
+  useChainRootDescriptions,
+  primitivesSchema,
+  isLoading,
+  portalContainerRef,
+  getSchemaOptionsOverride,
+  creatable,
+  renderFunctionForm,
+  renderCustomFunctionDetail,
+  renderCodeChainFunctionPanel,
+  canCreateCodeChainFunction,
+  sortOptionsBy,
+  onValidationChange,
+  contextMenuExamples,
+  popoverFooter,
+  id,
+  placeholder,
+  disabled,
+  size,
+  variant,
+  ...props
+}: SmartTextInputProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SmartTextInputProps, SmartTextInput as default };
+//# sourceMappingURL=SmartTextInput.d.mts.map

package/dist/SmartTextInputCodeDialog.d.mts

@@ -0,0 +1,18 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/SmartTextInput/SmartTextInputCodeDialog.d.ts
+interface SmartTextInputCodeDialogProps {
+  id: string;
+  inputRef: React.RefObject<HTMLInputElement>;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+declare const SmartTextInputCodeDialog: ({
+  id,
+  inputRef,
+  onConfirm,
+  onCancel
+}: SmartTextInputCodeDialogProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SmartTextInputCodeDialog as default };
+//# sourceMappingURL=SmartTextInputCodeDialog.d.mts.map

package/dist/SmartTextInputField.d.mts

@@ -0,0 +1,25 @@
+import { o as ImplementsFormField } from "./inputFields-BVDurw3L.mjs";
+import { n as TableBoxField } from "./TableBoxField-Cq9M1upV.mjs";
+import SmartTextInput from "./SmartTextInput.mjs";
+import { CSSProperties, ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/SmartTextInput/SmartTextInputField.d.ts
+interface SmartTextInputFieldProps extends ImplementsFormField, Omit<ComponentProps<typeof SmartTextInput>, 'onValidationChange'> {
+  formFieldStyle?: CSSProperties;
+  /** Marks the input invalid without requiring visible error text. */
+  hasError?: boolean;
+  /** Renders as a borderless TableBox cell instead of the bordered FormField wrapper. */
+  asTableBoxCell?: boolean;
+  /** Props for the TableBox cell. */
+  tableBoxCellProps?: ComponentProps<typeof TableBoxField.Cell>;
+}
+declare const SmartTextInputForField: (props: ComponentProps<typeof SmartTextInput>) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * FormField wrapper for SmartTextInput so callers can use shared
+ * helper/warning/error text plumbing without duplicating wrappers.
+ */
+declare const SmartTextInputField: (props: SmartTextInputFieldProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SmartTextInputFieldProps, SmartTextInputForField, SmartTextInputField as default };
+//# sourceMappingURL=SmartTextInputField.d.mts.map

package/dist/SmartTextInputFunctionDialog.d.mts

@@ -0,0 +1,37 @@
+import { i as StackProps } from "./Stack-XzBzPvSV.mjs";
+import { s as MethodChainNode } from "./methodChainTypes-BVkTI8MX.mjs";
+import { n as PossibleChainSchema, t as ChainRoot } from "./chainTypes-D8SGRGba.mjs";
+import { i as FunctionFormRenderProps, n as CustomFunctionDetailRenderProps, o as OpenCodeChainFunctionPanel, r as FunctionAtCursor } from "./types-Cs6CdZCO.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/SmartTextInput/SmartTextInputFunctionDialog.d.ts
+declare const StyledDialog: _$styled_components0.StyledComponent<"div", any, StackProps, never>;
+declare const DialogHeading: _$styled_components0.StyledComponent<"div", any, {}, never>;
+interface SmartTextInputFunctionDialogProps {
+  id: string;
+  inputRef: React.RefObject<HTMLInputElement>;
+  functionAtCursor: FunctionAtCursor;
+  nextPossibleChains: PossibleChainSchema[];
+  chainRoots: ChainRoot[];
+  onConfirm: (nodes: MethodChainNode[]) => void;
+  onCancel: () => void;
+  renderFunctionForm?: (props: FunctionFormRenderProps) => React.ReactNode;
+  renderCustomFunctionDetail?: (props: CustomFunctionDetailRenderProps) => React.ReactNode;
+  openCodeChainFunctionPanel?: OpenCodeChainFunctionPanel;
+}
+declare const SmartTextInputFunctionDialog: ({
+  id,
+  inputRef,
+  functionAtCursor,
+  nextPossibleChains,
+  chainRoots,
+  onConfirm,
+  onCancel,
+  renderFunctionForm,
+  renderCustomFunctionDetail,
+  openCodeChainFunctionPanel
+}: SmartTextInputFunctionDialogProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DialogHeading, StyledDialog, SmartTextInputFunctionDialog as default };
+//# sourceMappingURL=SmartTextInputFunctionDialog.d.mts.map

package/dist/SmartTextInputListbox.d.mts

@@ -0,0 +1,26 @@
+import { a as Mode } from "./types-Cs6CdZCO.mjs";
+import { a as SmartTextInputOption } from "./listbox-options-BjOkovND.mjs";
+import { ListBoxProps } from "react-aria-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComboBoxState } from "react-stately";
+
+//#region components/SmartTextInput/SmartTextInputListbox.d.ts
+interface SmartTextInputListboxProps {
+  comboboxState: ComboBoxState<SmartTextInputOption>;
+  listBoxRef: React.RefObject<HTMLDivElement>;
+  listBoxProps: ListBoxProps<SmartTextInputOption>;
+  mode: Mode;
+  isLoading: boolean;
+  openCodeChainFunctionPanel?: () => void;
+}
+declare const SmartTextInputListbox: ({
+  comboboxState,
+  listBoxRef,
+  listBoxProps,
+  mode,
+  isLoading,
+  openCodeChainFunctionPanel
+}: SmartTextInputListboxProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SmartTextInputListbox as default };
+//# sourceMappingURL=SmartTextInputListbox.d.mts.map

package/dist/SmartTextInputPopover.d.mts

@@ -0,0 +1,45 @@
+import { a as SmartTextInputOption } from "./listbox-options-BjOkovND.mjs";
+import { ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComboBoxState } from "react-stately";
+
+//#region components/SmartTextInput/SmartTextInputPopover.d.ts
+type PopoverContainerProps = {
+  $isDialog: boolean;
+  $position?: 'absolute' | 'relative';
+};
+declare const PopoverContainer: _$styled_components0.StyledComponent<"div", any, PopoverContainerProps, never>;
+interface DialogFocusHandle {
+  focusFirst: () => void;
+}
+declare const FooterContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+interface SmartTextInputPopoverProps {
+  id: string;
+  children: ReactNode;
+  comboboxState: ComboBoxState<SmartTextInputOption>;
+  popoverRef: React.RefObject<HTMLDivElement>;
+  inputRef: React.RefObject<HTMLInputElement>;
+  variant: 'default' | 'table-cell';
+  portalContainerRef?: HTMLElement | null;
+  dialogFocusRef?: React.RefObject<DialogFocusHandle>;
+  isDialog: boolean;
+  onDialogClose: () => void;
+  footer?: ReactNode;
+}
+declare const SmartTextInputPopover: ({
+  id,
+  children,
+  comboboxState,
+  inputRef,
+  popoverRef,
+  variant,
+  portalContainerRef,
+  dialogFocusRef,
+  isDialog,
+  onDialogClose,
+  footer
+}: SmartTextInputPopoverProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { DialogFocusHandle, FooterContainer, PopoverContainer, SmartTextInputPopover as default };
+//# sourceMappingURL=SmartTextInputPopover.d.mts.map

package/dist/{Spinner-BlAg8_OX.mjs → Spinner-CarSRiBF.mjs}

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

package/dist/{Spinner-BlAg8_OX.mjs.map → Spinner-CarSRiBF.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Spinner-BlAg8_OX.mjs","names":["LoaderIconMedium"],"sources":["../components/Spinner/Spinner.tsx"],"sourcesContent":["import styled, { useTheme } 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';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport type SpinnerVariant = 'default' | 'inverse';\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 theme = useTheme();\n  const resolvedColor =\n    variant === 'inverse'\n      ? semanticColor(theme, 'FgInverse', Color.BorderIconInverse)\n      : semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary);\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":";;;;;;;;;AA0BA,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,QAAQ,UAAU;CACxB,MAAM,gBACJ,YAAY,YACR,cAAc,OAAO,aAAa,MAAM,kBAAkB,GAC1D,cAAc,OAAO,aAAa,MAAM,kBAAkB;AAChE,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"}
+{"version":3,"file":"Spinner-CarSRiBF.mjs","names":["LoaderIconMedium"],"sources":["../components/Spinner/Spinner.tsx"],"sourcesContent":["import styled, { useTheme } 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';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport type SpinnerVariant = 'default' | 'inverse';\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 theme = useTheme();\n  const resolvedColor =\n    variant === 'inverse'\n      ? semanticColor(theme, 'FgInverse', Color.BorderIconInverse)\n      : semanticColor(theme, 'FgPrimary', Color.BorderIconPrimary);\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":";;;;;;;;;AA0BA,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,QAAQ,UAAU;CACxB,MAAM,gBACJ,YAAY,YACR,cAAc,OAAO,aAAa,MAAM,kBAAkB,GAC1D,cAAc,OAAO,aAAa,MAAM,kBAAkB;AAChE,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/{Stack-Bkn0TUDe.mjs → Stack-CEPzs4Pb.mjs}

@@ -37,4 +37,4 @@ const HStack = (props) => /* @__PURE__ */ jsx(Stack, {
 //#endregion
 export { Stack as n, HStack as t };
 
-//# sourceMappingURL=Stack-Bkn0TUDe.mjs.map
+//# sourceMappingURL=Stack-CEPzs4Pb.mjs.map

package/dist/{Stack-Bkn0TUDe.mjs.map → Stack-CEPzs4Pb.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Stack-Bkn0TUDe.mjs","names":[],"sources":["../components/Stack/Stack.tsx"],"sourcesContent":["import type * as CSS from 'csstype';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport interface StackProps {\n  /**\n   * Spacing between items. Defaults to Spacing[3].\n   *\n   * @defaultValue Spacing[3]\n   */\n  spacing?: Spacing;\n\n  /**\n   * Direction of Stack. Defaults to vertical.\n   *\n   * @defaultValue 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n\n  /**\n   * Passed through as `align-items`\n   */\n  align?: CSS.Property.AlignItems;\n\n  /**\n   * Passed through as `justify-content`\n   */\n  justify?: CSS.Property.JustifyContent;\n\n  /**\n   * Passed through as `flex-wrap`\n   */\n  wrap?: CSS.Property.FlexWrap;\n\n  /**\n   * Give each item an equal width/height.\n   */\n  equal?: boolean;\n\n  /**\n   * Passed through as `width: 100%`\n   */\n  fullWidth?: boolean;\n}\n\nexport const Stack = styled('div')<StackProps>`\n  display: flex;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  gap: ${({ spacing }) => spacing || Spacing[2]};\n\n  ${({ align }) =>\n    align &&\n    css`\n      align-items: ${align};\n    `}\n\n  ${({ justify }) =>\n    justify &&\n    css`\n      justify-content: ${justify};\n    `}\n\n  ${({ wrap }) =>\n    wrap &&\n    css`\n      flex-wrap: ${wrap};\n    `}\n\n  ${({ equal }) =>\n    equal &&\n    css`\n      > * {\n        flex-grow: 1;\n        flex-basis: 0;\n      }\n    `}\n\n  ${({ fullWidth }) =>\n    fullWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nexport default Stack;\n\nexport type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;\n\nexport const HStack = (props: HStackProps) => <Stack {...props} direction='horizontal' />;\n"],"mappings":";;;;AA+CA,MAAa,QAAQ,OAAO,MAAM;;qBAEb,EAAE,gBAAiB,cAAc,eAAe,QAAQ,SAAU;UAC7E,EAAE,cAAc,WAAW,QAAQ,GAAG;;KAE3C,EAAE,YACH,SACA,GAAG;qBACc,MAAM;MACrB;;KAED,EAAE,cACH,WACA,GAAG;yBACkB,QAAQ;MAC3B;;KAED,EAAE,WACH,QACA,GAAG;mBACY,KAAK;MAClB;;KAED,EAAE,YACH,SACA,GAAG;;;;;MAKD;;KAED,EAAE,gBACH,aACA,GAAG;;MAED;;AAON,MAAa,UAAU,UAAuB,oBAAC,OAAD;CAAO,GAAI;CAAO,WAAU;CAAe,CAAA"}
+{"version":3,"file":"Stack-CEPzs4Pb.mjs","names":[],"sources":["../components/Stack/Stack.tsx"],"sourcesContent":["import type * as CSS from 'csstype';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport interface StackProps {\n  /**\n   * Spacing between items. Defaults to Spacing[3].\n   *\n   * @defaultValue Spacing[3]\n   */\n  spacing?: Spacing;\n\n  /**\n   * Direction of Stack. Defaults to vertical.\n   *\n   * @defaultValue 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n\n  /**\n   * Passed through as `align-items`\n   */\n  align?: CSS.Property.AlignItems;\n\n  /**\n   * Passed through as `justify-content`\n   */\n  justify?: CSS.Property.JustifyContent;\n\n  /**\n   * Passed through as `flex-wrap`\n   */\n  wrap?: CSS.Property.FlexWrap;\n\n  /**\n   * Give each item an equal width/height.\n   */\n  equal?: boolean;\n\n  /**\n   * Passed through as `width: 100%`\n   */\n  fullWidth?: boolean;\n}\n\nexport const Stack = styled('div')<StackProps>`\n  display: flex;\n  flex-direction: ${({ direction }) => (direction === 'horizontal' ? 'row' : 'column')};\n  gap: ${({ spacing }) => spacing || Spacing[2]};\n\n  ${({ align }) =>\n    align &&\n    css`\n      align-items: ${align};\n    `}\n\n  ${({ justify }) =>\n    justify &&\n    css`\n      justify-content: ${justify};\n    `}\n\n  ${({ wrap }) =>\n    wrap &&\n    css`\n      flex-wrap: ${wrap};\n    `}\n\n  ${({ equal }) =>\n    equal &&\n    css`\n      > * {\n        flex-grow: 1;\n        flex-basis: 0;\n      }\n    `}\n\n  ${({ fullWidth }) =>\n    fullWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nexport default Stack;\n\nexport type HStackProps = ComponentPropsWithoutRef<'div'> & StackProps;\n\nexport const HStack = (props: HStackProps) => <Stack {...props} direction='horizontal' />;\n"],"mappings":";;;;AA+CA,MAAa,QAAQ,OAAO,MAAM;;qBAEb,EAAE,gBAAiB,cAAc,eAAe,QAAQ,SAAU;UAC7E,EAAE,cAAc,WAAW,QAAQ,GAAG;;KAE3C,EAAE,YACH,SACA,GAAG;qBACc,MAAM;MACrB;;KAED,EAAE,cACH,WACA,GAAG;yBACkB,QAAQ;MAC3B;;KAED,EAAE,WACH,QACA,GAAG;mBACY,KAAK;MAClB;;KAED,EAAE,YACH,SACA,GAAG;;;;;MAKD;;KAED,EAAE,gBACH,aACA,GAAG;;MAED;;AAON,MAAa,UAAU,UAAuB,oBAAC,OAAD;CAAO,GAAI;CAAO,WAAU;CAAe,CAAA"}

package/dist/{Stack-CYqjBXe8.d.mts → Stack-XzBzPvSV.d.mts}

@@ -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-CYqjBXe8.d.mts.map
+//# sourceMappingURL=Stack-XzBzPvSV.d.mts.map

package/dist/Stack.d.mts

@@ -1,2 +1,2 @@
-import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "./Stack-CYqjBXe8.mjs";
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "./Stack-XzBzPvSV.mjs";
 export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/{StatusIndicator-DT2zNbkp.mjs → StatusIndicator-bEnMWV_S.mjs}

@@ -312,4 +312,4 @@ const StatusIndicator = ({ status, type, background = "filled", showIcon = true,
 //#endregion
 export { StatusIndicator as n, STATUSES as t };
 
-//# sourceMappingURL=StatusIndicator-DT2zNbkp.mjs.map
+//# sourceMappingURL=StatusIndicator-bEnMWV_S.mjs.map

package/dist/{StatusIndicator-DT2zNbkp.mjs.map → StatusIndicator-bEnMWV_S.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator-DT2zNbkp.mjs","names":[],"sources":["../components/StatusIndicator/StatusIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleHalfIcon,\n  CircleMinusFillIcon,\n  CircleNullIcon,\n  CircleSlashIcon,\n  WarningFillIcon,\n} from '@persona/icons/12px';\nimport { withAlpha } from 'design-system/lib/color';\nimport { type MaybeSemanticTheme, semanticTokens } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { SemanticTokens } from 'design-system/variables/semantic';\n\nexport type StatusType =\n  | 'neutral'\n  | 'attention'\n  | 'warning'\n  | 'critical'\n  | 'success'\n  | 'feature'\n  | 'informational'\n  | 'miscellaneous';\nexport type BackgroundType = 'filled' | 'none';\n\n/**\n * Narrow set of status presets — one value per type+icon combination.\n * Override color with `type` or icon with `leadingIcon` when needed.\n */\nexport type Status =\n  | 'open'\n  | 'pending'\n  | 'completed'\n  | 'active'\n  | 'failed'\n  | 'needs_review'\n  | 'canceled'\n  | 'archived';\n\nconst STATUS_CONFIG: Record<Status, { type: StatusType; icon: ReactNode }> = {\n  open: { type: 'neutral', icon: <CircleNullIcon /> },\n  pending: { type: 'neutral', icon: <CircleHalfIcon /> },\n  completed: { type: 'success', icon: <CircleCheckFillIcon /> },\n  active: { type: 'success', icon: <CircleFillIcon /> },\n  failed: { type: 'critical', icon: <CircleSlashIcon /> },\n  needs_review: { type: 'warning', icon: <WarningFillIcon /> },\n  canceled: { type: 'attention', icon: <CircleSlashIcon /> },\n  archived: { type: 'neutral', icon: <CircleMinusFillIcon /> },\n};\n\n/** All supported `status` preset keys, derived from the config map. */\nexport const STATUSES = Object.keys(STATUS_CONFIG) as Status[];\n\nexport interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Preset that sets a default semantic type and icon.\n   * Explicit `type` and `leadingIcon` override the preset.\n   */\n  status?: Status;\n\n  /**\n   * The semantic status type to display. Overrides `status` when both are set.\n   */\n  type?: StatusType;\n\n  /**\n   * Whether to show filled background or transparent\n   */\n  background?: BackgroundType;\n\n  /**\n   * Whether to show the icon. When false, displays label-only variant\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Optional custom icon to replace the default icon indicator (12px recommended)\n   * - undefined (default): Uses `status` icon when set, otherwise CircleNullIcon\n   * - null: Hides the icon completely\n   * - ReactNode: Shows the provided custom icon\n   * Note: showIcon must be true for this to take effect\n   */\n  leadingIcon?: ReactNode | null;\n\n  /**\n   * Truncate the label with an ellipsis instead of letting it overflow its container. Adds a\n   * title tooltip with the full text when it doesn't fit.\n   * @default false\n   */\n  truncate?: boolean;\n\n  /**\n   * Render the label exactly as given instead of capitalizing each word. Use for labels that are\n   * authored outside the product, where the casing is not ours to change.\n   * @default false\n   */\n  preserveCase?: boolean;\n\n  /**\n   * The text label to display\n   */\n  children?: ReactNode;\n}\n\ninterface StatusColors {\n  background: string;\n  text: string;\n  icon: string;\n}\n\nconst FILLED_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: Color.BackgroundStatusIndicatorDefault,\n    text: Color.TextStatusIndicatorDefault,\n    icon: Color.BorderIconLabelGrey,\n  },\n  attention: {\n    background: Color.BackgroundStatusIndicatorAttention,\n    text: Color.TextStatusIndicatorAttention,\n    icon: Color.BorderIconLabelYellow,\n  },\n  warning: {\n    background: Color.BackgroundStatusIndicatorWarning,\n    text: Color.TextStatusIndicatorWarning,\n    icon: Color.BorderIconLabelOrange,\n  },\n  critical: {\n    background: Color.BackgroundStatusIndicatorCritical,\n    text: Color.TextStatusIndicatorCritical,\n    icon: Color.BorderIconLabelRed,\n  },\n  success: {\n    background: Color.BackgroundStatusIndicatorSuccess,\n    text: Color.TextStatusIndicatorSuccess,\n    icon: Color.BorderIconLabelGreen,\n  },\n  feature: {\n    background: Color.BackgroundStatusIndicatorFeature,\n    text: Color.TextStatusIndicatorFeature,\n    icon: Color.BorderIconLabelPurple,\n  },\n  informational: {\n    background: Color.BackgroundStatusIndicatorInformational,\n    text: Color.TextStatusIndicatorInformational,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: Color.BackgroundStatusIndicatorMiscellaneous,\n    text: Color.TextStatusIndicatorMiscellaneous,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst TRANSPARENT_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSecondary,\n  },\n  attention: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  warning: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  critical: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconDanger,\n  },\n  success: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSuccess,\n  },\n  feature: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconActive,\n  },\n  informational: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst semanticFilledStatusColors = (t: SemanticTokens): Record<StatusType, StatusColors> => ({\n  neutral: { background: t.StatusNeutral, text: t.FgPrimary, icon: t.FgPrimary },\n  attention: {\n    background: withAlpha(t.StatusHighlight, t.Opacity15),\n    text: t.FgHighlight,\n    icon: t.FgHighlight,\n  },\n  warning: {\n    background: withAlpha(t.StatusWarning, t.Opacity15),\n    text: t.FgWarning2,\n    icon: t.FgWarning2,\n  },\n  critical: {\n    background: withAlpha(t.StatusDanger3, t.Opacity15),\n    text: t.FgDanger2,\n    icon: t.FgDanger2,\n  },\n  success: {\n    background: withAlpha(t.StatusSuccess2, t.Opacity15),\n    text: t.FgSuccess,\n    icon: t.FgSuccess,\n  },\n  feature: {\n    background: withAlpha(t.StatusFeature, t.Opacity25),\n    text: t.FgFeature,\n    icon: t.FgFeature,\n  },\n  informational: {\n    background: withAlpha(t.StatusInfo2, t.Opacity25),\n    text: t.FgInfo,\n    icon: t.FgInfo,\n  },\n  miscellaneous: {\n    background: withAlpha(t.StatusMisc, t.Opacity15),\n    text: t.FgMisc,\n    icon: t.FgMisc,\n  },\n});\n\nconst semanticTransparentStatusColors = (t: SemanticTokens): Record<StatusType, StatusColors> => ({\n  neutral: { background: 'transparent', text: t.FgPrimary, icon: t.FgSecondary },\n  attention: { background: 'transparent', text: t.FgPrimary, icon: t.FeedbackHighlight1 },\n  warning: { background: 'transparent', text: t.FgPrimary, icon: t.FgWarning1 },\n  critical: { background: 'transparent', text: t.FgPrimary, icon: t.FgDanger1 },\n  success: { background: 'transparent', text: t.FgPrimary, icon: t.FgSuccess },\n  feature: { background: 'transparent', text: t.FgPrimary, icon: t.FgAccent },\n  informational: { background: 'transparent', text: t.FgPrimary, icon: t.FgInfo },\n  miscellaneous: { background: 'transparent', text: t.FgPrimary, icon: t.FgMisc },\n});\n\nconst semanticStatusColorCache = new WeakMap<\n  SemanticTokens,\n  Record<BackgroundType, Record<StatusType, StatusColors>>\n>();\n\nconst semanticStatusColors = (tokens: SemanticTokens) => {\n  let colors = semanticStatusColorCache.get(tokens);\n  if (!colors) {\n    colors = {\n      filled: semanticFilledStatusColors(tokens),\n      none: semanticTransparentStatusColors(tokens),\n    };\n    semanticStatusColorCache.set(tokens, colors);\n  }\n  return colors;\n};\n\nconst statusColors = (theme: MaybeSemanticTheme, background: BackgroundType) => {\n  const tokens = semanticTokens(theme);\n  if (tokens) {\n    return semanticStatusColors(tokens)[background];\n  }\n  return background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n};\n\nconst Label = styled.div<{\n  $type: StatusType;\n  $background: BackgroundType;\n  $truncate: boolean;\n  $preserveCase: boolean;\n}>`\n  ${paragraphMixins.sm}\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-shrink: ${({ $truncate }) => ($truncate ? 1 : 0)};\n  min-width: ${({ $truncate }) => ($truncate ? '0' : 'auto')};\n  /* Line box hugs the font so pill height is driven by padding alone, and clipping an overflowing\n     label can't cut into descenders. Matches Sticker. */\n  line-height: 1;\n  white-space: nowrap;\n  text-transform: ${({ $preserveCase }) => ($preserveCase ? 'none' : 'capitalize')};\n  /* Slight optical centering adjustment */\n  transform: translateY(0.5px);\n  color: ${({ theme, $type, $background }) => statusColors(theme, $background)[$type].text};\n`;\n\nconst IconContainer = styled.span<{ $type: StatusType; $background: BackgroundType }>`\n  line-height: 0;\n  color: ${({ theme, $type, $background }) => statusColors(theme, $background)[$type].icon};\n`;\n\nconst LabelContainer = styled.div<{ $hasIcon: boolean; $truncate: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  padding: ${({ $hasIcon }) =>\n    `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${$hasIcon ? Spacing[1] : Spacing[2]}`};\n  position: relative;\n  flex-shrink: ${({ $truncate }) => ($truncate ? 1 : 0)};\n  min-width: ${({ $truncate }) => ($truncate ? '0' : 'auto')};\n`;\n\nconst StyledStatusIndicator = styled.div<{\n  $type: StatusType;\n  $background: BackgroundType;\n  $truncate: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  border-radius: ${BorderRadius.Xl};\n  width: fit-content;\n  max-width: ${({ $truncate }) => ($truncate ? '100%' : 'none')};\n\n  ${({ theme, $type, $background }) => css`\n    background-color: ${statusColors(theme, $background)[$type].background};\n  `}\n`;\n\n/**\n * StatusIndicator displays semantic status information with a colored icon and label.\n * Supports both filled backgrounds and transparent styles.\n *\n * @example\n * ```tsx\n * <StatusIndicator status=\"active\">Active</StatusIndicator>\n * <StatusIndicator type=\"success\" background=\"filled\">Approved</StatusIndicator>\n * <StatusIndicator type=\"critical\" background=\"none\">Failed</StatusIndicator>\n * ```\n */\nexport const StatusIndicator = ({\n  status,\n  type,\n  background = 'filled',\n  showIcon = true,\n  leadingIcon,\n  truncate = false,\n  preserveCase = false,\n  children,\n  ...props\n}: StatusIndicatorProps) => {\n  const resolvedType = type ?? (status != null ? STATUS_CONFIG[status].type : 'neutral');\n\n  // Determine which icon to show:\n  // - showIcon=false with background='filled': label-only variant (no icon)\n  // - leadingIcon set (including null): explicit override\n  // - status set: use preset icon\n  // - otherwise: default CircleNullIcon\n  // - background='none' always shows icon (showIcon is ignored for none background)\n  let iconToRender;\n  if (!showIcon && background === 'filled') {\n    iconToRender = null;\n  } else if (typeof leadingIcon !== 'undefined') {\n    iconToRender = leadingIcon;\n  } else if (status != null) {\n    iconToRender = STATUS_CONFIG[status].icon;\n  } else {\n    iconToRender = <CircleNullIcon />;\n  }\n  const hasIcon = iconToRender != null;\n\n  return (\n    <StyledStatusIndicator\n      $type={resolvedType}\n      $background={background}\n      $truncate={truncate}\n      {...props}\n    >\n      <LabelContainer $hasIcon={hasIcon} $truncate={truncate}>\n        {hasIcon && (\n          <IconContainer $type={resolvedType} $background={background}>\n            {iconToRender}\n          </IconContainer>\n        )}\n        <Label\n          $type={resolvedType}\n          $background={background}\n          $truncate={truncate}\n          $preserveCase={preserveCase}\n        >\n          {truncate ? <TruncatedText>{children}</TruncatedText> : children}\n        </Label>\n      </LabelContainer>\n    </StyledStatusIndicator>\n  );\n};\n\nexport default StatusIndicator;\n"],"mappings":"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"}
+{"version":3,"file":"StatusIndicator-bEnMWV_S.mjs","names":[],"sources":["../components/StatusIndicator/StatusIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleHalfIcon,\n  CircleMinusFillIcon,\n  CircleNullIcon,\n  CircleSlashIcon,\n  WarningFillIcon,\n} from '@persona/icons/12px';\nimport { withAlpha } from 'design-system/lib/color';\nimport { type MaybeSemanticTheme, semanticTokens } from 'design-system/lib/semanticColor';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { SemanticTokens } from 'design-system/variables/semantic';\n\nexport type StatusType =\n  | 'neutral'\n  | 'attention'\n  | 'warning'\n  | 'critical'\n  | 'success'\n  | 'feature'\n  | 'informational'\n  | 'miscellaneous';\nexport type BackgroundType = 'filled' | 'none';\n\n/**\n * Narrow set of status presets — one value per type+icon combination.\n * Override color with `type` or icon with `leadingIcon` when needed.\n */\nexport type Status =\n  | 'open'\n  | 'pending'\n  | 'completed'\n  | 'active'\n  | 'failed'\n  | 'needs_review'\n  | 'canceled'\n  | 'archived';\n\nconst STATUS_CONFIG: Record<Status, { type: StatusType; icon: ReactNode }> = {\n  open: { type: 'neutral', icon: <CircleNullIcon /> },\n  pending: { type: 'neutral', icon: <CircleHalfIcon /> },\n  completed: { type: 'success', icon: <CircleCheckFillIcon /> },\n  active: { type: 'success', icon: <CircleFillIcon /> },\n  failed: { type: 'critical', icon: <CircleSlashIcon /> },\n  needs_review: { type: 'warning', icon: <WarningFillIcon /> },\n  canceled: { type: 'attention', icon: <CircleSlashIcon /> },\n  archived: { type: 'neutral', icon: <CircleMinusFillIcon /> },\n};\n\n/** All supported `status` preset keys, derived from the config map. */\nexport const STATUSES = Object.keys(STATUS_CONFIG) as Status[];\n\nexport interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Preset that sets a default semantic type and icon.\n   * Explicit `type` and `leadingIcon` override the preset.\n   */\n  status?: Status;\n\n  /**\n   * The semantic status type to display. Overrides `status` when both are set.\n   */\n  type?: StatusType;\n\n  /**\n   * Whether to show filled background or transparent\n   */\n  background?: BackgroundType;\n\n  /**\n   * Whether to show the icon. When false, displays label-only variant\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Optional custom icon to replace the default icon indicator (12px recommended)\n   * - undefined (default): Uses `status` icon when set, otherwise CircleNullIcon\n   * - null: Hides the icon completely\n   * - ReactNode: Shows the provided custom icon\n   * Note: showIcon must be true for this to take effect\n   */\n  leadingIcon?: ReactNode | null;\n\n  /**\n   * Truncate the label with an ellipsis instead of letting it overflow its container. Adds a\n   * title tooltip with the full text when it doesn't fit.\n   * @default false\n   */\n  truncate?: boolean;\n\n  /**\n   * Render the label exactly as given instead of capitalizing each word. Use for labels that are\n   * authored outside the product, where the casing is not ours to change.\n   * @default false\n   */\n  preserveCase?: boolean;\n\n  /**\n   * The text label to display\n   */\n  children?: ReactNode;\n}\n\ninterface StatusColors {\n  background: string;\n  text: string;\n  icon: string;\n}\n\nconst FILLED_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: Color.BackgroundStatusIndicatorDefault,\n    text: Color.TextStatusIndicatorDefault,\n    icon: Color.BorderIconLabelGrey,\n  },\n  attention: {\n    background: Color.BackgroundStatusIndicatorAttention,\n    text: Color.TextStatusIndicatorAttention,\n    icon: Color.BorderIconLabelYellow,\n  },\n  warning: {\n    background: Color.BackgroundStatusIndicatorWarning,\n    text: Color.TextStatusIndicatorWarning,\n    icon: Color.BorderIconLabelOrange,\n  },\n  critical: {\n    background: Color.BackgroundStatusIndicatorCritical,\n    text: Color.TextStatusIndicatorCritical,\n    icon: Color.BorderIconLabelRed,\n  },\n  success: {\n    background: Color.BackgroundStatusIndicatorSuccess,\n    text: Color.TextStatusIndicatorSuccess,\n    icon: Color.BorderIconLabelGreen,\n  },\n  feature: {\n    background: Color.BackgroundStatusIndicatorFeature,\n    text: Color.TextStatusIndicatorFeature,\n    icon: Color.BorderIconLabelPurple,\n  },\n  informational: {\n    background: Color.BackgroundStatusIndicatorInformational,\n    text: Color.TextStatusIndicatorInformational,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: Color.BackgroundStatusIndicatorMiscellaneous,\n    text: Color.TextStatusIndicatorMiscellaneous,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst TRANSPARENT_STATUS_COLORS: Record<StatusType, StatusColors> = {\n  neutral: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSecondary,\n  },\n  attention: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  warning: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconWarning,\n  },\n  critical: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconDanger,\n  },\n  success: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconSuccess,\n  },\n  feature: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconActive,\n  },\n  informational: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelBlue,\n  },\n  miscellaneous: {\n    background: 'transparent',\n    text: Color.TextPrimary,\n    icon: Color.BorderIconLabelTeal,\n  },\n};\n\nconst semanticFilledStatusColors = (t: SemanticTokens): Record<StatusType, StatusColors> => ({\n  neutral: { background: t.StatusNeutral, text: t.FgPrimary, icon: t.FgPrimary },\n  attention: {\n    background: withAlpha(t.StatusHighlight, t.Opacity15),\n    text: t.FgHighlight,\n    icon: t.FgHighlight,\n  },\n  warning: {\n    background: withAlpha(t.StatusWarning, t.Opacity15),\n    text: t.FgWarning2,\n    icon: t.FgWarning2,\n  },\n  critical: {\n    background: withAlpha(t.StatusDanger3, t.Opacity15),\n    text: t.FgDanger2,\n    icon: t.FgDanger2,\n  },\n  success: {\n    background: withAlpha(t.StatusSuccess2, t.Opacity15),\n    text: t.FgSuccess,\n    icon: t.FgSuccess,\n  },\n  feature: {\n    background: withAlpha(t.StatusFeature, t.Opacity25),\n    text: t.FgFeature,\n    icon: t.FgFeature,\n  },\n  informational: {\n    background: withAlpha(t.StatusInfo2, t.Opacity25),\n    text: t.FgInfo,\n    icon: t.FgInfo,\n  },\n  miscellaneous: {\n    background: withAlpha(t.StatusMisc, t.Opacity15),\n    text: t.FgMisc,\n    icon: t.FgMisc,\n  },\n});\n\nconst semanticTransparentStatusColors = (t: SemanticTokens): Record<StatusType, StatusColors> => ({\n  neutral: { background: 'transparent', text: t.FgPrimary, icon: t.FgSecondary },\n  attention: { background: 'transparent', text: t.FgPrimary, icon: t.FeedbackHighlight1 },\n  warning: { background: 'transparent', text: t.FgPrimary, icon: t.FgWarning1 },\n  critical: { background: 'transparent', text: t.FgPrimary, icon: t.FgDanger1 },\n  success: { background: 'transparent', text: t.FgPrimary, icon: t.FgSuccess },\n  feature: { background: 'transparent', text: t.FgPrimary, icon: t.FgAccent },\n  informational: { background: 'transparent', text: t.FgPrimary, icon: t.FgInfo },\n  miscellaneous: { background: 'transparent', text: t.FgPrimary, icon: t.FgMisc },\n});\n\nconst semanticStatusColorCache = new WeakMap<\n  SemanticTokens,\n  Record<BackgroundType, Record<StatusType, StatusColors>>\n>();\n\nconst semanticStatusColors = (tokens: SemanticTokens) => {\n  let colors = semanticStatusColorCache.get(tokens);\n  if (!colors) {\n    colors = {\n      filled: semanticFilledStatusColors(tokens),\n      none: semanticTransparentStatusColors(tokens),\n    };\n    semanticStatusColorCache.set(tokens, colors);\n  }\n  return colors;\n};\n\nconst statusColors = (theme: MaybeSemanticTheme, background: BackgroundType) => {\n  const tokens = semanticTokens(theme);\n  if (tokens) {\n    return semanticStatusColors(tokens)[background];\n  }\n  return background === 'filled' ? FILLED_STATUS_COLORS : TRANSPARENT_STATUS_COLORS;\n};\n\nconst Label = styled.div<{\n  $type: StatusType;\n  $background: BackgroundType;\n  $truncate: boolean;\n  $preserveCase: boolean;\n}>`\n  ${paragraphMixins.sm}\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-shrink: ${({ $truncate }) => ($truncate ? 1 : 0)};\n  min-width: ${({ $truncate }) => ($truncate ? '0' : 'auto')};\n  /* Line box hugs the font so pill height is driven by padding alone, and clipping an overflowing\n     label can't cut into descenders. Matches Sticker. */\n  line-height: 1;\n  white-space: nowrap;\n  text-transform: ${({ $preserveCase }) => ($preserveCase ? 'none' : 'capitalize')};\n  /* Slight optical centering adjustment */\n  transform: translateY(0.5px);\n  color: ${({ theme, $type, $background }) => statusColors(theme, $background)[$type].text};\n`;\n\nconst IconContainer = styled.span<{ $type: StatusType; $background: BackgroundType }>`\n  line-height: 0;\n  color: ${({ theme, $type, $background }) => statusColors(theme, $background)[$type].icon};\n`;\n\nconst LabelContainer = styled.div<{ $hasIcon: boolean; $truncate: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  padding: ${({ $hasIcon }) =>\n    `${Spacing[1]} ${Spacing[2]} ${Spacing[1]} ${$hasIcon ? Spacing[1] : Spacing[2]}`};\n  position: relative;\n  flex-shrink: ${({ $truncate }) => ($truncate ? 1 : 0)};\n  min-width: ${({ $truncate }) => ($truncate ? '0' : 'auto')};\n`;\n\nconst StyledStatusIndicator = styled.div<{\n  $type: StatusType;\n  $background: BackgroundType;\n  $truncate: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  border-radius: ${BorderRadius.Xl};\n  width: fit-content;\n  max-width: ${({ $truncate }) => ($truncate ? '100%' : 'none')};\n\n  ${({ theme, $type, $background }) => css`\n    background-color: ${statusColors(theme, $background)[$type].background};\n  `}\n`;\n\n/**\n * StatusIndicator displays semantic status information with a colored icon and label.\n * Supports both filled backgrounds and transparent styles.\n *\n * @example\n * ```tsx\n * <StatusIndicator status=\"active\">Active</StatusIndicator>\n * <StatusIndicator type=\"success\" background=\"filled\">Approved</StatusIndicator>\n * <StatusIndicator type=\"critical\" background=\"none\">Failed</StatusIndicator>\n * ```\n */\nexport const StatusIndicator = ({\n  status,\n  type,\n  background = 'filled',\n  showIcon = true,\n  leadingIcon,\n  truncate = false,\n  preserveCase = false,\n  children,\n  ...props\n}: StatusIndicatorProps) => {\n  const resolvedType = type ?? (status != null ? STATUS_CONFIG[status].type : 'neutral');\n\n  // Determine which icon to show:\n  // - showIcon=false with background='filled': label-only variant (no icon)\n  // - leadingIcon set (including null): explicit override\n  // - status set: use preset icon\n  // - otherwise: default CircleNullIcon\n  // - background='none' always shows icon (showIcon is ignored for none background)\n  let iconToRender;\n  if (!showIcon && background === 'filled') {\n    iconToRender = null;\n  } else if (typeof leadingIcon !== 'undefined') {\n    iconToRender = leadingIcon;\n  } else if (status != null) {\n    iconToRender = STATUS_CONFIG[status].icon;\n  } else {\n    iconToRender = <CircleNullIcon />;\n  }\n  const hasIcon = iconToRender != null;\n\n  return (\n    <StyledStatusIndicator\n      $type={resolvedType}\n      $background={background}\n      $truncate={truncate}\n      {...props}\n    >\n      <LabelContainer $hasIcon={hasIcon} $truncate={truncate}>\n        {hasIcon && (\n          <IconContainer $type={resolvedType} $background={background}>\n            {iconToRender}\n          </IconContainer>\n        )}\n        <Label\n          $type={resolvedType}\n          $background={background}\n          $truncate={truncate}\n          $preserveCase={preserveCase}\n        >\n          {truncate ? <TruncatedText>{children}</TruncatedText> : children}\n        </Label>\n      </LabelContainer>\n    </StyledStatusIndicator>\n  );\n};\n\nexport default StatusIndicator;\n"],"mappings":"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"}

package/dist/{Sticker-BLbgJxcH.mjs → Sticker-B-fU8lgu.mjs}

@@ -4,8 +4,8 @@ import { semanticColor, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import { withAlpha } from "./lib/color.mjs";
 import { isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { n as Stack } from "./Stack-Bkn0TUDe.mjs";
-import { t as IconButton } from "./IconButton-CCLMYWVN.mjs";
+import { n as Stack } from "./Stack-CEPzs4Pb.mjs";
+import { t as IconButton } from "./IconButton-BHFCjvzs.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons/12px";
@@ -352,4 +352,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-BLbgJxcH.mjs.map
+//# sourceMappingURL=Sticker-B-fU8lgu.mjs.map