@nutui/nutui-react-taro 2.0.24 → 2.1.0

package/dist/nutui.react.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.0.24 Fri Nov 10 2023 14:56:03 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.1.0 Fri Nov 17 2023 14:40:35 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -83,7 +83,7 @@ const o$2 = {
 function k$1(e2) {
   return Number.isNaN(Number(e2)) ? String(e2) : `${e2}px`;
 }
-const r$3 = (e2) => {
+const r$2 = (e2) => {
   const {
     name: t2,
     size: a2,
@@ -122,8 +122,8 @@ const r$3 = (e2) => {
     u
   );
 };
-r$3.defaultProps = o$2;
-r$3.displayName = "NutIcon";
+r$2.defaultProps = o$2;
+r$2.displayName = "NutIcon";
 var H = {}, ir = {
   get exports() {
     return H;
@@ -760,84 +760,82 @@ Check the top-level render call using <` + t2 + ">.");
   process.env.NODE_ENV === "production" ? h.exports = ur() : h.exports = sr();
 })(ir);
 const lr = H.jsx;
-const n$3 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "arrow-down2" });
+const n$3 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "arrow-down2" });
 n$3.displayName = "NutIconarrow-down2";
-const m$7 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "arrow-up2" });
+const m$7 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "arrow-up2" });
 m$7.displayName = "NutIconarrow-up2";
-const m$6 = (c2) => /* @__PURE__ */ lr(r$3, { ...c2, name: c2.name || "check-checked" });
+const m$6 = (c2) => /* @__PURE__ */ lr(r$2, { ...c2, name: c2.name || "check-checked" });
 m$6.displayName = "NutIconcheck-checked";
-const c = (e2) => /* @__PURE__ */ lr(r$3, { ...e2, name: e2.name || "check-disabled" });
+const c = (e2) => /* @__PURE__ */ lr(r$2, { ...e2, name: e2.name || "check-disabled" });
 c.displayName = "NutIconcheck-disabled";
-const n$2 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "check-normal" });
+const n$2 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "check-normal" });
 n$2.displayName = "NutIconcheck-normal";
-const t$5 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "Check" });
+const t$5 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "Check" });
 t$5.displayName = "NutIconCheck";
-const m$5 = (e2) => /* @__PURE__ */ lr(r$3, { ...e2, name: e2.name || "checked" });
+const m$5 = (e2) => /* @__PURE__ */ lr(r$2, { ...e2, name: e2.name || "checked" });
 m$5.displayName = "NutIconchecked";
-const e$6 = (t2) => /* @__PURE__ */ lr(r$3, { ...t2, name: t2.name || "checklist" });
+const e$6 = (t2) => /* @__PURE__ */ lr(r$2, { ...t2, name: t2.name || "checklist" });
 e$6.displayName = "NutIconchecklist";
-const r$2 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "circle-close" });
-r$2.displayName = "NutIconcircle-close";
-const t$4 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "close" });
+const t$4 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "close" });
 t$4.displayName = "NutIconclose";
-const t$3 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "del" });
+const t$3 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "del" });
 t$3.displayName = "NutIcondel";
-const n$1 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "down-arrow" });
+const n$1 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "down-arrow" });
 n$1.displayName = "NutIcondown-arrow";
-const e$5 = (a2) => /* @__PURE__ */ lr(r$3, { ...a2, name: a2.name || "failure" });
+const e$5 = (a2) => /* @__PURE__ */ lr(r$2, { ...a2, name: a2.name || "failure" });
 e$5.displayName = "NutIconfailure";
-const m$4 = (r2) => /* @__PURE__ */ lr(r$3, { ...r2, name: r2.name || "image-error" });
+const m$4 = (r2) => /* @__PURE__ */ lr(r$2, { ...r2, name: r2.name || "image-error" });
 m$4.displayName = "NutIconimage-error";
-const e$4 = (m2) => /* @__PURE__ */ lr(r$3, { ...m2, name: m2.name || "image" });
+const e$4 = (m2) => /* @__PURE__ */ lr(r$2, { ...m2, name: m2.name || "image" });
 e$4.displayName = "NutIconimage";
-const t$2 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "joy-smile" });
+const t$2 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "joy-smile" });
 t$2.displayName = "NutIconjoy-smile";
-const m$3 = (t2) => /* @__PURE__ */ lr(r$3, { ...t2, name: t2.name || "left" });
+const m$3 = (t2) => /* @__PURE__ */ lr(r$2, { ...t2, name: t2.name || "left" });
 m$3.displayName = "NutIconleft";
-const t$1 = (n2) => /* @__PURE__ */ lr(r$3, { ...n2, name: n2.name || "link" });
+const t$1 = (n2) => /* @__PURE__ */ lr(r$2, { ...n2, name: n2.name || "link" });
 t$1.displayName = "NutIconlink";
-const m$2 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "loading" });
+const m$2 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "loading" });
 m$2.displayName = "NutIconloading";
-const m$1 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "loading1" });
+const m$1 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "loading1" });
 m$1.displayName = "NutIconloading1";
-const n = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "location2" });
+const n = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "location2" });
 n.displayName = "NutIconlocation2";
-const e$3 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "mask-close" });
+const e$3 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "mask-close" });
 e$3.displayName = "NutIconmask-close";
-const t = (m2) => /* @__PURE__ */ lr(r$3, { ...m2, name: m2.name || "minus" });
+const t = (m2) => /* @__PURE__ */ lr(r$2, { ...m2, name: m2.name || "minus" });
 t.displayName = "NutIconminus";
-const a$4 = (m2) => /* @__PURE__ */ lr(r$3, { ...m2, name: m2.name || "my" });
+const a$4 = (m2) => /* @__PURE__ */ lr(r$2, { ...m2, name: m2.name || "my" });
 a$4.displayName = "NutIconmy";
-const e$2 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "notice" });
+const e$2 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "notice" });
 e$2.displayName = "NutIconnotice";
-const r$1 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "photograph" });
+const r$1 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "photograph" });
 r$1.displayName = "NutIconphotograph";
-const a$3 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "plus" });
+const a$3 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "plus" });
 a$3.displayName = "NutIconplus";
-const r = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "rect-down" });
+const r = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "rect-down" });
 r.displayName = "NutIconrect-down";
-const e$1 = (a2) => /* @__PURE__ */ lr(r$3, { ...a2, name: a2.name || "search" });
+const e$1 = (a2) => /* @__PURE__ */ lr(r$2, { ...a2, name: a2.name || "search" });
 e$1.displayName = "NutIconsearch";
-const m = (e2) => /* @__PURE__ */ lr(r$3, { ...e2, name: e2.name || "service" });
+const m = (e2) => /* @__PURE__ */ lr(r$2, { ...e2, name: e2.name || "service" });
 m.displayName = "NutIconservice";
-const o$1 = (t2) => /* @__PURE__ */ lr(r$3, { ...t2, name: t2.name || "star-fill-n" });
+const o$1 = (t2) => /* @__PURE__ */ lr(r$2, { ...t2, name: t2.name || "star-fill-n" });
 o$1.displayName = "NutIconstar-fill-n";
-const e = (s) => /* @__PURE__ */ lr(r$3, { ...s, name: s.name || "success" });
+const e = (s) => /* @__PURE__ */ lr(r$2, { ...s, name: s.name || "success" });
 e.displayName = "NutIconsuccess";
-const a$2 = (t2) => /* @__PURE__ */ lr(r$3, { ...t2, name: t2.name || "tips" });
+const a$2 = (t2) => /* @__PURE__ */ lr(r$2, { ...t2, name: t2.name || "tips" });
 a$2.displayName = "NutIcontips";
-const a$1 = (o2) => /* @__PURE__ */ lr(r$3, { ...o2, name: o2.name || "top" });
+const a$1 = (o2) => /* @__PURE__ */ lr(r$2, { ...o2, name: o2.name || "top" });
 a$1.displayName = "NutIcontop";
-const a = (n2) => /* @__PURE__ */ lr(r$3, { ...n2, name: n2.name || "triangle-down" });
+const a = (n2) => /* @__PURE__ */ lr(r$2, { ...n2, name: n2.name || "triangle-down" });
 a.displayName = "NutIcontriangle-down";
-const o = (t2) => /* @__PURE__ */ lr(r$3, { ...t2, name: t2.name || "triangle-up" });
+const o = (t2) => /* @__PURE__ */ lr(r$2, { ...t2, name: t2.name || "triangle-up" });
 o.displayName = "NutIcontriangle-up";
 const style_iconfont = "";
 const ComponentDefaults = {
   className: "",
   style: {}
 };
-const prefixCls$1 = "nut-button";
+const prefixCls$2 = "nut-button";
 const defaultProps$1w = {
   ...ComponentDefaults,
   color: "",
@@ -907,17 +905,17 @@ const Button = React__default.forwardRef(
           ...rest,
           ref,
           className: classNames(
-            prefixCls$1,
-            className,
-            props.type ? `${prefixCls$1}--${type4}` : null,
-            props.fill ? `${prefixCls$1}--${fill}` : null,
+            prefixCls$2,
+            props.type ? `${prefixCls$2}--${type4}` : null,
+            props.fill ? `${prefixCls$2}--${fill}` : null,
             {
-              [`${prefixCls$1}--${size}`]: size,
-              [`${prefixCls$1}--${shape}`]: shape,
-              [`${prefixCls$1}--block`]: block,
-              [`${prefixCls$1}--disabled`]: disabled,
-              [`${prefixCls$1}--loading`]: loading
-            }
+              [`${prefixCls$2}--${size}`]: size,
+              [`${prefixCls$2}--${shape}`]: shape,
+              [`${prefixCls$2}--block`]: block,
+              [`${prefixCls$2}--disabled`]: disabled,
+              [`${prefixCls$2}--loading`]: loading
+            },
+            className
           ),
           style: { ...getStyle(), ...style },
           onClick: (e2) => handleClick(e2)
@@ -935,16 +933,16 @@ const defaultProps$1v = {
   description: "",
   divider: true
 };
-const classPrefix$q = "nut-cell-group";
+const classPrefix$r = "nut-cell-group";
 const CellGroup = (props) => {
   const { children, className, style, title, description, divider, ...rest } = {
     ...defaultProps$1v,
     ...props
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(classPrefix$q, className), ...rest }, title ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$q}__title` }, title) : null, description ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$q}__description` }, description) : null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(classPrefix$r, className), ...rest }, title ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$r}__title` }, title) : null, description ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$r}__description` }, description) : null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: `${classPrefix$q}__wrap ${divider ? `${classPrefix$q}__wrap--divider` : ""}`
+      className: `${classPrefix$r}__wrap ${divider ? `${classPrefix$r}__wrap--divider` : ""}`
     },
     /* @__PURE__ */ React__default.createElement(CellGroupContext.Provider, { value: { divider } }, children)
   ));
@@ -961,7 +959,7 @@ const defaultProps$1u = {
   onClick: (event) => {
   }
 };
-const classPrefix$p = "nut-cell";
+const classPrefix$q = "nut-cell";
 const Cell = (props) => {
   const ctx = useContext(CellGroupContext);
   const {
@@ -993,20 +991,20 @@ const Cell = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(classPrefix$p, className),
+      className: classNames(classPrefix$q, className),
       onClick: (event) => handleClick(event),
       style: baseStyle,
       ...rest
     },
-    children || /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, title || description ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$p}__left` }, title ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$p}__title` }, title) : null, description ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$p}__description` }, description) : null) : null, extra ? /* @__PURE__ */ React__default.createElement(
+    children || /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, title || description ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$q}__left` }, title ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$q}__title` }, title) : null, description ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$q}__description` }, description) : null) : null, extra ? /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: `${classPrefix$p}__extra`,
+        className: `${classPrefix$q}__extra`,
         style: styles
       },
       extra
     ) : null),
-    (ctx == null ? void 0 : ctx.divider) ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$p}__divider` }) : null
+    (ctx == null ? void 0 : ctx.divider) ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$q}__divider` }) : null
   );
 };
 Cell.defaultProps = defaultProps$1u;
@@ -1975,7 +1973,7 @@ const zhCN = {
   },
   infiniteloading: {
     pullRefreshText: "松开刷新",
-    loadText: "加载中……",
+    loadText: "加载中",
     loadMoreText: "哎呀，这里是底部了啦"
   },
   pagination: {
@@ -2078,8 +2076,8 @@ const zhCN = {
   },
   pullToRefresh: {
     pullingText: "下拉刷新",
-    canReleaseText: "松开刷新",
-    refreshingText: "加载中...",
+    canReleaseText: "松手刷新",
+    refreshingText: "刷新中",
     completeText: "刷新成功"
   },
   tour: {
@@ -2091,7 +2089,7 @@ const zhCN = {
     errorCanvasTips: "当前环境不支持Canvas"
   }
 };
-const classPrefix$o = "nut-configprovider";
+const classPrefix$p = "nut-configprovider";
 const defaultConfigRef$1 = {
   current: {
     locale: zhCN
@@ -2132,7 +2130,7 @@ const ConfigProvider = (props) => {
   return /* @__PURE__ */ React__default.createElement(ConfigContext$1.Provider, { value: mergedConfig }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(classPrefix$o, className),
+      className: classNames(classPrefix$p, className),
       style: {
         ...cssVarStyle,
         ...style
@@ -4161,7 +4159,7 @@ const Overlay = (props) => {
       setInnerVisible(false);
     }
   }, [visible]);
-  const classes = classNames(className, classPrefix2);
+  const classes = classNames(classPrefix2, className);
   const styles = {
     ...style
   };
@@ -4251,21 +4249,21 @@ const defaultProps$1r = {
   contentPosition: "center",
   direction: "horizontal"
 };
-const classPrefix$n = `nut-divider`;
+const classPrefix$o = `nut-divider`;
 const Divider = (props) => {
   const { children, contentPosition, style, className, direction, ...rest } = {
     ...defaultProps$1r,
     ...props
   };
   const classes = direction === "horizontal" ? classNames({
-    [`${classPrefix$n}`]: true,
-    [`${classPrefix$n}__center`]: children,
-    [`${classPrefix$n}__left`]: contentPosition === "left",
-    [`${classPrefix$n}__right`]: contentPosition === "right",
-    [`${classPrefix$n}__hairline`]: true
+    [`${classPrefix$o}`]: true,
+    [`${classPrefix$o}__center`]: children,
+    [`${classPrefix$o}__left`]: contentPosition === "left",
+    [`${classPrefix$o}__right`]: contentPosition === "right",
+    [`${classPrefix$o}__hairline`]: true
   }) : classNames({
-    [`${classPrefix$n}`]: true,
-    [`${classPrefix$n}__vertical`]: direction === "vertical"
+    [`${classPrefix$o}`]: true,
+    [`${classPrefix$o}__vertical`]: direction === "vertical"
   });
   return /* @__PURE__ */ React__default.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
 };
@@ -4387,9 +4385,13 @@ const Grid = (props) => {
   const childrenDom = React__default.Children.toArray(children);
   const classPrefix2 = "nut-grid";
   const rootClass = () => {
-    return classNames(className, classPrefix2, {
-      [`${classPrefix2}__border`]: !gap
-    });
+    return classNames(
+      classPrefix2,
+      {
+        [`${classPrefix2}__border`]: !gap
+      },
+      className
+    );
   };
   const rootStyle = () => {
     let styleSelf = {};
@@ -4423,7 +4425,7 @@ const Layout = (props) => {
 };
 Layout.defaultProps = defaultProps$1o;
 Layout.displayName = "NutLayout";
-const classPrefix$m = "nut-row";
+const classPrefix$n = "nut-row";
 const defaultProps$1n = {
   ...ComponentDefaults,
   type: "",
@@ -4458,7 +4460,7 @@ const Row = (props) => {
     ${getClass("justify", justify)}
     ${getClass("align", align)}
     ${getClass("flex", wrap)}
-    ${classPrefix$m}
+    ${classPrefix$n}
    `;
   };
   const parentRow = {
@@ -4478,7 +4480,7 @@ const Row = (props) => {
 };
 Row.defaultProps = defaultProps$1n;
 Row.displayName = "NutRow";
-const prefixCls = "nut-space";
+const prefixCls$1 = "nut-space";
 const defaultProps$1m = {
   direction: "horizontal"
 };
@@ -4488,15 +4490,15 @@ const Space = (props) => {
     ...props
   };
   const cls = classNames(
-    className,
-    prefixCls,
-    wrap && `${prefixCls}-wrap`,
-    direction && `${prefixCls}-${direction}`,
-    align && `${prefixCls}-align-${align}`,
-    justify && `${prefixCls}-justify-${justify}`
+    prefixCls$1,
+    wrap && `${prefixCls$1}-wrap`,
+    direction && `${prefixCls$1}-${direction}`,
+    align && `${prefixCls$1}-align-${align}`,
+    justify && `${prefixCls$1}-justify-${justify}`,
+    className
   );
   return /* @__PURE__ */ React__default.createElement("div", { className: cls, style }, React__default.Children.map(children, (child) => {
-    return child !== null && child !== void 0 && /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-item` }, child);
+    return child !== null && child !== void 0 && /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls$1}-item` }, child);
   }));
 };
 Space.defaultProps = defaultProps$1m;
