elseware-ui 3.0.5 → 3.0.7

package/dist/index.js

@@ -6,7 +6,7 @@ var tailwindMerge = require('tailwind-merge');
 var index_js$1 = require('react-icons/ai/index.js');
 var formik = require('formik');
 var index_js$2 = require('react-icons/fa/index.js');
-var classNames73 = require('classnames');
+var classNames69 = 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 classNames73__default = /*#__PURE__*/_interopDefault(classNames73);
+var classNames69__default = /*#__PURE__*/_interopDefault(classNames69);
 var ReactWorldFlags__default = /*#__PURE__*/_interopDefault(ReactWorldFlags);
 var emojiFlags__default = /*#__PURE__*/_interopDefault(emojiFlags);
 var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
@@ -6427,7 +6427,7 @@ 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 inputLabelBaseClassName = "pointer-events-none absolute left-3 z-10 select-none bg-white/95 px-1 font-medium leading-none dark:bg-transparent";
 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]";
@@ -6463,7 +6463,7 @@ var Backdrop = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__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
       }),
@@ -7053,7 +7053,7 @@ function renderTransitionChild(children3, className) {
   }
   const element7 = child;
   return React26__default.default.cloneElement(element7, {
-    className: classNames73__default.default(element7.props.className, className)
+    className: classNames69__default.default(element7.props.className, className)
   });
 }
 function TransitionBase({
@@ -7073,7 +7073,7 @@ function TransitionBase({
   if (!mounted && unmountOnExit) {
     return null;
   }
-  const transitionClassName = classNames73__default.default(
+  const transitionClassName = classNames69__default.default(
     visibility ? enterClassName : leaveClassName,
     active ? visibleClassName : hiddenClassName
   );
@@ -7282,10 +7282,10 @@ function useInputFieldState(props) {
   };
 }
 
-// src/components/data-entry/input/input/base/Input.styles.ts
+// src/data/styles/shared.styles.tsx
 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 inputFrameClassName = "relative h-14 w-full overflow-hidden border bg-white/95 px-3 dark:bg-eui-primary-300/10";
 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";
@@ -7409,41 +7409,203 @@ function Input(inputProps) {
     )
   ] });
 }
