prometeo-design-system 2.7.1 → 2.7.3

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

@@ -2,7 +2,7 @@ import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import ee, { memo as D, forwardRef as L, useRef as v, useEffect as te, useCallback as i, useState as R, useImperativeHandle as ne } from "react";
 import { c as X } from "./cn-B6yFEsav.js";
 import { u as re } from "./useDragScroll-CHN9OMwn.js";
-import { B as S } from "./Button-CvBWH1HX.js";
+import S from "./Button.es.js";
 import { Icons as M } from "./Icons.es.js";
 const O = D(L(({ images: n, className: c }, r) => {
   const { ref: d, bind: a } = re({
@@ -37,7 +37,7 @@ const O = D(L(({ images: n, className: c }, r) => {
   );
 }));
 O.displayName = "GalleryPreview";
-const B = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails: d, thumbnailsClassName: a, currentIndex: l, goToNext: o, goToPrevious: s, goToIndex: N }) => {
+const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails: d, thumbnailsClassName: a, currentIndex: l, goToNext: o, goToPrevious: s, goToIndex: N }) => {
   const h = v(null), y = v(null), w = v(null), m = v({
     scale: 1,
     translateX: 0,
@@ -194,7 +194,7 @@ const B = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
             )
           }
         ),
-        d && /* @__PURE__ */ t.jsx("div", { className: " w-full absolute items-center flex justify-center left-0 right-0 z-[100] bottom-0", children: /* @__PURE__ */ t.jsx(_, { images: n, currentIndex: l, goToIndex: N, thumbnailsClassName: a }) }),
+        d && /* @__PURE__ */ t.jsx("div", { className: " w-full absolute items-center flex justify-center left-0 right-0 z-[100] bottom-0", children: /* @__PURE__ */ t.jsx(B, { images: n, currentIndex: l, goToIndex: N, thumbnailsClassName: a }) }),
         n.length > 1 && /* @__PURE__ */ t.jsxs("div", { className: "absolute bottom-20 left-1/2 transform -translate-x-1/2 text-neutral-default-default prometeo-fonts-label-xlarge px-4 py-2 rounded-full", children: [
           l + 1,
           " / ",
@@ -204,13 +204,13 @@ const B = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
     }
   );
 });
-B.displayName = "LightBox";
+_.displayName = "LightBox";
 const se = (n, c) => {
   if (n.currentIndex !== c.currentIndex || n.thumbnailsClassName !== c.thumbnailsClassName || n.images.length !== c.images.length) return !1;
   for (let r = 0; r < n.images.length; r++)
     if (n.images[r].src !== c.images[r].src) return !1;
   return !0;
-}, _ = D(({ images: n, currentIndex: c, goToIndex: r, thumbnailsClassName: d }) => /* @__PURE__ */ t.jsxs(
+}, B = D(({ images: n, currentIndex: c, goToIndex: r, thumbnailsClassName: d }) => /* @__PURE__ */ t.jsxs(
   "div",
   {
     className: "flex gap-4 w-max overflow-x-auto overflow-y-visible max-w-full px-16 py-4",
@@ -251,7 +251,7 @@ const se = (n, c) => {
     ]
   }
 ), se);
-_.displayName = "Thumbnails";
+B.displayName = "Thumbnails";
 const ae = L(
   (n, c) => {
     const {
@@ -295,7 +295,7 @@ const ae = L(
         }
       ),
       h && /* @__PURE__ */ t.jsx(
-        B,
+        _,
         {
           images: s,
           closeLightbox: j,

package/dist/ImageGallery.es.js

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

package/dist/{Input-C22kKz7U.js → Input-CnXDg2s7.js}

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

package/dist/Input.es.js

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

package/dist/InputFormikV2.es.js

@@ -1,29 +1,41 @@
-import { j as o } from "./jsx-runtime-DKDX3adD.js";
-import { FastField as u } from "formik";
+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 i } from "./Input-C22kKz7U.js";
-const c = ({
-  field: r,
-  form: t,
+import { I as d } from "./Input-CnXDg2s7.js";
+const f = ({
+  field: a,
+  form: r,
   ...e
 }) => {
-  const n = t.getFieldMeta(r.name), a = n.touched && n.error;
-  return /* @__PURE__ */ o.jsx(
-    i,
+  const t = r.getFieldMeta(a.name), o = t.touched && t.error;
+  return /* @__PURE__ */ i.jsx(
+    d,
     {
       ...e,
-      ...r,
-      value: r.value,
-      onChange: (m) => {
-        r.onChange({ target: { value: m, name: r.name } });
+      ...a,
+      value: a.value,
+      onChange: (u) => {
+        a.onChange({ target: { value: u.target.value, name: a.name } });
       },
-      variant: a ? "error" : "default",
-      errorComponent: n.error,
+      variant: o ? "error" : "default",
+      errorComponent: t.error,
       type: e.type,
-      ref: e.innerRef
+      ref: e.innerRef,
+      disabled: e.disabled
     }
   );
-}, p = s(c), j = (r) => /* @__PURE__ */ o.jsx(u, { name: r.name, children: ({ field: t, form: e }) => /* @__PURE__ */ o.jsx(p, { ...r, field: t, form: e }) });
+}, l = s(f), h = (a) => /* @__PURE__ */ i.jsx(
+  m,
+  {
+    name: a.name,
+    disabled: a.disabled,
+    shouldUpdate: (r, e) => {
+      const t = r.name;
+      return r.disabled !== e.disabled || t !== e.name || n(r.formik.values, t) !== n(e.formik.values, t) || n(r.formik.errors, t) !== n(e.formik.errors, t) || n(r.formik.touched, t) !== n(e.formik.touched, t) || r.formik.isSubmitting !== e.formik.isSubmitting || Object.keys(r).length !== Object.keys(e).length;
+    },
+    children: ({ field: r, form: e }) => /* @__PURE__ */ i.jsx(l, { ...a, field: r, form: e, disabled: a.disabled })
+  }
+);
 export {
-  j as default
+  h as default
 };