@evolve.ui/core-components 1.0.0

package/SearchInput-IfEWePDQ.d.mts

@@ -0,0 +1,126 @@
+import { i as IconWeight } from "./IconBase-C_Lx9rDx.mjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/SearchInput/SearchInput.d.ts
+type Props = {
+  /**
+   * Changes the aria label for the `<button>` element
+   *
+   * @default 'Search button'
+   */
+  'button-aria-label'?: string;
+  className?: string;
+  /**
+   * Allows you to add a data-testid to the component
+   */
+  ['data-testid']?: string;
+  /**
+   * If true, the search input will be disabled
+   */
+  disabled?: boolean;
+  /**
+   * Input emphasis. Currently supports subtle and bold. Defaults to subtle.
+   */
+  emphasis?: 'subtle' | 'bold';
+  /**
+   * Custom content rendered inside the input on the right, before the search button
+   * (e.g. an extra action icon).
+   */
+  endAdornment?: ReactNode;
+  /**
+   * Style variant for the icon. Can be either 'regular' (default), 'bold', 'fill', or 'duotone'.
+   */
+  iconStyle?: IconWeight;
+  /**
+   * Allows you to edit the input id
+   *
+   * @default 'search-input'
+   */
+  id?: string;
+  /**
+   * Set an initial value to pass through
+   *
+   * @default ''
+   */
+  initialValue?: string;
+  /**
+   * Changes the aria label for the `<input>` element
+   *
+   * @default 'Search input'
+   */
+  'input-aria-label'?: string;
+  /**
+   * Ref for the input element
+   */
+  inputRef?: RefObject<HTMLInputElement>;
+  /**
+   * Maximum number of characters allowed in the input.
+   * Uses the native HTML maxLength attribute.
+   */
+  maxLength?: number;
+  /**
+   * Callback that triggers when the input loses focus
+   */
+  onBlur?: () => void;
+  /**
+   * Callback that triggers when you press the clear button
+   */
+  onClear?: () => void;
+  /**
+   * Callback that triggers when the input gains focus
+   */
+  onFocus?: () => void;
+  /**
+   * Callback that triggers when you submit (press enter or button)
+   */
+  onSubmit?: (searchString: string) => void;
+  /**
+   * Callback that triggers when you type
+   */
+  onTextChange?: (searchString: string) => void;
+  /**
+   * Allows you to edit the placeholder text
+   *
+   * @default 'Search'
+   */
+  placeholder?: string;
+  /**
+   * Show in the small size vs the medium one
+   */
+  small?: boolean;
+  /**
+   * Style variant for the input. Can be either 'neutral' (default) or 'inverse' for dark backgrounds.
+   */
+  style?: 'neutral' | 'inverse';
+  /**
+   * Controlled value for the input
+   * If provided, initialValue will be ignored
+   */
+  value?: string;
+};
+declare const SearchInput: ({
+  "button-aria-label": buttonAriaLabel,
+  className,
+  "data-testid": testId,
+  disabled,
+  emphasis,
+  endAdornment,
+  iconStyle,
+  id,
+  initialValue,
+  "input-aria-label": inputAriaLabel,
+  inputRef,
+  maxLength,
+  onBlur,
+  onClear: onClearProp,
+  onFocus,
+  onSubmit: onSubmitProp,
+  onTextChange,
+  placeholder,
+  small,
+  style,
+  value
+}: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { SearchInput as t };
+//# sourceMappingURL=SearchInput-IfEWePDQ.d.mts.map

package/SearchInput-IfEWePDQ.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput-IfEWePDQ.d.mts","names":[],"sources":["../src/SearchInput/SearchInput.tsx"],"mappings":";;;;KAQK,KAAA;;AAH0C;;;;EAS3C,mBAAA;EACA,SAAA;EA2CW;;;EAAA,CAvCV,aAAA;EAJD;;;EAQA,QAAA;EASA;;;EALA,QAAA;EAeA;;;;EAVA,YAAA,GAAe,SAAA;EA0BM;;;EAtBrB,SAAA,GAAY,UAAA;EAuCZ;;;;;EAjCA,EAAA;EAmDA;;;;AAUK;EAvDL,YAAA;EA2LH;;;;;EArLG,kBAAA;EAoDwB;;;EAhDxB,QAAA,GAAW,SAAA,CAAU,gBAAA;EAgDG;;;;EA3CxB,SAAA;EA2CwB;;;EAvCxB,MAAA;EAuCwB;;;EAnCxB,OAAA;EAyDD;;;EArDC,OAAA;EA+BwB;;;EA3BxB,QAAA,IAAY,YAAA;EA2BY;;;EAvBxB,YAAA,IAAgB,YAAA;EAuBQ;;;;;EAjBxB,WAAA;EAiBwB;;;EAbxB,KAAA;EAawB;;;EATxB,KAAA;EASwB;;;;EAHxB,KAAA;AAAA;AAAA,cAGS,WAAA;EAAA,qBAAe,eAAA;EAAA,SAAA;EAAA,eAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,EAAA;EAAA,YAAA;EAAA,oBAAA,cAAA;EAAA,QAAA;EAAA,SAAA;EAAA,MAAA;EAAA,OAAA,EAAA,WAAA;EAAA,OAAA;EAAA,QAAA,EAAA,YAAA;EAAA,YAAA;EAAA,WAAA;EAAA,KAAA;EAAA,KAAA;EAAA;AAAA,GAsBzB,KAAA,iCAAK,GAAA,CAAA,OAAA"}

package/SegmentedControl-B5FZ0uX8.cjs

@@ -0,0 +1,107 @@
+const require_Typography_Text = require("./Typography/Text.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/SegmentedControl/SegmentedControl.tsx
+const SegmentedControl = ({ children, className, disabled = false, iconLeft: IconLeft, iconRight: IconRight, id, onClick, onKeyDown, selected = false, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("rounded-md px-4 py-2", "transition-colors duration-200 ease-in-out", "cursor-pointer select-none", "flex items-center justify-center", "h-[26px]", "hui-focus-visible-outline", {
+			"bg-background-primary text-text-inverse shadow-02 drop-shadow-xl": selected && !disabled,
+			"bg-background-subdued hover:bg-background-hover active:bg-background-pressed": !selected && !disabled,
+			"pointer-events-none bg-background-subdued text-text-disabled": disabled,
+			"px-2": !children
+		}, className),
+		"data-hui-id": "SegmentedControl",
+		"data-testid": id,
+		id,
+		...props,
+		role: "radio",
+		tabIndex: disabled ? -1 : 0,
+		...!disabled && {
+			onClick: (event) => {
+				onClick(event);
+			},
+			onKeyDown: (event) => {
+				onKeyDown(event);
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					onClick(event);
+				}
+			}
+		},
+		"aria-checked": selected,
+		"aria-disabled": disabled,
+		"aria-label": typeof children === "string" ? children : id,
+		children: [
+			IconLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconLeft, {
+				"aria-hidden": "true",
+				className: (0, _evolve_ui_theme_system.cn)({ "mr-1": Boolean(children) }),
+				color: disabled ? "disabled" : "primary",
+				size: "xs",
+				style: "bold"
+			}),
+			children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.LabelMiniStrong, {
+				"aria-hidden": "true",
+				color: disabled ? "disabled" : "primary",
+				children
+			}),
+			IconRight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconRight, {
+				"aria-hidden": "true",
+				className: (0, _evolve_ui_theme_system.cn)({ "ml-1": Boolean(children) }),
+				color: disabled ? "disabled" : "primary",
+				size: "xs",
+				style: "bold"
+			})
+		]
+	});
+};
+SegmentedControl.displayName = "SegmentedControl";
+//#endregion
+//#region src/SegmentedControl/SegmentedControlGroup.tsx
+const SegmentedControlGroup = ({ className, controls, name = "SegmentedControl", onChange, selectedId }) => {
+	const groupClasses = (0, _evolve_ui_theme_system.cn)("inline-flex h-[34px] gap-1 overflow-hidden rounded-md border border-border-secondary bg-background-subdued p-1", className);
+	const handleKeyDown = (event, currentIndex) => {
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+			event.preventDefault();
+			const direction = event.key === "ArrowLeft" ? -1 : 1;
+			let newIndex = currentIndex;
+			do
+				newIndex = (newIndex + direction + controls.length) % controls.length;
+			while (controls[newIndex].disabled && newIndex !== currentIndex);
+			const newSelectedControl = document.getElementById(`${name}-${controls[newIndex].id}`);
+			if (newSelectedControl) newSelectedControl.focus();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": "Segmented Control Group",
+		className: groupClasses,
+		"data-hui-id": "SegmentedControlGroup",
+		role: "group",
+		children: controls.map((control, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControl, {
+			"aria-checked": control.id === selectedId,
+			disabled: control.disabled,
+			iconLeft: control.iconLeft,
+			iconRight: control.iconRight,
+			id: `${name}-${control.id}`,
+			onClick: () => onChange(control.id),
+			onKeyDown: (event) => handleKeyDown(event, index),
+			selected: control.id === selectedId,
+			children: control.label
+		}, control.id))
+	});
+};
+SegmentedControlGroup.displayName = "SegmentedControlGroup";
+//#endregion
+Object.defineProperty(exports, "SegmentedControl", {
+	enumerable: true,
+	get: function() {
+		return SegmentedControl;
+	}
+});
+Object.defineProperty(exports, "SegmentedControlGroup", {
+	enumerable: true,
+	get: function() {
+		return SegmentedControlGroup;
+	}
+});
+
+//# sourceMappingURL=SegmentedControl-B5FZ0uX8.cjs.map

