elseware-ui 2.37.1 → 2.38.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { twMerge } from 'tailwind-merge';
-import React2, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useRef, useCallback, useContext, Children } from 'react';
+import React2, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useMemo, useRef, useCallback, useContext, Children, isValidElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { BsStarFill, BsStarHalf, BsStar, BsChevronDown, BsFillDiamondFill } from 'react-icons/bs';
 import { FaSun, FaMoon, FaGripVertical, FaTrash, FaPlus, FaTimes, FaBars, FaCircle, FaEyeSlash, FaEye } from 'react-icons/fa';
 import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line, AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell, ScatterChart, Scatter } from 'recharts';
-import classNames17 from 'classnames';
+import classNames66 from 'classnames';
 import { FaCircleChevronDown } from 'react-icons/fa6';
 import ReactWorldFlags from 'react-world-flags';
 import emojiFlags from 'emoji-flags';
@@ -16,9 +16,40 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { AiOutlineLoading } from 'react-icons/ai';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { MdUpload, MdOutlineDone, MdOutlineRemoveCircleOutline } from 'react-icons/md';
-import '@mdxeditor/editor/style.css';
-import { MDXEditor, headingsPlugin, linkPlugin, listsPlugin, imagePlugin, tablePlugin, linkDialogPlugin, thematicBreakPlugin, quotePlugin, toolbarPlugin, UndoRedo, Separator, BlockTypeSelect, BoldItalicUnderlineToggles, StrikeThroughSupSubToggles, ListsToggle, CreateLink, InsertImage, InsertTable, InsertThematicBreak, markdownShortcutPlugin, frontmatterPlugin, codeBlockPlugin, codeMirrorPlugin } from '@mdxeditor/editor';
 import { BiCheckCircle, BiXCircle, BiChevronDown, BiChevronUp, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiDotsVerticalRounded, BiReply, BiEdit, BiTrash, BiFlag } from 'react-icons/bi';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import { PrismLight } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import c from 'react-syntax-highlighter/dist/esm/languages/prism/c';
