lawgic-dev-kit 0.21.6 → 0.22.4

package/dist/components/molecules/SingleSelectDropdown/SingleSelectDropdown.js

@@ -0,0 +1,212 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import Y, { useState as N, useRef as w } from "react";
+import { useFloating as q, useClick as A, useDismiss as G, useInteractions as J, useTransitionStyles as K } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import "../../../_virtual/lodash.js";
+import "../../../contexts/themeContext.js";
+import "react-hook-form";
+import "../InformationContainer/InformationContainer.js";
+import "react-dom";
+import Q from "../../atoms/Checkbox/Checkbox.js";
+import "../../../constants/countries.js";
+import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
+import "fuse.js";
+import { autoUpdate as X } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as Z, flip as V, shift as ee, size as te, arrow as re } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const je = ({
+  label: u,
+  options: m,
+  selectedValue: a = null,
+  onUpdate: $,
+  placeholder: C = "Seleccionar opción",
+  allowSearch: z = !0,
+  className: S = "",
+  disabled: r = !1,
+  size: L = "md",
+  showRadio: M = !1
+}) => {
+  var f, g, y, j;
+  const [n, i] = N(!1), [l, c] = N(""), R = w(null), B = w(null), s = {
+    sm: {
+      container: "px-16 py-8",
+      text: "text-sm",
+      label: "text-sm",
+      icon: "w-12 h-12",
+      checkboxSize: 16,
+      gap: "gap-8",
+      searchText: "text-sm",
+      searchIcon: "size-12"
+    },
+    md: {
+      container: "p-16",
+      text: "text-14",
+      label: "text-14",
+      icon: "w-16 h-16",
+      checkboxSize: 20,
+      gap: "gap-8",
+      searchText: "text-14",
+      searchIcon: "size-16"
+    }
+  }[L], { x: I, y: O, strategy: T, refs: x, context: d } = q({
+    open: n && !r,
+    onOpenChange: (t) => !r && i(t),
+    middleware: [
+      Z(8),
+      V(),
+      ee({ padding: 8 }),
+      te({
+        apply({ availableHeight: t, elements: p }) {
+          Object.assign(p.floating.style, {
+            maxHeight: `${Math.min(t - 10, 500)}px`
+          });
+        },
+        padding: 8
+      }),
+      re({ element: B })
+    ],
+    placement: "bottom-start",
+    whileElementsMounted: X
+  }), F = A(d, { enabled: !r }), P = G(d), { getReferenceProps: W, getFloatingProps: D } = J([F, P]), { isMounted: E, styles: _ } = K(d, {
+    duration: { open: 200, close: 150 },
+    initial: { opacity: 0, transform: "translateY(-4px)" }
+  }), o = m.find((t) => t.value === a), H = (t) => {
+    r || ($(a === t ? null : t), i(!1), c(""));
+  }, h = m.filter(
+    (t) => t.label.toLowerCase().includes(l.toLowerCase())
+  ), U = W({
+    onClick: () => !r && i(!n)
+  });
+  return /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col select-none ${s.gap} ${r ? "cursor-not-allowed" : ""} ${S}`, children: [
+    u && /* @__PURE__ */ e.jsx("h6", { className: `text-gray-600 font-600 ${s.label} ${r ? "text-gray-300" : ""}`, children: u }),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: x.setReference,
+        className: `
+                    flex items-center justify-between rounded-full border transition-all duration-200
+                    ${s.container}
+                    ${r ? "bg-gray-50 border-gray-200 cursor-not-allowed" : "bg-blue-50 cursor-pointer"}
+                    ${!r && (n ? "border-blue-500" : "border-blue-100 hover:border-blue-300")}
+                `,
+        ...U,
+        children: [
+          o ? /* @__PURE__ */ e.jsxs("div", { className: `flex items-center gap-[6px] overflow-hidden ${((f = o.colors) == null ? void 0 : f.bgColor) || ""} ${((g = o.colors) == null ? void 0 : g.textColor) || ""} ${o.colors ? "rounded-[8px] py-4 px-8" : ""}`, children: [
+            ((y = o.colors) == null ? void 0 : y.dotColor) && /* @__PURE__ */ e.jsx(
+              "span",
+              {
+                className: "size-6 rounded-full flex-shrink-0",
+                style: { background: o.colors.dotColor }
+              }
+            ),
+            /* @__PURE__ */ e.jsx("span", { className: `${s.text} font-semibold truncate`, children: o.label })
+          ] }) : /* @__PURE__ */ e.jsx("span", { className: `flex-grow text-left truncate font-600 ${s.text} ${r ? "text-gray-300" : "text-gray-500"}`, children: C }),
+          /* @__PURE__ */ e.jsx(
+            "svg",
+            {
+              className: `${s.icon} transition-transform ${n ? "rotate-180" : ""} ${r ? "text-gray-300" : "text-gray-500"}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    E && !r && /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: x.setFloating,
+        style: {
+          position: T,
+          top: O ?? 0,
+          left: I ?? 0,
+          ..._,
+          width: (j = x.reference.current) == null ? void 0 : j.clientWidth,
+          zIndex: 50
+        },
+        className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
+        ...D(),
+        children: [
+          z && /* @__PURE__ */ e.jsx("div", { className: "sticky top-0 bg-white p-8 border-b border-gray-100 z-20", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ e.jsx("div", { className: "absolute inset-y-0 left-0 pl-12 flex items-center pointer-events-none", children: /* @__PURE__ */ e.jsx("svg", { className: `${s.searchIcon} text-gray-400`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
+            /* @__PURE__ */ e.jsx(
+              "input",
+              {
+                ref: R,
+                type: "text",
+                className: `w-full py-6 pl-36 pr-12 rounded-full focus:outline-none bg-gray-50 ${s.searchText}`,
+                placeholder: "Buscar...",
+                value: l,
+                onChange: (t) => c(t.target.value),
+                onClick: (t) => t.stopPropagation(),
+                autoFocus: !0
+              }
+            ),
+            l && /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                className: "absolute inset-y-0 right-0 pr-12 flex items-center",
+                onClick: (t) => {
+                  t.stopPropagation(), c("");
+                },
+                children: /* @__PURE__ */ e.jsx("svg", { className: "h-16 w-16 text-gray-400 hover:text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e.jsx("div", { className: "max-h-[450px] overflow-y-auto", children: h.length > 0 ? /* @__PURE__ */ e.jsx("div", { className: "py-4", children: h.map((t) => {
+            var v, b, k;
+            const p = a === t.value;
+            return /* @__PURE__ */ e.jsxs(Y.Fragment, { children: [
+              t.dividerBefore && /* @__PURE__ */ e.jsx("div", { className: "px-16 py-8", children: /* @__PURE__ */ e.jsx("hr", { className: "border-t border-gray-200" }) }),
+              /* @__PURE__ */ e.jsxs(
+                "div",
+                {
+                  className: "flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer gap-12",
+                  onClick: () => H(t.value),
+                  children: [
+                    M && /* @__PURE__ */ e.jsx(
+                      Q,
+                      {
+                        active: p,
+                        size: s.checkboxSize,
+                        variant: "rounded",
+                        className: "flex-shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsxs(
+                      "div",
+                      {
+                        className: `flex items-center rounded-[8px] py-4 px-8 gap-[6px] overflow-hidden ${((v = t.colors) == null ? void 0 : v.bgColor) || ""} ${((b = t.colors) == null ? void 0 : b.textColor) || ""}`,
+                        children: [
+                          ((k = t.colors) == null ? void 0 : k.dotColor) && /* @__PURE__ */ e.jsx(
+                            "span",
+                            {
+                              className: "size-6 rounded-full flex-shrink-0",
+                              style: { background: t.colors.dotColor }
+                            }
+                          ),
+                          /* @__PURE__ */ e.jsx("span", { className: `${s.text} font-semibold truncate`, children: t.label })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, t.value);
+          }) }) : /* @__PURE__ */ e.jsxs("div", { className: "px-16 py-16 text-center text-gray-500", children: [
+            /* @__PURE__ */ e.jsx("svg", { className: "mx-auto h-24 w-24 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+            /* @__PURE__ */ e.jsxs("p", { className: "mt-8 text-body-s", children: [
+              "No se encontraron resultados para “",
+              l,
+              "”"
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  je as default
+};

package/dist/components/molecules/SingleSelectDropdown/index.d.ts

@@ -0,0 +1 @@
+export { default as SingleSelectDropdown } from './SingleSelectDropdown';

package/dist/components/molecules/Stepper/Stepper.d.ts

@@ -1,3 +1,3 @@
-import { StepperProps } from './Stepper.types';
+import { StepperProps } from '../../../types';
 declare const Stepper: React.FC<StepperProps>;
 export default Stepper;

package/dist/components/molecules/Stepper/Stepper.js

@@ -1,249 +1,96 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { faCheck as S, faClockSix as k } from "../../../node_modules/@fortawesome/pro-light-svg-icons/index.js";
-import { FontAwesomeIcon as h } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
-import { useState as y, useEffect as $ } from "react";
-import { useTheme as v } from "../../../hooks/useTheme.js";
-import { resolveStepperColors as w } from "./Stepper.styles.js";
-import { motion as m } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-import { AnimatePresence as I } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
-const D = ({
-  status: a,
-  label: u,
-  shouldAnimate: t,
-  color: j,
-  index: p
-}) => {
-  const { t: s } = v(), o = a === "done", i = a === "focus", {
-    // completedBgColor,
-    focusBorderColor: c,
-    pendingBorderColor: l,
-    iconActiveColor: f
-  } = w(j);
-  return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-8 h-fit", children: [
-    /* @__PURE__ */ e.jsx(
-      m.div,
-      {
-        initial: t ? !1 : {
-          backgroundColor: o ? "#E0F1ED" : i ? c : "white",
-          borderWidth: i ? "1px" : "0px",
-          borderColor: i ? c : l
-        },
-        animate: {
-          backgroundColor: o ? "#E0F1ED" : i ? c : "white",
-          borderWidth: i || !o ? "1px" : "0px",
-          borderColor: i ? c : l
-        },
-        transition: { duration: t ? 0.3 : 0, ease: "easeOut" },
-        className: "min-w-28 min-h-28 rounded-full flex items-center justify-center text-xl font-bold border-[1px]",
-        children: /* @__PURE__ */ e.jsx(
-          m.div,
-          {
-            initial: t ? !1 : { color: o ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)" },
-            animate: {
-              color: o || i ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
-            },
-            transition: { duration: t ? 0.2 : 0 },
-            className: "flex items-center justify-center",
-            children: /* @__PURE__ */ e.jsx(I, { mode: "wait", children: o || i ? /* @__PURE__ */ e.jsx(
-              m.div,
-              {
-                initial: t ? { opacity: 0, scale: 0.8, rotate: -180 } : { opacity: 1, scale: 1, rotate: 0 },
-                animate: { opacity: 1, scale: 1, rotate: 0 },
-                exit: { opacity: 0, scale: 0.8, rotate: 180 },
-                transition: { duration: t ? 0.3 : 0 },
-                className: "flex items-center justify-center",
-                children: o ? /* @__PURE__ */ e.jsx(
-                  h,
-                  {
-                    icon: S,
-                    className: `w-14 h-14 min-w-14 min-h-14 ${f}`
-                  }
-                ) : /* @__PURE__ */ e.jsx("div", { className: "text-white leading-none font-500 text-body-s flex items-center justify-center mb-1", children: p + 1 })
-              },
-              "check"
-            ) : /* @__PURE__ */ e.jsx(
-              m.div,
-              {
-                initial: t ? { opacity: 0, scale: 0.8, rotate: -180 } : { opacity: 1, scale: 1, rotate: 0 },
-                animate: { opacity: 1, scale: 1, rotate: 0 },
-                exit: { opacity: 0, scale: 0.8, rotate: 180 },
-                transition: { duration: t ? 0.3 : 0 },
-                className: "flex items-center justify-center",
-                children: /* @__PURE__ */ e.jsx(
-                  h,
-                  {
-                    icon: k,
-                    className: "w-14 h-14 min-w-14 min-h-14"
-                  }
-                )
-              },
-              "clock"
-            ) })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      "span",
-      {
-        className: `text-body-s transition-all duration-300 text-center w-full font-500
-          
-          `,
-        style: {
-          color: i ? c : o ? "#000" : "#8F9095"
-        },
-        children: s(u)
-      }
-    )
+import { useState as f, useEffect as w } from "react";
+import { useTheme as u } from "../../../hooks/useTheme.js";
+import { resolveStepperColors as x } from "./Stepper.styles.js";
+import "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import "../../../_virtual/lodash.js";
+import "react-hook-form";
+import "../InformationContainer/InformationContainer.js";
+import "react-dom";
+import "../../../constants/countries.js";
+import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
+import "fuse.js";
+import v from "../../atoms/StepIndicator/StepIndicator.js";
+const z = (t) => {
+  const { t: i } = u(), { labelColor: r } = x(t.color);
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-8 h-fit min-w-0", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(v, { ...t }) }),
+    t.label && /* @__PURE__ */ e.jsx("span", { className: `text-body-s transition-all duration-300 font-semibold truncate ${r}`, children: i(t.label) })
   ] });
-}, W = ({
-  status: a,
-  label: u,
-  shouldAnimate: t,
-  color: j
-}) => {
-  const { t: p } = v(), s = a === "done", o = a === "focus", {
-    completedBgColor: i,
-    focusBorderColor: c,
-    pendingBorderColor: l,
-    iconActiveColor: f
-  } = w(j);
-  return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-8 h-fit", children: [
-    /* @__PURE__ */ e.jsx(
-      m.div,
-      {
-        initial: t ? !1 : {
-          backgroundColor: s ? i : "white",
-          borderWidth: o || !s ? "1px" : "0px",
-          borderColor: o ? c : l
-        },
-        animate: {
-          backgroundColor: s ? i : "white",
-          borderWidth: o || !s ? "1px" : "0px",
-          borderColor: o ? c : l
-        },
-        transition: { duration: t ? 0.3 : 0, ease: "easeOut" },
-        className: "min-w-24 min-h-24 rounded-full flex items-center justify-center text-xs font-bold z-10",
-        children: /* @__PURE__ */ e.jsx(
-          m.div,
-          {
-            initial: t ? !1 : {
-              color: o || s ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
-            },
-            animate: {
-              color: o || s ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
-            },
-            transition: { duration: t ? 0.2 : 0 },
-            className: "flex items-center justify-center",
-            children: /* @__PURE__ */ e.jsx(I, { mode: "wait", children: s || o ? /* @__PURE__ */ e.jsx(
-              m.div,
-              {
-                initial: t ? { opacity: 0, scale: 0.8, rotate: -180 } : { opacity: 1, scale: 1, rotate: 0 },
-                animate: { opacity: 1, scale: 1, rotate: 0 },
-                exit: { opacity: 0, scale: 0.8, rotate: 180 },
-                transition: { duration: t ? 0.3 : 0 },
-                className: "flex items-center justify-center",
-                children: /* @__PURE__ */ e.jsx(
-                  h,
-                  {
-                    icon: S,
-                    className: `w-14 h-14 min-w-14 min-h-14 ${f}`
-                  }
-                )
-              },
-              "check"
-            ) : /* @__PURE__ */ e.jsx(
-              m.div,
-              {
-                initial: t ? { opacity: 0, scale: 0.8, rotate: -180 } : { opacity: 1, scale: 1, rotate: 0 },
-                animate: { opacity: 1, scale: 1, rotate: 0 },
-                exit: { opacity: 0, scale: 0.8, rotate: 180 },
-                transition: { duration: t ? 0.3 : 0 },
-                className: "flex items-center justify-center",
-                children: /* @__PURE__ */ e.jsx(
-                  h,
-                  {
-                    icon: k,
-                    className: "w-14 h-14 min-w-14 min-h-14"
-                  }
-                )
-              },
-              "clock"
-            ) })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      "span",
-      {
-        className: `text-body-s font-medium transition-all duration-300 text-center w-full ${s || o ? "text-black" : "text-gray-400"}`,
-        children: p(u)
-      }
-    )
+}, I = (t) => {
+  const { t: i } = u(), { labelColor: r } = x(t.color);
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center gap-8 h-fit min-w-fit", children: [
+    /* @__PURE__ */ e.jsx(v, { ...t }),
+    t.label && /* @__PURE__ */ e.jsx("span", { className: `text-body-s transition-all duration-300 text-center font-semibold whitespace-nowrap ${r}`, children: i(t.label) })
   ] });
-}, J = ({
-  steps: a,
-  direction: u = "horizontal",
-  color: t
+}, D = ({
+  steps: t,
+  direction: i = "horizontal",
+  color: r
 }) => {
-  const { defaultColorScheme: j } = v(), p = t || j, { lineActiveColor: s, lineGradientFrom: o } = w(p), [i, c] = y([]), [l, f] = y(null), [g, z] = y(!1), C = a.findIndex((n) => !n.completed), b = (n) => C === n;
-  $(() => {
-    const n = a.map(
-      (r, d) => b(d) ? "focus" : r.completed ? "done" : "pending"
+  const { defaultColorScheme: b } = u(), c = r || b, s = x(c), [S, p] = f([]), [h, g] = f(null), [d, N] = f(!1), j = t.findIndex((o) => !o.completed), m = (o) => j === o;
+  w(() => {
+    const o = t.map(
+      (l, n) => m(n) ? "focus" : l.completed ? "done" : "pending"
     );
-    if (!g)
-      c(n), z(!0), f(null);
+    if (!d)
+      p(o), N(!0), g(null);
     else {
-      const r = n.findIndex(
-        (d, x) => d !== i[x]
+      const l = o.findIndex(
+        (n, a) => n !== S[a]
       );
-      f(r !== -1 ? r : null), c(n);
+      g(l !== -1 ? l : null), p(o);
     }
-  }, [a, C]);
-  const F = () => /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-16 relative", children: a.map((n, r) => {
-    var N;
-    const d = b(r - 1) ? "focus" : (N = a[r - 1]) != null && N.completed ? "done" : "pending", x = b(r) ? "focus" : n.completed ? "done" : "pending", E = g && l === r;
-    return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-10 relative", children: [
-      r !== 0 && /* @__PURE__ */ e.jsx(
+  }, [t, j]);
+  const C = () => /* @__PURE__ */ e.jsx("div", { className: "flex flex-col h-full w-full", children: t.map((o, l) => {
+    const n = m(l) ? "focus" : o.completed ? "done" : "pending", a = d && h === l;
+    return /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col ${l < t.length - 1 ? "flex-1" : "flex-initial"}`, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-4 z-10", children: /* @__PURE__ */ e.jsx(
+        z,
+        {
+          index: l,
+          status: n,
+          shouldAnimate: a,
+          label: o.label,
+          color: c
+        }
+      ) }),
+      l < t.length - 1 && /* @__PURE__ */ e.jsx("div", { className: "flex h-full w-[35px] justify-center my-4", children: /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: `absolute left-[13px] bottom-[28px] w-[1.5px] h-16 ${x === "done" || x === "focus" ? s : d === "done" || d === "focus" ? `bg-gradient-to-b ${o} to-[rgb(243,244,246)]` : "bg-[rgb(243,244,246)]"}`
+          className: `w-[1.5px] h-full transition-all duration-500 ${n === "done" ? s.lineActiveColor : n === "focus" ? `bg-gradient-to-b ${s.lineGradientFrom} ${s.lineGradientTo}` : ""}`,
+          style: {
+            backgroundColor: n === "pending" ? s.pendingBgColor : void 0
+          }
         }
-      ),
-      /* @__PURE__ */ e.jsx(
-        D,
+      ) })
+    ] }, l);
+  }) }), $ = () => /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-start", children: t.map((o, l) => {
+    const n = m(l) ? "focus" : o.completed ? "done" : "pending", a = d && h === l;
+    return /* @__PURE__ */ e.jsxs("div", { className: `flex items-start ${l < t.length - 1 ? "flex-1" : "flex-initial"}`, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center z-10", children: /* @__PURE__ */ e.jsx(
+        I,
         {
-          index: r,
-          status: x,
-          shouldAnimate: E,
-          label: n.label,
-          color: p
+          index: l,
+          status: n,
+          shouldAnimate: a,
+          label: o.label,
+          color: c
         }
-      )
-    ] }, r);
-  }) }), B = () => /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center gap-12", children: a.map((n, r) => {
-    const d = b(r) ? "focus" : n.completed ? "done" : "pending", x = g && l === r;
-    return /* @__PURE__ */ e.jsx(
-      "div",
-      {
-        className: "flex flex-col items-center justify-evenly w-full gap-2 relative col-span-1",
-        children: /* @__PURE__ */ e.jsx(
-          W,
-          {
-            index: r,
-            status: d,
-            shouldAnimate: x,
-            label: n.label,
-            color: p
+      ) }),
+      l < t.length - 1 && /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: `flex-1 h-[1.5px] mt-[16px] mx-4 transition-all duration-500 ${n === "done" ? s.lineActiveColor : n === "focus" ? `bg-gradient-to-r ${s.lineGradientFrom} ${s.lineGradientTo}` : ""}`,
+          style: {
+            backgroundColor: n === "pending" ? s.pendingBgColor : void 0
           }
-        )
-      },
-      r
-    );
+        }
+      )
+    ] }, l);
   }) });
-  return u === "horizontal" ? /* @__PURE__ */ e.jsx(B, {}) : /* @__PURE__ */ e.jsx(F, {});
+  return i === "horizontal" ? /* @__PURE__ */ e.jsx($, {}) : /* @__PURE__ */ e.jsx(C, {});
 };
 export {
-  J as default
+  D as default
 };

package/dist/components/molecules/Stepper/Stepper.styles.d.ts

@@ -1,11 +1,15 @@
 import { Color } from '../../../types/styleValues';
 interface StepperColorConfig {
+    focusIconColor: string;
+    completedIconColor: string;
+    pendingIconColor: string;
+    labelColor: string;
+    focusBgColor: string;
     completedBgColor: string;
-    focusBorderColor: string;
-    pendingBorderColor: string;
-    iconActiveColor: string;
+    pendingBgColor: string;
     lineActiveColor: string;
     lineGradientFrom: string;
+    lineGradientTo: string;
 }
 export declare const resolveStepperColors: (color: Color) => StepperColorConfig;
 export {};

package/dist/components/molecules/Stepper/Stepper.styles.js

@@ -1,26 +1,34 @@
 const e = {
-  completedBgColor: "#dae2fb",
-  focusBorderColor: "#4570EB",
-  pendingBorderColor: "#ABACAF70",
-  iconActiveColor: "text-blue-500",
-  lineActiveColor: "bg-blue-500",
-  lineGradientFrom: "from-blue-500"
-}, r = {
+  focusIconColor: "text-white",
+  completedIconColor: "text-blue-500",
+  pendingIconColor: "text-blue-500",
+  labelColor: "text-blue-500",
+  focusBgColor: "#4570EB",
+  completedBgColor: "#CAD6F9",
+  pendingBgColor: "#ECF1FD",
+  lineActiveColor: "bg-blue-200",
+  lineGradientFrom: "from-blue-500",
+  lineGradientTo: "to-blue-200"
+}, l = {
+  focusIconColor: "text-white",
+  completedIconColor: "text-aqua-500",
+  pendingIconColor: "text-aqua-500",
+  labelColor: "text-aqua-500",
+  focusBgColor: "#1DA696",
   completedBgColor: "#C7F9F5",
-  focusBorderColor: "#1DA696",
-  pendingBorderColor: "#ABACAF70",
-  iconActiveColor: "text-aqua-500",
-  lineActiveColor: "bg-aqua-500",
-  lineGradientFrom: "from-aqua-500"
-}, l = (o) => {
+  pendingBgColor: "#C7F9F5",
+  lineActiveColor: "bg-aqua-200",
+  lineGradientFrom: "from-aqua-500",
+  lineGradientTo: "to-aqua-200"
+}, t = (o) => {
   switch (o) {
     case "aqua":
-      return r;
+      return l;
     case "blue":
     default:
       return e;
   }
 };
 export {
-  l as resolveStepperColors
+  t as resolveStepperColors
 };

package/dist/components/molecules/Tooltip/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+type TooltipLocation = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    text: string;
+    children: ReactNode;
+    icon?: IconDefinition;
+    location?: TooltipLocation;
+    childClassName?: string;
+}
+/**
+ * Smart Tooltip Component
+ * * Automatically detects if the children's text is truncated.
+ * The tooltip bubble only appears if the content overflows its container.
+ * * Usage Note:
+ * By default, it truncates based on the parent's width. To truncate earlier,
+ * pass a specific width class to `childClassName` (e.g., `max-w-[200px]`).
+ */
+declare const Tooltip: ({ text, children, icon, location, childClassName }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;