@studiolxd/brand 38.12.4

package/dist/prose.js

@@ -0,0 +1,19 @@
+import './prose.css';
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+//#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, {
+		ref: s,
+		className: [
+			"prose",
+			n === "md" ? "" : `prose--${n}`,
+			r ? "" : "prose--full",
+			i ?? ""
+		].filter(Boolean).join(" "),
+		...o,
+		children: a
+	});
+});
+//#endregion
+export { n as Prose };

package/dist/public-page-shell.css

@@ -0,0 +1 @@
+.public-page-shell__preferences{padding-block:var(--public-page-shell-preferences-padding-block)}.public-page-shell__preferences-row{align-items:flex-end;gap:var(--public-page-shell-preferences-gap);flex-wrap:wrap;display:flex}

package/dist/public-page-shell.js

@@ -0,0 +1,34 @@
+'use client';
+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";
+//#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, {
+		as: "section",
+		className: "public-page-shell__preferences",
+		"aria-label": u,
+		children: /* @__PURE__ */ i("div", {
+			className: "public-page-shell__preferences-row",
+			children: l
+		})
+	});
+	return /* @__PURE__ */ i(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, {
+			as: "main",
+			id: d,
+			tabIndex: -1,
+			space: "xl",
+			children: o
+		})
+	});
+});
+//#endregion
+export { s as PublicPageShell };

package/dist/radio-field.css

@@ -0,0 +1 @@
+.radio-field{align-items:flex-start;gap:var(--radio-field-stack-gap);flex-direction:column;display:flex}.radio-field__control{align-items:flex-start;gap:var(--radio-field-gap);padding-block:var(--radio-field-padding-block);cursor:var(--radio-field-cursor);display:flex}.radio-field .radio{margin-block-start:calc((var(--radio-field-label-line-height) * var(--radio-field-label-font-size) - var(--radio-size)) / 2)}.radio-field__label{font-family:var(--radio-field-label-font-family);font-size:var(--radio-field-label-font-size);font-weight:var(--radio-field-label-font-weight);line-height:var(--radio-field-label-line-height);color:var(--radio-field-label-color);letter-spacing:var(--radio-field-label-letter-spacing)}.radio-field__label a{color:var(--link-color);cursor:var(--link-cursor)}.radio-field__label a:hover{color:var(--link-hover-color)}.radio-field__label a:focus-visible{outline:var(--link-focus-ring-width) solid var(--link-focus-ring-color);outline-offset:var(--link-focus-ring-offset)}.radio-field.radio-field--disabled .radio-field__control{cursor:var(--radio-field-disabled-cursor)}.radio-field__helper{font-family:var(--radio-field-helper-font-family);font-size:var(--radio-field-helper-font-size);font-weight:var(--radio-field-helper-font-weight);line-height:var(--radio-field-helper-line-height);color:var(--radio-field-helper-color)}.radio-field.radio-field--sm{--radio-field-gap:var(--radio-field-sm-gap);--radio-field-padding-block:var(--radio-field-sm-padding-block);--radio-field-label-font-size:var(--radio-field-sm-label-font-size)}.radio-field.radio-field--lg{--radio-field-gap:var(--radio-field-lg-gap);--radio-field-padding-block:var(--radio-field-lg-padding-block);--radio-field-label-font-size:var(--radio-field-lg-label-font-size)}

package/dist/radio-field.js

@@ -0,0 +1,49 @@
+'use client';
+import './radio-field.css';
+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";
+//#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", {
+		className: [
+			"radio-field",
+			v === "md" ? "" : `radio-field--${v}`,
+			T ? "radio-field--disabled" : "",
+			m
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a("label", {
+				className: "radio-field__control",
+				htmlFor: b,
+				children: [/* @__PURE__ */ i(n, {
+					ref: g,
+					...h,
+					id: b,
+					size: v,
+					disabled: T,
+					error: w,
+					"aria-describedby": C
+				}), /* @__PURE__ */ i("span", {
+					className: "radio-field__label",
+					children: o
+				})]
+			}),
+			f && /* @__PURE__ */ i(r, {
+				id: x,
+				children: f
+			}),
+			p && /* @__PURE__ */ i("span", {
+				id: S,
+				className: "radio-field__helper",
+				children: p
+			})
+		]
+	});
+});
+//#endregion
+export { c as RadioField };

package/dist/radio-group.css

