react-vant-nova 1.0.9 → 1.1.0

package/bundle/react-vant-nova.es.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState, useMemo, useCallback, useContext, createContext, forwardRef, useImperativeHandle, memo, isValidElement, Children, cloneElement } from "react";
-import cls from "clsx";
+import clsx from "clsx";
 import { ArrowLeft, ArrowUp, ArrowDown, Arrow, Cross, Clear, QuestionO, PhotoFail, Photo, Checked, Success, Search as Search$1, Star, StarO, Close, Description, Photograph, ExpandO } from "@react-vant/icons";
 import { CSSTransition } from "react-transition-group";
 import * as require$$0 from "react-dom";
@@ -915,7 +915,7 @@ function usePropsValue(options) {
   );
   return [stateRef.current, setState];
 }
-var index$17 = {
+var index$18 = {
   useClickAway,
   useCountDown,
   useEventListener,
@@ -934,14 +934,14 @@ var index$17 = {
   useMemoizedFn,
   usePropsValue
 };
+var index$17 = "";
 var index$16 = "";
-var index$15 = "";
 const SpinIcon = ({ bem: bem2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, Array(12).fill(null).map((_, index2) => /* @__PURE__ */ React.createElement("i", {
   key: index2,
-  className: cls(bem2("line", String(index2 + 1)))
+  className: clsx(bem2("line", String(index2 + 1)))
 })));
 const CircularIcon = ({ bem: bem2 }) => /* @__PURE__ */ React.createElement("svg", {
-  className: cls(bem2("circular")),
+  className: clsx(bem2("circular")),
   viewBox: "25 25 50 50"
 }, /* @__PURE__ */ React.createElement("circle", {
   cx: "50",
@@ -950,7 +950,7 @@ const CircularIcon = ({ bem: bem2 }) => /* @__PURE__ */ React.createElement("svg
   fill: "none"
 }));
 const BallIcon = ({ bem: bem2 }) => /* @__PURE__ */ React.createElement("div", {
-  className: cls(bem2("ball"))
+  className: clsx(bem2("ball"))
 }, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null));
 const Icon = (bem2) => ({
   spinner: /* @__PURE__ */ React.createElement(SpinIcon, {
@@ -963,7 +963,7 @@ const Icon = (bem2) => ({
     bem: bem2
   })
 });
-const [bem$1F] = createNamespace("loading");
+const [bem$1G] = createNamespace("loading");
 const Loading = (props) => {
   const {
     className,
@@ -985,7 +985,7 @@ const Loading = (props) => {
   const renderText = () => {
     if (children) {
       return /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$1F("text")),
+        className: clsx(bem$1G("text")),
         style: {
           fontSize: addUnit(textSize),
           color: textColor != null ? textColor : color
@@ -995,12 +995,12 @@ const Loading = (props) => {
     return null;
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(className, bem$1F([type, { vertical }])),
+    className: clsx(className, bem$1G([type, { vertical }])),
     style: props.style
   }, /* @__PURE__ */ React.createElement("span", {
-    className: cls(bem$1F("spinner", type)),
+    className: clsx(bem$1G("spinner", type)),
     style: spinnerStyle
-  }, Icon(bem$1F)[type]), renderText());
+  }, Icon(bem$1G)[type]), renderText());
 };
 const WHITE = "#fff";
 const BORDER = "rv-hairline";
@@ -1013,7 +1013,7 @@ const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`;
 const SHADOW = "rv-shadow";
 const COMPONENT_TYPE_KEY = "__REACT_VANT_COMPONENT";
 const ButtonContext = React.createContext({});
-const [bem$1E] = createNamespace("button");
+const [bem$1F] = createNamespace("button");
 const Button$1 = (props) => {
   const {
     color,
@@ -1067,9 +1067,9 @@ const Button$1 = (props) => {
     [parent == null ? void 0 : parent.tag, props.tag]
   );
   const TagElement = tag;
-  const classes = cls(
+  const classes = clsx(
     className,
-    bem$1E([
+    bem$1F([
       type,
       size,
       {
@@ -1106,7 +1106,7 @@ const Button$1 = (props) => {
     if (loading) {
       const { loadingSize = "20px" } = props;
       return /* @__PURE__ */ React.createElement(Loading, {
-        className: cls(bem$1E("loading")),
+        className: clsx(bem$1F("loading")),
         size: loadingSize,
         type: loadingType,
         color: type === "default" ? void 0 : ""
@@ -1120,7 +1120,7 @@ const Button$1 = (props) => {
     }
     if (props.icon) {
       return React.cloneElement(props.icon, {
-        className: cls(bem$1E("icon"))
+        className: clsx(bem$1F("icon"))
       });
     }
     return null;
@@ -1135,13 +1135,13 @@ const Button$1 = (props) => {
     if (text) {
       return /* @__PURE__ */ React.createElement("span", {
         key: "text",
-        className: cls(bem$1E("text"))
+        className: clsx(bem$1F("text"))
       }, text);
     }
     return null;
   };
   const renderContent = () => /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1E("content"))
+    className: clsx(bem$1F("content"))
   }, iconPosition === "left" && renderIcon(), renderText(), iconPosition === "right" && renderIcon());
   const ValidTagElement = TagElement;
   return /* @__PURE__ */ React.createElement(ValidTagElement, {
@@ -1153,7 +1153,7 @@ const Button$1 = (props) => {
     onClick
   }, renderContent());
 };
-const [bem$1D] = createNamespace("button-group");
+const [bem$1E] = createNamespace("button-group");
 const ButtonGroup = ({
   className,
   style,
@@ -1169,9 +1169,9 @@ const ButtonGroup = ({
   return /* @__PURE__ */ React.createElement("div", {
     onClick: internalClick,
     style,
-    className: cls(
+    className: clsx(
       className,
-      bem$1D([
+      bem$1E([
         props.type,
         {
           round: props.round,
@@ -1186,7 +1186,7 @@ const ButtonGroup = ({
   }, children));
 };
 const Button = Object.assign(Button$1, { Group: ButtonGroup });
-var index$14 = "";
+var index$15 = "";
 function mergeProps(...items) {
   const result = { ...items[0] };
   items.forEach((item) => {
@@ -1197,7 +1197,7 @@ function mergeProps(...items) {
   });
   return result;
 }
-const [bem$1C] = createNamespace("badge");
+const [bem$1D] = createNamespace("badge");
 const Badge = (p) => {
   const props = mergeProps(p, {
     tag: "div",
@@ -1239,11 +1239,11 @@ const Badge = (p) => {
         style = { ...props.style, ...style };
       }
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(
+        className: clsx(
           {
             [props.className]: props.className && !props.children
           },
-          bem$1C({ dot: props.dot, fixed: !!props.children })
+          bem$1D({ dot: props.dot, fixed: !!props.children })
         ),
         style
       }, renderContent());
@@ -1253,7 +1253,7 @@ const Badge = (p) => {
   if (props.children) {
     const ValidTagElement = TagElement;
     return /* @__PURE__ */ React.createElement(ValidTagElement, {
-      className: cls(bem$1C("wrapper"), props.className),
+      className: clsx(bem$1D("wrapper"), props.className),
       style: props.style,
       onClick: props.onClick,
       onTouchStart: props.onTouchStart
@@ -1261,6 +1261,69 @@ const Badge = (p) => {
   }
   return renderBadge();
 };
+var index$14 = "";
+const [bem$1C] = createNamespace("avatar");
+const presetSizes = ["mini", "small", "normal", "large"];
+const Avatar = (props) => {
+  const {
+    alt,
+    children,
+    className,
+    fallback,
+    fit = "cover",
+    shape = "circle",
+    size = "normal",
+    src,
+    style,
+    onClick,
+    onError,
+    onLoad
+  } = props;
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    setFailed(false);
+  }, [src]);
+  const avatarStyle = useMemo(() => {
+    const internalStyle = { ...style };
+    if (!presetSizes.includes(String(size))) {
+      const sizeValue = addUnit(size);
+      internalStyle.width = sizeValue;
+      internalStyle.height = sizeValue;
+    }
+    return internalStyle;
+  }, [style, size]);
+  const handleLoad = (event) => {
+    onLoad == null ? void 0 : onLoad(event);
+  };
+  const handleError = (event) => {
+    setFailed(true);
+    onError == null ? void 0 : onError(event);
+  };
+  const renderContent = () => {
+    if (src && !failed) {
+      return /* @__PURE__ */ React.createElement("img", {
+        className: clsx(bem$1C("img")),
+        src,
+        alt: alt || "",
+        style: { objectFit: fit },
+        onLoad: handleLoad,
+        onError: handleError
+      });
+    }
+    return fallback != null ? fallback : children;
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: clsx(
+      className,
+      bem$1C({
+        [shape]: !!shape,
+        [String(size)]: presetSizes.includes(String(size))
+      })
+    ),
+    style: avatarStyle,
+    onClick
+  }, renderContent());
+};
 var index$13 = "";
 var index$12 = "";
 const [bem$1B] = createNamespace("cell-group");
@@ -1271,14 +1334,14 @@ const CellGroup = (p) => {
   const { title, border, inset: insetP, card } = props;
   const inset = card || insetP;
   const renderGroup = () => /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1B({ inset }), {
+    className: clsx(bem$1B({ inset }), {
       [BORDER_TOP_BOTTOM]: !inset && border
     })
   }, props.children);
   const renderTitle = () => {
     if (title)
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1B("title"))
+        className: clsx(bem$1B("title"))
       }, title);
     return null;
   };
@@ -1293,7 +1356,7 @@ const Cell$1 = (props) => {
     const showLabel = isDef(props.label);
     if (showLabel) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1A("label"), props.labelClass)
+        className: clsx(bem$1A("label"), props.labelClass)
       }, props.label);
     }
     return null;
@@ -1301,7 +1364,7 @@ const Cell$1 = (props) => {
   const renderTitle = () => {
     if (isDef(props.title)) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1A("title"), props.titleClass),
+        className: clsx(bem$1A("title"), props.titleClass),
         style: props.titleStyle
       }, props.title, renderLabel());
     }
@@ -1312,7 +1375,7 @@ const Cell$1 = (props) => {
     const hasValue = isDef(props.children) || isDef(props.value);
     if (hasValue) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1A("value", { alone: !hasTitle }), props.valueClass)
+        className: clsx(bem$1A("value", { alone: !hasTitle }), props.valueClass)
       }, isDef(props.children) ? props.children : /* @__PURE__ */ React.createElement("span", null, props.value));
     }
     return null;
@@ -1321,7 +1384,7 @@ const Cell$1 = (props) => {
     var _a, _b, _c;
     if (props.icon) {
       return React.cloneElement(props.icon, {
-        className: cls((_c = (_b = (_a = props.icon) == null ? void 0 : _a.props) == null ? void 0 : _b.className) != null ? _c : "", bem$1A("left-icon"))
+        className: clsx((_c = (_b = (_a = props.icon) == null ? void 0 : _a.props) == null ? void 0 : _b.className) != null ? _c : "", bem$1A("left-icon"))
       });
     }
     return null;
@@ -1331,7 +1394,7 @@ const Cell$1 = (props) => {
       return props.rightIcon;
     }
     if (props.isLink) {
-      const className2 = cls(bem$1A("right-icon"));
+      const className2 = clsx(bem$1A("right-icon"));
       if (props.arrowDirection === "left")
         return /* @__PURE__ */ React.createElement(ArrowLeft, {
           className: className2
@@ -1372,7 +1435,7 @@ const Cell$1 = (props) => {
   }
   return /* @__PURE__ */ React.createElement("div", {
     style,
-    className: cls(bem$1A(classes), className),
+    className: clsx(bem$1A(classes), className),
     role: clickable ? "button" : void 0,
     onClick
   }, renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), props.extra);
@@ -1416,7 +1479,7 @@ const Overlay = (p) => {
             (_a = props.onClick) == null ? void 0 : _a.call(props, e);
           }
         },
-        className: cls(bem$1z(), props.className)
+        className: clsx(bem$1z(), props.className)
       }, props.children)
     );
   };
@@ -1651,7 +1714,7 @@ const Popup = forwardRef((p, ref) => {
       const { closeIconPosition } = props;
       if (closeIcon) {
         return /* @__PURE__ */ React.createElement("div", {
-          className: cls(bem$1y("close-icon", closeIconPosition)),
+          className: clsx(bem$1y("close-icon", closeIconPosition)),
           onClick: onClickCloseIcon
         }, closeIcon);
       }
@@ -1662,7 +1725,7 @@ const Popup = forwardRef((p, ref) => {
   const renderTitle = () => {
     if (title) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1y("title"))
+        className: clsx(bem$1y("title"))
       }, title);
     }
     return null;
@@ -1670,7 +1733,7 @@ const Popup = forwardRef((p, ref) => {
   const renderDescription = () => {
     if (description) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1y("description"))
+        className: clsx(bem$1y("description"))
       }, description);
     }
     return null;
@@ -1685,7 +1748,7 @@ const Popup = forwardRef((p, ref) => {
           ...style,
           display: !visible && !animatedVisible ? "none" : void 0
         },
-        className: cls(
+        className: clsx(
           bem$1y({
             round,
             [position]: position
@@ -1754,7 +1817,7 @@ const ActionBar$1 = (p) => {
   return /* @__PURE__ */ React.createElement(ActionButtonContext.Provider, {
     value: { parent: { children } }
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$1x(), {
+    className: clsx(props.className, bem$1x(), {
       "rv-safe-area-bottom": props.safeAreaInsetBottom
     }),
     style: props.style
@@ -1771,14 +1834,14 @@ const ActionBarIcon = (props) => {
     if (icon) {
       return /* @__PURE__ */ React.createElement(Badge, {
         ...badge,
-        className: cls(bem$1w("icon"))
+        className: clsx(bem$1w("icon"))
       }, icon);
     }
     return null;
   };
   return /* @__PURE__ */ React.createElement("div", {
     role: "button",
-    className: cls(props.className, bem$1w()),
+    className: clsx(props.className, bem$1w()),
     style: props.style,
     tabIndex: 0,
     onClick: props.onClick
@@ -1803,7 +1866,7 @@ const ActionBarButton = (props) => {
     return false;
   }, [index2, parent]);
   return /* @__PURE__ */ React.createElement(Button, {
-    className: cls(
+    className: clsx(
       props.className,
       bem$1v([
         type,
@@ -1949,7 +2012,7 @@ const Dialog$1 = (p) => {
   const renderTitle = () => {
     if (props.title) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(
+        className: clsx(
           bem$1u("header", {
             isolated: !props.message && !props.children
           })
@@ -1961,14 +2024,14 @@ const Dialog$1 = (p) => {
   const renderContent = () => {
     if (props.children) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1u("content"))
+        className: clsx(bem$1u("content"))
       }, props.children);
     }
     if (message) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1u("content", { isolated: !title }))
+        className: clsx(bem$1u("content", { isolated: !title }))
       }, /* @__PURE__ */ React.createElement("div", {
-        className: cls(
+        className: clsx(
           bem$1u("message", {
             "has-title": title,
             [messageAlign]: messageAlign
@@ -1981,11 +2044,11 @@ const Dialog$1 = (p) => {
   const renderButtons = () => {
     var _a, _b, _c, _d, _e, _f;
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(BORDER_TOP, bem$1u("footer"))
+      className: clsx(BORDER_TOP, bem$1u("footer"))
     }, props.showCancelButton && /* @__PURE__ */ React.createElement(Button, {
       size: "large",
       text: props.cancelButtonText || locale.cancel,
-      className: cls(bem$1u("cancel")),
+      className: clsx(bem$1u("cancel")),
       style: { color: props.cancelButtonColor },
       loading: (_a = props.cancelProps) == null ? void 0 : _a.loading,
       disabled: (_b = props.cancelProps) == null ? void 0 : _b.disabled,
@@ -1993,7 +2056,7 @@ const Dialog$1 = (p) => {
     }), props.showConfirmButton && /* @__PURE__ */ React.createElement(Button, {
       size: "large",
       text: props.confirmButtonText || locale.confirm,
-      className: cls(bem$1u("confirm"), {
+      className: clsx(bem$1u("confirm"), {
         [BORDER_LEFT]: props.showCancelButton
       }),
       round: theme === "round-button" || void 0,
@@ -2006,11 +2069,11 @@ const Dialog$1 = (p) => {
   const renderRoundButtons = () => {
     var _a, _b, _c, _d, _e, _f;
     return /* @__PURE__ */ React.createElement(ActionBar, {
-      className: cls(bem$1u("footer"))
+      className: clsx(bem$1u("footer"))
     }, props.showCancelButton && /* @__PURE__ */ React.createElement(ActionBar.Button, {
       type: "warning",
       text: props.cancelButtonText || locale.cancel,
-      className: cls(bem$1u("cancel")),
+      className: clsx(bem$1u("cancel")),
       color: props.cancelButtonColor,
       loading: (_a = props.cancelProps) == null ? void 0 : _a.loading,
       disabled: (_b = props.cancelProps) == null ? void 0 : _b.disabled,
@@ -2018,7 +2081,7 @@ const Dialog$1 = (p) => {
     }), props.showConfirmButton && /* @__PURE__ */ React.createElement(ActionBar.Button, {
       type: "danger",
       text: props.confirmButtonText || locale.confirm,
-      className: cls(bem$1u("confirm")),
+      className: clsx(bem$1u("confirm")),
       color: props.confirmButtonColor,
       loading: (_d = props.confirmProps) == null ? void 0 : _d.loading,
       disabled: (_e = props.confirmProps) == null ? void 0 : _e.disabled,
@@ -2033,7 +2096,7 @@ const Dialog$1 = (p) => {
   return /* @__PURE__ */ React.createElement(Popup, {
     ...others,
     visible,
-    className: cls(bem$1u([theme]), className),
+    className: clsx(bem$1u([theme]), className),
     style: { width: addUnit(width) },
     "aria-labelledby": title || message,
     closeOnClickOverlay,
@@ -2328,7 +2391,7 @@ const Input$1 = forwardRef((p, ref) => {
       inputMode,
       ref: inputRef,
       name,
-      className: cls(bem$1t("control")),
+      className: clsx(bem$1t("control")),
       disabled,
       autoFocus,
       readOnly,
@@ -2364,18 +2427,18 @@ const Input$1 = forwardRef((p, ref) => {
     (_a = props.onClear) == null ? void 0 : _a.call(props, e);
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1t([align]), className),
+    className: clsx(bem$1t([align]), className),
     style
   }, props.prefix && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1t("prefix"))
+    className: clsx(bem$1t("prefix"))
   }, props.prefix), renderInput(), showClear && React.cloneElement(
     props.clearIcon || /* @__PURE__ */ React.createElement(Clear, null),
     {
-      className: cls(bem$1t("clear")),
+      className: clsx(bem$1t("clear")),
       onTouchStart: handleClear
     }
   ), props.suffix && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1t("suffix"))
+    className: clsx(bem$1t("suffix"))
   }, props.suffix));
 });
 const [bem$1s] = createNamespace("textarea");
@@ -2481,9 +2544,9 @@ const TextArea = forwardRef((p, ref) => {
     if (showWordLimit) {
       const currentCount = (value ? `${value}` : "").length;
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1s("word-limit"))
+        className: clsx(bem$1s("word-limit"))
       }, typeof showWordLimit === "function" ? showWordLimit({ currentCount, maxLength }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$1s("word-num"))
+        className: clsx(bem$1s("word-num"))
       }, currentCount), maxLength ? `/${maxLength}` : false));
     }
     return null;
@@ -2502,13 +2565,13 @@ const TextArea = forwardRef((p, ref) => {
     return false;
   }, [value, props.clearTrigger, hasFocus]);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1s(), className),
+    className: clsx(bem$1s(), className),
     style
   }, /* @__PURE__ */ React.createElement("textarea", {
     ref: nativeTextAreaRef,
     name,
     rows,
-    className: cls(controlClass),
+    className: clsx(controlClass),
     value,
     disabled,
     autoFocus,
@@ -2537,7 +2600,7 @@ const TextArea = forwardRef((p, ref) => {
     },
     onClick: props.onClick
   }), showClear && React.cloneElement(props.clearIcon, {
-    className: cls(bem$1s("clear")),
+    className: clsx(bem$1s("clear")),
     onTouchStart: handleClear
   }), renderWordLimit());
 });
@@ -2626,7 +2689,7 @@ const Field = forwardRef((p, ref) => {
     } = props;
     if (isDef(props.children)) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1r("children"))
+        className: clsx(bem$1r("children"))
       }, props.children);
     }
     const commonProps = {
@@ -2670,7 +2733,7 @@ const Field = forwardRef((p, ref) => {
     if (!leftIcon)
       return null;
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$1r("left-icon")),
+      className: clsx(bem$1r("left-icon")),
       onClick: onClickLeftIcon
     }, leftIcon);
   };
@@ -2679,7 +2742,7 @@ const Field = forwardRef((p, ref) => {
     if (!rightIcon)
       return null;
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$1r("right-icon")),
+      className: clsx(bem$1r("right-icon")),
       onClick: onClickRightIcon
     }, rightIcon);
   };
@@ -2687,7 +2750,7 @@ const Field = forwardRef((p, ref) => {
     const message = props.errorMessage;
     if (message) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1r("error-message"))
+        className: clsx(bem$1r("error-message"))
       }, message);
     }
     return null;
@@ -2695,7 +2758,7 @@ const Field = forwardRef((p, ref) => {
   const renderIntro = () => {
     if (props.intro) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1r("intro"))
+        className: clsx(bem$1r("intro"))
       }, props.intro);
     }
     return null;
@@ -2711,7 +2774,7 @@ const Field = forwardRef((p, ref) => {
         dialogProps = customDialogProps;
       }
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1r("tooltip")),
+        className: clsx(bem$1r("tooltip")),
         onClick: () => Dialog.show(dialogProps)
       }, icon);
     }
@@ -2753,12 +2816,12 @@ const Field = forwardRef((p, ref) => {
     clickable,
     extra: props.extra,
     titleStyle: { ...labelStyle(), ...titleStyle },
-    valueClass: cls(bem$1r("value", [controlAlign]), valueClass),
-    titleClass: cls(bem$1r("label", labelAlign), labelClass),
+    valueClass: clsx(bem$1r("value", [controlAlign]), valueClass),
+    titleClass: clsx(bem$1r("label", labelAlign), labelClass),
     arrowDirection,
     onClick: props.onClick,
     style: props.style,
-    className: cls(
+    className: clsx(
       bem$1r({
         error,
         disabled,
@@ -2767,13 +2830,13 @@ const Field = forwardRef((p, ref) => {
       className
     )
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1r("body"))
+    className: clsx(bem$1r("body"))
   }, props.prefix && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1r("prefix"))
+    className: clsx(bem$1r("prefix"))
   }, props.prefix), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1r("control-wrapper"))
+    className: clsx(bem$1r("control-wrapper"))
   }, renderInput()), renderRightIcon(), suffix && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1r("suffix"))
+    className: clsx(bem$1r("suffix"))
   }, suffix)), renderMessage(), renderIntro());
 });
 const FIELD_KEY = Symbol("field");
@@ -2808,7 +2871,7 @@ const Flex$1 = (props) => {
     } : {},
     ...style
   };
-  const wrapCls = cls(
+  const wrapCls = clsx(
     className,
     bem$1q([
       direction,
@@ -2828,7 +2891,7 @@ const Flex$1 = (props) => {
 const [bem$1p] = createNamespace("flexitem");
 const FlexItem = (props) => {
   const { style, className, span, children, flex, ...others } = props;
-  const classes = cls(bem$1p([span == null ? void 0 : span.toString()]), className);
+  const classes = clsx(bem$1p([span == null ? void 0 : span.toString()]), className);
   const parseFlex = (_flex) => {
     if (typeof _flex === "number") {
       return `${_flex} ${_flex} auto`;
@@ -2892,7 +2955,7 @@ const Space = (props) => {
     [props.children]
   );
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(
+    className: clsx(
       props.className,
       bem$1o({
         wrap,
@@ -2908,9 +2971,9 @@ const Space = (props) => {
     return /* @__PURE__ */ React.createElement(React.Fragment, {
       key: idx
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$1o("item"))
+      className: clsx(bem$1o("item"))
     }, child), !!props.divider && idx !== childList.length - 1 && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$1o("item-divider"))
+      className: clsx(bem$1o("item-divider"))
     }, props.divider));
   }));
 };
@@ -2966,7 +3029,7 @@ const Selector = (p) => {
   const items = props.options.map((option) => {
     const active = (value || []).includes(option.value);
     const disabled = option.disabled || props.disabled;
-    const itemCls = cls(
+    const itemCls = clsx(
       bem$1n("item", {
         active: active && !props.multiple,
         "multiple-active": active && props.multiple,
@@ -2989,13 +3052,13 @@ const Selector = (p) => {
         }
       }
     }, option.label, option.description && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$1n("item-description"))
+      className: clsx(bem$1n("item-description"))
     }, option.description), active && props.showCheckMark && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$1n("check-mark-wrapper"))
+      className: clsx(bem$1n("check-mark-wrapper"))
     }, /* @__PURE__ */ React.createElement(CheckMark, null)));
   });
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1n(), props.className),
+    className: clsx(bem$1n(), props.className),
     style: props.style
   }, items);
 };
@@ -3134,7 +3197,7 @@ const Ellipsis = (p) => {
   };
   return /* @__PURE__ */ React.createElement("div", {
     ref: rootRef,
-    className: cls("rv-typography__ellipsis", props.className),
+    className: clsx("rv-typography__ellipsis", props.className),
     style: props.style
   }, renderContent());
 };
@@ -3221,7 +3284,7 @@ const TypographyBase = ({
     if (isEnhanceEllipsis)
       return /* @__PURE__ */ React.createElement(Ellipsis, {
         onContentClick: internalClick,
-        className: cls(
+        className: clsx(
           className,
           `rv-typography__${renderType}`,
           bem$1m([
@@ -3242,7 +3305,7 @@ const TypographyBase = ({
         style: measureStyle
       }, children);
     return /* @__PURE__ */ React.createElement(TagElement, {
-      className: cls(
+      className: clsx(
         className,
         `rv-typography__${renderType}`,
         bem$1m([
@@ -3355,7 +3418,7 @@ const CountDown = forwardRef((p, ref) => {
     reset: resetTime
   }));
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$1l()),
+    className: clsx(props.className, bem$1l()),
     style: props.style
   }, props.children ? props.children(current) : timeText);
 });
@@ -3372,7 +3435,7 @@ const Divider = ({
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
     role: "separator",
-    className: cls(
+    className: clsx(
       className,
       bem$1k({
         dashed,
@@ -3428,7 +3491,7 @@ const Image$1 = (props) => {
   const renderLoadingIcon = () => {
     if (loadingIcon)
       return React.cloneElement(loadingIcon, {
-        className: cls(bem$1j("loading-icon")),
+        className: clsx(bem$1j("loading-icon")),
         fontSize: props.iconSize
       });
     return null;
@@ -3436,7 +3499,7 @@ const Image$1 = (props) => {
   const renderErrorIcon = () => {
     if (errorIcon) {
       return React.cloneElement(errorIcon, {
-        className: cls(bem$1j("error-icon")),
+        className: clsx(bem$1j("error-icon")),
         fontSize: props.iconSize
       });
     }
@@ -3445,13 +3508,13 @@ const Image$1 = (props) => {
   const renderPlaceholder = () => {
     if (status.loading && showLoading) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1j("loading")),
+        className: clsx(bem$1j("loading")),
         onClick: props.onClick
       }, renderLoadingIcon());
     }
     if (status.error && showError) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1j("error")),
+        className: clsx(bem$1j("error")),
         onClick: props.onClick
       }, renderErrorIcon());
     }
@@ -3462,7 +3525,7 @@ const Image$1 = (props) => {
       return null;
     }
     const attrs = {
-      className: cls(bem$1j("img")),
+      className: clsx(bem$1j("img")),
       style: {
         objectFit: fit
       }
@@ -3477,7 +3540,7 @@ const Image$1 = (props) => {
     });
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(
+    className: clsx(
       props.className,
       bem$1j({
         block,
@@ -3527,7 +3590,7 @@ const Skeleton = ({
   const renderAvatar = () => {
     if (props.avatar) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1i("avatar", props.avatarShape)),
+        className: clsx(bem$1i("avatar", props.avatarShape)),
         style: getSizeStyle(props.avatarSize)
       });
     }
@@ -3538,7 +3601,7 @@ const Skeleton = ({
       const width = addUnit(props.titleWidth);
       const height = addUnit(getRowHeight(0));
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1i("title")),
+        className: clsx(bem$1i("title")),
         style: { width, height }
       });
     }
@@ -3549,20 +3612,20 @@ const Skeleton = ({
     const height = addUnit(getRowHeight(i));
     return /* @__PURE__ */ React.createElement("div", {
       key: i,
-      className: cls(bem$1i("row")),
+      className: clsx(bem$1i("row")),
       style: { width, height }
     });
   });
   if (!props.loading)
     return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(
+    className: clsx(
       className,
       bem$1i({ animate: props.animate, round: props.round })
     ),
     style
   }, renderAvatar(), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1i("content"))
+    className: clsx(bem$1i("content"))
   }, renderTitle(), renderRows()));
 };
 const [bem$1h] = createNamespace("lazyload");
@@ -3577,14 +3640,14 @@ const Lazyload = (p) => {
   const { height, placeholder, children, className, style } = props;
   return inViewPort ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement("div", {
     ref,
-    className: cls(bem$1h(), className),
+    className: clsx(bem$1h(), className),
     style: { height, ...style }
   }, placeholder);
 };
 const getLazyImagePlaceholder = (bem2) => /* @__PURE__ */ React.createElement("div", {
-  className: cls(bem2("loading"))
+  className: clsx(bem2("loading"))
 }, /* @__PURE__ */ React.createElement(Photo, {
-  className: cls(bem2("loading-icon"))
+  className: clsx(bem2("loading-icon"))
 }));
 const [bem$1g] = createNamespace("image");
 const LazyImage = (p) => {
@@ -3605,7 +3668,7 @@ const LazyImage = (p) => {
   if (lazyload) {
     const { className, style, height, width } = imageProps;
     const attrs = {
-      className: cls(className, bem$1g({ block: imageProps.block })),
+      className: clsx(className, bem$1g({ block: imageProps.block })),
       style: { ...style, height, width }
     };
     return /* @__PURE__ */ React.createElement(Lazyload, {
@@ -3771,17 +3834,17 @@ const Slide = (props) => {
     return lazyload.placeholder || getLazyImagePlaceholder(bem$1f);
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1f("slide")),
+    className: clsx(bem$1f("slide")),
     onPointerMove: (e) => {
       if (zoom.get() !== 1) {
         e.stopPropagation();
       }
     }
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1f("control")),
+    className: clsx(bem$1f("control")),
     ref: controlRef
   }, /* @__PURE__ */ React.createElement(animated.div, {
-    className: cls(bem$1f("image-wrapper")),
+    className: clsx(bem$1f("image-wrapper")),
     style: {
       translateX: x,
       translateY: y,
@@ -3863,10 +3926,10 @@ const Slides = forwardRef((props, ref) => {
     }
   );
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1e("slides")),
+    className: clsx(bem$1e("slides")),
     ...bind()
   }, /* @__PURE__ */ React.createElement(animated.div, {
-    className: cls(bem$1e("slides-inner")),
+    className: clsx(bem$1e("slides-inner")),
     style: { x: x.to((x2) => -x2) }
   }, props.images.map((image, idx) => /* @__PURE__ */ React.createElement(Slide, {
     key: `${image}${idx}`,
@@ -3893,7 +3956,7 @@ const SwiperPagIndicator = React.memo(
       dots.push(
         /* @__PURE__ */ React.createElement("div", {
           key: i,
-          className: cls(
+          className: clsx(
             bem$1d("dot", {
               active: props.current === i
             })
@@ -3902,7 +3965,7 @@ const SwiperPagIndicator = React.memo(
       );
     }
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(props.className, bem$1d({ vertical })),
+      className: clsx(props.className, bem$1d({ vertical })),
       style: props.style
     }, dots);
   }
@@ -3939,7 +4002,7 @@ const ImagePreview$1 = React.forwardRef(
       (_a = props.onClose) == null ? void 0 : _a.call(props, { url: currentImage, index: active });
     };
     const renderContent = () => /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$1c("content"))
+      className: clsx(bem$1c("content"))
     }, props.images && /* @__PURE__ */ React.createElement(Slides, {
       ref: slidesRef,
       defaultIndex: props.startPosition,
@@ -3956,7 +4019,7 @@ const ImagePreview$1 = React.forwardRef(
     const renderClose = () => {
       if (props.closeable) {
         return React.cloneElement(props.closeIcon, {
-          className: cls(bem$1c("close-icon", props.closeIconPosition)),
+          className: clsx(bem$1c("close-icon", props.closeIconPosition)),
           onClick: onClose
         });
       }
@@ -3965,7 +4028,7 @@ const ImagePreview$1 = React.forwardRef(
     const renderIndex = () => {
       if (props.showIndex) {
         return /* @__PURE__ */ React.createElement("div", {
-          className: cls(bem$1c("index"))
+          className: clsx(bem$1c("index"))
         }, props.indexRender ? props.indexRender({ index: active, len: props.images.length }) : `${active + 1} / ${props.images.length}`);
       }
       return null;
@@ -3973,7 +4036,7 @@ const ImagePreview$1 = React.forwardRef(
     const renderIndicator = () => {
       if (props.showIndicators) {
         return /* @__PURE__ */ React.createElement("div", {
-          className: cls(bem$1c("indicator"))
+          className: clsx(bem$1c("indicator"))
         }, /* @__PURE__ */ React.createElement(SwiperPagIndicator, {
           total: props.images.length,
           current: active
@@ -3989,8 +4052,8 @@ const ImagePreview$1 = React.forwardRef(
       }
     }));
     return /* @__PURE__ */ React.createElement(Popup, {
-      className: cls(bem$1c(), props.className),
-      overlayClass: cls(bem$1c("overlay")),
+      className: clsx(bem$1c(), props.className),
+      overlayClass: clsx(bem$1c("overlay")),
       ...pick(props, [
         "visible",
         "overlayStyle",
@@ -4199,7 +4262,7 @@ const Empty = (p) => {
   const renderDescription = () => {
     if (props.description) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1b("description"))
+        className: clsx(bem$1b("description"))
       }, props.description);
     }
     return null;
@@ -4207,16 +4270,16 @@ const Empty = (p) => {
   const renderBottom = () => {
     if (props.children) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1b("bottom"))
+        className: clsx(bem$1b("bottom"))
       }, props.children);
     }
     return null;
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$1b()),
+    className: clsx(props.className, bem$1b()),
     style: props.style
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1b("image")),
+    className: clsx(bem$1b("image")),
     style: getSizeStyle(props.imageSize)
   }, renderImage()), renderDescription(), renderBottom());
 };
@@ -4247,7 +4310,7 @@ const Notify = ({
     onClosed: props.onClosed,
     teleport: props.teleport
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1a([props.type]), props.className)
+    className: clsx(bem$1a([props.type]), props.className)
   }, children || props.message));
 };
 let lockCount = 0;
@@ -4433,7 +4496,7 @@ const PullRefresh = (p) => {
       nodes.push(
         /* @__PURE__ */ React.createElement("div", {
           key: "text",
-          className: cls(bem$19("text"))
+          className: clsx(bem$19("text"))
         }, getStatusText())
       );
     }
@@ -4441,7 +4504,7 @@ const PullRefresh = (p) => {
       nodes.push(
         /* @__PURE__ */ React.createElement(Loading, {
           key: "loading",
-          className: cls(bem$19("loading"))
+          className: clsx(bem$19("loading"))
         }, getStatusText())
       );
     }
@@ -4530,17 +4593,17 @@ const PullRefresh = (p) => {
   );
   return /* @__PURE__ */ React.createElement("div", {
     ref: root2,
-    className: cls(props.className, bem$19()),
+    className: clsx(props.className, bem$19()),
     style: props.style
   }, /* @__PURE__ */ React.createElement("div", {
     ref: track,
-    className: cls(bem$19("track")),
+    className: clsx(bem$19("track")),
     style: trackStyle,
     onTouchStart,
     onTouchEnd,
     onTouchCancel: onTouchEnd
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$19("head")),
+    className: clsx(bem$19("head")),
     style: getHeadStyle()
   }, renderStatus()), props.children));
 };
@@ -4699,7 +4762,7 @@ const SwipeCell = forwardRef(
       if (props[`${side}Action`]) {
         return /* @__PURE__ */ React.createElement("div", {
           ref: measuredRef,
-          className: cls(bem$18(side)),
+          className: clsx(bem$18(side)),
           onClick: getClickHandler(side, true)
         }, props[`${side}Action`]);
       }
@@ -4720,13 +4783,13 @@ const SwipeCell = forwardRef(
     });
     return /* @__PURE__ */ React.createElement("div", {
       ref: root2,
-      className: cls(bem$18()),
+      className: clsx(bem$18()),
       onClick: getClickHandler("cell"),
       onTouchStart,
       onTouchEnd,
       onTouchCancel: onTouchEnd
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$18("wrapper")),
+      className: clsx(bem$18("wrapper")),
       style: wrapperStyle
     }, renderSideContent("left", leftRef), props.children, renderSideContent("right", rightRef)));
   }
@@ -4770,11 +4833,11 @@ const ShareSheet = (p) => {
     const { title, description } = props;
     if (title || description) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$17("header"))
+        className: clsx(bem$17("header"))
       }, title && /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$17("title"))
+        className: clsx(bem$17("title"))
       }, title), description && /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$17("description"))
+        className: clsx(bem$17("description"))
       }, description));
     }
     return null;
@@ -4785,21 +4848,21 @@ const ShareSheet = (p) => {
       key: index2,
       role: "button",
       tabIndex: 0,
-      className: cls([bem$17("option"), className]),
+      className: clsx([bem$17("option"), className]),
       onClick: () => onSelect(option, index2)
     }, typeof icon === "string" ? /* @__PURE__ */ React.createElement("img", {
       alt: "share sheet icon",
       src: getIconURL(icon),
-      className: cls(bem$17("icon"))
+      className: clsx(bem$17("icon"))
     }) : icon, name && /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem$17("name"))
+      className: clsx(bem$17("name"))
     }, name), description && /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem$17("option-description"))
+      className: clsx(bem$17("option-description"))
     }, description));
   };
   const renderOptions = (options, border, key) => /* @__PURE__ */ React.createElement("div", {
     key,
-    className: cls(bem$17("options", { border }))
+    className: clsx(bem$17("options", { border }))
   }, options.map(renderOption));
   const renderRows = () => {
     const { options } = props;
@@ -4815,7 +4878,7 @@ const ShareSheet = (p) => {
     if (cancelText) {
       return /* @__PURE__ */ React.createElement("button", {
         type: "button",
-        className: cls(bem$17("cancel")),
+        className: clsx(bem$17("cancel")),
         onClick: onCancel
       }, cancelText);
     }
@@ -4823,7 +4886,7 @@ const ShareSheet = (p) => {
   };
   return /* @__PURE__ */ React.createElement(Popup, {
     round: true,
-    className: cls(bem$17()),
+    className: clsx(bem$17()),
     position: "bottom",
     onClose: onCancel,
     ...pick(props, [
@@ -4871,7 +4934,7 @@ const NoticeBar = forwardRef((p, ref) => {
   const renderLeftIcon = () => {
     if (props.leftIcon) {
       return React.cloneElement(props.leftIcon, {
-        className: cls(bem$16("left-icon"))
+        className: clsx(bem$16("left-icon"))
       });
     }
     return null;
@@ -4900,7 +4963,7 @@ const NoticeBar = forwardRef((p, ref) => {
     const finalRightIcon = props.rightIcon || getRightIcon();
     if (finalRightIcon) {
       return React.cloneElement(finalRightIcon, {
-        className: cls(bem$16("right-icon")),
+        className: clsx(bem$16("right-icon")),
         onClick: onClickRightIcon
       });
     }
@@ -4930,10 +4993,10 @@ const NoticeBar = forwardRef((p, ref) => {
       transitionDuration: `${state.duration}s`
     };
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$16("wrap")),
+      className: clsx(bem$16("wrap")),
       ref: wrapRef
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$16("content"), { "rv-ellipsis": ellipsis }),
+      className: clsx(bem$16("content"), { "rv-ellipsis": ellipsis }),
       ref: contentRef,
       style,
       onTransitionEnd
@@ -4978,7 +5041,7 @@ const NoticeBar = forwardRef((p, ref) => {
   }));
   return state.show && /* @__PURE__ */ React.createElement("div", {
     role: "alert",
-    className: cls(bem$16({ wrapable }), props.className),
+    className: clsx(bem$16({ wrapable }), props.className),
     style: { color, background, ...props.style },
     onClick: props.onClick
   }, renderLeftIcon(), renderMarquee(), renderRightIcon());
@@ -5091,16 +5154,16 @@ const Popover = forwardRef(
       const { icon, text, color, disabled, className: actionClassname } = action;
       return /* @__PURE__ */ React.createElement("div", {
         key: index2,
-        className: cls(
+        className: clsx(
           bem$15("action", { disabled, "with-icon": icon }),
           actionClassname
         ),
         style: { color },
         onClick: () => onClickAction(action, index2)
       }, icon ? React.cloneElement(icon, {
-        className: cls(bem$15("action-icon"))
+        className: clsx(bem$15("action-icon"))
       }) : null, /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$15("action-text"), BORDER_BOTTOM)
+        className: clsx(bem$15("action-text"), BORDER_BOTTOM)
       }, text));
     };
     useEffect(() => {
@@ -5141,12 +5204,12 @@ const Popover = forwardRef(
     useClickAway(wrapperRef, onClickAway, "touchstart");
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
       ref: wrapperRef,
-      className: cls(bem$15("wrapper")),
+      className: clsx(bem$15("wrapper")),
       onClick: onClickWrapper
     }, props.reference), /* @__PURE__ */ React.createElement(Popup, {
       ref: popoverRef,
       visible,
-      className: cls(className, bem$15([props.theme])),
+      className: clsx(className, bem$15([props.theme])),
       position: "",
       transition: "rv-zoom",
       lockScroll: false,
@@ -5154,10 +5217,10 @@ const Popover = forwardRef(
       onClose: onInternalClose,
       ...pick(props, popupProps)
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$15("arrow"))
+      className: clsx(bem$15("arrow"))
     }), /* @__PURE__ */ React.createElement("div", {
       role: "menu",
-      className: cls(bem$15("content"))
+      className: clsx(bem$15("content"))
     }, children || props.actions.map(renderAction))));
   }
 );
@@ -5405,7 +5468,7 @@ const LoadMore = React.forwardRef((p, ref) => {
   const renderDone = () => {
     if (props.finishedText) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$14("finished"))
+        className: clsx(bem$14("finished"))
       }, props.finishedText);
     }
     return null;
@@ -5416,14 +5479,14 @@ const LoadMore = React.forwardRef((p, ref) => {
         return props.errorText(retry);
       return /* @__PURE__ */ React.createElement("div", {
         onClick: retry,
-        className: cls(bem$14("error"))
+        className: clsx(bem$14("error"))
       }, props.errorText);
     }
     return null;
   };
   const renderLoading = () => {
     return /* @__PURE__ */ React.createElement(Loading, {
-      className: cls(bem$14("loading")),
+      className: clsx(bem$14("loading")),
       size: 16
     }, props.loadingText || locale.loading);
   };
@@ -5436,10 +5499,10 @@ const LoadMore = React.forwardRef((p, ref) => {
   };
   React.useImperativeHandle(ref, () => ({ check }));
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$14()),
+    className: clsx(props.className, bem$14()),
     style: props.style
   }, props.children, /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$14("loadmore")),
+    className: clsx(props.className, bem$14("loadmore")),
     ref: elementRef
   }, renderPlaceholder()));
 });
@@ -5449,7 +5512,7 @@ const List = forwardRef((p, ref) => {
   });
   return /* @__PURE__ */ React.createElement(LoadMore, {
     ref,
-    className: cls(props.className),
+    className: clsx(props.className),
     style: props.style,
     onLoad: props.onLoad,
     threshold: props.offset,
@@ -5468,10 +5531,10 @@ const Steps$1 = ({ children, className, style, ...p }) => {
     activeIcon: /* @__PURE__ */ React.createElement(Checked, null)
   });
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(className, bem$13([props.direction])),
+    className: clsx(className, bem$13([props.direction])),
     style
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$13("items"))
+    className: clsx(bem$13("items"))
   }, React.Children.toArray(children).filter(Boolean).map(
     (child, index2) => React.cloneElement(child, {
       index: index2,
@@ -5528,7 +5591,7 @@ const StepsItem = ({ children, ...props }) => {
     if (isActive()) {
       if (activeIcon) {
         return React.cloneElement(activeIcon, {
-          className: cls(bem$12("icon", "active")),
+          className: clsx(bem$12("icon", "active")),
           color: activeColor,
           style: {
             color: activeColor
@@ -5538,7 +5601,7 @@ const StepsItem = ({ children, ...props }) => {
     }
     if (getStatus() === "finish" && finishIcon) {
       return React.cloneElement(finishIcon, {
-        className: cls(bem$12("icon", "finish")),
+        className: clsx(bem$12("icon", "finish")),
         color: activeColor,
         style: {
           color: activeColor
@@ -5547,7 +5610,7 @@ const StepsItem = ({ children, ...props }) => {
     }
     if (inactiveIcon) {
       return React.cloneElement(inactiveIcon, {
-        className: cls(bem$12("icon")),
+        className: clsx(bem$12("icon")),
         color: activeColor,
         style: {
           color: activeColor
@@ -5555,27 +5618,27 @@ const StepsItem = ({ children, ...props }) => {
       });
     }
     return /* @__PURE__ */ React.createElement("i", {
-      className: cls(bem$12("circle")),
+      className: clsx(bem$12("circle")),
       style: lineStyle
     });
   };
   const status = getStatus();
   return /* @__PURE__ */ React.createElement("div", {
     style: props.style,
-    className: cls(
+    className: clsx(
       props.className,
       BORDER,
       bem$12([parentProps.direction, { [status]: status }])
     )
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$12("title", { active: isActive() })),
+    className: clsx(bem$12("title", { active: isActive() })),
     style: titleStyle,
     onClick: onClickStep
   }, children), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$12("circle-container")),
+    className: clsx(bem$12("circle-container")),
     onClick: onClickStep
   }, renderCircle()), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$12("line")),
+    className: clsx(bem$12("line")),
     style: lineStyle
   }));
 };
@@ -5614,13 +5677,13 @@ const Toast$1 = (p) => {
     if (hasIcon) {
       const buildInIcon = type === "fail" ? /* @__PURE__ */ React.createElement(Cross, null) : /* @__PURE__ */ React.createElement(Success, null);
       return React.cloneElement(icon || buildInIcon, {
-        className: cls(bem$11("icon")),
+        className: clsx(bem$11("icon")),
         fontSize: iconSize
       });
     }
     if (type === "loading") {
       return /* @__PURE__ */ React.createElement(Loading, {
-        className: cls(bem$11("loading")),
+        className: clsx(bem$11("loading")),
         type: loadingType
       });
     }
@@ -5630,13 +5693,13 @@ const Toast$1 = (p) => {
     const { message } = props;
     if (isDef(message) && message !== "") {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$11("info"))
+        className: clsx(bem$11("info"))
       }, message);
     }
     return null;
   };
   return /* @__PURE__ */ React.createElement(Popup, {
-    className: cls([
+    className: clsx([
       bem$11([props.position, { [props.type]: !props.icon }]),
       props.className
     ]),
@@ -5806,9 +5869,9 @@ const ActionSheet = (p) => {
     if (!props.title)
       return null;
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$10("header"))
+      className: clsx(bem$10("header"))
     }, props.title, props.closeable && React.cloneElement(props.closeIcon, {
-      className: cls(bem$10("clear")),
+      className: clsx(bem$10("clear")),
       onClick: onCancel
     }));
   };
@@ -5818,12 +5881,12 @@ const ActionSheet = (p) => {
     return [
       /* @__PURE__ */ React.createElement("div", {
         key: "cancel-gap",
-        className: cls(bem$10("gap"))
+        className: clsx(bem$10("gap"))
       }),
       /* @__PURE__ */ React.createElement("button", {
         key: "cancel-btn",
         type: "button",
-        className: cls(bem$10("cancel")),
+        className: clsx(bem$10("cancel")),
         onClick: onCancel
       }, props.cancelText)
     ];
@@ -5840,15 +5903,15 @@ const ActionSheet = (p) => {
       style
     } = item;
     const Content = loading ? /* @__PURE__ */ React.createElement(Loading, {
-      className: cls(bem$10("loading-icon"))
+      className: clsx(bem$10("loading-icon"))
     }) : [
       /* @__PURE__ */ React.createElement("span", {
         key: `${index2}-1`,
-        className: cls(bem$10("name"))
+        className: clsx(bem$10("name"))
       }, name),
       subname && /* @__PURE__ */ React.createElement("div", {
         key: `${index2}-2`,
-        className: cls(bem$10("subname"))
+        className: clsx(bem$10("subname"))
       }, subname)
     ];
     const onClick = () => {
@@ -5870,14 +5933,14 @@ const ActionSheet = (p) => {
       key: index2,
       type: "button",
       style: { color, ...style },
-      className: cls(bem$10("item", { loading, disabled }), className),
+      className: clsx(bem$10("item", { loading, disabled }), className),
       onClick
     }, Content);
   };
   const renderDescription = () => {
     if (props.description) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$10("description"))
+        className: clsx(bem$10("description"))
       }, props.description);
     }
     return null;
@@ -5890,16 +5953,16 @@ const ActionSheet = (p) => {
   };
   return /* @__PURE__ */ React.createElement(Popup, {
     visible: props.visible,
-    className: cls(bem$10("wrapper")),
+    className: clsx(bem$10("wrapper")),
     position: "bottom",
     ...pick(props, sharedPopupProps),
     onClose: onCancel,
     closeable: false
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$10(), props.className),
+    className: clsx(bem$10(), props.className),
     style: props.style
   }, renderHeader(), renderDescription(), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$10("content"))
+    className: clsx(bem$10("content"))
   }, renderOptions(), props.children), renderCancel()));
 };
 var index$C = "";
@@ -6040,14 +6103,14 @@ const DropdownMenu$1 = forwardRef(
         key: index2,
         role: "button",
         tabIndex: disabled ? -1 : 0,
-        className: cls(bem$$("item", { disabled })),
+        className: clsx(bem$$("item", { disabled })),
         onClick: () => {
           if (!disabled) {
             toggleItem(index2);
           }
         }
       }, /* @__PURE__ */ React.createElement("span", {
-        className: cls(
+        className: clsx(
           bem$$("title", {
             down: showPopup === (props.direction === "down"),
             active: showPopup
@@ -6094,12 +6157,12 @@ const DropdownMenu$1 = forwardRef(
       value: { props, value: innerValue, onChange: onInnerChange, close }
     }, /* @__PURE__ */ React.createElement("div", {
       ref: root2,
-      className: cls(bem$$(), props.className),
+      className: clsx(bem$$(), props.className),
       style: { ...props.style }
     }, /* @__PURE__ */ React.createElement("div", {
       ref: barRef,
       style: barStyle(),
-      className: cls(bem$$("bar", { opened }))
+      className: clsx(bem$$("bar", { opened }))
     }, Children.toArray(props.children).filter(Boolean).map((child, index2) => {
       return renderTitle(child.props, index2);
     })), Children.toArray(props.children).filter(Boolean).map(
@@ -6184,11 +6247,11 @@ const DropdownMenuItem = forwardRef(({ options = [], placeholder = "\u8BF7\u9009
       key: option.value,
       icon: option.icon,
       title: option.text,
-      className: cls(bem$_("option", { active })),
+      className: clsx(bem$_("option", { active })),
       style: { color: active ? activeColor : "" },
       onClick
     }, active && (activeIcon || /* @__PURE__ */ React.createElement(Success, {
-      className: cls(bem$_("icon")),
+      className: clsx(bem$_("icon")),
       color: activeColor
     })));
   };
@@ -6204,12 +6267,12 @@ const DropdownMenuItem = forwardRef(({ options = [], placeholder = "\u8BF7\u9009
     const attrs = pick(inheritProps(parent.props, props), inheritPropsKey);
     return /* @__PURE__ */ React.createElement("div", {
       style: { ...style, display: state.showWrapper ? "block" : "none" },
-      className: cls(bem$_([direction])),
+      className: clsx(bem$_([direction])),
       onClick: onClickWrapper
     }, /* @__PURE__ */ React.createElement(Popup, {
       ...attrs,
       visible: props.showPopup,
-      className: cls(bem$_("content")),
+      className: clsx(bem$_("content")),
       position: direction === "down" ? "top" : "bottom",
       duration: state.transition ? +duration : 0,
       overlayStyle: { position: "absolute", ...overlayStyle },
@@ -6281,7 +6344,7 @@ const Search = forwardRef((p, ref) => {
   const renderLabel = () => {
     if (props.label) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$Z("label"))
+        className: clsx(bem$Z("label"))
       }, props.label);
     }
     return null;
@@ -6291,7 +6354,7 @@ const Search = forwardRef((p, ref) => {
       return props.action;
     if (props.showAction) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$Z("action")),
+        className: clsx(bem$Z("action")),
         role: "button",
         tabIndex: 0,
         onClick: onCancel
@@ -6336,7 +6399,7 @@ const Search = forwardRef((p, ref) => {
   const renderField = () => {
     return /* @__PURE__ */ React.createElement(FieldNamespace, {
       ref: filedRef,
-      className: cls(bem$Z("field")),
+      className: clsx(bem$Z("field")),
       type: "search",
       rows: 1,
       value: value || "",
@@ -6362,13 +6425,13 @@ const Search = forwardRef((p, ref) => {
     blur
   }));
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(
+    className: clsx(
       props.className,
       bem$Z({ "show-action": props.showAction })
     ),
     style: { ...props.style, background: props.background }
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$Z("content", props.shape))
+    className: clsx(bem$Z("content", props.shape))
   }, renderLabel(), renderField()), renderAction());
 });
 var index$A = "";
@@ -6386,12 +6449,12 @@ const SidebarItem = (props) => {
   const { dot, badge, title, disabled } = props;
   const selected = index2 === parent.getActive();
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("a", {
-    className: cls(bem$Y({ select: selected, disabled })),
+    className: clsx(bem$Y({ select: selected, disabled })),
     onClick
   }, /* @__PURE__ */ React.createElement(Badge, {
     dot,
     content: badge,
-    className: cls(bem$Y("text"))
+    className: clsx(bem$Y("text"))
   }, title)));
 };
 const [bem$X] = createNamespace("sidebar");
@@ -6425,10 +6488,10 @@ const Sidebar$1 = ({
     [children]
   );
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(className, bem$X("wrapper")),
+    className: clsx(className, bem$X("wrapper")),
     style
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.sideClassName, bem$X()),
+    className: clsx(props.sideClassName, bem$X()),
     style: props.sideStyle
   }, validChildren.map(
     (child, index2) => React.cloneElement(child, {
@@ -6441,7 +6504,7 @@ const Sidebar$1 = ({
   )), validChildren.map(
     (child, index2) => {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(child.props.contentClassName, bem$X("content")),
+        className: clsx(child.props.contentClassName, bem$X("content")),
         key: child.key,
         style: {
           ...child.props.contentStyle,
@@ -6558,7 +6621,7 @@ const Sticky = (p) => {
     ref: root2,
     style: rootStyle
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$W({ fixed: state.fixed })),
+    className: clsx(bem$W({ fixed: state.fixed })),
     style: stickyStyle
   }, props.children));
 };
@@ -6601,7 +6664,7 @@ const TabsTitle = forwardRef((props, ref) => {
   }, [type, color, disabled, isActive, activeColor, inactiveColor]);
   const renderText = () => {
     const Title2 = /* @__PURE__ */ React.createElement("span", {
-      className: cls(
+      className: clsx(
         bem$V("text", { ellipsis: !props.scrollable && props.type !== "jumbo" })
       ),
       style: {
@@ -6614,7 +6677,7 @@ const TabsTitle = forwardRef((props, ref) => {
       return props.title;
     })());
     const Description2 = props.type === "jumbo" && !!props.description ? /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$V("description")),
+      className: clsx(bem$V("description")),
       style: { backgroundColor: isActive && color }
     }, (() => {
       if (typeof props.description === "function") {
@@ -6633,7 +6696,7 @@ const TabsTitle = forwardRef((props, ref) => {
   };
   return /* @__PURE__ */ React.createElement("div", {
     ref,
-    className: cls([
+    className: clsx([
       bem$V({
         active: props.isActive,
         disabled: props.disabled
@@ -6663,7 +6726,7 @@ const SwiperItem = React.forwardRef(
     });
     return /* @__PURE__ */ React.createElement("div", {
       ref: wrapperRef,
-      className: cls(
+      className: clsx(
         props.className,
         bem$U({
           hidden: props.autoHeight && show2 === false
@@ -6831,7 +6894,7 @@ const Swiper$1 = forwardRef((p, ref) => {
   const renderIndicator = () => {
     if (props.indicator === void 0 || props.indicator === true) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$T("indicator", { vertical }))
+        className: clsx(bem$T("indicator", { vertical }))
       }, /* @__PURE__ */ React.createElement(SwiperPagIndicator, {
         ...props.indicatorProps,
         vertical,
@@ -6895,14 +6958,14 @@ const Swiper$1 = forwardRef((p, ref) => {
   const renderTrackInner = () => {
     if (loop) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(
+        className: clsx(
           bem$T("track-inner", {
             vertical
           })
         )
       }, React.Children.map(validChildren, (child, index2) => {
         return /* @__PURE__ */ React.createElement(animated.div, {
-          className: cls(bem$T("slide")),
+          className: clsx(bem$T("slide")),
           style: {
             [axis]: position.to((pos) => {
               let finalPosition = -pos + index2 * 100;
@@ -6921,13 +6984,13 @@ const Swiper$1 = forwardRef((p, ref) => {
       }));
     }
     return /* @__PURE__ */ React.createElement(animated.div, {
-      className: cls(bem$T("track-inner")),
+      className: clsx(bem$T("track-inner")),
       style: {
         [axis]: position.to((position2) => `${-position2}%`)
       }
     }, React.Children.map(validChildren, (child, index2) => {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$T("slide"))
+        className: clsx(bem$T("slide"))
       }, React.cloneElement(child, {
         ref: setChildrenRefs(index2),
         autoHeight
@@ -6935,11 +6998,11 @@ const Swiper$1 = forwardRef((p, ref) => {
     }));
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$T({ vertical })),
+    className: clsx(props.className, bem$T({ vertical })),
     style: computedStyle
   }, /* @__PURE__ */ React.createElement("div", {
     ref: trackRef,
-    className: cls(
+    className: clsx(
       bem$T("track", {
         "allow-touch-move": props.touchable
       })
@@ -6983,7 +7046,7 @@ const TabsContent = (props) => {
         loop: false,
         autoplay: false,
         touchable: !!swipeable,
-        className: cls(bem$S("track")),
+        className: clsx(bem$S("track")),
         duration: +duration,
         indicator: false,
         onChange: (idx) => {
@@ -6996,7 +7059,7 @@ const TabsContent = (props) => {
         }
       }, React.Children.map(props.children, (child) => /* @__PURE__ */ React.createElement(Swiper.Item, {
         style: { cursor: !swipeable ? "auto" : void 0 },
-        className: cls(bem$S("pane-wrapper"))
+        className: clsx(bem$S("pane-wrapper"))
       }, child)));
     }
     return props.children;
@@ -7014,7 +7077,7 @@ const TabsContent = (props) => {
     swipeToCurrentTab(props.currentIndex);
   }, [props.currentIndex]);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(
+    className: clsx(
       bem$S("content", {
         animated: animated2 || swipeable
       })
@@ -7289,14 +7352,14 @@ const Tabs$1 = forwardRef((p, ref) => {
     const { type, border } = props;
     return /* @__PURE__ */ React.createElement("div", {
       ref: wrapRef,
-      className: cls([
+      className: clsx([
         bem$R("wrap", { scrollable }),
         { [BORDER_TOP_BOTTOM]: type !== "card" && border }
       ])
     }, /* @__PURE__ */ React.createElement("div", {
       ref: navRef,
       role: "tablist",
-      className: cls(
+      className: clsx(
         bem$R("nav", [
           type,
           { complete: scrollable, start: align === "start" }
@@ -7304,7 +7367,7 @@ const Tabs$1 = forwardRef((p, ref) => {
       ),
       style: navStyle
     }, props.navLeft, renderNav(), type === "line" && !immediateRef.current && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$R("line")),
+      className: clsx(bem$R("line")),
       style: lineStyle
     }), props.navRight));
   };
@@ -7357,7 +7420,7 @@ const Tabs$1 = forwardRef((p, ref) => {
     value: { props, currentName, scrollIntoView }
   }, /* @__PURE__ */ React.createElement("div", {
     ref: root2,
-    className: cls(props.className, bem$R([props.type])),
+    className: clsx(props.className, bem$R([props.type])),
     style: props.style
   }, props.sticky ? /* @__PURE__ */ React.createElement(Sticky, {
     container: root2,
@@ -7409,14 +7472,14 @@ const TabPane = forwardRef((props, ref) => {
     return /* @__PURE__ */ React.createElement("div", {
       ref,
       role: "tabpanel",
-      className: cls(bem$Q("pane"))
+      className: clsx(bem$Q("pane"))
     }, Content);
   }
   return /* @__PURE__ */ React.createElement("div", {
     ref,
     style: { display: show2 ? "block" : "none" },
     role: "tabpanel",
-    className: cls(bem$Q("pane"))
+    className: clsx(bem$Q("pane"))
   }, Content);
 });
 const Tabs = Object.assign(Tabs$1, { TabPane });
@@ -7453,11 +7516,11 @@ const NavBar = (p) => {
     return [
       props.leftArrow && React.cloneElement(props.leftArrow, {
         key: "arroe",
-        className: cls(bem$P("arrow"))
+        className: clsx(bem$P("arrow"))
       }),
       props.leftText && /* @__PURE__ */ React.createElement("span", {
         key: "text",
-        className: cls(bem$P("text"))
+        className: clsx(bem$P("text"))
       }, props.leftText)
     ];
   };
@@ -7466,7 +7529,7 @@ const NavBar = (p) => {
       return props.rightText;
     }
     return /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem$P("text"))
+      className: clsx(bem$P("text"))
     }, props.rightText);
   };
   const renderNavBar = () => {
@@ -7480,7 +7543,7 @@ const NavBar = (p) => {
     return /* @__PURE__ */ React.createElement("div", {
       ref: navBarRef,
       style,
-      className: cls(
+      className: clsx(
         bem$P({ fixed, "safe-area-inset-top": props.safeAreaInsetTop }),
         {
           [BORDER_BOTTOM]: border
@@ -7488,21 +7551,21 @@ const NavBar = (p) => {
         props.className
       )
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$P("content"))
+      className: clsx(bem$P("content"))
     }, hasLeft && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$P("left")),
+      className: clsx(bem$P("left")),
       onClick: onClickLeft
     }, renderLeft()), /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$P("title"), "rv-ellipsis")
+      className: clsx(bem$P("title"), "rv-ellipsis")
     }, title), hasRight && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$P("right")),
+      className: clsx(bem$P("right")),
       onClick: onClickRight
     }, renderRight())));
   };
   const renderPlaceholder = () => {
     if (props.fixed && props.placeholder) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$P("placeholder")),
+        className: clsx(bem$P("placeholder")),
         style: { height: navBarHeight ? `${navBarHeight}px` : void 0 }
       });
     }
@@ -7547,13 +7610,13 @@ const Tag = (p) => {
       classes[size] = size;
     }
     const CloseIcon = closeable && /* @__PURE__ */ React.createElement(Cross, {
-      className: cls(bem$O("close")),
+      className: clsx(bem$O("close")),
       onClick: onClose
     });
     return /* @__PURE__ */ React.createElement("span", {
       ref: nodeRef,
       style: { ...getStyle, ...props.style },
-      className: cls(props.className, bem$O([classes, type])),
+      className: clsx(props.className, bem$O([classes, type])),
       onClick: props.onClick
     }, props.children, CloseIcon);
   };
@@ -7575,7 +7638,7 @@ const Grid = ({ children, className, style, ...p }) => {
   });
   return /* @__PURE__ */ React.createElement("div", {
     style: { paddingLeft: addUnit(props.gutter), ...style },
-    className: cls(className, bem$N(), {
+    className: clsx(className, bem$N(), {
       [BORDER_TOP]: props.border && !props.gutter
     })
   }, React.Children.toArray(children).filter(Boolean).map(
@@ -7629,7 +7692,7 @@ const GridItem = ({
       return /* @__PURE__ */ React.createElement(Badge, {
         ...props.badge
       }, React.cloneElement(props.icon, {
-        className: cls(bem$M("icon")),
+        className: clsx(bem$M("icon")),
         color: props.iconColor,
         fontSize: parent.iconSize
       }));
@@ -7642,7 +7705,7 @@ const GridItem = ({
     }
     if (props.text) {
       return /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$M("text"))
+        className: clsx(bem$M("text"))
       }, props.text);
     }
     return null;
@@ -7654,7 +7717,7 @@ const GridItem = ({
     return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderText());
   };
   const { center, border, square, gutter, reverse, direction } = parent;
-  const classes = cls(
+  const classes = clsx(
     props.contentClassName,
     bem$M("content", [
       direction,
@@ -7669,7 +7732,7 @@ const GridItem = ({
     { [BORDER]: border }
   );
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(className, bem$M({ square })),
+    className: clsx(className, bem$M({ square })),
     style: rootStyle
   }, /* @__PURE__ */ React.createElement("div", {
     role: props.onClick ? "button" : void 0,
@@ -7743,7 +7806,7 @@ const IndexAnchor = forwardRef((props, ref) => {
     }
   }, /* @__PURE__ */ React.createElement("div", {
     style: anchorStyle,
-    className: cls(bem$L({ sticky }), { [BORDER_BOTTOM]: sticky })
+    className: clsx(bem$L({ sticky }), { [BORDER_BOTTOM]: sticky })
   }, props.children || props.index));
 });
 IndexAnchor[COMPONENT_TYPE_KEY] = INDEX_ANCHORE_KEY;
@@ -7841,7 +7904,7 @@ const IndexBar$1 = forwardRef((p, ref) => {
     const active = index2 === activeAnchor;
     return /* @__PURE__ */ React.createElement("span", {
       key: index2,
-      className: cls(bem$K("index", { active })),
+      className: clsx(bem$K("index", { active })),
       style: active ? highlightStyle : null,
       "data-index": index2
     }, props.itemRender ? props.itemRender(index2, active) : index2);
@@ -7929,13 +7992,13 @@ const IndexBar$1 = forwardRef((p, ref) => {
     value: { zIndex, highlightColor, sticky }
   }, /* @__PURE__ */ React.createElement("div", {
     ref: root2,
-    className: cls(bem$K(), props.className),
+    className: clsx(bem$K(), props.className),
     style: props.style
   }, renderToContainer(
     props.teleport,
     /* @__PURE__ */ React.createElement("div", {
       ref: sidebar,
-      className: cls(bem$K("sidebar")),
+      className: clsx(bem$K("sidebar")),
       style: sidebarStyle,
       onClick: onClickSidebar,
       onTouchStart
@@ -8000,7 +8063,7 @@ const Collapse$1 = (p) => {
   }, /* @__PURE__ */ React.createElement("div", {
     style: props.style,
     ref: props.nativeRef,
-    className: cls(bem$J(), props.className, {
+    className: clsx(bem$J(), props.className, {
       [BORDER_TOP_BOTTOM]: props.border
     })
   }, React.Children.toArray(props.children).filter(Boolean).map(
@@ -8079,7 +8142,7 @@ const CollapseItem = forwardRef(
     const renderTitle = () => {
       const { border, disabled, children, readOnly, ...others } = props;
       return /* @__PURE__ */ React.createElement(Cell, {
-        className: cls(
+        className: clsx(
           bem$I("title", {
             disabled,
             expanded,
@@ -8095,18 +8158,18 @@ const CollapseItem = forwardRef(
     };
     const renderContent = lazyRender(() => /* @__PURE__ */ React.createElement("div", {
       ref: wrapperRef,
-      className: cls(bem$I("wrapper")),
+      className: clsx(bem$I("wrapper")),
       onTransitionEnd
     }, /* @__PURE__ */ React.createElement("div", {
       ref: contentRef,
-      className: cls(bem$I("content"))
+      className: clsx(bem$I("content"))
     }, props.children)));
     useImperativeHandle(ref, () => ({
       toggle
     }));
     return /* @__PURE__ */ React.createElement("div", {
       style,
-      className: cls(className, bem$I({ border: index2 && props.border }))
+      className: clsx(className, bem$I({ border: index2 && props.border }))
     }, renderTitle(), renderContent());
   }
 );
@@ -8127,7 +8190,7 @@ function RadioGroup(props) {
   return /* @__PURE__ */ React.createElement(RadioContext.Provider, {
     value: { parent: { props }, toggle, checked }
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$H([props.direction])),
+    className: clsx(props.className, bem$H([props.direction])),
     style: props.style,
     role: "radiogroup"
   }, props.children));
@@ -8180,7 +8243,7 @@ const Checker = (p) => {
     const iconSize = props.iconSize || getParentProp("iconSize");
     return /* @__PURE__ */ React.createElement("div", {
       ref: iconRef,
-      className: cls(bem2("icon", [shape, { disabled, checked }])),
+      className: clsx(bem2("icon", [shape, { disabled, checked }])),
       style: { fontSize: addUnit(iconSize) }
     }, props.iconRender ? props.iconRender({ checked, disabled }) : /* @__PURE__ */ React.createElement(Success, {
       style: iconStyle
@@ -8196,7 +8259,7 @@ const Checker = (p) => {
   };
   return /* @__PURE__ */ React.createElement("div", {
     role: props.role,
-    className: cls(
+    className: clsx(
       props.bem([
         {
           disabled,
@@ -8355,25 +8418,25 @@ const Rate = ({
       ref: setItemRefs(index2),
       role: "radio",
       style,
-      className: cls(bem$F("item")),
+      className: clsx(bem$F("item")),
       tabIndex: 0,
       "aria-setsize": parseInt(count == null ? void 0 : count.toString(), 10),
       "aria-posinset": score,
       "aria-checked": !isVoid,
       onClick: onClickItem
     }, React.cloneElement(isFull ? icon : voidIcon, {
-      className: cls(bem$F("icon", { disabled, full: isFull })),
+      className: clsx(bem$F("icon", { disabled, full: isFull })),
       style: {
         color: disabled ? disabledColor : isFull ? color : voidColor,
         fontSize: size
       }
     }), renderHalf && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$F("icon", ["half"])),
+      className: clsx(bem$F("icon", ["half"])),
       style: { width: `${item.value * 100}%` }
     }, React.cloneElement(
       isVoid ? voidIcon : icon,
       {
-        className: cls(bem$F("icon", [{ disabled, full: !isVoid }])),
+        className: clsx(bem$F("icon", [{ disabled, full: !isVoid }])),
         style: {
           color: disabled ? disabledColor : isVoid ? voidColor : color,
           fontSize: size
@@ -8388,7 +8451,7 @@ const Rate = ({
   return /* @__PURE__ */ React.createElement("div", {
     ref: root2,
     role: "radiogroup",
-    className: cls(
+    className: clsx(
       bem$F({
         readOnly: props.readOnly,
         disabled: props.disabled
@@ -8507,7 +8570,7 @@ const CalenderDay = (p) => {
     const { topInfo } = props.item;
     if (topInfo || props.topInfoRender) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$E("top-info"))
+        className: clsx(bem$E("top-info"))
       }, props.topInfoRender ? props.topInfoRender(props.item) : topInfo);
     }
     return null;
@@ -8516,7 +8579,7 @@ const CalenderDay = (p) => {
     const { bottomInfo } = props.item;
     if (bottomInfo || props.bottomInfoRender) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$E("bottom-info"))
+        className: clsx(bem$E("bottom-info"))
       }, props.bottomInfoRender ? props.bottomInfoRender(props.item) : bottomInfo);
     }
     return null;
@@ -8527,7 +8590,7 @@ const CalenderDay = (p) => {
     const Nodes = /* @__PURE__ */ React.createElement(React.Fragment, null, renderTopInfo(), text, renderBottomInfo());
     if (type2 === "selected") {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$E("selected-day")),
+        className: clsx(bem$E("selected-day")),
         style: {
           width: rowHeight,
           height: rowHeight,
@@ -8540,14 +8603,14 @@ const CalenderDay = (p) => {
   const { type, className } = props.item;
   if (type === "placeholder") {
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$E("day")),
+      className: clsx(bem$E("day")),
       style
     });
   }
   return /* @__PURE__ */ React.createElement("div", {
     role: "gridcell",
     style,
-    className: cls(bem$E("day", type), className),
+    className: clsx(bem$E("day", type), className),
     tabIndex: type === "disabled" ? void 0 : -1,
     onClick
   }, renderContent());
@@ -8667,7 +8730,7 @@ const CalenderMonth = forwardRef((props, ref) => {
   const renderTitle = () => {
     if (props.showMonthTitle) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$D("month-title"))
+        className: clsx(bem$D("month-title"))
       }, title);
     }
     return null;
@@ -8675,7 +8738,7 @@ const CalenderMonth = forwardRef((props, ref) => {
   const renderMark = () => {
     if (props.showMark && shouldRender) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$D("month-mark"))
+        className: clsx(bem$D("month-mark"))
       }, props.date.getMonth() + 1);
     }
     return null;
@@ -8718,7 +8781,7 @@ const CalenderMonth = forwardRef((props, ref) => {
   const renderDays = () => /* @__PURE__ */ React.createElement("div", {
     ref: daysRef,
     role: "grid",
-    className: cls(bem$D("days"))
+    className: clsx(bem$D("days"))
   }, renderMark(), (shouldRender ? days : placeholders).map(renderDay));
   useImperativeHandle(ref, () => ({
     getTitle,
@@ -8727,7 +8790,7 @@ const CalenderMonth = forwardRef((props, ref) => {
     scrollIntoView
   }));
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$D("month")),
+    className: clsx(bem$D("month")),
     ref: setMonthRef
   }, renderTitle(), renderDays());
 });
@@ -8738,7 +8801,7 @@ const CalenderHeader = (props) => {
     if (props.showTitle) {
       const text = props.title || locale.vanCalendar.title;
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$C("header-title"))
+        className: clsx(bem$C("header-title"))
       }, text);
     }
     return null;
@@ -8750,7 +8813,7 @@ const CalenderHeader = (props) => {
   const renderSubtitle = () => {
     if (props.showSubtitle) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$C("header-subtitle")),
+        className: clsx(bem$C("header-subtitle")),
         onClick: onClickSubtitle
       }, props.subtitle);
     }
@@ -8765,14 +8828,14 @@ const CalenderHeader = (props) => {
       ...weekdays.slice(0, firstDayOfWeek)
     ];
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$C("weekdays"))
+      className: clsx(bem$C("weekdays"))
     }, renderWeekDaysContent.map((text, i) => /* @__PURE__ */ React.createElement("span", {
       key: i,
-      className: cls(bem$C("weekday"))
+      className: clsx(bem$C("weekday"))
     }, text)));
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$C("header"))
+    className: clsx(bem$C("header"))
   }, renderTitle(), renderSubtitle(), renderWeekDays());
 };
 const [bem$B] = createNamespace("calendar");
@@ -9116,7 +9179,7 @@ const Calendar = forwardRef(
           block: true,
           type: "danger",
           color: props.color,
-          className: cls(bem$B("confirm")),
+          className: clsx(bem$B("confirm")),
           disabled: buttonDisabled,
           nativeType: "button",
           onClick: onConfirm
@@ -9125,12 +9188,12 @@ const Calendar = forwardRef(
       return null;
     };
     const renderFooter = () => /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$B("footer"), {
+      className: clsx(bem$B("footer"), {
         "rv-safe-area-bottom": props.safeAreaInsetBottom
       })
     }, renderFooterButton());
     const renderCalendar = () => /* @__PURE__ */ React.createElement("div", {
-      className: cls(className, bem$B()),
+      className: clsx(className, bem$B()),
       style
     }, /* @__PURE__ */ React.createElement(CalenderHeader, {
       weekdays: props.weekdays,
@@ -9145,7 +9208,7 @@ const Calendar = forwardRef(
       }
     }), props.horizontal ? /* @__PURE__ */ React.createElement("div", {
       ref: bodyRef,
-      className: cls(bem$B("horizontal-body"))
+      className: clsx(bem$B("horizontal-body"))
     }, /* @__PURE__ */ React.createElement(Swiper, {
       indicator: () => null,
       onChange: (index2) => {
@@ -9155,7 +9218,7 @@ const Calendar = forwardRef(
       key: month
     }, renderMonth(month, index2))))) : /* @__PURE__ */ React.createElement("div", {
       ref: bodyRef,
-      className: cls(bem$B("body")),
+      className: clsx(bem$B("body")),
       onScroll
     }, months.map(renderMonth)), renderFooter());
     const actions = {
@@ -9195,7 +9258,7 @@ const Calendar = forwardRef(
     if (props.poppable) {
       return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popup, {
         visible,
-        className: cls(bem$B("popup")),
+        className: clsx(bem$B("popup")),
         round: props.round,
         position: props.position,
         closeable: props.showTitle || props.showSubtitle,
@@ -9368,26 +9431,26 @@ const Cascader = (props) => {
       return null;
     if (props.closeIcon) {
       return React.cloneElement(props.closeIcon, {
-        className: cls(bem$A("close-icon")),
+        className: clsx(bem$A("close-icon")),
         onClick: props.onClose
       });
     }
     return /* @__PURE__ */ React.createElement(Cross, {
-      className: cls(bem$A("close-icon")),
+      className: clsx(bem$A("close-icon")),
       onClick: props.onClose
     });
   };
   const renderHeader = () => /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$A("header"))
+    className: clsx(bem$A("header"))
   }, /* @__PURE__ */ React.createElement("h2", {
-    className: cls(bem$A("title"))
+    className: clsx(bem$A("title"))
   }, props.title), renderCloseIcon());
   const renderOption = (option, selected, tabIndex) => {
     const color = option.color || (selected ? props.activeColor : void 0);
     const Text2 = props.optionRender ? props.optionRender({ option, selected }) : /* @__PURE__ */ React.createElement("span", null, option[textKey]);
     return /* @__PURE__ */ React.createElement("li", {
       key: option[valueKey],
-      className: cls(
+      className: clsx(
         bem$A("option", {
           selected,
           disabled: option.disabled
@@ -9397,12 +9460,12 @@ const Cascader = (props) => {
       style: { color },
       onClick: () => onSelect(option, tabIndex)
     }, Text2, selected ? /* @__PURE__ */ React.createElement(Success, {
-      className: cls(bem$A("selected-icon"))
+      className: clsx(bem$A("selected-icon"))
     }) : null);
   };
   const renderOptions = (options, selectedOption, tabIndex) => /* @__PURE__ */ React.createElement("ul", {
     key: tabIndex,
-    className: cls(bem$A("options"))
+    className: clsx(bem$A("options"))
   }, options.map(
     (option) => renderOption(
       option,
@@ -9416,7 +9479,7 @@ const Cascader = (props) => {
     return /* @__PURE__ */ React.createElement(Tabs.TabPane, {
       key: tabIndex,
       title,
-      titleClass: cls(
+      titleClass: clsx(
         bem$A("tab", {
           unselected: !selectedOption
         })
@@ -9426,7 +9489,7 @@ const Cascader = (props) => {
   const renderTabs = () => /* @__PURE__ */ React.createElement(Tabs, {
     animated: true,
     active: activeTab,
-    className: cls(bem$A("tabs")),
+    className: clsx(bem$A("tabs")),
     color: props.activeColor,
     swipeThreshold: 0,
     swipeable: props.swipeable,
@@ -9434,7 +9497,7 @@ const Cascader = (props) => {
     onClickTab
   }, tabs.map(renderTab));
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$A())
+    className: clsx(bem$A())
   }, renderHeader(), tabs.length ? renderTabs() : null);
 };
 const CascaderPopup = React.forwardRef(
@@ -9589,7 +9652,7 @@ const CheckBoxGroup = forwardRef(
     return /* @__PURE__ */ React.createElement(CheckboxContext.Provider, {
       value: { parent: { props }, toggle, checked: checked || [] }
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(props.className, bem$z([props.direction]))
+      className: clsx(props.className, bem$z([props.direction]))
     }, React.Children.toArray(props.children).filter(Boolean).map((child, index2) => {
       var _a;
       if (((_a = child.type) == null ? void 0 : _a.displayName) !== "Checkbox")
@@ -9855,7 +9918,7 @@ const PickerColumn = memo(
           role: "button",
           style: optionStyle,
           tabIndex: disabled ? -1 : 0,
-          className: cls(
+          className: clsx(
             bem$x("item", {
               disabled,
               selected: option[valueKey] === value
@@ -9881,7 +9944,7 @@ const PickerColumn = memo(
       stopMomentum
     }));
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$x(), props.className),
+      className: clsx(bem$x(), props.className),
       onTouchStart,
       onTouchMove,
       onTouchEnd,
@@ -9893,7 +9956,7 @@ const PickerColumn = memo(
         transitionDuration: `${state.duration}ms`,
         transitionProperty: state.duration ? "all" : "none"
       },
-      className: cls(bem$x("wrapper")),
+      className: clsx(bem$x("wrapper")),
       onTransitionEnd: stopMomentum
     }, renderOptions()));
   }),
@@ -9990,10 +10053,10 @@ function withCache(generate) {
 function generateColumnsExtend(rawColumns, keys, val) {
   const { textKey, valueKey } = keys;
   const columns = withCache(() => {
-    let cls2 = typeof rawColumns === "function" ? rawColumns(val) : rawColumns;
-    if (!Array.isArray(cls2[0]))
-      cls2 = [cls2];
-    return cls2.map(
+    let cls = typeof rawColumns === "function" ? rawColumns(val) : rawColumns;
+    if (!Array.isArray(cls[0]))
+      cls = [cls];
+    return cls.map(
       (column) => column.map((item) => {
         if (typeof item === "string")
           return { [textKey]: item, [valueKey]: item };
@@ -10109,7 +10172,7 @@ function PickerInner(props) {
   const renderTitle = () => {
     if (props.title) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$w("title"), "rv-ellipsis")
+        className: clsx(bem$w("title"), "rv-ellipsis")
       }, props.title);
     }
     return null;
@@ -10118,7 +10181,7 @@ function PickerInner(props) {
     const text = props.cancelButtonText || locale.cancel;
     return /* @__PURE__ */ React.createElement("button", {
       type: "button",
-      className: cls(bem$w("cancel")),
+      className: clsx(bem$w("cancel")),
       onClick: cancel
     }, text);
   };
@@ -10126,14 +10189,14 @@ function PickerInner(props) {
     const text = props.confirmButtonText || locale.confirm;
     return /* @__PURE__ */ React.createElement("button", {
       type: "button",
-      className: cls(bem$w("confirm")),
+      className: clsx(bem$w("confirm")),
       onClick: confirm
     }, text);
   };
   const renderToolbar = () => {
     if (props.showToolbar) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$w("toolbar"))
+        className: clsx(bem$w("toolbar"))
       }, props.toolbar || /* @__PURE__ */ React.createElement(React.Fragment, null, renderCancel(), renderTitle(), renderConfirm()));
     }
     return null;
@@ -10168,13 +10231,13 @@ function PickerInner(props) {
     };
     return /* @__PURE__ */ React.createElement("div", {
       ref: wrapper,
-      className: cls(bem$w("columns")),
+      className: clsx(bem$w("columns")),
       style: columnsStyle
     }, renderColumnItems(), /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$w("mask")),
+      className: clsx(bem$w("mask")),
       style: maskStyle
     }), /* @__PURE__ */ React.createElement("div", {
-      className: cls(BORDER_UNSET_TOP_BOTTOM, bem$w("frame")),
+      className: clsx(BORDER_UNSET_TOP_BOTTOM, bem$w("frame")),
       style: frameStyle
     }));
   };
@@ -10182,9 +10245,9 @@ function PickerInner(props) {
     target: wrapper.current
   });
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$w(), props.className)
+    className: clsx(bem$w(), props.className)
   }, props.toolbarPosition === "top" ? renderToolbar() : null, props.loading ? /* @__PURE__ */ React.createElement(Loading, {
-    className: cls(bem$w("loading"))
+    className: clsx(bem$w("loading"))
   }) : null, props.columnsTop, renderColumns(), props.columnsBottom, props.toolbarPosition === "bottom" ? renderToolbar() : null);
 }
 function PopupPicker(p, ref) {
@@ -10673,12 +10736,12 @@ const DateTimePicker = forwardRef(
     if (isTimePicker)
       return /* @__PURE__ */ React.createElement(TimePicker, {
         ref,
-        className: cls(bem$v()),
+        className: clsx(bem$v()),
         ...props
       });
     return /* @__PURE__ */ React.createElement(DatePicker, {
       ref,
-      className: cls(bem$v()),
+      className: clsx(bem$v()),
       ...props
     });
   }
@@ -10761,7 +10824,7 @@ const PasswordInput = forwardRef(
         Points.push(
           /* @__PURE__ */ React.createElement("li", {
             key: i,
-            className: cls(
+            className: clsx(
               {
                 [BORDER_LEFT]: showBorder,
                 [props.highlightClass]: props.highlightClass && char && !props.mask
@@ -10772,7 +10835,7 @@ const PasswordInput = forwardRef(
           }, mask ? /* @__PURE__ */ React.createElement("i", {
             style: { visibility: char ? "visible" : "hidden" }
           }) : char, showCursor && /* @__PURE__ */ React.createElement("div", {
-            className: cls(bem$u("cursor"))
+            className: clsx(bem$u("cursor"))
           }))
         );
       }
@@ -10807,10 +10870,10 @@ const PasswordInput = forwardRef(
     }));
     const info = props.errorInfo || props.info;
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$u(), props.className),
+      className: clsx(bem$u(), props.className),
       style: props.style
     }, /* @__PURE__ */ React.createElement("ul", {
-      className: cls(bem$u("security"), {
+      className: clsx(bem$u("security"), {
         [BORDER_SURROUND]: !props.gutter
       })
     }, renderPoints(), /* @__PURE__ */ React.createElement("input", {
@@ -10837,20 +10900,20 @@ const PasswordInput = forwardRef(
         (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
       }
     })), info ? /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$u(props.errorInfo ? "error-info" : "info"))
+      className: clsx(bem$u(props.errorInfo ? "error-info" : "info"))
     }, info) : null);
   }
 );
 var index$k = "";
 const CollapseIcon = ({ bem: bem2 }) => /* @__PURE__ */ React.createElement("svg", {
-  className: cls(bem2("collapse-icon")),
+  className: clsx(bem2("collapse-icon")),
   viewBox: "0 0 30 24"
 }, /* @__PURE__ */ React.createElement("path", {
   d: "M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z",
   fill: "currentColor"
 }));
 const DeleteIcon = ({ bem: bem2 }) => /* @__PURE__ */ React.createElement("svg", {
-  className: cls(bem2("delete-icon")),
+  className: clsx(bem2("delete-icon")),
   viewBox: "0 0 32 22"
 }, /* @__PURE__ */ React.createElement("path", {
   d: "M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z",
@@ -10888,7 +10951,7 @@ const NumberKeyboardKey = ({
   const renderContent = () => {
     if (props.loading) {
       return /* @__PURE__ */ React.createElement(Loading, {
-        className: cls(bem$t("loading-icon"))
+        className: clsx(bem$t("loading-icon"))
       });
     }
     const text = children || props.text;
@@ -10907,7 +10970,7 @@ const NumberKeyboardKey = ({
   };
   return /* @__PURE__ */ React.createElement("div", {
     style,
-    className: cls(className, bem$t("wrapper", { wider: props.wider })),
+    className: clsx(className, bem$t("wrapper", { wider: props.wider })),
     onTouchStart,
     onTouchMove,
     onTouchEnd,
@@ -10915,7 +10978,7 @@ const NumberKeyboardKey = ({
   }, /* @__PURE__ */ React.createElement("div", {
     role: "button",
     tabIndex: 0,
-    className: cls(
+    className: clsx(
       bem$t([
         props.color,
         {
@@ -11024,12 +11087,12 @@ const NumberKeyboard = ({
       return null;
     }
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$s("header"))
+      className: clsx(bem$s("header"))
     }, title && /* @__PURE__ */ React.createElement("h2", {
-      className: cls(bem$s("title"))
+      className: clsx(bem$s("title"))
     }, title), showClose && /* @__PURE__ */ React.createElement("button", {
       type: "button",
-      className: cls(bem$s("close")),
+      className: clsx(bem$s("close")),
       onClick: onClose
     }, closeButtonText));
   };
@@ -11058,7 +11121,7 @@ const NumberKeyboard = ({
   const renderSidebar = () => {
     if (props.theme === "custom") {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$s("sidebar"))
+        className: clsx(bem$s("sidebar"))
       }, props.showDeleteKey && /* @__PURE__ */ React.createElement(NumberKeyboardKey, {
         large: true,
         text: props.deleteButtonText,
@@ -11094,7 +11157,7 @@ const NumberKeyboard = ({
   }, /* @__PURE__ */ React.createElement("div", {
     ref: root2,
     style: { ...style, ...getZIndexStyle(props.zIndex) },
-    className: cls(
+    className: clsx(
       className,
       bem$s({
         unfit: !props.safeAreaInsetBottom,
@@ -11103,9 +11166,9 @@ const NumberKeyboard = ({
     ),
     onTouchStart: stopPropagation
   }, Title2, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$s("body"))
+    className: clsx(bem$s("body"))
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$s("keys"))
+    className: clsx(bem$s("keys"))
   }, renderKeys()), renderSidebar())));
   return Content;
 };
@@ -11308,7 +11371,7 @@ const Slider = (p) => {
       return props.button;
     }
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$r("button")),
+      className: clsx(bem$r("button")),
       style: getSizeStyle(props.buttonSize)
     });
   };
@@ -11318,7 +11381,7 @@ const Slider = (p) => {
       ref: buttounRef,
       key: index2,
       role: "slider",
-      className: cls(getButtonClassName(index2)),
+      className: clsx(getButtonClassName(index2)),
       tabIndex: props.disabled || props.readOnly ? -1 : 0,
       "aria-valuemin": props.min,
       "aria-valuenow": value,
@@ -11356,7 +11419,7 @@ const Slider = (p) => {
   return /* @__PURE__ */ React.createElement("div", {
     ref: root2,
     style: wrapperStyle,
-    className: cls(
+    className: clsx(
       props.className,
       bem$r({
         vertical: props.vertical,
@@ -11365,7 +11428,7 @@ const Slider = (p) => {
     ),
     onClick
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$r("bar")),
+    className: clsx(bem$r("bar")),
     style: barStyle
   }, props.range ? [renderButton(setButtonRef1, 0), renderButton(setButtonRef2, 1)] : renderButton(setButtonRef1)));
 };
@@ -11545,19 +11608,19 @@ const Stepper = React.forwardRef((p, ref) => {
     blur: () => inputRef.current.blur()
   }));
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$q([props.theme])),
+    className: clsx(props.className, bem$q([props.theme])),
     style: props.style
   }, props.showMinus && /* @__PURE__ */ React.createElement("button", {
     type: "button",
     "aria-label": "minus",
     style: buttonStyle,
-    className: cls(bem$q("minus", { disabled: minusDisabled })),
+    className: clsx(bem$q("minus", { disabled: minusDisabled })),
     ...createListeners("minus")
   }), props.showInput && /* @__PURE__ */ React.createElement("input", {
     ref: inputRef,
     type: props.integer ? "tel" : "text",
     role: "spinbutton",
-    className: cls(bem$q("input")),
+    className: clsx(bem$q("input")),
     value: inputValue,
     style: inputStyle,
     disabled: props.disabled || props.disableInput,
@@ -11576,7 +11639,7 @@ const Stepper = React.forwardRef((p, ref) => {
     type: "button",
     "aria-label": "add",
     style: buttonStyle,
-    className: cls(bem$q("plus", { disabled: plusDisabled })),
+    className: clsx(bem$q("plus", { disabled: plusDisabled })),
     ...createListeners("plus")
   }));
 });
@@ -11629,7 +11692,7 @@ const Swtich = (p) => {
     if (props.loading) {
       const color = isChecked ? props.activeColor : props.inactiveColor;
       return /* @__PURE__ */ React.createElement(Loading, {
-        className: cls(bem$p("loading")),
+        className: clsx(bem$p("loading")),
         color
       });
     }
@@ -11638,7 +11701,7 @@ const Swtich = (p) => {
   return /* @__PURE__ */ React.createElement("div", {
     role: "switch",
     tabIndex: 0,
-    className: cls(
+    className: clsx(
       props.className,
       bem$p({
         on: isChecked,
@@ -11650,7 +11713,7 @@ const Swtich = (p) => {
     "aria-checked": isChecked,
     onClick
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$p("node"))
+    className: clsx(bem$p("node"))
   }, renderLoading()));
 };
 var index$h = "";
@@ -11740,14 +11803,14 @@ const UploaderPreviewItem = (props) => {
   const renderMask = () => {
     if (status === "failed" || status === "pending") {
       const MaskIcon = status === "failed" ? /* @__PURE__ */ React.createElement(Close, {
-        className: cls(bem$o("mask-icon"))
+        className: clsx(bem$o("mask-icon"))
       }) : /* @__PURE__ */ React.createElement(Loading, {
-        className: cls(bem$o("loading"))
+        className: clsx(bem$o("loading"))
       });
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$o("mask"))
+        className: clsx(bem$o("mask"))
       }, MaskIcon, statusTextRender && /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$o("mask-message"))
+        className: clsx(bem$o("mask-message"))
       }, statusTextRender(status)));
     }
     return null;
@@ -11755,10 +11818,10 @@ const UploaderPreviewItem = (props) => {
   const renderDeleteIcon = () => {
     if (props.deletable) {
       return props.deleteRender ? props.deleteRender(props.onDelete) : /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$o("preview-delete")),
+        className: clsx(bem$o("preview-delete")),
         onClick: props.onDelete
       }, /* @__PURE__ */ React.createElement(Cross, {
-        className: cls(bem$o("preview-delete-icon"))
+        className: clsx(bem$o("preview-delete-icon"))
       }));
     }
     return null;
@@ -11772,23 +11835,23 @@ const UploaderPreviewItem = (props) => {
       return /* @__PURE__ */ React.createElement(ImageNamespace, {
         fit: props.imageFit,
         src: imageSrc,
-        className: cls(bem$o("preview-image")),
+        className: clsx(bem$o("preview-image")),
         width: props.previewSize,
         height: props.previewSize,
         onClick: onPreview
       }, renderCover());
     }
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$o("file")),
+      className: clsx(bem$o("file")),
       style: getSizeStyle(props.previewSize)
     }, /* @__PURE__ */ React.createElement(Description, {
-      className: cls(bem$o("file-icon"))
+      className: clsx(bem$o("file-icon"))
     }), /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$o("file-name"), "rv-ellipsis")
+      className: clsx(bem$o("file-name"), "rv-ellipsis")
     }, file ? file.name : url), renderCover());
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$o("preview")),
+    className: clsx(bem$o("preview")),
     onClick: props.onClick
   }, renderPreview(), renderMask(), renderDeleteIcon());
 };
@@ -12001,7 +12064,7 @@ const Uploader = forwardRef((p, ref) => {
   const renderUploadIcon = () => {
     if (props.uploadIcon) {
       return React.cloneElement(props.uploadIcon, {
-        className: cls(bem$n("upload-icon"))
+        className: clsx(bem$n("upload-icon"))
       });
     }
     return null;
@@ -12011,7 +12074,7 @@ const Uploader = forwardRef((p, ref) => {
       const Input2 = props.readOnly ? null : /* @__PURE__ */ React.createElement("input", {
         ref: inputRef,
         type: "file",
-        className: cls(bem$n("input")),
+        className: clsx(bem$n("input")),
         accept: props.accept,
         capture: props.capture,
         multiple: props.multiple,
@@ -12020,16 +12083,16 @@ const Uploader = forwardRef((p, ref) => {
       });
       if (props.children) {
         return /* @__PURE__ */ React.createElement("div", {
-          className: cls(bem$n("input-wrapper")),
+          className: clsx(bem$n("input-wrapper")),
           onClick: props.onClickUpload
         }, props.children, Input2);
       }
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$n("upload", { readOnly: props.readOnly })),
+        className: clsx(bem$n("upload", { readOnly: props.readOnly })),
         style: getSizeStyle(props.previewSize),
         onClick: props.onClickUpload
       }, renderUploadIcon(), props.uploadText && /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$n("upload-text"))
+        className: clsx(bem$n("upload-text"))
       }, props.uploadText), Input2);
     }
     return null;
@@ -12044,9 +12107,9 @@ const Uploader = forwardRef((p, ref) => {
     closeImagePreview
   }));
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$n())
+    className: clsx(bem$n())
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$n("wrapper", { disabled: props.disabled }))
+    className: clsx(bem$n("wrapper", { disabled: props.disabled }))
   }, renderPreviewList(), renderUpload()));
 });
 var index$f = "";
@@ -12072,7 +12135,7 @@ const Progress = (p) => {
       };
       return /* @__PURE__ */ React.createElement("span", {
         style,
-        className: cls(bem$m("pivot"))
+        className: clsx(bem$m("pivot"))
       }, text);
     }
     return null;
@@ -12088,10 +12151,10 @@ const Progress = (p) => {
     transform: `scaleX(${+percentage / 100})`
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$m(), props.className),
+    className: clsx(bem$m(), props.className),
     style: rootStyle
   }, /* @__PURE__ */ React.createElement("span", {
-    className: cls(bem$m("portion")),
+    className: clsx(bem$m("portion")),
     style: portionStyle
   }), renderPivot());
 };
@@ -12184,7 +12247,7 @@ const Circle = (p) => {
     return /* @__PURE__ */ React.createElement("path", {
       d: path,
       style,
-      className: cls(bem$l("hover")),
+      className: clsx(bem$l("hover")),
       stroke: color
     });
   };
@@ -12195,7 +12258,7 @@ const Circle = (p) => {
       strokeWidth: `${props.strokeWidth}px`
     };
     return /* @__PURE__ */ React.createElement("path", {
-      className: cls(bem$l("layer")),
+      className: clsx(bem$l("layer")),
       style,
       d: path
     });
@@ -12221,13 +12284,13 @@ const Circle = (p) => {
   const renderText = () => {
     if (props.text) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$l("text"))
+        className: clsx(bem$l("text"))
       }, props.text);
     }
     return props.children;
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$l(), props.className),
+    className: clsx(bem$l(), props.className),
     style: { ...props.style, ...getSizeStyle(props.size) }
   }, /* @__PURE__ */ React.createElement("svg", {
     viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
@@ -12303,7 +12366,7 @@ const Pagination = (p) => {
   const renderDesc = () => {
     if (props.mode !== "multi") {
       return /* @__PURE__ */ React.createElement("li", {
-        className: cls(bem$k("page-desc"))
+        className: clsx(bem$k("page-desc"))
       }, props.pageDesc ? props.pageDesc : `${props.value}/${count}`);
     }
     return null;
@@ -12312,9 +12375,9 @@ const Pagination = (p) => {
   const onSelect = (value2) => () => select(value2, true);
   const { value } = props;
   return /* @__PURE__ */ React.createElement("ul", {
-    className: cls(bem$k({ simple }))
+    className: clsx(bem$k({ simple }))
   }, /* @__PURE__ */ React.createElement("li", {
-    className: cls(
+    className: clsx(
       bem$k("item", { disabled: value === 1 }),
       bem$k("prev"),
       BORDER
@@ -12322,14 +12385,14 @@ const Pagination = (p) => {
     onClick: onSelect(value - 1)
   }, props.prevText || locale.vanPagination.prev), pages.map((page, index2) => /* @__PURE__ */ React.createElement("li", {
     key: index2,
-    className: cls(
+    className: clsx(
       bem$k("item", { active: page.active }),
       bem$k("page"),
       BORDER
     ),
     onClick: onSelect(page.number)
   }, props.pageRender ? props.pageRender(page) : page.text)), renderDesc(), /* @__PURE__ */ React.createElement("li", {
-    className: cls(
+    className: clsx(
       bem$k("item", { disabled: value === count }),
       bem$k("next"),
       BORDER
@@ -12354,7 +12417,7 @@ const Tabbar$1 = (p) => {
   const height = useHeight(root2);
   const renderPlaceholder = (renderContent) => {
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$j("placeholder")),
+      className: clsx(bem$j("placeholder")),
       style: { height }
     }, renderContent());
   };
@@ -12376,7 +12439,7 @@ const Tabbar$1 = (p) => {
     }, /* @__PURE__ */ React.createElement("div", {
       ref: root2,
       style: { ...props.style, ...getZIndexStyle(zIndex) },
-      className: cls(props.className, bem$j({ fixed }), {
+      className: clsx(props.className, bem$j({ fixed }), {
         [BORDER_TOP_BOTTOM]: border,
         "rv-safe-area-bottom": enableSafeArea()
       })
@@ -12416,14 +12479,14 @@ const TabbarItem = (props) => {
   };
   const color = active ? activeColor : inactiveColor;
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$i({ active })),
+    className: clsx(props.className, bem$i({ active })),
     style: { ...props.style, color },
     onClick
   }, /* @__PURE__ */ React.createElement(Badge, {
     ...props.badge,
-    className: cls(bem$i("icon"))
+    className: clsx(bem$i("icon"))
   }, renderIcon()), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$i("text"))
+    className: clsx(bem$i("text"))
   }, typeof props.children === "function" ? props.children(active) : props.children));
 };
 const Tabbar = Object.assign(Tabbar$1, { Item: TabbarItem });
@@ -12503,7 +12566,7 @@ const Form$1 = forwardRef((props, ref) => {
     ...formProps
   } = props;
   return /* @__PURE__ */ React.createElement(RcForm, {
-    className: cls(bem$h(), className),
+    className: clsx(bem$h(), className),
     style,
     ref,
     ...formProps
@@ -12518,7 +12581,7 @@ const Form$1 = forwardRef((props, ref) => {
       labelAlign
     }
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$h("footer"))
+    className: clsx(bem$h("footer"))
   }, footer));
 });
 function shouldConstruct(Component) {
@@ -12567,7 +12630,7 @@ const FormItemLayout = (props) => {
   const errorMessage = showValidateMessage && error ? meta.errors[0] : null;
   const attrs = {
     ...fieldProps,
-    className: cls(bem$g({ vertical: layout === "vertical" }), props.className),
+    className: clsx(bem$g({ vertical: layout === "vertical" }), props.className),
     colon,
     error: showValidateMessage ? false : error,
     errorMessage,
@@ -12809,7 +12872,7 @@ const Area = forwardRef((p, ref) => {
   return /* @__PURE__ */ React.createElement(Picker, {
     ref,
     style: props.style,
-    className: cls(bem$f(), props.className),
+    className: clsx(bem$f(), props.className),
     columns,
     ...pick(props, INHERIT_PROPS)
   });
@@ -12818,19 +12881,19 @@ var index$a = "";
 const CardHeader = (props) => {
   const [bem2] = createNamespace("card-header");
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem2(), { [BORDER_BOTTOM]: props.border }),
+    className: clsx(props.className, bem2(), { [BORDER_BOTTOM]: props.border }),
     style: props.style,
     onClick: props.onClick
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem2("content"))
+    className: clsx(bem2("content"))
   }, props.children), props.extra && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem2("extra"))
+    className: clsx(bem2("extra"))
   }, props.extra));
 };
 const CardBody = (props) => {
   const [bem2] = createNamespace("card-body");
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem2()),
+    className: clsx(props.className, bem2()),
     style: props.style,
     onClick: props.onClick
   }, props.children);
@@ -12838,7 +12901,7 @@ const CardBody = (props) => {
 const CardFooter = (props) => {
   const [bem2] = createNamespace("card-footer");
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem2({ compact: props.compact }), {
+    className: clsx(props.className, bem2({ compact: props.compact }), {
       [BORDER_TOP]: props.border
     }),
     style: props.style,
@@ -12848,7 +12911,7 @@ const CardFooter = (props) => {
 const CardCover = (props) => {
   const [bem2] = createNamespace("card-cover");
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem2()),
+    className: clsx(props.className, bem2()),
     style: props.style,
     onClick: props.onClick
   }, props.children);
@@ -12857,7 +12920,7 @@ const Card$1 = (props) => {
   const [bem2] = createNamespace("card");
   const { className, style, round, border, children } = props;
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem2({ round, border }), className),
+    className: clsx(bem2({ round, border }), className),
     style,
     onClick: props.onClick
   }, children);
@@ -12881,7 +12944,7 @@ const ProductCard = (p) => {
   const renderTitle = () => {
     if (props.title) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$e("title"), "rv-multi-ellipsis--l2")
+        className: clsx(bem$e("title"), "rv-multi-ellipsis--l2")
       }, props.title);
     }
     return null;
@@ -12889,7 +12952,7 @@ const ProductCard = (p) => {
   const renderThumbTag = () => {
     if (props.tag) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$e("tag"))
+        className: clsx(bem$e("tag"))
       }, isStringOrNumber(props.tag) ? /* @__PURE__ */ React.createElement(Tag, {
         mark: true,
         type: "danger"
@@ -12915,7 +12978,7 @@ const ProductCard = (p) => {
     if (props.thumb) {
       return /* @__PURE__ */ React.createElement("a", {
         href: props.thumbLink,
-        className: cls(bem$e("thumb")),
+        className: clsx(bem$e("thumb")),
         onClick: props.onClickThumb
       }, renderThumbImage(), renderThumbTag());
     }
@@ -12924,7 +12987,7 @@ const ProductCard = (p) => {
   const renderDesc = () => {
     if (props.desc) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$e("desc"), "rv-ellipsis")
+        className: clsx(bem$e("desc"), "rv-ellipsis")
       }, props.desc);
     }
     return null;
@@ -12933,18 +12996,18 @@ const ProductCard = (p) => {
     if (isStringOrNumber(props.price)) {
       const priceArr = props.price.toString().split(".");
       return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$e("price-currency"))
+        className: clsx(bem$e("price-currency"))
       }, props.currency), /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$e("price-integer"))
+        className: clsx(bem$e("price-integer"))
       }, priceArr[0]), props.decimal && /* @__PURE__ */ React.createElement(React.Fragment, null, ".", /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$e("price-decimal"))
+        className: clsx(bem$e("price-decimal"))
       }, priceArr[1] || "00")));
     }
     return props.price;
   };
   const renderOriginalPrice = () => {
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$e("origin-price"))
+      className: clsx(bem$e("origin-price"))
     }, isStringOrNumber(props.originPrice) ? `${props.currency} ${props.originPrice}` : props.originPrice);
   };
   const showNum = isDef(props.num);
@@ -12952,26 +13015,26 @@ const ProductCard = (p) => {
   const showOriginPrice = isDef(props.originPrice);
   const showBottom = showNum || showPrice || showOriginPrice || props.bottom;
   const Price = showPrice && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$e("price"))
+    className: clsx(bem$e("price"))
   }, renderPriceText());
   const OriginPrice = showOriginPrice && renderOriginalPrice();
   const Num = showNum && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$e("num"))
+    className: clsx(bem$e("num"))
   }, isStringOrNumber(props.num) ? `x${props.num}` : props.num);
   const Footer = props.footer && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$e("footer"))
+    className: clsx(bem$e("footer"))
   }, props.footer);
   const Bottom = showBottom && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$e("bottom"))
+    className: clsx(bem$e("bottom"))
   }, props.priceTop, Price, OriginPrice, Num, props.bottom);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$e(), props.className),
+    className: clsx(bem$e(), props.className),
     style: props.style,
     onClick: props.onClick
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$e("header"))
+    className: clsx(bem$e("header"))
   }, renderThumb(), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$e("content", { centered: props.centered }))
+    className: clsx(bem$e("content", { centered: props.centered }))
   }, /* @__PURE__ */ React.createElement("div", null, renderTitle(), renderDesc(), props.tags), Bottom)), Footer);
 };
 var index$8 = "";
@@ -12990,14 +13053,14 @@ const SubmitBar = (p) => {
       const pricePair = (+price / 100).toFixed(+decimalLength).split(".");
       const decimal = decimalLength ? `.${pricePair[1]}` : "";
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$d("text")),
+        className: clsx(bem$d("text")),
         style: { textAlign }
       }, /* @__PURE__ */ React.createElement("span", null, label || locale.vanSubmitBar.label), /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$d("price"))
+        className: clsx(bem$d("price"))
       }, currency, /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$d("price-integer"))
+        className: clsx(bem$d("price-integer"))
       }, pricePair[0]), decimal), suffixLabel && /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$d("suffix-label"))
+        className: clsx(bem$d("suffix-label"))
       }, suffixLabel));
     }
     return null;
@@ -13006,11 +13069,11 @@ const SubmitBar = (p) => {
     const { tip, tipIcon } = props;
     if (tip) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$d("tip"))
+        className: clsx(bem$d("tip"))
       }, tipIcon && React.cloneElement(tipIcon, {
-        className: cls(bem$d("tip-icon"))
+        className: clsx(bem$d("tip-icon"))
       }), tip && /* @__PURE__ */ React.createElement("span", {
-        className: cls(bem$d("tip-text"))
+        className: clsx(bem$d("tip-text"))
       }, tip));
     }
     return null;
@@ -13024,7 +13087,7 @@ const SubmitBar = (p) => {
       round: true,
       type: props.buttonType,
       text: props.buttonText,
-      className: cls(bem$d("button", props.buttonType)),
+      className: clsx(bem$d("button", props.buttonType)),
       color: props.buttonColor,
       loading: props.loading,
       disabled: props.disabled,
@@ -13032,12 +13095,12 @@ const SubmitBar = (p) => {
     });
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$d(), {
+    className: clsx(props.className, bem$d(), {
       "rv-safe-area-bottom": props.safeAreaInsetBottom
     }),
     style: props.style
   }, props.top, renderTip(), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$d("bar"))
+    className: clsx(bem$d("bar"))
   }, props.children, renderText(), renderButton()));
 };
 var index$7 = "";
@@ -13073,12 +13136,12 @@ const CouponCell = (p) => {
   );
   return /* @__PURE__ */ React.createElement(Cell, {
     style: props.style,
-    className: cls(bem$c(), props.className),
+    className: clsx(bem$c(), props.className),
     value,
     title: props.title || locale.vanCouponCell.title,
     border: props.border,
     isLink: props.editable,
-    valueClass: cls(bem$c("value", { selected })),
+    valueClass: clsx(bem$c("value", { selected })),
     onClick: props.onClick
   });
 };
@@ -13128,28 +13191,28 @@ const Coupon = (p) => {
   const { chosen, coupon, disabled } = props;
   const description = disabled && coupon.reason || coupon.description;
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem$b({ disabled })),
+    className: clsx(props.className, bem$b({ disabled })),
     style: props.style,
     onClick: props.onClick
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$b("content"))
+    className: clsx(bem$b("content"))
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$b("head"))
+    className: clsx(bem$b("head"))
   }, /* @__PURE__ */ React.createElement("h2", {
-    className: cls(bem$b("amount"))
+    className: clsx(bem$b("amount"))
   }, faceAmount), /* @__PURE__ */ React.createElement("p", {
-    className: cls(bem$b("condition"))
+    className: clsx(bem$b("condition"))
   }, coupon.condition || conditionMessage)), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$b("body"))
+    className: clsx(bem$b("body"))
   }, /* @__PURE__ */ React.createElement("p", {
-    className: cls(bem$b("name"))
+    className: clsx(bem$b("name"))
   }, coupon.name), /* @__PURE__ */ React.createElement("p", {
-    className: cls(bem$b("valid"))
+    className: clsx(bem$b("valid"))
   }, validPeriod), !disabled && /* @__PURE__ */ React.createElement(Checkbox, {
-    className: cls(bem$b("corner")),
+    className: clsx(bem$b("corner")),
     checked: chosen
   }))), description && /* @__PURE__ */ React.createElement("p", {
-    className: cls(bem$b("description"))
+    className: clsx(bem$b("description"))
   }, description));
 };
 const [bem$a] = createNamespace("coupon-list");
@@ -13195,7 +13258,7 @@ const CouponList = (p) => {
     }
   };
   const renderEmpty = () => /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$a("empty"))
+    className: clsx(bem$a("empty"))
   }, /* @__PURE__ */ React.createElement("img", {
     alt: "empty",
     src: props.emptyImage
@@ -13203,19 +13266,19 @@ const CouponList = (p) => {
   const renderExchangeBar = () => {
     if (props.showExchangeBar) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$a("exchange-bar"))
+        className: clsx(bem$a("exchange-bar"))
       }, /* @__PURE__ */ React.createElement(FieldNamespace, {
         value: state.code,
         onChange: innerChange,
         clearable: true,
         border: false,
-        className: cls(bem$a("field")),
+        className: clsx(bem$a("field")),
         placeholder: props.inputPlaceholder || locale.vanCouponList.placeholder,
         maxLength: 20
       }), /* @__PURE__ */ React.createElement(Button, {
         plain: true,
         type: "primary",
-        className: cls(bem$a("exchange")),
+        className: clsx(bem$a("exchange")),
         text: props.exchangeButtonText || locale.vanCouponList.exchange,
         loading: props.exchangeButtonLoading,
         disabled: buttonDisabled,
@@ -13231,7 +13294,7 @@ const CouponList = (p) => {
     return /* @__PURE__ */ React.createElement(Tabs.TabPane, {
       title
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(
+      className: clsx(
         bem$a("list", {
           "with-bar": props.showExchangeBar,
           "with-bottom": props.showCloseButton
@@ -13252,7 +13315,7 @@ const CouponList = (p) => {
     return /* @__PURE__ */ React.createElement(Tabs.TabPane, {
       title
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(
+      className: clsx(
         bem$a("list", {
           "with-bar": props.showExchangeBar,
           "with-bottom": props.showCloseButton
@@ -13273,21 +13336,21 @@ const CouponList = (p) => {
     updateState({ code: props.code });
   }, [props.code]);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$a(), props.className),
+    className: clsx(bem$a(), props.className),
     style: props.style
   }, renderExchangeBar(), /* @__PURE__ */ React.createElement(Tabs, {
     active: state.tab,
     border: false,
     ...props.tabsProps,
-    className: cls(bem$a("tab"), (_a = props.tabsProps) == null ? void 0 : _a.className)
+    className: clsx(bem$a("tab"), (_a = props.tabsProps) == null ? void 0 : _a.className)
   }, renderCouponTab(), renderDisabledTab()), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$a("bottom"))
+    className: clsx(bem$a("bottom"))
   }, /* @__PURE__ */ React.createElement(Button, {
     "v-show": props.showCloseButton,
     round: true,
     block: true,
     type: "primary",
-    className: cls(bem$a("close")),
+    className: clsx(bem$a("close")),
     text: props.closeButtonText || locale.vanCouponList.close,
     onClick: () => {
       var _a2;
@@ -13422,21 +13485,21 @@ const SkuRow = (props) => {
   const { skuRow } = props;
   const renderTitle = () => {
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$9("title"))
+      className: clsx(bem$9("title"))
     }, skuRow.k, skuRow.is_multiple && /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem$9("title-multiple"))
+      className: clsx(bem$9("title-multiple"))
     }, "\uFF08\u53EF\u591A\u9009\uFF09"));
   };
   const renderContent = () => {
     const { largeImageMode } = skuRow;
     return largeImageMode ? /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$9("scroller"))
+      className: clsx(bem$9("scroller"))
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$9("row"))
+      className: clsx(bem$9("row"))
     }, props.children)) : props.children;
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$9(), BORDER_BOTTOM)
+    className: clsx(bem$9(), BORDER_BOTTOM)
   }, renderTitle(), renderContent());
 };
 const [bem$8] = createNamespace("sku-row");
@@ -13466,7 +13529,7 @@ const SkuRowItem = (props) => {
         fit: "cover",
         src: imgUrl,
         lazyload: props.lazyload,
-        className: cls(bem$8(`${classPrefix}-img`))
+        className: clsx(bem$8(`${classPrefix}-img`))
       });
     }
     return null;
@@ -13487,7 +13550,7 @@ const SkuRowItem = (props) => {
   };
   const choosed = props.skuValue.id === props.selectedSku[props.skuKeyStr];
   return /* @__PURE__ */ React.createElement("span", {
-    className: cls(
+    className: clsx(
       bem$8(classPrefix, {
         active: choosed,
         disabled: !choosable
@@ -13495,11 +13558,11 @@ const SkuRowItem = (props) => {
     ),
     onClick: onSelect
   }, imageRender(), /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$8(`${classPrefix}-name`))
+    className: clsx(bem$8(`${classPrefix}-name`))
   }, props.largeImageMode ? /* @__PURE__ */ React.createElement("span", {
-    className: cls("rv-multi-ellipsis--l2")
+    className: clsx("rv-multi-ellipsis--l2")
   }, (_a = props.skuValue) == null ? void 0 : _a.name) : (_b = props.skuValue) == null ? void 0 : _b.name), props.largeImageMode && (props.previewIcon || /* @__PURE__ */ React.createElement(ExpandO, {
-    className: cls(bem$8(`${classPrefix}-img-icon`)),
+    className: clsx(bem$8(`${classPrefix}-img-icon`)),
     onClick: onPreviewImg
   })));
 };
@@ -13525,14 +13588,14 @@ const SkuRowPropItem = (props) => {
     });
   };
   return /* @__PURE__ */ React.createElement("span", {
-    className: cls(
+    className: clsx(
       bem$7("item", {
         active: choosed
       })
     ),
     onClick: onSelect
   }, /* @__PURE__ */ React.createElement("span", {
-    className: cls(bem$7("item-name"))
+    className: clsx(bem$7("item-name"))
   }, (_a = props.skuValue) == null ? void 0 : _a.name));
 };
 const { QUOTA_LIMIT: QUOTA_LIMIT$1, STOCK_LIMIT } = LIMIT_TYPE;
@@ -13622,19 +13685,19 @@ const SkuStepper = (p) => {
     });
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$6("stepper-stock"))
+    className: clsx(bem$6("stepper-stock"))
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$6("stepper-title"))
+    className: clsx(bem$6("stepper-title"))
   }, props.stepperTitle), /* @__PURE__ */ React.createElement(Stepper, {
     min: stepperMinLimit,
     max: stepperLimit,
-    className: cls(bem$6("stepper")),
+    className: clsx(bem$6("stepper")),
     disableInput: props.disableStepperInput,
     value: props.currentNum,
     onChange,
     onOverlimit: onOverLimit
   }), !props.hideQuotaText && quotaContent && /* @__PURE__ */ React.createElement("span", {
-    className: cls(bem$6("stepper-quota"))
+    className: clsx(bem$6("stepper-quota"))
   }, quotaContent));
 };
 const { QUOTA_LIMIT } = LIMIT_TYPE;
@@ -13782,7 +13845,7 @@ const Sku = forwardRef((p, ref) => {
       return props.stockRender(stock);
     }
     return /* @__PURE__ */ React.createElement(React.Fragment, null, "\u5269\u4F59", /* @__PURE__ */ React.createElement("span", {
-      className: cls(
+      className: clsx(
         bem$5("stock-num", {
           highlight: stock < props.stockThreshold
         })
@@ -13968,21 +14031,21 @@ const Sku = forwardRef((p, ref) => {
   const renderHeaderInfo = () => {
     var _a2;
     return /* @__PURE__ */ React.createElement(React.Fragment, null, ((_a2 = props.skuHeaderPriceRender) == null ? void 0 : _a2.call(props, price)) || /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$5("goods-price"))
+      className: clsx(bem$5("goods-price"))
     }, /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem$5("price-symbol"))
+      className: clsx(bem$5("price-symbol"))
     }, "\uFFE5"), /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem$5("price-num"))
+      className: clsx(bem$5("price-num"))
     }, price), props.priceTag && /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem$5("price-tag"))
+      className: clsx(bem$5("price-tag"))
     }, props.priceTag)), props.skuHeaderOriginPrice && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$5("header-item"))
+      className: clsx(bem$5("header-item"))
     }, props.skuHeaderOriginPrice), !props.hideStock && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$5("header-item"))
+      className: clsx(bem$5("header-item"))
     }, /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem$5("stock"))
+      className: clsx(bem$5("stock"))
     }, stockContent)), !props.hideSelectedText && /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$5("header-item"))
+      className: clsx(bem$5("header-item"))
     }, selectedText));
   };
   const renderHeader = () => {
@@ -13991,19 +14054,19 @@ const Sku = forwardRef((p, ref) => {
     const selectedValue = getSkuImgValue(sku, state.selectedSku);
     const imgUrl = selectedValue ? selectedValue.imgUrl : props.goods.picture;
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$5("header"), BORDER_BOTTOM)
+      className: clsx(bem$5("header"), BORDER_BOTTOM)
     }, props.showHeaderImage && /* @__PURE__ */ React.createElement(ImageNamespace, {
       fit: "cover",
       src: imgUrl,
-      className: cls(bem$5("header__img-wrap")),
+      className: clsx(bem$5("header__img-wrap")),
       onClick: () => onPreviewImage(selectedValue)
     }, props.skuHeaderImageExtra), /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$5("header__goods-info"))
+      className: clsx(bem$5("header__goods-info"))
     }, renderHeaderInfo(), props.skuHeaderExtra));
   };
   const renderGroup = () => {
     return props.skuGroup || hasSkuOrAttr && /* @__PURE__ */ React.createElement("div", {
-      className: cls(
+      className: clsx(
         bem$5("group-container", {
           "hide-soldout": !props.showSoldoutSku
         })
@@ -14054,13 +14117,13 @@ const Sku = forwardRef((p, ref) => {
   });
   const renderBody = () => {
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$5("body")),
+      className: clsx(bem$5("body")),
       style: bodyStyle
     }, props.skuBodyTop, renderGroup(), props.skuGroupExtra, renderStepper());
   };
   const renderActions = () => {
     return props.skuActions || /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$5("actions"))
+      className: clsx(bem$5("actions"))
     }, /* @__PURE__ */ React.createElement(ActionBar, null, props.showAddCartBtn && /* @__PURE__ */ React.createElement(ActionBar.Button, {
       type: "warning",
       text: props.addCartText || "\u52A0\u5165\u8D2D\u7269\u8F66",
@@ -14090,7 +14153,7 @@ const Sku = forwardRef((p, ref) => {
     visible,
     onClose: onPopupClose,
     onClosed: onPopupClosed,
-    className: cls((_b = props.popupProps) == null ? void 0 : _b.className, bem$5("container"))
+    className: clsx((_b = props.popupProps) == null ? void 0 : _b.className, bem$5("container"))
   }, renderHeader(), renderBody(), props.skuActionsTop, renderActions(), props.skuActionsBottom);
 });
 var index$4 = "";
@@ -14101,7 +14164,7 @@ var FloatingBallItem = (props) => {
     parent == null ? void 0 : parent.close();
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls("rv-floating-ball__menu__item"),
+    className: clsx("rv-floating-ball__menu__item"),
     onClick: handleItemClick
   }, props.children);
 };
@@ -14266,7 +14329,7 @@ const FloatingBall = forwardRef(
         return null;
       const [position1, position2] = position.split(" ");
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(
+        className: clsx(
           bem$4("menu", {
             [(_a2 = props.menu) == null ? void 0 : _a2.direction]: !!((_b2 = props.menu) == null ? void 0 : _b2.direction),
             [position1]: !!position1,
@@ -14426,14 +14489,14 @@ const FloatingBall = forwardRef(
         }
       }
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(props.className, indentClassName, bem$4({ active })),
+      className: clsx(props.className, indentClassName, bem$4({ active })),
       style: trackStyle,
       ref: setContainer,
       onTouchStart,
       onTouchEnd,
       onTouchCancel: onTouchEnd
     }, renderMenus(), /* @__PURE__ */ React.createElement("div", {
-      className: cls(
+      className: clsx(
         bem$4("base", {
           [props.disabledClassName]: props.disabled
         })
@@ -14513,7 +14576,7 @@ const WaterMark = (p) => {
     }
   }, [gapX, gapY, rotate, width, height, image, content, font]);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(
+    className: clsx(
       bem$3({
         full: props.fullPage
       })
@@ -14604,7 +14667,7 @@ const FloatingPanel = forwardRef(
     useEventListener("touchend", onTouchEnd, { target: root2, passive: false });
     return /* @__PURE__ */ React.createElement(animated.div, {
       ref: root2,
-      className: cls(bem$2(), className),
+      className: clsx(bem$2(), className),
       style: {
         height: maxAnchor,
         transform: visibleH.to((h) => `translateY(calc(100% - ${h}px))`),
@@ -14612,12 +14675,12 @@ const FloatingPanel = forwardRef(
       }
     }, /* @__PURE__ */ React.createElement("div", {
       ref: header,
-      className: cls(bem$2("header"))
+      className: clsx(bem$2("header"))
     }, /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem$2("thumb"))
+      className: clsx(bem$2("thumb"))
     })), /* @__PURE__ */ React.createElement(animated.div, {
       ref: body,
-      className: cls(bem$2("body"))
+      className: clsx(bem$2("body"))
     }, props.children));
   }
 );
@@ -14710,10 +14773,10 @@ const Table = (props) => {
     if (!showHeader)
       return null;
     return /* @__PURE__ */ React.createElement("thead", {
-      className: cls(bem$1("header"))
+      className: clsx(bem$1("header"))
     }, /* @__PURE__ */ React.createElement("tr", null, columns.map((column, index2) => /* @__PURE__ */ React.createElement("th", {
       key: column.dataIndex || index2,
-      className: cls(bem$1("header-cell")),
+      className: clsx(bem$1("header-cell")),
       style: {
         ...columnStyles[index2],
         textAlign: column.align || "left"
@@ -14723,26 +14786,26 @@ const Table = (props) => {
   const renderBody = () => {
     if (dataSource.length === 0) {
       return /* @__PURE__ */ React.createElement("tbody", {
-        className: cls(bem$1("body"))
+        className: clsx(bem$1("body"))
       }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", {
         colSpan: columns.length,
-        className: cls(bem$1("empty-cell"))
+        className: clsx(bem$1("empty-cell"))
       }, /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem$1("empty-image"))
+        className: clsx(bem$1("empty-image"))
       }, emptyImage && /* @__PURE__ */ React.createElement("img", {
         src: emptyImage
       })), /* @__PURE__ */ React.createElement("div", null, emptyText))));
     }
     return /* @__PURE__ */ React.createElement("tbody", {
-      className: cls(bem$1("body"))
+      className: clsx(bem$1("body"))
     }, dataSource.map((record, rowIndex) => /* @__PURE__ */ React.createElement("tr", {
       key: getRowKey(record, rowIndex),
-      className: cls(bem$1("row"))
+      className: clsx(bem$1("row"))
     }, columns.map((column, colIndex) => {
       const text = record[column.dataIndex];
       return /* @__PURE__ */ React.createElement("td", {
         key: column.dataIndex || colIndex,
-        className: cls(bem$1("cell")),
+        className: clsx(bem$1("cell")),
         style: {
           ...columnStyles[colIndex],
           textAlign: column.align || "left"
@@ -14750,7 +14813,7 @@ const Table = (props) => {
       }, column.render ? column.render(text, record, rowIndex) : text);
     }))));
   };
-  const classes = cls(
+  const classes = clsx(
     className,
     bem$1([
       {
@@ -14759,7 +14822,7 @@ const Table = (props) => {
     ])
   );
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem$1("wrapper")),
+    className: clsx(bem$1("wrapper")),
     ref: containerRef
   }, /* @__PURE__ */ React.createElement("table", {
     className: classes,
@@ -14794,9 +14857,9 @@ const TreeSelectItem = ({
     }
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem("item-wrapper"))
+    className: clsx(bem("item-wrapper"))
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(
+    className: clsx(
       bem("item", {
         active: selected,
         disabled: node.disabled,
@@ -14807,21 +14870,21 @@ const TreeSelectItem = ({
     style: node.style,
     onClick: handleClick
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem("item-content"))
+    className: clsx(bem("item-content"))
   }, node.icon && /* @__PURE__ */ React.createElement("span", {
-    className: cls(bem("item-icon"))
+    className: clsx(bem("item-icon"))
   }, node.icon), /* @__PURE__ */ React.createElement("span", {
-    className: cls(bem("item-title"))
+    className: clsx(bem("item-title"))
   }, title)), selected && !multiple && /* @__PURE__ */ React.createElement(Success, {
-    className: cls(bem("item-selected-icon"))
+    className: clsx(bem("item-selected-icon"))
   }), multiple && /* @__PURE__ */ React.createElement("input", {
     type: "checkbox",
     checked: selected,
     disabled: node.disabled,
-    className: cls(bem("item-checkbox")),
+    className: clsx(bem("item-checkbox")),
     readOnly: true
   })), hasChildren && /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem("item-children"))
+    className: clsx(bem("item-children"))
   }, children.map((child, index2) => /* @__PURE__ */ React.createElement(TreeSelectItem, {
     key: child[valueKey] || index2,
     node: child,
@@ -14931,7 +14994,7 @@ const TreeSelect = (p) => {
     (_a = props.onChange) == null ? void 0 : _a.call(props, newValue, selectedNodes);
   });
   const renderNav = () => /* @__PURE__ */ React.createElement("div", {
-    className: cls(bem("nav"), props.navClassName),
+    className: clsx(bem("nav"), props.navClassName),
     style: {
       width: props.navWidth,
       height: props.height,
@@ -14942,7 +15005,7 @@ const TreeSelect = (p) => {
     const title = item[titleKey];
     return /* @__PURE__ */ React.createElement("div", {
       key: item[keyKey] || item[valueKey] || index2,
-      className: cls(
+      className: clsx(
         bem("nav-item", {
           active: isActive,
           disabled: item.disabled
@@ -14952,18 +15015,18 @@ const TreeSelect = (p) => {
       style: item.style,
       onClick: () => !item.disabled && handleNavClick(index2)
     }, item.icon && /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem("nav-icon"))
+      className: clsx(bem("nav-icon"))
     }, item.icon), /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem("nav-text"))
+      className: clsx(bem("nav-text"))
     }, title), item.badge && /* @__PURE__ */ React.createElement("span", {
-      className: cls(bem("nav-badge"))
+      className: clsx(bem("nav-badge"))
     }, item.badge));
   }));
   const renderContent = () => {
     const currentNav = navItems[activeIndex];
     if (props.contentRender && currentNav) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: cls(bem("content"), props.contentClassName),
+        className: clsx(bem("content"), props.contentClassName),
         style: {
           height: props.height,
           ...props.contentStyle
@@ -14971,13 +15034,13 @@ const TreeSelect = (p) => {
       }, props.contentRender(currentNav));
     }
     return /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem("content"), props.contentClassName),
+      className: clsx(bem("content"), props.contentClassName),
       style: {
         height: props.height,
         ...props.contentStyle
       }
     }, contentItems.length > 0 ? /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem("items"))
+      className: clsx(bem("items"))
     }, contentItems.map((item, index2) => {
       const value = item[valueKey];
       const selected = isValueSelected(value);
@@ -14990,12 +15053,12 @@ const TreeSelect = (p) => {
         fieldNames: props.fieldNames
       });
     })) : /* @__PURE__ */ React.createElement("div", {
-      className: cls(bem("content-empty"))
+      className: clsx(bem("content-empty"))
     }, props.placeholder || "\u6682\u65E0\u6570\u636E"));
   };
   return /* @__PURE__ */ React.createElement("div", {
-    className: cls(props.className, bem()),
+    className: clsx(props.className, bem()),
     style: props.style
   }, renderNav(), renderContent());
 };
-export { ActionBar, ActionSheet, Area, Badge, Button, Calendar, Card, CascaderPopup as Cascader, Cell, CellGroup, Checkbox, CheckBoxGroup as CheckboxGroup, Circle, Collapse, CollapseItem, ConfigProvider, CountDown, CouponCell, CouponList, DateTimePicker as DatetimePicker, Dialog, Divider, DropdownMenu, Empty, FieldNamespace as Field, Flex, FloatingBall, FloatingPanel, Form, GridNamespace as Grid, GridItem, ImageNamespace as Image, ImagePreview, IndexAnchor, IndexBar, Input, Lazyload, List, Loading, NavBar, NoticeBar, exportNotifyNamespace as Notify, NumberKeyboard, Overlay, Pagination, PasswordInput, Picker, Popover, Popup, ProductCard, Progress, PullRefresh, Radio, RadioGroup, Rate, Search, Selector, ShareSheet, Sidebar, SidebarItem, Skeleton, Sku, Slider, Space, Stepper, Steps, StepsItem, Sticky, SubmitBar, SwipeCell, Swiper, Swtich as Switch, Tabbar, TabbarItem, Table, Tabs, Tag, Toast, TreeSelect, TypographyNamespace as Typography, Uploader, WaterMark, index$17 as hooks };
+export { ActionBar, ActionSheet, Area, Avatar, Badge, Button, Calendar, Card, CascaderPopup as Cascader, Cell, CellGroup, Checkbox, CheckBoxGroup as CheckboxGroup, Circle, Collapse, CollapseItem, ConfigProvider, CountDown, CouponCell, CouponList, DateTimePicker as DatetimePicker, Dialog, Divider, DropdownMenu, Empty, FieldNamespace as Field, Flex, FloatingBall, FloatingPanel, Form, GridNamespace as Grid, GridItem, ImageNamespace as Image, ImagePreview, IndexAnchor, IndexBar, Input, Lazyload, List, Loading, NavBar, NoticeBar, exportNotifyNamespace as Notify, NumberKeyboard, Overlay, Pagination, PasswordInput, Picker, Popover, Popup, ProductCard, Progress, PullRefresh, Radio, RadioGroup, Rate, Search, Selector, ShareSheet, Sidebar, SidebarItem, Skeleton, Sku, Slider, Space, Stepper, Steps, StepsItem, Sticky, SubmitBar, SwipeCell, Swiper, Swtich as Switch, Tabbar, TabbarItem, Table, Tabs, Tag, Toast, TreeSelect, TypographyNamespace as Typography, Uploader, WaterMark, index$18 as hooks };