@studiolxd/brand 41.1.0 → 43.0.0

package/dist/calendar.js

@@ -1,121 +1,122 @@
 'use client';
 import './calendar.css';
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s as ee, t as te } from "./_shared/calendargrid.js";
-import { useCallback as s, useEffect as c, useId as ne, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { a as t, c as n, i as r, l as i, n as a, o, r as ee, s as te, t as ne } from "./_shared/calendargrid.js";
+import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/stories/molecules/Calendar/Calendar.tsx
-var p = 12, m = 4;
-function h(e) {
-	return Math.floor(e / p) * p;
+var m = 12, h = 4;
+function g(e) {
+	return Math.floor(e / m) * m;
 }
-function g({ value: g, onChange: _, defaultMonth: v, month: y, onMonthChange: b, navigable: re = !0, disabledDates: x, minDate: S, maxDate: C, locale: w = "es-ES", previousMonthLabel: T = "Mes anterior", nextMonthLabel: ie = "Mes siguiente", previousYearsLabel: ae = "Años anteriores", nextYearsLabel: oe = "Años siguientes", yearGridLabel: se = "Elegir año", gridLabel: E, size: D = "md", className: O }) {
-	let [k, A] = u(() => y ?? v ?? (g instanceof Date ? g : /* @__PURE__ */ new Date())), j = y ?? k, M = s((e) => {
-		A(e), b?.(e);
-	}, [b]), N = /* @__PURE__ */ new Date(), ce = s((e) => S && e < S || C && e > C ? !0 : Array.isArray(x) ? x.some((t) => n(t, e)) : typeof x == "function" ? x(e) : !1, [
+function _({ value: _, onChange: re, defaultMonth: ie, month: v, onMonthChange: y, navigable: b = !0, disabledDates: x, minDate: S, maxDate: C, locale: w = "es-ES", previousMonthLabel: ae, nextMonthLabel: oe, previousYearsLabel: T, nextYearsLabel: E, yearGridLabel: D, gridLabel: O, size: k = "md", className: A }) {
+	let j = e("calendar"), [se, ce] = d(() => v ?? ie ?? (_ instanceof Date ? _ : /* @__PURE__ */ new Date())), M = v ?? se, N = s((e) => {
+		ce(e), y?.(e);
+	}, [y]), P = /* @__PURE__ */ new Date(), le = s((e) => S && e < S || C && e > C ? !0 : Array.isArray(x) ? x.some((t) => r(t, e)) : typeof x == "function" ? x(e) : !1, [
 		x,
 		S,
 		C
-	]), P = r({
-		month: j,
-		onMonthChange: M,
-		selected: g ?? null,
+	]), F = i({
+		month: M,
+		onMonthChange: N,
+		selected: _ ?? null,
 		minDate: S,
 		maxDate: C
-	}), [F, I] = u("days"), [L, R] = u(() => h(j.getFullYear())), [z, B] = u(() => j.getFullYear()), V = l(null), H = l(/* @__PURE__ */ new Map()), U = l(null), W = s(() => {
-		let e = j.getFullYear();
-		R(h(e)), B(e), U.current = "year", I("years");
-	}, [j]), G = s(() => {
-		U.current = "title", I("days");
-	}, []), le = s((e) => {
-		M(new Date(e, j.getMonth(), 1)), G();
+	}), [I, L] = d("days"), [R, z] = d(() => g(M.getFullYear())), [B, V] = d(() => M.getFullYear()), H = u(null), U = u(/* @__PURE__ */ new Map()), W = u(null), ue = s(() => {
+		let e = M.getFullYear();
+		z(g(e)), V(e), W.current = "year", L("years");
+	}, [M]), G = s(() => {
+		W.current = "title", L("days");
+	}, []), de = s((e) => {
+		N(new Date(e, M.getMonth(), 1)), G();
 	}, [
 		G,
-		j,
-		M
+		M,
+		N
 	]);
 	c(() => {
-		if (!U.current) return;
-		let e = U.current;
-		U.current = null, e === "title" ? V.current?.focus() : H.current.get(z)?.focus();
-	}, [F, z]);
-	let ue = D === "sm" ? "xs" : D === "lg" ? "md" : "sm", de = new Intl.DateTimeFormat(w, {
+		if (!W.current) return;
+		let e = W.current;
+		W.current = null, e === "title" ? H.current?.focus() : U.current.get(B)?.focus();
+	}, [I, B]);
+	let fe = k === "sm" ? "xs" : k === "lg" ? "md" : "sm", pe = new Intl.DateTimeFormat(w, {
 		month: "long",
 		year: "numeric"
-	}).format(j), fe = new Intl.DateTimeFormat(w, { year: "numeric" }), K = (e) => fe.format(new Date(e, 0, 1)), pe = Array.from({ length: p }, (e, t) => L + t), me = `${K(L)}–${K(L + p - 1)}`, he = new Intl.DateTimeFormat(w, {
+	}).format(M), me = new Intl.DateTimeFormat(w, { year: "numeric" }), K = (e) => me.format(new Date(e, 0, 1)), he = Array.from({ length: m }, (e, t) => R + t), ge = `${K(R)}–${K(R + m - 1)}`, _e = new Intl.DateTimeFormat(w, {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}), ge = o(w, "narrow"), _e = te(i(j)), q = t(j, -1), J = t(j, 1), Y = S ? !e(q, S) && q < S : !1, ve = C ? !e(J, C) && J > C : !1, ye = (e) => (S ? e < S.getFullYear() : !1) || (C ? e > C.getFullYear() : !1), be = S ? L - 1 < S.getFullYear() : !1, xe = C ? L + p > C.getFullYear() : !1, X = F === "years", Z = z >= L && z <= L + p - 1 ? z : L, Se = (e) => {
-		(e < L || e > L + p - 1) && R(h(e)), U.current = "year", B(e);
-	}, Ce = (e) => {
+	}), ve = ee(w, "narrow"), ye = ne(a(M)), q = n(M, -1), J = n(M, 1), be = S ? !t(q, S) && q < S : !1, xe = C ? !t(J, C) && J > C : !1, Se = (e) => (S ? e < S.getFullYear() : !1) || (C ? e > C.getFullYear() : !1), Ce = S ? R - 1 < S.getFullYear() : !1, we = C ? R + m > C.getFullYear() : !1, Y = I === "years", X = B >= R && B <= R + m - 1 ? B : R, Te = (e) => {
+		(e < R || e > R + m - 1) && z(g(e)), W.current = "year", V(e);
+	}, Z = (e) => {
 		let t = null;
 		switch (e.key) {
 			case "ArrowLeft":
-				t = Z - 1;
+				t = X - 1;
 				break;
 			case "ArrowRight":
-				t = Z + 1;
+				t = X + 1;
 				break;
 			case "ArrowUp":
-				t = Z - m;
+				t = X - h;
 				break;
 			case "ArrowDown":
-				t = Z + m;
+				t = X + h;
 				break;
 			case "Home":
-				t = L;
+				t = R;
 				break;
 			case "End":
-				t = L + p - 1;
+				t = R + m - 1;
 				break;
 			case "PageUp":
-				t = Z - p;
+				t = X - m;
 				break;
 			case "PageDown":
-				t = Z + p;
+				t = X + m;
 				break;
 			case "Escape":
 				e.preventDefault(), G();
 				return;
 			default: return;
 		}
-		e.preventDefault(), Se(t);
-	}, Q = ne(), $ = X ? `${Q}-calendar-title-${L}` : `${Q}-calendar-title-${j.getFullYear()}-${j.getMonth()}`;
-	return /* @__PURE__ */ f("div", {
+		e.preventDefault(), Te(t);
+	}, Q = l(), $ = Y ? `${Q}-calendar-title-${R}` : `${Q}-calendar-title-${M.getFullYear()}-${M.getMonth()}`;
+	return /* @__PURE__ */ p("div", {
 		className: [
 			"calendar",
-			`calendar--${D}`,
-			O
+			`calendar--${k}`,
+			A
 		].filter(Boolean).join(" "),
-		children: [a({
+		children: [o({
 			block: "calendar",
-			title: X ? me : de,
+			title: Y ? ge : pe,
 			titleId: $,
-			navigable: re,
-			previousLabel: X ? ae : T,
-			nextLabel: X ? oe : ie,
-			prevDisabled: X ? be : Y,
-			nextDisabled: X ? xe : ve,
-			onPrev: X ? () => R(L - p) : () => M(q),
-			onNext: X ? () => R(L + p) : () => M(J),
-			chevronSize: ue,
-			onTitleClick: X ? G : W,
-			titleExpanded: X,
-			titleRef: V
-		}), X ? /* @__PURE__ */ d("div", {
+			navigable: b,
+			previousLabel: b ? Y ? j("previousYears", T) : j("previousMonth", ae) : void 0,
+			nextLabel: b ? Y ? j("nextYears", E) : j("nextMonth", oe) : void 0,
+			prevDisabled: Y ? Ce : be,
+			nextDisabled: Y ? we : xe,
+			onPrev: Y ? () => z(R - m) : () => N(q),
+			onNext: Y ? () => z(R + m) : () => N(J),
+			chevronSize: fe,
+			onTitleClick: Y ? G : ue,
+			titleExpanded: Y,
+			titleRef: H
+		}), Y ? /* @__PURE__ */ f("div", {
 			className: "calendar__years",
 			role: "grid",
-			"aria-label": se,
-			onKeyDown: Ce,
-			children: Array.from({ length: p / m }, (e, t) => /* @__PURE__ */ d("div", {
+			"aria-label": j("yearGrid", D),
+			onKeyDown: Z,
+			children: Array.from({ length: m / h }, (e, t) => /* @__PURE__ */ f("div", {
 				role: "row",
 				className: "calendar__row",
-				children: pe.slice(t * m, t * m + m).map((e) => {
-					let t = ye(e), n = e === N.getFullYear(), r = g instanceof Date ? g.getFullYear() === e : !1;
-					return /* @__PURE__ */ d("button", {
+				children: he.slice(t * h, t * h + h).map((e) => {
+					let t = Se(e), n = e === P.getFullYear(), r = _ instanceof Date ? _.getFullYear() === e : !1;
+					return /* @__PURE__ */ f("button", {
 						ref: (t) => {
-							t ? H.current.set(e, t) : H.current.delete(e);
+							t ? U.current.set(e, t) : U.current.delete(e);
 						},
 						type: "button",
 						role: "gridcell",
@@ -128,45 +129,45 @@ function g({ value: g, onChange: _, defaultMonth: v, month: y, onMonthChange: b,
 						"aria-selected": r,
 						"aria-disabled": t ? "true" : void 0,
 						"aria-current": n ? "date" : void 0,
-						tabIndex: e === Z ? 0 : -1,
-						onFocus: () => B(e),
-						onClick: t ? void 0 : () => le(e),
+						tabIndex: e === X ? 0 : -1,
+						onFocus: () => V(e),
+						onClick: t ? void 0 : () => de(e),
 						children: K(e)
 					}, e);
 				})
 			}, t))
-		}) : /* @__PURE__ */ f("div", {
+		}) : /* @__PURE__ */ p("div", {
 			className: "calendar__grid",
 			role: "grid",
-			"aria-label": E,
-			"aria-labelledby": E ? void 0 : $,
-			onKeyDown: P.onKeyDown,
-			children: [ee({
+			"aria-label": O,
+			"aria-labelledby": O ? void 0 : $,
+			onKeyDown: F.onKeyDown,
+			children: [te({
 				block: "calendar",
-				weekdays: ge
-			}), _e.map((e, t) => /* @__PURE__ */ d("div", {
+				weekdays: ve
+			}), ye.map((e, t) => /* @__PURE__ */ f("div", {
 				role: "row",
 				className: "calendar__row",
 				children: e.map(({ date: e, outside: t }) => {
-					let r = ce(e), i = n(e, N), a = g instanceof Date ? n(e, g) : !1, o = [
+					let n = le(e), i = r(e, P), a = _ instanceof Date ? r(e, _) : !1, o = [
 						"calendar__day",
 						t && "calendar__day--outside",
 						i && "calendar__day--today",
 						a && "calendar__day--selected",
-						r && "calendar__day--disabled"
+						n && "calendar__day--disabled"
 					].filter(Boolean).join(" ");
-					return /* @__PURE__ */ d("button", {
-						ref: P.cellRef(e),
+					return /* @__PURE__ */ f("button", {
+						ref: F.cellRef(e),
 						type: "button",
 						role: "gridcell",
 						className: o,
-						"aria-label": he.format(e),
+						"aria-label": _e.format(e),
 						"aria-selected": a,
-						"aria-disabled": r ? "true" : void 0,
+						"aria-disabled": n ? "true" : void 0,
 						"aria-current": i ? "date" : void 0,
-						tabIndex: P.isTabbable(e) ? 0 : -1,
-						onFocus: () => P.onCellFocus(e),
-						onClick: r ? void 0 : () => _?.(e),
+						tabIndex: F.isTabbable(e) ? 0 : -1,
+						onFocus: () => F.onCellFocus(e),
+						onClick: n ? void 0 : () => re?.(e),
 						children: e.getDate()
 					}, e.toISOString());
 				})
@@ -175,4 +176,4 @@ function g({ value: g, onChange: _, defaultMonth: v, month: y, onMonthChange: b,
 	});
 }
 //#endregion
-export { g as Calendar };
+export { _ as Calendar };

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 };

package/dist/filter-bar.css

@@ -1 +1 @@
-.filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{grid-template-columns:repeat(auto-fill, minmax(min(var(--filter-bar-column-min-inline-size), 100%), 1fr));column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);display:grid}.filter-bar__filters{display:contents}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-items:stretch;gap:var(--filter-bar-actions-gap);flex-direction:column;min-inline-size:0;display:flex}.filter-bar__actions>*{inline-size:100%}@media (width>=768px){.filter-bar__actions{flex-flow:wrap;align-items:center}.filter-bar__actions>*{inline-size:auto}:is(.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))),.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions){align-self:start;padding-block-start:var(--filter-bar-label-offset)}.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))){block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size));flex-direction:column;justify-content:center;display:flex}.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions{min-block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size))}}
+.filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);grid-template-columns:1fr;display:grid}.filter-bar__filters{display:contents}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-items:stretch;gap:var(--filter-bar-actions-gap);flex-direction:column;min-inline-size:0;display:flex}.filter-bar__actions>*{inline-size:100%}@media (width>=768px){.filter-bar__row{grid-template-columns:repeat(auto-fill, minmax(min(var(--filter-bar-column-min-inline-size), 100%), 1fr))}.filter-bar__actions{flex-flow:wrap;align-items:center}.filter-bar__actions>*{inline-size:auto}:is(.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))),.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions){align-self:start;padding-block-start:var(--filter-bar-label-offset)}.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))){block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size));flex-direction:column;justify-content:center;display:flex}.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions{min-block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size))}}

package/dist/filter-bar.js

@@ -1,31 +1,33 @@
+'use client';
 import './filter-bar.css';
-import { Children as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Children as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/stories/molecules/FilterBar/FilterBar.tsx
-function r({ search: r, children: i, actions: a, ariaLabel: o = "Filtros", className: s, ...c }) {
-	let l = e.toArray(i);
-	return /* @__PURE__ */ n("div", {
-		className: ["filter-bar", s].filter(Boolean).join(" "),
+function i({ search: i, children: a, actions: o, ariaLabel: s, className: c, ...l }) {
+	let u = e("filterBar"), d = t.toArray(a);
+	return /* @__PURE__ */ r("div", {
+		className: ["filter-bar", c].filter(Boolean).join(" "),
 		role: "search",
-		"aria-label": o,
-		...c,
-		children: [r && /* @__PURE__ */ t("div", {
+		"aria-label": u("label", s),
+		...l,
+		children: [i && /* @__PURE__ */ n("div", {
 			className: "filter-bar__search",
-			children: r
-		}), (l.length > 0 || a) && /* @__PURE__ */ n("div", {
+			children: i
+		}), (d.length > 0 || o) && /* @__PURE__ */ r("div", {
 			className: "filter-bar__row",
-			children: [l.length > 0 && /* @__PURE__ */ t("div", {
+			children: [d.length > 0 && /* @__PURE__ */ n("div", {
 				className: "filter-bar__filters",
-				children: l.map((e, n) => /* @__PURE__ */ t("div", {
+				children: d.map((e, t) => /* @__PURE__ */ n("div", {
 					className: "filter-bar__filter",
 					children: e
-				}, n))
-			}), a && /* @__PURE__ */ t("div", {
+				}, t))
+			}), o && /* @__PURE__ */ n("div", {
 				className: "filter-bar__actions",
-				children: a
+				children: o
 			})]
 		})]
 	});
 }
 //#endregion
-export { r as FilterBar };
+export { i as FilterBar };

package/dist/input-field.js

@@ -1,100 +1,101 @@
 'use client';
 import './input-field.css';
-import { Icon as e } from "./icon.js";
-import { n as t } from "./_shared/form-size.js";
-import { ErrorText as n } from "./error-text.js";
-import { Input as r } from "./input.js";
-import { Label as i } from "./label.js";
-import { n as a } from "./_shared/field-labels.js";
-import { forwardRef as o, useImperativeHandle as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { n } from "./_shared/form-size.js";
+import { ErrorText as r } from "./error-text.js";
+import { Input as i } from "./input.js";
+import { Label as a } from "./label.js";
+import { n as o } from "./_shared/field-labels.js";
+import { forwardRef as s, useImperativeHandle as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/stories/molecules/InputField/InputField.tsx
-var f = o(function({ id: o, label: f, labelHidden: p, name: m, type: h, kind: g = "text", clearable: _ = !1, clearLabel: v = "Borrar", onClear: y, placeholder: b, value: x, defaultValue: S, disabled: C, readOnly: w, size: T, error: E = !1, errorMessage: D, helperText: O, onChange: k, onBlur: A, onFocus: j, className: M, ...N }, P) {
-	let F = a(p), I = t(T), L = D ? `${o}-error` : void 0, R = O ? `${o}-helper` : void 0, z = [
-		L,
-		R,
-		N["aria-describedby"]
-	].filter(Boolean).join(" ") || void 0, B = E || !!D, V = g === "search", H = c(null);
-	s(P, () => H.current);
-	let [U, W] = l(() => (S ?? "") !== ""), G = V && _ && (x === void 0 ? U : x !== "") && !C && !w;
-	function K(e) {
-		x === void 0 && W(e.target.value !== ""), k?.(e);
+var p = s(function({ id: s, label: p, labelHidden: m, name: h, type: g, kind: _ = "text", clearable: v = !1, clearLabel: y, onClear: b, placeholder: x, value: S, defaultValue: C, disabled: w, readOnly: T, size: E, error: D = !1, errorMessage: O, helperText: k, onChange: A, onBlur: j, onFocus: M, className: N, ...P }, F) {
+	let I = e("inputField"), L = o(m), R = n(E), z = O ? `${s}-error` : void 0, B = k ? `${s}-helper` : void 0, V = [
+		z,
+		B,
+		P["aria-describedby"]
+	].filter(Boolean).join(" ") || void 0, H = D || !!O, U = _ === "search", W = l(null);
+	c(F, () => W.current);
+	let [G, K] = u(() => (C ?? "") !== ""), q = U && v && (S === void 0 ? G : S !== "") && !w && !T;
+	function J(e) {
+		S === void 0 && K(e.target.value !== ""), A?.(e);
 	}
-	function q() {
-		let e = H.current;
-		e && ((Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), W(!1), e.focus(), y?.());
+	function Y() {
+		let e = W.current;
+		e && ((Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), K(!1), e.focus(), b?.());
 	}
-	let J = /* @__PURE__ */ u(r, {
-		ref: H,
-		...V ? {
+	let X = /* @__PURE__ */ d(i, {
+		ref: W,
+		...U ? {
 			type: "text",
 			autoComplete: "off",
 			enterKeyHint: "search"
-		} : { type: h },
-		...N,
-		id: o,
-		name: m,
-		placeholder: b ?? (F ? f : void 0),
-		value: x,
-		defaultValue: S,
-		disabled: C,
-		readOnly: w,
-		size: I,
-		error: B,
-		"aria-describedby": z,
-		onChange: K,
-		onBlur: A,
-		onFocus: j
+		} : { type: g },
+		...P,
+		id: s,
+		name: h,
+		placeholder: x ?? (L ? p : void 0),
+		value: S,
+		defaultValue: C,
+		disabled: w,
+		readOnly: T,
+		size: R,
+		error: H,
+		"aria-describedby": V,
+		onChange: J,
+		onBlur: j,
+		onFocus: M
 	});
-	return /* @__PURE__ */ d("div", {
-		className: ["input-field", M].filter(Boolean).join(" "),
+	return /* @__PURE__ */ f("div", {
+		className: ["input-field", N].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ u(i, {
-				htmlFor: o,
-				hidden: F,
-				size: I,
-				children: f
+			/* @__PURE__ */ d(a, {
+				htmlFor: s,
+				hidden: L,
+				size: R,
+				children: p
 			}),
-			V ? /* @__PURE__ */ d("div", {
+			U ? /* @__PURE__ */ f("div", {
 				className: [
 					"input-field__search",
-					I === "md" ? "" : `input-field__search--${I}`,
-					_ ? "input-field__search--clearable" : ""
+					R === "md" ? "" : `input-field__search--${R}`,
+					v ? "input-field__search--clearable" : ""
 				].filter(Boolean).join(" "),
 				children: [
-					/* @__PURE__ */ u("span", {
+					/* @__PURE__ */ d("span", {
 						className: "input-field__search-icon",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ u(e, {
+						children: /* @__PURE__ */ d(t, {
 							name: "search",
 							className: "input-field__search-glyph"
 						})
 					}),
-					J,
-					G && /* @__PURE__ */ u("button", {
+					X,
+					q && /* @__PURE__ */ d("button", {
 						type: "button",
 						className: "input-field__clear",
-						"aria-label": v,
-						"aria-controls": o,
-						onClick: q,
-						children: /* @__PURE__ */ u(e, {
+						"aria-label": I("clear", y),
+						"aria-controls": s,
+						onClick: Y,
+						children: /* @__PURE__ */ d(t, {
 							name: "close",
 							className: "input-field__search-glyph"
 						})
 					})
 				]
-			}) : J,
-			D && /* @__PURE__ */ u(n, {
-				id: L,
-				children: D
+			}) : X,
+			O && /* @__PURE__ */ d(r, {
+				id: z,
+				children: O
 			}),
-			O && /* @__PURE__ */ u("span", {
-				id: R,
+			k && /* @__PURE__ */ d("span", {
+				id: B,
 				className: "input-field__helper",
-				children: O
+				children: k
 			})
 		]
 	});
 });
 //#endregion
-export { f as InputField };
+export { p as InputField };