@nutui/nutui-react 2.0.0-alpha.6 → 2.0.0-alpha.8

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.0-alpha.6 Fri May 12 2023 15:13:32 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.8 Fri May 12 2023 19:07:24 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -7543,7 +7543,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }, []);
     return isMounted;
   };
-  function useForceUpdate() {
+  function useForceUpdate$1() {
     const update2 = React.useState()[1];
     const isMounted = useIsMounted();
     return () => {
@@ -7804,7 +7804,7 @@ Please add \`${key}Action\` when creating your handler.`);
         instanceRef.current = updateRef(givenRef, value);
       }, [givenRef]);
       const [props, deps] = getAnimatedState(givenProps, host2);
-      const forceUpdate = useForceUpdate();
+      const forceUpdate = useForceUpdate$1();
       const callback = () => {
         const instance = instanceRef.current;
         if (hasInstance && !instance) {
@@ -9459,7 +9459,7 @@ Please add \`${key}Action\` when creating your handler.`);
       deps = [];
     const ref = React.useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
     const layoutId = React.useRef(0);
-    const forceUpdate = useForceUpdate();
+    const forceUpdate = useForceUpdate$1();
     const state = React.useMemo(() => ({
       ctrls: [],
       queue: [],
@@ -12500,6 +12500,10 @@ Please add \`${key}Action\` when creating your handler.`);
     }
   }
   const requestAniFrame$1 = requestAniFrame();
+  function useForceUpdate() {
+    const [, updateState] = React.useState();
+    return React.useCallback(() => updateState({}), []);
+  }
   const defaultProps$15 = {
     ...ComponentDefaults,
     tabStyle: {},
@@ -12587,15 +12591,20 @@ Please add \`${key}Action\` when creating your handler.`);
       return titles2;
     };
     const titles = React.useRef(getTitles());
+    const forceUpdate = useForceUpdate();
     React.useEffect(() => {
       titles.current = getTitles();
       let current = "";
       titles.current.forEach((title2) => {
-        if (title2.value === value) {
+        if (title2.value == value) {
           current = value;
         }
       });
-      setValue(current);
+      if (current !== "" && current !== value) {
+        setValue(current);
+      } else {
+        forceUpdate();
+      }
     }, [children]);
     const classes = classNames(
       classPrefix$a,
@@ -12612,14 +12621,16 @@ Please add \`${key}Action\` when creating your handler.`);
       background: activeType === "line" ? activeColor : ""
     };
     React.useEffect(() => {
-      const index = titles.current.findIndex((t) => t.value === value);
+      const index = titles.current.findIndex((t) => t.value == value);
       setContentStyle({
         transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
         transitionDuration: `${duration}ms`
       });
-      scrollIntoView(index);
+      setTimeout(() => {
+        scrollIntoView(index);
+      });
     }, [value]);