package/SegmentedControl-B5FZ0uX8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl-B5FZ0uX8.cjs","names":["LabelMiniStrong"],"sources":["../src/SegmentedControl/SegmentedControl.tsx","../src/SegmentedControl/SegmentedControlGroup.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode } from 'react';\n\nimport { IconComponent } from '../Icons/IconBase';\nimport { LabelMiniStrong } from '../Typography/Text/Text';\n\nexport type SegmentedControlProps<ControlItemOptionId extends string> = {\n    /** The content to be displayed inside the control */\n    children?: ReactNode;\n    /** Additional CSS class name for the control */\n    className?: string;\n    /** Whether the control is disabled */\n    disabled?: boolean;\n    /** Icon component to be displayed on the left side of the control */\n    iconLeft?: IconComponent;\n    /** Icon component to be displayed on the right side of the control */\n    iconRight?: IconComponent;\n    /** Unique identifier for the control */\n    id: ControlItemOptionId;\n    /** Callback function triggered when the control is clicked */\n    onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    /** Callback function triggered when a key is pressed while the control is focused */\n    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n    /** Whether the control is currently selected */\n    selected?: boolean;\n};\n\nexport const SegmentedControl = <ControlItemOptionId extends string>({\n    children,\n    className,\n    disabled = false,\n    iconLeft: IconLeft,\n    iconRight: IconRight,\n    id,\n    onClick,\n    onKeyDown,\n    selected = false,\n    ...props\n}: SegmentedControlProps<ControlItemOptionId>) => {\n    const baseClasses = cn(\n        'rounded-md px-4 py-2',\n        'transition-colors duration-200 ease-in-out',\n        'cursor-pointer select-none',\n        'flex items-center justify-center',\n        'h-[26px]',\n        'hui-focus-visible-outline',\n        {\n            'bg-background-primary text-text-inverse shadow-02 drop-shadow-xl': selected && !disabled,\n            'bg-background-subdued hover:bg-background-hover active:bg-background-pressed': !selected && !disabled,\n            'pointer-events-none bg-background-subdued text-text-disabled': disabled,\n            'px-2': !children,\n        },\n        className\n    );\n\n    return (\n        <div\n            className={baseClasses}\n            data-hui-id=\"SegmentedControl\"\n            data-testid={id}\n            id={id}\n            {...props}\n            role=\"radio\"\n            tabIndex={disabled ? -1 : 0}\n            {...(!disabled && {\n                onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n                    onClick(event);\n                },\n                onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n                    onKeyDown(event);\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        event.preventDefault();\n                        onClick(event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);\n                    }\n                },\n            })}\n            aria-checked={selected}\n            aria-disabled={disabled}\n            aria-label={typeof children === 'string' ? children : id}\n        >\n            {IconLeft && (\n                <IconLeft\n                    aria-hidden=\"true\"\n                    className={cn({ 'mr-1': Boolean(children) })}\n                    color={disabled ? 'disabled' : 'primary'}\n                    size=\"xs\"\n                    style=\"bold\"\n                />\n            )}\n            {children && (\n                <LabelMiniStrong\n                    aria-hidden=\"true\"\n                    color={disabled ? 'disabled' : 'primary'}\n                >\n                    {children}\n                </LabelMiniStrong>\n            )}\n            {IconRight && (\n                <IconRight\n                    aria-hidden=\"true\"\n                    className={cn({ 'ml-1': Boolean(children) })}\n                    color={disabled ? 'disabled' : 'primary'}\n                    size=\"xs\"\n                    style=\"bold\"\n                />\n            )}\n        </div>\n    );\n};\n\nSegmentedControl.displayName = 'SegmentedControl';\n","import { cn } from '@evolve.ui/theme-system';\n\nimport { IconComponent } from '../Icons/IconBase';\nimport { SegmentedControl } from './SegmentedControl';\n\n/**\n * Represents an individual control item within the SegmentedControlGroup.\n */\nexport type ControlItem<ControlItemOptionId extends string> = {\n    /** Whether the control is disabled */\n    disabled?: boolean;\n    /** Icon component to be displayed on the left side of the control */\n    iconLeft?: IconComponent;\n    /** Icon component to be displayed on the right side of the control */\n    iconRight?: IconComponent;\n    /** Unique identifier for the control */\n    id: ControlItemOptionId;\n    /** Text label for the control */\n    label?: string;\n};\n\n/**\n * Props for the SegmentedControlGroup component.\n */\nexport type SegmentedControlGroupProps<ControlItemOptionId extends string> = {\n    /** Additional CSS class name for the group */\n    className?: string;\n    /** Array of ControlItem objects representing the individual controls */\n    controls: ControlItem<ControlItemOptionId>[];\n    /** Name of the group, defaults to 'SegmentedControl'\n     * use when multiple groups are present on the page that may share control ids\n     */\n    name?: string;\n    /** Callback function triggered when a control is selected */\n    onChange: (id: ControlItemOptionId) => void;\n    /** ID of the currently selected control */\n    selectedId: ControlItemOptionId;\n};\n\nexport const SegmentedControlGroup = <ControlItemOptionId extends string>({\n    className,\n    controls,\n    name = 'SegmentedControl',\n    onChange,\n    selectedId,\n}: SegmentedControlGroupProps<ControlItemOptionId>) => {\n    const groupClasses = cn(\n        'inline-flex h-[34px] gap-1 overflow-hidden rounded-md border border-border-secondary bg-background-subdued p-1',\n        className\n    );\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, currentIndex: number) => {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n            event.preventDefault();\n            const direction = event.key === 'ArrowLeft' ? -1 : 1;\n            let newIndex = currentIndex;\n            do {\n                newIndex = (newIndex + direction + controls.length) % controls.length;\n            } while (controls[newIndex].disabled && newIndex !== currentIndex);\n            // Find the DOM element of the new selected control\n            const newSelectedControl = document.getElementById(`${name}-${controls[newIndex].id}`);\n            if (newSelectedControl) {\n                // Set focus to the new selected control\n                newSelectedControl.focus();\n            }\n        }\n    };\n\n    return (\n        <div\n            aria-label=\"Segmented Control Group\"\n            className={groupClasses}\n            data-hui-id=\"SegmentedControlGroup\"\n            role=\"group\"\n        >\n            {controls.map((control, index) => (\n                <SegmentedControl\n                    aria-checked={control.id === selectedId}\n                    disabled={control.disabled}\n                    iconLeft={control.iconLeft}\n                    iconRight={control.iconRight}\n                    id={`${name}-${control.id}`}\n                    key={control.id}\n                    onClick={() => onChange(control.id)}\n                    onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => handleKeyDown(event, index)}\n                    selected={control.id === selectedId}\n                >\n                    {control.label}\n                </SegmentedControl>\n            ))}\n        </div>\n    );\n};\n\nSegmentedControlGroup.displayName = 'SegmentedControlGroup';\n"],"mappings":";;;;AA2BA,MAAa,oBAAwD,EACjE,UACA,WACA,WAAW,OACX,UAAU,UACV,WAAW,WACX,IACA,SACA,WACA,WAAW,OACX,GAAG,YAC2C;CAiB9C,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACI,YAAA,GAAA,wBAAA,GAAA,CAjBJ,wBACA,8CACA,8BACA,oCACA,YACA,6BACA;GACI,oEAAoE,YAAY,CAAC;GACjF,gFAAgF,CAAC,YAAY,CAAC;GAC9F,gEAAgE;GAChE,QAAQ,CAAC;EACb,GACA,SAKyB;EACrB,eAAY;EACZ,eAAa;EACT;EACJ,GAAI;EACJ,MAAK;EACL,UAAU,WAAW,KAAK;EAC1B,GAAK,CAAC,YAAY;GACd,UAAU,UAAwD;IAC9D,QAAQ,KAAK;GACjB;GACA,YAAY,UAA+C;IACvD,UAAU,KAAK;IACf,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC5C,MAAM,eAAe;KACrB,QAAQ,KAAgE;IAC5E;GACJ;EACJ;EACA,gBAAc;EACd,iBAAe;EACf,cAAY,OAAO,aAAa,WAAW,WAAW;YAtB1D;GAwBK,YACG,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACI,eAAY;IACZ,YAAA,GAAA,wBAAA,GAAA,CAAc,EAAE,QAAQ,QAAQ,QAAQ,EAAE,CAAC;IAC3C,OAAO,WAAW,aAAa;IAC/B,MAAK;IACL,OAAM;GACT,CAAA;GAEJ,YACG,iBAAA,GAAA,kBAAA,IAAA,CAACA,wBAAAA,iBAAD;IACI,eAAY;IACZ,OAAO,WAAW,aAAa;IAE9B;GACY,CAAA;GAEpB,aACG,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;IACI,eAAY;IACZ,YAAA,GAAA,wBAAA,GAAA,CAAc,EAAE,QAAQ,QAAQ,QAAQ,EAAE,CAAC;IAC3C,OAAO,WAAW,aAAa;IAC/B,MAAK;IACL,OAAM;GACT,CAAA;EAEJ;;AAEb;AAEA,iBAAiB,cAAc;;;ACvE/B,MAAa,yBAA6D,EACtE,WACA,UACA,OAAO,oBACP,UACA,iBACmD;CACnD,MAAM,gBAAA,GAAA,wBAAA,GAAA,CACF,kHACA,SACJ;CACA,MAAM,iBAAiB,OAA4C,iBAAyB;EACxF,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,cAAc;GACzD,MAAM,eAAe;GACrB,MAAM,YAAY,MAAM,QAAQ,cAAc,KAAK;GACnD,IAAI,WAAW;GACf;IACI,YAAY,WAAW,YAAY,SAAS,UAAU,SAAS;UAC1D,SAAS,SAAS,CAAC,YAAY,aAAa;GAErD,MAAM,qBAAqB,SAAS,eAAe,GAAG,KAAK,GAAG,SAAS,SAAS,CAAC,IAAI;GACrF,IAAI,oBAEA,mBAAmB,MAAM;EAEjC;CACJ;CAEA,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACI,cAAW;EACX,WAAW;EACX,eAAY;EACZ,MAAK;YAEJ,SAAS,KAAK,SAAS,UACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GACI,gBAAc,QAAQ,OAAO;GAC7B,UAAU,QAAQ;GAClB,UAAU,QAAQ;GAClB,WAAW,QAAQ;GACnB,IAAI,GAAG,KAAK,GAAG,QAAQ;GAEvB,eAAe,SAAS,QAAQ,EAAE;GAClC,YAAY,UAA+C,cAAc,OAAO,KAAK;GACrF,UAAU,QAAQ,OAAO;aAExB,QAAQ;EACK,GANT,QAAQ,EAMC,CACrB;CACA,CAAA;AAEb;AAEA,sBAAsB,cAAc"}

