elseware-ui 2.29.0 → 2.29.2

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 classNames24 = 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 classNames24__default = /*#__PURE__*/_interopDefault(classNames24);
 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: classNames24__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: classNames24__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: classNames24__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: classNames24__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: classNames24__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: classNames24__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: classNames24__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: classNames24__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 })
@@ -1613,10 +1616,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];
@@ -1654,7 +1657,7 @@ var Chapter = ({
     "div",
     {
       onClick,
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${levels[level]}`]: level,
         [`${styles}`]: styles,
@@ -1685,7 +1688,7 @@ var Section = ({
     "div",
     {
       onClick,
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`${textVariants[variant]} opacity-80`]: variant,
         [`${levels2[level]}`]: level,
         [`${styles}`]: styles,
@@ -1716,7 +1719,7 @@ var Paragraph = ({
     "div",
     {
       onClick,
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${levels3[level]}`]: level,
         [`${styles}`]: styles,
@@ -1732,7 +1735,7 @@ var Quote = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "pl-4 py-1 border-l-2 border-l-gray-400 w-full": true,
         [`${styles}`]: styles
       }),
@@ -1859,15 +1862,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 +1883,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 +1926,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 +1941,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 +1949,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 +1967,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 +2083,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,
@@ -2230,7 +2174,7 @@ function Tag({ text, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: classNames28__default.default({
+      className: classNames24__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
       }),
@@ -2319,7 +2263,7 @@ var ValueBadge = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default(
+      className: classNames24__default.default(
         "px-2 py-1 rounded-md text-xs font-semibold w-fit eg-theme-transition",
         noBackground ? "bg-transparent" : style.bg,
         style.color,
@@ -2403,7 +2347,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: classNames24__default.default(styles), children })
       ] })
     }
   );
@@ -2412,7 +2356,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__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 +2365,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,7 +2467,7 @@ function FormResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
@@ -13918,7 +13875,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames28__default.default(
+            className: classNames24__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"
             )
