prometeo-design-system 2.8.8 → 2.9.1

package/dist/OtpInput.es.js

@@ -0,0 +1,301 @@
+import { j as p } from "./jsx-runtime-DKDX3adD.js";
+import { C as Re, E as De } from "./Icons-DtFC5DJ7.js";
+import { c as $ } from "./cn-B6yFEsav.js";
+import * as n from "react";
+import ge, { memo as Oe } from "react";
+var Te = Object.defineProperty, We = Object.defineProperties, Ae = Object.getOwnPropertyDescriptors, ee = Object.getOwnPropertySymbols, be = Object.prototype.hasOwnProperty, we = Object.prototype.propertyIsEnumerable, xe = (t, a, r) => a in t ? Te(t, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[a] = r, Be = (t, a) => {
+  for (var r in a || (a = {})) be.call(a, r) && xe(t, r, a[r]);
+  if (ee) for (var r of ee(a)) we.call(a, r) && xe(t, r, a[r]);
+  return t;
+}, _e = (t, a) => We(t, Ae(a)), Ie = (t, a) => {
+  var r = {};
+  for (var u in t) be.call(t, u) && a.indexOf(u) < 0 && (r[u] = t[u]);
+  if (t != null && ee) for (var u of ee(t)) a.indexOf(u) < 0 && we.call(t, u) && (r[u] = t[u]);
+  return r;
+};
+function Fe(t) {
+  let a = setTimeout(t, 0), r = setTimeout(t, 10), u = setTimeout(t, 50);
+  return [a, r, u];
+}
+function He(t) {
+  let a = n.useRef();
+  return n.useEffect(() => {
+    a.current = t;
+  }), a.current;
+}
+var Le = 18, ye = 40, $e = `${ye}px`, ze = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
+function Ge({ containerRef: t, inputRef: a, pushPasswordManagerStrategy: r, isFocused: u }) {
+  let [M, d] = n.useState(!1), [D, k] = n.useState(!1), [O, B] = n.useState(!1), _ = n.useMemo(() => r === "none" ? !1 : (r === "increase-width" || r === "experimental-no-flickering") && M && D, [M, D, r]), x = n.useCallback(() => {
+    let f = t.current, v = a.current;
+    if (!f || !v || O || r === "none") return;
+    let m = f, b = m.getBoundingClientRect().left + m.offsetWidth, w = m.getBoundingClientRect().top + m.offsetHeight / 2, o = b - Le, C = w;
+    document.querySelectorAll(ze).length === 0 && document.elementFromPoint(o, C) === f || (d(!0), B(!0));
+  }, [t, a, O, r]);
+  return n.useEffect(() => {
+    let f = t.current;
+    if (!f || r === "none") return;
+    function v() {
+      let b = window.innerWidth - f.getBoundingClientRect().right;
+      k(b >= ye);
+    }
+    v();
+    let m = setInterval(v, 1e3);
+    return () => {
+      clearInterval(m);
+    };
+  }, [t, r]), n.useEffect(() => {
+    let f = u || document.activeElement === a.current;
+    if (r === "none" || !f) return;
+    let v = setTimeout(x, 0), m = setTimeout(x, 2e3), b = setTimeout(x, 5e3), w = setTimeout(() => {
+      B(!0);
+    }, 6e3);
+    return () => {
+      clearTimeout(v), clearTimeout(m), clearTimeout(b), clearTimeout(w);
+    };
+  }, [a, u, r, x]), { hasPWMBadge: M, willPushPWMBadge: _, PWM_BADGE_SPACE_WIDTH: $e };
+}
+var Ve = n.createContext({}), Se = n.forwardRef((t, a) => {
+  var r = t, { value: u, onChange: M, maxLength: d, textAlign: D = "left", pattern: k, placeholder: O, inputMode: B = "numeric", onComplete: _, pushPasswordManagerStrategy: x = "increase-width", pasteTransformer: f, containerClassName: v, noScriptCSSFallback: m = qe, render: b, children: w } = r, o = Ie(r, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), C, N, U, T, V;
+  let [te, ne] = n.useState(typeof o.defaultValue == "string" ? o.defaultValue : ""), s = u ?? te, E = He(s), q = n.useCallback((e) => {
+    M?.(e), ne(e);
+  }, [M]), P = n.useMemo(() => k ? typeof k == "string" ? new RegExp(k) : k : null, [k]), c = n.useRef(null), le = n.useRef(null), ae = n.useRef({ value: s, onChange: q, isIOS: typeof window < "u" && ((N = (C = window?.CSS) == null ? void 0 : C.supports) == null ? void 0 : N.call(C, "-webkit-touch-callout", "none")) }), X = n.useRef({ prev: [(U = c.current) == null ? void 0 : U.selectionStart, (T = c.current) == null ? void 0 : T.selectionEnd, (V = c.current) == null ? void 0 : V.selectionDirection] });
+  n.useImperativeHandle(a, () => c.current, []), n.useEffect(() => {
+    let e = c.current, l = le.current;
+    if (!e || !l) return;
+    ae.current.value !== e.value && ae.current.onChange(e.value), X.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
+    function h() {
+      if (document.activeElement !== e) {
+        J(null), K(null);
+        return;
+      }
+      let i = e.selectionStart, g = e.selectionEnd, Y = e.selectionDirection, j = e.maxLength, F = e.value, R = X.current.prev, W = -1, A = -1, H;
+      if (F.length !== 0 && i !== null && g !== null) {
+        let Me = i === g, ke = i === F.length && F.length < j;
+        if (Me && !ke) {
+          let L = i;
+          if (L === 0) W = 0, A = 1, H = "forward";
+          else if (L === j) W = L - 1, A = L, H = "backward";
+          else if (j > 1 && F.length > 1) {
+            let se = 0;
+            if (R[0] !== null && R[1] !== null) {
+              H = L < R[1] ? "backward" : "forward";
+              let Ne = R[0] === R[1] && R[0] < j;
+              H === "backward" && !Ne && (se = -1);
+            }
+            W = se + L, A = se + L + 1;
+          }
+        }
+        W !== -1 && A !== -1 && W !== A && c.current.setSelectionRange(W, A, H);
+      }
+      let he = W !== -1 ? W : i, ve = A !== -1 ? A : g, Pe = H ?? Y;
+      J(he), K(ve), X.current.prev = [he, ve, Pe];
+    }
+    if (document.addEventListener("selectionchange", h, { capture: !0 }), h(), document.activeElement === e && re(!0), !document.getElementById("input-otp-style")) {
+      let i = document.createElement("style");
+      if (i.id = "input-otp-style", document.head.appendChild(i), i.sheet) {
+        let g = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+        Q(i.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), Q(i.sheet, `[data-input-otp]:autofill { ${g} }`), Q(i.sheet, `[data-input-otp]:-webkit-autofill { ${g} }`), Q(i.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), Q(i.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+      }
+    }
+    let y = () => {
+      l && l.style.setProperty("--root-height", `${e.clientHeight}px`);
+    };
+    y();
+    let S = new ResizeObserver(y);
+    return S.observe(e), () => {
+      document.removeEventListener("selectionchange", h, { capture: !0 }), S.disconnect();
+    };
+  }, []);
+  let [ue, ce] = n.useState(!1), [Z, re] = n.useState(!1), [I, J] = n.useState(null), [z, K] = n.useState(null);
+  n.useEffect(() => {
+    Fe(() => {
+      var e, l, h, y;
+      (e = c.current) == null || e.dispatchEvent(new Event("input"));
+      let S = (l = c.current) == null ? void 0 : l.selectionStart, i = (h = c.current) == null ? void 0 : h.selectionEnd, g = (y = c.current) == null ? void 0 : y.selectionDirection;
+      S !== null && i !== null && (J(S), K(i), X.current.prev = [S, i, g]);
+    });
+  }, [s, Z]), n.useEffect(() => {
+    E !== void 0 && s !== E && E.length < d && s.length === d && _?.(s);
+  }, [d, _, E, s]);
+  let G = Ge({ containerRef: le, inputRef: c, pushPasswordManagerStrategy: x, isFocused: Z }), de = n.useCallback((e) => {
+    let l = e.currentTarget.value.slice(0, d);
+    if (l.length > 0 && P && !P.test(l)) {
+      e.preventDefault();
+      return;
+    }
+    typeof E == "string" && l.length < E.length && document.dispatchEvent(new Event("selectionchange")), q(l);
+  }, [d, q, E, P]), fe = n.useCallback(() => {
+    var e;
+    if (c.current) {
+      let l = Math.min(c.current.value.length, d - 1), h = c.current.value.length;
+      (e = c.current) == null || e.setSelectionRange(l, h), J(l), K(h);
+    }
+    re(!0);
+  }, [d]), pe = n.useCallback((e) => {
+    var l, h;
+    let y = c.current;
+    if (!f && (!ae.current.isIOS || !e.clipboardData || !y)) return;
+    let S = e.clipboardData.getData("text/plain"), i = f ? f(S) : S;
+    e.preventDefault();
+    let g = (l = c.current) == null ? void 0 : l.selectionStart, Y = (h = c.current) == null ? void 0 : h.selectionEnd, j = (g !== Y ? s.slice(0, g) + i + s.slice(Y) : s.slice(0, g) + i + s.slice(g)).slice(0, d);
+    if (j.length > 0 && P && !P.test(j)) return;
+    y.value = j, q(j);
+    let F = Math.min(j.length, d - 1), R = j.length;
+    y.setSelectionRange(F, R), J(F), K(R);
+  }, [d, q, P, s]), Ee = n.useMemo(() => ({ position: "relative", cursor: o.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [o.disabled]), me = n.useMemo(() => ({ position: "absolute", inset: 0, width: G.willPushPWMBadge ? `calc(100% + ${G.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: G.willPushPWMBadge ? `inset(0 ${G.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: D, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [G.PWM_BADGE_SPACE_WIDTH, G.willPushPWMBadge, D]), je = n.useMemo(() => n.createElement("input", _e(Be({ autoComplete: o.autoComplete || "one-time-code" }, o), { "data-input-otp": !0, "data-input-otp-placeholder-shown": s.length === 0 || void 0, "data-input-otp-mss": I, "data-input-otp-mse": z, inputMode: B, pattern: P?.source, "aria-placeholder": O, style: me, maxLength: d, value: s, ref: c, onPaste: (e) => {
+    var l;
+    pe(e), (l = o.onPaste) == null || l.call(o, e);
+  }, onChange: de, onMouseOver: (e) => {
+    var l;
+    ce(!0), (l = o.onMouseOver) == null || l.call(o, e);
+  }, onMouseLeave: (e) => {
+    var l;
+    ce(!1), (l = o.onMouseLeave) == null || l.call(o, e);
+  }, onFocus: (e) => {
+    var l;
+    fe(), (l = o.onFocus) == null || l.call(o, e);
+  }, onBlur: (e) => {
+    var l;
+    re(!1), (l = o.onBlur) == null || l.call(o, e);
+  } })), [de, fe, pe, B, me, d, z, I, o, P?.source, s]), oe = n.useMemo(() => ({ slots: Array.from({ length: d }).map((e, l) => {
+    var h;
+    let y = Z && I !== null && z !== null && (I === z && l === I || l >= I && l < z), S = s[l] !== void 0 ? s[l] : null, i = s[0] !== void 0 ? null : (h = O?.[l]) != null ? h : null;
+    return { char: S, placeholderChar: i, isActive: y, hasFakeCaret: y && S === null };
+  }), isFocused: Z, isHovering: !o.disabled && ue }), [Z, ue, d, z, I, o.disabled, s]), Ce = n.useMemo(() => b ? b(oe) : n.createElement(Ve.Provider, { value: oe }, w), [w, oe, b]);
+  return n.createElement(n.Fragment, null, m !== null && n.createElement("noscript", null, n.createElement("style", null, m)), n.createElement("div", { ref: le, "data-input-otp-container": !0, style: Ee, className: v }, Ce, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, je)));
+});
+Se.displayName = "Input";
+function Q(t, a) {
+  try {
+    t.insertRule(a);
+  } catch {
+    console.error("input-otp could not insert CSS rule:", a);
+  }
+}
+var qe = `
+[data-input-otp] {
+  --nojs-bg: white !important;
+  --nojs-fg: black !important;
+
+  background-color: var(--nojs-bg) !important;
+  color: var(--nojs-fg) !important;
+  caret-color: var(--nojs-fg) !important;
+  letter-spacing: .25em !important;
+  text-align: center !important;
+  border: 1px solid var(--nojs-fg) !important;
+  border-radius: 4px !important;
+  width: 100% !important;
+}
+@media (prefers-color-scheme: dark) {
+  [data-input-otp] {
+    --nojs-bg: black !important;
+    --nojs-fg: white !important;
+  }
+}`;
+const Ze = ({
+  value: t = "",
+  name: a,
+  onChange: r,
+  onComplete: u,
+  onBlur: M,
+  maxLength: d = 6,
+  placeholder: D = "•",
+  disabled: k = !1,
+  className: O,
+  autoFocus: B = !1,
+  pasteTransformer: _,
+  errorComponent: x,
+  hasError: f,
+  helperComponent: v,
+  helperAlignment: m = "left",
+  slotClassName: b,
+  variant: w = "default",
+  hideSlotsMiddleSeparator: o = !1
+}) => {
+  const C = m === "left" ? "justify-start w-full text-left" : m === "center" ? "justify-center" : "justify-end text-right w-full", N = {
+    default: {
+      text: "text-neutral-default-default",
+      icon: null
+    },
+    error: {
+      text: "text-error-default-default",
+      icon: /* @__PURE__ */ p.jsx(De, { size: 18, className: "text-error-default-default" })
+    },
+    success: {
+      text: "text-success-default-default",
+      icon: /* @__PURE__ */ p.jsx(Re, { size: 18, className: "text-success-default-default" })
+    }
+  }, U = (T) => {
+    r?.(T, a);
+  };
+  return /* @__PURE__ */ p.jsx(
+    Se,
+    {
+      value: t,
+      name: a,
+      autoFocus: B,
+      onChange: U,
+      onComplete: u,
+      onBlur: M,
+      maxLength: d,
+      disabled: k,
+      pasteTransformer: _,
+      spellCheck: !1,
+      containerClassName: $("group flex items-center has-[:disabled]:opacity-30 w-max justify-center", O),
+      render: ({ slots: T }) => {
+        const V = Math.floor(T.length / 2), te = T.slice(0, V), ne = T.slice(V);
+        return /* @__PURE__ */ p.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ p.jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ p.jsx("div", { className: "flex", children: te.map((s, E) => /* @__PURE__ */ p.jsx(ie, { ...s, placeholder: D, hasError: f, className: b, variant: w }, E)) }),
+            /* @__PURE__ */ p.jsx("hr", { className: $("w-2 h-1 mx-2 border-neutral-default-default", o && "hidden") }),
+            /* @__PURE__ */ p.jsx("div", { className: "flex", children: ne.map((s, E) => /* @__PURE__ */ p.jsx(ie, { ...s, placeholder: D, hasError: f, variant: w, className: b }, E)) })
+          ] }),
+          f && x && (typeof x == "string" ? /* @__PURE__ */ p.jsxs("span", { className: $("text-error-default-default text-xs mt-1 flex items-center gap-1", C, N.error.text), children: [
+            N.error.icon,
+            x
+          ] }) : ge.cloneElement(x, { className: $(
+            "text-error-default-default text-xs mt-1",
+            C,
+            N.error.text,
+            x?.props?.className
+          ) })),
+          v && m && (typeof v == "string" ? /* @__PURE__ */ p.jsxs("span", { className: $("text-neutral-medium-default text-xs mt-1 flex items-center gap-1", N[w].text, C), children: [
+            N[w].icon,
+            v
+          ] }) : ge.cloneElement(v, { className: $("text-neutral-medium-default text-xs mt-1", C, N[w].text, v?.props?.className) }))
+        ] });
+      }
+    }
+  );
+};
+Ze.displayName = "OtpInput";
+const Je = (t) => {
+  const a = {
+    default: "border-neutral-default-default",
+    error: "border-error-default-default",
+    success: "border-success-default-default"
+  };
+  return /* @__PURE__ */ p.jsxs(
+    "div",
+    {
+      className: $(
+        "relative w-12 h-12 md:w-14 md:h-14 text-[1rem] md:text-[1.2rem] text-white",
+        "flex items-center justify-center",
+        "transition-all duration-300",
+        "border-2 border-neutral-default-default rounded-md mx-1",
+        { "border-2 border-primary-default-default": t.isActive },
+        a[t.variant || "default"],
+        t.className,
+        t.hasError && a.error
+      ),
+      children: [
+        /* @__PURE__ */ p.jsx("div", { className: "group-has-[input[data-input-otp-placeholder-shown]]:opacity-20", children: t.char ?? t.placeholder }),
+        t.hasFakeCaret && /* @__PURE__ */ p.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ p.jsx("div", { className: "w-3 h-1 rounded-full bg-neutral-default-default animate-pulse" }) })
+      ]
+    }
+  );
+}, ie = Oe(Je);
+ie.displayName = "Slot";
+export {
+  Ze as default
+};

