elseware-ui 2.40.4 → 3.0.1

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import React25, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useRef, useMemo, useCallback, useContext, Children, useId, createElement, isValidElement } from 'react';
+import React26, { createContext, forwardRef, useState, useImperativeHandle, useEffect, useRef, useMemo, useCallback, useContext, Children, useId, createElement, isValidElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { twMerge } from 'tailwind-merge';
 import { AiOutlineLoading } from 'react-icons/ai/index.js';
 import { useField, ErrorMessage, Field, useFormikContext, FieldArray, Formik, Form as Form$1 } from 'formik';
-import classNames77 from 'classnames';
 import { FaGripVertical, FaTrash, FaPlus, FaTimes, FaBars, FaSun, FaMoon, FaEyeSlash, FaEye, FaCircle } from 'react-icons/fa/index.js';
+import classNames74 from 'classnames';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { Image, CloudinaryContext as CloudinaryContext$1 } from 'cloudinary-react';
 import { MdUpload, MdOutlineDone, MdOutlineRemoveCircleOutline } from 'react-icons/md/index.js';
@@ -4718,7 +4718,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) {
@@ -4851,14 +4851,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);
@@ -5020,7 +5020,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,
@@ -5100,10 +5100,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"
@@ -5125,12 +5133,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
@@ -6033,6 +6048,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";
@@ -6045,14 +6085,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",
@@ -6138,17 +6178,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",
@@ -6208,7 +6237,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",
@@ -6223,27 +6276,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 = 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 = 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;
@@ -6251,6 +6333,12 @@ function Button({
     btn.style.setProperty("--glow-y", `${y3}px`);
     onMouseMove?.(e);
   };
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (!e.defaultPrevented) {
+      onPress?.();
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -6258,47 +6346,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__ */ jsx(
+        glow && /* @__PURE__ */ 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__ */ jsx(AiOutlineLoading, { className: "animate-spin z-10" }),
-        icon && /* @__PURE__ */ jsx("span", { className: "z-10", children: icon }),
-        text10 && /* @__PURE__ */ jsx("span", { className: "z-10", children: text10 }),
-        children3 && /* @__PURE__ */ jsx("span", { className: "z-10", children: children3 })
+        resolvedIcon && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "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
       }),
@@ -6883,12 +7038,12 @@ function renderTransitionChild(children3, className) {
     return /* @__PURE__ */ jsx("div", { className, children: children3 });
   }
   const child = Children.only(children3);
-  if (!React25.isValidElement(child)) {
+  if (!React26.isValidElement(child)) {
     return /* @__PURE__ */ jsx("div", { className, children: child });
   }
   const element7 = child;
-  return React25.cloneElement(element7, {
-    className: classNames77(element7.props.className, className)
+  return React26.cloneElement(element7, {
+    className: classNames74(element7.props.className, className)
   });
 }
 function TransitionBase({
@@ -6908,7 +7063,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames77(
+  const transitionClassName = classNames74(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -7066,114 +7221,188 @@ 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__ */ jsx(Transition.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Transition.TransitionFadeIn, { visibility, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
-        "font-medium text-sm py-1 px-2": true,
-        [`${textVariants[variant]}`]: variant,
-        "transition-all ease-in-out": true,
-        [`${styles}`]: styles
-      }),
-      children: /* @__PURE__ */ jsx(ErrorMessage, { name: name2 })
+      className: cn(
+        inputResponseBaseClassName,
+        inputResponseVariants[variant],
+        className
+      ),
+      children: message ?? /* @__PURE__ */ jsx(ErrorMessage, { name: name2 })
     }
   ) });
 }
-var InputResponse_default = InputResponse;
-function InputLabel({ text: text10, children: children3, styles }) {
-  return /* @__PURE__ */ jsx(
-    "label",
-    {
-      className: classNames77({
-        "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] = 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] = 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__ */ jsx(
     "div",
     {
-      className: "text-eui-dark-200 absolute text-2xl right-3 top-[16px] cursor-pointer",
-      onClick: () => handleOnClick(!passwordVisibility),
-      children: passwordVisibility ? /* @__PURE__ */ jsx(FaEyeSlash, {}) : /* @__PURE__ */ jsx(FaEye, {})
+      className: webPasswordToggleClassName,
+      onClick: () => onToggle(!passwordVisible),
+      children: passwordVisible ? /* @__PURE__ */ jsx(FaEyeSlash, {}) : /* @__PURE__ */ jsx(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] = useField(props);
-  const [passwordVisibility, setPasswordVisibilty] = useState(false);
-  const inputType = type2 === "password" ? toggleType(passwordVisibility) : type2;
-  return /* @__PURE__ */ 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] = useState(false);
+  const [passwordVisible, setPasswordVisible] = 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__ */ jsxs("div", { className: inputRootClassName, children: [
     /* @__PURE__ */ jsx(
       Field,
       {
-        type: inputType,
-        step: inputType === "number" && step ? step : void 0,
-        ...field,
         ...props,
-        placeholder,
-        className: classNames77({
-          "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__ */ 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__ */ jsx(PasswordVisibilityToggler, { onClick: (v) => setPasswordVisibilty(v) }),
+    type2 === "password" ? /* @__PURE__ */ jsx(
+      PasswordVisibilityToggler,
+      {
+        passwordVisible,
+        onToggle: setPasswordVisible
+      }
+    ) : null,
     /* @__PURE__ */ 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 = useRef(null);
@@ -7187,13 +7416,13 @@ var InputFile = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77(
+        className: classNames74(
           "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 || ""
@@ -7210,10 +7439,10 @@ var InputFile = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      InputLabel_default,
+      InputLabel,
       {
         text: placeholder,
-        styles: classNames77({
+        className: classNames74({
           "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
@@ -7221,7 +7450,7 @@ var InputFile = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -7262,11 +7491,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__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsx(InputLabel, { text: placeholder }),
     /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(FieldArray, { name: name2, children: ({ push: push2, remove: remove2, move }) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames77(
+        className: classNames74(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -7295,7 +7524,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames77(
+                          className: classNames74(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -7306,7 +7535,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames77(
+                                className: classNames74(
                                   "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"
@@ -7346,12 +7575,12 @@ var InputList = ({ name: name2, placeholder, shape }) => {
             }
           ),
           /* @__PURE__ */ jsx(
-            InputResponse_default,
+            InputResponse,
             {
               name: name2,
               visibility: hasListError,
               variant: "danger",
-              styles: "pb-2"
+              className: "pb-2"
             }
           )
         ]
@@ -7394,7 +7623,7 @@ var InputListGroup = ({
   const groups = values[name2] ?? [];
   const hasError = Boolean(errors[name2]) && Boolean(touched[name2]) && typeof errors[name2] === "string";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-    /* @__PURE__ */ jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsx(InputLabel, { text: placeholder }),
     /* @__PURE__ */ jsx(FieldArray, { name: name2, children: ({ push: push2, remove: remove2 }) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       groups.map((group, groupIndex) => {
         const itemsFieldName = `${name2}[${groupIndex}].items`;
@@ -7402,7 +7631,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77(
+            className: classNames74(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -7414,7 +7643,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames77(
+                    className: classNames74(
                       "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"
@@ -7445,7 +7674,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames77(
+                      className: classNames74(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -7465,7 +7694,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames77(
+                                  className: classNames74(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -7476,7 +7705,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames77(
+                                        className: classNames74(
                                           "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"
@@ -7535,12 +7764,12 @@ var InputListGroup = ({
         }
       ),
       /* @__PURE__ */ jsx(
-        InputResponse_default,
+        InputResponse,
         {
           name: name2,
           visibility: hasError,
           variant: "danger",
-          styles: "pb-2"
+          className: "pb-2"
         }
       )
     ] }) })
@@ -7549,13 +7778,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] = useField(
     props
@@ -7563,89 +7799,234 @@ function Checkbox({
   const [singleField, singleMeta, singleHelpers] = 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__ */ jsxs("div", { children: [
-    !isMulti && /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-3 items-start", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: cn(checkboxGroupClassName, groupClassName), children: [
+    !isMulti && /* @__PURE__ */ jsxs("div", { className: cn(checkboxOptionRowClassName, optionClassName), children: [
+      /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          Tick,
+          {
+            checked: singleChecked,
+            checkedIconClassName,
+            iconClassName: variantStyles.iconClassName
+          }
+        )
+      ] }),
+      resolvedLabel ? /* @__PURE__ */ 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__ */ jsxs(
         "div",
         {
-          className: "flex flex-row gap-3 items-start my-2",
+          className: cn(checkboxOptionRowClassName, optionClassName),
           children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                id: option.value,
-                type: "checkbox",
-                checked,
-                onChange: () => {
-                  multiHelpers.setValue(
-                    checked ? values.filter((v) => v !== option.value) : [...values, option.value]
-                  );
-                },
-                className: checkboxClass
-              }
-            ),
+            /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+              /* @__PURE__ */ 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__ */ jsx(
+                Tick,
+                {
+                  checked,
+                  checkedIconClassName,
+                  iconClassName: variantStyles.iconClassName
+                }
+              )
+            ] }),
             /* @__PURE__ */ 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
               }
@@ -7656,16 +8037,15 @@ function Checkbox({
       );
     }),
     /* @__PURE__ */ 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,
@@ -7677,10 +8057,10 @@ var DateSelector = ({
   const [field, meta] = useField(props);
   return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ 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__ */ jsx(
@@ -7690,7 +8070,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames77({
+        className: classNames74({
           "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,
@@ -7699,7 +8079,7 @@ var DateSelector = ({
         })
       }
     ),
-    meta.touched && meta.error && /* @__PURE__ */ jsx(InputResponse_default, { name: field.name, visibility: true, variant: "danger" })
+    meta.touched && meta.error && /* @__PURE__ */ jsx(InputResponse, { name: field.name, visibility: true, variant: "danger" })
   ] });
 };
 var DateSelector_default = DateSelector;
@@ -7772,12 +8152,12 @@ var Form = ({
         /* @__PURE__ */ jsx(UnsavedChangesGuard_default, { formik, enabled: warnOnUnsavedChanges }),
         /* @__PURE__ */ jsx(DirtyObserver_default, { formik, onDirtyChange }),
         /* @__PURE__ */ jsx(FormObserver_default, { formik, onChange }),
-        /* @__PURE__ */ jsx("div", { className: classNames77(styles), children: children3 })
+        /* @__PURE__ */ jsx("div", { className: classNames74(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",
@@ -7794,11 +8174,11 @@ function FormResponse({
   return /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: text10 ? true : false, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "font-poppins font-light text-sm": true,
         [`${variantsLite[variant]}`]: variant,
         [`${shapes[shape]}`]: shape,
-        [`${sizes2[size]}`]: size,
+        [`${sizes[size]}`]: size,
         [`${styles}`]: styles
       }),
       children: text10
@@ -7902,7 +8282,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsxs(
             "label",
             {
-              className: classNames77({
+              className: classNames74({
                 "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
@@ -7949,7 +8329,7 @@ var ImageInput = forwardRef(
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(
-        InputResponse_default,
+        InputResponse,
         {
           name: field.name,
           visibility: meta.touched && meta.error ? true : false,
@@ -7994,7 +8374,7 @@ function MultiImageInput({
       ) })
     ] }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8012,14 +8392,14 @@ function Radio({
   const { name: name2 } = props;
   const [field, meta] = useField(props);
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsx(InputLabel, { text: placeholder }),
     /* @__PURE__ */ jsx(Field, { name: name2, children: (formik) => {
       const { field: field2 } = formik;
       return options.map((option) => {
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77({
+            className: classNames74({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -8032,7 +8412,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames77({
+                  className: classNames74({
                     "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
@@ -8044,7 +8424,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames77({
+                  className: classNames74({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -8057,7 +8437,7 @@ function Radio({
       });
     } }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8087,7 +8467,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -8100,7 +8480,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames77({
+            className: classNames74({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -8109,7 +8489,7 @@ function StarRatingInput({
           index3
         )) }),
         /* @__PURE__ */ jsx(
-          InputResponse_default,
+          InputResponse,
           {
             name: field.name,
             visibility: meta.touched && meta.error ? true : false,
@@ -8133,10 +8513,10 @@ function Select({
   const [field, meta] = useField(props);
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ 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__ */ jsx(
@@ -8144,7 +8524,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames77({
+        className: classNames74({
           "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,
@@ -8158,7 +8538,7 @@ function Select({
       }
     ),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8179,7 +8559,7 @@ function Switch({
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between w-full gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        label && /* @__PURE__ */ jsx(InputLabel_default, { text: label }),
+        label && /* @__PURE__ */ jsx(InputLabel, { text: label }),
         description && /* @__PURE__ */ jsx("label", { className: "eui-text-md text-[12px] max-w-[500px]", children: description })
       ] }),
       /* @__PURE__ */ jsx(Field, { name: name2, children: () => /* @__PURE__ */ jsxs("label", { className: "relative inline-flex cursor-pointer", children: [
@@ -8196,7 +8576,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames77(
+            className: classNames74(
               "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",
@@ -8209,7 +8589,7 @@ function Switch({
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: name2,
         visibility: meta.touched && meta.error ? true : false,
@@ -8253,7 +8633,7 @@ function Tags({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames77(
+          className: classNames74(
             "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,
@@ -8298,10 +8678,10 @@ function Tags({
         }
       ),
       /* @__PURE__ */ jsx(
-        InputLabel_default,
+        InputLabel,
         {
           text: placeholder,
-          styles: classNames77(
+          className: classNames74(
             "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"
           )
@@ -8314,7 +8694,7 @@ function Tags({
       ] })
     ] }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8342,7 +8722,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames77({
+          className: classNames74({
             "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),
@@ -8353,10 +8733,10 @@ function TextArea({
         }
       ),
       /* @__PURE__ */ jsx(
-        InputLabel_default,
+        InputLabel,
         {
           text: placeholder,
-          styles: classNames77(
+          className: classNames74(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -8369,7 +8749,7 @@ function TextArea({
       ] })
     ] }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8390,7 +8770,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames77({
+      className: classNames74({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -8454,7 +8834,7 @@ var Breadcrumb = ({
           navigate(item.href);
         }
       };
-      return /* @__PURE__ */ jsxs(React25.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React26.Fragment, { children: [
         /* @__PURE__ */ jsx(
           BreadcrumbItem_default,
           {
@@ -8467,7 +8847,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classNames77({
+            className: classNames74({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -8481,7 +8861,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -8525,7 +8905,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77(
+        className: classNames74(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -8536,7 +8916,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames77(
+        className: classNames74(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -8565,7 +8945,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -8613,7 +8993,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77({
+        className: classNames74({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -8626,7 +9006,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -8667,7 +9047,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77({
+        className: classNames74({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -8712,7 +9092,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames77({
+      className: classNames74({
         "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,
@@ -8741,7 +9121,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -8794,7 +9174,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -8856,7 +9236,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames77({
+        className: classNames74({
           "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,
@@ -8884,7 +9264,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsx(
             BsChevronDown,
             {
-              className: classNames77({
+              className: classNames74({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -8897,7 +9277,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77({
+        className: classNames74({
           "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
         }),
@@ -8927,7 +9307,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames77({
+      className: classNames74({
         "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,
@@ -8956,7 +9336,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -8996,7 +9376,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames77({
+      className: classNames74({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -12188,7 +12568,7 @@ function Accordion({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames77(
+        className: classNames74(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -12209,7 +12589,7 @@ function Accordion({
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames77("text-xl transition-transform duration-300", {
+                  className: classNames74("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -12223,7 +12603,7 @@ function Accordion({
     /* @__PURE__ */ jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77(
+        className: classNames74(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -12280,7 +12660,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -12296,14 +12676,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children: children3, className }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames77("p-6 text-gray-300 text-sm", className), children: children3 });
+  return /* @__PURE__ */ jsx("div", { className: classNames74("p-6 text-gray-300 text-sm", className), children: children3 });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children: children3, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -12345,7 +12725,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77("absolute inset-0"),
+      className: classNames74("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -12491,7 +12871,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxs("div", { className: classNames77("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames74("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsx("div", { className: "relative z-10", children: children3 })
@@ -16398,7 +16778,7 @@ var ListItem = ({
             children: bullet
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React25.cloneElement(
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: TypographyComponent ? React26.cloneElement(
           TypographyComponent,
           {
             className: cn(
@@ -16432,7 +16812,7 @@ function normalizeItem(item, defaultBulletType) {
       bulletType: defaultBulletType
     };
   }
-  if (React25.isValidElement(item)) {
+  if (React26.isValidElement(item)) {
     return {
       content: item,
       bulletType: defaultBulletType
@@ -16737,7 +17117,7 @@ var ProgressBar = ({
     hasBottomLabel && /* @__PURE__ */ jsx("div", { className: "mt-2", children: labelNode })
   ] });
 };
-var sizes3 = {
+var sizes2 = {
   ["xs" /* xs */]: "text-[10px]",
   ["sm" /* sm */]: "text-xs",
   ["md" /* md */]: "text-sm",
@@ -16767,7 +17147,7 @@ var StarRating = ({
         className: cn(
           "inline-flex items-center gap-[2px]",
           "text-yellow-500 dark:text-yellow-400",
-          sizes3[size],
+          sizes2[size],
           iconClassName
         ),
         children: [
@@ -16780,7 +17160,7 @@ var StarRating = ({
     showValue && valuePosition === "end" && ratingValue
   ] });
 };
-var sizes4 = {
+var sizes3 = {
   ["xs" /* xs */]: {
     value: "text-2xl",
     review: "text-xs"
@@ -16812,7 +17192,7 @@ var NumericRating = ({
   className,
   ...rest
 }) => {
-  const sizeStyles = sizes4[size];
+  const sizeStyles = sizes3[size];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -17576,7 +17956,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames77(
+            className: classNames74(
               "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"
             )
@@ -17586,11 +17966,44 @@ var ThemeSwitch = () => {
     }
   );
 };
+function ThemeSelect({
+  ariaLabel,
+  label,
+  onChange,
+  options,
+  value
+}) {
+  const id2 = useId();
+  return /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[10px] font-medium leading-3 text-gray-500 dark:text-gray-300", children: label }),
+        /* @__PURE__ */ 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__ */ 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: {
@@ -17599,15 +18012,41 @@ var ShapeSwitch = () => {
       }
     }));
   };
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 w-fit", children: /* @__PURE__ */ jsx(
-    "select",
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    ThemeSelect,
+    {
+      ariaLabel: "Preview platform",
+      label: "Preview",
+      onChange,
+      options: previewOptions,
+      value
+    }
+  );
 };
 
 // src/hooks/theme/useCurrentTheme.ts
@@ -29065,7 +29504,7 @@ function AsyncStateCard({
           isError ? /* @__PURE__ */ jsx(FormResponse_default, { text: message, variant: "danger" }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-eui-dark-500 dark:text-eui-light-400", children: message })
         ] }),
         onAction && actionText && /* @__PURE__ */ jsx(
-          Button_default,
+          Button_web_default,
           {
             type: "button",
             text: actionText,
@@ -29080,7 +29519,7 @@ function AsyncStateCard({
     }
   );
 }
-var AsyncStateCard_default = React25.memo(AsyncStateCard);
+var AsyncStateCard_default = React26.memo(AsyncStateCard);
 
 // src/components/utils/async-component-wrapper/asyncError.utils.ts
 var getDefaultErrorMessage = (error) => {
@@ -29261,7 +29700,7 @@ function AsyncComponentWrapper({
     /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: children3 })
   ] });
 }
-var AsyncComponentWrapper_default = React25.memo(AsyncComponentWrapper);
+var AsyncComponentWrapper_default = React26.memo(AsyncComponentWrapper);
 function Modal({
   title,
   show = false,
@@ -29286,7 +29725,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames77(
+      className: classNames74(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -29298,7 +29737,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames77(
+              className: classNames74(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -29428,7 +29867,7 @@ var CookiePreferencesModal = ({
         }) }),
         /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
           /* @__PURE__ */ jsx(
-            Button_default,
+            Button_web_default,
             {
               type: "button",
               text: cancelLabel,
@@ -29440,7 +29879,7 @@ var CookiePreferencesModal = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            Button_default,
+            Button_web_default,
             {
               type: "button",
               text: saveLabel,
@@ -29532,7 +29971,7 @@ var CookieBanner = ({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
             /* @__PURE__ */ jsx(
-              Button_default,
+              Button_web_default,
               {
                 type: "button",
                 text: acceptAllLabel,
@@ -29544,7 +29983,7 @@ var CookieBanner = ({
               }
             ),
             showCustomize ? /* @__PURE__ */ jsx(
-              Button_default,
+              Button_web_default,
               {
                 type: "button",
                 text: customizeLabel,
@@ -29556,7 +29995,7 @@ var CookieBanner = ({
               }
             ) : null,
             showRejectAll ? /* @__PURE__ */ jsx(
-              Button_default,
+              Button_web_default,
               {
                 type: "button",
                 text: rejectAllLabel,
@@ -29588,34 +30027,101 @@ var CookieBanner = ({
 var usePageTracking = ({
   path: path2,
   search: search3 = "",
+  title,
+  fullUrl,
+  metadata,
   enabled = true,
+  trackPageLeave = false,
   dedupe = true
 }) => {
   const { track } = useAnalytics();
   const trackRef = useRef(track);
+  const enteredAtRef = useRef(Date.now());
   const previousPathRef = useRef(null);
+  const trackedPathsRef = useRef(/* @__PURE__ */ new Set());
   useEffect(() => {
     trackRef.current = track;
   }, [track]);
+  const metadataKey = useMemo(() => JSON.stringify(metadata ?? {}), [metadata]);
   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 = useRef(Date.now());
+  const endedRef = useRef(false);
+  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 = forwardRef(
   ({ children: children3, styles, enablePadding = false }, ref) => {
@@ -29623,7 +30129,7 @@ var ContentArea = forwardRef(
       "div",
       {
         ref,
-        className: classNames77({
+        className: classNames74({
           "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,
@@ -29640,7 +30146,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29653,7 +30159,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29672,7 +30178,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -29689,7 +30195,7 @@ var Layout = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -29703,12 +30209,15 @@ var Layout = ({
 var Header = ({
   position: position4 = "static",
   children: children3,
+  onPreviewPlatformChange,
+  previewPlatform = "web",
+  showPreviewPlatformSelector = false,
   styles
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -29717,9 +30226,16 @@ var Header = ({
         [`${styles}`]: styles
       }),
       children: /* @__PURE__ */ jsx("div", { className: "w-full", children: children3 ? children3 : /* @__PURE__ */ jsxs("div", { className: "flex flex-row w-full items-center justify-between px-4", children: [
-        /* @__PURE__ */ jsx("div", { children: "Header" }),
+        /* @__PURE__ */ jsx("div", { children: "elseware UI" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-3 items-center", children: [
           /* @__PURE__ */ jsx(ThemeSwitch, {}),
+          showPreviewPlatformSelector ? /* @__PURE__ */ jsx(
+            PreviewSwitch,
+            {
+              onChange: onPreviewPlatformChange,
+              value: previewPlatform
+            }
+          ) : null,
           /* @__PURE__ */ jsx(ShapeSwitch, {})
         ] })
       ] }) })
@@ -29736,7 +30252,7 @@ var Content = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "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)
@@ -29752,7 +30268,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         "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
@@ -29886,7 +30402,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ 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)" }
           }
         ),
@@ -29940,7 +30456,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames77({
+          className: classNames74({
             "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
@@ -29998,7 +30514,7 @@ function CommentComposer({
       ),
       (focused || value.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsx(
-          Button_default,
+          Button_web_default,
           {
             text: "Cancel",
             variant: "secondary",
@@ -30008,7 +30524,7 @@ function CommentComposer({
           }
         ),
         /* @__PURE__ */ jsx(
-          Button_default,
+          Button_web_default,
           {
             text: submitLabel,
             variant: "primary",
@@ -30856,7 +31372,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxs(
     "section",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -30870,7 +31386,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsx(
           "main",
           {
-            className: classNames77(
+            className: classNames74(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -30878,7 +31394,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: classNames77(
+                className: classNames74(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -30891,7 +31407,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsx(
           "aside",
           {
-            className: classNames77(
+            className: classNames74(
               "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",
@@ -30900,7 +31416,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: classNames77(
+                className: classNames74(
                   "documentation-panel-scrollbar h-full overflow-y-auto px-5 py-8"
                 ),
                 children: /* @__PURE__ */ jsx("div", { className: "sticky top-0", children: /* @__PURE__ */ jsx(MarkdownTOC_default, {}) })
@@ -31176,7 +31692,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames77(
+      className: classNames74(
         "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",
@@ -31671,7 +32187,7 @@ function ReviewForm({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
       onCancel && /* @__PURE__ */ jsx(
-        Button_default,
+        Button_web_default,
         {
           text: cancelLabel,
           variant: "secondary",
@@ -31681,7 +32197,7 @@ function ReviewForm({
         }
       ),
       /* @__PURE__ */ jsx(
-        Button_default,
+        Button_web_default,
         {
           text: submitLabel,
           variant: "primary",
@@ -31707,7 +32223,7 @@ function ReviewComposer({
   if (!currentUser) {
     return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Please login to post your review." }),
-      onLoginClick && /* @__PURE__ */ jsx(Button_default, { text: "Login", variant: "primary", onClick: onLoginClick })
+      onLoginClick && /* @__PURE__ */ jsx(Button_web_default, { text: "Login", variant: "primary", onClick: onLoginClick })
     ] }) });
   }
   return /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
@@ -32083,7 +32599,7 @@ function MyReviewPanel({
         /* @__PURE__ */ jsx(HeaderComponent, { review: myReview, config }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
           /* @__PURE__ */ jsx(
-            Button_default,
+            Button_web_default,
             {
               text: "Edit",
               variant: "secondary",
@@ -32093,7 +32609,7 @@ function MyReviewPanel({
             }
           ),
           onDeleteReview && /* @__PURE__ */ jsx(
-            Button_default,
+            Button_web_default,
             {
               text: "Delete",
               variant: "danger",
@@ -33038,7 +33554,7 @@ function ReviewThread({
         /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        Button_default,
+        Button_web_default,
         {
           text: "Retry",
           variant: "danger",
@@ -33878,11 +34394,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);
   }
 }
@@ -42272,7 +42788,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;
@@ -42281,7 +42797,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;
         }
@@ -42289,7 +42805,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) {
@@ -42304,7 +42820,7 @@ function markdownTable(table2, options) {
   }
   columnIndex = -1;
   const row = [];
-  const sizes5 = [];
+  const sizes4 = [];
   while (++columnIndex < mostCellsPerRow) {
     const code4 = alignments[columnIndex];
     let before = "";
@@ -42327,17 +42843,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) {
@@ -42345,7 +42861,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);
@@ -53913,7 +54429,7 @@ function MarkdownHeading({
       id: id2,
       level: typographyLevel,
       bold: true,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-heading group relative scroll-mt-24 font-bold leading-tight text-gray-900 dark:text-gray-100",
         HEADING_STYLES[level],
         className
@@ -54076,18 +54592,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);
@@ -54095,8 +54611,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;
@@ -54141,7 +54657,7 @@ function createElement2(_ref) {
       });
     }
     var children3 = childrenCreator(node2.children);
-    return /* @__PURE__ */ React25.createElement(TagName, _extends({
+    return /* @__PURE__ */ React26.createElement(TagName, _extends({
       key
     }, props), children3);
   }
@@ -54184,7 +54700,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.createElement("span", {
+    return /* @__PURE__ */ React26.createElement("span", {
       key: "line-".concat(i),
       className: "react-syntax-highlighter-line-number",
       style: typeof style2 === "function" ? style2(number3) : style2
@@ -54196,7 +54712,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.createElement("code", {
+  return /* @__PURE__ */ React26.createElement("code", {
     style: Object.assign({}, codeStyle, containerStyle)
   }, getAllLineNumbers({
     lines: codeString.replace(/\n$/, "").split("\n"),
@@ -54269,8 +54785,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);
       });
     }
@@ -54417,7 +54933,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.createElement(AllLineNumbers, {
+    var allLineNumbers = showLineNumbers ? /* @__PURE__ */ React26.createElement(AllLineNumbers, {
       containerStyle: lineNumberContainerStyle,
       codeStyle: codeTagProps.style || {},
       numberStyle: lineNumberStyle,
@@ -54444,7 +54960,7 @@ function highlight_default(defaultAstGenerator, defaultStyle) {
       }, codeTagProps.style);
     }
     if (!astGenerator) {
-      return /* @__PURE__ */ React25.createElement(PreTag, preProps, allLineNumbers, /* @__PURE__ */ React25.createElement(CodeTag, codeTagProps, code4));
+      return /* @__PURE__ */ React26.createElement(PreTag, preProps, allLineNumbers, /* @__PURE__ */ React26.createElement(CodeTag, codeTagProps, code4));
     }
     if (wrapLines === void 0 && renderer || wrapLongLines) wrapLines = true;
     renderer = renderer || defaultRenderer;
@@ -54464,7 +54980,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.createElement(PreTag, preProps, /* @__PURE__ */ React25.createElement(CodeTag, codeTagProps, !showInlineLineNumbers && allLineNumbers, renderer({
+    return /* @__PURE__ */ React26.createElement(PreTag, preProps, /* @__PURE__ */ React26.createElement(CodeTag, codeTagProps, !showInlineLineNumbers && allLineNumbers, renderer({
       rows,
       stylesheet: style2,
       useInlineStyles
@@ -54801,7 +55317,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();
@@ -54934,7 +55450,7 @@ function MarkdownCodeBlock({
     "div",
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
         className
       ),
@@ -55005,7 +55521,7 @@ function MarkdownInlineCode({
     Code,
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "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
       ),
@@ -55046,7 +55562,7 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames77(
+      className: classNames74(
         "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
       ),
@@ -55081,7 +55597,7 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
         className
       )
@@ -55098,7 +55614,7 @@ function MarkdownTable({
     TableElement,
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-table w-full border-collapse text-[0.925rem]",
         className
       ),
@@ -55115,7 +55631,7 @@ function MarkdownTableCell({
     TableCell,
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "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
       ),
@@ -55132,7 +55648,7 @@ function MarkdownTableHeaderCell({
     TableHeaderCell,
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "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
       ),
@@ -55148,7 +55664,7 @@ function MarkdownTableHead({
     TableHead,
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
         className
       )
@@ -55163,7 +55679,7 @@ function MarkdownTableBody({
     TableBody,
     {
       ...props,
-      className: classNames77("eui-markdown-table-body", className)
+      className: classNames74("eui-markdown-table-body", className)
     }
   );
 }
@@ -55175,7 +55691,7 @@ function MarkdownTableRow({
     TableRow,
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
         className
       )
@@ -55193,7 +55709,7 @@ function MarkdownBlockquote({
     {
       ...props,
       as: "blockquote",
-      className: classNames77(
+      className: classNames74(
         "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
       ),
@@ -55212,7 +55728,7 @@ function MarkdownParagraph({
     {
       ...props,
       level: 1,
-      className: classNames77("eui-markdown-paragraph my-4", className),
+      className: classNames74("eui-markdown-paragraph my-4", className),
       children: /* @__PURE__ */ jsx(Fragment, { children: children3 })
     }
   );
@@ -55223,7 +55739,7 @@ function MarkdownStrong({ className, ...props }) {
     "strong",
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55236,7 +55752,7 @@ function MarkdownEmphasis({ className, ...props }) {
     "em",
     {
       ...props,
-      className: classNames77("eui-markdown-emphasis italic", className)
+      className: classNames74("eui-markdown-emphasis italic", className)
     }
   );
 }
@@ -55249,7 +55765,7 @@ function MarkdownStrikethrough({
     "del",
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
         className
       )
@@ -55310,7 +55826,7 @@ function MarkdownTaskCheckbox({
     "input",
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
         className
       )
@@ -55326,7 +55842,7 @@ function MarkdownThematicBreak({
     "hr",
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
         className
       )
@@ -55343,7 +55859,7 @@ function MarkdownDetails({ className, ...props }) {
     "details",
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "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
       )
@@ -55355,7 +55871,7 @@ function MarkdownSummary({ className, ...props }) {
     "summary",
     {
       ...props,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55367,7 +55883,7 @@ function MarkdownFigure({ className, ...props }) {
     "figure",
     {
       ...props,
-      className: classNames77("eui-markdown-figure my-6", className)
+      className: classNames74("eui-markdown-figure my-6", className)
     }
   );
 }
@@ -55379,7 +55895,7 @@ function MarkdownFigcaption({
   return /* @__PURE__ */ jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsx(
     Caption,
     {
-      className: classNames77(
+      className: classNames74(
         "text-gray-500 opacity-100 dark:text-gray-400",
         className
       ),
@@ -55778,14 +56294,14 @@ function MarkdownRenderer({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-markdown markdown-body break-words bg-transparent text-[0.95rem] leading-7 text-gray-800 dark:text-gray-300",
         className
       ),
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames77(
+          className: classNames74(
             "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
             contentClassName
           ),
@@ -55863,11 +56379,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-toc-item",
         "block w-full text-left text-sm transition-all ease-in-out duration-150",
         "hover:text-primary",
-        active ? classNames77("text-primary font-semibold underline", activeClassName) : classNames77("text-gray-500 dark:text-gray-400", inactiveClassName),
+        active ? classNames74("text-primary font-semibold underline", activeClassName) : classNames74("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -55933,7 +56449,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77(
+        className: classNames74(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -55953,7 +56469,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames77(
+        className: classNames74(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -55966,7 +56482,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: classNames77(
+              className: classNames74(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -55979,7 +56495,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsx(
       "h2",
       {
-        className: classNames77(
+        className: classNames74(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -55991,7 +56507,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsx(
       "nav",
       {
-        className: classNames77(
+        className: classNames74(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -56015,7 +56531,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsx("aside", { className: classNames77("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsx("aside", { className: classNames74("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -56114,7 +56630,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "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",
@@ -56128,7 +56644,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(
+            className: classNames74(
               "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",
@@ -56148,7 +56664,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames77(
+            className: classNames74(
               "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",
@@ -56405,7 +56921,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56421,7 +56937,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames77(toolbarClassName, toolbarProps?.className),
+            className: classNames74(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -56429,7 +56945,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames77(
+            className: classNames74(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -56452,7 +56968,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames77(
+            className: classNames74(
               "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",
@@ -56482,7 +56998,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56532,7 +57048,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -56542,7 +57058,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77(
+            className: classNames74(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -56566,7 +57082,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77(
+            className: classNames74(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -56656,7 +57172,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -56666,7 +57182,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames77(
+            className: classNames74(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -56691,14 +57207,14 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsx(
           "p",
           {
-            className: classNames77(
+            className: classNames74(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
             children: helperText
           }
         ) : null,
-        /* @__PURE__ */ jsx(InputResponse_default, { name: field.name, visibility: hasError, variant: "danger" })
+        /* @__PURE__ */ jsx(InputResponse, { name: field.name, visibility: hasError, variant: "danger" })
       ]
     }
   );
@@ -56746,7 +57262,7 @@ function CodeMirrorMarkdownEditor({
     {
       id: id2,
       "data-name": name2,
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-adapter",
         "eui-markdown-codemirror-adapter",
         "overflow-hidden rounded border border-gray-300 bg-white",
@@ -56780,7 +57296,7 @@ function CodeMirrorMarkdownEditor({
             closeBrackets: true,
             bracketMatching: true
           },
-          className: classNames77("eui-markdown-codemirror", editorClassName),
+          className: classNames74("eui-markdown-codemirror", editorClassName),
           onChange: updateValue,
           onBlur
         }
@@ -56875,7 +57391,7 @@ function createDefaultPlugins({
     ...showToolbar ? [
       toolbarPlugin({
         toolbarContents: toolbarContents ?? DefaultToolbar,
-        toolbarClassName: classNames77(
+        toolbarClassName: classNames74(
           "eui-markdown-mdx-toolbar",
           toolbarClassName
         ),
@@ -56992,7 +57508,7 @@ var MDXMarkdownEditor = forwardRef(
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
         onBlurCapture: handleBlur,
-        className: classNames77(
+        className: classNames74(
           "eui-markdown-adapter",
           "eui-markdown-mdx-adapter",
           dark && ["dark", "dark-theme"],
@@ -57010,8 +57526,8 @@ var MDXMarkdownEditor = forwardRef(
             markdown: currentValue ?? "",
             readOnly: disabled || readOnly,
             plugins: plugins ?? defaultPlugins,
-            className: classNames77("eui-markdown-mdx-editor", editorClassName),
-            contentEditableClassName: classNames77(
+            className: classNames74("eui-markdown-mdx-editor", editorClassName),
+            contentEditableClassName: classNames74(
               "eui-markdown-mdx-content",
               contentEditableClassName
             ),
@@ -57048,7 +57564,7 @@ function MDXMarkdownField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-mdx-field",
         "relative space-y-2",
         wrapperClassName
@@ -57058,7 +57574,7 @@ function MDXMarkdownField({
           "label",
           {
             htmlFor: editorId,
-            className: classNames77(
+            className: classNames74(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57092,7 +57608,7 @@ function MDXMarkdownField({
           "p",
           {
             id: helperId,
-            className: classNames77(
+            className: classNames74(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57100,7 +57616,7 @@ function MDXMarkdownField({
           }
         ) : null,
         /* @__PURE__ */ jsx("div", { id: errorId, role: hasError ? "alert" : void 0, children: /* @__PURE__ */ jsx(
-          InputResponse_default,
+          InputResponse,
           {
             name: field.name,
             visibility: hasError,
@@ -57152,10 +57668,10 @@ function MarkdownLayout({
   };
   const hasLeftToc = hasToc && tocPosition === "left";
   const hasRightToc = hasToc && tocPosition === "right";
-  return /* @__PURE__ */ jsx("div", { className: classNames77("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: classNames74("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -57167,7 +57683,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsx(
           "header",
           {
-            className: classNames77(
+            className: classNames74(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -57178,7 +57694,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77(
+            className: classNames74(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -57191,7 +57707,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames77(
+                  className: classNames74(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -57204,7 +57720,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames77(
+                  className: classNames74(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57217,7 +57733,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsx(
                 "main",
                 {
-                  className: classNames77(
+                  className: classNames74(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -57228,7 +57744,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames77(
+                  className: classNames74(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57241,7 +57757,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames77(
+                  className: classNames74(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -57257,7 +57773,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsx(
           "footer",
           {
-            className: classNames77(
+            className: classNames74(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -57294,7 +57810,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77(
+      className: classNames74(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -57305,7 +57821,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsx(
             "h1",
             {
-              className: classNames77(
+              className: classNames74(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -57317,7 +57833,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsx(
             "div",
             {
-              className: classNames77(
+              className: classNames74(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -57405,7 +57921,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         [`${styles}`]: styles
       }),
       children: children3
@@ -57454,7 +57970,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77({
+      className: classNames74({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -57467,11 +57983,32 @@ function SidemenuLayout({ data, children: children3 }) {
   ) });
 }
 var SidemenuLayout_default = SidemenuLayout;
+var EUIDevPreviewPlatformContext = createContext({
+  platform: "web",
+  setPlatform: () => void 0
+});
+var useEUIDevPreviewPlatform = () => useContext(EUIDevPreviewPlatformContext);
 function EUIDevLayout({
   children: children3,
-  header = /* @__PURE__ */ jsx(Header, {}),
+  header,
   footer: footer2 = /* @__PURE__ */ jsx(Footer, {})
 }) {
+  const [platform, setPlatform] = useState("web");
+  const previewPlatform = useMemo(
+    () => ({
+      platform,
+      setPlatform
+    }),
+    [platform]
+  );
+  const resolvedHeader = header ?? /* @__PURE__ */ jsx(
+    Header,
+    {
+      onPreviewPlatformChange: setPlatform,
+      previewPlatform: platform,
+      showPreviewPlatformSelector: true
+    }
+  );
   return /* @__PURE__ */ jsx(
     EUIProvider,
     {
@@ -57483,8 +58020,8 @@ function EUIDevLayout({
         }
       },
       children: /* @__PURE__ */ jsx(GenericLayout_default, { children: /* @__PURE__ */ jsxs(Layout, { children: [
-        header,
-        /* @__PURE__ */ jsx(Content, { styles: "pt-[60px]", children: /* @__PURE__ */ jsx(ContentArea_default, { enablePadding: true, children: children3 }) }),
+        resolvedHeader,
+        /* @__PURE__ */ jsx(EUIDevPreviewPlatformContext.Provider, { value: previewPlatform, children: /* @__PURE__ */ jsx(Content, { styles: "pt-[60px]", children: /* @__PURE__ */ jsx(ContentArea_default, { enablePadding: true, children: children3 }) }) }),
         footer2
       ] }) })
     }
@@ -57513,6 +58050,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, AnalyticsContext, AnalyticsProvider, AreaPlot, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarPlot, BaseChartDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, CHART_COLOR_PALETTE, CHART_DARK_THEME, CHART_DATA_MODES, CHART_DEFAULT_ACTIVE_DOT_RADIUS, CHART_DEFAULT_ANIMATION_DURATION, CHART_DEFAULT_BAR_RADIUS, CHART_DEFAULT_HEIGHT, CHART_DEFAULT_HORIZONTAL_BAR_RADIUS, CHART_DEFAULT_MARGIN, CHART_DEFAULT_MAX_REALTIME_POINTS, CHART_DEFAULT_POLLING_INTERVAL, CHART_DEFAULT_STROKE_WIDTH, CHART_EMPTY_MESSAGE, CHART_ERROR_MESSAGE, CHART_LIGHT_THEME, CHART_LOADING_MESSAGE, CHART_STATUSES, CHART_STATUS_COLORS, CHART_VALUE_FORMATS, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Chart, ChartContainer, ChartContext, ChartEmptyState, ChartErrorState, ChartHeader, ChartLegend, ChartLoadingState, ChartPanel, ChartPlotFrame, ChartProvider, ChartToolbar, ChartTooltip, Checkbox_default as Checkbox, Chip, CloudinaryImage2 as CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Code, CodeMirrorMarkdownEditor_default as CodeMirrorMarkdownEditor, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, CookieBanner, CookiePreferencesModal, DEFAULT_ANALYTICS_CONFIG, DEFAULT_COOKIE_CATEGORIES, DEFAULT_REVIEW_THREAD_CONFIG, DataView2 as DataView, DataViewContent, DataViewFilterGroup, DataViewFooter, DataViewHeader, DataViewPageSize, DataViewPagination, DataViewProvider, DataViewSearch, DataViewSidebar, DataViewSort, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, EUI_ANALYTICS_ANONYMOUS_ID_STORAGE_KEY, EUI_ANALYTICS_CONSENT_STORAGE_KEY, EUI_ANALYTICS_QUEUE_STORAGE_KEY, EnvErrorScreen_default as EnvErrorScreen, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LinePlot, Link, List, ListItem, ListItemElement, ListRoot, MDXMarkdownEditor_default as MDXMarkdownEditor, MDXMarkdownField_default as MDXMarkdownField, MarkdownBlockquote_default as MarkdownBlockquote, MarkdownBreak_default as MarkdownBreak, MarkdownCodeBlock_default as MarkdownCodeBlock, MarkdownContext, MarkdownDetails, MarkdownDocsLayout_default as MarkdownDocsLayout, MarkdownEditor_default as MarkdownEditor, MarkdownEmphasis_default as MarkdownEmphasis, MarkdownField_default as MarkdownField, MarkdownFigcaption, MarkdownFigure, MarkdownHeading_default as MarkdownHeadingComponent, MarkdownImage_default as MarkdownImage, MarkdownInlineCode_default as MarkdownInlineCode, MarkdownLayout_default as MarkdownLayout, MarkdownLink_default as MarkdownLink, MarkdownListItem_default as MarkdownListItem, MarkdownOrderedList, MarkdownParagraph_default as MarkdownParagraph, MarkdownPreviewPane_default as MarkdownPreviewPane, MarkdownProvider_default as MarkdownProvider, MarkdownRenderer_default as MarkdownRenderer, MarkdownSourceEditor_default as MarkdownSourceEditor, MarkdownSplitEditor_default as MarkdownSplitEditor, MarkdownStrikethrough_default as MarkdownStrikethrough, MarkdownStrong_default as MarkdownStrong, MarkdownSummary, MarkdownTOC_default as MarkdownTOC, MarkdownTOCItem_default as MarkdownTOCItem, MarkdownTable_default as MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeaderCell, MarkdownTableRow, MarkdownTaskCheckbox_default as MarkdownTaskCheckbox, MarkdownThematicBreak_default as MarkdownThematicBreak, MarkdownToolbar_default as MarkdownToolbar, MarkdownUnorderedList, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PriceTag, ProgressBar, ProgressBarRating, Quote, Radio_default as Radio, RealtimeChartDataSource, ReviewThread_default as ReviewThread, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterPlot, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, Spinner, StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, TableBody, TableCell, TableElement, TableFrame, TableHead, TableHeaderCell, TableRow, Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip6 as Tooltip, TopNav, Transition, TransitionAccordion_default as TransitionAccordion, TransitionBase_default as TransitionBase, TransitionDropdown_default as TransitionDropdown, TransitionFade_default as TransitionFade, TransitionFadeIn_default as TransitionFadeIn, TransitionScale_default as TransitionScale, TransitionSlide_default as TransitionSlide, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo, YoutubeVideo as YoutubeVideoPlayer, addReplyToCache, addReviewReply, appendReview, applyReactionState, assertAbsoluteURL, buildURL, canDeleteReview, canDeleteReviewReply, canEditReview, canEditReviewReply, canReplyToReview, canReportReview, canReportReviewReply, clearAnalyticsQueueStorage, clearAnonymousIdStorage, clearConsentStorage, cn, createAnalyticsEvent, createAnalyticsId, createConfigurator, createDefaultConsent, createForceLayout, createGridLayout, createHeadingSlug, createTreeLayout, createURLResolver, decrementReplyCount, defaultFormatValue, defaultTiers, ensureAnonymousIdStorage, enumValues, euiToast, extractHeadings, findReview, formatChartLabel, formatChartValue, formatCommentDate, formatConfigError, formatReviewDate, generateHeadingNumbers, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getConsentStatusFromCategories, getCurrencySymbol, getCurrentPath, getCurrentReferrer, getDeviceInfo, getDoNotTrackEnabled, getLayout, getNowISOString, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, getViewport, hasReviewReply, incrementReplyCount, isBrowser, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, normalizeMarkdown, normalizeReview, normalizeReviewAuthor, normalizeReviewReply, parseJson, parseJsonRecord, parseUrlMap, prependReview, readAnalyticsQueueStorage, readAnonymousIdStorage, readConsentStorage, registerLayout, removeComment, removeCommentTreeFromCache, removeReview, removeReviewReply, replaceRealtimePoints, replaceReview, replaceReviewReply, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, safeReadStorage, safeRemoveStorage, safeWriteStorage, sanitizeHeading, sendToast, slugify, toConfiguratorError, updateComment, updateReplyCacheComment, updateReview, updateReviewReply, upsertReview, useActiveHeading, useAnalytics, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCookieConsent, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useMarkdown, useMarkdownHeadings, useModal_default as useModal, usePageTracking, useResolvedChartState, useReviewThreadState, useSessionTracking, useTheme_default as useTheme, writeAnalyticsQueueStorage, writeConsentStorage };
+export { Accordion_default as Accordion, AnalyticsContext, AnalyticsProvider, AreaPlot, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarPlot, BaseChartDataSource, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_web_default as Button, CHART_COLOR_PALETTE, CHART_DARK_THEME, CHART_DATA_MODES, CHART_DEFAULT_ACTIVE_DOT_RADIUS, CHART_DEFAULT_ANIMATION_DURATION, CHART_DEFAULT_BAR_RADIUS, CHART_DEFAULT_HEIGHT, CHART_DEFAULT_HORIZONTAL_BAR_RADIUS, CHART_DEFAULT_MARGIN, CHART_DEFAULT_MAX_REALTIME_POINTS, CHART_DEFAULT_POLLING_INTERVAL, CHART_DEFAULT_STROKE_WIDTH, CHART_EMPTY_MESSAGE, CHART_ERROR_MESSAGE, CHART_LIGHT_THEME, CHART_LOADING_MESSAGE, CHART_STATUSES, CHART_STATUS_COLORS, CHART_VALUE_FORMATS, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Chart, ChartContainer, ChartContext, ChartEmptyState, ChartErrorState, ChartHeader, ChartLegend, ChartLoadingState, ChartPanel, ChartPlotFrame, ChartProvider, ChartToolbar, ChartTooltip, Checkbox, Chip, CloudinaryImage2 as CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Code, CodeMirrorMarkdownEditor_default as CodeMirrorMarkdownEditor, CommentThread_default as CommentThread, ConfigBootstrap_default as ConfigBootstrap, Configurator, ConfiguratorError, Content, ContentArea_default as ContentArea, CookieBanner, CookiePreferencesModal, DEFAULT_ANALYTICS_CONFIG, DEFAULT_COOKIE_CATEGORIES, DEFAULT_REVIEW_THREAD_CONFIG, DataView2 as DataView, DataViewContent, DataViewFilterGroup, DataViewFooter, DataViewHeader, DataViewPageSize, DataViewPagination, DataViewProvider, DataViewSearch, DataViewSidebar, DataViewSort, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, EUI_ANALYTICS_ANONYMOUS_ID_STORAGE_KEY, EUI_ANALYTICS_CONSENT_STORAGE_KEY, EUI_ANALYTICS_QUEUE_STORAGE_KEY, EnvErrorScreen_default as EnvErrorScreen, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GaugePlot, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, InfiniteScrollTrigger_default as InfiniteScrollTrigger, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, Lead, LinePlot, Link, List, ListItem, ListItemElement, ListRoot, MDXMarkdownEditor_default as MDXMarkdownEditor, MDXMarkdownField_default as MDXMarkdownField, MarkdownBlockquote_default as MarkdownBlockquote, MarkdownBreak_default as MarkdownBreak, MarkdownCodeBlock_default as MarkdownCodeBlock, MarkdownContext, MarkdownDetails, MarkdownDocsLayout_default as MarkdownDocsLayout, MarkdownEditor_default as MarkdownEditor, MarkdownEmphasis_default as MarkdownEmphasis, MarkdownField_default as MarkdownField, MarkdownFigcaption, MarkdownFigure, MarkdownHeading_default as MarkdownHeadingComponent, MarkdownImage_default as MarkdownImage, MarkdownInlineCode_default as MarkdownInlineCode, MarkdownLayout_default as MarkdownLayout, MarkdownLink_default as MarkdownLink, MarkdownListItem_default as MarkdownListItem, MarkdownOrderedList, MarkdownParagraph_default as MarkdownParagraph, MarkdownPreviewPane_default as MarkdownPreviewPane, MarkdownProvider_default as MarkdownProvider, MarkdownRenderer_default as MarkdownRenderer, MarkdownSourceEditor_default as MarkdownSourceEditor, MarkdownSplitEditor_default as MarkdownSplitEditor, MarkdownStrikethrough_default as MarkdownStrikethrough, MarkdownStrong_default as MarkdownStrong, MarkdownSummary, MarkdownTOC_default as MarkdownTOC, MarkdownTOCItem_default as MarkdownTOCItem, MarkdownTable_default as MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeaderCell, MarkdownTableRow, MarkdownTaskCheckbox_default as MarkdownTaskCheckbox, MarkdownThematicBreak_default as MarkdownThematicBreak, MarkdownToolbar_default as MarkdownToolbar, MarkdownUnorderedList, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating, Overline, Paragraph, PiePlot, PollingChartDataSource, PreviewSwitch, PriceTag, ProgressBar, ProgressBarRating, Quote, Radio_default as Radio, RealtimeChartDataSource, ReviewThread_default as ReviewThread, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScatterPlot, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, Spinner, StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, StatPlot, StaticChartDataSource, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, TableBody, TableCell, TableElement, TableFrame, TableHead, TableHeaderCell, TableRow, Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSelect, ThemeSwitch, TitleBanner, Toast, Tooltip6 as Tooltip, TopNav, Transition, TransitionAccordion_default as TransitionAccordion, TransitionBase_default as TransitionBase, TransitionDropdown_default as TransitionDropdown, TransitionFade_default as TransitionFade, TransitionFadeIn_default as TransitionFadeIn, TransitionScale_default as TransitionScale, TransitionSlide_default as TransitionSlide, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo, YoutubeVideo as YoutubeVideoPlayer, addReplyToCache, addReviewReply, appendReview, applyReactionState, assertAbsoluteURL, buildURL, canDeleteReview, canDeleteReviewReply, canEditReview, canEditReviewReply, canReplyToReview, canReportReview, canReportReviewReply, clearAnalyticsQueueStorage, clearAnonymousIdStorage, clearConsentStorage, cn, createAnalyticsEvent, createAnalyticsId, createConfigurator, createDefaultConsent, createForceLayout, createGridLayout, createHeadingSlug, createTreeLayout, createURLResolver, decrementReplyCount, defaultFormatValue, defaultTiers, ensureAnonymousIdStorage, enumValues, euiToast, extractHeadings, findReview, formatChartLabel, formatChartValue, formatCommentDate, formatConfigError, formatReviewDate, generateHeadingNumbers, getAllowedOrigins, getBrowserHref, getBrowserOrigin, getBrowserRedirectURL, getConsentStatusFromCategories, getCurrencySymbol, getCurrentFullUrl, getCurrentPath, getCurrentReferrer, getCurrentTitle, getDeviceInfo, getDoNotTrackEnabled, getLayout, getNowISOString, getOptimisticDislikeState, getOptimisticLikeState, getSafeRedirect, getViewport, hasReviewReply, incrementReplyCount, isBrowser, isMatch, isRenderFn, limitRealtimePoints, normalize, normalizeChartData, normalizeChartDataPoint, normalizeMarkdown, normalizeReview, normalizeReviewAuthor, normalizeReviewReply, parseJson, parseJsonRecord, parseUrlMap, prependReview, readAnalyticsQueueStorage, readAnonymousIdStorage, readConsentStorage, registerLayout, removeComment, removeCommentTreeFromCache, removeReview, removeReviewReply, replaceRealtimePoints, replaceReview, replaceReviewReply, resolveAppearanceStyles, resolveChartColor, resolveChartColors, resolveWithGlobal, safeReadStorage, safeRemoveStorage, safeWriteStorage, sanitizeHeading, sendToast, slugify, toConfiguratorError, updateComment, updateReplyCacheComment, updateReview, updateReviewReply, upsertReview, useActiveHeading, useAnalytics, useChartContext, useChartData, useChartPolling, useChartRealtime, useChartSeries, useChartTheme, useClickOutside, useCloudinaryConfig, useCookieConsent, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useEUIDevPreviewPlatform, useIsMobile_default as useIsMobile, useMarkdown, useMarkdownHeadings, useModal_default as useModal, usePageTracking, useResolvedChartState, useReviewThreadState, useSessionTracking, useTheme_default as useTheme, writeAnalyticsQueueStorage, writeConsentStorage };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map