@@ -0,0 +1 @@
+:root{--radio-group-gap:var(--spacing-2);--radio-group-gap-horizontal:var(--spacing-5)}.radio-group{gap:var(--radio-group-gap);flex-direction:column;display:flex}.radio-group.radio-group--horizontal{align-items:center;gap:var(--radio-group-gap-horizontal);flex-flow:wrap}

package/dist/radio-group.js

@@ -0,0 +1,33 @@
+'use client';
+import './radio-group.css';
+import { t as e } from "./_shared/radiogroupcontext.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useCallback as n, useId as r, useState as i } from "react";
+//#region src/stories/atoms/RadioGroup/RadioGroup.tsx
+function a({ value: a, defaultValue: o, onValueChange: s, name: c, disabled: l, size: u, error: d, orientation: f = "vertical", children: p, className: m, ...h }) {
+	let g = r(), [_, v] = i(o), y = a !== void 0, b = y ? a : _, x = n((e) => {
+		y || v(e), s?.(e);
+	}, [y, s]), S = [
+		"radio-group",
+		f === "horizontal" ? "radio-group--horizontal" : "",
+		m ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t(e.Provider, {
+		value: {
+			name: c ?? g,
+			value: b,
+			select: x,
+			disabled: l,
+			size: u,
+			error: d
+		},
+		children: /* @__PURE__ */ t("div", {
+			role: "radiogroup",
+			className: S,
+			...h,
+			children: p
+		})
+	});
+}
+//#endregion
+export { a as RadioGroup };

package/dist/radio.css

@@ -0,0 +1 @@
+.radio{appearance:none;box-sizing:border-box;width:var(--radio-size);height:var(--radio-size);border-width:var(--radio-border-width);border-style:var(--radio-border-style);border-color:var(--radio-border-color);border-radius:var(--radio-border-radius);background-color:var(--radio-bg);cursor:var(--radio-cursor);transition:border-color var(--radio-transition-duration) var(--radio-transition-easing);flex-shrink:0;place-content:center;display:grid;position:relative}.radio:after{content:"";inline-size:max(100%, var(--radio-target-size));block-size:max(100%, var(--radio-target-size));position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.radio:before{content:"";width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-color);transition:transform var(--radio-transition-duration) var(--radio-transition-easing);border-radius:50%;transform:scale(0)}.radio:checked:before{transform:scale(1)}.radio.radio--error{border-color:var(--radio-error-border-color)}.radio:focus-visible{outline:var(--radio-focus-ring-width) solid var(--radio-focus-ring-color);outline-offset:var(--radio-focus-ring-offset)}.radio:disabled{border-color:var(--radio-disabled-border-color);cursor:var(--radio-disabled-cursor);pointer-events:none}.radio:disabled:checked:before{background-color:var(--radio-disabled-dot-color)}.radio.radio--sm{--radio-size:var(--radio-sm-size);--radio-dot-size:var(--radio-sm-dot-size)}.radio.radio--lg{--radio-size:var(--radio-lg-size);--radio-dot-size:var(--radio-lg-dot-size)}

package/dist/radio.js

@@ -0,0 +1,30 @@
+'use client';
+import './radio.css';
+import { n as e } from "./_shared/radiogroupcontext.js";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+//#region src/stories/atoms/Radio/Radio.tsx
+var r = n(function({ size: n, error: r, className: i, ...a }, o) {
+	let s = e(), c = n ?? s?.size ?? "md", l = r ?? s?.error ?? !1, u = a.name ?? s?.name, d = a.disabled ?? s?.disabled, f = a.checked ?? (s && a.value !== void 0 ? s.value === a.value : void 0), p = [
+		"radio",
+		c === "md" ? "" : `radio--${c}`,
+		l ? "radio--error" : "",
+		i ?? ""
+	].filter(Boolean).join(" ");
+	function m(e) {
+		a.onChange?.(e), s && e.target.checked && s.select(e.target.value);
+	}
+	return /* @__PURE__ */ t("input", {
+		ref: o,
+		className: p,
+		"aria-invalid": l || void 0,
+		...a,
+		name: u,
+		disabled: d,
+		checked: f,
+		onChange: s ? m : a.onChange,
+		type: "radio"
+	});
+});
+//#endregion
+export { r as Radio };

package/dist/recovery-codes.css

@@ -0,0 +1 @@
+.recovery-codes__list{columns:1;column-gap:var(--recovery-codes-column-gap);margin:0;padding-inline-start:var(--recovery-codes-padding-inline-start);list-style:decimal}@media (width>=480px){.recovery-codes__list[data-columns="2"]{columns:2}.recovery-codes__list[data-columns="3"]{columns:3}}.recovery-codes__item{break-inside:avoid;margin-block-end:var(--recovery-codes-item-margin-block-end)}.recovery-codes__code{font-family:var(--recovery-codes-font-family);font-size:var(--recovery-codes-font-size);line-height:var(--recovery-codes-line-height);color:var(--recovery-codes-color)}.recovery-codes__list::marker{color:var(--recovery-codes-index-color);font-family:var(--recovery-codes-font-family)}.recovery-codes__item::marker{color:var(--recovery-codes-index-color);font-family:var(--recovery-codes-font-family)}.recovery-codes__actions{margin-block-start:var(--recovery-codes-actions-margin-block-start)}@media print{.recovery-codes__actions{display:none}}

package/dist/recovery-codes.js

@@ -0,0 +1,35 @@
+'use client';
+import './recovery-codes.css';
+import { Inline as e } from "./inline.js";
+import { CopyButton as t } from "./copy-button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/stories/molecules/RecoveryCodes/RecoveryCodes.tsx
+function i({ codes: i, columns: a = 2, labels: o, actions: s, className: c, id: l }) {
+	return /* @__PURE__ */ r("div", {
+		className: ["recovery-codes", c].filter(Boolean).join(" "),
+		id: l,
+		children: [/* @__PURE__ */ n("ol", {
+			className: "recovery-codes__list",
+			"aria-label": o.list,
+			"data-columns": a,
+			children: i.map((e, t) => /* @__PURE__ */ n("li", {
+				className: "recovery-codes__item",
+				children: /* @__PURE__ */ n("code", {
+					className: "recovery-codes__code",
+					children: e
+				})
+			}, t))
+		}), /* @__PURE__ */ r(e, {
+			gap: "sm",
+			className: "recovery-codes__actions",
+			children: [/* @__PURE__ */ n(t, {
+				value: () => i.join("\n"),
+				copiedLabel: o.copied,
+				variant: "outline",
+				children: o.copy
+			}), s]
+		})]
+	});
+}
+//#endregion
+export { i as RecoveryCodes };

package/dist/scroll-area.css

@@ -0,0 +1 @@
+.scroll-area{position:relative;overflow:hidden}.scroll-area__viewport{overscroll-behavior:contain;block-size:100%}.scroll-area__viewport:focus-visible{outline:var(--scroll-area-focus-ring-width) solid var(--scroll-area-focus-ring-color);outline-offset:var(--scroll-area-focus-ring-offset)}.scroll-area__scrollbar{background-color:var(--scroll-area-scrollbar-bg);opacity:0;transition:opacity var(--scroll-area-transition-duration) var(--scroll-area-transition-easing);display:flex}.scroll-area__scrollbar[data-orientation=vertical]{inline-size:var(--scroll-area-scrollbar-size)}.scroll-area__scrollbar[data-orientation=horizontal]{block-size:var(--scroll-area-scrollbar-size);flex-direction:column}.scroll-area__scrollbar[data-hovering],.scroll-area__scrollbar[data-scrolling]{opacity:1}.scroll-area__thumb{background-color:var(--scroll-area-thumb-bg);border-radius:var(--scroll-area-thumb-border-radius);transition:background-color var(--scroll-area-transition-duration) var(--scroll-area-transition-easing);flex:1}.scroll-area__thumb:hover,.scroll-area__scrollbar[data-scrolling] .scroll-area__thumb{background-color:var(--scroll-area-thumb-hover-bg)}.scroll-area__corner{background-color:var(--scroll-area-scrollbar-bg)}

package/dist/scroll-area.js

@@ -0,0 +1,37 @@
+'use client';
+import './scroll-area.css';
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { ScrollArea as r } from "@base-ui/react/scroll-area";
+//#region src/stories/atoms/ScrollArea/ScrollArea.tsx
+var i = n(function({ orientation: n = "vertical", label: i, children: a, className: o, ...s }, c) {
+	let l = n === "vertical" || n === "both", u = n === "horizontal" || n === "both";
+	return /* @__PURE__ */ t(r.Root, {
+		ref: c,
+		className: ["scroll-area", o].filter(Boolean).join(" "),
+		...s,
+		children: [
+			/* @__PURE__ */ e(r.Viewport, {
+				className: "scroll-area__viewport",
+				role: i ? "region" : void 0,
+				"aria-label": i,
+				children: a
+			}),
+			l && /* @__PURE__ */ e(r.Scrollbar, {
+				keepMounted: !0,
+				orientation: "vertical",
+				className: "scroll-area__scrollbar",
+				children: /* @__PURE__ */ e(r.Thumb, { className: "scroll-area__thumb" })
+			}),
+			u && /* @__PURE__ */ e(r.Scrollbar, {
+				keepMounted: !0,
+				orientation: "horizontal",
+				className: "scroll-area__scrollbar",
+				children: /* @__PURE__ */ e(r.Thumb, { className: "scroll-area__thumb" })
+			}),
+			l && u && /* @__PURE__ */ e(r.Corner, { className: "scroll-area__corner" })
+		]
+	});
+});
+//#endregion
+export { i as ScrollArea };

package/dist/search-form.css

@@ -0,0 +1 @@
+.search-form{inline-size:var(--search-form-inline-size);align-items:flex-end;display:flex}.search-form.search-form--sm{--search-form-submit-slot-size:var(--search-form-submit-sm-slot-size);--search-form-submit-icon-size:var(--search-form-submit-sm-icon-size);--search-form-submit-input-padding-inline-end:var(--search-form-submit-sm-slot-size)}.search-form.search-form--lg{--search-form-submit-slot-size:var(--search-form-submit-lg-slot-size);--search-form-submit-icon-size:var(--search-form-submit-lg-icon-size);--search-form-submit-input-padding-inline-end:var(--search-form-submit-lg-slot-size)}.search-form.search-form--xl{--search-form-submit-slot-size:var(--search-form-xl-slot-size);--search-form-submit-icon-size:var(--search-form-xl-icon-size);--search-form-submit-input-padding-inline-end:var(--search-form-xl-slot-size)}.search-form.search-form--xl .search-form__field .input{--input-height:var(--search-form-xl-height);--input-padding-inline:var(--search-form-xl-padding-inline);--input-font-size:var(--search-form-xl-font-size)}.search-form__field{flex:auto;min-inline-size:0}.search-form__field .input{padding-inline-end:var(--search-form-submit-input-padding-inline-end)}.search-form__submit{inline-size:var(--search-form-submit-slot-size);block-size:var(--search-form-submit-slot-size);cursor:pointer;color:var(--search-form-submit-color);transition:color var(--input-transition-duration) var(--input-transition-easing);background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-start:calc(-1 * var(--search-form-submit-slot-size));padding-block:0;padding-inline:0;display:flex}.search-form__submit:hover{color:var(--search-form-submit-hover-color)}.search-form__submit:focus-visible{outline:var(--search-form-submit-focus-ring-width) solid var(--search-form-submit-focus-ring-color);outline-offset:calc(-1 * var(--input-border-width))}.search-form__submit:disabled{color:var(--search-form-submit-disabled-color);cursor:var(--input-disabled-cursor)}.search-form__submit-glyph{inline-size:var(--search-form-submit-icon-size);block-size:var(--search-form-submit-icon-size)}

package/dist/search-form.js

@@ -0,0 +1,55 @@
+'use client';
+import './search-form.css';
+import { Icon as e } from "./icon.js";
+import { n as t } from "./_shared/form-size.js";
+import { InputField as n } from "./input-field.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as a, useId as o } from "react";
+//#region src/stories/molecules/SearchForm/SearchForm.tsx
+var s = a(function({ id: a, name: s = "q", value: c, defaultValue: l, onChange: u, onSubmit: d, action: f, method: p = "get", label: m = "Buscar", labelHidden: h = !0, placeholder: g = "Buscar…", submitLabel: _ = "Buscar", size: v, disabled: y }, b) {
+	let x = t(v === "xl" ? void 0 : v), S = v === "xl" ? "xl" : x, C = S === "xl" ? "lg" : S, w = o(), T = a ?? w;
+	function E(e) {
+		let t = String(new FormData(e.currentTarget).get(s) ?? "").trim();
+		if (d) {
+			e.preventDefault(), t && d(t);
+			return;
+		}
+		t || e.preventDefault();
+	}
+	return /* @__PURE__ */ i("form", {
+		className: ["search-form", S === "md" ? "" : `search-form--${S}`].filter(Boolean).join(" "),
+		role: "search",
+		"aria-label": m,
+		action: f,
+		method: p,
+		onSubmit: E,
+		children: [/* @__PURE__ */ r(n, {
+			ref: b,
+			className: "search-form__field",
+			id: T,
+			name: s,
+			label: m,
+			labelHidden: h,
+			type: "text",
+			autoComplete: "off",
+			enterKeyHint: "search",
+			placeholder: g,
+			value: c,
+			defaultValue: l,
+			disabled: y,
+			size: C,
+			onChange: u
+		}), /* @__PURE__ */ r("button", {
+			className: "search-form__submit",
+			type: "submit",
+			disabled: y,
+			"aria-label": _,
+			children: /* @__PURE__ */ r(e, {
+				name: "arrow",
+				className: "search-form__submit-glyph"
+			})
+		})]
+	});
+});
+//#endregion
+export { s as SearchForm };

package/dist/select-field.css

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

package/dist/select-field.js

@@ -0,0 +1,67 @@
+'use client';
+import './select-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 { Select as r, isSelectOptionGroup as i } from "./select.js";
+import { n as a } from "./_shared/field-labels.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as c, useId as l } from "react";
+//#region src/stories/molecules/SelectField/SelectField.tsx
+var u = "__empty__";
+function d(e, t) {
+	return e === "" ? t ? u : void 0 : e;
+}
+function f(e) {
+	return e === u ? "" : e;
+}
+function p(e) {
+	return e.value === "" ? {
+		...e,
+		value: u
+	} : e;
+}
+var m = c(function({ id: c, label: u, labelHidden: m, options: h, value: g, defaultValue: _, placeholder: v, name: y, disabled: b, required: x, size: S, error: C = !1, errorMessage: w, helperText: T, className: E, onValueChange: D, onBlur: O }, k) {
+	let A = a(m), j = e(S), M = l(), N = c ?? M, P = w ? `${N}-error` : void 0, F = T ? `${N}-helper` : void 0, I = [P, F].filter(Boolean).join(" ") || void 0, L = C || !!w, R = h.some((e) => i(e) ? e.options.some((e) => e.value === "") : e.value === ""), z = R ? h.map((e) => i(e) ? {
+		...e,
+		options: e.options.map(p)
+	} : p(e)) : h;
+	return /* @__PURE__ */ s("div", {
+		className: ["select-field", E].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ o(n, {
+				htmlFor: N,
+				hidden: A,
+				size: j,
+				children: u
+			}),
+			/* @__PURE__ */ o(r, {
+				ref: k,
+				id: N,
+				name: y,
+				required: x,
+				options: z,
+				value: d(g, R),
+				defaultValue: d(_, R),
+				placeholder: v,
+				disabled: b,
+				size: j,
+				"aria-describedby": I,
+				"aria-invalid": L,
+				onValueChange: D ? (e) => D(f(e)) : void 0,
+				onBlur: O
+			}),
+			w && /* @__PURE__ */ o(t, {
+				id: P,
+				children: w
+			}),
+			T && /* @__PURE__ */ o("span", {
+				id: F,
+				className: "select-field__helper",
+				children: T
+			})
+		]
+	});
+});
+//#endregion
+export { m as SelectField };

