@studiolxd/brand 38.12.4

package/dist/notification-panel.js

@@ -0,0 +1,145 @@
+'use client';
+import './notification-panel.css';
+import { Icon as e } from "./icon.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { Button as n } from "./button.js";
+import { Heading as r } from "./heading.js";
+import { Paragraph as i } from "./paragraph.js";
+import { Popover as a } from "./popover.js";
+import { Text as o } from "./text.js";
+import { NotificationButton as s } from "./notification-button.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as d, useId as f, useRef as p, useState as m } from "react";
+//#region src/stories/molecules/NotificationPanel/NotificationPanel.tsx
+function h(e) {
+	let t = parseFloat(e);
+	return Number.isNaN(t) ? 0 : e.endsWith("rem") ? t * parseFloat(getComputedStyle(document.documentElement).fontSize) : t;
+}
+function g() {
+	let e = document.documentElement;
+	return h(getComputedStyle(e).getPropertyValue("--notification-panel-offset").trim());
+}
+function _({ children: e, ...t }) {
+	return /* @__PURE__ */ l("a", {
+		...t,
+		children: e
+	});
+}
+var v = "button, a[href]", y = "notification-panel__footer-link";
+function b({ items: h = [], count: b = 0, max: x, onRead: S, onMarkAllRead: C, allHref: w, preferencesHref: T, renderLink: E = _, label: D, countLabel: O, panelLabel: k = "Notificaciones", unreadLabel: A = "Sin leer", emptyLabel: j = "Estás al día", allLabel: M = "Ver todas las notificaciones", preferencesLabel: N = "Preferencias de notificaciones", markAllReadLabel: P = "Marcar todas como leídas", open: F, defaultOpen: I, onOpenChange: L, className: R }) {
+	let z = f(), B = p(null), [V, H] = m([]), U = (e) => e.unread && !V.includes(e.id), W = h.some(U), G = (e) => {
+		U(e) && (H((t) => [...t, e.id]), S(e.id));
+	}, K = () => {
+		H(h.map((e) => e.id)), C?.();
+	}, q = d(() => {
+		let e = B.current;
+		return e ? e.querySelector(".notification-panel__item-action") ?? e.querySelector(v) : null;
+	}, []), J = (e, t) => {
+		e || H([]), L?.(e, t);
+	}, Y = `${z}-title`;
+	return /* @__PURE__ */ l(a, {
+		trigger: /* @__PURE__ */ l(s, {
+			count: b,
+			max: x,
+			label: D,
+			countLabel: O
+		}),
+		label: k,
+		align: "end",
+		sideOffset: g,
+		open: F,
+		defaultOpen: I,
+		onOpenChange: J,
+		initialFocus: q,
+		className: ["notification-panel", R].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ u("div", {
+			className: "notification-panel__body",
+			ref: B,
+			children: [
+				/* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(r, {
+					level: 2,
+					size: 3,
+					id: Y,
+					children: k
+				}) }),
+				h.length === 0 ? /* @__PURE__ */ l("div", {
+					className: "notification-panel__empty",
+					children: /* @__PURE__ */ l(i, {
+						size: "small",
+						children: j
+					})
+				}) : /* @__PURE__ */ l("ul", {
+					className: "notification-panel__list",
+					"aria-labelledby": Y,
+					children: h.map((n, r) => {
+						let i = U(n), a = `${z}-t-${r}`;
+						return /* @__PURE__ */ l("li", {
+							className: "notification-panel__item",
+							children: /* @__PURE__ */ u("button", {
+								type: "button",
+								className: "notification-panel__item-action",
+								"aria-disabled": i ? void 0 : !0,
+								onClick: () => G(n),
+								children: [/* @__PURE__ */ l("span", {
+									className: "notification-panel__indicator",
+									children: i && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(e, {
+										name: "dot",
+										size: "sm",
+										className: "notification-panel__dot"
+									}), /* @__PURE__ */ l(t, { children: A })] })
+								}), /* @__PURE__ */ u("span", {
+									className: "notification-panel__item-text",
+									children: [
+										/* @__PURE__ */ l(o, {
+											id: a,
+											tone: i ? "default" : "muted",
+											className: "notification-panel__item-title",
+											children: n.title
+										}),
+										n.body && /* @__PURE__ */ l(o, {
+											tone: "muted",
+											className: "notification-panel__item-body",
+											children: n.body
+										}),
+										/* @__PURE__ */ l(o, {
+											tone: "muted",
+											className: "notification-panel__item-time",
+											children: n.time
+										})
+									]
+								})]
+							})
+						}, n.id);
+					})
+				}),
+				C && W && /* @__PURE__ */ l("div", {
+					className: "notification-panel__mark-all",
+					children: /* @__PURE__ */ l(n, {
+						variant: "outline",
+						size: "sm",
+						block: !0,
+						onClick: K,
+						children: P
+					})
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "notification-panel__footer",
+					children: /* @__PURE__ */ u("div", {
+						className: "notification-panel__footer-links",
+						children: [E({
+							href: w,
+							className: y,
+							children: M
+						}), E({
+							href: T,
+							className: y,
+							children: N
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { b as NotificationPanel };

package/dist/number-badge.css

@@ -0,0 +1 @@
+.number-badge{min-width:var(--number-badge-min-size);height:var(--number-badge-min-size);padding-inline:var(--number-badge-padding-inline);border-radius:var(--number-badge-border-radius);font-family:var(--number-badge-font-family);font-size:var(--number-badge-font-size);font-weight:var(--number-badge-font-weight);line-height:var(--number-badge-line-height);white-space:nowrap;justify-content:center;align-items:center;display:inline-flex}.number-badge--primary{background-color:var(--number-badge-primary-bg);color:var(--number-badge-primary-color)}.number-badge--accent-1{background-color:var(--number-badge-accent-1-bg);color:var(--number-badge-accent-1-color)}.number-badge--accent-2{background-color:var(--number-badge-accent-2-bg);color:var(--number-badge-accent-2-color)}.number-badge--support-1{background-color:var(--number-badge-support-1-bg);color:var(--number-badge-support-1-color)}.number-badge--support-2{background-color:var(--number-badge-support-2-bg);color:var(--number-badge-support-2-color)}.number-badge--danger{background-color:var(--number-badge-danger-bg);color:var(--number-badge-danger-color)}.number-badge--success{background-color:var(--number-badge-success-bg);color:var(--number-badge-success-color)}.number-badge--neutral{background-color:var(--number-badge-neutral-bg);color:var(--number-badge-neutral-color)}

package/dist/number-badge.js

@@ -0,0 +1,19 @@
+import './number-badge.css';
+import { jsx as e } from "react/jsx-runtime";
+//#region src/stories/atoms/NumberBadge/NumberBadge.tsx
+function t({ count: t, variant: n = "primary", max: r = 99, "aria-label": i, "aria-hidden": a, className: o }) {
+	let s = t > r ? `${r}+` : String(t), c = a === !0 || a === "true";
+	return /* @__PURE__ */ e("span", {
+		className: [
+			"number-badge",
+			`number-badge--${n}`,
+			o
+		].filter(Boolean).join(" "),
+		"aria-hidden": c || void 0,
+		"aria-label": c ? void 0 : i ?? s,
+		"aria-atomic": c ? void 0 : !0,
+		children: s
+	});
+}
+//#endregion
+export { t as NumberBadge };

package/dist/number-input-field.css

@@ -0,0 +1 @@
+.number-input-field{gap:var(--number-input-field-gap);flex-direction:column;display:flex}.number-input-field__helper{font-family:var(--number-input-field-helper-font-family);font-size:var(--number-input-field-helper-font-size);font-weight:var(--number-input-field-helper-font-weight);line-height:var(--number-input-field-helper-line-height);color:var(--number-input-field-helper-color)}

package/dist/number-input-field.js

@@ -0,0 +1,52 @@
+'use client';
+import './number-input-field.css';
+import { n as e } from "./_shared/form-size.js";
+import { ErrorText as t } from "./error-text.js";
+import { Label as n } from "./label.js";
+import { NumberInput as r } from "./number-input.js";
+import { n as i } from "./_shared/field-labels.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as s, useId as c } from "react";
+//#region src/stories/molecules/NumberInputField/NumberInputField.tsx
+var l = s(function({ id: s, label: l, labelHidden: u, value: d, defaultValue: f, min: p, max: m, step: h = 1, decimal: g, disabled: _, readOnly: v, size: y, error: b = !1, errorMessage: x, helperText: S, className: C, onChange: w, ...T }, E) {
+	let D = i(u), O = e(y), k = c(), A = s ?? k, j = x ? `${A}-error` : void 0, M = S ? `${A}-helper` : void 0, N = [j, M].filter(Boolean).join(" ") || void 0, P = b || !!x;
+	return /* @__PURE__ */ o("div", {
+		className: ["number-input-field", C].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a(n, {
+				htmlFor: A,
+				hidden: D,
+				size: O,
+				children: l
+			}),
+			/* @__PURE__ */ a(r, {
+				ref: E,
+				...T,
+				id: A,
+				value: d,
+				defaultValue: f,
+				min: p,
+				max: m,
+				step: h,
+				decimal: g,
+				disabled: _,
+				readOnly: v,
+				size: O,
+				error: P,
+				"aria-describedby": N,
+				onChange: w
+			}),
+			x && /* @__PURE__ */ a(t, {
+				id: j,
+				children: x
+			}),
+			S && /* @__PURE__ */ a("span", {
+				id: M,
+				className: "number-input-field__helper",
+				children: S
+			})
+		]
+	});
+});
+//#endregion
+export { l as NumberInputField };

package/dist/number-input.css

@@ -0,0 +1 @@
+.number-input{min-block-size:var(--number-input-height);border-radius:var(--number-input-border-radius);border-width:var(--number-input-border-width);border-style:var(--number-input-border-style);border-color:var(--number-input-border-color);background-color:var(--number-input-bg);transition:border-color var(--number-input-transition-duration) var(--number-input-transition-easing);box-sizing:border-box;align-items:stretch;display:inline-flex;overflow:hidden}.number-input.number-input--focused{box-shadow:inset 0 0 0 calc(var(--number-input-focus-ring-width) + var(--number-input-focus-ring-inset-offset)) var(--number-input-focus-ring-color), inset 0 0 0 var(--number-input-focus-ring-inset-offset) var(--number-input-bg);border-color:var(--number-input-focus-border-color);outline:none}.number-input__field{min-width:0;padding-block:0;padding-inline:var(--number-input-padding-inline);color:var(--number-input-color);font-family:var(--number-input-font-family);font-size:var(--number-input-font-size);font-weight:var(--number-input-font-weight);line-height:var(--number-input-line-height);text-align:center;-moz-appearance:textfield;background-color:#0000;border:none;outline:none;flex:1}.number-input__field::-webkit-inner-spin-button{appearance:none;margin:0}.number-input__field::-webkit-outer-spin-button{appearance:none;margin:0}.number-input__btn{width:var(--number-input-btn-width);background-color:var(--number-input-btn-bg);color:var(--number-input-btn-color);cursor:pointer;transition:box-shadow var(--number-input-transition-duration) var(--number-input-transition-easing);border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.number-input__btn:hover:not(:disabled){box-shadow:inset 0 calc(-1 * var(--number-input-btn-hover-line-width)) 0 0 var(--number-input-btn-hover-line-color)}.number-input__btn--decrement{border-inline-end-width:var(--number-input-border-width);border-inline-end-style:var(--number-input-border-style);border-inline-end-color:var(--number-input-btn-separator-color)}.number-input__btn--increment{border-inline-start-width:var(--number-input-border-width);border-inline-start-style:var(--number-input-border-style);border-inline-start-color:var(--number-input-btn-separator-color)}.number-input.number-input--error{border-color:var(--number-input-error-border-color);background-color:var(--number-input-error-bg)}.number-input.number-input--error .number-input__field{color:var(--number-input-error-color)}.number-input.number-input--error.number-input--focused{box-shadow:inset 0 0 0 calc(var(--number-input-focus-ring-width) + var(--number-input-focus-ring-inset-offset)) var(--number-input-error-focus-ring-color), inset 0 0 0 var(--number-input-focus-ring-inset-offset) var(--number-input-error-bg);border-color:var(--number-input-error-focus-border-color);outline:none}.number-input.number-input--disabled{cursor:var(--number-input-disabled-cursor);background-color:var(--number-input-disabled-bg);border-color:var(--number-input-disabled-border-color);pointer-events:none}.number-input.number-input--disabled .number-input__field{color:var(--number-input-disabled-color)}.number-input.number-input--disabled .number-input__btn{color:var(--number-input-disabled-btn-color)}.number-input.number-input--sm{--number-input-height:var(--number-input-sm-height);--number-input-padding-inline:var(--number-input-sm-padding-inline);--number-input-font-size:var(--number-input-sm-font-size)}.number-input.number-input--lg{--number-input-height:var(--number-input-lg-height);--number-input-padding-inline:var(--number-input-lg-padding-inline);--number-input-font-size:var(--number-input-lg-font-size)}

package/dist/number-input.js

@@ -0,0 +1,89 @@
+'use client';
+import './number-input.css';
+import { Icon as e } from "./icon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r, useCallback as i, useState as a } from "react";
+//#region src/stories/atoms/NumberInput/NumberInput.tsx
+var o = r(function({ value: r, defaultValue: o = 0, min: s, max: c, step: l = 1, decimal: u = !1, disabled: d = !1, readOnly: f = !1, size: p = "md", error: m = !1, id: h, name: g, describedBy: _, ariaLabel: v, decrementLabel: y = "Decrementar", incrementLabel: b = "Incrementar", className: x, onChange: S, onBlur: C, onFocus: w, ...T }, E) {
+	let D = r !== void 0, [O, k] = a(o), [A, j] = a(!1), [M, N] = a(null), P = D ? r : O, F = M === null ? String(P) : M, I = i((e) => {
+		let t = e;
+		return s !== void 0 && (t = Math.max(s, t)), c !== void 0 && (t = Math.min(c, t)), t;
+	}, [s, c]), L = i((e) => {
+		let t = I(e);
+		D || k(t), S?.(t);
+	}, [
+		I,
+		D,
+		S
+	]), R = () => {
+		d || f || (N(null), L(P - l));
+	}, z = () => {
+		d || f || (N(null), L(P + l));
+	}, B = (e) => {
+		let t = e.target.value;
+		N(t);
+		let n = u ? t.replace(",", ".") : t, r = parseFloat(n);
+		isNaN(r) || L(r);
+	}, V = (e) => {
+		j(!0), w?.(e);
+	}, H = (e) => {
+		j(!1), N(null), C?.(e);
+	}, U = [
+		"number-input",
+		p === "md" ? "" : `number-input--${p}`,
+		m ? "number-input--error" : "",
+		d ? "number-input--disabled" : "",
+		A ? "number-input--focused" : "",
+		x ?? ""
+	].filter(Boolean).join(" "), W = d || f || s !== void 0 && P <= s, G = d || f || c !== void 0 && P >= c;
+	return /* @__PURE__ */ n("div", {
+		className: U,
+		children: [
+			/* @__PURE__ */ t("button", {
+				className: "number-input__btn number-input__btn--decrement",
+				type: "button",
+				onClick: R,
+				disabled: W,
+				"aria-label": y,
+				tabIndex: -1,
+				children: /* @__PURE__ */ t(e, {
+					name: "minus",
+					size: "sm"
+				})
+			}),
+			/* @__PURE__ */ t("input", {
+				ref: E,
+				className: "number-input__field",
+				type: "text",
+				inputMode: u ? "decimal" : "numeric",
+				pattern: u ? "[0-9]*[.,]?[0-9]*" : "[0-9]*",
+				"aria-invalid": m || void 0,
+				"aria-describedby": _,
+				"aria-label": v,
+				...T,
+				id: h,
+				name: g,
+				value: F,
+				disabled: d,
+				readOnly: f,
+				onChange: B,
+				onFocus: V,
+				onBlur: H
+			}),
+			/* @__PURE__ */ t("button", {
+				className: "number-input__btn number-input__btn--increment",
+				type: "button",
+				onClick: z,
+				disabled: G,
+				"aria-label": b,
+				tabIndex: -1,
+				children: /* @__PURE__ */ t(e, {
+					name: "plus",
+					size: "sm"
+				})
+			})
+		]
+	});
+});
+//#endregion
+export { o as NumberInput };

package/dist/og.js

@@ -0,0 +1,121 @@
+import { n as e, t } from "./_shared/tokens.js";
+import { r as n, t as r } from "./_shared/logoassets.js";
+import { createElement as i } from "react";
+//#region src/stories/og/ogTypeface.ts
+var a = t("--font-family-sans").split(",")[0].trim().replace(/^["']|["']$/g, ""), o = {
+	width: 1200,
+	height: 630
+}, s = "image/png", c = t("--color-primary"), l = t("--color-accent-1"), u = e("--spacing-8"), [, , d, f] = n.split(" ").map(Number), p = 2 * Number.parseFloat(e("--logo-height-xl")), m = Math.round(p * d / f), h = Number(t("--font-weight-default")), g = Number(t("--font-weight-emphasis"));
+function _({ title: s, subtitle: d, eyebrow: f }) {
+	let _ = i("div", {
+		key: "firma",
+		style: {
+			display: "flex",
+			justifyContent: "flex-end",
+			alignItems: "flex-start"
+		}
+	}, i("svg", {
+		key: "marca",
+		width: m,
+		height: p,
+		viewBox: n,
+		fill: c,
+		children: r.map((e, t) => i("path", {
+			key: t,
+			d: e
+		}))
+	})), v = i("div", {
+		key: "cuerpo",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			flexGrow: 1,
+			justifyContent: "center",
+			gap: e("--spacing-5")
+		}
+	}, i("div", {
+		key: "titular",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: e("--spacing-2")
+		}
+	}, f ? i("div", {
+		key: "eyebrow",
+		style: {
+			display: "flex",
+			fontSize: e("--site-shell-heading-size-6"),
+			fontWeight: g,
+			color: c
+		}
+	}, f) : null, i("div", {
+		key: "titulo",
+		style: {
+			display: "flex",
+			fontSize: e("--site-shell-heading-size-9"),
+			fontWeight: g,
+			lineHeight: Number(t("--line-height-tight")),
+			color: c
+		}
+	}, s)), d ? i("div", {
+		key: "subtitulo",
+		style: {
+			display: "flex",
+			fontSize: e("--site-shell-heading-size-7"),
+			fontWeight: h,
+			lineHeight: Number(t("--line-height-snug")),
+			color: c
+		}
+	}, d) : null), y = i("div", {
+		key: "contenido",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			flexGrow: 1,
+			paddingTop: u,
+			paddingBottom: u,
+			paddingLeft: u,
+			paddingRight: u
+		}
+	}, _, v);
+	return i("div", { style: {
+		display: "flex",
+		flexDirection: "column",
+		width: o.width,
+		height: o.height,
+		backgroundColor: l,
+		color: c,
+		fontFamily: a
+	} }, y);
+}
+//#endregion
+//#region src/stories/og/ogFonts.ts
+var v = [{
+	weight: Number(t("--font-weight-default")),
+	file: "google-sans-flex-normal-300.ttf"
+}, {
+	weight: Number(t("--font-weight-emphasis")),
+	file: "google-sans-flex-normal-500.ttf"
+}], y = ["./assets/fonts/google-sans-flex/", "../../assets/fonts/google-sans-flex/"];
+function b(e) {
+	return e.buffer.slice(e.byteOffset, e.byteOffset + e.byteLength);
+}
+async function x() {
+	let { readFile: e } = await import("node:fs/promises");
+	return Promise.all(v.map(async ({ weight: t, file: n }) => {
+		let r;
+		for (let i of y) try {
+			return {
+				name: a,
+				data: b(await e(new URL(i + n, import.meta.url))),
+				weight: t,
+				style: "normal"
+			};
+		} catch (e) {
+			r = e;
+		}
+		throw Error(`No se encontró la fuente ${n} junto al módulo`, { cause: r });
+	}));
+}
+//#endregion
+export { s as OG_CONTENT_TYPE, a as OG_FONT_FAMILY, o as OG_SIZE, _ as ogCard, x as ogFonts };

package/dist/onboarding-shell.css

@@ -0,0 +1 @@
+.onboarding-shell{gap:var(--onboarding-shell-gap);display:grid}.onboarding-shell__bar{align-items:center;display:flex}.onboarding-shell__top.onboarding-shell__top--band{padding-block:var(--onboarding-shell-brand-padding-block)}.onboarding-shell__step{inline-size:100%;max-inline-size:var(--onboarding-shell-max-width);margin-inline:auto;display:grid}.onboarding-shell__step.onboarding-shell__step--wide{max-inline-size:var(--onboarding-shell-max-width-wide)}.onboarding-shell__brand{--logo-height-sm:var(--onboarding-shell-brand-height);--logo-height-md:var(--onboarding-shell-brand-height);--logo-height-lg:var(--onboarding-shell-brand-height);--logo-height-xl:var(--onboarding-shell-brand-height);--logo-height-xxl:var(--onboarding-shell-brand-height);margin-inline-start:var(--onboarding-shell-brand-margin-inline-start)}.onboarding-shell__brand>*{block-size:var(--onboarding-shell-brand-height);inline-size:auto}@media (width<=767.98px){.onboarding-shell__top{--onboarding-shell-brand-height:var(--onboarding-shell-brand-height-compact)}}@media (width<=479.98px){.onboarding-shell__top{--onboarding-shell-brand-height:var(--onboarding-shell-brand-height-narrow)}}.onboarding-shell__settings{align-items:flex-end;gap:var(--onboarding-shell-switchers-gap);flex-wrap:wrap;display:flex}.onboarding-shell__progress{margin-block-end:var(--onboarding-shell-gap)}.onboarding-shell__progress:empty{display:none}.onboarding-shell__actions{align-items:stretch;gap:var(--onboarding-shell-actions-gap);flex-direction:column;margin-block-start:var(--onboarding-shell-actions-margin-block-start);padding-block-start:var(--onboarding-shell-actions-padding-block-start);display:flex}.onboarding-shell__decisions{align-items:stretch;gap:var(--onboarding-shell-actions-gap);flex-direction:column-reverse;display:flex}.onboarding-shell__exit{justify-content:center;display:flex}@media (width>=768px){.onboarding-shell__actions,.onboarding-shell__decisions{flex-direction:row;justify-content:flex-end;align-items:center}}

package/dist/onboarding-shell.js

@@ -0,0 +1,69 @@
+'use client';
+import './onboarding-shell.css';
+import { t as e } from "./_shared/form-size.js";
+import { Container as t } from "./container.js";
+import { PublicPageShell as n } from "./public-page-shell.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/stories/templates/OnboardingShell/OnboardingShell.tsx
+function a({ children: a, brand: o, preferences: s, switchers: c, preferencesLabel: l, stepper: u, primaryAction: d, backAction: f, exitAction: p, actionsLabel: m = "Acciones del paso", id: h = "main-content", shell: g = !0, width: _ = "md", className: v }) {
+	let y = !!(d || f || p), b = s ?? c, x = o && /* @__PURE__ */ r("div", {
+		className: "onboarding-shell__brand",
+		children: o
+	});
+	return /* @__PURE__ */ r(n, {
+		id: h,
+		shell: g,
+		header: x && /* @__PURE__ */ r(t, {
+			as: "header",
+			className: "onboarding-shell__top onboarding-shell__top--band",
+			innerClassName: "onboarding-shell__bar",
+			children: x
+		}),
+		preferences: b,
+		preferencesLabel: l,
+		children: /* @__PURE__ */ i("div", {
+			className: ["onboarding-shell", v].filter(Boolean).join(" "),
+			children: [
+				!g && x && /* @__PURE__ */ r("header", {
+					className: "onboarding-shell__top onboarding-shell__bar",
+					children: x
+				}),
+				/* @__PURE__ */ r(e.Provider, {
+					value: "lg",
+					children: /* @__PURE__ */ i("div", {
+						className: ["onboarding-shell__step", _ === "wide" ? "onboarding-shell__step--wide" : ""].filter(Boolean).join(" "),
+						children: [
+							u && /* @__PURE__ */ r("div", {
+								className: "onboarding-shell__progress",
+								children: u
+							}),
+							/* @__PURE__ */ r("div", {
+								className: "onboarding-shell__body",
+								children: a
+							}),
+							y && /* @__PURE__ */ i("div", {
+								className: "onboarding-shell__actions",
+								role: "group",
+								"aria-label": m,
+								children: [f, (p || d) && /* @__PURE__ */ i("div", {
+									className: "onboarding-shell__decisions",
+									children: [p && /* @__PURE__ */ r("div", {
+										className: "onboarding-shell__exit",
+										children: p
+									}), d]
+								})]
+							})
+						]
+					})
+				}),
+				!g && b && /* @__PURE__ */ r("section", {
+					className: "onboarding-shell__settings",
+					"aria-label": l ?? "Preferencias",
+					children: b
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { a as OnboardingShell };

package/dist/org-switcher.css

@@ -0,0 +1 @@
+.org-switcher__trigger{all:unset;box-sizing:border-box;align-items:center;gap:var(--org-switcher-trigger-gap);width:auto;max-inline-size:100%;padding-block:var(--org-switcher-trigger-padding-block);padding-inline:var(--org-switcher-trigger-padding-inline);border-radius:var(--org-switcher-trigger-border-radius);cursor:pointer;transition:background-color var(--org-switcher-transition-duration) var(--org-switcher-transition-easing);display:flex}.org-switcher__trigger.org-switcher__trigger--block{width:100%}.org-switcher__trigger.org-switcher__trigger--compact{justify-content:center;padding-inline:0}.org-switcher__trigger:focus-visible{outline:var(--org-switcher-focus-ring-width) solid var(--org-switcher-focus-ring-color);outline-offset:var(--org-switcher-focus-ring-offset)}.org-switcher__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--org-switcher-name-font-size);font-weight:var(--org-switcher-name-font-weight);color:var(--org-switcher-name-color);flex:1;overflow:hidden}.org-switcher__chevron{transition:transform var(--org-switcher-transition-duration) var(--org-switcher-transition-easing);flex-shrink:0;transform:rotate(90deg)}.org-switcher__trigger[data-popup-open] .org-switcher__chevron{transform:rotate(-90deg)}@keyframes org-switcher-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes org-switcher-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.org-switcher__content{box-sizing:border-box;background-color:var(--org-switcher-content-bg);border-width:var(--org-switcher-content-border-width);border-style:solid;border-color:var(--org-switcher-content-border-color);border-radius:var(--org-switcher-content-border-radius);box-shadow:var(--org-switcher-content-shadow);padding-block:var(--org-switcher-content-padding-block);padding-inline:var(--org-switcher-content-padding-inline);min-width:var(--org-switcher-content-min-width);transform-origin:var(--transform-origin);max-height:var(--org-switcher-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.org-switcher__content[data-open]{animation:org-switcher-open var(--org-switcher-transition-duration) var(--org-switcher-transition-easing)}.org-switcher__content[data-closed]{animation:org-switcher-close var(--org-switcher-transition-duration) var(--org-switcher-transition-easing)}.org-switcher__item{align-items:center;gap:var(--org-switcher-trigger-gap);padding-block:var(--org-switcher-item-padding-block);padding-inline:var(--org-switcher-item-padding-inline);border-radius:var(--org-switcher-item-border-radius);font-size:var(--org-switcher-item-font-size);font-weight:var(--org-switcher-item-font-weight);color:var(--org-switcher-item-color);box-shadow:none;cursor:pointer;transition:background-color var(--org-switcher-transition-duration) var(--org-switcher-transition-easing), color var(--org-switcher-transition-duration) var(--org-switcher-transition-easing);outline:none;text-decoration:none;display:flex}.org-switcher__item:focus-visible{outline:none}.org-switcher__item[data-highlighted]{background-color:var(--org-switcher-item-highlighted-bg);color:var(--org-switcher-item-highlighted-color)}.org-switcher__item--active,.org-switcher__item--active[data-highlighted]{font-weight:var(--org-switcher-name-font-weight)}.org-switcher__separator{height:var(--org-switcher-separator-height);background-color:var(--org-switcher-separator-color);margin-block:var(--org-switcher-separator-margin-block);border:none}.org-switcher__item.org-switcher__item--destructive{color:var(--org-switcher-item-destructive-color)}.org-switcher__item.org-switcher__item--destructive[data-highlighted]{background-color:var(--org-switcher-item-destructive-highlighted-bg);color:var(--org-switcher-item-destructive-highlighted-color)}.org-switcher__positioner{z-index:var(--org-switcher-content-z-index)}

package/dist/org-switcher.js

@@ -0,0 +1,81 @@
+'use client';
+import './org-switcher.css';
+import { Icon as e } from "./icon.js";
+import { Avatar as t } from "./avatar.js";
+import { n, t as r } from "./_shared/dropdownitems.js";
+import { n as i } from "./_shared/sidebarcontext.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Menu as c } from "@base-ui/react/menu";
+//#region src/stories/molecules/OrgSwitcher/OrgSwitcher.tsx
+function l({ label: l, block: u = !1, compact: d, current: f, organizations: p, onOrgChange: m, defaultOpen: h, items: g, renderLink: _ = r }) {
+	let v = p.filter((e) => e.id !== f.id), y = i(), b = d ?? y.rail;
+	return /* @__PURE__ */ s(c.Root, {
+		defaultOpen: h,
+		children: [/* @__PURE__ */ s(c.Trigger, {
+			className: [
+				"org-switcher__trigger",
+				u && !b ? "org-switcher__trigger--block" : "",
+				b ? "org-switcher__trigger--compact" : ""
+			].filter(Boolean).join(" "),
+			"aria-label": l ?? `Organización: ${f.name}`,
+			children: [
+				/* @__PURE__ */ o(t, {
+					src: f.logoUrl,
+					name: f.name,
+					alt: "",
+					size: "sm",
+					shape: "square"
+				}),
+				!b && /* @__PURE__ */ o("span", {
+					className: "org-switcher__name",
+					children: f.name
+				}),
+				!b && /* @__PURE__ */ o(e, {
+					name: "chevron",
+					size: "sm",
+					className: "org-switcher__chevron"
+				})
+			]
+		}), /* @__PURE__ */ o(c.Portal, { children: /* @__PURE__ */ o(c.Positioner, {
+			className: "org-switcher__positioner",
+			sideOffset: 4,
+			align: "start",
+			children: /* @__PURE__ */ s(c.Popup, {
+				className: "org-switcher__content",
+				children: [
+					/* @__PURE__ */ s(c.CheckboxItem, {
+						className: "org-switcher__item org-switcher__item--active",
+						checked: !0,
+						onCheckedChange: () => void 0,
+						children: [/* @__PURE__ */ o(t, {
+							src: f.logoUrl,
+							name: f.name,
+							alt: "",
+							size: "sm",
+							shape: "square"
+						}), /* @__PURE__ */ o("span", { children: f.name })]
+					}),
+					v.map((e) => /* @__PURE__ */ s(c.Item, {
+						className: "org-switcher__item",
+						onClick: () => m(e.id),
+						children: [/* @__PURE__ */ o(t, {
+							src: e.logoUrl,
+							name: e.name,
+							alt: "",
+							size: "sm",
+							shape: "square"
+						}), /* @__PURE__ */ o("span", { children: e.name })]
+					}, e.id)),
+					g && g.length > 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(c.Separator, { className: "org-switcher__separator" }), n({
+						items: g,
+						itemClass: (e) => ["org-switcher__item", e ? "org-switcher__item--destructive" : ""].filter(Boolean).join(" "),
+						separatorClass: "org-switcher__separator",
+						renderLink: _
+					})] })
+				]
+			})
+		}) })]
+	});
+}
+//#endregion
+export { l as OrgSwitcher };

package/dist/otp-field.css

@@ -0,0 +1 @@
+.otp-field{gap:var(--otp-field-gap);flex-direction:column;display:flex}.otp-field__helper{font-family:var(--otp-field-helper-font-family);font-size:var(--otp-field-helper-font-size);font-weight:var(--otp-field-helper-font-weight);line-height:var(--otp-field-helper-line-height);color:var(--otp-field-helper-color)}

package/dist/otp-field.js

@@ -0,0 +1,54 @@
+'use client';
+import './otp-field.css';
+import { n as e } from "./_shared/form-size.js";
+import { ErrorText as t } from "./error-text.js";
+import { OtpInput as n } from "./otp-input.js";
+import { Label as r } from "./label.js";
+import { n as i } from "./_shared/field-labels.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as s, useId as c } from "react";
+//#region src/stories/molecules/OtpField/OtpField.tsx
+var l = s(function({ id: s, label: l, labelHidden: u, length: d, value: f, defaultValue: p, name: m, disabled: h, readOnly: g, error: _ = !1, errorMessage: v, helperText: y, size: b, className: x, digitLabel: S, onChange: C, onComplete: w, onBlur: T }, E) {
+	let D = i(u), O = e(b), k = c(), A = s ?? k, j = v ? `${A}-error` : void 0, M = y ? `${A}-helper` : void 0, N = [j, M].filter(Boolean).join(" ") || void 0, P = _ || !!v;
+	return /* @__PURE__ */ o("div", {
+		className: ["otp-field", x].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a(r, {
+				id: `${A}-label`,
+				htmlFor: `${A}-0`,
+				hidden: D,
+				size: O,
+				children: l
+			}),
+			/* @__PURE__ */ a(n, {
+				ref: E,
+				id: A,
+				name: m,
+				length: d,
+				value: f,
+				defaultValue: p,
+				disabled: h,
+				readOnly: g,
+				error: P,
+				size: O,
+				digitLabel: S,
+				"aria-labelledby": `${A}-label`,
+				"aria-describedby": N,
+				onChange: C,
+				onComplete: w,
+				onBlur: T
+			}),
+			v && /* @__PURE__ */ a(t, {
+				id: j,
+				children: v
+			}),
+			y && /* @__PURE__ */ a("span", {
+				id: M,
+				className: "otp-field__helper",
+				children: y
+			})
+		]
+	});
+});
+//#endregion
+export { l as OtpField };

package/dist/otp-input.css

@@ -0,0 +1 @@
+.otp-input{gap:var(--otp-input-gap);display:flex}.otp-input__cell{inline-size:var(--otp-input-cell-inline-size);text-align:center;padding-inline:0}