@epam/statgpt-ui-components 0.2.0-rc.2 → 0.2.0-rc.21

package/index.mjs

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