@studiolxd/brand 41.1.0 → 42.0.0

package/dist/_types/molecules/SearchForm/SearchForm.d.ts

@@ -1,4 +1,17 @@
 import './SearchForm.css';
+/**
+ * Los tres textos que el buscador emite por su cuenta. Son cromo: el buscador
+ * de sitio se llama igual en toda la suite, y ni el rótulo ni la pista dicen
+ * nada de lo que se busca en ESTA pantalla.
+ */
+export interface SearchFormMessages {
+    /** Etiqueta del campo; nombra también el punto de referencia `search`. */
+    label: string;
+    /** Pista dentro del campo. */
+    placeholder: string;
+    /** Nombre accesible del botón de envío. */
+    submit: string;
+}
 export interface SearchFormProps {
     /** `id` del campo. Si no se pasa, el componente genera uno estable. */
     id?: string;
@@ -28,8 +41,7 @@ export interface SearchFormProps {
     method?: 'get' | 'post';
     /**
      * Etiqueta del campo. Nombra también el punto de referencia `search`.
-     * Default castellano.
-     * @default 'Buscar'
+     * **Sin default**: sale de `searchForm.label` del `BrandMessagesProvider`.
      */
     label?: string;
     /**
@@ -38,13 +50,13 @@ export interface SearchFormProps {
      */
     labelHidden?: boolean;
     /**
-     * Pista dentro del campo. Default castellano.
-     * @default 'Buscar…'
+     * Pista dentro del campo. **Sin default**: sale de
+     * `searchForm.placeholder`.
      */
     placeholder?: string;
     /**
-     * Nombre accesible del botón de envío. Default castellano.
-     * @default 'Buscar'
+     * Nombre accesible del botón de envío. **Sin default**: sale de
+     * `searchForm.submit`.
      */
     submitLabel?: string;
     /**

package/dist/_types/molecules/SelectField/SelectField.d.ts

@@ -19,6 +19,11 @@ export interface SelectFieldProps {
     options: SelectOptionOrGroup[];
     value?: string;
     defaultValue?: string;
+    /**
+     * Marcador de sitio del control sin valor elegido. Reenvío puro al `Select`:
+     * sin él, el texto sale de `select.placeholder` del `BrandMessagesProvider`.
+     * Se pasa solo cuando el marcador dice algo de ESTE campo.
+     */
     placeholder?: string;
     /** Nombre del campo en el formulario: Base UI monta un input oculto con el valor. */
     name?: string;

package/dist/async-multi-select.js

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

package/dist/async-select.js

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

package/dist/docs-search.js

@@ -1,60 +1,61 @@
 'use client';
 import './docs-search.css';
-import { Spinner as e } from "./spinner.js";
-import { InputField as t } from "./input-field.js";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Spinner as t } from "./spinner.js";
+import { InputField as n } from "./input-field.js";
 import "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Autocomplete as a } from "@base-ui/react/autocomplete";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Autocomplete as o } from "@base-ui/react/autocomplete";
 //#region src/stories/molecules/DocsSearch/DocsSearch.tsx
-function o(e) {
-	return /* @__PURE__ */ r("a", { ...e });
+function s(e) {
+	return /* @__PURE__ */ i("a", { ...e });
 }
-function s({ id: s = "docs-search", query: c, onQueryChange: l, results: u, loading: d = !1, label: f = "Buscar en la documentación", labelHidden: p, placeholder: m = "Buscar…", clearable: h = !0, clearLabel: g = "Borrar", resultsLabel: _ = "Resultados", emptyLabel: v = "Sin resultados.", loadingLabel: y = "Buscando…", size: b, renderLink: x = o, onSelect: S, className: C }) {
-	let w = c.trim() !== "" && u.length === 0 ? d ? y : v : null;
-	return /* @__PURE__ */ r(a.Root, {
+function c({ id: c = "docs-search", query: l, onQueryChange: u, results: d, loading: f = !1, label: p, labelHidden: m, placeholder: h, clearable: g = !0, clearLabel: _, resultsLabel: v, emptyLabel: y, loadingLabel: b, size: x, renderLink: S = s, onSelect: C, className: w }) {
+	let T = e("docsSearch"), E = l.trim() !== "" && d.length === 0 ? f ? T("loading", b) : T("empty", y) : null;
+	return /* @__PURE__ */ i(o.Root, {
 		inline: !0,
 		open: !0,
-		items: u,
+		items: d,
 		filter: null,
-		value: c,
-		onValueChange: l,
-		children: /* @__PURE__ */ i("div", {
-			className: ["docs-search", C].filter(Boolean).join(" "),
+		value: l,
+		onValueChange: u,
+		children: /* @__PURE__ */ a("div", {
+			className: ["docs-search", w].filter(Boolean).join(" "),
 			children: [
-				/* @__PURE__ */ r(a.Input, {
-					id: s,
-					render: /* @__PURE__ */ r(t, {
-						id: s,
-						label: f,
-						labelHidden: p,
+				/* @__PURE__ */ i(o.Input, {
+					id: c,
+					render: /* @__PURE__ */ i(n, {
+						id: c,
+						label: T("label", p),
+						labelHidden: m,
 						kind: "search",
-						clearable: h,
-						clearLabel: g,
-						placeholder: m,
-						...b ? { size: b } : {}
+						clearable: g,
+						..._ === void 0 ? {} : { clearLabel: _ },
+						placeholder: T("placeholder", h),
+						...x ? { size: x } : {}
 					})
 				}),
-				/* @__PURE__ */ r(a.List, {
+				/* @__PURE__ */ i(o.List, {
 					className: "docs-search__results",
-					"aria-label": _,
-					children: (e) => /* @__PURE__ */ r(a.Item, {
+					"aria-label": T("results", v),
+					children: (e) => /* @__PURE__ */ i(o.Item, {
 						value: e,
 						className: "docs-search__result",
-						onClick: () => S?.(e),
-						render: (t) => x({
+						onClick: () => C?.(e),
+						render: (t) => S({
 							...t,
 							href: e.href,
 							className: t.className ?? "docs-search__result",
-							children: /* @__PURE__ */ i(n, { children: [
-								e.product && /* @__PURE__ */ r("span", {
+							children: /* @__PURE__ */ a(r, { children: [
+								e.product && /* @__PURE__ */ i("span", {
 									className: "docs-search__result-product",
 									children: e.product
 								}),
-								/* @__PURE__ */ r("span", {
+								/* @__PURE__ */ i("span", {
 									className: "docs-search__result-title",
 									children: e.title
 								}),
-								e.excerpt && /* @__PURE__ */ r("span", {
+								e.excerpt && /* @__PURE__ */ i("span", {
 									className: "docs-search__result-excerpt",
 									children: e.excerpt
 								})
@@ -62,17 +63,17 @@ function s({ id: s = "docs-search", query: c, onQueryChange: l, results: u, load
 						})
 					}, e.href)
 				}),
-				w && /* @__PURE__ */ i("p", {
+				E && /* @__PURE__ */ a("p", {
 					className: "docs-search__status",
 					role: "status",
-					children: [d && /* @__PURE__ */ r(e, {
+					children: [f && /* @__PURE__ */ i(t, {
 						size: "sm",
 						"aria-hidden": !0
-					}), w]
+					}), E]
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { s as DocsSearch };
+export { c as DocsSearch };