@persona/design-system 0.1.5-pre.4

package/dist/Select-CVB-Q1g1.cjs

@@ -0,0 +1,266 @@
+const require_chunk = require("./chunk-CoPdw6nB.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_Stack = require("./Stack-BHb3ZB2A.cjs");
+require("./components/Stack/index.cjs");
+const require_Text = require("./Text-DVz8erdF.cjs");
+const require_lib_zindex = require("./lib/zindex.cjs");
+const require_IconButton = require("./IconButton-B1ZL8BqW.cjs");
+require("./components/Button/index.cjs");
+const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+const require_Menu = require("./Menu-BpkjNO81.cjs");
+const require_DropdownMenu = require("./DropdownMenu-D2fzpkX2.cjs");
+require("./components/DropdownMenu/index.cjs");
+require("./components/Menu/index.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+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-CVB-Q1g1.cjs.map

package/dist/Select-CVB-Q1g1.cjs.map

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

package/dist/Select-Cl3AOq0-.mjs

@@ -0,0 +1,246 @@
+import { isNotDisabled } from "./lib/pseudoClass.mjs";
+import inputMixin from "./mixins/input.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { t as HStack } from "./Stack-hwgS2FU1.mjs";
+import "./components/Stack/index.mjs";
+import { i as Paragraph } from "./Text-DOTYjIt0.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { t as IconButton } from "./IconButton-C28qxOdi.mjs";
+import "./components/Button/index.mjs";
+import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { c as MenuList, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-DNRHo2i_.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-BTk--LWo.mjs";
+import "./components/DropdownMenu/index.mjs";
+import "./components/Menu/index.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { CaretDownIcon, MoreIcon } from "@persona/icons";
+import { useId } from "react-aria";
+import * as SelectPrimitive from "@radix-ui/react-select";
+//#region components/Select/Select.tsx
+const SelectButton = styled("button")`
+  ${inputMixin};
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  outline: none;
+  appearance: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-right: ${Spacing[6]};
+  width: ${({ $width }) => $width ?? "100%"};
+  min-width: ${({ $minWidth }) => $minWidth != null ? `${$minWidth}px` : "auto"};
+  pointer-events: auto;
+
+  &${isNotDisabled} {
+    cursor: pointer;
+  }
+
+  ${({ theme, isSelectingPlaceholder }) => isSelectingPlaceholder && css`
+      color: ${theme.color.text.secondary};
+    `}
+`;
+const SelectValueContainer = styled.span`
+  text-overflow: ellipsis;
+  min-width: 0px;
+  overflow: hidden;
+  text-align: start;
+
+  ${({ width }) => width && css`
+      width: ${width};
+    `}
+`;
+const OptionSubtitle = styled.div`
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};
+  margin-top: ${Spacing[1]};
+`;
+const OptionsMenu = styled(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 css`
+          ${MenuList} {
+            padding: ${Spacing[2]};
+          }
+
+          ${OptionItem} {
+            ${paragraphMixins.md};
+            padding: ${Spacing[2]};
+          }
+
+          ${MenuHeading} {
+            padding: ${Spacing[2]};
+          }
+        `;
+		case "sm": return css`
+          ${MenuList} {
+            padding: ${Spacing[1]};
+          }
+
+          ${OptionItem} {
+            ${paragraphMixins.sm};
+            padding: ${Spacing[1]};
+          }
+
+          ${MenuHeading} {
+            padding: ${Spacing[1]};
+          }
+        `;
+	}
+}}
+`;
+const SelectContent = styled(SelectPrimitive.Content)`
+  z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.dropdown};
+`;
+const SelectHeaderContainer = styled(HStack)`
+  display: flex;
+  justify-content: space-between;
+  padding: ${Spacing[1]} ${Spacing[1]} 0 ${Spacing[1]};
+  margin-bottom: ${Spacing[1]};
+`;
+const SelectFooter = styled.div`
+  padding: ${Spacing[1]} 0;
+  margin-top: ${Spacing[1]};
+  border-top: 1px solid ${Color.BorderDivider};
+`;
+const SelectMenu = forwardRef(function SelectMenu(props, forwardedRef) {
+	return /* @__PURE__ */ jsx(OptionsMenu, {
+		listRef: forwardedRef,
+		...props
+	});
+});
+const OptionItem = styled(MenuItem)`
+  ${paragraphMixins.md};
+  padding: ${Spacing[4]};
+`;
+const SelectItem = forwardRef(function SelectItem(props, forwardedRef) {
+	return /* @__PURE__ */ jsx(OptionItem, {
+		ref: forwardedRef,
+		...props
+	});
+});
+const StyledIconContainer = styled(SelectPrimitive.Icon)`
+  position: absolute;
+  right: ${Spacing[2]};
+  display: flex;
+  justify-content: center;
+
+  ${({ disabled }) => css`
+    color: ${disabled ? Color.BorderIconDisabled : Color.BorderIconPrimary};
+  `}
+`;
+const SelectHeader = ({ title, menuItems, menuTriggerLabel }) => {
+	const uniqueId = useId();
+	return /* @__PURE__ */ jsxs(SelectHeaderContainer, {
+		align: "center",
+		children: [title && /* @__PURE__ */ jsx(Paragraph, {
+			color: "primary",
+			weight: "bold",
+			size: "md",
+			children: title
+		}), menuItems && /* @__PURE__ */ jsx(DropdownMenu_default, {
+			portal: true,
+			trigger: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(MoreIcon, {}) }),
+			triggerProps: {
+				"aria-label": menuTriggerLabel,
+				id: `select-header-menu-trigger-${uniqueId}`
+			},
+			side: "right",
+			align: "start",
+			zIndex: Z_INDICES.layeredDropdown,
+			contentProps: {
+				style: { pointerEvents: "auto" },
+				onFocusOutside: (event) => event.preventDefault()
+			},
+			children: menuItems
+		})]
+	});
+};
+const Select = 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 = useFormField({
+		inputId: props.id,
+		disabled,
+		hasWarning,
+		hasError
+	});
+	const content = /* @__PURE__ */ jsx(SelectContent, {
+		position: "popper",
+		side: "bottom",
+		sideOffset: 8,
+		$zIndex: zIndex,
+		...contentProps,
+		children: /* @__PURE__ */ jsxs(SelectMenu, {
+			maxHeight,
+			size,
+			children: [
+				header,
+				/* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children }),
+				footer && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(SelectFooter, { children: footer }) })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
+		...props,
+		onValueChange: (value) => {
+			onChange?.({ target: { value } });
+			onValueChange?.(value);
+		},
+		value: value === null ? "" : value,
+		children: [/* @__PURE__ */ jsx(SelectPrimitive.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__ */ 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__ */ jsx(SelectValueContainer, {
+					width: valueContainerWidth,
+					children: /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder })
+				}), /* @__PURE__ */ jsx(StyledIconContainer, {
+					disabled,
+					children: /* @__PURE__ */ jsx(CaretDownIcon, {})
+				})]
+			})
+		}), portal ? /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: content }) : content]
+	});
+});
+const Option = forwardRef(function Option({ children, subtitle, ...props }, forwardedRef) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Item, {
+		...props,
+		ref: forwardedRef,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(SelectItem, {
+			...props,
+			children: [/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }), subtitle && /* @__PURE__ */ jsx(OptionSubtitle, { children: subtitle })]
+		})
+	});
+});
+//#endregion
+export { Select as n, SelectHeader as r, Option as t };
+
+//# sourceMappingURL=Select-Cl3AOq0-.mjs.map

package/dist/Select-Cl3AOq0-.mjs.map

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

package/dist/Select-DRnRqMAL.d.mts

@@ -0,0 +1,77 @@
+import { n as InputSizes, t as InputMixinProps } from "./input-BCmP106-.mjs";
+import { t as Property } from "./index-DQvVmqvS.mjs";
+import { l as MenuItemProps } from "./Menu-DIFkRQ6x.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import { ReactNode } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#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-DRnRqMAL.d.mts.map

package/dist/Select.d.cts

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

package/dist/Select.d.mts

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