elseware-ui 3.0.0 → 3.0.2

package/dist/index.mjs

@@ -3,8 +3,8 @@ 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 classNames72 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';
@@ -6085,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",
@@ -6178,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",
@@ -6288,18 +6277,14 @@ function Button({
   disabled = false,
   block = false,
   compact = false,
+  glow = true,
   mode,
-  buttonColor,
-  textColor,
   contentClassName,
   labelClassName,
   variant,
   appearance,
   shape,
   size,
-  style: style2,
-  contentStyle,
-  labelStyle,
   accessibilityLabel,
   accessibilityRole,
   accessibilityState,
@@ -6332,12 +6317,15 @@ function Button({
   const iconSize = buttonIconSizes[resolvedSize];
   const labelContent = text10 || children3;
   const resolvedIcon = typeof icon === "function" ? icon({
-    color: textColor ?? "currentColor",
+    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;
@@ -6365,11 +6353,6 @@ function Button({
       "aria-pressed": accessibility?.selected === void 0 ? void 0 : Boolean(accessibility.selected),
       "data-testid": testID,
       role: accessibilityRole,
-      style: {
-        background: buttonColor,
-        color: textColor,
-        ...style2
-      },
       className: cn(
         "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300",
         variantStyles,
@@ -6382,18 +6365,18 @@ function Button({
         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%
+              )
+            `
             }
           }
         ),
@@ -6408,8 +6391,7 @@ function Button({
             style: {
               height: iconSize,
               lineHeight: 0,
-              width: iconSize,
-              ...contentStyle
+              width: iconSize
             },
             children: resolvedIcon
           }
@@ -6422,8 +6404,7 @@ function Button({
               labelClassName
             ),
             style: {
-              minHeight: iconSize,
-              ...labelStyle
+              minHeight: iconSize
             },
             children: labelContent
           }
@@ -6433,11 +6414,46 @@ function 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: classNames72({
         "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
       }),
@@ -7027,7 +7043,7 @@ function renderTransitionChild(children3, className) {
   }
   const element7 = child;
   return React26.cloneElement(element7, {
-    className: classNames77(element7.props.className, className)
+    className: classNames72(element7.props.className, className)
   });
 }
 function TransitionBase({
@@ -7047,7 +7063,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames77(
+  const transitionClassName = classNames72(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -7205,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);
@@ -7326,13 +7416,13 @@ var InputFile = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77(
+        className: classNames72(
           "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 || ""
@@ -7349,10 +7439,10 @@ var InputFile = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      InputLabel_default,
+      InputLabel,
       {
         text: placeholder,
-        styles: classNames77({
+        className: classNames72({
           "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
@@ -7360,7 +7450,7 @@ var InputFile = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -7401,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: classNames72(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -7434,7 +7524,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames77(
+                          className: classNames72(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -7445,7 +7535,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames77(
+                                className: classNames72(
                                   "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"
@@ -7485,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"
             }
           )
         ]
@@ -7533,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`;
@@ -7541,7 +7631,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77(
+            className: classNames72(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -7553,7 +7643,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames77(
+                    className: classNames72(
                       "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"
@@ -7584,7 +7674,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames77(
+                      className: classNames72(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -7604,7 +7694,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames77(
+                                  className: classNames72(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -7615,7 +7705,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames77(
+                                        className: classNames72(
                                           "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"
@@ -7674,12 +7764,12 @@ var InputListGroup = ({
         }
       ),
       /* @__PURE__ */ jsx(
-        InputResponse_default,
+        InputResponse,
         {
           name: name2,
           visibility: hasError,
           variant: "danger",
-          styles: "pb-2"
+          className: "pb-2"
         }
       )
     ] }) })
@@ -7688,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
@@ -7702,89 +7799,238 @@ 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
               }
@@ -7795,16 +8041,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,
@@ -7816,10 +8061,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(
@@ -7829,7 +8074,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames77({
+        className: classNames72({
           "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,
@@ -7838,12 +8083,22 @@ 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;
-var FormObserver = ({ formik, onChange }) => {
+function renderFormChildren(children3, formik) {
+  return typeof children3 === "function" ? children3(formik) : children3;
+}
+function FormObservers({
+  formik,
+  onChange,
+  onDirtyChange
+}) {
   const prevValuesRef = useRef(formik.values);
+  useEffect(() => {
+    onDirtyChange?.(formik.dirty);
+  }, [formik.dirty, onDirtyChange]);
   useEffect(() => {
     if (!onChange) return;
     const currentValues = formik.values;
@@ -7860,24 +8115,17 @@ var FormObserver = ({ formik, onChange }) => {
     prevValuesRef.current = currentValues;
   }, [formik.values, onChange]);
   return null;
-};
-var FormObserver_default = FormObserver;
-var DirtyObserver = ({ formik, onDirtyChange }) => {
-  useEffect(() => {
-    if (onDirtyChange) {
-      onDirtyChange(formik.dirty);
-    }
-  }, [formik.dirty, onDirtyChange]);
-  return null;
-};
-var DirtyObserver_default = DirtyObserver;
-var UnsavedChangesGuard = ({ formik, enabled }) => {
+}
+function UnsavedChangesGuard({
+  formik,
+  enabled
+}) {
   useEffect(() => {
     if (!enabled) return;
-    const handleBeforeUnload = (e) => {
+    const handleBeforeUnload = (event) => {
       if (!formik.dirty) return;
-      e.preventDefault();
-      e.returnValue = "";
+      event.preventDefault();
+      event.returnValue = "";
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
     return () => {
@@ -7885,19 +8133,19 @@ var UnsavedChangesGuard = ({ formik, enabled }) => {
     };
   }, [formik.dirty, enabled]);
   return null;
-};
-var UnsavedChangesGuard_default = UnsavedChangesGuard;
-var Form = ({
+}
+function Form({
   initialValues = {},
   validationSchema,
   enableReinitialize,
   children: children3,
-  styles,
+  className,
+  contentClassName,
   onSubmit,
   onChange,
   warnOnUnsavedChanges = false,
   onDirtyChange
-}) => {
+}) {
   return /* @__PURE__ */ jsx(
     Formik,
     {
@@ -7907,44 +8155,88 @@ var Form = ({
       onSubmit: async (values, helpers) => {
         await onSubmit(values, helpers);
       },
-      children: (formik) => /* @__PURE__ */ jsxs(Form$1, { children: [
-        /* @__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 })
+      children: (formik) => /* @__PURE__ */ jsxs(Form$1, { className, children: [
+        /* @__PURE__ */ jsx(UnsavedChangesGuard, { formik, enabled: warnOnUnsavedChanges }),
+        /* @__PURE__ */ jsx(
+          FormObservers,
+          {
+            formik,
+            onChange,
+            onDirtyChange
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: renderFormChildren(children3, formik) })
       ] })
     }
   );
+}
+
+// src/components/data-entry/form/form-response/base/FormResponse.styles.ts
+var formResponseSizeStyles = {
+  xs: {
+    root: "px-2 py-1",
+    text: "text-xs"
+  },
+  sm: {
+    root: "px-3 py-2",
+    text: "text-sm"
+  },
+  md: {
+    root: "px-4 py-2",
+    text: "text-base"
+  },
+  lg: {
+    root: "px-5 py-3",
+    text: "text-lg"
+  },
+  xl: {
+    root: "px-6 py-4",
+    text: "text-xl"
+  }
 };
-var sizes = {
-  xs: "px-2 py-1 text-xs",
-  sm: "px-3 py-2 text-sm",
-  md: "px-4 py-2 text-base",
-  lg: "px-5 py-3 text-lg",
-  xl: "px-6 py-4 text-xl"
-};
+function isTextClassName(token) {
+  const styleToken = token.split(":").pop() ?? token;
+  return styleToken.startsWith("text-");
+}
+function splitClassName(className) {
+  const tokens = className.split(/\s+/).filter(Boolean);
+  return {
+    root: tokens.filter((token) => !isTextClassName(token)).join(" "),
+    text: tokens.filter(isTextClassName).join(" ")
+  };
+}
+function resolveFormResponseStyles({
+  shape,
+  size,
+  variant
+}) {
+  const variantClassNames = splitClassName(variantsLite[variant]);
+  const sizeClassNames = formResponseSizeStyles[size];
+  return {
+    rootClassName: [
+      "border",
+      variantClassNames.root,
+      shapes[shape],
+      sizeClassNames.root
+    ].filter(Boolean).join(" "),
+    textClassName: [
+      "font-poppins font-light",
+      variantClassNames.text,
+      sizeClassNames.text
+    ].filter(Boolean).join(" ")
+  };
+}
 function FormResponse({
   text: text10,
   variant = "default",
   shape = "roundedSquare",
   size = "md",
-  styles
+  className,
+  textClassName
 }) {
-  return /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: text10 ? true : false, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames77({
-        "font-poppins font-light text-sm": true,
-        [`${variantsLite[variant]}`]: variant,
-        [`${shapes[shape]}`]: shape,
-        [`${sizes[size]}`]: size,
-        [`${styles}`]: styles
-      }),
-      children: text10
-    }
-  ) });
+  const styles = resolveFormResponseStyles({ shape, size, variant });
+  return /* @__PURE__ */ jsx(Transition.TransitionDropdown, { visibility: Boolean(text10), children: /* @__PURE__ */ jsx("div", { className: cn(styles.rootClassName, className), children: /* @__PURE__ */ jsx("span", { className: cn(styles.textClassName, textClassName), children: text10 }) }) });
 }
-var FormResponse_default = FormResponse;
 function ImageView({ imageUrl, secure = true, alt = "image" }) {
   return /* @__PURE__ */ jsx("div", { className: "h-[200px] w-[300px]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-hidden bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(
     Image,
@@ -8041,7 +8333,7 @@ var ImageInput = forwardRef(
           /* @__PURE__ */ jsxs(
             "label",
             {
-              className: classNames77({
+              className: classNames72({
                 "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
@@ -8088,7 +8380,7 @@ var ImageInput = forwardRef(
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(
-        InputResponse_default,
+        InputResponse,
         {
           name: field.name,
           visibility: meta.touched && meta.error ? true : false,
@@ -8133,7 +8425,7 @@ function MultiImageInput({
       ) })
     ] }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8151,14 +8443,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: classNames72({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -8171,7 +8463,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames77({
+                  className: classNames72({
                     "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
@@ -8183,7 +8475,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames77({
+                  className: classNames72({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -8196,7 +8488,7 @@ function Radio({
       });
     } }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8226,7 +8518,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -8239,7 +8531,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames77({
+            className: classNames72({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -8248,7 +8540,7 @@ function StarRatingInput({
           index3
         )) }),
         /* @__PURE__ */ jsx(
-          InputResponse_default,
+          InputResponse,
           {
             name: field.name,
             visibility: meta.touched && meta.error ? true : false,
@@ -8272,10 +8564,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(
@@ -8283,7 +8575,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames77({
+        className: classNames72({
           "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,
@@ -8297,7 +8589,7 @@ function Select({
       }
     ),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8318,7 +8610,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: [
@@ -8335,7 +8627,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames77(
+            className: classNames72(
               "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",
@@ -8348,7 +8640,7 @@ function Switch({
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: name2,
         visibility: meta.touched && meta.error ? true : false,
@@ -8392,7 +8684,7 @@ function Tags({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames77(
+          className: classNames72(
             "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,
@@ -8437,10 +8729,10 @@ function Tags({
         }
       ),
       /* @__PURE__ */ jsx(
-        InputLabel_default,
+        InputLabel,
         {
           text: placeholder,
-          styles: classNames77(
+          className: classNames72(
             "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"
           )
@@ -8453,7 +8745,7 @@ function Tags({
       ] })
     ] }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8481,7 +8773,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames77({
+          className: classNames72({
             "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),
@@ -8492,10 +8784,10 @@ function TextArea({
         }
       ),
       /* @__PURE__ */ jsx(
-        InputLabel_default,
+        InputLabel,
         {
           text: placeholder,
-          styles: classNames77(
+          className: classNames72(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -8508,7 +8800,7 @@ function TextArea({
       ] })
     ] }),
     /* @__PURE__ */ jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8529,7 +8821,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames77({
+      className: classNames72({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -8606,7 +8898,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classNames77({
+            className: classNames72({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -8620,7 +8912,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -8664,7 +8956,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77(
+        className: classNames72(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -8675,7 +8967,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames77(
+        className: classNames72(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -8704,7 +8996,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -8752,7 +9044,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77({
+        className: classNames72({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -8765,7 +9057,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -8806,7 +9098,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77({
+        className: classNames72({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -8851,7 +9143,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames77({
+      className: classNames72({
         "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,
@@ -8880,7 +9172,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -8933,7 +9225,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -8995,7 +9287,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames77({
+        className: classNames72({
           "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,
@@ -9023,7 +9315,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsx(
             BsChevronDown,
             {
-              className: classNames77({
+              className: classNames72({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -9036,7 +9328,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77({
+        className: classNames72({
           "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
         }),
@@ -9066,7 +9358,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames77({
+      className: classNames72({
         "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,
@@ -9095,7 +9387,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9135,7 +9427,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames77({
+      className: classNames72({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -12327,7 +12619,7 @@ function Accordion({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classNames77(
+        className: classNames72(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -12348,7 +12640,7 @@ function Accordion({
               children: /* @__PURE__ */ jsx(
                 FaCircleChevronDown,
                 {
-                  className: classNames77("text-xl transition-transform duration-300", {
+                  className: classNames72("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -12362,7 +12654,7 @@ function Accordion({
     /* @__PURE__ */ jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77(
+        className: classNames72(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -12419,7 +12711,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -12435,14 +12727,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: classNames72("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: classNames72(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -12484,7 +12776,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77("absolute inset-0"),
+      className: classNames72("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -12630,7 +12922,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: classNames72("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 })
@@ -16876,7 +17168,7 @@ var ProgressBar = ({
     hasBottomLabel && /* @__PURE__ */ jsx("div", { className: "mt-2", children: labelNode })
   ] });
 };
-var sizes2 = {
+var sizes = {
   ["xs" /* xs */]: "text-[10px]",
   ["sm" /* sm */]: "text-xs",
   ["md" /* md */]: "text-sm",
@@ -16906,7 +17198,7 @@ var StarRating = ({
         className: cn(
           "inline-flex items-center gap-[2px]",
           "text-yellow-500 dark:text-yellow-400",
-          sizes2[size],
+          sizes[size],
           iconClassName
         ),
         children: [
@@ -16919,7 +17211,7 @@ var StarRating = ({
     showValue && valuePosition === "end" && ratingValue
   ] });
 };
-var sizes3 = {
+var sizes2 = {
   ["xs" /* xs */]: {
     value: "text-2xl",
     review: "text-xs"
@@ -16951,7 +17243,7 @@ var NumericRating = ({
   className,
   ...rest
 }) => {
-  const sizeStyles = sizes3[size];
+  const sizeStyles = sizes2[size];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -17627,7 +17919,7 @@ var YoutubeVideo = ({
 }) => {
   const videoId = getYoutubeVideoId(videoUrl);
   if (!videoId) {
-    return /* @__PURE__ */ jsx(FormResponse_default, { text: "Invalid YouTube URL", variant: "danger" });
+    return /* @__PURE__ */ jsx(FormResponse, { text: "Invalid YouTube URL", variant: "danger" });
   }
   const params = new URLSearchParams({
     autoplay: autoPlay ? "1" : "0",
@@ -17715,7 +18007,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames77(
+            className: classNames72(
               "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"
             )
@@ -29260,7 +29552,7 @@ function AsyncStateCard({
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-eui-dark-900 dark:text-eui-light-600", children: title }),
-          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 })
+          isError ? /* @__PURE__ */ jsx(FormResponse, { 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_web_default,
@@ -29484,7 +29776,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames77(
+      className: classNames72(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -29496,7 +29788,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames77(
+              className: classNames72(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -29888,7 +30180,7 @@ var ContentArea = forwardRef(
       "div",
       {
         ref,
-        className: classNames77({
+        className: classNames72({
           "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,
@@ -29905,7 +30197,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29918,7 +30210,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29937,7 +30229,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -29954,7 +30246,7 @@ var Layout = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -29976,7 +30268,7 @@ var Header = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -30011,7 +30303,7 @@ var Content = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         "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)
@@ -30027,7 +30319,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         "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
@@ -30215,7 +30507,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: classNames77({
+          className: classNames72({
             "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
@@ -31131,7 +31423,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxs(
     "section",
     {
-      className: classNames77(
+      className: classNames72(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -31145,7 +31437,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsx(
           "main",
           {
-            className: classNames77(
+            className: classNames72(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -31153,7 +31445,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: classNames77(
+                className: classNames72(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -31166,7 +31458,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsx(
           "aside",
           {
-            className: classNames77(
+            className: classNames72(
               "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",
@@ -31175,7 +31467,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: classNames77(
+                className: classNames72(
                   "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, {}) })
@@ -31451,7 +31743,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames77(
+      className: classNames72(
         "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",
@@ -42547,7 +42839,7 @@ function markdownTable(table2, options) {
   let rowIndex = -1;
   while (++rowIndex < table2.length) {
     const row2 = [];
-    const sizes5 = [];
+    const sizes4 = [];
     let columnIndex2 = -1;
     if (table2[rowIndex].length > mostCellsPerRow) {
       mostCellsPerRow = table2[rowIndex].length;
@@ -42556,7 +42848,7 @@ function markdownTable(table2, options) {
       const cell = serialize2(table2[rowIndex][columnIndex2]);
       if (settings.alignDelimiters !== false) {
         const size = stringLength(cell);
-        sizes5[columnIndex2] = size;
+        sizes4[columnIndex2] = size;
         if (longestCellByColumn[columnIndex2] === void 0 || size > longestCellByColumn[columnIndex2]) {
           longestCellByColumn[columnIndex2] = size;
         }
@@ -42564,7 +42856,7 @@ function markdownTable(table2, options) {
       row2.push(cell);
     }
     cellMatrix[rowIndex] = row2;
-    sizeMatrix[rowIndex] = sizes5;
+    sizeMatrix[rowIndex] = sizes4;
   }
   let columnIndex = -1;
   if (typeof align === "object" && "length" in align) {
@@ -42579,7 +42871,7 @@ function markdownTable(table2, options) {
   }
   columnIndex = -1;
   const row = [];
-  const sizes4 = [];
+  const sizes3 = [];
   while (++columnIndex < mostCellsPerRow) {
     const code4 = alignments[columnIndex];
     let before = "";
@@ -42602,17 +42894,17 @@ function markdownTable(table2, options) {
       if (size > longestCellByColumn[columnIndex]) {
         longestCellByColumn[columnIndex] = size;
       }
-      sizes4[columnIndex] = size;
+      sizes3[columnIndex] = size;
     }
     row[columnIndex] = cell;
   }
   cellMatrix.splice(1, 0, row);
-  sizeMatrix.splice(1, 0, sizes4);
+  sizeMatrix.splice(1, 0, sizes3);
   rowIndex = -1;
   const lines = [];
   while (++rowIndex < cellMatrix.length) {
     const row2 = cellMatrix[rowIndex];
-    const sizes5 = sizeMatrix[rowIndex];
+    const sizes4 = sizeMatrix[rowIndex];
     columnIndex = -1;
     const line = [];
     while (++columnIndex < mostCellsPerRow) {
@@ -42620,7 +42912,7 @@ function markdownTable(table2, options) {
       let before = "";
       let after = "";
       if (settings.alignDelimiters !== false) {
-        const size = longestCellByColumn[columnIndex] - (sizes5[columnIndex] || 0);
+        const size = longestCellByColumn[columnIndex] - (sizes4[columnIndex] || 0);
         const code4 = alignments[columnIndex];
         if (code4 === 114) {
           before = " ".repeat(size);
@@ -54188,7 +54480,7 @@ function MarkdownHeading({
       id: id2,
       level: typographyLevel,
       bold: true,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-heading group relative scroll-mt-24 font-bold leading-tight text-gray-900 dark:text-gray-100",
         HEADING_STYLES[level],
         className
@@ -54351,18 +54643,18 @@ function powerSetPermutations(arr) {
   }
 }
 var classNameCombinations = {};
-function getClassNameCombinations(classNames81) {
-  if (classNames81.length === 0 || classNames81.length === 1) return classNames81;
-  var key = classNames81.join(".");
+function getClassNameCombinations(classNames76) {
+  if (classNames76.length === 0 || classNames76.length === 1) return classNames76;
+  var key = classNames76.join(".");
   if (!classNameCombinations[key]) {
-    classNameCombinations[key] = powerSetPermutations(classNames81);
+    classNameCombinations[key] = powerSetPermutations(classNames76);
   }
   return classNameCombinations[key];
 }
-function createStyleObject(classNames81) {
+function createStyleObject(classNames76) {
   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 = classNames76.filter(function(className) {
     return className !== "token";
   });
   var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
@@ -54370,8 +54662,8 @@ function createStyleObject(classNames81) {
     return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
   }, elementStyle);
 }
-function createClassNameString(classNames81) {
-  return classNames81.join(" ");
+function createClassNameString(classNames76) {
+  return classNames76.join(" ");
 }
 function createChildren2(stylesheet, useInlineStyles) {
   var childrenCount = 0;
@@ -54544,8 +54836,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 classNames76 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
+      flattenCodeTree(node2.children, classNames76).forEach(function(i2) {
         return newTree.push(i2);
       });
     }
@@ -55209,7 +55501,7 @@ function MarkdownCodeBlock({
     "div",
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
         className
       ),
@@ -55280,7 +55572,7 @@ function MarkdownInlineCode({
     Code,
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "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
       ),
@@ -55321,7 +55613,7 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames77(
+      className: classNames72(
         "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
       ),
@@ -55356,7 +55648,7 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
         className
       )
@@ -55373,7 +55665,7 @@ function MarkdownTable({
     TableElement,
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-table w-full border-collapse text-[0.925rem]",
         className
       ),
@@ -55390,7 +55682,7 @@ function MarkdownTableCell({
     TableCell,
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "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
       ),
@@ -55407,7 +55699,7 @@ function MarkdownTableHeaderCell({
     TableHeaderCell,
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "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
       ),
@@ -55423,7 +55715,7 @@ function MarkdownTableHead({
     TableHead,
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
         className
       )
@@ -55438,7 +55730,7 @@ function MarkdownTableBody({
     TableBody,
     {
       ...props,
-      className: classNames77("eui-markdown-table-body", className)
+      className: classNames72("eui-markdown-table-body", className)
     }
   );
 }
@@ -55450,7 +55742,7 @@ function MarkdownTableRow({
     TableRow,
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
         className
       )
@@ -55468,7 +55760,7 @@ function MarkdownBlockquote({
     {
       ...props,
       as: "blockquote",
-      className: classNames77(
+      className: classNames72(
         "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
       ),
@@ -55487,7 +55779,7 @@ function MarkdownParagraph({
     {
       ...props,
       level: 1,
-      className: classNames77("eui-markdown-paragraph my-4", className),
+      className: classNames72("eui-markdown-paragraph my-4", className),
       children: /* @__PURE__ */ jsx(Fragment, { children: children3 })
     }
   );
@@ -55498,7 +55790,7 @@ function MarkdownStrong({ className, ...props }) {
     "strong",
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55511,7 +55803,7 @@ function MarkdownEmphasis({ className, ...props }) {
     "em",
     {
       ...props,
-      className: classNames77("eui-markdown-emphasis italic", className)
+      className: classNames72("eui-markdown-emphasis italic", className)
     }
   );
 }
@@ -55524,7 +55816,7 @@ function MarkdownStrikethrough({
     "del",
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
         className
       )
@@ -55585,7 +55877,7 @@ function MarkdownTaskCheckbox({
     "input",
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
         className
       )
@@ -55601,7 +55893,7 @@ function MarkdownThematicBreak({
     "hr",
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
         className
       )
@@ -55618,7 +55910,7 @@ function MarkdownDetails({ className, ...props }) {
     "details",
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "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
       )
@@ -55630,7 +55922,7 @@ function MarkdownSummary({ className, ...props }) {
     "summary",
     {
       ...props,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55642,7 +55934,7 @@ function MarkdownFigure({ className, ...props }) {
     "figure",
     {
       ...props,
-      className: classNames77("eui-markdown-figure my-6", className)
+      className: classNames72("eui-markdown-figure my-6", className)
     }
   );
 }
@@ -55654,7 +55946,7 @@ function MarkdownFigcaption({
   return /* @__PURE__ */ jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsx(
     Caption,
     {
-      className: classNames77(
+      className: classNames72(
         "text-gray-500 opacity-100 dark:text-gray-400",
         className
       ),
@@ -56053,14 +56345,14 @@ function MarkdownRenderer({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "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: classNames72(
             "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
             contentClassName
           ),
@@ -56138,11 +56430,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames77(
+      className: classNames72(
         "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 ? classNames72("text-primary font-semibold underline", activeClassName) : classNames72("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -56208,7 +56500,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsx(
       "div",
       {
-        className: classNames77(
+        className: classNames72(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -56228,7 +56520,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames77(
+        className: classNames72(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -56241,7 +56533,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsx(
             "span",
             {
-              className: classNames77(
+              className: classNames72(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -56254,7 +56546,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsx(
       "h2",
       {
-        className: classNames77(
+        className: classNames72(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -56266,7 +56558,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsx(
       "nav",
       {
-        className: classNames77(
+        className: classNames72(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -56290,7 +56582,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsx("aside", { className: classNames77("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsx("aside", { className: classNames72("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -56389,7 +56681,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "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",
@@ -56403,7 +56695,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: classNames72(
               "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",
@@ -56423,7 +56715,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames77(
+            className: classNames72(
               "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",
@@ -56680,7 +56972,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56696,7 +56988,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames77(toolbarClassName, toolbarProps?.className),
+            className: classNames72(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -56704,7 +56996,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsx(
           "div",
           {
-            className: classNames77(
+            className: classNames72(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -56727,7 +57019,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames77(
+            className: classNames72(
               "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",
@@ -56757,7 +57049,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56807,7 +57099,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -56817,7 +57109,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77(
+            className: classNames72(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -56841,7 +57133,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77(
+            className: classNames72(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -56931,7 +57223,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -56941,7 +57233,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames77(
+            className: classNames72(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -56966,14 +57258,14 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsx(
           "p",
           {
-            className: classNames77(
+            className: classNames72(
               "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" })
       ]
     }
   );
@@ -57021,7 +57313,7 @@ function CodeMirrorMarkdownEditor({
     {
       id: id2,
       "data-name": name2,
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-adapter",
         "eui-markdown-codemirror-adapter",
         "overflow-hidden rounded border border-gray-300 bg-white",
@@ -57055,7 +57347,7 @@ function CodeMirrorMarkdownEditor({
             closeBrackets: true,
             bracketMatching: true
           },
-          className: classNames77("eui-markdown-codemirror", editorClassName),
+          className: classNames72("eui-markdown-codemirror", editorClassName),
           onChange: updateValue,
           onBlur
         }
@@ -57150,7 +57442,7 @@ function createDefaultPlugins({
     ...showToolbar ? [
       toolbarPlugin({
         toolbarContents: toolbarContents ?? DefaultToolbar,
-        toolbarClassName: classNames77(
+        toolbarClassName: classNames72(
           "eui-markdown-mdx-toolbar",
           toolbarClassName
         ),
@@ -57267,7 +57559,7 @@ var MDXMarkdownEditor = forwardRef(
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
         onBlurCapture: handleBlur,
-        className: classNames77(
+        className: classNames72(
           "eui-markdown-adapter",
           "eui-markdown-mdx-adapter",
           dark && ["dark", "dark-theme"],
@@ -57285,8 +57577,8 @@ var MDXMarkdownEditor = forwardRef(
             markdown: currentValue ?? "",
             readOnly: disabled || readOnly,
             plugins: plugins ?? defaultPlugins,
-            className: classNames77("eui-markdown-mdx-editor", editorClassName),
-            contentEditableClassName: classNames77(
+            className: classNames72("eui-markdown-mdx-editor", editorClassName),
+            contentEditableClassName: classNames72(
               "eui-markdown-mdx-content",
               contentEditableClassName
             ),
@@ -57323,7 +57615,7 @@ function MDXMarkdownField({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-mdx-field",
         "relative space-y-2",
         wrapperClassName
@@ -57333,7 +57625,7 @@ function MDXMarkdownField({
           "label",
           {
             htmlFor: editorId,
-            className: classNames77(
+            className: classNames72(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57367,7 +57659,7 @@ function MDXMarkdownField({
           "p",
           {
             id: helperId,
-            className: classNames77(
+            className: classNames72(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57375,7 +57667,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,
@@ -57427,10 +57719,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: classNames72("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -57442,7 +57734,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsx(
           "header",
           {
-            className: classNames77(
+            className: classNames72(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -57453,7 +57745,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames77(
+            className: classNames72(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -57466,7 +57758,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames77(
+                  className: classNames72(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -57479,7 +57771,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames77(
+                  className: classNames72(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57492,7 +57784,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsx(
                 "main",
                 {
-                  className: classNames77(
+                  className: classNames72(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -57503,7 +57795,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames77(
+                  className: classNames72(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57516,7 +57808,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsx(
                 "aside",
                 {
-                  className: classNames77(
+                  className: classNames72(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -57532,7 +57824,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsx(
           "footer",
           {
-            className: classNames77(
+            className: classNames72(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -57569,7 +57861,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77(
+      className: classNames72(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -57580,7 +57872,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsx(
             "h1",
             {
-              className: classNames77(
+              className: classNames72(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -57592,7 +57884,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsx(
             "div",
             {
-              className: classNames77(
+              className: classNames72(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -57680,7 +57972,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         [`${styles}`]: styles
       }),
       children: children3
@@ -57729,7 +58021,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames77({
+      className: classNames72({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -57809,6 +58101,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_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_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, 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 };
+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, 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