@epam/statgpt-ui-components 0.3.0-rc.9 → 0.3.1

package/index.mjs

@@ -1,17 +1,21 @@
-import { jsx as r, jsxs as o, Fragment as Y } from "react/jsx-runtime";
-import { useEffect as _, useState as A, useRef as P, useCallback as L, useMemo as D, createContext as j, useContext as G } from "react";
-import m from "classnames";
-import { IconX as K, IconCalendarEvent as ee, IconChevronDown as te } from "@tabler/icons-react";
-import { extendTailwindMerge as ne } from "tailwind-merge";
-import re from "react-flatpickr";
-import { CalendarResolution as k } from "@epam/statgpt-shared-toolkit";
-import { useFloating as $, useRole as le, useDismiss as H, useInteractions as B, FloatingPortal as se, FloatingOverlay as ae, FloatingFocusManager as oe, autoUpdate as ce, offset as ie, flip as de, shift as ue, useClick as me } from "@floating-ui/react";
-const U = () => /* @__PURE__ */ r("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ r("div", { className: "loader" }) }), W = ({
+import { jsx as r, jsxs as o, Fragment as H } from "react/jsx-runtime";
+import * as oe from "react";
+import { useEffect as M, useState as j, useRef as B, useCallback as _, useMemo as W, createContext as U, useContext as V } from "react";
+import f from "classnames";
+import { IconX as de, IconCalendarEvent as ue, IconSquareCheckFilled as me, IconChevronDown as he, IconGripVertical as Q, IconChevronRight as K, IconDatabase as fe } from "@tabler/icons-react";
+import { extendTailwindMerge as pe } from "tailwind-merge";
+import ge from "react-flatpickr";
+import { CalendarResolution as O } from "@epam/statgpt-shared-toolkit";
+import { useFloating as X, useRole as xe, useDismiss as Z, useInteractions as J, FloatingPortal as be, FloatingOverlay as Ne, FloatingFocusManager as Ce, autoUpdate as ve, offset as ye, flip as we, shift as Ee, useClick as Se } from "@floating-ui/react";
+import { useSensors as Ie, useSensor as ke, PointerSensor as De, DndContext as Le, closestCenter as Re, DragOverlay as Fe } from "@dnd-kit/core";
+import { useSortable as Oe, SortableContext as Ae, verticalListSortingStrategy as _e, arrayMove as Pe } from "@dnd-kit/sortable";
+import { CSS as Te } from "@dnd-kit/utilities";
+const ee = () => /* @__PURE__ */ r("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ r("div", { className: "loader" }) }), te = ({
   title: e,
   btnClassNames: t,
   iconWidth: n,
-  iconHeight: l,
-  onClick: s
+  iconHeight: s,
+  onClick: l
 }) => /* @__PURE__ */ r(
   "button",
   {
@@ -19,41 +23,41 @@ const U = () => /* @__PURE__ */ r("div", { className: "flex items-center justify
     "aria-label": "button",
     className: t,
     title: e,
-    onClick: s,
-    children: /* @__PURE__ */ r(K, { height: l || 20, width: n || 20 })
+    onClick: l,
+    children: /* @__PURE__ */ r(de, { height: s || 20, width: n || 20 })
   }
 );
-var y = /* @__PURE__ */ ((e) => (e.ERROR = "error", e.SUCCESS = "success", e.IN_PROGRESS = "in_progress", e))(y || {});
-const Oe = ({
+var F = /* @__PURE__ */ ((e) => (e.ERROR = "error", e.SUCCESS = "success", e.IN_PROGRESS = "in_progress", e))(F || {});
+const mt = ({
   alertDetails: e,
   successIcon: t,
   errorIcon: n,
-  onClose: l,
-  closeButtonTitle: s
+  onClose: s,
+  closeButtonTitle: l
 }) => {
-  const a = () => e?.type === y.IN_PROGRESS ? "alert-in-progress" : e?.type === y.SUCCESS ? "alert-success" : "alert-error";
-  return _(() => {
-    e?.type !== y.IN_PROGRESS && setTimeout(() => {
-      l?.();
+  const a = () => e?.type === F.IN_PROGRESS ? "alert-in-progress" : e?.type === F.SUCCESS ? "alert-success" : "alert-error";
+  return M(() => {
+    e?.type !== F.IN_PROGRESS && setTimeout(() => {
+      s?.();
     }, 5e3);
-  }, [e?.type, l]), /* @__PURE__ */ r(
+  }, [e?.type, s]), /* @__PURE__ */ r(
     "div",
     {
-      className: m(
+      className: f(
         "alert alert-shadow fixed bottom-3 right-3 z-10",
         a()
       ),
       children: /* @__PURE__ */ o("div", { className: "alert-content flex items-start", children: [
-        /* @__PURE__ */ r("div", { className: "alert-icon", children: e?.type === y.IN_PROGRESS ? /* @__PURE__ */ r(U, {}) : e?.type === y.SUCCESS ? t : n }),
+        /* @__PURE__ */ r("div", { className: "alert-icon", children: e?.type === F.IN_PROGRESS ? /* @__PURE__ */ r(ee, {}) : e?.type === F.SUCCESS ? t : n }),
         /* @__PURE__ */ o("div", { className: "flex flex-col gap-2 max-w-[300px]", children: [
           /* @__PURE__ */ r("h3", { className: "truncate", children: e?.title }),
           e?.text && /* @__PURE__ */ r("div", { className: "alert-text truncate", title: e?.text, children: e?.text })
         ] }),
-        /* @__PURE__ */ r(W, { title: s, onClick: l })
+        /* @__PURE__ */ r(te, { title: l, onClick: s })
       ] })
     }
   );
-}, he = ne({
+}, Me = pe({
   extend: {
     classGroups: {
       typography: [
@@ -70,236 +74,252 @@ const Oe = ({
     }
   }
 });
-function v(...e) {
-  return he(m(...e));
+function L(...e) {
+  return Me(f(...e));
 }
-const pe = ({
+const je = ({
   buttonClassName: e,
   textClassName: t,
   isLoading: n = !1,
-  title: l,
-  disabled: s,
+  title: s,
+  disabled: l,
   iconAfter: a,
-  iconBefore: c,
+  iconBefore: d,
   onClick: u,
-  isSmallButton: d
+  isSmallButton: h
 }) => {
-  const h = v([
-    d ? "font-semibold" : "",
+  const m = L([
+    h ? "font-semibold" : "",
     a ? "mr-2" : "",
-    c ? "ml-2" : "",
+    d ? "ml-2" : "",
     t
   ]);
   return /* @__PURE__ */ o(
     "button",
     {
       type: "button",
-      className: m(
+      className: f(
         "base-button",
         e,
-        d ? "small-button" : ""
+        h ? "small-button" : ""
       ),
-      disabled: s || n,
+      disabled: l || n,
       "aria-label": "button",
-      onClick: (f) => u?.(f),
-      title: l,
+      onClick: (p) => u?.(p),
+      title: s,
       children: [
-        c,
-        n && /* @__PURE__ */ r(U, {}),
-        l ? d ? /* @__PURE__ */ r("h4", { className: h, children: l }) : /* @__PURE__ */ r("h3", { className: h, children: l }) : null,
+        d,
+        n && /* @__PURE__ */ r(ee, {}),
+        s ? h ? /* @__PURE__ */ r("h4", { className: m, children: s }) : /* @__PURE__ */ r("h3", { className: m, children: s }) : null,
         a
       ]
     }
   );
 };
-function fe(e = 719) {
-  const [t, n] = A(
+function Ye(e = 719) {
+  const [t, n] = j(
     () => typeof window < "u" ? window.innerWidth < e : !1
   );
-  return _(() => {
-    const l = window.matchMedia(`(max-width: ${e}px)`), s = (a) => {
+  return M(() => {
+    const s = window.matchMedia(`(max-width: ${e}px)`), l = (a) => {
       n(a.matches);
     };
-    return n(l.matches), l.addEventListener("change", s), () => l.removeEventListener("change", s);
+    return n(s.matches), s.addEventListener("change", l), () => s.removeEventListener("change", l);
   }, [e]), t;
 }
-function Te(e, t) {
-  const n = P(null);
-  return L(
-    (...s) => {
+function ht(e, t) {
+  const n = B(null);
+  return _(
+    (...l) => {
       n.current && clearTimeout(n.current), n.current = setTimeout(() => {
-        e(...s);
+        e(...l);
       }, t);
     },
     [e, t]
   );
 }
-const Pe = 24, De = 24, M = 1e3, xe = 24, Me = ({
+const ft = 24, pt = 24, q = 1e3, Ge = 24, gt = ({
   label: e,
   onChange: t,
   value: n,
-  options: l,
-  calendarResolution: s = k.DAY,
+  options: s,
+  calendarResolution: l = O.DAY,
   id: a,
-  icon: c,
+  icon: d,
   isEndDate: u
 }) => {
-  const d = P(null), h = fe();
-  _(() => {
-    const x = d?.current;
-    x && x.querySelector("input")?.setAttribute("aria-label", e);
+  const h = B(null), m = Ye();
+  M(() => {
+    const b = h?.current;
+    b && b.querySelector("input")?.setAttribute("aria-label", e);
   }, [e]);
-  const f = {
-    ...l,
+  const p = {
+    ...s,
     disableMobile: !0,
-    defaultDate: s === k.MONTH ? new Date(n.getFullYear(), n.getMonth()) : n
-  }, g = (x, E, b) => {
-    const i = `calendar__${s === k.MONTH ? "month" : "day"}`;
-    b.calendarContainer && b.calendarContainer.classList.add(i);
-  }, N = (x, E, b) => {
-    if (s === k.MONTH && x.length > 0) {
-      const i = l.minDate, p = l.maxDate, C = x[0].getFullYear(), R = b.calendarContainer, F = "flatpickr-disabled", V = R.querySelectorAll(
+    defaultDate: l === O.MONTH ? new Date(n.getFullYear(), n.getMonth()) : n
+  }, x = (b, N, g) => {
+    const c = `calendar__${l === O.MONTH ? "month" : "day"}`;
+    g.calendarContainer && g.calendarContainer.classList.add(c);
+  }, w = (b, N, g) => {
+    if (l === O.MONTH && b.length > 0) {
+      const c = s.minDate, i = s.maxDate, v = b[0].getFullYear(), S = g.calendarContainer, E = "flatpickr-disabled", y = S.querySelectorAll(
         ".flatpickr-monthSelect-month"
-      ), z = R.querySelectorAll(
+      ), C = S.querySelectorAll(
         ".flatpickr-next-month"
-      )[0], X = R.querySelectorAll(
+      )[0], k = S.querySelectorAll(
         ".flatpickr-prev-month"
       )[0];
-      C === p.getFullYear() && z.classList.add(F), C === i.getFullYear() && X.classList.add(F), (C === i.getFullYear() || C === p.getFullYear()) && V.forEach((O) => {
-        O.classList.remove(F);
-        const w = new Date(O.getAttribute("aria-label")), Z = w.getFullYear() === i.getFullYear() && w.getMonth() === i.getMonth(), J = w.getFullYear() === p.getFullYear() && w.getMonth() === p.getMonth();
-        Z || J || (w < i || w > p) && O.classList.add(F);
+      v === i.getFullYear() && C.classList.add(E), v === c.getFullYear() && k.classList.add(E), (v === c.getFullYear() || v === i.getFullYear()) && y.forEach((D) => {
+        D.classList.remove(E);
+        const I = new Date(D.getAttribute("aria-label")), R = I.getFullYear() === c.getFullYear() && I.getMonth() === c.getMonth(), Y = I.getFullYear() === i.getFullYear() && I.getMonth() === i.getMonth();
+        R || Y || (I < c || I > i) && D.classList.add(E);
       });
     }
     setTimeout(() => {
-      const i = b.calendarContainer, p = b._input?.getBoundingClientRect();
-      i && (i.style.top = `${p.top - i.offsetHeight - 8}px`, i.style.width = `${i.style.width}px`, u ? (i.style.right = `${window.innerWidth - p.right - (h ? xe : 0)}px`, i.style.left = "auto") : i.style.left = `${p.left}px`);
+      const c = g.calendarContainer, i = g._input?.getBoundingClientRect();
+      c && (c.style.top = `${i.top - c.offsetHeight - 8}px`, c.style.width = `${c.style.width}px`, u ? (c.style.right = `${window.innerWidth - i.right - (m ? Ge : 0)}px`, c.style.left = "auto") : c.style.left = `${i.left}px`);
     }, 0);
   };
-  return /* @__PURE__ */ o("div", { className: "relative calendar", ref: d, children: [
+  return /* @__PURE__ */ o("div", { className: "relative calendar", ref: h, children: [
     /* @__PURE__ */ r("div", { className: "mb-1 calendar-title", children: e }),
     /* @__PURE__ */ r(
       "label",
       {
         htmlFor: a,
         className: "absolute cursor-pointer right-[11px] top-[29px]",
-        children: c || /* @__PURE__ */ r(ee, {})
+        children: d || /* @__PURE__ */ r(ue, {})
       }
     ),
     /* @__PURE__ */ r(
-      re,
+      ge,
       {
-        defaultValue: (s === k.MONTH ? new Date(n.getFullYear(), n.getMonth()) : n)?.toDateString(),
-        options: f,
-        onChange: (x) => {
-          t(x[0]);
+        defaultValue: (l === O.MONTH ? new Date(n.getFullYear(), n.getMonth()) : n)?.toDateString(),
+        options: p,
+        onChange: (b) => {
+          t(b[0]);
         },
-        onOpen: [N],
-        onReady: [g],
+        onOpen: [w],
+        onReady: [x],
         id: a
       }
     )
   ] });
-}, Ye = ({
+}, ne = ({
   label: e,
   id: t,
   checked: n,
-  checkboxIcon: l,
-  onChange: s
+  checkboxIcon: s,
+  onChange: l,
+  disabled: a = !1,
+  className: d,
+  stopPropagation: u = !0
 }) => {
-  const a = L(
-    (c) => {
-      c.stopPropagation(), s?.(t, c.target.checked);
+  const h = _(
+    (x) => {
+      u && x.stopPropagation();
     },
-    [s, t]
-  );
+    [u]
+  ), m = _(
+    (x) => {
+      u && x.stopPropagation(), l?.(t, x.target.checked);
+    },
+    [l, t, u]
+  ), p = () => {
+    if (n)
+      return s || /* @__PURE__ */ r(me, { className: "absolute size-4" });
+  };
   return /* @__PURE__ */ o(
     "label",
     {
-      className: "flex items-center cursor-pointer min-w-0 py-1",
       htmlFor: t,
+      onClick: h,
+      className: L(
+        "flex min-w-0 items-center py-1",
+        a ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        d
+      ),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: m(
-              "flex justify-center items-center w-4 h-4 mr-2 relative",
-              "checkbox-button"
+            className: f(
+              "checkbox-button relative flex size-[14px] items-center justify-center"
             ),
-            children: n && l
+            "aria-hidden": !0,
+            children: p()
           }
         ),
-        e && /* @__PURE__ */ r(
+        e ? /* @__PURE__ */ r(
           "p",
           {
-            className: m(
-              "text-neutrals-1000 flex-1 min-w-0 truncate pr-2",
-              "checkbox-button-text"
+            className: f(
+              "checkbox-button-text text-neutrals-1000 min-w-0 ml-2 flex-1 truncate pr-2"
             ),
             title: e,
             children: e
           }
-        ),
+        ) : null,
         /* @__PURE__ */ r(
           "input",
           {
-            type: "checkbox",
-            onChange: a,
             id: t,
+            type: "checkbox",
             checked: n,
+            disabled: a,
+            onChange: m,
             className: "hidden"
           }
         )
       ]
     }
   );
-}, je = ({
+}, xt = ({
   title: e,
   icon: t,
   children: n,
-  value: l
+  value: s
 }) => {
-  const [s, a] = A(!1);
+  const [l, a] = j(!1);
   return /* @__PURE__ */ o(
     "div",
     {
-      className: `collapsible-block flex flex-col border-t-2 border-neutrals-600 ${s ? "collapsible-block-open" : ""}`,
+      className: `collapsible-block flex flex-col border-t-2 border-neutrals-600 ${l ? "collapsible-block-open" : ""}`,
       children: [
         /* @__PURE__ */ o(
           "div",
           {
             className: "collapsible-block-title flex cursor-pointer items-center py-4",
-            onClick: () => a(!s),
+            onClick: () => a(!l),
             children: [
-              /* @__PURE__ */ r("div", { className: `${s ? "rotate-180" : ""} transition-transform`, children: t || /* @__PURE__ */ r(te, { className: "w-5 h-5 mr-3" }) }),
+              /* @__PURE__ */ r("div", { className: `${l ? "rotate-180" : ""} transition-transform`, children: t || /* @__PURE__ */ r(he, { className: "w-5 h-5 mr-3" }) }),
               /* @__PURE__ */ o("div", { className: "flex flex-1 items-center justify-between", children: [
                 /* @__PURE__ */ r("span", { children: e }),
-                l && /* @__PURE__ */ r("p", { className: "body-1 text-neutrals-800", children: l })
+                s && /* @__PURE__ */ r("p", { className: "body-1 text-neutrals-800", children: s })
               ] })
             ]
           }
         ),
-        s && /* @__PURE__ */ r("div", { className: "collapsible-block-content pb-4", children: n })
+        l && /* @__PURE__ */ r("div", { className: "collapsible-block-content pb-4", children: n })
       ]
     }
   );
-}, Ge = ({ text: e, highlightText: t }) => {
-  const n = D(() => {
-    const l = [];
+}, bt = ({ text: e, highlightText: t }) => {
+  const n = W(() => {
+    const s = [];
     if (!t)
       return [{ id: 0, text: e, highlight: !1 }];
-    const s = t?.toLowerCase() || "", a = e?.toLowerCase()?.split(s) || "";
-    for (let c = 0, u = 0; c < a?.length; c++) {
-      const d = a?.[c], h = d.length;
-      d !== "" && l.push({
-        id: l.length,
+    const l = t?.toLowerCase() || "", a = e?.toLowerCase()?.split(l) || "";
+    for (let d = 0, u = 0; d < a?.length; d++) {
+      const h = a?.[d], m = h.length;
+      h !== "" && s.push({
+        id: s.length,
         highlight: !1,
         text: e?.substring(
           u,
-          u + h
+          u + m
         )
-      }), u += h, c !== a?.length - 1 && (l.push({
-        id: l.length,
+      }), u += m, d !== a?.length - 1 && (s.push({
+        id: s.length,
         highlight: !0,
         text: e?.substring(
           u,
@@ -307,97 +327,97 @@ const Pe = 24, De = 24, M = 1e3, xe = 24, Me = ({
         )
       }), u += t.length);
     }
-    return l;
+    return s;
   }, [t, e]);
-  return /* @__PURE__ */ r(Y, { children: n.map((l) => /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(H, { children: n.map((s) => /* @__PURE__ */ r(
     "span",
     {
-      className: m(l?.highlight && "bg-highlight"),
-      children: l?.text
+      className: f(s?.highlight && "bg-highlight"),
+      children: s?.text
     },
-    l?.id
+    s?.id
   )) });
-}, $e = ({
+}, Nt = ({
   icon: e,
   onClick: t,
   buttonClassName: n,
-  disabled: l,
-  title: s,
+  disabled: s,
+  title: l,
   isBaseIconStyles: a = !0
 }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
-    className: m(
+    className: f(
       a && "base-icon-button",
       n
     ),
-    onClick: (c) => t?.(c),
-    disabled: l,
-    title: s,
+    onClick: (d) => t?.(d),
+    disabled: s,
+    title: l,
     "aria-label": "button",
     children: e
   }
-), ge = ({
+), $e = ({
   value: e,
   inputId: t,
   placeholder: n = "",
-  cssClass: l = "",
-  type: s = "text",
+  cssClass: s = "",
+  type: l = "text",
   disabled: a,
-  readonly: c,
+  readonly: d,
   onChange: u,
-  onKeyDown: d
+  onKeyDown: h
 }) => {
-  const h = m(
+  const m = f(
     "truncate outline-none shadow-none body-1",
-    l,
-    c ? "pointer-events-none" : ""
+    s,
+    d ? "pointer-events-none" : ""
   );
   return /* @__PURE__ */ r(
     "input",
     {
-      type: s,
+      type: l,
       autoComplete: "off",
       id: t,
       placeholder: n,
       value: e || "",
       title: e ? String(e) : "",
       disabled: a,
-      className: h,
-      onKeyDown: d,
-      onChange: (f) => u?.(f.currentTarget.value)
+      className: m,
+      onKeyDown: h,
+      onChange: (p) => u?.(p.currentTarget.value)
     }
   );
-}, He = ({
+}, Ct = ({
   iconBeforeInput: e,
   iconAfterInput: t,
   containerClasses: n,
-  cssClass: l,
-  ...s
-}) => /* @__PURE__ */ o("div", { className: m("input w-full flex flex-row", n), children: [
+  cssClass: s,
+  ...l
+}) => /* @__PURE__ */ o("div", { className: f("input w-full flex flex-row", n), children: [
   e,
   /* @__PURE__ */ r(
-    ge,
+    $e,
     {
-      cssClass: m(
+      cssClass: f(
         "border-0 bg-transparent p-0 h-full shadow-none flex-1 min-w-0 rounded-none",
-        l
+        s
       ),
-      ...s
+      ...l
     }
   ),
   t
-] }), Be = ({
+] }), vt = ({
   url: e,
   title: t,
   linkClassName: n = "",
-  iconBefore: l,
-  iconAfter: s
+  iconBefore: s,
+  iconAfter: l
 }) => {
-  const a = m(
-    s ? "mr-2" : "",
-    l ? "ml-2" : ""
+  const a = f(
+    l ? "mr-2" : "",
+    s ? "ml-2" : ""
   );
   return /* @__PURE__ */ o(
     "a",
@@ -405,33 +425,37 @@ const Pe = 24, De = 24, M = 1e3, xe = 24, Me = ({
       href: e,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: m("base-link", n),
+      className: f("base-link", n),
       title: t,
       children: [
-        l,
+        s,
         /* @__PURE__ */ r("span", { className: a, children: t }),
-        s
+        l
       ]
     }
   );
-}, Ue = ({ title: e, text: t, onClick: n }) => /* @__PURE__ */ r(
+}, yt = ({ title: e, text: t, disabled: n, onClick: s }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
-    className: "tag flex items-center justify-center",
-    onClick: () => n?.(t || e),
+    className: f(
+      "tag flex items-center justify-center",
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-neutrals-100"
+    ),
+    disabled: n,
+    onClick: () => s?.(t || e),
     "aria-label": "button",
     children: /* @__PURE__ */ r("h4", { children: e })
   }
-), We = ({
+), wt = ({
   label: e,
   id: t,
   checked: n,
-  radioIcon: l,
-  description: s,
+  radioIcon: s,
+  description: l,
   onChange: a
 }) => {
-  const c = L(
+  const d = _(
     (u) => {
       u.stopPropagation(), a?.(t, u.target.checked);
     },
@@ -447,12 +471,12 @@ const Pe = 24, De = 24, M = 1e3, xe = 24, Me = ({
           /* @__PURE__ */ r(
             "span",
             {
-              className: m(
+              className: f(
                 "flex justify-center items-center w-4 h-4 mr-2 relative",
                 "radio-button",
                 n ? "radio-button-active" : ""
               ),
-              children: n && l
+              children: n && s
             }
           ),
           e && /* @__PURE__ */ r(
@@ -464,19 +488,19 @@ const Pe = 24, De = 24, M = 1e3, xe = 24, Me = ({
             }
           )
         ] }),
-        s && /* @__PURE__ */ r(
+        l && /* @__PURE__ */ r(
           "span",
           {
             className: "radio-description ml-6 text-neutrals-800 body-2 w-auto flex items-center",
-            title: s,
-            children: s
+            title: l,
+            children: l
           }
         ),
         /* @__PURE__ */ r(
           "input",
           {
             type: "radio",
-            onChange: c,
+            onChange: d,
             id: t,
             checked: n,
             className: "hidden"
@@ -486,142 +510,142 @@ const Pe = 24, De = 24, M = 1e3, xe = 24, Me = ({
     }
   );
 };
-var S = /* @__PURE__ */ ((e) => (e.Closed = "Closed", e.Opened = "Opened", e))(S || {}), T = /* @__PURE__ */ ((e) => (e.LG = "Large", e.SM = "Small", e))(T || {});
-const be = ({
+var A = /* @__PURE__ */ ((e) => (e.Closed = "Closed", e.Opened = "Opened", e))(A || {}), $ = /* @__PURE__ */ ((e) => (e.LG = "Large", e.SM = "Small", e))($ || {});
+const ze = ({
   portalId: e,
-  state: t = S.Opened,
+  state: t = A.Opened,
   heading: n,
-  size: l,
-  onClose: s,
+  size: s,
+  onClose: l,
   children: a,
-  overlayClassName: c,
+  overlayClassName: d,
   containerClassName: u,
-  dividers: d = !0,
-  closeButtonTitle: h
+  dividers: h = !0,
+  closeButtonTitle: m
 }) => {
-  const { refs: f, context: g } = $({
-    open: t !== S.Closed && !!t,
-    onOpenChange: s
-  }), N = le(g, { role: "dialog" }), x = H(g, { outsidePress: !0 }), { getFloatingProps: E } = B([N, x]), b = L(
-    (i) => {
-      i?.preventDefault(), i?.stopPropagation(), s();
+  const { refs: p, context: x } = X({
+    open: t !== A.Closed && !!t,
+    onOpenChange: l
+  }), w = xe(x, { role: "dialog" }), b = Z(x, { outsidePress: !0 }), { getFloatingProps: N } = J([w, b]), g = _(
+    (c) => {
+      c?.preventDefault(), c?.stopPropagation(), l();
     },
-    [s]
+    [l]
   );
-  return /* @__PURE__ */ r(se, { id: e, children: t !== S.Closed && /* @__PURE__ */ r(
-    ae,
+  return /* @__PURE__ */ r(be, { id: e, children: t !== A.Closed && /* @__PURE__ */ r(
+    Ne,
     {
-      className: m(
+      className: f(
         "z-modal flex items-center justify-center bg-blackout p-4",
-        c
+        d
       ),
-      children: /* @__PURE__ */ r(oe, { context: g, children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ r(Ce, { context: x, children: /* @__PURE__ */ o(
         "div",
         {
-          className: m(
+          className: f(
             "relative max-h-full modal rounded bg-white flex flex-col shadow w-full",
-            l === T.LG && "max-w-[65%]",
-            l === T.SM && "max-w-[30%]",
-            d && "divide-neutrals-400 divide-y",
+            s === $.LG && "max-w-[65%]",
+            s === $.SM && "max-w-[30%]",
+            h && "divide-neutrals-400 divide-y",
             u,
             "sm:w-full sm:max-w-full sm:px-4 sm:py-6"
           ),
-          ref: f.setFloating,
-          ...E({
-            onClick(i) {
-              i.stopPropagation();
+          ref: p.setFloating,
+          ...N({
+            onClick(c) {
+              c.stopPropagation();
             }
           }),
           children: [
             /* @__PURE__ */ o("div", { className: "flex flex-row justify-between py-3 px-6 items-center mb-2 modal-heading sm:p-0 sm:pb-2", children: [
               n && (typeof n == "string" ? /* @__PURE__ */ r("h2", { className: "flex-1 min-w-0 mr-3 modal-heading-title sm:h3", children: n }) : n),
               /* @__PURE__ */ r(
-                W,
+                te,
                 {
-                  title: h,
-                  onClick: b,
+                  title: m,
+                  onClick: g,
                   btnClassNames: "sm:h-[24px] sm:w-[24px] sm:top-4"
                 }
               )
             ] }),
-            a.map((i) => i)
+            a.map((c) => c)
           ]
         }
       ) })
     }
   ) });
-}, qe = (e) => e.state === S.Closed ? null : /* @__PURE__ */ r(be, { ...e }), Qe = ({
+}, Et = (e) => e.state === A.Closed ? null : /* @__PURE__ */ r(ze, { ...e }), St = ({
   triggerButton: e,
   options: t,
   content: n,
-  selectedOption: l,
-  disabled: s,
+  selectedOption: s,
+  disabled: l,
   containerClassName: a,
-  openedClassName: c,
+  openedClassName: d,
   onOptionSelect: u
 }) => {
-  const [d, h] = A(!1), { refs: f, floatingStyles: g, context: N } = $({
-    open: d,
-    onOpenChange: s ? void 0 : h,
+  const [h, m] = j(!1), { refs: p, floatingStyles: x, context: w } = X({
+    open: h,
+    onOpenChange: l ? void 0 : m,
     placement: "bottom-end",
-    middleware: [ie(8), de(), ue()],
-    whileElementsMounted: ce
-  }), x = me(N), E = H(N, { outsidePress: !0 }), { getReferenceProps: b, getFloatingProps: i } = B([
-    x,
-    E
+    middleware: [ye(8), we(), Ee()],
+    whileElementsMounted: ve
+  }), b = Se(w), N = Z(w, { outsidePress: !0 }), { getReferenceProps: g, getFloatingProps: c } = J([
+    b,
+    N
   ]);
-  return /* @__PURE__ */ o(Y, { children: [
+  return /* @__PURE__ */ o(H, { children: [
     /* @__PURE__ */ r(
       "div",
       {
-        ref: f.setReference,
-        ...b({
-          onClick(p) {
-            p.stopPropagation();
+        ref: p.setReference,
+        ...g({
+          onClick(i) {
+            i.stopPropagation();
           }
         }),
-        className: m(a, d && c),
+        className: f(a, h && d),
         children: e
       }
     ),
-    d && /* @__PURE__ */ o(
+    h && /* @__PURE__ */ o(
       "div",
       {
-        ref: f.setFloating,
-        style: g,
+        ref: p.setFloating,
+        style: x,
         className: "flex flex-col z-10 dropdown-menu-shadow bg-white dropdown-container rounded",
-        ...i(),
+        ...c(),
         children: [
           n && n,
-          t && t.map((p) => /* @__PURE__ */ r(
+          t && t.map((i) => /* @__PURE__ */ r(
             "div",
             {
-              onClick: (C) => {
-                C.stopPropagation(), u?.(p.key), h(!1);
+              onClick: (v) => {
+                v.stopPropagation(), u?.(i.key), m(!1);
               },
-              className: m(
+              className: f(
                 "text-neutrals-900 body-3 cursor-pointer dropdown-item min-w-[200px]",
-                l === p.key && "bg-hues-100"
+                s === i.key && "bg-hues-100"
               ),
               children: /* @__PURE__ */ o(
                 "div",
                 {
                   className: "p-2 hover:bg-hues-100 h-full dropdown-item-text flex items-center gap-x-2",
-                  title: p.title,
+                  title: i.title,
                   children: [
-                    p.icon ? p.icon : null,
-                    /* @__PURE__ */ r("p", { children: p?.title })
+                    i.icon ? i.icon : null,
+                    /* @__PURE__ */ r("p", { children: i?.title })
                   ]
                 }
               )
             },
-            p.key
+            i.key
           ))
         ]
       }
     )
   ] });
-}, Ve = ({ limitMessages: e, query: t }) => /* @__PURE__ */ o("div", { className: "bg-hues-100 px-2 py-1 flex justify-between flex-wrap items-center", children: [
+}, It = ({ limitMessages: e, query: t }) => /* @__PURE__ */ o("div", { className: "bg-hues-100 px-2 py-1 flex justify-between flex-wrap items-center", children: [
   /* @__PURE__ */ r("div", { className: "flex gap-x-[4px]", children: /* @__PURE__ */ r("div", { className: "flex flex-col", children: /* @__PURE__ */ o("div", { className: "flex gap-x-[4px]", children: [
     /* @__PURE__ */ o("span", { className: "text-primary h5", children: [
       e?.excelFormatTitle,
@@ -633,16 +657,16 @@ const be = ({
     e?.dataExplorerIcon,
     e?.dataExplorer
   ] }) })
-] }), ze = ({
+] }), kt = ({
   limitMessages: e,
   isDownload: t,
   showAdvancedViewButton: n,
-  onAdvancedViewClick: l,
-  query: s
+  onAdvancedViewClick: s,
+  query: l
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: m(
+    className: f(
       "bg-semantic-warning-light px-2 py-1 flex justify-between flex-wrap items-center",
       e?.containerClassName
     ),
@@ -654,7 +678,7 @@ const be = ({
             /* @__PURE__ */ o(
               "span",
               {
-                className: m(
+                className: f(
                   "text-primary h5",
                   e?.largeQueryClassName
                 ),
@@ -668,18 +692,18 @@ const be = ({
             /* @__PURE__ */ r(
               "span",
               {
-                className: m(
+                className: f(
                   "text-neutrals-800 body-3",
                   e?.limitMessageClassName
                 ),
-                children: t ? e?.downloadMessage?.(M) : e?.showingLimit?.(M)
+                children: t ? e?.downloadMessage?.(q) : e?.showingLimit?.(q)
               }
             )
           ] }),
           t && /* @__PURE__ */ r(
             "span",
             {
-              className: m(
+              className: f(
                 "text-neutrals-800 body-3",
                 e?.limitMessageClassName
               ),
@@ -691,7 +715,7 @@ const be = ({
       n && /* @__PURE__ */ o(
         "span",
         {
-          onClick: () => l?.(),
+          onClick: () => s?.(),
           className: "flex gap-x-[4px] h4 cursor-pointer items-center text-primary",
           children: [
             e?.editIcon,
@@ -699,93 +723,465 @@ const be = ({
           ]
         }
       ),
-      t && /* @__PURE__ */ r("a", { href: s || "", target: "_blank", children: /* @__PURE__ */ o("span", { className: "flex gap-x-[4px] body-3 cursor-pointer items-center", children: [
+      t && /* @__PURE__ */ r("a", { href: l || "", target: "_blank", children: /* @__PURE__ */ o("span", { className: "flex gap-x-[4px] body-3 cursor-pointer items-center", children: [
         e?.dataExplorerIcon,
         e?.dataExplorer
       ] }) })
     ]
   }
-), q = j(null);
-function Xe({
+), re = U(null);
+function Dt({
   value: e,
   children: t
 }) {
-  const n = D(() => e ?? {}, [e]);
-  return /* @__PURE__ */ r(q.Provider, { value: n, children: t });
+  const n = W(() => e ?? {}, [e]);
+  return /* @__PURE__ */ r(re.Provider, { value: n, children: t });
 }
-function Ne() {
-  return G(q);
+function Be() {
+  return V(re);
 }
-var I = /* @__PURE__ */ ((e) => (e.Info = "info", e.Error = "error", e.Warning = "warning", e))(I || {});
-const Ce = {
-  [I.Info]: "border-neutrals-800 bg-neutrals-300 text-neutrals-1000",
-  [I.Error]: "border-semantic-error bg-semantic-error-light text-neutrals-1000",
-  [I.Warning]: "border-semantic-warning bg-semantic-warning-light text-neutrals-1000"
-}, we = "shrink-0", ye = "min-w-0 body-2", ve = "flex items-start gap-2 min-w-0 border-l-2 rounded py-2 px-4 items-center";
-function Ze({
+var P = /* @__PURE__ */ ((e) => (e.Info = "info", e.Error = "error", e.Warning = "warning", e))(P || {});
+const We = {
+  [P.Info]: "border-neutrals-800 bg-neutrals-300 text-neutrals-1000",
+  [P.Error]: "border-semantic-error bg-semantic-error-light text-neutrals-1000",
+  [P.Warning]: "border-semantic-warning bg-semantic-warning-light text-neutrals-1000"
+}, qe = "shrink-0", He = "min-w-0 body-2", Ue = "flex items-start gap-2 min-w-0 border-l-2 rounded py-2 px-4 items-center";
+function Lt({
   type: e,
   icon: t,
   children: n,
-  className: l,
-  contentClassName: s
+  className: s,
+  contentClassName: l
 }) {
-  const a = Ne(), c = t ?? a?.icons?.[e], u = a?.classes?.container ?? ve, d = a?.classes?.types?.[e] ?? Ce[e], h = v(u, d, l), f = v(we, a?.classes?.icon), g = v(
-    ye,
+  const a = Be(), d = t ?? a?.icons?.[e], u = a?.classes?.container ?? Ue, h = a?.classes?.types?.[e] ?? We[e], m = L(u, h, s), p = L(qe, a?.classes?.icon), x = L(
+    He,
     a?.classes?.content,
-    s
+    l
   );
-  return /* @__PURE__ */ o("div", { "data-type": e, className: h, children: [
-    c ? /* @__PURE__ */ r("span", { className: f, children: c }) : null,
-    n ? /* @__PURE__ */ r("div", { className: g, children: n }) : null
+  return /* @__PURE__ */ o("div", { "data-type": e, className: m, children: [
+    d ? /* @__PURE__ */ r("span", { className: p, children: d }) : null,
+    n ? /* @__PURE__ */ r("div", { className: x, children: n }) : null
   ] });
 }
-const Je = ({
+const Rt = ({
   title: e,
   copiedTitle: t,
   tooltip: n,
-  icon: l,
-  copiedIcon: s,
+  icon: s,
+  copiedIcon: l,
   className: a,
-  buttonTextClassName: c,
+  buttonTextClassName: d,
   onClick: u
 }) => {
-  const [d, h] = A(!1), f = P(null), g = () => {
-    u(), h(!0), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
-      h(!1);
+  const [h, m] = j(!1), p = B(null), x = () => {
+    u(), m(!0), p.current && clearTimeout(p.current), p.current = setTimeout(() => {
+      m(!1);
     }, 1e3);
   };
-  return _(() => () => {
-    f.current && clearTimeout(f.current);
+  return M(() => () => {
+    p.current && clearTimeout(p.current);
   }, []), /* @__PURE__ */ o("div", { className: "relative w-fit", children: [
     /* @__PURE__ */ r(
-      pe,
+      je,
       {
-        title: d ? t : e,
+        title: h ? t : e,
         isSmallButton: !0,
-        disabled: d,
-        buttonClassName: v([
+        disabled: h,
+        buttonClassName: L([
           "text-button-tertiary small-icon-button !h-6 !p-0",
           a
         ]),
-        textClassName: v(["ml-1", c]),
-        onClick: g,
-        iconBefore: d ? s : l
+        textClassName: L(["ml-1", d]),
+        onClick: x,
+        iconBefore: h ? l : s
       }
     ),
-    n && d && /* @__PURE__ */ r("div", { className: "absolute left-1/2 top-full z-50 mt-1 -translate-x-1/2 whitespace-nowrap rounded border border-neutrals-400 bg-white px-3 py-4 text-neutrals-900 h4 shadow", children: n })
+    n && h && /* @__PURE__ */ r("div", { className: "absolute left-1/2 top-full z-50 mt-1 -translate-x-1/2 whitespace-nowrap rounded border border-neutrals-400 bg-white px-3 py-4 text-neutrals-900 h4 shadow", children: n })
   ] });
 };
-var Ee = /* @__PURE__ */ ((e) => (e.Enter = "Enter", e))(Ee || {});
-const Q = j(null);
+function Ve({
+  id: e,
+  label: t,
+  hasChildren: n,
+  showDragHandle: s,
+  showCheckbox: l,
+  isChecked: a,
+  isExpanded: d
+}) {
+  return /* @__PURE__ */ o("div", { className: "rounded bg-neutrals-200 shadow cursor-grabbing relative", children: [
+    /* @__PURE__ */ r("div", { className: "absolute -left-[0.5px] top-0.5 w-0.5 h-5 rounded-full bg-gradients-light" }),
+    /* @__PURE__ */ o("div", { className: "flex items-stretch overflow-hidden rounded", children: [
+      s ? /* @__PURE__ */ r("div", { className: "flex w-6 items-center justify-center", children: /* @__PURE__ */ r("span", { "aria-hidden": !0, className: "rounded p-1", children: /* @__PURE__ */ r(Q, { size: 16 }) }) }) : null,
+      /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-1 items-center gap-2 p-1", children: [
+        l ? /* @__PURE__ */ r(ne, { id: e, checked: !!a, className: "p-0" }) : null,
+        /* @__PURE__ */ r("span", { className: "truncate body-3", children: t })
+      ] }),
+      n ? /* @__PURE__ */ r("div", { className: "flex w-8 items-center justify-center", children: /* @__PURE__ */ r(
+        "span",
+        {
+          "aria-hidden": !0,
+          className: f(
+            "transition-transform",
+            d ? "rotate-90" : "rotate-0"
+          ),
+          children: /* @__PURE__ */ r(K, { size: 16 })
+        }
+      ) }) : null
+    ] })
+  ] });
+}
+function se(e, t) {
+  return `i:${[...e, t].join("/")}`;
+}
+function G(e) {
+  if (!e.startsWith("i:")) return null;
+  const n = e.slice(2).split("/").filter(Boolean);
+  return n.length ? {
+    parentPath: n.slice(0, -1),
+    itemId: n[n.length - 1]
+  } : null;
+}
+function Qe(e, t, n) {
+  const s = ae(e, t);
+  return s ? s.find((l) => l.id === n) ?? null : null;
+}
+function le(e, t) {
+  if (t.length === 0) return e;
+  const [n, ...s] = t, l = e.find((a) => a.id === n);
+  return l?.items ? le(l.items, s) : null;
+}
+function ae(e, t) {
+  const n = le(e, t);
+  return n ? n.filter(
+    (s) => s.type === "item"
+  ) : null;
+}
+function ie(e, t, n) {
+  if (t.length === 0)
+    return n(e);
+  const [s, ...l] = t;
+  return e.map((a) => a.id !== s || !a.items ? a : {
+    ...a,
+    items: ie(a.items, l, n)
+  });
+}
 function Ke({
+  parentPath: e,
+  item: t,
+  showDragHandle: n,
+  showCheckbox: s,
+  renderLabel: l,
+  onItemClick: a,
+  onToggleExpanded: d,
+  onToggleChecked: u
+}) {
+  const h = !!t.items?.length, m = !!t.isExpanded, p = t.isDisabled ? !1 : t.draggable ?? !0, x = t.isDisabled ? !1 : t.checkable ?? !0, w = se(e, t.id), {
+    attributes: b,
+    listeners: N,
+    setNodeRef: g,
+    setActivatorNodeRef: c,
+    transform: i,
+    transition: v,
+    isDragging: S
+  } = Oe({ id: w, disabled: !p }), E = {
+    transform: Te.Transform.toString(i),
+    transition: v,
+    opacity: S ? 0.6 : void 0
+  }, y = !!t.isDisabled, C = [...e, t.id];
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: g,
+      style: E,
+      className: f([
+        "group flex items-stretch overflow-hidden rounded bg-white",
+        "select-none",
+        y ? "opacity-50" : ""
+      ]),
+      children: [
+        n ? /* @__PURE__ */ r(
+          "div",
+          {
+            className: f([
+              "group/drag-handle flex w-6 items-center justify-center rounded",
+              y ? "" : "hover:bg-neutrals-100 cursor-grab"
+            ]),
+            children: /* @__PURE__ */ r(
+              "span",
+              {
+                ref: c,
+                "aria-hidden": !0,
+                className: f([
+                  "rounded p-1",
+                  p ? "cursor-grab" : "cursor-default",
+                  "transition-opacity"
+                ]),
+                ...p ? N : {},
+                ...p ? b : {},
+                children: /* @__PURE__ */ r(
+                  Q,
+                  {
+                    size: 16,
+                    className: "text-neutrals-800 group-hover/drag-handle:text-primary"
+                  }
+                )
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            disabled: y,
+            onClick: (k) => a?.({
+              itemId: t.id,
+              path: C,
+              nativeEvent: k
+            }),
+            className: f([
+              "flex min-w-0 flex-1 items-center gap-2 p-1 text-left rounded",
+              y ? "" : "hover:bg-neutrals-100",
+              y ? "" : "hover:text-blue-700",
+              "focus:outline-none"
+            ]),
+            children: [
+              s ? /* @__PURE__ */ r(
+                ne,
+                {
+                  id: `draggable-list-${C.join("-")}`,
+                  checked: !!t.isChecked,
+                  disabled: !x,
+                  className: "p-0",
+                  stopPropagation: !0,
+                  onChange: (k, D) => u?.({
+                    itemId: t.id,
+                    path: C,
+                    nextChecked: !!D
+                  })
+                }
+              ) : null,
+              /* @__PURE__ */ r("span", { className: "truncate body-3 text-neutrals-800", children: l ? l(t) : t.label })
+            ]
+          }
+        ),
+        h ? /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            disabled: y,
+            onClick: (k) => {
+              k.stopPropagation(), d?.({
+                itemId: t.id,
+                path: C,
+                nextExpanded: !m
+              });
+            },
+            "aria-label": m ? "Collapse" : "Expand",
+            className: f([
+              "flex w-8 items-center justify-center rounded",
+              y ? "" : "hover:bg-neutrals-100",
+              "focus:outline-none"
+            ]),
+            children: /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": !0,
+                className: f(
+                  "transition-transform duration-150 ease-out",
+                  m ? "rotate-90" : "rotate-0"
+                ),
+                children: /* @__PURE__ */ r(K, { size: 16 })
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Ft({
+  items: e,
+  showDragHandle: t = !0,
+  showCheckbox: n = !0,
+  onItemsChange: s,
+  onToggleExpanded: l,
+  onToggleChecked: a,
+  onItemClick: d,
+  renderLabel: u
+}) {
+  const h = Ie(
+    ke(De, { activationConstraint: { distance: 6 } })
+  ), [m, p] = oe.useState(null), x = (N) => {
+    const g = String(N.active.id), c = G(g);
+    if (!c) return;
+    const i = Qe(e, c.parentPath, c.itemId);
+    !i || i.type !== "item" || p({
+      id: g,
+      label: i.label,
+      hasChildren: !!i.items?.length,
+      isChecked: i.isChecked,
+      isExpanded: i.isExpanded
+    });
+  }, w = (N) => {
+    p(null);
+    const g = N.over;
+    if (!g) return;
+    const c = G(String(N.active.id)), i = G(String(g.id));
+    if (!c || !i || c.parentPath.join("/") !== i.parentPath.join("/")) return;
+    const v = ae(e, c.parentPath);
+    if (!v) return;
+    const S = v.findIndex((C) => C.id === c.itemId), E = v.findIndex((C) => C.id === i.itemId);
+    if (S === -1 || E === -1 || S === E) return;
+    const y = ie(e, c.parentPath, (C) => {
+      const k = C.filter(
+        (R) => R.type === "item"
+      ), D = Pe(k, S, E);
+      let I = 0;
+      return C.map((R) => {
+        if (R.type !== "item") return R;
+        const Y = D[I];
+        return I += 1, Y;
+      });
+    });
+    s(y);
+  }, b = (N, g = []) => {
+    const c = N.filter((i) => i.type === "item").map((i) => se(g, i.id));
+    return /* @__PURE__ */ r(
+      Ae,
+      {
+        items: c,
+        strategy: _e,
+        children: /* @__PURE__ */ r("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: N.map((i) => i.type === "group" ? /* @__PURE__ */ o(
+          "li",
+          {
+            className: "m-0 mt-2 first:mt-0 flex flex-col gap-2 p-0",
+            children: [
+              /* @__PURE__ */ o("div", { className: "text-neutrals-1000 h5 flex items-center gap-2 py-1", children: [
+                /* @__PURE__ */ r(fe, { size: 12, className: "shrink-0" }),
+                i.label
+              ] }),
+              /* @__PURE__ */ r("div", { className: "pl-2 border-l border-neutrals-600", children: b(i.items, [...g, i.id]) })
+            ]
+          },
+          i.id
+        ) : /* @__PURE__ */ o("li", { className: "m-0 flex flex-col gap-2 p-0", children: [
+          /* @__PURE__ */ r(
+            Ke,
+            {
+              parentPath: g,
+              item: i,
+              showDragHandle: t,
+              showCheckbox: n,
+              renderLabel: u,
+              onItemClick: d,
+              onToggleExpanded: l,
+              onToggleChecked: a
+            }
+          ),
+          i.items?.length && i.isExpanded ? /* @__PURE__ */ r("div", { className: "pl-7", children: b(i.items, [...g, i.id]) }) : null
+        ] }, i.id)) })
+      }
+    );
+  };
+  return /* @__PURE__ */ o(
+    Le,
+    {
+      sensors: h,
+      collisionDetection: Re,
+      onDragStart: x,
+      onDragEnd: w,
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex flex-col", children: b(e) }),
+        /* @__PURE__ */ r(Fe, { children: m ? /* @__PURE__ */ r(
+          Ve,
+          {
+            id: m.id,
+            label: m.label,
+            hasChildren: m.hasChildren,
+            showDragHandle: t,
+            showCheckbox: n,
+            isChecked: m.isChecked,
+            isExpanded: m.isExpanded
+          }
+        ) : null })
+      ]
+    }
+  );
+}
+const Xe = (e, t) => e.label.toLowerCase().includes(t);
+function Ot(e, t, n = {}) {
+  const s = Je(t);
+  if (!s)
+    return e;
+  const {
+    expandMatchedBranches: l = !0,
+    includeGroupDescendantsOnMatch: a = !0,
+    includeItemDescendantsOnMatch: d = !1,
+    match: u = Xe
+  } = n;
+  return z(e, s, {
+    expandMatchedBranches: l,
+    includeGroupDescendantsOnMatch: a,
+    includeItemDescendantsOnMatch: d,
+    match: u
+  }) ?? [];
+}
+function z(e, t, n) {
+  const s = [];
+  for (const l of e) {
+    const a = Ze(l, t, n);
+    a && s.push(a);
+  }
+  return s.length ? s : null;
+}
+function Ze(e, t, n) {
+  const s = n.match(e, t);
+  if (e.type === "group") {
+    if (s && n.includeGroupDescendantsOnMatch)
+      return T(e, n.expandMatchedBranches);
+    const d = e.items?.length ? z(e.items, t, n) : null;
+    return !s && !d ? null : {
+      ...e,
+      items: d ?? []
+    };
+  }
+  const l = e.items?.length ? z(e.items, t, n) : null;
+  if (s && n.includeItemDescendantsOnMatch)
+    return T(e, n.expandMatchedBranches);
+  if (!s && !l)
+    return null;
+  const a = {
+    ...e
+  };
+  return l ? (a.items = l, n.expandMatchedBranches && (a.isExpanded = !0)) : delete a.items, a;
+}
+function T(e, t) {
+  return e.type === "group" ? {
+    ...e,
+    items: e.items.map(
+      (n) => T(n, t)
+    )
+  } : {
+    ...e,
+    isExpanded: t && e.items?.length ? !0 : e.isExpanded,
+    items: e.items?.map((n) => T(n, t))
+  };
+}
+function Je(e) {
+  return e.trim().toLowerCase();
+}
+var et = /* @__PURE__ */ ((e) => (e.Enter = "Enter", e))(et || {});
+const ce = U(null);
+function At({
   children: e,
   isAgentAvailable: t
 }) {
-  const n = D(() => ({ isAgentAvailable: t }), [t]);
-  return /* @__PURE__ */ r(Q.Provider, { value: n, children: e });
+  const n = W(() => ({ isAgentAvailable: t }), [t]);
+  return /* @__PURE__ */ r(ce.Provider, { value: n, children: e });
 }
-function et() {
-  const e = G(Q);
+function _t() {
+  const e = V(ce);
   if (!e)
     throw new Error(
       "useAgentAvailability must be used within AgentAvailabilityProvider"
@@ -793,38 +1189,40 @@ function et() {
   return e;
 }
 export {
-  Ke as AgentAvailabilityProvider,
-  Oe as Alert,
-  y as AlertType,
-  pe as Button,
-  xe as CALENDAR_MOBILE_PADDING,
-  Me as Calendar,
-  Ye as Checkbox,
-  W as CloseButton,
-  je as CollapsibleBlock,
-  Je as CopyButton,
-  Ve as DownloadFormatMessage,
-  Qe as Dropdown,
-  Ge as HighlightText,
-  $e as IconButton,
-  Ze as InlineAlert,
-  Xe as InlineAlertProvider,
-  I as InlineAlertType,
-  ge as Input,
-  He as InputWithIcon,
-  Ee as KeyboardKey,
-  Be as Link,
-  U as Loader,
-  T as PopUpSize,
-  S as PopUpState,
-  qe as Popup,
-  We as Radio,
-  ze as RequestLimitMessage,
-  M as SERIES_LIMIT,
-  Pe as TREE_NODE_ARROW_SIZE,
-  De as TREE_NODE_PADDING,
-  Ue as Tag,
-  et as useAgentAvailability,
-  Te as useDebounce,
-  fe as useIsMobile
+  At as AgentAvailabilityProvider,
+  mt as Alert,
+  F as AlertType,
+  je as Button,
+  Ge as CALENDAR_MOBILE_PADDING,
+  gt as Calendar,
+  ne as Checkbox,
+  te as CloseButton,
+  xt as CollapsibleBlock,
+  Rt as CopyButton,
+  It as DownloadFormatMessage,
+  Ft as DraggableList,
+  St as Dropdown,
+  bt as HighlightText,
+  Nt as IconButton,
+  Lt as InlineAlert,
+  Dt as InlineAlertProvider,
+  P as InlineAlertType,
+  $e as Input,
+  Ct as InputWithIcon,
+  et as KeyboardKey,
+  vt as Link,
+  ee as Loader,
+  $ as PopUpSize,
+  A as PopUpState,
+  Et as Popup,
+  wt as Radio,
+  kt as RequestLimitMessage,
+  q as SERIES_LIMIT,
+  ft as TREE_NODE_ARROW_SIZE,
+  pt as TREE_NODE_PADDING,
+  yt as Tag,
+  Ot as filterDraggableListNodes,
+  _t as useAgentAvailability,
+  ht as useDebounce,
+  Ye as useIsMobile
 };