mcr-design-systems 1.0.11 → 1.0.14

package/dist/components/Icon/generated/RefreshCw01Icon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface RefreshCw01IconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * RefreshCw01 icon component
+ */
+export declare const RefreshCw01Icon: React.FC<RefreshCw01IconProps>;
+export default RefreshCw01Icon;

package/dist/components/Icon/generated/RefreshCw01Icon.js

@@ -0,0 +1,54 @@
+import { jsx as f } from "react/jsx-runtime";
+import u from "react";
+const A = ({
+  size: i = 24,
+  color: s = "currentColor",
+  className: r,
+  style: o,
+  onClick: g,
+  "aria-label": c,
+  title: a
+}) => {
+  const C = u.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 12C2 6.47715 6.47715 2 12 2C14.7624 2 17.2645 3.12166 19.0732 4.93164C19.7128 5.5716 20.3982 6.3619 21 7.09375V4C21 3.44772 21.4477 3 22 3C22.5523 3 23 3.44772 23 4V10C23 10.5523 22.5523 11 22 11H16C15.4477 11 15 10.5523 15 10C15 9.44772 15.4477 9 16 9H19.9678C19.2756 8.13143 18.4167 7.10277 17.6592 6.34473C16.2102 4.89477 14.2104 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C15.6457 20 18.7244 17.5604 19.6875 14.2227C19.8407 13.6921 20.3952 13.386 20.9258 13.5391C21.4563 13.6923 21.7625 14.2468 21.6094 14.7773C20.4058 18.9482 16.5605 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const n = e.getAttribute("fill"), l = e.getAttribute("stroke");
+      n && n !== "none" && e.setAttribute("fill", s), l && l !== "none" && e.setAttribute("stroke", s);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, s, r]);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: g,
+      "aria-label": c || "refresh-cw-01 icon",
+      title: a,
+      dangerouslySetInnerHTML: { __html: C }
+    }
+  );
+};
+export {
+  A as RefreshCw01Icon,
+  A as default
+};

package/dist/components/Icon/generated/RefreshCw01SolidIcon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface RefreshCw01SolidIconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * RefreshCw01Solid icon component
+ */
+export declare const RefreshCw01SolidIcon: React.FC<RefreshCw01SolidIconProps>;
+export default RefreshCw01SolidIcon;

package/dist/components/Icon/generated/RefreshCw01SolidIcon.js

@@ -0,0 +1,54 @@
+import { jsx as f } from "react/jsx-runtime";
+import u from "react";
+const A = ({
+  size: i = 24,
+  color: s = "currentColor",
+  className: r,
+  style: o,
+  onClick: g,
+  "aria-label": c,
+  title: a
+}) => {
+  const C = u.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6589 6.34511C16.21 4.89514 14.2105 4 12.0001 4C7.58183 4 4.0001 7.58172 4.0001 12C4.0001 16.4183 7.58183 20 12.0001 20C15.6458 20 18.7244 17.5605 19.6875 14.2227C19.8407 13.6921 20.395 13.3861 20.9256 13.5392C21.4562 13.6923 21.7623 14.2466 21.6091 14.7773C20.4056 18.9481 16.5606 22 12.0001 22C6.47726 22 2.0001 17.5228 2.0001 12C2.0001 6.47715 6.47726 2 12.0001 2C14.7625 2 17.2649 3.12139 19.0736 4.93138C19.7097 5.56789 20.3942 6.35772 21 7.09434V4C21 3.44772 21.4477 3 22 3C22.5523 3 23 3.44772 23 4V10C23 10.5523 22.5523 11 22 11H16C15.4477 11 15 10.5523 15 10C15 9.44772 15.4477 9 16 9H19.9693C19.2852 8.14144 18.4232 7.10987 17.6589 6.34511Z" fill="black"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const n = e.getAttribute("fill"), l = e.getAttribute("stroke");
+      n && n !== "none" && e.setAttribute("fill", s), l && l !== "none" && e.setAttribute("stroke", s);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, s, r]);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: g,
+      "aria-label": c || "refresh-cw-01 icon",
+      title: a,
+      dangerouslySetInnerHTML: { __html: C }
+    }
+  );
+};
+export {
+  A as RefreshCw01SolidIcon,
+  A as default
+};

package/dist/components/Icon/generated/RefreshCw_01Icon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface RefreshCw_01IconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * RefreshCw_01 icon component
+ */
+export declare const RefreshCw_01Icon: React.FC<RefreshCw_01IconProps>;
+export default RefreshCw_01Icon;

package/dist/components/Icon/generated/RefreshCw_01SolidIcon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface RefreshCw_01SolidIconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * RefreshCw_01Solid icon component
+ */
+export declare const RefreshCw_01SolidIcon: React.FC<RefreshCw_01SolidIconProps>;
+export default RefreshCw_01SolidIcon;

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' | 'refresh-cw-01' | 'search-lg' | 'search-md' | 'user-03' | 'x-circle' | 'x-close';

package/dist/components/Icon/helper/mapicon.js

@@ -68,7 +68,9 @@ const i = {
   "chevron-left-double-solid": () => import("../generated/ChevronLeftDoubleSolidIcon.js"),
   "chevron-left-solid": () => import("../generated/ChevronLeftSolidIcon.js"),
   "circle-solid": () => import("../generated/CircleSolidIcon.js"),
-  "user-03-solid": () => import("../generated/User03SolidIcon.js")
+  "user-03-solid": () => import("../generated/User03SolidIcon.js"),
+  "refresh-cw-01": () => import("../generated/RefreshCw01Icon.js"),
+  "refresh-cw-01-solid": () => import("../generated/RefreshCw01SolidIcon.js")
 };
 export {
   i as MAP_ICON

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
         }