@persona/design-system 0.1.7 → 0.1.9

package/dist/SegmentedControl-CIJz0oxY.cjs

@@ -1,124 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-const require_useFormField = require("./useFormField-B98dmreO.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
-let react_aria_components = require("react-aria-components");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/SegmentedControl/SegmentedControl.tsx
-const SegmentedControlSizeContext = (0, react.createContext)("md");
-const StyledSegmentedControl = (0, styled_components.default)(react_aria_components.ToggleButtonGroup)`
-  display: inline-flex;
-  background-color: ${({ theme }) => theme.color.border.input};
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
-  padding: 1px;
-  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
-  height: ${({ $size = "md" }) => $size === "sm" ? "20px" : "24px"};
-`;
-/**
-* A segmented control component that allows users to select between multiple options.
-* Built with React Aria for accessibility and keyboard navigation.
-*/
-const SegmentedControl = (0, react.forwardRef)(function SegmentedControl({ id, selectedKey, defaultSelectedKey, onSelectionChange, disabled, fullWidth = false, size = "md", className, "aria-label": ariaLabel, children, ...props }, ref) {
-	const field = require_useFormField.useFormField({
-		inputId: id,
-		disabled
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlSizeContext.Provider, {
-		value: size,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSegmentedControl, {
-			ref,
-			className,
-			selectionMode: "single",
-			selectedKeys: selectedKey ? [selectedKey] : void 0,
-			defaultSelectedKeys: defaultSelectedKey ? [defaultSelectedKey] : void 0,
-			onSelectionChange: (keys) => {
-				const key = Array.from(keys)[0];
-				if (key && onSelectionChange) onSelectionChange(key);
-			},
-			isDisabled: field.disabled,
-			"aria-label": ariaLabel,
-			"aria-labelledby": field.labelId,
-			"aria-describedby": field.helperTextId,
-			"aria-errormessage": field.hasError ? field.helperTextId : void 0,
-			"aria-invalid": field.hasError,
-			$fullWidth: fullWidth,
-			$size: size,
-			...props,
-			id: field.inputId,
-			children
-		})
-	});
-});
-const StyledSegment = (0, styled_components.default)(react_aria_components.ToggleButton)`
-  ${require_mixins_text.paragraphMixins.sm};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  border: none;
-  border-radius: 3px;
-  color: ${({ theme }) => theme.color.text.secondary};
-  cursor: pointer;
-  flex: 1;
-  line-height: 1;
-
-  & * {
-    cursor: inherit;
-  }
-  padding: 0 ${({ $size = "md" }) => $size === "sm" ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
-  position: relative;
-  transition: all 0.15s ease-in-out;
-  white-space: nowrap;
-
-  /* Hover state */
-  &[data-hovered] {
-    background-color: ${({ theme }) => theme.color.variants.basic.hover};
-  }
-
-  /* Selected state */
-  &[data-selected] {
-    background-color: ${({ theme }) => theme.color.primary.white};
-    color: ${({ theme }) => theme.color.text.primary};
-  }
-
-  /* Disabled state */
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  /* Remove focus outline unless we're using a keyboard */
-  &[data-focused]:not([data-focus-visible]) {
-    outline: none;
-  }
-`;
-/**
-* A segment item component for use within SegmentedControl.
-*/
-const SegmentedControlItem = (0, react.forwardRef)(function SegmentedControlItem({ disabled, children, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSegment, {
-		ref,
-		isDisabled: disabled,
-		$size: (0, react.useContext)(SegmentedControlSizeContext),
-		...props,
-		children
-	});
-});
-//#endregion
-Object.defineProperty(exports, "SegmentedControl", {
-	enumerable: true,
-	get: function() {
-		return SegmentedControl;
-	}
-});
-Object.defineProperty(exports, "SegmentedControlItem", {
-	enumerable: true,
-	get: function() {
-		return SegmentedControlItem;
-	}
-});
-
-//# sourceMappingURL=SegmentedControl-CIJz0oxY.cjs.map

package/dist/SegmentedControl-CIJz0oxY.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl-CIJz0oxY.cjs","names":["ToggleButtonGroup","BorderRadius","useFormField","ToggleButton","paragraphMixins","Spacing"],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext, forwardRef, type Key, type ReactNode, useContext } from 'react';\nimport { ToggleButton, ToggleButtonGroup, type ToggleButtonProps } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SegmentedControlSizeContext = createContext<'sm' | 'md'>('md');\n\nexport interface SegmentedControlProps {\n  id?: string;\n  className?: string;\n\n  /**\n   * Current selected key (controlled)\n   */\n  selectedKey?: Key;\n\n  /**\n   * Default selected key (uncontrolled)\n   */\n  defaultSelectedKey?: Key;\n\n  /**\n   * Callback when selection changes\n   */\n  onSelectionChange?: (key: Key) => void;\n\n  /**\n   * Whether the entire component is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the component should take full width\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Size of the segmented control\n   */\n  size?: 'sm' | 'md';\n\n  /**\n   * Accessible label for the group\n   */\n  'aria-label'?: string;\n\n  /**\n   * Segment components\n   */\n  children: ReactNode;\n}\n\ninterface StyledSegmentedControlProps {\n  id?: string;\n  $fullWidth?: boolean;\n  $size?: 'sm' | 'md';\n}\n\nconst StyledSegmentedControl = styled(ToggleButtonGroup)<StyledSegmentedControlProps>`\n  display: inline-flex;\n  background-color: ${({ theme }) => theme.color.border.input};\n  border-radius: ${BorderRadius.Md};\n  padding: 1px;\n  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};\n  height: ${({ $size = 'md' }) => ($size === 'sm' ? '20px' : '24px')};\n`;\n\n/**\n * A segmented control component that allows users to select between multiple options.\n * Built with React Aria for accessibility and keyboard navigation.\n */\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      id,\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange,\n      disabled,\n      fullWidth = false,\n      size = 'md',\n      className,\n      'aria-label': ariaLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFormField({ inputId: id, disabled });\n\n    return (\n      <SegmentedControlSizeContext.Provider value={size}>\n        <StyledSegmentedControl\n          ref={ref}\n          className={className}\n          selectionMode='single'\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\n          defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}\n          onSelectionChange={(keys) => {\n            const key = Array.from(keys)[0];\n            if (key && onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          isDisabled={field.disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={field.labelId}\n          aria-describedby={field.helperTextId}\n          aria-errormessage={field.hasError ? field.helperTextId : undefined}\n          aria-invalid={field.hasError}\n          $fullWidth={fullWidth}\n          $size={size}\n          {...props}\n          id={field.inputId}\n        >\n          {children}\n        </StyledSegmentedControl>\n      </SegmentedControlSizeContext.Provider>\n    );\n  },\n);\n\nconst StyledSegment = styled(ToggleButton)<{ $size?: 'sm' | 'md' }>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 3px;\n  color: ${({ theme }) => theme.color.text.secondary};\n  cursor: pointer;\n  flex: 1;\n  line-height: 1;\n\n  & * {\n    cursor: inherit;\n  }\n  padding: 0 ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[1] : Spacing[2])};\n  position: relative;\n  transition: all 0.15s ease-in-out;\n  white-space: nowrap;\n\n  /* Hover state */\n  &[data-hovered] {\n    background-color: ${({ theme }) => theme.color.variants.basic.hover};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => theme.color.primary.white};\n    color: ${({ theme }) => theme.color.text.primary};\n  }\n\n  /* Disabled state */\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Remove focus outline unless we're using a keyboard */\n  &[data-focused]:not([data-focus-visible]) {\n    outline: none;\n  }\n`;\n\nexport interface SegmentedControlItemProps extends Omit<\n  ToggleButtonProps,\n  'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'\n> {\n  /**\n   * Whether this control item is disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * A segment item component for use within SegmentedControl.\n */\nconst SegmentedControlItem = forwardRef<HTMLButtonElement, SegmentedControlItemProps>(\n  function SegmentedControlItem({ disabled, children, ...props }, ref) {\n    const size = useContext(SegmentedControlSizeContext);\n    return (\n      <StyledSegment ref={ref} isDisabled={disabled} $size={size} {...props}>\n        {children}\n      </StyledSegment>\n    );\n  },\n);\n\nexport default SegmentedControl;\nexport { SegmentedControlItem };\n"],"mappings":";;;;;;;;;;AAQA,MAAM,+BAAA,GAAA,MAAA,eAAyD,KAAK;AAqDpE,MAAM,yBAAyB,CAAA,GAAA,kBAAA,SAAOA,sBAAAA,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;mBAC3CC,uBAAAA,aAAa,GAAG;;YAEvB,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,oBAAA,GAAA,MAAA,YACX,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQC,qBAAAA,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,iBAAA,GAAA,kBAAA,KAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,iBAAA,GAAA,kBAAA,KAAC,wBAAD;GACO;GACM;GACX,eAAc;GACd,cAAc,cAAc,CAAC,YAAY,GAAG,KAAA;GAC5C,qBAAqB,qBAAqB,CAAC,mBAAmB,GAAG,KAAA;GACjE,oBAAoB,SAAS;IAC3B,MAAM,MAAM,MAAM,KAAK,KAAK,CAAC;AAC7B,QAAI,OAAO,kBACT,mBAAkB,IAAI;;GAG1B,YAAY,MAAM;GAClB,cAAY;GACZ,mBAAiB,MAAM;GACvB,oBAAkB,MAAM;GACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;GACzD,gBAAc,MAAM;GACpB,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,IAAI,MAAM;GAET;GACsB,CAAA;EACY,CAAA;EAG5C;AAED,MAAM,gBAAgB,CAAA,GAAA,kBAAA,SAAOC,sBAAAA,aAAa;IACtCC,oBAAAA,gBAAgB,GAAG;;;;;;;YAOX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAOC,uBAAAA,QAAQ,KAAKA,uBAAAA,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;cACnD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,MAAM,wBAAA,GAAA,MAAA,YACJ,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,QAAA,GAAA,MAAA,YAFzB,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}