package/SegmentedControl-DHf4SQQL.mjs

@@ -0,0 +1,96 @@
+import { LabelMiniStrong } from "./Typography/Text.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/SegmentedControl/SegmentedControl.tsx
+const SegmentedControl = ({ children, className, disabled = false, iconLeft: IconLeft, iconRight: IconRight, id, onClick, onKeyDown, selected = false, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-md px-4 py-2", "transition-colors duration-200 ease-in-out", "cursor-pointer select-none", "flex items-center justify-center", "h-[26px]", "hui-focus-visible-outline", {
+			"bg-background-primary text-text-inverse shadow-02 drop-shadow-xl": selected && !disabled,
+			"bg-background-subdued hover:bg-background-hover active:bg-background-pressed": !selected && !disabled,
+			"pointer-events-none bg-background-subdued text-text-disabled": disabled,
+			"px-2": !children
+		}, className),
+		"data-hui-id": "SegmentedControl",
+		"data-testid": id,
+		id,
+		...props,
+		role: "radio",
+		tabIndex: disabled ? -1 : 0,
+		...!disabled && {
+			onClick: (event) => {
+				onClick(event);
+			},
+			onKeyDown: (event) => {
+				onKeyDown(event);
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					onClick(event);
+				}
+			}
+		},
+		"aria-checked": selected,
+		"aria-disabled": disabled,
+		"aria-label": typeof children === "string" ? children : id,
+		children: [
+			IconLeft && /* @__PURE__ */ jsx(IconLeft, {
+				"aria-hidden": "true",
+				className: cn({ "mr-1": Boolean(children) }),
+				color: disabled ? "disabled" : "primary",
+				size: "xs",
+				style: "bold"
+			}),
+			children && /* @__PURE__ */ jsx(LabelMiniStrong, {
+				"aria-hidden": "true",
+				color: disabled ? "disabled" : "primary",
+				children
+			}),
+			IconRight && /* @__PURE__ */ jsx(IconRight, {
+				"aria-hidden": "true",
+				className: cn({ "ml-1": Boolean(children) }),
+				color: disabled ? "disabled" : "primary",
+				size: "xs",
+				style: "bold"
+			})
+		]
+	});
+};
+SegmentedControl.displayName = "SegmentedControl";
+//#endregion
+//#region src/SegmentedControl/SegmentedControlGroup.tsx
+const SegmentedControlGroup = ({ className, controls, name = "SegmentedControl", onChange, selectedId }) => {
+	const groupClasses = cn("inline-flex h-[34px] gap-1 overflow-hidden rounded-md border border-border-secondary bg-background-subdued p-1", className);
+	const handleKeyDown = (event, currentIndex) => {
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+			event.preventDefault();
+			const direction = event.key === "ArrowLeft" ? -1 : 1;
+			let newIndex = currentIndex;
+			do
+				newIndex = (newIndex + direction + controls.length) % controls.length;
+			while (controls[newIndex].disabled && newIndex !== currentIndex);
+			const newSelectedControl = document.getElementById(`${name}-${controls[newIndex].id}`);
+			if (newSelectedControl) newSelectedControl.focus();
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "Segmented Control Group",
+		className: groupClasses,
+		"data-hui-id": "SegmentedControlGroup",
+		role: "group",
+		children: controls.map((control, index) => /* @__PURE__ */ jsx(SegmentedControl, {
+			"aria-checked": control.id === selectedId,
+			disabled: control.disabled,
+			iconLeft: control.iconLeft,
+			iconRight: control.iconRight,
+			id: `${name}-${control.id}`,
+			onClick: () => onChange(control.id),
+			onKeyDown: (event) => handleKeyDown(event, index),
+			selected: control.id === selectedId,
+			children: control.label
+		}, control.id))
+	});
+};
+SegmentedControlGroup.displayName = "SegmentedControlGroup";
+//#endregion
+export { SegmentedControl as n, SegmentedControlGroup as t };
+
+//# sourceMappingURL=SegmentedControl-DHf4SQQL.mjs.map

