elseware-ui 3.0.6 → 3.0.8

package/dist/index.mjs

@@ -4,7 +4,7 @@ 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 classNames73 from 'classnames';
+import classNames69 from 'classnames';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { Image, CloudinaryContext as CloudinaryContext$1 } from 'cloudinary-react';
 import { MdUpload, MdOutlineDone, MdOutlineRemoveCircleOutline, MdDragIndicator, MdKeyboardArrowLeft, MdKeyboardArrowRight, MdOutlineDelete } from 'react-icons/md/index.js';
@@ -6453,7 +6453,7 @@ var Backdrop = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         "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: classNames73(element7.props.className, className)
+    className: classNames69(element7.props.className, className)
   });
 }
 function TransitionBase({
@@ -7063,7 +7063,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames73(
+  const transitionClassName = classNames69(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -7272,7 +7272,7 @@ function useInputFieldState(props) {
   };
 }
 
-// src/components/data-entry/input/input/base/Input.styles.ts
+// src/data/styles/shared.styles.tsx
 var inputShapes = shapes;
 var inputRootClassName = "relative w-full";
 var inputFrameClassName = "relative h-14 w-full overflow-hidden border bg-white/95 px-3 dark:bg-eui-primary-300/10";
@@ -7399,41 +7399,203 @@ function Input(inputProps) {
     )
   ] });
 }