@@ -4582,7 +4584,7 @@ const defaultProps$1l = {
   position: "top",
   zIndex: 900
 };
-const classPrefix$l = "nut-sticky";
+const classPrefix$m = "nut-sticky";
 const Sticky = (props) => {
   const {
     position,
@@ -4684,7 +4686,7 @@ const Sticky = (props) => {
     {
       ref: rootRef,
       style: rootStyle,
-      className: classNames(classPrefix$l, className),
+      className: classNames(classPrefix$m, className),
       ...rest
     },
     /* @__PURE__ */ React__default.createElement(
@@ -4702,6 +4704,18 @@ const Sticky = (props) => {
 };
 Sticky.defaultProps = defaultProps$1l;
 Sticky.displayName = "NutSticky";
+const classPrefix$l = "nut-safe-area";
+const SafeArea = (props) => {
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: classNames(
+        classPrefix$l,
+        `${classPrefix$l}-position-${props.position}`
+      )
+    }
+  );
+};
 const defaultProps$1k = {
   ...ComponentDefaults,
   threshold: 200,
@@ -4737,9 +4751,13 @@ const BackTop = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(classPrefix2, className, {
-        show: backTop
-      }),
+      className: classNames(
+        classPrefix2,
+        {
+          show: backTop
+        },
+        className
+      ),
       style: styles,
       onClick: (e2) => {
         goTop(e2);
@@ -5026,12 +5044,12 @@ const FixedNav = (props) => {
   };
   const classPrefix2 = "nut-fixednav";
   const classes = classNames(
+    classPrefix2,
     {
       active: visible
     },
     type4,
-    className,
-    classPrefix2
+    className
   );
   const handleClick = (item, event) => {
     onSelect(item, event);
@@ -5364,7 +5382,7 @@ const SideNavBar = (props) => {
       position,
       onClose
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: classNames(className, classPrefix2), ...rest }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__content` }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: classNames(classPrefix2, className), ...rest }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__content` }, /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: `${classPrefix2}__list ${sidenavbarShow ? "sidenavbar-show" : "sidenavbar-hide"}`,
@@ -5565,9 +5583,13 @@ const TabbarItem = (props) => {
     ...props
   };
   const classPrefix2 = "nut-tabbar-item";
-  const tabbarItemClass = classNames(className, classPrefix2, {
-    [`${classPrefix2}-active`]: active
-  });
+  const tabbarItemClass = classNames(
+    classPrefix2,
+    {
+      [`${classPrefix2}-active`]: active
+    },
+    className
+  );
   const boxPrefix = `${classPrefix2}__icon-box`;
   const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
     [`${boxPrefix}-large`]: !icon
@@ -5630,9 +5652,13 @@ const Tabbar = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(classPrefix2, className, {
-        [`${classPrefix2}__fixed`]: fixed
-      }),
+      className: classNames(
+        classPrefix2,
+        {
+          [`${classPrefix2}__fixed`]: fixed
+        },
+        className
+      ),
       style
     },
     /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__wrap` }, React__default.Children.map(children, (child, idx) => {
@@ -5667,10 +5693,10 @@ const TabPane = (props) => {
   };
   const classPrefix2 = "nut-tabpane";
   const classes = classNames(
+    classPrefix2,
     {
       active: !disabled && props.active
     },
-    classPrefix2,
     autoHeightClassName,
     className
   );
@@ -7432,8 +7458,8 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
       [`${classPrefix2}-title`]: !popup,
       [`${classPrefix2}-nofooter`]: !!autoBackfill
     },
-    className,
-    classPrefix2
+    classPrefix2,
+    className
   );
   const headerClasses = classNames({
     [`${classPrefix2}-header`]: true,
@@ -7629,6 +7655,7 @@ const Calendar = React__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, popup ? /* @__PURE__ */ React__default.createElement(
     Popup,
     {
+      className: "nut-calendar-popup",
       visible,
       position: "bottom",
       round: true,
@@ -7636,7 +7663,7 @@ const Calendar = React__default.forwardRef((props, ref) => {
       destroyOnClose: true,
       onOverlayClick: closePopup,
       onCloseIconClick: closePopup,
-      style: { height: "85vh" }
+      style: { height: "83%" }
     },
     renderItem()
   ) : renderItem());
@@ -7721,10 +7748,12 @@ const defaultProps$12 = {
   type: "single",
   firstDayOfWeek: 0
 };
+const prefixCls = "nut-calendarcard";
 const CalendarCard = React__default.forwardRef((props, ref) => {
   const { locale } = useConfig$1();
   const {
     style,
+    className,
     type: type4,
     value,
     defaultValue,
@@ -7976,7 +8005,7 @@ const CalendarCard = React__default.forwardRef((props, ref) => {
   };
   const monthTitle = locale.calendaritem.monthTitle;
   const renderHeader = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-header" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-header-left" }, /* @__PURE__ */ React__default.createElement("div", { className: "double-left", onClick: () => jump(-12) }, /* @__PURE__ */ React__default.createElement(DoubleLeft, null)), /* @__PURE__ */ React__default.createElement("div", { className: "left", onClick: () => jump(-1) }, /* @__PURE__ */ React__default.createElement(Left, null))), /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-header-title" }, monthTitle(month.year, month.month)), /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-header-right" }, /* @__PURE__ */ React__default.createElement("div", { className: "right", onClick: () => jump(1) }, /* @__PURE__ */ React__default.createElement(Right, null)), /* @__PURE__ */ React__default.createElement("div", { className: "double-right", onClick: () => jump(12) }, /* @__PURE__ */ React__default.createElement(DoubleRight, null))));
+    return /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-header-left` }, /* @__PURE__ */ React__default.createElement("div", { className: "double-left", onClick: () => jump(-12) }, /* @__PURE__ */ React__default.createElement(DoubleLeft, null)), /* @__PURE__ */ React__default.createElement("div", { className: "left", onClick: () => jump(-1) }, /* @__PURE__ */ React__default.createElement(Left, null))), /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-header-title` }, monthTitle(month.year, month.month)), /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-header-right` }, /* @__PURE__ */ React__default.createElement("div", { className: "right", onClick: () => jump(1) }, /* @__PURE__ */ React__default.createElement(Right, null)), /* @__PURE__ */ React__default.createElement("div", { className: "double-right", onClick: () => jump(12) }, /* @__PURE__ */ React__default.createElement(DoubleRight, null))));
   };
   const [weekHeader] = useState(() => {
     const weekdays = locale.calendaritem.weekdays.map((day, index) => {
@@ -7991,34 +8020,34 @@ const CalendarCard = React__default.forwardRef((props, ref) => {
     ];
   });
   const renderContent = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-content" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-days" }, weekHeader.map((day) => {
+    return /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-content` }, /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-days` }, weekHeader.map((day) => {
       return /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: classNames("nut-calendarcard-day", "header", {
+          className: classNames(`${prefixCls}-day`, "header", {
             weekend: day.key === 0 || day.key === 6
           }),
           key: day.key
         },
         day.name
       );
-    })), /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-days" }, days.map((day) => /* @__PURE__ */ React__default.createElement(
+    })), /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-days` }, days.map((day) => /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: classNames(
-          "nut-calendarcard-day",
+          `${prefixCls}-day`,
           day.type,
           getClasses(day)
         ),
         key: `${day.year}-${day.month}-${day.date}`,
         onClick: () => handleDayClick(day)
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-day-top" }, renderDayTop ? renderDayTop(day) : ""),
-      /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-day-inner" }, renderDay ? renderDay(day) : day.date),
-      /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard-day-bottom" }, renderDayBottom ? renderDayBottom(day) : "")
+      /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-day-top` }, renderDayTop ? renderDayTop(day) : ""),
+      /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-day-inner` }, renderDay ? renderDay(day) : day.date),
+      /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls}-day-bottom` }, renderDayBottom ? renderDayBottom(day) : "")
     ))));
   };