package/dist/SegmentedControl.d.cts

@@ -1,2 +0,0 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, r as SegmentedControlItemProps, t as SegmentedControl } from "./SegmentedControl-BYuXohIp.cjs";
-export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlItemProps, SegmentedControlProps };

package/dist/Select-BMEwCfbv.d.mts

@@ -1,77 +0,0 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-DrG6mA0V.mjs";
-import { l as MenuItemProps } from "./Menu-BJ5c7HGD.mjs";
-import * as _$react from "react";
-import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Property } from "csstype";
-
-//#region components/Select/Select.d.ts
-interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {
-  'aria-label'?: string;
-  placeholder?: string;
-  /**
-   * id will be applied to trigger
-   */
-  id?: string;
-  /**
-   * Class name will be applied to trigger
-   */
-  className?: string;
-  /**
-   * Max height of options menu
-   */
-  maxHeight?: number;
-  /**
-   * Min width of the select
-   */
-  minWidth?: number;
-  /**
-   * Width of the selected value container
-   */
-  valueContainerWidth?: 'auto' | '100%';
-  /**
-   * Render dropdown menu in a portal.
-   */
-  portal?: boolean;
-  /**
-   * Props to apply to Radix Select.Trigger within
-   */
-  triggerProps?: SelectPrimitive.SelectTriggerProps;
-  /**
-   * Props to apply to Radix Select.Content within
-   */
-  contentProps?: SelectPrimitive.SelectContentProps;
-  /**
-   * Callback meant for use with `react-hook-form`'s `useForm` (or Persona's `useFormSecurely`)
-   */
-  onChange?: (event: {
-    target: {
-      value: string;
-    };
-  }) => void;
-  size?: InputSizes;
-  value?: string | null;
-  width?: string;
-  header?: ReactNode;
-  footer?: ReactNode;
-  /**
-   * z-index of content. Please use sparingly.
-   */
-  zIndex?: Property.ZIndex;
-}
-interface SelectHeaderProps {
-  title?: ReactNode;
-  menuItems?: ReactNode;
-  menuTriggerLabel?: string;
-}
-declare const SelectHeader: ({
-  title,
-  menuItems,
-  menuTriggerLabel
-}: SelectHeaderProps) => _$react_jsx_runtime0.JSX.Element;
-declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.RefAttributes<HTMLButtonElement>>;
-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-BMEwCfbv.d.mts.map