-    const tabChange = (item, index) => {
+    const tabChange = (item) => {
       onClick && onClick(item.value);
       if (item.disabled) {
         return;
@@ -12627,11 +12638,11 @@ Please add \`${key}Action\` when creating your handler.`);
       setValue(item.value);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes, ...rest, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classesTitle, style: { ...tabStyle }, ref: navRef, children: !!title && typeof title === "function" ? title() : titles.current.map((item, index) => {
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classesTitle, style: { ...tabStyle }, ref: navRef, children: !!title && typeof title === "function" ? title() : titles.current.map((item) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            onClick: (e) => {
+            onClick: () => {
               tabChange(item);
             },
             className: classNames(`${classPrefix$a}__titles-item`, {
@@ -14480,7 +14491,6 @@ Please add \`${key}Action\` when creating your handler.`);
     popup: true,
     visible: false,
     options: [],
-    value: [],
     title: "",
     optionKey: { textKey: "text", valueKey: "value", childrenKey: "children" },
     format: {},
@@ -14495,8 +14505,7 @@ Please add \`${key}Action\` when creating your handler.`);
     onChange: () => {
     },
     onPathChange: () => {
-    },
-    ...Popup.defaultProps
+    }
   };
   const InternalCascader = (props, ref) => {
     const {
@@ -14506,6 +14515,7 @@ Please add \`${key}Action\` when creating your handler.`);
       visible,
       options: options2,
       value,
+      defaultValue,
       title,
       optionKey: optionKey2,
       format: format2,
@@ -14521,6 +14531,15 @@ Please add \`${key}Action\` when creating your handler.`);
     const [tabvalue, setTabvalue] = React.useState("c1");
     const [optionsData, setOptionsData] = React.useState([]);
     const isLazy = () => state.configs.lazy && Boolean(state.configs.onLoad);
+    const [innerValue, setInnerValue] = usePropsValue({
+      value,
+      defaultValue,
+      finalValue: defaultValue,
+      onChange: (val) => {
+        var _a2;
+        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, val);
+      }
+    });
     const [state] = React.useState({
       optionsData: [],
       panes: [
@@ -14530,7 +14549,6 @@ Please add \`${key}Action\` when creating your handler.`);
           paneKey: ""
         }
       ],
-      innerValue: value,
       tree: new Tree$1([], {}),
       tabsCursor: 0,
       // 选中的tab项
@@ -14550,12 +14568,12 @@ Please add \`${key}Action\` when creating your handler.`);
     });
     React.useEffect(() => {
       initData();
-    }, [options2]);
+    }, [options2, format2]);
     React.useEffect(() => {
-      if (value !== state.innerValue) {
-        state.innerValue = value;
+      if (defaultValue && defaultValue !== innerValue) {
+        setInnerValue(defaultValue);
       }
-    }, [value]);
+    }, [defaultValue]);
     const initData = async () => {
       state.lazyLoadMap.clear();
       if (format2 && Object.keys(format2).length > 0) {
@@ -14590,24 +14608,24 @@ Please add \`${key}Action\` when creating your handler.`);
       setOptionsData(state.panes);
     };
     const syncValue = async () => {
-      const currentValue2 = state.innerValue;
-      if (currentValue2 === void 0 || !state.tree.nodes.length) {
+      const currentValue = innerValue;
+      if (currentValue === void 0 || currentValue !== defaultValue || !state.tree.nodes.length) {
         return;
       }
-      if (currentValue2.length === 0) {
+      if (currentValue.length === 0) {
         state.tabsCursor = 0;
         return;
       }
-      let needToSync = currentValue2;
-      if (isLazy() && Array.isArray(currentValue2) && currentValue2.length) {
+      let needToSync = currentValue;
+      if (isLazy() && Array.isArray(currentValue) && currentValue.length) {
         needToSync = [];
         const parent = state.tree.nodes.find(
-          (node) => node.value === currentValue2[0]
+          (node) => node.value === currentValue[0]
         );
         if (parent) {
           needToSync = [parent.value];
           state.initLoading = true;
-          const last = await currentValue2.slice(1).reduce(async (p, value2) => {
+          const last = await currentValue.slice(1).reduce(async (p, value2) => {
             var _a2;
             const parent2 = await p;
             await invokeLazyLoad(parent2);
@@ -14623,7 +14641,7 @@ Please add \`${key}Action\` when creating your handler.`);
           state.initLoading = false;
         }
       }
-      if (needToSync.length && currentValue2 === value) {
+      if (needToSync.length && currentValue === defaultValue) {
         const pathNodes = state.tree.getPathNodesByValue(needToSync);
         pathNodes.forEach((node, index) => {
           state.tabsCursor = index;
@@ -14680,6 +14698,7 @@ Please add \`${key}Action\` when creating your handler.`);
           const optionParams = pathNodes.map((item) => item.value);
           onChange(optionParams, pathNodes);
           onPathChange(optionParams, pathNodes);
+          setInnerValue(optionParams);
         }
         setOptionsData(state.panes);
         close();
@@ -18451,475 +18470,167 @@ Please add \`${key}Action\` when creating your handler.`);
   Radio.defaultProps = defaultProps$N;
   Radio.displayName = "NutRadio";
   Radio.RadioGroup = RadioGroup;
-  const fullClone = {
-    ...ReactDOM__namespace
+  const defaultProps$M = {
+    ...ComponentDefaults,
+    range: false,
+    min: 0,
+    max: 100,
+    step: 1,
+    vertical: false,
+    marks: {}
   };
-  const { version, render: reactRender, unmountComponentAtNode } = fullClone;
-  let createRoot;
-  try {
-    const mainVersion = Number((version || "").split(".")[0]);
-    if (mainVersion >= 18 && fullClone.createRoot) {
-      createRoot = fullClone.createRoot;
-    }
-  } catch (e) {
-  }
-  function toggleWarning(skip) {
-    const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
-    if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === "object") {
-      __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
-    }
-  }
-  const MARK = "__nutui_react_root__";
-  function legacyRender(node, container) {
-    reactRender(node, container);
-  }
-  function concurrentRender(node, container) {
-    toggleWarning(true);
-    const root2 = container[MARK] || createRoot(container);
-    toggleWarning(false);
-    root2.render(node);
-    container[MARK] = root2;
-  }
-  function render(node, container) {
-    if (createRoot) {
-      concurrentRender(node, container);
-      return;
-    }
-    legacyRender(node, container);
-  }
-  function legacyUnmount(container) {
-    return unmountComponentAtNode(container);
-  }
-  async function concurrentUnmount(container) {
-    return Promise.resolve().then(() => {
-      var _a2;
-      (_a2 = container[MARK]) == null ? void 0 : _a2.unmount();
-      delete container[MARK];
+  const Range = (props) => {
+    const {
+      className,
+      range: range2,
+      disabled,
+      button,
+      vertical,
+      marks,
+      onChange,
+      onStart,
+      onEnd,
+      minDescription,
+      maxDescription,
+      currentDescription,
+      min,
+      max,
+      step,
+      value,
+      defaultValue
+    } = { ...defaultProps$M, ...props };
+    const classPrefix2 = "nut-range";
+    const [buttonIndex, setButtonIndex] = React.useState(0);
+    const [dragStatus, setDragStatus] = React.useState("start");
+    const touch = useTouch();
+    const root2 = React.useRef(null);
+    const [marksList, setMarksList] = React.useState([]);
+    const [startValue, setStartValue] = React.useState(0);
+    const handleChange = (value2) => {
+      onChange && onChange(value2);
+    };
+    const [current, setCurrent] = usePropsValue({
+      value,
+      defaultValue,
+      finalValue: 0,
+      onChange: handleChange
     });
-  }
-  function unmount(container) {
-    if (createRoot) {
-      return concurrentUnmount(container);
-    }
-    return legacyUnmount(container);
-  }
-  let Notification$1 = (_a = class extends React__namespace.PureComponent {
-    constructor(props) {
-      super(props);
-      __publicField(this, "closeTimer");
-      this.close = this.close.bind(this);
-      this.startCloseTimer = this.startCloseTimer.bind(this);
-      this.clearCloseTimer = this.clearCloseTimer.bind(this);
-      this.close = this.close.bind(this);
-      this.clickCover = this.clickCover.bind(this);
-    }
-    close() {
-      this.clearCloseTimer();
-      this.props.onClose();
-    }
-    startCloseTimer() {
-      const { duration } = this.props;
-      if (duration) {
-        this.closeTimer = window.setTimeout(() => {
-          this.close();
-        }, duration * 1e3);
+    const [exactValue, setEaxctValue] = React.useState(
+      () => value || defaultValue || 0
+    );
+    React.useEffect(() => {
+      if (marks) {
+        const marksKeys = Object.keys(marks);
+        const list = marksKeys.map(parseFloat).sort((a2, b) => a2 - b).filter((point) => point >= min && point <= max);
+        setMarksList(list);
       }
-    }
-    clearCloseTimer() {
-      if (this.closeTimer) {
-        clearTimeout(this.closeTimer);
-        this.closeTimer = -1;
+    }, [marks]);
+    const scope = () => {
+      return max - min;
+    };
+    const classes = classNames(classPrefix2, {
+      [`${classPrefix2}-disabled`]: disabled,
+      [`${classPrefix2}-vertical`]: vertical
+    });
+    const containerClasses = classNames(`${classPrefix2}-container`, className, {
+      [`${classPrefix2}-container-vertical`]: vertical
+    });
+    const markClassName = React.useCallback(
+      (mark) => {
+        const classPrefix22 = "nut-range-mark";
+        let lowerBound = min;
+        let upperBound = max;
+        if (range2 && Array.isArray(current)) {
+          lowerBound = current[0];
+          upperBound = current[1];
+        } else {
+          upperBound = current;
+        }
+        const isActive = mark <= upperBound && mark >= lowerBound;
+        return [
+          `${classPrefix22}-text`,
+          `${isActive ? `${classPrefix22}-text-active` : ""}`
+        ].join(" ");
+      },
+      [range2, current, min, max]
+    );
+    const isRange = (val) => {
+      return !!range2 && Array.isArray(val);
+    };
+    const calcMainAxis = () => {
+      const modelVal = current;
+      if (isRange(modelVal)) {
+        return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
       }
-    }
-    clickCover() {
-      const { closeOnClickOverlay } = this.props;
-      if (closeOnClickOverlay) {
-        this.close();
+      return `${(modelVal - min) * 100 / scope()}%`;
+    };
+    const calcOffset = () => {
+      const modelVal = current;
+      if (isRange(modelVal)) {
+        return `${(modelVal[0] - min) * 100 / scope()}%`;
       }
-    }
-    componentDidMount() {
-      this.startCloseTimer();
-    }
-    componentWillUnmount() {
-      this.clearCloseTimer();
-    }
-    render() {
-      const {
-        id,
-        style,
-        icon,
-        title,
-        msg,
-        bottom,
-        center,
-        bgColor,
-        coverColor,
-        textAlignCenter,
-        size,
-        customClass,
-        cover,
-        type: type2
-      } = this.props;
-      const toastBem = cn("toast");
-      const classes = classNames({
-        "nut-toast-center": center,
-        "nut-toast-has-icon": icon,
-        "nut-toast-cover": cover,
-        "nut-toast-loading": type2 === "loading",
-        [`${customClass}`]: true,
-        [`nut-toast-${size}`]: true
-      });
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: `${toastBem()} ${classes}`,
-          id: `toast-${id}`,
-          style: {
-            bottom: center ? "auto" : `${bottom}`,
-            backgroundColor: cover ? coverColor : "",
-            ...style
-          },
-          onClick: () => {
-            this.clickCover();
-          },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: toastBem("inner"),
-              style: {
-                textAlign: textAlignCenter ? "center" : "left",
-                backgroundColor: bgColor
-              },
-              children: [
-                icon ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: toastBem("icon-wrapper"), children: icon }) : null,
-                title ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-toast-title", children: title }) : null,
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: toastBem("text"), children: msg })
-              ]
-            }
-          )
-        }
-      ) });
-    }
-  }, __publicField(_a, "newInstance"), _a);
-  Notification$1.newInstance = (properties, callback) => {
-    const element = document.createElement("div");
-    if (properties.id) {
-      element.setAttribute("id", `${properties.id}`);
-    }
-    document.body.appendChild(element);
-    let called = false;
-    function ref(instance) {
-      if (called) {
-        return;
-      }
-      called = true;
-      callback({
-        component: instance,
-        destroy() {
-          unmount(element);
-          element && element.parentNode && element.parentNode.removeChild(element);
-        }
-      });
-    }
-    render(/* @__PURE__ */ jsxRuntimeExports.jsx(Notification$1, { ...properties, ref }), element);
-  };
-  let messageInstance$1 = null;
-  const options$1 = {
-    msg: "",
-    id: "",
-    style: {},
-    duration: 1.5,
-    // 时长,duration为0则一直展示
-    center: true,
-    // toast是否居中展示
-    type: "text",
-    title: "",
-    customClass: "",
-    // 自定义样式名
-    bottom: "30px",
-    // center为false时生效，距离底部位置
-    size: "base",
-    // 设置字体大小，默认base,可选large\small\base
-    icon: null,
-    iconSize: "20",
-    textAlignCenter: true,
-    // 文字是否居中显示,true为居中，false为left
-    loadingRotate: true,
-    // 未实现
-    bgColor: "rgba(0, 0, 0, .8)",
-    onClose: () => {
-    },
-    cover: false,
-    // 是否展示透明遮罩层
-    coverColor: "rgba(0, 0, 0, 0)",
-    // 遮罩颜色设定
-    closeOnClickOverlay: false
-    // 是否点击遮罩可关闭
-  };
-  function getInstance$1(props, callback) {
-    if (messageInstance$1) {
-      messageInstance$1.destroy();
-      messageInstance$1 = null;
-    }
-    Notification$1.newInstance(props, (notification) => {
-      return callback && callback(notification);
-    });
-  }
-  function notice$1(opts) {
-    function close() {
-      if (messageInstance$1) {
-        messageInstance$1.destroy();
-        messageInstance$1 = null;
-      }
-    }
-    const opts2 = { ...options$1, ...opts, onClose: close };
-    getInstance$1(opts2, (notification) => {
-      messageInstance$1 = notification;
-    });
-  }
-  const errorMsg$1 = (msg) => {
-    if (!msg) {
-      console.warn("[NutUI Toast]: msg cannot be null");
-    }
-  };
-  const Toast = {
-    text(msg, option = {}) {
-      errorMsg$1(msg);
-      return notice$1({ msg, type: "text", ...option });
-    },
-    success(msg, option = {}) {
-      errorMsg$1(msg);
-      return notice$1({ msg, icon: "success", type: "success", ...option });
-    },
-    fail(msg, option = {}) {
-      errorMsg$1(msg);
-      return notice$1({ msg, icon: "failure", type: "fail", ...option });
-    },
-    loading(msg, option = {}) {
-      errorMsg$1(msg);
-      return notice$1({ msg, icon: /* @__PURE__ */ jsxRuntimeExports.jsx(k$3, {}), type: "loading", ...option });
-    },
-    warn(msg, option = {}) {
-      errorMsg$1(msg);
-      return notice$1({ msg, icon: "tips", type: "warn", ...option });
-    },
-    customIcon(msg, option = {}) {
-      errorMsg$1(msg);
-      return notice$1({ msg, ...option });
-    },
-    hide() {
-      if (messageInstance$1) {
-        messageInstance$1.destroy();
-        messageInstance$1 = null;
-      }
-    }
-  };
-  const defaultProps$M = {
-    range: false,
-    hiddenRange: false,
-    hiddenTag: false,
-    min: 0,
-    max: 100,
-    step: 1,
-    modelValue: 0,
-    vertical: false,
-    marks: {}
-  };
-  let startValue;
-  let currentValue;
-  const Range = (props) => {
-    const { locale } = useConfig();
-    const {
-      className,
-      range: range2,
-      disabled,
-      activeColor,
-      inactiveColor,
-      buttonColor,
-      hiddenRange,
-      hiddenTag,
-      modelValue,
-      button,
-      vertical,
-      marks,
-      dragStart,
-      dragEnd,
-      onChange,
-      onDragStart,
-      onDragEnd,
-      minDesc,
-      maxDesc,
-      curValueDesc
-    } = { ...defaultProps$M, ...props };
-    let { min, max, step } = { ...defaultProps$M, ...props };
-    min = Number(min);
-    max = Number(max);
-    step = Number(step);
-    const [buttonIndex, SetButtonIndex] = React.useState(0);
-    const [initValue, SetInitValue] = React.useState();
-    const [dragStatus, SetDragStatus] = React.useState("start");
-    const touch = useTouch();
-    const root2 = React.useRef(null);
-    const [marksList, SetMarksList] = React.useState([]);
-    React.useEffect(() => {
-      if (typeof modelValue === "number") {
-        if (!range2 && (modelValue < min || modelValue > max)) {
-          SetInitValue(0);
-          Toast.text(`${modelValue} ${locale.range.rangeText}`);
-          return;
-        }
-        SetInitValue(modelValue);
-      }
-    }, [modelValue]);
-    React.useEffect(() => {
-      if (marks) {
-        const marksKeys = Object.keys(marks);
-        const list = marksKeys.map(parseFloat).sort((a2, b) => a2 - b).filter((point) => point >= min && point <= max);
-        SetMarksList(list);
-      }
-    }, [marks]);
-    const scope = () => {
-      return Number(max) - Number(min);
-    };
-    const classes = React.useCallback(() => {
-      const prefixCls2 = "nut-range";
-      return [
-        prefixCls2,
-        `${disabled ? `${prefixCls2}-disabled` : ""}`,
-        `${vertical ? `${prefixCls2}-vertical` : ""}`,
-        `${!hiddenRange ? `${prefixCls2}-show-number` : ""}`
-      ].filter(Boolean).join(" ");
-    }, [disabled, vertical, hiddenRange]);
-    const containerClasses = React.useCallback(() => {
-      const prefixCls2 = "nut-range-container";
-      return [prefixCls2, `${vertical ? `${prefixCls2}-vertical` : ""}`, className].filter(Boolean).join(" ");
-    }, [vertical, className]);
-    const markClassName = React.useCallback(
-      (mark) => {
-        const classPrefix2 = "nut-range-mark";
-        let lowerBound = Number(min);
-        let upperBound = Number(max);
-        if (range2) {
-          const [left, right] = modelValue;
-          lowerBound = left;
-          upperBound = right;
-        } else {
-          upperBound = modelValue;
-        }
-        const isActive = mark <= upperBound && mark >= lowerBound;
-        return [
-          `${classPrefix2}-text`,
-          `${isActive ? `${classPrefix2}-text-active` : ""}`
-        ].filter(Boolean).join(" ");
-      },
-      [range2, modelValue, min, max]
-    );
-    const [rangeName, setRangeName] = React.useState(classes());
-    const [containerName, setContainerName] = React.useState(containerClasses());
-    React.useEffect(() => {
-      setRangeName(classes());
-      setContainerName(containerClasses());
-    }, [classes, containerClasses]);
-    const wrapperStyle = () => {
-      return {
-        background: inactiveColor
-      };
-    };
-    const buttonStyle = () => {
-      return {
-        borderColor: buttonColor
-      };
-    };
-    const isRange = (val) => {
-      return !!range2 && Array.isArray(val);
-    };
-    const calcMainAxis = () => {
-      const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-      if (isRange(modelVal)) {
-        return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
-      }
-      return `${(modelVal - Number(min)) * 100 / scope()}%`;
-    };
-    const calcOffset = () => {
-      const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-      if (isRange(modelVal)) {
-        return `${(modelVal[0] - Number(min)) * 100 / scope()}%`;
-      }
-      return `0%`;
-    };
-    const barStyle = () => {
-      if (vertical) {
-        return {
-          height: calcMainAxis(),
-          top: calcOffset(),
-          background: activeColor,
-          transition: dragStatus ? "none" : void 0
-        };
+      return `0%`;
+    };
+    const barStyle = () => {
+      if (vertical) {
+        return {
+          height: calcMainAxis(),
+          top: calcOffset(),
+          transition: dragStatus ? "none" : void 0
+        };
       }
       return {
         width: calcMainAxis(),
         left: calcOffset(),
-        background: activeColor,
         transition: dragStatus ? "none" : void 0
       };
     };
     const marksStyle = (mark) => {
       let style = {
-        left: `${(mark - Number(min)) / scope() * 100}%`
+        left: `${(mark - min) / scope() * 100}%`
       };
       if (vertical) {
         style = {
-          top: `${(mark - Number(min)) / scope() * 100}%`
+          top: `${(mark - min) / scope() * 100}%`
         };
       }
       return style;
     };
-    const tickStyle = (mark) => {
-      let lowerBound = Number(min);
-      let upperBound = Number(max);
-      if (range2) {
-        const [left, right] = modelValue;
-        lowerBound = left;
-        upperBound = right;
+    const tickClass = (mark) => {
+      if (range2 && Array.isArray(current)) {
+        return mark <= current[1] && mark >= current[0];
       }
-      const isActive = mark <= upperBound && mark >= lowerBound;
-      const style = {
-        background: !isActive ? inactiveColor : activeColor
-      };
-      return style;
+      return mark <= current;
     };
-    const format2 = (value) => {
-      value = Math.max(+min, Math.min(value, +max));
-      return Math.round(value / +step) * +step;
+    const format2 = (value2) => {
+      value2 = Math.max(+min, Math.min(value2, +max));
+      return Math.round(value2 / +step) * +step;
     };
     const isSameValue = (newValue, oldValue) => {
       return JSON.stringify(newValue) === JSON.stringify(oldValue);
     };
-    const handleOverlap = (value) => {
-      if (value[0] > value[1]) {
-        return value.slice(0).reverse();
+    const handleOverlap = (value2) => {
+      if (value2[0] > value2[1]) {
+        return value2.slice(0).reverse();
       }
-      return value;
+      return value2;
     };
-    const updateValue = (value, end) => {
-      if (isRange(value)) {
-        value = handleOverlap(value).map(format2);
+    const updateValue = (value2, end) => {
+      if (isRange(value2)) {
+        value2 = handleOverlap(value2).map(format2);
       } else {
-        value = format2(value);
-      }
-      const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-      if (!isSameValue(value, modelVal)) {
-        SetInitValue(value);
+        value2 = format2(value2);
       }
-      if ((marks || end) && !isSameValue(value, startValue)) {
-        onChange && onChange(value);
+      if (!isSameValue(value2, current)) {
+        setCurrent(value2);
       }
+      end && onEnd && onEnd(value2);
     };
     const click = (event) => {
       if (disabled || !root2.current) {
         return;
       }
-      SetDragStatus("");
+      setDragStatus("");
       const rect = getRect(root2.current);
       let delta = event.clientX - rect.left;
       let total = rect.width;
@@ -18927,18 +18638,18 @@ Please add \`${key}Action\` when creating your handler.`);
         delta = event.clientY - rect.top;
         total = rect.height;
       }
-      const value = Number(min) + delta / total * scope();
-      currentValue = initValue || initValue === 0 ? initValue : modelValue;
-      if (isRange(currentValue)) {
-        const [left, right] = currentValue;
+      const value2 = min + delta / total * scope();
+      setEaxctValue(current);
+      if (isRange(current)) {
+        const [left, right] = current;
         const middle = (left + right) / 2;
-        if (value <= middle) {
-          updateValue([value, right], true);
+        if (value2 <= middle) {
+          updateValue([value2, right], true);
         } else {
-          updateValue([left, value], true);
+          updateValue([left, value2], true);
         }
       } else {
-        updateValue(value, true);
+        updateValue(value2, true);
       }
     };
     const onTouchStart = (event) => {
@@ -18946,24 +18657,24 @@ Please add \`${key}Action\` when creating your handler.`);
         return;
       }
       touch.start(event);
-      currentValue = initValue || initValue === 0 ? initValue : modelValue;
-      if (isRange(currentValue)) {
-        startValue = currentValue.map(format2);
+      setEaxctValue(current);
+      if (isRange(current)) {
+        setStartValue(current.map(format2));
       } else {
-        startValue = format2(currentValue);
+        setStartValue(format2(current));
       }
-      SetDragStatus("start");
+      setDragStatus("start");
     };
     const onTouchMove = (event) => {
+      event.stopPropagation();
       if (disabled || !root2.current) {
         return;
       }
       if (dragStatus === "start") {
-        dragStart && dragStart();
-        onDragStart && onDragStart();
+        onStart && onStart();
       }
       touch.move(event);
-      SetDragStatus("draging");
+      setDragStatus("draging");
       const rect = getRect(root2.current);
       let delta = touch.deltaX;
       let total = rect.width;
@@ -18973,121 +18684,91 @@ Please add \`${key}Action\` when creating your handler.`);
         total = rect.height;
         diff = delta / total * scope();
       }
+      let newValue;
       if (isRange(startValue)) {
-        currentValue[buttonIndex] = startValue[buttonIndex] + diff;
+        newValue = exactValue.slice();
+        newValue[buttonIndex] = startValue[buttonIndex] + diff;
       } else {
-        currentValue = startValue + diff;
+        newValue = startValue + diff;
       }
-      updateValue(currentValue);
+      setEaxctValue(newValue);
+      updateValue(newValue);
     };
     const onTouchEnd = (event) => {
       if (disabled) {
         return;
       }
       if (dragStatus === "draging") {
-        updateValue(currentValue, true);
-        dragEnd && dragEnd();
-        onDragEnd && onDragEnd();
+        updateValue(current, true);
       }
-      SetDragStatus("");
+      setDragStatus("");
     };
     const curValue = (idx) => {
-      const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-      const value = typeof idx === "number" ? modelVal[idx] : modelVal;
-      return value;
+      const modelVal = current;
+      const value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+      return value2;
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${containerName}`, children: [
-      !hiddenRange ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min", children: minDesc || +min }) : null,
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          ref: root2,
-          style: wrapperStyle(),
-          className: `${rangeName}`,
-          onClick: (e) => {
-            click(e);
-          },
-          children: [
-            marksList.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-mark", children: marksList.map((marks2) => {
-              return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "span",
-                {
-                  className: markClassName(marks2),
-                  style: marksStyle(marks2),
-                  children: [
-                    marks2,
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "nut-range-tick", style: tickStyle(marks2) })
-                  ]
-                },
-                marks2
-              );
-            }) }) : null,
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-bar", style: barStyle(), children: range2 ? [0, 1].map((item, index) => {
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  role: "slider",
-                  className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+    const renderButton = (index) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: button || /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-button", children: currentDescription !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "number", children: currentDescription ? currentDescription(curValue(index)) : curValue(index) }) }) });
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [
+      minDescription !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min", children: minDescription || min }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: root2, className: classes, onClick: (e) => click(e), children: [
+        marksList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-mark", children: marksList.map((marks2) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "span",
+            {
+              className: markClassName(marks2),
+              style: marksStyle(marks2),
+              children: [
+                marks2,
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "span",
+                  {
+                    className: classNames("nut-range-tick", {
+                      active: tickClass(marks2)
+                    })
+                  }
+                )
+              ]
+            },
+            marks2
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-bar", style: barStyle(), children: range2 ? [0, 1].map((item, index) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
                   ${index === 1 ? "nut-range-button-wrapper-right" : ""}`,
-                  tabIndex: disabled ? -1 : 0,
-                  "aria-valuemin": +min,
-                  "aria-valuenow": curValue(index),
-                  "aria-valuemax": +max,
-                  "aria-orientation": vertical ? "vertical" : "horizontal",
-                  onTouchStart: (e) => {
-                    if (typeof index === "number") {
-                      SetButtonIndex(index);
-                    }
-                    onTouchStart(e);
-                  },
-                  onTouchMove: (e) => {
-                    onTouchMove(e);
-                  },
-                  onTouchEnd: (e) => {
-                    onTouchEnd();
-                  },
-                  onTouchCancel: (e) => {
-                    onTouchEnd();
-                  },
-                  onClick: (e) => {
-                    e.stopPropagation();
-                  },
-                  children: button || /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-button", style: buttonStyle(), children: !hiddenTag ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "number", children: curValueDesc || curValue(index) }) : null })
-                },
-                index
-              );
-            }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                role: "slider",
-                className: "nut-range-button-wrapper",
-                tabIndex: disabled ? -1 : 0,
-                "aria-valuemin": +min,
-                "aria-valuenow": curValue(),
-                "aria-valuemax": +max,
-                "aria-orientation": vertical ? "vertical" : "horizontal",
-                onTouchStart: (e) => {
-                  onTouchStart(e);
-                },
-                onTouchMove: (e) => {
-                  onTouchMove(e);
-                },
-                onTouchEnd: (e) => {
-                  onTouchEnd();
-                },
-                onTouchCancel: (e) => {
-                  onTouchEnd();
-                },
-                onClick: (e) => {
-                  e.stopPropagation();
-                },
-                children: button || /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-range-button", style: buttonStyle(), children: !hiddenTag ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "number", children: curValueDesc || curValue() }) : null })
-              }
-            ) })
-          ]
-        }
-      ),
-      !hiddenRange ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max", children: maxDesc || +max }) : null
+              onTouchStart: (e) => {
+                if (typeof index === "number") {
+                  setButtonIndex(index);
+                }
+                onTouchStart(e);
+              },
+              onTouchMove: (e) => onTouchMove(e),
+              onTouchEnd: (e) => onTouchEnd(),
+              onTouchCancel: (e) => onTouchEnd(),
+              onClick: (e) => e.stopPropagation(),
+              children: renderButton(index)
+            },
+            index
+          );
+        }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "nut-range-button-wrapper",
+            onTouchStart: (e) => onTouchStart(e),
+            onTouchMove: (e) => onTouchMove(e),
+            onTouchEnd: (e) => onTouchEnd(),
+            onTouchCancel: (e) => onTouchEnd(),
+            onClick: (e) => e.stopPropagation(),
+            children: renderButton()
+          }
+        ) })
+      ] }),
+      maxDescription !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max", children: maxDescription || max })
     ] });
   };
   Range.defaultProps = defaultProps$M;
