elseware-ui 3.0.0 → 3.0.2

package/dist/index.js

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var tailwindMerge = require('tailwind-merge');
 var index_js$1 = require('react-icons/ai/index.js');
 var formik = require('formik');
-var classNames77 = require('classnames');
 var index_js$2 = require('react-icons/fa/index.js');
+var classNames72 = require('classnames');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var cloudinaryReact = require('cloudinary-react');
 var index_js = require('react-icons/md/index.js');
@@ -27,7 +27,7 @@ require('@mdxeditor/editor/style.css');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React26__default = /*#__PURE__*/_interopDefault(React26);
-var classNames77__default = /*#__PURE__*/_interopDefault(classNames77);
+var classNames72__default = /*#__PURE__*/_interopDefault(classNames72);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
@@ -6095,14 +6095,14 @@ var Shape = /* @__PURE__ */ ((Shape2) => {
 // src/data/styles.tsx
 var variantsSolid = {
   ["default" /* default */]: "bg-gray-300 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
-  ["primary" /* primary */]: "bg-gradient-to-r from-eui-primary-500 to-eui-primary-600 text-white hover:brightness-110",
-  ["secondary" /* secondary */]: "bg-gradient-to-r from-eui-secondary-600 to-eui-secondary-500 text-white hover:brightness-110",
-  ["success" /* success */]: "bg-gradient-to-r from-eui-success-600 to-eui-success-500 text-white hover:brightness-110",
-  ["danger" /* danger */]: "bg-gradient-to-r from-eui-danger-600 to-eui-danger-500 text-white hover:brightness-110",
-  ["warning" /* warning */]: "bg-gradient-to-r from-eui-warning-500 to-eui-warning-400 text-black hover:brightness-105",
-  ["info" /* info */]: "bg-gradient-to-r from-eui-info-600 to-eui-info-500 text-white hover:brightness-110",
-  ["light" /* light */]: "bg-gradient-to-r from-eui-light-400 to-eui-light-300 text-gray-900 hover:brightness-105 dark:from-gray-200 dark:to-gray-100 dark:text-gray-900",
-  ["dark" /* dark */]: "bg-gradient-to-r from-eui-dark-400 to-eui-dark-500 text-white hover:brightness-110 dark:from-eui-dark-300 dark:to-eui-dark-400"
+  ["primary" /* primary */]: "bg-eui-primary-500 text-white hover:bg-eui-primary-600",
+  ["secondary" /* secondary */]: "bg-eui-secondary-500 text-white hover:bg-eui-secondary-600",
+  ["success" /* success */]: "bg-eui-success-500 text-white hover:bg-eui-success-600",
+  ["danger" /* danger */]: "bg-eui-danger-500 text-white hover:bg-eui-danger-600",
+  ["warning" /* warning */]: "bg-eui-warning-500 text-black hover:bg-eui-warning-400",
+  ["info" /* info */]: "bg-eui-info-500 text-white hover:bg-eui-info-600",
+  ["light" /* light */]: "bg-eui-light-400 text-gray-900 hover:bg-eui-light-300 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-100",
+  ["dark" /* dark */]: "bg-eui-dark-500 text-white hover:bg-eui-dark-400 dark:bg-eui-dark-400 dark:hover:bg-eui-dark-300"
 };
 var variantsLite = {
   ["default" /* default */]: "bg-gray-500/10 border border-gray-300 text-gray-700 dark:bg-gray-400/10 dark:border-gray-700 dark:text-gray-200",
@@ -6188,17 +6188,6 @@ var cardBgVariants = {
   ["light" /* light */]: "bg-eui-light-500/10",
   ["dark" /* dark */]: "bg-eui-dark-500/20"
 };
-var checkboxVariants = {
-  ["default" /* default */]: "checked:bg-gray-600 checked:border-gray-600 dark:checked:bg-gray-500 dark:checked:border-gray-500",
-  ["primary" /* primary */]: "checked:bg-eui-primary-600 checked:border-eui-primary-600 dark:checked:bg-eui-primary-500 dark:checked:border-eui-primary-500",
-  ["secondary" /* secondary */]: "checked:bg-eui-secondary-600 checked:border-eui-secondary-600 dark:checked:bg-eui-secondary-500 dark:checked:border-eui-secondary-500",
-  ["success" /* success */]: "checked:bg-eui-success-600 checked:border-eui-success-600 dark:checked:bg-eui-success-500 dark:checked:border-eui-success-500",
-  ["danger" /* danger */]: "checked:bg-eui-danger-600 checked:border-eui-danger-600 dark:checked:bg-eui-danger-500 dark:checked:border-eui-danger-500",
-  ["warning" /* warning */]: "checked:bg-eui-warning-500 checked:border-eui-warning-500 dark:checked:bg-eui-warning-400 dark:checked:border-eui-warning-400",
-  ["info" /* info */]: "checked:bg-eui-info-600 checked:border-eui-info-600 dark:checked:bg-eui-info-500 dark:checked:border-eui-info-500",
-  ["light" /* light */]: "checked:bg-eui-light-400 checked:border-eui-light-400 dark:checked:bg-gray-200 dark:checked:border-gray-200",
-  ["dark" /* dark */]: "checked:bg-eui-dark-500 checked:border-eui-dark-500 dark:checked:bg-eui-dark-300 dark:checked:border-eui-dark-300"
-};
 var toastPositionStyles = {
   ["top-left" /* topLeft */]: "top-4 left-4 items-start",
   ["top-center" /* topCenter */]: "top-4 left-1/2 -translate-x-1/2 items-center",
@@ -6298,18 +6287,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,
@@ -6342,12 +6327,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;
@@ -6375,11 +6363,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,
@@ -6392,18 +6375,18 @@ function Button({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        glow && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: "pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
             style: {
               background: `
-            radial-gradient(
-              200px circle at var(--glow-x) var(--glow-y),
-              rgba(255,255,255,0.18),
-              transparent 50%
-            )
-          `
+              radial-gradient(
+                200px circle at var(--glow-x) var(--glow-y),
+                rgba(255,255,255,0.18),
+                transparent 50%
+              )
+            `
             }
           }
         ),
@@ -6418,8 +6401,7 @@ function Button({
             style: {
               height: iconSize,
               lineHeight: 0,
-              width: iconSize,
-              ...contentStyle
+              width: iconSize
             },
             children: resolvedIcon
           }
@@ -6432,8 +6414,7 @@ function Button({
               labelClassName
             ),
             style: {
-              minHeight: iconSize,
-              ...labelStyle
+              minHeight: iconSize
             },
             children: labelContent
           }
@@ -6443,11 +6424,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__ */ jsxRuntime.jsx(
+    "label",
+    {
+      htmlFor,
+      className: cn(
+        isFloatingLabel ? inputLabelBaseClassName : inputLabelStaticClassName,
+        isFloatingLabel && inputLabelTransitionClassName,
+        isFloatingLabel && (floating === true ? inputLabelFloatingClassName : inputLabelRestingClassName),
+        errored && inputLabelErrorClassName,
+        disabled && inputLabelDisabledClassName,
+        className
+      ),
+      children: text10 || children3
+    }
+  );
+}
 var Backdrop = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "bg-black/75 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden": true,
         [`${styles}`]: styles
       }),
@@ -7037,7 +7053,7 @@ function renderTransitionChild(children3, className) {
   }
   const element7 = child;
   return React26__default.default.cloneElement(element7, {
-    className: classNames77__default.default(element7.props.className, className)
+    className: classNames72__default.default(element7.props.className, className)
   });
 }
 function TransitionBase({
@@ -7057,7 +7073,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames77__default.default(
+  const transitionClassName = classNames72__default.default(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -7215,114 +7231,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__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Transition.TransitionFadeIn, { visibility, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
-        "font-medium text-sm py-1 px-2": true,
-        [`${textVariants[variant]}`]: variant,
-        "transition-all ease-in-out": true,
-        [`${styles}`]: styles
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: name2 })
+      className: cn(
+        inputResponseBaseClassName,
+        inputResponseVariants[variant],
+        className
+      ),
+      children: message ?? /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name: name2 })
     }
   ) });
 }
-var InputResponse_default = InputResponse;
-function InputLabel({ text: text10, children: children3, styles }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "label",
-    {
-      className: classNames77__default.default({
-        "px-0 eui-text-sm text-[13.5px] pointer-events-none select-none": true,
-        "transition-all ease-in-out": true,
-        [`${styles}`]: styles
-      }),
-      children: text10 || children3
-    }
-  );
+function resolveInputType({
+  passwordVisible,
+  type: type2
+}) {
+  return type2 === "password" && passwordVisible ? "text" : type2;
 }
-var InputLabel_default = InputLabel;
-var toggleType = (visibility) => {
-  return visibility ? "text" : "password";
-};
-var PasswordVisibilityToggler = ({
-  onClick
-}) => {
-  const [passwordVisibility, setPasswordVisibilty] = React26.useState(false);
-  const handleOnClick = (visibility) => {
-    onClick(visibility);
-    setPasswordVisibilty(visibility);
+function useResolvedInputConfig({
+  label,
+  placeholder,
+  shape,
+  type: type2 = "text"
+}) {
+  const eui = useEUIConfig();
+  return {
+    shape: shape ?? eui?.config?.global?.shape ?? "square",
+    type: type2,
+    label: label ?? placeholder
   };
+}
+function useInputFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    meta,
+    helpers
+  };
+}
+
+// src/components/data-entry/input/input/base/Input.styles.ts
+var inputShapes = shapes;
+var inputRootClassName = "relative w-full";
+var inputFrameClassName = "relative h-14 w-full overflow-hidden border bg-white/95 px-3 dark:bg-eui-dark-800";
+var inputFrameIdleClassName = "border-gray-300 hover:border-gray-400 dark:border-eui-dark-300 dark:hover:border-eui-dark-200";
+var inputFrameActiveClassName = "border-eui-secondary-600";
+var inputFrameErrorClassName = "border-eui-danger-500";
+var inputFrameDisabledClassName = "cursor-not-allowed opacity-60";
+var inputControlClassName = "w-full bg-transparent pt-5 pb-2 text-base font-medium text-gray-950 dark:text-gray-50";
+
+// src/components/data-entry/input/input/web/Input.web.styles.ts
+var webInputControlClassName = "placeholder-transparent outline-none transition-all duration-200 ease-out";
+var webPasswordToggleClassName = "absolute right-3 top-[18px] cursor-pointer text-xl text-eui-dark-200 transition-colors duration-180 hover:text-eui-secondary-700";
+function PasswordVisibilityToggler({
+  passwordVisible,
+  onToggle
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "text-eui-dark-200 absolute text-2xl right-3 top-[16px] cursor-pointer",
-      onClick: () => handleOnClick(!passwordVisibility),
-      children: passwordVisibility ? /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaEyeSlash, {}) : /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaEye, {})
+      className: webPasswordToggleClassName,
+      onClick: () => onToggle(!passwordVisible),
+      children: passwordVisible ? /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaEyeSlash, {}) : /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaEye, {})
     }
   );
-};
-var Input = ({
-  type: type2 = "text",
-  placeholder,
-  styles,
-  step,
-  shape,
-  ...props
-}) => {
-  const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [field, meta] = formik.useField(props);
-  const [passwordVisibility, setPasswordVisibilty] = React26.useState(false);
-  const inputType = type2 === "password" ? toggleType(passwordVisibility) : type2;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+}
+function Input(inputProps) {
+  const {
+    type: type2 = "text",
+    id: id2,
+    label,
+    placeholder,
+    inputClassName,
+    labelClassName,
+    responseClassName,
+    step,
+    shape,
+    disabled = false,
+    className,
+    onBlur,
+    onFocus,
+    ...props
+  } = inputProps;
+  const { field, meta } = useInputFieldState(inputProps);
+  const [focused, setFocused] = React26.useState(false);
+  const [passwordVisible, setPasswordVisible] = React26.useState(false);
+  const {
+    shape: resolvedShape,
+    type: resolvedType,
+    label: resolvedLabel
+  } = useResolvedInputConfig({
+    label,
+    placeholder,
+    shape,
+    type: type2
+  });
+  const inputType = resolveInputType({
+    passwordVisible,
+    type: resolvedType
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const hasValue = String(field.value ?? "").length > 0;
+  const floating = focused || hasValue;
+  const inputId = id2 ?? field.name;
+  const handleBlur = (event) => {
+    setFocused(false);
+    field.onBlur(event);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputRootClassName, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       formik.Field,
       {
-        type: inputType,
-        step: inputType === "number" && step ? step : void 0,
-        ...field,
         ...props,
-        placeholder,
-        className: classNames77__default.default({
-          "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]": true,
-          "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
-          "border-eui-danger-500": meta.touched && meta.error,
-          [`${shapes[resolvedShape]}`]: true,
-          // "transition-all ease-in-out": true,
-          [`${styles}`]: styles
-        })
+        ...field,
+        disabled,
+        id: inputId,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        placeholder: "",
+        step: inputType === "number" && step ? step : void 0,
+        type: inputType,
+        className: cn(
+          inputFrameClassName,
+          inputControlClassName,
+          webInputControlClassName,
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          inputClassName
+        )
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel_default,
+      InputLabel,
       {
-        text: placeholder,
-        styles: "absolute left-2 top-[0.7px] eui-text-sm text-[13.5px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none"
+        disabled,
+        errored: hasError,
+        floating,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
       }
     ),
-    type2 === "password" && /* @__PURE__ */ jsxRuntime.jsx(PasswordVisibilityToggler, { onClick: (v) => setPasswordVisibilty(v) }),
+    type2 === "password" ? /* @__PURE__ */ jsxRuntime.jsx(
+      PasswordVisibilityToggler,
+      {
+        passwordVisible,
+        onToggle: setPasswordVisible
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
-};
+}
 var InputFile = ({
   placeholder,
   accept = "",
-  styles,
+  className,
   ...props
 }) => {
   const fileInputRef = React26.useRef(null);
@@ -7336,13 +7426,13 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "border rounded-sm bg-eui-primary-300/10 px-3 pt-3 text-md text-eui-dark-100 cursor-pointer h-[50px] flex items-center",
           {
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
             "border-eui-danger-500": meta.touched && meta.error
           },
-          styles
+          className
         ),
         onClick: () => fileInputRef.current?.click(),
         children: field.value?.name || ""
@@ -7359,10 +7449,10 @@ var InputFile = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel_default,
+      InputLabel,
       {
         text: placeholder,
-        styles: classNames77__default.default({
+        className: classNames72__default.default({
           "absolute left-2 eui-text-sm peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none": true,
           "top-[0.7px]": showFloatingLabel,
           "top-[13px] text-base": !showFloatingLabel
@@ -7370,7 +7460,7 @@ var InputFile = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -7411,11 +7501,11 @@ var InputList = ({ name: name2, placeholder, shape }) => {
   const fieldErrors = errors[name2];
   const hasListError = Boolean(errors[name2]) && Boolean(touched[name2]) && typeof errors[name2] === "string";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { text: placeholder }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name: name2, children: ({ push: push2, remove: remove2, move }) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -7444,7 +7534,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames77__default.default(
+                          className: classNames72__default.default(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -7455,7 +7545,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames77__default.default(
+                                className: classNames72__default.default(
                                   "peer h-[50px] w-full border bg-eui-primary-300/10 px-3 pb-2 pt-5 text-md placeholder-transparent placeholder-shown:p-3 focus:outline-none eui-text-md",
                                   shapes[resolvedShape],
                                   hasItemError ? "border-eui-danger-500" : "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -7495,12 +7585,12 @@ var InputList = ({ name: name2, placeholder, shape }) => {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            InputResponse_default,
+            InputResponse,
             {
               name: name2,
               visibility: hasListError,
               variant: "danger",
-              styles: "pb-2"
+              className: "pb-2"
             }
           )
         ]
@@ -7543,7 +7633,7 @@ var InputListGroup = ({
   const groups = values[name2] ?? [];
   const hasError = Boolean(errors[name2]) && Boolean(touched[name2]) && typeof errors[name2] === "string";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { text: placeholder }),
     /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name: name2, children: ({ push: push2, remove: remove2 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       groups.map((group, groupIndex) => {
         const itemsFieldName = `${name2}[${groupIndex}].items`;
@@ -7551,7 +7641,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -7563,7 +7653,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames77__default.default(
+                    className: classNames72__default.default(
                       "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                       shapes[resolvedShape],
                       "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -7594,7 +7684,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames77__default.default(
+                      className: classNames72__default.default(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -7614,7 +7704,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames77__default.default(
+                                  className: classNames72__default.default(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -7625,7 +7715,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames77__default.default(
+                                        className: classNames72__default.default(
                                           "h-[40px] w-full border bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none",
                                           shapes[resolvedShape],
                                           "border-eui-primary-400 focus:border-eui-secondary-500"
@@ -7684,12 +7774,12 @@ var InputListGroup = ({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        InputResponse_default,
+        InputResponse,
         {
           name: name2,
           visibility: hasError,
           variant: "danger",
-          styles: "pb-2"
+          className: "pb-2"
         }
       )
     ] }) })
@@ -7698,13 +7788,20 @@ var InputListGroup = ({
 function isMultiCheckbox(props) {
   return Array.isArray(props.options);
 }
-function Checkbox({
+function useResolvedCheckboxConfig({
+  label,
   placeholder,
-  variant = "primary",
-  shape = "roundedSquare",
-  className,
-  ...props
+  variant,
+  shape
 }) {
+  const eui = useEUIConfig();
+  return {
+    shape: shape ?? eui?.config?.global?.shape ?? "roundedSquare",
+    variant: variant ?? "secondary",
+    label: label ?? placeholder
+  };
+}
+function useCheckboxFieldState(props) {
   const isMulti = isMultiCheckbox(props);
   const [multiField, multiMeta, multiHelpers] = formik.useField(
     props
@@ -7712,89 +7809,238 @@ function Checkbox({
   const [singleField, singleMeta, singleHelpers] = formik.useField(
     props
   );
-  const field = isMulti ? multiField : singleField;
-  const meta = isMulti ? multiMeta : singleMeta;
-  const checkboxClass = cn(
-    // Base
-    "appearance-none cursor-pointer transition-all duration-300",
-    "w-5 h-5 min-w-[1.25rem] min-h-[1.25rem]",
-    "flex-shrink-0 relative",
-    // Unchecked state
-    "bg-white border-2 border-gray-300",
-    "hover:border-gray-400",
-    // Dark mode
-    "dark:bg-neutral-900",
-    "dark:border-neutral-600",
-    "dark:hover:border-neutral-500",
-    // Focus state
-    "focus:outline-none focus:ring-2",
-    "focus:ring-eui-primary-500/30",
-    // Checked variant styles
-    checkboxVariants[variant],
-    // Check icon
-    "checked:before:content-['\u2713']",
-    "checked:before:absolute checked:before:inset-0",
-    "checked:before:flex checked:before:items-center checked:before:justify-center",
-    "checked:before:text-white checked:before:font-bold checked:before:text-sm",
-    // Disabled state
-    "disabled:opacity-50 disabled:cursor-not-allowed",
-    // Shape
-    shapes[shape],
-    className
+  return {
+    isMulti,
+    multiField,
+    multiMeta,
+    multiHelpers,
+    singleField,
+    singleMeta,
+    singleHelpers
+  };
+}
+
+// src/components/data-entry/checkbox/base/Checkbox.styles.ts
+var checkboxShapes = shapes;
+var checkboxGroupClassName = "flex flex-col gap-2";
+var checkboxOptionRowClassName = "flex flex-row items-start gap-3";
+var checkboxLabelClassName = "cursor-pointer select-none text-sm leading-relaxed text-gray-800 dark:text-gray-200";
+var checkboxIndicatorBaseClassName = "relative h-5 w-5 min-h-[1.25rem] min-w-[1.25rem] shrink-0 appearance-none border-2 border-gray-300 bg-white transition-all duration-300 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-eui-primary-500/30 dark:border-neutral-600 dark:bg-neutral-900 dark:hover:border-neutral-500";
+var checkboxIndicatorDisabledClassName = "cursor-not-allowed opacity-50";
+
+// src/components/data-entry/checkbox/web/Checkbox.web.styles.ts
+var webCheckboxVariants = {
+  default: {
+    checkedClassName: "checked:bg-eui-secondary-600 checked:border-eui-secondary-600 dark:checked:bg-eui-secondary-500 dark:checked:border-eui-secondary-500",
+    iconClassName: "text-white"
+  },
+  primary: {
+    checkedClassName: "checked:bg-eui-primary-600 checked:border-eui-primary-600 dark:checked:bg-eui-primary-500 dark:checked:border-eui-primary-500",
+    iconClassName: "text-white"
+  },
+  secondary: {
+    checkedClassName: "checked:bg-eui-secondary-600 checked:border-eui-secondary-600 dark:checked:bg-eui-secondary-500 dark:checked:border-eui-secondary-500",
+    iconClassName: "text-white"
+  },
+  success: {
+    checkedClassName: "checked:bg-eui-success-600 checked:border-eui-success-600 dark:checked:bg-eui-success-500 dark:checked:border-eui-success-500",
+    iconClassName: "text-white"
+  },
+  danger: {
+    checkedClassName: "checked:bg-eui-danger-600 checked:border-eui-danger-600 dark:checked:bg-eui-danger-500 dark:checked:border-eui-danger-500",
+    iconClassName: "text-white"
+  },
+  warning: {
+    checkedClassName: "checked:bg-eui-warning-500 checked:border-eui-warning-500 dark:checked:bg-eui-warning-400 dark:checked:border-eui-warning-400",
+    iconClassName: "text-black"
+  },
+  info: {
+    checkedClassName: "checked:bg-eui-info-600 checked:border-eui-info-600 dark:checked:bg-eui-info-500 dark:checked:border-eui-info-500",
+    iconClassName: "text-white"
+  },
+  light: {
+    checkedClassName: "checked:bg-eui-light-400 checked:border-eui-light-400 dark:checked:bg-gray-200 dark:checked:border-gray-200",
+    iconClassName: "text-gray-900"
+  },
+  dark: {
+    checkedClassName: "checked:bg-eui-dark-500 checked:border-eui-dark-500 dark:checked:bg-eui-dark-300 dark:checked:border-eui-dark-300",
+    iconClassName: "text-white"
+  }
+};
+function resolveWebCheckboxVariantStyles(variant) {
+  return webCheckboxVariants[variant];
+}
+function getIndicatorClassName({
+  checked,
+  className,
+  disabled,
+  indicatorClassName,
+  checkedIndicatorClassName,
+  resolvedShape,
+  variantCheckedClassName
+}) {
+  return cn(
+    checkboxIndicatorBaseClassName,
+    checkboxShapes[resolvedShape],
+    indicatorClassName,
+    className,
+    variantCheckedClassName,
+    checked && checkedIndicatorClassName,
+    disabled && checkboxIndicatorDisabledClassName
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    !isMulti && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-3 items-start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: singleField.name,
-          type: "checkbox",
-          checked: Boolean(singleField.value),
-          onChange: (e) => singleHelpers.setValue(e.target.checked),
-          className: checkboxClass
-        }
+}
+function Tick({
+  checked,
+  checkedIconClassName,
+  iconClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none absolute inset-0 inline-flex items-center justify-center text-sm font-bold leading-none transition-opacity duration-200",
+        iconClassName,
+        checkedIconClassName,
+        checked ? "opacity-100" : "opacity-0"
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      children: "\u2713"
+    }
+  );
+}
+function Checkbox(checkboxProps) {
+  const {
+    label,
+    placeholder,
+    variant,
+    shape,
+    disabled = false,
+    className,
+    groupClassName,
+    optionClassName,
+    indicatorClassName,
+    checkedIndicatorClassName,
+    checkedIconClassName,
+    labelClassName
+  } = checkboxProps;
+  const {
+    shape: resolvedShape,
+    variant: resolvedVariant,
+    label: resolvedLabel
+  } = useResolvedCheckboxConfig({
+    label,
+    placeholder,
+    variant,
+    shape
+  });
+  const {
+    isMulti,
+    multiField,
+    multiMeta,
+    multiHelpers,
+    singleField,
+    singleMeta,
+    singleHelpers
+  } = useCheckboxFieldState(checkboxProps);
+  const variantStyles = resolveWebCheckboxVariantStyles(resolvedVariant);
+  const activeFieldName = isMulti ? multiField.name : singleField.name;
+  const activeMeta = isMulti ? multiMeta : singleMeta;
+  const multiProps = isMultiCheckbox(checkboxProps) ? checkboxProps : null;
+  const singleChecked = singleField.value;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(checkboxGroupClassName, groupClassName), children: [
+    !isMulti && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(checkboxOptionRowClassName, optionClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: singleField.name,
+            name: singleField.name,
+            type: "checkbox",
+            checked: singleChecked,
+            disabled,
+            onBlur: singleField.onBlur,
+            onChange: (event) => singleHelpers.setValue(event.target.checked),
+            className: getIndicatorClassName({
+              checked: singleChecked,
+              className,
+              disabled,
+              indicatorClassName,
+              checkedIndicatorClassName,
+              resolvedShape,
+              variantCheckedClassName: variantStyles.checkedClassName
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Tick,
+          {
+            checked: singleChecked,
+            checkedIconClassName,
+            iconClassName: variantStyles.iconClassName
+          }
+        )
+      ] }),
+      resolvedLabel ? /* @__PURE__ */ jsxRuntime.jsx(
         "label",
         {
           htmlFor: singleField.name,
-          className: cn(
-            "text-sm leading-relaxed cursor-pointer select-none",
-            "text-gray-800 dark:text-gray-200"
-          ),
-          children: placeholder
+          className: cn(checkboxLabelClassName, labelClassName),
+          children: resolvedLabel
         }
-      )
+      ) : null
     ] }),
-    isMulti && props.options.map((option) => {
+    isMulti && multiProps?.options.map((option) => {
       const values = multiField.value ?? [];
       const checked = values.includes(option.value);
+      const optionDisabled = disabled || option.disabled === true;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex flex-row gap-3 items-start my-2",
+          className: cn(checkboxOptionRowClassName, optionClassName),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                id: option.value,
-                type: "checkbox",
-                checked,
-                onChange: () => {
-                  multiHelpers.setValue(
-                    checked ? values.filter((v) => v !== option.value) : [...values, option.value]
-                  );
-                },
-                className: checkboxClass
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  id: option.value,
+                  name: multiField.name,
+                  type: "checkbox",
+                  checked,
+                  disabled: optionDisabled,
+                  onBlur: multiField.onBlur,
+                  onChange: () => {
+                    multiHelpers.setValue(
+                      checked ? values.filter((value) => value !== option.value) : [...values, option.value]
+                    );
+                  },
+                  className: getIndicatorClassName({
+                    checked,
+                    className,
+                    disabled: optionDisabled,
+                    indicatorClassName,
+                    checkedIndicatorClassName,
+                    resolvedShape,
+                    variantCheckedClassName: variantStyles.checkedClassName
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Tick,
+                {
+                  checked,
+                  checkedIconClassName,
+                  iconClassName: variantStyles.iconClassName
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "label",
               {
                 htmlFor: option.value,
                 className: cn(
-                  "text-sm leading-relaxed cursor-pointer select-none",
-                  "text-gray-800 dark:text-gray-200"
+                  checkboxLabelClassName,
+                  optionDisabled && "cursor-not-allowed opacity-60",
+                  labelClassName
                 ),
                 children: option.label
               }
@@ -7805,16 +8051,15 @@ function Checkbox({
       );
     }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
-        name: field.name,
-        visibility: Boolean(meta.touched && meta.error),
+        name: activeFieldName,
+        visibility: Boolean(activeMeta.touched && activeMeta.error),
         variant: "danger"
       }
     )
   ] });
 }
-var Checkbox_default = Checkbox;
 var DateSelector = ({
   placeholder,
   styles,
@@ -7826,10 +8071,10 @@ var DateSelector = ({
   const [field, meta] = formik.useField(props);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel_default,
+      InputLabel,
       {
         text: placeholder,
-        styles: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
+        className: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7839,7 +8084,7 @@ var DateSelector = ({
         ...field,
         ...props,
         placeholder,
-        className: classNames77__default.default({
+        className: classNames72__default.default({
           "border border-eui-primary-400 peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-danger-500": meta.touched && meta.error,
           "transition-all ease-in-out": true,
@@ -7848,12 +8093,22 @@ var DateSelector = ({
         })
       }
     ),
-    meta.touched && meta.error && /* @__PURE__ */ jsxRuntime.jsx(InputResponse_default, { name: field.name, visibility: true, variant: "danger" })
+    meta.touched && meta.error && /* @__PURE__ */ jsxRuntime.jsx(InputResponse, { name: field.name, visibility: true, variant: "danger" })
   ] });
 };
 var DateSelector_default = DateSelector;
-var FormObserver = ({ formik, onChange }) => {
+function renderFormChildren(children3, formik) {
+  return typeof children3 === "function" ? children3(formik) : children3;
+}
+function FormObservers({
+  formik,
+  onChange,
+  onDirtyChange
+}) {
   const prevValuesRef = React26.useRef(formik.values);
+  React26.useEffect(() => {
+    onDirtyChange?.(formik.dirty);
+  }, [formik.dirty, onDirtyChange]);
   React26.useEffect(() => {
     if (!onChange) return;
     const currentValues = formik.values;
@@ -7870,24 +8125,17 @@ var FormObserver = ({ formik, onChange }) => {
     prevValuesRef.current = currentValues;
   }, [formik.values, onChange]);
   return null;
-};
-var FormObserver_default = FormObserver;
-var DirtyObserver = ({ formik, onDirtyChange }) => {
-  React26.useEffect(() => {
-    if (onDirtyChange) {
-      onDirtyChange(formik.dirty);
-    }
-  }, [formik.dirty, onDirtyChange]);
-  return null;
-};
-var DirtyObserver_default = DirtyObserver;
-var UnsavedChangesGuard = ({ formik, enabled }) => {
+}
+function UnsavedChangesGuard({
+  formik,
+  enabled
+}) {
   React26.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 () => {
@@ -7895,19 +8143,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__ */ jsxRuntime.jsx(
     formik.Formik,
     {
@@ -7917,44 +8165,88 @@ var Form = ({
       onSubmit: async (values, helpers) => {
         await onSubmit(values, helpers);
       },
-      children: (formik$1) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(UnsavedChangesGuard_default, { formik: formik$1, enabled: warnOnUnsavedChanges }),
-        /* @__PURE__ */ jsxRuntime.jsx(DirtyObserver_default, { formik: formik$1, onDirtyChange }),
-        /* @__PURE__ */ jsxRuntime.jsx(FormObserver_default, { formik: formik$1, onChange }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames77__default.default(styles), children: children3 })
+      children: (formik$1) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { className, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UnsavedChangesGuard, { formik: formik$1, enabled: warnOnUnsavedChanges }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormObservers,
+          {
+            formik: formik$1,
+            onChange,
+            onDirtyChange
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: renderFormChildren(children3, formik$1) })
       ] })
     }
   );
+}
+
+// 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__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: text10 ? true : false, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: classNames77__default.default({
-        "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__ */ jsxRuntime.jsx(Transition.TransitionDropdown, { visibility: Boolean(text10), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(styles.rootClassName, className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(styles.textClassName, textClassName), children: text10 }) }) });
 }
-var FormResponse_default = FormResponse;
 function ImageView({ imageUrl, secure = true, alt = "image" }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[200px] w-[300px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full overflow-hidden bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
     cloudinaryReact.Image,
@@ -8051,7 +8343,7 @@ var ImageInput = React26.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames77__default.default({
+              className: classNames72__default.default({
                 "border-2 border-dashed border-gray-700 bg-gray-900 h-[200px] w-[300px] flex flex-col gap-2 items-center justify-center group": true,
                 "hover:cursor-pointer hover:border-solid hover:border-gray-600 hover:bg-gray-900/80": true,
                 "transition-all ease-in-out duration-150": true
@@ -8098,7 +8390,7 @@ var ImageInput = React26.forwardRef(
         ] })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        InputResponse_default,
+        InputResponse,
         {
           name: field.name,
           visibility: meta.touched && meta.error ? true : false,
@@ -8143,7 +8435,7 @@ function MultiImageInput({
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8161,14 +8453,14 @@ function Radio({
   const { name: name2 } = props;
   const [field, meta] = formik.useField(props);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputLabel_default, { text: placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { text: placeholder }),
     /* @__PURE__ */ jsxRuntime.jsx(formik.Field, { name: name2, children: (formik) => {
       const { field: field2 } = formik;
       return options.map((option) => {
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default({
+            className: classNames72__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -8181,7 +8473,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames77__default.default({
+                  className: classNames72__default.default({
                     "appearance-none w-4 h-4 border-2 border-eui-primary-400 rounded-full cursor-pointer transition-all duration-300": true,
                     // base radio button styles
                     "checked:bg-eui-secondary-700 checked:border-eui-primary-400": field2.value === option.value
@@ -8193,7 +8485,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames77__default.default({
+                  className: classNames72__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -8206,7 +8498,7 @@ function Radio({
       });
     } }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8236,7 +8528,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -8249,7 +8541,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames77__default.default({
+            className: classNames72__default.default({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -8258,7 +8550,7 @@ function StarRatingInput({
           index3
         )) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          InputResponse_default,
+          InputResponse,
           {
             name: field.name,
             visibility: meta.touched && meta.error ? true : false,
@@ -8282,10 +8574,10 @@ function Select({
   const [field, meta] = formik.useField(props);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel_default,
+      InputLabel,
       {
         text: placeholder,
-        styles: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
+        className: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -8293,7 +8585,7 @@ function Select({
       {
         as: "select",
         ...props,
-        className: classNames77__default.default({
+        className: classNames72__default.default({
           "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
           "border-eui-primary-400": !(meta.touched && meta.error),
           "border-red-500": meta.touched && meta.error,
@@ -8307,7 +8599,7 @@ function Select({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8328,7 +8620,7 @@ function Switch({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row justify-between w-full gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel_default, { text: label }),
+        label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { text: label }),
         description && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "eui-text-md text-[12px] max-w-[500px]", children: description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(formik.Field, { name: name2, children: () => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "relative inline-flex cursor-pointer", children: [
@@ -8345,7 +8637,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-eui-dark-100",
               "peer-checked:after:translate-x-full peer-checked:after:border-white",
               "after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white",
@@ -8358,7 +8650,7 @@ function Switch({
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: name2,
         visibility: meta.touched && meta.error ? true : false,
@@ -8402,7 +8694,7 @@ function Tags({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: classNames77__default.default(
+          className: classNames72__default.default(
             "border rounded-sm flex flex-wrap items-center gap-2 px-2 pt-2 pb-6 min-h-[3rem]",
             {
               "bg-eui-primary-300/10 eui-text-md": true,
@@ -8447,10 +8739,10 @@ function Tags({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        InputLabel_default,
+        InputLabel,
         {
           text: placeholder,
-          styles: classNames77__default.default(
+          className: classNames72__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             input.length > 0 || field.value.length > 0 ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -8463,7 +8755,7 @@ function Tags({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8491,7 +8783,7 @@ function TextArea({
           as: "textarea",
           ...field,
           ...props,
-          className: classNames77__default.default({
+          className: classNames72__default.default({
             "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 resize-none focus:resize-none focus:outline-none": true,
             "transition-all ease-in-out": true,
             "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
@@ -8502,10 +8794,10 @@ function TextArea({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        InputLabel_default,
+        InputLabel,
         {
           text: placeholder,
-          styles: classNames77__default.default(
+          className: classNames72__default.default(
             "absolute left-2 transition-all pointer-events-none text-eui-dark-200",
             field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base"
           )
@@ -8518,7 +8810,7 @@ function TextArea({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse_default,
+      InputResponse,
       {
         name: field.name,
         visibility: meta.touched && meta.error ? true : false,
@@ -8539,7 +8831,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -8616,7 +8908,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames77__default.default({
+            className: classNames72__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -8630,7 +8922,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -8674,7 +8966,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -8685,7 +8977,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -8714,7 +9006,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "text-xl p-3 cursor-pointer": true,
         "transition-all ease-in-out": true,
         "text-eui-dark-500 dark:text-eui-secondary-600": !styles,
@@ -8762,7 +9054,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default({
+        className: classNames72__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -8775,7 +9067,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -8816,7 +9108,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default({
+        className: classNames72__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -8861,7 +9153,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-1 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "text-sm eui-text-sm": !styles,
@@ -8890,7 +9182,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -8943,7 +9235,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -9005,7 +9297,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames77__default.default({
+        className: classNames72__default.default({
           "flex flex-row gap-2 items-center justify-between cursor-pointer p-3 w-full": true,
           "transition-all duration-300 ease-in-out": true,
           "eui-text-md bg-gradient-to-t from-eui-dark-500/10 dark:from-green-700/10": !styles,
@@ -9033,7 +9325,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsxRuntime.jsx(
             index_js$3.BsChevronDown,
             {
-              className: classNames77__default.default({
+              className: classNames72__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -9046,7 +9338,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default({
+        className: classNames72__default.default({
           "absolute min-w-80 left-0 top-full mt-1 border border-eui-dark-300/10 dark:border-eui-dark-300/50 shadow-lg eui-shadow-lg z-50 w-full eui-bg-md": true,
           "transition-all duration-300 ease-in-out": true
         }),
@@ -9076,7 +9368,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "flex flex-row items-center gap-3 cursor-pointer p-3 w-full": true,
         "transition-all duration-200 ease-in-out": true,
         "eui-text-md border-b border-eui-dark-500/20 dark:border-eui-secondary-900/20 bg-gradient-to-r from-eui-dark-500/10 dark:from-eui-secondary-900/10": !styles,
@@ -9105,7 +9397,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9145,7 +9437,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -12337,7 +12629,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -12358,7 +12650,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 index_js$4.FaCircleChevronDown,
                 {
-                  className: classNames77__default.default("text-xl transition-transform duration-300", {
+                  className: classNames72__default.default("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -12372,7 +12664,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -12429,7 +12721,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -12445,14 +12737,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children: children3, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames77__default.default("p-6 text-gray-300 text-sm", className), children: children3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames72__default.default("p-6 text-gray-300 text-sm", className), children: children3 });
 }
 var CardContent_default = CardContent;
 function CardFooter({ children: children3, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -12494,7 +12786,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default("absolute inset-0"),
+      className: classNames72__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -12640,7 +12932,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames77__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames72__default.default("relative overflow-hidden", className), children: [
     AnimationComponent && /* @__PURE__ */ jsxRuntime.jsx(AnimationComponent, { config: animationConfig, animated }),
     OverlayComponent && /* @__PURE__ */ jsxRuntime.jsx(OverlayComponent, { config: overlayConfig }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: children3 })
@@ -16886,7 +17178,7 @@ var ProgressBar = ({
     hasBottomLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: labelNode })
   ] });
 };
-var sizes2 = {
+var sizes = {
   ["xs" /* xs */]: "text-[10px]",
   ["sm" /* sm */]: "text-xs",
   ["md" /* md */]: "text-sm",
@@ -16916,7 +17208,7 @@ var StarRating = ({
         className: cn(
           "inline-flex items-center gap-[2px]",
           "text-yellow-500 dark:text-yellow-400",
-          sizes2[size],
+          sizes[size],
           iconClassName
         ),
         children: [
@@ -16929,7 +17221,7 @@ var StarRating = ({
     showValue && valuePosition === "end" && ratingValue
   ] });
 };
-var sizes3 = {
+var sizes2 = {
   ["xs" /* xs */]: {
     value: "text-2xl",
     review: "text-xs"
@@ -16961,7 +17253,7 @@ var NumericRating = ({
   className,
   ...rest
 }) => {
-  const sizeStyles = sizes3[size];
+  const sizeStyles = sizes2[size];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -17637,7 +17929,7 @@ var YoutubeVideo = ({
 }) => {
   const videoId = getYoutubeVideoId(videoUrl);
   if (!videoId) {
-    return /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: "Invalid YouTube URL", variant: "danger" });
+    return /* @__PURE__ */ jsxRuntime.jsx(FormResponse, { text: "Invalid YouTube URL", variant: "danger" });
   }
   const params = new URLSearchParams({
     autoplay: autoPlay ? "1" : "0",
@@ -17725,7 +18017,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "w-6 h-6 bg-white dark:bg-gray-600 rounded-full shadow-md transition-transform duration-300",
               theme === "dark" ? "translate-x-8" : "translate-x-0"
             )
@@ -29270,7 +29562,7 @@ function AsyncStateCard({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-eui-dark-900 dark:text-eui-light-600", children: title }),
-          isError ? /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: message, variant: "danger" }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-eui-dark-500 dark:text-eui-light-400", children: message })
+          isError ? /* @__PURE__ */ jsxRuntime.jsx(FormResponse, { text: message, variant: "danger" }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-eui-dark-500 dark:text-eui-light-400", children: message })
         ] }),
         onAction && actionText && /* @__PURE__ */ jsxRuntime.jsx(
           Button_web_default,
@@ -29494,7 +29786,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -29506,7 +29798,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames77__default.default(
+              className: classNames72__default.default(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -29898,7 +30190,7 @@ var ContentArea = React26.forwardRef(
       "div",
       {
         ref,
-        className: classNames77__default.default({
+        className: classNames72__default.default({
           "min-h-screen h-full w-full transition-all duration-[200ms]": true,
           "py-3 px-5": !enablePadding,
           "py-3 px-5 lg:px-[150px]": enablePadding,
@@ -29915,7 +30207,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29928,7 +30220,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -29947,7 +30239,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -29964,7 +30256,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -29986,7 +30278,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -30021,7 +30313,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "w-full min-h-screen transition-all duration-200 eui-bg-sm": true,
         "md:pl-[300px]": !overlayedSidebar && sidebarVisible && !isMobile,
         // Shift when sidebar is open (desktop)
@@ -30037,7 +30329,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         "bottom-0 w-full h-fit": true,
         "border-t border-eui-dark-500/40 dark:border-eui-secondary-800 eui-bg-md": !styles,
         [`${styles}`]: styles
@@ -30225,7 +30517,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames77__default.default({
+          className: classNames72__default.default({
             "text-blue-300  px-1 pb-1 mt-1": true,
             "bg-slate-900/70": !showMore,
             "bg-gradient-to-t from-slate-900/50 to-transparent": showMore
@@ -31141,7 +31433,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsxRuntime.jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -31155,7 +31447,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsxRuntime.jsx(
           "main",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -31163,7 +31455,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames77__default.default(
+                className: classNames72__default.default(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -31176,7 +31468,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-documentation-panel-toc",
               "hidden min-w-0 border-l border-gray-200 bg-white lg:block",
               "dark:border-gray-800 dark:bg-gray-950",
@@ -31185,7 +31477,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames77__default.default(
+                className: classNames72__default.default(
                   "documentation-panel-scrollbar h-full overflow-y-auto px-5 py-8"
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownTOC_default, {}) })
@@ -31461,7 +31753,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "w-full min-w-[80px] flex flex-col items-center justify-center py-3 text-center",
         "hover:text-secondary-700 hover:bg-gray-300/10 hover:cursor-pointer",
         selected ? "text-eui-secondary-700 bg-gray-300/10" : "text-gray-400",
@@ -42557,7 +42849,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;
@@ -42566,7 +42858,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;
         }
@@ -42574,7 +42866,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) {
@@ -42589,7 +42881,7 @@ function markdownTable(table2, options) {
   }
   columnIndex = -1;
   const row = [];
-  const sizes4 = [];
+  const sizes3 = [];
   while (++columnIndex < mostCellsPerRow) {
     const code4 = alignments[columnIndex];
     let before = "";
@@ -42612,17 +42904,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) {
@@ -42630,7 +42922,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);
@@ -54198,7 +54490,7 @@ function MarkdownHeading({
       id: id2,
       level: typographyLevel,
       bold: true,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-heading group relative scroll-mt-24 font-bold leading-tight text-gray-900 dark:text-gray-100",
         HEADING_STYLES[level],
         className
@@ -54361,18 +54653,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);
@@ -54380,8 +54672,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;
@@ -54554,8 +54846,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);
       });
     }
@@ -55219,7 +55511,7 @@ function MarkdownCodeBlock({
     "div",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
         className
       ),
@@ -55290,7 +55582,7 @@ function MarkdownInlineCode({
     Code,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-inline-code whitespace-break-spaces rounded-md border border-gray-300/70 bg-gray-200/60 px-1.5 py-0.5 font-mono text-[0.875em] font-medium text-gray-900 dark:border-gray-600/70 dark:bg-gray-700/50 dark:text-gray-200",
         className
       ),
@@ -55331,7 +55623,7 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-link font-medium text-blue-600 underline underline-offset-4 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
         className
       ),
@@ -55366,7 +55658,7 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
         className
       )
@@ -55383,7 +55675,7 @@ function MarkdownTable({
     TableElement,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-table w-full border-collapse text-[0.925rem]",
         className
       ),
@@ -55400,7 +55692,7 @@ function MarkdownTableCell({
     TableCell,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-table-cell border-b border-r border-gray-200 p-3 text-left align-top last:border-r-0 dark:border-gray-700",
         className
       ),
@@ -55417,7 +55709,7 @@ function MarkdownTableHeaderCell({
     TableHeaderCell,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-table-header-cell border-b border-r border-gray-200 p-3 text-left align-top font-bold text-gray-900 last:border-r-0 dark:border-gray-700 dark:text-gray-100",
         className
       ),
@@ -55433,7 +55725,7 @@ function MarkdownTableHead({
     TableHead,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
         className
       )
@@ -55448,7 +55740,7 @@ function MarkdownTableBody({
     TableBody,
     {
       ...props,
-      className: classNames77__default.default("eui-markdown-table-body", className)
+      className: classNames72__default.default("eui-markdown-table-body", className)
     }
   );
 }
@@ -55460,7 +55752,7 @@ function MarkdownTableRow({
     TableRow,
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
         className
       )
@@ -55478,7 +55770,7 @@ function MarkdownBlockquote({
     {
       ...props,
       as: "blockquote",
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-blockquote my-6 border-l-4 border-gray-300 bg-transparent px-4 py-0 text-gray-600 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 dark:border-gray-700 dark:text-gray-400",
         className
       ),
@@ -55497,7 +55789,7 @@ function MarkdownParagraph({
     {
       ...props,
       level: 1,
-      className: classNames77__default.default("eui-markdown-paragraph my-4", className),
+      className: classNames72__default.default("eui-markdown-paragraph my-4", className),
       children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children3 })
     }
   );
@@ -55508,7 +55800,7 @@ function MarkdownStrong({ className, ...props }) {
     "strong",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55521,7 +55813,7 @@ function MarkdownEmphasis({ className, ...props }) {
     "em",
     {
       ...props,
-      className: classNames77__default.default("eui-markdown-emphasis italic", className)
+      className: classNames72__default.default("eui-markdown-emphasis italic", className)
     }
   );
 }
@@ -55534,7 +55826,7 @@ function MarkdownStrikethrough({
     "del",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
         className
       )
@@ -55595,7 +55887,7 @@ function MarkdownTaskCheckbox({
     "input",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
         className
       )
@@ -55611,7 +55903,7 @@ function MarkdownThematicBreak({
     "hr",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
         className
       )
@@ -55628,7 +55920,7 @@ function MarkdownDetails({ className, ...props }) {
     "details",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-details my-4 rounded-md border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-900",
         className
       )
@@ -55640,7 +55932,7 @@ function MarkdownSummary({ className, ...props }) {
     "summary",
     {
       ...props,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -55652,7 +55944,7 @@ function MarkdownFigure({ className, ...props }) {
     "figure",
     {
       ...props,
-      className: classNames77__default.default("eui-markdown-figure my-6", className)
+      className: classNames72__default.default("eui-markdown-figure my-6", className)
     }
   );
 }
@@ -55664,7 +55956,7 @@ function MarkdownFigcaption({
   return /* @__PURE__ */ jsxRuntime.jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
     Caption,
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "text-gray-500 opacity-100 dark:text-gray-400",
         className
       ),
@@ -56063,14 +56355,14 @@ function MarkdownRenderer({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown markdown-body break-words bg-transparent text-[0.95rem] leading-7 text-gray-800 dark:text-gray-300",
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames77__default.default(
+          className: classNames72__default.default(
             "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
             contentClassName
           ),
@@ -56148,11 +56440,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-toc-item",
         "block w-full text-left text-sm transition-all ease-in-out duration-150",
         "hover:text-primary",
-        active ? classNames77__default.default("text-primary font-semibold underline", activeClassName) : classNames77__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
+        active ? classNames72__default.default("text-primary font-semibold underline", activeClassName) : classNames72__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -56218,7 +56510,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -56238,7 +56530,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -56251,7 +56543,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: classNames77__default.default(
+              className: classNames72__default.default(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -56264,7 +56556,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -56276,7 +56568,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
       "nav",
       {
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -56300,7 +56592,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames77__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames72__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -56399,7 +56691,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-toolbar",
         "flex flex-wrap items-center gap-1 border-b border-gray-200 bg-gray-50 p-2",
         "dark:border-gray-700 dark:bg-gray-900",
@@ -56413,7 +56705,7 @@ function MarkdownToolbar({
             disabled: disabled || actionsDisabled,
             title: action.shortcut ? `${action.title || action.label} (${action.shortcut})` : action.title || action.label,
             onClick: () => onAction?.(action.id),
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-toolbar-button",
               "inline-flex items-center justify-center rounded border border-transparent",
               "text-gray-700 transition-colors hover:border-gray-300 hover:bg-white",
@@ -56433,7 +56725,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-view-toggle",
               "inline-flex items-center justify-center rounded border font-medium transition-colors",
               "border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -56690,7 +56982,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56706,7 +56998,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames77__default.default(toolbarClassName, toolbarProps?.className),
+            className: classNames72__default.default(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -56714,7 +57006,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -56737,7 +57029,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-source-textarea",
               "block w-full resize-y border-0 bg-transparent p-4 font-mono text-sm leading-7",
               "text-gray-900 outline-none placeholder:text-gray-400",
@@ -56767,7 +57059,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -56817,7 +57109,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -56827,7 +57119,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -56851,7 +57143,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -56941,7 +57233,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -56951,7 +57243,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -56976,14 +57268,14 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
             children: helperText
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(InputResponse_default, { name: field.name, visibility: hasError, variant: "danger" })
+        /* @__PURE__ */ jsxRuntime.jsx(InputResponse, { name: field.name, visibility: hasError, variant: "danger" })
       ]
     }
   );
@@ -57031,7 +57323,7 @@ function CodeMirrorMarkdownEditor({
     {
       id: id2,
       "data-name": name2,
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-adapter",
         "eui-markdown-codemirror-adapter",
         "overflow-hidden rounded border border-gray-300 bg-white",
@@ -57065,7 +57357,7 @@ function CodeMirrorMarkdownEditor({
             closeBrackets: true,
             bracketMatching: true
           },
-          className: classNames77__default.default("eui-markdown-codemirror", editorClassName),
+          className: classNames72__default.default("eui-markdown-codemirror", editorClassName),
           onChange: updateValue,
           onBlur
         }
@@ -57160,7 +57452,7 @@ function createDefaultPlugins({
     ...showToolbar ? [
       editor.toolbarPlugin({
         toolbarContents: toolbarContents ?? DefaultToolbar,
-        toolbarClassName: classNames77__default.default(
+        toolbarClassName: classNames72__default.default(
           "eui-markdown-mdx-toolbar",
           toolbarClassName
         ),
@@ -57277,7 +57569,7 @@ var MDXMarkdownEditor = React26.forwardRef(
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
         onBlurCapture: handleBlur,
-        className: classNames77__default.default(
+        className: classNames72__default.default(
           "eui-markdown-adapter",
           "eui-markdown-mdx-adapter",
           dark && ["dark", "dark-theme"],
@@ -57295,8 +57587,8 @@ var MDXMarkdownEditor = React26.forwardRef(
             markdown: currentValue ?? "",
             readOnly: disabled || readOnly,
             plugins: plugins ?? defaultPlugins,
-            className: classNames77__default.default("eui-markdown-mdx-editor", editorClassName),
-            contentEditableClassName: classNames77__default.default(
+            className: classNames72__default.default("eui-markdown-mdx-editor", editorClassName),
+            contentEditableClassName: classNames72__default.default(
               "eui-markdown-mdx-content",
               contentEditableClassName
             ),
@@ -57333,7 +57625,7 @@ function MDXMarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-mdx-field",
         "relative space-y-2",
         wrapperClassName
@@ -57343,7 +57635,7 @@ function MDXMarkdownField({
           "label",
           {
             htmlFor: editorId,
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57377,7 +57669,7 @@ function MDXMarkdownField({
           "p",
           {
             id: helperId,
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57385,7 +57677,7 @@ function MDXMarkdownField({
           }
         ) : null,
         /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, role: hasError ? "alert" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-          InputResponse_default,
+          InputResponse,
           {
             name: field.name,
             visibility: hasError,
@@ -57437,10 +57729,10 @@ function MarkdownLayout({
   };
   const hasLeftToc = hasToc && tocPosition === "left";
   const hasRightToc = hasToc && tocPosition === "right";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames77__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames72__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -57452,7 +57744,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsxRuntime.jsx(
           "header",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -57463,7 +57755,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -57476,7 +57768,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames77__default.default(
+                  className: classNames72__default.default(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -57489,7 +57781,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames77__default.default(
+                  className: classNames72__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57502,7 +57794,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "main",
                 {
-                  className: classNames77__default.default(
+                  className: classNames72__default.default(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -57513,7 +57805,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames77__default.default(
+                  className: classNames72__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -57526,7 +57818,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames77__default.default(
+                  className: classNames72__default.default(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -57542,7 +57834,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsxRuntime.jsx(
           "footer",
           {
-            className: classNames77__default.default(
+            className: classNames72__default.default(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -57579,7 +57871,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default(
+      className: classNames72__default.default(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -57590,7 +57882,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
-              className: classNames77__default.default(
+              className: classNames72__default.default(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -57602,7 +57894,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: classNames77__default.default(
+              className: classNames72__default.default(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -57690,7 +57982,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         [`${styles}`]: styles
       }),
       children: children3
@@ -57739,7 +58031,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames77__default.default({
+      className: classNames72__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -57875,7 +58167,7 @@ exports.ChartPlotFrame = ChartPlotFrame;
 exports.ChartProvider = ChartProvider;
 exports.ChartToolbar = ChartToolbar;
 exports.ChartTooltip = ChartTooltip;
-exports.Checkbox = Checkbox_default;
+exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CloudinaryImage = CloudinaryImage2;
 exports.CloudinaryProvider = CloudinaryProvider;
@@ -57928,7 +58220,7 @@ exports.FooterNavItem = FooterNavItem;
 exports.FooterNavItemContext = FooterNavItemContext;
 exports.FooterNavItemTitle = FooterNavItemTitle;
 exports.Form = Form;
-exports.FormResponse = FormResponse_default;
+exports.FormResponse = FormResponse;
 exports.GaugePlot = GaugePlot;
 exports.GenericLayout = GenericLayout_default;
 exports.GlowWrapper = GlowWrapper_default;
@@ -57950,10 +58242,10 @@ exports.InfiniteScrollTrigger = InfiniteScrollTrigger_default;
 exports.Info = Info;
 exports.Input = Input;
 exports.InputFile = InputFile;
-exports.InputLabel = InputLabel_default;
+exports.InputLabel = InputLabel;
 exports.InputList = InputList;
 exports.InputListGroup = InputListGroup;
-exports.InputResponse = InputResponse_default;
+exports.InputResponse = InputResponse;
 exports.Label = Label;
 exports.Layout = Layout;
 exports.Lead = Lead;