@studiolxd/brand 50.0.0 → 51.0.1

package/dist/app-shell.js

@@ -1,6 +1,6 @@
 'use client';
 import './app-shell.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { SkipLink as t } from "./skip-link.js";
 import { t as n } from "./_shared/css-properties.js";
 import { TooltipProvider as r } from "./tooltip.js";
@@ -8,85 +8,85 @@ import { t as i } from "./_shared/media-query.js";
 import { n as a, t as o } from "./_shared/appshellcontext.js";
 import { useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region src/stories/sections/AppShell/AppShell.tsx
-var p = "(min-width: 1024px)";
-function m({ banner: a, header: m, sidebar: h, children: g, contentFlush: _ = !1, defaultSidebar: v = "open", sidebarState: y, onSidebarChange: b, defaultSidebarWidth: x, onSidebarWidthChange: S, skipLabel: C, className: w }) {
-	let T = e("appShell"), E = i(p), D = E ?? !0, [O, k] = u(v), [A, j] = u(!1), [M, N] = u(x), P = D ? y ?? O : A ? "open" : "closed", F = s((e) => {
-		D ? (k(e), b?.(e)) : j(e === "open");
-	}, [D, b]), I = s(() => F(P === "open" ? "closed" : "open"), [F, P]), L = s(() => F("closed"), [F]), R = s((e) => {
-		N(e), S?.(e);
-	}, [S]);
+//#region src/stories/messages/es/appShell.ts
+var p = { skipToContent: "Saltar al contenido principal" }, m = "(min-width: 1024px)";
+function h({ banner: a, header: h, sidebar: g, children: _, contentFlush: v = !1, defaultSidebar: y = "open", sidebarState: b, onSidebarChange: x, defaultSidebarWidth: S, onSidebarWidthChange: C, skipLabel: w, className: T }) {
+	let E = e("appShell", p), D = i(m), O = D ?? !0, [k, A] = u(y), [j, M] = u(!1), [N, P] = u(S), F = O ? b ?? k : j ? "open" : "closed", I = s((e) => {
+		O ? (A(e), x?.(e)) : M(e === "open");
+	}, [O, x]), L = s(() => I(F === "open" ? "closed" : "open"), [I, F]), R = s(() => I("closed"), [I]), z = s((e) => {
+		P(e), C?.(e);
+	}, [C]);
 	c(() => {
-		if (D || !A) return;
+		if (O || !j) return;
 		let e = (e) => {
-			e.key === "Escape" && j(!1);
+			e.key === "Escape" && M(!1);
 		};
 		document.addEventListener("keydown", e);
 		let t = document.body.style.overflow;
 		return document.body.style.overflow = "hidden", () => {
 			document.removeEventListener("keydown", e), document.body.style.overflow = t;
 		};
-	}, [D, A]);
-	let z = l(() => ({
-		sidebar: P,
-		setSidebar: F,
-		sidebarWidth: M ?? 0,
-		setSidebarWidth: R,
-		toggleSidebar: I,
-		closeSidebar: L,
-		isDesktop: D
+	}, [O, j]);
+	let B = l(() => ({
+		sidebar: F,
+		setSidebar: I,
+		sidebarWidth: N ?? 0,
+		setSidebarWidth: z,
+		toggleSidebar: L,
+		closeSidebar: R,
+		isDesktop: O
 	}), [
-		P,
 		F,
-		M,
-		R,
 		I,
+		N,
+		z,
 		L,
-		D
-	]), [B, V] = u(0), H = s((e) => {
+		R,
+		O
+	]), [V, H] = u(0), U = s((e) => {
 		if (!e) return;
-		let t = () => V(e.getBoundingClientRect().height);
+		let t = () => H(e.getBoundingClientRect().height);
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => {
-			n.disconnect(), V(0);
+			n.disconnect(), H(0);
 		};
-	}, []), U = n({
-		"--app-shell-sidebar-width": M ? `${M}px` : void 0,
-		"--app-shell-banner-height": a ? `${B}px` : void 0
-	}), W = !D && A;
+	}, []), W = n({
+		"--app-shell-sidebar-width": N ? `${N}px` : void 0,
+		"--app-shell-banner-height": a ? `${V}px` : void 0
+	}), G = !O && j;
 	return /* @__PURE__ */ d(o.Provider, {
-		value: z,
+		value: B,
 		children: /* @__PURE__ */ f(r, { children: [/* @__PURE__ */ d(t, {
 			href: "#main-content",
-			children: T("skipToContent", C)
+			children: E("skipToContent", w)
 		}), /* @__PURE__ */ f("div", {
-			ref: U,
-			className: ["app-shell", w].filter(Boolean).join(" "),
-			"data-sidebar": P,
-			"data-layout": E === null ? void 0 : D ? "column" : "drawer",
+			ref: W,
+			className: ["app-shell", T].filter(Boolean).join(" "),
+			"data-sidebar": F,
+			"data-layout": D === null ? void 0 : O ? "column" : "drawer",
 			children: [
 				a && /* @__PURE__ */ d("div", {
-					ref: H,
+					ref: U,
 					className: "app-shell__banner",
 					children: a
 				}),
-				m,
+				h,
 				/* @__PURE__ */ f("div", {
 					className: "app-shell__body",
 					children: [
-						h,
-						W && /* @__PURE__ */ d("div", {
+						g,
+						G && /* @__PURE__ */ d("div", {
 							className: "app-shell__backdrop",
-							onClick: L,
+							onClick: R,
 							"aria-hidden": "true"
 						}),
 						/* @__PURE__ */ d("main", {
 							id: "main-content",
 							tabIndex: -1,
-							className: _ ? "app-shell__content app-shell__content--flush" : "app-shell__content",
-							inert: W || void 0,
-							children: g
+							className: v ? "app-shell__content app-shell__content--flush" : "app-shell__content",
+							inert: G || void 0,
+							children: _
 						})
 					]
 				})
@@ -95,4 +95,4 @@ function m({ banner: a, header: m, sidebar: h, children: g, contentFlush: _ = !1
 	});
 }
 //#endregion
-export { m as AppShell, a as useAppShell };
+export { h as AppShell, a as useAppShell };

package/dist/async-multi-select-field.js

@@ -1,58 +1,53 @@
 'use client';
 import './async-multi-select-field.css';
-import { AsyncMultiSelect as e } from "./async-multi-select.js";
+import { t as e } from "./_shared/asyncmultiselect.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/AsyncMultiSelectField/AsyncMultiSelectField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, onSearch: d, value: f, defaultValue: p, onValueChange: m, selectedOptions: 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, removeLabel: O, loadingLabel: k, container: A, onBlur: j }, M) {
-	let N = i(u), P = t(b), F = o(), I = a ?? F, L = w ? `${I}-error` : void 0, R = T ? `${I}-helper` : void 0, z = [L, R].filter(Boolean).join(" ") || void 0, B = C || !!w;
-	return /* @__PURE__ */ c("div", {
-		className: ["async-multi-select-field", E].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(r, {
-				htmlFor: I,
-				hidden: N,
-				size: P,
-				children: l
-			}),
-			/* @__PURE__ */ s(e, {
-				ref: M,
-				id: I,
-				name: _,
-				onSearch: d,
-				value: f,
-				defaultValue: p,
-				onValueChange: m,
-				selectedOptions: h,
-				placeholder: g,
-				disabled: v,
-				readOnly: y,
-				size: P,
-				debounceMs: x,
-				required: S,
-				error: B,
-				emptyMessage: D,
-				removeLabel: O,
-				loadingLabel: k,
-				container: A,
-				"aria-describedby": z,
-				onBlur: j
-			}),
-			w && /* @__PURE__ */ s(n, {
-				id: L,
-				children: w
-			}),
-			T && /* @__PURE__ */ s("span", {
-				id: R,
-				className: "async-multi-select-field__helper",
-				children: T
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, onSearch: f, value: p, defaultValue: m, onValueChange: h, selectedOptions: g, placeholder: _, name: v, disabled: y, readOnly: b, size: x, debounceMs: S, required: C, error: w = !1, errorMessage: T, helperText: E, className: D, emptyMessage: O, removeLabel: k, loadingLabel: A, container: j, onBlur: M }, N) {
+	let P = r(d), F = t(x), I = n(l, C), L = i({
+		id: o,
+		error: w,
+		errorMessage: T,
+		helperText: E
+	}), { id: R } = L;
+	return /* @__PURE__ */ s(a, {
+		field: L,
+		block: "async-multi-select-field",
+		className: D,
+		label: c,
+		optional: I,
+		optionalLabel: u,
+		labelHidden: P,
+		size: F,
+		children: /* @__PURE__ */ s(e, {
+			ref: N,
+			id: R,
+			name: v,
+			onSearch: f,
+			value: p,
+			defaultValue: m,
+			onValueChange: h,
+			selectedOptions: g,
+			placeholder: _,
+			disabled: y,
+			readOnly: b,
+			size: F,
+			debounceMs: S,
+			required: C,
+			error: L.hasError,
+			emptyMessage: O,
+			removeLabel: k,
+			loadingLabel: A,
+			container: j,
+			"aria-describedby": L.describedBy,
+			onBlur: M
+		})
 	});
 });
 //#endregion
-export { l as AsyncMultiSelectField };
+export { c as AsyncMultiSelectField };

package/dist/async-multi-select.js

@@ -1,129 +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 { VisuallyHidden as n } from "./visually-hidden.js";
-import { Spinner as r } from "./spinner.js";
-import { t as i } from "./_shared/useasyncoptions.js";
-import { n as a } from "./_shared/portal-container.js";
-import { forwardRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Combobox as u } from "@base-ui/react/combobox";
-//#region src/stories/atoms/AsyncMultiSelect/AsyncMultiSelect.tsx
-var d = [], f = (e, t) => e.value === t.value, p = o(function({ onSearch: o, value: p, defaultValue: m = [], onValueChange: h, selectedOptions: g, placeholder: _, disabled: v, readOnly: y, size: b = "md", debounceMs: x = 300, id: S, name: C, error: w = !1, required: T, onBlur: E, className: D, "aria-label": O, "aria-describedby": k, removeLabel: A, emptyMessage: j, loadingLabel: M, container: N }, P) {
-	let F = e("asyncMultiSelect"), I = a(N), { results: L, loading: R, hasSearched: ee, search: z, schedule: B } = i(o, x), [V, H] = s(!1), [U, W] = s(""), [G, K] = s(m), [q, J] = s([]), Y = p === void 0 ? G : p, X = Y.map((e) => g?.find((t) => t.value === e) ?? q.find((t) => t.value === e) ?? {
-		value: e,
-		label: e
-	});
-	function Z(e) {
-		J((t) => {
-			let n = e.filter((e) => !t.some((t) => t.value === e.value));
-			return n.length ? [...t, ...n] : t;
-		});
-		let t = e.map((e) => e.value);
-		p === void 0 && K(t), h?.(t);
-	}
-	function Q(e, t) {
-		e !== V && (H(e), !(e && t.reason === "input-change") && (W(""), e && z("")));
-	}
-	function $(e) {
-		e.key === "Escape" && !V && e.preventBaseUIHandler?.();
-	}
-	let te = [
-		"async-multi-select",
-		b === "md" ? "" : `async-multi-select--${b}`,
-		v ? "async-multi-select--disabled" : "",
-		V ? "async-multi-select--open" : "",
-		w ? "async-multi-select--error" : "",
-		D ?? ""
-	].filter(Boolean).join(" "), ne = ["async-multi-select__content", b === "md" ? "" : `async-multi-select__content--${b}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ l(u.Root, {
-		multiple: !0,
-		items: R ? d : L,
-		filter: null,
-		value: X,
-		onValueChange: Z,
-		isItemEqualToValue: f,
-		inputValue: U,
-		onInputValueChange: (e, t) => {
-			t.reason === "input-change" && (W(e), B(e));
-		},
-		open: V,
-		onOpenChange: Q,
-		name: C,
-		disabled: v,
-		readOnly: y,
-		children: [/* @__PURE__ */ l(u.InputGroup, {
-			className: te,
-			children: [/* @__PURE__ */ l(u.Chips, {
-				className: "async-multi-select__input-area",
-				children: [X.map((e) => /* @__PURE__ */ l(u.Chip, {
-					className: "async-multi-select__pill",
-					children: [/* @__PURE__ */ c("span", {
-						className: "async-multi-select__pill-label",
-						children: e.label
-					}), !v && !y && /* @__PURE__ */ c(u.ChipRemove, {
-						className: "async-multi-select__pill-remove",
-						"aria-label": F("remove", A)(e.label),
-						children: /* @__PURE__ */ c(t, {
-							name: "close",
-							size: "xs"
-						})
-					})]
-				}, e.value)), /* @__PURE__ */ c(u.Input, {
-					ref: P,
-					id: S,
-					className: "async-multi-select__input",
-					onKeyDown: $,
-					placeholder: Y.length === 0 ? F("placeholder", _) : void 0,
-					"aria-label": O,
-					"aria-describedby": k,
-					"aria-invalid": w || void 0,
-					"aria-required": T || void 0,
-					onBlur: E
-				})]
-			}), R && /* @__PURE__ */ c(r, {
-				size: "sm",
-				"aria-hidden": !0
-			})]
-		}), /* @__PURE__ */ c(u.Portal, {
-			container: I,
-			children: /* @__PURE__ */ c(u.Positioner, {
-				className: "async-multi-select__positioner",
-				align: "start",
-				sideOffset: -1,
-				children: /* @__PURE__ */ l(u.Popup, {
-					className: ne,
-					"aria-busy": R || void 0,
-					children: [
-						/* @__PURE__ */ c(u.Status, { children: R && /* @__PURE__ */ l("div", {
-							className: "async-multi-select__loading",
-							children: [/* @__PURE__ */ c(r, {
-								size: "sm",
-								"aria-hidden": !0
-							}), /* @__PURE__ */ c(n, { children: F("loading", M) })]
-						}) }),
-						/* @__PURE__ */ c(u.Empty, { children: !R && ee && /* @__PURE__ */ c("div", {
-							className: "async-multi-select__empty",
-							children: F("empty", j)
-						}) }),
-						/* @__PURE__ */ c(u.List, {
-							"aria-label": O ?? F("placeholder", _),
-							children: (e) => /* @__PURE__ */ l(u.Item, {
-								value: e,
-								className: "async-multi-select__item",
-								children: [/* @__PURE__ */ c("span", {
-									className: "async-multi-select__item-check",
-									"aria-hidden": "true",
-									children: /* @__PURE__ */ c("span", { className: "async-multi-select__item-check-mark" })
-								}), /* @__PURE__ */ c("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,118 +1,3 @@
 'use client';
-import './async-select.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { VisuallyHidden as n } from "./visually-hidden.js";
-import { Spinner as r } from "./spinner.js";
-import { t as i } from "./_shared/useasyncoptions.js";
-import { n as a } from "./_shared/portal-container.js";
-import { forwardRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Combobox as u } from "@base-ui/react/combobox";
-//#region src/stories/atoms/AsyncSelect/AsyncSelect.tsx
-var d = [], f = (e, t) => e.value === t.value, p = o(function({ onSearch: o, 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: w, onBlur: T, className: E, "aria-label": D, "aria-describedby": O, emptyMessage: k, loadingLabel: A, clearLabel: j, container: M }, N) {
-	let P = e("asyncSelect"), F = a(M), { results: I, loading: L, hasSearched: R, search: z, schedule: B, clear: V } = i(o, b), [H, U] = s(!1), [W, G] = s(""), [K, q] = s(null), [J, Y] = s(null), X = p === void 0 ? K : p, Z = (h === void 0 ? J : h)?.label ?? "", Q = X ? {
-		value: X,
-		label: Z
-	} : null;
-	function $(e) {
-		p === void 0 && (q(e?.value ?? null), Y(e)), m?.(e?.value ?? null, e);
-	}
-	function ee() {
-		$(null), G(""), V();
-	}
-	function te(e, t) {
-		e !== H && (U(e), !(e && t.reason === "input-change") && (G(""), e && z("")));
-	}
-	function ne(e) {
-		_ || v || (e.key === "Escape" && !H ? e.preventBaseUIHandler?.() : (e.key === "Backspace" || e.key === "Delete") && W === "" && X ? (e.preventDefault(), e.preventBaseUIHandler?.(), ee()) : !H && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), e.preventBaseUIHandler?.(), U(!0), G(e.key), V(), B(e.key)));
-	}
-	let re = [
-		"async-select",
-		y === "md" ? "" : `async-select--${y}`,
-		_ ? "async-select--disabled" : "",
-		C ? "async-select--error" : "",
-		E ?? ""
-	].filter(Boolean).join(" "), ie = ["async-select__content", y === "md" ? "" : `async-select__content--${y}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ l(u.Root, {
-		items: L ? d : I,
-		filter: null,
-		value: Q,
-		onValueChange: (e) => {
-			$(e), G("");
-		},
-		isItemEqualToValue: f,
-		inputValue: H ? W : Z,
-		onInputValueChange: (e, t) => {
-			t.reason === "input-change" && (G(e), B(e));
-		},
-		open: H,
-		onOpenChange: te,
-		name: S,
-		disabled: _,
-		readOnly: v,
-		children: [/* @__PURE__ */ l(u.InputGroup, {
-			className: re,
-			children: [
-				/* @__PURE__ */ c(u.Input, {
-					ref: N,
-					id: x,
-					className: "async-select__input",
-					onKeyDown: ne,
-					placeholder: P("placeholder", g),
-					"aria-label": D,
-					"aria-describedby": O,
-					"aria-invalid": C || void 0,
-					"aria-required": w || void 0,
-					onBlur: T
-				}),
-				L && /* @__PURE__ */ c(r, {
-					size: "sm",
-					"aria-hidden": !0
-				}),
-				!L && !_ && !v && /* @__PURE__ */ c(u.Clear, {
-					className: "async-select__clear",
-					"aria-label": P("clear", j),
-					children: /* @__PURE__ */ c(t, {
-						name: "close",
-						size: "xs"
-					})
-				})
-			]
-		}), /* @__PURE__ */ c(u.Portal, {
-			container: F,
-			children: /* @__PURE__ */ c(u.Positioner, {
-				className: "async-select__positioner",
-				align: "start",
-				sideOffset: -1,
-				children: /* @__PURE__ */ l(u.Popup, {
-					className: ie,
-					"aria-busy": L || void 0,
-					children: [
-						/* @__PURE__ */ c(u.Status, { children: L && /* @__PURE__ */ l("div", {
-							className: "async-select__loading",
-							children: [/* @__PURE__ */ c(r, {
-								size: "sm",
-								"aria-hidden": !0
-							}), /* @__PURE__ */ c(n, { children: P("loading", A) })]
-						}) }),
-						/* @__PURE__ */ c(u.Empty, { children: !L && R && /* @__PURE__ */ c("div", {
-							className: "async-select__empty",
-							children: P("empty", k)
-						}) }),
-						/* @__PURE__ */ c(u.List, {
-							"aria-label": D ?? P("placeholder", g),
-							children: (e) => /* @__PURE__ */ c(u.Item, {
-								value: e,
-								className: "async-select__item",
-								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)}