@@ -20591,6 +20272,58 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   ActionSheet.defaultProps = defaultProps$D;
   ActionSheet.displayName = "NutActionSheet";
+  const fullClone = {
+    ...ReactDOM__namespace
+  };
+  const { version, render: reactRender, unmountComponentAtNode } = fullClone;
+  let createRoot;
+  try {
+    const mainVersion = Number((version || "").split(".")[0]);
+    if (mainVersion >= 18 && fullClone.createRoot) {
+      createRoot = fullClone.createRoot;
+    }
+  } catch (e) {
+  }
+  function toggleWarning(skip) {
+    const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
+    if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === "object") {
+      __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+    }
+  }
+  const MARK = "__nutui_react_root__";
+  function legacyRender(node, container) {
+    reactRender(node, container);
+  }
+  function concurrentRender(node, container) {
+    toggleWarning(true);
+    const root2 = container[MARK] || createRoot(container);
+    toggleWarning(false);
+    root2.render(node);
+    container[MARK] = root2;
+  }
+  function render(node, container) {
+    if (createRoot) {
+      concurrentRender(node, container);
+      return;
+    }
+    legacyRender(node, container);
+  }
+  function legacyUnmount(container) {
+    return unmountComponentAtNode(container);
+  }
+  async function concurrentUnmount(container) {
+    return Promise.resolve().then(() => {
+      var _a2;
+      (_a2 = container[MARK]) == null ? void 0 : _a2.unmount();
+      delete container[MARK];
+    });
+  }
+  function unmount(container) {
+    if (createRoot) {
+      return concurrentUnmount(container);
+    }
+    return legacyUnmount(container);
+  }
   function ConfirmDialog(props) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { ...props, children: props.content });
   }