-  return days.length > 0 ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendarcard", style }, renderHeader(), renderContent()) : null;
+  return days.length > 0 ? /* @__PURE__ */ React__default.createElement("div", { className: classNames(prefixCls, className), style }, renderHeader(), renderContent()) : null;
 });
 CalendarCard.defaultProps = defaultProps$12;
 CalendarCard.displayName = "NutCalendarCard";
@@ -8114,9 +8143,13 @@ const CheckboxGroup = React__default.forwardRef(
       /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: classNames(classPrefix$j, className, {
-            [`nut-checkboxgroup--${props.direction}`]: props.direction
-          }),
+          className: classNames(
+            classPrefix$j,
+            {
+              [`nut-checkboxgroup--${props.direction}`]: props.direction
+            },
+            className
+          ),
           ...rest
         },
         (options == null ? void 0 : options.length) ? renderOptions() : children
@@ -8232,9 +8265,13 @@ const Checkbox = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(classPrefix$i, className, {
-        [`${classPrefix$i}--reverse`]: labelPosition === "left"
-      }),
+      className: classNames(
+        classPrefix$i,
+        {
+          [`${classPrefix$i}--reverse`]: labelPosition === "left"
+        },
+        className
+      ),
       ...rest,
       onClick: handleClick
     },
@@ -8802,7 +8839,7 @@ const InternalPicker = (props, ref) => {
         onPickStart: pickerStart,
         onChange: pickerChange,
         onPickEnd: pickerEnd,
-        indicatorClass: Taro.getEnv() === "JD" ? "nut-picker-indicator-jdapp" : "",
+        indicatorClass: "nut-picker-indicator-taro",
         className: "nut-picker-view-panel"
       },
       columnsList == null ? void 0 : columnsList.map((columnOptions, index) => {
@@ -10439,8 +10476,8 @@ const Form = React__default.forwardRef(
       {
         className: classNames(
           classPrefix2,
-          className,
-          PositionInfo[labelPosition]
+          PositionInfo[labelPosition],
+          className
         ),
         style,
         onSubmit: (e2) => {
@@ -11217,10 +11254,13 @@ const MenuItem = forwardRef((props, ref) => {
   ) : null, /* @__PURE__ */ React__default.createElement(
     View,
     {
-      className: classNames(className, {
-        "nut-menu-item__wrap": direction === "down",
-        "nut-menu-item__wrap-up": direction !== "down"
-      }),
+      className: classNames(
+        {
+          "nut-menu-item__wrap": direction === "down",
+          "nut-menu-item__wrap-up": direction !== "down"
+        },
+        className
+      ),
       style: {
         ...style,
         ...isShow()
@@ -11381,10 +11421,14 @@ const Menu = (props) => {
         return /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: classNames("nut-menu__item ", className, {
-              active: showMenuItem[index],
-              disabled
-            }),
+            className: classNames(
+              "nut-menu__item ",
+              {
+                active: showMenuItem[index],
+                disabled
+              },
+              className
+            ),
             style: { color: showMenuItem[index] ? activeColor : "" },
             key: index,
             onClick: () => {
@@ -11643,9 +11687,13 @@ const RadioGroup = React__default.forwardRef(
       /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: classNames(classPrefix$g, className, {
-            [`${classPrefix$g}--${props.direction}`]: props.direction
-          }),
+          className: classNames(
+            classPrefix$g,
+            {
+              [`${classPrefix$g}--${props.direction}`]: props.direction
+            },
+            className
+          ),
           ...rest
         },
         (options == null ? void 0 : options.length) ? renderOptionsChildren() : children
@@ -11751,14 +11799,10 @@ const Radio = (props) => {
       className: classNames(color())
     }) : /* @__PURE__ */ React__default.createElement(n$2, { className: classNames(color()) });
   };
-  const reverse = labelPosition === "left";
   const renderRadioItem = () => {
     if (shape === "button") {
       return renderButton();
     }
-    if (reverse) {
-      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderLabel(), renderIcon());
-    }
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
   };
   const handleClick = (e2) => {
@@ -11769,7 +11813,13 @@ const Radio = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: `${classPrefix2} ${className} ${reverse ? `${classPrefix2}--reverse` : ""}`,
+      className: classNames(
+        classPrefix2,
+        {
+          [`${classPrefix2}--reverse`]: labelPosition === "left"
+        },
+        className
+      ),
       style,
       onClick: handleClick,
       ...rest
@@ -11842,9 +11892,13 @@ const Range = (props) => {
     [`${classPrefix2}-disabled`]: disabled,
     [`${classPrefix2}-vertical`]: vertical
   });
-  const containerClasses = classNames(`${classPrefix2}-container`, className, {
-    [`${classPrefix2}-container-vertical`]: vertical
-  });
+  const containerClasses = classNames(
+    `${classPrefix2}-container`,
+    {
+      [`${classPrefix2}-container-vertical`]: vertical
+    },
+    className
+  );
   const markClassName = useCallback(
     (mark) => {
       const classPrefix22 = "nut-range-mark";
@@ -12143,10 +12197,14 @@ const Rate = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(classPrefix2, className, {
-        disabled,
-        readonly: readOnly
-      }),
+      className: classNames(
+        classPrefix2,
+        {
+          disabled,
+          readonly: readOnly
+        },
+        className
+      ),
       style
     },
     countArray.map((n2) => {
@@ -12303,7 +12361,7 @@ const SearchBar = (props) => {
         className: `${classPrefix2}__clear ${rightIn ? "pos-right" : ""}`,
         onClick: (e2) => clearaVal(e2)
       },
-      /* @__PURE__ */ React__default.createElement(r$2, { color: "#555", size: 12 })
+      /* @__PURE__ */ React__default.createElement(e$5, { color: "#555", size: 12 })
     );
   };
   const clearaVal = (event) => {
@@ -12421,7 +12479,7 @@ const ShortPassword = (props) => {
       onCloseIconClick: onClose,
       ...rest
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: classNames(className, classPrefix2), style }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__title` }, title || locale.shortpassword.title), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__description` }, description || locale.shortpassword.description), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__input`, onClick: onFocus }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__input-site` }), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
+    /* @__PURE__ */ React__default.createElement("div", { className: classNames(classPrefix2, className), style }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__title` }, title || locale.shortpassword.title), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__description` }, description || locale.shortpassword.description), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__input`, onClick: onFocus }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__input-site` }), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
       return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__input-fake__li`, key: index }, inputValue.length > index && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, plain ? inputValue[index] : /* @__PURE__ */ React__default.createElement(
         "div",
         {
@@ -12729,9 +12787,13 @@ const TextArea = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(classPrefix2, className, {
-        [`${classPrefix2}__disabled`]: disabled
-      })
+      className: classNames(
+        classPrefix2,
+        {
+          [`${classPrefix2}__disabled`]: disabled
+        },
+        className
+      )
     },
     /* @__PURE__ */ React__default.createElement(
       Textarea,
@@ -13950,12 +14012,11 @@ const InfiniteLoading = (props) => {
   const refreshTop = useRef(null);
   const scrollHeight = useRef(0);
   const scrollTop = useRef(0);
-  const direction = useRef("down");
   const isTouching = useRef(false);
   const y = useRef(0);
   const refreshMaxH = useRef(0);
   const distance = useRef(0);
-  const classes = classNames(className, classPrefix$e);
+  const classes = classNames(classPrefix$e, className);
   useEffect(() => {
     refreshMaxH.current = threshold;
     setTimeout(() => {
@@ -13991,16 +14052,10 @@ const InfiniteLoading = (props) => {
     } else if (e2.target.scrollTop >= scrollHeight.current) {
       e2.target.scrollTop = scrollHeight.current;
     }
-    if (e2.target.scrollTop > scrollTop.current || e2.target.scrollTop >= scrollHeight.current) {
-      direction.current = "down";
-    } else {
-      direction.current = "up";
-    }
-    scrollTop.current = e2.target.scrollTop;
     onScroll && onScroll(e2.target.scrollTop);
   };
   const lower = () => {
-    if (direction.current === "up" || !hasMore || isInfiniting) {
+    if (!hasMore || isInfiniting) {
       return false;
     }
     setIsInfiniting(true);
@@ -14078,8 +14133,8 @@ const Loading = (props) => {
     {
       className: classNames(
         classPrefix2,
-        className,
-        direction === "vertical" ? `${classPrefix2}-vertical` : ""
+        direction === "vertical" ? `${classPrefix2}-vertical` : "",
+        className
       ),
       style
     },
@@ -15078,7 +15133,7 @@ const Avatar = (props) => {
     width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
     height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
     backgroundColor: `${background}`,
-    color: `${color}`,
+    color,
     marginLeft: avatarIndex !== 1 && ((_c = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c.gap) ? `${(_d = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _d.gap}px` : "",
     zIndex: ((_e = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _e.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "",
     ...style
@@ -15178,7 +15233,7 @@ const Skeleton = (props) => {
     ...props
   };
   const classPrefix2 = "nut-skeleton";
-  const classes = classNames(className, classPrefix2);
+  const classes = classNames(classPrefix2, className);
   const avatarClass = classNames({
     avatar: true,
     [`avatar--${avatarShape}`]: avatarShape
@@ -15268,7 +15323,7 @@ const Swipe = forwardRef((props, instanceRef) => {
     }
     if (rightWrapper.current) {
       const rightRect = await getRectByTaro(rightWrapper.current);
-      setActionWidth((v) => ({ ...v, right: rightRect.width }));
+      setActionWidth((v) => ({ ...v, right: rightRect == null ? void 0 : rightRect.width }));
     }
     if (!props.disabled) {
       startOffset.current = state.offset;
@@ -15944,7 +15999,7 @@ const CircleProgress = (props) => {
   };
   const oldValue = useRef(percent);
   const forceUpdate = useForceUpdate();
-  const classes = classNames(className, classPrefix$7);
+  const classes = classNames(classPrefix$7, className);
   const refRandomId = Math.random().toString(36).slice(-8);
   const animateIdRef = useRef(0);
   const styles = {
@@ -16554,8 +16609,8 @@ const Ellipsis = (props) => {
   const letterLowerReg = /^[a-z]+$/;
   const classes = classNames(
     classPrefix$6,
-    className,
-    width ? `${classPrefix$6}-width` : ""
+    width ? `${classPrefix$6}-width` : "",
+    className
   );
   const init = () => {
     setExceeded(false);
@@ -17009,6 +17064,8 @@ const defaultProps$g = {
 };
 const ImagePreview = (props) => {
   const {
+    className,
+    style,
     images,
     videos,
     visible,
@@ -17167,7 +17224,8 @@ const ImagePreview = (props) => {
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: classPrefix2,
+        className: classNames(classPrefix2, className),
+        style,
         ref,
         onClick: closeOnImg,
         onTouchStart
@@ -17429,7 +17487,7 @@ const Price = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: `${classPrefix2} ${className} ${line ? `${classPrefix2}--line` : ""}`,
+      className: `${classPrefix2} ${line ? `${classPrefix2}--line` : ""} ${className}`,
       style,
       ...rest
     },
@@ -17487,11 +17545,11 @@ const Step = (props) => {
   };
   const classPrefix2 = `nut-step`;
   const classes = classNames(
+    classPrefix2,
     {
       [`${classPrefix2}-${getCurrentStatus()}`]: true
     },
-    className,
-    classPrefix2
+    className
   );
   const renderIconClass = () => {
     if (icon) {
@@ -17528,12 +17586,12 @@ const Steps = (props) => {
   };
   const classPrefix2 = `nut-steps`;
   const classes = classNames(
+    classPrefix2,
     {
       [`${classPrefix2}-${direction}`]: true,
       [`${classPrefix2}-dot`]: !!props.dot
     },
-    className,
-    classPrefix2
+    className
   );
   return /* @__PURE__ */ React__default.createElement(DataContext.Provider, { value: parentSteps }, React__default.createElement(
     "div",
@@ -17847,7 +17905,7 @@ const Tour = (props) => {
     width: 0,
     height: 0
   });
-  const classes = classNames(className, classPrefix$3);
+  const classes = classNames(classPrefix$3, className);
   useEffect(() => {
     if (visible) {
       getRootPosition();
@@ -17990,7 +18048,7 @@ const Video = (props) => {
     ...defaultProps$8,
     ...props
   };
-  const classes = classNames(className, classPrefix$2);
+  const classes = classNames(classPrefix$2, className);
   return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps }, /* @__PURE__ */ React__default.createElement(
     Video$1,
     {
@@ -18185,7 +18243,7 @@ const VirtualList = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: className ? `${className} nut-virtualList-box` : "nut-virtualList-box",
+      className: classNames("nut-virtualList-box", className),
       ...rest,
       style: {
         height: containerHeight ? `${offSetSize}px` : ""
@@ -18271,9 +18329,13 @@ const InternalBarrage = (props, ref) => {
   const barrageContainer = useRef(null);
   const timeId = useRef((/* @__PURE__ */ new Date()).getTime());
   const timer = useRef(0);
-  const classes = classNames(className, classPrefix$1, {
-    [`${classPrefix$1}__body${timeId.current}`]: true
-  });
+  const classes = classNames(
+    classPrefix$1,
+    {
+      [`${classPrefix$1}__body${timeId.current}`]: true
+    },
+    className
+  );
   useImperativeHandle(ref, () => ({
     add: (word) => {
       barrageListSet.current = [...barrageListSet.current, word];
@@ -18795,8 +18857,8 @@ const defaultProps = {
   space: 10,
   toolbar: [
     /* @__PURE__ */ React__default.createElement(Button, { type: "danger", key: "cancel" }, "取消"),
-    /* @__PURE__ */ React__default.createElement(Button, { type: "info", key: "reset" }, "重置"),
-    /* @__PURE__ */ React__default.createElement(Button, { type: "warning", key: "rotate" }, "旋转"),
+    /* @__PURE__ */ React__default.createElement(Button, { key: "reset" }, "重置"),
+    /* @__PURE__ */ React__default.createElement(Button, { key: "rotate" }, "旋转"),
     /* @__PURE__ */ React__default.createElement(Button, { type: "success", key: "confirm" }, "确认")
   ],
   toolbarPosition: "bottom",
@@ -18824,7 +18886,7 @@ const AvatarCropper = (props) => {
     ...defaultProps,
     ...props
   };
-  const cls = classNames(classPrefix, className, "taro");
+  const cls = classNames(classPrefix, "taro", className);
   const toolbarPositionCls = classNames(
     `${classPrefix}-popup-toolbar`,
     toolbarPosition
@@ -19383,6 +19445,7 @@ export {
   Range,
   Rate,
   Row,
+  SafeArea,
   SearchBar,
   ShortPassword,
   SideNavBar,