@ck-ui/component-library 0.3.0 → 1.0.0

package/dist/components/Loader/_types/loader.types.d.ts

@@ -0,0 +1,10 @@
+export interface LoaderProps {
+    /** When true, renders a full-screen fixed backdrop with blur overlay */
+    popup?: boolean;
+    /**
+     * When true, fills the nearest `position: relative` container.
+     * Used by the Table component to overlay only the table body area.
+     */
+    overlay?: boolean;
+}
+//# sourceMappingURL=loader.types.d.ts.map

package/dist/components/Loader/_types/loader.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/Loader/_types/loader.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Loader/_types/loader.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,6 @@
+import { LoaderProps } from './_types/loader.types';
+export declare function Loader({ popup, overlay }: LoaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Loader {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Loader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Loader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,wBAAgB,MAAM,CAAC,EAAE,KAAa,EAAE,OAAe,EAAE,EAAE,WAAW,2CAsBrE;yBAtBe,MAAM"}

package/dist/components/Loader/index.js

@@ -0,0 +1,37 @@
+import { jsx as a } from "react/jsx-runtime";
+import { mergeClasses as r } from "../../utils/mergeClasses.js";
+import '../../assets/index-i-aBFBOq.css';const l = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20style='margin:%20auto;%20background:%20none;%20display:%20block;%20shape-rendering:%20auto;'%20width='200px'%20height='200px'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='xMidYMid'%3e%3crect%20x='17.5'%20y='30'%20width='15'%20height='40'%20fill='%2353daff'%3e%3canimate%20attributeName='y'%20repeatCount='indefinite'%20dur='1s'%20calcMode='spline'%20keyTimes='0;0.5;1'%20values='18;30;30'%20keySplines='0%200.5%200.5%201;0%200.5%200.5%201'%20begin='-0.2s'%3e%3c/animate%3e%3canimate%20attributeName='height'%20repeatCount='indefinite'%20dur='1s'%20calcMode='spline'%20keyTimes='0;0.5;1'%20values='64;40;40'%20keySplines='0%200.5%200.5%201;0%200.5%200.5%201'%20begin='-0.2s'%3e%3c/animate%3e%3c/rect%3e%3crect%20x='42.5'%20y='30'%20width='15'%20height='40'%20fill='%23337ab7'%3e%3canimate%20attributeName='y'%20repeatCount='indefinite'%20dur='1s'%20calcMode='spline'%20keyTimes='0;0.5;1'%20values='20.999999999999996;30;30'%20keySplines='0%200.5%200.5%201;0%200.5%200.5%201'%20begin='-0.1s'%3e%3c/animate%3e%3canimate%20attributeName='height'%20repeatCount='indefinite'%20dur='1s'%20calcMode='spline'%20keyTimes='0;0.5;1'%20values='58.00000000000001;40;40'%20keySplines='0%200.5%200.5%201;0%200.5%200.5%201'%20begin='-0.1s'%3e%3c/animate%3e%3c/rect%3e%3crect%20x='67.5'%20y='30'%20width='15'%20height='40'%20fill='%230a3ca2'%3e%3canimate%20attributeName='y'%20repeatCount='indefinite'%20dur='1s'%20calcMode='spline'%20keyTimes='0;0.5;1'%20values='20.999999999999996;30;30'%20keySplines='0%200.5%200.5%201;0%200.5%200.5%201'%3e%3c/animate%3e%3canimate%20attributeName='height'%20repeatCount='indefinite'%20dur='1s'%20calcMode='spline'%20keyTimes='0;0.5;1'%20values='58.00000000000001;40;40'%20keySplines='0%200.5%200.5%201;0%200.5%200.5%201'%3e%3c/animate%3e%3c/rect%3e%3c!--%20[ldio]%20generated%20by%20https://loading.io/%20--%3e%3c/svg%3e", o = "_loader_wrapper_19w2u_1", n = "_loader_19w2u_1", e = {
+  loader_wrapper: o,
+  "loader-overlay": "_loader-overlay_19w2u_8",
+  loader: n,
+  "loader-backdrop": "_loader-backdrop_19w2u_27",
+  "loader-logo": "_loader-logo_19w2u_47"
+};
+function s({ popup: i = !1, overlay: t = !1 }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: r(
+        e.loader_wrapper,
+        i ? e["loader-backdrop"] : "",
+        t ? e["loader-overlay"] : ""
+      ),
+      "data-testid": "loader-wrapper",
+      id: "loader",
+      children: /* @__PURE__ */ a("div", { className: e.loader, children: /* @__PURE__ */ a(
+        "img",
+        {
+          className: e["loader-logo"],
+          src: l,
+          alt: "loader",
+          role: "status",
+          "aria-label": "Loading"
+        }
+      ) })
+    }
+  );
+}
+s.displayName = "Loader";
+export {
+  s as Loader
+};

