mcr-design-systems 1.0.16 → 1.0.18

package/dist/components/Box/helper/classMappings.d.ts

@@ -206,8 +206,6 @@ export declare const borderColorClasses: {
     readonly 'active-strong': "border-active-strong";
     readonly selected: "border-selected";
     readonly 'selected-disabled': "border-selected-disabled";
-    readonly 'selected-secondary': "border-selected-secondary";
-    readonly 'selected-secondary-disabled': "border-selected-secondary-disabled";
     readonly error: "border-error";
     readonly 'error-light': "border-error-light";
     readonly 'error-strong': "border-error-strong";

package/dist/components/Box/helper/classMappings.js

@@ -20,7 +20,7 @@ const s = {
   xl: "px-xl",
   "2xl": "px-2xl",
   "3xl": "px-3xl"
-}, e = {
+}, r = {
   xs: "py-xs",
   "xs-2": "py-xs-2",
   "sm-1": "py-sm-1",
@@ -31,7 +31,7 @@ const s = {
   xl: "py-xl",
   "2xl": "py-2xl",
   "3xl": "py-3xl"
-}, r = {
+}, e = {
   xs: "pt-xs",
   "xs-2": "pt-xs-2",
   "sm-1": "pt-sm-1",
@@ -111,7 +111,7 @@ const s = {
   "2xl": "my-2xl",
   "3xl": "my-3xl",
   auto: "my-auto"
-}, d = {
+}, g = {
   xs: "mt-xs",
   "xs-2": "mt-xs-2",
   "sm-1": "mt-sm-1",
@@ -123,7 +123,7 @@ const s = {
   "2xl": "mt-2xl",
   "3xl": "mt-3xl",
   auto: "mt-auto"
-}, g = {
+}, d = {
   xs: "mr-xs",
   "xs-2": "mr-xs-2",
   "sm-1": "mr-sm-1",
@@ -192,8 +192,6 @@ const s = {
   "active-strong": "border-active-strong",
   selected: "border-selected",
   "selected-disabled": "border-selected-disabled",
-  "selected-secondary": "border-selected-secondary",
-  "selected-secondary-disabled": "border-selected-secondary-disabled",
   // Accent borders
   error: "border-error",
   "error-light": "border-error-light",
@@ -233,16 +231,16 @@ export {
   b as marginBottomClasses,
   o as marginClasses,
   c as marginLeftClasses,
-  g as marginRightClasses,
-  d as marginTopClasses,
+  d as marginRightClasses,
+  g as marginTopClasses,
   n as marginXClasses,
   a as marginYClasses,
   m as paddingBottomClasses,
   s as paddingClasses,
   x as paddingLeftClasses,
   t as paddingRightClasses,
-  r as paddingTopClasses,
+  e as paddingTopClasses,
   l as paddingXClasses,
-  e as paddingYClasses,
+  r as paddingYClasses,
   p as textColorClasses
 };

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

@@ -42,7 +42,7 @@ export interface BoxProps extends BaseProps, VariantProps<typeof box> {
     /** Text color using semantic tokens */
     color?: 'neutral-main' | 'neutral-subtle' | 'neutral-disabled' | 'brand-rest' | 'brand-hover' | 'accent-error' | 'accent-success' | 'accent-warning' | 'accent-info';
     /** Border color using semantic tokens */
-    borderColor?: 'neutral' | 'neutral-light' | 'neutral-strong' | 'neutral-strongest' | 'active' | 'active-light' | 'active-strong' | 'selected' | 'selected-disabled' | 'selected-secondary' | 'selected-secondary-disabled' | 'error' | 'error-light' | 'error-strong' | 'success' | 'success-light' | 'success-strong' | 'warning' | 'warning-light' | 'warning-strong' | 'info' | 'info-light' | 'info-strong' | 'violet' | 'violet-light' | 'violet-strong' | 'yellow' | 'yellow-light' | 'yellow-strong' | 'card' | 'dialog' | 'input' | 'input-active' | 'input-disabled' | 'table' | 'indicator' | 'indicator-disabled' | 'inverse' | 'inverse-static' | 'segment-control';
+    borderColor?: 'neutral' | 'neutral-light' | 'neutral-strong' | 'neutral-strongest' | 'active' | 'active-light' | 'active-strong' | 'selected' | 'selected-disabled' | 'error' | 'error-light' | 'error-strong' | 'success' | 'success-light' | 'success-strong' | 'warning' | 'warning-light' | 'warning-strong' | 'info' | 'info-light' | 'info-strong' | 'violet' | 'violet-light' | 'violet-strong' | 'yellow' | 'yellow-light' | 'yellow-strong' | 'card' | 'dialog' | 'input' | 'input-active' | 'input-disabled' | 'table' | 'indicator' | 'indicator-disabled' | 'inverse' | 'inverse-static' | 'segment-control';
 }
 /**
  * Box Component

package/dist/components/InputPassword/index.js

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

package/dist/components/TextField/HelperText.js

@@ -1,8 +1,8 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
 import "react";
-import { Typography as f } from "../Typography/index.js";
+import { Typography as c } from "../Typography/index.js";
 import s from "../Icon/Icon.js";
-const p = ({
+const x = ({
   text: l,
   error: a = !1,
   haveIcon: i = !0,
@@ -13,8 +13,8 @@ const p = ({
   "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(
+    children: /* @__PURE__ */ f("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
+      a && (r || /* @__PURE__ */ e(
         s,
         {
           name: "alert-octagon",
@@ -22,8 +22,8 @@ const p = ({
           variant: "solid",
           size: typeof t == "number" ? t : 16
         }
-      ) })),
-      i && !a && /* @__PURE__ */ e("div", { className: "w-5 h-5 relative", children: /* @__PURE__ */ e(
+      )),
+      i && !a && /* @__PURE__ */ e(
         s,
         {
           name: "help-circle",
@@ -31,13 +31,13 @@ const p = ({
           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,
+        c,
         {
           variants: "body",
-          size: "md",
-          color: a ? "fg-accent-error-strong" : "fg-neutral-subtle",
+          size: "sm",
+          color: a ? "fg-accent-error" : "fg-neutral-subtle",
           className: "inline",
           children: l
         }
@@ -46,5 +46,5 @@ const p = ({
   }
 ) : null;
 export {
-  p as default
+  x as default
 };

package/dist/tokens/semantic.d.ts

@@ -181,9 +181,8 @@ export declare const semanticTokens: {
             readonly 'neutral-strongest': "neutral-400";
             readonly 'segment-control': "transparent";
             readonly selected: "brand-700";
+            readonly 'selected-boldest': "brand-600";
             readonly 'selected-disabled': "brand-300";
-            readonly 'selected-secondary': "brand-700";
-            readonly 'selected-secondary-disabled': "brand-300";
             readonly success: "fg-accent-success";
             readonly 'success-light': "fg-accent-success-disabled";
             readonly 'success-strong': "fg-accent-success-strong";
@@ -198,19 +197,6 @@ export declare const semanticTokens: {
             readonly 'yellow-light': "fg-accent-yellow-disabled";
             readonly 'yellow-strong': "fg-accent-yellow-strong";
         };
-        readonly brand: {
-            readonly 'brand-100': "#fffceb";
-            readonly 'brand-200': "#fff5c2";
-            readonly 'brand-300': "#ffed99";
-            readonly 'brand-400': "#ffe070";
-            readonly 'brand-50': "#fffcf0";
-            readonly 'brand-500': "#ffd147";
-            readonly 'brand-600': "#ffbf1f";
-            readonly 'brand-700': "#d9990f";
-            readonly 'brand-800': "#b37505";
-            readonly 'brand-900': "#8c5700";
-            readonly 'brand-950': "#663d00";
-        };
     };
     readonly dark: {
         readonly bg: {
@@ -394,9 +380,8 @@ export declare const semanticTokens: {
             readonly 'neutral-strongest': "neutral-500";
             readonly 'segment-control': "neutral-700";
             readonly selected: "brand-400";
+            readonly 'selected-boldest': "brand-400";
             readonly 'selected-disabled': "brand-700";
-            readonly 'selected-secondary': "brand-400";
-            readonly 'selected-secondary-disabled': "brand-700";
             readonly success: "fg-accent-success";
             readonly 'success-light': "fg-accent-success-disabled";
             readonly 'success-strong': "fg-accent-success-strong";
@@ -411,18 +396,18 @@ export declare const semanticTokens: {
             readonly 'yellow-light': "fg-accent-yellow-disabled";
             readonly 'yellow-strong': "fg-accent-yellow-strong";
         };
-        readonly brand: {
-            readonly 'brand-100': "#fffceb";
-            readonly 'brand-200': "#fff5c2";
-            readonly 'brand-300': "#ffed99";
-            readonly 'brand-400': "#ffe070";
-            readonly 'brand-50': "#fffcf0";
-            readonly 'brand-500': "#ffd147";
-            readonly 'brand-600': "#ffbf1f";
-            readonly 'brand-700': "#d9990f";
-            readonly 'brand-800': "#b37505";
-            readonly 'brand-900': "#8c5700";
-            readonly 'brand-950': "#663d00";
-        };
+    };
+    readonly brand: {
+        readonly 100: "#FFFDEB";
+        readonly 200: "#FFF6C2";
+        readonly 300: "#FFEC99";
+        readonly 400: "#FFE070";
+        readonly 50: "#FFFDF0";
+        readonly 500: "#FFD147";
+        readonly 600: "#FFC01F";
+        readonly 700: "#D9990F";
+        readonly 800: "#B37504";
+        readonly 900: "#8C5600";
+        readonly 950: "#663C00";
     };
 };

package/dist/tokens/semantic.js

@@ -181,9 +181,8 @@ const e = {
       "neutral-strongest": "neutral-400",
       "segment-control": "transparent",
       selected: "brand-700",
+      "selected-boldest": "brand-600",
       "selected-disabled": "brand-300",
-      "selected-secondary": "brand-700",
-      "selected-secondary-disabled": "brand-300",
       success: "fg-accent-success",
       "success-light": "fg-accent-success-disabled",
       "success-strong": "fg-accent-success-strong",
@@ -197,19 +196,6 @@ const e = {
       yellow: "fg-accent-yellow",
       "yellow-light": "fg-accent-yellow-disabled",
       "yellow-strong": "fg-accent-yellow-strong"
-    },
-    brand: {
-      "brand-100": "#fffceb",
-      "brand-200": "#fff5c2",
-      "brand-300": "#ffed99",
-      "brand-400": "#ffe070",
-      "brand-50": "#fffcf0",
-      "brand-500": "#ffd147",
-      "brand-600": "#ffbf1f",
-      "brand-700": "#d9990f",
-      "brand-800": "#b37505",
-      "brand-900": "#8c5700",
-      "brand-950": "#663d00"
     }
   },
   dark: {
@@ -394,9 +380,8 @@ const e = {
       "neutral-strongest": "neutral-500",
       "segment-control": "neutral-700",
       selected: "brand-400",
+      "selected-boldest": "brand-400",
       "selected-disabled": "brand-700",
-      "selected-secondary": "brand-400",
-      "selected-secondary-disabled": "brand-700",
       success: "fg-accent-success",
       "success-light": "fg-accent-success-disabled",
       "success-strong": "fg-accent-success-strong",
@@ -410,20 +395,20 @@ const e = {
       yellow: "fg-accent-yellow",
       "yellow-light": "fg-accent-yellow-disabled",
       "yellow-strong": "fg-accent-yellow-strong"
-    },
-    brand: {
-      "brand-100": "#fffceb",
-      "brand-200": "#fff5c2",
-      "brand-300": "#ffed99",
-      "brand-400": "#ffe070",
-      "brand-50": "#fffcf0",
-      "brand-500": "#ffd147",
-      "brand-600": "#ffbf1f",
-      "brand-700": "#d9990f",
-      "brand-800": "#b37505",
-      "brand-900": "#8c5700",
-      "brand-950": "#663d00"
     }
+  },
+  brand: {
+    100: "#FFFDEB",
+    200: "#FFF6C2",
+    300: "#FFEC99",
+    400: "#FFE070",
+    50: "#FFFDF0",
+    500: "#FFD147",
+    600: "#FFC01F",
+    700: "#D9990F",
+    800: "#B37504",
+    900: "#8C5600",
+    950: "#663C00"
   }
 };
 export {

package/dist/tokens/theme-types.d.ts

@@ -60,5 +60,5 @@ export type SemanticTheme = {
 export type Theme = {
     dark?: SemanticTheme;
     light?: SemanticTheme;
-    brand?: Record<string, string>;
+    brand: Record<string, string>;
 };

package/dist/tokens/utils.d.ts

@@ -16,7 +16,7 @@ export declare const themeUtils: {
     generateCSSVariables: (theme: ThemeName) => string;
     generateCustomThemeCSSVariables: (themeData: SemanticTheme, brand?: Record<string, string>) => string;
     applyTheme: (theme: ThemeName, customTheme?: Theme, enableCustomPersister?: boolean) => void;
-    getToken: (category: keyof typeof semanticTokens.light, token: string, theme?: ThemeName) => never;
+    getToken: (category: keyof typeof semanticTokens.light, token: string, theme?: ThemeName) => "brand-300" | "brand-700" | "brand-200" | "neutral-400" | "neutral-500" | "brand-950";
     getCustomToken: (customTheme: Theme, category: keyof SemanticTheme, token: string, theme?: ThemeName) => undefined;
     getCSSVar: (category: string, token: string) => string;
 };

package/dist/tokens/utils.js

@@ -1,18 +1,18 @@
-import { baseColors as $, alphaColors as s, colorScales as g, ringColors as d } from "./primitives/colors.js";
-import { semanticTokens as a } from "./semantic.js";
+import { baseColors as $, alphaColors as a, colorScales as g, ringColors as d } from "./primitives/colors.js";
+import { semanticTokens as s } from "./semantic.js";
 import "react/jsx-runtime";
 import "react";
 import "./context.js";
-const h = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", m = (o = !1) => typeof window > "u" || o ? null : localStorage.getItem("mcr-theme") || null, i = (o) => {
-  const c = a[o];
+const h = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", u = (o = !1) => typeof window > "u" || o ? null : localStorage.getItem("mcr-theme") || null, i = (o) => {
+  const c = s[o];
   let t = "";
   return Object.entries($).forEach(([e, r]) => {
     t += `--color-${e}: ${r};
 `;
-  }), Object.entries(s.white).forEach(([e, r]) => {
+  }), Object.entries(a.white).forEach(([e, r]) => {
     t += `--color-white-alpha-${e.replace(/[/.]/g, "-")}: ${r};
 `;
-  }), Object.entries(s.black).forEach(([e, r]) => {
+  }), Object.entries(a.black).forEach(([e, r]) => {
     t += `--color-black-alpha-${e.replace(/[/.]/g, "-")}: ${r};
 `;
   }), Object.entries(g).forEach(([e, r]) => {
@@ -32,8 +32,8 @@ const h = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-colo
   }), Object.entries(d).forEach(([e, r]) => {
     t += `--color-ring-${e}: ${r};
 `;
-  }), Object.entries(c.brand).forEach(([e, r]) => {
-    console.log(r, e), t += `--color-${e}: ${r};
+  }), Object.entries(s.brand).forEach(([e, r]) => {
+    t += `--color-brand-${e}: ${r};
 `;
   }), t;
 }, b = (o, c) => {
@@ -61,7 +61,7 @@ const h = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-colo
     t += `--color-brand-${e}: ${r};
 `;
   }), t;
-}, u = (o, c, t = !1) => {
+}, m = (o, c, t = !1) => {
   if (typeof document > "u") return;
   document.documentElement.setAttribute("data-theme", o);
   let e = i(o);
@@ -81,24 +81,24 @@ const h = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-colo
       ${e}
     }
   `, document.head.appendChild(n), t || localStorage.setItem("mcr-theme", o);
-}, w = {
+}, y = {
   getSystemTheme: h,
-  getStoredTheme: m,
+  getStoredTheme: u,
   generateCSSVariables: i,
   generateCustomThemeCSSVariables: b,
-  applyTheme: u,
+  applyTheme: m,
   // Get token value for current theme
-  getToken: (o, c, t = "light") => a[t][o]?.[c],
+  getToken: (o, c, t = "light") => s[t][o]?.[c],
   // Get token value from custom theme
   getCustomToken: (o, c, t, e = "light") => o[e]?.[c]?.[t],
   // Generate CSS custom property name
   getCSSVar: (o, c) => `var(--color-${o}-${c})`
 };
 export {
-  u as applyTheme,
+  m as applyTheme,
   i as generateCSSVariables,
   b as generateCustomThemeCSSVariables,
-  m as getStoredTheme,
+  u as getStoredTheme,
   h as getSystemTheme,
-  w as themeUtils
+  y as themeUtils
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcr-design-systems",
   "private": false,
-  "version": "1.0.16",
+  "version": "1.0.18",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate-icons": "node tools/generate-icon-components.js",
-    "tokens": "node tools/convert-token.js"
+    "tokens": "node tools/convert-token.js",
+    "prepublish": "npm run build-lib"
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.15",