@@ -21637,7 +21370,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   NoticeBar.defaultProps = defaultProps$y;
   NoticeBar.displayName = "NutNoticeBar";
-  class Notification extends React__namespace.PureComponent {
+  let Notification$1 = (_a = class extends React__namespace.PureComponent {
     constructor(props) {
       super(props);
       __publicField(this, "closeTimer");
@@ -21728,9 +21461,8 @@ Please add \`${key}Action\` when creating your handler.`);
         }
       ) });
     }
-  }
-  __publicField(Notification, "newInstance");
-  Notification.newInstance = (properties, callback) => {
+  }, __publicField(_a, "newInstance"), _a);
+  Notification$1.newInstance = (properties, callback) => {
     const element = document.createElement("div");
     const id = properties.id ? properties.id : `${(/* @__PURE__ */ new Date()).getTime()}`;
     element.id = id;
@@ -21752,10 +21484,10 @@ Please add \`${key}Action\` when creating your handler.`);
         }
       });
     }
-    render(/* @__PURE__ */ jsxRuntimeExports.jsx(Notification, { ...properties, ref }), element);
+    render(/* @__PURE__ */ jsxRuntimeExports.jsx(Notification$1, { ...properties, ref }), element);
   };
-  let messageInstance = null;
-  const options = {
+  let messageInstance$1 = null;
+  const options$1 = {
     msg: "",
     id: "",
     duration: 3e3,
@@ -21769,51 +21501,51 @@ Please add \`${key}Action\` when creating your handler.`);
     onClick: () => {
     }
   };
