@nutui/nutui-react-taro 2.0.0-alpha.7 → 2.0.0-alpha.8

package/dist/nutui.react.mjs

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:36:41 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.8 Fri May 12 2023 19:09:01 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -6755,6 +6755,10 @@ const TabPane = (props) => {
   );
   return children ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes, children: !disabled && children }) : null;
 };
+function useForceUpdate$1() {
+  const [, updateState] = React__default.useState();
+  return React__default.useCallback(() => updateState({}), []);
+}
 const defaultProps$17 = {
   ...ComponentDefaults,
   tabStyle: {},
@@ -6810,6 +6814,7 @@ const Tabs = (props) => {
     return titles2;
   };
   const titles = useRef(getTitles());
+  const forceUpdate = useForceUpdate$1();
   useEffect(() => {
     titles.current = getTitles();
     let current = "";
@@ -6818,8 +6823,10 @@ const Tabs = (props) => {
         current = value;
       }
     });
-    if (current !== "") {
+    if (current !== "" && current !== value) {
       setValue(current);
+    } else {
+      forceUpdate();
     }
   }, [children]);
   const classes = classNames(
@@ -8751,7 +8758,6 @@ const defaultProps$10 = {
   popup: true,
   visible: false,
   options: [],
-  value: [],
   title: "",
   optionKey: { textKey: "text", valueKey: "value", childrenKey: "children" },
   format: {},
@@ -8766,8 +8772,7 @@ const defaultProps$10 = {
   onChange: () => {
   },
   onPathChange: () => {
-  },
-  ...Popup.defaultProps
+  }
 };
 const InternalCascader = (props, ref) => {
   const {
@@ -8777,6 +8782,7 @@ const InternalCascader = (props, ref) => {
     visible,
     options,
     value,
+    defaultValue,
     title,
     optionKey: optionKey2,
     format: format2,
@@ -8792,6 +8798,15 @@ const InternalCascader = (props, ref) => {
   const [tabvalue, setTabvalue] = useState("c1");
   const [optionsData, setOptionsData] = useState([]);
   const isLazy = () => state.configs.lazy && Boolean(state.configs.onLoad);
+  const [innerValue, setInnerValue] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: defaultValue,
+    onChange: (val) => {
+      var _a;
+      (_a = props.onChange) == null ? void 0 : _a.call(props, val);
+    }
+  });
   const [state] = useState({
     optionsData: [],
     panes: [
@@ -8801,7 +8816,6 @@ const InternalCascader = (props, ref) => {
         paneKey: ""
       }
     ],
-    innerValue: value,
     tree: new Tree$1([], {}),
     tabsCursor: 0,
     // 选中的tab项
@@ -8821,12 +8835,12 @@ const InternalCascader = (props, ref) => {
   });
   useEffect(() => {
     initData();
-  }, [options]);
+  }, [options, format2]);
   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) {
@@ -8861,24 +8875,24 @@ const InternalCascader = (props, ref) => {
     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 _a;
           const parent2 = await p;
           await invokeLazyLoad(parent2);
@@ -8894,7 +8908,7 @@ const InternalCascader = (props, ref) => {
         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;
@@ -8951,6 +8965,7 @@ const InternalCascader = (props, ref) => {
         const optionParams = pathNodes.map((item) => item.value);
         onChange(optionParams, pathNodes);
         onPathChange(optionParams, pathNodes);
+        setInnerValue(optionParams);
       }
       setOptionsData(state.panes);
       close();
@@ -9644,7 +9659,7 @@ const InternalPicker = (props, ref) => {
       (_a = props.onConfirm) == null ? void 0 : _a.call(props, setSelectedOptions(), val);
     }
   });
-  const [currentValue2, setCurrentValue] = useState([]);
+  const [currentValue, setCurrentValue] = useState([]);
   const [columnIndex, setColumnIndex] = useState(0);
   const pickerRef = useRef(null);
   const [refs, setRefs] = useRefs();
@@ -9834,7 +9849,7 @@ const InternalPicker = (props, ref) => {
     setPickingStatus(false);
   };
   const pickerChange = (data) => {
-    const prevDefaultValue = currentValue2;
+    const prevDefaultValue = currentValue;
     let changeIndex = 0;
     const list = data.detail.value;
     for (let i = 0, len = list.length; i < len; i++) {
@@ -9877,7 +9892,7 @@ const InternalPicker = (props, ref) => {
           PickerView,
           {
             ref: pickerRef,
-            value: currentValue2,
+            value: currentValue,
             immediateChange: true,
             onPickStart: pickerStart,
             onChange: pickerChange,
@@ -11724,289 +11739,103 @@ Radio.defaultProps = defaultProps$P;
 Radio.displayName = "NutRadio";
 Radio.RadioGroup = RadioGroup;
 const defaultProps$O = {
-  id: "",
-  style: {},
-  icon: null,
-  iconSize: "20",
-  msg: "",
-  bottom: "30px",
-  // center为false时生效，距离底部位置
-  duration: 2,
-  // 时长,duration为0则一直展示
-  center: true,
-  // toast是否居中展示
-  type: "text",
-  title: "",
-  customClass: "",
-  // 自定义样式名
-  size: "base",
-  // 设置字体大小，默认base,可选large\small\base
-  textAlignCenter: true,
-  // 文字是否居中显示,true为居中，false为left
-  bgColor: "rgba(0, 0, 0, .8)",
-  cover: false,
-  // 是否展示透明遮罩层
-  coverColor: "rgba(0, 0, 0, 0)",
-  // 遮罩颜色设定
-  closeOnClickOverlay: false,
-  // 是否点击遮罩可关闭
-  visible: false,
-  onClose: () => {
-  }
-  // 未实现
-};
-const Toast = (props) => {
-  const {
-    children,
-    id,
-    style,
-    icon,
-    iconSize,
-    msg,
-    bottom,
-    duration,
-    center,
-    type,
-    title,
-    customClass,
-    size,
-    textAlignCenter,
-    bgColor,
-    cover,
-    coverColor,
-    closeOnClickOverlay,
-    visible,
-    onClose,
-    ...rest
-  } = { ...defaultProps$O, ...props };
-  let timer;
-  const [openState, SetOpenState] = useState(false);
-  useEffect(() => {
-    if (visible) {
-      SetOpenState(true);
-      show();
-    } else {
-      hide();
-    }
-  }, [visible]);
-  const clearTimer = () => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
-    }
-  };
-  const hide = () => {
-    SetOpenState(false);
-    onClose();
-  };
-  const show = () => {
-    clearTimer();
-    if (duration) {
-      timer = window.setTimeout(() => {
-        hide();
-      }, duration * 1e3);
-    }
-  };
-  const clickCover = () => {
-    if (closeOnClickOverlay) {
-      hide();
-    }
-  };
-  const toastBem = cn("toast");
-  const hasIcon = () => {
-    if (type !== "text") {
-      return true;
-    }
-    return !!icon;
-  };
-  const iconName = () => {
-    if (icon) {
-      return icon;
-    }
-    return {
-      success: /* @__PURE__ */ jsxRuntimeExports.jsx(a$4, { color: "#ffffff", width: iconSize, height: iconSize }),
-      fail: /* @__PURE__ */ jsxRuntimeExports.jsx(a$l, { color: "#ffffff", width: iconSize, height: iconSize }),
-      warn: /* @__PURE__ */ jsxRuntimeExports.jsx(a$3, { color: "#ffffff", width: iconSize, height: iconSize }),
-      loading: /* @__PURE__ */ jsxRuntimeExports.jsx(r$f, { color: "#ffffff", width: iconSize, height: iconSize })
-    }[type];
-  };
-  const classes = classNames({
-    "nut-toast-center": center,
-    "nut-toast-has-icon": icon,
-    "nut-toast-cover": cover,
-    "nut-toast-loading": type === "loading",
-    [`${customClass}`]: true,
-    [`nut-toast-${size}`]: true
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: openState ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      className: `${toastBem()} ${classes}`,
-      id,
-      style: {
-        bottom: center ? "auto" : `${bottom}`,
-        backgroundColor: cover ? coverColor : "",
-        ...style
-      },
-      onClick: () => {
-        clickCover();
-      },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: toastBem("inner"),
-          style: {
-            textAlign: textAlignCenter ? "center" : "left",
-            backgroundColor: bgColor
-          },
-          children: [
-            hasIcon() ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: toastBem("icon-wrapper"), children: iconName() }) : null,
-            title ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-toast-title", children: title }) : null,
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: toastBem("text"), children: msg })
-          ]
-        }
-      )
-    }
-  ) : null });
-};
-Toast.defaultProps = defaultProps$O;
-Toast.displayName = "NutToast";
-const defaultProps$N = {
+  ...ComponentDefaults,
   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$1();
   const {
     className,
     range,
     disabled,
-    activeColor,
-    inactiveColor,
-    buttonColor,
-    hiddenRange,
-    hiddenTag,
-    modelValue,
     button,
     vertical,
     marks,
-    dragStart,
-    dragEnd,
     onChange,
-    onDragStart,
-    onDragEnd,
-    minDesc,
-    maxDesc,
-    curValueDesc
-  } = { ...defaultProps$N, ...props };
-  let { min, max, step } = { ...defaultProps$N, ...props };
-  min = Number(min);
-  max = Number(max);
-  step = Number(step);
-  const [buttonIndex, SetButtonIndex] = useState(0);
-  const [initValue, SetInitValue] = useState();
-  const [dragStatus, SetDragStatus] = useState("start");
+    onStart,
+    onEnd,
+    minDescription,
+    maxDescription,
+    currentDescription,
+    min,
+    max,
+    step,
+    value,
+    defaultValue
+  } = { ...defaultProps$O, ...props };
+  const classPrefix2 = "nut-range";
+  const [buttonIndex, setButtonIndex] = useState(0);
+  const [dragStatus, setDragStatus] = useState("start");
   const touch = useTouch();
   const root2 = useRef(null);
