elseware-ui 3.0.2 → 3.0.4

package/dist/index.mjs

@@ -1,13 +1,13 @@
-import React26, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useRef, useMemo, useCallback, useContext, Children, useId, createElement, isValidElement } from 'react';
+import React26, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useRef, useMemo, useContext, useCallback, Children, useId, createElement, isValidElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { twMerge } from 'tailwind-merge';
 import { AiOutlineLoading } from 'react-icons/ai/index.js';
 import { useField, ErrorMessage, Field, useFormikContext, FieldArray, Formik, Form as Form$1 } from 'formik';
 import { FaGripVertical, FaTrash, FaPlus, FaTimes, FaBars, FaSun, FaMoon, FaEyeSlash, FaEye, FaCircle } from 'react-icons/fa/index.js';
-import classNames72 from 'classnames';
+import classNames73 from 'classnames';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { Image, CloudinaryContext as CloudinaryContext$1 } from 'cloudinary-react';
-import { MdUpload, MdOutlineDone, MdOutlineRemoveCircleOutline } from 'react-icons/md/index.js';
+import { MdUpload, MdOutlineDone, MdOutlineRemoveCircleOutline, MdDragIndicator, MdKeyboardArrowLeft, MdKeyboardArrowRight, MdOutlineDelete } from 'react-icons/md/index.js';
 import { BsStarFill, BsStar, BsChevronDown, BsStarHalf, BsFillDiamondFill } from 'react-icons/bs/index.js';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line, AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell, ScatterChart, Scatter } from 'recharts';
@@ -4718,7 +4718,7 @@ var init_python = __esm({
 });
 
 // node_modules/refractor/lang/jsx.js
