mcr-design-systems 1.0.85 → 1.0.91

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

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

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

@@ -0,0 +1,54 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+const m = ({
+  size: i = 24,
+  color: n = "currentColor",
+  className: r,
+  style: o,
+  onClick: C,
+  "aria-label": g,
+  title: a
+}) => {
+  const c = 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 10C19 6.13401 15.866 3 12 3C8.13401 3 5 6.13401 5 10C5 12.2992 6.25649 14.0524 7.97168 15.8389C8.39733 16.2822 8.8392 16.7168 9.29102 17.1611C9.7388 17.6015 10.1964 18.0518 10.6318 18.5107C11.1128 19.0176 11.5806 19.5514 12 20.1182C12.4194 19.5514 12.8872 19.0176 13.3682 18.5107C13.8036 18.0518 14.2612 17.6015 14.709 17.1611C15.1608 16.7168 15.6027 16.2822 16.0283 15.8389C17.7435 14.0524 19 12.2992 19 10ZM14 9.5C14 8.39543 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39543 10 9.5C10 10.6046 10.8954 11.5 12 11.5C13.1046 11.5 14 10.6046 14 9.5ZM21 10C21 13.1191 19.2564 15.3657 17.4717 17.2246C17.0223 17.6926 16.558 18.1476 16.1113 18.5869C15.6608 19.0301 15.2275 19.4575 14.8193 19.8877C13.9987 20.7526 13.3285 21.5793 12.8945 22.4473C12.7251 22.786 12.3788 23 12 23C11.6212 23 11.2749 22.786 11.1055 22.4473C10.6715 21.5793 10.0013 20.7526 9.18066 19.8877C8.77247 19.4575 8.33923 19.0301 7.88867 18.5869C7.44205 18.1476 6.97767 17.6926 6.52832 17.2246C4.74356 15.3657 3 13.1191 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10ZM16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5Z" 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,
+        ...o
+      },
+      onClick: C,
+      "aria-label": g || "marker-pin-02 icon",
+      title: a,
+      dangerouslySetInnerHTML: { __html: c }
+    }
+  );
+};
+export {
+  m as MarkerPin02Icon,
+  m as default
+};

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

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

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

