mcr-design-systems 1.0.214 → 1.0.216

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

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

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

@@ -0,0 +1,56 @@
+import { jsx as f } from "react/jsx-runtime";
+import u from "react";
+const v = ({
+  size: r = 24,
+  color: i = "currentColor",
+  className: C,
+  style: s,
+  onClick: o,
+  "aria-label": g,
+  title: a
+}) => {
+  const c = u.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 21.2002V10.7998C7 9.97632 6.99898 9.29843 7.04395 8.74805C7.08988 8.18599 7.18827 7.6689 7.43555 7.1836C7.81902 6.43109 8.43109 5.81902 9.1836 5.43555C9.6689 5.18827 10.186 5.08988 10.748 5.04395C11.2984 4.99898 11.9763 5 12.7998 5H18L18.0986 5.00488C18.3276 5.02757 18.5429 5.12883 18.707 5.29297L24.707 11.293C24.8946 11.4805 25 11.7348 25 12V21.2002C25 22.0237 25.001 22.7016 24.9561 23.252C24.9101 23.814 24.8117 24.3311 24.5645 24.8164C24.181 25.5689 23.5689 26.181 22.8164 26.5645C22.3311 26.8117 21.814 26.9101 21.252 26.9561C20.7016 27.001 20.0237 27 19.2002 27H12.7998C11.9763 27 11.2984 27.001 10.748 26.9561C10.186 26.9101 9.6689 26.8117 9.1836 26.5645C8.43109 26.181 7.81902 25.5689 7.43555 24.8164C7.18827 24.3311 7.08988 23.814 7.04395 23.252C6.99898 22.7016 7 22.0237 7 21.2002ZM20 20C20.5523 20 21 20.4477 21 21C21 21.5523 20.5523 22 20 22H12C11.4477 22 11 21.5523 11 21C11 20.4477 11.4477 20 12 20H20ZM20 16C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H12C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16H20ZM14 12C14.5523 12 15 12.4477 15 13C15 13.5523 14.5523 14 14 14H12C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12H14ZM9 21.2002C9 22.0566 9.00035 22.6388 9.03711 23.0889C9.07293 23.5273 9.13809 23.7518 9.21778 23.9082C9.40951 24.2845 9.71555 24.5905 10.0918 24.7822C10.2482 24.8619 10.4727 24.9271 10.9111 24.9629C11.3612 24.9997 11.9434 25 12.7998 25H19.2002C20.0566 25 20.6388 24.9997 21.0889 24.9629C21.5273 24.9271 21.7518 24.8619 21.9082 24.7822C22.2845 24.5905 22.5905 24.2845 22.7822 23.9082C22.8619 23.7518 22.9271 23.5273 22.9629 23.0889C22.9997 22.6388 23 22.0566 23 21.2002V13H19.5996C19.3362 13 19.0781 13.0011 18.8613 12.9834C18.6328 12.9647 18.3631 12.9204 18.0918 12.7822C17.7155 12.5905 17.4095 12.2845 17.2178 11.9082C17.0795 11.6369 17.0353 11.3672 17.0166 11.1387C16.9989 10.9218 17 10.6638 17 10.4004V7H12.7998C11.9434 7 11.3612 7.00035 10.9111 7.03711C10.4727 7.07293 10.2482 7.13809 10.0918 7.21778C9.71555 7.40951 9.40951 7.71555 9.21778 8.0918C9.13809 8.2482 9.07293 8.47272 9.03711 8.91113C9.00035 9.36117 9 9.94342 9 10.7998V21.2002ZM19 10.4004C19 10.6967 19.0012 10.859 19.0107 10.9756C19.0111 10.98 19.0114 10.9843 19.0117 10.9883C19.0157 10.9887 19.0199 10.9899 19.0244 10.9902C19.141 10.9998 19.3033 11 19.5996 11H21.5859L19 8.41406V10.4004Z" fill="black"/>
+<path d="M32 26C32 22.6863 29.3137 20 26 20C22.6863 20 20 22.6863 20 26C20 29.3137 22.6863 32 26 32C29.3137 32 32 29.3137 32 26Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 20.5C22.9624 20.5 20.5 22.9624 20.5 26C20.5 29.0376 22.9624 31.5 26 31.5C29.0376 31.5 31.5 29.0376 31.5 26C31.5 22.9624 29.0376 20.5 26 20.5ZM26.5 24C26.5 23.7239 26.2761 23.5 26 23.5C25.7239 23.5 25.5 23.7239 25.5 24V26C25.5 26.2761 25.7239 26.5 26 26.5C26.2761 26.5 26.5 26.2761 26.5 26V24ZM26 27.5C25.7239 27.5 25.5 27.7239 25.5 28C25.5 28.2761 25.7239 28.5 26 28.5H26.005C26.2811 28.5 26.505 28.2761 26.505 28C26.505 27.7239 26.2811 27.5 26.005 27.5H26Z" fill="#DC2626"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", r.toString()), t.setAttribute("height", r.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const l = e.getAttribute("fill"), n = e.getAttribute("stroke");
+      l && l !== "none" && e.setAttribute("fill", i), n && n !== "none" && e.setAttribute("stroke", i);
+    }), C) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${C}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [r, i, C]);
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: C,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...s
+      },
+      onClick: o,
+      "aria-label": g || "file-error icon",
+      title: a,
+      dangerouslySetInnerHTML: { __html: c }
+    }
+  );
+};
+export {
+  v as FileErrorIcon,
+  v as default
+};

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

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

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

