@feathery/react 2.12.3-pr-1522.4bcc507.0 → 2.14.0

package/dist/esm/fthry_styles.BhmDd9Lo.js

@@ -1,1654 +0,0 @@
-import * as React from 'react';
-import { useState, useMemo } from 'react';
-import { aq as cls, j as jsxs, m as Fragment, b as jsx, G as Global, o as css, p as __makeTemplateObject } from './fthry_index.ChZdNtIX.js';
-import { flushSync } from 'react-dom';
-
-function canUseDom() {
-  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-}
-
-/**
- * Wrap `React.useLayoutEffect` which will not throw warning message in test env
- */
-const useInternalLayoutEffect = process.env.NODE_ENV !== 'test' && canUseDom() ? React.useLayoutEffect : React.useEffect;
-const useLayoutEffect = (callback, deps) => {
-  const firstMountRef = React.useRef(true);
-  useInternalLayoutEffect(() => {
-    return callback(firstMountRef.current);
-  }, deps);
-
-  // We tell react that first mount has passed
-  useInternalLayoutEffect(() => {
-    firstMountRef.current = false;
-    return () => {
-      firstMountRef.current = true;
-    };
-  }, []);
-};
-
-/**
- * Similar to `useState` but will use props value if provided.
- * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
- * This hooks remove the `onChange` & `postState` logic since we only need basic merged state logic.
- */
-function useControlledState(defaultStateValue, value) {
-  const [innerValue, setInnerValue] = useState(defaultStateValue);
-  const mergedValue = value !== undefined ? value : innerValue;
-  useLayoutEffect(mount => {
-    if (!mount) {
-      setInnerValue(value);
-    }
-  }, [value]);
-  return [
-  // Value
-  mergedValue,
-  // Update function
-  setInnerValue];
-}
-
-/* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable react-hooks/exhaustive-deps */
-function useEvent(callback) {
-  const fnRef = React.useRef();
-  fnRef.current = callback;
-  const memoFn = React.useCallback((...args) => fnRef.current?.(...args), []);
-  return memoFn;
-}
-
-/* eslint-disable no-console */
-let warned = {};
-const preWarningFns = [];
-
-/**
- * Pre warning enable you to parse content before console.error.
- * Modify to null will prevent warning.
- */
-const preMessage = fn => {
-  preWarningFns.push(fn);
-};
-
-/**
- * Warning if condition not match.
- * @param valid Condition
- * @param message Warning message
- * @example
- * ```js
- * warning(false, 'some error'); // print some error
- * warning(true, 'some error'); // print nothing
- * warning(1 === 2, 'some error'); // print some error
- * ```
- */
-function warning(valid, message) {
-  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
-    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? '', 'warning'), message);
-    if (finalMessage) {
-      console.error(`Warning: ${finalMessage}`);
-    }
-  }
-}
-
-/** @see Similar to {@link warning} */
-function note(valid, message) {
-  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
-    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? '', 'note'), message);
-    if (finalMessage) {
-      console.warn(`Note: ${finalMessage}`);
-    }
-  }
-}
-function resetWarned() {
-  warned = {};
-}
-function call(method, valid, message) {
-  if (!valid && !warned[message]) {
-    method(false, message);
-    warned[message] = true;
-  }
-}
-
-/** @see Same as {@link warning}, but only warn once for the same message */
-function warningOnce(valid, message) {
-  call(warning, valid, message);
-}
-
-/** @see Same as {@link warning}, but only warn once for the same message */
-function noteOnce(valid, message) {
-  call(note, valid, message);
-}
-warningOnce.preMessage = preMessage;
-warningOnce.resetWarned = resetWarned;
-warningOnce.noteOnce = noteOnce;
-
-/**
- * Deeply compares two object literals.
- * @param obj1 object 1
- * @param obj2 object 2
- * @param shallow shallow compare
- * @returns
- */
-function isEqual(obj1, obj2, shallow = false) {
-  // https://github.com/mapbox/mapbox-gl-js/pull/5979/files#diff-fde7145050c47cc3a306856efd5f9c3016e86e859de9afbd02c879be5067e58f
-  const refSet = new Set();
-  function deepEqual(a, b, level = 1) {
-    const circular = refSet.has(a);
-    warningOnce(!circular, 'Warning: There may be circular references');
-    if (circular) {
-      return false;
-    }
-    if (a === b) {
-      return true;
-    }
-    if (shallow && level > 1) {
-      return false;
-    }
-    refSet.add(a);
-    const newLevel = level + 1;
-    if (Array.isArray(a)) {
-      if (!Array.isArray(b) || a.length !== b.length) {
-        return false;
-      }
-      for (let i = 0; i < a.length; i++) {
-        if (!deepEqual(a[i], b[i], newLevel)) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (a && b && typeof a === 'object' && typeof b === 'object') {
-      const keys = Object.keys(a);
-      if (keys.length !== Object.keys(b).length) {
-        return false;
-      }
-      return keys.every(key => deepEqual(a[key], b[key], newLevel));
-    }
-    // other
-    return false;
-  }
-  return deepEqual(obj1, obj2);
-}
-
-function getOffset(value, min, max) {
-  return (value - min) / (max - min);
-}
-function getDirectionStyle(direction, value, min, max) {
-  const offset = getOffset(value, min, max);
-  const positionStyle = {};
-  switch (direction) {
-    case 'rtl':
-      positionStyle.right = `${offset * 100}%`;
-      positionStyle.transform = 'translateX(50%)';
-      break;
-    case 'btt':
-      positionStyle.bottom = `${offset * 100}%`;
-      positionStyle.transform = 'translateY(50%)';
-      break;
-    case 'ttb':
-      positionStyle.top = `${offset * 100}%`;
-      positionStyle.transform = 'translateY(-50%)';
-      break;
-    default:
-      positionStyle.left = `${offset * 100}%`;
-      positionStyle.transform = 'translateX(-50%)';
-      break;
-  }
-  return positionStyle;
-}
-
-/** Return index value if is list or return value directly */
-function getIndex(value, index) {
-  return Array.isArray(value) ? value[index] : value;
-}
-
-/**
- * @ignore
- * some key-codes definition and utils from closure-library
- * @author yiminghe@gmail.com
- */
-
-const KeyCode = {
-  /**
-   * BACKSPACE
-   */
-  BACKSPACE: 8,
-  /**
-   * PAGE_UP
-   */
-  PAGE_UP: 33,
-  // also NUM_NORTH_EAST
-  /**
-   * PAGE_DOWN
-   */
-  PAGE_DOWN: 34,
-  // also NUM_SOUTH_EAST
-  /**
-   * END
-   */
-  END: 35,
-  // also NUM_SOUTH_WEST
-  /**
-   * HOME
-   */
-  HOME: 36,
-  // also NUM_NORTH_WEST
-  /**
-   * LEFT
-   */
-  LEFT: 37,
-  // also NUM_WEST
-  /**
-   * UP
-   */
-  UP: 38,
-  // also NUM_NORTH
-  /**
-   * RIGHT
-   */
-  RIGHT: 39,
-  // also NUM_EAST
-  /**
-   * DOWN
-   */
-  DOWN: 40,
-  // also NUM_INSERT
-  /**
-   * DELETE
-   */
-  DELETE: 46};
-
-const SliderContext = /*#__PURE__*/React.createContext({
-  min: 0,
-  max: 0,
-  direction: 'ltr',
-  step: 1,
-  includedStart: 0,
-  includedEnd: 0,
-  tabIndex: 0,
-  keyboard: true,
-  styles: {},
-  classNames: {}
-});
-/** @private NOT PROMISE AVAILABLE. DO NOT USE IN PRODUCTION. */
-const UnstableContext = /*#__PURE__*/React.createContext({});
-
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-const Handle = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    prefixCls,
-    value,
-    valueIndex,
-    onStartMove,
-    onDelete,
-    style,
-    render,
-    dragging,
-    draggingDelete,
-    onOffsetChange,
-    onChangeComplete,
-    onFocus,
-    onMouseEnter,
-    ...restProps
-  } = props;
-  const {
-    min,
-    max,
-    direction,
-    disabled,
-    keyboard,
-    range,
-    tabIndex,
-    ariaLabelForHandle,
-    ariaLabelledByForHandle,
-    ariaRequired,
-    ariaValueTextFormatterForHandle,
-    styles,
-    classNames
-  } = React.useContext(SliderContext);
-  const handlePrefixCls = `${prefixCls}-handle`;
-
-  // ============================ Events ============================
-  const onInternalStartMove = e => {
-    if (!disabled) {
-      onStartMove(e, valueIndex);
-    }
-  };
-  const onInternalFocus = e => {
-    onFocus?.(e, valueIndex);
-  };
-  const onInternalMouseEnter = e => {
-    onMouseEnter(e, valueIndex);
-  };
-
-  // =========================== Keyboard ===========================
-  const onKeyDown = e => {
-    if (!disabled && keyboard) {
-      let offset = null;
-
-      // Change the value
-      switch (e.which || e.keyCode) {
-        case KeyCode.LEFT:
-          offset = direction === 'ltr' || direction === 'btt' ? -1 : 1;
-          break;
-        case KeyCode.RIGHT:
-          offset = direction === 'ltr' || direction === 'btt' ? 1 : -1;
-          break;
-
-        // Up is plus
-        case KeyCode.UP:
-          offset = direction !== 'ttb' ? 1 : -1;
-          break;
-
-        // Down is minus
-        case KeyCode.DOWN:
-          offset = direction !== 'ttb' ? -1 : 1;
-          break;
-        case KeyCode.HOME:
-          offset = 'min';
-          break;
-        case KeyCode.END:
-          offset = 'max';
-          break;
-        case KeyCode.PAGE_UP:
-          offset = 2;
-          break;
-        case KeyCode.PAGE_DOWN:
-          offset = -2;
-          break;
-        case KeyCode.BACKSPACE:
-        case KeyCode.DELETE:
-          onDelete?.(valueIndex);
-          break;
-      }
-      if (offset !== null) {
-        e.preventDefault();
-        onOffsetChange(offset, valueIndex);
-      }
-    }
-  };
-  const handleKeyUp = e => {
-    switch (e.which || e.keyCode) {
-      case KeyCode.LEFT:
-      case KeyCode.RIGHT:
-      case KeyCode.UP:
-      case KeyCode.DOWN:
-      case KeyCode.HOME:
-      case KeyCode.END:
-      case KeyCode.PAGE_UP:
-      case KeyCode.PAGE_DOWN:
-        onChangeComplete?.();
-        break;
-    }
-  };
-
-  // ============================ Offset ============================
-  const positionStyle = getDirectionStyle(direction, value, min, max);
-
-  // ============================ Render ============================
-  let divProps = {};
-  if (valueIndex !== null) {
-    divProps = {
-      tabIndex: disabled ? null : getIndex(tabIndex, valueIndex),
-      role: 'slider',
-      'aria-valuemin': min,
-      'aria-valuemax': max,
-      'aria-valuenow': value,
-      'aria-disabled': disabled,
-      'aria-label': getIndex(ariaLabelForHandle, valueIndex),
-      'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
-      'aria-required': getIndex(ariaRequired, valueIndex),
-      'aria-valuetext': getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value),
-      'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical',
-      onMouseDown: onInternalStartMove,
-      onTouchStart: onInternalStartMove,
-      onFocus: onInternalFocus,
-      onMouseEnter: onInternalMouseEnter,
-      onKeyDown,
-      onKeyUp: handleKeyUp
-    };
-  }
-  let handleNode = /*#__PURE__*/React.createElement("div", _extends$1({
-    ref: ref,
-    className: cls(handlePrefixCls, {
-      [`${handlePrefixCls}-${valueIndex + 1}`]: valueIndex !== null && range,
-      [`${handlePrefixCls}-dragging`]: dragging,
-      [`${handlePrefixCls}-dragging-delete`]: draggingDelete
-    }, classNames.handle),
-    style: {
-      ...positionStyle,
-      ...style,
-      ...styles.handle
-    }
-  }, divProps, restProps));
-
-  // Customize
-  if (render) {
-    handleNode = render(handleNode, {
-      index: valueIndex,
-      prefixCls,
-      value,
-      dragging,
-      draggingDelete
-    });
-  }
-  return handleNode;
-});
-if (process.env.NODE_ENV !== 'production') {
-  Handle.displayName = 'Handle';
-}
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const Handles = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    prefixCls,
-    style,
-    onStartMove,
-    onOffsetChange,
-    values,
-    handleRender,
-    activeHandleRender,
-    draggingIndex,
-    draggingDelete,
-    onFocus,
-    ...restProps
-  } = props;
-  const handlesRef = React.useRef({});
-
-  // =========================== Active ===========================
-  const [activeVisible, setActiveVisible] = React.useState(false);
-  const [activeIndex, setActiveIndex] = React.useState(-1);
-  const onActive = index => {
-    setActiveIndex(index);
-    setActiveVisible(true);
-  };
-  const onHandleFocus = (e, index) => {
-    onActive(index);
-    onFocus?.(e);
-  };
-  const onHandleMouseEnter = (e, index) => {
-    onActive(index);
-  };
-
-  // =========================== Render ===========================
-  React.useImperativeHandle(ref, () => ({
-    focus: index => {
-      handlesRef.current[index]?.focus();
-    },
-    hideHelp: () => {
-      flushSync(() => {
-        setActiveVisible(false);
-      });
-    }
-  }));
-
-  // =========================== Render ===========================
-  // Handle Props
-  const handleProps = {
-    prefixCls,
-    onStartMove,
-    onOffsetChange,
-    render: handleRender,
-    onFocus: onHandleFocus,
-    onMouseEnter: onHandleMouseEnter,
-    ...restProps
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, values.map((value, index) => {
-    const dragging = draggingIndex === index;
-    return /*#__PURE__*/React.createElement(Handle, _extends({
-      ref: node => {
-        if (!node) {
-          delete handlesRef.current[index];
-        } else {
-          handlesRef.current[index] = node;
-        }
-      },
-      dragging: dragging,
-      draggingDelete: dragging && draggingDelete,
-      style: getIndex(style, index),
-      key: index,
-      value: value,
-      valueIndex: index
-    }, handleProps));
-  }), activeHandleRender && activeVisible && /*#__PURE__*/React.createElement(Handle, _extends({
-    key: "a11y"
-  }, handleProps, {
-    value: values[activeIndex],
-    valueIndex: null,
-    dragging: draggingIndex !== -1,
-    draggingDelete: draggingDelete,
-    render: activeHandleRender,
-    style: {
-      pointerEvents: 'none'
-    },
-    tabIndex: null,
-    "aria-hidden": true
-  })));
-});
-if (process.env.NODE_ENV !== 'production') {
-  Handles.displayName = 'Handles';
-}
-
-const Mark = props => {
-  const {
-    prefixCls,
-    style,
-    children,
-    value,
-    onClick
-  } = props;
-  const {
-    min,
-    max,
-    direction,
-    includedStart,
-    includedEnd,
-    included
-  } = React.useContext(SliderContext);
-  const textCls = `${prefixCls}-text`;
-
-  // ============================ Offset ============================
-  const positionStyle = getDirectionStyle(direction, value, min, max);
-  return /*#__PURE__*/React.createElement("span", {
-    className: cls(textCls, {
-      [`${textCls}-active`]: included && includedStart <= value && value <= includedEnd
-    }),
-    style: {
-      ...positionStyle,
-      ...style
-    },
-    onMouseDown: e => {
-      e.stopPropagation();
-    },
-    onClick: () => {
-      onClick(value);
-    }
-  }, children);
-};
-
-const Marks = props => {
-  const {
-    prefixCls,
-    marks,
-    onClick
-  } = props;
-  const markPrefixCls = `${prefixCls}-mark`;
-
-  // Not render mark if empty
-  if (!marks.length) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: markPrefixCls
-  }, marks.map(({
-    value,
-    style,
-    label
-  }) => /*#__PURE__*/React.createElement(Mark, {
-    key: value,
-    prefixCls: markPrefixCls,
-    style: style,
-    value: value,
-    onClick: onClick
-  }, label)));
-};
-
-const Dot = props => {
-  const {
-    prefixCls,
-    value,
-    style,
-    activeStyle
-  } = props;
-  const {
-    min,
-    max,
-    direction,
-    included,
-    includedStart,
-    includedEnd
-  } = React.useContext(SliderContext);
-  const dotClassName = `${prefixCls}-dot`;
-  const active = included && includedStart <= value && value <= includedEnd;
-
-  // ============================ Offset ============================
-  let mergedStyle = {
-    ...getDirectionStyle(direction, value, min, max),
-    ...(typeof style === 'function' ? style(value) : style)
-  };
-  if (active) {
-    mergedStyle = {
-      ...mergedStyle,
-      ...(typeof activeStyle === 'function' ? activeStyle(value) : activeStyle)
-    };
-  }
-  return /*#__PURE__*/React.createElement("span", {
-    className: cls(dotClassName, {
-      [`${dotClassName}-active`]: active
-    }),
-    style: mergedStyle
-  });
-};
-
-const Steps = props => {
-  const {
-    prefixCls,
-    marks,
-    dots,
-    style,
-    activeStyle
-  } = props;
-  const {
-    min,
-    max,
-    step
-  } = React.useContext(SliderContext);
-  const stepDots = React.useMemo(() => {
-    const dotSet = new Set();
-
-    // Add marks
-    marks.forEach(mark => {
-      dotSet.add(mark.value);
-    });
-
-    // Fill dots
-    if (dots && step !== null) {
-      let current = min;
-      while (current <= max) {
-        dotSet.add(current);
-        current += step;
-      }
-    }
-    return Array.from(dotSet);
-  }, [min, max, step, dots, marks]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-step`
-  }, stepDots.map(dotValue => /*#__PURE__*/React.createElement(Dot, {
-    prefixCls: prefixCls,
-    key: dotValue,
-    value: dotValue,
-    style: style,
-    activeStyle: activeStyle
-  })));
-};
-
-const Track = props => {
-  const {
-    prefixCls,
-    style,
-    start,
-    end,
-    index,
-    onStartMove,
-    replaceCls
-  } = props;
-  const {
-    direction,
-    min,
-    max,
-    disabled,
-    range,
-    classNames
-  } = React.useContext(SliderContext);
-  const trackPrefixCls = `${prefixCls}-track`;
-  const offsetStart = getOffset(start, min, max);
-  const offsetEnd = getOffset(end, min, max);
-
-  // ============================ Events ============================
-  const onInternalStartMove = e => {
-    if (!disabled && onStartMove) {
-      onStartMove(e, -1);
-    }
-  };
-
-  // ============================ Render ============================
-  const positionStyle = {};
-  switch (direction) {
-    case 'rtl':
-      positionStyle.right = `${offsetStart * 100}%`;
-      positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
-      break;
-    case 'btt':
-      positionStyle.bottom = `${offsetStart * 100}%`;
-      positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`;
-      break;
-    case 'ttb':
-      positionStyle.top = `${offsetStart * 100}%`;
-      positionStyle.height = `${offsetEnd * 100 - offsetStart * 100}%`;
-      break;
-    default:
-      positionStyle.left = `${offsetStart * 100}%`;
-      positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
-  }
-  const className = replaceCls || cls(trackPrefixCls, {
-    [`${trackPrefixCls}-${index + 1}`]: index !== null && range,
-    [`${prefixCls}-track-draggable`]: onStartMove
-  }, classNames.track);
-  return /*#__PURE__*/React.createElement("div", {
-    className: className,
-    style: {
-      ...positionStyle,
-      ...style
-    },
-    onMouseDown: onInternalStartMove,
-    onTouchStart: onInternalStartMove
-  });
-};
-
-const Tracks = props => {
-  const {
-    prefixCls,
-    style,
-    values,
-    startPoint,
-    onStartMove
-  } = props;
-  const {
-    included,
-    range,
-    min,
-    styles,
-    classNames
-  } = React.useContext(SliderContext);
-
-  // =========================== List ===========================
-  const trackList = React.useMemo(() => {
-    if (!range) {
-      // null value do not have track
-      if (values.length === 0) {
-        return [];
-      }
-      const startValue = startPoint ?? min;
-      const endValue = values[0];
-      return [{
-        start: Math.min(startValue, endValue),
-        end: Math.max(startValue, endValue)
-      }];
-    }
-
-    // Multiple
-    const list = [];
-    for (let i = 0; i < values.length - 1; i += 1) {
-      list.push({
-        start: values[i],
-        end: values[i + 1]
-      });
-    }
-    return list;
-  }, [values, range, startPoint, min]);
-  if (!included) {
-    return null;
-  }
-
-  // ========================== Render ==========================
-  const tracksNode = trackList?.length && (classNames.tracks || styles.tracks) ? /*#__PURE__*/React.createElement(Track, {
-    index: null,
-    prefixCls: prefixCls,
-    start: trackList[0].start,
-    end: trackList[trackList.length - 1].end,
-    replaceCls: cls(classNames.tracks, `${prefixCls}-tracks`),
-    style: styles.tracks
-  }) : null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, tracksNode, trackList.map(({
-    start,
-    end
-  }, index) => /*#__PURE__*/React.createElement(Track, {
-    index: index,
-    prefixCls: prefixCls,
-    style: {
-      ...getIndex(style, index),
-      ...styles.track
-    },
-    start: start,
-    end: end,
-    key: index,
-    onStartMove: onStartMove
-  })));
-};
-
-/** Drag to delete offset. It's a user experience number for dragging out */
-const REMOVE_DIST = 130;
-function getPosition(e) {
-  const obj = 'targetTouches' in e ? e.targetTouches[0] : e;
-  return {
-    pageX: obj.pageX,
-    pageY: obj.pageY
-  };
-}
-function useDrag(containerRef, direction, rawValues, min, max, formatValue, triggerChange, finishChange, offsetValues, editable, minCount) {
-  const [draggingValue, setDraggingValue] = React.useState(null);
-  const [draggingIndex, setDraggingIndex] = React.useState(-1);
-  const [draggingDelete, setDraggingDelete] = React.useState(false);
-  const [cacheValues, setCacheValues] = React.useState(rawValues);
-  const [originValues, setOriginValues] = React.useState(rawValues);
-  const mouseMoveEventRef = React.useRef(null);
-  const mouseUpEventRef = React.useRef(null);
-  const touchEventTargetRef = React.useRef(null);
-  const {
-    onDragStart,
-    onDragChange
-  } = React.useContext(UnstableContext);
-  useLayoutEffect(() => {
-    if (draggingIndex === -1) {
-      setCacheValues(rawValues);
-    }
-  }, [rawValues, draggingIndex]);
-
-  // Clean up event
-  React.useEffect(() => () => {
-    document.removeEventListener('mousemove', mouseMoveEventRef.current);
-    document.removeEventListener('mouseup', mouseUpEventRef.current);
-    if (touchEventTargetRef.current) {
-      touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
-      touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
-    }
-  }, []);
-  const flushValues = (nextValues, nextValue, deleteMark) => {
-    // Perf: Only update state when value changed
-    if (nextValue !== undefined) {
-      setDraggingValue(nextValue);
-    }
-    setCacheValues(nextValues);
-    let changeValues = nextValues;
-    if (deleteMark) {
-      changeValues = nextValues.filter((_, i) => i !== draggingIndex);
-    }
-    triggerChange(changeValues);
-    if (onDragChange) {
-      onDragChange({
-        rawValues: nextValues,
-        deleteIndex: deleteMark ? draggingIndex : -1,
-        draggingIndex,
-        draggingValue: nextValue
-      });
-    }
-  };
-  const updateCacheValue = useEvent((valueIndex, offsetPercent, deleteMark) => {
-    if (valueIndex === -1) {
-      // >>>> Dragging on the track
-      const startValue = originValues[0];
-      const endValue = originValues[originValues.length - 1];
-      const maxStartOffset = min - startValue;
-      const maxEndOffset = max - endValue;
-
-      // Get valid offset
-      let offset = offsetPercent * (max - min);
-      offset = Math.max(offset, maxStartOffset);
-      offset = Math.min(offset, maxEndOffset);
-
-      // Use first value to revert back of valid offset (like steps marks)
-      const formatStartValue = formatValue(startValue + offset);
-      offset = formatStartValue - startValue;
-      const cloneCacheValues = originValues.map(val => val + offset);
-      flushValues(cloneCacheValues);
-    } else {
-      // >>>> Dragging on the handle
-      const offsetDist = (max - min) * offsetPercent;
-
-      // Always start with the valueIndex origin value
-      const cloneValues = [...cacheValues];
-      cloneValues[valueIndex] = originValues[valueIndex];
-      const next = offsetValues(cloneValues, offsetDist, valueIndex, 'dist');
-      flushValues(next.values, next.value, deleteMark);
-    }
-  });
-  const onStartMove = (e, valueIndex, startValues) => {
-    e.stopPropagation();
-
-    // 如果是点击 track 触发的，需要传入变化后的初始值，而不能直接用 rawValues
-    const initialValues = startValues || rawValues;
-    const originValue = initialValues[valueIndex];
-    setDraggingIndex(valueIndex);
-    setDraggingValue(originValue);
-    setOriginValues(initialValues);
-    setCacheValues(initialValues);
-    setDraggingDelete(false);
-    const {
-      pageX: startX,
-      pageY: startY
-    } = getPosition(e);
-
-    // We declare it here since closure can't get outer latest value
-    let deleteMark = false;
-
-    // Internal trigger event
-    if (onDragStart) {
-      onDragStart({
-        rawValues: initialValues,
-        draggingIndex: valueIndex,
-        draggingValue: originValue
-      });
-    }
-
-    // Moving
-    const onMouseMove = event => {
-      event.preventDefault();
-      const {
-        pageX: moveX,
-        pageY: moveY
-      } = getPosition(event);
-      const offsetX = moveX - startX;
-      const offsetY = moveY - startY;
-      const {
-        width,
-        height
-      } = containerRef.current.getBoundingClientRect();
-      let offSetPercent;
-      let removeDist;
-      switch (direction) {
-        case 'btt':
-          offSetPercent = -offsetY / height;
-          removeDist = offsetX;
-          break;
-        case 'ttb':
-          offSetPercent = offsetY / height;
-          removeDist = offsetX;
-          break;
-        case 'rtl':
-          offSetPercent = -offsetX / width;
-          removeDist = offsetY;
-          break;
-        default:
-          offSetPercent = offsetX / width;
-          removeDist = offsetY;
-      }
-
-      // Check if need mark remove
-      deleteMark = editable ? Math.abs(removeDist) > REMOVE_DIST && minCount < cacheValues.length : false;
-      setDraggingDelete(deleteMark);
-      updateCacheValue(valueIndex, offSetPercent, deleteMark);
-    };
-
-    // End
-    const onMouseUp = event => {
-      event.preventDefault();
-      document.removeEventListener('mouseup', onMouseUp);
-      document.removeEventListener('mousemove', onMouseMove);
-      if (touchEventTargetRef.current) {
-        touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
-        touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
-      }
-      mouseMoveEventRef.current = null;
-      mouseUpEventRef.current = null;
-      touchEventTargetRef.current = null;
-      finishChange(deleteMark);
-      setDraggingIndex(-1);
-      setDraggingDelete(false);
-    };
-    document.addEventListener('mouseup', onMouseUp);
-    document.addEventListener('mousemove', onMouseMove);
-    e.currentTarget.addEventListener('touchend', onMouseUp);
-    e.currentTarget.addEventListener('touchmove', onMouseMove);
-    mouseMoveEventRef.current = onMouseMove;
-    mouseUpEventRef.current = onMouseUp;
-    touchEventTargetRef.current = e.currentTarget;
-  };
-
-  // Only return cache value when it mapping with rawValues
-  const returnValues = React.useMemo(() => {
-    const sourceValues = [...rawValues].sort((a, b) => a - b);
-    const targetValues = [...cacheValues].sort((a, b) => a - b);
-    const counts = {};
-    targetValues.forEach(val => {
-      counts[val] = (counts[val] || 0) + 1;
-    });
-    sourceValues.forEach(val => {
-      counts[val] = (counts[val] || 0) - 1;
-    });
-    const maxDiffCount = editable ? 1 : 0;
-    const diffCount = Object.values(counts).reduce((prev, next) => prev + Math.abs(next), 0);
-    return diffCount <= maxDiffCount ? cacheValues : rawValues;
-  }, [rawValues, cacheValues, editable]);
-  return [draggingIndex, draggingValue, draggingDelete, returnValues, onStartMove];
-}
-
-/** Format the value in the range of [min, max] */
-
-/** Format value align with step */
-
-/** Format value align with step & marks */
-
-function useOffset(min, max, step, markList, allowCross, pushable) {
-  const formatRangeValue = React.useCallback(val => Math.max(min, Math.min(max, val)), [min, max]);
-  const formatStepValue = React.useCallback(val => {
-    if (step !== null) {
-      const stepValue = min + Math.round((formatRangeValue(val) - min) / step) * step;
-
-      // Cut number in case to be like 0.30000000000000004
-      const getDecimal = num => (String(num).split('.')[1] || '').length;
-      const maxDecimal = Math.max(getDecimal(step), getDecimal(max), getDecimal(min));
-      const fixedValue = Number(stepValue.toFixed(maxDecimal));
-      return min <= fixedValue && fixedValue <= max ? fixedValue : null;
-    }
-    return null;
-  }, [step, min, max, formatRangeValue]);
-  const formatValue = React.useCallback(val => {
-    const formatNextValue = formatRangeValue(val);
-
-    // List align values
-    const alignValues = markList.map(mark => mark.value);
-    if (step !== null) {
-      alignValues.push(formatStepValue(val));
-    }
-
-    // min & max
-    alignValues.push(min, max);
-
-    // Align with marks
-    let closeValue = alignValues[0];
-    let closeDist = max - min;
-    alignValues.forEach(alignValue => {
-      const dist = Math.abs(formatNextValue - alignValue);
-      if (dist <= closeDist) {
-        closeValue = alignValue;
-        closeDist = dist;
-      }
-    });
-    return closeValue;
-  }, [min, max, markList, step, formatRangeValue, formatStepValue]);
-
-  // ========================== Offset ==========================
-  // Single Value
-  const offsetValue = (values, offset, valueIndex, mode = 'unit') => {
-    if (typeof offset === 'number') {
-      let nextValue;
-      const originValue = values[valueIndex];
-
-      // Only used for `dist` mode
-      const targetDistValue = originValue + offset;
-
-      // Compare next step value & mark value which is best match
-      let potentialValues = [];
-      markList.forEach(mark => {
-        potentialValues.push(mark.value);
-      });
-
-      // Min & Max
-      potentialValues.push(min, max);
-
-      // In case origin value is align with mark but not with step
-      potentialValues.push(formatStepValue(originValue));
-
-      // Put offset step value also
-      const sign = offset > 0 ? 1 : -1;
-      if (mode === 'unit') {
-        potentialValues.push(formatStepValue(originValue + sign * step));
-      } else {
-        potentialValues.push(formatStepValue(targetDistValue));
-      }
-
-      // Find close one
-      potentialValues = potentialValues.filter(val => val !== null)
-      // Remove reverse value
-      .filter(val => offset < 0 ? val <= originValue : val >= originValue);
-      if (mode === 'unit') {
-        // `unit` mode can not contain itself
-        potentialValues = potentialValues.filter(val => val !== originValue);
-      }
-      const compareValue = mode === 'unit' ? originValue : targetDistValue;
-      nextValue = potentialValues[0];
-      let valueDist = Math.abs(nextValue - compareValue);
-      potentialValues.forEach(potentialValue => {
-        const dist = Math.abs(potentialValue - compareValue);
-        if (dist < valueDist) {
-          nextValue = potentialValue;
-          valueDist = dist;
-        }
-      });
-
-      // Out of range will back to range
-      if (nextValue === undefined) {
-        return offset < 0 ? min : max;
-      }
-
-      // `dist` mode
-      if (mode === 'dist') {
-        return nextValue;
-      }
-
-      // `unit` mode may need another round
-      if (Math.abs(offset) > 1) {
-        const cloneValues = [...values];
-        cloneValues[valueIndex] = nextValue;
-        return offsetValue(cloneValues, offset - sign, valueIndex, mode);
-      }
-      return nextValue;
-    } else if (offset === 'min') {
-      return min;
-    } else if (offset === 'max') {
-      return max;
-    }
-  };
-
-  /** Same as `offsetValue` but return `changed` mark to tell value changed */
-  const offsetChangedValue = (values, offset, valueIndex, mode = 'unit') => {
-    const originValue = values[valueIndex];
-    const nextValue = offsetValue(values, offset, valueIndex, mode);
-    return {
-      value: nextValue,
-      changed: nextValue !== originValue
-    };
-  };
-  const needPush = dist => {
-    return pushable === null && dist === 0 || typeof pushable === 'number' && dist < pushable;
-  };
-
-  // Values
-  const offsetValues = (values, offset, valueIndex, mode = 'unit') => {
-    const nextValues = values.map(formatValue);
-    const originValue = nextValues[valueIndex];
-    const nextValue = offsetValue(nextValues, offset, valueIndex, mode);
-    nextValues[valueIndex] = nextValue;
-    if (allowCross === false) {
-      // >>>>> Allow Cross
-      const pushNum = pushable || 0;
-
-      // ============ AllowCross ===============
-      if (valueIndex > 0 && nextValues[valueIndex - 1] !== originValue) {
-        nextValues[valueIndex] = Math.max(nextValues[valueIndex], nextValues[valueIndex - 1] + pushNum);
-      }
-      if (valueIndex < nextValues.length - 1 && nextValues[valueIndex + 1] !== originValue) {
-        nextValues[valueIndex] = Math.min(nextValues[valueIndex], nextValues[valueIndex + 1] - pushNum);
-      }
-    } else if (typeof pushable === 'number' || pushable === null) {
-      // >>>>> Pushable
-      // =============== Push ==================
-
-      // >>>>>> Basic push
-      // End values
-      for (let i = valueIndex + 1; i < nextValues.length; i += 1) {
-        let changed = true;
-        while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
-          ({
-            value: nextValues[i],
-            changed
-          } = offsetChangedValue(nextValues, 1, i));
-        }
-      }
-
-      // Start values
-      for (let i = valueIndex; i > 0; i -= 1) {
-        let changed = true;
-        while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
-          ({
-            value: nextValues[i - 1],
-            changed
-          } = offsetChangedValue(nextValues, -1, i - 1));
-        }
-      }
-
-      // >>>>> Revert back to safe push range
-      // End to Start
-      for (let i = nextValues.length - 1; i > 0; i -= 1) {
-        let changed = true;
-        while (needPush(nextValues[i] - nextValues[i - 1]) && changed) {
-          ({
-            value: nextValues[i - 1],
-            changed
-          } = offsetChangedValue(nextValues, -1, i - 1));
-        }
-      }
-
-      // Start to End
-      for (let i = 0; i < nextValues.length - 1; i += 1) {
-        let changed = true;
-        while (needPush(nextValues[i + 1] - nextValues[i]) && changed) {
-          ({
-            value: nextValues[i + 1],
-            changed
-          } = offsetChangedValue(nextValues, 1, i + 1));
-        }
-      }
-    }
-    return {
-      value: nextValues[valueIndex],
-      values: nextValues
-    };
-  };
-  return [formatValue, offsetValues];
-}
-
-function useRange(range) {
-  return useMemo(() => {
-    if (range === true || !range) {
-      return [!!range, false, false, 0];
-    }
-    const {
-      editable,
-      draggableTrack,
-      minCount,
-      maxCount
-    } = range;
-    if (process.env.NODE_ENV !== 'production') {
-      warning(!editable || !draggableTrack, '`editable` can not work with `draggableTrack`.');
-    }
-    return [true, editable, !editable && draggableTrack, minCount || 0, maxCount];
-  }, [range]);
-}
-
-/**
- * New:
- * - click mark to update range value
- * - handleRender
- * - Fix handle with count not correct
- * - Fix pushable not work in some case
- * - No more FindDOMNode
- * - Move all position related style into inline style
- * - Key: up is plus, down is minus
- * - fix Key with step = null not align with marks
- * - Change range should not trigger onChange
- * - keyboard support pushable
- */
-
-const Slider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    prefixCls = 'rc-slider',
-    className,
-    style,
-    classNames,
-    styles,
-    id,
-    // Status
-    disabled = false,
-    keyboard = true,
-    autoFocus,
-    onFocus,
-    onBlur,
-    // Value
-    min = 0,
-    max = 100,
-    step = 1,
-    value,
-    defaultValue,
-    range,
-    count,
-    onChange,
-    onBeforeChange,
-    onAfterChange,
-    onChangeComplete,
-    // Cross
-    allowCross = true,
-    pushable = false,
-    // Direction
-    reverse,
-    vertical,
-    // Style
-    included = true,
-    startPoint,
-    trackStyle,
-    handleStyle,
-    railStyle,
-    dotStyle,
-    activeDotStyle,
-    // Decorations
-    marks,
-    dots,
-    // Components
-    handleRender,
-    activeHandleRender,
-    track,
-    // Accessibility
-    tabIndex = 0,
-    ariaLabelForHandle,
-    ariaLabelledByForHandle,
-    ariaRequired,
-    ariaValueTextFormatterForHandle
-  } = props;
-  const handlesRef = React.useRef(null);
-  const containerRef = React.useRef(null);
-  const direction = React.useMemo(() => {
-    if (vertical) {
-      return reverse ? 'ttb' : 'btt';
-    }
-    return reverse ? 'rtl' : 'ltr';
-  }, [reverse, vertical]);
-
-  // ============================ Range =============================
-  const [rangeEnabled, rangeEditable, rangeDraggableTrack, minCount, maxCount] = useRange(range);
-  const mergedMin = React.useMemo(() => isFinite(min) ? min : 0, [min]);
-  const mergedMax = React.useMemo(() => isFinite(max) ? max : 100, [max]);
-
-  // ============================= Step =============================
-  const mergedStep = React.useMemo(() => step !== null && step <= 0 ? 1 : step, [step]);
-
-  // ============================= Push =============================
-  const mergedPush = React.useMemo(() => {
-    if (typeof pushable === 'boolean') {
-      return pushable ? mergedStep : false;
-    }
-    return pushable >= 0 ? pushable : false;
-  }, [pushable, mergedStep]);
-
-  // ============================ Marks =============================
-  const markList = React.useMemo(() => {
-    return Object.keys(marks || {}).map(key => {
-      const mark = marks[key];
-      const markObj = {
-        value: Number(key)
-      };
-      if (mark && typeof mark === 'object' && ! /*#__PURE__*/React.isValidElement(mark) && ('label' in mark || 'style' in mark)) {
-        markObj.style = mark.style;
-        markObj.label = mark.label;
-      } else {
-        markObj.label = mark;
-      }
-      return markObj;
-    }).filter(({
-      label
-    }) => label || typeof label === 'number').sort((a, b) => a.value - b.value);
-  }, [marks]);
-
-  // ============================ Format ============================
-  const [formatValue, offsetValues] = useOffset(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush);
-
-  // ============================ Values ============================
-  const [mergedValue, setValue] = useControlledState(defaultValue, value);
-  const rawValues = React.useMemo(() => {
-    const valueList = mergedValue === null || mergedValue === undefined ? [] : Array.isArray(mergedValue) ? mergedValue : [mergedValue];
-    const [val0 = mergedMin] = valueList;
-    let returnValues = mergedValue === null ? [] : [val0];
-
-    // Format as range
-    if (rangeEnabled) {
-      returnValues = [...valueList];
-
-      // When count provided or value is `undefined`, we fill values
-      if (count || mergedValue === undefined) {
-        const pointCount = count >= 0 ? count + 1 : 2;
-        returnValues = returnValues.slice(0, pointCount);
-
-        // Fill with count
-        while (returnValues.length < pointCount) {
-          returnValues.push(returnValues[returnValues.length - 1] ?? mergedMin);
-        }
-      }
-      returnValues.sort((a, b) => a - b);
-    }
-
-    // Align in range
-    returnValues.forEach((val, index) => {
-      returnValues[index] = formatValue(val);
-    });
-    return returnValues;
-  }, [mergedValue, rangeEnabled, mergedMin, count, formatValue]);
-
-  // =========================== onChange ===========================
-  const getTriggerValue = triggerValues => rangeEnabled ? triggerValues : triggerValues[0];
-  const triggerChange = useEvent(nextValues => {
-    // Order first
-    const cloneNextValues = [...nextValues].sort((a, b) => a - b);
-
-    // Trigger event if needed
-    if (onChange && !isEqual(cloneNextValues, rawValues, true)) {
-      onChange(getTriggerValue(cloneNextValues));
-    }
-
-    // We set this later since it will re-render component immediately
-    setValue(cloneNextValues);
-  });
-  const finishChange = useEvent(draggingDelete => {
-    // Trigger from `useDrag` will tell if it's a delete action
-    if (draggingDelete) {
-      handlesRef.current.hideHelp();
-    }
-    const finishValue = getTriggerValue(rawValues);
-    onAfterChange?.(finishValue);
-    warningOnce(!onAfterChange, '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.');
-    onChangeComplete?.(finishValue);
-  });
-  const onDelete = index => {
-    if (disabled || !rangeEditable || rawValues.length <= minCount) {
-      return;
-    }
-    const cloneNextValues = [...rawValues];
-    cloneNextValues.splice(index, 1);
-    onBeforeChange?.(getTriggerValue(cloneNextValues));
-    triggerChange(cloneNextValues);
-    const nextFocusIndex = Math.max(0, index - 1);
-    handlesRef.current.hideHelp();
-    handlesRef.current.focus(nextFocusIndex);
-  };
-  const [draggingIndex, draggingValue, draggingDelete, cacheValues, onStartDrag] = useDrag(containerRef, direction, rawValues, mergedMin, mergedMax, formatValue, triggerChange, finishChange, offsetValues, rangeEditable, minCount);
-
-  /**
-   * When `rangeEditable` will insert a new value in the values array.
-   * Else it will replace the value in the values array.
-   */
-  const changeToCloseValue = (newValue, e) => {
-    if (!disabled) {
-      // Create new values
-      const cloneNextValues = [...rawValues];
-      let valueIndex = 0;
-      let valueBeforeIndex = 0; // Record the index which value < newValue
-      let valueDist = mergedMax - mergedMin;
-      rawValues.forEach((val, index) => {
-        const dist = Math.abs(newValue - val);
-        if (dist <= valueDist) {
-          valueDist = dist;
-          valueIndex = index;
-        }
-        if (val < newValue) {
-          valueBeforeIndex = index;
-        }
-      });
-      let focusIndex = valueIndex;
-      if (rangeEditable && valueDist !== 0 && (!maxCount || rawValues.length < maxCount)) {
-        cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
-        focusIndex = valueBeforeIndex + 1;
-      } else {
-        cloneNextValues[valueIndex] = newValue;
-      }
-
-      // Fill value to match default 2 (only when `rawValues` is empty)
-      if (rangeEnabled && !rawValues.length && count === undefined) {
-        cloneNextValues.push(newValue);
-      }
-      const nextValue = getTriggerValue(cloneNextValues);
-      onBeforeChange?.(nextValue);
-      triggerChange(cloneNextValues);
-      if (e) {
-        document.activeElement?.blur?.();
-        handlesRef.current.focus(focusIndex);
-        onStartDrag(e, focusIndex, cloneNextValues);
-      } else {
-        // https://github.com/ant-design/ant-design/issues/49997
-        onAfterChange?.(nextValue);
-        warningOnce(!onAfterChange, '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.');
-        onChangeComplete?.(nextValue);
-      }
-    }
-  };
-
-  // ============================ Click =============================
-  const onSliderMouseDown = e => {
-    e.preventDefault();
-    const {
-      width,
-      height,
-      left,
-      top,
-      bottom,
-      right
-    } = containerRef.current.getBoundingClientRect();
-    const {
-      clientX,
-      clientY
-    } = e;
-    let percent;
-    switch (direction) {
-      case 'btt':
-        percent = (bottom - clientY) / height;
-        break;
-      case 'ttb':
-        percent = (clientY - top) / height;
-        break;
-      case 'rtl':
-        percent = (right - clientX) / width;
-        break;
-      default:
-        percent = (clientX - left) / width;
-    }
-    const nextValue = mergedMin + percent * (mergedMax - mergedMin);
-    changeToCloseValue(formatValue(nextValue), e);
-  };
-
-  // =========================== Keyboard ===========================
-  const [keyboardValue, setKeyboardValue] = React.useState(null);
-  const onHandleOffsetChange = (offset, valueIndex) => {
-    if (!disabled) {
-      const next = offsetValues(rawValues, offset, valueIndex);
-      onBeforeChange?.(getTriggerValue(rawValues));
-      triggerChange(next.values);
-      setKeyboardValue(next.value);
-    }
-  };
-  React.useEffect(() => {
-    if (keyboardValue !== null) {
-      const valueIndex = rawValues.indexOf(keyboardValue);
-      if (valueIndex >= 0) {
-        handlesRef.current.focus(valueIndex);
-      }
-    }
-    setKeyboardValue(null);
-  }, [keyboardValue]);
-
-  // ============================= Drag =============================
-  const mergedDraggableTrack = React.useMemo(() => {
-    if (rangeDraggableTrack && mergedStep === null) {
-      if (process.env.NODE_ENV !== 'production') {
-        warningOnce(false, '`draggableTrack` is not supported when `step` is `null`.');
-      }
-      return false;
-    }
-    return rangeDraggableTrack;
-  }, [rangeDraggableTrack, mergedStep]);
-  const onStartMove = useEvent((e, valueIndex) => {
-    onStartDrag(e, valueIndex);
-    onBeforeChange?.(getTriggerValue(rawValues));
-  });
-
-  // Auto focus for updated handle
-  const dragging = draggingIndex !== -1;
-  React.useEffect(() => {
-    if (!dragging) {
-      const valueIndex = rawValues.lastIndexOf(draggingValue);
-      handlesRef.current.focus(valueIndex);
-    }
-  }, [dragging]);
-
-  // =========================== Included ===========================
-  const sortedCacheValues = React.useMemo(() => [...cacheValues].sort((a, b) => a - b), [cacheValues]);
-
-  // Provide a range values with included [min, max]
-  // Used for Track, Mark & Dot
-  const [includedStart, includedEnd] = React.useMemo(() => {
-    if (!rangeEnabled) {
-      return [mergedMin, sortedCacheValues[0]];
-    }
-    return [sortedCacheValues[0], sortedCacheValues[sortedCacheValues.length - 1]];
-  }, [sortedCacheValues, rangeEnabled, mergedMin]);
-
-  // ============================= Refs =============================
-  React.useImperativeHandle(ref, () => ({
-    focus: () => {
-      handlesRef.current.focus(0);
-    },
-    blur: () => {
-      const {
-        activeElement
-      } = document;
-      if (containerRef.current?.contains(activeElement)) {
-        activeElement?.blur();
-      }
-    }
-  }));
-
-  // ========================== Auto Focus ==========================
-  React.useEffect(() => {
-    if (autoFocus) {
-      handlesRef.current.focus(0);
-    }
-  }, []);
-
-  // =========================== Context ============================
-  const context = React.useMemo(() => ({
-    min: mergedMin,
-    max: mergedMax,
-    direction,
-    disabled,
-    keyboard,
-    step: mergedStep,
-    included,
-    includedStart,
-    includedEnd,
-    range: rangeEnabled,
-    tabIndex,
-    ariaLabelForHandle,
-    ariaLabelledByForHandle,
-    ariaRequired,
-    ariaValueTextFormatterForHandle,
-    styles: styles || {},
-    classNames: classNames || {}
-  }), [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, rangeEnabled, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaRequired, ariaValueTextFormatterForHandle, styles, classNames]);
-
-  // ============================ Render ============================
-  return /*#__PURE__*/React.createElement(SliderContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    className: cls(prefixCls, className, {
-      [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-vertical`]: vertical,
-      [`${prefixCls}-horizontal`]: !vertical,
-      [`${prefixCls}-with-marks`]: markList.length
-    }),
-    style: style,
-    onMouseDown: onSliderMouseDown,
-    id: id
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cls(`${prefixCls}-rail`, classNames?.rail),
-    style: {
-      ...railStyle,
-      ...styles?.rail
-    }
-  }), track !== false && /*#__PURE__*/React.createElement(Tracks, {
-    prefixCls: prefixCls,
-    style: trackStyle,
-    values: rawValues,
-    startPoint: startPoint,
-    onStartMove: mergedDraggableTrack ? onStartMove : undefined
-  }), /*#__PURE__*/React.createElement(Steps, {
-    prefixCls: prefixCls,
-    marks: markList,
-    dots: dots,
-    style: dotStyle,
-    activeStyle: activeDotStyle
-  }), /*#__PURE__*/React.createElement(Handles, {
-    ref: handlesRef,
-    prefixCls: prefixCls,
-    style: handleStyle,
-    values: cacheValues,
-    draggingIndex: draggingIndex,
-    draggingDelete: draggingDelete,
-    onStartMove: onStartMove,
-    onOffsetChange: onHandleOffsetChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    handleRender: handleRender,
-    activeHandleRender: activeHandleRender,
-    onChangeComplete: finishChange,
-    onDelete: rangeEditable ? onDelete : undefined
-  }), /*#__PURE__*/React.createElement(Marks, {
-    prefixCls: prefixCls,
-    marks: markList,
-    onClick: changeToCloseValue
-  })));
-});
-if (process.env.NODE_ENV !== 'production') {
-  Slider.displayName = 'Slider';
-}
-
-function SliderStyles(_a) {
-    var _b = _a.customStyles, customStyles = _b === void 0 ? {} : _b;
-    return (jsxs(Fragment, { children: [jsx(Global, { styles: customStyles }), jsx(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          .rc-slider {\n            position: relative;\n            width: 100%;\n            height: 14px;\n            padding: 5px 0;\n            border-radius: 6px;\n            touch-action: none;\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          }\n          .rc-slider * {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          }\n          .rc-slider-rail {\n            position: absolute;\n            width: 100%;\n            height: 4px;\n            background-color: #e9e9e9;\n            border-radius: 6px;\n          }\n          .rc-slider-track {\n            position: absolute;\n            height: 4px;\n            background-color: #abe2fb;\n            border-radius: 6px;\n          }\n          .rc-slider-handle {\n            position: absolute;\n            width: 14px;\n            height: 14px;\n            margin-top: -5px;\n            background-color: #fff;\n            border: solid 2px #96dbfa;\n            border-radius: 50%;\n            cursor: pointer;\n            cursor: -webkit-grab;\n            cursor: grab;\n            opacity: 0.8;\n            touch-action: pan-x;\n          }\n          .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {\n            border-color: #57c5f7;\n            box-shadow: 0 0 0 5px #96dbfa;\n          }\n          .rc-slider-handle:focus {\n            outline: none;\n            box-shadow: none;\n          }\n          .rc-slider-handle:focus-visible {\n            border-color: #2db7f5;\n            box-shadow: 0 0 0 3px #96dbfa;\n          }\n          .rc-slider-handle-click-focused:focus {\n            border-color: #96dbfa;\n            box-shadow: unset;\n          }\n          .rc-slider-handle:hover {\n            border-color: #57c5f7;\n          }\n          .rc-slider-handle:active {\n            border-color: #57c5f7;\n            box-shadow: 0 0 5px #57c5f7;\n            cursor: -webkit-grabbing;\n            cursor: grabbing;\n          }\n          .rc-slider-mark {\n            position: absolute;\n            top: 18px;\n            left: 0;\n            width: 100%;\n            font-size: 12px;\n          }\n          .rc-slider-mark-text {\n            position: absolute;\n            display: inline-block;\n            color: #999;\n            text-align: center;\n            vertical-align: middle;\n            cursor: pointer;\n          }\n          .rc-slider-mark-text-active {\n            color: #666;\n          }\n          .rc-slider-step {\n            position: absolute;\n            width: 100%;\n            height: 4px;\n            background: transparent;\n            pointer-events: none;\n          }\n          .rc-slider-dot {\n            position: absolute;\n            bottom: -2px;\n            width: 8px;\n            height: 8px;\n            vertical-align: middle;\n            background-color: #fff;\n            border: 2px solid #e9e9e9;\n            border-radius: 50%;\n            cursor: pointer;\n          }\n          .rc-slider-dot-active {\n            border-color: #96dbfa;\n          }\n          .rc-slider-dot-reverse {\n            margin-right: -4px;\n          }\n          .rc-slider-disabled {\n            background-color: #e9e9e9;\n          }\n          .rc-slider-disabled .rc-slider-track {\n            background-color: #ccc;\n          }\n          .rc-slider-disabled .rc-slider-handle,\n          .rc-slider-disabled .rc-slider-dot {\n            background-color: #fff;\n            border-color: #ccc;\n            box-shadow: none;\n            cursor: not-allowed;\n          }\n          .rc-slider-disabled .rc-slider-mark-text,\n          .rc-slider-disabled .rc-slider-dot {\n            cursor: not-allowed !important;\n          }\n          .rc-slider-vertical {\n            width: 14px;\n            height: 100%;\n            padding: 0 5px;\n          }\n          .rc-slider-vertical .rc-slider-rail {\n            width: 4px;\n            height: 100%;\n          }\n          .rc-slider-vertical .rc-slider-track {\n            bottom: 0;\n            left: 5px;\n            width: 4px;\n          }\n          .rc-slider-vertical .rc-slider-handle {\n            margin-top: 0;\n            margin-left: -5px;\n            touch-action: pan-y;\n          }\n          .rc-slider-vertical .rc-slider-mark {\n            top: 0;\n            left: 18px;\n            height: 100%;\n          }\n          .rc-slider-vertical .rc-slider-step {\n            width: 4px;\n            height: 100%;\n          }\n          .rc-slider-vertical .rc-slider-dot {\n            margin-left: -2px;\n          }\n          .rc-slider-tooltip-zoom-down-enter,\n          .rc-slider-tooltip-zoom-down-appear {\n            display: block !important;\n            animation-duration: 0.3s;\n            animation-fill-mode: both;\n            animation-play-state: paused;\n          }\n          .rc-slider-tooltip-zoom-down-leave {\n            display: block !important;\n            animation-duration: 0.3s;\n            animation-fill-mode: both;\n            animation-play-state: paused;\n          }\n          .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,\n          .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {\n            animation-name: rcSliderTooltipZoomDownIn;\n            animation-play-state: running;\n          }\n          .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {\n            animation-name: rcSliderTooltipZoomDownOut;\n            animation-play-state: running;\n          }\n          .rc-slider-tooltip-zoom-down-enter,\n          .rc-slider-tooltip-zoom-down-appear {\n            transform: scale(0, 0);\n            animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n          }\n          .rc-slider-tooltip-zoom-down-leave {\n            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n          }\n          @keyframes rcSliderTooltipZoomDownIn {\n            0% {\n              transform: scale(0, 0);\n              transform-origin: 50% 100%;\n              opacity: 0;\n            }\n            100% {\n              transform: scale(1, 1);\n              transform-origin: 50% 100%;\n            }\n          }\n          @keyframes rcSliderTooltipZoomDownOut {\n            0% {\n              transform: scale(1, 1);\n              transform-origin: 50% 100%;\n            }\n            100% {\n              transform: scale(0, 0);\n              transform-origin: 50% 100%;\n              opacity: 0;\n            }\n          }\n          .rc-slider-tooltip {\n            position: absolute;\n            top: -9999px;\n            left: -9999px;\n            visibility: visible;\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          }\n          .rc-slider-tooltip * {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          }\n          .rc-slider-tooltip-hidden {\n            display: none;\n          }\n          .rc-slider-tooltip-placement-top {\n            padding: 4px 0 8px 0;\n          }\n          .rc-slider-tooltip-inner {\n            min-width: 24px;\n            height: 24px;\n            padding: 6px 2px;\n            color: #fff;\n            font-size: 12px;\n            line-height: 1;\n            text-align: center;\n            text-decoration: none;\n            background-color: #6c6c6c;\n            border-radius: 6px;\n            box-shadow: 0 0 4px #d9d9d9;\n          }\n          .rc-slider-tooltip-arrow {\n            position: absolute;\n            width: 0;\n            height: 0;\n            border-color: transparent;\n            border-style: solid;\n          }\n          .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {\n            bottom: 4px;\n            left: 50%;\n            margin-left: -4px;\n            border-width: 4px 4px 0;\n            border-top-color: #6c6c6c;\n          }\n        "], ["\n          .rc-slider {\n            position: relative;\n            width: 100%;\n            height: 14px;\n            padding: 5px 0;\n            border-radius: 6px;\n            touch-action: none;\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          }\n          .rc-slider * {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          }\n          .rc-slider-rail {\n            position: absolute;\n            width: 100%;\n            height: 4px;\n            background-color: #e9e9e9;\n            border-radius: 6px;\n          }\n          .rc-slider-track {\n            position: absolute;\n            height: 4px;\n            background-color: #abe2fb;\n            border-radius: 6px;\n          }\n          .rc-slider-handle {\n            position: absolute;\n            width: 14px;\n            height: 14px;\n            margin-top: -5px;\n            background-color: #fff;\n            border: solid 2px #96dbfa;\n            border-radius: 50%;\n            cursor: pointer;\n            cursor: -webkit-grab;\n            cursor: grab;\n            opacity: 0.8;\n            touch-action: pan-x;\n          }\n          .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {\n            border-color: #57c5f7;\n            box-shadow: 0 0 0 5px #96dbfa;\n          }\n          .rc-slider-handle:focus {\n            outline: none;\n            box-shadow: none;\n          }\n          .rc-slider-handle:focus-visible {\n            border-color: #2db7f5;\n            box-shadow: 0 0 0 3px #96dbfa;\n          }\n          .rc-slider-handle-click-focused:focus {\n            border-color: #96dbfa;\n            box-shadow: unset;\n          }\n          .rc-slider-handle:hover {\n            border-color: #57c5f7;\n          }\n          .rc-slider-handle:active {\n            border-color: #57c5f7;\n            box-shadow: 0 0 5px #57c5f7;\n            cursor: -webkit-grabbing;\n            cursor: grabbing;\n          }\n          .rc-slider-mark {\n            position: absolute;\n            top: 18px;\n            left: 0;\n            width: 100%;\n            font-size: 12px;\n          }\n          .rc-slider-mark-text {\n            position: absolute;\n            display: inline-block;\n            color: #999;\n            text-align: center;\n            vertical-align: middle;\n            cursor: pointer;\n          }\n          .rc-slider-mark-text-active {\n            color: #666;\n          }\n          .rc-slider-step {\n            position: absolute;\n            width: 100%;\n            height: 4px;\n            background: transparent;\n            pointer-events: none;\n          }\n          .rc-slider-dot {\n            position: absolute;\n            bottom: -2px;\n            width: 8px;\n            height: 8px;\n            vertical-align: middle;\n            background-color: #fff;\n            border: 2px solid #e9e9e9;\n            border-radius: 50%;\n            cursor: pointer;\n          }\n          .rc-slider-dot-active {\n            border-color: #96dbfa;\n          }\n          .rc-slider-dot-reverse {\n            margin-right: -4px;\n          }\n          .rc-slider-disabled {\n            background-color: #e9e9e9;\n          }\n          .rc-slider-disabled .rc-slider-track {\n            background-color: #ccc;\n          }\n          .rc-slider-disabled .rc-slider-handle,\n          .rc-slider-disabled .rc-slider-dot {\n            background-color: #fff;\n            border-color: #ccc;\n            box-shadow: none;\n            cursor: not-allowed;\n          }\n          .rc-slider-disabled .rc-slider-mark-text,\n          .rc-slider-disabled .rc-slider-dot {\n            cursor: not-allowed !important;\n          }\n          .rc-slider-vertical {\n            width: 14px;\n            height: 100%;\n            padding: 0 5px;\n          }\n          .rc-slider-vertical .rc-slider-rail {\n            width: 4px;\n            height: 100%;\n          }\n          .rc-slider-vertical .rc-slider-track {\n            bottom: 0;\n            left: 5px;\n            width: 4px;\n          }\n          .rc-slider-vertical .rc-slider-handle {\n            margin-top: 0;\n            margin-left: -5px;\n            touch-action: pan-y;\n          }\n          .rc-slider-vertical .rc-slider-mark {\n            top: 0;\n            left: 18px;\n            height: 100%;\n          }\n          .rc-slider-vertical .rc-slider-step {\n            width: 4px;\n            height: 100%;\n          }\n          .rc-slider-vertical .rc-slider-dot {\n            margin-left: -2px;\n          }\n          .rc-slider-tooltip-zoom-down-enter,\n          .rc-slider-tooltip-zoom-down-appear {\n            display: block !important;\n            animation-duration: 0.3s;\n            animation-fill-mode: both;\n            animation-play-state: paused;\n          }\n          .rc-slider-tooltip-zoom-down-leave {\n            display: block !important;\n            animation-duration: 0.3s;\n            animation-fill-mode: both;\n            animation-play-state: paused;\n          }\n          .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,\n          .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {\n            animation-name: rcSliderTooltipZoomDownIn;\n            animation-play-state: running;\n          }\n          .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {\n            animation-name: rcSliderTooltipZoomDownOut;\n            animation-play-state: running;\n          }\n          .rc-slider-tooltip-zoom-down-enter,\n          .rc-slider-tooltip-zoom-down-appear {\n            transform: scale(0, 0);\n            animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n          }\n          .rc-slider-tooltip-zoom-down-leave {\n            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n          }\n          @keyframes rcSliderTooltipZoomDownIn {\n            0% {\n              transform: scale(0, 0);\n              transform-origin: 50% 100%;\n              opacity: 0;\n            }\n            100% {\n              transform: scale(1, 1);\n              transform-origin: 50% 100%;\n            }\n          }\n          @keyframes rcSliderTooltipZoomDownOut {\n            0% {\n              transform: scale(1, 1);\n              transform-origin: 50% 100%;\n            }\n            100% {\n              transform: scale(0, 0);\n              transform-origin: 50% 100%;\n              opacity: 0;\n            }\n          }\n          .rc-slider-tooltip {\n            position: absolute;\n            top: -9999px;\n            left: -9999px;\n            visibility: visible;\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          }\n          .rc-slider-tooltip * {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          }\n          .rc-slider-tooltip-hidden {\n            display: none;\n          }\n          .rc-slider-tooltip-placement-top {\n            padding: 4px 0 8px 0;\n          }\n          .rc-slider-tooltip-inner {\n            min-width: 24px;\n            height: 24px;\n            padding: 6px 2px;\n            color: #fff;\n            font-size: 12px;\n            line-height: 1;\n            text-align: center;\n            text-decoration: none;\n            background-color: #6c6c6c;\n            border-radius: 6px;\n            box-shadow: 0 0 4px #d9d9d9;\n          }\n          .rc-slider-tooltip-arrow {\n            position: absolute;\n            width: 0;\n            height: 0;\n            border-color: transparent;\n            border-style: solid;\n          }\n          .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {\n            bottom: 4px;\n            left: 50%;\n            margin-left: -4px;\n            border-width: 4px 4px 0;\n            border-top-color: #6c6c6c;\n          }\n        "]))) })] }));
-}
-var templateObject_1;
-
-export { SliderStyles as S, Slider as a };