@@ -0,0 +1,54 @@
+import { jsx as C } from "react/jsx-runtime";
+import f from "react";
+const A = ({
+  size: i = 24,
+  color: n = "currentColor",
+  className: r,
+  style: o,
+  onClick: g,
+  "aria-label": a,
+  title: c
+}) => {
+  const u = 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="M3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10C21 13.1191 19.2561 15.3655 17.4713 17.2244C17.0407 17.673 16.5965 18.1098 16.1671 18.5321L16.1114 18.5869C15.6608 19.0301 15.2274 19.4575 14.8192 19.8878C13.9985 20.7526 13.3284 21.5792 12.8944 22.4472C12.725 22.786 12.3788 23 12 23C11.6212 23 11.275 22.786 11.1056 22.4472C10.6716 21.5792 10.0015 20.7526 9.18085 19.8878C8.77261 19.4575 8.33924 19.0301 7.88863 18.5869L7.8328 18.532C7.40342 18.1097 6.9593 17.673 6.52865 17.2244C4.74387 15.3655 3 13.1191 3 10ZM15 9.5C15 11.1569 13.6569 12.5 12 12.5C10.3431 12.5 9 11.1569 9 9.5C9 7.84315 10.3431 6.5 12 6.5C13.6569 6.5 15 7.84315 15 9.5Z" 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 l = e.getAttribute("fill"), s = e.getAttribute("stroke");
+      l && l !== "none" && e.setAttribute("fill", n), s && s !== "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__ */ C(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: g,
+      "aria-label": a || "marker-pin-02 icon",
+      title: c,
+      dangerouslySetInnerHTML: { __html: u }
+    }
+  );
+};
+export {
+  A as MarkerPin02SolidIcon,
+  A 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' | 'dots-vertical' | 'download-01' | 'edit-02' | 'eye' | 'eye-off' | 'file-06' | 'filter-funnel-01' | 'folder-shield' | 'headphones-02' | 'heart' | 'help-circle' | 'image-03' | 'info-circle' | 'link-external-01' | 'loading-01' | 'log-out-01' | 'message-question-square' | 'minus' | 'plus' | 'refresh-cw-01' | 'search-lg' | 'search-md' | 'shield-tick' | 'trash-01' | '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' | 'dots-vertical' | 'download-01' | 'edit-02' | 'eye' | 'eye-off' | 'file-06' | 'filter-funnel-01' | 'folder-shield' | 'headphones-02' | 'heart' | 'help-circle' | 'image-03' | 'info-circle' | 'link-external-01' | 'loading-01' | 'log-out-01' | 'marker-pin-02' | 'message-question-square' | 'minus' | 'plus' | 'refresh-cw-01' | 'search-lg' | 'search-md' | 'shield-tick' | 'trash-01' | 'user-01' | 'user-03' | 'x-circle' | 'x-close';

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

@@ -100,7 +100,9 @@ const i = {
   "edit-02-solid": () => import("../generated/Edit02SolidIcon.js"),
   "trash-01-solid": () => import("../generated/Trash01SolidIcon.js"),
   "image-03": () => import("../generated/Image03Icon.js"),
-  "image-03-solid": () => import("../generated/Image03SolidIcon.js")
+  "image-03-solid": () => import("../generated/Image03SolidIcon.js"),
+  "marker-pin-02": () => import("../generated/MarkerPin02Icon.js"),
+  "marker-pin-02-solid": () => import("../generated/MarkerPin02SolidIcon.js")
 };
 export {
   i as MAP_ICON

package/dist/components/PIN/index.js

@@ -1,5 +1,5 @@
-import { jsxs as z, jsx as I } from "react/jsx-runtime";
-import { forwardRef as E, useState as T, useRef as S, useEffect as w, useCallback as P } from "react";
+import { jsxs as z, jsx as y } from "react/jsx-runtime";
+import { forwardRef as E, useState as P, useRef as S, useEffect as A, useCallback as I } from "react";
 import { pinInputVariants as $, pinVariants as G } from "./variants.js";
 import { Typography as J } from "../Typography/index.js";
 import Q from "../TextField/HelperText.js";
@@ -8,83 +8,84 @@ import { dataTestId as U } from "../../shared/utils/dataTestId.js";
 const W = E(
   ({
     length: r = 4,
-    mask: B = !1,
-    error: D,
-    loading: v = !1,
-    disabled: y = !1,
-    onChange: i,
+    mask: b = !1,
+    error: B,
+    loading: V = !1,
+    disabled: w = !1,
+    onChange: n,
     onComplete: X,
-    value: V = "",
-    autoFocus: F = !0,
-    className: b,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    value: v = "",
+    autoFocus: T = !0,
+    className: D,
     label: j,
-    helperText: A,
-    size: C = "medium",
-    showValidationError: n = !0,
-    ...K
-  }, R) => {
-    const [a, f] = T(
-      Array.from({ length: r }, (s, t) => V[t] || "")
-    ), [m, _] = T(!1), [N, c] = T(""), o = S([]);
-    w(() => {
-      const s = Array.from({ length: r }, (t, e) => V[e] || "");
-      f(s), s.join("").length === r && c("");
-    }, [V, r]), w(() => {
-      F && !y && o.current[0] && o.current[0].focus();
-    }, [F, y]);
-    const q = P(
+    helperText: F,
+    size: h = "medium",
+    showValidationError: u = !0,
+    ...C
+  }, K) => {
+    const [a, f] = P(
+      Array.from({ length: r }, (s, t) => v[t] || "")
+    ), [m, R] = P(!1), [N, l] = P(""), o = S([]);
+    A(() => {
+      const s = Array.from({ length: r }, (t, e) => v[e] || "");
+      f(s), s.join("").length === r && l("");
+    }, [v, r]), A(() => {
+      T && !w && o.current[0] && o.current[0].focus();
+    }, [T, w]);
+    const _ = I(
       (s, t) => {
-        const e = t.replace(/\D/g, "").slice(-1), l = [...a];
-        l[s] = e, f(l);
-        const u = l.join("");
-        i?.(u), N && c(""), e && s < r - 1 && o.current[s + 1]?.focus();
+        const e = t.replace(/\D/g, "").slice(-1), c = [...a];
+        c[s] = e, f(c);
+        const i = c.join("");
+        n?.(i), N && l(""), e && s < r - 1 && o.current[s + 1]?.focus();
       },
-      [a, r, i, N]
-    ), O = P(
+      [a, r, n, N]
+    ), q = I(
       (s, t) => {
         if (t.key === "Backspace") {
           if (!a[s] && s > 0) {
             const e = [...a];
-            e[s - 1] = "", f(e), o.current[s - 1]?.focus(), i?.(e.join(""));
-            const u = [...e].filter(
-              (d) => d.trim() !== ""
+            e[s - 1] = "", f(e), o.current[s - 1]?.focus(), n?.(e.join(""));
+            const i = [...e].filter(
+              (p) => p.trim() !== ""
             ).length;
-            c(
-              u === 0 && m && n ? "Please enter an OTP. This is a required field." : ""
+            l(
+              i === 0 && m && u ? "Please enter an OTP. This is a required field." : ""
             );
           } else if (a[s]) {
             const e = [...a];
-            e[s] = "", f(e), i?.(e.join(""));
-            const u = [...e].filter(
-              (d) => d.trim() !== ""
+            e[s] = "", f(e), n?.(e.join(""));
+            const i = [...e].filter(
+              (p) => p.trim() !== ""
             ).length;
-            c(
-              u === 0 && m && n ? "Please enter an OTP. This is a required field." : ""
+            l(
+              i === 0 && m && u ? "Please enter an OTP. This is a required field." : ""
             );
           }
         } else t.key === "ArrowLeft" && s > 0 ? o.current[s - 1]?.focus() : t.key === "ArrowRight" && s < r - 1 ? o.current[s + 1]?.focus() : t.key === "v" && (t.metaKey || t.ctrlKey) && (t.preventDefault(), navigator.clipboard.readText().then((e) => {
-          const l = e.replace(/\D/g, "").slice(0, r), u = Array.from({ length: r }, (Y, h) => l[h] || "");
-          f(u), i?.(u.join(""));
-          const d = Math.min(l.length, r - 1);
-          o.current[d]?.focus();
+          const c = e.replace(/\D/g, "").slice(0, r), i = Array.from({ length: r }, (Y, M) => c[M] || "");
+          f(i), n?.(i.join(""));
+          const p = Math.min(c.length, r - 1);
+          o.current[p]?.focus();
         }));
       },
-      [a, r, i, m, n]
-    ), H = P((s) => {
-      o.current[s]?.select(), _(!0);
-    }, []), L = P(() => {
+      [a, r, n, m, u]
+    ), O = I((s) => {
+      o.current[s]?.select(), R(!0);
+    }, []), g = I(() => {
       setTimeout(() => {
         !o.current.some(
           (t) => t === document.activeElement
-        ) && m && n && (a.filter(
+        ) && m && u && (a.filter(
           (e) => e.trim() !== ""
-        ).length < r ? c(
+        ).length < r ? l(
           "Please enter an OTP. This is a required field."
-        ) : c(""));
+        ) : l(""));
       }, 10);
-    }, [m, a, n, r]), { "data-testid": M } = U("PIN"), p = D || N, g = p ? "error" : y ? "disabled" : v ? "loading" : "default";
-    return /* @__PURE__ */ z("div", { ref: R, className: k(G({ className: b })), ...K, children: [
-      j && /* @__PURE__ */ I(
+    }, [m, a, u, r]), { "data-testid": H } = U("PIN"), d = B || N, L = d ? "error" : w ? "disabled" : V ? "loading" : "default";
+    return /* @__PURE__ */ z("div", { ref: K, className: k(G({ className: D })), ...C, children: [
+      j && /* @__PURE__ */ y(
         J,
         {
           variants: "label",
@@ -94,42 +95,42 @@ const W = E(
           children: j
         }
       ),
-      /* @__PURE__ */ I("div", { className: "flex gap-xs", "data-testid": M, children: Array.from({ length: r }).map((s, t) => /* @__PURE__ */ I(
+      /* @__PURE__ */ y("div", { className: "flex gap-xs justify-center", "data-testid": H, children: Array.from({ length: r }).map((s, t) => /* @__PURE__ */ y(
         "input",
         {
           ref: (e) => {
             o.current[t] = e;
           },
-          type: B ? "password" : "text",
+          type: b ? "password" : "text",
           inputMode: "numeric",
           pattern: "[0-9]*",
           maxLength: 1,
           value: a[t],
-          disabled: y || v,
+          disabled: w || V,
           className: k(
             $({
-              size: C,
-              state: g
+              size: h,
+              state: L
             })
           ),
-          onChange: (e) => q(t, e.target.value),
-          onKeyDown: (e) => O(t, e),
-          onFocus: () => H(t),
-          onBlur: L,
+          onChange: (e) => _(t, e.target.value),
+          onKeyDown: (e) => q(t, e),
+          onFocus: () => O(t),
+          onBlur: g,
           "aria-label": `PIN digit ${t + 1}`,
           autoComplete: "off"
         },
         t
       )) }),
-      (A || p) && /* @__PURE__ */ I(
+      (F || d) && /* @__PURE__ */ y("div", { className: "w-full break-words overflow-wrap-anywhere leading-relaxed", children: /* @__PURE__ */ y(
         Q,
         {
-          text: p || A,
-          error: !!p,
-          haveIcon: !p,
-          className: "justify-start"
+          text: d || F,
+          error: !!d,
+          haveIcon: !d,
+          className: "justify-start whitespace-normal text-wrap"
         }
-      )
+      ) })
     ] });
   }
 );

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

@@ -126,6 +126,7 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     error?: boolean;
     haveIcon?: boolean;
     iconsCustom?: React.ReactNode;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 declare const _default: React.NamedExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/dist/components/Select/index.js

@@ -1,34 +1,34 @@
-import { jsxs as h, jsx as t, Fragment as Z } from "react/jsx-runtime";
-import { forwardRef as be, useState as _, useRef as ye, useEffect as Se, useCallback as R, useMemo as B, memo as We } from "react";
+import { jsxs as h, jsx as t, Fragment as H } from "react/jsx-runtime";
+import { forwardRef as we, useState as I, useRef as Se, useEffect as We, useCallback as R, useMemo as V, memo as Re } from "react";
 import { cn as d } from "../../shared/utils/cn.js";
-import { dataTestId as we } from "../../shared/utils/dataTestId.js";
-import { Typography as H } from "../Typography/index.js";
+import { dataTestId as Me } from "../../shared/utils/dataTestId.js";
+import { Typography as O } from "../Typography/index.js";
 import x from "../Icon/Icon.js";
-import { Dropdown as I } from "../Dropdown/index.js";
-import { selectVariants as Re } from "./helper/variants.js";
-import O from "../Chip/index.js";
-import Me from "../TextField/HelperText.js";
-const ee = be(
+import { Dropdown as ee } from "../Dropdown/index.js";
+import { selectVariants as $e } from "./helper/variants.js";
+import te from "../Chip/index.js";
+import ke from "../TextField/HelperText.js";
+const re = we(
   ({
-    items: W = [],
+    items: w = [],
     value: r,
     onChange: N,
-    placeholder: b = "Select an option...",
+    placeholder: A = "Select an option...",
     disabled: s = !1,
     readOnly: n = !1,
-    loading: F = !1,
-    showCheckmark: P = !1,
+    loading: P = !1,
+    showCheckmark: B = !1,
     emptyText: D = "No options available",
     state: M,
     label: q,
-    helpText: te,
-    required: re = !1,
+    helpText: se,
+    required: ne = !1,
     leadingIcon: o,
     trailingIcon: p,
     mode: i = "single",
     maxDisplayChips: $ = 3,
-    moreItemsText: se = "+{count}",
-    trigger: ne,
+    moreItemsText: ae = "+{count}",
+    trigger: ce,
     side: z = "bottom",
     align: G = "start",
     sideOffset: J = 4,
@@ -38,16 +38,17 @@ const ee = be(
     size: c = "md",
     variant: k = "default",
     fullWidth: T = !1,
-    className: ae,
-    iconsSize: ce,
+    className: oe,
+    iconsSize: ie,
     "data-testid": u,
     width: C,
-    error: oe,
-    haveIcon: ie,
-    iconsCustom: le,
-    ...me
-  }, pe) => {
-    const [f, y] = _(!1), [j, fe] = _(0), E = ye(null), l = Re({
+    error: le,
+    haveIcon: me,
+    iconsCustom: pe,
+    onBlur: U,
+    ...fe
+  }, ue) => {
+    const [f, S] = I(!1), [j, he] = I(0), E = Se(null), l = $e({
       size: c,
       variant: k,
       fullWidth: T,
@@ -55,33 +56,33 @@ const ee = be(
       disabled: s,
       readOnly: n
     });
-    Se(() => {
+    We(() => {
       if (E.current) {
         const e = new ResizeObserver((a) => {
           for (const m of a)
-            fe(m.contentRect.width);
+            he(m.contentRect.width);
         });
         return e.observe(E.current), () => e.disconnect();
       }
     }, []);
-    const U = R(() => {
+    const X = R(() => {
       if (j === 0) return $;
-      const e = c === "sm" ? 100 : c === "lg" ? 140 : 120, a = 4, m = 32, S = 32, A = o ? 24 : 0, xe = m + S + A + 16, Ce = j - xe, Ae = Math.floor(
-        Ce / (e + a)
+      const e = c === "sm" ? 100 : c === "lg" ? 140 : 120, a = 4, m = 32, y = 32, b = o ? 24 : 0, be = m + y + b + 16, Ae = j - be, ye = Math.floor(
+        Ae / (e + a)
       );
-      return Math.max(1, Math.min(Ae, $));
-    }, [j, $, c, o]), X = R(
+      return Math.max(1, Math.min(ye, $));
+    }, [j, $, c, o]), Y = R(
       (e) => {
         if (!(s || n))
           if (i === "single")
             N?.(e);
           else {
-            const a = Array.isArray(r) ? r : [], m = a.includes(e) ? a.filter((S) => S !== e) : [...a, e];
+            const a = Array.isArray(r) ? r : [], m = a.includes(e) ? a.filter((y) => y !== e) : [...a, e];
             N?.(m);
           }
       },
       [i, r, N, s, n]
-    ), ue = R(
+    ), de = R(
       (e) => {
         if (i === "multiple" && Array.isArray(r) && !s && !n) {
           const a = r.filter((m) => m !== e);
@@ -89,33 +90,33 @@ const ee = be(
         }
       },
       [i, r, N, s, n]
-    ), he = R(() => {
+    ), Ne = R(() => {
       i === "multiple" && Array.isArray(r) && r.length > 0 && !s && !n && N?.([]);
-    }, [i, r, N, s, n]), g = B(() => {
+    }, [i, r, N, s, n]), g = V(() => {
       if (!r) return [];
       const e = [], a = Array.isArray(r) ? r : [r];
-      return ((S) => {
-        S.forEach((A) => {
-          "items" in A ? A.items.forEach((V) => {
-            a.includes(V.value) && e.push(V);
-          }) : a.includes(A.value) && e.push(A);
+      return ((y) => {
+        y.forEach((b) => {
+          "items" in b ? b.items.forEach((F) => {
+            a.includes(F.value) && e.push(F);
+          }) : a.includes(b.value) && e.push(b);
         });
-      })(W), e;
-    }, [r, W]), de = B(() => {
+      })(w), e;
+    }, [r, w]), ge = V(() => {
       if (i === "single") {
         const e = g[0];
-        return e ? e.label : b;
+        return e ? e.label : A;
       }
       return "";
-    }, [i, g, b]), w = B(() => {
+    }, [i, g, A]), W = V(() => {
       if (i !== "multiple" || !Array.isArray(r)) return [];
-      const e = U(), a = g.slice(0, e), m = g.length - e;
+      const e = X(), a = g.slice(0, e), m = g.length - e;
       return {
         displayItems: a,
         remainingCount: m,
         hasMore: m > 0
       };
-    }, [i, r, g, U]), Ne = C ? { width: typeof C == "number" ? `${C}px` : C } : {}, ge = d(l.container(), ae), v = (e) => {
+    }, [i, r, g, X]), ve = C ? { width: typeof C == "number" ? `${C}px` : C } : {}, xe = d(l.container(), oe), v = (e) => {
       switch (e) {
         case "sm":
           return 16;
@@ -126,7 +127,7 @@ const ee = be(
         default:
           return 16;
       }
-    }, Y = (e) => {
+    }, Z = (e) => {
       switch (e) {
         case "sm":
           return "small";
@@ -137,7 +138,11 @@ const ee = be(
         default:
           return "medium";
       }
-    }, ve = () => /* @__PURE__ */ h(
+    }, _ = (e) => {
+      S(e), !e && U && U(
+        new FocusEvent("blur")
+      );
+    }, Ce = () => /* @__PURE__ */ h(
       "div",
       {
         className: l.trigger(),
@@ -158,7 +163,7 @@ const ee = be(
                 "flex-1 truncate text-left",
                 g.length > 0 ? "text-fg-neutral-main" : l.placeholder()
               ),
-              children: de
+              children: ge
             }
           ),
           p ? /* @__PURE__ */ t("span", { className: l.trailingIcon(), children: p.node || p.name && /* @__PURE__ */ t(
@@ -182,17 +187,17 @@ const ee = be(
     return /* @__PURE__ */ h(
       "div",
       {
-        ref: pe,
-        className: ge,
-        style: Ne,
-        ...we(u || "select"),
-        ...me,
+        ref: ue,
+        className: xe,
+        style: ve,
+        ...Me(u || "select"),
+        ...fe,
         children: [
           q && /* @__PURE__ */ h("div", { className: "mb-1 flex items-center gap-[2px]", children: [
-            /* @__PURE__ */ t(H, { variants: "action", size: "sm", color: "fg-neutral-subtle", children: q }),
-            re && /* @__PURE__ */ t(H, { variants: "action", size: "sm", color: "fg-accent-error", children: "*" })
+            /* @__PURE__ */ t(O, { variants: "action", size: "sm", color: "fg-neutral-subtle", children: q }),
+            ne && /* @__PURE__ */ t(O, { variants: "action", size: "sm", color: "fg-accent-error", children: "*" })
           ] }),
-          /* @__PURE__ */ t("div", { className: "relative", children: i === "multiple" ? /* @__PURE__ */ h(Z, { children: [
+          /* @__PURE__ */ t("div", { className: "relative", children: i === "multiple" ? /* @__PURE__ */ h(H, { children: [
             /* @__PURE__ */ h(
               "div",
               {
@@ -217,20 +222,20 @@ const ee = be(
                         !s && !n && "cursor-pointer"
                       ),
                       onClick: (e) => {
-                        s || n || e.target.closest('[data-testid*="chip"]') || y(!f);
+                        s || n || e.target.closest('[data-testid*="chip"]') || S(!f);
                       },
                       children: [
-                        Array.isArray(w) ? null : /* @__PURE__ */ h(Z, { children: [
-                          w.displayItems.map((e) => /* @__PURE__ */ t(
+                        Array.isArray(W) ? null : /* @__PURE__ */ h(H, { children: [
+                          W.displayItems.map((e) => /* @__PURE__ */ t(
                             "div",
                             {
                               onClick: (a) => a.stopPropagation(),
                               className: "flex-shrink-0",
                               children: /* @__PURE__ */ t(
-                                O,
+                                te,
                                 {
-                                  size: Y(c),
-                                  onRemove: !s && !n ? () => ue(e.value) : void 0,
+                                  size: Z(c),
+                                  onRemove: !s && !n ? () => de(e.value) : void 0,
                                   className: "bg-bg-surface-level-3",
                                   variant: "neutral",
                                   trailingIcon: !s && !n ? {
@@ -244,21 +249,21 @@ const ee = be(
                             },
                             e.value
                           )),
-                          w.hasMore && /* @__PURE__ */ t(
+                          W.hasMore && /* @__PURE__ */ t(
                             "div",
                             {
                               onClick: (e) => e.stopPropagation(),
                               className: "flex-shrink-0",
                               children: /* @__PURE__ */ t(
-                                O,
+                                te,
                                 {
-                                  size: Y(c),
+                                  size: Z(c),
                                   variant: "neutral",
                                   className: "self-center bg-bg-surface-level-3",
                                   dataTestIdName: `${u || "select"}-chip-more`,
-                                  children: se.replace(
+                                  children: ae.replace(
                                     "{count}",
-                                    w.remainingCount.toString()
+                                    W.remainingCount.toString()
                                   )
                                 }
                               )
@@ -272,7 +277,7 @@ const ee = be(
                               l.placeholder(),
                               !s && !n && "cursor-pointer"
                             ),
-                            children: b
+                            children: A
                           }
                         )
                       ]
@@ -283,7 +288,7 @@ const ee = be(
                       "button",
                       {
                         type: "button",
-                        onClick: he,
+                        onClick: Ne,
                         className: d(
                           "flex items-center justify-center p-1 rounded-sm transition-colors",
                           !s && !n && "cursor-pointer hover:bg-bg-neutral-subtle",
@@ -308,7 +313,7 @@ const ee = be(
                       {
                         type: "button",
                         onClick: () => {
-                          !s && !n && y(!f);
+                          !s && !n && S(!f);
                         },
                         className: d(
                           "flex items-center justify-center p-1",
@@ -339,19 +344,19 @@ const ee = be(
               }
             ),
             /* @__PURE__ */ t(
-              I,
+              ee,
               {
-                items: W,
+                items: w,
                 value: r,
-                onValueChange: X,
-                placeholder: b,
+                onValueChange: Y,
+                placeholder: A,
                 disabled: s,
-                loading: F,
-                showCheckmark: P,
+                loading: P,
+                showCheckmark: B,
                 emptyText: D,
                 state: M,
                 open: f,
-                onOpenChange: y,
+                onOpenChange: _,
                 side: z,
                 align: G,
                 sideOffset: J,
@@ -369,21 +374,21 @@ const ee = be(
           ] }) : (
             /* Single mode - use Dropdown normally */
             /* @__PURE__ */ t(
-              I,
+              ee,
               {
-                items: W,
+                items: w,
                 value: r,
                 onValueChange: (e) => {
-                  X(e), y(!1);
+                  Y(e), S(!1);
                 },
-                placeholder: b,
+                placeholder: A,
                 disabled: s,
-                loading: F,
-                showCheckmark: P,
+                loading: P,
+                showCheckmark: B,
                 emptyText: D,
                 state: M,
                 open: f,
-                onOpenChange: y,
+                onOpenChange: _,
                 side: z,
                 align: G,
                 sideOffset: J,
@@ -395,19 +400,19 @@ const ee = be(
                 fullWidth: T,
                 width: C,
                 "data-testid": u ? `${u}-dropdown` : void 0,
-                children: ne || ve()
+                children: ce || Ce()
               }
             )
           ) }),
           /* @__PURE__ */ t(
-            Me,
+            ke,
             {
               className: "mt-1",
-              text: te,
-              error: oe,
-              haveIcon: ie,
-              iconsSize: ce,
-              iconsCustom: le
+              text: se,
+              error: le,
+              haveIcon: me,
+              iconsSize: ie,
+              iconsCustom: pe
             }
           )
         ]
@@ -415,8 +420,8 @@ const ee = be(
     );
   }
 );
-ee.displayName = "Select";
-const qe = We(ee);
+re.displayName = "Select";
+const Ge = Re(re);
 export {
-  qe as default
+  Ge as default
 };

package/package.json

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