prometeo-design-system 2.3.7 → 2.3.9

package/dist/ProfilePictureUpload.es.js

@@ -1,247 +1,213 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
-import { motion as i, AnimatePresence as E } from "framer-motion";
-import { useRef as v, useState as R, useLayoutEffect as A } from "react";
-import H from "./Avatar.es.js";
-import { c as O } from "./cn-B6yFEsav.js";
-const W = {
+import { j as n } from "./jsx-runtime-DKDX3adD.js";
+import { motion as s } from "framer-motion";
+import { memo as T, useRef as b, useLayoutEffect as A } from "react";
+import M from "./Avatar.es.js";
+import { c as l } from "./cn-B6yFEsav.js";
+const I = {
   sm: "w-16 h-16",
   md: "w-24 h-24",
   lg: "w-32 h-32",
   xl: "w-40 h-40"
-}, F = {
+}, U = {
   sm: "w-4 h-4",
   md: "w-5 h-5",
   lg: "w-6 h-6",
   xl: "w-8 h-8"
-}, T = {
+}, z = {
   sm: "w-6 h-6",
   md: "w-7 h-7",
   lg: "w-8 h-8",
   xl: "w-10 h-10"
-}, V = {
+}, H = {
   sm: "-bottom-1 -right-0.5",
   md: "-bottom-0.5 -right-0.5",
   lg: "bottom-1 right-1",
   xl: "bottom-3 right-2"
-}, y = {
+}, k = {
   sm: "w-4 h-4",
   md: "w-5 h-5",
   lg: "w-6 h-6",
   xl: "w-7 h-7"
-}, q = {
+}, W = {
   sm: "-top-0.5 -right-0.5",
   md: "-top-1 -right-1",
   lg: "-top-1 -right-0",
   xl: "top-1 right-1"
 };
-function X({
-  imageUrl: d,
-  fallbackText: b = "S L",
-  onFileSelect: k,
-  onEditClick: m,
-  onRemoveClick: j,
-  size: o = "lg",
-  className: C,
-  disabled: t = !1,
-  showRemoveButton: B = !0,
-  acceptedTypes: L = "image/*",
-  maxFileSize: h = 5 * 1024 * 1024,
-  onError: g,
-  disbaleEntryAnimation: S = !1
+function O({
+  imageUrl: t,
+  fallbackText: e = "S L",
+  onFileSelect: p,
+  onEditClick: h,
+  onRemoveClick: C,
+  size: i = "lg",
+  className: x,
+  disabled: o = !1,
+  showRemoveButton: j = !0,
+  acceptedTypes: v = "image/*",
+  maxFileSize: g = 5 * 1024 * 1024,
+  onError: f,
+  disableEntryAnimation: w = !1
 }) {
-  const p = v(null), s = v(null), [u, f] = R(!1), $ = (r) => r.type.startsWith("image/") ? r.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), M = (r) => {
-    const n = r.target.files?.[0];
-    n && ($(n) && k?.(n), r.target.value = "");
-  }, N = () => {
-    t || (m ? m() : p.current?.click());
-  }, P = (r) => {
-    r.stopPropagation(), !t && j?.();
+  const y = b(null), u = b(null), B = (r) => r.type.startsWith("image/") ? r.size > g ? (f?.(
+    `La imagen debe ser menor a ${Math.round(g / 1024 / 1024)}MB`
+  ), !1) : !0 : (f?.("Por favor selecciona un archivo de imagen válido"), !1), S = (r) => {
+    const a = r.target.files?.[0];
+    a && (B(a) && p?.(a), r.target.value = "");
+  }, L = () => {
+    o || (h ? h() : y.current?.click());
+  }, N = (r) => {
+    r.stopPropagation(), !o && C?.();
   };
   A(() => {
-    if (s.current) {
-      const n = ((I) => {
-        let a = I;
-        for (; a && a !== document.body; ) {
-          const c = window.getComputedStyle(a).backgroundColor;
-          if (c && c !== "transparent" && c !== "rgba(0, 0, 0, 0)")
-            return c;
-          a = a.parentElement;
+    if (u.current) {
+      const a = ((F) => {
+        let c = F;
+        for (; c && c !== document.body; ) {
+          const d = window.getComputedStyle(c).backgroundColor;
+          if (d && d !== "transparent" && d !== "rgba(0, 0, 0, 0)")
+            return d;
+          c = c.parentElement;
         }
-        const l = window.getComputedStyle(document.body).backgroundColor;
-        return l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)" ? l : "rgb(255, 255, 255)";
-      })(s.current.parentElement);
-      s.current.style.borderColor = n;
+        const m = window.getComputedStyle(document.body).backgroundColor;
+        return m && m !== "transparent" && m !== "rgba(0, 0, 0, 0)" ? m : "rgb(255, 255, 255)";
+      })(
+        u.current.parentElement
+      );
+      u.current.style.borderColor = a;
     }
   }, []);
-  const w = {
-    initial: {
-      animated: {
-        container: {
-          width: 0,
-          height: 0
-        },
-        svg: {}
-      },
-      static: {
-        container: {},
-        svg: {}
-      }
-    },
-    default: {
-      animated: {
-        container: {
-          width: "auto",
-          height: "auto"
-        },
-        svg: {}
-      },
-      static: {
-        container: {},
-        svg: {}
-      }
-    }
-  }, x = S ? "static" : "animated";
-  return /* @__PURE__ */ e.jsxs(
+  const E = w ? {} : { width: 0, height: 0 }, R = w ? {} : { width: "auto", height: "auto" };
+  return /* @__PURE__ */ n.jsxs(
     "div",
     {
-      onMouseEnter: () => f(!0),
-      onMouseLeave: () => f(!1),
-      className: `relative inline-block border-inherit ${C || ""}`,
+      className: l("relative inline-block border-inherit group", x),
       children: [
-        /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ n.jsx(
           "input",
           {
-            ref: p,
+            ref: y,
             type: "file",
-            accept: L,
-            onChange: M,
+            accept: v,
+            onChange: S,
             className: "hidden",
-            disabled: t
+            disabled: o
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          s.div,
+          {
+            className: l(
+              I[i],
+              "rounded-full overflow-hidden flex items-center justify-center relative",
+              o && "opacity-50 cursor-not-allowed"
+            ),
+            children: /* @__PURE__ */ n.jsx(
+              M,
+              {
+                imageUrl: t,
+                fallbackText: e,
+                sizeImage: i,
+                sizeFallback: i
+              }
+            )
           }
         ),
-        /* @__PURE__ */ e.jsx(
-          i.div,
+        /* @__PURE__ */ n.jsx(
+          s.button,
           {
-            className: `
-                    ${W[o]} 
-                    rounded-full 
-                    overflow-hidden
-                    flex items-center justify-center
-                    relative
-                    ${t ? "opacity-50 cursor-not-allowed" : ""}
-                `,
-            children: /* @__PURE__ */ e.jsx(
-              H,
+            ref: u,
+            className: l(
+              "absolute bg-primary-default-default rounded-lg border-[2px] hover:bg-primary-default-hover cursor-pointer grid place-content-center",
+              H[i],
+              z[i],
+              o && "opacity-50 cursor-not-allowed"
+            ),
+            onClick: L,
+            disabled: o,
+            whileTap: o ? {} : { scale: 0.95 },
+            initial: E,
+            animate: R,
+            transition: { duration: 0.3, ease: "easeOut" },
+            children: /* @__PURE__ */ n.jsx(
+              s.svg,
               {
-                imageUrl: d,
-                fallbackText: b,
-                sizeImage: o,
-                sizeFallback: o
+                className: l(U[i], "text-white"),
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                whileHover: o ? {} : {
+                  x: [0, -1, 0, 1, -1, 0, 1],
+                  y: [0, 1, 0, 1, 0, 1, 1],
+                  rotate: [0, 5, -3, 8, -5, 3, 1]
+                },
+                transition: {
+                  duration: 2,
+                  ease: "easeInOut"
+                },
+                children: /* @__PURE__ */ n.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                  }
+                )
               }
             )
           }
         ),
-        /* @__PURE__ */ e.jsxs(E, { children: [
-          /* @__PURE__ */ e.jsx(
-            i.button,
-            {
-              ref: s,
-              className: O(
-                "absolute",
-                "bg-primary-default-default rounded-lg border-[2px] hover:bg-primary-default-hover cursor-pointer grid place-content-center",
-                V[o],
-                T[o],
-                t ? "opacity-50 cursor-not-allowed" : ""
-              ),
-              onClick: N,
-              disabled: t,
-              whileTap: t ? {} : { scale: 0.95, transition: { duration: 0.2, ease: "easeInOut" } },
-              initial: w.initial[x].container,
-              animate: w.default[x].container,
-              children: /* @__PURE__ */ e.jsx(
-                i.svg,
-                {
-                  className: `${F[o]} text-white`,
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  animate: u && !t ? {
-                    x: [0, -1, 0, 1, -1, 0, 1],
-                    y: [0, 1, 0, 1, 0, 1, 1],
-                    rotate: [0, 5, -3, 8, -5, 3, 1],
-                    transition: {
-                      duration: 2,
-                      ease: "easeInOut"
-                    }
-                  } : { x: 0, y: 0, rotate: 0 },
-                  transition: {
-                    duration: 1.2,
-                    repeat: 0,
-                    ease: "easeInOut"
-                  },
-                  children: /* @__PURE__ */ e.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          d && B && !t && /* @__PURE__ */ e.jsx(
-            i.button,
-            {
-              className: `
-                            absolute 
-                            ${q[o]} 
-                            ${y[o]} 
-                            rounded-full 
-                            shadow-lg 
-                           bg-error-light
-                            flex 
-                            cursor-pointer
-                            items-center 
-                            justify-center
-                            ${t ? "opacity-50 cursor-not-allowed" : ""}
-                        `,
-              disabled: t,
-              onClick: P,
-              initial: { scale: 0, opacity: 0, rotate: -90 },
-              animate: {
-                scale: u ? 1 : 0.8,
-                opacity: u ? 1 : 0,
-                rotate: 0
-              },
-              exit: { scale: 0, opacity: 0, rotate: 90 },
-              whileTap: { scale: 0.9 },
-              transition: {
-                type: "spring",
-                stiffness: 300,
-                damping: 25
-              },
-              children: /* @__PURE__ */ e.jsx(
-                i.svg,
-                {
-                  className: `${y[o]} text-white p-1`,
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  whileHover: { rotate: 90 },
-                  transition: { duration: 0.2 },
-                  children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
-                }
-              )
-            }
-          )
-        ] })
+        t && j && !o && /* @__PURE__ */ n.jsx(
+          s.button,
+          {
+            className: l(
+              "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",
+              W[i],
+              k[i],
+              o && "opacity-50 cursor-not-allowed"
+            ),
+            disabled: o,
+            onClick: N,
+            whileTap: { scale: 0.9 },
+            transition: {
+              type: "spring",
+              stiffness: 300,
+              damping: 25
+            },
+            children: /* @__PURE__ */ n.jsx(
+              s.svg,
+              {
+                className: l(k[i], "text-white p-1"),
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                whileHover: { rotate: 90 },
+                transition: { duration: 0.2 },
+                children: /* @__PURE__ */ n.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        )
       ]
     }
   );
 }
+const $ = T(
+  O,
+  (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
+);
+$.displayName = "ProfilePictureUpload";
 export {
-  X as ProfilePictureUpload
+  $ as ProfilePictureUpload
 };

package/dist/ProgressBar.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { c as x } from "./cn-B6yFEsav.js";
 import u from "react";
 const j = u.forwardRef(

package/dist/SegmentedButton.es.js

@@ -1,4 +1,4 @@
-import { j as u } from "./jsx-runtime-ByW6EXIE.js";
+import { j as u } from "./jsx-runtime-DKDX3adD.js";
 import { c as d } from "./cn-B6yFEsav.js";
 import z, { useState as M, useMemo as C, useEffect as L } from "react";
 import { motion as E } from "framer-motion";

package/dist/Select.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import { Icons as k } from "./Icons.es.js";
 import { c as a } from "./cn-B6yFEsav.js";
 import ce, { useRef as F, useLayoutEffect as we, memo as z, useState as ie, useMemo as U, useCallback as P, useEffect as Z } from "react";

package/dist/SelectFormik.es.js

@@ -1,4 +1,4 @@
-import { j as m } from "./jsx-runtime-ByW6EXIE.js";
+import { j as m } from "./jsx-runtime-DKDX3adD.js";
 import { useField as s } from "formik";
 import i from "./Select.es.js";
 const p = (e) => {

package/dist/SelectFormikLegacy.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import { Icons as g } from "./Icons.es.js";
 import { c as d } from "./cn-B6yFEsav.js";
 import { useField as $, ErrorMessage as q } from "formik";

package/dist/Skeleton.es.js

@@ -1,4 +1,4 @@
-import { j as E } from "./jsx-runtime-ByW6EXIE.js";
+import { j as E } from "./jsx-runtime-DKDX3adD.js";
 import { c as B } from "./cn-B6yFEsav.js";
 import { memo as N, useRef as R, useCallback as D, useLayoutEffect as M } from "react";
 const y = (n) => {

package/dist/Spinner.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { ClipLoader as l, SyncLoader as m, HashLoader as p, GridLoader as x, DotLoader as j, BounceLoader as f } from "react-spinners";
 import { c as L } from "./cn-B6yFEsav.js";
 const y = ({

package/dist/Steps.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { c as j } from "./cn-B6yFEsav.js";
 import { motion as r } from "framer-motion";
 import N from "react";

package/dist/SwipeContainer.es.js

@@ -1,4 +1,4 @@
-import { j as o } from "./jsx-runtime-ByW6EXIE.js";
+import { j as o } from "./jsx-runtime-DKDX3adD.js";
 import { c as i } from "./cn-B6yFEsav.js";
 import { useState as d, useRef as D, useEffect as L } from "react";
 const O = ({

package/dist/Switch.es.js

@@ -1,4 +1,4 @@
-import { j as a } from "./jsx-runtime-ByW6EXIE.js";
+import { j as a } from "./jsx-runtime-DKDX3adD.js";
 import { c as r } from "./cn-B6yFEsav.js";
 import { memo as w, useRef as b } from "react";
 import { motion as c } from "framer-motion";

package/dist/TabLinks.es.js

@@ -1,56 +1,56 @@
-import { j as a } from "./jsx-runtime-ByW6EXIE.js";
-import { motion as h } from "framer-motion";
-import { memo as d } from "react";
-import { c as i } from "./cn-B6yFEsav.js";
-const l = d(function({
-  items: o,
-  activeTab: n,
-  onTabChange: u,
-  className: f,
-  tabClassName: c,
-  activeTabClassName: m,
-  indicatorClassName: b,
-  animated: p = !0,
-  renderTab: r
+import { j as n } from "./jsx-runtime-DKDX3adD.js";
+import { motion as x } from "framer-motion";
+import { memo as N } from "react";
+import { c as r } from "./cn-B6yFEsav.js";
+function c({
+  items: t,
+  activeTab: e,
+  onTabChange: i,
+  className: l,
+  tabClassName: d,
+  activeTabClassName: u,
+  indicatorClassName: f,
+  animated: b = !0,
+  renderTab: o
 }) {
-  const x = (t) => {
-    t.disabled || u?.(t.id, t);
+  const h = (a) => {
+    a.disabled || i?.(a.id, a);
   };
-  return /* @__PURE__ */ a.jsx(
+  return /* @__PURE__ */ n.jsx(
     "div",
     {
-      className: i(
+      className: r(
         "flex flex-row justify-around items-end relative border-b-1 border-neutral-strong-default w-full md:justify-start md:px-10 md:gap-5",
-        f
+        l
       ),
       role: "tablist",
-      children: o?.map((t) => {
-        const e = n === t.id, s = () => x(t);
-        return r ? /* @__PURE__ */ a.jsx("div", { children: r(t, e, s) }, t.id) : /* @__PURE__ */ a.jsxs(
+      children: t?.map((a) => {
+        const s = e === a.id, m = () => h(a);
+        return o ? /* @__PURE__ */ n.jsx("div", { children: o(a, s, m) }, a.id) : /* @__PURE__ */ n.jsxs(
           "button",
           {
-            onClick: s,
-            disabled: t.disabled,
-            className: i(
+            onClick: m,
+            disabled: a.disabled,
+            className: r(
               "relative flex justify-center items-center h-10 px-4 font-medium focus:outline-none transition-colors",
-              !t.disabled && "hover:text-primary-default-default cursor-pointer",
-              t.disabled && "opacity-50 cursor-not-allowed",
-              c,
-              e && m
+              !a.disabled && "hover:text-primary-default-default cursor-pointer",
+              a.disabled && "opacity-50 cursor-not-allowed",
+              d,
+              s && u
             ),
-            tabIndex: t.disabled ? -1 : 0,
-            "aria-label": t.title,
+            tabIndex: a.disabled ? -1 : 0,
+            "aria-label": a.title,
             role: "tab",
-            "aria-selected": e,
-            title: t.description,
+            "aria-selected": s,
+            title: a.description,
             children: [
-              e && p && /* @__PURE__ */ a.jsx(
-                h.div,
+              s && b && /* @__PURE__ */ n.jsx(
+                x.div,
                 {
                   layoutId: "tab-indicator",
-                  className: i(
+                  className: r(
                     "absolute -bottom-[1px] left-0 right-0 h-[5px] rounded-t-xl bg-primary-default-default z-0",
-                    b
+                    f
                   ),
                   transition: {
                     type: "spring",
@@ -60,26 +60,35 @@ const l = d(function({
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ a.jsx(
+              /* @__PURE__ */ n.jsx(
                 "span",
                 {
-                  className: i(
+                  className: r(
                     "relative z-10",
-                    e ? "text-primary-default-default font-semibold text-md" : "text-neutral-medium-default font-medium text-md"
+                    s ? "text-primary-default-default font-semibold text-md" : "text-neutral-medium-default font-medium text-md"
                   ),
-                  children: t.title
+                  children: a.title
                 }
               )
             ]
           },
-          t.id
+          a.id
         );
       })
     }
   );
+}
+c.displayName = "TabLinks";
+const C = N(c, (t, e) => {
+  if (t.activeTab !== e.activeTab || t.className !== e.className || t.tabClassName !== e.tabClassName || t.activeTabClassName !== e.activeTabClassName || t.indicatorClassName !== e.indicatorClassName || t.animated !== e.animated || t.onTabChange !== e.onTabChange || t.renderTab !== e.renderTab || t.items.length !== e.items.length)
+    return !1;
+  for (let i = 0; i < t.items.length; i++) {
+    const l = t.items[i], d = e.items[i];
+    if (l.id !== d.id || l.title !== d.title || l.disabled !== d.disabled || l.description !== d.description)
+      return !1;
+  }
+  return !0;
 });
-l.displayName = "TabLinks";
-const N = d(l);
 export {
-  N as default
+  C as default
 };

package/dist/Table.es.js

@@ -1,4 +1,4 @@
-import { j as r } from "./jsx-runtime-ByW6EXIE.js";
+import { j as r } from "./jsx-runtime-DKDX3adD.js";
 import { c as l } from "./cn-B6yFEsav.js";
 import * as o from "react";
 const n = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx("div", { className: "w-full", children: /* @__PURE__ */ r.jsx(

package/dist/TextArea.es.js

@@ -1,4 +1,4 @@
-import { j as y } from "./jsx-runtime-ByW6EXIE.js";
+import { j as y } from "./jsx-runtime-DKDX3adD.js";
 import { c as C } from "./cn-B6yFEsav.js";
 import * as s from "react";
 function M({

package/dist/Tooltip.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { AnimatePresence as f, motion as n } from "framer-motion";
 import { useState as p, cloneElement as x } from "react";
 import { Icons as b } from "./Icons.es.js";