lawgic-dev-kit 0.23.6 → 0.24.2

package/dist/components/atoms/CountryInput/CountryInput.js

@@ -1,5 +1,5 @@
 import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { useState as b, useRef as w, useEffect as P } from "react";
+import { useState as b, useRef as w, useEffect as _ } from "react";
 import { useController as se } from "react-hook-form";
 import { useFloating as re, useClick as le, useDismiss as ne, useInteractions as ae, useTransitionStyles as ie } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
 import { useTheme as ce } from "../../../hooks/useTheme.js";
@@ -9,22 +9,22 @@ import { offset as ue, flip as me, shift as fe, size as xe, arrow as he } from "
 const Le = ({
   countries: v = de,
   name: C,
-  control: _,
-  label: z = "select_a_country",
-  placeholder: F = "type_to_search",
+  control: z,
+  label: F = "select_a_country",
+  placeholder: M = "type_to_search",
   language: p = "en",
-  className: M = "",
-  translateKey: D
+  className: D = "",
+  translateKey: A
 }) => {
-  var O, I, R;
-  const { t: r } = ce(), { field: l, fieldState: A } = se({
+  var I, R, B;
+  const { t: r } = ce(), { field: l, fieldState: Y } = se({
     name: C,
-    control: _,
+    control: z,
     rules: { validate: {} },
     defaultValue: null
   }), [n, u] = b(!1), [c, j] = b(""), [o, S] = b(
     l.value || null
-  ), m = w(null), y = w(null), f = w(null), { x: Y, y: H, strategy: U, refs: N, context: x, placement: V, middlewareData: L } = re({
+  ), m = w(null), y = w(null), f = w(null), { x: H, y: U, strategy: V, refs: N, context: x, placement: W, middlewareData: L } = re({
     open: n,
     onOpenChange: u,
     middleware: [
@@ -43,10 +43,10 @@ const Le = ({
     ],
     placement: "bottom-start",
     whileElementsMounted: pe
-  }), W = le(x), X = ne(x), { getReferenceProps: q, getFloatingProps: G } = ae([
-    W,
-    X
-  ]), { isMounted: $, styles: J } = ie(x, {
+  }), X = le(x), q = ne(x), { getReferenceProps: G, getFloatingProps: J } = ae([
+    X,
+    q
+  ]), { isMounted: $, styles: K } = ie(x, {
     duration: {
       open: 200,
       close: 150
@@ -59,21 +59,21 @@ const Le = ({
     if (!c.trim()) return !0;
     const s = p === "es" && e.labelES ? e.labelES.toLowerCase() : e.label.toLowerCase(), i = e.code ? e.code.toLowerCase() : "";
     return s.includes(c.toLowerCase()) || i.includes(c.toLowerCase());
-  }), K = (e) => {
+  }), Q = (e) => {
     S(e), u(!1), j(""), l.onChange(e);
-  }, Q = () => {
+  }, Z = () => {
     u(!n), !n && m.current && setTimeout(() => {
       var e;
       (e = m.current) == null || e.focus();
     }, 100);
-  }, Z = () => {
+  }, ee = () => {
     setTimeout(() => {
       n || l.onBlur();
     }, 200);
   };
-  P(() => {
+  _(() => {
     S(l.value);
-  }, [l.value]), P(() => {
+  }, [l.value]), _(() => {
     const e = (s) => {
       f.current && !f.current.contains(s.target) && l.onBlur();
     };
@@ -84,26 +84,26 @@ const Le = ({
   const h = (e) => {
     var s;
     return e ? e.codeISO2 ? e.codeISO2.toLowerCase() : ((s = e.code) == null ? void 0 : s.toLowerCase()) || "" : "";
-  }, T = (O = L.arrow) == null ? void 0 : O.x, k = (I = L.arrow) == null ? void 0 : I.y, a = {
+  }, T = (I = L.arrow) == null ? void 0 : I.x, k = (R = L.arrow) == null ? void 0 : R.y, a = {
     top: "bottom",
     right: "left",
     bottom: "top",
     left: "right"
-  }[V.split("-")[0]], ee = q({
-    onClick: Q,
-    onBlur: Z
-  }), te = r(z), oe = r(F), d = (R = A.error) == null ? void 0 : R.message;
+  }[W.split("-")[0]], te = G({
+    onClick: Z,
+    onBlur: ee
+  }), O = r(F), oe = r(M), d = (B = Y.error) == null ? void 0 : B.message;
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
       ref: f,
-      className: `w-full relative flex flex-col gap-8 ${M}`,
+      className: `w-full relative flex flex-col gap-8 ${D}`,
       children: [
-        /* @__PURE__ */ t.jsx(
+        O && /* @__PURE__ */ t.jsx(
           "label",
           {
             className: `text-gray-600 font-600 group ${d && "!text-red-500"} text-label`,
-            children: te
+            children: O
           }
         ),
         /* @__PURE__ */ t.jsxs(
@@ -111,7 +111,7 @@ const Le = ({
           {
             ref: N.setReference,
             className: `flex items-center justify-between bg-light rounded-full p-16 cursor-pointer border transition-all duration-200 hover:border-blue-400 ${d && "border-red-500 hover:border-red-600"} ${$ ? "border-blue-400" : "border-blue-100"}`,
-            ...ee,
+            ...te,
             tabIndex: 0,
             children: [
               o != null && o.code ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center w-full gap-10", children: [
@@ -160,19 +160,19 @@ const Le = ({
             ]
           }
         ),
-        d && /* @__PURE__ */ t.jsx("p", { className: "mt-1 text-sm text-red-600", children: r(d, { x: r(D || "") || r(C) }) }),
+        d && /* @__PURE__ */ t.jsx("p", { className: "mt-1 text-sm text-red-600", children: r(d, { x: r(A || "") || r(C) }) }),
         $ && /* @__PURE__ */ t.jsxs(
           "div",
           {
             ref: N.setFloating,
             style: {
-              position: U,
-              top: H ?? 0,
-              left: Y ?? 0,
-              ...J
+              position: V,
+              top: U ?? 0,
+              left: H ?? 0,
+              ...K
             },
             className: "z-10 w-full bg-white border border-blue-400 rounded-3xl shadow-lg overflow-auto",
-            ...G(),
+            ...J(),
             children: [
               /* @__PURE__ */ t.jsx(
                 "div",
@@ -209,14 +209,14 @@ const Le = ({
                 }
               ) }),
               /* @__PURE__ */ t.jsx("div", { children: E.length > 0 ? /* @__PURE__ */ t.jsx("ul", { className: "flex flex-col", children: E.map((e, s) => {
-                var B;
-                const i = e.codeISO2 ? e.codeISO2.toLowerCase() : ((B = e.code) == null ? void 0 : B.toLowerCase()) || "";
+                var P;
+                const i = e.codeISO2 ? e.codeISO2.toLowerCase() : ((P = e.code) == null ? void 0 : P.toLowerCase()) || "";
                 return /* @__PURE__ */ t.jsxs(
                   "li",
                   {
                     className: "flex items-center gap-10 px-16 py-8 transition-all duration-200 hover:bg-blue-100/50 cursor-pointer",
                     onClick: (g) => {
-                      g.stopPropagation(), K(e);
+                      g.stopPropagation(), Q(e);
                     },
                     children: [
                       i && /* @__PURE__ */ t.jsx(

package/dist/components/atoms/CountrySelectInput/CountryDropdown.js

@@ -8,26 +8,26 @@ import { offset as se, flip as re, shift as le, size as ne, arrow as ae } from "
 const ge = ({
   countries: p,
   name: a,
-  control: u,
-  label: x = "select_a_country",
+  control: x,
+  label: m = "select_a_country",
   placeholder: g = "type_to_search",
   language: i = "en",
   className: l = ""
 }) => {
-  const { t: m } = D();
+  const { t: f } = D();
   return /* @__PURE__ */ t.jsx(
     K,
     {
       name: a,
-      control: u,
-      render: ({ field: { onChange: f, value: n }, fieldState: { error: r } }) => /* @__PURE__ */ t.jsx(
+      control: x,
+      render: ({ field: { onChange: h, value: n }, fieldState: { error: r } }) => /* @__PURE__ */ t.jsx(
         ie,
         {
           countries: p,
           value: n,
-          onChange: f,
-          label: m(x),
-          placeholder: m(g),
+          onChange: h,
+          label: f(m),
+          placeholder: f(g),
           language: i,
           error: r == null ? void 0 : r.message,
           className: l
@@ -38,15 +38,15 @@ const ge = ({
 }, ie = ({
   countries: p,
   value: a,
-  onChange: u,
-  label: x = "select_a_country",
+  onChange: x,
+  label: m = "select_a_country",
   placeholder: g = "type_to_search",
   language: i = "en",
   error: l,
-  className: m = ""
+  className: f = ""
 }) => {
   var _, I;
-  const { t: f } = D(), [n, r] = S(!1), [h, y] = S(""), [o, N] = S(
+  const { t: h } = D(), [n, r] = S(!1), [u, y] = S(""), [o, N] = S(
     a || null
   ), b = z(null), v = z(null), { x: F, y: P, strategy: M, refs: $, context: w, placement: A, middlewareData: L } = Q({
     open: n,
@@ -80,11 +80,11 @@ const ge = ({
       transform: "translateY(-4px)"
     }
   }), T = (Array.isArray(p) ? p : []).filter((e) => {
-    if (!h.trim()) return !0;
+    if (!u.trim()) return !0;
     const s = i === "es" && e.labelES ? e.labelES.toLowerCase() : e.label.toLowerCase(), d = e.code ? e.code.toLowerCase() : "";
-    return s.includes(h.toLowerCase()) || d.includes(h.toLowerCase());
+    return s.includes(u.toLowerCase()) || d.includes(u.toLowerCase());
   }), X = (e) => {
-    N(e), r(!1), y(""), u(e);
+    N(e), r(!1), y(""), x(e);
   }, q = () => {
     r(!n), !n && b.current && setTimeout(() => {
       var e;
@@ -105,12 +105,12 @@ const ge = ({
   }[A.split("-")[0]], G = H({
     onClick: q
   });
-  return /* @__PURE__ */ t.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${m}`, children: [
-    /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ t.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${f}`, children: [
+    m && /* @__PURE__ */ t.jsx(
       "label",
       {
         className: `text-gray-600 font-600 group ${l && "!text-red-500"} text-label`,
-        children: x
+        children: m
       }
     ),
     /* @__PURE__ */ t.jsxs(
@@ -142,7 +142,7 @@ const ge = ({
             ),
             /* @__PURE__ */ t.jsxs("span", { className: "flex-grow", children: [
               i === "es" && o.labelES ? o.labelES : o.label,
-              o.code ? ` (${o.code})` : f("select_country")
+              o.code ? ` (${o.code})` : h("select_country")
             ] })
           ] }) : /* @__PURE__ */ t.jsx("span", { className: "text-gray-500", children: g }),
           /* @__PURE__ */ t.jsx(
@@ -204,8 +204,8 @@ const ge = ({
               ref: b,
               type: "text",
               className: "w-full p-16",
-              placeholder: f("search") + "...",
-              value: h,
+              placeholder: h("search") + "...",
+              value: u,
               onChange: (e) => y(e.target.value),
               onClick: (e) => e.stopPropagation(),
               autoFocus: !0

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

@@ -5,19 +5,19 @@ import { FontAwesomeIcon as $ } from "../../../node_modules/@fortawesome/react-f
 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,
+  label: a,
   control: c,
   name: e,
   placeholder: p,
   className: x = "",
   disabled: t = !1,
   size: d = "md",
-  leftSide: a
+  leftSide: n
 }) => {
   const {
-    field: { value: n = "", onChange: m, ref: g, onBlur: f },
+    field: { value: u = "", onChange: m, ref: g, onBlur: f },
     fieldState: { error: o }
-  } = w({ name: e, control: c }), [s, h] = y(!1), { t: u } = N(), l = {
+  } = w({ name: e, control: c }), [s, h] = y(!1), { t: i } = N(), l = {
     sm: {
       container: "px-16 py-8",
       text: "text-sm",
@@ -39,11 +39,11 @@ const V = ({
       className: `flex flex-col group select-none ${l.gap} ${t && "cursor-not-allowed"} ${x}`,
       htmlFor: e,
       children: [
-        /* @__PURE__ */ r.jsx(
+        a && /* @__PURE__ */ r.jsx(
           "h6",
           {
             className: `text-gray-600 font-600 leading-none group ${o && "!text-red-500"} ${l.label} ${t && "text-gray-300"}`,
-            children: i
+            children: a
           }
         ),
         /* @__PURE__ */ r.jsxs(
@@ -59,7 +59,7 @@ const V = ({
 
 				w-full h-full rounded-full border
 
-				${n && !t ? "border-blue-200" : "border-blue-100"}
+				${u && !t ? "border-blue-200" : "border-blue-100"}
 				${!t && "group-hover:border-blue-300"}
 				${t && "cursor-not-allowed"}
 
@@ -68,7 +68,7 @@ const V = ({
 				group-disabled:bg-gray-500
 				`,
             children: [
-              a && a,
+              n && n,
               /* @__PURE__ */ r.jsx(
                 "input",
                 {
@@ -79,7 +79,7 @@ const V = ({
                   name: e,
                   disabled: t,
                   placeholder: p,
-                  value: n,
+                  value: u,
                   onChange: (b) => m(b.target.value),
                   onBlur: f,
                   ref: g,
@@ -97,7 +97,7 @@ const V = ({
             ]
           }
         ),
-        (o == null ? void 0 : o.message) && /* @__PURE__ */ r.jsx("h4", { className: `font-500 text-red-500 leading-none ${l.error}`, children: u(o.message, { x: u(e) }) })
+        (o == null ? void 0 : o.message) && /* @__PURE__ */ r.jsx("h4", { className: `font-500 text-red-500 leading-none ${l.error}`, children: i(o.message, { x: i(e) }) })
       ]
     }
   );

package/dist/components/atoms/PhoneInput/PhoneInput.js

@@ -1,5 +1,5 @@
 import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { useState as f, useRef as h, useEffect as A } from "react";
+import { useState as f, useRef as h, useEffect as H } from "react";
 import { useController as xe } from "react-hook-form";
 import { useFloating as be, useClick as we, useDismiss as Ce, useInteractions as ve, useTransitionStyles as ye } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
 import { FontAwesomeIcon as je } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
@@ -10,22 +10,22 @@ import { autoUpdate as Te } from "../../../node_modules/@floating-ui/dom/dist/fl
 import { offset as Ie, flip as $e, shift as Ee, size as Oe, arrow as Pe } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
 const Ye = ({
   name: v,
-  control: H,
-  label: Y = "phone_number",
-  placeholder: U = "enter_phone_number",
-  language: W = "en",
-  className: X = "",
-  translateKey: q,
+  control: Y,
+  label: U = "phone_number",
+  placeholder: W = "enter_phone_number",
+  language: X = "en",
+  className: q = "",
+  translateKey: G,
   countries: i = Le
 }) => {
-  var z, F, D, V;
+  var F, D, V, A;
   const { t: l } = Se(), { field: s, fieldState: y } = xe({
     name: v,
-    control: H,
+    control: Y,
     rules: { validate: {} }
-  }), j = ((z = s.value) == null ? void 0 : z.split(" ")) || [], G = j[0] || null, J = j[1] || "", K = i.find((e) => G === e.phone), [c, g] = f(!1), [d, N] = f(""), [r, S] = f(
-    K || null
-  ), [L, T] = f(J), [Q, I] = f(!1), x = h(null), $ = h(null), E = h(null), b = h(null), { x: Z, y: ee, strategy: te, refs: O, context: w, placement: oe, middlewareData: P } = be({
+  }), j = ((F = s.value) == null ? void 0 : F.split(" ")) || [], J = j[0] || null, K = j[1] || "", Q = i.find((e) => J === e.phone), [c, g] = f(!1), [d, N] = f(""), [r, S] = f(
+    Q || null
+  ), [L, T] = f(K), [Z, I] = f(!1), x = h(null), $ = h(null), E = h(null), b = h(null), { x: ee, y: te, strategy: oe, refs: O, context: w, placement: ne, middlewareData: P } = be({
     open: c,
     onOpenChange: g,
     middleware: [
@@ -44,10 +44,10 @@ const Ye = ({
     ],
     placement: "bottom-start",
     whileElementsMounted: Te
-  }), ne = we(w), re = Ce(w), { getReferenceProps: se, getFloatingProps: le } = ve([
-    ne,
-    re
-  ]), { isMounted: ae, styles: ie } = ye(w, {
+  }), re = we(w), se = Ce(w), { getReferenceProps: le, getFloatingProps: ae } = ve([
+    re,
+    se
+  ]), { isMounted: ie, styles: ce } = ye(w, {
     duration: {
       open: 200,
       close: 150
@@ -58,22 +58,22 @@ const Ye = ({
     }
   }), R = (Array.isArray(i) ? i : []).filter((e) => {
     if (!d.trim()) return !0;
-    const o = W === "es" && e.labelES ? e.labelES.toLowerCase() : e.label.toLowerCase(), n = e.code ? e.code.toLowerCase() : "", a = e.phone ? e.phone.toLowerCase() : "";
+    const o = X === "es" && e.labelES ? e.labelES.toLowerCase() : e.label.toLowerCase(), n = e.code ? e.code.toLowerCase() : "", a = e.phone ? e.phone.toLowerCase() : "";
     return o.includes(d.toLowerCase()) || n.includes(d.toLowerCase()) || a.includes(d.toLowerCase());
-  }), ce = (e) => {
+  }), de = (e) => {
     S(e), g(!1), N("");
     const o = `${e.phone} ${L}`;
     s.onChange(o), setTimeout(() => {
       var n;
       (n = E.current) == null || n.focus();
     }, 100);
-  }, de = (e) => {
+  }, ue = (e) => {
     const o = e.target.value;
     if (T(o), r) {
       const n = `${r.phone} ${o}`;
       s.onChange(n);
     }
-  }, ue = () => {
+  }, pe = () => {
     g(!c), !c && x.current && setTimeout(() => {
       var e;
       (e = x.current) == null || e.focus();
@@ -82,19 +82,19 @@ const Ye = ({
     setTimeout(() => {
       c || s.onBlur();
     }, 200);
-  }, pe = () => {
-    I(!0);
   }, me = () => {
+    I(!0);
+  }, fe = () => {
     I(!1);
   };
-  A(() => {
+  H(() => {
     if (s.value) {
       const e = s.value.split(" "), o = e[0] || "", n = e[1] || "", a = i.find(
         (m) => m.phone === o
       );
       a && S(a), T(n);
     }
-  }, [s.value, i]), A(() => {
+  }, [s.value, i]), H(() => {
     const e = (o) => {
       b.current && !b.current.contains(o.target) && s.onBlur();
     };
@@ -105,21 +105,21 @@ const Ye = ({
   const C = (e) => {
     var o;
     return e ? e.codeISO2 ? e.codeISO2.toLowerCase() : ((o = e.code) == null ? void 0 : o.toLowerCase()) || "" : "";
-  }, M = (F = P.arrow) == null ? void 0 : F.x, k = (D = P.arrow) == null ? void 0 : D.y, u = {
+  }, M = (D = P.arrow) == null ? void 0 : D.x, k = (V = P.arrow) == null ? void 0 : V.y, u = {
     top: "bottom",
     right: "left",
     bottom: "top",
     left: "right"
-  }[oe.split("-")[0]], fe = se({
-    onClick: ue,
+  }[ne.split("-")[0]], he = le({
+    onClick: pe,
     onBlur: B
-  }), _ = () => y.error ? "border-red-500" : Q || c ? "border-blue-400" : "border-blue-100", he = l(Y), ge = l(U), p = (V = y.error) == null ? void 0 : V.message;
-  return /* @__PURE__ */ t.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${X}`, children: [
-    /* @__PURE__ */ t.jsx(
+  }), _ = () => y.error ? "border-red-500" : Z || c ? "border-blue-400" : "border-blue-100", z = l(U), ge = l(W), p = (A = y.error) == null ? void 0 : A.message;
+  return /* @__PURE__ */ t.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${q}`, children: [
+    z && /* @__PURE__ */ t.jsx(
       "label",
       {
         className: `text-gray-600 font-600 group ${p && "!text-red-500"} text-label`,
-        children: he
+        children: z
       }
     ),
     /* @__PURE__ */ t.jsxs(
@@ -127,8 +127,8 @@ const Ye = ({
       {
         ref: b,
         className: "flex items-center w-full",
-        onMouseEnter: pe,
-        onMouseLeave: me,
+        onMouseEnter: me,
+        onMouseLeave: fe,
         children: [
           /* @__PURE__ */ t.jsxs(
             "div",
@@ -136,7 +136,7 @@ const Ye = ({
               ref: O.setReference,
               className: `flex items-center justify-between text-lg max-w-120 font-600 bg-light rounded-l-full p-16 cursor-pointer border border-r-0 transition-all duration-200 ${p ? "border-red-500" : _()}`,
               style: { minWidth: "140px" },
-              ...fe,
+              ...he,
               tabIndex: 0,
               children: [
                 r != null && r.code ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center truncate", children: [
@@ -182,26 +182,26 @@ const Ye = ({
               className: `placeholder:text-gray-400 flex-grow bg-light rounded-r-full font-600 text-body-m p-16 border transition-all duration-200 ${p ? "border-red-500" : _()}`,
               placeholder: ge,
               value: L,
-              onChange: de,
+              onChange: ue,
               onBlur: B
             }
           )
         ]
       }
     ),
-    p && /* @__PURE__ */ t.jsx("p", { className: "mt-1 text-sm text-red-600", children: l(p, { x: l(q || "") || v }) }),
-    ae && /* @__PURE__ */ t.jsxs(
+    p && /* @__PURE__ */ t.jsx("p", { className: "mt-1 text-sm text-red-600", children: l(p, { x: l(G || "") || v }) }),
+    ie && /* @__PURE__ */ t.jsxs(
       "div",
       {
         ref: O.setFloating,
         style: {
-          position: te,
-          top: ee ?? 0,
-          left: Z ?? 0,
-          ...ie
+          position: oe,
+          top: te ?? 0,
+          left: ee ?? 0,
+          ...ce
         },
         className: "z-10 w-fit bg-white border border-blue-400 rounded-3xl shadow-lg overflow-auto max-w-120",
-        ...le(),
+        ...ae(),
         children: [
           /* @__PURE__ */ t.jsx(
             "div",
@@ -245,7 +245,7 @@ const Ye = ({
               {
                 className: "flex items-center justify-between gap-10 px-16 py-8 transition-all duration-200 hover:bg-blue-100/50 cursor-pointer",
                 onClick: (m) => {
-                  m.stopPropagation(), ce(e);
+                  m.stopPropagation(), de(e);
                 },
                 children: [
                   n && /* @__PURE__ */ t.jsx(

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextAreaProps } from './TextArea.types';
+import { FieldValues } from 'react-hook-form';
+declare const TextArea: <T extends FieldValues = FieldValues>({ label, control, name, placeholder, className, disabled, translateKey, size, rows, ...props }: TextAreaProps<T>) => React.ReactElement;
+export default TextArea;

package/dist/components/atoms/TextArea/TextArea.js

@@ -0,0 +1,92 @@
+import { j as l } from "../../../_virtual/jsx-runtime.js";
+import { useController as j } from "react-hook-form";
+import { useTheme as N } from "../../../hooks/useTheme.js";
+import "react";
+const T = ({
+  label: s,
+  control: u,
+  name: r,
+  placeholder: x,
+  className: c = "",
+  disabled: e = !1,
+  translateKey: d = "",
+  size: i = "md",
+  rows: p = 4,
+  ...g
+}) => {
+  const {
+    field: { value: n = "", onChange: m, ref: f, onBlur: h },
+    fieldState: { error: t }
+  } = j({ name: r, control: u }), { t: a } = 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"
+    }
+  }[i], b = a(r), $ = a(d);
+  return /* @__PURE__ */ l.jsxs(
+    "label",
+    {
+      className: `flex flex-col group select-none ${o.gap} ${e && "cursor-not-allowed"} ${c}`,
+      htmlFor: r,
+      children: [
+        s && /* @__PURE__ */ l.jsx(
+          "h6",
+          {
+            className: `text-gray-600 font-600 leading-none group ${t && "text-red-500!"} ${o.label} ${e && "text-gray-300"}`,
+            children: s
+          }
+        ),
+        /* @__PURE__ */ l.jsx(
+          "div",
+          {
+            className: `
+          ${o.container}
+
+          ${t && "border-red-500!"}
+
+          !bg-blue-50
+
+          rounded-2xl border
+
+          ${n && !e ? "border-blue-200" : "border-blue-100"}
+          ${!e && "group-hover:border-blue-300"}
+          ${e && "cursor-not-allowed"}
+
+          group-focus-within:border-blue-500 transition-colors duration-200 ease-in-out
+        `,
+            children: /* @__PURE__ */ l.jsx(
+              "textarea",
+              {
+                id: r,
+                name: r,
+                disabled: e,
+                placeholder: x,
+                value: n,
+                onChange: (y) => m(y.target.value),
+                onBlur: h,
+                ref: f,
+                rows: p,
+                className: `bg-transparent w-full font-600 placeholder:font-600 select-text ${o.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed resize-none outline-hidden`,
+                ...g
+              }
+            )
+          }
+        ),
+        (t == null ? void 0 : t.message) && /* @__PURE__ */ l.jsx("h4", { className: `font-500 text-red-500 leading-none ${o.error}`, children: a(t.message, { x: $ || b }) })
+      ]
+    }
+  );
+};
+export {
+  T as default
+};

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

@@ -0,0 +1,12 @@
+import { Control, FieldValues, Path } from 'react-hook-form';
+export type TextAreaProps<T extends FieldValues = FieldValues> = {
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    translateKey?: string;
+    size?: 'sm' | 'md';
+    rows?: number;
+    control: Control<T>;
+    name: Path<T>;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;

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

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