@epam/statgpt-ui-components 0.2.0-rc.8 → 0.2.0

package/index.mjs

@@ -1,435 +1,484 @@
-import { jsx as t, jsxs as l, Fragment as Y } from "react/jsx-runtime";
-import { useEffect as k, useRef as j, useCallback as C, useState as P, useMemo as z } from "react";
-import h from "classnames";
-import { IconX as X, IconCalendarEvent as Z, IconChevronDown as B } from "@tabler/icons-react";
-import J from "react-flatpickr";
-import { CalendarResolution as S } from "@epam/statgpt-shared-toolkit";
-import { useFloating as I, useRole as K, useDismiss as G, useInteractions as H, FloatingPortal as V, FloatingOverlay as D, FloatingFocusManager as M, autoUpdate as nn, offset as en, flip as rn, shift as cn, useClick as tn } from "@floating-ui/react";
-const q = () => /* @__PURE__ */ t("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ t("div", { className: "loader" }) }), T = ({
-  title: n,
-  btnClassNames: e,
-  iconWidth: c,
-  iconHeight: r,
-  onClick: o
-}) => /* @__PURE__ */ t(
+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 = ({
+  title: e,
+  btnClassNames: t,
+  iconWidth: n,
+  iconHeight: l,
+  onClick: s
+}) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
     "aria-label": "button",
-    className: e,
-    title: n,
-    onClick: o,
-    children: /* @__PURE__ */ t(X, { height: r || 20, width: c || 20 })
+    className: t,
+    title: e,
+    onClick: s,
+    children: /* @__PURE__ */ r(K, { height: l || 20, width: n || 20 })
   }
 );