@@ -0,0 +1,56 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+const A = ({
+  size: r = 24,
+  color: i = "currentColor",
+  className: C,
+  style: n,
+  onClick: o,
+  "aria-label": c,
+  title: g
+}) => {
+  const a = f.useMemo(() => {
+    const t = new DOMParser().parseFromString(`<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 21.2002V10.7998C7 9.97632 6.99898 9.29843 7.04395 8.74805C7.08988 8.18599 7.18827 7.6689 7.43555 7.1836C7.81902 6.43109 8.43109 5.81902 9.1836 5.43555C9.6689 5.18827 10.186 5.08988 10.748 5.04395C11.2984 4.99898 11.9763 5 12.7998 5H18L18.0986 5.00488C18.3276 5.02757 18.5429 5.12883 18.707 5.29297L24.707 11.293C24.8946 11.4805 25 11.7348 25 12V21.2002C25 22.0237 25.001 22.7016 24.9561 23.252C24.9101 23.814 24.8117 24.3311 24.5645 24.8164C24.181 25.5689 23.5689 26.181 22.8164 26.5645C22.3311 26.8117 21.814 26.9101 21.252 26.9561C20.7016 27.001 20.0237 27 19.2002 27H12.7998C11.9763 27 11.2984 27.001 10.748 26.9561C10.186 26.9101 9.6689 26.8117 9.1836 26.5645C8.43109 26.181 7.81902 25.5689 7.43555 24.8164C7.18827 24.3311 7.08988 23.814 7.04395 23.252C6.99898 22.7016 7 22.0237 7 21.2002ZM20 20C20.5523 20 21 20.4477 21 21C21 21.5523 20.5523 22 20 22H12C11.4477 22 11 21.5523 11 21C11 20.4477 11.4477 20 12 20H20ZM20 16C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H12C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16H20ZM14 12C14.5523 12 15 12.4477 15 13C15 13.5523 14.5523 14 14 14H12C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12H14ZM9 21.2002C9 22.0566 9.00035 22.6388 9.03711 23.0889C9.07293 23.5273 9.13809 23.7518 9.21778 23.9082C9.40951 24.2845 9.71555 24.5905 10.0918 24.7822C10.2482 24.8619 10.4727 24.9271 10.9111 24.9629C11.3612 24.9997 11.9434 25 12.7998 25H19.2002C20.0566 25 20.6388 24.9997 21.0889 24.9629C21.5273 24.9271 21.7518 24.8619 21.9082 24.7822C22.2845 24.5905 22.5905 24.2845 22.7822 23.9082C22.8619 23.7518 22.9271 23.5273 22.9629 23.0889C22.9997 22.6388 23 22.0566 23 21.2002V13H19.5996C19.3362 13 19.0781 13.0011 18.8613 12.9834C18.6328 12.9647 18.3631 12.9204 18.0918 12.7822C17.7155 12.5905 17.4095 12.2845 17.2178 11.9082C17.0795 11.6369 17.0353 11.3672 17.0166 11.1387C16.9989 10.9218 17 10.6638 17 10.4004V7H12.7998C11.9434 7 11.3612 7.00035 10.9111 7.03711C10.4727 7.07293 10.2482 7.13809 10.0918 7.21778C9.71555 7.40951 9.40951 7.71555 9.21778 8.0918C9.13809 8.2482 9.07293 8.47272 9.03711 8.91113C9.00035 9.36117 9 9.94342 9 10.7998V21.2002ZM19 10.4004C19 10.6967 19.0012 10.859 19.0107 10.9756C19.0111 10.98 19.0114 10.9843 19.0117 10.9883C19.0157 10.9887 19.0199 10.9899 19.0244 10.9902C19.141 10.9998 19.3033 11 19.5996 11H21.5859L19 8.41406V10.4004Z" fill="black"/>
+<path d="M32 26C32 29.3137 29.3137 32 26 32C22.6863 32 20 29.3137 20 26C20 22.6863 22.6863 20 26 20C29.3137 20 32 22.6863 32 26Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 20.5C22.9624 20.5 20.5 22.9624 20.5 26C20.5 29.0376 22.9624 31.5 26 31.5C29.0376 31.5 31.5 29.0376 31.5 26C31.5 22.9624 29.0376 20.5 26 20.5ZM28.6036 24.8536C28.7988 24.6583 28.7988 24.3417 28.6036 24.1464C28.4083 23.9512 28.0917 23.9512 27.8964 24.1464L25.25 26.7929L24.1036 25.6464C23.9083 25.4512 23.5917 25.4512 23.3964 25.6464C23.2012 25.8417 23.2012 26.1583 23.3964 26.3536L24.8964 27.8536C25.0917 28.0488 25.4083 28.0488 25.6036 27.8536L28.6036 24.8536Z" fill="#16A34A"/>
+</svg>
+`, "image/svg+xml").querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", r.toString()), t.setAttribute("height", r.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", i), s && s !== "none" && e.setAttribute("stroke", i);
+    }), C) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute(
+        "class",
+        `${e} ${C}`.trim()
+      );
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [r, i, C]);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: C,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...n
+      },
+      onClick: o,
+      "aria-label": c || "file-success icon",
+      title: g,
+      dangerouslySetInnerHTML: { __html: a }
+    }
+  );
+};
+export {
+  A as FileSuccessIcon,
+  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' | 'arrow-down' | 'arrow-square-down' | 'arrow-square-up' | 'arrow-up' | 'bank-note-03' | 'bell-01' | 'bell-off-01' | 'bookmark-x' | 'building-02' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'check-circle-broken' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'clock-rewind' | 'credit-card-02' | 'credit-card-check' | 'credit-card-x' | 'dots-horizontal' | 'dots-vertical' | 'download-01' | 'edit-02' | 'eye' | 'eye-off' | 'file-06' | 'file-search-02' | 'filter-funnel-01' | 'folder-shield' | 'gift-02' | 'globe-01' | 'grid-01' | 'headphones-02' | 'heart' | 'help-circle' | 'home-02' | 'hourglass-03' | 'id-card' | 'image-03' | 'image-plus' | 'info-circle' | 'layers-three-01' | 'link-external-01' | 'list' | 'loading-01' | 'log-out-01' | 'mail-01' | 'map-01' | 'mark' | 'marker-pin-01' | 'marker-pin-02' | 'message-question-square' | 'minus' | 'navigation-pointer-01' | 'phone' | 'plus' | 'refresh-cw-01' | 'refresh-cw-01-rotate' | 'refresh-cw_05' | 'reset-password' | 'sale-03' | 'search-lg' | 'search-md' | 'settings-01' | 'shield-tick' | 'switch-horizontal-01' | 'tag-01' | 'trash-01' | 'upload-01' | 'user-01' | 'user-03' | 'user-circle' | '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' | 'arrow-down' | 'arrow-square-down' | 'arrow-square-up' | 'arrow-up' | 'bank-note-03' | 'bell-01' | 'bell-off-01' | 'bookmark-x' | 'building-02' | 'calendar' | 'camera-01' | 'check' | 'check-circle' | 'check-circle-broken' | 'chevron-down' | 'chevron-left' | 'chevron-left-double' | 'chevron-right' | 'chevron-right-double' | 'chevron-up' | 'circle' | 'clock-rewind' | 'credit-card-02' | 'credit-card-check' | 'credit-card-x' | 'dots-horizontal' | 'dots-vertical' | 'download-01' | 'edit-02' | 'eye' | 'eye-off' | 'file-06' | 'file-error' | 'file-search-02' | 'file-success' | 'filter-funnel-01' | 'folder-shield' | 'gift-02' | 'globe-01' | 'grid-01' | 'headphones-02' | 'heart' | 'help-circle' | 'home-02' | 'hourglass-03' | 'id-card' | 'image-03' | 'image-plus' | 'info-circle' | 'layers-three-01' | 'link-external-01' | 'list' | 'loading-01' | 'log-out-01' | 'mail-01' | 'map-01' | 'mark' | 'marker-pin-01' | 'marker-pin-02' | 'message-question-square' | 'minus' | 'navigation-pointer-01' | 'phone' | 'plus' | 'refresh-cw-01' | 'refresh-cw-01-rotate' | 'refresh-cw_05' | 'reset-password' | 'sale-03' | 'search-lg' | 'search-md' | 'settings-01' | 'shield-tick' | 'switch-horizontal-01' | 'tag-01' | 'trash-01' | 'upload-01' | 'user-01' | 'user-03' | 'user-circle' | 'x-circle' | 'x-close';

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

@@ -173,7 +173,9 @@ const i = {
   "refresh-cw-01-rotate-solid": () => import("../generated/RefreshCw01RotateSolidIcon.js"),
   "refresh-cw-01-rotate": () => import("../generated/RefreshCw01RotateIcon.js"),
   "image-plus": () => import("../generated/ImagePlusIcon.js"),
-  "image-plus-solid": () => import("../generated/ImagePlusSolidIcon.js")
+  "image-plus-solid": () => import("../generated/ImagePlusSolidIcon.js"),
+  "file-error": () => import("../generated/FileErrorIcon.js"),
+  "file-success": () => import("../generated/FileSuccessIcon.js")
 };
 export {
   i as MAP_ICON

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

@@ -125,6 +125,11 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Test identifier
      */
     'data-testid'?: string;
+    /**
+     * All items (unfiltered) for selectedItems mapping when using search
+     * This ensures selected items always have proper labels even when filtered
+     */
+    allItems?: (DropdownItem | DropdownGroup)[];
     /**
      * Custom width for select and dropdown
      */

package/dist/components/Select/index.js

@@ -1,104 +1,105 @@
-import { jsxs as d, jsx as t, Fragment as Se } from "react/jsx-runtime";
-import { forwardRef as $e, useState as Re, useRef as Te, useCallback as R, useMemo as F, memo as ke } from "react";
-import { cn as h } from "../../shared/utils/cn.js";
-import { dataTestId as je } from "../../shared/utils/dataTestId.js";
-import { Typography as P } from "../Typography/index.js";
+import { jsxs as g, jsx as t, Fragment as Re } from "react/jsx-runtime";
+import { forwardRef as Te, useState as ke, useRef as je, useCallback as T, useMemo as P, memo as De } from "react";
+import { cn as d } from "../../shared/utils/cn.js";
+import { dataTestId as Ee } from "../../shared/utils/dataTestId.js";
+import { Typography as z } from "../Typography/index.js";
 import C from "../Icon/Icon.js";
-import { Dropdown as oe } from "../Dropdown/index.js";
-import { selectVariants as De } from "./helper/variants.js";
-import le from "../Chip/index.js";
-import Ee from "../TextField/HelperText.js";
-import { useChipOverflow as Fe } from "../../shared/hooks/useChipOverflow.js";
-const ie = $e(
+import { Dropdown as ie } from "../Dropdown/index.js";
+import { selectVariants as Fe } from "./helper/variants.js";
+import ce from "../Chip/index.js";
+import Pe from "../TextField/HelperText.js";
+import { useChipOverflow as ze } from "../../shared/hooks/useChipOverflow.js";
+const me = Te(
   ({
     items: M = [],
     value: r,
     onChange: y,
     placeholder: b = "Select an option...",
     disabled: a = !1,
-    readOnly: s = !1,
-    loading: z = !1,
-    showCheckmark: V = !1,
-    emptyText: q = "No options available",
-    state: T,
-    label: G,
-    helpText: ce,
-    required: me = !1,
-    leadingIcon: m,
-    trailingIcon: p,
+    readOnly: n = !1,
+    loading: V = !1,
+    showCheckmark: q = !1,
+    emptyText: G = "No options available",
+    state: k,
+    label: J,
+    helpText: pe,
+    required: fe = !1,
+    leadingIcon: c,
+    trailingIcon: m,
     mode: o = "single",
-    displayType: pe = "chip",
-    maxDisplayChips: Pe,
+    displayType: ue = "chip",
+    maxDisplayChips: Ve,
     // eslint-disable-line @typescript-eslint/no-unused-vars -- kept for backward compatibility
-    moreItemsText: fe = "+{count}",
-    trigger: ue,
-    side: J = "bottom",
-    align: K = "start",
-    sideOffset: L = 4,
-    enableVirtualization: Q,
-    itemHeight: U = 32,
-    maxHeight: W = 300,
-    size: n = "md",
-    variant: k = "default",
-    fullWidth: j = !1,
-    className: he,
-    iconsSize: de,
+    moreItemsText: he = "+{count}",
+    trigger: de,
+    side: K = "bottom",
+    align: L = "start",
+    sideOffset: Q = 4,
+    enableVirtualization: U,
+    itemHeight: W = 32,
+    maxHeight: X = 300,
+    size: s = "md",
+    variant: j = "default",
+    fullWidth: D = !1,
+    className: ge,
+    iconsSize: xe,
     "data-testid": l,
     width: A,
-    error: X,
-    haveIcon: ge,
-    iconsCustom: xe,
-    onBlur: Y,
-    dropdownProps: Z,
-    allowSearch: _,
-    title: D,
-    onSearchChange: H,
-    searchValue: B,
-    showClearButton: I = !1,
-    searchPlaceholder: O = "Search...",
-    ...Ne
-  }, ve) => {
-    const [f, S] = Re(!1), Ce = Te(null), i = De({
-      size: n,
-      variant: k,
-      fullWidth: j,
-      state: T,
+    error: Y,
+    haveIcon: Ne,
+    iconsCustom: ve,
+    onBlur: Z,
+    dropdownProps: _,
+    allowSearch: H,
+    title: E,
+    onSearchChange: B,
+    searchValue: I,
+    showClearButton: O = !1,
+    searchPlaceholder: ee = "Search...",
+    allItems: S,
+    ...Ce
+  }, ye) => {
+    const [p, $] = ke(!1), be = je(null), i = Fe({
+      size: s,
+      variant: j,
+      fullWidth: D,
+      state: k,
       disabled: a,
-      readOnly: s
-    }), ye = R(
+      readOnly: n
+    }), Ae = T(
       (e) => {
-        if (o === "multiple" && Array.isArray(r) && !a && !s) {
-          const c = r.filter((w) => w !== e);
-          y?.(c);
+        if (o === "multiple" && Array.isArray(r) && !a && !n) {
+          const u = r.filter((h) => h !== e);
+          y?.(u);
         }
       },
-      [o, r, y, a, s]
-    ), ee = R(() => {
-      o === "multiple" && Array.isArray(r) && r.length > 0 && !a && !s && y?.([]);
-    }, [o, r, y, a, s]), u = F(() => {
+      [o, r, y, a, n]
+    ), te = T(() => {
+      o === "multiple" && Array.isArray(r) && r.length > 0 && !a && !n && y?.([]);
+    }, [o, r, y, a, n]), f = P(() => {
       if (!r) return [];
-      const e = Array.isArray(r) ? r : [r], c = /* @__PURE__ */ new Map();
-      return ((N) => {
-        N.forEach((v) => {
-          "items" in v ? v.items.forEach((ne) => {
-            c.set(ne.value, ne);
-          }) : c.set(v.value, v);
+      const e = Array.isArray(r) ? r : [r], u = S && S.length > 0 ? S : M, h = /* @__PURE__ */ new Map();
+      return ((w) => {
+        w.forEach((v) => {
+          "items" in v ? v.items.forEach((le) => {
+            h.set(le.value, le);
+          }) : h.set(v.value, v);
         });
-      })(M), e.map((N) => {
-        const v = c.get(N);
+      })(u), e.map((w) => {
+        const v = h.get(w);
         return v || {
-          value: N,
-          label: N
+          value: w,
+          label: w
         };
       });
-    }, [r, M]), E = F(() => {
+    }, [r, M, S]), F = P(() => {
       if (o === "single") {
-        const e = u[0];
+        const e = f[0];
         return e ? e.label : b;
       }
-      return o === "multiple" ? r?.length === 0 ? b : D ? `${D} ` : "" : "";
-    }, [o, u, b, D, r]), g = Fe({
-      items: o === "multiple" && Array.isArray(r) ? u.map((e) => ({
+      return o === "multiple" ? r?.length === 0 ? b : E ? `${E} ` : "" : "";
+    }, [o, f, b, E, r]), x = ze({
+      items: o === "multiple" && Array.isArray(r) ? f.map((e) => ({
         value: e.value,
         label: e.label
       })) : [],
@@ -107,36 +108,36 @@ const ie = $e(
       minChipsToShow: 1,
       moreChipWidth: 60
       // Estimated width for "+X more" chip
-    }), $ = F(() => {
+    }), R = P(() => {
       if (o !== "multiple" || !Array.isArray(r))
         return {
           displayItems: [],
           remainingCount: 0,
           hasMore: !1
         };
-      const c = {
-        displayItems: g.displayItems.map((w) => u.find(
-          (N) => N.value === w.value
+      const u = {
+        displayItems: x.displayItems.map((h) => f.find(
+          (oe) => oe.value === h.value
         ) || {
-          value: w.value,
-          label: w.label
+          value: h.value,
+          label: h.label
         }),
-        remainingCount: g.remainingCount,
-        hasMore: g.hasMore
+        remainingCount: x.remainingCount,
+        hasMore: x.hasMore
       };
-      return u.length > 0 && c.displayItems.length === 0 && !c.hasMore ? {
-        displayItems: [u[0]],
-        remainingCount: Math.max(0, u.length - 1),
-        hasMore: u.length > 1
-      } : c;
+      return f.length > 0 && u.displayItems.length === 0 && !u.hasMore ? {
+        displayItems: [f[0]],
+        remainingCount: Math.max(0, f.length - 1),
+        hasMore: f.length > 1
+      } : u;
     }, [
       o,
       r,
-      g.displayItems,
-      g.remainingCount,
-      g.hasMore,
-      u
-    ]), be = A ? { width: typeof A == "number" ? `${A}px` : A } : {}, Ae = h(i.container(), he), x = (e) => {
+      x.displayItems,
+      x.remainingCount,
+      x.hasMore,
+      f
+    ]), we = A ? { width: typeof A == "number" ? `${A}px` : A } : {}, Me = d(i.container(), ge), N = (e) => {
       switch (e) {
         case "sm":
           return 16;
@@ -147,7 +148,7 @@ const ie = $e(
         default:
           return 16;
       }
-    }, te = (e) => {
+    }, re = (e) => {
       switch (e) {
         case "sm":
           return "small";
@@ -158,157 +159,157 @@ const ie = $e(
         default:
           return "medium";
       }
-    }, re = R((e) => !!(e.closest('[data-testid*="chip"]') || e.closest('[data-testid*="clear-all"]') || e.closest('[data-no-trigger="true"]') || e.closest('[role="button"]') && e.closest('[data-testid*="chip"]')), []), ae = R(
+    }, ae = T((e) => !!(e.closest('[data-testid*="chip"]') || e.closest('[data-testid*="clear-all"]') || e.closest('[data-no-trigger="true"]') || e.closest('[role="button"]') && e.closest('[data-testid*="chip"]')), []), ne = T(
       (e) => {
-        const c = e.target;
-        return re(c) ? (e.preventDefault(), e.stopPropagation(), !0) : !1;
+        const u = e.target;
+        return ae(u) ? (e.preventDefault(), e.stopPropagation(), !0) : !1;
       },
-      [re]
+      [ae]
     ), se = (e) => {
-      S(e), !e && Y && Y(
+      $(e), !e && Z && Z(
         new FocusEvent("blur")
       );
-    }, we = () => /* @__PURE__ */ d(
+    }, Se = () => /* @__PURE__ */ g(
       "div",
       {
         className: i.trigger(),
-        "data-state": f ? "open" : "closed",
+        "data-state": p ? "open" : "closed",
         children: [
-          m && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: m.node || m.name && /* @__PURE__ */ t(
+          c && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: c.node || c.name && /* @__PURE__ */ t(
             C,
             {
-              name: m.name,
-              size: x(n),
-              "aria-label": m["aria-label"]
+              name: c.name,
+              size: N(s),
+              "aria-label": c["aria-label"]
             }
           ) }),
           /* @__PURE__ */ t(
             "span",
             {
-              className: h(
+              className: d(
                 "flex-1 truncate text-left",
-                u.length > 0 ? "text-fg-neutral-main" : i.placeholder()
+                f.length > 0 ? "text-fg-neutral-main" : i.placeholder()
               ),
-              children: E
+              children: F
             }
           ),
-          p ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: p.node || p.name && /* @__PURE__ */ t(
+          m ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: m.node || m.name && /* @__PURE__ */ t(
             C,
             {
-              name: p.name,
-              size: x(n),
-              "aria-label": p["aria-label"]
+              name: m.name,
+              size: N(s),
+              "aria-label": m["aria-label"]
             }
           ) }) : /* @__PURE__ */ t(
             C,
             {
-              name: f ? "chevron-up" : "chevron-down",
-              size: x(n),
-              className: h(i.chevron(), f && "rotate-180")
+              name: p ? "chevron-up" : "chevron-down",
+              size: N(s),
+              className: d(i.chevron(), p && "rotate-180")
             }
           )
         ]
       }
     );
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ g(
       "div",
       {
-        ref: ve,
-        className: Ae,
-        style: be,
-        ...je(l || "select"),
-        ...Ne,
+        ref: ye,
+        className: Me,
+        style: we,
+        ...Ee(l || "select"),
+        ...Ce,
         children: [
-          G && /* @__PURE__ */ d("div", { className: "mb-1 flex items-center gap-[2px]", children: [
-            /* @__PURE__ */ t(P, { variants: "action", size: "sm", color: "fg-neutral-subtle", children: G }),
-            me && /* @__PURE__ */ t(P, { variants: "action", size: "sm", color: "fg-accent-error", children: "*" })
+          J && /* @__PURE__ */ g("div", { className: "mb-1 flex items-center gap-[2px]", children: [
+            /* @__PURE__ */ t(z, { variants: "action", size: "sm", color: "fg-neutral-subtle", children: J }),
+            fe && /* @__PURE__ */ t(z, { variants: "action", size: "sm", color: "fg-accent-error", children: "*" })
           ] }),
           /* @__PURE__ */ t("div", { className: "relative h-11", children: o === "multiple" ? /* @__PURE__ */ t(
-            oe,
+            ie,
             {
-              ...Z,
+              ..._,
               items: M,
               value: r,
               onValueChange: (e) => {
-                a || s || y?.(Array.isArray(e) ? e : [e]);
+                a || n || y?.(Array.isArray(e) ? e : [e]);
               },
               fullWidthContent: !0,
               placeholder: b,
               disabled: a,
-              loading: z,
-              showCheckmark: V,
-              emptyText: q,
-              state: T,
-              open: f,
+              loading: V,
+              showCheckmark: q,
+              emptyText: G,
+              state: k,
+              open: p,
               onOpenChange: se,
-              side: J,
-              align: K,
-              search: _,
-              sideOffset: L,
-              enableVirtualization: Q,
+              side: K,
+              align: L,
+              search: H,
+              sideOffset: Q,
+              enableVirtualization: U,
               selectionMode: "separated",
               multiSelect: !0,
-              itemHeight: U,
-              maxHeight: W,
-              size: n,
-              variant: k,
-              fullWidth: j,
-              searchPlaceholder: O,
+              itemHeight: W,
+              maxHeight: X,
+              size: s,
+              variant: j,
+              fullWidth: D,
+              searchPlaceholder: ee,
               width: A,
               "data-testid": l ? `${l}-dropdown` : void 0,
-              showClearButton: I,
-              onClear: ee,
-              searchValue: B,
-              onSearchChange: H,
+              showClearButton: O,
+              onClear: te,
+              searchValue: I,
+              onSearchChange: B,
               className: "flex items-center",
-              children: /* @__PURE__ */ d(
+              children: /* @__PURE__ */ g(
                 "div",
                 {
-                  ref: Ce,
-                  className: h(
+                  ref: be,
+                  className: d(
                     i.trigger({
-                      state: X ? "error" : void 0
+                      state: Y ? "error" : void 0
                     }),
                     "flex"
                   ),
-                  "data-state": f ? "open" : "closed",
-                  onPointerDown: ae,
+                  "data-state": p ? "open" : "closed",
+                  onPointerDown: ne,
                   onClick: (e) => {
-                    a || s || ae(e) || S(!f);
+                    a || n || ne(e) || $(!p);
                   },
                   children: [
-                    m && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: m.node || m.name && /* @__PURE__ */ t(
+                    c && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: c.node || c.name && /* @__PURE__ */ t(
                       C,
                       {
-                        name: m.name,
-                        size: x(n),
-                        "aria-label": m["aria-label"],
+                        name: c.name,
+                        size: N(s),
+                        "aria-label": c["aria-label"],
                         className: "cursor-pointer"
                       }
                     ) }),
                     /* @__PURE__ */ t(
                       "div",
                       {
-                        className: h(
+                        className: d(
                           "flex-1 flex flex-nowrap gap-1 min-h-0 overflow-hidden",
-                          !a && !s && "cursor-pointer"
+                          !a && !n && "cursor-pointer"
                         ),
-                        children: Array.isArray($) ? null : /* @__PURE__ */ t(Se, { children: pe === "chip" ? /* @__PURE__ */ d(
+                        children: Array.isArray(R) ? null : /* @__PURE__ */ t(Re, { children: ue === "chip" ? /* @__PURE__ */ g(
                           "div",
                           {
-                            ref: g.containerRef,
+                            ref: x.containerRef,
                             className: "flex items-center gap-xs-3 flex-nowrap w-full max-w-full overflow-hidden",
                             children: [
-                              $.displayItems.map((e) => /* @__PURE__ */ t(
-                                le,
+                              R.displayItems.map((e) => /* @__PURE__ */ t(
+                                ce,
                                 {
-                                  size: te(n),
-                                  onRemove: !a && !s ? () => {
-                                    ye(e.value);
+                                  size: re(s),
+                                  onRemove: !a && !n ? () => {
+                                    Ae(e.value);
                                   } : void 0,
                                   className: "bg-bg-surface-level-3 flex-shrink-0",
                                   variant: "neutral",
-                                  trailingIcon: !a && !s ? {
+                                  trailingIcon: !a && !n ? {
                                     name: "x-close",
                                     "aria-label": "Remove option"
                                   } : void 0,
@@ -318,17 +319,17 @@ const ie = $e(
                                 },
                                 e.value
                               )),
-                              $.hasMore && /* @__PURE__ */ t(
-                                le,
+                              R.hasMore && /* @__PURE__ */ t(
+                                ce,
                                 {
-                                  size: te(n),
+                                  size: re(s),
                                   variant: "neutral",
                                   className: "bg-bg-surface-level-3 flex-shrink-0",
                                   dataTestIdName: `${l || "select"}-chip-more`,
                                   onClick: (e) => e.stopPropagation(),
-                                  children: fe.replace(
+                                  children: he.replace(
                                     "{count}",
-                                    $.remainingCount.toString()
+                                    R.remainingCount.toString()
                                   )
                                 }
                               )
@@ -339,45 +340,45 @@ const ie = $e(
                           /* @__PURE__ */ t(
                             "div",
                             {
-                              className: h(
+                              className: d(
                                 i.placeholder(),
-                                !a && !s && "cursor-pointer"
+                                !a && !n && "cursor-pointer"
                               ),
-                              children: Array.isArray(r) ? r?.length > 0 ? /* @__PURE__ */ d(
-                                P,
+                              children: Array.isArray(r) ? r?.length > 0 ? /* @__PURE__ */ g(
+                                z,
                                 {
                                   variants: "body",
                                   size: "md",
                                   color: "fg-neutral-main",
                                   children: [
-                                    E,
-                                    /* @__PURE__ */ d("span", { className: "text-fg-brand-rest", children: [
+                                    F,
+                                    /* @__PURE__ */ g("span", { className: "text-fg-brand-rest", children: [
                                       "(",
                                       r?.length,
                                       ")"
                                     ] })
                                   ]
                                 }
-                              ) : b : E
+                              ) : b : F
                             }
                           )
                         ) })
                       }
                     ),
-                    /* @__PURE__ */ d("div", { className: "flex items-center gap-xs", children: [
+                    /* @__PURE__ */ g("div", { className: "flex items-center gap-xs", children: [
                       Array.isArray(r) && r.length > 0 && /* @__PURE__ */ t(
                         "button",
                         {
                           type: "button",
                           onClick: (e) => {
-                            e.stopPropagation(), ee();
+                            e.stopPropagation(), te();
                           },
-                          className: h(
+                          className: d(
                             "flex items-center justify-center rounded-sm transition-colors",
-                            !a && !s && "cursor-pointer hover:bg-bg-neutral-subtle",
-                            a || s ? "opacity-50 cursor-not-allowed" : ""
+                            !a && !n && "cursor-pointer hover:bg-bg-neutral-subtle",
+                            a || n ? "opacity-50 cursor-not-allowed" : ""
                           ),
-                          disabled: a || s,
+                          disabled: a || n,
                           "aria-label": "Clear all selections",
                           "data-testid": l ? `${l}-clear-all` : void 0,
                           "data-no-trigger": "true",
@@ -386,7 +387,7 @@ const ie = $e(
                             {
                               name: "x-circle",
                               variant: "solid",
-                              size: x(n),
+                              size: N(s),
                               className: "text-fg-neutral-subtle"
                             }
                           )
@@ -397,28 +398,28 @@ const ie = $e(
                         {
                           type: "button",
                           onClick: (e) => {
-                            e.stopPropagation(), !a && !s && S(!f);
+                            e.stopPropagation(), !a && !n && $(!p);
                           },
-                          className: h(
+                          className: d(
                             "flex items-center justify-center dropdown-toggle-btn",
-                            !a && !s && "cursor-pointer"
+                            !a && !n && "cursor-pointer"
                           ),
                           "data-testid": l ? `${l}-dropdown-toggle` : "dropdown-toggle",
-                          children: p ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: p.node || p.name && /* @__PURE__ */ t(
+                          children: m ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: m.node || m.name && /* @__PURE__ */ t(
                             C,
                             {
-                              name: p.name,
-                              size: x(n),
-                              "aria-label": p["aria-label"]
+                              name: m.name,
+                              size: N(s),
+                              "aria-label": m["aria-label"]
                             }
                           ) }) : /* @__PURE__ */ t(
                             C,
                             {
-                              name: f ? "chevron-up" : "chevron-down",
-                              size: x(n),
-                              className: h(
+                              name: p ? "chevron-up" : "chevron-down",
+                              size: N(s),
+                              className: d(
                                 i.chevron(),
-                                f && "rotate-180"
+                                p && "rotate-180"
                               )
                             }
                           )
@@ -432,51 +433,51 @@ const ie = $e(
           ) : (
             /* Single mode - use Dropdown normally */
             /* @__PURE__ */ t(
-              oe,
+              ie,
               {
-                ...Z,
+                ..._,
                 items: M,
                 value: r,
                 onValueChange: (e) => {
-                  a || s || (y?.(e), S(!1));
+                  a || n || (y?.(e), $(!1));
                 },
                 placeholder: b,
                 disabled: a,
-                loading: z,
-                showCheckmark: V,
-                emptyText: q,
-                state: T,
-                open: f,
+                loading: V,
+                showCheckmark: q,
+                emptyText: G,
+                state: k,
+                open: p,
                 onOpenChange: se,
-                side: J,
-                align: K,
-                sideOffset: L,
-                enableVirtualization: Q,
-                itemHeight: U,
-                maxHeight: W,
-                size: n,
-                variant: k,
-                fullWidth: j,
+                side: K,
+                align: L,
+                sideOffset: Q,
+                enableVirtualization: U,
+                itemHeight: W,
+                maxHeight: X,
+                size: s,
+                variant: j,
+                fullWidth: D,
                 width: A,
                 "data-testid": l ? `${l}-dropdown` : void 0,
-                search: _,
-                searchPlaceholder: O,
-                searchValue: B,
-                onSearchChange: H,
-                showClearButton: I,
-                children: ue || we()
+                search: H,
+                searchPlaceholder: ee,
+                searchValue: I,
+                onSearchChange: B,
+                showClearButton: O,
+                children: de || Se()
               }
             )
           ) }),
           /* @__PURE__ */ t(
-            Ee,
+            Pe,
             {
               className: "mt-1",
-              text: ce,
-              error: X,
-              haveIcon: ge,
-              iconsSize: de,
-              iconsCustom: xe
+              text: pe,
+              error: Y,
+              haveIcon: Ne,
+              iconsSize: xe,
+              iconsCustom: ve
             }
           )
         ]
@@ -484,8 +485,8 @@ const ie = $e(
     );
   }
 );
-ie.displayName = "Select";
-const Ye = ke(ie);
+me.displayName = "Select";
+const _e = De(me);
 export {
-  Ye as default
+  _e as default
 };

package/dist/shared/hooks/useChipOverflow.js

@@ -1,99 +1,104 @@
-import { useRef as w, useState as k, useCallback as q, useEffect as g } from "react";
-const O = ({
-  items: t,
-  gap: a = 8,
-  minChipsToShow: C = 1,
-  moreChipWidth: W = 60
+import { useRef as W, useState as E, useEffect as C, useCallback as I } from "react";
+const z = ({
+  items: r,
+  gap: c = 8,
+  minChipsToShow: x = 1,
+  moreChipWidth: M = 60
 }) => {
-  const f = w(null), [x, o] = k(t.length), n = q(() => {
-    if (!f.current || t.length === 0) {
-      o(t.length);
+  const d = W(null), [b, a] = E(r.length), m = W(r), A = W(r.length);
+  C(() => {
+    m.current = r, A.current = r.length;
+  });
+  const n = I(() => {
+    const t = m.current;
+    if (!d.current || t.length === 0) {
+      a(t.length);
       return;
     }
-    const i = f.current, h = i.clientWidth;
-    if (h === 0) {
-      o(t.length);
+    const h = d.current, i = h.clientWidth;
+    if (i === 0) {
+      a(t.length);
       return;
     }
     if (t.length <= 4) {
-      const e = i.querySelectorAll(
+      const e = h.querySelectorAll(
         '[data-testid*="chip"]:not([data-testid*="chip-more"])'
       );
-      let r = 75;
-      e.length > 0 && (r = e[0].offsetWidth);
-      const s = Math.max(0, t.length - 1) * a;
-      if (t.length * r + s <= h) {
-        o(t.length);
+      let s = 75;
+      e.length > 0 && (s = e[0].offsetWidth);
+      const u = Math.max(0, t.length - 1) * c;
+      if (t.length * s + u <= i) {
+        a(t.length);
         return;
       }
     }
-    const l = i.querySelectorAll(
+    const l = h.querySelectorAll(
       '[data-testid*="chip"]:not([data-testid*="chip-more"])'
     );
     if (l.length === 0) {
-      o(t.length);
+      a(t.length);
       return;
     }
-    let u = 0;
-    l.length > 0 && (u = Array.from(l).reduce((r, s) => r + s.offsetWidth, 0) / l.length), u === 0 && (u = 80);
-    let M = 0, c = 0;
+    let p = 0;
+    l.length > 0 && (p = Array.from(l).reduce((s, u) => s + u.offsetWidth, 0) / l.length), p === 0 && (p = 80);
+    let v = 0, o = 0;
     for (let e = 0; e < t.length; e++) {
-      const r = e < l.length ? l[e].offsetWidth : u;
-      if (r === 0)
+      const s = e < l.length ? l[e].offsetWidth : p;
+      if (s === 0)
         break;
-      const s = e === t.length - 1, p = M + r + (e > 0 ? a : 0);
-      let d;
-      if (s)
-        d = h;
+      const u = e === t.length - 1, g = v + s + (e > 0 ? c : 0);
+      let f;
+      if (u)
+        f = i;
       else {
-        const b = r;
-        p + a + b > h ? d = h - W - a : d = h;
+        const y = s;
+        g + c + y > i ? f = i - M - c : f = i;
       }
-      if (p <= d)
-        M = p, c = e + 1;
+      if (g <= f)
+        v = g, o = e + 1;
       else
         break;
     }
-    c = Math.max(c, Math.min(C, t.length));
-    const y = c >= t.length ? t.length : c, A = t.length > 0 ? Math.max(1, y) : 0;
-    o(A);
-  }, [t.length, a, C, W]);
-  g(() => {
-    const i = f.current;
-    if (!i) return;
-    const h = setTimeout(n, 0), l = new ResizeObserver(() => {
+    o = Math.max(o, Math.min(x, t.length));
+    const k = o >= t.length ? t.length : o, q = t.length > 0 ? Math.max(1, k) : 0;
+    a(q);
+  }, [c, x, M]);
+  C(() => {
+    const t = d.current;
+    if (!t) return;
+    const h = setTimeout(n, 0), i = new ResizeObserver(() => {
       n();
     });
-    return l.observe(i), () => {
-      clearTimeout(h), l.disconnect();
+    return i.observe(t), () => {
+      clearTimeout(h), i.disconnect();
     };
-  }, [n]), g(() => {
+  }, [n]), C(() => {
     n();
-    const i = setTimeout(() => {
+    const t = setTimeout(() => {
       n();
     }, 10), h = setTimeout(() => {
       n();
     }, 50);
     return () => {
-      clearTimeout(i), clearTimeout(h);
+      clearTimeout(t), clearTimeout(h);
     };
-  }, [t, n]), g(() => {
-    if (t.length > 0) {
-      const i = requestAnimationFrame(() => {
+  }, [r.length, n]), C(() => {
+    if (r.length > 0) {
+      const t = requestAnimationFrame(() => {
         n();
       });
-      return () => cancelAnimationFrame(i);
+      return () => cancelAnimationFrame(t);
     }
-  }, [t.length, n]);
-  const T = t.slice(0, x), m = Math.max(0, t.length - x), v = m > 0;
+  }, [r.length, n]);
+  const R = m.current.slice(0, b), T = Math.max(0, m.current.length - b), w = T > 0;
   return {
-    containerRef: f,
-    displayItems: T,
-    remainingCount: m,
-    hasMore: v,
+    containerRef: d,
+    displayItems: R,
+    remainingCount: T,
+    hasMore: w,
     recalculate: n
   };
 };
 export {
-  O as useChipOverflow
+  z as useChipOverflow
 };

package/package.json

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