elseware-ui 2.36.2 → 2.36.5

package/dist/index.mjs

@@ -1,10 +1,9 @@
 import { twMerge } from 'tailwind-merge';
-import React8, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, useRef, Children, useCallback, Fragment as Fragment$1 } from 'react';
+import React2, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, useRef, Children, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { BsStarFill, BsStarHalf, BsStar, BsChevronDown, BsFillDiamondFill } from 'react-icons/bs';
 import { FaSun, FaMoon, FaGripVertical, FaTrash, FaPlus, FaTimes, FaBars, FaCircle, FaEyeSlash, FaEye } from 'react-icons/fa';
 import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line, AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell, ScatterChart, Scatter } from 'recharts';
-import { Transition } from '@headlessui/react';
 import classNames17 from 'classnames';
 import { FaCircleChevronDown } from 'react-icons/fa6';
 import ReactWorldFlags from 'react-world-flags';
@@ -3674,6 +3673,243 @@ function DataViewSort({ options = [], shape }) {
   );
 }
 var DataViewSort_default = DataViewSort;
+function useTransitionVisibility(visibility, leaveDuration = 150) {
+  const [mounted, setMounted] = useState(Boolean(visibility));
+  const [active, setActive] = useState(Boolean(visibility));
+  const isInitialRenderRef = useRef(true);
+  const frameOneRef = useRef(null);
+  const frameTwoRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const clearTimers = () => {
+    if (frameOneRef.current) {
+      cancelAnimationFrame(frameOneRef.current);
+      frameOneRef.current = null;
+    }
+    if (frameTwoRef.current) {
+      cancelAnimationFrame(frameTwoRef.current);
+      frameTwoRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+  useEffect(() => {
+    clearTimers();
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+      return clearTimers;
+    }
+    if (visibility) {
+      setMounted(true);
+      setActive(false);
+      frameOneRef.current = requestAnimationFrame(() => {
+        frameTwoRef.current = requestAnimationFrame(() => {
+          setActive(true);
+        });
+      });
+      return clearTimers;
+    }
+    setActive(false);
+    timeoutRef.current = setTimeout(() => {
+      setMounted(false);
+    }, leaveDuration);
+    return clearTimers;
+  }, [visibility, leaveDuration]);
+  return {
+    mounted,
+    active
+  };
+}
+function renderTransitionChild(children, className) {
+  const childCount = Children.count(children);
+  if (childCount !== 1) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
+  const child = Children.only(children);
+  if (!React2.isValidElement(child)) {
+    return /* @__PURE__ */ jsx("div", { className, children: child });
+  }
+  const element = child;
+  return React2.cloneElement(element, {
+    className: classNames17(element.props.className, className)
+  });
+}
+function TransitionBase({
+  visibility,
+  children,
+  enterClassName,
+  leaveClassName,
+  visibleClassName,
+  hiddenClassName,
+  leaveDuration = 150,
+  unmountOnExit = true
+}) {
+  const { mounted, active } = useTransitionVisibility(
+    Boolean(visibility),
+    leaveDuration
+  );
+  if (!mounted && unmountOnExit) {
+    return null;
+  }
+  const transitionClassName = classNames17(
+    visibility ? enterClassName : leaveClassName,
+    active ? visibleClassName : hiddenClassName
+  );
+  return renderTransitionChild(children, transitionClassName);
+}
+var TransitionBase_default = TransitionBase;
+function TransitionDropdown({
+  visibility,
+  children,
+  leaveDuration = 120
+}) {
+  return /* @__PURE__ */ jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transform-gpu transition-all duration-150 ease-out origin-top-right",
+      leaveClassName: "transform-gpu transition-all duration-120 ease-in origin-top-right",
+      visibleClassName: "scale-100 opacity-100 translate-y-0",
+      hiddenClassName: "scale-95 opacity-0 -translate-y-1",
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionDropdown_default = TransitionDropdown;
+function TransitionFade({
+  visibility,
+  children,
+  leaveDuration = 180
+}) {
+  return /* @__PURE__ */ jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transition-opacity duration-200 ease-out",
+      leaveClassName: "transition-opacity duration-180 ease-in",
+      visibleClassName: "opacity-100",
+      hiddenClassName: "opacity-0",
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionFade_default = TransitionFade;
+function TransitionFadeIn({
+  visibility,
+  children,
+  leaveDuration = 180
+}) {
+  return /* @__PURE__ */ jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transform-gpu transition-all duration-250 ease-out",
+      leaveClassName: "transform-gpu transition-all duration-180 ease-in",
+      visibleClassName: "opacity-100 translate-y-0",
+      hiddenClassName: "opacity-0 translate-y-3",
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionFadeIn_default = TransitionFadeIn;
+function TransitionScale({
+  visibility,
+  children,
+  leaveDuration = 120
+}) {
+  return /* @__PURE__ */ jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transform-gpu transition-all duration-150 ease-out origin-center",
+      leaveClassName: "transform-gpu transition-all duration-120 ease-in origin-center",
+      visibleClassName: "scale-100 opacity-100",
+      hiddenClassName: "scale-95 opacity-0",
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionScale_default = TransitionScale;
+function getHiddenClassName(side) {
+  switch (side) {
+    case "right":
+      return "translate-x-full";
+    case "top":
+      return "-translate-y-full";
+    case "bottom":
+      return "translate-y-full";
+    case "left":
+    default:
+      return "-translate-x-full";
+  }
+}
+function TransitionSlide({
+  visibility,
+  side = "left",
+  children,
+  leaveDuration = 240
+}) {
+  return /* @__PURE__ */ jsx(
+    TransitionBase_default,
+    {
+      visibility: Boolean(visibility),
+      enterClassName: "transform-gpu transition-transform duration-300 ease-out",
+      leaveClassName: "transform-gpu transition-transform duration-240 ease-in",
+      visibleClassName: "translate-x-0 translate-y-0",
+      hiddenClassName: getHiddenClassName(side),
+      leaveDuration,
+      children
+    }
+  );
+}
+var TransitionSlide_default = TransitionSlide;
+function TransitionAccordion({
+  visibility,
+  children,
+  enterDuration = 220,
+  leaveDuration = 180
+}) {
+  const { mounted, active } = useTransitionVisibility(
+    Boolean(visibility),
+    leaveDuration
+  );
+  if (!mounted) {
+    return null;
+  }
+  const duration = visibility ? enterDuration : leaveDuration;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateRows: active ? "1fr" : "0fr",
+        opacity: active ? 1 : 0,
+        transitionProperty: "grid-template-rows, opacity",
+        transitionDuration: `${duration}ms`,
+        transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+        willChange: "grid-template-rows, opacity"
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-hidden", children })
+    }
+  );
+}
+var TransitionAccordion_default = TransitionAccordion;
+
+// src/components/feedback/transition/index.tsx
+var Transition = {
+  TransitionBase: TransitionBase_default,
+  TransitionDropdown: TransitionDropdown_default,
+  TransitionFade: TransitionFade_default,
+  TransitionFadeIn: TransitionFadeIn_default,
+  TransitionScale: TransitionScale_default,
+  TransitionSlide: TransitionSlide_default,
+  TransitionAccordion: TransitionAccordion_default
+};
 function Accordion({
   summary = "Accordion",
   children,
@@ -3688,13 +3924,15 @@ function Accordion({
     setCollapse((prev) => !prev);
   };
   return /* @__PURE__ */ jsxs("div", { className: "border border-eui-dark-400/80 text-gray-500", children: [
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames17({
-          "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs": true,
-          "hover:cursor-pointer": toggleOnSummaryClick
-        }),
+        className: classNames17(
+          "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
+          {
+            "hover:cursor-pointer": toggleOnSummaryClick
+          }
+        ),
         onClick: toggleOnSummaryClick ? handleToggle : void 0,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "inline-flex gap-3 items-center w-full", children: [
@@ -3702,17 +3940,17 @@ function Accordion({
             /* @__PURE__ */ jsx("div", { className: "eui-text-md w-full", children: summary })
           ] }),
           /* @__PURE__ */ jsx(
-            "div",
+            "button",
             {
+              type: "button",
               onClick: toggleOnSummaryClick ? void 0 : handleToggle,
               className: "hover:cursor-pointer",
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames17(
-                    "text-xl transition-transform duration-300",
-                    { "rotate-180": collapse }
-                  )
+                  className: classNames17("text-xl transition-transform duration-300", {
+                    "rotate-180": collapse
+                  })
                 }
               )
             }
@@ -3720,30 +3958,19 @@ function Accordion({
           rhsActions && /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: rhsActions })
         ]
       }
-    ) }),
-    /* @__PURE__ */ jsx(
-      Transition,
+    ),
+    /* @__PURE__ */ jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        show: collapse,
-        enter: "transition duration-100 ease-out",
-        enterFrom: "transform scale-95 opacity-0",
-        enterTo: "transform scale-100 opacity-100",
-        leave: "transition duration-75 ease-out",
-        leaveFrom: "transform scale-100 opacity-100",
-        leaveTo: "transform scale-95 opacity-0",
-        as: Fragment$1,
-        children: /* @__PURE__ */ jsx(
-          "div",
+        className: classNames17(
+          "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
-            className: classNames17({
-              "border-t border-t-eui-dark-400/40 eui-text-sm": true,
-              "p-5": enableChildrenPadding
-            }),
-            children
+            "p-5": enableChildrenPadding
           }
-        )
+        ),
+        children
       }
-    )
+    ) })
   ] });
 }
 var Accordion_default = Accordion;
