@studiolxd/brand 41.1.0 → 42.0.0

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

package/dist/input-phone.js

@@ -1,72 +1,73 @@
 'use client';
 import './input-phone.css';
-import { Icon as e } from "./icon.js";
-import { forwardRef as t, useMemo as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Select as a } from "@base-ui/react/select";
-import o, { getCountryCallingCode as s } from "react-phone-number-input";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { forwardRef as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Select as o } from "@base-ui/react/select";
+import s, { getCountryCallingCode as c } from "react-phone-number-input";
 //#region src/stories/atoms/InputPhone/InputPhone.tsx
-function c({ value: t, onChange: n, options: o, disabled: c, size: l = "md", countryLabel: u = "País", internationalLabel: d = "🌐", container: f }) {
-	let p = "__intl__", m = (e) => e ?? p, h = (e) => e === p ? void 0 : e, g = l === "sm" ? "xs" : l === "lg" ? "md" : "sm", _ = ["input-phone__country-content", l === "md" ? "" : `input-phone__country-content--${l}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ i(a.Root, {
-		value: m(t),
-		onValueChange: (e) => n(h(e)),
-		disabled: c,
-		children: [/* @__PURE__ */ i(a.Trigger, {
+function l({ value: n, onChange: r, options: s, disabled: l, size: u = "md", countryLabel: d, internationalLabel: f = "🌐", container: p }) {
+	let m = e("inputPhone"), h = "__intl__", g = (e) => e ?? h, _ = (e) => e === h ? void 0 : e, v = u === "sm" ? "xs" : u === "lg" ? "md" : "sm", y = ["input-phone__country-content", u === "md" ? "" : `input-phone__country-content--${u}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ a(o.Root, {
+		value: g(n),
+		onValueChange: (e) => r(_(e)),
+		disabled: l,
+		children: [/* @__PURE__ */ a(o.Trigger, {
 			className: "input-phone__country",
-			"aria-label": u,
-			children: [/* @__PURE__ */ r(a.Value, { children: t ? `+${s(t)}` : d }), /* @__PURE__ */ r(e, {
+			"aria-label": m("country", d),
+			children: [/* @__PURE__ */ i(o.Value, { children: n ? `+${c(n)}` : f }), /* @__PURE__ */ i(t, {
 				name: "chevron",
 				className: "input-phone__country-icon",
-				size: g
+				size: v
 			})]
-		}), /* @__PURE__ */ r(a.Portal, {
-			container: f,
-			children: /* @__PURE__ */ r(a.Positioner, {
+		}), /* @__PURE__ */ i(o.Portal, {
+			container: p,
+			children: /* @__PURE__ */ i(o.Positioner, {
 				className: "input-phone__country-positioner",
 				side: "bottom",
 				align: "start",
 				alignItemWithTrigger: !1,
-				children: /* @__PURE__ */ r(a.Popup, {
-					className: _,
-					children: o.map(({ value: e, label: t }) => /* @__PURE__ */ r(a.Item, {
-						value: m(e),
+				children: /* @__PURE__ */ i(o.Popup, {
+					className: y,
+					children: s.map(({ value: e, label: t }) => /* @__PURE__ */ i(o.Item, {
+						value: g(e),
 						className: "input-phone__country-item",
-						children: /* @__PURE__ */ r(a.ItemText, { children: t })
-					}, m(e)))
+						children: /* @__PURE__ */ i(o.ItemText, { children: t })
+					}, g(e)))
 				})
 			})
 		})]
 	});
 }
-var l = t(function({ value: e, defaultCountry: i = "ES", placeholder: a, disabled: s, error: l = !1, size: d = "md", id: f, name: p, describedBy: m, "aria-describedby": h, "aria-label": g, autoComplete: _, required: v, readOnly: y, onChange: b, onBlur: x, onFocus: S, countryLabel: C, internationalLabel: w, container: T }, E) {
-	return /* @__PURE__ */ r(o, {
+var u = n(function({ value: e, defaultCountry: t = "ES", placeholder: a, disabled: o, error: c = !1, size: u = "md", id: f, name: p, describedBy: m, "aria-describedby": h, "aria-label": g, autoComplete: _, required: v, readOnly: y, onChange: b, onBlur: x, onFocus: S, countryLabel: C, internationalLabel: w, container: T }, E) {
+	return /* @__PURE__ */ i(s, {
 		className: [
 			"input-phone",
-			l ? "input-phone--error" : "",
-			d === "md" ? "" : `input-phone--${d}`
+			c ? "input-phone--error" : "",
+			u === "md" ? "" : `input-phone--${u}`
 		].filter(Boolean).join(" "),
 		value: e,
-		defaultCountry: i,
+		defaultCountry: t,
 		placeholder: a,
-		disabled: s,
+		disabled: o,
 		readOnly: y,
 		required: v,
 		autoComplete: _,
 		id: f,
 		name: p,
-		inputComponent: n(() => t(function(e, t) {
-			return /* @__PURE__ */ r("input", {
+		inputComponent: r(() => n(function(e, t) {
+			return /* @__PURE__ */ i("input", {
 				...e,
 				ref: (e) => {
-					u(t, e), u(E, e);
+					d(t, e), d(E, e);
 				},
 				className: "input-phone__number"
 			});
 		}), [E]),
-		countrySelectComponent: c,
+		countrySelectComponent: l,
 		countrySelectProps: {
-			size: d,
+			size: u,
 			countryLabel: C,
 			internationalLabel: w,
 			container: T
@@ -77,12 +78,12 @@ var l = t(function({ value: e, defaultCountry: i = "ES", placeholder: a, disable
 		numberInputProps: {
 			"aria-describedby": h ?? m,
 			"aria-label": g,
-			"aria-invalid": l || void 0
+			"aria-invalid": c || void 0
 		}
 	});
 });
-function u(e, t) {
+function d(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
 //#endregion
-export { l as InputPhone };
+export { u as InputPhone };