@ck-ui/component-library 1.0.0 → 1.0.2

package/dist/components/MenuOptions/_utils/computeMenuPosition.js

@@ -4,7 +4,7 @@ function G(i) {
 function g(i, r, c) {
   const n = i.getBoundingClientRect(), o = G(c), e = Math.min(
     r * 32 + 16,
-    o.height - 16
+    o.height - 8 * 2
   );
   let t = n.bottom + 4;
   return t + e > o.bottom - 8 && (t = n.top - e - 4), t < o.top + 8 && (t = o.top + 8), n.left + 238 > o.right - 8 ? { top: t, right: window.innerWidth - n.right } : { top: t, left: n.left };

package/dist/components/MenuOptions/_utils/computeSubmenuPosition.js

@@ -1,5 +1,5 @@
 function N(t, i) {
-  const E = window.innerWidth, o = window.innerHeight, G = Math.min(i * 32 + 16, o - 16);
+  const E = window.innerWidth, o = window.innerHeight, G = Math.min(i * 32 + 16, o - 8 * 2);
   let n = t.top;
   return n + G > o - 8 && (n = o - G - 8), n < 8 && (n = 8), t.right + 12 + 238 > E - 8 ? { top: n, right: E - t.left + 12 } : { top: n, left: t.right + 12 };
 }

package/dist/components/MetricCards/Component/CardWithIconAndForecast/index.js

@@ -1,43 +1,43 @@
-import { jsxs as a, Fragment as _, jsx as r } from "react/jsx-runtime";
-import { DeviationTag as m } from "../../../DeviationTag/index.js";
-import '../../../../assets/index-YHUWVH17.css';const g = "data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2177_11954)'%3e%3cpath%20d='M6.5001%205.5L10.6001%201.4'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11%203.41504V1.00005H8.585'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5.5%201H4.5C2%201%201%202%201%204.5V7.5C1%2010%202%2011%204.5%2011H7.5C10%2011%2011%2010%2011%207.5V6.5'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2177_11954'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", v = "_card_12h7m_1", f = "_icon_12h7m_19", p = "_title_12h7m_22", u = "_value_12h7m_36", N = "_forecast_12h7m_48", e = {
-  card: v,
-  icon: f,
-  title: p,
-  "action-link": "_action-link_12h7m_29",
-  value: u,
-  "date-range": "_date-range_12h7m_43",
-  "forecast-card": "_forecast-card_12h7m_48",
+import { jsxs as a, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { DeviationTag as h } from "../../../DeviationTag/index.js";
+import '../../../../assets/index-0R9p-l95.css';const u = "data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2177_11954)'%3e%3cpath%20d='M6.5001%205.5L10.6001%201.4'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11%203.41504V1.00005H8.585'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5.5%201H4.5C2%201%201%202%201%204.5V7.5C1%2010%202%2011%204.5%2011H7.5C10%2011%2011%2010%2011%207.5V6.5'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2177_11954'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", m = "_card_4gun4_1", v = "_icon_4gun4_19", f = "_title_4gun4_22", p = "_value_4gun4_36", N = "_forecast_4gun4_48", e = {
+  card: m,
+  icon: v,
+  title: f,
+  "action-link": "_action-link_4gun4_29",
+  value: p,
+  "date-range": "_date-range_4gun4_43",
+  "forecast-card": "_forecast-card_4gun4_48",
   forecast: N,
-  "regular-card": "_regular-card_12h7m_54",
-  "secondary-section": "_secondary-section_12h7m_58"
+  "regular-card": "_regular-card_4gun4_54",
+  "secondary-section": "_secondary-section_4gun4_58"
 };
 function x({
-  icon: t,
-  title: l,
+  icon: s,
+  title: t,
   value: i,
   dateRange: o,
   deviationChip: c,
-  forecastValue: n,
-  className: h,
-  actionLink: s,
+  forecastValue: l,
+  className: _,
+  actionLink: n,
   secondarySection: d
 }) {
-  return /* @__PURE__ */ a(_, { children: [
+  return /* @__PURE__ */ a(g, { children: [
     /* @__PURE__ */ a(
       "div",
       {
-        className: `${e.card} ${n ? e.forecast : ""} ${h}`,
+        className: `${e.card} ${l ? e.forecast : ""} ${_}`,
         children: [
           /* @__PURE__ */ a("div", { className: e["regular-card"], children: [
-            (t || l) && /* @__PURE__ */ a("div", { className: e.header, children: [
-              t && /* @__PURE__ */ r("div", { className: e.icon, children: t }),
-              l && /* @__PURE__ */ r("div", { className: e.title, children: l })
+            (s || t) && /* @__PURE__ */ a("div", { className: e.header, children: [
+              s && /* @__PURE__ */ r("div", { className: e.icon, children: s }),
+              t && /* @__PURE__ */ r("div", { className: e.title, children: t })
             ] }),
             i && /* @__PURE__ */ r("div", { className: e.value, children: i }),
             o && /* @__PURE__ */ r("div", { className: e["date-range"], children: o }),
             c && /* @__PURE__ */ r(
-              m,
+              h,
               {
                 price: c.price ?? "",
                 percentage: c.percentage ?? "",
@@ -46,18 +46,18 @@ function x({
               }
             )
           ] }),
-          n && /* @__PURE__ */ a("div", { className: e["forecast-card"], children: [
+          l && /* @__PURE__ */ a("div", { className: e["forecast-card"], children: [
             /* @__PURE__ */ r("div", { className: e.title, children: "Forecast" }),
-            /* @__PURE__ */ r("div", { className: e.value, children: n })
+            /* @__PURE__ */ r("div", { className: e.value, children: l })
           ] }),
-          s?.href && /* @__PURE__ */ r(
+          n?.href && /* @__PURE__ */ r(
             "a",
             {
-              href: s?.href,
-              target: s?.target ?? "_blank",
+              href: n?.href,
+              target: n?.target ?? "_blank",
               rel: "noreferrer",
-              className: `${e["action-link"]} ${s?.className}`,
-              children: /* @__PURE__ */ r("img", { src: g, alt: "Redirection Link" })
+              className: `${e["action-link"]} ${n?.className}`,
+              children: /* @__PURE__ */ r("img", { src: u, alt: "Redirection Link" })
             }
           )
         ]

package/dist/components/MultiSelect/SimpleMultiSelect.d.ts

@@ -16,7 +16,9 @@ export interface SimpleMultiSelectProps {
     onClear?: () => void;
     classNames?: ClassNames;
     showExcludeBtn?: boolean;
+    /** Max number of chips to show inline before collapsing into +N. Defaults to 1. */
+    maxChips?: 1 | 2 | 3;
     width?: string | number;
 }
-export declare function SimpleMultiSelect({ label, helperText, required, placeholder, searchPlaceholder, selectAllLabel, options, defaultSelected, onApply, exclude, setExclude, onSelect, onClear, classNames, showExcludeBtn, width, }: SimpleMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function SimpleMultiSelect({ label, helperText, required, placeholder, searchPlaceholder, selectAllLabel, options, defaultSelected, onApply, exclude, setExclude, onSelect, onClear, classNames, showExcludeBtn, width, maxChips, }: SimpleMultiSelectProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SimpleMultiSelect.d.ts.map

package/dist/components/MultiSelect/SimpleMultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleMultiSelect.d.ts","sourceRoot":"","sources":["../../../lib/components/MultiSelect/SimpleMultiSelect.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAgB,MAAM,eAAe,CAAC;AAKjF,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,OAAO,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EACV,QAAQ,EACN,WAAgC,EAClC,iBAA4B,EAC5B,cAA6B,EAC7B,OAAO,EACP,eAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAO,EACP,UAAe,EACf,cAAc,EACd,KAAU,GACX,EAAE,sBAAsB,2CAiPxB"}
+{"version":3,"file":"SimpleMultiSelect.d.ts","sourceRoot":"","sources":["../../../lib/components/MultiSelect/SimpleMultiSelect.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,OAAO,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EACV,QAAQ,EACN,WAAgC,EAClC,iBAA4B,EAC5B,cAA6B,EAC7B,OAAO,EACP,eAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAO,EACP,UAAe,EACf,cAAc,EACd,KAAU,EACV,QAAY,GACb,EAAE,sBAAsB,2CAyQxB"}

package/dist/components/MultiSelect/SimpleMultiSelect.js

@@ -1,214 +1,228 @@
-import { jsxs as c, jsx as t, Fragment as te } from "react/jsx-runtime";
-import { useState as u, useRef as re, useEffect as ne, useMemo as ae, useCallback as i } from "react";
-import { s as r } from "../../styles.module-Dojg5FTS.js";
-import { Search as oe } from "../Search/index.js";
-import { S as ce } from "../../info-icon-ooYw3va_.js";
-import { CKCheckbox as ie } from "../CKCheckbox/index.js";
-import de from "./_helpers/TriggerButton.js";
-import me from "./_helpers/OptionRow.js";
-import he from "./_helpers/SearchResult.js";
-import ue from "./_helpers/DropdownFooter.js";
-import { getInitialSelected as J } from "./_utils/getInitialSelected.js";
-import { filterOptions as ge } from "./_utils/filterOptions.js";
-import { mergeClasses as d } from "../../utils/mergeClasses.js";
-function Me({
-  label: x,
-  helperText: S,
-  required: L,
-  placeholder: Q = "Choose parameter",
-  searchPlaceholder: W = "Search",
-  selectAllLabel: M = "Select all",
+import { jsxs as i, jsx as r, Fragment as ae } from "react/jsx-runtime";
+import { useState as v, useRef as ce, useEffect as de, useMemo as ie, useCallback as u } from "react";
+import { s as t } from "../../styles.module-yIHBMSTk.js";
+import { Search as ue } from "../Search/index.js";
+import { S as me } from "../../info-icon-ooYw3va_.js";
+import { CKCheckbox as he } from "../CKCheckbox/index.js";
+import ge from "./_helpers/TriggerButton.js";
+import fe from "./_helpers/OptionRow.js";
+import pe from "./_helpers/SearchResult.js";
+import ve from "./_helpers/DropdownFooter.js";
+import { getInitialSelected as W } from "./_utils/getInitialSelected.js";
+import { filterOptions as Ce } from "./_utils/filterOptions.js";
+import { useDropdownDirection as we } from "./_utils/useDropdownDirection.js";
+import { mergeClasses as m } from "../../utils/mergeClasses.js";
+function je({
+  label: T,
+  helperText: b,
+  required: q,
+  placeholder: x = "Choose parameter",
+  searchPlaceholder: B = "Search",
+  selectAllLabel: j = "Select all",
   options: s,
-  defaultSelected: A = [],
-  onApply: T,
-  exclude: b,
-  setExclude: q,
-  onSelect: D,
-  onClear: E,
-  classNames: m = {},
-  showExcludeBtn: B,
-  width: K = ""
+  defaultSelected: F = [],
+  onApply: k,
+  exclude: C,
+  setExclude: K,
+  onSelect: I,
+  onClear: J,
+  classNames: h = {},
+  showExcludeBtn: P,
+  width: $ = "",
+  maxChips: N = 1
 }) {
-  const { labelWrapperClass: P, helperClass: G } = m, [w, p] = u(!1), [C, v] = u(""), [n, I] = u(
-    () => J(A)
-  ), [a, g] = u(
-    () => J(A)
-  ), [H, f] = u(!1), [U, o] = u(!1), k = re(null);
-  ne(() => {
+  const { labelWrapperClass: G, helperClass: H } = h, [y, O] = v(!1), [R, D] = v(""), [n, L] = v(
+    () => W(F)
+  ), [o, g] = v(
+    () => W(F)
+  ), [U, f] = v(!1), [V, c] = v(!1), M = ce(null), { vertical: z, horizontal: X } = we(M, y);
+  de(() => {
     const e = (l) => {
-      k.current && !k.current.contains(l.target) && (g(n), f(n?.length === s?.length), p(!1), o(!1), v(""));
+      M.current && !M.current.contains(l.target) && (g(n), f(n?.length === s?.length), O(!1), c(!1), D(""));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, [n, s.length]);
-  const y = ae(
-    () => ge(s, C),
-    [s, C]
-  ), j = 2, z = i(
-    (e, l, h, se) => {
-      h || o(!1);
-      const F = (N) => {
-        const O = N?.some((R) => R?.value === e) ? N?.filter((R) => R?.value !== e) : [...N, { value: e, label: l }];
-        return f(O?.length === s?.length), O?.length <= j && o(!1), O;
+  const A = ie(
+    () => Ce(s, R),
+    [s, R]
+  ), Q = u(
+    (e, l, p, ne) => {
+      p || c(!1);
+      const oe = (E) => {
+        const a = E?.some((w) => w?.value === e) ? E?.filter((w) => w?.value !== e) : [...E, { value: e, label: l }];
+        return f(a?.length === s?.length), a?.length <= N && c(!1), a;
       };
-      se && I(F), g(F), D?.();
+      if (ne) {
+        const a = ((d) => d?.some((S) => S?.value === e) ? d?.filter((S) => S?.value !== e) : [...d, { value: e, label: l }])(n), w = s?.filter((d) => a?.some((S) => S?.value === d?.value))?.map((d) => ({ ...d, isChecked: !0 }));
+        f(a?.length === s?.length), a?.length <= N && c(!1), L(a), g(a), k(w, C), I?.();
+        return;
+      }
+      g(oe), I?.();
     },
-    [s.length, D]
-  ), V = i(() => {
-    o(!1), f((e) => {
+    [s, I, k, C, n, N]
+  ), Y = u(() => {
+    c(!1), f((e) => {
       const l = !e;
       return g(
-        l ? s?.map((h) => ({ value: h?.value, label: h?.label })) : []
+        l ? s?.map((p) => ({ value: p?.value, label: p?.label })) : []
       ), l;
     });
-  }, [s]), X = i(() => {
-    g([]), f(!1), E?.();
-  }, [E]), Y = i(() => {
-    const e = s?.filter((l) => a?.some((h) => h?.value === l?.value))?.map((l) => ({ ...l, isChecked: !0 }));
-    T(e, b), I(a), p(!1);
-  }, [s, a, b, T]), Z = i(() => {
-    g(n), f(n?.length === s?.length), o(!1), p(!1), v("");
-  }, [n, s.length]), _ = i(() => {
-    p((e) => !e), o(!1);
-  }, []), $ = i((e) => {
-    e.stopPropagation(), o((l) => !l);
-  }, []), ee = JSON.stringify(a) === JSON.stringify(n), le = w ? a : n;
-  return /* @__PURE__ */ c("div", { className: r["ckds-wrapper"], style: { width: K }, children: [
-    x && /* @__PURE__ */ c(
+  }, [s]), Z = u(() => {
+    g([]), f(!1), J?.();
+  }, [J]), _ = u(() => {
+    const e = s?.filter((l) => o?.some((p) => p?.value === l?.value))?.map((l) => ({ ...l, isChecked: !0 }));
+    k(e, C), L(o), O(!1);
+  }, [s, o, C, k]), ee = u(() => {
+    g(n), f(n?.length === s?.length), c(!1), O(!1), D("");
+  }, [n, s.length]), le = u(() => {
+    O((e) => !e), c(!1);
+  }, []), te = u((e) => {
+    e.stopPropagation(), c((l) => !l);
+  }, []), se = JSON.stringify(o) === JSON.stringify(n), re = y ? o : n;
+  return /* @__PURE__ */ i("div", { className: t["ckds-wrapper"], style: { width: $ }, children: [
+    T && /* @__PURE__ */ i(
       "span",
       {
-        className: d(
+        className: m(
           "ckds-body-xs-med",
-          r["label-wrapper"],
-          P ?? ""
+          t["label-wrapper"],
+          G ?? ""
         ),
         children: [
-          x,
-          L && /* @__PURE__ */ t("span", { className: r.required, children: " *" })
+          T,
+          q && /* @__PURE__ */ r("span", { className: t.required, children: " *" })
         ]
       }
     ),
-    /* @__PURE__ */ c("div", { className: r["trigger-wrapper"], ref: k, children: [
-      /* @__PURE__ */ t(
-        de,
+    /* @__PURE__ */ i("div", { className: t["trigger-wrapper"], ref: M, children: [
+      /* @__PURE__ */ r(
+        ge,
         {
-          open: w,
-          selected: le,
-          placeholder: Q,
-          showMenu: U,
+          open: y,
+          selected: re,
+          placeholder: x,
+          showMenu: V,
           isAllSelected: !1,
-          selectAllLabel: M,
-          onToggleOpen: _,
-          onToggleMenu: $,
-          onRemove: z,
-          classNames: m,
-          maxChips: j
+          selectAllLabel: j,
+          onToggleOpen: le,
+          onToggleMenu: te,
+          onRemove: Q,
+          classNames: h,
+          maxChips: N
         }
       ),
-      S && /* @__PURE__ */ t(
+      b && /* @__PURE__ */ r(
         "div",
         {
-          className: d(
+          className: m(
             "ckds-body-xs-reg",
-            r["helper-text"],
-            G ?? ""
+            t["helper-text"],
+            H ?? ""
           ),
-          children: /* @__PURE__ */ c(te, { children: [
-            /* @__PURE__ */ t(ce, { width: "12", height: "12" }),
+          children: /* @__PURE__ */ i(ae, { children: [
+            /* @__PURE__ */ r(me, { width: "12", height: "12" }),
             " ",
-            S
+            b
           ] })
         }
       ),
-      w && /* @__PURE__ */ c("div", { className: d(r.dropdown, S ? r["dropdown-helper"] : ""), children: [
-        /* @__PURE__ */ t(
-          oe,
+      y && /* @__PURE__ */ i("div", { className: m(
+        t.dropdown,
+        t[`dropdown-align-${X}`],
+        z === "up" ? t["dropdown-up"] : "",
+        b && z === "down" ? t["dropdown-helper"] : "",
+        b && z === "up" ? t["dropdown-helper-up"] : ""
+      ), children: [
+        /* @__PURE__ */ r(
+          ue,
           {
             size: "medium",
-            value: C,
-            placeholder: W,
-            onChange: v,
-            onClear: () => v(""),
+            value: R,
+            placeholder: B,
+            onChange: D,
+            onClear: () => D(""),
             wrapperClassName: "",
             inputClassName: ""
           }
         ),
-        /* @__PURE__ */ t(
-          he,
+        /* @__PURE__ */ r(
+          pe,
           {
-            totalResults: y?.length,
-            exclude: b,
-            setExclude: q,
-            isToggleDisable: a?.length === 0,
-            showExcludeBtn: B,
-            hideExclude: !1
+            totalResults: A?.length,
+            exclude: C,
+            setExclude: K,
+            isToggleDisable: o?.length === 0,
+            showExcludeBtn: P,
+            hideExclude: !1,
+            selectedCount: o?.length
           }
         ),
-        /* @__PURE__ */ t("div", { className: r.divider }),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ r("div", { className: t.divider }),
+        /* @__PURE__ */ i(
           "div",
           {
-            className: d(
-              r["ckds-options-list"],
-              m?.optionsListWrapperClass ?? ""
+            className: m(
+              t["ckds-options-list"],
+              h?.optionsListWrapperClass ?? ""
             ),
             children: [
-              C.length === 0 && /* @__PURE__ */ c(
+              R.length === 0 && /* @__PURE__ */ i(
                 "div",
                 {
-                  className: d(
-                    r["option-row"],
-                    m?.optionRowClass ?? ""
+                  className: m(
+                    t["option-row"],
+                    h?.optionRowClass ?? ""
                   ),
-                  onClick: V,
+                  onClick: Y,
                   children: [
-                    /* @__PURE__ */ t(ie, { checked: H, size: "md" }),
-                    /* @__PURE__ */ t(
+                    /* @__PURE__ */ r(he, { checked: U, size: "md" }),
+                    /* @__PURE__ */ r(
                       "span",
                       {
-                        className: d(
+                        className: m(
                           "ckds-body-sm-reg",
-                          r["option-label"]
+                          t["option-label"]
                         ),
-                        children: M
+                        children: j
                       }
                     )
                   ]
                 }
               ),
-              y?.length === 0 ? /* @__PURE__ */ t(
+              A?.length === 0 ? /* @__PURE__ */ r(
                 "span",
                 {
-                  className: d(
+                  className: m(
                     "ckds-body-sm-reg",
-                    r["no-results"]
+                    t["no-results"]
                   ),
                   children: "No results found"
                 }
-              ) : y?.map((e) => /* @__PURE__ */ t(
-                me,
+              ) : A?.map((e) => /* @__PURE__ */ r(
+                fe,
                 {
                   value: e?.value,
                   label: e?.label,
-                  checked: a?.some(
+                  checked: o?.some(
                     (l) => l?.value === e?.value
                   ),
-                  onToggle: z,
-                  classNames: m
+                  onToggle: Q,
+                  classNames: h
                 },
                 e?.value
               ))
             ]
           }
         ),
-        /* @__PURE__ */ t(
-          ue,
+        /* @__PURE__ */ r(
+          ve,
           {
-            onClear: X,
-            onCancel: Z,
-            onApply: Y,
-            classNames: m,
-            isClearDisabled: a?.length === 0,
-            isApplyDisabled: ee,
+            onClear: Z,
+            onCancel: ee,
+            onApply: _,
+            classNames: h,
+            isClearDisabled: o?.length === 0,
+            isApplyDisabled: se,
             hideClear: !1
           }
         )
@@ -217,5 +231,5 @@ function Me({
   ] });
 }
 export {
-  Me as SimpleMultiSelect
+  je as SimpleMultiSelect
 };

package/dist/components/MultiSelect/_helpers/DropdownFooter.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { s as l } from "../../../styles.module-Dojg5FTS.js";
+import { s as l } from "../../../styles.module-yIHBMSTk.js";
 import { CKButton as r } from "../../CKButton/index.js";
 import { mergeClasses as e } from "../../../utils/mergeClasses.js";
 const y = ({

package/dist/components/MultiSelect/_helpers/OptionRow.js

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as i } from "react/jsx-runtime";
 import { memo as a, useCallback as l } from "react";
-import { s as m } from "../../../styles.module-Dojg5FTS.js";
+import { s as m } from "../../../styles.module-yIHBMSTk.js";
 import { CKCheckbox as d } from "../../CKCheckbox/index.js";
 import { mergeClasses as t } from "../../../utils/mergeClasses.js";
 const u = a(function({

package/dist/components/MultiSelect/_helpers/OverflowMenu.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { s } from "../../../styles.module-Dojg5FTS.js";
+import { s } from "../../../styles.module-yIHBMSTk.js";
 import o from "./OverflowMenuItem.js";
 const a = ({ selected: m, maxChips: t = 2 }) => /* @__PURE__ */ r("div", { className: s["menu-list"], children: m?.map((e, l) => l < t ? null : /* @__PURE__ */ r(o, { item: e }, e?.value)) });
 export {

package/dist/components/MultiSelect/_helpers/OverflowMenuItem.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { s as i } from "../../../styles.module-Dojg5FTS.js";
+import { s as i } from "../../../styles.module-yIHBMSTk.js";
 import { Tooltip as f } from "../../Tooltip/index.js";
 import { useRef as a, useState as d, useLayoutEffect as u } from "react";
 import { mergeClasses as p } from "../../../utils/mergeClasses.js";

package/dist/components/MultiSelect/_helpers/SearchResult.d.ts

@@ -1,4 +1,4 @@
 import { ResultProps } from '../_types/type';
-declare const SearchResult: ({ totalResults, exclude, setExclude, isToggleDisable, showExcludeBtn, hideExclude, }: ResultProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchResult: ({ totalResults, exclude, setExclude, isToggleDisable, showExcludeBtn, hideExclude, selectedCount, }: ResultProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchResult;
 //# sourceMappingURL=SearchResult.d.ts.map

package/dist/components/MultiSelect/_helpers/SearchResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../../lib/components/MultiSelect/_helpers/SearchResult.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,QAAA,MAAM,YAAY,GAAI,sFAOnB,WAAW,4CAmBb,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../../lib/components/MultiSelect/_helpers/SearchResult.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,QAAA,MAAM,YAAY,GAAI,qGAQnB,WAAW,4CA6Bb,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/MultiSelect/_helpers/SearchResult.js

@@ -1,33 +1,43 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { s as e } from "../../../styles.module-Dojg5FTS.js";
-import { Toggle as p } from "../../Toggle/index.js";
-import { mergeClasses as a } from "../../../utils/mergeClasses.js";
-const g = ({
-  totalResults: l,
-  exclude: c,
-  setExclude: d,
+import { jsxs as s, Fragment as t, jsx as a } from "react/jsx-runtime";
+import { s as e } from "../../../styles.module-yIHBMSTk.js";
+import { Toggle as o } from "../../Toggle/index.js";
+import { mergeClasses as r } from "../../../utils/mergeClasses.js";
+const f = ({
+  totalResults: c,
+  exclude: d,
+  setExclude: i,
   isToggleDisable: m,
-  showExcludeBtn: o,
-  hideExclude: i
+  showExcludeBtn: p,
+  hideExclude: n,
+  selectedCount: l
 }) => /* @__PURE__ */ s("div", { className: e["result-wrapper"], children: [
-  /* @__PURE__ */ s("span", { className: a("ckds-cap-reg", e["result-count"]), children: [
-    l,
-    " ",
-    l === 1 ? "Result" : "Results"
+  /* @__PURE__ */ s("div", { className: e["result-left"], children: [
+    /* @__PURE__ */ s("span", { className: r("ckds-cap-reg", e["result-count"]), children: [
+      c,
+      " ",
+      c === 1 ? "Result" : "Results"
+    ] }),
+    l !== void 0 && l > 0 && /* @__PURE__ */ s(t, { children: [
+      /* @__PURE__ */ a("span", { className: e["result-pipe"] }),
+      /* @__PURE__ */ s("span", { className: r("ckds-cap-reg", e["result-selected"]), children: [
+        l,
+        " Selected"
+      ] })
+    ] })
   ] }),
-  o && !i && /* @__PURE__ */ s("div", { className: e["exclude-row"], children: [
-    /* @__PURE__ */ r("span", { className: a("ckds-cap-reg", e["exclude-label"]), children: "Exclude" }),
-    /* @__PURE__ */ r(
-      p,
+  p && !n && /* @__PURE__ */ s("div", { className: e["exclude-row"], children: [
+    /* @__PURE__ */ a("span", { className: r("ckds-cap-reg", e["exclude-label"]), children: "Exclude" }),
+    /* @__PURE__ */ a(
+      o,
       {
         size: "small",
-        checked: c,
-        onChange: d,
+        checked: d,
+        onChange: i,
         disabled: m
       }
     )
   ] })
 ] });
 export {
-  g as default
+  f as default
 };

package/dist/components/MultiSelect/_helpers/TagContent.js

@@ -1,7 +1,7 @@
 import { jsxs as h, jsx as o } from "react/jsx-runtime";
 import v, { useRef as g, useState as w, useLayoutEffect as C, useCallback as l } from "react";
 import { S as O } from "../../../cancel-BAgTEOGD.js";
-import { s } from "../../../styles.module-Dojg5FTS.js";
+import { s } from "../../../styles.module-yIHBMSTk.js";
 import { Tooltip as R } from "../../Tooltip/index.js";
 const j = v.memo(function({
   label: t,

package/dist/components/MultiSelect/_helpers/TriggerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TriggerButton.d.ts","sourceRoot":"","sources":["../../../../lib/components/MultiSelect/_helpers/TriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAIzD,QAAA,MAAM,aAAa,GAAI,yJAapB,kBAAkB,4CA6DpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TriggerButton.d.ts","sourceRoot":"","sources":["../../../../lib/components/MultiSelect/_helpers/TriggerButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAKzD,QAAA,MAAM,aAAa,GAAI,yJAapB,kBAAkB,4CAuFpB,CAAC;AAEF,eAAe,aAAa,CAAC"}