@@ -4940,7 +5167,7 @@ var ListItem = ({
             children: bullet
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React8.cloneElement(
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React2.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -4974,7 +5201,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React8.isValidElement(item)) {
+  if (React2.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -6458,106 +6685,6 @@ function sendToast(data = {}) {
     status: data.status || "success" /* success */
   });
 }
-function renderTransitionChild(children, className) {
-  const childCount = Children.count(children);
-  if (childCount !== 1) {
-    return /* @__PURE__ */ jsx("div", { className, children });
-  }
-  const child = Children.only(children);
-  if (!React8.isValidElement(child)) {
-    return /* @__PURE__ */ jsx("div", { className, children: child });
-  }
-  const element = child;
-  return React8.cloneElement(element, {
-    className: classNames17(element.props.className, className)
-  });
-}
-function TransitionBase({
-  visibility,
-  children,
-  enterClassName,
-  leaveClassName,
-  visibleClassName,
-  hiddenClassName,
-  leaveDuration = 150
-}) {
-  const [mounted, setMounted] = useState(Boolean(visibility));
-  const [active, setActive] = useState(Boolean(visibility));
-  const frameRef = useRef(null);
-  const timeoutRef = useRef(null);
-  useEffect(() => {
-    if (frameRef.current) {
-      cancelAnimationFrame(frameRef.current);
-    }
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    if (visibility) {
-      setMounted(true);
-      frameRef.current = requestAnimationFrame(() => {
-        setActive(true);
-      });
-      return;
-    }
-    setActive(false);
-    timeoutRef.current = setTimeout(() => {
-      setMounted(false);
-    }, leaveDuration);
-    return () => {
-      if (frameRef.current) {
-        cancelAnimationFrame(frameRef.current);
-      }
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, [visibility, leaveDuration]);
-  if (!mounted) {
-    return null;
-  }
-  const transitionClassName = classNames17(
-    visibility ? enterClassName : leaveClassName,
-    active ? visibleClassName : hiddenClassName
-  );
-  return renderTransitionChild(children, transitionClassName);
-}
-var TransitionBase_default = TransitionBase;
-function TransitionDropdown({ visibility, children }) {
-  return /* @__PURE__ */ jsx(
-    TransitionBase_default,
-    {
-      visibility: Boolean(visibility),
-      enterClassName: "transition duration-100 ease-out",
-      leaveClassName: "transition duration-50 ease-out",
-      visibleClassName: "transform scale-100 opacity-100",
-      hiddenClassName: "transform scale-95 opacity-0",
-      leaveDuration: 50,
-      children
-    }
-  );
-}
-var TransitionDropdown_default = TransitionDropdown;
-function TransitionFadeIn({ visibility, children }) {
-  return /* @__PURE__ */ jsx(
-    TransitionBase_default,
-    {
-      visibility: Boolean(visibility),
-      enterClassName: "transition-all ease-in-out duration-700 delay-[0ms]",
-      leaveClassName: "transition-all ease-in-out duration-300",
-      visibleClassName: "opacity-100 translate-y-0",
-      hiddenClassName: "opacity-0 translate-y-6",
-      leaveDuration: 300,
-      children
-    }
-  );
-}
-var TransitionFadeIn_default = TransitionFadeIn;
-
-// src/components/feedback/transition/index.tsx
-var Transition2 = {
-  TransitionDropdown: TransitionDropdown_default,
-  TransitionFadeIn: TransitionFadeIn_default
-};
 var sizes3 = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-2 text-sm",
@@ -6572,7 +6699,7 @@ function FormResponse({
   size = "md",
   styles
 }) {
-  return /* @__PURE__ */ jsx(Transition2.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: classNames17({
@@ -18237,7 +18364,7 @@ function InputResponse({
   variant = "default",
   styles
 }) {
-  return /* @__PURE__ */ jsx(Transition2.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: classNames17({
@@ -20000,7 +20127,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React2.Fragment, { children: [
         /* @__PURE__ */ jsx(
           BreadcrumbItem_default,
           {
@@ -20040,63 +20167,41 @@ var Drawer = ({
   visibility,
   side = "left",
   handleClose,
-  styles
+  styles,
+  showBackdrop = true,
+  closeOnBackdropClick = true
 }) => {
   const isHorizontal = side === "left" || side === "right";
   const isMobile = useIsMobile_default();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMobile && visibility && /* @__PURE__ */ jsx(
+    isMobile && showBackdrop && /* @__PURE__ */ jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: "fixed inset-0 bg-black bg-opacity-50 z-40",
-        onClick: handleClose
+        className: "fixed inset-0 bg-black/50 z-40",
+        onClick: closeOnBackdropClick ? handleClose : void 0
       }
-    ),
-    /* @__PURE__ */ jsx(
-      Transition,
+    ) }),
+    /* @__PURE__ */ jsx(TransitionSlide_default, { visibility, side, leaveDuration: 200, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        show: visibility,
-        enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames17({
-          "-translate-x-full": side === "left",
-          "translate-x-full": side === "right",
-          "-translate-y-full": side === "top",
-          "translate-y-full": side === "bottom"
-        }),
-        enterTo: "translate-x-0 translate-y-0",
-        leave: "transform transition duration-200 ease-in",
-        leaveFrom: "translate-x-0 translate-y-0",
-        leaveTo: classNames17({
-          "-translate-x-full": side === "left",
-          "translate-x-full": side === "right",
-          "-translate-y-full": side === "top",
-          "translate-y-full": side === "bottom"
-        }),
-        children: /* @__PURE__ */ jsx(
-          "div",
+        className: classNames17(
+          "fixed shadow-lg z-50",
           {
-            className: classNames17(
-              "fixed shadow-lg z-50",
-              {
-                "h-full w-[300px]": isHorizontal,
-                "w-full h-[300px]": !isHorizontal
-              },
-              {
-                "left-0": side === "left",
-                // add top-0 to align it to top
-                "right-0": side === "right",
-                // add top-0 to align it to top
-                "top-0 left-0": side === "top",
-                "bottom-0 left-0": side === "bottom"
-              },
-              { "eui-bg-md": !styles },
-              { [`${styles}`]: styles }
-            ),
-            children
-          }
-        )
+            "h-full w-[300px] top-0": isHorizontal,
+            "w-full h-[300px] left-0": !isHorizontal,
+            "left-0": side === "left",
+            "right-0": side === "right",
+            "top-0": side === "top",
+            "bottom-0": side === "bottom"
+          },
+          {
+            "eui-bg-md": !styles
+          },
+          styles
+        ),
+        children
       }
-    )
+    ) })
   ] });
 };
 function DrawerToggler({
@@ -20930,16 +21035,21 @@ function RouteTabs({
   ] });
 }
 var RouteTabs_default = RouteTabs;
+function UnderConstructionBanner({
+  text
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "my-5", children: /* @__PURE__ */ jsx(Info_default, { children: text ? text : "This component is currently under construction and will be made available soon" }) });
+}
 var getDefaultErrorMessage = (error) => {
   if (!error) return "Something went wrong.";
   if (typeof error === "string") return error;
   if (error instanceof Error) return error.message;
   if (typeof error === "object") {
     const anyErr = error;
-    if (anyErr?.data?.message && typeof anyErr.data.message === "string") {
+    if (typeof anyErr?.data?.message === "string") {
       return anyErr.data.message;
     }
-    if (anyErr?.message && typeof anyErr.message === "string") {
+    if (typeof anyErr?.message === "string") {
       return anyErr.message;
     }
     if (anyErr?.status) {
@@ -20955,20 +21065,107 @@ var getDefaultErrorMessage = (error) => {
 };
 function AsyncComponentWrapper({
   children,
-  isLoading,
-  isSuccess = true,
-  isError,
+  isLoading = false,
+  isFetching = false,
+  isSuccess,
+  isError = false,
+  isUninitialized = false,
   error,
-  errorFormatter
+  isEmpty = false,
+  loadingText = "Loading...",
+  fetchingText = "Updating...",
+  emptyText = "No data available.",
+  loadingType = "spinner",
+  skeletonCount = 3,
+  skeletonClassName = "h-24 w-full rounded-md",
+  spinnerProps,
+  fetchingSpinnerProps,
+  loadingFallback,
+  emptyFallback,
+  errorFallback,
+  showFetchingIndicator = true,
+  onRetry,
+  errorFormatter,
+  className,
+  contentClassName
 }) {
-  const errorMessage = isError && error ? errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error) : void 0;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    isLoading && /* @__PURE__ */ jsx("div", { className: "flex w-full py-10 items-center justify-center", children: /* @__PURE__ */ jsx(AiOutlineLoading, { className: "animate-spin" }) }),
-    isError && errorMessage && /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(FormResponse_default, { text: errorMessage, variant: "danger" }) }),
-    !isLoading && !isError && isSuccess && /* @__PURE__ */ jsx("div", { children })
+  const errorMessage = useMemo(() => {
+    if (!isError) return "";
+    return errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error);
+  }, [isError, error, errorFormatter]);
+  const hasSuccess = isSuccess ?? (!isLoading && !isError && !isUninitialized);
+  const renderLoading = () => {
+    if (loadingFallback) return loadingFallback;
+    if (loadingType === "skeleton") {
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 py-4", children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: skeletonClassName }, index)) });
+    }
+    return /* @__PURE__ */ jsx(
+      Spinner_default,
+      {
+        centered: true,
+        label: loadingText,
+        type: "border",
+        size: "md",
+        variant: "primary",
+        ...spinnerProps
+      }
+    );
+  };
+  const renderError = () => {
+    if (typeof errorFallback === "function") {
+      return errorFallback(errorMessage);
+    }
+    if (errorFallback) {
+      return errorFallback;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+      /* @__PURE__ */ jsx(FormResponse_default, { text: errorMessage, variant: "danger" }),
+      onRetry && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRetry,
+          className: "mt-3 rounded-md border px-4 py-2",
+          children: "Retry"
+        }
+      )
+    ] });
+  };
+  const renderEmpty = () => {
+    if (emptyFallback) return emptyFallback;
+    return /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-gray-500", children: emptyText });
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, "aria-live": "polite", children: renderLoading() });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx("div", { className, "aria-live": "polite", children: renderError() });
+  }
+  if (hasSuccess && isEmpty) {
+    return /* @__PURE__ */ jsx("div", { className, "aria-live": "polite", children: renderEmpty() });
+  }
+  if (!hasSuccess) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-gray-500", children: [
+      /* @__PURE__ */ jsx(
+        Spinner_default,
+        {
+          size: "xs",
+          type: "border",
+          variant: "primary",
+          showLabel: false,
+          ariaLabel: fetchingText,
+          ...fetchingSpinnerProps
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: fetchingText })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children })
   ] });
 }