-  const [marksList, SetMarksList] = useState([]);
-  const [show, SetShow] = useState(false);
-  const [toastMsg, SetToastMsg] = useState("");
-  const toastShow = (msg) => {
-    SetToastMsg(msg);
-    SetShow(true);
+  const [marksList, setMarksList] = useState([]);
+  const [startValue, setStartValue] = useState(0);
+  const handleChange = (value2) => {
+    onChange && onChange(value2);
   };
-  useEffect(() => {
-    if (typeof modelValue === "number") {
-      if (!range && (modelValue < min || modelValue > max)) {
-        SetInitValue(0);
-        toastShow(`${modelValue} ${locale.range.rangeText}`);
-        return;
-      }
-      SetInitValue(modelValue);
-    }
-  }, [modelValue]);
+  const [current, setCurrent] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: handleChange
+  });
+  const [exactValue, setEaxctValue] = useState(
+    () => value || defaultValue || 0
+  );
   useEffect(() => {
     if (marks) {
       const marksKeys = Object.keys(marks);
       const list = marksKeys.map(parseFloat).sort((a2, b2) => a2 - b2).filter((point) => point >= min && point <= max);
-      SetMarksList(list);
+      setMarksList(list);
     }
   }, [marks]);
   const scope = () => {
-    return Number(max) - Number(min);
+    return max - min;
   };
