prometeo-design-system 4.4.0 → 4.4.3

package/dist/Input.es.js

@@ -1,13 +1,13 @@
 import { j as t } from "./jsx-runtime-GkKLlHH4.js";
 import { c as e } from "./cn-B6yFEsav.js";
-import { memo as q, forwardRef as V, useState as F } from "react";
-import ee from "./Spinner.es.js";
-import { u as te } from "./useLabelBackground-D5SzHhl_.js";
-import { H as re } from "./HelperComponent-ljsn0xD6.js";
-import { EyeVisibility as oe } from "./Icons/EyeVisibility.es.js";
-import { EyeVisibilityOff as se } from "./Icons/EyeVisibilityOff.es.js";
+import { memo as Z, forwardRef as q, useState as V } from "react";
+import F from "./Spinner.es.js";
+import { u as ee } from "./useLabelBackground-D5SzHhl_.js";
+import { H as te } from "./HelperComponent-ljsn0xD6.js";
+import { EyeVisibility as re } from "./Icons/EyeVisibility.es.js";
+import { EyeVisibilityOff as oe } from "./Icons/EyeVisibilityOff.es.js";
 import le from "./Button.es.js";
-import { Close as ae } from "./Icons/Close.es.js";
+import { Close as se } from "./Icons/Close.es.js";
 const x = {
   default: {
     container: "",
@@ -42,159 +42,173 @@ const x = {
     label: e("text-success", "peer-focus:text-success-light"),
     icon: e("text-success-light", "peer-focus:text-success-light")
   }
-}, $ = V(
+}, ae = q(
   ({
-    label: h,
-    icon: o,
-    iconPosition: l = "left",
+    label: b,
+    icon: l,
+    iconPosition: s = "left",
     onChange: I,
     value: S,
-    name: b,
-    width: i = "100%",
+    name: h,
+    width: m = "100%",
     height: a,
     variant: u = "default",
-    labelVariant: s = "default",
-    size: E = "medium",
-    disabled: f = !1,
+    labelVariant: o = "default",
+    size: g = "medium",
+    disabled: c = !1,
     type: r = "text",
     isFetching: n,
-    errorComponent: g,
-    helperComponent: w,
-    placeholder: L,
-    required: N = !1,
-    onFocus: R,
-    onBlur: k,
-    onKeyDown: B,
-    onKeyUp: D,
-    className: P,
-    style: M,
-    readOnly: O = !1,
-    onClear: m,
-    onClickIcon: z,
+    errorComponent: w,
+    helperComponent: y,
+    placeholder: E,
+    required: z = !1,
+    onFocus: L,
+    onBlur: R,
+    onKeyDown: k,
+    onKeyUp: B,
+    className: D,
+    style: P,
+    readOnly: M = !1,
+    onClear: i,
+    onClickIcon: $,
     ...v
-  }, T) => {
-    const [y, A] = F(!1), { ref: C } = te();
-    let p = E;
+  }, O) => {
+    const [j, T] = V(!1), { ref: _ } = ee();
+    let p = g;
     a && (p = "customHeight");
-    const c = {
+    const f = {
+      xsmall: {
+        container: "text-sm p-0",
+        input: "h-8 px-0 text-[1rem] prometeo-fonts-body-medium",
+        label: ` prometeo-fonts-label-large 
+            peer-focus:prometeo-fonts-label-large  
+            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+        icon: "w-5 h-5 *:size-5",
+        button: "left-2"
+      },
       small: {
         container: "text-sm",
         input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
         label: ` prometeo-fonts-label-large 
             peer-focus:prometeo-fonts-label-large  
-            peer-placeholder-shown:${s === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
-        icon: "w-4 h-4 right-3"
+            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+        icon: "w-4 h-4 right-3",
+        button: ""
       },
       medium: {
         container: "text-base",
         input: "h-12 px-3 prometeo-fonts-body-large",
         label: ` prometeo-fonts-label-large 
             peer-focus:prometeo-fonts-label-large  
-            peer-placeholder-shown:${s === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
-        icon: "w-5 h-5 right-3"
+            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+        icon: "w-5 h-5 right-3",
+        button: ""
       },
       large: {
         container: "text-lg",
         input: "h-14 px-3 text-lg  border-b border-t-0 border-x-0 rounded-none focus:ring-0 prometeo-fonts-body-xlarge ",
         label: "peer-placeholder-shown:prometeo-fonts-body-xlarge peer-focus:prometeo-fonts-label-large peer-focus:text-neutral-medium-default prometeo-fonts-label-large ",
-        icon: "w-6 h-6 right-3"
+        icon: "w-6 h-6 right-3",
+        button: ""
       },
       customHeight: {
         container: "text-base",
         input: "text-base",
         label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
-        icon: "w-6 h-6 right-3"
+        icon: "w-6 h-6 right-3",
+        button: ""
       }
-    }, G = () => {
-      A(!y);
-    }, j = {};
-    i && i !== "100%" && (j.width = i), a && (j.height = a);
-    const H = u === "error" && g, J = !H && w, K = r === "password", Q = () => s === "static" ? "-top-1 -translate-y-full left-0 pl-3" : o ? `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${l === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, U = () => a ? c.customHeight.label : c[p].label, W = () => a ? { height: a } : {}, X = () => s === "default" ? h : L || h || "", Y = () => K ? !o && !m ? "pr-10" : l === "left" ? "pl-10 pr-10" : "pr-16" : m ? o ? l === "left" ? "pl-10 pr-7" : "pr-10 pl-3" : "pr-7" : o ? l === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Z = s === "default" && "transition-all duration-200 ease-in-out", d = g || w;
+    }, A = () => {
+      T(!j);
+    }, N = {};
+    m && m !== "100%" && (N.width = m), a && (N.height = a);
+    const H = u === "error" && w, C = !H && y, G = r === "password", J = () => o === "static" ? "-top-1 -translate-y-full left-0 pl-3" : l ? `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${s === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, K = () => a ? f.customHeight.label : f[p].label, Q = () => a ? { height: a } : {}, U = () => o === "default" ? b : E || b || "", W = () => G ? !l && !i ? "pr-10" : s === "left" ? "pl-10 pr-10" : "pr-16" : i ? l ? s === "left" ? `pl-10 pr-7 ${g === "xsmall" && "pl-8"}` : "pr-10 pl-3" : "pr-7" : l ? s === "left" ? `pl-10 pr-7 ${g === "xsmall" && "pl-[31px]"}` : "pr-10 pl-3" : "", X = o === "default" && "transition-all duration-200 ease-in-out", d = w || y;
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: e(
           "relative",
-          c[p].container,
-          !i && "w-full",
+          f[p].container,
+          !m && "w-full",
           "bg-inherit",
-          s === "static" && "mt-2",
-          P
+          o === "static" && "mt-2",
+          D
         ),
-        style: { ...M, ...j },
+        style: { ...P, ...N },
         children: [
           /* @__PURE__ */ t.jsx(
             "input",
             {
-              id: b,
-              name: b,
-              ref: T,
+              id: h,
+              name: h,
+              ref: O,
               value: S,
-              placeholder: X(),
-              type: r === "password" && y ? "text" : r,
+              placeholder: U(),
+              type: r === "password" && j ? "text" : r,
               className: e(
                 "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
                 "focus:outline-none px-3",
-                s === "default" && "placeholder:text-transparent",
-                s === "static" && "placeholder:text-neutral-medium-default ",
+                o === "default" && "placeholder:text-transparent",
+                o === "static" && "placeholder:text-neutral-medium-default ",
                 x[u].input,
-                c[p].input,
-                o && "pr-10",
-                f && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                f[p].input,
+                l && "pr-10",
+                c && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
                 x[u].container,
-                Y()
+                W()
               ),
-              style: W(),
+              style: Q(),
               onChange: I,
-              onFocus: R,
-              onBlur: k,
-              disabled: f,
-              required: N,
-              onKeyDown: B,
-              onKeyUp: D,
+              onFocus: L,
+              onBlur: R,
+              disabled: c,
+              required: z,
+              onKeyDown: k,
+              onKeyUp: B,
               defaultValue: v.defaultValue,
-              readOnly: O,
+              readOnly: M,
               ...v
             }
           ),
           /* @__PURE__ */ t.jsx(
             "label",
             {
-              ref: C,
-              htmlFor: b,
+              ref: _,
+              htmlFor: h,
               className: e(
                 "absolute left-3 pointer-events-none px-1 z-10",
-                Z,
-                U(),
+                X,
+                K(),
                 x[u].label,
-                Q(),
-                N && "after:content-['*'] after:text-error-default after:ml-1",
-                f && "text-neutral-medium-disabled prometeo-fonts-label-large"
+                J(),
+                z && "after:content-['*'] after:text-error-default after:ml-1",
+                c && "text-neutral-medium-disabled prometeo-fonts-label-large"
               ),
-              children: h
+              children: b
             }
           ),
-          (o || r === "password" || n) && /* @__PURE__ */ t.jsx(
+          (l || r === "password" || n) && /* @__PURE__ */ t.jsx(
             "button",
             {
               tabIndex: -1,
               type: "button",
               className: e(
                 `absolute ${d ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
-                c[p].icon,
+                f[p].icon,
                 x[u].icon,
-                (r === "password" || z) && !n ? "cursor-pointer" : "pointer-events-none",
-                l === "right" ? "right-3" : "left-3"
+                (r === "password" || $) && !n ? "cursor-pointer" : "pointer-events-none",
+                s === "right" ? "right-3" : "left-3",
+                f[p]?.button
               ),
-              onClick: n ? void 0 : r === "password" ? G : z,
-              onMouseDown: (_) => r === "password" && !n && _.preventDefault(),
+              onClick: n ? void 0 : r === "password" ? A : $,
+              onMouseDown: (Y) => r === "password" && !n && Y.preventDefault(),
               children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
-                n && r !== "password" ? /* @__PURE__ */ t.jsx(ee, { variant: "sync", size: "small", className: "size-5" }) : o,
-                r === "password" && (y ? /* @__PURE__ */ t.jsx(oe, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(se, { size: 24, className: "" }))
+                n && r !== "password" ? /* @__PURE__ */ t.jsx(F, { variant: "sync", size: "small", className: "size-5" }) : l,
+                r === "password" && (j ? /* @__PURE__ */ t.jsx(re, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(oe, { size: 24, className: "" }))
               ] })
             }
           ),
-          m && /* @__PURE__ */ t.jsx(
+          i && /* @__PURE__ */ t.jsx(
             le,
             {
               type: "button",
@@ -202,24 +216,23 @@ const x = {
                 `absolute ${d ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
                 "size-6 p-1 rounded-full",
                 "hover:bg-neutral-medium-hover transition-colors",
-                f && "opacity-50 cursor-not-allowed",
-                (o && l === "right" || r === "password" || n) && "mr-9"
+                c && "opacity-50 cursor-not-allowed",
+                (l && s === "right" || r === "password" || n) && "mr-9"
               ),
-              disabled: f,
-              onClick: m,
+              disabled: c,
+              onClick: i,
               variant: "text",
               color: "secondary",
-              icon: /* @__PURE__ */ t.jsx(ae, { size: 20, className: "" })
+              icon: /* @__PURE__ */ t.jsx(se, { size: 20, className: "" })
             }
           ),
-          d && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (H || J) && /* @__PURE__ */ t.jsx(re, { className: "absolute ", variant: u, children: g || w }) })
+          d && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (H || C) && /* @__PURE__ */ t.jsx(te, { className: "absolute ", variant: u, children: w || y }) })
         ]
       }
     );
   }
-);
-$.displayName = "Input";
-const be = q($);
+), ue = Z(ae);
+ue.displayName = "Input";
 export {
-  be as default
+  ue as default
 };

package/dist/PyrionLayout.es.js

@@ -16,7 +16,7 @@ import Ye from "./UserCard.es.js";
 import pe from "./Button.es.js";
 import { Logout as St } from "./Icons/Logout.es.js";
 import jt from "./NotificationCard.es.js";
-import { T as kt, a as Dt } from "./TabLinks-BjGwvqR9.js";
+import { T as kt, a as Dt } from "./TabLinks-DnoWdrdk.js";
 import { Notifications as Xe } from "./Icons/Notifications.es.js";
 import { Close as _e } from "./Icons/Close.es.js";
 import { Help as Je } from "./Icons/Help.es.js";
@@ -869,7 +869,8 @@ const Ht = (t) => {
               label: "Cerrar sesión",
               icon: /* @__PURE__ */ e.jsx(St, {}),
               size: "small",
-              color: "secondary"
+              color: "secondary",
+              className: "w-full justify-start h-12 max-h-none p-3 "
             }
           )
         ] }) })
@@ -1298,9 +1299,9 @@ const pt = Ie(null), wr = () => {
     if (Array.isArray(a)) {
       const P = a?.[0] ? ye(y, a[0]) : null, j = a?.[1] ? ye(y, a[1]) : null, K = X(P), fe = X(j);
       return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 whitespace-break-spaces min-w-1/2", children: K }),
-        fe && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-1 grow shrink-0 min-w-[40%]  overflow-hidden", children: [
-          /* @__PURE__ */ e.jsx("span", { className: "size-0.5 bg-[--neutral-300] rounded-full" }),
+        /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 min-w-[40%] text-nowrap wrap-break-word overflow-hidden text-ellipsis", children: K }),
+        fe && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-1 grow shrink-0 min-w-max max-w-2/3 overflow-visible ", children: [
+          /* @__PURE__ */ e.jsx("span", { className: "size-0.5 bg-[var(--neutral-300)] rounded-full" }),
           /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 whitespace-pre text-ellipsis", children: fe })
         ] })
       ] });