elseware-ui 2.29.1 → 2.30.0

package/dist/index.js

@@ -8,7 +8,7 @@ var reactChartjs2 = require('react-chartjs-2');
 var chart_js = require('chart.js');
 var React4 = require('react');
 var react = require('@headlessui/react');
-var classNames28 = require('classnames');
+var classNames17 = require('classnames');
 var fa6 = require('react-icons/fa6');
 var ReactWorldFlags = require('react-world-flags');
 var emojiFlags = require('emoji-flags');
@@ -46,7 +46,7 @@ function _interopNamespace(e) {
 }
 
 var React4__default = /*#__PURE__*/_interopDefault(React4);
-var classNames28__default = /*#__PURE__*/_interopDefault(classNames28);
+var classNames17__default = /*#__PURE__*/_interopDefault(classNames17);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
@@ -70,6 +70,11 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx_default(inputs));
 }
 
+// src/utils/components.ts
+function isRenderFn(children) {
+  return typeof children === "function";
+}
+
 // src/data/meta/currency.tsx
 var CURRENCIES = [
   { name: "US Dollar", symbol: "$", code: "USD" },
@@ -168,10 +173,8 @@ var getCurrencySymbol = (code) => {
   return currency ? currency.symbol : null;
 };
 
-// src/utils/components.ts
-function isRenderFn(children) {
-  return typeof children === "function";
-}
+// src/utils/enum.ts
+var enumValues = (enumObject) => Object.values(enumObject);
 
 // src/utils/routes.ts
 var normalize = (path) => {
@@ -764,7 +767,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs": true,
           "hover:cursor-pointer": toggleOnSummaryClick
         }),
