@studiolxd/brand 39.0.0 → 40.1.0

package/dist/multi-select.js

@@ -1,21 +1,21 @@
 'use client';
 import './multi-select.css';
 import { Icon as e } from "./icon.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { forwardRef as t, useEffect as n, useId as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { Popover as c } from "@base-ui/react/popover";
 //#region src/stories/atoms/MultiSelect/MultiSelect.tsx
 function l(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-var u = 500, d = r(function({ options: r, value: d, defaultValue: f = [], placeholder: p = "Seleccionar…", disabled: m, readOnly: h, size: g = "md", onValueChange: _, id: v, name: y, error: b = !1, onBlur: x, className: S, "aria-label": C, "aria-labelledby": w, "aria-describedby": T, removeLabel: E = (e) => `Quitar ${e}`, container: D }, O) {
-	let [k, A] = s(!1), [j, M] = s(f), [N, P] = s(-1), F = o(null), I = o(null), L = a(), R = a(), z = o(""), B = o(0), V = d === void 0 ? j : d, H = (e) => `${R}-opt-${e}`;
+var u = 500, d = t(function({ options: t, value: d, defaultValue: f = [], placeholder: p = "Seleccionar…", disabled: m, readOnly: h, size: g = "md", onValueChange: _, id: v, name: y, error: b = !1, onBlur: x, className: S, "aria-label": C, "aria-labelledby": w, "aria-describedby": T, removeLabel: E = (e) => `Quitar ${e}`, container: D }, O) {
+	let [k, A] = a(!1), [j, M] = a(f), [N, P] = a(-1), F = i(null), I = i(null), L = r(), R = r(), z = i(""), B = i(0), V = d === void 0 ? j : d, H = (e) => `${R}-opt-${e}`;
 	function U(e) {
 		let t = V.includes(e) ? V.filter((t) => t !== e) : [...V, e];
 		d === void 0 && M(t), _?.(t);
 	}
 	function W(e) {
-		m || h || (A(!0), P(r.length === 0 ? -1 : e));
+		m || h || (A(!0), P(t.length === 0 ? -1 : e));
 	}
 	function G() {
 		A(!1), P(-1), z.current = "";
@@ -30,26 +30,26 @@ var u = 500, d = r(function({ options: r, value: d, defaultValue: f = [], placeh
 		}
 	}
 	function q(e) {
-		if (r.length === 0) return;
-		let t = Date.now(), n = t - B.current > u ? e : z.current + e;
-		z.current = n, B.current = t;
-		let i = n.length === 1 ? N + 1 : Math.max(N, 0), a = n.toLowerCase();
-		for (let e = 0; e < r.length; e++) {
-			let t = (i + e) % r.length;
-			if (r[t].label.toLowerCase().startsWith(a)) {
-				P(t), k || A(!0);
+		if (t.length === 0) return;
+		let n = Date.now(), r = n - B.current > u ? e : z.current + e;
+		z.current = r, B.current = n;
+		let i = r.length === 1 ? N + 1 : Math.max(N, 0), a = r.toLowerCase();
+		for (let e = 0; e < t.length; e++) {
+			let n = (i + e) % t.length;
+			if (t[n].label.toLowerCase().startsWith(a)) {
+				P(n), k || A(!0);
 				return;
 			}
 		}
 	}
 	function J(e) {
 		if (m || h) return;
-		let t = r.length - 1;
-		if (e.key === "ArrowDown") e.preventDefault(), k ? P((e) => Math.min(e + 1, t)) : W(0);
-		else if (e.key === "ArrowUp") e.preventDefault(), k ? P((e) => Math.max(e - 1, 0)) : W(t);
-		else if (e.key === "Home") e.preventDefault(), k ? P(r.length === 0 ? -1 : 0) : W(0);
-		else if (e.key === "End") e.preventDefault(), k ? P(t) : W(t);
-		else if (e.key === "Enter" || e.key === " ") e.preventDefault(), k ? N >= 0 && N < r.length && U(r[N].value) : W(0);
+		let n = t.length - 1;
+		if (e.key === "ArrowDown") e.preventDefault(), k ? P((e) => Math.min(e + 1, n)) : W(0);
+		else if (e.key === "ArrowUp") e.preventDefault(), k ? P((e) => Math.max(e - 1, 0)) : W(n);
+		else if (e.key === "Home") e.preventDefault(), k ? P(t.length === 0 ? -1 : 0) : W(0);
+		else if (e.key === "End") e.preventDefault(), k ? P(n) : W(n);
+		else if (e.key === "Enter" || e.key === " ") e.preventDefault(), k ? N >= 0 && N < t.length && U(t[N].value) : W(0);
 		else if (e.key === "Escape") {
 			if (!k) return;
 			e.preventDefault(), G();
@@ -58,7 +58,7 @@ var u = 500, d = r(function({ options: r, value: d, defaultValue: f = [], placeh
 	function Y(e) {
 		m || h || e.target instanceof Element && e.target.closest(".multi-select__pill-remove") || (e.preventDefault(), I.current?.focus(), k ? G() : W(0));
 	}
-	i(() => {
+	n(() => {
 		!k || N < 0 || document.getElementById(H(N))?.scrollIntoView({ block: "nearest" });
 	}, [
 		k,
@@ -72,39 +72,39 @@ var u = 500, d = r(function({ options: r, value: d, defaultValue: f = [], placeh
 		b ? "multi-select--error" : "",
 		S ?? ""
 	].filter(Boolean).join(" "), Z = ["multi-select__content", g === "md" ? "" : `multi-select__content--${g}`].filter(Boolean).join(" ");
-	return /* @__PURE__ */ n(c.Root, {
+	return /* @__PURE__ */ s(c.Root, {
 		open: k,
 		onOpenChange: K,
-		children: [/* @__PURE__ */ n("div", {
+		children: [/* @__PURE__ */ s("div", {
 			ref: F,
 			className: X,
 			"data-popup-open": k || void 0,
 			onPointerDown: Y,
 			children: [
-				/* @__PURE__ */ n("div", {
+				/* @__PURE__ */ s("div", {
 					className: "multi-select__values",
-					children: [V.map((i) => {
-						let a = r.find((e) => e.value === i);
-						return a ? /* @__PURE__ */ n("span", {
+					children: [V.map((n) => {
+						let r = t.find((e) => e.value === n);
+						return r ? /* @__PURE__ */ s("span", {
 							className: "multi-select__pill",
-							children: [/* @__PURE__ */ t("span", {
+							children: [/* @__PURE__ */ o("span", {
 								className: "multi-select__pill-label",
-								children: a.label
-							}), !m && !h && /* @__PURE__ */ t("button", {
+								children: r.label
+							}), !m && !h && /* @__PURE__ */ o("button", {
 								type: "button",
 								className: "multi-select__pill-remove",
-								"aria-label": E(a.label),
+								"aria-label": E(r.label),
 								tabIndex: -1,
 								onClick: (e) => {
-									e.stopPropagation(), U(i), I.current?.focus();
+									e.stopPropagation(), U(n), I.current?.focus();
 								},
-								children: /* @__PURE__ */ t(e, {
+								children: /* @__PURE__ */ o(e, {
 									name: "close",
 									size: "xs"
 								})
 							})]
-						}, i) : null;
-					}), /* @__PURE__ */ t("div", {
+						}, n) : null;
+					}), /* @__PURE__ */ o("div", {
 						ref: (e) => {
 							I.current = e, l(O, e);
 						},
@@ -124,62 +124,62 @@ var u = 500, d = r(function({ options: r, value: d, defaultValue: f = [], placeh
 						id: v,
 						onKeyDown: J,
 						onBlur: x,
-						children: V.length === 0 && /* @__PURE__ */ t("span", {
+						children: V.length === 0 && /* @__PURE__ */ o("span", {
 							className: "multi-select__placeholder",
 							children: p
 						})
 					})]
 				}),
-				/* @__PURE__ */ t(e, {
+				/* @__PURE__ */ o(e, {
 					name: "chevron",
 					className: "multi-select__icon",
 					size: g === "sm" ? "xs" : g === "lg" ? "md" : "sm"
 				}),
-				y && V.map((e) => /* @__PURE__ */ t("input", {
+				y && V.map((e) => /* @__PURE__ */ o("input", {
 					type: "hidden",
 					name: y,
 					value: e
 				}, e))
 			]
-		}), /* @__PURE__ */ t(c.Portal, {
+		}), /* @__PURE__ */ o(c.Portal, {
 			container: D,
-			children: /* @__PURE__ */ t(c.Positioner, {
+			children: /* @__PURE__ */ o(c.Positioner, {
 				className: "multi-select__positioner",
 				anchor: F,
 				align: "start",
 				sideOffset: -1,
-				children: /* @__PURE__ */ t(c.Popup, {
+				children: /* @__PURE__ */ o(c.Popup, {
 					className: Z,
 					initialFocus: !1,
 					finalFocus: !1,
-					children: /* @__PURE__ */ t("div", {
+					children: /* @__PURE__ */ o("div", {
 						role: "listbox",
 						"aria-multiselectable": "true",
 						"aria-label": C ?? p,
 						id: L,
-						children: r.map((e, r) => {
-							let i = V.includes(e.value), a = N === r;
-							return /* @__PURE__ */ n("div", {
-								id: H(r),
+						children: t.map((e, t) => {
+							let n = V.includes(e.value), r = N === t;
+							return /* @__PURE__ */ s("div", {
+								id: H(t),
 								role: "option",
-								"aria-selected": i,
+								"aria-selected": n,
 								"aria-label": e["aria-label"] ?? e.label,
 								className: [
 									"multi-select__item",
-									i ? "multi-select__item--selected" : "",
-									a ? "multi-select__item--active" : ""
+									n ? "multi-select__item--selected" : "",
+									r ? "multi-select__item--active" : ""
 								].filter(Boolean).join(" "),
 								onPointerDown: (e) => {
 									e.preventDefault(), e.stopPropagation();
 								},
 								onClick: () => {
-									U(e.value), P(r), I.current?.focus();
+									U(e.value), P(t), I.current?.focus();
 								},
-								children: [/* @__PURE__ */ t("span", {
+								children: [/* @__PURE__ */ o("span", {
 									className: "multi-select__item-check",
 									"aria-hidden": "true",
-									children: /* @__PURE__ */ t("span", { className: "multi-select__item-check-mark" })
-								}), /* @__PURE__ */ t("span", { children: e.label })]
+									children: /* @__PURE__ */ o("span", { className: "multi-select__item-check-mark" })
+								}), /* @__PURE__ */ o("span", { children: e.label })]
 							}, e.value);
 						})
 					})

package/dist/notification-button.js

@@ -3,12 +3,12 @@ import './notification-button.css';
 import { Icon as e } from "./icon.js";
 import { Button as t } from "./button.js";
 import { NumberBadge as n } from "./number-badge.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/molecules/NotificationButton/NotificationButton.tsx
-var o = a(function({ count: a = 0, max: o = 99, label: s = "Notificaciones", countLabel: c = (e) => `Notificaciones: ${e} sin leer`, className: l, ...u }, d) {
-	let f = a > 0 ? c(a) : s;
-	return /* @__PURE__ */ i(t, {
+var o = r(function({ count: r = 0, max: o = 99, label: s = "Notificaciones", countLabel: c = (e) => `Notificaciones: ${e} sin leer`, className: l, ...u }, d) {
+	let f = r > 0 ? c(r) : s;
+	return /* @__PURE__ */ a(t, {
 		ref: d,
 		variant: "ghost",
 		iconOnly: !0,
@@ -16,11 +16,11 @@ var o = a(function({ count: a = 0, max: o = 99, label: s = "Notificaciones", cou
 		"aria-label": f,
 		className: ["notification-button", l].filter(Boolean).join(" "),
 		...u,
-		children: [/* @__PURE__ */ r(e, {
+		children: [/* @__PURE__ */ i(e, {
 			name: "bell",
 			size: "md"
-		}), a > 0 && /* @__PURE__ */ r(n, {
-			count: a,
+		}), r > 0 && /* @__PURE__ */ i(n, {
+			count: r,
 			max: o,
 			variant: "danger",
 			"aria-hidden": "true",

package/dist/notification-panel.js

@@ -8,8 +8,8 @@ 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";
+import { useCallback as c, useId as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/stories/molecules/NotificationPanel/NotificationPanel.tsx
 function h(e) {
 	let t = parseFloat(e);
@@ -20,25 +20,25 @@ function g() {
 	return h(getComputedStyle(e).getPropertyValue("--notification-panel-offset").trim());
 }
 function _({ children: e, ...t }) {
-	return /* @__PURE__ */ l("a", {
+	return /* @__PURE__ */ p("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) => {
+	let z = l(), B = u(null), [V, H] = d([]), 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(() => {
+	}, q = c(() => {
 		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, {
+	return /* @__PURE__ */ p(a, {
+		trigger: /* @__PURE__ */ p(s, {
 			count: b,
 			max: x,
 			label: D,
@@ -52,56 +52,56 @@ function b({ items: h = [], count: b = 0, max: x, onRead: S, onMarkAllRead: C, a
 		onOpenChange: J,
 		initialFocus: q,
 		className: ["notification-panel", R].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "notification-panel__body",
 			ref: B,
 			children: [
-				/* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(r, {
+				/* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(r, {
 					level: 2,
 					size: 3,
 					id: Y,
 					children: k
 				}) }),
-				h.length === 0 ? /* @__PURE__ */ l("div", {
+				h.length === 0 ? /* @__PURE__ */ p("div", {
 					className: "notification-panel__empty",
-					children: /* @__PURE__ */ l(i, {
+					children: /* @__PURE__ */ p(i, {
 						size: "small",
 						children: j
 					})
-				}) : /* @__PURE__ */ l("ul", {
+				}) : /* @__PURE__ */ p("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", {
+						return /* @__PURE__ */ p("li", {
 							className: "notification-panel__item",
-							children: /* @__PURE__ */ u("button", {
+							children: /* @__PURE__ */ m("button", {
 								type: "button",
 								className: "notification-panel__item-action",
 								"aria-disabled": i ? void 0 : !0,
 								onClick: () => G(n),
-								children: [/* @__PURE__ */ l("span", {
+								children: [/* @__PURE__ */ p("span", {
 									className: "notification-panel__indicator",
-									children: i && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(e, {
+									children: i && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(e, {
 										name: "dot",
 										size: "sm",
 										className: "notification-panel__dot"
-									}), /* @__PURE__ */ l(t, { children: A })] })
-								}), /* @__PURE__ */ u("span", {
+									}), /* @__PURE__ */ p(t, { children: A })] })
+								}), /* @__PURE__ */ m("span", {
 									className: "notification-panel__item-text",
 									children: [
-										/* @__PURE__ */ l(o, {
+										/* @__PURE__ */ p(o, {
 											id: a,
 											tone: i ? "default" : "muted",
 											className: "notification-panel__item-title",
 											children: n.title
 										}),
-										n.body && /* @__PURE__ */ l(o, {
+										n.body && /* @__PURE__ */ p(o, {
 											tone: "muted",
 											className: "notification-panel__item-body",
 											children: n.body
 										}),
-										/* @__PURE__ */ l(o, {
+										/* @__PURE__ */ p(o, {
 											tone: "muted",
 											className: "notification-panel__item-time",
 											children: n.time
@@ -112,9 +112,9 @@ function b({ items: h = [], count: b = 0, max: x, onRead: S, onMarkAllRead: C, a
 						}, n.id);
 					})
 				}),
-				C && W && /* @__PURE__ */ l("div", {
+				C && W && /* @__PURE__ */ p("div", {
 					className: "notification-panel__mark-all",
-					children: /* @__PURE__ */ l(n, {
+					children: /* @__PURE__ */ p(n, {
 						variant: "outline",
 						size: "sm",
 						block: !0,
@@ -122,9 +122,9 @@ function b({ items: h = [], count: b = 0, max: x, onRead: S, onMarkAllRead: C, a
 						children: P
 					})
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ p("div", {
 					className: "notification-panel__footer",
-					children: /* @__PURE__ */ u("div", {
+					children: /* @__PURE__ */ m("div", {
 						className: "notification-panel__footer-links",
 						children: [E({
 							href: w,

package/dist/number-input-field.js

@@ -5,21 +5,21 @@ 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";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#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", {
+var l = a(function({ id: a, 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 = o(), A = a ?? 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__ */ c("div", {
 		className: ["number-input-field", C].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ a(n, {
+			/* @__PURE__ */ s(n, {
 				htmlFor: A,
 				hidden: D,
 				size: O,
 				children: l
 			}),
-			/* @__PURE__ */ a(r, {
+			/* @__PURE__ */ s(r, {
 				ref: E,
 				...T,
 				id: A,
@@ -36,11 +36,11 @@ var l = s(function({ id: s, label: l, labelHidden: u, value: d, defaultValue: f,
 				"aria-describedby": N,
 				onChange: w
 			}),
-			x && /* @__PURE__ */ a(t, {
+			x && /* @__PURE__ */ s(t, {
 				id: j,
 				children: x
 			}),
-			S && /* @__PURE__ */ a("span", {
+			S && /* @__PURE__ */ s("span", {
 				id: M,
 				className: "number-input-field__helper",
 				children: S

package/dist/number-input.js

@@ -1,14 +1,14 @@
 '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";
+import { forwardRef as t, useCallback as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#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) => {
+var o = t(function({ value: t, 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 = t !== void 0, [O, k] = r(o), [A, j] = r(!1), [M, N] = r(null), P = D ? t : O, F = M === null ? String(P) : M, I = n((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) => {
+	}, [s, c]), L = n((e) => {
 		let t = I(e);
 		D || k(t), S?.(t);
 	}, [
@@ -36,22 +36,22 @@ var o = r(function({ value: r, defaultValue: o = 0, min: s, max: c, step: l = 1,
 		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", {
+	return /* @__PURE__ */ a("div", {
 		className: U,
 		children: [
-			/* @__PURE__ */ t("button", {
+			/* @__PURE__ */ i("button", {
 				className: "number-input__btn number-input__btn--decrement",
 				type: "button",
 				onClick: R,
 				disabled: W,
 				"aria-label": y,
 				tabIndex: -1,
-				children: /* @__PURE__ */ t(e, {
+				children: /* @__PURE__ */ i(e, {
 					name: "minus",
 					size: "sm"
 				})
 			}),
-			/* @__PURE__ */ t("input", {
+			/* @__PURE__ */ i("input", {
 				ref: E,
 				className: "number-input__field",
 				type: "text",
@@ -70,14 +70,14 @@ var o = r(function({ value: r, defaultValue: o = 0, min: s, max: c, step: l = 1,
 				onFocus: V,
 				onBlur: H
 			}),
-			/* @__PURE__ */ t("button", {
+			/* @__PURE__ */ i("button", {
 				className: "number-input__btn number-input__btn--increment",
 				type: "button",
 				onClick: z,
 				disabled: G,
 				"aria-label": b,
 				tabIndex: -1,
-				children: /* @__PURE__ */ t(e, {
+				children: /* @__PURE__ */ i(e, {
 					name: "plus",
 					size: "sm"
 				})

package/dist/otp-field.js

@@ -5,22 +5,22 @@ 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";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#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", {
+var l = a(function({ id: a, 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 = o(), A = a ?? 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__ */ c("div", {
 		className: ["otp-field", x].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ a(r, {
+			/* @__PURE__ */ s(r, {
 				id: `${A}-label`,
 				htmlFor: `${A}-0`,
 				hidden: D,
 				size: O,
 				children: l
 			}),
-			/* @__PURE__ */ a(n, {
+			/* @__PURE__ */ s(n, {
 				ref: E,
 				id: A,
 				name: m,
@@ -38,11 +38,11 @@ var l = s(function({ id: s, label: l, labelHidden: u, length: d, value: f, defau
 				onComplete: w,
 				onBlur: T
 			}),
-			v && /* @__PURE__ */ a(t, {
+			v && /* @__PURE__ */ s(t, {
 				id: j,
 				children: v
 			}),
-			y && /* @__PURE__ */ a("span", {
+			y && /* @__PURE__ */ s("span", {
 				id: M,
 				className: "otp-field__helper",
 				children: y