-  const classes = 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 = useCallback(() => {
-    const prefixCls2 = "nut-range-container";
-    return [prefixCls2, `${vertical ? `${prefixCls2}-vertical` : ""}`, className].filter(Boolean).join(" ");
-  }, [vertical, className]);
+  const classes = classNames(classPrefix2, {
+    [`${classPrefix2}-disabled`]: disabled,
+    [`${classPrefix2}-vertical`]: vertical
+  });
+  const containerClasses = classNames(`${classPrefix2}-container`, className, {
+    [`${classPrefix2}-container-vertical`]: vertical
+  });
   const markClassName = useCallback(
     (mark) => {
-      const classPrefix2 = "nut-range-mark";
-      let lowerBound = Number(min);
-      let upperBound = Number(max);
-      if (range) {
-        const [left, right] = modelValue;
-        lowerBound = left;
-        upperBound = right;
+      const classPrefix22 = "nut-range-mark";
+      let lowerBound = min;
+      let upperBound = max;
+      if (range && Array.isArray(current)) {
+        lowerBound = current[0];
+        upperBound = current[1];
       } else {
-        upperBound = modelValue;
+        upperBound = current;
       }
       const isActive = mark <= upperBound && mark >= lowerBound;
       return [
-        `${classPrefix2}-text`,
-        `${isActive ? `${classPrefix2}-text-active` : ""}`
-      ].filter(Boolean).join(" ");
+        `${classPrefix22}-text`,
+        `${isActive ? `${classPrefix22}-text-active` : ""}`
+      ].join(" ");
     },
-    [range, modelValue, min, max]
+    [range, current, min, max]
   );
