lawgic-dev-kit 0.21.6 → 0.22.4

package/dist/components/atoms/PasswordInput/PasswordInput.js

@@ -1,33 +1,49 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { useState as m } from "react";
-import { useController as b } from "react-hook-form";
-import { FontAwesomeIcon as w } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
-import { faEye as y, faEyeSlash as j } from "../../../node_modules/@fortawesome/pro-light-svg-icons/index.js";
-import { useTheme as $ } from "../../../hooks/useTheme.js";
-const P = ({
-  label: u,
-  control: i,
+import { useState as y } from "react";
+import { useController as w } from "react-hook-form";
+import { FontAwesomeIcon as $ } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faEye as j, faEyeSlash as v } from "../../../node_modules/@fortawesome/pro-light-svg-icons/index.js";
+import { useTheme as N } from "../../../hooks/useTheme.js";
+const V = ({
+  label: i,
+  control: c,
   name: e,
-  placeholder: c,
-  className: d = "",
-  disabled: o = !1,
+  placeholder: p,
+  className: x = "",
+  disabled: t = !1,
+  size: d = "md",
   leftSide: a
 }) => {
   const {
-    field: { value: s = "", onChange: f, ref: p, onBlur: x },
-    fieldState: { error: t }
-  } = b({ name: e, control: i }), [l, g] = m(!1), { t: n } = $();
+    field: { value: n = "", onChange: m, ref: f, onBlur: g },
+    fieldState: { error: l }
+  } = w({ name: e, control: c }), [s, h] = y(!1), { t: u } = N(), o = {
+    sm: {
+      container: "px-16 py-8",
+      text: "text-sm",
+      label: "text-sm",
+      error: "text-sm",
+      gap: "gap-8"
+    },
+    md: {
+      container: "p-16",
+      text: "text-14",
+      label: "text-14",
+      error: "text-sm",
+      gap: "gap-8"
+    }
+  }[d];
   return /* @__PURE__ */ r.jsxs(
     "label",
     {
-      className: `flex flex-col group gap-8 select-none ${o && "cursor-not-allowed"} ${d}`,
+      className: `flex flex-col group select-none ${o.gap} ${t && "cursor-not-allowed"} ${x}`,
       htmlFor: e,
       children: [
         /* @__PURE__ */ r.jsx(
           "h6",
           {
-            className: `text-gray-600 font-600 group ${t && "!text-red-500"} text-label ${o && "text-gray-300"}`,
-            children: u
+            className: `text-gray-600 font-600 group ${l && "!text-red-500"} ${o.label} ${t && "text-gray-300"}`,
+            children: i
           }
         ),
         /* @__PURE__ */ r.jsxs(
@@ -35,20 +51,20 @@ const P = ({
           {
             htmlFor: e,
             className: `
-					flex items-center justify-between gap-8 p-16
-				
-				${t && "!border-red-500"} 
+					flex items-center justify-between gap-8 ${o.container}
+
+				${l && "!border-red-500"}
 
 				bg-light
-				
-				w-full h-full rounded-full border 
-				
-				${s && !o ? "border-blue-200" : "border-blue-100"} 
-				${!o && "group-hover:border-blue-300"} 
-				${o && "cursor-not-allowed"}
-				
+
+				w-full h-full rounded-full border
+
+				${n && !t ? "border-blue-200" : "border-blue-100"}
+				${!t && "group-hover:border-blue-300"}
+				${t && "cursor-not-allowed"}
+
 				group-focus-within:border-blue-500 transition-colors duration-200 ease-in-out
-				
+
 				group-disabled:bg-gray-500
 				`,
             children: [
@@ -57,35 +73,35 @@ const P = ({
                 "input",
                 {
                   id: e,
-                  type: l ? "text" : "password",
+                  type: s ? "text" : "password",
                   autoComplete: "off",
                   "aria-autocomplete": "none",
                   name: e,
-                  disabled: o,
-                  placeholder: c,
-                  value: s,
-                  onChange: (h) => f(h.target.value),
-                  onBlur: x,
-                  ref: p,
-                  className: "group bg-transparent w-full h-full font-600 placeholder:font-600 text-body-m disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none"
+                  disabled: t,
+                  placeholder: p,
+                  value: n,
+                  onChange: (b) => m(b.target.value),
+                  onBlur: g,
+                  ref: f,
+                  className: `group bg-transparent w-full h-full font-600 placeholder:font-600 ${o.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none`
                 }
               ),
               /* @__PURE__ */ r.jsx(
-                w,
+                $,
                 {
-                  icon: l ? y : j,
+                  icon: s ? j : v,
                   className: "min-h-16 max-h-16 text-gray-400 hover:text-gray-500 transition-colors duration-150 cursor-pointer ease-in-out",
-                  onClick: () => g(!l)
+                  onClick: () => h(!s)
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ r.jsx("h4", { className: "font-500 text-label text-red-500 leading-none", children: t && n(t.message || "", { x: n(e) }) })
+        /* @__PURE__ */ r.jsx("h4", { className: `font-500 text-red-500 leading-none ${o.error}`, children: l && u(l.message || "", { x: u(e) }) })
       ]
     }
   );
 };
 export {
-  P as default
+  V as default
 };

package/dist/components/atoms/PasswordInput/PasswordInput.types.d.ts

@@ -4,6 +4,7 @@ export type PasswordInputProps<T extends FieldValues> = {
     placeholder?: string;
     className?: string;
     disabled?: boolean;
+    size?: 'sm' | 'md';
     control: Control<T>;
     name: Path<T>;
     leftSide?: React.ReactNode;

package/dist/components/atoms/SelectInput/SelectInput.d.ts

@@ -1,4 +1,4 @@
 import { FieldValues } from 'react-hook-form';
 import { SelectInputProps } from './SelectInput.types';
-declare const SelectInput: <T extends FieldValues>({ options, name, control, label, placeholder, className, input, dropdownStyle, innerClassName, showChevron, }: SelectInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectInput: <T extends FieldValues>({ options, name, control, label, placeholder, className, input, dropdownStyle, innerClassName, showChevron, size, }: SelectInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SelectInput;

package/dist/components/atoms/SelectInput/SelectInput.js

@@ -1,59 +1,77 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { useFloating as Y, useClick as _, useDismiss as q, useInteractions as G, useTransitionStyles as J } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
-import { useState as N, useRef as S, useEffect as K } from "react";
-import { Controller as Q } from "react-hook-form";
-import { useTheme as V } from "../../../hooks/useTheme.js";
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { useFloating as U, useClick as Y, useDismiss as _, useInteractions as q, useTransitionStyles as G } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import { useState as $, useRef as z, useEffect as J } from "react";
+import { useController as K } from "react-hook-form";
+import { useTheme as Q } from "../../../hooks/useTheme.js";
 import { autoUpdate as X } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
 import { offset as Z, flip as ee, shift as te, size as se, arrow as re } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
-const pe = ({
+const me = ({
   options: c,
-  name: l,
+  name: i,
   control: p,
-  label: x = "Select an option",
+  label: d = "",
   placeholder: m = "Type to search...",
-  className: r = "",
-  input: h = !0,
+  className: n = "",
+  input: x = !0,
   dropdownStyle: f = {},
-  innerClassName: g = "",
-  showChevron: b = !0
-}) => /* @__PURE__ */ e.jsx(
-  Q,
-  {
-    name: l,
-    control: p,
-    render: ({ field: { onChange: y, value: n }, fieldState: { error: s } }) => /* @__PURE__ */ e.jsx(
-      ne,
-      {
-        options: c,
-        value: n,
-        onChange: y,
-        label: x,
-        placeholder: m,
-        error: s == null ? void 0 : s.message,
-        className: r,
-        input: h,
-        dropdownStyle: f,
-        innerClassName: g,
-        showChevron: b
-      }
-    )
-  }
-), ne = ({
+  innerClassName: h = "",
+  showChevron: g = !0,
+  size: y = "md"
+}) => {
+  const {
+    field: { value: b, onChange: o },
+    fieldState: { error: s }
+  } = K({ name: i, control: p });
+  return /* @__PURE__ */ t.jsx(
+    ne,
+    {
+      options: c,
+      value: b,
+      onChange: o,
+      label: d,
+      placeholder: m,
+      error: s == null ? void 0 : s.message,
+      className: n,
+      input: x,
+      dropdownStyle: f,
+      innerClassName: h,
+      showChevron: g,
+      size: y
+    }
+  );
+}, ne = ({
   options: c,
-  value: l,
+  value: i,
   onChange: p,
-  label: x = "Select an option",
+  label: d = "Select an option",
   placeholder: m = "Type to search...",
-  error: r,
-  input: h = !0,
+  error: n,
+  input: x = !0,
   className: f = "",
-  dropdownStyle: g = {},
-  innerClassName: b = "",
-  showChevron: y = !0
+  dropdownStyle: h = {},
+  innerClassName: g = "",
+  showChevron: y = !0,
+  size: b = "md"
 }) => {
-  const { t: n } = V(), [s, j] = N(!1), [a, k] = N(""), [i, C] = N(
-    l || null
-  ), v = S(null), M = S(null), { x: T, y: $, strategy: O, refs: d, context: w } = Y({
+  var T;
+  const { t: o } = Q(), [s, j] = $(!1), [v, C] = $(""), [l, S] = $(i || null), w = z(null), O = z(null), r = {
+    sm: {
+      container: "px-16 py-8",
+      text: "text-sm",
+      label: "text-sm",
+      error: "text-sm",
+      gap: "gap-8",
+      icon: "w-12 h-12"
+    },
+    md: {
+      container: "p-16",
+      text: "text-14",
+      label: "text-14",
+      error: "text-sm",
+      gap: "gap-8",
+      icon: "w-16 h-16"
+    }
+  }[b], { x: I, y: R, strategy: F, refs: N, context: k } = U({
     open: s,
     onOpenChange: j,
     middleware: [
@@ -61,150 +79,117 @@ const pe = ({
       ee(),
       te({ padding: 8 }),
       se({
-        apply({ availableHeight: t, elements: o }) {
-          Object.assign(o.floating.style, {
-            maxHeight: `${Math.min(t - 10, 300)}px`
+        apply({ availableHeight: e, elements: a }) {
+          Object.assign(a.floating.style, {
+            maxHeight: `${Math.min(e - 10, 300)}px`
           });
         },
         padding: 8
       }),
-      re({ element: M })
+      re({ element: O })
     ],
     placement: "bottom-start",
     whileElementsMounted: X
-  }), P = _(w), R = q(w), { getReferenceProps: z, getFloatingProps: F } = G([
-    P,
-    R
-  ]), { isMounted: I, styles: W } = J(w, {
+  }), M = Y(k), P = _(k), { getReferenceProps: E, getFloatingProps: W } = q([M, P]), { isMounted: A, styles: B } = G(k, {
     duration: { open: 200, close: 150 },
     initial: { opacity: 0, transform: "translateY(-4px)" }
   }), L = (() => {
-    const t = Array.isArray(c) ? c : [];
-    if (!a.trim()) return t;
-    const o = a.toLowerCase();
-    return t.filter((u) => {
-      const H = u.label.toLowerCase(), U = u.key.toLowerCase();
-      return H.includes(o) || U.includes(o);
-    });
-  })(), B = (t) => {
-    C(t), j(!1), k(""), p(t);
-  }, E = () => {
-    j(!s), !s && v.current && setTimeout(() => {
-      var t;
-      return (t = v.current) == null ? void 0 : t.focus();
+    const e = Array.isArray(c) ? c : [];
+    if (!v.trim()) return e;
+    const a = v.toLowerCase();
+    return e.filter(
+      (u) => u.label.toLowerCase().includes(a) || u.key.toLowerCase().includes(a)
+    );
+  })(), D = (e) => {
+    S(e), j(!1), C(""), p(e);
+  }, V = () => {
+    j(!s), !s && w.current && setTimeout(() => {
+      var e;
+      return (e = w.current) == null ? void 0 : e.focus();
     }, 100);
   };
-  K(() => {
-    C(l);
-  }, [l]);
-  const A = z({
-    onClick: E
-  }), D = n(m);
-  return /* @__PURE__ */ e.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${f}`, children: [
-    /* @__PURE__ */ e.jsx(
-      "h6",
-      {
-        className: `text-gray-600 font-600 group ${r ? "!text-red-500" : ""} text-label`,
-        children: x
-      }
-    ),
-    /* @__PURE__ */ e.jsxs(
+  J(() => {
+    S(i);
+  }, [i]);
+  const H = E({
+    onClick: V
+  });
+  return /* @__PURE__ */ t.jsxs("div", { className: `relative flex flex-col ${r.gap} ${f}`, children: [
+    d && /* @__PURE__ */ t.jsx("h6", { className: `text-gray-600 font-600 ${n ? "!text-red-500" : ""} ${r.label}`, children: d }),
+    /* @__PURE__ */ t.jsxs(
       "div",
       {
-        ref: d.setReference,
-        className: `${b} flex items-center justify-between bg-light rounded-full p-16 cursor-pointer
-          border transition-all duration-200 hover:border-blue-400
-          ${r ? "border-red-500 hover:border-red-600" : ""} ${s ? "border-blue-400" : "border-blue-100"}`,
-        ...A,
+        ref: N.setReference,
+        className: `${g} flex items-center justify-between bg-light rounded-full border transition-all duration-200 
+          ${r.container} cursor-pointer hover:border-blue-400
+          ${n ? "border-red-500 hover:border-red-600" : ""} 
+          ${s ? "border-blue-400" : "border-blue-100"}`,
+        ...H,
         children: [
-          i ? /* @__PURE__ */ e.jsx("div", { className: "flex items-center w-full", children: /* @__PURE__ */ e.jsx("span", { className: "flex-grow font-600 text-body-m", children: n(i.label) }) }) : /* @__PURE__ */ e.jsx("span", { className: "text-gray-400 font-600 text-body-m", children: D }),
-          y && /* @__PURE__ */ e.jsx(
+          /* @__PURE__ */ t.jsx("div", { className: "flex items-center w-full overflow-hidden", children: /* @__PURE__ */ t.jsx("span", { className: `flex-grow font-600 truncate ${r.text} ${l ? "" : "text-gray-400"}`, children: o(l ? l.label : m) }) }),
+          y && /* @__PURE__ */ t.jsx(
             "svg",
             {
-              className: `w-16 h-16 transition-transform ${s ? "transform rotate-180" : ""}`,
+              className: `${r.icon} transition-transform ${s ? "rotate-180" : ""}`,
               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"
-                }
-              )
+              children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    r && /* @__PURE__ */ e.jsx("p", { className: "mt-1 text-sm text-red-600", children: r }),
-    I && /* @__PURE__ */ e.jsxs(
+    n && /* @__PURE__ */ t.jsx("p", { className: `font-500 text-red-500 leading-none ${r.error}`, children: n }),
+    A && /* @__PURE__ */ t.jsxs(
       "div",
       {
-        ref: d.setFloating,
+        ref: N.setFloating,
         style: {
-          position: O,
-          top: $ ?? 0,
-          left: T ?? 0,
-          ...W,
-          width: d.reference.current instanceof Element ? d.reference.current.clientWidth : void 0,
+          position: F,
+          top: R ?? 0,
+          left: I ?? 0,
+          ...B,
+          width: (T = N.reference.current) == null ? void 0 : T.clientWidth,
           zIndex: 50,
-          ...g
+          ...h
         },
         className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
-        ...F(),
+        ...W(),
         children: [
-          h && /* @__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: "h-16 w-16 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(
+          x && /* @__PURE__ */ t.jsx("div", { className: "sticky top-0 bg-white p-8 border-b border-gray-100 z-20", children: /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ t.jsx("div", { className: "absolute inset-y-0 left-0 pl-12 flex items-center pointer-events-none", children: /* @__PURE__ */ t.jsx("svg", { className: "h-16 w-16 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t.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__ */ t.jsx(
               "input",
               {
-                ref: v,
+                ref: w,
                 type: "text",
                 className: "w-full py-8 pl-40 pr-12 rounded-full focus:outline-none text-body-s",
-                placeholder: n("search_options"),
-                value: a,
-                onChange: (t) => k(t.target.value),
-                onClick: (t) => t.stopPropagation(),
+                placeholder: o("search_options"),
+                value: v,
+                onChange: (e) => C(e.target.value),
+                onClick: (e) => e.stopPropagation(),
                 autoFocus: !0
               }
-            ),
-            a && /* @__PURE__ */ e.jsx(
-              "button",
-              {
-                className: "absolute inset-y-0 right-0 pr-12 flex items-center",
-                onClick: (t) => {
-                  t.stopPropagation(), k("");
-                },
-                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-[250px] overflow-y-auto", children: L.length > 0 ? /* @__PURE__ */ e.jsx("ul", { className: "py-4", children: L.map((t, o) => /* @__PURE__ */ e.jsx(
+          /* @__PURE__ */ t.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: L.length > 0 ? /* @__PURE__ */ t.jsx("ul", { className: "py-4", children: L.map((e, a) => /* @__PURE__ */ t.jsx(
             "li",
             {
-              className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer ${(i == null ? void 0 : i.key) === t.key ? "bg-blue-100/30 text-blue-500 font-medium" : ""}`,
+              className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer 
+                      ${(l == null ? void 0 : l.key) === e.key ? "bg-blue-100/30 text-blue-500 font-medium" : ""}`,
               onClick: (u) => {
-                u.stopPropagation(), B(t);
+                u.stopPropagation(), D(e);
               },
-              children: /* @__PURE__ */ e.jsx("span", { children: typeof t.label == "string" ? n(t.label) : t.expandedLabel || t.label })
+              children: /* @__PURE__ */ t.jsx("span", { className: r.text, children: typeof e.label == "string" ? o(e.label) : e.expandedLabel || e.label })
             },
-            `${t.key}-${o}`
-          )) }) : /* @__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 matches found for "',
-              a,
-              '"'
-            ] })
-          ] }) })
+            `${e.key}-${a}`
+          )) }) : /* @__PURE__ */ t.jsx("div", { className: "px-16 py-16 text-center text-gray-500", children: /* @__PURE__ */ t.jsx("p", { className: "text-body-s", children: "No matches found" }) }) })
         ]
       }
     )
   ] });
 };
 export {
-  pe as default
+  me as default
 };

package/dist/components/atoms/SelectInput/SelectInput.types.d.ts

@@ -15,6 +15,7 @@ export interface SelectInputProps<T extends FieldValues> {
     innerClassName?: string;
     dropdownStyle?: React.CSSProperties;
     showChevron?: boolean;
+    size?: 'sm' | 'md';
 }
 export interface SelectInputFieldProps {
     options: Option[];
@@ -28,4 +29,5 @@ export interface SelectInputFieldProps {
     innerClassName?: string;
     dropdownStyle?: React.CSSProperties;
     showChevron?: boolean;
+    size?: 'sm' | 'md';
 }

package/dist/components/atoms/StepIndicator/StepIndicator.d.ts

@@ -0,0 +1,5 @@
+import { StepProps } from '../../../types';
+declare const StepIndicator: React.FC<StepProps & {
+    sizeClass?: string;
+}>;
+export default StepIndicator;

package/dist/components/atoms/StepIndicator/StepIndicator.js

@@ -0,0 +1,58 @@
+import { j as o } from "../../../_virtual/jsx-runtime.js";
+import { resolveStepperColors as j } from "../../molecules/Stepper/Stepper.styles.js";
+import { faCheck as y } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { FontAwesomeIcon as g } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { motion as i } 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 w = ({
+  status: n,
+  shouldAnimate: e,
+  color: r,
+  index: s,
+  sizeClass: a
+}) => {
+  const t = n === "done", c = n === "focus", {
+    focusIconColor: l,
+    completedIconColor: m,
+    pendingIconColor: p,
+    focusBgColor: d,
+    completedBgColor: f,
+    pendingBgColor: x
+  } = j(r), u = t ? m : c ? l : p, C = t ? f : c ? d : x;
+  return /* @__PURE__ */ o.jsx(
+    i.div,
+    {
+      animate: { backgroundColor: C },
+      transition: { duration: e ? 0.3 : 0, ease: "easeOut" },
+      className: `size-[35px] rounded-full flex items-center justify-center font-bold text-sm ${a} ${u}`,
+      children: /* @__PURE__ */ o.jsx(I, { mode: "wait", children: t ? /* @__PURE__ */ o.jsx(
+        i.div,
+        {
+          initial: e ? { opacity: 0, scale: 0.5 } : { opacity: 1 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.5 },
+          className: "flex items-center justify-center",
+          children: /* @__PURE__ */ o.jsx(
+            g,
+            {
+              icon: y
+            }
+          )
+        },
+        "check"
+      ) : /* @__PURE__ */ o.jsx(
+        i.div,
+        {
+          initial: e ? { opacity: 0 } : { opacity: 1 },
+          animate: { opacity: 1 },
+          className: "leading-none flex items-center justify-center",
+          children: s + 1
+        },
+        "number"
+      ) })
+    }
+  );
+};
+export {
+  w as default
+};

package/dist/components/atoms/StepIndicator/index.d.ts

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