prometeo-design-system 3.1.2 → 3.1.4

package/dist/Avatar.es.js

@@ -1,23 +1,23 @@
-import { j as s } from "./jsx-runtime-DKDX3adD.js";
-import { c as a } from "./cn-B6yFEsav.js";
-import { useState as j } from "react";
-function C({
-  imageUrl: e,
-  sizeImage: l = "md",
-  sizeFallback: t = "md",
-  fallbackText: i = "Selene Soluciones",
-  subImageUrl: x,
-  borderColor: n = "white"
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { g as j } from "./useLabelBackground-BDIHUdND.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import { useState as C, useRef as u, useLayoutEffect as v } from "react";
+function R({
+  imageUrl: t,
+  sizeImage: a = "md",
+  sizeFallback: s = "md",
+  fallbackText: d = "Selene Soluciones",
+  subImageUrl: x
 }) {
-  const [c, m] = j(!1), r = e && e.trim() !== "" && !c, d = (f) => f.split(" ").map((p) => p.charAt(0)).join("").toUpperCase().slice(0, 2), o = {
+  const [m, f] = C(!1), n = t && t.trim() !== "" && !m, h = (l) => l.split(" ").map((w) => w.charAt(0)).join("").toUpperCase().slice(0, 2), c = {
     xxxs: "w-6.5 h-6.5",
-    xxs: "w-8.5 h-8.5",
+    xxs: "w-8 h-8",
     xs: "w-10 h-10",
     sm: "w-16 h-16",
     md: "w-24 h-24",
     lg: "w-32 h-32",
     xl: "w-40 h-40"
-  }, h = {
+  }, g = {
     xxxs: "text-[12px]",
     xxs: "text-xs",
     xs: "text-sm",
@@ -25,55 +25,61 @@ function C({
     md: "text-2xl",
     lg: "text-3xl",
     xl: "text-4xl"
-  }, u = {
+  }, b = {
     xxxs: "w-3 h-3",
-    xxs: "w-4 h-4",
+    xxs: "w-[18px] h-[18px] bottom-0 right-0 translate-x-1/3 translate-y-1/3",
     xs: "w-5 h-5",
     sm: "w-8 h-8",
-    md: "w-12 h-12",
-    lg: "w-16 h-16",
-    xl: "w-20 h-20"
-  }, w = r ? l : t;
-  return /* @__PURE__ */ s.jsxs("div", { className: "relative inline-block", children: [
-    r ? /* @__PURE__ */ s.jsx(
+    md: "w-12 h-12 border-3",
+    lg: "w-16 h-16 border-4",
+    xl: "w-20 h-20 border-5"
+  }, p = n ? a : s, r = u(null), o = u(null);
+  return v(() => {
+    if (!r.current || !o.current) return;
+    const l = j(r.current);
+    o.current.style.borderColor = l;
+  }, []), /* @__PURE__ */ e.jsxs("div", { className: "relative inline-block min-w-max ", ref: r, children: [
+    n ? /* @__PURE__ */ e.jsx(
       "img",
       {
         onError: () => {
-          m(!0);
+          f(!0);
         },
-        src: e,
-        className: `rounded-full object-cover ${o[l]}`,
-        alt: "Profile"
+        src: t,
+        className: `rounded-full object-cover ${c[a]}`,
+        alt: "Profile",
+        draggable: !1
       }
-    ) : /* @__PURE__ */ s.jsx(
+    ) : /* @__PURE__ */ e.jsx(
       "div",
       {
-        className: ` flex items-center justify-center rounded-full aspect-square ${o[t]}`,
+        className: ` flex items-center justify-center rounded-full aspect-square ${c[s]}`,
         style: { backgroundColor: "#C6D2FF" },
-        children: /* @__PURE__ */ s.jsx(
+        children: /* @__PURE__ */ e.jsx(
           "span",
           {
-            className: a(
+            className: i(
               "text-[#312C85] font-semibold",
-              h[t]
+              g[s]
             ),
-            children: d(i)
+            children: h(d)
           }
         )
       },
       "initials"
     ),
-    x && /* @__PURE__ */ s.jsx(
+    x && /* @__PURE__ */ e.jsx(
       "div",
       {
-        className: a(
-          "absolute bottom-[-10px] right-[-10px] rounded-full border-4 overflow-hidden bg-gray-900",
-          u[w]
+        className: i(
+          "absolute bottom-[-10px] right-[-10px] rounded-full border-1 overflow-hidden bg-gray-900",
+          b[p]
         ),
-        style: { borderColor: n },
-        children: /* @__PURE__ */ s.jsx(
+        ref: o,
+        children: /* @__PURE__ */ e.jsx(
           "img",
           {
+            draggable: !1,
             src: x,
             alt: "Sub badge",
             className: "w-full h-full object-cover"
@@ -84,5 +90,5 @@ function C({
   ] });
 }
 export {
-  C as default
+  R as default
 };

package/dist/Button.es.js

@@ -1,9 +1,9 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
 import { memo as A, useMemo as E } from "react";
 import M from "./Spinner.es.js";
-import { c as v } from "./index-BOQuZ0gG.js";
-import { c as d } from "./cn-B6yFEsav.js";
-const m = {
+import { c as p } from "./index-BOQuZ0gG.js";
+import { c as m } from "./cn-B6yFEsav.js";
+const v = {
   small: {
     container: "h-10 px-4 py-2"
   },
@@ -134,7 +134,7 @@ const m = {
     label: "prometeo-fonts-label-xlarge",
     icon: ""
   }
-}, p = {
+}, g = {
   container: "flex justify-center items-center gap-1 w-max rounded-lg bg-transparent cursor-pointer transition-all ease-in-out duration-300 relative",
   label: "w-max transition-all ease-in-out duration-300",
   icon: "w-max transition-all ease-in-out duration-300 flex justify-center items-center"
@@ -152,12 +152,12 @@ const m = {
   false: {
     icon: ""
   }
-}, R = v(p.container, {
+}, R = p(g.container, {
   variants: {
     size: {
-      small: `${r.small.container} ${m.small.container}`,
-      medium: `${r.medium.container} ${m.medium.container}`,
-      large: `${r.large.container} ${m.large.container}`
+      small: `${r.small.container} ${v.small.container}`,
+      medium: `${r.medium.container} ${v.medium.container}`,
+      large: `${r.large.container} ${v.large.container}`
     },
     variant: {
       fill: "",
@@ -203,7 +203,7 @@ const m = {
     color: "primary",
     animation: !0
   }
-}), V = v(p.label, {
+}), V = p(g.label, {
   variants: {
     size: {
       small: r.small.label,
@@ -249,7 +249,7 @@ const m = {
     variant: "fill",
     color: "primary"
   }
-}), q = v(p.icon, {
+}), q = p(g.icon, {
   variants: {
     size: {
       small: r.small.icon,
@@ -301,15 +301,15 @@ const m = {
     animateIcon: !0
   }
 }), D = ({
-  label: g,
+  label: i,
   onClick: j,
-  icon: i,
-  contentClassName: u,
+  icon: u,
+  contentClassName: c,
   loadingText: f = "Cargando...",
-  animate: k = !0,
-  animateIcon: $ = !0,
+  animate: k = !1,
+  animateIcon: $ = !1,
   isLoading: a = !1,
-  children: c,
+  children: d,
   hideSpinner: b = !1,
   spinner: x = /* @__PURE__ */ t.jsx(M, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
   type: N,
@@ -320,12 +320,12 @@ const m = {
   size: o = "medium",
   color: S = "primary"
 }) => {
-  const h = !!($ && !s && !a), B = !!(k && !s && !a), n = s || a ? "disabled" : S, C = E(() => c || (a ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1", children: [
+  const h = !!($ && !s && !a), B = !!(k && !s && !a), n = s || a ? "disabled" : S, C = E(() => d || (a ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1", children: [
     !b && x,
     /* @__PURE__ */ t.jsx(
       "span",
       {
-        className: d(
+        className: m(
           V({
             size: o,
             variant: l,
@@ -336,8 +336,8 @@ const m = {
         children: f
       }
     )
-  ] }) : /* @__PURE__ */ t.jsxs("div", { className: d("flex items-center gap-1", u), children: [
-    i && /* @__PURE__ */ t.jsx(
+  ] }) : /* @__PURE__ */ t.jsxs("div", { className: m("flex items-center gap-1 select-none", c), children: [
+    u && /* @__PURE__ */ t.jsx(
       "span",
       {
         className: q({
@@ -346,10 +346,10 @@ const m = {
           color: n,
           animateIcon: h
         }),
-        children: i
+        children: u
       }
     ),
-    /* @__PURE__ */ t.jsx(
+    i && /* @__PURE__ */ t.jsx(
       "span",
       {
         className: V({
@@ -357,14 +357,14 @@ const m = {
           variant: l,
           color: n
         }),
-        children: g
+        children: i
       }
     )
   ] })), [
+    d,
     c,
     u,
     i,
-    g,
     l,
     o,
     n,
@@ -378,7 +378,7 @@ const m = {
     "button",
     {
       type: N,
-      className: d(
+      className: m(
         "group",
         R({
           size: o,
@@ -391,7 +391,7 @@ const m = {
       disabled: s || a,
       form: I,
       onClick: j,
-      children: /* @__PURE__ */ t.jsx("div", { className: `flex items-center gap-1 ${u}`, children: C })
+      children: /* @__PURE__ */ t.jsx("div", { className: `flex items-center gap-1 ${c}`, children: C })
     }
   );
 }, O = A(D);

package/dist/{CardProfile-Ct5Fs60N.js → CardProfile-y9Knsg26.js}

@@ -1,9 +1,9 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import { c as l } from "./cn-B6yFEsav.js";
-import { motion as i, AnimatePresence as c } from "framer-motion";
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import { motion as l, AnimatePresence as d } from "framer-motion";
 import u from "./Avatar.es.js";
-import { ChevronDown as m } from "./Icons/ChevronDown.es.js";
-import { Logout as f } from "./Icons/Logout.es.js";
+import { ChevronDown as f } from "./Icons/ChevronDown.es.js";
+import { Logout as m } from "./Icons/Logout.es.js";
 function x({
   sessions: t,
   handleTokenLogin: a
@@ -13,8 +13,8 @@ function x({
     {
       className: "w-full  ",
       onClick: () => a?.(r.token),
-      children: /* @__PURE__ */ e.jsx(o, { children: /* @__PURE__ */ e.jsx(
-        o.Content,
+      children: /* @__PURE__ */ e.jsx(s, { children: /* @__PURE__ */ e.jsx(
+        s.Content,
         {
           onClick: () => {
             console.log("hola");
@@ -23,20 +23,20 @@ function x({
           nameUser: r.name,
           nameArea: r?.areaId?.name,
           nameCompany: r.companyId.name,
-          cardProfile: /* @__PURE__ */ e.jsx(o.Image, { isExpanded: !1 })
+          cardProfile: /* @__PURE__ */ e.jsx(s.Image, { isExpanded: !1 })
         }
       ) })
     },
     r._id
   )) });
 }
-const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profile-container flex  rounded-md text-white-prometeo overflow-hidden shrink-0 w-full min-w-0 ", children: t }), p = ({
+const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profile-container flex gap-0.5 overflow-hidden w-full min-w-0 ", children: t }), p = ({
   isExpanded: t,
   sessions: a,
   onClickLogout: r,
   handleTokenLogin: n
-}) => /* @__PURE__ */ e.jsx(c, { mode: "wait", children: t && /* @__PURE__ */ e.jsxs(
-  i.div,
+}) => /* @__PURE__ */ e.jsx(d, { mode: "wait", children: t && /* @__PURE__ */ e.jsxs(
+  l.div,
   {
     initial: { height: 0, opacity: 0 },
     animate: {
@@ -62,7 +62,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
     className: "overflow-hidden",
     children: [
       /* @__PURE__ */ e.jsx(
-        i.div,
+        l.div,
         {
           className: "flex justify-center items-center w-full mt-4",
           exit: {
@@ -80,7 +80,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
       ),
       a && a.length > 0 && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(
-          i.div,
+          l.div,
           {
             className: "mt-4",
             exit: {
@@ -97,7 +97,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
           }
         ),
         /* @__PURE__ */ e.jsx(
-          i.div,
+          l.div,
           {
             className: "mt-4 overflow-hidden w-full  ",
             exit: {
@@ -123,7 +123,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
           }
         ),
         /* @__PURE__ */ e.jsx(
-          i.div,
+          l.div,
           {
             className: "flex justify-center items-center w-full mt-4",
             exit: {
@@ -141,7 +141,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
         )
       ] }),
       /* @__PURE__ */ e.jsxs(
-        i.button,
+        l.button,
         {
           onClick: r,
           className: "flex flex-1 h-12 w-full gap-1 rounded-md cursor-pointer mt-4 mb-4 px-2 items-center overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile",
@@ -162,34 +162,35 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
           },
           whileTap: { scale: 0.98 },
           children: [
-            /* @__PURE__ */ e.jsx(f, { size: 24, className: "text-neutral-default-default" }),
+            /* @__PURE__ */ e.jsx(m, { size: 24, className: "text-neutral-default-default" }),
             /* @__PURE__ */ e.jsx("span", { className: "text-neutral-default-default font-semibold text-sm", children: "Cerrar sesión" })
           ]
         }
       )
     ]
   }
-) }), j = ({ imageUrl: t, fallbackText: a }) => /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center profile-image-wrapper ml-1", children: /* @__PURE__ */ e.jsx(
+) }), g = ({ imageUrl: t, fallbackText: a }) => /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center profile-image-wrapper", children: /* @__PURE__ */ e.jsx(
   u,
   {
+    subImageUrl: t,
     imageUrl: t,
-    sizeImage: "xs",
+    sizeImage: "xxs",
     sizeFallback: "xs",
     fallbackText: a
   }
-) }), g = ({
+) }), j = ({
   isExpanded: t,
   nameUser: a,
   nameCompany: r,
   nameArea: n,
-  cardProfile: s,
-  onClick: d
+  cardProfile: o,
+  onClick: c
 }) => /* @__PURE__ */ e.jsxs(
-  i.button,
+  l.button,
   {
-    onClick: d,
-    className: l(
-      "flex flex-1 gap-1 rounded-l-md cursor-pointer relative overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile h-12",
+    onClick: c,
+    className: i(
+      "flex flex-1 gap-2 rounded-lg cursor-pointer relative overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile h-max p-3",
       t && "bg-neutral-medium-selected"
     ),
     whileHover: {
@@ -199,12 +200,12 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
     whileTap: { scale: 0.98 },
     transition: { duration: 0.2, ease: "easeInOut" },
     children: [
-      s,
-      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col  justify-center overflow-hidden flex-1 relative z-10 profile-user-info mr-2", children: [
+      o,
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col  justify-center overflow-hidden flex-1 relative z-10 profile-user-info mr-2 p-0", children: [
         /* @__PURE__ */ e.jsx(
           "p",
           {
-            className: l(
+            className: i(
               "profile-name font-semibold leading-tight mb-0 text-left",
               t ? "text-primary-default-default" : "text-neutral-default-default"
             ),
@@ -215,7 +216,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
           /* @__PURE__ */ e.jsx(
             "p",
             {
-              className: l(
+              className: i(
                 "profile-options truncate text-xs mt-0",
                 t ? "text-primary-default-default" : "text-neutral-default-default"
               ),
@@ -225,7 +226,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
           /* @__PURE__ */ e.jsx(
             "p",
             {
-              className: l(
+              className: i(
                 "profile-options truncate font-bold mt-0",
                 t ? "text-primary-default-default" : "text-neutral-default-default"
               ),
@@ -235,7 +236,7 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
           /* @__PURE__ */ e.jsx(
             "p",
             {
-              className: l(
+              className: i(
                 "profile-options truncate text-xs mt-0",
                 t ? "text-primary-default-default" : "text-neutral-default-default"
               ),
@@ -247,33 +248,33 @@ const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profil
     ]
   }
 ), v = () => /* @__PURE__ */ e.jsx("div", { className: "w-px bg-gray-500/30 my-1 border-separator-profile" }), y = ({ isExpanded: t, onClick: a }) => /* @__PURE__ */ e.jsx(
-  i.button,
+  l.button,
   {
     onClick: a,
-    className: "flex items-center justify-center p-3 rounded-r-md cursor-pointer relative overflow-hidden focus:outline-none min-w-[50px] hover:bg-neutral-medium-selected button-content-chevron",
+    className: "flex items-center justify-center p-3 rounded-lg cursor-pointer relative overflow-hidden focus:outline-none w-8 min-w-8 hover:bg-neutral-medium-selected button-content-chevron",
     whileHover: { scale: 1.05 },
     whileTap: { scale: 0.95 },
     transition: { duration: 0.2, ease: "easeOut" },
     title: t ? "Ocultar opciones" : "Mostrar opciones",
     "aria-label": t ? "Ocultar opciones" : "Mostrar opciones",
     children: /* @__PURE__ */ e.jsx(
-      i.div,
+      l.div,
       {
         animate: { rotate: t ? 180 : 0 },
         transition: { duration: 0.3, ease: "easeOut" },
         className: "relative button-select-crevron",
-        children: /* @__PURE__ */ e.jsx(i.div, { transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(m, { size: 20, className: "text-prometeo-neutral " }) })
+        children: /* @__PURE__ */ e.jsx(l.div, { transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(f, { size: 24, className: "text-prometeo-neutral " }) })
       }
     )
   }
-), o = Object.assign(h, {
+), s = Object.assign(h, {
   Menu: p,
-  Image: j,
-  Content: g,
+  Image: g,
+  Content: j,
   Separator: v,
   Options: y
 });
 export {
-  o as C,
+  s as C,
   x as a
 };

package/dist/CardProfile.es.js

@@ -1,4 +1,4 @@
-import { C as e, C as f } from "./CardProfile-Ct5Fs60N.js";
+import { C as e, C as f } from "./CardProfile-y9Knsg26.js";
 export {
   e as CardProfile,
   f as default

package/dist/CheckBox.es.js

@@ -1,4 +1,4 @@
-import { j as a } from "./jsx-runtime-DKDX3adD.js";
+import { j as a } from "./jsx-runtime-GkKLlHH4.js";
 import { memo as m, forwardRef as k, useId as g, useRef as v, useCallback as C } from "react";
 import { Check as y } from "./Icons/Check.es.js";
 const s = k(