-  const [rangeName, setRangeName] = useState(classes());
-  const [containerName, setContainerName] = useState(containerClasses());
-  useEffect(() => {
-    setRangeName(classes());
-    setContainerName(containerClasses());
-  }, [classes, containerClasses]);
-  const wrapperStyle = () => {
-    return {
-      background: inactiveColor
-    };
-  };
-  const buttonStyle = () => {
-    return {
-      borderColor: buttonColor
-    };
-  };
   const isRange = (val) => {
     return !!range && Array.isArray(val);
   };
   const calcMainAxis = () => {
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    const modelVal = current;
     if (isRange(modelVal)) {
       return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
     }
-    return `${(modelVal - Number(min)) * 100 / scope()}%`;
+    return `${(modelVal - min) * 100 / scope()}%`;
   };
   const calcOffset = () => {
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    const modelVal = current;
     if (isRange(modelVal)) {
-      return `${(modelVal[0] - Number(min)) * 100 / scope()}%`;
+      return `${(modelVal[0] - min) * 100 / scope()}%`;
     }
     return `0%`;
   };
@@ -12015,74 +11844,61 @@ const Range = (props) => {
       return {
         height: calcMainAxis(),
         top: calcOffset(),
-        background: activeColor,
         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 (range) {
-      const [left, right] = modelValue;
-      lowerBound = left;
-      upperBound = right;
+  const tickClass = (mark) => {
+    if (range && 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 format = (value) => {
-    value = Math.max(+min, Math.min(value, +max));
-    return Math.round(value / +step) * +step;
+  const format = (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(format);
+  const updateValue = (value2, end) => {
+    if (isRange(value2)) {
+      value2 = handleOverlap(value2).map(format);
     } else {
-      value = format(value);
-    }
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    if (!isSameValue(value, modelVal)) {
-      SetInitValue(value);
+      value2 = format(value2);
     }
-    if ((marks || end) && !isSameValue(value, startValue)) {
-      onChange && onChange(value);
+    if (!isSameValue(value2, current)) {
+      setCurrent(value2);
     }
+    end && onEnd && onEnd(value2);
   };
   const click = async (event) => {
     if (disabled || !root2.current) {
       return;
     }
-    SetDragStatus("");
+    setDragStatus("");
     const rect = await getRectByTaro(root2.current);
     let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left;
     let total = rect.width;
@@ -12090,18 +11906,18 @@ const Range = (props) => {
       delta = (event.detail.y ? event.detail.y : 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) => {
@@ -12109,24 +11925,23 @@ const Range = (props) => {
       return;
     }
     touch.start(event);
-    currentValue = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(currentValue)) {
-      startValue = currentValue.map(format);
+    setEaxctValue(current);
+    if (isRange(current)) {
+      setStartValue(current.map(format));
     } else {
-      startValue = format(currentValue);
+      setStartValue(format(current));
     }
-    SetDragStatus("start");
+    setDragStatus("start");
   };
   const onTouchMove = async (event) => {
     if (disabled || !root2.current) {
       return;
     }
     if (dragStatus === "start") {
-      dragStart && dragStart();
-      onDragStart && onDragStart();
+      onStart && onStart();
     }
     touch.move(event);
-    SetDragStatus("draging");
+    setDragStatus("draging");
     const rect = await getRectByTaro(root2.current);
     let delta = touch.deltaX;
     let total = rect.width;
@@ -12136,137 +11951,97 @@ const Range = (props) => {
       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: range ? [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: range ? [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,
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Toast,
-      {
-        type: "text",
-        visible: show,
-        msg: toastMsg,
-        onClose: () => {
-          SetShow(false);
+            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(
+        View,
+        {
+          catchMove: true,
+          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$N;
+Range.defaultProps = defaultProps$O;
 Range.displayName = "NutRange";
-const defaultProps$M = {
+const defaultProps$N = {
   ...ComponentDefaults,
   count: 5,
   min: 0,
@@ -12291,7 +12066,7 @@ const Rate = (props) => {
     allowHalf,
     onChange
   } = {
-    ...defaultProps$M,
+    ...defaultProps$N,
     ...props
   };
   const classPrefix2 = "nut-rate";
@@ -12376,9 +12151,9 @@ const Rate = (props) => {
     }
   );
 };
-Rate.defaultProps = defaultProps$M;
+Rate.defaultProps = defaultProps$N;
 Rate.displayName = "NutRate";
-const defaultProps$L = {
+const defaultProps$M = {
   ...ComponentDefaults,
   placeholder: "",
   shape: "square",
@@ -12426,7 +12201,7 @@ const SearchBar = (props) => {
     onClickRightinIcon,
     onClickRightoutIcon
   } = {
-    ...defaultProps$L,
+    ...defaultProps$M,
     ...props
   };
   const alignClass = `${align}`;
@@ -12612,9 +12387,9 @@ const SearchBar = (props) => {
     }
   );
 };
-SearchBar.defaultProps = defaultProps$L;
+SearchBar.defaultProps = defaultProps$M;
 SearchBar.displayName = "NutSearchBar";
-const defaultProps$K = {
+const defaultProps$L = {
   ...ComponentDefaults,
   title: "",
   description: "",
@@ -12777,9 +12552,9 @@ const ShortPassword = (props) => {
     }
   ) });
 };
-ShortPassword.defaultProps = defaultProps$K;
+ShortPassword.defaultProps = defaultProps$L;
 ShortPassword.displayName = "NutShortPassword";
-const defaultProps$J = {
+const defaultProps$K = {
   canvasId: "spcanvas",
   type: "png",
   lineWidth: 2,
@@ -12801,7 +12576,7 @@ const Signature = (props) => {
     onClear,
     ...rest
   } = {
-    ...defaultProps$J,
+    ...defaultProps$K,
     ...props
   };
   const b2 = cn("signature");
@@ -12965,9 +12740,9 @@ const Signature = (props) => {
     )
   ] });
 };
-Signature.defaultProps = defaultProps$J;
+Signature.defaultProps = defaultProps$K;
 Signature.displayName = "NutSignature";
-const defaultProps$I = {
+const defaultProps$J = {
   ...ComponentDefaults,
   disabled: false,
   activeText: "",
@@ -12984,7 +12759,7 @@ const Switch = (props) => {
     style,
     onChange
   } = {
-    ...defaultProps$I,
+    ...defaultProps$J,
     ...props
   };
   const classPrefix2 = "nut-switch";
@@ -13006,9 +12781,9 @@ const Switch = (props) => {
     activeText && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: value ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${classPrefix2}__label open`, children: activeText }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${classPrefix2}__label close`, children: inactiveText }) })
   ] }) });
 };
-Switch.defaultProps = defaultProps$I;
+Switch.defaultProps = defaultProps$J;
 Switch.displayName = "NutSwitch";
-const defaultProps$H = {
+const defaultProps$I = {
   ...ComponentDefaults,
   defaultValue: "",
   showCount: false,
@@ -13036,7 +12811,7 @@ const TextArea = (props) => {
     onBlur,
     onFocus,
     ...rest
-  } = { ...defaultProps$H, ...props };
+  } = { ...defaultProps$I, ...props };
   const classPrefix2 = "nut-textarea";
   const compositionRef = useRef(false);
   const format = (value2) => {
@@ -13118,9 +12893,9 @@ const TextArea = (props) => {
     }
   );
 };
-TextArea.defaultProps = defaultProps$H;
+TextArea.defaultProps = defaultProps$I;
 TextArea.displayName = "NutTextArea";
-const defaultProps$G = {
+const defaultProps$H = {
   ...ComponentDefaults,
   percent: 0,
   showText: false,
@@ -13139,7 +12914,7 @@ const Progress = (props) => {
     children,
     ...rest
   } = {
-    ...defaultProps$G,
+    ...defaultProps$H,
     ...props
   };
   const classPrefix2 = "nut-progress";
@@ -13176,7 +12951,7 @@ const Progress = (props) => {
     }
   ) }) }) });
 };
-Progress.defaultProps = defaultProps$G;
+Progress.defaultProps = defaultProps$H;
 Progress.displayName = "NutProgress";
 class UploadOptions {
   constructor() {
@@ -13321,7 +13096,7 @@ const funcInterceptor = (interceptor, {
     done();
   }
 };
-const defaultProps$F = {
+const defaultProps$G = {
   ...ComponentDefaults,
   url: "",
   maxCount: 1,
@@ -13409,7 +13184,7 @@ const InternalUploader = (props, ref) => {
     beforeXhrUpload,
     beforeDelete,
     ...restProps
-  } = { ...defaultProps$F, ...props };
+  } = { ...defaultProps$G, ...props };
   const [fileList, setFileList] = useState(defaultValue || []);
   const [uploadQueue, setUploadQueue] = useState([]);
   useEffect(() => {
@@ -13772,9 +13547,9 @@ const InternalUploader = (props, ref) => {
   ] });
 };
 const Uploader = React__default.forwardRef(InternalUploader);
-Uploader.defaultProps = defaultProps$F;
+Uploader.defaultProps = defaultProps$G;
 Uploader.displayName = "NutUploader";
-const defaultProps$E = {
+const defaultProps$F = {
   cancelText: "",
   optionTag: "name",
   optionSubTag: "subname",
@@ -13808,7 +13583,7 @@ const ActionSheet = (props) => {
     className,
     style,
     ...rest
-  } = { ...defaultProps$E, ...props };
+  } = { ...defaultProps$F, ...props };
   const b2 = cn("actionsheet");
   const isHighlight = (item) => {
     return props.chooseTagValue && props.chooseTagValue === item[props.optionTag || "name"] ? props.color : "#1a1a1a";
@@ -13853,7 +13628,7 @@ const ActionSheet = (props) => {
     }
   );
 };
-ActionSheet.defaultProps = defaultProps$E;
+ActionSheet.defaultProps = defaultProps$F;
 ActionSheet.displayName = "NutActionSheet";
 const Content = (props) => {
   const { visible, title, footer, footerDirection, onClick, children } = props;
@@ -13948,7 +13723,7 @@ const DialogWrap = (props) => {
 };
 DialogWrap.defaultProps = defaultDialogProps;
 DialogWrap.displayName = "NutDialogWrap";
-const defaultProps$D = {
+const defaultProps$E = {
   confirmText: "",
   cancelText: "",
   overlay: true,
@@ -14046,9 +13821,9 @@ const BaseDialog = forwardRef(
     );
   }
 );
-BaseDialog.defaultProps = defaultProps$D;
+BaseDialog.defaultProps = defaultProps$E;
 BaseDialog.displayName = "NutDialog";
-const defaultProps$C = {
+const defaultProps$D = {
   ...ComponentDefaults,
   attract: false,
   direction: void 0,
@@ -14062,7 +13837,7 @@ const defaultProps$C = {
 };
 const Drag = (props) => {
   const { attract, direction, boundary, children, className, style, ...reset } = {
-    ...defaultProps$C,
+    ...defaultProps$D,
     ...props
   };
   const classPrefix2 = "nut-drag";
@@ -14159,14 +13934,14 @@ const Drag = (props) => {
     }
   );
 };
-Drag.defaultProps = defaultProps$C;
+Drag.defaultProps = defaultProps$D;
 Drag.displayName = "NutDrag";
 const defaultStatus = {
   empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
   error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
   network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
 };
-const defaultProps$B = {
+const defaultProps$C = {
   ...ComponentDefaults,
   description: "",
   imageSize: "",
@@ -14175,7 +13950,7 @@ const defaultProps$B = {
 const classPrefix$6 = `nut-empty`;
 const Empty = (props) => {
   const { locale } = useConfig$1();
-  defaultProps$B.description = locale.noData || defaultProps$B.description;
+  defaultProps$C.description = locale.noData || defaultProps$C.description;
   const {
     image,
     imageSize,
@@ -14185,7 +13960,7 @@ const Empty = (props) => {
     status,
     ...rest
   } = {
-    ...defaultProps$B,
+    ...defaultProps$C,
     ...props
   };
   const [imgStyle, setImgStyle] = useState({});
@@ -14214,9 +13989,9 @@ const Empty = (props) => {
     children
   ] }) });
 };
-Empty.defaultProps = defaultProps$B;
+Empty.defaultProps = defaultProps$C;
 Empty.displayName = "NutEmpty";
-const defaultProps$A = {
+const defaultProps$B = {
   ...ComponentDefaults,
   hasMore: true,
   upperThreshold: 40,
@@ -14246,7 +14021,7 @@ const Infiniteloading = (props) => {
     onLoadMore,
     onScrollChange
   } = {
-    ...defaultProps$A,
+    ...defaultProps$B,
     ...props
   };
   const [isInfiniting, setIsInfiniting] = useState(false);
@@ -14369,9 +14144,9 @@ const Infiniteloading = (props) => {
     }
   );
 };
-Infiniteloading.defaultProps = defaultProps$A;
+Infiniteloading.defaultProps = defaultProps$B;
 Infiniteloading.displayName = "NutInfiniteloading";
-const defaultProps$z = {
+const defaultProps$A = {
   ...ComponentDefaults,
   // 滚动方向  across 横向 vertical 纵向
   direction: "across",
@@ -14416,7 +14191,7 @@ const NoticeBar = (props) => {
     onClick,
     onClickItem
   } = {
-    ...defaultProps$z,
+    ...defaultProps$A,
     ...props
   };
   const wrap = useRef(null);
@@ -14822,9 +14597,9 @@ const NoticeBar = (props) => {
     ) : null
   ] });
 };
-NoticeBar.defaultProps = defaultProps$z;
+NoticeBar.defaultProps = defaultProps$A;
 NoticeBar.displayName = "NutNoticeBar";
-const defaultProps$y = {
+const defaultProps$z = {
   id: "",
   msg: "",
   color: "",
@@ -14858,7 +14633,7 @@ const Notify = (props) => {
     onClosed,
     onClick,
     ...rest
-  } = { ...defaultProps$y, ...props };
+  } = { ...defaultProps$z, ...props };
   let timer;
   const [showNotify, SetShow] = useState(false);
   useEffect(() => {
@@ -14926,7 +14701,7 @@ const Notify = (props) => {
     }
   ) });
 };
-Notify.defaultProps = defaultProps$y;
+Notify.defaultProps = defaultProps$z;
 Notify.displayName = "NutNotify";
 function fillRef(ref, node) {
   if (typeof ref === "function") {
@@ -14970,7 +14745,7 @@ class Trigger extends React__default.Component {
     return trigger;
   }
 }
-const defaultProps$x = {
+const defaultProps$y = {
   ...ComponentDefaults,
   list: [],
   theme: "light",
@@ -14997,7 +14772,7 @@ const Popover = (props) => {
     onChoose,
     ...reset
   } = {
-    ...defaultProps$x,
+    ...defaultProps$y,
     ...props
   };
   const goodItem = useRef(null);
@@ -15100,7 +14875,7 @@ const Popover = (props) => {
     ) : null
   ] });
 };
-Popover.defaultProps = defaultProps$x;
+Popover.defaultProps = defaultProps$y;
 Popover.displayName = "NutPopover";
 function clamp$1(v, min, max) {
   return Math.max(min, Math.min(v, max));
@@ -19692,7 +19467,7 @@ function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15)
   return position;
 }
 const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