-var InputFile = ({
+function useResolvedInputFileConfig({
+  label,
   placeholder,
-  accept = "",
-  className,
-  ...props
-}) => {
-  const fileInputRef = useRef(null);
+  shape
+}) {
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useInputFileFieldState(props) {
   const [field, meta, helpers] = useField(props);
-  const handleFileChange = (e) => {
-    const file = e.target.files?.[0] || null;
-    helpers.setValue(file);
+  return {
+    field,
+    helpers,
+    meta
   };
-  const showFloatingLabel = !!field.value;
-  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+}
+function isNativeInputFileValue(file) {
+  return Boolean(file && typeof file === "object");
+}
+function getInputFileName(file) {
+  if (!isNativeInputFileValue(file)) {
+    return "";
+  }
+  if ("name" in file && file.name) {
+    return file.name;
+  }
+  if ("fileName" in file && file.fileName) {
+    return file.fileName;
+  }
+  if ("uri" in file && file.uri) {
+    return file.uri.split("/").filter(Boolean).pop() ?? "";
+  }
+  return "";
+}
+function isAcceptedInputFile(file, accept) {
+  if (!accept) {
+    return true;
+  }
+  const acceptedTypes = accept.split(",").map((acceptedType) => acceptedType.trim().toLowerCase()).filter(Boolean);
+  const fileName = file.name.toLowerCase();
+  const fileType = file.type.toLowerCase();
+  return acceptedTypes.some((acceptedType) => {
+    if (acceptedType.startsWith(".")) {
+      return fileName.endsWith(acceptedType);
+    }
+    if (acceptedType.endsWith("/*")) {
+      return fileType.startsWith(acceptedType.replace("/*", "/"));
+    }
+    return fileType === acceptedType;
+  });
+}
+function InputFile(inputFileProps) {
+  const {
+    accept = "",
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    onFileSelect: _onFileSelect,
+    placeholder,
+    responseClassName,
+    shape,
+    className,
+    onBlur,
+    onClick,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    onFocus,
+    onKeyDown,
+    ..._props
+  } = inputFileProps;
+  const fileInputRef = useRef(null);
+  const { field, meta, helpers } = useInputFileFieldState(inputFileProps);
+  const [focused, setFocused] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedInputFileConfig({
+    label,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const fileName = getInputFileName(field.value);
+  const floating = focused || dragging || Boolean(fileName);
+  const inputId = id2 ?? field.name;
+  const openFilePicker = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+  const setSelectedFile = (file) => {
+    if (file && !isAcceptedInputFile(file, accept)) {
+      return;
+    }
+    void helpers.setValue(file);
+    void helpers.setTouched(true);
+  };
+  const handleFileChange = (event) => {
+    setSelectedFile(event.target.files?.[0] ?? null);
+  };
+  const handleDragEnter = (event) => {
+    if (!disabled) {
+      event.preventDefault();
+      setDragging(true);
+    }
+    onDragEnter?.(event);
+  };
+  const handleDragLeave = (event) => {
+    setDragging(false);
+    onDragLeave?.(event);
+  };
+  const handleDragOver = (event) => {
+    if (!disabled) {
+      event.preventDefault();
+    }
+    onDragOver?.(event);
+  };
+  const handleDrop = (event) => {
+    if (!disabled) {
+      event.preventDefault();
+      setDragging(false);
+      setSelectedFile(event.dataTransfer.files?.[0] ?? null);
+    }
+    onDrop?.(event);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openFilePicker();
+    }
+    onKeyDown?.(event);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: inputRootClassName, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        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),
-            "border-eui-danger-500": meta.touched && meta.error
-          },
+        "aria-disabled": disabled,
+        "aria-label": resolvedLabel,
+        onBlur: (event) => {
+          setFocused(false);
+          void helpers.setTouched(true);
+          onBlur?.(event);
+        },
+        onClick: (event) => {
+          openFilePicker();
+          onClick?.(event);
+        },
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onFocus: (event) => {
+          setFocused(true);
+          onFocus?.(event);
+        },
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        className: cn(
+          inputFrameClassName,
+          "flex items-center transition-all duration-200 ease-out",
+          hasError ? inputFrameErrorClassName : focused || dragging ? inputFrameActiveClassName : inputFrameIdleClassName,
+          dragging && "border-dashed bg-eui-secondary-50/70",
+          inputShapes[resolvedShape],
+          disabled ? inputFrameDisabledClassName : "cursor-pointer hover:cursor-pointer",
           className
         ),
-        onClick: () => fileInputRef.current?.click(),
-        children: field.value?.name || ""
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              inputControlClassName,
+              "block truncate pointer-events-none",
+              classNames69({
+                "text-gray-500 dark:text-gray-300": !fileName
+              }),
+              inputClassName
+            ),
+            children: fileName
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsx(
       "input",
       {
+        ref: fileInputRef,
+        id: inputId,
+        name: field.name,
         type: "file",
         accept,
-        ref: fileInputRef,
+        disabled,
         onChange: handleFileChange,
         className: "hidden"
       }
@@ -7441,24 +7603,25 @@ var InputFile = ({
     /* @__PURE__ */ jsx(
       InputLabel,
       {
-        text: placeholder,
-        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
-        })
+        disabled,
+        errored: hasError,
+        floating,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
       }
     ),
     /* @__PURE__ */ jsx(
       InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
-};
+}
 function normalizeShape(value) {
   switch (value) {
     case "circle" /* circle */:
@@ -7495,7 +7658,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: classNames73(
+        className: classNames69(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -7524,7 +7687,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames73(
+                          className: classNames69(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -7535,7 +7698,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames73(
+                                className: classNames69(
                                   "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 +7794,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames73(
+            className: classNames69(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -7643,7 +7806,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames73(
+                    className: classNames69(
                       "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 +7837,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames73(
+                      className: classNames69(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -7694,7 +7857,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames73(
+                                  className: classNames69(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -7705,7 +7868,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames73(
+                                        className: classNames69(
                                           "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"
@@ -8069,43 +8232,126 @@ function Checkbox(checkboxProps) {
     )
   ] });
 }
-var DateSelector = ({
+function useResolvedDateSelectorConfig({
+  label,
   placeholder,
-  styles,
-  shape,
-  ...props
-}) => {
+  shape
+}) {
   const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [field, meta] = useField(props);
-  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useDateSelectorFieldState(props) {
+  const [field, meta, helpers] = useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function DateSelector(dateSelectorProps) {
+  const {
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    max: max2,
+    min: min2,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    className,
+    onBlur,
+    onClick,
+    onFocus
+  } = dateSelectorProps;
+  const { field, helpers, meta } = useDateSelectorFieldState(dateSelectorProps);
+  const [focused, setFocused] = useState(false);
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedDateSelectorConfig({
+    label,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const inputId = id2 ?? field.name;
+  const handleChange = (event) => {
+    void helpers.setValue(event.target.value);
+  };
+  const handleBlur = (event) => {
+    setFocused(false);
+    void helpers.setTouched(true);
+    field.onBlur(event);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+    try {
+      event.currentTarget.showPicker?.();
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: inputRootClassName, children: [
     /* @__PURE__ */ jsx(
-      InputLabel,
+      "input",
       {
-        text: placeholder,
-        className: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
+        disabled,
+        id: inputId,
+        max: max2,
+        min: min2,
+        name: field.name,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        placeholder: "",
+        type: "date",
+        value: field.value ?? "",
+        className: cn(
+          inputFrameClassName,
+          inputControlClassName,
+          webInputControlClassName,
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles,
+          inputClassName
+        )
       }
     ),
     /* @__PURE__ */ jsx(
-      Field,
+      InputLabel,
       {
-        type: "date",
-        ...field,
-        ...props,
-        placeholder,
-        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,
-          [`${shapes[resolvedShape]}`]: true,
-          [`${styles}`]: styles
-        })
+        disabled,
+        errored: hasError,
+        floating: true,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
       }
     ),
-    meta.touched && meta.error && /* @__PURE__ */ jsx(InputResponse, { name: field.name, visibility: true, variant: "danger" })
+    /* @__PURE__ */ jsx(
+      InputResponse,
+      {
+        name: field.name,
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
+      }
+    )
   ] });
-};
-var DateSelector_default = DateSelector;
+}
 function renderFormChildren(children3, formik) {
   return typeof children3 === "function" ? children3(formik) : children3;
 }
@@ -8375,7 +8621,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsxs(
             "label",
             {
-              className: classNames73({
+              className: classNames69({
                 "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
@@ -8563,7 +8809,7 @@ function MultiImageInput({
             onDragOver: handleDragOver,
             onDrop: () => handleDrop(index3),
             onDragEnd: () => setDraggedIndex(null),
-            className: classNames73(
+            className: classNames69(
               "relative h-[200px] w-[300px] overflow-hidden bg-gray-900",
               "transition-all duration-150",
               draggedIndex === index3 && "opacity-60",
@@ -8693,7 +8939,7 @@ function Radio({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames73({
+            className: classNames69({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -8706,7 +8952,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames73({
+                  className: classNames69({
                     "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
@@ -8718,7 +8964,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames73({
+                  className: classNames69({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -8761,7 +9007,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -8774,7 +9020,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames73({
+            className: classNames69({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -8795,53 +9041,115 @@ function StarRatingInput({
   );
 }
 var StarRatingInput_default = StarRatingInput;
-function Select({
+function useResolvedSelectConfig({
+  label,
   placeholder,
-  options,
-  styles,
-  shape,
-  ...props
+  shape
 }) {
   const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [field, meta] = useField(props);
-  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useSelectFieldState(props) {
+  const [field, meta, helpers] = useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function Select(selectProps) {
+  const {
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    options,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    className,
+    onBlur,
+    onFocus,
+    ...props
+  } = selectProps;
+  const { field, meta } = useSelectFieldState(selectProps);
+  const [focused, setFocused] = useState(false);
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedSelectConfig({
+    label,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const inputId = id2 ?? field.name;
+  const handleBlur = (event) => {
+    setFocused(false);
+    field.onBlur(event);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: inputRootClassName, children: [
     /* @__PURE__ */ jsx(
-      InputLabel,
+      Field,
       {
-        text: placeholder,
-        className: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
+        ...props,
+        ...field,
+        as: "select",
+        disabled,
+        id: inputId,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        className: cn(
+          inputFrameClassName,
+          inputControlClassName,
+          webInputControlClassName,
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles,
+          inputClassName
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsx(
+          "option",
+          {
+            value: option.value,
+            disabled: option.disabled,
+            children: option.label
+          },
+          option.value
+        ))
       }
     ),
     /* @__PURE__ */ jsx(
-      Field,
+      InputLabel,
       {
-        as: "select",
-        ...props,
-        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,
-          "transition-all ease-in-out": true,
-          [`${shapes[resolvedShape]}`]: true,
-          [`${styles}`]: styles
-        }),
-        children: options.map((option) => {
-          return /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value);
-        })
+        disabled,
+        errored: hasError,
+        floating: true,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
       }
     ),
     /* @__PURE__ */ jsx(
       InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
 }
-var Select_default = Select;
 function Switch({
   label,
   description,
@@ -8870,7 +9178,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames73(
+            className: classNames69(
               "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",
@@ -8893,166 +9201,359 @@ function Switch({
   ] });
 }
 var Switch_default = Switch;
-function Tags({
-  placeholder,
-  styles,
+function useResolvedTagsConfig({
+  label,
   limit = 10,
-  ...props
+  placeholder,
+  shape
 }) {
-  const [field, meta, helpers] = useField({ ...props });
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    limit,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useTagsFieldState(props) {
+  const [field, meta, helpers] = useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function getTagsValue(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((tag) => typeof tag === "string");
+}
+function addTagToList(tags, value, limit) {
+  const trimmed = value.trim();
+  if (!trimmed || tags.includes(trimmed) || tags.length >= limit) {
+    return tags;
+  }
+  return [...tags, trimmed];
+}
+function removeTagFromList(tags, index3) {
+  return tags.filter((_2, tagIndex) => tagIndex !== index3);
+}
+function Tags(tagsProps) {
+  const {
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    limit,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    tagClassName,
+    removeButtonClassName,
+    counterClassName,
+    className,
+    onBlur,
+    onFocus,
+    ..._props
+  } = tagsProps;
+  const { field, helpers, meta } = useTagsFieldState(tagsProps);
   const [input, setInput] = useState("");
-  const handleAddTag = () => {
-    const trimmed = input.trim();
-    if (trimmed && !field.value.includes(trimmed) && field.value.length < limit) {
-      helpers.setValue([...field.value, trimmed]);
+  const [focused, setFocused] = useState(false);
+  const {
+    label: resolvedLabel,
+    limit: resolvedLimit,
+    shape: resolvedShape
+  } = useResolvedTagsConfig({
+    label,
+    limit,
+    placeholder,
+    shape
+  });
+  const tags = getTagsValue(field.value);
+  const hasError = Boolean(meta.touched && meta.error);
+  const floating = focused || input.length > 0 || tags.length > 0;
+  const inputId = id2 ?? field.name;
+  const handleAddTag = (value = input) => {
+    if (disabled) {
+      return;
+    }
+    const nextTags = addTagToList(tags, value, resolvedLimit);
+    if (nextTags !== tags) {
+      void helpers.setValue(nextTags);
+    }
+    if (value.trim()) {
+      void helpers.setTouched(true);
     }
     setInput("");
   };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === ",") {
-      e.preventDefault();
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
       handleAddTag();
+      return;
     }
-    if (e.key === "Backspace" && input === "" && field.value.length > 0) {
-      helpers.setValue(field.value.slice(0, -1));
+    if (event.key === "Backspace" && input === "" && tags.length > 0) {
+      void helpers.setValue(tags.slice(0, -1));
+      void helpers.setTouched(true);
     }
   };
   const handleRemoveTag = (index3) => {
-    const newTags = [...field.value];
-    newTags.splice(index3, 1);
-    helpers.setValue(newTags);
+    if (disabled) {
+      return;
+    }
+    void helpers.setValue(removeTagFromList(tags, index3));
+    void helpers.setTouched(true);
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: classNames73(
-            "border rounded-sm flex flex-wrap items-center gap-2 px-2 pt-2 pb-6 min-h-[3rem]",
+  const handleBlur = (event) => {
+    setFocused(false);
+    void helpers.setTouched(true);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          inputFrameClassName,
+          "flex h-auto min-h-14 flex-wrap items-center gap-2 overflow-visible px-3 pt-6 pb-7",
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles
+        ),
+        children: [
+          tags.map((tag, index3) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex max-w-full items-center gap-1 rounded bg-eui-light-300 px-2 py-1 text-sm font-medium text-eui-dark-700 dark:bg-eui-dark-400 dark:text-eui-light-300",
+                tagClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: tag }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": `Remove ${tag}`,
+                    className: cn(
+                      "inline-flex h-5 w-5 items-center justify-center text-xs text-eui-danger-500 transition-colors hover:text-eui-danger-400 disabled:cursor-not-allowed disabled:opacity-50",
+                      removeButtonClassName
+                    ),
+                    disabled,
+                    onClick: () => handleRemoveTag(index3),
+                    type: "button",
+                    children: /* @__PURE__ */ jsx(FaTimes, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            `${tag}-${index3}`
+          )),
+          tags.length < resolvedLimit ? /* @__PURE__ */ jsx(
+            "input",
             {
-              "bg-eui-primary-300/10 eui-text-md": true,
-              "pt-6": input.length > 0 || field.value.length > 0,
-              // extra space when label is floated
-              "border-eui-primary-400 focus-within:border-eui-secondary-500": !(meta.touched && meta.error),
-              "border-eui-danger-500": meta.touched && meta.error,
-              [`${styles}`]: styles
+              "aria-label": resolvedLabel,
+              className: cn(
+                inputControlClassName,
+                webInputControlClassName,
+                "h-7 w-auto min-w-[120px] flex-1 p-0",
+                inputClassName
+              ),
+              disabled,
+              id: inputId,
+              onBlur: handleBlur,
+              onChange: (event) => setInput(event.target.value),
+              onFocus: handleFocus,
+              onKeyDown: handleKeyDown,
+              placeholder: "",
+              type: "text",
+              value: input
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "pointer-events-none absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50",
+                counterClassName
+              ),
+              children: [
+                tags.length,
+                "/",
+                resolvedLimit
+              ]
             }
-          ),
-          children: [
-            field.value.map((tag, index3) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-center bg-eui-light-300 dark:bg-eui-dark-400 px-2 py-1 rounded text-sm text-eui-dark-700 dark:text-eui-light-300",
-                children: [
-                  tag,
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleRemoveTag(index3),
-                      className: "ml-2 text-xs text-eui-danger-500 hover:text-eui-danger-400",
-                      children: /* @__PURE__ */ jsx(FaTimes, { className: "w-3 h-3" })
-                    }
-                  )
-                ]
-              },
-              index3
-            )),
-            field.value.length < limit && /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: input,
-                onChange: (e) => setInput(e.target.value),
-                onKeyDown: handleKeyDown,
-                className: "flex-grow min-w-[120px] bg-transparent outline-none eui-text-md text-eui-dark-600 dark:text-eui-light-500 placeholder-eui-dark-200"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        InputLabel,
-        {
-          text: placeholder,
-          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"
           )
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-1 right-2 text-xs text-eui-dark-50 font-semibold pointer-events-none", children: [
-        field.value?.length,
-        "/",
-        limit
-      ] })
-    ] }),
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputLabel,
+      {
+        disabled,
+        errored: hasError,
+        floating,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
     /* @__PURE__ */ jsx(
       InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
 }
-var Tags_default = Tags;
-function TextArea({
-  placeholder,
+function useResolvedTextAreaConfig({
+  label,
   limit = 1e3,
-  styles,
-  shape,
-  ...props
+  placeholder,
+  shape
 }) {
   const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [field, meta] = useField(props);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        Field,
-        {
-          as: "textarea",
-          ...field,
-          ...props,
-          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),
-            "border-eui-danger-500": meta.touched && meta.error,
-            [`${shapes[resolvedShape]}`]: true,
-            [`${styles}`]: styles
-          })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        InputLabel,
-        {
-          text: placeholder,
-          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"
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 right-3 text-xs text-eui-dark-50 font-semibold", children: [
-        field.value?.length,
-        "/",
-        limit
-      ] })
-    ] }),
+  return {
+    label: label ?? placeholder,
+    limit,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useTextAreaFieldState(props) {
+  const [field, meta, helpers] = useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function getTextAreaCharacterCount(value) {
+  return String(value ?? "").length;
+}
+function TextArea(textAreaProps) {
+  const {
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    limit,
+    placeholder,
+    responseClassName,
+    rows,
+    shape,
+    styles,
+    className,
+    onBlur,
+    onFocus,
+    ...props
+  } = textAreaProps;
+  const { field, helpers, meta } = useTextAreaFieldState(textAreaProps);
+  const [focused, setFocused] = useState(false);
+  const {
+    label: resolvedLabel,
+    limit: resolvedLimit,
+    shape: resolvedShape
+  } = useResolvedTextAreaConfig({
+    label,
+    limit,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const characterCount = getTextAreaCharacterCount(field.value);
+  const floating = focused || characterCount > 0;
+  const inputId = id2 ?? field.name;
+  const handleChange = (event) => {
+    void helpers.setValue(event.target.value);
+  };
+  const handleBlur = (event) => {
+    setFocused(false);
+    void helpers.setTouched(true);
+    field.onBlur(event);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          inputFrameClassName,
+          "h-auto min-h-32 px-3",
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Field,
+            {
+              ...props,
+              ...field,
+              as: "textarea",
+              disabled,
+              id: inputId,
+              maxLength: resolvedLimit,
+              onBlur: handleBlur,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              placeholder: "",
+              rows,
+              value: field.value ?? "",
+              className: cn(
+                inputControlClassName,
+                webInputControlClassName,
+                "block min-h-32 resize-none pb-8",
+                inputClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50", children: [
+            characterCount,
+            "/",
+            resolvedLimit
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputLabel,
+      {
+        disabled,
+        errored: hasError,
+        floating,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
     /* @__PURE__ */ jsx(
       InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
 }
-var TextArea_default = TextArea;
 function BreadcrumbItem({
   title,
   href = "#",
@@ -9064,7 +9565,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames73({
+      className: classNames69({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -9141,7 +9642,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classNames73({
+            className: classNames69({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -9155,7 +9656,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -9199,7 +9700,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames73(
+        className: classNames69(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -9210,7 +9711,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames73(
+        className: classNames69(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -9239,7 +9740,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -9287,7 +9788,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames73({
+        className: classNames69({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -9300,7 +9801,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -9341,7 +9842,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames73({
+        className: classNames69({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -9386,7 +9887,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames73({
+      className: classNames69({
         "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,
@@ -9415,7 +9916,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9468,7 +9969,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -9530,7 +10031,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames73({
+        className: classNames69({
           "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,
@@ -9558,7 +10059,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsx(
             BsChevronDown,
             {
-              className: classNames73({
+              className: classNames69({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -9571,7 +10072,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames73({
+        className: classNames69({
           "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
         }),
@@ -9601,7 +10102,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames73({
+      className: classNames69({
         "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,
@@ -9630,7 +10131,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9670,7 +10171,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames73({
+      className: classNames69({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -12862,7 +13363,7 @@ function Accordion({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames73(
+        className: classNames69(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -12883,7 +13384,7 @@ function Accordion({
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames73("text-xl transition-transform duration-300", {
+                  className: classNames69("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -12897,7 +13398,7 @@ function Accordion({
     /* @__PURE__ */ jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames73(
+        className: classNames69(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -12954,7 +13455,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -12970,14 +13471,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children: children3, className }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames73("p-6 text-gray-300 text-sm", className), children: children3 });
+  return /* @__PURE__ */ jsx("div", { className: classNames69("p-6 text-gray-300 text-sm", className), children: children3 });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children: children3, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -13019,7 +13520,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73("absolute inset-0"),
+      className: classNames69("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -13165,7 +13666,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxs("div", { className: classNames73("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames69("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 })
@@ -18236,7 +18737,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames73(
+            className: classNames69(
               "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"
             )
@@ -30005,7 +30506,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames73(
+      className: classNames69(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -30017,7 +30518,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames73(
+              className: classNames69(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -30409,7 +30910,7 @@ var ContentArea = forwardRef(
       "div",
       {
         ref,
-        className: classNames73({
+        className: classNames69({
           "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,
@@ -30426,7 +30927,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -30439,7 +30940,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -30458,7 +30959,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -30475,7 +30976,7 @@ var Layout = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -30497,7 +30998,7 @@ var Header = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -30532,7 +31033,7 @@ var Content = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         "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)
@@ -30548,7 +31049,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         "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
@@ -30736,7 +31237,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames73({
+          className: classNames69({
             "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
@@ -31652,7 +32153,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxs(
     "section",
     {
-      className: classNames73(
+      className: classNames69(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -31666,7 +32167,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsx(
           "main",
           {
-            className: classNames73(
+            className: classNames69(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -31674,7 +32175,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: classNames73(
+                className: classNames69(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -31687,7 +32188,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsx(
           "aside",
           {
-            className: classNames73(
+            className: classNames69(
               "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",
@@ -31696,7 +32197,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: classNames73(
+                className: classNames69(
                   "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, {}) })
@@ -31972,7 +32473,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames73(
+      className: classNames69(
         "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",
@@ -54709,7 +55210,7 @@ function MarkdownHeading({
       id: id2,
       level: typographyLevel,
       bold: true,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-heading group relative scroll-mt-24 font-bold leading-tight text-gray-900 dark:text-gray-100",
         HEADING_STYLES[level],
         className
@@ -54872,18 +55373,18 @@ function powerSetPermutations(arr) {
   }
 }
 var classNameCombinations = {};
-function getClassNameCombinations(classNames77) {
-  if (classNames77.length === 0 || classNames77.length === 1) return classNames77;
-  var key = classNames77.join(".");
+function getClassNameCombinations(classNames73) {
+  if (classNames73.length === 0 || classNames73.length === 1) return classNames73;
+  var key = classNames73.join(".");
   if (!classNameCombinations[key]) {
-    classNameCombinations[key] = powerSetPermutations(classNames77);
+    classNameCombinations[key] = powerSetPermutations(classNames73);
   }
   return classNameCombinations[key];
 }
-function createStyleObject(classNames77) {
+function createStyleObject(classNames73) {
   var elementStyle = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   var stylesheet = arguments.length > 2 ? arguments[2] : void 0;
-  var nonTokenClassNames = classNames77.filter(function(className) {
+  var nonTokenClassNames = classNames73.filter(function(className) {
     return className !== "token";
   });
   var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
@@ -54891,8 +55392,8 @@ function createStyleObject(classNames77) {
     return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
   }, elementStyle);
 }
-function createClassNameString(classNames77) {
-  return classNames77.join(" ");
+function createClassNameString(classNames73) {
+  return classNames73.join(" ");
 }
 function createChildren2(stylesheet, useInlineStyles) {
   var childrenCount = 0;
@@ -55065,8 +55566,8 @@ function flattenCodeTree(tree) {
       }));
     } else if (node2.children) {
       var _node$properties;
-      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) {
+      var classNames73 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
+      flattenCodeTree(node2.children, classNames73).forEach(function(i2) {
         return newTree.push(i2);
       });
     }
@@ -55730,7 +56231,7 @@ function MarkdownCodeBlock({
     "div",
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
         className
       ),
@@ -55801,7 +56302,7 @@ function MarkdownInlineCode({
     Code,
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "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
       ),
@@ -55842,7 +56343,7 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames73(
+      className: classNames69(
         "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
       ),
@@ -55877,7 +56378,7 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
         className
       )
@@ -55894,7 +56395,7 @@ function MarkdownTable({
     TableElement,
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-table w-full border-collapse text-[0.925rem]",
         className
       ),
@@ -55911,7 +56412,7 @@ function MarkdownTableCell({
     TableCell,
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "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
       ),
@@ -55928,7 +56429,7 @@ function MarkdownTableHeaderCell({
     TableHeaderCell,
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "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
       ),
@@ -55944,7 +56445,7 @@ function MarkdownTableHead({
     TableHead,
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
         className
       )
@@ -55959,7 +56460,7 @@ function MarkdownTableBody({
     TableBody,
     {
       ...props,
-      className: classNames73("eui-markdown-table-body", className)
+      className: classNames69("eui-markdown-table-body", className)
     }
   );
 }
@@ -55971,7 +56472,7 @@ function MarkdownTableRow({
     TableRow,
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
         className
       )
@@ -55989,7 +56490,7 @@ function MarkdownBlockquote({
     {
       ...props,
       as: "blockquote",
-      className: classNames73(
+      className: classNames69(
         "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
       ),
@@ -56008,7 +56509,7 @@ function MarkdownParagraph({
     {
       ...props,
       level: 1,
-      className: classNames73("eui-markdown-paragraph my-4", className),
+      className: classNames69("eui-markdown-paragraph my-4", className),
       children: /* @__PURE__ */ jsx(Fragment, { children: children3 })
     }
   );
@@ -56019,7 +56520,7 @@ function MarkdownStrong({ className, ...props }) {
     "strong",
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -56032,7 +56533,7 @@ function MarkdownEmphasis({ className, ...props }) {
     "em",
     {
       ...props,
-      className: classNames73("eui-markdown-emphasis italic", className)
+      className: classNames69("eui-markdown-emphasis italic", className)
     }
   );
 }
@@ -56045,7 +56546,7 @@ function MarkdownStrikethrough({
     "del",
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
         className
       )
@@ -56106,7 +56607,7 @@ function MarkdownTaskCheckbox({
     "input",
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
         className
       )
@@ -56122,7 +56623,7 @@ function MarkdownThematicBreak({
     "hr",
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
         className
       )
@@ -56139,7 +56640,7 @@ function MarkdownDetails({ className, ...props }) {
     "details",
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "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
       )
@@ -56151,7 +56652,7 @@ function MarkdownSummary({ className, ...props }) {
     "summary",
     {
       ...props,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -56163,7 +56664,7 @@ function MarkdownFigure({ className, ...props }) {
     "figure",
     {
       ...props,
-      className: classNames73("eui-markdown-figure my-6", className)
+      className: classNames69("eui-markdown-figure my-6", className)
     }
   );
 }
@@ -56175,7 +56676,7 @@ function MarkdownFigcaption({
   return /* @__PURE__ */ jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsx(
     Caption,
     {
-      className: classNames73(
+      className: classNames69(
         "text-gray-500 opacity-100 dark:text-gray-400",
         className
       ),
@@ -56574,14 +57075,14 @@ function MarkdownRenderer({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "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: classNames73(
+          className: classNames69(
             "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
             contentClassName
           ),
@@ -56659,11 +57160,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-toc-item",
         "block w-full text-left text-sm transition-all ease-in-out duration-150",
         "hover:text-primary",
-        active ? classNames73("text-primary font-semibold underline", activeClassName) : classNames73("text-gray-500 dark:text-gray-400", inactiveClassName),
+        active ? classNames69("text-primary font-semibold underline", activeClassName) : classNames69("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -56729,7 +57230,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames73(
+        className: classNames69(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -56749,7 +57250,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames73(
+        className: classNames69(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -56762,7 +57263,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: classNames73(
+              className: classNames69(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -56775,7 +57276,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsx(
       "h2",
       {
-        className: classNames73(
+        className: classNames69(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -56787,7 +57288,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsx(
       "nav",
       {
-        className: classNames73(
+        className: classNames69(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -56811,7 +57312,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsx("aside", { className: classNames73("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsx("aside", { className: classNames69("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -56910,7 +57411,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "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",
@@ -56924,7 +57425,7 @@ function MarkdownToolbar({
             disabled: disabled || actionsDisabled,
             title: action.shortcut ? `${action.title || action.label} (${action.shortcut})` : action.title || action.label,
             onClick: () => onAction?.(action.id),
-            className: classNames73(
+            className: classNames69(
               "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",
@@ -56944,7 +57445,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames73(
+            className: classNames69(
               "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",
@@ -57201,7 +57702,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -57217,7 +57718,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames73(toolbarClassName, toolbarProps?.className),
+            className: classNames69(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -57225,7 +57726,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames73(
+            className: classNames69(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -57248,7 +57749,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames73(
+            className: classNames69(
               "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",
@@ -57278,7 +57779,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -57328,7 +57829,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -57338,7 +57839,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames73(
+            className: classNames69(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -57362,7 +57863,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames73(
+            className: classNames69(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -57452,7 +57953,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -57462,7 +57963,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames73(
+            className: classNames69(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57487,7 +57988,7 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsx(
           "p",
           {
-            className: classNames73(
+            className: classNames69(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57542,7 +58043,7 @@ function CodeMirrorMarkdownEditor({
     {
       id: id2,
       "data-name": name2,
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-adapter",
         "eui-markdown-codemirror-adapter",
         "overflow-hidden rounded border border-gray-300 bg-white",
@@ -57576,7 +58077,7 @@ function CodeMirrorMarkdownEditor({
             closeBrackets: true,
             bracketMatching: true
           },
-          className: classNames73("eui-markdown-codemirror", editorClassName),
+          className: classNames69("eui-markdown-codemirror", editorClassName),
           onChange: updateValue,
           onBlur
         }
@@ -57648,9 +58149,14 @@ function createDefaultPlugins({
   defaultCodeBlockLanguage,
   codeMirrorOptions,
   imageOptions,
-  linkDialogOptions
+  linkDialogOptions,
+  dark
 }) {
   const codeBlockLanguages = codeMirrorOptions?.codeBlockLanguages ?? DEFAULT_CODE_BLOCK_LANGUAGES;
+  const codeMirrorExtensions = [
+    ...dark ? [oneDark] : [],
+    ...codeMirrorOptions?.codeMirrorExtensions ?? []
+  ];
   return [
     headingsPlugin(),
     listsPlugin(),
@@ -57666,12 +58172,13 @@ function createDefaultPlugins({
     }),
     codeMirrorPlugin({
       ...codeMirrorOptions,
-      codeBlockLanguages
+      codeBlockLanguages,
+      ...codeMirrorExtensions.length > 0 ? { codeMirrorExtensions } : {}
     }),
     ...showToolbar ? [
       toolbarPlugin({
         toolbarContents: toolbarContents ?? DefaultToolbar,
-        toolbarClassName: classNames73(
+        toolbarClassName: classNames69(
           "eui-markdown-mdx-toolbar",
           toolbarClassName
         ),
@@ -57724,11 +58231,13 @@ var MDXMarkdownEditor = forwardRef(
         defaultCodeBlockLanguage,
         codeMirrorOptions,
         imageOptions,
-        linkDialogOptions
+        linkDialogOptions,
+        dark
       }),
       [
         codeMirrorOptions,
         defaultCodeBlockLanguage,
+        dark,
         imageOptions,
         linkDialogOptions,
         showToolbar,
@@ -57787,8 +58296,9 @@ var MDXMarkdownEditor = forwardRef(
         "aria-readonly": readOnly || void 0,
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
+        "data-theme": dark ? "dark" : void 0,
         onBlurCapture: handleBlur,
-        className: classNames73(
+        className: classNames69(
           "eui-markdown-adapter",
           "eui-markdown-mdx-adapter",
           dark && ["dark", "dark-theme"],
@@ -57806,8 +58316,12 @@ var MDXMarkdownEditor = forwardRef(
             markdown: currentValue ?? "",
             readOnly: disabled || readOnly,
             plugins: plugins ?? defaultPlugins,
-            className: classNames73("eui-markdown-mdx-editor", editorClassName),
-            contentEditableClassName: classNames73(
+            className: classNames69(
+              "eui-markdown-mdx-editor",
+              dark && ["dark", "dark-theme"],
+              editorClassName
+            ),
+            contentEditableClassName: classNames69(
               "eui-markdown-mdx-content",
               contentEditableClassName
             ),
@@ -57844,7 +58358,7 @@ function MDXMarkdownField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-mdx-field",
         "relative space-y-2",
         wrapperClassName
@@ -57854,7 +58368,7 @@ function MDXMarkdownField({
           "label",
           {
             htmlFor: editorId,
-            className: classNames73(
+            className: classNames69(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57888,7 +58402,7 @@ function MDXMarkdownField({
           "p",
           {
             id: helperId,
-            className: classNames73(
+            className: classNames69(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57948,10 +58462,10 @@ function MarkdownLayout({
   };
   const hasLeftToc = hasToc && tocPosition === "left";
   const hasRightToc = hasToc && tocPosition === "right";
-  return /* @__PURE__ */ jsx("div", { className: classNames73("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: classNames69("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -57963,7 +58477,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsx(
           "header",
           {
-            className: classNames73(
+            className: classNames69(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -57974,7 +58488,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames73(
+            className: classNames69(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -57987,7 +58501,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames73(
+                  className: classNames69(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -58000,7 +58514,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames73(
+                  className: classNames69(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -58013,7 +58527,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsx(
                 "main",
                 {
-                  className: classNames73(
+                  className: classNames69(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -58024,7 +58538,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames73(
+                  className: classNames69(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -58037,7 +58551,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames73(
+                  className: classNames69(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -58053,7 +58567,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsx(
           "footer",
           {
-            className: classNames73(
+            className: classNames69(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -58090,7 +58604,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73(
+      className: classNames69(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -58101,7 +58615,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsx(
             "h1",
             {
-              className: classNames73(
+              className: classNames69(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -58113,7 +58627,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsx(
             "div",
             {
-              className: classNames73(
+              className: classNames69(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -58201,7 +58715,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         [`${styles}`]: styles
       }),
       children: children3
@@ -58250,7 +58764,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames73({
+      className: classNames69({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -58330,6 +58844,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_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 };
+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, 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, 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, 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