mcr-design-systems 1.0.17 → 1.0.19

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/PhoneInput/index.d.ts

@@ -49,6 +49,10 @@ export interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInpu
      * Test identifier
      */
     'data-testid'?: string;
+    /**
+     * Whether the dropdown is open (controlled)
+     */
+    clearText?: boolean;
 }
 /**
  * A phone input component that combines a country selector dropdown with a phone number input field.

package/dist/components/PhoneInput/index.js

@@ -1,27 +1,27 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
 import * as n from "react";
-import G from "../../node_modules/libphonenumber-js/examples.mobile.json.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 Y from "../../node_modules/libphonenumber-js/examples.mobile.json.js";
+import { cn as C } from "../../shared/utils/cn.js";
+import { COUNTRIES_DATA as q } from "../../shared/flags/countries-data.js";
+import { FLAG_POSITIONS as H } from "../../shared/flags/flag-positions.js";
+import { FLAG_BASE64 as J } from "../../shared/flags/base64.js";
+import { phoneInputVariants as K } from "./helper/variants.js";
+import { Dropdown as X } from "../Dropdown/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 F = ({
+import P from "../Icon/Icon.js";
+import Z from "./FagDefault.js";
+import { getExampleNumber as ee } from "../../node_modules/libphonenumber-js/min/exports/getExampleNumber.js";
+import { AsYouType as te } from "../../node_modules/libphonenumber-js/min/exports/AsYouType.js";
+const D = ({
   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(
+  const t = H[o];
+  return /* @__PURE__ */ c("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ c(Z, {}) : /* @__PURE__ */ c(
     "div",
     {
-      className: b(),
+      className: C(),
       style: {
-        backgroundImage: `url('${Y}')`,
+        backgroundImage: `url('${J}')`,
         backgroundPosition: `${t.x}px ${t.y}px`,
         backgroundSize: "512px 512px",
         width: "32px",
@@ -30,11 +30,11 @@ const F = ({
       }
     }
   ) });