package/dist/Select-ByTgXOlU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select-ByTgXOlU.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-C65bfYeT.cjs

@@ -1,262 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
-const require_mixins_input = require("./mixins/input.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-const require_Text = require("./Text-CzN0DOXV.cjs");
-const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Stack = require("./Stack-BF-9YjA1.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_useFormField = require("./useFormField-B98dmreO.cjs");
-const require_Menu = require("./Menu-BXic-30n.cjs");
-const require_DropdownMenu = require("./DropdownMenu-CfJxgWN5.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _persona_icons = require("@persona/icons");
-let react_aria = require("react-aria");
-let _radix_ui_react_select = require("@radix-ui/react-select");
-_radix_ui_react_select = require_chunk.__toESM(_radix_ui_react_select);
-//#region components/Select/Select.tsx
-const SelectButton = (0, styled_components.default)("button")`
-  ${require_mixins_input};
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  outline: none;
-  appearance: none;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-right: ${_persona_design_tokens.Spacing[6]};
-  width: ${({ $width }) => $width ?? "100%"};
-  min-width: ${({ $minWidth }) => $minWidth != null ? `${$minWidth}px` : "auto"};
-  pointer-events: auto;
-
-  &${require_lib_pseudoClass.isNotDisabled} {
-    cursor: pointer;
-  }
-
-  ${({ theme, isSelectingPlaceholder }) => isSelectingPlaceholder && styled_components.css`
-      color: ${theme.color.text.secondary};
-    `}
-`;
-const SelectValueContainer = styled_components.default.span`
-  text-overflow: ellipsis;
-  min-width: 0px;
-  overflow: hidden;
-  text-align: start;
-
-  ${({ width }) => width && styled_components.css`
-      width: ${width};
-    `}
-`;
-const OptionSubtitle = styled_components.default.div`
-  color: ${({ theme }) => theme.color.text.secondary};
-  font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};
-  margin-top: ${_persona_design_tokens.Spacing[1]};
-`;
-const OptionsMenu = (0, styled_components.default)(require_Menu.Menu)`
-  width: var(--radix-select-trigger-width);
-  max-height: ${({ maxHeight }) => maxHeight ?? "225px !important"};
-  overflow-y: auto;
-  margin-bottom: 0;
-
-  ${({ size }) => {
-	switch (size) {
-		case "md": return styled_components.css`
-          ${require_Menu.MenuList} {
-            padding: ${_persona_design_tokens.Spacing[2]};
-          }
-
-          ${OptionItem} {
-            ${require_mixins_text.paragraphMixins.md};
-            padding: ${_persona_design_tokens.Spacing[2]};
-          }
-
-          ${require_Menu.MenuHeading} {
-            padding: ${_persona_design_tokens.Spacing[2]};
-          }
-        `;
-		case "sm": return styled_components.css`
-          ${require_Menu.MenuList} {
-            padding: ${_persona_design_tokens.Spacing[1]};
-          }
-
-          ${OptionItem} {
-            ${require_mixins_text.paragraphMixins.sm};
-            padding: ${_persona_design_tokens.Spacing[1]};
-          }
-
-          ${require_Menu.MenuHeading} {
-            padding: ${_persona_design_tokens.Spacing[1]};
-          }
-        `;
-	}
-}}
-`;
-const SelectContent = (0, styled_components.default)(_radix_ui_react_select.Content)`
-  z-index: ${({ $zIndex }) => $zIndex || require_lib_zindex.Z_INDICES.dropdown};
-`;
-const SelectHeaderContainer = (0, styled_components.default)(require_Stack.HStack)`
-  display: flex;
-  justify-content: space-between;
-  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[1]} 0 ${_persona_design_tokens.Spacing[1]};
-  margin-bottom: ${_persona_design_tokens.Spacing[1]};
-`;
-const SelectFooter = styled_components.default.div`
-  padding: ${_persona_design_tokens.Spacing[1]} 0;
-  margin-top: ${_persona_design_tokens.Spacing[1]};
-  border-top: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-`;
-const SelectMenu = (0, react.forwardRef)(function SelectMenu(props, forwardedRef) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionsMenu, {
-		listRef: forwardedRef,
-		...props
-	});
-});
-const OptionItem = (0, styled_components.default)(require_Menu.MenuItem)`
-  ${require_mixins_text.paragraphMixins.md};
-  padding: ${_persona_design_tokens.Spacing[4]};
-`;
-const SelectItem = (0, react.forwardRef)(function SelectItem(props, forwardedRef) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionItem, {
-		ref: forwardedRef,
-		...props
-	});
-});
-const StyledIconContainer = (0, styled_components.default)(_radix_ui_react_select.Icon)`
-  position: absolute;
-  right: ${_persona_design_tokens.Spacing[2]};
-  display: flex;
-  justify-content: center;
-
-  ${({ disabled }) => styled_components.css`
-    color: ${disabled ? _persona_design_tokens.Color.BorderIconDisabled : _persona_design_tokens.Color.BorderIconPrimary};
-  `}
-`;
-const SelectHeader = ({ title, menuItems, menuTriggerLabel }) => {
-	const uniqueId = (0, react_aria.useId)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectHeaderContainer, {
-		align: "center",
-		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
-			color: "primary",
-			weight: "bold",
-			size: "md",
-			children: title
-		}), menuItems && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
-			portal: true,
-			trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {}) }),
-			triggerProps: {
-				"aria-label": menuTriggerLabel,
-				id: `select-header-menu-trigger-${uniqueId}`
-			},
-			side: "right",
-			align: "start",
-			zIndex: require_lib_zindex.Z_INDICES.layeredDropdown,
-			contentProps: {
-				style: { pointerEvents: "auto" },
-				onFocusOutside: (event) => event.preventDefault()
-			},
-			children: menuItems
-		})]
-	});
-};
-const Select = (0, react.forwardRef)(function Select({ portal = false, size = "md", ...props }, forwardedRef) {
-	const { "aria-label": ariaLabel, hasError, hasWarning, focused, active, hovered, disabled, placeholder, maxHeight, children, triggerProps, contentProps, id, className, onChange, onValueChange, value, width, header, footer, minWidth, valueContainerWidth, zIndex } = props;
-	const field = require_useFormField.useFormField({
-		inputId: props.id,
-		disabled,
-		hasWarning,
-		hasError
-	});
-	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectContent, {
-		position: "popper",
-		side: "bottom",
-		sideOffset: 8,
-		$zIndex: zIndex,
-		...contentProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectMenu, {
-			maxHeight,
-			size,
-			children: [
-				header,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Viewport, { children }),
-				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectFooter, { children: footer }) })
-			]
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Root, {
-		...props,
-		onValueChange: (value) => {
-			onChange?.({ target: { value } });
-			onValueChange?.(value);
-		},
-		value: value === null ? "" : value,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Trigger, {
-			ref: forwardedRef,
-			asChild: true,
-			id,
-			className,
-			disabled: field.disabled,
-			"aria-describedby": field.helperTextId,
-			"aria-errormessage": field.hasError ? field.helperTextId : void 0,
-			"aria-invalid": field.hasError,
-			"aria-label": ariaLabel,
-			...triggerProps,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectButton, {
-				hasWarning: field.hasWarning,
-				hasError: field.hasError,
-				hovered,
-				focused,
-				active,
-				disabled: field.disabled,
-				placeholder,
-				isSelectingPlaceholder: props.value === "" || props.value == null,
-				$minWidth: minWidth,
-				$size: size,
-				$width: width,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectValueContainer, {
-					width: valueContainerWidth,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Value, { placeholder })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconContainer, {
-					disabled,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CaretDownIcon, {})
-				})]
-			})
-		}), portal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, { children: content }) : content]
-	});
-});
-const Option = (0, react.forwardRef)(function Option({ children, subtitle, ...props }, forwardedRef) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Item, {
-		...props,
-		ref: forwardedRef,
-		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectItem, {
-			...props,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemText, { children }), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionSubtitle, { children: subtitle })]
-		})
-	});
-});
-//#endregion
-Object.defineProperty(exports, "Option", {
-	enumerable: true,
-	get: function() {
-		return Option;
-	}
-});
-Object.defineProperty(exports, "Select", {
-	enumerable: true,
-	get: function() {
-		return Select;
-	}
-});
-Object.defineProperty(exports, "SelectHeader", {
-	enumerable: true,
-	get: function() {
-		return SelectHeader;
-	}
-});
-
-//# sourceMappingURL=Select-C65bfYeT.cjs.map

package/dist/Select-C65bfYeT.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select-C65bfYeT.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.d.cts

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

package/dist/Slider.d.cts

@@ -1,51 +0,0 @@
-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/SliderRHF.d.cts

@@ -1,18 +0,0 @@
-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/Spacer-GYHbk-dS.cjs

@@ -1,20 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-require("./variables/spacing.cjs");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-//#endregion
-//#region components/Spacer/index.ts
-var Spacer_default = styled_components.default.div.attrs(() => ({ "aria-hidden": true }))`
-  height: ${({ height = 5 }) => height * 8}px;
-  width: ${({ width = 0 }) => width * 8}px;
-  flex: none;
-`;
-//#endregion
-Object.defineProperty(exports, "Spacer_default", {
-	enumerable: true,
-	get: function() {
-		return Spacer_default;
-	}
-});
-
-//# sourceMappingURL=Spacer-GYHbk-dS.cjs.map

package/dist/Spacer-GYHbk-dS.cjs.map

@@ -1 +0,0 @@
-{"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"}