elseware-ui 2.36.1 → 2.36.2

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { twMerge } from 'tailwind-merge';
-import React4, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, Fragment as Fragment$1, useCallback, useRef } from 'react';
+import React8, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, useRef, Children, useCallback, Fragment as Fragment$1 } 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 classNames16 from 'classnames';
+import classNames17 from 'classnames';
 import { FaCircleChevronDown } from 'react-icons/fa6';
 import ReactWorldFlags from 'react-world-flags';
 import emojiFlags from 'emoji-flags';
@@ -3691,7 +3691,7 @@ function Accordion({
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames16({
+        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
         }),
@@ -3709,7 +3709,7 @@ function Accordion({
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames16(
+                  className: classNames17(
                     "text-xl transition-transform duration-300",
                     { "rotate-180": collapse }
                   )
@@ -3735,7 +3735,7 @@ function Accordion({
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames16({
+            className: classNames17({
               "border-t border-t-eui-dark-400/40 eui-text-sm": true,
               "p-5": enableChildrenPadding
             }),
@@ -3819,7 +3819,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames16(
+      className: classNames17(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -3835,14 +3835,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames16("p-6 text-gray-300 text-sm", className), children });
+  return /* @__PURE__ */ jsx("div", { className: classNames17("p-6 text-gray-300 text-sm", className), children });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16(
+      className: classNames17(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -3884,7 +3884,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16("absolute inset-0"),
+      className: classNames17("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -4030,7 +4030,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxs("div", { className: classNames16("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames17("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -4940,7 +4940,7 @@ var ListItem = ({
             children: bullet
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React4.cloneElement(
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React8.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -4974,7 +4974,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React4.isValidElement(item)) {
+  if (React8.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -5434,7 +5434,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "bg-black/75 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden": true,
         [`${styles}`]: styles
       }),
@@ -5958,7 +5958,7 @@ var Form = ({
         /* @__PURE__ */ jsx(UnsavedChangesGuard_default, { formik, enabled: warnOnUnsavedChanges }),
         /* @__PURE__ */ jsx(DirtyObserver_default, { formik, onDirtyChange }),
         /* @__PURE__ */ jsx(FormObserver_default, { formik, onChange }),
-        /* @__PURE__ */ jsx("div", { className: classNames16(styles), children })
+        /* @__PURE__ */ jsx("div", { className: classNames17(styles), children })
       ] })
     }
   );
@@ -6458,18 +6458,80 @@ 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(
-    Transition,
+    TransitionBase_default,
     {
-      as: Fragment$1,
-      show: visibility,
-      enter: "transition duration-100 ease-out",
-      enterFrom: "transform scale-95 opacity-0",
-      enterTo: "transform scale-100 opacity-100",
-      leave: "transition duration-50 ease-out",
-      leaveFrom: "transform scale-100 opacity-100",
-      leaveTo: "transform scale-95 opacity-0",
+      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
     }
   );
@@ -6477,16 +6539,14 @@ function TransitionDropdown({ visibility, children }) {
 var TransitionDropdown_default = TransitionDropdown;
 function TransitionFadeIn({ visibility, children }) {
   return /* @__PURE__ */ jsx(
-    Transition,
+    TransitionBase_default,
     {
-      as: Fragment$1,
-      show: visibility,
-      enter: `transition-all ease-in-out duration-700 dalay-[0ms]`,
-      enterFrom: "opacity-0 translate-y-6",
-      enterTo: "opacity-100 translate-y-0",
-      leave: "transition-all ease-in-out duration-300",
-      leaveFrom: "opacity-100",
-      leaveTo: "opacity-0",
+      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
     }
   );
@@ -6494,7 +6554,7 @@ function TransitionFadeIn({ visibility, children }) {
 var TransitionFadeIn_default = TransitionFadeIn;
 
 // src/components/feedback/transition/index.tsx
-var Transition4 = {
+var Transition2 = {
   TransitionDropdown: TransitionDropdown_default,
   TransitionFadeIn: TransitionFadeIn_default
 };
@@ -6512,10 +6572,10 @@ function FormResponse({
   size = "md",
   styles
 }) {
-  return /* @__PURE__ */ jsx(Transition4.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Transition2.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
@@ -6632,7 +6692,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames16(
+            className: classNames17(
               "w-6 h-6 bg-white dark:bg-gray-600 rounded-full shadow-md transition-transform duration-300",
               theme === "dark" ? "translate-x-8" : "translate-x-0"
             )
@@ -18173,14 +18233,14 @@ function Button({
 var Button_default = Button;
 function InputResponse({
   name,
-  visibility,
+  visibility = false,
   variant = "default",
   styles
 }) {
-  return /* @__PURE__ */ jsx(Transition4.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Transition2.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -18195,7 +18255,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsx(
     "label",
     {
-      className: classNames16({
+      className: classNames17({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -18247,7 +18307,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames16({
+        className: classNames17({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]": true,
           "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
           "border-eui-danger-500": meta.touched && meta.error,
@@ -18292,7 +18352,7 @@ var InputFile = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames16(
+        className: classNames17(
           "border rounded-sm bg-eui-primary-300/10 px-3 pt-3 text-md text-eui-dark-100 cursor-pointer h-[50px] flex items-center",
           {
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -18318,7 +18378,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames16({
+        styles: classNames17({
           "absolute left-2 eui-text-sm peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none": true,
           "top-[0.7px]": showFloatingLabel,
           "top-[13px] text-base": !showFloatingLabel
@@ -18371,7 +18431,7 @@ var InputList = ({ name, placeholder, shape }) => {
     /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(FieldArray, { name, children: ({ push, remove, move }) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames16(
+        className: classNames17(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -18400,7 +18460,7 @@ var InputList = ({ name, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames16(
+                          className: classNames17(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -18411,7 +18471,7 @@ var InputList = ({ name, placeholder, shape }) => {
                               {
                                 name: `${name}[${index}]`,
                                 placeholder: `Item ${index + 1}`,
-                                className: classNames16(
+                                className: classNames17(
                                   "peer h-[50px] w-full border bg-eui-primary-300/10 px-3 pb-2 pt-5 text-md placeholder-transparent placeholder-shown:p-3 focus:outline-none eui-text-md",
                                   shapes[resolvedShape],
                                   hasItemError ? "border-eui-danger-500" : "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -18507,7 +18567,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames16(
+            className: classNames17(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -18519,7 +18579,7 @@ var InputListGroup = ({
                   {
                     name: `${name}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames16(
+                    className: classNames17(
                       "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                       shapes[resolvedShape],
                       "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -18550,7 +18610,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames16(
+                      className: classNames17(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -18570,7 +18630,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames16(
+                                  className: classNames17(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -18581,7 +18641,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames16(
+                                        className: classNames17(
                                           "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                                           shapes[resolvedShape],
                                           "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -18795,7 +18855,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames16({
+        className: classNames17({
           "border border-eui-primary-400 peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-danger-500": meta.touched && meta.error,
           "transition-all ease-in-out": true,
@@ -18904,7 +18964,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsxs(
             "label",
             {
-              className: classNames16({
+              className: classNames17({
                 "border-2 border-dashed border-gray-700 bg-gray-900 h-[200px] w-[300px] flex flex-col gap-2 items-center justify-center group": true,
                 "hover:cursor-pointer hover:border-solid hover:border-gray-600 hover:bg-gray-900/80": true,
                 "transition-all ease-in-out duration-150": true
@@ -19021,7 +19081,7 @@ function Radio({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames16({
+            className: classNames17({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -19034,7 +19094,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames16({
+                  className: classNames17({
                     "appearance-none w-4 h-4 border-2 border-eui-primary-400 rounded-full cursor-pointer transition-all duration-300": true,
                     // base radio button styles
                     "checked:bg-eui-secondary-700 checked:border-eui-primary-400": field2.value === option.value
@@ -19046,7 +19106,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames16({
+                  className: classNames17({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -19089,7 +19149,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -19102,7 +19162,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames16({
+            className: classNames17({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -19146,7 +19206,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames16({
+        className: classNames17({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-primary-400": !(meta.touched && meta.error),
           "border-red-500": meta.touched && meta.error,
@@ -19198,7 +19258,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames16(
+            className: classNames17(
               "w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-eui-dark-100",
               "peer-checked:after:translate-x-full peer-checked:after:border-white",
               "after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white",
@@ -19255,7 +19315,7 @@ function Tags({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames16(
+          className: classNames17(
             "border rounded-sm flex flex-wrap items-center gap-2 px-2 pt-2 pb-6 min-h-[3rem]",
             {
               "bg-eui-primary-300/10 eui-text-md": true,
@@ -19303,7 +19363,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames16(
+          styles: classNames17(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             input.length > 0 || field.value.length > 0 ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -19344,7 +19404,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames16({
+          className: classNames17({
             "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 resize-none focus:resize-none focus:outline-none": true,
             "transition-all ease-in-out": true,
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -19358,7 +19418,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames16(
+          styles: classNames17(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -19389,7 +19449,7 @@ function ContentArea({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "min-h-screen h-full w-full py-3 px-5": true,
         "py-3 px-5": !enablePadding,
         "py-3 px-5 lg:px-[150px]": enablePadding,
@@ -19405,7 +19465,7 @@ function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -19418,7 +19478,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -19437,7 +19497,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -19454,7 +19514,7 @@ var Layout = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -19473,7 +19533,7 @@ var Header = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -19513,7 +19573,7 @@ var Content = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "w-full min-h-screen transition-all duration-200 eui-bg-sm": true,
         "md:pl-[300px]": !overlayedSidebar && sidebarVisible && !isMobile,
         // Shift when sidebar is open (desktop)
@@ -19529,7 +19589,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "bottom-0 w-full h-fit": true,
         "border-t border-eui-dark-500/40 dark:border-eui-secondary-800 eui-bg-md": !styles,
         [`${styles}`]: styles
@@ -19617,7 +19677,7 @@ function MarkdownEditor({
   const [field, meta, helpers] = useField(props);
   const { theme } = useTheme_default();
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx("div", { className: classNames16(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: classNames17(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsx(
       MDXEditor,
       {
         markdown: field.value,
@@ -19720,7 +19780,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
       "button",
       {
         onClick: () => scrollToHeading(heading.id),
-        className: classNames16(
+        className: classNames17(
           "block w-full text-left text-sm transition-all ease-in-out duration-150",
           "hover:text-primary",
           activeHeading === heading.id ? "text-primary font-semibold underline" : "text-gray-500 dark:text-gray-400"
@@ -19876,7 +19936,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames16({
+      className: classNames17({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -19940,7 +20000,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
         /* @__PURE__ */ jsx(
           BreadcrumbItem_default,
           {
@@ -19953,7 +20013,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classNames16({
+            className: classNames17({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -19967,7 +20027,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -19997,7 +20057,7 @@ var Drawer = ({
       {
         show: visibility,
         enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames16({
+        enterFrom: classNames17({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -20006,7 +20066,7 @@ var Drawer = ({
         enterTo: "translate-x-0 translate-y-0",
         leave: "transform transition duration-200 ease-in",
         leaveFrom: "translate-x-0 translate-y-0",
-        leaveTo: classNames16({
+        leaveTo: classNames17({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -20015,7 +20075,7 @@ var Drawer = ({
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames16(
+            className: classNames17(
               "fixed shadow-lg z-50",
               {
                 "h-full w-[300px]": isHorizontal,
@@ -20047,7 +20107,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -20095,7 +20155,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames16({
+        className: classNames17({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -20108,7 +20168,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20149,7 +20209,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames16({
+        className: classNames17({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -20194,7 +20254,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames16({
+      className: classNames17({
         "flex flex-row items-center gap-3 cursor-pointer p-1 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "text-sm eui-text-sm": !styles,
@@ -20223,7 +20283,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -20276,7 +20336,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20338,7 +20398,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames16({
+        className: classNames17({
           "flex flex-row gap-2 items-center justify-between cursor-pointer p-3 w-full": true,
           "transition-all duration-300 ease-in-out": true,
           "eui-text-md bg-gradient-to-t from-eui-dark-500/10 dark:from-green-700/10": !styles,
@@ -20366,7 +20426,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsx(
             BsChevronDown,
             {
-              className: classNames16({
+              className: classNames17({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -20379,7 +20439,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames16({
+        className: classNames17({
           "absolute min-w-80 left-0 top-full mt-1 border border-eui-dark-300/10 dark:border-eui-dark-300/50 shadow-lg eui-shadow-lg z-50 w-full eui-bg-md": true,
           "transition-all duration-300 ease-in-out": true
         }),
@@ -20409,7 +20469,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames16({
+      className: classNames17({
         "flex flex-row items-center gap-3 cursor-pointer p-3 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "eui-text-md border-b border-eui-dark-500/20 dark:border-eui-secondary-900/20 bg-gradient-to-r from-eui-dark-500/10 dark:from-eui-secondary-900/10": !styles,
@@ -20438,7 +20498,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -20478,7 +20538,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames16({
+      className: classNames17({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -20944,7 +21004,7 @@ function Modal({
         "div",
         {
           ref: modalRef,
-          className: classNames16({
+          className: classNames17({
             "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit": true,
             [`${shapes[resolvedShape]}`]: true,
             [`${styles}`]: styles
@@ -20955,7 +21015,7 @@ function Modal({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: classNames16({
+                  className: classNames17({
                     "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast": true,
                     "hover:cursor-pointer hover:bg-eui-dark-500": true
                   }),
@@ -21096,7 +21156,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames16({
+          className: classNames17({
             "text-blue-300  px-1 pb-1 mt-1": true,
             "bg-slate-900/70": !showMore,
             "bg-gradient-to-t from-slate-900/50 to-transparent": showMore
@@ -21497,7 +21557,7 @@ function CommentMenu({
         children: /* @__PURE__ */ jsx(BiDotsVerticalRounded, { size: 18 })
       }
     ),
-    /* @__PURE__ */ jsx(Transition4.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(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 }) }) })
   ] });
 }
 var CommentMenu_default = CommentMenu;
@@ -22253,7 +22313,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames16(
+      className: classNames17(
         "w-full min-w-[80px] flex flex-col items-center justify-center py-3 text-center",
         "hover:text-secondary-700 hover:bg-gray-300/10 hover:cursor-pointer",
         selected ? "text-eui-secondary-700 bg-gray-300/10" : "text-gray-400",
@@ -22613,7 +22673,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         [`${styles}`]: styles
       }),
       children
@@ -22662,7 +22722,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames16({
+      className: classNames17({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -22721,6 +22781,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, Transition4 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, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map