prometeo-design-system 1.8.3 → 1.8.4

package/dist/Avatar.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { c as p } from "./cn-B6yFEsav.js";
 import { motion as f } from "framer-motion";
 import { useState as u } from "react";

package/dist/Button.es.js

@@ -1,4 +1,4 @@
-import { j as o } from "./jsx-runtime-DKDX3adD.js";
+import { j as o } from "./jsx-runtime-ByW6EXIE.js";
 import { c as x } from "./cn-B6yFEsav.js";
 import { c as N } from "./index-BOQuZ0gG.js";
 import { useAnimationControls as k, motion as y } from "framer-motion";

package/dist/{CardProfile-Bg_q2qMm.js → CardProfile-BZajBGbO.js}

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as l } from "./cn-B6yFEsav.js";
 import { motion as i, AnimatePresence as u } from "framer-motion";
 import m from "./Avatar.es.js";

package/dist/CardProfile.es.js

@@ -1,4 +1,4 @@
-import { C as a } from "./CardProfile-Bg_q2qMm.js";
+import { C as a } from "./CardProfile-BZajBGbO.js";
 export {
   a as CardProfile
 };

package/dist/CheckBox.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as l } from "./Icons.es.js";
 import { useId as o, useRef as d } from "react";
 const k = ({ className: s, disabled: e, ...a }) => {

package/dist/CheckboxFormik.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as x } from "./Icons.es.js";
 import { c as r } from "./cn-B6yFEsav.js";
 import { useField as h, ErrorMessage as p } from "formik";

package/dist/DialogModal.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { forwardRef as u, useState as p, useImperativeHandle as f, useRef as g } from "react";
 import { c as i } from "./cn-B6yFEsav.js";
 const x = u(({

package/dist/DrawerDesktop.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as j } from "./Icons.es.js";
 import { c as m } from "./cn-B6yFEsav.js";
 import { c as d } from "./index-BOQuZ0gG.js";

package/dist/DrawerMobile.es.js

@@ -1,4 +1,4 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
+import { j as r } from "./jsx-runtime-ByW6EXIE.js";
 import { forwardRef as O, useState as g, useRef as x, useCallback as t, useImperativeHandle as D } from "react";
 import { Drawer as n } from "vaul";
 import { c as R } from "./cn-B6yFEsav.js";

package/dist/DropZone.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as i } from "./cn-B6yFEsav.js";
 import w, { useCallback as z } from "react";
 import { useDropzone as R } from "react-dropzone";

package/dist/Header.es.js

@@ -1,8 +1,8 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as x } from "./cn-B6yFEsav.js";
 import { motion as i } from "framer-motion";
 import { memo as m } from "react";
-const n = ({ title: t, subtitle: s, children: l, className: a }) => /* @__PURE__ */ e.jsx("header", { className: x("h-16 flex items-center px-4 sm:h-20 md:h-24 md:px-6 lg:h-28 xl:h-32 2xl:h-36", a), children: /* @__PURE__ */ e.jsxs(
+const n = ({ title: t, subtitle: l, children: s, className: a }) => /* @__PURE__ */ e.jsx("header", { className: x("h-16 flex items-center px-4 sm:h-20 md:h-24 md:px-6 lg:h-28 xl:h-32 2xl:h-36", a), children: /* @__PURE__ */ e.jsxs(
   i.div,
   {
     initial: { opacity: 0, y: -10 },
@@ -11,10 +11,10 @@ const n = ({ title: t, subtitle: s, children: l, className: a }) => /* @__PURE__
     className: "flex justify-between items-center w-full ",
     children: [
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col leading-6", children: [
-        /* @__PURE__ */ e.jsx("h3", { className: "text-xs font-semibold text-neutral-medium-default leading-1 sm:leading-2", children: s }),
+        /* @__PURE__ */ e.jsx("h3", { className: "text-xs font-semibold text-neutral-medium-default leading-1 sm:leading-2 prometeo-fonts-headline-large", children: l }),
         /* @__PURE__ */ e.jsx("h1", { className: "text-xl font-bold text-neutral-strong-default sm:text-2xl md:text-3xl xl:text-[32px] 2xl:text-[34px]", children: t })
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: "flex gap-4", children: l })
+      /* @__PURE__ */ e.jsx("div", { className: "flex gap-4", children: s })
     ]
   }
 ) }), f = m(n);

