elseware-ui 2.39.0 → 2.39.1

package/dist/index.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var tailwindMerge = require('tailwind-merge');
-var React27 = require('react');
+var React26 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var index_js$3 = require('react-icons/bs/index.js');
 var index_js$4 = require('react-icons/fa/index.js');
 var recharts = require('recharts');
-var classNames66 = require('classnames');
+var classNames77 = require('classnames');
 var index_js$2 = require('react-icons/fa6/index.js');
 var ReactWorldFlags = require('react-world-flags');
 var emojiFlags = require('emoji-flags');
@@ -21,15 +21,21 @@ var index_js$5 = require('react-icons/bi/index.js');
 var default2 = require('path');
 var default3 = require('process');
 var url = require('url');
+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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React27__default = /*#__PURE__*/_interopDefault(React27);
-var classNames66__default = /*#__PURE__*/_interopDefault(classNames66);
+var React26__default = /*#__PURE__*/_interopDefault(React26);
+var classNames77__default = /*#__PURE__*/_interopDefault(classNames77);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var default2__default = /*#__PURE__*/_interopDefault(default2);
 var default3__default = /*#__PURE__*/_interopDefault(default3);
+var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -7039,7 +7045,7 @@ var init_python = __esm({
 });
 
 // node_modules/refractor/lang/jsx.js