-  function getInstance(props, callback) {
-    if (messageInstance) {
-      messageInstance.destroy();
-      messageInstance = null;
+  function getInstance$1(props, callback) {
+    if (messageInstance$1) {
+      messageInstance$1.destroy();
+      messageInstance$1 = null;
     }
-    Notification.newInstance(props, (notification) => {
+    Notification$1.newInstance(props, (notification) => {
       return callback && callback(notification);
     });
   }
-  function notice(opts) {
-    opts = { ...options, ...opts };
-    getInstance(opts, (notification) => {
-      messageInstance = notification;
+  function notice$1(opts) {
+    opts = { ...options$1, ...opts };
+    getInstance$1(opts, (notification) => {
+      messageInstance$1 = notification;
     });
   }
-  const errorMsg = (msg) => {
+  const errorMsg$1 = (msg) => {
     if (!msg) {
       console.warn("[NutUI Notify]: msg不能为空");
     }
   };
   const Notify = {
     text(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, type: "base", ...option });
+      errorMsg$1(msg);
+      return notice$1({ msg, type: "base", ...option });
     },
     success(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, type: "success", ...option });
+      errorMsg$1(msg);
+      return notice$1({ msg, type: "success", ...option });
     },
     primary(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, type: "primary", ...option });
+      errorMsg$1(msg);
+      return notice$1({ msg, type: "primary", ...option });
     },
     danger(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, type: "danger", ...option });
+      errorMsg$1(msg);
+      return notice$1({ msg, type: "danger", ...option });
     },
     warn(msg, option = {}) {
-      errorMsg(msg);
-      return notice({ msg, type: "warning", ...option });
+      errorMsg$1(msg);
+      return notice$1({ msg, type: "warning", ...option });
     },
     hide() {
-      if (messageInstance) {
-        messageInstance.destroy();
-        messageInstance = null;
+      if (messageInstance$1) {
+        messageInstance$1.destroy();
+        messageInstance$1 = null;
       }
     }
   };
@@ -22587,6 +22319,218 @@ Please add \`${key}Action\` when creating your handler.`);
   });
   Swipe.defaultProps = defaultProps$t;
   Swipe.displayName = "NutSwipe";