-var AsyncComponentWrapper_default = AsyncComponentWrapper;
+var AsyncComponentWrapper_default = React2.memo(AsyncComponentWrapper);
 function Modal({
   title,
   show = false,
@@ -20989,63 +21186,46 @@ function Modal({
     modalRef,
     enableCloseOnClickOutside ? handleOnClose : void 0
   );
-  return /* @__PURE__ */ jsx(
-    Transition,
+  return /* @__PURE__ */ jsx(TransitionFade_default, { visibility: show, leaveDuration: 100, children: /* @__PURE__ */ jsx("div", { className: "bg-eui-dark-900/90 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(TransitionScale_default, { visibility: show, leaveDuration: 100, children: /* @__PURE__ */ jsxs(
+    "div",
     {
-      show,
-      enter: "transition duration-100 ease-out",
-      enterFrom: "transform scale-95 opacity-0",
-      enterTo: "transform scale-100 opacity-100",
-      leave: "transition duration-100 ease-out",
-      leaveFrom: "transform scale-200 opacity-100",
-      leaveTo: "transform scale-95 opacity-0",
-      as: Fragment$1,
-      children: /* @__PURE__ */ jsx("div", { className: "bg-eui-dark-900/90 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: modalRef,
-          className: classNames17({
-            "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit": true,
-            [`${shapes[resolvedShape]}`]: true,
-            [`${styles}`]: styles
-          }),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "eui-gradient-to-r-sm inline-flex items-center border-b w-full border-eui-dark-500/80", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-full text-center text-md font-semibold", children: title }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: classNames17({
-                    "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast": true,
-                    "hover:cursor-pointer hover:bg-eui-dark-500": true
-                  }),
-                  onClick: handleOnClose,
-                  children: "X"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              AsyncComponentWrapper_default,
-              {
-                isLoading,
-                isSuccess,
-                isError,
-                error,
-                children: /* @__PURE__ */ jsx("div", { className: "p-5 w-full", children })
-              }
-            )
-          ]
-        }
-      ) })
+      ref: modalRef,
+      className: classNames17(
+        "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
+        shapes[resolvedShape],
+        styles
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "eui-gradient-to-r-sm inline-flex items-center border-b w-full border-eui-dark-500/80", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-full text-center text-md font-semibold", children: title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: classNames17(
+                "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
+                "hover:cursor-pointer hover:bg-eui-dark-500"
+              ),
+              onClick: handleOnClose,
+              children: "X"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          AsyncComponentWrapper_default,
+          {
+            isLoading,
+            isSuccess,
+            isError,
+            error,
+            children: /* @__PURE__ */ jsx("div", { className: "p-5 w-full", children })
+          }
+        )
+      ]
     }