package/dist/Icons.es.js

@@ -1,4 +1,4 @@
-import { j as q } from "./jsx-runtime-DKDX3adD.js";
+import { j as q } from "./jsx-runtime-ByW6EXIE.js";
 const l = ({
   size: t,
   className: h,

package/dist/Input.es.js

@@ -1,10 +1,10 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
-import { Icons as z } from "./Icons.es.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { Icons as O } from "./Icons.es.js";
 import { c as e } from "./cn-B6yFEsav.js";
-import { memo as oe, useState as L, useRef as ae, useCallback as ne, useEffect as B, useLayoutEffect as ue } from "react";
-import { useDebounce as ce } from "use-debounce";
-import fe from "./Spinner.es.js";
-const h = {
+import { memo as ue, useState as N, useRef as ce, useCallback as fe, useEffect as $, useLayoutEffect as ie } from "react";
+import { useDebounce as de } from "use-debounce";
+import pe from "./Spinner.es.js";
+const j = {
   default: {
     container: "",
     input: e(
@@ -53,161 +53,176 @@ const h = {
       "peer-focus:text-success-light"
     )
   }
-}, x = {
-  small: {
-    container: "text-sm",
-    input: "h-10 px-3 text-sm",
-    label: "text-xs peer-focus:text-xs peer-placeholder-shown:text-sm",
-    icon: "w-4 h-4 right-3"
-  },
-  medium: {
-    container: "text-base",
-    input: "h-12 px-3 text-base",
-    label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-base",
-    icon: "w-5 h-5 right-3"
-  },
-  large: {
-    container: "text-lg",
-    input: "h-14 px-3 text-lg",
-    label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-lg",
-    icon: "w-6 h-6 right-3"
-  }
-}, ie = ({
-  label: w,
-  icon: n,
+}, xe = ({
+  label: C,
+  icon: a,
   iconPosition: m = "left",
-  onChange: y,
-  value: c = "",
-  debounceMs: f = 0,
-  name: j,
+  onChange: S,
+  value: n = "",
+  debounceMs: u = 0,
+  name: E,
   width: g = "100%",
-  height: t,
-  variant: i = "default",
+  height: s,
+  variant: c = "default",
   labelVariant: o = "default",
-  size: d = "medium",
-  disabled: v = !1,
-  type: s = "text",
-  isFetching: p,
-  errorComponent: N,
-  helperComponent: S,
-  placeholder: F,
-  required: k = !1,
-  onFocus: H,
-  onBlur: O,
-  onEmptied: P,
-  onKeyDown: T,
-  onKeyUp: W
+  size: T = "medium",
+  disabled: k = !1,
+  type: r = "text",
+  isFetching: f,
+  errorComponent: H,
+  helperComponent: L,
+  placeholder: G,
+  required: P = !1,
+  onFocus: J,
+  onBlur: K,
+  onEmptied: D,
+  onKeyDown: Q,
+  onKeyUp: U
 }) => {
-  const [b, D] = L(c), [C] = ce(b, f), [A, R] = L(!1), [E, G] = L(!1), a = ae(null), V = ne(y, [y]);
-  B(() => {
-    f > 0 && C !== c && V(C);
-  }, [C, f, V, c]), B(() => {
-    D(c);
-  }, [c]);
-  const J = () => {
-    R(!0), H?.();
-  }, K = () => {
-    R(!1), O?.();
-  }, Q = (l) => {
-    const u = l.target.value, se = l.target.name, le = b;
-    D(u), le.length > 0 && u.length === 0 && P?.(), (!f || f === 0) && y(u, se);
-  }, U = () => {
-    G(!E);
+  const [h, R] = N(n), [v] = de(h, u), [W, V] = N(!1), [z, X] = N(!1), b = ce(null);
+  let i = T;
+  s && (i = "customHeight");
+  const d = {
+    small: {
+      container: "text-sm",
+      input: "h-10 px-3 text-sm",
+      label: "text-xs peer-focus:text-xs peer-placeholder-shown:text-sm",
+      icon: "w-4 h-4 right-3"
+    },
+    medium: {
+      container: "text-base",
+      input: "h-12 px-3 text-base",
+      label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-base",
+      icon: "w-5 h-5 right-3"
+    },
+    large: {
+      container: "text-lg",
+      input: "h-14 px-3 text-lg",
+      label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-lg",
+      icon: "w-6 h-6 right-3"
+    },
+    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"
+    }
+  }, A = fe(S, [S]);
+  $(() => {
+    u > 0 && v !== n && A(v);
+  }, [v, u, A, n]), $(() => {
+    R(n);
+  }, [n]);
+  const Y = () => {
+    V(!0), J?.();
+  }, Z = () => {
+    V(!1), K?.();
+  }, _ = (p) => {
+    const x = p.target.value, B = p.target.name, l = h;
+    R(x), l.length > 0 && x.length === 0 && D?.(), (!u || u === 0) && S(x, B);
+  }, q = () => {
+    X(!z);
   }, I = {};
-  g && g !== "100%" && (I.width = g), t && (I.height = t);
-  const X = b.length > 0, $ = i === "error" && N, Y = !$ && S, Z = s === "password", _ = () => o === "static" || A || X ? "-top-2 left-2 scale-90" : t ? "top-1/2 -translate-y-1/2 scale-100" : n ? `top-1/2 -translate-y-1/2 ${m === "left" ? "ml-6" : "mr-6"} scale-100 ` : "top-1/2 -translate-y-1/2 scale-100", q = () => o === "static" ? t ? "text-sm" : "text-xs" : t ? "text-sm" : x[d].label, M = () => t ? { height: t } : {}, ee = () => o === "default" ? w : F || w || "", te = () => Z ? n ? m === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : n ? m === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", re = o === "default" && "transition-all duration-200 ease-in-out";
-  return ue(() => {
-    if (a.current && a.current.parentElement) {
-      const l = window.getComputedStyle(a.current.parentElement);
-      console.log(l.backgroundColor, "bg color parent");
-      const u = l.backgroundColor;
-      u === "transparent" || u === "rgba(0, 0, 0, 0)" ? (a.current.classList.remove("bg-inherit"), a.current.style.backgroundColor = "var(--neutral-900)") : a.current.classList.add("bg-inherit");
+  g && g !== "100%" && (I.width = g), s && (I.height = s);
+  const M = h.length > 0, F = c === "error" && H, ee = !F && L, te = r === "password", re = () => o === "static" || W || M ? "-top-2 left-2 scale-90" : a ? `top-1/2 -translate-y-1/2 ${m === "left" ? "ml-6" : "mr-6"} scale-100 ` : "top-1/2 -translate-y-1/2 scale-100", se = () => o === "static" ? s ? "text-sm" : "text-xs" : s ? d.customHeight.label : d[i].label, oe = () => s ? { height: s } : {}, le = () => o === "default" ? C : G || C || "", ae = () => te ? a ? m === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : a ? m === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", ne = o === "default" && "transition-all duration-200 ease-in-out";
+  return ie(() => {
+    if (b.current) {
+      const x = ((B) => {
+        let l = B;
+        for (; l && l !== document.body; ) {
+          const y = window.getComputedStyle(l).backgroundColor;
+          if (y && y !== "transparent" && y !== "rgba(0, 0, 0, 0)")
+            return y;
+          l = l.parentElement;
+        }
+        const w = window.getComputedStyle(document.body).backgroundColor;
+        return w && w !== "transparent" && w !== "rgba(0, 0, 0, 0)" ? w : "rgb(255, 255, 255)";
+      })(b.current.parentElement);
+      b.current.style.backgroundColor = x;
     }
-  }, []), /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    /* @__PURE__ */ r.jsxs(
+  }, []), /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: e(
           "relative",
-          x[d].container,
+          d[i].container,
           !g && "w-full",
           "bg-inherit",
           o === "static" && "mt-2"
         ),
         style: I,
         children: [
-          /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ t.jsx(
             "input",
             {
-              id: j,
-              name: j,
-              type: s === "password" && E ? "text" : s,
-              value: b,
-              placeholder: ee(),
+              id: E,
+              name: E,
+              type: r === "password" && z ? "text" : r,
+              value: h,
+              placeholder: le(),
               className: e(
                 "peer w-full border-1 rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
                 "focus:outline-none px-3",
                 o === "default" && "placeholder:text-transparent",
                 o === "static" && "placeholder:text-neutral-medium-default placeholder:opacity-50",
-                !t && x[d].input,
-                t && `px-3 ${x[d].input.split(" ").filter((l) => l.startsWith("text-")).join(" ")}`,
-                h[i].input,
-                n && "pr-10",
-                v && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
-                h[i].container,
-                te()
+                d[i].input,
+                j[c].input,
+                a && "pr-10",
+                k && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                j[c].container,
+                ae()
               ),
-              style: M(),
-              onChange: Q,
-              onFocus: J,
-              onBlur: K,
-              disabled: v,
-              required: k,
-              onEmptied: P,
-              onKeyDown: T,
-              onKeyUp: W
+              style: oe(),
+              onChange: _,
+              onFocus: Y,
+              onBlur: Z,
+              disabled: k,
+              required: P,
+              onEmptied: D,
+              onKeyDown: Q,
+              onKeyUp: U
             }
           ),
-          /* @__PURE__ */ r.jsx(
+          /* @__PURE__ */ t.jsx(
             "label",
             {
-              ref: a,
-              htmlFor: j,
+              ref: b,
+              htmlFor: E,
               className: e(
                 "absolute left-3 pointer-events-none px-1 z-10",
-                re,
-                q(),
-                h[i].label,
-                _(),
-                k && "after:content-['*'] after:text-error-default after:ml-1",
-                v && "text-neutral-medium-disabled prometeo-fonts-label-large"
+                ne,
+                se(),
+                j[c].label,
+                re(),
+                P && "after:content-['*'] after:text-error-default after:ml-1",
+                k && "text-neutral-medium-disabled prometeo-fonts-label-large"
               ),
-              children: w
+              children: C
             }
           ),
-          (n || s === "password" || p) && /* @__PURE__ */ r.jsx(
+          (a || r === "password" || f) && /* @__PURE__ */ t.jsx(
             "div",
             {
               className: e(
                 "absolute top-1/2 -translate-y-1/2 flex items-center justify-center z-10",
-                !t && x[d].icon,
-                t && "w-5 h-5 right-3",
-                h[i].icon,
-                s === "password" && !p ? "cursor-pointer" : "pointer-events-none",
+                d[i].icon,
+                j[c].icon,
+                r === "password" && !f ? "cursor-pointer" : "pointer-events-none",
                 m === "right" ? "right-3" : "left-3"
               ),
-              onClick: s === "password" && !p ? U : void 0,
-              onMouseDown: (l) => s === "password" && !p && l.preventDefault(),
-              children: /* @__PURE__ */ r.jsx("div", { children: p && s !== "password" ? /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(fe, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }) : s === "password" ? E ? /* @__PURE__ */ r.jsx(z.EyeVisibility, { size: 24, className: "" }) : /* @__PURE__ */ r.jsx(z.EyeVisibilityOff, { size: 24, className: "" }) : n })
+              onClick: r === "password" && !f ? q : void 0,
+              onMouseDown: (p) => r === "password" && !f && p.preventDefault(),
+              children: /* @__PURE__ */ t.jsx("div", { children: f && r !== "password" ? /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(pe, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }) : r === "password" ? z ? /* @__PURE__ */ t.jsx(O.EyeVisibility, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(O.EyeVisibilityOff, { size: 24, className: "" }) : a })
             }
           )
         ]
       }
     ),
-    Y && S,
-    $ && N
+    ee && L,
+    F && H
   ] });
-}, he = oe(ie);
+}, Ce = ue(xe);
 export {
-  he as default
+  Ce as default
 };