@spear-ai/spectral 1.12.6 → 1.13.1

package/dist/MultiSelect/MultiSelectBase.js

@@ -5,15 +5,16 @@ import { ChevronDownIcon as t } from "../Icons/ChevronDownIcon.js";
 import { CloseIcon as n } from "../Icons/CloseIcon.js";
 import { SearchIcon as r } from "../Icons/SearchIcon.js";
 import { t as i } from "../twUtils-BpqlKSeB.js";
-import { EmptyState as a, ErrorMessage as o, LoadingState as s, WarningMessage as c, getAriaProps as l, getDropdownSurfaceClasses as u, getDropdownWidthStyles as d, getErrorMessageId as f, getTriggerClasses as ee, useFormFieldId as te } from "../utils/formFieldUtils.js";
+import { ErrorMessage as a, WarningMessage as o } from "../FormFieldMessage.js";
+import { EmptyState as s, LoadingState as c, getAriaProps as l, getDropdownSurfaceClasses as u, getDropdownWidthStyles as d, getErrorMessageId as f, getTriggerClasses as ee, useFormFieldId as te } from "../utils/formFieldUtils.js";
 import { useUncontrolledState as ne } from "../hooks/useUncontrolledState.js";
 import { Label as re } from "../Label.js";
 import { useAutoDropdownHorizontalShift as ie } from "../utils/dropdownPositioning.js";
 import { a as ae, i as oe, n as se, r as ce } from "../dist-B9w6c9RC.js";
 import { useCallback as p, useEffect as le, useId as ue, useMemo as m, useRef as de, useState as h } from "react";
