mcr-design-systems 1.0.10 → 1.0.13

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