prometeo-design-system 1.6.6 → 1.6.8

package/dist/Input.es.js

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

package/dist/ProfilePictureUpload.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/ProfilePictureUpload'
+export {}

package/dist/ProfilePictureUpload.es.js

@@ -0,0 +1,207 @@
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { motion as n, AnimatePresence as L } from "framer-motion";
+import { useRef as B, useState as C } from "react";
+import b from "./Avatar.es.js";
+const I = {
+  sm: "w-16 h-16",
+  md: "w-24 h-24",
+  lg: "w-32 h-32",
+  xl: "w-40 h-40"
+}, M = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8"
+}, N = {
+  sm: "w-6 h-6",
+  md: "w-7 h-7",
+  lg: "w-8 h-8",
+  xl: "w-10 h-10"
+}, P = {
+  sm: "-bottom-1 -right-0.5",
+  md: "-bottom-0.5 -right-0.5",
+  lg: "bottom-1 right-1",
+  xl: "bottom-3 right-2"
+}, d = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-7 h-7"
+}, S = {
+  sm: "-top-0.5 -right-0.5",
+  md: "-top-1 -right-1",
+  lg: "-top-1 -right-0",
+  xl: "top-1 right-1"
+};
+function A({
+  imageUrl: s,
+  fallbackText: f = "S L",
+  onFileSelect: p,
+  onEditClick: l,
+  onRemoveClick: g,
+  size: o = "lg",
+  className: x,
+  disabled: t = !1,
+  showRemoveButton: w = !0,
+  acceptedTypes: v = "image/*",
+  maxFileSize: c = 5 * 1024 * 1024,
+  onError: u
+}) {
+  const h = B(null), [i, m] = C(!1), j = (r) => r.type.startsWith("image/") ? r.size > c ? (u?.(`La imagen debe ser menor a ${Math.round(c / 1024 / 1024)}MB`), !1) : !0 : (u?.("Por favor selecciona un archivo de imagen válido"), !1), y = (r) => {
+    const a = r.target.files?.[0];
+    a && (j(a) && p?.(a), r.target.value = "");
+  }, k = () => {
+    t || (l ? l() : h.current?.click());
+  }, $ = (r) => {
+    r.stopPropagation(), !t && g?.();
+  };
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      onMouseEnter: () => m(!0),
+      onMouseLeave: () => m(!1),
+      className: `relative inline-block border-inherit ${x || ""}`,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            ref: h,
+            type: "file",
+            accept: v,
+            onChange: y,
+            className: "hidden",
+            disabled: t
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          n.div,
+          {
+            className: `
+                    ${I[o]} 
+                    rounded-full 
+                    overflow-hidden
+                    flex items-center justify-center
+                    relative
+                    ${t ? "opacity-50 cursor-not-allowed" : ""}
+                `,
+            children: /* @__PURE__ */ e.jsx(
+              b,
+              {
+                urlImage: s,
+                fallbackText: f,
+                sizeImage: o,
+                sizeFallback: o
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          n.button,
+          {
+            className: `
+                    absolute 
+                    ${P[o]}
+                    border-3
+                    border-inherit
+                    ${N[o]}
+                    rounded-lg 
+                    bg-primary-default-default 
+                    hover:bg-primary-default-hover
+                    transition-all duration-300
+                    flex 
+                    items-center 
+                    justify-center
+                    cursor-pointer
+                    ${t ? "opacity-50 cursor-not-allowed" : ""}
+               `,
+            onClick: k,
+            disabled: t,
+            whileTap: t ? {} : { scale: 0.95, transition: { duration: 0.2, ease: "easeInOut" } },
+            initial: { scale: 0, rotate: -180 },
+            animate: { scale: 1, rotate: 0 },
+            children: /* @__PURE__ */ e.jsx(
+              n.svg,
+              {
+                className: `${M[o]} text-white`,
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                animate: i && !t ? {
+                  x: [0, -1, 0, 1, -1, 0, 1],
+                  y: [0, 1, 0, 1, 0, 1, 1],
+                  rotate: [0, 5, -3, 8, -5, 3, 1],
+                  transition: {
+                    duration: 2,
+                    ease: "easeInOut"
+                  }
+                } : { x: 0, y: 0, rotate: 0 },
+                transition: {
+                  duration: 1.2,
+                  repeat: 0,
+                  ease: "easeInOut"
+                },
+                children: /* @__PURE__ */ e.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e.jsx(L, { children: s && w && !t && /* @__PURE__ */ e.jsx(
+          n.button,
+          {
+            className: `
+                            absolute 
+                            ${S[o]} 
+                            ${d[o]} 
+                            rounded-full 
+                            shadow-lg 
+                           bg-error-light
+                            flex 
+                            cursor-pointer
+                            items-center 
+                            justify-center
+                            ${t ? "opacity-50 cursor-not-allowed" : ""}
+                        `,
+            disabled: t,
+            onClick: $,
+            initial: { scale: 0, opacity: 0, rotate: -90 },
+            animate: {
+              scale: i ? 1 : 0.8,
+              opacity: i ? 1 : 0,
+              rotate: 0
+            },
+            exit: { scale: 0, opacity: 0, rotate: 90 },
+            whileTap: { scale: 0.9 },
+            transition: {
+              type: "spring",
+              stiffness: 300,
+              damping: 25
+            },
+            children: /* @__PURE__ */ e.jsx(
+              n.svg,
+              {
+                className: `${d[o]} text-white p-1`,
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                whileHover: { rotate: 90 },
+                transition: { duration: 0.2 },
+                children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  A as ProfilePictureUpload
+};

package/dist/Steps.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/Steps'
+export {}

package/dist/Steps.es.js

@@ -0,0 +1,189 @@
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { c as j } from "./cn-B6yFEsav.js";
+import { motion as r } from "framer-motion";
+import { Icons as y } from "./Icons.es.js";
+const b = ({
+  index: l,
+  isHorizontal: s,
+  currentStep: d
+}) => {
+  const i = l < d, n = l === d - 1;
+  return /* @__PURE__ */ e.jsxs("div", { className: `relative ${s ? "w-20 h-1" : "w-0.5 h-8"}`, children: [
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full bg-neutral-medium-default"
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      r.div,
+      {
+        className: "absolute inset-0 rounded-full bg-primary-default-default",
+        initial: {
+          scaleX: s ? 0 : 1,
+          scaleY: s ? 1 : 0,
+          opacity: 0
+        },
+        animate: {
+          scaleX: i ? 1 : s ? 0 : 1,
+          scaleY: i || s ? 1 : 0,
+          opacity: i ? 1 : 0
+        },
+        transition: {
+          duration: 0.2,
+          ease: "easeInOut",
+          delay: l * 0.1
+        },
+        style: {
+          originX: s ? 0 : 0.5,
+          originY: s ? 0.5 : 0
+        }
+      }
+    ),
+    n && /* @__PURE__ */ e.jsx(
+      r.div,
+      {
+        className: "absolute inset-0 rounded-full bg-primary-default-default",
+        initial: {
+          scaleX: s ? 0 : 1,
+          scaleY: s ? 1 : 0,
+          opacity: 0
+        },
+        animate: {
+          scaleX: 1,
+          scaleY: 1,
+          opacity: [0, 0.3, 0]
+        },
+        transition: {
+          duration: 1.5,
+          repeat: 1 / 0,
+          ease: "easeInOut"
+        },
+        style: {
+          originX: s ? 0 : 0.5,
+          originY: s ? 0.5 : 0,
+          filter: "blur(4px)"
+        }
+      }
+    )
+  ] });
+}, I = ({
+  steps: l,
+  currentStep: s,
+  orientation: d = "horizontal",
+  variant: i = "default",
+  size: n = "md",
+  className: f = "",
+  onStepClick: x,
+  allowClickableSteps: p = !1
+}) => {
+  const c = d === "horizontal", v = (t) => ({
+    sm: { right: "-40px", top: "16px" },
+    md: { right: "-40px", top: "20px" },
+    lg: { right: "-40px", top: "24px" }
+  })[t], m = {
+    sm: {
+      circle: "w-8 h-8 text-xs",
+      title: "text-sm",
+      description: "text-xs",
+      spacing: c ? "gap-4" : "gap-1"
+    },
+    md: {
+      circle: "w-10 h-10 text-sm",
+      title: "text-base",
+      description: "text-sm",
+      spacing: c ? "gap-3" : "gap-2"
+    },
+    lg: {
+      circle: "w-12 h-12 text-base",
+      title: "text-lg",
+      description: "text-base",
+      spacing: c ? "gap-4" : "gap-3"
+    }
+  }, N = (t) => t < s ? "completed" : t === s ? "current" : "upcoming", g = (t) => {
+    const a = `${m[n].circle} rounded-full flex items-center justify-center font-medium`;
+    switch (t) {
+      case "completed":
+        return `${a} bg-primary-default-default text-neutral-strong-default shadow-lg`;
+      case "current":
+        return `${a} border-3 border-primary text-neutral-strong-default shadow-lg duration-900`;
+      default:
+        return `${a} bg-neutral-medium-default text-neutral-medium-default`;
+    }
+  }, h = (t) => {
+    p && x && x(t);
+  }, w = c ? `flex items-center ${f}` : `space-y-0 ${f}`;
+  return /* @__PURE__ */ e.jsx("div", { className: w, children: l.map((t, a) => {
+    const o = N(a), u = p && x;
+    return /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: c ? /* @__PURE__ */ e.jsx("div", { className: "flex", children: /* @__PURE__ */ e.jsxs("div", { className: "w-40 flex flex-col items-center relative", children: [
+      /* @__PURE__ */ e.jsx(
+        r.div,
+        {
+          className: `${g(o)} ${u ? "cursor-pointer" : ""} relative z-10`,
+          initial: { scale: 0.8, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { duration: 0.3, delay: a * 0.1 },
+          whileTap: u ? { scale: 0.95 } : {},
+          onClick: () => h(a),
+          children: i === "numbered" || !t.icon ? o === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: a + 1 }) : t.icon
+        }
+      ),
+      a < l.length - 1 && /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: "absolute",
+          style: v(n),
+          children: /* @__PURE__ */ e.jsx(
+            b,
+            {
+              index: a,
+              isHorizontal: c,
+              currentStep: s
+            }
+          )
+        }
+      ),
+      i !== "minimal" && t.description && /* @__PURE__ */ e.jsx("p", { className: j(
+        m[n].description,
+        "text-gray-400 mt-2 text-center max-w-full",
+        o === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"
+      ), children: t.description })
+    ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "relative flex w-36", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center w-full", children: [
+        /* @__PURE__ */ e.jsx(
+          r.div,
+          {
+            className: `${g(o)} ${u ? "cursor-pointer" : ""}`,
+            initial: { scale: 0.8, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: { duration: 0.3, delay: a * 0.1 },
+            whileTap: u ? { scale: 0.95 } : {},
+            onClick: () => h(a),
+            children: i === "numbered" || !t.icon ? o === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: a + 1 }) : t.icon
+          }
+        ),
+        a < l.length - 1 && /* @__PURE__ */ e.jsx(
+          b,
+          {
+            index: a,
+            isHorizontal: c,
+            currentStep: s
+          }
+        )
+      ] }),
+      i !== "minimal" && /* @__PURE__ */ e.jsx(
+        r.div,
+        {
+          className: `absolute -right-30 ml-4 top-3 gap-3 flex flex-col w-full ${m[n].spacing} flex  h-full`,
+          initial: { opacity: 0, x: -10 },
+          animate: { opacity: 1, x: 0 },
+          transition: { duration: 0.3, delay: a * 0.1 + 0.1 },
+          children: t.description && /* @__PURE__ */ e.jsx("p", { className: j(m[n].description, "text-gray-400", o === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"), children: t.description })
+        }
+      )
+    ] }) }, t.id);
+  }) });
+};
+export {
+  I as Steps
+};

package/dist/components/Input/Input.d.ts

@@ -4,9 +4,10 @@ export type LabelVariant = "default" | "static";
 export interface InputProps {
     label: string;
     icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
     isFetching?: boolean;
-    onChange: (value: string) => void;
     id?: string;
+    onChange: (value: string, name?: string) => void;
     value?: string;
     debounceMs?: number;
     width?: string;
@@ -26,5 +27,5 @@ export interface InputProps {
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
-declare const _default: import('react').MemoExoticComponent<({ label, icon, onChange, value, debounceMs, name, width, height, variant, labelVariant, size, disabled, type, isFetching, errorComponent, helperComponent, required, onFocus, onBlur, onEmptied, onKeyDown, onKeyUp, }: InputProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ label, icon, iconPosition, onChange, value, debounceMs, name, width, height, variant, labelVariant, size, disabled, type, isFetching, errorComponent, helperComponent, required, onFocus, onBlur, onEmptied, onKeyDown, onKeyUp, }: InputProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;