@studiolxd/brand 50.0.0 → 51.0.0

package/dist/form.js

@@ -2,62 +2,66 @@
 import './form.css';
 import { t as e } from "./_shared/form-size.js";
 import { ErrorText as t } from "./error-text.js";
-import { forwardRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { t as n } from "./_shared/field-optional.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/molecules/Form/Form.tsx
-var a = n(function({ errors: n, actions: a, links: o, alternatives: s, alternativesLabel: c, captcha: l, size: u, blockActions: d = !1, success: f, className: p, children: m, ...h }, g) {
-	let _ = [
+var o = r(function({ errors: r, actions: o, links: s, alternatives: c, alternativesLabel: l, captcha: u, size: d, markOptional: f = !1, blockActions: p = !1, success: m, className: h, children: g, ..._ }, v) {
+	let y = [
 		"form",
-		u && u !== "md" ? `form--${u}` : "",
-		d ? "form--block-actions" : "",
-		p
+		d && d !== "md" ? `form--${d}` : "",
+		p ? "form--block-actions" : "",
+		h
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ r(e.Provider, {
-		value: u,
-		children: /* @__PURE__ */ i("form", {
-			ref: g,
-			className: _,
-			noValidate: !0,
-			...h,
-			children: [
-				f && /* @__PURE__ */ r("p", {
-					className: "form__success",
-					role: "status",
-					children: f
-				}),
-				!f && m && /* @__PURE__ */ r("div", {
-					className: "form__fields",
-					children: m
-				}),
-				!f && l && /* @__PURE__ */ r("div", {
-					className: "form__captcha",
-					children: l
-				}),
-				!f && n && n.length > 0 && /* @__PURE__ */ r("ul", {
-					className: "form__errors",
-					children: n.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(t, {
-						as: "span",
-						children: e
-					}) }, e))
-				}),
-				!f && a && /* @__PURE__ */ r("div", {
-					className: ["form__actions", d ? "form__actions--block" : ""].filter(Boolean).join(" "),
-					children: a
-				}),
-				o && /* @__PURE__ */ r("div", {
-					className: "form__links",
-					children: o
-				}),
-				!f && s && /* @__PURE__ */ i("div", {
-					className: "form__alternatives",
-					children: [c && /* @__PURE__ */ r("p", {
-						className: "form__alternatives-label",
-						children: c
-					}), s]
-				})
-			]
+	return /* @__PURE__ */ i(e.Provider, {
+		value: d,
+		children: /* @__PURE__ */ i(n.Provider, {
+			value: f,
+			children: /* @__PURE__ */ a("form", {
+				ref: v,
+				className: y,
+				noValidate: !0,
+				..._,
+				children: [
+					m && /* @__PURE__ */ i("p", {
+						className: "form__success",
+						role: "status",
+						children: m
+					}),
+					!m && g && /* @__PURE__ */ i("div", {
+						className: "form__fields",
+						children: g
+					}),
+					!m && u && /* @__PURE__ */ i("div", {
+						className: "form__captcha",
+						children: u
+					}),
+					!m && r && r.length > 0 && /* @__PURE__ */ i("ul", {
+						className: "form__errors",
+						children: r.map((e) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(t, {
+							as: "span",
+							children: e
+						}) }, e))
+					}),
+					!m && o && /* @__PURE__ */ i("div", {
+						className: ["form__actions", p ? "form__actions--block" : ""].filter(Boolean).join(" "),
+						children: o
+					}),
+					s && /* @__PURE__ */ i("div", {
+						className: "form__links",
+						children: s
+					}),
+					!m && c && /* @__PURE__ */ a("div", {
+						className: "form__alternatives",
+						children: [l && /* @__PURE__ */ i("p", {
+							className: "form__alternatives-label",
+							children: l
+						}), c]
+					})
+				]
+			})
 		})
 	});
 });
 //#endregion
-export { a as Form };
+export { o as Form };

package/dist/heatmap.css

@@ -1 +1 @@
-.heatmap{font-family:var(--heatmap-font-family)}.heatmap__wrap{border:var(--heatmap-border-width) solid var(--heatmap-border-color);border-radius:var(--heatmap-radius);overflow:auto visible}.heatmap__table{border-collapse:collapse;inline-size:100%}.heatmap__group{padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-group-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-group-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__corner,.heatmap__row-header{z-index:1;min-inline-size:var(--heatmap-row-header-width);max-inline-size:var(--heatmap-row-header-width);padding-block:var(--heatmap-row-header-padding-block);padding-inline:var(--heatmap-row-header-padding-inline);text-align:start;background-color:var(--heatmap-row-header-bg);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);position:sticky;inset-inline-start:0}.heatmap__corner{z-index:2;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__row-header{font-size:var(--heatmap-row-header-font-size);font-weight:var(--heatmap-row-header-font-weight);color:var(--heatmap-row-header-color)}.heatmap__column-header{min-inline-size:var(--heatmap-column-header-width);padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-column-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-column-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;vertical-align:bottom;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell{padding-block:var(--heatmap-cell-padding-block);padding-inline:var(--heatmap-cell-padding-inline);font-size:var(--heatmap-cell-font-size);font-weight:var(--heatmap-cell-font-weight);text-align:center;font-variant-numeric:tabular-nums;border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell.heatmap__cell--step-1{background-color:var(--heatmap-step-1-bg);color:var(--heatmap-step-1-color)}.heatmap__cell.heatmap__cell--step-2{background-color:var(--heatmap-step-2-bg);color:var(--heatmap-step-2-color)}.heatmap__cell.heatmap__cell--step-3{background-color:var(--heatmap-step-3-bg);color:var(--heatmap-step-3-color)}.heatmap__cell.heatmap__cell--step-4{background-color:var(--heatmap-step-4-bg);color:var(--heatmap-step-4-color)}.heatmap__cell.heatmap__cell--step-5{background-color:var(--heatmap-step-5-bg);color:var(--heatmap-step-5-color)}.heatmap__cell.heatmap__cell--step-6{background-color:var(--heatmap-step-6-bg);color:var(--heatmap-step-6-color)}.heatmap__cell.heatmap__cell--empty{background-color:var(--heatmap-empty-bg);background-image:repeating-linear-gradient(45deg, var(--heatmap-empty-pattern-color) 0, var(--heatmap-empty-pattern-color) var(--heatmap-empty-pattern-width), transparent var(--heatmap-empty-pattern-width), transparent calc(var(--heatmap-empty-pattern-width) * 2))}.heatmap__legend{align-items:center;gap:var(--heatmap-legend-gap);font-size:var(--heatmap-legend-font-size);color:var(--heatmap-legend-color);flex-wrap:wrap;margin-block-start:var(--heatmap-margin-block-start);display:flex}.heatmap__ramp{gap:var(--heatmap-legend-swatch-gap);display:flex}.heatmap__swatch{inline-size:var(--heatmap-legend-swatch-size);block-size:var(--heatmap-legend-swatch-size)}.heatmap__swatch.heatmap__swatch--step-1{background-color:var(--heatmap-step-1-bg)}.heatmap__swatch.heatmap__swatch--step-2{background-color:var(--heatmap-step-2-bg)}.heatmap__swatch.heatmap__swatch--step-3{background-color:var(--heatmap-step-3-bg)}.heatmap__swatch.heatmap__swatch--step-4{background-color:var(--heatmap-step-4-bg)}.heatmap__swatch.heatmap__swatch--step-5{background-color:var(--heatmap-step-5-bg)}.heatmap__swatch.heatmap__swatch--step-6{background-color:var(--heatmap-step-6-bg)}
+.heatmap{font-family:var(--heatmap-font-family)}.heatmap__wrap{border:var(--heatmap-border-width) solid var(--heatmap-border-color);border-radius:var(--heatmap-radius);overflow:auto visible}.heatmap__table{border-collapse:collapse;inline-size:100%}.heatmap__group{padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-group-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-group-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__corner,.heatmap__row-header{z-index:1;min-inline-size:var(--heatmap-row-header-width);max-inline-size:var(--heatmap-row-header-width);padding-block:var(--heatmap-row-header-padding-block);padding-inline:var(--heatmap-row-header-padding-inline);text-align:start;background-color:var(--heatmap-row-header-bg);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);position:sticky;inset-inline-start:0}.heatmap__corner{z-index:2;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__row-header{font-size:var(--heatmap-row-header-font-size);font-weight:var(--heatmap-row-header-font-weight);color:var(--heatmap-row-header-color)}.heatmap__column-header{min-inline-size:var(--heatmap-column-header-width);padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-column-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-column-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;vertical-align:bottom;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell{padding-block:var(--heatmap-cell-padding-block);padding-inline:var(--heatmap-cell-padding-inline);font-size:var(--heatmap-cell-font-size);font-weight:var(--heatmap-cell-font-weight);text-align:center;font-variant-numeric:tabular-nums;border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell.heatmap__cell--step-1{background-color:var(--heatmap-step-1-bg);color:var(--heatmap-step-1-color)}.heatmap__cell.heatmap__cell--step-2{background-color:var(--heatmap-step-2-bg);color:var(--heatmap-step-2-color)}.heatmap__cell.heatmap__cell--step-3{background-color:var(--heatmap-step-3-bg);color:var(--heatmap-step-3-color)}.heatmap__cell.heatmap__cell--step-4{background-color:var(--heatmap-step-4-bg);color:var(--heatmap-step-4-color)}.heatmap__cell.heatmap__cell--step-5{background-color:var(--heatmap-step-5-bg);color:var(--heatmap-step-5-color)}.heatmap__cell.heatmap__cell--step-6{background-color:var(--heatmap-step-6-bg);color:var(--heatmap-step-6-color)}.heatmap__cell.heatmap__cell--diverging-warm-3{background-color:var(--heatmap-diverging-warm-3-bg);color:var(--heatmap-diverging-warm-3-color)}.heatmap__cell.heatmap__cell--diverging-warm-2{background-color:var(--heatmap-diverging-warm-2-bg);color:var(--heatmap-diverging-warm-2-color)}.heatmap__cell.heatmap__cell--diverging-warm-1{background-color:var(--heatmap-diverging-warm-1-bg);color:var(--heatmap-diverging-warm-1-color)}.heatmap__cell.heatmap__cell--diverging-neutral{background-color:var(--heatmap-diverging-neutral-bg);color:var(--heatmap-diverging-neutral-color)}.heatmap__cell.heatmap__cell--diverging-cool-1{background-color:var(--heatmap-diverging-cool-1-bg);color:var(--heatmap-diverging-cool-1-color)}.heatmap__cell.heatmap__cell--diverging-cool-2{background-color:var(--heatmap-diverging-cool-2-bg);color:var(--heatmap-diverging-cool-2-color)}.heatmap__cell.heatmap__cell--diverging-cool-3{background-color:var(--heatmap-diverging-cool-3-bg);color:var(--heatmap-diverging-cool-3-color)}.heatmap__cell.heatmap__cell--empty{background-color:var(--heatmap-empty-bg);background-image:repeating-linear-gradient(45deg, var(--heatmap-empty-pattern-color) 0, var(--heatmap-empty-pattern-color) var(--heatmap-empty-pattern-width), transparent var(--heatmap-empty-pattern-width), transparent calc(var(--heatmap-empty-pattern-width) * 2))}.heatmap__legend{align-items:center;gap:var(--heatmap-legend-gap);font-size:var(--heatmap-legend-font-size);color:var(--heatmap-legend-color);flex-wrap:wrap;margin-block-start:var(--heatmap-margin-block-start);display:flex}.heatmap__ramp{display:flex}.heatmap__swatch{inline-size:var(--heatmap-legend-swatch-size);block-size:var(--heatmap-legend-swatch-size)}.heatmap__swatch.heatmap__swatch--step-1{background-color:var(--heatmap-step-1-bg)}.heatmap__swatch.heatmap__swatch--step-2{background-color:var(--heatmap-step-2-bg)}.heatmap__swatch.heatmap__swatch--step-3{background-color:var(--heatmap-step-3-bg)}.heatmap__swatch.heatmap__swatch--step-4{background-color:var(--heatmap-step-4-bg)}.heatmap__swatch.heatmap__swatch--step-5{background-color:var(--heatmap-step-5-bg)}.heatmap__swatch.heatmap__swatch--step-6{background-color:var(--heatmap-step-6-bg)}.heatmap__swatch.heatmap__swatch--diverging-warm-3{background-color:var(--heatmap-diverging-warm-3-bg)}.heatmap__swatch.heatmap__swatch--diverging-warm-2{background-color:var(--heatmap-diverging-warm-2-bg)}.heatmap__swatch.heatmap__swatch--diverging-warm-1{background-color:var(--heatmap-diverging-warm-1-bg)}.heatmap__swatch.heatmap__swatch--diverging-neutral{background-color:var(--heatmap-diverging-neutral-bg)}.heatmap__swatch.heatmap__swatch--diverging-cool-1{background-color:var(--heatmap-diverging-cool-1-bg)}.heatmap__swatch.heatmap__swatch--diverging-cool-2{background-color:var(--heatmap-diverging-cool-2-bg)}.heatmap__swatch.heatmap__swatch--diverging-cool-3{background-color:var(--heatmap-diverging-cool-3-bg)}

package/dist/heatmap.js

@@ -1,6 +1,6 @@
 'use client';
 import './heatmap.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { VisuallyHidden as t } from "./visually-hidden.js";
 import { forwardRef as n, useMemo as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
@@ -15,28 +15,72 @@ function s(e, t) {
 	let n = Math.max(2, Math.min(6, Math.round(t)));
 	return Math.round((Math.max(1, Math.min(n, Math.round(e))) - 1) * 5 / (n - 1)) + 1;
 }
+function c(e, t) {
+	if (e == null || !Number.isFinite(e)) return null;
+	let n = e - t.midpoint;
+	if (n === 0) return "neutral";
+	let r = t.radius > 0 ? Math.min(1, Math.abs(n) / t.radius) : 1, i = Math.min(3, Math.floor(r * 3.5 + .5));
+	return i === 0 ? "neutral" : `${n < 0 == ((t.direction ?? "warm-below") === "warm-below") ? "warm" : "cool"}-${i}`;
+}
+function l(e = "warm-below") {
+	let t = e === "warm-below" ? "warm" : "cool", n = e === "warm-below" ? "cool" : "warm";
+	return [
+		`${t}-3`,
+		`${t}-2`,
+		`${t}-1`,
+		"neutral",
+		`${n}-1`,
+		`${n}-2`,
+		`${n}-3`
+	];
+}
+function u(e, t, n, r) {
+	let i = [n, r].filter((e) => e !== void 0 && Number.isFinite(e));
+	return (i.length > 0 ? i : t.filter((e) => e !== null && Number.isFinite(e))).reduce((t, n) => Math.max(t, Math.abs(n - e)), 0);
+}
 //#endregion
-//#region src/stories/molecules/Heatmap/Heatmap.tsx
-var c = (e, t) => `${e}\u0000${t}`, l = n(function({ rows: n, columns: l, cells: u, min: d = 0, max: f, steps: p = 5, rowHeader: m, showValues: h = !0, formatValue: g, locale: _ = "es-ES", showLegend: v = !0, minLabel: y, maxLabel: b, label: x, emptyLabel: S, scaleLabel: C, className: w, ...T }, E) {
-	let D = e("heatmap"), O = r(() => {
+//#region src/stories/messages/es/heatmap.ts
+var d = {
+	label: "Matriz",
+	empty: "sin dato",
+	scale: "Escala de color",
+	midpoint: (e) => `Centro: ${e}`
+}, f = (e, t) => `${e}\u0000${t}`, p = n(function({ rows: n, columns: p, cells: m, scale: h = "sequential", min: g, max: _, steps: v = 5, midpoint: y = 0, divergingDirection: b = "warm-below", rowHeader: x, showValues: S = !0, formatValue: C, locale: w = "es-ES", showLegend: T = !0, minLabel: E, maxLabel: D, midpointLabel: O, label: k, emptyLabel: A, scaleLabel: j, className: M, ...N }, P) {
+	let F = e("heatmap", d), I = h === "diverging", L = g ?? 0, R = r(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of u) e.set(c(t.rowId, t.columnKey), t.value);
+		for (let t of m) e.set(f(t.rowId, t.columnKey), t.value);
 		return e;
-	}, [u]), k = r(() => {
-		if (f !== void 0) return f;
-		let e = u.map((e) => e.value).filter((e) => e !== null && Number.isFinite(e));
-		return e.length > 0 ? Math.max(...e) : d + 1;
+	}, [m]), z = r(() => {
+		if (_ !== void 0) return _;
+		let e = m.map((e) => e.value).filter((e) => e !== null && Number.isFinite(e));
+		return e.length > 0 ? Math.max(...e) : L + 1;
 	}, [
-		u,
-		f,
-		d
-	]), A = Math.max(2, Math.min(6, Math.round(p))), j = {
-		min: d,
-		max: k,
-		steps: A
-	}, M = r(() => new Intl.NumberFormat(_, { maximumFractionDigits: 1 }), [_]), N = g ?? ((e) => M.format(e)), P = r(() => {
+		m,
+		_,
+		L
+	]), B = Math.max(2, Math.min(6, Math.round(v))), V = {
+		min: L,
+		max: z,
+		steps: B
+	}, H = r(() => u(y, m.map((e) => e.value), g, _), [
+		m,
+		y,
+		g,
+		_
+	]), U = {
+		midpoint: y,
+		radius: H,
+		direction: b
+	}, W = (e) => {
+		if (I) {
+			let t = c(e, U);
+			return t === null ? "heatmap__cell--empty" : `heatmap__cell--diverging-${t}`;
+		}
+		let t = o(e, V);
+		return t === null ? "heatmap__cell--empty" : `heatmap__cell--step-${s(t, B)}`;
+	}, G = r(() => new Intl.NumberFormat(w, { maximumFractionDigits: 1 }), [w]), K = C ?? ((e) => G.format(e)), q = r(() => {
 		let e = [];
-		for (let t of l) {
+		for (let t of p) {
 			let n = e[e.length - 1];
 			n && n.group === t.group ? n.span += 1 : e.push({
 				group: t.group,
@@ -44,11 +88,11 @@ var c = (e, t) => `${e}\u0000${t}`, l = n(function({ rows: n, columns: l, cells:
 			});
 		}
 		return e;
-	}, [l]), F = l.some((e) => e.group !== void 0);
+	}, [p]), J = p.some((e) => e.group !== void 0);
 	return /* @__PURE__ */ a("div", {
-		ref: E,
-		className: ["heatmap", w].filter(Boolean).join(" "),
-		...T,
+		ref: P,
+		className: ["heatmap", M].filter(Boolean).join(" "),
+		...N,
 		children: [/* @__PURE__ */ i("div", {
 			className: "heatmap__wrap",
 			children: /* @__PURE__ */ a("table", {
@@ -56,9 +100,9 @@ var c = (e, t) => `${e}\u0000${t}`, l = n(function({ rows: n, columns: l, cells:
 				children: [
 					/* @__PURE__ */ i("caption", {
 						className: "visually-hidden",
-						children: D("label", x)
+						children: F("label", k)
 					}),
-					/* @__PURE__ */ a("thead", { children: [F ? /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("td", { className: "heatmap__corner" }), P.map((e, t) => /* @__PURE__ */ i("th", {
+					/* @__PURE__ */ a("thead", { children: [J ? /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("td", { className: "heatmap__corner" }), q.map((e, t) => /* @__PURE__ */ i("th", {
 						className: "heatmap__group",
 						scope: "colgroup",
 						colSpan: e.span,
@@ -66,8 +110,8 @@ var c = (e, t) => `${e}\u0000${t}`, l = n(function({ rows: n, columns: l, cells:
 					}, `${e.group ?? ""}-${t}`))] }) : null, /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("th", {
 						className: "heatmap__corner",
 						scope: "col",
-						children: m
-					}), l.map((e) => /* @__PURE__ */ i("th", {
+						children: x
+					}), p.map((e) => /* @__PURE__ */ i("th", {
 						className: "heatmap__column-header",
 						scope: "col",
 						children: e.label
@@ -76,29 +120,45 @@ var c = (e, t) => `${e}\u0000${t}`, l = n(function({ rows: n, columns: l, cells:
 						className: "heatmap__row-header",
 						scope: "row",
 						children: e.label
-					}), l.map((n) => {
-						let r = O.get(c(e.id, n.key)) ?? null, a = o(r, j), l = ["heatmap__cell", a === null ? "heatmap__cell--empty" : `heatmap__cell--step-${s(a, A)}`].join(" "), u = r === null ? D("empty", S) : N(r);
+					}), p.map((n) => {
+						let r = R.get(f(e.id, n.key)) ?? null, a = `heatmap__cell ${W(r)}`, o = r === null ? F("empty", A) : K(r);
 						return /* @__PURE__ */ i("td", {
-							className: l,
-							children: h && r !== null ? u : /* @__PURE__ */ i(t, { children: u })
+							className: a,
+							children: S && r !== null ? o : /* @__PURE__ */ i(t, { children: o })
 						}, n.key);
 					})] }, e.id)) })
 				]
 			})
-		}), v ? /* @__PURE__ */ a("p", {
+		}), T && I ? /* @__PURE__ */ a("p", {
+			className: "heatmap__legend",
+			children: [
+				/* @__PURE__ */ i("span", { children: E ?? K(y - H) }),
+				/* @__PURE__ */ i("span", {
+					className: "heatmap__ramp",
+					role: "img",
+					"aria-label": F("scale", j),
+					children: l(b).map((e) => /* @__PURE__ */ i("span", { className: `heatmap__swatch heatmap__swatch--diverging-${e}` }, e))
+				}),
+				/* @__PURE__ */ i("span", { children: D ?? K(y + H) }),
+				/* @__PURE__ */ i("span", {
+					className: "heatmap__midpoint",
+					children: O ?? F("midpoint")(K(y))
+				})
+			]
+		}) : T ? /* @__PURE__ */ a("p", {
 			className: "heatmap__legend",
 			children: [
-				/* @__PURE__ */ i("span", { children: y ?? N(d) }),
+				/* @__PURE__ */ i("span", { children: E ?? K(L) }),
 				/* @__PURE__ */ i("span", {
 					className: "heatmap__ramp",
 					role: "img",
-					"aria-label": D("scale", C),
-					children: Array.from({ length: A }, (e, t) => /* @__PURE__ */ i("span", { className: `heatmap__swatch heatmap__swatch--step-${s(t + 1, A)}` }, t))
+					"aria-label": F("scale", j),
+					children: Array.from({ length: B }, (e, t) => /* @__PURE__ */ i("span", { className: `heatmap__swatch heatmap__swatch--step-${s(t + 1, B)}` }, t))
 				}),
-				/* @__PURE__ */ i("span", { children: b ?? N(k) })
+				/* @__PURE__ */ i("span", { children: D ?? K(z) })
 			]
 		}) : null]
 	});
 });
 //#endregion
-export { l as Heatmap };
+export { p as Heatmap };

package/dist/hero.js

@@ -22,7 +22,7 @@ function s({ title: s, description: c, actions: l, width: u = "xl", className: d
 					children: s
 				}),
 				c && /* @__PURE__ */ a(i, {
-					size: "large",
+					size: "lg",
 					className: "hero__description",
 					children: c
 				}),

package/dist/highlight.js

@@ -17,7 +17,7 @@ function c({ title: c, description: l, actions: u, media: d, mediaPosition: f =
 				children: c
 			}),
 			l && /* @__PURE__ */ o(i, {
-				size: "large",
+				size: "lg",
 				className: "highlight__description",
 				children: l
 			}),

package/dist/input-field.js

@@ -1,101 +1,3 @@
 'use client';
-import './input-field.css';
-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 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 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 X = /* @__PURE__ */ d(i, {
-		ref: W,
-		...U ? {
-			type: "text",
-			autoComplete: "off",
-			enterKeyHint: "search"
-		} : { 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__ */ f("div", {
-		className: ["input-field", N].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ d(a, {
-				htmlFor: s,
-				hidden: L,
-				size: R,
-				children: p
-			}),
-			U ? /* @__PURE__ */ f("div", {
-				className: [
-					"input-field__search",
-					R === "md" ? "" : `input-field__search--${R}`,
-					v ? "input-field__search--clearable" : ""
-				].filter(Boolean).join(" "),
-				children: [
-					/* @__PURE__ */ d("span", {
-						className: "input-field__search-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ d(t, {
-							name: "search",
-							className: "input-field__search-glyph"
-						})
-					}),
-					X,
-					q && /* @__PURE__ */ d("button", {
-						type: "button",
-						className: "input-field__clear",
-						"aria-label": I("clear", y),
-						"aria-controls": s,
-						onClick: Y,
-						children: /* @__PURE__ */ d(t, {
-							name: "close",
-							className: "input-field__search-glyph"
-						})
-					})
-				]
-			}) : X,
-			O && /* @__PURE__ */ d(r, {
-				id: z,
-				children: O
-			}),
-			k && /* @__PURE__ */ d("span", {
-				id: B,
-				className: "input-field__helper",
-				children: k
-			})
-		]
-	});
-});
-//#endregion
-export { p as InputField };
+import { t as e } from "./_shared/inputfield.js";
+export { e as InputField };

package/dist/input-phone-field.js

@@ -1,55 +1,50 @@
 'use client';
 import './input-phone-field.css';
 import { n as e } from "./_shared/form-size.js";
-import { ErrorText as t } from "./error-text.js";
-import { InputPhone as n } from "./input-phone.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 { t } from "./_shared/inputphone.js";
+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/InputPhoneField/InputPhoneField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultCountry: f, placeholder: p, disabled: m, readOnly: h, required: g, name: _, autoComplete: v, error: y = !1, errorMessage: b, helperText: x, size: S, className: C, countryLabel: w, internationalLabel: T, onChange: E, onBlur: D, onFocus: O }, k) {
-	let A = i(u), j = e(S), M = o(), N = a ?? M, P = b ? `${N}-error` : void 0, F = x ? `${N}-helper` : void 0, I = [P, F].filter(Boolean).join(" ") || void 0, L = y || !!b;
-	return /* @__PURE__ */ c("div", {
-		className: ["input-phone-field", C].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(r, {
-				htmlFor: N,
-				hidden: A,
-				size: j,
-				children: l
-			}),
-			/* @__PURE__ */ s(n, {
-				ref: k,
-				id: N,
-				name: _,
-				value: d,
-				defaultCountry: f,
-				placeholder: p,
-				disabled: m,
-				readOnly: h,
-				required: g,
-				autoComplete: v,
-				countryLabel: w,
-				internationalLabel: T,
-				error: L,
-				size: j,
-				"aria-describedby": I,
-				onChange: E,
-				onBlur: D,
-				onFocus: O
-			}),
-			b && /* @__PURE__ */ s(t, {
-				id: P,
-				children: b
-			}),
-			x && /* @__PURE__ */ s("span", {
-				id: F,
-				className: "input-phone-field__helper",
-				children: x
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, value: f, defaultCountry: p, placeholder: m, disabled: h, readOnly: g, required: _, name: v, autoComplete: y, error: b = !1, errorMessage: x, helperText: S, size: C, className: w, countryLabel: T, internationalLabel: E, onChange: D, onBlur: O, onFocus: k }, A) {
+	let j = r(d), M = e(C), N = n(l, _), P = i({
+		id: o,
+		error: b,
+		errorMessage: x,
+		helperText: S
+	}), { id: F } = P;
+	return /* @__PURE__ */ s(a, {
+		field: P,
+		block: "input-phone-field",
+		className: w,
+		label: c,
+		optional: N,
+		optionalLabel: u,
+		labelHidden: j,
+		size: M,
+		children: /* @__PURE__ */ s(t, {
+			ref: A,
+			id: F,
+			name: v,
+			value: f,
+			defaultCountry: p,
+			placeholder: m,
+			disabled: h,
+			readOnly: g,
+			required: _,
+			autoComplete: y,
+			countryLabel: T,
+			internationalLabel: E,
+			error: P.hasError,
+			size: M,
+			"aria-describedby": P.describedBy,
+			onChange: D,
+			onBlur: O,
+			onFocus: k
+		})
 	});
 });
 //#endregion
-export { l as InputPhoneField };
+export { c as InputPhoneField };

package/dist/input-phone.js

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