@spear-ai/spectral 1.11.0 → 1.11.2

package/dist/Input.js

@@ -2,22 +2,24 @@
 import "./styles/main.css";
 import { CheckCircleIcon as e } from "./Icons/CheckCircleIcon.js";
 import { CloseCircleIcon as t } from "./Icons/CloseCircleIcon.js";
-import { ErrorIcon as n } from "./Icons/ErrorIcon.js";
-import { EyeClosedIcon as r } from "./Icons/EyeClosedIcon.js";
-import { EyeOpenIcon as i } from "./Icons/EyeOpenIcon.js";
-import { LoaderIcon as a } from "./Icons/LoaderIcon.js";
-import { t as o } from "./twUtils-VNWgstKL.js";
-import { ErrorMessage as s, getAriaProps as c, getFormFieldCSSProperties as l, getInputClasses as u, useFormFieldId as d, useFormFieldState as f } from "./utils/formFieldUtils.js";
-import { Label as ee } from "./Label.js";
-import { useClearOnFocus as te, usePasswordVisibility as p, usePrefixWidth as m } from "./Input/InputUtils.js";
-import { useCallback as h, useRef as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { ErrorIcon as ee } from "./Icons/ErrorIcon.js";
+import { EyeClosedIcon as te } from "./Icons/EyeClosedIcon.js";
+import { EyeOpenIcon as n } from "./Icons/EyeOpenIcon.js";
+import { LoaderIcon as ne } from "./Icons/LoaderIcon.js";
+import { WarningIcon as re } from "./Icons/WarningIcon.js";
+import { t as r } from "./twUtils-VNWgstKL.js";
+import { ErrorMessage as i, WarningMessage as ie, getAriaProps as a, getFormFieldCSSProperties as o, getInputClasses as s, useFormFieldId as c, useFormFieldState as l } from "./utils/formFieldUtils.js";
+import { useUncontrolledState as u } from "./hooks/useUncontrolledState.js";
+import { Label as d } from "./Label.js";
+import { useClearOnFocus as f, usePasswordVisibility as p, usePrefixWidth as m } from "./Input/InputUtils.js";
+import { useCallback as h, useRef as ae } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/Input/Input.tsx
-var y = (...e) => (t) => {
+var oe = (...e) => (t) => {
 	e.forEach((e) => {
 		e && (typeof e == "function" ? e(t) : e.current = t);
 	});
-}, ne = (e) => ({
+}, se = (e) => ({
 	date: "off",
 	email: "email",
 	number: "off",
@@ -26,110 +28,127 @@ var y = (...e) => (t) => {
 	text: "off",
 	url: "url",
 	"datetime-local": "off"
-})[e] || "off", b = ({ className: b, clearOnFocus: x = !1, disabled: S, endIcon: C, errorMessage: w, id: re, label: T, labelClassName: E, name: D, onBlur: O, onChange: k, onFocus: A, placeholder: j, prefix: M, ref: N, required: P, showClearButton: F = !1, startIcon: I, state: L = "default", suppressHydrationWarning: R = !0, type: z = "text", value: B = "", "aria-label": V, "aria-describedby": H, ...U }) => {
-	let W = d(re, D), G = `${W}-error`, { isDisabled: K, isLoading: q, isInvalid: J } = f(S, L), Y = c(L, H, P, G), X = g(null), ie = y(N, X), { isVisible: Z, toggleVisibility: ae, inputType: oe } = p(), { prefixWidth: se, prefixRef: ce } = m(M), { handleFocus: Q } = te(x, k ? (e) => k(e.target.value) : void 0), le = h((e) => {
-		O?.(e);
-	}, [O]), ue = h((e) => {
-		Q(e, A);
-	}, [Q, A]), de = h((e) => {
+})[e] || "off", v = (v) => {
+	let { className: ce, clearOnFocus: le = !1, defaultValue: y, disabled: ue, endIcon: b, errorMessage: x, id: S, label: C, labelClassName: w, name: T, onBlur: E, onChange: D, onFocus: O, placeholder: k, prefix: A, ref: j, required: M, showClearButton: N = !1, startIcon: P, state: F = "default", suppressHydrationWarning: I = !0, type: L = "text", value: R, warningMessage: z, "aria-label": B, "aria-describedby": V, ...H } = v, U = c(S, T), W = `${U}-error`, G = `${U}-warning`, { isDisabled: K, isLoading: de, isInvalid: fe } = l(ue, F), pe = a(F, V, M, F === "error" ? W : F === "warning" && z ? G : void 0), [q, J] = u({
+		value: R,
+		defaultValue: typeof y == "string" ? y : y == null ? "" : String(y),
+		onChange: D
+	}), Y = ae(null), me = oe(j, Y), { isVisible: X, toggleVisibility: he, inputType: ge } = p(), { prefixWidth: _e, prefixRef: ve } = m(A), { handleFocus: Z } = f(le, (e) => J(e.target.value)), ye = h((e) => {
+		E?.(e);
+	}, [E]), be = h((e) => {
+		Z(e, O);
+	}, [Z, O]), xe = h((e) => {
 		let t = e.target.value;
-		k?.(t);
-	}, [k]), fe = h(() => {
-		let e = X.current;
-		e && (e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
-	}, []), $ = F && B.length > 0, pe = () => {
-		let o = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", s = {
-			password: () => /* @__PURE__ */ _("button", {
-				"aria-controls": W,
-				"aria-label": Z ? `Hide ${T ?? "password"}` : `Show ${T ?? "password"}`,
-				"aria-pressed": Z,
-				className: o,
+		J(t);
+	}, [J]), Se = h(() => {
+		let e = Y.current;
+		e && (J(""), e.focus());
+	}, [J]), Q = N && q.length > 0, Ce = () => {
+		let r = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", i = {
+			password: () => /* @__PURE__ */ g("button", {
+				"aria-controls": U,
+				"aria-label": X ? `Hide ${C ?? "password"}` : `Show ${C ?? "password"}`,
+				"aria-pressed": X,
+				className: r,
 				"data-testid": "spectral-input-password-toggle",
-				onClick: ae,
+				onClick: he,
 				type: "button",
-				children: _(Z ? r : i, { size: 22 })
+				children: g(X ? te : n, { size: 22 })
 			}),
-			clear: () => /* @__PURE__ */ _("button", {
-				"aria-label": String(`Clear ${T ?? "input"}`),
-				className: o,
+			clear: () => /* @__PURE__ */ g("button", {
+				"aria-label": String(`Clear ${C ?? "input"}`),
+				className: r,
 				"data-testid": "spectral-input-clear-button",
-				onClick: fe,
+				onClick: Se,
 				type: "button",
-				children: /* @__PURE__ */ _(t, { size: 24 })
+				children: /* @__PURE__ */ g(t, { size: 24 })
 			}),
-			loading: () => /* @__PURE__ */ _("div", {
+			loading: () => /* @__PURE__ */ g("div", {
 				className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
 				"data-testid": "spectral-input-loading-icon",
-				children: /* @__PURE__ */ _(a, { size: 24 })
+				children: /* @__PURE__ */ g(ne, { size: 24 })
 			}),
-			error: () => /* @__PURE__ */ _("div", {
+			error: () => /* @__PURE__ */ g("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-danger-400",
 				"data-testid": "spectral-input-error-icon",
-				children: /* @__PURE__ */ _(n, { size: 24 })
+				children: /* @__PURE__ */ g(ee, { size: 24 })
 			}),
-			success: () => /* @__PURE__ */ _("div", {
+			success: () => /* @__PURE__ */ g("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-success-400",
 				"data-testid": "spectral-input-success-icon",
-				children: /* @__PURE__ */ _(e, { size: 24 })
+				children: /* @__PURE__ */ g(e, { size: 24 })
+			}),
+			warning: () => /* @__PURE__ */ g("div", {
+				className: "right-4 absolute top-1/2 -translate-y-1/2 text-warning-400",
+				"data-testid": "spectral-input-warning-icon",
+				children: /* @__PURE__ */ g(re, { size: 24 })
 			})
 		};
-		return C ? /* @__PURE__ */ _("div", {
+		return b ? /* @__PURE__ */ g("div", {
 			className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
-			children: C
-		}) : z === "password" ? s.password() : $ ? s.clear() : q ? s.loading() : L === "success" ? s.success() : L === "error" ? s.error() : null;
-	}, me = () => I || null, he = z === "number" || z === "date" || z === "datetime-local", ge = o(u(L, b), "[text-indent:var(--prefix-width)]", $ && "pr-10", he && "tabular-nums"), _e = o("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
-	return /* @__PURE__ */ v("div", {
+			children: b
+		}) : L === "password" ? i.password() : Q ? i.clear() : de ? i.loading() : F === "success" ? i.success() : F === "warning" ? i.warning() : F === "error" ? i.error() : null;
+	}, $ = () => P || null, we = L === "number" || L === "date" || L === "datetime-local", Te = r(s(F, ce), "[text-indent:var(--prefix-width)]", Q && "pr-10", we && "tabular-nums"), Ee = r("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
+	return /* @__PURE__ */ _("div", {
 		className: "space-y-1.5 w-full",
 		"data-testid": "spectral-input-container",
-		children: [T && /* @__PURE__ */ _(ee, {
-			className: o("mb-2 block", E, K && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
+		children: [C && /* @__PURE__ */ g(d, {
+			className: r("mb-2 block", w, K && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
 			"data-testid": "spectral-input-label",
-			htmlFor: W,
-			children: T
-		}), /* @__PURE__ */ v("div", {
+			htmlFor: U,
+			children: C
+		}), /* @__PURE__ */ _("div", {
 			className: "relative",
 			"data-testid": "spectral-input-wrapper",
-			children: [/* @__PURE__ */ v("div", {
-				className: "relative",
-				children: [
-					me(),
-					M && /* @__PURE__ */ _("span", {
-						ref: ce,
-						className: _e,
-						children: M
-					}),
-					/* @__PURE__ */ _("input", {
-						"aria-label": V ?? T,
-						autoComplete: ne(z),
-						className: ge,
-						"data-state": L,
-						"data-testid": "spectral-input",
-						disabled: K,
-						id: W,
-						name: D,
-						onBlur: le,
-						onChange: de,
-						onFocus: ue,
-						placeholder: j ?? T,
-						ref: ie,
-						required: P,
-						style: l({ "--prefix-width": M ? `${se}px` : "0" }),
-						suppressHydrationWarning: R,
-						type: z === "password" ? oe : z,
-						value: B,
-						...Y,
-						...U
-					}),
-					pe()
-				]
-			}), J && w && /* @__PURE__ */ _(s, {
-				dataTestId: "spectral-input-error-message",
-				id: G,
-				message: w
-			})]
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: "relative",
+					children: [
+						$(),
+						A && /* @__PURE__ */ g("span", {
+							ref: ve,
+							className: Ee,
+							children: A
+						}),
+						/* @__PURE__ */ g("input", {
+							"aria-label": B ?? C,
+							autoComplete: se(L),
+							className: Te,
+							"data-state": F,
+							"data-testid": "spectral-input",
+							disabled: K,
+							id: U,
+							name: T,
+							onBlur: ye,
+							onChange: xe,
+							onFocus: be,
+							placeholder: k ?? C,
+							ref: me,
+							required: M,
+							style: o({ "--prefix-width": A ? `${_e}px` : "0" }),
+							suppressHydrationWarning: I,
+							type: L === "password" ? ge : L,
+							value: q,
+							...pe,
+							...H
+						}),
+						Ce()
+					]
+				}),
+				fe && x && /* @__PURE__ */ g(i, {
+					dataTestId: "spectral-input-error-message",
+					id: W,
+					message: x
+				}),
+				F === "warning" && z && /* @__PURE__ */ g(ie, {
+					dataTestId: "spectral-input-warning-message",
+					id: G,
+					message: z
+				})
+			]
 		})]
 	});
 };
-b.displayName = "Input";
+v.displayName = "Input";
 //#endregion
-export { b as Input };
+export { v as Input };

package/dist/InputNumeric.d.ts

@@ -8,7 +8,7 @@ export type InputNumericProps = Omit<InputProps, 'inputMode' | 'onChange' | 'pat
     value?: string;
 };
 export declare const InputNumeric: {
-    ({ allowDecimal, allowNegative, className, locale, max, min, onChange, onKeyDown, onPaste, step, value, ...props }: InputNumericProps): ReactElement;
+    ({ allowDecimal, allowNegative, className, defaultValue, locale, max, min, onChange, onKeyDown, onPaste, step, value: valueProp, ...props }: InputNumericProps): ReactElement;
     displayName: string;
 };
 //# sourceMappingURL=InputNumeric.d.ts.map

package/dist/InputNumeric.js

@@ -1,15 +1,16 @@
 "use client";
 import "./styles/main.css";
 import { t as e } from "./twUtils-VNWgstKL.js";
-import { Input as t } from "./Input.js";
-import { useCallback as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { useUncontrolledState as t } from "./hooks/useUncontrolledState.js";
+import { Input as n } from "./Input.js";
+import { useCallback as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/InputNumeric/InputNumeric.tsx
-var i = /^\d$/, a = new Set([
+var a = /^\d$/, o = new Set([
 	"e",
 	"E",
 	"+"
-]), o = new Set([
+]), s = new Set([
 	"Backspace",
 	"Delete",
 	"ArrowLeft",
@@ -21,117 +22,121 @@ var i = /^\d$/, a = new Set([
 	"Tab",
 	"Enter",
 	"Escape"
-]), s = (e) => {
+]), c = (e) => {
 	try {
 		return new Intl.NumberFormat(e).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? ".";
 	} catch {
 		return ".";
 	}
-}, c = (e, t) => t === "." ? e : e.replaceAll(t, "."), l = (e, t, n, r) => {
+}, l = (e, t) => t === "." ? e : e.replaceAll(t, "."), u = (e, t, n, r) => {
 	if (!e) return "";
-	let i = c(e, r).replace(/[^\d.-]/g, "");
+	let i = l(e, r).replace(/[^\d.-]/g, "");
 	if (n ? (i = i.replace(/(?!^)-/g, ""), i.startsWith("--") && (i = `-${i.replace(/-/g, "")}`)) : i = i.replace(/-/g, ""), !t) i = i.replace(/\./g, "");
 	else {
 		let e = i.indexOf(".");
 		e >= 0 && (i = `${i.slice(0, e + 1)}${i.slice(e + 1).replace(/\./g, "")}`);
 	}
 	return i;
-}, u = (e) => {
+}, d = (e) => {
 	if (e.selectionStart === null || e.selectionEnd === null) return !e.value.includes(".");
 	let t = e.value.slice(e.selectionStart, e.selectionEnd);
 	return !e.value.includes(".") || t.includes(".");
-}, d = (e) => {
+}, f = (e) => {
 	if (e.selectionStart === null || e.selectionEnd === null) return e.value.length === 0;
 	let t = e.selectionStart === 0, n = e.value.slice(e.selectionStart, e.selectionEnd);
 	return t && (!e.value.includes("-") || n.includes("-"));
-}, f = (e) => {
+}, p = (e) => {
 	if (e == null || e === "") return;
 	let t = typeof e == "number" ? e : Number.parseFloat(e);
 	return Number.isFinite(t) ? t : void 0;
-}, p = (e) => {
+}, m = (e) => {
 	let t = e.toString();
 	return t.includes(".") ? t.split(".")[1]?.length ?? 0 : 0;
-}, m = (e, t) => {
+}, h = (e, t) => {
 	if (t <= 0) return e;
 	let n = 10 ** t;
 	return Math.round(e * n) / n;
-}, h = ({ allowDecimal: h = !0, allowNegative: g = !1, className: _, locale: v, max: y, min: b, onChange: x, onKeyDown: S, onPaste: C, step: w, value: T = "", ...E }) => {
-	let D = s(v), O = f(b), k = f(y), A = f(w), j = A && A > 0 ? A : 1, M = O ?? (g ? void 0 : 0), N = n((e) => {
-		if (S?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && !(e.metaKey || e.ctrlKey || e.altKey)) {
+}, g = ({ allowDecimal: g = !0, allowNegative: _ = !1, className: v, defaultValue: y = "", locale: b, max: x, min: S, onChange: C, onKeyDown: w, onPaste: T, step: E, value: D, ...O }) => {
+	let [k, A] = t({
+		value: D,
+		defaultValue: y,
+		onChange: C
+	}), j = c(b), M = p(S), N = p(x), P = p(E), F = P && P > 0 ? P : 1, I = M ?? (_ ? void 0 : 0), L = r((e) => {
+		if (w?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && !(e.metaKey || e.ctrlKey || e.altKey)) {
 			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
 				e.preventDefault();
-				let t = e.key === "ArrowUp" ? 1 : -1, n = c(T, D), r = Number.parseFloat(n), i = (Number.isFinite(r) ? r : M ?? 0) + t * j;
-				M !== void 0 && (i = Math.max(M, i)), k !== void 0 && (i = Math.min(k, i)), h || (i = Math.trunc(i));
-				let a = h ? p(j) : 0, o = m(i, a), s = Object.is(o, -0) ? 0 : o, u = a > 0 ? s.toFixed(a).replace(/\.?0+$/, "") : s.toString();
-				x?.(l(u, h, g, D));
+				let t = e.key === "ArrowUp" ? 1 : -1, n = l(k, j), r = Number.parseFloat(n), i = (Number.isFinite(r) ? r : I ?? 0) + t * F;
+				I !== void 0 && (i = Math.max(I, i)), N !== void 0 && (i = Math.min(N, i)), g || (i = Math.trunc(i));
+				let a = g ? m(F) : 0, o = h(i, a), s = Object.is(o, -0) ? 0 : o;
+				A(u(a > 0 ? s.toFixed(a).replace(/\.?0+$/, "") : s.toString(), g, _, j));
 				return;
 			}
-			if (!o.has(e.key) && !i.test(e.key)) {
-				if (a.has(e.key)) {
+			if (!s.has(e.key) && !a.test(e.key)) {
+				if (o.has(e.key)) {
 					e.preventDefault();
 					return;
 				}
-				if (e.key === "." || e.key === D) {
-					(!h || !u(e.currentTarget)) && e.preventDefault();
+				if (e.key === "." || e.key === j) {
+					(!g || !d(e.currentTarget)) && e.preventDefault();
 					return;
 				}
 				if (e.key === "-") {
-					(!g || !d(e.currentTarget)) && e.preventDefault();
+					(!_ || !f(e.currentTarget)) && e.preventDefault();
 					return;
 				}
 				e.preventDefault();
 			}
 		}
 	}, [
-		h,
 		g,
-		D,
-		M,
-		x,
-		S,
-		k,
+		_,
 		j,
-		T
-	]), P = n((e) => {
-		if (C?.(e), e.defaultPrevented) return;
-		let t = e.clipboardData.getData("text"), n = l(t, h, g, D);
-		if (c(t, D) === n) return;
+		I,
+		w,
+		N,
+		A,
+		F,
+		k
+	]), R = r((e) => {
+		if (T?.(e), e.defaultPrevented) return;
+		let t = e.clipboardData.getData("text"), n = u(t, g, _, j);
+		if (l(t, j) === n) return;
 		e.preventDefault();
-		let r = e.currentTarget, i = r.selectionStart ?? r.value.length, a = r.selectionEnd ?? r.value.length, o = l(`${r.value.slice(0, i)}${n}${r.value.slice(a)}`, h, g, D);
-		x?.(o);
+		let r = e.currentTarget, i = r.selectionStart ?? r.value.length, a = r.selectionEnd ?? r.value.length;
+		A(u(`${r.value.slice(0, i)}${n}${r.value.slice(a)}`, g, _, j));
 	}, [
-		h,
 		g,
-		D,
-		x,
-		C
-	]), F = n((e) => {
-		x?.(l(e, h, g, D));
+		_,
+		j,
+		T,
+		A
+	]), z = r((e) => {
+		A(u(e, g, _, j));
 	}, [
-		h,
 		g,
-		D,
-		x
-	]), I = h ? "decimal" : "numeric", L = h ? "[0-9]*[.]?[0-9]*" : "[0-9]*", R = c(T, D), z = R === "" || R === "-" || R === "." ? void 0 : Number.parseFloat(R);
-	return /* @__PURE__ */ r(t, {
-		...E,
-		"aria-valuemax": k,
-		"aria-valuemin": M,
-		"aria-valuenow": Number.isFinite(z) ? z : void 0,
-		className: e("tabular-nums", _),
-		inputMode: I,
-		max: y,
-		min: b,
-		onChange: F,
-		onKeyDown: N,
-		onPaste: P,
-		pattern: L,
+		_,
+		j,
+		A
+	]), B = g ? "decimal" : "numeric", V = g ? "[0-9]*[.]?[0-9]*" : "[0-9]*", H = l(k, j), U = H === "" || H === "-" || H === "." ? void 0 : Number.parseFloat(H);
+	return /* @__PURE__ */ i(n, {
+		...O,
+		"aria-valuemax": N,
+		"aria-valuemin": I,
+		"aria-valuenow": Number.isFinite(U) ? U : void 0,
+		className: e("tabular-nums", v),
+		inputMode: B,
+		max: x,
+		min: S,
+		onChange: z,
+		onKeyDown: L,
+		onPaste: R,
+		pattern: V,
 		role: "spinbutton",
-		step: w,
+		step: E,
 		type: "text",
-		value: T
+		value: k
 	});
 };
-h.displayName = "InputNumeric";
+g.displayName = "InputNumeric";
 //#endregion
-export { h as InputNumeric };
+export { g as InputNumeric };

package/dist/MultiSelect/MultiSelectBase.d.ts

@@ -1,3 +1,4 @@
+import { DropdownWidth } from '../utils/formFieldUtils';
 import { ButtonHTMLAttributes, Ref } from 'react';
 export type MultiSelectState = 'default' | 'error' | 'disabled' | 'loading';
 export interface MultiSelectOption {
@@ -9,6 +10,7 @@ export interface MultiSelectOption {
 export interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
     clearAllLabel?: string;
     closeOnSelect?: boolean;
+    dropdownWidth?: DropdownWidth;
     emptyMessage?: string;
     errorMessage?: string;
     id?: string;
@@ -16,7 +18,8 @@ export interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButt
     loadingMessage?: string;
     maxCount?: number;
     name?: string;
-    onChange: (value: string[]) => void;
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
     options: MultiSelectOption[];
     placeholder?: string;
     searchPlaceholder?: string;
@@ -26,12 +29,12 @@ export interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButt
     selectAllLabel?: string;
     sortAlphabetically?: boolean;
     state?: MultiSelectState;
-    value: string[];
+    value?: string[];
     'aria-label'?: string;
     'aria-describedby'?: string;
 }
 export declare const MultiSelectBase: {
-    ({ className, clearAllLabel, closeOnSelect, emptyMessage, errorMessage, id, label, loadingMessage, maxCount, name, onChange, options, placeholder, ref, searchPlaceholder, selectAllLabel, showClearAll, showSearch, showSelectAll, sortAlphabetically, state, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: MultiSelectBaseProps & {
+    ({ className, clearAllLabel, closeOnSelect, dropdownWidth, emptyMessage, errorMessage, defaultValue, id, label, loadingMessage, maxCount, name, onChange, options, placeholder, ref, searchPlaceholder, selectAllLabel, showClearAll, showSearch, showSelectAll, sortAlphabetically, state, value: valueProp, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: MultiSelectBaseProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;