package/dist/select.css

@@ -0,0 +1 @@
+.select{justify-content:space-between;align-items:center;gap:var(--select-icon-gap);block-size:var(--select-height);padding-block:0;padding-inline:var(--select-padding-inline);font-family:var(--select-font-family);font-size:var(--select-font-size);line-height:var(--select-line-height);font-weight:var(--select-font-weight);color:var(--select-color);background-color:var(--select-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-border-color);border-radius:var(--select-border-radius);box-sizing:border-box;cursor:pointer;width:100%;display:inline-flex}.select:focus,.select[data-popup-open]{outline:none}.select:focus-visible{outline:var(--select-focus-ring-width) solid var(--select-focus-ring-color);outline-offset:calc(-1 * (var(--select-focus-ring-width) + var(--select-border-width)))}.select__icon{transition:transform var(--select-icon-transition) var(--motion-easing-default);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .select__icon{transform:rotate(-90deg)}.select__positioner{z-index:var(--select-content-z-index)}.select__content{background-color:var(--select-content-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-content-border-color);min-width:var(--anchor-width);max-height:var(--select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.select__content[data-side=bottom]{border-top:none}.select__content[data-side=top]{border-bottom:none}.select__item{width:100%;padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-size:var(--select-font-size);font-family:var(--select-font-family);cursor:pointer;align-items:center;display:flex}.select__item[data-highlighted]{background-color:var(--select-item-highlighted-bg);color:var(--select-item-highlighted-color)}.select__item[data-selected]{font-weight:var(--select-item-selected-font-weight)}.select__content .select__item+.select__item,.select__content[data-side=bottom] .select__item:first-child{border-top:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__item:last-child{border-bottom:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select.select--sm{block-size:var(--select-sm-height);font-size:var(--select-sm-font-size);padding-inline:var(--select-sm-padding-inline)}.select__content--sm .select__item{font-size:var(--select-sm-font-size);padding-block:var(--select-sm-item-padding-block)}.select.select--lg{block-size:var(--select-lg-height);font-size:var(--select-lg-font-size);padding-inline:var(--select-lg-padding-inline)}.select__content--lg .select__item{font-size:var(--select-lg-font-size);padding-block:var(--select-lg-item-padding-block)}.select__content .select__group:not(:first-child)>.select__label,.select__content[data-side=bottom] .select__group:first-child>.select__label,.select__content .select__group+.select__item{border-top:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__group:last-child>.select__item:last-child{border-bottom:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__label{padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-family:var(--label-font-family);font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);color:var(--label-color);letter-spacing:var(--label-letter-spacing)}.select__separator{height:var(--select-separator-height);background-color:var(--select-separator-color);margin-block:var(--select-item-padding-block)}.select[aria-invalid=true]{border-color:var(--select-error-border-color)}

package/dist/select.js

@@ -0,0 +1,156 @@
+'use client';
+import './select.css';
+import { Icon as e } from "./icon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Children as r, createContext as i, forwardRef as a, isValidElement as o, useContext as s, useMemo as c } from "react";
+import { Select as l } from "@base-ui/react/select";
+//#region src/stories/atoms/Select/Select.tsx
+function u(e) {
+	return Array.isArray(e.options);
+}
+var d = i(null);
+function f(e, t) {
+	r.forEach(e, (e) => {
+		if (!o(e)) return;
+		let n = e.props ?? {};
+		if (e.type === v || typeof n.value == "string" && e.type !== p) {
+			typeof n.value == "string" && t.set(n.value, n.children);
+			return;
+		}
+		n.children != null && f(n.children, t);
+	});
+}
+function p({ children: e, onValueChange: n, ...r }) {
+	let i = c(() => {
+		let t = /* @__PURE__ */ new Map();
+		return f(e, t), t;
+	}, [e]);
+	return /* @__PURE__ */ t(d.Provider, {
+		value: i,
+		children: /* @__PURE__ */ t(l.Root, {
+			onValueChange: n ? (e) => n(e) : void 0,
+			...r,
+			children: e
+		})
+	});
+}
+var m = a(function({ placeholder: e, children: n, ...r }, i) {
+	let a = s(d);
+	return /* @__PURE__ */ t(l.Value, {
+		ref: i,
+		...r,
+		children: (t) => typeof n == "function" ? n(t) : n ?? (t == null || t === "" ? e ?? null : a?.get(t) ?? t)
+	});
+}), h = a(function({ className: e, children: n, ...r }, i) {
+	let a = ["select__group", e ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t(l.Group, {
+		ref: i,
+		className: a,
+		...r,
+		children: n
+	});
+}), g = a(function({ size: r = "md", className: i, children: a, ...o }, s) {
+	let c = [
+		"select",
+		r === "md" ? "" : `select--${r}`,
+		i ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n(l.Trigger, {
+		ref: s,
+		className: c,
+		...o,
+		children: [a, /* @__PURE__ */ t(e, {
+			name: "chevron",
+			className: "select__icon",
+			size: r === "sm" ? "xs" : r === "lg" ? "md" : "sm"
+		})]
+	});
+}), _ = a(function({ size: e = "md", container: n, className: r, children: i, side: a = "bottom", align: o = "start", sideOffset: s = -1, ...c }, u) {
+	let d = [
+		"select__content",
+		e === "md" ? "" : `select__content--${e}`,
+		r ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t(l.Portal, {
+		container: n,
+		children: /* @__PURE__ */ t(l.Positioner, {
+			className: "select__positioner",
+			side: a,
+			align: o,
+			sideOffset: s,
+			alignItemWithTrigger: !1,
+			children: /* @__PURE__ */ t(l.Popup, {
+				ref: u,
+				className: d,
+				...c,
+				children: i
+			})
+		})
+	});
+}), v = a(function({ className: e, children: n, ...r }, i) {
+	let a = ["select__item", e ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t(l.Item, {
+		ref: i,
+		className: a,
+		...r,
+		children: /* @__PURE__ */ t(l.ItemText, { children: n })
+	});
+}), y = a(function({ className: e, children: n, ...r }, i) {
+	let a = ["select__label", e ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t(l.GroupLabel, {
+		ref: i,
+		className: a,
+		...r,
+		children: n
+	});
+}), b = a(function({ className: e, ...n }, r) {
+	let i = ["select__separator", e ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t(l.Separator, {
+		ref: r,
+		className: i,
+		...n
+	});
+});
+function x({ value: e, label: n, "aria-label": r }) {
+	return /* @__PURE__ */ t(v, {
+		value: e,
+		"aria-label": r,
+		children: n
+	}, e);
+}
+var S = a(function({ options: e, value: r, defaultValue: i, placeholder: a = "Seleccionar…", disabled: o, readOnly: s, size: c = "md", onValueChange: l, id: d, name: f, required: v, onBlur: b, "aria-label": S, "aria-describedby": C, "aria-invalid": w, container: T }, E) {
+	return /* @__PURE__ */ n(p, {
+		value: r,
+		defaultValue: i,
+		disabled: o,
+		readOnly: s,
+		name: f,
+		required: v,
+		onValueChange: l,
+		children: [/* @__PURE__ */ t(g, {
+			ref: E,
+			size: c,
+			id: d,
+			onBlur: b,
+			"aria-label": S,
+			"aria-describedby": C,
+			"aria-invalid": w || void 0,
+			children: /* @__PURE__ */ t(m, { placeholder: a })
+		}), /* @__PURE__ */ t(_, {
+			size: c,
+			container: T,
+			children: e.map((e, r) => u(e) ? /* @__PURE__ */ n(h, { children: [/* @__PURE__ */ t(y, { children: e.label }), e.options.map(x)] }, `group-${r}`) : x(e))
+		})]
+	});
+}), C = Object.assign(S, {
+	Root: p,
+	Trigger: g,
+	Value: m,
+	Content: _,
+	Group: h,
+	Label: y,
+	Item: v,
+	Separator: b
+});
+//#endregion
+export { C as Select, _ as SelectContent, h as SelectGroup, v as SelectItem, y as SelectLabel, p as SelectRoot, b as SelectSeparator, g as SelectTrigger, m as SelectValue, u as isSelectOptionGroup };

package/dist/separator.css

@@ -0,0 +1 @@
+.separator{background-color:var(--separator-color);block-size:var(--separator-thickness);inline-size:100%;margin:0;margin-block:var(--separator-spacing-md);border:none;flex-shrink:0}.separator.separator--sm{margin-block:var(--separator-spacing-sm)}.separator.separator--lg{margin-block:var(--separator-spacing-lg)}.separator.separator--vertical{inline-size:var(--separator-thickness);block-size:auto;margin-block:0;margin-inline:var(--separator-spacing-md);align-self:stretch}.separator.separator--vertical.separator--sm{margin-inline:var(--separator-spacing-sm)}.separator.separator--vertical.separator--lg{margin-inline:var(--separator-spacing-lg)}

package/dist/separator.js

@@ -0,0 +1,19 @@
+import './separator.css';
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+//#region src/stories/atoms/Separator/Separator.tsx
+var n = t(function({ orientation: t = "horizontal", decorative: n = !0, spacing: r = "md", className: i, ...a }, o) {
+	return /* @__PURE__ */ e("hr", {
+		ref: o,
+		className: [
+			"separator",
+			t === "vertical" ? "separator--vertical" : "",
+			r === "md" ? "" : `separator--${r}`,
+			i ?? ""
+		].filter(Boolean).join(" "),
+		...n ? { role: "none" } : t === "vertical" ? { "aria-orientation": "vertical" } : {},
+		...a
+	});
+});
+//#endregion
+export { n as Separator };

package/dist/sheet.css

@@ -0,0 +1 @@
+.sheet__overlay{--dialog-overlay-bg:var(--sheet-backdrop-bg);--dialog-overlay-opacity:var(--sheet-backdrop-opacity);--dialog-overlay-z-index:var(--sheet-backdrop-z-index);--dialog-transition-duration:var(--sheet-transition-duration);--dialog-transition-easing:var(--sheet-transition-easing)}.sheet{z-index:var(--sheet-z-index);gap:var(--sheet-gap);padding-block:var(--sheet-padding-block);padding-inline:var(--sheet-padding-inline);background-color:var(--sheet-bg);box-shadow:var(--sheet-shadow);animation-duration:var(--sheet-transition-duration);animation-timing-function:var(--sheet-transition-easing);flex-direction:column;animation-fill-mode:forwards;display:flex;position:fixed;overflow-y:auto}.sheet[data-side=left],.sheet[data-side=right]{width:var(--sheet-inline-size);top:0;bottom:0}.sheet[data-side=left]{left:0}.sheet[data-side=right]{right:0}.sheet[data-side=top],.sheet[data-side=bottom]{max-height:var(--sheet-block-size);left:0;right:0}.sheet[data-side=top]{top:0}.sheet[data-side=bottom]{bottom:0}@keyframes sheet-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sheet-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes sheet-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sheet-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sheet-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sheet-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes sheet-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.sheet[data-side=right][data-open]{animation-name:sheet-in-right}.sheet[data-side=right][data-closed]{animation-name:sheet-out-right}.sheet[data-side=left][data-open]{animation-name:sheet-in-left}.sheet[data-side=left][data-closed]{animation-name:sheet-out-left}.sheet[data-side=top][data-open]{animation-name:sheet-in-top}.sheet[data-side=top][data-closed]{animation-name:sheet-out-top}.sheet[data-side=bottom][data-open]{animation-name:sheet-in-bottom}.sheet[data-side=bottom][data-closed]{animation-name:sheet-out-bottom}.sheet__header{--dialog-header-gap:var(--sheet-header-gap);--dialog-header-close-room:var(--sheet-padding-inline)}.sheet__title{color:var(--sheet-title-color);font-size:var(--sheet-title-font-size);font-weight:var(--sheet-title-font-weight);margin:0}.sheet__description{font-size:var(--sheet-description-font-size);color:var(--sheet-description-color);margin:0}.sheet__close.close-button{--close-button-size:var(--sheet-close-size);--close-button-icon-size:var(--sheet-close-icon-size);--close-button-color:var(--sheet-close-color);--close-button-focus-ring-width:var(--sheet-close-focus-ring-width);--close-button-focus-ring-offset:var(--sheet-close-focus-ring-offset);--close-button-focus-ring-color:var(--sheet-close-focus-ring-color);position:absolute;inset-block-start:var(--sheet-close-inset);inset-inline-end:var(--sheet-close-inset)}.sheet__body{flex:1;min-height:0}.sheet__footer{--dialog-footer-gap:var(--sheet-footer-gap)}

package/dist/sheet.js

@@ -0,0 +1,53 @@
+'use client';
+import './sheet.css';
+import { VisuallyHidden as e } from "./visually-hidden.js";
+import { CloseButton as t } from "./close-button.js";
+import { n, r, t as i } from "./_shared/dialogsurface.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Dialog as s } from "@base-ui/react/dialog";
+//#region src/stories/molecules/Sheet/Sheet.tsx
+function c({ className: e, ...t }) {
+	return /* @__PURE__ */ a(i, {
+		className: ["sheet__footer", e].filter(Boolean).join(" "),
+		...t
+	});
+}
+function l({ open: i, onOpenChange: l, side: u = "right", title: d, titleHidden: f = !1, description: p, footer: m, children: h, closeLabel: g = "Cerrar", trigger: _, container: v, onAnimationEndCapture: y, className: b, ...x }) {
+	return /* @__PURE__ */ o(s.Root, {
+		open: i,
+		onOpenChange: (e) => l(e),
+		children: [_ && /* @__PURE__ */ a(s.Trigger, { render: _ }), /* @__PURE__ */ o(s.Portal, {
+			container: v,
+			children: [/* @__PURE__ */ a(r, { className: "sheet__overlay" }), /* @__PURE__ */ o(s.Popup, {
+				className: ["sheet", b].filter(Boolean).join(" "),
+				"data-side": u,
+				onAnimationEndCapture: y,
+				...x,
+				children: [
+					/* @__PURE__ */ o(n, {
+						layout: "stacked",
+						className: "sheet__header",
+						children: [f ? /* @__PURE__ */ a(s.Title, { render: /* @__PURE__ */ a(e, { children: d }) }) : /* @__PURE__ */ a(s.Title, {
+							className: "sheet__title",
+							children: d
+						}), p != null && /* @__PURE__ */ a(s.Description, {
+							className: "sheet__description",
+							children: p
+						})]
+					}),
+					/* @__PURE__ */ a(s.Close, {
+						className: "sheet__close",
+						render: /* @__PURE__ */ a(t, { label: g })
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "sheet__body",
+						children: h
+					}),
+					m && /* @__PURE__ */ a(c, { children: m })
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { l as Sheet, c as SheetFooter };