@@ -14026,7 +13983,7 @@ function WorldMap({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`${styles}`]: true
       }),
       children: [
@@ -14120,7 +14077,7 @@ var Button = ({
       onClick,
       onMouseMove: handleMouseMove,
       disabled: disabled || loading,
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "relative z-0 overflow-hidden group": true,
         "flex flex-row items-center justify-center gap-2": true,
         [`${variants[variant]}`]: !ghost,
@@ -14166,7 +14123,7 @@ function InputResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -14181,7 +14138,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "label",
     {
-      className: classNames28__default.default({
+      className: classNames24__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 +14190,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames28__default.default({
+        className: classNames24__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 +14235,7 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default(
+        className: classNames24__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 +14261,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames28__default.default({
+        styles: classNames24__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 +14287,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: classNames24__default.default({
           "flex flex-col space-y-2 w-full bg-eui-primary-300/10": true,
           [`${shapes[resolvedShape]}`]: true
         }),
@@ -14361,7 +14318,7 @@ var InputList = ({ name, placeholder, shape }) => {
                             {
                               name: `${name}[${index}]`,
                               placeholder: `Item ${index + 1}`,
-                              className: classNames28__default.default(
+                              className: classNames24__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 +14386,7 @@ var InputListGroup = ({
       values[name]?.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames28__default.default({
+          className: classNames24__default.default({
             "flex flex-col gap-2 bg-eui-primary-300/10 p-3": true,
             [`${shapes[resolvedShape]}`]: true
           }),
@@ -14441,7 +14398,7 @@ var InputListGroup = ({
                 {
                   name: `${name}[${groupIndex}].name`,
                   placeholder: `Group ${groupIndex + 1}`,
-                  className: classNames28__default.default(
+                  className: classNames24__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 +14440,7 @@ var InputListGroup = ({
                   {
                     ref: provided.innerRef,
                     ...provided.droppableProps,
-                    className: classNames28__default.default({
+                    className: classNames24__default.default({
                       "space-y-2 bg-eui-primary-300/10 p-2": true,
                       [`${shapes[resolvedShape]}`]: true
                     }),
@@ -14498,7 +14455,7 @@ var InputListGroup = ({
                             {
                               ref: provided2.innerRef,
                               ...provided2.draggableProps,
-                              className: classNames28__default.default({
+                              className: classNames24__default.default({
                                 "flex items-center gap-2 bg-eui-primary-300/10 p-2": true,
                                 [`${shapes[resolvedShape]}`]: true
                               }),
@@ -14509,7 +14466,7 @@ var InputListGroup = ({
                                   {
                                     name: `${name}[${groupIndex}].items[${itemIndex}]`,
                                     placeholder: `Item ${itemIndex + 1}`,
-                                    className: classNames28__default.default(
+                                    className: classNames24__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 +14543,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 = classNames24__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 +14644,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames28__default.default({
+        className: classNames24__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 +14753,7 @@ var ImageInput = React4.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames28__default.default({
+              className: classNames24__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 +14870,7 @@ function Radio({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames28__default.default({
+            className: classNames24__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -14926,7 +14883,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames28__default.default({
+                  className: classNames24__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 +14895,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames28__default.default({
+                  className: classNames24__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -14981,7 +14938,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -14994,7 +14951,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames28__default.default({
+            className: classNames24__default.default({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -15038,7 +14995,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames28__default.default({
+        className: classNames24__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 +15047,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames28__default.default(
+            className: classNames24__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 +15104,7 @@ function Tags({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames28__default.default(
+          className: classNames24__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 +15152,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames28__default.default(
+          styles: classNames24__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 +15193,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames28__default.default({
+          className: classNames24__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 +15207,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames28__default.default(
+          styles: classNames24__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 +15238,7 @@ function ContentArea({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__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 +15254,7 @@ function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15310,7 +15267,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -15329,7 +15286,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -15346,7 +15303,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__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 +15322,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -15405,7 +15362,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__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 +15378,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__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 +15466,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: classNames24__default.default(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsxRuntime.jsx(
       editor.MDXEditor,
       {
         markdown: field.value,
@@ -15612,7 +15569,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
       "button",
       {
         onClick: () => scrollToHeading(heading.id),
-        className: classNames28__default.default(
+        className: classNames24__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 +15725,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -15845,7 +15802,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames28__default.default({
+            className: classNames24__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -15859,7 +15816,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -15889,7 +15846,7 @@ var Drawer = ({
       {
         show: visibility,
         enter: "transform transition duration-200 ease-out",
-        enterFrom: classNames28__default.default({
+        enterFrom: classNames24__default.default({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -15898,7 +15855,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: classNames24__default.default({
           "-translate-x-full": side === "left",
           "translate-x-full": side === "right",
           "-translate-y-full": side === "top",
@@ -15907,7 +15864,7 @@ var Drawer = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames28__default.default(
+            className: classNames24__default.default(
               "fixed shadow-lg z-50",
               {
                 "h-full w-[300px]": isHorizontal,
@@ -15939,7 +15896,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__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 +15944,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames24__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -16000,7 +15957,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16041,7 +15998,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames24__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -16086,7 +16043,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames28__default.default({
+      className: classNames24__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 +16072,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16168,7 +16125,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -16230,7 +16187,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames24__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 +16215,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsxRuntime.jsx(
             bs.BsChevronDown,
             {
-              className: classNames28__default.default({
+              className: classNames24__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -16271,7 +16228,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames28__default.default({
+        className: classNames24__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 +16258,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames28__default.default({
+      className: classNames24__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 +16287,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -16370,7 +16327,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -16835,7 +16792,7 @@ function Modal({
         "div",
         {
           ref: modalRef,
-          className: classNames28__default.default({
+          className: classNames24__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 +16803,7 @@ function Modal({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: classNames28__default.default({
+                  className: classNames24__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 +16909,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames28__default.default({
+          className: classNames24__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 +16971,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 +17160,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames28__default.default(
+      className: classNames24__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 +17550,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         [`${styles}`]: styles
       }),
       children
@@ -17549,7 +17599,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames28__default.default({
+      className: classNames24__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -17577,22 +17627,33 @@ function EUIDevLayout({
           shape: "roundedSquare"
         }
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(GenericLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(Layout, { children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx(CloudinaryProvider, { cloudName: "demo", children: /* @__PURE__ */ jsxRuntime.jsx(GenericLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(Layout, { children: [
         header,
         /* @__PURE__ */ jsxRuntime.jsx(Content, { styles: "pt-[60px]", children: /* @__PURE__ */ jsxRuntime.jsx(ContentArea_default, { enablePadding: true, children }) }),
         footer
-      ] }) })
+      ] }) }) })
     }
   );
 }
 var EUIDevLayout_default = EUIDevLayout;
-function ScrollToTop({ trigger, behavior = "smooth" }) {
+function ScrollToTop({
+  trigger,
+  behavior = "smooth",
+  target
+}) {
   React4.useEffect(() => {
+    if (target) {
+      target.scrollTo({
+        top: 0,
+        behavior
+      });
+      return;
+    }
     window.scrollTo({
       top: 0,
       behavior
     });
-  }, [trigger]);
+  }, [trigger, target]);
   return null;
 }
 var ScrollToTop_default = ScrollToTop;
@@ -17733,6 +17794,7 @@ exports.cn = cn;
 exports.createForceLayout = createForceLayout;
 exports.createGridLayout = createGridLayout;
 exports.createTreeLayout = createTreeLayout;
+exports.enumValues = enumValues;
 exports.getCurrencySymbol = getCurrencySymbol;
 exports.getLayout = getLayout;
 exports.isMatch = isMatch;