-import { Fragment as fe, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/MultiSelect/MultiSelectBase.tsx
-var pe = "h-4 w-4", me = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95", "motion-safe:data-[side=bottom]:slide-in-from-top-2", "motion-safe:data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-popover-content-transform-origin)"), he = (e, t, n, r, i, a, o, s, c) => {
+var fe = "h-4 w-4", pe = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95", "motion-safe:data-[side=bottom]:slide-in-from-top-2", "motion-safe:data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-popover-content-transform-origin)"), me = (e, t, n, r, i, a, o, s, c) => {
 	let [l, u] = h(-1), d = m(() => {
 		let t = [];
 		return o && t.push({ type: "search" }), s && t.push({ type: "select-all" }), e.forEach((e, n) => {
@@ -102,21 +103,21 @@ var pe = "h-4 w-4", me = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-s
 			return e.type === "option" ? e.value : null;
 		}, [l, d])
 	};
-}, v = ({ className: u, clearAllLabel: v = "Clear all", closeOnSelect: y = !1, dropdownWidth: b = "trigger", emptyMessage: ge = "No options found", errorMessage: x, defaultValue: _e = [], disabled: ve, id: ye, label: S, loadingMessage: be = "Loading options…", maxCount: C = 3, name: w, onChange: xe, options: T = [], placeholder: Se = "Select options", ref: Ce, searchPlaceholder: we = "Search options…", selectAllLabel: Te = "Select all", showClearAll: Ee = !0, showSearch: E = !0, showSelectAll: D = !0, sortAlphabetically: O = !1, state: k = "default", value: De, warningMessage: A, "aria-label": Oe, "aria-describedby": ke, ...j }) => {
-	let Ae = ue(), M = te(ye, w ?? `multiselect-${Ae}`), N = `${M}-listbox`, P = f(M), F = `${M}-warning`, je = k === "error" ? P : k === "warning" && A ? F : void 0, [I, L] = h(!1), { dropdownShiftStyle: Me, setDropdownElement: Ne } = ie(I), [R, z] = h(""), [B, V] = ne({
-		value: De,
+}, y = ({ className: u, clearAllLabel: y = "Clear all", closeOnSelect: b = !1, dropdownWidth: x = "trigger", emptyMessage: he = "No options found", errorMessage: ge, defaultValue: _e = [], disabled: ve, id: S, label: C, loadingMessage: ye = "Loading options…", maxCount: w = 3, name: T, onChange: be, options: E = [], placeholder: xe = "Select options", ref: Se, searchPlaceholder: Ce = "Search options…", selectAllLabel: we = "Select all", showClearAll: Te = !0, showSearch: D = !0, showSelectAll: O = !0, sortAlphabetically: k = !1, state: A = "default", value: Ee, warningMessage: j, "aria-label": De, "aria-describedby": Oe, ...M }) => {
+	let ke = ue(), N = te(S, T ?? `multiselect-${ke}`), P = `${N}-listbox`, F = f(N), I = `${N}-warning`, Ae = A === "error" ? F : A === "warning" && j ? I : void 0, [L, R] = h(!1), { dropdownShiftStyle: je, setDropdownElement: Me } = ie(L), [z, Ne] = h(""), [B, V] = ne({
+		value: Ee,
 		defaultValue: _e,
-		onChange: xe
-	}), H = de(null), U = !!ve, Pe = k === "loading", Fe = l(k, ke, j.required, je), { dropdownOverflowStyle: Ie, dropdownWidthMode: W, resolvedDropdownWidth: Le } = d({
-		dropdownWidth: b,
+		onChange: be
+	}), H = de(null), U = !!ve, Pe = A === "loading", Fe = l(A, Oe, M.required, Ae), { dropdownOverflowStyle: Ie, dropdownWidthMode: W, resolvedDropdownWidth: Le } = d({
+		dropdownWidth: x,
 		triggerWidth: "var(--radix-popover-trigger-width)"
 	}), G = m(() => {
-		let e = T.filter((e) => e.label.toLowerCase().includes(R.toLowerCase()));
-		return O && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
+		let e = E.filter((e) => e.label.toLowerCase().includes(z.toLowerCase()));
+		return k && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
 	}, [
-		T,
-		R,
-		O
+		E,
+		z,
+		k
 	]), K = m(() => {
 		let e = {}, t = [];
 		return G.forEach((n) => {
@@ -127,43 +128,43 @@ var pe = "h-4 w-4", me = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-s
 			hasGroups: Object.keys(e).length > 0
 		};
 	}, [G]), q = p((e) => {
-		T.find((t) => t.value === e)?.disabled || (V(B.includes(e) ? B.filter((t) => t !== e) : [...B, e]), y && L(!1));
+		E.find((t) => t.value === e)?.disabled || (V(B.includes(e) ? B.filter((t) => t !== e) : [...B, e]), b && R(!1));
 	}, [
-		y,
-		T,
+		b,
+		E,
 		V,
 		B
 	]), J = p(() => {
-		let e = T.filter((e) => !e.disabled).map((e) => e.value);
+		let e = E.filter((e) => !e.disabled).map((e) => e.value);
 		e.every((e) => B.includes(e)) ? V([]) : V(e);
 	}, [
-		T,
+		E,
 		V,
 		B
 	]), Y = p(() => {
 		V([]);
-	}, [V]), X = m(() => T.filter((e) => !e.disabled).map((e) => e.value), [T]), Re = X.length > 0 && X.every((e) => B.includes(e)), { focusedOptionValue: Z, getOptionFocusIndex: ze, handleKeyDown: Be, isSelectAllFocused: Ve, setFocusedIndex: Q } = he(G, Y, () => L(!1), q, J, H, E, D, !1);
+	}, [V]), X = m(() => E.filter((e) => !e.disabled).map((e) => e.value), [E]), Re = X.length > 0 && X.every((e) => B.includes(e)), { focusedOptionValue: Z, getOptionFocusIndex: ze, handleKeyDown: Be, isSelectAllFocused: Ve, setFocusedIndex: Q } = me(G, Y, () => R(!1), q, J, H, D, O, !1);
 	le(() => {
-		Q(I ? 0 : -1);
-	}, [I, Q]);
+		Q(L ? 0 : -1);
+	}, [L, Q]);
 	let He = p((e) => {
-		z(e.target.value);
+		Ne(e.target.value);
 	}, []), Ue = () => {
-		if (B.length === 0) return /* @__PURE__ */ g("span", {
+		if (B.length === 0) return /* @__PURE__ */ _("span", {
 			className: "min-h-8 flex items-center text-input-text-placeholder",
-			children: Se
+			children: xe
 		});
-		let e = B.slice(0, C), t = B.length - C;
-		return /* @__PURE__ */ _("div", {
+		let e = B.slice(0, w), t = B.length - w;
+		return /* @__PURE__ */ v("div", {
 			className: "gap-1 flex flex-wrap items-center overflow-hidden",
 			children: [e.map((e) => {
-				let t = T.find((t) => t.value === e);
-				return t ? /* @__PURE__ */ _("span", {
+				let t = E.find((t) => t.value === e);
+				return t ? /* @__PURE__ */ v("span", {
 					className: "gap-1 px-2 py-1 rounded-md text-xs max-w-48 inline-flex items-center bg-input-bg--selected text-input-text",
-					children: [/* @__PURE__ */ g("span", {
+					children: [/* @__PURE__ */ _("span", {
 						className: "truncate",
 						children: t.label
-					}), /* @__PURE__ */ g("span", {
+					}), /* @__PURE__ */ _("span", {
 						"aria-hidden": "true",
 						className: "hover:text-danger rounded-sm cursor-pointer",
 						"data-testid": "spectral-multiselect-remove-item-button",
@@ -173,11 +174,11 @@ var pe = "h-4 w-4", me = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-s
 						onPointerDown: (e) => {
 							e.stopPropagation();
 						},
-						children: /* @__PURE__ */ g(n, { size: 12 })
+						children: /* @__PURE__ */ _(n, { size: 12 })
 					})]
 				}, e) : null;
-			}), t > 0 && /* @__PURE__ */ _("span", {
-				className: "text-input-text-secondary text-xs py-1 flex items-center",
+			}), t > 0 && /* @__PURE__ */ v("span", {
+				className: "text-input-text-secondary text-xs py-1 flex items-center tabular-nums",
 				children: [
 					"+",
 					t,
@@ -186,55 +187,55 @@ var pe = "h-4 w-4", me = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-s
 			})]
 		});
 	}, $ = (t, n) => {
-		let r = B.includes(t.value), a = ze(n), o = `${N}-option-${t.value}`;
-		return /* @__PURE__ */ _("button", {
+		let r = B.includes(t.value), a = ze(n), o = `${P}-option-${t.value}`;
+		return /* @__PURE__ */ v("button", {
 			"aria-selected": r,
-			className: i("gap-3 px-3 py-2 text-sm flex w-full items-center text-left hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", a && "bg-input-bg--hover", r && "font-medium text-input-text"),
+			className: i("my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm flex w-full items-center text-left hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", a && "bg-input-bg--hover", r && "font-medium text-input-text"),
 			disabled: t.disabled,
 			id: o,
 			onClick: () => q(t.value),
 			role: "option",
 			type: "button",
-			children: [/* @__PURE__ */ g("div", {
+			children: [/* @__PURE__ */ _("div", {
 				"data-testid": "spectral-multiselect-selected-indicator",
 				className: i("w-4 h-4 rounded flex items-center justify-center border border-input-border", r && "bg-primary border-primary"),
-				children: r && /* @__PURE__ */ g(e, { size: 12 })
-			}), /* @__PURE__ */ g("span", { children: t.label })]
+				children: r && /* @__PURE__ */ _(e, { size: 12 })
+			}), /* @__PURE__ */ _("span", { children: t.label })]
 		}, t.value);
 	};
-	return /* @__PURE__ */ _("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "w-full",
 		"data-testid": "spectral-multiselect-root",
 		children: [
-			S && /* @__PURE__ */ g(re, {
+			C && /* @__PURE__ */ _(re, {
 				className: i("mb-2 block text-text-primary", U && "text-text-secondary"),
 				"data-testid": "spectral-multiselect-label",
-				htmlFor: M,
-				children: S
+				htmlFor: N,
+				children: C
 			}),
-			/* @__PURE__ */ g(oe, {
-				open: I,
-				onOpenChange: L,
-				children: /* @__PURE__ */ _("div", {
+			/* @__PURE__ */ _(oe, {
+				open: L,
+				onOpenChange: R,
+				children: /* @__PURE__ */ v("div", {
 					className: "relative",
 					"data-testid": "spectral-multiselect-wrapper",
-					onKeyDown: I ? Be : void 0,
+					onKeyDown: L ? Be : void 0,
 					role: "none",
 					children: [
-						/* @__PURE__ */ g(ae, {
+						/* @__PURE__ */ _(ae, {
 							asChild: !0,
-							children: /* @__PURE__ */ _("button", {
-								"aria-activedescendant": I && Z ? `${N}-option-${Z}` : void 0,
-								"aria-controls": I ? N : void 0,
-								"aria-expanded": I,
-								"aria-label": Oe ?? S,
-								className: i(ee(I, k, u), "max-h-22 py-2 text-sm"),
-								"data-state": k,
+							children: /* @__PURE__ */ v("button", {
+								"aria-activedescendant": L && Z ? `${P}-option-${Z}` : void 0,
+								"aria-controls": L ? P : void 0,
+								"aria-expanded": L,
+								"aria-label": De ?? C,
+								className: i(ee(L, A, u), "max-h-22 py-2 text-sm"),
+								"data-state": A,
 								"data-testid": "spectral-multiselect-trigger",
 								disabled: U,
-								id: M,
-								name: w,
-								ref: Ce,
+								id: N,
+								name: T,
+								ref: Se,
 								role: "combobox",
 								style: {
 									"--multiselect-border-radius": "0.5rem",
@@ -243,98 +244,98 @@ var pe = "h-4 w-4", me = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-s
 								},
 								type: "button",
 								...Fe,
-								...j,
-								children: [/* @__PURE__ */ g("div", {
+								...M,
+								children: [/* @__PURE__ */ _("div", {
 									className: "min-w-0 flex-1 overflow-hidden",
 									"data-testid": "spectral-multiselect-selected-items",
 									children: Ue()
-								}), /* @__PURE__ */ g("div", {
+								}), /* @__PURE__ */ _("div", {
 									className: "gap-2 ml-2 flex shrink-0 items-center",
-									children: /* @__PURE__ */ g(t, {
-										className: i("text-input-icon transition-transform duration-200", I && "rotate-180"),
+									children: /* @__PURE__ */ _(t, {
+										className: i("text-input-icon transition-transform duration-200", L && "rotate-180"),
 										size: 20
 									})
 								})]
 							})
 						}),
-						Ee && B.length > 0 && /* @__PURE__ */ g("button", {
+						Te && B.length > 0 && /* @__PURE__ */ _("button", {
 							"aria-label": "Clear all selections",
 							className: "right-10 text-input-icon hover:text-input-icon--hover rounded-sm absolute top-1/2 z-10 -translate-y-1/2 cursor-pointer focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50",
 							"data-testid": "spectral-multiselect-clear-all-button",
 							disabled: U,
 							onClick: (e) => {
-								e.stopPropagation(), Y(), document.getElementById(M)?.focus();
+								e.stopPropagation(), Y(), document.getElementById(N)?.focus();
 							},
 							type: "button",
-							children: /* @__PURE__ */ g(n, { size: 12 })
+							children: /* @__PURE__ */ _(n, { size: 12 })
 						}),
-						/* @__PURE__ */ g(ce, { children: /* @__PURE__ */ g(se, {
+						/* @__PURE__ */ _(ce, { children: /* @__PURE__ */ _(se, {
 							align: "start",
 							avoidCollisions: !0,
-							className: me(),
+							className: pe(),
 							collisionPadding: 10,
 							"data-dropdown-width-mode": W,
-							"data-dropdown-width-value": W === "custom" ? b : void 0,
+							"data-dropdown-width-value": W === "custom" ? x : void 0,
 							"data-testid": "spectral-multiselect-dropdown",
 							onOpenAutoFocus: (e) => {
-								e.preventDefault(), E && H.current?.focus();
+								e.preventDefault(), D && H.current?.focus();
 							},
 							side: "bottom",
 							sideOffset: 4,
-							ref: Ne,
+							ref: Me,
 							style: {
 								width: Le,
-								...b === "trigger" ? {} : Ie,
-								...Me
+								...x === "trigger" ? {} : Ie,
+								...je
 							},
-							children: /* @__PURE__ */ _("div", {
+							children: /* @__PURE__ */ v("div", {
 								className: "p-1",
-								children: [E && /* @__PURE__ */ _("div", {
+								children: [D && /* @__PURE__ */ v("div", {
 									className: "mb-2 relative",
-									children: [/* @__PURE__ */ g(r, { className: i(pe, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ g("input", {
+									children: [/* @__PURE__ */ _(r, { className: i(fe, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ _("input", {
 										"aria-label": "Search options",
 										className: "pl-9 pr-3 py-2 text-sm rounded-md focus-visible:ring-black w-full border border-input-border bg-input-bg focus-visible:border-input-border--focus focus-visible:ring-1 focus-visible:outline-none",
 										"data-testid": "spectral-multiselect-search-input",
 										onChange: He,
-										placeholder: we,
+										placeholder: Ce,
 										ref: H,
 										type: "text",
-										value: R
+										value: z
 									})]
-								}), /* @__PURE__ */ g("div", {
+								}), /* @__PURE__ */ _("div", {
 									className: "max-h-64 overflow-y-auto",
-									id: N,
+									id: P,
 									role: "listbox",
 									"aria-multiselectable": "true",
-									children: Pe ? /* @__PURE__ */ g(s, {
+									children: Pe ? /* @__PURE__ */ _(c, {
 										className: "text-sm",
-										message: be,
+										message: ye,
 										"data-testid": "spectral-multiselect-loading"
-									}) : G.length === 0 ? /* @__PURE__ */ g(a, {
+									}) : G.length === 0 ? /* @__PURE__ */ _(s, {
 										className: "text-sm",
 										"data-testid": "spectral-multiselect-empty-message",
-										message: ge
-									}) : /* @__PURE__ */ _(fe, { children: [
-										D && /* @__PURE__ */ _("div", {
+										message: he
+									}) : /* @__PURE__ */ v(g, { children: [
+										O && /* @__PURE__ */ v("div", {
 											className: "mb-1",
-											children: [/* @__PURE__ */ g("button", {
-												className: i("gap-3 px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus:outline-none", Ve && "bg-input-bg--hover"),
+											children: [/* @__PURE__ */ _("button", {
+												className: i("my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none", Ve && "bg-input-bg--hover"),
 												"data-testid": "spectral-multiselect-select-all-button",
 												onClick: J,
 												type: "button",
-												children: Re ? v : Te
-											}), /* @__PURE__ */ g("div", { className: "mx-3 my-1 h-px bg-input-border" })]
+												children: Re ? y : we
+											}), /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" })]
 										}),
-										K.ungrouped.length > 0 && /* @__PURE__ */ g("div", {
+										K.ungrouped.length > 0 && /* @__PURE__ */ _("div", {
 											className: "mb-1",
 											children: K.ungrouped.map((e, t) => $(e, t))
 										}),
-										Object.entries(K.groups).map(([e, t]) => /* @__PURE__ */ _("div", {
+										Object.entries(K.groups).map(([e, t]) => /* @__PURE__ */ v("div", {
 											className: "mb-1",
 											"data-testid": "spectral-multiselect-group",
 											children: [
-												(K.ungrouped.length > 0 || Object.keys(K.groups).indexOf(e) > 0) && /* @__PURE__ */ g("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-												/* @__PURE__ */ g("div", {
+												(K.ungrouped.length > 0 || Object.keys(K.groups).indexOf(e) > 0) && /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" }),
+												/* @__PURE__ */ _("div", {
 													"data-testid": "spectral-multiselect-group-name",
 													className: "px-3 py-1 text-xs font-semibold text-input-text-secondary tracking-wide uppercase",
 													children: e
@@ -349,19 +350,19 @@ var pe = "h-4 w-4", me = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-s
 					]
 				})
 			}),
-			k === "error" && x && /* @__PURE__ */ g(o, {
+			/* @__PURE__ */ _(a, {
 				dataTestId: "spectral-multiselect-error-message",
-				id: P,
-				message: x
+				id: F,
+				message: A === "error" ? ge : null
 			}),
-			k === "warning" && A && /* @__PURE__ */ g(c, {
+			/* @__PURE__ */ _(o, {
 				dataTestId: "spectral-multiselect-warning-message",
-				id: F,
-				message: A
+				id: I,
+				message: A === "warning" ? j : null
 			})
 		]
 	});
 };
-v.displayName = "MultiSelectBase";
+y.displayName = "MultiSelectBase";
 //#endregion
-export { v as MultiSelectBase };
+export { y as MultiSelectBase };

package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts

@@ -1,8 +1,6 @@
 import { AsChildProp } from '../primitives/slot';
 import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
 export interface RadioButtonGroupProps {
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
     asChild?: boolean;
     children: ReactNode;
     className?: string;
@@ -10,6 +8,8 @@ export interface RadioButtonGroupProps {
     isKeptActive?: boolean;
     onValueChange?: (value: string) => void;
     value?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 export interface RadioButtonGroupItemProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onSelect' | 'type'> {
     children: ReactNode;

package/dist/{RadioGroup-BsBK247l.js → RadioGroup-D-XjCU4Q.js}

@@ -3,7 +3,8 @@ import { a as e, d as t, l as n, r, t as i } from "./dist-DEkDg4Sk.js";
 import { t as a } from "./dist-CcsVPym2.js";
 import { t as o } from "./dist-D9FsQh8P.js";
 import { t as s } from "./twUtils-BpqlKSeB.js";
-import { ErrorMessage as c, WarningMessage as l, useFormFieldId as u } from "./utils/formFieldUtils.js";
+import { ErrorMessage as c, WarningMessage as l } from "./FormFieldMessage.js";
+import { useFormFieldId as u } from "./utils/formFieldUtils.js";
 import { Label as d } from "./Label.js";
 import { t as f } from "./dist-PfrTYHr_.js";
 import { t as p } from "./dist-s1uWaZYZ.js";
@@ -207,34 +208,38 @@ var J = w({
 		a,
 		x
 	]);
-	return /* @__PURE__ */ A(J.Provider, {
+	return /* @__PURE__ */ k(J.Provider, {
 		value: D,
-		children: [
-			/* @__PURE__ */ k(ue, {
-				className: s("flex w-full text-text-primary", p === "vertical" ? "gap-4 flex-col" : "gap-5 flex-row", _ === "unstyled" && "gap-2.5 w-fit", n),
-				"data-state": g,
-				"data-testid": "spectral-radio-group",
-				id: S,
-				"aria-invalid": g === "error" ? !0 : void 0,
-				"aria-describedby": [T, y].filter(Boolean).join(" ") || void 0,
-				disabled: D.groupDisabled,
-				name: o,
-				onValueChange: E,
-				ref: m,
-				value: x,
-				...b
-			}),
-			g === "error" && i && /* @__PURE__ */ k(c, {
-				dataTestId: "spectral-radio-group-error-message",
-				id: C,
-				message: i
-			}),
-			g === "warning" && v && /* @__PURE__ */ k(l, {
-				dataTestId: "spectral-radio-group-warning-message",
-				id: w,
-				message: v
-			})
-		]
+		children: /* @__PURE__ */ A("div", {
+			"data-slot": "radio-group-field",
+			className: "space-y-1.5 w-full",
+			children: [
+				/* @__PURE__ */ k(ue, {
+					className: s("flex w-full text-text-primary", p === "vertical" ? "gap-4 flex-col" : "gap-5 flex-row", _ === "unstyled" && "gap-2.5 w-fit", n),
+					"data-state": g,
+					"data-testid": "spectral-radio-group",
+					id: S,
+					"aria-invalid": g === "error" ? !0 : void 0,
+					"aria-describedby": [T, y].filter(Boolean).join(" ") || void 0,
+					disabled: D.groupDisabled,
+					name: o,
+					onValueChange: E,
+					ref: m,
+					value: x,
+					...b
+				}),
+				/* @__PURE__ */ k(c, {
+					dataTestId: "spectral-radio-group-error-message",
+					id: C,
+					message: g === "error" ? i : null
+				}),
+				/* @__PURE__ */ k(l, {
+					dataTestId: "spectral-radio-group-warning-message",
+					id: w,
+					message: g === "warning" ? v : null
+				})
+			]
+		})
 	});
 };
 X.displayName = "RadioGroup";

package/dist/RadioGroup.js

@@ -1,3 +1,3 @@
 'use client'
-import { n as e, r as t, t as n } from "./RadioGroup-BsBK247l.js";
+import { n as e, r as t, t as n } from "./RadioGroup-D-XjCU4Q.js";
 export { n as RadioGroup, e as RadioGroupItem, t as RadioGroupLabel };

package/dist/Select.js

@@ -4,30 +4,31 @@ import { CheckmarkIcon as e } from "./Icons/CheckmarkIcon.js";
 import { ChevronDownIcon as t } from "./Icons/ChevronDownIcon.js";
 import { LoaderIcon as n } from "./Icons/LoaderIcon.js";
 import { t as r } from "./twUtils-BpqlKSeB.js";
-import { EmptyState as i, ErrorMessage as a, LoadingState as o, WarningMessage as s, getAriaProps as c, getDropdownSurfaceClasses as l, getDropdownWidthStyles as ee, getErrorMessageId as te, getFormFieldCSSProperties as ne, getOptionClasses as re, getTriggerClasses as ie, groupOptions as ae, useFormFieldId as oe } from "./utils/formFieldUtils.js";
+import { ErrorMessage as i, WarningMessage as a } from "./FormFieldMessage.js";
+import { EmptyState as o, LoadingState as s, getAriaProps as c, getDropdownSurfaceClasses as l, getDropdownWidthStyles as ee, getErrorMessageId as te, getFormFieldCSSProperties as ne, getOptionClasses as re, getTriggerClasses as ie, groupOptions as ae, useFormFieldId as oe } from "./utils/formFieldUtils.js";
 import { Label as u } from "./Label.js";
-import { C as se, S as ce, _ as le, b as ue, d, f, g as de, h as fe, m as pe, p as me, u as he, v as ge, x as p, y as _e } from "./select-oAOoVl5g.js";
+import { C as se, S as ce, _ as le, b as d, d as f, f as ue, g as de, h as fe, m as pe, p as me, u as he, v as ge, x as p, y as _e } from "./select-DFE8xm1L.js";
 import { useAutoDropdownHorizontalShift as ve } from "./utils/dropdownPositioning.js";
 import { useState as ye } from "react";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/Select/Select.tsx
 var _ = (_) => {
-	let v = "value" in _, { align: y = "start", alignOffset: b = 0, avoidCollisions: x = !0, className: S, collisionBoundary: C, collisionPadding: w = 10, defaultValue: T, dropdownWidth: E = "trigger", emptyMessage: D = "No options found", errorMessage: O, disabled: k, id: A, label: j, labelClassName: M, loadingMessage: N = "Loading…", name: P, onChange: be, onValueChange: xe, options: F = [], placeholder: Se = "Select an option", position: I = "popper", ref: L, required: R, side: Ce = "bottom", sideOffset: we = 4, state: z = "default", value: B, warningMessage: V, "aria-label": Te, "aria-describedby": Ee, ...De } = _, H = v ? B ?? "" : B, [U, Oe] = ye(!1), { dropdownShiftStyle: ke, setDropdownElement: Ae } = ve(U), W = oe(A, P), G = `${W}-listbox`, K = te(W), q = `${W}-warning`, je = z === "error" && O ? K : z === "warning" && V ? q : void 0, { dropdownWidthMode: J, dropdownWidthStyle: Me, resolvedDropdownWidth: Y } = ee({
+	let v = "value" in _, { align: y = "start", alignOffset: b = 0, avoidCollisions: x = !0, className: S, collisionBoundary: C, collisionPadding: w = 10, defaultValue: T, dropdownWidth: E = "trigger", emptyMessage: D = "No options found", errorMessage: O, disabled: k, id: A, label: j, labelClassName: M, loadingMessage: N = "Loading…", name: P, onChange: F, onValueChange: be, options: I = [], placeholder: xe = "Select an option", position: L = "popper", ref: Se, required: R, side: Ce = "bottom", sideOffset: we = 4, state: z = "default", value: B, warningMessage: V, "aria-label": Te, "aria-describedby": Ee, ...De } = _, H = v ? B ?? "" : B, [U, Oe] = ye(!1), { dropdownShiftStyle: ke, setDropdownElement: Ae } = ve(U), W = oe(A, P), G = `${W}-listbox`, K = te(W), q = `${W}-warning`, je = z === "error" && O ? K : z === "warning" && V ? q : void 0, { dropdownWidthMode: J, dropdownWidthStyle: Me, resolvedDropdownWidth: Y } = ee({
 		dropdownWidth: E,
 		triggerWidth: "var(--radix-select-trigger-width)"
 	}), Ne = {
 		"--spectral-select-content-width": Y,
-		...I === "item-aligned" ? { width: Y } : {},
+		...L === "item-aligned" ? { width: Y } : {},
 		...Me,
 		...ke
-	}, X = !!k, Z = z === "loading", Pe = z === "error", Fe = c(z, Ee, R, je), { groups: Q, ungrouped: $ } = ae(F), Ie = (e) => {
-		be?.(e), xe?.(e);
+	}, X = !!k, Z = z === "loading", Pe = z === "error", Fe = c(z, Ee, R, je), { groups: Q, ungrouped: $ } = ae(I), Ie = (e) => {
+		F?.(e), be?.(e);
 	}, Le = () => {
-		if (Z) return /* @__PURE__ */ h(o, {
+		if (Z) return /* @__PURE__ */ h(s, {
 			"data-testid": "spectral-select-loading",
 			message: N
 		});
-		if (F.length === 0) return /* @__PURE__ */ h(i, {
+		if (I.length === 0) return /* @__PURE__ */ h(o, {
 			"data-testid": "spectral-select-empty",
 			message: D
 		});
@@ -55,7 +56,7 @@ var _ = (_) => {
 		return /* @__PURE__ */ g(m, { children: [$.length > 0 && /* @__PURE__ */ g(m, { children: [$.map(t), Object.keys(Q).length > 0 && /* @__PURE__ */ h(p, {
 			className: "-mx-1 my-1 h-px bg-border-secondary",
 			"data-testid": "spectral-select-separator"
-		})] }), Object.entries(Q).map(([e, n], i) => /* @__PURE__ */ g(f, {
+		})] }), Object.entries(Q).map(([e, n], i) => /* @__PURE__ */ g(ue, {
 			"data-testid": "spectral-select-group",
 			children: [
 				i > 0 && /* @__PURE__ */ h(p, {
@@ -100,7 +101,7 @@ var _ = (_) => {
 					"data-state": z,
 					"data-testid": "spectral-select-trigger",
 					id: W,
-					ref: L,
+					ref: Se,
 					role: "combobox",
 					style: ne(),
 					...Fe,
@@ -111,7 +112,7 @@ var _ = (_) => {
 						disabled: X,
 						children: [/* @__PURE__ */ h(he, {
 							"data-testid": "spectral-select-value",
-							placeholder: Se
+							placeholder: xe
 						}), /* @__PURE__ */ h(me, {
 							asChild: !0,
 							children: /* @__PURE__ */ h("div", {
@@ -123,11 +124,11 @@ var _ = (_) => {
 							})
 						})]
 					})
-				}), /* @__PURE__ */ h(le, { children: /* @__PURE__ */ g(d, {
+				}), /* @__PURE__ */ h(le, { children: /* @__PURE__ */ g(f, {
 					align: y,
 					alignOffset: b,
 					avoidCollisions: x,
-					className: r("relative z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", l(), "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", "max-h-[min(var(--radix-select-content-available-height),300px)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", I === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
+					className: r("relative z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", l(), "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", "max-h-[min(var(--radix-select-content-available-height),300px)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "min-w-32 origin-(--radix-select-content-transform-origin) overflow-hidden", L === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
 					collisionBoundary: C,
 					collisionPadding: w,
 					"data-dropdown-width-mode": J,
@@ -135,13 +136,13 @@ var _ = (_) => {
 					id: G,
 					"data-slot": "select-content",
 					"data-testid": "spectral-select-content",
-					position: I,
+					position: L,
 					ref: Ae,
 					side: Ce,
 					sideOffset: we,
 					style: Ne,
 					children: [
-						/* @__PURE__ */ h(ue, {
+						/* @__PURE__ */ h(d, {
 							className: "py-1 flex cursor-default items-center justify-center",
 							"data-testid": "spectral-select-scroll-up-button",
 							children: /* @__PURE__ */ h(t, {
@@ -153,7 +154,7 @@ var _ = (_) => {
 						/* @__PURE__ */ h(se, {
 							asChild: !0,
 							children: /* @__PURE__ */ h("div", {
-								className: r("p-1", I === "popper" && (E === "trigger" ? "scroll-my-1 h-(--radix-select-trigger-height) w-(--spectral-select-content-width) min-w-(--spectral-select-content-width)" : "scroll-my-1 h-(--radix-select-trigger-height)")),
+								className: r("p-1 overflow-x-hidden overflow-y-auto", L === "popper" && (E === "trigger" ? "scroll-my-1 h-(--radix-select-trigger-height) w-(--spectral-select-content-width) min-w-(--spectral-select-content-width)" : "scroll-my-1 h-(--radix-select-trigger-height)")),
 								"data-testid": "spectral-select-items",
 								children: Le()
 							})
@@ -169,15 +170,15 @@ var _ = (_) => {
 					]
 				}) })]
 			}),
-			Pe && O && /* @__PURE__ */ h(a, {
+			/* @__PURE__ */ h(i, {
 				dataTestId: "spectral-select-error-message",
 				id: K,
-				message: O
+				message: Pe ? O ?? null : null
 			}),
-			z === "warning" && V && /* @__PURE__ */ h(s, {
+			/* @__PURE__ */ h(a, {
 				dataTestId: "spectral-select-warning-message",
 				id: q,
-				message: V
+				message: z === "warning" ? V ?? null : null
 			})
 		]
 	});