elseware-ui 2.29.2 → 2.30.0

package/dist/index.mjs

@@ -6,12 +6,12 @@ import { Bar, Line, Pie } from 'react-chartjs-2';
 import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, LineElement, PointElement, ArcElement } from 'chart.js';
 import React4, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useContext, Fragment as Fragment$1, useRef, useCallback } from 'react';
 import { Transition } from '@headlessui/react';
-import classNames24 from 'classnames';
+import classNames17 from 'classnames';
 import { FaCircleChevronDown } from 'react-icons/fa6';
 import ReactWorldFlags from 'react-world-flags';
 import emojiFlags from 'emoji-flags';
 import * as d3 from 'd3';
-import { Image, CloudinaryContext } from 'cloudinary-react';
+import { Image, CloudinaryContext as CloudinaryContext$1 } from 'cloudinary-react';
 import { useField, ErrorMessage, Formik, Form as Form$1, Field, useFormikContext, FieldArray } from 'formik';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -739,7 +739,7 @@ function Accordion({
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames24({
+        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
         }),
@@ -757,7 +757,7 @@ function Accordion({
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames24(
+                  className: classNames17(
                     "text-xl transition-transform duration-300",
                     { "rotate-180": collapse }
                   )
@@ -783,7 +783,7 @@ function Accordion({
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames24({
+            className: classNames17({
               "border-t border-t-eui-dark-400/40 eui-text-sm": true,
               "p-5": enableChildrenPadding
             }),
@@ -863,7 +863,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames24(
+      className: classNames17(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -879,14 +879,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames24("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: classNames24(
+      className: classNames17(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -928,7 +928,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24("absolute inset-0"),
+      className: classNames17("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -1074,7 +1074,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxs("div", { className: classNames24("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 })
@@ -1527,13 +1527,9 @@ var Graph = ({
     }
   );
 };
-var CloudinaryContextConfig = createContext(null);
-var CloudinaryProvider = ({
-  cloudName,
-  children
-}) => /* @__PURE__ */ jsx(CloudinaryContextConfig.Provider, { value: { cloudName }, children });
+var CloudinaryContext = createContext(null);
 var useCloudinaryConfig = () => {
-  const ctx = useContext(CloudinaryContextConfig);
+  const ctx = useContext(CloudinaryContext);
   if (!ctx) {
     throw new Error(
       "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
@@ -1543,23 +1539,31 @@ var useCloudinaryConfig = () => {
 };
 var DEFAULT_PUBLIC_CLOUD = "demo";
 function CloudinaryImage({
-  publicId,
+  publicId = "sample",
   cloudName,
   secure = true,
-  alt,
+  alt = "image",
+  fallbackSrc,
+  loading = "lazy",
   className,
   ...rest
 }) {
   const providerConfig = useCloudinaryConfig();
   const resolvedCloudName = cloudName || providerConfig?.cloudName || DEFAULT_PUBLIC_CLOUD;
-  return /* @__PURE__ */ jsx(CloudinaryContext, { cloudName: resolvedCloudName, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(CloudinaryContext$1, { cloudName: resolvedCloudName, children: /* @__PURE__ */ jsx(
     Image,
     {
       ...rest,
-      publicId: publicId || "sample",
+      publicId,
       secure,
       alt,
-      className: cn(className)
+      loading,
+      className: cn(className),
+      onError: (e) => {
+        if (fallbackSrc) {
+          e.currentTarget.src = fallbackSrc;
+        }
+      }
     }
   ) });
 }
@@ -1610,114 +1614,335 @@ function Info({
   );
 }
 var Info_default = Info;
-var levels = {
-  1: "text-5xl leading-[90px]",
-  2: "text-4xl leading-[80px]",
-  3: "text-3xl leading-[70px]"
+
+// src/components/data-display/typography/shared/typography.levels.ts
+var typographyLevels = {
+  display: {
+    1: "text-8xl leading-[120px]",
+    2: "text-7xl leading-[110px]",
+    3: "text-6xl leading-[100px]"
+  },
+  chapter: {
+    1: "text-5xl leading-[90px]",
+    2: "text-4xl leading-[80px]",
+    3: "text-3xl leading-[70px]"
+  },
+  section: {
+    1: "text-2xl leading-[50px] pt-4",
+    2: "text-xl leading-[50px]",
+    3: "text-lg leading-[40px]"
+  },
+  paragraph: {
+    1: "text-base leading-[28px]",
+    2: "text-sm leading-[25px]",
+    3: "text-xs leading-[20px]"
+  },
+  quote: {
+    1: "text-base leading-[28px]",
+    2: "text-sm leading-[25px]",
+    3: "text-xs leading-[20px]"
+  }
 };
+
+// src/components/data-display/typography/shared/typography.styles.ts
+var typographyStyles = ({
+  variant = "default",
+  decoration = "noUnderline",
+  bold,
+  italic,
+  className
+}) => cn(
+  textVariants[variant],
+  decorations[decoration],
+  bold && "font-bold",
+  italic && "italic",
+  className
+);
 var Chapter = ({
   level = 1,
   children,
-  variant = "default",
-  decoration = "noUnderline",
+  variant,
+  decoration,
   bold,
   italic,
-  styles,
-  onClick
+  className,
+  ...rest
 }) => {
+  const Tag2 = level === 1 ? "h1" : level === 2 ? "h2" : "h3";
   return /* @__PURE__ */ jsx(
-    "div",
+    Tag2,
     {
-      onClick,
-      className: classNames24({
-        [`${textVariants[variant]}`]: variant,
-        [`${levels[level]}`]: level,
-        [`${styles}`]: styles,
-        [`${decorations[decoration]}`]: decoration,
-        "font-bold": bold,
-        italic
-      }),
-      children: children ? children : "Title"
+      ...rest,
+      className: cn(
+        typographyLevels.chapter[level],
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Chapter"
     }
   );
 };
-var levels2 = {
-  1: "text-2xl leading-[50px] pt-4",
-  2: "text-xl leading-[50px]",
-  3: "text-lg leading-[40px]"
-};
 var Section = ({
   level = 1,
   children,
-  variant = "default",
-  decoration = "noUnderline",
+  variant,
+  decoration,
   bold,
   italic,
-  styles,
-  onClick
+  className,
+  ...rest
 }) => {
+  const Tag2 = level === 1 ? "h4" : level === 2 ? "h5" : "h6";
   return /* @__PURE__ */ jsx(
-    "div",
+    Tag2,
     {
-      onClick,
-      className: classNames24({
-        [`${textVariants[variant]} opacity-80`]: variant,
-        [`${levels2[level]}`]: level,
-        [`${styles}`]: styles,
-        [`${decorations[decoration]}`]: decoration,
-        "font-bold": bold,
-        italic
-      }),
-      children: children ? children : "Title"
+      ...rest,
+      className: cn(
+        "opacity-80",
+        typographyLevels.section[level],
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Section"
     }
   );
 };
-var levels3 = {
-  1: "text-base leading-[28px]",
-  2: "text-sm leading-[25px]",
-  3: "text-xs leading-[20px]"
-};
 var Paragraph = ({
   level = 1,
   children,
-  variant = "default",
-  decoration = "noUnderline",
+  variant,
+  decoration,
   bold,
   italic,
-  styles,
-  onClick
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...rest,
+      className: cn(
+        typographyLevels.paragraph[level],
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Paragraph"
+    }
+  );
+};
+var Quote = ({
+  level = 1,
+  children,
+  variant,
+  decoration,
+  bold,
+  italic,
+  className,
+  ...rest
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      onClick,
-      className: classNames24({
-        [`${textVariants[variant]}`]: variant,
-        [`${levels3[level]}`]: level,
-        [`${styles}`]: styles,
-        [`${decorations[decoration]}`]: decoration,
-        "font-bold": bold,
-        italic
-      }),
-      children: children ? children : "Text"
+      ...rest,
+      className: cn(
+        "pl-4 py-1 border-l-2 border-l-gray-400 w-full",
+        typographyLevels.quote[level],
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Quote"
+    }
+  );
+};
+var Caption = ({
+  children,
+  variant,
+  decoration,
+  bold,
+  italic,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cn(
+        "text-xs leading-[18px] opacity-70",
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Caption"
     }
   );
 };
-var Quote = ({ children, styles }) => {
+var Label = ({
+  children,
+  variant,
+  decoration,
+  bold = true,
+  italic,
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
-        "pl-4 py-1 border-l-2 border-l-gray-400 w-full": true,
-        [`${styles}`]: styles
-      }),
-      children
+      ...rest,
+      className: cn(
+        "text-sm leading-[22px]",
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Label"
+    }
+  );
+};
+var Code = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      ...rest,
+      className: cn(
+        "px-1.5 py-0.5 rounded-md",
+        "bg-gray-800 text-green-400",
+        "font-mono text-sm",
+        className
+      ),
+      children: children || "npm install"
+    }
+  );
+};
+var Lead = ({
+  children,
+  variant,
+  decoration,
+  bold,
+  italic,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...rest,
+      className: cn(
+        "text-xl leading-[38px] opacity-90",
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Lead paragraph"
+    }
+  );
+};
+var Overline = ({
+  children,
+  variant,
+  decoration,
+  bold = true,
+  italic,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "text-xs uppercase tracking-[0.2em]",
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Overline"
+    }
+  );
+};
+var Display = ({
+  level = 1,
+  children,
+  variant,
+  decoration,
+  bold = true,
+  italic,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "h1",
+    {
+      ...rest,
+      className: cn(
+        typographyLevels.display[level],
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Display"
     }
   );
 };
 
 // src/components/data-display/typography/index.tsx
-var Typography = { Chapter, Section, Paragraph, Quote };
+var Typography = {
+  Display,
+  Chapter,
+  Section,
+  Paragraph,
+  Quote,
+  Lead,
+  Caption,
+  Label,
+  Code,
+  Overline
+};
 var ListItem = ({
   content,
   TypographyComponent = /* @__PURE__ */ jsx(Paragraph, { level: 1 }),
@@ -2142,25 +2367,27 @@ function Table({
   ] });
 }
 var Table_default = Table;
-function Tag({ text, styles }) {
+function Tag({ text, className, ...rest }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: classNames24({
-        "text-xs bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 px-2 py-1 rounded mr-2 mt-1": true,
-        [`${styles}`]: styles
-      }),
+      ...rest,
+      className: cn(
+        "text-xs bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 px-2 py-1 rounded mr-2 mt-1",
+        className
+      ),
       children: text
     }
   );
 }
 var Tag_default = Tag;
 function Tooltip4({
-  content,
+  children,
   show,
   offsetX = 20,
   offsetY = 20,
-  className = ""
+  className,
+  ...rest
 }) {
   const [pos, setPos] = useState({ x: 0, y: 0 });
   useEffect(() => {
@@ -2175,18 +2402,19 @@ function Tooltip4({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `
-        pointer-events-none absolute z-50 px-3 py-2 text-sm 
-        rounded-lg shadow-lg bg-neutral-900 text-white
-        dark:bg-neutral-800
-        ${className}
-      `,
+      ...rest,
+      className: cn(
+        "pointer-events-none absolute z-50 px-3 py-2 text-sm",
+        "rounded-lg shadow-lg bg-neutral-900 text-white",
+        "dark:bg-neutral-800",
+        className
+      ),
       style: {
         top: pos.y,
         left: pos.x,
         transform: "translate(-50%, -50%)"
       },
-      children: content
+      children
     }
   );
 }
@@ -2235,7 +2463,7 @@ var ValueBadge = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24(
+      className: cn(
         "px-2 py-1 rounded-md text-xs font-semibold w-fit eg-theme-transition",
         noBackground ? "bg-transparent" : style.bg,
         style.color,
@@ -2246,8 +2474,48 @@ var ValueBadge = ({
   );
 };
 var ValueBadge_default = ValueBadge;
-function CloudinaryVideo() {
-  return /* @__PURE__ */ jsx("div", { children: "CloudinaryVideo" });
+var DEFAULT_PUBLIC_CLOUD2 = "demo";
+function CloudinaryVideo({
+  publicId = "dog",
+  cloudName,
+  secure = true,
+  controls = true,
+  autoPlay = false,
+  muted = false,
+  loop = false,
+  playsInline = true,
+  poster,
+  preload = "metadata",
+  className,
+  ...rest
+}) {
+  const providerConfig = useCloudinaryConfig();
+  const resolvedCloudName = cloudName || providerConfig?.cloudName || DEFAULT_PUBLIC_CLOUD2;
+  const protocol = secure ? "https" : "http";
+  const videoUrl = `
+    ${protocol}://res.cloudinary.com/
+    ${resolvedCloudName}
+    /video/upload/
+    ${publicId}.mp4
+  `.replace(/\s+/g, "");
+  return /* @__PURE__ */ jsxs(
+    "video",
+    {
+      ...rest,
+      controls,
+      autoPlay,
+      muted,
+      loop,
+      playsInline,
+      poster,
+      preload,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }),
+        "Your browser does not support the video tag."
+      ]
+    }
+  );
 }
 var CloudinaryVideo_default = CloudinaryVideo;
 var FormObserver = ({ formik, onChange }) => {
@@ -2319,7 +2587,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: classNames24(styles), children })
+        /* @__PURE__ */ jsx("div", { className: classNames17(styles), children })
       ] })
     }
   );
@@ -2328,7 +2596,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      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
       }),
@@ -2439,7 +2707,7 @@ function FormResponse({
   return /* @__PURE__ */ jsx(Transition4.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
@@ -2455,18 +2723,31 @@ var getYoutubeEmbedUrl = (url) => {
   const videoIdMatch = url.match(
     /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/
   );
-  return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : "";
+  if (!videoIdMatch) {
+    return "";
+  }
+  return `https://www.youtube.com/embed/${videoIdMatch[1]}`;
 };
-function YoutubeVideoPlayer({
+function YoutubeVideo({
   videoUrl,
   width = 750,
-  height = 422
+  height = 422,
+  autoPlay = false,
+  muted = false,
+  controls = true,
+  className,
+  ...rest
 }) {
   const embedUrl = getYoutubeEmbedUrl(videoUrl);
   if (!embedUrl) {
     return /* @__PURE__ */ jsx(FormResponse_default, { text: "Invalid YouTube URL", variant: "danger" });
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+  const params = new URLSearchParams({
+    autoplay: autoPlay ? "1" : "0",
+    mute: muted ? "1" : "0",
+    controls: controls ? "1" : "0"
+  });
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx(
     "div",
     {
       className: "relative w-full",
@@ -2477,17 +2758,124 @@ function YoutubeVideoPlayer({
       children: /* @__PURE__ */ jsx(
         "iframe",
         {
-          src: embedUrl,
+          ...rest,
+          src: `${embedUrl}?${params.toString()}`,
           title: "YouTube video player",
+          loading: "lazy",
           allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
           allowFullScreen: true,
-          className: "absolute top-0 left-0 w-full h-full rounded-lg shadow-lg"
+          className: cn(
+            "absolute top-0 left-0 w-full h-full rounded-xl shadow-xl border-0",
+            className
+          )
         }
       )
     }
   ) });
 }
-var YoutubeVideoPlayer_default = YoutubeVideoPlayer;
+var YoutubeVideo_default = YoutubeVideo;
+var ThemeContext = createContext(
+  void 0
+);
+var ThemeProvider = ({
+  defaultTheme = "dark",
+  children
+}) => {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem("theme") || defaultTheme;
+  });
+  useEffect(() => {
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+  const toggleTheme = () => {
+    setTheme((prev) => prev === "dark" ? "light" : "dark");
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
+};
+var ThemeSwitch = () => {
+  const themeContext = useContext(ThemeContext);
+  if (!themeContext) return null;
+  const { theme, toggleTheme } = themeContext;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: toggleTheme,
+      className: "relative w-16 h-8 flex items-center bg-gray-300 dark:bg-gray-800 rounded-full p-1 transition-all",
+      children: [
+        /* @__PURE__ */ jsx(
+          FaSun,
+          {
+            className: "absolute left-2 text-yellow-500 transition-opacity duration-300 z-10",
+            style: { opacity: theme === "dark" ? 0 : 1 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FaMoon,
+          {
+            className: "absolute right-2 text-blue-400 transition-opacity duration-300 z-10",
+            style: { opacity: theme === "dark" ? 1 : 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            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"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/data/enums.ts
+var Shape = /* @__PURE__ */ ((Shape2) => {
+  Shape2["circle"] = "circle";
+  Shape2["roundedSquare"] = "roundedSquare";
+  Shape2["softRoundedSquare"] = "softRoundedSquare";
+  Shape2["square"] = "square";
+  return Shape2;
+})(Shape || {});
+var ShapeSwitch = () => {
+  const { config, setConfig } = useEUIConfig();
+  const currentShape = config.global?.shape ?? "square";
+  const handleChange = (e) => {
+    const shape = e.target.value;
+    setConfig((prev) => ({
+      ...prev,
+      global: {
+        ...prev.global,
+        shape
+      }
+    }));
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 w-fit", children: /* @__PURE__ */ jsx(
+    "select",
+    {
+      value: currentShape,
+      onChange: handleChange,
+      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
+      children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsx("option", { value: shape, children: shape }, shape))
+    }
+  ) });
+};
+
+// src/hooks/theme/useCurrentTheme.ts
+var useCurrentTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useCurrentTheme must be used within a ThemeProvider");
+  }
+  return context.theme;
+};
+var useCurrentTheme_default = useCurrentTheme;
 var COUNTRY_NAMES = {
   AF: "Afghanistan",
   AL: "Albania",
@@ -13797,108 +14185,6 @@ var worldMapTopoJSONContries100m = {
     translate: [-180, -85.60903777459771]
   }
 };
-var ThemeContext = createContext(
-  void 0
-);
-var ThemeProvider = ({
-  defaultTheme = "dark",
-  children
-}) => {
-  const [theme, setTheme] = useState(() => {
-    return localStorage.getItem("theme") || defaultTheme;
-  });
-  useEffect(() => {
-    if (theme === "dark") {
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
-    localStorage.setItem("theme", theme);
-  }, [theme]);
-  const toggleTheme = () => {
-    setTheme((prev) => prev === "dark" ? "light" : "dark");
-  };
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
-};
-var ThemeSwitch = () => {
-  const themeContext = useContext(ThemeContext);
-  if (!themeContext) return null;
-  const { theme, toggleTheme } = themeContext;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: toggleTheme,
-      className: "relative w-16 h-8 flex items-center bg-gray-300 dark:bg-gray-800 rounded-full p-1 transition-all",
-      children: [
-        /* @__PURE__ */ jsx(
-          FaSun,
-          {
-            className: "absolute left-2 text-yellow-500 transition-opacity duration-300 z-10",
-            style: { opacity: theme === "dark" ? 0 : 1 }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FaMoon,
-          {
-            className: "absolute right-2 text-blue-400 transition-opacity duration-300 z-10",
-            style: { opacity: theme === "dark" ? 1 : 0 }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames24(
-              "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"
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/data/enums.ts
-var Shape = /* @__PURE__ */ ((Shape2) => {
-  Shape2["circle"] = "circle";
-  Shape2["roundedSquare"] = "roundedSquare";
-  Shape2["softRoundedSquare"] = "softRoundedSquare";
-  Shape2["square"] = "square";
-  return Shape2;
-})(Shape || {});
-var ShapeSwitch = () => {
-  const { config, setConfig } = useEUIConfig();
-  const currentShape = config.global?.shape ?? "square";
-  const handleChange = (e) => {
-    const shape = e.target.value;
-    setConfig((prev) => ({
-      ...prev,
-      global: {
-        ...prev.global,
-        shape
-      }
-    }));
-  };
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 w-fit", children: /* @__PURE__ */ jsx(
-    "select",
-    {
-      value: currentShape,
-      onChange: handleChange,
-      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
-      children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsx("option", { value: shape, children: shape }, shape))
-    }
-  ) });
-};
-
-// src/hooks/theme/useCurrentTheme.ts
-var useCurrentTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useCurrentTheme must be used within a ThemeProvider");
-  }
-  return context.theme;
-};
-var useCurrentTheme_default = useCurrentTheme;
 function WorldMap({
   data,
   title = "Global Data Overview",
@@ -13906,9 +14192,10 @@ function WorldMap({
   bubbleStroke = "stroke-teal-900",
   bubbleScale = 40,
   minBubble = 6,
-  styles,
   disableCountryHover = true,
-  disableCountrySelect = true
+  disableCountrySelect = true,
+  className,
+  ...rest
 }) {
   const currentTheme = useCurrentTheme_default();
   const isDarkMode = currentTheme === "dark";
@@ -13952,60 +14239,52 @@ function WorldMap({
     setShowTooltip(true);
   };
   const hideTooltip = () => setShowTooltip(false);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames24({
-        [`${styles}`]: true
-      }),
-      children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold mb-4", children: title }),
-        /* @__PURE__ */ jsx("div", { className: "w-full aspect-[2/1]", children: /* @__PURE__ */ jsxs(
-          ComposableMap,
-          {
-            projectionConfig: { scale: 140 },
-            width: 800,
-            height: 400,
-            style: { width: "100%", height: "100%" },
-            children: [
-              /* @__PURE__ */ jsx(Geographies, { geography: worldMapTopoJSONContries100m, children: ({ geographies }) => geographies.map((geo) => /* @__PURE__ */ jsx(
-                Geography,
-                {
-                  geography: geo,
-                  style: {
-                    default: {
-                      ...mode.default,
-                      strokeWidth: 0.5,
-                      pointerEvents: disableCountryHover && disableCountrySelect ? "none" : "auto"
-                    },
-                    hover: disableCountryHover ? { ...mode.default, pointerEvents: "none" } : mode.hover,
-                    pressed: disableCountrySelect ? { ...mode.default, pointerEvents: "none" } : mode.pressed
-                  }
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn(className), children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold mb-4", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "w-full aspect-[2/1]", children: /* @__PURE__ */ jsxs(
+      ComposableMap,
+      {
+        projectionConfig: { scale: 140 },
+        width: 800,
+        height: 400,
+        style: { width: "100%", height: "100%" },
+        children: [
+          /* @__PURE__ */ jsx(Geographies, { geography: worldMapTopoJSONContries100m, children: ({ geographies }) => geographies.map((geo) => /* @__PURE__ */ jsx(
+            Geography,
+            {
+              geography: geo,
+              style: {
+                default: {
+                  ...mode.default,
+                  strokeWidth: 0.5,
+                  pointerEvents: disableCountryHover && disableCountrySelect ? "none" : "auto"
                 },
-                geo.rsmKey
-              )) }),
-              resolvedData.map((point, index) => {
-                const size = point.value / maxValue * bubbleScale + minBubble;
-                return /* @__PURE__ */ jsx(Marker, { coordinates: point.coordinates, children: /* @__PURE__ */ jsx(
-                  motion.circle,
-                  {
-                    r: size,
-                    initial: { opacity: 0, scale: 0 },
-                    animate: { opacity: 0.6, scale: 1 },
-                    transition: { duration: 0.5 },
-                    className: `${bubbleColor} ${bubbleStroke} stroke-1 cursor-pointer`,
-                    onMouseMove: (e) => handleMouseMove(e, point),
-                    onMouseLeave: hideTooltip
-                  }
-                ) }, index);
-              })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Tooltip4, { show: showTooltip, content: tooltipContent })
-      ]
-    }
-  );
+                hover: disableCountryHover ? { ...mode.default, pointerEvents: "none" } : mode.hover,
+                pressed: disableCountrySelect ? { ...mode.default, pointerEvents: "none" } : mode.pressed
+              }
+            },
+            geo.rsmKey
+          )) }),
+          resolvedData.map((point, index) => {
+            const size = point.value / maxValue * bubbleScale + minBubble;
+            return /* @__PURE__ */ jsx(Marker, { coordinates: point.coordinates, children: /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                r: size,
+                initial: { opacity: 0, scale: 0 },
+                animate: { opacity: 0.6, scale: 1 },
+                transition: { duration: 0.5 },
+                className: `${bubbleColor} ${bubbleStroke} stroke-1 cursor-pointer`,
+                onMouseMove: (e) => handleMouseMove(e, point),
+                onMouseLeave: hideTooltip
+              }
+            ) }, index);
+          })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip4, { show: showTooltip, children: tooltipContent })
+  ] });
 }
 var sizes3 = {
   xs: "px-2 py-1 text-xs",
@@ -14049,7 +14328,7 @@ var Button = ({
       onClick,
       onMouseMove: handleMouseMove,
       disabled: disabled || loading,
-      className: classNames24({
+      className: classNames17({
         "relative z-0 overflow-hidden group": true,
         "flex flex-row items-center justify-center gap-2": true,
         [`${variants[variant]}`]: !ghost,
@@ -14095,7 +14374,7 @@ function InputResponse({
   return /* @__PURE__ */ jsx(Transition4.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -14110,7 +14389,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsx(
     "label",
     {
-      className: classNames24({
+      className: classNames17({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -14162,7 +14441,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames24({
+        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,
@@ -14207,7 +14486,7 @@ var InputFile = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames24(
+        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),
@@ -14233,7 +14512,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames24({
+        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
@@ -14259,7 +14538,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: classNames24({
+        className: classNames17({
           "flex flex-col space-y-2 w-full bg-eui-primary-300/10": true,
           [`${shapes[resolvedShape]}`]: true
         }),
@@ -14290,7 +14569,7 @@ var InputList = ({ name, placeholder, shape }) => {
                             {
                               name: `${name}[${index}]`,
                               placeholder: `Item ${index + 1}`,
-                              className: classNames24(
+                              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]",
                                 [`${shapes[resolvedShape]}`],
                                 errors[name]?.[index] ? "border-eui-danger-500" : "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -14358,7 +14637,7 @@ var InputListGroup = ({
       values[name]?.map((group, groupIndex) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames24({
+          className: classNames17({
             "flex flex-col gap-2 bg-eui-primary-300/10 p-3": true,
             [`${shapes[resolvedShape]}`]: true
           }),
@@ -14370,7 +14649,7 @@ var InputListGroup = ({
                 {
                   name: `${name}[${groupIndex}].name`,
                   placeholder: `Group ${groupIndex + 1}`,
-                  className: classNames24(
+                  className: classNames17(
                     "border w-full bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]",
                     [`${shapes[resolvedShape]}`],
                     "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -14412,7 +14691,7 @@ var InputListGroup = ({
                   {
                     ref: provided.innerRef,
                     ...provided.droppableProps,
-                    className: classNames24({
+                    className: classNames17({
                       "space-y-2 bg-eui-primary-300/10 p-2": true,
                       [`${shapes[resolvedShape]}`]: true
                     }),
@@ -14427,7 +14706,7 @@ var InputListGroup = ({
                             {
                               ref: provided2.innerRef,
                               ...provided2.draggableProps,
-                              className: classNames24({
+                              className: classNames17({
                                 "flex items-center gap-2 bg-eui-primary-300/10 p-2": true,
                                 [`${shapes[resolvedShape]}`]: true
                               }),
@@ -14438,7 +14717,7 @@ var InputListGroup = ({
                                   {
                                     name: `${name}[${groupIndex}].items[${itemIndex}]`,
                                     placeholder: `Item ${itemIndex + 1}`,
-                                    className: classNames24(
+                                    className: classNames17(
                                       "border w-full bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]",
                                       [`${shapes[resolvedShape]}`],
                                       "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -14515,7 +14794,7 @@ var Checkbox = (props) => {
   const { placeholder } = props;
   const isMulti = isMultiCheckbox(props);
   const [field, meta, helpers] = isMulti ? useField(props) : useField(props);
-  const checkboxClass = classNames24(
+  const checkboxClass = classNames17(
     "appearance-none cursor-pointer transition-all duration-300",
     "w-5 h-5 min-w-[1.25rem] min-h-[1.25rem]",
     "flex-shrink-0",
@@ -14616,7 +14895,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames24({
+        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,
@@ -14725,7 +15004,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsxs(
             "label",
             {
-              className: classNames24({
+              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
@@ -14842,7 +15121,7 @@ function Radio({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames24({
+            className: classNames17({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -14855,7 +15134,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames24({
+                  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
@@ -14867,7 +15146,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames24({
+                  className: classNames17({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -14910,7 +15189,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -14923,7 +15202,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames24({
+            className: classNames17({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -14967,7 +15246,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames24({
+        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,
@@ -15019,7 +15298,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames24(
+            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",
@@ -15076,7 +15355,7 @@ function Tags({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames24(
+          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,
@@ -15124,7 +15403,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames24(
+          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"
           )
@@ -15165,7 +15444,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames24({
+          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),
@@ -15179,7 +15458,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames24(
+          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"
           )
@@ -15210,7 +15489,7 @@ function ContentArea({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      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,
@@ -15226,7 +15505,7 @@ function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15239,7 +15518,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15258,7 +15537,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -15275,7 +15554,7 @@ var Layout = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -15294,7 +15573,7 @@ var Header = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -15334,7 +15613,7 @@ var Content = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      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)
@@ -15350,7 +15629,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      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
@@ -15438,7 +15717,7 @@ function MarkdownEditor({
   const [field, meta, helpers] = useField(props);
   const { theme } = useTheme_default();
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx("div", { className: classNames24(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: classNames17(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsx(
       MDXEditor,
       {
         markdown: field.value,
@@ -15541,7 +15820,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
       "button",
       {
         onClick: () => scrollToHeading(heading.id),
-        className: classNames24(
+        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"
@@ -15697,7 +15976,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames24({
+      className: classNames17({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -15774,7 +16053,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classNames24({
+            className: classNames17({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -15788,7 +16067,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -15818,7 +16097,7 @@ var Drawer = ({
       {
         show: visibility,
         enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames24({
+        enterFrom: classNames17({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -15827,7 +16106,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: classNames24({
+        leaveTo: classNames17({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -15836,7 +16115,7 @@ var Drawer = ({
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames24(
+            className: classNames17(
               "fixed shadow-lg z-50",
               {
                 "h-full w-[300px]": isHorizontal,
@@ -15868,7 +16147,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      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,
@@ -15916,7 +16195,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames24({
+        className: classNames17({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -15929,7 +16208,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -15970,7 +16249,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames24({
+        className: classNames17({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -16015,7 +16294,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames24({
+      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,
@@ -16044,7 +16323,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16097,7 +16376,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16159,7 +16438,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames24({
+        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,
@@ -16187,7 +16466,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsx(
             BsChevronDown,
             {
-              className: classNames24({
+              className: classNames17({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -16200,7 +16479,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames24({
+        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
         }),
@@ -16230,7 +16509,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames24({
+      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,
@@ -16259,7 +16538,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16299,7 +16578,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames24({
+      className: classNames17({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -16764,7 +17043,7 @@ function Modal({
         "div",
         {
           ref: modalRef,
-          className: classNames24({
+          className: classNames17({
             "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit": true,
             [`${shapes[resolvedShape]}`]: true,
             [`${styles}`]: styles
@@ -16775,7 +17054,7 @@ function Modal({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: classNames24({
+                  className: classNames17({
                     "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast": true,
                     "hover:cursor-pointer hover:bg-eui-dark-500": true
                   }),
@@ -16881,7 +17160,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames24({
+          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
@@ -17132,7 +17411,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames24(
+      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",
@@ -17522,7 +17801,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         [`${styles}`]: styles
       }),
       children
@@ -17571,7 +17850,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames24({
+      className: classNames17({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -17599,11 +17878,11 @@ function EUIDevLayout({
           shape: "roundedSquare"
         }
       },
-      children: /* @__PURE__ */ jsx(CloudinaryProvider, { cloudName: "demo", children: /* @__PURE__ */ jsx(GenericLayout_default, { children: /* @__PURE__ */ jsxs(Layout, { children: [
+      children: /* @__PURE__ */ jsx(GenericLayout_default, { children: /* @__PURE__ */ jsxs(Layout, { children: [
         header,
         /* @__PURE__ */ jsx(Content, { styles: "pt-[60px]", children: /* @__PURE__ */ jsx(ContentArea_default, { enablePadding: true, children }) }),
         footer
-      ] }) }) })
+      ] }) })
     }
   );
 }
@@ -17630,6 +17909,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarChart_default as BarChart, 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, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Content, ContentArea_default as ContentArea, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, 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, 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, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Layout, LineChart_default as LineChart, 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, Paragraph, PieChart_default as PieChart, PriceTag, ProgressBar, Quote, Radio_default as Radio, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, 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, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, 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, Tooltip4 as Tooltip, TopNav, Transition4 as Transition, TransitionDropdown_default as TransitionDropdown, TransitionFadeIn_default as TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideoPlayer_default as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveWithGlobal, sendToast, 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, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarChart_default as BarChart, 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, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryVideo_default as CloudinaryVideo, Code, Content, ContentArea_default as ContentArea, 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, 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, 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, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LineChart_default as LineChart, 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, Overline, Paragraph, PieChart_default as PieChart, PriceTag, ProgressBar, Quote, Radio_default as Radio, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, 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, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, 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, Tooltip4 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, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveWithGlobal, sendToast, useClickOutside, 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