+  class Notification extends React__namespace.PureComponent {
+    constructor(props) {
+      super(props);
+      __publicField(this, "closeTimer");
+      this.close = this.close.bind(this);
+      this.startCloseTimer = this.startCloseTimer.bind(this);
+      this.clearCloseTimer = this.clearCloseTimer.bind(this);
+      this.close = this.close.bind(this);
+      this.clickCover = this.clickCover.bind(this);
+    }
+    close() {
+      this.clearCloseTimer();
+      this.props.onClose();
+    }
+    startCloseTimer() {
+      const { duration } = this.props;
+      if (duration) {
+        this.closeTimer = window.setTimeout(() => {
+          this.close();
+        }, duration * 1e3);
+      }
+    }
+    clearCloseTimer() {
+      if (this.closeTimer) {
+        clearTimeout(this.closeTimer);
+        this.closeTimer = -1;
+      }
+    }
+    clickCover() {
+      const { closeOnClickOverlay } = this.props;
+      if (closeOnClickOverlay) {
+        this.close();
+      }
+    }
+    componentDidMount() {
+      this.startCloseTimer();
+    }
+    componentWillUnmount() {
+      this.clearCloseTimer();
+    }
+    render() {
+      const {
+        id,
+        style,
+        icon,
+        title,
+        msg,
+        bottom,
+        center,
+        bgColor,
+        coverColor,
+        textAlignCenter,
+        size,
+        customClass,
+        cover,
+        type: type2
+      } = this.props;
+      const toastBem = cn("toast");
+      const classes = classNames({
+        "nut-toast-center": center,
+        "nut-toast-has-icon": icon,
+        "nut-toast-cover": cover,
+        "nut-toast-loading": type2 === "loading",
+        [`${customClass}`]: true,
+        [`nut-toast-${size}`]: true
+      });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `${toastBem()} ${classes}`,
+          id: `toast-${id}`,
+          style: {
+            bottom: center ? "auto" : `${bottom}`,
+            backgroundColor: cover ? coverColor : "",
+            ...style
+          },
+          onClick: () => {
+            this.clickCover();
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: toastBem("inner"),
+              style: {
+                textAlign: textAlignCenter ? "center" : "left",
+                backgroundColor: bgColor
+              },
+              children: [
+                icon ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: toastBem("icon-wrapper"), children: icon }) : null,
+                title ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-toast-title", children: title }) : null,
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: toastBem("text"), children: msg })
+              ]
+            }
+          )
+        }
+      ) });
+    }
+  }
+  __publicField(Notification, "newInstance");
+  Notification.newInstance = (properties, callback) => {
+    const element = document.createElement("div");
+    if (properties.id) {
+      element.setAttribute("id", `${properties.id}`);
+    }
+    document.body.appendChild(element);
+    let called = false;
+    function ref(instance) {
+      if (called) {
+        return;
+      }
+      called = true;
+      callback({
+        component: instance,
+        destroy() {
+          unmount(element);
+          element && element.parentNode && element.parentNode.removeChild(element);
+        }
+      });
+    }
+    render(/* @__PURE__ */ jsxRuntimeExports.jsx(Notification, { ...properties, ref }), element);
+  };
+  let messageInstance = null;
+  const options = {
+    msg: "",
+    id: "",
+    style: {},
+    duration: 1.5,
+    // 时长,duration为0则一直展示
+    center: true,
+    // toast是否居中展示
+    type: "text",
+    title: "",
+    customClass: "",
+    // 自定义样式名
+    bottom: "30px",
+    // center为false时生效，距离底部位置
+    size: "base",
+    // 设置字体大小，默认base,可选large\small\base
+    icon: null,
+    iconSize: "20",
+    textAlignCenter: true,
+    // 文字是否居中显示,true为居中，false为left
+    loadingRotate: true,
+    // 未实现
+    bgColor: "rgba(0, 0, 0, .8)",
+    onClose: () => {
+    },
+    cover: false,
+    // 是否展示透明遮罩层
+    coverColor: "rgba(0, 0, 0, 0)",
+    // 遮罩颜色设定
+    closeOnClickOverlay: false
+    // 是否点击遮罩可关闭
+  };
+  function getInstance(props, callback) {
+    if (messageInstance) {
+      messageInstance.destroy();
+      messageInstance = null;
+    }
+    Notification.newInstance(props, (notification) => {
+      return callback && callback(notification);
+    });
+  }
+  function notice(opts) {
+    function close() {
+      if (messageInstance) {
+        messageInstance.destroy();
+        messageInstance = null;
+      }
+    }
+    const opts2 = { ...options, ...opts, onClose: close };
+    getInstance(opts2, (notification) => {
+      messageInstance = notification;
+    });
+  }
+  const errorMsg = (msg) => {
+    if (!msg) {
+      console.warn("[NutUI Toast]: msg cannot be null");
+    }
+  };
+  const Toast = {
+    text(msg, option = {}) {
+      errorMsg(msg);
+      return notice({ msg, type: "text", ...option });
+    },
+    success(msg, option = {}) {
+      errorMsg(msg);
+      return notice({ msg, icon: "success", type: "success", ...option });
+    },
+    fail(msg, option = {}) {
+      errorMsg(msg);
+      return notice({ msg, icon: "failure", type: "fail", ...option });
+    },
+    loading(msg, option = {}) {
+      errorMsg(msg);
+      return notice({ msg, icon: /* @__PURE__ */ jsxRuntimeExports.jsx(k$3, {}), type: "loading", ...option });
+    },
+    warn(msg, option = {}) {
+      errorMsg(msg);
+      return notice({ msg, icon: "tips", type: "warn", ...option });
+    },
+    customIcon(msg, option = {}) {
+      errorMsg(msg);
+      return notice({ msg, ...option });
+    },
+    hide() {
+      if (messageInstance) {
+        messageInstance.destroy();
+        messageInstance = null;
+      }
+    }
+  };
   const defaultProps$s = {
     ...ComponentDefaults,
     type: "shake",
@@ -22863,9 +22807,11 @@ Please add \`${key}Action\` when creating your handler.`);
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${classPrefix2}__progress-bar-wrapper`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Range,
             {
-              modelValue: percent,
-              hiddenTag: true,
-              hiddenRange: true,
+              value: percent,
+              onChange: (val) => setPercent(val),
+              currentDescription: null,
+              maxDescription: null,
+              minDescription: null,
               "inactive-color": "#cccccc",
               "active-color": "#fa2c19"
             }