prometeo-design-system 2.7.8 → 2.8.1

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

@@ -1,11 +1,11 @@
 import { j as t } from "./jsx-runtime-DKDX3adD.js";
-import Q, { memo as M, forwardRef as A, useRef as v, useEffect as ee, useCallback as i, useState as R, useImperativeHandle as te } from "react";
+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 ne } from "./useDragScroll-CHN9OMwn.js";
+import { u as re } from "./useDragScroll-CHN9OMwn.js";
 import S from "./Button.es.js";
-import { Close as re, CrevronLeft as se, CrevronRight as ae } from "./Icons.es.js";
-const L = M(A(({ images: n, className: c }, r) => {
-  const { ref: d, bind: a } = ne({
+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",
     friction: 0.9,
     minVelocity: 0.5,
@@ -27,7 +27,7 @@ const L = M(A(({ images: n, className: c }, r) => {
       onPointerCancel: a.onPointerCancel,
       onClickCapture: a.onClickCapture,
       "aria-label": "Image gallery",
-      children: n && n.length > 0 && n.map((l, o) => Q.cloneElement(l, {
+      children: n && n.length > 0 && n.map((l, o) => ee.cloneElement(l, {
         key: l.props.src || o,
         ...l.props,
         galleryRef: r,
@@ -36,8 +36,8 @@ const L = M(A(({ images: n, className: c }, r) => {
     }
   );
 }));
-L.displayName = "GalleryPreview";
-const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails: d, thumbnailsClassName: a, currentIndex: l, goToNext: o, goToPrevious: s, goToIndex: N }) => {
+O.displayName = "GalleryPreview";
+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,
@@ -49,23 +49,23 @@ const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
     distanceX: 0,
     distanceY: 0
   });
-  ee(() => {
+  te(() => {
     w.current && w.current.focus();
   }, []);
   const k = i((e) => {
     e.preventDefault(), e.stopPropagation(), e.key === "Escape" ? r() : e.key === "ArrowLeft" ? s() : e.key === "ArrowRight" && o();
-  }, [r, s, o]), P = i((e) => {
+  }, [r, s, o]), I = i((e) => {
     u.current = { startX: e.touches[0].clientX, startY: e.touches[0].clientY, isDragging: !0, distanceX: 0, distanceY: 0 };
   }, []), j = i((e) => {
     const g = e.touches[0];
     u.current = { ...u.current, isDragging: !0, distanceX: g.clientX - u.current.startX, distanceY: g.clientY - u.current.startY };
-  }, []), z = i(() => {
+  }, []), P = i(() => {
     u.current = { ...u.current, startX: 0, startY: 0, isDragging: !1 }, Math.abs(u.current.distanceX) > Math.abs(u.current.distanceY) && (u.current.distanceX < 0 ? o() : s());
   }, [o, s]), C = i(() => {
     const e = h.current;
     if (!e) return;
-    const { scale: g, translateX: p, translateY: I } = m.current;
-    e.style.transform = `scale(${g}) translate(${p}px, ${I}px)`, e.style.transformOrigin = "center center", e.style.transition = "transform 0.1s ease-out";
+    const { scale: g, translateX: p, translateY: z } = m.current;
+    e.style.transform = `scale(${g}) translate(${p}px, ${z}px)`, e.style.transformOrigin = "center center", e.style.transition = "transform 0.1s ease-out";
   }, []), b = i(() => {
     m.current = { scale: 1, translateX: 0, translateY: 0 }, h.current && (h.current.style.transform = "scale(1) translate(0px, 0px)", h.current.style.transformOrigin = "center center");
   }, []), f = i((e) => {
@@ -75,17 +75,17 @@ const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
       e.deltaY < 0 ? o() : e.deltaY > 0 && s();
       return;
     }
-    const I = 2e-3, D = 1, B = 8, F = -e.deltaY * I, E = m.current.scale;
-    let x = E + F;
-    if (x = Math.max(D, Math.min(B, x)), x === D) {
+    const z = 2e-3, E = 1, F = 8, G = -e.deltaY * z, T = m.current.scale;
+    let x = T + G;
+    if (x = Math.max(E, Math.min(F, x)), x === E) {
       b();
       return;
     }
-    const Y = p.getBoundingClientRect(), G = e.clientX - Y.left, W = e.clientY - Y.top, H = Y.width / 2, K = Y.height / 2, $ = G - H, q = W - K, T = x / E, U = m.current.translateX, V = m.current.translateY, Z = U - $ * (T - 1) / x, J = V - q * (T - 1) / x;
+    const Y = p.getBoundingClientRect(), W = e.clientX - Y.left, H = e.clientY - Y.top, K = Y.width / 2, $ = Y.height / 2, q = W - K, U = H - $, A = x / T, V = m.current.translateX, Z = m.current.translateY, J = V - q * (A - 1) / x, Q = Z - U * (A - 1) / x;
     m.current = {
       scale: x,
-      translateX: Z,
-      translateY: J
+      translateX: J,
+      translateY: Q
     }, C();
   }, [o, s, C, b]);
   return n.length === 0 ? null : /* @__PURE__ */ t.jsxs(
@@ -95,9 +95,9 @@ const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
       className: X("fixed inset-0 z-50 bg-black/90 flex items-center justify-center lg:px-16", c),
       onClick: r,
       onKeyDown: k,
-      onTouchStart: P,
+      onTouchStart: I,
       onTouchMove: j,
-      onTouchEnd: z,
+      onTouchEnd: P,
       tabIndex: 0,
       role: "dialog",
       "aria-modal": "true",
@@ -109,9 +109,9 @@ const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
             color: "secondary",
             size: "small",
             onClick: r,
-            className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
+            className: "!text-white hover:!text-gray-300 !w-auto !h-auto !p-2",
             "aria-label": "Close gallery",
-            children: /* @__PURE__ */ t.jsx(re, { size: 24 })
+            children: /* @__PURE__ */ t.jsx(M.Close, { size: 24 })
           }
         ) }),
         n.length > 1 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
@@ -131,9 +131,9 @@ const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
                   onClick: (e) => {
                     e.stopPropagation(), s();
                   },
-                  className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
+                  className: "!text-white hover:!text-gray-300 !w-auto !h-auto !p-2",
                   "aria-label": "Previous image",
-                  children: /* @__PURE__ */ t.jsx(se, { size: 24 })
+                  children: /* @__PURE__ */ t.jsx(M.CrevronLeft, { size: 24 })
                 }
               )
             }
@@ -154,9 +154,9 @@ const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
                   onClick: (e) => {
                     e.stopPropagation(), o();
                   },
-                  className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
+                  className: "!text-white hover:!text-gray-300 !w-auto !h-auto !p-2",
                   "aria-label": "Next image",
-                  children: /* @__PURE__ */ t.jsx(ae, { size: 24 })
+                  children: /* @__PURE__ */ t.jsx(M.CrevronRight, { size: 24 })
                 }
               )
             }
@@ -194,7 +194,7 @@ const O = M(({ 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 O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
     }
   );
 });
-O.displayName = "LightBox";
-const le = (n, c) => {
+_.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;
-}, _ = M(({ 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",
@@ -250,9 +250,9 @@ const le = (n, c) => {
       ))
     ]
   }
-), le);
-_.displayName = "Thumbnails";
-const oe = A(
+), se);
+B.displayName = "Thumbnails";
+const ae = L(
   (n, c) => {
     const {
       children: r,
@@ -262,15 +262,15 @@ const oe = A(
       thumbnailsClassName: o
     } = n, [s, N] = R([]), [h, y] = R(!1), [w, m] = R(0), u = r ? Array.isArray(r) ? r : [r] : [], k = i((f) => {
       N((e) => e.some((p) => p.src === f.src) ? e : [...e, f]);
-    }, []), P = i((f = 0) => {
+    }, []), I = i((f = 0) => {
       m(f), y(!0);
     }, []), j = i(() => {
       y(!1);
     }, []);
-    te(
+    ne(
       c,
       () => ({
-        openLightbox: P,
+        openLightbox: I,
         closeLightbox: j,
         isOpen: h,
         addImage: k,
@@ -278,7 +278,7 @@ const oe = A(
       }),
       [s]
     );
-    const z = i(() => {
+    const P = i(() => {
       m((f) => (f + 1) % s.length);
     }, [s.length]), C = i(() => {
       m((f) => (f - 1 + s.length) % s.length);
@@ -287,7 +287,7 @@ const oe = A(
     }, []);
     return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       /* @__PURE__ */ t.jsx(
-        L,
+        O,
         {
           images: u,
           className: d,
@@ -295,7 +295,7 @@ const oe = A(
         }
       ),
       h && /* @__PURE__ */ t.jsx(
-        O,
+        _,
         {
           images: s,
           closeLightbox: j,
@@ -303,7 +303,7 @@ const oe = A(
           lightboxClassName: a,
           thumbnailsClassName: o,
           currentIndex: w,
-          goToNext: z,
+          goToNext: P,
           goToPrevious: C,
           goToIndex: b
         }
@@ -311,7 +311,7 @@ const oe = A(
     ] });
   }
 );
-oe.displayName = "ImageGallery";
+ae.displayName = "ImageGallery";
 export {
-  oe as I
+  ae as I
 };

package/dist/ImageGallery.es.js

@@ -1,4 +1,4 @@
-import { I as p } from "./ImageGallery-WKzUevOQ.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-D6as6xD-.js → Input-CsNlU1Hu.js}

@@ -1,11 +1,10 @@
 import { j as r } from "./jsx-runtime-DKDX3adD.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 _, useLayoutEffect as q, memo as V, forwardRef as F, useState as ee } from "react";
-import te from "./Spinner.es.js";
-import { H as re } from "./HelperComponent-BeNlTMqI.js";
-import oe from "./Button.es.js";
-import { EyeVisibility as le, EyeVisibilityOff as se, Close as ae } from "./Icons.es.js";
-const ne = (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 ne = (o) => {
   const l = window.getComputedStyle(document.body).backgroundColor;
   return l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)" ? l : "rgb(255, 255, 255)";
 };
-function ue() {
-  const o = _(null);
-  return q(() => {
+function ne() {
+  const o = F(null);
+  return ee(() => {
     if (!o.current || !o.current.parentElement) return;
-    const e = ne(o.current.parentElement);
+    const e = ae(o.current.parentElement);
     o.current.style.backgroundColor = e;
   }, []), {
     ref: o
@@ -60,40 +59,40 @@ const b = {
     label: t("text-success", "peer-focus:text-success-light"),
     icon: t("text-success-light", "peer-focus:text-success-light")
   }
-}, S = F(
+}, S = re(
   ({
     label: o,
     icon: e,
     iconPosition: l = "left",
-    onChange: z,
+    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: I,
-    required: C = !1,
-    onFocus: $,
-    onBlur: k,
-    onKeyDown: B,
-    onKeyUp: L,
-    className: R,
+    placeholder: $,
+    required: N = !1,
+    onFocus: k,
+    onBlur: I,
+    onKeyDown: L,
+    onKeyUp: R,
+    className: B,
     style: P,
     readOnly: D = !1,
-    onClear: N,
-    ...v
+    onClear: z,
+    ...E
   }, A) => {
-    const [y, M] = ee(!1), { ref: O } = ue();
-    let p = H;
-    u && (p = "customHeight");
-    const d = {
+    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",
@@ -125,18 +124,18 @@ const b = {
     }, T = () => {
       M(!y);
     }, j = {};
-    m && m !== "100%" && (j.width = m), u && (j.height = u);
-    const E = c === "error" && h, G = !E && w, J = s === "password", K = () => 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`, Q = () => u ? d.customHeight.label : d[p].label, U = () => u ? { height: u } : {}, W = () => a === "default" ? o : I || 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", 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",
-          R
+          B
         ),
         style: { ...P, ...j },
         children: [
@@ -155,23 +154,23 @@ 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,
                 X()
               ),
               style: U(),
-              onChange: z,
-              onFocus: $,
-              onBlur: k,
-              disabled: x,
-              required: C,
-              onKeyDown: B,
-              onKeyUp: L,
-              defaultValue: v.defaultValue,
+              onChange: C,
+              onFocus: k,
+              onBlur: I,
+              disabled: f,
+              required: N,
+              onKeyDown: L,
+              onKeyUp: R,
+              defaultValue: E.defaultValue,
               readOnly: D,
-              ...v
+              ...E
             }
           ),
           /* @__PURE__ */ r.jsx(
@@ -185,56 +184,50 @@ const b = {
                 Q(),
                 b[c].label,
                 K(),
-                C && "after:content-['*'] after:text-error-default after:ml-1",
-                x && "text-neutral-medium-disabled prometeo-fonts-label-large"
+                N && "after:content-['*'] after:text-error-default after:ml-1",
+                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 ? T : void 0,
-              onMouseDown: (Z) => s === "password" && !f && Z.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(te, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }),
-                s === "password" && (y ? /* @__PURE__ */ r.jsx(le, { size: 24, className: "" }) : /* @__PURE__ */ r.jsx(se, { 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
               ] })
             }
           ),
-          N && /* @__PURE__ */ r.jsx(
-            oe,
+          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: N,
-              variant: "text",
-              animateIcon: !1,
-              icon: /* @__PURE__ */ r.jsx(ae, { 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: (E || G) && /* @__PURE__ */ r.jsx(
-            re,
+          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 be = V(S);
+const me = te(S);
 export {
-  be as I,
-  ue as u
+  me as I,
+  ne as u
 };

package/dist/Input.es.js

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