@studiolxd/brand 49.28.0 → 51.0.0

package/dist/async-multi-select.js

@@ -1,198 +1,3 @@
 'use client';
-import './async-multi-select.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { Spinner as n } from "./spinner.js";
-import { n as r } from "./_shared/portal-container.js";
-import { forwardRef as i, useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Popover as f } from "@base-ui/react/popover";
-//#region src/stories/atoms/AsyncMultiSelect/AsyncMultiSelect.tsx
-function ee(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-var p = i(function({ onSearch: i, value: p, defaultValue: te = [], onValueChange: ne, selectedOptions: m, placeholder: h, disabled: g, readOnly: _, size: v = "md", debounceMs: re = 300, id: ie, name: y, error: b = !1, required: x, onBlur: S, className: ae, "aria-label": C, "aria-describedby": oe, removeLabel: se, emptyMessage: ce, loadingLabel: w, container: T }, E) {
-	let D = e("asyncMultiSelect"), O = r(T), [k, A] = l(!1), [j, M] = l(""), [N, P] = l(!1), [F, I] = l([]), [L, R] = l(!1), [z, B] = l(-1), [V, H] = l(te), [U, W] = l([]), G = c(null), K = c(0), q = c(null), J = c(null), Y = s(), le = s(), X = p === void 0 ? V : p, ue = X.map((e) => m?.find((t) => t.value === e) ?? U.find((t) => t.value === e) ?? {
-		value: e,
-		label: e
-	}), Z = (e) => `${le}-opt-${e}`, Q = a(async (e) => {
-		let t = ++K.current;
-		P(!0), R(!1);
-		try {
-			let n = await i(e);
-			if (t !== K.current) return;
-			I(n), B(-1);
-		} catch {
-			if (t !== K.current) return;
-			I([]), B(-1);
-		} finally {
-			t === K.current && (P(!1), R(!0));
-		}
-	}, [i]);
-	o(() => () => {
-		K.current += 1, G.current && clearTimeout(G.current);
-	}, []);
-	function de(e) {
-		let t = e.target.value;
-		M(t), k || A(!0), G.current && clearTimeout(G.current), G.current = setTimeout(() => void Q(t), re);
-	}
-	function fe(e) {
-		g || _ || k || (e.preventDefault(), q.current?.focus(), B(-1), M(""), I([]), R(!1), A(!0), Q(""));
-	}
-	function $(e, t) {
-		let n = X.includes(e) ? X.filter((t) => t !== e) : [...X, e];
-		t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]), p === void 0 && H(n), ne?.(n);
-	}
-	function pe(e) {
-		if (e.key === "ArrowDown") e.preventDefault(), k ? B((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Q(j));
-		else if (e.key === "ArrowUp") e.preventDefault(), B((e) => Math.max(e - 1, -1));
-		else if (e.key === "Enter" && z >= 0 && F[z]) e.preventDefault(), $(F[z].value, F[z]), q.current?.focus();
-		else if (e.key === "Escape") A(!1), M(""), B(-1);
-		else if (e.key === "Tab") A(!1), B(-1);
-		else if (e.key === "Backspace" && j === "" && X.length > 0) {
-			let e = X[X.length - 1];
-			$(e);
-		}
-	}
-	function me(e, t) {
-		if (!e) {
-			if (t.reason === "outside-press") {
-				let e = t.event?.target;
-				if (e instanceof Node && J.current?.contains(e)) return;
-			}
-			A(!1), M(""), B(-1);
-		}
-	}
-	let he = [
-		"async-multi-select",
-		v === "md" ? "" : `async-multi-select--${v}`,
-		g ? "async-multi-select--disabled" : "",
-		k ? "async-multi-select--open" : "",
-		b ? "async-multi-select--error" : "",
-		ae ?? ""
-	].filter(Boolean).join(" "), ge = ["async-multi-select__content", v === "md" ? "" : `async-multi-select__content--${v}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ d(f.Root, {
-		open: k,
-		onOpenChange: me,
-		children: [/* @__PURE__ */ d("div", {
-			ref: J,
-			className: he,
-			"data-popup-open": k || void 0,
-			children: [/* @__PURE__ */ d("div", {
-				className: "async-multi-select__input-area",
-				children: [
-					ue.map((e) => /* @__PURE__ */ d("span", {
-						className: "async-multi-select__pill",
-						children: [/* @__PURE__ */ u("span", {
-							className: "async-multi-select__pill-label",
-							children: e.label
-						}), !g && !_ && /* @__PURE__ */ u("button", {
-							type: "button",
-							className: "async-multi-select__pill-remove",
-							"aria-label": D("remove", se)(e.label),
-							tabIndex: -1,
-							onMouseDown: (t) => {
-								t.preventDefault(), $(e.value);
-							},
-							children: /* @__PURE__ */ u(t, {
-								name: "close",
-								size: "xs"
-							})
-						})]
-					}, e.value)),
-					/* @__PURE__ */ u("input", {
-						ref: (e) => {
-							q.current = e, ee(E, e);
-						},
-						id: ie,
-						type: "text",
-						className: "async-multi-select__input",
-						value: j,
-						onChange: de,
-						onPointerDown: fe,
-						onKeyDown: pe,
-						placeholder: X.length === 0 ? D("placeholder", h) : void 0,
-						disabled: g,
-						readOnly: _,
-						"aria-label": C,
-						"aria-describedby": oe,
-						"aria-invalid": b || void 0,
-						"aria-required": x || void 0,
-						"aria-expanded": k,
-						"aria-haspopup": "listbox",
-						"aria-controls": k ? Y : void 0,
-						"aria-activedescendant": z >= 0 ? Z(z) : void 0,
-						autoComplete: "off",
-						role: "combobox",
-						"aria-autocomplete": "list",
-						onBlur: S
-					}),
-					y && X.map((e) => /* @__PURE__ */ u("input", {
-						type: "hidden",
-						name: y,
-						value: e
-					}, e))
-				]
-			}), N && /* @__PURE__ */ u(n, {
-				size: "sm",
-				"aria-hidden": !0
-			})]
-		}), /* @__PURE__ */ u(f.Portal, {
-			container: O,
-			children: /* @__PURE__ */ u(f.Positioner, {
-				className: "async-multi-select__positioner",
-				anchor: J,
-				align: "start",
-				sideOffset: -1,
-				children: /* @__PURE__ */ u(f.Popup, {
-					className: ge,
-					initialFocus: !1,
-					finalFocus: !1,
-					children: /* @__PURE__ */ d("div", {
-						role: "listbox",
-						"aria-multiselectable": "true",
-						"aria-label": C ?? D("placeholder", h),
-						id: Y,
-						children: [
-							N && /* @__PURE__ */ u("div", {
-								className: "async-multi-select__loading",
-								children: /* @__PURE__ */ u(n, {
-									size: "sm",
-									label: D("loading", w)
-								})
-							}),
-							!N && L && F.length === 0 && /* @__PURE__ */ u("div", {
-								className: "async-multi-select__empty",
-								children: D("empty", ce)
-							}),
-							!N && F.map((e, t) => {
-								let n = X.includes(e.value), r = z === t;
-								return /* @__PURE__ */ d("div", {
-									id: Z(t),
-									role: "option",
-									"aria-selected": n,
-									className: [
-										"async-multi-select__item",
-										n ? "async-multi-select__item--selected" : "",
-										r ? "async-multi-select__item--active" : ""
-									].filter(Boolean).join(" "),
-									onPointerDown: (e) => e.preventDefault(),
-									onClick: () => {
-										$(e.value, e), q.current?.focus();
-									},
-									children: [/* @__PURE__ */ u("span", {
-										className: "async-multi-select__item-check",
-										"aria-hidden": "true",
-										children: /* @__PURE__ */ u("span", { className: "async-multi-select__item-check-mark" })
-									}), /* @__PURE__ */ u("span", { children: e.label })]
-								}, e.value);
-							})
-						]
-					})
-				})
-			})
-		})]
-	});
-});
-//#endregion
-export { p as AsyncMultiSelect };
+import { t as e } from "./_shared/asyncmultiselect.js";
+export { e as AsyncMultiSelect };

package/dist/async-select-field.js

@@ -1,57 +1,52 @@
 'use client';
 import './async-select-field.css';
-import { AsyncSelect as e } from "./async-select.js";
+import { t as e } from "./_shared/asyncselect.js";
 import { n as t } from "./_shared/form-size.js";
-import { ErrorText as n } from "./error-text.js";
-import { Label as r } from "./label.js";
-import { n as i } from "./_shared/field-labels.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { n } from "./_shared/field-optional.js";
+import { n as r } from "./_shared/field-labels.js";
+import { a as i, n as a } from "./_shared/fieldshell.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/AsyncSelectField/AsyncSelectField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, onSearch: d, value: f, onValueChange: p, selectedOption: m, placeholder: h, name: g, disabled: _, readOnly: v, size: y, debounceMs: b, required: x, error: S = !1, errorMessage: C, helperText: w, className: T, emptyMessage: E, loadingLabel: D, clearLabel: O, container: k, onBlur: A }, j) {
-	let M = i(u), N = t(y), P = o(), F = a ?? P, I = C ? `${F}-error` : void 0, L = w ? `${F}-helper` : void 0, R = [I, L].filter(Boolean).join(" ") || void 0, z = S || !!C;
-	return /* @__PURE__ */ c("div", {
-		className: ["async-select-field", T].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(r, {
-				htmlFor: F,
-				hidden: M,
-				size: N,
-				children: l
-			}),
-			/* @__PURE__ */ s(e, {
-				ref: j,
-				id: F,
-				name: g,
-				onSearch: d,
-				value: f,
-				onValueChange: p,
-				selectedOption: m,
-				placeholder: h,
-				disabled: _,
-				readOnly: v,
-				size: N,
-				debounceMs: b,
-				required: x,
-				error: z,
-				emptyMessage: E,
-				loadingLabel: D,
-				clearLabel: O,
-				container: k,
-				"aria-describedby": R,
-				onBlur: A
-			}),
-			C && /* @__PURE__ */ s(n, {
-				id: I,
-				children: C
-			}),
-			w && /* @__PURE__ */ s("span", {
-				id: L,
-				className: "async-select-field__helper",
-				children: w
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, onSearch: f, value: p, onValueChange: m, selectedOption: h, placeholder: g, name: _, disabled: v, readOnly: y, size: b, debounceMs: x, required: S, error: C = !1, errorMessage: w, helperText: T, className: E, emptyMessage: D, loadingLabel: O, clearLabel: k, container: A, onBlur: j }, M) {
+	let N = r(d), P = t(b), F = n(l, S), I = i({
+		id: o,
+		error: C,
+		errorMessage: w,
+		helperText: T
+	}), { id: L } = I;
+	return /* @__PURE__ */ s(a, {
+		field: I,
+		block: "async-select-field",
+		className: E,
+		label: c,
+		optional: F,
+		optionalLabel: u,
+		labelHidden: N,
+		size: P,
+		children: /* @__PURE__ */ s(e, {
+			ref: M,
+			id: L,
+			name: _,
+			onSearch: f,
+			value: p,
+			onValueChange: m,
+			selectedOption: h,
+			placeholder: g,
+			disabled: v,
+			readOnly: y,
+			size: P,
+			debounceMs: x,
+			required: S,
+			error: I.hasError,
+			emptyMessage: D,
+			loadingLabel: O,
+			clearLabel: k,
+			container: A,
+			"aria-describedby": I.describedBy,
+			onBlur: j
+		})
 	});
 });
 //#endregion
-export { l as AsyncSelectField };
+export { c as AsyncSelectField };

package/dist/async-select.js

@@ -1,174 +1,3 @@
 'use client';
-import './async-select.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { Spinner as n } from "./spinner.js";
-import { n as r } from "./_shared/portal-container.js";
-import { forwardRef as i, useCallback as ee, useEffect as a, useId as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Popover as d } from "@base-ui/react/popover";
-//#region src/stories/atoms/AsyncSelect/AsyncSelect.tsx
-function f(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-var p = i(function({ onSearch: i, value: p, onValueChange: m, selectedOption: h, placeholder: g, disabled: _, readOnly: v, size: y = "md", debounceMs: b = 300, id: x, name: S, error: C = !1, required: te, onBlur: ne, className: w, "aria-label": T, "aria-describedby": re, emptyMessage: E, loadingLabel: D, clearLabel: ie, container: ae }, oe) {
-	let O = e("asyncSelect"), se = r(ae), [k, A] = c(!1), [j, M] = c(""), [N, P] = c(!1), [F, I] = c([]), [ce, L] = c(!1), [R, z] = c(-1), [B, V] = c(null), [H, U] = c(null), W = s(null), G = s(0), K = s(null), q = s(null), J = o(), le = o(), Y = p === void 0 ? B : p, ue = h === void 0 ? H : h, X = (e) => `${le}-opt-${e}`, Z = ee(async (e) => {
-		let t = ++G.current;
-		P(!0), L(!1);
-		try {
-			let n = await i(e);
-			if (t !== G.current) return;
-			I(n), z(-1);
-		} catch {
-			if (t !== G.current) return;
-			I([]), z(-1);
-		} finally {
-			t === G.current && (P(!1), L(!0));
-		}
-	}, [i]);
-	a(() => () => {
-		G.current += 1, W.current && clearTimeout(W.current);
-	}, []);
-	function de(e) {
-		let t = e.target.value;
-		M(t), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(t), b);
-	}
-	function fe(e) {
-		_ || v || k || (e.preventDefault(), K.current?.focus(), z(-1), M(""), I([]), L(!1), A(!0), Z(""));
-	}
-	function Q(e) {
-		p === void 0 && (V(e.value), U(e)), m?.(e.value, e), A(!1), z(-1), M("");
-	}
-	function $() {
-		p === void 0 && (V(null), U(null)), m?.(null, null), M(""), I([]), L(!1), K.current?.focus();
-	}
-	function pe(e) {
-		e.stopPropagation(), $();
-	}
-	function me(e) {
-		e.key === "ArrowDown" ? (e.preventDefault(), k ? z((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Z(j))) : e.key === "ArrowUp" ? (e.preventDefault(), z((e) => Math.max(e - 1, -1))) : e.key === "Enter" && R >= 0 && F[R] ? (e.preventDefault(), Q(F[R])) : e.key === "Escape" ? (A(!1), M(""), z(-1)) : e.key === "Tab" ? (A(!1), z(-1)) : (e.key === "Backspace" || e.key === "Delete") && j === "" && Y && !_ && !v ? (e.preventDefault(), $()) : !k && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), M(e.key), A(!0), I([]), L(!1), W.current && clearTimeout(W.current), W.current = setTimeout(() => void Z(e.key), b));
-	}
-	function he(e, t) {
-		if (!e) {
-			if (t.reason === "outside-press") {
-				let e = t.event?.target;
-				if (e instanceof Node && q.current?.contains(e)) return;
-			}
-			A(!1), M(""), z(-1);
-		}
-	}
-	let ge = k ? j : ue?.label ?? "", _e = [
-		"async-select",
-		y === "md" ? "" : `async-select--${y}`,
-		_ ? "async-select--disabled" : "",
-		C ? "async-select--error" : "",
-		w ?? ""
-	].filter(Boolean).join(" "), ve = ["async-select__content", y === "md" ? "" : `async-select__content--${y}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ u(d.Root, {
-		open: k,
-		onOpenChange: he,
-		children: [/* @__PURE__ */ u("div", {
-			ref: q,
-			className: _e,
-			"data-popup-open": k || void 0,
-			children: [
-				/* @__PURE__ */ l("input", {
-					ref: (e) => {
-						K.current = e, f(oe, e);
-					},
-					id: x,
-					type: "text",
-					className: "async-select__input",
-					value: ge,
-					onChange: de,
-					onPointerDown: fe,
-					onKeyDown: me,
-					placeholder: O("placeholder", g),
-					disabled: _,
-					readOnly: v,
-					"aria-label": T,
-					"aria-describedby": re,
-					"aria-invalid": C || void 0,
-					"aria-required": te || void 0,
-					"aria-expanded": k,
-					"aria-haspopup": "listbox",
-					"aria-controls": k ? J : void 0,
-					"aria-activedescendant": R >= 0 ? X(R) : void 0,
-					autoComplete: "off",
-					role: "combobox",
-					"aria-autocomplete": "list",
-					onBlur: ne
-				}),
-				S && /* @__PURE__ */ l("input", {
-					type: "hidden",
-					name: S,
-					value: Y ?? ""
-				}),
-				N && /* @__PURE__ */ l(n, {
-					size: "sm",
-					"aria-hidden": !0
-				}),
-				!N && Y && !_ && !v && /* @__PURE__ */ l("button", {
-					type: "button",
-					className: "async-select__clear",
-					"aria-label": O("clear", ie),
-					tabIndex: -1,
-					onMouseDown: pe,
-					children: /* @__PURE__ */ l(t, {
-						name: "close",
-						size: "xs"
-					})
-				})
-			]
-		}), /* @__PURE__ */ l(d.Portal, {
-			container: se,
-			children: /* @__PURE__ */ l(d.Positioner, {
-				className: "async-select__positioner",
-				anchor: q,
-				align: "start",
-				sideOffset: -1,
-				children: /* @__PURE__ */ l(d.Popup, {
-					className: ve,
-					initialFocus: !1,
-					finalFocus: !1,
-					children: /* @__PURE__ */ u("div", {
-						role: "listbox",
-						"aria-label": T ?? O("placeholder", g),
-						id: J,
-						children: [
-							N && /* @__PURE__ */ l("div", {
-								className: "async-select__loading",
-								children: /* @__PURE__ */ l(n, {
-									size: "sm",
-									label: O("loading", D)
-								})
-							}),
-							!N && ce && F.length === 0 && /* @__PURE__ */ l("div", {
-								className: "async-select__empty",
-								children: O("empty", E)
-							}),
-							!N && F.map((e, t) => {
-								let n = e.value === Y, r = R === t;
-								return /* @__PURE__ */ l("div", {
-									id: X(t),
-									role: "option",
-									"aria-selected": n,
-									className: [
-										"async-select__item",
-										n ? "async-select__item--selected" : "",
-										r ? "async-select__item--active" : ""
-									].filter(Boolean).join(" "),
-									onPointerDown: (e) => e.preventDefault(),
-									onClick: () => Q(e),
-									children: e.label
-								}, e.value);
-							})
-						]
-					})
-				})
-			})
-		})]
-	});
-});
-//#endregion
-export { p as AsyncSelect };
+import { t as e } from "./_shared/asyncselect.js";
+export { e as AsyncSelect };

package/dist/asyncmultiselect.css

@@ -0,0 +1 @@
+.async-multi-select{align-items:center;gap:var(--async-multi-select-content-gap);min-block-size:var(--async-multi-select-height);padding-block:0;padding-inline:var(--async-multi-select-padding-inline);font-family:var(--async-multi-select-font-family);font-size:var(--async-multi-select-font-size);line-height:var(--async-multi-select-line-height);font-weight:var(--async-multi-select-font-weight);color:var(--async-multi-select-color);background-color:var(--async-multi-select-bg);border-width:var(--async-multi-select-border-width);border-style:var(--async-multi-select-border-style);border-color:var(--async-multi-select-border-color);border-radius:var(--async-multi-select-border-radius);box-sizing:border-box;inline-size:100%;display:inline-flex}.async-multi-select:focus-within{outline:var(--async-multi-select-focus-ring-width) solid var(--async-multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--async-multi-select-focus-ring-width) + var(--async-multi-select-border-width)))}.async-multi-select.async-multi-select--disabled{opacity:var(--async-multi-select-disabled-opacity);cursor:var(--async-multi-select-disabled-cursor);pointer-events:none}.async-multi-select__input-area{align-items:center;gap:var(--async-multi-select-selection-gap);flex-wrap:wrap;flex:1;min-inline-size:0;display:flex}.async-multi-select__pill{align-items:center;gap:var(--async-multi-select-pill-gap);padding-block:var(--async-multi-select-pill-padding-block);padding-inline:var(--async-multi-select-pill-padding-inline);background-color:var(--async-multi-select-pill-bg);color:var(--async-multi-select-pill-color);border-radius:var(--async-multi-select-pill-border-radius);font-size:var(--async-multi-select-pill-font-size);white-space:nowrap;line-height:1;display:inline-flex}.async-multi-select__pill:focus-visible{outline:var(--async-multi-select-focus-ring-width) solid var(--async-multi-select-focus-ring-color)}.async-multi-select__pill-label{line-height:1}.async-multi-select__pill-remove{all:unset;cursor:pointer;line-height:1;font-size:var(--async-multi-select-pill-font-size);opacity:var(--async-multi-select-pill-remove-opacity);justify-content:center;align-items:center;display:inline-flex}.async-multi-select__pill-remove:hover{opacity:var(--async-multi-select-pill-remove-hover-opacity)}.async-multi-select__input{all:unset;min-inline-size:var(--async-multi-select-input-min-width);cursor:text;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.async-multi-select__input::placeholder{color:var(--async-multi-select-placeholder-color)}.async-multi-select__input:disabled{cursor:var(--async-multi-select-disabled-cursor)}.async-multi-select__content{background-color:var(--async-multi-select-content-bg);border-width:var(--async-multi-select-border-width);border-style:var(--async-multi-select-border-style);border-color:var(--async-multi-select-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--async-multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.async-multi-select__content[data-side=bottom]{border-block-start:none}.async-multi-select__content[data-side=top]{border-block-end:none}.async-multi-select__loading{padding-block:var(--async-multi-select-loading-padding-block);padding-inline:var(--async-multi-select-loading-padding-inline);justify-content:center;align-items:center;display:flex}.async-multi-select__empty{padding-block:var(--async-multi-select-empty-padding-block);padding-inline:var(--async-multi-select-empty-padding-inline);font-size:var(--async-multi-select-empty-font-size);font-family:var(--async-multi-select-empty-font-family);color:var(--async-multi-select-empty-color)}.async-multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--async-multi-select-padding-inline);inline-size:100%;padding-block:var(--async-multi-select-item-padding-block);padding-inline:var(--async-multi-select-padding-inline);font-size:var(--async-multi-select-font-size);font-family:var(--async-multi-select-font-family);color:var(--async-multi-select-color);cursor:pointer;display:flex}.async-multi-select__item[data-highlighted],.async-multi-select__item:hover{background-color:var(--async-multi-select-item-highlighted-bg);color:var(--async-multi-select-item-highlighted-color)}.async-multi-select__item[data-selected]{font-weight:var(--async-multi-select-item-selected-font-weight)}.async-multi-select__content .async-multi-select__item+.async-multi-select__item,.async-multi-select__content[data-side=bottom] .async-multi-select__item:first-child{border-block-start:var(--async-multi-select-border-width) var(--async-multi-select-border-style) var(--async-multi-select-content-border-color)}.async-multi-select__content[data-side=top] .async-multi-select__item:last-child{border-block-end:var(--async-multi-select-border-width) var(--async-multi-select-border-style) var(--async-multi-select-content-border-color)}.async-multi-select__item-check{inline-size:var(--checkbox-size);block-size:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.async-multi-select__item[data-selected] .async-multi-select__item-check{background-color:currentColor}.async-multi-select__item-check-mark{inline-size:var(--checkbox-check-size);block-size:var(--checkbox-check-size);background-color:var(--async-multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.async-multi-select__item[data-selected] .async-multi-select__item-check-mark{transform:scale(1)}.async-multi-select__item:hover .async-multi-select__item-check-mark,.async-multi-select__item[data-highlighted] .async-multi-select__item-check-mark{background-color:var(--async-multi-select-item-highlighted-bg)}.async-multi-select.async-multi-select--sm{font-size:var(--async-multi-select-sm-font-size);--async-multi-select-height:var(--async-multi-select-sm-height);padding-inline:var(--async-multi-select-sm-padding-inline)}.async-multi-select__content--sm .async-multi-select__item{font-size:var(--async-multi-select-sm-font-size);padding-block:var(--async-multi-select-sm-item-padding-block)}.async-multi-select.async-multi-select--lg{font-size:var(--async-multi-select-lg-font-size);--async-multi-select-height:var(--async-multi-select-lg-height);padding-inline:var(--async-multi-select-lg-padding-inline)}.async-multi-select__content--lg .async-multi-select__item{font-size:var(--async-multi-select-lg-font-size);padding-block:var(--async-multi-select-lg-item-padding-block)}.async-multi-select__positioner{z-index:var(--async-multi-select-content-z-index)}.async-multi-select.async-multi-select--error{border-color:var(--async-multi-select-error-border-color)}

package/dist/asyncselect.css

@@ -0,0 +1 @@
+.async-select{align-items:center;gap:var(--async-select-content-gap);block-size:var(--async-select-height);padding-block:0;padding-inline:var(--async-select-padding-inline);font-family:var(--async-select-font-family);font-size:var(--async-select-font-size);line-height:var(--async-select-line-height);font-weight:var(--async-select-font-weight);color:var(--async-select-color);background-color:var(--async-select-bg);border-width:var(--async-select-border-width);border-style:var(--async-select-border-style);border-color:var(--async-select-border-color);border-radius:var(--async-select-border-radius);box-sizing:border-box;inline-size:100%;display:inline-flex}.async-select:focus-within{outline:var(--async-select-focus-ring-width) solid var(--async-select-focus-ring-color);outline-offset:calc(-1 * (var(--async-select-focus-ring-width) + var(--async-select-border-width)))}.async-select.async-select--disabled{opacity:var(--async-select-disabled-opacity);cursor:var(--async-select-disabled-cursor);pointer-events:none}.async-select__input{all:unset;cursor:text;min-inline-size:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.async-select__input::placeholder{color:var(--async-select-placeholder-color)}.async-select__input:disabled{cursor:var(--async-select-disabled-cursor)}.async-select__clear{all:unset;cursor:pointer;line-height:1;font-size:var(--async-select-font-size);opacity:var(--async-select-clear-opacity);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.async-select__clear:hover{opacity:var(--async-select-clear-hover-opacity)}.async-select__content{background-color:var(--async-select-content-bg);border-width:var(--async-select-border-width);border-style:var(--async-select-border-style);border-color:var(--async-select-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--async-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.async-select__content[data-side=bottom]{border-block-start:none}.async-select__content[data-side=top]{border-block-end:none}.async-select__loading{padding-block:var(--async-select-loading-padding-block);padding-inline:var(--async-select-loading-padding-inline);justify-content:center;align-items:center;display:flex}.async-select__empty{padding-block:var(--async-select-empty-padding-block);padding-inline:var(--async-select-empty-padding-inline);font-size:var(--async-select-empty-font-size);font-family:var(--async-select-empty-font-family);color:var(--async-select-empty-color)}.async-select__item{all:unset;box-sizing:border-box;inline-size:100%;padding-block:var(--async-select-item-padding-block);padding-inline:var(--async-select-padding-inline);font-size:var(--async-select-font-size);font-family:var(--async-select-font-family);color:var(--async-select-color);cursor:pointer;align-items:center;display:flex}.async-select__item[data-highlighted],.async-select__item:hover{background-color:var(--async-select-item-highlighted-bg);color:var(--async-select-item-highlighted-color)}.async-select__item[data-selected]{font-weight:var(--async-select-item-selected-font-weight)}.async-select__content .async-select__item+.async-select__item,.async-select__content[data-side=bottom] .async-select__item:first-child{border-block-start:var(--async-select-border-width) var(--async-select-border-style) var(--async-select-content-border-color)}.async-select__content[data-side=top] .async-select__item:last-child{border-block-end:var(--async-select-border-width) var(--async-select-border-style) var(--async-select-content-border-color)}.async-select.async-select--sm{font-size:var(--async-select-sm-font-size);--async-select-height:var(--async-select-sm-height);padding-inline:var(--async-select-sm-padding-inline)}.async-select__content--sm .async-select__item{font-size:var(--async-select-sm-font-size);padding-block:var(--async-select-sm-item-padding-block)}.async-select.async-select--lg{font-size:var(--async-select-lg-font-size);--async-select-height:var(--async-select-lg-height);padding-inline:var(--async-select-lg-padding-inline)}.async-select__content--lg .async-select__item{font-size:var(--async-select-lg-font-size);padding-block:var(--async-select-lg-item-padding-block)}.async-select__positioner{z-index:var(--async-select-content-z-index)}.async-select.async-select--error{border-color:var(--async-select-error-border-color)}

package/dist/autocomplete-field.js

@@ -2,57 +2,52 @@
 import './autocomplete-field.css';
 import { Autocomplete as e } from "./autocomplete.js";
 import { n as t } from "./_shared/form-size.js";
-import { ErrorText as n } from "./error-text.js";
-import { Label as r } from "./label.js";
-import { n as i } from "./_shared/field-labels.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { n } from "./_shared/field-optional.js";
+import { n as r } from "./_shared/field-labels.js";
+import { a as i, n as a } from "./_shared/fieldshell.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/AutocompleteField/AutocompleteField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f, onValueChange: p, onSelect: m, options: h, onSearch: g, debounceMs: _, minChars: v, placeholder: y, name: b, disabled: x, readOnly: S, size: C, required: w, maxLength: T, error: E = !1, errorMessage: D, helperText: O, className: k, container: A, onBlur: j }, M) {
-	let N = i(u), P = t(C), F = o(), I = a ?? F, L = D ? `${I}-error` : void 0, R = O ? `${I}-helper` : void 0, z = [L, R].filter(Boolean).join(" ") || void 0, B = E || !!D;
-	return /* @__PURE__ */ c("div", {
-		className: ["autocomplete-field", k].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(r, {
-				htmlFor: I,
-				hidden: N,
-				size: P,
-				children: l
-			}),
-			/* @__PURE__ */ s(e, {
-				ref: M,
-				id: I,
-				name: b,
-				value: d,
-				defaultValue: f,
-				onValueChange: p,
-				onSelect: m,
-				options: h,
-				onSearch: g,
-				debounceMs: _,
-				minChars: v,
-				placeholder: y,
-				disabled: x,
-				readOnly: S,
-				size: P,
-				required: w,
-				maxLength: T,
-				error: B,
-				container: A,
-				"aria-describedby": z,
-				onBlur: j
-			}),
-			D && /* @__PURE__ */ s(n, {
-				id: L,
-				children: D
-			}),
-			O && /* @__PURE__ */ s("span", {
-				id: R,
-				className: "autocomplete-field__helper",
-				children: O
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, value: f, defaultValue: p, onValueChange: m, onSelect: h, options: g, onSearch: _, debounceMs: v, minChars: y, placeholder: b, name: x, disabled: S, readOnly: C, size: w, required: T, maxLength: E, error: D = !1, errorMessage: O, helperText: k, className: A, container: j, onBlur: M }, N) {
+	let P = r(d), F = t(w), I = n(l, T), L = i({
+		id: o,
+		error: D,
+		errorMessage: O,
+		helperText: k
+	}), { id: R } = L;
+	return /* @__PURE__ */ s(a, {
+		field: L,
+		block: "autocomplete-field",
+		className: A,
+		label: c,
+		optional: I,
+		optionalLabel: u,
+		labelHidden: P,
+		size: F,
+		children: /* @__PURE__ */ s(e, {
+			ref: N,
+			id: R,
+			name: x,
+			value: f,
+			defaultValue: p,
+			onValueChange: m,
+			onSelect: h,
+			options: g,
+			onSearch: _,
+			debounceMs: v,
+			minChars: y,
+			placeholder: b,
+			disabled: S,
+			readOnly: C,
+			size: F,
+			required: T,
+			maxLength: E,
+			error: L.hasError,
+			container: j,
+			"aria-describedby": L.describedBy,
+			onBlur: M
+		})
 	});
 });
 //#endregion
-export { l as AutocompleteField };
+export { c as AutocompleteField };

package/dist/autocomplete.css

@@ -1 +1 @@
-.autocomplete{align-items:center;gap:var(--autocomplete-content-gap);block-size:var(--autocomplete-height);padding-block:0;padding-inline:var(--autocomplete-padding-inline);font-family:var(--autocomplete-font-family);font-size:var(--autocomplete-font-size);line-height:var(--autocomplete-line-height);font-weight:var(--autocomplete-font-weight);color:var(--autocomplete-color);background-color:var(--autocomplete-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-border-color);border-radius:var(--autocomplete-border-radius);box-sizing:border-box;width:100%;display:inline-flex}.autocomplete:focus-within{outline:var(--autocomplete-focus-ring-width) solid var(--autocomplete-focus-ring-color);outline-offset:calc(-1 * (var(--autocomplete-focus-ring-width) + var(--autocomplete-border-width)))}.autocomplete.autocomplete--disabled{opacity:.5;cursor:var(--autocomplete-disabled-cursor);pointer-events:none}.autocomplete__input{all:unset;cursor:text;min-width:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.autocomplete__input::placeholder{color:var(--autocomplete-placeholder-color)}.autocomplete__input:disabled{cursor:var(--autocomplete-disabled-cursor)}.autocomplete__content{background-color:var(--autocomplete-content-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-content-border-color);min-width:var(--anchor-width);max-height:var(--autocomplete-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.autocomplete__content[data-side=bottom]{border-top:none}.autocomplete__content[data-side=top]{border-bottom:none}.autocomplete__item{all:unset;box-sizing:border-box;width:100%;padding-block:var(--autocomplete-item-padding-block);padding-inline:var(--autocomplete-padding-inline);font-size:var(--autocomplete-font-size);font-family:var(--autocomplete-font-family);color:var(--autocomplete-color);cursor:pointer;align-items:center;display:flex}.autocomplete__item:focus-visible,.autocomplete__item:hover{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__item.autocomplete__item--selected{font-weight:var(--autocomplete-item-selected-font-weight)}.autocomplete__item.autocomplete__item--active{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__content .autocomplete__item+.autocomplete__item,.autocomplete__content[data-side=bottom] .autocomplete__item:first-child{border-top:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete__content[data-side=top] .autocomplete__item:last-child{border-bottom:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete.autocomplete--sm{font-size:var(--autocomplete-sm-font-size);--autocomplete-height:var(--autocomplete-sm-height);padding-inline:var(--autocomplete-sm-padding-inline)}.autocomplete__content--sm .autocomplete__item{font-size:var(--autocomplete-sm-font-size);padding-block:var(--autocomplete-sm-item-padding-block)}.autocomplete.autocomplete--lg{font-size:var(--autocomplete-lg-font-size);--autocomplete-height:var(--autocomplete-lg-height);padding-inline:var(--autocomplete-lg-padding-inline)}.autocomplete__content--lg .autocomplete__item{font-size:var(--autocomplete-lg-font-size);padding-block:var(--autocomplete-lg-item-padding-block)}.autocomplete__positioner{z-index:var(--autocomplete-content-z-index)}.autocomplete.autocomplete--error{border-color:var(--autocomplete-error-border-color)}
+.autocomplete{align-items:center;gap:var(--autocomplete-content-gap);block-size:var(--autocomplete-height);padding-block:0;padding-inline:var(--autocomplete-padding-inline);font-family:var(--autocomplete-font-family);font-size:var(--autocomplete-font-size);line-height:var(--autocomplete-line-height);font-weight:var(--autocomplete-font-weight);color:var(--autocomplete-color);background-color:var(--autocomplete-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-border-color);border-radius:var(--autocomplete-border-radius);box-sizing:border-box;inline-size:100%;display:inline-flex}.autocomplete:focus-within{outline:var(--autocomplete-focus-ring-width) solid var(--autocomplete-focus-ring-color);outline-offset:calc(-1 * (var(--autocomplete-focus-ring-width) + var(--autocomplete-border-width)))}.autocomplete.autocomplete--disabled{opacity:var(--autocomplete-disabled-opacity);cursor:var(--autocomplete-disabled-cursor);pointer-events:none}.autocomplete__input{all:unset;cursor:text;min-inline-size:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.autocomplete__input::placeholder{color:var(--autocomplete-placeholder-color)}.autocomplete__input:disabled{cursor:var(--autocomplete-disabled-cursor)}.autocomplete__content{background-color:var(--autocomplete-content-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-content-border-color);min-inline-size:var(--anchor-width);max-block-size:var(--autocomplete-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.autocomplete__content[data-side=bottom]{border-block-start:none}.autocomplete__content[data-side=top]{border-block-end:none}.autocomplete__item{all:unset;box-sizing:border-box;inline-size:100%;padding-block:var(--autocomplete-item-padding-block);padding-inline:var(--autocomplete-padding-inline);font-size:var(--autocomplete-font-size);font-family:var(--autocomplete-font-family);color:var(--autocomplete-color);cursor:pointer;align-items:center;display:flex}.autocomplete__item[data-highlighted],.autocomplete__item:hover{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__item.autocomplete__item--selected{font-weight:var(--autocomplete-item-selected-font-weight)}.autocomplete__content .autocomplete__item+.autocomplete__item,.autocomplete__content[data-side=bottom] .autocomplete__item:first-child{border-block-start:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete__content[data-side=top] .autocomplete__item:last-child{border-block-end:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete.autocomplete--sm{font-size:var(--autocomplete-sm-font-size);--autocomplete-height:var(--autocomplete-sm-height);padding-inline:var(--autocomplete-sm-padding-inline)}.autocomplete__content--sm .autocomplete__item{font-size:var(--autocomplete-sm-font-size);padding-block:var(--autocomplete-sm-item-padding-block)}.autocomplete.autocomplete--lg{font-size:var(--autocomplete-lg-font-size);--autocomplete-height:var(--autocomplete-lg-height);padding-inline:var(--autocomplete-lg-padding-inline)}.autocomplete__content--lg .autocomplete__item{font-size:var(--autocomplete-lg-font-size);padding-block:var(--autocomplete-lg-item-padding-block)}.autocomplete__positioner{z-index:var(--autocomplete-content-z-index)}.autocomplete.autocomplete--error{border-color:var(--autocomplete-error-border-color)}