package/dist/{components/Pagination/Pagination.js → Pagination.es.js}

@@ -1,49 +1,49 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import { motion as a } from "framer-motion";
-function m({
-  currentPage: s = 1,
+function h({
+  currentPage: i = 1,
   totalPages: l = 0,
-  onPageChange: d
+  onPageChange: p
 }) {
   const n = (e) => {
-    e >= 1 && e <= l && e !== s && d?.(e);
-  }, u = (() => {
+    e >= 1 && e <= l && e !== i && p?.(e);
+  }, d = (() => {
     const e = [];
     if (l > 7)
-      if (e.push(1), s <= 4) {
-        for (let i = 2; i <= 5; i++)
-          e.push(i);
+      if (e.push(1), i <= 4) {
+        for (let s = 2; s <= 5; s++)
+          e.push(s);
         e.push("ellipsis"), e.push(l);
-      } else if (s >= l - 3) {
+      } else if (i >= l - 3) {
         e.push("ellipsis");
-        for (let i = l - 4; i <= l; i++)
-          e.push(i);
+        for (let s = l - 4; s <= l; s++)
+          e.push(s);
       } else {
         e.push("ellipsis");
-        for (let i = s - 1; i <= s + 1; i++)
-          e.push(i);
+        for (let s = i - 1; s <= i + 1; s++)
+          e.push(s);
         e.push("ellipsis"), e.push(l);
       }
     else
-      for (let i = 1; i <= l; i++)
-        e.push(i);
+      for (let s = 1; s <= l; s++)
+        e.push(s);
     return e;
   })();
-  return /* @__PURE__ */ p("div", { className: "flex items-center justify-center gap-2 p-4", children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center justify-center gap-2 p-4", children: [
+    /* @__PURE__ */ t.jsx(
       a.button,
       {
         whileHover: { scale: 1.05 },
         whileTap: { scale: 0.95 },
-        onClick: () => n(s - 1),
-        disabled: s === 1,
+        onClick: () => n(i - 1),
+        disabled: i === 1,
         className: "px-4 py-2 text-primary-medium-default hover:text-primary-default-default disabled:text-gray-600 disabled:cursor-default transition-colors cursor-pointer",
         children: "Anterior"
       }
     ),
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-1 select-none", children: u.map((e, o) => {
+    /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-1 select-none", children: d.map((e, o) => {
       if (e === "ellipsis")
-        return /* @__PURE__ */ t(
+        return /* @__PURE__ */ t.jsx(
           "span",
           {
             className: "px-3 py-2 text-neutral-default-default",
@@ -51,16 +51,16 @@ function m({
           },
           `ellipsis-${o}`
         );
-      const i = e, r = i === s;
-      return /* @__PURE__ */ p(
+      const s = e, r = s === i;
+      return /* @__PURE__ */ t.jsxs(
         a.button,
         {
           whileHover: r ? {} : { scale: 1.1 },
           whileTap: r ? {} : { scale: 0.9 },
-          onClick: () => n(i),
+          onClick: () => n(s),
           className: `relative px-3 py-2 min-w-[40px] text-center transition-colors ${r ? "text-primary-default-default" : "text-neutral-default-default hover:text-white cursor-pointer "}`,
           children: [
-            r && /* @__PURE__ */ t(
+            r && /* @__PURE__ */ t.jsx(
               a.div,
               {
                 layoutId: "activePage",
@@ -73,19 +73,19 @@ function m({
                 }
               }
             ),
-            /* @__PURE__ */ t("span", { className: "relative z-10", children: i })
+            /* @__PURE__ */ t.jsx("span", { className: "relative z-10", children: s })
           ]
         },
-        i
+        s
       );
     }) }),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ t.jsx(
       a.button,
       {
         whileHover: { scale: 1.05 },
         whileTap: { scale: 0.95 },
-        onClick: () => n(s + 1),
-        disabled: s === l,
+        onClick: () => n(i + 1),
+        disabled: i === l,
         className: "px-4 py-2 text-primary-medium-default hover:text-primary-default-default disabled:text-gray-600 disabled:cursor-default transition-colors cursor-pointer",
         children: "Siguiente"
       }
@@ -93,5 +93,5 @@ function m({
   ] });
 }
 export {
-  m as default
+  h as default
 };

package/dist/{components/ProfilePictureUpload/ProfilePictureUpload.js → ProfilePictureUpload.es.js}

@@ -1,23 +1,23 @@
-import { jsxs as R, jsx as n } from "react/jsx-runtime";
-import { memo as j, useRef as w, useLayoutEffect as x } from "react";
-import F from "../Avatar/Avatar.js";
-import { cn as i } from "../../lib/cn.js";
-const A = {
+import { j as o } from "./jsx-runtime-DKDX3adD.js";
+import { memo as L, useRef as w, useLayoutEffect as N } from "react";
+import R from "./Avatar.es.js";
+import { c as i } from "./cn-B6yFEsav.js";
+const F = {
   sm: "w-16 h-16",
   md: "w-24 h-24",
   lg: "w-32 h-32",
   xl: "w-40 h-40"
-}, M = {
+}, A = {
   sm: "w-4 h-4",
   md: "w-5 h-5",
   lg: "w-6 h-6",
   xl: "w-8 h-8"
-}, T = {
+}, M = {
   sm: "w-6 h-6",
   md: "w-7 h-7",
   lg: "w-8 h-8",
   xl: "w-10 h-10"
-}, U = {
+}, T = {
   sm: "-bottom-1 -right-0.5",
   md: "-bottom-0.5 -right-0.5",
   lg: "bottom-1 right-1",
@@ -27,37 +27,37 @@ const A = {
   md: "w-5 h-5",
   lg: "w-6 h-6",
   xl: "w-7 h-7"
-}, z = {
+}, U = {
   sm: "-top-0.5 -right-0.5",
   md: "-top-1 -right-1",
   lg: "-top-1 -right-0",
   xl: "top-1 right-1"
 };
-function W({
+function z({
   imageUrl: t,
   fallbackText: e = "S L",
   onFileSelect: y,
   onEditClick: m,
   onRemoveClick: k,
-  size: o = "lg",
+  size: r = "lg",
   className: C,
-  disabled: r = !1,
-  showRemoveButton: p = !0,
-  acceptedTypes: v = "image/*",
+  disabled: n = !1,
+  showRemoveButton: j = !0,
+  acceptedTypes: p = "image/*",
   maxFileSize: h = 5 * 1024 * 1024,
   onError: g
 }) {
-  const f = w(null), u = w(null), B = (l) => l.type.startsWith("image/") ? l.size > h ? (g?.(
+  const f = w(null), u = w(null), x = (l) => l.type.startsWith("image/") ? l.size > h ? (g?.(
     `La imagen debe ser menor a ${Math.round(h / 1024 / 1024)}MB`
-  ), !1) : !0 : (g?.("Por favor selecciona un archivo de imagen válido"), !1), S = (l) => {
+  ), !1) : !0 : (g?.("Por favor selecciona un archivo de imagen válido"), !1), v = (l) => {
     const a = l.target.files?.[0];
-    a && (B(a) && y?.(a), l.target.value = "");
-  }, L = () => {
-    r || (m ? m() : f.current?.click());
-  }, N = (l) => {
-    l.stopPropagation(), !r && k?.();
+    a && (x(a) && y?.(a), l.target.value = "");
+  }, B = () => {
+    n || (m ? m() : f.current?.click());
+  }, S = (l) => {
+    l.stopPropagation(), !n && k?.();
   };
-  return x(() => {
+  return N(() => {
     if (u.current) {
       const a = ((E) => {
         let c = E;
@@ -74,61 +74,61 @@ function W({
       );
       u.current.style.borderColor = a;
     }
-  }, []), /* @__PURE__ */ R(
+  }, []), /* @__PURE__ */ o.jsxs(
     "div",
     {
       className: i("relative inline-block border-inherit group", C),
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ o.jsx(
           "input",
           {
             ref: f,
             type: "file",
-            accept: v,
-            onChange: S,
+            accept: p,
+            onChange: v,
             className: "hidden",
-            disabled: r
+            disabled: n
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ o.jsx(
           "div",
           {
             className: i(
-              A[o],
+              F[r],
               "rounded-full overflow-hidden flex items-center justify-center relative",
-              r && "opacity-50 cursor-not-default"
+              n && "opacity-50 cursor-not-default"
             ),
-            children: /* @__PURE__ */ n(
-              F,
+            children: /* @__PURE__ */ o.jsx(
+              R,
               {
                 imageUrl: t,
                 fallbackText: e,
-                sizeImage: o,
-                sizeFallback: o
+                sizeImage: r,
+                sizeFallback: r
               }
             )
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ o.jsx(
           "button",
           {
             ref: u,
             className: i(
               "absolute bg-primary-default-default rounded-lg border-2 hover:bg-primary-default-hover cursor-pointer grid place-content-center",
-              U[o],
-              T[o],
-              r && "opacity-50 cursor-not-default"
+              T[r],
+              M[r],
+              n && "opacity-50 cursor-not-default"
             ),
-            onClick: L,
-            disabled: r,
-            children: /* @__PURE__ */ n(
+            onClick: B,
+            disabled: n,
+            children: /* @__PURE__ */ o.jsx(
               "svg",
               {
-                className: i(M[o], "text-white"),
+                className: i(A[r], "text-white"),
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ n(
+                children: /* @__PURE__ */ o.jsx(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -141,27 +141,27 @@ function W({
             )
           }
         ),
-        t && p && !r && /* @__PURE__ */ n(
+        t && j && !n && /* @__PURE__ */ o.jsx(
           "button",
           {
             className: i(
               "absolute rounded-full shadow-lg bg-error-light flex cursor-pointer items-center justify-center",
               "opacity-0 scale-80 group-hover:opacity-100 group-hover:scale-100",
               "transition-all duration-200 ease-out",
-              z[o],
-              b[o],
-              r && "opacity-50 cursor-default"
+              U[r],
+              b[r],
+              n && "opacity-50 cursor-default"
             ),
-            disabled: r,
-            onClick: N,
-            children: /* @__PURE__ */ n(
+            disabled: n,
+            onClick: S,
+            children: /* @__PURE__ */ o.jsx(
               "svg",
               {
-                className: i(b[o], "text-white p-1"),
+                className: i(b[r], "text-white p-1"),
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ n(
+                children: /* @__PURE__ */ o.jsx(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -178,11 +178,12 @@ function W({
     }
   );
 }
-const I = j(
-  W,
+const W = L(
+  z,
   (t, e) => t.imageUrl === e.imageUrl && t.fallbackText === e.fallbackText && t.size === e.size && t.className === e.className && t.disabled === e.disabled && t.showRemoveButton === e.showRemoveButton && t.acceptedTypes === e.acceptedTypes && t.maxFileSize === e.maxFileSize && t.disableEntryAnimation === e.disableEntryAnimation && t.onFileSelect === e.onFileSelect && t.onEditClick === e.onEditClick && t.onRemoveClick === e.onRemoveClick && t.onError === e.onError
 );
-I.displayName = "ProfilePictureUpload";
+W.displayName = "ProfilePictureUpload";
 export {
-  I as ProfilePictureUpload
+  W as ProfilePictureUpload,
+  W as default
 };