-const defaultProps$w = {
+const defaultProps$x = {
   pullingText: "",
   canReleaseText: "",
   refreshingText: "",
@@ -19707,7 +19482,7 @@ const defaultProps$w = {
 const PullToRefresh = (p) => {
   const { locale } = useConfig$1();
   const props = {
-    ...defaultProps$w,
+    ...defaultProps$x,
     ...p,
     ...{
       pullingText: p.pullingText || locale.pullToRefresh.pullingText,
@@ -19844,10 +19619,10 @@ const PullToRefresh = (p) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-pulltorefresh-content", children: props.children })
   ] });
 };
-PullToRefresh.defaultProps = defaultProps$w;
+PullToRefresh.defaultProps = defaultProps$x;
 PullToRefresh.displayName = "NutPullToRefresh";
 const AvatarContext = createContext({});
-const defaultProps$v = {
+const defaultProps$w = {
   ...ComponentDefaults,
   size: "",
   shape: "round",
@@ -19877,7 +19652,7 @@ const Avatar = (props) => {
     onError,
     ...rest
   } = {
-    ...defaultProps$v,
+    ...defaultProps$w,
     ...props
   };
   const [maxSum, setMaxSum] = useState(0);
@@ -19966,9 +19741,9 @@ const Avatar = (props) => {
     }
   ) });
 };