package/SegmentedControl-DHf4SQQL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl-DHf4SQQL.mjs","names":[],"sources":["../src/SegmentedControl/SegmentedControl.tsx","../src/SegmentedControl/SegmentedControlGroup.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode } from 'react';\n\nimport { IconComponent } from '../Icons/IconBase';\nimport { LabelMiniStrong } from '../Typography/Text/Text';\n\nexport type SegmentedControlProps<ControlItemOptionId extends string> = {\n    /** The content to be displayed inside the control */\n    children?: ReactNode;\n    /** Additional CSS class name for the control */\n    className?: string;\n    /** Whether the control is disabled */\n    disabled?: boolean;\n    /** Icon component to be displayed on the left side of the control */\n    iconLeft?: IconComponent;\n    /** Icon component to be displayed on the right side of the control */\n    iconRight?: IconComponent;\n    /** Unique identifier for the control */\n    id: ControlItemOptionId;\n    /** Callback function triggered when the control is clicked */\n    onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    /** Callback function triggered when a key is pressed while the control is focused */\n    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n    /** Whether the control is currently selected */\n    selected?: boolean;\n};\n\nexport const SegmentedControl = <ControlItemOptionId extends string>({\n    children,\n    className,\n    disabled = false,\n    iconLeft: IconLeft,\n    iconRight: IconRight,\n    id,\n    onClick,\n    onKeyDown,\n    selected = false,\n    ...props\n}: SegmentedControlProps<ControlItemOptionId>) => {\n    const baseClasses = cn(\n        'rounded-md px-4 py-2',\n        'transition-colors duration-200 ease-in-out',\n        'cursor-pointer select-none',\n        'flex items-center justify-center',\n        'h-[26px]',\n        'hui-focus-visible-outline',\n        {\n            'bg-background-primary text-text-inverse shadow-02 drop-shadow-xl': selected && !disabled,\n            'bg-background-subdued hover:bg-background-hover active:bg-background-pressed': !selected && !disabled,\n            'pointer-events-none bg-background-subdued text-text-disabled': disabled,\n            'px-2': !children,\n        },\n        className\n    );\n\n    return (\n        <div\n            className={baseClasses}\n            data-hui-id=\"SegmentedControl\"\n            data-testid={id}\n            id={id}\n            {...props}\n            role=\"radio\"\n            tabIndex={disabled ? -1 : 0}\n            {...(!disabled && {\n                onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n                    onClick(event);\n                },\n                onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n                    onKeyDown(event);\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        event.preventDefault();\n                        onClick(event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);\n                    }\n                },\n            })}\n            aria-checked={selected}\n            aria-disabled={disabled}\n            aria-label={typeof children === 'string' ? children : id}\n        >\n            {IconLeft && (\n                <IconLeft\n                    aria-hidden=\"true\"\n                    className={cn({ 'mr-1': Boolean(children) })}\n                    color={disabled ? 'disabled' : 'primary'}\n                    size=\"xs\"\n                    style=\"bold\"\n                />\n            )}\n            {children && (\n                <LabelMiniStrong\n                    aria-hidden=\"true\"\n                    color={disabled ? 'disabled' : 'primary'}\n                >\n                    {children}\n                </LabelMiniStrong>\n            )}\n            {IconRight && (\n                <IconRight\n                    aria-hidden=\"true\"\n                    className={cn({ 'ml-1': Boolean(children) })}\n                    color={disabled ? 'disabled' : 'primary'}\n                    size=\"xs\"\n                    style=\"bold\"\n                />\n            )}\n        </div>\n    );\n};\n\nSegmentedControl.displayName = 'SegmentedControl';\n","import { cn } from '@evolve.ui/theme-system';\n\nimport { IconComponent } from '../Icons/IconBase';\nimport { SegmentedControl } from './SegmentedControl';\n\n/**\n * Represents an individual control item within the SegmentedControlGroup.\n */\nexport type ControlItem<ControlItemOptionId extends string> = {\n    /** Whether the control is disabled */\n    disabled?: boolean;\n    /** Icon component to be displayed on the left side of the control */\n    iconLeft?: IconComponent;\n    /** Icon component to be displayed on the right side of the control */\n    iconRight?: IconComponent;\n    /** Unique identifier for the control */\n    id: ControlItemOptionId;\n    /** Text label for the control */\n    label?: string;\n};\n\n/**\n * Props for the SegmentedControlGroup component.\n */\nexport type SegmentedControlGroupProps<ControlItemOptionId extends string> = {\n    /** Additional CSS class name for the group */\n    className?: string;\n    /** Array of ControlItem objects representing the individual controls */\n    controls: ControlItem<ControlItemOptionId>[];\n    /** Name of the group, defaults to 'SegmentedControl'\n     * use when multiple groups are present on the page that may share control ids\n     */\n    name?: string;\n    /** Callback function triggered when a control is selected */\n    onChange: (id: ControlItemOptionId) => void;\n    /** ID of the currently selected control */\n    selectedId: ControlItemOptionId;\n};\n\nexport const SegmentedControlGroup = <ControlItemOptionId extends string>({\n    className,\n    controls,\n    name = 'SegmentedControl',\n    onChange,\n    selectedId,\n}: SegmentedControlGroupProps<ControlItemOptionId>) => {\n    const groupClasses = cn(\n        'inline-flex h-[34px] gap-1 overflow-hidden rounded-md border border-border-secondary bg-background-subdued p-1',\n        className\n    );\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, currentIndex: number) => {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n            event.preventDefault();\n            const direction = event.key === 'ArrowLeft' ? -1 : 1;\n            let newIndex = currentIndex;\n            do {\n                newIndex = (newIndex + direction + controls.length) % controls.length;\n            } while (controls[newIndex].disabled && newIndex !== currentIndex);\n            // Find the DOM element of the new selected control\n            const newSelectedControl = document.getElementById(`${name}-${controls[newIndex].id}`);\n            if (newSelectedControl) {\n                // Set focus to the new selected control\n                newSelectedControl.focus();\n            }\n        }\n    };\n\n    return (\n        <div\n            aria-label=\"Segmented Control Group\"\n            className={groupClasses}\n            data-hui-id=\"SegmentedControlGroup\"\n            role=\"group\"\n        >\n            {controls.map((control, index) => (\n                <SegmentedControl\n                    aria-checked={control.id === selectedId}\n                    disabled={control.disabled}\n                    iconLeft={control.iconLeft}\n                    iconRight={control.iconRight}\n                    id={`${name}-${control.id}`}\n                    key={control.id}\n                    onClick={() => onChange(control.id)}\n                    onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => handleKeyDown(event, index)}\n                    selected={control.id === selectedId}\n                >\n                    {control.label}\n                </SegmentedControl>\n            ))}\n        </div>\n    );\n};\n\nSegmentedControlGroup.displayName = 'SegmentedControlGroup';\n"],"mappings":";;;;AA2BA,MAAa,oBAAwD,EACjE,UACA,WACA,WAAW,OACX,UAAU,UACV,WAAW,WACX,IACA,SACA,WACA,WAAW,OACX,GAAG,YAC2C;CAiB9C,OACI,qBAAC,OAAD;EACI,WAlBY,GAChB,wBACA,8CACA,8BACA,oCACA,YACA,6BACA;GACI,oEAAoE,YAAY,CAAC;GACjF,gFAAgF,CAAC,YAAY,CAAC;GAC9F,gEAAgE;GAChE,QAAQ,CAAC;EACb,GACA,SAKyB;EACrB,eAAY;EACZ,eAAa;EACT;EACJ,GAAI;EACJ,MAAK;EACL,UAAU,WAAW,KAAK;EAC1B,GAAK,CAAC,YAAY;GACd,UAAU,UAAwD;IAC9D,QAAQ,KAAK;GACjB;GACA,YAAY,UAA+C;IACvD,UAAU,KAAK;IACf,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC5C,MAAM,eAAe;KACrB,QAAQ,KAAgE;IAC5E;GACJ;EACJ;EACA,gBAAc;EACd,iBAAe;EACf,cAAY,OAAO,aAAa,WAAW,WAAW;YAtB1D;GAwBK,YACG,oBAAC,UAAD;IACI,eAAY;IACZ,WAAW,GAAG,EAAE,QAAQ,QAAQ,QAAQ,EAAE,CAAC;IAC3C,OAAO,WAAW,aAAa;IAC/B,MAAK;IACL,OAAM;GACT,CAAA;GAEJ,YACG,oBAAC,iBAAD;IACI,eAAY;IACZ,OAAO,WAAW,aAAa;IAE9B;GACY,CAAA;GAEpB,aACG,oBAAC,WAAD;IACI,eAAY;IACZ,WAAW,GAAG,EAAE,QAAQ,QAAQ,QAAQ,EAAE,CAAC;IAC3C,OAAO,WAAW,aAAa;IAC/B,MAAK;IACL,OAAM;GACT,CAAA;EAEJ;;AAEb;AAEA,iBAAiB,cAAc;;;ACvE/B,MAAa,yBAA6D,EACtE,WACA,UACA,OAAO,oBACP,UACA,iBACmD;CACnD,MAAM,eAAe,GACjB,kHACA,SACJ;CACA,MAAM,iBAAiB,OAA4C,iBAAyB;EACxF,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,cAAc;GACzD,MAAM,eAAe;GACrB,MAAM,YAAY,MAAM,QAAQ,cAAc,KAAK;GACnD,IAAI,WAAW;GACf;IACI,YAAY,WAAW,YAAY,SAAS,UAAU,SAAS;UAC1D,SAAS,SAAS,CAAC,YAAY,aAAa;GAErD,MAAM,qBAAqB,SAAS,eAAe,GAAG,KAAK,GAAG,SAAS,SAAS,CAAC,IAAI;GACrF,IAAI,oBAEA,mBAAmB,MAAM;EAEjC;CACJ;CAEA,OACI,oBAAC,OAAD;EACI,cAAW;EACX,WAAW;EACX,eAAY;EACZ,MAAK;YAEJ,SAAS,KAAK,SAAS,UACpB,oBAAC,kBAAD;GACI,gBAAc,QAAQ,OAAO;GAC7B,UAAU,QAAQ;GAClB,UAAU,QAAQ;GAClB,WAAW,QAAQ;GACnB,IAAI,GAAG,KAAK,GAAG,QAAQ;GAEvB,eAAe,SAAS,QAAQ,EAAE;GAClC,YAAY,UAA+C,cAAc,OAAO,KAAK;GACrF,UAAU,QAAQ,OAAO;aAExB,QAAQ;EACK,GANT,QAAQ,EAMC,CACrB;CACA,CAAA;AAEb;AAEA,sBAAsB,cAAc"}