-var E = /* @__PURE__ */ ((n) => (n.ERROR = "error", n.SUCCESS = "success", n.IN_PROGRESS = "in_progress", n))(E || {});
-const bn = ({
-  alertDetails: n,
-  successIcon: e,
-  errorIcon: c,
-  onClose: r,
-  closeButtonTitle: o
+var y = /* @__PURE__ */ ((e) => (e.ERROR = "error", e.SUCCESS = "success", e.IN_PROGRESS = "in_progress", e))(y || {});
+const Oe = ({
+  alertDetails: e,
+  successIcon: t,
+  errorIcon: n,
+  onClose: l,
+  closeButtonTitle: s
 }) => {
-  const a = () => (n == null ? void 0 : n.type) === E.IN_PROGRESS ? "alert-in-progress" : (n == null ? void 0 : n.type) === E.SUCCESS ? "alert-success" : "alert-error";
-  return k(() => {
-    (n == null ? void 0 : n.type) !== E.IN_PROGRESS && setTimeout(() => {
-      r == null || r();
+  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?.();
     }, 5e3);
-  }, [n == null ? void 0 : n.type, r]), /* @__PURE__ */ t(
+  }, [e?.type, l]), /* @__PURE__ */ r(
     "div",
     {
-      className: h(
+      className: m(
         "alert alert-shadow fixed bottom-3 right-3 z-10",
         a()
       ),
-      children: /* @__PURE__ */ l("div", { className: "alert-content flex items-start", children: [
-        /* @__PURE__ */ t("div", { className: "alert-icon", children: (n == null ? void 0 : n.type) === E.IN_PROGRESS ? /* @__PURE__ */ t(q, {}) : (n == null ? void 0 : n.type) === E.SUCCESS ? e : c }),
-        /* @__PURE__ */ l("div", { className: "flex flex-col gap-2 max-w-[300px]", children: [
-          /* @__PURE__ */ t("h3", { className: "truncate", children: n == null ? void 0 : n.title }),
-          (n == null ? void 0 : n.text) && /* @__PURE__ */ t("div", { className: "alert-text truncate", title: n == null ? void 0 : n.text, children: n == null ? void 0 : n.text })
+      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__ */ 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__ */ t(T, { title: o, onClick: r })
+        /* @__PURE__ */ r(W, { title: s, onClick: l })
       ] })
     }
   );
-}, xn = ({
-  buttonClassName: n,
-  isLoading: e = !1,
-  title: c,
-  disabled: r,
-  iconAfter: o,
-  iconBefore: a,
+}, he = ne({
+  extend: {
+    classGroups: {
+      typography: [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "body-1",
+        "body-2",
+        "body-3",
+        "caption"
+      ]
+    }
+  }
+});
+function v(...e) {
+  return he(m(...e));
+}
+const pe = ({
+  buttonClassName: e,
+  textClassName: t,
+  isLoading: n = !1,
+  title: l,
+  disabled: s,
+  iconAfter: a,
+  iconBefore: c,
   onClick: u,
   isSmallButton: d
 }) => {
-  const s = h(
+  const h = v([
     d ? "font-semibold" : "",
-    o ? "mr-2" : "",
-    a ? "ml-2" : ""
-  );
-  return /* @__PURE__ */ l(
+    a ? "mr-2" : "",
+    c ? "ml-2" : "",
+    t
+  ]);
+  return /* @__PURE__ */ o(
     "button",
     {
       type: "button",
-      className: h(
+      className: m(
         "base-button",
-        n,
+        e,
         d ? "small-button" : ""
       ),
-      disabled: r || e,
+      disabled: s || n,
       "aria-label": "button",
-      onClick: (m) => u == null ? void 0 : u(m),
-      title: c,
+      onClick: (f) => u?.(f),
+      title: l,
       children: [
-        a,
-        e && /* @__PURE__ */ t(q, {}),
-        c ? d ? /* @__PURE__ */ t("h4", { className: s, children: c }) : /* @__PURE__ */ t("h3", { className: s, children: c }) : null,
-        o
+        c,
+        n && /* @__PURE__ */ r(U, {}),
+        l ? d ? /* @__PURE__ */ r("h4", { className: h, children: l }) : /* @__PURE__ */ r("h3", { className: h, children: l }) : null,
+        a
       ]
     }
   );
-}, Nn = ({
-  label: n,
-  onChange: e,
-  value: c,
-  options: r,
-  calendarResolution: o = S.DAY,
+};
+function fe(e = 719) {
+  const [t, n] = A(
+    () => typeof window < "u" ? window.innerWidth < e : !1
+  );
+  return _(() => {
+    const l = window.matchMedia(`(max-width: ${e}px)`), s = (a) => {
+      n(a.matches);
+    };
+    return n(l.matches), l.addEventListener("change", s), () => l.removeEventListener("change", s);
+  }, [e]), t;
+}
+function Te(e, t) {
+  const n = P(null);
+  return L(
+    (...s) => {
+      n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+        e(...s);
+      }, t);
+    },
+    [e, t]
+  );
+}
+const Pe = 24, De = 24, M = 1e3, xe = 24, Me = ({
+  label: e,
+  onChange: t,
+  value: n,
+  options: l,
+  calendarResolution: s = k.DAY,
   id: a,
-  icon: u
+  icon: c,
+  isEndDate: u
 }) => {
-  var N;
-  const d = j(null);
-  k(() => {
-    var w;
-    const b = d == null ? void 0 : d.current;
-    b && ((w = b.querySelector("input")) == null || w.setAttribute("aria-label", n));
-  }, [n]);
-  const s = {
-    ...r,
-    defaultDate: o === S.MONTH ? new Date(c.getFullYear(), c.getMonth()) : c
-  }, m = (b, w, y) => {
-    const x = `calendar__${o === S.MONTH ? "month" : "day"}`;
-    y.calendarContainer && y.calendarContainer.classList.add(x);
-  }, i = (b, w, y) => {
-    if (o === S.MONTH && b.length > 0) {
-      const x = r.minDate, p = r.maxDate, f = b[0].getFullYear(), F = y.calendarContainer, _ = "flatpickr-disabled", $ = F.querySelectorAll(
+  const d = P(null), h = fe();
+  _(() => {
+    const x = d?.current;
+    x && x.querySelector("input")?.setAttribute("aria-label", e);
+  }, [e]);
+  const f = {
+    ...l,
+    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(
         ".flatpickr-monthSelect-month"
-      ), A = F.querySelectorAll(
+      ), z = R.querySelectorAll(
         ".flatpickr-next-month"
-      )[0], W = F.querySelectorAll(
+      )[0], X = R.querySelectorAll(
         ".flatpickr-prev-month"
       )[0];
-      f === p.getFullYear() && A.classList.add(_), f === x.getFullYear() && W.classList.add(_), (f === x.getFullYear() || f === p.getFullYear()) && $.forEach((L) => {
-        L.classList.remove(_);
-        const v = new Date(L.getAttribute("aria-label")), Q = v.getFullYear() === x.getFullYear() && v.getMonth() === x.getMonth(), U = v.getFullYear() === p.getFullYear() && v.getMonth() === p.getMonth();
-        Q || U || (v < x || v > p) && L.classList.add(_);
+      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);
       });
     }
+    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`);
+    }, 0);
   };
-  return /* @__PURE__ */ l("div", { className: "relative calendar", ref: d, children: [
-    /* @__PURE__ */ t("div", { className: "mb-1 calendar-title", children: n }),
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ o("div", { className: "relative calendar", ref: d, 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: u || /* @__PURE__ */ t(Z, {})
+        children: c || /* @__PURE__ */ r(ee, {})
       }
     ),
-    /* @__PURE__ */ t(
-      J,
+    /* @__PURE__ */ r(
+      re,
       {
-        defaultValue: (N = o === S.MONTH ? new Date(c.getFullYear(), c.getMonth()) : c) == null ? void 0 : N.toDateString(),
-        options: s,
-        onChange: (b) => {
-          e(b[0]);
+        defaultValue: (s === k.MONTH ? new Date(n.getFullYear(), n.getMonth()) : n)?.toDateString(),
+        options: f,
+        onChange: (x) => {
+          t(x[0]);
         },
-        onOpen: [i],
-        onReady: [m],
+        onOpen: [N],
+        onReady: [g],
         id: a
       }
     )
   ] });
-}, wn = ({
-  label: n,
-  id: e,
-  checked: c,
-  checkboxIcon: r,
-  onChange: o
+}, Ye = ({
+  label: e,
+  id: t,
+  checked: n,
+  checkboxIcon: l,
+  onChange: s
 }) => {
-  const a = C(
-    (u) => {
-      u.stopPropagation(), o == null || o(e, u.target.checked);
+  const a = L(
+    (c) => {
+      c.stopPropagation(), s?.(t, c.target.checked);
     },
-    [o, e]
+    [s, t]
   );
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ o(
     "label",
     {
       className: "flex items-center cursor-pointer min-w-0 py-1",
-      htmlFor: e,
+      htmlFor: t,
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "span",
           {
-            className: h(
+            className: m(
               "flex justify-center items-center w-4 h-4 mr-2 relative",
               "checkbox-button"
             ),
-            children: c && r
+            children: n && l
           }
         ),
-        n && /* @__PURE__ */ t(
+        e && /* @__PURE__ */ r(
           "p",
           {
-            className: h(
+            className: m(
               "text-neutrals-1000 flex-1 min-w-0 truncate pr-2",
               "checkbox-button-text"
             ),
-            title: n,
-            children: n
+            title: e,
+            children: e
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "input",
           {
             type: "checkbox",
             onChange: a,
-            id: e,
-            checked: c,
+            id: t,
+            checked: n,
             className: "hidden"
           }
         )
       ]
     }
   );
-}, yn = ({
-  title: n,
-  icon: e,
-  children: c,
-  value: r
+}, je = ({
+  title: e,
+  icon: t,
+  children: n,
+  value: l
 }) => {
-  const [o, a] = P(!1);
-  return /* @__PURE__ */ l(
+  const [s, a] = A(!1);
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `collapsible-block flex flex-col border-t-2 border-neutrals-600 ${o ? "collapsible-block-open" : ""}`,
+      className: `collapsible-block flex flex-col border-t-2 border-neutrals-600 ${s ? "collapsible-block-open" : ""}`,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           "div",
           {
             className: "collapsible-block-title flex cursor-pointer items-center py-4",
-            onClick: () => a(!o),
+            onClick: () => a(!s),
             children: [
-              /* @__PURE__ */ t("div", { className: `${o ? "rotate-180" : ""} transition-transform`, children: e || /* @__PURE__ */ t(B, { className: "w-5 h-5 mr-3" }) }),
-              /* @__PURE__ */ l("div", { className: "flex flex-1 items-center justify-between", children: [
-                /* @__PURE__ */ t("span", { children: n }),
-                r && /* @__PURE__ */ t("p", { className: "body-1 text-neutrals-800", children: r })
+              /* @__PURE__ */ r("div", { className: `${s ? "rotate-180" : ""} transition-transform`, children: t || /* @__PURE__ */ r(te, { 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 })
               ] })
             ]
           }
         ),
-        o && /* @__PURE__ */ t("div", { className: "collapsible-block-content pb-4", children: c })
+        s && /* @__PURE__ */ r("div", { className: "collapsible-block-content pb-4", children: n })
       ]
     }
   );
-}, vn = ({ text: n, highlightText: e }) => {
-  const c = z(() => {
-    var u;
-    const r = [];
-    if (!e)
-      return [{ id: 0, text: n, highlight: !1 }];
-    const o = (e == null ? void 0 : e.toLowerCase()) || "", a = ((u = n == null ? void 0 : n.toLowerCase()) == null ? void 0 : u.split(o)) || "";
-    for (let d = 0, s = 0; d < (a == null ? void 0 : a.length); d++) {
-      const m = a == null ? void 0 : a[d], i = m.length;
-      m !== "" && r.push({
-        id: r.length,
+}, Ge = ({ text: e, highlightText: t }) => {
+  const n = D(() => {
+    const l = [];
+    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,
         highlight: !1,
-        text: n == null ? void 0 : n.substring(
-          s,
-          s + i
+        text: e?.substring(
+          u,
+          u + h
         )
-      }), s += i, d !== (a == null ? void 0 : a.length) - 1 && (r.push({
-        id: r.length,
+      }), u += h, c !== a?.length - 1 && (l.push({
+        id: l.length,
         highlight: !0,
-        text: n == null ? void 0 : n.substring(
-          s,
-          s + e.length
+        text: e?.substring(
+          u,
+          u + t.length
         )
-      }), s += e.length);
+      }), u += t.length);
     }
-    return r;
-  }, [e, n]);
-  return /* @__PURE__ */ t(Y, { children: c.map((r) => /* @__PURE__ */ t(
+    return l;
+  }, [t, e]);
+  return /* @__PURE__ */ r(Y, { children: n.map((l) => /* @__PURE__ */ r(
     "span",
     {
-      className: h((r == null ? void 0 : r.highlight) && "bg-highlight"),
-      children: r == null ? void 0 : r.text
+      className: m(l?.highlight && "bg-highlight"),
+      children: l?.text
     },
-    r == null ? void 0 : r.id
+    l?.id
   )) });
-}, En = ({
-  icon: n,
-  onClick: e,
-  buttonClassName: c,
-  disabled: r,
-  title: o,
+}, $e = ({
+  icon: e,
+  onClick: t,
+  buttonClassName: n,
+  disabled: l,
+  title: s,
   isBaseIconStyles: a = !0
-}) => /* @__PURE__ */ t(
+}) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
-    className: h(
+    className: m(
       a && "base-icon-button",
-      c
+      n
     ),
-    onClick: (u) => e == null ? void 0 : e(u),
-    disabled: r,
-    title: o,
+    onClick: (c) => t?.(c),
+    disabled: l,
+    title: s,
     "aria-label": "button",
-    children: n
+    children: e
   }
-), on = ({
-  value: n,
-  inputId: e,
-  placeholder: c = "",
-  cssClass: r = "",
-  type: o = "text",
+), ge = ({
+  value: e,
+  inputId: t,
+  placeholder: n = "",
+  cssClass: l = "",
+  type: s = "text",
   disabled: a,
-  readonly: u,
-  onChange: d,
-  onKeyDown: s
+  readonly: c,
+  onChange: u,
+  onKeyDown: d
 }) => {
-  const m = h(
+  const h = m(
     "truncate outline-none shadow-none body-1",
-    r,
-    u ? "pointer-events-none" : ""
+    l,
+    c ? "pointer-events-none" : ""
   );
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ r(
     "input",
     {
-      type: o,
+      type: s,
       autoComplete: "off",
-      id: e,
-      placeholder: c,
-      value: n || "",
-      title: n ? String(n) : "",
+      id: t,
+      placeholder: n,
+      value: e || "",
+      title: e ? String(e) : "",
       disabled: a,
-      className: m,
-      onKeyDown: s,
-      onChange: (i) => d == null ? void 0 : d(i.currentTarget.value)
+      className: h,
+      onKeyDown: d,
+      onChange: (f) => u?.(f.currentTarget.value)
     }
   );
-}, Fn = ({
-  iconBeforeInput: n,
-  iconAfterInput: e,
-  containerClasses: c,
-  cssClass: r,
-  ...o
-}) => /* @__PURE__ */ l("div", { className: h("input w-full flex flex-row", c), children: [
-  n,
-  /* @__PURE__ */ t(
-    on,
+}, He = ({
+  iconBeforeInput: e,
+  iconAfterInput: t,
+  containerClasses: n,
+  cssClass: l,
+  ...s
+}) => /* @__PURE__ */ o("div", { className: m("input w-full flex flex-row", n), children: [
+  e,
+  /* @__PURE__ */ r(
+    ge,
     {
-      cssClass: h(
+      cssClass: m(
         "border-0 bg-transparent p-0 h-full shadow-none flex-1 min-w-0 rounded-none",
-        r
+        l
       ),
-      ...o
+      ...s
     }
   ),
-  e
-] }), Sn = ({
-  url: n,
-  title: e,
-  linkClassName: c = "",
-  iconBefore: r,
-  iconAfter: o
+  t
+] }), Be = ({
+  url: e,
+  title: t,
+  linkClassName: n = "",
+  iconBefore: l,
+  iconAfter: s
 }) => {
-  const a = h(
-    o ? "mr-2" : "",
-    r ? "ml-2" : ""
+  const a = m(
+    s ? "mr-2" : "",
+    l ? "ml-2" : ""
   );
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ o(
     "a",
     {
-      href: n,
+      href: e,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: h("base-link", c),
-      title: e,
+      className: m("base-link", n),
+      title: t,
       children: [
-        r,
-        /* @__PURE__ */ t("span", { className: a, children: e }),
-        o
+        l,
+        /* @__PURE__ */ r("span", { className: a, children: t }),
+        s
       ]
     }
   );
-}, Rn = ({ title: n, text: e, onClick: c }) => /* @__PURE__ */ t(
+}, Ue = ({ title: e, text: t, onClick: n }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
     className: "tag flex items-center justify-center",
-    onClick: () => c == null ? void 0 : c(e || n),
+    onClick: () => n?.(t || e),
     "aria-label": "button",
-    children: /* @__PURE__ */ t("h4", { children: n })
+    children: /* @__PURE__ */ r("h4", { children: e })
   }
-), _n = ({
-  label: n,
-  id: e,
-  checked: c,
-  radioIcon: r,
-  description: o,
+), We = ({
+  label: e,
+  id: t,
+  checked: n,
+  radioIcon: l,
+  description: s,
   onChange: a
 }) => {
-  const u = C(
-    (d) => {
-      d.stopPropagation(), a == null || a(e, d.target.checked);
+  const c = L(
+    (u) => {
+      u.stopPropagation(), a?.(t, u.target.checked);
     },
-    [a, e]
+    [a, t]
   );
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ o(
     "label",
     {
       className: "flex flex-col cursor-pointer min-w-0 py-[6px]",
-      htmlFor: e,
+      htmlFor: t,
       children: [
-        /* @__PURE__ */ l("p", { className: "radio-label flex items-center min-w-0", children: [
-          /* @__PURE__ */ t(
+        /* @__PURE__ */ o("p", { className: "radio-label flex items-center min-w-0", children: [
+          /* @__PURE__ */ r(
             "span",
             {
-              className: h(
+              className: m(
                 "flex justify-center items-center w-4 h-4 mr-2 relative",
                 "radio-button",
-                c ? "radio-button-active" : ""
+                n ? "radio-button-active" : ""
               ),
-              children: c && r
+              children: n && l
             }
           ),
-          n && /* @__PURE__ */ t(
+          e && /* @__PURE__ */ r(
             "span",
             {
               className: "radio-title body-1 text-neutrals-1000 flex-1 min-w-0 truncate pr-2",
-              title: n,
-              children: n
+              title: e,
+              children: e
             }
           )
         ] }),
-        o && /* @__PURE__ */ t(
+        s && /* @__PURE__ */ r(
           "span",
           {
             className: "radio-description ml-6 text-neutrals-800 body-2 w-auto flex items-center",
-            title: o,
-            children: o
+            title: s,
+            children: s
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "input",
           {
             type: "radio",
-            onChange: u,
-            id: e,
-            checked: c,
+            onChange: c,
+            id: t,
+            checked: n,
             className: "hidden"
           }
         )
@@ -437,242 +486,345 @@ const bn = ({
     }
   );
 };
-var R = /* @__PURE__ */ ((n) => (n.Closed = "Closed", n.Opened = "Opened", n))(R || {}), O = /* @__PURE__ */ ((n) => (n.LG = "Large", n.SM = "Small", n))(O || {});
-const an = ({
-  portalId: n,
-  state: e = R.Opened,
-  heading: c,
-  size: r,
-  onClose: o,
+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 = ({
+  portalId: e,
+  state: t = S.Opened,
+  heading: n,
+  size: l,
+  onClose: s,
   children: a,
-  overlayClassName: u,
-  containerClassName: d,
-  dividers: s = !0,
-  closeButtonTitle: m
+  overlayClassName: c,
+  containerClassName: u,
+  dividers: d = !0,
+  closeButtonTitle: h
 }) => {
-  const { refs: i, context: N } = I({
-    open: e !== R.Closed && !!e,
-    onOpenChange: o
-  }), b = K(N, { role: "dialog" }), w = G(N, { outsidePress: !0 }), { getFloatingProps: y } = H([b, w]), x = C(
-    (p) => {
-      p == null || p.preventDefault(), p == null || p.stopPropagation(), o();
+  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();
     },
-    [o]
+    [s]
   );
-  return /* @__PURE__ */ t(V, { id: n, children: e !== R.Closed && /* @__PURE__ */ t(
-    D,
+  return /* @__PURE__ */ r(se, { id: e, children: t !== S.Closed && /* @__PURE__ */ r(
+    ae,
     {
-      className: h(
+      className: m(
         "z-modal flex items-center justify-center bg-blackout p-4",
-        u
+        c
       ),
-      children: /* @__PURE__ */ t(M, { context: N, children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ r(oe, { context: g, children: /* @__PURE__ */ o(
         "div",
         {
-          className: h(
+          className: m(
             "relative max-h-full modal rounded bg-white flex flex-col shadow w-full",
-            r === O.LG && "max-w-[65%]",
-            r === O.SM && "max-w-[30%]",
-            s && "divide-neutrals-400 divide-y",
-            d,
+            l === T.LG && "max-w-[65%]",
+            l === T.SM && "max-w-[30%]",
+            d && "divide-neutrals-400 divide-y",
+            u,
             "sm:w-full sm:max-w-full sm:px-4 sm:py-6"
           ),
-          ref: i.setFloating,
-          ...y({
-            onClick(p) {
-              p.stopPropagation();
+          ref: f.setFloating,
+          ...E({
+            onClick(i) {
+              i.stopPropagation();
             }
           }),
           children: [
-            /* @__PURE__ */ l("div", { className: "flex flex-row justify-between py-3 px-6 items-center mb-2 modal-heading sm:p-0 sm:pb-2", children: [
-              c && (typeof c == "string" ? /* @__PURE__ */ t("h2", { className: "flex-1 min-w-0 mr-3 modal-heading-title sm:h3", children: c }) : c),
-              /* @__PURE__ */ t(
-                T,
+            /* @__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,
                 {
-                  title: m,
-                  onClick: x,
+                  title: h,
+                  onClick: b,
                   btnClassNames: "sm:h-[24px] sm:w-[24px] sm:top-4"
                 }
               )
             ] }),
-            a.map((p) => p)
+            a.map((i) => i)
           ]
         }
       ) })
     }
   ) });
-}, Cn = (n) => n.state === R.Closed ? null : /* @__PURE__ */ t(an, { ...n }), Ln = ({
-  triggerButton: n,
-  options: e,
-  content: c,
-  selectedOption: r,
-  disabled: o,
+}, qe = (e) => e.state === S.Closed ? null : /* @__PURE__ */ r(be, { ...e }), Qe = ({
+  triggerButton: e,
+  options: t,
+  content: n,
+  selectedOption: l,
+  disabled: s,
   containerClassName: a,
-  openedClassName: u,
-  onOptionSelect: d
+  openedClassName: c,
+  onOptionSelect: u
 }) => {
-  const [s, m] = P(!1), { refs: i, floatingStyles: N, context: b } = I({
-    open: s,
-    onOpenChange: o ? void 0 : m,
+  const [d, h] = A(!1), { refs: f, floatingStyles: g, context: N } = $({
+    open: d,
+    onOpenChange: s ? void 0 : h,
     placement: "bottom-end",
-    middleware: [en(8), rn(), cn()],
-    whileElementsMounted: nn
-  }), w = tn(b), y = G(b, { outsidePress: !0 }), { getReferenceProps: x, getFloatingProps: p } = H([
-    w,
-    y
+    middleware: [ie(8), de(), ue()],
+    whileElementsMounted: ce
+  }), x = me(N), E = H(N, { outsidePress: !0 }), { getReferenceProps: b, getFloatingProps: i } = B([
+    x,
+    E
   ]);
-  return /* @__PURE__ */ l(Y, { children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ o(Y, { children: [
+    /* @__PURE__ */ r(
       "div",
       {
-        ref: i.setReference,
-        ...x({
-          onClick(f) {
-            f.stopPropagation();
+        ref: f.setReference,
+        ...b({
+          onClick(p) {
+            p.stopPropagation();
           }
         }),
-        className: h(a, s && u),
-        children: n
+        className: m(a, d && c),
+        children: e
       }
     ),
-    s && /* @__PURE__ */ l(
+    d && /* @__PURE__ */ o(
       "div",
       {
-        ref: i.setFloating,
-        style: N,
+        ref: f.setFloating,
+        style: g,
         className: "flex flex-col z-10 dropdown-menu-shadow bg-white dropdown-container rounded",
-        ...p(),
+        ...i(),
         children: [
-          c && c,
-          e && e.map((f) => /* @__PURE__ */ t(
+          n && n,
+          t && t.map((p) => /* @__PURE__ */ r(
             "div",
             {
-              onClick: (F) => {
-                F.stopPropagation(), d == null || d(f.key), m(!1);
+              onClick: (C) => {
+                C.stopPropagation(), u?.(p.key), h(!1);
               },
-              className: h(
+              className: m(
                 "text-neutrals-900 body-3 cursor-pointer dropdown-item min-w-[200px]",
-                r === f.key && "bg-hues-100"
+                l === p.key && "bg-hues-100"
               ),
-              children: /* @__PURE__ */ l(
+              children: /* @__PURE__ */ o(
                 "div",
                 {
                   className: "p-2 hover:bg-hues-100 h-full dropdown-item-text flex items-center gap-x-2",
-                  title: f.title,
+                  title: p.title,
                   children: [
-                    f.icon ? f.icon : null,
-                    /* @__PURE__ */ t("p", { children: f == null ? void 0 : f.title })
+                    p.icon ? p.icon : null,
+                    /* @__PURE__ */ r("p", { children: p?.title })
                   ]
                 }
               )
             },
-            f.key
+            p.key
           ))
         ]
       }
     )
   ] });
-}, On = ({ limitMessages: n, query: e }) => /* @__PURE__ */ l("div", { className: "bg-hues-100 px-2 py-1 flex justify-between flex-wrap items-center", children: [
-  /* @__PURE__ */ t("div", { className: "flex gap-x-[4px]", children: /* @__PURE__ */ t("div", { className: "flex flex-col", children: /* @__PURE__ */ l("div", { className: "flex gap-x-[4px]", children: [
-    /* @__PURE__ */ l("span", { className: "text-primary h5", children: [
-      n == null ? void 0 : n.excelFormatTitle,
+}, Ve = ({ 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,
       " "
     ] }),
-    /* @__PURE__ */ t("span", { className: "text-neutrals-800 body-3", children: n == null ? void 0 : n.excelFormatText })
+    /* @__PURE__ */ r("span", { className: "text-neutrals-800 body-3", children: e?.excelFormatText })
   ] }) }) }),
-  /* @__PURE__ */ t("a", { href: e, target: "_blank", children: /* @__PURE__ */ l("span", { className: "flex gap-x-[4px] body-3 cursor-pointer items-center", children: [
-    n == null ? void 0 : n.dataExplorerIcon,
-    n == null ? void 0 : n.dataExplorer
+  /* @__PURE__ */ r("a", { href: t, target: "_blank", children: /* @__PURE__ */ o("span", { className: "flex gap-x-[4px] body-3 cursor-pointer items-center", children: [
+    e?.dataExplorerIcon,
+    e?.dataExplorer
   ] }) })
-] }), g = 1e3, kn = ({
-  limitMessages: n,
-  isDownload: e,
-  showAdvancedViewButton: c,
-  onAdvancedViewClick: r,
-  query: o
-}) => {
-  var a, u;
-  return /* @__PURE__ */ l("div", { className: "bg-accent-300 px-2 py-1 flex justify-between flex-wrap items-center", children: [
-    /* @__PURE__ */ l("div", { className: "flex gap-x-[4px]", children: [
-      /* @__PURE__ */ t("span", { children: n == null ? void 0 : n.warningIcon }),
-      /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ l("div", { className: "flex gap-x-[4px]", children: [
-          /* @__PURE__ */ l("span", { className: "text-primary h5", children: [
-            n == null ? void 0 : n.largeQuery,
-            ":",
-            " "
+] }), ze = ({
+  limitMessages: e,
+  isDownload: t,
+  showAdvancedViewButton: n,
+  onAdvancedViewClick: l,
+  query: s
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: m(
+      "bg-semantic-warning-light px-2 py-1 flex justify-between flex-wrap items-center",
+      e?.containerClassName
+    ),
+    children: [
+      /* @__PURE__ */ o("div", { className: "flex gap-x-2 items-center", children: [
+        /* @__PURE__ */ r("span", { children: e?.warningIcon }),
+        /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ o("div", { className: "flex gap-x-[4px]", children: [
+            /* @__PURE__ */ o(
+              "span",
+              {
+                className: m(
+                  "text-primary h5",
+                  e?.largeQueryClassName
+                ),
+                children: [
+                  e?.largeQuery,
+                  ":",
+                  " "
+                ]
+              }
+            ),
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: m(
+                  "text-neutrals-800 body-3",
+                  e?.limitMessageClassName
+                ),
+                children: t ? e?.downloadMessage?.(M) : e?.showingLimit?.(M)
+              }
+            )
           ] }),
-          /* @__PURE__ */ t("span", { className: "text-neutrals-800 body-3", children: e ? (a = n == null ? void 0 : n.downloadMessage) == null ? void 0 : a.call(n, g) : (u = n == null ? void 0 : n.showingLimit) == null ? void 0 : u.call(n, g) })
-        ] }),
-        e && /* @__PURE__ */ t("span", { className: "text-neutrals-800 body-3", children: n == null ? void 0 : n.fullLimitMessage })
-      ] })
-    ] }),
-    c && /* @__PURE__ */ l(
-      "span",
+          t && /* @__PURE__ */ r(
+            "span",
+            {
+              className: m(
+                "text-neutrals-800 body-3",
+                e?.limitMessageClassName
+              ),
+              children: e?.fullLimitMessage
+            }
+          )
+        ] })
+      ] }),
+      n && /* @__PURE__ */ o(
+        "span",
+        {
+          onClick: () => l?.(),
+          className: "flex gap-x-[4px] h4 cursor-pointer items-center text-primary",
+          children: [
+            e?.editIcon,
+            e?.refineInAdvancedView
+          ]
+        }
+      ),
+      t && /* @__PURE__ */ r("a", { href: s || "", 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({
+  value: e,
+  children: t
+}) {
+  const n = D(() => e ?? {}, [e]);
+  return /* @__PURE__ */ r(q.Provider, { value: n, children: t });
+}
+function Ne() {
+  return G(q);
+}
+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({
+  type: e,
+  icon: t,
+  children: n,
+  className: l,
+  contentClassName: s
+}) {
+  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,
+    a?.classes?.content,
+    s
+  );
+  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
+  ] });
+}
+const Je = ({
+  title: e,
+  copiedTitle: t,
+  tooltip: n,
+  icon: l,
+  copiedIcon: s,
+  className: a,
+  buttonTextClassName: c,
+  onClick: u
+}) => {
+  const [d, h] = A(!1), f = P(null), g = () => {
+    u(), h(!0), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+      h(!1);
+    }, 1e3);
+  };
+  return _(() => () => {
+    f.current && clearTimeout(f.current);
+  }, []), /* @__PURE__ */ o("div", { className: "relative w-fit", children: [
+    /* @__PURE__ */ r(
+      pe,
       {
-        onClick: () => r == null ? void 0 : r(),
-        className: "flex gap-x-[4px] body-3 cursor-pointer items-center",
-        children: [
-          n == null ? void 0 : n.editIcon,
-          n == null ? void 0 : n.refineInAdvancedView
-        ]
+        title: d ? t : e,
+        isSmallButton: !0,
+        disabled: d,
+        buttonClassName: v([
+          "text-button-tertiary small-icon-button !h-6 !p-0",
+          a
+        ]),
+        textClassName: v(["ml-1", c]),
+        onClick: g,
+        iconBefore: d ? s : l
       }
     ),
-    e && /* @__PURE__ */ t("a", { href: o || "", target: "_blank", children: /* @__PURE__ */ l("span", { className: "flex gap-x-[4px] body-3 cursor-pointer items-center", children: [
-      n == null ? void 0 : n.dataExplorerIcon,
-      n == null ? void 0 : n.dataExplorer
-    ] }) })
+    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 })
   ] });
-}, Pn = 24, gn = 24;
-function Yn(n = 719) {
-  const [e, c] = P(
-    () => typeof window < "u" ? window.innerWidth < n : !1
-  );
-  return k(() => {
-    const r = window.matchMedia(`(max-width: ${n}px)`), o = (a) => {
-      c(a.matches);
-    };
-    return c(r.matches), r.addEventListener("change", o), () => r.removeEventListener("change", o);
-  }, [n]), e;
+};
+var Ee = /* @__PURE__ */ ((e) => (e.Enter = "Enter", e))(Ee || {});
+const Q = j(null);
+function Ke({
+  children: e,
+  isAgentAvailable: t
+}) {
+  const n = D(() => ({ isAgentAvailable: t }), [t]);
+  return /* @__PURE__ */ r(Q.Provider, { value: n, children: e });
 }
-function jn(n, e) {
-  const c = j(null);
-  return C(
-    (...o) => {
-      c.current && clearTimeout(c.current), c.current = setTimeout(() => {
-        n(...o);
-      }, e);
-    },
-    [n, e]
-  );
+function et() {
+  const e = G(Q);
+  if (!e)
+    throw new Error(
+      "useAgentAvailability must be used within AgentAvailabilityProvider"
+    );
+  return e;
 }
-var ln = /* @__PURE__ */ ((n) => (n.Enter = "Enter", n))(ln || {});
 export {
-  bn as Alert,
-  E as AlertType,
-  xn as Button,
-  Nn as Calendar,
-  wn as Checkbox,
-  T as CloseButton,
-  yn as CollapsibleBlock,
-  On as DownloadFormatMessage,
-  Ln as Dropdown,
-  vn as HighlightText,
-  En as IconButton,
-  on as Input,
-  Fn as InputWithIcon,
-  ln as KeyboardKey,
-  Sn as Link,
-  q as Loader,
-  O as PopUpSize,
-  R as PopUpState,
-  Cn as Popup,
-  _n as Radio,
-  kn as RequestLimitMessage,
-  g as SERIES_LIMIT,
-  Pn as TREE_NODE_ARROW_SIZE,
-  gn as TREE_NODE_PADDING,
-  Rn as Tag,
-  jn as useDebounce,
-  Yn as useIsMobile
+  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
 };