-function jsx211(Prism2) {
+function jsx213(Prism2) {
   Prism2.register(javascript);
   Prism2.register(markup);
   (function(Prism3) {
@@ -7172,14 +7178,14 @@ var init_jsx = __esm({
   "node_modules/refractor/lang/jsx.js"() {
     init_javascript();
     init_markup();
-    jsx211.displayName = "jsx";
-    jsx211.aliases = [];
+    jsx213.displayName = "jsx";
+    jsx213.aliases = [];
   }
 });
 
 // node_modules/refractor/lang/tsx.js
 function tsx(Prism2) {
-  Prism2.register(jsx211);
+  Prism2.register(jsx213);
   Prism2.register(typescript);
   (function(Prism3) {
     var typescript2 = Prism3.util.clone(Prism3.languages.typescript);
@@ -7867,9 +7873,9 @@ function ConfigBootstrap({
   loadingFallback = null,
   showStack = false
 }) {
-  const [RootApp, setRootApp] = React27.useState(null);
-  const [loadError, setLoadError] = React27.useState(null);
-  React27.useEffect(() => {
+  const [RootApp, setRootApp] = React26.useState(null);
+  const [loadError, setLoadError] = React26.useState(null);
+  React26.useEffect(() => {
     if (!config.isValid) {
       return;
     }
@@ -7910,16 +7916,16 @@ function ConfigBootstrap({
   return /* @__PURE__ */ jsxRuntime.jsx(RootApp, {});
 }
 var ConfigBootstrap_default = ConfigBootstrap;
-var EUIContext = React27.createContext(null);
+var EUIContext = React26.createContext(null);
 var EUIProvider = ({
   config,
   children: children3
 }) => {
-  const [state, setState] = React27.useState(config);
+  const [state, setState] = React26.useState(config);
   return /* @__PURE__ */ jsxRuntime.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children: children3 });
 };
 var useEUIConfig = () => {
-  const ctx = React27.useContext(EUIContext);
+  const ctx = React26.useContext(EUIContext);
   if (!ctx) {
     throw new Error("useEUIConfig must be used inside EUIProvider");
   }
@@ -8737,14 +8743,14 @@ function useChartData({
   onDataChange,
   onError
 } = {}) {
-  const [state, setState] = React27.useState({
+  const [state, setState] = React26.useState({
     data: data ?? [],
     loading: false,
     error: null,
     status: data?.length ? "success" : "idle",
     lastUpdatedAt: data?.length ? /* @__PURE__ */ new Date() : void 0
   });
-  const prepareData = React27.useCallback(
+  const prepareData = React26.useCallback(
     (nextData) => {
       if (!normalize3) {
         return nextData;
@@ -8753,7 +8759,7 @@ function useChartData({
     },
     [normalize3]
   );
-  const replaceData = React27.useCallback(
+  const replaceData = React26.useCallback(
     (nextData) => {
       const normalizedData = prepareData(nextData);
       setState({
@@ -8767,7 +8773,7 @@ function useChartData({
     },
     [onDataChange, prepareData]
   );
-  const appendData = React27.useCallback(
+  const appendData = React26.useCallback(
     (nextData) => {
       setState((currentState) => {
         const incomingData = Array.isArray(nextData) ? nextData : [nextData];
@@ -8791,7 +8797,7 @@ function useChartData({
     },
     [maxDataPoints, onDataChange, prepareData]
   );
-  const clearData = React27.useCallback(() => {
+  const clearData = React26.useCallback(() => {
     setState({
       data: [],
       loading: false,
@@ -8801,7 +8807,7 @@ function useChartData({
     });
     onDataChange?.([]);
   }, [onDataChange]);
-  const handleError = React27.useCallback(
+  const handleError = React26.useCallback(
     (error) => {
       setState((currentState) => ({
         ...currentState,
@@ -8813,7 +8819,7 @@ function useChartData({
     },
     [onError]
   );
-  const refresh = React27.useCallback(async () => {
+  const refresh = React26.useCallback(async () => {
     const resolvedDataSource = dataSource;
     if (!resolvedDataSource?.refresh && !resolvedDataSource?.getInitialData) {
       return;
@@ -8832,13 +8838,13 @@ function useChartData({
       handleError(error instanceof Error ? error : new Error(String(error)));
     }
   }, [dataSource, handleError, replaceData]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!data) {
       return;
     }
     replaceData(data);
   }, [data, replaceData]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!dataSource || !autoLoad) {
       return;
     }
@@ -8877,7 +8883,7 @@ function useChartData({
       unsubscribe?.();
     };
   }, [appendData, autoLoad, dataSource, handleError, replaceData]);
-  return React27.useMemo(
+  return React26.useMemo(
     () => ({
       ...state,
       refresh,
@@ -8896,11 +8902,11 @@ function useChartRealtime({
   onData,
   onError
 }) {
-  const [data, setData] = React27.useState([]);
-  const [error, setError] = React27.useState(null);
-  const [connected, setConnected] = React27.useState(false);
-  const [lastUpdatedAt, setLastUpdatedAt] = React27.useState();
-  React27.useEffect(() => {
+  const [data, setData] = React26.useState([]);
+  const [error, setError] = React26.useState(null);
+  const [connected, setConnected] = React26.useState(false);
+  const [lastUpdatedAt, setLastUpdatedAt] = React26.useState();
+  React26.useEffect(() => {
     if (!enabled) {
       setConnected(false);
       return;
@@ -8934,7 +8940,7 @@ function useChartRealtime({
       setConnected(false);
     };
   }, [connect, enabled, maxDataPoints, normalize3, onData, onError]);
-  return React27.useMemo(
+  return React26.useMemo(
     () => ({
       data,
       error,
@@ -8956,13 +8962,13 @@ function useChartPolling({
   onData,
   onError
 }) {
-  const isMountedRef = React27.useRef(false);
-  const isFetchingRef = React27.useRef(false);
-  const [data, setData] = React27.useState([]);
-  const [error, setError] = React27.useState(null);
-  const [loading, setLoading] = React27.useState(immediate);
-  const [lastUpdatedAt, setLastUpdatedAt] = React27.useState();
-  const refresh = React27.useCallback(async () => {
+  const isMountedRef = React26.useRef(false);
+  const isFetchingRef = React26.useRef(false);
+  const [data, setData] = React26.useState([]);
+  const [error, setError] = React26.useState(null);
+  const [loading, setLoading] = React26.useState(immediate);
+  const [lastUpdatedAt, setLastUpdatedAt] = React26.useState();
+  const refresh = React26.useCallback(async () => {
     if (isFetchingRef.current) {
       return;
     }
@@ -8991,13 +8997,13 @@ function useChartPolling({
       isFetchingRef.current = false;
     }
   }, [fetcher, normalize3, onData, onError]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!enabled) {
       setLoading(false);
       return;
@@ -9012,7 +9018,7 @@ function useChartPolling({
       window.clearInterval(timer2);
     };
   }, [enabled, immediate, interval2, refresh]);
-  return React27.useMemo(
+  return React26.useMemo(
     () => ({
       data,
       error,
@@ -9049,7 +9055,7 @@ function useChartSeries({
   xKey,
   excludeKeys = []
 }) {
-  return React27.useMemo(() => {
+  return React26.useMemo(() => {
     const normalizedSeries = series && series.length > 0 ? series : inferSeriesKeys(data, xKey, excludeKeys).map((key) => ({
       key
     }));
@@ -9097,12 +9103,12 @@ function useChartTheme({
   mode = "dark",
   theme
 } = {}) {
-  return React27.useMemo(() => {
+  return React26.useMemo(() => {
     const baseTheme = mode === "light" ? CHART_LIGHT_THEME : mode === "dark" ? CHART_DARK_THEME : DEFAULT_CHART_THEME;
     return mergeChartTheme(baseTheme, theme);
   }, [mode, theme]);
 }
-var ChartContext = React27.createContext({
+var ChartContext = React26.createContext({
   data: [],
   loading: false,
   error: null,
@@ -9134,7 +9140,7 @@ function ChartProvider({
     onDataChange,
     onError
   });
-  const value = React27.useMemo(
+  const value = React26.useMemo(
     () => ({
       ...chartData,
       mode: dataSource?.mode,
@@ -9151,7 +9157,7 @@ function ChartProvider({
   );
 }
 function useChartContext() {
-  return React27.useContext(ChartContext);
+  return React26.useContext(ChartContext);
 }
 
 // src/components/data-display/charts/context/chartReducer.ts
@@ -9455,7 +9461,7 @@ function ChartLegend({
   valueSource = "latest",
   onItemClick
 }) {
-  const legendItems = React27.useMemo(() => {
+  const legendItems = React26.useMemo(() => {
     if (items?.length) {
       return items;
     }
@@ -10233,7 +10239,7 @@ function GaugePlot({
   const chartData = data ?? context.data;
   const chartLoading = loading ?? context.loading;
   const chartError = error ?? context.error;
-  const resolvedValue = React27.useMemo(() => {
+  const resolvedValue = React26.useMemo(() => {
     if (typeof value === "number") {
       return value;
     }
@@ -10350,14 +10356,14 @@ function StatPlot({
   const chartData = data ?? context.data;
   const chartLoading = loading ?? context.loading;
   const chartError = error ?? context.error;
-  const resolvedValue = React27.useMemo(() => {
+  const resolvedValue = React26.useMemo(() => {
     if (value !== void 0) {
       return value;
     }
     const latestPoint = chartData[chartData.length - 1];
     return latestPoint?.[String(valueKey)] ?? null;
   }, [chartData, value, valueKey]);
-  const resolvedPreviousValue = React27.useMemo(() => {
+  const resolvedPreviousValue = React26.useMemo(() => {
     if (previousValue !== void 0) {
       return previousValue;
     }
@@ -10365,7 +10371,7 @@ function StatPlot({
     const previous3 = previousPoint?.[String(valueKey)];
     return typeof previous3 === "number" ? previous3 : void 0;
   }, [chartData, previousValue, valueKey]);
-  const trend = React27.useMemo(() => {
+  const trend = React26.useMemo(() => {
     if (typeof resolvedValue !== "number" || typeof resolvedPreviousValue !== "number") {
       return null;
     }
@@ -10836,7 +10842,7 @@ var Chip = ({
     }
   ) });
 };
-var DataViewContext = React27.createContext(null);
+var DataViewContext = React26.createContext(null);
 
 // src/components/data-display/data-view/utils/searchData.ts
 function searchData(data, search3) {
@@ -10880,19 +10886,19 @@ function DataViewProvider({
   defaultPageSize = 9,
   sortConfig = {}
 }) {
-  const [search3, setSearch] = React27.useState("");
-  const [filters, setFilters] = React27.useState({});
-  const [sort, setSort] = React27.useState("suggested");
-  const [page, setPage] = React27.useState(1);
-  const [pageSize, setPageSize] = React27.useState(defaultPageSize);
-  const processedData = React27.useMemo(() => {
+  const [search3, setSearch] = React26.useState("");
+  const [filters, setFilters] = React26.useState({});
+  const [sort, setSort] = React26.useState("suggested");
+  const [page, setPage] = React26.useState(1);
+  const [pageSize, setPageSize] = React26.useState(defaultPageSize);
+  const processedData = React26.useMemo(() => {
     let result = searchData(data, search3);
     result = filterData(result, filters);
     result = sortData(result, sort, sortConfig);
     return result;
   }, [data, search3, filters, sort, sortConfig]);
   const totalPages = pageSize === "All" ? 1 : Math.ceil(processedData.length / pageSize);
-  const paginatedData = React27.useMemo(() => {
+  const paginatedData = React26.useMemo(() => {
     if (pageSize === "All") return processedData;
     const size = pageSize;
     const start3 = (page - 1) * size;
@@ -10930,7 +10936,7 @@ function DataViewSidebar({ children: children3 }) {
 }
 var DataViewSidebar_default = DataViewSidebar;
 function useDataView() {
-  const ctx = React27.useContext(DataViewContext);
+  const ctx = React26.useContext(DataViewContext);
   if (!ctx) {
     throw new Error("useDataView must be used within DataViewProvider");
   }
@@ -10988,12 +10994,12 @@ function DataViewSort({ options = [], shape }) {
 }
 var DataViewSort_default = DataViewSort;
 function useTransitionVisibility(visibility, leaveDuration = 150) {
-  const [mounted, setMounted] = React27.useState(Boolean(visibility));
-  const [active, setActive] = React27.useState(Boolean(visibility));
-  const isInitialRenderRef = React27.useRef(true);
-  const frameOneRef = React27.useRef(null);
-  const frameTwoRef = React27.useRef(null);
-  const timeoutRef = React27.useRef(null);
+  const [mounted, setMounted] = React26.useState(Boolean(visibility));
+  const [active, setActive] = React26.useState(Boolean(visibility));
+  const isInitialRenderRef = React26.useRef(true);
+  const frameOneRef = React26.useRef(null);
+  const frameTwoRef = React26.useRef(null);
+  const timeoutRef = React26.useRef(null);
   const clearTimers = () => {
     if (frameOneRef.current) {
       cancelAnimationFrame(frameOneRef.current);
@@ -11008,7 +11014,7 @@ function useTransitionVisibility(visibility, leaveDuration = 150) {
       timeoutRef.current = null;
     }
   };
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     clearTimers();
     if (isInitialRenderRef.current) {
       isInitialRenderRef.current = false;
@@ -11036,17 +11042,17 @@ function useTransitionVisibility(visibility, leaveDuration = 150) {
   };
 }
 function renderTransitionChild(children3, className) {
-  const childCount = React27.Children.count(children3);
+  const childCount = React26.Children.count(children3);
   if (childCount !== 1) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: children3 });
   }
-  const child = React27.Children.only(children3);
-  if (!React27__default.default.isValidElement(child)) {
+  const child = React26.Children.only(children3);
+  if (!React26__default.default.isValidElement(child)) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: child });
   }
   const element6 = child;
-  return React27__default.default.cloneElement(element6, {
-    className: classNames66__default.default(element6.props.className, className)
+  return React26__default.default.cloneElement(element6, {
+    className: classNames77__default.default(element6.props.className, className)
   });
 }
 function TransitionBase({
@@ -11066,7 +11072,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames66__default.default(
+  const transitionClassName = classNames77__default.default(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -11233,7 +11239,7 @@ function Accordion({
   toggleOnSummaryClick = false,
   enableChildrenPadding = true
 }) {
-  const [collapse, setCollapse] = React27.useState(defaultCollapse);
+  const [collapse, setCollapse] = React26.useState(defaultCollapse);
   const handleToggle = () => {
     setCollapse((prev) => !prev);
   };
@@ -11241,7 +11247,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -11262,7 +11268,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 index_js$2.FaCircleChevronDown,
                 {
-                  className: classNames66__default.default("text-xl transition-transform duration-300", {
+                  className: classNames77__default.default("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -11276,7 +11282,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -11360,7 +11366,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -11376,14 +11382,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children: children3, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames66__default.default("p-6 text-gray-300 text-sm", className), children: children3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames77__default.default("p-6 text-gray-300 text-sm", className), children: children3 });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children: children3, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -11425,7 +11431,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default("absolute inset-0"),
+      className: classNames77__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -11571,7 +11577,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames66__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames77__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: children3 })
@@ -11730,8 +11736,8 @@ var Flag = ({
   className,
   ...rest
 }) => {
-  const [pos, setPos] = React27.useState({ x: 0, y: 0 });
-  const [showTooltip, setShowTooltip] = React27.useState(false);
+  const [pos, setPos] = React26.useState({ x: 0, y: 0 });
+  const [showTooltip, setShowTooltip] = React26.useState(false);
   const upperCode = code4.toUpperCase();
   const country = emojiFlags__default.default.countryCode(upperCode);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -14857,16 +14863,16 @@ var GraphRenderer = ({
   width = 1e3,
   height = 700
 }) => {
-  const [nodes, setNodes] = React27.useState([]);
+  const [nodes, setNodes] = React26.useState([]);
   const edges = data.edges;
-  const simulationRef = React27.useRef(null);
-  const [offset, setOffset] = React27.useState({ x: 0, y: 0 });
-  const isDragging = React27.useRef(false);
-  const lastPos = React27.useRef({ x: 0, y: 0 });
-  const nodeMap = React27.useMemo(() => {
+  const simulationRef = React26.useRef(null);
+  const [offset, setOffset] = React26.useState({ x: 0, y: 0 });
+  const isDragging = React26.useRef(false);
+  const lastPos = React26.useRef({ x: 0, y: 0 });
+  const nodeMap = React26.useMemo(() => {
     return new Map(nodes.map((n) => [n.id, n]));
   }, [nodes]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     simulationRef.current?.stop?.();
     const positionedNodes = data.nodes.map((n) => ({
       ...n,
@@ -14947,13 +14953,13 @@ var Graph = ({
     }
   );
 };
-var CloudinaryContext = React27.createContext(null);
+var CloudinaryContext = React26.createContext(null);
 var CloudinaryProvider = ({
   cloudName,
   children: children3
 }) => /* @__PURE__ */ jsxRuntime.jsx(CloudinaryContext.Provider, { value: { cloudName }, children: children3 });
 var useCloudinaryConfig = () => {
-  const ctx = React27.useContext(CloudinaryContext);
+  const ctx = React26.useContext(CloudinaryContext);
   if (!ctx) {
     throw new Error(
       "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
@@ -14998,6 +15004,7 @@ var Image2 = ({
   height,
   width,
   className,
+  style: style2,
   ...rest
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -15007,6 +15014,7 @@ var Image2 = ({
       src,
       alt,
       style: {
+        ...style2,
         ...width ? { width } : {},
         ...height ? { height } : {}
       },
@@ -15178,6 +15186,7 @@ var Paragraph = ({
   );
 };
 var Quote = ({
+  as: Component,
   level = 1,
   children: children3,
   variant,
@@ -15187,8 +15196,9 @@ var Quote = ({
   className,
   ...rest
 }) => {
+  const QuoteElement = Component ?? "div";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    QuoteElement,
     {
       ...rest,
       className: cn(
@@ -15371,6 +15381,29 @@ var Typography = {
   Code,
   Overline
 };
+function ListRoot({
+  as: Component,
+  className,
+  ...props
+}) {
+  const Root = Component ?? "div";
+  const semanticStyles = Component === "ul" ? "my-4 list-disc space-y-1 pl-6" : Component === "ol" ? "my-4 list-decimal space-y-1 pl-6" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(Root, { ...props, className: cn("w-full", semanticStyles, className) });
+}
+function ListItemElement({
+  as: Component,
+  className,
+  ...props
+}) {
+  const Item = Component ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Item,
+    {
+      ...props,
+      className: cn("min-w-0", Component === "li" && "pl-1", className)
+    }
+  );
+}
 var ListItem = ({
   content: content3,
   TypographyComponent = /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { level: 1 }),
@@ -15385,8 +15418,9 @@ var ListItem = ({
     "."
   ] }) : bulletTypes[bulletType]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    ListItemElement,
     {
+      role: "listitem",
       className: cn(
         "flex gap-3",
         align === "center" ? "items-center" : "items-baseline",
@@ -15404,7 +15438,7 @@ var ListItem = ({
             children: bullet
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React27__default.default.cloneElement(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React26__default.default.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -15438,7 +15472,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React27__default.default.isValidElement(item)) {
+  if (React26__default.default.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -15462,13 +15496,12 @@ function List({
   ...rest
 }) {
   const isGrid = !!columns;
-  const isOrdered = bulletType === "number";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, className: cn("py-2", className), children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold mb-3", children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      ListRoot,
       {
-        role: isOrdered ? "list" : "list",
+        role: "list",
         className: cn(
           isGrid ? `grid ${gridCols[columns]}` : direction === "horizontal" ? "flex flex-row" : "flex flex-col",
           gapMap[gap],
@@ -15898,7 +15931,7 @@ var Backdrop = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__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
       }),
@@ -16115,6 +16148,75 @@ function Spinner({
   );
 }
 var Spinner_default = Spinner;
+function TableFrame({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: cn(
+        "w-full overflow-x-auto border border-gray-200 dark:border-gray-700",
+        className
+      )
+    }
+  );
+}
+function TableElement({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("table", { ...props, className: cn("w-full", className) });
+}
+function TableHead({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      ...props,
+      className: cn("bg-gray-100 dark:bg-gray-800", className)
+    }
+  );
+}
+function TableBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ...props, className });
+}
+function TableRow({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      ...props,
+      className: cn("border-t border-gray-200 dark:border-gray-700", className)
+    }
+  );
+}
+function TableHeaderCell({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ...props,
+      className: cn("px-4 py-3 text-left text-xs font-semibold", className)
+    }
+  );
+}
+function TableCell({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props, className: cn("px-4 py-2", className) });
+}
 function Table({
   title,
   columns,
@@ -16123,8 +16225,8 @@ function Table({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [sortKey, setSortKey] = React27.useState(null);
-  const [sortOrder, setSortOrder] = React27.useState("asc");
+  const [sortKey, setSortKey] = React26.useState(null);
+  const [sortOrder, setSortOrder] = React26.useState("asc");
   const toggleSort = (key) => {
     if (sortKey === key) {
       setSortOrder((prev) => prev === "asc" ? "desc" : "asc");
@@ -16133,7 +16235,7 @@ function Table({
       setSortOrder("asc");
     }
   };
-  const sortedData = React27.useMemo(() => {
+  const sortedData = React26.useMemo(() => {
     if (!sortKey) return data;
     return [...data].sort((a2, b) => {
       const aVal = a2[sortKey];
@@ -16147,58 +16249,49 @@ function Table({
   }, [data, sortKey, sortOrder]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-3 font-poppins", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "overflow-x-auto border border-gray-200 dark:border-gray-700",
-          shapes[resolvedShape]
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-100 dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-            "th",
-            {
-              onClick: () => col.sortable && toggleSort(String(col.key)),
-              className: cn(
-                "px-4 py-3 text-left text-xs font-semibold text-gray-200",
-                col.sortable && "cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-700",
-                sortKey === col.key && "bg-gray-300 dark:bg-gray-600"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                col.header,
-                col.sortable && sortKey === col.key && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: sortOrder === "asc" ? "\u25B2" : "\u25BC" })
-              ] })
-            },
-            String(col.key)
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: sortedData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "td",
-            {
-              colSpan: columns.length,
-              className: "px-4 py-4 text-center text-gray-500",
-              children: "No data available"
-            }
-          ) }) : sortedData.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-            "tr",
-            {
-              className: "hover:bg-gray-50 dark:hover:bg-gray-900 odd:eui-bg-sm even:eui-bg-md border-t border-t-gray-800",
-              children: columns.map((col) => {
-                const value = col.key in row ? row[col.key] : void 0;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "td",
-                  {
-                    className: "px-4 py-1 text-gray-800 dark:text-gray-400",
-                    children: col.render ? col.render(value, row) : String(value ?? "-")
-                  },
-                  String(col.key)
-                );
-              })
-            },
-            rowIndex
-          )) })
-        ] })
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(TableFrame, { className: cn(shapes[resolvedShape]), children: /* @__PURE__ */ jsxRuntime.jsxs(TableElement, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "border-t-0", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+        TableHeaderCell,
+        {
+          onClick: () => col.sortable && toggleSort(String(col.key)),
+          className: cn(
+            "text-gray-700 dark:text-gray-200",
+            col.sortable && "cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-700",
+            sortKey === col.key && "bg-gray-300 dark:bg-gray-600"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            col.header,
+            col.sortable && sortKey === col.key && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: sortOrder === "asc" ? "\u25B2" : "\u25BC" })
+          ] })
+        },
+        String(col.key)
+      )) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: sortedData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell,
+        {
+          colSpan: columns.length,
+          className: "py-4 text-center text-gray-500",
+          children: "No data available"
+        }
+      ) }) : sortedData.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        TableRow,
+        {
+          className: "odd:eui-bg-sm even:eui-bg-md hover:bg-gray-50 dark:hover:bg-gray-900",
+          children: columns.map((col) => {
+            const value = col.key in row ? row[col.key] : void 0;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TableCell,
+              {
+                className: "py-1 text-gray-800 dark:text-gray-400",
+                children: col.render ? col.render(value, row) : String(value ?? "-")
+              },
+              String(col.key)
+            );
+          })
+        },
+        rowIndex
+      )) })
+    ] }) })
   ] });
 }
 var Table_default = Table;
@@ -16224,8 +16317,8 @@ function Tooltip6({
   className,
   ...rest
 }) {
-  const [pos, setPos] = React27.useState({ x: 0, y: 0 });
-  React27.useEffect(() => {
+  const [pos, setPos] = React26.useState({ x: 0, y: 0 });
+  React26.useEffect(() => {
     if (!show) return;
     const handleMove = (e) => {
       setPos({ x: e.clientX + offsetX, y: e.clientY + offsetY });
@@ -16354,8 +16447,8 @@ function CloudinaryVideo({
 }
 var CloudinaryVideo_default = CloudinaryVideo;
 var FormObserver = ({ formik, onChange }) => {
-  const prevValuesRef = React27.useRef(formik.values);
-  React27.useEffect(() => {
+  const prevValuesRef = React26.useRef(formik.values);
+  React26.useEffect(() => {
     if (!onChange) return;
     const currentValues = formik.values;
     const prevValues = prevValuesRef.current;
@@ -16374,7 +16467,7 @@ var FormObserver = ({ formik, onChange }) => {
 };
 var FormObserver_default = FormObserver;
 var DirtyObserver = ({ formik, onDirtyChange }) => {
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (onDirtyChange) {
       onDirtyChange(formik.dirty);
     }
@@ -16383,7 +16476,7 @@ var DirtyObserver = ({ formik, onDirtyChange }) => {
 };
 var DirtyObserver_default = DirtyObserver;
 var UnsavedChangesGuard = ({ formik, enabled }) => {
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!enabled) return;
     const handleBeforeUnload = (e) => {
       if (!formik.dirty) return;
@@ -16422,7 +16515,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: classNames66__default.default(styles), children: children3 })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames77__default.default(styles), children: children3 })
       ] })
     }
   );
@@ -16671,17 +16764,17 @@ function useToastTimer({
   pauseOnHover,
   onTimeout
 }) {
-  const [isPaused, setIsPaused] = React27.useState(false);
-  const timeoutRef = React27.useRef(null);
-  const startedAtRef = React27.useRef(0);
-  const remainingRef = React27.useRef(typeof duration === "number" ? duration : 0);
-  const clearTimer = React27.useCallback(() => {
+  const [isPaused, setIsPaused] = React26.useState(false);
+  const timeoutRef = React26.useRef(null);
+  const startedAtRef = React26.useRef(0);
+  const remainingRef = React26.useRef(typeof duration === "number" ? duration : 0);
+  const clearTimer = React26.useCallback(() => {
     if (timeoutRef.current !== null) {
       window.clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }, []);
-  const startTimer = React27.useCallback(() => {
+  const startTimer = React26.useCallback(() => {
     if (typeof duration !== "number" || duration <= 0) {
       return;
     }
@@ -16691,12 +16784,12 @@ function useToastTimer({
       onTimeout();
     }, remainingRef.current);
   }, [clearTimer, duration, onTimeout]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     remainingRef.current = typeof duration === "number" ? duration : 0;
     startTimer();
     return clearTimer;
   }, [clearTimer, duration, startTimer]);
-  const pauseTimer = React27.useCallback(() => {
+  const pauseTimer = React26.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
@@ -16707,14 +16800,14 @@ function useToastTimer({
     );
     setIsPaused(true);
   }, [clearTimer, duration, pauseOnHover]);
-  const resumeTimer = React27.useCallback(() => {
+  const resumeTimer = React26.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
     setIsPaused(false);
     startTimer();
   }, [duration, pauseOnHover, startTimer]);
-  const progressStyle = React27.useMemo(() => {
+  const progressStyle = React26.useMemo(() => {
     if (typeof duration !== "number") {
       return void 0;
     }
@@ -16755,7 +16848,7 @@ function ToastItem({
   const duration = item.duration ?? autoClose;
   const variant = toastStatusVariantMap[item.status];
   const statusStyles = toastVariantStyles[variant];
-  const dismiss = React27.useCallback(() => {
+  const dismiss = React26.useCallback(() => {
     toastStore.remove(item.id);
   }, [item.id]);
   const { pauseTimer, resumeTimer, progressStyle } = useToastTimer({
@@ -16834,16 +16927,16 @@ var Toast = ({
   ...rest
 }) => {
   const eui = useEUIConfig();
-  const [items, setItems] = React27.useState(() => {
+  const [items, setItems] = React26.useState(() => {
     return toastStore.getSnapshot();
   });
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     return toastStore.subscribe(setItems);
   }, []);
-  const safeShape = React27.useMemo(() => {
+  const safeShape = React26.useMemo(() => {
     return normalizeToastShape(shape ?? eui?.config?.global?.shape);
   }, [shape, eui?.config?.global?.shape]);
-  const visibleItems = React27.useMemo(() => {
+  const visibleItems = React26.useMemo(() => {
     const orderedItems = newestOnTop ? [...items].reverse() : [...items];
     return orderedItems.slice(0, maxToasts);
   }, [items, maxToasts, newestOnTop]);
@@ -16939,7 +17032,7 @@ function FormResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: text10 ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
@@ -17006,17 +17099,17 @@ function YoutubeVideo({
   ) });
 }
 var YoutubeVideo_default = YoutubeVideo;
-var ThemeContext = React27.createContext(
+var ThemeContext = React26.createContext(
   void 0
 );
 var ThemeProvider = ({
   defaultTheme = "dark",
   children: children3
 }) => {
-  const [theme, setTheme] = React27.useState(() => {
+  const [theme, setTheme] = React26.useState(() => {
     return localStorage.getItem("theme") || defaultTheme;
   });
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
     } else {
@@ -17030,7 +17123,7 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children3 });
 };
 var ThemeSwitch = () => {
-  const themeContext = React27.useContext(ThemeContext);
+  const themeContext = React26.useContext(ThemeContext);
   if (!themeContext) return null;
   const { theme, toggleTheme } = themeContext;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -17056,7 +17149,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames66__default.default(
+            className: classNames77__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"
             )
@@ -17092,7 +17185,7 @@ var ShapeSwitch = () => {
 
 // src/hooks/theme/useCurrentTheme.ts
 var useCurrentTheme = () => {
-  const context = React27.useContext(ThemeContext);
+  const context = React26.useContext(ThemeContext);
   if (!context) {
     throw new Error("useCurrentTheme must be used within a ThemeProvider");
   }
@@ -28435,7 +28528,7 @@ function WorldMap({
     }
   };
   const mode = isDarkMode ? mapStyles.dark : mapStyles.light;
-  const resolvedData = React27.useMemo(() => {
+  const resolvedData = React26.useMemo(() => {
     return data.map((item) => {
       const c3 = COUNTRIES.find((x3) => x3.code === item.code);
       if (!c3) return null;
@@ -28447,8 +28540,8 @@ function WorldMap({
     }).filter(Boolean);
   }, [data]);
   const maxValue = resolvedData.length > 0 ? Math.max(...resolvedData.map((d) => d.value)) : 0;
-  const [showTooltip, setShowTooltip] = React27.useState(false);
-  const [tooltipContent, setTooltipContent] = React27.useState(null);
+  const [showTooltip, setShowTooltip] = React26.useState(false);
+  const [tooltipContent, setTooltipContent] = React26.useState(null);
   const handleMouseMove = (_e, point5) => {
     setTooltipContent(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -28534,7 +28627,7 @@ function Button({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const btnRef = React27.useRef(null);
+  const btnRef = React26.useRef(null);
   const variantStyles = resolveAppearanceStyles({
     appearance,
     variant,
@@ -28604,7 +28697,7 @@ function InputResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         "font-medium text-sm py-1 px-2": true,
         [`${textVariants[variant]}`]: variant,
         "transition-all ease-in-out": true,
@@ -28619,7 +28712,7 @@ function InputLabel({ text: text10, children: children3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "label",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
         "transition-all ease-in-out": true,
         [`${styles}`]: styles
@@ -28635,7 +28728,7 @@ var toggleType = (visibility) => {
 var PasswordVisibilityToggler = ({
   onClick
 }) => {
-  const [passwordVisibility, setPasswordVisibilty] = React27.useState(false);
+  const [passwordVisibility, setPasswordVisibilty] = React26.useState(false);
   const handleOnClick = (visibility) => {
     onClick(visibility);
     setPasswordVisibilty(visibility);
@@ -28660,7 +28753,7 @@ var Input = ({
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
   const [field, meta] = formik.useField(props);
-  const [passwordVisibility, setPasswordVisibilty] = React27.useState(false);
+  const [passwordVisibility, setPasswordVisibilty] = React26.useState(false);
   const inputType = type2 === "password" ? toggleType(passwordVisibility) : type2;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -28671,7 +28764,7 @@ var Input = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames66__default.default({
+        className: classNames77__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,
@@ -28705,7 +28798,7 @@ var InputFile = ({
   styles,
   ...props
 }) => {
-  const fileInputRef = React27.useRef(null);
+  const fileInputRef = React26.useRef(null);
   const [field, meta, helpers] = formik.useField(props);
   const handleFileChange = (e) => {
     const file = e.target.files?.[0] || null;
@@ -28716,7 +28809,7 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames66__default.default(
+        className: classNames77__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),
@@ -28742,7 +28835,7 @@ var InputFile = ({
       InputLabel_default,
       {
         text: placeholder,
-        styles: classNames66__default.default({
+        styles: classNames77__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
@@ -28795,7 +28888,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name: name2, children: ({ push: push2, remove: remove2, move }) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -28824,7 +28917,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames66__default.default(
+                          className: classNames77__default.default(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -28835,7 +28928,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames66__default.default(
+                                className: classNames77__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"
@@ -28931,7 +29024,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -28943,7 +29036,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames66__default.default(
+                    className: classNames77__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"
@@ -28974,7 +29067,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames66__default.default(
+                      className: classNames77__default.default(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -28994,7 +29087,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames66__default.default(
+                                  className: classNames77__default.default(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -29005,7 +29098,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames66__default.default(
+                                        className: classNames77__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"
@@ -29219,7 +29312,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames66__default.default({
+        className: classNames77__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,
@@ -29245,7 +29338,7 @@ function ImageView({ imageUrl, secure = true, alt = "image" }) {
   ) }) });
 }
 var ImageView_default = ImageView;
-var ImageInput = React27.forwardRef(
+var ImageInput = React26.forwardRef(
   ({
     title = "Upload Image",
     uploadDir = "eg-frontend-admin-temp",
@@ -29257,10 +29350,10 @@ var ImageInput = React27.forwardRef(
     const [field, meta, helpers] = formik.useField(props);
     const { value: imageUrl } = field;
     const { setValue } = helpers;
-    const [image3, setImage] = React27.useState(null);
-    const [url, setUrl] = React27.useState(imageUrl);
-    const [loading, setLoading] = React27.useState(false);
-    const [preview, setPreview] = React27.useState(null);
+    const [image3, setImage] = React26.useState(null);
+    const [url, setUrl] = React26.useState(imageUrl);
+    const [loading, setLoading] = React26.useState(false);
+    const [preview, setPreview] = React26.useState(null);
     const uploadImage = async () => {
       if (!image3) return;
       setLoading(true);
@@ -29306,10 +29399,10 @@ var ImageInput = React27.forwardRef(
       if (!disableSetValue) setValue("");
       setLoading(false);
     };
-    React27.useImperativeHandle(ref, () => ({
+    React26.useImperativeHandle(ref, () => ({
       handleResetClick
     }));
-    React27.useEffect(() => {
+    React26.useEffect(() => {
       if (!disableSetValue) setValue(url);
     }, [url, setValue, disableSetValue]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
@@ -29328,7 +29421,7 @@ var ImageInput = React27.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames66__default.default({
+              className: classNames77__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
@@ -29394,14 +29487,14 @@ function MultiImageInput({
   const [field, meta, helpers] = formik.useField(props);
   const { value: imageUrls } = field;
   const { setValue } = helpers;
-  const imageInputRef = React27.useRef(null);
+  const imageInputRef = React26.useRef(null);
   const onValueChanged = (url) => {
     setValue([...imageUrls, url]);
     if (imageInputRef.current) {
       imageInputRef.current.handleResetClick();
     }
   };
-  React27.useEffect(() => {
+  React26.useEffect(() => {
   }, [imageUrls]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row flex-wrap gap-5 w-ful", children: [
@@ -29445,7 +29538,7 @@ function Radio({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames66__default.default({
+            className: classNames77__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -29458,7 +29551,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames66__default.default({
+                  className: classNames77__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
@@ -29470,7 +29563,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames66__default.default({
+                  className: classNames77__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -29501,9 +29594,9 @@ function StarRatingInput({
   const { name: name2 } = props;
   const [field, meta] = formik.useField(props);
   const formikContext = formik.useFormikContext();
-  const [rating, setRating] = React27.useState(Number(field.value) || 0);
-  const [hover, setHover] = React27.useState(null);
-  React27.useEffect(() => {
+  const [rating, setRating] = React26.useState(Number(field.value) || 0);
+  const [hover, setHover] = React26.useState(null);
+  React26.useEffect(() => {
     setRating(Number(field.value));
   }, [field.value]);
   const handleOnClick = (index3) => {
@@ -29513,7 +29606,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -29526,7 +29619,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames66__default.default({
+            className: classNames77__default.default({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -29570,7 +29663,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames66__default.default({
+        className: classNames77__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,
@@ -29622,7 +29715,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames66__default.default(
+            className: classNames77__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",
@@ -29652,7 +29745,7 @@ function Tags({
   ...props
 }) {
   const [field, meta, helpers] = formik.useField({ ...props });
-  const [input, setInput] = React27.useState("");
+  const [input, setInput] = React26.useState("");
   const handleAddTag = () => {
     const trimmed = input.trim();
     if (trimmed && !field.value.includes(trimmed) && field.value.length < limit) {
@@ -29679,7 +29772,7 @@ function Tags({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames66__default.default(
+          className: classNames77__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,
@@ -29727,7 +29820,7 @@ function Tags({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames66__default.default(
+          styles: classNames77__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"
           )
@@ -29768,7 +29861,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames66__default.default({
+          className: classNames77__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),
@@ -29782,7 +29875,7 @@ function TextArea({
         InputLabel_default,
         {
           text: placeholder,
-          styles: classNames66__default.default(
+          styles: classNames77__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"
           )
@@ -29805,13 +29898,13 @@ function TextArea({
   ] });
 }
 var TextArea_default = TextArea;
-var ContentArea = React27.forwardRef(
+var ContentArea = React26.forwardRef(
   ({ children: children3, styles, enablePadding = false }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: classNames66__default.default({
+        className: classNames77__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,
@@ -29828,7 +29921,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29841,7 +29934,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29860,7 +29953,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -29877,7 +29970,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -29896,7 +29989,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -29915,8 +30008,8 @@ var Header = ({
   );
 };
 var useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = React27.useState(window.innerWidth < breakpoint);
-  React27.useEffect(() => {
+  const [isMobile, setIsMobile] = React26.useState(window.innerWidth < breakpoint);
+  React26.useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < breakpoint);
     };
@@ -29936,7 +30029,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__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)
@@ -29952,7 +30045,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__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
@@ -30036,7 +30129,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -30083,7 +30176,7 @@ var Breadcrumb = ({
   const { config } = useEUIConfig();
   const pathname = currentPath || (typeof window !== "undefined" ? window.location.pathname : "/");
   const resolvedRoutes = routes || config?.routes || [];
-  const resolvedData = React27.useMemo(() => {
+  const resolvedData = React26.useMemo(() => {
     if (resolvedRoutes && resolvedRoutes.length > 0) {
       return buildFromRoutes(resolvedRoutes, pathname);
     }
@@ -30100,7 +30193,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(React27__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React26__default.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           BreadcrumbItem_default,
           {
@@ -30113,7 +30206,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames66__default.default({
+            className: classNames77__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -30127,7 +30220,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -30159,7 +30252,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -30170,7 +30263,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -30199,7 +30292,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__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,
@@ -30247,7 +30340,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames66__default.default({
+        className: classNames77__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -30260,7 +30353,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -30301,7 +30394,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames66__default.default({
+        className: classNames77__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -30346,7 +30439,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames66__default.default({
+      className: classNames77__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,
@@ -30375,7 +30468,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -30428,7 +30521,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -30437,7 +30530,7 @@ function HeaderNav({ data = [], styles }) {
 }
 var HeaderNav_default = HeaderNav;
 function useClickOutside(ref, fun) {
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     const listener = (e) => {
       if (!ref.current || ref.current.contains(e.target)) {
         return;
@@ -30478,8 +30571,8 @@ var HeaderNavGroup = ({
   styles,
   children: children3
 }) => {
-  const [collapsed, setCollapsed] = React27.useState(true);
-  const headerNavGroupRef = React27.useRef(null);
+  const [collapsed, setCollapsed] = React26.useState(true);
+  const headerNavGroupRef = React26.useRef(null);
   useClickOutside(headerNavGroupRef, () => setCollapsed(true));
   const handleNavigation = () => {
     if (to) {
@@ -30490,7 +30583,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames66__default.default({
+        className: classNames77__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,
@@ -30518,7 +30611,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsxRuntime.jsx(
             index_js$3.BsChevronDown,
             {
-              className: classNames66__default.default({
+              className: classNames77__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -30531,7 +30624,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames66__default.default({
+        className: classNames77__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
         }),
@@ -30561,7 +30654,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames66__default.default({
+      className: classNames77__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,
@@ -30590,7 +30683,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -30630,7 +30723,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -30702,8 +30795,8 @@ var MenuGroup = ({
   style: style2,
   ...rest
 }) => {
-  const [collapsed, setCollapsed] = React27.useState(!defaultOpen);
-  React27.useEffect(() => {
+  const [collapsed, setCollapsed] = React26.useState(!defaultOpen);
+  React26.useEffect(() => {
     if (defaultOpen !== void 0) {
       setCollapsed(!defaultOpen);
     }
@@ -30820,12 +30913,12 @@ var Menu = ({
   defaultMenuElements,
   currentPath
 }) => {
-  const normalizedItems = React27.useMemo(() => assignKeys(items), [items]);
-  const selected = React27.useMemo(() => {
+  const normalizedItems = React26.useMemo(() => assignKeys(items), [items]);
+  const selected = React26.useMemo(() => {
     if (!currentPath) return void 0;
     return findSelectedKey(normalizedItems, currentPath);
   }, [currentPath, normalizedItems]);
-  const parentMap = React27.useMemo(
+  const parentMap = React26.useMemo(
     () => buildParentMap(normalizedItems),
     [normalizedItems]
   );
@@ -30978,8 +31071,8 @@ function RouteTabs({
     const currentPath = window.location.pathname;
     return navData.find((tab2) => tab2.to === currentPath)?.to || navData[0]?.to;
   };
-  const [activeTab, setActiveTab] = React27.useState(getActiveTab);
-  React27.useEffect(() => {
+  const [activeTab, setActiveTab] = React26.useState(getActiveTab);
+  React26.useEffect(() => {
     if (mode !== "route") return;
     const handlePopState = () => {
       setActiveTab(getActiveTab());
@@ -31074,7 +31167,7 @@ function AsyncStateCard({
     }
   );
 }
-var AsyncStateCard_default = React27__default.default.memo(AsyncStateCard);
+var AsyncStateCard_default = React26__default.default.memo(AsyncStateCard);
 
 // src/components/utils/async-component-wrapper/asyncError.utils.ts
 var getDefaultErrorMessage = (error) => {
@@ -31133,22 +31226,22 @@ function AsyncComponentWrapper({
   contentClassName,
   stateClassName
 }) {
-  const [isRetrying, setIsRetrying] = React27.useState(false);
-  const retryTimerRef = React27.useRef(null);
-  const errorMessage = React27.useMemo(() => {
+  const [isRetrying, setIsRetrying] = React26.useState(false);
+  const retryTimerRef = React26.useRef(null);
+  const errorMessage = React26.useMemo(() => {
     if (!isError) return "";
     return errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error);
   }, [isError, error, errorFormatter]);
   const hasSuccess = isSuccess ?? (!isLoading && !isError && !isUninitialized);
   const shouldShowRetryLoading = showLoadingOnRetry && (isRetrying || isFetching && isError);
   const shouldShowLoading = isLoading || shouldShowRetryLoading;
-  const clearRetryTimer = React27.useCallback(() => {
+  const clearRetryTimer = React26.useCallback(() => {
     if (retryTimerRef.current) {
       clearTimeout(retryTimerRef.current);
       retryTimerRef.current = null;
     }
   }, []);
-  const handleRetry = React27.useCallback(() => {
+  const handleRetry = React26.useCallback(() => {
     if (!onRetry) return;
     clearRetryTimer();
     setIsRetrying(true);
@@ -31168,12 +31261,12 @@ function AsyncComponentWrapper({
       throw retryError;
     }
   }, [onRetry, clearRetryTimer, retryLoadingFallbackMs]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!isLoading && !isFetching && !isError) {
       setIsRetrying(false);
     }
   }, [isLoading, isFetching, isError]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     return () => {
       clearRetryTimer();
     };
@@ -31255,7 +31348,7 @@ function AsyncComponentWrapper({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: children3 })
   ] });
 }
-var AsyncComponentWrapper_default = React27__default.default.memo(AsyncComponentWrapper);
+var AsyncComponentWrapper_default = React26__default.default.memo(AsyncComponentWrapper);
 function Modal({
   title,
   show = false,
@@ -31271,7 +31364,7 @@ function Modal({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const modalRef = React27.useRef(null);
+  const modalRef = React26.useRef(null);
   useClickOutside(
     modalRef,
     enableCloseOnClickOutside ? handleOnClose : void 0
@@ -31280,7 +31373,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -31292,7 +31385,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames66__default.default(
+              className: classNames77__default.default(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -31323,8 +31416,8 @@ var GlowWrapper = ({
   className = "",
   hideOnLeave = true
 }) => {
-  const ref = React27.useRef(null);
-  const handleMove = React27.useCallback(
+  const ref = React26.useRef(null);
+  const handleMove = React26.useCallback(
     (e) => {
       const el = ref.current;
       if (!el) return;
@@ -31346,7 +31439,7 @@ var GlowWrapper = ({
     },
     [glowSize, glowColor]
   );
-  const handleLeave = React27.useCallback(() => {
+  const handleLeave = React26.useCallback(() => {
     const el = ref.current;
     if (!el || !hideOnLeave) return;
     el.style.setProperty("--glow-x", `-999px`);
@@ -31391,8 +31484,8 @@ function InfiniteScrollTrigger({
   threshold = 0,
   onLoadMore
 }) {
-  const triggerRef = React27.useRef(null);
-  React27.useEffect(() => {
+  const triggerRef = React26.useRef(null);
+  React26.useEffect(() => {
     const element6 = triggerRef.current;
     if (!element6 || !hasMore || isLoading) {
       return;
@@ -31418,7 +31511,7 @@ function InfiniteScrollTrigger({
 }
 var InfiniteScrollTrigger_default = InfiniteScrollTrigger;
 function ShowMore({ text: text10, limit }) {
-  const [showMore, setShowMore] = React27.useState(false);
+  const [showMore, setShowMore] = React26.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     showMore ? text10 : `${text10.substring(0, limit)}`,
     text10.length > limit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -31426,7 +31519,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames66__default.default({
+          className: classNames77__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
@@ -31453,8 +31546,8 @@ function CommentComposer({
   loading,
   onSubmit
 }) {
-  const [value, setValue] = React27.useState("");
-  const [focused, setFocused] = React27.useState(false);
+  const [value, setValue] = React26.useState("");
+  const [focused, setFocused] = React26.useState(false);
   async function handleSubmit() {
     const content3 = value.trim();
     if (!content3) {
@@ -31709,14 +31802,14 @@ function CommentHeader({ comment: comment4, config }) {
 }
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
-  const [show, setShow] = React27.useState(defaultVisibility);
-  const openDrawer = React27.useCallback(() => {
+  const [show, setShow] = React26.useState(defaultVisibility);
+  const openDrawer = React26.useCallback(() => {
     setShow(true);
   }, []);
-  const closeDrawer = React27.useCallback(() => {
+  const closeDrawer = React26.useCallback(() => {
     setShow(false);
   }, []);
-  const toggleDrawer = React27.useCallback(() => {
+  const toggleDrawer = React26.useCallback(() => {
     setShow((prev) => !prev);
   }, []);
   return {
@@ -31728,7 +31821,7 @@ var useDrawer = (defaultVisibility = true) => {
 };
 var useDrawer_default = useDrawer;
 var useModal = () => {
-  const [show, setShow] = React27.useState(false);
+  const [show, setShow] = React26.useState(false);
   const handleOpenModal = () => {
     setShow(true);
   };
@@ -31743,7 +31836,7 @@ var useModal = () => {
 };
 var useModal_default = useModal;
 var useTheme = () => {
-  const context = React27.useContext(ThemeContext);
+  const context = React26.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -31784,7 +31877,7 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const ref = React27.useRef(null);
+  const ref = React26.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -31912,11 +32005,11 @@ function CommentItem({
   onDelete,
   onReport
 }) {
-  const [collapsed, setCollapsed] = React27.useState(true);
-  const [isReplying, setIsReplying] = React27.useState(false);
-  const [menuOpen, setMenuOpen] = React27.useState(false);
-  const [loadingReplies, setLoadingReplies] = React27.useState(false);
-  const [repliesLoaded, setRepliesLoaded] = React27.useState(false);
+  const [collapsed, setCollapsed] = React26.useState(true);
+  const [isReplying, setIsReplying] = React26.useState(false);
+  const [menuOpen, setMenuOpen] = React26.useState(false);
+  const [loadingReplies, setLoadingReplies] = React26.useState(false);
+  const [repliesLoaded, setRepliesLoaded] = React26.useState(false);
   const resolvedDepth = Math.min(depth, config.maxDepth);
   const {
     Header: HeaderComponent = CommentHeader_default,
@@ -32080,18 +32173,18 @@ function CommentThread({
   onDelete,
   onReport
 }) {
-  const [comments, setComments] = React27.useState([]);
-  const [isLoadingComments, setIsLoadingComments] = React27.useState(true);
-  const [replyCache, setReplyCache] = React27.useState(
+  const [comments, setComments] = React26.useState([]);
+  const [isLoadingComments, setIsLoadingComments] = React26.useState(true);
+  const [replyCache, setReplyCache] = React26.useState(
     {}
   );
-  const replyCacheRef = React27.useRef(replyCache);
+  const replyCacheRef = React26.useRef(replyCache);
   const ComposerComponent = components?.Composer ?? CommentComposer_default;
   const resolvedConfig = {
     ...DEFAULT_COMMENT_THREAD_CONFIG,
     ...config
   };
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     async function loadComments() {
       try {
         const result = await dataSource.getComments({
@@ -32105,10 +32198,10 @@ function CommentThread({
     }
     void loadComments();
   }, [dataSource, resolvedConfig.commentsPerPage]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     replyCacheRef.current = replyCache;
   }, [replyCache]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     let cancelled = false;
     async function refreshLoadedReplies() {
       const parentIds = Object.keys(replyCacheRef.current);
@@ -32144,13 +32237,13 @@ function CommentThread({
       cancelled = true;
     };
   }, [dataSource, resolvedConfig.repliesPerPage]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!updatedComment) {
       return;
     }
     updateCommentEverywhere(updatedComment.id, () => updatedComment);
   }, [updatedComment]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!deletedComment) {
       return;
     }
@@ -32342,7 +32435,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsxRuntime.jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -32356,7 +32449,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsxRuntime.jsx(
           "main",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -32364,7 +32457,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames66__default.default(
+                className: classNames77__default.default(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -32377,7 +32470,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: classNames66__default.default(
+            className: classNames77__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",
@@ -32386,7 +32479,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames66__default.default(
+                className: classNames77__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, {}) })
@@ -32431,13 +32524,13 @@ function SliderItem({
 }
 var SliderItem_default = SliderItem;
 function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
-  const [images, setImages] = React27.useState([
+  const [images, setImages] = React26.useState([
     {
       img: coverArt,
       selected: true
     }
   ]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     setImages([
       {
         img: coverArt,
@@ -32445,7 +32538,7 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       }
     ]);
   }, [isSuccess]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (screenshots) {
       const selectableScreenshots = [];
       screenshots.forEach((item) => {
@@ -32457,8 +32550,8 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       setImages((prev) => [...prev, ...selectableScreenshots]);
     }
   }, [isSuccess]);
-  const [displayImg, setDisplayImg] = React27.useState(coverArt);
-  React27.useEffect(() => {
+  const [displayImg, setDisplayImg] = React26.useState(coverArt);
+  React26.useEffect(() => {
     setDisplayImg(coverArt);
   }, [coverArt]);
   const displayImageHandler = (itemIndex, img) => {
@@ -32570,7 +32663,7 @@ function WorldMapCountryTable({
   title = "Country Breakdown",
   data
 }) {
-  const enrichedData = React27.useMemo(() => {
+  const enrichedData = React26.useMemo(() => {
     const mapped = data.map((item) => {
       const countryMeta = COUNTRIES.find((c3) => c3.code === item.code);
       return {
@@ -32583,11 +32676,11 @@ function WorldMapCountryTable({
     });
     return mapped.sort((a2, b) => b.value - a2.value);
   }, [data]);
-  const total = React27.useMemo(
+  const total = React26.useMemo(
     () => enrichedData.reduce((sum, i) => sum + i.value, 0),
     [enrichedData]
   );
-  const finalData = React27.useMemo(() => {
+  const finalData = React26.useMemo(() => {
     return enrichedData.map((item) => ({
       ...item,
       percent: total > 0 ? item.value / total * 100 : 0
@@ -32662,7 +32755,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames66__default.default(
+      className: classNames77__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",
@@ -32832,7 +32925,7 @@ var TNDropdownGroup = ({
   navigate,
   className
 }) => {
-  const [open, setOpen] = React27.useState(true);
+  const [open, setOpen] = React26.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -32921,8 +33014,8 @@ var TNGroup = ({
   components,
   selected
 }) => {
-  const [open, setOpen] = React27.useState(false);
-  const timeoutRef = React27.useRef(null);
+  const [open, setOpen] = React26.useState(false);
+  const timeoutRef = React26.useRef(null);
   const handleEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -33026,14 +33119,14 @@ function ReviewForm({
   onSubmit,
   onCancel
 }) {
-  const [content3, setContent] = React27.useState(initialValues?.content ?? "");
-  const [rating, setRating] = React27.useState(initialValues?.rating ?? 0);
-  const [isRecommended, setIsRecommended] = React27.useState(
+  const [content3, setContent] = React26.useState(initialValues?.content ?? "");
+  const [rating, setRating] = React26.useState(initialValues?.rating ?? 0);
+  const [isRecommended, setIsRecommended] = React26.useState(
     initialValues?.isRecommended ?? true
   );
-  const [error, setError] = React27.useState("");
+  const [error, setError] = React26.useState("");
   const contentLength = content3.trim().length;
-  const ratingItems = React27.useMemo(() => {
+  const ratingItems = React26.useMemo(() => {
     return Array.from(
       {
         length: config.maxRating
@@ -33041,7 +33134,7 @@ function ReviewForm({
       (_2, index3) => index3 + 1
     );
   }, [config.maxRating]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     setContent(initialValues?.content ?? "");
     setRating(initialValues?.rating ?? 0);
     setIsRecommended(initialValues?.isRecommended ?? true);
@@ -33485,7 +33578,7 @@ function MyReviewPanel({
   onEditReview,
   onDeleteReview
 }) {
-  const [editing, setEditing] = React27.useState(false);
+  const [editing, setEditing] = React26.useState(false);
   const ComposerComponent = components?.Composer ?? ReviewComposer_default;
   const FormComponent = components?.Form ?? ReviewForm_default;
   const HeaderComponent = components?.Header ?? ReviewHeader_default;
@@ -33641,7 +33734,7 @@ function ReviewMenu({
   onReport,
   onReply
 }) {
-  const ref = React27.useRef(null);
+  const ref = React26.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -33792,7 +33885,7 @@ function ReviewReplyMenu({
   onDelete,
   onReport
 }) {
-  const ref = React27.useRef(null);
+  const ref = React26.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -33861,7 +33954,7 @@ function ReviewReplyItem({
   onDeleteReviewReply,
   onReportReviewReply
 }) {
-  const [menuOpen, setMenuOpen] = React27.useState(false);
+  const [menuOpen, setMenuOpen] = React26.useState(false);
   const HeaderComponent = components?.ReplyHeader ?? ReviewReplyHeader_default;
   const ContentComponent = components?.ReplyContent ?? ReviewReplyContent_default;
   const MenuComponent = components?.ReplyMenu ?? ReviewReplyMenu_default;
@@ -33938,7 +34031,7 @@ function ReviewItem({
   onDeleteReviewReply,
   onReportReviewReply
 }) {
-  const [menuOpen, setMenuOpen] = React27.useState(false);
+  const [menuOpen, setMenuOpen] = React26.useState(false);
   const HeaderComponent = components?.Header ?? ReviewHeader_default;
   const ContentComponent = components?.Content ?? ReviewContent_default;
   const RatingComponent = components?.Rating ?? ReviewRating_default;
@@ -34088,28 +34181,28 @@ function useReviewThreadState({
   onReviewUpdated,
   onReviewDeleted
 }) {
-  const [reviews, setReviews] = React27.useState([]);
-  const [myReview, setMyReview] = React27.useState(null);
-  const [isLoadingReviews, setIsLoadingReviews] = React27.useState(true);
-  const [isLoadingMyReview, setIsLoadingMyReview] = React27.useState(
+  const [reviews, setReviews] = React26.useState([]);
+  const [myReview, setMyReview] = React26.useState(null);
+  const [isLoadingReviews, setIsLoadingReviews] = React26.useState(true);
+  const [isLoadingMyReview, setIsLoadingMyReview] = React26.useState(
     Boolean(dataSource.getMyReview && shouldLoadMyReview)
   );
-  const [isCreatingReview, setIsCreatingReview] = React27.useState(false);
-  const [isUpdatingReview, setIsUpdatingReview] = React27.useState(false);
-  const [isDeletingReview, setIsDeletingReview] = React27.useState(false);
-  const [isCreatingReviewReply, setIsCreatingReviewReply] = React27.useState(false);
-  const [isUpdatingReviewReply, setIsUpdatingReviewReply] = React27.useState(false);
-  const [isDeletingReviewReply, setIsDeletingReviewReply] = React27.useState(false);
-  const [reviewsError, setReviewsError] = React27.useState(null);
-  const [myReviewError, setMyReviewError] = React27.useState(null);
+  const [isCreatingReview, setIsCreatingReview] = React26.useState(false);
+  const [isUpdatingReview, setIsUpdatingReview] = React26.useState(false);
+  const [isDeletingReview, setIsDeletingReview] = React26.useState(false);
+  const [isCreatingReviewReply, setIsCreatingReviewReply] = React26.useState(false);
+  const [isUpdatingReviewReply, setIsUpdatingReviewReply] = React26.useState(false);
+  const [isDeletingReviewReply, setIsDeletingReviewReply] = React26.useState(false);
+  const [reviewsError, setReviewsError] = React26.useState(null);
+  const [myReviewError, setMyReviewError] = React26.useState(null);
   const error = reviewsError ?? myReviewError;
-  const visibleReviews = React27.useMemo(() => {
+  const visibleReviews = React26.useMemo(() => {
     if (config.showMyReviewInList || !myReview) {
       return reviews;
     }
     return reviews.filter((review) => review.id !== myReview.id);
   }, [config.showMyReviewInList, myReview, reviews]);
-  const applyReview = React27.useCallback((review) => {
+  const applyReview = React26.useCallback((review) => {
     setReviews((prev) => upsertReview(prev, review));
     setMyReview((prev) => {
       if (!prev || prev.id !== review.id) {
@@ -34118,7 +34211,7 @@ function useReviewThreadState({
       return review;
     });
   }, []);
-  const applyReviewUpdater = React27.useCallback(
+  const applyReviewUpdater = React26.useCallback(
     (reviewId, updater) => {
       setReviews((prev) => updateReview(prev, reviewId, updater));
       setMyReview((prev) => {
@@ -34130,7 +34223,7 @@ function useReviewThreadState({
     },
     []
   );
-  const removeReviewById = React27.useCallback((reviewId) => {
+  const removeReviewById = React26.useCallback((reviewId) => {
     setReviews((prev) => removeReview(prev, reviewId));
     setMyReview((prev) => {
       if (!prev || prev.id !== reviewId) {
@@ -34139,7 +34232,7 @@ function useReviewThreadState({
       return null;
     });
   }, []);
-  const loadReviews = React27.useCallback(async () => {
+  const loadReviews = React26.useCallback(async () => {
     try {
       setIsLoadingReviews(true);
       setReviewsError(null);
@@ -34153,7 +34246,7 @@ function useReviewThreadState({
       setIsLoadingReviews(false);
     }
   }, [config.reviewsPerPage, dataSource, targetId]);
-  const loadMyReview = React27.useCallback(async () => {
+  const loadMyReview = React26.useCallback(async () => {
     if (!dataSource.getMyReview || !shouldLoadMyReview) {
       setMyReview(null);
       setIsLoadingMyReview(false);
@@ -34172,10 +34265,10 @@ function useReviewThreadState({
       setIsLoadingMyReview(false);
     }
   }, [dataSource, shouldLoadMyReview, targetId]);
-  const reload = React27.useCallback(async () => {
+  const reload = React26.useCallback(async () => {
     await Promise.all([loadReviews(), loadMyReview()]);
   }, [loadReviews, loadMyReview]);
-  const createReview = React27.useCallback(
+  const createReview = React26.useCallback(
     async (values) => {
       try {
         setIsCreatingReview(true);
@@ -34194,7 +34287,7 @@ function useReviewThreadState({
     },
     [dataSource, onReviewCreated]
   );
-  const updateReview2 = React27.useCallback(
+  const updateReview2 = React26.useCallback(
     async (review, values) => {
       try {
         setIsUpdatingReview(true);
@@ -34219,7 +34312,7 @@ function useReviewThreadState({
     },
     [dataSource, onReviewUpdated]
   );
-  const deleteReview = React27.useCallback(
+  const deleteReview = React26.useCallback(
     async (review) => {
       try {
         setIsDeletingReview(true);
@@ -34232,7 +34325,7 @@ function useReviewThreadState({
     },
     [dataSource, onReviewDeleted, removeReviewById]
   );
-  const createReviewReply = React27.useCallback(
+  const createReviewReply = React26.useCallback(
     async (input) => {
       if (!dataSource.createReviewReply) {
         throw new Error("createReviewReply is not implemented by dataSource.");
@@ -34255,7 +34348,7 @@ function useReviewThreadState({
     },
     [applyReview, applyReviewUpdater, config.maxRepliesPerReview, dataSource]
   );
-  const updateReviewReply2 = React27.useCallback(
+  const updateReviewReply2 = React26.useCallback(
     async (input) => {
       if (!dataSource.updateReviewReply) {
         throw new Error("updateReviewReply is not implemented by dataSource.");
@@ -34278,7 +34371,7 @@ function useReviewThreadState({
     },
     [applyReview, applyReviewUpdater, dataSource]
   );
-  const deleteReviewReply = React27.useCallback(
+  const deleteReviewReply = React26.useCallback(
     async (reviewId, replyId) => {
       if (!dataSource.deleteReviewReply) {
         throw new Error("deleteReviewReply is not implemented by dataSource.");
@@ -34301,7 +34394,7 @@ function useReviewThreadState({
     },
     [applyReview, applyReviewUpdater, dataSource]
   );
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     let cancelled = false;
     async function run() {
       try {
@@ -34328,7 +34421,7 @@ function useReviewThreadState({
       cancelled = true;
     };
   }, [config.reviewsPerPage, dataSource, targetId]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     let cancelled = false;
     async function run() {
       if (!dataSource.getMyReview || !shouldLoadMyReview) {
@@ -34360,19 +34453,19 @@ function useReviewThreadState({
       cancelled = true;
     };
   }, [dataSource, shouldLoadMyReview, targetId]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!updatedReview) {
       return;
     }
     applyReview(updatedReview);
   }, [applyReview, updatedReview]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!deletedReview) {
       return;
     }
     removeReviewById(deletedReview.id);
   }, [deletedReview, removeReviewById]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!updatedReviewReply) {
       return;
     }
@@ -34399,7 +34492,7 @@ function useReviewThreadState({
     config.maxRepliesPerReview,
     updatedReviewReply
   ]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!deletedReviewReply) {
       return;
     }
@@ -34571,7 +34664,7 @@ function ReviewThread({
   ] });
 }
 var ReviewThread_default = ReviewThread;
-var MarkdownContext = React27.createContext(null);
+var MarkdownContext = React26.createContext(null);
 
 // src/compositions/markdown/utils/sanitizeHeading.ts
 function sanitizeHeading(text10, options = {}) {
@@ -34792,30 +34885,30 @@ function MarkdownProvider({
   onActiveHeadingChange
 }) {
   const resolvedMarkdown = value ?? markdown ?? "";
-  const [internalActiveHeading, setInternalActiveHeading] = React27.useState(defaultActiveHeading);
-  const headings = React27.useMemo(() => {
+  const [internalActiveHeading, setInternalActiveHeading] = React26.useState(defaultActiveHeading);
+  const headings = React26.useMemo(() => {
     if (externalHeadings) {
       return externalHeadings;
     }
     return extractHeadings(resolvedMarkdown);
   }, [externalHeadings, resolvedMarkdown]);
-  const numberedHeadings = React27.useMemo(() => {
+  const numberedHeadings = React26.useMemo(() => {
     return generateHeadingNumbers(headings);
   }, [headings]);
-  const headingMap = React27.useMemo(() => {
+  const headingMap = React26.useMemo(() => {
     return headings.reduce((acc, heading3) => {
       acc[heading3.id] = heading3;
       return acc;
     }, {});
   }, [headings]);
   const activeHeading = controlledActiveHeading ?? internalActiveHeading;
-  const getHeadingById = React27.useCallback(
+  const getHeadingById = React26.useCallback(
     (id2) => {
       return headingMap[id2];
     },
     [headingMap]
   );
-  const setActiveHeading = React27.useCallback(
+  const setActiveHeading = React26.useCallback(
     (id2) => {
       if (controlledActiveHeading === void 0) {
         setInternalActiveHeading(id2);
@@ -34824,7 +34917,7 @@ function MarkdownProvider({
     },
     [controlledActiveHeading, headingMap, onActiveHeadingChange]
   );
-  const contextValue = React27.useMemo(
+  const contextValue = React26.useMemo(
     () => ({
       markdown: resolvedMarkdown,
       headings,
@@ -34849,7 +34942,7 @@ function MarkdownProvider({
 var MarkdownProvider_default = MarkdownProvider;
 function useMarkdown(options = {}) {
   const { required = false, errorMessage } = options;
-  const context = React27.useContext(MarkdownContext);
+  const context = React26.useContext(MarkdownContext);
   if (!context && required) {
     throw new Error(
       errorMessage || "useMarkdown must be used inside a MarkdownProvider."
@@ -34872,15 +34965,15 @@ function useActiveHeading(options = {}) {
     onActiveHeadingChange
   } = options;
   const headings = externalHeadings ?? context?.headings ?? [];
-  const [internalActiveHeading, setInternalActiveHeading] = React27.useState(defaultActiveHeading);
+  const [internalActiveHeading, setInternalActiveHeading] = React26.useState(defaultActiveHeading);
   const activeHeading = controlledActiveHeading ?? context?.activeHeading ?? internalActiveHeading;
-  const headingMap = React27.useMemo(() => {
+  const headingMap = React26.useMemo(() => {
     return headings.reduce((acc, heading3) => {
       acc[heading3.id] = heading3;
       return acc;
     }, {});
   }, [headings]);
-  const setActiveHeading = React27.useCallback(
+  const setActiveHeading = React26.useCallback(
     (id2) => {
       if (controlledActiveHeading === void 0 && !context) {
         setInternalActiveHeading(id2);
@@ -34890,7 +34983,7 @@ function useActiveHeading(options = {}) {
     },
     [context, controlledActiveHeading, headingMap, onActiveHeadingChange]
   );
-  const scrollToHeading = React27.useCallback(
+  const scrollToHeading = React26.useCallback(
     (id2) => {
       if (typeof document === "undefined") return;
       const element6 = document.getElementById(id2);
@@ -34903,10 +34996,10 @@ function useActiveHeading(options = {}) {
     },
     [scrollBehavior, scrollBlock, setActiveHeading]
   );
-  const observedHeadingIds = React27.useMemo(() => {
+  const observedHeadingIds = React26.useMemo(() => {
     return headings.map((heading3) => heading3.id).join("|");
   }, [headings]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!enabled) return;
     if (typeof window === "undefined") return;
     if (!("IntersectionObserver" in window)) return;
@@ -34955,7 +35048,7 @@ function useMarkdownHeadings(options = {}) {
     minDepth = 1,
     maxDepth = 6
   } = options;
-  const baseHeadings = React27.useMemo(() => {
+  const baseHeadings = React26.useMemo(() => {
     if (externalHeadings) {
       return externalHeadings;
     }
@@ -34964,15 +35057,15 @@ function useMarkdownHeadings(options = {}) {
     }
     return context?.headings ?? [];
   }, [context?.headings, externalHeadings, markdown]);
-  const headings = React27.useMemo(() => {
+  const headings = React26.useMemo(() => {
     return baseHeadings.filter((heading3) => {
       return heading3.level >= minDepth && heading3.level <= maxDepth;
     });
   }, [baseHeadings, minDepth, maxDepth]);
-  const numberedHeadings = React27.useMemo(() => {
+  const numberedHeadings = React26.useMemo(() => {
     return generateHeadingNumbers(headings);
   }, [headings]);
-  const headingMap = React27.useMemo(() => {
+  const headingMap = React26.useMemo(() => {
     return headings.reduce((acc, heading3) => {
       acc[heading3.id] = heading3;
       return acc;
@@ -35364,11 +35457,11 @@ function addChildren(props, children3) {
     }
   }
 }
-function productionCreate(_2, jsx236, jsxs123) {
+function productionCreate(_2, jsx252, jsxs125) {
   return create3;
   function create3(_3, type2, props, key) {
     const isStaticChildren = Array.isArray(props.children);
-    const fn = isStaticChildren ? jsxs123 : jsx236;
+    const fn = isStaticChildren ? jsxs125 : jsx252;
     return key ? fn(type2, props, key) : fn(type2, props);
   }
 }
@@ -55112,6 +55205,14 @@ function rehypeSanitize(options) {
     return result;
   };
 }
+var HEADING_STYLES = {
+  1: "mb-6 text-4xl tracking-[-0.035em]",
+  2: "mb-4 mt-10 border-b border-gray-200 pb-2 text-[1.75rem] tracking-[-0.025em] dark:border-gray-700",
+  3: "mb-3 mt-8 text-[1.35rem]",
+  4: "mb-2 mt-7 text-[1.1rem]",
+  5: "mb-2 mt-6 text-base",
+  6: "mb-2 mt-5 text-sm uppercase tracking-[0.08em] text-gray-500 dark:text-gray-400"
+};
 function MarkdownHeading({
   id: id2,
   level,
@@ -55120,13 +55221,21 @@ function MarkdownHeading({
   showAnchor = true,
   ...props
 }) {
-  const tag = `h${Math.min(Math.max(level, 1), 6)}`;
-  return React27__default.default.createElement(
-    tag,
+  const normalizedLevel = Math.min(Math.max(level, 1), 6);
+  const TypographyComponent = normalizedLevel <= 3 ? Chapter : Section;
+  const typographyLevel = normalizedLevel <= 3 ? normalizedLevel : normalizedLevel - 3;
+  return React26.createElement(
+    TypographyComponent,
     {
       ...props,
       id: id2,
-      className: classNames66__default.default("eui-markdown-heading", className)
+      level: typographyLevel,
+      bold: true,
+      className: classNames77__default.default(
+        "eui-markdown-heading group relative scroll-mt-24 font-bold leading-tight text-gray-900 dark:text-gray-100",
+        HEADING_STYLES[level],
+        className
+      )
     },
     /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       children3,
@@ -55134,7 +55243,7 @@ function MarkdownHeading({
         "a",
         {
           href: `#${id2}`,
-          className: "eui-markdown-heading-anchor",
+          className: "eui-markdown-heading-anchor ml-2 text-gray-400 no-underline opacity-0 transition group-hover:opacity-100 hover:text-blue-600 focus:opacity-100 dark:text-gray-500 dark:hover:text-blue-400",
           "aria-label": "Link to heading",
           children: "#"
         }
@@ -55187,18 +55296,18 @@ function powerSetPermutations(arr) {
   }
 }
 var classNameCombinations = {};
-function getClassNameCombinations(classNames70) {
-  if (classNames70.length === 0 || classNames70.length === 1) return classNames70;
-  var key = classNames70.join(".");
+function getClassNameCombinations(classNames81) {
+  if (classNames81.length === 0 || classNames81.length === 1) return classNames81;
+  var key = classNames81.join(".");
   if (!classNameCombinations[key]) {
-    classNameCombinations[key] = powerSetPermutations(classNames70);
+    classNameCombinations[key] = powerSetPermutations(classNames81);
   }
   return classNameCombinations[key];
 }
-function createStyleObject(classNames70) {
+function createStyleObject(classNames81) {
   var elementStyle = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   var stylesheet = arguments.length > 2 ? arguments[2] : void 0;
-  var nonTokenClassNames = classNames70.filter(function(className) {
+  var nonTokenClassNames = classNames81.filter(function(className) {
     return className !== "token";
   });
   var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
@@ -55206,15 +55315,15 @@ function createStyleObject(classNames70) {
     return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
   }, elementStyle);
 }
-function createClassNameString(classNames70) {
-  return classNames70.join(" ");
+function createClassNameString(classNames81) {
+  return classNames81.join(" ");
 }
 function createChildren2(stylesheet, useInlineStyles) {
   var childrenCount = 0;
   return function(children3) {
     childrenCount += 1;
     return children3.map(function(child, i) {
-      return createElement({
+      return createElement2({
         node: child,
         stylesheet,
         useInlineStyles,
@@ -55223,7 +55332,7 @@ function createChildren2(stylesheet, useInlineStyles) {
     });
   };
 }
-function createElement(_ref) {
+function createElement2(_ref) {
   var node2 = _ref.node, stylesheet = _ref.stylesheet, _ref$style = _ref.style, style2 = _ref$style === void 0 ? {} : _ref$style, useInlineStyles = _ref.useInlineStyles, key = _ref.key;
   var properties2 = node2.properties, type2 = node2.type, TagName = node2.tagName, value = node2.value;
   if (type2 === "text") {
@@ -55252,7 +55361,7 @@ function createElement(_ref) {
       });
     }
     var children3 = childrenCreator(node2.children);
-    return /* @__PURE__ */ React27__default.default.createElement(TagName, (0, import_extends.default)({
+    return /* @__PURE__ */ React26__default.default.createElement(TagName, (0, import_extends.default)({
       key
     }, props), children3);
   }
@@ -55295,7 +55404,7 @@ function getAllLineNumbers(_ref) {
   var lines = _ref.lines, startingLineNumber = _ref.startingLineNumber, style2 = _ref.style;
   return lines.map(function(_2, i) {
     var number3 = i + startingLineNumber;
-    return /* @__PURE__ */ React27__default.default.createElement("span", {
+    return /* @__PURE__ */ React26__default.default.createElement("span", {
       key: "line-".concat(i),
       className: "react-syntax-highlighter-line-number",
       style: typeof style2 === "function" ? style2(number3) : style2
@@ -55307,7 +55416,7 @@ function AllLineNumbers(_ref2) {
     "float": "left",
     paddingRight: "10px"
   } : _ref2$containerStyle, _ref2$numberStyle = _ref2.numberStyle, numberStyle = _ref2$numberStyle === void 0 ? {} : _ref2$numberStyle, startingLineNumber = _ref2.startingLineNumber;
-  return /* @__PURE__ */ React27__default.default.createElement("code", {
+  return /* @__PURE__ */ React26__default.default.createElement("code", {
     style: Object.assign({}, codeStyle, containerStyle)
   }, getAllLineNumbers({
     lines: codeString.replace(/\n$/, "").split("\n"),
@@ -55380,8 +55489,8 @@ function flattenCodeTree(tree) {
       }));
     } else if (node2.children) {
       var _node$properties;
-      var classNames70 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
-      flattenCodeTree(node2.children, classNames70).forEach(function(i2) {
+      var classNames81 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
+      flattenCodeTree(node2.children, classNames81).forEach(function(i2) {
         return newTree.push(i2);
       });
     }
@@ -55482,7 +55591,7 @@ function processLines(codeTree, wrapLines, lineProps, showLineNumbers, showInlin
 function defaultRenderer(_ref5) {
   var rows = _ref5.rows, stylesheet = _ref5.stylesheet, useInlineStyles = _ref5.useInlineStyles;
   return rows.map(function(node2, i) {
-    return createElement({
+    return createElement2({
       node: node2,
       stylesheet,
       useInlineStyles,
@@ -55528,7 +55637,7 @@ function highlight_default(defaultAstGenerator, defaultStyle) {
       style: _objectSpread2(_objectSpread2({}, style2['code[class*="language-"]']), style2['code[class*="language-'.concat(language, '"]')])
     } : _ref7$codeTagProps, _ref7$useInlineStyles = _ref7.useInlineStyles, useInlineStyles = _ref7$useInlineStyles === void 0 ? true : _ref7$useInlineStyles, _ref7$showLineNumbers = _ref7.showLineNumbers, showLineNumbers = _ref7$showLineNumbers === void 0 ? false : _ref7$showLineNumbers, _ref7$showInlineLineN = _ref7.showInlineLineNumbers, showInlineLineNumbers = _ref7$showInlineLineN === void 0 ? true : _ref7$showInlineLineN, _ref7$startingLineNum = _ref7.startingLineNumber, startingLineNumber = _ref7$startingLineNum === void 0 ? 1 : _ref7$startingLineNum, lineNumberContainerStyle = _ref7.lineNumberContainerStyle, _ref7$lineNumberStyle = _ref7.lineNumberStyle, lineNumberStyle = _ref7$lineNumberStyle === void 0 ? {} : _ref7$lineNumberStyle, wrapLines = _ref7.wrapLines, _ref7$wrapLongLines = _ref7.wrapLongLines, wrapLongLines = _ref7$wrapLongLines === void 0 ? false : _ref7$wrapLongLines, _ref7$lineProps = _ref7.lineProps, lineProps = _ref7$lineProps === void 0 ? {} : _ref7$lineProps, renderer = _ref7.renderer, _ref7$PreTag = _ref7.PreTag, PreTag = _ref7$PreTag === void 0 ? "pre" : _ref7$PreTag, _ref7$CodeTag = _ref7.CodeTag, CodeTag = _ref7$CodeTag === void 0 ? "code" : _ref7$CodeTag, _ref7$code = _ref7.code, code4 = _ref7$code === void 0 ? (Array.isArray(children3) ? children3[0] : children3) || "" : _ref7$code, astGenerator = _ref7.astGenerator, rest = (0, import_objectWithoutProperties.default)(_ref7, _excluded);
     astGenerator = astGenerator || defaultAstGenerator;
-    var allLineNumbers = showLineNumbers ? /* @__PURE__ */ React27__default.default.createElement(AllLineNumbers, {
+    var allLineNumbers = showLineNumbers ? /* @__PURE__ */ React26__default.default.createElement(AllLineNumbers, {
       containerStyle: lineNumberContainerStyle,
       codeStyle: codeTagProps.style || {},
       numberStyle: lineNumberStyle,
@@ -55555,7 +55664,7 @@ function highlight_default(defaultAstGenerator, defaultStyle) {
       }, codeTagProps.style);
     }
     if (!astGenerator) {
-      return /* @__PURE__ */ React27__default.default.createElement(PreTag, preProps, allLineNumbers, /* @__PURE__ */ React27__default.default.createElement(CodeTag, codeTagProps, code4));
+      return /* @__PURE__ */ React26__default.default.createElement(PreTag, preProps, allLineNumbers, /* @__PURE__ */ React26__default.default.createElement(CodeTag, codeTagProps, code4));
     }
     if (wrapLines === void 0 && renderer || wrapLongLines) wrapLines = true;
     renderer = renderer || defaultRenderer;
@@ -55575,7 +55684,7 @@ function highlight_default(defaultAstGenerator, defaultStyle) {
     var lineBreakCount = (_code$match$length = (_code$match = code4.match(/\n/g)) === null || _code$match === void 0 ? void 0 : _code$match.length) !== null && _code$match$length !== void 0 ? _code$match$length : 0;
     var largestLineNumber = startingLineNumber + lineBreakCount;
     var rows = processLines(codeTree, wrapLines, lineProps, showLineNumbers, showInlineLineNumbers, startingLineNumber, largestLineNumber, lineNumberStyle, wrapLongLines);
-    return /* @__PURE__ */ React27__default.default.createElement(PreTag, preProps, /* @__PURE__ */ React27__default.default.createElement(CodeTag, codeTagProps, !showInlineLineNumbers && allLineNumbers, renderer({
+    return /* @__PURE__ */ React26__default.default.createElement(PreTag, preProps, /* @__PURE__ */ React26__default.default.createElement(CodeTag, codeTagProps, !showInlineLineNumbers && allLineNumbers, renderer({
       rows,
       stylesheet: style2,
       useInlineStyles
@@ -55912,7 +56021,7 @@ var json_default = json;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js
 init_jsx();
-var jsx_default = jsx211;
+var jsx_default = jsx213;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/markup.js
 init_markup();
@@ -56003,19 +56112,19 @@ function MarkdownCodeBlock({
   wrapLongLines = false,
   ...props
 }) {
-  const [copied, setCopied] = React27.useState(false);
-  const timeoutRef = React27.useRef(null);
+  const [copied, setCopied] = React26.useState(false);
+  const timeoutRef = React26.useRef(null);
   const title = meta?.title ?? meta?.filename;
-  const resolvedLanguage = React27.useMemo(() => {
+  const resolvedLanguage = React26.useMemo(() => {
     return normalizeLanguage(language);
   }, [language]);
   const languageLabel = language || resolvedLanguage;
   const showHeader = Boolean(title || languageLabel || showCopy);
-  const highlightLines = React27.useMemo(() => {
+  const highlightLines = React26.useMemo(() => {
     return new Set(meta?.highlightLines ?? []);
   }, [meta?.highlightLines]);
   const showLineNumbers = Boolean(meta?.showLineNumbers);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     return () => {
       if (timeoutRef.current) {
         window.clearTimeout(timeoutRef.current);
@@ -56041,60 +56150,70 @@ function MarkdownCodeBlock({
     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(
-      prism_light_default,
-      {
-        className: "eui-markdown-code-highlighter",
-        language: resolvedLanguage,
-        style: vsc_dark_plus_default,
-        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
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
+        className
+      ),
+      children: [
+        showHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eui-markdown-code-header flex min-h-10 items-center justify-between gap-3 border-b border-slate-700 bg-[#161b22] px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eui-markdown-code-header-main flex min-w-0 items-center gap-2.5", children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx(Caption, { className: "eui-markdown-code-title truncate text-[0.8125rem] font-semibold text-slate-100 opacity-100", children: title }) : null,
+            languageLabel ? /* @__PURE__ */ jsxRuntime.jsx(Overline, { className: "eui-markdown-code-language inline-flex h-[1.35rem] items-center rounded-full border border-slate-700 bg-[#0d1117] px-2 text-[0.6875rem] font-bold uppercase tracking-wider text-slate-400", children: languageLabel }) : null
+          ] }),
+          showCopy ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "eui-markdown-copy-button inline-flex h-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-slate-700 bg-slate-800 px-2.5 text-xs font-medium leading-none text-slate-300 transition hover:border-slate-500 hover:bg-slate-700 hover:text-slate-100 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400",
+              onClick: copyCode,
+              "aria-label": copied ? "Code copied" : "Copy code",
+              children: copied ? "Copied" : "Copy"
             }
-          };
-        },
-        children: code4
-      }
-    )
-  ] });
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          prism_light_default,
+          {
+            className: "eui-markdown-code-highlighter !m-0 !rounded-none !border-0 !bg-transparent !shadow-none [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-[3px] [&::-webkit-scrollbar-thumb]:border-[#0d1117] [&::-webkit-scrollbar-thumb]:bg-slate-700 hover:[&::-webkit-scrollbar-thumb]:bg-slate-500 [&::-webkit-scrollbar-track]:bg-[#0d1117] [&::-webkit-scrollbar]:h-3 [&::-webkit-scrollbar]:w-3",
+            language: resolvedLanguage,
+            style: vsc_dark_plus_default,
+            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 border-l-[3px] border-amber-600 bg-yellow-400/10" : void 0,
+                style: {
+                  display: "block"
+                }
+              };
+            },
+            children: code4
+          }
+        )
+      ]
+    }
+  );
 }
 var MarkdownCodeBlock_default = MarkdownCodeBlock;
 function MarkdownInlineCode({
@@ -56103,11 +56222,14 @@ function MarkdownInlineCode({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "code",
+    Code,
     {
       ...props,
-      className: classNames66__default.default("eui-markdown-inline-code", className),
-      children: children3
+      className: classNames77__default.default(
+        "eui-markdown-inline-code whitespace-break-spaces rounded-md border border-gray-300/70 bg-gray-200/60 px-1.5 py-0.5 font-mono text-[0.875em] font-medium text-gray-900 dark:border-gray-600/70 dark:bg-gray-700/50 dark:text-gray-200",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children3 })
     }
   );
 }
@@ -56144,7 +56266,10 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames66__default.default("eui-markdown-link", className),
+      className: classNames77__default.default(
+        "eui-markdown-link font-medium text-blue-600 underline underline-offset-4 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+        className
+      ),
       children: children3
     }
   );
@@ -56168,7 +56293,7 @@ function MarkdownImage({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
+    Image2,
     {
       ...props,
       src: safeSrc,
@@ -56176,7 +56301,10 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames66__default.default("eui-markdown-image", className)
+      className: classNames77__default.default(
+        "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
+        className
+      )
     }
   );
 }
@@ -56186,14 +56314,34 @@ function MarkdownTable({
   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: children3 }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(TableFrame, { className: "eui-markdown-table-wrapper my-6 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(
+    TableElement,
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-table w-full border-collapse text-[0.925rem]",
+        className
+      ),
+      children: children3
+    }
+  ) });
 }
 function MarkdownTableCell({
   children: children3,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props, className: classNames66__default.default("eui-markdown-table-cell", className), children: children3 });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableCell,
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-table-cell border-b border-r border-gray-200 p-3 text-left align-top last:border-r-0 dark:border-gray-700",
+        className
+      ),
+      children: children3
+    }
+  );
 }
 function MarkdownTableHeaderCell({
   children: children3,
@@ -56201,14 +56349,59 @@ function MarkdownTableHeaderCell({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "th",
+    TableHeaderCell,
     {
       ...props,
-      className: classNames66__default.default("eui-markdown-table-header-cell", className),
+      className: classNames77__default.default(
+        "eui-markdown-table-header-cell border-b border-r border-gray-200 p-3 text-left align-top font-bold text-gray-900 last:border-r-0 dark:border-gray-700 dark:text-gray-100",
+        className
+      ),
       children: children3
     }
   );
 }
+function MarkdownTableHead({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableHead,
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
+        className
+      )
+    }
+  );
+}
+function MarkdownTableBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableBody,
+    {
+      ...props,
+      className: classNames77__default.default("eui-markdown-table-body", className)
+    }
+  );
+}
+function MarkdownTableRow({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableRow,
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
+        className
+      )
+    }
+  );
+}
 var MarkdownTable_default = MarkdownTable;
 function MarkdownBlockquote({
   children: children3,
@@ -56216,15 +56409,204 @@ function MarkdownBlockquote({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "blockquote",
+    Quote,
     {
       ...props,
-      className: classNames66__default.default("eui-markdown-blockquote", className),
-      children: children3
+      as: "blockquote",
+      className: classNames77__default.default(
+        "eui-markdown-blockquote my-6 border-l-4 border-gray-300 bg-transparent px-4 py-0 text-gray-600 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 dark:border-gray-700 dark:text-gray-400",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children3 })
     }
   );
 }
 var MarkdownBlockquote_default = MarkdownBlockquote;
+function MarkdownParagraph({
+  children: children3,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Paragraph,
+    {
+      ...props,
+      level: 1,
+      className: classNames77__default.default("eui-markdown-paragraph my-4", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children3 })
+    }
+  );
+}
+var MarkdownParagraph_default = MarkdownParagraph;
+function MarkdownStrong({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "strong",
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
+        className
+      )
+    }
+  );
+}
+var MarkdownStrong_default = MarkdownStrong;
+function MarkdownEmphasis({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "em",
+    {
+      ...props,
+      className: classNames77__default.default("eui-markdown-emphasis italic", className)
+    }
+  );
+}
+var MarkdownEmphasis_default = MarkdownEmphasis;
+function MarkdownStrikethrough({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "del",
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
+        className
+      )
+    }
+  );
+}
+var MarkdownStrikethrough_default = MarkdownStrikethrough;
+function MarkdownUnorderedList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ListRoot,
+    {
+      ...props,
+      as: "ul",
+      className: cn(
+        "eui-markdown-unordered-list",
+        className?.includes("contains-task-list") && "list-none pl-0",
+        className
+      )
+    }
+  );
+}
+function MarkdownOrderedList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ListRoot,
+    {
+      ...props,
+      as: "ol",
+      className: cn("eui-markdown-ordered-list", className)
+    }
+  );
+}
+function MarkdownListItem({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ListItemElement,
+    {
+      ...props,
+      as: "li",
+      className: cn(
+        "eui-markdown-list-item",
+        className?.includes("task-list-item") && "list-none pl-0",
+        className
+      )
+    }
+  );
+}
+var MarkdownListItem_default = MarkdownListItem;
+function MarkdownTaskCheckbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
+        className
+      )
+    }
+  );
+}
+var MarkdownTaskCheckbox_default = MarkdownTaskCheckbox;
+function MarkdownThematicBreak({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
+        className
+      )
+    }
+  );
+}
+var MarkdownThematicBreak_default = MarkdownThematicBreak;
+function MarkdownBreak(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("br", { ...props });
+}
+var MarkdownBreak_default = MarkdownBreak;
+function MarkdownDetails({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "details",
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-details my-4 rounded-md border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-900",
+        className
+      )
+    }
+  );
+}
+function MarkdownSummary({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "summary",
+    {
+      ...props,
+      className: classNames77__default.default(
+        "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
+        className
+      )
+    }
+  );
+}
+function MarkdownFigure({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "figure",
+    {
+      ...props,
+      className: classNames77__default.default("eui-markdown-figure my-6", className)
+    }
+  );
+}
+function MarkdownFigcaption({
+  children: children3,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Caption,
+    {
+      className: classNames77__default.default(
+        "text-gray-500 opacity-100 dark:text-gray-400",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children3 })
+    }
+  ) });
+}
 function getTextContent(node2) {
   if (typeof node2 === "string" || typeof node2 === "number") {
     return String(node2);
@@ -56232,7 +56614,7 @@ function getTextContent(node2) {
   if (Array.isArray(node2)) {
     return node2.map(getTextContent).join("");
   }
-  if (React27.isValidElement(node2)) {
+  if (React26.isValidElement(node2)) {
     return getTextContent(node2.props.children);
   }
   return "";
@@ -56240,6 +56622,24 @@ function getTextContent(node2) {
 function createHeadingKey(level, text10) {
   return `${level}:${sanitizeHeading(text10)}`;
 }
+function remarkCodeMetadata() {
+  return (tree) => {
+    const visit2 = (node2) => {
+      if (node2.type === "code") {
+        const data = node2.data ?? (node2.data = {});
+        const properties2 = data.hProperties ?? (data.hProperties = {});
+        if (node2.lang) {
+          properties2["data-language"] = node2.lang;
+        }
+        if (node2.meta) {
+          properties2["data-meta"] = node2.meta;
+        }
+      }
+      node2.children?.forEach(visit2);
+    };
+    visit2(tree);
+  };
+}
 function parseNumberRanges(value) {
   if (!value) return [];
   const normalized = value.replace(/[{}[\]\s]/g, "");
@@ -56265,15 +56665,19 @@ function parseNumberRanges(value) {
 }
 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(/{([^}]+)}/);
+  const readValue = (key) => {
+    const match = metaString.match(
+      new RegExp(`(?:^|\\s)${key}=(?:"([^"]*)"|'([^']*)'|([^\\s]+))`, "i")
+    );
+    return match?.[1] ?? match?.[2] ?? match?.[3];
+  };
+  const filename = readValue("(?:filename|file)");
+  const title = readValue("title");
+  const highlightMatch = metaString.match(/(?:highlight|lines)=["']?([^"'\s]+)["']?/i) || metaString.match(/{([^}]+)}/);
   return {
-    filename: filenameMatch?.[1],
-    title: titleMatch?.[1],
-    showLineNumbers: /\b(showLineNumbers|lineNumbers|line-numbers)\b/.test(
+    filename,
+    title,
+    showLineNumbers: /\b(showLineNumbers|lineNumbers|line-numbers)\b/i.test(
       metaString
     ),
     highlightLines: parseNumberRanges(highlightMatch?.[1])
@@ -56281,26 +56685,35 @@ function parseCodeMeta(metaString) {
 }
 function getCodeMetaString(node2) {
   const value = node2;
-  return value?.data?.meta || value?.data?.hProperties?.meta || value?.properties?.meta || value?.properties?.dataMeta || value?.meta;
+  return value?.data?.meta || value?.data?.hProperties?.meta || value?.properties?.meta || value?.properties?.dataMeta || value?.properties?.["data-meta"] || value?.meta;
+}
+function getStringProperty(value) {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    return value.map(String).join(" ");
+  }
+  return void 0;
 }
 function getLanguageFromClassName(className) {
   if (!className) return void 0;
   const match = className.match(/language-([^\s]+)/);
   return match?.[1];
 }
-function getCodeInfoFromPreChildren(children3) {
-  const childArray = React27__default.default.Children.toArray(children3);
-  const codeElement = childArray.find((child) => {
-    if (!React27.isValidElement(child)) return false;
-    return child.type === "code";
-  });
-  const codeProps = codeElement?.props;
-  const code4 = getTextContent(codeProps?.children ?? children3).replace(
-    /\n$/,
-    ""
-  );
-  const language = getLanguageFromClassName(codeProps?.className);
-  const meta = parseCodeMeta(codeProps?.["data-meta"]);
+function getAstTextContent(node2) {
+  if (!node2) return "";
+  if (typeof node2.value === "string") return node2.value;
+  return node2.children?.map(getAstTextContent).join("") ?? "";
+}
+function getCodeInfoFromPreNode(node2, fallbackChildren) {
+  const preNode = node2;
+  const codeNode = preNode?.children?.find((child) => child.tagName === "code");
+  const properties2 = codeNode?.properties;
+  const className = getStringProperty(properties2?.className);
+  const dataLanguage = getStringProperty(properties2?.dataLanguage) ?? getStringProperty(properties2?.["data-language"]);
+  const astCode = getAstTextContent(codeNode);
+  const code4 = (astCode || getTextContent(fallbackChildren)).replace(/\n$/, "");
+  const language = getLanguageFromClassName(className) ?? dataLanguage;
+  const meta = parseCodeMeta(getCodeMetaString(codeNode));
   return {
     code: code4,
     language,
@@ -56348,6 +56761,7 @@ function MarkdownRenderer({
     })}`;
   };
   const remarkPlugins = [];
+  remarkPlugins.push(remarkCodeMetadata);
   if (enableGfm) {
     remarkPlugins.push(remarkGfm);
   }
@@ -56443,13 +56857,15 @@ function MarkdownRenderer({
      * Then the pre renderer can reliably extract language + meta.
      */
     code: ({ node: node2, className: className2, children: children3, ...rest }) => {
-      const language = getLanguageFromClassName(className2);
+      const astNode = node2;
+      const language = getLanguageFromClassName(className2) ?? getStringProperty(astNode.properties?.dataLanguage) ?? getStringProperty(astNode.properties?.["data-language"]);
       if (language) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           "code",
           {
             ...rest,
             className: className2,
+            "data-language": language,
             "data-meta": getCodeMetaString(node2),
             children: children3
           }
@@ -56463,9 +56879,9 @@ function MarkdownRenderer({
      * React-markdown's pre props are HTMLPreElement props.
      * MarkdownCodeBlock root is a div.
      */
-    pre: ({ node: _node, children: children3 }) => {
+    pre: ({ node: node2, children: children3 }) => {
       const Component = components?.pre ?? MarkdownCodeBlock_default;
-      const { code: code4, language, meta } = getCodeInfoFromPreChildren(children3);
+      const { code: code4, language, meta } = getCodeInfoFromPreNode(node2, children3);
       return /* @__PURE__ */ jsxRuntime.jsx(
         Component,
         {
@@ -56509,18 +56925,104 @@ function MarkdownRenderer({
       const Component = components?.blockquote ?? MarkdownBlockquote_default;
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest, children: children3 });
     },
+    p: ({ node: _node, ...rest }) => {
+      const Component = components?.p ?? MarkdownParagraph_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    strong: ({ node: _node, ...rest }) => {
+      const Component = components?.strong ?? MarkdownStrong_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    em: ({ node: _node, ...rest }) => {
+      const Component = components?.em ?? MarkdownEmphasis_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    del: ({ node: _node, ...rest }) => {
+      const Component = components?.del ?? MarkdownStrikethrough_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    ul: ({ node: _node, ...rest }) => {
+      const Component = components?.ul ?? MarkdownUnorderedList;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    ol: ({ node: _node, ...rest }) => {
+      const Component = components?.ol ?? MarkdownOrderedList;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    li: ({ node: _node, ...rest }) => {
+      const Component = components?.li ?? MarkdownListItem_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    input: ({ node: _node, ...rest }) => {
+      const Component = components?.input ?? MarkdownTaskCheckbox_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    hr: ({ node: _node, ...rest }) => {
+      const Component = components?.hr ?? MarkdownThematicBreak_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    br: ({ node: _node, ...rest }) => {
+      const Component = components?.br ?? MarkdownBreak_default;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    details: ({ node: _node, ...rest }) => {
+      const Component = components?.details ?? MarkdownDetails;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    summary: ({ node: _node, ...rest }) => {
+      const Component = components?.summary ?? MarkdownSummary;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    figure: ({ node: _node, ...rest }) => {
+      const Component = components?.figure ?? MarkdownFigure;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    figcaption: ({ node: _node, ...rest }) => {
+      const Component = components?.figcaption ?? MarkdownFigcaption;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    thead: ({ node: _node, ...rest }) => {
+      const Component = components?.thead ?? MarkdownTableHead;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    tbody: ({ node: _node, ...rest }) => {
+      const Component = components?.tbody ?? MarkdownTableBody;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
+    tr: ({ node: _node, ...rest }) => {
+      const Component = components?.tr ?? MarkdownTableRow;
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rest });
+    },
     ...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(
-    Markdown,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      remarkPlugins,
-      rehypePlugins,
-      skipHtml: !allowHtml,
-      components: rendererComponents,
-      children: markdown
+      className: classNames77__default.default(
+        "eui-markdown markdown-body break-words bg-transparent text-[0.95rem] leading-7 text-gray-800 dark:text-gray-300",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: classNames77__default.default(
+            "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+            contentClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Markdown,
+            {
+              remarkPlugins,
+              rehypePlugins,
+              skipHtml: !allowHtml,
+              components: rendererComponents,
+              children: markdown
+            }
+          )
+        }
+      )
     }
-  ) }) });
+  );
 }
 var MarkdownRenderer_default = MarkdownRenderer;
 function MarkdownViewer({
@@ -56532,7 +57034,7 @@ function MarkdownViewer({
 }) {
   const context = useMarkdown();
   const markdown = value ?? context?.markdown ?? "";
-  const headings = React27.useMemo(() => {
+  const headings = React26.useMemo(() => {
     if (externalHeadings) {
       return externalHeadings;
     }
@@ -56581,11 +57083,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames66__default.default(
+      className: classNames77__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),
+        active ? classNames77__default.default("text-primary font-semibold underline", activeClassName) : classNames77__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -56624,14 +57126,14 @@ function MarkdownTOC({
   onHeadingClick
 }) {
   const context = useMarkdown();
-  const [collapsed, setCollapsed] = React27.useState(defaultCollapsed);
+  const [collapsed, setCollapsed] = React26.useState(defaultCollapsed);
   const { headings, numberedHeadings, hasHeadings } = useMarkdownHeadings({
     markdown,
     headings: externalHeadings,
     minDepth,
     maxDepth
   });
-  const tocHeadings = React27.useMemo(() => {
+  const tocHeadings = React26.useMemo(() => {
     return numbered ? numberedHeadings : headings;
   }, [headings, numbered, numberedHeadings]);
   const { activeHeading, scrollToHeading, setActiveHeading } = useActiveHeading(
@@ -56651,7 +57153,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -56671,7 +57173,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -56684,7 +57186,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: classNames66__default.default(
+              className: classNames77__default.default(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -56697,7 +57199,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -56709,7 +57211,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
       "nav",
       {
-        className: classNames66__default.default(
+        className: classNames77__default.default(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -56733,7 +57235,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames66__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames77__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -56832,7 +57334,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__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",
@@ -56846,7 +57348,7 @@ function MarkdownToolbar({
             disabled: disabled || actionsDisabled,
             title: action.shortcut ? `${action.title || action.label} (${action.shortcut})` : action.title || action.label,
             onClick: () => onAction?.(action.id),
-            className: classNames66__default.default(
+            className: classNames77__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",
@@ -56866,7 +57368,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames66__default.default(
+            className: classNames77__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",
@@ -57052,20 +57554,20 @@ function MarkdownSourceEditor({
   onKeyDown,
   ...props
 }) {
-  const textareaRef = React27.useRef(null);
+  const textareaRef = React26.useRef(null);
   const isControlled = value !== void 0;
   const isViewModeControlled = viewMode !== void 0;
-  const [internalValue, setInternalValue] = React27.useState(defaultValue);
-  const [internalViewMode, setInternalViewMode] = React27.useState(defaultViewMode);
+  const [internalValue, setInternalValue] = React26.useState(defaultValue);
+  const [internalViewMode, setInternalViewMode] = React26.useState(defaultViewMode);
   const currentValue = isControlled ? value : internalValue;
   const currentViewMode = isViewModeControlled ? viewMode : internalViewMode;
   const resolvedValue = currentValue ?? "";
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!isControlled) {
       setInternalValue(defaultValue);
     }
   }, [defaultValue, isControlled]);
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!isViewModeControlled) {
       setInternalViewMode(defaultViewMode);
     }
@@ -57123,7 +57625,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -57139,7 +57641,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames66__default.default(toolbarClassName, toolbarProps?.className),
+            className: classNames77__default.default(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -57147,7 +57649,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -57170,7 +57672,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames66__default.default(
+            className: classNames77__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",
@@ -57200,7 +57702,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -57233,9 +57735,9 @@ function MarkdownSplitEditor({
   ...sourceEditorProps
 }) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React27.useState(defaultValue);
+  const [internalValue, setInternalValue] = React26.useState(defaultValue);
   const currentValue = isControlled ? value : internalValue;
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!isControlled) {
       setInternalValue(defaultValue);
     }
@@ -57250,7 +57752,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -57260,7 +57762,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -57284,7 +57786,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -57314,9 +57816,9 @@ function MarkdownEditor({
   ...sourceEditorProps
 }) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React27.useState(defaultValue);
+  const [internalValue, setInternalValue] = React26.useState(defaultValue);
   const currentValue = isControlled ? value : internalValue;
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (!isControlled) {
       setInternalValue(defaultValue);
     }
@@ -57374,7 +57876,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -57384,7 +57886,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57409,7 +57911,7 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57422,6 +57924,414 @@ function MarkdownField({
   );
 }
 var MarkdownField_default = MarkdownField;
+function toCssSize2(value) {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+function CodeMirrorMarkdownEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  onBlur,
+  id: id2,
+  name: name2,
+  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] = React26.useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  React26.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, isControlled]);
+  const updateValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id: id2,
+      "data-name": name2,
+      className: classNames77__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: classNames77__default.default("eui-markdown-codemirror", editorClassName),
+          onChange: updateValue,
+          onBlur
+        }
+      )
+    }
+  );
+}
+var CodeMirrorMarkdownEditor_default = CodeMirrorMarkdownEditor;
+var DEFAULT_CODE_BLOCK_LANGUAGES = {
+  js: "JavaScript",
+  jsx: "JSX",
+  ts: "TypeScript",
+  tsx: "TSX",
+  css: "CSS",
+  scss: "SCSS",
+  json: "JSON",
+  bash: "Bash",
+  sh: "Shell",
+  html: "HTML",
+  xml: "XML",
+  md: "Markdown"
+};
+function toCssSize3(value) {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+function DefaultToolbar() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    editor.ConditionalContents,
+    {
+      options: [
+        {
+          when: (editor) => editor?.editorType === "codeblock",
+          contents: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(editor.UndoRedo, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(editor.ChangeCodeMirrorLanguage, {})
+          ] })
+        },
+        {
+          fallback: () => /* @__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.CodeToggle, {}),
+            /* @__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.InsertCodeBlock, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(editor.InsertThematicBreak, {})
+          ] })
+        }
+      ]
+    }
+  );
+}
+function createDefaultPlugins({
+  showToolbar,
+  toolbarPosition,
+  toolbarClassName,
+  toolbarContents,
+  defaultCodeBlockLanguage,
+  codeMirrorOptions,
+  imageOptions,
+  linkDialogOptions
+}) {
+  const codeBlockLanguages = codeMirrorOptions?.codeBlockLanguages ?? DEFAULT_CODE_BLOCK_LANGUAGES;
+  return [
+    editor.headingsPlugin(),
+    editor.listsPlugin(),
+    editor.quotePlugin(),
+    editor.thematicBreakPlugin(),
+    editor.markdownShortcutPlugin(),
+    editor.linkPlugin(),
+    editor.linkDialogPlugin(linkDialogOptions),
+    editor.imagePlugin(imageOptions),
+    editor.tablePlugin(),
+    editor.codeBlockPlugin({
+      defaultCodeBlockLanguage
+    }),
+    editor.codeMirrorPlugin({
+      ...codeMirrorOptions,
+      codeBlockLanguages
+    }),
+    ...showToolbar ? [
+      editor.toolbarPlugin({
+        toolbarContents: toolbarContents ?? DefaultToolbar,
+        toolbarClassName: classNames77__default.default(
+          "eui-markdown-mdx-toolbar",
+          toolbarClassName
+        ),
+        toolbarPosition
+      })
+    ] : []
+  ];
+}
+var MDXMarkdownEditor = React26.forwardRef(
+  function MDXMarkdownEditor2({
+    value,
+    defaultValue = "",
+    onChange,
+    onBlur,
+    id: id2,
+    name: name2,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    minHeight = 360,
+    maxHeight,
+    dark = false,
+    invalid = false,
+    ariaLabel,
+    ariaDescribedBy,
+    className,
+    editorClassName,
+    contentEditableClassName,
+    toolbarClassName,
+    plugins,
+    showToolbar = true,
+    toolbarPosition = "top",
+    toolbarContents,
+    defaultCodeBlockLanguage = "tsx",
+    codeMirrorOptions,
+    imageOptions,
+    linkDialogOptions,
+    ...props
+  }, forwardedRef) {
+    const editorRef = React26.useRef(null);
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = React26.useState(defaultValue);
+    const currentValue = isControlled ? value : internalValue;
+    const defaultPlugins = React26.useMemo(
+      () => createDefaultPlugins({
+        showToolbar,
+        toolbarPosition,
+        toolbarClassName,
+        toolbarContents,
+        defaultCodeBlockLanguage,
+        codeMirrorOptions,
+        imageOptions,
+        linkDialogOptions
+      }),
+      [
+        codeMirrorOptions,
+        defaultCodeBlockLanguage,
+        imageOptions,
+        linkDialogOptions,
+        showToolbar,
+        toolbarClassName,
+        toolbarContents,
+        toolbarPosition
+      ]
+    );
+    React26.useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus: (callbackFn, options) => editorRef.current?.focus(callbackFn, options),
+        getContentEditableHTML: () => editorRef.current?.getContentEditableHTML() ?? "",
+        getMarkdown: () => editorRef.current?.getMarkdown() ?? currentValue,
+        getSelectionMarkdown: () => editorRef.current?.getSelectionMarkdown() ?? "",
+        insertMarkdown: (markdown) => editorRef.current?.insertMarkdown(markdown),
+        setMarkdown: (markdown) => editorRef.current?.setMarkdown(markdown)
+      }),
+      [currentValue]
+    );
+    React26.useEffect(() => {
+      if (!isControlled || !editorRef.current) return;
+      const nextValue = value ?? "";
+      if (editorRef.current.getMarkdown() !== nextValue) {
+        editorRef.current.setMarkdown(nextValue);
+      }
+    }, [isControlled, value]);
+    const updateValue = (nextValue, initialMarkdownNormalize) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue, initialMarkdownNormalize);
+    };
+    const handleBlur = (event) => {
+      const nextTarget = event.relatedTarget;
+      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+        return;
+      }
+      onBlur?.(event.nativeEvent);
+    };
+    const style2 = {
+      minHeight: toCssSize3(minHeight),
+      maxHeight: toCssSize3(maxHeight),
+      "--eui-mdx-min-height": toCssSize3(minHeight),
+      "--eui-mdx-max-height": toCssSize3(maxHeight)
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: id2,
+        role: "group",
+        "data-name": name2,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-disabled": disabled || void 0,
+        "aria-readonly": readOnly || void 0,
+        "aria-required": required || void 0,
+        "aria-invalid": invalid || void 0,
+        onBlurCapture: handleBlur,
+        className: classNames77__default.default(
+          "eui-markdown-adapter",
+          "eui-markdown-mdx-adapter",
+          dark && ["dark", "dark-theme"],
+          disabled && "is-disabled",
+          readOnly && "is-read-only",
+          invalid && "has-error",
+          className
+        ),
+        style: style2,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          editor.MDXEditor,
+          {
+            ...props,
+            ref: editorRef,
+            markdown: currentValue ?? "",
+            readOnly: disabled || readOnly,
+            plugins: plugins ?? defaultPlugins,
+            className: classNames77__default.default("eui-markdown-mdx-editor", editorClassName),
+            contentEditableClassName: classNames77__default.default(
+              "eui-markdown-mdx-content",
+              contentEditableClassName
+            ),
+            onChange: updateValue
+          }
+        )
+      }
+    );
+  }
+);
+var MDXMarkdownEditor_default = MDXMarkdownEditor;
+function MDXMarkdownField({
+  name: name2,
+  validate,
+  label,
+  helperText,
+  validateOnChange = true,
+  validateOnBlur = true,
+  wrapperClassName,
+  labelClassName,
+  helperTextClassName,
+  ...editorProps
+}) {
+  const editorRef = React26.useRef(null);
+  const [field, meta, helpers] = formik.useField({
+    name: name2,
+    validate
+  });
+  const editorId = editorProps.id || field.name;
+  const helperId = helperText ? `${editorId}-help` : void 0;
+  const errorId = `${editorId}-error`;
+  const hasError = Boolean(meta.touched && meta.error);
+  const describedBy = [helperId, hasError ? errorId : void 0].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames77__default.default(
+        "eui-markdown-mdx-field",
+        "relative space-y-2",
+        wrapperClassName
+      ),
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: editorId,
+            className: classNames77__default.default(
+              "block text-sm font-medium text-gray-700 dark:text-gray-200",
+              labelClassName
+            ),
+            onClick: () => editorRef.current?.focus(),
+            children: [
+              label,
+              editorProps.required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-red-600", "aria-hidden": "true", children: "*" }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MDXMarkdownEditor_default,
+          {
+            ...editorProps,
+            ref: editorRef,
+            id: editorId,
+            name: field.name,
+            value: field.value ?? "",
+            invalid: hasError,
+            ariaLabel: editorProps.ariaLabel ?? label,
+            ariaDescribedBy: describedBy || void 0,
+            onChange: (nextValue) => {
+              void helpers.setValue(nextValue, validateOnChange);
+            },
+            onBlur: () => {
+              void helpers.setTouched(true, validateOnBlur);
+            }
+          }
+        ),
+        helperText ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: helperId,
+            className: classNames77__default.default(
+              "text-sm text-gray-500 dark:text-gray-400",
+              helperTextClassName
+            ),
+            children: helperText
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, role: hasError ? "alert" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+          InputResponse_default,
+          {
+            name: field.name,
+            visibility: hasError,
+            variant: "danger"
+          }
+        ) })
+      ]
+    }
+  );
+}
+var MDXMarkdownField_default = MDXMarkdownField;
 function resolveSize(value) {
   if (value === void 0) return void 0;
   return typeof value === "number" ? `${value}px` : value;
@@ -57462,10 +58372,10 @@ function MarkdownLayout({
   };
   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(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames77__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -57477,7 +58387,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsxRuntime.jsx(
           "header",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -57488,7 +58398,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -57501,7 +58411,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames66__default.default(
+                  className: classNames77__default.default(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -57514,7 +58424,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames66__default.default(
+                  className: classNames77__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57527,7 +58437,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "main",
                 {
-                  className: classNames66__default.default(
+                  className: classNames77__default.default(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -57538,7 +58448,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames66__default.default(
+                  className: classNames77__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57551,7 +58461,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames66__default.default(
+                  className: classNames77__default.default(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -57567,7 +58477,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsxRuntime.jsx(
           "footer",
           {
-            className: classNames66__default.default(
+            className: classNames77__default.default(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -57604,7 +58514,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default(
+      className: classNames77__default.default(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -57615,7 +58525,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
-              className: classNames66__default.default(
+              className: classNames77__default.default(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -57627,7 +58537,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: classNames66__default.default(
+              className: classNames77__default.default(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -57715,7 +58625,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         [`${styles}`]: styles
       }),
       children: children3
@@ -57752,7 +58662,7 @@ function SidebarLayout({
   header = /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
   footer: footer2 = /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
 }) {
-  const [showSidebar, setShowSidebar] = React27.useState(true);
+  const [showSidebar, setShowSidebar] = React26.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsx(GenericLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx(Layout, { flexDirection: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs(Content, { sidebarVisible: showSidebar, styles: "theme-bg-md pt-[60px]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ContentArea_default, { children: children3 }),
     footer2
@@ -57764,7 +58674,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames66__default.default({
+      className: classNames77__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -57806,7 +58716,7 @@ function ScrollToTop({
   behavior = "smooth",
   target
 }) {
-  React27.useEffect(() => {
+  React26.useEffect(() => {
     if (target) {
       target.scrollTo({
         top: 0,
@@ -57882,6 +58792,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;
@@ -57945,28 +58856,49 @@ exports.LinePlot = LinePlot;
 exports.Link = Link;
 exports.List = List_default;
 exports.ListItem = ListItem_default;
+exports.ListItemElement = ListItemElement;
+exports.ListRoot = ListRoot;
+exports.MDXMarkdownEditor = MDXMarkdownEditor_default;
+exports.MDXMarkdownField = MDXMarkdownField_default;
 exports.MarkdownBlockquote = MarkdownBlockquote_default;
+exports.MarkdownBreak = MarkdownBreak_default;
 exports.MarkdownCodeBlock = MarkdownCodeBlock_default;
 exports.MarkdownContext = MarkdownContext;
+exports.MarkdownDetails = MarkdownDetails;
 exports.MarkdownDocsLayout = MarkdownDocsLayout_default;
 exports.MarkdownEditor = MarkdownEditor_default;
+exports.MarkdownEmphasis = MarkdownEmphasis_default;
 exports.MarkdownField = MarkdownField_default;
+exports.MarkdownFigcaption = MarkdownFigcaption;
+exports.MarkdownFigure = MarkdownFigure;
 exports.MarkdownHeadingComponent = MarkdownHeading_default;
 exports.MarkdownImage = MarkdownImage_default;
 exports.MarkdownInlineCode = MarkdownInlineCode_default;
 exports.MarkdownLayout = MarkdownLayout_default;
 exports.MarkdownLink = MarkdownLink_default;
+exports.MarkdownListItem = MarkdownListItem_default;
+exports.MarkdownOrderedList = MarkdownOrderedList;
+exports.MarkdownParagraph = MarkdownParagraph_default;
 exports.MarkdownPreviewPane = MarkdownPreviewPane_default;
 exports.MarkdownProvider = MarkdownProvider_default;
 exports.MarkdownRenderer = MarkdownRenderer_default;
 exports.MarkdownSourceEditor = MarkdownSourceEditor_default;
 exports.MarkdownSplitEditor = MarkdownSplitEditor_default;
+exports.MarkdownStrikethrough = MarkdownStrikethrough_default;
+exports.MarkdownStrong = MarkdownStrong_default;
+exports.MarkdownSummary = MarkdownSummary;
 exports.MarkdownTOC = MarkdownTOC_default;
 exports.MarkdownTOCItem = MarkdownTOCItem_default;
 exports.MarkdownTable = MarkdownTable_default;
+exports.MarkdownTableBody = MarkdownTableBody;
 exports.MarkdownTableCell = MarkdownTableCell;
+exports.MarkdownTableHead = MarkdownTableHead;
 exports.MarkdownTableHeaderCell = MarkdownTableHeaderCell;
+exports.MarkdownTableRow = MarkdownTableRow;
+exports.MarkdownTaskCheckbox = MarkdownTaskCheckbox_default;
+exports.MarkdownThematicBreak = MarkdownThematicBreak_default;
 exports.MarkdownToolbar = MarkdownToolbar_default;
+exports.MarkdownUnorderedList = MarkdownUnorderedList;
 exports.MarkdownViewer = MarkdownViewer_default;
 exports.Menu = Menu;
 exports.MenuGroup = MenuGroup;
@@ -58012,6 +58944,13 @@ exports.TNDropdownItem = TNDropdownItem;
 exports.TNDropdownTitle = TNDropdownTitle;
 exports.TNGroup = TNGroup;
 exports.Table = Table_default;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableElement = TableElement;
+exports.TableFrame = TableFrame;
+exports.TableHead = TableHead;
+exports.TableHeaderCell = TableHeaderCell;
+exports.TableRow = TableRow;
 exports.Tag = Tag_default;
 exports.Tags = Tags_default;
 exports.TextArea = TextArea_default;