-  );
+  ) }) }) });
 }
 var Modal_default = Modal;
-function UnderConstructionBanner({
-  text
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "my-5", children: /* @__PURE__ */ jsx(Info_default, { children: text ? text : "This component is currently under construction and will be made available soon" }) });
-}
 var GlowWrapper = ({
   children,
   glowSize = 200,
@@ -21557,7 +21737,7 @@ function CommentMenu({
         children: /* @__PURE__ */ jsx(BiDotsVerticalRounded, { size: 18 })
       }
     ),
-    /* @__PURE__ */ jsx(Transition2.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsx(Menu, { items }) }) })
+    /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsx(Menu, { items }) }) })
   ] });
 }
 var CommentMenu_default = CommentMenu;
@@ -22781,6 +22961,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, AreaPlot, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarPlot, BaseChartDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, CHART_COLOR_PALETTE, CHART_DARK_THEME, CHART_DATA_MODES, CHART_DEFAULT_ACTIVE_DOT_RADIUS, CHART_DEFAULT_ANIMATION_DURATION, CHART_DEFAULT_BAR_RADIUS, CHART_DEFAULT_DOT_RADIUS, CHART_DEFAULT_HEIGHT, CHART_DEFAULT_MARGIN, CHART_DEFAULT_MAX_REALTIME_POINTS, CHART_DEFAULT_POLLING_INTERVAL, CHART_DEFAULT_STROKE_WIDTH, CHART_EMPTY_MESSAGE, CHART_ERROR_MESSAGE, CHART_LIGHT_THEME, CHART_LOADING_MESSAGE, CHART_STATUSES, CHART_STATUS_COLORS, CHART_VALUE_FORMATS, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Chart, ChartContainer, ChartContext, ChartEmptyState, ChartErrorState, ChartHeader, ChartLegend, ChartLoadingState, ChartPanel, ChartProvider, ChartToolbar, ChartTooltip, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, DEFAULT_CHART_THEME, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, EnvErrorScreen_default as EnvErrorScreen, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LinePlot, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RealtimeChartDataSource, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterPlot, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, Spinner_default as Spinner, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip6 as Tooltip, TopNav, Transition2 as Transition, TransitionDropdown_default as TransitionDropdown, TransitionFadeIn_default as TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, addReplyToCache, applyReactionState, assertAbsoluteURL, buildURL, chartReducer, cn, createConfigurator, createForceLayout, createGridLayout, createInitialChartState, createTreeLayout, createURLResolver, decrementReplyCount, enumValues, euiToast, formatChartValue, formatCommentDate, formatConfigError, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getCurrencySymbol, getLayout, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, incrementReplyCount, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, parseJson, parseJsonRecord, parseUrlMap, registerLayout, removeComment, removeCommentTreeFromCache, replaceRealtimePoints, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, sendToast, toConfiguratorError, updateComment, updateReplyCacheComment, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
+export { Accordion_default as Accordion, AreaPlot, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarPlot, BaseChartDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, CHART_COLOR_PALETTE, CHART_DARK_THEME, CHART_DATA_MODES, CHART_DEFAULT_ACTIVE_DOT_RADIUS, CHART_DEFAULT_ANIMATION_DURATION, CHART_DEFAULT_BAR_RADIUS, CHART_DEFAULT_DOT_RADIUS, CHART_DEFAULT_HEIGHT, CHART_DEFAULT_MARGIN, CHART_DEFAULT_MAX_REALTIME_POINTS, CHART_DEFAULT_POLLING_INTERVAL, CHART_DEFAULT_STROKE_WIDTH, CHART_EMPTY_MESSAGE, CHART_ERROR_MESSAGE, CHART_LIGHT_THEME, CHART_LOADING_MESSAGE, CHART_STATUSES, CHART_STATUS_COLORS, CHART_VALUE_FORMATS, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Chart, ChartContainer, ChartContext, ChartEmptyState, ChartErrorState, ChartHeader, ChartLegend, ChartLoadingState, ChartPanel, ChartProvider, ChartToolbar, ChartTooltip, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, DEFAULT_CHART_THEME, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, EnvErrorScreen_default as EnvErrorScreen, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LinePlot, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RealtimeChartDataSource, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterPlot, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, Spinner_default as Spinner, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip6 as Tooltip, TopNav, Transition, TransitionAccordion_default as TransitionAccordion, TransitionBase_default as TransitionBase, TransitionDropdown_default as TransitionDropdown, TransitionFade_default as TransitionFade, TransitionFadeIn_default as TransitionFadeIn, TransitionScale_default as TransitionScale, TransitionSlide_default as TransitionSlide, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, addReplyToCache, applyReactionState, assertAbsoluteURL, buildURL, chartReducer, cn, createConfigurator, createForceLayout, createGridLayout, createInitialChartState, createTreeLayout, createURLResolver, decrementReplyCount, enumValues, euiToast, formatChartValue, formatCommentDate, formatConfigError, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getCurrencySymbol, getLayout, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, incrementReplyCount, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, parseJson, parseJsonRecord, parseUrlMap, registerLayout, removeComment, removeCommentTreeFromCache, replaceRealtimePoints, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, sendToast, toConfiguratorError, updateComment, updateReplyCacheComment, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map