mcr-design-systems 1.0.9 → 1.0.11

package/dist/components/Badge/index.js

@@ -1,11 +1,11 @@
-import { jsx as r, jsxs as N } from "react/jsx-runtime";
-import l, { useMemo as f } from "react";
-import { tv as B } from "../../node_modules/tailwind-variants/dist/index.js";
-import { Typography as I } from "../Typography/index.js";
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import o, { useMemo as z } from "react";
+import { tv as N } from "../../node_modules/tailwind-variants/dist/index.js";
+import { Typography as B } from "../Typography/index.js";
 import "clsx";
 import "tailwind-merge";
-import { dataTestId as _ } from "../../shared/utils/dataTestId.js";
-const j = {
+import { dataTestId as I } from "../../shared/utils/dataTestId.js";
+const _ = {
   info: "bg-fg-accent-info-strong",
   success: "bg-fg-accent-success-strong",
   warning: "bg-fg-accent-warning-strong",
@@ -15,7 +15,7 @@ const j = {
   neutral: "bg-fg-neutral-subtle",
   outline: "bg-fg-neutral-subtle",
   boldest: "bg-bg-selected-boldest-rest"
-}, D = B({
+}, j = N({
   base: "font-medium inline-flex w-fit select-none items-center",
   variants: {
     variant: {
@@ -106,7 +106,7 @@ const j = {
       className: "bg-bg-selected-boldest-rest"
     }
   ]
-}), m = l.memo(({ icon: t, iconAriaLabel: e }) => /* @__PURE__ */ r(
+}), d = o.memo(({ icon: t, iconAriaLabel: e }) => /* @__PURE__ */ a(
   "span",
   {
     "aria-label": e,
@@ -115,72 +115,72 @@ const j = {
     children: typeof t == "function" ? t({ size: 16, name: "user-03" }) : t
   }
 ));
-m.displayName = "BadgeIcon";
-const p = l.memo(({ variant: t, emphasize: e }) => /* @__PURE__ */ r(
+d.displayName = "BadgeIcon";
+const f = o.memo(({ variant: t, emphasize: e }) => /* @__PURE__ */ a(
   "span",
   {
-    className: `h-1.5 w-1.5 rounded-full ${e ? "bg-fg-neutral-inverse" : j[t]}`,
+    className: `h-1.5 w-1.5 rounded-full ${e ? "bg-fg-neutral-inverse" : _[t]}`,
     "aria-hidden": "true"
   }
 ));
-p.displayName = "BadgeDot";
-const O = l.forwardRef(
+f.displayName = "BadgeDot";
+const D = o.forwardRef(
   ({
     children: t,
     icon: e,
-    iconAriaLabel: h,
-    variant: a = "neutral",
+    iconAriaLabel: m,
+    variant: r = "neutral",
     size: n = "md",
     pill: g = !1,
-    emphasize: v = !1,
+    emphasize: p = !1,
     disabled: s = !1,
     className: c,
     withIcon: i,
-    dataTestIdName: b = "Badge",
-    dot: u = !1,
-    ...x
-  }, w) => {
-    const o = a === "outline" ? !1 : v, { id: y } = f(() => _(b), [b]), d = !!e, z = f(
-      () => D({
-        variant: a,
+    dataTestIdName: h = "Badge",
+    dot: b = !1,
+    ...v
+  }, x) => {
+    const l = r === "outline" ? !1 : p, u = !!e, w = z(
+      () => j({
+        variant: r,
         size: n,
         pill: g,
-        emphasize: o,
+        emphasize: l,
         disabled: s,
-        withIcon: d || i,
+        withIcon: u || i,
         className: c
       }),
       [
-        a,
+        r,
         n,
         g,
-        o,
+        l,
         s,
-        d,
+        u,
         i,
         c
       ]
     );
-    return !t && !e && !u ? null : /* @__PURE__ */ N(
+    return !t && !e && !b ? null : /* @__PURE__ */ y(
       "div",
       {
-        ref: w,
-        className: z,
+        ref: x,
+        className: w,
         "aria-disabled": s || void 0,
         role: "status",
         tabIndex: s ? -1 : 0,
-        "data-testid": y,
-        ...x,
+        ...I(h),
+        ...v,
         children: [
-          e && /* @__PURE__ */ r(m, { icon: e, iconAriaLabel: h }),
-          u && !e && /* @__PURE__ */ r(p, { variant: a, emphasize: o }),
-          t && /* @__PURE__ */ r(I, { variants: "action-emphasize", size: n, children: t })
+          e && /* @__PURE__ */ a(d, { icon: e, iconAriaLabel: m }),
+          b && !e && /* @__PURE__ */ a(f, { variant: r, emphasize: l }),
+          t && /* @__PURE__ */ a(B, { variants: "action-emphasize", size: n, children: t })
         ]
       }
     );
   }
 );
-O.displayName = "Badge";
+D.displayName = "Badge";
 export {
-  O as default
+  D as default
 };

package/dist/components/Button/index.js

@@ -1,25 +1,26 @@
-import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { jsxs as T, jsx as n } from "react/jsx-runtime";
 import "react";
-import { button as T } from "./helper/index.js";
-import { cn as O } from "../../shared/utils/cn.js";
-import { dataTestId as S } from "../../shared/utils/dataTestId.js";
+import { button as v } from "./helper/index.js";
+import { cn as w } from "../../shared/utils/cn.js";
+import { dataTestId as L } from "../../shared/utils/dataTestId.js";
 import a from "../Icon/Icon.js";
-import { Typography as j } from "../Typography/index.js";
-function A({
-  variant: o = "primary",
-  size: n = "medium",
+import { Typography as O } from "../Typography/index.js";
+import S from "../Loading/index.js";
+function D({
+  variant: i = "primary",
+  size: s = "medium",
   iconOnly: u = !1,
   leadingIcon: m,
   trailingIcon: c,
-  icon: i,
+  icon: o,
   loading: e = !1,
   className: l,
   children: d,
   disabled: p,
   ...f
 }) {
-  const t = u && !!i, h = () => {
-    switch (n) {
+  const r = u && !!o, h = () => {
+    switch (s) {
       case "xx-small":
         return 16;
       case "x-small":
@@ -33,7 +34,7 @@ function A({
         return 24;
     }
   }, x = () => {
-    switch (n) {
+    switch (s) {
       case "xx-small":
         return "sm";
       case "x-small":
@@ -47,40 +48,32 @@ function A({
       default:
         return "md";
     }
-  }, s = h(), y = e ? /* @__PURE__ */ r(
-    a,
-    {
-      name: "activity-heart",
-      size: s,
-      className: "animate-spin",
-      "aria-hidden": "true"
-    }
-  ) : null, I = m && !e ? /* @__PURE__ */ r(a, { name: m, size: s, "aria-hidden": "true" }) : null, z = c && !e ? /* @__PURE__ */ r(a, { name: c, size: s, "aria-hidden": "true" }) : null, b = t && !e ? /* @__PURE__ */ r(a, { name: i, size: s, "aria-hidden": "true" }) : null;
-  return /* @__PURE__ */ v(
+  }, t = h(), y = e ? /* @__PURE__ */ n(S, { width: t, thickness: t / 5 }) : null, I = m && !e ? /* @__PURE__ */ n(a, { name: m, size: t, "aria-hidden": "true" }) : null, b = c && !e ? /* @__PURE__ */ n(a, { name: c, size: t, "aria-hidden": "true" }) : null, z = r && !e ? /* @__PURE__ */ n(a, { name: o, size: t, "aria-hidden": "true" }) : null;
+  return /* @__PURE__ */ T(
     "button",
     {
-      className: O(
-        T({
-          variant: o,
-          size: n,
-          iconOnly: t,
-          spacing: t ? void 0 : n
+      className: w(
+        v({
+          variant: i,
+          size: s,
+          iconOnly: r,
+          spacing: r ? void 0 : s
         }),
         l
       ),
       disabled: p || e,
-      ...S("button"),
+      ...L("button"),
       ...f,
       children: [
         e && y,
-        !e && !t && I,
-        !e && t && b,
-        !t && /* @__PURE__ */ r(j, { as: "div", variants: "action", size: x(), children: d }),
-        !e && !t && z
+        !e && !r && I,
+        !e && r && z,
+        !r && /* @__PURE__ */ n(O, { as: "div", variants: "action", size: x(), children: d }),
+        !e && !r && b
       ]
     }
   );
 }
 export {
-  A as default
+  D as default
 };

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

@@ -1,11 +1,12 @@
 import { default as React } from 'react';
-interface CheckBoxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface CheckBoxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     label?: string;
     helpText?: string;
     id?: string;
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    checkBoxSize?: 'medium' | 'large';
 }
 declare const CheckBox: React.ForwardRefExoticComponent<CheckBoxProps & React.RefAttributes<HTMLInputElement>>;
 export default CheckBox;

package/dist/components/CheckBox/index.js

@@ -0,0 +1,85 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import b, { useRef as k, useEffect as N } from "react";
+import { checkBoxInputContainerVariants as I, checkBoxVariants as R } from "./variants.js";
+import { Typography as d } from "../Typography/index.js";
+import "clsx";
+import "tailwind-merge";
+import { dataTestId as z } from "../../shared/utils/dataTestId.js";
+import B from "../Icon/Icon.js";
+const j = b.forwardRef(
+  ({
+    disabled: o,
+    label: m,
+    helpText: l,
+    id: f,
+    checked: a,
+    onChange: s,
+    indeterminate: t,
+    onCheckedChange: c,
+    checkBoxSize: u = "medium",
+    ...h
+  }, n) => {
+    const p = k(null);
+    N(() => {
+      const r = p.current || n?.current;
+      r && (r.indeterminate = !!t);
+    }, [t, n]);
+    const x = (r) => {
+      const v = r.target.checked;
+      s && s(r), c && c(v);
+    }, g = () => t ? "minus" : "check", y = () => t || a;
+    return /* @__PURE__ */ i("div", { ...z("checkbox"), className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ i("div", { className: I({}), children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ...h,
+            ref: n || p,
+            defaultChecked: a,
+            id: f,
+            value: a ? "on" : "off",
+            checked: s || c ? a : void 0,
+            className: R({ disabled: o, indeterminate: t }),
+            type: "checkbox",
+            disabled: o,
+            onChange: x
+          }
+        ),
+        /* @__PURE__ */ e(
+          B,
+          {
+            className: `pointer-events-none absolute left-1/2 top-1/2 z-0 -translate-x-1/2 -translate-y-1/2 transition-opacity text-fg-checkbox ${y() ? "opacity-100" : "opacity-0"}`,
+            size: 16,
+            name: g()
+          }
+        )
+      ] }),
+      m && /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ e(
+          d,
+          {
+            htmlFor: f,
+            as: "label",
+            variants: "body",
+            size: u == "medium" ? "md" : "lg",
+            color: o ? "fg-brand-disabled" : "fg-neutral-main",
+            children: m
+          }
+        ),
+        l && /* @__PURE__ */ e(
+          d,
+          {
+            variants: "paragraph",
+            size: u === "medium" ? "sm" : "md",
+            color: o ? "fg-brand-disabled" : "fg-neutral-subtle",
+            children: l
+          }
+        )
+      ] })
+    ] });
+  }
+);
+j.displayName = "CheckBox";
+export {
+  j as default
+};

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

@@ -4,7 +4,7 @@ export declare const checkBoxInputContainerVariants: import('tailwind-variants')
         medium: string;
         large: string;
     };
-}, undefined, "relative flex items-center", {
+}, undefined, "relative flex items-center mt-1", {
     size: {
         small: string;
         medium: string;
@@ -16,7 +16,7 @@ export declare const checkBoxInputContainerVariants: import('tailwind-variants')
         medium: string;
         large: string;
     };
-}, undefined, "relative flex items-center", unknown, unknown, undefined>>;
+}, undefined, "relative flex items-center mt-1", unknown, unknown, undefined>>;
 export declare const checkBoxVariants: import('tailwind-variants').TVReturnType<{
     size: {
         small: string;

package/dist/components/CheckBox/variants.js

@@ -0,0 +1,39 @@
+import { tv as e } from "../../node_modules/tailwind-variants/dist/index.js";
+const a = e({
+  base: "relative flex items-center mt-1",
+  variants: {
+    size: {
+      small: "size-4",
+      medium: "size-5",
+      large: "size-6"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+}), d = e({
+  // base: "before:content[''] checked:bg-foreground-brand peer cursor-pointer appearance-none rounded-[4px] border-2 border-neutral-strongest transition-all transition-colors duration-0 checked:border-none hover:shadow-hover-stage disabled:hover:shadow-none",
+  base: "before:content[''] peer cursor-pointer appearance-none rounded-sm border-2 border-neutral-strongest transition-all transition-colors duration-0 duration-300 bg-bg-level-2 checked:bg-bg-brand-rest checked:hover:bg-bg-brand-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bg-brand-rest",
+  variants: {
+    size: {
+      small: "size-4",
+      medium: "size-5",
+      large: "size-6"
+    },
+    disabled: {
+      true: "disabled:border-foreground-disabled cursor-default border-neutral bg-bg-level-2 checked:border-none disabled:cursor-not-allowed disabled:bg-bg-level-2 checked:disabled:bg-bg-brand-disabled",
+      false: "checked:border-active hover:border-fg-brand-rest checked:hover:border-bg-brand-hover"
+    },
+    indeterminate: {
+      true: "bg-bg-brand-rest border-bg-brand-rest hover:bg-bg-brand-hover hover:border-bg-brand-hover",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+export {
+  a as checkBoxInputContainerVariants,
+  d as checkBoxVariants
+};

package/dist/components/InputBase/index.js

@@ -32,6 +32,7 @@ const q = (n) => {
     error: j,
     clearText: M,
     optionalProps: h,
+    // inputSize,
     ...e
   }, k) => {
     const [L, v] = D(!1), g = V || q(f), c = B(

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

@@ -1,5 +1,5 @@
 import { InputBaseProps } from '../InputBase';
-interface InputNumberProps extends InputBaseProps {
+export interface InputNumberProps extends InputBaseProps {
     label?: string;
     helpText?: string;
     error?: boolean;

package/dist/components/InputNumber/index.js

@@ -0,0 +1,70 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { forwardRef as y, memo as g } from "react";
+import "clsx";
+import "tailwind-merge";
+import { dataTestId as v } from "../../shared/utils/dataTestId.js";
+import b from "../InputBase/index.js";
+import { Typography as a } from "../Typography/index.js";
+import I from "../Icon/Icon.js";
+const c = y(
+  ({
+    label: i,
+    helpText: n,
+    error: e,
+    color: s,
+    disabled: p,
+    width: l,
+    padding: d,
+    centered: f = !0,
+    ...t
+  }, u) => /* @__PURE__ */ o(
+    "div",
+    {
+      style: {
+        width: l
+      },
+      ...v("InputNumber"),
+      children: [
+        i && /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ r(a, { variants: "label", size: "md", color: "default", children: i }),
+          t.required && /* @__PURE__ */ r(a, { variants: "label", size: "md", color: "fg-accent-error", children: "*" })
+        ] }),
+        /* @__PURE__ */ r(
+          b,
+          {
+            ref: u,
+            disabled: p,
+            width: l,
+            type: "number",
+            onKeyDown: (m) => {
+              ["e", "E", "+", "-", "."].includes(m.key) && m.preventDefault();
+            },
+            ...t,
+            color: e ? "error" : s || "primary",
+            style: {
+              padding: d,
+              textAlign: f ? "center" : "left",
+              ...t.style
+            }
+          }
+        ),
+        n && /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
+          e && /* @__PURE__ */ r(I, { name: "alert-circle", color: "error" }),
+          /* @__PURE__ */ r(
+            a,
+            {
+              variants: "paragraph",
+              color: e ? "fg-accent-error" : "fg-neutral-subtle",
+              children: n
+            }
+          )
+        ] })
+      ]
+    }
+  )
+);
+c.displayName = "InputNumber";
+const w = g(c);
+export {
+  w as default
+};

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

@@ -1,6 +1,7 @@
 export interface LoadingProps {
     width?: string | number;
     thickness?: number;
+    className?: string;
 }
-declare const Loading: ({ width, thickness }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
+declare const Loading: ({ width, thickness, className }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
 export default Loading;

package/dist/components/Loading/index.js

@@ -1,22 +1,24 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import "clsx";
 import "tailwind-merge";
-import { dataTestId as t } from "../../shared/utils/dataTestId.js";
-const f = ({ width: i = 80, thickness: a = 12 }) => /* @__PURE__ */ d(
+import { dataTestId as o } from "../../shared/utils/dataTestId.js";
+const s = ({ width: a = 80, thickness: r = 12, className: t }) => /* @__PURE__ */ i(
   "div",
   {
-    ...t("Loading"),
-    className: "loading-spinner",
+    ...o("Loading"),
+    className: `loading-spinner ${t ?? ""}`,
     style: {
-      width: i,
+      width: a,
       aspectRatio: "1",
       borderRadius: "50%",
-      background: `radial-gradient(farthest-side, #d4d4d8 94%, #0000) top/${a}px ${a}px no-repeat, conic-gradient(#fff 10%, #d4d4d8)`,
-      WebkitMask: `radial-gradient(farthest-side, #0000 calc(100% - ${a}px), #fff 0)`,
-      animation: "l13 1s infinite linear"
+      background: `radial-gradient(farthest-side, currentColor 94%, #0000) top/${r}px ${r}px no-repeat, conic-gradient(transparent 10%, currentColor)`,
+      WebkitMask: `radial-gradient(farthest-side, #0000 calc(100% - ${r}px), #fff 0)`,
+      animation: "l13 1s infinite linear",
+      color: "inherit"
+      // inherit color from Tailwind class
     }
   }
 );
 export {
-  f as default
+  s as default
 };

package/dist/components/PhoneInput/index.js

@@ -1,7 +1,7 @@
 import { jsxs as l, jsx as s } 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 { cn as C } 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";
@@ -19,7 +19,7 @@ const v = ({
   return /* @__PURE__ */ s("div", { className: "w-[30px] h-[20px] overflow-hidden rounded-xs", children: t === void 0 ? /* @__PURE__ */ s(K, {}) : /* @__PURE__ */ s(
     "div",
     {
-      className: b(),
+      className: C(),
       style: {
         backgroundImage: `url('${Y}')`,
         backgroundPosition: `${t.x}px ${t.y}px`,
@@ -72,20 +72,20 @@ const v = ({
     // placeholder = 'Enter phone number',
     ...k
   }, A) => {
-    const [y, L] = n.useState(!1), [T, w] = n.useState(!1), [i, V] = n.useState(
+    const [b, L] = n.useState(!1), [T, y] = n.useState(!1), [i, V] = n.useState(
       t || a[0]?.code || "us"
-    ), [h, S] = n.useState(""), g = n.useRef(null), I = y, x = n.useCallback((e) => {
-      L(e), e || S("");
+    ), [h, w] = n.useState(""), S = n.useRef(null), I = b, g = n.useCallback((e) => {
+      L(e), e || w("");
     }, []), m = n.useMemo(
       () => a.find((e) => e.code === i) || a[0],
       [a, i]
-    ), _ = n.useMemo(() => d || ee(i), [i, d]), C = q({
+    ), _ = n.useMemo(() => d || ee(i), [i, d]), x = q({
       size: z,
       opened: I,
       inputFocused: T
     }), $ = n.useCallback(
       (e) => {
-        if (o?.(e), x(!1), V(e.code), t && t.trim()) {
+        if (o?.(e), g(!1), V(e.code), t && t.trim()) {
           const r = F(
             t,
             e.code
@@ -97,7 +97,7 @@ const v = ({
           });
         }
       },
-      [o, x, t, c]
+      [o, g, t, c]
     ), E = n.useMemo(() => a.filter(
       (e) => e.name.toLowerCase().includes(h.toLowerCase()) || e.code.toLowerCase().includes(h.toLowerCase())
     ).map((e) => ({
@@ -137,12 +137,12 @@ const v = ({
       },
       [m, c, i, t]
     );
-    return console.log(g.current?.clientWidth), /* @__PURE__ */ l("div", { className: b("flex items-center", O), ref: g, children: [
+    return /* @__PURE__ */ l("div", { className: C("flex items-center", O), ref: S, children: [
       /* @__PURE__ */ s(
         H,
         {
-          open: y,
-          onOpenChange: x,
+          open: b,
+          onOpenChange: g,
           items: E,
           value: i,
           onValueChange: (e) => {
@@ -157,10 +157,10 @@ const v = ({
           searchPlaceholder: P,
           enableVirtualization: !0,
           onSearchChange: (e) => {
-            S(e);
+            w(e);
           },
-          width: g.current?.clientWidth || "auto",
-          children: /* @__PURE__ */ l("div", { className: C.countryButton(), children: [
+          width: S.current?.clientWidth || "auto",
+          children: /* @__PURE__ */ l("div", { className: x.countryButton(), children: [
             /* @__PURE__ */ s(v, { countryCode: i }),
             /* @__PURE__ */ l("div", { className: "flex gap-xs-4", children: [
               /* @__PURE__ */ l(N, { variants: "body", size: "md", children: [
@@ -172,17 +172,17 @@ const v = ({
           ] })
         }
       ),
-      /* @__PURE__ */ s("div", { className: C.inputContainer({ error: R }), children: /* @__PURE__ */ s(
+      /* @__PURE__ */ s("div", { className: x.inputContainer({ error: R }), children: /* @__PURE__ */ s(
         "input",
         {
           ...k,
           ref: A,
-          className: b(C.input()),
+          className: C(x.input()),
           placeholder: _,
           value: t,
           onChange: B,
-          onFocus: () => w(!0),
-          onBlur: () => w(!1),
+          onFocus: () => y(!0),
+          onBlur: () => y(!1),
           "data-testid": D
         }
       ) })

package/dist/components/TextField/HelperText.d.ts

@@ -5,6 +5,7 @@ export interface HelpTextProps {
     haveIcon?: boolean;
     iconsCustom?: React.ReactNode;
     className?: string;
+    iconsSize?: number;
 }
 declare const HelpText: React.FC<HelpTextProps>;
 export default HelpText;

package/dist/components/TextField/HelperText.js

@@ -1,43 +1,44 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import "react";
-import { Typography as c } from "../Typography/index.js";
+import { Typography as f } from "../Typography/index.js";
 import s from "../Icon/Icon.js";
-const u = ({
-  text: r,
-  error: a = !1,
-  haveIcon: l = !0,
-  iconsCustom: t,
-  className: n
-}) => r ? /* @__PURE__ */ i("div", { className: `flex items-center gap-1 ${n || ""}`, children: [
-  a && (t || /* @__PURE__ */ e(
+const d = ({
+  text: t,
+  error: r = !1,
+  haveIcon: n = !0,
+  iconsCustom: l,
+  className: m,
+  iconsSize: e = 16
+}) => t ? /* @__PURE__ */ c("div", { className: `flex items-center gap-1 ${m || ""}`, children: [
+  r && (l || /* @__PURE__ */ a(
     s,
     {
       name: "alert-octagon",
       className: "text-fg-accent-error",
-      variant: "solid",
-      size: 16
+      size: typeof e == "number" ? e : 16,
+      variant: "solid"
     }
   )),
-  l && !a && /* @__PURE__ */ e(
+  n && !r && /* @__PURE__ */ a(
     s,
     {
       name: "help-circle",
       variant: "line",
       className: "text-fg-neutral-subtle",
-      size: 16
+      size: typeof e == "number" ? e : 16
     }
   ),
-  /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
-    c,
+  /* @__PURE__ */ a("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ a(
+    f,
     {
       variants: "paragraph",
       size: "sm",
-      color: a ? "fg-accent-error" : "fg-neutral-subtle",
+      color: r ? "fg-accent-error" : "fg-neutral-subtle",
       className: "font-body-sm",
-      children: r
+      children: t
     }
   ) })
 ] }) : null;
 export {
-  u as default
+  d as default
 };

package/dist/components/TextField/index.js

@@ -1,50 +1,51 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import { forwardRef as T, memo as p } from "react";
 import I from "../InputBase/index.js";
-import { Typography as m } from "../Typography/index.js";
+import { Typography as n } from "../Typography/index.js";
 import H from "./HelperText.js";
 import "clsx";
 import "tailwind-merge";
 import { dataTestId as A } from "../../shared/utils/dataTestId.js";
 const d = T(
   ({
-    label: n,
+    label: s,
     helpText: x,
-    error: s,
-    color: o,
-    disabled: f,
+    error: l,
+    color: f,
+    disabled: o,
     readOnly: u,
-    width: l,
+    width: c,
     type: i,
     iconsCustom: g,
-    iconsSize: c = 24,
+    iconsSize: m = 24,
     fontSize: h,
     optionalProps: e,
     indicatorLength: v,
     haveIcon: y,
+    // inputSize = 'md',
     clearText: b,
     ...t
   }, N) => /* @__PURE__ */ r(
     "div",
     {
       style: {
-        width: l
+        width: c
       },
       ...A("TextField"),
       children: [
         /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
-          n && /* @__PURE__ */ r("div", { className: "mb-1 flex items-center gap-[2px]", children: [
+          s && /* @__PURE__ */ r("div", { className: "mb-1 flex items-center gap-[2px]", children: [
             /* @__PURE__ */ a(
-              m,
+              n,
               {
                 variants: "action",
                 size: "sm",
                 color: "fg-neutral-subtle",
-                children: n
+                children: s
               }
             ),
             t.required && /* @__PURE__ */ a(
-              m,
+              n,
               {
                 variants: "action",
                 size: "sm",
@@ -55,7 +56,7 @@ const d = T(
             )
           ] }),
           i === "textarea" && e?.showIndicator && /* @__PURE__ */ r(
-            m,
+            n,
             {
               variants: "action",
               size: "sm",
@@ -74,12 +75,12 @@ const d = T(
           I,
           {
             ref: N,
-            disabled: f,
+            disabled: o,
             readOnly: u,
-            width: l,
+            width: c,
             type: i,
             fontSize: h,
-            iconsSize: typeof c == "number" ? c : 24,
+            iconsSize: typeof m == "number" ? m : 24,
             optionalProps: e,
             clearText: b,
             InputComponent: i === "textarea" ? /* @__PURE__ */ a(
@@ -95,7 +96,7 @@ const d = T(
               }
             ) : void 0,
             ...t,
-            color: s ? "error" : o || "primary"
+            color: l ? "error" : f || "primary"
           }
         ),
         /* @__PURE__ */ a(
@@ -103,8 +104,9 @@ const d = T(
           {
             className: "mt-1",
             text: x,
-            error: s,
+            error: l,
             haveIcon: y,
+            iconsSize: m,
             iconsCustom: g
           }
         )

package/dist/index.d.ts

@@ -57,10 +57,14 @@ export type { InputDatePickerProps } from './components/InputDatePicker';
 export type { QuantityInputProps } from './components/QuantityInput';
 export { default as TextField } from './components/TextField';
 export type { TextFieldProps } from './components/TextField';
+export { default as InputNumber } from './components/InputNumber';
+export type { InputNumberProps } from './components/InputNumber';
 export { default as TopNavigationBar } from './components/TopNavigationBar';
 export type { TopNavigationBarProps } from './components/TopNavigationBar';
 export { default as InputBase } from './components/InputBase';
 export type { InputBaseProps } from './components/InputBase';
+export { default as CheckBox } from './components/CheckBox';
+export type { CheckBoxProps } from './components/CheckBox';
 export { Icons } from './components/Icon';
 export type { IconProps, IconName } from './components/Icon';
 export { default as HelperText } from './components/TextField/HelperText';

package/dist/index.js

@@ -4,15 +4,15 @@ import { default as x } from "./components/ButtonFilter/index.js";
 import { default as d } from "./components/Avatar/index.js";
 import { default as l } from "./components/AvatarGroup/index.js";
 import { default as n } from "./components/Loading/index.js";
-import { Box as g } from "./components/Box/index.js";
+import { Box as c } from "./components/Box/index.js";
 import { default as P } from "./components/Divider/index.js";
 import { Popover as I } from "./components/Popover/index.js";
 import { Dropdown as C } from "./components/Dropdown/index.js";
-import { default as w } from "./components/Select/index.js";
-import { MenuItem as S } from "./components/MenuItem/index.js";
-import { Typography as k } from "./components/Typography/index.js";
+import { default as b } from "./components/Select/index.js";
+import { MenuItem as w } from "./components/MenuItem/index.js";
+import { Typography as S } from "./components/Typography/index.js";
 import { Image as A } from "./components/Image/index.js";
-import { ToastProvider as R, Toast as V, ToastAction as M, ToastClose as F, ToastViewport as H } from "./components/Toast/index.js";
+import { ToastProvider as R, Toast as V, ToastAction as M, ToastClose as N, ToastViewport as F } from "./components/Toast/index.js";
 import { PhoneInput as z } from "./components/PhoneInput/index.js";
 import { ToastProvider as U } from "./components/Toast/ToastProvider.js";
 import { useToast as j } from "./components/Toast/hooks.js";
@@ -28,93 +28,97 @@ import { YearGrid as xo } from "./components/DatePicker/YearGrid.js";
 import { CalendarGrid as io } from "./components/DatePicker/CalendarGrid.js";
 import { DateRangePicker as uo } from "./components/DatePicker/DateRangePicker.js";
 import { default as To } from "./components/InputPassword/index.js";
-import { default as co } from "./components/InputDatePicker/index.js";
+import { default as go } from "./components/InputDatePicker/index.js";
 import { default as ho } from "./components/TextField/index.js";
-import { default as vo } from "./components/TopNavigationBar/index.js";
-import { default as Bo } from "./components/InputBase/index.js";
-import { default as Do } from "./components/Icon/Icon.js";
-import { default as bo } from "./components/TextField/HelperText.js";
-import { PIN as yo } from "./components/PIN/index.js";
-import { ProgressBar as Go } from "./components/ProgressBar/index.js";
-import { Breadcrumb as Vo } from "./components/Breadcrumb/index.js";
-import { default as Fo } from "./components/Modal/index.js";
-import { getColorVar as No, getSemanticColorVar as zo, getSpacingVar as Lo } from "./tokens/index.js";
+import { default as vo } from "./components/InputNumber/index.js";
+import { default as Bo } from "./components/TopNavigationBar/index.js";
+import { default as ko } from "./components/InputBase/index.js";
+import { default as Do } from "./components/CheckBox/index.js";
+import { default as yo } from "./components/Icon/Icon.js";
+import { default as Go } from "./components/TextField/HelperText.js";
+import { PIN as Vo } from "./components/PIN/index.js";
+import { ProgressBar as No } from "./components/ProgressBar/index.js";
+import { Breadcrumb as Ho } from "./components/Breadcrumb/index.js";
+import { default as Lo } from "./components/Modal/index.js";
+import { getColorVar as Yo, getSemanticColorVar as jo, getSpacingVar as qo } from "./tokens/index.js";
 import "clsx";
 import "tailwind-merge";
-import { dataTestId as Yo, generateTestId as jo } from "./shared/utils/dataTestId.js";
-import { alphaColors as Eo, baseColors as Jo, colorScales as Ko, ringColors as Oo } from "./tokens/primitives/colors.js";
-import { typography as Wo } from "./tokens/primitives/typography.js";
-import { borderRadius as Zo, shadows as _o, spacing as $o, transitions as or, zIndex as rr } from "./tokens/primitives/layout.js";
-import { ThemeProvider as tr } from "./tokens/theme.js";
-import { useTheme as pr } from "./tokens/hooks.js";
-import { themeUtils as mr } from "./tokens/utils.js";
-import { generateTailwindConfig as sr } from "./tokens/tailwind-config.js";
-import { semanticTokens as ir } from "./tokens/semantic.js";
+import { dataTestId as Jo, generateTestId as Ko } from "./shared/utils/dataTestId.js";
+import { alphaColors as Qo, baseColors as Wo, colorScales as Xo, ringColors as Zo } from "./tokens/primitives/colors.js";
+import { typography as $o } from "./tokens/primitives/typography.js";
+import { borderRadius as rr, shadows as er, spacing as tr, transitions as ar, zIndex as pr } from "./tokens/primitives/layout.js";
+import { ThemeProvider as mr } from "./tokens/theme.js";
+import { useTheme as sr } from "./tokens/hooks.js";
+import { themeUtils as ir } from "./tokens/utils.js";
+import { generateTailwindConfig as ur } from "./tokens/tailwind-config.js";
+import { semanticTokens as Tr } from "./tokens/semantic.js";
 export {
   a as Alert,
   d as Avatar,
   l as AvatarGroup,
-  g as Box,
-  Vo as Breadcrumb,
+  c as Box,
+  Ho as Breadcrumb,
   f as Button,
   x as ButtonFilter,
   io as CalendarGrid,
+  Do as CheckBox,
   _ as Chip,
   to as DatePicker,
   ao as DatePickerHeader,
   uo as DateRangePicker,
   P as Divider,
   C as Dropdown,
-  bo as HelperText,
-  Do as Icons,
+  Go as HelperText,
+  yo as Icons,
   A as Image,
-  Bo as InputBase,
-  co as InputDatePicker,
+  ko as InputBase,
+  go as InputDatePicker,
+  vo as InputNumber,
   To as InputPassword,
   n as Loading,
-  S as MenuItem,
-  Fo as Modal,
+  w as MenuItem,
+  Lo as Modal,
   fo as MonthGrid,
-  yo as PIN,
+  Vo as PIN,
   z as PhoneInput,
   I as Popover,
-  Go as ProgressBar,
+  No as ProgressBar,
   E as Radio,
   R as RadixToastProvider,
-  w as Select,
+  b as Select,
   Q as Sidebar,
   K as Switch,
   X as Tabs,
   ho as TextField,
-  tr as ThemeProvider,
+  mr as ThemeProvider,
   V as Toast,
   M as ToastAction,
-  F as ToastClose,
+  N as ToastClose,
   U as ToastProvider,
-  H as ToastViewport,
+  F as ToastViewport,
   oo as Tooltip,
   ro as TooltipProvider,
-  vo as TopNavigationBar,
-  k as Typography,
+  Bo as TopNavigationBar,
+  S as Typography,
   xo as YearGrid,
-  Eo as alphaColors,
-  Jo as baseColors,
-  Zo as borderRadius,
-  Ko as colorScales,
-  Yo as dataTestId,
-  sr as generateTailwindConfig,
-  jo as generateTestId,
-  No as getColorVar,
-  zo as getSemanticColorVar,
-  Lo as getSpacingVar,
-  Oo as ringColors,
-  ir as semanticTokens,
-  _o as shadows,
-  $o as spacing,
-  mr as themeUtils,
-  or as transitions,
-  Wo as typography,
-  pr as useTheme,
+  Qo as alphaColors,
+  Wo as baseColors,
+  rr as borderRadius,
+  Xo as colorScales,
+  Jo as dataTestId,
+  ur as generateTailwindConfig,
+  Ko as generateTestId,
+  Yo as getColorVar,
+  jo as getSemanticColorVar,
+  qo as getSpacingVar,
+  Zo as ringColors,
+  Tr as semanticTokens,
+  er as shadows,
+  tr as spacing,
+  ir as themeUtils,
+  ar as transitions,
+  $o as typography,
+  sr as useTheme,
   j as useToast,
-  rr as zIndex
+  pr as zIndex
 };

package/package.json

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