@studiolxd/brand 49.28.0 → 51.0.0

package/dist/_shared/inputphone.js

@@ -0,0 +1,91 @@
+import '../inputphone.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { n } from "./portal-container.js";
+import { t as r } from "./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/messages/es/inputPhone.ts
+var d = { country: "País" };
+//#endregion
+//#region src/stories/atoms/InputPhone/InputPhone.tsx
+function f({ value: r, onChange: i, options: a, disabled: l, size: f = "md", countryLabel: p, internationalLabel: m = "🌐", container: h }) {
+	let g = e("inputPhone", d), _ = n(h), v = "__intl__", y = (e) => e ?? v, b = (e) => e === v ? void 0 : e, x = f === "lg" ? "md" : "sm", S = ["input-phone__country-content", f === "md" ? "" : `input-phone__country-content--${f}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ s(c.Root, {
+		value: y(r),
+		onValueChange: (e) => i(b(e)),
+		disabled: l,
+		children: [/* @__PURE__ */ s(c.Trigger, {
+			className: "input-phone__country",
+			"aria-label": g("country", p),
+			children: [/* @__PURE__ */ o(c.Value, { children: r ? `+${u(r)}` : m }), /* @__PURE__ */ o(t, {
+				name: "chevron",
+				className: "input-phone__country-icon",
+				size: x
+			})]
+		}), /* @__PURE__ */ o(c.Portal, {
+			container: _,
+			children: /* @__PURE__ */ o(c.Positioner, {
+				className: "input-phone__country-positioner",
+				side: "bottom",
+				align: "start",
+				alignItemWithTrigger: !1,
+				children: /* @__PURE__ */ o(c.Popup, {
+					className: S,
+					children: a.map(({ value: e, label: t }) => /* @__PURE__ */ o(c.Item, {
+						value: y(e),
+						className: "input-phone__country-item",
+						children: /* @__PURE__ */ o(c.ItemText, { children: t })
+					}, y(e)))
+				})
+			})
+		})]
+	});
+}
+var p = i(function({ value: e, defaultCountry: t = "ES", placeholder: n, disabled: s, error: c = !1, size: u = "md", id: d, 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: d,
+		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: f,
+		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 { p as t };

package/dist/_shared/legalfooter.js

@@ -0,0 +1,42 @@
+import '../legalfooter.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Container as t } from "../container.js";
+import { Heading as n } from "../heading.js";
+import { t as r } from "./default-render-link.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/stories/messages/es/legalFooter.ts
+var o = { label: "Legal" };
+//#endregion
+//#region src/stories/sections/LegalFooter/LegalFooter.tsx
+function s({ label: s, title: c, links: l, renderLink: u = r, width: d = "xl", surface: f, as: p = "footer", className: m }) {
+	let h = e("legalFooter", o);
+	return /* @__PURE__ */ i(p, {
+		className: [
+			"legal-footer",
+			f === "dark" && "surface-dark",
+			m
+		].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ a(t, {
+			width: d,
+			innerClassName: "legal-footer__inner",
+			children: [c && /* @__PURE__ */ i(n, {
+				level: 2,
+				size: 6,
+				className: "legal-footer__title",
+				children: c
+			}), /* @__PURE__ */ i("nav", {
+				"aria-label": h("label", s),
+				children: /* @__PURE__ */ i("ul", {
+					className: "legal-footer__links",
+					children: l.map((e) => /* @__PURE__ */ i("li", { children: u({
+						href: e.href,
+						className: "legal-footer__link link--ink",
+						children: e.label
+					}) }, e.id))
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { s as t };

package/dist/_shared/logo.js

@@ -1,19 +1,20 @@
 import '../logo.css';
-import { r as e, t } from "./logoassets.js";
-import { jsx as n } from "react/jsx-runtime";
+import { n as e } from "./env.js";
+import { r as t, t as n } from "./logoassets.js";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/stories/atoms/Logo/Logo.tsx
-function r({ size: r = "md", className: i }) {
-	return /* @__PURE__ */ n("svg", {
+function i({ size: i = "md", className: a }) {
+	return i === "xxl" && e("Logo", "size=\"xxl\"", "`size=\"2xl\"`"), /* @__PURE__ */ r("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: e,
+		viewBox: t,
 		className: [
 			"logo",
-			`logo--${r}`,
-			i
+			`logo--${i === "xxl" ? "2xl" : i}`,
+			a
 		].filter(Boolean).join(" "),
 		"aria-hidden": "true",
-		children: t.map((e) => /* @__PURE__ */ n("path", { d: e }, e))
+		children: n.map((e) => /* @__PURE__ */ r("path", { d: e }, e))
 	});
 }
 //#endregion
-export { r as t };
+export { i as t };

package/dist/_shared/menubutton.js

