lawgic-dev-kit 0.21.6 → 0.22.2

package/README.md

@@ -1,54 +1,54 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
-```
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

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

@@ -3,10 +3,11 @@ type ColorVariant = "blue" | "aqua" | "red" | "gray";
 type Variant = "rounded" | "square";
 interface CheckboxProps extends React.ComponentPropsWithoutRef<"div"> {
     active?: boolean | string | number;
-    color?: ColorVariant;
     variant?: Variant;
-    className?: string;
+    color?: ColorVariant;
     size?: number;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 declare const Checkbox: React.FC<CheckboxProps>;
 export default Checkbox;

package/dist/components/atoms/Checkbox/Checkbox.js

@@ -1,42 +1,55 @@
-import { j as d } from "../../../_virtual/jsx-runtime.js";
-const c = ({
-  active: r,
+import { j as a } from "../../../_virtual/jsx-runtime.js";
+import { FontAwesomeIcon as h } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faCheck as m } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
+const $ = ({
+  active: d = !1,
+  variant: b = "rounded",
   color: n = "blue",
-  variant: l = "rounded",
-  className: u,
-  size: o = 16,
-  ...i
+  size: e = 20,
+  disabled: o = !1,
+  onClick: t,
+  className: i = "",
+  ...l
 }) => {
-  const t = {
-    blue: "border-blue-500 bg-blue-500",
-    aqua: "border-aqua-500 bg-aqua-500",
-    red: "border-red-500 bg-red-500",
-    gray: "border-gray-500 bg-gray-500"
-  }[n], a = {
-    rounded: "rounded-full",
-    square: "rounded-md"
-  }[l], s = (e) => ({
-    width: `${e}px`,
-    height: `${e}px`,
-    minWidth: `${e}px`,
-    minHeight: `${e}px`
-  });
-  return /* @__PURE__ */ d.jsx(
+  const r = !!d, s = (y) => {
+    o || t && t(y);
+  }, g = {
+    blue: r ? "bg-blue-500 border-blue-500" : "bg-white border-gray-300 hover:border-blue-400",
+    aqua: r ? "bg-aqua-500 border-aqua-500" : "bg-white border-gray-300 hover:border-aqua-400",
+    red: r ? "bg-red-500 border-red-500" : "bg-white border-gray-300 hover:border-red-400",
+    gray: r ? "bg-gray-500 border-gray-500" : "bg-white border-gray-300 hover:border-gray-400"
+  }, c = r ? "bg-gray-400 border-gray-400 opacity-60" : "bg-gray-100 border-gray-300 opacity-60", u = b === "rounded" ? "rounded-full" : "rounded-md";
+  return /* @__PURE__ */ a.jsx(
     "div",
     {
-      className: `relative transition-colors ease-in-out duration-150 flex items-center justify-center ${a} border-[1.5px] bg-white ${r ? t : "border-gray-400"} ${u}`,
-      style: s(o),
-      ...i,
-      children: /* @__PURE__ */ d.jsx(
-        "div",
+      className: `
+        relative flex items-center justify-center border-[1.5px] transition-all duration-150
+        ${u} 
+        ${o ? "cursor-not-allowed" : "cursor-pointer"}
+        ${o ? c : g[n]}
+        ${i}
+      `,
+      style: {
+        width: `${e}px`,
+        height: `${e}px`,
+        minWidth: `${e}px`,
+        minHeight: `${e}px`
+      },
+      onClick: s,
+      ...l,
+      children: r && /* @__PURE__ */ a.jsx(
+        h,
         {
-          className: `absolute transition-colors ease-in-out duration-150 ${a} size-12 ${r ? t : ""}`,
-          style: s(o * 0.7)
+          icon: m,
+          className: "text-white",
+          style: {
+            fontSize: `${e * 0.6}px`
+          }
         }
       )
     }
   );
 };
 export {
-  c as default
+  $ as default
 };

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: b = "base"
+}) => {
+  const {
+    field: { value: y, onChange: o },
+    fieldState: { error: s }
+  } = K({ name: i, control: p });
+  return /* @__PURE__ */ t.jsx(
+    ne,
+    {
+      options: c,
+      value: y,
+      onChange: o,
+      label: d,
+      placeholder: m,
+      error: s == null ? void 0 : s.message,
+      className: n,
+      input: x,
+      dropdownStyle: f,
+      innerClassName: h,
+      showChevron: g,
+      size: b
+    }
+  );
+}, 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: b = !0,
+  size: y = "base"
 }) => {
-  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"
+    },
+    base: {
+      container: "p-16",
+      text: "text-body-m",
+      label: "text-14",
+      error: "text-sm",
+      gap: "gap-8",
+      icon: "w-16 h-16"
+    }
+  }[y], { 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) }) }),
+          b && /* @__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' | 'base';
 }
 export interface SelectInputFieldProps {
     options: Option[];
@@ -28,4 +29,5 @@ export interface SelectInputFieldProps {
     innerClassName?: string;
     dropdownStyle?: React.CSSProperties;
     showChevron?: boolean;
+    size?: 'sm' | 'base';
 }

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';