elseware-ui 2.37.1 → 2.38.0

package/dist/index.js

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var bs = require('react-icons/bs');
 var fa = require('react-icons/fa');
 var recharts = require('recharts');
-var classNames17 = require('classnames');
+var classNames66 = require('classnames');
 var fa6 = require('react-icons/fa6');
 var ReactWorldFlags = require('react-world-flags');
 var emojiFlags = require('emoji-flags');
@@ -18,9 +18,40 @@ var framerMotion = require('framer-motion');
 var ai = require('react-icons/ai');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var md = require('react-icons/md');
-require('@mdxeditor/editor/style.css');
-var editor = require('@mdxeditor/editor');
 var bi = require('react-icons/bi');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
+var rehypeRaw = require('rehype-raw');
+var rehypeSanitize = require('rehype-sanitize');
+var reactSyntaxHighlighter = require('react-syntax-highlighter');
+var prism = require('react-syntax-highlighter/dist/esm/styles/prism');
+var bash = require('react-syntax-highlighter/dist/esm/languages/prism/bash');
+var c = require('react-syntax-highlighter/dist/esm/languages/prism/c');
+var cpp = require('react-syntax-highlighter/dist/esm/languages/prism/cpp');
+var css = require('react-syntax-highlighter/dist/esm/languages/prism/css');
+var go = require('react-syntax-highlighter/dist/esm/languages/prism/go');
+var java = require('react-syntax-highlighter/dist/esm/languages/prism/java');
+var javascript = require('react-syntax-highlighter/dist/esm/languages/prism/javascript');
+var json = require('react-syntax-highlighter/dist/esm/languages/prism/json');
+var jsx210 = require('react-syntax-highlighter/dist/esm/languages/prism/jsx');
+var markup = require('react-syntax-highlighter/dist/esm/languages/prism/markup');
+var python = require('react-syntax-highlighter/dist/esm/languages/prism/python');
+var rust = require('react-syntax-highlighter/dist/esm/languages/prism/rust');
+var scss = require('react-syntax-highlighter/dist/esm/languages/prism/scss');
+var sql = require('react-syntax-highlighter/dist/esm/languages/prism/sql');
+var tsx = require('react-syntax-highlighter/dist/esm/languages/prism/tsx');
+var typescript = require('react-syntax-highlighter/dist/esm/languages/prism/typescript');
+var yaml = require('react-syntax-highlighter/dist/esm/languages/prism/yaml');
+var CodeMirror = require('@uiw/react-codemirror');
+var langMarkdown = require('@codemirror/lang-markdown');
+var themeOneDark = require('@codemirror/theme-one-dark');
+var editor = require('@mdxeditor/editor');
+require('@mdxeditor/editor/style.css');
+var react = require('@milkdown/react');
+var core = require('@milkdown/kit/core');
+var commonmark = require('@milkdown/kit/preset/commonmark');
+var gfm = require('@milkdown/kit/preset/gfm');
+var listener = require('@milkdown/kit/plugin/listener');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -43,10 +74,32 @@ function _interopNamespace(e) {
 }
 
 var React2__default = /*#__PURE__*/_interopDefault(React2);
-var classNames17__default = /*#__PURE__*/_interopDefault(classNames17);
+var classNames66__default = /*#__PURE__*/_interopDefault(classNames66);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
+var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
+var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var rehypeRaw__default = /*#__PURE__*/_interopDefault(rehypeRaw);
+var rehypeSanitize__default = /*#__PURE__*/_interopDefault(rehypeSanitize);
+var bash__default = /*#__PURE__*/_interopDefault(bash);
+var c__default = /*#__PURE__*/_interopDefault(c);
+var cpp__default = /*#__PURE__*/_interopDefault(cpp);
+var css__default = /*#__PURE__*/_interopDefault(css);
+var go__default = /*#__PURE__*/_interopDefault(go);
+var java__default = /*#__PURE__*/_interopDefault(java);
+var javascript__default = /*#__PURE__*/_interopDefault(javascript);
+var json__default = /*#__PURE__*/_interopDefault(json);
+var jsx210__default = /*#__PURE__*/_interopDefault(jsx210);
+var markup__default = /*#__PURE__*/_interopDefault(markup);
+var python__default = /*#__PURE__*/_interopDefault(python);
+var rust__default = /*#__PURE__*/_interopDefault(rust);
+var scss__default = /*#__PURE__*/_interopDefault(scss);
+var sql__default = /*#__PURE__*/_interopDefault(sql);
+var tsx__default = /*#__PURE__*/_interopDefault(tsx);
+var typescript__default = /*#__PURE__*/_interopDefault(typescript);
+var yaml__default = /*#__PURE__*/_interopDefault(yaml);
+var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -166,7 +219,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;
 };
 
