mcr-design-systems 1.0.46 → 1.0.50

package/README.md

@@ -93,6 +93,133 @@ To check for code quality issues:
 yarn lint
 ```
 
+## Publishing to NPM
+
+This project includes an automated publishing script that handles version management, building, and publishing to npm.
+
+### Prerequisites for Publishing
+
+Before using the publishing script, ensure you have:
+
+1. **NPM Authentication**: You must be logged into npm with publishing rights
+
+   ```bash
+   npm login
+   ```
+
+2. **Clean Working Directory**: All changes must be committed to git
+
+3. **Correct Branch**: Should be on `main` or `master` branch (script will warn if not)
+
+4. **Node.js and npm**: Must be installed and working
+
+5. **Git Repository**: Must be initialized and connected to a remote
+
+### Using the Publishing Script
+
+The `publish.sh` script automates the entire publishing process:
+
+```bash
+# Increment patch version (1.0.0 → 1.0.1) - Default
+./publish.sh
+
+# Increment minor version (1.0.0 → 1.1.0)
+./publish.sh minor
+
+# Increment major version (1.0.0 → 2.0.0)
+./publish.sh major
+
+# Set specific version
+./publish.sh 1.5.0
+```
+
+### What the Script Does
+
+The publishing script performs these steps automatically:
+
+1. **Safety Checks**:
+   - Verifies npm authentication
+   - Checks for clean working directory
+   - Confirms you're on the correct branch
+   - Validates all dependencies are installed
+
+2. **Quality Assurance**:
+   - Runs linting (if available)
+   - Builds the library (`yarn build-lib`)
+   - Ensures build completes successfully
+
+3. **Version Management**:
+   - Increments version in `package.json`
+   - Shows current → new version for confirmation
+
+4. **Git Operations**:
+   - Commits version changes with standard message
+   - Creates git tag with new version
+   - Pushes changes and tags to remote repository
+
+5. **NPM Publishing**:
+   - Publishes package to npm registry
+   - Shows success confirmation with package URL
+
+### Manual Publishing (Alternative)
+
+If you prefer to publish manually:
+
+```bash
+# 1. Build the library
+yarn build-lib
+
+# 2. Increment version
+npm version patch  # or minor/major
+
+# 3. Commit and tag (if not done by npm version)
+git push origin main --tags
+
+# 4. Publish to npm
+npm publish
+```
+
+### Publishing Best Practices
+
+- **Test thoroughly** before publishing
+- **Use semantic versioning**:
+  - `patch`: Bug fixes (1.0.0 → 1.0.1)
+  - `minor`: New features, backward compatible (1.0.0 → 1.1.0)
+  - `major`: Breaking changes (1.0.0 → 2.0.0)
+- **Write clear commit messages**
+- **Update documentation** when adding new features
+- **Announce releases** to your team
+
+### Troubleshooting Publishing
+
+**"Not logged into npm"**:
+
+```bash
+npm login
+npm whoami  # Verify login
+```
+
+**"Working directory not clean"**:
+
+```bash
+git status          # Check what files are modified
+git add .           # Stage changes
+git commit -m "..."  # Commit changes
+```
+
+**"Publishing failed"**:
+
+- Check if version already exists on npm
+- Verify package name is available
+- Ensure you have publishing rights
+- Check npm registry status
+
+**Script permission denied**:
+
+```bash
+chmod +x publish.sh
+```
+
 ## Library Usage
 
 ### Installation

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface ShieldTickIconProps {
+    /**
+     * 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;
+}
+/**
+ * ShieldTick icon component
+ */
+export declare const ShieldTickIcon: React.FC<ShieldTickIconProps>;
+export default ShieldTickIcon;

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

@@ -0,0 +1,54 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+const v = ({
+  size: i = 24,
+  color: n = "currentColor",
+  className: r,
+  style: C,
+  onClick: o,
+  "aria-label": g,
+  title: c
+}) => {
+  const a = f.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="M19 7.2175C19 6.33631 18.9842 6.16036 18.9346 6.03C18.8768 5.87838 18.7829 5.74275 18.6611 5.63547C18.5565 5.54333 18.397 5.46719 17.5723 5.15793L12.211 3.14719C12.0995 3.10541 12.0438 3.08441 12.0029 3.07102C12.0019 3.07068 12.001 3.07035 12 3.07004C11.9991 3.07035 11.9981 3.07068 11.9971 3.07102C11.9562 3.08441 11.9005 3.10541 11.7891 3.14719L6.42775 5.15793C5.60306 5.46719 5.44353 5.54333 5.33888 5.63547C5.21715 5.74275 5.12321 5.87838 5.06544 6.03C5.01584 6.16036 5.00002 6.33631 5.00001 7.2175V11.9997C5.00001 14.0815 6.13939 15.965 7.64162 17.53C9.13269 19.0834 10.8698 20.2057 11.8057 20.7517C11.8629 20.785 11.9046 20.8086 11.9404 20.8288C11.9685 20.8446 11.9872 20.8545 12 20.8611C12.0128 20.8545 12.0315 20.8446 12.0596 20.8288C12.0955 20.8086 12.1372 20.785 12.1944 20.7517C13.1303 20.2057 14.8673 19.0834 16.3584 17.53C17.8606 15.965 19 14.0815 19 11.9997V7.2175ZM14.793 8.2927C15.1835 7.90241 15.8166 7.90241 16.207 8.2927C16.5975 8.68316 16.5974 9.31622 16.207 9.70676L11.707 14.2068C11.3165 14.5973 10.6835 14.5973 10.293 14.2068L8.29298 12.2068L8.22462 12.1316C7.90396 11.7388 7.92675 11.1589 8.29298 10.7927C8.68346 10.4024 9.31657 10.4024 9.70705 10.7927L11 12.0857L14.793 8.2927ZM21 11.9997C21 14.8264 19.4626 17.1836 17.8008 18.9148C16.1282 20.6572 14.2143 21.8877 13.2022 22.4782C13.0123 22.589 12.7601 22.7469 12.419 22.82C12.1597 22.8756 11.8403 22.8756 11.5811 22.82C11.2399 22.7469 10.9877 22.589 10.7979 22.4782C9.7857 21.8877 7.87187 20.6572 6.19923 18.9148C4.53746 17.1836 3.00001 14.8264 3.00001 11.9997V7.2175C3.00001 6.49991 2.98441 5.87591 3.1963 5.31906C3.36958 4.86377 3.65113 4.45756 4.01662 4.13547C4.46364 3.74152 5.05364 3.53687 5.7256 3.28488L11.0869 1.27414C11.2546 1.21126 11.4753 1.12309 11.7139 1.0886C11.8562 1.06802 12.0004 1.06267 12.1436 1.07297L12.2861 1.0886L12.461 1.12375C12.6315 1.16611 12.7873 1.22697 12.9131 1.27414L18.2744 3.28488C18.9464 3.53687 19.5364 3.74152 19.9834 4.13547C20.3489 4.45756 20.6304 4.86377 20.8037 5.31906C21.0156 5.87591 21 6.49991 21 7.2175V11.9997Z" 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 s = e.getAttribute("fill"), l = e.getAttribute("stroke");
+      s && s !== "none" && e.setAttribute("fill", n), l && l !== "none" && e.setAttribute("stroke", n);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, n, r]);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...C
+      },
+      onClick: o,
+      "aria-label": g || "shield-tick icon",
+      title: c,
+      dangerouslySetInnerHTML: { __html: a }
+    }
+  );
+};
+export {
+  v as ShieldTickIcon,
+  v as default
+};

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface ShieldTickSolidIconProps {
+    /**
+     * 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;
+}
+/**
+ * ShieldTickSolid icon component
+ */
+export declare const ShieldTickSolidIcon: React.FC<ShieldTickSolidIconProps>;
+export default ShieldTickSolidIcon;

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

@@ -0,0 +1,54 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+const S = ({
+  size: i = 24,
+  color: l = "currentColor",
+  className: r,
+  style: o,
+  onClick: c,
+  "aria-label": g,
+  title: C
+}) => {
+  const a = f.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 fill-rule="evenodd" clip-rule="evenodd" d="M11.714 1.08843C11.9037 1.06102 12.0964 1.06102 12.2861 1.08843C12.5047 1.12002 12.7081 1.19688 12.8697 1.2579L12.9129 1.27422L18.4054 3.33374C19.0232 3.56439 19.5657 3.76694 19.9835 4.13517C20.349 4.45729 20.6306 4.86358 20.8039 5.31893C21.0019 5.83944 21.0011 6.41855 21.0002 7.07799L21 11.9999C21 14.8265 19.4627 17.1831 17.801 18.9143C16.1281 20.6571 14.214 21.888 13.2019 22.4785L13.1609 22.5025C12.9762 22.611 12.7365 22.7517 12.4194 22.8198C12.1599 22.8754 11.8401 22.8754 11.5807 22.8198C11.2635 22.7518 11.0238 22.611 10.8391 22.5025L10.7981 22.4785C9.78602 21.888 7.87198 20.6571 6.19908 18.9143C4.53731 17.1831 3.00002 14.8265 3.00002 11.9999L2.99989 7.078C2.99893 6.41856 2.99809 5.83944 3.19616 5.31893C3.36943 4.86358 3.65099 4.45729 4.01651 4.13517C4.43433 3.76695 4.97687 3.56439 5.59466 3.33374L11.0871 1.27422L11.1304 1.2579C11.2919 1.19688 11.4954 1.12002 11.714 1.08843ZM16.2071 9.70711C16.5976 9.31658 16.5976 8.68342 16.2071 8.29289C15.8166 7.90237 15.1834 7.90237 14.7929 8.29289L11 12.0858L9.70711 10.7929C9.31658 10.4024 8.68342 10.4024 8.29289 10.7929C7.90237 11.1834 7.90237 11.8166 8.29289 12.2071L10.2929 14.2071C10.6834 14.5976 11.3166 14.5976 11.7071 14.2071L16.2071 9.70711Z" 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"), s = e.getAttribute("stroke");
+      n && n !== "none" && e.setAttribute("fill", l), s && s !== "none" && e.setAttribute("stroke", l);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${r}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, l, r]);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: c,
+      "aria-label": g || "shield-tick icon",
+      title: C,
+      dangerouslySetInnerHTML: { __html: a }
+    }
+  );
+};
+export {
+  S as ShieldTickSolidIcon,
+  S as default
+};

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' | 'bank-note-03' | 'bell-01' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'credit-card-02' | 'download-01' | 'eye' | 'eye-off' | 'file-06' | 'filter-funnel-01' | 'folder-shield' | 'headphones-02' | 'heart' | 'help-circle' | 'info-circle' | 'link-external-01' | 'loading-01' | 'log-out-01' | 'message-question-square' | 'minus' | 'plus' | 'refresh-cw-01' | 'search-lg' | 'search-md' | 'user-01' | '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' | 'bank-note-03' | 'bell-01' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'credit-card-02' | 'download-01' | 'eye' | 'eye-off' | 'file-06' | 'filter-funnel-01' | 'folder-shield' | 'headphones-02' | 'heart' | 'help-circle' | 'info-circle' | 'link-external-01' | 'loading-01' | 'log-out-01' | 'message-question-square' | 'minus' | 'plus' | 'refresh-cw-01' | 'search-lg' | 'search-md' | 'shield-tick' | 'user-01' | 'user-03' | 'x-circle' | 'x-close';

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

@@ -1,4 +1,4 @@
-const o = {
+const i = {
   "search-lg": () => import("../generated/SearchLgIcon.js"),
   "search-lg-solid": () => import("../generated/SearchLgSolidIcon.js"),
   "activity-heart": () => import("../generated/ActivityHeartIcon.js"),
@@ -90,8 +90,10 @@ const o = {
   "headphones-02": () => import("../generated/Headphones02Icon.js"),
   "headphones-02-solid": () => import("../generated/Headphones02SolidIcon.js"),
   "link-external-01": () => import("../generated/LinkExternal01Icon.js"),
-  "link-external-01-solid": () => import("../generated/LinkExternal01SolidIcon.js")
+  "link-external-01-solid": () => import("../generated/LinkExternal01SolidIcon.js"),
+  "shield-tick": () => import("../generated/ShieldTickIcon.js"),
+  "shield-tick-solid": () => import("../generated/ShieldTickSolidIcon.js")
 };
 export {
-  o as MAP_ICON
+  i as MAP_ICON
 };

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

@@ -14,6 +14,7 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
     fontSize?: string;
     error?: boolean;
     clearText?: boolean;
+    focus?: boolean;
     optionalProps?: {
         textAreaClassName?: string;
         maxIndicatorLength?: number;

package/dist/components/InputBase/index.js

@@ -1,10 +1,10 @@
 import { jsxs as I, jsx as o } from "react/jsx-runtime";
-import c, { forwardRef as $, 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 c, { forwardRef as H, useState as R, useMemo as B, useEffect as _, memo as F } from "react";
+import { inputBaseVariants as K, textAreaVariants as W } from "./variants.js";
+import q from "../Icon/Icon.js";
 import { cn as f } from "../../shared/utils/cn.js";
-import { dataTestId as q } from "../../shared/utils/dataTestId.js";
-const A = (t) => {
+import { dataTestId as A } from "../../shared/utils/dataTestId.js";
+const G = (t) => {
   switch (t) {
     case "sm":
       return 16;
@@ -15,7 +15,7 @@ const A = (t) => {
     default:
       return 20;
   }
-}, N = $(
+}, N = H(
   ({
     disabled: t,
     readOnly: s,
@@ -32,17 +32,18 @@ const A = (t) => {
     error: j,
     clearText: D,
     optionalProps: h,
+    focus: M,
     // inputSize,
     ...e
-  }, M) => {
-    const [k, g] = H(!1), m = S || A(v), p = B(
+  }, k) => {
+    const [L, g] = R(!1), m = S || G(v), p = B(
       () => `inputbase-input-${Math.random().toString(36).substring(2, 9)}`,
       []
     ), d = B(
       () => `inputbase-textarea-${Math.random().toString(36).substring(2, 9)}`,
       []
     );
-    R(() => {
+    _(() => {
       const n = e.value;
       if (n !== void 0) {
         g(String(n).length > 0);
@@ -67,8 +68,8 @@ const A = (t) => {
       }
       return l;
     }, [e.type, e.value, p, d]);
-    const E = D && k ? /* @__PURE__ */ o(
-      W,
+    const E = D && L ? /* @__PURE__ */ o(
+      q,
       {
         name: "x-circle",
         variant: "solid",
@@ -105,7 +106,7 @@ const A = (t) => {
           size: m
         }
       ) : u
-    ] }) : E || u, L = {
+    ] }) : E || u, $ = {
       sm: "h-4",
       md: "h-5",
       lg: "h-6"
@@ -113,16 +114,17 @@ const A = (t) => {
     return /* @__PURE__ */ o("div", { className: "relative justify-center items-center", children: /* @__PURE__ */ I(
       "div",
       {
-        ...q("InputBase"),
+        ...A("InputBase"),
         ref: z,
         ...V,
-        className: F({
+        className: K({
           disabled: !!t,
           className: w,
           color: T,
           size: e?.type === "textarea" ? void 0 : v,
           readOnly: !!s,
-          error: !!j
+          error: !!j,
+          focus: !!M
         }),
         style: { minWidth: C ?? "100%" },
         children: [
@@ -144,7 +146,7 @@ const A = (t) => {
             {
               id: e?.type === "textarea" ? d : void 0,
               className: f(
-                e?.type === "textarea" ? K({
+                e?.type === "textarea" ? W({
                   size: h?.sizeTextArea,
                   disabled: !!t,
                   readOnly: !!s
@@ -162,9 +164,9 @@ const A = (t) => {
               id: e.type === "textarea" ? void 0 : p,
               className: f(
                 "w-full appearance-none bg-transparent font-sans outline-none text-fg-neutral-main",
-                L[v || "md"]
+                $[v || "md"]
               ),
-              ref: M,
+              ref: k,
               disabled: t || s,
               ...e,
               onKeyDown: (n) => {
@@ -194,7 +196,7 @@ const A = (t) => {
   }
 );
 N.displayName = "InputBase";
-const Z = _(N);
+const O = F(N);
 export {
-  Z as default
+  O as default
 };

package/dist/components/InputBase/variants.d.ts

@@ -17,6 +17,10 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         primary: string;
         error: string;
     };
+    focus: {
+        true: string;
+        false: string;
+    };
 }, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2 font-primary", {
     size: {
         sm: string;
@@ -36,6 +40,10 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         primary: string;
         error: string;
     };
+    focus: {
+        true: string;
+        false: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         sm: string;
@@ -55,6 +63,10 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         primary: string;
         error: string;
     };
+    focus: {
+        true: string;
+        false: string;
+    };
 }, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2 font-primary", unknown, unknown, undefined>>;
 export declare const textAreaVariants: import('tailwind-variants').TVReturnType<{
     size: {

package/dist/components/InputBase/variants.js

@@ -19,6 +19,10 @@ const a = e({
     color: {
       primary: "",
       error: ""
+    },
+    focus: {
+      true: "outline-2 outline-fg-brand-rest",
+      false: ""
     }
   },
   defaultVariants: {
@@ -48,6 +52,17 @@ const a = e({
       disabled: !1,
       readOnly: !1,
       className: "outline-fg-accent-error focus-within:outline-fg-accent-error hover:outline-fg-accent-error"
+    },
+    // Focus state - override all other states when focus is true
+    {
+      focus: !0,
+      error: !1,
+      className: "outline-2 outline-fg-brand-rest"
+    },
+    {
+      focus: !0,
+      error: !0,
+      className: "outline-2 outline-fg-accent-error"
     }
   ]
 }), r = e({

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { default as React, ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { toastVariants } from './helper/variants';
 import * as ToastPrimitives from '@radix-ui/react-toast';
@@ -18,7 +18,7 @@ interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitiv
     /**
      * The description/message content of the toast
      */
-    description?: string;
+    description?: ReactNode;
     /**
      * Custom icon to override the default variant icon
      */

package/dist/components/TopNavigationBar/index.js

@@ -1,33 +1,33 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { jsx as i, jsxs as t } from "react/jsx-runtime";
 import "react";
 import { cn as c } from "../../shared/utils/cn.js";
 import { dataTestId as d } from "../../shared/utils/dataTestId.js";
-import { sidebarSection as l, logoSection as m, divider as v, rightSection as N, actionsSectionVariant as f, topNavigationBar as h } from "./helper/variants.js";
+import { sidebarSection as l, logoSection as m, divider as v, rightSection as h, actionsSectionVariant as N, topNavigationBar as f } from "./helper/variants.js";
 import "./helper/tabNavigation.js";
 function j({
   collapsed: a = !1,
   logo: e,
-  className: o,
-  actionsSection: n,
+  className: n,
+  actionsSection: o,
   height: s = "56px",
-  ...t
+  ...r
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ i("div", { children: /* @__PURE__ */ t(
     "div",
     {
-      className: c(h({ collapsed: a, className: o })),
+      className: c(f({ collapsed: a, className: n })),
       ...d("top-navigation-bar"),
-      ...t,
-      style: { height: s, ...t.style },
+      ...r,
+      style: { height: s, ...r.style },
       children: [
-        /* @__PURE__ */ r("div", { className: l({ collapsed: a }), children: [
+        /* @__PURE__ */ t("div", { className: l({ collapsed: a }), children: [
           /* @__PURE__ */ i("div", { className: m({ collapsed: a }), children: e }),
           /* @__PURE__ */ i("div", { className: v(), children: /* @__PURE__ */ i("div", { className: "w-[1px] h-full bg-neutral-strong" }) })
         ] }),
-        /* @__PURE__ */ i("div", { className: N(), children: /* @__PURE__ */ i("div", { className: f(), children: n }) })
+        /* @__PURE__ */ i("div", { className: h(), children: /* @__PURE__ */ i("div", { className: N(), children: o }) })
       ]
     }
-  );
+  ) });
 }
 export {
   j as default

package/package.json

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