@@ -0,0 +1,31 @@
+import '../menubutton.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/stories/messages/es/menuButton.ts
+var i = {
+	open: "Menú de navegación",
+	close: "Cerrar menú"
+}, a = n(function({ isOpen: n = !1, label: a, closeLabel: o, size: s = "md", className: c, ...l }, u) {
+	let d = e("menuButton", i);
+	return /* @__PURE__ */ r("button", {
+		ref: u,
+		type: "button",
+		className: [
+			"menu-button",
+			`menu-button--${s}`,
+			c
+		].filter(Boolean).join(" "),
+		"aria-label": n ? d("close", o) : d("open", a),
+		"aria-expanded": n,
+		...l,
+		children: /* @__PURE__ */ r(t, {
+			name: "menu",
+			size: s === "lg" ? "lg" : "md",
+			className: "menu-button__icon"
+		})
+	});
+});
+//#endregion
+export { a as t };

package/dist/_shared/modal.js

@@ -0,0 +1,69 @@
+import '../modal.css';
+import { n as e } from "./env.js";
+import { r as t } from "./brandmessagescontext.js";
+import { VisuallyHidden as n } from "../visually-hidden.js";
+import { n as r } from "./portal-container.js";
+import { t as i } from "./closebutton.js";
+import { n as a, r as o, t as s } from "./dialogsurface.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Dialog as d } from "@base-ui/react/dialog";
+//#region src/stories/messages/es/modal.ts
+var f = {
+	close: "Cerrar",
+	fallbackTitle: "Diálogo"
+};
+//#endregion
+//#region src/stories/molecules/Modal/Modal.tsx
+function p({ open: p, onOpenChange: m, onClose: h, title: g, children: _, closeLabel: v, fallbackTitle: y, container: b, description: x, "aria-describedby": S, initialFocus: C, footer: w, footerClassName: T, className: E, ...D }) {
+	let O = t("modal", f), k = r(b), A = S === void 0 ? {} : { "aria-describedby": S }, j = C === void 0 ? {} : { initialFocus: C };
+	return h !== void 0 && e("Modal", "onClose", "`onOpenChange`"), /* @__PURE__ */ l(d.Root, {
+		open: p,
+		onOpenChange: (e) => {
+			m?.(e), e || h?.();
+		},
+		children: /* @__PURE__ */ u(d.Portal, {
+			container: k,
+			children: [/* @__PURE__ */ l(o, { className: "modal__overlay" }), /* @__PURE__ */ u(d.Popup, {
+				className: ["modal__content", E].filter(Boolean).join(" "),
+				...A,
+				...j,
+				...D,
+				children: [
+					g ? /* @__PURE__ */ u(a, {
+						layout: "inline",
+						className: "modal__header",
+						children: [/* @__PURE__ */ l(d.Title, {
+							className: "modal__title",
+							children: g
+						}), /* @__PURE__ */ l(d.Close, {
+							className: "modal__close",
+							render: /* @__PURE__ */ l(i, { label: O("close", v) })
+						})]
+					}) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(d.Title, { render: /* @__PURE__ */ l(n, { children: O("fallbackTitle", y) }) }), /* @__PURE__ */ l(a, {
+						layout: "inline",
+						noTitle: !0,
+						className: "modal__header modal__header--no-title",
+						children: /* @__PURE__ */ l(d.Close, {
+							className: "modal__close",
+							render: /* @__PURE__ */ l(i, { label: O("close", v) })
+						})
+					})] }),
+					x != null && /* @__PURE__ */ l(d.Description, {
+						className: "modal__description",
+						children: x
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "modal__body",
+						children: _
+					}),
+					w != null && /* @__PURE__ */ l(s, {
+						className: ["modal__footer", T].filter(Boolean).join(" "),
+						children: w
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { p as t };

package/dist/_shared/multiselect.js

@@ -0,0 +1,128 @@
+import '../multiselect.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { n } from "./portal-container.js";
+import { t as r } from "./assign-ref.js";
+import { forwardRef as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Select as l } from "@base-ui/react/select";
+//#region src/stories/messages/es/multiSelect.ts
+var u = {
+	placeholder: "Seleccionar…",
+	remove: (e) => `Quitar ${e}`
+}, d = i(function({ options: i, value: d, defaultValue: f = [], placeholder: p, disabled: m, readOnly: h, required: g, size: _ = "md", onValueChange: v, id: y, name: b, error: x = !1, onBlur: S, className: C, "aria-label": w, "aria-labelledby": T, "aria-describedby": E, removeLabel: D, container: O }, k) {
+	let A = e("multiSelect", u), j = n(O), [M, N] = o(!1), [P, F] = o(f), I = a(null), L = a(null), R = a(null), z = d === void 0 ? P : d;
+	function B(e) {
+		d === void 0 && F(e), v?.(e);
+	}
+	function V(e) {
+		B(z.filter((t) => t !== e));
+	}
+	function H(e) {
+		m || h || e.target instanceof Element && (e.target.closest(".multi-select__pill-remove") || L.current?.contains(e.target) || (e.preventDefault(), L.current?.focus(), N(!M)));
+	}
+	function U(e) {
+		return e instanceof Node && (!!L.current?.contains(e) || !!R.current?.contains(e));
+	}
+	function W(e) {
+		U(e.relatedTarget) || S?.(e);
+	}
+	let G = [
+		"multi-select",
+		_ === "md" ? "" : `multi-select--${_}`,
+		m ? "multi-select--disabled" : "",
+		x ? "multi-select--error" : "",
+		C ?? ""
+	].filter(Boolean).join(" "), K = ["multi-select__content", _ === "md" ? "" : `multi-select__content--${_}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ c(l.Root, {
+		multiple: !0,
+		value: z,
+		onValueChange: B,
+		open: M,
+		onOpenChange: N,
+		name: b,
+		disabled: m,
+		readOnly: h,
+		required: g,
+		modal: !1,
+		children: [/* @__PURE__ */ c("div", {
+			ref: I,
+			className: G,
+			"data-popup-open": M || void 0,
+			onPointerDown: H,
+			children: [/* @__PURE__ */ c("div", {
+				className: "multi-select__values",
+				children: [z.map((e) => {
+					let n = i.find((t) => t.value === e);
+					return n ? /* @__PURE__ */ c("span", {
+						className: "multi-select__pill",
+						children: [/* @__PURE__ */ s("span", {
+							className: "multi-select__pill-label",
+							children: n.label
+						}), !m && !h && /* @__PURE__ */ s("button", {
+							type: "button",
+							className: "multi-select__pill-remove",
+							"aria-label": A("remove", D)(n.label),
+							tabIndex: -1,
+							onClick: (t) => {
+								t.stopPropagation(), V(e), L.current?.focus();
+							},
+							children: /* @__PURE__ */ s(t, {
+								name: "close",
+								size: "xs"
+							})
+						})]
+					}, e) : null;
+				}), /* @__PURE__ */ s(l.Trigger, {
+					ref: (e) => {
+						L.current = e, r(k, e);
+					},
+					render: /* @__PURE__ */ s("div", {}),
+					nativeButton: !1,
+					className: "multi-select__combobox",
+					id: y,
+					"aria-label": T ? void 0 : w ?? A("placeholder", p),
+					"aria-labelledby": T,
+					"aria-describedby": E,
+					"aria-invalid": x || void 0,
+					"aria-readonly": h || void 0,
+					onBlur: W,
+					children: z.length === 0 && /* @__PURE__ */ s("span", {
+						className: "multi-select__placeholder",
+						children: A("placeholder", p)
+					})
+				})]
+			}), /* @__PURE__ */ s(t, {
+				name: "chevron",
+				className: "multi-select__icon"
+			})]
+		}), /* @__PURE__ */ s(l.Portal, {
+			container: j,
+			children: /* @__PURE__ */ s(l.Positioner, {
+				className: "multi-select__positioner",
+				anchor: I,
+				align: "start",
+				sideOffset: -1,
+				alignItemWithTrigger: !1,
+				children: /* @__PURE__ */ s(l.Popup, {
+					ref: R,
+					className: K,
+					"aria-label": w ?? p,
+					onBlur: W,
+					children: i.map((e) => /* @__PURE__ */ c(l.Item, {
+						value: e.value,
+						"aria-label": e["aria-label"] ?? e.label,
+						className: "multi-select__item",
+						children: [/* @__PURE__ */ s("span", {
+							className: "multi-select__item-check",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ s("span", { className: "multi-select__item-check-mark" })
+						}), /* @__PURE__ */ s(l.ItemText, { children: e.label })]
+					}, e.value))
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { d as t };

package/dist/_shared/notificationbutton.js

@@ -0,0 +1,35 @@
+import '../notificationbutton.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { Button as n } from "../button.js";
+import { NumberBadge as r } from "../number-badge.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/stories/messages/es/notificationButton.ts
+var s = {
+	label: "Notificaciones",
+	countLabel: (e) => `Notificaciones: ${e} sin leer`
+}, c = i(function({ count: i = 0, max: c = 99, label: l, countLabel: u, className: d, ...f }, p) {
+	let m = e("notificationButton", s), h = i > 0 ? m("countLabel", u)(i) : m("label", l);
+	return /* @__PURE__ */ o(n, {
+		ref: p,
+		variant: "ghost",
+		iconOnly: !0,
+		size: "md",
+		"aria-label": h,
+		className: ["notification-button", d].filter(Boolean).join(" "),
+		...f,
+		children: [/* @__PURE__ */ a(t, {
+			name: "bell",
+			size: "md"
+		}), i > 0 && /* @__PURE__ */ a(r, {
+			count: i,
+			max: c,
+			tone: "error",
+			"aria-hidden": "true",
+			className: "notification-button__badge"
+		})]
+	});
+});
+//#endregion
+export { c as t };

package/dist/_shared/numberinput.js

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

package/dist/_shared/otpinput.js

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

package/dist/_shared/overflow-focusable.js

@@ -0,0 +1,15 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/stories/constants/overflow-focusable.ts
+function n(n) {
+	let [r, i] = t(!1);
+	return e(() => {
+		let e = n.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = () => i(e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight);
+		t();
+		let r = new ResizeObserver(t);
+		return r.observe(e), e.firstElementChild && r.observe(e.firstElementChild), () => r.disconnect();
+	}, [n]), r;
+}
+//#endregion
+export { n as t };