+import cpp from 'react-syntax-highlighter/dist/esm/languages/prism/cpp';
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
+import go from 'react-syntax-highlighter/dist/esm/languages/prism/go';
+import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
+import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
+import jsx210 from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
+import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import rust from 'react-syntax-highlighter/dist/esm/languages/prism/rust';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
+import CodeMirror from '@uiw/react-codemirror';
+import { markdown } from '@codemirror/lang-markdown';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { MDXEditor, headingsPlugin, listsPlugin, quotePlugin, thematicBreakPlugin, markdownShortcutPlugin, linkPlugin, imagePlugin, tablePlugin, codeBlockPlugin, codeMirrorPlugin, toolbarPlugin, UndoRedo, Separator, BoldItalicUnderlineToggles, CodeToggle, ListsToggle, CreateLink, InsertImage, InsertTable, InsertCodeBlock } from '@mdxeditor/editor';
+import '@mdxeditor/editor/style.css';
+import { MilkdownProvider, useEditor, Milkdown } from '@milkdown/react';
+import { Editor, rootCtx, defaultValueCtx, editorViewOptionsCtx } from '@milkdown/kit/core';
+import { commonmark } from '@milkdown/kit/preset/commonmark';
+import { gfm } from '@milkdown/kit/preset/gfm';
+import { listenerCtx, listener } from '@milkdown/kit/plugin/listener';
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -138,7 +169,7 @@ var CURRENCIES = [
 
 // src/utils/currency.ts
 var getCurrencySymbol = (code) => {
-  const currency = CURRENCIES.find((c) => c.code === code);
+  const currency = CURRENCIES.find((c2) => c2.code === code);
   return currency ? currency.symbol : null;
 };
 
@@ -3732,7 +3763,7 @@ function renderTransitionChild(children, className) {
   }
   const element = child;
   return React2.cloneElement(element, {
-    className: classNames17(element.props.className, className)
+    className: classNames66(element.props.className, className)
   });
 }
 function TransitionBase({
@@ -3752,7 +3783,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames17(
+  const transitionClassName = classNames66(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -3927,7 +3958,7 @@ function Accordion({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames17(
+        className: classNames66(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -3948,7 +3979,7 @@ function Accordion({
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames17("text-xl transition-transform duration-300", {
+                  className: classNames66("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -3962,7 +3993,7 @@ function Accordion({
     /* @__PURE__ */ jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17(
+        className: classNames66(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -4046,7 +4077,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames17(
+      className: classNames66(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -4062,14 +4093,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames17("p-6 text-gray-300 text-sm", className), children });
+  return /* @__PURE__ */ jsx("div", { className: classNames66("p-6 text-gray-300 text-sm", className), children });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17(
+      className: classNames66(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -4111,7 +4142,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17("absolute inset-0"),
+      className: classNames66("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -4257,7 +4288,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxs("div", { className: classNames17("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames66("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 })
@@ -5661,7 +5692,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "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
       }),
@@ -6185,7 +6216,7 @@ var Form = ({
         /* @__PURE__ */ jsx(UnsavedChangesGuard_default, { formik, enabled: warnOnUnsavedChanges }),
         /* @__PURE__ */ jsx(DirtyObserver_default, { formik, onDirtyChange }),
         /* @__PURE__ */ jsx(FormObserver_default, { formik, onChange }),
-        /* @__PURE__ */ jsx("div", { className: classNames17(styles), children })
+        /* @__PURE__ */ jsx("div", { className: classNames66(styles), children })
       ] })
     }
   );
@@ -6227,16 +6258,16 @@ function normalizeToastStatus(status = "default" /* default */) {
 }
 function emit() {
   const snapshot = [...toasts];
-  listeners.forEach((listener) => {
-    listener(snapshot);
+  listeners.forEach((listener2) => {
+    listener2(snapshot);
   });
 }
 var toastStore = {
-  subscribe(listener) {
-    listeners.add(listener);
-    listener([...toasts]);
+  subscribe(listener2) {
+    listeners.add(listener2);
+    listener2([...toasts]);
     return () => {
-      listeners.delete(listener);
+      listeners.delete(listener2);
     };
   },
   getSnapshot() {
@@ -6702,7 +6733,7 @@ function FormResponse({
   return /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
@@ -6819,7 +6850,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames17(
+            className: classNames66(
               "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"
             )
@@ -18200,12 +18231,12 @@ function WorldMap({
   const mode = isDarkMode ? mapStyles.dark : mapStyles.light;
   const resolvedData = useMemo(() => {
     return data.map((item) => {
-      const c = COUNTRIES.find((x) => x.code === item.code);
-      if (!c) return null;
+      const c2 = COUNTRIES.find((x) => x.code === item.code);
+      if (!c2) return null;
       return {
         ...item,
-        name: c.name,
-        coordinates: c.coordinates
+        name: c2.name,
+        coordinates: c2.coordinates
       };
     }).filter(Boolean);
   }, [data]);
@@ -18367,7 +18398,7 @@ function InputResponse({
   return /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -18382,7 +18413,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsx(
     "label",
     {
-      className: classNames17({
+      className: classNames66({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -18434,7 +18465,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames17({
+        className: classNames66({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]": true,
           "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
           "border-eui-danger-500": meta.touched && meta.error,
@@ -18479,7 +18510,7 @@ var InputFile = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17(
+        className: classNames66(
           "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),
@@ -18505,7 +18536,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames17({
+        styles: classNames66({
           "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
@@ -18558,7 +18589,7 @@ var InputList = ({ name, placeholder, shape }) => {
     /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(FieldArray, { name, children: ({ push, remove, move }) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames17(
+        className: classNames66(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -18587,7 +18618,7 @@ var InputList = ({ name, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames17(
+                          className: classNames66(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -18598,7 +18629,7 @@ var InputList = ({ name, placeholder, shape }) => {
                               {
                                 name: `${name}[${index}]`,
                                 placeholder: `Item ${index + 1}`,
-                                className: classNames17(
+                                className: classNames66(
                                   "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"
@@ -18694,7 +18725,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames17(
+            className: classNames66(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -18706,7 +18737,7 @@ var InputListGroup = ({
                   {
                     name: `${name}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames17(
+                    className: classNames66(
                       "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"
@@ -18737,7 +18768,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames17(
+                      className: classNames66(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -18757,7 +18788,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames17(
+                                  className: classNames66(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -18768,7 +18799,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames17(
+                                        className: classNames66(
                                           "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"
@@ -18982,7 +19013,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames17({
+        className: classNames66({
           "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,
@@ -19091,7 +19122,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsxs(
             "label",
             {
-              className: classNames17({
+              className: classNames66({
                 "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
@@ -19208,7 +19239,7 @@ function Radio({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames17({
+            className: classNames66({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -19221,7 +19252,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames17({
+                  className: classNames66({
                     "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
@@ -19233,7 +19264,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames17({
+                  className: classNames66({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -19276,7 +19307,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -19289,7 +19320,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames17({
+            className: classNames66({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -19333,7 +19364,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames17({
+        className: classNames66({
           "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,
@@ -19385,7 +19416,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames17(
+            className: classNames66(
               "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",
@@ -19442,7 +19473,7 @@ function Tags({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames17(
+          className: classNames66(
             "border rounded-sm flex flex-wrap items-center gap-2 px-2 pt-2 pb-6 min-h-[3rem]",
             {
               "bg-eui-primary-300/10 eui-text-md": true,
@@ -19490,7 +19521,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames17(
+          styles: classNames66(
             "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"
           )
@@ -19531,7 +19562,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames17({
+          className: classNames66({
             "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),
@@ -19545,7 +19576,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames17(
+          styles: classNames66(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -19568,31 +19599,30 @@ function TextArea({
   ] });
 }
 var TextArea_default = TextArea;
-function ContentArea({
-  children,
-  styles,
-  enablePadding = false
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames17({
-        "min-h-screen h-full w-full py-3 px-5": true,
-        "py-3 px-5": !enablePadding,
-        "py-3 px-5 lg:px-[150px]": enablePadding,
-        "transition-all duration-[200ms]": true,
-        [`${styles}`]: styles
-      }),
-      children
-    }
-  );
-}
+var ContentArea = forwardRef(
+  ({ children, styles, enablePadding = false }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classNames66({
+          "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,
+          [`${styles}`]: Boolean(styles)
+        }),
+        children
+      }
+    );
+  }
+);
+ContentArea.displayName = "ContentArea";
 var ContentArea_default = ContentArea;
 function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -19605,7 +19635,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -19624,7 +19654,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -19641,7 +19671,7 @@ var Layout = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -19660,7 +19690,7 @@ var Header = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -19700,7 +19730,7 @@ var Content = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "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)
@@ -19716,7 +19746,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "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
@@ -19789,269 +19819,6 @@ function BlockGroup({
   ] });
 }
 var BlockGroup_default = BlockGroup;
-var useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-};
-var useTheme_default = useTheme;
-function MarkdownEditor({
-  styles,
-  ...props
-}) {
-  const [field, meta, helpers] = useField(props);
-  const { theme } = useTheme_default();
-  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx("div", { className: classNames17(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsx(
-      MDXEditor,
-      {
-        markdown: field.value,
-        onChange: (val) => helpers.setValue(val),
-        className: "rounded border border-gray-300 dark:border-gray-700",
-        plugins: [
-          headingsPlugin(),
-          linkPlugin(),
-          listsPlugin(),
-          imagePlugin(),
-          tablePlugin(),
-          linkDialogPlugin({}),
-          thematicBreakPlugin(),
-          quotePlugin(),
-          toolbarPlugin({
-            toolbarContents: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(UndoRedo, {}),
-              /* @__PURE__ */ jsx(Separator, {}),
-              /* @__PURE__ */ jsx(BlockTypeSelect, {}),
-              /* @__PURE__ */ jsx(Separator, {}),
-              /* @__PURE__ */ jsx(BoldItalicUnderlineToggles, {}),
-              /* @__PURE__ */ jsx(Separator, {}),
-              /* @__PURE__ */ jsx(StrikeThroughSupSubToggles, {}),
-              /* @__PURE__ */ jsx(Separator, {}),
-              /* @__PURE__ */ jsx(ListsToggle, {}),
-              /* @__PURE__ */ jsx(Separator, {}),
-              /* @__PURE__ */ jsx(CreateLink, {}),
-              /* @__PURE__ */ jsx(InsertImage, {}),
-              /* @__PURE__ */ jsx(Separator, {}),
-              /* @__PURE__ */ jsx(InsertTable, {}),
-              /* @__PURE__ */ jsx(InsertThematicBreak, {})
-            ] })
-          })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      InputResponse_default,
-      {
-        name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
-      }
-    )
-  ] });
-}
-var MarkdownEditor_default = MarkdownEditor;
-var MarkdownContext = createContext(null);
-
-// src/components/markdown/hooks/useMarkdown.tsx
-function useMarkdown() {
-  return useContext(MarkdownContext);
-}
-
-// src/components/markdown/utils/generateHeadingNumbers.ts
-function generateHeadingNumbers(headings) {
-  const counters = [0, 0, 0, 0, 0, 0];
-  return headings.map((heading) => {
-    const level = heading.level;
-    counters[level - 1]++;
-    for (let i = level; i < counters.length; i++) {
-      counters[i] = 0;
-    }
-    const numbering = counters.slice(0, level).filter((n) => n > 0).join(".");
-    return {
-      ...heading,
-      numbering
-    };
-  });
-}
-
-// src/components/markdown/utils/sanitizeHeading.ts
-function sanitizeHeading(text) {
-  return text.replace(/[^\p{L}\p{N}\p{P}\p{Z}]/gu, "").replace(/\s+/g, " ").trim();
-}
-function MarkdownTOC({ title = "Table of Contents" }) {
-  const context = useMarkdown();
-  if (!context) {
-    return null;
-  }
-  const { headings, activeHeading } = context;
-  const numberedHeadings = generateHeadingNumbers(headings);
-  const scrollToHeading = (id) => {
-    const element = document.getElementById(id);
-    if (!element) return;
-    element.scrollIntoView({
-      behavior: "smooth",
-      block: "start"
-    });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-      "h2",
-      {
-        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
-        children: title
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: numberedHeadings.map((heading) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => scrollToHeading(heading.id),
-        className: classNames17(
-          "block w-full text-left text-sm transition-all ease-in-out duration-150",
-          "hover:text-primary",
-          activeHeading === heading.id ? "text-primary font-semibold underline" : "text-gray-500 dark:text-gray-400"
-        ),
-        style: {
-          paddingLeft: `${(heading.level - 1) * 12}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "mr-2 opacity-70", children: heading.numbering }),
-          /* @__PURE__ */ jsx("span", { children: sanitizeHeading(heading.text) })
-        ]
-      },
-      heading.id
-    )) })
-  ] });
-}
-var MarkdownTOC_default = MarkdownTOC;
-function MarkdownViewer({ value }) {
-  const { theme } = useTheme_default();
-  const context = useMarkdown();
-  const markdown = value ?? context?.markdown ?? "";
-  const headings = context?.headings ?? [];
-  const setActiveHeading = context?.setActiveHeading;
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      headings.forEach((heading) => {
-        const headingEls = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
-        headingEls.forEach((el) => {
-          if (el.textContent?.trim() === heading.text.trim()) {
-            el.id = heading.id;
-          }
-        });
-      });
-      if (!setActiveHeading) return;
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              setActiveHeading(entry.target.id);
-            }
-          });
-        },
-        {
-          rootMargin: "-20% 0px -70% 0px"
-        }
-      );
-      headings.forEach((heading) => {
-        const el = document.getElementById(heading.id);
-        if (el) {
-          observer.observe(el);
-        }
-      });
-      return () => observer.disconnect();
-    }, 0);
-    return () => clearTimeout(timeout);
-  }, [headings, setActiveHeading]);
-  return /* @__PURE__ */ jsx("div", { className: theme === "dark" ? "dark" : "", children: /* @__PURE__ */ jsx(
-    MDXEditor,
-    {
-      markdown,
-      readOnly: true,
-      className: "markdown-body max-w-none",
-      plugins: [
-        headingsPlugin(),
-        linkPlugin(),
-        listsPlugin(),
-        imagePlugin(),
-        tablePlugin(),
-        quotePlugin(),
-        thematicBreakPlugin(),
-        linkDialogPlugin({}),
-        markdownShortcutPlugin(),
-        frontmatterPlugin(),
-        codeBlockPlugin({
-          defaultCodeBlockLanguage: "txt",
-          codeBlockEditorDescriptors: []
-        }),
-        codeMirrorPlugin({
-          codeBlockLanguages: {
-            js: "JavaScript",
-            ts: "TypeScript",
-            jsx: "React JSX",
-            tsx: "React TSX",
-            html: "HTML",
-            css: "CSS",
-            scss: "SCSS",
-            json: "JSON",
-            bash: "Bash",
-            shell: "Shell",
-            zsh: "ZSH",
-            yaml: "YAML",
-            yml: "YAML",
-            md: "Markdown",
-            py: "Python",
-            java: "Java",
-            cpp: "C++",
-            c: "C",
-            go: "Go",
-            rust: "Rust",
-            php: "PHP",
-            sql: "SQL"
-          }
-        })
-      ]
-    },
-    markdown
-  ) });
-}
-var MarkdownViewer_default = MarkdownViewer;
-
-// src/components/markdown/utils/slugify.ts
-function slugify(text) {
-  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
-}
-
-// src/components/markdown/utils/extractHeadings.ts
-function extractHeadings(markdown) {
-  return markdown.split("\n").filter((line) => /^#{1,6}\s/.test(line)).map((line) => {
-    const level = line.match(/^#+/)?.[0].length || 1;
-    const text = line.replace(/^#{1,6}\s/, "");
-    return {
-      id: slugify(text),
-      text,
-      level
-    };
-  });
-}
-function MarkdownProvider({ markdown, children }) {
-  const [activeHeading, setActiveHeading] = useState("");
-  const headings = useMemo(() => extractHeadings(markdown), [markdown]);
-  return /* @__PURE__ */ jsx(
-    MarkdownContext.Provider,
-    {
-      value: {
-        markdown,
-        headings,
-        activeHeading,
-        setActiveHeading
-      },
-      children
-    }
-  );
-}
-var MarkdownProvider_default = MarkdownProvider;
 function BreadcrumbItem({
   title,
   href = "#",
@@ -20063,7 +19830,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames17({
+      className: classNames66({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -20140,7 +19907,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classNames17({
+            className: classNames66({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -20154,7 +19921,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -20186,7 +19953,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17(
+        className: classNames66(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -20197,7 +19964,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames17(
+        className: classNames66(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -20226,7 +19993,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -20274,7 +20041,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17({
+        className: classNames66({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -20287,7 +20054,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20328,7 +20095,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17({
+        className: classNames66({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -20373,7 +20140,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames17({
+      className: classNames66({
         "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,
@@ -20402,7 +20169,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -20455,7 +20222,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20465,7 +20232,7 @@ function HeaderNav({ data = [], styles }) {
 var HeaderNav_default = HeaderNav;
 function useClickOutside(ref, fun) {
   useEffect(() => {
-    const listener = (e) => {
+    const listener2 = (e) => {
       if (!ref.current || ref.current.contains(e.target)) {
         return;
       }
@@ -20473,11 +20240,11 @@ function useClickOutside(ref, fun) {
         fun();
       }
     };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
+    document.addEventListener("mousedown", listener2);
+    document.addEventListener("touchstart", listener2);
     return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
+      document.removeEventListener("mousedown", listener2);
+      document.removeEventListener("touchstart", listener2);
     };
   }, [ref, fun]);
 }
@@ -20517,7 +20284,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames17({
+        className: classNames66({
           "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,
@@ -20545,7 +20312,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsx(
             BsChevronDown,
             {
-              className: classNames17({
+              className: classNames66({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -20558,7 +20325,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames17({
+        className: classNames66({
           "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
         }),
@@ -20588,7 +20355,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames17({
+      className: classNames66({
         "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,
@@ -20617,7 +20384,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -20657,7 +20424,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames17({
+      className: classNames66({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -21307,7 +21074,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames17(
+      className: classNames66(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -21319,7 +21086,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames17(
+              className: classNames66(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -21453,7 +21220,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames17({
+          className: classNames66({
             "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
@@ -21737,16 +21504,20 @@ function CommentHeader({ comment, config }) {
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
   const [show, setShow] = useState(defaultVisibility);
-  const openDrawer = () => {
-    setShow((prev) => !prev);
-  };
-  const closeDrawer = () => {
+  const openDrawer = useCallback(() => {
+    setShow(true);
+  }, []);
+  const closeDrawer = useCallback(() => {
     setShow(false);
-  };
+  }, []);
+  const toggleDrawer = useCallback(() => {
+    setShow((prev) => !prev);
+  }, []);
   return {
     show,
     openDrawer,
-    closeDrawer
+    closeDrawer,
+    toggleDrawer
   };
 };
 var useDrawer_default = useDrawer;
@@ -21765,6 +21536,14 @@ var useModal = () => {
   };
 };
 var useModal_default = useModal;
+var useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var useTheme_default = useTheme;
 function CommentMenuItem({
   icon,
   name,
@@ -22340,11 +22119,78 @@ function DataViewTable({
   );
 }
 var DataViewTable_default = DataViewTable;
-function DocumentationPanel({ value, toc = true }) {
-  return /* @__PURE__ */ jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxs("div", { className: "h-screen overflow-hidden grid grid-cols-[minmax(0,1fr)_280px] gap-10", children: [
-    /* @__PURE__ */ jsx("div", { className: "documentation_scrollbar min-w-0 h-screen overflow-y-auto scroll-smooth", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-6", children: /* @__PURE__ */ jsx(MarkdownViewer_default, {}) }) }),
-    toc && /* @__PURE__ */ jsx("div", { className: "hidden lg:block h-screen border-l border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsx("div", { className: "documentation_scrollbar h-full overflow-y-auto px-6 pt-0 pb-10", children: /* @__PURE__ */ jsx(MarkdownTOC_default, {}) }) })
-  ] }) });
+function toCssSize(value) {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+function DocumentationPanel({
+  value,
+  toc = true,
+  height = "100vh",
+  viewerClassName,
+  contentClassName,
+  tocClassName,
+  className,
+  contentMaxWidthClassName = "max-w-4xl"
+}) {
+  return /* @__PURE__ */ jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: classNames66(
+        "eui-documentation-panel",
+        "min-h-0 overflow-hidden bg-white text-gray-900",
+        "dark:bg-gray-950 dark:text-gray-100",
+        toc ? "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_280px]" : "grid grid-cols-1",
+        className
+      ),
+      style: {
+        height: toCssSize(height)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "main",
+          {
+            className: classNames66(
+              "eui-documentation-panel-viewer",
+              "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
+              viewerClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames66(
+                  "mx-auto px-5 py-8 sm:px-6 lg:px-8",
+                  contentMaxWidthClassName,
+                  contentClassName
+                ),
+                children: /* @__PURE__ */ jsx(MarkdownViewer_default, {})
+              }
+            )
+          }
+        ),
+        toc ? /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: classNames66(
+              "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",
+              tocClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames66(
+                  "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, {}) })
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  ) });
 }
 var DocumentationPanel_default = DocumentationPanel;
 function SliderItem({
@@ -22520,7 +22366,7 @@ function WorldMapCountryTable({
 }) {
   const enrichedData = useMemo(() => {
     const mapped = data.map((item) => {
-      const countryMeta = COUNTRIES.find((c) => c.code === item.code);
+      const countryMeta = COUNTRIES.find((c2) => c2.code === item.code);
       return {
         code: item.code,
         value: item.value,
@@ -22610,7 +22456,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames17(
+      className: classNames66(
         "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",
@@ -24519,6 +24365,2531 @@ function ReviewThread({
   ] });
 }
 var ReviewThread_default = ReviewThread;
+var MarkdownContext = createContext(null);
+
+// src/compositions/markdown/utils/sanitizeHeading.ts
+function sanitizeHeading(text, options = {}) {
+  const {
+    removeMarkdownSyntax = true,
+    removeHtmlTags = true,
+    collapseWhitespace = true
+  } = options;
+  let value = String(text || "");
+  if (removeHtmlTags) {
+    value = value.replace(/<[^>]*>/g, "");
+  }
+  if (removeMarkdownSyntax) {
+    value = value.replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\[([^\]]+)\]\[[^\]]+\]/g, "$1").replace(/`([^`]+)`/g, "$1").replace(/[*_~]+/g, "").replace(/\\([\\`*{}\[\]()#+\-.!_>])/g, "$1");
+  }
+  value = value.replace(/[\u0000-\u001F\u007F]/g, "");
+  if (collapseWhitespace) {
+    value = value.replace(/\s+/g, " ");
+  }
+  return value.trim();
+}
+
+// src/compositions/markdown/utils/createHeadingSlug.ts
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function createHeadingSlug(text, options = {}) {
+  const {
+    separator = "-",
+    fallback = "heading",
+    slugCounts,
+    existingSlugs
+  } = options;
+  const escapedSeparator = escapeRegExp(separator);
+  const sanitized = sanitizeHeading(text);
+  const baseSlug = sanitized.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^\p{L}\p{N}\s-]/gu, "").replace(/\s+/g, separator).replace(new RegExp(`${escapedSeparator}+`, "g"), separator).replace(new RegExp(`^${escapedSeparator}|${escapedSeparator}$`, "g"), "").trim() || fallback;
+  if (slugCounts) {
+    const count = slugCounts.get(baseSlug) ?? 0;
+    slugCounts.set(baseSlug, count + 1);
+    return count === 0 ? baseSlug : `${baseSlug}${separator}${count}`;
+  }
+  if (existingSlugs) {
+    let slug = baseSlug;
+    let count = 1;
+    while (existingSlugs.has(slug)) {
+      slug = `${baseSlug}${separator}${count}`;
+      count++;
+    }
+    existingSlugs.add(slug);
+    return slug;
+  }
+  return baseSlug;
+}
+function slugify(text) {
+  return createHeadingSlug(text);
+}
+
+// src/compositions/markdown/utils/normalizeMarkdown.ts
+function normalizeMarkdown(markdown, options = {}) {
+  const {
+    removeBom = true,
+    normalizeLineEndings = true,
+    trimStart = false,
+    trimEnd = false,
+    collapseBlankLines = false,
+    finalNewline = false
+  } = options;
+  let value = String(markdown ?? "");
+  if (removeBom) {
+    value = value.replace(/^\uFEFF/, "");
+  }
+  if (normalizeLineEndings) {
+    value = value.replace(/\r\n?/g, "\n");
+  }
+  if (trimStart) {
+    value = value.trimStart();
+  }
+  if (trimEnd) {
+    value = value.trimEnd();
+  }
+  if (collapseBlankLines) {
+    value = value.replace(/\n{3,}/g, "\n\n");
+  }
+  if (finalNewline && value && !value.endsWith("\n")) {
+    value += "\n";
+  }
+  return value;
+}
+
+// src/compositions/markdown/utils/extractHeadings.ts
+function getFenceState(line) {
+  const match = line.match(/^\s{0,3}(`{3,}|~{3,})/);
+  if (!match) return null;
+  const fence = match[1];
+  return {
+    marker: fence[0],
+    length: fence.length
+  };
+}
+function closesFence(line, fence) {
+  const match = line.match(/^\s{0,3}(`{3,}|~{3,})\s*$/);
+  if (!match) return false;
+  const closingFence = match[1];
+  return closingFence[0] === fence.marker && closingFence.length >= fence.length;
+}
+function isSetextUnderline(line) {
+  if (/^\s{0,3}=+\s*$/.test(line)) {
+    return 1;
+  }
+  if (/^\s{0,3}-+\s*$/.test(line)) {
+    return 2;
+  }
+  return null;
+}
+function extractAtxHeading(line) {
+  const match = line.match(/^\s{0,3}(#{1,6})(?:\s+|$)(.*)$/);
+  if (!match) return null;
+  const level = match[1].length;
+  const rawText = match[2].replace(/\s+#+\s*$/, "").trim();
+  return {
+    level,
+    text: sanitizeHeading(rawText)
+  };
+}
+function extractHeadings(markdown, options = {}) {
+  const {
+    minDepth = 1,
+    maxDepth = 6,
+    includeSetextHeadings = true,
+    idPrefix = ""
+  } = options;
+  const normalizedMarkdown = normalizeMarkdown(markdown);
+  const lines = normalizedMarkdown.split("\n");
+  const headings = [];
+  const slugCounts = /* @__PURE__ */ new Map();
+  let activeFence = null;
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
+    const fence = getFenceState(line);
+    if (activeFence) {
+      if (closesFence(line, activeFence)) {
+        activeFence = null;
+      }
+      continue;
+    }
+    if (fence) {
+      activeFence = fence;
+      continue;
+    }
+    const atxHeading = extractAtxHeading(line);
+    if (atxHeading) {
+      const { level, text: text2 } = atxHeading;
+      if (level >= minDepth && level <= maxDepth && text2) {
+        const id = createHeadingSlug(text2, { slugCounts });
+        headings.push({
+          id: `${idPrefix}${id}`,
+          text: text2,
+          level
+        });
+      }
+      continue;
+    }
+    if (!includeSetextHeadings) {
+      continue;
+    }
+    const nextLine = lines[index + 1];
+    if (!nextLine) {
+      continue;
+    }
+    const setextLevel = isSetextUnderline(nextLine);
+    if (!setextLevel) {
+      continue;
+    }
+    const text = sanitizeHeading(line);
+    if (!text) {
+      continue;
+    }
+    if (setextLevel >= minDepth && setextLevel <= maxDepth) {
+      const id = createHeadingSlug(text, { slugCounts });
+      headings.push({
+        id: `${idPrefix}${id}`,
+        text,
+        level: setextLevel
+      });
+    }
+    index++;
+  }
+  return headings;
+}
+
+// src/compositions/markdown/utils/generateHeadingNumbers.ts
+function generateHeadingNumbers(headings, options = {}) {
+  const { minDepth = 1, maxDepth = 6, separator = "." } = options;
+  const counters = [0, 0, 0, 0, 0, 0];
+  return headings.filter((heading) => {
+    return heading.level >= minDepth && heading.level <= maxDepth;
+  }).map((heading) => {
+    const level = Math.min(Math.max(heading.level, 1), 6);
+    counters[level - 1]++;
+    for (let index = level; index < counters.length; index++) {
+      counters[index] = 0;
+    }
+    const numbering = counters.slice(0, level).filter((count) => count > 0).join(separator);
+    return {
+      ...heading,
+      numbering
+    };
+  });
+}
+function MarkdownProvider({
+  children,
+  markdown,
+  value,
+  headings: externalHeadings,
+  meta,
+  activeHeading: controlledActiveHeading,
+  defaultActiveHeading = "",
+  onActiveHeadingChange
+}) {
+  const resolvedMarkdown = value ?? markdown ?? "";
+  const [internalActiveHeading, setInternalActiveHeading] = useState(defaultActiveHeading);
+  const headings = useMemo(() => {
+    if (externalHeadings) {
+      return externalHeadings;
+    }
+    return extractHeadings(resolvedMarkdown);
+  }, [externalHeadings, resolvedMarkdown]);
+  const numberedHeadings = useMemo(() => {
+    return generateHeadingNumbers(headings);
+  }, [headings]);
+  const headingMap = useMemo(() => {
+    return headings.reduce((acc, heading) => {
+      acc[heading.id] = heading;
+      return acc;
+    }, {});
+  }, [headings]);
+  const activeHeading = controlledActiveHeading ?? internalActiveHeading;
+  const getHeadingById = useCallback(
+    (id) => {
+      return headingMap[id];
+    },
+    [headingMap]
+  );
+  const setActiveHeading = useCallback(
+    (id) => {
+      if (controlledActiveHeading === void 0) {
+        setInternalActiveHeading(id);
+      }
+      onActiveHeadingChange?.(id, headingMap[id]);
+    },
+    [controlledActiveHeading, headingMap, onActiveHeadingChange]
+  );
+  const contextValue = useMemo(
+    () => ({
+      markdown: resolvedMarkdown,
+      headings,
+      numberedHeadings,
+      activeHeading,
+      setActiveHeading,
+      meta,
+      getHeadingById
+    }),
+    [
+      resolvedMarkdown,
+      headings,
+      numberedHeadings,
+      activeHeading,
+      setActiveHeading,
+      meta,
+      getHeadingById
+    ]
+  );
+  return /* @__PURE__ */ jsx(MarkdownContext.Provider, { value: contextValue, children });
+}
+var MarkdownProvider_default = MarkdownProvider;
+function useMarkdown(options = {}) {
+  const { required = false, errorMessage } = options;
+  const context = useContext(MarkdownContext);
+  if (!context && required) {
+    throw new Error(
+      errorMessage || "useMarkdown must be used inside a MarkdownProvider."
+    );
+  }
+  return context;
+}
+function useActiveHeading(options = {}) {
+  const context = useMarkdown();
+  const {
+    headings: externalHeadings,
+    activeHeading: controlledActiveHeading,
+    defaultActiveHeading = "",
+    enabled = true,
+    root = null,
+    rootMargin = "-20% 0px -70% 0px",
+    threshold = 0,
+    scrollBehavior = "smooth",
+    scrollBlock = "start",
+    onActiveHeadingChange
+  } = options;
+  const headings = externalHeadings ?? context?.headings ?? [];
+  const [internalActiveHeading, setInternalActiveHeading] = useState(defaultActiveHeading);
+  const activeHeading = controlledActiveHeading ?? context?.activeHeading ?? internalActiveHeading;
+  const headingMap = useMemo(() => {
+    return headings.reduce((acc, heading) => {
+      acc[heading.id] = heading;
+      return acc;
+    }, {});
+  }, [headings]);
+  const setActiveHeading = useCallback(
+    (id) => {
+      if (controlledActiveHeading === void 0 && !context) {
+        setInternalActiveHeading(id);
+      }
+      context?.setActiveHeading(id);
+      onActiveHeadingChange?.(id, headingMap[id]);
+    },
+    [context, controlledActiveHeading, headingMap, onActiveHeadingChange]
+  );
+  const scrollToHeading = useCallback(
+    (id) => {
+      if (typeof document === "undefined") return;
+      const element = document.getElementById(id);
+      if (!element) return;
+      element.scrollIntoView({
+        behavior: scrollBehavior,
+        block: scrollBlock
+      });
+      setActiveHeading(id);
+    },
+    [scrollBehavior, scrollBlock, setActiveHeading]
+  );
+  const observedHeadingIds = useMemo(() => {
+    return headings.map((heading) => heading.id).join("|");
+  }, [headings]);
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof window === "undefined") return;
+    if (!("IntersectionObserver" in window)) return;
+    if (headings.length === 0) return;
+    const elements = headings.map((heading) => document.getElementById(heading.id)).filter((element) => Boolean(element));
+    if (elements.length === 0) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visibleEntries = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        const nextActiveId = visibleEntries[0]?.target.id;
+        if (!nextActiveId) return;
+        setActiveHeading(nextActiveId);
+      },
+      {
+        root,
+        rootMargin,
+        threshold
+      }
+    );
+    elements.forEach((element) => {
+      observer.observe(element);
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    enabled,
+    root,
+    rootMargin,
+    threshold,
+    observedHeadingIds,
+    headings,
+    setActiveHeading
+  ]);
+  return {
+    activeHeading,
+    setActiveHeading,
+    scrollToHeading
+  };
+}
+function useMarkdownHeadings(options = {}) {
+  const context = useMarkdown();
+  const {
+    markdown,
+    headings: externalHeadings,
+    minDepth = 1,
+    maxDepth = 6
+  } = options;
+  const baseHeadings = useMemo(() => {
+    if (externalHeadings) {
+      return externalHeadings;
+    }
+    if (markdown !== void 0) {
+      return extractHeadings(markdown);
+    }
+    return context?.headings ?? [];
+  }, [context?.headings, externalHeadings, markdown]);
+  const headings = useMemo(() => {
+    return baseHeadings.filter((heading) => {
+      return heading.level >= minDepth && heading.level <= maxDepth;
+    });
+  }, [baseHeadings, minDepth, maxDepth]);
+  const numberedHeadings = useMemo(() => {
+    return generateHeadingNumbers(headings);
+  }, [headings]);
+  const headingMap = useMemo(() => {
+    return headings.reduce((acc, heading) => {
+      acc[heading.id] = heading;
+      return acc;
+    }, {});
+  }, [headings]);
+  const getHeadingById = (id) => {
+    return headingMap[id];
+  };
+  return {
+    headings,
+    numberedHeadings,
+    hasHeadings: headings.length > 0,
+    getHeadingById
+  };
+}
+function MarkdownHeading({
+  id,
+  level,
+  children,
+  className,
+  showAnchor = true,
+  ...props
+}) {
+  const tag = `h${Math.min(Math.max(level, 1), 6)}`;
+  return React2.createElement(
+    tag,
+    {
+      ...props,
+      id,
+      className: classNames66("eui-markdown-heading", className)
+    },
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      showAnchor && id ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: `#${id}`,
+          className: "eui-markdown-heading-anchor",
+          "aria-label": "Link to heading",
+          children: "#"
+        }
+      ) : null
+    ] })
+  );
+}
+var MarkdownHeading_default = MarkdownHeading;
+PrismLight.registerLanguage("bash", bash);
+PrismLight.registerLanguage("shell", bash);
+PrismLight.registerLanguage("sh", bash);
+PrismLight.registerLanguage("zsh", bash);
+PrismLight.registerLanguage("c", c);
+PrismLight.registerLanguage("cpp", cpp);
+PrismLight.registerLanguage("c++", cpp);
+PrismLight.registerLanguage("css", css);
+PrismLight.registerLanguage("scss", scss);
+PrismLight.registerLanguage("go", go);
+PrismLight.registerLanguage("java", java);
+PrismLight.registerLanguage("js", javascript);
+PrismLight.registerLanguage("javascript", javascript);
+PrismLight.registerLanguage("jsx", jsx210);
+PrismLight.registerLanguage("json", json);
+PrismLight.registerLanguage("html", markup);
+PrismLight.registerLanguage("xml", markup);
+PrismLight.registerLanguage("markup", markup);
+PrismLight.registerLanguage("py", python);
+PrismLight.registerLanguage("python", python);
+PrismLight.registerLanguage("rs", rust);
+PrismLight.registerLanguage("rust", rust);
+PrismLight.registerLanguage("sql", sql);
+PrismLight.registerLanguage("ts", typescript);
+PrismLight.registerLanguage("typescript", typescript);
+PrismLight.registerLanguage("tsx", tsx);
+PrismLight.registerLanguage("yaml", yaml);
+PrismLight.registerLanguage("yml", yaml);
+var LANGUAGE_ALIASES = {
+  js: "javascript",
+  ts: "typescript",
+  py: "python",
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  yml: "yaml",
+  html: "markup",
+  xml: "markup",
+  "c++": "cpp",
+  text: "text",
+  txt: "text",
+  plain: "text",
+  plaintext: "text"
+};
+function normalizeLanguage(language) {
+  if (!language) return "text";
+  const normalized = language.toLowerCase().trim();
+  return LANGUAGE_ALIASES[normalized] ?? normalized;
+}
+function MarkdownCodeBlock({
+  code,
+  language,
+  meta,
+  className,
+  showCopy = true,
+  wrapLongLines = false,
+  ...props
+}) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  const title = meta?.title ?? meta?.filename;
+  const resolvedLanguage = useMemo(() => {
+    return normalizeLanguage(language);
+  }, [language]);
+  const languageLabel = language || resolvedLanguage;
+  const showHeader = Boolean(title || languageLabel || showCopy);
+  const highlightLines = useMemo(() => {
+    return new Set(meta?.highlightLines ?? []);
+  }, [meta?.highlightLines]);
+  const showLineNumbers = Boolean(meta?.showLineNumbers);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const copyCode = async () => {
+    if (typeof navigator === "undefined") return;
+    if (!navigator.clipboard) return;
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = window.setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+  };
+  const lineNumberStyle = {
+    minWidth: "3rem",
+    paddingRight: "1rem",
+    color: "rgb(100 116 139)",
+    textAlign: "right",
+    userSelect: "none"
+  };
+  return /* @__PURE__ */ jsxs("div", { ...props, className: classNames66("eui-markdown-code", className), children: [
+    showHeader ? /* @__PURE__ */ jsxs("div", { className: "eui-markdown-code-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "eui-markdown-code-header-main", children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "eui-markdown-code-title", children: title }) : null,
+        languageLabel ? /* @__PURE__ */ jsx("div", { className: "eui-markdown-code-language", children: languageLabel }) : null
+      ] }),
+      showCopy ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "eui-markdown-copy-button",
+          onClick: copyCode,
+          children: copied ? "Copied" : "Copy"
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      PrismLight,
+      {
+        className: "eui-markdown-code-highlighter",
+        language: resolvedLanguage,
+        style: vscDarkPlus,
+        showLineNumbers,
+        wrapLines: highlightLines.size > 0,
+        wrapLongLines,
+        PreTag: "pre",
+        CodeTag: "code",
+        customStyle: {
+          margin: 0,
+          padding: "1rem",
+          background: "transparent",
+          fontSize: "0.875rem",
+          lineHeight: 1.7
+        },
+        codeTagProps: {
+          style: {
+            fontFamily: '"JetBrains Mono", "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace'
+          }
+        },
+        lineNumberStyle,
+        lineProps: (lineNumber) => {
+          const highlighted = highlightLines.has(lineNumber);
+          return {
+            className: highlighted ? "eui-markdown-code-line-highlighted" : void 0,
+            style: {
+              display: "block",
+              background: highlighted ? "rgba(250, 204, 21, 0.12)" : void 0
+            }
+          };
+        },
+        children: code
+      }
+    )
+  ] });
+}
+var MarkdownCodeBlock_default = MarkdownCodeBlock;
+function MarkdownInlineCode({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      ...props,
+      className: classNames66("eui-markdown-inline-code", className),
+      children
+    }
+  );
+}
+var MarkdownInlineCode_default = MarkdownInlineCode;
+function isExternalHref(href) {
+  if (!href) return false;
+  return /^https?:\/\//i.test(href);
+}
+function getSafeHref(href) {
+  if (!href) return void 0;
+  const trimmed = href.trim();
+  const isSafe = trimmed.startsWith("#") || trimmed.startsWith("/") || trimmed.startsWith("./") || trimmed.startsWith("../") || /^https?:\/\//i.test(trimmed) || /^mailto:/i.test(trimmed) || /^tel:/i.test(trimmed);
+  return isSafe ? trimmed : void 0;
+}
+function MarkdownLink({
+  href,
+  target,
+  children,
+  className,
+  openLinksInNewTab = true,
+  ...props
+}) {
+  const safeHref = getSafeHref(href);
+  if (!safeHref) {
+    return /* @__PURE__ */ jsx("span", { className, children });
+  }
+  const external = isExternalHref(safeHref);
+  const resolvedTarget = target ?? (openLinksInNewTab && external ? "_blank" : void 0);
+  const rel = resolvedTarget === "_blank" ? "noopener noreferrer" : props.rel;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      href: safeHref,
+      target: resolvedTarget,
+      rel,
+      className: classNames66("eui-markdown-link", className),
+      children
+    }
+  );
+}
+var MarkdownLink_default = MarkdownLink;
+function getSafeImageSrc(src) {
+  if (!src) return void 0;
+  const trimmed = src.trim();
+  const isSafe = trimmed.startsWith("/") || trimmed.startsWith("./") || trimmed.startsWith("../") || /^https?:\/\//i.test(trimmed) || /^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,/i.test(trimmed);
+  return isSafe ? trimmed : void 0;
+}
+function MarkdownImage({
+  src,
+  alt,
+  title,
+  className,
+  ...props
+}) {
+  const safeSrc = getSafeImageSrc(src);
+  if (!safeSrc) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...props,
+      src: safeSrc,
+      alt: alt ?? "",
+      title,
+      loading: "lazy",
+      decoding: "async",
+      className: classNames66("eui-markdown-image", className)
+    }
+  );
+}
+var MarkdownImage_default = MarkdownImage;
+function MarkdownTable({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "eui-markdown-table-wrapper", children: /* @__PURE__ */ jsx("table", { ...props, className: classNames66("eui-markdown-table", className), children }) });
+}
+function MarkdownTableCell({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("td", { ...props, className: classNames66("eui-markdown-table-cell", className), children });
+}
+function MarkdownTableHeaderCell({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ...props,
+      className: classNames66("eui-markdown-table-header-cell", className),
+      children
+    }
+  );
+}
+var MarkdownTable_default = MarkdownTable;
+function MarkdownBlockquote({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      ...props,
+      className: classNames66("eui-markdown-blockquote", className),
+      children
+    }
+  );
+}
+var MarkdownBlockquote_default = MarkdownBlockquote;
+function getTextContent(node) {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(getTextContent).join("");
+  }
+  if (isValidElement(node)) {
+    return getTextContent(node.props.children);
+  }
+  return "";
+}
+function createHeadingKey(level, text) {
+  return `${level}:${sanitizeHeading(text)}`;
+}
+function parseNumberRanges(value) {
+  if (!value) return [];
+  const normalized = value.replace(/[{}[\]\s]/g, "");
+  if (!normalized) return [];
+  const values = /* @__PURE__ */ new Set();
+  normalized.split(",").forEach((part) => {
+    if (!part) return;
+    const rangeMatch = part.match(/^(\d+)-(\d+)$/);
+    if (rangeMatch) {
+      const start = Number(rangeMatch[1]);
+      const end = Number(rangeMatch[2]);
+      for (let line2 = start; line2 <= end; line2++) {
+        values.add(line2);
+      }
+      return;
+    }
+    const line = Number(part);
+    if (!Number.isNaN(line)) {
+      values.add(line);
+    }
+  });
+  return Array.from(values).sort((a, b) => a - b);
+}
+function parseCodeMeta(metaString) {
+  if (!metaString) return void 0;
+  const filenameMatch = metaString.match(
+    /(?:filename|file)=["']?([^"'\s]+)["']?/
+  );
+  const titleMatch = metaString.match(/(?:title)=["']?([^"']+)["']?/);
+  const highlightMatch = metaString.match(/(?:highlight|lines)=["']?([^"'\s]+)["']?/) || metaString.match(/{([^}]+)}/);
+  return {
+    filename: filenameMatch?.[1],
+    title: titleMatch?.[1],
+    showLineNumbers: /\b(showLineNumbers|lineNumbers|line-numbers)\b/.test(
+      metaString
+    ),
+    highlightLines: parseNumberRanges(highlightMatch?.[1])
+  };
+}
+function getCodeMetaString(node) {
+  const value = node;
+  return value?.data?.meta || value?.data?.hProperties?.meta || value?.properties?.meta || value?.properties?.dataMeta || value?.meta;
+}
+function getLanguageFromClassName(className) {
+  if (!className) return void 0;
+  const match = className.match(/language-([^\s]+)/);
+  return match?.[1];
+}
+function getCodeInfoFromPreChildren(children) {
+  const childArray = React2.Children.toArray(children);
+  const codeElement = childArray.find((child) => {
+    if (!isValidElement(child)) return false;
+    return child.type === "code";
+  });
+  const codeProps = codeElement?.props;
+  const code = getTextContent(codeProps?.children ?? children).replace(
+    /\n$/,
+    ""
+  );
+  const language = getLanguageFromClassName(codeProps?.className);
+  const meta = parseCodeMeta(codeProps?.["data-meta"]);
+  return {
+    code,
+    language,
+    meta
+  };
+}
+function MarkdownRenderer({
+  markdown,
+  headings = [],
+  headingIdPrefix = "",
+  components,
+  className,
+  contentClassName,
+  openLinksInNewTab = true,
+  linkTarget,
+  enableGfm = true,
+  allowHtml = false,
+  sanitizeHtml = true,
+  showCopyCode = true,
+  showHeadingAnchors = true
+}) {
+  const headingQueues = /* @__PURE__ */ new Map();
+  headings.forEach((heading) => {
+    const key = createHeadingKey(heading.level, heading.text);
+    const queue = headingQueues.get(key) ?? [];
+    queue.push(heading.id);
+    headingQueues.set(key, queue);
+  });
+  const headingUsage = /* @__PURE__ */ new Map();
+  const fallbackSlugCounts = /* @__PURE__ */ new Map();
+  const resolveHeadingId = (level, children) => {
+    const text = getTextContent(children);
+    const key = createHeadingKey(level, text);
+    const queue = headingQueues.get(key);
+    if (queue?.length) {
+      const usedCount = headingUsage.get(key) ?? 0;
+      headingUsage.set(key, usedCount + 1);
+      const existingId = queue[usedCount];
+      if (existingId) {
+        return existingId;
+      }
+    }
+    return `${headingIdPrefix}${createHeadingSlug(text, {
+      slugCounts: fallbackSlugCounts
+    })}`;
+  };
+  const remarkPlugins = [];
+  if (enableGfm) {
+    remarkPlugins.push(remarkGfm);
+  }
+  const rehypePlugins = [];
+  if (allowHtml) {
+    rehypePlugins.push(rehypeRaw);
+    if (sanitizeHtml) {
+      rehypePlugins.push(rehypeSanitize);
+    }
+  }
+  const rendererComponents = {
+    h1: ({ node: _node, children, ...rest }) => {
+      const Component = components?.h1 ?? MarkdownHeading_default;
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...rest,
+          id: resolveHeadingId(1, children),
+          level: 1,
+          showAnchor: showHeadingAnchors,
+          children
+        }
+      );
+    },
+    h2: ({ node: _node, children, ...rest }) => {
+      const Component = components?.h2 ?? MarkdownHeading_default;
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...rest,
+          id: resolveHeadingId(2, children),
+          level: 2,
+          showAnchor: showHeadingAnchors,
+          children
+        }
+      );
+    },
+    h3: ({ node: _node, children, ...rest }) => {
+      const Component = components?.h3 ?? MarkdownHeading_default;
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...rest,
+          id: resolveHeadingId(3, children),
+          level: 3,
+          showAnchor: showHeadingAnchors,
+          children
+        }
+      );
+    },
+    h4: ({ node: _node, children, ...rest }) => {
+      const Component = components?.h4 ?? MarkdownHeading_default;
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...rest,
+          id: resolveHeadingId(4, children),
+          level: 4,
+          showAnchor: showHeadingAnchors,
+          children
+        }
+      );
+    },
+    h5: ({ node: _node, children, ...rest }) => {
+      const Component = components?.h5 ?? MarkdownHeading_default;
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...rest,
+          id: resolveHeadingId(5, children),
+          level: 5,
+          showAnchor: showHeadingAnchors,
+          children
+        }
+      );
+    },
+    h6: ({ node: _node, children, ...rest }) => {
+      const Component = components?.h6 ?? MarkdownHeading_default;
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...rest,
+          id: resolveHeadingId(6, children),
+          level: 6,
+          showAnchor: showHeadingAnchors,
+          children
+        }
+      );
+    },
+    /**
+     * Important:
+     * For block code, return a native <code> with className="language-*".
+     * Then the pre renderer can reliably extract language + meta.
+     */
+    code: ({ node, className: className2, children, ...rest }) => {
+      const language = getLanguageFromClassName(className2);
+      if (language) {
+        return /* @__PURE__ */ jsx(
+          "code",
+          {
+            ...rest,
+            className: className2,
+            "data-meta": getCodeMetaString(node),
+            children
+          }
+        );
+      }
+      const Component = components?.code ?? MarkdownInlineCode_default;
+      return /* @__PURE__ */ jsx(Component, { ...rest, className: className2, children });
+    },
+    /**
+     * Do not spread rest here.
+     * React-markdown's pre props are HTMLPreElement props.
+     * MarkdownCodeBlock root is a div.
+     */
+    pre: ({ node: _node, children }) => {
+      const Component = components?.pre ?? MarkdownCodeBlock_default;
+      const { code, language, meta } = getCodeInfoFromPreChildren(children);
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          code,
+          language,
+          meta,
+          showCopy: showCopyCode
+        }
+      );
+    },
+    a: ({ node: _node, children, href, target, ...rest }) => {
+      const Component = components?.a ?? MarkdownLink_default;
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...rest,
+          href,
+          target: linkTarget ?? target,
+          openLinksInNewTab,
+          children
+        }
+      );
+    },
+    img: ({ node: _node, src, alt, title, ...rest }) => {
+      const Component = components?.img ?? MarkdownImage_default;
+      return /* @__PURE__ */ jsx(Component, { ...rest, src, alt, title });
+    },
+    table: ({ node: _node, children, ...rest }) => {
+      const Component = components?.table ?? MarkdownTable_default;
+      return /* @__PURE__ */ jsx(Component, { ...rest, children });
+    },
+    td: ({ node: _node, children, ...rest }) => {
+      const Component = components?.td ?? MarkdownTableCell;
+      return /* @__PURE__ */ jsx(Component, { ...rest, children });
+    },
+    th: ({ node: _node, children, ...rest }) => {
+      const Component = components?.th ?? MarkdownTableHeaderCell;
+      return /* @__PURE__ */ jsx(Component, { ...rest, children });
+    },
+    blockquote: ({ node: _node, children, ...rest }) => {
+      const Component = components?.blockquote ?? MarkdownBlockquote_default;
+      return /* @__PURE__ */ jsx(Component, { ...rest, children });
+    },
+    ...components
+  };
+  return /* @__PURE__ */ jsx("div", { className: classNames66("eui-markdown markdown-body", className), children: /* @__PURE__ */ jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins,
+      rehypePlugins,
+      skipHtml: !allowHtml,
+      components: rendererComponents,
+      children: markdown
+    }
+  ) }) });
+}
+var MarkdownRenderer_default = MarkdownRenderer;
+function MarkdownViewer({
+  value,
+  headings: externalHeadings,
+  headingIdPrefix = "",
+  enableActiveHeading = true,
+  ...props
+}) {
+  const context = useMarkdown();
+  const markdown = value ?? context?.markdown ?? "";
+  const headings = useMemo(() => {
+    if (externalHeadings) {
+      return externalHeadings;
+    }
+    if (context?.headings?.length) {
+      return context.headings;
+    }
+    return extractHeadings(markdown, {
+      idPrefix: headingIdPrefix
+    });
+  }, [context?.headings, externalHeadings, headingIdPrefix, markdown]);
+  useActiveHeading({
+    headings,
+    enabled: enableActiveHeading && headings.length > 0
+  });
+  return /* @__PURE__ */ jsx(
+    MarkdownRenderer_default,
+    {
+      markdown,
+      headings,
+      headingIdPrefix,
+      ...props
+    }
+  );
+}
+var MarkdownViewer_default = MarkdownViewer;
+function hasNumbering(heading) {
+  return "numbering" in heading;
+}
+function MarkdownTOCItem({
+  heading,
+  active = false,
+  numbered = true,
+  sanitizeLabel = true,
+  indentSize = 12,
+  className,
+  activeClassName,
+  inactiveClassName,
+  onSelect
+}) {
+  const label = sanitizeLabel ? sanitizeHeading(heading.text) : heading.text;
+  const numbering = hasNumbering(heading) ? heading.numbering : void 0;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect?.(heading),
+      "aria-current": active ? "location" : void 0,
+      title: label,
+      className: classNames66(
+        "eui-markdown-toc-item",
+        "block w-full text-left text-sm transition-all ease-in-out duration-150",
+        "hover:text-primary",
+        active ? classNames66("text-primary font-semibold underline", activeClassName) : classNames66("text-gray-500 dark:text-gray-400", inactiveClassName),
+        className
+      ),
+      style: {
+        paddingLeft: `${Math.max(heading.level - 1, 0) * indentSize}px`
+      },
+      children: [
+        numbered && numbering ? /* @__PURE__ */ jsx("span", { className: "eui-markdown-toc-item-number mr-2 opacity-70", children: numbering }) : null,
+        /* @__PURE__ */ jsx("span", { className: "eui-markdown-toc-item-label", children: label })
+      ]
+    }
+  );
+}
+var MarkdownTOCItem_default = MarkdownTOCItem;
+function MarkdownTOC({
+  title = "Table of Contents",
+  markdown,
+  headings: externalHeadings,
+  minDepth = 1,
+  maxDepth = 6,
+  numbered = true,
+  sanitizeLabels = true,
+  collapsible = false,
+  defaultCollapsed = false,
+  emptyState = null,
+  smoothScroll = true,
+  scrollBlock = "start",
+  indentSize = 12,
+  className,
+  titleClassName,
+  listClassName,
+  itemClassName,
+  activeItemClassName,
+  inactiveItemClassName,
+  activeHeading: controlledActiveHeading,
+  onActiveHeadingChange,
+  onHeadingClick
+}) {
+  const context = useMarkdown();
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const { headings, numberedHeadings, hasHeadings } = useMarkdownHeadings({
+    markdown,
+    headings: externalHeadings,
+    minDepth,
+    maxDepth
+  });
+  const tocHeadings = useMemo(() => {
+    return numbered ? numberedHeadings : headings;
+  }, [headings, numbered, numberedHeadings]);
+  const { activeHeading, scrollToHeading, setActiveHeading } = useActiveHeading(
+    {
+      headings,
+      enabled: false,
+      activeHeading: controlledActiveHeading,
+      scrollBehavior: smoothScroll ? "smooth" : "auto",
+      scrollBlock,
+      onActiveHeadingChange
+    }
+  );
+  if (!context && !markdown && !externalHeadings) {
+    return null;
+  }
+  if (!hasHeadings) {
+    return emptyState ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames66(
+          "eui-markdown-toc",
+          "text-sm text-gray-500 dark:text-gray-400",
+          className
+        ),
+        children: emptyState
+      }
+    ) : null;
+  }
+  const handleSelect = (heading) => {
+    scrollToHeading(heading.id);
+    setActiveHeading(heading.id);
+    onHeadingClick?.(heading);
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "eui-markdown-toc-header", children: collapsible ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setCollapsed((value) => !value),
+        className: classNames66(
+          "eui-markdown-toc-title",
+          "flex w-full items-center justify-between gap-2 text-left",
+          "text-sm font-semibold uppercase tracking-wide",
+          "text-gray-900 dark:text-gray-100",
+          titleClassName
+        ),
+        "aria-expanded": !collapsed,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: title }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames66(
+                "text-xs opacity-60 transition-transform duration-150",
+                !collapsed && "rotate-90"
+              ),
+              "aria-hidden": "true",
+              children: "\u203A"
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: classNames66(
+          "eui-markdown-toc-title",
+          "text-sm font-semibold uppercase tracking-wide",
+          "text-gray-900 dark:text-gray-100",
+          titleClassName
+        ),
+        children: title
+      }
+    ) }) : null,
+    !collapsed ? /* @__PURE__ */ jsx(
+      "nav",
+      {
+        className: classNames66(
+          "eui-markdown-toc-list",
+          "space-y-1",
+          listClassName
+        ),
+        "aria-label": title || "Markdown table of contents",
+        children: tocHeadings.map((heading) => /* @__PURE__ */ jsx(
+          MarkdownTOCItem_default,
+          {
+            heading,
+            active: activeHeading === heading.id,
+            numbered,
+            sanitizeLabel: sanitizeLabels,
+            indentSize,
+            className: itemClassName,
+            activeClassName: activeItemClassName,
+            inactiveClassName: inactiveItemClassName,
+            onSelect: handleSelect
+          },
+          heading.id
+        ))
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ jsx("aside", { className: classNames66("eui-markdown-toc", "space-y-4", className), children: content });
+}
+var MarkdownTOC_default = MarkdownTOC;
+var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
+  {
+    id: "heading-1",
+    label: "H1",
+    title: "Heading 1"
+  },
+  {
+    id: "heading-2",
+    label: "H2",
+    title: "Heading 2"
+  },
+  {
+    id: "heading-3",
+    label: "H3",
+    title: "Heading 3"
+  },
+  {
+    id: "bold",
+    label: "B",
+    title: "Bold",
+    shortcut: "Ctrl+B"
+  },
+  {
+    id: "italic",
+    label: "I",
+    title: "Italic",
+    shortcut: "Ctrl+I"
+  },
+  {
+    id: "strike",
+    label: "S",
+    title: "Strikethrough"
+  },
+  {
+    id: "inline-code",
+    label: "`",
+    title: "Inline code"
+  },
+  {
+    id: "code-block",
+    label: "{}",
+    title: "Code block"
+  },
+  {
+    id: "link",
+    label: "Link",
+    title: "Link"
+  },
+  {
+    id: "image",
+    label: "Img",
+    title: "Image"
+  },
+  {
+    id: "unordered-list",
+    label: "\u2022 List",
+    title: "Bullet list"
+  },
+  {
+    id: "ordered-list",
+    label: "1. List",
+    title: "Numbered list"
+  },
+  {
+    id: "quote",
+    label: "Quote",
+    title: "Blockquote"
+  },
+  {
+    id: "table",
+    label: "Table",
+    title: "Table"
+  },
+  {
+    id: "hr",
+    label: "\u2014",
+    title: "Horizontal rule"
+  }
+];
+function MarkdownToolbar({
+  actions = DEFAULT_MARKDOWN_TOOLBAR_ACTIONS,
+  disabled = false,
+  actionsDisabled = false,
+  compact = false,
+  viewMode = "preview",
+  showViewModeToggle = true,
+  onViewModeToggle,
+  className,
+  buttonClassName,
+  toggleButtonClassName,
+  onAction
+}) {
+  const isPreviewMode = viewMode === "preview";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames66(
+        "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",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: disabled || actionsDisabled,
+            title: action.shortcut ? `${action.title || action.label} (${action.shortcut})` : action.title || action.label,
+            onClick: () => onAction?.(action.id),
+            className: classNames66(
+              "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",
+              "dark:text-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-800",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              compact ? "h-7 px-2 text-xs" : "h-8 px-2.5 text-sm",
+              buttonClassName
+            ),
+            children: action.label
+          },
+          action.id
+        )) }),
+        showViewModeToggle ? /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: onViewModeToggle,
+            title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
+            className: classNames66(
+              "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",
+              "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              compact ? "h-7 px-2 text-xs" : "h-8 px-3 text-sm",
+              toggleButtonClassName
+            ),
+            children: isPreviewMode ? "Syntax" : "Preview"
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+var MarkdownToolbar_default = MarkdownToolbar;
+function getLineRange(value, start, end) {
+  const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+  const lineEndIndex = value.indexOf("\n", end);
+  return {
+    lineStart,
+    lineEnd: lineEndIndex === -1 ? value.length : lineEndIndex
+  };
+}
+function replaceRange(value, start, end, replacement) {
+  return value.slice(0, start) + replacement + value.slice(end);
+}
+function wrapSelection(value, start, end, before, after = before, placeholder = "text") {
+  const selected = value.slice(start, end);
+  const content = selected || placeholder;
+  const replacement = `${before}${content}${after}`;
+  const nextValue = replaceRange(value, start, end, replacement);
+  const selectionStart = start + before.length;
+  const selectionEnd = selectionStart + content.length;
+  return {
+    value: nextValue,
+    selectionStart,
+    selectionEnd
+  };
+}
+function prefixSelectedLines(value, start, end, getPrefix) {
+  const { lineStart, lineEnd } = getLineRange(value, start, end);
+  const selectedBlock = value.slice(lineStart, lineEnd);
+  const lines = selectedBlock.split("\n");
+  const replacement = lines.map((line, index) => {
+    const prefix = getPrefix(index);
+    if (line.startsWith(prefix)) {
+      return line;
+    }
+    return `${prefix}${line}`;
+  }).join("\n");
+  const nextValue = replaceRange(value, lineStart, lineEnd, replacement);
+  const delta = replacement.length - selectedBlock.length;
+  return {
+    value: nextValue,
+    selectionStart: start + getPrefix(0).length,
+    selectionEnd: end + delta
+  };
+}
+function prefixCurrentLine(value, start, end, prefix) {
+  const { lineStart, lineEnd } = getLineRange(value, start, end);
+  const line = value.slice(lineStart, lineEnd);
+  const cleanedLine = line.replace(/^#{1,6}\s+/, "");
+  const replacement = `${prefix}${cleanedLine}`;
+  const nextValue = replaceRange(value, lineStart, lineEnd, replacement);
+  return {
+    value: nextValue,
+    selectionStart: lineStart + prefix.length,
+    selectionEnd: lineStart + replacement.length
+  };
+}
+function insertBlock(value, start, end, block) {
+  const before = value.slice(0, start);
+  const after = value.slice(end);
+  const needsLeadingNewline = before.length > 0 && !before.endsWith("\n");
+  const needsTrailingNewline = after.length > 0 && !after.startsWith("\n");
+  const replacement = `${needsLeadingNewline ? "\n" : ""}${block}${needsTrailingNewline ? "\n" : ""}`;
+  const nextValue = replaceRange(value, start, end, replacement);
+  const selectionStart = start + (needsLeadingNewline ? 1 : 0);
+  const selectionEnd = selectionStart + block.length;
+  return {
+    value: nextValue,
+    selectionStart,
+    selectionEnd
+  };
+}
+function applyMarkdownAction(value, start, end, action) {
+  switch (action) {
+    case "heading-1":
+      return prefixCurrentLine(value, start, end, "# ");
+    case "heading-2":
+      return prefixCurrentLine(value, start, end, "## ");
+    case "heading-3":
+      return prefixCurrentLine(value, start, end, "### ");
+    case "bold":
+      return wrapSelection(value, start, end, "**", "**", "bold text");
+    case "italic":
+      return wrapSelection(value, start, end, "_", "_", "italic text");
+    case "strike":
+      return wrapSelection(value, start, end, "~~", "~~", "strikethrough text");
+    case "inline-code":
+      return wrapSelection(value, start, end, "`", "`", "code");
+    case "code-block": {
+      const selected = value.slice(start, end) || "code";
+      return insertBlock(value, start, end, `\`\`\`ts
+${selected}
+\`\`\``);
+    }
+    case "link": {
+      const selected = value.slice(start, end) || "link text";
+      const replacement = `[${selected}](https://example.com)`;
+      const nextValue = replaceRange(value, start, end, replacement);
+      return {
+        value: nextValue,
+        selectionStart: start + 1,
+        selectionEnd: start + 1 + selected.length
+      };
+    }
+    case "image": {
+      const selected = value.slice(start, end) || "image alt";
+      const replacement = `![${selected}](https://example.com/image.png)`;
+      const nextValue = replaceRange(value, start, end, replacement);
+      return {
+        value: nextValue,
+        selectionStart: start + 2,
+        selectionEnd: start + 2 + selected.length
+      };
+    }
+    case "unordered-list":
+      return prefixSelectedLines(value, start, end, () => "- ");
+    case "ordered-list":
+      return prefixSelectedLines(
+        value,
+        start,
+        end,
+        (index) => `${index + 1}. `
+      );
+    case "quote":
+      return prefixSelectedLines(value, start, end, () => "> ");
+    case "table":
+      return insertBlock(
+        value,
+        start,
+        end,
+        [
+          "| Column 1 | Column 2 | Column 3 |",
+          "| --- | --- | --- |",
+          "| Value 1 | Value 2 | Value 3 |"
+        ].join("\n")
+      );
+    case "hr":
+      return insertBlock(value, start, end, "---");
+    default:
+      return {
+        value,
+        selectionStart: start,
+        selectionEnd: end
+      };
+  }
+}
+function MarkdownSourceEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  onBlur,
+  viewMode,
+  defaultViewMode = "preview",
+  onViewModeChange,
+  showToolbar = true,
+  showViewModeToggle = true,
+  toolbarProps,
+  previewProps,
+  minHeight = 260,
+  maxHeight,
+  disabled = false,
+  readOnly = false,
+  placeholder = "Write markdown...",
+  containerClassName,
+  toolbarClassName,
+  textareaClassName,
+  previewClassName,
+  className,
+  onKeyDown,
+  ...props
+}) {
+  const textareaRef = useRef(null);
+  const isControlled = value !== void 0;
+  const isViewModeControlled = viewMode !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalViewMode, setInternalViewMode] = useState(defaultViewMode);
+  const currentValue = isControlled ? value : internalValue;
+  const currentViewMode = isViewModeControlled ? viewMode : internalViewMode;
+  const resolvedValue = currentValue ?? "";
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  useEffect(() => {
+    if (!isViewModeControlled) {
+      setInternalViewMode(defaultViewMode);
+    }
+  }, [defaultViewMode, isViewModeControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  const updateViewMode = (nextViewMode) => {
+    if (!isViewModeControlled) {
+      setInternalViewMode(nextViewMode);
+    }
+    onViewModeChange?.(nextViewMode);
+  };
+  const toggleViewMode = () => {
+    updateViewMode(currentViewMode === "preview" ? "source" : "preview");
+  };
+  const runAction = (action) => {
+    const textarea = textareaRef.current;
+    if (!textarea || disabled || readOnly) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const result = applyMarkdownAction(resolvedValue, start, end, action);
+    updateValue(result.value);
+    window.setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(result.selectionStart, result.selectionEnd);
+    }, 0);
+  };
+  const handleToolbarAction = (action) => {
+    if (currentViewMode === "preview") {
+      updateViewMode("source");
+      window.setTimeout(() => {
+        runAction(action);
+      }, 0);
+      return;
+    }
+    runAction(action);
+  };
+  const handleKeyDown = (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "b") {
+      event.preventDefault();
+      runAction("bold");
+      return;
+    }
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "i") {
+      event.preventDefault();
+      runAction("italic");
+      return;
+    }
+    onKeyDown?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames66(
+        "eui-markdown-editor",
+        "overflow-hidden rounded border border-gray-300 bg-white",
+        "dark:border-gray-700 dark:bg-gray-950",
+        containerClassName,
+        className
+      ),
+      children: [
+        showToolbar ? /* @__PURE__ */ jsx(
+          MarkdownToolbar_default,
+          {
+            ...toolbarProps,
+            disabled,
+            actionsDisabled: readOnly,
+            viewMode: currentViewMode,
+            showViewModeToggle,
+            className: classNames66(toolbarClassName, toolbarProps?.className),
+            onViewModeToggle: toggleViewMode,
+            onAction: handleToolbarAction
+          }
+        ) : null,
+        currentViewMode === "preview" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames66(
+              "eui-markdown-editor-preview",
+              "min-h-[260px] p-4",
+              previewClassName
+            ),
+            style: {
+              minHeight,
+              maxHeight
+            },
+            children: resolvedValue.trim() ? /* @__PURE__ */ jsx(MarkdownViewer_default, { ...previewProps, value: resolvedValue }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: placeholder })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ...props,
+            ref: textareaRef,
+            value: resolvedValue,
+            disabled,
+            readOnly,
+            placeholder,
+            onChange: (event) => updateValue(event.target.value),
+            onBlur,
+            onKeyDown: handleKeyDown,
+            className: classNames66(
+              "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",
+              "dark:text-gray-100 dark:placeholder:text-gray-500",
+              "disabled:cursor-not-allowed disabled:opacity-60",
+              textareaClassName
+            ),
+            style: {
+              minHeight,
+              maxHeight,
+              ...props.style
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var MarkdownSourceEditor_default = MarkdownSourceEditor;
+function MarkdownPreviewPane({
+  value = "",
+  emptyState = /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Nothing to preview yet." }),
+  className,
+  contentClassName,
+  ...viewerProps
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames66(
+        "eui-markdown-preview-pane",
+        "rounded border border-gray-300 bg-white p-4",
+        "dark:border-gray-700 dark:bg-gray-950",
+        className
+      ),
+      children: value.trim() ? /* @__PURE__ */ jsx(
+        MarkdownViewer_default,
+        {
+          ...viewerProps,
+          value,
+          className: contentClassName
+        }
+      ) : emptyState
+    }
+  );
+}
+var MarkdownPreviewPane_default = MarkdownPreviewPane;
+function MarkdownSplitEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  onBlur,
+  previewProps,
+  previewPlacement = "right",
+  sourceLabel = "Editor",
+  previewLabel = "Preview",
+  wrapperClassName,
+  sourceWrapperClassName,
+  previewWrapperClassName,
+  ...sourceEditorProps
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  const isHorizontal = previewPlacement === "right";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames66(
+        "eui-markdown-split-editor",
+        "grid gap-4",
+        isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames66(
+              "eui-markdown-split-source",
+              "min-w-0 space-y-2",
+              sourceWrapperClassName
+            ),
+            children: [
+              sourceLabel ? /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200", children: sourceLabel }) : null,
+              /* @__PURE__ */ jsx(
+                MarkdownSourceEditor_default,
+                {
+                  ...sourceEditorProps,
+                  value: currentValue,
+                  onChange: updateValue,
+                  onBlur,
+                  defaultViewMode: "source",
+                  showViewModeToggle: false
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames66(
+              "eui-markdown-split-preview",
+              "min-w-0 space-y-2",
+              previewWrapperClassName
+            ),
+            children: [
+              previewLabel ? /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200", children: previewLabel }) : null,
+              /* @__PURE__ */ jsx(MarkdownPreviewPane_default, { ...previewProps, value: currentValue })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var MarkdownSplitEditor_default = MarkdownSplitEditor;
+function MarkdownEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  onBlur,
+  mode = "source",
+  viewMode,
+  defaultViewMode = "preview",
+  onViewModeChange,
+  splitProps,
+  richEditor,
+  ...sourceEditorProps
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  if (mode === "rich" && richEditor) {
+    return /* @__PURE__ */ jsx(Fragment, { children: richEditor });
+  }
+  if (mode === "split") {
+    return /* @__PURE__ */ jsx(
+      MarkdownSplitEditor_default,
+      {
+        ...sourceEditorProps,
+        ...splitProps,
+        value: currentValue,
+        onChange: updateValue,
+        onBlur
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MarkdownSourceEditor_default,
+    {
+      ...sourceEditorProps,
+      value: currentValue,
+      onChange: updateValue,
+      onBlur,
+      viewMode,
+      defaultViewMode,
+      onViewModeChange
+    }
+  );
+}
+var MarkdownEditor_default = MarkdownEditor;
+function MarkdownField({
+  name,
+  validate,
+  label,
+  helperText,
+  wrapperClassName,
+  labelClassName,
+  helperTextClassName,
+  ...editorProps
+}) {
+  const [field, meta, helpers] = useField({
+    name,
+    validate
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames66(
+        "eui-markdown-field",
+        "relative space-y-2",
+        wrapperClassName
+      ),
+      children: [
+        label ? /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: editorProps.id || field.name,
+            className: classNames66(
+              "block text-sm font-medium text-gray-700 dark:text-gray-200",
+              labelClassName
+            ),
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          MarkdownEditor_default,
+          {
+            ...editorProps,
+            id: editorProps.id || field.name,
+            name: field.name,
+            value: field.value || "",
+            onChange: (nextValue) => {
+              helpers.setValue(nextValue);
+            },
+            onBlur: () => {
+              helpers.setTouched(true);
+            }
+          }
+        ),
+        helperText && !hasError ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: classNames66(
+              "text-sm text-gray-500 dark:text-gray-400",
+              helperTextClassName
+            ),
+            children: helperText
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(InputResponse_default, { name: field.name, visibility: hasError, variant: "danger" })
+      ]
+    }
+  );
+}
+var MarkdownField_default = MarkdownField;
+function resolveSize(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function MarkdownLayout({
+  children,
+  content,
+  toc,
+  sidebar,
+  aside,
+  header,
+  footer,
+  tocPosition = "right",
+  showToc = true,
+  showSidebar = true,
+  showAside = true,
+  stickyToc = true,
+  stickySidebar = true,
+  stickyAside = true,
+  stickyOffset = "6rem",
+  maxWidth = "1440px",
+  className,
+  containerClassName,
+  gridClassName,
+  contentClassName,
+  tocClassName,
+  sidebarClassName,
+  asideClassName,
+  headerClassName,
+  footerClassName
+}) {
+  const resolvedContent = children ?? content;
+  const hasToc = showToc && Boolean(toc);
+  const hasSidebar = showSidebar && Boolean(sidebar);
+  const hasAside = showAside && Boolean(aside);
+  const stickyStyle = {
+    top: resolveSize(stickyOffset)
+  };
+  const hasLeftToc = hasToc && tocPosition === "left";
+  const hasRightToc = hasToc && tocPosition === "right";
+  return /* @__PURE__ */ jsx("div", { className: classNames66("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames66(
+        "eui-markdown-layout-container",
+        "mx-auto w-full px-4 sm:px-6 lg:px-8",
+        containerClassName
+      ),
+      style: {
+        maxWidth: resolveSize(maxWidth)
+      },
+      children: [
+        header ? /* @__PURE__ */ jsx(
+          "header",
+          {
+            className: classNames66(
+              "eui-markdown-layout-header",
+              "mb-8",
+              headerClassName
+            ),
+            children: header
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames66(
+              "eui-markdown-layout-grid",
+              "grid grid-cols-1 gap-8",
+              hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
+              hasSidebar && !hasToc && "lg:grid-cols-[16rem_minmax(0,1fr)]",
+              !hasSidebar && hasToc && "lg:grid-cols-[minmax(0,1fr)_18rem]",
+              hasAside && "2xl:grid-cols-[16rem_minmax(0,1fr)_18rem_16rem]",
+              gridClassName
+            ),
+            children: [
+              hasSidebar ? /* @__PURE__ */ jsx(
+                "aside",
+                {
+                  className: classNames66(
+                    "eui-markdown-layout-sidebar",
+                    "min-w-0",
+                    stickySidebar && "lg:sticky lg:self-start",
+                    sidebarClassName
+                  ),
+                  style: stickySidebar ? stickyStyle : void 0,
+                  children: sidebar
+                }
+              ) : null,
+              hasLeftToc ? /* @__PURE__ */ jsx(
+                "aside",
+                {
+                  className: classNames66(
+                    "eui-markdown-layout-toc",
+                    "min-w-0",
+                    stickyToc && "lg:sticky lg:self-start",
+                    tocClassName
+                  ),
+                  style: stickyToc ? stickyStyle : void 0,
+                  children: toc
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "main",
+                {
+                  className: classNames66(
+                    "eui-markdown-layout-content",
+                    "min-w-0",
+                    contentClassName
+                  ),
+                  children: resolvedContent
+                }
+              ),
+              hasRightToc ? /* @__PURE__ */ jsx(
+                "aside",
+                {
+                  className: classNames66(
+                    "eui-markdown-layout-toc",
+                    "min-w-0",
+                    stickyToc && "lg:sticky lg:self-start",
+                    tocClassName
+                  ),
+                  style: stickyToc ? stickyStyle : void 0,
+                  children: toc
+                }
+              ) : null,
+              hasAside ? /* @__PURE__ */ jsx(
+                "aside",
+                {
+                  className: classNames66(
+                    "eui-markdown-layout-aside",
+                    "min-w-0",
+                    stickyAside && "2xl:sticky 2xl:self-start",
+                    asideClassName
+                  ),
+                  style: stickyAside ? stickyStyle : void 0,
+                  children: aside
+                }
+              ) : null
+            ]
+          }
+        ),
+        footer ? /* @__PURE__ */ jsx(
+          "footer",
+          {
+            className: classNames66(
+              "eui-markdown-layout-footer",
+              "mt-10",
+              footerClassName
+            ),
+            children: footer
+          }
+        ) : null
+      ]
+    }
+  ) });
+}
+var MarkdownLayout_default = MarkdownLayout;
+function MarkdownDocsLayoutContent({
+  children,
+  markdown,
+  value,
+  headings,
+  title,
+  description,
+  header,
+  headerActions,
+  content,
+  toc,
+  viewerProps,
+  tocProps,
+  enableDefaultViewer = true,
+  enableDefaultToc = true,
+  docsHeaderClassName,
+  docsTitleClassName,
+  docsDescriptionClassName,
+  ...layoutProps
+}) {
+  const resolvedMarkdown = value ?? markdown ?? "";
+  const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames66(
+        "eui-markdown-docs-header",
+        "flex flex-col gap-4 border-b border-gray-200 pb-6",
+        "dark:border-gray-700",
+        docsHeaderClassName
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+          title ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: classNames66(
+                "eui-markdown-docs-title",
+                "text-3xl font-bold tracking-tight text-gray-950",
+                "dark:text-gray-50",
+                docsTitleClassName
+              ),
+              children: title
+            }
+          ) : null,
+          description ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames66(
+                "eui-markdown-docs-description",
+                "max-w-3xl text-base leading-7 text-gray-600",
+                "dark:text-gray-400",
+                docsDescriptionClassName
+              ),
+              children: description
+            }
+          ) : null
+        ] }),
+        headerActions ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: headerActions }) : null
+      ] })
+    }
+  ) : null);
+  const resolvedContent = children ?? content ?? (enableDefaultViewer ? /* @__PURE__ */ jsx(
+    MarkdownViewer_default,
+    {
+      ...viewerProps,
+      value: resolvedMarkdown,
+      headings
+    }
+  ) : null);
+  const resolvedToc = toc ?? (enableDefaultToc ? /* @__PURE__ */ jsx(
+    MarkdownTOC_default,
+    {
+      ...tocProps,
+      markdown: resolvedMarkdown,
+      headings
+    }
+  ) : null);
+  return /* @__PURE__ */ jsx(
+    MarkdownLayout_default,
+    {
+      ...layoutProps,
+      header: resolvedHeader,
+      toc: resolvedToc,
+      content: resolvedContent
+    }
+  );
+}
+function MarkdownDocsLayout({
+  markdown,
+  value,
+  headings,
+  meta,
+  providerProps,
+  enableProvider = true,
+  ...props
+}) {
+  const resolvedMarkdown = value ?? markdown ?? "";
+  if (!enableProvider) {
+    return /* @__PURE__ */ jsx(
+      MarkdownDocsLayoutContent,
+      {
+        ...props,
+        markdown,
+        value,
+        headings
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MarkdownProvider_default,
+    {
+      ...providerProps,
+      markdown: resolvedMarkdown,
+      headings,
+      meta,
+      children: /* @__PURE__ */ jsx(
+        MarkdownDocsLayoutContent,
+        {
+          ...props,
+          markdown: resolvedMarkdown,
+          headings
+        }
+      )
+    }
+  );
+}
+var MarkdownDocsLayout_default = MarkdownDocsLayout;
+function toCssSize2(value) {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+function CodeMirrorMarkdownEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  onBlur,
+  id,
+  name,
+  placeholder = "Write markdown...",
+  disabled = false,
+  readOnly = false,
+  autoFocus = false,
+  minHeight = 320,
+  maxHeight,
+  height,
+  dark = false,
+  className,
+  editorClassName,
+  extensions
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      "data-name": name,
+      className: classNames66(
+        "eui-markdown-adapter",
+        "eui-markdown-codemirror-adapter",
+        "overflow-hidden rounded border border-gray-300 bg-white",
+        "dark:border-gray-700 dark:bg-gray-950",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      ),
+      style: {
+        minHeight: toCssSize2(minHeight),
+        maxHeight: toCssSize2(maxHeight)
+      },
+      children: /* @__PURE__ */ jsx(
+        CodeMirror,
+        {
+          value: currentValue,
+          height,
+          minHeight: toCssSize2(minHeight),
+          maxHeight: toCssSize2(maxHeight),
+          placeholder,
+          autoFocus,
+          editable: !disabled && !readOnly,
+          readOnly,
+          theme: dark ? oneDark : void 0,
+          extensions: [markdown(), ...extensions ?? []],
+          basicSetup: {
+            lineNumbers: true,
+            foldGutter: true,
+            highlightActiveLine: true,
+            highlightSelectionMatches: true,
+            autocompletion: true,
+            closeBrackets: true,
+            bracketMatching: true
+          },
+          className: classNames66("eui-markdown-codemirror", editorClassName),
+          onChange: updateValue,
+          onBlur
+        }
+      )
+    }
+  );
+}
+var CodeMirrorMarkdownEditor_default = CodeMirrorMarkdownEditor;
+function toCssSize3(value) {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+function createDefaultPlugins(showToolbar) {
+  return [
+    headingsPlugin(),
+    listsPlugin(),
+    quotePlugin(),
+    thematicBreakPlugin(),
+    markdownShortcutPlugin(),
+    linkPlugin(),
+    imagePlugin(),
+    tablePlugin(),
+    codeBlockPlugin({
+      defaultCodeBlockLanguage: "tsx"
+    }),
+    codeMirrorPlugin({
+      codeBlockLanguages: {
+        js: "JavaScript",
+        jsx: "JSX",
+        ts: "TypeScript",
+        tsx: "TSX",
+        css: "CSS",
+        scss: "SCSS",
+        json: "JSON",
+        bash: "Bash",
+        sh: "Shell",
+        html: "HTML",
+        xml: "XML",
+        md: "Markdown"
+      }
+    }),
+    ...showToolbar ? [
+      toolbarPlugin({
+        toolbarContents: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(UndoRedo, {}),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx(BoldItalicUnderlineToggles, {}),
+          /* @__PURE__ */ jsx(CodeToggle, {}),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx(ListsToggle, {}),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx(CreateLink, {}),
+          /* @__PURE__ */ jsx(InsertImage, {}),
+          /* @__PURE__ */ jsx(InsertTable, {}),
+          /* @__PURE__ */ jsx(InsertCodeBlock, {})
+        ] })
+      })
+    ] : []
+  ];
+}
+function MDXMarkdownEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  onBlur,
+  id,
+  name,
+  disabled = false,
+  readOnly = false,
+  minHeight = 360,
+  maxHeight,
+  dark = false,
+  className,
+  editorClassName,
+  plugins,
+  showToolbar = true,
+  ...props
+}) {
+  const editorRef = useRef(null);
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  useEffect(() => {
+    if (!isControlled) return;
+    editorRef.current?.setMarkdown(value ?? "");
+  }, [value, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      "data-name": name,
+      onBlur,
+      className: classNames66(
+        "eui-markdown-adapter",
+        "eui-markdown-mdx-adapter",
+        dark && "dark",
+        disabled && "is-disabled",
+        className
+      ),
+      style: {
+        minHeight: toCssSize3(minHeight),
+        maxHeight: toCssSize3(maxHeight)
+      },
+      children: /* @__PURE__ */ jsx(
+        MDXEditor,
+        {
+          ...props,
+          ref: editorRef,
+          markdown: currentValue ?? "",
+          readOnly: disabled || readOnly,
+          plugins: plugins ?? createDefaultPlugins(showToolbar),
+          className: classNames66("eui-markdown-mdx-editor", editorClassName),
+          contentEditableClassName: "eui-markdown-mdx-content",
+          onChange: updateValue
+        }
+      )
+    }
+  );
+}
+var MDXMarkdownEditor_default = MDXMarkdownEditor;
+function toCssSize4(value) {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+function MilkdownInnerEditor({
+  currentValue,
+  updateValue,
+  onBlur,
+  disabled = false,
+  readOnly = false,
+  editorClassName,
+  useGfm = true
+}) {
+  useEditor(
+    (root) => {
+      let editor = Editor.make().config((ctx) => {
+        ctx.set(rootCtx, root);
+        ctx.set(defaultValueCtx, currentValue);
+        ctx.update(editorViewOptionsCtx, (prev) => ({
+          ...prev,
+          editable: () => !disabled && !readOnly,
+          attributes: {
+            class: classNames66("eui-markdown-milkdown-content", editorClassName),
+            spellcheck: "true"
+          },
+          handleDOMEvents: {
+            blur: () => {
+              onBlur?.();
+              return false;
+            }
+          }
+        }));
+        ctx.get(listenerCtx).markdownUpdated((_ctx, markdown) => {
+          updateValue(markdown);
+        });
+      });
+      editor = editor.use(commonmark);
+      if (useGfm) {
+        editor = editor.use(gfm);
+      }
+      editor = editor.use(listener);
+      return editor;
+    },
+    [disabled, readOnly, editorClassName, onBlur, updateValue, useGfm]
+  );
+  return /* @__PURE__ */ jsx(Milkdown, {});
+}
+function MilkdownMarkdownEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  onBlur,
+  id,
+  name,
+  disabled = false,
+  readOnly = false,
+  minHeight = 360,
+  maxHeight,
+  className,
+  editorClassName,
+  useGfm = true
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      "data-name": name,
+      className: classNames66(
+        "eui-markdown-adapter",
+        "eui-markdown-milkdown-adapter",
+        disabled && "is-disabled",
+        className
+      ),
+      style: {
+        minHeight: toCssSize4(minHeight),
+        maxHeight: toCssSize4(maxHeight)
+      },
+      children: /* @__PURE__ */ jsx(MilkdownProvider, { children: /* @__PURE__ */ jsx(
+        MilkdownInnerEditor,
+        {
+          currentValue: currentValue ?? "",
+          updateValue,
+          onBlur,
+          disabled,
+          readOnly,
+          editorClassName,
+          useGfm
+        }
+      ) })
+    }
+  );
+}
+var MilkdownMarkdownEditor_default = MilkdownMarkdownEditor;
 function GenericLayout({
   children,
   styles,
@@ -24527,7 +26898,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         [`${styles}`]: styles
       }),
       children
@@ -24576,7 +26947,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames17({
+      className: classNames66({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -24635,6 +27006,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, 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_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_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_DOT_RADIUS, CHART_DEFAULT_HEIGHT, 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, ChartProvider, ChartToolbar, ChartTooltip, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, DEFAULT_CHART_THEME, DEFAULT_REVIEW_THREAD_CONFIG, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, 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_default as FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LinePlot, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PriceTag, ProgressBar, ProgressBarRating_default as 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_default as Spinner, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, 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_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, addReplyToCache, addReviewReply, appendReview, applyReactionState, assertAbsoluteURL, buildURL, canDeleteReview, canDeleteReviewReply, canEditReview, canEditReviewReply, canReplyToReview, canReportReview, canReportReviewReply, chartReducer, cn, createConfigurator, createForceLayout, createGridLayout, createInitialChartState, createTreeLayout, createURLResolver, decrementReplyCount, enumValues, euiToast, findReview, formatChartValue, formatCommentDate, formatConfigError, formatReviewDate, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getCurrencySymbol, getLayout, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, hasReviewReply, incrementReplyCount, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, normalizeReview, normalizeReviewAuthor, normalizeReviewReply, parseJson, parseJsonRecord, parseUrlMap, prependReview, registerLayout, removeComment, removeCommentTreeFromCache, removeReview, removeReviewReply, replaceRealtimePoints, replaceReview, replaceReviewReply, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, sendToast, toConfiguratorError, updateComment, updateReplyCacheComment, updateReview, updateReviewReply, upsertReview, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useReviewThreadState, useTheme_default as useTheme };
+export { Accordion_default as Accordion, 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_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_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_DOT_RADIUS, CHART_DEFAULT_HEIGHT, 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, ChartProvider, ChartToolbar, ChartTooltip, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CodeMirrorMarkdownEditor_default as CodeMirrorMarkdownEditor, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, DEFAULT_CHART_THEME, DEFAULT_REVIEW_THREAD_CONFIG, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, 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_default as FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LinePlot, Link, List_default as List, ListItem_default as ListItem, MDXMarkdownEditor_default as MDXMarkdownEditor, MarkdownBlockquote_default as MarkdownBlockquote, MarkdownCodeBlock_default as MarkdownCodeBlock, MarkdownContext, MarkdownDocsLayout_default as MarkdownDocsLayout, MarkdownEditor_default as MarkdownEditor, MarkdownField_default as MarkdownField, MarkdownHeading_default as MarkdownHeadingComponent, MarkdownImage_default as MarkdownImage, MarkdownInlineCode_default as MarkdownInlineCode, MarkdownLayout_default as MarkdownLayout, MarkdownLink_default as MarkdownLink, MarkdownPreviewPane_default as MarkdownPreviewPane, MarkdownProvider_default as MarkdownProvider, MarkdownRenderer_default as MarkdownRenderer, MarkdownSourceEditor_default as MarkdownSourceEditor, MarkdownSplitEditor_default as MarkdownSplitEditor, MarkdownTOC_default as MarkdownTOC, MarkdownTOCItem_default as MarkdownTOCItem, MarkdownTable_default as MarkdownTable, MarkdownTableCell, MarkdownTableHeaderCell, MarkdownToolbar_default as MarkdownToolbar, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, MilkdownMarkdownEditor_default as MilkdownMarkdownEditor, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PriceTag, ProgressBar, ProgressBarRating_default as 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_default as Spinner, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, 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_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, addReplyToCache, addReviewReply, appendReview, applyReactionState, assertAbsoluteURL, buildURL, canDeleteReview, canDeleteReviewReply, canEditReview, canEditReviewReply, canReplyToReview, canReportReview, canReportReviewReply, chartReducer, cn, createConfigurator, createForceLayout, createGridLayout, createHeadingSlug, createInitialChartState, createTreeLayout, createURLResolver, decrementReplyCount, enumValues, euiToast, extractHeadings, findReview, formatChartValue, formatCommentDate, formatConfigError, formatReviewDate, generateHeadingNumbers, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getCurrencySymbol, getLayout, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, hasReviewReply, incrementReplyCount, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, normalizeMarkdown, normalizeReview, normalizeReviewAuthor, normalizeReviewReply, parseJson, parseJsonRecord, parseUrlMap, prependReview, registerLayout, removeComment, removeCommentTreeFromCache, removeReview, removeReviewReply, replaceRealtimePoints, replaceReview, replaceReviewReply, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, sanitizeHeading, sendToast, slugify, toConfiguratorError, updateComment, updateReplyCacheComment, updateReview, updateReviewReply, upsertReview, useActiveHeading, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useMarkdown, useMarkdownHeadings, useModal_default as useModal, useReviewThreadState, useTheme_default as useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map