mcr-design-systems 1.0.45 → 1.0.46

package/dist/components/Card/index.d.ts

@@ -74,4 +74,4 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Variant
  * </Card>
  * ```
  */
-export default function Card({ variant, title, titleIcon, actionButton, actionIcon, children, className, showHeader, headerGap, contentPadding, contentGap, width, maxHeaderHeight, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default function Card({ variant, title, titleIcon, actionButton, actionIcon, children, className, showHeader, headerGap, contentPadding, contentGap, width, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/index.js

@@ -1,44 +1,42 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import "react";
-import { cardHeaderTitleVariants as N, cardHeaderActionVariants as g, cardHeaderVariants as V, cardContentVariants as b, cardVariants as k } from "./helper/variants.js";
+import { cardHeaderTitleVariants as v, cardHeaderActionVariants as u, cardHeaderVariants as N, cardContentVariants as y, cardVariants as V } from "./helper/variants.js";
 import { cn as n } from "../../shared/utils/cn.js";
-import { dataTestId as j } from "../../shared/utils/dataTestId.js";
-import { Typography as C } from "../Typography/index.js";
-function A({
-  variant: p = "default",
+import { dataTestId as k } from "../../shared/utils/dataTestId.js";
+import { Typography as b } from "../Typography/index.js";
+function z({
+  variant: f = "default",
   title: a,
   titleIcon: e,
-  actionButton: i,
+  actionButton: m,
   actionIcon: s,
-  children: t,
-  className: c,
-  showHeader: f = !0,
-  headerGap: x = "xs",
-  contentPadding: o = "md",
-  contentGap: u = "md",
+  children: l,
+  className: t,
+  showHeader: p = !0,
+  headerGap: c = "xs",
+  contentPadding: x = "md",
+  contentGap: o = "md",
   width: d,
-  maxHeaderHeight: m,
-  ...v
+  ...g
 }) {
-  const y = d ? { width: typeof d == "number" ? `${d}px` : d } : {}, h = m ? { maxHeight: typeof m == "number" ? `${m}px` : m } : {};
-  return /* @__PURE__ */ l(
+  const h = d ? { width: typeof d == "number" ? `${d}px` : d } : {};
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: n(k({ variant: p }), c),
-      style: y,
-      ...j("Card"),
-      ...v,
+      className: n(V({ variant: f }), t),
+      style: h,
+      ...k("Card"),
+      ...g,
       children: [
-        f && (a || e || i || s) && /* @__PURE__ */ l(
+        p && (a || e || m || s) && /* @__PURE__ */ i(
           "div",
           {
-            className: n(V({ gap: x })),
-            style: h,
+            className: n(N({ gap: c }), t),
             children: [
-              (a || e) && /* @__PURE__ */ r("div", { className: N(), children: /* @__PURE__ */ l("div", { className: "flex items-center gap-xs", children: [
+              (a || e) && /* @__PURE__ */ r("div", { className: v(), children: /* @__PURE__ */ i("div", { className: "flex items-center gap-xs", children: [
                 e && /* @__PURE__ */ r("div", { className: "flex-shrink-0 text-fg-neutral-main", children: e }),
                 a && /* @__PURE__ */ r(
-                  C,
+                  b,
                   {
                     variants: "heading-xs",
                     size: "xs",
@@ -47,22 +45,22 @@ function A({
                   }
                 )
               ] }) }),
-              (i || s) && /* @__PURE__ */ l("div", { className: g({ gap: "xs" }), children: [
-                i,
+              (m || s) && /* @__PURE__ */ i("div", { className: u({ gap: "xs" }), children: [
+                m,
                 s && /* @__PURE__ */ r("div", { className: "flex-shrink-0 text-fg-neutral-main", children: s })
               ] })
             ]
           }
         ),
-        t && /* @__PURE__ */ r(
+        l && /* @__PURE__ */ r(
           "div",
           {
-            className: b({
-              padding: o,
-              gap: u
+            className: y({
+              padding: x,
+              gap: o
             }),
             style: { wordWrap: "break-word", overflowWrap: "break-word" },
-            children: t
+            children: l
           }
         )
       ]
@@ -70,5 +68,5 @@ function A({
   );
 }
 export {
-  A as default
+  z as default
 };

package/dist/components/Modal/index.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { useRef as s, useEffect as m } from "react";
 import { modal as F } from "./helper/variants.js";
 import { cn as n } from "../../shared/utils/cn.js";
@@ -26,40 +26,40 @@ function _({
   footer: v,
   ...R
 }) {
-  const y = s(null), j = s(null), c = s(null), {
+  const p = s(null), j = s(null), c = s(null), {
     overlay: L,
-    content: T,
-    header: z,
-    titleContainer: D,
-    title: P,
+    content: P,
+    header: T,
+    titleContainer: z,
+    title: D,
     closeButton: S,
     body: I,
-    footer: p,
+    footer: y,
     actionsContainer: M,
     loadingContainer: V
   } = F();
   m(() => {
     if (!i || !u) return;
-    const r = (A) => {
+    const e = (A) => {
       A.key === "Escape" && o();
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [i, u, o]), m(() => {
     if (!i) return;
-    const r = window.getComputedStyle(document.body).overflow;
+    const e = window.getComputedStyle(document.body).overflow;
     return document.body.style.overflow = "hidden", () => {
-      document.body.style.overflow = r;
+      document.body.style.overflow = e;
     };
   }, [i]), m(() => {
     t && i && c.current?.scrollTo({ top: 0, behavior: "instant" });
   }, [t, i, c]);
-  const q = (r) => {
-    w && r.target === y.current && !a && o();
+  const q = (e) => {
+    w && e.target === p.current && !a && o();
   };
-  return i ? /* @__PURE__ */ e(
+  return i ? /* @__PURE__ */ r(
     "div",
     {
-      ref: y,
+      ref: p,
       className: n(L(), B),
       onClick: q,
       ...G("modal"),
@@ -68,24 +68,24 @@ function _({
         "div",
         {
           ref: j,
-          className: n(T({ size: x }), g),
+          className: n(P({ size: x }), g),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": "modal-title",
           "aria-describedby": k ? "modal-subtitle" : void 0,
           children: [
-            /* @__PURE__ */ d("div", { className: z(), children: [
-              /* @__PURE__ */ e("div", { className: D(), children: /* @__PURE__ */ e(
+            /* @__PURE__ */ d("div", { className: T(), children: [
+              /* @__PURE__ */ r("div", { className: z(), children: /* @__PURE__ */ r(
                 J,
                 {
                   id: "modal-title",
                   variants: "heading-xs",
                   size: "xs",
-                  className: P(),
+                  className: D(),
                   children: b
                 }
               ) }),
-              N && /* @__PURE__ */ e(
+              N && /* @__PURE__ */ r(
                 f,
                 {
                   variant: "outline",
@@ -93,7 +93,9 @@ function _({
                   iconOnly: !0,
                   icon: "x-close",
                   type: "button",
-                  onClick: o,
+                  onClick: (e) => {
+                    e.stopPropagation(), o();
+                  },
                   disabled: a,
                   className: S(),
                   "aria-label": "Close modal"
@@ -108,37 +110,37 @@ function _({
                   "overflow-hidden": t
                 }),
                 children: [
-                  t && /* @__PURE__ */ e("div", { className: V(), children: /* @__PURE__ */ e("div", { className: "w-[44px] h-[44px] p-sm-2 bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e(H, { width: 20, thickness: 3 }) }) }),
+                  t && /* @__PURE__ */ r("div", { className: V(), children: /* @__PURE__ */ r("div", { className: "w-[44px] h-[44px] p-sm-2 bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ r(H, { width: 20, thickness: 3 }) }) }),
                   C
                 ]
               }
             ),
-            l && /* @__PURE__ */ e("div", { className: n(p(), h), children: /* @__PURE__ */ e("div", { className: M(), children: /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
-              /* @__PURE__ */ e(
+            l && /* @__PURE__ */ r("div", { className: n(y(), h), children: /* @__PURE__ */ r("div", { className: M(), children: /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ r(
                 f,
                 {
                   disabled: l.cancelBtn?.isDisabled || a,
                   variant: "outline",
-                  onClick: (r) => {
-                    r.stopPropagation(), l.cancelBtn?.onClick?.();
+                  onClick: (e) => {
+                    e.stopPropagation(), l.cancelBtn?.onClick?.();
                   },
                   children: l.cancelBtn?.label || "Cancel"
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ r(
                 f,
                 {
                   loading: a,
                   disabled: l.confirmBtn?.isDisabled || t || a,
                   variant: l?.confirmBtn?.isConfirm ? "danger" : "primary",
-                  onClick: (r) => {
-                    r.stopPropagation(), l.confirmBtn?.onClick?.();
+                  onClick: (e) => {
+                    e.stopPropagation(), l.confirmBtn?.onClick?.();
                   },
                   children: l.confirmBtn?.label || "Confirm"
                 }
               )
             ] }) }) }),
-            v && /* @__PURE__ */ e("div", { className: n(p(), h), children: v })
+            v && /* @__PURE__ */ r("div", { className: n(y(), h), children: v })
           ]
         }
       )

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

@@ -47,7 +47,7 @@ const t = e({
       true: [
         "bg-bg-selected-rest text-fg-selected-rest",
         "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2",
-        "before:w-[2px] before:h-[16px] before:bg-fg-selected-rest",
+        "before:w-[2px] before:h-[16px] before:bg-fg-brand-rest",
         "before:rounded-tr-xs before:rounded-br-xs"
       ],
       false: "text-fg-neutral-subtle hover:bg-bg-neutral-subtle"

package/dist/components/TextField/HelperText.js

@@ -1,45 +1,45 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import "react";
-import { Typography as c } from "../Typography/index.js";
-import n from "../Icon/Icon.js";
-import u from "clsx";
-const j = ({
-  text: f,
+import { Typography as n } from "../Typography/index.js";
+import f from "../Icon/Icon.js";
+import g from "clsx";
+const T = ({
+  text: m,
   error: l = !1,
-  haveIcon: d = !0,
-  iconsCustom: m,
+  haveIcon: h = !0,
+  iconsCustom: o,
   className: r,
   iconsSize: t = 16,
-  customContent: o,
+  customContent: d,
   requirementsList: a
 }) => {
-  if (o)
+  if (d)
     return /* @__PURE__ */ e(
       "div",
       {
         className: `self-stretch inline-flex flex-col justify-start items-start ${r || ""}`,
-        children: o
+        children: d
       }
     );
   if (a) {
-    const { items: x } = a, h = a.showTitle !== !1, p = a.title || "Requirements:";
+    const { items: x } = a, u = a.showTitle !== !1, p = a.title || "Requirements:", c = x.every((s) => s.isValid);
     return /* @__PURE__ */ i("div", { className: `mt-1 space-y-1 ${r || ""}`, children: [
-      h && /* @__PURE__ */ i("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
+      u && /* @__PURE__ */ i("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
         /* @__PURE__ */ e(
-          n,
+          f,
           {
-            name: "alert-octagon",
-            className: "text-fg-accent-error",
+            name: c ? "check-circle" : "alert-octagon",
+            className: c ? "text-fg-accent-success" : "text-fg-accent-error",
             variant: "solid",
             size: typeof t == "number" ? t : 16
           }
         ),
         /* @__PURE__ */ e(
-          c,
+          n,
           {
             variants: "body",
             size: "sm",
-            color: "fg-accent-error",
+            color: c ? "fg-accent-success" : "fg-accent-error",
             className: "font-medium",
             children: p
           }
@@ -48,23 +48,23 @@ const j = ({
       /* @__PURE__ */ e("ul", { className: "list-disc ml-9", children: x.map((s) => /* @__PURE__ */ e(
         "li",
         {
-          className: u("", {
+          className: g("", {
             "marker:text-fg-accent-success text-fg-accent-success": s.isValid,
             "marker:text-fg-accent-error text-fg-accent-error": !s.isValid
           }),
-          children: /* @__PURE__ */ e(c, { variants: "body", size: "sm", className: "text-inherit", children: s.text })
+          children: /* @__PURE__ */ e(n, { variants: "body", size: "sm", className: "text-inherit", children: s.text })
         },
         s.id
       )) })
     ] });
   }
-  return f ? /* @__PURE__ */ e(
+  return m ? /* @__PURE__ */ e(
     "div",
     {
       className: `self-stretch inline-flex flex-col justify-start items-start ${r || ""}`,
       children: /* @__PURE__ */ i("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
-        l && (m || /* @__PURE__ */ e(
-          n,
+        l && (o || /* @__PURE__ */ e(
+          f,
           {
             name: "alert-octagon",
             className: "text-fg-accent-error",
@@ -72,8 +72,8 @@ const j = ({
             size: typeof t == "number" ? t : 16
           }
         )),
-        d && !l && /* @__PURE__ */ e(
-          n,
+        h && !l && /* @__PURE__ */ e(
+          f,
           {
             name: "help-circle",
             variant: "line",
@@ -82,13 +82,13 @@ const j = ({
           }
         ),
         /* @__PURE__ */ e("div", { className: "flex-1 justify-start text-left flex flex-wrap items-center gap-0", children: /* @__PURE__ */ e(
-          c,
+          n,
           {
             variants: "body",
             size: "sm",
             color: l ? "fg-accent-error" : "fg-neutral-subtle",
             className: "inline",
-            children: f
+            children: m
           }
         ) })
       ] })
@@ -96,5 +96,5 @@ const j = ({
   ) : null;
 };
 export {
-  j as default
+  T as default
 };

package/package.json

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