-function jsx218(Prism2) {
+function jsx217(Prism2) {
   Prism2.register(javascript);
   Prism2.register(markup);
   (function(Prism3) {
@@ -4851,14 +4851,14 @@ var init_jsx = __esm({
   "node_modules/refractor/lang/jsx.js"() {
     init_javascript();
     init_markup();
-    jsx218.displayName = "jsx";
-    jsx218.aliases = [];
+    jsx217.displayName = "jsx";
+    jsx217.aliases = [];
   }
 });
 
 // node_modules/refractor/lang/tsx.js
 function tsx(Prism2) {
-  Prism2.register(jsx218);
+  Prism2.register(jsx217);
   Prism2.register(typescript);
   (function(Prism3) {
     var typescript2 = Prism3.util.clone(Prism3.languages.typescript);
@@ -6453,7 +6453,7 @@ var Backdrop = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         "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
       }),
@@ -7043,7 +7043,7 @@ function renderTransitionChild(children3, className) {
   }
   const element7 = child;
   return React26.cloneElement(element7, {
-    className: classNames72(element7.props.className, className)
+    className: classNames73(element7.props.className, className)
   });
 }
 function TransitionBase({
@@ -7063,7 +7063,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames72(
+  const transitionClassName = classNames73(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -7416,7 +7416,7 @@ var InputFile = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames72(
+        className: classNames73(
           "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),
@@ -7442,7 +7442,7 @@ var InputFile = ({
       InputLabel,
       {
         text: placeholder,
-        className: classNames72({
+        className: classNames73({
           "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
@@ -7495,7 +7495,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
     /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(FieldArray, { name: name2, children: ({ push: push2, remove: remove2, move }) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames72(
+        className: classNames73(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -7524,7 +7524,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames72(
+                          className: classNames73(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -7535,7 +7535,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames72(
+                                className: classNames73(
                                   "peer h-[50px] w-full border bg-eui-primary-300/10 px-3 pb-2 pt-5 text-md placeholder-transparent placeholder-shown:p-3 focus:outline-none eui-text-md",
                                   shapes[resolvedShape],
                                   hasItemError ? "border-eui-danger-500" : "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -7631,7 +7631,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames72(
+            className: classNames73(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -7643,7 +7643,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames72(
+                    className: classNames73(
                       "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                       shapes[resolvedShape],
                       "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -7674,7 +7674,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames72(
+                      className: classNames73(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -7694,7 +7694,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames72(
+                                  className: classNames73(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -7705,7 +7705,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames72(
+                                        className: classNames73(
                                           "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                                           shapes[resolvedShape],
                                           "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -7778,6 +7778,17 @@ var InputListGroup = ({
 function isMultiCheckbox(props) {
   return Array.isArray(props.options);
 }
+function resolveCheckboxColumns(columns) {
+  return columns ?? 1;
+}
+function chunkCheckboxOptions(options, columns) {
+  const resolvedColumns = resolveCheckboxColumns(columns);
+  const chunkSize = Math.ceil(options.length / resolvedColumns);
+  return Array.from(
+    { length: resolvedColumns },
+    (_2, columnIndex) => options.slice(columnIndex * chunkSize, (columnIndex + 1) * chunkSize)
+  ).filter((columnOptions) => columnOptions.length > 0);
+}
 function useResolvedCheckboxConfig({
   label,
   placeholder,
@@ -7936,6 +7947,7 @@ function Checkbox(checkboxProps) {
   const activeFieldName = isMulti ? multiField.name : singleField.name;
   const activeMeta = isMulti ? multiMeta : singleMeta;
   const multiProps = isMultiCheckbox(checkboxProps) ? checkboxProps : null;
+  const optionColumns = multiProps ? chunkCheckboxOptions(multiProps.options, multiProps.columns) : [];
   const singleChecked = singleField.value;
   return /* @__PURE__ */ jsxs("div", { className: cn(checkboxGroupClassName, groupClassName), children: [
     !isMulti && /* @__PURE__ */ jsxs("div", { className: cn(checkboxOptionRowClassName, optionClassName), children: [
@@ -7979,67 +7991,74 @@ function Checkbox(checkboxProps) {
         }
       ) : null
     ] }),
-    isMulti && multiProps?.options.map((option) => {
-      const values = multiField.value ?? [];
-      const checked = values.includes(option.value);
-      const optionDisabled = disabled || option.disabled === true;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(checkboxOptionRowClassName, optionClassName),
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: option.value,
-                  name: multiField.name,
-                  type: "checkbox",
-                  checked,
-                  disabled: optionDisabled,
-                  onBlur: multiField.onBlur,
-                  onChange: () => {
-                    multiHelpers.setValue(
-                      checked ? values.filter((value) => value !== option.value) : [...values, option.value]
-                    );
-                  },
-                  className: getIndicatorClassName({
-                    checked,
-                    className,
-                    disabled: optionDisabled,
-                    indicatorClassName,
-                    checkedIndicatorClassName,
-                    resolvedShape,
-                    variantCheckedClassName: variantStyles.checkedClassName
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tick,
-                {
-                  checked,
-                  checkedIconClassName,
-                  iconClassName: variantStyles.iconClassName
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                htmlFor: option.value,
-                className: cn(
-                  checkboxLabelClassName,
-                  optionDisabled && "cursor-not-allowed opacity-60",
-                  labelClassName
-                ),
-                children: option.label
-              }
-            )
-          ]
-        },
-        option.value
-      );
-    }),
+    isMulti && multiProps ? /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row gap-6", children: optionColumns.map((columnOptions, columnIndex) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex min-w-0 flex-1 flex-col gap-2",
+        children: columnOptions.map((option) => {
+          const values = multiField.value ?? [];
+          const checked = values.includes(option.value);
+          const optionDisabled = disabled || option.disabled === true;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(checkboxOptionRowClassName, optionClassName),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: option.value,
+                      name: multiField.name,
+                      type: "checkbox",
+                      checked,
+                      disabled: optionDisabled,
+                      onBlur: multiField.onBlur,
+                      onChange: () => {
+                        multiHelpers.setValue(
+                          checked ? values.filter((value) => value !== option.value) : [...values, option.value]
+                        );
+                      },
+                      className: getIndicatorClassName({
+                        checked,
+                        className,
+                        disabled: optionDisabled,
+                        indicatorClassName,
+                        checkedIndicatorClassName,
+                        resolvedShape,
+                        variantCheckedClassName: variantStyles.checkedClassName
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tick,
+                    {
+                      checked,
+                      checkedIconClassName,
+                      iconClassName: variantStyles.iconClassName
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: option.value,
+                    className: cn(
+                      checkboxLabelClassName,
+                      optionDisabled && "cursor-not-allowed opacity-60",
+                      labelClassName
+                    ),
+                    children: option.label
+                  }
+                )
+              ]
+            },
+            option.value
+          );
+        })
+      },
+      `${multiField.name}-column-${columnIndex}`
+    )) }) : null,
     /* @__PURE__ */ jsx(
       InputResponse,
       {
@@ -8074,7 +8093,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames72({
+        className: classNames73({
           "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,
@@ -8237,23 +8256,47 @@ function FormResponse({
   const styles = resolveFormResponseStyles({ shape, size, variant });
   return /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: Boolean(text10), children: /* @__PURE__ */ jsx("div", { className: cn(styles.rootClassName, className), children: /* @__PURE__ */ jsx("span", { className: cn(styles.textClassName, textClassName), children: text10 }) }) });
 }
-function ImageView({ imageUrl, secure = true, alt = "image" }) {
+var CloudinaryContext = createContext(null);
+var CloudinaryProvider = ({
+  cloudName,
+  uploadPreset,
+  children: children3
+}) => /* @__PURE__ */ jsx(CloudinaryContext.Provider, { value: { cloudName, uploadPreset }, children: children3 });
+var useCloudinaryConfig = () => {
+  const ctx = useContext(CloudinaryContext);
+  if (!ctx) {
+    throw new Error(
+      "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
+    );
+  }
+  return ctx;
+};
+
+// src/components/data-entry/image-input/base/ImageInput.config.ts
+var defaultImageInputTitle = "Upload Image";
+var defaultImageInputUploadDir = "eg-frontend-admin-temp";
+var imageInputPlaceholderPublicId = "public/placeholders/placeholder-dark_uwuxct";
+function ImageView({
+  imageUrl,
+  secure = true,
+  alt = "image"
+}) {
+  const { cloudName } = useCloudinaryConfig();
   return /* @__PURE__ */ jsx("div", { className: "h-[200px] w-[300px]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-hidden bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(
     Image,
     {
-      cloudName: process.env.REACT_APP_CLOUDINARY_CLOUD_NAME || "",
-      publicId: imageUrl ? imageUrl : "public/placeholders/placeholder-dark_uwuxct",
+      cloudName,
+      publicId: imageUrl ? imageUrl : imageInputPlaceholderPublicId,
       secure,
       alt,
       className: "w-full h-full object-cover"
     }
   ) }) });
 }
-var ImageView_default = ImageView;
 var ImageInput = forwardRef(
   ({
-    title = "Upload Image",
-    uploadDir = "eg-frontend-admin-temp",
+    title = defaultImageInputTitle,
+    uploadDir = defaultImageInputUploadDir,
     onValueChanged = () => {
     },
     disableSetValue = false,
@@ -8262,6 +8305,7 @@ var ImageInput = forwardRef(
     const [field, meta, helpers] = useField(props);
     const { value: imageUrl } = field;
     const { setValue } = helpers;
+    const { cloudName, uploadPreset = "" } = useCloudinaryConfig();
     const [image3, setImage] = useState(null);
     const [url, setUrl] = useState(imageUrl);
     const [loading, setLoading] = useState(false);
@@ -8271,8 +8315,6 @@ var ImageInput = forwardRef(
       setLoading(true);
       const data = new FormData();
       data.append("file", image3);
-      const uploadPreset = process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET || "";
-      const cloudName = process.env.REACT_APP_CLOUDINARY_CLOUD_NAME || "";
       data.append("upload_preset", uploadPreset);
       data.append("cloud_name", cloudName);
       data.append("folder", uploadDir);
@@ -8289,7 +8331,7 @@ var ImageInput = forwardRef(
         if (!disableSetValue) setValue(res.public_id);
         onValueChanged(res.public_id);
         setLoading(false);
-      } catch (error) {
+      } catch {
         setLoading(false);
       }
     };
@@ -8333,7 +8375,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsxs(
             "label",
             {
-              className: classNames72({
+              className: classNames73({
                 "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
@@ -8358,7 +8400,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsx("div", { className: "h-[200px] w-[300px] bg-black opacity-50" }),
           /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(AiOutlineLoading, { className: "animate-spin" }) })
         ] }),
-        !loading && url && /* @__PURE__ */ jsx(ImageView_default, { imageUrl: url, alt: url ? url : "image" }),
+        !loading && url && /* @__PURE__ */ jsx(ImageView, { imageUrl: url, alt: url ? url : "image" }),
         (preview || url) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-3xl", children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -8390,29 +8432,230 @@ var ImageInput = forwardRef(
     ] });
   }
 );
-var ImageInput_default = ImageInput;
+var ImageInput_web_default = ImageInput;
+
+// src/components/data-entry/multi-image-input/base/MultiImageInput.config.ts
+var defaultMultiImageInputTitle = "Upload Images";
+var defaultMultiImageInputUploadDir = "eg-frontend-admin-temp";
+function areImageListsEqual(current, next2) {
+  return current.length === next2.length && current.every((imageUrl, index3) => imageUrl === next2[index3]);
+}
 function MultiImageInput({
-  title = "Upload Images",
-  uploadDir = "eg-frontend-admin-temp",
+  title = defaultMultiImageInputTitle,
+  uploadDir = defaultMultiImageInputUploadDir,
   ...props
 }) {
   const [field, meta, helpers] = useField(props);
-  const { value: imageUrls } = field;
   const { setValue } = helpers;
+  const { cloudName, uploadPreset = "" } = useCloudinaryConfig();
+  const fieldImageUrls = useMemo(
+    () => Array.isArray(field.value) ? field.value : [],
+    [field.value]
+  );
+  const [imageUrls, setImageUrls] = useState(fieldImageUrls);
   const imageInputRef = useRef(null);
+  const replaceInputRefs = useRef({});
+  const [draggedIndex, setDraggedIndex] = useState(null);
+  const [replacingIndex, setReplacingIndex] = useState(null);
+  const isOrganizerBusy = replacingIndex !== null;
+  useEffect(() => {
+    setImageUrls(
+      (currentImageUrls) => areImageListsEqual(currentImageUrls, fieldImageUrls) ? currentImageUrls : fieldImageUrls
+    );
+  }, [fieldImageUrls]);
+  const commitImageUrls = (nextImageUrls) => {
+    setImageUrls(nextImageUrls);
+    void setValue(nextImageUrls);
+  };
   const onValueChanged = (url) => {
-    setValue([...imageUrls, url]);
+    if (!url) {
+      return;
+    }
+    commitImageUrls([...imageUrls, url]);
     if (imageInputRef.current) {
       imageInputRef.current.handleResetClick();
     }
   };
-  useEffect(() => {
-  }, [imageUrls]);
+  const uploadImage = async (file) => {
+    const data = new FormData();
+    data.append("file", file);
+    data.append("upload_preset", uploadPreset);
+    data.append("cloud_name", cloudName);
+    data.append("folder", uploadDir);
+    const response = await fetch(
+      `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`,
+      {
+        method: "POST",
+        body: data
+      }
+    );
+    const res = await response.json();
+    if (!res.public_id) {
+      throw new Error("Cloudinary upload failed");
+    }
+    return res.public_id;
+  };
+  const removeImage = (index3) => {
+    commitImageUrls(
+      imageUrls.filter((_2, imageIndex) => imageIndex !== index3)
+    );
+  };
+  const moveImage = (fromIndex, toIndex) => {
+    if (toIndex < 0 || toIndex >= imageUrls.length || fromIndex === toIndex || isOrganizerBusy) {
+      return;
+    }
+    const nextImageUrls = [...imageUrls];
+    const [movedImage] = nextImageUrls.splice(fromIndex, 1);
+    if (!movedImage) {
+      return;
+    }
+    nextImageUrls.splice(toIndex, 0, movedImage);
+    commitImageUrls(nextImageUrls);
+  };
+  const handleReplaceImage = async (index3, event) => {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    if (!file || isOrganizerBusy) {
+      return;
+    }
+    setReplacingIndex(index3);
+    try {
+      const publicId = await uploadImage(file);
+      const nextImageUrls = [...imageUrls];
+      nextImageUrls[index3] = publicId;
+      commitImageUrls(nextImageUrls);
+    } catch {
+    } finally {
+      setReplacingIndex(null);
+      input.value = "";
+    }
+  };
+  const handleDragStart = (index3) => {
+    if (isOrganizerBusy) {
+      return;
+    }
+    setDraggedIndex(index3);
+  };
+  const handleDragOver = (event) => {
+    if (!isOrganizerBusy) {
+      event.preventDefault();
+    }
+  };
+  const handleDrop = (index3) => {
+    if (draggedIndex === null) {
+      return;
+    }
+    moveImage(draggedIndex, index3);
+    setDraggedIndex(null);
+  };
+  const openReplacePicker = (index3) => {
+    replaceInputRefs.current[index3]?.click();
+  };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-row flex-wrap gap-5 w-ful", children: [
-      imageUrls.map((url, index3) => /* @__PURE__ */ jsx(ImageView_default, { imageUrl: url }, index3)),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row flex-wrap gap-5 w-full", children: [
+      imageUrls.map((url, index3) => {
+        const isReplacing = replacingIndex === index3;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            draggable: !isOrganizerBusy,
+            onDragStart: () => handleDragStart(index3),
+            onDragOver: handleDragOver,
+            onDrop: () => handleDrop(index3),
+            onDragEnd: () => setDraggedIndex(null),
+            className: classNames73(
+              "relative h-[200px] w-[300px] overflow-hidden bg-gray-900",
+              "transition-all duration-150",
+              draggedIndex === index3 && "opacity-60",
+              !isOrganizerBusy && "cursor-grab active:cursor-grabbing"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ImageView, { imageUrl: url }),
+              /* @__PURE__ */ jsxs("div", { className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded bg-black/60 px-2 py-1 text-xs text-white", children: [
+                /* @__PURE__ */ jsx(MdDragIndicator, {}),
+                index3 + 1
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  Button_web_default,
+                  {
+                    title: "Move image left",
+                    accessibilityLabel: "Move image left",
+                    disabled: index3 === 0 || isOrganizerBusy,
+                    glow: false,
+                    icon: /* @__PURE__ */ jsx(MdKeyboardArrowLeft, {}),
+                    onPress: () => moveImage(index3, index3 - 1),
+                    size: "xs",
+                    className: "h-8 w-8 bg-black/60 p-0 text-xl text-white hover:bg-black/80 disabled:opacity-40"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button_web_default,
+                  {
+                    title: "Move image right",
+                    accessibilityLabel: "Move image right",
+                    disabled: index3 === imageUrls.length - 1 || isOrganizerBusy,
+                    glow: false,
+                    icon: /* @__PURE__ */ jsx(MdKeyboardArrowRight, {}),
+                    onPress: () => moveImage(index3, index3 + 1),
+                    size: "xs",
+                    className: "h-8 w-8 bg-black/60 p-0 text-xl text-white hover:bg-black/80 disabled:opacity-40"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "absolute bottom-2 left-2 right-2 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: (input) => {
+                      replaceInputRefs.current[index3] = input;
+                    },
+                    type: "file",
+                    className: "hidden",
+                    accept: "image/*",
+                    disabled: isOrganizerBusy,
+                    onChange: (event) => void handleReplaceImage(index3, event)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button_web_default,
+                  {
+                    block: true,
+                    appearance: "solid",
+                    title: "Change image",
+                    accessibilityLabel: "Change image",
+                    disabled: isOrganizerBusy,
+                    glow: false,
+                    icon: /* @__PURE__ */ jsx(MdUpload, {}),
+                    onPress: () => openReplacePicker(index3),
+                    size: "sm",
+                    text: "Change",
+                    variant: "success"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button_web_default,
+                  {
+                    appearance: "solid",
+                    title: "Delete image",
+                    accessibilityLabel: "Delete image",
+                    disabled: isOrganizerBusy,
+                    glow: false,
+                    icon: /* @__PURE__ */ jsx(MdOutlineDelete, {}),
+                    onPress: () => removeImage(index3),
+                    size: "sm",
+                    variant: "danger"
+                  }
+                )
+              ] }),
+              isReplacing && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 text-2xl text-white", children: /* @__PURE__ */ jsx(AiOutlineLoading, { className: "animate-spin" }) })
+            ]
+          },
+          `${url}-${index3}`
+        );
+      }),
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        ImageInput_default,
+        ImageInput_web_default,
         {
           ref: imageInputRef,
           name: "new_img",
@@ -8434,7 +8677,7 @@ function MultiImageInput({
     )
   ] });
 }
-var MultiImageInput_default = MultiImageInput;
+var MultiImageInput_web_default = MultiImageInput;
 function Radio({
   placeholder,
   options,
@@ -8450,7 +8693,7 @@ function Radio({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames72({
+            className: classNames73({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -8463,7 +8706,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames72({
+                  className: classNames73({
                     "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
@@ -8475,7 +8718,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames72({
+                  className: classNames73({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -8518,7 +8761,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -8531,7 +8774,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames72({
+            className: classNames73({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -8575,7 +8818,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames72({
+        className: classNames73({
           "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,
@@ -8627,7 +8870,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames72(
+            className: classNames73(
               "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",
@@ -8684,7 +8927,7 @@ function Tags({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames72(
+          className: classNames73(
             "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,
@@ -8732,7 +8975,7 @@ function Tags({
         InputLabel,
         {
           text: placeholder,
-          className: classNames72(
+          className: classNames73(
             "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"
           )
@@ -8773,7 +9016,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames72({
+          className: classNames73({
             "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),
@@ -8787,7 +9030,7 @@ function TextArea({
         InputLabel,
         {
           text: placeholder,
-          className: classNames72(
+          className: classNames73(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -8821,7 +9064,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames72({
+      className: classNames73({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -8898,7 +9141,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classNames72({
+            className: classNames73({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -8912,7 +9155,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -8956,7 +9199,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames72(
+        className: classNames73(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -8967,7 +9210,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames72(
+        className: classNames73(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -8996,7 +9239,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -9044,7 +9287,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames72({
+        className: classNames73({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -9057,7 +9300,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -9098,7 +9341,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames72({
+        className: classNames73({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -9143,7 +9386,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames72({
+      className: classNames73({
         "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,
@@ -9172,7 +9415,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9225,7 +9468,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -9287,7 +9530,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames72({
+        className: classNames73({
           "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,
@@ -9315,7 +9558,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsx(
             BsChevronDown,
             {
-              className: classNames72({
+              className: classNames73({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -9328,7 +9571,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames72({
+        className: classNames73({
           "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
         }),
@@ -9358,7 +9601,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames72({
+      className: classNames73({
         "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,
@@ -9387,7 +9630,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9427,7 +9670,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames72({
+      className: classNames73({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -12619,7 +12862,7 @@ function Accordion({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames72(
+        className: classNames73(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -12640,7 +12883,7 @@ function Accordion({
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames72("text-xl transition-transform duration-300", {
+                  className: classNames73("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -12654,7 +12897,7 @@ function Accordion({
     /* @__PURE__ */ jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames72(
+        className: classNames73(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -12711,7 +12954,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -12727,14 +12970,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children: children3, className }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames72("p-6 text-gray-300 text-sm", className), children: children3 });
+  return /* @__PURE__ */ jsx("div", { className: classNames73("p-6 text-gray-300 text-sm", className), children: children3 });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children: children3, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -12776,7 +13019,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72("absolute inset-0"),
+      className: classNames73("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -12922,7 +13165,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxs("div", { className: classNames72("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames73("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsx("div", { className: "relative z-10", children: children3 })
@@ -16304,20 +16547,6 @@ var Graph = ({
     }
   );
 };
-var CloudinaryContext = createContext(null);
-var CloudinaryProvider = ({
-  cloudName,
-  children: children3
-}) => /* @__PURE__ */ jsx(CloudinaryContext.Provider, { value: { cloudName }, children: children3 });
-var useCloudinaryConfig = () => {
-  const ctx = useContext(CloudinaryContext);
-  if (!ctx) {
-    throw new Error(
-      "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
-    );
-  }
-  return ctx;
-};
 var DEFAULT_PUBLIC_CLOUD = "demo";
 var CloudinaryImage2 = ({
   publicId = "sample",
@@ -18007,7 +18236,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames72(
+            className: classNames73(
               "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"
             )
@@ -29776,7 +30005,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames72(
+      className: classNames73(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -29788,7 +30017,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames72(
+              className: classNames73(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -30180,7 +30409,7 @@ var ContentArea = forwardRef(
       "div",
       {
         ref,
-        className: classNames72({
+        className: classNames73({
           "min-h-screen h-full w-full transition-all duration-[200ms]": true,
           "py-3 px-5": !enablePadding,
           "py-3 px-5 lg:px-[150px]": enablePadding,
@@ -30197,7 +30426,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -30210,7 +30439,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -30229,7 +30458,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -30246,7 +30475,7 @@ var Layout = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -30268,7 +30497,7 @@ var Header = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -30303,7 +30532,7 @@ var Content = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         "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)
@@ -30319,7 +30548,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         "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
@@ -30507,7 +30736,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames72({
+          className: classNames73({
             "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
@@ -31423,7 +31652,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxs(
     "section",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -31437,7 +31666,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsx(
           "main",
           {
-            className: classNames72(
+            className: classNames73(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -31445,7 +31674,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: classNames72(
+                className: classNames73(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -31458,7 +31687,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsx(
           "aside",
           {
-            className: classNames72(
+            className: classNames73(
               "eui-documentation-panel-toc",
               "hidden min-w-0 border-l border-gray-200 bg-white lg:block",
               "dark:border-gray-800 dark:bg-gray-950",
@@ -31467,7 +31696,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: classNames72(
+                className: classNames73(
                   "documentation-panel-scrollbar h-full overflow-y-auto px-5 py-8"
                 ),
                 children: /* @__PURE__ */ jsx("div", { className: "sticky top-0", children: /* @__PURE__ */ jsx(MarkdownTOC_default, {}) })
@@ -31743,7 +31972,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames72(
+      className: classNames73(
         "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",
@@ -34445,11 +34674,11 @@ function addChildren(props, children3) {
     }
   }
 }
-function productionCreate(_2, jsx257, jsxs129) {
+function productionCreate(_2, jsx256, jsxs129) {
   return create3;
   function create3(_3, type2, props, key) {
     const isStaticChildren = Array.isArray(props.children);
-    const fn = isStaticChildren ? jsxs129 : jsx257;
+    const fn = isStaticChildren ? jsxs129 : jsx256;
     return key ? fn(type2, props, key) : fn(type2, props);
   }
 }
@@ -54480,7 +54709,7 @@ function MarkdownHeading({
       id: id2,
       level: typographyLevel,
       bold: true,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-heading group relative scroll-mt-24 font-bold leading-tight text-gray-900 dark:text-gray-100",
         HEADING_STYLES[level],
         className
@@ -54643,18 +54872,18 @@ function powerSetPermutations(arr) {
   }
 }
 var classNameCombinations = {};
-function getClassNameCombinations(classNames76) {
-  if (classNames76.length === 0 || classNames76.length === 1) return classNames76;
-  var key = classNames76.join(".");
+function getClassNameCombinations(classNames77) {
+  if (classNames77.length === 0 || classNames77.length === 1) return classNames77;
+  var key = classNames77.join(".");
   if (!classNameCombinations[key]) {
-    classNameCombinations[key] = powerSetPermutations(classNames76);
+    classNameCombinations[key] = powerSetPermutations(classNames77);
   }
   return classNameCombinations[key];
 }
-function createStyleObject(classNames76) {
+function createStyleObject(classNames77) {
   var elementStyle = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   var stylesheet = arguments.length > 2 ? arguments[2] : void 0;
-  var nonTokenClassNames = classNames76.filter(function(className) {
+  var nonTokenClassNames = classNames77.filter(function(className) {
     return className !== "token";
   });
   var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
@@ -54662,8 +54891,8 @@ function createStyleObject(classNames76) {
     return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
   }, elementStyle);
 }
-function createClassNameString(classNames76) {
-  return classNames76.join(" ");
+function createClassNameString(classNames77) {
+  return classNames77.join(" ");
 }
 function createChildren2(stylesheet, useInlineStyles) {
   var childrenCount = 0;
@@ -54836,8 +55065,8 @@ function flattenCodeTree(tree) {
       }));
     } else if (node2.children) {
       var _node$properties;
-      var classNames76 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
-      flattenCodeTree(node2.children, classNames76).forEach(function(i2) {
+      var classNames77 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
+      flattenCodeTree(node2.children, classNames77).forEach(function(i2) {
         return newTree.push(i2);
       });
     }
@@ -55368,7 +55597,7 @@ var json_default = json;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js
 init_jsx();
-var jsx_default = jsx218;
+var jsx_default = jsx217;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/markup.js
 init_markup();
@@ -55501,7 +55730,7 @@ function MarkdownCodeBlock({
     "div",
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
         className
       ),
@@ -55572,7 +55801,7 @@ function MarkdownInlineCode({
     Code,
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-inline-code whitespace-break-spaces rounded-md border border-gray-300/70 bg-gray-200/60 px-1.5 py-0.5 font-mono text-[0.875em] font-medium text-gray-900 dark:border-gray-600/70 dark:bg-gray-700/50 dark:text-gray-200",
         className
       ),
@@ -55613,7 +55842,7 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-link font-medium text-blue-600 underline underline-offset-4 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
         className
       ),
@@ -55648,7 +55877,7 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
         className
       )
@@ -55665,7 +55894,7 @@ function MarkdownTable({
     TableElement,
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-table w-full border-collapse text-[0.925rem]",
         className
       ),
@@ -55682,7 +55911,7 @@ function MarkdownTableCell({
     TableCell,
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-table-cell border-b border-r border-gray-200 p-3 text-left align-top last:border-r-0 dark:border-gray-700",
         className
       ),
@@ -55699,7 +55928,7 @@ function MarkdownTableHeaderCell({
     TableHeaderCell,
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-table-header-cell border-b border-r border-gray-200 p-3 text-left align-top font-bold text-gray-900 last:border-r-0 dark:border-gray-700 dark:text-gray-100",
         className
       ),
@@ -55715,7 +55944,7 @@ function MarkdownTableHead({
     TableHead,
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
         className
       )
@@ -55730,7 +55959,7 @@ function MarkdownTableBody({
     TableBody,
     {
       ...props,
-      className: classNames72("eui-markdown-table-body", className)
+      className: classNames73("eui-markdown-table-body", className)
     }
   );
 }
@@ -55742,7 +55971,7 @@ function MarkdownTableRow({
     TableRow,
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
         className
       )
@@ -55760,7 +55989,7 @@ function MarkdownBlockquote({
     {
       ...props,
       as: "blockquote",
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-blockquote my-6 border-l-4 border-gray-300 bg-transparent px-4 py-0 text-gray-600 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 dark:border-gray-700 dark:text-gray-400",
         className
       ),
@@ -55779,7 +56008,7 @@ function MarkdownParagraph({
     {
       ...props,
       level: 1,
-      className: classNames72("eui-markdown-paragraph my-4", className),
+      className: classNames73("eui-markdown-paragraph my-4", className),
       children: /* @__PURE__ */ jsx(Fragment, { children: children3 })
     }
   );
@@ -55790,7 +56019,7 @@ function MarkdownStrong({ className, ...props }) {
     "strong",
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55803,7 +56032,7 @@ function MarkdownEmphasis({ className, ...props }) {
     "em",
     {
       ...props,
-      className: classNames72("eui-markdown-emphasis italic", className)
+      className: classNames73("eui-markdown-emphasis italic", className)
     }
   );
 }
@@ -55816,7 +56045,7 @@ function MarkdownStrikethrough({
     "del",
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
         className
       )
@@ -55877,7 +56106,7 @@ function MarkdownTaskCheckbox({
     "input",
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
         className
       )
@@ -55893,7 +56122,7 @@ function MarkdownThematicBreak({
     "hr",
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
         className
       )
@@ -55910,7 +56139,7 @@ function MarkdownDetails({ className, ...props }) {
     "details",
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-details my-4 rounded-md border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-900",
         className
       )
@@ -55922,7 +56151,7 @@ function MarkdownSummary({ className, ...props }) {
     "summary",
     {
       ...props,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55934,7 +56163,7 @@ function MarkdownFigure({ className, ...props }) {
     "figure",
     {
       ...props,
-      className: classNames72("eui-markdown-figure my-6", className)
+      className: classNames73("eui-markdown-figure my-6", className)
     }
   );
 }
@@ -55946,7 +56175,7 @@ function MarkdownFigcaption({
   return /* @__PURE__ */ jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsx(
     Caption,
     {
-      className: classNames72(
+      className: classNames73(
         "text-gray-500 opacity-100 dark:text-gray-400",
         className
       ),
@@ -56345,14 +56574,14 @@ function MarkdownRenderer({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown markdown-body break-words bg-transparent text-[0.95rem] leading-7 text-gray-800 dark:text-gray-300",
         className
       ),
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames72(
+          className: classNames73(
             "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
             contentClassName
           ),
@@ -56430,11 +56659,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-toc-item",
         "block w-full text-left text-sm transition-all ease-in-out duration-150",
         "hover:text-primary",
-        active ? classNames72("text-primary font-semibold underline", activeClassName) : classNames72("text-gray-500 dark:text-gray-400", inactiveClassName),
+        active ? classNames73("text-primary font-semibold underline", activeClassName) : classNames73("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -56500,7 +56729,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames72(
+        className: classNames73(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -56520,7 +56749,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames72(
+        className: classNames73(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -56533,7 +56762,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: classNames72(
+              className: classNames73(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -56546,7 +56775,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsx(
       "h2",
       {
-        className: classNames72(
+        className: classNames73(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -56558,7 +56787,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsx(
       "nav",
       {
-        className: classNames72(
+        className: classNames73(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -56582,7 +56811,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsx("aside", { className: classNames72("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsx("aside", { className: classNames73("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -56681,7 +56910,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-toolbar",
         "flex flex-wrap items-center gap-1 border-b border-gray-200 bg-gray-50 p-2",
         "dark:border-gray-700 dark:bg-gray-900",
@@ -56695,7 +56924,7 @@ function MarkdownToolbar({
             disabled: disabled || actionsDisabled,
             title: action.shortcut ? `${action.title || action.label} (${action.shortcut})` : action.title || action.label,
             onClick: () => onAction?.(action.id),
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-toolbar-button",
               "inline-flex items-center justify-center rounded border border-transparent",
               "text-gray-700 transition-colors hover:border-gray-300 hover:bg-white",
@@ -56715,7 +56944,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-view-toggle",
               "inline-flex items-center justify-center rounded border font-medium transition-colors",
               "border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -56972,7 +57201,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56988,7 +57217,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames72(toolbarClassName, toolbarProps?.className),
+            className: classNames73(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -56996,7 +57225,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -57019,7 +57248,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-source-textarea",
               "block w-full resize-y border-0 bg-transparent p-4 font-mono text-sm leading-7",
               "text-gray-900 outline-none placeholder:text-gray-400",
@@ -57049,7 +57278,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -57099,7 +57328,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -57109,7 +57338,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -57133,7 +57362,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -57223,7 +57452,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -57233,7 +57462,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames72(
+            className: classNames73(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57258,7 +57487,7 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsx(
           "p",
           {
-            className: classNames72(
+            className: classNames73(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57313,7 +57542,7 @@ function CodeMirrorMarkdownEditor({
     {
       id: id2,
       "data-name": name2,
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-adapter",
         "eui-markdown-codemirror-adapter",
         "overflow-hidden rounded border border-gray-300 bg-white",
@@ -57347,7 +57576,7 @@ function CodeMirrorMarkdownEditor({
             closeBrackets: true,
             bracketMatching: true
           },
-          className: classNames72("eui-markdown-codemirror", editorClassName),
+          className: classNames73("eui-markdown-codemirror", editorClassName),
           onChange: updateValue,
           onBlur
         }
@@ -57442,7 +57671,7 @@ function createDefaultPlugins({
     ...showToolbar ? [
       toolbarPlugin({
         toolbarContents: toolbarContents ?? DefaultToolbar,
-        toolbarClassName: classNames72(
+        toolbarClassName: classNames73(
           "eui-markdown-mdx-toolbar",
           toolbarClassName
         ),
@@ -57559,7 +57788,7 @@ var MDXMarkdownEditor = forwardRef(
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
         onBlurCapture: handleBlur,
-        className: classNames72(
+        className: classNames73(
           "eui-markdown-adapter",
           "eui-markdown-mdx-adapter",
           dark && ["dark", "dark-theme"],
@@ -57577,8 +57806,8 @@ var MDXMarkdownEditor = forwardRef(
             markdown: currentValue ?? "",
             readOnly: disabled || readOnly,
             plugins: plugins ?? defaultPlugins,
-            className: classNames72("eui-markdown-mdx-editor", editorClassName),
-            contentEditableClassName: classNames72(
+            className: classNames73("eui-markdown-mdx-editor", editorClassName),
+            contentEditableClassName: classNames73(
               "eui-markdown-mdx-content",
               contentEditableClassName
             ),
@@ -57615,7 +57844,7 @@ function MDXMarkdownField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-mdx-field",
         "relative space-y-2",
         wrapperClassName
@@ -57625,7 +57854,7 @@ function MDXMarkdownField({
           "label",
           {
             htmlFor: editorId,
-            className: classNames72(
+            className: classNames73(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57659,7 +57888,7 @@ function MDXMarkdownField({
           "p",
           {
             id: helperId,
-            className: classNames72(
+            className: classNames73(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57719,10 +57948,10 @@ function MarkdownLayout({
   };
   const hasLeftToc = hasToc && tocPosition === "left";
   const hasRightToc = hasToc && tocPosition === "right";
-  return /* @__PURE__ */ jsx("div", { className: classNames72("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: classNames73("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -57734,7 +57963,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsx(
           "header",
           {
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -57745,7 +57974,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -57758,7 +57987,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames72(
+                  className: classNames73(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -57771,7 +58000,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames72(
+                  className: classNames73(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57784,7 +58013,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsx(
                 "main",
                 {
-                  className: classNames72(
+                  className: classNames73(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -57795,7 +58024,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames72(
+                  className: classNames73(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57808,7 +58037,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames72(
+                  className: classNames73(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -57824,7 +58053,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsx(
           "footer",
           {
-            className: classNames72(
+            className: classNames73(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -57861,7 +58090,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72(
+      className: classNames73(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -57872,7 +58101,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsx(
             "h1",
             {
-              className: classNames72(
+              className: classNames73(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -57884,7 +58113,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsx(
             "div",
             {
-              className: classNames72(
+              className: classNames73(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -57972,7 +58201,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         [`${styles}`]: styles
       }),
       children: children3
@@ -58021,7 +58250,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames72({
+      className: classNames73({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -58101,6 +58330,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, AnalyticsContext, AnalyticsProvider, AreaPlot, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarPlot, BaseChartDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_web_default as Button, CHART_COLOR_PALETTE, CHART_DARK_THEME, CHART_DATA_MODES, CHART_DEFAULT_ACTIVE_DOT_RADIUS, CHART_DEFAULT_ANIMATION_DURATION, CHART_DEFAULT_BAR_RADIUS, CHART_DEFAULT_HEIGHT, CHART_DEFAULT_HORIZONTAL_BAR_RADIUS, CHART_DEFAULT_MARGIN, CHART_DEFAULT_MAX_REALTIME_POINTS, CHART_DEFAULT_POLLING_INTERVAL, CHART_DEFAULT_STROKE_WIDTH, CHART_EMPTY_MESSAGE, CHART_ERROR_MESSAGE, CHART_LIGHT_THEME, CHART_LOADING_MESSAGE, CHART_STATUSES, CHART_STATUS_COLORS, CHART_VALUE_FORMATS, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Chart, ChartContainer, ChartContext, ChartEmptyState, ChartErrorState, ChartHeader, ChartLegend, ChartLoadingState, ChartPanel, ChartPlotFrame, ChartProvider, ChartToolbar, ChartTooltip, Checkbox, Chip, CloudinaryImage2 as CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Code, CodeMirrorMarkdownEditor_default as CodeMirrorMarkdownEditor, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, CookieBanner, CookiePreferencesModal, DEFAULT_ANALYTICS_CONFIG, DEFAULT_COOKIE_CATEGORIES, DEFAULT_REVIEW_THREAD_CONFIG, DataView2 as DataView, DataViewContent, DataViewFilterGroup, DataViewFooter, DataViewHeader, DataViewPageSize, DataViewPagination, DataViewProvider, DataViewSearch, DataViewSidebar, DataViewSort, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, EUI_ANALYTICS_ANONYMOUS_ID_STORAGE_KEY, EUI_ANALYTICS_CONSENT_STORAGE_KEY, EUI_ANALYTICS_QUEUE_STORAGE_KEY, EnvErrorScreen_default as EnvErrorScreen, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, Lead, LinePlot, Link, List, ListItem, ListItemElement, ListRoot, MDXMarkdownEditor_default as MDXMarkdownEditor, MDXMarkdownField_default as MDXMarkdownField, MarkdownBlockquote_default as MarkdownBlockquote, MarkdownBreak_default as MarkdownBreak, MarkdownCodeBlock_default as MarkdownCodeBlock, MarkdownContext, MarkdownDetails, MarkdownDocsLayout_default as MarkdownDocsLayout, MarkdownEditor_default as MarkdownEditor, MarkdownEmphasis_default as MarkdownEmphasis, MarkdownField_default as MarkdownField, MarkdownFigcaption, MarkdownFigure, MarkdownHeading_default as MarkdownHeadingComponent, MarkdownImage_default as MarkdownImage, MarkdownInlineCode_default as MarkdownInlineCode, MarkdownLayout_default as MarkdownLayout, MarkdownLink_default as MarkdownLink, MarkdownListItem_default as MarkdownListItem, MarkdownOrderedList, MarkdownParagraph_default as MarkdownParagraph, MarkdownPreviewPane_default as MarkdownPreviewPane, MarkdownProvider_default as MarkdownProvider, MarkdownRenderer_default as MarkdownRenderer, MarkdownSourceEditor_default as MarkdownSourceEditor, MarkdownSplitEditor_default as MarkdownSplitEditor, MarkdownStrikethrough_default as MarkdownStrikethrough, MarkdownStrong_default as MarkdownStrong, MarkdownSummary, MarkdownTOC_default as MarkdownTOC, MarkdownTOCItem_default as MarkdownTOCItem, MarkdownTable_default as MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeaderCell, MarkdownTableRow, MarkdownTaskCheckbox_default as MarkdownTaskCheckbox, MarkdownThematicBreak_default as MarkdownThematicBreak, MarkdownToolbar_default as MarkdownToolbar, MarkdownUnorderedList, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PreviewSwitch, PriceTag, ProgressBar, ProgressBarRating, Quote, Radio_default as Radio, RealtimeChartDataSource, ReviewThread_default as ReviewThread, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterPlot, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, Spinner, StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, TableBody, TableCell, TableElement, TableFrame, TableHead, TableHeaderCell, TableRow, Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSelect, ThemeSwitch, TitleBanner, Toast, Tooltip6 as Tooltip, TopNav, Transition, TransitionAccordion_default as TransitionAccordion, TransitionBase_default as TransitionBase, TransitionDropdown_default as TransitionDropdown, TransitionFade_default as TransitionFade, TransitionFadeIn_default as TransitionFadeIn, TransitionScale_default as TransitionScale, TransitionSlide_default as TransitionSlide, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo, YoutubeVideo as YoutubeVideoPlayer, addReplyToCache, addReviewReply, appendReview, applyReactionState, assertAbsoluteURL, buildURL, canDeleteReview, canDeleteReviewReply, canEditReview, canEditReviewReply, canReplyToReview, canReportReview, canReportReviewReply, clearAnalyticsQueueStorage, clearAnonymousIdStorage, clearConsentStorage, cn, createAnalyticsEvent, createAnalyticsId, createConfigurator, createDefaultConsent, createForceLayout, createGridLayout, createHeadingSlug, createTreeLayout, createURLResolver, decrementReplyCount, defaultFormatValue, defaultTiers, ensureAnonymousIdStorage, enumValues, euiToast, extractHeadings, findReview, formatChartLabel, formatChartValue, formatCommentDate, formatConfigError, formatReviewDate, generateHeadingNumbers, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getConsentStatusFromCategories, getCurrencySymbol, getCurrentFullUrl, getCurrentPath, getCurrentReferrer, getCurrentTitle, getDeviceInfo, getDoNotTrackEnabled, getLayout, getNowISOString, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, getViewport, hasReviewReply, incrementReplyCount, isBrowser, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, normalizeMarkdown, normalizeReview, normalizeReviewAuthor, normalizeReviewReply, parseJson, parseJsonRecord, parseUrlMap, prependReview, readAnalyticsQueueStorage, readAnonymousIdStorage, readConsentStorage, registerLayout, removeComment, removeCommentTreeFromCache, removeReview, removeReviewReply, replaceRealtimePoints, replaceReview, replaceReviewReply, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, safeReadStorage, safeRemoveStorage, safeWriteStorage, sanitizeHeading, sendToast, slugify, toConfiguratorError, updateComment, updateReplyCacheComment, updateReview, updateReviewReply, upsertReview, useActiveHeading, useAnalytics, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCookieConsent, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useEUIDevPreviewPlatform, useIsMobile_default as useIsMobile, useMarkdown, useMarkdownHeadings, useModal_default as useModal, usePageTracking, useResolvedChartState, useReviewThreadState, useSessionTracking, useTheme_default as useTheme, writeAnalyticsQueueStorage, writeConsentStorage };
+export { Accordion_default as Accordion, AnalyticsContext, AnalyticsProvider, AreaPlot, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarPlot, BaseChartDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_web_default as Button, CHART_COLOR_PALETTE, CHART_DARK_THEME, CHART_DATA_MODES, CHART_DEFAULT_ACTIVE_DOT_RADIUS, CHART_DEFAULT_ANIMATION_DURATION, CHART_DEFAULT_BAR_RADIUS, CHART_DEFAULT_HEIGHT, CHART_DEFAULT_HORIZONTAL_BAR_RADIUS, CHART_DEFAULT_MARGIN, CHART_DEFAULT_MAX_REALTIME_POINTS, CHART_DEFAULT_POLLING_INTERVAL, CHART_DEFAULT_STROKE_WIDTH, CHART_EMPTY_MESSAGE, CHART_ERROR_MESSAGE, CHART_LIGHT_THEME, CHART_LOADING_MESSAGE, CHART_STATUSES, CHART_STATUS_COLORS, CHART_VALUE_FORMATS, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Chart, ChartContainer, ChartContext, ChartEmptyState, ChartErrorState, ChartHeader, ChartLegend, ChartLoadingState, ChartPanel, ChartPlotFrame, ChartProvider, ChartToolbar, ChartTooltip, Checkbox, Chip, CloudinaryImage2 as CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Code, CodeMirrorMarkdownEditor_default as CodeMirrorMarkdownEditor, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, CookieBanner, CookiePreferencesModal, DEFAULT_ANALYTICS_CONFIG, DEFAULT_COOKIE_CATEGORIES, DEFAULT_REVIEW_THREAD_CONFIG, DataView2 as DataView, DataViewContent, DataViewFilterGroup, DataViewFooter, DataViewHeader, DataViewPageSize, DataViewPagination, DataViewProvider, DataViewSearch, DataViewSidebar, DataViewSort, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, EUI_ANALYTICS_ANONYMOUS_ID_STORAGE_KEY, EUI_ANALYTICS_CONSENT_STORAGE_KEY, EUI_ANALYTICS_QUEUE_STORAGE_KEY, EnvErrorScreen_default as EnvErrorScreen, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_web_default as ImageInput, ImageView, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, Lead, LinePlot, Link, List, ListItem, ListItemElement, ListRoot, MDXMarkdownEditor_default as MDXMarkdownEditor, MDXMarkdownField_default as MDXMarkdownField, MarkdownBlockquote_default as MarkdownBlockquote, MarkdownBreak_default as MarkdownBreak, MarkdownCodeBlock_default as MarkdownCodeBlock, MarkdownContext, MarkdownDetails, MarkdownDocsLayout_default as MarkdownDocsLayout, MarkdownEditor_default as MarkdownEditor, MarkdownEmphasis_default as MarkdownEmphasis, MarkdownField_default as MarkdownField, MarkdownFigcaption, MarkdownFigure, MarkdownHeading_default as MarkdownHeadingComponent, MarkdownImage_default as MarkdownImage, MarkdownInlineCode_default as MarkdownInlineCode, MarkdownLayout_default as MarkdownLayout, MarkdownLink_default as MarkdownLink, MarkdownListItem_default as MarkdownListItem, MarkdownOrderedList, MarkdownParagraph_default as MarkdownParagraph, MarkdownPreviewPane_default as MarkdownPreviewPane, MarkdownProvider_default as MarkdownProvider, MarkdownRenderer_default as MarkdownRenderer, MarkdownSourceEditor_default as MarkdownSourceEditor, MarkdownSplitEditor_default as MarkdownSplitEditor, MarkdownStrikethrough_default as MarkdownStrikethrough, MarkdownStrong_default as MarkdownStrong, MarkdownSummary, MarkdownTOC_default as MarkdownTOC, MarkdownTOCItem_default as MarkdownTOCItem, MarkdownTable_default as MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeaderCell, MarkdownTableRow, MarkdownTaskCheckbox_default as MarkdownTaskCheckbox, MarkdownThematicBreak_default as MarkdownThematicBreak, MarkdownToolbar_default as MarkdownToolbar, MarkdownUnorderedList, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_web_default as MultiImageInput, NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PreviewSwitch, PriceTag, ProgressBar, ProgressBarRating, Quote, Radio_default as Radio, RealtimeChartDataSource, ReviewThread_default as ReviewThread, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterPlot, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, Spinner, StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, TableBody, TableCell, TableElement, TableFrame, TableHead, TableHeaderCell, TableRow, Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSelect, ThemeSwitch, TitleBanner, Toast, Tooltip6 as Tooltip, TopNav, Transition, TransitionAccordion_default as TransitionAccordion, TransitionBase_default as TransitionBase, TransitionDropdown_default as TransitionDropdown, TransitionFade_default as TransitionFade, TransitionFadeIn_default as TransitionFadeIn, TransitionScale_default as TransitionScale, TransitionSlide_default as TransitionSlide, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo, YoutubeVideo as YoutubeVideoPlayer, addReplyToCache, addReviewReply, appendReview, applyReactionState, assertAbsoluteURL, buildURL, canDeleteReview, canDeleteReviewReply, canEditReview, canEditReviewReply, canReplyToReview, canReportReview, canReportReviewReply, clearAnalyticsQueueStorage, clearAnonymousIdStorage, clearConsentStorage, cn, createAnalyticsEvent, createAnalyticsId, createConfigurator, createDefaultConsent, createForceLayout, createGridLayout, createHeadingSlug, createTreeLayout, createURLResolver, decrementReplyCount, defaultFormatValue, defaultTiers, ensureAnonymousIdStorage, enumValues, euiToast, extractHeadings, findReview, formatChartLabel, formatChartValue, formatCommentDate, formatConfigError, formatReviewDate, generateHeadingNumbers, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getConsentStatusFromCategories, getCurrencySymbol, getCurrentFullUrl, getCurrentPath, getCurrentReferrer, getCurrentTitle, getDeviceInfo, getDoNotTrackEnabled, getLayout, getNowISOString, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, getViewport, hasReviewReply, incrementReplyCount, isBrowser, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, normalizeMarkdown, normalizeReview, normalizeReviewAuthor, normalizeReviewReply, parseJson, parseJsonRecord, parseUrlMap, prependReview, readAnalyticsQueueStorage, readAnonymousIdStorage, readConsentStorage, registerLayout, removeComment, removeCommentTreeFromCache, removeReview, removeReviewReply, replaceRealtimePoints, replaceReview, replaceReviewReply, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, safeReadStorage, safeRemoveStorage, safeWriteStorage, sanitizeHeading, sendToast, slugify, toConfiguratorError, updateComment, updateReplyCacheComment, updateReview, updateReviewReply, upsertReview, useActiveHeading, useAnalytics, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCookieConsent, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useEUIDevPreviewPlatform, useIsMobile_default as useIsMobile, useMarkdown, useMarkdownHeadings, useModal_default as useModal, usePageTracking, useResolvedChartState, useReviewThreadState, useSessionTracking, useTheme_default as useTheme, writeAnalyticsQueueStorage, writeConsentStorage };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map