-Avatar.defaultProps = defaultProps$v;
+Avatar.defaultProps = defaultProps$w;
 Avatar.displayName = "NutAvatar";
-const defaultProps$u = {
+const defaultProps$v = {
   width: "100px",
   height: "100px",
   row: 1,
@@ -19996,7 +19771,7 @@ const Skeleton = (props) => {
     avatarShape,
     ...restProps
   } = {
-    ...defaultProps$u,
+    ...defaultProps$v,
     ...props
   };
   const b2 = cn("skeleton");
@@ -20053,7 +19828,7 @@ const Skeleton = (props) => {
     ] })
   ] }) });
 };
-Skeleton.defaultProps = defaultProps$u;
+Skeleton.defaultProps = defaultProps$v;
 Skeleton.displayName = "NutSkeleton";
 function preventDefault(event, isStopPropagation) {
   if (typeof event.cancelable !== "boolean" || event.cancelable) {
@@ -20063,7 +19838,7 @@ function preventDefault(event, isStopPropagation) {
     event.stopPropagation();
   }
 }
-const defaultProps$t = {
+const defaultProps$u = {
   name: ""
 };
 const Swipe = forwardRef((props, instanceRef) => {
@@ -20082,7 +19857,7 @@ const Swipe = forwardRef((props, instanceRef) => {
     };
     nextTick(() => getWidth());
   });
-  const { children, className, style } = { ...defaultProps$t, ...props };
+  const { children, className, style } = { ...defaultProps$u, ...props };
   const root2 = useRef();
   const opened = useRef(false);
   const lockClick = useRef(false);
@@ -20242,8 +20017,156 @@ const Swipe = forwardRef((props, instanceRef) => {
     }
   );
 });
-Swipe.defaultProps = defaultProps$t;
+Swipe.defaultProps = defaultProps$u;
 Swipe.displayName = "NutSwipe";
+const defaultProps$t = {
+  id: "",
+  style: {},
+  icon: null,
+  iconSize: "20",
+  msg: "",
+  bottom: "30px",
+  // center为false时生效，距离底部位置
+  duration: 2,
+  // 时长,duration为0则一直展示
+  center: true,
+  // toast是否居中展示
+  type: "text",
+  title: "",
+  customClass: "",
+  // 自定义样式名
+  size: "base",
+  // 设置字体大小，默认base,可选large\small\base
+  textAlignCenter: true,
+  // 文字是否居中显示,true为居中，false为left
+  bgColor: "rgba(0, 0, 0, .8)",
+  cover: false,
+  // 是否展示透明遮罩层
+  coverColor: "rgba(0, 0, 0, 0)",
+  // 遮罩颜色设定
+  closeOnClickOverlay: false,
+  // 是否点击遮罩可关闭
+  visible: false,
+  onClose: () => {
+  }
+  // 未实现
+};
+const Toast = (props) => {
+  const {
+    children,
+    id,
+    style,
+    icon,
+    iconSize,
+    msg,
+    bottom,
+    duration,
+    center,
+    type,
+    title,
+    customClass,
+    size,
+    textAlignCenter,
+    bgColor,
+    cover,
+    coverColor,
+    closeOnClickOverlay,
+    visible,
+    onClose,
+    ...rest
+  } = { ...defaultProps$t, ...props };
+  let timer;
+  const [openState, SetOpenState] = useState(false);
+  useEffect(() => {
+    if (visible) {
+      SetOpenState(true);
+      show();
+    } else {
+      hide();
+    }
+  }, [visible]);
+  const clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  const hide = () => {
+    SetOpenState(false);
+    onClose();
+  };
+  const show = () => {
+    clearTimer();
+    if (duration) {
+      timer = window.setTimeout(() => {
+        hide();
+      }, duration * 1e3);
+    }
+  };
+  const clickCover = () => {
+    if (closeOnClickOverlay) {
+      hide();
+    }
+  };
+  const toastBem = cn("toast");
+  const hasIcon = () => {
+    if (type !== "text") {
+      return true;
+    }
+    return !!icon;
+  };
+  const iconName = () => {
+    if (icon) {
+      return icon;
+    }
+    return {
+      success: /* @__PURE__ */ jsxRuntimeExports.jsx(a$4, { color: "#ffffff", width: iconSize, height: iconSize }),
+      fail: /* @__PURE__ */ jsxRuntimeExports.jsx(a$l, { color: "#ffffff", width: iconSize, height: iconSize }),
+      warn: /* @__PURE__ */ jsxRuntimeExports.jsx(a$3, { color: "#ffffff", width: iconSize, height: iconSize }),
+      loading: /* @__PURE__ */ jsxRuntimeExports.jsx(r$f, { color: "#ffffff", width: iconSize, height: iconSize })
+    }[type];
+  };
+  const classes = classNames({
+    "nut-toast-center": center,
+    "nut-toast-has-icon": icon,
+    "nut-toast-cover": cover,
+    "nut-toast-loading": type === "loading",
+    [`${customClass}`]: true,
+    [`nut-toast-${size}`]: true
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: openState ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: `${toastBem()} ${classes}`,
+      id,
+      style: {
+        bottom: center ? "auto" : `${bottom}`,
+        backgroundColor: cover ? coverColor : "",
+        ...style
+      },
+      onClick: () => {
+        clickCover();
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: toastBem("inner"),
+          style: {
+            textAlign: textAlignCenter ? "center" : "left",
+            backgroundColor: bgColor
+          },
+          children: [
+            hasIcon() ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: toastBem("icon-wrapper"), children: iconName() }) : null,
+            title ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "nut-toast-title", children: title }) : null,
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: toastBem("text"), children: msg })
+          ]
+        }
+      )
+    }
+  ) : null });
+};
+Toast.defaultProps = defaultProps$t;
+Toast.displayName = "NutToast";
 const defaultProps$s = {
   ...ComponentDefaults,
   type: "shake",
@@ -20532,9 +20455,11 @@ const Audio = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: b("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"
           }