-}, ee = (o) => {
+}, oe = (o) => {
   try {
-    const t = X(
+    const t = ee(
       o.toUpperCase(),
-      G
+      Y
     );
     if (t)
       return t.formatNational();
@@ -44,153 +44,187 @@ const F = ({
     );
   }
   return "Enter phone number";
-}, P = (o, t) => {
+}, F = (o, t) => {
   if (!o || !o.trim()) return "";
   try {
-    const c = new Z(t.toUpperCase()), d = o.replace(/[^\d]/g, "");
-    if (!d) return "";
-    let a = "";
-    for (const f of d)
-      a = c.input(f);
-    return a || d;
+    const a = new te(t.toUpperCase()), l = o.replace(/[^\d]/g, "");
+    if (!l) return "";
+    let s = "";
+    for (const h of l)
+      s = a.input(h);
+    return s || l;
   } catch {
     return o.replace(/[^\d]/g, "") || "";
   }
-}, te = n.forwardRef(
+}, re = n.forwardRef(
   ({
     onCountryChange: o,
     value: t = "",
-    onValueChange: c,
-    placeholder: d,
-    countries: a = Q,
-    showSearch: f = !1,
+    onValueChange: a,
+    placeholder: l,
+    countries: s = q,
+    showSearch: h = !1,
     searchPlaceholder: O = "Search countries",
-    className: D,
-    size: h = "md",
-    "data-testid": R,
-    error: k,
+    className: T,
+    size: u = "md",
+    "data-testid": z,
+    error: R,
+    clearText: k,
     // placeholder = 'Enter phone number',
     ...A
   }, L) => {
-    const [y, z] = n.useState(!1), [T, w] = n.useState(!1), [i, V] = n.useState(
-      t || a[0]?.code || "us"
-    ), [g, S] = n.useState(""), I = n.useRef(null), N = y, x = n.useCallback((e) => {
-      z(e), e || S("");
+    const [y, M] = n.useState(!1), [_, w] = n.useState(!1), [i, $] = n.useState(
+      t || s[0]?.code || "us"
+    ), [g, I] = n.useState(""), N = n.useRef(null), S = y, x = n.useCallback((e) => {
+      M(e), e || I("");
     }, []), m = n.useMemo(
-      () => a.find((e) => e.code === i) || a[0],
-      [a, i]
-    ), _ = n.useMemo(() => d || ee(i), [i, d]), C = q({
-      size: h,
-      opened: N,
-      inputFocused: T
-    }), $ = n.useCallback(
+      () => s.find((e) => e.code === i) || s[0],
+      [s, i]
+    ), B = n.useMemo(() => l || oe(i), [i, l]), b = K({
+      size: u,
+      opened: S,
+      inputFocused: _
+    }), E = n.useCallback(
       (e) => {
-        if (o?.(e), x(!1), V(e.code), t && t.trim()) {
-          const r = P(
+        if (o?.(e), x(!1), $(e.code), t && t.trim()) {
+          const r = F(
             t,
             e.code
           );
-          c?.({
+          a?.({
             formatted: r,
             raw: t,
             country: e
           });
         }
       },
-      [o, x, t, c]
-    ), E = n.useMemo(() => a.filter(
+      [o, x, t, a]
+    ), j = n.useMemo(() => s.filter(
       (e) => e.name.toLowerCase().includes(g.toLowerCase()) || e.code.toLowerCase().includes(g.toLowerCase())
     ).map((e) => ({
       label: e.name,
       value: e.code,
-      icon: /* @__PURE__ */ s(F, { countryCode: e.code }),
+      icon: /* @__PURE__ */ c(D, { countryCode: e.code }),
       startIconSize: "auto",
       endIconSize: "auto",
-      endIcon: /* @__PURE__ */ l(v, { variants: "body", size: "sm", color: "fg-neutral-subtle", children: [
+      endIcon: /* @__PURE__ */ d(v, { variants: "body", size: "sm", color: "fg-neutral-subtlest", children: [
         "+",
         e.dial_code
       ] })
-    })), [a, g]), B = n.useCallback(
+    })), [s, g]), U = k ? /* @__PURE__ */ c(
+      "div",
+      {
+        onMouseDown: (e) => {
+          e.preventDefault(), e.stopPropagation(), setTimeout(() => {
+            a && a({
+              formatted: "",
+              raw: "",
+              country: m
+            });
+          }, 0);
+        },
+        className: "inline-flex items-center justify-center",
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Clear text",
+        children: /* @__PURE__ */ c(
+          P,
+          {
+            name: "x-circle",
+            variant: "solid",
+            size: {
+              sm: 16,
+              md: 20,
+              lg: 24
+            }[u],
+            className: "cursor-pointer text-fg-neutral-subtle"
+          }
+        )
+      }
+    ) : null, V = n.useCallback(
       (e) => {
-        const r = e.target.value, p = t, M = r.length < p.length;
+        const r = e.target.value, p = t, G = r.length < p.length;
         if (r.length > 20) {
           e.preventDefault();
           return;
         }
         if (/^[0-9\s\-()+ ]*$/.test(r) || r === "") {
-          const u = r.replace(/[^\d]/g, ""), U = p.replace(/[^\d]/g, "");
-          if (M && u === U) {
-            c?.({
+          const f = r.replace(/[^\d]/g, ""), Q = p.replace(/[^\d]/g, "");
+          if (G && f === Q) {
+            a?.({
               formatted: r,
               raw: r.replace(/[^\d]/g, ""),
               country: m
             });
             return;
           }
-          const j = u ? P(u, i) : "";
-          c?.({
-            formatted: j,
-            raw: u,
+          const W = f ? F(f, i) : "";
+          a?.({
+            formatted: W,
+            raw: f,
             country: m
           });
         }
       },
-      [m, c, i, t]
+      [m, a, i, t]
     );
-    return /* @__PURE__ */ l("div", { className: b("flex items-center", D), ref: I, children: [
-      /* @__PURE__ */ s(
-        H,
+    return /* @__PURE__ */ d("div", { className: C("flex items-center", T), ref: N, children: [
+      /* @__PURE__ */ c(
+        X,
         {
           open: y,
           onOpenChange: x,
-          items: E,
+          items: j,
           value: i,
           onValueChange: (e) => {
-            const r = a.find(
+            const r = s.find(
               (p) => p.code === e
             );
-            r && $(r);
+            r && E(r);
           },
           align: "start",
           "data-testid": "align-start-dropdown",
-          search: f,
+          search: h,
           searchPlaceholder: O,
           enableVirtualization: !0,
           onSearchChange: (e) => {
-            S(e);
+            I(e);
           },
-          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(v, { variants: "body", size: "md", children: [
+          width: N.current?.clientWidth || "auto",
+          children: /* @__PURE__ */ d("div", { className: b.countryButton(), children: [
+            /* @__PURE__ */ c(D, { countryCode: i }),
+            /* @__PURE__ */ d("div", { className: "flex gap-xs-4", children: [
+              /* @__PURE__ */ d(v, { variants: "body", size: "md", children: [
                 "+",
                 m.dial_code
               ] }),
-              /* @__PURE__ */ s(J, { name: N ? "chevron-up" : "chevron-down", size: 16 })
+              /* @__PURE__ */ c(P, { name: S ? "chevron-up" : "chevron-down", size: 16 })
             ] })
           ] })
         }
       ),
-      /* @__PURE__ */ s("div", { className: C.inputContainer({ error: k, size: h }), children: /* @__PURE__ */ s(
-        "input",
-        {
-          ...A,
-          ref: L,
-          className: b(C.input({ size: h })),
-          placeholder: _,
-          value: t,
-          onChange: B,
-          onFocus: () => w(!0),
-          onBlur: () => w(!1),
-          "data-testid": R
-        }
-      ) })
+      /* @__PURE__ */ d("div", { className: b.inputContainer({ error: R, size: u }), children: [
+        /* @__PURE__ */ c(
+          "input",
+          {
+            ...A,
+            ref: L,
+            className: C(b.input({ size: u })),
+            placeholder: B,
+            value: t,
+            onChange: V,
+            onFocus: () => w(!0),
+            onBlur: () => w(!1),
+            "data-testid": z
+          }
+        ),
+        U
+      ] })
     ] });
   }
 );
-te.displayName = "PhoneInput";
+re.displayName = "PhoneInput";
 export {
-  te as PhoneInput,
-  te as default
+  re as PhoneInput,
+  re as default
 };

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/tailwind-config.d.ts

@@ -117,6 +117,7 @@ export declare const generateTailwindConfig: ({ brand, font, }: {
                 brand: Record<string | number, string>;
             };
             borderColor: Record<string, string>;
+            outline: Record<string, string>;
             borderRadius: {
                 readonly none: "0rem";
                 readonly xs: "0.125rem";

package/dist/tokens/tailwind-config.js

@@ -1,12 +1,12 @@
-import { alphaColors as a, colorScales as m, baseColors as g } from "./primitives/colors.js";
+import { alphaColors as a, colorScales as g, baseColors as d } from "./primitives/colors.js";
 import { typography as t } from "./primitives/typography.js";
-import { zIndex as d, shadows as h, borderRadius as p, spacing as n } from "./primitives/layout.js";
+import { zIndex as h, shadows as p, borderRadius as u, spacing as n } from "./primitives/layout.js";
 import { semanticTokens as f } from "./semantic.js";
-const i = /* @__PURE__ */ new Map(), u = () => ({
+const i = /* @__PURE__ */ new Map(), x = () => ({
   // Base colors
-  ...g,
+  ...d,
   // Color scales
-  ...m,
+  ...g,
   // Alpha colors
   "white-alpha": a.white,
   "black-alpha": a.black,
@@ -17,23 +17,23 @@ const i = /* @__PURE__ */ new Map(), u = () => ({
   const e = `semantic-${o}`;
   if (i.has(e))
     return i.get(e);
-  const r = x(o);
+  const r = b(o);
   return i.set(e, r), r;
-}, x = (o) => {
+}, b = (o) => {
   const e = {};
   try {
     const r = f.light[o];
     if (!r)
       return console.warn(`No tokens found for category: ${o}`), e;
     Object.keys(r).forEach((s) => {
-      const l = o === "border" ? `--color-border-${s}` : `--color-${o}-${s}`;
-      e[s] = `var(${l})`;
+      const m = o === "border" ? `--color-border-${s}` : `--color-${o}-${s}`;
+      e[s] = `var(${m})`;
     });
   } catch (r) {
     console.error(`Error generating semantic colors for ${o}:`, r);
   }
   return e;
-}, b = () => c("border"), C = () => ({
+}, l = () => c("border"), C = () => ({
   sm: "640px",
   // Small devices
   md: "768px",
@@ -72,14 +72,15 @@ const i = /* @__PURE__ */ new Map(), u = () => ({
       fontFamily: e || t.fontFamilies,
       // Colors (optimized with caching)
       colors: {
-        ...u(),
+        ...x(),
         brand: o
       },
-      borderColor: b(),
+      borderColor: l(),
+      outline: l(),
       // Visual Effects
-      borderRadius: p,
-      boxShadow: h,
-      zIndex: d,
+      borderRadius: u,
+      boxShadow: p,
+      zIndex: h,
       // Animation & Transitions
       transitionTimingFunction: {
         "bounce-gentle": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"

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.17",
+  "version": "1.0.19",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",