mcr-design-systems 1.0.11 → 1.0.13

package/dist/components/Icon/helper/index.d.ts

@@ -1 +1 @@
-export type IconName = 'activity' | 'activity-heart' | 'alarm-clock' | 'alarm-clock-check' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'align-left' | 'align-right' | 'bell-01' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'download-01' | 'eye' | 'eye-off' | 'filter-funnel-01' | 'help-circle' | 'info-circle' | 'loading-01' | 'minus' | 'plus' | 'search-lg' | 'search-md' | 'user-03' | 'x-circle' | 'x-close';
+export type IconName = 'activity' | 'activity-heart' | 'alarm-clock' | 'alarm-clock-check' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'align-left' | 'align-right' | 'bell-01' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'download-01' | 'eye' | 'eye-off' | 'filter-funnel-01' | 'help-circle' | 'info-circle' | 'loading-01' | 'minus' | 'plus' | 'search-lg' | 'search-md' | 'user-03' | 'x-circle' | 'x-close' | 'refresh-cw_01';

package/dist/components/InputBase/index.js

@@ -1,10 +1,10 @@
-import { jsx as i, jsxs as I } from "react/jsx-runtime";
-import m, { forwardRef as A, useState as D, useMemo as B, useEffect as H, memo as R } from "react";
-import { inputBaseVariants as _, textAreaVariants as F } from "./variants.js";
-import K from "../Icon/Icon.js";
-import { cn as p } from "../../shared/utils/cn.js";
-import { dataTestId as W } from "../../shared/utils/dataTestId.js";
-const q = (n) => {
+import { jsxs as I, jsx as u } from "react/jsx-runtime";
+import r, { forwardRef as D, useState as H, useMemo as B, useEffect as R, memo as _ } from "react";
+import { inputBaseVariants as F, textAreaVariants as K } from "./variants.js";
+import W from "../Icon/Icon.js";
+import { cn as f } from "../../shared/utils/cn.js";
+import { dataTestId as q } from "../../shared/utils/dataTestId.js";
+const A = (n) => {
   switch (n) {
     case "sm":
       return 16;
@@ -15,127 +15,134 @@ const q = (n) => {
     default:
       return 20;
   }
-}, N = A(
+}, N = D(
   ({
     disabled: n,
     readOnly: a,
-    endAdornment: d,
-    className: w,
-    color: T,
-    sizeVariant: f = "md",
-    startAdornment: y,
-    InputComponent: b,
+    endAdornment: l,
+    className: V,
+    color: w,
+    sizeVariant: v = "md",
+    startAdornment: b,
+    InputComponent: y,
     containerProps: z,
-    containerRef: C,
-    width: S,
-    iconsSize: V,
+    containerRef: T,
+    width: C,
+    iconsSize: S,
     error: j,
     clearText: M,
     optionalProps: h,
     // inputSize,
     ...e
   }, k) => {
-    const [L, v] = D(!1), g = V || q(f), c = B(
+    const [L, g] = H(!1), o = S || A(v), m = B(
       () => `inputbase-input-${Math.random().toString(36).substring(2, 9)}`,
       []
-    ), l = B(
+    ), p = B(
       () => `inputbase-textarea-${Math.random().toString(36).substring(2, 9)}`,
       []
     );
-    H(() => {
+    R(() => {
       const t = e.value;
       if (t !== void 0) {
-        v(String(t).length > 0);
+        g(String(t).length > 0);
         return;
       }
-      const s = () => {
-        const r = e.type === "textarea" ? document.getElementById(l) : document.getElementById(c);
-        if (r) {
-          const E = () => {
-            v(r.value.length > 0);
+      const i = () => {
+        const c = e.type === "textarea" ? document.getElementById(p) : document.getElementById(m);
+        if (c) {
+          const x = () => {
+            g(c.value.length > 0);
           };
-          return E(), r.addEventListener("input", E), () => {
-            r.removeEventListener("input", E);
+          return x(), c.addEventListener("input", x), () => {
+            c.removeEventListener("input", x);
           };
         }
-      }, o = s();
-      if (!o) {
-        const r = setTimeout(() => {
-          s();
+      }, d = i();
+      if (!d) {
+        const c = setTimeout(() => {
+          i();
         }, 100);
-        return () => clearTimeout(r);
+        return () => clearTimeout(c);
       }
-      return o;
-    }, [e.type, e.value, c, l]);
-    const x = M && L ? /* @__PURE__ */ i(
-      K,
+      return d;
+    }, [e.type, e.value, m, p]);
+    const E = M && L ? /* @__PURE__ */ u(
+      W,
       {
         name: "x-circle",
         variant: "solid",
-        size: g,
-        className: "cursor-pointer hover:opacity-70 transition-opacity text-fg-neutral-subtle",
+        size: o,
+        className: "cursor-pointer text-fg-neutral-subtle",
         onClick: () => {
-          v(!1);
-          const t = e.type === "textarea" ? document.getElementById(l) : document.getElementById(c);
-          if (t)
+          g(!1);
+          const t = e.type === "textarea" ? document.getElementById(p) : document.getElementById(m);
+          if (t) {
             if (t.value = "", e.onChange) {
-              const s = {
+              const i = {
                 target: t,
                 currentTarget: t,
                 type: "change",
                 bubbles: !0
               };
-              e.onChange(s);
+              e.onChange(i);
             } else {
-              const s = new Event("input", { bubbles: !0 }), o = new Event("change", { bubbles: !0 });
-              t.dispatchEvent(s), t.dispatchEvent(o);
+              const i = new Event("input", { bubbles: !0 }), d = new Event("change", { bubbles: !0 });
+              t.dispatchEvent(i), t.dispatchEvent(d);
             }
+            t?.focus();
+          }
         },
         "aria-label": "Clear text"
       }
-    ) : null, u = x && d ? /* @__PURE__ */ I("div", { className: "flex items-center gap-1", children: [
-      x,
-      d
-    ] }) : x || d, $ = {
+    ) : null, s = E && l ? /* @__PURE__ */ I("div", { className: "flex items-center gap-2", children: [
+      E,
+      r.isValidElement(l) ? r.cloneElement(
+        l,
+        {
+          size: o
+        }
+      ) : l
+    ] }) : E || l, $ = {
       sm: "h-4",
       md: "h-5",
       lg: "h-6"
     };
-    return /* @__PURE__ */ i("div", { className: "relative justify-center items-center", children: /* @__PURE__ */ I(
+    return /* @__PURE__ */ u("div", { className: "relative justify-center items-center", children: /* @__PURE__ */ I(
       "div",
       {
-        ...W("InputBase"),
-        ref: C,
+        ...q("InputBase"),
+        ref: T,
         ...z,
-        className: _({
+        className: F({
           disabled: !!n,
-          className: w,
-          color: T,
-          size: e?.type === "textarea" ? void 0 : f,
+          className: V,
+          color: w,
+          size: e?.type === "textarea" ? void 0 : v,
           readOnly: !!a,
           error: !!j
         }),
-        style: { minWidth: S ?? "100%" },
+        style: { minWidth: C ?? "100%" },
         children: [
-          y && /* @__PURE__ */ i(
+          b && /* @__PURE__ */ u(
             "div",
             {
-              className: p("flex cursor-pointer items-center justify-center", {
+              className: f("flex cursor-pointer items-center justify-center", {
                 "color-icon-disabled": n || a,
                 "cursor-pointer": !n || a
               }),
-              children: m.cloneElement(y, {
+              children: r.cloneElement(b, {
                 // color: disabled || readOnly ? 'disabled' : 'currentColor',
-                size: g
+                size: o
               })
             }
           ),
-          b ? m.cloneElement(
-            b,
+          y ? r.cloneElement(
+            y,
             {
-              id: e?.type === "textarea" ? l : void 0,
-              className: p(
-                e?.type === "textarea" ? F({
+              id: e?.type === "textarea" ? p : void 0,
+              className: f(
+                e?.type === "textarea" ? K({
                   size: h?.sizeTextArea,
                   disabled: !!n,
                   readOnly: !!a
@@ -147,13 +154,13 @@ const q = (n) => {
               ...e
             },
             null
-          ) : /* @__PURE__ */ i(
+          ) : /* @__PURE__ */ u(
             "input",
             {
-              id: e.type === "textarea" ? void 0 : c,
-              className: p(
+              id: e.type === "textarea" ? void 0 : m,
+              className: f(
                 "w-full appearance-none bg-transparent font-sans outline-none",
-                $[f || "md"]
+                $[v || "md"]
               ),
               ref: k,
               disabled: n || a,
@@ -163,20 +170,19 @@ const q = (n) => {
               }
             }
           ),
-          u && /* @__PURE__ */ i(
+          s && /* @__PURE__ */ u(
             "div",
             {
-              className: p("max-h flex items-center justify-center", {
+              className: f("max-h flex items-center justify-center", {
                 "color-icon-disabled": n || a,
                 "cursor-pointer": !n || a
               }),
-              children: m.isValidElement(u) ? m.cloneElement(
-                u,
+              children: r.isValidElement(s) && s.type === "div" ? s : r.isValidElement(s) ? r.cloneElement(
+                s,
                 {
-                  // color: disabled ? 'disabled' : 'default',
-                  size: g
+                  size: o
                 }
-              ) : u
+              ) : s
             }
           )
         ]
@@ -185,7 +191,7 @@ const q = (n) => {
   }
 );
 N.displayName = "InputBase";
-const P = R(N);
+const P = _(N);
 export {
   P as default
 };

package/dist/components/InputPassword/index.js

@@ -5,49 +5,49 @@ import I from "../TextField/HelperText.js";
 import v from "../Icon/Icon.js";
 const N = y(
   ({
-    helperText: o,
-    error: n = !1,
-    showHelperIcon: r = !0,
+    helperText: r,
+    error: a = !1,
+    showHelperIcon: n = !0,
     helperIconCustom: l,
     helperTextClassName: d,
     defaultVisible: m = !1,
-    visible: s,
+    visible: t,
     onVisibilityChange: c,
-    className: f,
-    ...t
-  }, u) => {
-    const [p, w] = g(m), i = s !== void 0 ? s : p, b = () => {
-      if (t.disabled)
+    className: u,
+    ...s
+  }, f) => {
+    const [p, w] = g(m), o = t !== void 0 ? t : p, b = () => {
+      if (s.disabled)
         return;
-      const a = !i;
-      s === void 0 && w(a), c?.(a);
+      const i = !o;
+      t === void 0 && w(i), c?.(i);
     };
     return /* @__PURE__ */ x("div", { className: "w-full [&_input[type='password']::-ms-reveal]:hidden [&_input[type='password']::-ms-clear]:hidden", children: [
       /* @__PURE__ */ e(
         h,
         {
-          ...t,
-          ref: u,
-          type: i ? "text" : "password",
-          error: n,
-          className: f,
+          ...s,
+          ref: f,
+          type: o ? "text" : "password",
+          error: a,
+          className: u,
+          clearText: !0,
           endAdornment: /* @__PURE__ */ e(
             v,
             {
-              name: i ? "eye" : "eye-off",
-              size: 24,
-              className: `transition-colors ${t.disabled ? "bg-bg-input-disabled cursor-not-allowed" : "cursor-pointer hover:text-fg-neutral-rest text-fg-neutral-rest"}`,
+              name: o ? "eye" : "eye-off",
+              className: `transition-colors ${s.disabled ? "bg-bg-input-disabled cursor-not-allowed" : "cursor-pointer hover:text-fg-neutral-rest text-fg-neutral-rest"}`,
               onClick: b
             }
           )
         }
       ),
-      o && /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(
+      r && /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(
         I,
         {
-          text: o,
-          error: n,
-          haveIcon: r,
+          text: r,
+          error: a,
+          haveIcon: n,
           iconsCustom: l,
           className: d
         }

package/dist/components/PIN/index.js

@@ -1,116 +1,116 @@
-import { jsxs as B, jsx as p } from "react/jsx-runtime";
-import { forwardRef as E, useState as F, useRef as H, useEffect as j, useCallback as w } from "react";
-import { pinInputVariants as S, pinVariants as $ } from "./variants.js";
-import { Typography as g } from "../Typography/index.js";
-import q from "../TextField/HelperText.js";
-import { cn as v } from "../../shared/utils/cn.js";
-import { dataTestId as G } from "../../shared/utils/dataTestId.js";
-const J = E(
+import { jsxs as z, jsx as m } from "react/jsx-runtime";
+import { forwardRef as B, useState as E, useRef as F, useEffect as d, useCallback as y } from "react";
+import { pinInputVariants as H, pinVariants as S } from "./variants.js";
+import { Typography as $ } from "../Typography/index.js";
+import g from "../TextField/HelperText.js";
+import { cn as j } from "../../shared/utils/cn.js";
+import { dataTestId as q } from "../../shared/utils/dataTestId.js";
+const C = B(
   ({
-    length: a = 4,
-    mask: k = !1,
-    error: i,
-    loading: I = !1,
+    length: r = 4,
+    mask: v = !1,
+    error: u,
+    loading: w = !1,
     disabled: n = !1,
-    onChange: f,
-    onComplete: m,
-    value: y = "",
-    autoFocus: N = !0,
-    className: A,
-    label: V,
-    helperText: d,
-    size: D = "medium",
-    ...P
-  }, b) => {
-    const [c, l] = F(
-      Array.from({ length: a }, (s, t) => y[t] || "")
-    ), e = H([]);
-    j(() => {
-      const s = Array.from({ length: a }, (t, r) => y[r] || "");
-      l(s);
-    }, [y, a]), j(() => {
-      N && !n && e.current[0] && e.current[0].focus();
-    }, [N, n]);
-    const K = w(
-      (s, t) => {
-        const r = t.replace(/\D/g, "").slice(-1), o = [...c];
-        o[s] = r, l(o);
-        const u = o.join("");
-        f?.(u), r && s < a - 1 && e.current[s + 1]?.focus(), u.length === a && m?.(u);
+    onChange: c,
+    onComplete: G,
+    value: p = "",
+    autoFocus: I = !0,
+    className: k,
+    label: N,
+    helperText: V,
+    size: A = "medium",
+    ...D
+  }, P) => {
+    const [o, l] = E(
+      Array.from({ length: r }, (t, s) => p[s] || "")
+    ), a = F([]);
+    d(() => {
+      const t = Array.from({ length: r }, (s, e) => p[e] || "");
+      l(t);
+    }, [p, r]), d(() => {
+      I && !n && a.current[0] && a.current[0].focus();
+    }, [I, n]);
+    const b = y(
+      (t, s) => {
+        const e = s.replace(/\D/g, "").slice(-1), f = [...o];
+        f[t] = e, l(f);
+        const i = f.join("");
+        c?.(i), e && t < r - 1 && a.current[t + 1]?.focus();
       },
-      [c, a, f, m]
-    ), R = w(
-      (s, t) => {
-        if (t.key === "Backspace") {
-          if (!c[s] && s > 0) {
-            const r = [...c];
-            r[s - 1] = "", l(r), e.current[s - 1]?.focus(), f?.(r.join(""));
-          } else if (c[s]) {
-            const r = [...c];
-            r[s] = "", l(r), f?.(r.join(""));
+      [o, r, c]
+    ), K = y(
+      (t, s) => {
+        if (s.key === "Backspace") {
+          if (!o[t] && t > 0) {
+            const e = [...o];
+            e[t - 1] = "", l(e), a.current[t - 1]?.focus(), c?.(e.join(""));
+          } else if (o[t]) {
+            const e = [...o];
+            e[t] = "", l(e), c?.(e.join(""));
           }
-        } else t.key === "ArrowLeft" && s > 0 ? e.current[s - 1]?.focus() : t.key === "ArrowRight" && s < a - 1 ? e.current[s + 1]?.focus() : t.key === "v" && (t.metaKey || t.ctrlKey) && (t.preventDefault(), navigator.clipboard.readText().then((r) => {
-          const o = r.replace(/\D/g, "").slice(0, a), u = Array.from({ length: a }, (O, z) => o[z] || "");
-          l(u), f?.(u.join(""));
-          const M = Math.min(o.length, a - 1);
-          e.current[M]?.focus(), o.length === a && m?.(o);
+        } else s.key === "ArrowLeft" && t > 0 ? a.current[t - 1]?.focus() : s.key === "ArrowRight" && t < r - 1 ? a.current[t + 1]?.focus() : s.key === "v" && (s.metaKey || s.ctrlKey) && (s.preventDefault(), navigator.clipboard.readText().then((e) => {
+          const f = e.replace(/\D/g, "").slice(0, r), i = Array.from({ length: r }, (J, M) => f[M] || "");
+          l(i), c?.(i.join(""));
+          const L = Math.min(f.length, r - 1);
+          a.current[L]?.focus();
         }));
       },
-      [c, a, f, m]
-    ), _ = w((s) => {
-      e.current[s]?.select();
-    }, []), { id: T } = G("PIN"), L = i ? "error" : n ? "disabled" : I ? "loading" : "default";
-    return /* @__PURE__ */ B("div", { ref: b, className: v($({ className: A })), ...P, children: [
-      V && /* @__PURE__ */ p(
-        g,
+      [o, r, c]
+    ), R = y((t) => {
+      a.current[t]?.select();
+    }, []), { id: _ } = q("PIN"), T = u ? "error" : n ? "disabled" : w ? "loading" : "default";
+    return /* @__PURE__ */ z("div", { ref: P, className: j(S({ className: k })), ...D, children: [
+      N && /* @__PURE__ */ m(
+        $,
         {
           variants: "label",
           size: "sm",
           color: "fg-neutral-subtle",
           className: "mb-xs",
-          children: V
+          children: N
         }
       ),
-      /* @__PURE__ */ p("div", { className: "flex gap-xs", "data-test-id": T, children: Array.from({ length: a }).map((s, t) => /* @__PURE__ */ p(
+      /* @__PURE__ */ m("div", { className: "flex gap-xs", "data-test-id": _, children: Array.from({ length: r }).map((t, s) => /* @__PURE__ */ m(
         "input",
         {
-          ref: (r) => {
-            e.current[t] = r;
+          ref: (e) => {
+            a.current[s] = e;
           },
-          type: k ? "password" : "text",
+          type: v ? "password" : "text",
           inputMode: "numeric",
           pattern: "[0-9]*",
           maxLength: 1,
-          value: c[t],
-          disabled: n || I,
-          className: v(
-            S({
-              size: D,
-              state: L
+          value: o[s],
+          disabled: n || w,
+          className: j(
+            H({
+              size: A,
+              state: T
             })
           ),
-          onChange: (r) => K(t, r.target.value),
-          onKeyDown: (r) => R(t, r),
-          onFocus: () => _(t),
-          "aria-label": `PIN digit ${t + 1}`,
+          onChange: (e) => b(s, e.target.value),
+          onKeyDown: (e) => K(s, e),
+          onFocus: () => R(s),
+          "aria-label": `PIN digit ${s + 1}`,
           autoComplete: "off"
         },
-        t
+        s
       )) }),
-      (d || i) && /* @__PURE__ */ p(
-        q,
+      (V || u) && /* @__PURE__ */ m(
+        g,
         {
-          text: i || d,
-          error: !!i,
-          haveIcon: !i,
+          text: u || V,
+          error: !!u,
+          haveIcon: !u,
           className: "justify-start"
         }
       )
     ] });
   }
 );
-J.displayName = "PIN";
+C.displayName = "PIN";
 export {
-  J as PIN,
-  J as default
+  C as PIN,
+  C as default
 };

package/dist/components/PhoneInput/helper/variants.d.ts

@@ -4,14 +4,17 @@ export declare const phoneInputVariants: import('tailwind-variants').TVReturnTyp
         sm: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
         md: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
         lg: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
     };
     opened: {
@@ -43,14 +46,17 @@ export declare const phoneInputVariants: import('tailwind-variants').TVReturnTyp
         sm: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
         md: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
         lg: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
     };
     opened: {
@@ -82,14 +88,17 @@ export declare const phoneInputVariants: import('tailwind-variants').TVReturnTyp
         sm: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
         md: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
         lg: {
             countryButton: string;
             inputContainer: string;
+            input: string;
         };
     };
     opened: {

package/dist/components/PhoneInput/helper/variants.js

@@ -1,23 +1,26 @@
-import { tv as r } from "../../../node_modules/tailwind-variants/dist/index.js";
-const n = r({
+import { tv as e } from "../../../node_modules/tailwind-variants/dist/index.js";
+const t = e({
   slots: {
     countryButton: "border border-input bg-bg-input flex items-center hover:cursor-pointer border-r-0",
     inputContainer: "min-w-[177px] flex-1 border border-input bg-bg-input hover:border-input-active focus-within:border-input-active focus-within:border-2 flex items-center",
-    input: "bg-transparent outline-none w-full h-full font-primary text-base-lg font-normal leading-base-lg text-fg-neutral-main placeholder:text-fg-neutral-subtlest"
+    input: "bg-transparent outline-none w-full h-full font-primary text-fg-neutral-main placeholder:text-fg-neutral-subtlest"
   },
   variants: {
     size: {
       sm: {
         countryButton: "h-lg rounded-l-lg rounded-bl-lg py-none px-xs-2 gap-xs-3",
-        inputContainer: "h-lg rounded-r-lg rounded-br-lg px-sm py-sm-2 "
+        inputContainer: "h-lg rounded-r-lg rounded-br-lg px-sm py-sm-2 ",
+        input: "text-base-md font-normal leading-base-md placeholder:text-base-md"
       },
       md: {
         countryButton: "h-xl rounded-l-lg rounded-bl-lg py-none px-xs gap-xs-3",
-        inputContainer: "h-xl rounded-r-lg rounded-br-lg px-sm-2 py-[10px]"
+        inputContainer: "h-xl rounded-r-lg rounded-br-lg px-sm-2 py-[10px]",
+        input: "text-base-md font-normal leading-base-md placeholder:text-base-md"
       },
       lg: {
         countryButton: "h-xl-2 rounded-l-lg rounded-bl-lg py-none px-sm-2 gap-xs-3",
-        inputContainer: "h-xl-2 rounded-r-lg rounded-br-lg py-xs-2 px-xs"
+        inputContainer: "h-xl-2 rounded-r-lg rounded-br-lg py-xs-2 px-xs",
+        input: "text-base-lg font-normal leading-base-lg placeholder:text-base-lg"
       }
     },
     opened: {
@@ -48,5 +51,5 @@ const n = r({
   }
 });
 export {
-  n as phoneInputVariants
+  t as phoneInputVariants
 };

package/dist/components/PhoneInput/index.js

@@ -1,25 +1,25 @@
 import { jsxs as l, jsx as s } from "react/jsx-runtime";
 import * as n from "react";
 import G from "../../node_modules/libphonenumber-js/examples.mobile.json.js";
-import { cn as C } from "../../shared/utils/cn.js";
+import { cn as b } from "../../shared/utils/cn.js";
 import { COUNTRIES_DATA as Q } from "../../shared/flags/countries-data.js";
 import { FLAG_POSITIONS as W } from "../../shared/flags/flag-positions.js";
 import { FLAG_BASE64 as Y } from "../../shared/flags/base64.js";
 import { phoneInputVariants as q } from "./helper/variants.js";
 import { Dropdown as H } from "../Dropdown/index.js";
-import { Typography as N } from "../Typography/index.js";
+import { Typography as v } from "../Typography/index.js";
 import J from "../Icon/Icon.js";
 import K from "./FagDefault.js";
 import { getExampleNumber as X } from "../../node_modules/libphonenumber-js/min/exports/getExampleNumber.js";
 import { AsYouType as Z } from "../../node_modules/libphonenumber-js/min/exports/AsYouType.js";
-const v = ({
+const F = ({
   countryCode: o
 }) => {
   const t = W[o];
   return /* @__PURE__ */ s("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ s(K, {}) : /* @__PURE__ */ s(
     "div",
     {
-      className: C(),
+      className: b(),
       style: {
         backgroundImage: `url('${Y}')`,
         backgroundPosition: `${t.x}px ${t.y}px`,
@@ -44,7 +44,7 @@ const v = ({
     );
   }
   return "Enter phone number";
-}, F = (o, t) => {
+}, P = (o, t) => {
   if (!o || !o.trim()) return "";
   try {
     const c = new Z(t.toUpperCase()), d = o.replace(/[^\d]/g, "");
@@ -64,29 +64,29 @@ const v = ({
     placeholder: d,
     countries: a = Q,
     showSearch: f = !1,
-    searchPlaceholder: P = "Search countries",
-    className: O,
-    size: z = "md",
-    "data-testid": D,
-    error: R,
+    searchPlaceholder: O = "Search countries",
+    className: D,
+    size: h = "md",
+    "data-testid": R,
+    error: k,
     // placeholder = 'Enter phone number',
-    ...k
-  }, A) => {
-    const [b, L] = n.useState(!1), [T, y] = n.useState(!1), [i, V] = n.useState(
+    ...A
+  }, L) => {
+    const [y, z] = n.useState(!1), [T, w] = n.useState(!1), [i, V] = n.useState(
       t || a[0]?.code || "us"
-    ), [h, w] = n.useState(""), S = n.useRef(null), I = b, g = n.useCallback((e) => {
-      L(e), e || w("");
+    ), [g, S] = n.useState(""), I = n.useRef(null), N = y, x = n.useCallback((e) => {
+      z(e), e || S("");
     }, []), m = n.useMemo(
       () => a.find((e) => e.code === i) || a[0],
       [a, i]
-    ), _ = n.useMemo(() => d || ee(i), [i, d]), x = q({
-      size: z,
-      opened: I,
+    ), _ = n.useMemo(() => d || ee(i), [i, d]), C = q({
+      size: h,
+      opened: N,
       inputFocused: T
     }), $ = n.useCallback(
       (e) => {
-        if (o?.(e), g(!1), V(e.code), t && t.trim()) {
-          const r = F(
+        if (o?.(e), x(!1), V(e.code), t && t.trim()) {
+          const r = P(
             t,
             e.code
           );
@@ -97,20 +97,20 @@ const v = ({
           });
         }
       },
-      [o, g, t, c]
+      [o, x, t, c]
     ), E = n.useMemo(() => a.filter(
-      (e) => e.name.toLowerCase().includes(h.toLowerCase()) || e.code.toLowerCase().includes(h.toLowerCase())
+      (e) => e.name.toLowerCase().includes(g.toLowerCase()) || e.code.toLowerCase().includes(g.toLowerCase())
     ).map((e) => ({
       label: e.name,
       value: e.code,
-      icon: /* @__PURE__ */ s(v, { countryCode: e.code }),
+      icon: /* @__PURE__ */ s(F, { countryCode: e.code }),
       startIconSize: "auto",
       endIconSize: "auto",
-      endIcon: /* @__PURE__ */ l(N, { variants: "body", size: "sm", color: "fg-neutral-subtle", children: [
+      endIcon: /* @__PURE__ */ l(v, { variants: "body", size: "sm", color: "fg-neutral-subtle", children: [
         "+",
         e.dial_code
       ] })
-    })), [a, h]), B = n.useCallback(
+    })), [a, g]), B = n.useCallback(
       (e) => {
         const r = e.target.value, p = t, M = r.length < p.length;
         if (r.length > 20) {
@@ -127,7 +127,7 @@ const v = ({
             });
             return;
           }
-          const j = u ? F(u, i) : "";
+          const j = u ? P(u, i) : "";
           c?.({
             formatted: j,
             raw: u,
@@ -137,12 +137,12 @@ const v = ({
       },
       [m, c, i, t]
     );
-    return /* @__PURE__ */ l("div", { className: C("flex items-center", O), ref: S, children: [
+    return /* @__PURE__ */ l("div", { className: b("flex items-center", D), ref: I, children: [
       /* @__PURE__ */ s(
         H,
         {
-          open: b,
-          onOpenChange: g,
+          open: y,
+          onOpenChange: x,
           items: E,
           value: i,
           onValueChange: (e) => {
@@ -154,36 +154,36 @@ const v = ({
           align: "start",
           "data-testid": "align-start-dropdown",
           search: f,
-          searchPlaceholder: P,
+          searchPlaceholder: O,
           enableVirtualization: !0,
           onSearchChange: (e) => {
-            w(e);
+            S(e);
           },
-          width: S.current?.clientWidth || "auto",
-          children: /* @__PURE__ */ l("div", { className: x.countryButton(), children: [
-            /* @__PURE__ */ s(v, { countryCode: i }),
+          width: I.current?.clientWidth || "auto",
+          children: /* @__PURE__ */ l("div", { className: C.countryButton(), children: [
+            /* @__PURE__ */ s(F, { countryCode: i }),
             /* @__PURE__ */ l("div", { className: "flex gap-xs-4", children: [
-              /* @__PURE__ */ l(N, { variants: "body", size: "md", children: [
+              /* @__PURE__ */ l(v, { variants: "body", size: "md", children: [
                 "+",
                 m.dial_code
               ] }),
-              /* @__PURE__ */ s(J, { name: I ? "chevron-up" : "chevron-down", size: 16 })
+              /* @__PURE__ */ s(J, { name: N ? "chevron-up" : "chevron-down", size: 16 })
             ] })
           ] })
         }
       ),
-      /* @__PURE__ */ s("div", { className: x.inputContainer({ error: R }), children: /* @__PURE__ */ s(
+      /* @__PURE__ */ s("div", { className: C.inputContainer({ error: k, size: h }), children: /* @__PURE__ */ s(
         "input",
         {
-          ...k,
-          ref: A,
-          className: C(x.input()),
+          ...A,
+          ref: L,
+          className: b(C.input({ size: h })),
           placeholder: _,
           value: t,
           onChange: B,
-          onFocus: () => y(!0),
-          onBlur: () => y(!1),
-          "data-testid": D
+          onFocus: () => w(!0),
+          onBlur: () => w(!1),
+          "data-testid": R
         }
       ) })
     ] });

package/dist/components/TextField/HelperText.js

@@ -1,44 +1,50 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import "react";
 import { Typography as f } from "../Typography/index.js";
 import s from "../Icon/Icon.js";
-const d = ({
-  text: t,
-  error: r = !1,
-  haveIcon: n = !0,
-  iconsCustom: l,
-  className: m,
-  iconsSize: e = 16
-}) => t ? /* @__PURE__ */ c("div", { className: `flex items-center gap-1 ${m || ""}`, children: [
-  r && (l || /* @__PURE__ */ a(
-    s,
-    {
-      name: "alert-octagon",
-      className: "text-fg-accent-error",
-      size: typeof e == "number" ? e : 16,
-      variant: "solid"
-    }
-  )),
-  n && !r && /* @__PURE__ */ a(
-    s,
-    {
-      name: "help-circle",
-      variant: "line",
-      className: "text-fg-neutral-subtle",
-      size: typeof e == "number" ? e : 16
-    }
-  ),
-  /* @__PURE__ */ a("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ a(
-    f,
-    {
-      variants: "paragraph",
-      size: "sm",
-      color: r ? "fg-accent-error" : "fg-neutral-subtle",
-      className: "font-body-sm",
-      children: t
-    }
-  ) })
-] }) : null;
+const p = ({
+  text: l,
+  error: a = !1,
+  haveIcon: i = !0,
+  iconsCustom: r,
+  className: n,
+  iconsSize: t = 16
+}) => l ? /* @__PURE__ */ e(
+  "div",
+  {
+    className: `self-stretch inline-flex flex-col justify-start items-start ${n || ""}`,
+    children: /* @__PURE__ */ c("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
+      a && (r ? /* @__PURE__ */ e("div", { className: "w-5 h-5 relative", children: r }) : /* @__PURE__ */ e("div", { className: "w-5 h-5 relative", children: /* @__PURE__ */ e(
+        s,
+        {
+          name: "alert-octagon",
+          className: "text-fg-accent-error",
+          variant: "solid",
+          size: typeof t == "number" ? t : 16
+        }
+      ) })),
+      i && !a && /* @__PURE__ */ e("div", { className: "w-5 h-5 relative", children: /* @__PURE__ */ e(
+        s,
+        {
+          name: "help-circle",
+          variant: "line",
+          className: "text-fg-neutral-subtle",
+          size: typeof t == "number" ? t : 16
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "flex-1 justify-start text-left flex flex-wrap items-center gap-0", children: /* @__PURE__ */ e(
+        f,
+        {
+          variants: "body",
+          size: "md",
+          color: a ? "fg-accent-error-strong" : "fg-neutral-subtle",
+          className: "inline",
+          children: l
+        }
+      ) })
+    ] })
+  }
+) : null;
 export {
-  d as default
+  p as default
 };

package/dist/components/TextField/index.js

@@ -1,51 +1,51 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { forwardRef as T, memo as p } from "react";
+import { forwardRef as b, memo as p } from "react";
 import I from "../InputBase/index.js";
-import { Typography as n } from "../Typography/index.js";
+import { Typography as m } from "../Typography/index.js";
 import H from "./HelperText.js";
 import "clsx";
 import "tailwind-merge";
 import { dataTestId as A } from "../../shared/utils/dataTestId.js";
-const d = T(
+const d = b(
   ({
-    label: s,
+    label: n,
     helpText: x,
-    error: l,
+    error: s,
     color: f,
     disabled: o,
     readOnly: u,
-    width: c,
+    width: l,
     type: i,
     iconsCustom: g,
-    iconsSize: m = 24,
+    iconsSize: c,
     fontSize: h,
     optionalProps: e,
     indicatorLength: v,
     haveIcon: y,
     // inputSize = 'md',
-    clearText: b,
+    clearText: N,
     ...t
-  }, N) => /* @__PURE__ */ r(
+  }, T) => /* @__PURE__ */ r(
     "div",
     {
       style: {
-        width: c
+        width: l
       },
       ...A("TextField"),
       children: [
         /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
-          s && /* @__PURE__ */ r("div", { className: "mb-1 flex items-center gap-[2px]", children: [
+          n && /* @__PURE__ */ r("div", { className: "mb-1 flex items-center gap-[2px]", children: [
             /* @__PURE__ */ a(
-              n,
+              m,
               {
                 variants: "action",
                 size: "sm",
                 color: "fg-neutral-subtle",
-                children: s
+                children: n
               }
             ),
             t.required && /* @__PURE__ */ a(
-              n,
+              m,
               {
                 variants: "action",
                 size: "sm",
@@ -56,7 +56,7 @@ const d = T(
             )
           ] }),
           i === "textarea" && e?.showIndicator && /* @__PURE__ */ r(
-            n,
+            m,
             {
               variants: "action",
               size: "sm",
@@ -74,15 +74,15 @@ const d = T(
         /* @__PURE__ */ a(
           I,
           {
-            ref: N,
+            ref: T,
             disabled: o,
             readOnly: u,
-            width: c,
+            width: l,
             type: i,
             fontSize: h,
-            iconsSize: typeof m == "number" ? m : 24,
+            iconsSize: c,
             optionalProps: e,
-            clearText: b,
+            clearText: N,
             InputComponent: i === "textarea" ? /* @__PURE__ */ a(
               "textarea",
               {
@@ -96,7 +96,7 @@ const d = T(
               }
             ) : void 0,
             ...t,
-            color: l ? "error" : f || "primary"
+            color: s ? "error" : f || "primary"
           }
         ),
         /* @__PURE__ */ a(
@@ -104,9 +104,9 @@ const d = T(
           {
             className: "mt-1",
             text: x,
-            error: l,
+            error: s,
             haveIcon: y,
-            iconsSize: m,
+            iconsSize: c,
             iconsCustom: g
           }
         )

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcr-design-systems",
   "private": false,
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",