package/dist/components/MAVDropdown/_types/mavDropdown.types.d.ts

@@ -0,0 +1,27 @@
+export interface MAVItem {
+    /** Unique identifier for the MAV entry */
+    key: string;
+    /** Display label, e.g. "OutSystems" */
+    label: string;
+    /** Sub-label shown below the main label, e.g. account ID */
+    subLabel?: string;
+}
+export interface MAVDropdownProps {
+    /** Top-level label shown in the trigger, e.g. "MAV" */
+    triggerLabel?: string;
+    /** Currently selected MAV item */
+    selectedItem: MAVItem;
+    /** Full list of MAV items to show in the dropdown */
+    items: MAVItem[];
+    /** Called when the user clicks a different MAV item */
+    onSelect: (item: MAVItem) => void;
+    /**
+     * Max height of the item container. Items fill up to this height then wrap
+     * into the next column. The panel scrolls horizontally for overflow.
+     * @default "200px"
+     */
+    listHeight?: string;
+    /** Additional class name for the root element */
+    className?: string;
+}
+//# sourceMappingURL=mavDropdown.types.d.ts.map

package/dist/components/MAVDropdown/_types/mavDropdown.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mavDropdown.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/MAVDropdown/_types/mavDropdown.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,0CAA0C;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,uDAAuD;IACvD,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/MAVDropdown/_types/mavDropdown.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,6 @@
+import { MAVDropdownProps } from './_types/mavDropdown.types';
+export declare function MAVDropdown({ triggerLabel, selectedItem, items, onSelect, listHeight, className, }: MAVDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MAVDropdown {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MAVDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/MAVDropdown/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAW,MAAM,4BAA4B,CAAC;AA4B5E,wBAAgB,WAAW,CAAC,EAC1B,YAAoB,EACpB,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,UAAoB,EACpB,SAAS,GACV,EAAE,gBAAgB,2CAqIlB;yBA5Ie,WAAW"}

package/dist/components/MAVDropdown/index.js

@@ -0,0 +1,162 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { useState as h, useRef as v, useCallback as D } from "react";
+import { Popover as C } from "../Popover/index.js";
+import { Tooltip as M } from "../Tooltip/index.js";
+import { mergeClasses as u } from "../../utils/mergeClasses.js";
+import { S as A } from "../../chevron-down-Cm9R64Fe.js";
+import '../../assets/index-PKpDB4Cl.css';const s = {
+  "ckds-mav-dropdown": "_ckds-mav-dropdown_1w4zu_1",
+  "ckds-mav-trigger": "_ckds-mav-trigger_1w4zu_7",
+  "ckds-mav-trigger--open": "_ckds-mav-trigger--open_1w4zu_19",
+  "ckds-mav-trigger-content": "_ckds-mav-trigger-content_1w4zu_27",
+  "ckds-mav-trigger-label": "_ckds-mav-trigger-label_1w4zu_34",
+  "ckds-mav-trigger-selected": "_ckds-mav-trigger-selected_1w4zu_42",
+  "ckds-mav-chevron": "_ckds-mav-chevron_1w4zu_52",
+  "ckds-mav-chevron--open": "_ckds-mav-chevron--open_1w4zu_65",
+  "ckds-mav-popover": "_ckds-mav-popover_1w4zu_69",
+  "ckds-mav-item-list": "_ckds-mav-item-list_1w4zu_77",
+  "ckds-mav-item": "_ckds-mav-item_1w4zu_77",
+  "ckds-mav-item-label": "_ckds-mav-item-label_1w4zu_110",
+  "ckds-mav-item-sublabel": "_ckds-mav-item-sublabel_1w4zu_113",
+  "ckds-mav-item--active": "_ckds-mav-item--active_1w4zu_121"
+};
+function z({ text: t, className: n }) {
+  const r = v(null), [k, o] = h(!1);
+  return /* @__PURE__ */ a(M, { title: k ? t : "", placement: "top", children: /* @__PURE__ */ a(
+    "span",
+    {
+      ref: r,
+      className: n,
+      onMouseEnter: () => {
+        r.current && r.current.scrollWidth > r.current.clientWidth && o(!0);
+      },
+      onMouseLeave: () => o(!1),
+      children: t
+    }
+  ) });
+}
+function R({
+  triggerLabel: t = "MAV",
+  selectedItem: n,
+  items: r,
+  onSelect: k,
+  listHeight: o = "200px",
+  className: f
+}) {
+  const [l, c] = h(!1), [N, x] = h(!1), g = v(null), i = v(null), p = v(null), E = D(() => {
+    i.current && x(i.current.scrollWidth > i.current.clientWidth);
+  }, []), b = () => {
+    p.current && clearTimeout(p.current), c(!0);
+  }, w = () => {
+    p.current = setTimeout(() => c(!1), 120);
+  }, T = (e) => {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c((d) => !d)), e.key === "Escape" && c(!1);
+  }, y = (e) => {
+    k(e), c(!1);
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: u(s["ckds-mav-dropdown"], f),
+      onMouseEnter: b,
+      onMouseLeave: w,
+      children: [
+        /* @__PURE__ */ m(
+          "button",
+          {
+            ref: g,
+            type: "button",
+            className: u(
+              s["ckds-mav-trigger"],
+              l && s["ckds-mav-trigger--open"]
+            ),
+            onKeyDown: T,
+            "aria-haspopup": "listbox",
+            "aria-expanded": l,
+            "aria-label": `${t}: ${n.label}, open MAV selector`,
+            children: [
+              /* @__PURE__ */ m("span", { className: s["ckds-mav-trigger-content"], children: [
+                /* @__PURE__ */ a("span", { className: s["ckds-mav-trigger-label"], children: t }),
+                /* @__PURE__ */ a(M, { title: N ? n.label : "", placement: "bottom", children: /* @__PURE__ */ a(
+                  "span",
+                  {
+                    ref: i,
+                    className: s["ckds-mav-trigger-selected"],
+                    onMouseEnter: E,
+                    children: n.label
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ a(
+                "span",
+                {
+                  className: u(
+                    s["ckds-mav-chevron"],
+                    l && s["ckds-mav-chevron--open"]
+                  ),
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ a(A, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          C,
+          {
+            open: l,
+            onClose: () => c(!1),
+            anchorRef: g,
+            align: "left",
+            minWidth: "0",
+            className: s["ckds-mav-popover"],
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                onMouseEnter: b,
+                onMouseLeave: w,
+                children: /* @__PURE__ */ a(
+                  "ul",
+                  {
+                    role: "listbox",
+                    "aria-label": `${t} options`,
+                    className: s["ckds-mav-item-list"],
+                    style: { maxHeight: o },
+                    children: r.map((e) => {
+                      const d = e.key === n.key;
+                      return /* @__PURE__ */ m(
+                        "li",
+                        {
+                          role: "option",
+                          "aria-selected": d,
+                          className: u(
+                            s["ckds-mav-item"],
+                            d && s["ckds-mav-item--active"]
+                          ),
+                          onClick: () => y(e),
+                          onKeyDown: (_) => {
+                            (_.key === "Enter" || _.key === " ") && (_.preventDefault(), y(e));
+                          },
+                          tabIndex: 0,
+                          children: [
+                            /* @__PURE__ */ a(z, { text: e.label, className: s["ckds-mav-item-label"] }),
+                            e.subLabel && /* @__PURE__ */ a(z, { text: e.subLabel, className: s["ckds-mav-item-sublabel"] })
+                          ]
+                        },
+                        e.key
+                      );
+                    })
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+R.displayName = "MAVDropdown";
+export {
+  R as MAVDropdown
+};

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

@@ -1,9 +1,9 @@
-import { jsxs as c, Fragment as _, jsx as r } from "react/jsx-runtime";
+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", p = "_icon_12h7m_19", f = "_title_12h7m_22", u = "_value_12h7m_36", N = "_forecast_12h7m_48", e = {
+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: p,
-  title: f,
+  icon: f,
+  title: p,
   "action-link": "_action-link_12h7m_29",
   value: u,
   "date-range": "_date-range_12h7m_43",
@@ -12,51 +12,51 @@ import '../../../../assets/index-YHUWVH17.css';const g = "data:image/svg+xml,%3c
   "regular-card": "_regular-card_12h7m_54",
   "secondary-section": "_secondary-section_12h7m_58"
 };
-function C({
-  icon: i,
-  title: s,
-  value: n,
-  dateRange: l,
-  deviationChip: o,
-  forecastValue: t,
+function x({
+  icon: t,
+  title: l,
+  value: i,
+  dateRange: o,
+  deviationChip: c,
+  forecastValue: n,
   className: h,
-  actionLink: a,
+  actionLink: s,
   secondarySection: d
 }) {
-  return /* @__PURE__ */ c(_, { children: [
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ a(_, { children: [
+    /* @__PURE__ */ a(
       "div",
       {
-        className: `${e.card} ${t ? e.forecast : ""} ${h}`,
+        className: `${e.card} ${n ? e.forecast : ""} ${h}`,
         children: [
-          /* @__PURE__ */ c("div", { className: e["regular-card"], children: [
-            (i || s) && /* @__PURE__ */ c("div", { className: e.header, children: [
-              i && /* @__PURE__ */ r("div", { className: e.icon, children: i }),
-              s && /* @__PURE__ */ r("div", { className: e.title, children: s })
+          /* @__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 })
             ] }),
-            n && /* @__PURE__ */ r("div", { className: e.value, children: n }),
-            l && /* @__PURE__ */ r("div", { className: e["date-range"], children: l }),
-            o && /* @__PURE__ */ r(
+            i && /* @__PURE__ */ r("div", { className: e.value, children: i }),
+            o && /* @__PURE__ */ r("div", { className: e["date-range"], children: o }),
+            c && /* @__PURE__ */ r(
               m,
               {
-                price: "+$1,100",
-                percentage: "0.13",
-                arrowDirection: "up",
-                arrowColor: "green"
+                price: c.price ?? "",
+                percentage: c.percentage ?? "",
+                arrowDirection: c.arrowDirection,
+                arrowColor: c.arrowColor ?? "green"
               }
             )
           ] }),
-          t && /* @__PURE__ */ c("div", { className: e["forecast-card"], children: [
+          n && /* @__PURE__ */ a("div", { className: e["forecast-card"], children: [
             /* @__PURE__ */ r("div", { className: e.title, children: "Forecast" }),
-            /* @__PURE__ */ r("div", { className: e.value, children: t })
+            /* @__PURE__ */ r("div", { className: e.value, children: n })
           ] }),
-          a?.href && /* @__PURE__ */ r(
+          s?.href && /* @__PURE__ */ r(
             "a",
             {
-              href: a?.href,
-              target: a?.target ?? "_blank",
+              href: s?.href,
+              target: s?.target ?? "_blank",
               rel: "noreferrer",
-              className: `${e["action-link"]} ${a?.className}`,
+              className: `${e["action-link"]} ${s?.className}`,
               children: /* @__PURE__ */ r("img", { src: g, alt: "Redirection Link" })
             }
           )
@@ -67,5 +67,5 @@ function C({
   ] });
 }
 export {
-  C as CardWithIconAndForecast
+  x as CardWithIconAndForecast
 };

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

@@ -0,0 +1,22 @@
+import { MultiSelectOption, ClassNames } from './_types/type';
+export interface SimpleMultiSelectProps {
+    label?: string;
+    helperText?: React.ReactNode;
+    required?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    /** Custom label for the "Select all" checkbox. Defaults to "Select all". */
+    selectAllLabel?: string;
+    options: MultiSelectOption[];
+    defaultSelected?: MultiSelectOption[];
+    onApply: (selected: MultiSelectOption[], exclude: boolean) => void;
+    exclude: boolean;
+    setExclude: React.Dispatch<React.SetStateAction<boolean>>;
+    onSelect?: () => void;
+    onClear?: () => void;
+    classNames?: ClassNames;
+    showExcludeBtn?: boolean;
+    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;
+//# sourceMappingURL=SimpleMultiSelect.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/MultiSelect/SimpleMultiSelect.js

@@ -0,0 +1,221 @@
+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",
+  options: s,
+  defaultSelected: A = [],
+  onApply: T,
+  exclude: b,
+  setExclude: q,
+  onSelect: D,
+  onClear: E,
+  classNames: m = {},
+  showExcludeBtn: B,
+  width: K = ""
+}) {
+  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 e = (l) => {
+      k.current && !k.current.contains(l.target) && (g(n), f(n?.length === s?.length), p(!1), o(!1), v(""));
+    };
+    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;
+      };
+      se && I(F), g(F), D?.();
+    },
+    [s.length, D]
+  ), V = i(() => {
+    o(!1), f((e) => {
+      const l = !e;
+      return g(
+        l ? s?.map((h) => ({ value: h?.value, label: h?.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(
+      "span",
+      {
+        className: d(
+          "ckds-body-xs-med",
+          r["label-wrapper"],
+          P ?? ""
+        ),
+        children: [
+          x,
+          L && /* @__PURE__ */ t("span", { className: r.required, children: " *" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ c("div", { className: r["trigger-wrapper"], ref: k, children: [
+      /* @__PURE__ */ t(
+        de,
+        {
+          open: w,
+          selected: le,
+          placeholder: Q,
+          showMenu: U,
+          isAllSelected: !1,
+          selectAllLabel: M,
+          onToggleOpen: _,
+          onToggleMenu: $,
+          onRemove: z,
+          classNames: m,
+          maxChips: j
+        }
+      ),
+      S && /* @__PURE__ */ t(
+        "div",
+        {
+          className: d(
+            "ckds-body-xs-reg",
+            r["helper-text"],
+            G ?? ""
+          ),
+          children: /* @__PURE__ */ c(te, { children: [
+            /* @__PURE__ */ t(ce, { width: "12", height: "12" }),
+            " ",
+            S
+          ] })
+        }
+      ),
+      w && /* @__PURE__ */ c("div", { className: d(r.dropdown, S ? r["dropdown-helper"] : ""), children: [
+        /* @__PURE__ */ t(
+          oe,
+          {
+            size: "medium",
+            value: C,
+            placeholder: W,
+            onChange: v,
+            onClear: () => v(""),
+            wrapperClassName: "",
+            inputClassName: ""
+          }
+        ),
+        /* @__PURE__ */ t(
+          he,
+          {
+            totalResults: y?.length,
+            exclude: b,
+            setExclude: q,
+            isToggleDisable: a?.length === 0,
+            showExcludeBtn: B,
+            hideExclude: !1
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: r.divider }),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: d(
+              r["ckds-options-list"],
+              m?.optionsListWrapperClass ?? ""
+            ),
+            children: [
+              C.length === 0 && /* @__PURE__ */ c(
+                "div",
+                {
+                  className: d(
+                    r["option-row"],
+                    m?.optionRowClass ?? ""
+                  ),
+                  onClick: V,
+                  children: [
+                    /* @__PURE__ */ t(ie, { checked: H, size: "md" }),
+                    /* @__PURE__ */ t(
+                      "span",
+                      {
+                        className: d(
+                          "ckds-body-sm-reg",
+                          r["option-label"]
+                        ),
+                        children: M
+                      }
+                    )
+                  ]
+                }
+              ),
+              y?.length === 0 ? /* @__PURE__ */ t(
+                "span",
+                {
+                  className: d(
+                    "ckds-body-sm-reg",
+                    r["no-results"]
+                  ),
+                  children: "No results found"
+                }
+              ) : y?.map((e) => /* @__PURE__ */ t(
+                me,
+                {
+                  value: e?.value,
+                  label: e?.label,
+                  checked: a?.some(
+                    (l) => l?.value === e?.value
+                  ),
+                  onToggle: z,
+                  classNames: m
+                },
+                e?.value
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          ue,
+          {
+            onClear: X,
+            onCancel: Z,
+            onApply: Y,
+            classNames: m,
+            isClearDisabled: a?.length === 0,
+            isApplyDisabled: ee,
+            hideClear: !1
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  Me 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-CmWIIYpK.js";
+import { s as l } from "../../../styles.module-Dojg5FTS.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-CmWIIYpK.js";
+import { s as m } from "../../../styles.module-Dojg5FTS.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-CmWIIYpK.js";
+import { s } from "../../../styles.module-Dojg5FTS.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 {