elseware-ui 2.40.4 → 3.0.1

package/dist/index.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var React25 = require('react');
+var React26 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var tailwindMerge = require('tailwind-merge');
 var index_js$1 = require('react-icons/ai/index.js');
 var formik = require('formik');
-var classNames77 = require('classnames');
 var index_js$2 = require('react-icons/fa/index.js');
+var classNames74 = require('classnames');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var cloudinaryReact = require('cloudinary-react');
 var index_js = require('react-icons/md/index.js');
@@ -26,8 +26,8 @@ require('@mdxeditor/editor/style.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React25__default = /*#__PURE__*/_interopDefault(React25);
-var classNames77__default = /*#__PURE__*/_interopDefault(classNames77);
+var React26__default = /*#__PURE__*/_interopDefault(React26);
+var classNames74__default = /*#__PURE__*/_interopDefault(classNames74);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
@@ -4728,7 +4728,7 @@ var init_python = __esm({
 });
 
 // node_modules/refractor/lang/jsx.js
-function jsx216(Prism2) {
+function jsx218(Prism2) {
   Prism2.register(javascript);
   Prism2.register(markup);
   (function(Prism3) {
@@ -4861,14 +4861,14 @@ var init_jsx = __esm({
   "node_modules/refractor/lang/jsx.js"() {
     init_javascript();
     init_markup();
-    jsx216.displayName = "jsx";
-    jsx216.aliases = [];
+    jsx218.displayName = "jsx";
+    jsx218.aliases = [];
   }
 });
 
 // node_modules/refractor/lang/tsx.js
 function tsx(Prism2) {
-  Prism2.register(jsx216);
+  Prism2.register(jsx218);
   Prism2.register(typescript);
   (function(Prism3) {
     var typescript2 = Prism3.util.clone(Prism3.languages.typescript);
@@ -5030,7 +5030,7 @@ var EUI_ANALYTICS_QUEUE_STORAGE_KEY = "eui.analytics.queue";
 var DEFAULT_ANALYTICS_CONFIG = {
   enabled: true,
   trackPageViews: true,
-  trackSession: false,
+  trackSession: true,
   flushIntervalMs: 1e4,
   maxBatchSize: 20,
   respectDoNotTrack: true,
@@ -5072,7 +5072,7 @@ var createDefaultConsent = (version) => ({
     marketing: false
   }
 });
-var AnalyticsContext = React25.createContext(
+var AnalyticsContext = React26.createContext(
   null
 );
 
@@ -5110,10 +5110,18 @@ var getCurrentPath = () => {
   if (!isBrowser()) return void 0;
   return `${window.location.pathname}${window.location.search}`;
 };
+var getCurrentFullUrl = () => {
+  if (!isBrowser()) return void 0;
+  return window.location.href;
+};
 var getCurrentReferrer = () => {
   if (!isBrowser()) return void 0;
   return document.referrer || void 0;
 };
+var getCurrentTitle = () => {
+  if (!isBrowser()) return void 0;
+  return document.title || void 0;
+};
 var getConsentStatusFromCategories = (categories) => {
   const optionalCategories = Object.entries(categories).filter(
     ([key]) => key !== "necessary"
@@ -5135,12 +5143,19 @@ var createAnalyticsEvent = ({
   type: type2,
   appId,
   sessionId,
-  anonymousId: options?.anonymousId ?? anonymousId,
-  userId: options?.userId ?? userId,
-  path: options?.path ?? getCurrentPath(),
-  referrer: options?.referrer ?? getCurrentReferrer(),
-  viewport: options?.viewport ?? getViewport(),
-  device: options?.device ?? getDeviceInfo()
+  anonymousId,
+  userId,
+  path: getCurrentPath(),
+  fullUrl: getCurrentFullUrl(),
+  referrer: getCurrentReferrer(),
+  title: getCurrentTitle(),
+  timestamp: getNowISOString(),
+  viewport: getViewport(),
+  device: getDeviceInfo(),
+  ...options,
+  metadata: {
+    ...options?.metadata
+  }
 });
 
 // src/components/analytics/analytics.storage.ts
@@ -5218,11 +5233,11 @@ var AnalyticsProvider = ({
     ...DEFAULT_ANALYTICS_CONFIG,
     ...config
   };
-  const defaultConsent = React25.useMemo(
+  const defaultConsent = React26.useMemo(
     () => createDefaultConsent(consentVersion),
     [consentVersion]
   );
-  const [consent, setConsent] = React25.useState(() => {
+  const [consent, setConsent] = React26.useState(() => {
     const storedConsent = readConsentStorage(
       resolvedConfig.storageKey,
       defaultConsent
@@ -5232,17 +5247,17 @@ var AnalyticsProvider = ({
     }
     return storedConsent;
   });
-  const [anonymousId, setAnonymousId] = React25.useState(() => {
+  const [anonymousId, setAnonymousId] = React26.useState(() => {
     if (!consent.categories.analytics) return null;
     return ensureAnonymousIdStorage();
   });
-  const sessionIdRef = React25.useRef(createAnalyticsId("ses"));
-  const queueRef = React25.useRef(
+  const sessionIdRef = React26.useRef(createAnalyticsId("ses"));
+  const queueRef = React26.useRef(
     resolvedConfig.persistQueue ? readAnalyticsQueueStorage() : []
   );
-  const flushingRef = React25.useRef(false);
+  const flushingRef = React26.useRef(false);
   const hasAnalyticsConsent = consent.categories.analytics;
-  const shouldTrack = React25.useCallback(() => {
+  const shouldTrack = React26.useCallback(() => {
     if (!resolvedConfig.enabled) return false;
     if (!hasAnalyticsConsent) return false;
     if (resolvedConfig.respectDoNotTrack && getDoNotTrackEnabled()) {
@@ -5254,17 +5269,17 @@ var AnalyticsProvider = ({
     resolvedConfig.enabled,
     resolvedConfig.respectDoNotTrack
   ]);
-  const persistQueue = React25.useCallback(() => {
+  const persistQueue = React26.useCallback(() => {
     if (!resolvedConfig.persistQueue) return;
     writeAnalyticsQueueStorage(queueRef.current);
   }, [resolvedConfig.persistQueue]);
-  const clearQueue = React25.useCallback(() => {
+  const clearQueue = React26.useCallback(() => {
     queueRef.current = [];
     if (resolvedConfig.persistQueue) {
       clearAnalyticsQueueStorage();
     }
   }, [resolvedConfig.persistQueue]);
-  const flush = React25.useCallback(async () => {
+  const flush = React26.useCallback(async () => {
     if (!transport || flushingRef.current) return;
     if (!shouldTrack()) return;
     if (queueRef.current.length === 0) return;
@@ -5282,7 +5297,7 @@ var AnalyticsProvider = ({
       flushingRef.current = false;
     }
   }, [persistQueue, resolvedConfig.debug, shouldTrack, transport]);
-  const track = React25.useCallback(
+  const track = React26.useCallback(
     async (type2, options) => {
       if (!shouldTrack()) return;
       const resolvedAnonymousId = anonymousId ?? ensureAnonymousIdStorage();
@@ -5315,7 +5330,7 @@ var AnalyticsProvider = ({
       userId
     ]
   );
-  const applyConsent = React25.useCallback(
+  const applyConsent = React26.useCallback(
     (nextConsent) => {
       setConsent(nextConsent);
       writeConsentStorage(resolvedConfig.storageKey, nextConsent);
@@ -5330,7 +5345,7 @@ var AnalyticsProvider = ({
     },
     [clearQueue, onConsentChange, resolvedConfig.storageKey]
   );
-  const acceptAll = React25.useCallback(() => {
+  const acceptAll = React26.useCallback(() => {
     applyConsent({
       status: "accepted",
       version: consentVersion,
@@ -5343,7 +5358,7 @@ var AnalyticsProvider = ({
       }
     });
   }, [applyConsent, consentVersion]);
-  const rejectAll = React25.useCallback(() => {
+  const rejectAll = React26.useCallback(() => {
     applyConsent({
       status: "rejected",
       version: consentVersion,
@@ -5356,7 +5371,7 @@ var AnalyticsProvider = ({
       }
     });
   }, [applyConsent, consentVersion]);
-  const updateConsent = React25.useCallback(
+  const updateConsent = React26.useCallback(
     (categories) => {
       const nextCategories = {
         ...consent.categories,
@@ -5372,14 +5387,14 @@ var AnalyticsProvider = ({
     },
     [applyConsent, consent.categories, consentVersion]
   );
-  const resetConsent = React25.useCallback(() => {
+  const resetConsent = React26.useCallback(() => {
     setConsent(defaultConsent);
     clearConsentStorage(resolvedConfig.storageKey);
     clearAnonymousIdStorage();
     clearQueue();
     setAnonymousId(null);
   }, [clearQueue, defaultConsent, resolvedConfig.storageKey]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isBrowser()) return;
     const interval2 = window.setInterval(() => {
       flush();
@@ -5388,7 +5403,7 @@ var AnalyticsProvider = ({
       window.clearInterval(interval2);
     };
   }, [flush, resolvedConfig.flushIntervalMs]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isBrowser()) return;
     const handleVisibilityChange = () => {
       if (document.visibilityState !== "hidden") return;
@@ -5412,7 +5427,7 @@ var AnalyticsProvider = ({
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, [flush, persistQueue, shouldTrack, transport]);
-  const value = React25.useMemo(
+  const value = React26.useMemo(
     () => ({
       appId,
       consent,
@@ -5975,9 +5990,9 @@ function ConfigBootstrap({
   loadingFallback = null,
   showStack = false
 }) {
-  const [RootApp, setRootApp] = React25.useState(null);
-  const [loadError, setLoadError] = React25.useState(null);
-  React25.useEffect(() => {
+  const [RootApp, setRootApp] = React26.useState(null);
+  const [loadError, setLoadError] = React26.useState(null);
+  React26.useEffect(() => {
     if (!config.isValid) {
       return;
     }
@@ -6018,16 +6033,16 @@ function ConfigBootstrap({
   return /* @__PURE__ */ jsxRuntime.jsx(RootApp, {});
 }
 var ConfigBootstrap_default = ConfigBootstrap;
-var EUIContext = React25.createContext(null);
+var EUIContext = React26.createContext(null);
 var EUIProvider = ({
   config,
   children: children3
 }) => {
-  const [state, setState] = React25.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 = React25.useContext(EUIContext);
+  const ctx = React26.useContext(EUIContext);
   if (!ctx) {
     throw new Error("useEUIConfig must be used inside EUIProvider");
   }
@@ -6043,6 +6058,31 @@ function resolveWithGlobal(config, props, defaults) {
   };
 }
 
+// src/components/data-entry/button/base/Button.config.ts
+var buttonModeAppearance = {
+  contained: "solid",
+  "contained-tonal": "lite",
+  outlined: "ghost",
+  text: "ghost"
+};
+function useResolvedButtonConfig({
+  compact = false,
+  mode,
+  variant,
+  appearance,
+  shape,
+  size
+}) {
+  const eui = useEUIConfig();
+  const configuredSize = size ?? eui?.config?.global?.size ?? "md";
+  return {
+    shape: shape ?? eui?.config?.global?.shape ?? "square",
+    size: compact && configuredSize === "md" ? "sm" : configuredSize,
+    variant: variant ?? eui?.config?.global?.variant ?? "success",
+    appearance: appearance ?? (mode ? buttonModeAppearance[mode] : "solid")
+  };
+}
+
 // src/data/enums.ts
 var Shape = /* @__PURE__ */ ((Shape2) => {
   Shape2["circle"] = "circle";
@@ -6055,14 +6095,14 @@ var Shape = /* @__PURE__ */ ((Shape2) => {
 // src/data/styles.tsx
 var variantsSolid = {
   ["default" /* default */]: "bg-gray-300 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
-  ["primary" /* primary */]: "bg-gradient-to-r from-eui-primary-500 to-eui-primary-600 text-white hover:brightness-110",
-  ["secondary" /* secondary */]: "bg-gradient-to-r from-eui-secondary-600 to-eui-secondary-500 text-white hover:brightness-110",
-  ["success" /* success */]: "bg-gradient-to-r from-eui-success-600 to-eui-success-500 text-white hover:brightness-110",
-  ["danger" /* danger */]: "bg-gradient-to-r from-eui-danger-600 to-eui-danger-500 text-white hover:brightness-110",
-  ["warning" /* warning */]: "bg-gradient-to-r from-eui-warning-500 to-eui-warning-400 text-black hover:brightness-105",
-  ["info" /* info */]: "bg-gradient-to-r from-eui-info-600 to-eui-info-500 text-white hover:brightness-110",
-  ["light" /* light */]: "bg-gradient-to-r from-eui-light-400 to-eui-light-300 text-gray-900 hover:brightness-105 dark:from-gray-200 dark:to-gray-100 dark:text-gray-900",
-  ["dark" /* dark */]: "bg-gradient-to-r from-eui-dark-400 to-eui-dark-500 text-white hover:brightness-110 dark:from-eui-dark-300 dark:to-eui-dark-400"
+  ["primary" /* primary */]: "bg-eui-primary-500 text-white hover:bg-eui-primary-600",
+  ["secondary" /* secondary */]: "bg-eui-secondary-500 text-white hover:bg-eui-secondary-600",
+  ["success" /* success */]: "bg-eui-success-500 text-white hover:bg-eui-success-600",
+  ["danger" /* danger */]: "bg-eui-danger-500 text-white hover:bg-eui-danger-600",
+  ["warning" /* warning */]: "bg-eui-warning-500 text-black hover:bg-eui-warning-400",
+  ["info" /* info */]: "bg-eui-info-500 text-white hover:bg-eui-info-600",
+  ["light" /* light */]: "bg-eui-light-400 text-gray-900 hover:bg-eui-light-300 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-100",
+  ["dark" /* dark */]: "bg-eui-dark-500 text-white hover:bg-eui-dark-400 dark:bg-eui-dark-400 dark:hover:bg-eui-dark-300"
 };
 var variantsLite = {
   ["default" /* default */]: "bg-gray-500/10 border border-gray-300 text-gray-700 dark:bg-gray-400/10 dark:border-gray-700 dark:text-gray-200",
@@ -6148,17 +6188,6 @@ var cardBgVariants = {
   ["light" /* light */]: "bg-eui-light-500/10",
   ["dark" /* dark */]: "bg-eui-dark-500/20"
 };
-var checkboxVariants = {
-  ["default" /* default */]: "checked:bg-gray-600 checked:border-gray-600 dark:checked:bg-gray-500 dark:checked:border-gray-500",
-  ["primary" /* primary */]: "checked:bg-eui-primary-600 checked:border-eui-primary-600 dark:checked:bg-eui-primary-500 dark:checked:border-eui-primary-500",
-  ["secondary" /* secondary */]: "checked:bg-eui-secondary-600 checked:border-eui-secondary-600 dark:checked:bg-eui-secondary-500 dark:checked:border-eui-secondary-500",
-  ["success" /* success */]: "checked:bg-eui-success-600 checked:border-eui-success-600 dark:checked:bg-eui-success-500 dark:checked:border-eui-success-500",
-  ["danger" /* danger */]: "checked:bg-eui-danger-600 checked:border-eui-danger-600 dark:checked:bg-eui-danger-500 dark:checked:border-eui-danger-500",
-  ["warning" /* warning */]: "checked:bg-eui-warning-500 checked:border-eui-warning-500 dark:checked:bg-eui-warning-400 dark:checked:border-eui-warning-400",
-  ["info" /* info */]: "checked:bg-eui-info-600 checked:border-eui-info-600 dark:checked:bg-eui-info-500 dark:checked:border-eui-info-500",
-  ["light" /* light */]: "checked:bg-eui-light-400 checked:border-eui-light-400 dark:checked:bg-gray-200 dark:checked:border-gray-200",
-  ["dark" /* dark */]: "checked:bg-eui-dark-500 checked:border-eui-dark-500 dark:checked:bg-eui-dark-300 dark:checked:border-eui-dark-300"
-};
 var toastPositionStyles = {
   ["top-left" /* topLeft */]: "top-4 left-4 items-start",
   ["top-center" /* topCenter */]: "top-4 left-1/2 -translate-x-1/2 items-center",
@@ -6218,7 +6247,31 @@ var toastShapeStyles = {
   ["softRoundedSquare" /* softRoundedSquare */]: "!rounded-3xl",
   ["square" /* square */]: "!rounded-none"
 };
-var sizes = {
+
+// src/components/data-entry/button/base/Button.styles.ts
+var buttonShapes = shapes;
+var buttonIconSizes = {
+  xs: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 22
+};
+function resolveButtonVariantStyles({
+  appearance,
+  variant
+}) {
+  return resolveAppearanceStyles({
+    appearance,
+    variant,
+    solid: variantsSolid,
+    lite: variantsLite,
+    ghost: variantsGhost
+  });
+}
+
+// src/components/data-entry/button/web/Button.web.styles.ts
+var webButtonSizes = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
@@ -6233,27 +6286,56 @@ function Button({
   loading = false,
   disabled = false,
   block = false,
-  variant = "success",
-  appearance = "solid",
+  compact = false,
+  glow = true,
+  mode,
+  contentClassName,
+  labelClassName,
+  variant,
+  appearance,
   shape,
-  size = "md",
+  size,
+  accessibilityLabel,
+  accessibilityRole,
+  accessibilityState,
+  testID,
   className,
   onMouseMove,
+  onClick,
+  onPress,
   ...rest
 }) {
-  const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const btnRef = React25.useRef(null);
-  const variantStyles = resolveAppearanceStyles({
-    appearance,
+  const accessibility = accessibilityState;
+  const {
+    shape: resolvedShape,
+    size: resolvedSize,
+    variant: resolvedVariant,
+    appearance: resolvedAppearance
+  } = useResolvedButtonConfig({
+    compact,
+    mode,
     variant,
-    solid: variantsSolid,
-    lite: variantsLite,
-    ghost: variantsGhost
+    appearance,
+    shape,
+    size
+  });
+  const btnRef = React26.useRef(null);
+  const variantStyles = resolveButtonVariantStyles({
+    appearance: resolvedAppearance,
+    variant: resolvedVariant
   });
+  const iconSize = buttonIconSizes[resolvedSize];
+  const labelContent = text10 || children3;
+  const resolvedIcon = typeof icon === "function" ? icon({
+    color: "currentColor",
+    size: iconSize
+  }) : icon;
   const handleMouseMove = (e) => {
     const btn = btnRef.current;
-    if (!btn) return;
+    if (!btn || !glow) {
+      onMouseMove?.(e);
+      return;
+    }
     const rect = btn.getBoundingClientRect();
     const x3 = e.clientX - rect.left;
     const y3 = e.clientY - rect.top;
@@ -6261,6 +6343,12 @@ function Button({
     btn.style.setProperty("--glow-y", `${y3}px`);
     onMouseMove?.(e);
   };
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (!e.defaultPrevented) {
+      onPress?.();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -6268,47 +6356,114 @@ function Button({
       ref: btnRef,
       type: type2,
       disabled: disabled || loading,
+      onClick: handleClick,
       onMouseMove: handleMouseMove,
+      "aria-disabled": disabled || loading,
+      "aria-label": accessibilityLabel,
+      "aria-pressed": accessibility?.selected === void 0 ? void 0 : Boolean(accessibility.selected),
+      "data-testid": testID,
+      role: accessibilityRole,
       className: cn(
         "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300",
         variantStyles,
-        shapes[resolvedShape],
-        sizes[size],
+        buttonShapes[resolvedShape],
+        webButtonSizes[resolvedSize],
         block && "w-full",
+        mode === "text" && "border-transparent bg-transparent",
         (loading || disabled) && "brightness-75 grayscale cursor-not-allowed",
         !loading && !disabled && "hover:cursor-pointer",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        glow && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: "pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
             style: {
               background: `
-            radial-gradient(
-              200px circle at var(--glow-x) var(--glow-y),
-              rgba(255,255,255,0.18),
-              transparent 50%
-            )
-          `
+              radial-gradient(
+                200px circle at var(--glow-x) var(--glow-y),
+                rgba(255,255,255,0.18),
+                transparent 50%
+              )
+            `
             }
           }
         ),
         loading && /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin z-10" }),
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "z-10", children: icon }),
-        text10 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "z-10", children: text10 }),
-        children3 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "z-10", children: children3 })
+        resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "z-10 inline-flex shrink-0 items-center justify-center leading-none",
+              contentClassName
+            ),
+            style: {
+              height: iconSize,
+              lineHeight: 0,
+              width: iconSize
+            },
+            children: resolvedIcon
+          }
+        ),
+        labelContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "z-10 inline-flex items-center justify-center leading-none",
+              labelClassName
+            ),
+            style: {
+              minHeight: iconSize
+            },
+            children: labelContent
+          }
+        )
       ]
     }
   );
 }
-var Button_default = Button;
+var Button_web_default = Button;
+
+// src/components/data-entry/input/input-label/base/InputLabel.styles.ts
+var inputLabelStaticClassName = "pointer-events-none select-none px-0 text-[13.5px] leading-none text-[#6B7280]";
+var inputLabelBaseClassName = "pointer-events-none absolute left-3 z-10 select-none bg-white/95 px-1 font-medium leading-none dark:bg-eui-dark-800";
+var inputLabelTransitionClassName = "transition-all duration-200 ease-out";
+var inputLabelRestingClassName = "top-[18px] translate-y-0 text-base leading-none text-[#6B7280]";
+var inputLabelFloatingClassName = "top-1.5 translate-y-0 text-xs leading-none text-[#6B7280]";
+var inputLabelErrorClassName = "text-[#6B7280]";
+var inputLabelDisabledClassName = "opacity-60";
+function InputLabel({
+  text: text10,
+  children: children3,
+  className,
+  floating,
+  errored = false,
+  disabled = false,
+  htmlFor
+}) {
+  const isFloatingLabel = typeof floating === "boolean";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "label",
+    {
+      htmlFor,
+      className: cn(
+        isFloatingLabel ? inputLabelBaseClassName : inputLabelStaticClassName,
+        isFloatingLabel && inputLabelTransitionClassName,
+        isFloatingLabel && (floating === true ? inputLabelFloatingClassName : inputLabelRestingClassName),
+        errored && inputLabelErrorClassName,
+        disabled && inputLabelDisabledClassName,
+        className
+      ),
+      children: text10 || children3
+    }
+  );
+}
 var Backdrop = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__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
       }),
@@ -6588,17 +6743,17 @@ function useToastTimer({
   pauseOnHover,
   onTimeout
 }) {
-  const [isPaused, setIsPaused] = React25.useState(false);
-  const timeoutRef = React25.useRef(null);
-  const startedAtRef = React25.useRef(0);
-  const remainingRef = React25.useRef(typeof duration === "number" ? duration : 0);
-  const clearTimer = React25.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 = React25.useCallback(() => {
+  const startTimer = React26.useCallback(() => {
     if (typeof duration !== "number" || duration <= 0) {
       return;
     }
@@ -6608,12 +6763,12 @@ function useToastTimer({
       onTimeout();
     }, remainingRef.current);
   }, [clearTimer, duration, onTimeout]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     remainingRef.current = typeof duration === "number" ? duration : 0;
     startTimer();
     return clearTimer;
   }, [clearTimer, duration, startTimer]);
-  const pauseTimer = React25.useCallback(() => {
+  const pauseTimer = React26.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
@@ -6624,14 +6779,14 @@ function useToastTimer({
     );
     setIsPaused(true);
   }, [clearTimer, duration, pauseOnHover]);
-  const resumeTimer = React25.useCallback(() => {
+  const resumeTimer = React26.useCallback(() => {
     if (!pauseOnHover || typeof duration !== "number") {
       return;
     }
     setIsPaused(false);
     startTimer();
   }, [duration, pauseOnHover, startTimer]);
-  const progressStyle = React25.useMemo(() => {
+  const progressStyle = React26.useMemo(() => {
     if (typeof duration !== "number") {
       return void 0;
     }
@@ -6672,7 +6827,7 @@ function ToastItem({
   const duration = item.duration ?? autoClose;
   const variant = toastStatusVariantMap[item.status];
   const statusStyles = toastVariantStyles[variant];
-  const dismiss = React25.useCallback(() => {
+  const dismiss = React26.useCallback(() => {
     toastStore.remove(item.id);
   }, [item.id]);
   const { pauseTimer, resumeTimer, progressStyle } = useToastTimer({
@@ -6751,16 +6906,16 @@ var Toast = ({
   ...rest
 }) => {
   const eui = useEUIConfig();
-  const [items, setItems] = React25.useState(() => {
+  const [items, setItems] = React26.useState(() => {
     return toastStore.getSnapshot();
   });
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     return toastStore.subscribe(setItems);
   }, []);
-  const safeShape = React25.useMemo(() => {
+  const safeShape = React26.useMemo(() => {
     return normalizeToastShape(shape ?? eui?.config?.global?.shape);
   }, [shape, eui?.config?.global?.shape]);
-  const visibleItems = React25.useMemo(() => {
+  const visibleItems = React26.useMemo(() => {
     const orderedItems = newestOnTop ? [...items].reverse() : [...items];
     return orderedItems.slice(0, maxToasts);
   }, [items, maxToasts, newestOnTop]);
@@ -6840,12 +6995,12 @@ function sendToast(data = {}) {
   });
 }
 function useTransitionVisibility(visibility, leaveDuration = 150) {
-  const [mounted, setMounted] = React25.useState(Boolean(visibility));
-  const [active, setActive] = React25.useState(Boolean(visibility));
-  const isInitialRenderRef = React25.useRef(true);
-  const frameOneRef = React25.useRef(null);
-  const frameTwoRef = React25.useRef(null);
-  const timeoutRef = React25.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);
@@ -6860,7 +7015,7 @@ function useTransitionVisibility(visibility, leaveDuration = 150) {
       timeoutRef.current = null;
     }
   };
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     clearTimers();
     if (isInitialRenderRef.current) {
       isInitialRenderRef.current = false;
@@ -6888,17 +7043,17 @@ function useTransitionVisibility(visibility, leaveDuration = 150) {
   };
 }
 function renderTransitionChild(children3, className) {
-  const childCount = React25.Children.count(children3);
+  const childCount = React26.Children.count(children3);
   if (childCount !== 1) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: children3 });
   }
-  const child = React25.Children.only(children3);
-  if (!React25__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 element7 = child;
-  return React25__default.default.cloneElement(element7, {
-    className: classNames77__default.default(element7.props.className, className)
+  return React26__default.default.cloneElement(element7, {
+    className: classNames74__default.default(element7.props.className, className)
   });
 }
 function TransitionBase({
@@ -6918,7 +7073,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames77__default.default(
+  const transitionClassName = classNames74__default.default(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -7076,117 +7231,191 @@ var Transition = {
   TransitionSlide: TransitionSlide_default,
   TransitionAccordion: TransitionAccordion_default
 };
+
+// src/components/data-entry/input/input-response/base/InputResponse.styles.ts
+var inputResponseBaseClassName = "px-2 pt-1.5 text-sm font-medium";
+var inputResponseVariants = textVariants;
 function InputResponse({
   name: name2,
   visibility = false,
   variant = "default",
-  styles
+  className,
+  message
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionFadeIn, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
-        "font-medium text-sm py-1 px-2": true,
-        [`${textVariants[variant]}`]: variant,
-        "transition-all ease-in-out": true,
-        [`${styles}`]: styles
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: name2 })
+      className: cn(
+        inputResponseBaseClassName,
+        inputResponseVariants[variant],
+        className
+      ),
+      children: message ?? /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: name2 })
     }
   ) });
 }
-var InputResponse_default = InputResponse;
-function InputLabel({ text: text10, children: children3, styles }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "label",
-    {
-      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
-      }),
-      children: text10 || children3
-    }
-  );
+function resolveInputType({
+  passwordVisible,
+  type: type2
+}) {
+  return type2 === "password" && passwordVisible ? "text" : type2;
 }
-var InputLabel_default = InputLabel;
-var toggleType = (visibility) => {
-  return visibility ? "text" : "password";
-};
-var PasswordVisibilityToggler = ({
-  onClick
-}) => {
-  const [passwordVisibility, setPasswordVisibilty] = React25.useState(false);
-  const handleOnClick = (visibility) => {
-    onClick(visibility);
-    setPasswordVisibilty(visibility);
+function useResolvedInputConfig({
+  label,
+  placeholder,
+  shape,
+  type: type2 = "text"
+}) {
+  const eui = useEUIConfig();
+  return {
+    shape: shape ?? eui?.config?.global?.shape ?? "square",
+    type: type2,
+    label: label ?? placeholder
   };
+}
+function useInputFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    meta,
+    helpers
+  };
+}
+
+// src/components/data-entry/input/input/base/Input.styles.ts
+var inputShapes = shapes;
+var inputRootClassName = "relative w-full";
+var inputFrameClassName = "relative h-14 w-full overflow-hidden border bg-white/95 px-3 dark:bg-eui-dark-800";
+var inputFrameIdleClassName = "border-gray-300 hover:border-gray-400 dark:border-eui-dark-300 dark:hover:border-eui-dark-200";
+var inputFrameActiveClassName = "border-eui-secondary-600";
+var inputFrameErrorClassName = "border-eui-danger-500";
+var inputFrameDisabledClassName = "cursor-not-allowed opacity-60";
+var inputControlClassName = "w-full bg-transparent pt-5 pb-2 text-base font-medium text-gray-950 dark:text-gray-50";
+
+// src/components/data-entry/input/input/web/Input.web.styles.ts
+var webInputControlClassName = "placeholder-transparent outline-none transition-all duration-200 ease-out";
+var webPasswordToggleClassName = "absolute right-3 top-[18px] cursor-pointer text-xl text-eui-dark-200 transition-colors duration-180 hover:text-eui-secondary-700";
+function PasswordVisibilityToggler({
+  passwordVisible,
+  onToggle
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "text-eui-dark-200 absolute text-2xl right-3 top-[16px] cursor-pointer",
-      onClick: () => handleOnClick(!passwordVisibility),
-      children: passwordVisibility ? /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaEyeSlash, {}) : /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaEye, {})
+      className: webPasswordToggleClassName,
+      onClick: () => onToggle(!passwordVisible),
+      children: passwordVisible ? /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaEyeSlash, {}) : /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaEye, {})
     }
   );
-};
-var Input = ({
-  type: type2 = "text",
-  placeholder,
-  styles,
-  step,
-  shape,
-  ...props
-}) => {
-  const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [field, meta] = formik.useField(props);
-  const [passwordVisibility, setPasswordVisibilty] = React25.useState(false);
-  const inputType = type2 === "password" ? toggleType(passwordVisibility) : type2;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+}
+function Input(inputProps) {
+  const {
+    type: type2 = "text",
+    id: id2,
+    label,
+    placeholder,
+    inputClassName,
+    labelClassName,
+    responseClassName,
+    step,
+    shape,
+    disabled = false,
+    className,
+    onBlur,
+    onFocus,
+    ...props
+  } = inputProps;
+  const { field, meta } = useInputFieldState(inputProps);
+  const [focused, setFocused] = React26.useState(false);
+  const [passwordVisible, setPasswordVisible] = React26.useState(false);
+  const {
+    shape: resolvedShape,
+    type: resolvedType,
+    label: resolvedLabel
+  } = useResolvedInputConfig({
+    label,
+    placeholder,
+    shape,
+    type: type2
+  });
+  const inputType = resolveInputType({
+    passwordVisible,
+    type: resolvedType
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const hasValue = String(field.value ?? "").length > 0;
+  const floating = focused || hasValue;
+  const inputId = id2 ?? field.name;
+  const handleBlur = (event) => {
+    setFocused(false);
+    field.onBlur(event);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputRootClassName, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       formik.Field,
       {
-        type: inputType,
-        step: inputType === "number" && step ? step : void 0,
-        ...field,
         ...props,
-        placeholder,
-        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,
-          [`${shapes[resolvedShape]}`]: true,
-          // "transition-all ease-in-out": true,
-          [`${styles}`]: styles
-        })
+        ...field,
+        disabled,
+        id: inputId,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        placeholder: "",
+        step: inputType === "number" && step ? step : void 0,
+        type: inputType,
+        className: cn(
+          inputFrameClassName,
+          inputControlClassName,
+          webInputControlClassName,
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          inputClassName
+        )
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel_default,
+      InputLabel,
       {
-        text: placeholder,
-        styles: "absolute left-2 top-[0.7px] eui-text-sm text-[13.5px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none"
+        disabled,
+        errored: hasError,
+        floating,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
       }
     ),
-    type2 === "password" && /* @__PURE__ */ jsxRuntime.jsx(PasswordVisibilityToggler, { onClick: (v) => setPasswordVisibilty(v) }),
+    type2 === "password" ? /* @__PURE__ */ jsxRuntime.jsx(
+      PasswordVisibilityToggler,
+      {
+        passwordVisible,
+        onToggle: setPasswordVisible
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
-};
+}
 var InputFile = ({
   placeholder,
   accept = "",
-  styles,
+  className,
   ...props
 }) => {
-  const fileInputRef = React25.useRef(null);
+  const fileInputRef = React26.useRef(null);
   const [field, meta, helpers] = formik.useField(props);
   const handleFileChange = (e) => {
     const file = e.target.files?.[0] || null;
@@ -7197,13 +7426,13 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames74__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),
             "border-eui-danger-500": meta.touched && meta.error
           },
-          styles
+          className
         ),
         onClick: () => fileInputRef.current?.click(),
         children: field.value?.name || ""
@@ -7220,10 +7449,10 @@ var InputFile = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel_default,
+      InputLabel,
       {
         text: placeholder,
-        styles: classNames77__default.default({
+        className: classNames74__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
@@ -7231,7 +7460,7 @@ var InputFile = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -7272,11 +7501,11 @@ var InputList = ({ name: name2, placeholder, shape }) => {
   const fieldErrors = errors[name2];
   const hasListError = Boolean(errors[name2]) && Boolean(touched[name2]) && typeof errors[name2] === "string";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { text: placeholder }),
     /* @__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: classNames77__default.default(
+        className: classNames74__default.default(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -7305,7 +7534,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames77__default.default(
+                          className: classNames74__default.default(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -7316,7 +7545,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames77__default.default(
+                                className: classNames74__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"
@@ -7356,12 +7585,12 @@ var InputList = ({ name: name2, placeholder, shape }) => {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            InputResponse_default,
+            InputResponse,
             {
               name: name2,
               visibility: hasListError,
               variant: "danger",
-              styles: "pb-2"
+              className: "pb-2"
             }
           )
         ]
@@ -7404,7 +7633,7 @@ var InputListGroup = ({
   const groups = values[name2] ?? [];
   const hasError = Boolean(errors[name2]) && Boolean(touched[name2]) && typeof errors[name2] === "string";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { text: placeholder }),
     /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name: name2, children: ({ push: push2, remove: remove2 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       groups.map((group, groupIndex) => {
         const itemsFieldName = `${name2}[${groupIndex}].items`;
@@ -7412,7 +7641,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -7424,7 +7653,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames77__default.default(
+                    className: classNames74__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"
@@ -7455,7 +7684,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames77__default.default(
+                      className: classNames74__default.default(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -7475,7 +7704,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames77__default.default(
+                                  className: classNames74__default.default(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -7486,7 +7715,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames77__default.default(
+                                        className: classNames74__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"
@@ -7545,12 +7774,12 @@ var InputListGroup = ({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        InputResponse_default,
+        InputResponse,
         {
           name: name2,
           visibility: hasError,
           variant: "danger",
-          styles: "pb-2"
+          className: "pb-2"
         }
       )
     ] }) })
@@ -7559,13 +7788,20 @@ var InputListGroup = ({
 function isMultiCheckbox(props) {
   return Array.isArray(props.options);
 }
-function Checkbox({
+function useResolvedCheckboxConfig({
+  label,
   placeholder,
-  variant = "primary",
-  shape = "roundedSquare",
-  className,
-  ...props
+  variant,
+  shape
 }) {
+  const eui = useEUIConfig();
+  return {
+    shape: shape ?? eui?.config?.global?.shape ?? "roundedSquare",
+    variant: variant ?? "secondary",
+    label: label ?? placeholder
+  };
+}
+function useCheckboxFieldState(props) {
   const isMulti = isMultiCheckbox(props);
   const [multiField, multiMeta, multiHelpers] = formik.useField(
     props
@@ -7573,89 +7809,234 @@ function Checkbox({
   const [singleField, singleMeta, singleHelpers] = formik.useField(
     props
   );
-  const field = isMulti ? multiField : singleField;
-  const meta = isMulti ? multiMeta : singleMeta;
-  const checkboxClass = cn(
-    // Base
-    "appearance-none cursor-pointer transition-all duration-300",
-    "w-5 h-5 min-w-[1.25rem] min-h-[1.25rem]",
-    "flex-shrink-0 relative",
-    // Unchecked state
-    "bg-white border-2 border-gray-300",
-    "hover:border-gray-400",
-    // Dark mode
-    "dark:bg-neutral-900",
-    "dark:border-neutral-600",
-    "dark:hover:border-neutral-500",
-    // Focus state
-    "focus:outline-none focus:ring-2",
-    "focus:ring-eui-primary-500/30",
-    // Checked variant styles
-    checkboxVariants[variant],
-    // Check icon
-    "checked:before:content-['\u2713']",
-    "checked:before:absolute checked:before:inset-0",
-    "checked:before:flex checked:before:items-center checked:before:justify-center",
-    "checked:before:text-white checked:before:font-bold checked:before:text-sm",
-    // Disabled state
-    "disabled:opacity-50 disabled:cursor-not-allowed",
-    // Shape
-    shapes[shape],
-    className
+  return {
+    isMulti,
+    multiField,
+    multiMeta,
+    multiHelpers,
+    singleField,
+    singleMeta,
+    singleHelpers
+  };
+}
+
+// src/components/data-entry/checkbox/base/Checkbox.styles.ts
+var checkboxShapes = shapes;
+var checkboxGroupClassName = "flex flex-col gap-2";
+var checkboxOptionRowClassName = "flex flex-row items-start gap-3";
+var checkboxLabelClassName = "cursor-pointer select-none text-sm leading-relaxed text-gray-800 dark:text-gray-200";
+var checkboxIndicatorBaseClassName = "relative h-5 w-5 min-h-[1.25rem] min-w-[1.25rem] shrink-0 appearance-none border-2 border-gray-300 bg-white transition-all duration-300 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-eui-primary-500/30 dark:border-neutral-600 dark:bg-neutral-900 dark:hover:border-neutral-500";
+var checkboxIndicatorDisabledClassName = "cursor-not-allowed opacity-50";
+
+// src/components/data-entry/checkbox/web/Checkbox.web.styles.ts
+var webCheckboxVariants = {
+  default: {
+    checkedClassName: "checked:bg-eui-secondary-600 checked:border-eui-secondary-600 dark:checked:bg-eui-secondary-500 dark:checked:border-eui-secondary-500",
+    iconClassName: "text-white"
+  },
+  primary: {
+    checkedClassName: "checked:bg-eui-primary-600 checked:border-eui-primary-600 dark:checked:bg-eui-primary-500 dark:checked:border-eui-primary-500",
+    iconClassName: "text-white"
+  },
+  secondary: {
+    checkedClassName: "checked:bg-eui-secondary-600 checked:border-eui-secondary-600 dark:checked:bg-eui-secondary-500 dark:checked:border-eui-secondary-500",
+    iconClassName: "text-white"
+  },
+  success: {
+    checkedClassName: "checked:bg-eui-success-600 checked:border-eui-success-600 dark:checked:bg-eui-success-500 dark:checked:border-eui-success-500",
+    iconClassName: "text-white"
+  },
+  danger: {
+    checkedClassName: "checked:bg-eui-danger-600 checked:border-eui-danger-600 dark:checked:bg-eui-danger-500 dark:checked:border-eui-danger-500",
+    iconClassName: "text-white"
+  },
+  warning: {
+    checkedClassName: "checked:bg-eui-warning-500 checked:border-eui-warning-500 dark:checked:bg-eui-warning-400 dark:checked:border-eui-warning-400",
+    iconClassName: "text-black"
+  },
+  info: {
+    checkedClassName: "checked:bg-eui-info-600 checked:border-eui-info-600 dark:checked:bg-eui-info-500 dark:checked:border-eui-info-500",
+    iconClassName: "text-white"
+  },
+  light: {
+    checkedClassName: "checked:bg-eui-light-400 checked:border-eui-light-400 dark:checked:bg-gray-200 dark:checked:border-gray-200",
+    iconClassName: "text-gray-900"
+  },
+  dark: {
+    checkedClassName: "checked:bg-eui-dark-500 checked:border-eui-dark-500 dark:checked:bg-eui-dark-300 dark:checked:border-eui-dark-300",
+    iconClassName: "text-white"
+  }
+};
+function resolveWebCheckboxVariantStyles(variant) {
+  return webCheckboxVariants[variant];
+}
+function getIndicatorClassName({
+  checked,
+  className,
+  disabled,
+  indicatorClassName,
+  checkedIndicatorClassName,
+  resolvedShape,
+  variantCheckedClassName
+}) {
+  return cn(
+    checkboxIndicatorBaseClassName,
+    checkboxShapes[resolvedShape],
+    indicatorClassName,
+    className,
+    variantCheckedClassName,
+    checked && checkedIndicatorClassName,
+    disabled && checkboxIndicatorDisabledClassName
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    !isMulti && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-3 items-start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: singleField.name,
-          type: "checkbox",
-          checked: Boolean(singleField.value),
-          onChange: (e) => singleHelpers.setValue(e.target.checked),
-          className: checkboxClass
-        }
+}
+function Tick({
+  checked,
+  checkedIconClassName,
+  iconClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none absolute inset-0 inline-flex items-center justify-center text-sm font-bold leading-none transition-opacity duration-200",
+        iconClassName,
+        checkedIconClassName,
+        checked ? "opacity-100" : "opacity-0"
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      children: "\u2713"
+    }
+  );
+}
+function Checkbox(checkboxProps) {
+  const {
+    label,
+    placeholder,
+    variant,
+    shape,
+    disabled = false,
+    className,
+    groupClassName,
+    optionClassName,
+    indicatorClassName,
+    checkedIndicatorClassName,
+    checkedIconClassName,
+    labelClassName
+  } = checkboxProps;
+  const { shape: resolvedShape, variant: resolvedVariant, label: resolvedLabel } = useResolvedCheckboxConfig({
+    label,
+    placeholder,
+    variant,
+    shape
+  });
+  const {
+    isMulti,
+    multiField,
+    multiMeta,
+    multiHelpers,
+    singleField,
+    singleMeta,
+    singleHelpers
+  } = useCheckboxFieldState(checkboxProps);
+  const variantStyles = resolveWebCheckboxVariantStyles(resolvedVariant);
+  const activeFieldName = isMulti ? multiField.name : singleField.name;
+  const activeMeta = isMulti ? multiMeta : singleMeta;
+  const multiProps = isMultiCheckbox(checkboxProps) ? checkboxProps : null;
+  const singleChecked = singleField.value;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(checkboxGroupClassName, groupClassName), children: [
+    !isMulti && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(checkboxOptionRowClassName, optionClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: singleField.name,
+            name: singleField.name,
+            type: "checkbox",
+            checked: singleChecked,
+            disabled,
+            onBlur: singleField.onBlur,
+            onChange: (event) => singleHelpers.setValue(event.target.checked),
+            className: getIndicatorClassName({
+              checked: singleChecked,
+              className,
+              disabled,
+              indicatorClassName,
+              checkedIndicatorClassName,
+              resolvedShape,
+              variantCheckedClassName: variantStyles.checkedClassName
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Tick,
+          {
+            checked: singleChecked,
+            checkedIconClassName,
+            iconClassName: variantStyles.iconClassName
+          }
+        )
+      ] }),
+      resolvedLabel ? /* @__PURE__ */ jsxRuntime.jsx(
         "label",
         {
           htmlFor: singleField.name,
-          className: cn(
-            "text-sm leading-relaxed cursor-pointer select-none",
-            "text-gray-800 dark:text-gray-200"
-          ),
-          children: placeholder
+          className: cn(checkboxLabelClassName, labelClassName),
+          children: resolvedLabel
         }
-      )
+      ) : null
     ] }),
-    isMulti && props.options.map((option) => {
+    isMulti && multiProps?.options.map((option) => {
       const values = multiField.value ?? [];
       const checked = values.includes(option.value);
+      const optionDisabled = disabled || option.disabled === true;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex flex-row gap-3 items-start my-2",
+          className: cn(checkboxOptionRowClassName, optionClassName),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                id: option.value,
-                type: "checkbox",
-                checked,
-                onChange: () => {
-                  multiHelpers.setValue(
-                    checked ? values.filter((v) => v !== option.value) : [...values, option.value]
-                  );
-                },
-                className: checkboxClass
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  id: option.value,
+                  name: multiField.name,
+                  type: "checkbox",
+                  checked,
+                  disabled: optionDisabled,
+                  onBlur: multiField.onBlur,
+                  onChange: () => {
+                    multiHelpers.setValue(
+                      checked ? values.filter((value) => value !== option.value) : [...values, option.value]
+                    );
+                  },
+                  className: getIndicatorClassName({
+                    checked,
+                    className,
+                    disabled: optionDisabled,
+                    indicatorClassName,
+                    checkedIndicatorClassName,
+                    resolvedShape,
+                    variantCheckedClassName: variantStyles.checkedClassName
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Tick,
+                {
+                  checked,
+                  checkedIconClassName,
+                  iconClassName: variantStyles.iconClassName
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "label",
               {
                 htmlFor: option.value,
                 className: cn(
-                  "text-sm leading-relaxed cursor-pointer select-none",
-                  "text-gray-800 dark:text-gray-200"
+                  checkboxLabelClassName,
+                  optionDisabled && "cursor-not-allowed opacity-60",
+                  labelClassName
                 ),
                 children: option.label
               }
@@ -7666,16 +8047,15 @@ function Checkbox({
       );
     }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
-        name: field.name,
-        visibility: Boolean(meta.touched && meta.error),
+        name: activeFieldName,
+        visibility: Boolean(activeMeta.touched && activeMeta.error),
         variant: "danger"
       }
     )
   ] });
 }
-var Checkbox_default = Checkbox;
 var DateSelector = ({
   placeholder,
   styles,
@@ -7687,10 +8067,10 @@ var DateSelector = ({
   const [field, meta] = formik.useField(props);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel_default,
+      InputLabel,
       {
         text: placeholder,
-        styles: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
+        className: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7700,7 +8080,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames77__default.default({
+        className: classNames74__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,
@@ -7709,13 +8089,13 @@ var DateSelector = ({
         })
       }
     ),
-    meta.touched && meta.error && /* @__PURE__ */ jsxRuntime.jsx(InputResponse_default, { name: field.name, visibility: true, variant: "danger" })
+    meta.touched && meta.error && /* @__PURE__ */ jsxRuntime.jsx(InputResponse, { name: field.name, visibility: true, variant: "danger" })
   ] });
 };
 var DateSelector_default = DateSelector;
 var FormObserver = ({ formik, onChange }) => {
-  const prevValuesRef = React25.useRef(formik.values);
-  React25.useEffect(() => {
+  const prevValuesRef = React26.useRef(formik.values);
+  React26.useEffect(() => {
     if (!onChange) return;
     const currentValues = formik.values;
     const prevValues = prevValuesRef.current;
@@ -7734,7 +8114,7 @@ var FormObserver = ({ formik, onChange }) => {
 };
 var FormObserver_default = FormObserver;
 var DirtyObserver = ({ formik, onDirtyChange }) => {
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (onDirtyChange) {
       onDirtyChange(formik.dirty);
     }
@@ -7743,7 +8123,7 @@ var DirtyObserver = ({ formik, onDirtyChange }) => {
 };
 var DirtyObserver_default = DirtyObserver;
 var UnsavedChangesGuard = ({ formik, enabled }) => {
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!enabled) return;
     const handleBeforeUnload = (e) => {
       if (!formik.dirty) return;
@@ -7782,12 +8162,12 @@ 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: classNames77__default.default(styles), children: children3 })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames74__default.default(styles), children: children3 })
       ] })
     }
   );
 };
-var sizes2 = {
+var sizes = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-2 text-sm",
   md: "px-4 py-2 text-base",
@@ -7804,11 +8184,11 @@ function FormResponse({
   return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: text10 ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
-        [`${sizes2[size]}`]: size,
+        [`${sizes[size]}`]: size,
         [`${styles}`]: styles
       }),
       children: text10
@@ -7829,7 +8209,7 @@ function ImageView({ imageUrl, secure = true, alt = "image" }) {
   ) }) });
 }
 var ImageView_default = ImageView;
-var ImageInput = React25.forwardRef(
+var ImageInput = React26.forwardRef(
   ({
     title = "Upload Image",
     uploadDir = "eg-frontend-admin-temp",
@@ -7841,10 +8221,10 @@ var ImageInput = React25.forwardRef(
     const [field, meta, helpers] = formik.useField(props);
     const { value: imageUrl } = field;
     const { setValue } = helpers;
-    const [image3, setImage] = React25.useState(null);
-    const [url, setUrl] = React25.useState(imageUrl);
-    const [loading, setLoading] = React25.useState(false);
-    const [preview, setPreview] = React25.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);
@@ -7890,10 +8270,10 @@ var ImageInput = React25.forwardRef(
       if (!disableSetValue) setValue("");
       setLoading(false);
     };
-    React25.useImperativeHandle(ref, () => ({
+    React26.useImperativeHandle(ref, () => ({
       handleResetClick
     }));
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       if (!disableSetValue) setValue(url);
     }, [url, setValue, disableSetValue]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
@@ -7912,7 +8292,7 @@ var ImageInput = React25.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames77__default.default({
+              className: classNames74__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
@@ -7959,7 +8339,7 @@ var ImageInput = React25.forwardRef(
         ] })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        InputResponse_default,
+        InputResponse,
         {
           name: field.name,
           visibility: meta.touched && meta.error ? true : false,
@@ -7978,14 +8358,14 @@ function MultiImageInput({
   const [field, meta, helpers] = formik.useField(props);
   const { value: imageUrls } = field;
   const { setValue } = helpers;
-  const imageInputRef = React25.useRef(null);
+  const imageInputRef = React26.useRef(null);
   const onValueChanged = (url) => {
     setValue([...imageUrls, url]);
     if (imageInputRef.current) {
       imageInputRef.current.handleResetClick();
     }
   };
-  React25.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: [
@@ -8004,7 +8384,7 @@ function MultiImageInput({
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8022,14 +8402,14 @@ function Radio({
   const { name: name2 } = props;
   const [field, meta] = formik.useField(props);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { text: placeholder }),
     /* @__PURE__ */ jsxRuntime.jsx(formik.Field, { name: name2, children: (formik) => {
       const { field: field2 } = formik;
       return options.map((option) => {
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default({
+            className: classNames74__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -8042,7 +8422,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames77__default.default({
+                  className: classNames74__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
@@ -8054,7 +8434,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames77__default.default({
+                  className: classNames74__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -8067,7 +8447,7 @@ function Radio({
       });
     } }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8085,9 +8465,9 @@ function StarRatingInput({
   const { name: name2 } = props;
   const [field, meta] = formik.useField(props);
   const formikContext = formik.useFormikContext();
-  const [rating, setRating] = React25.useState(Number(field.value) || 0);
-  const [hover, setHover] = React25.useState(null);
-  React25.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) => {
@@ -8097,7 +8477,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -8110,7 +8490,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames77__default.default({
+            className: classNames74__default.default({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -8119,7 +8499,7 @@ function StarRatingInput({
           index3
         )) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          InputResponse_default,
+          InputResponse,
           {
             name: field.name,
             visibility: meta.touched && meta.error ? true : false,
@@ -8143,10 +8523,10 @@ function Select({
   const [field, meta] = formik.useField(props);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel_default,
+      InputLabel,
       {
         text: placeholder,
-        styles: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
+        className: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -8154,7 +8534,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames77__default.default({
+        className: classNames74__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,
@@ -8168,7 +8548,7 @@ function Select({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8189,7 +8569,7 @@ function Switch({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between w-full gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel_default, { text: label }),
+        label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { text: label }),
         description && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "eui-text-md text-[12px] max-w-[500px]", children: description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(formik.Field, { name: name2, children: () => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative inline-flex cursor-pointer", children: [
@@ -8206,7 +8586,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames77__default.default(
+            className: classNames74__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",
@@ -8219,7 +8599,7 @@ function Switch({
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: name2,
         visibility: meta.touched && meta.error ? true : false,
@@ -8236,7 +8616,7 @@ function Tags({
   ...props
 }) {
   const [field, meta, helpers] = formik.useField({ ...props });
-  const [input, setInput] = React25.useState("");
+  const [input, setInput] = React26.useState("");
   const handleAddTag = () => {
     const trimmed = input.trim();
     if (trimmed && !field.value.includes(trimmed) && field.value.length < limit) {
@@ -8263,7 +8643,7 @@ function Tags({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames77__default.default(
+          className: classNames74__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,
@@ -8308,10 +8688,10 @@ function Tags({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        InputLabel_default,
+        InputLabel,
         {
           text: placeholder,
-          styles: classNames77__default.default(
+          className: classNames74__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"
           )
@@ -8324,7 +8704,7 @@ function Tags({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8352,7 +8732,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames77__default.default({
+          className: classNames74__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),
@@ -8363,10 +8743,10 @@ function TextArea({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        InputLabel_default,
+        InputLabel,
         {
           text: placeholder,
-          styles: classNames77__default.default(
+          className: classNames74__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"
           )
@@ -8379,7 +8759,7 @@ function TextArea({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8400,7 +8780,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -8447,7 +8827,7 @@ var Breadcrumb = ({
   const { config } = useEUIConfig();
   const pathname = currentPath || (typeof window !== "undefined" ? window.location.pathname : "/");
   const resolvedRoutes = routes || config?.routes || [];
-  const resolvedData = React25.useMemo(() => {
+  const resolvedData = React26.useMemo(() => {
     if (resolvedRoutes && resolvedRoutes.length > 0) {
       return buildFromRoutes(resolvedRoutes, pathname);
     }
@@ -8464,7 +8844,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(React25__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React26__default.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           BreadcrumbItem_default,
           {
@@ -8477,7 +8857,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames77__default.default({
+            className: classNames74__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -8491,7 +8871,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -8500,8 +8880,8 @@ var Breadcrumb = ({
   );
 };
 var useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = React25.useState(window.innerWidth < breakpoint);
-  React25.useEffect(() => {
+  const [isMobile, setIsMobile] = React26.useState(window.innerWidth < breakpoint);
+  React26.useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth < breakpoint);
     };
@@ -8535,7 +8915,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -8546,7 +8926,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -8575,7 +8955,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__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,
@@ -8623,7 +9003,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default({
+        className: classNames74__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -8636,7 +9016,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -8677,7 +9057,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default({
+        className: classNames74__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -8722,7 +9102,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames77__default.default({
+      className: classNames74__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,
@@ -8751,7 +9131,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -8804,7 +9184,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -8813,7 +9193,7 @@ function HeaderNav({ data = [], styles }) {
 }
 var HeaderNav_default = HeaderNav;
 function useClickOutside(ref, fun) {
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     const listener = (e) => {
       if (!ref.current || ref.current.contains(e.target)) {
         return;
@@ -8854,8 +9234,8 @@ var HeaderNavGroup = ({
   styles,
   children: children3
 }) => {
-  const [collapsed, setCollapsed] = React25.useState(true);
-  const headerNavGroupRef = React25.useRef(null);
+  const [collapsed, setCollapsed] = React26.useState(true);
+  const headerNavGroupRef = React26.useRef(null);
   useClickOutside(headerNavGroupRef, () => setCollapsed(true));
   const handleNavigation = () => {
     if (to) {
@@ -8866,7 +9246,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames77__default.default({
+        className: classNames74__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,
@@ -8894,7 +9274,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsxRuntime.jsx(
             index_js$3.BsChevronDown,
             {
-              className: classNames77__default.default({
+              className: classNames74__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -8907,7 +9287,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default({
+        className: classNames74__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
         }),
@@ -8937,7 +9317,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames77__default.default({
+      className: classNames74__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,
@@ -8966,7 +9346,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9006,7 +9386,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -9078,8 +9458,8 @@ var MenuGroup = ({
   style: style2,
   ...rest
 }) => {
-  const [collapsed, setCollapsed] = React25.useState(!defaultOpen);
-  React25.useEffect(() => {
+  const [collapsed, setCollapsed] = React26.useState(!defaultOpen);
+  React26.useEffect(() => {
     if (defaultOpen !== void 0) {
       setCollapsed(!defaultOpen);
     }
@@ -9196,12 +9576,12 @@ var Menu = ({
   defaultMenuElements,
   currentPath
 }) => {
-  const normalizedItems = React25.useMemo(() => assignKeys(items), [items]);
-  const selected = React25.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 = React25.useMemo(
+  const parentMap = React26.useMemo(
     () => buildParentMap(normalizedItems),
     [normalizedItems]
   );
@@ -9354,8 +9734,8 @@ function RouteTabs({
     const currentPath = window.location.pathname;
     return navData.find((tab2) => tab2.to === currentPath)?.to || navData[0]?.to;
   };
-  const [activeTab, setActiveTab] = React25.useState(getActiveTab);
-  React25.useEffect(() => {
+  const [activeTab, setActiveTab] = React26.useState(getActiveTab);
+  React26.useEffect(() => {
     if (mode !== "route") return;
     const handlePopState = () => {
       setActiveTab(getActiveTab());
@@ -9659,7 +10039,7 @@ var CHART_LIGHT_THEME = {
   },
   colors: CHART_COLOR_PALETTE
 };
-var ChartContext = React25.createContext({
+var ChartContext = React26.createContext({
   data: [],
   loading: false,
   error: null,
@@ -9678,7 +10058,7 @@ var ChartContext = React25.createContext({
 
 // src/components/data-display/charts/context/useChartContext.ts
 function useChartContext() {
-  return React25.useContext(ChartContext);
+  return React26.useContext(ChartContext);
 }
 function mergeChartTheme(baseTheme, customTheme) {
   if (!customTheme) {
@@ -9706,7 +10086,7 @@ function mergeChartTheme(baseTheme, customTheme) {
 }
 function useChartTheme({ mode, theme } = {}) {
   const context = useChartContext();
-  return React25.useMemo(() => {
+  return React26.useMemo(() => {
     const baseTheme = mode === "light" ? CHART_LIGHT_THEME : mode === "dark" ? CHART_DARK_THEME : context.theme;
     return mergeChartTheme(baseTheme, theme);
   }, [context.theme, mode, theme]);
@@ -10248,7 +10628,7 @@ function ChartLegend({
   ...rest
 }) {
   const theme = useChartTheme();
-  const legendItems = React25.useMemo(() => {
+  const legendItems = React26.useMemo(() => {
     if (items?.length) {
       return items;
     }
@@ -10468,14 +10848,14 @@ function useChartData({
   onDataChange,
   onError
 } = {}) {
-  const [state, setState] = React25.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 = React25.useCallback(
+  const prepareData = React26.useCallback(
     (nextData) => {
       if (!normalize4) {
         return nextData;
@@ -10484,7 +10864,7 @@ function useChartData({
     },
     [normalize4]
   );
-  const replaceData = React25.useCallback(
+  const replaceData = React26.useCallback(
     (nextData) => {
       const normalizedData = prepareData(nextData);
       setState({
@@ -10498,7 +10878,7 @@ function useChartData({
     },
     [onDataChange, prepareData]
   );
-  const appendData = React25.useCallback(
+  const appendData = React26.useCallback(
     (nextData) => {
       setState((currentState) => {
         const incomingData = Array.isArray(nextData) ? nextData : [nextData];
@@ -10522,7 +10902,7 @@ function useChartData({
     },
     [maxDataPoints, onDataChange, prepareData]
   );
-  const clearData = React25.useCallback(() => {
+  const clearData = React26.useCallback(() => {
     setState({
       data: [],
       loading: false,
@@ -10532,7 +10912,7 @@ function useChartData({
     });
     onDataChange?.([]);
   }, [onDataChange]);
-  const handleError = React25.useCallback(
+  const handleError = React26.useCallback(
     (error) => {
       setState((currentState) => ({
         ...currentState,
@@ -10544,7 +10924,7 @@ function useChartData({
     },
     [onError]
   );
-  const refresh = React25.useCallback(async () => {
+  const refresh = React26.useCallback(async () => {
     const resolvedDataSource = dataSource;
     if (!resolvedDataSource?.refresh && !resolvedDataSource?.getInitialData) {
       return;
@@ -10563,13 +10943,13 @@ function useChartData({
       handleError(error instanceof Error ? error : new Error(String(error)));
     }
   }, [dataSource, handleError, replaceData]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!data) {
       return;
     }
     replaceData(data);
   }, [data, replaceData]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!dataSource || !autoLoad) {
       return;
     }
@@ -10608,7 +10988,7 @@ function useChartData({
       unsubscribe?.();
     };
   }, [appendData, autoLoad, dataSource, handleError, replaceData]);
-  return React25.useMemo(
+  return React26.useMemo(
     () => ({
       ...state,
       refresh,
@@ -10627,11 +11007,11 @@ function useChartRealtime({
   onData,
   onError
 }) {
-  const [data, setData] = React25.useState([]);
-  const [error, setError] = React25.useState(null);
-  const [connected, setConnected] = React25.useState(false);
-  const [lastUpdatedAt, setLastUpdatedAt] = React25.useState();
-  React25.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;
@@ -10665,7 +11045,7 @@ function useChartRealtime({
       setConnected(false);
     };
   }, [connect, enabled, maxDataPoints, normalize4, onData, onError]);
-  return React25.useMemo(
+  return React26.useMemo(
     () => ({
       data,
       error,
@@ -10687,13 +11067,13 @@ function useChartPolling({
   onData,
   onError
 }) {
-  const isMountedRef = React25.useRef(false);
-  const isFetchingRef = React25.useRef(false);
-  const [data, setData] = React25.useState([]);
-  const [error, setError] = React25.useState(null);
-  const [loading, setLoading] = React25.useState(immediate);
-  const [lastUpdatedAt, setLastUpdatedAt] = React25.useState();
-  const refresh = React25.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;
     }
@@ -10722,13 +11102,13 @@ function useChartPolling({
       isFetchingRef.current = false;
     }
   }, [fetcher, normalize4, onData, onError]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!enabled) {
       setLoading(false);
       return;
@@ -10743,7 +11123,7 @@ function useChartPolling({
       window.clearInterval(timer2);
     };
   }, [enabled, immediate, interval2, refresh]);
-  return React25.useMemo(
+  return React26.useMemo(
     () => ({
       data,
       error,
@@ -10777,7 +11157,7 @@ function useChartSeries({
   xKey,
   excludeKeys
 }) {
-  return React25.useMemo(() => {
+  return React26.useMemo(() => {
     const resolvedData = data ?? [];
     const resolvedExcludeKeys = excludeKeys ?? [];
     const normalizedSeries = series && series.length > 0 ? series : inferSeriesKeys(
@@ -10935,7 +11315,7 @@ function AreaPlot({
   ...rest
 }) {
   const theme = useChartTheme();
-  const chartId = React25.useId().replace(/:/g, "");
+  const chartId = React26.useId().replace(/:/g, "");
   const chart = useResolvedChartState(data, loading, error);
   const resolvedSeries = useChartSeries({
     data: chart.data,
@@ -11149,7 +11529,7 @@ function PiePlot({
 }) {
   const theme = useChartTheme();
   const chart = useResolvedChartState(data, loading, error);
-  const segments = React25.useMemo(
+  const segments = React26.useMemo(
     () => chart.data.map((item, index3) => {
       const label = String(item[String(nameKey)] ?? index3);
       return {
@@ -11540,7 +11920,7 @@ function ChartProvider({
     onError
   });
   const resolvedTheme = useChartTheme({ mode: themeMode, theme });
-  const value = React25.useMemo(
+  const value = React26.useMemo(
     () => ({
       ...chartData,
       mode: dataSource?.mode,
@@ -11984,7 +12364,7 @@ var Chip = ({
     }
   ) });
 };
-var DataViewContext = React25.createContext(null);
+var DataViewContext = React26.createContext(null);
 
 // src/components/data-display/data-view/utils/searchData.ts
 function searchData(data, search3) {
@@ -12028,19 +12408,19 @@ var DataViewProvider = ({
   defaultPageSize = 9,
   sortConfig = {}
 }) => {
-  const [search3, setSearch] = React25.useState("");
-  const [filters, setFilters] = React25.useState({});
-  const [sort, setSort] = React25.useState("suggested");
-  const [page, setPage] = React25.useState(1);
-  const [pageSize, setPageSize] = React25.useState(defaultPageSize);
-  const processedData = React25.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 = React25.useMemo(() => {
+  const paginatedData = React26.useMemo(() => {
     if (pageSize === "All") return processedData;
     const size = pageSize;
     const start3 = (page - 1) * size;
@@ -12093,7 +12473,7 @@ var DataViewSidebar = ({
   return /* @__PURE__ */ jsxRuntime.jsx("aside", { ...rest, className: cn("w-[220px] shrink-0", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: children3 }) });
 };
 function useDataView() {
-  const ctx = React25.useContext(DataViewContext);
+  const ctx = React26.useContext(DataViewContext);
   if (!ctx) {
     throw new Error("useDataView must be used within DataViewProvider");
   }
@@ -12190,7 +12570,7 @@ function Accordion({
   toggleOnSummaryClick = false,
   enableChildrenPadding = true
 }) {
-  const [collapse, setCollapse] = React25.useState(defaultCollapse);
+  const [collapse, setCollapse] = React26.useState(defaultCollapse);
   const handleToggle = () => {
     setCollapse((prev) => !prev);
   };
@@ -12198,7 +12578,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -12219,7 +12599,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 index_js$4.FaCircleChevronDown,
                 {
-                  className: classNames77__default.default("text-xl transition-transform duration-300", {
+                  className: classNames74__default.default("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -12233,7 +12613,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -12290,7 +12670,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -12306,14 +12686,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children: children3, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames77__default.default("p-6 text-gray-300 text-sm", className), children: children3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames74__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: classNames77__default.default(
+      className: classNames74__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -12355,7 +12735,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default("absolute inset-0"),
+      className: classNames74__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -12501,7 +12881,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames77__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames74__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 })
@@ -12664,8 +13044,8 @@ var Flag = ({
   className,
   ...rest
 }) => {
-  const [pos, setPos] = React25.useState({ x: 0, y: 0 });
-  const [showTooltip, setShowTooltip] = React25.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(
@@ -15793,16 +16173,16 @@ var GraphRenderer = ({
   width = 1e3,
   height = 700
 }) => {
-  const [nodes, setNodes] = React25.useState([]);
+  const [nodes, setNodes] = React26.useState([]);
   const edges = data.edges;
-  const simulationRef = React25.useRef(null);
-  const [offset, setOffset] = React25.useState({ x: 0, y: 0 });
-  const isDragging = React25.useRef(false);
-  const lastPos = React25.useRef({ x: 0, y: 0 });
-  const nodeMap = React25.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]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     simulationRef.current?.stop?.();
     const positionedNodes = data.nodes.map((n) => ({
       ...n,
@@ -15883,13 +16263,13 @@ var Graph = ({
     }
   );
 };
-var CloudinaryContext = React25.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 = React25.useContext(CloudinaryContext);
+  const ctx = React26.useContext(CloudinaryContext);
   if (!ctx) {
     throw new Error(
       "CloudinaryProvider is missing. Wrap your app with <CloudinaryProvider />"
@@ -16408,7 +16788,7 @@ var ListItem = ({
             children: bullet
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React25__default.default.cloneElement(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React26__default.default.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -16442,7 +16822,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React25__default.default.isValidElement(item)) {
+  if (React26__default.default.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -16747,7 +17127,7 @@ var ProgressBar = ({
     hasBottomLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: labelNode })
   ] });
 };
-var sizes3 = {
+var sizes2 = {
   ["xs" /* xs */]: "text-[10px]",
   ["sm" /* sm */]: "text-xs",
   ["md" /* md */]: "text-sm",
@@ -16777,7 +17157,7 @@ var StarRating = ({
         className: cn(
           "inline-flex items-center gap-[2px]",
           "text-yellow-500 dark:text-yellow-400",
-          sizes3[size],
+          sizes2[size],
           iconClassName
         ),
         children: [
@@ -16790,7 +17170,7 @@ var StarRating = ({
     showValue && valuePosition === "end" && ratingValue
   ] });
 };
-var sizes4 = {
+var sizes3 = {
   ["xs" /* xs */]: {
     value: "text-2xl",
     review: "text-xs"
@@ -16822,7 +17202,7 @@ var NumericRating = ({
   className,
   ...rest
 }) => {
-  const sizeStyles = sizes4[size];
+  const sizeStyles = sizes3[size];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -17254,8 +17634,8 @@ var Table = ({
 }) => {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [sortKey, setSortKey] = React25.useState(null);
-  const [sortOrder, setSortOrder] = React25.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");
@@ -17264,7 +17644,7 @@ var Table = ({
       setSortOrder("asc");
     }
   };
-  const sortedData = React25.useMemo(() => {
+  const sortedData = React26.useMemo(() => {
     if (!sortKey) return data;
     return [...data].sort((a2, b) => {
       const aVal = a2[sortKey];
@@ -17345,8 +17725,8 @@ var Tooltip6 = ({
   style: style2,
   ...rest
 }) => {
-  const [pos, setPos] = React25.useState({ x: 0, y: 0 });
-  React25.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 });
@@ -17536,17 +17916,17 @@ var YoutubeVideo = ({
     }
   ) });
 };
-var ThemeContext = React25.createContext(
+var ThemeContext = React26.createContext(
   void 0
 );
 var ThemeProvider = ({
   defaultTheme = "dark",
   children: children3
 }) => {
-  const [theme, setTheme] = React25.useState(() => {
+  const [theme, setTheme] = React26.useState(() => {
     return localStorage.getItem("theme") || defaultTheme;
   });
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
     } else {
@@ -17560,7 +17940,7 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children3 });
 };
 var ThemeSwitch = () => {
-  const themeContext = React25.useContext(ThemeContext);
+  const themeContext = React26.useContext(ThemeContext);
   if (!themeContext) return null;
   const { theme, toggleTheme } = themeContext;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -17586,7 +17966,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames74__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"
             )
@@ -17596,11 +17976,44 @@ var ThemeSwitch = () => {
     }
   );
 };
+function ThemeSelect({
+  ariaLabel,
+  label,
+  onChange,
+  options,
+  value
+}) {
+  const id2 = React26.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: "inline-flex w-fit min-w-[112px] flex-col rounded-md border border-gray-300 bg-white px-2 py-1 shadow-sm dark:bg-gray-800",
+      htmlFor: id2,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-3 text-gray-500 dark:text-gray-300", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            "aria-label": ariaLabel ?? label,
+            className: "h-5 bg-transparent p-0 text-sm leading-5 text-gray-900 outline-none dark:text-gray-100",
+            id: id2,
+            onChange: (event) => onChange?.(event.target.value),
+            value,
+            children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
+          }
+        )
+      ]
+    }
+  );
+}
+var shapeOptions = Object.keys(Shape).map((shape) => ({
+  label: shape,
+  value: shape
+}));
 var ShapeSwitch = () => {
   const { config, setConfig } = useEUIConfig();
   const currentShape = config.global?.shape ?? "square";
-  const handleChange = (e) => {
-    const shape = e.target.value;
+  const handleChange = (shape) => {
     setConfig((prev) => ({
       ...prev,
       global: {
@@ -17609,20 +18022,46 @@ var ShapeSwitch = () => {
       }
     }));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 w-fit", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "select",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeSelect,
     {
-      value: currentShape,
+      ariaLabel: "Global shape",
+      label: "Shape",
       onChange: handleChange,
-      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
-      children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
+      options: shapeOptions,
+      value: currentShape
     }
-  ) });
+  );
+};
+var previewOptions = [
+  {
+    label: "Web",
+    value: "web"
+  },
+  {
+    label: "Native",
+    value: "native"
+  }
+];
+var PreviewSwitch = ({
+  onChange,
+  value = "web"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeSelect,
+    {
+      ariaLabel: "Preview platform",
+      label: "Preview",
+      onChange,
+      options: previewOptions,
+      value
+    }
+  );
 };
 
 // src/hooks/theme/useCurrentTheme.ts
 var useCurrentTheme = () => {
-  const context = React25.useContext(ThemeContext);
+  const context = React26.useContext(ThemeContext);
   if (!context) {
     throw new Error("useCurrentTheme must be used within a ThemeProvider");
   }
@@ -28965,7 +29404,7 @@ var WorldMap = ({
     }
   };
   const mode = isDarkMode ? mapStyles.dark : mapStyles.light;
-  const resolvedData = React25.useMemo(() => {
+  const resolvedData = React26.useMemo(() => {
     return data.map((item) => {
       const c3 = COUNTRIES.find((x3) => x3.code === item.code);
       if (!c3) return null;
@@ -28977,8 +29416,8 @@ var WorldMap = ({
     }).filter(Boolean);
   }, [data]);
   const maxValue = resolvedData.length > 0 ? Math.max(...resolvedData.map((d) => d.value)) : 0;
-  const [showTooltip, setShowTooltip] = React25.useState(false);
-  const [tooltipContent, setTooltipContent] = React25.useState(null);
+  const [showTooltip, setShowTooltip] = React26.useState(false);
+  const [tooltipContent, setTooltipContent] = React26.useState(null);
   const handleMouseMove = (_event, point5) => {
     setTooltipContent(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -29075,7 +29514,7 @@ function AsyncStateCard({
           isError ? /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: message, variant: "danger" }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-eui-dark-500 dark:text-eui-light-400", children: message })
         ] }),
         onAction && actionText && /* @__PURE__ */ jsxRuntime.jsx(
-          Button_default,
+          Button_web_default,
           {
             type: "button",
             text: actionText,
@@ -29090,7 +29529,7 @@ function AsyncStateCard({
     }
   );
 }
-var AsyncStateCard_default = React25__default.default.memo(AsyncStateCard);
+var AsyncStateCard_default = React26__default.default.memo(AsyncStateCard);
 
 // src/components/utils/async-component-wrapper/asyncError.utils.ts
 var getDefaultErrorMessage = (error) => {
@@ -29149,22 +29588,22 @@ function AsyncComponentWrapper({
   contentClassName,
   stateClassName
 }) {
-  const [isRetrying, setIsRetrying] = React25.useState(false);
-  const retryTimerRef = React25.useRef(null);
-  const errorMessage = React25.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 = React25.useCallback(() => {
+  const clearRetryTimer = React26.useCallback(() => {
     if (retryTimerRef.current) {
       clearTimeout(retryTimerRef.current);
       retryTimerRef.current = null;
     }
   }, []);
-  const handleRetry = React25.useCallback(() => {
+  const handleRetry = React26.useCallback(() => {
     if (!onRetry) return;
     clearRetryTimer();
     setIsRetrying(true);
@@ -29184,12 +29623,12 @@ function AsyncComponentWrapper({
       throw retryError;
     }
   }, [onRetry, clearRetryTimer, retryLoadingFallbackMs]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isLoading && !isFetching && !isError) {
       setIsRetrying(false);
     }
   }, [isLoading, isFetching, isError]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     return () => {
       clearRetryTimer();
     };
@@ -29271,7 +29710,7 @@ function AsyncComponentWrapper({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: children3 })
   ] });
 }
-var AsyncComponentWrapper_default = React25__default.default.memo(AsyncComponentWrapper);
+var AsyncComponentWrapper_default = React26__default.default.memo(AsyncComponentWrapper);
 function Modal({
   title,
   show = false,
@@ -29287,7 +29726,7 @@ function Modal({
 }) {
   const eui = useEUIConfig();
   const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const modalRef = React25.useRef(null);
+  const modalRef = React26.useRef(null);
   useClickOutside(
     modalRef,
     enableCloseOnClickOutside ? handleOnClose : void 0
@@ -29296,7 +29735,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -29308,7 +29747,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames77__default.default(
+              className: classNames74__default.default(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -29333,7 +29772,7 @@ function Modal({
 }
 var Modal_default = Modal;
 var useAnalytics = () => {
-  const context = React25.useContext(AnalyticsContext);
+  const context = React26.useContext(AnalyticsContext);
   if (!context) {
     throw new Error("useAnalytics must be used within an AnalyticsProvider.");
   }
@@ -29373,10 +29812,10 @@ var CookiePreferencesModal = ({
   ...rest
 }) => {
   const { consent, updateConsent } = useCookieConsent();
-  const [selectedCategories, setSelectedCategories] = React25.useState(
+  const [selectedCategories, setSelectedCategories] = React26.useState(
     consent.categories
   );
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     setSelectedCategories(consent.categories);
   }, [consent.categories, open]);
   const saveLabel = labels?.save ?? "Save preferences";
@@ -29438,7 +29877,7 @@ var CookiePreferencesModal = ({
         }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Button_default,
+            Button_web_default,
             {
               type: "button",
               text: cancelLabel,
@@ -29450,7 +29889,7 @@ var CookiePreferencesModal = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Button_default,
+            Button_web_default,
             {
               type: "button",
               text: saveLabel,
@@ -29488,8 +29927,8 @@ var CookieBanner = ({
   ...rest
 }) => {
   const { consent, acceptAll, rejectAll } = useCookieConsent();
-  const [preferencesOpen, setPreferencesOpen] = React25.useState(false);
-  const shouldRender = React25.useMemo(() => consent.status === "unset", [consent]);
+  const [preferencesOpen, setPreferencesOpen] = React26.useState(false);
+  const shouldRender = React26.useMemo(() => consent.status === "unset", [consent]);
   if (!shouldRender) return null;
   const acceptAllLabel = labels?.acceptAll ?? "Accept all";
   const rejectAllLabel = labels?.rejectAll ?? "Reject optional";
@@ -29542,7 +29981,7 @@ var CookieBanner = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              Button_default,
+              Button_web_default,
               {
                 type: "button",
                 text: acceptAllLabel,
@@ -29554,7 +29993,7 @@ var CookieBanner = ({
               }
             ),
             showCustomize ? /* @__PURE__ */ jsxRuntime.jsx(
-              Button_default,
+              Button_web_default,
               {
                 type: "button",
                 text: customizeLabel,
@@ -29566,7 +30005,7 @@ var CookieBanner = ({
               }
             ) : null,
             showRejectAll ? /* @__PURE__ */ jsxRuntime.jsx(
-              Button_default,
+              Button_web_default,
               {
                 type: "button",
                 text: rejectAllLabel,
@@ -29598,42 +30037,109 @@ var CookieBanner = ({
 var usePageTracking = ({
   path: path2,
   search: search3 = "",
+  title,
+  fullUrl,
+  metadata,
   enabled = true,
+  trackPageLeave = false,
   dedupe = true
 }) => {
   const { track } = useAnalytics();
-  const trackRef = React25.useRef(track);
-  const previousPathRef = React25.useRef(null);
-  React25.useEffect(() => {
+  const trackRef = React26.useRef(track);
+  const enteredAtRef = React26.useRef(Date.now());
+  const previousPathRef = React26.useRef(null);
+  const trackedPathsRef = React26.useRef(/* @__PURE__ */ new Set());
+  React26.useEffect(() => {
     trackRef.current = track;
   }, [track]);
-  React25.useEffect(() => {
+  const metadataKey = React26.useMemo(() => JSON.stringify(metadata ?? {}), [metadata]);
+  React26.useEffect(() => {
     if (!enabled) return;
     const nextPath = `${path2}${search3}`;
     if (!nextPath) return;
-    if (dedupe && previousPathRef.current === nextPath) {
+    if (dedupe && trackedPathsRef.current.has(nextPath)) {
       return;
     }
+    if (trackPageLeave && previousPathRef.current) {
+      const durationMs = Date.now() - enteredAtRef.current;
+      trackRef.current("page_leave", {
+        path: previousPathRef.current,
+        durationMs,
+        metadata
+      });
+    }
+    enteredAtRef.current = Date.now();
     previousPathRef.current = nextPath;
+    trackedPathsRef.current.add(nextPath);
     trackRef.current("page_view", {
-      path: nextPath
+      path: nextPath,
+      title,
+      fullUrl,
+      metadata
     });
-  }, [dedupe, enabled, path2, search3]);
+    return () => {
+      if (!trackPageLeave) return;
+      const durationMs = Date.now() - enteredAtRef.current;
+      trackRef.current("page_leave", {
+        path: nextPath,
+        durationMs,
+        metadata
+      });
+    };
+  }, [
+    dedupe,
+    enabled,
+    fullUrl,
+    metadataKey,
+    path2,
+    search3,
+    title,
+    trackPageLeave
+  ]);
 };
-
-// src/components/analytics/hooks/useSessionTracking.ts
 var useSessionTracking = ({
-  enabled = true
+  enabled = true,
+  metadata
 } = {}) => {
-  return null;
+  const { track } = useAnalytics();
+  const startedAtRef = React26.useRef(Date.now());
+  const endedRef = React26.useRef(false);
+  React26.useEffect(() => {
+    if (!enabled || !isBrowser()) return;
+    startedAtRef.current = Date.now();
+    endedRef.current = false;
+    track("session_start", {
+      metadata
+    });
+    const endSession = () => {
+      if (endedRef.current) return;
+      endedRef.current = true;
+      track("session_end", {
+        durationMs: Date.now() - startedAtRef.current,
+        metadata
+      });
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        endSession();
+      }
+    };
+    window.addEventListener("pagehide", endSession);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      endSession();
+      window.removeEventListener("pagehide", endSession);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [enabled, metadata, track]);
 };
-var ContentArea = React25.forwardRef(
+var ContentArea = React26.forwardRef(
   ({ children: children3, styles, enablePadding = false }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: classNames77__default.default({
+        className: classNames74__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,
@@ -29650,7 +30156,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29663,7 +30169,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29682,7 +30188,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -29699,7 +30205,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -29713,12 +30219,15 @@ var Layout = ({
 var Header = ({
   position: position4 = "static",
   children: children3,
+  onPreviewPlatformChange,
+  previewPlatform = "web",
+  showPreviewPlatformSelector = false,
   styles
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -29727,9 +30236,16 @@ var Header = ({
         [`${styles}`]: styles
       }),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: children3 ? children3 : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row w-full items-center justify-between px-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Header" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: "elseware UI" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-3 items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ThemeSwitch, {}),
+          showPreviewPlatformSelector ? /* @__PURE__ */ jsxRuntime.jsx(
+            PreviewSwitch,
+            {
+              onChange: onPreviewPlatformChange,
+              value: previewPlatform
+            }
+          ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(ShapeSwitch, {})
         ] })
       ] }) })
@@ -29746,7 +30262,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__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)
@@ -29762,7 +30278,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__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
@@ -29847,8 +30363,8 @@ var GlowWrapper = ({
   className = "",
   hideOnLeave = true
 }) => {
-  const ref = React25.useRef(null);
-  const handleMove = React25.useCallback(
+  const ref = React26.useRef(null);
+  const handleMove = React26.useCallback(
     (e) => {
       const el = ref.current;
       if (!el) return;
@@ -29870,7 +30386,7 @@ var GlowWrapper = ({
     },
     [glowSize, glowColor]
   );
-  const handleLeave = React25.useCallback(() => {
+  const handleLeave = React26.useCallback(() => {
     const el = ref.current;
     if (!el || !hideOnLeave) return;
     el.style.setProperty("--glow-x", `-999px`);
@@ -29896,7 +30412,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
+            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -29915,8 +30431,8 @@ function InfiniteScrollTrigger({
   threshold = 0,
   onLoadMore
 }) {
-  const triggerRef = React25.useRef(null);
-  React25.useEffect(() => {
+  const triggerRef = React26.useRef(null);
+  React26.useEffect(() => {
     const element7 = triggerRef.current;
     if (!element7 || !hasMore || isLoading) {
       return;
@@ -29942,7 +30458,7 @@ function InfiniteScrollTrigger({
 }
 var InfiniteScrollTrigger_default = InfiniteScrollTrigger;
 function ShowMore({ text: text10, limit }) {
-  const [showMore, setShowMore] = React25.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: [
@@ -29950,7 +30466,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames77__default.default({
+          className: classNames74__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
@@ -29977,8 +30493,8 @@ function CommentComposer({
   loading,
   onSubmit
 }) {
-  const [value, setValue] = React25.useState("");
-  const [focused, setFocused] = React25.useState(false);
+  const [value, setValue] = React26.useState("");
+  const [focused, setFocused] = React26.useState(false);
   async function handleSubmit() {
     const content3 = value.trim();
     if (!content3) {
@@ -30008,7 +30524,7 @@ function CommentComposer({
       ),
       (focused || value.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          Button_default,
+          Button_web_default,
           {
             text: "Cancel",
             variant: "secondary",
@@ -30018,7 +30534,7 @@ function CommentComposer({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          Button_default,
+          Button_web_default,
           {
             text: submitLabel,
             variant: "primary",
@@ -30233,14 +30749,14 @@ function CommentHeader({ comment: comment4, config }) {
 }
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
-  const [show, setShow] = React25.useState(defaultVisibility);
-  const openDrawer = React25.useCallback(() => {
+  const [show, setShow] = React26.useState(defaultVisibility);
+  const openDrawer = React26.useCallback(() => {
     setShow(true);
   }, []);
-  const closeDrawer = React25.useCallback(() => {
+  const closeDrawer = React26.useCallback(() => {
     setShow(false);
   }, []);
-  const toggleDrawer = React25.useCallback(() => {
+  const toggleDrawer = React26.useCallback(() => {
     setShow((prev) => !prev);
   }, []);
   return {
@@ -30252,7 +30768,7 @@ var useDrawer = (defaultVisibility = true) => {
 };
 var useDrawer_default = useDrawer;
 var useModal = () => {
-  const [show, setShow] = React25.useState(false);
+  const [show, setShow] = React26.useState(false);
   const handleOpenModal = () => {
     setShow(true);
   };
@@ -30267,7 +30783,7 @@ var useModal = () => {
 };
 var useModal_default = useModal;
 var useTheme = () => {
-  const context = React25.useContext(ThemeContext);
+  const context = React26.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -30308,7 +30824,7 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const ref = React25.useRef(null);
+  const ref = React26.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -30436,11 +30952,11 @@ function CommentItem({
   onDelete,
   onReport
 }) {
-  const [collapsed, setCollapsed] = React25.useState(true);
-  const [isReplying, setIsReplying] = React25.useState(false);
-  const [menuOpen, setMenuOpen] = React25.useState(false);
-  const [loadingReplies, setLoadingReplies] = React25.useState(false);
-  const [repliesLoaded, setRepliesLoaded] = React25.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,
@@ -30604,18 +31120,18 @@ function CommentThread({
   onDelete,
   onReport
 }) {
-  const [comments, setComments] = React25.useState([]);
-  const [isLoadingComments, setIsLoadingComments] = React25.useState(true);
-  const [replyCache, setReplyCache] = React25.useState(
+  const [comments, setComments] = React26.useState([]);
+  const [isLoadingComments, setIsLoadingComments] = React26.useState(true);
+  const [replyCache, setReplyCache] = React26.useState(
     {}
   );
-  const replyCacheRef = React25.useRef(replyCache);
+  const replyCacheRef = React26.useRef(replyCache);
   const ComposerComponent = components?.Composer ?? CommentComposer_default;
   const resolvedConfig = {
     ...DEFAULT_COMMENT_THREAD_CONFIG,
     ...config
   };
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     async function loadComments() {
       try {
         const result = await dataSource.getComments({
@@ -30629,10 +31145,10 @@ function CommentThread({
     }
     void loadComments();
   }, [dataSource, resolvedConfig.commentsPerPage]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     replyCacheRef.current = replyCache;
   }, [replyCache]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     let cancelled = false;
     async function refreshLoadedReplies() {
       const parentIds = Object.keys(replyCacheRef.current);
@@ -30668,13 +31184,13 @@ function CommentThread({
       cancelled = true;
     };
   }, [dataSource, resolvedConfig.repliesPerPage]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!updatedComment) {
       return;
     }
     updateCommentEverywhere(updatedComment.id, () => updatedComment);
   }, [updatedComment]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!deletedComment) {
       return;
     }
@@ -30866,7 +31382,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsxRuntime.jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -30880,7 +31396,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsxRuntime.jsx(
           "main",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -30888,7 +31404,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames77__default.default(
+                className: classNames74__default.default(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -30901,7 +31417,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: classNames77__default.default(
+            className: classNames74__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",
@@ -30910,7 +31426,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames77__default.default(
+                className: classNames74__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, {}) })
@@ -30955,13 +31471,13 @@ function SliderItem({
 }
 var SliderItem_default = SliderItem;
 function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
-  const [images, setImages] = React25.useState([
+  const [images, setImages] = React26.useState([
     {
       img: coverArt,
       selected: true
     }
   ]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     setImages([
       {
         img: coverArt,
@@ -30969,7 +31485,7 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       }
     ]);
   }, [isSuccess]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (screenshots) {
       const selectableScreenshots = [];
       screenshots.forEach((item) => {
@@ -30981,8 +31497,8 @@ function Slider({ isLoading, isSuccess, coverArt, screenshots }) {
       setImages((prev) => [...prev, ...selectableScreenshots]);
     }
   }, [isSuccess]);
-  const [displayImg, setDisplayImg] = React25.useState(coverArt);
-  React25.useEffect(() => {
+  const [displayImg, setDisplayImg] = React26.useState(coverArt);
+  React26.useEffect(() => {
     setDisplayImg(coverArt);
   }, [coverArt]);
   const displayImageHandler = (itemIndex, img) => {
@@ -31094,7 +31610,7 @@ function WorldMapCountryTable({
   title = "Country Breakdown",
   data
 }) {
-  const enrichedData = React25.useMemo(() => {
+  const enrichedData = React26.useMemo(() => {
     const mapped = data.map((item) => {
       const countryMeta = COUNTRIES.find((c3) => c3.code === item.code);
       return {
@@ -31107,11 +31623,11 @@ function WorldMapCountryTable({
     });
     return mapped.sort((a2, b) => b.value - a2.value);
   }, [data]);
-  const total = React25.useMemo(
+  const total = React26.useMemo(
     () => enrichedData.reduce((sum, i) => sum + i.value, 0),
     [enrichedData]
   );
-  const finalData = React25.useMemo(() => {
+  const finalData = React26.useMemo(() => {
     return enrichedData.map((item) => ({
       ...item,
       percent: total > 0 ? item.value / total * 100 : 0
@@ -31186,7 +31702,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames77__default.default(
+      className: classNames74__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",
@@ -31356,7 +31872,7 @@ var TNDropdownGroup = ({
   navigate,
   className
 }) => {
-  const [open, setOpen] = React25.useState(true);
+  const [open, setOpen] = React26.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -31445,8 +31961,8 @@ var TNGroup = ({
   components,
   selected
 }) => {
-  const [open, setOpen] = React25.useState(false);
-  const timeoutRef = React25.useRef(null);
+  const [open, setOpen] = React26.useState(false);
+  const timeoutRef = React26.useRef(null);
   const handleEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -31550,14 +32066,14 @@ function ReviewForm({
   onSubmit,
   onCancel
 }) {
-  const [content3, setContent] = React25.useState(initialValues?.content ?? "");
-  const [rating, setRating] = React25.useState(initialValues?.rating ?? 0);
-  const [isRecommended, setIsRecommended] = React25.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] = React25.useState("");
+  const [error, setError] = React26.useState("");
   const contentLength = content3.trim().length;
-  const ratingItems = React25.useMemo(() => {
+  const ratingItems = React26.useMemo(() => {
     return Array.from(
       {
         length: config.maxRating
@@ -31565,7 +32081,7 @@ function ReviewForm({
       (_2, index3) => index3 + 1
     );
   }, [config.maxRating]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     setContent(initialValues?.content ?? "");
     setRating(initialValues?.rating ?? 0);
     setIsRecommended(initialValues?.isRecommended ?? true);
@@ -31681,7 +32197,7 @@ function ReviewForm({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
       onCancel && /* @__PURE__ */ jsxRuntime.jsx(
-        Button_default,
+        Button_web_default,
         {
           text: cancelLabel,
           variant: "secondary",
@@ -31691,7 +32207,7 @@ function ReviewForm({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Button_default,
+        Button_web_default,
         {
           text: submitLabel,
           variant: "primary",
@@ -31717,7 +32233,7 @@ function ReviewComposer({
   if (!currentUser) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Please login to post your review." }),
-      onLoginClick && /* @__PURE__ */ jsxRuntime.jsx(Button_default, { text: "Login", variant: "primary", onClick: onLoginClick })
+      onLoginClick && /* @__PURE__ */ jsxRuntime.jsx(Button_web_default, { text: "Login", variant: "primary", onClick: onLoginClick })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
@@ -32009,7 +32525,7 @@ function MyReviewPanel({
   onEditReview,
   onDeleteReview
 }) {
-  const [editing, setEditing] = React25.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;
@@ -32093,7 +32609,7 @@ function MyReviewPanel({
         /* @__PURE__ */ jsxRuntime.jsx(HeaderComponent, { review: myReview, config }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Button_default,
+            Button_web_default,
             {
               text: "Edit",
               variant: "secondary",
@@ -32103,7 +32619,7 @@ function MyReviewPanel({
             }
           ),
           onDeleteReview && /* @__PURE__ */ jsxRuntime.jsx(
-            Button_default,
+            Button_web_default,
             {
               text: "Delete",
               variant: "danger",
@@ -32165,7 +32681,7 @@ function ReviewMenu({
   onReport,
   onReply
 }) {
-  const ref = React25.useRef(null);
+  const ref = React26.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -32316,7 +32832,7 @@ function ReviewReplyMenu({
   onDelete,
   onReport
 }) {
-  const ref = React25.useRef(null);
+  const ref = React26.useRef(null);
   useClickOutside(ref, () => setOpen(false));
   const items = [];
   if (canEdit) {
@@ -32385,7 +32901,7 @@ function ReviewReplyItem({
   onDeleteReviewReply,
   onReportReviewReply
 }) {
-  const [menuOpen, setMenuOpen] = React25.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;
@@ -32462,7 +32978,7 @@ function ReviewItem({
   onDeleteReviewReply,
   onReportReviewReply
 }) {
-  const [menuOpen, setMenuOpen] = React25.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;
@@ -32612,28 +33128,28 @@ function useReviewThreadState({
   onReviewUpdated,
   onReviewDeleted
 }) {
-  const [reviews, setReviews] = React25.useState([]);
-  const [myReview, setMyReview] = React25.useState(null);
-  const [isLoadingReviews, setIsLoadingReviews] = React25.useState(true);
-  const [isLoadingMyReview, setIsLoadingMyReview] = React25.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] = React25.useState(false);
-  const [isUpdatingReview, setIsUpdatingReview] = React25.useState(false);
-  const [isDeletingReview, setIsDeletingReview] = React25.useState(false);
-  const [isCreatingReviewReply, setIsCreatingReviewReply] = React25.useState(false);
-  const [isUpdatingReviewReply, setIsUpdatingReviewReply] = React25.useState(false);
-  const [isDeletingReviewReply, setIsDeletingReviewReply] = React25.useState(false);
-  const [reviewsError, setReviewsError] = React25.useState(null);
-  const [myReviewError, setMyReviewError] = React25.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 = React25.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 = React25.useCallback((review) => {
+  const applyReview = React26.useCallback((review) => {
     setReviews((prev) => upsertReview(prev, review));
     setMyReview((prev) => {
       if (!prev || prev.id !== review.id) {
@@ -32642,7 +33158,7 @@ function useReviewThreadState({
       return review;
     });
   }, []);
-  const applyReviewUpdater = React25.useCallback(
+  const applyReviewUpdater = React26.useCallback(
     (reviewId, updater) => {
       setReviews((prev) => updateReview(prev, reviewId, updater));
       setMyReview((prev) => {
@@ -32654,7 +33170,7 @@ function useReviewThreadState({
     },
     []
   );
-  const removeReviewById = React25.useCallback((reviewId) => {
+  const removeReviewById = React26.useCallback((reviewId) => {
     setReviews((prev) => removeReview(prev, reviewId));
     setMyReview((prev) => {
       if (!prev || prev.id !== reviewId) {
@@ -32663,7 +33179,7 @@ function useReviewThreadState({
       return null;
     });
   }, []);
-  const loadReviews = React25.useCallback(async () => {
+  const loadReviews = React26.useCallback(async () => {
     try {
       setIsLoadingReviews(true);
       setReviewsError(null);
@@ -32677,7 +33193,7 @@ function useReviewThreadState({
       setIsLoadingReviews(false);
     }
   }, [config.reviewsPerPage, dataSource, targetId]);
-  const loadMyReview = React25.useCallback(async () => {
+  const loadMyReview = React26.useCallback(async () => {
     if (!dataSource.getMyReview || !shouldLoadMyReview) {
       setMyReview(null);
       setIsLoadingMyReview(false);
@@ -32696,10 +33212,10 @@ function useReviewThreadState({
       setIsLoadingMyReview(false);
     }
   }, [dataSource, shouldLoadMyReview, targetId]);
-  const reload = React25.useCallback(async () => {
+  const reload = React26.useCallback(async () => {
     await Promise.all([loadReviews(), loadMyReview()]);
   }, [loadReviews, loadMyReview]);
-  const createReview = React25.useCallback(
+  const createReview = React26.useCallback(
     async (values) => {
       try {
         setIsCreatingReview(true);
@@ -32718,7 +33234,7 @@ function useReviewThreadState({
     },
     [dataSource, onReviewCreated]
   );
-  const updateReview2 = React25.useCallback(
+  const updateReview2 = React26.useCallback(
     async (review, values) => {
       try {
         setIsUpdatingReview(true);
@@ -32743,7 +33259,7 @@ function useReviewThreadState({
     },
     [dataSource, onReviewUpdated]
   );
-  const deleteReview = React25.useCallback(
+  const deleteReview = React26.useCallback(
     async (review) => {
       try {
         setIsDeletingReview(true);
@@ -32756,7 +33272,7 @@ function useReviewThreadState({
     },
     [dataSource, onReviewDeleted, removeReviewById]
   );
-  const createReviewReply = React25.useCallback(
+  const createReviewReply = React26.useCallback(
     async (input) => {
       if (!dataSource.createReviewReply) {
         throw new Error("createReviewReply is not implemented by dataSource.");
@@ -32779,7 +33295,7 @@ function useReviewThreadState({
     },
     [applyReview, applyReviewUpdater, config.maxRepliesPerReview, dataSource]
   );
-  const updateReviewReply2 = React25.useCallback(
+  const updateReviewReply2 = React26.useCallback(
     async (input) => {
       if (!dataSource.updateReviewReply) {
         throw new Error("updateReviewReply is not implemented by dataSource.");
@@ -32802,7 +33318,7 @@ function useReviewThreadState({
     },
     [applyReview, applyReviewUpdater, dataSource]
   );
-  const deleteReviewReply = React25.useCallback(
+  const deleteReviewReply = React26.useCallback(
     async (reviewId, replyId) => {
       if (!dataSource.deleteReviewReply) {
         throw new Error("deleteReviewReply is not implemented by dataSource.");
@@ -32825,7 +33341,7 @@ function useReviewThreadState({
     },
     [applyReview, applyReviewUpdater, dataSource]
   );
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     let cancelled = false;
     async function run() {
       try {
@@ -32852,7 +33368,7 @@ function useReviewThreadState({
       cancelled = true;
     };
   }, [config.reviewsPerPage, dataSource, targetId]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     let cancelled = false;
     async function run() {
       if (!dataSource.getMyReview || !shouldLoadMyReview) {
@@ -32884,19 +33400,19 @@ function useReviewThreadState({
       cancelled = true;
     };
   }, [dataSource, shouldLoadMyReview, targetId]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!updatedReview) {
       return;
     }
     applyReview(updatedReview);
   }, [applyReview, updatedReview]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!deletedReview) {
       return;
     }
     removeReviewById(deletedReview.id);
   }, [deletedReview, removeReviewById]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!updatedReviewReply) {
       return;
     }
@@ -32923,7 +33439,7 @@ function useReviewThreadState({
     config.maxRepliesPerReview,
     updatedReviewReply
   ]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!deletedReviewReply) {
       return;
     }
@@ -33048,7 +33564,7 @@ function ReviewThread({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-red-600/80 dark:text-red-300/80", children: "Something went wrong while loading the review thread." })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button_default,
+        Button_web_default,
         {
           text: "Retry",
           variant: "danger",
@@ -33095,7 +33611,7 @@ function ReviewThread({
   ] });
 }
 var ReviewThread_default = ReviewThread;
-var MarkdownContext = React25.createContext(null);
+var MarkdownContext = React26.createContext(null);
 
 // src/compositions/markdown/utils/sanitizeHeading.ts
 function sanitizeHeading(text10, options = {}) {
@@ -33316,30 +33832,30 @@ function MarkdownProvider({
   onActiveHeadingChange
 }) {
   const resolvedMarkdown = value ?? markdown ?? "";
-  const [internalActiveHeading, setInternalActiveHeading] = React25.useState(defaultActiveHeading);
-  const headings = React25.useMemo(() => {
+  const [internalActiveHeading, setInternalActiveHeading] = React26.useState(defaultActiveHeading);
+  const headings = React26.useMemo(() => {
     if (externalHeadings) {
       return externalHeadings;
     }
     return extractHeadings(resolvedMarkdown);
   }, [externalHeadings, resolvedMarkdown]);
-  const numberedHeadings = React25.useMemo(() => {
+  const numberedHeadings = React26.useMemo(() => {
     return generateHeadingNumbers(headings);
   }, [headings]);
-  const headingMap = React25.useMemo(() => {
+  const headingMap = React26.useMemo(() => {
     return headings.reduce((acc, heading3) => {
       acc[heading3.id] = heading3;
       return acc;
     }, {});
   }, [headings]);
   const activeHeading = controlledActiveHeading ?? internalActiveHeading;
-  const getHeadingById = React25.useCallback(
+  const getHeadingById = React26.useCallback(
     (id2) => {
       return headingMap[id2];
     },
     [headingMap]
   );
-  const setActiveHeading = React25.useCallback(
+  const setActiveHeading = React26.useCallback(
     (id2) => {
       if (controlledActiveHeading === void 0) {
         setInternalActiveHeading(id2);
@@ -33348,7 +33864,7 @@ function MarkdownProvider({
     },
     [controlledActiveHeading, headingMap, onActiveHeadingChange]
   );
-  const contextValue = React25.useMemo(
+  const contextValue = React26.useMemo(
     () => ({
       markdown: resolvedMarkdown,
       headings,
@@ -33373,7 +33889,7 @@ function MarkdownProvider({
 var MarkdownProvider_default = MarkdownProvider;
 function useMarkdown(options = {}) {
   const { required = false, errorMessage } = options;
-  const context = React25.useContext(MarkdownContext);
+  const context = React26.useContext(MarkdownContext);
   if (!context && required) {
     throw new Error(
       errorMessage || "useMarkdown must be used inside a MarkdownProvider."
@@ -33396,15 +33912,15 @@ function useActiveHeading(options = {}) {
     onActiveHeadingChange
   } = options;
   const headings = externalHeadings ?? context?.headings ?? [];
-  const [internalActiveHeading, setInternalActiveHeading] = React25.useState(defaultActiveHeading);
+  const [internalActiveHeading, setInternalActiveHeading] = React26.useState(defaultActiveHeading);
   const activeHeading = controlledActiveHeading ?? context?.activeHeading ?? internalActiveHeading;
-  const headingMap = React25.useMemo(() => {
+  const headingMap = React26.useMemo(() => {
     return headings.reduce((acc, heading3) => {
       acc[heading3.id] = heading3;
       return acc;
     }, {});
   }, [headings]);
-  const setActiveHeading = React25.useCallback(
+  const setActiveHeading = React26.useCallback(
     (id2) => {
       if (controlledActiveHeading === void 0 && !context) {
         setInternalActiveHeading(id2);
@@ -33414,7 +33930,7 @@ function useActiveHeading(options = {}) {
     },
     [context, controlledActiveHeading, headingMap, onActiveHeadingChange]
   );
-  const scrollToHeading = React25.useCallback(
+  const scrollToHeading = React26.useCallback(
     (id2) => {
       if (typeof document === "undefined") return;
       const element7 = document.getElementById(id2);
@@ -33427,10 +33943,10 @@ function useActiveHeading(options = {}) {
     },
     [scrollBehavior, scrollBlock, setActiveHeading]
   );
-  const observedHeadingIds = React25.useMemo(() => {
+  const observedHeadingIds = React26.useMemo(() => {
     return headings.map((heading3) => heading3.id).join("|");
   }, [headings]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!enabled) return;
     if (typeof window === "undefined") return;
     if (!("IntersectionObserver" in window)) return;
@@ -33479,7 +33995,7 @@ function useMarkdownHeadings(options = {}) {
     minDepth = 1,
     maxDepth = 6
   } = options;
-  const baseHeadings = React25.useMemo(() => {
+  const baseHeadings = React26.useMemo(() => {
     if (externalHeadings) {
       return externalHeadings;
     }
@@ -33488,15 +34004,15 @@ function useMarkdownHeadings(options = {}) {
     }
     return context?.headings ?? [];
   }, [context?.headings, externalHeadings, markdown]);
-  const headings = React25.useMemo(() => {
+  const headings = React26.useMemo(() => {
     return baseHeadings.filter((heading3) => {
       return heading3.level >= minDepth && heading3.level <= maxDepth;
     });
   }, [baseHeadings, minDepth, maxDepth]);
-  const numberedHeadings = React25.useMemo(() => {
+  const numberedHeadings = React26.useMemo(() => {
     return generateHeadingNumbers(headings);
   }, [headings]);
-  const headingMap = React25.useMemo(() => {
+  const headingMap = React26.useMemo(() => {
     return headings.reduce((acc, heading3) => {
       acc[heading3.id] = heading3;
       return acc;
@@ -33888,11 +34404,11 @@ function addChildren(props, children3) {
     }
   }
 }
-function productionCreate(_2, jsx255, jsxs128) {
+function productionCreate(_2, jsx257, jsxs129) {
   return create3;
   function create3(_3, type2, props, key) {
     const isStaticChildren = Array.isArray(props.children);
-    const fn = isStaticChildren ? jsxs128 : jsx255;
+    const fn = isStaticChildren ? jsxs129 : jsx257;
     return key ? fn(type2, props, key) : fn(type2, props);
   }
 }
@@ -42282,7 +42798,7 @@ function markdownTable(table2, options) {
   let rowIndex = -1;
   while (++rowIndex < table2.length) {
     const row2 = [];
-    const sizes6 = [];
+    const sizes5 = [];
     let columnIndex2 = -1;
     if (table2[rowIndex].length > mostCellsPerRow) {
       mostCellsPerRow = table2[rowIndex].length;
@@ -42291,7 +42807,7 @@ function markdownTable(table2, options) {
       const cell = serialize2(table2[rowIndex][columnIndex2]);
       if (settings.alignDelimiters !== false) {
         const size = stringLength(cell);
-        sizes6[columnIndex2] = size;
+        sizes5[columnIndex2] = size;
         if (longestCellByColumn[columnIndex2] === void 0 || size > longestCellByColumn[columnIndex2]) {
           longestCellByColumn[columnIndex2] = size;
         }
@@ -42299,7 +42815,7 @@ function markdownTable(table2, options) {
       row2.push(cell);
     }
     cellMatrix[rowIndex] = row2;
-    sizeMatrix[rowIndex] = sizes6;
+    sizeMatrix[rowIndex] = sizes5;
   }
   let columnIndex = -1;
   if (typeof align === "object" && "length" in align) {
@@ -42314,7 +42830,7 @@ function markdownTable(table2, options) {
   }
   columnIndex = -1;
   const row = [];
-  const sizes5 = [];
+  const sizes4 = [];
   while (++columnIndex < mostCellsPerRow) {
     const code4 = alignments[columnIndex];
     let before = "";
@@ -42337,17 +42853,17 @@ function markdownTable(table2, options) {
       if (size > longestCellByColumn[columnIndex]) {
         longestCellByColumn[columnIndex] = size;
       }
-      sizes5[columnIndex] = size;
+      sizes4[columnIndex] = size;
     }
     row[columnIndex] = cell;
   }
   cellMatrix.splice(1, 0, row);
-  sizeMatrix.splice(1, 0, sizes5);
+  sizeMatrix.splice(1, 0, sizes4);
   rowIndex = -1;
   const lines = [];
   while (++rowIndex < cellMatrix.length) {
     const row2 = cellMatrix[rowIndex];
-    const sizes6 = sizeMatrix[rowIndex];
+    const sizes5 = sizeMatrix[rowIndex];
     columnIndex = -1;
     const line = [];
     while (++columnIndex < mostCellsPerRow) {
@@ -42355,7 +42871,7 @@ function markdownTable(table2, options) {
       let before = "";
       let after = "";
       if (settings.alignDelimiters !== false) {
-        const size = longestCellByColumn[columnIndex] - (sizes6[columnIndex] || 0);
+        const size = longestCellByColumn[columnIndex] - (sizes5[columnIndex] || 0);
         const code4 = alignments[columnIndex];
         if (code4 === 114) {
           before = " ".repeat(size);
@@ -53916,14 +54432,14 @@ function MarkdownHeading({
   const normalizedLevel = Math.min(Math.max(level, 1), 6);
   const TypographyComponent = normalizedLevel <= 3 ? Chapter : Section;
   const typographyLevel = normalizedLevel <= 3 ? normalizedLevel : normalizedLevel - 3;
-  return React25.createElement(
+  return React26.createElement(
     TypographyComponent,
     {
       ...props,
       id: id2,
       level: typographyLevel,
       bold: true,
-      className: classNames77__default.default(
+      className: classNames74__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
@@ -54086,18 +54602,18 @@ function powerSetPermutations(arr) {
   }
 }
 var classNameCombinations = {};
-function getClassNameCombinations(classNames81) {
-  if (classNames81.length === 0 || classNames81.length === 1) return classNames81;
-  var key = classNames81.join(".");
+function getClassNameCombinations(classNames78) {
+  if (classNames78.length === 0 || classNames78.length === 1) return classNames78;
+  var key = classNames78.join(".");
   if (!classNameCombinations[key]) {
-    classNameCombinations[key] = powerSetPermutations(classNames81);
+    classNameCombinations[key] = powerSetPermutations(classNames78);
   }
   return classNameCombinations[key];
 }
-function createStyleObject(classNames81) {
+function createStyleObject(classNames78) {
   var elementStyle = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   var stylesheet = arguments.length > 2 ? arguments[2] : void 0;
-  var nonTokenClassNames = classNames81.filter(function(className) {
+  var nonTokenClassNames = classNames78.filter(function(className) {
     return className !== "token";
   });
   var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
@@ -54105,8 +54621,8 @@ function createStyleObject(classNames81) {
     return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
   }, elementStyle);
 }
-function createClassNameString(classNames81) {
-  return classNames81.join(" ");
+function createClassNameString(classNames78) {
+  return classNames78.join(" ");
 }
 function createChildren2(stylesheet, useInlineStyles) {
   var childrenCount = 0;
@@ -54151,7 +54667,7 @@ function createElement2(_ref) {
       });
     }
     var children3 = childrenCreator(node2.children);
-    return /* @__PURE__ */ React25__default.default.createElement(TagName, _extends({
+    return /* @__PURE__ */ React26__default.default.createElement(TagName, _extends({
       key
     }, props), children3);
   }
@@ -54194,7 +54710,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__ */ React25__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
@@ -54206,7 +54722,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__ */ React25__default.default.createElement("code", {
+  return /* @__PURE__ */ React26__default.default.createElement("code", {
     style: Object.assign({}, codeStyle, containerStyle)
   }, getAllLineNumbers({
     lines: codeString.replace(/\n$/, "").split("\n"),
@@ -54279,8 +54795,8 @@ function flattenCodeTree(tree) {
       }));
     } else if (node2.children) {
       var _node$properties;
-      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) {
+      var classNames78 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
+      flattenCodeTree(node2.children, classNames78).forEach(function(i2) {
         return newTree.push(i2);
       });
     }
@@ -54427,7 +54943,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 = _objectWithoutProperties(_ref7, _excluded);
     astGenerator = astGenerator || defaultAstGenerator;
-    var allLineNumbers = showLineNumbers ? /* @__PURE__ */ React25__default.default.createElement(AllLineNumbers, {
+    var allLineNumbers = showLineNumbers ? /* @__PURE__ */ React26__default.default.createElement(AllLineNumbers, {
       containerStyle: lineNumberContainerStyle,
       codeStyle: codeTagProps.style || {},
       numberStyle: lineNumberStyle,
@@ -54454,7 +54970,7 @@ function highlight_default(defaultAstGenerator, defaultStyle) {
       }, codeTagProps.style);
     }
     if (!astGenerator) {
-      return /* @__PURE__ */ React25__default.default.createElement(PreTag, preProps, allLineNumbers, /* @__PURE__ */ React25__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;
@@ -54474,7 +54990,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__ */ React25__default.default.createElement(PreTag, preProps, /* @__PURE__ */ React25__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
@@ -54811,7 +55327,7 @@ var json_default = json;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js
 init_jsx();
-var jsx_default = jsx216;
+var jsx_default = jsx218;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/markup.js
 init_markup();
@@ -54902,19 +55418,19 @@ function MarkdownCodeBlock({
   wrapLongLines = false,
   ...props
 }) {
-  const [copied, setCopied] = React25.useState(false);
-  const timeoutRef = React25.useRef(null);
+  const [copied, setCopied] = React26.useState(false);
+  const timeoutRef = React26.useRef(null);
   const title = meta?.title ?? meta?.filename;
-  const resolvedLanguage = React25.useMemo(() => {
+  const resolvedLanguage = React26.useMemo(() => {
     return normalizeLanguage(language);
   }, [language]);
   const languageLabel = language || resolvedLanguage;
   const showHeader = Boolean(title || languageLabel || showCopy);
-  const highlightLines = React25.useMemo(() => {
+  const highlightLines = React26.useMemo(() => {
     return new Set(meta?.highlightLines ?? []);
   }, [meta?.highlightLines]);
   const showLineNumbers = Boolean(meta?.showLineNumbers);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     return () => {
       if (timeoutRef.current) {
         window.clearTimeout(timeoutRef.current);
@@ -54944,7 +55460,7 @@ function MarkdownCodeBlock({
     "div",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
         className
       ),
@@ -55015,7 +55531,7 @@ function MarkdownInlineCode({
     Code,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__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
       ),
@@ -55056,7 +55572,7 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames77__default.default(
+      className: classNames74__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
       ),
@@ -55091,7 +55607,7 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
         className
       )
@@ -55108,7 +55624,7 @@ function MarkdownTable({
     TableElement,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-table w-full border-collapse text-[0.925rem]",
         className
       ),
@@ -55125,7 +55641,7 @@ function MarkdownTableCell({
     TableCell,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__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
       ),
@@ -55142,7 +55658,7 @@ function MarkdownTableHeaderCell({
     TableHeaderCell,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__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
       ),
@@ -55158,7 +55674,7 @@ function MarkdownTableHead({
     TableHead,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
         className
       )
@@ -55173,7 +55689,7 @@ function MarkdownTableBody({
     TableBody,
     {
       ...props,
-      className: classNames77__default.default("eui-markdown-table-body", className)
+      className: classNames74__default.default("eui-markdown-table-body", className)
     }
   );
 }
@@ -55185,7 +55701,7 @@ function MarkdownTableRow({
     TableRow,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
         className
       )
@@ -55203,7 +55719,7 @@ function MarkdownBlockquote({
     {
       ...props,
       as: "blockquote",
-      className: classNames77__default.default(
+      className: classNames74__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
       ),
@@ -55222,7 +55738,7 @@ function MarkdownParagraph({
     {
       ...props,
       level: 1,
-      className: classNames77__default.default("eui-markdown-paragraph my-4", className),
+      className: classNames74__default.default("eui-markdown-paragraph my-4", className),
       children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children3 })
     }
   );
@@ -55233,7 +55749,7 @@ function MarkdownStrong({ className, ...props }) {
     "strong",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55246,7 +55762,7 @@ function MarkdownEmphasis({ className, ...props }) {
     "em",
     {
       ...props,
-      className: classNames77__default.default("eui-markdown-emphasis italic", className)
+      className: classNames74__default.default("eui-markdown-emphasis italic", className)
     }
   );
 }
@@ -55259,7 +55775,7 @@ function MarkdownStrikethrough({
     "del",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
         className
       )
@@ -55320,7 +55836,7 @@ function MarkdownTaskCheckbox({
     "input",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
         className
       )
@@ -55336,7 +55852,7 @@ function MarkdownThematicBreak({
     "hr",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
         className
       )
@@ -55353,7 +55869,7 @@ function MarkdownDetails({ className, ...props }) {
     "details",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__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
       )
@@ -55365,7 +55881,7 @@ function MarkdownSummary({ className, ...props }) {
     "summary",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55377,7 +55893,7 @@ function MarkdownFigure({ className, ...props }) {
     "figure",
     {
       ...props,
-      className: classNames77__default.default("eui-markdown-figure my-6", className)
+      className: classNames74__default.default("eui-markdown-figure my-6", className)
     }
   );
 }
@@ -55389,7 +55905,7 @@ function MarkdownFigcaption({
   return /* @__PURE__ */ jsxRuntime.jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
     Caption,
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "text-gray-500 opacity-100 dark:text-gray-400",
         className
       ),
@@ -55404,7 +55920,7 @@ function getTextContent(node2) {
   if (Array.isArray(node2)) {
     return node2.map(getTextContent).join("");
   }
-  if (React25.isValidElement(node2)) {
+  if (React26.isValidElement(node2)) {
     return getTextContent(node2.props.children);
   }
   return "";
@@ -55788,14 +56304,14 @@ function MarkdownRenderer({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__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(
+          className: classNames74__default.default(
             "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
             contentClassName
           ),
@@ -55824,7 +56340,7 @@ function MarkdownViewer({
 }) {
   const context = useMarkdown();
   const markdown = value ?? context?.markdown ?? "";
-  const headings = React25.useMemo(() => {
+  const headings = React26.useMemo(() => {
     if (externalHeadings) {
       return externalHeadings;
     }
@@ -55873,11 +56389,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-toc-item",
         "block w-full text-left text-sm transition-all ease-in-out duration-150",
         "hover:text-primary",
-        active ? classNames77__default.default("text-primary font-semibold underline", activeClassName) : classNames77__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
+        active ? classNames74__default.default("text-primary font-semibold underline", activeClassName) : classNames74__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -55916,14 +56432,14 @@ function MarkdownTOC({
   onHeadingClick
 }) {
   const context = useMarkdown();
-  const [collapsed, setCollapsed] = React25.useState(defaultCollapsed);
+  const [collapsed, setCollapsed] = React26.useState(defaultCollapsed);
   const { headings, numberedHeadings, hasHeadings } = useMarkdownHeadings({
     markdown,
     headings: externalHeadings,
     minDepth,
     maxDepth
   });
-  const tocHeadings = React25.useMemo(() => {
+  const tocHeadings = React26.useMemo(() => {
     return numbered ? numberedHeadings : headings;
   }, [headings, numbered, numberedHeadings]);
   const { activeHeading, scrollToHeading, setActiveHeading } = useActiveHeading(
@@ -55943,7 +56459,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -55963,7 +56479,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -55976,7 +56492,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: classNames77__default.default(
+              className: classNames74__default.default(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -55989,7 +56505,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -56001,7 +56517,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
       "nav",
       {
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -56025,7 +56541,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames77__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames74__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -56124,7 +56640,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__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",
@@ -56138,7 +56654,7 @@ function MarkdownToolbar({
             disabled: disabled || actionsDisabled,
             title: action.shortcut ? `${action.title || action.label} (${action.shortcut})` : action.title || action.label,
             onClick: () => onAction?.(action.id),
-            className: classNames77__default.default(
+            className: classNames74__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",
@@ -56158,7 +56674,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames77__default.default(
+            className: classNames74__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",
@@ -56344,20 +56860,20 @@ function MarkdownSourceEditor({
   onKeyDown,
   ...props
 }) {
-  const textareaRef = React25.useRef(null);
+  const textareaRef = React26.useRef(null);
   const isControlled = value !== void 0;
   const isViewModeControlled = viewMode !== void 0;
-  const [internalValue, setInternalValue] = React25.useState(defaultValue);
-  const [internalViewMode, setInternalViewMode] = React25.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 ?? "";
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isControlled) {
       setInternalValue(defaultValue);
     }
   }, [defaultValue, isControlled]);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isViewModeControlled) {
       setInternalViewMode(defaultViewMode);
     }
@@ -56415,7 +56931,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56431,7 +56947,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames77__default.default(toolbarClassName, toolbarProps?.className),
+            className: classNames74__default.default(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -56439,7 +56955,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -56462,7 +56978,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames77__default.default(
+            className: classNames74__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",
@@ -56492,7 +57008,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56525,9 +57041,9 @@ function MarkdownSplitEditor({
   ...sourceEditorProps
 }) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React25.useState(defaultValue);
+  const [internalValue, setInternalValue] = React26.useState(defaultValue);
   const currentValue = isControlled ? value : internalValue;
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isControlled) {
       setInternalValue(defaultValue);
     }
@@ -56542,7 +57058,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -56552,7 +57068,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -56576,7 +57092,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -56606,9 +57122,9 @@ function MarkdownEditor({
   ...sourceEditorProps
 }) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React25.useState(defaultValue);
+  const [internalValue, setInternalValue] = React26.useState(defaultValue);
   const currentValue = isControlled ? value : internalValue;
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isControlled) {
       setInternalValue(defaultValue);
     }
@@ -56666,7 +57182,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -56676,7 +57192,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -56701,14 +57217,14 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
             children: helperText
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(InputResponse_default, { name: field.name, visibility: hasError, variant: "danger" })
+        /* @__PURE__ */ jsxRuntime.jsx(InputResponse, { name: field.name, visibility: hasError, variant: "danger" })
       ]
     }
   );
@@ -56738,9 +57254,9 @@ function CodeMirrorMarkdownEditor({
   extensions
 }) {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React25.useState(defaultValue);
+  const [internalValue, setInternalValue] = React26.useState(defaultValue);
   const currentValue = isControlled ? value : internalValue;
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!isControlled) {
       setInternalValue(defaultValue);
     }
@@ -56756,7 +57272,7 @@ function CodeMirrorMarkdownEditor({
     {
       id: id2,
       "data-name": name2,
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-adapter",
         "eui-markdown-codemirror-adapter",
         "overflow-hidden rounded border border-gray-300 bg-white",
@@ -56790,7 +57306,7 @@ function CodeMirrorMarkdownEditor({
             closeBrackets: true,
             bracketMatching: true
           },
-          className: classNames77__default.default("eui-markdown-codemirror", editorClassName),
+          className: classNames74__default.default("eui-markdown-codemirror", editorClassName),
           onChange: updateValue,
           onBlur
         }
@@ -56885,7 +57401,7 @@ function createDefaultPlugins({
     ...showToolbar ? [
       editor.toolbarPlugin({
         toolbarContents: toolbarContents ?? DefaultToolbar,
-        toolbarClassName: classNames77__default.default(
+        toolbarClassName: classNames74__default.default(
           "eui-markdown-mdx-toolbar",
           toolbarClassName
         ),
@@ -56894,7 +57410,7 @@ function createDefaultPlugins({
     ] : []
   ];
 }
-var MDXMarkdownEditor = React25.forwardRef(
+var MDXMarkdownEditor = React26.forwardRef(
   function MDXMarkdownEditor2({
     value,
     defaultValue = "",
@@ -56925,11 +57441,11 @@ var MDXMarkdownEditor = React25.forwardRef(
     linkDialogOptions,
     ...props
   }, forwardedRef) {
-    const editorRef = React25.useRef(null);
+    const editorRef = React26.useRef(null);
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React25.useState(defaultValue);
+    const [internalValue, setInternalValue] = React26.useState(defaultValue);
     const currentValue = isControlled ? value : internalValue;
-    const defaultPlugins = React25.useMemo(
+    const defaultPlugins = React26.useMemo(
       () => createDefaultPlugins({
         showToolbar,
         toolbarPosition,
@@ -56951,7 +57467,7 @@ var MDXMarkdownEditor = React25.forwardRef(
         toolbarPosition
       ]
     );
-    React25.useImperativeHandle(
+    React26.useImperativeHandle(
       forwardedRef,
       () => ({
         focus: (callbackFn, options) => editorRef.current?.focus(callbackFn, options),
@@ -56963,7 +57479,7 @@ var MDXMarkdownEditor = React25.forwardRef(
       }),
       [currentValue]
     );
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       if (!isControlled || !editorRef.current) return;
       const nextValue = value ?? "";
       if (editorRef.current.getMarkdown() !== nextValue) {
@@ -57002,7 +57518,7 @@ var MDXMarkdownEditor = React25.forwardRef(
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
         onBlurCapture: handleBlur,
-        className: classNames77__default.default(
+        className: classNames74__default.default(
           "eui-markdown-adapter",
           "eui-markdown-mdx-adapter",
           dark && ["dark", "dark-theme"],
@@ -57020,8 +57536,8 @@ var MDXMarkdownEditor = React25.forwardRef(
             markdown: currentValue ?? "",
             readOnly: disabled || readOnly,
             plugins: plugins ?? defaultPlugins,
-            className: classNames77__default.default("eui-markdown-mdx-editor", editorClassName),
-            contentEditableClassName: classNames77__default.default(
+            className: classNames74__default.default("eui-markdown-mdx-editor", editorClassName),
+            contentEditableClassName: classNames74__default.default(
               "eui-markdown-mdx-content",
               contentEditableClassName
             ),
@@ -57045,7 +57561,7 @@ function MDXMarkdownField({
   helperTextClassName,
   ...editorProps
 }) {
-  const editorRef = React25.useRef(null);
+  const editorRef = React26.useRef(null);
   const [field, meta, helpers] = formik.useField({
     name: name2,
     validate
@@ -57058,7 +57574,7 @@ function MDXMarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-mdx-field",
         "relative space-y-2",
         wrapperClassName
@@ -57068,7 +57584,7 @@ function MDXMarkdownField({
           "label",
           {
             htmlFor: editorId,
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57102,7 +57618,7 @@ function MDXMarkdownField({
           "p",
           {
             id: helperId,
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57110,7 +57626,7 @@ function MDXMarkdownField({
           }
         ) : null,
         /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, role: hasError ? "alert" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-          InputResponse_default,
+          InputResponse,
           {
             name: field.name,
             visibility: hasError,
@@ -57162,10 +57678,10 @@ function MarkdownLayout({
   };
   const hasLeftToc = hasToc && tocPosition === "left";
   const hasRightToc = hasToc && tocPosition === "right";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames77__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames74__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -57177,7 +57693,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsxRuntime.jsx(
           "header",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -57188,7 +57704,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -57201,7 +57717,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames77__default.default(
+                  className: classNames74__default.default(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -57214,7 +57730,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames77__default.default(
+                  className: classNames74__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57227,7 +57743,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "main",
                 {
-                  className: classNames77__default.default(
+                  className: classNames74__default.default(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -57238,7 +57754,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames77__default.default(
+                  className: classNames74__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57251,7 +57767,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames77__default.default(
+                  className: classNames74__default.default(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -57267,7 +57783,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsxRuntime.jsx(
           "footer",
           {
-            className: classNames77__default.default(
+            className: classNames74__default.default(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -57304,7 +57820,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames74__default.default(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -57315,7 +57831,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
-              className: classNames77__default.default(
+              className: classNames74__default.default(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -57327,7 +57843,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: classNames77__default.default(
+              className: classNames74__default.default(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -57415,7 +57931,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         [`${styles}`]: styles
       }),
       children: children3
@@ -57452,7 +57968,7 @@ function SidebarLayout({
   header = /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
   footer: footer2 = /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
 }) {
-  const [showSidebar, setShowSidebar] = React25.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
@@ -57464,7 +57980,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames74__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -57477,11 +57993,32 @@ function SidemenuLayout({ data, children: children3 }) {
   ) });
 }
 var SidemenuLayout_default = SidemenuLayout;
+var EUIDevPreviewPlatformContext = React26.createContext({
+  platform: "web",
+  setPlatform: () => void 0
+});
+var useEUIDevPreviewPlatform = () => React26.useContext(EUIDevPreviewPlatformContext);
 function EUIDevLayout({
   children: children3,
-  header = /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
+  header,
   footer: footer2 = /* @__PURE__ */ jsxRuntime.jsx(Footer, {})
 }) {
+  const [platform, setPlatform] = React26.useState("web");
+  const previewPlatform = React26.useMemo(
+    () => ({
+      platform,
+      setPlatform
+    }),
+    [platform]
+  );
+  const resolvedHeader = header ?? /* @__PURE__ */ jsxRuntime.jsx(
+    Header,
+    {
+      onPreviewPlatformChange: setPlatform,
+      previewPlatform: platform,
+      showPreviewPlatformSelector: true
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     EUIProvider,
     {
@@ -57493,8 +58030,8 @@ function EUIDevLayout({
         }
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(GenericLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(Layout, { children: [
-        header,
-        /* @__PURE__ */ jsxRuntime.jsx(Content, { styles: "pt-[60px]", children: /* @__PURE__ */ jsxRuntime.jsx(ContentArea_default, { enablePadding: true, children: children3 }) }),
+        resolvedHeader,
+        /* @__PURE__ */ jsxRuntime.jsx(EUIDevPreviewPlatformContext.Provider, { value: previewPlatform, children: /* @__PURE__ */ jsxRuntime.jsx(Content, { styles: "pt-[60px]", children: /* @__PURE__ */ jsxRuntime.jsx(ContentArea_default, { enablePadding: true, children: children3 }) }) }),
         footer2
       ] }) })
     }
@@ -57506,7 +58043,7 @@ function ScrollToTop({
   behavior = "smooth",
   target
 }) {
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (target) {
       target.scrollTo({
         top: 0,
@@ -57540,7 +58077,7 @@ exports.BoxNavItem = BoxNavItem_default;
 exports.Brand = Brand;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem_default;
-exports.Button = Button_default;
+exports.Button = Button_web_default;
 exports.CHART_COLOR_PALETTE = CHART_COLOR_PALETTE;
 exports.CHART_DARK_THEME = CHART_DARK_THEME;
 exports.CHART_DATA_MODES = CHART_DATA_MODES;
@@ -57579,7 +58116,7 @@ exports.ChartPlotFrame = ChartPlotFrame;
 exports.ChartProvider = ChartProvider;
 exports.ChartToolbar = ChartToolbar;
 exports.ChartTooltip = ChartTooltip;
-exports.Checkbox = Checkbox_default;
+exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CloudinaryImage = CloudinaryImage2;
 exports.CloudinaryProvider = CloudinaryProvider;
@@ -57654,10 +58191,10 @@ exports.InfiniteScrollTrigger = InfiniteScrollTrigger_default;
 exports.Info = Info;
 exports.Input = Input;
 exports.InputFile = InputFile;
-exports.InputLabel = InputLabel_default;
+exports.InputLabel = InputLabel;
 exports.InputList = InputList;
 exports.InputListGroup = InputListGroup;
-exports.InputResponse = InputResponse_default;
+exports.InputResponse = InputResponse;
 exports.Label = Label;
 exports.Layout = Layout;
 exports.Lead = Lead;
@@ -57721,6 +58258,7 @@ exports.Overline = Overline;
 exports.Paragraph = Paragraph;
 exports.PiePlot = PiePlot;
 exports.PollingChartDataSource = PollingChartDataSource;
+exports.PreviewSwitch = PreviewSwitch;
 exports.PriceTag = PriceTag;
 exports.ProgressBar = ProgressBar;
 exports.ProgressBarRating = ProgressBarRating;
@@ -57765,6 +58303,7 @@ exports.Tags = Tags_default;
 exports.TextArea = TextArea_default;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
+exports.ThemeSelect = ThemeSelect;
 exports.ThemeSwitch = ThemeSwitch;
 exports.TitleBanner = TitleBanner;
 exports.Toast = Toast;
@@ -57831,8 +58370,10 @@ exports.getBrowserOrigin = getBrowserOrigin;
 exports.getBrowserRedirectURL = getBrowserRedirectURL;
 exports.getConsentStatusFromCategories = getConsentStatusFromCategories;
 exports.getCurrencySymbol = getCurrencySymbol;
+exports.getCurrentFullUrl = getCurrentFullUrl;
 exports.getCurrentPath = getCurrentPath;
 exports.getCurrentReferrer = getCurrentReferrer;
+exports.getCurrentTitle = getCurrentTitle;
 exports.getDeviceInfo = getDeviceInfo;
 exports.getDoNotTrackEnabled = getDoNotTrackEnabled;
 exports.getLayout = getLayout;
@@ -57899,6 +58440,7 @@ exports.useCookieConsent = useCookieConsent;
 exports.useCurrentTheme = useCurrentTheme_default;
 exports.useDrawer = useDrawer_default;
 exports.useEUIConfig = useEUIConfig;
+exports.useEUIDevPreviewPlatform = useEUIDevPreviewPlatform;
 exports.useIsMobile = useIsMobile_default;
 exports.useMarkdown = useMarkdown;
 exports.useMarkdownHeadings = useMarkdownHeadings;