package/Select-BXDjzyDs.cjs

@@ -0,0 +1,248 @@
+const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
+const require_Icons = require("./Icons.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_formLabel = require("./formLabel.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_select = require("react-select");
+react_select = require_rolldown_runtime.__toESM(react_select);
+//#region src/Select/selectComponents.tsx
+const InsideLabelControl = ({ children, ...props }) => {
+	const { hasError, isInsideLabel, labelText, small } = props.selectProps;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_select.components.Control, {
+		...props,
+		className: (0, _evolve_ui_theme_system.cn)("!m-0 !min-h-[42px] !flex-nowrap !rounded-input !border !border-solid !border-border-secondary !bg-background-primary !p-0 ![box-shadow:none]", {
+			"hover:!border-border-hover": !props.menuIsOpen,
+			"hover:!border-border-selected": props.menuIsOpen
+		}, {
+			"!border-border-critical": props.selectProps["aria-invalid"] === "true",
+			"!border-border-selected": props.menuIsOpen || props.isFocused,
+			"!min-h-[34px]": small
+		}, { "!border-border-critical": hasError && !props.menuIsOpen && !props.isDisabled }),
+		children: [isInsideLabel && Boolean(labelText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodyPrimary, {
+			className: "ml-xs mr--2xs",
+			color: "secondary",
+			children: labelText
+		}), children]
+	});
+};
+/**
+* Add custom icon for dropdown indicator
+* @see https://react-select.com/components#components
+*/
+const DropdownIndicator = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.DropdownIndicator, {
+		...props,
+		className: "flex h-full w-full items-center justify-center !py-0 px-xs",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.CaretDown, {
+			"aria-label": props.selectProps.menuIsOpen ? "Caret Up" : "Caret Down",
+			className: (0, _evolve_ui_theme_system.cn)({ "rotate-180": props.selectProps.menuIsOpen }),
+			color: props.selectProps.isDisabled ? "disabled" : "primary",
+			size: "sm"
+		})
+	});
+};
+/**
+* Add data-testid prop to the select component container
+* @see https://react-select.com/components#components
+*/
+const SelectContainer = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.SelectContainer, {
+	...props,
+	className: (0, _evolve_ui_theme_system.cn)(className, "hui-text-body-primary !rounded-input text-text-primary ![box-shadow:none]"),
+	innerProps: {
+		...props.innerProps,
+		...Boolean(props.selectProps["data-testid"]) && { "data-testid": props.selectProps["data-testid"] }
+	}
+});
+const NoOptionsMessage = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.NoOptionsMessage, {
+	...props,
+	className: "p-0",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodyPrimary, {
+		className: "normal-case",
+		color: "secondary",
+		children: "No results"
+	})
+});
+const Input = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.Input, {
+	...props,
+	"aria-activedescendant": props["aria-activedescendant"] || void 0,
+	autoComplete: props.selectProps.autoComplete,
+	className: "!m-0 !p-0"
+});
+const Option = ({ children, isDisabled, isFocused, isSelected, ...rest }) => {
+	const isSelectedAndDisabled = isSelected && isDisabled;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.Option, {
+		...rest,
+		className: (0, _evolve_ui_theme_system.cn)("hui-text-body-primary !px-[8px] !py-[4px] text-[16px] text-text-primary", "hover:cursor-pointer hover:bg-background-hover", {
+			"!bg-background-hover": !isDisabled && isFocused,
+			"!bg-background-inverse !text-text-inverse hover:!bg-background-inverse": !isDisabled && isSelected,
+			"!bg-background-primary": isDisabled && isFocused && !isSelected,
+			"!cursor-not-allowed !bg-background-inverse !text-text-disabled hover:!bg-background-inverse": isSelectedAndDisabled,
+			"!cursor-not-allowed !text-text-disabled hover:!bg-background-primary focus:!bg-background-primary": isDisabled && !isSelected
+		}),
+		innerProps: {
+			...rest.innerProps,
+			...Boolean(rest.selectProps["data-testid"]) && { "data-testid": rest.selectProps["data-testid"] }
+		},
+		isDisabled: Boolean(isDisabled),
+		isFocused,
+		isSelected,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...rest.data && typeof rest.data === "object" && "data-testid" in rest.data ? { "data-testid": rest.data["data-testid"] } : {},
+			className: (0, _evolve_ui_theme_system.cn)("flex h-full w-full items-center", {
+				"bg-background-inverse text-text-disabled": isSelectedAndDisabled,
+				"bg-background-inverse text-text-inverse": isSelected && !isDisabled,
+				"pl-sm": !isSelected
+			}),
+			children: [isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Check, {
+				className: "mr-[2px]",
+				color: isDisabled ? "disabled" : "inverse",
+				size: "xs"
+			}), children]
+		})
+	});
+};
+const ClearIndicator = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.ClearIndicator, {
+	...props,
+	className: "!py-0",
+	children: props.children
+});
+/**
+* Reads the scroll offset that `PreventModalScroll` parks on `document.body.style.top`.
+*
+* When a modal is open, `PreventModalScroll` sets `body.style.top = "-${scrollPosition}px"`
+* and `body.style.position = "fixed"`. React-select uses `window.pageYOffset` for the
+* portal offset, but that returns 0 when the body is fixed, so we read the stored scroll
+* position directly from `body.style.top` to compensate. Zoom-agnostic because it's a
+* stored value, not a layout measurement.
+*/
+const getBodyScrollOffset = () => {
+	const bodyTop = typeof document !== "undefined" ? document.body.style.top : "";
+	return bodyTop ? Math.abs(parseFloat(bodyTop)) : 0;
+};
+/**
+* Adds the stored body-scroll offset to react-select's computed `top` style.
+*
+* react-select only sets `top` when placement === 'bottom'. When it flips to 'top'
+* it sets `bottom` instead and leaves `top` undefined, so we must guard before adding
+* the scroll offset — otherwise `Number(undefined)` NaN-stomps the style and breaks
+* the flipped portal menu.
+*
+* @internal exported for unit testing only.
+*/
+const applyBodyScrollOffsetToTop = (baseStyles, scrollOffset) => ({
+	...baseStyles,
+	...typeof baseStyles.top === "number" ? { top: baseStyles.top + scrollOffset } : {}
+});
+const Menu = ({ getStyles, ...props }) => {
+	if (props.selectProps.menuPortalTarget) {
+		const customGetStyles = (name, styleProps) => applyBodyScrollOffsetToTop(getStyles(name, styleProps), getBodyScrollOffset());
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.Menu, {
+			...props,
+			getStyles: customGetStyles,
+			className: (0, _evolve_ui_theme_system.cn)(props.className, "!z-[11111] !mt-2xs !rounded-input !border !border-border-secondary !bg-background-primary"),
+			children: props.children
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.Menu, {
+		...props,
+		getStyles,
+		className: (0, _evolve_ui_theme_system.cn)(props.className, "!z-[11111] !mt-2xs !rounded-input !border !border-border-secondary !bg-background-primary"),
+		children: props.children
+	});
+};
+const MenuList = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.MenuList, {
+	...props,
+	className: "!px-0 !py-xs",
+	children: props.children
+});
+const MenuPortal = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.MenuPortal, {
+	...props,
+	className: "!z-[11111]",
+	children: props.children
+});
+const Placeholder = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.Placeholder, {
+	...props,
+	className: "!hui-text-body-primary overflow-hidden text-nowrap",
+	children: props.children
+});
+const SingleValue = ({ isDisabled, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.SingleValue, {
+	...rest,
+	className: (0, _evolve_ui_theme_system.cn)("!hui-text-body-primary m-0", {
+		"!cursor-not-allowed !text-text-disabled": isDisabled,
+		"!text-text-primary": !isDisabled
+	}),
+	isDisabled,
+	children: rest.children
+});
+const ValueContainer = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.ValueContainer, {
+	...props,
+	className: "!m-0 flex h-full items-center !py-0",
+	children: props.children
+});
+//#endregion
+//#region src/Select/Select.tsx
+/**
+* A customized + styled react-select
+*
+* @see https://react-select.com
+*/
+const Select = (0, react.forwardRef)((unfilteredProps, ref) => {
+	const defaultInstanceId = (0, react.useId)();
+	const [formLabelProps, { components, disabled, isInsideLabel, menuPlacement = "auto", menuPosition, name, onChange: propOnChange, selectType: SelectComponent = react_select.default, small = false, usePortalMenu, ...selectProps }] = require_formLabel.extractFormLabelProps(unfilteredProps);
+	const onChange = (0, react.useCallback)((event, action) => {
+		if (event) {
+			event.name = name;
+			propOnChange?.(event, action);
+		}
+	}, [name, propOnChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_formLabel.FormLabel, {
+		...formLabelProps,
+		labelText: isInsideLabel ? void 0 : formLabelProps.labelText,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectComponent, {
+			"data-hui-id": "Select",
+			instanceId: defaultInstanceId,
+			placeholder: "Select",
+			...selectProps,
+			components: {
+				ClearIndicator,
+				Control: InsideLabelControl,
+				DropdownIndicator,
+				IndicatorSeparator: null,
+				Input,
+				Menu,
+				MenuList,
+				MenuPortal,
+				NoOptionsMessage,
+				Option,
+				Placeholder,
+				SelectContainer,
+				SingleValue,
+				ValueContainer,
+				...components
+			},
+			hasError: formLabelProps.hasError,
+			isDisabled: disabled,
+			isInsideLabel,
+			labelText: formLabelProps.labelText,
+			menuPlacement,
+			menuPosition: menuPosition ?? (usePortalMenu ? "fixed" : "absolute"),
+			menuPortalTarget: usePortalMenu && typeof document !== "undefined" ? document.getElementById("hui-modal-target") : void 0,
+			name,
+			onChange,
+			ref,
+			small
+		})
+	});
+});
+Select.displayName = "Select";
+//#endregion
+Object.defineProperty(exports, "Select", {
+	enumerable: true,
+	get: function() {
+		return Select;
+	}
+});
+
+//# sourceMappingURL=Select-BXDjzyDs.cjs.map