@@ -782,7 +785,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 fa6.FaCircleChevronDown,
                 {
-                  className: classNames28__default.default(
+                  className: classNames17__default.default(
                     "text-xl transition-transform duration-300",
                     { "rotate-180": collapse }
                   )
@@ -808,7 +811,7 @@ function Accordion({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames28__default.default({
+            className: classNames17__default.default({
               "border-t border-t-eui-dark-400/40 eui-text-sm": true,
               "p-5": enableChildrenPadding
             }),
@@ -888,7 +891,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames28__default.default(
+      className: classNames17__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -904,14 +907,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames28__default.default("p-6 text-gray-300 text-sm", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default("p-6 text-gray-300 text-sm", className), children });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default(
+      className: classNames17__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -953,7 +956,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default("absolute inset-0"),
+      className: classNames17__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -1099,7 +1102,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames28__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames17__default.default("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsxRuntime.jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsxRuntime.jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children })
@@ -1552,13 +1555,9 @@ var Graph = ({
     }
   );
 };
-var CloudinaryContextConfig = React4.createContext(null);
-var CloudinaryProvider = ({
-  cloudName,
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(CloudinaryContextConfig.Provider, { value: { cloudName }, children });
+var CloudinaryContext = React4.createContext(null);
 var useCloudinaryConfig = () => {
-  const ctx = React4.useContext(CloudinaryContextConfig);
+  const ctx = React4.useContext(CloudinaryContext);
   if (!ctx) {
     throw new Error(
       "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
@@ -1568,10 +1567,12 @@ var useCloudinaryConfig = () => {
 };
 var DEFAULT_PUBLIC_CLOUD = "demo";
 function CloudinaryImage({
-  publicId,
+  publicId = "sample",
   cloudName,
   secure = true,
-  alt,
+  alt = "image",
+  fallbackSrc,
+  loading = "lazy",
   className,
   ...rest
 }) {
@@ -1581,10 +1582,16 @@ function CloudinaryImage({
     cloudinaryReact.Image,
     {
       ...rest,
-      publicId: publicId || "sample",
+      publicId,
       secure,
       alt,
-      className: cn(className)
+      loading,
+      className: cn(className),
+      onError: (e) => {
+        if (fallbackSrc) {
+          e.currentTarget.src = fallbackSrc;
+        }
+      }
     }
   ) });
 }
@@ -1613,10 +1620,10 @@ var Image2 = ({
 };
 function Info({
   children,
-  className,
   variant = "default",
   appearance = "lite",
   shape = "roundedSquare",
+  className,
   ...rest
 }) {
   const variantStyles = appearance === "solid" ? infoVariantsSolid[variant] : appearance === "ghost" ? infoVariantsGhost[variant] : infoVariantsLite[variant];
@@ -1635,114 +1642,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__ */ jsxRuntime.jsx(
-    "div",
+    Tag2,
     {
-      onClick,
-      className: classNames28__default.default({
-        [`${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__ */ jsxRuntime.jsx(
-    "div",
+    Tag2,
     {
-      onClick,
-      className: classNames28__default.default({
-        [`${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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "div",
     {
-      onClick,
-      className: classNames28__default.default({
-        [`${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 Quote = ({ children, styles }) => {
+var Caption = ({
+  children,
+  variant,
+  decoration,
+  bold,
+  italic,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...rest,
+      className: cn(
+        "text-xs leading-[18px] opacity-70",
+        typographyStyles({
+          variant,
+          decoration,
+          bold,
+          italic,
+          className
+        })
+      ),
+      children: children || "Caption"
+    }
+  );
+};
+var Label = ({
+  children,
+  variant,
+  decoration,
+  bold = true,
+  italic,
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
-        "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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Paragraph, { level: 1 }),
@@ -1859,15 +2087,19 @@ var List_default = List;
 var applyDiscount = (discount, price) => {
   return (price - price / 100 * discount).toFixed(2);
 };
-function PriceTag({ discount, price, code = "USD", styles }) {
+function PriceTag({
+  discount,
+  price,
+  code = "USD",
+  className,
+  ...rest
+}) {
   if (price === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default({
-          "inline-flex gap-3 text-md w-fit": true,
-          [`${styles}`]: styles
-        }),
+        ...rest,
+        className: cn("inline-flex gap-3 text-md w-fit", className),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-700 px-2 py-1 font-bold rounded-md text-gray-200", children: "FREE" })
       }
     );
@@ -1876,10 +2108,8 @@ function PriceTag({ discount, price, code = "USD", styles }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames28__default.default({
-          "inline-flex gap-3 text-md w-fit": true,
-          [`${styles}`]: styles
-        }),
+        ...rest,
+        className: cn("inline-flex gap-3 text-md w-fit", className),
         children: [
           discount && discount !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-green-700 px-2 py-1 font-bold rounded-md text-gray-200", children: [
             "-",
@@ -1921,11 +2151,11 @@ var ProgressBar = ({
   showLabel = true,
   label,
   labelPlacement = "top",
-  // ✅ default
-  styles
+  className,
+  ...rest
 }) => {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames28__default.default("w-full", styles), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: cn("w-full", className), children: [
     showLabel && labelPlacement === "top" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1 text-gray-400", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: label ?? "Progress" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -1936,7 +2166,7 @@ var ProgressBar = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames28__default.default(
+        className: cn(
           "relative w-full bg-gray-700 rounded overflow-hidden",
           sizes[size]
         ),
@@ -1944,7 +2174,7 @@ var ProgressBar = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: classNames28__default.default(
+              className: cn(
                 "h-full transition-all duration-300 ease-out",
                 variants[variant]
               ),
@@ -1962,20 +2192,36 @@ var ProgressBar = ({
     )
   ] });
 };
-function StarRating({ rating, reviewAmount, isNumericRatingEnabled = false, isReviewAmountEnabled = false, styles }) {
+function StarRating({
+  rating,
+  reviewAmount,
+  isNumericRatingEnabled = false,
+  isReviewAmountEnabled = false,
+  className,
+  ...rest
+}) {
   const fullStars = Math.floor(rating);
   const halfStars = Math.ceil(rating - fullStars);
   const emptyStars = 5 - fullStars - halfStars;
   const starIcon = /* @__PURE__ */ jsxRuntime.jsx(bs.BsStarFill, {});
   const halfStarIcon = /* @__PURE__ */ jsxRuntime.jsx(bs.BsStarHalf, {});
   const emptyStarIcon = /* @__PURE__ */ jsxRuntime.jsx(bs.BsStar, {});
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex gap-2 items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: "inline-flex gap-2 items-center", children: [
     isNumericRatingEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-yellow-700 font-semibold text-[14px]", children: rating.toFixed(1) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-row gap-[2px] text-[13px] text-yellow-600 ${styles}`, children: [
-      [...Array(fullStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: starIcon }, index)),
-      [...Array(halfStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: halfStarIcon }, index + fullStars)),
-      [...Array(emptyStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyStarIcon }, index + fullStars + halfStars))
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-row gap-[2px] text-[13px] text-yellow-600",
+          className
+        ),
+        children: [
+          [...Array(fullStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: starIcon }, index)),
+          [...Array(halfStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: halfStarIcon }, index + fullStars)),
+          [...Array(emptyStars)].map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyStarIcon }, index + fullStars + halfStars))
+        ]
+      }
+    ),
     isReviewAmountEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-400 font-semibold text-[14px]", children: [
       "(",
       reviewAmount,
@@ -2062,83 +2308,6 @@ function StarRatingDistribution({
   ] });
 }
 var StarRatingDistribution_default = StarRatingDistribution;
-var Skeleton = ({ children, styles }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: classNames28__default.default({
-        "bg-gradient-to-r from-eui-dark-300/20 to-eui-dark-100/10 dark:from-eui-light-400/10 dark:to-eui-light-400/5 animate-pulse min-w-5 min-h-3": true,
-        [`${styles}`]: styles
-      }),
-      children
-    }
-  );
-};
-function SliderItem({ img, onClick, selected, styles }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      onClick,
-      className: classNames28__default.default({
-        "flex-shrink-0 w-[160px] h-[90px] border-[3px] overflow-hidden brightness-50": true,
-        "hover:cursor-pointer hover:border-eui-secondary-600  hover:shadow-lg hover:shadow-[#167d0f]/50 hover:brightness-100": true,
-        "border-transparent": !selected,
-        "border-opacity-100 border-[#0b6b05] brightness-100": selected,
-        "transition-all ease-in-out duration-500": true,
-        [`${styles}`]: styles
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(CloudinaryImage_default, { publicId: img, alt: "image", className: "w-full h-full object-cover" })
-    }
-  );
-}
-var SliderItem_default = SliderItem;
-function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
-  const [images, setImages] = React4.useState([
-    {
-      img: coverArt,
-      selected: true
-    }
-  ]);
-  React4.useEffect(() => {
-    setImages([
-      {
-        img: coverArt,
-        selected: true
-      }
-    ]);
-  }, [isSuccess]);
-  React4.useEffect(() => {
-    if (screenshots) {
-      const selectableScreenshots = [];
-      screenshots.forEach((item) => {
-        selectableScreenshots.push({
-          img: item,
-          selected: false
-        });
-      });
-      setImages((prev) => [...prev, ...selectableScreenshots]);
-    }
-  }, [isSuccess]);
-  const [displayImg, setDisplayImg] = React4.useState(coverArt);
-  React4.useEffect(() => {
-    setDisplayImg(coverArt);
-  }, [coverArt]);
-  const displayImageHandler = (itemIndex, img) => {
-    setDisplayImg(img);
-    const newArray = images.map((obj, i) => {
-      if (i === itemIndex) {
-        return { ...obj, selected: true };
-      }
-      return { ...obj, selected: false };
-    });
-    setImages(newArray);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { styles: "w-full aspect-w-16 aspect-h-9" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(CloudinaryImage_default, { publicId: displayImg, alt: "displayImg", className: "aspect-w-16 aspect-h-9" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[130px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute pt-2 pb-4 w-full flex space-x-2 overflow-auto", children: images.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(SliderItem_default, { img: item.img, onClick: () => displayImageHandler(index, item.img), selected: item.selected }, index)) }) })
-  ] }) });
-}
-var Slider_default = Slider;
 function Table({
   title,
   columns,
@@ -2226,25 +2395,27 @@ function Table({
   ] });
 }
 var Table_default = Table;
-function Tag({ text, styles }) {
+function Tag({ text, className, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: classNames28__default.default({
-        "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] = React4.useState({ x: 0, y: 0 });
   React4.useEffect(() => {
@@ -2259,18 +2430,19 @@ function Tooltip4({
   return /* @__PURE__ */ jsxRuntime.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
     }
   );
 }
@@ -2319,7 +2491,7 @@ var ValueBadge = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default(
+      className: cn(
         "px-2 py-1 rounded-md text-xs font-semibold w-fit eg-theme-transition",
         noBackground ? "bg-transparent" : style.bg,
         style.color,
@@ -2330,8 +2502,48 @@ var ValueBadge = ({
   );
 };
 var ValueBadge_default = ValueBadge;
-function CloudinaryVideo() {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "video",
+    {
+      ...rest,
+      controls,
+      autoPlay,
+      muted,
+      loop,
+      playsInline,
+      poster,
+      preload,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoUrl, type: "video/mp4" }),
+        "Your browser does not support the video tag."
+      ]
+    }
+  );
 }
 var CloudinaryVideo_default = CloudinaryVideo;
 var FormObserver = ({ formik, onChange }) => {
@@ -2403,7 +2615,7 @@ var Form = ({
         /* @__PURE__ */ jsxRuntime.jsx(UnsavedChangesGuard_default, { formik: formik$1, enabled: warnOnUnsavedChanges }),
         /* @__PURE__ */ jsxRuntime.jsx(DirtyObserver_default, { formik: formik$1, onDirtyChange }),
         /* @__PURE__ */ jsxRuntime.jsx(FormObserver_default, { formik: formik$1, onChange }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames28__default.default(styles), children })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default(styles), children })
       ] })
     }
   );
@@ -2412,7 +2624,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "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
       }),
@@ -2421,6 +2633,19 @@ var Backdrop = ({ children, styles }) => {
   );
 };
 var Backdrop_default = Backdrop;
+var Skeleton = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "bg-gradient-to-r from-eui-dark-300/20 to-eui-dark-100/10 dark:from-eui-light-400/10 dark:to-eui-light-400/5 animate-pulse min-w-5 min-h-3",
+        className
+      ),
+      children
+    }
+  );
+};
 function sendToast(data = { status: "", message: "" }) {
   switch (data?.status) {
     case "success":
@@ -2510,55 +2735,175 @@ function FormResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
-        "font-poppins font-light text-sm": true,
-        [`${variantsLite[variant]}`]: variant,
-        [`${shapes[shape]}`]: shape,
-        [`${sizes2[size]}`]: size,
-        [`${styles}`]: styles
-      }),
-      children: text
+      className: classNames17__default.default({
+        "font-poppins font-light text-sm": true,
+        [`${variantsLite[variant]}`]: variant,
+        [`${shapes[shape]}`]: shape,
+        [`${sizes2[size]}`]: size,
+        [`${styles}`]: styles
+      }),
+      children: text
+    }
+  ) });
+}
+var FormResponse_default = FormResponse;
+var getYoutubeEmbedUrl = (url) => {
+  const videoIdMatch = url.match(
+    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/
+  );
+  if (!videoIdMatch) {
+    return "";
+  }
+  return `https://www.youtube.com/embed/${videoIdMatch[1]}`;
+};
+function YoutubeVideo({
+  videoUrl,
+  width = 750,
+  height = 422,
+  autoPlay = false,
+  muted = false,
+  controls = true,
+  className,
+  ...rest
+}) {
+  const embedUrl = getYoutubeEmbedUrl(videoUrl);
+  if (!embedUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: "Invalid YouTube URL", variant: "danger" });
+  }
+  const params = new URLSearchParams({
+    autoplay: autoPlay ? "1" : "0",
+    mute: muted ? "1" : "0",
+    controls: controls ? "1" : "0"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "relative w-full",
+      style: {
+        maxWidth: `${width}px`,
+        paddingTop: `${height / width * 100}%`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "iframe",
+        {
+          ...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: cn(
+            "absolute top-0 left-0 w-full h-full rounded-xl shadow-xl border-0",
+            className
+          )
+        }
+      )
+    }
+  ) });
+}
+var YoutubeVideo_default = YoutubeVideo;
+var ThemeContext = React4.createContext(
+  void 0
+);
+var ThemeProvider = ({
+  defaultTheme = "dark",
+  children
+}) => {
+  const [theme, setTheme] = React4.useState(() => {
+    return localStorage.getItem("theme") || defaultTheme;
+  });
+  React4.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__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
+};
+var ThemeSwitch = () => {
+  const themeContext = React4.useContext(ThemeContext);
+  if (!themeContext) return null;
+  const { theme, toggleTheme } = themeContext;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          fa.FaSun,
+          {
+            className: "absolute left-2 text-yellow-500 transition-opacity duration-300 z-10",
+            style: { opacity: theme === "dark" ? 0 : 1 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          fa.FaMoon,
+          {
+            className: "absolute right-2 text-blue-400 transition-opacity duration-300 z-10",
+            style: { opacity: theme === "dark" ? 1 : 0 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classNames17__default.default(
+              "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__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 w-fit", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
-}
-var FormResponse_default = FormResponse;
-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]}` : "";
 };
-function YoutubeVideoPlayer({
-  videoUrl,
-  width = 750,
-  height = 422
-}) {
-  const embedUrl = getYoutubeEmbedUrl(videoUrl);
-  if (!embedUrl) {
-    return /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: "Invalid YouTube URL", variant: "danger" });
+
+// src/hooks/theme/useCurrentTheme.ts
+var useCurrentTheme = () => {
+  const context = React4.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useCurrentTheme must be used within a ThemeProvider");
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "relative w-full",
-      style: {
-        maxWidth: `${width}px`,
-        paddingTop: `${height / width * 100}%`
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "iframe",
-        {
-          src: embedUrl,
-          title: "YouTube video player",
-          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"
-        }
-      )
-    }
-  ) });
-}
-var YoutubeVideoPlayer_default = YoutubeVideoPlayer;
+  return context.theme;
+};
+var useCurrentTheme_default = useCurrentTheme;
 var COUNTRY_NAMES = {
   AF: "Afghanistan",
   AL: "Albania",
@@ -13868,108 +14213,6 @@ var worldMapTopoJSONContries100m = {
     translate: [-180, -85.60903777459771]
   }
 };
-var ThemeContext = React4.createContext(
-  void 0
-);
-var ThemeProvider = ({
-  defaultTheme = "dark",
-  children
-}) => {
-  const [theme, setTheme] = React4.useState(() => {
-    return localStorage.getItem("theme") || defaultTheme;
-  });
-  React4.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__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
-};
-var ThemeSwitch = () => {
-  const themeContext = React4.useContext(ThemeContext);
-  if (!themeContext) return null;
-  const { theme, toggleTheme } = themeContext;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          fa.FaSun,
-          {
-            className: "absolute left-2 text-yellow-500 transition-opacity duration-300 z-10",
-            style: { opacity: theme === "dark" ? 0 : 1 }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          fa.FaMoon,
-          {
-            className: "absolute right-2 text-blue-400 transition-opacity duration-300 z-10",
-            style: { opacity: theme === "dark" ? 1 : 0 }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: classNames28__default.default(
-              "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__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 w-fit", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
-    }
-  ) });
-};
-
-// src/hooks/theme/useCurrentTheme.ts
-var useCurrentTheme = () => {
-  const context = React4.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",
@@ -13977,9 +14220,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";
@@ -14023,60 +14267,52 @@ function WorldMap({
     setShowTooltip(true);
   };
   const hideTooltip = () => setShowTooltip(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: classNames28__default.default({
-        [`${styles}`]: true
-      }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold mb-4", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full aspect-[2/1]", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          reactSimpleMaps.ComposableMap,
-          {
-            projectionConfig: { scale: 140 },
-            width: 800,
-            height: 400,
-            style: { width: "100%", height: "100%" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactSimpleMaps.Geographies, { geography: worldMapTopoJSONContries100m, children: ({ geographies }) => geographies.map((geo) => /* @__PURE__ */ jsxRuntime.jsx(
-                reactSimpleMaps.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__ */ jsxRuntime.jsxs("div", { ...rest, className: cn(className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold mb-4", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full aspect-[2/1]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactSimpleMaps.ComposableMap,
+      {
+        projectionConfig: { scale: 140 },
+        width: 800,
+        height: 400,
+        style: { width: "100%", height: "100%" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactSimpleMaps.Geographies, { geography: worldMapTopoJSONContries100m, children: ({ geographies }) => geographies.map((geo) => /* @__PURE__ */ jsxRuntime.jsx(
+            reactSimpleMaps.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__ */ jsxRuntime.jsx(reactSimpleMaps.Marker, { coordinates: point.coordinates, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  framerMotion.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactSimpleMaps.Marker, { coordinates: point.coordinates, children: /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.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__ */ jsxRuntime.jsx(Tooltip4, { show: showTooltip, children: tooltipContent })
+  ] });
 }
 var sizes3 = {
   xs: "px-2 py-1 text-xs",
@@ -14120,7 +14356,7 @@ var Button = ({
       onClick,
       onMouseMove: handleMouseMove,
       disabled: disabled || loading,
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "relative z-0 overflow-hidden group": true,
         "flex flex-row items-center justify-center gap-2": true,
         [`${variants[variant]}`]: !ghost,
@@ -14166,7 +14402,7 @@ function InputResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -14181,7 +14417,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "label",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -14233,7 +14469,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "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,
@@ -14278,7 +14514,7 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default(
+        className: classNames17__default.default(
           "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),
@@ -14304,7 +14540,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames28__default.default({
+        styles: classNames17__default.default({
           "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
@@ -14330,7 +14566,7 @@ var InputList = ({ name, placeholder, shape }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name, children: ({ push, remove, move }) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "flex flex-col space-y-2 w-full bg-eui-primary-300/10": true,
           [`${shapes[resolvedShape]}`]: true
         }),
@@ -14361,7 +14597,7 @@ var InputList = ({ name, placeholder, shape }) => {
                             {
                               name: `${name}[${index}]`,
                               placeholder: `Item ${index + 1}`,
-                              className: classNames28__default.default(
+                              className: classNames17__default.default(
                                 "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"
@@ -14429,7 +14665,7 @@ var InputListGroup = ({
       values[name]?.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames28__default.default({
+          className: classNames17__default.default({
             "flex flex-col gap-2 bg-eui-primary-300/10 p-3": true,
             [`${shapes[resolvedShape]}`]: true
           }),
@@ -14441,7 +14677,7 @@ var InputListGroup = ({
                 {
                   name: `${name}[${groupIndex}].name`,
                   placeholder: `Group ${groupIndex + 1}`,
-                  className: classNames28__default.default(
+                  className: classNames17__default.default(
                     "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"
@@ -14483,7 +14719,7 @@ var InputListGroup = ({
                   {
                     ref: provided.innerRef,
                     ...provided.droppableProps,
-                    className: classNames28__default.default({
+                    className: classNames17__default.default({
                       "space-y-2 bg-eui-primary-300/10 p-2": true,
                       [`${shapes[resolvedShape]}`]: true
                     }),
@@ -14498,7 +14734,7 @@ var InputListGroup = ({
                             {
                               ref: provided2.innerRef,
                               ...provided2.draggableProps,
-                              className: classNames28__default.default({
+                              className: classNames17__default.default({
                                 "flex items-center gap-2 bg-eui-primary-300/10 p-2": true,
                                 [`${shapes[resolvedShape]}`]: true
                               }),
@@ -14509,7 +14745,7 @@ var InputListGroup = ({
                                   {
                                     name: `${name}[${groupIndex}].items[${itemIndex}]`,
                                     placeholder: `Item ${itemIndex + 1}`,
-                                    className: classNames28__default.default(
+                                    className: classNames17__default.default(
                                       "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"
@@ -14586,7 +14822,7 @@ var Checkbox = (props) => {
   const { placeholder } = props;
   const isMulti = isMultiCheckbox(props);
   const [field, meta, helpers] = isMulti ? formik.useField(props) : formik.useField(props);
-  const checkboxClass = classNames28__default.default(
+  const checkboxClass = classNames17__default.default(
     "appearance-none cursor-pointer transition-all duration-300",
     "w-5 h-5 min-w-[1.25rem] min-h-[1.25rem]",
     "flex-shrink-0",
@@ -14687,7 +14923,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "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,
@@ -14796,7 +15032,7 @@ var ImageInput = React4.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames28__default.default({
+              className: classNames17__default.default({
                 "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
@@ -14913,7 +15149,7 @@ function Radio({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames28__default.default({
+            className: classNames17__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -14926,7 +15162,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames28__default.default({
+                  className: classNames17__default.default({
                     "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
@@ -14938,7 +15174,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames28__default.default({
+                  className: classNames17__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -14981,7 +15217,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -14994,7 +15230,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames28__default.default({
+            className: classNames17__default.default({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -15038,7 +15274,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "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,
@@ -15090,7 +15326,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames28__default.default(
+            className: classNames17__default.default(
               "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",
@@ -15147,7 +15383,7 @@ function Tags({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames28__default.default(
+          className: classNames17__default.default(
             "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,
@@ -15195,7 +15431,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames28__default.default(
+          styles: classNames17__default.default(
             "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"
           )
@@ -15236,7 +15472,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames28__default.default({
+          className: classNames17__default.default({
             "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),
@@ -15250,7 +15486,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames28__default.default(
+          styles: classNames17__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -15281,7 +15517,7 @@ function ContentArea({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "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,
@@ -15297,7 +15533,7 @@ function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15310,7 +15546,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15329,7 +15565,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -15346,7 +15582,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -15365,7 +15601,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -15405,7 +15641,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "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)
@@ -15421,7 +15657,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "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
@@ -15509,7 +15745,7 @@ function MarkdownEditor({
   const [field, meta, helpers] = formik.useField(props);
   const { theme } = useTheme_default();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames28__default.default(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsxRuntime.jsx(
       editor.MDXEditor,
       {
         markdown: field.value,
@@ -15612,7 +15848,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
       "button",
       {
         onClick: () => scrollToHeading(heading.id),
-        className: classNames28__default.default(
+        className: classNames17__default.default(
           "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"
@@ -15768,7 +16004,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -15845,7 +16081,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames28__default.default({
+            className: classNames17__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -15859,7 +16095,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -15889,7 +16125,7 @@ var Drawer = ({
       {
         show: visibility,
         enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames28__default.default({
+        enterFrom: classNames17__default.default({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -15898,7 +16134,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: classNames28__default.default({
+        leaveTo: classNames17__default.default({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -15907,7 +16143,7 @@ var Drawer = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames28__default.default(
+            className: classNames17__default.default(
               "fixed shadow-lg z-50",
               {
                 "h-full w-[300px]": isHorizontal,
@@ -15939,7 +16175,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -15987,7 +16223,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -16000,7 +16236,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16041,7 +16277,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -16086,7 +16322,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "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,
@@ -16115,7 +16351,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16168,7 +16404,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16230,7 +16466,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "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,
@@ -16258,7 +16494,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsxRuntime.jsx(
             bs.BsChevronDown,
             {
-              className: classNames28__default.default({
+              className: classNames17__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -16271,7 +16507,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames17__default.default({
           "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
         }),
@@ -16301,7 +16537,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "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,
@@ -16330,7 +16566,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16370,7 +16606,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -16835,7 +17071,7 @@ function Modal({
         "div",
         {
           ref: modalRef,
-          className: classNames28__default.default({
+          className: classNames17__default.default({
             "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit": true,
             [`${shapes[resolvedShape]}`]: true,
             [`${styles}`]: styles
@@ -16846,7 +17082,7 @@ function Modal({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: classNames28__default.default({
+                  className: classNames17__default.default({
                     "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast": true,
                     "hover:cursor-pointer hover:bg-eui-dark-500": true
                   }),
@@ -16952,7 +17188,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames28__default.default({
+          className: classNames17__default.default({
             "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
@@ -17014,6 +17250,99 @@ function DocumentationPanel({ value, toc = true }) {
   ] }) });
 }
 var DocumentationPanel_default = DocumentationPanel;
+function SliderItem({
+  img,
+  onClick,
+  selected,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      onClick,
+      className: cn(
+        "flex-shrink-0 w-[160px] h-[90px] border-[3px] overflow-hidden brightness-50",
+        "hover:cursor-pointer hover:border-eui-secondary-600  hover:shadow-lg hover:shadow-[#167d0f]/50 hover:brightness-100",
+        selected ? "border-opacity-100 border-[#0b6b05] brightness-100" : "border-transparent",
+        "transition-all ease-in-out duration-500",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        CloudinaryImage_default,
+        {
+          publicId: img,
+          alt: "image",
+          className: "w-full h-full object-cover"
+        }
+      )
+    }
+  );
+}
+var SliderItem_default = SliderItem;
+function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
+  const [images, setImages] = React4.useState([
+    {
+      img: coverArt,
+      selected: true
+    }
+  ]);
+  React4.useEffect(() => {
+    setImages([
+      {
+        img: coverArt,
+        selected: true
+      }
+    ]);
+  }, [isSuccess]);
+  React4.useEffect(() => {
+    if (screenshots) {
+      const selectableScreenshots = [];
+      screenshots.forEach((item) => {
+        selectableScreenshots.push({
+          img: item,
+          selected: false
+        });
+      });
+      setImages((prev) => [...prev, ...selectableScreenshots]);
+    }
+  }, [isSuccess]);
+  const [displayImg, setDisplayImg] = React4.useState(coverArt);
+  React4.useEffect(() => {
+    setDisplayImg(coverArt);
+  }, [coverArt]);
+  const displayImageHandler = (itemIndex, img) => {
+    setDisplayImg(img);
+    const newArray = images.map((obj, i) => {
+      if (i === itemIndex) {
+        return { ...obj, selected: true };
+      }
+      return { ...obj, selected: false };
+    });
+    setImages(newArray);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full aspect-w-16 aspect-h-9" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      CloudinaryImage_default,
+      {
+        publicId: displayImg,
+        alt: "displayImg",
+        className: "aspect-w-16 aspect-h-9"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[130px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute pt-2 pb-4 w-full flex space-x-2 overflow-auto", children: images.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      SliderItem_default,
+      {
+        img: item.img,
+        onClick: () => displayImageHandler(index, item.img),
+        selected: item.selected
+      },
+      index
+    )) }) })
+  ] }) });
+}
+var Slider_default = Slider;
 function WorldMapCountryTable({
   title = "Country Breakdown",
   data
@@ -17110,7 +17439,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames28__default.default(
+      className: classNames17__default.default(
         "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",
@@ -17500,7 +17829,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         [`${styles}`]: styles
       }),
       children
@@ -17549,7 +17878,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames17__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -17622,6 +17951,7 @@ exports.Brand = Brand_default;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem_default;
 exports.Button = Button;
+exports.Caption = Caption;
 exports.Card = Card_default;
 exports.CardContent = CardContent_default;
 exports.CardFooter = CardFooter_default;
@@ -17630,14 +17960,15 @@ exports.Chapter = Chapter;
 exports.Checkbox = Checkbox_default;
 exports.Chip = Chip;
 exports.CloudinaryImage = CloudinaryImage_default;
-exports.CloudinaryProvider = CloudinaryProvider;
 exports.CloudinaryVideo = CloudinaryVideo_default;
+exports.Code = Code;
 exports.Content = Content;
 exports.ContentArea = ContentArea_default;
 exports.DataView = DataView;
 exports.DataViewTable = DataViewTable_default;
 exports.DateSelector = DateSelector_default;
 exports.DefaultLayout = DefaultLayout_default;
+exports.Display = Display;
 exports.DocumentationPanel = DocumentationPanel_default;
 exports.Drawer = Drawer;
 exports.DrawerToggler = DrawerToggler_default;
@@ -17678,7 +18009,9 @@ exports.InputLabel = InputLabel_default;
 exports.InputList = InputList;
 exports.InputListGroup = InputListGroup;
 exports.InputResponse = InputResponse_default;
+exports.Label = Label;
 exports.Layout = Layout;
+exports.Lead = Lead;
 exports.LineChart = LineChart_default;
 exports.Link = Link;
 exports.List = List_default;
@@ -17694,6 +18027,7 @@ exports.MenuItemTitle = MenuItemTitle;
 exports.Modal = Modal_default;
 exports.MotionSurface = MotionSurface_default;
 exports.MultiImageInput = MultiImageInput_default;
+exports.Overline = Overline;
 exports.Paragraph = Paragraph;
 exports.PieChart = PieChart_default;
 exports.PriceTag = PriceTag;
@@ -17739,11 +18073,12 @@ exports.UnderConstructionBanner = UnderConstructionBanner;
 exports.ValueBadge = ValueBadge_default;
 exports.WorldMap = WorldMap;
 exports.WorldMapCountryTable = WorldMapCountryTable;
-exports.YoutubeVideoPlayer = YoutubeVideoPlayer_default;
+exports.YoutubeVideoPlayer = YoutubeVideo_default;
 exports.cn = cn;
 exports.createForceLayout = createForceLayout;
 exports.createGridLayout = createGridLayout;
 exports.createTreeLayout = createTreeLayout;
+exports.enumValues = enumValues;
 exports.getCurrencySymbol = getCurrencySymbol;
 exports.getLayout = getLayout;
 exports.isMatch = isMatch;
@@ -17753,7 +18088,6 @@ exports.registerLayout = registerLayout;
 exports.resolveWithGlobal = resolveWithGlobal;
 exports.sendToast = sendToast;
 exports.useClickOutside = useClickOutside;
-exports.useCloudinaryConfig = useCloudinaryConfig;
 exports.useCurrentTheme = useCurrentTheme_default;
 exports.useDrawer = useDrawer_default;
 exports.useEUIConfig = useEUIConfig;