prometeo-design-system 2.7.9 → 2.8.1

package/dist/{ImageGallery-D8nIvBpV.js → ImageGallery-TkgHO3JL.js}

@@ -3,7 +3,7 @@ import ee, { memo as D, forwardRef as L, useRef as v, useEffect as te, useCallba
 import { c as X } from "./cn-B6yFEsav.js";
 import { u as re } from "./useDragScroll-CHN9OMwn.js";
 import S from "./Button.es.js";
-import { Icons as M } from "./Icons.es.js";
+import { I as M } from "./Icons-ChYkaR8R.js";
 const O = D(L(({ images: n, className: c }, r) => {
   const { ref: d, bind: a } = re({
     axis: "x",

package/dist/ImageGallery.es.js

@@ -1,4 +1,4 @@
-import { I as p } from "./ImageGallery-D8nIvBpV.js";
+import { I as p } from "./ImageGallery-TkgHO3JL.js";
 import { useRef as u, useCallback as r } from "react";
 const g = () => {
   const e = u(null), t = r((a) => {

package/dist/{Input-60IT1aGF.js → Input-CsNlU1Hu.js}

@@ -1,11 +1,10 @@
 import { j as r } from "./jsx-runtime-DKDX3adD.js";
-import { Icons as z } from "./Icons.es.js";
+import { E as _, a as q, C as V } from "./Icons-ChYkaR8R.js";
 import { c as t } from "./cn-B6yFEsav.js";
-import { useRef as q, useLayoutEffect as V, memo as F, forwardRef as ee, useState as te } from "react";
-import re from "./Spinner.es.js";
-import { H as oe } from "./HelperComponent-U6mPwuDH.js";
-import le from "./Button.es.js";
-const se = (o) => {
+import { useRef as F, useLayoutEffect as ee, memo as te, forwardRef as re, useState as oe } from "react";
+import le from "./Spinner.es.js";
+import { H as se } from "./HelperComponent-CcGxM09g.js";
+const ae = (o) => {
   let e = o;
   for (; e && e !== document.body; ) {
     const n = window.getComputedStyle(e).backgroundColor;
@@ -16,11 +15,11 @@ const se = (o) => {
   const l = window.getComputedStyle(document.body).backgroundColor;
   return l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)" ? l : "rgb(255, 255, 255)";
 };
-function ae() {
-  const o = q(null);
-  return V(() => {
+function ne() {
+  const o = F(null);
+  return ee(() => {
     if (!o.current || !o.current.parentElement) return;
-    const e = se(o.current.parentElement);
+    const e = ae(o.current.parentElement);
     o.current.style.backgroundColor = e;
   }, []), {
     ref: o
@@ -60,7 +59,7 @@ const b = {
     label: t("text-success", "peer-focus:text-success-light"),
     icon: t("text-success-light", "peer-focus:text-success-light")
   }
-}, S = ee(
+}, S = re(
   ({
     label: o,
     icon: e,
@@ -68,32 +67,32 @@ const b = {
     onChange: C,
     value: n,
     name: g,
-    width: m = "100%",
+    width: x = "100%",
     height: u,
     variant: c = "default",
     labelVariant: a = "default",
     size: H = "medium",
-    disabled: x = !1,
+    disabled: f = !1,
     type: s = "text",
-    isFetching: f,
+    isFetching: p,
     errorComponent: h,
     helperComponent: w,
     placeholder: $,
     required: N = !1,
     onFocus: k,
-    onBlur: B,
+    onBlur: I,
     onKeyDown: L,
     onKeyUp: R,
-    className: P,
-    style: D,
-    readOnly: A = !1,
-    onClear: v,
+    className: B,
+    style: P,
+    readOnly: D = !1,
+    onClear: z,
     ...E
-  }, M) => {
-    const [y, O] = te(!1), { ref: T } = ae();
-    let p = H;
-    u && (p = "customHeight");
-    const d = {
+  }, A) => {
+    const [y, M] = oe(!1), { ref: O } = ne();
+    let d = H;
+    u && (d = "customHeight");
+    const i = {
       small: {
         container: "text-sm",
         input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
@@ -122,32 +121,32 @@ const b = {
         label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
         icon: "w-6 h-6 right-3"
       }
-    }, G = () => {
-      O(!y);
+    }, T = () => {
+      M(!y);
     }, j = {};
-    m && m !== "100%" && (j.width = m), u && (j.height = u);
-    const I = c === "error" && h, J = !I && w, K = s === "password", Q = () => a === "static" ? "-top-1 -translate-y-full left-0 pl-3" : e ? `${i ? "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"}` : `${i ? "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 = () => u ? d.customHeight.label : d[p].label, W = () => u ? { height: u } : {}, X = () => a === "default" ? o : $ || o || "", Y = () => K ? e ? l === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : e ? l === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Z = a === "default" && "transition-all duration-200 ease-in-out", i = h || w;
+    x && x !== "100%" && (j.width = x), u && (j.height = u);
+    const v = c === "error" && h, G = !v && w, J = s === "password", K = () => a === "static" ? "-top-1 -translate-y-full left-0 pl-3" : e ? `${m ? "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"}` : `${m ? "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`, Q = () => u ? i.customHeight.label : i[d].label, U = () => u ? { height: u } : {}, W = () => a === "default" ? o : $ || o || "", X = () => J ? e ? l === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : e ? l === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Y = a === "default" && "transition-all duration-200 ease-in-out", m = h || w;
     return /* @__PURE__ */ r.jsxs(
       "div",
       {
         className: t(
           "relative",
-          d[p].container,
-          !m && "w-full",
+          i[d].container,
+          !x && "w-full",
           "bg-inherit",
           a === "static" && "mt-2",
-          P
+          B
         ),
-        style: { ...D, ...j },
+        style: { ...P, ...j },
         children: [
           /* @__PURE__ */ r.jsx(
             "input",
             {
               id: g,
               name: g,
-              ref: M,
+              ref: A,
               value: n,
-              placeholder: X(),
+              placeholder: W(),
               type: s === "password" && y ? "text" : s,
               className: t(
                 "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
@@ -155,86 +154,80 @@ const b = {
                 a === "default" && "placeholder:text-transparent",
                 a === "static" && "placeholder:text-neutral-medium-default ",
                 b[c].input,
-                d[p].input,
+                i[d].input,
                 e && "pr-10",
-                x && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                f && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
                 b[c].container,
-                Y()
+                X()
               ),
-              style: W(),
+              style: U(),
               onChange: C,
               onFocus: k,
-              onBlur: B,
-              disabled: x,
+              onBlur: I,
+              disabled: f,
               required: N,
               onKeyDown: L,
               onKeyUp: R,
               defaultValue: E.defaultValue,
-              readOnly: A,
+              readOnly: D,
               ...E
             }
           ),
           /* @__PURE__ */ r.jsx(
             "label",
             {
-              ref: T,
+              ref: O,
               htmlFor: g,
               className: t(
                 "absolute left-3 pointer-events-none px-1 z-10",
-                Z,
-                U(),
-                b[c].label,
+                Y,
                 Q(),
+                b[c].label,
+                K(),
                 N && "after:content-['*'] after:text-error-default after:ml-1",
-                x && "text-neutral-medium-disabled prometeo-fonts-label-large"
+                f && "text-neutral-medium-disabled prometeo-fonts-label-large"
               ),
               children: o
             }
           ),
-          (e || s === "password" || f) && /* @__PURE__ */ r.jsx(
+          (e || s === "password" || p) && /* @__PURE__ */ r.jsx(
             "button",
             {
               tabIndex: -1,
               type: "button",
               className: t(
-                `absolute ${i ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
-                d[p].icon,
+                `absolute ${m ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
+                i[d].icon,
                 b[c].icon,
-                s === "password" && !f ? "cursor-pointer" : "pointer-events-none",
+                s === "password" && !p ? "cursor-pointer" : "pointer-events-none",
                 l === "right" ? "right-3" : "left-3"
               ),
-              onClick: s === "password" && !f ? G : void 0,
-              onMouseDown: (_) => s === "password" && !f && _.preventDefault(),
+              onClick: s === "password" && !p ? T : void 0,
+              onMouseDown: (Z) => s === "password" && !p && Z.preventDefault(),
               children: /* @__PURE__ */ r.jsxs("div", { children: [
-                f && s !== "password" && /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(re, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }),
-                s === "password" && (y ? /* @__PURE__ */ r.jsx(z.EyeVisibility, { size: 24, className: "" }) : /* @__PURE__ */ r.jsx(z.EyeVisibilityOff, { size: 24, className: "" })),
+                p && s !== "password" && /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(le, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }),
+                s === "password" && (y ? /* @__PURE__ */ r.jsx(_, { size: 24, className: "" }) : /* @__PURE__ */ r.jsx(q, { size: 24, className: "" })),
                 e
               ] })
             }
           ),
-          v && /* @__PURE__ */ r.jsx(
-            le,
+          z && /* @__PURE__ */ r.jsx(
+            "button",
             {
               type: "button",
-              color: "secondary",
-              size: "small",
-              animate: !1,
               className: t(
-                `absolute! ${i ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
-                "size-6 p-4 ",
-                "bg-inherit",
-                "hover:bg-transparent! p-4 rounded-full"
+                `absolute ${m ? "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"
               ),
-              label: "",
-              disabled: x,
-              onClick: v,
-              variant: "text",
-              animateIcon: !1,
-              icon: /* @__PURE__ */ r.jsx(z.Close, { size: 20, className: "" })
+              disabled: f,
+              onClick: z,
+              children: /* @__PURE__ */ r.jsx(V, { size: 20, className: "" })
             }
           ),
-          i && /* @__PURE__ */ r.jsx("div", { className: "min-h-6", children: (I || J) && /* @__PURE__ */ r.jsx(
-            oe,
+          m && /* @__PURE__ */ r.jsx("div", { className: "min-h-6", children: (v || G) && /* @__PURE__ */ r.jsx(
+            se,
             {
               className: "absolute ",
               variant: c,
@@ -247,8 +240,8 @@ const b = {
   }
 );
 S.displayName = "Input";
-const me = F(S);
+const me = te(S);
 export {
   me as I,
-  ae as u
+  ne as u
 };

package/dist/Input.es.js

@@ -1,4 +1,4 @@
-import { I as f } from "./Input-60IT1aGF.js";
+import { I as f } from "./Input-CsNlU1Hu.js";
 export {
   f as default
 };

package/dist/InputFormik.es.js

@@ -1,8 +1,8 @@
 import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import { c as s } from "./cn-B6yFEsav.js";
+import { c as u } from "./cn-B6yFEsav.js";
 import { FastField as q, ErrorMessage as G } from "formik";
-import { memo as H, useState as I, useRef as J, useCallback as y, useLayoutEffect as Q } from "react";
-import { Icons as N } from "./Icons.es.js";
+import { memo as H, useState as S, useRef as J, useCallback as y, useLayoutEffect as Q } from "react";
+import { I as N } from "./Icons-ChYkaR8R.js";
 const W = ({
   icon: t,
   iconPosition: r = "left",
@@ -14,30 +14,30 @@ const W = ({
   labelVariant: n = "default",
   placeholder: p,
   disabled: b = !1,
-  field: l,
+  field: a,
   innerRef: $,
   form: z,
-  ...a
+  ...l
 }) => {
-  const [o, v] = I(!1), [C, K] = I(!1), i = J(null), F = z.getFieldMeta(l.name), k = F.touched && F.error, E = l.value && l.value.toString().length > 0, x = j === "password", M = x ? C ? "text" : "password" : j, P = () => n === "static" ? p || d : p || "", A = () => x ? t ? r === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : t ? r === "left" ? "pl-10" : "pr-10" : "", D = y(() => {
-    v(!0), a.onFocus?.();
-  }, [a]), T = y(
+  const [o, v] = S(!1), [C, K] = S(!1), i = J(null), F = z.getFieldMeta(a.name), k = F.touched && F.error, E = a.value && a.value.toString().length > 0, x = j === "password", M = x ? C ? "text" : "password" : j, P = () => n === "static" ? p || d : p || "", A = () => x ? t ? r === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : t ? r === "left" ? "pl-10" : "pr-10" : "", D = y(() => {
+    v(!0), l.onFocus?.();
+  }, [l]), T = y(
     (c) => {
-      v(!1), a.onBlur?.(), l.onBlur(c);
+      v(!1), l.onBlur?.(), a.onBlur(c);
     },
-    [l, a]
+    [a, l]
   ), U = y(() => {
     K((c) => !c);
   }, []);
   Q(() => {
     if (i.current) {
       const L = ((O) => {
-        let u = O;
-        for (; u && u !== document.body; ) {
-          const f = window.getComputedStyle(u).backgroundColor;
+        let s = O;
+        for (; s && s !== document.body; ) {
+          const f = window.getComputedStyle(s).backgroundColor;
           if (f && f !== "transparent" && f !== "rgba(0, 0, 0, 0)")
             return f;
-          u = u.parentElement;
+          s = s.parentElement;
         }
         const m = window.getComputedStyle(document.body).backgroundColor;
         return m && m !== "transparent" && m !== "rgba(0, 0, 0, 0)" ? m : "rgb(255, 255, 255)";
@@ -88,7 +88,7 @@ const W = ({
     right: {
       label: "left-2"
     }
-  }, S = {
+  }, I = {
     static: {
       input: "placeholder:text-neutral-medium-default placeholder:opacity-50",
       label: "-top-1 -translate-y-full scale-90 px-0 "
@@ -101,7 +101,7 @@ const W = ({
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
-      className: s(
+      className: u(
         "relative w-full bg-inherit",
         n === "static" && "mt-5",
         R
@@ -112,21 +112,21 @@ const W = ({
             "input",
             {
               disabled: b,
-              id: w || l.name,
+              id: w || a.name,
               type: M,
-              name: l.name,
-              value: l.value || "",
+              name: a.name,
+              value: a.value || "",
               placeholder: P(),
-              onChange: l.onChange,
+              onChange: a.onChange,
               onFocus: D,
-              onEmptied: a.onEmptied,
-              onKeyDown: a.onKeyDown,
-              onKeyUp: a.onKeyUp,
+              onEmptied: l.onEmptied,
+              onKeyDown: l.onKeyDown,
+              onKeyUp: l.onKeyUp,
               onBlur: T,
-              className: s(
+              className: u(
                 "w-full px-3 h-12 text-left border-[1px] rounded-lg transition-all duration-200 ease-in-out text-neutral-default-default",
                 "bg-transparent focus:outline-none",
-                S[n].input,
+                I[n].input,
                 g[h].input,
                 A(),
                 B
@@ -138,12 +138,12 @@ const W = ({
             "label",
             {
               ref: i,
-              htmlFor: w || a.name,
-              className: s(
+              htmlFor: w || l.name,
+              className: u(
                 "absolute transition-all duration-200 font-bold text-sm ease-in-out pointer-events-none bg-inherit px-1 z-10",
                 "prometeo-fonts-label-large text-sm",
                 V[t ? r : "none"].label,
-                S[n].label,
+                I[n].label,
                 g[h].label
               ),
               children: d
@@ -152,7 +152,7 @@ const W = ({
           t && /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: s(
+              className: u(
                 "absolute top-1/2 -translate-y-1/2 text-neutral-medium-default",
                 g[h].icon,
                 r === "left" ? "left-3" : "right-3"
@@ -165,7 +165,7 @@ const W = ({
             {
               type: "button",
               onClick: U,
-              className: s(
+              className: u(
                 "absolute top-1/2 -translate-y-1/2 p-1 text-neutral-medium-default hover:text-neutral-strong-default",
                 "transition-colors duration-200 focus:outline-none focus:text-primary-default-default",
                 t && r === "right" ? "right-8" : "right-3"
@@ -191,7 +191,7 @@ const W = ({
         k && /* @__PURE__ */ e.jsx(
           G,
           {
-            name: l.name,
+            name: a.name,
             component: "span",
             className: "block text-error-default-default text-xs mt-1"
           }
@@ -199,7 +199,7 @@ const W = ({
       ]
     }
   );
-}, X = H(W), ae = (t) => /* @__PURE__ */ e.jsx(q, { name: t.name, children: ({ field: r, form: d }) => /* @__PURE__ */ e.jsx(
+}, X = H(W), le = (t) => /* @__PURE__ */ e.jsx(q, { name: t.name, children: ({ field: r, form: d }) => /* @__PURE__ */ e.jsx(
   X,
   {
     ...t,
@@ -209,5 +209,5 @@ const W = ({
   }
 ) });
 export {
-  ae as default
+  le as default
 };

package/dist/InputFormikV2.es.js

@@ -1,7 +1,7 @@
 import { j as i } from "./jsx-runtime-DKDX3adD.js";
 import { FastField as m, getIn as n } from "formik";
 import { memo as s } from "react";
-import { I as d } from "./Input-60IT1aGF.js";
+import { I as d } from "./Input-CsNlU1Hu.js";
 const f = ({
   field: a,
   form: r,

package/dist/InputMultiple.es.js

@@ -1,5 +1,5 @@
 import { j as r } from "./jsx-runtime-DKDX3adD.js";
-import { Icons as C } from "./Icons.es.js";
+import { I as C } from "./Icons-ChYkaR8R.js";
 import { c as d } from "./cn-B6yFEsav.js";
 import S, { useRef as M, useState as x, useCallback as T, useEffect as ee } from "react";
 const te = ({ label: D, name: K, onChange: f, value: l, icon: V, valueSeparator: w = ",", variant: y = "default", placeholder: U, itemClassName: $, itemIcon: F, helperText: j, errorText: N, disabled: a, onClick: z, className: B, readonly: h, onValueDelete: O, ...q }) => {

package/dist/Logo.es.js

@@ -1,5 +1,5 @@
 import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import { Icons as t } from "./Icons.es.js";
+import { I as t } from "./Icons-ChYkaR8R.js";
 const s = () => /* @__PURE__ */ e.jsxs("div", { className: "container-logo flex items-center justify-center gap-1 bg-gradient-to-br from-[#312C85] to-[#1E1A4D] rounded-md min-w-[185px]", children: [
   /* @__PURE__ */ e.jsx(t.TicketFilled, { size: 28, className: "rotate-140 text-primary-medium-pressed icon-logo" }),
   /* @__PURE__ */ e.jsx("span", { className: "font-bold text-[28px] text-primary-medium-pressed font-monserra -tracking-wide text-logo", children: "TICKETS" })