@studiolxd/brand 39.0.0 → 40.1.0

package/dist/otp-input.js

@@ -1,75 +1,75 @@
 'use client';
 import './otp-input.css';
 import { Input as e } from "./input.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as r, useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { forwardRef as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/atoms/OtpInput/OtpInput.tsx
-var c = r(function({ length: r, value: c, defaultValue: l, onChange: u, onComplete: d, disabled: f, readOnly: p, error: m = !1, size: h = "md", describedBy: g, "aria-describedby": _, "aria-label": v, "aria-labelledby": y, groupLabel: b = "Código de verificación", id: x, name: S, onBlur: C, className: w, digitLabel: T = (e, t) => `Dígito ${e} de ${t}` }, E) {
-	let D = c !== void 0, [O, k] = s(() => {
+var c = t(function({ length: t, value: c, defaultValue: l, onChange: u, onComplete: d, disabled: f, readOnly: p, error: m = !1, size: h = "md", describedBy: g, "aria-describedby": _, "aria-label": v, "aria-labelledby": y, groupLabel: b = "Código de verificación", id: x, name: S, onBlur: C, className: w, digitLabel: T = (e, t) => `Dígito ${e} de ${t}` }, E) {
+	let D = c !== void 0, [O, k] = a(() => {
 		let e = l ?? "";
-		return Array.from({ length: r }, (t, n) => e[n] ?? "");
-	}), A = o(null), j = D ? Array.from({ length: r }, (e, t) => c[t] ?? "") : O;
-	a(() => {
+		return Array.from({ length: t }, (t, n) => e[n] ?? "");
+	}), A = i(null), j = D ? Array.from({ length: t }, (e, t) => c[t] ?? "") : O;
+	r(() => {
 		if (D) return;
 		let e = A.current?.closest("form");
 		if (!e) return;
-		let t = () => {
+		let n = () => {
 			let e = l ?? "";
-			k(Array.from({ length: r }, (t, n) => e[n] ?? ""));
+			k(Array.from({ length: t }, (t, n) => e[n] ?? ""));
 		};
-		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+		return e.addEventListener("reset", n), () => e.removeEventListener("reset", n);
 	}, [
 		D,
 		l,
-		r
+		t
 	]);
-	let M = i((e) => {
+	let M = n((e) => {
 		let t = A.current?.querySelectorAll("input");
 		t?.[e] && t[e].focus();
-	}, []), N = i((e) => {
+	}, []), N = n((e) => {
 		D || k(e);
-		let t = e.join("");
-		u?.(t), e.length === r && e.every((e) => e !== "") && d?.(t);
+		let n = e.join("");
+		u?.(n), e.length === t && e.every((e) => e !== "") && d?.(n);
 	}, [
 		D,
-		r,
+		t,
 		u,
 		d
-	]), P = i((e) => (t) => {
-		let n = t.target.value.replace(/\D/g, "").slice(-1);
-		if (!n) return;
+	]), P = n((e) => (n) => {
+		let r = n.target.value.replace(/\D/g, "").slice(-1);
+		if (!r) return;
 		let i = [...j];
-		i[e] = n, N(i), e < r - 1 && M(e + 1);
+		i[e] = r, N(i), e < t - 1 && M(e + 1);
 	}, [
 		j,
-		r,
+		t,
 		M,
 		N
-	]), F = i((e) => (t) => {
-		if (t.key === "Backspace") {
-			t.preventDefault();
-			let n = [...j];
-			n[e] === "" ? e > 0 && (n[e - 1] = "", N(n), M(e - 1)) : (n[e] = "", N(n));
-		} else t.key === "ArrowLeft" ? (t.preventDefault(), e > 0 && M(e - 1)) : t.key === "ArrowRight" && (t.preventDefault(), e < r - 1 && M(e + 1));
+	]), F = n((e) => (n) => {
+		if (n.key === "Backspace") {
+			n.preventDefault();
+			let t = [...j];
+			t[e] === "" ? e > 0 && (t[e - 1] = "", N(t), M(e - 1)) : (t[e] = "", N(t));
+		} else n.key === "ArrowLeft" ? (n.preventDefault(), e > 0 && M(e - 1)) : n.key === "ArrowRight" && (n.preventDefault(), e < t - 1 && M(e + 1));
 	}, [
 		j,
-		r,
+		t,
 		M,
 		N
-	]), I = i((e) => (t) => {
-		t.preventDefault();
-		let n = t.clipboardData.getData("text").replace(/\D/g, "");
-		if (!n) return;
+	]), I = n((e) => (n) => {
+		n.preventDefault();
+		let r = n.clipboardData.getData("text").replace(/\D/g, "");
+		if (!r) return;
 		let i = [...j], a = e;
-		for (let t = 0; t < n.length && e + t < r; t++) i[e + t] = n[t], a = e + t;
-		N(i), M(Math.min(a + 1, r - 1));
+		for (let n = 0; n < r.length && e + n < t; n++) i[e + n] = r[n], a = e + n;
+		N(i), M(Math.min(a + 1, t - 1));
 	}, [
 		j,
-		r,
+		t,
 		M,
 		N
 	]);
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ s("div", {
 		ref: A,
 		role: "group",
 		"aria-label": y ? void 0 : v ?? b,
@@ -83,28 +83,28 @@ var c = r(function({ length: r, value: c, defaultValue: l, onChange: u, onComple
 			f ? "otp-input--disabled" : "",
 			w ?? ""
 		].filter(Boolean).join(" "),
-		children: [Array.from({ length: r }, (n, i) => /* @__PURE__ */ t(e, {
+		children: [Array.from({ length: t }, (n, r) => /* @__PURE__ */ o(e, {
 			className: "otp-input__cell",
-			ref: i === 0 ? E : void 0,
-			id: x ? `${x}-${i}` : void 0,
-			name: S ? `${S}-${i}` : void 0,
+			ref: r === 0 ? E : void 0,
+			id: x ? `${x}-${r}` : void 0,
+			name: S ? `${S}-${r}` : void 0,
 			type: "text",
 			size: h,
 			error: m,
 			disabled: f,
 			readOnly: p,
-			"aria-describedby": i === 0 ? g ?? _ : void 0,
+			"aria-describedby": r === 0 ? g ?? _ : void 0,
 			inputMode: "numeric",
 			pattern: "\\d*",
 			maxLength: 1,
-			autoComplete: i === 0 ? "one-time-code" : "off",
-			"aria-label": T(i + 1, r),
-			value: j[i],
-			onChange: P(i),
-			onKeyDown: F(i),
-			onPaste: I(i),
+			autoComplete: r === 0 ? "one-time-code" : "off",
+			"aria-label": T(r + 1, t),
+			value: j[r],
+			onChange: P(r),
+			onKeyDown: F(r),
+			onPaste: I(r),
 			onBlur: C
-		}, i)), S && /* @__PURE__ */ t("input", {
+		}, r)), S && /* @__PURE__ */ o("input", {
 			type: "hidden",
 			name: S,
 			value: j.join("")

package/dist/pagination.js

@@ -1,32 +1,35 @@
 'use client';
 import './pagination.css';
-import { Icon as e } from "./icon.js";
-import { Select as t } from "./select.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { Select as n } from "./select.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/molecules/Pagination/Pagination.tsx
-var i = [
-	{
-		label: "10",
-		value: "10"
-	},
-	{
-		label: "20",
-		value: "20"
-	},
-	{
-		label: "50",
-		value: "50"
-	},
-	{
-		label: "100",
-		value: "100"
-	},
-	{
-		label: "Todos",
-		value: "all"
-	}
-];
-function a(e, t) {
+function a(e) {
+	return [
+		{
+			label: "10",
+			value: "10"
+		},
+		{
+			label: "20",
+			value: "20"
+		},
+		{
+			label: "50",
+			value: "50"
+		},
+		{
+			label: "100",
+			value: "100"
+		},
+		{
+			label: e,
+			value: "all"
+		}
+	];
+}
+function o(e, t) {
 	return t <= 3 ? Array.from({ length: t }, (e, t) => t + 1) : e <= 3 ? [
 		1,
 		2,
@@ -45,21 +48,21 @@ function a(e, t) {
 		"..."
 	];
 }
-function o({ mode: o = "pages", total: s = 0, pageCount: c, page: l = 1, pageSize: u = 10, hrefs: d, previousHref: f, nextHref: p, onPrevious: m, onNext: h, onPageChange: g, hrefBuilder: _, linkComponent: v, onPageSizeChange: y, pageSizeOptions: b = i, afterPageSize: x, showTotal: S = !1, size: C = "md", ariaLabel: w = "Paginación", pageLabel: T = (e) => `Página ${e}`, previousLabel: E = "Página anterior", nextLabel: D = "Página siguiente", pagesGroupLabel: O = "Páginas", pageSizeLabel: k = "Registros por página", totalLabel: A = (e) => `${e} resultados`, className: j }) {
-	let M = _ ?? (d ? (e) => d[e] : void 0), N = v ?? "a";
-	if (o === "cursor") {
-		let t = C === "sm" ? "xs" : C === "lg" ? "md" : "sm", i = (r) => {
-			let i = r === "prev" ? f : p, a = r === "prev" ? m : h, o = !i && !a, s = r === "prev" ? E : D, c = /* @__PURE__ */ n(e, {
+function s({ mode: s = "pages", total: c = 0, pageCount: l, page: u = 1, pageSize: d = 10, hrefs: f, previousHref: p, nextHref: m, onPrevious: h, onNext: g, onPageChange: _, hrefBuilder: v, linkComponent: y, onPageSizeChange: b, pageSizeOptions: x, afterPageSize: S, showTotal: C = !1, size: w = "md", ariaLabel: T, pageLabel: E, previousLabel: D, nextLabel: O, pagesGroupLabel: k, pageSizeLabel: A, totalLabel: j, className: M }) {
+	let N = e("pagination"), P = v ?? (f ? (e) => f[e] : void 0), F = y ?? "a";
+	if (s === "cursor") {
+		let e = w === "sm" ? "xs" : w === "lg" ? "md" : "sm", n = (n) => {
+			let i = n === "prev" ? p : m, a = n === "prev" ? h : g, o = !i && !a, s = n === "prev" ? N("previous", D) : N("next", O), c = /* @__PURE__ */ r(t, {
 				name: "chevron",
-				size: t,
-				className: r === "prev" ? "pagination__chevron--prev" : void 0
+				size: e,
+				className: n === "prev" ? "pagination__chevron--prev" : void 0
 			});
-			return i ? /* @__PURE__ */ n(N, {
+			return i ? /* @__PURE__ */ r(F, {
 				href: i,
 				className: "pagination__btn pagination__btn--nav",
 				"aria-label": s,
 				children: c
-			}) : /* @__PURE__ */ n("button", {
+			}) : /* @__PURE__ */ r("button", {
 				type: "button",
 				className: "pagination__btn pagination__btn--nav",
 				disabled: o,
@@ -68,111 +71,111 @@ function o({ mode: o = "pages", total: s = 0, pageCount: c, page: l = 1, pageSiz
 				children: c
 			});
 		};
-		return /* @__PURE__ */ n("nav", {
+		return /* @__PURE__ */ r("nav", {
 			className: [
 				"pagination",
-				`pagination--${C}`,
-				j
+				`pagination--${w}`,
+				M
 			].filter(Boolean).join(" "),
-			"aria-label": w,
-			children: /* @__PURE__ */ r("div", {
+			"aria-label": N("label", T),
+			children: /* @__PURE__ */ i("div", {
 				className: "pagination__controls",
 				role: "group",
-				"aria-label": O,
-				children: [i("prev"), i("next")]
+				"aria-label": N("pagesGroup", k),
+				children: [n("prev"), n("next")]
 			})
 		});
 	}
-	if (c === void 0 && s === 0 && !x) return null;
-	let P = c ?? (u === "all" ? 1 : Math.ceil(s / u)), F = P > 1 ? a(l, P) : [];
-	function I(e, t) {
-		if (e === "...") return /* @__PURE__ */ n("span", {
+	if (l === void 0 && c === 0 && !S) return null;
+	let I = l ?? (d === "all" ? 1 : Math.ceil(c / d)), L = I > 1 ? o(u, I) : [];
+	function R(e, t) {
+		if (e === "...") return /* @__PURE__ */ r("span", {
 			className: "pagination__ellipsis",
 			"aria-hidden": "true",
 			children: "…"
 		}, `ellipsis-${t}`);
-		let r = e === l, i = ["pagination__btn", r ? "pagination__btn--current" : ""].filter(Boolean).join(" ");
-		return M && !r ? /* @__PURE__ */ n(N, {
-			href: M(e),
+		let n = e === u, i = ["pagination__btn", n ? "pagination__btn--current" : ""].filter(Boolean).join(" ");
+		return P && !n ? /* @__PURE__ */ r(F, {
+			href: P(e),
 			className: i,
-			"aria-label": T(e),
-			onClick: g ? (t) => {
-				t.preventDefault(), g(e);
+			"aria-label": N("goToPage", E)(e),
+			onClick: _ ? (t) => {
+				t.preventDefault(), _(e);
 			} : void 0,
 			children: e
-		}, e) : /* @__PURE__ */ n("button", {
+		}, e) : /* @__PURE__ */ r("button", {
 			type: "button",
 			className: i,
-			"aria-current": r ? "page" : void 0,
-			"aria-label": T(e),
-			onClick: r ? void 0 : () => g?.(e),
+			"aria-current": n ? "page" : void 0,
+			"aria-label": N("goToPage", E)(e),
+			onClick: n ? void 0 : () => _?.(e),
 			children: e
 		}, e);
 	}
-	function L(t, r, i) {
-		let a = r === "prev" ? E : D, o = /* @__PURE__ */ n(e, {
+	function z(e, n, i) {
+		let a = n === "prev" ? N("previous", D) : N("next", O), o = /* @__PURE__ */ r(t, {
 			name: "chevron",
-			size: C === "sm" ? "xs" : C === "lg" ? "md" : "sm",
-			className: r === "prev" ? "pagination__chevron--prev" : void 0
+			size: w === "sm" ? "xs" : w === "lg" ? "md" : "sm",
+			className: n === "prev" ? "pagination__chevron--prev" : void 0
 		});
-		return M && !i ? /* @__PURE__ */ n(N, {
-			href: M(t),
+		return P && !i ? /* @__PURE__ */ r(F, {
+			href: P(e),
 			className: "pagination__btn pagination__btn--nav",
 			"aria-label": a,
-			onClick: g ? (e) => {
-				e.preventDefault(), g(t);
+			onClick: _ ? (t) => {
+				t.preventDefault(), _(e);
 			} : void 0,
 			children: o
-		}) : /* @__PURE__ */ n("button", {
+		}) : /* @__PURE__ */ r("button", {
 			type: "button",
 			className: "pagination__btn pagination__btn--nav",
 			disabled: i,
 			"aria-label": a,
-			onClick: () => g?.(t),
+			onClick: () => _?.(e),
 			children: o
 		});
 	}
-	let R = S || !!y || !!x;
-	return /* @__PURE__ */ r("nav", {
+	let B = C || !!b || !!S;
+	return /* @__PURE__ */ i("nav", {
 		className: [
 			"pagination",
-			`pagination--${C}`,
-			j
+			`pagination--${w}`,
+			M
 		].filter(Boolean).join(" "),
-		"aria-label": w,
-		children: [R && /* @__PURE__ */ r("div", {
+		"aria-label": N("label", T),
+		children: [B && /* @__PURE__ */ i("div", {
 			className: "pagination__meta",
 			children: [
-				S && /* @__PURE__ */ n("span", {
+				C && /* @__PURE__ */ r("span", {
 					className: "pagination__summary",
-					children: A(s)
+					children: N("total", j)(c)
 				}),
-				y && /* @__PURE__ */ n("div", {
+				b && /* @__PURE__ */ r("div", {
 					className: "pagination__size-selector",
-					children: /* @__PURE__ */ n(t, {
-						options: b,
-						value: u === "all" ? "all" : String(u),
-						onValueChange: y,
-						"aria-label": k,
-						size: C
+					children: /* @__PURE__ */ r(n, {
+						options: x ?? a(N("allOption")),
+						value: d === "all" ? "all" : String(d),
+						onValueChange: b,
+						"aria-label": N("perPage", A),
+						size: w
 					})
 				}),
-				x && /* @__PURE__ */ n("div", {
+				S && /* @__PURE__ */ r("div", {
 					className: "pagination__after-page-size",
-					children: x
+					children: S
 				})
 			]
-		}), P > 1 && /* @__PURE__ */ r("div", {
+		}), I > 1 && /* @__PURE__ */ i("div", {
 			className: "pagination__controls",
 			role: "group",
-			"aria-label": O,
+			"aria-label": N("pagesGroup", k),
 			children: [
-				L(l - 1, "prev", l <= 1),
-				F.map((e, t) => I(e, t)),
-				L(l + 1, "next", l >= P)
+				z(u - 1, "prev", u <= 1),
+				L.map((e, t) => R(e, t)),
+				z(u + 1, "next", u >= I)
 			]
 		})]
 	});
 }
 //#endregion
-export { o as Pagination };
+export { s as Pagination };

package/dist/paragraph.js

@@ -1,13 +1,13 @@
 import './paragraph.css';
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/Paragraph/Paragraph.tsx
-var n = t(function({ size: t = "default", className: n, children: r, ...i }, a) {
-	return /* @__PURE__ */ e("p", {
+var n = e(function({ size: e = "default", className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ t("p", {
 		ref: a,
 		className: [
 			"paragraph",
-			t === "default" ? "" : `paragraph--${t}`,
+			e === "default" ? "" : `paragraph--${e}`,
 			n
 		].filter(Boolean).join(" "),
 		...i,

package/dist/password-field.js

@@ -6,55 +6,55 @@ 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 { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as c, useId as l, useState as u } from "react";
+import { forwardRef as o, useId as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/stories/molecules/PasswordField/PasswordField.tsx
-var d = c(function({ label: c, labelHidden: d = !0, error: f = !1, errorMessage: p, helperText: m, action: h, size: g, showPasswordLabel: _ = "Mostrar contraseña", hidePasswordLabel: v = "Ocultar contraseña", className: y, id: b, disabled: x, placeholder: S, ...C }, w) {
-	let T = n(g), E = l(), D = b ?? E, [O, k] = u(!1), A = p ? `${D}-error` : void 0, j = m ? `${D}-helper` : void 0, M = [A, j].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ s("div", {
+var d = o(function({ label: o, labelHidden: d = !0, error: f = !1, errorMessage: p, helperText: m, action: h, size: g, showPasswordLabel: _ = "Mostrar contraseña", hidePasswordLabel: v = "Ocultar contraseña", className: y, id: b, disabled: x, placeholder: S, ...C }, w) {
+	let T = n(g), E = s(), D = b ?? E, [O, k] = c(!1), A = p ? `${D}-error` : void 0, j = m ? `${D}-helper` : void 0, M = [A, j].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ u("div", {
 		className: ["password-field", y ?? ""].filter(Boolean).join(" "),
 		children: [
-			c && /* @__PURE__ */ o(a, {
+			o && /* @__PURE__ */ l(a, {
 				htmlFor: D,
 				hidden: d,
 				size: T,
-				children: c
+				children: o
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ u("div", {
 				className: ["password-field__wrapper", T === "md" ? "" : `password-field__wrapper--${T}`].filter(Boolean).join(" "),
-				children: [/* @__PURE__ */ o(i, {
+				children: [/* @__PURE__ */ l(i, {
 					ref: w,
 					id: D,
 					size: T,
 					error: f || !!p,
-					placeholder: S ?? (c && d ? c : void 0),
+					placeholder: S ?? (o && d ? o : void 0),
 					"aria-describedby": M,
 					...C,
 					type: O ? "text" : "password",
 					disabled: x
-				}), /* @__PURE__ */ s("button", {
+				}), /* @__PURE__ */ u("button", {
 					type: "button",
 					className: "password-field__toggle",
 					onClick: () => k((e) => !e),
 					disabled: x,
 					"aria-controls": D,
 					"aria-pressed": O,
-					children: [/* @__PURE__ */ o(t, { children: O ? v : _ }), /* @__PURE__ */ o(e, {
+					children: [/* @__PURE__ */ l(t, { children: O ? v : _ }), /* @__PURE__ */ l(e, {
 						name: O ? "eye-off" : "eye",
 						className: "password-field__icon"
 					})]
 				})]
 			}),
-			p && /* @__PURE__ */ o(r, {
+			p && /* @__PURE__ */ l(r, {
 				id: A,
 				children: p
 			}),
-			m && /* @__PURE__ */ o("span", {
+			m && /* @__PURE__ */ l("span", {
 				id: j,
 				className: "password-field__helper",
 				children: m
 			}),
-			h && /* @__PURE__ */ o("div", {
+			h && /* @__PURE__ */ l("div", {
 				className: "password-field__action",
 				children: h
 			})

package/dist/prose.js

@@ -1,9 +1,9 @@
 import './prose.css';
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/molecules/Prose/Prose.tsx
-var n = t(function({ as: t = "div", size: n = "md", measure: r = !0, className: i, children: a, ...o }, s) {
-	return /* @__PURE__ */ e(t, {
+var n = e(function({ as: e = "div", size: n = "md", measure: r = !0, className: i, children: a, ...o }, s) {
+	return /* @__PURE__ */ t(e, {
 		ref: s,
 		className: [
 			"prose",

package/dist/public-page-shell.js

@@ -3,30 +3,30 @@ import './public-page-shell.css';
 import { Container as e } from "./container.js";
 import { ErrorBoundary as t } from "./error-boundary.js";
 import { SiteShell as n } from "./site-shell.js";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
+import { forwardRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/templates/PublicPageShell/PublicPageShell.tsx
-var s = o(function({ children: o, header: s, footer: c, preferences: l, preferencesLabel: u = "Preferencias", id: d = "main-content", shell: f = !0 }, p) {
-	if (!f) return /* @__PURE__ */ i(r, { children: o });
-	let m = l && /* @__PURE__ */ i(e, {
+var s = r(function({ children: r, header: s, footer: c, preferences: l, preferencesLabel: u = "Preferencias", id: d = "main-content", shell: f = !0 }, p) {
+	if (!f) return /* @__PURE__ */ a(i, { children: r });
+	let m = l && /* @__PURE__ */ a(e, {
 		as: "section",
 		className: "public-page-shell__preferences",
 		"aria-label": u,
-		children: /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ a("div", {
 			className: "public-page-shell__preferences-row",
 			children: l
 		})
 	});
-	return /* @__PURE__ */ i(n, {
+	return /* @__PURE__ */ a(n, {
 		ref: p,
-		header: s && /* @__PURE__ */ i(t, { children: s }),
-		footer: (m || c) && /* @__PURE__ */ a(r, { children: [m && /* @__PURE__ */ i(t, { children: m }), c && /* @__PURE__ */ i(t, { children: c })] }),
-		children: /* @__PURE__ */ i(e, {
+		header: s && /* @__PURE__ */ a(t, { children: s }),
+		footer: (m || c) && /* @__PURE__ */ o(i, { children: [m && /* @__PURE__ */ a(t, { children: m }), c && /* @__PURE__ */ a(t, { children: c })] }),
+		children: /* @__PURE__ */ a(e, {
 			as: "main",
 			id: d,
 			tabIndex: -1,
 			space: "xl",
-			children: o
+			children: r
 		})
 	});
 });

package/dist/radio-field.js

@@ -4,12 +4,12 @@ import { n as e } from "./_shared/form-size.js";
 import { n as t } from "./_shared/radiogroupcontext.js";
 import { Radio as n } from "./radio.js";
 import { ErrorText as r } from "./error-text.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as o, useId as s } from "react";
+import { forwardRef as i, useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/molecules/RadioField/RadioField.tsx
-var c = o(function({ label: o, id: c, size: l, disabled: u, error: d = !1, errorMessage: f, helperText: p, className: m, ...h }, g) {
-	let _ = t(), v = e(l ?? _?.size), y = s(), b = c ?? y, x = f ? `${b}-error` : void 0, S = p ? `${b}-helper` : void 0, C = [x, S].filter(Boolean).join(" ") || void 0, w = d || !!f || (_?.error ?? !1), T = u ?? _?.disabled;
-	return /* @__PURE__ */ a("div", {
+var c = i(function({ label: i, id: c, size: l, disabled: u, error: d = !1, errorMessage: f, helperText: p, className: m, ...h }, g) {
+	let _ = t(), v = e(l ?? _?.size), y = a(), b = c ?? y, x = f ? `${b}-error` : void 0, S = p ? `${b}-helper` : void 0, C = [x, S].filter(Boolean).join(" ") || void 0, w = d || !!f || (_?.error ?? !1), T = u ?? _?.disabled;
+	return /* @__PURE__ */ s("div", {
 		className: [
 			"radio-field",
 			v === "md" ? "" : `radio-field--${v}`,
@@ -17,10 +17,10 @@ var c = o(function({ label: o, id: c, size: l, disabled: u, error: d = !1, error
 			m
 		].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ a("label", {
+			/* @__PURE__ */ s("label", {
 				className: "radio-field__control",
 				htmlFor: b,
-				children: [/* @__PURE__ */ i(n, {
+				children: [/* @__PURE__ */ o(n, {
 					ref: g,
 					...h,
 					id: b,
@@ -28,16 +28,16 @@ var c = o(function({ label: o, id: c, size: l, disabled: u, error: d = !1, error
 					disabled: T,
 					error: w,
 					"aria-describedby": C
-				}), /* @__PURE__ */ i("span", {
+				}), /* @__PURE__ */ o("span", {
 					className: "radio-field__label",
-					children: o
+					children: i
 				})]
 			}),
-			f && /* @__PURE__ */ i(r, {
+			f && /* @__PURE__ */ o(r, {
 				id: x,
 				children: f
 			}),
-			p && /* @__PURE__ */ i("span", {
+			p && /* @__PURE__ */ o("span", {
 				id: S,
 				className: "radio-field__helper",
 				children: p