@@ -3760,7 +3813,7 @@ function renderTransitionChild(children, className) {
   }
   const element = child;
   return React2__default.default.cloneElement(element, {
-    className: classNames17__default.default(element.props.className, className)
+    className: classNames66__default.default(element.props.className, className)
   });
 }
 function TransitionBase({
@@ -3780,7 +3833,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames17__default.default(
+  const transitionClassName = classNames66__default.default(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -3955,7 +4008,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames17__default.default(
+        className: classNames66__default.default(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -3976,7 +4029,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 fa6.FaCircleChevronDown,
                 {
-                  className: classNames17__default.default("text-xl transition-transform duration-300", {
+                  className: classNames66__default.default("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -3990,7 +4043,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default(
+        className: classNames66__default.default(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -4074,7 +4127,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames17__default.default(
+      className: classNames66__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -4090,14 +4143,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default("p-6 text-gray-300 text-sm", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames66__default.default("p-6 text-gray-300 text-sm", className), children });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default(
+      className: classNames66__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -4139,7 +4192,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default("absolute inset-0"),
+      className: classNames66__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -4285,7 +4338,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames17__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames66__default.default("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsxRuntime.jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsxRuntime.jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children })
@@ -5689,7 +5742,7 @@ var Backdrop = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "bg-black/75 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden": true,
         [`${styles}`]: styles
       }),
@@ -6213,7 +6266,7 @@ var Form = ({
         /* @__PURE__ */ jsxRuntime.jsx(UnsavedChangesGuard_default, { formik: formik$1, enabled: warnOnUnsavedChanges }),
         /* @__PURE__ */ jsxRuntime.jsx(DirtyObserver_default, { formik: formik$1, onDirtyChange }),
         /* @__PURE__ */ jsxRuntime.jsx(FormObserver_default, { formik: formik$1, onChange }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default(styles), children })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames66__default.default(styles), children })
       ] })
     }
   );
@@ -6255,16 +6308,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() {
@@ -6730,7 +6783,7 @@ function FormResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: text ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
@@ -6847,7 +6900,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames17__default.default(
+            className: classNames66__default.default(
               "w-6 h-6 bg-white dark:bg-gray-600 rounded-full shadow-md transition-transform duration-300",
               theme === "dark" ? "translate-x-8" : "translate-x-0"
             )
@@ -18228,12 +18281,12 @@ function WorldMap({
   const mode = isDarkMode ? mapStyles.dark : mapStyles.light;
   const resolvedData = React2.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]);
@@ -18395,7 +18448,7 @@ function InputResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -18410,7 +18463,7 @@ function InputLabel({ text, children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "label",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -18462,7 +18515,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames17__default.default({
+        className: classNames66__default.default({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]": true,
           "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
           "border-eui-danger-500": meta.touched && meta.error,
@@ -18507,7 +18560,7 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default(
+        className: classNames66__default.default(
           "border rounded-sm bg-eui-primary-300/10 px-3 pt-3 text-md text-eui-dark-100 cursor-pointer h-[50px] flex items-center",
           {
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -18533,7 +18586,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames17__default.default({
+        styles: classNames66__default.default({
           "absolute left-2 eui-text-sm peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none": true,
           "top-[0.7px]": showFloatingLabel,
           "top-[13px] text-base": !showFloatingLabel
@@ -18586,7 +18639,7 @@ var InputList = ({ name, placeholder, shape }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name, children: ({ push, remove, move }) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames17__default.default(
+        className: classNames66__default.default(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -18615,7 +18668,7 @@ var InputList = ({ name, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames17__default.default(
+                          className: classNames66__default.default(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -18626,7 +18679,7 @@ var InputList = ({ name, placeholder, shape }) => {
                               {
                                 name: `${name}[${index}]`,
                                 placeholder: `Item ${index + 1}`,
-                                className: classNames17__default.default(
+                                className: classNames66__default.default(
                                   "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"
@@ -18722,7 +18775,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames17__default.default(
+            className: classNames66__default.default(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -18734,7 +18787,7 @@ var InputListGroup = ({
                   {
                     name: `${name}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames17__default.default(
+                    className: classNames66__default.default(
                       "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"
@@ -18765,7 +18818,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames17__default.default(
+                      className: classNames66__default.default(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -18785,7 +18838,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames17__default.default(
+                                  className: classNames66__default.default(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -18796,7 +18849,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames17__default.default(
+                                        className: classNames66__default.default(
                                           "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"
@@ -19010,7 +19063,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames17__default.default({
+        className: classNames66__default.default({
           "border border-eui-primary-400 peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-danger-500": meta.touched && meta.error,
           "transition-all ease-in-out": true,
@@ -19119,7 +19172,7 @@ var ImageInput = React2.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames17__default.default({
+              className: classNames66__default.default({
                 "border-2 border-dashed border-gray-700 bg-gray-900 h-[200px] w-[300px] flex flex-col gap-2 items-center justify-center group": true,
                 "hover:cursor-pointer hover:border-solid hover:border-gray-600 hover:bg-gray-900/80": true,
                 "transition-all ease-in-out duration-150": true
@@ -19236,7 +19289,7 @@ function Radio({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames17__default.default({
+            className: classNames66__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -19249,7 +19302,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames17__default.default({
+                  className: classNames66__default.default({
                     "appearance-none w-4 h-4 border-2 border-eui-primary-400 rounded-full cursor-pointer transition-all duration-300": true,
                     // base radio button styles
                     "checked:bg-eui-secondary-700 checked:border-eui-primary-400": field2.value === option.value
@@ -19261,7 +19314,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames17__default.default({
+                  className: classNames66__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -19304,7 +19357,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -19317,7 +19370,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index),
             onMouseEnter: () => setHover(index),
             onMouseLeave: () => setHover(null),
-            className: classNames17__default.default({
+            className: classNames66__default.default({
               "text-yellow-600": index <= (hover ?? rating - 1),
               "text-gray-400": index > (hover ?? rating - 1)
             }),
@@ -19361,7 +19414,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames17__default.default({
+        className: classNames66__default.default({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-primary-400": !(meta.touched && meta.error),
           "border-red-500": meta.touched && meta.error,
@@ -19413,7 +19466,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames17__default.default(
+            className: classNames66__default.default(
               "w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-eui-dark-100",
               "peer-checked:after:translate-x-full peer-checked:after:border-white",
               "after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white",
@@ -19470,7 +19523,7 @@ function Tags({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames17__default.default(
+          className: classNames66__default.default(
             "border rounded-sm flex flex-wrap items-center gap-2 px-2 pt-2 pb-6 min-h-[3rem]",
             {
               "bg-eui-primary-300/10 eui-text-md": true,
@@ -19518,7 +19571,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames17__default.default(
+          styles: classNames66__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             input.length > 0 || field.value.length > 0 ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -19559,7 +19612,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames17__default.default({
+          className: classNames66__default.default({
             "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 resize-none focus:resize-none focus:outline-none": true,
             "transition-all ease-in-out": true,
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -19573,7 +19626,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames17__default.default(
+          styles: classNames66__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -19596,31 +19649,30 @@ function TextArea({
   ] });
 }
 var TextArea_default = TextArea;
-function ContentArea({
-  children,
-  styles,
-  enablePadding = false
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: classNames17__default.default({
-        "min-h-screen h-full w-full py-3 px-5": true,
-        "py-3 px-5": !enablePadding,
-        "py-3 px-5 lg:px-[150px]": enablePadding,
-        "transition-all duration-[200ms]": true,
-        [`${styles}`]: styles
-      }),
-      children
-    }
-  );
-}
+var ContentArea = React2.forwardRef(
+  ({ children, styles, enablePadding = false }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: classNames66__default.default({
+          "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__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -19633,7 +19685,7 @@ function FlexRow({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -19652,7 +19704,7 @@ function Grid({ children, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -19669,7 +19721,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -19688,7 +19740,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         static: position === "static",
         fixed: position === "fixed",
         sticky: position === "sticky",
@@ -19728,7 +19780,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "w-full min-h-screen transition-all duration-200 eui-bg-sm": true,
         "md:pl-[300px]": !overlayedSidebar && sidebarVisible && !isMobile,
         // Shift when sidebar is open (desktop)
@@ -19744,7 +19796,7 @@ var Footer = ({ children, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "bottom-0 w-full h-fit": true,
         "border-t border-eui-dark-500/40 dark:border-eui-secondary-800 eui-bg-md": !styles,
         [`${styles}`]: styles
@@ -19817,269 +19869,6 @@ function BlockGroup({
   ] });
 }
 var BlockGroup_default = BlockGroup;
-var useTheme = () => {
-  const context = React2.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] = formik.useField(props);
-  const { theme } = useTheme_default();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames17__default.default(theme === "dark" ? "dark" : "", styles), children: /* @__PURE__ */ jsxRuntime.jsx(
-      editor.MDXEditor,
-      {
-        markdown: field.value,
-        onChange: (val) => helpers.setValue(val),
-        className: "rounded border border-gray-300 dark:border-gray-700",
-        plugins: [
-          editor.headingsPlugin(),
-          editor.linkPlugin(),
-          editor.listsPlugin(),
-          editor.imagePlugin(),
-          editor.tablePlugin(),
-          editor.linkDialogPlugin({}),
-          editor.thematicBreakPlugin(),
-          editor.quotePlugin(),
-          editor.toolbarPlugin({
-            toolbarContents: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(editor.UndoRedo, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.BlockTypeSelect, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.BoldItalicUnderlineToggles, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.StrikeThroughSupSubToggles, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.ListsToggle, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.CreateLink, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.InsertImage, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.InsertTable, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(editor.InsertThematicBreak, {})
-            ] })
-          })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
-      {
-        name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
-      }
-    )
-  ] });
-}
-var MarkdownEditor_default = MarkdownEditor;
-var MarkdownContext = React2.createContext(null);
-
-// src/components/markdown/hooks/useMarkdown.tsx
-function useMarkdown() {
-  return React2.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: numberedHeadings.map((heading) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: () => scrollToHeading(heading.id),
-        className: classNames17__default.default(
-          "block w-full text-left text-sm transition-all ease-in-out duration-150",
-          "hover:text-primary",
-          activeHeading === heading.id ? "text-primary font-semibold underline" : "text-gray-500 dark:text-gray-400"
-        ),
-        style: {
-          paddingLeft: `${(heading.level - 1) * 12}px`
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 opacity-70", children: heading.numbering }),
-          /* @__PURE__ */ jsxRuntime.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;
-  React2.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__ */ jsxRuntime.jsx("div", { className: theme === "dark" ? "dark" : "", children: /* @__PURE__ */ jsxRuntime.jsx(
-    editor.MDXEditor,
-    {
-      markdown,
-      readOnly: true,
-      className: "markdown-body max-w-none",
-      plugins: [
-        editor.headingsPlugin(),
-        editor.linkPlugin(),
-        editor.listsPlugin(),
-        editor.imagePlugin(),
-        editor.tablePlugin(),
-        editor.quotePlugin(),
-        editor.thematicBreakPlugin(),
-        editor.linkDialogPlugin({}),
-        editor.markdownShortcutPlugin(),
-        editor.frontmatterPlugin(),
-        editor.codeBlockPlugin({
-          defaultCodeBlockLanguage: "txt",
-          codeBlockEditorDescriptors: []
-        }),
-        editor.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] = React2.useState("");
-  const headings = React2.useMemo(() => extractHeadings(markdown), [markdown]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    MarkdownContext.Provider,
-    {
-      value: {
-        markdown,
-        headings,
-        activeHeading,
-        setActiveHeading
-      },
-      children
-    }
-  );
-}
-var MarkdownProvider_default = MarkdownProvider;
 function BreadcrumbItem({
   title,
   href = "#",
@@ -20091,7 +19880,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -20168,7 +19957,7 @@ var Breadcrumb = ({
         index < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames17__default.default({
+            className: classNames66__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -20182,7 +19971,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -20214,7 +20003,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default(
+        className: classNames66__default.default(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -20225,7 +20014,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames17__default.default(
+        className: classNames66__default.default(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -20254,7 +20043,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -20302,7 +20091,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames66__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -20315,7 +20104,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20356,7 +20145,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames66__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -20401,7 +20190,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-1 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "text-sm eui-text-sm": !styles,
@@ -20430,7 +20219,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -20483,7 +20272,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -20493,7 +20282,7 @@ function HeaderNav({ data = [], styles }) {
 var HeaderNav_default = HeaderNav;
 function useClickOutside(ref, fun) {
   React2.useEffect(() => {
-    const listener = (e) => {
+    const listener2 = (e) => {
       if (!ref.current || ref.current.contains(e.target)) {
         return;
       }
@@ -20501,11 +20290,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]);
 }
@@ -20545,7 +20334,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames66__default.default({
           "flex flex-row gap-2 items-center justify-between cursor-pointer p-3 w-full": true,
           "transition-all duration-300 ease-in-out": true,
           "eui-text-md bg-gradient-to-t from-eui-dark-500/10 dark:from-green-700/10": !styles,
@@ -20573,7 +20362,7 @@ var HeaderNavGroup = ({
           children && /* @__PURE__ */ jsxRuntime.jsx(
             bs.BsChevronDown,
             {
-              className: classNames17__default.default({
+              className: classNames66__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -20586,7 +20375,7 @@ var HeaderNavGroup = ({
     !collapsed && children && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames17__default.default({
+        className: classNames66__default.default({
           "absolute min-w-80 left-0 top-full mt-1 border border-eui-dark-300/10 dark:border-eui-dark-300/50 shadow-lg eui-shadow-lg z-50 w-full eui-bg-md": true,
           "transition-all duration-300 ease-in-out": true
         }),
@@ -20616,7 +20405,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-3 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "eui-text-md border-b border-eui-dark-500/20 dark:border-eui-secondary-900/20 bg-gradient-to-r from-eui-dark-500/10 dark:from-eui-secondary-900/10": !styles,
@@ -20645,7 +20434,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -20685,7 +20474,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -21335,7 +21124,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames17__default.default(
+      className: classNames66__default.default(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -21347,7 +21136,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames17__default.default(
+              className: classNames66__default.default(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -21481,7 +21270,7 @@ function ShowMore({ text, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames17__default.default({
+          className: classNames66__default.default({
             "text-blue-300  px-1 pb-1 mt-1": true,
             "bg-slate-900/70": !showMore,
             "bg-gradient-to-t from-slate-900/50 to-transparent": showMore
@@ -21765,16 +21554,20 @@ function CommentHeader({ comment, config }) {
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
   const [show, setShow] = React2.useState(defaultVisibility);
-  const openDrawer = () => {
-    setShow((prev) => !prev);
-  };
-  const closeDrawer = () => {
+  const openDrawer = React2.useCallback(() => {
+    setShow(true);
+  }, []);
+  const closeDrawer = React2.useCallback(() => {
     setShow(false);
-  };
+  }, []);
+  const toggleDrawer = React2.useCallback(() => {
+    setShow((prev) => !prev);
+  }, []);
   return {
     show,
     openDrawer,
-    closeDrawer
+    closeDrawer,
+    toggleDrawer
   };
 };
 var useDrawer_default = useDrawer;
@@ -21793,6 +21586,14 @@ var useModal = () => {
   };
 };
 var useModal_default = useModal;
+var useTheme = () => {
+  const context = React2.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var useTheme_default = useTheme;
 function CommentMenuItem({
   icon,
   name,
@@ -22368,11 +22169,78 @@ function DataViewTable({
   );
 }
 var DataViewTable_default = DataViewTable;
-function DocumentationPanel({ value, toc = true }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-screen overflow-hidden grid grid-cols-[minmax(0,1fr)_280px] gap-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "documentation_scrollbar min-w-0 h-screen overflow-y-auto scroll-smooth", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-6", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownViewer_default, {}) }) }),
-    toc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block h-screen border-l border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "documentation_scrollbar h-full overflow-y-auto px-6 pt-0 pb-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: classNames66__default.default(
+        "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__ */ jsxRuntime.jsx(
+          "main",
+          {
+            className: classNames66__default.default(
+              "eui-documentation-panel-viewer",
+              "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
+              viewerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: classNames66__default.default(
+                  "mx-auto px-5 py-8 sm:px-6 lg:px-8",
+                  contentMaxWidthClassName,
+                  contentClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownViewer_default, {})
+              }
+            )
+          }
+        ),
+        toc ? /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            className: classNames66__default.default(
+              "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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: classNames66__default.default(
+                  "documentation-panel-scrollbar h-full overflow-y-auto px-5 py-8"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownTOC_default, {}) })
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  ) });
 }
 var DocumentationPanel_default = DocumentationPanel;
 function SliderItem({
@@ -22548,7 +22416,7 @@ function WorldMapCountryTable({
 }) {
   const enrichedData = React2.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,
@@ -22638,7 +22506,7 @@ function BoxNavItem({ icon, name, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames17__default.default(
+      className: classNames66__default.default(
         "w-full min-w-[80px] flex flex-col items-center justify-center py-3 text-center",
         "hover:text-secondary-700 hover:bg-gray-300/10 hover:cursor-pointer",
         selected ? "text-eui-secondary-700 bg-gray-300/10" : "text-gray-400",
@@ -24547,6 +24415,2531 @@ function ReviewThread({
   ] });
 }
 var ReviewThread_default = ReviewThread;
+var MarkdownContext = React2.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] = React2.useState(defaultActiveHeading);
+  const headings = React2.useMemo(() => {
+    if (externalHeadings) {
+      return externalHeadings;
+    }
+    return extractHeadings(resolvedMarkdown);
+  }, [externalHeadings, resolvedMarkdown]);
+  const numberedHeadings = React2.useMemo(() => {
+    return generateHeadingNumbers(headings);
+  }, [headings]);
+  const headingMap = React2.useMemo(() => {
+    return headings.reduce((acc, heading) => {
+      acc[heading.id] = heading;
+      return acc;
+    }, {});
+  }, [headings]);
+  const activeHeading = controlledActiveHeading ?? internalActiveHeading;
+  const getHeadingById = React2.useCallback(
+    (id) => {
+      return headingMap[id];
+    },
+    [headingMap]
+  );
+  const setActiveHeading = React2.useCallback(
+    (id) => {
+      if (controlledActiveHeading === void 0) {
+        setInternalActiveHeading(id);
+      }
+      onActiveHeadingChange?.(id, headingMap[id]);
+    },
+    [controlledActiveHeading, headingMap, onActiveHeadingChange]
+  );
+  const contextValue = React2.useMemo(
+    () => ({
+      markdown: resolvedMarkdown,
+      headings,
+      numberedHeadings,
+      activeHeading,
+      setActiveHeading,
+      meta,
+      getHeadingById
+    }),
+    [
+      resolvedMarkdown,
+      headings,
+      numberedHeadings,
+      activeHeading,
+      setActiveHeading,
+      meta,
+      getHeadingById
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(MarkdownContext.Provider, { value: contextValue, children });
+}
+var MarkdownProvider_default = MarkdownProvider;
+function useMarkdown(options = {}) {
+  const { required = false, errorMessage } = options;
+  const context = React2.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] = React2.useState(defaultActiveHeading);
+  const activeHeading = controlledActiveHeading ?? context?.activeHeading ?? internalActiveHeading;
+  const headingMap = React2.useMemo(() => {
+    return headings.reduce((acc, heading) => {
+      acc[heading.id] = heading;
+      return acc;
+    }, {});
+  }, [headings]);
+  const setActiveHeading = React2.useCallback(
+    (id) => {
+      if (controlledActiveHeading === void 0 && !context) {
+        setInternalActiveHeading(id);
+      }
+      context?.setActiveHeading(id);
+      onActiveHeadingChange?.(id, headingMap[id]);
+    },
+    [context, controlledActiveHeading, headingMap, onActiveHeadingChange]
+  );
+  const scrollToHeading = React2.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 = React2.useMemo(() => {
+    return headings.map((heading) => heading.id).join("|");
+  }, [headings]);
+  React2.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 = React2.useMemo(() => {
+    if (externalHeadings) {
+      return externalHeadings;
+    }
+    if (markdown !== void 0) {
+      return extractHeadings(markdown);
+    }
+    return context?.headings ?? [];
+  }, [context?.headings, externalHeadings, markdown]);
+  const headings = React2.useMemo(() => {
+    return baseHeadings.filter((heading) => {
+      return heading.level >= minDepth && heading.level <= maxDepth;
+    });
+  }, [baseHeadings, minDepth, maxDepth]);
+  const numberedHeadings = React2.useMemo(() => {
+    return generateHeadingNumbers(headings);
+  }, [headings]);
+  const headingMap = React2.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__default.default.createElement(
+    tag,
+    {
+      ...props,
+      id,
+      className: classNames66__default.default("eui-markdown-heading", className)
+    },
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children,
+      showAnchor && id ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: `#${id}`,
+          className: "eui-markdown-heading-anchor",
+          "aria-label": "Link to heading",
+          children: "#"
+        }
+      ) : null
+    ] })
+  );
+}
+var MarkdownHeading_default = MarkdownHeading;
+reactSyntaxHighlighter.PrismLight.registerLanguage("bash", bash__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("shell", bash__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("sh", bash__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("zsh", bash__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("c", c__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("cpp", cpp__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("c++", cpp__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("css", css__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("scss", scss__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("go", go__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("java", java__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("js", javascript__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("javascript", javascript__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("jsx", jsx210__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("json", json__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("html", markup__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("xml", markup__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("markup", markup__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("py", python__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("python", python__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("rs", rust__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("rust", rust__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("sql", sql__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("ts", typescript__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("typescript", typescript__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("tsx", tsx__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("yaml", yaml__default.default);
+reactSyntaxHighlighter.PrismLight.registerLanguage("yml", yaml__default.default);
+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] = React2.useState(false);
+  const timeoutRef = React2.useRef(null);
+  const title = meta?.title ?? meta?.filename;
+  const resolvedLanguage = React2.useMemo(() => {
+    return normalizeLanguage(language);
+  }, [language]);
+  const languageLabel = language || resolvedLanguage;
+  const showHeader = Boolean(title || languageLabel || showCopy);
+  const highlightLines = React2.useMemo(() => {
+    return new Set(meta?.highlightLines ?? []);
+  }, [meta?.highlightLines]);
+  const showLineNumbers = Boolean(meta?.showLineNumbers);
+  React2.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__ */ jsxRuntime.jsxs("div", { ...props, className: classNames66__default.default("eui-markdown-code", className), children: [
+    showHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eui-markdown-code-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eui-markdown-code-header-main", children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eui-markdown-code-title", children: title }) : null,
+        languageLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eui-markdown-code-language", children: languageLabel }) : null
+      ] }),
+      showCopy ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "eui-markdown-copy-button",
+          onClick: copyCode,
+          children: copied ? "Copied" : "Copy"
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactSyntaxHighlighter.PrismLight,
+      {
+        className: "eui-markdown-code-highlighter",
+        language: resolvedLanguage,
+        style: prism.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__ */ jsxRuntime.jsx(
+    "code",
+    {
+      ...props,
+      className: classNames66__default.default("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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "a",
+    {
+      ...props,
+      href: safeHref,
+      target: resolvedTarget,
+      rel,
+      className: classNames66__default.default("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__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ...props,
+      src: safeSrc,
+      alt: alt ?? "",
+      title,
+      loading: "lazy",
+      decoding: "async",
+      className: classNames66__default.default("eui-markdown-image", className)
+    }
+  );
+}
+var MarkdownImage_default = MarkdownImage;
+function MarkdownTable({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eui-markdown-table-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx("table", { ...props, className: classNames66__default.default("eui-markdown-table", className), children }) });
+}
+function MarkdownTableCell({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props, className: classNames66__default.default("eui-markdown-table-cell", className), children });
+}
+function MarkdownTableHeaderCell({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ...props,
+      className: classNames66__default.default("eui-markdown-table-header-cell", className),
+      children
+    }
+  );
+}
+var MarkdownTable_default = MarkdownTable;
+function MarkdownBlockquote({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "blockquote",
+    {
+      ...props,
+      className: classNames66__default.default("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 (React2.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__default.default.Children.toArray(children);
+  const codeElement = childArray.find((child) => {
+    if (!React2.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__default.default);
+  }
+  const rehypePlugins = [];
+  if (allowHtml) {
+    rehypePlugins.push(rehypeRaw__default.default);
+    if (sanitizeHtml) {
+      rehypePlugins.push(rehypeSanitize__default.default);
+    }
+  }
+  const rendererComponents = {
+    h1: ({ node: _node, children, ...rest }) => {
+      const Component = components?.h1 ?? MarkdownHeading_default;
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "code",
+          {
+            ...rest,
+            className: className2,
+            "data-meta": getCodeMetaString(node),
+            children
+          }
+        );
+      }
+      const Component = components?.code ?? MarkdownInlineCode_default;
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        Component,
+        {
+          code,
+          language,
+          meta,
+          showCopy: showCopyCode
+        }
+      );
+    },
+    a: ({ node: _node, children, href, target, ...rest }) => {
+      const Component = components?.a ?? MarkdownLink_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          ...rest,
+          href,
+          target: linkTarget ?? target,
+          openLinksInNewTab,
+          children
+        }
+      );
+    },
+    img: ({ node: _node, src, alt, title, ...rest }) => {
+      const Component = components?.img ?? MarkdownImage_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, src, alt, title });
+    },
+    table: ({ node: _node, children, ...rest }) => {
+      const Component = components?.table ?? MarkdownTable_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, children });
+    },
+    td: ({ node: _node, children, ...rest }) => {
+      const Component = components?.td ?? MarkdownTableCell;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, children });
+    },
+    th: ({ node: _node, children, ...rest }) => {
+      const Component = components?.th ?? MarkdownTableHeaderCell;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, children });
+    },
+    blockquote: ({ node: _node, children, ...rest }) => {
+      const Component = components?.blockquote ?? MarkdownBlockquote_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, children });
+    },
+    ...components
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames66__default.default("eui-markdown markdown-body", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ReactMarkdown__default.default,
+    {
+      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 = React2.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect?.(heading),
+      "aria-current": active ? "location" : void 0,
+      title: label,
+      className: classNames66__default.default(
+        "eui-markdown-toc-item",
+        "block w-full text-left text-sm transition-all ease-in-out duration-150",
+        "hover:text-primary",
+        active ? classNames66__default.default("text-primary font-semibold underline", activeClassName) : classNames66__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
+        className
+      ),
+      style: {
+        paddingLeft: `${Math.max(heading.level - 1, 0) * indentSize}px`
+      },
+      children: [
+        numbered && numbering ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eui-markdown-toc-item-number mr-2 opacity-70", children: numbering }) : null,
+        /* @__PURE__ */ jsxRuntime.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] = React2.useState(defaultCollapsed);
+  const { headings, numberedHeadings, hasHeadings } = useMarkdownHeadings({
+    markdown,
+    headings: externalHeadings,
+    minDepth,
+    maxDepth
+  });
+  const tocHeadings = React2.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: classNames66__default.default(
+          "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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eui-markdown-toc-header", children: collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setCollapsed((value) => !value),
+        className: classNames66__default.default(
+          "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__ */ jsxRuntime.jsx("span", { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: classNames66__default.default(
+                "text-xs opacity-60 transition-transform duration-150",
+                !collapsed && "rotate-90"
+              ),
+              "aria-hidden": "true",
+              children: "\u203A"
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        className: classNames66__default.default(
+          "eui-markdown-toc-title",
+          "text-sm font-semibold uppercase tracking-wide",
+          "text-gray-900 dark:text-gray-100",
+          titleClassName
+        ),
+        children: title
+      }
+    ) }) : null,
+    !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        className: classNames66__default.default(
+          "eui-markdown-toc-list",
+          "space-y-1",
+          listClassName
+        ),
+        "aria-label": title || "Markdown table of contents",
+        children: tocHeadings.map((heading) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("aside", { className: classNames66__default.default("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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames66__default.default(
+        "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__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsxRuntime.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__default.default(
+              "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__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: onViewModeToggle,
+            title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
+            className: classNames66__default.default(
+              "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 = React2.useRef(null);
+  const isControlled = value !== void 0;
+  const isViewModeControlled = viewMode !== void 0;
+  const [internalValue, setInternalValue] = React2.useState(defaultValue);
+  const [internalViewMode, setInternalViewMode] = React2.useState(defaultViewMode);
+  const currentValue = isControlled ? value : internalValue;
+  const currentViewMode = isViewModeControlled ? viewMode : internalViewMode;
+  const resolvedValue = currentValue ?? "";
+  React2.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  React2.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames66__default.default(
+        "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__ */ jsxRuntime.jsx(
+          MarkdownToolbar_default,
+          {
+            ...toolbarProps,
+            disabled,
+            actionsDisabled: readOnly,
+            viewMode: currentViewMode,
+            showViewModeToggle,
+            className: classNames66__default.default(toolbarClassName, toolbarProps?.className),
+            onViewModeToggle: toggleViewMode,
+            onAction: handleToolbarAction
+          }
+        ) : null,
+        currentViewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classNames66__default.default(
+              "eui-markdown-editor-preview",
+              "min-h-[260px] p-4",
+              previewClassName
+            ),
+            style: {
+              minHeight,
+              maxHeight
+            },
+            children: resolvedValue.trim() ? /* @__PURE__ */ jsxRuntime.jsx(MarkdownViewer_default, { ...previewProps, value: resolvedValue }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: placeholder })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ...props,
+            ref: textareaRef,
+            value: resolvedValue,
+            disabled,
+            readOnly,
+            placeholder,
+            onChange: (event) => updateValue(event.target.value),
+            onBlur,
+            onKeyDown: handleKeyDown,
+            className: classNames66__default.default(
+              "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__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Nothing to preview yet." }),
+  className,
+  contentClassName,
+  ...viewerProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames66__default.default(
+        "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__ */ jsxRuntime.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] = React2.useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  React2.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  const isHorizontal = previewPlacement === "right";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames66__default.default(
+        "eui-markdown-split-editor",
+        "grid gap-4",
+        isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: classNames66__default.default(
+              "eui-markdown-split-source",
+              "min-w-0 space-y-2",
+              sourceWrapperClassName
+            ),
+            children: [
+              sourceLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200", children: sourceLabel }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MarkdownSourceEditor_default,
+                {
+                  ...sourceEditorProps,
+                  value: currentValue,
+                  onChange: updateValue,
+                  onBlur,
+                  defaultViewMode: "source",
+                  showViewModeToggle: false
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: classNames66__default.default(
+              "eui-markdown-split-preview",
+              "min-w-0 space-y-2",
+              previewWrapperClassName
+            ),
+            children: [
+              previewLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200", children: previewLabel }) : null,
+              /* @__PURE__ */ jsxRuntime.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] = React2.useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  React2.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  if (mode === "rich" && richEditor) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: richEditor });
+  }
+  if (mode === "split") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MarkdownSplitEditor_default,
+      {
+        ...sourceEditorProps,
+        ...splitProps,
+        value: currentValue,
+        onChange: updateValue,
+        onBlur
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.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] = formik.useField({
+    name,
+    validate
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames66__default.default(
+        "eui-markdown-field",
+        "relative space-y-2",
+        wrapperClassName
+      ),
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: editorProps.id || field.name,
+            className: classNames66__default.default(
+              "block text-sm font-medium text-gray-700 dark:text-gray-200",
+              labelClassName
+            ),
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: classNames66__default.default(
+              "text-sm text-gray-500 dark:text-gray-400",
+              helperTextClassName
+            ),
+            children: helperText
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: classNames66__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames66__default.default(
+        "eui-markdown-layout-container",
+        "mx-auto w-full px-4 sm:px-6 lg:px-8",
+        containerClassName
+      ),
+      style: {
+        maxWidth: resolveSize(maxWidth)
+      },
+      children: [
+        header ? /* @__PURE__ */ jsxRuntime.jsx(
+          "header",
+          {
+            className: classNames66__default.default(
+              "eui-markdown-layout-header",
+              "mb-8",
+              headerClassName
+            ),
+            children: header
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: classNames66__default.default(
+              "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__ */ jsxRuntime.jsx(
+                "aside",
+                {
+                  className: classNames66__default.default(
+                    "eui-markdown-layout-sidebar",
+                    "min-w-0",
+                    stickySidebar && "lg:sticky lg:self-start",
+                    sidebarClassName
+                  ),
+                  style: stickySidebar ? stickyStyle : void 0,
+                  children: sidebar
+                }
+              ) : null,
+              hasLeftToc ? /* @__PURE__ */ jsxRuntime.jsx(
+                "aside",
+                {
+                  className: classNames66__default.default(
+                    "eui-markdown-layout-toc",
+                    "min-w-0",
+                    stickyToc && "lg:sticky lg:self-start",
+                    tocClassName
+                  ),
+                  style: stickyToc ? stickyStyle : void 0,
+                  children: toc
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "main",
+                {
+                  className: classNames66__default.default(
+                    "eui-markdown-layout-content",
+                    "min-w-0",
+                    contentClassName
+                  ),
+                  children: resolvedContent
+                }
+              ),
+              hasRightToc ? /* @__PURE__ */ jsxRuntime.jsx(
+                "aside",
+                {
+                  className: classNames66__default.default(
+                    "eui-markdown-layout-toc",
+                    "min-w-0",
+                    stickyToc && "lg:sticky lg:self-start",
+                    tocClassName
+                  ),
+                  style: stickyToc ? stickyStyle : void 0,
+                  children: toc
+                }
+              ) : null,
+              hasAside ? /* @__PURE__ */ jsxRuntime.jsx(
+                "aside",
+                {
+                  className: classNames66__default.default(
+                    "eui-markdown-layout-aside",
+                    "min-w-0",
+                    stickyAside && "2xl:sticky 2xl:self-start",
+                    asideClassName
+                  ),
+                  style: stickyAside ? stickyStyle : void 0,
+                  children: aside
+                }
+              ) : null
+            ]
+          }
+        ),
+        footer ? /* @__PURE__ */ jsxRuntime.jsx(
+          "footer",
+          {
+            className: classNames66__default.default(
+              "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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames66__default.default(
+        "eui-markdown-docs-header",
+        "flex flex-col gap-4 border-b border-gray-200 pb-6",
+        "dark:border-gray-700",
+        docsHeaderClassName
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: classNames66__default.default(
+                "eui-markdown-docs-title",
+                "text-3xl font-bold tracking-tight text-gray-950",
+                "dark:text-gray-50",
+                docsTitleClassName
+              ),
+              children: title
+            }
+          ) : null,
+          description ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames66__default.default(
+                "eui-markdown-docs-description",
+                "max-w-3xl text-base leading-7 text-gray-600",
+                "dark:text-gray-400",
+                docsDescriptionClassName
+              ),
+              children: description
+            }
+          ) : null
+        ] }),
+        headerActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: headerActions }) : null
+      ] })
+    }
+  ) : null);
+  const resolvedContent = children ?? content ?? (enableDefaultViewer ? /* @__PURE__ */ jsxRuntime.jsx(
+    MarkdownViewer_default,
+    {
+      ...viewerProps,
+      value: resolvedMarkdown,
+      headings
+    }
+  ) : null);
+  const resolvedToc = toc ?? (enableDefaultToc ? /* @__PURE__ */ jsxRuntime.jsx(
+    MarkdownTOC_default,
+    {
+      ...tocProps,
+      markdown: resolvedMarkdown,
+      headings
+    }
+  ) : null);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      MarkdownDocsLayoutContent,
+      {
+        ...props,
+        markdown,
+        value,
+        headings
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MarkdownProvider_default,
+    {
+      ...providerProps,
+      markdown: resolvedMarkdown,
+      headings,
+      meta,
+      children: /* @__PURE__ */ jsxRuntime.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] = React2.useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  React2.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id,
+      "data-name": name,
+      className: classNames66__default.default(
+        "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__ */ jsxRuntime.jsx(
+        CodeMirror__default.default,
+        {
+          value: currentValue,
+          height,
+          minHeight: toCssSize2(minHeight),
+          maxHeight: toCssSize2(maxHeight),
+          placeholder,
+          autoFocus,
+          editable: !disabled && !readOnly,
+          readOnly,
+          theme: dark ? themeOneDark.oneDark : void 0,
+          extensions: [langMarkdown.markdown(), ...extensions ?? []],
+          basicSetup: {
+            lineNumbers: true,
+            foldGutter: true,
+            highlightActiveLine: true,
+            highlightSelectionMatches: true,
+            autocompletion: true,
+            closeBrackets: true,
+            bracketMatching: true
+          },
+          className: classNames66__default.default("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 [
+    editor.headingsPlugin(),
+    editor.listsPlugin(),
+    editor.quotePlugin(),
+    editor.thematicBreakPlugin(),
+    editor.markdownShortcutPlugin(),
+    editor.linkPlugin(),
+    editor.imagePlugin(),
+    editor.tablePlugin(),
+    editor.codeBlockPlugin({
+      defaultCodeBlockLanguage: "tsx"
+    }),
+    editor.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 ? [
+      editor.toolbarPlugin({
+        toolbarContents: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(editor.UndoRedo, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.BoldItalicUnderlineToggles, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.CodeToggle, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.ListsToggle, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.CreateLink, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.InsertImage, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.InsertTable, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(editor.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 = React2.useRef(null);
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React2.useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  React2.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  React2.useEffect(() => {
+    if (!isControlled) return;
+    editorRef.current?.setMarkdown(value ?? "");
+  }, [value, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id,
+      "data-name": name,
+      onBlur,
+      className: classNames66__default.default(
+        "eui-markdown-adapter",
+        "eui-markdown-mdx-adapter",
+        dark && "dark",
+        disabled && "is-disabled",
+        className
+      ),
+      style: {
+        minHeight: toCssSize3(minHeight),
+        maxHeight: toCssSize3(maxHeight)
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        editor.MDXEditor,
+        {
+          ...props,
+          ref: editorRef,
+          markdown: currentValue ?? "",
+          readOnly: disabled || readOnly,
+          plugins: plugins ?? createDefaultPlugins(showToolbar),
+          className: classNames66__default.default("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
+}) {
+  react.useEditor(
+    (root) => {
+      let editor = core.Editor.make().config((ctx) => {
+        ctx.set(core.rootCtx, root);
+        ctx.set(core.defaultValueCtx, currentValue);
+        ctx.update(core.editorViewOptionsCtx, (prev) => ({
+          ...prev,
+          editable: () => !disabled && !readOnly,
+          attributes: {
+            class: classNames66__default.default("eui-markdown-milkdown-content", editorClassName),
+            spellcheck: "true"
+          },
+          handleDOMEvents: {
+            blur: () => {
+              onBlur?.();
+              return false;
+            }
+          }
+        }));
+        ctx.get(listener.listenerCtx).markdownUpdated((_ctx, markdown) => {
+          updateValue(markdown);
+        });
+      });
+      editor = editor.use(commonmark.commonmark);
+      if (useGfm) {
+        editor = editor.use(gfm.gfm);
+      }
+      editor = editor.use(listener.listener);
+      return editor;
+    },
+    [disabled, readOnly, editorClassName, onBlur, updateValue, useGfm]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(react.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] = React2.useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  React2.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id,
+      "data-name": name,
+      className: classNames66__default.default(
+        "eui-markdown-adapter",
+        "eui-markdown-milkdown-adapter",
+        disabled && "is-disabled",
+        className
+      ),
+      style: {
+        minHeight: toCssSize4(minHeight),
+        maxHeight: toCssSize4(maxHeight)
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.MilkdownProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        MilkdownInnerEditor,
+        {
+          currentValue: currentValue ?? "",
+          updateValue,
+          onBlur,
+          disabled,
+          readOnly,
+          editorClassName,
+          useGfm
+        }
+      ) })
+    }
+  );
+}
+var MilkdownMarkdownEditor_default = MilkdownMarkdownEditor;
 function GenericLayout({
   children,
   styles,
@@ -24555,7 +26948,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         [`${styles}`]: styles
       }),
       children
@@ -24604,7 +26997,7 @@ function SidemenuLayout({ data, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames17__default.default({
+      className: classNames66__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -24722,6 +27115,7 @@ exports.CloudinaryImage = CloudinaryImage_default;
 exports.CloudinaryProvider = CloudinaryProvider;
 exports.CloudinaryVideo = CloudinaryVideo_default;
 exports.Code = Code;
+exports.CodeMirrorMarkdownEditor = CodeMirrorMarkdownEditor_default;
 exports.CommentThread = CommentThread_default;
 exports.ConfigBootstrap = ConfigBootstrap_default;
 exports.Configurator = Configurator;
@@ -24785,14 +27179,35 @@ exports.LinePlot = LinePlot;
 exports.Link = Link;
 exports.List = List_default;
 exports.ListItem = ListItem_default;
+exports.MDXMarkdownEditor = MDXMarkdownEditor_default;
+exports.MarkdownBlockquote = MarkdownBlockquote_default;
+exports.MarkdownCodeBlock = MarkdownCodeBlock_default;
+exports.MarkdownContext = MarkdownContext;
+exports.MarkdownDocsLayout = MarkdownDocsLayout_default;
 exports.MarkdownEditor = MarkdownEditor_default;
+exports.MarkdownField = MarkdownField_default;
+exports.MarkdownHeadingComponent = MarkdownHeading_default;
+exports.MarkdownImage = MarkdownImage_default;
+exports.MarkdownInlineCode = MarkdownInlineCode_default;
+exports.MarkdownLayout = MarkdownLayout_default;
+exports.MarkdownLink = MarkdownLink_default;
+exports.MarkdownPreviewPane = MarkdownPreviewPane_default;
 exports.MarkdownProvider = MarkdownProvider_default;
+exports.MarkdownRenderer = MarkdownRenderer_default;
+exports.MarkdownSourceEditor = MarkdownSourceEditor_default;
+exports.MarkdownSplitEditor = MarkdownSplitEditor_default;
 exports.MarkdownTOC = MarkdownTOC_default;
+exports.MarkdownTOCItem = MarkdownTOCItem_default;
+exports.MarkdownTable = MarkdownTable_default;
+exports.MarkdownTableCell = MarkdownTableCell;
+exports.MarkdownTableHeaderCell = MarkdownTableHeaderCell;
+exports.MarkdownToolbar = MarkdownToolbar_default;
 exports.MarkdownViewer = MarkdownViewer_default;
 exports.Menu = Menu;
 exports.MenuGroup = MenuGroup;
 exports.MenuItem = MenuItem;
 exports.MenuItemTitle = MenuItemTitle;
+exports.MilkdownMarkdownEditor = MilkdownMarkdownEditor_default;
 exports.Modal = Modal_default;
 exports.MotionSurface = MotionSurface_default;
 exports.MultiImageInput = MultiImageInput_default;
@@ -24875,17 +27290,20 @@ exports.cn = cn;
 exports.createConfigurator = createConfigurator;
 exports.createForceLayout = createForceLayout;
 exports.createGridLayout = createGridLayout;
+exports.createHeadingSlug = createHeadingSlug;
 exports.createInitialChartState = createInitialChartState;
 exports.createTreeLayout = createTreeLayout;
 exports.createURLResolver = createURLResolver;
 exports.decrementReplyCount = decrementReplyCount;
 exports.enumValues = enumValues;
 exports.euiToast = euiToast;
+exports.extractHeadings = extractHeadings;
 exports.findReview = findReview;
 exports.formatChartValue = formatChartValue;
 exports.formatCommentDate = formatCommentDate;
 exports.formatConfigError = formatConfigError;
 exports.formatReviewDate = formatReviewDate;
+exports.generateHeadingNumbers = generateHeadingNumbers;
 exports.getAllowedOrigins = getAllowedOrigins;
 exports.getBrowserHref = getBrowserHref;
 exports.getBrowserOrigin = getBrowserOrigin;
@@ -24903,6 +27321,7 @@ exports.limitRealtimePoints = limitRealtimePoints;
 exports.normalize = normalize;
 exports.normalizeChartData = normalizeChartData;
 exports.normalizeChartDataPoint = normalizeChartDataPoint;
+exports.normalizeMarkdown = normalizeMarkdown;
 exports.normalizeReview = normalizeReview;
 exports.normalizeReviewAuthor = normalizeReviewAuthor;
 exports.normalizeReviewReply = normalizeReviewReply;
@@ -24922,13 +27341,16 @@ exports.resolveAppearanceStyles = resolveAppearanceStyles;
 exports.resolveChartColor = resolveChartColor;
 exports.resolveChartColors = resolveChartColors;
 exports.resolveWithGlobal = resolveWithGlobal;
+exports.sanitizeHeading = sanitizeHeading;
 exports.sendToast = sendToast;
+exports.slugify = slugify;
 exports.toConfiguratorError = toConfiguratorError;
 exports.updateComment = updateComment;
 exports.updateReplyCacheComment = updateReplyCacheComment;
 exports.updateReview = updateReview;
 exports.updateReviewReply = updateReviewReply;
 exports.upsertReview = upsertReview;
+exports.useActiveHeading = useActiveHeading;
 exports.useChartContext = useChartContext;
 exports.useChartData = useChartData;
 exports.useChartPolling = useChartPolling;
@@ -24941,6 +27363,8 @@ exports.useCurrentTheme = useCurrentTheme_default;
 exports.useDrawer = useDrawer_default;
 exports.useEUIConfig = useEUIConfig;
 exports.useIsMobile = useIsMobile_default;
+exports.useMarkdown = useMarkdown;
+exports.useMarkdownHeadings = useMarkdownHeadings;
 exports.useModal = useModal_default;
 exports.useReviewThreadState = useReviewThreadState;
 exports.useTheme = useTheme_default;