-var InputFile = ({
+function useResolvedInputFileConfig({
+  label,
   placeholder,
-  accept = "",
-  className,
-  ...props
-}) => {
-  const fileInputRef = React26.useRef(null);
+  shape
+}) {
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useInputFileFieldState(props) {
   const [field, meta, helpers] = formik.useField(props);
-  const handleFileChange = (e) => {
-    const file = e.target.files?.[0] || null;
-    helpers.setValue(file);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function isNativeInputFileValue(file) {
+  return Boolean(file && typeof file === "object");
+}
+function getInputFileName(file) {
+  if (!isNativeInputFileValue(file)) {
+    return "";
+  }
+  if ("name" in file && file.name) {
+    return file.name;
+  }
+  if ("fileName" in file && file.fileName) {
+    return file.fileName;
+  }
+  if ("uri" in file && file.uri) {
+    return file.uri.split("/").filter(Boolean).pop() ?? "";
+  }
+  return "";
+}
+function isAcceptedInputFile(file, accept) {
+  if (!accept) {
+    return true;
+  }
+  const acceptedTypes = accept.split(",").map((acceptedType) => acceptedType.trim().toLowerCase()).filter(Boolean);
+  const fileName = file.name.toLowerCase();
+  const fileType = file.type.toLowerCase();
+  return acceptedTypes.some((acceptedType) => {
+    if (acceptedType.startsWith(".")) {
+      return fileName.endsWith(acceptedType);
+    }
+    if (acceptedType.endsWith("/*")) {
+      return fileType.startsWith(acceptedType.replace("/*", "/"));
+    }
+    return fileType === acceptedType;
+  });
+}
+function InputFile(inputFileProps) {
+  const {
+    accept = "",
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    onFileSelect: _onFileSelect,
+    placeholder,
+    responseClassName,
+    shape,
+    className,
+    onBlur,
+    onClick,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    onFocus,
+    onKeyDown,
+    ..._props
+  } = inputFileProps;
+  const fileInputRef = React26.useRef(null);
+  const { field, meta, helpers } = useInputFileFieldState(inputFileProps);
+  const [focused, setFocused] = React26.useState(false);
+  const [dragging, setDragging] = React26.useState(false);
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedInputFileConfig({
+    label,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const fileName = getInputFileName(field.value);
+  const floating = focused || dragging || Boolean(fileName);
+  const inputId = id2 ?? field.name;
+  const openFilePicker = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+  const setSelectedFile = (file) => {
+    if (file && !isAcceptedInputFile(file, accept)) {
+      return;
+    }
+    void helpers.setValue(file);
+    void helpers.setTouched(true);
+  };
+  const handleFileChange = (event) => {
+    setSelectedFile(event.target.files?.[0] ?? null);
+  };
+  const handleDragEnter = (event) => {
+    if (!disabled) {
+      event.preventDefault();
+      setDragging(true);
+    }
+    onDragEnter?.(event);
+  };
+  const handleDragLeave = (event) => {
+    setDragging(false);
+    onDragLeave?.(event);
+  };
+  const handleDragOver = (event) => {
+    if (!disabled) {
+      event.preventDefault();
+    }
+    onDragOver?.(event);
+  };
+  const handleDrop = (event) => {
+    if (!disabled) {
+      event.preventDefault();
+      setDragging(false);
+      setSelectedFile(event.dataTransfer.files?.[0] ?? null);
+    }
+    onDrop?.(event);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openFilePicker();
+    }
+    onKeyDown?.(event);
   };
-  const showFloatingLabel = !!field.value;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputRootClassName, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames73__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
-          },
+        "aria-disabled": disabled,
+        "aria-label": resolvedLabel,
+        onBlur: (event) => {
+          setFocused(false);
+          void helpers.setTouched(true);
+          onBlur?.(event);
+        },
+        onClick: (event) => {
+          openFilePicker();
+          onClick?.(event);
+        },
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onFocus: (event) => {
+          setFocused(true);
+          onFocus?.(event);
+        },
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        className: cn(
+          inputFrameClassName,
+          "flex items-center transition-all duration-200 ease-out",
+          hasError ? inputFrameErrorClassName : focused || dragging ? inputFrameActiveClassName : inputFrameIdleClassName,
+          dragging && "border-dashed bg-eui-secondary-50/70",
+          inputShapes[resolvedShape],
+          disabled ? inputFrameDisabledClassName : "cursor-pointer hover:cursor-pointer",
           className
         ),
-        onClick: () => fileInputRef.current?.click(),
-        children: field.value?.name || ""
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              inputControlClassName,
+              "block truncate pointer-events-none",
+              classNames69__default.default({
+                "text-gray-500 dark:text-gray-300": !fileName
+              }),
+              inputClassName
+            ),
+            children: fileName
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        ref: fileInputRef,
+        id: inputId,
+        name: field.name,
         type: "file",
         accept,
-        ref: fileInputRef,
+        disabled,
         onChange: handleFileChange,
         className: "hidden"
       }
@@ -7451,24 +7613,25 @@ var InputFile = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
       {
-        text: placeholder,
-        className: classNames73__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
-        })
+        disabled,
+        errored: hasError,
+        floating,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
-};
+}
 function normalizeShape(value) {
   switch (value) {
     case "circle" /* circle */:
@@ -7505,7 +7668,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(formik.FieldArray, { name: name2, children: ({ push: push2, remove: remove2, move }) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "flex w-full flex-col space-y-2 bg-eui-primary-300/10",
           shapes[resolvedShape]
         ),
@@ -7534,7 +7697,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                           ref: provided2.innerRef,
                           ...draggableProps,
                           style: draggableStyle,
-                          className: classNames73__default.default(
+                          className: classNames69__default.default(
                             "flex items-center space-x-2 bg-eui-primary-300/10 p-2",
                             shapes[resolvedShape]
                           ),
@@ -7545,7 +7708,7 @@ var InputList = ({ name: name2, placeholder, shape }) => {
                               {
                                 name: `${name2}[${index3}]`,
                                 placeholder: `Item ${index3 + 1}`,
-                                className: classNames73__default.default(
+                                className: classNames69__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"
@@ -7641,7 +7804,7 @@ var InputListGroup = ({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "flex flex-col gap-2 bg-eui-primary-300/10 p-3",
               shapes[resolvedShape]
             ),
@@ -7653,7 +7816,7 @@ var InputListGroup = ({
                   {
                     name: `${name2}[${groupIndex}].name`,
                     placeholder: `Group ${groupIndex + 1}`,
-                    className: classNames73__default.default(
+                    className: classNames69__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,7 +7847,7 @@ var InputListGroup = ({
                     {
                       ref: provided.innerRef,
                       ...provided.droppableProps,
-                      className: classNames73__default.default(
+                      className: classNames69__default.default(
                         "space-y-2 bg-eui-primary-300/10 p-2",
                         shapes[resolvedShape]
                       ),
@@ -7704,7 +7867,7 @@ var InputListGroup = ({
                                   ref: provided2.innerRef,
                                   ...draggableProps,
                                   style: draggableStyle,
-                                  className: classNames73__default.default(
+                                  className: classNames69__default.default(
                                     "flex items-center gap-2 bg-eui-primary-300/10 p-2",
                                     shapes[resolvedShape]
                                   ),
@@ -7715,7 +7878,7 @@ var InputListGroup = ({
                                       {
                                         name: `${itemsFieldName}[${itemIndex}]`,
                                         placeholder: `Item ${itemIndex + 1}`,
-                                        className: classNames73__default.default(
+                                        className: classNames69__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"
@@ -8079,43 +8242,126 @@ function Checkbox(checkboxProps) {
     )
   ] });
 }
-var DateSelector = ({
+function useResolvedDateSelectorConfig({
+  label,
   placeholder,
-  styles,
-  shape,
-  ...props
-}) => {
+  shape
+}) {
   const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [field, meta] = formik.useField(props);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useDateSelectorFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function DateSelector(dateSelectorProps) {
+  const {
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    max: max2,
+    min: min2,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    className,
+    onBlur,
+    onClick,
+    onFocus
+  } = dateSelectorProps;
+  const { field, helpers, meta } = useDateSelectorFieldState(dateSelectorProps);
+  const [focused, setFocused] = React26.useState(false);
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedDateSelectorConfig({
+    label,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const inputId = id2 ?? field.name;
+  const handleChange = (event) => {
+    void helpers.setValue(event.target.value);
+  };
+  const handleBlur = (event) => {
+    setFocused(false);
+    void helpers.setTouched(true);
+    field.onBlur(event);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+    try {
+      event.currentTarget.showPicker?.();
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputRootClassName, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel,
+      "input",
       {
-        text: placeholder,
-        className: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
+        disabled,
+        id: inputId,
+        max: max2,
+        min: min2,
+        name: field.name,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        placeholder: "",
+        type: "date",
+        value: field.value ?? "",
+        className: cn(
+          inputFrameClassName,
+          inputControlClassName,
+          webInputControlClassName,
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles,
+          inputClassName
+        )
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      formik.Field,
+      InputLabel,
       {
-        type: "date",
-        ...field,
-        ...props,
-        placeholder,
-        className: classNames73__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,
-          [`${shapes[resolvedShape]}`]: true,
-          [`${styles}`]: styles
-        })
+        disabled,
+        errored: hasError,
+        floating: true,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
       }
     ),
-    meta.touched && meta.error && /* @__PURE__ */ jsxRuntime.jsx(InputResponse, { name: field.name, visibility: true, variant: "danger" })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputResponse,
+      {
+        name: field.name,
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
+      }
+    )
   ] });
-};
-var DateSelector_default = DateSelector;
+}
 function renderFormChildren(children3, formik) {
   return typeof children3 === "function" ? children3(formik) : children3;
 }
@@ -8385,7 +8631,7 @@ var ImageInput = React26.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: classNames73__default.default({
+              className: classNames69__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
@@ -8573,7 +8819,7 @@ function MultiImageInput({
             onDragOver: handleDragOver,
             onDrop: () => handleDrop(index3),
             onDragEnd: () => setDraggedIndex(null),
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "relative h-[200px] w-[300px] overflow-hidden bg-gray-900",
               "transition-all duration-150",
               draggedIndex === index3 && "opacity-60",
@@ -8703,7 +8949,7 @@ function Radio({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames73__default.default({
+            className: classNames69__default.default({
               "flex flex-row gap-2 items-center mx-1 my-2": true
             }),
             children: [
@@ -8716,7 +8962,7 @@ function Radio({
                   ...props,
                   value: option.value,
                   checked: field2.value === option.value,
-                  className: classNames73__default.default({
+                  className: classNames69__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
@@ -8728,7 +8974,7 @@ function Radio({
                 "label",
                 {
                   htmlFor: option.value,
-                  className: classNames73__default.default({
+                  className: classNames69__default.default({
                     "eui-text-md text-sm": true
                   }),
                   children: option.label
@@ -8771,7 +9017,7 @@ function StarRatingInput({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         "inline-flex gap-[4px] text-[20px]": true,
         [`${styles}`]: styles
       }),
@@ -8784,7 +9030,7 @@ function StarRatingInput({
             onClick: () => handleOnClick(index3),
             onMouseEnter: () => setHover(index3),
             onMouseLeave: () => setHover(null),
-            className: classNames73__default.default({
+            className: classNames69__default.default({
               "text-yellow-600": index3 <= (hover ?? rating - 1),
               "text-gray-400": index3 > (hover ?? rating - 1)
             }),
@@ -8805,53 +9051,115 @@ function StarRatingInput({
   );
 }
 var StarRatingInput_default = StarRatingInput;
-function Select({
+function useResolvedSelectConfig({
+  label,
   placeholder,
-  options,
-  styles,
-  shape,
-  ...props
+  shape
 }) {
   const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [field, meta] = formik.useField(props);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+  return {
+    label: label ?? placeholder,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useSelectFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function Select(selectProps) {
+  const {
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    options,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    className,
+    onBlur,
+    onFocus,
+    ...props
+  } = selectProps;
+  const { field, meta } = useSelectFieldState(selectProps);
+  const [focused, setFocused] = React26.useState(false);
+  const { label: resolvedLabel, shape: resolvedShape } = useResolvedSelectConfig({
+    label,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  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(
-      InputLabel,
+      formik.Field,
       {
-        text: placeholder,
-        className: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3"
+        ...props,
+        ...field,
+        as: "select",
+        disabled,
+        id: inputId,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        className: cn(
+          inputFrameClassName,
+          inputControlClassName,
+          webInputControlClassName,
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles,
+          inputClassName
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          "option",
+          {
+            value: option.value,
+            disabled: option.disabled,
+            children: option.label
+          },
+          option.value
+        ))
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      formik.Field,
+      InputLabel,
       {
-        as: "select",
-        ...props,
-        className: classNames73__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,
-          "transition-all ease-in-out": true,
-          [`${shapes[resolvedShape]}`]: true,
-          [`${styles}`]: styles
-        }),
-        children: options.map((option) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value);
-        })
+        disabled,
+        errored: hasError,
+        floating: true,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
 }
-var Select_default = Select;
 function Switch({
   label,
   description,
@@ -8880,7 +9188,7 @@ function Switch({
           "div",
           {
             onClick: () => helpers.setValue(!field.value),
-            className: classNames73__default.default(
+            className: classNames69__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",
@@ -8903,166 +9211,359 @@ function Switch({
   ] });
 }
 var Switch_default = Switch;
-function Tags({
-  placeholder,
-  styles,
+function useResolvedTagsConfig({
+  label,
   limit = 10,
-  ...props
+  placeholder,
+  shape
 }) {
-  const [field, meta, helpers] = formik.useField({ ...props });
+  const eui = useEUIConfig();
+  return {
+    label: label ?? placeholder,
+    limit,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useTagsFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function getTagsValue(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((tag) => typeof tag === "string");
+}
+function addTagToList(tags, value, limit) {
+  const trimmed = value.trim();
+  if (!trimmed || tags.includes(trimmed) || tags.length >= limit) {
+    return tags;
+  }
+  return [...tags, trimmed];
+}
+function removeTagFromList(tags, index3) {
+  return tags.filter((_2, tagIndex) => tagIndex !== index3);
+}
+function Tags(tagsProps) {
+  const {
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    limit,
+    placeholder,
+    responseClassName,
+    shape,
+    styles,
+    tagClassName,
+    removeButtonClassName,
+    counterClassName,
+    className,
+    onBlur,
+    onFocus,
+    ..._props
+  } = tagsProps;
+  const { field, helpers, meta } = useTagsFieldState(tagsProps);
   const [input, setInput] = React26.useState("");
-  const handleAddTag = () => {
-    const trimmed = input.trim();
-    if (trimmed && !field.value.includes(trimmed) && field.value.length < limit) {
-      helpers.setValue([...field.value, trimmed]);
+  const [focused, setFocused] = React26.useState(false);
+  const {
+    label: resolvedLabel,
+    limit: resolvedLimit,
+    shape: resolvedShape
+  } = useResolvedTagsConfig({
+    label,
+    limit,
+    placeholder,
+    shape
+  });
+  const tags = getTagsValue(field.value);
+  const hasError = Boolean(meta.touched && meta.error);
+  const floating = focused || input.length > 0 || tags.length > 0;
+  const inputId = id2 ?? field.name;
+  const handleAddTag = (value = input) => {
+    if (disabled) {
+      return;
+    }
+    const nextTags = addTagToList(tags, value, resolvedLimit);
+    if (nextTags !== tags) {
+      void helpers.setValue(nextTags);
+    }
+    if (value.trim()) {
+      void helpers.setTouched(true);
     }
     setInput("");
   };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === ",") {
-      e.preventDefault();
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
       handleAddTag();
+      return;
     }
-    if (e.key === "Backspace" && input === "" && field.value.length > 0) {
-      helpers.setValue(field.value.slice(0, -1));
+    if (event.key === "Backspace" && input === "" && tags.length > 0) {
+      void helpers.setValue(tags.slice(0, -1));
+      void helpers.setTouched(true);
     }
   };
   const handleRemoveTag = (index3) => {
-    const newTags = [...field.value];
-    newTags.splice(index3, 1);
-    helpers.setValue(newTags);
+    if (disabled) {
+      return;
+    }
+    void helpers.setValue(removeTagFromList(tags, index3));
+    void helpers.setTouched(true);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: classNames73__default.default(
-            "border rounded-sm flex flex-wrap items-center gap-2 px-2 pt-2 pb-6 min-h-[3rem]",
+  const handleBlur = (event) => {
+    setFocused(false);
+    void helpers.setTouched(true);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          inputFrameClassName,
+          "flex h-auto min-h-14 flex-wrap items-center gap-2 overflow-visible px-3 pt-6 pb-7",
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles
+        ),
+        children: [
+          tags.map((tag, index3) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex max-w-full items-center gap-1 rounded bg-eui-light-300 px-2 py-1 text-sm font-medium text-eui-dark-700 dark:bg-eui-dark-400 dark:text-eui-light-300",
+                tagClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tag }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    "aria-label": `Remove ${tag}`,
+                    className: cn(
+                      "inline-flex h-5 w-5 items-center justify-center text-xs text-eui-danger-500 transition-colors hover:text-eui-danger-400 disabled:cursor-not-allowed disabled:opacity-50",
+                      removeButtonClassName
+                    ),
+                    disabled,
+                    onClick: () => handleRemoveTag(index3),
+                    type: "button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaTimes, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            `${tag}-${index3}`
+          )),
+          tags.length < resolvedLimit ? /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
             {
-              "bg-eui-primary-300/10 eui-text-md": true,
-              "pt-6": input.length > 0 || field.value.length > 0,
-              // extra space when label is floated
-              "border-eui-primary-400 focus-within:border-eui-secondary-500": !(meta.touched && meta.error),
-              "border-eui-danger-500": meta.touched && meta.error,
-              [`${styles}`]: styles
+              "aria-label": resolvedLabel,
+              className: cn(
+                inputControlClassName,
+                webInputControlClassName,
+                "h-7 w-auto min-w-[120px] flex-1 p-0",
+                inputClassName
+              ),
+              disabled,
+              id: inputId,
+              onBlur: handleBlur,
+              onChange: (event) => setInput(event.target.value),
+              onFocus: handleFocus,
+              onKeyDown: handleKeyDown,
+              placeholder: "",
+              type: "text",
+              value: input
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "pointer-events-none absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50",
+                counterClassName
+              ),
+              children: [
+                tags.length,
+                "/",
+                resolvedLimit
+              ]
             }
-          ),
-          children: [
-            field.value.map((tag, index3) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex items-center bg-eui-light-300 dark:bg-eui-dark-400 px-2 py-1 rounded text-sm text-eui-dark-700 dark:text-eui-light-300",
-                children: [
-                  tag,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleRemoveTag(index3),
-                      className: "ml-2 text-xs text-eui-danger-500 hover:text-eui-danger-400",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(index_js$2.FaTimes, { className: "w-3 h-3" })
-                    }
-                  )
-                ]
-              },
-              index3
-            )),
-            field.value.length < limit && /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                value: input,
-                onChange: (e) => setInput(e.target.value),
-                onKeyDown: handleKeyDown,
-                className: "flex-grow min-w-[120px] bg-transparent outline-none eui-text-md text-eui-dark-600 dark:text-eui-light-500 placeholder-eui-dark-200"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InputLabel,
-        {
-          text: placeholder,
-          className: classNames73__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"
           )
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-1 right-2 text-xs text-eui-dark-50 font-semibold pointer-events-none", children: [
-        field.value?.length,
-        "/",
-        limit
-      ] })
-    ] }),
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputLabel,
+      {
+        disabled,
+        errored: hasError,
+        floating,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
 }
-var Tags_default = Tags;
-function TextArea({
-  placeholder,
+function useResolvedTextAreaConfig({
+  label,
   limit = 1e3,
-  styles,
-  shape,
-  ...props
+  placeholder,
+  shape
 }) {
   const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "square";
-  const [field, meta] = formik.useField(props);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        formik.Field,
-        {
-          as: "textarea",
-          ...field,
-          ...props,
-          className: classNames73__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),
-            "border-eui-danger-500": meta.touched && meta.error,
-            [`${shapes[resolvedShape]}`]: true,
-            [`${styles}`]: styles
-          })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InputLabel,
-        {
-          text: placeholder,
-          className: classNames73__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"
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-3 right-3 text-xs text-eui-dark-50 font-semibold", children: [
-        field.value?.length,
-        "/",
-        limit
-      ] })
-    ] }),
+  return {
+    label: label ?? placeholder,
+    limit,
+    shape: shape ?? eui?.config?.global?.shape ?? "square"
+  };
+}
+function useTextAreaFieldState(props) {
+  const [field, meta, helpers] = formik.useField(props);
+  return {
+    field,
+    helpers,
+    meta
+  };
+}
+function getTextAreaCharacterCount(value) {
+  return String(value ?? "").length;
+}
+function TextArea(textAreaProps) {
+  const {
+    disabled = false,
+    id: id2,
+    inputClassName,
+    label,
+    labelClassName,
+    limit,
+    placeholder,
+    responseClassName,
+    rows,
+    shape,
+    styles,
+    className,
+    onBlur,
+    onFocus,
+    ...props
+  } = textAreaProps;
+  const { field, helpers, meta } = useTextAreaFieldState(textAreaProps);
+  const [focused, setFocused] = React26.useState(false);
+  const {
+    label: resolvedLabel,
+    limit: resolvedLimit,
+    shape: resolvedShape
+  } = useResolvedTextAreaConfig({
+    label,
+    limit,
+    placeholder,
+    shape
+  });
+  const hasError = Boolean(meta.touched && meta.error);
+  const characterCount = getTextAreaCharacterCount(field.value);
+  const floating = focused || characterCount > 0;
+  const inputId = id2 ?? field.name;
+  const handleChange = (event) => {
+    void helpers.setValue(event.target.value);
+  };
+  const handleBlur = (event) => {
+    setFocused(false);
+    void helpers.setTouched(true);
+    field.onBlur(event);
+    onBlur?.(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          inputFrameClassName,
+          "h-auto min-h-32 px-3",
+          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          inputShapes[resolvedShape],
+          disabled && inputFrameDisabledClassName,
+          className,
+          styles
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            formik.Field,
+            {
+              ...props,
+              ...field,
+              as: "textarea",
+              disabled,
+              id: inputId,
+              maxLength: resolvedLimit,
+              onBlur: handleBlur,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              placeholder: "",
+              rows,
+              value: field.value ?? "",
+              className: cn(
+                inputControlClassName,
+                webInputControlClassName,
+                "block min-h-32 resize-none pb-8",
+                inputClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50", children: [
+            characterCount,
+            "/",
+            resolvedLimit
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputLabel,
+      {
+        disabled,
+        errored: hasError,
+        floating,
+        htmlFor: inputId,
+        text: resolvedLabel,
+        className: labelClassName
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         name: field.name,
-        visibility: meta.touched && meta.error ? true : false,
-        variant: "danger"
+        visibility: hasError,
+        variant: "danger",
+        className: responseClassName
       }
     )
   ] });
 }
-var TextArea_default = TextArea;
 function BreadcrumbItem({
   title,
   href = "#",
@@ -9074,7 +9575,7 @@ function BreadcrumbItem({
     {
       href,
       onClick,
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         "text-lg font-semibold": true,
         "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
         "text-eui-light-800": active,
@@ -9151,7 +9652,7 @@ var Breadcrumb = ({
         index3 < resolvedData.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: classNames73__default.default({
+            className: classNames69__default.default({
               "text-lg font-semibold text-gray-500": true,
               [`px-${gap}`]: gap
             }),
@@ -9165,7 +9666,7 @@ var Breadcrumb = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         "inline-flex": true,
         [`${styles}`]: styles
       }),
@@ -9209,7 +9710,7 @@ var Drawer = ({
     isMobile && showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "fixed inset-0 bg-black/50 z-40",
           backdropStyles
         ),
@@ -9220,7 +9721,7 @@ var Drawer = ({
       "div",
       {
         style: drawerStyle,
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "fixed shadow-lg z-50",
           {
             "h-full w-[300px] top-0": isHorizontal && !hasOffset,
@@ -9249,7 +9750,7 @@ function DrawerToggler({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__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,
@@ -9297,7 +9798,7 @@ function FooterNav({ data = [], styles }) {
     childrenContent = /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames73__default.default({
+        className: classNames69__default.default({
           "grid w-full": true,
           "grid-cols-1": isMobile,
           "grid-cols-3": !isMobile,
@@ -9310,7 +9811,7 @@ function FooterNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -9351,7 +9852,7 @@ var FooterNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames73__default.default({
+        className: classNames69__default.default({
           "": true,
           "py-2 font-semibold eui-text-lg": !styles,
           [`${styles}`]: styles
@@ -9396,7 +9897,7 @@ var FooterNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames73__default.default({
+      className: classNames69__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,
@@ -9425,7 +9926,7 @@ var FooterNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         "": true,
         "py-2 font-thin eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9478,7 +9979,7 @@ function HeaderNav({ data = [], styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         [`${styles}`]: styles
       }),
       children: childrenContent
@@ -9540,7 +10041,7 @@ var HeaderNavGroup = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames73__default.default({
+        className: classNames69__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,
@@ -9568,7 +10069,7 @@ var HeaderNavGroup = ({
           children3 && /* @__PURE__ */ jsxRuntime.jsx(
             index_js$3.BsChevronDown,
             {
-              className: classNames73__default.default({
+              className: classNames69__default.default({
                 "text-md": true,
                 "transition-all ease-in-out duration-300": true,
                 "rotate-180": !collapsed
@@ -9581,7 +10082,7 @@ var HeaderNavGroup = ({
     !collapsed && children3 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames73__default.default({
+        className: classNames69__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
         }),
@@ -9611,7 +10112,7 @@ var HeaderNavItem = ({
     "div",
     {
       onClick: handleNavigation,
-      className: classNames73__default.default({
+      className: classNames69__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,
@@ -9640,7 +10141,7 @@ var HeaderNavItemTitle = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         "p-3  font-thin": true,
         "eui-text-md": !styles,
         [`${styles}`]: styles
@@ -9680,7 +10181,7 @@ var Link = ({
       href: href || "#",
       target: targets[target],
       onClick: handleClick,
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         [`${textVariants[variant]}`]: variant,
         [`${decorations[decoration]}`]: decoration,
         "font-bold": bold,
@@ -12872,7 +13373,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "inline-flex gap-3 items-center px-3 py-2 w-full eui-gradient-to-r-general-xs",
           {
             "hover:cursor-pointer": toggleOnSummaryClick
@@ -12893,7 +13394,7 @@ function Accordion({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 index_js$4.FaCircleChevronDown,
                 {
-                  className: classNames73__default.default("text-xl transition-transform duration-300", {
+                  className: classNames69__default.default("text-xl transition-transform duration-300", {
                     "rotate-180": collapse
                   })
                 }
@@ -12907,7 +13408,7 @@ function Accordion({
     /* @__PURE__ */ jsxRuntime.jsx(TransitionAccordion_default, { visibility: collapse, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "border-t border-t-eui-dark-400/40 eui-text-sm",
           {
             "p-5": enableChildrenPadding
@@ -12964,7 +13465,7 @@ function CardHeader({ icon, title, description, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "flex items-start gap-4 p-6 border-b border-white/10",
         className
       ),
@@ -12980,14 +13481,14 @@ function CardHeader({ icon, title, description, className }) {
 }
 var CardHeader_default = CardHeader;
 function CardContent({ children: children3, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames73__default.default("p-6 text-gray-300 text-sm", className), children: children3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames69__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: classNames73__default.default(
+      className: classNames69__default.default(
         "flex items-center gap-3 p-5 border-t border-white/10 text-sm text-gray-400",
         className
       ),
@@ -13029,7 +13530,7 @@ function GradientAnimation({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default("absolute inset-0"),
+      className: classNames69__default.default("absolute inset-0"),
       style: {
         background: `linear-gradient(${cfg.angle}deg, ${cfg.colors?.join(",")})`,
         backgroundSize: cfg.backgroundSize,
@@ -13175,7 +13676,7 @@ function MotionSurface({
 }) {
   const AnimationComponent = animationVariant === "custom" ? CustomAnimation : animationRegistry[animationVariant];
   const OverlayComponent = overlay === "custom" ? CustomOverlay : overlayRegistry[overlay];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames73__default.default("relative overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames69__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 })
@@ -18246,7 +18747,7 @@ var ThemeSwitch = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames73__default.default(
+            className: classNames69__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"
             )
@@ -30015,7 +30516,7 @@ function Modal({
     "div",
     {
       ref: modalRef,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-bg-md eui-shadow-lg border border-gray-700/80 w-fit h-fit",
         shapes[resolvedShape],
         styles
@@ -30027,7 +30528,7 @@ function Modal({
             "button",
             {
               type: "button",
-              className: classNames73__default.default(
+              className: classNames69__default.default(
                 "w-[60px] h-[60px] flex items-center justify-center transition-standard-fast",
                 "hover:cursor-pointer hover:bg-eui-dark-500"
               ),
@@ -30419,7 +30920,7 @@ var ContentArea = React26.forwardRef(
       "div",
       {
         ref,
-        className: classNames73__default.default({
+        className: classNames69__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,
@@ -30436,7 +30937,7 @@ function FlexCol({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         [`flex flex-col gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -30449,7 +30950,7 @@ function FlexRow({ children: children3, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         [`flex flex-row gap-${gap}`]: true,
         [`${styles}`]: styles
       }),
@@ -30468,7 +30969,7 @@ function Grid({ children: children3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         [`grid`]: true,
         [`${styles}`]: styles
       }),
@@ -30485,7 +30986,7 @@ var Layout = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         // "flex h-full w-screen bg-gray-100 overflow-auto": true,
         "flex bg-eui-light-600": true,
         "flex-col": flexDirection === "vertical",
@@ -30507,7 +31008,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         static: position4 === "static",
         fixed: position4 === "fixed",
         sticky: position4 === "sticky",
@@ -30542,7 +31043,7 @@ var Content = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__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)
@@ -30558,7 +31059,7 @@ var Footer = ({ children: children3, styles }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__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
@@ -30746,7 +31247,7 @@ function ShowMore({ text: text10, limit }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: classNames73__default.default({
+          className: classNames69__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
@@ -31662,7 +32163,7 @@ function DocumentationPanel({
   return /* @__PURE__ */ jsxRuntime.jsx(MarkdownProvider_default, { markdown: value, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-documentation-panel",
         "min-h-0 overflow-hidden bg-white text-gray-900",
         "dark:bg-gray-950 dark:text-gray-100",
@@ -31676,7 +32177,7 @@ function DocumentationPanel({
         /* @__PURE__ */ jsxRuntime.jsx(
           "main",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "eui-documentation-panel-viewer",
               "documentation-panel-scrollbar min-w-0 overflow-y-auto scroll-smooth",
               viewerClassName
@@ -31684,7 +32185,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames73__default.default(
+                className: classNames69__default.default(
                   "mx-auto px-5 py-8 sm:px-6 lg:px-8",
                   contentMaxWidthClassName,
                   contentClassName
@@ -31697,7 +32198,7 @@ function DocumentationPanel({
         toc ? /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: classNames73__default.default(
+            className: classNames69__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",
@@ -31706,7 +32207,7 @@ function DocumentationPanel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: classNames73__default.default(
+                className: classNames69__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, {}) })
@@ -31982,7 +32483,7 @@ function BoxNavItem({ icon, name: name2, to, selected, onClick }) {
       type: "button",
       onClick: handleClick,
       "aria-current": selected ? "page" : void 0,
-      className: classNames73__default.default(
+      className: classNames69__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",
@@ -54719,7 +55220,7 @@ function MarkdownHeading({
       id: id2,
       level: typographyLevel,
       bold: true,
-      className: classNames73__default.default(
+      className: classNames69__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
@@ -54882,18 +55383,18 @@ function powerSetPermutations(arr) {
   }
 }
 var classNameCombinations = {};
-function getClassNameCombinations(classNames77) {
-  if (classNames77.length === 0 || classNames77.length === 1) return classNames77;
-  var key = classNames77.join(".");
+function getClassNameCombinations(classNames73) {
+  if (classNames73.length === 0 || classNames73.length === 1) return classNames73;
+  var key = classNames73.join(".");
   if (!classNameCombinations[key]) {
-    classNameCombinations[key] = powerSetPermutations(classNames77);
+    classNameCombinations[key] = powerSetPermutations(classNames73);
   }
   return classNameCombinations[key];
 }
-function createStyleObject(classNames77) {
+function createStyleObject(classNames73) {
   var elementStyle = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   var stylesheet = arguments.length > 2 ? arguments[2] : void 0;
-  var nonTokenClassNames = classNames77.filter(function(className) {
+  var nonTokenClassNames = classNames73.filter(function(className) {
     return className !== "token";
   });
   var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
@@ -54901,8 +55402,8 @@ function createStyleObject(classNames77) {
     return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
   }, elementStyle);
 }
-function createClassNameString(classNames77) {
-  return classNames77.join(" ");
+function createClassNameString(classNames73) {
+  return classNames73.join(" ");
 }
 function createChildren2(stylesheet, useInlineStyles) {
   var childrenCount = 0;
@@ -55075,8 +55576,8 @@ function flattenCodeTree(tree) {
       }));
     } else if (node2.children) {
       var _node$properties;
-      var classNames77 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
-      flattenCodeTree(node2.children, classNames77).forEach(function(i2) {
+      var classNames73 = className.concat(((_node$properties = node2.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) || []);
+      flattenCodeTree(node2.children, classNames73).forEach(function(i2) {
         return newTree.push(i2);
       });
     }
@@ -55740,7 +56241,7 @@ function MarkdownCodeBlock({
     "div",
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-code my-6 overflow-hidden rounded-md border border-slate-700 bg-[#0d1117] text-slate-300",
         className
       ),
@@ -55811,7 +56312,7 @@ function MarkdownInlineCode({
     Code,
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__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
       ),
@@ -55852,7 +56353,7 @@ function MarkdownLink({
       href: safeHref,
       target: resolvedTarget,
       rel,
-      className: classNames73__default.default(
+      className: classNames69__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
       ),
@@ -55887,7 +56388,7 @@ function MarkdownImage({
       title,
       loading: "lazy",
       decoding: "async",
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-image my-6 h-auto max-w-full rounded-md border border-gray-200 dark:border-gray-700",
         className
       )
@@ -55904,7 +56405,7 @@ function MarkdownTable({
     TableElement,
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-table w-full border-collapse text-[0.925rem]",
         className
       ),
@@ -55921,7 +56422,7 @@ function MarkdownTableCell({
     TableCell,
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__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
       ),
@@ -55938,7 +56439,7 @@ function MarkdownTableHeaderCell({
     TableHeaderCell,
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__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
       ),
@@ -55954,7 +56455,7 @@ function MarkdownTableHead({
     TableHead,
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-table-head bg-gray-50 dark:bg-gray-900",
         className
       )
@@ -55969,7 +56470,7 @@ function MarkdownTableBody({
     TableBody,
     {
       ...props,
-      className: classNames73__default.default("eui-markdown-table-body", className)
+      className: classNames69__default.default("eui-markdown-table-body", className)
     }
   );
 }
@@ -55981,7 +56482,7 @@ function MarkdownTableRow({
     TableRow,
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-table-row even:bg-gray-50/70 dark:even:bg-gray-900/60",
         className
       )
@@ -55999,7 +56500,7 @@ function MarkdownBlockquote({
     {
       ...props,
       as: "blockquote",
-      className: classNames73__default.default(
+      className: classNames69__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
       ),
@@ -56018,7 +56519,7 @@ function MarkdownParagraph({
     {
       ...props,
       level: 1,
-      className: classNames73__default.default("eui-markdown-paragraph my-4", className),
+      className: classNames69__default.default("eui-markdown-paragraph my-4", className),
       children: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children3 })
     }
   );
@@ -56029,7 +56530,7 @@ function MarkdownStrong({ className, ...props }) {
     "strong",
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-strong font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -56042,7 +56543,7 @@ function MarkdownEmphasis({ className, ...props }) {
     "em",
     {
       ...props,
-      className: classNames73__default.default("eui-markdown-emphasis italic", className)
+      className: classNames69__default.default("eui-markdown-emphasis italic", className)
     }
   );
 }
@@ -56055,7 +56556,7 @@ function MarkdownStrikethrough({
     "del",
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-strikethrough text-gray-500 dark:text-gray-400",
         className
       )
@@ -56116,7 +56617,7 @@ function MarkdownTaskCheckbox({
     "input",
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-task-checkbox mr-2 translate-y-px accent-blue-600",
         className
       )
@@ -56132,7 +56633,7 @@ function MarkdownThematicBreak({
     "hr",
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-thematic-break my-8 border-0 border-t border-gray-200 dark:border-gray-800",
         className
       )
@@ -56149,7 +56650,7 @@ function MarkdownDetails({ className, ...props }) {
     "details",
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__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
       )
@@ -56161,7 +56662,7 @@ function MarkdownSummary({ className, ...props }) {
     "summary",
     {
       ...props,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-summary cursor-pointer font-semibold text-gray-950 dark:text-gray-100",
         className
       )
@@ -56173,7 +56674,7 @@ function MarkdownFigure({ className, ...props }) {
     "figure",
     {
       ...props,
-      className: classNames73__default.default("eui-markdown-figure my-6", className)
+      className: classNames69__default.default("eui-markdown-figure my-6", className)
     }
   );
 }
@@ -56185,7 +56686,7 @@ function MarkdownFigcaption({
   return /* @__PURE__ */ jsxRuntime.jsx("figcaption", { ...props, className: "eui-markdown-figcaption mt-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
     Caption,
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "text-gray-500 opacity-100 dark:text-gray-400",
         className
       ),
@@ -56584,14 +57085,14 @@ function MarkdownRenderer({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__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: classNames73__default.default(
+          className: classNames69__default.default(
             "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
             contentClassName
           ),
@@ -56669,11 +57170,11 @@ function MarkdownTOCItem({
       onClick: () => onSelect?.(heading3),
       "aria-current": active ? "location" : void 0,
       title: label,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-toc-item",
         "block w-full text-left text-sm transition-all ease-in-out duration-150",
         "hover:text-primary",
-        active ? classNames73__default.default("text-primary font-semibold underline", activeClassName) : classNames73__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
+        active ? classNames69__default.default("text-primary font-semibold underline", activeClassName) : classNames69__default.default("text-gray-500 dark:text-gray-400", inactiveClassName),
         className
       ),
       style: {
@@ -56739,7 +57240,7 @@ function MarkdownTOC({
     return emptyState ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "eui-markdown-toc",
           "text-sm text-gray-500 dark:text-gray-400",
           className
@@ -56759,7 +57260,7 @@ function MarkdownTOC({
       {
         type: "button",
         onClick: () => setCollapsed((value) => !value),
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "eui-markdown-toc-title",
           "flex w-full items-center justify-between gap-2 text-left",
           "text-sm font-semibold uppercase tracking-wide",
@@ -56772,7 +57273,7 @@ function MarkdownTOC({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: classNames73__default.default(
+              className: classNames69__default.default(
                 "text-xs opacity-60 transition-transform duration-150",
                 !collapsed && "rotate-90"
               ),
@@ -56785,7 +57286,7 @@ function MarkdownTOC({
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "eui-markdown-toc-title",
           "text-sm font-semibold uppercase tracking-wide",
           "text-gray-900 dark:text-gray-100",
@@ -56797,7 +57298,7 @@ function MarkdownTOC({
     !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
       "nav",
       {
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "eui-markdown-toc-list",
           "space-y-1",
           listClassName
@@ -56821,7 +57322,7 @@ function MarkdownTOC({
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames73__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: classNames69__default.default("eui-markdown-toc", "space-y-4", className), children: content3 });
 }
 var MarkdownTOC_default = MarkdownTOC;
 var DEFAULT_MARKDOWN_TOOLBAR_ACTIONS = [
@@ -56920,7 +57421,7 @@ function MarkdownToolbar({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__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",
@@ -56934,7 +57435,7 @@ function MarkdownToolbar({
             disabled: disabled || actionsDisabled,
             title: action.shortcut ? `${action.title || action.label} (${action.shortcut})` : action.title || action.label,
             onClick: () => onAction?.(action.id),
-            className: classNames73__default.default(
+            className: classNames69__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",
@@ -56954,7 +57455,7 @@ function MarkdownToolbar({
             disabled,
             onClick: onViewModeToggle,
             title: isPreviewMode ? "Switch to Markdown syntax" : "Switch to preview",
-            className: classNames73__default.default(
+            className: classNames69__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",
@@ -57211,7 +57712,7 @@ function MarkdownSourceEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-editor",
         "overflow-hidden rounded border border-gray-300 bg-white",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -57227,7 +57728,7 @@ function MarkdownSourceEditor({
             actionsDisabled: readOnly,
             viewMode: currentViewMode,
             showViewModeToggle,
-            className: classNames73__default.default(toolbarClassName, toolbarProps?.className),
+            className: classNames69__default.default(toolbarClassName, toolbarProps?.className),
             onViewModeToggle: toggleViewMode,
             onAction: handleToolbarAction
           }
@@ -57235,7 +57736,7 @@ function MarkdownSourceEditor({
         currentViewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "eui-markdown-editor-preview",
               "min-h-[260px] p-4",
               previewClassName
@@ -57258,7 +57759,7 @@ function MarkdownSourceEditor({
             onChange: (event) => updateValue(event.target.value),
             onBlur,
             onKeyDown: handleKeyDown,
-            className: classNames73__default.default(
+            className: classNames69__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",
@@ -57288,7 +57789,7 @@ function MarkdownPreviewPane({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-preview-pane",
         "rounded border border-gray-300 bg-white p-4",
         "dark:border-gray-700 dark:bg-gray-950",
@@ -57338,7 +57839,7 @@ function MarkdownSplitEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-split-editor",
         "grid gap-4",
         isHorizontal ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1",
@@ -57348,7 +57849,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "eui-markdown-split-source",
               "min-w-0 space-y-2",
               sourceWrapperClassName
@@ -57372,7 +57873,7 @@ function MarkdownSplitEditor({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "eui-markdown-split-preview",
               "min-w-0 space-y-2",
               previewWrapperClassName
@@ -57462,7 +57963,7 @@ function MarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-field",
         "relative space-y-2",
         wrapperClassName
@@ -57472,7 +57973,7 @@ function MarkdownField({
           "label",
           {
             htmlFor: editorProps.id || field.name,
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57497,7 +57998,7 @@ function MarkdownField({
         helperText && !hasError ? /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57552,7 +58053,7 @@ function CodeMirrorMarkdownEditor({
     {
       id: id2,
       "data-name": name2,
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-adapter",
         "eui-markdown-codemirror-adapter",
         "overflow-hidden rounded border border-gray-300 bg-white",
@@ -57586,7 +58087,7 @@ function CodeMirrorMarkdownEditor({
             closeBrackets: true,
             bracketMatching: true
           },
-          className: classNames73__default.default("eui-markdown-codemirror", editorClassName),
+          className: classNames69__default.default("eui-markdown-codemirror", editorClassName),
           onChange: updateValue,
           onBlur
         }
@@ -57681,7 +58182,7 @@ function createDefaultPlugins({
     ...showToolbar ? [
       editor.toolbarPlugin({
         toolbarContents: toolbarContents ?? DefaultToolbar,
-        toolbarClassName: classNames73__default.default(
+        toolbarClassName: classNames69__default.default(
           "eui-markdown-mdx-toolbar",
           toolbarClassName
         ),
@@ -57798,7 +58299,7 @@ var MDXMarkdownEditor = React26.forwardRef(
         "aria-required": required || void 0,
         "aria-invalid": invalid || void 0,
         onBlurCapture: handleBlur,
-        className: classNames73__default.default(
+        className: classNames69__default.default(
           "eui-markdown-adapter",
           "eui-markdown-mdx-adapter",
           dark && ["dark", "dark-theme"],
@@ -57816,8 +58317,8 @@ var MDXMarkdownEditor = React26.forwardRef(
             markdown: currentValue ?? "",
             readOnly: disabled || readOnly,
             plugins: plugins ?? defaultPlugins,
-            className: classNames73__default.default("eui-markdown-mdx-editor", editorClassName),
-            contentEditableClassName: classNames73__default.default(
+            className: classNames69__default.default("eui-markdown-mdx-editor", editorClassName),
+            contentEditableClassName: classNames69__default.default(
               "eui-markdown-mdx-content",
               contentEditableClassName
             ),
@@ -57854,7 +58355,7 @@ function MDXMarkdownField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-mdx-field",
         "relative space-y-2",
         wrapperClassName
@@ -57864,7 +58365,7 @@ function MDXMarkdownField({
           "label",
           {
             htmlFor: editorId,
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "block text-sm font-medium text-gray-700 dark:text-gray-200",
               labelClassName
             ),
@@ -57898,7 +58399,7 @@ function MDXMarkdownField({
           "p",
           {
             id: helperId,
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "text-sm text-gray-500 dark:text-gray-400",
               helperTextClassName
             ),
@@ -57958,10 +58459,10 @@ function MarkdownLayout({
   };
   const hasLeftToc = hasToc && tocPosition === "left";
   const hasRightToc = hasToc && tocPosition === "right";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames73__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames69__default.default("eui-markdown-layout", "w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-layout-container",
         "mx-auto w-full px-4 sm:px-6 lg:px-8",
         containerClassName
@@ -57973,7 +58474,7 @@ function MarkdownLayout({
         header ? /* @__PURE__ */ jsxRuntime.jsx(
           "header",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "eui-markdown-layout-header",
               "mb-8",
               headerClassName
@@ -57984,7 +58485,7 @@ function MarkdownLayout({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "eui-markdown-layout-grid",
               "grid grid-cols-1 gap-8",
               hasSidebar && hasToc && "xl:grid-cols-[16rem_minmax(0,1fr)_18rem]",
@@ -57997,7 +58498,7 @@ function MarkdownLayout({
               hasSidebar ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames73__default.default(
+                  className: classNames69__default.default(
                     "eui-markdown-layout-sidebar",
                     "min-w-0",
                     stickySidebar && "lg:sticky lg:self-start",
@@ -58010,7 +58511,7 @@ function MarkdownLayout({
               hasLeftToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames73__default.default(
+                  className: classNames69__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -58023,7 +58524,7 @@ function MarkdownLayout({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "main",
                 {
-                  className: classNames73__default.default(
+                  className: classNames69__default.default(
                     "eui-markdown-layout-content",
                     "min-w-0",
                     contentClassName
@@ -58034,7 +58535,7 @@ function MarkdownLayout({
               hasRightToc ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames73__default.default(
+                  className: classNames69__default.default(
                     "eui-markdown-layout-toc",
                     "min-w-0",
                     stickyToc && "lg:sticky lg:self-start",
@@ -58047,7 +58548,7 @@ function MarkdownLayout({
               hasAside ? /* @__PURE__ */ jsxRuntime.jsx(
                 "aside",
                 {
-                  className: classNames73__default.default(
+                  className: classNames69__default.default(
                     "eui-markdown-layout-aside",
                     "min-w-0",
                     stickyAside && "2xl:sticky 2xl:self-start",
@@ -58063,7 +58564,7 @@ function MarkdownLayout({
         footer2 ? /* @__PURE__ */ jsxRuntime.jsx(
           "footer",
           {
-            className: classNames73__default.default(
+            className: classNames69__default.default(
               "eui-markdown-layout-footer",
               "mt-10",
               footerClassName
@@ -58100,7 +58601,7 @@ function MarkdownDocsLayoutContent({
   const resolvedHeader = header ?? (title || description || headerActions ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default(
+      className: classNames69__default.default(
         "eui-markdown-docs-header",
         "flex flex-col gap-4 border-b border-gray-200 pb-6",
         "dark:border-gray-700",
@@ -58111,7 +58612,7 @@ function MarkdownDocsLayoutContent({
           title ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
-              className: classNames73__default.default(
+              className: classNames69__default.default(
                 "eui-markdown-docs-title",
                 "text-3xl font-bold tracking-tight text-gray-950",
                 "dark:text-gray-50",
@@ -58123,7 +58624,7 @@ function MarkdownDocsLayoutContent({
           description ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: classNames73__default.default(
+              className: classNames69__default.default(
                 "eui-markdown-docs-description",
                 "max-w-3xl text-base leading-7 text-gray-600",
                 "dark:text-gray-400",
@@ -58211,7 +58712,7 @@ function GenericLayout({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         [`${styles}`]: styles
       }),
       children: children3
@@ -58260,7 +58761,7 @@ function SidemenuLayout({ data, children: children3 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DefaultLayout_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames73__default.default({
+      className: classNames69__default.default({
         grid: true,
         "grid-cols-7 gap-10": !isMobile,
         "grid-cols-1 gap-": isMobile
@@ -58426,7 +58927,7 @@ exports.DataViewSearch = DataViewSearch;
 exports.DataViewSidebar = DataViewSidebar;
 exports.DataViewSort = DataViewSort;
 exports.DataViewTable = DataViewTable_default;
-exports.DateSelector = DateSelector_default;
+exports.DateSelector = DateSelector;
 exports.DefaultLayout = DefaultLayout_default;
 exports.Display = Display;
 exports.DocumentationPanel = DocumentationPanel_default;
@@ -58552,7 +59053,7 @@ exports.RouteTabs = RouteTabs_default;
 exports.ScatterPlot = ScatterPlot;
 exports.ScrollToTop = ScrollToTop_default;
 exports.Section = Section;
-exports.Select = Select_default;
+exports.Select = Select;
 exports.ShapeSwitch = ShapeSwitch;
 exports.ShowMore = ShowMore_default;
 exports.Sidebar = Sidebar_default;
@@ -58580,8 +59081,8 @@ exports.TableHead = TableHead;
 exports.TableHeaderCell = TableHeaderCell;
 exports.TableRow = TableRow;
 exports.Tag = Tag;
-exports.Tags = Tags_default;
-exports.TextArea = TextArea_default;
+exports.Tags = Tags;
+exports.TextArea = TextArea;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSelect = ThemeSelect;