rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

package/dist/rsuite.js

@@ -1236,7 +1236,7 @@ eval("\n\nexports.__esModule = true;\nexports.getAnimationEnd = getAnimationEnd;
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Combobox = _interopRequireDefault(__webpack_require__(/*! ./Combobox */ \"./src/AutoComplete/Combobox.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/AutoComplete/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/AutoComplete/AutoComplete.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Autocomplete function of input field.\n * @see https://rsuitejs.com/components/auto-complete\n *\n * TODO: Remove unnecessary .rs-auto-complete element\n * TODO: role=combobox and aria-autocomplete on input element\n */\nconst AutoComplete = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('AutoComplete', props);\n  const {\n    as,\n    disabled,\n    className,\n    placement = 'bottomStart',\n    selectOnEnter = true,\n    classPrefix = 'auto-complete',\n    defaultValue = '',\n    popupAutoWidth = true,\n    popupClassName,\n    popupStyle,\n    data,\n    value: valueProp,\n    open,\n    style,\n    size,\n    id,\n    readOnly,\n    plaintext,\n    renderListbox,\n    renderOption,\n    onSelect,\n    filterBy,\n    onKeyDown,\n    onChange,\n    onClose,\n    onOpen,\n    onFocus,\n    onBlur,\n    onMenuFocus,\n    ...rest\n  } = propsWithDefaults;\n  const datalist = (0, _utils2.transformData)(data);\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n  const [focus, setFocus] = (0, _react.useState)(false);\n  const items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils2.shouldDisplay)(filterBy, value))) || [];\n  const hasItems = items.length > 0;\n  const {\n    trigger,\n    overlay,\n    root\n  } = (0, _Picker.usePickerRef)(ref);\n  const isMounted = (0, _hooks.useIsMounted)();\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown: handleKeyDown\n  } = (0, _Picker.useFocusItemValue)(value, {\n    data: datalist,\n    focusToOption: false,\n    callback: onMenuFocus,\n    target: () => overlay.current\n  });\n  const handleKeyDownEvent = event => {\n    if (!overlay.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      enter: selectOnEnter ? selectFocusMenuItem : undefined,\n      esc: handleClose\n    });\n    handleKeyDown(event);\n    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);\n  };\n  const selectFocusMenuItem = event => {\n    if (!focusItemValue) {\n      return;\n    }\n    const focusItem = datalist.find(item => (item === null || item === void 0 ? void 0 : item.value) === focusItemValue);\n    setValue(focusItemValue);\n    setFocusItemValue(focusItemValue);\n    handleSelect(focusItem, event);\n    if (value !== focusItemValue) {\n      handleChangeValue(focusItemValue, event);\n    }\n    handleClose();\n  };\n  const handleSelect = (0, _hooks.useEventCallback)((item, event) => {\n    onSelect === null || onSelect === void 0 || onSelect(item.value, item, event);\n  });\n  const handleChangeValue = (0, _hooks.useEventCallback)((value, event) => {\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleChange = (value, event) => {\n    setFocusItemValue('');\n    setValue(value);\n    setFocus(true);\n    handleChangeValue(value, event);\n  };\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    if (isMounted()) {\n      setFocus(false);\n      onClose === null || onClose === void 0 || onClose();\n    }\n  });\n  const handleOpen = (0, _hooks.useEventCallback)(() => {\n    setFocus(true);\n    onOpen === null || onOpen === void 0 || onOpen();\n  });\n  const handleItemSelect = (0, _hooks.useEventCallback)((nextItemValue, item, event) => {\n    setValue(nextItemValue);\n    setFocusItemValue(nextItemValue);\n    handleSelect(item, event);\n    if (value !== nextItemValue) {\n      handleChangeValue(nextItemValue, event);\n    }\n    handleClose();\n  });\n  const handleInputFocus = (0, _hooks.useEventCallback)(event => {\n    onFocus === null || onFocus === void 0 || onFocus(event);\n    handleOpen();\n  });\n  const handleInputBlur = (0, _hooks.useEventCallback)(event => {\n    setTimeout(handleClose, 300);\n    onBlur === null || onBlur === void 0 || onBlur(event);\n  });\n  const {\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    disabled\n  }));\n  const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys));\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName);\n    const listbox = /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      classPrefix: \"auto-complete-menu\",\n      listItemClassPrefix: \"auto-complete-item\",\n      listItemAs: _Picker.ListItem,\n      focusItemValue: focusItemValue,\n      onSelect: handleItemSelect,\n      renderOption: renderOption,\n      data: items,\n      query: value,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 229,\n        columnNumber: 7\n      }\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      onKeyDown: handleKeyDownEvent,\n      target: trigger,\n      style: popupStyle,\n      autoWidth: popupAutoWidth,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 242,\n        columnNumber: 7\n      }\n    }, renderListbox ? renderListbox(listbox) : listbox);\n  };\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"unfilled\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 257,\n        columnNumber: 7\n      }\n    }, typeof value === 'undefined' ? defaultValue : value);\n  }\n  const expanded = open || focus && hasItems;\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    ref: trigger,\n    placement: placement,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    trigger: ['click', 'focus'],\n    open: expanded,\n    speaker: renderPopup,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 266,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    className: classes,\n    style: style,\n    ref: root\n  }, restProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 275,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Combobox.default, (0, _extends2.default)({}, htmlInputProps, {\n    disabled: disabled,\n    value: value,\n    size: size,\n    readOnly: readOnly,\n    expanded: expanded,\n    focusItemValue: focusItemValue,\n    onBlur: handleInputBlur,\n    onFocus: handleInputFocus,\n    onChange: handleChange,\n    onKeyDown: handleKeyDownEvent,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 276,\n      columnNumber: 9\n    }\n  }))));\n});\nAutoComplete.displayName = 'AutoComplete';\nvar _default = exports[\"default\"] = AutoComplete;\n\n//# sourceURL=webpack://rsuite/./src/AutoComplete/AutoComplete.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Combobox = _interopRequireDefault(__webpack_require__(/*! ./Combobox */ \"./src/AutoComplete/Combobox.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/AutoComplete/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/AutoComplete/AutoComplete.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Autocomplete function of input field.\n * @see https://rsuitejs.com/components/auto-complete\n *\n * TODO: Remove unnecessary .rs-auto-complete element\n * TODO: role=combobox and aria-autocomplete on input element\n */\nconst AutoComplete = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('AutoComplete', props);\n  const {\n    as,\n    disabled,\n    className,\n    placement = 'bottomStart',\n    selectOnEnter = true,\n    classPrefix = 'auto-complete',\n    defaultValue = '',\n    popupAutoWidth = true,\n    popupClassName,\n    popupStyle,\n    data,\n    value: valueProp,\n    open,\n    style,\n    size,\n    id,\n    readOnly,\n    plaintext,\n    renderListbox,\n    renderOption,\n    onSelect,\n    filterBy,\n    onKeyDown,\n    onChange,\n    onClose,\n    onOpen,\n    onFocus,\n    onBlur,\n    onMenuFocus,\n    ...rest\n  } = propsWithDefaults;\n  const datalist = (0, _utils2.transformData)(data);\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n  const [focus, setFocus] = (0, _react.useState)(false);\n  const items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils2.shouldDisplay)(filterBy, value))) || [];\n  const hasItems = items.length > 0;\n  const {\n    trigger,\n    overlay,\n    root\n  } = (0, _Picker.usePickerRef)(ref);\n  const isMounted = (0, _hooks.useIsMounted)();\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown: handleKeyDown\n  } = (0, _Picker.useFocusItemValue)(value, {\n    data: datalist,\n    focusToOption: false,\n    callback: onMenuFocus,\n    target: () => overlay.current\n  });\n  const handleKeyDownEvent = event => {\n    if (!overlay.current) {\n      return;\n    }\n    (0, _Picker.onMenuKeyDown)(event, {\n      enter: selectOnEnter ? selectFocusMenuItem : undefined,\n      esc: handleClose\n    });\n    handleKeyDown(event);\n    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);\n  };\n  const selectFocusMenuItem = event => {\n    if (!focusItemValue) {\n      return;\n    }\n    const focusItem = datalist.find(item => (item === null || item === void 0 ? void 0 : item.value) === focusItemValue);\n    setValue(focusItemValue);\n    setFocusItemValue(focusItemValue);\n    handleSelect(focusItem, event);\n    if (value !== focusItemValue) {\n      handleChangeValue(focusItemValue, event);\n    }\n    handleClose();\n  };\n  const handleSelect = (0, _hooks.useEventCallback)((item, event) => {\n    onSelect === null || onSelect === void 0 || onSelect(item.value, item, event);\n  });\n  const handleChangeValue = (0, _hooks.useEventCallback)((value, event) => {\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleChange = (value, event) => {\n    setFocusItemValue('');\n    setValue(value);\n    setFocus(true);\n    handleChangeValue(value, event);\n  };\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    if (isMounted()) {\n      setFocus(false);\n      onClose === null || onClose === void 0 || onClose();\n    }\n  });\n  const handleOpen = (0, _hooks.useEventCallback)(() => {\n    setFocus(true);\n    onOpen === null || onOpen === void 0 || onOpen();\n  });\n  const handleItemSelect = (0, _hooks.useEventCallback)((nextItemValue, item, event) => {\n    setValue(nextItemValue);\n    setFocusItemValue(nextItemValue);\n    handleSelect(item, event);\n    if (value !== nextItemValue) {\n      handleChangeValue(nextItemValue, event);\n    }\n    handleClose();\n  });\n  const handleInputFocus = (0, _hooks.useEventCallback)(event => {\n    onFocus === null || onFocus === void 0 || onFocus(event);\n    handleOpen();\n  });\n  const handleInputBlur = (0, _hooks.useEventCallback)(event => {\n    setTimeout(handleClose, 300);\n    onBlur === null || onBlur === void 0 || onBlur(event);\n  });\n  const {\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    disabled\n  }));\n  const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.triggerPropKeys));\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName);\n    const listbox = /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      classPrefix: \"auto-complete-menu\",\n      listItemClassPrefix: \"auto-complete-item\",\n      listItemAs: _Picker.ListItem,\n      focusItemValue: focusItemValue,\n      onSelect: handleItemSelect,\n      renderOption: renderOption,\n      data: items,\n      query: value,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 229,\n        columnNumber: 7\n      }\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      onKeyDown: handleKeyDownEvent,\n      target: trigger,\n      style: popupStyle,\n      autoWidth: popupAutoWidth,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 242,\n        columnNumber: 7\n      }\n    }, renderListbox ? renderListbox(listbox) : listbox);\n  };\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"unfilled\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 257,\n        columnNumber: 7\n      }\n    }, typeof value === 'undefined' ? defaultValue : value);\n  }\n  const expanded = open || focus && hasItems;\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    open: expanded\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({\n    as: as,\n    id: id,\n    ref: trigger,\n    placement: placement,\n    triggerProps: triggerProps,\n    trigger: ['click', 'focus'],\n    speaker: renderPopup,\n    className: classes,\n    style: style,\n    rootRef: root,\n    responsive: false\n  }, restProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 271,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Combobox.default, (0, _extends2.default)({}, htmlInputProps, {\n    disabled: disabled,\n    value: value,\n    size: size,\n    readOnly: readOnly,\n    expanded: expanded,\n    focusItemValue: focusItemValue,\n    onBlur: handleInputBlur,\n    onFocus: handleInputFocus,\n    onChange: handleChange,\n    onKeyDown: handleKeyDownEvent,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 285,\n      columnNumber: 7\n    }\n  })));\n});\nAutoComplete.displayName = 'AutoComplete';\nvar _default = exports[\"default\"] = AutoComplete;\n\n//# sourceURL=webpack://rsuite/./src/AutoComplete/AutoComplete.tsx?");
 
 /***/ }),
 
@@ -1280,7 +1280,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _StyledBox = _interopRequireDefault(__webpack_require__(/*! ../internals/StyledBox */ \"./src/internals/StyledBox/index.tsx\"));\nvar _AvatarIcon = _interopRequireDefault(__webpack_require__(/*! ./AvatarIcon */ \"./src/Avatar/AvatarIcon.tsx\"));\nvar _useImage = _interopRequireDefault(__webpack_require__(/*! ./useImage */ \"./src/Avatar/useImage.ts\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _AvatarGroup = __webpack_require__(/*! ../AvatarGroup/AvatarGroup */ \"./src/AvatarGroup/AvatarGroup.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Avatar/Avatar.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The Avatar component is used to represent user or brand.\n * @see https://rsuitejs.com/components/avatar\n */\nconst Avatar = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    size: groupSize\n  } = (0, _react.useContext)(_AvatarGroup.AvatarGroupContext);\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Avatar', props);\n  const {\n    as = 'div',\n    bordered,\n    alt,\n    className,\n    children,\n    circle,\n    color,\n    classPrefix = 'avatar',\n    size = groupSize,\n    src,\n    srcSet,\n    sizes,\n    imgProps,\n    onError,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    circle,\n    bordered\n  }));\n  const imageProps = {\n    ...imgProps,\n    alt,\n    src,\n    srcSet,\n    sizes\n  };\n  const {\n    loaded\n  } = (0, _useImage.default)({\n    ...imageProps,\n    onError\n  });\n  const altComponent = (0, _react.useMemo)(() => {\n    if (alt) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        role: \"img\",\n        \"aria-label\": alt,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 103,\n          columnNumber: 9\n        }\n      }, alt);\n    }\n    return null;\n  }, [alt]);\n  const placeholder = children || altComponent || /*#__PURE__*/_react.default.createElement(_AvatarIcon.default, {\n    className: prefix`icon`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 112,\n      columnNumber: 51\n    }\n  });\n  const image = loaded ? /*#__PURE__*/_react.default.createElement(\"img\", (0, _extends2.default)({}, imageProps, {\n    className: prefix`image`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 113,\n      columnNumber: 26\n    }\n  })) : placeholder;\n  return /*#__PURE__*/_react.default.createElement(_StyledBox.default, (0, _extends2.default)({\n    as: as,\n    name: \"avatar\",\n    size: size,\n    color: color,\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 116,\n      columnNumber: 5\n    }\n  }), src ? image : placeholder);\n});\nAvatar.displayName = 'Avatar';\nvar _default = exports[\"default\"] = Avatar;\n\n//# sourceURL=webpack://rsuite/./src/Avatar/Avatar.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _StyledBox = _interopRequireDefault(__webpack_require__(/*! ../internals/StyledBox */ \"./src/internals/StyledBox/index.tsx\"));\nvar _AvatarIcon = _interopRequireDefault(__webpack_require__(/*! ./AvatarIcon */ \"./src/Avatar/AvatarIcon.tsx\"));\nvar _useImage = _interopRequireDefault(__webpack_require__(/*! ./useImage */ \"./src/Avatar/useImage.ts\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _AvatarGroup = __webpack_require__(/*! ../AvatarGroup/AvatarGroup */ \"./src/AvatarGroup/AvatarGroup.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Avatar/Avatar.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The Avatar component is used to represent user or brand.\n * @see https://rsuitejs.com/components/avatar\n */\nconst Avatar = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    size: groupSize\n  } = (0, _react.useContext)(_AvatarGroup.AvatarGroupContext);\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Avatar', props);\n  const {\n    as = 'div',\n    bordered,\n    alt,\n    className,\n    children,\n    circle,\n    color,\n    classPrefix = 'avatar',\n    size = groupSize,\n    src,\n    srcSet,\n    sizes,\n    imgProps,\n    onError,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    circle,\n    bordered\n  }));\n  const imageProps = {\n    ...imgProps,\n    alt,\n    src,\n    srcSet,\n    sizes\n  };\n  const {\n    loaded\n  } = (0, _useImage.default)({\n    ...imageProps,\n    onError\n  });\n  const altComponent = (0, _react.useMemo)(() => {\n    if (alt) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", {\n        role: \"img\",\n        \"aria-label\": alt,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 101,\n          columnNumber: 9\n        }\n      }, alt);\n    }\n    return null;\n  }, [alt]);\n  const placeholder = children || altComponent || /*#__PURE__*/_react.default.createElement(_AvatarIcon.default, {\n    className: prefix`icon`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 110,\n      columnNumber: 51\n    }\n  });\n  const image = loaded ? /*#__PURE__*/_react.default.createElement(\"img\", (0, _extends2.default)({}, imageProps, {\n    className: prefix`image`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 111,\n      columnNumber: 26\n    }\n  })) : placeholder;\n  return /*#__PURE__*/_react.default.createElement(_StyledBox.default, (0, _extends2.default)({\n    as: as,\n    name: \"avatar\",\n    size: size,\n    color: color,\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 114,\n      columnNumber: 5\n    }\n  }), src ? image : placeholder);\n});\nAvatar.displayName = 'Avatar';\nvar _default = exports[\"default\"] = Avatar;\n\n//# sourceURL=webpack://rsuite/./src/Avatar/Avatar.tsx?");
 
 /***/ }),
 
@@ -1379,7 +1379,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _BreadcrumbItem = _interopRequireDefault(__webpack_require__(/*! ./BreadcrumbItem */ \"./src/Breadcrumb/BreadcrumbItem.tsx\"));\nvar _StyledBox = _interopRequireDefault(__webpack_require__(/*! ../internals/StyledBox */ \"./src/internals/StyledBox/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Breadcrumb/Breadcrumb.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst Subcomponents = {\n  Item: _BreadcrumbItem.default\n};\nconst Separator = (0, _utils.createComponent)({\n  name: 'BreadcrumbSeparator',\n  componentAs: 'span',\n  'aria-hidden': true\n});\n\n/**\n * The Breadcrumb component is used to indicate the current page location and navigate.\n * @see https://rsuitejs.com/components/breadcrumb\n */\nconst Breadcrumb = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Breadcrumb', props);\n  const {\n    as = 'nav',\n    className,\n    classPrefix = 'breadcrumb',\n    children,\n    ellipsis = '...',\n    maxItems = 5,\n    separator = '/',\n    size = 'md',\n    locale,\n    onExpand,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const [showEllipsis, setShowEllipsis] = (0, _react.useState)(true);\n  const handleClickEllipsis = (0, _hooks.useEventCallback)(event => {\n    setShowEllipsis(false);\n    onExpand === null || onExpand === void 0 || onExpand(event);\n  });\n  const content = (0, _react.useMemo)(() => {\n    const count = _utils.ReactChildren.count(children);\n    const items = _utils.ReactChildren.mapCloneElement(children, (item, index) => {\n      const isLast = index === count - 1;\n      return {\n        ...item.props,\n        separator: isLast ? null : /*#__PURE__*/_react.default.createElement(Separator, {\n          __self: void 0,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 89,\n            columnNumber: 38\n          }\n        }, separator)\n      };\n    });\n    if (count > maxItems && count > 2 && showEllipsis) {\n      return [...items.slice(0, 1), [/*#__PURE__*/_react.default.createElement(_BreadcrumbItem.default, {\n        role: \"button\",\n        key: \"ellipsis\",\n        title: locale === null || locale === void 0 ? void 0 : locale.expandText,\n        \"aria-label\": locale === null || locale === void 0 ? void 0 : locale.expandText,\n        separator: /*#__PURE__*/_react.default.createElement(Separator, {\n          __self: void 0,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 102,\n            columnNumber: 26\n          }\n        }, separator),\n        onClick: handleClickEllipsis,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 97,\n          columnNumber: 13\n        }\n      }, /*#__PURE__*/_react.default.createElement(\"span\", {\n        \"aria-hidden\": true,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 105,\n          columnNumber: 15\n        }\n      }, ellipsis))], ...items.slice(items.length - 1, items.length)];\n    }\n    return items;\n  }, [children, ellipsis, handleClickEllipsis, locale === null || locale === void 0 ? void 0 : locale.expandText, maxItems, separator, showEllipsis]);\n  const classes = merge(className, withPrefix());\n  return /*#__PURE__*/_react.default.createElement(_StyledBox.default, (0, _extends2.default)({\n    name: \"breadcrumb\",\n    as: as,\n    size: size\n  }, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 125,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"ol\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 126,\n      columnNumber: 9\n    }\n  }, content));\n}, Subcomponents);\nBreadcrumb.displayName = 'Breadcrumb';\nvar _default = exports[\"default\"] = Breadcrumb;\n\n//# sourceURL=webpack://rsuite/./src/Breadcrumb/Breadcrumb.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _BreadcrumbItem = _interopRequireDefault(__webpack_require__(/*! ./BreadcrumbItem */ \"./src/Breadcrumb/BreadcrumbItem.tsx\"));\nvar _StyledBox = _interopRequireDefault(__webpack_require__(/*! ../internals/StyledBox */ \"./src/internals/StyledBox/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Breadcrumb/Breadcrumb.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst Subcomponents = {\n  Item: _BreadcrumbItem.default\n};\nconst Separator = (0, _utils.createComponent)({\n  name: 'BreadcrumbSeparator',\n  componentAs: 'span',\n  'aria-hidden': true\n});\n\n/**\n * The Breadcrumb component is used to indicate the current page location and navigate.\n * @see https://rsuitejs.com/components/breadcrumb\n */\nconst Breadcrumb = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Breadcrumb', props);\n  const {\n    as = 'nav',\n    className,\n    classPrefix = 'breadcrumb',\n    children,\n    ellipsis = '...',\n    maxItems = 5,\n    separator = '/',\n    size = 'md',\n    locale,\n    onExpand,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const [showEllipsis, setShowEllipsis] = (0, _react.useState)(true);\n  const handleClickEllipsis = (0, _hooks.useEventCallback)(event => {\n    setShowEllipsis(false);\n    onExpand === null || onExpand === void 0 || onExpand(event);\n  });\n  const content = (0, _react.useMemo)(() => {\n    const count = _utils.rch.count(children);\n    const items = _utils.rch.mapCloneElement(children, (item, index) => {\n      const isLast = index === count - 1;\n      return {\n        ...item.props,\n        separator: isLast ? null : /*#__PURE__*/_react.default.createElement(Separator, {\n          __self: void 0,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 89,\n            columnNumber: 38\n          }\n        }, separator)\n      };\n    });\n    if (count > maxItems && count > 2 && showEllipsis) {\n      return [...items.slice(0, 1), [/*#__PURE__*/_react.default.createElement(_BreadcrumbItem.default, {\n        role: \"button\",\n        key: \"ellipsis\",\n        title: locale === null || locale === void 0 ? void 0 : locale.expandText,\n        \"aria-label\": locale === null || locale === void 0 ? void 0 : locale.expandText,\n        separator: /*#__PURE__*/_react.default.createElement(Separator, {\n          __self: void 0,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 102,\n            columnNumber: 26\n          }\n        }, separator),\n        onClick: handleClickEllipsis,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 97,\n          columnNumber: 13\n        }\n      }, /*#__PURE__*/_react.default.createElement(\"span\", {\n        \"aria-hidden\": true,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 105,\n          columnNumber: 15\n        }\n      }, ellipsis))], ...items.slice(items.length - 1, items.length)];\n    }\n    return items;\n  }, [children, ellipsis, handleClickEllipsis, locale === null || locale === void 0 ? void 0 : locale.expandText, maxItems, separator, showEllipsis]);\n  const classes = merge(className, withPrefix());\n  return /*#__PURE__*/_react.default.createElement(_StyledBox.default, (0, _extends2.default)({\n    name: \"breadcrumb\",\n    as: as,\n    size: size\n  }, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 125,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"ol\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 126,\n      columnNumber: 9\n    }\n  }, content));\n}, Subcomponents);\nBreadcrumb.displayName = 'Breadcrumb';\nvar _default = exports[\"default\"] = Breadcrumb;\n\n//# sourceURL=webpack://rsuite/./src/Breadcrumb/Breadcrumb.tsx?");
 
 /***/ }),
 
@@ -1390,7 +1390,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Breadcrumb/BreadcrumbItem.tsx\";\n/**\n * The `<Breadcrumb.Item>` component is used to specify each section of the Breadcrumb.\n * @see https://rsuitejs.com/components/breadcrumb\n */\nconst BreadcrumbItem = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    wrapperAs = 'li',\n    href,\n    as: Component = href ? _SafeAnchor.default : 'span',\n    classPrefix = 'breadcrumb-item',\n    title,\n    target,\n    className,\n    style,\n    active,\n    children,\n    separator,\n    icon,\n    ...rest\n  } = props;\n  const {\n    merge,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    active\n  }));\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: wrapperAs,\n    style: style,\n    className: classes,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 70,\n      columnNumber: 7\n    }\n  }), icon, active ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 73,\n      columnNumber: 11\n    }\n  }, children) : /*#__PURE__*/_react.default.createElement(Component, {\n    href: href,\n    title: title,\n    target: target,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 75,\n      columnNumber: 11\n    }\n  }, children), separator);\n});\nBreadcrumbItem.displayName = 'BreadcrumbItem';\nvar _default = exports[\"default\"] = BreadcrumbItem;\n\n//# sourceURL=webpack://rsuite/./src/Breadcrumb/BreadcrumbItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../internals/SafeAnchor */ \"./src/internals/SafeAnchor/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Breadcrumb/BreadcrumbItem.tsx\";\n/**\n * The `<Breadcrumb.Item>` component is used to specify each section of the Breadcrumb.\n * @see https://rsuitejs.com/components/breadcrumb\n */\nconst BreadcrumbItem = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    wrapperAs = 'li',\n    href,\n    as: Component = href ? _SafeAnchor.default : 'span',\n    classPrefix = 'breadcrumb-item',\n    title,\n    target,\n    className,\n    style,\n    active,\n    children,\n    separator,\n    icon,\n    ...rest\n  } = props;\n  const {\n    merge,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    active\n  }));\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: wrapperAs,\n    style: style,\n    className: classes,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 70,\n      columnNumber: 7\n    }\n  }), icon, active ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 73,\n      columnNumber: 11\n    }\n  }, children) : /*#__PURE__*/_react.default.createElement(Component, {\n    href: href,\n    title: title,\n    target: target,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 75,\n      columnNumber: 11\n    }\n  }, children), separator);\n});\nBreadcrumbItem.displayName = 'BreadcrumbItem';\nvar _default = exports[\"default\"] = BreadcrumbItem;\n\n//# sourceURL=webpack://rsuite/./src/Breadcrumb/BreadcrumbItem.tsx?");
 
 /***/ }),
 
@@ -1412,7 +1412,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\nvar _ButtonGroup = __webpack_require__(/*! ../ButtonGroup */ \"./src/ButtonGroup/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Button/Button.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The Button component is used to trigger a custom action.\n * @see https://rsuitejs.com/components/button\n */\nconst Button = (0, _utils.forwardRef)((props, ref) => {\n  var _rest$role;\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Button', props);\n  const buttonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);\n  const {\n    as,\n    active: activeProp,\n    appearance = 'default',\n    block,\n    className,\n    children,\n    classPrefix = 'btn',\n    color,\n    disabled = buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.disabled,\n    loading,\n    ripple = true,\n    size = (buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size) || 'md',\n    startIcon,\n    endIcon,\n    type: typeProp,\n    toggleable,\n    onToggle,\n    onClick,\n    ...rest\n  } = propsWithDefaults;\n  const [active, setActive] = (0, _hooks.useControlled)(activeProp, false);\n  const {\n    withPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix(appearance, color, size, {\n    active,\n    disabled,\n    loading,\n    block\n  }));\n  const buttonContent = (0, _react.useMemo)(() => {\n    const spin = /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix`spin`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 96,\n        columnNumber: 18\n      }\n    });\n    const rippleElement = ripple && !(0, _utils.isOneOf)(appearance, ['link', 'ghost']) ? /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 97,\n        columnNumber: 79\n      }\n    }) : null;\n    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && spin, startIcon ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix`start-icon`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 102,\n        columnNumber: 22\n      }\n    }, startIcon) : null, children, endIcon ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix`end-icon`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 104,\n        columnNumber: 20\n      }\n    }, endIcon) : null, rippleElement);\n  }, [appearance, children, endIcon, loading, prefix, ripple, startIcon]);\n  const handleClick = (0, _hooks.useEventCallback)(event => {\n    if (toggleable) {\n      const nextActive = !active;\n      setActive(nextActive);\n      onToggle === null || onToggle === void 0 || onToggle(nextActive, event);\n    }\n    onClick === null || onClick === void 0 || onClick(event);\n  });\n  const buttonAs = as || (rest.href ? _SafeAnchor.default : 'button');\n  const isCustomElement = buttonAs !== 'button' && buttonAs !== _SafeAnchor.default;\n  const type = typeProp !== null && typeProp !== void 0 ? typeProp : buttonAs === 'button' ? 'button' : undefined;\n  const role = (_rest$role = rest.role) !== null && _rest$role !== void 0 ? _rest$role : isCustomElement ? 'button' : undefined;\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({}, rest, {\n    as: buttonAs,\n    role: role,\n    type: type,\n    ref: ref,\n    disabled: disabled,\n    \"aria-disabled\": disabled,\n    className: classes,\n    onClick: handleClick,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 126,\n      columnNumber: 5\n    }\n  }), buttonContent);\n});\nButton.displayName = 'Button';\nvar _default = exports[\"default\"] = Button;\n\n//# sourceURL=webpack://rsuite/./src/Button/Button.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../internals/SafeAnchor */ \"./src/internals/SafeAnchor/index.tsx\"));\nvar _ButtonGroup = __webpack_require__(/*! ../ButtonGroup */ \"./src/ButtonGroup/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Button/Button.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The Button component is used to trigger a custom action.\n * @see https://rsuitejs.com/components/button\n */\nconst Button = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Button', props);\n  const buttonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);\n  const {\n    as,\n    active: activeProp,\n    appearance = 'default',\n    block,\n    className,\n    children,\n    classPrefix = 'btn',\n    color,\n    disabled = buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.disabled,\n    loading,\n    role,\n    ripple = true,\n    size = (buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size) || 'md',\n    startIcon,\n    endIcon,\n    type: typeProp,\n    toggleable,\n    onToggle,\n    onClick,\n    ...rest\n  } = propsWithDefaults;\n  const [active, setActive] = (0, _hooks.useControlled)(activeProp, false);\n  const {\n    withPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix(appearance, color, size, {\n    active,\n    disabled,\n    loading,\n    block\n  }));\n  const buttonContent = (0, _react.useMemo)(() => {\n    const spin = /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix`spin`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 97,\n        columnNumber: 18\n      }\n    });\n    const rippleElement = ripple && !(0, _utils.isOneOf)(appearance, ['link', 'ghost']) ? /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 98,\n        columnNumber: 79\n      }\n    }) : null;\n    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && spin, startIcon ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix`start-icon`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 103,\n        columnNumber: 22\n      }\n    }, startIcon) : null, children, endIcon ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      className: prefix`end-icon`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 105,\n        columnNumber: 20\n      }\n    }, endIcon) : null, rippleElement);\n  }, [appearance, children, endIcon, loading, prefix, ripple, startIcon]);\n  const handleClick = (0, _hooks.useEventCallback)(event => {\n    if (toggleable) {\n      const nextActive = !active;\n      setActive(nextActive);\n      onToggle === null || onToggle === void 0 || onToggle(nextActive, event);\n    }\n    onClick === null || onClick === void 0 || onClick(event);\n  });\n  const buttonAs = as || (rest.href ? _SafeAnchor.default : 'button');\n  const isCustomElement = buttonAs !== 'button' && buttonAs !== _SafeAnchor.default;\n  const uncertainProps = {\n    [(0, _utils.isDisableableElement)(buttonAs) || buttonAs === _SafeAnchor.default ? 'disabled' : 'aria-disabled']: disabled,\n    type: typeProp !== null && typeProp !== void 0 ? typeProp : buttonAs === 'button' ? 'button' : undefined,\n    role: role !== null && role !== void 0 ? role : isCustomElement ? 'button' : undefined\n  };\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: buttonAs,\n    ref: ref,\n    className: classes,\n    onClick: handleClick\n  }, uncertainProps, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 5\n    }\n  }), buttonContent);\n});\nButton.displayName = 'Button';\nvar _default = exports[\"default\"] = Button;\n\n//# sourceURL=webpack://rsuite/./src/Button/Button.tsx?");
 
 /***/ }),
 
@@ -1885,7 +1885,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Carousel/Carousel.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The Carousel component is used to display a series of content.\n * @see https://rsuitejs.com/components/carousel\n */\nconst Carousel = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    rtl,\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Carousel', props);\n  const {\n    as,\n    children,\n    classPrefix = 'carousel',\n    className,\n    placement = 'bottom',\n    shape = 'dot',\n    autoplay,\n    autoplayInterval = 4000,\n    activeIndex: activeIndexProp,\n    defaultActiveIndex = 0,\n    onSelect,\n    onSlideStart,\n    onSlideEnd,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    prefix,\n    merge,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const count = _utils.ReactChildren.count(children);\n  const labels = [];\n  const vertical = placement === 'left' || placement === 'right';\n  const lengthKey = vertical ? 'height' : 'width';\n  const [activeIndex, setActiveIndex, isControlled] = (0, _hooks.useControlled)(activeIndexProp, defaultActiveIndex);\n  const [lastIndex, setLastIndex] = (0, _react.useState)(0);\n  const rootRef = (0, _react.useRef)(null);\n  (0, _hooks.useUpdateEffect)(() => {\n    // When the index is controlled, the index is not updated when the number of children changes.\n    if (isControlled) {\n      return;\n    }\n    // Reset the index when the number of children changes.\n    setActiveIndex(0);\n  }, [children, isControlled]);\n\n  // Set a timer for automatic playback.\n  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.\n  const {\n    clear,\n    reset\n  } = (0, _hooks.useTimeout)(() => handleSlide(), autoplayInterval, !!autoplay && count > 1);\n  const handleSlide = (0, _react.useCallback)((nextActiveIndex, event) => {\n    if (!rootRef.current) {\n      return;\n    }\n    clear();\n    const index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1;\n\n    // When index is greater than count, start from 1 again.\n    const nextIndex = index % count;\n    setActiveIndex(nextIndex);\n    onSlideStart === null || onSlideStart === void 0 || onSlideStart(nextIndex, event);\n    setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex);\n    reset();\n  }, [activeIndex, count, setActiveIndex, clear, onSlideStart, reset]);\n  const handleChange = event => {\n    const activeIndex = +event.target.value;\n    handleSlide(activeIndex, event);\n    onSelect === null || onSelect === void 0 || onSelect(activeIndex, event);\n  };\n  const handleTransitionEnd = (0, _react.useCallback)(event => {\n    onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(activeIndex, event);\n  }, [activeIndex, onSlideEnd]);\n  const uniqueId = (0, _react.useMemo)(() => (0, _utils.guid)(), []);\n  const items = _utils.ReactChildren.map(children, (child, index) => {\n    var _child$props;\n    if (!child) {\n      return;\n    }\n    const inputKey = `indicator_${uniqueId}_${index}`;\n    labels.push(/*#__PURE__*/_react.default.createElement(\"li\", {\n      key: `label${index}`,\n      className: prefix('label-wrapper'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 133,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"input\", {\n      name: inputKey,\n      id: inputKey,\n      type: \"radio\",\n      onChange: handleChange,\n      value: index,\n      checked: activeIndex === index,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 134,\n        columnNumber: 11\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"label\", {\n      htmlFor: inputKey,\n      className: prefix('label'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 142,\n        columnNumber: 11\n      }\n    })));\n    return /*#__PURE__*/_react.default.cloneElement(child, {\n      key: `slider-item${index}`,\n      'aria-hidden': activeIndex !== index,\n      style: {\n        ...child.props.style,\n        [lengthKey]: `${100 / count}%`\n      },\n      className: (0, _classnames.default)(prefix('slider-item'), (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className)\n    });\n  });\n  const classes = merge(className, withPrefix(`placement-${placement}`, `shape-${shape}`));\n  const positiveOrder = vertical || !rtl;\n  const sign = positiveOrder ? '-' : '';\n  const activeRatio = `${sign}${100 / count * activeIndex}%`;\n  const sliderStyles = {\n    [lengthKey]: `${count * 100}%`,\n    transform: vertical ? `translate3d(0, ${activeRatio} ,0)` : `translate3d(${activeRatio}, 0 ,0)`\n  };\n  const showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(ref, rootRef),\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 167,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('content'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 168,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"div\", {\n    \"data-testid\": \"carousel-slider\",\n    className: prefix('slider'),\n    style: sliderStyles,\n    onTransitionEnd: handleTransitionEnd,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 169,\n      columnNumber: 9\n    }\n  }, items), showMask && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('slider-after', {\n      'slider-after-vertical': vertical\n    }),\n    style: {\n      [lengthKey]: '200%'\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 178,\n      columnNumber: 11\n    }\n  }, [items[items.length - 1], items[0]].map(node => /*#__PURE__*/_react.default.cloneElement(node, {\n    key: node.key,\n    style: {\n      ...node.props.style,\n      [lengthKey]: '50%'\n    }\n  })))), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('toolbar'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 191,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"ul\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 192,\n      columnNumber: 9\n    }\n  }, labels)));\n});\nCarousel.displayName = 'Carousel';\nvar _default = exports[\"default\"] = Carousel;\n\n//# sourceURL=webpack://rsuite/./src/Carousel/Carousel.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Carousel/Carousel.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The Carousel component is used to display a series of content.\n * @see https://rsuitejs.com/components/carousel\n */\nconst Carousel = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    rtl,\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Carousel', props);\n  const {\n    as,\n    children,\n    classPrefix = 'carousel',\n    className,\n    placement = 'bottom',\n    shape = 'dot',\n    autoplay,\n    autoplayInterval = 4000,\n    activeIndex: activeIndexProp,\n    defaultActiveIndex = 0,\n    onSelect,\n    onSlideStart,\n    onSlideEnd,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    prefix,\n    merge,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const count = _utils.rch.count(children);\n  const labels = [];\n  const vertical = placement === 'left' || placement === 'right';\n  const lengthKey = vertical ? 'height' : 'width';\n  const [activeIndex, setActiveIndex, isControlled] = (0, _hooks.useControlled)(activeIndexProp, defaultActiveIndex);\n  const [lastIndex, setLastIndex] = (0, _react.useState)(0);\n  const rootRef = (0, _react.useRef)(null);\n  (0, _hooks.useUpdateEffect)(() => {\n    // When the index is controlled, the index is not updated when the number of children changes.\n    if (isControlled) {\n      return;\n    }\n    // Reset the index when the number of children changes.\n    setActiveIndex(0);\n  }, [children, isControlled]);\n\n  // Set a timer for automatic playback.\n  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.\n  const {\n    clear,\n    reset\n  } = (0, _hooks.useTimeout)(() => handleSlide(), autoplayInterval, !!autoplay && count > 1);\n  const handleSlide = (0, _react.useCallback)((nextActiveIndex, event) => {\n    if (!rootRef.current) {\n      return;\n    }\n    clear();\n    const index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1;\n\n    // When index is greater than count, start from 1 again.\n    const nextIndex = index % count;\n    setActiveIndex(nextIndex);\n    onSlideStart === null || onSlideStart === void 0 || onSlideStart(nextIndex, event);\n    setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex);\n    reset();\n  }, [activeIndex, count, setActiveIndex, clear, onSlideStart, reset]);\n  const handleChange = event => {\n    const activeIndex = +event.target.value;\n    handleSlide(activeIndex, event);\n    onSelect === null || onSelect === void 0 || onSelect(activeIndex, event);\n  };\n  const handleTransitionEnd = (0, _react.useCallback)(event => {\n    onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(activeIndex, event);\n  }, [activeIndex, onSlideEnd]);\n  const uniqueId = (0, _react.useMemo)(() => (0, _utils.guid)(), []);\n  const items = _utils.rch.map(children, (child, index) => {\n    var _child$props;\n    if (!child) {\n      return;\n    }\n    const inputKey = `indicator_${uniqueId}_${index}`;\n    labels.push(/*#__PURE__*/_react.default.createElement(\"li\", {\n      key: `label${index}`,\n      className: prefix('label-wrapper'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 131,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"input\", {\n      name: inputKey,\n      id: inputKey,\n      type: \"radio\",\n      onChange: handleChange,\n      value: index,\n      checked: activeIndex === index,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 132,\n        columnNumber: 9\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"label\", {\n      htmlFor: inputKey,\n      className: prefix('label'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 140,\n        columnNumber: 9\n      }\n    })));\n    return /*#__PURE__*/_react.default.cloneElement(child, {\n      key: `slider-item${index}`,\n      'aria-hidden': activeIndex !== index,\n      style: {\n        ...child.props.style,\n        [lengthKey]: `${100 / count}%`\n      },\n      className: (0, _classnames.default)(prefix('slider-item'), (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className)\n    });\n  });\n  const classes = merge(className, withPrefix(`placement-${placement}`, `shape-${shape}`));\n  const positiveOrder = vertical || !rtl;\n  const sign = positiveOrder ? '-' : '';\n  const activeRatio = `${sign}${100 / count * activeIndex}%`;\n  const sliderStyles = {\n    [lengthKey]: `${count * 100}%`,\n    transform: vertical ? `translate3d(0, ${activeRatio} ,0)` : `translate3d(${activeRatio}, 0 ,0)`\n  };\n  const showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(ref, rootRef),\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 164,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('content'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 165,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"div\", {\n    \"data-testid\": \"carousel-slider\",\n    className: prefix('slider'),\n    style: sliderStyles,\n    onTransitionEnd: handleTransitionEnd,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 166,\n      columnNumber: 9\n    }\n  }, items), showMask && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('slider-after', {\n      'slider-after-vertical': vertical\n    }),\n    style: {\n      [lengthKey]: '200%'\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 175,\n      columnNumber: 11\n    }\n  }, [items[items.length - 1], items[0]].map(node => /*#__PURE__*/_react.default.cloneElement(node, {\n    key: node.key,\n    style: {\n      ...node.props.style,\n      [lengthKey]: '50%'\n    }\n  })))), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('toolbar'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 188,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"ul\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 189,\n      columnNumber: 9\n    }\n  }, labels)));\n});\nCarousel.displayName = 'Carousel';\nvar _default = exports[\"default\"] = Carousel;\n\n//# sourceURL=webpack://rsuite/./src/Carousel/Carousel.tsx?");
 
 /***/ }),
 
@@ -2006,7 +2006,7 @@ eval("\n\nexports.__esModule = true;\nexports.getColumnsAndPaths = getColumnsAnd
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ../CascadeTree/TreeView */ \"./src/CascadeTree/TreeView.tsx\"));\nvar _SearchView = _interopRequireDefault(__webpack_require__(/*! ../CascadeTree/SearchView */ \"./src/CascadeTree/SearchView.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../CascadeTree/hooks */ \"./src/CascadeTree/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../Tree/utils */ \"./src/Tree/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks2 = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _useActive = _interopRequireDefault(__webpack_require__(/*! ./useActive */ \"./src/Cascader/useActive.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Cascader/Cascader.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst emptyArray = [];\n/**\n * The `Cascader` component displays a hierarchical list of options.\n * @see https://rsuitejs.com/components/cascader\n */\nconst Cascader = (0, _utils3.forwardRef)((props, ref) => {\n  const {\n    rtl,\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Cascader', props);\n  const {\n    as,\n    data = emptyArray,\n    classPrefix = 'picker',\n    childrenKey = 'children',\n    valueKey = 'value',\n    labelKey = 'label',\n    defaultValue,\n    placeholder,\n    disabled,\n    disabledItemValues = emptyArray,\n    appearance = 'default',\n    cleanable = true,\n    locale,\n    toggleAs,\n    style,\n    value: valueProp,\n    popupClassName,\n    popupStyle,\n    columnHeight,\n    columnWidth,\n    searchable = true,\n    parentSelectable,\n    placement = 'bottomStart',\n    id,\n    renderColumn,\n    renderTreeNode,\n    renderSearchItem,\n    renderValue,\n    renderExtraFooter,\n    onEntered,\n    onExited,\n    onClean,\n    onChange,\n    onSelect,\n    onSearch,\n    getChildren,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    searchInput\n  } = (0, _Picker.usePickerRef)(ref);\n  const [value, setValue] = (0, _hooks2.useControlled)(valueProp, defaultValue);\n\n  // Store the children of each node\n  const childrenMap = (0, _hooks2.useMap)();\n\n  // Store the parent of each node\n  const parentMap = (0, _react.useMemo)(() => (0, _utils2.getParentMap)(data, item => {\n    var _childrenMap$get;\n    return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];\n  }), [childrenMap, childrenKey, data]);\n\n  // Flatten the tree data\n  const flattenedData = (0, _react.useMemo)(() => (0, _utils.flattenTree)(data, item => {\n    var _childrenMap$get2;\n    return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];\n  }), [childrenMap, childrenKey, data]);\n\n  // The selected item\n  const selectedItem = flattenedData.find(item => item[valueKey] === value);\n\n  // Callback function after selecting the node\n  const onSelectCallback = (node, event) => {\n    var _trigger$current;\n    const {\n      isLeafNode,\n      cascadePaths,\n      itemData\n    } = node;\n    onSelect === null || onSelect === void 0 || onSelect(itemData, cascadePaths, event);\n    const nextValue = itemData[valueKey];\n    if (isLeafNode) {\n      // Determines whether the option is a leaf node, and if so, closes the picker.\n      handleClose();\n      setValue(nextValue);\n      return;\n    }\n\n    //  When the parent is optional, the value and the displayed path are updated.\n    if (parentSelectable && !(0, _utils3.shallowEqual)(value, nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n\n    // Update menu position\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.updatePosition();\n  };\n  const {\n    activeItem,\n    setActiveItem,\n    loadingItemsSet,\n    handleSelect\n  } = (0, _hooks.useSelect)({\n    value,\n    valueKey,\n    childrenKey,\n    childrenMap,\n    selectedItem,\n    getChildren,\n    onChange,\n    onSelect: onSelectCallback\n  });\n  const {\n    columns,\n    pathTowardsActiveItem,\n    pathTowardsSelectedItem\n  } = (0, _hooks.usePaths)({\n    data,\n    activeItem,\n    selectedItem,\n    getParent: item => parentMap.get(item),\n    getChildren: item => {\n      var _childrenMap$get3;\n      return (_childrenMap$get3 = childrenMap.get(item)) !== null && _childrenMap$get3 !== void 0 ? _childrenMap$get3 : item[childrenKey];\n    }\n  });\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValue = pathTowardsSelectedItem.length > 0 || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks2.useStyles)(classPrefix);\n  const onFocusItemCallback = (0, _react.useCallback)(value => {\n    setActiveItem(flattenedData.find(item => item[valueKey] === value));\n  }, [flattenedData, setActiveItem, valueKey]);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    setLayer,\n    setKeys,\n    onKeyDown: onFocusItem\n  } = (0, _Picker.useFocusItemValue)(value, {\n    rtl,\n    data: flattenedData,\n    valueKey,\n    defaultLayer: pathTowardsSelectedItem !== null && pathTowardsSelectedItem !== void 0 && pathTowardsSelectedItem.length ? pathTowardsSelectedItem.length - 1 : 0,\n    target: () => overlay.current,\n    getParent: item => parentMap.get(item),\n    callback: onFocusItemCallback\n  });\n  const onSearchCallback = (value, items, event) => {\n    onSearch === null || onSearch === void 0 || onSearch(value, event);\n    if (!value || items.length === 0) {\n      setFocusItemValue(undefined);\n      return;\n    }\n    if (items.length > 0) {\n      setFocusItemValue(items[0][valueKey]);\n      setLayer(0);\n      setKeys([]);\n    }\n  };\n  const {\n    items,\n    searchKeyword,\n    setSearchKeyword,\n    handleSearch\n  } = (0, _hooks.useSearch)({\n    labelKey,\n    childrenKey,\n    parentMap,\n    flattenedData,\n    parentSelectable,\n    onSearch: onSearchCallback\n  });\n  const {\n    active,\n    handleEntered,\n    handleExited\n  } = (0, _useActive.default)({\n    onEntered,\n    onExited,\n    target,\n    setSearchKeyword\n  });\n  const handleClose = (0, _hooks2.useEventCallback)(() => {\n    var _trigger$current2, _target$current, _target$current$focus;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 || (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 || _target$current$focus.call(_target$current);\n  });\n  const handleClean = (0, _hooks2.useEventCallback)(event => {\n    if (disabled || !target.current) {\n      return;\n    }\n    setValue(null);\n    onChange === null || onChange === void 0 || onChange(null, event);\n  });\n  const handleMenuPressEnter = (0, _hooks2.useEventCallback)(event => {\n    const focusItem = (0, _utils2.findNodeOfTree)(data, item => item[valueKey] === focusItemValue);\n    const isLeafNode = focusItem && !focusItem[childrenKey];\n    if (isLeafNode) {\n      setValue(focusItemValue);\n      if (pathTowardsActiveItem.length) {\n        setLayer(pathTowardsActiveItem.length - 1);\n      }\n      if (!(0, _utils3.shallowEqual)(value, focusItemValue)) {\n        onSelect === null || onSelect === void 0 || onSelect(focusItem, pathTowardsActiveItem, event);\n        onChange === null || onChange === void 0 || onChange(focusItemValue !== null && focusItemValue !== void 0 ? focusItemValue : null, event);\n      }\n      handleClose();\n    }\n  });\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    ...rest\n  });\n\n  /**\n   * The search structure option is processed after being selected.\n   */\n  const handleSearchRowSelect = (0, _hooks2.useEventCallback)((itemData, nodes, event) => {\n    const nextValue = itemData[valueKey];\n    handleClose();\n    setSearchKeyword('');\n    setValue(nextValue);\n    onSelect === null || onSelect === void 0 || onSelect(itemData, nodes, event);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n  const renderCascadeColumn = (childNodes, column) => {\n    if (typeof renderColumn === 'function') {\n      return renderColumn(childNodes, column);\n    }\n    return childNodes;\n  };\n  const renderCascadeTreeNode = (node, itemData) => {\n    if (typeof renderTreeNode === 'function') {\n      return renderTreeNode(node, itemData);\n    }\n    return node;\n  };\n  const renderTreeView = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps || {};\n    const classes = merge(className, popupClassName, prefix('popup-cascader'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      style: popupStyle,\n      target: trigger,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 348,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {\n      data: items,\n      searchKeyword: searchKeyword,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      locale: locale,\n      parentMap: parentMap,\n      disabledItemValues: disabledItemValues,\n      focusItemValue: focusItemValue,\n      inputRef: searchInput,\n      renderSearchItem: renderSearchItem,\n      onSelect: handleSearchRowSelect,\n      onSearch: handleSearch,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 356,\n        columnNumber: 13\n      }\n    }), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n      columnWidth: columnWidth,\n      columnHeight: columnHeight,\n      disabledItemValues: disabledItemValues,\n      loadingItemsSet: loadingItemsSet,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'cascade-tree',\n      data: columns,\n      cascadePaths: pathTowardsActiveItem,\n      activeItemValue: value,\n      onSelect: handleSelect,\n      renderColumn: renderCascadeColumn,\n      renderTreeNode: renderCascadeTreeNode,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 373,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  let selectedElement = placeholder;\n  if (pathTowardsSelectedItem.length > 0) {\n    selectedElement = [];\n    pathTowardsSelectedItem.forEach((item, index) => {\n      const key = item[valueKey] || item[labelKey];\n      selectedElement.push(/*#__PURE__*/_react.default.createElement(\"span\", {\n        key: key,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 402,\n          columnNumber: 30\n        }\n      }, item[labelKey]));\n      if (index < pathTowardsSelectedItem.length - 1) {\n        selectedElement.push(/*#__PURE__*/_react.default.createElement(\"span\", {\n          className: \"separator\",\n          key: `${key}-separator`,\n          __self: void 0,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 405,\n            columnNumber: 13\n          }\n        }, ' / '));\n      }\n    });\n  }\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, pathTowardsSelectedItem, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    classPrefix,\n    hasValue,\n    name: 'cascader',\n    appearance,\n    cleanable\n  });\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEntered: handleEntered,\n    onExited: handleExited,\n    speaker: renderTreeView,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 431,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    className: classes,\n    style: style,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 441,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {\n    ref: target,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    focusItemValue: focusItemValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 442,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nCascader.displayName = 'Cascader';\nvar _default = exports[\"default\"] = Cascader;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/Cascader.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ../CascadeTree/TreeView */ \"./src/CascadeTree/TreeView.tsx\"));\nvar _SearchView = _interopRequireDefault(__webpack_require__(/*! ../CascadeTree/SearchView */ \"./src/CascadeTree/SearchView.tsx\"));\nvar _hooks = __webpack_require__(/*! ../CascadeTree/hooks */ \"./src/CascadeTree/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../Tree/utils */ \"./src/Tree/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks2 = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _useActive = _interopRequireDefault(__webpack_require__(/*! ./useActive */ \"./src/Cascader/useActive.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Cascader/Cascader.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst emptyArray = [];\n/**\n * The `Cascader` component displays a hierarchical list of options.\n * @see https://rsuitejs.com/components/cascader\n */\nconst Cascader = (0, _utils3.forwardRef)((props, ref) => {\n  const {\n    rtl,\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Cascader', props);\n  const {\n    appearance = 'default',\n    as,\n    block,\n    className,\n    cleanable = true,\n    classPrefix = 'picker',\n    columnHeight,\n    columnWidth,\n    data = emptyArray,\n    defaultValue,\n    disabled,\n    disabledItemValues = emptyArray,\n    childrenKey = 'children',\n    id,\n    labelKey = 'label',\n    locale,\n    parentSelectable,\n    placeholder,\n    placement = 'bottomStart',\n    popupClassName,\n    popupStyle,\n    renderColumn,\n    renderExtraFooter,\n    renderSearchItem,\n    renderTreeNode,\n    renderValue,\n    searchable = true,\n    style,\n    toggleAs,\n    value: valueProp,\n    valueKey = 'value',\n    onClean,\n    onChange,\n    onEnter,\n    onExit,\n    onSearch,\n    onSelect,\n    getChildren,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    searchInput\n  } = (0, _Picker.usePickerRef)(ref);\n  const [value, setValue] = (0, _hooks2.useControlled)(valueProp, defaultValue);\n\n  // Store the children of each node\n  const childrenMap = (0, _hooks2.useMap)();\n\n  // Store the parent of each node\n  const parentMap = (0, _react.useMemo)(() => (0, _utils2.getParentMap)(data, item => {\n    var _childrenMap$get;\n    return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];\n  }), [childrenMap, childrenKey, data]);\n\n  // Flatten the tree data\n  const flattenedData = (0, _react.useMemo)(() => (0, _utils.flattenTree)(data, item => {\n    var _childrenMap$get2;\n    return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];\n  }), [childrenMap, childrenKey, data]);\n\n  // The selected item\n  const selectedItem = flattenedData.find(item => item[valueKey] === value);\n\n  // Callback function after selecting the node\n  const onSelectCallback = (node, event) => {\n    var _trigger$current;\n    const {\n      isLeafNode,\n      cascadePaths,\n      itemData\n    } = node;\n    onSelect === null || onSelect === void 0 || onSelect(itemData, cascadePaths, event);\n    const nextValue = itemData[valueKey];\n    if (isLeafNode) {\n      // Determines whether the option is a leaf node, and if so, closes the picker.\n      handleClose();\n      setValue(nextValue);\n      return;\n    }\n\n    //  When the parent is optional, the value and the displayed path are updated.\n    if (parentSelectable && !(0, _utils3.shallowEqual)(value, nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n\n    // Update menu position\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.updatePosition();\n  };\n  const {\n    activeItem,\n    setActiveItem,\n    loadingItemsSet,\n    handleSelect\n  } = (0, _hooks.useSelect)({\n    value,\n    valueKey,\n    childrenKey,\n    childrenMap,\n    selectedItem,\n    getChildren,\n    onChange,\n    onSelect: onSelectCallback\n  });\n  const {\n    columns,\n    pathTowardsActiveItem,\n    pathTowardsSelectedItem\n  } = (0, _hooks.usePaths)({\n    data,\n    activeItem,\n    selectedItem,\n    getParent: item => parentMap.get(item),\n    getChildren: item => {\n      var _childrenMap$get3;\n      return (_childrenMap$get3 = childrenMap.get(item)) !== null && _childrenMap$get3 !== void 0 ? _childrenMap$get3 : item[childrenKey];\n    }\n  });\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValue = pathTowardsSelectedItem.length > 0 || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks2.useStyles)(classPrefix);\n  const onFocusItemCallback = (0, _react.useCallback)(value => {\n    setActiveItem(flattenedData.find(item => item[valueKey] === value));\n  }, [flattenedData, setActiveItem, valueKey]);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    setLayer,\n    setKeys,\n    onKeyDown: onFocusItem\n  } = (0, _Picker.useFocusItemValue)(value, {\n    rtl,\n    data: flattenedData,\n    valueKey,\n    defaultLayer: pathTowardsSelectedItem !== null && pathTowardsSelectedItem !== void 0 && pathTowardsSelectedItem.length ? pathTowardsSelectedItem.length - 1 : 0,\n    target: () => overlay.current,\n    getParent: item => parentMap.get(item),\n    callback: onFocusItemCallback\n  });\n  const onSearchCallback = (value, items, event) => {\n    onSearch === null || onSearch === void 0 || onSearch(value, event);\n    if (!value || items.length === 0) {\n      setFocusItemValue(undefined);\n      return;\n    }\n    if (items.length > 0) {\n      setFocusItemValue(items[0][valueKey]);\n      setLayer(0);\n      setKeys([]);\n    }\n  };\n  const {\n    items,\n    searchKeyword,\n    setSearchKeyword,\n    handleSearch\n  } = (0, _hooks.useSearch)({\n    labelKey,\n    childrenKey,\n    parentMap,\n    flattenedData,\n    parentSelectable,\n    onSearch: onSearchCallback\n  });\n  const {\n    active,\n    events\n  } = (0, _useActive.default)({\n    onEnter,\n    onExit,\n    target,\n    setSearchKeyword\n  });\n  const handleClose = (0, _hooks2.useEventCallback)(() => {\n    var _trigger$current2, _target$current, _target$current$focus;\n    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 || (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 || _target$current$focus.call(_target$current);\n  });\n  const handleClean = (0, _hooks2.useEventCallback)(event => {\n    if (disabled || !target.current) {\n      return;\n    }\n    setValue(null);\n    onChange === null || onChange === void 0 || onChange(null, event);\n  });\n  const handleMenuPressEnter = (0, _hooks2.useEventCallback)(event => {\n    const focusItem = (0, _utils2.findNodeOfTree)(data, item => item[valueKey] === focusItemValue);\n    const isLeafNode = focusItem && !focusItem[childrenKey];\n    if (isLeafNode) {\n      setValue(focusItemValue);\n      if (pathTowardsActiveItem.length) {\n        setLayer(pathTowardsActiveItem.length - 1);\n      }\n      if (!(0, _utils3.shallowEqual)(value, focusItemValue)) {\n        onSelect === null || onSelect === void 0 || onSelect(focusItem, pathTowardsActiveItem, event);\n        onChange === null || onChange === void 0 || onChange(focusItemValue !== null && focusItemValue !== void 0 ? focusItemValue : null, event);\n      }\n      handleClose();\n    }\n  });\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    ...rest\n  });\n\n  /**\n   * The search structure option is processed after being selected.\n   */\n  const handleSearchRowSelect = (0, _hooks2.useEventCallback)((itemData, nodes, event) => {\n    const nextValue = itemData[valueKey];\n    handleClose();\n    setSearchKeyword('');\n    setValue(nextValue);\n    onSelect === null || onSelect === void 0 || onSelect(itemData, nodes, event);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n  const renderCascadeColumn = (childNodes, column) => {\n    if (typeof renderColumn === 'function') {\n      return renderColumn(childNodes, column);\n    }\n    return childNodes;\n  };\n  const renderCascadeTreeNode = (node, itemData) => {\n    if (typeof renderTreeNode === 'function') {\n      return renderTreeNode(node, itemData);\n    }\n    return node;\n  };\n  const renderTreeView = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps || {};\n    const classes = merge(className, popupClassName, prefix('popup-cascader'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      style: popupStyle,\n      target: trigger,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 346,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {\n      data: items,\n      searchKeyword: searchKeyword,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      locale: locale,\n      parentMap: parentMap,\n      disabledItemValues: disabledItemValues,\n      focusItemValue: focusItemValue,\n      inputRef: searchInput,\n      renderSearchItem: renderSearchItem,\n      onSelect: handleSearchRowSelect,\n      onSearch: handleSearch,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 354,\n        columnNumber: 13\n      }\n    }), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n      columnWidth: columnWidth,\n      columnHeight: columnHeight,\n      disabledItemValues: disabledItemValues,\n      loadingItemsSet: loadingItemsSet,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      classPrefix: 'cascade-tree',\n      data: columns,\n      cascadePaths: pathTowardsActiveItem,\n      activeItemValue: value,\n      onSelect: handleSelect,\n      renderColumn: renderCascadeColumn,\n      renderTreeNode: renderCascadeTreeNode,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 371,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  let selectedElement = placeholder;\n  if (pathTowardsSelectedItem.length > 0) {\n    selectedElement = [];\n    pathTowardsSelectedItem.forEach((item, index) => {\n      const key = item[valueKey] || item[labelKey];\n      selectedElement.push(/*#__PURE__*/_react.default.createElement(\"span\", {\n        key: key,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 400,\n          columnNumber: 30\n        }\n      }, item[labelKey]));\n      if (index < pathTowardsSelectedItem.length - 1) {\n        selectedElement.push(/*#__PURE__*/_react.default.createElement(\"span\", {\n          className: \"separator\",\n          key: `${key}-separator`,\n          __self: void 0,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 403,\n            columnNumber: 13\n          }\n        }, ' / '));\n      }\n    });\n  }\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, pathTowardsSelectedItem, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    ...events\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    as: as,\n    id: id,\n    name: \"cascader\",\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    popupType: \"tree\",\n    triggerProps: triggerProps,\n    ref: trigger,\n    placement: placement,\n    speaker: renderTreeView,\n    rootRef: root,\n    style: style,\n    classPrefix: classPrefix,\n    className: className,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 425,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({\n    ref: target,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    focusItemValue: focusItemValue\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 442,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));\n});\nCascader.displayName = 'Cascader';\nvar _default = exports[\"default\"] = Cascader;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/Cascader.tsx?");
 
 /***/ }),
 
@@ -2028,7 +2028,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nconst useActive = props => {\n  const {\n    onOpen,\n    onClose,\n    onEntered,\n    onExited,\n    target,\n    setSearchKeyword\n  } = props;\n  // Use component active state to support keyboard events.\n  const [active, setActive] = (0, _react.useState)(false);\n  const handleEntered = (0, _hooks.useEventCallback)(node => {\n    onEntered === null || onEntered === void 0 || onEntered(node);\n    if (!target.current) {\n      return;\n    }\n    onOpen === null || onOpen === void 0 || onOpen();\n    setActive(true);\n  });\n  const handleExited = (0, _hooks.useEventCallback)(node => {\n    onExited === null || onExited === void 0 || onExited(node);\n    if (!target.current) {\n      return;\n    }\n    onClose === null || onClose === void 0 || onClose();\n    setActive(false);\n    setSearchKeyword('');\n  });\n  return {\n    active,\n    handleEntered,\n    handleExited\n  };\n};\nvar _default = exports[\"default\"] = useActive;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/useActive.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nconst useActive = props => {\n  const {\n    onOpen,\n    onClose,\n    target,\n    setSearchKeyword\n  } = props;\n  // Use component active state to support keyboard events.\n  const [active, setActive] = (0, _react.useState)(false);\n  const onEnter = (0, _hooks.useEventCallback)(node => {\n    var _props$onEnter;\n    (_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(props, node);\n    if (!target.current) {\n      return;\n    }\n    onOpen === null || onOpen === void 0 || onOpen();\n    setActive(true);\n  });\n  const onExit = (0, _hooks.useEventCallback)(node => {\n    var _props$onExit;\n    (_props$onExit = props.onExit) === null || _props$onExit === void 0 || _props$onExit.call(props, node);\n    if (!target.current) {\n      return;\n    }\n    onClose === null || onClose === void 0 || onClose();\n    setActive(false);\n    setSearchKeyword('');\n  });\n  return {\n    active,\n    events: {\n      onEnter,\n      onExit\n    }\n  };\n};\nvar _default = exports[\"default\"] = useActive;\n\n//# sourceURL=webpack://rsuite/./src/Cascader/useActive.ts?");
 
 /***/ }),
 
@@ -2061,7 +2061,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils2 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/CheckPicker/CheckPicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst emptyArray = [];\n/**\n * A component for selecting checkable items in a dropdown list.\n * @see https://rsuitejs.com/components/check-picker\n */\nconst CheckPicker = (0, _utils2.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('CheckPicker', props);\n  const {\n    as,\n    appearance = 'default',\n    classPrefix = 'picker',\n    countable = true,\n    data = emptyArray,\n    disabledItemValues = emptyArray,\n    valueKey = 'value',\n    labelKey = 'label',\n    searchable = true,\n    virtualized,\n    cleanable = true,\n    placement = 'bottomStart',\n    popupAutoWidth = true,\n    listboxMaxHeight = 320,\n    popupClassName,\n    popupStyle,\n    locale,\n    placeholder,\n    disabled,\n    toggleAs,\n    style,\n    sticky,\n    value: valueProp,\n    defaultValue,\n    groupBy,\n    listProps,\n    id,\n    sort,\n    searchBy,\n    renderOption,\n    renderOptionGroup,\n    renderListbox,\n    renderValue,\n    renderExtraFooter,\n    onGroupTitleClick,\n    onSearch,\n    onEnter,\n    onEntered,\n    onExited,\n    onClean,\n    onChange,\n    onSelect,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    list,\n    searchInput\n  } = (0, _Picker.usePickerRef)(ref);\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue || []);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown: onFocusItem\n  } = (0, _Picker.useFocusItemValue)(value === null || value === void 0 ? void 0 : value[0], {\n    data,\n    valueKey,\n    target: () => overlay.current\n  });\n  const handleSearchCallback = (0, _hooks.useEventCallback)((searchKeyword, filteredData, event) => {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);\n    onSearch === null || onSearch === void 0 || onSearch(searchKeyword, event);\n  });\n\n  // Use search keywords to filter options.\n  const {\n    searchKeyword,\n    filteredData,\n    handleSearch,\n    resetSearch,\n    checkShouldDisplay\n  } = (0, _Picker.useSearch)(data, {\n    labelKey,\n    searchBy,\n    callback: handleSearchCallback\n  });\n\n  // Use component active state to support keyboard events.\n  const [active, setActive] = (0, _react.useState)(false);\n\n  // A list of shortcut options.\n  // when opened again, the selected options are displayed at the top.\n  const [stickyItems, setStickyItems] = (0, _react.useState)([]);\n  const initStickyItems = () => {\n    if (!sticky) {\n      return;\n    }\n    let nextStickyItems = [];\n    if (data && value.length) {\n      nextStickyItems = data.filter(item => {\n        return value.some(v => v === item[valueKey]);\n      });\n    }\n    setStickyItems(nextStickyItems);\n  };\n  const handleChangeValue = (0, _hooks.useEventCallback)((value, event) => {\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled || !cleanable) {\n      return;\n    }\n    setValue([]);\n    onClean === null || onClean === void 0 || onClean(event);\n    handleChangeValue([], event);\n  });\n  const handleMenuPressEnter = event => {\n    const nextValue = (0, _clone.default)(value);\n    if (!focusItemValue) {\n      return;\n    }\n    if (!nextValue.some(v => (0, _utils2.shallowEqual)(v, focusItemValue))) {\n      nextValue.push(focusItemValue);\n    } else {\n      (0, _remove.default)(nextValue, itemVal => (0, _utils2.shallowEqual)(itemVal, focusItemValue));\n    }\n    const focusItem = data.find(item => (0, _utils2.shallowEqual)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue));\n    setValue(nextValue);\n    handleSelect(nextValue, focusItem, event);\n    handleChangeValue(nextValue, event);\n  };\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    onMenuPressBackspace: handleClean,\n    ...rest\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((nextItemValue, item, event) => {\n    onSelect === null || onSelect === void 0 || onSelect(nextItemValue, item, event);\n  });\n  const handleItemSelect = (0, _hooks.useEventCallback)((nextItemValue, item, event, checked) => {\n    const nextValue = (0, _clone.default)(value);\n    if (checked) {\n      nextValue.push(nextItemValue);\n    } else {\n      (0, _remove.default)(nextValue, itemVal => (0, _utils2.shallowEqual)(itemVal, nextItemValue));\n    }\n    setValue(nextValue);\n    setFocusItemValue(nextItemValue);\n    handleSelect(nextValue, item, event);\n    handleChangeValue(nextValue, event);\n  });\n  const handleEntered = (0, _hooks.useEventCallback)(() => {\n    setActive(true);\n  });\n  const handleExited = (0, _hooks.useEventCallback)(() => {\n    resetSearch();\n    setFocusItemValue(null);\n    setActive(false);\n  });\n  const selectedItems = data.filter(item => value === null || value === void 0 ? void 0 : value.some(val => (0, _utils2.shallowEqual)(item[valueKey], val))) || [];\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValue = selectedItems.length > 0 || (value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  let selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      prefix: prefix,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 269,\n        columnNumber: 9\n      }\n    });\n  }\n  if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName, prefix('check-menu'));\n    let items = filteredData;\n    let filteredStickyItems = [];\n    if (stickyItems) {\n      filteredStickyItems = (0, _utils.filterNodesOfTree)(stickyItems, item => checkShouldDisplay(item));\n      items = (0, _utils.filterNodesOfTree)(data, item => {\n        return checkShouldDisplay(item) && !stickyItems.some(v => v[valueKey] === item[valueKey]);\n      });\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _utils2.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    const listbox = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderOptionGroup: renderOptionGroup,\n      renderOption: renderOption,\n      maxHeight: listboxMaxHeight,\n      classPrefix: 'picker-check-menu',\n      listItemAs: _Picker.ListCheckItem,\n      activeItemValues: value,\n      focusItemValue: focusItemValue,\n      data: [...filteredStickyItems, ...items],\n      groupBy: groupBy,\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      query: searchKeyword,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 311,\n        columnNumber: 11\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix`none`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 332,\n        columnNumber: 11\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: popupStyle,\n      onKeyDown: onPickerKeyDown,\n      target: trigger,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 336,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 345,\n        columnNumber: 13\n      }\n    }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    appearance,\n    classPrefix,\n    cleanable,\n    countable,\n    hasValue,\n    name: 'check'\n  });\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    multiple: true,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: (0, _utils2.createChainedFunction)(initStickyItems, onEnter),\n    onEntered: (0, _utils2.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 369,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    className: classes,\n    style: style,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 380,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {\n    ref: target,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: handleClean,\n    onKeyDown: onPickerKeyDown,\n    as: toggleAs,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 381,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nCheckPicker.displayName = 'CheckPicker';\nvar _default = exports[\"default\"] = CheckPicker;\n\n//# sourceURL=webpack://rsuite/./src/CheckPicker/CheckPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils2 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/CheckPicker/CheckPicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst emptyArray = [];\n/**\n * A component for selecting checkable items in a dropdown list.\n * @see https://rsuitejs.com/components/check-picker\n */\nconst CheckPicker = (0, _utils2.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('CheckPicker', props);\n  const {\n    appearance = 'default',\n    as,\n    block,\n    className,\n    cleanable = true,\n    classPrefix = 'picker',\n    countable = true,\n    data = emptyArray,\n    defaultValue,\n    disabled,\n    disabledItemValues = emptyArray,\n    groupBy,\n    id,\n    labelKey = 'label',\n    listProps,\n    listboxMaxHeight = 320,\n    locale,\n    placeholder,\n    placement = 'bottomStart',\n    popupAutoWidth = true,\n    popupClassName,\n    popupStyle,\n    searchable = true,\n    sticky,\n    style,\n    toggleAs,\n    value: valueProp,\n    valueKey = 'value',\n    virtualized,\n    sort,\n    searchBy,\n    renderOption,\n    renderOptionGroup,\n    renderListbox,\n    renderValue,\n    renderExtraFooter,\n    onGroupTitleClick,\n    onSearch,\n    onEnter,\n    onExit,\n    onClean,\n    onChange,\n    onSelect,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    list,\n    searchInput\n  } = (0, _Picker.usePickerRef)(ref);\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue || []);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown: onFocusItem\n  } = (0, _Picker.useFocusItemValue)(value === null || value === void 0 ? void 0 : value[0], {\n    data,\n    valueKey,\n    target: () => overlay.current\n  });\n  const handleSearchCallback = (0, _hooks.useEventCallback)((searchKeyword, filteredData, event) => {\n    var _filteredData$;\n    // The first option after filtering is the focus.\n    setFocusItemValue(filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);\n    onSearch === null || onSearch === void 0 || onSearch(searchKeyword, event);\n  });\n\n  // Use search keywords to filter options.\n  const {\n    searchKeyword,\n    filteredData,\n    handleSearch,\n    resetSearch,\n    checkShouldDisplay\n  } = (0, _Picker.useSearch)(data, {\n    labelKey,\n    searchBy,\n    callback: handleSearchCallback\n  });\n\n  // Use component active state to support keyboard events.\n  const [active, setActive] = (0, _react.useState)(false);\n\n  // A list of shortcut options.\n  // when opened again, the selected options are displayed at the top.\n  const [stickyItems, setStickyItems] = (0, _react.useState)([]);\n  const initStickyItems = () => {\n    if (!sticky) {\n      return;\n    }\n    let nextStickyItems = [];\n    if (data && value.length) {\n      nextStickyItems = data.filter(item => {\n        return value.some(v => v === item[valueKey]);\n      });\n    }\n    setStickyItems(nextStickyItems);\n  };\n  const handleChangeValue = (0, _hooks.useEventCallback)((value, event) => {\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled || !cleanable) {\n      return;\n    }\n    setValue([]);\n    onClean === null || onClean === void 0 || onClean(event);\n    handleChangeValue([], event);\n  });\n  const handleMenuPressEnter = event => {\n    const nextValue = (0, _clone.default)(value);\n    if (!focusItemValue) {\n      return;\n    }\n    if (!nextValue.some(v => (0, _utils2.shallowEqual)(v, focusItemValue))) {\n      nextValue.push(focusItemValue);\n    } else {\n      (0, _remove.default)(nextValue, itemVal => (0, _utils2.shallowEqual)(itemVal, focusItemValue));\n    }\n    const focusItem = data.find(item => (0, _utils2.shallowEqual)(item === null || item === void 0 ? void 0 : item[valueKey], focusItemValue));\n    setValue(nextValue);\n    handleSelect(nextValue, focusItem, event);\n    handleChangeValue(nextValue, event);\n  };\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    onMenuPressBackspace: handleClean,\n    ...rest\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((nextItemValue, item, event) => {\n    onSelect === null || onSelect === void 0 || onSelect(nextItemValue, item, event);\n  });\n  const handleItemSelect = (0, _hooks.useEventCallback)((nextItemValue, item, event, checked) => {\n    const nextValue = (0, _clone.default)(value);\n    if (checked) {\n      nextValue.push(nextItemValue);\n    } else {\n      (0, _remove.default)(nextValue, itemVal => (0, _utils2.shallowEqual)(itemVal, nextItemValue));\n    }\n    setValue(nextValue);\n    setFocusItemValue(nextItemValue);\n    handleSelect(nextValue, item, event);\n    handleChangeValue(nextValue, event);\n  });\n  const handleEnter = (0, _hooks.useEventCallback)(() => {\n    setActive(true);\n  });\n  const handleExit = (0, _hooks.useEventCallback)(() => {\n    resetSearch();\n    setFocusItemValue(null);\n    setActive(false);\n  });\n  const selectedItems = data.filter(item => value === null || value === void 0 ? void 0 : value.some(val => (0, _utils2.shallowEqual)(item[valueKey], val))) || [];\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValue = selectedItems.length > 0 || (value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  let selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      prefix: prefix,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 266,\n        columnNumber: 9\n      }\n    });\n  }\n  if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName, prefix('check-menu'));\n    let items = filteredData;\n    let filteredStickyItems = [];\n    if (stickyItems) {\n      filteredStickyItems = (0, _utils.filterNodesOfTree)(stickyItems, item => checkShouldDisplay(item));\n      items = (0, _utils.filterNodesOfTree)(data, item => {\n        return checkShouldDisplay(item) && !stickyItems.some(v => v[valueKey] === item[valueKey]);\n      });\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _utils2.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    const listbox = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderOptionGroup: renderOptionGroup,\n      renderOption: renderOption,\n      maxHeight: listboxMaxHeight,\n      classPrefix: 'picker-check-menu',\n      listItemAs: _Picker.ListCheckItem,\n      activeItemValues: value,\n      focusItemValue: focusItemValue,\n      data: [...filteredStickyItems, ...items],\n      groupBy: groupBy,\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      query: searchKeyword,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 308,\n        columnNumber: 11\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix`none`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 329,\n        columnNumber: 11\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: popupStyle,\n      onKeyDown: onPickerKeyDown,\n      target: trigger,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 333,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 342,\n        columnNumber: 13\n      }\n    }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    onEnter: (0, _utils2.createChainedFunction)(initStickyItems, handleEnter, onEnter),\n    onExit: (0, _utils2.createChainedFunction)(handleExit, onExit)\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    as: as,\n    id: id,\n    multiple: true,\n    name: \"check\",\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    triggerProps: triggerProps,\n    ref: trigger,\n    placement: placement,\n    speaker: renderPopup,\n    rootRef: root,\n    style: style,\n    classPrefix: classPrefix,\n    className: className,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 362,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({\n    ref: target,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: handleClean,\n    onKeyDown: onPickerKeyDown,\n    as: toggleAs,\n    cleanable: cleanable && !disabled,\n    countable: countable,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 379,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));\n});\nCheckPicker.displayName = 'CheckPicker';\nvar _default = exports[\"default\"] = CheckPicker;\n\n//# sourceURL=webpack://rsuite/./src/CheckPicker/CheckPicker.tsx?");
 
 /***/ }),
 
@@ -2171,7 +2171,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _CheckTreeView = _interopRequireDefault(__webpack_require__(/*! ../CheckTree/CheckTreeView */ \"./src/CheckTree/CheckTreeView.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _useTreeValue = _interopRequireDefault(__webpack_require__(/*! ../CheckTree/hooks/useTreeValue */ \"./src/CheckTree/hooks/useTreeValue.ts\"));\nvar _useFlattenTree = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useFlattenTree */ \"./src/Tree/hooks/useFlattenTree.ts\"));\nvar _useTreeWithChildren = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useTreeWithChildren */ \"./src/Tree/hooks/useTreeWithChildren.ts\"));\nvar _useExpandTree = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useExpandTree */ \"./src/Tree/hooks/useExpandTree.ts\"));\nvar _useFocusState = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFocusState */ \"./src/CheckTreePicker/hooks/useFocusState.ts\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../CheckTree/utils */ \"./src/CheckTree/utils.ts\");\nvar _TreeProvider = __webpack_require__(/*! ../internals/Tree/TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/CheckTreePicker/CheckTreePicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `CheckTreePicker` component is used for selecting multiple options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/check-tree-picker\n */\nconst CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('CheckTreePicker', props);\n  const {\n    as,\n    id,\n    appearance = 'default',\n    cleanable = true,\n    countable = true,\n    cascade = true,\n    classPrefix = 'picker',\n    childrenKey = 'children',\n    disabled,\n    data = [],\n    defaultValue = [],\n    defaultExpandAll = false,\n    disabledItemValues = [],\n    expandItemValues: controlledExpandItemValues,\n    defaultExpandItemValues = [],\n    placeholder,\n    popupClassName,\n    popupStyle,\n    popupAutoWidth = true,\n    placement = 'bottomStart',\n    treeHeight = 320,\n    toggleAs,\n    style,\n    searchBy,\n    searchKeyword,\n    showIndentLine,\n    searchable = true,\n    valueKey = 'value',\n    value: controlledValue,\n    virtualized = false,\n    uncheckableItemValues = [],\n    locale,\n    labelKey = 'label',\n    listProps,\n    getChildren,\n    renderExtraFooter,\n    onEnter,\n    onChange,\n    onClean,\n    onExit,\n    onSearch,\n    onSelect,\n    onSelectItem,\n    onScroll,\n    onExpand,\n    renderValue,\n    renderTree,\n    renderTreeIcon,\n    renderTreeNode,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    list,\n    searchInput,\n    treeView\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const [value, setValue] = (0, _useTreeValue.default)(controlledValue, {\n    defaultValue,\n    uncheckableItemValues\n  });\n  const itemDataKeys = {\n    childrenKey,\n    labelKey,\n    valueKey\n  };\n  const {\n    treeData,\n    loadingNodeValues,\n    appendChild\n  } = (0, _useTreeWithChildren.default)(data, itemDataKeys);\n  const {\n    expandItemValues,\n    handleExpandTreeNode\n  } = (0, _useExpandTree.default)(data, {\n    ...itemDataKeys,\n    defaultExpandAll,\n    defaultExpandItemValues,\n    controlledExpandItemValues,\n    onExpand,\n    getChildren,\n    appendChild\n  });\n  const flattenedNodes = (0, _useFlattenTree.default)(treeData, {\n    ...itemDataKeys,\n    uncheckableItemValues,\n    multiple: true,\n    cascade,\n    value\n  });\n  const selectedNodes = (0, _utils2.getSelectedItems)(flattenedNodes, value);\n  const {\n    register,\n    focusFirstNode\n  } = (0, _TreeProvider.useTreeImperativeHandle)();\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    active,\n    triggerProps\n  } = (0, _useFocusState.default)({\n    target,\n    onEnter,\n    onExit\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    const target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    setFocusItemValue(null);\n    setValue([]);\n    onChange === null || onChange === void 0 || onChange([], event);\n  });\n  const handleTreeKeyDown = (0, _hooks.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      del: handleClean,\n      down: () => focusFirstNode()\n    });\n  });\n  const onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: handleTreeKeyDown,\n    ...rest\n  });\n  const handleChange = (0, _hooks.useEventCallback)((nextValue, event) => {\n    setValue(nextValue);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n  const treeContext = (0, _react.useMemo)(() => ({\n    register,\n    props: {\n      labelKey,\n      valueKey,\n      childrenKey,\n      virtualized,\n      renderTreeIcon,\n      renderTreeNode\n    }\n  }), [childrenKey, labelKey, valueKey, virtualized, register, renderTreeIcon, renderTreeNode]);\n  const checkTreeView = /*#__PURE__*/_react.default.createElement(_TreeProvider.TreeProvider, {\n    value: treeContext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 211,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_CheckTreeView.default, {\n    ref: treeView,\n    disabledItemValues: disabledItemValues,\n    expandItemValues: expandItemValues,\n    uncheckableItemValues: uncheckableItemValues,\n    cascade: cascade,\n    data: treeData,\n    height: treeHeight,\n    showIndentLine: showIndentLine,\n    listProps: listProps,\n    listRef: list,\n    locale: locale,\n    searchBy: searchBy,\n    searchable: searchable,\n    searchKeyword: searchKeyword,\n    searchInputRef: searchInput,\n    onScroll: onScroll,\n    onSelect: onSelect,\n    onSelectItem: onSelectItem,\n    onExpand: handleExpandTreeNode,\n    onSearch: onSearch,\n    onChange: handleChange,\n    onFocusItem: setFocusItemValue,\n    value: value,\n    loadingNodeValues: loadingNodeValues,\n    flattenedNodes: flattenedNodes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 212,\n      columnNumber: 7\n    }\n  }));\n  const renderTreeView = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = (0, _classnames.default)(className, popupClassName, prefix('check-tree-menu'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: popupStyle,\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 246,\n        columnNumber: 7\n      }\n    }, renderTree ? renderTree(checkTreeView) : checkTreeView, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValidValue = selectedNodes.length > 0 || value.length > 0 && (0, _isFunction.default)(renderValue);\n  let selectedElement = placeholder;\n  if (hasValidValue) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedNodes,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 269,\n        columnNumber: 7\n      }\n    });\n    if ((0, _isFunction.default)(renderValue)) {\n      selectedElement = renderValue(value, selectedNodes, selectedElement);\n      if ((0, _isNil.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    classPrefix,\n    appearance,\n    countable,\n    cleanable,\n    disabled,\n    hasValue: hasValidValue,\n    name: 'check-tree'\n  });\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({\n    id: id,\n    popupType: \"tree\",\n    multiple: true,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    speaker: renderTreeView\n  }, triggerProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 300,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    className: classes,\n    style: style,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 310,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    disabled: disabled,\n    as: toggleAs,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 311,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nCheckTreePicker.displayName = 'CheckTreePicker';\nvar _default = exports[\"default\"] = CheckTreePicker;\n\n//# sourceURL=webpack://rsuite/./src/CheckTreePicker/CheckTreePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _CheckTreeView = _interopRequireDefault(__webpack_require__(/*! ../CheckTree/CheckTreeView */ \"./src/CheckTree/CheckTreeView.tsx\"));\nvar _useTreeValue = _interopRequireDefault(__webpack_require__(/*! ../CheckTree/hooks/useTreeValue */ \"./src/CheckTree/hooks/useTreeValue.ts\"));\nvar _useFlattenTree = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useFlattenTree */ \"./src/Tree/hooks/useFlattenTree.ts\"));\nvar _useTreeWithChildren = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useTreeWithChildren */ \"./src/Tree/hooks/useTreeWithChildren.ts\"));\nvar _useExpandTree = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useExpandTree */ \"./src/Tree/hooks/useExpandTree.ts\"));\nvar _useFocusState = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFocusState */ \"./src/CheckTreePicker/hooks/useFocusState.ts\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../CheckTree/utils */ \"./src/CheckTree/utils.ts\");\nvar _TreeProvider = __webpack_require__(/*! ../internals/Tree/TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/CheckTreePicker/CheckTreePicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `CheckTreePicker` component is used for selecting multiple options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/check-tree-picker\n */\nconst CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('CheckTreePicker', props);\n  const {\n    as,\n    id,\n    appearance = 'default',\n    block,\n    cleanable = true,\n    countable = true,\n    cascade = true,\n    className,\n    classPrefix = 'picker',\n    childrenKey = 'children',\n    disabled,\n    data = [],\n    defaultValue = [],\n    defaultExpandAll = false,\n    disabledItemValues = [],\n    expandItemValues: controlledExpandItemValues,\n    defaultExpandItemValues = [],\n    placeholder,\n    popupClassName,\n    popupStyle,\n    popupAutoWidth = true,\n    placement = 'bottomStart',\n    treeHeight = 320,\n    toggleAs,\n    searchBy,\n    searchKeyword,\n    showIndentLine,\n    searchable = true,\n    style,\n    valueKey = 'value',\n    value: controlledValue,\n    virtualized = false,\n    uncheckableItemValues = [],\n    locale,\n    labelKey = 'label',\n    listProps,\n    getChildren,\n    renderExtraFooter,\n    onEnter,\n    onChange,\n    onClean,\n    onExit,\n    onSearch,\n    onSelect,\n    onSelectItem,\n    onScroll,\n    onExpand,\n    renderValue,\n    renderTree,\n    renderTreeIcon,\n    renderTreeNode,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    list,\n    searchInput,\n    treeView\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const [value, setValue] = (0, _useTreeValue.default)(controlledValue, {\n    defaultValue,\n    uncheckableItemValues\n  });\n  const itemDataKeys = {\n    childrenKey,\n    labelKey,\n    valueKey\n  };\n  const {\n    treeData,\n    loadingNodeValues,\n    appendChild\n  } = (0, _useTreeWithChildren.default)(data, itemDataKeys);\n  const {\n    expandItemValues,\n    handleExpandTreeNode\n  } = (0, _useExpandTree.default)(data, {\n    ...itemDataKeys,\n    defaultExpandAll,\n    defaultExpandItemValues,\n    controlledExpandItemValues,\n    onExpand,\n    getChildren,\n    appendChild\n  });\n  const flattenedNodes = (0, _useFlattenTree.default)(treeData, {\n    ...itemDataKeys,\n    uncheckableItemValues,\n    multiple: true,\n    cascade,\n    value\n  });\n  const selectedNodes = (0, _utils2.getSelectedItems)(flattenedNodes, value);\n  const {\n    register,\n    focusFirstNode\n  } = (0, _TreeProvider.useTreeImperativeHandle)();\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    active,\n    triggerProps\n  } = (0, _useFocusState.default)({\n    target,\n    onEnter,\n    onExit\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    const target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    setFocusItemValue(null);\n    setValue([]);\n    onChange === null || onChange === void 0 || onChange([], event);\n  });\n  const handleTreeKeyDown = (0, _hooks.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      del: handleClean,\n      down: () => focusFirstNode()\n    });\n  });\n  const onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: handleTreeKeyDown,\n    ...rest\n  });\n  const handleChange = (0, _hooks.useEventCallback)((nextValue, event) => {\n    setValue(nextValue);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n  const treeContext = (0, _react.useMemo)(() => ({\n    register,\n    props: {\n      labelKey,\n      valueKey,\n      childrenKey,\n      virtualized,\n      renderTreeIcon,\n      renderTreeNode\n    }\n  }), [childrenKey, labelKey, valueKey, virtualized, register, renderTreeIcon, renderTreeNode]);\n  const checkTreeView = /*#__PURE__*/_react.default.createElement(_TreeProvider.TreeProvider, {\n    value: treeContext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 209,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_CheckTreeView.default, {\n    ref: treeView,\n    disabledItemValues: disabledItemValues,\n    expandItemValues: expandItemValues,\n    uncheckableItemValues: uncheckableItemValues,\n    cascade: cascade,\n    data: treeData,\n    height: treeHeight,\n    showIndentLine: showIndentLine,\n    listProps: listProps,\n    listRef: list,\n    locale: locale,\n    searchBy: searchBy,\n    searchable: searchable,\n    searchKeyword: searchKeyword,\n    searchInputRef: searchInput,\n    onScroll: onScroll,\n    onSelect: onSelect,\n    onSelectItem: onSelectItem,\n    onExpand: handleExpandTreeNode,\n    onSearch: onSearch,\n    onChange: handleChange,\n    onFocusItem: setFocusItemValue,\n    value: value,\n    loadingNodeValues: loadingNodeValues,\n    flattenedNodes: flattenedNodes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 210,\n      columnNumber: 7\n    }\n  }));\n  const renderTreeView = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = (0, _classnames.default)(className, popupClassName, prefix('check-tree-menu'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: popupStyle,\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 244,\n        columnNumber: 7\n      }\n    }, renderTree ? renderTree(checkTreeView) : checkTreeView, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValidValue = selectedNodes.length > 0 || value.length > 0 && (0, _isFunction.default)(renderValue);\n  let selectedElement = placeholder;\n  if (hasValidValue) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedNodes,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 267,\n        columnNumber: 7\n      }\n    });\n    if ((0, _isFunction.default)(renderValue)) {\n      selectedElement = renderValue(value, selectedNodes, selectedElement);\n      if ((0, _isNil.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    as: as,\n    id: id,\n    name: \"check-tree\",\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    popupType: \"tree\",\n    multiple: true,\n    triggerProps: {\n      ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n      ...triggerProps\n    },\n    ref: trigger,\n    placement: placement,\n    speaker: renderTreeView,\n    rootRef: root,\n    style: style,\n    classPrefix: classPrefix,\n    className: className,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 287,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    countable: countable,\n    disabled: disabled,\n    as: toggleAs,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 308,\n      columnNumber: 7\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));\n});\nCheckTreePicker.displayName = 'CheckTreePicker';\nvar _default = exports[\"default\"] = CheckTreePicker;\n\n//# sourceURL=webpack://rsuite/./src/CheckTreePicker/CheckTreePicker.tsx?");
 
 /***/ }),
 
@@ -2479,7 +2479,7 @@ eval("\n\nexports.__esModule = true;\nexports.getDatePattern = getDatePattern;\n
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _mapValues = _interopRequireDefault(__webpack_require__(/*! lodash/mapValues */ \"./node_modules/lodash/mapValues.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _CalenderSimple = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/CalenderSimple */ \"./node_modules/@rsuite/icons/esm/react/CalenderSimple.js\"));\nvar _Time = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Time */ \"./node_modules/@rsuite/icons/esm/react/Time.js\"));\nvar _CalendarContainer = _interopRequireDefault(__webpack_require__(/*! ../Calendar/CalendarContainer */ \"./src/Calendar/CalendarContainer.tsx\"));\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ./PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _DateInput = _interopRequireDefault(__webpack_require__(/*! ../DateInput */ \"./src/DateInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _useMonthView = _interopRequireDefault(__webpack_require__(/*! ./hooks/useMonthView */ \"./src/DatePicker/hooks/useMonthView.ts\"));\nvar _useFocus = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFocus */ \"./src/DatePicker/hooks/useFocus.ts\"));\nvar _useCustomizedInput = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCustomizedInput */ \"./src/DatePicker/hooks/useCustomizedInput.ts\"));\nvar _hooks = __webpack_require__(/*! ../Calendar/hooks */ \"./src/Calendar/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../Calendar/utils */ \"./src/Calendar/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks2 = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _date = __webpack_require__(/*! ../internals/utils/date */ \"./src/internals/utils/date/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _OverlayTrigger = __webpack_require__(/*! ../internals/Overlay/OverlayTrigger */ \"./src/internals/Overlay/OverlayTrigger.tsx\");\nvar _utils3 = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/DatePicker/DatePicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * A date picker allows users to select a date from a calendar.\n *\n * @see https://rsuitejs.com/components/date-picker\n */\nconst DatePicker = (0, _utils2.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('DatePicker', props);\n  const {\n    as,\n    className,\n    classPrefix = 'picker',\n    calendarDefaultDate,\n    cleanable = true,\n    caretAs: caretAsProp,\n    editable = true,\n    defaultValue,\n    disabled,\n    readOnly: readOnly,\n    plaintext,\n    format,\n    id: idProp,\n    isoWeek,\n    weekStart = 0,\n    limitEndYear = 1000,\n    limitStartYear,\n    locale,\n    loading,\n    label,\n    popupClassName,\n    popupStyle,\n    appearance = 'default',\n    placement = 'bottomStart',\n    oneTap,\n    placeholder = '',\n    ranges,\n    value: valueProp,\n    showMeridiem,\n    showWeekNumbers,\n    style,\n    size,\n    monthDropdownProps,\n    shouldDisableDate,\n    shouldDisableHour,\n    shouldDisableMinute,\n    shouldDisableSecond,\n    onChange,\n    onChangeCalendarDate,\n    onClean,\n    onEnter,\n    onExit,\n    onNextMonth,\n    onOk,\n    onPrevMonth,\n    onSelect,\n    onToggleMonthDropdown,\n    onToggleTimeDropdown,\n    onShortcutClick,\n    renderCell,\n    renderValue,\n    ...restProps\n  } = propsWithDefaults;\n  const id = (0, _hooks2.useUniqueId)('rs-', idProp);\n  const {\n    trigger,\n    root,\n    target,\n    overlay\n  } = (0, _Picker.usePickerRef)(ref);\n  const formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';\n  const {\n    merge,\n    prefix\n  } = (0, _hooks2.useStyles)(classPrefix);\n  const [value, setValue] = (0, _hooks2.useControlled)(valueProp, defaultValue);\n  const {\n    calendarDate,\n    setCalendarDate,\n    resetCalendarDate\n  } = (0, _hooks.useCalendarDate)(value, calendarDefaultDate);\n  const {\n    setMonthView,\n    monthView,\n    toggleMonthView\n  } = (0, _useMonthView.default)({\n    onToggleMonthDropdown\n  });\n  const {\n    mode\n  } = (0, _date.useDateMode)(formatStr);\n\n  // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  const showMonth = mode === _date.DateMode.Month || monthView;\n  const {\n    focusInput,\n    focusSelectedDate,\n    onKeyFocusEvent\n  } = (0, _useFocus.default)({\n    target,\n    showMonth,\n    id,\n    locale\n  });\n\n  /**\n   * Check whether the date is disabled.\n   */\n  const isDateDisabled = date => {\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date);\n    }\n    return false;\n  };\n\n  /**\n   * Check whether the time is within the time range of the shortcut option in the toolbar.\n   */\n  const isDatetimeDisabled = date => {\n    return (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date)) || (0, _date.disableTime)(props, date);\n  };\n\n  /**\n   * Check whether the month is disabled.\n   * If any day in the month is disabled, the entire month is disabled\n   */\n  const isMonthDisabled = date => {\n    return (0, _utils.isEveryDateInMonth)(date.getFullYear(), date.getMonth(), isDateDisabled);\n  };\n\n  /**\n   * Whether \"OK\" button is disabled\n   *\n   * - If format is date, disable ok button if selected date is disabled\n   * - If format is month, disable ok button if all dates in the month of selected date are disabled\n   */\n  const isOkButtonDisabled = selectedDate => {\n    if (mode === _date.DateMode.Month) {\n      return isMonthDisabled(selectedDate);\n    }\n    return isDatetimeDisabled(selectedDate);\n  };\n  const isErrorValue = value => {\n    if (!(0, _date.isValid)(value)) {\n      return true;\n    } else if (value && isDateDisabled(value)) {\n      return true;\n    }\n    return false;\n  };\n\n  /**\n   * Switch to the callback triggered after the next month.\n   */\n  const handleMoveForward = (0, _hooks2.useEventCallback)(nextPageDate => {\n    setCalendarDate(nextPageDate);\n    onNextMonth === null || onNextMonth === void 0 || onNextMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 || onChangeCalendarDate(nextPageDate);\n  });\n\n  /**\n   * Switch to the callback triggered after the previous month.\n   */\n  const handleMoveBackward = (0, _hooks2.useEventCallback)(nextPageDate => {\n    setCalendarDate(nextPageDate);\n    onPrevMonth === null || onPrevMonth === void 0 || onPrevMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 || onChangeCalendarDate(nextPageDate);\n  });\n\n  /**\n   * The callback triggered when the date changes.\n   */\n  const handleDateChange = (0, _hooks2.useEventCallback)((nextValue, event) => {\n    onSelect === null || onSelect === void 0 || onSelect(nextValue, event);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 || onChangeCalendarDate(nextValue, event);\n  });\n\n  /**\n   *  A callback triggered when the time on the calendar changes.\n   */\n  const handleChangeTime = (0, _hooks2.useEventCallback)(nextPageTime => {\n    setCalendarDate(nextPageTime);\n    handleDateChange(nextPageTime);\n  });\n\n  /**\n   * Close the calendar panel.\n   */\n  const handleClose = (0, _hooks2.useEventCallback)(() => {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);\n  });\n  const updateValue = function (event, date, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    const nextValue = typeof date !== 'undefined' ? date : calendarDate;\n    setCalendarDate(nextValue || (0, _date.startOfToday)());\n    setValue(nextValue);\n    if (nextValue !== value) {\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * The callback triggered after the date in the shortcut area is clicked.\n   */\n  const handleShortcutPageDate = (0, _hooks2.useEventCallback)((range, closeOverlay, event) => {\n    const value = range.value;\n    updateValue(event, value, closeOverlay);\n    handleDateChange(value, event);\n    onShortcutClick === null || onShortcutClick === void 0 || onShortcutClick(range, event);\n  });\n\n  /**\n   * The callback triggered after clicking the OK button.\n   */\n  const handleOK = (0, _hooks2.useEventCallback)(event => {\n    updateValue(event);\n    onOk === null || onOk === void 0 || onOk(calendarDate, event);\n    focusInput();\n  });\n\n  /**\n   * Callback after clicking the clear button.\n   */\n\n  const handleClean = (0, _hooks2.useEventCallback)(event => {\n    event === null || event === void 0 || event.stopPropagation();\n    updateValue(event, null);\n    resetCalendarDate(null);\n    onClean === null || onClean === void 0 || onClean(event);\n  });\n  const handlePickerPopupKeyDown = (0, _hooks2.useEventCallback)(event => {\n    onKeyFocusEvent(event, {\n      date: calendarDate,\n      callback: setCalendarDate\n    });\n    if (event.key === 'Enter') {\n      handleOK(event);\n    }\n  });\n  const handleClick = (0, _hooks2.useEventCallback)(() => {\n    if (editable) {\n      return;\n    }\n    focusSelectedDate();\n  });\n\n  /**\n   * Callback after the date is selected.\n   */\n  const handleCalendarSelect = (0, _hooks2.useEventCallback)(function (date, event, updatableValue) {\n    if (updatableValue === void 0) {\n      updatableValue = true;\n    }\n    const nextValue = (0, _date.copyTime)({\n      from: calendarDate,\n      to: date\n    });\n    setCalendarDate(nextValue);\n    handleDateChange(nextValue);\n    if (oneTap && updatableValue) {\n      updateValue(event, nextValue);\n      focusInput();\n    }\n  });\n\n  /**\n   *  A callback triggered when the date on the calendar changes.\n   */\n  const handleChangeMonth = (0, _hooks2.useEventCallback)((nextPageDate, event) => {\n    setCalendarDate(nextPageDate);\n    handleDateChange(nextPageDate);\n    focusSelectedDate();\n    if (oneTap && mode === _date.DateMode.Month) {\n      updateValue(event, nextPageDate);\n      focusInput();\n    }\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  const handleInputChange = (0, _hooks2.useEventCallback)((value, event) => {\n    if (!isErrorValue(value)) {\n      handleCalendarSelect(value, event);\n    }\n    updateValue(event, value, false);\n  });\n  const handleInputKeyDown = (0, _hooks2.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: () => {\n        var _trigger$current2;\n        const {\n          open\n        } = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {};\n        if (open) {\n          if ((0, _date.isValid)(calendarDate) && !isDateDisabled(calendarDate)) {\n            updateValue(event);\n            focusInput();\n          }\n        } else {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 || _trigger$current3.open();\n        }\n      }\n    });\n  });\n  const calendarProps = (0, _mapValues.default)((0, _pick.default)(props, _date.calendarOnlyProps), func => (next, date) => {\n    var _func;\n    return (_func = func === null || func === void 0 ? void 0 : func(next, date)) !== null && _func !== void 0 ? _func : false;\n  });\n  const {\n    sideRanges,\n    bottomRanges\n  } = (0, _utils3.splitRanges)(ranges);\n  const renderCalendarOverlay = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(popupClassName, className, prefix('popup-date'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? `${id}-label` : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),\n      style: popupStyle,\n      target: trigger,\n      onKeyDown: handlePickerPopupKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 567,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      align: \"flex-start\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 577,\n        columnNumber: 9\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('date-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disableShortcut: isDatetimeDisabled,\n      onShortcutClick: handleShortcutPageDate,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 579,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 591,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {\n      targetId: id,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      showMeridiem: showMeridiem,\n      disabledDate: isDateDisabled,\n      disabledHours: shouldDisableHour,\n      disabledMinutes: shouldDisableMinute,\n      disabledSeconds: shouldDisableSecond,\n      limitEndYear: limitEndYear,\n      limitStartYear: limitStartYear,\n      format: formatStr,\n      isoWeek: isoWeek,\n      weekStart: weekStart,\n      calendarDate: calendarDate,\n      monthDropdownProps: monthDropdownProps,\n      renderCellOnPicker: renderCell,\n      onMoveForward: handleMoveForward,\n      onMoveBackward: handleMoveBackward,\n      onSelect: handleCalendarSelect,\n      onToggleMonthDropdown: toggleMonthView,\n      onToggleTimeDropdown: onToggleTimeDropdown,\n      onChangeMonth: handleChangeMonth,\n      onChangeTime: handleChangeTime,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 592,\n        columnNumber: 13\n      }\n    })), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      ranges: bottomRanges,\n      calendarDate: calendarDate,\n      disableOkBtn: isOkButtonDisabled,\n      disableShortcut: isDatetimeDisabled,\n      onShortcutClick: handleShortcutPageDate,\n      onOk: handleOK,\n      hideOkBtn: oneTap,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 618,\n        columnNumber: 13\n      }\n    }))));\n  };\n  const hasValue = (0, _date.isValid)(value);\n  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    className,\n    classPrefix,\n    name: 'date',\n    appearance,\n    hasValue,\n    cleanable\n  });\n  const caretAs = (0, _react.useMemo)(() => {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || (mode === _date.DateMode.Time ? _Time.default : _CalenderSimple.default);\n  }, [caretAsProp, mode]);\n  const handleTriggerClose = (0, _hooks2.useEventCallback)(cause => {\n    var _props$onClose;\n    // Unless overlay is closing on user clicking \"OK\" button,\n    // reset the selected date on calendar panel\n    if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {\n      resetCalendarDate();\n    }\n    setMonthView(false);\n    (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);\n  });\n  const showCleanButton = cleanable && hasValue && !readOnly;\n  const [ariaProps, rest] = (0, _utils2.partitionHTMLProps)(restProps, {\n    htmlProps: [],\n    includeAria: true\n  });\n  const invalidValue = value && isErrorValue(value);\n  const customizedProps = {\n    value,\n    formatStr,\n    renderValue,\n    readOnly,\n    editable,\n    loading\n  };\n  const {\n    customValue,\n    inputReadOnly,\n    Input,\n    events\n  } = (0, _useCustomizedInput.default)(customizedProps);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onClose: handleTriggerClose,\n    onEnter: (0, _utils2.createChainedFunction)(events.onActive, onEnter),\n    onExit: (0, _utils2.createChainedFunction)(events.onInactive, onExit),\n    speaker: renderCalendarOverlay,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 672,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    className: merge(classes, {\n      [prefix('error')]: invalidValue\n    }),\n    style: style,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 682,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 689,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils3.getRestProps)(rest, usedClassNamePropKeys), {\n    inside: true,\n    size: size,\n    disabled: disabled,\n    className: prefix`input-group`,\n    onClick: handleClick,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 691,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix`label`,\n    id: `${id}-label`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 699,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? `${id}-label` : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: customValue || value,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : formatStr,\n    disabled: disabled,\n    readOnly: inputReadOnly,\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 702,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    size: size,\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 718,\n      columnNumber: 13\n    }\n  }))));\n});\nDatePicker.displayName = 'DatePicker';\nvar _default = exports[\"default\"] = DatePicker;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/DatePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _mapValues = _interopRequireDefault(__webpack_require__(/*! lodash/mapValues */ \"./node_modules/lodash/mapValues.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _CalenderSimple = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/CalenderSimple */ \"./node_modules/@rsuite/icons/esm/react/CalenderSimple.js\"));\nvar _Time = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Time */ \"./node_modules/@rsuite/icons/esm/react/Time.js\"));\nvar _CalendarContainer = _interopRequireDefault(__webpack_require__(/*! ../Calendar/CalendarContainer */ \"./src/Calendar/CalendarContainer.tsx\"));\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ./PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _DateInput = _interopRequireDefault(__webpack_require__(/*! ../DateInput */ \"./src/DateInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _useMonthView = _interopRequireDefault(__webpack_require__(/*! ./hooks/useMonthView */ \"./src/DatePicker/hooks/useMonthView.ts\"));\nvar _useFocus = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFocus */ \"./src/DatePicker/hooks/useFocus.ts\"));\nvar _useCustomizedInput = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCustomizedInput */ \"./src/DatePicker/hooks/useCustomizedInput.ts\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../Calendar/hooks */ \"./src/Calendar/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../Calendar/utils */ \"./src/Calendar/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks2 = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _date = __webpack_require__(/*! ../internals/utils/date */ \"./src/internals/utils/date/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _OverlayTrigger = __webpack_require__(/*! ../internals/Overlay/OverlayTrigger */ \"./src/internals/Overlay/OverlayTrigger.tsx\");\nvar _utils3 = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/DatePicker/DatePicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * A date picker allows users to select a date from a calendar.\n *\n * @see https://rsuitejs.com/components/date-picker\n */\nconst DatePicker = (0, _utils2.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('DatePicker', props);\n  const {\n    as,\n    block,\n    className,\n    classPrefix = 'picker',\n    calendarDefaultDate,\n    cleanable = true,\n    caretAs: caretAsProp,\n    editable = true,\n    defaultValue,\n    disabled,\n    readOnly: readOnly,\n    plaintext,\n    format,\n    id: idProp,\n    isoWeek,\n    weekStart = 0,\n    limitEndYear = 1000,\n    limitStartYear,\n    locale,\n    loading,\n    label,\n    popupClassName,\n    popupStyle,\n    appearance = 'default',\n    placement = 'bottomStart',\n    oneTap,\n    placeholder = '',\n    ranges,\n    value: valueProp,\n    showMeridiem,\n    showWeekNumbers,\n    style,\n    size,\n    monthDropdownProps,\n    shouldDisableDate,\n    shouldDisableHour,\n    shouldDisableMinute,\n    shouldDisableSecond,\n    onChange,\n    onChangeCalendarDate,\n    onClean,\n    onEnter,\n    onExit,\n    onNextMonth,\n    onOk,\n    onPrevMonth,\n    onSelect,\n    onToggleMonthDropdown,\n    onToggleTimeDropdown,\n    onShortcutClick,\n    renderCell,\n    renderValue,\n    ...restProps\n  } = propsWithDefaults;\n  const id = (0, _hooks2.useUniqueId)('rs-', idProp);\n  const {\n    trigger,\n    root,\n    target,\n    overlay\n  } = (0, _Picker.usePickerRef)(ref);\n  const formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';\n  const {\n    merge,\n    prefix\n  } = (0, _hooks2.useStyles)(classPrefix);\n  const [value, setValue] = (0, _hooks2.useControlled)(valueProp, defaultValue);\n  const {\n    calendarDate,\n    setCalendarDate,\n    resetCalendarDate\n  } = (0, _hooks.useCalendarDate)(value, calendarDefaultDate);\n  const {\n    setMonthView,\n    monthView,\n    toggleMonthView\n  } = (0, _useMonthView.default)({\n    onToggleMonthDropdown\n  });\n  const {\n    mode\n  } = (0, _date.useDateMode)(formatStr);\n\n  // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  const showMonth = mode === _date.DateMode.Month || monthView;\n  const {\n    focusInput,\n    focusSelectedDate,\n    onKeyFocusEvent\n  } = (0, _useFocus.default)({\n    target,\n    showMonth,\n    id,\n    locale\n  });\n\n  /**\n   * Check whether the date is disabled.\n   */\n  const isDateDisabled = date => {\n    if (typeof shouldDisableDate === 'function') {\n      return shouldDisableDate(date);\n    }\n    return false;\n  };\n\n  /**\n   * Check whether the time is within the time range of the shortcut option in the toolbar.\n   */\n  const isDatetimeDisabled = date => {\n    return (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date)) || (0, _date.disableTime)(props, date);\n  };\n\n  /**\n   * Check whether the month is disabled.\n   * If any day in the month is disabled, the entire month is disabled\n   */\n  const isMonthDisabled = date => {\n    return (0, _utils.isEveryDateInMonth)(date.getFullYear(), date.getMonth(), isDateDisabled);\n  };\n\n  /**\n   * Whether \"OK\" button is disabled\n   *\n   * - If format is date, disable ok button if selected date is disabled\n   * - If format is month, disable ok button if all dates in the month of selected date are disabled\n   */\n  const isOkButtonDisabled = selectedDate => {\n    if (mode === _date.DateMode.Month) {\n      return isMonthDisabled(selectedDate);\n    }\n    return isDatetimeDisabled(selectedDate);\n  };\n  const isErrorValue = value => {\n    if (!(0, _date.isValid)(value)) {\n      return true;\n    } else if (value && isDateDisabled(value)) {\n      return true;\n    }\n    return false;\n  };\n\n  /**\n   * Switch to the callback triggered after the next month.\n   */\n  const handleMoveForward = (0, _hooks2.useEventCallback)(nextPageDate => {\n    setCalendarDate(nextPageDate);\n    onNextMonth === null || onNextMonth === void 0 || onNextMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 || onChangeCalendarDate(nextPageDate);\n  });\n\n  /**\n   * Switch to the callback triggered after the previous month.\n   */\n  const handleMoveBackward = (0, _hooks2.useEventCallback)(nextPageDate => {\n    setCalendarDate(nextPageDate);\n    onPrevMonth === null || onPrevMonth === void 0 || onPrevMonth(nextPageDate);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 || onChangeCalendarDate(nextPageDate);\n  });\n\n  /**\n   * The callback triggered when the date changes.\n   */\n  const handleDateChange = (0, _hooks2.useEventCallback)((nextValue, event) => {\n    onSelect === null || onSelect === void 0 || onSelect(nextValue, event);\n    onChangeCalendarDate === null || onChangeCalendarDate === void 0 || onChangeCalendarDate(nextValue, event);\n  });\n\n  /**\n   *  A callback triggered when the time on the calendar changes.\n   */\n  const handleChangeTime = (0, _hooks2.useEventCallback)(nextPageTime => {\n    setCalendarDate(nextPageTime);\n    handleDateChange(nextPageTime);\n  });\n\n  /**\n   * Close the calendar panel.\n   */\n  const handleClose = (0, _hooks2.useEventCallback)(() => {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);\n  });\n  const updateValue = function (event, date, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    const nextValue = typeof date !== 'undefined' ? date : calendarDate;\n    setCalendarDate(nextValue || (0, _date.startOfToday)());\n    setValue(nextValue);\n    if (nextValue !== value) {\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * The callback triggered after the date in the shortcut area is clicked.\n   */\n  const handleShortcutPageDate = (0, _hooks2.useEventCallback)((range, closeOverlay, event) => {\n    const value = range.value;\n    updateValue(event, value, closeOverlay);\n    handleDateChange(value, event);\n    onShortcutClick === null || onShortcutClick === void 0 || onShortcutClick(range, event);\n  });\n\n  /**\n   * The callback triggered after clicking the OK button.\n   */\n  const handleOK = (0, _hooks2.useEventCallback)(event => {\n    updateValue(event);\n    onOk === null || onOk === void 0 || onOk(calendarDate, event);\n    focusInput();\n  });\n\n  /**\n   * Callback after clicking the clear button.\n   */\n\n  const handleClean = (0, _hooks2.useEventCallback)(event => {\n    event === null || event === void 0 || event.stopPropagation();\n    updateValue(event, null);\n    resetCalendarDate(null);\n    onClean === null || onClean === void 0 || onClean(event);\n  });\n  const handlePickerPopupKeyDown = (0, _hooks2.useEventCallback)(event => {\n    onKeyFocusEvent(event, {\n      date: calendarDate,\n      callback: setCalendarDate\n    });\n    if (event.key === 'Enter') {\n      handleOK(event);\n    }\n  });\n  const handleClick = (0, _hooks2.useEventCallback)(() => {\n    if (editable) {\n      return;\n    }\n    focusSelectedDate();\n  });\n\n  /**\n   * Callback after the date is selected.\n   */\n  const handleCalendarSelect = (0, _hooks2.useEventCallback)(function (date, event, updatableValue) {\n    if (updatableValue === void 0) {\n      updatableValue = true;\n    }\n    const nextValue = (0, _date.copyTime)({\n      from: calendarDate,\n      to: date\n    });\n    setCalendarDate(nextValue);\n    handleDateChange(nextValue);\n    if (oneTap && updatableValue) {\n      updateValue(event, nextValue);\n      focusInput();\n    }\n  });\n\n  /**\n   *  A callback triggered when the date on the calendar changes.\n   */\n  const handleChangeMonth = (0, _hooks2.useEventCallback)((nextPageDate, event) => {\n    setCalendarDate(nextPageDate);\n    handleDateChange(nextPageDate);\n    focusSelectedDate();\n    if (oneTap && mode === _date.DateMode.Month) {\n      updateValue(event, nextPageDate);\n      focusInput();\n    }\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  const handleInputChange = (0, _hooks2.useEventCallback)((value, event) => {\n    if (!isErrorValue(value)) {\n      handleCalendarSelect(value, event);\n    }\n    updateValue(event, value, false);\n  });\n  const handleInputKeyDown = (0, _hooks2.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: () => {\n        var _trigger$current2;\n        const {\n          open\n        } = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {};\n        if (open) {\n          if ((0, _date.isValid)(calendarDate) && !isDateDisabled(calendarDate)) {\n            updateValue(event);\n            focusInput();\n          }\n        } else {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 || _trigger$current3.open();\n        }\n      }\n    });\n  });\n  const calendarProps = (0, _mapValues.default)((0, _pick.default)(props, _date.calendarOnlyProps), func => (next, date) => {\n    var _func;\n    return (_func = func === null || func === void 0 ? void 0 : func(next, date)) !== null && _func !== void 0 ? _func : false;\n  });\n  const {\n    sideRanges,\n    bottomRanges\n  } = (0, _utils3.splitRanges)(ranges);\n  const renderCalendarOverlay = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(popupClassName, className, prefix('popup-date'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? `${id}-label` : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),\n      style: popupStyle,\n      target: trigger,\n      onKeyDown: handlePickerPopupKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 567,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      align: \"flex-start\",\n      h: \"100%\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 577,\n        columnNumber: 9\n      }\n    }, sideRanges && sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('date-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDate,\n      locale: locale,\n      disableShortcut: isDatetimeDisabled,\n      onShortcutClick: handleShortcutPageDate,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 579,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Box.default, {\n      className: prefix('box'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 591,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {\n      targetId: id,\n      locale: locale,\n      showWeekNumbers: showWeekNumbers,\n      showMeridiem: showMeridiem,\n      disabledDate: isDateDisabled,\n      disabledHours: shouldDisableHour,\n      disabledMinutes: shouldDisableMinute,\n      disabledSeconds: shouldDisableSecond,\n      limitEndYear: limitEndYear,\n      limitStartYear: limitStartYear,\n      format: formatStr,\n      isoWeek: isoWeek,\n      weekStart: weekStart,\n      calendarDate: calendarDate,\n      monthDropdownProps: monthDropdownProps,\n      renderCellOnPicker: renderCell,\n      onMoveForward: handleMoveForward,\n      onMoveBackward: handleMoveBackward,\n      onSelect: handleCalendarSelect,\n      onToggleMonthDropdown: toggleMonthView,\n      onToggleTimeDropdown: onToggleTimeDropdown,\n      onChangeMonth: handleChangeMonth,\n      onChangeTime: handleChangeTime,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 592,\n        columnNumber: 13\n      }\n    })), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      ranges: bottomRanges,\n      calendarDate: calendarDate,\n      disableOkBtn: isOkButtonDisabled,\n      disableShortcut: isDatetimeDisabled,\n      onShortcutClick: handleShortcutPageDate,\n      onOk: handleOK,\n      hideOkBtn: oneTap,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 618,\n        columnNumber: 13\n      }\n    }))));\n  };\n  const hasValue = (0, _date.isValid)(value);\n  const caretAs = (0, _react.useMemo)(() => {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || (mode === _date.DateMode.Time ? _Time.default : _CalenderSimple.default);\n  }, [caretAsProp, mode]);\n  const handleTriggerClose = (0, _hooks2.useEventCallback)(cause => {\n    var _props$onClose;\n    // Unless overlay is closing on user clicking \"OK\" button,\n    // reset the selected date on calendar panel\n    if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {\n      resetCalendarDate();\n    }\n    setMonthView(false);\n    (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);\n  });\n  const showCleanButton = cleanable && hasValue && !readOnly;\n  const [ariaProps, rest] = (0, _utils2.partitionHTMLProps)(restProps, {\n    htmlProps: [],\n    includeAria: true\n  });\n  const invalidValue = value && isErrorValue(value);\n  const customizedProps = {\n    value,\n    formatStr,\n    renderValue,\n    readOnly,\n    editable,\n    loading\n  };\n  const {\n    customValue,\n    inputReadOnly,\n    Input,\n    events\n  } = (0, _useCustomizedInput.default)(customizedProps);\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    onClose: handleTriggerClose,\n    onEnter: (0, _utils2.createChainedFunction)(events.onActive, onEnter),\n    onExit: (0, _utils2.createChainedFunction)(events.onInactive, onExit)\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    as: as,\n    name: \"date\",\n    classPrefix: classPrefix,\n    className: merge(className, {\n      [prefix('error')]: invalidValue\n    }),\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    style: style,\n    rootRef: root,\n    trigger: \"active\",\n    triggerProps: triggerProps,\n    ref: trigger,\n    placement: placement,\n    speaker: renderCalendarOverlay,\n    \"data-cleanable\": cleanable,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 670,\n      columnNumber: 5\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 688,\n      columnNumber: 9\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils3.getRestProps)(rest), {\n    inside: true,\n    size: size,\n    disabled: disabled,\n    className: prefix`input-group`,\n    onClick: handleClick,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 690,\n      columnNumber: 9\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix`label`,\n    id: `${id}-label`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 698,\n      columnNumber: 11\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? `${id}-label` : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: customValue || value,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : formatStr,\n    disabled: disabled,\n    readOnly: inputReadOnly,\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 701,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    size: size,\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 717,\n      columnNumber: 11\n    }\n  })));\n});\nDatePicker.displayName = 'DatePicker';\nvar _default = exports[\"default\"] = DatePicker;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/DatePicker.tsx?");
 
 /***/ }),
 
@@ -2556,7 +2556,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.getDefaultRanges = getDefaultRanges;\nexports.getRestProps = exports.getRanges = void 0;\nexports.splitRanges = splitRanges;\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _date = __webpack_require__(/*! ../internals/utils/date */ \"./src/internals/utils/date/index.ts\");\nfunction getDefaultRanges(value) {\n  const today = (0, _date.startOfToday)();\n\n  /**\n   * If it is an array type, it returns the default shortcut key suitable for DateRangePicker Toolbar,\n   * otherwise it returns the default shortcut key suitable for DatePicker Toolbar\n   */\n  if (value instanceof Array) {\n    return [{\n      label: 'today',\n      value: [(0, _date.startOfDay)(today), (0, _date.endOfDay)(today)]\n    }, {\n      label: 'yesterday',\n      value: [(0, _date.startOfDay)((0, _date.subDays)(today, 1)), (0, _date.endOfDay)((0, _date.subDays)(today, 1))]\n    }, {\n      label: 'last7Days',\n      value: [(0, _date.startOfDay)((0, _date.subDays)(today, 6)), (0, _date.endOfDay)(today)]\n    }];\n  }\n  return [{\n    label: 'today',\n    value: today\n  }, {\n    label: 'yesterday',\n    value: (0, _date.subDays)(today, 1)\n  }];\n}\nconst generateRangesIterator = _ref => {\n  let {\n    calendarDate\n  } = _ref;\n  return _ref2 => {\n    let {\n      value,\n      ...rest\n    } = _ref2;\n    return {\n      value: typeof value === 'function' ? value(calendarDate) : value,\n      ...rest\n    };\n  };\n};\n\n/**\n * get Toolbar ranges from Toolbar props\n * @param ranges\n * @param calendarDate\n */\nconst getRanges = _ref3 => {\n  let {\n    ranges,\n    calendarDate\n  } = _ref3;\n  return typeof ranges === 'undefined' ? getDefaultRanges(calendarDate) : ranges.map(generateRangesIterator({\n    calendarDate\n  }));\n};\nexports.getRanges = getRanges;\nfunction splitRanges(ranges) {\n  // The shortcut option on the left side of the calendar panel\n  const sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'left')) || [];\n\n  // The shortcut option on the bottom of the calendar panel\n  const bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined)) || [];\n  return {\n    sideRanges,\n    bottomRanges\n  };\n}\nconst getRestProps = function (props, omitProps) {\n  if (omitProps === void 0) {\n    omitProps = [];\n  }\n  return (0, _omit.default)(props, [..._Picker.omitTriggerPropKeys, ..._date.calendarOnlyProps, ...omitProps]);\n};\nexports.getRestProps = getRestProps;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/utils.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.getDefaultRanges = getDefaultRanges;\nexports.getRestProps = exports.getRanges = void 0;\nexports.splitRanges = splitRanges;\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _date = __webpack_require__(/*! ../internals/utils/date */ \"./src/internals/utils/date/index.ts\");\nfunction getDefaultRanges(value) {\n  const today = (0, _date.startOfToday)();\n\n  /**\n   * If it is an array type, it returns the default shortcut key suitable for DateRangePicker Toolbar,\n   * otherwise it returns the default shortcut key suitable for DatePicker Toolbar\n   */\n  if (value instanceof Array) {\n    return [{\n      label: 'today',\n      value: [(0, _date.startOfDay)(today), (0, _date.endOfDay)(today)]\n    }, {\n      label: 'yesterday',\n      value: [(0, _date.startOfDay)((0, _date.subDays)(today, 1)), (0, _date.endOfDay)((0, _date.subDays)(today, 1))]\n    }, {\n      label: 'last7Days',\n      value: [(0, _date.startOfDay)((0, _date.subDays)(today, 6)), (0, _date.endOfDay)(today)]\n    }];\n  }\n  return [{\n    label: 'today',\n    value: today\n  }, {\n    label: 'yesterday',\n    value: (0, _date.subDays)(today, 1)\n  }];\n}\nconst generateRangesIterator = _ref => {\n  let {\n    calendarDate\n  } = _ref;\n  return _ref2 => {\n    let {\n      value,\n      ...rest\n    } = _ref2;\n    return {\n      value: typeof value === 'function' ? value(calendarDate) : value,\n      ...rest\n    };\n  };\n};\n\n/**\n * get Toolbar ranges from Toolbar props\n * @param ranges\n * @param calendarDate\n */\nconst getRanges = _ref3 => {\n  let {\n    ranges,\n    calendarDate\n  } = _ref3;\n  return typeof ranges === 'undefined' ? getDefaultRanges(calendarDate) : ranges.map(generateRangesIterator({\n    calendarDate\n  }));\n};\nexports.getRanges = getRanges;\nfunction splitRanges(ranges) {\n  // The shortcut option on the left side of the calendar panel\n  const sideRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'left');\n\n  // The shortcut option on the bottom of the calendar panel\n  const bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined);\n  return {\n    sideRanges,\n    bottomRanges\n  };\n}\nconst getRestProps = function (props, omitProps) {\n  if (omitProps === void 0) {\n    omitProps = [];\n  }\n  return (0, _omit.default)(props, [..._Picker.overlayPropKeys, ..._date.calendarOnlyProps, ...omitProps]);\n};\nexports.getRestProps = getRestProps;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/utils.ts?");
 
 /***/ }),
 
@@ -2611,7 +2611,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Calendar */ \"./node_modules/@rsuite/icons/esm/react/Calendar.js\"));\nvar _Time = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Time */ \"./node_modules/@rsuite/icons/esm/react/Time.js\"));\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ \"./src/DateRangePicker/Header.tsx\"));\nvar _useDateDisabled = _interopRequireDefault(__webpack_require__(/*! ./hooks/useDateDisabled */ \"./src/DateRangePicker/hooks/useDateDisabled.ts\"));\nvar _useCustomizedInput = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/hooks/useCustomizedInput */ \"./src/DatePicker/hooks/useCustomizedInput.ts\"));\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar StaticMethods = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\nvar _DateRangePickerProvider = __webpack_require__(/*! ./DateRangePickerProvider */ \"./src/DateRangePicker/DateRangePickerProvider.ts\");\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _date = __webpack_require__(/*! ../internals/utils/date */ \"./src/internals/utils/date/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nconst DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {\n  var _ref, _ref2;\n  const {\n    formatDate,\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('DateRangePicker', props);\n  const {\n    as,\n    classPrefix = 'picker',\n    className,\n    appearance = 'default',\n    editable = true,\n    cleanable = true,\n    character = ' ~ ',\n    calendarSnapping,\n    defaultCalendarValue,\n    defaultValue,\n    plaintext,\n    disabled,\n    shouldDisableDate,\n    shouldDisableHour,\n    shouldDisableMinute,\n    shouldDisableSecond,\n    format,\n    hoverRange,\n    id: idProp,\n    isoWeek = false,\n    weekStart = 0,\n    limitEndYear = 1000,\n    limitStartYear,\n    locale,\n    loading,\n    label,\n    popupClassName,\n    popupStyle,\n    oneTap,\n    placeholder = '',\n    placement = 'bottomStart',\n    ranges,\n    readOnly,\n    showOneCalendar = false,\n    showWeekNumbers,\n    showMeridiem,\n    showHeader = true,\n    style,\n    size,\n    caretAs: caretAsProp,\n    value: valueProp,\n    monthDropdownProps,\n    hideHours,\n    hideMinutes,\n    hideSeconds,\n    onChange,\n    onClean,\n    onEnter,\n    onExit,\n    onOk,\n    onSelect,\n    onShortcutClick,\n    renderTitle,\n    renderValue,\n    renderCell,\n    ...restProps\n  } = propsWithDefaults;\n  const id = (0, _hooks.useUniqueId)('rs-', idProp);\n  const {\n    trigger,\n    root,\n    target,\n    overlay\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    merge,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';\n  const rangeFormatStr = `${formatStr}${character}${formatStr}`;\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);\n  const {\n    mode,\n    has\n  } = (0, _date.useDateMode)(formatStr);\n\n  // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  const onlyShowMonth = mode === _date.DateMode.Month;\n\n  // Only show the time panel. formatStr = 'HH:mm:ss'\n  const onlyShowTime = mode === _date.DateMode.Time;\n\n  // Allows two calendar panels to display the same month.\n  const allowSameMonth = onlyShowMonth || showOneCalendar || onlyShowTime;\n\n  // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0\n  const calendarGap = allowSameMonth ? 0 : 1;\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  const [isSelectedIdle, setSelectedIdle] = (0, _react.useState)(true);\n\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  const [selectedDates, setSelectedDates] = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []);\n\n  // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  const [hoverDateRange, setHoverDateRange] = (0, _react.useState)(value);\n\n  // The displayed calendar panel is rendered based on this value.\n  const [calendarDateRange, setCalendarDateRangeValue] = (0, _react.useState)((0, _utils.getSafeCalendarDate)({\n    value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null,\n    allowSameMonth\n  }));\n\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  const selectRangeValueRef = (0, _react.useRef)(null);\n\n  /**\n   *\n   * The key of the currently active calendar panel.\n   * Used to switch when only one calendar panel is displayed.\n   */\n  const [activeCalendarKey, setActiveCalendarKey] = (0, _react.useState)();\n\n  /**\n   * Get the time on the calendar.\n   */\n  const getCalendarDatetime = calendarKey => {\n    const index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDateRange === null || calendarDateRange === void 0 ? void 0 : calendarDateRange[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  const setCalendarDateRange = _ref3 => {\n    let {\n      dateRange,\n      calendarKey,\n      eventName\n    } = _ref3;\n    let nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if (has('time') && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {\n      const startDate = (0, _date.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      const endDate = (0, _date.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _date.addMonths)(startDate, calendarGap) : dateRange[1]\n      });\n      nextValue = [startDate, endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    const nextCalendarDate = (0, _utils.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey,\n      allowSameMonth\n    });\n    setCalendarDateRangeValue(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n  (0, _react.useEffect)(() => {\n    // If value changes, update the selected and hover date values on the calendar panel.\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  const getInputHtmlSize = () => {\n    const padding = 4;\n    let strings = rangeFormatStr;\n    if (value) {\n      const [startDate, endDate] = value;\n      strings = `${formatDate(startDate, formatStr)}${character}${formatDate(endDate, formatStr)}`;\n    }\n    return (0, _utils2.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  const getHoverRangeValue = date => {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return date => (0, _utils.getWeekHoverRange)(date, {\n          isoWeek,\n          weekStart,\n          locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale\n        });\n      } else if (hoverRange === 'month') {\n        return _utils.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    const hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    let hoverValues = hoverRangeFunc(date);\n    const isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _date.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _date.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  const setDateRange = function (event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  const onMouseMove = (0, _hooks.useEventCallback)(date => {\n    const nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        let nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _date.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(prevHoverValue => (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date]);\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  const handleSelectDate = (0, _hooks.useEventCallback)((index, date, event) => {\n    const calendarKey = index === 0 ? 'start' : 'end';\n    let nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    const hoverRangeValue = getHoverRangeValue(date);\n    const noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _date.startOfDay)(date), (0, _date.endOfDay)(date)] : hoverRangeValue);\n      onSelect === null || onSelect === void 0 || onSelect(date, event);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _date.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _date.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if (has('time')) {\n        nextSelectDates = [(0, _date.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _date.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    if (isSelectedIdle) {\n      setActiveCalendarKey('end');\n    } else {\n      setActiveCalendarKey('start');\n    }\n    setSelectedDates(nextSelectDates);\n    if (!(0, _date.isSameMonth)(calendarDateRange[index], date) || calendarSnapping) {\n      setCalendarDateRange({\n        dateRange: nextSelectDates,\n        calendarKey,\n        eventName: 'changeDate'\n      });\n    }\n    onSelect === null || onSelect === void 0 || onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(() => {\n    const selectValueLength = selectedDates.length;\n    const doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  const onChangeCalendarMonth = (0, _hooks.useEventCallback)((index, date) => {\n    const calendarKey = index === 0 ? 'start' : 'end';\n    const nextCalendarDate = Array.from(calendarDateRange);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  const onChangeCalendarTime = (0, _hooks.useEventCallback)((index, date) => {\n    const calendarKey = index === 0 ? 'start' : 'end';\n    const nextCalendarDate = Array.from(calendarDateRange);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(prev => {\n      const next = [...prev];\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _date.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n  const handleEnter = (0, _hooks.useEventCallback)(() => {\n    let nextCalendarDate;\n    if (value && value.length) {\n      const [startDate, endData] = value;\n      nextCalendarDate = [startDate, (0, _date.isSameMonth)(startDate, endData) ? (0, _date.addMonths)(endData, calendarGap) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null,\n        allowSameMonth\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n  const handleExit = (0, _hooks.useEventCallback)(() => {\n    setSelectedIdle(true);\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  const handleShortcutPageDate = (0, _hooks.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    const value = range.value;\n    setCalendarDateRange({\n      dateRange: value,\n      eventName: 'shortcutSelection'\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 || onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  const calculateDateRange = () => {\n    const [start = calendarDateRange[0], end = calendarDateRange[1]] = selectedDates;\n    if (onlyShowTime) {\n      return [start, end];\n    }\n    return selectedDates;\n  };\n  const handleClickOK = (0, _hooks.useEventCallback)(event => {\n    const nextValue = calculateDateRange();\n    setDateRange(event, nextValue);\n    onOk === null || onOk === void 0 || onOk(nextValue, event);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 || onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  const handleInputChange = (0, _hooks.useEventCallback)((value, event) => {\n    if (!value) {\n      return;\n    }\n    const [startDate, endDate] = value;\n    const selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue, false);\n  });\n\n  /**\n   * Check if the date is disabled\n   */\n  const isDateDisabled = (0, _useDateDisabled.default)({\n    shouldDisableDate\n  });\n\n  /**\n   * Check if a date range is disabled\n   */\n  const isRangeDisabled = (start, end, target) => {\n    if (isDateDisabled) {\n      // If the date is between the start and the end the button is disabled\n      while ((0, _date.isBefore)(start, end) || (0, _date.isSameDay)(start, end)) {\n        if (isDateDisabled(start, {\n          selectDate: selectedDates,\n          selectedDone: isSelectedIdle,\n          target\n        })) {\n          return true;\n        }\n        start = (0, _date.addDays)(start, 1);\n      }\n    }\n    return false;\n  };\n\n  /**\n   * Determine if the OK button should be disabled\n   */\n  const shouldDisableOkButton = () => {\n    const [startDate, endDate] = calculateDateRange();\n\n    // Check if start or end dates are missing\n    if (!startDate || !endDate) {\n      return true;\n    }\n\n    // Additional condition if only showing time\n    if (!onlyShowTime && !isSelectedIdle) {\n      return true;\n    }\n\n    // Check if there is any error in the selected date range\n    if (isErrorValue([startDate, endDate])) {\n      return true;\n    }\n    return false;\n  };\n\n  /**\n   * Check if a shortcut is disabled based on the selected date range\n   */\n  const shouldDisableShortcut = function (selectedDates) {\n    if (selectedDates === void 0) {\n      selectedDates = [];\n    }\n    if (selectedDates === null) {\n      return false;\n    }\n    const [startDate, endDate] = selectedDates;\n\n    // Disable if either start or end date is missing\n    if (!startDate || !endDate) {\n      return true;\n    }\n\n    // Check if the date range is disabled for the shortcut\n    return isRangeDisabled(startDate, endDate, _constants.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);\n  });\n  const handleInputKeyDown = (0, _hooks.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: () => {\n        var _trigger$current2;\n        const {\n          open\n        } = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {};\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 || _trigger$current3.open();\n        }\n      }\n    });\n  });\n  const disableCalendarDate = isDateDisabled ? (date, values, type) => {\n    return isDateDisabled(date, {\n      selectDate: values,\n      selectedDone: isSelectedIdle,\n      target: type\n    });\n  } : undefined;\n  const renderCalendarOverlay = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName, prefix('popup-daterange'));\n    const panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar,\n      'daterange-panel-only-time': onlyShowTime\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    const panelStyles = {\n      minWidth: showOneCalendar || onlyShowTime ? 'auto' : 528\n    };\n    const calendarProps = {\n      locale,\n      isoWeek,\n      weekStart,\n      limitEndYear,\n      showMeridiem,\n      calendarDateRange,\n      limitStartYear,\n      showWeekNumbers,\n      format: formatStr,\n      value: selectedDates,\n      monthDropdownProps,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      hideHours,\n      hideMinutes,\n      hideSeconds,\n      disabledHours: shouldDisableHour,\n      disabledMinutes: shouldDisableMinute,\n      disabledSeconds: shouldDisableSecond,\n      disabledDate: disableCalendarDate,\n      onSelect: handleSelectDate,\n      onChangeCalendarMonth,\n      onChangeCalendarTime,\n      onMouseMove,\n      renderTitle,\n      renderCellOnPicker: renderCell\n    };\n    const getCalendars = () => {\n      if (showOneCalendar) {\n        return /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n          index: activeCalendarKey === 'end' ? 1 : 0\n        }, calendarProps, {\n          __self: void 0,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 911,\n            columnNumber: 18\n          }\n        }));\n      }\n      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 0\n      }, calendarProps, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 916,\n          columnNumber: 13\n        }\n      })), /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 1\n      }, calendarProps, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 917,\n          columnNumber: 13\n        }\n      })));\n    };\n    const sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'left')) || [];\n    const bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? `${id}-label` : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: popupStyle,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 928,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 937,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      align: \"flex-start\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 938,\n        columnNumber: 13\n      }\n    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDateRange,\n      locale: locale,\n      disableShortcut: shouldDisableShortcut,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 940,\n        columnNumber: 17\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 953,\n        columnNumber: 15\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 954,\n        columnNumber: 17\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {\n      value: isSelectedIdle ? selectedDates : hoverDateRange,\n      formatStr: formatStr,\n      character: character,\n      clickable: showOneCalendar,\n      activeKey: activeCalendarKey,\n      onSelect: setActiveCalendarKey,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 956,\n        columnNumber: 21\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(`daterange-calendar-${showOneCalendar ? 'single' : 'group'}`),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 966,\n        columnNumber: 19\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerProvider.DateRangePickerProvider, {\n      value: {\n        isSelectedIdle\n      },\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 969,\n        columnNumber: 21\n      }\n    }, getCalendars()))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disableOkBtn: shouldDisableOkButton,\n      disableShortcut: shouldDisableShortcut,\n      hideOkBtn: oneTap,\n      onOk: handleClickOK,\n      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 974,\n        columnNumber: 17\n      }\n    })))));\n  };\n  const hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    classPrefix,\n    className,\n    name: 'daterange',\n    appearance,\n    hasValue,\n    cleanable\n  });\n  const caretAs = (0, _react.useMemo)(() => {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || (onlyShowTime ? _Time.default : _Calendar.default);\n  }, [caretAsProp, onlyShowTime]);\n  const isErrorValue = value => {\n    if (!value) {\n      return false;\n    }\n\n    // If the value is an empty array, it is not an error value.\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    const [startDate, endDate] = value;\n    if (!(0, _date.isValid)(startDate) || !(0, _date.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _date.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    const disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _constants.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(startDate, disabledOptions) || isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  const [ariaProps, rest] = (0, _utils2.partitionHTMLProps)(restProps, {\n    htmlProps: [],\n    includeAria: true\n  });\n  const showCleanButton = cleanable && hasValue && !readOnly;\n  const invalidValue = value && isErrorValue(value);\n  const {\n    customValue,\n    inputReadOnly,\n    Input,\n    events\n  } = (0, _useCustomizedInput.default)({\n    mode: 'dateRange',\n    value,\n    formatStr,\n    renderValue,\n    readOnly,\n    editable,\n    loading\n  });\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    trigger: \"active\",\n    ref: trigger,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    placement: placement,\n    onEnter: (0, _utils2.createChainedFunction)(events.onActive, handleEnter, onEnter),\n    onExit: (0, _utils2.createChainedFunction)(events.onInactive, handleExit, onExit),\n    speaker: renderCalendarOverlay,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1060,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    ref: root,\n    className: merge(classes, {\n      [prefix('error')]: invalidValue\n    }),\n    style: style,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1069,\n      columnNumber: 9\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1076,\n      columnNumber: 13\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys, ..._date.calendarOnlyProps]), {\n    inside: true,\n    className: prefix`input-group`,\n    disabled: disabled,\n    size: size,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1078,\n      columnNumber: 13\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix`label`,\n    id: `${id}-label`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1089,\n      columnNumber: 15\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? `${id}-label` : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: customValue || value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    readOnly: inputReadOnly,\n    htmlSize: getInputHtmlSize(),\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1092,\n      columnNumber: 15\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    size: size,\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1109,\n      columnNumber: 15\n    }\n  }))));\n}, StaticMethods);\nDateRangePicker.displayName = 'DateRangePicker';\nvar _default = exports[\"default\"] = DateRangePicker;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _Calendar = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Calendar */ \"./node_modules/@rsuite/icons/esm/react/Calendar.js\"));\nvar _Time = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Time */ \"./node_modules/@rsuite/icons/esm/react/Time.js\"));\nvar _Toolbar = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/Toolbar */ \"./src/DatePicker/Toolbar.tsx\"));\nvar _PredefinedRanges = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/PredefinedRanges */ \"./src/DatePicker/PredefinedRanges.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _DateRangeInput = _interopRequireDefault(__webpack_require__(/*! ../DateRangeInput */ \"./src/DateRangeInput/index.tsx\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup */ \"./src/InputGroup/index.tsx\"));\nvar _Header = _interopRequireDefault(__webpack_require__(/*! ./Header */ \"./src/DateRangePicker/Header.tsx\"));\nvar _useDateDisabled = _interopRequireDefault(__webpack_require__(/*! ./hooks/useDateDisabled */ \"./src/DateRangePicker/hooks/useDateDisabled.ts\"));\nvar _useCustomizedInput = _interopRequireDefault(__webpack_require__(/*! ../DatePicker/hooks/useCustomizedInput */ \"./src/DatePicker/hooks/useCustomizedInput.ts\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _Calendar2 = _interopRequireDefault(__webpack_require__(/*! ./Calendar */ \"./src/DateRangePicker/Calendar.tsx\"));\nvar StaticMethods = _interopRequireWildcard(__webpack_require__(/*! ./disabledDateUtils */ \"./src/DateRangePicker/disabledDateUtils.ts\"));\nvar _DateRangePickerProvider = __webpack_require__(/*! ./DateRangePickerProvider */ \"./src/DateRangePicker/DateRangePickerProvider.ts\");\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/DateRangePicker/utils.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils2 = __webpack_require__(/*! ../DatePicker/utils */ \"./src/DatePicker/utils.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _date = __webpack_require__(/*! ../internals/utils/date */ \"./src/internals/utils/date/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/DateRangePicker/DateRangePicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * A date range picker allows you to select a date range from a calendar.\n *\n * @see https://rsuitejs.com/components/date-range-picker\n */\nconst DateRangePicker = (0, _utils3.forwardRef)((props, ref) => {\n  var _ref, _ref2;\n  const {\n    formatDate,\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('DateRangePicker', props);\n  const {\n    as,\n    block,\n    classPrefix = 'picker',\n    className,\n    appearance = 'default',\n    editable = true,\n    cleanable = true,\n    character = ' ~ ',\n    calendarSnapping,\n    defaultCalendarValue,\n    defaultValue,\n    plaintext,\n    disabled,\n    shouldDisableDate,\n    shouldDisableHour,\n    shouldDisableMinute,\n    shouldDisableSecond,\n    format,\n    hoverRange,\n    id: idProp,\n    isoWeek = false,\n    weekStart = 0,\n    limitEndYear = 1000,\n    limitStartYear,\n    locale,\n    loading,\n    label,\n    popupClassName,\n    popupStyle,\n    oneTap,\n    placeholder = '',\n    placement = 'bottomStart',\n    ranges,\n    readOnly,\n    showOneCalendar = false,\n    showWeekNumbers,\n    showMeridiem,\n    showHeader = true,\n    style,\n    size,\n    caretAs: caretAsProp,\n    value: valueProp,\n    monthDropdownProps,\n    hideHours,\n    hideMinutes,\n    hideSeconds,\n    onChange,\n    onClean,\n    onEnter,\n    onExit,\n    onOk,\n    onSelect,\n    onShortcutClick,\n    renderTitle,\n    renderValue,\n    renderCell,\n    ...restProps\n  } = propsWithDefaults;\n  const id = (0, _hooks.useUniqueId)('rs-', idProp);\n  const {\n    trigger,\n    root,\n    target,\n    overlay\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    merge,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';\n  const rangeFormatStr = `${formatStr}${character}${formatStr}`;\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);\n  const {\n    mode,\n    has\n  } = (0, _date.useDateMode)(formatStr);\n\n  // Show only the calendar month panel. formatStr = 'yyyy-MM'\n  const onlyShowMonth = mode === _date.DateMode.Month;\n\n  // Only show the time panel. formatStr = 'HH:mm:ss'\n  const onlyShowTime = mode === _date.DateMode.Time;\n\n  // Allows two calendar panels to display the same month.\n  const allowSameMonth = onlyShowMonth || showOneCalendar || onlyShowTime;\n\n  // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0\n  const calendarGap = allowSameMonth ? 0 : 1;\n\n  /**\n   * Whether to complete the selection.\n   * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.\n   *\n   * In `oneTap` mode, select action will not change this value, its value should be true always.\n   */\n  const [isSelectedIdle, setSelectedIdle] = (0, _react.useState)(true);\n\n  /**\n   * The currently selected date range.\n   *\n   * The time range is selected by two clicks. After the first click,\n   * the cursor will store a temporary event date in the process until\n   * the second click to determine the end date of the date range.\n   *\n   */\n  const [selectedDates, setSelectedDates] = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []);\n\n  // The date of the current hover, used to reduce the calculation of `handleMouseMove`\n  const [hoverDateRange, setHoverDateRange] = (0, _react.useState)(value);\n\n  // The displayed calendar panel is rendered based on this value.\n  const [calendarDateRange, setCalendarDateRangeValue] = (0, _react.useState)((0, _utils.getSafeCalendarDate)({\n    value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null,\n    allowSameMonth\n  }));\n\n  /**\n   * When hoverRange is set, `selectValue` will be updated during the hover process,\n   * which will cause the `selectValue` to be updated after the first click,\n   * so declare a Ref to temporarily store the `selectValue` of the first click.\n   */\n  const selectRangeValueRef = (0, _react.useRef)(null);\n\n  /**\n   *\n   * The key of the currently active calendar panel.\n   * Used to switch when only one calendar panel is displayed.\n   */\n  const [activeCalendarKey, setActiveCalendarKey] = (0, _react.useState)();\n\n  /**\n   * Get the time on the calendar.\n   */\n  const getCalendarDatetime = calendarKey => {\n    const index = calendarKey === 'start' ? 0 : 1;\n    return (calendarDateRange === null || calendarDateRange === void 0 ? void 0 : calendarDateRange[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);\n  };\n\n  /**\n   * Call this function to update the calendar panel rendering benchmark value.\n   * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].\n   */\n  const setCalendarDateRange = _ref3 => {\n    let {\n      dateRange,\n      calendarKey,\n      eventName\n    } = _ref3;\n    let nextValue = dateRange;\n\n    // The time should remain the same when the dates in the date range are changed.\n    if (has('time') && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {\n      const startDate = (0, _date.copyTime)({\n        from: getCalendarDatetime('start'),\n        to: dateRange[0]\n      });\n      const endDate = (0, _date.copyTime)({\n        from: getCalendarDatetime('end'),\n        to: dateRange.length === 1 ? (0, _date.addMonths)(startDate, calendarGap) : dateRange[1]\n      });\n      nextValue = [startDate, endDate];\n    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {\n      // Make the calendar render the value of defaultCalendarValue after clearing the value.\n      nextValue = defaultCalendarValue;\n    }\n    const nextCalendarDate = (0, _utils.getSafeCalendarDate)({\n      value: nextValue,\n      calendarKey,\n      allowSameMonth\n    });\n    setCalendarDateRangeValue(nextCalendarDate);\n    if (onlyShowMonth && eventName === 'changeMonth') {\n      setSelectedDates(nextCalendarDate);\n    }\n  };\n  (0, _react.useEffect)(() => {\n    // If value changes, update the selected and hover date values on the calendar panel.\n    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);\n    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);\n  }, [valueProp]);\n  const getInputHtmlSize = () => {\n    const padding = 4;\n    let strings = rangeFormatStr;\n    if (value) {\n      const [startDate, endDate] = value;\n      strings = `${formatDate(startDate, formatStr)}${character}${formatDate(endDate, formatStr)}`;\n    }\n    return (0, _utils3.getStringLength)(strings) + padding;\n  };\n\n  /**\n   * preset hover range\n   */\n  const getHoverRangeValue = date => {\n    function getHoverRangeFunc() {\n      if (hoverRange === 'week') {\n        return date => (0, _utils.getWeekHoverRange)(date, {\n          isoWeek,\n          weekStart,\n          locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale\n        });\n      } else if (hoverRange === 'month') {\n        return _utils.getMonthHoverRange;\n      }\n      return hoverRange;\n    }\n    const hoverRangeFunc = getHoverRangeFunc();\n    if ((0, _isNil.default)(hoverRangeFunc)) {\n      return null;\n    }\n    let hoverValues = hoverRangeFunc(date);\n    const isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;\n    if (!isHoverRangeValid) {\n      return null;\n    }\n    if ((0, _date.isAfter)(hoverValues[0], hoverValues[1])) {\n      hoverValues = (0, _date.reverseDateRangeOmitTime)(hoverValues);\n    }\n    return hoverValues;\n  };\n  const setDateRange = function (event, nextValue, closeOverlay) {\n    if (closeOverlay === void 0) {\n      closeOverlay = true;\n    }\n    // If nextValue is null, it means that the user is erasing the selected dates.\n    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);\n    setValue(nextValue);\n    if (!(0, _utils.isSameRange)(nextValue, value, formatStr)) {\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n\n    // `closeOverlay` default value is `true`\n    if (closeOverlay !== false) {\n      handleClose();\n    }\n  };\n\n  /**\n   * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.\n   * The MouseMove event is called between the first click and the second click to update the selection state.\n   */\n  const onMouseMove = (0, _hooks.useEventCallback)(date => {\n    const nextHoverDateRange = getHoverRangeValue(date);\n\n    // If hasDoneSelect is false,\n    // it means there's already one selected date\n    // and waiting for user to select the second date to complete the selection.\n    if (!isSelectedIdle) {\n      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules\n      if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {\n        let nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];\n        if ((0, _date.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {\n          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];\n        }\n        setSelectedDates(nextSelectedDates);\n      } else {\n        setHoverDateRange(prevHoverValue => (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date]);\n      }\n\n      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated\n    } else if (!(0, _isNil.default)(nextHoverDateRange)) {\n      setHoverDateRange(nextHoverDateRange);\n    }\n  });\n\n  /**\n   * Callback for selecting a date cell in the calendar grid\n   */\n  const handleSelectDate = (0, _hooks.useEventCallback)((index, date, event) => {\n    const calendarKey = index === 0 ? 'start' : 'end';\n    let nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];\n    const hoverRangeValue = getHoverRangeValue(date);\n    const noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);\n\n    // in `oneTap` mode\n    if (oneTap) {\n      setDateRange(event, noHoverRangeValid ? [(0, _date.startOfDay)(date), (0, _date.endOfDay)(date)] : hoverRangeValue);\n      onSelect === null || onSelect === void 0 || onSelect(date, event);\n      return;\n    }\n\n    // no preset hover range can use\n    if (noHoverRangeValid) {\n      // start select\n      if (isSelectedIdle) {\n        nextSelectDates = [date];\n      } else {\n        // finish select\n        nextSelectDates[1] = date;\n      }\n    } else {\n      if (!isSelectedIdle) {\n        nextSelectDates = selectedDates;\n        selectRangeValueRef.current = null;\n      } else {\n        nextSelectDates = hoverRangeValue;\n        selectRangeValueRef.current = hoverRangeValue;\n      }\n    }\n    if (nextSelectDates.length === 2) {\n      // If user have completed the selection, then sort the selected dates.\n      if ((0, _date.isAfter)(nextSelectDates[0], nextSelectDates[1])) {\n        nextSelectDates = (0, _date.reverseDateRangeOmitTime)(nextSelectDates);\n      }\n      if (has('time')) {\n        nextSelectDates = [(0, _date.copyTime)({\n          from: getCalendarDatetime('start'),\n          to: nextSelectDates[0]\n        }), (0, _date.copyTime)({\n          from: getCalendarDatetime('end'),\n          to: nextSelectDates[1]\n        })];\n      }\n      setHoverDateRange(nextSelectDates);\n    } else {\n      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);\n    }\n    if (isSelectedIdle) {\n      setActiveCalendarKey('end');\n    } else {\n      setActiveCalendarKey('start');\n    }\n    setSelectedDates(nextSelectDates);\n    if (!(0, _date.isSameMonth)(calendarDateRange[index], date) || calendarSnapping) {\n      setCalendarDateRange({\n        dateRange: nextSelectDates,\n        calendarKey,\n        eventName: 'changeDate'\n      });\n    }\n    onSelect === null || onSelect === void 0 || onSelect(date, event);\n    setSelectedIdle(!isSelectedIdle);\n  });\n\n  /**\n   * If `selectValue` changed, there will be the following effects.\n   * 1. Check if the selection is completed.\n   * 2. if the selection is completed, set the temporary `hoverValue` empty.\n   */\n  (0, _react.useEffect)(() => {\n    const selectValueLength = selectedDates.length;\n    const doneSelected = selectValueLength === 0 || selectValueLength === 2;\n    doneSelected && setHoverDateRange(null);\n  }, [selectedDates]);\n  const onChangeCalendarMonth = (0, _hooks.useEventCallback)((index, date) => {\n    const calendarKey = index === 0 ? 'start' : 'end';\n    const nextCalendarDate = Array.from(calendarDateRange);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey,\n      eventName: 'changeMonth'\n    });\n  });\n  const onChangeCalendarTime = (0, _hooks.useEventCallback)((index, date) => {\n    const calendarKey = index === 0 ? 'start' : 'end';\n    const nextCalendarDate = Array.from(calendarDateRange);\n    nextCalendarDate[index] = date;\n    setCalendarDateRange({\n      dateRange: nextCalendarDate,\n      calendarKey,\n      eventName: 'changeTime'\n    });\n    setSelectedDates(prev => {\n      const next = [...prev];\n\n      // if next[index] is not empty, only update the time after aligning the year, month and day\n      next[index] = next[index] ? (0, _date.copyTime)({\n        from: date,\n        to: next[index]\n      }) : new Date(date.valueOf());\n      return next;\n    });\n  });\n  const handleEnter = (0, _hooks.useEventCallback)(() => {\n    let nextCalendarDate;\n    if (value && value.length) {\n      const [startDate, endData] = value;\n      nextCalendarDate = [startDate, (0, _date.isSameMonth)(startDate, endData) ? (0, _date.addMonths)(endData, calendarGap) : endData];\n    } else {\n      // Reset the date on the calendar to the default date\n      nextCalendarDate = (0, _utils.getSafeCalendarDate)({\n        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null,\n        allowSameMonth\n      });\n    }\n    setSelectedDates(value !== null && value !== void 0 ? value : []);\n    setCalendarDateRange({\n      dateRange: nextCalendarDate\n    });\n  });\n  const handleExit = (0, _hooks.useEventCallback)(() => {\n    setSelectedIdle(true);\n  });\n\n  /**\n   * Toolbar operation callback function\n   */\n  const handleShortcutPageDate = (0, _hooks.useEventCallback)(function (range, closeOverlay, event) {\n    if (closeOverlay === void 0) {\n      closeOverlay = false;\n    }\n    const value = range.value;\n    setCalendarDateRange({\n      dateRange: value,\n      eventName: 'shortcutSelection'\n    });\n    if (closeOverlay) {\n      setDateRange(event, value, closeOverlay);\n    } else {\n      setSelectedDates(value !== null && value !== void 0 ? value : []);\n    }\n    onShortcutClick === null || onShortcutClick === void 0 || onShortcutClick(range, event);\n\n    // End unfinished selections.\n    setSelectedIdle(true);\n  });\n  const calculateDateRange = () => {\n    const [start = calendarDateRange[0], end = calendarDateRange[1]] = selectedDates;\n    if (onlyShowTime) {\n      return [start, end];\n    }\n    return selectedDates;\n  };\n  const handleClickOK = (0, _hooks.useEventCallback)(event => {\n    const nextValue = calculateDateRange();\n    setDateRange(event, nextValue);\n    onOk === null || onOk === void 0 || onOk(nextValue, event);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    setCalendarDateRange({\n      dateRange: null\n    });\n    setDateRange(event, null);\n    onClean === null || onClean === void 0 || onClean(event);\n    event.stopPropagation();\n  });\n\n  /**\n   * Callback after the input box value is changed.\n   */\n  const handleInputChange = (0, _hooks.useEventCallback)((value, event) => {\n    if (!value) {\n      return;\n    }\n    const [startDate, endDate] = value;\n    const selectValue = [startDate, endDate];\n    setHoverDateRange(selectValue);\n    setSelectedDates(selectValue);\n    setCalendarDateRange({\n      dateRange: selectValue\n    });\n    setDateRange(event, selectValue, false);\n  });\n\n  /**\n   * Check if the date is disabled\n   */\n  const isDateDisabled = (0, _useDateDisabled.default)({\n    shouldDisableDate\n  });\n\n  /**\n   * Check if a date range is disabled\n   */\n  const isRangeDisabled = (start, end, target) => {\n    if (isDateDisabled) {\n      // If the date is between the start and the end the button is disabled\n      while ((0, _date.isBefore)(start, end) || (0, _date.isSameDay)(start, end)) {\n        if (isDateDisabled(start, {\n          selectDate: selectedDates,\n          selectedDone: isSelectedIdle,\n          target\n        })) {\n          return true;\n        }\n        start = (0, _date.addDays)(start, 1);\n      }\n    }\n    return false;\n  };\n\n  /**\n   * Determine if the OK button should be disabled\n   */\n  const shouldDisableOkButton = () => {\n    const [startDate, endDate] = calculateDateRange();\n\n    // Check if start or end dates are missing\n    if (!startDate || !endDate) {\n      return true;\n    }\n\n    // Additional condition if only showing time\n    if (!onlyShowTime && !isSelectedIdle) {\n      return true;\n    }\n\n    // Check if there is any error in the selected date range\n    if (isErrorValue([startDate, endDate])) {\n      return true;\n    }\n    return false;\n  };\n\n  /**\n   * Check if a shortcut is disabled based on the selected date range\n   */\n  const shouldDisableShortcut = function (selectedDates) {\n    if (selectedDates === void 0) {\n      selectedDates = [];\n    }\n    if (selectedDates === null) {\n      return false;\n    }\n    const [startDate, endDate] = selectedDates;\n\n    // Disable if either start or end date is missing\n    if (!startDate || !endDate) {\n      return true;\n    }\n\n    // Check if the date range is disabled for the shortcut\n    return isRangeDisabled(startDate, endDate, _constants.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);\n  };\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);\n  });\n  const handleInputKeyDown = (0, _hooks.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      esc: handleClose,\n      enter: () => {\n        var _trigger$current2;\n        const {\n          open\n        } = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {};\n        if (!open) {\n          var _trigger$current3;\n          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 || _trigger$current3.open();\n        }\n      }\n    });\n  });\n  const disableCalendarDate = isDateDisabled ? (date, values, type) => {\n    return isDateDisabled(date, {\n      selectDate: values,\n      selectedDone: isSelectedIdle,\n      target: type\n    });\n  } : undefined;\n  const renderCalendarOverlay = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName, prefix('popup-daterange'));\n    const panelClasses = prefix('daterange-panel', {\n      'daterange-panel-show-one-calendar': showOneCalendar,\n      'daterange-panel-only-time': onlyShowTime\n    });\n\n    /**\n     * Set a min-width (528px) when there are two calendars\n     * @see https://github.com/rsuite/rsuite/issues/3522\n     */\n    const panelStyles = {\n      minWidth: showOneCalendar || onlyShowTime ? 'auto' : 528\n    };\n    const calendarProps = {\n      locale,\n      isoWeek,\n      weekStart,\n      limitEndYear,\n      showMeridiem,\n      calendarDateRange,\n      limitStartYear,\n      showWeekNumbers,\n      format: formatStr,\n      value: selectedDates,\n      monthDropdownProps,\n      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,\n      hideHours,\n      hideMinutes,\n      hideSeconds,\n      disabledHours: shouldDisableHour,\n      disabledMinutes: shouldDisableMinute,\n      disabledSeconds: shouldDisableSecond,\n      disabledDate: disableCalendarDate,\n      onSelect: handleSelectDate,\n      onChangeCalendarMonth,\n      onChangeCalendarTime,\n      onMouseMove,\n      renderTitle,\n      renderCellOnPicker: renderCell\n    };\n    const getCalendars = () => {\n      if (showOneCalendar) {\n        return /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n          index: activeCalendarKey === 'end' ? 1 : 0\n        }, calendarProps, {\n          __self: void 0,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 911,\n            columnNumber: 18\n          }\n        }));\n      }\n      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 0\n      }, calendarProps, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 916,\n          columnNumber: 13\n        }\n      })), /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 1\n      }, calendarProps, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 917,\n          columnNumber: 13\n        }\n      })));\n    };\n    const {\n      sideRanges,\n      bottomRanges\n    } = (0, _utils2.splitRanges)(ranges);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      role: \"dialog\",\n      \"aria-labelledby\": label ? `${id}-label` : undefined,\n      tabIndex: -1,\n      className: classes,\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      target: trigger,\n      style: popupStyle,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 925,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 934,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      align: \"flex-start\",\n      h: \"100%\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 935,\n        columnNumber: 13\n      }\n    }, sideRanges && sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {\n      direction: \"column\",\n      spacing: 0,\n      className: prefix('daterange-predefined'),\n      ranges: sideRanges,\n      calendarDate: calendarDateRange,\n      locale: locale,\n      disableShortcut: shouldDisableShortcut,\n      onShortcutClick: handleShortcutPageDate,\n      \"data-testid\": \"daterange-predefined-side\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 937,\n        columnNumber: 17\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Box.default, {\n      className: prefix('box'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 950,\n        columnNumber: 15\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 951,\n        columnNumber: 17\n      }\n    }, showHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {\n      value: isSelectedIdle ? selectedDates : hoverDateRange,\n      formatStr: formatStr,\n      character: character,\n      clickable: showOneCalendar,\n      activeKey: activeCalendarKey,\n      onSelect: setActiveCalendarKey,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 953,\n        columnNumber: 21\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(`daterange-calendar-${showOneCalendar ? 'single' : 'group'}`),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 963,\n        columnNumber: 19\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerProvider.DateRangePickerProvider, {\n      value: {\n        isSelectedIdle\n      },\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 966,\n        columnNumber: 21\n      }\n    }, getCalendars()))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {\n      locale: locale,\n      calendarDate: selectedDates,\n      disableOkBtn: shouldDisableOkButton,\n      disableShortcut: shouldDisableShortcut,\n      hideOkBtn: oneTap,\n      onOk: handleClickOK,\n      onShortcutClick: handleShortcutPageDate,\n      ranges: bottomRanges,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 971,\n        columnNumber: 17\n      }\n    })))));\n  };\n  const hasValue = !(0, _isNil.default)(value) && value.length > 1;\n  const caretAs = (0, _react.useMemo)(() => {\n    if (caretAsProp === null) {\n      return null;\n    }\n    return caretAsProp || (onlyShowTime ? _Time.default : _Calendar.default);\n  }, [caretAsProp, onlyShowTime]);\n  const isErrorValue = value => {\n    if (!value) {\n      return false;\n    }\n\n    // If the value is an empty array, it is not an error value.\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    const [startDate, endDate] = value;\n    if (!(0, _date.isValid)(startDate) || !(0, _date.isValid)(endDate)) {\n      return true;\n    }\n    if ((0, _date.isBefore)(endDate, startDate)) {\n      return true;\n    }\n    const disabledOptions = {\n      selectDate: value,\n      selectedDone: isSelectedIdle,\n      target: _constants.DATERANGE_DISABLED_TARGET.INPUT\n    };\n    if (isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(startDate, disabledOptions) || isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(endDate, disabledOptions)) {\n      return true;\n    }\n    return false;\n  };\n  const [ariaProps, rest] = (0, _utils3.partitionHTMLProps)(restProps, {\n    htmlProps: [],\n    includeAria: true\n  });\n  const showCleanButton = cleanable && hasValue && !readOnly;\n  const invalidValue = value && isErrorValue(value);\n  const {\n    customValue,\n    inputReadOnly,\n    Input,\n    events\n  } = (0, _useCustomizedInput.default)({\n    mode: 'dateRange',\n    value,\n    formatStr,\n    renderValue,\n    readOnly,\n    editable,\n    loading\n  });\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    onEnter: (0, _utils3.createChainedFunction)(events.onActive, handleEnter, onEnter),\n    onExit: (0, _utils3.createChainedFunction)(events.onInactive, handleExit, onExit)\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    as: as,\n    name: \"date-range\",\n    classPrefix: classPrefix,\n    className: merge(className, {\n      [prefix('error')]: invalidValue\n    }),\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    style: style,\n    rootRef: root,\n    ref: trigger,\n    placement: placement,\n    trigger: \"active\",\n    triggerProps: triggerProps,\n    speaker: renderCalendarOverlay,\n    \"data-cleanable\": cleanable,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1054,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1072,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._date.calendarOnlyProps, ..._Picker.triggerPropKeys]), {\n    inside: true,\n    className: prefix`input-group`,\n    disabled: disabled,\n    size: size,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1074,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix`label`,\n    id: `${id}-label`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1081,\n      columnNumber: 13\n    }\n  }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({\n    \"aria-haspopup\": \"dialog\",\n    \"aria-invalid\": invalidValue,\n    \"aria-labelledby\": label ? `${id}-label` : undefined\n  }, ariaProps, {\n    ref: target,\n    id: id,\n    value: customValue || value,\n    character: character,\n    format: formatStr,\n    placeholder: placeholder ? placeholder : rangeFormatStr,\n    disabled: disabled,\n    readOnly: inputReadOnly,\n    htmlSize: getInputHtmlSize(),\n    onChange: handleInputChange,\n    onKeyDown: handleInputKeyDown,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1084,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    size: size,\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1101,\n      columnNumber: 13\n    }\n  })));\n}, StaticMethods);\nDateRangePicker.displayName = 'DateRangePicker';\nvar _default = exports[\"default\"] = DateRangePicker;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
 
 /***/ }),
 
@@ -3018,7 +3018,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _react = __webpack_require__(/*! react */ \"react\");\n/**\n * Convert a flat schema object to a nested schema object\n *\n * @example\n *\n * ```js\n * const schema = {\n *  'address.city': StringType().isRequired('City is required'),\n *  'address.street': StringType().isRequired('Street is required')\n * };\n *\n * const result = unflattenSchemaObject(schema);\n *\n * // result\n * {\n *    address: ObjectType().shape({\n *      city: StringType().isRequired('City is required'),\n *      street: StringType().isRequired('Street is required')\n *    })\n * }\n * ```\n */\nfunction unflattenSchemaObject(schema) {\n  const result = {};\n  const $type = Symbol('schema-type');\n  Object.keys(schema).forEach(key => {\n    if (key.includes('.')) {\n      const keys = key.split('.');\n      const lastKey = keys.pop() || '';\n      let current = result;\n      keys.forEach(subKey => {\n        current[subKey] = current[subKey] || {\n          [$type]: 'object-type'\n        };\n        current = current[subKey];\n      });\n      current[lastKey] = schema[key];\n    } else {\n      result[key] = schema[key];\n    }\n  });\n  function convertToShape(obj) {\n    Object.keys(obj).forEach(key => {\n      var _obj$key;\n      if (((_obj$key = obj[key]) === null || _obj$key === void 0 ? void 0 : _obj$key[$type]) === 'object-type') {\n        delete obj[key][$type];\n        obj[key] = (0, _schemaTyped.ObjectType)().shape(convertToShape(obj[key]));\n      }\n    });\n    return obj;\n  }\n  return convertToShape(result);\n}\nfunction useSchemaModel(formModel, nestedField) {\n  const subRulesRef = (0, _react.useRef)([]);\n  const pushFieldRule = (0, _react.useCallback)((name, fieldRule) => {\n    subRulesRef.current.push({\n      name,\n      fieldRule\n    });\n  }, []);\n  const removeFieldRule = (0, _react.useCallback)(name => {\n    const index = subRulesRef.current.findIndex(v => v.name === name);\n    subRulesRef.current.splice(index, 1);\n  }, []);\n  const getCombinedModel = (0, _react.useCallback)(() => {\n    const realSubRules = subRulesRef.current.filter(v => Boolean(v.fieldRule.current));\n\n    // If there is no sub rule, return the original form model\n    if (realSubRules.length === 0) {\n      return formModel;\n    }\n    const subRuleObject = realSubRules.map(_ref => {\n      let {\n        name,\n        fieldRule\n      } = _ref;\n      return {\n        [name]: fieldRule.current\n      };\n    }).reduce((a, b) => Object.assign(a, b), {});\n    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(nestedField ? unflattenSchemaObject(subRuleObject) : subRuleObject));\n  }, [formModel, nestedField]);\n  return {\n    getCombinedModel,\n    pushFieldRule,\n    removeFieldRule\n  };\n}\nvar _default = exports[\"default\"] = useSchemaModel;\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useSchemaModel.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _constructFlatSchema = __webpack_require__(/*! ../utils/constructFlatSchema */ \"./src/Form/utils/constructFlatSchema.ts\");\nfunction useSchemaModel(formModel, nestedField) {\n  const subRulesRef = (0, _react.useRef)([]);\n  const pushFieldRule = (0, _react.useCallback)((name, fieldRule) => {\n    subRulesRef.current.push({\n      name,\n      fieldRule\n    });\n  }, []);\n  const removeFieldRule = (0, _react.useCallback)(name => {\n    const index = subRulesRef.current.findIndex(v => v.name === name);\n    subRulesRef.current.splice(index, 1);\n  }, []);\n  const getCombinedModel = (0, _react.useCallback)(() => {\n    const realSubRules = subRulesRef.current.filter(v => Boolean(v.fieldRule.current));\n\n    // If there is no sub rule, return the original form model\n    if (realSubRules.length === 0) {\n      return formModel;\n    }\n    const subRuleObject = realSubRules.map(_ref => {\n      let {\n        name,\n        fieldRule\n      } = _ref;\n      return {\n        [name]: fieldRule.current\n      };\n    }).reduce((a, b) => Object.assign(a, b), {});\n    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(nestedField ? (0, _constructFlatSchema.constructFlatSchema)(subRuleObject) : subRuleObject));\n  }, [formModel, nestedField]);\n  return {\n    getCombinedModel,\n    pushFieldRule,\n    removeFieldRule\n  };\n}\nvar _default = exports[\"default\"] = useSchemaModel;\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useSchemaModel.ts?");
 
 /***/ }),
 
@@ -3033,6 +3033,17 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/Form/utils/constructFlatSchema.ts":
+/*!***********************************************!*\
+  !*** ./src/Form/utils/constructFlatSchema.ts ***!
+  \***********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.constructFlatSchema = constructFlatSchema;\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\n/**\n * combine flat schema to nested schema\n */\nfunction constructFlatSchema(schema) {\n  const shape = {};\n  Object.keys(schema).forEach(key => {\n    (0, _set.default)(shape, key, {\n      schema: schema[key],\n      primitiveType: true\n    });\n  });\n  function convertShapeToSchema(shape, result, internal) {\n    Object.keys(shape).forEach(key => {\n      const currentShape = shape[key];\n      if (Array.isArray(currentShape)) {\n        result[key] = (0, _schemaTyped.ArrayType)().of(...currentShape.map(v => {\n          if (v.primitiveType) {\n            return v.schema;\n          }\n          return convertShapeToSchema(v, {}, true);\n        }));\n      } else {\n        if (currentShape.primitiveType) {\n          result[key] = currentShape.schema;\n        } else {\n          result[key] = convertShapeToSchema(currentShape, {}, true);\n        }\n      }\n    });\n    return internal ? (0, _schemaTyped.ObjectType)().shape(result) : result;\n  }\n  return convertShapeToSchema(shape, {});\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/utils/constructFlatSchema.ts?");
+
+/***/ }),
+
 /***/ "./src/FormControl/FormControl.tsx":
 /*!*****************************************!*\
   !*** ./src/FormControl/FormControl.tsx ***!
@@ -3227,7 +3238,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Grid/Row.tsx\";\nconst getResponsiveGutterStyles = gutter => {\n  if (!gutter) {\n    return {};\n  }\n  if (typeof gutter !== 'object') {\n    return {\n      '--rs-grid-gutter': (0, _utils.getCssValue)(gutter)\n    };\n  }\n  return _constants.BREAKPOINTS.reduce((styles, breakpoint) => {\n    const breakpointValue = gutter[breakpoint];\n    if (!breakpointValue) return styles;\n    const newStyles = {\n      [`--rs-grid-gutter${breakpoint === 'xs' ? '' : `-${breakpoint}`}`]: (0, _utils.getCssValue)(breakpointValue)\n    };\n    return (0, _utils.mergeStyles)(styles, newStyles);\n  }, {});\n};\n/**\n * The Row component is used to create a row container that can contain Col components.\n * @see https://rsuitejs.com/components/grid\n */\nconst Row = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Row', props);\n  const {\n    as,\n    className,\n    classPrefix = 'row',\n    style,\n    align,\n    justify,\n    gutter,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withPrefix,\n    merge,\n    responsive\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix(), ...responsive(align), ...responsive(justify));\n  const rowStyles = (0, _utils.mergeStyles)(style, getResponsiveGutterStyles(gutter));\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as\n  }, rest, {\n    ref: ref,\n    className: classes,\n    style: rowStyles,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 64,\n      columnNumber: 10\n    }\n  }));\n});\nRow.displayName = 'Row';\nvar _default = exports[\"default\"] = Row;\n\n//# sourceURL=webpack://rsuite/./src/Grid/Row.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _styles = __webpack_require__(/*! ./utils/styles */ \"./src/Grid/utils/styles.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Grid/Row.tsx\";\n/**\n * The Row component is used to create a row container that can contain Col components.\n * @see https://rsuitejs.com/components/grid\n */\nconst Row = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Row', props);\n  const {\n    as,\n    className,\n    classPrefix = 'row',\n    style,\n    align,\n    justify,\n    gutter,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withPrefix,\n    merge,\n    responsive\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix(), ...responsive(align), ...responsive(justify));\n  const rowStyles = (0, _utils.mergeStyles)(style, (0, _styles.getResponsiveGutterStyles)(gutter));\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as\n  }, rest, {\n    ref: ref,\n    className: classes,\n    style: rowStyles,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 10\n    }\n  }));\n});\nRow.displayName = 'Row';\nvar _default = exports[\"default\"] = Row;\n\n//# sourceURL=webpack://rsuite/./src/Grid/Row.tsx?");
 
 /***/ }),
 
@@ -3242,6 +3253,17 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/Grid/utils/styles.ts":
+/*!**********************************!*\
+  !*** ./src/Grid/utils/styles.ts ***!
+  \**********************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.getResponsiveGutterStyles = void 0;\nvar _isPlainObject = _interopRequireDefault(__webpack_require__(/*! lodash/isPlainObject */ \"./node_modules/lodash/isPlainObject.js\"));\nvar _constants = __webpack_require__(/*! ../../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _utils = __webpack_require__(/*! ../../internals/utils */ \"./src/internals/utils/index.ts\");\n/**\n * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]\n */\nconst getResponsiveGutterStyles = gutter => {\n  if (typeof gutter === 'undefined') {\n    return {};\n  }\n\n  // Helper function to process gutter values and generate CSS variables\n  const processGutterValue = function (value, prefix) {\n    if (prefix === void 0) {\n      prefix = '';\n    }\n    const [h, v] = Array.isArray(value) ? value : [value, value];\n    return {\n      [`--rs-grid-gutter${prefix}`]: (0, _utils.getCssValue)(h),\n      [`--rs-grid-row-gutter${prefix}`]: (0, _utils.getCssValue)(v)\n    };\n  };\n\n  // Handle responsive object\n  if ((0, _isPlainObject.default)(gutter)) {\n    return _constants.BREAKPOINTS.reduce((styles, breakpoint) => {\n      const value = gutter[breakpoint];\n      if (!value) return styles;\n      const prefix = breakpoint === 'xs' ? '' : `-${breakpoint}`;\n      return (0, _utils.mergeStyles)(styles, processGutterValue(value, prefix));\n    }, {});\n  }\n\n  // Handle non-responsive value\n  return processGutterValue(gutter);\n};\nexports.getResponsiveGutterStyles = getResponsiveGutterStyles;\n\n//# sourceURL=webpack://rsuite/./src/Grid/utils/styles.ts?");
+
+/***/ }),
+
 /***/ "./src/Header/Header.tsx":
 /*!*******************************!*\
   !*** ./src/Header/Header.tsx ***!
@@ -3579,7 +3601,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _TextBox = _interopRequireDefault(__webpack_require__(/*! ./TextBox */ \"./src/InputPicker/TextBox.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _useInput = _interopRequireDefault(__webpack_require__(/*! ./hooks/useInput */ \"./src/InputPicker/hooks/useInput.ts\"));\nvar _useData = _interopRequireDefault(__webpack_require__(/*! ./hooks/useData */ \"./src/InputPicker/hooks/useData.ts\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _InputPickerContext = __webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/InputPicker/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Position = __webpack_require__(/*! ../internals/Overlay/Position */ \"./src/internals/Overlay/Position.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/InputPicker/InputPicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Single item selector with text box input.\n *\n * @see https://rsuitejs.com/components/input-picker\n */\nconst InputPicker = (0, _utils3.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('InputPicker', props);\n  const {\n    as,\n    appearance = 'default',\n    cleanable = true,\n    cacheData = [],\n    classPrefix = 'picker',\n    caretAs,\n    data: controlledData = [],\n    disabled,\n    readOnly,\n    plaintext,\n    defaultValue,\n    defaultOpen = false,\n    disabledItemValues = [],\n    locale,\n    toggleAs,\n    style,\n    size = 'md',\n    searchable = true,\n    open: controlledOpen,\n    placeholder,\n    placement = 'bottomStart',\n    groupBy,\n    popupClassName,\n    popupStyle,\n    popupAutoWidth = true,\n    listboxMaxHeight = 320,\n    creatable,\n    shouldDisplayCreateOption,\n    value: valueProp,\n    valueKey = 'value',\n    virtualized,\n    labelKey = 'label',\n    listProps,\n    id,\n    tabIndex,\n    loading,\n    label,\n    sort,\n    renderListbox,\n    renderExtraFooter,\n    renderValue,\n    renderOption,\n    renderOptionGroup,\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    onChange,\n    onClean,\n    onCreate,\n    onSearch,\n    onSelect,\n    onBlur,\n    onFocus,\n    searchBy,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    multi,\n    tagProps,\n    trigger,\n    disabledOptions,\n    onTagRemove,\n    renderCheckbox\n  } = (0, _InputPickerContext.useTagContext)();\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  const {\n    trigger: triggerRef,\n    root,\n    target,\n    overlay,\n    list\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const [open, setOpen] = (0, _hooks.useControlled)(controlledOpen, defaultOpen);\n  const {\n    inputRef,\n    inputProps,\n    focus,\n    blur\n  } = (0, _useInput.default)({\n    multi,\n    triggerRef\n  });\n  const handleDataChange = data => {\n    var _data$;\n    setFocusItemValue(data === null || data === void 0 || (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$[valueKey]);\n  };\n  const {\n    data,\n    dataWithCache,\n    newData,\n    setNewData\n  } = (0, _useData.default)({\n    controlledData,\n    cacheData,\n    onChange: handleDataChange\n  });\n  const [value, setValue, isControlled] = (0, _hooks.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue);\n  const cloneValue = () => multi ? (0, _clone.default)(value) || [] : value;\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    var _triggerRef$current, _target$current, _target$current$focus;\n    triggerRef === null || triggerRef === void 0 || (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 || (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 || _target$current$focus.call(_target$current);\n  });\n  const focusItemValueOptions = {\n    data: dataWithCache,\n    valueKey,\n    target: () => overlay.current\n  };\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown\n  } = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, focusItemValueOptions);\n  const onSearchCallback = (0, _hooks.useEventCallback)((searchKeyword, filteredData, event) => {\n    if (!disabledOptions) {\n      var _filteredData$;\n      // The first option after filtering is the focus.\n      let firstItemValue = filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey];\n\n      // If there is no value in the option and new options are supported, the search keyword is the first option\n      if (!firstItemValue && creatable) {\n        firstItemValue = searchKeyword;\n      }\n      setFocusItemValue(firstItemValue);\n    }\n    onSearch === null || onSearch === void 0 || onSearch(searchKeyword, event);\n  });\n  const searchOptions = {\n    labelKey,\n    searchBy,\n    callback: onSearchCallback\n  };\n\n  // Use search keywords to filter options.\n  const {\n    searchKeyword,\n    resetSearch,\n    checkShouldDisplay,\n    handleSearch\n  } = (0, _Picker.useSearch)(data, searchOptions);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(() => {\n    var _triggerRef$current2, _triggerRef$current2$;\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || (_triggerRef$current2$ = _triggerRef$current2.updatePosition) === null || _triggerRef$current2$ === void 0 || _triggerRef$current2$.call(_triggerRef$current2);\n  }, [searchKeyword, value]);\n  const getDataItem = value => {\n    // Find active `MenuItem` by `value`\n    const activeItem = dataWithCache.find(item => (0, _utils3.shallowEqual)(item[valueKey], value));\n    let itemNode = placeholder;\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem,\n      itemNode\n    };\n  };\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  const createOption = value => {\n    const option = {\n      create: true,\n      [valueKey]: value,\n      [labelKey]: value\n    };\n    if (groupBy) {\n      return {\n        [groupBy]: locale === null || locale === void 0 ? void 0 : locale.newItem,\n        ...option\n      };\n    }\n    return option;\n  };\n  const handleChange = (0, _hooks.useEventCallback)((value, event) => {\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleRemoveItemByTag = (0, _hooks.useEventCallback)((tag, event) => {\n    event.stopPropagation();\n    const val = cloneValue();\n    (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, tag));\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove === null || onTagRemove === void 0 || onTagRemove(tag, event);\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((value, item, event) => {\n    onSelect === null || onSelect === void 0 || onSelect(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 || onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  });\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  const handleSelectItem = (0, _hooks.useEventCallback)((value, item, event) => {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  });\n\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  const handleCheckTag = (0, _hooks.useEventCallback)((nextItemValue, item, event, checked) => {\n    const val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, nextItemValue));\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focus();\n  });\n  const handleTagKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    const val = cloneValue();\n    let newItemValue = focusItemValue || '';\n\n    // In TagInput\n    if (multi && disabledOptions) {\n      newItemValue = searchKeyword;\n    }\n    if (!newItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(item => item === newItemValue)) {\n      return;\n    }\n    if (!val.some(v => (0, _utils3.shallowEqual)(v, newItemValue))) {\n      val.push(newItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, newItemValue));\n    }\n    let focusItem = data.find(item => (0, _utils3.shallowEqual)(item === null || item === void 0 ? void 0 : item[valueKey], newItemValue));\n    if (!focusItem) {\n      focusItem = createOption(newItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  });\n  const handleMenuItemKeyPress = (0, _hooks.useEventCallback)(event => {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(item => item === focusItemValue)) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    let focusItem = data.find(item => (0, _utils3.shallowEqual)(item[valueKey], focusItemValue));\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  const removeLastItem = (0, _hooks.useEventCallback)(event => {\n    const target = event === null || event === void 0 ? void 0 : event.target;\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focus();\n      return;\n    }\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n    const val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled) {\n      return;\n    }\n\n    // When there is a value in the search box and the user presses the delete key on the keyboard,\n    // do not trigger clearing\n    if (inputRef.current === event.target && searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean === null || onClean === void 0 || onClean(event);\n  });\n  const events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  const handleKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When typing a space, create a tag.\n    if ((0, _utils3.isOneOf)('Space', trigger) && event.key === _constants.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils3.isOneOf)('Comma', trigger) && event.key === _constants.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils3.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    trigger: triggerRef,\n    target,\n    overlay,\n    loading,\n    ...events,\n    ...rest\n  });\n  const handleExited = (0, _hooks.useEventCallback)(() => {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n  });\n  const handleFocus = (0, _hooks.useEventCallback)(event => {\n    if (!readOnly) {\n      var _triggerRef$current3;\n      setOpen(true);\n      (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.open();\n    }\n    onFocus === null || onFocus === void 0 || onFocus(event);\n  });\n  const handleEnter = (0, _hooks.useEventCallback)(() => {\n    focus();\n    setOpen(true);\n  });\n  const handleExit = (0, _hooks.useEventCallback)(() => {\n    blur();\n    setOpen(false);\n  });\n  const renderListItem = (label, item) => {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    const newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 510,\n        columnNumber: 7\n      }\n    }, (0, _utils3.tplTransform)((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;\n    return renderOption ? renderOption(newLabel, item) : newLabel;\n  };\n  const checkValue = () => {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    const dataItem = getDataItem(value);\n    let itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode\n    };\n  };\n  const renderMultiValue = () => {\n    if (!multi) {\n      return null;\n    }\n    const {\n      closable = true,\n      onClose,\n      ...tagRest\n    } = tagProps;\n    const tags = value || [];\n    const items = [];\n    const tagElements = tags.map(tag => {\n      const {\n        isValid,\n        itemNode,\n        activeItem\n      } = getDataItem(tag);\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({\n        role: \"option\"\n      }, tagRest, {\n        key: tag,\n        size: (0, _utils2.convertSize)(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils3.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 551,\n          columnNumber: 11\n        }\n      }), itemNode);\n    }).filter(item => item !== null);\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className,\n      left,\n      top\n    } = positionProps;\n    const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    const classes = merge(className, popupClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    const mergedPopupStyle = (0, _utils3.mergeStyles)((0, _Position.getPositionStyle)(left, top), popupStyle);\n    let items = (0, _utils.filterNodesOfTree)(data, checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(item => item[valueKey] === searchKeyword))) {\n      items = [...items, createOption(searchKeyword)];\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _utils3.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n        ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 598,\n          columnNumber: 14\n        }\n      });\n    }\n    const listbox = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      listItemClassPrefix: multi ? undefined : `${menuClassPrefix}-item`,\n      listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,\n      listItemProps: {\n        renderCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: listboxMaxHeight,\n      data: items,\n      query: searchKeyword,\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem,\n      renderOptionGroup: renderOptionGroup,\n      renderOption: renderListItem,\n      virtualized: virtualized,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 602,\n        columnNumber: 7\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix`none`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 624,\n        columnNumber: 7\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: mergedPopupStyle,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 628,\n        columnNumber: 7\n      }\n    }, renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  const {\n    isValid,\n    itemNode\n  } = checkValue();\n  const tagElements = renderMultiValue();\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n  const hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  const hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  const hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n  const [pickerClasses, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    classPrefix,\n    appearance,\n    hasValue,\n    name: 'input',\n    cleanable\n  });\n  const classes = merge(pickerClasses, {\n    [prefix`tag`]: multi,\n    [prefix(`${multi ? 'tag' : 'input'}-${size}`)]: size,\n    [prefix`focused`]: open,\n    [prefix`disabled-options`]: disabledOptions\n  });\n  const searching = !!searchKeyword && open;\n  const editable = searchable && !disabled && !loading;\n  if (plaintext) {\n    const plaintextProps = {};\n\n    // When multiple selection, the tag is displayed in a stack layout.\n    if (multi && hasValue) {\n      plaintextProps.as = _Stack.default;\n      plaintextProps.spacing = 6;\n      plaintextProps.wrap = true;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: target\n    }, plaintextProps, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 684,\n        columnNumber: 7\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n  const placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    multiple: multi,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: triggerRef,\n    trigger: \"active\",\n    onEnter: (0, _utils3.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils3.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    placement: placement,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 693,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    className: classes,\n    style: style,\n    onClick: focus,\n    onKeyDown: onPickerKeyDown,\n    ref: root\n  }, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 706,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, {\n    loading: loading,\n    label: label,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\n    caretAs: caretAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    caret: !disabledOptions,\n    size: size,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 715,\n      columnNumber: 9\n    }\n  }, searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: multi,\n    inputRef: inputRef,\n    inputValue: open ? searchKeyword : '',\n    inputProps: inputProps,\n    tags: tagElements,\n    editable: editable,\n    readOnly: readOnly,\n    disabled: disabled,\n    multiple: multi,\n    onBlur: onBlur,\n    onFocus: handleFocus,\n    onChange: handleSearch,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 738,\n      columnNumber: 9\n    }\n  })));\n});\nInputPicker.displayName = 'InputPicker';\nvar _default = exports[\"default\"] = InputPicker;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _clone = _interopRequireDefault(__webpack_require__(/*! lodash/clone */ \"./node_modules/lodash/clone.js\"));\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _Tag = _interopRequireDefault(__webpack_require__(/*! ../Tag */ \"./src/Tag/index.tsx\"));\nvar _TextBox = _interopRequireDefault(__webpack_require__(/*! ./TextBox */ \"./src/InputPicker/TextBox.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _useInput = _interopRequireDefault(__webpack_require__(/*! ./hooks/useInput */ \"./src/InputPicker/hooks/useInput.ts\"));\nvar _useData = _interopRequireDefault(__webpack_require__(/*! ./hooks/useData */ \"./src/InputPicker/hooks/useData.ts\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _InputPickerContext = __webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/InputPicker/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Position = __webpack_require__(/*! ../internals/Overlay/Position */ \"./src/internals/Overlay/Position.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/InputPicker/InputPicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Single item selector with text box input.\n *\n * @see https://rsuitejs.com/components/input-picker\n */\nconst InputPicker = (0, _utils3.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('InputPicker', props);\n  const {\n    as,\n    appearance = 'default',\n    block,\n    cleanable = true,\n    cacheData = [],\n    className,\n    classPrefix = 'picker',\n    caretAs,\n    data: controlledData = [],\n    disabled,\n    readOnly,\n    plaintext,\n    defaultValue,\n    defaultOpen = false,\n    disabledItemValues = [],\n    locale,\n    toggleAs,\n    style,\n    size = 'md',\n    searchable = true,\n    open: controlledOpen,\n    placeholder,\n    placement = 'bottomStart',\n    groupBy,\n    popupClassName,\n    popupStyle,\n    popupAutoWidth = true,\n    listboxMaxHeight = 320,\n    creatable,\n    shouldDisplayCreateOption,\n    value: valueProp,\n    valueKey = 'value',\n    virtualized,\n    labelKey = 'label',\n    listProps,\n    id,\n    tabIndex,\n    loading,\n    label,\n    sort,\n    renderListbox,\n    renderExtraFooter,\n    renderValue,\n    renderOption,\n    renderOptionGroup,\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    onChange,\n    onClean,\n    onCreate,\n    onSearch,\n    onSelect,\n    onBlur,\n    onFocus,\n    searchBy,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    multi,\n    tagProps,\n    trigger,\n    disabledOptions,\n    onTagRemove,\n    renderCheckbox\n  } = (0, _InputPickerContext.useTagContext)();\n  if (groupBy === valueKey || groupBy === labelKey) {\n    throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');\n  }\n  const {\n    trigger: triggerRef,\n    root,\n    target,\n    overlay,\n    list\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const [open, setOpen] = (0, _hooks.useControlled)(controlledOpen, defaultOpen);\n  const {\n    inputRef,\n    inputProps,\n    focus,\n    blur\n  } = (0, _useInput.default)({\n    multi,\n    triggerRef\n  });\n  const handleDataChange = data => {\n    var _data$;\n    setFocusItemValue(data === null || data === void 0 || (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$[valueKey]);\n  };\n  const {\n    data,\n    dataWithCache,\n    newData,\n    setNewData\n  } = (0, _useData.default)({\n    controlledData,\n    cacheData,\n    onChange: handleDataChange\n  });\n  const [value, setValue, isControlled] = (0, _hooks.useControlled)(valueProp, multi ? defaultValue || [] : defaultValue);\n  const cloneValue = () => multi ? (0, _clone.default)(value) || [] : value;\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    var _triggerRef$current, _target$current, _target$current$focus;\n    triggerRef === null || triggerRef === void 0 || (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.close();\n\n    // The focus is on the trigger button after closing\n    (_target$current = target.current) === null || _target$current === void 0 || (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 || _target$current$focus.call(_target$current);\n  });\n  const focusItemValueOptions = {\n    data: dataWithCache,\n    valueKey,\n    target: () => overlay.current\n  };\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown\n  } = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, focusItemValueOptions);\n  const onSearchCallback = (0, _hooks.useEventCallback)((searchKeyword, filteredData, event) => {\n    if (!disabledOptions) {\n      var _filteredData$;\n      // The first option after filtering is the focus.\n      let firstItemValue = filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey];\n\n      // If there is no value in the option and new options are supported, the search keyword is the first option\n      if (!firstItemValue && creatable) {\n        firstItemValue = searchKeyword;\n      }\n      setFocusItemValue(firstItemValue);\n    }\n    onSearch === null || onSearch === void 0 || onSearch(searchKeyword, event);\n  });\n  const searchOptions = {\n    labelKey,\n    searchBy,\n    callback: onSearchCallback\n  };\n\n  // Use search keywords to filter options.\n  const {\n    searchKeyword,\n    resetSearch,\n    checkShouldDisplay,\n    handleSearch\n  } = (0, _Picker.useSearch)(data, searchOptions);\n\n  // Update the position of the menu when the search keyword and value change\n  (0, _react.useEffect)(() => {\n    var _triggerRef$current2, _triggerRef$current2$;\n    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || (_triggerRef$current2$ = _triggerRef$current2.updatePosition) === null || _triggerRef$current2$ === void 0 || _triggerRef$current2$.call(_triggerRef$current2);\n  }, [searchKeyword, value]);\n  const getDataItem = value => {\n    // Find active `MenuItem` by `value`\n    const activeItem = dataWithCache.find(item => (0, _utils3.shallowEqual)(item[valueKey], value));\n    let itemNode = placeholder;\n    if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n      itemNode = activeItem === null || activeItem === void 0 ? void 0 : activeItem[labelKey];\n    }\n    return {\n      isValid: !!activeItem,\n      activeItem,\n      itemNode\n    };\n  };\n\n  /**\n   * Convert the string of the newly created option into an object.\n   */\n  const createOption = value => {\n    const option = {\n      create: true,\n      [valueKey]: value,\n      [labelKey]: value\n    };\n    if (groupBy) {\n      return {\n        [groupBy]: locale === null || locale === void 0 ? void 0 : locale.newItem,\n        ...option\n      };\n    }\n    return option;\n  };\n  const handleChange = (0, _hooks.useEventCallback)((value, event) => {\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleRemoveItemByTag = (0, _hooks.useEventCallback)((tag, event) => {\n    event.stopPropagation();\n    const val = cloneValue();\n    (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, tag));\n    setValue(val);\n    handleChange(val, event);\n    onTagRemove === null || onTagRemove === void 0 || onTagRemove(tag, event);\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((value, item, event) => {\n    onSelect === null || onSelect === void 0 || onSelect(value, item, event);\n    if (creatable && item.create) {\n      delete item.create;\n      onCreate === null || onCreate === void 0 || onCreate(value, item, event);\n      setNewData(newData.concat(item));\n    }\n  });\n\n  /**\n   * Callback triggered by single selection\n   * @param value\n   * @param item\n   * @param event\n   */\n  const handleSelectItem = (0, _hooks.useEventCallback)((value, item, event) => {\n    setValue(value);\n    setFocusItemValue(value);\n    resetSearch();\n    handleSelect(value, item, event);\n    handleChange(value, event);\n    handleClose();\n  });\n\n  /**\n   * Callback triggered by multiple selection\n   * @param nextItemValue\n   * @param item\n   * @param event\n   * @param checked\n   */\n  const handleCheckTag = (0, _hooks.useEventCallback)((nextItemValue, item, event, checked) => {\n    const val = cloneValue();\n    if (checked) {\n      val.push(nextItemValue);\n    } else {\n      (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, nextItemValue));\n    }\n    setValue(val);\n    resetSearch();\n    setFocusItemValue(nextItemValue);\n    handleSelect(val, item, event);\n    handleChange(val, event);\n    focus();\n  });\n  const handleTagKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When composing, ignore the keypress event.\n    if (event.nativeEvent.isComposing) {\n      return;\n    }\n    const val = cloneValue();\n    let newItemValue = focusItemValue || '';\n\n    // In TagInput\n    if (multi && disabledOptions) {\n      newItemValue = searchKeyword;\n    }\n    if (!newItemValue || !data) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(item => item === newItemValue)) {\n      return;\n    }\n    if (!val.some(v => (0, _utils3.shallowEqual)(v, newItemValue))) {\n      val.push(newItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, itemVal => (0, _utils3.shallowEqual)(itemVal, newItemValue));\n    }\n    let focusItem = data.find(item => (0, _utils3.shallowEqual)(item === null || item === void 0 ? void 0 : item[valueKey], newItemValue));\n    if (!focusItem) {\n      focusItem = createOption(newItemValue);\n    }\n    setValue(val);\n    resetSearch();\n    handleSelect(val, focusItem, event);\n    handleChange(val, event);\n  });\n  const handleMenuItemKeyPress = (0, _hooks.useEventCallback)(event => {\n    if (!focusItemValue || !controlledData) {\n      return;\n    }\n\n    // If the value is disabled in this option, it is returned.\n    if (disabledItemValues !== null && disabledItemValues !== void 0 && disabledItemValues.some(item => item === focusItemValue)) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    let focusItem = data.find(item => (0, _utils3.shallowEqual)(item[valueKey], focusItemValue));\n\n    // FIXME Bad state flow\n    if (!focusItem && focusItemValue === searchKeyword) {\n      focusItem = createOption(searchKeyword);\n    }\n    setValue(focusItemValue);\n    resetSearch();\n    if (focusItem) {\n      handleSelect(focusItemValue, focusItem, event);\n    }\n    handleChange(focusItemValue, event);\n    handleClose();\n  });\n\n  /**\n   * Remove the last item, after pressing the back key on the keyboard.\n   * @param event\n   */\n  const removeLastItem = (0, _hooks.useEventCallback)(event => {\n    const target = event === null || event === void 0 ? void 0 : event.target;\n    if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {\n      focus();\n      return;\n    }\n    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'INPUT' && target !== null && target !== void 0 && target.value) {\n      return;\n    }\n    const val = cloneValue();\n    val.pop();\n    setValue(val);\n    handleChange(val, event);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled) {\n      return;\n    }\n\n    // When there is a value in the search box and the user presses the delete key on the keyboard,\n    // do not trigger clearing\n    if (inputRef.current === event.target && searchKeyword !== '') {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(null);\n    resetSearch();\n    if (multi) {\n      handleChange([], event);\n    } else {\n      handleChange(null, event);\n    }\n    onClean === null || onClean === void 0 || onClean(event);\n  });\n  const events = {\n    onMenuPressBackspace: multi ? removeLastItem : handleClean,\n    onMenuKeyDown: onKeyDown,\n    onMenuPressEnter: undefined,\n    onKeyDown: undefined\n  };\n  const handleKeyPress = (0, _hooks.useEventCallback)(event => {\n    // When typing a space, create a tag.\n    if ((0, _utils3.isOneOf)('Space', trigger) && event.key === _constants.KEY_VALUES.SPACE) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n\n    // When typing a comma, create a tag.\n    if ((0, _utils3.isOneOf)('Comma', trigger) && event.key === _constants.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils3.isOneOf)('Enter', trigger)) {\n      events.onMenuPressEnter = handleTagKeyPress;\n    }\n    if (creatable) {\n      events.onKeyDown = handleKeyPress;\n    }\n  } else {\n    events.onMenuPressEnter = handleMenuItemKeyPress;\n  }\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    trigger: triggerRef,\n    target,\n    overlay,\n    loading,\n    ...events,\n    ...rest\n  });\n  const handleExited = (0, _hooks.useEventCallback)(() => {\n    setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);\n    resetSearch();\n  });\n  const handleFocus = (0, _hooks.useEventCallback)(event => {\n    if (!readOnly) {\n      var _triggerRef$current3;\n      setOpen(true);\n      (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.open();\n    }\n    onFocus === null || onFocus === void 0 || onFocus(event);\n  });\n  const handleEnter = (0, _hooks.useEventCallback)(() => {\n    focus();\n    setOpen(true);\n  });\n  const handleExit = (0, _hooks.useEventCallback)(() => {\n    blur();\n    setOpen(false);\n  });\n  const renderListItem = (label, item) => {\n    // 'Create option \"{0}\"' =>  Create option \"xxxxx\"\n    const newLabel = item.create ? /*#__PURE__*/_react.default.createElement(\"span\", {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 508,\n        columnNumber: 7\n      }\n    }, (0, _utils3.tplTransform)((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;\n    return renderOption ? renderOption(newLabel, item) : newLabel;\n  };\n  const checkValue = () => {\n    if (multi) {\n      return {\n        isValid: false,\n        itemNode: null\n      };\n    }\n    const dataItem = getDataItem(value);\n    let itemNode = dataItem.itemNode;\n    if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n      itemNode = renderValue(value, dataItem.activeItem, itemNode);\n    }\n    return {\n      isValid: dataItem.isValid,\n      itemNode\n    };\n  };\n  const renderMultiValue = () => {\n    if (!multi) {\n      return null;\n    }\n    const {\n      closable = true,\n      onClose,\n      ...tagRest\n    } = tagProps;\n    const tags = value || [];\n    const items = [];\n    const tagElements = tags.map(tag => {\n      const {\n        isValid,\n        itemNode,\n        activeItem\n      } = getDataItem(tag);\n      items.push(activeItem);\n      if (!isValid) {\n        return null;\n      }\n      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({\n        role: \"option\"\n      }, tagRest, {\n        key: tag,\n        size: (0, _utils2.convertSize)(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils3.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 549,\n          columnNumber: 11\n        }\n      }), itemNode);\n    }).filter(item => item !== null);\n    if ((tags.length > 0 || isControlled) && (0, _isFunction.default)(renderValue)) {\n      return renderValue(value, items, tagElements);\n    }\n    return tagElements;\n  };\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className,\n      left,\n      top\n    } = positionProps;\n    const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    const classes = merge(className, popupClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    const mergedPopupStyle = (0, _utils3.mergeStyles)((0, _Position.getPositionStyle)(left, top), popupStyle);\n    let items = (0, _utils.filterNodesOfTree)(data, checkShouldDisplay);\n    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(item => item[valueKey] === searchKeyword))) {\n      items = [...items, createOption(searchKeyword)];\n    }\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _utils3.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    if (disabledOptions) {\n      return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n        ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 596,\n          columnNumber: 14\n        }\n      });\n    }\n    const listbox = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      classPrefix: menuClassPrefix,\n      listItemClassPrefix: multi ? undefined : `${menuClassPrefix}-item`,\n      listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,\n      listItemProps: {\n        renderCheckbox\n      },\n      activeItemValues: multi ? value : [value],\n      focusItemValue: focusItemValue,\n      maxHeight: listboxMaxHeight,\n      data: items,\n      query: searchKeyword,\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem,\n      renderOptionGroup: renderOptionGroup,\n      renderOption: renderListItem,\n      virtualized: virtualized,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 600,\n        columnNumber: 7\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix`none`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 622,\n        columnNumber: 7\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: mergedPopupStyle,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 626,\n        columnNumber: 7\n      }\n    }, renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  const {\n    isValid,\n    itemNode\n  } = checkValue();\n  const tagElements = renderMultiValue();\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   * 3.If renderValue returns null or undefined, hasValue is false.\n   */\n  const hasSingleValue = !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(itemNode);\n  const hasMultiValue = (0, _isArray.default)(value) && value.length > 0 && (0, _isFunction.default)(renderValue) && !(0, _isNil.default)(tagElements);\n  const hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;\n  const classes = merge(className, {\n    [prefix`focused`]: open\n  });\n  const searching = !!searchKeyword && open;\n  const editable = searchable && !disabled && !loading;\n  if (plaintext) {\n    const plaintextProps = {};\n\n    // When multiple selection, the tag is displayed in a stack layout.\n    if (multi && hasValue) {\n      plaintextProps.as = _Stack.default;\n      plaintextProps.spacing = 6;\n      plaintextProps.wrap = true;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({\n      localeKey: \"notSelected\",\n      ref: target\n    }, plaintextProps, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 671,\n        columnNumber: 7\n      }\n    }), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);\n  }\n  const placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    onEnter: (0, _utils3.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils3.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils3.createChainedFunction)(handleExited, onExited)\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({\n    id: id,\n    multiple: multi,\n    name: multi ? 'tag' : 'input',\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    as: as,\n    triggerProps: triggerProps,\n    ref: triggerRef,\n    trigger: \"active\",\n    speaker: renderPopup,\n    placement: placement,\n    rootRef: root,\n    style: style,\n    size: size,\n    classPrefix: classPrefix,\n    className: classes,\n    responsive: searchable === false,\n    onClick: focus,\n    onKeyDown: onPickerKeyDown,\n    \"data-disabled-options\": disabledOptions\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 687,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, {\n    loading: loading,\n    label: label,\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\n    caretAs: caretAs,\n    tabIndex: tabIndex,\n    onClean: handleClean,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: open,\n    disabled: disabled,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    caret: !disabledOptions,\n    size: size,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 711,\n      columnNumber: 7\n    }\n  }, searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: multi,\n    inputRef: inputRef,\n    inputValue: open ? searchKeyword : '',\n    inputProps: inputProps,\n    tags: tagElements,\n    editable: editable,\n    readOnly: readOnly,\n    disabled: disabled,\n    multiple: multi,\n    onBlur: onBlur,\n    onFocus: handleFocus,\n    onChange: handleSearch,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 734,\n      columnNumber: 7\n    }\n  }));\n});\nInputPicker.displayName = 'InputPicker';\nvar _default = exports[\"default\"] = InputPicker;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
 
 /***/ }),
 
@@ -3704,6 +3726,39 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/Link/ExternalLinkIcon.tsx":
+/*!***************************************!*\
+  !*** ./src/Link/ExternalLinkIcon.tsx ***!
+  \***************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Link/ExternalLinkIcon.tsx\";\nconst ExternalLinkIcon = props => /*#__PURE__*/_react.default.createElement(\"svg\", (0, _extends2.default)({\n  stroke: \"currentColor\",\n  fill: \"currentColor\",\n  strokeWidth: \"0\",\n  viewBox: \"0 0 24 24\",\n  height: \"1em\",\n  width: \"1em\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, props, {\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 4,\n    columnNumber: 3\n  }\n}), /*#__PURE__*/_react.default.createElement(\"path\", {\n  fill: \"none\",\n  d: \"M0 0h24v24H0V0z\",\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 14,\n    columnNumber: 5\n  }\n}), /*#__PURE__*/_react.default.createElement(\"path\", {\n  d: \"M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z\",\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 15,\n    columnNumber: 5\n  }\n}));\nvar _default = exports[\"default\"] = ExternalLinkIcon;\n\n//# sourceURL=webpack://rsuite/./src/Link/ExternalLinkIcon.tsx?");
+
+/***/ }),
+
+/***/ "./src/Link/Link.tsx":
+/*!***************************!*\
+  !*** ./src/Link/Link.tsx ***!
+  \***************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../internals/SafeAnchor */ \"./src/internals/SafeAnchor/index.tsx\"));\nvar _ExternalLinkIcon = _interopRequireDefault(__webpack_require__(/*! ./ExternalLinkIcon */ \"./src/Link/ExternalLinkIcon.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Link/Link.tsx\";\nconst Link = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Link', props);\n  const {\n    as,\n    anchorIcon,\n    classPrefix = 'link',\n    className,\n    children,\n    disabled,\n    underline,\n    showAnchorIcon,\n    external,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    prefix,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix());\n  const icon = anchorIcon || /*#__PURE__*/_react.default.createElement(_ExternalLinkIcon.default, {\n    className: prefix('icon'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 40,\n      columnNumber: 30\n    }\n  });\n  return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    role: \"link\",\n    className: classes,\n    disabled: disabled,\n    target: external ? '_blank' : undefined,\n    rel: external ? 'noopener noreferrer' : undefined,\n    \"data-underline\": underline,\n    \"data-disabled\": disabled\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43,\n      columnNumber: 5\n    }\n  }), children, showAnchorIcon && icon);\n});\nLink.displayName = 'Link';\nvar _default = exports[\"default\"] = Link;\n\n//# sourceURL=webpack://rsuite/./src/Link/Link.tsx?");
+
+/***/ }),
+
+/***/ "./src/Link/index.tsx":
+/*!****************************!*\
+  !*** ./src/Link/index.tsx ***!
+  \****************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _Link = _interopRequireDefault(__webpack_require__(/*! ./Link */ \"./src/Link/Link.tsx\"));\nexports.Link = _Link.default;\n// export types\n// export components\nvar _default = exports[\"default\"] = _Link.default;\n\n//# sourceURL=webpack://rsuite/./src/Link/index.tsx?");
+
+/***/ }),
+
 /***/ "./src/List/List.tsx":
 /*!***************************!*\
   !*** ./src/List/List.tsx ***!
@@ -3711,7 +3766,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _useSortHelper = _interopRequireDefault(__webpack_require__(/*! ./helper/useSortHelper */ \"./src/List/helper/useSortHelper.ts\"));\nvar _ListContext = _interopRequireDefault(__webpack_require__(/*! ./ListContext */ \"./src/List/ListContext.tsx\"));\nvar _ListItem = _interopRequireDefault(__webpack_require__(/*! ./ListItem */ \"./src/List/ListItem.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/List/List.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst Subcomponents = {\n  Item: _ListItem.default\n};\n\n/**\n * The `List` component is used to specify the layout of the list.\n * @see https://rsuitejs.com/components/list\n */\nconst List = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('List', props);\n  const {\n    as,\n    autoScroll = true,\n    bordered,\n    classPrefix = 'list',\n    className,\n    children,\n    divider = true,\n    hover,\n    size = 'md',\n    sortable,\n    pressDelay = 0,\n    transitionDuration = 300,\n    onSort,\n    onSortEnd,\n    onSortMove,\n    onSortStart,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    containerRef,\n    register,\n    sorting,\n    handleEnd,\n    handleStart\n  } = (0, _useSortHelper.default)({\n    autoScroll,\n    onSort,\n    onSortEnd,\n    onSortMove,\n    onSortStart,\n    pressDelay,\n    transitionDuration\n  });\n  const classes = merge(className, withPrefix({\n    bordered,\n    sortable,\n    sorting,\n    hover,\n    divider\n  }));\n  const contextValue = (0, _react.useMemo)(() => ({\n    bordered,\n    size,\n    register\n  }), [bordered, register, size]);\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    role: \"list\",\n    ref: (0, _utils.mergeRefs)(containerRef, ref),\n    className: classes,\n    onMouseDown: sortable ? handleStart : undefined,\n    onMouseUp: sortable ? handleEnd : undefined\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 87,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {\n    value: contextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 96,\n      columnNumber: 7\n    }\n  }, children));\n}, Subcomponents);\nList.displayName = 'List';\nvar _default = exports[\"default\"] = List;\n\n//# sourceURL=webpack://rsuite/./src/List/List.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _useSortHelper = _interopRequireDefault(__webpack_require__(/*! ./helper/useSortHelper */ \"./src/List/helper/useSortHelper.ts\"));\nvar _ListContext = _interopRequireDefault(__webpack_require__(/*! ./ListContext */ \"./src/List/ListContext.tsx\"));\nvar _ListItem = _interopRequireDefault(__webpack_require__(/*! ./ListItem */ \"./src/List/ListItem.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/List/List.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst Subcomponents = {\n  Item: _ListItem.default\n};\n\n/**\n * The `List` component is used to specify the layout of the list.\n * @see https://rsuitejs.com/components/list\n */\nconst List = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('List', props);\n  const {\n    as,\n    autoScroll = true,\n    bordered,\n    classPrefix = 'list',\n    className,\n    children,\n    divider = true,\n    hover,\n    size = 'md',\n    sortable,\n    pressDelay = 0,\n    transitionDuration = 300,\n    onSort,\n    onSortEnd,\n    onSortMove,\n    onSortStart,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    containerRef,\n    register,\n    sorting,\n    handleEnd,\n    handleStart,\n    handleTouchStart,\n    handleTouchEnd\n  } = (0, _useSortHelper.default)({\n    autoScroll,\n    onSort,\n    onSortEnd,\n    onSortMove,\n    onSortStart,\n    pressDelay,\n    transitionDuration\n  });\n  const classes = merge(className, withPrefix({\n    bordered,\n    sortable,\n    sorting,\n    hover,\n    divider\n  }));\n  const contextValue = (0, _react.useMemo)(() => ({\n    bordered,\n    size,\n    register\n  }), [bordered, register, size]);\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    role: \"list\",\n    ref: (0, _utils.mergeRefs)(containerRef, ref),\n    className: classes,\n    onMouseDown: sortable ? handleStart : undefined,\n    onMouseUp: sortable ? handleEnd : undefined,\n    onTouchStart: sortable ? handleTouchStart : undefined,\n    onTouchEnd: sortable ? handleTouchEnd : undefined\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 95,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {\n    value: contextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 106,\n      columnNumber: 7\n    }\n  }, children));\n}, Subcomponents);\nList.displayName = 'List';\nvar _default = exports[\"default\"] = List;\n\n//# sourceURL=webpack://rsuite/./src/List/List.tsx?");
 
 /***/ }),
 
@@ -3766,7 +3821,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _AutoScroller = _interopRequireDefault(__webpack_require__(/*! ./AutoScroller */ \"./src/List/helper/AutoScroller.ts\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/List/helper/utils.ts\");\nvar _hooks = __webpack_require__(/*! ../../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _useManager = _interopRequireDefault(__webpack_require__(/*! ./useManager */ \"./src/List/helper/useManager.ts\"));\nconst helperElementClass = 'rs-list-item-helper';\nconst holderElementClass = 'rs-list-item-holder';\nconst useSortHelper = config => {\n  const {\n    autoScroll,\n    pressDelay,\n    transitionDuration,\n    onSort,\n    onSortEnd,\n    onSortMove,\n    onSortStart\n  } = config;\n  const [sorting, setSorting] = (0, _react.useState)(false);\n  const containerRef = (0, _react.useRef)(null);\n  const pressTimer = (0, _react.useRef)(null);\n  const {\n    listItemRegister,\n    getManagedItem,\n    getOrderedItems\n  } = (0, _useManager.default)();\n  const isMounted = (0, _hooks.useIsMounted)();\n\n  /**\n   * start dragging\n   * */\n  const handlePress = (0, _react.useCallback)((mouseDownEvent, _targetNode, curManagedItem) => {\n    var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;\n    if (!isMounted()) return;\n    // data\n    const containerElement = containerRef.current;\n    const activeNode = curManagedItem.node;\n    const activeNodeOldIndex = (_curManagedItem$info$ = curManagedItem.info.index) !== null && _curManagedItem$info$ !== void 0 ? _curManagedItem$info$ : 0;\n    let activeNodeNextIndex = (_curManagedItem$info$2 = curManagedItem.info.index) !== null && _curManagedItem$info$2 !== void 0 ? _curManagedItem$info$2 : 0;\n    let activeNodeHolderTranslate = {\n      x: 0,\n      y: 0\n    };\n    let animatedNodesOffset = []; // all list item offset\n\n    // init scroller\n    const scrollContainer = (0, _utils.getScrollingParent)(containerElement) || containerElement;\n    const initScroll = {\n      x: scrollContainer.scrollLeft,\n      y: scrollContainer.scrollTop\n    };\n    const autoScroller = new _AutoScroller.default(scrollContainer, offset => {\n      activeNodeHolderTranslate.x += offset.left;\n      activeNodeHolderTranslate.y += offset.top;\n    });\n    const activeNodeBoundingClientRect = activeNode.getBoundingClientRect();\n    const activeNodeOffsetEdge = (0, _utils.getEdgeOffset)(activeNode, containerElement);\n    const activeNodeStyle = getComputedStyle(activeNode);\n    let activeNodeHelper = activeNode.cloneNode(true);\n    (_activeNodeHelper = activeNodeHelper) === null || _activeNodeHelper === void 0 || _activeNodeHelper.classList.add(helperElementClass);\n    (0, _utils.setInlineStyles)(activeNodeHelper, {\n      position: 'fixed',\n      width: `${activeNodeBoundingClientRect.width}px`,\n      height: `${activeNodeBoundingClientRect.height}px`,\n      left: `${activeNodeBoundingClientRect.left - parseFloat(activeNodeStyle.marginLeft)}px`,\n      top: `${activeNodeBoundingClientRect.top - parseFloat(activeNodeStyle.marginTop)}px`\n    });\n    activeNode.classList.add(holderElementClass);\n    document.body.appendChild(activeNodeHelper);\n    const getContainerScrollDelta = () => ({\n      left: scrollContainer.scrollLeft - initScroll.x,\n      top: scrollContainer.scrollTop - initScroll.y\n    });\n    const getHolderTranslate = () => animatedNodesOffset.reduce((acc, item) => ({\n      x: acc.x + item.x,\n      y: acc.y + item.y\n    }), {\n      x: 0,\n      y: 0\n    });\n    const sortMouseMoveListener = (0, _on.default)(window, 'mousemove', mouseOverEvent => {\n      // Update helper position\n      const offset = {\n        x: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageX) || 0,\n        y: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageY) || 0\n      };\n      const containerScrollDelta = getContainerScrollDelta();\n      const containerBoundingRect = scrollContainer.getBoundingClientRect();\n      activeNodeHolderTranslate = {\n        x: offset.x - mouseDownEvent.pageX,\n        y: offset.y - mouseDownEvent.pageY\n      };\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, activeNodeHolderTranslate);\n      }\n\n      // animate\n      activeNodeNextIndex = -1;\n      const listItemManagerRefs = getOrderedItems(curManagedItem.info.collection);\n      const aTop = activeNodeOffsetEdge.top || 0;\n      const cTop = containerScrollDelta.top || 0;\n      const sortingOffsetY = aTop + activeNodeHolderTranslate.y + cTop;\n      for (let i = 0, len = listItemManagerRefs.length; i < len; i++) {\n        var _listItemManagerRefs$;\n        const currentNode = listItemManagerRefs[i].node;\n        const currentNodeIndex = (_listItemManagerRefs$ = listItemManagerRefs[i].info.index) !== null && _listItemManagerRefs$ !== void 0 ? _listItemManagerRefs$ : 0;\n        const offsetY = activeNodeBoundingClientRect.height > currentNode.offsetHeight ? currentNode.offsetHeight / 2 : activeNodeBoundingClientRect.height / 2;\n        const translate = {\n          x: 0,\n          y: 0\n        };\n\n        // If we haven't cached the node's offsetTop / offsetLeft value\n        const curEdgeOffset = listItemManagerRefs[i].edgeOffset || (0, _utils.getEdgeOffset)(currentNode, containerElement);\n        listItemManagerRefs[i].edgeOffset = curEdgeOffset;\n\n        // Get a reference to the next node\n        const prvNode = i > 0 && listItemManagerRefs[i - 1];\n        const nextNode = i < len - 1 && listItemManagerRefs[i + 1];\n\n        // Also cache the node's edge offset if needed.\n        if (prvNode && !prvNode.edgeOffset) {\n          prvNode.edgeOffset = (0, _utils.getEdgeOffset)(prvNode.node, containerElement);\n        }\n        if (nextNode && !nextNode.edgeOffset) {\n          nextNode.edgeOffset = (0, _utils.getEdgeOffset)(nextNode.node, containerElement);\n        }\n\n        // If the node is the one we're currently animating, skip it\n        if (currentNodeIndex === activeNodeOldIndex) {\n          continue;\n        }\n        const curEdgeOffsetTop = curEdgeOffset.top || 0;\n        if (prvNode && currentNodeIndex > activeNodeOldIndex && sortingOffsetY + offsetY >= curEdgeOffsetTop) {\n          var _prvNode$edgeOffset;\n          const yOffset = (((_prvNode$edgeOffset = prvNode.edgeOffset) === null || _prvNode$edgeOffset === void 0 ? void 0 : _prvNode$edgeOffset.top) || 0) - curEdgeOffsetTop;\n          translate.y = yOffset;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -yOffset\n          };\n          activeNodeNextIndex = currentNodeIndex;\n        } else if (nextNode && currentNodeIndex < activeNodeOldIndex && sortingOffsetY <= curEdgeOffsetTop + offsetY) {\n          var _nextNode$edgeOffset;\n          const yOffset = (((_nextNode$edgeOffset = nextNode.edgeOffset) === null || _nextNode$edgeOffset === void 0 ? void 0 : _nextNode$edgeOffset.top) || 0) - curEdgeOffsetTop;\n          translate.y = yOffset;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -yOffset\n          };\n          if (activeNodeNextIndex === -1) {\n            activeNodeNextIndex = currentNodeIndex;\n          }\n        } else {\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: 0\n          };\n        }\n        (0, _utils.setTransitionDuration)(currentNode, transitionDuration);\n        (0, _utils.setTranslate3d)(currentNode, translate);\n\n        // translate holder\n        (0, _utils.setTranslate3d)(activeNode, getHolderTranslate());\n      }\n      if (activeNodeNextIndex === -1) {\n        activeNodeNextIndex = activeNodeOldIndex;\n      }\n\n      // auto scroll\n      if (autoScroll) {\n        autoScroller.update({\n          width: activeNodeBoundingClientRect.width,\n          height: activeNodeBoundingClientRect.height,\n          translate: activeNodeHolderTranslate,\n          maxTranslate: {\n            x: 0,\n            y: containerBoundingRect.top + containerBoundingRect.height - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          },\n          minTranslate: {\n            x: 0,\n            y: containerBoundingRect.top - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          }\n        });\n      }\n      onSortMove === null || onSortMove === void 0 || onSortMove({\n        collection: curManagedItem.info.collection,\n        node: activeNode,\n        oldIndex: activeNodeOldIndex,\n        newIndex: activeNodeNextIndex\n      }, mouseOverEvent);\n    }, {\n      passive: false\n    });\n    const sortMouseEndListener = (0, _on.default)(window, 'mouseup', event => {\n      // Remove the event listeners\n      sortMouseMoveListener.off();\n      sortMouseEndListener.off();\n      const holderTranslate = getHolderTranslate();\n      const containerScrollDelta = getContainerScrollDelta();\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, {\n          x: holderTranslate.x - (containerScrollDelta.left || 0),\n          y: holderTranslate.y - (containerScrollDelta.top || 0)\n        });\n        (0, _utils.setTransitionDuration)(activeNodeHelper, transitionDuration);\n      }\n\n      // wait for animation\n      setTimeout(() => {\n        var _activeNodeHelper2;\n        if (!isMounted()) return;\n        // Remove the helper from the DOM\n        (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 || (_activeNodeHelper2 = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2 === void 0 || _activeNodeHelper2.removeChild(activeNodeHelper);\n        activeNodeHelper = null;\n\n        // Remove redundant styles\n        activeNode.classList.remove(holderElementClass);\n        (0, _utils.setTranslate3d)(activeNode, null);\n        animatedNodesOffset = [];\n        for (const item of getOrderedItems(curManagedItem.info.collection)) {\n          // Clear the cached offsetTop / offsetLeft value\n          item.edgeOffset = null;\n\n          // Remove the transforms / transitions\n          const el = item.node;\n          (0, _utils.setTranslate3d)(el, null);\n          (0, _utils.setTransitionDuration)(el, null);\n        }\n\n        // Stop autoScroll\n        autoScroller.clear();\n\n        // Update manager state\n        setSorting(false);\n\n        // callbacks\n        const callbackPayload = {\n          collection: curManagedItem.info.collection,\n          node: curManagedItem.node,\n          newIndex: activeNodeNextIndex,\n          oldIndex: activeNodeOldIndex\n        };\n        onSortEnd === null || onSortEnd === void 0 || onSortEnd(callbackPayload, event);\n        onSort === null || onSort === void 0 || onSort(callbackPayload, event);\n      }, transitionDuration);\n    }, {\n      passive: false\n    });\n    setSorting(true);\n    // start callback\n    onSortStart === null || onSortStart === void 0 || onSortStart({\n      collection: curManagedItem.info.collection,\n      node: activeNode,\n      oldIndex: activeNodeOldIndex,\n      newIndex: activeNodeNextIndex\n    }, mouseDownEvent.nativeEvent);\n  }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);\n\n  /**\n   * Determine whether to start dragging\n   * */\n  const handleStart = (0, _react.useCallback)(mouseDownEvent => {\n    const triggeredNode = mouseDownEvent.target;\n    const targetNode = (0, _utils.closestNode)(triggeredNode, el => Boolean(getManagedItem(el)));\n    const curManagedItem = getManagedItem(targetNode);\n    if (\n    // is not secondary button pressed\n    mouseDownEvent.button !== 2 &&\n    // is list item\n    Boolean(curManagedItem) && !curManagedItem.info.disabled &&\n    // is not sorting\n    !sorting &&\n    // is valid node\n    targetNode instanceof HTMLElement &&\n    // excludes interactive elements\n    !targetNode.contains((0, _utils.closestNode)(triggeredNode, _utils.isContainInteractiveElement))) {\n      mouseDownEvent.preventDefault();\n      pressTimer.current = setTimeout(handlePress, pressDelay, mouseDownEvent, targetNode, curManagedItem);\n    }\n  }, [getManagedItem, handlePress, pressDelay, sorting]);\n\n  /**\n   * Clear timer after drag\n   * */\n  const handleEnd = (0, _react.useCallback)(() => clearTimeout(pressTimer.current), []);\n  return {\n    handleStart,\n    handleEnd,\n    containerRef,\n    sorting,\n    register: listItemRegister\n  };\n};\nvar _default = exports[\"default\"] = useSortHelper;\n\n//# sourceURL=webpack://rsuite/./src/List/helper/useSortHelper.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _AutoScroller = _interopRequireDefault(__webpack_require__(/*! ./AutoScroller */ \"./src/List/helper/AutoScroller.ts\"));\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/List/helper/utils.ts\");\nvar _hooks = __webpack_require__(/*! ../../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _useManager = _interopRequireDefault(__webpack_require__(/*! ./useManager */ \"./src/List/helper/useManager.ts\"));\nconst helperElementClass = 'rs-list-item-helper';\nconst holderElementClass = 'rs-list-item-holder';\nconst useSortHelper = config => {\n  const {\n    autoScroll,\n    pressDelay,\n    transitionDuration,\n    onSort,\n    onSortEnd,\n    onSortMove,\n    onSortStart\n  } = config;\n  const [sorting, setSorting] = (0, _react.useState)(false);\n  const containerRef = (0, _react.useRef)(null);\n  const pressTimer = (0, _react.useRef)(null);\n  const {\n    listItemRegister,\n    getManagedItem,\n    getOrderedItems\n  } = (0, _useManager.default)();\n  const isMounted = (0, _hooks.useIsMounted)();\n\n  /**\n   * start dragging\n   * */\n  const handlePress = (0, _react.useCallback)((event, _targetNode, curManagedItem) => {\n    var _curManagedItem$info$, _curManagedItem$info$2, _activeNodeHelper;\n    if (!isMounted()) return;\n    // data\n    const containerElement = containerRef.current;\n    const activeNode = curManagedItem.node;\n    const activeNodeOldIndex = (_curManagedItem$info$ = curManagedItem.info.index) !== null && _curManagedItem$info$ !== void 0 ? _curManagedItem$info$ : 0;\n    let activeNodeNextIndex = (_curManagedItem$info$2 = curManagedItem.info.index) !== null && _curManagedItem$info$2 !== void 0 ? _curManagedItem$info$2 : 0;\n    let activeNodeHolderTranslate = {\n      x: 0,\n      y: 0\n    };\n    let animatedNodesOffset = []; // all list item offset\n\n    // Get initial position from event\n    const isTouchEvent = 'touches' in event;\n    const initialPosition = {\n      pageX: isTouchEvent ? event.touches[0].pageX : event.pageX,\n      pageY: isTouchEvent ? event.touches[0].pageY : event.pageY\n    };\n\n    // init scroller\n    const scrollContainer = (0, _utils.getScrollingParent)(containerElement) || containerElement;\n    const initScroll = {\n      x: scrollContainer.scrollLeft,\n      y: scrollContainer.scrollTop\n    };\n    const autoScroller = new _AutoScroller.default(scrollContainer, offset => {\n      activeNodeHolderTranslate.x += offset.left;\n      activeNodeHolderTranslate.y += offset.top;\n    });\n    const activeNodeBoundingClientRect = activeNode.getBoundingClientRect();\n    const activeNodeOffsetEdge = (0, _utils.getEdgeOffset)(activeNode, containerElement);\n    const activeNodeStyle = getComputedStyle(activeNode);\n    let activeNodeHelper = activeNode.cloneNode(true);\n    (_activeNodeHelper = activeNodeHelper) === null || _activeNodeHelper === void 0 || _activeNodeHelper.classList.add(helperElementClass);\n    (0, _utils.setInlineStyles)(activeNodeHelper, {\n      position: 'fixed',\n      width: `${activeNodeBoundingClientRect.width}px`,\n      height: `${activeNodeBoundingClientRect.height}px`,\n      left: `${activeNodeBoundingClientRect.left - parseFloat(activeNodeStyle.marginLeft)}px`,\n      top: `${activeNodeBoundingClientRect.top - parseFloat(activeNodeStyle.marginTop)}px`\n    });\n    activeNode.classList.add(holderElementClass);\n    document.body.appendChild(activeNodeHelper);\n    const getContainerScrollDelta = () => ({\n      left: scrollContainer.scrollLeft - initScroll.x,\n      top: scrollContainer.scrollTop - initScroll.y\n    });\n    const getHolderTranslate = () => animatedNodesOffset.reduce((acc, item) => ({\n      x: acc.x + item.x,\n      y: acc.y + item.y\n    }), {\n      x: 0,\n      y: 0\n    });\n\n    // Common handler for both mouse and touch move events\n    const handleSortMove = moveEvent => {\n      // Prevent default to stop page scrolling during touch drag\n      if ('touches' in moveEvent) {\n        moveEvent.preventDefault();\n      }\n\n      // Get current position from event\n      const isTouchMoveEvent = 'touches' in moveEvent;\n      const currentPosition = {\n        pageX: isTouchMoveEvent ? moveEvent.touches[0].pageX : moveEvent.pageX,\n        pageY: isTouchMoveEvent ? moveEvent.touches[0].pageY : moveEvent.pageY\n      };\n\n      // Update helper position\n      const offset = {\n        x: currentPosition.pageX,\n        y: currentPosition.pageY\n      };\n      const containerScrollDelta = getContainerScrollDelta();\n      const containerBoundingRect = scrollContainer.getBoundingClientRect();\n      activeNodeHolderTranslate = {\n        x: offset.x - initialPosition.pageX,\n        y: offset.y - initialPosition.pageY\n      };\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, activeNodeHolderTranslate);\n      }\n\n      // animate\n      activeNodeNextIndex = -1;\n      const listItemManagerRefs = getOrderedItems(curManagedItem.info.collection);\n      const aTop = activeNodeOffsetEdge.top || 0;\n      const cTop = containerScrollDelta.top || 0;\n      const sortingOffsetY = aTop + activeNodeHolderTranslate.y + cTop;\n      for (let i = 0, len = listItemManagerRefs.length; i < len; i++) {\n        var _listItemManagerRefs$;\n        const currentNode = listItemManagerRefs[i].node;\n        const currentNodeIndex = (_listItemManagerRefs$ = listItemManagerRefs[i].info.index) !== null && _listItemManagerRefs$ !== void 0 ? _listItemManagerRefs$ : 0;\n        const offsetY = activeNodeBoundingClientRect.height > currentNode.offsetHeight ? currentNode.offsetHeight / 2 : activeNodeBoundingClientRect.height / 2;\n        const translate = {\n          x: 0,\n          y: 0\n        };\n\n        // If we haven't cached the node's offsetTop / offsetLeft value\n        const curEdgeOffset = listItemManagerRefs[i].edgeOffset || (0, _utils.getEdgeOffset)(currentNode, containerElement);\n        listItemManagerRefs[i].edgeOffset = curEdgeOffset;\n\n        // Get a reference to the next node\n        const prvNode = i > 0 && listItemManagerRefs[i - 1];\n        const nextNode = i < len - 1 && listItemManagerRefs[i + 1];\n\n        // Also cache the node's edge offset if needed.\n        if (prvNode && !prvNode.edgeOffset) {\n          prvNode.edgeOffset = (0, _utils.getEdgeOffset)(prvNode.node, containerElement);\n        }\n        if (nextNode && !nextNode.edgeOffset) {\n          nextNode.edgeOffset = (0, _utils.getEdgeOffset)(nextNode.node, containerElement);\n        }\n\n        // If the node is the one we're currently animating, skip it\n        if (currentNodeIndex === activeNodeOldIndex) {\n          continue;\n        }\n        const curEdgeOffsetTop = curEdgeOffset.top || 0;\n        if (prvNode && currentNodeIndex > activeNodeOldIndex && sortingOffsetY + offsetY >= curEdgeOffsetTop) {\n          var _prvNode$edgeOffset;\n          const yOffset = (((_prvNode$edgeOffset = prvNode.edgeOffset) === null || _prvNode$edgeOffset === void 0 ? void 0 : _prvNode$edgeOffset.top) || 0) - curEdgeOffsetTop;\n          translate.y = yOffset;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -yOffset\n          };\n          activeNodeNextIndex = currentNodeIndex;\n        } else if (nextNode && currentNodeIndex < activeNodeOldIndex && sortingOffsetY <= curEdgeOffsetTop + offsetY) {\n          var _nextNode$edgeOffset;\n          const yOffset = (((_nextNode$edgeOffset = nextNode.edgeOffset) === null || _nextNode$edgeOffset === void 0 ? void 0 : _nextNode$edgeOffset.top) || 0) - curEdgeOffsetTop;\n          translate.y = yOffset;\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: -yOffset\n          };\n          if (activeNodeNextIndex === -1) {\n            activeNodeNextIndex = currentNodeIndex;\n          }\n        } else {\n          animatedNodesOffset[currentNodeIndex] = {\n            x: 0,\n            y: 0\n          };\n        }\n        (0, _utils.setTransitionDuration)(currentNode, transitionDuration);\n        (0, _utils.setTranslate3d)(currentNode, translate);\n\n        // translate holder\n        (0, _utils.setTranslate3d)(activeNode, getHolderTranslate());\n      }\n      if (activeNodeNextIndex === -1) {\n        activeNodeNextIndex = activeNodeOldIndex;\n      }\n\n      // auto scroll\n      if (autoScroll) {\n        autoScroller.update({\n          width: activeNodeBoundingClientRect.width,\n          height: activeNodeBoundingClientRect.height,\n          translate: activeNodeHolderTranslate,\n          maxTranslate: {\n            x: 0,\n            y: containerBoundingRect.top + containerBoundingRect.height - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          },\n          minTranslate: {\n            x: 0,\n            y: containerBoundingRect.top - activeNodeBoundingClientRect.top - activeNodeBoundingClientRect.height / 2\n          }\n        });\n      }\n      onSortMove === null || onSortMove === void 0 || onSortMove({\n        collection: curManagedItem.info.collection,\n        node: activeNode,\n        oldIndex: activeNodeOldIndex,\n        newIndex: activeNodeNextIndex\n      }, moveEvent);\n    };\n\n    // Common handler for both mouse and touch end events\n    const handleSortEnd = endEvent => {\n      var _sortTouchMoveListene, _sortTouchEndListener;\n      // Remove the event listeners\n      sortMouseMoveListener.off();\n      sortMouseEndListener.off();\n      (_sortTouchMoveListene = sortTouchMoveListener) === null || _sortTouchMoveListene === void 0 || _sortTouchMoveListene.off();\n      (_sortTouchEndListener = sortTouchEndListener) === null || _sortTouchEndListener === void 0 || _sortTouchEndListener.off();\n\n      // Enable page scrolling again\n      if (document.body.style.overflow === 'hidden') {\n        document.body.style.overflow = '';\n      }\n      const holderTranslate = getHolderTranslate();\n      const containerScrollDelta = getContainerScrollDelta();\n      if (activeNodeHelper) {\n        (0, _utils.setTranslate3d)(activeNodeHelper, {\n          x: holderTranslate.x - (containerScrollDelta.left || 0),\n          y: holderTranslate.y - (containerScrollDelta.top || 0)\n        });\n        (0, _utils.setTransitionDuration)(activeNodeHelper, transitionDuration);\n      }\n\n      // wait for animation\n      setTimeout(() => {\n        var _activeNodeHelper2;\n        if (!isMounted()) return;\n        // Remove the helper from the DOM\n        (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 || (_activeNodeHelper2 = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2 === void 0 || _activeNodeHelper2.removeChild(activeNodeHelper);\n        activeNodeHelper = null;\n\n        // Remove redundant styles\n        activeNode.classList.remove(holderElementClass);\n        (0, _utils.setTranslate3d)(activeNode, null);\n        animatedNodesOffset = [];\n        for (const item of getOrderedItems(curManagedItem.info.collection)) {\n          // Clear the cached offsetTop / offsetLeft value\n          item.edgeOffset = null;\n\n          // Remove the transforms / transitions\n          const el = item.node;\n          (0, _utils.setTranslate3d)(el, null);\n          (0, _utils.setTransitionDuration)(el, null);\n        }\n\n        // Stop autoScroll\n        autoScroller.clear();\n\n        // Update manager state\n        setSorting(false);\n\n        // callbacks\n        const callbackPayload = {\n          collection: curManagedItem.info.collection,\n          node: curManagedItem.node,\n          newIndex: activeNodeNextIndex,\n          oldIndex: activeNodeOldIndex\n        };\n        onSortEnd === null || onSortEnd === void 0 || onSortEnd(callbackPayload, endEvent);\n        onSort === null || onSort === void 0 || onSort(callbackPayload, endEvent);\n      }, transitionDuration);\n    };\n\n    // Set up mouse event listeners\n    const sortMouseMoveListener = (0, _on.default)(window, 'mousemove', handleSortMove, {\n      passive: false\n    });\n    const sortMouseEndListener = (0, _on.default)(window, 'mouseup', handleSortEnd, {\n      passive: false\n    });\n\n    // Set up touch event listeners\n    let sortTouchMoveListener;\n    let sortTouchEndListener;\n    if (isTouchEvent) {\n      // Disable page scrolling during touch drag\n      document.body.style.overflow = 'hidden';\n      sortTouchMoveListener = (0, _on.default)(window, 'touchmove', handleSortMove, {\n        passive: false\n      } // Important: passive: false allows preventDefault() to work\n      );\n      sortTouchEndListener = (0, _on.default)(window, 'touchend', handleSortEnd, {\n        passive: false\n      });\n    }\n    setSorting(true);\n    // start callback\n    onSortStart === null || onSortStart === void 0 || onSortStart({\n      collection: curManagedItem.info.collection,\n      node: activeNode,\n      oldIndex: activeNodeOldIndex,\n      newIndex: activeNodeNextIndex\n    }, event);\n  }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);\n\n  /**\n   * Determine whether to start dragging\n   * */\n  const handleStart = (0, _react.useCallback)(mouseDownEvent => {\n    const triggeredNode = mouseDownEvent.target;\n    const targetNode = (0, _utils.closestNode)(triggeredNode, el => Boolean(getManagedItem(el)));\n    const curManagedItem = getManagedItem(targetNode);\n    if (\n    // is not secondary button pressed\n    mouseDownEvent.button !== 2 &&\n    // is list item\n    Boolean(curManagedItem) && !curManagedItem.info.disabled &&\n    // is not sorting\n    !sorting &&\n    // is valid node\n    targetNode instanceof HTMLElement &&\n    // excludes interactive elements\n    !targetNode.contains((0, _utils.closestNode)(triggeredNode, _utils.isContainInteractiveElement))) {\n      mouseDownEvent.preventDefault();\n      pressTimer.current = setTimeout(handlePress, pressDelay, mouseDownEvent, targetNode, curManagedItem);\n    }\n  }, [getManagedItem, handlePress, pressDelay, sorting]);\n\n  /**\n   * Handle touch start for mobile devices\n   */\n  const handleTouchStart = (0, _react.useCallback)(touchStartEvent => {\n    const triggeredNode = touchStartEvent.target;\n    const targetNode = (0, _utils.closestNode)(triggeredNode, el => Boolean(getManagedItem(el)));\n    const curManagedItem = getManagedItem(targetNode);\n    if (\n    // is list item\n    Boolean(curManagedItem) && !curManagedItem.info.disabled &&\n    // is not sorting\n    !sorting &&\n    // is valid node\n    targetNode instanceof HTMLElement &&\n    // excludes interactive elements\n    !targetNode.contains((0, _utils.closestNode)(triggeredNode, _utils.isContainInteractiveElement))) {\n      // Prevent scrolling while sorting\n      touchStartEvent.preventDefault();\n      pressTimer.current = setTimeout(handlePress, pressDelay, touchStartEvent, targetNode, curManagedItem);\n    }\n  }, [getManagedItem, handlePress, pressDelay, sorting]);\n\n  /**\n   * Clear timer after drag\n   * */\n  const handleEnd = (0, _react.useCallback)(() => {\n    clearTimeout(pressTimer.current);\n\n    // Ensure page scrolling is re-enabled\n    if (document.body.style.overflow === 'hidden') {\n      document.body.style.overflow = '';\n    }\n  }, []);\n\n  /**\n   * Clear timer after touch end\n   */\n  const handleTouchEnd = (0, _react.useCallback)(() => {\n    clearTimeout(pressTimer.current);\n\n    // Ensure page scrolling is re-enabled\n    if (document.body.style.overflow === 'hidden') {\n      document.body.style.overflow = '';\n    }\n  }, []);\n  return {\n    handleStart,\n    handleEnd,\n    handleTouchStart,\n    handleTouchEnd,\n    containerRef,\n    sorting,\n    register: listItemRegister\n  };\n};\nvar _default = exports[\"default\"] = useSortHelper;\n\n//# sourceURL=webpack://rsuite/./src/List/helper/useSortHelper.ts?");
 
 /***/ }),
 
@@ -3777,7 +3832,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.closestNode = closestNode;\nexports.getEdgeOffset = getEdgeOffset;\nexports.getScrollingParent = getScrollingParent;\nexports.isContainInteractiveElement = isContainInteractiveElement;\nexports.setInlineStyles = setInlineStyles;\nexports.setTransitionDuration = setTransitionDuration;\nexports.setTranslate3d = setTranslate3d;\n/**\n * interactive elements should be skiped\n * */\nconst INTERACTIVE_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'OPTION', 'TEXTAREA', 'SELECT'];\nfunction isContainInteractiveElement(targetNode) {\n  return INTERACTIVE_ELEMENTS.includes(targetNode.tagName) || targetNode.contentEditable === 'true';\n}\nfunction setInlineStyles(node, styles) {\n  if (node !== null && styles !== null) {\n    for (const [key, value] of Object.entries(styles)) {\n      node.style[key] = value;\n    }\n  }\n}\nfunction setTranslate3d(node, translate) {\n  setInlineStyles(node, {\n    transform: translate ? `translate3d(${translate.x}px,${translate.y}px,0)` : ''\n  });\n}\nfunction setTransitionDuration(node, duration) {\n  setInlineStyles(node, {\n    transitionDuration: duration ? `${duration}ms` : ''\n  });\n}\n\n/**\n * find closest target node from source node\n * */\nfunction closestNode(sourceNode, judge) {\n  let currentNode = sourceNode;\n  while (currentNode) {\n    if (judge(currentNode)) {\n      return currentNode;\n    }\n    currentNode = currentNode.parentNode;\n  }\n  return null;\n}\nfunction getEdgeOffset(node, parent, offset) {\n  if (offset === void 0) {\n    offset = {\n      left: 0,\n      top: 0\n    };\n  }\n  if (!node || !parent) {\n    return {};\n  }\n\n  // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested\n  const nodeOffset = {\n    left: (offset.left || 0) + node.offsetLeft,\n    top: (offset.top || 0) + node.offsetTop\n  };\n  if (node.parentNode === parent) {\n    return nodeOffset;\n  }\n  return getEdgeOffset(node.parentNode, parent, nodeOffset);\n}\nfunction getScrollingParent(el) {\n  return closestNode(el, el => {\n    const computedStyle = window.getComputedStyle(el);\n    const overflowRegex = /(auto|scroll)/;\n    const properties = ['overflow', 'overflowX', 'overflowY'];\n    return properties.some(property => overflowRegex.test(computedStyle[property]));\n  });\n}\n\n//# sourceURL=webpack://rsuite/./src/List/helper/utils.ts?");
+eval("\n\nexports.__esModule = true;\nexports.closestNode = closestNode;\nexports.getEdgeOffset = getEdgeOffset;\nexports.getScrollingParent = getScrollingParent;\nexports.isContainInteractiveElement = isContainInteractiveElement;\nexports.setInlineStyles = setInlineStyles;\nexports.setTransitionDuration = setTransitionDuration;\nexports.setTranslate3d = setTranslate3d;\n/**\n * interactive elements should be skiped\n * */\nconst INTERACTIVE_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'OPTION', 'TEXTAREA', 'SELECT'];\nfunction isContainInteractiveElement(targetNode) {\n  return INTERACTIVE_ELEMENTS.includes(targetNode.tagName) || targetNode.contentEditable === 'true';\n}\nfunction setInlineStyles(node, styles) {\n  if (node !== null && styles !== null) {\n    for (const [key, value] of Object.entries(styles)) {\n      node.style[key] = value;\n    }\n  }\n}\nfunction setTranslate3d(node, translate) {\n  setInlineStyles(node, {\n    transform: translate ? `translate3d(${translate.x}px,${translate.y}px,0)` : ''\n  });\n}\nfunction setTransitionDuration(node, duration) {\n  setInlineStyles(node, {\n    transitionDuration: duration ? `${duration}ms` : ''\n  });\n}\n\n/**\n * find closest target node from source node\n * */\nfunction closestNode(sourceNode, judge) {\n  let currentNode = sourceNode;\n  while (currentNode) {\n    if (judge(currentNode)) {\n      return currentNode;\n    }\n    currentNode = currentNode.parentNode;\n  }\n  return null;\n}\nfunction getEdgeOffset(node, parent, offset) {\n  if (offset === void 0) {\n    offset = {\n      left: 0,\n      top: 0\n    };\n  }\n  if (!node || !parent) {\n    return {};\n  }\n\n  // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested\n  const nodeOffset = {\n    left: (offset.left || 0) + node.offsetLeft,\n    top: (offset.top || 0) + node.offsetTop\n  };\n  if (node.parentNode === parent) {\n    return nodeOffset;\n  }\n  return getEdgeOffset(node.parentNode, parent, nodeOffset);\n}\nfunction getScrollingParent(el) {\n  if (!el || typeof window === 'undefined' || !window.getComputedStyle) {\n    return null;\n  }\n  try {\n    return closestNode(el, el => {\n      const computedStyle = window.getComputedStyle(el);\n      const overflowRegex = /(auto|scroll)/;\n      const properties = ['overflow', 'overflowX', 'overflowY'];\n      return properties.some(property => overflowRegex.test(computedStyle[property]));\n    });\n  } catch {\n    // In test environments, errors may occur, so return null\n    return null;\n  }\n}\n\n//# sourceURL=webpack://rsuite/./src/List/helper/utils.ts?");
 
 /***/ }),
 
@@ -4195,7 +4250,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ../MultiCascadeTree/TreeView */ \"./src/MultiCascadeTree/TreeView.tsx\"));\nvar _SearchView = _interopRequireDefault(__webpack_require__(/*! ../MultiCascadeTree/SearchView */ \"./src/MultiCascadeTree/SearchView.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _useActive = _interopRequireDefault(__webpack_require__(/*! ../Cascader/useActive */ \"./src/Cascader/useActive.ts\"));\nvar _utils = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../CascadeTree/utils */ \"./src/CascadeTree/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks2 = __webpack_require__(/*! ../MultiCascadeTree/hooks */ \"./src/MultiCascadeTree/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/MultiCascader/MultiCascader.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst emptyArray = [];\n\n/**\n * The `MultiCascader` component is used to select multiple values from cascading options.\n * @see https://rsuitejs.com/components/multi-cascader/\n */\nconst MultiCascader = (0, _utils3.forwardRef)((props, ref) => {\n  var _selectedPaths;\n  const {\n    propsWithDefaults,\n    rtl\n  } = (0, _CustomProvider.useCustom)('MultiCascader', props);\n  const {\n    as,\n    appearance = 'default',\n    classPrefix = 'picker',\n    defaultValue,\n    columnHeight,\n    columnWidth,\n    childrenKey = 'children',\n    cleanable = true,\n    data = emptyArray,\n    disabled,\n    disabledItemValues = emptyArray,\n    value: valueProp,\n    valueKey = 'value',\n    labelKey = 'label',\n    locale,\n    toggleAs,\n    style,\n    countable = true,\n    cascade = true,\n    placeholder,\n    placement = 'bottomStart',\n    popupClassName,\n    popupStyle,\n    searchable = true,\n    uncheckableItemValues = emptyArray,\n    id,\n    getChildren,\n    renderValue,\n    renderExtraFooter,\n    renderColumn,\n    renderTreeNode,\n    onEntered,\n    onExited,\n    onClean,\n    onSearch,\n    onSelect,\n    onChange,\n    onCheck,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    searchInput\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const onSelectCallback = (0, _react.useCallback)((node, cascadePaths, event) => {\n    var _trigger$current, _trigger$current$upda;\n    onSelect === null || onSelect === void 0 || onSelect(node, cascadePaths, event);\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 || _trigger$current$upda.call(_trigger$current);\n  }, [onSelect, trigger]);\n  const {\n    selectedPaths,\n    flattenData,\n    columnData,\n    setColumnData,\n    setSelectedPaths,\n    handleSelect\n  } = (0, _hooks2.useSelect)({\n    data,\n    childrenKey,\n    labelKey,\n    valueKey,\n    onSelect: onSelectCallback,\n    getChildren\n  });\n  const [controlledValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n  const itemKeys = {\n    childrenKey,\n    labelKey,\n    valueKey\n  };\n  const cascadeValueProps = {\n    ...itemKeys,\n    uncheckableItemValues,\n    cascade,\n    value: controlledValue,\n    onCheck,\n    onChange\n  };\n  const {\n    value,\n    setValue,\n    handleCheck\n  } = (0, _hooks2.useCascadeValue)(cascadeValueProps, flattenData);\n  const selectedItems = flattenData.filter(item => value.some(v => v === item[valueKey])) || [];\n  const onFocusItemCallback = (0, _react.useCallback)(value => {\n    const {\n      columns,\n      path\n    } = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(item => item[valueKey] === value), {\n      getParent: () => undefined,\n      getChildren: item => item[childrenKey]\n    });\n    setColumnData(columns);\n    setSelectedPaths(path);\n  }, [childrenKey, data, flattenData, setColumnData, setSelectedPaths, valueKey]);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setLayer,\n    setKeys,\n    onKeyDown: onFocusItem\n  } = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 || (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {\n    rtl,\n    data: flattenData,\n    valueKey,\n    defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,\n    target: () => overlay.current,\n    callback: onFocusItemCallback\n  });\n  const onSearchCallback = (value, event) => {\n    if (value) {\n      setLayer(0);\n    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {\n      setLayer(selectedPaths.length - 1);\n    }\n    setKeys([]);\n    onSearch === null || onSearch === void 0 || onSearch(value, event);\n  };\n  const {\n    items,\n    searchKeyword,\n    setSearchKeyword,\n    handleSearch\n  } = (0, _hooks2.useSearch)({\n    labelKey,\n    valueKey,\n    childrenKey,\n    flattenedData: flattenData,\n    uncheckableItemValues,\n    onSearch: onSearchCallback\n  });\n  const {\n    active,\n    handleEntered,\n    handleExited\n  } = (0, _useActive.default)({\n    onEntered,\n    onExited,\n    target,\n    setSearchKeyword\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled || !target.current) {\n      return;\n    }\n    setSelectedPaths([]);\n    setValue([]);\n    setColumnData([data]);\n    onChange === null || onChange === void 0 || onChange([], event);\n  });\n  const handleMenuPressEnter = (0, _hooks.useEventCallback)(event => {\n    var _overlay$current;\n    const focusItem = (0, _utils.findNodeOfTree)(data, item => item[valueKey] === focusItemValue);\n    const checkbox = (_overlay$current = overlay.current) === null || _overlay$current === void 0 ? void 0 : _overlay$current.querySelector(`[data-key=\"${focusItemValue}\"] [type=\"checkbox\"]`);\n    if (checkbox) {\n      handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');\n    }\n  });\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    ...rest\n  });\n  const renderCascadeColumn = (childNodes, column) => {\n    if (typeof renderColumn === 'function') {\n      return renderColumn(childNodes, column);\n    }\n    return childNodes;\n  };\n  const renderCascadeTreeNode = (node, itemData) => {\n    if (typeof renderTreeNode === 'function') {\n      return renderTreeNode(node, itemData);\n    }\n    return node;\n  };\n  const renderTreeView = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps || {};\n    const classes = merge(className, popupClassName, prefix('popup-multi-cascader'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      style: popupStyle,\n      target: trigger,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 281,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {\n      locale: locale,\n      cascade: cascade,\n      data: items,\n      value: value,\n      searchKeyword: searchKeyword,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      disabledItemValues: disabledItemValues,\n      inputRef: searchInput,\n      onCheck: handleCheck,\n      onSearch: handleSearch,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 289,\n        columnNumber: 13\n      }\n    }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n      cascade: cascade,\n      columnWidth: columnWidth,\n      columnHeight: columnHeight,\n      classPrefix: \"cascade-tree\",\n      uncheckableItemValues: uncheckableItemValues,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      value: value,\n      onSelect: handleSelect,\n      onCheck: handleCheck,\n      renderColumn: renderCascadeColumn,\n      renderTreeNode: renderCascadeTreeNode,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 306,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  let selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 335,\n        columnNumber: 9\n      }\n    });\n  }\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);\n  if (hasValue && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    classPrefix,\n    hasValue,\n    countable,\n    name: 'cascader',\n    appearance,\n    cleanable\n  });\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    popupType: \"tree\",\n    multiple: true,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEnter: handleEntered,\n    onExited: handleExited,\n    speaker: renderTreeView,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 378,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    className: classes,\n    style: style,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 389,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    ref: target,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 390,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nMultiCascader.displayName = 'MultiCascader';\nvar _default = exports[\"default\"] = MultiCascader;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/MultiCascader.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ../MultiCascadeTree/TreeView */ \"./src/MultiCascadeTree/TreeView.tsx\"));\nvar _SearchView = _interopRequireDefault(__webpack_require__(/*! ../MultiCascadeTree/SearchView */ \"./src/MultiCascadeTree/SearchView.tsx\"));\nvar _useActive = _interopRequireDefault(__webpack_require__(/*! ../Cascader/useActive */ \"./src/Cascader/useActive.ts\"));\nvar _utils = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../CascadeTree/utils */ \"./src/CascadeTree/utils.ts\");\nvar _utils3 = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks2 = __webpack_require__(/*! ../MultiCascadeTree/hooks */ \"./src/MultiCascadeTree/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/MultiCascader/MultiCascader.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst emptyArray = [];\n\n/**\n * The `MultiCascader` component is used to select multiple values from cascading options.\n * @see https://rsuitejs.com/components/multi-cascader/\n */\nconst MultiCascader = (0, _utils3.forwardRef)((props, ref) => {\n  var _selectedPaths;\n  const {\n    propsWithDefaults,\n    rtl\n  } = (0, _CustomProvider.useCustom)('MultiCascader', props);\n  const {\n    as,\n    appearance = 'default',\n    block,\n    className,\n    cleanable = true,\n    classPrefix = 'picker',\n    columnHeight,\n    columnWidth,\n    childrenKey = 'children',\n    countable = true,\n    cascade = true,\n    data = emptyArray,\n    defaultValue,\n    disabled,\n    disabledItemValues = emptyArray,\n    id,\n    labelKey = 'label',\n    locale,\n    placeholder,\n    placement = 'bottomStart',\n    popupClassName,\n    popupStyle,\n    renderColumn,\n    renderExtraFooter,\n    renderTreeNode,\n    renderValue,\n    searchable = true,\n    style,\n    toggleAs,\n    uncheckableItemValues = emptyArray,\n    value: valueProp,\n    valueKey = 'value',\n    getChildren,\n    onClean,\n    onChange,\n    onCheck,\n    onEnter,\n    onExit,\n    onSearch,\n    onSelect,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    searchInput\n  } = (0, _Picker.usePickerRef)(ref);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const onSelectCallback = (0, _react.useCallback)((node, cascadePaths, event) => {\n    var _trigger$current, _trigger$current$upda;\n    onSelect === null || onSelect === void 0 || onSelect(node, cascadePaths, event);\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 || _trigger$current$upda.call(_trigger$current);\n  }, [onSelect, trigger]);\n  const {\n    selectedPaths,\n    flattenData,\n    columnData,\n    setColumnData,\n    setSelectedPaths,\n    handleSelect\n  } = (0, _hooks2.useSelect)({\n    data,\n    childrenKey,\n    labelKey,\n    valueKey,\n    onSelect: onSelectCallback,\n    getChildren\n  });\n  const [controlledValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n  const itemKeys = {\n    childrenKey,\n    labelKey,\n    valueKey\n  };\n  const cascadeValueProps = {\n    ...itemKeys,\n    uncheckableItemValues,\n    cascade,\n    value: controlledValue,\n    onCheck,\n    onChange\n  };\n  const {\n    value,\n    setValue,\n    handleCheck\n  } = (0, _hooks2.useCascadeValue)(cascadeValueProps, flattenData);\n  const selectedItems = flattenData.filter(item => value.some(v => v === item[valueKey])) || [];\n  const onFocusItemCallback = (0, _react.useCallback)(value => {\n    const {\n      columns,\n      path\n    } = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(item => item[valueKey] === value), {\n      getParent: () => undefined,\n      getChildren: item => item[childrenKey]\n    });\n    setColumnData(columns);\n    setSelectedPaths(path);\n  }, [childrenKey, data, flattenData, setColumnData, setSelectedPaths, valueKey]);\n\n  // Used to hover the focuse item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setLayer,\n    setKeys,\n    onKeyDown: onFocusItem\n  } = (0, _Picker.useFocusItemValue)(selectedPaths === null || selectedPaths === void 0 || (_selectedPaths = selectedPaths[selectedPaths.length - 1]) === null || _selectedPaths === void 0 ? void 0 : _selectedPaths[valueKey], {\n    rtl,\n    data: flattenData,\n    valueKey,\n    defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,\n    target: () => overlay.current,\n    callback: onFocusItemCallback\n  });\n  const onSearchCallback = (value, event) => {\n    if (value) {\n      setLayer(0);\n    } else if (selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length) {\n      setLayer(selectedPaths.length - 1);\n    }\n    setKeys([]);\n    onSearch === null || onSearch === void 0 || onSearch(value, event);\n  };\n  const {\n    items,\n    searchKeyword,\n    setSearchKeyword,\n    handleSearch\n  } = (0, _hooks2.useSearch)({\n    labelKey,\n    valueKey,\n    childrenKey,\n    flattenedData: flattenData,\n    uncheckableItemValues,\n    onSearch: onSearchCallback\n  });\n  const {\n    active,\n    events\n  } = (0, _useActive.default)({\n    onEnter,\n    onExit,\n    target,\n    setSearchKeyword\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled || !target.current) {\n      return;\n    }\n    setSelectedPaths([]);\n    setValue([]);\n    setColumnData([data]);\n    onChange === null || onChange === void 0 || onChange([], event);\n  });\n  const handleMenuPressEnter = (0, _hooks.useEventCallback)(event => {\n    var _overlay$current;\n    const focusItem = (0, _utils.findNodeOfTree)(data, item => item[valueKey] === focusItemValue);\n    const checkbox = (_overlay$current = overlay.current) === null || _overlay$current === void 0 ? void 0 : _overlay$current.querySelector(`[data-key=\"${focusItemValue}\"] [type=\"checkbox\"]`);\n    if (checkbox) {\n      handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');\n    }\n  });\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    ...rest\n  });\n  const renderCascadeColumn = (childNodes, column) => {\n    if (typeof renderColumn === 'function') {\n      return renderColumn(childNodes, column);\n    }\n    return childNodes;\n  };\n  const renderCascadeTreeNode = (node, itemData) => {\n    if (typeof renderTreeNode === 'function') {\n      return renderTreeNode(node, itemData);\n    }\n    return node;\n  };\n  const renderTreeView = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps || {};\n    const classes = merge(className, popupClassName, prefix('popup-multi-cascader'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),\n      className: classes,\n      style: popupStyle,\n      target: trigger,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 279,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {\n      locale: locale,\n      cascade: cascade,\n      data: items,\n      value: value,\n      searchKeyword: searchKeyword,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      disabledItemValues: disabledItemValues,\n      inputRef: searchInput,\n      onCheck: handleCheck,\n      onSearch: handleSearch,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 287,\n        columnNumber: 13\n      }\n    }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n      cascade: cascade,\n      columnWidth: columnWidth,\n      columnHeight: columnHeight,\n      classPrefix: \"cascade-tree\",\n      uncheckableItemValues: uncheckableItemValues,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      cascadeData: columnData,\n      cascadePaths: selectedPaths,\n      value: value,\n      onSelect: handleSelect,\n      onCheck: handleCheck,\n      renderColumn: renderCascadeColumn,\n      renderTreeNode: renderCascadeTreeNode,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 304,\n        columnNumber: 13\n      }\n    }), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  let selectedElement = placeholder;\n  if (selectedItems.length > 0) {\n    selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {\n      selectedItems: selectedItems,\n      countable: countable,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      childrenKey: childrenKey,\n      prefix: prefix,\n      cascade: cascade,\n      locale: locale,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 333,\n        columnNumber: 9\n      }\n    });\n  }\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValue = selectedItems.length > 0 || Number(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) > 0 && (0, _isFunction.default)(renderValue);\n  if (hasValue && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value.length ? value : valueProp !== null && valueProp !== void 0 ? valueProp : [], selectedItems, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    ...events\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    as: as,\n    id: id,\n    name: \"multi-cascader\",\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    popupType: \"tree\",\n    multiple: true,\n    triggerProps: triggerProps,\n    ref: trigger,\n    placement: placement,\n    speaker: renderTreeView,\n    rootRef: root,\n    style: style,\n    classPrefix: classPrefix,\n    className: className,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 371,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({\n    ref: target,\n    as: toggleAs,\n    appearance: appearance,\n    disabled: disabled,\n    onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    cleanable: cleanable && !disabled,\n    countable: countable,\n    hasValue: hasValue,\n    active: active,\n    placement: placement,\n    inputValue: value\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 389,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));\n});\nMultiCascader.displayName = 'MultiCascader';\nvar _default = exports[\"default\"] = MultiCascader;\n\n//# sourceURL=webpack://rsuite/./src/MultiCascader/MultiCascader.tsx?");
 
 /***/ }),
 
@@ -4294,7 +4349,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/index.tsx\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Nav/NavItem.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `Nav.Item` component is used to create navigation links.\n *\n * - When used as direct child of `<Nav>`, render the NavItem\n * - When used within a `<Nav.Menu>`, render the NavDropdownItem\n * @see https://rsuitejs.com/components/nav\n *\n */\nconst NavItem = (0, _utils.forwardRef)((props, ref) => {\n  const nav = (0, _react.useContext)(_NavContext.default);\n  if (!nav) {\n    throw new Error('<Nav.Item> must be rendered within a <Nav> component.');\n  }\n  const {\n    as = _SafeAnchor.default,\n    active: activeProp,\n    disabled,\n    eventKey,\n    className,\n    classPrefix = 'nav-item',\n    style,\n    children,\n    icon,\n    divider,\n    panel,\n    onClick,\n    onSelect: onSelectProp,\n    ...rest\n  } = props;\n  const {\n    activeKey,\n    onSelect: onSelectFromNav\n  } = nav;\n  const active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);\n  const emitSelect = (0, _react.useCallback)(event => {\n    onSelectProp === null || onSelectProp === void 0 || onSelectProp(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);\n  }, [eventKey, onSelectProp, onSelectFromNav]);\n  const {\n    withPrefix,\n    merge,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    active,\n    disabled\n  }));\n  const handleClick = (0, _react.useCallback)(event => {\n    if (!disabled) {\n      emitSelect(event);\n      onClick === null || onClick === void 0 || onClick(event);\n    }\n  }, [disabled, emitSelect, onClick]);\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n      ref: ref,\n      role: \"separator\",\n      style: style,\n      className: merge(className, prefix('divider'))\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 98,\n        columnNumber: 7\n      }\n    }));\n  }\n  if (panel) {\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n      ref: ref,\n      style: style,\n      className: merge(className, prefix('panel'))\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 110,\n        columnNumber: 7\n      }\n    }), children);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    tabIndex: disabled ? -1 : undefined\n  }, rest, {\n    className: classes,\n    onClick: handleClick,\n    style: style,\n    \"aria-selected\": active || undefined,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 117,\n      columnNumber: 5\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: (0, _classnames.default)(prefix('icon'), icon.props.className)\n  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 7\n    }\n  }));\n});\nNavItem.displayName = 'Nav.Item';\nvar _default = exports[\"default\"] = NavItem;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/index.tsx\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../internals/SafeAnchor */ \"./src/internals/SafeAnchor/index.tsx\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Nav/NavItem.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `Nav.Item` component is used to create navigation links.\n *\n * - When used as direct child of `<Nav>`, render the NavItem\n * - When used within a `<Nav.Menu>`, render the NavDropdownItem\n * @see https://rsuitejs.com/components/nav\n *\n */\nconst NavItem = (0, _utils.forwardRef)((props, ref) => {\n  const nav = (0, _react.useContext)(_NavContext.default);\n  if (!nav) {\n    throw new Error('<Nav.Item> must be rendered within a <Nav> component.');\n  }\n  const {\n    as = _SafeAnchor.default,\n    active: activeProp,\n    disabled,\n    eventKey,\n    className,\n    classPrefix = 'nav-item',\n    style,\n    children,\n    icon,\n    divider,\n    panel,\n    onClick,\n    onSelect: onSelectProp,\n    ...rest\n  } = props;\n  const {\n    activeKey,\n    onSelect: onSelectFromNav\n  } = nav;\n  const active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);\n  const emitSelect = (0, _react.useCallback)(event => {\n    onSelectProp === null || onSelectProp === void 0 || onSelectProp(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);\n  }, [eventKey, onSelectProp, onSelectFromNav]);\n  const {\n    withPrefix,\n    merge,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    active,\n    disabled\n  }));\n  const handleClick = (0, _react.useCallback)(event => {\n    if (!disabled) {\n      emitSelect(event);\n      onClick === null || onClick === void 0 || onClick(event);\n    }\n  }, [disabled, emitSelect, onClick]);\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n      ref: ref,\n      role: \"separator\",\n      style: style,\n      className: merge(className, prefix('divider'))\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 98,\n        columnNumber: 7\n      }\n    }));\n  }\n  if (panel) {\n    return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n      ref: ref,\n      style: style,\n      className: merge(className, prefix('panel'))\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 110,\n        columnNumber: 7\n      }\n    }), children);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    tabIndex: disabled ? -1 : undefined\n  }, rest, {\n    className: classes,\n    onClick: handleClick,\n    style: style,\n    \"aria-selected\": active || undefined,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 117,\n      columnNumber: 5\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: (0, _classnames.default)(prefix('icon'), icon.props.className)\n  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 7\n    }\n  }));\n});\nNavItem.displayName = 'Nav.Item';\nvar _default = exports[\"default\"] = NavItem;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavItem.tsx?");
 
 /***/ }),
 
@@ -4437,7 +4492,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Navbar/NavbarItem.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * @private\n */\nconst NavbarItem = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    as = _SafeAnchor.default,\n    active: activeProp,\n    disabled,\n    eventKey,\n    className,\n    classPrefix = 'navbar-item',\n    style,\n    children,\n    icon,\n    onClick,\n    onSelect: onSelectProp,\n    ...rest\n  } = props;\n  const {\n    activeKey,\n    onSelect: onSelectFromNav\n  } = (0, _react.useContext)(_NavContext.default);\n  const active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);\n  const emitSelect = (0, _react.useCallback)(event => {\n    onSelectProp === null || onSelectProp === void 0 || onSelectProp(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);\n  }, [eventKey, onSelectProp, onSelectFromNav]);\n  const {\n    prefix,\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    active,\n    disabled\n  }));\n  const handleClick = (0, _react.useCallback)(event => {\n    if (!disabled) {\n      emitSelect(event);\n      onClick === null || onClick === void 0 || onClick(event);\n    }\n  }, [disabled, emitSelect, onClick]);\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    \"aria-selected\": active || undefined\n  }, rest, {\n    className: classes,\n    onClick: handleClick,\n    style: style,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 78,\n      columnNumber: 5\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: (0, _classnames.default)(prefix('icon'), icon.props.className)\n  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 92,\n      columnNumber: 7\n    }\n  }));\n});\nNavbarItem.displayName = 'Navbar.Item';\nvar _default = exports[\"default\"] = NavbarItem;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../internals/SafeAnchor */ \"./src/internals/SafeAnchor/index.tsx\"));\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Navbar/NavbarItem.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * @private\n */\nconst NavbarItem = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    as = _SafeAnchor.default,\n    active: activeProp,\n    disabled,\n    eventKey,\n    className,\n    classPrefix = 'navbar-item',\n    style,\n    children,\n    icon,\n    onClick,\n    onSelect: onSelectProp,\n    ...rest\n  } = props;\n  const {\n    activeKey,\n    onSelect: onSelectFromNav\n  } = (0, _react.useContext)(_NavContext.default);\n  const active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);\n  const emitSelect = (0, _react.useCallback)(event => {\n    onSelectProp === null || onSelectProp === void 0 || onSelectProp(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);\n  }, [eventKey, onSelectProp, onSelectFromNav]);\n  const {\n    prefix,\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix({\n    active,\n    disabled\n  }));\n  const handleClick = (0, _react.useCallback)(event => {\n    if (!disabled) {\n      emitSelect(event);\n      onClick === null || onClick === void 0 || onClick(event);\n    }\n  }, [disabled, emitSelect, onClick]);\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    \"aria-selected\": active || undefined\n  }, rest, {\n    className: classes,\n    onClick: handleClick,\n    style: style,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 78,\n      columnNumber: 5\n    }\n  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: (0, _classnames.default)(prefix('icon'), icon.props.className)\n  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 92,\n      columnNumber: 7\n    }\n  }));\n});\nNavbarItem.displayName = 'Navbar.Item';\nvar _default = exports[\"default\"] = NavbarItem;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarItem.tsx?");
 
 /***/ }),
 
@@ -4448,7 +4503,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowDownLine.js\"));\nvar _Whisper = _interopRequireDefault(__webpack_require__(/*! ../Whisper */ \"./src/Whisper/index.tsx\"));\nvar _Popover = _interopRequireDefault(__webpack_require__(/*! ../Popover */ \"./src/Popover/index.tsx\"));\nvar _NavbarItem = _interopRequireDefault(__webpack_require__(/*! ./NavbarItem */ \"./src/Navbar/NavbarItem.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Navbar/NavbarMegaMenu.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst NavbarMegaMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    as: Component = _NavbarItem.default,\n    className,\n    classPrefix = 'mega-menu',\n    children,\n    title,\n    open,\n    placement = 'autoVertical',\n    ...rest\n  } = props;\n  const {\n    merge,\n    prefix,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix());\n  const renderMenu = (0, _react.useCallback)((menuProps, ref) => {\n    const {\n      onClose,\n      className\n    } = menuProps;\n    return /*#__PURE__*/_react.default.createElement(_Popover.default, {\n      ref: ref,\n      full: true,\n      arrow: false,\n      className: className,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 53,\n        columnNumber: 9\n      }\n    }, typeof children === 'function' ? children({\n      onClose\n    }) : children);\n  }, [children]);\n  return /*#__PURE__*/_react.default.createElement(_Whisper.default, {\n    preventOverflow: true,\n    placement: placement,\n    trigger: \"click\",\n    speaker: renderMenu,\n    open: open,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 62,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 63,\n      columnNumber: 7\n    }\n  }), title, /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {\n    className: prefix`toggle-icon`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 9\n    }\n  })));\n});\nNavbarMegaMenu.displayName = 'NavbarMegaMenu';\nvar _default = exports[\"default\"] = NavbarMegaMenu;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarMegaMenu.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowDownLine.js\"));\nvar _Whisper = _interopRequireDefault(__webpack_require__(/*! ../Whisper */ \"./src/Whisper/index.tsx\"));\nvar _Popover = _interopRequireDefault(__webpack_require__(/*! ../Popover */ \"./src/Popover/index.tsx\"));\nvar _NavbarItem = _interopRequireDefault(__webpack_require__(/*! ./NavbarItem */ \"./src/Navbar/NavbarItem.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Navbar/NavbarMegaMenu.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst NavbarMegaMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    as: Component = _NavbarItem.default,\n    className,\n    classPrefix = 'mega-menu',\n    children,\n    title,\n    open,\n    placement = 'autoVertical',\n    ...rest\n  } = props;\n  const {\n    merge,\n    prefix,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix());\n  const renderMenu = (0, _react.useCallback)((menuProps, ref) => {\n    const {\n      onClose,\n      className\n    } = menuProps || {};\n    return /*#__PURE__*/_react.default.createElement(_Popover.default, {\n      ref: ref,\n      full: true,\n      arrow: false,\n      className: className,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 50,\n        columnNumber: 9\n      }\n    }, typeof children === 'function' ? children({\n      onClose\n    }) : children);\n  }, [children]);\n  return /*#__PURE__*/_react.default.createElement(_Whisper.default, {\n    preventOverflow: true,\n    placement: placement,\n    trigger: \"click\",\n    speaker: renderMenu,\n    open: open,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 59,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 60,\n      columnNumber: 7\n    }\n  }), title, /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {\n    className: prefix`toggle-icon`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 62,\n      columnNumber: 9\n    }\n  })));\n});\nNavbarMegaMenu.displayName = 'NavbarMegaMenu';\nvar _default = exports[\"default\"] = NavbarMegaMenu;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarMegaMenu.tsx?");
 
 /***/ }),
 
@@ -4855,7 +4910,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\nvar _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ../Slider/ProgressBar */ \"./src/Slider/ProgressBar.tsx\"));\nvar _Handle = _interopRequireDefault(__webpack_require__(/*! ../Slider/Handle */ \"./src/Slider/Handle.tsx\"));\nvar _Graduated = _interopRequireDefault(__webpack_require__(/*! ../Slider/Graduated */ \"./src/Slider/Graduated.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../Slider/utils */ \"./src/Slider/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/RangeSlider/RangeSlider.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst defaultDefaultValue = [0, 0];\n\n/**\n * The `RangeSlider` component is used to select a range from a given numerical range.\n * @see https://rsuitejs.com/components/slider/\n */\nconst RangeSlider = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('RangeSlider', props);\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-valuetext': ariaValuetext,\n    as,\n    barClassName,\n    className,\n    classPrefix = 'slider',\n    constraint,\n    defaultValue = defaultDefaultValue,\n    disabled,\n    graduated,\n    progress = true,\n    vertical,\n    readOnly,\n    min = 0,\n    max: maxProp = 100,\n    step = 1,\n    value: valueProp,\n    handleClassName,\n    handleStyle,\n    handleTitle,\n    tooltip = true,\n    getAriaValueText,\n    renderTooltip,\n    renderMark,\n    onChange,\n    onChangeCommitted,\n    ...rest\n  } = propsWithDefaults;\n  const barRef = (0, _react.useRef)(null);\n\n  // Define the parameter position of the handle\n  const handleIndexs = (0, _react.useRef)([0, 1]);\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)('RangeSlider');\n  const classes = merge(className, withPrefix({\n    vertical,\n    disabled,\n    graduated,\n    'with-mark': renderMark\n  }));\n  const max = (0, _react.useMemo)(() => (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min), [maxProp, min, step]);\n\n  /**\n   * Returns a valid value that does not exceed the specified range of values.\n   */\n  const getValidValue = (0, _react.useCallback)(value => {\n    if (typeof value === 'undefined') {\n      return;\n    }\n    return [(0, _utils2.checkValue)(value[0], min, max), (0, _utils2.checkValue)(value[1], min, max)];\n  }, [max, min]);\n  const [value, setValue] = (0, _hooks.useControlled)(getValidValue(valueProp), getValidValue(defaultValue));\n\n  // The count of values that can be entered.\n  const count = (0, _react.useMemo)(() => (0, _utils2.precisionMath)((max - min) / step), [max, min, step]);\n\n  // Get the height of the progress bar\n  const getBarHeight = (0, _react.useCallback)(() => barRef.current ? (0, _getHeight.default)(barRef.current) : 0, []);\n  // Get the width of the progress bar\n  const getBarWidth = (0, _react.useCallback)(() => barRef.current ? (0, _getWidth.default)(barRef.current) : 0, []);\n  const getValueByOffset = (0, _react.useCallback)(offset => {\n    let val = 0;\n    if (isNaN(offset)) {\n      return val;\n    }\n    if (vertical) {\n      const barHeight = getBarHeight();\n      val = Math.round(offset / (barHeight / count)) * step;\n    } else {\n      const barWidth = getBarWidth();\n      val = Math.round(offset / (barWidth / count)) * step;\n    }\n    return (0, _utils2.precisionMath)(val);\n  }, [count, getBarHeight, getBarWidth, step, vertical]);\n  const getValueByPosition = (0, _react.useCallback)(event => {\n    const barOffset = (0, _getOffset.default)(barRef.current);\n    const {\n      pageX,\n      pageY\n    } = (0, _utils2.getPosition)(event);\n    const offset = vertical ? barOffset.top + barOffset.height - pageY : pageX - barOffset.left;\n    const val = rtl && !vertical ? barOffset.width - offset : offset;\n    return getValueByOffset(val) + min;\n  }, [getValueByOffset, min, rtl, vertical]);\n  const getRangeValue = (0, _react.useCallback)((value, key, event) => {\n    // Get the corresponding value according to the cursor position\n    const v = getValueByPosition(event);\n\n    // Judge the handle key and put the corresponding value at the start or end.\n    if (key === 'start') {\n      return [v, value[1]];\n    } else if (key === 'end') {\n      return [value[0], v];\n    }\n    return value;\n  }, [getValueByPosition]);\n  const getNextValue = (0, _react.useCallback)((event, dataset) => {\n    const {\n      key: eventKey,\n      range\n    } = dataset;\n    const value = range.split(',').map(i => +i);\n    const nextValue = getValidValue(getRangeValue(value, eventKey, event));\n    if (nextValue[0] >= nextValue[1]) {\n      /**\n       * When the value of `start` is greater than the value of` end`,\n       * the position of the handle is reversed.\n       */\n      handleIndexs.current.reverse();\n      if (eventKey === 'start') {\n        nextValue[0] = value[1];\n      } else {\n        nextValue[1] = value[0];\n      }\n    }\n    return nextValue;\n  }, [getRangeValue, getValidValue]);\n\n  /**\n   * Whether a range is valid against given constraint (if any)\n   * Should check before every `setValue` calls\n   */\n  const isRangeMatchingConstraint = (0, _react.useCallback)(range => {\n    // If no constraint is defined, any range is valid\n    if (!constraint) return true;\n    return constraint(range);\n  }, [constraint]);\n\n  /**\n   * Callback function that is fired when the mousemove is triggered\n   */\n  const handleDragMove = (0, _hooks.useEventCallback)((event, dataset) => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const nextValue = getNextValue(event, dataset);\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n  });\n\n  /**\n   * Callback function that is fired when the mouseup is triggered\n   */\n  const handleChangeCommitted = (0, _hooks.useEventCallback)((event, dataset) => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const nextValue = getNextValue(event, dataset);\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChangeCommitted === null || onChangeCommitted === void 0 || onChangeCommitted(nextValue, event);\n    }\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    const target = event.target;\n    const {\n      key\n    } = (target === null || target === void 0 ? void 0 : target.dataset) || {};\n    const nextValue = [...value];\n    const increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    const decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    const valueIndex = key === 'start' ? 0 : 1;\n    switch (event.key) {\n      case 'Home':\n        nextValue[valueIndex] = min;\n        break;\n      case 'End':\n        nextValue[valueIndex] = max;\n        break;\n      case increaseKey:\n      case 'ArrowUp':\n        nextValue[valueIndex] = Math.min(max, value[valueIndex] + step);\n        break;\n      case decreaseKey:\n      case 'ArrowDown':\n        nextValue[valueIndex] = Math.max(min, value[valueIndex] - step);\n        break;\n      default:\n        return;\n    }\n\n    // When the start value is greater than the end value, let the handle and value switch positions.\n    if (nextValue[0] >= nextValue[1]) {\n      nextValue.reverse();\n      handleIndexs.current.reverse();\n    }\n\n    // Prevent scroll of the page\n    event.preventDefault();\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n  });\n  const handleBarClick = (0, _hooks.useEventCallback)(event => {\n    if (disabled || readOnly) {\n      return;\n    }\n    let [start, end] = value;\n    const v = getValueByPosition(event);\n\n    // Judging that the current click value is closer to the values of `start` and `end`.\n    if (Math.abs(start - v) < Math.abs(end - v)) {\n      start = v;\n    } else {\n      end = v;\n    }\n    const nextValue = getValidValue([start, end].sort((a, b) => a - b));\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n      onChangeCommitted === null || onChangeCommitted === void 0 || onChangeCommitted(nextValue, event);\n    }\n  });\n  const handleProps = (0, _react.useMemo)(() => [{\n    value: value[0],\n    'data-key': 'start',\n    'aria-valuenow': value[0],\n    'aria-valuetext': getAriaValueText ? getAriaValueText(value[0], 'start') : ariaValuetext,\n    position: (value[0] - min) / (max - min) * 100\n  }, {\n    value: value[1],\n    'data-key': 'end',\n    'aria-valuenow': value[1],\n    'aria-valuetext': getAriaValueText ? getAriaValueText(value[1], 'end') : ariaValuetext,\n    position: (value[1] - min) / (max - min) * 100\n  }], [ariaValuetext, getAriaValueText, max, min, value]);\n  const handleCommonProps = {\n    rtl,\n    disabled,\n    vertical,\n    tooltip,\n    className: handleClassName,\n    style: handleStyle,\n    renderTooltip,\n    onDragMove: handleDragMove,\n    onDragEnd: handleChangeCommitted,\n    onKeyDown: handleKeyDown,\n    tabIndex: disabled ? undefined : 0,\n    'aria-orientation': vertical ? 'vertical' : 'horizontal',\n    'aria-disabled': disabled,\n    'aria-valuemax': max,\n    'aria-valuemin': min,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby\n  };\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 345,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: merge(barClassName, prefix('bar')),\n    ref: barRef,\n    onClick: handleBarClick,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 346,\n      columnNumber: 7\n    }\n  }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {\n    rtl: rtl,\n    vertical: vertical,\n    start: (value[0] - min) / (max - min) * 100,\n    end: (value[1] - min) / (max - min) * 100,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 348,\n      columnNumber: 11\n    }\n  }), graduated && /*#__PURE__*/_react.default.createElement(_Graduated.default, {\n    step: step,\n    min: min,\n    max: max,\n    count: count,\n    value: value,\n    renderMark: renderMark,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 356,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({\n    \"data-range\": value\n  }, handleCommonProps, handleProps[handleIndexs.current[0]], {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 366,\n      columnNumber: 7\n    }\n  }), handleTitle), /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({\n    \"data-range\": value\n  }, handleCommonProps, handleProps[handleIndexs.current[1]], {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 370,\n      columnNumber: 7\n    }\n  }), handleTitle));\n});\nRangeSlider.displayName = 'RangeSlider';\nvar _default = exports[\"default\"] = RangeSlider;\n\n//# sourceURL=webpack://rsuite/./src/RangeSlider/RangeSlider.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\nvar _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ../Slider/ProgressBar */ \"./src/Slider/ProgressBar.tsx\"));\nvar _Handle = _interopRequireDefault(__webpack_require__(/*! ../Slider/Handle */ \"./src/Slider/Handle.tsx\"));\nvar _Graduated = _interopRequireDefault(__webpack_require__(/*! ../Slider/Graduated */ \"./src/Slider/Graduated.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../Slider/utils */ \"./src/Slider/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/RangeSlider/RangeSlider.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst defaultDefaultValue = [0, 0];\n\n/**\n * The `RangeSlider` component is used to select a range from a given numerical range.\n * @see https://rsuitejs.com/components/slider/\n */\nconst RangeSlider = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('RangeSlider', props);\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-valuetext': ariaValuetext,\n    as,\n    barClassName,\n    className,\n    classPrefix = 'slider',\n    constraint,\n    defaultValue = defaultDefaultValue,\n    disabled,\n    graduated,\n    progress = true,\n    keepTooltipOpen = false,\n    vertical,\n    readOnly,\n    min = 0,\n    max: maxProp = 100,\n    step = 1,\n    size = 'sm',\n    value: valueProp,\n    handleClassName,\n    handleStyle,\n    handleTitle,\n    tooltip = true,\n    marks,\n    plaintext,\n    placeholder,\n    getAriaValueText,\n    renderTooltip,\n    renderMark,\n    onChange,\n    onChangeCommitted,\n    ...rest\n  } = propsWithDefaults;\n  const barRef = (0, _react.useRef)(null);\n\n  // Define the parameter position of the handle\n  const handleIndexs = (0, _react.useRef)([0, 1]);\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)('RangeSlider');\n  const classes = merge(className, withPrefix({\n    vertical,\n    disabled,\n    graduated,\n    'with-mark': renderMark\n  }));\n  const max = (0, _react.useMemo)(() => (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min), [maxProp, min, step]);\n\n  /**\n   * Returns a valid value that does not exceed the specified range of values.\n   */\n  const getValidValue = (0, _react.useCallback)(value => {\n    if (typeof value === 'undefined') {\n      return;\n    }\n    return [(0, _utils2.checkValue)(value[0], min, max), (0, _utils2.checkValue)(value[1], min, max)];\n  }, [max, min]);\n  const [value, setValue] = (0, _hooks.useControlled)(getValidValue(valueProp), getValidValue(defaultValue));\n\n  // The count of values that can be entered.\n  const count = (0, _react.useMemo)(() => (0, _utils2.precisionMath)((max - min) / step), [max, min, step]);\n\n  // Get the height of the progress bar\n  const getBarHeight = (0, _react.useCallback)(() => barRef.current ? (0, _getHeight.default)(barRef.current) : 0, []);\n  // Get the width of the progress bar\n  const getBarWidth = (0, _react.useCallback)(() => barRef.current ? (0, _getWidth.default)(barRef.current) : 0, []);\n  const getValueByOffset = (0, _react.useCallback)(offset => {\n    let val = 0;\n    if (isNaN(offset)) {\n      return val;\n    }\n    if (vertical) {\n      const barHeight = getBarHeight();\n      val = Math.round(offset / (barHeight / count)) * step;\n    } else {\n      const barWidth = getBarWidth();\n      val = Math.round(offset / (barWidth / count)) * step;\n    }\n    return (0, _utils2.precisionMath)(val);\n  }, [count, getBarHeight, getBarWidth, step, vertical]);\n  const getValueByPosition = (0, _react.useCallback)(event => {\n    const barOffset = (0, _getOffset.default)(barRef.current);\n    const {\n      pageX,\n      pageY\n    } = (0, _utils2.getPosition)(event);\n    const offset = vertical ? barOffset.top + barOffset.height - pageY : pageX - barOffset.left;\n    const val = rtl && !vertical ? barOffset.width - offset : offset;\n    return getValueByOffset(val) + min;\n  }, [getValueByOffset, min, rtl, vertical]);\n  const getRangeValue = (0, _react.useCallback)((value, key, event) => {\n    // Get the corresponding value according to the cursor position\n    const v = getValueByPosition(event);\n\n    // Judge the handle key and put the corresponding value at the start or end.\n    if (key === 'start') {\n      return [v, value[1]];\n    } else if (key === 'end') {\n      return [value[0], v];\n    }\n    return value;\n  }, [getValueByPosition]);\n  const getNextValue = (0, _react.useCallback)((event, dataset) => {\n    const {\n      key: eventKey,\n      range\n    } = dataset;\n    const value = range.split(',').map(i => +i);\n    const nextValue = getValidValue(getRangeValue(value, eventKey, event));\n    if (nextValue[0] >= nextValue[1]) {\n      /**\n       * When the value of `start` is greater than the value of` end`,\n       * the position of the handle is reversed.\n       */\n      handleIndexs.current.reverse();\n      if (eventKey === 'start') {\n        nextValue[0] = value[1];\n      } else {\n        nextValue[1] = value[0];\n      }\n    }\n    return nextValue;\n  }, [getRangeValue, getValidValue]);\n\n  /**\n   * Whether a range is valid against given constraint (if any)\n   * Should check before every `setValue` calls\n   */\n  const isRangeMatchingConstraint = (0, _react.useCallback)(range => {\n    // If no constraint is defined, any range is valid\n    if (!constraint) return true;\n    return constraint(range);\n  }, [constraint]);\n\n  /**\n   * Callback function that is fired when the mousemove is triggered\n   */\n  const handleDragMove = (0, _hooks.useEventCallback)((event, dataset) => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const nextValue = getNextValue(event, dataset);\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n  });\n\n  /**\n   * Callback function that is fired when the mouseup is triggered\n   */\n  const handleChangeCommitted = (0, _hooks.useEventCallback)((event, dataset) => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const nextValue = getNextValue(event, dataset);\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChangeCommitted === null || onChangeCommitted === void 0 || onChangeCommitted(nextValue, event);\n    }\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    const target = event.target;\n    const {\n      key\n    } = (target === null || target === void 0 ? void 0 : target.dataset) || {};\n    const nextValue = [...value];\n    const increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    const decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    const valueIndex = key === 'start' ? 0 : 1;\n    switch (event.key) {\n      case 'Home':\n        nextValue[valueIndex] = min;\n        break;\n      case 'End':\n        nextValue[valueIndex] = max;\n        break;\n      case increaseKey:\n      case 'ArrowUp':\n        nextValue[valueIndex] = Math.min(max, value[valueIndex] + step);\n        break;\n      case decreaseKey:\n      case 'ArrowDown':\n        nextValue[valueIndex] = Math.max(min, value[valueIndex] - step);\n        break;\n      default:\n        return;\n    }\n\n    // When the start value is greater than the end value, let the handle and value switch positions.\n    if (nextValue[0] >= nextValue[1]) {\n      nextValue.reverse();\n      handleIndexs.current.reverse();\n    }\n\n    // Prevent scroll of the page\n    event.preventDefault();\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n  });\n  const handleBarClick = (0, _hooks.useEventCallback)(event => {\n    if (disabled || readOnly) {\n      return;\n    }\n    let [start, end] = value;\n    const v = getValueByPosition(event);\n\n    // Judging that the current click value is closer to the values of `start` and `end`.\n    if (Math.abs(start - v) < Math.abs(end - v)) {\n      start = v;\n    } else {\n      end = v;\n    }\n    const nextValue = getValidValue([start, end].sort((a, b) => a - b));\n    if (isRangeMatchingConstraint(nextValue)) {\n      setValue(nextValue);\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n      onChangeCommitted === null || onChangeCommitted === void 0 || onChangeCommitted(nextValue, event);\n    }\n  });\n  const handleProps = (0, _react.useMemo)(() => [{\n    value: value[0],\n    'data-key': 'start',\n    'aria-valuenow': value[0],\n    'aria-valuetext': getAriaValueText ? getAriaValueText(value[0], 'start') : ariaValuetext,\n    position: (value[0] - min) / (max - min) * 100\n  }, {\n    value: value[1],\n    'data-key': 'end',\n    'aria-valuenow': value[1],\n    'aria-valuetext': getAriaValueText ? getAriaValueText(value[1], 'end') : ariaValuetext,\n    position: (value[1] - min) / (max - min) * 100\n  }], [ariaValuetext, getAriaValueText, max, min, value]);\n  const handleCommonProps = {\n    disabled,\n    vertical,\n    tooltip,\n    className: handleClassName,\n    style: handleStyle,\n    renderTooltip,\n    onDragMove: handleDragMove,\n    onDragEnd: handleChangeCommitted,\n    onKeyDown: handleKeyDown,\n    tabIndex: disabled ? undefined : 0,\n    'aria-orientation': vertical ? 'vertical' : 'horizontal',\n    'aria-disabled': disabled,\n    'aria-valuemax': max,\n    'aria-valuemin': min,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    keepTooltipOpen\n  };\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notSelected\",\n      ref: ref,\n      placeholder: placeholder,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 352,\n        columnNumber: 7\n      }\n    }, value && (value[0] || value[1]) ? value.join('~') : null);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes,\n    \"data-size\": size\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 359,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: merge(barClassName, prefix('bar')),\n    ref: barRef,\n    onClick: handleBarClick,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 360,\n      columnNumber: 7\n    }\n  }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {\n    rtl: rtl,\n    vertical: vertical,\n    start: (value[0] - min) / (max - min) * 100,\n    end: (value[1] - min) / (max - min) * 100,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 362,\n      columnNumber: 11\n    }\n  }), graduated && /*#__PURE__*/_react.default.createElement(_Graduated.default, {\n    step: step,\n    min: min,\n    max: max,\n    count: count,\n    value: value,\n    marks: marks,\n    renderMark: renderMark,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 370,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({\n    \"data-range\": value\n  }, handleCommonProps, handleProps[handleIndexs.current[0]], {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 381,\n      columnNumber: 7\n    }\n  }), handleTitle), /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({\n    \"data-range\": value\n  }, handleCommonProps, handleProps[handleIndexs.current[1]], {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 385,\n      columnNumber: 7\n    }\n  }), handleTitle));\n});\nRangeSlider.displayName = 'RangeSlider';\nvar _default = exports[\"default\"] = RangeSlider;\n\n//# sourceURL=webpack://rsuite/./src/RangeSlider/RangeSlider.tsx?");
 
 /***/ }),
 
@@ -4914,28 +4969,6 @@ eval("\n\nexports.__esModule = true;\nexports.transformValueToCharacterMap = exp
 
 /***/ }),
 
-/***/ "./src/SafeAnchor/SafeAnchor.tsx":
-/*!***************************************!*\
-  !*** ./src/SafeAnchor/SafeAnchor.tsx ***!
-  \***************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/SafeAnchor/SafeAnchor.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nfunction isTrivialHref(href) {\n  return !href || href.trim() === '#';\n}\n\n/**\n * A SafeAnchor is a wrapper around the `<a>` HTML element.\n * @private\n */\nconst SafeAnchor = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('SafeAnchor', props);\n  const {\n    as = 'a',\n    href,\n    disabled,\n    onClick,\n    ...restProps\n  } = propsWithDefaults;\n  const handleClick = (0, _react.useCallback)(event => {\n    if (disabled || isTrivialHref(href)) {\n      event.preventDefault();\n    }\n    if (disabled) {\n      event.stopPropagation();\n      return;\n    }\n    onClick === null || onClick === void 0 || onClick(event);\n  }, [disabled, href, onClick]);\n\n  // There are default role and href attributes on the node to ensure Focus management and keyboard interactions.\n  const trivialProps = isTrivialHref(href) ? {\n    role: 'button',\n    href: '#'\n  } : null;\n  if (disabled) {\n    restProps.tabIndex = -1;\n    restProps['aria-disabled'] = true;\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    href: href\n  }, trivialProps, restProps, {\n    onClick: handleClick,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 50,\n      columnNumber: 5\n    }\n  }));\n});\nSafeAnchor.displayName = 'SafeAnchor';\nvar _default = exports[\"default\"] = SafeAnchor;\n\n//# sourceURL=webpack://rsuite/./src/SafeAnchor/SafeAnchor.tsx?");
-
-/***/ }),
-
-/***/ "./src/SafeAnchor/index.tsx":
-/*!**********************************!*\
-  !*** ./src/SafeAnchor/index.tsx ***!
-  \**********************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ./SafeAnchor */ \"./src/SafeAnchor/SafeAnchor.tsx\"));\nexports.SafeAnchor = _SafeAnchor.default;\n// export types\n// export components\nvar _default = exports[\"default\"] = _SafeAnchor.default;\n\n//# sourceURL=webpack://rsuite/./src/SafeAnchor/index.tsx?");
-
-/***/ }),
-
 /***/ "./src/Schema/Schema.ts":
 /*!******************************!*\
   !*** ./src/Schema/Schema.ts ***!
@@ -4965,7 +4998,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/SelectPicker/SelectPicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst emptyArray = [];\n/**\n * The `SelectPicker` component is used to select an item from a list of data.\n * @see https://rsuitejs.com/components/select-picker/\n */\nconst SelectPicker = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('SelectPicker', props);\n  const {\n    as,\n    appearance = 'default',\n    data = emptyArray,\n    valueKey = 'value',\n    labelKey = 'label',\n    value: valueProp,\n    classPrefix = 'picker',\n    placeholder,\n    defaultValue,\n    disabled,\n    cleanable = true,\n    placement = 'bottomStart',\n    popupClassName,\n    popupAutoWidth = true,\n    popupStyle,\n    listboxMaxHeight = 320,\n    groupBy,\n    locale,\n    toggleAs,\n    style,\n    searchable = true,\n    disabledItemValues = emptyArray,\n    virtualized,\n    listProps,\n    id,\n    onGroupTitleClick,\n    searchBy,\n    onEntered,\n    onExited,\n    onClean,\n    onChange,\n    onSelect,\n    onSearch,\n    sort,\n    renderValue,\n    renderListbox,\n    renderOptionGroup,\n    renderOption,\n    renderExtraFooter,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    list,\n    searchInput\n  } = (0, _Picker.usePickerRef)(ref);\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n\n  // Used to hover the focus item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown: onFocusItem\n  } = (0, _Picker.useFocusItemValue)(value, {\n    data,\n    valueKey,\n    target: () => overlay.current\n  });\n\n  // Use search keywords to filter options.\n  const {\n    searchKeyword,\n    filteredData,\n    resetSearch,\n    handleSearch\n  } = (0, _Picker.useSearch)(data, {\n    labelKey,\n    searchBy,\n    callback: (searchKeyword, filteredData, event) => {\n      var _filteredData$;\n      // The first option after filtering is the focus.\n      setFocusItemValue(filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);\n      onSearch === null || onSearch === void 0 || onSearch(searchKeyword, event);\n    }\n  });\n\n  // Use component active state to support keyboard events.\n  const [active, setActive] = (0, _react.useState)(false);\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((value, item, event) => {\n    var _target$current;\n    onSelect === null || onSelect === void 0 || onSelect(value, item, event);\n    (_target$current = target.current) === null || _target$current === void 0 || _target$current.focus();\n  });\n  const handleChangeValue = (0, _hooks.useEventCallback)((value, event) => {\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleMenuPressEnter = (0, _hooks.useEventCallback)(event => {\n    if (!focusItemValue) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    const focusItem = data.find(item => (0, _utils.shallowEqual)(item[valueKey], focusItemValue));\n    setValue(focusItemValue);\n    handleSelect(focusItemValue, focusItem, event);\n    handleChangeValue(focusItemValue, event);\n    handleClose();\n  });\n  const handleItemSelect = (0, _hooks.useEventCallback)((value, item, event) => {\n    setValue(value);\n    setFocusItemValue(value);\n    handleSelect(value, item, event);\n    handleChangeValue(value, event);\n    handleClose();\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled || !cleanable) {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(value);\n    handleChangeValue(null, event);\n  });\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    ...rest\n  });\n  const handleExited = (0, _hooks.useEventCallback)(() => {\n    resetSearch();\n    setActive(false);\n    onSearch === null || onSearch === void 0 || onSearch('');\n    setFocusItemValue(null);\n  });\n  const handleEntered = (0, _hooks.useEventCallback)(() => {\n    setActive(true);\n    setFocusItemValue(value);\n  });\n\n  // Find active `MenuItem` by `value`\n  const activeItem = data.find(item => (0, _utils.shallowEqual)(item[valueKey], value));\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValue = !!activeItem || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  let selectedElement = placeholder;\n  if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n    selectedElement = activeItem[labelKey];\n  }\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, activeItem, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName, prefix('select-menu'));\n    let items = filteredData;\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _utils.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    const listbox = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderOptionGroup: renderOptionGroup,\n      renderOption: renderOption,\n      maxHeight: listboxMaxHeight,\n      classPrefix: 'picker-select-menu',\n      listItemClassPrefix: 'picker-select-menu-item',\n      listItemAs: _Picker.ListItem,\n      activeItemValues: [value],\n      focusItemValue: focusItemValue,\n      data: items,\n      query: searchKeyword,\n      groupBy: groupBy,\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 298,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix`none`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 320,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: popupStyle,\n      onKeyDown: onPickerKeyDown,\n      target: trigger,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 324,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 333,\n        columnNumber: 13\n      }\n    }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    classPrefix,\n    appearance,\n    hasValue,\n    name: 'select',\n    cleanable\n  });\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    id: id,\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 357,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    className: classes,\n    style: style,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 366,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {\n    ref: target,\n    appearance: appearance,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    as: toggleAs,\n    disabled: disabled,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    focusItemValue: focusItemValue,\n    active: active,\n    placement: placement,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 367,\n      columnNumber: 11\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nSelectPicker.displayName = 'SelectPicker';\nvar _default = exports[\"default\"] = SelectPicker;\n\n//# sourceURL=webpack://rsuite/./src/SelectPicker/SelectPicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _SearchBox = _interopRequireDefault(__webpack_require__(/*! ../internals/SearchBox */ \"./src/internals/SearchBox/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/SelectPicker/SelectPicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst emptyArray = [];\n/**\n * The `SelectPicker` component is used to select an item from a list of data.\n * @see https://rsuitejs.com/components/select-picker/\n */\nconst SelectPicker = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('SelectPicker', props);\n  const {\n    appearance = 'default',\n    as,\n    block,\n    className,\n    cleanable = true,\n    classPrefix = 'picker',\n    data = emptyArray,\n    defaultValue,\n    disabled,\n    disabledItemValues = emptyArray,\n    groupBy,\n    id,\n    labelKey = 'label',\n    listProps,\n    listboxMaxHeight = 320,\n    locale,\n    placeholder,\n    placement = 'bottomStart',\n    popupAutoWidth = true,\n    popupClassName,\n    popupStyle,\n    searchable = true,\n    style,\n    toggleAs,\n    value: valueProp,\n    valueKey = 'value',\n    virtualized,\n    sort,\n    searchBy,\n    renderValue,\n    renderListbox,\n    renderOptionGroup,\n    renderOption,\n    renderExtraFooter,\n    onGroupTitleClick,\n    onEnter,\n    onExit,\n    onClean,\n    onChange,\n    onSelect,\n    onSearch,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    list,\n    searchInput\n  } = (0, _Picker.usePickerRef)(ref);\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n\n  // Used to hover the focus item  when trigger `onKeydown`\n  const {\n    focusItemValue,\n    setFocusItemValue,\n    onKeyDown: onFocusItem\n  } = (0, _Picker.useFocusItemValue)(value, {\n    data,\n    valueKey,\n    target: () => overlay.current\n  });\n\n  // Use search keywords to filter options.\n  const {\n    searchKeyword,\n    filteredData,\n    resetSearch,\n    handleSearch\n  } = (0, _Picker.useSearch)(data, {\n    labelKey,\n    searchBy,\n    callback: (searchKeyword, filteredData, event) => {\n      var _filteredData$;\n      // The first option after filtering is the focus.\n      setFocusItemValue(filteredData === null || filteredData === void 0 || (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);\n      onSearch === null || onSearch === void 0 || onSearch(searchKeyword, event);\n    }\n  });\n\n  // Use component active state to support keyboard events.\n  const [active, setActive] = (0, _react.useState)(false);\n  const handleClose = (0, _hooks.useEventCallback)(() => {\n    var _trigger$current, _trigger$current$clos;\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((value, item, event) => {\n    var _target$current;\n    onSelect === null || onSelect === void 0 || onSelect(value, item, event);\n    (_target$current = target.current) === null || _target$current === void 0 || _target$current.focus();\n  });\n  const handleChangeValue = (0, _hooks.useEventCallback)((value, event) => {\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleMenuPressEnter = (0, _hooks.useEventCallback)(event => {\n    if (!focusItemValue) {\n      return;\n    }\n\n    // Find active `MenuItem` by `value`\n    const focusItem = data.find(item => (0, _utils.shallowEqual)(item[valueKey], focusItemValue));\n    setValue(focusItemValue);\n    handleSelect(focusItemValue, focusItem, event);\n    handleChangeValue(focusItemValue, event);\n    handleClose();\n  });\n  const handleItemSelect = (0, _hooks.useEventCallback)((value, item, event) => {\n    setValue(value);\n    setFocusItemValue(value);\n    handleSelect(value, item, event);\n    handleChangeValue(value, event);\n    handleClose();\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    if (disabled || !cleanable) {\n      return;\n    }\n    setValue(null);\n    setFocusItemValue(value);\n    handleChangeValue(null, event);\n  });\n  const onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !focusItemValue || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: onFocusItem,\n    onMenuPressEnter: handleMenuPressEnter,\n    ...rest\n  });\n  const handleExit = (0, _hooks.useEventCallback)(() => {\n    resetSearch();\n    setActive(false);\n    onSearch === null || onSearch === void 0 || onSearch('');\n    setFocusItemValue(null);\n  });\n  const handleEnter = (0, _hooks.useEventCallback)(() => {\n    setActive(true);\n    setFocusItemValue(value);\n  });\n\n  // Find active `MenuItem` by `value`\n  const activeItem = data.find(item => (0, _utils.shallowEqual)(item[valueKey], value));\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValue = !!activeItem || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  let selectedElement = placeholder;\n  if (activeItem !== null && activeItem !== void 0 && activeItem[labelKey]) {\n    selectedElement = activeItem[labelKey];\n  }\n  if (!(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue)) {\n    selectedElement = renderValue(value, activeItem, selectedElement);\n    // If renderValue returns null or undefined, hasValue is false.\n    if ((0, _isNil.default)(selectedElement)) {\n      hasValue = false;\n    }\n  }\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName, prefix('select-menu'));\n    let items = filteredData;\n\n    // Create a tree structure data when set `groupBy`\n    if (groupBy) {\n      items = (0, _utils.getDataGroupBy)(items, groupBy, sort);\n    } else if (typeof sort === 'function') {\n      items = items.sort(sort(false));\n    }\n    const listbox = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {\n      listProps: listProps,\n      listRef: list,\n      disabledItemValues: disabledItemValues,\n      valueKey: valueKey,\n      labelKey: labelKey,\n      renderOptionGroup: renderOptionGroup,\n      renderOption: renderOption,\n      maxHeight: listboxMaxHeight,\n      classPrefix: 'picker-select-menu',\n      listItemClassPrefix: 'picker-select-menu-item',\n      listItemAs: _Picker.ListItem,\n      activeItemValues: [value],\n      focusItemValue: focusItemValue,\n      data: items,\n      query: searchKeyword,\n      groupBy: groupBy,\n      onSelect: handleItemSelect,\n      onGroupTitleClick: onGroupTitleClick,\n      virtualized: virtualized,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 296,\n        columnNumber: 9\n      }\n    }) : /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix`none`,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 318,\n        columnNumber: 9\n      }\n    }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: popupStyle,\n      onKeyDown: onPickerKeyDown,\n      target: trigger,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 322,\n        columnNumber: 9\n      }\n    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {\n      placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,\n      onChange: handleSearch,\n      value: searchKeyword,\n      inputRef: searchInput,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 331,\n        columnNumber: 13\n      }\n    }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n  const triggerProps = {\n    ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit)\n  };\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    as: as,\n    id: id,\n    name: \"select\",\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    triggerProps: triggerProps,\n    ref: trigger,\n    placement: placement,\n    speaker: renderPopup,\n    rootRef: root,\n    style: style,\n    classPrefix: classPrefix,\n    className: className,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 352,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({\n    ref: target,\n    appearance: appearance,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    onKeyDown: onPickerKeyDown,\n    as: toggleAs,\n    disabled: disabled,\n    cleanable: cleanable && !disabled,\n    hasValue: hasValue,\n    inputValue: value !== null && value !== void 0 ? value : '',\n    focusItemValue: focusItemValue,\n    active: active,\n    placement: placement\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 368,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));\n});\nSelectPicker.displayName = 'SelectPicker';\nvar _default = exports[\"default\"] = SelectPicker;\n\n//# sourceURL=webpack://rsuite/./src/SelectPicker/SelectPicker.tsx?");
 
 /***/ }),
 
@@ -5020,7 +5053,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/index.tsx\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\nvar _useRenderMenuItem = __webpack_require__(/*! ../internals/Menu/useRenderMenuItem */ \"./src/internals/Menu/useRenderMenuItem.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Sidenav/ExpandedSidenavDropdownItem.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Tree View Node\n * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView\n */\nconst ExpandedSidenavDropdownItem = (0, _utils.forwardRef)((props, ref) => {\n  const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  const nav = (0, _react.useContext)(_NavContext.default);\n  if (!sidenav || !nav) {\n    throw new Error('<SidenavDropdownItem> component is not supposed to be used standalone. Use <Nav.Item> within <Sidenav> instead.');\n  }\n  const {\n    as = 'li',\n    active: activeProp,\n    classPrefix = 'dropdown-item',\n    children,\n    disabled,\n    divider,\n    panel,\n    className,\n    style,\n    icon,\n    eventKey,\n    onClick,\n    onSelect,\n    ...rest\n  } = props;\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(eventKey, sidenav.activeKey) || (0, _utils.shallowEqual)(nav.activeKey, eventKey));\n  const classes = merge(className, withPrefix({\n    'with-icon': icon,\n    active: selected,\n    disabled\n  }));\n  const handleClick = (0, _react.useCallback)(event => {\n    var _nav$onSelect, _sidenav$onSelect;\n    if (disabled) return;\n    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);\n    (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 || _nav$onSelect.call(nav, eventKey, event);\n    (_sidenav$onSelect = sidenav.onSelect) === null || _sidenav$onSelect === void 0 || _sidenav$onSelect.call(sidenav, eventKey, event);\n  }, [disabled, onSelect, sidenav, eventKey, nav]);\n  const menuitemEventHandlers = {\n    onClick: (0, _utils.createChainedFunction)(handleClick, onClick)\n  };\n  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);\n  if (divider) {\n    return renderDropdownItem({\n      ref,\n      role: 'separator',\n      style,\n      className: merge(prefix('divider'), className),\n      ...rest\n    });\n  }\n  if (panel) {\n    return renderDropdownItem({\n      ref,\n      role: 'none presentation',\n      style,\n      className: merge(prefix('panel'), className),\n      ...rest,\n      children\n    });\n  }\n  return renderDropdownItem({\n    ref,\n    ...rest,\n    style,\n    className: classes,\n    'aria-current': selected || undefined,\n    ...menuitemEventHandlers,\n    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n      className: merge(prefix('menu-icon'), icon.props.className)\n    }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 145,\n        columnNumber: 11\n      }\n    }))\n  }, _SafeAnchor.default);\n});\nExpandedSidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';\nvar _default = exports[\"default\"] = ExpandedSidenavDropdownItem;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/ExpandedSidenavDropdownItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/index.tsx\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../internals/SafeAnchor */ \"./src/internals/SafeAnchor/index.tsx\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\nvar _useRenderMenuItem = __webpack_require__(/*! ../internals/Menu/useRenderMenuItem */ \"./src/internals/Menu/useRenderMenuItem.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Sidenav/ExpandedSidenavDropdownItem.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Tree View Node\n * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView\n */\nconst ExpandedSidenavDropdownItem = (0, _utils.forwardRef)((props, ref) => {\n  const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  const nav = (0, _react.useContext)(_NavContext.default);\n  if (!sidenav || !nav) {\n    throw new Error('<SidenavDropdownItem> component is not supposed to be used standalone. Use <Nav.Item> within <Sidenav> instead.');\n  }\n  const {\n    as = 'li',\n    active: activeProp,\n    classPrefix = 'dropdown-item',\n    children,\n    disabled,\n    divider,\n    panel,\n    className,\n    style,\n    icon,\n    eventKey,\n    onClick,\n    onSelect,\n    ...rest\n  } = props;\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(eventKey, sidenav.activeKey) || (0, _utils.shallowEqual)(nav.activeKey, eventKey));\n  const classes = merge(className, withPrefix({\n    'with-icon': icon,\n    active: selected,\n    disabled\n  }));\n  const handleClick = (0, _react.useCallback)(event => {\n    var _nav$onSelect, _sidenav$onSelect;\n    if (disabled) return;\n    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);\n    (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 || _nav$onSelect.call(nav, eventKey, event);\n    (_sidenav$onSelect = sidenav.onSelect) === null || _sidenav$onSelect === void 0 || _sidenav$onSelect.call(sidenav, eventKey, event);\n  }, [disabled, onSelect, sidenav, eventKey, nav]);\n  const menuitemEventHandlers = {\n    onClick: (0, _utils.createChainedFunction)(handleClick, onClick)\n  };\n  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);\n  if (divider) {\n    return renderDropdownItem({\n      ref,\n      role: 'separator',\n      style,\n      className: merge(prefix('divider'), className),\n      ...rest\n    });\n  }\n  if (panel) {\n    return renderDropdownItem({\n      ref,\n      role: 'none presentation',\n      style,\n      className: merge(prefix('panel'), className),\n      ...rest,\n      children\n    });\n  }\n  return renderDropdownItem({\n    ref,\n    ...rest,\n    style,\n    className: classes,\n    'aria-current': selected || undefined,\n    ...menuitemEventHandlers,\n    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {\n      className: merge(prefix('menu-icon'), icon.props.className)\n    }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 145,\n        columnNumber: 11\n      }\n    }))\n  }, _SafeAnchor.default);\n});\nExpandedSidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';\nvar _default = exports[\"default\"] = ExpandedSidenavDropdownItem;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/ExpandedSidenavDropdownItem.tsx?");
 
 /***/ }),
 
@@ -5152,7 +5185,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _utils
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../SafeAnchor */ \"./src/SafeAnchor/index.tsx\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/MenuItem */ \"./src/internals/Menu/MenuItem.tsx\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Whisper = _interopRequireDefault(__webpack_require__(/*! ../Whisper */ \"./src/Whisper/index.tsx\"));\nvar _Tooltip = _interopRequireDefault(__webpack_require__(/*! ../Tooltip */ \"./src/Tooltip/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Sidenav/SidenavItem.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Props of SidenavItem component\n */\n\n/**\n * @private\n */\nconst SidenavItem = (0, _utils.forwardRef)((props, ref) => {\n  const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  if (!sidenav) {\n    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');\n  }\n  const {\n    as = _SafeAnchor.default,\n    active: activeProp,\n    classPrefix = 'sidenav-item',\n    children,\n    className,\n    disabled,\n    divider,\n    eventKey,\n    icon,\n    panel,\n    style,\n    tooltip = children,\n    onClick,\n    onSelect,\n    ...rest\n  } = props;\n  const {\n    activeKey,\n    onSelect: onSelectFromNav\n  } = (0, _react.useContext)(_NavContext.default);\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(activeKey, eventKey);\n  const whisperRef = _react.default.useRef(null);\n  const handleClick = (0, _react.useCallback)(event => {\n    var _whisperRef$current;\n    if (disabled) return;\n    (_whisperRef$current = whisperRef.current) === null || _whisperRef$current === void 0 || _whisperRef$current.close();\n    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);\n    onClick === null || onClick === void 0 || onClick(event);\n  }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);\n  const clonedIcon = icon ? /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: (0, _classnames.default)(prefix('icon'), icon.props.className)\n  }) : null;\n  const title = typeof children === 'string' ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('title'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 115,\n      columnNumber: 36\n    }\n  }, children) : children;\n  if (!sidenav.expanded) {\n    if (panel || divider) {\n      return null;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Whisper.default, {\n      trigger: \"hover\",\n      speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 125,\n          columnNumber: 18\n        }\n      }, tooltip),\n      placement: \"right\",\n      ref: whisperRef,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 123,\n        columnNumber: 7\n      }\n    }, (triggerProps, triggerRef) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n      selected: selected,\n      disabled: disabled,\n      onActivate: handleClick,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 130,\n        columnNumber: 11\n      }\n    }, (_ref, menuitemRef) => {\n      let {\n        selected,\n        active,\n        ...menuitem\n      } = _ref;\n      const classes = merge(className, withPrefix({\n        focus: active,\n        active: selected,\n        disabled\n      }));\n\n      // Show tooltip when inside a collapse <Sidenav>\n      return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n        as: as,\n        ref: (0, _utils.mergeRefs)((0, _utils.mergeRefs)(ref, menuitemRef), triggerRef),\n        disabled: as === _SafeAnchor.default ? disabled : undefined,\n        className: classes,\n        \"data-event-key\": eventKey\n      }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {\n        onMouseOver: (0, _utils.createChainedFunction)(menuitem.onMouseOver, triggerProps.onMouseOver),\n        onMouseOut: (0, _utils.createChainedFunction)(menuitem.onMouseOut, triggerProps.onMouseOut),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 139,\n          columnNumber: 17\n        }\n      }), clonedIcon, title);\n    }));\n  }\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: ref,\n      role: \"separator\",\n      style: style,\n      className: merge(className, prefix('divider'))\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 167,\n        columnNumber: 7\n      }\n    }));\n  }\n  if (panel) {\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: ref,\n      role: \"none presentation\",\n      style: style,\n      className: merge(className, prefix('panel'))\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 179,\n        columnNumber: 7\n      }\n    }), children);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: merge(className, withPrefix({\n      active: selected,\n      disabled\n    })),\n    onClick: handleClick,\n    style: style,\n    \"aria-selected\": selected || undefined,\n    \"data-event-key\": eventKey\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 192,\n      columnNumber: 5\n    }\n  }), clonedIcon, title);\n});\nSidenavItem.displayName = 'Sidenav.Item';\nvar _default = exports[\"default\"] = SidenavItem;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavItem.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ../internals/SafeAnchor */ \"./src/internals/SafeAnchor/index.tsx\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/MenuItem */ \"./src/internals/Menu/MenuItem.tsx\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Whisper = _interopRequireDefault(__webpack_require__(/*! ../Whisper */ \"./src/Whisper/index.tsx\"));\nvar _Tooltip = _interopRequireDefault(__webpack_require__(/*! ../Tooltip */ \"./src/Tooltip/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Sidenav/SidenavItem.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Props of SidenavItem component\n */\n\n/**\n * @private\n */\nconst SidenavItem = (0, _utils.forwardRef)((props, ref) => {\n  const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  if (!sidenav) {\n    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');\n  }\n  const {\n    as = _SafeAnchor.default,\n    active: activeProp,\n    classPrefix = 'sidenav-item',\n    children,\n    className,\n    disabled,\n    divider,\n    eventKey,\n    icon,\n    panel,\n    style,\n    tooltip = children,\n    onClick,\n    onSelect,\n    ...rest\n  } = props;\n  const {\n    activeKey,\n    onSelect: onSelectFromNav\n  } = (0, _react.useContext)(_NavContext.default);\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(activeKey, eventKey);\n  const whisperRef = _react.default.useRef(null);\n  const handleClick = (0, _react.useCallback)(event => {\n    var _whisperRef$current;\n    if (disabled) return;\n    (_whisperRef$current = whisperRef.current) === null || _whisperRef$current === void 0 || _whisperRef$current.close();\n    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);\n    onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);\n    onClick === null || onClick === void 0 || onClick(event);\n  }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);\n  const clonedIcon = icon ? /*#__PURE__*/_react.default.cloneElement(icon, {\n    className: (0, _classnames.default)(prefix('icon'), icon.props.className)\n  }) : null;\n  const title = typeof children === 'string' ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('title'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 115,\n      columnNumber: 36\n    }\n  }, children) : children;\n  if (!sidenav.expanded) {\n    if (panel || divider) {\n      return null;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Whisper.default, {\n      trigger: \"hover\",\n      speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 125,\n          columnNumber: 18\n        }\n      }, tooltip),\n      placement: \"right\",\n      ref: whisperRef,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 123,\n        columnNumber: 7\n      }\n    }, (triggerProps, triggerRef) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n      selected: selected,\n      disabled: disabled,\n      onActivate: handleClick,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 130,\n        columnNumber: 11\n      }\n    }, (_ref, menuitemRef) => {\n      let {\n        selected,\n        active,\n        ...menuitem\n      } = _ref;\n      const classes = merge(className, withPrefix({\n        focus: active,\n        active: selected,\n        disabled\n      }));\n\n      // Show tooltip when inside a collapse <Sidenav>\n      return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n        as: as,\n        ref: (0, _utils.mergeRefs)((0, _utils.mergeRefs)(ref, menuitemRef), triggerRef),\n        disabled: as === _SafeAnchor.default ? disabled : undefined,\n        className: classes,\n        \"data-event-key\": eventKey\n      }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {\n        onMouseOver: (0, _utils.createChainedFunction)(menuitem.onMouseOver, triggerProps.onMouseOver),\n        onMouseOut: (0, _utils.createChainedFunction)(menuitem.onMouseOut, triggerProps.onMouseOut),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 139,\n          columnNumber: 17\n        }\n      }), clonedIcon, title);\n    }));\n  }\n  if (divider) {\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: ref,\n      role: \"separator\",\n      style: style,\n      className: merge(className, prefix('divider'))\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 167,\n        columnNumber: 7\n      }\n    }));\n  }\n  if (panel) {\n    return /*#__PURE__*/_react.default.createElement(\"li\", (0, _extends2.default)({\n      ref: ref,\n      role: \"none presentation\",\n      style: style,\n      className: merge(className, prefix('panel'))\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 179,\n        columnNumber: 7\n      }\n    }), children);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: merge(className, withPrefix({\n      active: selected,\n      disabled\n    })),\n    onClick: handleClick,\n    style: style,\n    \"aria-selected\": selected || undefined,\n    \"data-event-key\": eventKey\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 192,\n      columnNumber: 5\n    }\n  }), clonedIcon, title);\n});\nSidenavItem.displayName = 'Sidenav.Item';\nvar _default = exports[\"default\"] = SidenavItem;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavItem.tsx?");
 
 /***/ }),
 
@@ -5185,7 +5218,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Mark = _interopRequireDefault(__webpack_require__(/*! ./Mark */ \"./src/Slider/Mark.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Slider/utils.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Slider/Graduated.tsx\";\nconst Graduated = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    as,\n    step,\n    min,\n    max,\n    count,\n    value,\n    classPrefix = 'slider',\n    className,\n    renderMark,\n    ...rest\n  } = props;\n  const {\n    merge,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const activeIndexs = [];\n  let startIndex = 0;\n  let endIndex = 0;\n  if (Array.isArray(value)) {\n    const [start, end] = value;\n    startIndex = (0, _utils2.precisionMath)(start / step - min / step);\n    endIndex = (0, _utils2.precisionMath)(end / step - min / step);\n    activeIndexs.push((0, _utils2.precisionMath)(Math.ceil((start - min) / (max - min) * count)));\n    activeIndexs.push((0, _utils2.precisionMath)(Math.ceil((end - min) / (max - min) * count)));\n  } else {\n    endIndex = (0, _utils2.precisionMath)(value / step - min / step);\n    activeIndexs.push((0, _utils2.precisionMath)(Math.ceil((value - min) / (max - min) * count)));\n  }\n  const graduatedItems = [];\n  for (let i = 0; i < count; i += 1) {\n    const classes = prefix({\n      pass: i >= startIndex && i <= endIndex,\n      active: ~activeIndexs.indexOf(i)\n    });\n    const mark = (0, _utils2.precisionMath)(i * step + min);\n    const lastMark = Math.min(max, mark + step);\n    const last = i === count - 1;\n    graduatedItems.push(/*#__PURE__*/_react.default.createElement(\"li\", {\n      className: classes,\n      key: i,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 61,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Mark.default, {\n      mark: mark,\n      renderMark: renderMark,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 62,\n        columnNumber: 9\n      }\n    }), last ? /*#__PURE__*/_react.default.createElement(_Mark.default, {\n      mark: lastMark,\n      renderMark: renderMark,\n      last: last,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 63,\n        columnNumber: 17\n      }\n    }) : null));\n  }\n  const classes = merge(className, prefix('graduator'));\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 71,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"ol\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 72,\n      columnNumber: 7\n    }\n  }, graduatedItems));\n});\nGraduated.displayName = 'Graduated';\nvar _default = exports[\"default\"] = Graduated;\n\n//# sourceURL=webpack://rsuite/./src/Slider/Graduated.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Mark = _interopRequireDefault(__webpack_require__(/*! ./Mark */ \"./src/Slider/Mark.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Slider/utils.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Slider/Graduated.tsx\";\nconst Graduated = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    as,\n    step,\n    min,\n    max,\n    count,\n    value,\n    classPrefix = 'slider',\n    className,\n    marks = [],\n    renderMark,\n    ...rest\n  } = props;\n  const {\n    merge,\n    prefix,\n    cssVar\n  } = (0, _hooks.useStyles)(classPrefix);\n  const activeIndexs = [];\n  let startIndex = 0;\n  let endIndex = 0;\n  if (Array.isArray(value)) {\n    const [start, end] = value;\n    startIndex = (0, _utils2.precisionMath)(start / step - min / step);\n    endIndex = (0, _utils2.precisionMath)(end / step - min / step);\n    activeIndexs.push((0, _utils2.precisionMath)(Math.ceil((start - min) / (max - min) * count)));\n    activeIndexs.push((0, _utils2.precisionMath)(Math.ceil((end - min) / (max - min) * count)));\n  } else {\n    endIndex = (0, _utils2.precisionMath)(value / step - min / step);\n    activeIndexs.push((0, _utils2.precisionMath)(Math.ceil((value - min) / (max - min) * count)));\n  }\n  const graduatedItems = [];\n\n  // If custom marks are provided, use them\n  if (marks.length > 0) {\n    // Only create DOM nodes for the specific mark values\n    marks.forEach((mark, index) => {\n      // Calculate the position index for this mark\n      const markPosition = (0, _utils2.precisionMath)((mark.value - min) / (max - min) * count);\n      graduatedItems.push(/*#__PURE__*/_react.default.createElement(\"li\", {\n        className: prefix('tick'),\n        key: `${mark.value}-${index}`,\n        \"data-pass\": markPosition >= startIndex && markPosition <= endIndex,\n        \"data-active\": activeIndexs.indexOf(markPosition) !== -1,\n        style: cssVar('tick-offset', `${(mark.value - min) / (max - min) * 100}%`),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 60,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_Mark.default, {\n        mark: mark.value,\n        renderMark: () => mark.label || mark.value,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 67,\n          columnNumber: 11\n        }\n      })));\n    });\n  } else {\n    // Original implementation for when no custom marks are provided\n    for (let i = 0; i < count; i += 1) {\n      const mark = (0, _utils2.precisionMath)(i * step + min);\n      const lastMark = Math.min(max, mark + step);\n      const last = i === count - 1;\n      graduatedItems.push(/*#__PURE__*/_react.default.createElement(\"li\", {\n        className: prefix('tick'),\n        \"data-pass\": i >= startIndex && i <= endIndex,\n        \"data-active\": activeIndexs.indexOf(i) !== -1,\n        key: i,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 79,\n          columnNumber: 9\n        }\n      }, /*#__PURE__*/_react.default.createElement(_Mark.default, {\n        mark: mark,\n        renderMark: renderMark,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 85,\n          columnNumber: 11\n        }\n      }), last ? /*#__PURE__*/_react.default.createElement(_Mark.default, {\n        mark: lastMark,\n        renderMark: renderMark,\n        last: last,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 86,\n          columnNumber: 19\n        }\n      }) : null));\n    }\n  }\n  const classes = merge(className, prefix('graduator'));\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes\n  }, rest, {\n    \"data-with-marks\": marks.length > 0,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 95,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"ol\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 96,\n      columnNumber: 7\n    }\n  }, graduatedItems));\n});\nGraduated.displayName = 'Graduated';\nvar _default = exports[\"default\"] = Graduated;\n\n//# sourceURL=webpack://rsuite/./src/Slider/Graduated.tsx?");
 
 /***/ }),
 
@@ -5196,7 +5229,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Tooltip = _interopRequireDefault(__webpack_require__(/*! ../Tooltip */ \"./src/Tooltip/index.tsx\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ./Input */ \"./src/Slider/Input.tsx\"));\nvar _useDrag = _interopRequireDefault(__webpack_require__(/*! ./useDrag */ \"./src/Slider/useDrag.ts\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Slider/Handle.tsx\";\nconst Handle = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    as,\n    classPrefix = 'slider',\n    className,\n    disabled,\n    style,\n    children,\n    position,\n    vertical,\n    tooltip,\n    rtl,\n    value,\n    role,\n    tabIndex,\n    renderTooltip,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    onKeyDown,\n    'data-range': dataRange,\n    'data-key': dateKey,\n    ...rest\n  } = props;\n  const horizontalKey = rtl ? 'right' : 'left';\n  const direction = vertical ? 'bottom' : horizontalKey;\n  const styles = (0, _utils.mergeStyles)(style, {\n    [direction]: `${position}%`\n  });\n  const {\n    merge,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    active,\n    onMoveStart,\n    onMouseEnter,\n    rootRef,\n    tooltipRef\n  } = (0, _useDrag.default)({\n    tooltip,\n    disabled,\n    onDragStart,\n    onDragMove,\n    onDragEnd\n  });\n  const handleClasses = merge(className, prefix('handle'), {\n    active\n  });\n  return /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    role: role,\n    tabIndex: tabIndex,\n    ref: (0, _utils.mergeRefs)(ref, rootRef),\n    className: handleClasses,\n    onMouseDown: onMoveStart,\n    onMouseEnter: onMouseEnter,\n    onTouchStart: onMoveStart,\n    onKeyDown: onKeyDown,\n    style: styles,\n    \"data-range\": dataRange,\n    \"data-key\": dateKey,\n    \"data-testid\": \"slider-handle\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 5\n    }\n  }, tooltip && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {\n    \"aria-hidden\": \"true\",\n    ref: tooltipRef,\n    className: merge(prefix('tooltip'), 'placement-top'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 81,\n      columnNumber: 9\n    }\n  }, renderTooltip ? renderTooltip(value) : value), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    tabIndex: -1,\n    value: value\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 89,\n      columnNumber: 7\n    }\n  })), children);\n});\nHandle.displayName = 'Handle';\nvar _default = exports[\"default\"] = Handle;\n\n//# sourceURL=webpack://rsuite/./src/Slider/Handle.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Tooltip = _interopRequireDefault(__webpack_require__(/*! ../Tooltip */ \"./src/Tooltip/index.tsx\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ./Input */ \"./src/Slider/Input.tsx\"));\nvar _useDrag = _interopRequireDefault(__webpack_require__(/*! ./useDrag */ \"./src/Slider/useDrag.ts\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Slider/Handle.tsx\";\nconst Handle = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    as,\n    classPrefix = 'slider',\n    className,\n    disabled,\n    style,\n    children,\n    position,\n    vertical,\n    tooltip,\n    value,\n    role,\n    tabIndex,\n    keepTooltipOpen,\n    renderTooltip,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    onKeyDown,\n    'data-range': dataRange,\n    'data-key': dateKey,\n    ...rest\n  } = props;\n  const actualTooltip = tooltip || keepTooltipOpen;\n  const {\n    merge,\n    prefix,\n    cssVar\n  } = (0, _hooks.useStyles)(classPrefix);\n  const styles = (0, _utils.mergeStyles)(style, cssVar('offset', `${position}%`));\n  const {\n    active,\n    onMoveStart,\n    onMouseEnter,\n    rootRef,\n    tooltipRef\n  } = (0, _useDrag.default)({\n    tooltip: actualTooltip,\n    disabled,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    keepTooltipOpen\n  });\n  const handleClasses = merge(className, prefix('handle'), {\n    active: active || keepTooltipOpen\n  });\n  return /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    role: role,\n    tabIndex: tabIndex,\n    ref: (0, _utils.mergeRefs)(ref, rootRef),\n    className: handleClasses,\n    onMouseDown: onMoveStart,\n    onMouseEnter: onMouseEnter,\n    onTouchStart: onMoveStart,\n    onKeyDown: onKeyDown,\n    style: styles,\n    \"data-range\": dataRange,\n    \"data-key\": dateKey,\n    \"data-testid\": \"slider-handle\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 5\n    }\n  }, actualTooltip && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {\n    \"aria-hidden\": \"true\",\n    ref: tooltipRef,\n    className: prefix('tooltip'),\n    \"data-placement\": vertical ? 'left' : 'top',\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 81,\n      columnNumber: 9\n    }\n  }, renderTooltip ? renderTooltip(value) : value), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    tabIndex: -1,\n    value: value\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 90,\n      columnNumber: 7\n    }\n  })), children);\n});\nHandle.displayName = 'Handle';\nvar _default = exports[\"default\"] = Handle;\n\n//# sourceURL=webpack://rsuite/./src/Slider/Handle.tsx?");
 
 /***/ }),
 
@@ -5240,7 +5273,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\nvar _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ./ProgressBar */ \"./src/Slider/ProgressBar.tsx\"));\nvar _Handle = _interopRequireDefault(__webpack_require__(/*! ./Handle */ \"./src/Slider/Handle.tsx\"));\nvar _Graduated = _interopRequireDefault(__webpack_require__(/*! ./Graduated */ \"./src/Slider/Graduated.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Slider/utils.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Slider/Slider.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * A Slider is an interface for users to adjust a value in a specific range.\n *\n * @see https://rsuitejs.com/components/slider\n */\nconst Slider = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Slider', props);\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-valuetext': ariaValuetext,\n    as,\n    graduated,\n    className,\n    barClassName,\n    progress,\n    vertical,\n    disabled,\n    readOnly,\n    plaintext,\n    classPrefix = 'slider',\n    min = 0,\n    handleClassName,\n    handleStyle,\n    handleTitle,\n    tooltip = true,\n    step = 1,\n    defaultValue = 0,\n    value: valueProp,\n    max: maxProp = 100,\n    placeholder,\n    getAriaValueText,\n    renderTooltip,\n    renderMark,\n    onChange,\n    onChangeCommitted,\n    ...rest\n  } = propsWithDefaults;\n  const barRef = (0, _react.useRef)(null);\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)('Slider');\n  const classes = merge(className, withPrefix({\n    vertical,\n    disabled,\n    graduated,\n    'with-mark': renderMark,\n    readonly: readOnly\n  }));\n  const max = (0, _react.useMemo)(() => (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min), [maxProp, min, step]);\n\n  /**\n   * Returns a valid value that does not exceed the specified range of values.\n   */\n  const getValidValue = (0, _react.useCallback)(value => {\n    return (0, _utils2.checkValue)(value, min, max);\n  }, [max, min]);\n  const [value, setValue] = (0, _hooks.useControlled)(getValidValue(valueProp), getValidValue(defaultValue));\n  const count = (0, _react.useMemo)(() => (0, _utils2.precisionMath)((max - min) / step), [max, min, step]);\n\n  // Get the height of the progress bar\n  const getBarHeight = (0, _react.useCallback)(() => barRef.current ? (0, _getHeight.default)(barRef.current) : 0, []);\n  // Get the width of the progress bar\n  const getBarWidth = (0, _react.useCallback)(() => barRef.current ? (0, _getWidth.default)(barRef.current) : 0, []);\n  const getValueByOffset = (0, _react.useCallback)(offset => {\n    let value = 0;\n    if (isNaN(offset)) {\n      return value;\n    }\n    if (vertical) {\n      const barHeight = getBarHeight();\n      value = Math.round(offset / (barHeight / count)) * step;\n    } else {\n      const barWidth = getBarWidth();\n      value = Math.round(offset / (barWidth / count)) * step;\n    }\n    return (0, _utils2.precisionMath)(value);\n  }, [count, getBarHeight, getBarWidth, step, vertical]);\n\n  /**\n   * A value within the valid range is calculated from the position triggered by the event.\n   */\n  const getValueByPosition = (0, _react.useCallback)(event => {\n    const barOffset = (0, _getOffset.default)(barRef.current);\n    const {\n      pageX,\n      pageY\n    } = (0, _utils2.getPosition)(event);\n    const offset = vertical ? barOffset.top + barOffset.height - pageY : pageX - barOffset.left;\n    const offsetValue = rtl && !vertical ? barOffset.width - offset : offset;\n    return getValueByOffset(offsetValue) + min;\n  }, [getValueByOffset, min, rtl, vertical]);\n\n  /**\n   * Callback function that is fired when the mousemove is triggered\n   */\n  const handleChangeValue = (0, _hooks.useEventCallback)(event => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const nextValue = getValidValue(getValueByPosition(event));\n    setValue(nextValue);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n\n  /**\n   * Callback function that is fired when the mouseup is triggered\n   */\n  const handleChangeCommitted = (0, _hooks.useEventCallback)(event => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const nextValue = getValidValue(getValueByPosition(event));\n    onChangeCommitted === null || onChangeCommitted === void 0 || onChangeCommitted(nextValue, event);\n  });\n  const handleClickBar = (0, _hooks.useEventCallback)(event => {\n    handleChangeValue(event);\n    handleChangeCommitted(event);\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    let nextValue;\n    const increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    const decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    switch (event.key) {\n      case 'Home':\n        nextValue = min;\n        break;\n      case 'End':\n        nextValue = max;\n        break;\n      case increaseKey:\n      case 'ArrowUp':\n        nextValue = Math.min(max, value + step);\n        break;\n      case decreaseKey:\n      case 'ArrowDown':\n        nextValue = Math.max(min, value - step);\n        break;\n      default:\n        return;\n    }\n\n    // Prevent scroll of the page\n    event.preventDefault();\n    setValue(nextValue);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notSelected\",\n      ref: ref,\n      placeholder: placeholder,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 262,\n        columnNumber: 7\n      }\n    }, value);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    role: \"presentation\",\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 269,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: barRef,\n    className: merge(barClassName, prefix('bar')),\n    onClick: handleClickBar,\n    \"data-testid\": \"slider-bar\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 270,\n      columnNumber: 7\n    }\n  }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {\n    rtl: rtl,\n    vertical: vertical,\n    start: 0,\n    end: (value - min) / (max - min) * 100,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 277,\n      columnNumber: 11\n    }\n  }), graduated && /*#__PURE__*/_react.default.createElement(_Graduated.default, {\n    step: step,\n    min: min,\n    max: max,\n    count: count,\n    value: value,\n    renderMark: renderMark,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 285,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Handle.default, {\n    position: (value - min) / (max - min) * 100,\n    className: handleClassName,\n    style: handleStyle,\n    disabled: disabled,\n    vertical: vertical,\n    tooltip: tooltip,\n    rtl: rtl,\n    value: value,\n    renderTooltip: renderTooltip,\n    onDragMove: handleChangeValue,\n    onKeyDown: handleKeyDown,\n    onDragEnd: handleChangeCommitted,\n    tabIndex: disabled || readOnly ? undefined : 0,\n    \"aria-orientation\": vertical ? 'vertical' : 'horizontal',\n    \"aria-valuenow\": value,\n    \"aria-disabled\": disabled,\n    \"aria-valuetext\": getAriaValueText ? getAriaValueText(value) : ariaValuetext,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-valuemax\": max,\n    \"aria-valuemin\": min,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 296,\n      columnNumber: 7\n    }\n  }, handleTitle));\n});\nSlider.displayName = 'Slider';\nvar _default = exports[\"default\"] = Slider;\n\n//# sourceURL=webpack://rsuite/./src/Slider/Slider.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _getOffset = _interopRequireDefault(__webpack_require__(/*! dom-lib/getOffset */ \"./node_modules/dom-lib/esm/getOffset.js\"));\nvar _ProgressBar = _interopRequireDefault(__webpack_require__(/*! ./ProgressBar */ \"./src/Slider/ProgressBar.tsx\"));\nvar _Handle = _interopRequireDefault(__webpack_require__(/*! ./Handle */ \"./src/Slider/Handle.tsx\"));\nvar _Graduated = _interopRequireDefault(__webpack_require__(/*! ./Graduated */ \"./src/Slider/Graduated.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Slider/utils.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Slider/Slider.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * A Slider is an interface for users to adjust a value in a specific range.\n *\n * @see https://rsuitejs.com/components/slider\n */\nconst Slider = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Slider', props);\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-valuetext': ariaValuetext,\n    as,\n    graduated,\n    className,\n    barClassName,\n    progress,\n    vertical,\n    disabled,\n    readOnly,\n    plaintext,\n    classPrefix = 'slider',\n    min = 0,\n    handleClassName,\n    handleStyle,\n    handleTitle,\n    tooltip = true,\n    step = 1,\n    size = 'sm',\n    defaultValue = 0,\n    value: valueProp,\n    max: maxProp = 100,\n    placeholder,\n    marks,\n    getAriaValueText,\n    renderTooltip,\n    renderMark,\n    onChange,\n    onChangeCommitted,\n    keepTooltipOpen,\n    ...rest\n  } = propsWithDefaults;\n  const barRef = (0, _react.useRef)(null);\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)('Slider');\n  const classes = merge(className, withPrefix({\n    vertical,\n    disabled,\n    graduated,\n    'with-mark': renderMark,\n    readonly: readOnly\n  }));\n  const max = (0, _react.useMemo)(() => (0, _utils2.precisionMath)(Math.floor((maxProp - min) / step) * step + min), [maxProp, min, step]);\n\n  /**\n   * Returns a valid value that does not exceed the specified range of values.\n   */\n  const getValidValue = (0, _react.useCallback)(value => {\n    return (0, _utils2.checkValue)(value, min, max);\n  }, [max, min]);\n  const [value, setValue] = (0, _hooks.useControlled)(getValidValue(valueProp), getValidValue(defaultValue));\n  const count = (0, _react.useMemo)(() => (0, _utils2.precisionMath)((max - min) / step), [max, min, step]);\n\n  // Get the height of the progress bar\n  const getBarHeight = (0, _react.useCallback)(() => barRef.current ? (0, _getHeight.default)(barRef.current) : 0, []);\n  // Get the width of the progress bar\n  const getBarWidth = (0, _react.useCallback)(() => barRef.current ? (0, _getWidth.default)(barRef.current) : 0, []);\n  const getValueByOffset = (0, _react.useCallback)(offset => {\n    let value = 0;\n    if (isNaN(offset)) {\n      return value;\n    }\n    if (vertical) {\n      const barHeight = getBarHeight();\n      value = Math.round(offset / (barHeight / count)) * step;\n    } else {\n      const barWidth = getBarWidth();\n      value = Math.round(offset / (barWidth / count)) * step;\n    }\n    return (0, _utils2.precisionMath)(value);\n  }, [count, getBarHeight, getBarWidth, step, vertical]);\n\n  /**\n   * A value within the valid range is calculated from the position triggered by the event.\n   */\n  const getValueByPosition = (0, _react.useCallback)(event => {\n    const barOffset = (0, _getOffset.default)(barRef.current);\n    const {\n      pageX,\n      pageY\n    } = (0, _utils2.getPosition)(event);\n    const offset = vertical ? barOffset.top + barOffset.height - pageY : pageX - barOffset.left;\n    const offsetValue = rtl && !vertical ? barOffset.width - offset : offset;\n    return getValueByOffset(offsetValue) + min;\n  }, [getValueByOffset, min, rtl, vertical]);\n\n  /**\n   * Callback function that is fired when the mousemove is triggered\n   */\n  const handleChangeValue = (0, _hooks.useEventCallback)(event => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const nextValue = getValidValue(getValueByPosition(event));\n    setValue(nextValue);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n\n  /**\n   * Callback function that is fired when the mouseup is triggered\n   */\n  const handleChangeCommitted = (0, _hooks.useEventCallback)(event => {\n    if (disabled || readOnly) {\n      return;\n    }\n    const nextValue = getValidValue(getValueByPosition(event));\n    onChangeCommitted === null || onChangeCommitted === void 0 || onChangeCommitted(nextValue, event);\n  });\n  const handleClickBar = (0, _hooks.useEventCallback)(event => {\n    handleChangeValue(event);\n    handleChangeCommitted(event);\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    let nextValue;\n    const increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    const decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    switch (event.key) {\n      case 'Home':\n        nextValue = min;\n        break;\n      case 'End':\n        nextValue = max;\n        break;\n      case increaseKey:\n      case 'ArrowUp':\n        nextValue = Math.min(max, value + step);\n        break;\n      case decreaseKey:\n      case 'ArrowDown':\n        nextValue = Math.max(min, value - step);\n        break;\n      default:\n        return;\n    }\n\n    // Prevent scroll of the page\n    event.preventDefault();\n    setValue(nextValue);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notSelected\",\n      ref: ref,\n      placeholder: placeholder,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 280,\n        columnNumber: 7\n      }\n    }, value);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    role: \"presentation\",\n    className: classes,\n    \"data-size\": size\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 287,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: barRef,\n    className: merge(barClassName, prefix('bar')),\n    onClick: handleClickBar,\n    \"data-testid\": \"slider-bar\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 288,\n      columnNumber: 7\n    }\n  }, progress && /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {\n    rtl: rtl,\n    vertical: vertical,\n    start: 0,\n    end: (value - min) / (max - min) * 100,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 295,\n      columnNumber: 11\n    }\n  }), graduated && /*#__PURE__*/_react.default.createElement(_Graduated.default, {\n    step: step,\n    min: min,\n    max: max,\n    count: count,\n    value: value,\n    marks: marks,\n    renderMark: renderMark,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 303,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Handle.default, {\n    position: (value - min) / (max - min) * 100,\n    className: handleClassName,\n    style: handleStyle,\n    disabled: disabled,\n    vertical: vertical,\n    tooltip: tooltip,\n    value: value,\n    keepTooltipOpen: keepTooltipOpen,\n    renderTooltip: renderTooltip,\n    onDragMove: handleChangeValue,\n    onKeyDown: handleKeyDown,\n    onDragEnd: handleChangeCommitted,\n    tabIndex: disabled || readOnly ? undefined : 0,\n    \"aria-orientation\": vertical ? 'vertical' : 'horizontal',\n    \"aria-valuenow\": value,\n    \"aria-disabled\": disabled,\n    \"aria-valuetext\": getAriaValueText ? getAriaValueText(value) : ariaValuetext,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-valuemax\": max,\n    \"aria-valuemin\": min,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 315,\n      columnNumber: 7\n    }\n  }, handleTitle));\n});\nSlider.displayName = 'Slider';\nvar _default = exports[\"default\"] = Slider;\n\n//# sourceURL=webpack://rsuite/./src/Slider/Slider.tsx?");
 
 /***/ }),
 
@@ -5262,7 +5295,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _PointerMoveTracker = _interopRequireDefault(__webpack_require__(/*! dom-lib/PointerMoveTracker */ \"./node_modules/dom-lib/esm/PointerMoveTracker.js\"));\nvar _addStyle = _interopRequireDefault(__webpack_require__(/*! dom-lib/addStyle */ \"./node_modules/dom-lib/esm/addStyle.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nconst useDrag = props => {\n  const rootRef = (0, _react.useRef)(null);\n  const tooltipRef = (0, _react.useRef)(null);\n  const {\n    tooltip,\n    disabled,\n    onDragMove,\n    onDragEnd,\n    onDragStart\n  } = props;\n  const [active, setActive] = (0, _react.useState)(false);\n  const moveTracker = (0, _react.useRef)(null);\n\n  // Release the move event\n  const releaseMoves = (0, _react.useCallback)(() => {\n    var _moveTracker$current;\n    (_moveTracker$current = moveTracker.current) === null || _moveTracker$current === void 0 || _moveTracker$current.releaseMoves();\n    moveTracker.current = null;\n  }, []);\n  const setTooltipPosition = (0, _react.useCallback)(() => {\n    const tooltipElement = tooltipRef.current;\n    if (tooltip && tooltipElement) {\n      const width = (0, _getWidth.default)(tooltipElement);\n      // Set the position of the tooltip\n      (0, _addStyle.default)(tooltipElement, 'left', `-${width / 2}px`);\n    }\n  }, [tooltip]);\n  const handleDragMove = (0, _hooks.useEventCallback)((_deltaX, _deltaY, event) => {\n    var _moveTracker$current2;\n    if ((_moveTracker$current2 = moveTracker.current) !== null && _moveTracker$current2 !== void 0 && _moveTracker$current2.isDragging()) {\n      var _rootRef$current;\n      onDragMove === null || onDragMove === void 0 || onDragMove(event, (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.dataset);\n      setTooltipPosition();\n    }\n  });\n  const handleDragEnd = (0, _hooks.useEventCallback)(event => {\n    var _rootRef$current2;\n    setActive(false);\n    releaseMoves();\n    onDragEnd === null || onDragEnd === void 0 || onDragEnd(event, (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.dataset);\n  });\n  const getMouseMoveTracker = (0, _react.useCallback)(() => {\n    return moveTracker.current || new _PointerMoveTracker.default(document.body, {\n      onMove: handleDragMove,\n      onMoveEnd: handleDragEnd,\n      useTouchEvent: true\n    });\n  }, [handleDragEnd, handleDragMove]);\n  const onMoveStart = (0, _hooks.useEventCallback)(event => {\n    var _moveTracker$current3, _rootRef$current3;\n    if (disabled) {\n      return;\n    }\n    moveTracker.current = getMouseMoveTracker();\n    (_moveTracker$current3 = moveTracker.current) === null || _moveTracker$current3 === void 0 || _moveTracker$current3.captureMoves(event);\n    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 || _rootRef$current3.focus();\n    setActive(true);\n    onDragStart === null || onDragStart === void 0 || onDragStart(event);\n  });\n  const onMouseEnter = (0, _hooks.useEventCallback)(() => {\n    setTooltipPosition();\n  });\n  (0, _react.useEffect)(() => {\n    return () => {\n      releaseMoves();\n    };\n  }, [releaseMoves]);\n  return {\n    active,\n    rootRef,\n    tooltipRef,\n    onMoveStart,\n    onMouseEnter\n  };\n};\nvar _default = exports[\"default\"] = useDrag;\n\n//# sourceURL=webpack://rsuite/./src/Slider/useDrag.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _PointerMoveTracker = _interopRequireDefault(__webpack_require__(/*! dom-lib/PointerMoveTracker */ \"./node_modules/dom-lib/esm/PointerMoveTracker.js\"));\nvar _addStyle = _interopRequireDefault(__webpack_require__(/*! dom-lib/addStyle */ \"./node_modules/dom-lib/esm/addStyle.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nconst useDrag = props => {\n  const rootRef = (0, _react.useRef)(null);\n  const tooltipRef = (0, _react.useRef)(null);\n  const {\n    tooltip,\n    disabled,\n    onDragMove,\n    onDragEnd,\n    onDragStart,\n    keepTooltipOpen\n  } = props;\n  const [active, setActive] = (0, _react.useState)(false);\n  const moveTracker = (0, _react.useRef)(null);\n\n  // Release the move event\n  const releaseMoves = (0, _react.useCallback)(() => {\n    var _moveTracker$current;\n    (_moveTracker$current = moveTracker.current) === null || _moveTracker$current === void 0 || _moveTracker$current.releaseMoves();\n    moveTracker.current = null;\n  }, []);\n  const setTooltipPosition = (0, _react.useCallback)(() => {\n    const tooltipElement = tooltipRef.current;\n    if (tooltip && tooltipElement) {\n      const width = (0, _getWidth.default)(tooltipElement);\n\n      // Set the position of the tooltip\n      (0, _addStyle.default)(tooltipElement, '--rs-tooltip-offset', `-${width / 2}px`);\n    }\n  }, [tooltip]);\n  const handleDragMove = (0, _hooks.useEventCallback)((_deltaX, _deltaY, event) => {\n    var _moveTracker$current2;\n    if ((_moveTracker$current2 = moveTracker.current) !== null && _moveTracker$current2 !== void 0 && _moveTracker$current2.isDragging()) {\n      var _rootRef$current;\n      onDragMove === null || onDragMove === void 0 || onDragMove(event, (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.dataset);\n      setTooltipPosition();\n    }\n  });\n  const handleDragEnd = (0, _hooks.useEventCallback)(event => {\n    var _rootRef$current2;\n    setActive(false);\n    releaseMoves();\n    onDragEnd === null || onDragEnd === void 0 || onDragEnd(event, (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.dataset);\n  });\n  const getMouseMoveTracker = (0, _react.useCallback)(() => {\n    return moveTracker.current || new _PointerMoveTracker.default(document.body, {\n      onMove: handleDragMove,\n      onMoveEnd: handleDragEnd,\n      useTouchEvent: true\n    });\n  }, [handleDragEnd, handleDragMove]);\n  const onMoveStart = (0, _hooks.useEventCallback)(event => {\n    var _moveTracker$current3, _rootRef$current3;\n    if (disabled) {\n      return;\n    }\n    moveTracker.current = getMouseMoveTracker();\n    (_moveTracker$current3 = moveTracker.current) === null || _moveTracker$current3 === void 0 || _moveTracker$current3.captureMoves(event);\n    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 || _rootRef$current3.focus();\n    setActive(true);\n    onDragStart === null || onDragStart === void 0 || onDragStart(event);\n  });\n  const onMouseEnter = (0, _hooks.useEventCallback)(() => {\n    setTooltipPosition();\n  });\n  (0, _react.useEffect)(() => {\n    if (keepTooltipOpen) {\n      onMouseEnter();\n    }\n    return () => {\n      releaseMoves();\n    };\n  }, [releaseMoves, keepTooltipOpen]);\n  return {\n    active,\n    rootRef,\n    tooltipRef,\n    onMoveStart,\n    onMouseEnter\n  };\n};\nvar _default = exports[\"default\"] = useDrag;\n\n//# sourceURL=webpack://rsuite/./src/Slider/useDrag.ts?");
 
 /***/ }),
 
@@ -5449,7 +5482,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _StepItem = _interopRequireDefault(__webpack_require__(/*! ./StepItem */ \"./src/Steps/StepItem.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Steps/Steps.tsx\";\nconst Subcomponents = {\n  Item: _StepItem.default\n};\n\n/**\n * The `Steps` component is used to guide users to complete tasks in accordance with the process.\n *\n * @see https://rsuitejs.com/components/steps\n */\nconst Steps = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Steps', props);\n  const {\n    as,\n    classPrefix = 'steps',\n    className,\n    children,\n    vertical,\n    small,\n    current = 0,\n    currentStatus = 'process',\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    prefix,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const horizontal = !vertical;\n  const classes = merge(className, withPrefix({\n    small,\n    vertical,\n    horizontal: !vertical\n  }));\n  const count = _utils.ReactChildren.count(children);\n  const items = _utils.ReactChildren.mapCloneElement(children, (item, index) => {\n    const itemStyles = {\n      flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,\n      maxWidth: index === count - 1 ? `${100 / count}%` : undefined\n    };\n    const itemProps = {\n      stepNumber: index + 1,\n      status: 'wait',\n      style: horizontal ? itemStyles : undefined,\n      ...item.props\n    };\n\n    // fix tail color\n    if (currentStatus === 'error' && index === current - 1) {\n      itemProps.className = prefix('next-error');\n    }\n    if (!item.props.status) {\n      if (index === current) {\n        itemProps.status = currentStatus;\n        itemProps.className = merge(itemProps.className, prefix('item-active'));\n      } else if (index < current) {\n        itemProps.status = 'finish';\n      }\n    }\n    return itemProps;\n  });\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 83,\n      columnNumber: 5\n    }\n  }), items);\n}, Subcomponents);\nSteps.displayName = 'Steps';\nvar _default = exports[\"default\"] = Steps;\n\n//# sourceURL=webpack://rsuite/./src/Steps/Steps.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _StepItem = _interopRequireDefault(__webpack_require__(/*! ./StepItem */ \"./src/Steps/StepItem.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Steps/Steps.tsx\";\nconst Subcomponents = {\n  Item: _StepItem.default\n};\n\n/**\n * The `Steps` component is used to guide users to complete tasks in accordance with the process.\n *\n * @see https://rsuitejs.com/components/steps\n */\nconst Steps = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Steps', props);\n  const {\n    as,\n    classPrefix = 'steps',\n    className,\n    children,\n    vertical,\n    small,\n    current = 0,\n    currentStatus = 'process',\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    prefix,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const horizontal = !vertical;\n  const classes = merge(className, withPrefix({\n    small,\n    vertical,\n    horizontal: !vertical\n  }));\n  const count = _utils.rch.count(children);\n  const items = _utils.rch.mapCloneElement(children, (item, index) => {\n    const itemStyles = {\n      flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,\n      maxWidth: index === count - 1 ? `${100 / count}%` : undefined\n    };\n    const itemProps = {\n      stepNumber: index + 1,\n      status: 'wait',\n      style: horizontal ? itemStyles : undefined,\n      ...item.props\n    };\n\n    // fix tail color\n    if (currentStatus === 'error' && index === current - 1) {\n      itemProps.className = prefix('next-error');\n    }\n    if (!item.props.status) {\n      if (index === current) {\n        itemProps.status = currentStatus;\n        itemProps.className = merge(itemProps.className, prefix('item-active'));\n      } else if (index < current) {\n        itemProps.status = 'finish';\n      }\n    }\n    return itemProps;\n  });\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 83,\n      columnNumber: 5\n    }\n  }), items);\n}, Subcomponents);\nSteps.displayName = 'Steps';\nvar _default = exports[\"default\"] = Steps;\n\n//# sourceURL=webpack://rsuite/./src/Steps/Steps.tsx?");
 
 /***/ }),
 
@@ -5559,7 +5592,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\nvar _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ \"./src/Tabs/Tab.tsx\"));\nvar _TabPanel = _interopRequireDefault(__webpack_require__(/*! ./TabPanel */ \"./src/Tabs/TabPanel.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Tabs/Tabs.tsx\";\n/**\n * Props for the Tabs component.\n */\n\nfunction getFocusableTabs(tablist) {\n  const tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');\n  return Array.from(tabs).filter(tab => !(tab.getAttribute('aria-disabled') === 'true'));\n}\nfunction getFocusedTab(tablist) {\n  const tabs = getFocusableTabs(tablist);\n  return tabs.find(tab => tab.getAttribute('aria-selected'));\n}\nfunction nextItem(tablist) {\n  if (!tablist) {\n    return null;\n  }\n  const item = getFocusedTab(tablist);\n  const items = getFocusableTabs(tablist);\n  if (!item) {\n    return items[0];\n  }\n  const nextItem = items[items.indexOf(item) + 1];\n  if (!nextItem || nextItem.getAttribute('role') !== 'tab') {\n    return items[0];\n  }\n  return nextItem;\n}\nfunction previousItem(tablist) {\n  if (!tablist) {\n    return null;\n  }\n  const item = getFocusedTab(tablist);\n  const items = getFocusableTabs(tablist);\n  if (!item) {\n    return items[items.length - 1];\n  }\n  const previousItem = items[items.indexOf(item) - 1];\n  if (!previousItem || previousItem.getAttribute('role') !== 'tab') {\n    return items[items.length - 1];\n  }\n  return previousItem;\n}\nconst renderPanels = (children, tabProps) => {\n  const {\n    id,\n    activeKey\n  } = tabProps;\n  return _utils.ReactChildren.map(children, child => {\n    const {\n      eventKey,\n      children\n    } = child.props;\n    const selected = eventKey === activeKey;\n    return /*#__PURE__*/_react.default.createElement(_TabPanel.default, {\n      \"aria-labelledby\": `${id}-${eventKey}`,\n      \"aria-hidden\": !selected,\n      id: `${id}-panel-${eventKey}`,\n      active: selected,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 119,\n        columnNumber: 7\n      }\n    }, children);\n  });\n};\nconst renderTabs = (children, tabPanelProps) => {\n  const {\n    id,\n    activeKey\n  } = tabPanelProps;\n  return _utils.ReactChildren.map(children, child => {\n    const {\n      eventKey,\n      title,\n      disabled,\n      icon\n    } = child.props;\n    const selected = eventKey === activeKey;\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, {\n      role: \"tab\",\n      as: \"button\",\n      type: \"button\",\n      \"aria-selected\": selected,\n      \"aria-controls\": `${id}-panel-${eventKey}`,\n      \"aria-disabled\": disabled,\n      \"data-event-key\": eventKey,\n      disabled: disabled,\n      icon: icon,\n      id: `${id}-${eventKey}`,\n      tabIndex: selected ? undefined : -1,\n      eventKey: eventKey,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 140,\n        columnNumber: 7\n      }\n    }, title);\n  });\n};\nconst Subcomponents = {\n  Tab: _Tab.default\n};\n\n/**\n * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.\n *\n * @version 5.53.0\n * @see https://rsuitejs.com/components/tabs\n */\nconst Tabs = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults,\n    rtl\n  } = (0, _CustomProvider.useCustom)('Tabs', props);\n  const {\n    as,\n    classPrefix = 'tabs',\n    appearance = 'tabs',\n    className,\n    children,\n    activeKey: activeKeyProp,\n    defaultActiveKey,\n    id: idProp,\n    reversed,\n    vertical,\n    onSelect,\n    ...rest\n  } = propsWithDefaults;\n  const id = (0, _hooks.useUniqueId)('tab-', idProp);\n  const [activeKey, setActiveKey] = (0, _hooks.useControlled)(activeKeyProp, defaultActiveKey);\n  const {\n    withPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const tablistRef = _react.default.useRef(null);\n  const handleSelect = (0, _hooks.useEventCallback)((eventKey, event) => {\n    setActiveKey(eventKey);\n    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    var _getFocusableTabs;\n    const target = event.target;\n    if (target.getAttribute('role') !== 'tab') {\n      return;\n    }\n    let previousItemKey = vertical ? 'ArrowUp' : 'ArrowLeft';\n    let nextItemKey = vertical ? 'ArrowDown' : 'ArrowRight';\n    if (!vertical && rtl) {\n      previousItemKey = 'ArrowRight';\n      nextItemKey = 'ArrowLeft';\n    }\n    let item = null;\n    switch (event.key) {\n      case previousItemKey:\n        item = previousItem(tablistRef.current);\n        event.preventDefault();\n        break;\n      case nextItemKey:\n        item = nextItem(tablistRef.current);\n        event.preventDefault();\n        break;\n      case 'Home':\n        item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];\n        event.preventDefault();\n        break;\n      case 'End':\n        {\n          const tabs = getFocusableTabs(tablistRef.current);\n          item = tabs[tabs.length - 1];\n          event.preventDefault();\n          break;\n        }\n    }\n    if (item) {\n      const eventKey = item ? item.dataset.eventKey : undefined;\n      handleSelect(eventKey, event);\n      item.focus();\n    }\n  });\n  const hasChildren = _react.default.Children.toArray(children).some(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.children);\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    className: merge(className, withPrefix({\n      reversed,\n      vertical\n    }))\n  }, rest, {\n    ref: ref,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 249,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Nav.default, {\n    role: \"tablist\",\n    \"aria-orientation\": vertical ? 'vertical' : 'horizontal',\n    reversed: reversed,\n    vertical: vertical,\n    appearance: appearance,\n    activeKey: activeKey,\n    onSelect: handleSelect,\n    onKeyDown: handleKeyDown,\n    ref: tablistRef,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 255,\n      columnNumber: 7\n    }\n  }, renderTabs(children, {\n    id,\n    activeKey\n  })), hasChildren && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix`content`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 269,\n      columnNumber: 9\n    }\n  }, renderPanels(children, {\n    id,\n    activeKey\n  })));\n}, Subcomponents);\nTabs.displayName = 'Tabs';\nvar _default = exports[\"default\"] = Tabs;\n\n//# sourceURL=webpack://rsuite/./src/Tabs/Tabs.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\nvar _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ \"./src/Tabs/Tab.tsx\"));\nvar _TabPanel = _interopRequireDefault(__webpack_require__(/*! ./TabPanel */ \"./src/Tabs/TabPanel.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Tabs/Tabs.tsx\";\n/**\n * Props for the Tabs component.\n */\n\nfunction getFocusableTabs(tablist) {\n  const tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');\n  return Array.from(tabs).filter(tab => !(tab.getAttribute('aria-disabled') === 'true'));\n}\nfunction getFocusedTab(tablist) {\n  const tabs = getFocusableTabs(tablist);\n  return tabs.find(tab => tab.getAttribute('aria-selected'));\n}\nfunction nextItem(tablist) {\n  if (!tablist) {\n    return null;\n  }\n  const item = getFocusedTab(tablist);\n  const items = getFocusableTabs(tablist);\n  if (!item) {\n    return items[0];\n  }\n  const nextItem = items[items.indexOf(item) + 1];\n  if (!nextItem || nextItem.getAttribute('role') !== 'tab') {\n    return items[0];\n  }\n  return nextItem;\n}\nfunction previousItem(tablist) {\n  if (!tablist) {\n    return null;\n  }\n  const item = getFocusedTab(tablist);\n  const items = getFocusableTabs(tablist);\n  if (!item) {\n    return items[items.length - 1];\n  }\n  const previousItem = items[items.indexOf(item) - 1];\n  if (!previousItem || previousItem.getAttribute('role') !== 'tab') {\n    return items[items.length - 1];\n  }\n  return previousItem;\n}\nconst renderPanels = (children, tabProps) => {\n  const {\n    id,\n    activeKey\n  } = tabProps;\n  return _utils.rch.map(children, child => {\n    const {\n      eventKey,\n      children\n    } = child.props;\n    const selected = eventKey === activeKey;\n    return /*#__PURE__*/_react.default.createElement(_TabPanel.default, {\n      \"aria-labelledby\": `${id}-${eventKey}`,\n      \"aria-hidden\": !selected,\n      id: `${id}-panel-${eventKey}`,\n      active: selected,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 119,\n        columnNumber: 7\n      }\n    }, children);\n  });\n};\nconst renderTabs = (children, tabPanelProps) => {\n  const {\n    id,\n    activeKey\n  } = tabPanelProps;\n  return _utils.rch.map(children, child => {\n    const {\n      eventKey,\n      title,\n      disabled,\n      icon\n    } = child.props;\n    const selected = eventKey === activeKey;\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, {\n      role: \"tab\",\n      as: \"button\",\n      type: \"button\",\n      \"aria-selected\": selected,\n      \"aria-controls\": `${id}-panel-${eventKey}`,\n      \"aria-disabled\": disabled,\n      \"data-event-key\": eventKey,\n      disabled: disabled,\n      icon: icon,\n      id: `${id}-${eventKey}`,\n      tabIndex: selected ? undefined : -1,\n      eventKey: eventKey,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 140,\n        columnNumber: 7\n      }\n    }, title);\n  });\n};\nconst Subcomponents = {\n  Tab: _Tab.default\n};\n\n/**\n * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.\n *\n * @version 5.53.0\n * @see https://rsuitejs.com/components/tabs\n */\nconst Tabs = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults,\n    rtl\n  } = (0, _CustomProvider.useCustom)('Tabs', props);\n  const {\n    as,\n    classPrefix = 'tabs',\n    appearance = 'tabs',\n    className,\n    children,\n    activeKey: activeKeyProp,\n    defaultActiveKey,\n    id: idProp,\n    reversed,\n    vertical,\n    onSelect,\n    ...rest\n  } = propsWithDefaults;\n  const id = (0, _hooks.useUniqueId)('tab-', idProp);\n  const [activeKey, setActiveKey] = (0, _hooks.useControlled)(activeKeyProp, defaultActiveKey);\n  const {\n    withPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const tablistRef = _react.default.useRef(null);\n  const handleSelect = (0, _hooks.useEventCallback)((eventKey, event) => {\n    setActiveKey(eventKey);\n    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    var _getFocusableTabs;\n    const target = event.target;\n    if (target.getAttribute('role') !== 'tab') {\n      return;\n    }\n    let previousItemKey = vertical ? 'ArrowUp' : 'ArrowLeft';\n    let nextItemKey = vertical ? 'ArrowDown' : 'ArrowRight';\n    if (!vertical && rtl) {\n      previousItemKey = 'ArrowRight';\n      nextItemKey = 'ArrowLeft';\n    }\n    let item = null;\n    switch (event.key) {\n      case previousItemKey:\n        item = previousItem(tablistRef.current);\n        event.preventDefault();\n        break;\n      case nextItemKey:\n        item = nextItem(tablistRef.current);\n        event.preventDefault();\n        break;\n      case 'Home':\n        item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];\n        event.preventDefault();\n        break;\n      case 'End':\n        {\n          const tabs = getFocusableTabs(tablistRef.current);\n          item = tabs[tabs.length - 1];\n          event.preventDefault();\n          break;\n        }\n    }\n    if (item) {\n      const eventKey = item ? item.dataset.eventKey : undefined;\n      handleSelect(eventKey, event);\n      item.focus();\n    }\n  });\n  const hasChildren = _react.default.Children.toArray(children).some(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.children);\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    className: merge(className, withPrefix({\n      reversed,\n      vertical\n    }))\n  }, rest, {\n    ref: ref,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 249,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Nav.default, {\n    role: \"tablist\",\n    \"aria-orientation\": vertical ? 'vertical' : 'horizontal',\n    reversed: reversed,\n    vertical: vertical,\n    appearance: appearance,\n    activeKey: activeKey,\n    onSelect: handleSelect,\n    onKeyDown: handleKeyDown,\n    ref: tablistRef,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 255,\n      columnNumber: 7\n    }\n  }, renderTabs(children, {\n    id,\n    activeKey\n  })), hasChildren && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix`content`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 269,\n      columnNumber: 9\n    }\n  }, renderPanels(children, {\n    id,\n    activeKey\n  })));\n}, Subcomponents);\nTabs.displayName = 'Tabs';\nvar _default = exports[\"default\"] = Tabs;\n\n//# sourceURL=webpack://rsuite/./src/Tabs/Tabs.tsx?");
 
 /***/ }),
 
@@ -5735,7 +5768,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _some = _interopRequireDefault(__webpack_require__(/*! lodash/some */ \"./node_modules/lodash/some.js\"));\nvar _TimelineItem = _interopRequireDefault(__webpack_require__(/*! ./TimelineItem */ \"./src/Timeline/TimelineItem.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Timeline/Timeline.tsx\";\nconst ACTIVE_FIRST = index => index === 0;\nconst ACTIVE_LAST = (index, totalItemsCount) => index === totalItemsCount - 1;\nconst SubcomponentsAndStaticMethods = {\n  Item: _TimelineItem.default,\n  ACTIVE_FIRST,\n  ACTIVE_LAST\n};\n\n/**\n * The `Timeline` component is used to display a list of items in chronological order.\n *\n * @see https://rsuitejs.com/components/timeline\n */\nconst Timeline = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Timeline', props);\n  const {\n    as = 'ul',\n    children,\n    classPrefix = 'timeline',\n    className,\n    align = 'left',\n    endless,\n    isItemActive = ACTIVE_LAST,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const count = _utils.ReactChildren.count(children);\n  const withTime = (0, _some.default)(_react.default.Children.toArray(children), item => {\n    var _item$props;\n    return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;\n  });\n  const classes = merge(className, withPrefix(`align-${align}`, {\n    endless,\n    'with-time': withTime\n  }));\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 66,\n      columnNumber: 7\n    }\n  }), _utils.ReactChildren.mapCloneElement(children, (_child, index) => ({\n    last: index + 1 === count,\n    INTERNAL_active: isItemActive(index, count),\n    align\n  })));\n}, SubcomponentsAndStaticMethods);\nTimeline.displayName = 'Timeline';\nvar _default = exports[\"default\"] = Timeline;\n\n//# sourceURL=webpack://rsuite/./src/Timeline/Timeline.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _some = _interopRequireDefault(__webpack_require__(/*! lodash/some */ \"./node_modules/lodash/some.js\"));\nvar _TimelineItem = _interopRequireDefault(__webpack_require__(/*! ./TimelineItem */ \"./src/Timeline/TimelineItem.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Timeline/Timeline.tsx\";\nconst ACTIVE_FIRST = index => index === 0;\nconst ACTIVE_LAST = (index, totalItemsCount) => index === totalItemsCount - 1;\nconst SubcomponentsAndStaticMethods = {\n  Item: _TimelineItem.default,\n  ACTIVE_FIRST,\n  ACTIVE_LAST\n};\n\n/**\n * The `Timeline` component is used to display a list of items in chronological order.\n *\n * @see https://rsuitejs.com/components/timeline\n */\nconst Timeline = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Timeline', props);\n  const {\n    as = 'ul',\n    children,\n    classPrefix = 'timeline',\n    className,\n    align = 'left',\n    endless,\n    isItemActive = ACTIVE_LAST,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const count = _utils.rch.count(children);\n  const withTime = (0, _some.default)(_react.default.Children.toArray(children), item => {\n    var _item$props;\n    return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;\n  });\n  const classes = merge(className, withPrefix(`align-${align}`, {\n    endless,\n    'with-time': withTime\n  }));\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 66,\n      columnNumber: 7\n    }\n  }), _utils.rch.mapCloneElement(children, (_child, index) => ({\n    last: index + 1 === count,\n    INTERNAL_active: isItemActive(index, count),\n    align\n  })));\n}, SubcomponentsAndStaticMethods);\nTimeline.displayName = 'Timeline';\nvar _default = exports[\"default\"] = Timeline;\n\n//# sourceURL=webpack://rsuite/./src/Timeline/Timeline.tsx?");
 
 /***/ }),
 
@@ -5768,7 +5801,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Loader = _interopRequireDefault(__webpack_require__(/*! ../Loader */ \"./src/Loader/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Toggle/Toggle.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `Toggle` component is used to activate or deactivate an element.\n *\n * @see https://rsuitejs.com/components/toggle\n */\nconst Toggle = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Toggle', props);\n  const {\n    as = 'label',\n    disabled,\n    readOnly,\n    loading = false,\n    plaintext,\n    children,\n    className,\n    color,\n    checkedChildren,\n    unCheckedChildren,\n    classPrefix = 'toggle',\n    checked: checkedProp,\n    defaultChecked,\n    size = 'md',\n    locale,\n    onChange,\n    ...rest\n  } = propsWithDefaults;\n  const inputRef = (0, _react.useRef)(null);\n  const [checked, setChecked] = (0, _hooks.useControlled)(checkedProp, defaultChecked);\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix(size, color, {\n    checked,\n    disabled,\n    loading\n  }));\n  const inner = checked ? checkedChildren : unCheckedChildren;\n  const label = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;\n  const labelId = (0, _hooks.useUniqueId)('rs-label');\n  const innerId = inner ? labelId + '-inner' : undefined;\n  const labelledby = children ? labelId : innerId;\n  const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)(rest);\n  const handleInputChange = (0, _hooks.useEventCallback)(e => {\n    if (disabled || readOnly || loading) {\n      return;\n    }\n    const {\n      checked\n    } = e.target;\n    setChecked(checked);\n    onChange === null || onChange === void 0 || onChange(checked, e);\n  });\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 125,\n        columnNumber: 12\n      }\n    }, inner || label);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes\n  }, restProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 129,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({}, htmlInputProps, {\n    ref: inputRef,\n    type: \"checkbox\",\n    checked: checkedProp,\n    defaultChecked: defaultChecked,\n    disabled: disabled,\n    readOnly: readOnly,\n    onChange: handleInputChange,\n    className: prefix('input'),\n    role: \"switch\",\n    \"aria-checked\": checked,\n    \"aria-disabled\": disabled,\n    \"aria-labelledby\": labelledby,\n    \"aria-label\": labelledby ? undefined : label,\n    \"aria-busy\": loading || undefined,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 130,\n      columnNumber: 7\n    }\n  })), /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('presentation'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 147,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('inner'),\n    id: innerId,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 148,\n      columnNumber: 9\n    }\n  }, inner), loading && /*#__PURE__*/_react.default.createElement(_Loader.default, {\n    className: prefix('loader'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 151,\n      columnNumber: 21\n    }\n  })), children && /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('label'),\n    id: labelId,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 154,\n      columnNumber: 9\n    }\n  }, children));\n});\nToggle.displayName = 'Toggle';\nvar _default = exports[\"default\"] = Toggle;\n\n//# sourceURL=webpack://rsuite/./src/Toggle/Toggle.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Loader = _interopRequireDefault(__webpack_require__(/*! ../Loader */ \"./src/Loader/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Toggle/Toggle.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `Toggle` component is used to activate or deactivate an element.\n *\n * @see https://rsuitejs.com/components/toggle\n */\nconst Toggle = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Toggle', props);\n  const {\n    as = 'label',\n    disabled,\n    readOnly,\n    loading = false,\n    plaintext,\n    children,\n    className,\n    color,\n    checkedChildren,\n    unCheckedChildren,\n    classPrefix = 'toggle',\n    checked: checkedProp,\n    defaultChecked,\n    size = 'md',\n    locale,\n    label = children,\n    labelPlacement = 'end',\n    onChange,\n    ...rest\n  } = propsWithDefaults;\n  const inputRef = (0, _react.useRef)(null);\n  const [checked, setChecked] = (0, _hooks.useControlled)(checkedProp, defaultChecked);\n  const {\n    merge,\n    withPrefix,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix(size, color, {\n    checked,\n    disabled,\n    loading\n  }));\n  const inner = checked ? checkedChildren : unCheckedChildren;\n  const innerLabel = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;\n  const labelId = (0, _hooks.useUniqueId)('rs-label');\n  const innerId = inner ? labelId + '-inner' : undefined;\n  const labelledby = label ? labelId : innerId;\n  const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)(rest);\n  const handleInputChange = (0, _hooks.useEventCallback)(e => {\n    if (disabled || readOnly || loading) {\n      return;\n    }\n    const {\n      checked\n    } = e.target;\n    setChecked(checked);\n    onChange === null || onChange === void 0 || onChange(checked, e);\n  });\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 137,\n        columnNumber: 12\n      }\n    }, inner || innerLabel);\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    className: classes,\n    \"data-placement\": labelPlacement\n  }, restProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 141,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"input\", (0, _extends2.default)({}, htmlInputProps, {\n    ref: inputRef,\n    type: \"checkbox\",\n    checked: checkedProp,\n    defaultChecked: defaultChecked,\n    disabled: disabled,\n    readOnly: readOnly,\n    onChange: handleInputChange,\n    className: prefix('input'),\n    role: \"switch\",\n    \"aria-checked\": checked,\n    \"aria-disabled\": disabled,\n    \"aria-labelledby\": labelledby,\n    \"aria-label\": labelledby ? undefined : innerLabel,\n    \"aria-busy\": loading || undefined,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 142,\n      columnNumber: 7\n    }\n  })), /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('track'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 159,\n      columnNumber: 7\n    }\n  }, inner && /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('inner'),\n    id: innerId,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 161,\n      columnNumber: 11\n    }\n  }, inner), loading && /*#__PURE__*/_react.default.createElement(_Loader.default, {\n    className: prefix('loader'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 165,\n      columnNumber: 21\n    }\n  })), label && /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('label'),\n    id: labelId,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 168,\n      columnNumber: 9\n    }\n  }, label));\n});\nToggle.displayName = 'Toggle';\nvar _default = exports[\"default\"] = Toggle;\n\n//# sourceURL=webpack://rsuite/./src/Toggle/Toggle.tsx?");
 
 /***/ }),
 
@@ -6120,7 +6153,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _useTreeWithChildren = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useTreeWithChildren */ \"./src/Tree/hooks/useTreeWithChildren.ts\"));\nvar _useFlattenTree = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useFlattenTree */ \"./src/Tree/hooks/useFlattenTree.ts\"));\nvar _useFocusState = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFocusState */ \"./src/TreePicker/hooks/useFocusState.ts\"));\nvar _useExpandTree = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useExpandTree */ \"./src/Tree/hooks/useExpandTree.ts\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeView */ \"./src/Tree/TreeView.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../internals/Box */ \"./src/internals/Box/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../Tree/utils */ \"./src/Tree/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _TreeProvider = __webpack_require__(/*! ../internals/Tree/TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/TreePicker/TreePicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `TreePicker` component is used for selecting single options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/tree-picker/\n */\nconst TreePicker = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('TreePicker', props);\n  const {\n    as,\n    appearance = 'default',\n    classPrefix = 'picker',\n    cleanable = true,\n    childrenKey = 'children',\n    data = [],\n    disabled,\n    defaultValue,\n    defaultExpandAll = false,\n    disabledItemValues = [],\n    defaultExpandItemValues = [],\n    expandItemValues: controlledExpandItemValues,\n    id,\n    locale,\n    labelKey = 'label',\n    placeholder,\n    placement = 'bottomStart',\n    style,\n    searchKeyword,\n    searchable = true,\n    showIndentLine,\n    popupClassName,\n    popupStyle,\n    popupAutoWidth = true,\n    treeHeight = 320,\n    valueKey = 'value',\n    virtualized = false,\n    value: controlledValue,\n    listProps,\n    toggleAs,\n    searchBy,\n    getChildren,\n    onClean,\n    onSearch,\n    onSelect,\n    onSelectItem,\n    onChange,\n    onExpand,\n    onEnter,\n    onExit,\n    onEntered,\n    renderValue,\n    renderTree,\n    renderTreeIcon,\n    renderTreeNode,\n    renderExtraFooter,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    list,\n    searchInput,\n    treeView\n  } = (0, _Picker.usePickerRef)(ref);\n  const [value, setValue] = (0, _hooks.useControlled)(controlledValue, defaultValue);\n  const itemDataKeys = {\n    childrenKey,\n    labelKey,\n    valueKey\n  };\n  const {\n    treeData,\n    loadingNodeValues,\n    appendChild\n  } = (0, _useTreeWithChildren.default)(data, itemDataKeys);\n  const flattenedNodes = (0, _useFlattenTree.default)(treeData, {\n    ...itemDataKeys\n  });\n  const {\n    expandItemValues,\n    handleExpandTreeNode\n  } = (0, _useExpandTree.default)(data, {\n    ...itemDataKeys,\n    defaultExpandAll,\n    defaultExpandItemValues,\n    controlledExpandItemValues,\n    onExpand,\n    getChildren,\n    appendChild\n  });\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const activeNode = (0, _utils2.getTreeActiveNode)(flattenedNodes, value, valueKey);\n  const {\n    register,\n    focusFirstNode,\n    focusActiveNode\n  } = (0, _TreeProvider.useTreeImperativeHandle)();\n  const {\n    active,\n    focusItemValue,\n    setFocusItemValue,\n    triggerProps\n  } = (0, _useFocusState.default)({\n    focusActiveNode,\n    target,\n    value,\n    onEnter,\n    onExit,\n    onEntered\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((treeNode, value, event) => {\n    var _target$current, _trigger$current, _trigger$current$clos;\n    setFocusItemValue(value);\n    onSelect === null || onSelect === void 0 || onSelect(treeNode, value, event);\n    (_target$current = target.current) === null || _target$current === void 0 || _target$current.focus();\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    const target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    setValue(null);\n    onChange === null || onChange === void 0 || onChange(null, event);\n  });\n  const handleTreePressEnter = (0, _hooks.useEventCallback)(event => {\n    if ((0, _isNil.default)(focusItemValue)) {\n      return;\n    }\n    const activeItem = (0, _utils2.getActiveItem)(focusItemValue, flattenedNodes, valueKey);\n    handleSelect(activeItem, event);\n  });\n  const handleTreeKeyDown = (0, _hooks.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      del: handleClean,\n      down: () => focusFirstNode(),\n      enter: handleTreePressEnter\n    });\n  });\n  const onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !activeNode || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: handleTreeKeyDown,\n    ...rest\n  });\n  const handleChange = (0, _hooks.useEventCallback)((nextValue, event) => {\n    setValue(nextValue);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n  const treeContext = (0, _react.useMemo)(() => ({\n    register,\n    props: {\n      labelKey,\n      valueKey,\n      childrenKey,\n      virtualized,\n      renderTreeIcon,\n      renderTreeNode\n    }\n  }), [childrenKey, labelKey, valueKey, virtualized, register, renderTreeIcon, renderTreeNode]);\n  const tree = /*#__PURE__*/_react.default.createElement(_TreeProvider.TreeProvider, {\n    value: treeContext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 216,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n    ref: treeView,\n    value: value,\n    data: treeData,\n    disabledItemValues: disabledItemValues,\n    expandItemValues: expandItemValues,\n    showIndentLine: showIndentLine,\n    searchable: searchable,\n    searchKeyword: searchKeyword,\n    searchBy: searchBy,\n    searchInputRef: searchInput,\n    loadingNodeValues: loadingNodeValues,\n    flattenedNodes: flattenedNodes,\n    listProps: listProps,\n    listRef: list,\n    locale: locale,\n    height: treeHeight,\n    onExpand: handleExpandTreeNode,\n    onSearch: onSearch,\n    onChange: handleChange,\n    onSelect: handleSelect,\n    onSelectItem: onSelectItem,\n    onFocusItem: setFocusItemValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 217,\n      columnNumber: 7\n    }\n  }));\n  const renderTreeView = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName, prefix('tree-menu'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: popupStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 249,\n        columnNumber: 7\n      }\n    }, renderTree ? renderTree(tree) : tree, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValidValue = !(0, _isNil.default)(activeNode) || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  let selectedElement = placeholder;\n  if (hasValidValue) {\n    const node = activeNode !== null && activeNode !== void 0 ? activeNode : {};\n    selectedElement = node[labelKey];\n    if ((0, _isFunction.default)(renderValue) && value) {\n      selectedElement = renderValue(value, node, selectedElement);\n      if ((0, _isNil.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({\n    ...props,\n    classPrefix,\n    appearance,\n    hasValue: hasValidValue,\n    name: 'tree',\n    cleanable\n  });\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({\n    id: id,\n    popupType: \"tree\",\n    pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),\n    ref: trigger,\n    placement: placement,\n    speaker: renderTreeView\n  }, triggerProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 291,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Box.default, {\n    as: as,\n    className: classes,\n    style: style,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 300,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys, 'cascade']), {\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    as: toggleAs,\n    disabled: disabled,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 301,\n      columnNumber: 9\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));\n});\nTreePicker.displayName = 'TreePicker';\nvar _default = exports[\"default\"] = TreePicker;\n\n//# sourceURL=webpack://rsuite/./src/TreePicker/TreePicker.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _useTreeWithChildren = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useTreeWithChildren */ \"./src/Tree/hooks/useTreeWithChildren.ts\"));\nvar _useFlattenTree = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useFlattenTree */ \"./src/Tree/hooks/useFlattenTree.ts\"));\nvar _useFocusState = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFocusState */ \"./src/TreePicker/hooks/useFocusState.ts\"));\nvar _useExpandTree = _interopRequireDefault(__webpack_require__(/*! ../Tree/hooks/useExpandTree */ \"./src/Tree/hooks/useExpandTree.ts\"));\nvar _TreeView = _interopRequireDefault(__webpack_require__(/*! ../Tree/TreeView */ \"./src/Tree/TreeView.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../Tree/utils */ \"./src/Tree/utils/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _TreeProvider = __webpack_require__(/*! ../internals/Tree/TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/TreePicker/TreePicker.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * The `TreePicker` component is used for selecting single options which are organized in a tree structure.\n *\n * @see https://rsuitejs.com/components/tree-picker/\n */\nconst TreePicker = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('TreePicker', props);\n  const {\n    as,\n    appearance = 'default',\n    classPrefix = 'picker',\n    cleanable = true,\n    childrenKey = 'children',\n    data = [],\n    disabled,\n    defaultValue,\n    defaultExpandAll = false,\n    disabledItemValues = [],\n    defaultExpandItemValues = [],\n    expandItemValues: controlledExpandItemValues,\n    id,\n    block,\n    className,\n    locale,\n    labelKey = 'label',\n    placeholder,\n    placement = 'bottomStart',\n    style,\n    searchKeyword,\n    searchable = true,\n    showIndentLine,\n    popupClassName,\n    popupStyle,\n    popupAutoWidth = true,\n    treeHeight = 320,\n    valueKey = 'value',\n    virtualized = false,\n    value: controlledValue,\n    listProps,\n    toggleAs,\n    searchBy,\n    getChildren,\n    onClean,\n    onSearch,\n    onSelect,\n    onSelectItem,\n    onChange,\n    onExpand,\n    onEnter,\n    onExit,\n    onEntered,\n    renderValue,\n    renderTree,\n    renderTreeIcon,\n    renderTreeNode,\n    renderExtraFooter,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    trigger,\n    root,\n    target,\n    overlay,\n    list,\n    searchInput,\n    treeView\n  } = (0, _Picker.usePickerRef)(ref);\n  const [value, setValue] = (0, _hooks.useControlled)(controlledValue, defaultValue);\n  const itemDataKeys = {\n    childrenKey,\n    labelKey,\n    valueKey\n  };\n  const {\n    treeData,\n    loadingNodeValues,\n    appendChild\n  } = (0, _useTreeWithChildren.default)(data, itemDataKeys);\n  const flattenedNodes = (0, _useFlattenTree.default)(treeData, {\n    ...itemDataKeys\n  });\n  const {\n    expandItemValues,\n    handleExpandTreeNode\n  } = (0, _useExpandTree.default)(data, {\n    ...itemDataKeys,\n    defaultExpandAll,\n    defaultExpandItemValues,\n    controlledExpandItemValues,\n    onExpand,\n    getChildren,\n    appendChild\n  });\n  const {\n    prefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const activeNode = (0, _utils2.getTreeActiveNode)(flattenedNodes, value, valueKey);\n  const {\n    register,\n    focusFirstNode,\n    focusActiveNode\n  } = (0, _TreeProvider.useTreeImperativeHandle)();\n  const {\n    active,\n    focusItemValue,\n    setFocusItemValue,\n    triggerProps\n  } = (0, _useFocusState.default)({\n    focusActiveNode,\n    target,\n    value,\n    onEnter,\n    onExit,\n    onEntered\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((treeNode, value, event) => {\n    var _target$current, _trigger$current, _trigger$current$clos;\n    setFocusItemValue(value);\n    onSelect === null || onSelect === void 0 || onSelect(treeNode, value, event);\n    (_target$current = target.current) === null || _target$current === void 0 || _target$current.focus();\n    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);\n  });\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    const target = event.target;\n    // exclude searchbox\n    if (target.matches('input[role=\"searchbox\"]') || disabled || !cleanable) {\n      return;\n    }\n    setValue(null);\n    onChange === null || onChange === void 0 || onChange(null, event);\n  });\n  const handleTreePressEnter = (0, _hooks.useEventCallback)(event => {\n    if ((0, _isNil.default)(focusItemValue)) {\n      return;\n    }\n    const activeItem = (0, _utils2.getActiveItem)(focusItemValue, flattenedNodes, valueKey);\n    handleSelect(activeItem, event);\n  });\n  const handleTreeKeyDown = (0, _hooks.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      del: handleClean,\n      down: () => focusFirstNode(),\n      enter: handleTreePressEnter\n    });\n  });\n  const onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)({\n    toggle: !activeNode || !active,\n    trigger,\n    target,\n    overlay,\n    searchInput,\n    active,\n    onExit: handleClean,\n    onMenuKeyDown: handleTreeKeyDown,\n    ...rest\n  });\n  const handleChange = (0, _hooks.useEventCallback)((nextValue, event) => {\n    setValue(nextValue);\n    onChange === null || onChange === void 0 || onChange(nextValue, event);\n  });\n  const treeContext = (0, _react.useMemo)(() => ({\n    register,\n    props: {\n      labelKey,\n      valueKey,\n      childrenKey,\n      virtualized,\n      renderTreeIcon,\n      renderTreeNode\n    }\n  }), [childrenKey, labelKey, valueKey, virtualized, register, renderTreeIcon, renderTreeNode]);\n  const tree = /*#__PURE__*/_react.default.createElement(_TreeProvider.TreeProvider, {\n    value: treeContext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 214,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_TreeView.default, {\n    ref: treeView,\n    value: value,\n    data: treeData,\n    disabledItemValues: disabledItemValues,\n    expandItemValues: expandItemValues,\n    showIndentLine: showIndentLine,\n    searchable: searchable,\n    searchKeyword: searchKeyword,\n    searchBy: searchBy,\n    searchInputRef: searchInput,\n    loadingNodeValues: loadingNodeValues,\n    flattenedNodes: flattenedNodes,\n    listProps: listProps,\n    listRef: list,\n    locale: locale,\n    height: treeHeight,\n    onExpand: handleExpandTreeNode,\n    onSearch: onSearch,\n    onChange: handleChange,\n    onSelect: handleSelect,\n    onSelectItem: onSelectItem,\n    onFocusItem: setFocusItemValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 215,\n      columnNumber: 7\n    }\n  }));\n  const renderTreeView = (positionProps, speakerRef) => {\n    const {\n      className\n    } = positionProps;\n    const classes = merge(className, popupClassName, prefix('tree-menu'));\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      autoWidth: popupAutoWidth,\n      className: classes,\n      style: popupStyle,\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      onKeyDown: onPickerKeydown,\n      target: trigger,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 247,\n        columnNumber: 7\n      }\n    }, renderTree ? renderTree(tree) : tree, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());\n  };\n\n  /**\n   * 1.Have a value and the value is valid.\n   * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.\n   */\n  let hasValidValue = !(0, _isNil.default)(activeNode) || !(0, _isNil.default)(value) && (0, _isFunction.default)(renderValue);\n  let selectedElement = placeholder;\n  if (hasValidValue) {\n    const node = activeNode !== null && activeNode !== void 0 ? activeNode : {};\n    selectedElement = node[labelKey];\n    if ((0, _isFunction.default)(renderValue) && value) {\n      selectedElement = renderValue(value, node, selectedElement);\n      if ((0, _isNil.default)(selectedElement)) {\n        hasValidValue = false;\n      }\n    }\n  }\n  return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {\n    as: as,\n    id: id,\n    name: \"tree\",\n    block: block,\n    disabled: disabled,\n    appearance: appearance,\n    popupType: \"tree\",\n    triggerProps: {\n      ...(0, _pick.default)(props, _Picker.triggerPropKeys),\n      ...triggerProps\n    },\n    ref: trigger,\n    placement: placement,\n    speaker: renderTreeView,\n    rootRef: root,\n    style: style,\n    classPrefix: classPrefix,\n    className: className,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 280,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({\n    ref: target,\n    appearance: appearance,\n    onKeyDown: onPickerKeydown,\n    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),\n    cleanable: cleanable && !disabled,\n    as: toggleAs,\n    disabled: disabled,\n    hasValue: hasValidValue,\n    active: active,\n    placement: placement,\n    inputValue: value,\n    focusItemValue: focusItemValue\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 300,\n      columnNumber: 7\n    }\n  }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));\n});\nTreePicker.displayName = 'TreePicker';\nvar _default = exports[\"default\"] = TreePicker;\n\n//# sourceURL=webpack://rsuite/./src/TreePicker/TreePicker.tsx?");
 
 /***/ }),
 
@@ -6263,7 +6296,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nvar _Text = __webpack_require__(/*! ./Text */ \"./src/Text/index.tsx\");\nObject.keys(_Text).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Text[key]) return;\n  exports[key] = _Text[key];\n});\nvar _Heading = __webpack_require__(/*! ./Heading */ \"./src/Heading/index.tsx\");\nObject.keys(_Heading).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Heading[key]) return;\n  exports[key] = _Heading[key];\n});\nvar _HeadingGroup = __webpack_require__(/*! ./HeadingGroup */ \"./src/HeadingGroup/index.tsx\");\nObject.keys(_HeadingGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _HeadingGroup[key]) return;\n  exports[key] = _HeadingGroup[key];\n});\nvar _Highlight = __webpack_require__(/*! ./Highlight */ \"./src/Highlight/index.tsx\");\nObject.keys(_Highlight).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Highlight[key]) return;\n  exports[key] = _Highlight[key];\n});\nvar _SafeAnchor = __webpack_require__(/*! ./SafeAnchor */ \"./src/SafeAnchor/index.tsx\");\nObject.keys(_SafeAnchor).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _SafeAnchor[key]) return;\n  exports[key] = _SafeAnchor[key];\n});\nvar _Kbd = __webpack_require__(/*! ./Kbd */ \"./src/Kbd/index.tsx\");\nObject.keys(_Kbd).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Kbd[key]) return;\n  exports[key] = _Kbd[key];\n});\nvar _Button = __webpack_require__(/*! ./Button */ \"./src/Button/index.tsx\");\nObject.keys(_Button).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Button[key]) return;\n  exports[key] = _Button[key];\n});\nvar _IconButton = __webpack_require__(/*! ./IconButton */ \"./src/IconButton/index.tsx\");\nObject.keys(_IconButton).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _IconButton[key]) return;\n  exports[key] = _IconButton[key];\n});\nvar _ButtonToolbar = __webpack_require__(/*! ./ButtonToolbar */ \"./src/ButtonToolbar/index.tsx\");\nObject.keys(_ButtonToolbar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _ButtonToolbar[key]) return;\n  exports[key] = _ButtonToolbar[key];\n});\nvar _ButtonGroup = __webpack_require__(/*! ./ButtonGroup */ \"./src/ButtonGroup/index.tsx\");\nObject.keys(_ButtonGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _ButtonGroup[key]) return;\n  exports[key] = _ButtonGroup[key];\n});\nvar _Whisper = __webpack_require__(/*! ./Whisper */ \"./src/Whisper/index.tsx\");\nObject.keys(_Whisper).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Whisper[key]) return;\n  exports[key] = _Whisper[key];\n});\nvar _Tooltip = __webpack_require__(/*! ./Tooltip */ \"./src/Tooltip/index.tsx\");\nObject.keys(_Tooltip).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Tooltip[key]) return;\n  exports[key] = _Tooltip[key];\n});\nvar _Popover = __webpack_require__(/*! ./Popover */ \"./src/Popover/index.tsx\");\nObject.keys(_Popover).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Popover[key]) return;\n  exports[key] = _Popover[key];\n});\nvar _Modal = __webpack_require__(/*! ./Modal */ \"./src/Modal/index.tsx\");\nObject.keys(_Modal).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Modal[key]) return;\n  exports[key] = _Modal[key];\n});\nvar _Drawer = __webpack_require__(/*! ./Drawer */ \"./src/Drawer/index.tsx\");\nObject.keys(_Drawer).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Drawer[key]) return;\n  exports[key] = _Drawer[key];\n});\nvar _Notification = __webpack_require__(/*! ./Notification */ \"./src/Notification/index.tsx\");\nObject.keys(_Notification).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Notification[key]) return;\n  exports[key] = _Notification[key];\n});\nvar _Message = __webpack_require__(/*! ./Message */ \"./src/Message/index.tsx\");\nObject.keys(_Message).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Message[key]) return;\n  exports[key] = _Message[key];\n});\nvar _Loader = __webpack_require__(/*! ./Loader */ \"./src/Loader/index.tsx\");\nObject.keys(_Loader).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Loader[key]) return;\n  exports[key] = _Loader[key];\n});\nvar _Placeholder = __webpack_require__(/*! ./Placeholder */ \"./src/Placeholder/index.tsx\");\nObject.keys(_Placeholder).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Placeholder[key]) return;\n  exports[key] = _Placeholder[key];\n});\nvar _Badge = __webpack_require__(/*! ./Badge */ \"./src/Badge/index.tsx\");\nObject.keys(_Badge).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Badge[key]) return;\n  exports[key] = _Badge[key];\n});\nvar _toaster = __webpack_require__(/*! ./toaster */ \"./src/toaster/index.tsx\");\nObject.keys(_toaster).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _toaster[key]) return;\n  exports[key] = _toaster[key];\n});\nvar _useToaster = __webpack_require__(/*! ./useToaster */ \"./src/useToaster/index.tsx\");\nObject.keys(_useToaster).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _useToaster[key]) return;\n  exports[key] = _useToaster[key];\n});\nvar _Progress = __webpack_require__(/*! ./Progress */ \"./src/Progress/index.tsx\");\nObject.keys(_Progress).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Progress[key]) return;\n  exports[key] = _Progress[key];\n});\nvar _Avatar = __webpack_require__(/*! ./Avatar */ \"./src/Avatar/index.tsx\");\nObject.keys(_Avatar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Avatar[key]) return;\n  exports[key] = _Avatar[key];\n});\nvar _AvatarGroup = __webpack_require__(/*! ./AvatarGroup */ \"./src/AvatarGroup/index.tsx\");\nObject.keys(_AvatarGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _AvatarGroup[key]) return;\n  exports[key] = _AvatarGroup[key];\n});\nvar _Image = __webpack_require__(/*! ./Image */ \"./src/Image/index.tsx\");\nObject.keys(_Image).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Image[key]) return;\n  exports[key] = _Image[key];\n});\nvar _Dropdown = __webpack_require__(/*! ./Dropdown */ \"./src/Dropdown/index.tsx\");\nObject.keys(_Dropdown).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Dropdown[key]) return;\n  exports[key] = _Dropdown[key];\n});\nvar _Menu = __webpack_require__(/*! ./Menu */ \"./src/Menu/index.tsx\");\nObject.keys(_Menu).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Menu[key]) return;\n  exports[key] = _Menu[key];\n});\nvar _Nav = __webpack_require__(/*! ./Nav */ \"./src/Nav/index.tsx\");\nObject.keys(_Nav).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Nav[key]) return;\n  exports[key] = _Nav[key];\n});\nvar _Navbar = __webpack_require__(/*! ./Navbar */ \"./src/Navbar/index.tsx\");\nObject.keys(_Navbar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Navbar[key]) return;\n  exports[key] = _Navbar[key];\n});\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/index.tsx\");\nObject.keys(_Sidenav).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Sidenav[key]) return;\n  exports[key] = _Sidenav[key];\n});\nvar _Breadcrumb = __webpack_require__(/*! ./Breadcrumb */ \"./src/Breadcrumb/index.tsx\");\nObject.keys(_Breadcrumb).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Breadcrumb[key]) return;\n  exports[key] = _Breadcrumb[key];\n});\nvar _Pagination = __webpack_require__(/*! ./Pagination */ \"./src/Pagination/index.tsx\");\nObject.keys(_Pagination).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Pagination[key]) return;\n  exports[key] = _Pagination[key];\n});\nvar _Steps = __webpack_require__(/*! ./Steps */ \"./src/Steps/index.tsx\");\nObject.keys(_Steps).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Steps[key]) return;\n  exports[key] = _Steps[key];\n});\nvar _Form = __webpack_require__(/*! ./Form */ \"./src/Form/index.tsx\");\nObject.keys(_Form).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Form[key]) return;\n  exports[key] = _Form[key];\n});\nvar _FormStack = __webpack_require__(/*! ./FormStack */ \"./src/FormStack/index.tsx\");\nObject.keys(_FormStack).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormStack[key]) return;\n  exports[key] = _FormStack[key];\n});\nvar _FormGroup = __webpack_require__(/*! ./FormGroup */ \"./src/FormGroup/index.tsx\");\nObject.keys(_FormGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormGroup[key]) return;\n  exports[key] = _FormGroup[key];\n});\nvar _FormErrorMessage = __webpack_require__(/*! ./FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\");\nObject.keys(_FormErrorMessage).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormErrorMessage[key]) return;\n  exports[key] = _FormErrorMessage[key];\n});\nvar _FormControlLabel = __webpack_require__(/*! ./FormControlLabel */ \"./src/FormControlLabel/index.tsx\");\nObject.keys(_FormControlLabel).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormControlLabel[key]) return;\n  exports[key] = _FormControlLabel[key];\n});\nvar _FormHelpText = __webpack_require__(/*! ./FormHelpText */ \"./src/FormHelpText/index.tsx\");\nObject.keys(_FormHelpText).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormHelpText[key]) return;\n  exports[key] = _FormHelpText[key];\n});\nvar _FormControl = __webpack_require__(/*! ./FormControl */ \"./src/FormControl/index.tsx\");\nObject.keys(_FormControl).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormControl[key]) return;\n  exports[key] = _FormControl[key];\n});\nvar _Toggle = __webpack_require__(/*! ./Toggle */ \"./src/Toggle/index.tsx\");\nObject.keys(_Toggle).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Toggle[key]) return;\n  exports[key] = _Toggle[key];\n});\nvar _Input = __webpack_require__(/*! ./Input */ \"./src/Input/index.tsx\");\nObject.keys(_Input).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Input[key]) return;\n  exports[key] = _Input[key];\n});\nvar _MaskedInput = __webpack_require__(/*! ./MaskedInput */ \"./src/MaskedInput/index.tsx\");\nObject.keys(_MaskedInput).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _MaskedInput[key]) return;\n  exports[key] = _MaskedInput[key];\n});\nvar _InputNumber = __webpack_require__(/*! ./InputNumber */ \"./src/InputNumber/index.tsx\");\nObject.keys(_InputNumber).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _InputNumber[key]) return;\n  exports[key] = _InputNumber[key];\n});\nvar _InputGroup = __webpack_require__(/*! ./InputGroup */ \"./src/InputGroup/index.tsx\");\nObject.keys(_InputGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _InputGroup[key]) return;\n  exports[key] = _InputGroup[key];\n});\nvar _Checkbox = __webpack_require__(/*! ./Checkbox */ \"./src/Checkbox/index.tsx\");\nObject.keys(_Checkbox).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Checkbox[key]) return;\n  exports[key] = _Checkbox[key];\n});\nvar _CheckboxGroup = __webpack_require__(/*! ./CheckboxGroup */ \"./src/CheckboxGroup/index.tsx\");\nObject.keys(_CheckboxGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CheckboxGroup[key]) return;\n  exports[key] = _CheckboxGroup[key];\n});\nvar _Radio = __webpack_require__(/*! ./Radio */ \"./src/Radio/index.tsx\");\nObject.keys(_Radio).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Radio[key]) return;\n  exports[key] = _Radio[key];\n});\nvar _RadioGroup = __webpack_require__(/*! ./RadioGroup */ \"./src/RadioGroup/index.tsx\");\nObject.keys(_RadioGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _RadioGroup[key]) return;\n  exports[key] = _RadioGroup[key];\n});\nvar _RadioTile = __webpack_require__(/*! ./RadioTile */ \"./src/RadioTile/index.tsx\");\nObject.keys(_RadioTile).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _RadioTile[key]) return;\n  exports[key] = _RadioTile[key];\n});\nvar _RadioTileGroup = __webpack_require__(/*! ./RadioTileGroup */ \"./src/RadioTileGroup/index.tsx\");\nObject.keys(_RadioTileGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _RadioTileGroup[key]) return;\n  exports[key] = _RadioTileGroup[key];\n});\nvar _SelectPicker = __webpack_require__(/*! ./SelectPicker */ \"./src/SelectPicker/index.tsx\");\nObject.keys(_SelectPicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _SelectPicker[key]) return;\n  exports[key] = _SelectPicker[key];\n});\nvar _CheckPicker = __webpack_require__(/*! ./CheckPicker */ \"./src/CheckPicker/index.tsx\");\nObject.keys(_CheckPicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CheckPicker[key]) return;\n  exports[key] = _CheckPicker[key];\n});\nvar _InputPicker = __webpack_require__(/*! ./InputPicker */ \"./src/InputPicker/index.tsx\");\nObject.keys(_InputPicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _InputPicker[key]) return;\n  exports[key] = _InputPicker[key];\n});\nvar _TagPicker = __webpack_require__(/*! ./TagPicker */ \"./src/TagPicker/index.tsx\");\nObject.keys(_TagPicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TagPicker[key]) return;\n  exports[key] = _TagPicker[key];\n});\nvar _TagInput = __webpack_require__(/*! ./TagInput */ \"./src/TagInput/index.tsx\");\nObject.keys(_TagInput).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TagInput[key]) return;\n  exports[key] = _TagInput[key];\n});\nvar _TreePicker = __webpack_require__(/*! ./TreePicker */ \"./src/TreePicker/index.tsx\");\nObject.keys(_TreePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TreePicker[key]) return;\n  exports[key] = _TreePicker[key];\n});\nvar _CheckTreePicker = __webpack_require__(/*! ./CheckTreePicker */ \"./src/CheckTreePicker/index.tsx\");\nObject.keys(_CheckTreePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CheckTreePicker[key]) return;\n  exports[key] = _CheckTreePicker[key];\n});\nvar _Cascader = __webpack_require__(/*! ./Cascader */ \"./src/Cascader/index.tsx\");\nObject.keys(_Cascader).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Cascader[key]) return;\n  exports[key] = _Cascader[key];\n});\nvar _MultiCascader = __webpack_require__(/*! ./MultiCascader */ \"./src/MultiCascader/index.tsx\");\nObject.keys(_MultiCascader).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _MultiCascader[key]) return;\n  exports[key] = _MultiCascader[key];\n});\nvar _DateInput = __webpack_require__(/*! ./DateInput */ \"./src/DateInput/index.tsx\");\nObject.keys(_DateInput).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DateInput[key]) return;\n  exports[key] = _DateInput[key];\n});\nvar _DatePicker = __webpack_require__(/*! ./DatePicker */ \"./src/DatePicker/index.tsx\");\nObject.keys(_DatePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DatePicker[key]) return;\n  exports[key] = _DatePicker[key];\n});\nvar _TimePicker = __webpack_require__(/*! ./TimePicker */ \"./src/TimePicker/index.tsx\");\nObject.keys(_TimePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TimePicker[key]) return;\n  exports[key] = _TimePicker[key];\n});\nvar _DateRangeInput = __webpack_require__(/*! ./DateRangeInput */ \"./src/DateRangeInput/index.tsx\");\nObject.keys(_DateRangeInput).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DateRangeInput[key]) return;\n  exports[key] = _DateRangeInput[key];\n});\nvar _DateRangePicker = __webpack_require__(/*! ./DateRangePicker */ \"./src/DateRangePicker/index.tsx\");\nObject.keys(_DateRangePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DateRangePicker[key]) return;\n  exports[key] = _DateRangePicker[key];\n});\nvar _TimeRangePicker = __webpack_require__(/*! ./TimeRangePicker */ \"./src/TimeRangePicker/index.tsx\");\nObject.keys(_TimeRangePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TimeRangePicker[key]) return;\n  exports[key] = _TimeRangePicker[key];\n});\nvar _AutoComplete = __webpack_require__(/*! ./AutoComplete */ \"./src/AutoComplete/index.tsx\");\nObject.keys(_AutoComplete).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _AutoComplete[key]) return;\n  exports[key] = _AutoComplete[key];\n});\nvar _Uploader = __webpack_require__(/*! ./Uploader */ \"./src/Uploader/index.tsx\");\nObject.keys(_Uploader).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Uploader[key]) return;\n  exports[key] = _Uploader[key];\n});\nvar _Slider = __webpack_require__(/*! ./Slider */ \"./src/Slider/index.tsx\");\nObject.keys(_Slider).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Slider[key]) return;\n  exports[key] = _Slider[key];\n});\nvar _RangeSlider = __webpack_require__(/*! ./RangeSlider */ \"./src/RangeSlider/index.tsx\");\nObject.keys(_RangeSlider).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _RangeSlider[key]) return;\n  exports[key] = _RangeSlider[key];\n});\nvar _Rate = __webpack_require__(/*! ./Rate */ \"./src/Rate/index.tsx\");\nObject.keys(_Rate).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Rate[key]) return;\n  exports[key] = _Rate[key];\n});\nvar _InlineEdit = __webpack_require__(/*! ./InlineEdit */ \"./src/InlineEdit/index.tsx\");\nObject.keys(_InlineEdit).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _InlineEdit[key]) return;\n  exports[key] = _InlineEdit[key];\n});\nvar _Tree = __webpack_require__(/*! ./Tree */ \"./src/Tree/index.tsx\");\nObject.keys(_Tree).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Tree[key]) return;\n  exports[key] = _Tree[key];\n});\nvar _CheckTree = __webpack_require__(/*! ./CheckTree */ \"./src/CheckTree/index.tsx\");\nObject.keys(_CheckTree).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CheckTree[key]) return;\n  exports[key] = _CheckTree[key];\n});\nvar _Card = __webpack_require__(/*! ./Card */ \"./src/Card/index.tsx\");\nObject.keys(_Card).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Card[key]) return;\n  exports[key] = _Card[key];\n});\nvar _CardGroup = __webpack_require__(/*! ./CardGroup */ \"./src/CardGroup/index.tsx\");\nObject.keys(_CardGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CardGroup[key]) return;\n  exports[key] = _CardGroup[key];\n});\nvar _CascadeTree = __webpack_require__(/*! ./CascadeTree */ \"./src/CascadeTree/index.tsx\");\nObject.keys(_CascadeTree).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CascadeTree[key]) return;\n  exports[key] = _CascadeTree[key];\n});\nvar _MultiCascadeTree = __webpack_require__(/*! ./MultiCascadeTree */ \"./src/MultiCascadeTree/index.tsx\");\nObject.keys(_MultiCascadeTree).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _MultiCascadeTree[key]) return;\n  exports[key] = _MultiCascadeTree[key];\n});\nvar _Panel = __webpack_require__(/*! ./Panel */ \"./src/Panel/index.tsx\");\nObject.keys(_Panel).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Panel[key]) return;\n  exports[key] = _Panel[key];\n});\nvar _PanelGroup = __webpack_require__(/*! ./PanelGroup */ \"./src/PanelGroup/index.tsx\");\nObject.keys(_PanelGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _PanelGroup[key]) return;\n  exports[key] = _PanelGroup[key];\n});\nvar _Stat = __webpack_require__(/*! ./Stat */ \"./src/Stat/index.tsx\");\nObject.keys(_Stat).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Stat[key]) return;\n  exports[key] = _Stat[key];\n});\nvar _StatGroup = __webpack_require__(/*! ./StatGroup */ \"./src/StatGroup/index.tsx\");\nObject.keys(_StatGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _StatGroup[key]) return;\n  exports[key] = _StatGroup[key];\n});\nvar _Table = __webpack_require__(/*! ./Table */ \"./src/Table/index.tsx\");\nObject.keys(_Table).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Table[key]) return;\n  exports[key] = _Table[key];\n});\nvar _Timeline = __webpack_require__(/*! ./Timeline */ \"./src/Timeline/index.tsx\");\nObject.keys(_Timeline).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Timeline[key]) return;\n  exports[key] = _Timeline[key];\n});\nvar _Tag = __webpack_require__(/*! ./Tag */ \"./src/Tag/index.tsx\");\nObject.keys(_Tag).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Tag[key]) return;\n  exports[key] = _Tag[key];\n});\nvar _TagGroup = __webpack_require__(/*! ./TagGroup */ \"./src/TagGroup/index.tsx\");\nObject.keys(_TagGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TagGroup[key]) return;\n  exports[key] = _TagGroup[key];\n});\nvar _List = __webpack_require__(/*! ./List */ \"./src/List/index.tsx\");\nObject.keys(_List).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _List[key]) return;\n  exports[key] = _List[key];\n});\nvar _Calendar = __webpack_require__(/*! ./Calendar */ \"./src/Calendar/index.tsx\");\nObject.keys(_Calendar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Calendar[key]) return;\n  exports[key] = _Calendar[key];\n});\nvar _Carousel = __webpack_require__(/*! ./Carousel */ \"./src/Carousel/index.tsx\");\nObject.keys(_Carousel).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Carousel[key]) return;\n  exports[key] = _Carousel[key];\n});\nvar _Box = __webpack_require__(/*! ./Box */ \"./src/Box/index.tsx\");\nObject.keys(_Box).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Box[key]) return;\n  exports[key] = _Box[key];\n});\nvar _Grid = __webpack_require__(/*! ./Grid */ \"./src/Grid/index.tsx\");\nObject.keys(_Grid).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Grid[key]) return;\n  exports[key] = _Grid[key];\n});\nvar _FlexboxGrid = __webpack_require__(/*! ./FlexboxGrid */ \"./src/FlexboxGrid/index.tsx\");\nObject.keys(_FlexboxGrid).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FlexboxGrid[key]) return;\n  exports[key] = _FlexboxGrid[key];\n});\nvar _Container = __webpack_require__(/*! ./Container */ \"./src/Container/index.tsx\");\nObject.keys(_Container).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Container[key]) return;\n  exports[key] = _Container[key];\n});\nvar _Content = __webpack_require__(/*! ./Content */ \"./src/Content/index.tsx\");\nObject.keys(_Content).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Content[key]) return;\n  exports[key] = _Content[key];\n});\nvar _Header = __webpack_require__(/*! ./Header */ \"./src/Header/index.tsx\");\nObject.keys(_Header).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Header[key]) return;\n  exports[key] = _Header[key];\n});\nvar _Sidebar = __webpack_require__(/*! ./Sidebar */ \"./src/Sidebar/index.tsx\");\nObject.keys(_Sidebar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Sidebar[key]) return;\n  exports[key] = _Sidebar[key];\n});\nvar _Footer = __webpack_require__(/*! ./Footer */ \"./src/Footer/index.tsx\");\nObject.keys(_Footer).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Footer[key]) return;\n  exports[key] = _Footer[key];\n});\nvar _Center = __webpack_require__(/*! ./Center */ \"./src/Center/index.tsx\");\nObject.keys(_Center).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Center[key]) return;\n  exports[key] = _Center[key];\n});\nvar _Divider = __webpack_require__(/*! ./Divider */ \"./src/Divider/index.tsx\");\nObject.keys(_Divider).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Divider[key]) return;\n  exports[key] = _Divider[key];\n});\nvar _Stack = __webpack_require__(/*! ./Stack */ \"./src/Stack/index.tsx\");\nObject.keys(_Stack).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Stack[key]) return;\n  exports[key] = _Stack[key];\n});\nvar _Schema = __webpack_require__(/*! ./Schema */ \"./src/Schema/index.ts\");\nObject.keys(_Schema).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Schema[key]) return;\n  exports[key] = _Schema[key];\n});\nvar _Animation = __webpack_require__(/*! ./Animation */ \"./src/Animation/index.tsx\");\nObject.keys(_Animation).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Animation[key]) return;\n  exports[key] = _Animation[key];\n});\nvar _DOMHelper = __webpack_require__(/*! ./DOMHelper */ \"./src/DOMHelper/index.ts\");\nObject.keys(_DOMHelper).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DOMHelper[key]) return;\n  exports[key] = _DOMHelper[key];\n});\nvar _Affix = __webpack_require__(/*! ./Affix */ \"./src/Affix/index.tsx\");\nObject.keys(_Affix).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Affix[key]) return;\n  exports[key] = _Affix[key];\n});\nvar _CustomProvider = __webpack_require__(/*! ./CustomProvider */ \"./src/CustomProvider/index.tsx\");\nObject.keys(_CustomProvider).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CustomProvider[key]) return;\n  exports[key] = _CustomProvider[key];\n});\nvar _useMediaQuery = __webpack_require__(/*! ./useMediaQuery */ \"./src/useMediaQuery/index.ts\");\nObject.keys(_useMediaQuery).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _useMediaQuery[key]) return;\n  exports[key] = _useMediaQuery[key];\n});\nvar _useBreakpointValue = __webpack_require__(/*! ./useBreakpointValue */ \"./src/useBreakpointValue/index.ts\");\nObject.keys(_useBreakpointValue).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _useBreakpointValue[key]) return;\n  exports[key] = _useBreakpointValue[key];\n});\nvar _VisuallyHidden = __webpack_require__(/*! ./VisuallyHidden */ \"./src/VisuallyHidden/index.tsx\");\nObject.keys(_VisuallyHidden).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _VisuallyHidden[key]) return;\n  exports[key] = _VisuallyHidden[key];\n});\nvar _Tabs = __webpack_require__(/*! ./Tabs */ \"./src/Tabs/index.tsx\");\nObject.keys(_Tabs).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Tabs[key]) return;\n  exports[key] = _Tabs[key];\n});\nvar _Accordion = __webpack_require__(/*! ./Accordion */ \"./src/Accordion/index.tsx\");\nObject.keys(_Accordion).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Accordion[key]) return;\n  exports[key] = _Accordion[key];\n});\n\n//# sourceURL=webpack://rsuite/./src/index.tsx?");
+eval("\n\nexports.__esModule = true;\nvar _Text = __webpack_require__(/*! ./Text */ \"./src/Text/index.tsx\");\nObject.keys(_Text).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Text[key]) return;\n  exports[key] = _Text[key];\n});\nvar _Heading = __webpack_require__(/*! ./Heading */ \"./src/Heading/index.tsx\");\nObject.keys(_Heading).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Heading[key]) return;\n  exports[key] = _Heading[key];\n});\nvar _HeadingGroup = __webpack_require__(/*! ./HeadingGroup */ \"./src/HeadingGroup/index.tsx\");\nObject.keys(_HeadingGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _HeadingGroup[key]) return;\n  exports[key] = _HeadingGroup[key];\n});\nvar _Highlight = __webpack_require__(/*! ./Highlight */ \"./src/Highlight/index.tsx\");\nObject.keys(_Highlight).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Highlight[key]) return;\n  exports[key] = _Highlight[key];\n});\nvar _Kbd = __webpack_require__(/*! ./Kbd */ \"./src/Kbd/index.tsx\");\nObject.keys(_Kbd).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Kbd[key]) return;\n  exports[key] = _Kbd[key];\n});\nvar _Button = __webpack_require__(/*! ./Button */ \"./src/Button/index.tsx\");\nObject.keys(_Button).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Button[key]) return;\n  exports[key] = _Button[key];\n});\nvar _IconButton = __webpack_require__(/*! ./IconButton */ \"./src/IconButton/index.tsx\");\nObject.keys(_IconButton).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _IconButton[key]) return;\n  exports[key] = _IconButton[key];\n});\nvar _ButtonToolbar = __webpack_require__(/*! ./ButtonToolbar */ \"./src/ButtonToolbar/index.tsx\");\nObject.keys(_ButtonToolbar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _ButtonToolbar[key]) return;\n  exports[key] = _ButtonToolbar[key];\n});\nvar _ButtonGroup = __webpack_require__(/*! ./ButtonGroup */ \"./src/ButtonGroup/index.tsx\");\nObject.keys(_ButtonGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _ButtonGroup[key]) return;\n  exports[key] = _ButtonGroup[key];\n});\nvar _Whisper = __webpack_require__(/*! ./Whisper */ \"./src/Whisper/index.tsx\");\nObject.keys(_Whisper).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Whisper[key]) return;\n  exports[key] = _Whisper[key];\n});\nvar _Tooltip = __webpack_require__(/*! ./Tooltip */ \"./src/Tooltip/index.tsx\");\nObject.keys(_Tooltip).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Tooltip[key]) return;\n  exports[key] = _Tooltip[key];\n});\nvar _Popover = __webpack_require__(/*! ./Popover */ \"./src/Popover/index.tsx\");\nObject.keys(_Popover).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Popover[key]) return;\n  exports[key] = _Popover[key];\n});\nvar _Modal = __webpack_require__(/*! ./Modal */ \"./src/Modal/index.tsx\");\nObject.keys(_Modal).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Modal[key]) return;\n  exports[key] = _Modal[key];\n});\nvar _Drawer = __webpack_require__(/*! ./Drawer */ \"./src/Drawer/index.tsx\");\nObject.keys(_Drawer).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Drawer[key]) return;\n  exports[key] = _Drawer[key];\n});\nvar _Notification = __webpack_require__(/*! ./Notification */ \"./src/Notification/index.tsx\");\nObject.keys(_Notification).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Notification[key]) return;\n  exports[key] = _Notification[key];\n});\nvar _Message = __webpack_require__(/*! ./Message */ \"./src/Message/index.tsx\");\nObject.keys(_Message).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Message[key]) return;\n  exports[key] = _Message[key];\n});\nvar _Loader = __webpack_require__(/*! ./Loader */ \"./src/Loader/index.tsx\");\nObject.keys(_Loader).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Loader[key]) return;\n  exports[key] = _Loader[key];\n});\nvar _Placeholder = __webpack_require__(/*! ./Placeholder */ \"./src/Placeholder/index.tsx\");\nObject.keys(_Placeholder).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Placeholder[key]) return;\n  exports[key] = _Placeholder[key];\n});\nvar _Badge = __webpack_require__(/*! ./Badge */ \"./src/Badge/index.tsx\");\nObject.keys(_Badge).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Badge[key]) return;\n  exports[key] = _Badge[key];\n});\nvar _toaster = __webpack_require__(/*! ./toaster */ \"./src/toaster/index.tsx\");\nObject.keys(_toaster).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _toaster[key]) return;\n  exports[key] = _toaster[key];\n});\nvar _useToaster = __webpack_require__(/*! ./useToaster */ \"./src/useToaster/index.tsx\");\nObject.keys(_useToaster).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _useToaster[key]) return;\n  exports[key] = _useToaster[key];\n});\nvar _Progress = __webpack_require__(/*! ./Progress */ \"./src/Progress/index.tsx\");\nObject.keys(_Progress).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Progress[key]) return;\n  exports[key] = _Progress[key];\n});\nvar _Avatar = __webpack_require__(/*! ./Avatar */ \"./src/Avatar/index.tsx\");\nObject.keys(_Avatar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Avatar[key]) return;\n  exports[key] = _Avatar[key];\n});\nvar _AvatarGroup = __webpack_require__(/*! ./AvatarGroup */ \"./src/AvatarGroup/index.tsx\");\nObject.keys(_AvatarGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _AvatarGroup[key]) return;\n  exports[key] = _AvatarGroup[key];\n});\nvar _Image = __webpack_require__(/*! ./Image */ \"./src/Image/index.tsx\");\nObject.keys(_Image).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Image[key]) return;\n  exports[key] = _Image[key];\n});\nvar _Dropdown = __webpack_require__(/*! ./Dropdown */ \"./src/Dropdown/index.tsx\");\nObject.keys(_Dropdown).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Dropdown[key]) return;\n  exports[key] = _Dropdown[key];\n});\nvar _Menu = __webpack_require__(/*! ./Menu */ \"./src/Menu/index.tsx\");\nObject.keys(_Menu).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Menu[key]) return;\n  exports[key] = _Menu[key];\n});\nvar _Nav = __webpack_require__(/*! ./Nav */ \"./src/Nav/index.tsx\");\nObject.keys(_Nav).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Nav[key]) return;\n  exports[key] = _Nav[key];\n});\nvar _Navbar = __webpack_require__(/*! ./Navbar */ \"./src/Navbar/index.tsx\");\nObject.keys(_Navbar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Navbar[key]) return;\n  exports[key] = _Navbar[key];\n});\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/index.tsx\");\nObject.keys(_Sidenav).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Sidenav[key]) return;\n  exports[key] = _Sidenav[key];\n});\nvar _Breadcrumb = __webpack_require__(/*! ./Breadcrumb */ \"./src/Breadcrumb/index.tsx\");\nObject.keys(_Breadcrumb).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Breadcrumb[key]) return;\n  exports[key] = _Breadcrumb[key];\n});\nvar _Pagination = __webpack_require__(/*! ./Pagination */ \"./src/Pagination/index.tsx\");\nObject.keys(_Pagination).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Pagination[key]) return;\n  exports[key] = _Pagination[key];\n});\nvar _Steps = __webpack_require__(/*! ./Steps */ \"./src/Steps/index.tsx\");\nObject.keys(_Steps).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Steps[key]) return;\n  exports[key] = _Steps[key];\n});\nvar _Link = __webpack_require__(/*! ./Link */ \"./src/Link/index.tsx\");\nObject.keys(_Link).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Link[key]) return;\n  exports[key] = _Link[key];\n});\nvar _Form = __webpack_require__(/*! ./Form */ \"./src/Form/index.tsx\");\nObject.keys(_Form).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Form[key]) return;\n  exports[key] = _Form[key];\n});\nvar _FormStack = __webpack_require__(/*! ./FormStack */ \"./src/FormStack/index.tsx\");\nObject.keys(_FormStack).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormStack[key]) return;\n  exports[key] = _FormStack[key];\n});\nvar _FormGroup = __webpack_require__(/*! ./FormGroup */ \"./src/FormGroup/index.tsx\");\nObject.keys(_FormGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormGroup[key]) return;\n  exports[key] = _FormGroup[key];\n});\nvar _FormErrorMessage = __webpack_require__(/*! ./FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\");\nObject.keys(_FormErrorMessage).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormErrorMessage[key]) return;\n  exports[key] = _FormErrorMessage[key];\n});\nvar _FormControlLabel = __webpack_require__(/*! ./FormControlLabel */ \"./src/FormControlLabel/index.tsx\");\nObject.keys(_FormControlLabel).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormControlLabel[key]) return;\n  exports[key] = _FormControlLabel[key];\n});\nvar _FormHelpText = __webpack_require__(/*! ./FormHelpText */ \"./src/FormHelpText/index.tsx\");\nObject.keys(_FormHelpText).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormHelpText[key]) return;\n  exports[key] = _FormHelpText[key];\n});\nvar _FormControl = __webpack_require__(/*! ./FormControl */ \"./src/FormControl/index.tsx\");\nObject.keys(_FormControl).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FormControl[key]) return;\n  exports[key] = _FormControl[key];\n});\nvar _Toggle = __webpack_require__(/*! ./Toggle */ \"./src/Toggle/index.tsx\");\nObject.keys(_Toggle).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Toggle[key]) return;\n  exports[key] = _Toggle[key];\n});\nvar _Input = __webpack_require__(/*! ./Input */ \"./src/Input/index.tsx\");\nObject.keys(_Input).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Input[key]) return;\n  exports[key] = _Input[key];\n});\nvar _MaskedInput = __webpack_require__(/*! ./MaskedInput */ \"./src/MaskedInput/index.tsx\");\nObject.keys(_MaskedInput).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _MaskedInput[key]) return;\n  exports[key] = _MaskedInput[key];\n});\nvar _InputNumber = __webpack_require__(/*! ./InputNumber */ \"./src/InputNumber/index.tsx\");\nObject.keys(_InputNumber).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _InputNumber[key]) return;\n  exports[key] = _InputNumber[key];\n});\nvar _InputGroup = __webpack_require__(/*! ./InputGroup */ \"./src/InputGroup/index.tsx\");\nObject.keys(_InputGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _InputGroup[key]) return;\n  exports[key] = _InputGroup[key];\n});\nvar _Checkbox = __webpack_require__(/*! ./Checkbox */ \"./src/Checkbox/index.tsx\");\nObject.keys(_Checkbox).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Checkbox[key]) return;\n  exports[key] = _Checkbox[key];\n});\nvar _CheckboxGroup = __webpack_require__(/*! ./CheckboxGroup */ \"./src/CheckboxGroup/index.tsx\");\nObject.keys(_CheckboxGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CheckboxGroup[key]) return;\n  exports[key] = _CheckboxGroup[key];\n});\nvar _Radio = __webpack_require__(/*! ./Radio */ \"./src/Radio/index.tsx\");\nObject.keys(_Radio).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Radio[key]) return;\n  exports[key] = _Radio[key];\n});\nvar _RadioGroup = __webpack_require__(/*! ./RadioGroup */ \"./src/RadioGroup/index.tsx\");\nObject.keys(_RadioGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _RadioGroup[key]) return;\n  exports[key] = _RadioGroup[key];\n});\nvar _RadioTile = __webpack_require__(/*! ./RadioTile */ \"./src/RadioTile/index.tsx\");\nObject.keys(_RadioTile).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _RadioTile[key]) return;\n  exports[key] = _RadioTile[key];\n});\nvar _RadioTileGroup = __webpack_require__(/*! ./RadioTileGroup */ \"./src/RadioTileGroup/index.tsx\");\nObject.keys(_RadioTileGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _RadioTileGroup[key]) return;\n  exports[key] = _RadioTileGroup[key];\n});\nvar _SelectPicker = __webpack_require__(/*! ./SelectPicker */ \"./src/SelectPicker/index.tsx\");\nObject.keys(_SelectPicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _SelectPicker[key]) return;\n  exports[key] = _SelectPicker[key];\n});\nvar _CheckPicker = __webpack_require__(/*! ./CheckPicker */ \"./src/CheckPicker/index.tsx\");\nObject.keys(_CheckPicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CheckPicker[key]) return;\n  exports[key] = _CheckPicker[key];\n});\nvar _InputPicker = __webpack_require__(/*! ./InputPicker */ \"./src/InputPicker/index.tsx\");\nObject.keys(_InputPicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _InputPicker[key]) return;\n  exports[key] = _InputPicker[key];\n});\nvar _TagPicker = __webpack_require__(/*! ./TagPicker */ \"./src/TagPicker/index.tsx\");\nObject.keys(_TagPicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TagPicker[key]) return;\n  exports[key] = _TagPicker[key];\n});\nvar _TagInput = __webpack_require__(/*! ./TagInput */ \"./src/TagInput/index.tsx\");\nObject.keys(_TagInput).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TagInput[key]) return;\n  exports[key] = _TagInput[key];\n});\nvar _TreePicker = __webpack_require__(/*! ./TreePicker */ \"./src/TreePicker/index.tsx\");\nObject.keys(_TreePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TreePicker[key]) return;\n  exports[key] = _TreePicker[key];\n});\nvar _CheckTreePicker = __webpack_require__(/*! ./CheckTreePicker */ \"./src/CheckTreePicker/index.tsx\");\nObject.keys(_CheckTreePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CheckTreePicker[key]) return;\n  exports[key] = _CheckTreePicker[key];\n});\nvar _Cascader = __webpack_require__(/*! ./Cascader */ \"./src/Cascader/index.tsx\");\nObject.keys(_Cascader).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Cascader[key]) return;\n  exports[key] = _Cascader[key];\n});\nvar _MultiCascader = __webpack_require__(/*! ./MultiCascader */ \"./src/MultiCascader/index.tsx\");\nObject.keys(_MultiCascader).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _MultiCascader[key]) return;\n  exports[key] = _MultiCascader[key];\n});\nvar _DateInput = __webpack_require__(/*! ./DateInput */ \"./src/DateInput/index.tsx\");\nObject.keys(_DateInput).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DateInput[key]) return;\n  exports[key] = _DateInput[key];\n});\nvar _DatePicker = __webpack_require__(/*! ./DatePicker */ \"./src/DatePicker/index.tsx\");\nObject.keys(_DatePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DatePicker[key]) return;\n  exports[key] = _DatePicker[key];\n});\nvar _TimePicker = __webpack_require__(/*! ./TimePicker */ \"./src/TimePicker/index.tsx\");\nObject.keys(_TimePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TimePicker[key]) return;\n  exports[key] = _TimePicker[key];\n});\nvar _DateRangeInput = __webpack_require__(/*! ./DateRangeInput */ \"./src/DateRangeInput/index.tsx\");\nObject.keys(_DateRangeInput).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DateRangeInput[key]) return;\n  exports[key] = _DateRangeInput[key];\n});\nvar _DateRangePicker = __webpack_require__(/*! ./DateRangePicker */ \"./src/DateRangePicker/index.tsx\");\nObject.keys(_DateRangePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DateRangePicker[key]) return;\n  exports[key] = _DateRangePicker[key];\n});\nvar _TimeRangePicker = __webpack_require__(/*! ./TimeRangePicker */ \"./src/TimeRangePicker/index.tsx\");\nObject.keys(_TimeRangePicker).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TimeRangePicker[key]) return;\n  exports[key] = _TimeRangePicker[key];\n});\nvar _AutoComplete = __webpack_require__(/*! ./AutoComplete */ \"./src/AutoComplete/index.tsx\");\nObject.keys(_AutoComplete).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _AutoComplete[key]) return;\n  exports[key] = _AutoComplete[key];\n});\nvar _Uploader = __webpack_require__(/*! ./Uploader */ \"./src/Uploader/index.tsx\");\nObject.keys(_Uploader).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Uploader[key]) return;\n  exports[key] = _Uploader[key];\n});\nvar _Slider = __webpack_require__(/*! ./Slider */ \"./src/Slider/index.tsx\");\nObject.keys(_Slider).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Slider[key]) return;\n  exports[key] = _Slider[key];\n});\nvar _RangeSlider = __webpack_require__(/*! ./RangeSlider */ \"./src/RangeSlider/index.tsx\");\nObject.keys(_RangeSlider).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _RangeSlider[key]) return;\n  exports[key] = _RangeSlider[key];\n});\nvar _Rate = __webpack_require__(/*! ./Rate */ \"./src/Rate/index.tsx\");\nObject.keys(_Rate).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Rate[key]) return;\n  exports[key] = _Rate[key];\n});\nvar _InlineEdit = __webpack_require__(/*! ./InlineEdit */ \"./src/InlineEdit/index.tsx\");\nObject.keys(_InlineEdit).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _InlineEdit[key]) return;\n  exports[key] = _InlineEdit[key];\n});\nvar _Tree = __webpack_require__(/*! ./Tree */ \"./src/Tree/index.tsx\");\nObject.keys(_Tree).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Tree[key]) return;\n  exports[key] = _Tree[key];\n});\nvar _CheckTree = __webpack_require__(/*! ./CheckTree */ \"./src/CheckTree/index.tsx\");\nObject.keys(_CheckTree).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CheckTree[key]) return;\n  exports[key] = _CheckTree[key];\n});\nvar _Card = __webpack_require__(/*! ./Card */ \"./src/Card/index.tsx\");\nObject.keys(_Card).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Card[key]) return;\n  exports[key] = _Card[key];\n});\nvar _CardGroup = __webpack_require__(/*! ./CardGroup */ \"./src/CardGroup/index.tsx\");\nObject.keys(_CardGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CardGroup[key]) return;\n  exports[key] = _CardGroup[key];\n});\nvar _CascadeTree = __webpack_require__(/*! ./CascadeTree */ \"./src/CascadeTree/index.tsx\");\nObject.keys(_CascadeTree).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CascadeTree[key]) return;\n  exports[key] = _CascadeTree[key];\n});\nvar _MultiCascadeTree = __webpack_require__(/*! ./MultiCascadeTree */ \"./src/MultiCascadeTree/index.tsx\");\nObject.keys(_MultiCascadeTree).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _MultiCascadeTree[key]) return;\n  exports[key] = _MultiCascadeTree[key];\n});\nvar _Panel = __webpack_require__(/*! ./Panel */ \"./src/Panel/index.tsx\");\nObject.keys(_Panel).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Panel[key]) return;\n  exports[key] = _Panel[key];\n});\nvar _PanelGroup = __webpack_require__(/*! ./PanelGroup */ \"./src/PanelGroup/index.tsx\");\nObject.keys(_PanelGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _PanelGroup[key]) return;\n  exports[key] = _PanelGroup[key];\n});\nvar _Stat = __webpack_require__(/*! ./Stat */ \"./src/Stat/index.tsx\");\nObject.keys(_Stat).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Stat[key]) return;\n  exports[key] = _Stat[key];\n});\nvar _StatGroup = __webpack_require__(/*! ./StatGroup */ \"./src/StatGroup/index.tsx\");\nObject.keys(_StatGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _StatGroup[key]) return;\n  exports[key] = _StatGroup[key];\n});\nvar _Table = __webpack_require__(/*! ./Table */ \"./src/Table/index.tsx\");\nObject.keys(_Table).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Table[key]) return;\n  exports[key] = _Table[key];\n});\nvar _Timeline = __webpack_require__(/*! ./Timeline */ \"./src/Timeline/index.tsx\");\nObject.keys(_Timeline).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Timeline[key]) return;\n  exports[key] = _Timeline[key];\n});\nvar _Tag = __webpack_require__(/*! ./Tag */ \"./src/Tag/index.tsx\");\nObject.keys(_Tag).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Tag[key]) return;\n  exports[key] = _Tag[key];\n});\nvar _TagGroup = __webpack_require__(/*! ./TagGroup */ \"./src/TagGroup/index.tsx\");\nObject.keys(_TagGroup).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _TagGroup[key]) return;\n  exports[key] = _TagGroup[key];\n});\nvar _List = __webpack_require__(/*! ./List */ \"./src/List/index.tsx\");\nObject.keys(_List).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _List[key]) return;\n  exports[key] = _List[key];\n});\nvar _Calendar = __webpack_require__(/*! ./Calendar */ \"./src/Calendar/index.tsx\");\nObject.keys(_Calendar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Calendar[key]) return;\n  exports[key] = _Calendar[key];\n});\nvar _Carousel = __webpack_require__(/*! ./Carousel */ \"./src/Carousel/index.tsx\");\nObject.keys(_Carousel).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Carousel[key]) return;\n  exports[key] = _Carousel[key];\n});\nvar _Box = __webpack_require__(/*! ./Box */ \"./src/Box/index.tsx\");\nObject.keys(_Box).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Box[key]) return;\n  exports[key] = _Box[key];\n});\nvar _Grid = __webpack_require__(/*! ./Grid */ \"./src/Grid/index.tsx\");\nObject.keys(_Grid).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Grid[key]) return;\n  exports[key] = _Grid[key];\n});\nvar _FlexboxGrid = __webpack_require__(/*! ./FlexboxGrid */ \"./src/FlexboxGrid/index.tsx\");\nObject.keys(_FlexboxGrid).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _FlexboxGrid[key]) return;\n  exports[key] = _FlexboxGrid[key];\n});\nvar _Container = __webpack_require__(/*! ./Container */ \"./src/Container/index.tsx\");\nObject.keys(_Container).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Container[key]) return;\n  exports[key] = _Container[key];\n});\nvar _Content = __webpack_require__(/*! ./Content */ \"./src/Content/index.tsx\");\nObject.keys(_Content).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Content[key]) return;\n  exports[key] = _Content[key];\n});\nvar _Header = __webpack_require__(/*! ./Header */ \"./src/Header/index.tsx\");\nObject.keys(_Header).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Header[key]) return;\n  exports[key] = _Header[key];\n});\nvar _Sidebar = __webpack_require__(/*! ./Sidebar */ \"./src/Sidebar/index.tsx\");\nObject.keys(_Sidebar).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Sidebar[key]) return;\n  exports[key] = _Sidebar[key];\n});\nvar _Footer = __webpack_require__(/*! ./Footer */ \"./src/Footer/index.tsx\");\nObject.keys(_Footer).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Footer[key]) return;\n  exports[key] = _Footer[key];\n});\nvar _Center = __webpack_require__(/*! ./Center */ \"./src/Center/index.tsx\");\nObject.keys(_Center).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Center[key]) return;\n  exports[key] = _Center[key];\n});\nvar _Divider = __webpack_require__(/*! ./Divider */ \"./src/Divider/index.tsx\");\nObject.keys(_Divider).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Divider[key]) return;\n  exports[key] = _Divider[key];\n});\nvar _Stack = __webpack_require__(/*! ./Stack */ \"./src/Stack/index.tsx\");\nObject.keys(_Stack).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Stack[key]) return;\n  exports[key] = _Stack[key];\n});\nvar _Schema = __webpack_require__(/*! ./Schema */ \"./src/Schema/index.ts\");\nObject.keys(_Schema).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Schema[key]) return;\n  exports[key] = _Schema[key];\n});\nvar _Animation = __webpack_require__(/*! ./Animation */ \"./src/Animation/index.tsx\");\nObject.keys(_Animation).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Animation[key]) return;\n  exports[key] = _Animation[key];\n});\nvar _DOMHelper = __webpack_require__(/*! ./DOMHelper */ \"./src/DOMHelper/index.ts\");\nObject.keys(_DOMHelper).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _DOMHelper[key]) return;\n  exports[key] = _DOMHelper[key];\n});\nvar _Affix = __webpack_require__(/*! ./Affix */ \"./src/Affix/index.tsx\");\nObject.keys(_Affix).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Affix[key]) return;\n  exports[key] = _Affix[key];\n});\nvar _CustomProvider = __webpack_require__(/*! ./CustomProvider */ \"./src/CustomProvider/index.tsx\");\nObject.keys(_CustomProvider).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _CustomProvider[key]) return;\n  exports[key] = _CustomProvider[key];\n});\nvar _useMediaQuery = __webpack_require__(/*! ./useMediaQuery */ \"./src/useMediaQuery/index.ts\");\nObject.keys(_useMediaQuery).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _useMediaQuery[key]) return;\n  exports[key] = _useMediaQuery[key];\n});\nvar _useBreakpointValue = __webpack_require__(/*! ./useBreakpointValue */ \"./src/useBreakpointValue/index.ts\");\nObject.keys(_useBreakpointValue).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _useBreakpointValue[key]) return;\n  exports[key] = _useBreakpointValue[key];\n});\nvar _VisuallyHidden = __webpack_require__(/*! ./VisuallyHidden */ \"./src/VisuallyHidden/index.tsx\");\nObject.keys(_VisuallyHidden).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _VisuallyHidden[key]) return;\n  exports[key] = _VisuallyHidden[key];\n});\nvar _Tabs = __webpack_require__(/*! ./Tabs */ \"./src/Tabs/index.tsx\");\nObject.keys(_Tabs).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Tabs[key]) return;\n  exports[key] = _Tabs[key];\n});\nvar _Accordion = __webpack_require__(/*! ./Accordion */ \"./src/Accordion/index.tsx\");\nObject.keys(_Accordion).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _Accordion[key]) return;\n  exports[key] = _Accordion[key];\n});\n\n//# sourceURL=webpack://rsuite/./src/index.tsx?");
 
 /***/ }),
 
@@ -6274,7 +6307,7 @@ eval("\n\nexports.__esModule = true;\nvar _Text = __webpack_require__(/*! ./Text
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _isEmpty = _interopRequireDefault(__webpack_require__(/*! lodash/isEmpty */ \"./node_modules/lodash/isEmpty.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _forwardRef = __webpack_require__(/*! ../utils/forwardRef */ \"./src/internals/utils/forwardRef.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/internals/Box/utils.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Box/Box.tsx\";\n/**\n * Box component is the base component for all components,\n * providing shorthand for style properties.\n *\n * @see https://rsuitejs.com/components/box\n */\nconst Box = (0, _forwardRef.forwardRef)((props, ref) => {\n  const {\n    as: Component = 'div',\n    className,\n    children,\n    showFrom,\n    hideFrom,\n    style,\n    ...rest\n  } = props;\n  const boxProps = (0, _utils2.extractBoxProps)(rest);\n  const domProps = (0, _utils2.omitBoxProps)(rest);\n  const boxCSSVars = (0, _utils2.getBoxCSSVariables)(boxProps);\n  const boxStyle = (0, _utils.mergeStyles)(style, boxCSSVars);\n  const isBox = !(0, _isEmpty.default)(boxCSSVars) || showFrom || hideFrom;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    \"data-rs\": isBox ? 'box' : undefined,\n    \"data-visible-from\": showFrom,\n    \"data-hidden-from\": hideFrom,\n    className: className,\n    style: boxStyle\n  }, domProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 72,\n      columnNumber: 5\n    }\n  }), children);\n});\nBox.displayName = 'Box';\nvar _default = exports[\"default\"] = Box;\n\n//# sourceURL=webpack://rsuite/./src/internals/Box/Box.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _isEmpty = _interopRequireDefault(__webpack_require__(/*! lodash/isEmpty */ \"./node_modules/lodash/isEmpty.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _forwardRef = __webpack_require__(/*! ../utils/react/forwardRef */ \"./src/internals/utils/react/forwardRef.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/internals/Box/utils.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Box/Box.tsx\";\n/**\n * Box component is the base component for all components,\n * providing shorthand for style properties.\n *\n * @see https://rsuitejs.com/components/box\n */\nconst Box = (0, _forwardRef.forwardRef)((props, ref) => {\n  const {\n    as: Component = 'div',\n    className,\n    children,\n    showFrom,\n    hideFrom,\n    style,\n    ...rest\n  } = props;\n  const boxProps = (0, _utils2.extractBoxProps)(rest);\n  const domProps = (0, _utils2.omitBoxProps)(rest);\n  const boxCSSVars = (0, _utils2.getBoxCSSVariables)(boxProps);\n  const boxStyle = (0, _utils.mergeStyles)(style, boxCSSVars);\n  const isBox = !(0, _isEmpty.default)(boxCSSVars) || showFrom || hideFrom;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    \"data-rs\": isBox ? 'box' : undefined,\n    \"data-visible-from\": showFrom,\n    \"data-hidden-from\": hideFrom,\n    className: className,\n    style: boxStyle\n  }, domProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 76,\n      columnNumber: 5\n    }\n  }), children);\n});\nBox.displayName = 'Box';\nvar _default = exports[\"default\"] = Box;\n\n//# sourceURL=webpack://rsuite/./src/internals/Box/Box.tsx?");
 
 /***/ }),
 
@@ -6296,7 +6329,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.omitBoxProps = exports.getBoxCSSVariables = exports.extractBoxProps = void 0;\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\n// Mapping for padding properties to their CSS style equivalents\nconst paddingStyleMap = {\n  p: 'padding',\n  pt: 'paddingTop',\n  pb: 'paddingBottom',\n  pl: 'paddingLeft',\n  pr: 'paddingRight',\n  px: 'paddingInline',\n  py: 'paddingBlock'\n};\n\n// Mapping for margin properties to their CSS style equivalents\nconst marginStyleMap = {\n  m: 'margin',\n  mt: 'marginTop',\n  mb: 'marginBottom',\n  ml: 'marginLeft',\n  mr: 'marginRight',\n  mx: 'marginInline',\n  my: 'marginBlock'\n};\n\n// Mapping for size properties to their CSS style equivalents\nconst sizeStyleMap = {\n  w: 'width',\n  h: 'height'\n};\n\n// Derive box property keys from style mappings\nconst boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'bd', 'bg', 'c', 'display', 'rounded', 'shadow'];\n\n/**\n * Extract box properties from props\n * @param props Original props object\n * @returns Object containing only box properties\n */\nconst extractBoxProps = props => {\n  const boxProps = {};\n\n  // Extract only box related properties\n  boxPropKeys.forEach(key => {\n    if (key in props && props[key] !== undefined) {\n      boxProps[key] = props[key];\n    }\n  });\n  return boxProps;\n};\n\n/**\n * Filter out layout properties from props\n * @param props Original props object\n * @returns New object without layout properties\n */\nexports.extractBoxProps = extractBoxProps;\nconst omitBoxProps = props => {\n  const filteredProps = {};\n\n  // Copy all properties except box related ones\n  Object.keys(props).forEach(key => {\n    if (!boxPropKeys.includes(key)) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n\n/**\n * Converts layout properties to CSS variables with abbreviated names\n * @param props Object containing layout properties\n * @returns Object with CSS variables\n */\nexports.omitBoxProps = omitBoxProps;\nconst getBoxCSSVariables = props => {\n  const cssVars = {};\n\n  // Process padding properties\n  Object.keys(paddingStyleMap).forEach(propKey => {\n    if (props[propKey] !== undefined) {\n      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);\n    }\n  });\n\n  // Process margin properties\n  Object.keys(marginStyleMap).forEach(propKey => {\n    if (props[propKey] !== undefined) {\n      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);\n    }\n  });\n\n  // Process size properties\n  Object.keys(sizeStyleMap).forEach(propKey => {\n    if (props[propKey] !== undefined) {\n      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);\n    }\n  });\n  if (props.bd !== undefined) {\n    cssVars['--rs-box-bd'] = (0, _utils.getCssValue)(props.bd);\n  }\n  if (props.display !== undefined) {\n    cssVars['--rs-box-display'] = props.display;\n  }\n  if (props.c !== undefined) {\n    cssVars['--rs-box-c'] = (0, _utils.getColorVar)(props.c);\n  }\n  if (props.bg !== undefined) {\n    cssVars['--rs-box-bg'] = (0, _utils.getColorVar)(props.bg);\n  }\n  return {\n    ...cssVars,\n    ...(0, _utils.getSizeStyle)(props.rounded, 'box', 'rounded'),\n    ...(0, _utils.getSizeStyle)(props.shadow, 'box', 'shadow')\n  };\n};\nexports.getBoxCSSVariables = getBoxCSSVariables;\n\n//# sourceURL=webpack://rsuite/./src/internals/Box/utils.ts?");
+eval("\n\nexports.__esModule = true;\nexports.omitBoxProps = exports.getBoxCSSVariables = exports.extractBoxProps = void 0;\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\n// Mapping for padding properties to their CSS style equivalents\nconst paddingStyleMap = {\n  p: 'padding',\n  pt: 'paddingTop',\n  pb: 'paddingBottom',\n  pl: 'paddingLeft',\n  pr: 'paddingRight',\n  px: 'paddingInline',\n  py: 'paddingBlock'\n};\n\n// Mapping for margin properties to their CSS style equivalents\nconst marginStyleMap = {\n  m: 'margin',\n  mt: 'marginTop',\n  mb: 'marginBottom',\n  ml: 'marginLeft',\n  mr: 'marginRight',\n  mx: 'marginInline',\n  my: 'marginBlock'\n};\n\n// Mapping for size properties to their CSS style equivalents\nconst sizeStyleMap = {\n  w: 'width',\n  h: 'height',\n  minw: 'minWidth',\n  maxw: 'maxWidth',\n  minh: 'minHeight',\n  maxh: 'maxHeight'\n};\n\n// Derive box property keys from style mappings\nconst boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'bd', 'bg', 'c', 'display', 'rounded', 'shadow'];\n\n/**\n * Extract box properties from props\n * @param props Original props object\n * @returns Object containing only box properties\n */\nconst extractBoxProps = props => {\n  const boxProps = {};\n\n  // Extract only box related properties\n  boxPropKeys.forEach(key => {\n    if (key in props && props[key] !== undefined) {\n      boxProps[key] = props[key];\n    }\n  });\n  return boxProps;\n};\n\n/**\n * Filter out layout properties from props\n * @param props Original props object\n * @returns New object without layout properties\n */\nexports.extractBoxProps = extractBoxProps;\nconst omitBoxProps = props => {\n  const filteredProps = {};\n\n  // Copy all properties except box related ones\n  Object.keys(props).forEach(key => {\n    if (!boxPropKeys.includes(key)) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n\n/**\n * Converts layout properties to CSS variables with abbreviated names\n * @param props Object containing layout properties\n * @returns Object with CSS variables\n */\nexports.omitBoxProps = omitBoxProps;\nconst getBoxCSSVariables = props => {\n  const cssVars = {};\n\n  // Process padding properties\n  Object.keys(paddingStyleMap).forEach(propKey => {\n    if (props[propKey] !== undefined) {\n      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);\n    }\n  });\n\n  // Process margin properties\n  Object.keys(marginStyleMap).forEach(propKey => {\n    if (props[propKey] !== undefined) {\n      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);\n    }\n  });\n\n  // Process size properties\n  Object.keys(sizeStyleMap).forEach(propKey => {\n    if (props[propKey] !== undefined) {\n      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);\n    }\n  });\n  if (props.bd !== undefined) {\n    cssVars['--rs-box-bd'] = (0, _utils.getCssValue)(props.bd);\n  }\n  if (props.display !== undefined) {\n    cssVars['--rs-box-display'] = props.display;\n  }\n  if (props.c !== undefined) {\n    cssVars['--rs-box-c'] = (0, _utils.getColorVar)(props.c);\n  }\n  if (props.bg !== undefined) {\n    cssVars['--rs-box-bg'] = (0, _utils.getColorVar)(props.bg);\n  }\n  return {\n    ...cssVars,\n    ...(0, _utils.getSizeStyle)(props.rounded, 'box', 'rounded'),\n    ...(0, _utils.getSizeStyle)(props.shadow, 'box', 'shadow')\n  };\n};\nexports.getBoxCSSVariables = getBoxCSSVariables;\n\n//# sourceURL=webpack://rsuite/./src/internals/Box/utils.ts?");
 
 /***/ }),
 
@@ -6505,7 +6538,7 @@ eval("\n\nexports.__esModule = true;\nexports.useOverlay = exports.OverlayProvid
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.OverlayCloseCause = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\nvar _Overlay = _interopRequireDefault(__webpack_require__(/*! ./Overlay */ \"./src/internals/Overlay/Overlay.tsx\"));\nvar _OverlayProvider = __webpack_require__(/*! ./OverlayProvider */ \"./src/internals/Overlay/OverlayProvider.tsx\");\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _ReactChildren = __webpack_require__(/*! ../utils/ReactChildren */ \"./src/internals/utils/ReactChildren.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Overlay/OverlayTrigger.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nfunction mergeEvents(events, props) {\n  if (events === void 0) {\n    events = {};\n  }\n  if (props === void 0) {\n    props = {};\n  }\n  const nextEvents = {};\n  Object.keys(events).forEach(eventName => {\n    if (events[eventName]) {\n      var _props;\n      nextEvents[eventName] = (0, _utils.createChainedFunction)(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);\n    }\n  });\n  return nextEvents;\n}\n/**\n * The reason that triggers closing of an overlay\n * - Clicking outside of the overlay\n * - Direct invocation of triggerRef.current.close()\n */\nlet OverlayCloseCause = exports.OverlayCloseCause = /*#__PURE__*/function (OverlayCloseCause) {\n  OverlayCloseCause[OverlayCloseCause[\"ClickOutside\"] = 0] = \"ClickOutside\";\n  OverlayCloseCause[OverlayCloseCause[\"ImperativeHandle\"] = 1] = \"ImperativeHandle\";\n  return OverlayCloseCause;\n}({});\n/**\n * Useful for mouseover and mouseout.\n * In order to resolve the node entering the mouseover element, a mouseout event and a mouseover event will be triggered.\n * https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave\n * @param handler\n * @param event\n */\nfunction onMouseEventHandler(handler, event, relatedNative) {\n  const target = event.currentTarget;\n  const related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', relatedNative]);\n  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {\n    handler(event);\n  }\n}\nconst defaultTrigger = ['hover', 'focus'];\n\n/**\n * OverlayTrigger is used to display floating elements on another component.\n * @private\n */\nconst OverlayTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    overlayContainer\n  } = (0, _OverlayProvider.useOverlay)();\n  const {\n    children,\n    container = overlayContainer,\n    controlId,\n    defaultOpen,\n    trigger = defaultTrigger,\n    disabled,\n    followCursor,\n    readOnly,\n    plaintext,\n    open: openProp,\n    delay,\n    delayOpen: delayOpenProp,\n    delayClose: delayCloseProp,\n    enterable,\n    placement = 'bottomStart',\n    speaker,\n    rootClose = true,\n    onClick,\n    onMouseOver,\n    onMouseMove,\n    onMouseOut,\n    onContextMenu,\n    onFocus,\n    onBlur,\n    onOpen,\n    onClose,\n    onExited,\n    ...rest\n  } = props;\n  const {\n    Portal,\n    target: containerElement\n  } = (0, _hooks.usePortal)({\n    container\n  });\n  const triggerRef = (0, _react.useRef)(null);\n  const overlayRef = (0, _react.useRef)(null);\n  const [open, setOpen] = (0, _hooks.useControlled)(openProp, defaultOpen);\n  const [cursorPosition, setCursorPosition] = (0, _react.useState)(null);\n\n  // Delay the timer to close/open the overlay\n  // When the cursor moves from the trigger to the overlay, the overlay will be closed.\n  // In order to keep the overlay open, a timer is used to delay the closing.\n  const delayOpenTimer = (0, _react.useRef)(null);\n  const delayCloseTimer = (0, _react.useRef)(null);\n  const delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;\n  const delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp;\n\n  // Whether the cursor is on the overlay\n  const isOnOverlay = (0, _react.useRef)(false);\n\n  // Whether the cursor is on the trigger\n  const isOnTrigger = (0, _react.useRef)(false);\n  (0, _react.useEffect)(() => {\n    return () => {\n      if (!(0, _isNil.default)(delayOpenTimer.current)) {\n        clearTimeout(delayOpenTimer.current);\n      }\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n      }\n    };\n  }, []);\n\n  // Whether the cursor is on the overlay\n  const mouseEnter = (0, _react.useRef)(false);\n  const handleOpenChange = (0, _react.useCallback)((nextOpen, closeCause) => {\n    // if the overlay open state is not changed, do not fire the event\n    if (nextOpen === open) return;\n    if (nextOpen) {\n      onOpen === null || onOpen === void 0 || onOpen();\n    } else {\n      onClose === null || onClose === void 0 || onClose(closeCause);\n    }\n    setOpen(nextOpen);\n  }, [open, onOpen, onClose, setOpen]);\n  const handleOpen = (0, _react.useCallback)(delay => {\n    const ms = (0, _isUndefined.default)(delay) ? delayOpen : delay;\n    if (ms && typeof ms === 'number') {\n      return delayOpenTimer.current = setTimeout(() => {\n        delayOpenTimer.current = null;\n        if (mouseEnter.current) {\n          handleOpenChange(true);\n        }\n      }, ms);\n    }\n    handleOpenChange(true);\n  }, [delayOpen, handleOpenChange]);\n  const handleClose = (0, _react.useCallback)((delay, closeCause) => {\n    const ms = (0, _isUndefined.default)(delay) ? delayClose : delay;\n    if (ms && typeof ms === 'number') {\n      return delayCloseTimer.current = setTimeout(() => {\n        delayCloseTimer.current = null;\n        handleOpenChange(false, closeCause);\n      }, ms);\n    }\n    handleOpenChange(false, closeCause);\n  }, [delayClose, handleOpenChange]);\n  const handleExited = (0, _react.useCallback)(() => {\n    setCursorPosition(null);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, () => ({\n    get root() {\n      return triggerRef.current;\n    },\n    get overlay() {\n      var _overlayRef$current;\n      return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;\n    },\n    getState: () => ({\n      open\n    }),\n    open: handleOpen,\n    close: delay => handleClose(delay, OverlayCloseCause.ImperativeHandle),\n    updatePosition: () => {\n      var _overlayRef$current2, _overlayRef$current2$;\n      (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 || (_overlayRef$current2$ = _overlayRef$current2.updatePosition) === null || _overlayRef$current2$ === void 0 || _overlayRef$current2$.call(_overlayRef$current2);\n    }\n  }));\n\n  /**\n   * Close after the cursor leaves.\n   */\n  const handleCloseWhenLeave = (0, _react.useCallback)(() => {\n    // When the cursor is not on the overlay and not on the trigger, it is closed.\n    if (!isOnOverlay.current && !isOnTrigger.current) {\n      handleClose(undefined, OverlayCloseCause.ClickOutside);\n    }\n  }, [handleClose]);\n  const handleDelayedOpen = (0, _react.useCallback)(() => {\n    mouseEnter.current = true;\n    if (!enterable) {\n      return handleOpen();\n    }\n    isOnTrigger.current = true;\n    if (!(0, _isNil.default)(delayCloseTimer.current)) {\n      clearTimeout(delayCloseTimer.current);\n      delayCloseTimer.current = null;\n      return handleOpen();\n    }\n    if (open) {\n      return;\n    }\n    handleOpen();\n  }, [enterable, open, handleOpen]);\n\n  /**\n   * Toggle open and closed state.\n   */\n  const handleOpenState = (0, _react.useCallback)(() => {\n    if (open) {\n      handleCloseWhenLeave();\n    } else {\n      handleDelayedOpen();\n    }\n  }, [open, handleCloseWhenLeave, handleDelayedOpen]);\n  const handleDelayedClose = (0, _react.useCallback)(() => {\n    mouseEnter.current = false;\n    if (!enterable) {\n      return handleClose();\n    }\n    isOnTrigger.current = false;\n    if (!(0, _isNil.default)(delayOpenTimer.current)) {\n      clearTimeout(delayOpenTimer.current);\n      delayOpenTimer.current = null;\n      return;\n    }\n    if (!open || !(0, _isNil.default)(delayCloseTimer.current)) {\n      return;\n    }\n    delayCloseTimer.current = setTimeout(() => {\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n        delayCloseTimer.current = null;\n      }\n      handleCloseWhenLeave();\n    }, 200);\n  }, [enterable, open, handleClose, handleCloseWhenLeave]);\n  const handleSpeakerMouseEnter = (0, _react.useCallback)(() => {\n    isOnOverlay.current = true;\n  }, []);\n  const handleSpeakerMouseLeave = (0, _react.useCallback)(() => {\n    isOnOverlay.current = false;\n    if (!(0, _utils.isOneOf)('click', trigger) && !(0, _utils.isOneOf)('contextMenu', trigger) && !(0, _utils.isOneOf)('active', trigger)) {\n      handleCloseWhenLeave();\n    }\n  }, [handleCloseWhenLeave, trigger]);\n  const handledMoveOverlay = (0, _react.useCallback)(event => {\n    setCursorPosition(() => ({\n      top: event.pageY,\n      left: event.pageX,\n      clientTop: event.clientX,\n      clientLeft: event.clientY\n    }));\n  }, []);\n  const handleMouseOver = (0, _react.useCallback)(event => {\n    onMouseEventHandler(handleDelayedOpen, event, 'fromElement');\n  }, [handleDelayedOpen]);\n  const handleMouseOut = (0, _react.useCallback)(event => {\n    onMouseEventHandler(handleDelayedClose, event, 'toElement');\n  }, [handleDelayedClose]);\n  const preventDefault = (0, _react.useCallback)(event => {\n    event.preventDefault();\n  }, []);\n  const triggerEvents = (0, _react.useMemo)(() => {\n    // Pass events by props\n    const events = {\n      onClick,\n      onContextMenu,\n      onMouseOver,\n      onMouseOut,\n      onFocus,\n      onBlur,\n      onMouseMove\n    };\n\n    // When trigger is disabled, no predefined event listeners are added.\n    if (disabled || readOnly || plaintext || trigger === 'none') {\n      return events;\n    }\n\n    // Get the cursor position through onMouseMove.\n    // https://rsuitejs.com/components/tooltip/#follow-cursor\n    if (followCursor) {\n      events.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);\n    }\n\n    // The `click` event is usually used in `toggle` scenarios.\n    // The first click will open and the second click will close.\n    if ((0, _utils.isOneOf)('click', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleOpenState, events.onClick);\n      return events;\n    }\n\n    // The difference between it and the click event is that it does not trigger the close.\n    if ((0, _utils.isOneOf)('active', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onClick);\n      return events;\n    }\n    if ((0, _utils.isOneOf)('hover', trigger)) {\n      events.onMouseOver = (0, _utils.createChainedFunction)(handleMouseOver, events.onMouseOver);\n      events.onMouseOut = (0, _utils.createChainedFunction)(handleMouseOut, events.onMouseOut);\n    }\n    if ((0, _utils.isOneOf)('focus', trigger)) {\n      events.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onFocus);\n      events.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, events.onBlur);\n    }\n    if ((0, _utils.isOneOf)('contextMenu', trigger)) {\n      events.onContextMenu = (0, _utils.createChainedFunction)(preventDefault, handleOpenState, events.onContextMenu);\n    }\n    return events;\n  }, [disabled, followCursor, handleDelayedClose, handleDelayedOpen, handleMouseOut, handleMouseOver, handleOpenState, handledMoveOverlay, onBlur, onClick, onContextMenu, onFocus, onMouseMove, onMouseOut, onMouseOver, plaintext, preventDefault, readOnly, trigger]);\n  const renderOverlay = () => {\n    const overlayProps = {\n      ...rest,\n      rootClose,\n      triggerTarget: triggerRef,\n      onClose: trigger !== 'none' ? () => handleClose(undefined, OverlayCloseCause.ClickOutside) : undefined,\n      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),\n      placement,\n      container: containerElement,\n      open\n    };\n    const speakerProps = {\n      id: controlId\n    };\n\n    // The purpose of adding mouse entry and exit events to the Overlay is to record whether the current cursor is on the Overlay.\n    // When `trigger` is equal to `hover`, if the cursor leaves the `triggerTarget` and stays on the Overlay,\n    // the Overlay will continue to remain open.\n    if (trigger !== 'none' && enterable) {\n      speakerProps.onMouseEnter = handleSpeakerMouseEnter;\n      speakerProps.onMouseLeave = handleSpeakerMouseLeave;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {\n      ref: overlayRef,\n      childrenProps: speakerProps,\n      followCursor: followCursor,\n      cursorPosition: cursorPosition,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 524,\n        columnNumber: 9\n      }\n    }), typeof speaker === 'function' ? (props, ref) => {\n      return speaker({\n        ...props,\n        onClose: handleClose\n      }, ref);\n    } : speaker);\n  };\n  const triggerElement = (0, _react.useMemo)(() => {\n    if (typeof children === 'function') {\n      return children(triggerEvents, triggerRef);\n    } else if ((0, _ReactChildren.isFragment)(children) || ! /*#__PURE__*/(0, _react.isValidElement)(children)) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", (0, _extends2.default)({\n        ref: triggerRef,\n        \"aria-describedby\": controlId\n      }, triggerEvents, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 545,\n          columnNumber: 11\n        }\n      }), children);\n    }\n    const childElement = children;\n    return /*#__PURE__*/(0, _react.cloneElement)(childElement, {\n      ref: triggerRef,\n      'aria-describedby': controlId,\n      ...mergeEvents(triggerEvents, childElement.props)\n    });\n  }, [children, controlId, triggerEvents]);\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, triggerElement, /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 563,\n      columnNumber: 9\n    }\n  }, renderOverlay()));\n});\nOverlayTrigger.displayName = 'OverlayTrigger';\nvar _default = exports[\"default\"] = OverlayTrigger;\n\n//# sourceURL=webpack://rsuite/./src/internals/Overlay/OverlayTrigger.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.OverlayCloseCause = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\nvar _Overlay = _interopRequireDefault(__webpack_require__(/*! ./Overlay */ \"./src/internals/Overlay/Overlay.tsx\"));\nvar _OverlayProvider = __webpack_require__(/*! ./OverlayProvider */ \"./src/internals/Overlay/OverlayProvider.tsx\");\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Overlay/OverlayTrigger.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nfunction mergeEvents(events, props) {\n  if (events === void 0) {\n    events = {};\n  }\n  if (props === void 0) {\n    props = {};\n  }\n  const nextEvents = {};\n  Object.keys(events).forEach(eventName => {\n    if (events[eventName]) {\n      var _props;\n      nextEvents[eventName] = (0, _utils.createChainedFunction)(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);\n    }\n  });\n  return nextEvents;\n}\n/**\n * The reason that triggers closing of an overlay\n * - Clicking outside of the overlay\n * - Direct invocation of triggerRef.current.close()\n */\nlet OverlayCloseCause = exports.OverlayCloseCause = /*#__PURE__*/function (OverlayCloseCause) {\n  OverlayCloseCause[OverlayCloseCause[\"ClickOutside\"] = 0] = \"ClickOutside\";\n  OverlayCloseCause[OverlayCloseCause[\"ImperativeHandle\"] = 1] = \"ImperativeHandle\";\n  return OverlayCloseCause;\n}({});\n/**\n * Useful for mouseover and mouseout.\n * In order to resolve the node entering the mouseover element, a mouseout event and a mouseover event will be triggered.\n * https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave\n * @param handler\n * @param event\n */\nfunction onMouseEventHandler(handler, event, relatedNative) {\n  const target = event.currentTarget;\n  const related = event.relatedTarget || (0, _get.default)(event, ['nativeEvent', relatedNative]);\n  if ((!related || related !== target) && !(0, _contains.default)(target, related)) {\n    handler(event);\n  }\n}\nconst defaultTrigger = ['hover', 'focus'];\n\n/**\n * OverlayTrigger is used to display floating elements on another component.\n * @private\n */\nconst OverlayTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    overlayContainer\n  } = (0, _OverlayProvider.useOverlay)();\n  const {\n    children,\n    container = overlayContainer,\n    controlId,\n    defaultOpen,\n    trigger = defaultTrigger,\n    disabled,\n    followCursor,\n    readOnly,\n    plaintext,\n    open: openProp,\n    delay,\n    delayOpen: delayOpenProp,\n    delayClose: delayCloseProp,\n    enterable,\n    placement = 'bottomStart',\n    speaker,\n    rootClose = true,\n    overlayAs: OverlayComponent,\n    onClick,\n    onMouseOver,\n    onMouseMove,\n    onMouseOut,\n    onContextMenu,\n    onFocus,\n    onBlur,\n    onOpen,\n    onClose,\n    onExited,\n    ...rest\n  } = props;\n  const {\n    Portal,\n    target: containerElement\n  } = (0, _hooks.usePortal)({\n    container\n  });\n  const triggerRef = (0, _react.useRef)(null);\n  const overlayRef = (0, _react.useRef)(null);\n  const [open, setOpen] = (0, _hooks.useControlled)(openProp, defaultOpen);\n  const [cursorPosition, setCursorPosition] = (0, _react.useState)(null);\n\n  // Delay the timer to close/open the overlay\n  // When the cursor moves from the trigger to the overlay, the overlay will be closed.\n  // In order to keep the overlay open, a timer is used to delay the closing.\n  const delayOpenTimer = (0, _react.useRef)(null);\n  const delayCloseTimer = (0, _react.useRef)(null);\n  const delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;\n  const delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp;\n\n  // Whether the cursor is on the overlay\n  const isOnOverlay = (0, _react.useRef)(false);\n\n  // Whether the cursor is on the trigger\n  const isOnTrigger = (0, _react.useRef)(false);\n  (0, _react.useEffect)(() => {\n    return () => {\n      if (!(0, _isNil.default)(delayOpenTimer.current)) {\n        clearTimeout(delayOpenTimer.current);\n      }\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n      }\n    };\n  }, []);\n\n  // Whether the cursor is on the overlay\n  const mouseEnter = (0, _react.useRef)(false);\n  const handleOpenChange = (0, _react.useCallback)((nextOpen, closeCause) => {\n    // if the overlay open state is not changed, do not fire the event\n    if (nextOpen === open) return;\n    if (nextOpen) {\n      onOpen === null || onOpen === void 0 || onOpen();\n    } else {\n      onClose === null || onClose === void 0 || onClose(closeCause);\n    }\n    setOpen(nextOpen);\n  }, [open, onOpen, onClose, setOpen]);\n  const handleOpen = (0, _react.useCallback)(delay => {\n    const ms = (0, _isUndefined.default)(delay) ? delayOpen : delay;\n    if (ms && typeof ms === 'number') {\n      return delayOpenTimer.current = setTimeout(() => {\n        delayOpenTimer.current = null;\n        if (mouseEnter.current) {\n          handleOpenChange(true);\n        }\n      }, ms);\n    }\n    handleOpenChange(true);\n  }, [delayOpen, handleOpenChange]);\n  const handleClose = (0, _react.useCallback)((delay, closeCause) => {\n    const ms = (0, _isUndefined.default)(delay) ? delayClose : delay;\n    if (ms && typeof ms === 'number') {\n      return delayCloseTimer.current = setTimeout(() => {\n        delayCloseTimer.current = null;\n        handleOpenChange(false, closeCause);\n      }, ms);\n    }\n    handleOpenChange(false, closeCause);\n  }, [delayClose, handleOpenChange]);\n  const handleExited = (0, _react.useCallback)(() => {\n    setCursorPosition(null);\n  }, []);\n  (0, _react.useImperativeHandle)(ref, () => ({\n    get root() {\n      return triggerRef.current;\n    },\n    get overlay() {\n      var _overlayRef$current;\n      return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;\n    },\n    getState: () => ({\n      open\n    }),\n    open: handleOpen,\n    close: delay => handleClose(delay, OverlayCloseCause.ImperativeHandle),\n    updatePosition: () => {\n      var _overlayRef$current2, _overlayRef$current2$;\n      (_overlayRef$current2 = overlayRef.current) === null || _overlayRef$current2 === void 0 || (_overlayRef$current2$ = _overlayRef$current2.updatePosition) === null || _overlayRef$current2$ === void 0 || _overlayRef$current2$.call(_overlayRef$current2);\n    }\n  }));\n\n  /**\n   * Close after the cursor leaves.\n   */\n  const handleCloseWhenLeave = (0, _react.useCallback)(() => {\n    // When the cursor is not on the overlay and not on the trigger, it is closed.\n    if (!isOnOverlay.current && !isOnTrigger.current) {\n      handleClose(undefined, OverlayCloseCause.ClickOutside);\n    }\n  }, [handleClose]);\n  const handleDelayedOpen = (0, _react.useCallback)(() => {\n    mouseEnter.current = true;\n    if (!enterable) {\n      return handleOpen();\n    }\n    isOnTrigger.current = true;\n    if (!(0, _isNil.default)(delayCloseTimer.current)) {\n      clearTimeout(delayCloseTimer.current);\n      delayCloseTimer.current = null;\n      return handleOpen();\n    }\n    if (open) {\n      return;\n    }\n    handleOpen();\n  }, [enterable, open, handleOpen]);\n\n  /**\n   * Toggle open and closed state.\n   */\n  const handleOpenState = (0, _react.useCallback)(() => {\n    if (open) {\n      handleCloseWhenLeave();\n    } else {\n      handleDelayedOpen();\n    }\n  }, [open, handleCloseWhenLeave, handleDelayedOpen]);\n  const handleDelayedClose = (0, _react.useCallback)(() => {\n    mouseEnter.current = false;\n    if (!enterable) {\n      return handleClose();\n    }\n    isOnTrigger.current = false;\n    if (!(0, _isNil.default)(delayOpenTimer.current)) {\n      clearTimeout(delayOpenTimer.current);\n      delayOpenTimer.current = null;\n      return;\n    }\n    if (!open || !(0, _isNil.default)(delayCloseTimer.current)) {\n      return;\n    }\n    delayCloseTimer.current = setTimeout(() => {\n      if (!(0, _isNil.default)(delayCloseTimer.current)) {\n        clearTimeout(delayCloseTimer.current);\n        delayCloseTimer.current = null;\n      }\n      handleCloseWhenLeave();\n    }, 200);\n  }, [enterable, open, handleClose, handleCloseWhenLeave]);\n  const handleSpeakerMouseEnter = (0, _react.useCallback)(() => {\n    isOnOverlay.current = true;\n  }, []);\n  const handleSpeakerMouseLeave = (0, _react.useCallback)(() => {\n    isOnOverlay.current = false;\n    if (!(0, _utils.isOneOf)('click', trigger) && !(0, _utils.isOneOf)('contextMenu', trigger) && !(0, _utils.isOneOf)('active', trigger)) {\n      handleCloseWhenLeave();\n    }\n  }, [handleCloseWhenLeave, trigger]);\n  const handledMoveOverlay = (0, _react.useCallback)(event => {\n    setCursorPosition(() => ({\n      top: event.pageY,\n      left: event.pageX,\n      clientTop: event.clientX,\n      clientLeft: event.clientY\n    }));\n  }, []);\n  const handleMouseOver = (0, _react.useCallback)(event => {\n    onMouseEventHandler(handleDelayedOpen, event, 'fromElement');\n  }, [handleDelayedOpen]);\n  const handleMouseOut = (0, _react.useCallback)(event => {\n    onMouseEventHandler(handleDelayedClose, event, 'toElement');\n  }, [handleDelayedClose]);\n  const preventDefault = (0, _react.useCallback)(event => {\n    event.preventDefault();\n  }, []);\n  const triggerEvents = (0, _react.useMemo)(() => {\n    // Pass events by props\n    const events = {\n      onClick,\n      onContextMenu,\n      onMouseOver,\n      onMouseOut,\n      onFocus,\n      onBlur,\n      onMouseMove\n    };\n\n    // When trigger is disabled, no predefined event listeners are added.\n    if (disabled || readOnly || plaintext || trigger === 'none') {\n      return events;\n    }\n\n    // Get the cursor position through onMouseMove.\n    // https://rsuitejs.com/components/tooltip/#follow-cursor\n    if (followCursor) {\n      events.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);\n    }\n\n    // The `click` event is usually used in `toggle` scenarios.\n    // The first click will open and the second click will close.\n    if ((0, _utils.isOneOf)('click', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleOpenState, events.onClick);\n      return events;\n    }\n\n    // The difference between it and the click event is that it does not trigger the close.\n    if ((0, _utils.isOneOf)('active', trigger)) {\n      events.onClick = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onClick);\n      return events;\n    }\n    if ((0, _utils.isOneOf)('hover', trigger)) {\n      events.onMouseOver = (0, _utils.createChainedFunction)(handleMouseOver, events.onMouseOver);\n      events.onMouseOut = (0, _utils.createChainedFunction)(handleMouseOut, events.onMouseOut);\n    }\n    if ((0, _utils.isOneOf)('focus', trigger)) {\n      events.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, events.onFocus);\n      events.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, events.onBlur);\n    }\n    if ((0, _utils.isOneOf)('contextMenu', trigger)) {\n      events.onContextMenu = (0, _utils.createChainedFunction)(preventDefault, handleOpenState, events.onContextMenu);\n    }\n    return events;\n  }, [disabled, followCursor, handleDelayedClose, handleDelayedOpen, handleMouseOut, handleMouseOver, handleOpenState, handledMoveOverlay, onBlur, onClick, onContextMenu, onFocus, onMouseMove, onMouseOut, onMouseOver, plaintext, preventDefault, readOnly, trigger]);\n  const renderOverlay = () => {\n    const overlayProps = {\n      ...rest,\n      rootClose,\n      triggerTarget: triggerRef,\n      onClose: trigger !== 'none' ? () => handleClose(undefined, OverlayCloseCause.ClickOutside) : undefined,\n      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),\n      placement,\n      container: containerElement,\n      open\n    };\n    const speakerProps = {\n      id: controlId\n    };\n\n    // The purpose of adding mouse entry and exit events to the Overlay is to record whether the current cursor is on the Overlay.\n    // When `trigger` is equal to `hover`, if the cursor leaves the `triggerTarget` and stays on the Overlay,\n    // the Overlay will continue to remain open.\n    if (trigger !== 'none' && enterable) {\n      speakerProps.onMouseEnter = handleSpeakerMouseEnter;\n      speakerProps.onMouseLeave = handleSpeakerMouseLeave;\n    }\n    return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {\n      ref: overlayRef,\n      childrenProps: speakerProps,\n      followCursor: followCursor,\n      cursorPosition: cursorPosition,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 527,\n        columnNumber: 9\n      }\n    }), typeof speaker === 'function' ? (props, ref) => {\n      return speaker({\n        ...props,\n        onClose: handleClose\n      }, ref);\n    } : speaker);\n  };\n  const triggerElement = (0, _react.useMemo)(() => {\n    if (typeof children === 'function') {\n      return children(triggerEvents, triggerRef);\n    } else if ((0, _utils.isFragment)(children) || ! /*#__PURE__*/(0, _react.isValidElement)(children)) {\n      return /*#__PURE__*/_react.default.createElement(\"span\", (0, _extends2.default)({\n        ref: triggerRef,\n        \"aria-describedby\": controlId\n      }, triggerEvents, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 548,\n          columnNumber: 11\n        }\n      }), children);\n    }\n    const childElement = children;\n    return /*#__PURE__*/(0, _react.cloneElement)(childElement, {\n      ref: triggerRef,\n      'aria-describedby': controlId,\n      ...mergeEvents(triggerEvents, childElement.props)\n    });\n  }, [children, controlId, triggerEvents]);\n  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, triggerElement, OverlayComponent ? /*#__PURE__*/_react.default.createElement(OverlayComponent, {\n    open: open,\n    onClose: handleClose,\n    placement: \"bottom\",\n    speaker: speaker,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 567,\n      columnNumber: 11\n    }\n  }) : /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 574,\n      columnNumber: 11\n    }\n  }, renderOverlay()));\n});\nOverlayTrigger.displayName = 'OverlayTrigger';\nvar _default = exports[\"default\"] = OverlayTrigger;\n\n//# sourceURL=webpack://rsuite/./src/internals/Overlay/OverlayTrigger.tsx?");
 
 /***/ }),
 
@@ -6571,7 +6604,18 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isString = _interopRequireDefault(__webpack_require__(/*! lodash/isString */ \"./node_modules/lodash/isString.js\"));\nvar _isNumber = _interopRequireDefault(__webpack_require__(/*! lodash/isNumber */ \"./node_modules/lodash/isNumber.js\"));\nvar _findIndex = _interopRequireDefault(__webpack_require__(/*! lodash/findIndex */ \"./node_modules/lodash/findIndex.js\"));\nvar _pickBy = _interopRequireDefault(__webpack_require__(/*! lodash/pickBy */ \"./node_modules/lodash/pickBy.js\"));\nvar _getPosition = _interopRequireDefault(__webpack_require__(/*! dom-lib/getPosition */ \"./node_modules/dom-lib/esm/getPosition.js\"));\nvar _scrollTop = _interopRequireDefault(__webpack_require__(/*! dom-lib/scrollTop */ \"./node_modules/dom-lib/esm/scrollTop.js\"));\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _ListItemGroup = _interopRequireDefault(__webpack_require__(/*! ./ListItemGroup */ \"./src/internals/Picker/ListItemGroup.tsx\"));\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _Highlight = _interopRequireDefault(__webpack_require__(/*! ../../Highlight */ \"./src/Highlight/index.tsx\"));\nvar _Windowing = __webpack_require__(/*! ../Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _symbols = __webpack_require__(/*! ../symbols */ \"./src/internals/symbols.ts\");\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/internals/utils/getDataGroupBy.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/Listbox.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Props for the Listbox component.\n */\n/**\n * Props for the Listbox component.\n * @template Multiple - Whether multiple selection is enabled.\n */\n\nconst Listbox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    data = [],\n    groupBy,\n    maxHeight = 320,\n    activeItemValues = [],\n    disabledItemValues = [],\n    classPrefix = 'listbox',\n    valueKey = 'value',\n    labelKey = 'label',\n    virtualized,\n    listProps,\n    listRef: virtualizedListRef,\n    className,\n    style,\n    focusItemValue,\n    listItemClassPrefix,\n    listItemAs: ListItem,\n    listItemProps,\n    rowHeight = 36,\n    rowGroupHeight = 48,\n    query,\n    renderOptionGroup,\n    renderOption,\n    onGroupTitleClick,\n    onSelect,\n    ...rest\n  } = props;\n  const {\n    withPrefix,\n    prefix,\n    merge,\n    rootPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const groupable = typeof groupBy !== 'undefined';\n  const classes = merge(className, withPrefix('items', {\n    grouped: groupable\n  }));\n  const {\n    id,\n    labelId,\n    popupType,\n    multiple\n  } = (0, _useCombobox.default)();\n  const menuBodyContainerRef = (0, _react.useRef)(null);\n  const listRef = (0, _react.useRef)(null);\n  const [foldedGroupKeys, setFoldedGroupKeys] = (0, _react.useState)([]);\n  const handleGroupTitleClick = (0, _hooks.useEventCallback)((key, event) => {\n    const nextGroupKeys = foldedGroupKeys.filter(item => item !== key);\n    if (nextGroupKeys.length === foldedGroupKeys.length) {\n      nextGroupKeys.push(key);\n    }\n    setFoldedGroupKeys(nextGroupKeys);\n    onGroupTitleClick === null || onGroupTitleClick === void 0 || onGroupTitleClick(event);\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((item, value, event, checked) => {\n    onSelect === null || onSelect === void 0 || onSelect(value, item, event, checked);\n  });\n  const getRowHeight = (list, index) => {\n    const item = list[index];\n    if (groupable && item[_symbols.RSUITE_PICKER_GROUP_KEY] && index !== 0) {\n      return rowGroupHeight;\n    }\n    return rowHeight;\n  };\n  (0, _react.useEffect)(() => {\n    const container = menuBodyContainerRef.current;\n    if (!container) {\n      return;\n    }\n    let activeItem = container.querySelector(`.${prefix('item-focus')}`);\n    if (!activeItem) {\n      activeItem = container.querySelector(`.${prefix('item-active')}`);\n    }\n    if (!activeItem) {\n      return;\n    }\n    const position = (0, _getPosition.default)(activeItem, container);\n    const sTop = (0, _scrollTop.default)(container);\n    const sHeight = (0, _getHeight.default)(container);\n    if (sTop > position.top) {\n      (0, _scrollTop.default)(container, Math.max(0, position.top - 20));\n    } else if (position.top > sTop + sHeight) {\n      (0, _scrollTop.default)(container, Math.max(0, position.top - sHeight + 32));\n    }\n  }, [focusItemValue, menuBodyContainerRef, prefix]);\n  const filteredItems = groupable ? data.filter(item => {\n    var _item$parent;\n    // Display group title items\n    if (item[_symbols.RSUITE_PICKER_GROUP_KEY]) return true;\n\n    // Display items under the unfolded group\n    const groupValue = (0, _get.default)(item, groupBy, '') || (// FIXME-Doma\n    // Usage of `item.parent` is strongly discouraged\n    // It's only here for legacy support\n    // Remove once `item.parent` is completely removed across related components\n    (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[_getDataGroupBy.KEY_GROUP_TITLE]);\n    return !foldedGroupKeys.includes(groupValue);\n  }) : data;\n  const rowCount = filteredItems.length;\n  const renderItem = _ref => {\n    let {\n      index = 0,\n      style,\n      data,\n      item: itemData\n    } = _ref;\n    const item = itemData || data[index];\n    const value = item[valueKey];\n    const itemLabel = item[labelKey];\n    const label = query ? /*#__PURE__*/_react.default.createElement(_Highlight.default, {\n      query: query,\n      as: \"span\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 233,\n        columnNumber: 9\n      }\n    }, itemLabel) : itemLabel;\n    if ((0, _isUndefined.default)(label) && !item[_symbols.RSUITE_PICKER_GROUP_KEY]) {\n      throw Error(`labelKey \"${labelKey}\" is not defined in \"data\" : ${index}`);\n    }\n\n    // Use `value` in keys when If `value` is string or number\n    const itemKey = (0, _isString.default)(value) || (0, _isNumber.default)(value) ? value : index;\n\n    //  Render <ListboxGroup> component when `groupBy` is defined\n    if (groupable && item[_symbols.RSUITE_PICKER_GROUP_KEY]) {\n      const groupValue = item[_getDataGroupBy.KEY_GROUP_TITLE];\n      return /*#__PURE__*/_react.default.createElement(_ListItemGroup.default, {\n        style: style,\n        classPrefix: 'picker-menu-group',\n        className: (0, _classnames.default)({\n          folded: foldedGroupKeys.some(key => key === groupValue)\n        }),\n        key: `group-${groupValue}`,\n        onClick: handleGroupTitleClick.bind(null, groupValue),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 251,\n          columnNumber: 11\n        }\n      }, renderOptionGroup ? renderOptionGroup(groupValue, item) : groupValue);\n    } else if ((0, _isUndefined.default)(value) && !(0, _isUndefined.default)(item[_symbols.RSUITE_PICKER_GROUP_KEY])) {\n      throw Error(`valueKey \"${valueKey}\" is not defined in \"data\" : ${index} `);\n    }\n    const disabled = disabledItemValues === null || disabledItemValues === void 0 ? void 0 : disabledItemValues.some(disabledValue => (0, _utils.shallowEqual)(disabledValue, value));\n    const active = activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues.some(v => (0, _utils.shallowEqual)(v, value));\n    const focus = !(0, _isUndefined.default)(focusItemValue) && (0, _utils.shallowEqual)(focusItemValue, value);\n    return /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({\n      \"aria-posinset\": index + 1,\n      \"aria-setsize\": rowCount,\n      style: style,\n      key: itemKey,\n      disabled: disabled,\n      active: active,\n      focus: focus,\n      value: value,\n      classPrefix: listItemClassPrefix,\n      onSelect: handleSelect.bind(null, item)\n    }, (0, _pickBy.default)(listItemProps, v => v !== undefined), {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 274,\n        columnNumber: 9\n      }\n    }), renderOption ? renderOption(label, item) : label);\n  };\n  (0, _hooks.useMount)(() => {\n    var _listRef$current, _listRef$current$scro;\n    const itemIndex = (0, _findIndex.default)(filteredItems, item => item[valueKey] === (activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues[0]));\n    (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current$scro = _listRef$current.scrollToItem) === null || _listRef$current$scro === void 0 || _listRef$current$scro.call(_listRef$current, itemIndex);\n  });\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    role: \"listbox\",\n    id: `${id}-${popupType}`,\n    \"aria-labelledby\": labelId,\n    \"aria-multiselectable\": multiple\n  }, rest, {\n    className: classes,\n    ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),\n    style: {\n      ...style,\n      maxHeight\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 298,\n      columnNumber: 7\n    }\n  }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n    defaultHeight: maxHeight,\n    style: {\n      width: 'auto',\n      height: 'auto'\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 309,\n      columnNumber: 11\n    }\n  }, _ref2 => {\n    let {\n      height\n    } = _ref2;\n    return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n      as: _Windowing.VariableSizeList,\n      ref: (0, _utils.mergeRefs)(listRef, virtualizedListRef),\n      height: height || maxHeight,\n      itemCount: rowCount,\n      itemData: filteredItems,\n      itemSize: getRowHeight.bind(void 0, filteredItems),\n      className: rootPrefix('virt-list')\n    }, listProps, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 311,\n        columnNumber: 15\n      }\n    }), renderItem);\n  }) : filteredItems.map((item, index) => renderItem({\n    index,\n    item\n  })));\n});\nListbox.displayName = 'Listbox';\nvar _default = exports[\"default\"] = Listbox;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/Listbox.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _isString = _interopRequireDefault(__webpack_require__(/*! lodash/isString */ \"./node_modules/lodash/isString.js\"));\nvar _isNumber = _interopRequireDefault(__webpack_require__(/*! lodash/isNumber */ \"./node_modules/lodash/isNumber.js\"));\nvar _findIndex = _interopRequireDefault(__webpack_require__(/*! lodash/findIndex */ \"./node_modules/lodash/findIndex.js\"));\nvar _pickBy = _interopRequireDefault(__webpack_require__(/*! lodash/pickBy */ \"./node_modules/lodash/pickBy.js\"));\nvar _getPosition = _interopRequireDefault(__webpack_require__(/*! dom-lib/getPosition */ \"./node_modules/dom-lib/esm/getPosition.js\"));\nvar _scrollTop = _interopRequireDefault(__webpack_require__(/*! dom-lib/scrollTop */ \"./node_modules/dom-lib/esm/scrollTop.js\"));\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _ListItemGroup = _interopRequireDefault(__webpack_require__(/*! ./ListItemGroup */ \"./src/internals/Picker/ListItemGroup.tsx\"));\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _Highlight = _interopRequireDefault(__webpack_require__(/*! ../../Highlight */ \"./src/Highlight/index.tsx\"));\nvar _Windowing = __webpack_require__(/*! ../Windowing */ \"./src/internals/Windowing/index.ts\");\nvar _symbols = __webpack_require__(/*! ../symbols */ \"./src/internals/symbols.ts\");\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _getDataGroupBy = __webpack_require__(/*! ../utils/getDataGroupBy */ \"./src/internals/utils/getDataGroupBy.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/Listbox.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n/**\n * Props for the Listbox component.\n */\n/**\n * Props for the Listbox component.\n * @template Multiple - Whether multiple selection is enabled.\n */\n\nconst Listbox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    data = [],\n    groupBy,\n    maxHeight = 320,\n    activeItemValues = [],\n    disabledItemValues = [],\n    classPrefix = 'listbox',\n    valueKey = 'value',\n    labelKey = 'label',\n    virtualized,\n    listProps,\n    listRef: virtualizedListRef,\n    className,\n    style,\n    focusItemValue,\n    listItemClassPrefix,\n    listItemAs: ListItem,\n    listItemProps,\n    rowHeight = 36,\n    rowGroupHeight = 48,\n    query,\n    renderOptionGroup,\n    renderOption,\n    onGroupTitleClick,\n    onSelect,\n    ...rest\n  } = props;\n  const {\n    prefix,\n    merge,\n    rootPrefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const groupable = typeof groupBy !== 'undefined';\n  const classes = merge(className, rootPrefix('picker-listbox'), prefix('items', {\n    grouped: groupable\n  }));\n  const {\n    id,\n    labelId,\n    popupType,\n    multiple\n  } = (0, _useCombobox.default)();\n  const menuBodyContainerRef = (0, _react.useRef)(null);\n  const listRef = (0, _react.useRef)(null);\n  const [foldedGroupKeys, setFoldedGroupKeys] = (0, _react.useState)([]);\n  const handleGroupTitleClick = (0, _hooks.useEventCallback)((key, event) => {\n    const nextGroupKeys = foldedGroupKeys.filter(item => item !== key);\n    if (nextGroupKeys.length === foldedGroupKeys.length) {\n      nextGroupKeys.push(key);\n    }\n    setFoldedGroupKeys(nextGroupKeys);\n    onGroupTitleClick === null || onGroupTitleClick === void 0 || onGroupTitleClick(event);\n  });\n  const handleSelect = (0, _hooks.useEventCallback)((item, value, event, checked) => {\n    onSelect === null || onSelect === void 0 || onSelect(value, item, event, checked);\n  });\n  const getRowHeight = (list, index) => {\n    const item = list[index];\n    if (groupable && item[_symbols.RSUITE_PICKER_GROUP_KEY] && index !== 0) {\n      return rowGroupHeight;\n    }\n    return rowHeight;\n  };\n  (0, _react.useEffect)(() => {\n    const container = menuBodyContainerRef.current;\n    if (!container) {\n      return;\n    }\n    let activeItem = container.querySelector(`.${prefix('item-focus')}`);\n    if (!activeItem) {\n      activeItem = container.querySelector(`.${prefix('item-active')}`);\n    }\n    if (!activeItem) {\n      return;\n    }\n    const position = (0, _getPosition.default)(activeItem, container);\n    const sTop = (0, _scrollTop.default)(container);\n    const sHeight = (0, _getHeight.default)(container);\n    if (sTop > position.top) {\n      (0, _scrollTop.default)(container, Math.max(0, position.top - 20));\n    } else if (position.top > sTop + sHeight) {\n      (0, _scrollTop.default)(container, Math.max(0, position.top - sHeight + 32));\n    }\n  }, [focusItemValue, menuBodyContainerRef, prefix]);\n  const filteredItems = groupable ? data.filter(item => {\n    var _item$parent;\n    // Display group title items\n    if (item[_symbols.RSUITE_PICKER_GROUP_KEY]) return true;\n\n    // Display items under the unfolded group\n    const groupValue = (0, _get.default)(item, groupBy, '') || (// FIXME-Doma\n    // Usage of `item.parent` is strongly discouraged\n    // It's only here for legacy support\n    // Remove once `item.parent` is completely removed across related components\n    (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[_getDataGroupBy.KEY_GROUP_TITLE]);\n    return !foldedGroupKeys.includes(groupValue);\n  }) : data;\n  const rowCount = filteredItems.length;\n  const renderItem = _ref => {\n    let {\n      index = 0,\n      style,\n      data,\n      item: itemData\n    } = _ref;\n    const item = itemData || data[index];\n    const value = item[valueKey];\n    const itemLabel = item[labelKey];\n    const label = query ? /*#__PURE__*/_react.default.createElement(_Highlight.default, {\n      query: query,\n      as: \"span\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 237,\n        columnNumber: 9\n      }\n    }, itemLabel) : itemLabel;\n    if ((0, _isUndefined.default)(label) && !item[_symbols.RSUITE_PICKER_GROUP_KEY]) {\n      throw Error(`labelKey \"${labelKey}\" is not defined in \"data\" : ${index}`);\n    }\n\n    // Use `value` in keys when If `value` is string or number\n    const itemKey = (0, _isString.default)(value) || (0, _isNumber.default)(value) ? value : index;\n\n    //  Render <ListboxGroup> component when `groupBy` is defined\n    if (groupable && item[_symbols.RSUITE_PICKER_GROUP_KEY]) {\n      const groupValue = item[_getDataGroupBy.KEY_GROUP_TITLE];\n      return /*#__PURE__*/_react.default.createElement(_ListItemGroup.default, {\n        style: style,\n        classPrefix: 'picker-menu-group',\n        className: (0, _classnames.default)({\n          folded: foldedGroupKeys.some(key => key === groupValue)\n        }),\n        key: `group-${groupValue}`,\n        onClick: handleGroupTitleClick.bind(null, groupValue),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 255,\n          columnNumber: 11\n        }\n      }, renderOptionGroup ? renderOptionGroup(groupValue, item) : groupValue);\n    } else if ((0, _isUndefined.default)(value) && !(0, _isUndefined.default)(item[_symbols.RSUITE_PICKER_GROUP_KEY])) {\n      throw Error(`valueKey \"${valueKey}\" is not defined in \"data\" : ${index} `);\n    }\n    const disabled = disabledItemValues === null || disabledItemValues === void 0 ? void 0 : disabledItemValues.some(disabledValue => (0, _utils.shallowEqual)(disabledValue, value));\n    const active = activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues.some(v => (0, _utils.shallowEqual)(v, value));\n    const focus = !(0, _isUndefined.default)(focusItemValue) && (0, _utils.shallowEqual)(focusItemValue, value);\n    return /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({\n      \"aria-posinset\": index + 1,\n      \"aria-setsize\": rowCount,\n      style: style,\n      key: itemKey,\n      disabled: disabled,\n      active: active,\n      focus: focus,\n      value: value,\n      classPrefix: listItemClassPrefix,\n      onSelect: handleSelect.bind(null, item)\n    }, (0, _pickBy.default)(listItemProps, v => v !== undefined), {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 278,\n        columnNumber: 9\n      }\n    }), renderOption ? renderOption(label, item) : label);\n  };\n  (0, _hooks.useMount)(() => {\n    var _listRef$current, _listRef$current$scro;\n    const itemIndex = (0, _findIndex.default)(filteredItems, item => item[valueKey] === (activeItemValues === null || activeItemValues === void 0 ? void 0 : activeItemValues[0]));\n    (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current$scro = _listRef$current.scrollToItem) === null || _listRef$current$scro === void 0 || _listRef$current$scro.call(_listRef$current, itemIndex);\n  });\n  const styles = (0, _utils.mergeStyles)(style, {\n    '--rs-picker-listbox-max-height': (0, _utils.getCssValue)(maxHeight)\n  });\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    role: \"listbox\",\n    id: `${id}-${popupType}`,\n    \"aria-labelledby\": labelId,\n    \"aria-multiselectable\": multiple,\n    className: classes,\n    ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),\n    style: styles\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 304,\n      columnNumber: 7\n    }\n  }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {\n    defaultHeight: maxHeight,\n    style: {\n      width: 'auto',\n      height: 'auto'\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 315,\n      columnNumber: 11\n    }\n  }, _ref2 => {\n    let {\n      height\n    } = _ref2;\n    return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({\n      as: _Windowing.VariableSizeList,\n      ref: (0, _utils.mergeRefs)(listRef, virtualizedListRef),\n      height: height || maxHeight,\n      itemCount: rowCount,\n      itemData: filteredItems,\n      itemSize: getRowHeight.bind(void 0, filteredItems),\n      className: rootPrefix('virt-list')\n    }, listProps, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 317,\n        columnNumber: 15\n      }\n    }), renderItem);\n  }) : filteredItems.map((item, index) => renderItem({\n    index,\n    item\n  })));\n});\nListbox.displayName = 'Listbox';\nvar _default = exports[\"default\"] = Listbox;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/Listbox.tsx?");
+
+/***/ }),
+
+/***/ "./src/internals/Picker/PickerDrawer.tsx":
+/*!***********************************************!*\
+  !*** ./src/internals/Picker/PickerDrawer.tsx ***!
+  \***********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.PickerDrawer = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _Drawer = _interopRequireDefault(__webpack_require__(/*! ../../Drawer */ \"./src/Drawer/index.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/PickerDrawer.tsx\";\nconst speakerRef = () => {\n  // This is just a no-op callback to satisfy the type requirements\n};\nconst PickerDrawer = exports.PickerDrawer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    placement = 'bottom',\n    speaker,\n    onClose,\n    open,\n    ...rest\n  } = props;\n  return /*#__PURE__*/_react.default.createElement(_Drawer.default, (0, _extends2.default)({\n    placement: placement,\n    onClose: onClose,\n    open: open,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 17,\n      columnNumber: 5\n    }\n  }), typeof speaker === 'function' ? speaker({\n    placement\n  }, speakerRef) : speaker);\n});\nPickerDrawer.displayName = 'PickerDrawer';\nvar _default = exports[\"default\"] = PickerDrawer;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerDrawer.tsx?");
 
 /***/ }),
 
@@ -6604,7 +6648,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _addStyle = _interopRequireDefault(__webpack_require__(/*! dom-lib/addStyle */ \"./node_modules/dom-lib/esm/addStyle.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _ = __webpack_require__(/*! ./ */ \"./src/internals/Picker/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/PickerPopup.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n// Define an array of placements that require resizing\nconst resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];\nconst PickerPopup = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    placement\n  } = (0, _.useCombobox)();\n  const {\n    as: Component = 'div',\n    autoWidth,\n    className,\n    classPrefix = 'picker-popup',\n    target,\n    ...rest\n  } = props;\n  const overlayRef = (0, _react.useRef)(null);\n  const handleResize = (0, _hooks.useEventCallback)(() => {\n    const instance = target === null || target === void 0 ? void 0 : target.current;\n    if (instance && placement && resizePlacement.includes(placement)) {\n      var _instance$updatePosit;\n      (_instance$updatePosit = instance.updatePosition) === null || _instance$updatePosit === void 0 || _instance$updatePosit.call(instance);\n    }\n  });\n\n  // Use useElementResize hook to listen for element size changes\n  (0, _hooks.useElementResize)((0, _react.useCallback)(() => overlayRef.current, []), handleResize);\n  (0, _react.useEffect)(() => {\n    const toggle = target === null || target === void 0 ? void 0 : target.current;\n    if (autoWidth && toggle !== null && toggle !== void 0 && toggle.root) {\n      // Get the width of the button and set it to the menu to make them consistent\n      const width = (0, _getWidth.default)((0, _utils.getDOMNode)(toggle.root));\n      if (overlayRef.current) {\n        (0, _addStyle.default)(overlayRef.current, 'min-width', `${width}px`);\n      }\n    }\n  }, [autoWidth, target, overlayRef]);\n  const {\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix());\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    \"data-testid\": \"picker-popup\",\n    ref: (0, _utils.mergeRefs)(overlayRef, ref),\n    className: classes\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 75,\n      columnNumber: 5\n    }\n  }));\n});\nPickerPopup.displayName = 'PickerPopup';\nvar _default = exports[\"default\"] = PickerPopup;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerPopup.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _addStyle = _interopRequireDefault(__webpack_require__(/*! dom-lib/addStyle */ \"./node_modules/dom-lib/esm/addStyle.js\"));\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _ = __webpack_require__(/*! ./ */ \"./src/internals/Picker/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/PickerPopup.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n// Define an array of placements that require resizing\nconst resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];\nconst PickerPopup = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    placement,\n    breakpoint\n  } = (0, _.useCombobox)();\n  const {\n    as: Component = 'div',\n    autoWidth,\n    className,\n    classPrefix = 'picker-popup',\n    target,\n    ...rest\n  } = props;\n  const overlayRef = (0, _react.useRef)(null);\n  const handleResize = (0, _hooks.useEventCallback)(() => {\n    const instance = target === null || target === void 0 ? void 0 : target.current;\n    if (instance && placement && resizePlacement.includes(placement)) {\n      var _instance$updatePosit;\n      (_instance$updatePosit = instance.updatePosition) === null || _instance$updatePosit === void 0 || _instance$updatePosit.call(instance);\n    }\n  });\n\n  // Use useElementResize hook to listen for element size changes\n  (0, _hooks.useElementResize)((0, _react.useCallback)(() => overlayRef.current, []), handleResize);\n  (0, _react.useEffect)(() => {\n    const toggle = target === null || target === void 0 ? void 0 : target.current;\n    if (autoWidth && toggle !== null && toggle !== void 0 && toggle.root) {\n      // Get the width of the button and set it to the menu to make them consistent\n      const width = (0, _getWidth.default)((0, _utils.getDOMNode)(toggle.root));\n      if (overlayRef.current) {\n        (0, _addStyle.default)(overlayRef.current, '--rs-picker-min-width', `${width}px`);\n      }\n    }\n  }, [autoWidth, target, overlayRef]);\n  const {\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix());\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    \"data-testid\": \"picker-popup\",\n    ref: (0, _utils.mergeRefs)(overlayRef, ref),\n    className: classes,\n    \"data-breakpoint\": breakpoint\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 75,\n      columnNumber: 5\n    }\n  }));\n});\nPickerPopup.displayName = 'PickerPopup';\nvar _default = exports[\"default\"] = PickerPopup;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerPopup.tsx?");
 
 /***/ }),
 
@@ -6615,7 +6659,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _ToggleButton = _interopRequireDefault(__webpack_require__(/*! ./ToggleButton */ \"./src/internals/Picker/ToggleButton.tsx\"));\nvar _PickerIndicator = _interopRequireDefault(__webpack_require__(/*! ./PickerIndicator */ \"./src/internals/Picker/PickerIndicator.tsx\"));\nvar _PickerLabel = _interopRequireDefault(__webpack_require__(/*! ./PickerLabel */ \"./src/internals/Picker/PickerLabel.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../../Stack */ \"./src/Stack/index.tsx\"));\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/PickerToggle.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst PickerToggle = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    active,\n    as: Component = _ToggleButton.default,\n    classPrefix = 'picker-toggle',\n    children,\n    caret = true,\n    className,\n    disabled,\n    readOnly,\n    plaintext,\n    hasValue,\n    loading = false,\n    cleanable,\n    tabIndex = 0,\n    inputValue: inputValueProp,\n    focusItemValue,\n    placement = 'bottomStart',\n    caretComponent,\n    caretAs = caretComponent,\n    label,\n    name,\n    size,\n    onClean,\n    ...rest\n  } = props;\n  const combobox = (0, _react.useRef)(null);\n  const {\n    withPrefix,\n    merge,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    id,\n    labelId,\n    popupType\n  } = (0, _useCombobox.default)();\n  const inputValue = (0, _react.useMemo)(() => {\n    if (typeof inputValueProp === 'number' || typeof inputValueProp === 'string') {\n      return inputValueProp;\n    } else if (Array.isArray(inputValueProp)) {\n      return inputValueProp.join(',');\n    }\n    return '';\n  }, [inputValueProp]);\n  const classes = merge(className, withPrefix({\n    active\n  }));\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    var _combobox$current;\n    event.stopPropagation();\n    onClean === null || onClean === void 0 || onClean(event);\n    (_combobox$current = combobox.current) === null || _combobox$current === void 0 || _combobox$current.focus();\n  });\n  const ToggleCaret = (0, _hooks.useToggleCaret)(placement);\n  const Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"notSelected\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 97,\n        columnNumber: 7\n      }\n    }, hasValue ? children : null);\n  }\n  const showCleanButton = cleanable && hasValue && !readOnly;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"combobox\",\n    id: id,\n    size: size,\n    \"aria-haspopup\": popupType,\n    \"aria-expanded\": active,\n    \"aria-disabled\": disabled,\n    \"aria-controls\": id ? `${id}-${popupType}` : undefined,\n    \"aria-labelledby\": labelId,\n    \"aria-describedby\": id ? `${id}-describe` : undefined,\n    \"aria-activedescendant\": active && focusItemValue ? `${id}-opt-${focusItemValue}` : undefined\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(combobox, ref),\n    disabled: disabled,\n    tabIndex: disabled ? undefined : tabIndex,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 106,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Stack.default, {\n    className: prefix('stack'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 123,\n      columnNumber: 7\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 125,\n      columnNumber: 11\n    }\n  }, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {\n    as: \"span\",\n    className: prefix('label'),\n    id: labelId,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 126,\n      columnNumber: 13\n    }\n  }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    grow: 1,\n    style: {\n      overflow: 'hidden'\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 131,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", {\n    readOnly: true,\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    \"data-testid\": \"picker-toggle-input\",\n    name: name,\n    value: inputValue,\n    className: prefix('textbox', 'read-only'),\n    style: {\n      pointerEvents: 'none'\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 11\n    }\n  }), children ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(hasValue ? 'value' : 'placeholder'),\n    id: `${id}-describe`,\n    \"data-testid\": \"picker-describe\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 143,\n      columnNumber: 13\n    }\n  }, children) : null), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    className: prefix`indicator`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 152,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {\n    size: size,\n    as: _react.default.Fragment,\n    loading: loading,\n    caretAs: caret ? Caret : null,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 153,\n      columnNumber: 11\n    }\n  }))));\n});\nPickerToggle.displayName = 'PickerToggle';\nvar _default = exports[\"default\"] = PickerToggle;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerToggle.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _omit2 = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _ToggleButton = _interopRequireDefault(__webpack_require__(/*! ./ToggleButton */ \"./src/internals/Picker/ToggleButton.tsx\"));\nvar _PickerIndicator = _interopRequireDefault(__webpack_require__(/*! ./PickerIndicator */ \"./src/internals/Picker/PickerIndicator.tsx\"));\nvar _PickerLabel = _interopRequireDefault(__webpack_require__(/*! ./PickerLabel */ \"./src/internals/Picker/PickerLabel.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../../Stack */ \"./src/Stack/index.tsx\"));\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ./hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _PickerToggleTrigger = __webpack_require__(/*! ./PickerToggleTrigger */ \"./src/internals/Picker/PickerToggleTrigger.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/PickerToggle.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst PickerToggle = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    active,\n    as: Component = _ToggleButton.default,\n    classPrefix = 'picker-toggle',\n    children,\n    caret = true,\n    className,\n    disabled,\n    readOnly,\n    plaintext,\n    hasValue,\n    loading = false,\n    cleanable,\n    countable,\n    tabIndex = 0,\n    inputValue: inputValueProp,\n    focusItemValue,\n    placement = 'bottomStart',\n    caretComponent,\n    caretAs = caretComponent,\n    label,\n    name,\n    size,\n    onClean,\n    ...rest\n  } = props;\n  const combobox = (0, _react.useRef)(null);\n  const {\n    withPrefix,\n    merge,\n    prefix\n  } = (0, _hooks.useStyles)(classPrefix);\n  const {\n    id,\n    labelId,\n    popupType\n  } = (0, _useCombobox.default)();\n  const inputValue = (0, _react.useMemo)(() => {\n    if (typeof inputValueProp === 'number' || typeof inputValueProp === 'string') {\n      return inputValueProp;\n    } else if (Array.isArray(inputValueProp)) {\n      return inputValueProp.join(',');\n    }\n    return '';\n  }, [inputValueProp]);\n  const classes = merge(className, withPrefix({\n    active\n  }));\n  const handleClean = (0, _hooks.useEventCallback)(event => {\n    var _combobox$current;\n    event.stopPropagation();\n    onClean === null || onClean === void 0 || onClean(event);\n    (_combobox$current = combobox.current) === null || _combobox$current === void 0 || _combobox$current.focus();\n  });\n  const ToggleCaret = (0, _hooks.useToggleCaret)(placement);\n  const Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      ref: ref,\n      localeKey: \"notSelected\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 101,\n        columnNumber: 7\n      }\n    }, hasValue ? children : null);\n  }\n  const showCleanButton = cleanable && hasValue && !readOnly;\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"combobox\",\n    id: id,\n    size: size,\n    \"aria-haspopup\": popupType,\n    \"aria-expanded\": active,\n    \"aria-disabled\": disabled,\n    \"aria-controls\": id ? `${id}-${popupType}` : undefined,\n    \"aria-labelledby\": labelId,\n    \"aria-describedby\": id ? `${id}-describe` : undefined,\n    \"aria-activedescendant\": active && focusItemValue ? `${id}-opt-${focusItemValue}` : undefined,\n    \"data-has-value\": hasValue,\n    \"data-cleanable\": cleanable,\n    \"data-countable\": countable,\n    \"data-size\": size,\n    \"data-readonly\": readOnly,\n    ref: (0, _utils.mergeRefs)(combobox, ref),\n    disabled: disabled,\n    tabIndex: disabled ? undefined : tabIndex,\n    className: classes\n  }, (0, _omit2.default)(rest, _PickerToggleTrigger.triggerPropKeys), {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 110,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Stack.default, {\n    className: prefix('stack'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 7\n    }\n  }, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 134,\n      columnNumber: 11\n    }\n  }, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {\n    as: \"span\",\n    className: prefix('label'),\n    id: labelId,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 135,\n      columnNumber: 13\n    }\n  }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    grow: 1,\n    style: {\n      overflow: 'hidden'\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 140,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", {\n    readOnly: true,\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    \"data-testid\": \"picker-toggle-input\",\n    name: name,\n    value: inputValue,\n    className: prefix('textbox', 'read-only'),\n    style: {\n      pointerEvents: 'none'\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 141,\n      columnNumber: 11\n    }\n  }), children ? /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix(hasValue ? 'value' : 'placeholder'),\n    id: `${id}-describe`,\n    \"data-testid\": \"picker-describe\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 152,\n      columnNumber: 13\n    }\n  }, children) : null), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n    className: prefix`indicator`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 161,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {\n    size: size,\n    as: _react.default.Fragment,\n    loading: loading,\n    caretAs: caret ? Caret : null,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 162,\n      columnNumber: 11\n    }\n  }))));\n});\nPickerToggle.displayName = 'PickerToggle';\nvar _default = exports[\"default\"] = PickerToggle;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerToggle.tsx?");
 
 /***/ }),
 
@@ -6626,7 +6670,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.pickTriggerPropKeys = exports.omitTriggerPropKeys = exports[\"default\"] = exports.ComboboxContext = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _OverlayTrigger = _interopRequireDefault(__webpack_require__(/*! ../Overlay/OverlayTrigger */ \"./src/internals/Overlay/OverlayTrigger.tsx\"));\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/PickerToggleTrigger.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst omitTriggerPropKeys = exports.omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];\nconst pickTriggerPropKeys = exports.pickTriggerPropKeys = [...omitTriggerPropKeys, 'disabled', 'plaintext', 'readOnly', 'loading', 'label'];\nconst ComboboxContext = exports.ComboboxContext = /*#__PURE__*/_react.default.createContext({\n  popupType: 'listbox'\n});\nconst PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    pickerProps,\n    speaker,\n    placement,\n    trigger = 'click',\n    id,\n    multiple,\n    popupType = 'listbox',\n    ...rest\n  } = props;\n  const pickerTriggerProps = (0, _pick.default)(pickerProps, pickTriggerPropKeys);\n  const pickerId = (0, _hooks.useUniqueId)('rs-', id);\n  const comboboxContext = (0, _react.useMemo)(() => ({\n    id: pickerId,\n    hasLabel: typeof pickerTriggerProps.label !== 'undefined',\n    multiple,\n    placement,\n    popupType\n  }), [pickerId, multiple, placement, popupType]);\n  return /*#__PURE__*/_react.default.createElement(ComboboxContext.Provider, {\n    value: comboboxContext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 92,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, rest, {\n    disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,\n    ref: ref,\n    trigger: trigger,\n    placement: placement,\n    speaker: speaker,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 93,\n      columnNumber: 9\n    }\n  })));\n});\nPickerToggleTrigger.displayName = 'PickerToggleTrigger';\nvar _default = exports[\"default\"] = PickerToggleTrigger;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerToggleTrigger.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.triggerPropKeys = exports.pickerCommonPropKeys = exports.overlayPropKeys = exports[\"default\"] = exports.PickerToggleTrigger = exports.ComboboxContext = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../Box */ \"./src/internals/Box/index.tsx\"));\nvar _PickerDrawer = _interopRequireDefault(__webpack_require__(/*! ./PickerDrawer */ \"./src/internals/Picker/PickerDrawer.tsx\"));\nvar _OverlayTrigger = _interopRequireDefault(__webpack_require__(/*! ../Overlay/OverlayTrigger */ \"./src/internals/Overlay/OverlayTrigger.tsx\"));\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _useBreakpointValue = __webpack_require__(/*! ../../useBreakpointValue */ \"./src/useBreakpointValue/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Picker/PickerToggleTrigger.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nconst overlayPropKeys = exports.overlayPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];\nconst pickerCommonPropKeys = exports.pickerCommonPropKeys = ['disabled', 'plaintext', 'readOnly', 'loading', 'label'];\nconst triggerPropKeys = exports.triggerPropKeys = [...overlayPropKeys, ...pickerCommonPropKeys];\nconst ComboboxContext = exports.ComboboxContext = /*#__PURE__*/_react.default.createContext({\n  popupType: 'listbox'\n});\nconst PickerToggleTrigger = exports.PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    appearance,\n    as,\n    block,\n    children,\n    className,\n    classPrefix = 'picker',\n    disabled,\n    id,\n    multiple,\n    name,\n    triggerProps,\n    placement,\n    popupType = 'listbox',\n    rootRef,\n    speaker,\n    style,\n    size,\n    trigger = 'click',\n    responsive = true,\n    onKeyDown,\n    onClick,\n    ...rest\n  } = props;\n  const pickerTriggerProps = (0, _pick.default)(triggerProps, triggerPropKeys);\n  const pickerId = (0, _hooks.useUniqueId)('rs-', id);\n  const breakpoint = (0, _useBreakpointValue.useBreakpointValue)({\n    xsOnly: 'xs'\n  }, {\n    enabled: responsive\n  });\n  // Only use the breakpoint value if not disabled\n  const effectiveBreakpoint = disabled ? undefined : breakpoint;\n  const comboboxContext = (0, _react.useMemo)(() => ({\n    id: pickerId,\n    hasLabel: typeof pickerTriggerProps.label !== 'undefined',\n    multiple,\n    placement,\n    breakpoint: effectiveBreakpoint,\n    popupType\n  }), [pickerId, multiple, placement, effectiveBreakpoint, popupType]);\n  const {\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix());\n  return /*#__PURE__*/_react.default.createElement(ComboboxContext.Provider, {\n    value: comboboxContext,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 152,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, pickerTriggerProps, {\n    disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,\n    ref: ref,\n    trigger: trigger,\n    placement: placement,\n    speaker: speaker,\n    overlayAs: effectiveBreakpoint === 'xs' ? _PickerDrawer.default : undefined,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 153,\n      columnNumber: 9\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    className: classes,\n    style: style,\n    ref: rootRef,\n    \"data-picker\": name,\n    \"data-variant\": appearance,\n    \"data-size\": size,\n    \"data-disabled\": disabled || undefined,\n    \"data-block\": block || undefined,\n    \"data-testid\": \"picker\",\n    onKeyDown: onKeyDown,\n    onClick: onClick\n  }, (0, _omit.default)(rest, [...triggerPropKeys]), {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 162,\n      columnNumber: 11\n    }\n  }), children)));\n});\nPickerToggleTrigger.displayName = 'PickerToggleTrigger';\nvar _default = exports[\"default\"] = PickerToggleTrigger;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/PickerToggleTrigger.tsx?");
 
 /***/ }),
 
@@ -6659,7 +6703,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useToggleKeyDownEvent = exports.useSearch = exports.usePickerRef = exports.usePickerClassName = exports.useFocusItemValue = exports.useCombobox = void 0;\nvar _usePickerRef = _interopRequireDefault(__webpack_require__(/*! ./usePickerRef */ \"./src/internals/Picker/hooks/usePickerRef.ts\"));\nexports.usePickerRef = _usePickerRef.default;\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ./useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nexports.useCombobox = _useCombobox.default;\nvar _useFocusItemValue = _interopRequireDefault(__webpack_require__(/*! ./useFocusItemValue */ \"./src/internals/Picker/hooks/useFocusItemValue.ts\"));\nexports.useFocusItemValue = _useFocusItemValue.default;\nvar _useToggleKeyDownEvent = _interopRequireDefault(__webpack_require__(/*! ./useToggleKeyDownEvent */ \"./src/internals/Picker/hooks/useToggleKeyDownEvent.ts\"));\nexports.useToggleKeyDownEvent = _useToggleKeyDownEvent.default;\nvar _useSearch = _interopRequireDefault(__webpack_require__(/*! ./useSearch */ \"./src/internals/Picker/hooks/useSearch.ts\"));\nexports.useSearch = _useSearch.default;\nvar _usePickerClassName = _interopRequireDefault(__webpack_require__(/*! ./usePickerClassName */ \"./src/internals/Picker/hooks/usePickerClassName.ts\"));\nexports.usePickerClassName = _usePickerClassName.default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/index.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useToggleKeyDownEvent = exports.useSearch = exports.usePickerRef = exports.useFocusItemValue = exports.useCombobox = void 0;\nvar _usePickerRef = _interopRequireDefault(__webpack_require__(/*! ./usePickerRef */ \"./src/internals/Picker/hooks/usePickerRef.ts\"));\nexports.usePickerRef = _usePickerRef.default;\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ./useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nexports.useCombobox = _useCombobox.default;\nvar _useFocusItemValue = _interopRequireDefault(__webpack_require__(/*! ./useFocusItemValue */ \"./src/internals/Picker/hooks/useFocusItemValue.ts\"));\nexports.useFocusItemValue = _useFocusItemValue.default;\nvar _useToggleKeyDownEvent = _interopRequireDefault(__webpack_require__(/*! ./useToggleKeyDownEvent */ \"./src/internals/Picker/hooks/useToggleKeyDownEvent.ts\"));\nexports.useToggleKeyDownEvent = _useToggleKeyDownEvent.default;\nvar _useSearch = _interopRequireDefault(__webpack_require__(/*! ./useSearch */ \"./src/internals/Picker/hooks/useSearch.ts\"));\nexports.useSearch = _useSearch.default;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/index.ts?");
 
 /***/ }),
 
@@ -6670,7 +6714,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _PickerToggleTrigger = __webpack_require__(/*! ../PickerToggleTrigger */ \"./src/internals/Picker/PickerToggleTrigger.tsx\");\nfunction useCombobox() {\n  const {\n    id,\n    hasLabel,\n    popupType,\n    multiple,\n    placement\n  } = (0, _react.useContext)(_PickerToggleTrigger.ComboboxContext);\n  return {\n    id,\n    popupType,\n    multiple,\n    placement,\n    labelId: hasLabel ? `${id}-label` : undefined\n  };\n}\nvar _default = exports[\"default\"] = useCombobox;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/useCombobox.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _PickerToggleTrigger = __webpack_require__(/*! ../PickerToggleTrigger */ \"./src/internals/Picker/PickerToggleTrigger.tsx\");\nfunction useCombobox() {\n  const {\n    id,\n    hasLabel,\n    popupType,\n    multiple,\n    placement,\n    breakpoint\n  } = (0, _react.useContext)(_PickerToggleTrigger.ComboboxContext);\n  return {\n    id,\n    popupType,\n    multiple,\n    placement,\n    breakpoint,\n    labelId: hasLabel ? `${id}-label` : undefined\n  };\n}\nvar _default = exports[\"default\"] = useCombobox;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/useCombobox.ts?");
 
 /***/ }),
 
@@ -6685,17 +6729,6 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
-/***/ "./src/internals/Picker/hooks/usePickerClassName.ts":
-/*!**********************************************************!*\
-  !*** ./src/internals/Picker/hooks/usePickerClassName.ts ***!
-  \**********************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _hooks = __webpack_require__(/*! ../../hooks */ \"./src/internals/hooks/index.ts\");\n/**\n * The className of the assembled Toggle is on the Picker.\n */\nfunction usePickerClassName(props) {\n  const {\n    name,\n    classPrefix,\n    className,\n    appearance,\n    cleanable,\n    block,\n    disabled,\n    countable,\n    readOnly,\n    plaintext,\n    hasValue,\n    ...rest\n  } = props;\n  const {\n    withPrefix,\n    merge\n  } = (0, _hooks.useStyles)(classPrefix);\n  const classes = merge(className, withPrefix(name, appearance, 'toggle-wrapper', {\n    'read-only': readOnly,\n    'has-value': hasValue,\n    cleanable,\n    block,\n    disabled,\n    countable,\n    plaintext\n  }));\n\n  // Those props that're used for composing the className\n  const usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [...Object.keys(rest || {}), 'disabled', 'readOnly', 'plaintext', 'name']));\n  return [classes, usedClassNamePropKeys];\n}\nvar _default = exports[\"default\"] = usePickerClassName;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/usePickerClassName.ts?");
-
-/***/ }),
-
 /***/ "./src/internals/Picker/hooks/usePickerRef.ts":
 /*!****************************************************!*\
   !*** ./src/internals/Picker/hooks/usePickerRef.ts ***!
@@ -6736,7 +6769,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _const
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nvar _exportNames = {\n  Listbox: true,\n  ListItem: true,\n  ListItemGroup: true,\n  ListCheckItem: true,\n  PickerPopup: true,\n  PickerToggle: true,\n  PickerLabel: true,\n  PickerIndicator: true,\n  PickerToggleTrigger: true,\n  SelectedElement: true,\n  pickTriggerPropKeys: true,\n  omitTriggerPropKeys: true\n};\nexports.pickTriggerPropKeys = exports.omitTriggerPropKeys = exports.SelectedElement = exports.PickerToggleTrigger = exports.PickerToggle = exports.PickerPopup = exports.PickerLabel = exports.PickerIndicator = exports.Listbox = exports.ListItemGroup = exports.ListItem = exports.ListCheckItem = void 0;\nvar _Listbox = _interopRequireDefault(__webpack_require__(/*! ./Listbox */ \"./src/internals/Picker/Listbox.tsx\"));\nexports.Listbox = _Listbox.default;\nvar _ListItem = _interopRequireDefault(__webpack_require__(/*! ./ListItem */ \"./src/internals/Picker/ListItem.tsx\"));\nexports.ListItem = _ListItem.default;\nvar _ListItemGroup = _interopRequireDefault(__webpack_require__(/*! ./ListItemGroup */ \"./src/internals/Picker/ListItemGroup.tsx\"));\nexports.ListItemGroup = _ListItemGroup.default;\nvar _ListCheckItem = _interopRequireDefault(__webpack_require__(/*! ./ListCheckItem */ \"./src/internals/Picker/ListCheckItem.tsx\"));\nexports.ListCheckItem = _ListCheckItem.default;\nvar _PickerPopup = _interopRequireDefault(__webpack_require__(/*! ./PickerPopup */ \"./src/internals/Picker/PickerPopup.tsx\"));\nexports.PickerPopup = _PickerPopup.default;\nvar _PickerToggle = _interopRequireDefault(__webpack_require__(/*! ./PickerToggle */ \"./src/internals/Picker/PickerToggle.tsx\"));\nexports.PickerToggle = _PickerToggle.default;\nvar _PickerLabel = _interopRequireDefault(__webpack_require__(/*! ./PickerLabel */ \"./src/internals/Picker/PickerLabel.tsx\"));\nexports.PickerLabel = _PickerLabel.default;\nvar _PickerIndicator = _interopRequireDefault(__webpack_require__(/*! ./PickerIndicator */ \"./src/internals/Picker/PickerIndicator.tsx\"));\nexports.PickerIndicator = _PickerIndicator.default;\nvar _PickerToggleTrigger = _interopRequireWildcard(__webpack_require__(/*! ./PickerToggleTrigger */ \"./src/internals/Picker/PickerToggleTrigger.tsx\"));\nexports.PickerToggleTrigger = _PickerToggleTrigger.default;\nexports.pickTriggerPropKeys = _PickerToggleTrigger.pickTriggerPropKeys;\nexports.omitTriggerPropKeys = _PickerToggleTrigger.omitTriggerPropKeys;\nvar _SelectedElement = _interopRequireDefault(__webpack_require__(/*! ./SelectedElement */ \"./src/internals/Picker/SelectedElement.tsx\"));\nexports.SelectedElement = _SelectedElement.default;\nvar _hooks = __webpack_require__(/*! ./hooks */ \"./src/internals/Picker/hooks/index.ts\");\nObject.keys(_hooks).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _hooks[key]) return;\n  exports[key] = _hooks[key];\n});\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/internals/Picker/utils.ts\");\nObject.keys(_utils).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _utils[key]) return;\n  exports[key] = _utils[key];\n});\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/index.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nvar _exportNames = {\n  Listbox: true,\n  ListItem: true,\n  ListItemGroup: true,\n  ListCheckItem: true,\n  PickerPopup: true,\n  PickerToggle: true,\n  PickerLabel: true,\n  PickerIndicator: true,\n  SelectedElement: true\n};\nexports.SelectedElement = exports.PickerToggle = exports.PickerPopup = exports.PickerLabel = exports.PickerIndicator = exports.Listbox = exports.ListItemGroup = exports.ListItem = exports.ListCheckItem = void 0;\nvar _PickerToggleTrigger = __webpack_require__(/*! ./PickerToggleTrigger */ \"./src/internals/Picker/PickerToggleTrigger.tsx\");\nObject.keys(_PickerToggleTrigger).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _PickerToggleTrigger[key]) return;\n  exports[key] = _PickerToggleTrigger[key];\n});\nvar _Listbox = _interopRequireDefault(__webpack_require__(/*! ./Listbox */ \"./src/internals/Picker/Listbox.tsx\"));\nexports.Listbox = _Listbox.default;\nvar _ListItem = _interopRequireDefault(__webpack_require__(/*! ./ListItem */ \"./src/internals/Picker/ListItem.tsx\"));\nexports.ListItem = _ListItem.default;\nvar _ListItemGroup = _interopRequireDefault(__webpack_require__(/*! ./ListItemGroup */ \"./src/internals/Picker/ListItemGroup.tsx\"));\nexports.ListItemGroup = _ListItemGroup.default;\nvar _ListCheckItem = _interopRequireDefault(__webpack_require__(/*! ./ListCheckItem */ \"./src/internals/Picker/ListCheckItem.tsx\"));\nexports.ListCheckItem = _ListCheckItem.default;\nvar _PickerPopup = _interopRequireDefault(__webpack_require__(/*! ./PickerPopup */ \"./src/internals/Picker/PickerPopup.tsx\"));\nexports.PickerPopup = _PickerPopup.default;\nvar _PickerToggle = _interopRequireDefault(__webpack_require__(/*! ./PickerToggle */ \"./src/internals/Picker/PickerToggle.tsx\"));\nexports.PickerToggle = _PickerToggle.default;\nvar _PickerLabel = _interopRequireDefault(__webpack_require__(/*! ./PickerLabel */ \"./src/internals/Picker/PickerLabel.tsx\"));\nexports.PickerLabel = _PickerLabel.default;\nvar _PickerIndicator = _interopRequireDefault(__webpack_require__(/*! ./PickerIndicator */ \"./src/internals/Picker/PickerIndicator.tsx\"));\nexports.PickerIndicator = _PickerIndicator.default;\nvar _SelectedElement = _interopRequireDefault(__webpack_require__(/*! ./SelectedElement */ \"./src/internals/Picker/SelectedElement.tsx\"));\nexports.SelectedElement = _SelectedElement.default;\nvar _hooks = __webpack_require__(/*! ./hooks */ \"./src/internals/Picker/hooks/index.ts\");\nObject.keys(_hooks).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _hooks[key]) return;\n  exports[key] = _hooks[key];\n});\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/internals/Picker/utils.ts\");\nObject.keys(_utils).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _utils[key]) return;\n  exports[key] = _utils[key];\n});\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/index.ts?");
 
 /***/ }),
 
@@ -6795,6 +6828,28 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/internals/SafeAnchor/SafeAnchor.tsx":
+/*!*************************************************!*\
+  !*** ./src/internals/SafeAnchor/SafeAnchor.tsx ***!
+  \*************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../Box */ \"./src/internals/Box/index.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/SafeAnchor/SafeAnchor.tsx\";\nfunction _getRequireWildcardCache(e) { if (\"function\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }\nfunction _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\"default\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }\nfunction isTrivialHref(href) {\n  return !href || href.trim() === '#';\n}\n\n/**\n * A SafeAnchor is a wrapper around the `<a>` HTML element.\n * @private\n */\nconst SafeAnchor = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('SafeAnchor', props);\n  const {\n    as = 'a',\n    href,\n    disabled,\n    onClick,\n    ...restProps\n  } = propsWithDefaults;\n  const handleClick = (0, _react.useCallback)(event => {\n    if (disabled || isTrivialHref(href)) {\n      event.preventDefault();\n    }\n    if (disabled) {\n      event.stopPropagation();\n      return;\n    }\n    onClick === null || onClick === void 0 || onClick(event);\n  }, [disabled, href, onClick]);\n\n  // There are default role and href attributes on the node to ensure Focus management and keyboard interactions.\n  const trivialProps = isTrivialHref(href) ? {\n    role: 'button',\n    href: '#'\n  } : null;\n  if (disabled) {\n    restProps.tabIndex = -1;\n    restProps['aria-disabled'] = true;\n  }\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: as,\n    ref: ref,\n    href: href\n  }, trivialProps, restProps, {\n    onClick: handleClick,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 50,\n      columnNumber: 5\n    }\n  }));\n});\nSafeAnchor.displayName = 'SafeAnchor';\nvar _default = exports[\"default\"] = SafeAnchor;\n\n//# sourceURL=webpack://rsuite/./src/internals/SafeAnchor/SafeAnchor.tsx?");
+
+/***/ }),
+
+/***/ "./src/internals/SafeAnchor/index.tsx":
+/*!********************************************!*\
+  !*** ./src/internals/SafeAnchor/index.tsx ***!
+  \********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _SafeAnchor = _interopRequireDefault(__webpack_require__(/*! ./SafeAnchor */ \"./src/internals/SafeAnchor/SafeAnchor.tsx\"));\nexports.SafeAnchor = _SafeAnchor.default;\n// export types\n// export components\nvar _default = exports[\"default\"] = _SafeAnchor.default;\n\n//# sourceURL=webpack://rsuite/./src/internals/SafeAnchor/index.tsx?");
+
+/***/ }),
+
 /***/ "./src/internals/ScrollView/ScrollView.tsx":
 /*!*************************************************!*\
   !*** ./src/internals/ScrollView/ScrollView.tsx ***!
@@ -6890,7 +6945,7 @@ eval("\n\nexports.__esModule = true;\nexports.useTreeImperativeHandle = exports.
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ../Picker/hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _ScrollView = _interopRequireDefault(__webpack_require__(/*! ../ScrollView */ \"./src/internals/ScrollView/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../Box */ \"./src/internals/Box/index.tsx\"));\nvar _TreeProvider = __webpack_require__(/*! ./TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Tree/TreeView.tsx\";\nconst ScrollShadowView = (0, _utils.forwardRef)((props, ref) => {\n  return /*#__PURE__*/_react.default.createElement(_ScrollView.default, (0, _extends2.default)({\n    scrollShadow: true,\n    ref: ref\n  }, props, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 15,\n      columnNumber: 10\n    }\n  }));\n});\nconst TreeView = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    as = 'div',\n    children,\n    treeRootClassName,\n    multiselectable,\n    style,\n    height,\n    ...rest\n  } = props;\n  const {\n    scrollShadow,\n    virtualized\n  } = (0, _TreeProvider.useTreeContextProps)();\n  const {\n    id,\n    labelId,\n    popupType\n  } = (0, _useCombobox.default)();\n\n  // If the tree is virtualized, the scroll shadow is not needed.\n  const treeAs = scrollShadow && !virtualized ? ScrollShadowView : as;\n\n  // If the tree is virtualized, the height is not needed.\n  const viewStyles = {\n    height: virtualized ? undefined : height,\n    ...style\n  };\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: treeAs,\n    role: \"tree\",\n    style: viewStyles,\n    id: id ? `${id}-${popupType}` : undefined,\n    \"aria-multiselectable\": multiselectable,\n    \"aria-labelledby\": labelId,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 38,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: treeRootClassName,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 48,\n      columnNumber: 7\n    }\n  }, children));\n});\nTreeView.displayName = 'TreeView';\nvar _default = exports[\"default\"] = TreeView;\n\n//# sourceURL=webpack://rsuite/./src/internals/Tree/TreeView.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ../Picker/hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _ScrollView = _interopRequireDefault(__webpack_require__(/*! ../ScrollView */ \"./src/internals/ScrollView/index.tsx\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../Box */ \"./src/internals/Box/index.tsx\"));\nvar _TreeProvider = __webpack_require__(/*! ./TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Tree/TreeView.tsx\";\nconst ScrollShadowView = (0, _utils.forwardRef)((props, ref) => {\n  return /*#__PURE__*/_react.default.createElement(_ScrollView.default, (0, _extends2.default)({\n    scrollShadow: true,\n    ref: ref\n  }, props, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 15,\n      columnNumber: 10\n    }\n  }));\n});\nconst TreeView = (0, _utils.forwardRef)((props, ref) => {\n  const {\n    as = 'div',\n    children,\n    treeRootClassName,\n    multiselectable,\n    style,\n    height,\n    ...rest\n  } = props;\n  const {\n    scrollShadow,\n    virtualized\n  } = (0, _TreeProvider.useTreeContextProps)();\n  const {\n    id,\n    labelId,\n    popupType\n  } = (0, _useCombobox.default)();\n\n  // If the tree is virtualized, the scroll shadow is not needed.\n  const treeAs = scrollShadow && !virtualized ? ScrollShadowView : as;\n\n  // If the tree is virtualized, the height is not needed.\n  const viewStyles = (0, _utils.mergeStyles)(style, {\n    '--rs-tree-view-height': virtualized ? undefined : (0, _utils.getCssValue)(height)\n  });\n  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({\n    as: treeAs,\n    role: \"tree\",\n    style: viewStyles,\n    id: id ? `${id}-${popupType}` : undefined,\n    \"aria-multiselectable\": multiselectable,\n    \"aria-labelledby\": labelId,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 40,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: treeRootClassName,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 50,\n      columnNumber: 7\n    }\n  }, children));\n});\nTreeView.displayName = 'TreeView';\nvar _default = exports[\"default\"] = TreeView;\n\n//# sourceURL=webpack://rsuite/./src/internals/Tree/TreeView.tsx?");
 
 /***/ }),
 
@@ -7187,7 +7242,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.useRootClose = useRootClose;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\nvar _ownerDocument = _interopRequireDefault(__webpack_require__(/*! dom-lib/ownerDocument */ \"./node_modules/dom-lib/esm/ownerDocument.js\"));\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _getDOMNode = _interopRequireDefault(__webpack_require__(/*! ../utils/getDOMNode */ \"./src/internals/utils/getDOMNode.ts\"));\nvar _constants = __webpack_require__(/*! ../constants */ \"./src/internals/constants/index.ts\");\nfunction isLeftClickEvent(event) {\n  return (event === null || event === void 0 ? void 0 : event.button) === 0;\n}\nfunction isModifiedEvent(event) {\n  return !!(event.metaKey || event.altKey || event.ctrlKey || event !== null && event !== void 0 && event.shiftKey);\n}\n/**\n * A hook that listens to the document click event and closes the overlay.\n * @param onRootClose\n * @param param1\n * @todo Allow different behaviors based on whether clicked element is focusable\n */\nfunction useRootClose(onRootClose, _ref) {\n  let {\n    disabled,\n    triggerTarget,\n    overlayTarget,\n    listenEscape = true\n  } = _ref;\n  const handleDocumentKeyUp = (0, _react.useCallback)(event => {\n    if (listenEscape && event.key === _constants.KEY_VALUES.ESC) {\n      onRootClose === null || onRootClose === void 0 || onRootClose(event);\n    }\n  }, [listenEscape, onRootClose]);\n  const handleDocumentMouseDown = (0, _react.useCallback)(event => {\n    const triggerElement = (0, _getDOMNode.default)(triggerTarget);\n    const overlayElement = (0, _getDOMNode.default)(overlayTarget);\n\n    // Check if the clicked element is a trigger.\n    if (triggerElement && (0, _contains.default)(triggerElement, event.target)) {\n      return;\n    }\n\n    // Check if the clicked element is a overlay.\n    if (overlayElement && (0, _contains.default)(overlayElement, event.target)) {\n      return;\n    }\n    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {\n      return;\n    }\n    onRootClose === null || onRootClose === void 0 || onRootClose(event);\n  }, [onRootClose, triggerTarget, overlayTarget]);\n  (0, _react.useEffect)(() => {\n    const currentTarget = (0, _getDOMNode.default)(triggerTarget);\n    if (disabled || !currentTarget) return;\n    const doc = (0, _ownerDocument.default)(currentTarget);\n    const onDocumentMouseDownListener = (0, _on.default)(doc, 'mousedown', handleDocumentMouseDown, true);\n    const onDocumentKeyupListener = (0, _on.default)(doc, 'keyup', handleDocumentKeyUp);\n    return () => {\n      onDocumentMouseDownListener === null || onDocumentMouseDownListener === void 0 || onDocumentMouseDownListener.off();\n      onDocumentKeyupListener === null || onDocumentKeyupListener === void 0 || onDocumentKeyupListener.off();\n    };\n  }, [triggerTarget, disabled, onRootClose, handleDocumentMouseDown, handleDocumentKeyUp]);\n}\nvar _default = exports[\"default\"] = useRootClose;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useRootClose.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.useRootClose = useRootClose;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\nvar _ownerDocument = _interopRequireDefault(__webpack_require__(/*! dom-lib/ownerDocument */ \"./node_modules/dom-lib/esm/ownerDocument.js\"));\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/internals/utils/index.ts\");\nvar _constants = __webpack_require__(/*! ../constants */ \"./src/internals/constants/index.ts\");\nfunction isLeftClickEvent(event) {\n  return (event === null || event === void 0 ? void 0 : event.button) === 0;\n}\nfunction isModifiedEvent(event) {\n  return !!(event.metaKey || event.altKey || event.ctrlKey || event !== null && event !== void 0 && event.shiftKey);\n}\n/**\n * A hook that listens to the document click event and closes the overlay.\n * @param onRootClose\n * @param param1\n * @todo Allow different behaviors based on whether clicked element is focusable\n */\nfunction useRootClose(onRootClose, _ref) {\n  let {\n    disabled,\n    triggerTarget,\n    overlayTarget,\n    listenEscape = true\n  } = _ref;\n  const handleDocumentKeyUp = (0, _react.useCallback)(event => {\n    if (listenEscape && event.key === _constants.KEY_VALUES.ESC) {\n      onRootClose === null || onRootClose === void 0 || onRootClose(event);\n    }\n  }, [listenEscape, onRootClose]);\n  const handleDocumentMouseDown = (0, _react.useCallback)(event => {\n    const triggerElement = (0, _utils.getDOMNode)(triggerTarget);\n    const overlayElement = (0, _utils.getDOMNode)(overlayTarget);\n\n    // Check if the clicked element is a trigger.\n    if (triggerElement && (0, _contains.default)(triggerElement, event.target)) {\n      return;\n    }\n\n    // Check if the clicked element is a overlay.\n    if (overlayElement && (0, _contains.default)(overlayElement, event.target)) {\n      return;\n    }\n    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {\n      return;\n    }\n    onRootClose === null || onRootClose === void 0 || onRootClose(event);\n  }, [onRootClose, triggerTarget, overlayTarget]);\n  (0, _react.useEffect)(() => {\n    const currentTarget = (0, _utils.getDOMNode)(triggerTarget);\n    if (disabled || !currentTarget) return;\n    const doc = (0, _ownerDocument.default)(currentTarget);\n    const onDocumentMouseDownListener = (0, _on.default)(doc, 'mousedown', handleDocumentMouseDown, true);\n    const onDocumentKeyupListener = (0, _on.default)(doc, 'keyup', handleDocumentKeyUp);\n    return () => {\n      onDocumentMouseDownListener === null || onDocumentMouseDownListener === void 0 || onDocumentMouseDownListener.off();\n      onDocumentKeyupListener === null || onDocumentKeyupListener === void 0 || onDocumentKeyupListener.off();\n    };\n  }, [triggerTarget, disabled, onRootClose, handleDocumentMouseDown, handleDocumentKeyUp]);\n}\nvar _default = exports[\"default\"] = useRootClose;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useRootClose.ts?");
 
 /***/ }),
 
@@ -7422,17 +7477,6 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
-/***/ "./src/internals/utils/ReactChildren.tsx":
-/*!***********************************************!*\
-  !*** ./src/internals/utils/ReactChildren.tsx ***!
-  \***********************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.ReactChildren = void 0;\nexports.count = count;\nexports[\"default\"] = void 0;\nexports.find = find;\nexports.forEach = forEach;\nexports.isFragment = isFragment;\nexports.map = map;\nexports.mapCloneElement = mapCloneElement;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n/**\n * Returns the type of the given object.\n * @param object - The object to check.\n * @returns The type of the object.\n */\nfunction typeOf(object) {\n  if (typeof object === 'object' && object !== null) {\n    return object.type || object.$$typeof;\n  }\n}\n\n/**\n * Checks if the given children is a React fragment.\n * @param children - The children to check.\n * @returns True if the children is a React fragment, false otherwise.\n */\nfunction isFragment(children) {\n  return _react.default.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');\n}\n\n/**\n * Flattens the given children into an array.\n * @param children - The children to flatten.\n * @returns The flattened array of children.\n */\nfunction flatChildren(children) {\n  return _react.default.Children.toArray(_react.default.Children.map(children, child => {\n    if (isFragment(child)) {\n      var _child$props;\n      return _react.default.Children.toArray(((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children) || []);\n    }\n    return child;\n  }));\n}\n\n/**\n * Finds the first child that satisfies the given condition.\n * @param children - The children to search.\n * @param func - The condition function.\n * @param context - The context to use for the condition function.\n * @returns The first child that satisfies the condition, or undefined if no child is found.\n */\nfunction find(children, func, context) {\n  let index = 0;\n  let result;\n  _react.default.Children.forEach(flatChildren(children), child => {\n    if (result) {\n      return;\n    }\n    index += 1;\n    if (func.call(context, child, index)) {\n      result = child;\n    }\n  });\n  return result;\n}\n\n/**\n * Maps over the children and applies the given function to each child.\n * @param children - The children to map over.\n * @param func - The function to apply to each child.\n * @param context - The context to use for the function.\n * @returns An array of the results of applying the function to each child.\n */\nfunction map(children, func, context) {\n  let index = 0;\n  return _react.default.Children.map(flatChildren(children), child => {\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return child;\n    }\n    const handle = func.call(context, child, index);\n    index += 1;\n    return handle;\n  });\n}\n\n/**\n * Maps over the children and clones each child element with the provided props.\n * @param children - The children to clone and map over.\n * @param func - The function to apply to each child element.\n * @param context - The context to use for the function.\n * @returns An array of the cloned and modified child elements.\n */\nfunction mapCloneElement(children, func, context) {\n  return map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {\n    key: index,\n    ...func(child, index)\n  }), context);\n}\n\n/**\n * Iterates over children that are in flat array form.\n * @param children\n * @param func\n * @param context\n */\nfunction forEach(children, func, context) {\n  let index = 0;\n  _react.default.Children.forEach(flatChildren(children), child => {\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return;\n    }\n    func.call(context, child, index);\n    index += 1;\n  });\n}\n\n/**\n * Returns the number of children.\n * @param children - The children to count.\n * @returns The number of children.\n */\nfunction count(children) {\n  return _react.default.Children.count(flatChildren(children));\n}\n\n/**\n * Checks if any child satisfies the given condition.\n * @param children - The children to check.\n * @param func - The condition function.\n * @param context - The context to use for the condition function.\n * @returns True if any child satisfies the condition, false otherwise.\n */\nfunction some(children, func, context) {\n  let index = 0;\n  let result = false;\n  _react.default.Children.forEach(flatChildren(children), child => {\n    if (result) {\n      return;\n    }\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return;\n    }\n    if (func.call(context, child, index += 1)) {\n      result = true;\n    }\n  });\n  return result;\n}\n\n/**\n * Utility functions for working with React children.\n */\nconst ReactChildren = exports.ReactChildren = {\n  /**\n   * Maps over the children and clones each child element with the provided props.\n   */\n  mapCloneElement,\n  /**\n   * Returns the number of children.\n   */\n  count,\n  /**\n   * Checks if any child satisfies the given condition.\n   */\n  some,\n  /**\n   * Maps over the children and applies the given function to each child.\n   */\n  map,\n  /**\n   * Iterates over children that are in flat array form.\n   */\n  forEach,\n  /**\n   * Finds the first child that satisfies the given condition.\n   */\n  find\n};\nvar _default = exports[\"default\"] = ReactChildren;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/ReactChildren.tsx?");
-
-/***/ }),
-
 /***/ "./src/internals/utils/attachParent.ts":
 /*!*********************************************!*\
   !*** ./src/internals/utils/attachParent.ts ***!
@@ -7477,17 +7521,6 @@ eval("\n\nexports.__esModule = true;\nexports.createChainedFunction = createChai
 
 /***/ }),
 
-/***/ "./src/internals/utils/createComponent.tsx":
-/*!*************************************************!*\
-  !*** ./src/internals/utils/createComponent.tsx ***!
-  \*************************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.createComponent = createComponent;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../Box/Box */ \"./src/internals/Box/Box.tsx\"));\nvar _hooks = __webpack_require__(/*! ../hooks */ \"./src/internals/hooks/index.ts\");\nvar _forwardRef = __webpack_require__(/*! ./forwardRef */ \"./src/internals/utils/forwardRef.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/utils/createComponent.tsx\";\n/**\n * Create a component with `classPrefix` and `as` attributes.\n * By default, the component is based on Box component and inherits all Box props.\n */\nfunction createComponent(_ref) {\n  let {\n    name,\n    componentAs,\n    componentClassPrefix,\n    ...defaultProps\n  } = _ref;\n  const Component = (0, _forwardRef.forwardRef)((props, ref) => {\n    const {\n      propsWithDefaults\n    } = (0, _CustomProvider.useCustom)(name, props);\n    const {\n      as,\n      classPrefix = componentClassPrefix || (0, _kebabCase.default)(name),\n      className,\n      role,\n      ...rest\n    } = propsWithDefaults;\n    const {\n      withPrefix,\n      merge\n    } = (0, _hooks.useStyles)(classPrefix);\n    const classes = merge(className, withPrefix());\n    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({}, defaultProps, rest, {\n      role: role,\n      ref: ref,\n      className: classes,\n      as: as || componentAs || 'div',\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 40,\n        columnNumber: 7\n      }\n    }));\n  });\n  Component.displayName = name;\n  return Component;\n}\nvar _default = exports[\"default\"] = createComponent;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/createComponent.tsx?");
-
-/***/ }),
-
 /***/ "./src/internals/utils/date/copyTime.ts":
 /*!**********************************************!*\
   !*** ./src/internals/utils/date/copyTime.ts ***!
@@ -7609,168 +7642,201 @@ eval("\n\nexports.__esModule = true;\nexports.useDateMode = exports.DateMode = v
 
 /***/ }),
 
-/***/ "./src/internals/utils/deprecateComponent.tsx":
-/*!****************************************************!*\
-  !*** ./src/internals/utils/deprecateComponent.tsx ***!
-  \****************************************************/
+/***/ "./src/internals/utils/getDataGroupBy.ts":
+/*!***********************************************!*\
+  !*** ./src/internals/utils/getDataGroupBy.ts ***!
+  \***********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.deprecateComponent = deprecateComponent;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ./warnOnce */ \"./src/internals/utils/warnOnce.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/utils/deprecateComponent.tsx\";\n/**\n * HOC for display a deprecation message from a deprecated component\n * fixme: Only display deprecation message in non-production environment\n */\nfunction deprecateComponent(Component, message) {\n  var _Component$displayNam;\n  const componentDisplayName = (_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 ? _Component$displayNam : Component.name;\n  const Deprecated = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n    (0, _warnOnce.default)(message);\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 17,\n        columnNumber: 12\n      }\n    }));\n  });\n  Deprecated.displayName = `deprecated(${componentDisplayName})`;\n  return Deprecated;\n}\nvar _default = exports[\"default\"] = deprecateComponent;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/deprecateComponent.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.KEY_GROUP_TITLE = void 0;\nexports.getDataGroupBy = getDataGroupBy;\nvar _groupBy2 = _interopRequireDefault(__webpack_require__(/*! lodash/groupBy */ \"./node_modules/lodash/groupBy.js\"));\nvar _utils = __webpack_require__(/*! ../../Tree/utils */ \"./src/Tree/utils/index.ts\");\nvar _symbols = __webpack_require__(/*! ../symbols */ \"./src/internals/symbols.ts\");\nconst KEY_GROUP_TITLE = exports.KEY_GROUP_TITLE = 'groupTitle';\nfunction getDataGroupBy(data, key, sort) {\n  const groupMap = (0, _groupBy2.default)(data, key);\n  const isSort = typeof sort === 'function';\n  const groups = Object.entries(groupMap).map(_ref => {\n    let [groupTitle, children] = _ref;\n    return {\n      children: isSort ? children.sort(sort(false)) : children,\n      [KEY_GROUP_TITLE]: groupTitle,\n      [_symbols.RSUITE_PICKER_GROUP_KEY]: true\n    };\n  });\n  if (isSort) {\n    groups.sort(sort(true));\n  }\n\n  // Use DFS traverse\n  // Because I want the result to be [group, child, child, group, child, child]\n  // rather than [group, group, child, child, child, child]\n  return (0, _utils.flattenTree)(groups, group => group.children, _utils.WalkTreeStrategy.DFS);\n}\nvar _default = exports[\"default\"] = getDataGroupBy;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/getDataGroupBy.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/dom.ts":
-/*!************************************!*\
-  !*** ./src/internals/utils/dom.ts ***!
-  \************************************/
+/***/ "./src/internals/utils/guid.ts":
+/*!*************************************!*\
+  !*** ./src/internals/utils/guid.ts ***!
+  \*************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.isFocusableElement = isFocusableElement;\n// Ref: https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-react/src/utils/focus-management.ts\n// Credit:\n//  - https://stackoverflow.com/a/30753870\nconst focusableSelector = ['[contentEditable=true]', '[tabindex]', 'a[href]', 'area[href]', 'button:not([disabled])', 'iframe', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])'].map( false ?\n// TODO: Remove this once JSDOM fixes the issue where an element that is\n// \"hidden\" can be the document.activeElement, because this is not possible\n// in real browsers.\n0 : selector => `${selector}:not([tabindex='-1'])`).join(',');\nfunction isFocusableElement(element) {\n  if (element === document.body) return false;\n  return element.matches(focusableSelector);\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/dom.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.guid = guid;\n/**\n * Generates a Globally Unique Identifier (GUID).\n */\nfunction guid() {\n  return '_' + Math.random().toString(36).substring(2, 12);\n}\nvar _default = exports[\"default\"] = guid;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/guid.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/events.ts":
-/*!***************************************!*\
-  !*** ./src/internals/utils/events.ts ***!
-  \***************************************/
+/***/ "./src/internals/utils/html/dom.ts":
+/*!*****************************************!*\
+  !*** ./src/internals/utils/html/dom.ts ***!
+  \*****************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.isFocusEntering = isFocusEntering;\nexports.isFocusLeaving = isFocusLeaving;\n// Ref: https://reactjs.org/docs/events.html#detecting-focus-entering-and-leaving\n\n/**\n * Whether the focus is moving inside of current element\n * @param event The `focus` event\n */\nfunction isFocusEntering(event) {\n  return event.type === 'focus' && !event.currentTarget.contains(event.relatedTarget);\n}\n\n/**\n * Whether the focus is moving outside of current element\n * @param event The `blur` event\n */\nfunction isFocusLeaving(event) {\n  return event.type === 'blur' && !event.currentTarget.contains(event.relatedTarget);\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/events.ts?");
+eval("\n\nexports.__esModule = true;\nexports.isDisableableElement = isDisableableElement;\nexports.isFocusableElement = isFocusableElement;\n// Ref: https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-react/src/utils/focus-management.ts\n// Credit:\n//  - https://stackoverflow.com/a/30753870\nconst focusableSelector = ['[contentEditable=true]', '[tabindex]', 'a[href]', 'area[href]', 'button:not([disabled])', 'iframe', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])'].map( false ?\n// TODO: Remove this once JSDOM fixes the issue where an element that is\n// \"hidden\" can be the document.activeElement, because this is not possible\n// in real browsers.\n0 : selector => `${selector}:not([tabindex='-1'])`).join(',');\nfunction isFocusableElement(element) {\n  if (element === document.body) return false;\n  return element.matches(focusableSelector);\n}\nconst disableableElements = ['button', 'fieldset', 'optgroup', 'option', 'select', 'textarea', 'input'];\nfunction isDisableableElement(element) {\n  if (typeof element === 'string') {\n    return disableableElements.includes(element);\n  }\n  return false;\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/html/dom.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/forwardRef.ts":
-/*!*******************************************!*\
-  !*** ./src/internals/utils/forwardRef.ts ***!
-  \*******************************************/
+/***/ "./src/internals/utils/html/events.ts":
+/*!********************************************!*\
+  !*** ./src/internals/utils/html/events.ts ***!
+  \********************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.isFocusEntering = isFocusEntering;\nexports.isFocusLeaving = isFocusLeaving;\n// Ref: https://reactjs.org/docs/events.html#detecting-focus-entering-and-leaving\n\n/**\n * Whether the focus is moving inside of current element\n * @param event The `focus` event\n */\nfunction isFocusEntering(event) {\n  return event.type === 'focus' && !event.currentTarget.contains(event.relatedTarget);\n}\n\n/**\n * Whether the focus is moving outside of current element\n * @param event The `blur` event\n */\nfunction isFocusLeaving(event) {\n  return event.type === 'blur' && !event.currentTarget.contains(event.relatedTarget);\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/html/events.ts?");
+
+/***/ }),
+
+/***/ "./src/internals/utils/html/htmlPropsUtils.ts":
+/*!****************************************************!*\
+  !*** ./src/internals/utils/html/htmlPropsUtils.ts ***!
+  \****************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.forwardRef = forwardRef;\nvar _react = __webpack_require__(/*! react */ \"react\");\n/**\n * A utility function to wrap components with `React.forwardRef`.\n * It extends the type signature for better integration with custom components.\n *\n * @param component - The component to wrap, with `props` and `ref` types explicitly defined.\n * @returns A forward-ref component with extended type inference.\n */\nfunction forwardRef(component, subcomponents) {\n  const forwardedComponent = /*#__PURE__*/(0, _react.forwardRef)(component);\n\n  // Attach subcomponents if provided\n  if (subcomponents) {\n    Object.assign(forwardedComponent, subcomponents);\n  }\n  return forwardedComponent;\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/forwardRef.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.partitionHTMLProps = exports.htmlInputProps = exports.htmlInputEvents = exports.htmlInputAttrs = void 0;\nvar _forEach = _interopRequireDefault(__webpack_require__(/*! lodash/forEach */ \"./node_modules/lodash/forEach.js\"));\nvar _includes = _interopRequireDefault(__webpack_require__(/*! lodash/includes */ \"./node_modules/lodash/includes.js\"));\n/**\n * Forked from Semantic-Org/Semantic-UI-React:\n * https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/lib/htmlPropsUtils.js\n */\n\nconst htmlInputAttrs = exports.htmlInputAttrs = [\n// REACT\n'selected', 'defaultValue', 'defaultChecked',\n// LIMITED HTML PROPS\n'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'checked', 'disabled', 'form', 'id', 'list', 'max', 'maxLength', 'min', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'step', 'type', 'value'];\nconst htmlInputEvents = exports.htmlInputEvents = [\n// EVENTS\n// keyboard\n'onKeyDown', 'onKeyPress', 'onKeyUp',\n// focus\n'onFocus', 'onBlur',\n// form\n'onChange', 'onInput',\n// mouse\n'onClick', 'onContextMenu', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp',\n// selection\n'onSelect',\n// touch\n'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart'];\nconst htmlInputProps = exports.htmlInputProps = [...htmlInputAttrs, ...htmlInputEvents];\n\n/**\n * Returns an array of objects consisting of: props of html input element and rest.\n * @param {object} props A ReactElement props object\n * @param {Object} [options={}]\n * @param {Array} [options.htmlProps] An array of html input props\n * @param {boolean} [options.includeAria] Includes all input props that starts with \"aria-\"\n * @returns {[{}, {}]} An array of objects\n */\nconst partitionHTMLProps = function (props, options) {\n  if (options === void 0) {\n    options = {};\n  }\n  const {\n    htmlProps = htmlInputProps,\n    includeAria = true\n  } = options;\n  const inputProps = {};\n  const rest = {};\n  (0, _forEach.default)(props, (val, prop) => {\n    const possibleAria = includeAria && (/^aria-.*$/.test(prop) || prop === 'role');\n    const target = (0, _includes.default)(htmlProps, prop) || possibleAria ? inputProps : rest;\n    target[prop] = val;\n  });\n  return [inputProps, rest];\n};\nexports.partitionHTMLProps = partitionHTMLProps;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/html/htmlPropsUtils.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/getDOMNode.ts":
+/***/ "./src/internals/utils/html/index.ts":
 /*!*******************************************!*\
-  !*** ./src/internals/utils/getDOMNode.ts ***!
+  !*** ./src/internals/utils/html/index.ts ***!
   \*******************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.getDOMNode = getDOMNode;\nfunction safeFindDOMNode(componentOrElement) {\n  if (componentOrElement && 'setState' in componentOrElement) {\n    var _ref$current, _ref;\n    // Access the underlying DOM node through ref if available\n    return (_ref$current = componentOrElement === null || componentOrElement === void 0 || (_ref = componentOrElement.ref) === null || _ref === void 0 ? void 0 : _ref.current) !== null && _ref$current !== void 0 ? _ref$current : null;\n  }\n  return componentOrElement !== null && componentOrElement !== void 0 ? componentOrElement : null;\n}\nconst getRefTarget = ref => {\n  return ref && ('current' in ref ? ref.current : ref);\n};\nfunction getDOMNode(elementOrRef) {\n  // If elementOrRef is an instance of Position, child is returned. [PositionInstance]\n  const element = (elementOrRef === null || elementOrRef === void 0 ? void 0 : elementOrRef.root) || (elementOrRef === null || elementOrRef === void 0 ? void 0 : elementOrRef.child) || getRefTarget(elementOrRef);\n\n  // Native HTML elements\n  if (element !== null && element !== void 0 && element.nodeType && typeof (element === null || element === void 0 ? void 0 : element.nodeName) === 'string') {\n    return element;\n  }\n  return safeFindDOMNode(element);\n}\nvar _default = exports[\"default\"] = getDOMNode;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/getDOMNode.ts?");
+eval("\n\nexports.__esModule = true;\nvar _htmlPropsUtils = __webpack_require__(/*! ./htmlPropsUtils */ \"./src/internals/utils/html/htmlPropsUtils.ts\");\nObject.keys(_htmlPropsUtils).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _htmlPropsUtils[key]) return;\n  exports[key] = _htmlPropsUtils[key];\n});\nvar _events = __webpack_require__(/*! ./events */ \"./src/internals/utils/html/events.ts\");\nObject.keys(_events).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _events[key]) return;\n  exports[key] = _events[key];\n});\nvar _dom = __webpack_require__(/*! ./dom */ \"./src/internals/utils/html/dom.ts\");\nObject.keys(_dom).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _dom[key]) return;\n  exports[key] = _dom[key];\n});\nvar _safeSetSelection = __webpack_require__(/*! ./safeSetSelection */ \"./src/internals/utils/html/safeSetSelection.ts\");\nObject.keys(_safeSetSelection).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _safeSetSelection[key]) return;\n  exports[key] = _safeSetSelection[key];\n});\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/html/index.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/getDataGroupBy.ts":
-/*!***********************************************!*\
-  !*** ./src/internals/utils/getDataGroupBy.ts ***!
-  \***********************************************/
+/***/ "./src/internals/utils/html/safeSetSelection.ts":
+/*!******************************************************!*\
+  !*** ./src/internals/utils/html/safeSetSelection.ts ***!
+  \******************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.KEY_GROUP_TITLE = void 0;\nexports.getDataGroupBy = getDataGroupBy;\nvar _groupBy2 = _interopRequireDefault(__webpack_require__(/*! lodash/groupBy */ \"./node_modules/lodash/groupBy.js\"));\nvar _utils = __webpack_require__(/*! ../../Tree/utils */ \"./src/Tree/utils/index.ts\");\nvar _symbols = __webpack_require__(/*! ../symbols */ \"./src/internals/symbols.ts\");\nconst KEY_GROUP_TITLE = exports.KEY_GROUP_TITLE = 'groupTitle';\nfunction getDataGroupBy(data, key, sort) {\n  const groupMap = (0, _groupBy2.default)(data, key);\n  const isSort = typeof sort === 'function';\n  const groups = Object.entries(groupMap).map(_ref => {\n    let [groupTitle, children] = _ref;\n    return {\n      children: isSort ? children.sort(sort(false)) : children,\n      [KEY_GROUP_TITLE]: groupTitle,\n      [_symbols.RSUITE_PICKER_GROUP_KEY]: true\n    };\n  });\n  if (isSort) {\n    groups.sort(sort(true));\n  }\n\n  // Use DFS traverse\n  // Because I want the result to be [group, child, child, group, child, child]\n  // rather than [group, group, child, child, child, child]\n  return (0, _utils.flattenTree)(groups, group => group.children, _utils.WalkTreeStrategy.DFS);\n}\nvar _default = exports[\"default\"] = getDataGroupBy;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/getDataGroupBy.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.safeSetSelection = safeSetSelection;\nvar _BrowserDetection = __webpack_require__(/*! ../BrowserDetection */ \"./src/internals/utils/BrowserDetection.ts\");\nconst strNone = 'none';\n\n/**\n * Sets the selection range of an HTMLInputElement safely.\n */\nfunction safeSetSelection(element, selectionStart, selectionEnd) {\n  if (document.activeElement === element) {\n    if ((0, _BrowserDetection.isAndroid)()) {\n      requestAnimationFrame(() => element.setSelectionRange(selectionStart, selectionEnd, strNone));\n    } else {\n      element.setSelectionRange(selectionStart, selectionEnd, strNone);\n    }\n  }\n}\nvar _default = exports[\"default\"] = safeSetSelection;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/html/safeSetSelection.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/getSafeRegExpString.ts":
-/*!****************************************************!*\
-  !*** ./src/internals/utils/getSafeRegExpString.ts ***!
-  \****************************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ "./src/internals/utils/index.ts":
+/*!**************************************!*\
+  !*** ./src/internals/utils/index.ts ***!
+  \**************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.getSafeRegExpString = getSafeRegExpString;\n/**\n * @description escape Regular_Expressions special_characters '^$.|*+?{\\\\[()'\n */\nfunction getSafeRegExpString(str) {\n  const specialChars = '\\\\^$.|?*+()[]{}';\n  return str.replace(new RegExp(`([${specialChars}])`, 'g'), '\\\\$1');\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/getSafeRegExpString.ts?");
+eval("\n\nexports.__esModule = true;\nvar _exportNames = {\n  guid: true,\n  createChainedFunction: true,\n  isOneOf: true,\n  shallowEqual: true,\n  shallowEqualArray: true,\n  composeFunctions: true,\n  getDataGroupBy: true,\n  warnOnce: true,\n  attachParent: true,\n  isPresetSize: true\n};\nexports.warnOnce = exports.shallowEqualArray = exports.shallowEqual = exports.isPresetSize = exports.isOneOf = exports.guid = exports.getDataGroupBy = exports.createChainedFunction = exports.composeFunctions = exports.attachParent = void 0;\nvar _BrowserDetection = __webpack_require__(/*! ./BrowserDetection */ \"./src/internals/utils/BrowserDetection.ts\");\nObject.keys(_BrowserDetection).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _BrowserDetection[key]) return;\n  exports[key] = _BrowserDetection[key];\n});\nvar _html = __webpack_require__(/*! ./html */ \"./src/internals/utils/html/index.ts\");\nObject.keys(_html).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _html[key]) return;\n  exports[key] = _html[key];\n});\nvar _colours = __webpack_require__(/*! ./colours */ \"./src/internals/utils/colours.ts\");\nObject.keys(_colours).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _colours[key]) return;\n  exports[key] = _colours[key];\n});\nvar _sizes = __webpack_require__(/*! ./sizes */ \"./src/internals/utils/sizes.ts\");\nexports.isPresetSize = _sizes.isPresetSize;\nObject.keys(_sizes).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _sizes[key]) return;\n  exports[key] = _sizes[key];\n});\nvar _styleSheet = __webpack_require__(/*! ./style-sheet */ \"./src/internals/utils/style-sheet/index.ts\");\nObject.keys(_styleSheet).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _styleSheet[key]) return;\n  exports[key] = _styleSheet[key];\n});\nvar _placement = __webpack_require__(/*! ./placement */ \"./src/internals/utils/placement.ts\");\nObject.keys(_placement).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _placement[key]) return;\n  exports[key] = _placement[key];\n});\nvar _string = __webpack_require__(/*! ./string */ \"./src/internals/utils/string/index.ts\");\nObject.keys(_string).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _string[key]) return;\n  exports[key] = _string[key];\n});\nvar _react = __webpack_require__(/*! ./react */ \"./src/internals/utils/react/index.ts\");\nObject.keys(_react).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _react[key]) return;\n  exports[key] = _react[key];\n});\nvar _guid = __webpack_require__(/*! ./guid */ \"./src/internals/utils/guid.ts\");\nexports.guid = _guid.guid;\nvar _createChainedFunction = __webpack_require__(/*! ./createChainedFunction */ \"./src/internals/utils/createChainedFunction.ts\");\nexports.createChainedFunction = _createChainedFunction.createChainedFunction;\nvar _isOneOf = __webpack_require__(/*! ./isOneOf */ \"./src/internals/utils/isOneOf.ts\");\nexports.isOneOf = _isOneOf.isOneOf;\nvar _shallowEqual = __webpack_require__(/*! ./shallowEqual */ \"./src/internals/utils/shallowEqual.ts\");\nexports.shallowEqual = _shallowEqual.shallowEqual;\nexports.shallowEqualArray = _shallowEqual.shallowEqualArray;\nvar _composeFunctions = __webpack_require__(/*! ./composeFunctions */ \"./src/internals/utils/composeFunctions.ts\");\nexports.composeFunctions = _composeFunctions.composeFunctions;\nvar _getDataGroupBy = __webpack_require__(/*! ./getDataGroupBy */ \"./src/internals/utils/getDataGroupBy.ts\");\nexports.getDataGroupBy = _getDataGroupBy.getDataGroupBy;\nvar _warnOnce = __webpack_require__(/*! ./warnOnce */ \"./src/internals/utils/warnOnce.ts\");\nexports.warnOnce = _warnOnce.warnOnce;\nvar _attachParent = __webpack_require__(/*! ./attachParent */ \"./src/internals/utils/attachParent.ts\");\nexports.attachParent = _attachParent.attachParent;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/index.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/getStringLength.ts":
-/*!************************************************!*\
-  !*** ./src/internals/utils/getStringLength.ts ***!
-  \************************************************/
+/***/ "./src/internals/utils/isOneOf.ts":
+/*!****************************************!*\
+  !*** ./src/internals/utils/isOneOf.ts ***!
+  \****************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.getStringLength = getStringLength;\nfunction getStringLength(str) {\n  let length = 0;\n  Array.from(str).forEach(char => {\n    if (char.charCodeAt(0) > 255) {\n      length += 2;\n    } else {\n      length++;\n    }\n  });\n  return length;\n}\nvar _default = exports[\"default\"] = getStringLength;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/getStringLength.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.isOneOf = isOneOf;\nfunction isOneOf(one, ofTarget) {\n  if (Array.isArray(ofTarget)) {\n    return ofTarget.indexOf(one) >= 0;\n  }\n  return one === ofTarget;\n}\nvar _default = exports[\"default\"] = isOneOf;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/isOneOf.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/guid.ts":
-/*!*************************************!*\
-  !*** ./src/internals/utils/guid.ts ***!
-  \*************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ "./src/internals/utils/placement.ts":
+/*!******************************************!*\
+  !*** ./src/internals/utils/placement.ts ***!
+  \******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.guid = guid;\n/**\n * Generates a Globally Unique Identifier (GUID).\n */\nfunction guid() {\n  return '_' + Math.random().toString(36).substring(2, 12);\n}\nvar _default = exports[\"default\"] = guid;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/guid.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.kebabPlace = kebabPlace;\nexports.placementPolyfill = placementPolyfill;\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n/**\n * Replaces the placement string with its polyfilled counterpart based on the given RTL (Right-to-Left) value.\n * @example\n * ```\n * placementPolyfill('bottomLeft');\n * // 'bottomStart'\n * ```\n */\nfunction placementPolyfill(placement, rtl) {\n  if (rtl === void 0) {\n    rtl = false;\n  }\n  if (typeof placement === 'string') {\n    if (rtl) {\n      placement = placement.replace(/left|right/, m => m === 'left' ? 'right' : 'left');\n    }\n    return placement.replace(/Left|Top/, 'Start').replace(/Right|Bottom/, 'End');\n  }\n  return placement;\n}\n\n/**\n * Converts a placement string to kebab-case and applies RTL polyfill if needed.\n * @example\n * ```\n * kebabPlace('bottomLeft');\n * // 'bottom-start'\n *\n * kebabPlace('topRight', true);\n * // 'top-start'\n * ```\n */\nfunction kebabPlace(placement, rtl) {\n  if (typeof placement === 'string') {\n    return (0, _kebabCase.default)(placementPolyfill(placement, rtl));\n  }\n  return placement;\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/placement.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/htmlPropsUtils.ts":
-/*!***********************************************!*\
-  !*** ./src/internals/utils/htmlPropsUtils.ts ***!
-  \***********************************************/
+/***/ "./src/internals/utils/react/ReactChildren.tsx":
+/*!*****************************************************!*\
+  !*** ./src/internals/utils/react/ReactChildren.tsx ***!
+  \*****************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.partitionHTMLProps = exports.htmlInputProps = exports.htmlInputEvents = exports.htmlInputAttrs = void 0;\nvar _forEach = _interopRequireDefault(__webpack_require__(/*! lodash/forEach */ \"./node_modules/lodash/forEach.js\"));\nvar _includes = _interopRequireDefault(__webpack_require__(/*! lodash/includes */ \"./node_modules/lodash/includes.js\"));\n/**\n * Forked from Semantic-Org/Semantic-UI-React:\n * https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/lib/htmlPropsUtils.js\n */\n\nconst htmlInputAttrs = exports.htmlInputAttrs = [\n// REACT\n'selected', 'defaultValue', 'defaultChecked',\n// LIMITED HTML PROPS\n'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'checked', 'disabled', 'form', 'id', 'list', 'max', 'maxLength', 'min', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'step', 'type', 'value'];\nconst htmlInputEvents = exports.htmlInputEvents = [\n// EVENTS\n// keyboard\n'onKeyDown', 'onKeyPress', 'onKeyUp',\n// focus\n'onFocus', 'onBlur',\n// form\n'onChange', 'onInput',\n// mouse\n'onClick', 'onContextMenu', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp',\n// selection\n'onSelect',\n// touch\n'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart'];\nconst htmlInputProps = exports.htmlInputProps = [...htmlInputAttrs, ...htmlInputEvents];\n\n/**\n * Returns an array of objects consisting of: props of html input element and rest.\n * @param {object} props A ReactElement props object\n * @param {Object} [options={}]\n * @param {Array} [options.htmlProps] An array of html input props\n * @param {boolean} [options.includeAria] Includes all input props that starts with \"aria-\"\n * @returns {[{}, {}]} An array of objects\n */\nconst partitionHTMLProps = function (props, options) {\n  if (options === void 0) {\n    options = {};\n  }\n  const {\n    htmlProps = htmlInputProps,\n    includeAria = true\n  } = options;\n  const inputProps = {};\n  const rest = {};\n  (0, _forEach.default)(props, (val, prop) => {\n    const possibleAria = includeAria && (/^aria-.*$/.test(prop) || prop === 'role');\n    const target = (0, _includes.default)(htmlProps, prop) || possibleAria ? inputProps : rest;\n    target[prop] = val;\n  });\n  return [inputProps, rest];\n};\nexports.partitionHTMLProps = partitionHTMLProps;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/htmlPropsUtils.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.count = count;\nexports[\"default\"] = void 0;\nexports.find = find;\nexports.forEach = forEach;\nexports.map = map;\nexports.mapCloneElement = mapCloneElement;\nexports.rch = void 0;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _ReactIs = __webpack_require__(/*! ./ReactIs */ \"./src/internals/utils/react/ReactIs.ts\");\n/**\n * Flattens the given children into an array.\n * @param children - The children to flatten.\n * @returns The flattened array of children.\n */\nfunction flatChildren(children) {\n  return _react.default.Children.toArray(_react.default.Children.map(children, child => {\n    if ((0, _ReactIs.isFragment)(child)) {\n      var _child$props;\n      return _react.default.Children.toArray(((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children) || []);\n    }\n    return child;\n  }));\n}\n\n/**\n * Finds the first child that satisfies the given condition.\n * @param children - The children to search.\n * @param func - The condition function.\n * @param context - The context to use for the condition function.\n * @returns The first child that satisfies the condition, or undefined if no child is found.\n */\nfunction find(children, func, context) {\n  let index = 0;\n  let result;\n  _react.default.Children.forEach(flatChildren(children), child => {\n    if (result) {\n      return;\n    }\n    index += 1;\n    if (func.call(context, child, index)) {\n      result = child;\n    }\n  });\n  return result;\n}\n\n/**\n * Maps over the children and applies the given function to each child.\n * @param children - The children to map over.\n * @param func - The function to apply to each child.\n * @param context - The context to use for the function.\n * @returns An array of the results of applying the function to each child.\n */\nfunction map(children, func, context) {\n  let index = 0;\n  return _react.default.Children.map(flatChildren(children), child => {\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return child;\n    }\n    const handle = func.call(context, child, index);\n    index += 1;\n    return handle;\n  });\n}\n\n/**\n * Maps over the children and clones each child element with the provided props.\n * @param children - The children to clone and map over.\n * @param func - The function to apply to each child element.\n * @param context - The context to use for the function.\n * @returns An array of the cloned and modified child elements.\n */\nfunction mapCloneElement(children, func, context) {\n  return map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {\n    key: index,\n    ...func(child, index)\n  }), context);\n}\n\n/**\n * Iterates over children that are in flat array form.\n * @param children\n * @param func\n * @param context\n */\nfunction forEach(children, func, context) {\n  let index = 0;\n  _react.default.Children.forEach(flatChildren(children), child => {\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return;\n    }\n    func.call(context, child, index);\n    index += 1;\n  });\n}\n\n/**\n * Returns the number of children.\n * @param children - The children to count.\n * @returns The number of children.\n */\nfunction count(children) {\n  return _react.default.Children.count(flatChildren(children));\n}\n\n/**\n * Checks if any child satisfies the given condition.\n * @param children - The children to check.\n * @param func - The condition function.\n * @param context - The context to use for the condition function.\n * @returns True if any child satisfies the condition, false otherwise.\n */\nfunction some(children, func, context) {\n  let index = 0;\n  let result = false;\n  _react.default.Children.forEach(flatChildren(children), child => {\n    if (result) {\n      return;\n    }\n    if (! /*#__PURE__*/_react.default.isValidElement(child)) {\n      return;\n    }\n    if (func.call(context, child, index += 1)) {\n      result = true;\n    }\n  });\n  return result;\n}\n\n/**\n * Utility functions for working with React children.\n */\nconst rch = exports.rch = {\n  /**\n   * Maps over the children and clones each child element with the provided props.\n   */\n  mapCloneElement,\n  /**\n   * Returns the number of children.\n   */\n  count,\n  /**\n   * Checks if any child satisfies the given condition.\n   */\n  some,\n  /**\n   * Maps over the children and applies the given function to each child.\n   */\n  map,\n  /**\n   * Iterates over children that are in flat array form.\n   */\n  forEach,\n  /**\n   * Finds the first child that satisfies the given condition.\n   */\n  find\n};\nvar _default = exports[\"default\"] = rch;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/react/ReactChildren.tsx?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/index.ts":
-/*!**************************************!*\
-  !*** ./src/internals/utils/index.ts ***!
-  \**************************************/
+/***/ "./src/internals/utils/react/ReactIs.ts":
+/*!**********************************************!*\
+  !*** ./src/internals/utils/react/ReactIs.ts ***!
+  \**********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nvar _exportNames = {\n  stringifyReactNode: true,\n  reactToString: true,\n  getSafeRegExpString: true,\n  getDOMNode: true,\n  guid: true,\n  createChainedFunction: true,\n  isOneOf: true,\n  ReactChildren: true,\n  tplTransform: true,\n  mergeRefs: true,\n  shallowEqual: true,\n  shallowEqualArray: true,\n  composeFunctions: true,\n  safeSetSelection: true,\n  getStringLength: true,\n  getDataGroupBy: true,\n  deprecateComponent: true,\n  warnOnce: true,\n  createComponent: true,\n  attachParent: true,\n  isFocusEntering: true,\n  isFocusLeaving: true,\n  isFocusableElement: true,\n  forwardRef: true,\n  isPresetSize: true\n};\nexports.warnOnce = exports.tplTransform = exports.stringifyReactNode = exports.shallowEqualArray = exports.shallowEqual = exports.safeSetSelection = exports.reactToString = exports.mergeRefs = exports.isPresetSize = exports.isOneOf = exports.isFocusableElement = exports.isFocusLeaving = exports.isFocusEntering = exports.guid = exports.getStringLength = exports.getSafeRegExpString = exports.getDataGroupBy = exports.getDOMNode = exports.forwardRef = exports.deprecateComponent = exports.createComponent = exports.createChainedFunction = exports.composeFunctions = exports.attachParent = exports.ReactChildren = void 0;\nvar _BrowserDetection = __webpack_require__(/*! ./BrowserDetection */ \"./src/internals/utils/BrowserDetection.ts\");\nObject.keys(_BrowserDetection).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _BrowserDetection[key]) return;\n  exports[key] = _BrowserDetection[key];\n});\nvar _htmlPropsUtils = __webpack_require__(/*! ./htmlPropsUtils */ \"./src/internals/utils/htmlPropsUtils.ts\");\nObject.keys(_htmlPropsUtils).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _htmlPropsUtils[key]) return;\n  exports[key] = _htmlPropsUtils[key];\n});\nvar _colours = __webpack_require__(/*! ./colours */ \"./src/internals/utils/colours.ts\");\nObject.keys(_colours).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _colours[key]) return;\n  exports[key] = _colours[key];\n});\nvar _sizes = __webpack_require__(/*! ./sizes */ \"./src/internals/utils/sizes.ts\");\nexports.isPresetSize = _sizes.isPresetSize;\nObject.keys(_sizes).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _sizes[key]) return;\n  exports[key] = _sizes[key];\n});\nvar _styleSheet = __webpack_require__(/*! ./style-sheet */ \"./src/internals/utils/style-sheet/index.ts\");\nObject.keys(_styleSheet).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _styleSheet[key]) return;\n  exports[key] = _styleSheet[key];\n});\nvar _placement = __webpack_require__(/*! ./placement */ \"./src/internals/utils/placement.ts\");\nObject.keys(_placement).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;\n  if (key in exports && exports[key] === _placement[key]) return;\n  exports[key] = _placement[key];\n});\nvar _stringifyReactNode = __webpack_require__(/*! ./stringifyReactNode */ \"./src/internals/utils/stringifyReactNode.ts\");\nexports.stringifyReactNode = _stringifyReactNode.stringifyReactNode;\nexports.reactToString = _stringifyReactNode.reactToString;\nvar _getSafeRegExpString = __webpack_require__(/*! ./getSafeRegExpString */ \"./src/internals/utils/getSafeRegExpString.ts\");\nexports.getSafeRegExpString = _getSafeRegExpString.getSafeRegExpString;\nvar _getDOMNode = __webpack_require__(/*! ./getDOMNode */ \"./src/internals/utils/getDOMNode.ts\");\nexports.getDOMNode = _getDOMNode.getDOMNode;\nvar _guid = __webpack_require__(/*! ./guid */ \"./src/internals/utils/guid.ts\");\nexports.guid = _guid.guid;\nvar _createChainedFunction = __webpack_require__(/*! ./createChainedFunction */ \"./src/internals/utils/createChainedFunction.ts\");\nexports.createChainedFunction = _createChainedFunction.createChainedFunction;\nvar _isOneOf = __webpack_require__(/*! ./isOneOf */ \"./src/internals/utils/isOneOf.ts\");\nexports.isOneOf = _isOneOf.isOneOf;\nvar _ReactChildren = __webpack_require__(/*! ./ReactChildren */ \"./src/internals/utils/ReactChildren.tsx\");\nexports.ReactChildren = _ReactChildren.ReactChildren;\nvar _tplTransform = __webpack_require__(/*! ./tplTransform */ \"./src/internals/utils/tplTransform.tsx\");\nexports.tplTransform = _tplTransform.tplTransform;\nvar _mergeRefs = __webpack_require__(/*! ./mergeRefs */ \"./src/internals/utils/mergeRefs.ts\");\nexports.mergeRefs = _mergeRefs.mergeRefs;\nvar _shallowEqual = __webpack_require__(/*! ./shallowEqual */ \"./src/internals/utils/shallowEqual.ts\");\nexports.shallowEqual = _shallowEqual.shallowEqual;\nexports.shallowEqualArray = _shallowEqual.shallowEqualArray;\nvar _composeFunctions = __webpack_require__(/*! ./composeFunctions */ \"./src/internals/utils/composeFunctions.ts\");\nexports.composeFunctions = _composeFunctions.composeFunctions;\nvar _safeSetSelection = __webpack_require__(/*! ./safeSetSelection */ \"./src/internals/utils/safeSetSelection.ts\");\nexports.safeSetSelection = _safeSetSelection.safeSetSelection;\nvar _getStringLength = __webpack_require__(/*! ./getStringLength */ \"./src/internals/utils/getStringLength.ts\");\nexports.getStringLength = _getStringLength.getStringLength;\nvar _getDataGroupBy = __webpack_require__(/*! ./getDataGroupBy */ \"./src/internals/utils/getDataGroupBy.ts\");\nexports.getDataGroupBy = _getDataGroupBy.getDataGroupBy;\nvar _deprecateComponent = __webpack_require__(/*! ./deprecateComponent */ \"./src/internals/utils/deprecateComponent.tsx\");\nexports.deprecateComponent = _deprecateComponent.deprecateComponent;\nvar _warnOnce = __webpack_require__(/*! ./warnOnce */ \"./src/internals/utils/warnOnce.ts\");\nexports.warnOnce = _warnOnce.warnOnce;\nvar _createComponent = __webpack_require__(/*! ./createComponent */ \"./src/internals/utils/createComponent.tsx\");\nexports.createComponent = _createComponent.createComponent;\nvar _attachParent = __webpack_require__(/*! ./attachParent */ \"./src/internals/utils/attachParent.ts\");\nexports.attachParent = _attachParent.attachParent;\nvar _events = __webpack_require__(/*! ./events */ \"./src/internals/utils/events.ts\");\nexports.isFocusEntering = _events.isFocusEntering;\nexports.isFocusLeaving = _events.isFocusLeaving;\nvar _dom = __webpack_require__(/*! ./dom */ \"./src/internals/utils/dom.ts\");\nexports.isFocusableElement = _dom.isFocusableElement;\nvar _forwardRef = __webpack_require__(/*! ./forwardRef */ \"./src/internals/utils/forwardRef.ts\");\nexports.forwardRef = _forwardRef.forwardRef;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/index.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.isFragment = isFragment;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n/**\n * Returns the type of the given object.\n * @param object - The object to check.\n * @returns The type of the object.\n */\nfunction typeOf(object) {\n  if (typeof object === 'object' && object !== null) {\n    return object.type || object.$$typeof;\n  }\n}\n\n/**\n * Checks if the given children is a React fragment.\n * @param children - The children to check.\n * @returns True if the children is a React fragment, false otherwise.\n */\nfunction isFragment(children) {\n  return _react.default.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/react/ReactIs.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/isOneOf.ts":
-/*!****************************************!*\
-  !*** ./src/internals/utils/isOneOf.ts ***!
-  \****************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ "./src/internals/utils/react/createComponent.tsx":
+/*!*******************************************************!*\
+  !*** ./src/internals/utils/react/createComponent.tsx ***!
+  \*******************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.isOneOf = isOneOf;\nfunction isOneOf(one, ofTarget) {\n  if (Array.isArray(ofTarget)) {\n    return ofTarget.indexOf(one) >= 0;\n  }\n  return one === ofTarget;\n}\nvar _default = exports[\"default\"] = isOneOf;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/isOneOf.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.createComponent = createComponent;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _Box = _interopRequireDefault(__webpack_require__(/*! ../../Box/Box */ \"./src/internals/Box/Box.tsx\"));\nvar _hooks = __webpack_require__(/*! ../../hooks */ \"./src/internals/hooks/index.ts\");\nvar _forwardRef = __webpack_require__(/*! ./forwardRef */ \"./src/internals/utils/react/forwardRef.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/utils/react/createComponent.tsx\";\n/**\n * Create a component with `classPrefix` and `as` attributes.\n * By default, the component is based on Box component and inherits all Box props.\n */\nfunction createComponent(_ref) {\n  let {\n    name,\n    componentAs,\n    componentClassPrefix,\n    ...defaultProps\n  } = _ref;\n  const Component = (0, _forwardRef.forwardRef)((props, ref) => {\n    const {\n      propsWithDefaults\n    } = (0, _CustomProvider.useCustom)(name, props);\n    const {\n      as,\n      classPrefix = componentClassPrefix || (0, _kebabCase.default)(name),\n      className,\n      role,\n      ...rest\n    } = propsWithDefaults;\n    const {\n      withPrefix,\n      merge\n    } = (0, _hooks.useStyles)(classPrefix);\n    const classes = merge(className, withPrefix());\n    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({}, defaultProps, rest, {\n      role: role,\n      ref: ref,\n      className: classes,\n      as: as || componentAs || 'div',\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 40,\n        columnNumber: 7\n      }\n    }));\n  });\n  Component.displayName = name;\n  return Component;\n}\nvar _default = exports[\"default\"] = createComponent;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/react/createComponent.tsx?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/mergeRefs.ts":
-/*!******************************************!*\
-  !*** ./src/internals/utils/mergeRefs.ts ***!
-  \******************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ "./src/internals/utils/react/deprecateComponent.tsx":
+/*!**********************************************************!*\
+  !*** ./src/internals/utils/react/deprecateComponent.tsx ***!
+  \**********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.mergeRefs = mergeRefs;\nconst toFnRef = ref => !ref || typeof ref === 'function' ? ref : value => {\n  ref.current = value;\n};\n\n/**\n * Merges two React refs into a single ref callback.\n */\nfunction mergeRefs(refA, refB) {\n  const a = toFnRef(refA);\n  const b = toFnRef(refB);\n  return value => {\n    if (typeof a === 'function') a(value);\n    if (typeof b === 'function') b(value);\n  };\n}\nvar _default = exports[\"default\"] = mergeRefs;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/mergeRefs.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.deprecateComponent = deprecateComponent;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _warnOnce = _interopRequireDefault(__webpack_require__(/*! ../warnOnce */ \"./src/internals/utils/warnOnce.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/utils/react/deprecateComponent.tsx\";\n/**\n * HOC for display a deprecation message from a deprecated component\n * fixme: Only display deprecation message in non-production environment\n */\nfunction deprecateComponent(Component, message) {\n  var _Component$displayNam;\n  const componentDisplayName = (_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 ? _Component$displayNam : Component.name;\n  const Deprecated = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n    (0, _warnOnce.default)(message);\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 17,\n        columnNumber: 12\n      }\n    }));\n  });\n  Deprecated.displayName = `deprecated(${componentDisplayName})`;\n  return Deprecated;\n}\nvar _default = exports[\"default\"] = deprecateComponent;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/react/deprecateComponent.tsx?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/placement.ts":
-/*!******************************************!*\
-  !*** ./src/internals/utils/placement.ts ***!
-  \******************************************/
+/***/ "./src/internals/utils/react/forwardRef.ts":
+/*!*************************************************!*\
+  !*** ./src/internals/utils/react/forwardRef.ts ***!
+  \*************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.kebabPlace = kebabPlace;\nexports.placementPolyfill = placementPolyfill;\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\n/**\n * Replaces the placement string with its polyfilled counterpart based on the given RTL (Right-to-Left) value.\n * @example\n * ```\n * placementPolyfill('bottomLeft');\n * // 'bottomStart'\n * ```\n */\nfunction placementPolyfill(placement, rtl) {\n  if (rtl === void 0) {\n    rtl = false;\n  }\n  if (typeof placement === 'string') {\n    if (rtl) {\n      placement = placement.replace(/left|right/, m => m === 'left' ? 'right' : 'left');\n    }\n    return placement.replace(/Left|Top/, 'Start').replace(/Right|Bottom/, 'End');\n  }\n  return placement;\n}\n\n/**\n * Converts a placement string to kebab-case and applies RTL polyfill if needed.\n * @example\n * ```\n * kebabPlace('bottomLeft');\n * // 'bottom-start'\n *\n * kebabPlace('topRight', true);\n * // 'top-start'\n * ```\n */\nfunction kebabPlace(placement, rtl) {\n  if (typeof placement === 'string') {\n    return (0, _kebabCase.default)(placementPolyfill(placement, rtl));\n  }\n  return placement;\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/placement.ts?");
+eval("\n\nexports.__esModule = true;\nexports.forwardRef = forwardRef;\nvar _react = __webpack_require__(/*! react */ \"react\");\n/**\n * A utility function to wrap components with `React.forwardRef`.\n * It extends the type signature for better integration with custom components.\n *\n * @param component - The component to wrap, with `props` and `ref` types explicitly defined.\n * @returns A forward-ref component with extended type inference.\n */\nfunction forwardRef(component, subcomponents) {\n  const forwardedComponent = /*#__PURE__*/(0, _react.forwardRef)(component);\n\n  // Attach subcomponents if provided\n  if (subcomponents) {\n    Object.assign(forwardedComponent, subcomponents);\n  }\n  return forwardedComponent;\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/react/forwardRef.ts?");
 
 /***/ }),
 
-/***/ "./src/internals/utils/safeSetSelection.ts":
+/***/ "./src/internals/utils/react/getDOMNode.ts":
 /*!*************************************************!*\
-  !*** ./src/internals/utils/safeSetSelection.ts ***!
+  !*** ./src/internals/utils/react/getDOMNode.ts ***!
   \*************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.getDOMNode = getDOMNode;\nfunction safeFindDOMNode(componentOrElement) {\n  if (componentOrElement && 'setState' in componentOrElement) {\n    var _ref$current, _ref;\n    // Access the underlying DOM node through ref if available\n    return (_ref$current = componentOrElement === null || componentOrElement === void 0 || (_ref = componentOrElement.ref) === null || _ref === void 0 ? void 0 : _ref.current) !== null && _ref$current !== void 0 ? _ref$current : null;\n  }\n  return componentOrElement !== null && componentOrElement !== void 0 ? componentOrElement : null;\n}\nconst getRefTarget = ref => {\n  return ref && ('current' in ref ? ref.current : ref);\n};\nfunction getDOMNode(elementOrRef) {\n  // If elementOrRef is an instance of Position, child is returned. [PositionInstance]\n  const element = (elementOrRef === null || elementOrRef === void 0 ? void 0 : elementOrRef.root) || (elementOrRef === null || elementOrRef === void 0 ? void 0 : elementOrRef.child) || getRefTarget(elementOrRef);\n\n  // Native HTML elements\n  if (element !== null && element !== void 0 && element.nodeType && typeof (element === null || element === void 0 ? void 0 : element.nodeName) === 'string') {\n    return element;\n  }\n  return safeFindDOMNode(element);\n}\nvar _default = exports[\"default\"] = getDOMNode;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/react/getDOMNode.ts?");
+
+/***/ }),
+
+/***/ "./src/internals/utils/react/index.ts":
+/*!********************************************!*\
+  !*** ./src/internals/utils/react/index.ts ***!
+  \********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.safeSetSelection = safeSetSelection;\nvar _BrowserDetection = __webpack_require__(/*! ./BrowserDetection */ \"./src/internals/utils/BrowserDetection.ts\");\nconst strNone = 'none';\n\n/**\n * Sets the selection range of an HTMLInputElement safely.\n */\nfunction safeSetSelection(element, selectionStart, selectionEnd) {\n  if (document.activeElement === element) {\n    if ((0, _BrowserDetection.isAndroid)()) {\n      requestAnimationFrame(() => element.setSelectionRange(selectionStart, selectionEnd, strNone));\n    } else {\n      element.setSelectionRange(selectionStart, selectionEnd, strNone);\n    }\n  }\n}\nvar _default = exports[\"default\"] = safeSetSelection;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/safeSetSelection.ts?");
+eval("\n\nexports.__esModule = true;\nvar _getDOMNode = __webpack_require__(/*! ./getDOMNode */ \"./src/internals/utils/react/getDOMNode.ts\");\nObject.keys(_getDOMNode).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _getDOMNode[key]) return;\n  exports[key] = _getDOMNode[key];\n});\nvar _ReactChildren = __webpack_require__(/*! ./ReactChildren */ \"./src/internals/utils/react/ReactChildren.tsx\");\nObject.keys(_ReactChildren).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _ReactChildren[key]) return;\n  exports[key] = _ReactChildren[key];\n});\nvar _deprecateComponent = __webpack_require__(/*! ./deprecateComponent */ \"./src/internals/utils/react/deprecateComponent.tsx\");\nObject.keys(_deprecateComponent).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _deprecateComponent[key]) return;\n  exports[key] = _deprecateComponent[key];\n});\nvar _createComponent = __webpack_require__(/*! ./createComponent */ \"./src/internals/utils/react/createComponent.tsx\");\nObject.keys(_createComponent).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _createComponent[key]) return;\n  exports[key] = _createComponent[key];\n});\nvar _forwardRef = __webpack_require__(/*! ./forwardRef */ \"./src/internals/utils/react/forwardRef.ts\");\nObject.keys(_forwardRef).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _forwardRef[key]) return;\n  exports[key] = _forwardRef[key];\n});\nvar _mergeRefs = __webpack_require__(/*! ./mergeRefs */ \"./src/internals/utils/react/mergeRefs.ts\");\nObject.keys(_mergeRefs).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _mergeRefs[key]) return;\n  exports[key] = _mergeRefs[key];\n});\nvar _ReactIs = __webpack_require__(/*! ./ReactIs */ \"./src/internals/utils/react/ReactIs.ts\");\nObject.keys(_ReactIs).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _ReactIs[key]) return;\n  exports[key] = _ReactIs[key];\n});\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/react/index.ts?");
+
+/***/ }),
+
+/***/ "./src/internals/utils/react/mergeRefs.ts":
+/*!************************************************!*\
+  !*** ./src/internals/utils/react/mergeRefs.ts ***!
+  \************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.mergeRefs = mergeRefs;\nconst toFnRef = ref => !ref || typeof ref === 'function' ? ref : value => {\n  ref.current = value;\n};\n\n/**\n * Merges two React refs into a single ref callback.\n */\nfunction mergeRefs(refA, refB) {\n  const a = toFnRef(refA);\n  const b = toFnRef(refB);\n  return value => {\n    if (typeof a === 'function') a(value);\n    if (typeof b === 'function') b(value);\n  };\n}\nvar _default = exports[\"default\"] = mergeRefs;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/react/mergeRefs.ts?");
 
 /***/ }),
 
@@ -7796,14 +7862,58 @@ eval("\n\nexports.__esModule = true;\nexports.isPresetSize = exports.getSizeStyl
 
 /***/ }),
 
-/***/ "./src/internals/utils/stringifyReactNode.ts":
-/*!***************************************************!*\
-  !*** ./src/internals/utils/stringifyReactNode.ts ***!
-  \***************************************************/
+/***/ "./src/internals/utils/string/getSafeRegExpString.ts":
+/*!***********************************************************!*\
+  !*** ./src/internals/utils/string/getSafeRegExpString.ts ***!
+  \***********************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.getSafeRegExpString = getSafeRegExpString;\n/**\n * @description escape Regular_Expressions special_characters '^$.|*+?{\\\\[()'\n */\nfunction getSafeRegExpString(str) {\n  const specialChars = '\\\\^$.|?*+()[]{}';\n  return str.replace(new RegExp(`([${specialChars}])`, 'g'), '\\\\$1');\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/string/getSafeRegExpString.ts?");
+
+/***/ }),
+
+/***/ "./src/internals/utils/string/getStringLength.ts":
+/*!*******************************************************!*\
+  !*** ./src/internals/utils/string/getStringLength.ts ***!
+  \*******************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.getStringLength = getStringLength;\nfunction getStringLength(str) {\n  let length = 0;\n  Array.from(str).forEach(char => {\n    if (char.charCodeAt(0) > 255) {\n      length += 2;\n    } else {\n      length++;\n    }\n  });\n  return length;\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/string/getStringLength.ts?");
+
+/***/ }),
+
+/***/ "./src/internals/utils/string/index.ts":
+/*!*********************************************!*\
+  !*** ./src/internals/utils/string/index.ts ***!
+  \*********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nvar _getSafeRegExpString = __webpack_require__(/*! ./getSafeRegExpString */ \"./src/internals/utils/string/getSafeRegExpString.ts\");\nObject.keys(_getSafeRegExpString).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _getSafeRegExpString[key]) return;\n  exports[key] = _getSafeRegExpString[key];\n});\nvar _getStringLength = __webpack_require__(/*! ./getStringLength */ \"./src/internals/utils/string/getStringLength.ts\");\nObject.keys(_getStringLength).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _getStringLength[key]) return;\n  exports[key] = _getStringLength[key];\n});\nvar _stringifyReactNode = __webpack_require__(/*! ./stringifyReactNode */ \"./src/internals/utils/string/stringifyReactNode.ts\");\nObject.keys(_stringifyReactNode).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _stringifyReactNode[key]) return;\n  exports[key] = _stringifyReactNode[key];\n});\nvar _tplTransform = __webpack_require__(/*! ./tplTransform */ \"./src/internals/utils/string/tplTransform.tsx\");\nObject.keys(_tplTransform).forEach(function (key) {\n  if (key === \"default\" || key === \"__esModule\") return;\n  if (key in exports && exports[key] === _tplTransform[key]) return;\n  exports[key] = _tplTransform[key];\n});\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/string/index.ts?");
+
+/***/ }),
+
+/***/ "./src/internals/utils/string/stringifyReactNode.ts":
+/*!**********************************************************!*\
+  !*** ./src/internals/utils/string/stringifyReactNode.ts ***!
+  \**********************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.reactToString = reactToString;\nexports.stringifyReactNode = stringifyReactNode;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n/**\n * Converts a React element to a string representation.\n * @param element - The React element to convert.\n * @returns An array of strings representing the React element.\n */\nfunction reactToString(element) {\n  const nodes = [];\n  const recursion = elmt => {\n    _react.default.Children.forEach(elmt.props.children, child => {\n      if (/*#__PURE__*/_react.default.isValidElement(child)) {\n        recursion(child);\n      } else if (typeof child === 'string') {\n        nodes.push(child);\n      }\n    });\n  };\n  recursion(element);\n  return nodes;\n}\n\n/**\n * Converts a React node to a string representation.\n * @param node - The React node to convert.\n * @returns A string representation of the React node.\n */\nfunction stringifyReactNode(node) {\n  if (typeof node === 'string') {\n    return node;\n  } else if (/*#__PURE__*/_react.default.isValidElement(node)) {\n    const nodes = reactToString(node);\n    return nodes.join('');\n  }\n  return '';\n}\nvar _default = exports[\"default\"] = stringifyReactNode;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/stringifyReactNode.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.reactToString = reactToString;\nexports.stringifyReactNode = stringifyReactNode;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\n/**\n * Converts a React element to a string representation.\n * @param element - The React element to convert.\n * @returns An array of strings representing the React element.\n */\nfunction reactToString(element) {\n  const nodes = [];\n  const recursion = elmt => {\n    _react.default.Children.forEach(elmt.props.children, child => {\n      if (/*#__PURE__*/_react.default.isValidElement(child)) {\n        recursion(child);\n      } else if (typeof child === 'string') {\n        nodes.push(child);\n      }\n    });\n  };\n  recursion(element);\n  return nodes;\n}\n\n/**\n * Converts a React node to a string representation.\n * @param node - The React node to convert.\n * @returns A string representation of the React node.\n */\nfunction stringifyReactNode(node) {\n  if (typeof node === 'string') {\n    return node;\n  } else if (/*#__PURE__*/_react.default.isValidElement(node)) {\n    const nodes = reactToString(node);\n    return nodes.join('');\n  }\n  return '';\n}\nvar _default = exports[\"default\"] = stringifyReactNode;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/string/stringifyReactNode.ts?");
+
+/***/ }),
+
+/***/ "./src/internals/utils/string/tplTransform.tsx":
+/*!*****************************************************!*\
+  !*** ./src/internals/utils/string/tplTransform.tsx ***!
+  \*****************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.tplTransform = tplTransform;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/utils/string/tplTransform.tsx\";\nconst toJSX = (node, key) => typeof node !== 'undefined' ? /*#__PURE__*/_react.default.createElement(\"span\", {\n  key: key,\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 4,\n    columnNumber: 33\n  }\n}, node) : null;\n\n/**\n * Transforms a pattern string by replacing placeholders with corresponding data values.\n *\n * @example\n * tplTransform('Show {0} data', <i>100</i>);\n * // output: Show <span><i>100</i></span> data\n */\nfunction tplTransform(pattern) {\n  for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    data[_key - 1] = arguments[_key];\n  }\n  return pattern.split(/\\{(\\d+)\\}/).map((item, index) => index % 2 ? toJSX(data[+item], index) : toJSX(item, index)).filter(item => item !== '');\n}\nvar _default = exports[\"default\"] = tplTransform;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/string/tplTransform.tsx?");
 
 /***/ }),
 
@@ -7862,17 +7972,6 @@ eval("\n\nexports.__esModule = true;\nexports.createStyleValueSetter = exports.c
 
 /***/ }),
 
-/***/ "./src/internals/utils/tplTransform.tsx":
-/*!**********************************************!*\
-  !*** ./src/internals/utils/tplTransform.tsx ***!
-  \**********************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.tplTransform = tplTransform;\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/utils/tplTransform.tsx\";\nconst toJSX = (node, key) => typeof node !== 'undefined' ? /*#__PURE__*/_react.default.createElement(\"span\", {\n  key: key,\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 4,\n    columnNumber: 33\n  }\n}, node) : null;\n\n/**\n * Transforms a pattern string by replacing placeholders with corresponding data values.\n *\n * @example\n * tplTransform('Show {0} data', <i>100</i>);\n * // output: Show <span><i>100</i></span> data\n */\nfunction tplTransform(pattern) {\n  for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    data[_key - 1] = arguments[_key];\n  }\n  return pattern.split(/\\{(\\d+)\\}/).map((item, index) => index % 2 ? toJSX(data[+item], index) : toJSX(item, index)).filter(item => item !== '');\n}\nvar _default = exports[\"default\"] = tplTransform;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/tplTransform.tsx?");
-
-/***/ }),
-
 /***/ "./src/internals/utils/warnOnce.ts":
 /*!*****************************************!*\
   !*** ./src/internals/utils/warnOnce.ts ***!
@@ -7891,7 +7990,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.wa
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _enGB = __webpack_require__(/*! date-fns/locale/en-GB */ \"./node_modules/date-fns/locale/en-GB.cjs\");\nconst DateTimeFormats = {\n  sunday: 'Su',\n  monday: 'Mo',\n  tuesday: 'Tu',\n  wednesday: 'We',\n  thursday: 'Th',\n  friday: 'Fr',\n  saturday: 'Sa',\n  ok: 'OK',\n  today: 'Today',\n  yesterday: 'Yesterday',\n  now: 'Now',\n  hours: 'Hours',\n  minutes: 'Minutes',\n  seconds: 'Seconds',\n  /**\n   * Format of the string is based on Unicode Technical Standard #35:\n   * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\n   **/\n  formattedMonthPattern: 'MMM yyyy',\n  formattedDayPattern: 'dd MMM yyyy',\n  shortDateFormat: 'dd/MM/yyyy',\n  shortTimeFormat: 'HH:mm',\n  dateLocale: _enGB.enGB\n};\nconst Combobox = {\n  noResultsText: 'No results found',\n  placeholder: 'Select',\n  searchPlaceholder: 'Search',\n  checkAll: 'All'\n};\nconst CreatableComboBox = {\n  ...Combobox,\n  newItem: 'New item',\n  createOption: 'Create option \"{0}\"'\n};\nvar _default = exports[\"default\"] = {\n  code: 'en-GB',\n  common: {\n    loading: 'Loading...',\n    emptyMessage: 'No data found',\n    remove: 'Remove',\n    clear: 'Clear'\n  },\n  Plaintext: {\n    unfilled: 'Unfilled',\n    notSelected: 'Not selected',\n    notUploaded: 'Not uploaded'\n  },\n  Pagination: {\n    more: 'More',\n    prev: 'Previous',\n    next: 'Next',\n    first: 'First',\n    last: 'Last',\n    limit: '{0} / page',\n    total: 'Total Rows: {0}',\n    skip: 'Go to{0}'\n  },\n  DateTimeFormats,\n  Calendar: DateTimeFormats,\n  DatePicker: DateTimeFormats,\n  DateRangePicker: {\n    ...DateTimeFormats,\n    last7Days: 'Last 7 Days'\n  },\n  Combobox,\n  InputPicker: CreatableComboBox,\n  TagPicker: CreatableComboBox,\n  Uploader: {\n    inited: 'Initial',\n    progress: 'Uploading',\n    error: 'Error',\n    complete: 'Finished',\n    emptyFile: 'Empty',\n    upload: 'Upload',\n    removeFile: 'Remove file'\n  },\n  CloseButton: {\n    closeLabel: 'Close'\n  },\n  Breadcrumb: {\n    expandText: 'Show path'\n  },\n  Toggle: {\n    on: 'Open',\n    off: 'Close'\n  }\n};\n\n//# sourceURL=webpack://rsuite/./src/locales/en_GB.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _enGB = __webpack_require__(/*! date-fns/locale/en-GB */ \"./node_modules/date-fns/locale/en-GB.cjs\");\nconst DateTimeFormats = {\n  sunday: 'Su',\n  monday: 'Mo',\n  tuesday: 'Tu',\n  wednesday: 'We',\n  thursday: 'Th',\n  friday: 'Fr',\n  saturday: 'Sa',\n  ok: 'OK',\n  today: 'Today',\n  yesterday: 'Yesterday',\n  now: 'Now',\n  hours: 'Hours',\n  minutes: 'Minutes',\n  seconds: 'Seconds',\n  /**\n   * Format of the string is based on Unicode Technical Standard #35:\n   * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\n   **/\n  formattedMonthPattern: 'MMM yyyy',\n  formattedDayPattern: 'dd MMM yyyy',\n  shortDateFormat: 'dd/MM/yyyy',\n  shortTimeFormat: 'HH:mm',\n  dateLocale: _enGB.enGB\n};\nconst Combobox = {\n  noResultsText: 'No results found',\n  placeholder: 'Select',\n  searchPlaceholder: 'Search',\n  checkAll: 'All'\n};\nconst CreatableComboBox = {\n  ...Combobox,\n  newItem: 'New item',\n  createOption: 'Create option \"{0}\"'\n};\nvar _default = exports[\"default\"] = {\n  code: 'en-GB',\n  common: {\n    loading: 'Loading...',\n    emptyMessage: 'No data found',\n    remove: 'Remove',\n    clear: 'Clear'\n  },\n  Plaintext: {\n    unfilled: 'Unfilled',\n    notSelected: 'Not selected',\n    notUploaded: 'Not uploaded'\n  },\n  Pagination: {\n    more: 'More',\n    prev: 'Previous',\n    next: 'Next',\n    first: 'First',\n    last: 'Last',\n    limit: '{0} / page',\n    total: 'Total Rows: {0}',\n    skip: 'Go to{0}'\n  },\n  DateTimeFormats,\n  Calendar: DateTimeFormats,\n  DatePicker: DateTimeFormats,\n  DateRangePicker: {\n    ...DateTimeFormats,\n    last7Days: 'Last 7 Days'\n  },\n  Combobox,\n  InputPicker: CreatableComboBox,\n  TagPicker: CreatableComboBox,\n  Uploader: {\n    inited: 'Initial',\n    progress: 'Uploading',\n    error: 'Error',\n    complete: 'Finished',\n    emptyFile: 'Empty',\n    upload: 'Upload',\n    removeFile: 'Remove file'\n  },\n  CloseButton: {\n    closeLabel: 'Close'\n  },\n  Breadcrumb: {\n    expandText: 'Show path'\n  },\n  Toggle: {\n    on: 'ON',\n    off: 'OFF'\n  }\n};\n\n//# sourceURL=webpack://rsuite/./src/locales/en_GB.ts?");
 
 /***/ }),
 
@@ -7979,7 +8078,18 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.useBreakpointValue = useBreakpointValue;\nvar _useMediaQuery = _interopRequireDefault(__webpack_require__(/*! ../useMediaQuery */ \"./src/useMediaQuery/index.ts\"));\n/**\n * A React Hook that returns different values based on different screen sizes in responsive design.\n * @version 5.63.0\n * @unstable Please note that this API is not stable and may change in the future.\n * @see https://rsuitejs.com/components/use-breakpoint-value\n *\n * @example\n * ```ts\n * const fontSize = useBreakpointValue({ sm: \"14px\", lg: \"24px\" }, { defaultValue: \"16px\" });\n * const direction = useBreakpointValue({ sm: 'row' }, { defaultValue:'column' });\n * ```\n *\n */\nfunction useBreakpointValue(breakpoints, options) {\n  const {\n    defaultValue\n  } = options || {};\n  const keys = Object.keys(breakpoints);\n  const values = Object.values(breakpoints);\n  const matches = (0, _useMediaQuery.default)(keys);\n  const index = matches.indexOf(true);\n  return index !== -1 ? values[index] : defaultValue;\n}\nvar _default = exports[\"default\"] = useBreakpointValue;\n\n//# sourceURL=webpack://rsuite/./src/useBreakpointValue/useBreakpointValue.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.useBreakpointValue = useBreakpointValue;\nvar _useMediaQuery = _interopRequireDefault(__webpack_require__(/*! ../useMediaQuery */ \"./src/useMediaQuery/index.ts\"));\n/**\n * A React Hook that returns different values based on different screen sizes in responsive design.\n * @version 5.63.0\n * @unstable Please note that this API is not stable and may change in the future.\n * @see https://rsuitejs.com/components/use-breakpoint-value\n *\n * @example\n * ```ts\n * const fontSize = useBreakpointValue({ sm: \"14px\", lg: \"24px\" }, { defaultValue: \"16px\" });\n * const direction = useBreakpointValue({ sm: 'row' }, { defaultValue:'column' });\n * ```\n *\n */\nfunction useBreakpointValue(breakpoints, options) {\n  const {\n    defaultValue,\n    enabled = true\n  } = options || {};\n  const keys = Object.keys(breakpoints);\n  const values = Object.values(breakpoints);\n  const matches = (0, _useMediaQuery.default)(keys, enabled);\n\n  // Use lastIndexOf instead of indexOf to return the value of the last matching breakpoint\n  // Due to how media queries work, multiple breakpoints may match simultaneously on larger screens\n  // Using lastIndexOf ensures we return the value for the largest matching breakpoint\n  const index = matches.lastIndexOf(true);\n  return index !== -1 ? values[index] : defaultValue;\n}\nvar _default = exports[\"default\"] = useBreakpointValue;\n\n//# sourceURL=webpack://rsuite/./src/useBreakpointValue/useBreakpointValue.ts?");
+
+/***/ }),
+
+/***/ "./src/useMediaQuery/breakpoints.ts":
+/*!******************************************!*\
+  !*** ./src/useMediaQuery/breakpoints.ts ***!
+  \******************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.createBreakpoints = createBreakpoints;\n/**\n * Capitalize the first letter of a string\n */\nconst capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);\n\n/**\n * Adjust max-width value to avoid breakpoint overlapping\n */\nfunction adjustMaxWidth(value) {\n  // Extract numeric part and unit\n  const match = value.match(/^([\\d.]+)(\\w+)$/);\n  if (!match) return value;\n  const [, numStr, unit] = match;\n  const num = parseFloat(numStr);\n\n  // If value is 0, don't adjust\n  if (num === 0) return value;\n\n  // Subtract a small value to avoid overlap\n  const adjustedNum = num - 0.01;\n  return `${adjustedNum}${unit}`;\n}\n\n/**\n * Create media query string\n */\nfunction createMediaQuery(options) {\n  const {\n    min,\n    max\n  } = options;\n  if (!min && !max) return '';\n  const conditions = [];\n  if (min) conditions.push(`(min-width: ${min})`);\n  if (max) conditions.push(`(max-width: ${max})`);\n  return conditions.join(' and ');\n}\n\n/**\n * Create traditional media query map compatible with previous versions\n */\nfunction createLegacyMediaQueryMap(breakpoints) {\n  const entries = Object.entries(breakpoints);\n  const result = {};\n\n  // Special case for xs\n  const xsValue = breakpoints.xs;\n  if (xsValue) {\n    // For xs, use max-width of the next breakpoint minus 0.01\n    const nextBreakpoint = entries.find(_ref => {\n      let [key] = _ref;\n      return key === 'sm';\n    });\n    if (nextBreakpoint) {\n      result.xs = `(max-width: ${adjustMaxWidth(nextBreakpoint[1])})`;\n    } else {\n      result.xs = `(min-width: ${xsValue})`;\n    }\n  }\n\n  // For all other breakpoints, use min-width\n  entries.forEach(_ref2 => {\n    let [key, value] = _ref2;\n    if (key !== 'xs') {\n      result[key] = `(min-width: ${value})`;\n    }\n  });\n  return result;\n}\n\n/**\n * Create breakpoint system\n *\n * This function takes a breakpoint map and returns an enhanced breakpoint system\n * that provides various media queries for responsive design.\n *\n * @example\n * ```ts\n * const breakpoints = createBreakpoints({\n *   xs: '0px',\n *   sm: '576px',\n *   md: '768px',\n *   lg: '992px',\n *   xl: '1200px'\n * });\n *\n * // Using breakpoints\n * breakpoints.up('md'); // '(min-width: 768px)'\n * breakpoints.down('lg'); // '(max-width: 991.99px)'\n * breakpoints.between('sm', 'lg'); // '(min-width: 576px) and (max-width: 991.99px)'\n * ```\n */\nfunction createBreakpoints(breakpoints) {\n  // Sort breakpoints by value\n  const sortedEntries = Object.entries(breakpoints).sort((a, b) => {\n    const valueA = parseInt(a[1].replace(/[^\\d]/g, ''), 10);\n    const valueB = parseInt(b[1].replace(/[^\\d]/g, ''), 10);\n    return valueA - valueB;\n  });\n\n  // Create breakpoint entries with min and max values\n  const breakpointEntries = sortedEntries.map((_ref3, index) => {\n    let [name, value] = _ref3;\n    let max = null;\n\n    // If not the last breakpoint, use the next breakpoint's value minus 0.01 as the current max\n    if (index < sortedEntries.length - 1) {\n      max = adjustMaxWidth(sortedEntries[index + 1][1]);\n    }\n    return [name, {\n      name,\n      min: value,\n      max\n    }];\n  });\n  const entries = Object.fromEntries(breakpointEntries);\n\n  // Get breakpoint entry by name\n  function getEntry(name) {\n    return entries[name];\n  }\n\n  // Generate all possible breakpoint conditions\n  function generateConditions() {\n    const conditions = {};\n    const breakpointNames = Object.keys(entries);\n\n    // Create basic conditions for each breakpoint\n    breakpointNames.forEach(name => {\n      const entry = getEntry(name);\n\n      // Up condition (min-width)\n      conditions[name] = createMediaQuery({\n        min: entry.min === null ? undefined : entry.min\n      });\n\n      // Down condition (max-width)\n      conditions[`${name}Down`] = createMediaQuery({\n        max: entry.min !== null ? entry.min === '0px' ? entry.min : adjustMaxWidth(entry.min) : undefined\n      });\n\n      // Only condition (min-width and max-width)\n      conditions[`${name}Only`] = createMediaQuery({\n        min: entry.min === null ? undefined : entry.min,\n        max: entry.max === null ? undefined : entry.max\n      });\n    });\n\n    // Create range conditions\n    for (let i = 0; i < breakpointNames.length; i++) {\n      for (let j = i + 1; j < breakpointNames.length; j++) {\n        const minName = breakpointNames[i];\n        const maxName = breakpointNames[j];\n        const minEntry = getEntry(minName);\n        const maxEntry = getEntry(maxName);\n        conditions[`${minName}To${capitalize(maxName)}`] = createMediaQuery({\n          min: minEntry.min === null ? undefined : minEntry.min,\n          max: maxEntry.min !== null ? maxEntry.min === '0px' ? maxEntry.min : adjustMaxWidth(maxEntry.min) : undefined\n        });\n      }\n    }\n    return conditions;\n  }\n  const conditions = generateConditions();\n\n  // Create legacy media query map for backward compatibility\n  const legacyMap = createLegacyMediaQueryMap(breakpoints);\n\n  // Get condition by key\n  function getCondition(key) {\n    return conditions[key] || '';\n  }\n\n  // Get all breakpoint keys\n  function keys() {\n    return ['base', ...Object.keys(entries)];\n  }\n\n  // Create up media query (min-width)\n  function up(name) {\n    const entry = getEntry(name);\n    return createMediaQuery({\n      min: entry.min === null ? undefined : entry.min\n    });\n  }\n\n  // Create down media query (max-width)\n  function down(name) {\n    const entry = getEntry(name);\n    return createMediaQuery({\n      max: entry.min !== null ? entry.min === '0px' ? entry.min : adjustMaxWidth(entry.min) : undefined\n    });\n  }\n\n  // Create only media query (min-width and max-width)\n  function only(name) {\n    const entry = getEntry(name);\n    return createMediaQuery({\n      min: entry.min === null ? undefined : entry.min,\n      max: entry.max === null ? undefined : entry.max\n    });\n  }\n\n  // Create between media query\n  function between(minName, maxName) {\n    const minEntry = getEntry(minName);\n    const maxEntry = getEntry(maxName);\n    return createMediaQuery({\n      min: minEntry.min === null ? undefined : minEntry.min,\n      max: maxEntry.min !== null ? maxEntry.min === '0px' ? maxEntry.min : adjustMaxWidth(maxEntry.min) : undefined\n    });\n  }\n\n  // Create a combined media query map that merges legacy map with enhanced conditions\n  function createMediaQueryMap() {\n    // Start with legacy map for backward compatibility\n    const mediaQueryMap = {\n      ...legacyMap\n    };\n\n    // Add enhanced conditions, excluding any keys that would override legacy map\n    const breakpointKeys = Object.keys(legacyMap);\n    Object.entries(conditions).forEach(_ref4 => {\n      let [key, value] = _ref4;\n      if (!breakpointKeys.includes(key)) {\n        mediaQueryMap[key] = value;\n      }\n    });\n    return mediaQueryMap;\n  }\n  return {\n    values: Object.values(entries),\n    only,\n    keys,\n    conditions,\n    getCondition,\n    up,\n    down,\n    between,\n    legacyMap,\n    createMediaQueryMap\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/useMediaQuery/breakpoints.ts?");
 
 /***/ }),
 
@@ -8001,7 +8111,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.mediaQuerySizeMap = exports[\"default\"] = void 0;\nexports.useMediaQuery = useMediaQuery;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\nconst mediaQuerySizeMap = exports.mediaQuerySizeMap = {\n  xs: '(max-width: 575px)',\n  sm: '(min-width: 576px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 992px)',\n  xl: '(min-width: 1200px)',\n  xxl: '(min-width: 1400px)'\n};\n\n/**\n * The type of the query parameter.\n */\n\nconst matchMedia = query => {\n  if (_canUseDOM.default) {\n    return window.matchMedia(query);\n  }\n  return {\n    matches: false,\n    media: query\n  };\n};\n\n/**\n * React hook that tracks state of a CSS media query\n * @version 5.48.0\n * @unstable Please note that this API is not stable and may change in the future.\n * @see https://rsuitejs.com/components/use-media-query\n */\nfunction useMediaQuery(query) {\n  const queries = Array.isArray(query) ? query : [query];\n  const mediaQueries = (0, _react.useMemo)(() => queries.map(query => mediaQuerySizeMap[query] || query), [...queries]);\n  const mediaQueryArray = (0, _react.useRef)(mediaQueries.map(query => matchMedia(query).matches));\n  const subscribe = (0, _react.useCallback)(callback => {\n    const list = mediaQueries.map(query => matchMedia(query));\n    const handleChange = event => {\n      const index = list.findIndex(item => item.media === event.media);\n      if (index !== -1) {\n        // The store snapshot returned by getSnapshot must be immutable. So we need to create a new array.\n        const nextMediaQueryArray = mediaQueryArray.current.slice();\n        nextMediaQueryArray[index] = event.matches;\n        mediaQueryArray.current = nextMediaQueryArray;\n      }\n      callback();\n    };\n    list.forEach(query => {\n      query.addEventListener('change', handleChange);\n    });\n    return () => {\n      list.forEach(query => {\n        query.removeEventListener('change', handleChange);\n      });\n    };\n  }, [mediaQueries]);\n  const getSnapshot = (0, _react.useCallback)(() => {\n    return mediaQueryArray.current;\n  }, []);\n  const getServerSnapshot = (0, _react.useCallback)(() => {\n    return mediaQueryArray.current;\n  }, []);\n  return (0, _react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);\n}\nvar _default = exports[\"default\"] = useMediaQuery;\n\n//# sourceURL=webpack://rsuite/./src/useMediaQuery/useMediaQuery.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.useMediaQuery = useMediaQuery;\nvar _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _breakpoints = __webpack_require__(/*! ./breakpoints */ \"./src/useMediaQuery/breakpoints.ts\");\n// Basic breakpoint values definition\nconst breakpointValues = {\n  xs: '0px',\n  sm: '576px',\n  md: '768px',\n  lg: '992px',\n  xl: '1200px',\n  xxl: '1400px',\n  '2xl': '1400px'\n};\n\n// Create enhanced breakpoint system\nconst breakpointSystem = (0, _breakpoints.createBreakpoints)(breakpointValues);\n\n// Create media query map that combines legacy breakpoints with enhanced conditions\nconst mediaQuerySizeMap = breakpointSystem.createMediaQueryMap();\n\n/**\n * Create a MediaQueryList object or a mock for server-side rendering\n */\nconst matchMedia = query => {\n  if (_canUseDOM.default) {\n    return window.matchMedia(query);\n  }\n  return {\n    matches: false,\n    media: query\n  };\n};\n\n/**\n * React hook that tracks state of a CSS media query\n * @version 5.48.0\n * @unstable Please note that this API is not stable and may change in the future.\n * @see https://rsuitejs.com/components/use-media-query\n * @param query - The media query string or array of query strings\n * @param enabled - Whether to enable the media query, defaults to true\n */\nfunction useMediaQuery(query, enabled) {\n  if (enabled === void 0) {\n    enabled = true;\n  }\n  const queries = Array.isArray(query) ? query : [query];\n  const mediaQueries = (0, _react.useMemo)(() => queries.map(query => mediaQuerySizeMap[query] || query), [...queries]);\n\n  // If not enabled, we don't need to set up any media queries\n  if (!enabled) {\n    return queries.map(() => false);\n  }\n  const mediaQueryArray = (0, _react.useRef)(mediaQueries.map(query => matchMedia(query).matches));\n  const subscribe = (0, _react.useCallback)(callback => {\n    const list = mediaQueries.map(query => matchMedia(query));\n    const handleChange = event => {\n      const index = list.findIndex(item => item.media === event.media);\n      if (index !== -1) {\n        // The store snapshot returned by getSnapshot must be immutable. So we need to create a new array.\n        const nextMediaQueryArray = mediaQueryArray.current.slice();\n        nextMediaQueryArray[index] = event.matches;\n        mediaQueryArray.current = nextMediaQueryArray;\n      }\n      callback();\n    };\n    list.forEach(query => {\n      query.addEventListener('change', handleChange);\n    });\n    return () => {\n      list.forEach(query => {\n        query.removeEventListener('change', handleChange);\n      });\n    };\n  }, [mediaQueries]);\n  const getSnapshot = (0, _react.useCallback)(() => {\n    return mediaQueryArray.current;\n  }, []);\n  const getServerSnapshot = (0, _react.useCallback)(() => {\n    return mediaQueryArray.current;\n  }, []);\n  return (0, _react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);\n}\nvar _default = exports[\"default\"] = useMediaQuery;\n\n//# sourceURL=webpack://rsuite/./src/useMediaQuery/useMediaQuery.ts?");
 
 /***/ }),
 
@@ -8023,7 +8133,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _toaster = _interopRequireDefault(__webpack_require__(/*! ../toaster */ \"./src/toaster/index.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider/CustomProvider */ \"./src/CustomProvider/CustomProvider.tsx\");\n// From CustomProvider/CustomProvider.tsx import CustomContext instead of directly from 'CustomProvider/index.ts'\n// because babel compiles commonjs, which causes CustomContext to be undefined\n\n/**\n * Toaster display brief, temporary notifications of actions, errors, or other events in an application.\n * It is often used with the Message and Notification components.\n * @returns toaster { push, remove, clear }\n *\n * @see https://rsuitejs.com/components/use-toaster/\n */\nconst useToaster = () => {\n  const {\n    toasters,\n    toastContainer\n  } = (0, _react.useContext)(_CustomProvider.CustomContext);\n  return (0, _react.useMemo)(() => ({\n    /**\n     * Push a toast message.\n     * @param message The message to be displayed.\n     *                eg: `<Message type=\"success\" description=\"Success\" />` or `<Notification type=\"success\" closable>Success</Notification>`\n     * @param options The options of the toast message. (optional)\n     *                eg: `{ placement: 'topCenter', duration: 5000 }`\n     * @returns The key of the toast message.\n     */\n    push: (message, options) => {\n      const container = (typeof (options === null || options === void 0 ? void 0 : options.container) === 'function' ? options === null || options === void 0 ? void 0 : options.container() : options === null || options === void 0 ? void 0 : options.container) || toastContainer;\n      if (container === toastContainer) {\n        var _toasters$current;\n        return toasters === null || toasters === void 0 || (_toasters$current = toasters.current) === null || _toasters$current === void 0 || (_toasters$current = _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter')) === null || _toasters$current === void 0 ? void 0 : _toasters$current.push(message, options);\n      } else {\n        return _toaster.default.push(message, options);\n      }\n    },\n    /**\n     * Remove a toast message.\n     * @param key  The key of the toast message.\n     */\n    remove: key => {\n      toasters ? Array.from(toasters.current).forEach(_ref => {\n        let [, c] = _ref;\n        return c === null || c === void 0 ? void 0 : c.remove(key);\n      }) : _toaster.default.remove(key);\n    },\n    /**\n     * Clear all toast messages.\n     */\n    clear: () => {\n      toasters ? Array.from(toasters.current).forEach(_ref2 => {\n        let [, c] = _ref2;\n        return c === null || c === void 0 ? void 0 : c.clear();\n      }) : _toaster.default.clear();\n    }\n  }), [toastContainer, toasters]);\n};\nvar _default = exports[\"default\"] = useToaster;\n\n//# sourceURL=webpack://rsuite/./src/useToaster/useToaster.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _toaster = _interopRequireDefault(__webpack_require__(/*! ../toaster */ \"./src/toaster/index.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider/CustomProvider */ \"./src/CustomProvider/CustomProvider.tsx\");\n// From CustomProvider/CustomProvider.tsx import CustomContext instead of directly from 'CustomProvider/index.ts'\n// because babel compiles commonjs, which causes CustomContext to be undefined\n\n/**\n * Toaster display brief, temporary notifications of actions, errors, or other events in an application.\n * It is often used with the Message and Notification components.\n * @returns toaster { push, remove, clear }\n *\n * @see https://rsuitejs.com/components/toaster/\n */\nconst useToaster = () => {\n  const {\n    toasters,\n    toastContainer\n  } = (0, _react.useContext)(_CustomProvider.CustomContext);\n  return (0, _react.useMemo)(() => ({\n    /**\n     * Push a toast message.\n     * @param message The message to be displayed.\n     *                eg: `<Message type=\"success\" description=\"Success\" />` or `<Notification type=\"success\" closable>Success</Notification>`\n     * @param options The options of the toast message. (optional)\n     *                eg: `{ placement: 'topCenter', duration: 5000 }`\n     * @returns The key of the toast message.\n     */\n    push: (message, options) => {\n      const container = (typeof (options === null || options === void 0 ? void 0 : options.container) === 'function' ? options === null || options === void 0 ? void 0 : options.container() : options === null || options === void 0 ? void 0 : options.container) || toastContainer;\n      if (container === toastContainer) {\n        var _toasters$current;\n        return toasters === null || toasters === void 0 || (_toasters$current = toasters.current) === null || _toasters$current === void 0 || (_toasters$current = _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter')) === null || _toasters$current === void 0 ? void 0 : _toasters$current.push(message, options);\n      } else {\n        return _toaster.default.push(message, options);\n      }\n    },\n    /**\n     * Remove a toast message.\n     * @param key  The key of the toast message.\n     */\n    remove: key => {\n      toasters ? Array.from(toasters.current).forEach(_ref => {\n        let [, c] = _ref;\n        return c === null || c === void 0 ? void 0 : c.remove(key);\n      }) : _toaster.default.remove(key);\n    },\n    /**\n     * Clear all toast messages.\n     */\n    clear: () => {\n      toasters ? Array.from(toasters.current).forEach(_ref2 => {\n        let [, c] = _ref2;\n        return c === null || c === void 0 ? void 0 : c.clear();\n      }) : _toaster.default.clear();\n    }\n  }), [toastContainer, toasters]);\n};\nvar _default = exports[\"default\"] = useToaster;\n\n//# sourceURL=webpack://rsuite/./src/useToaster/useToaster.ts?");
 
 /***/ }),
 
@@ -10518,9 +10628,9 @@ eval("var toFinite = __webpack_require__(/*! ./toFinite */ \"./node_modules/loda
 /*!*****************************************!*\
   !*** ./node_modules/lodash/toNumber.js ***!
   \*****************************************/
-/***/ (function(module) {
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-eval("/**\n * This method returns the first argument it receives.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Util\n * @param {*} value Any value.\n * @returns {*} Returns `value`.\n * @example\n *\n * var object = { 'a': 1 };\n *\n * console.log(_.identity(object) === object);\n * // => true\n */\nfunction identity(value) {\n  return value;\n}\n\nmodule.exports = identity;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/toNumber.js?");
+eval("var baseTrim = __webpack_require__(/*! ./_baseTrim */ \"./node_modules/lodash/_baseTrim.js\"),\n    isObject = __webpack_require__(/*! ./isObject */ \"./node_modules/lodash/isObject.js\"),\n    isSymbol = __webpack_require__(/*! ./isSymbol */ \"./node_modules/lodash/isSymbol.js\");\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n  if (typeof value == 'number') {\n    return value;\n  }\n  if (isSymbol(value)) {\n    return NAN;\n  }\n  if (isObject(value)) {\n    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n    value = isObject(other) ? (other + '') : other;\n  }\n  if (typeof value != 'string') {\n    return value === 0 ? value : +value;\n  }\n  value = baseTrim(value);\n  var isBinary = reIsBinary.test(value);\n  return (isBinary || reIsOctal.test(value))\n    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n    : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/toNumber.js?");
 
 /***/ }),
 
@@ -10538,9 +10648,9 @@ eval("var copyObject = __webpack_require__(/*! ./_copyObject */ \"./node_modules
 /*!*****************************************!*\
   !*** ./node_modules/lodash/toString.js ***!
   \*****************************************/
-/***/ (function(module) {
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-eval("/**\n * This method returns the first argument it receives.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Util\n * @param {*} value Any value.\n * @returns {*} Returns `value`.\n * @example\n *\n * var object = { 'a': 1 };\n *\n * console.log(_.identity(object) === object);\n * // => true\n */\nfunction identity(value) {\n  return value;\n}\n\nmodule.exports = identity;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/toString.js?");
+eval("var baseToString = __webpack_require__(/*! ./_baseToString */ \"./node_modules/lodash/_baseToString.js\");\n\n/**\n * Converts `value` to a string. An empty string is returned for `null`\n * and `undefined` values. The sign of `-0` is preserved.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n * @example\n *\n * _.toString(null);\n * // => ''\n *\n * _.toString(-0);\n * // => '-0'\n *\n * _.toString([1, 2, 3]);\n * // => '1,2,3'\n */\nfunction toString(value) {\n  return value == null ? '' : baseToString(value);\n}\n\nmodule.exports = toString;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/toString.js?");
 
 /***/ }),
 
@@ -11358,7 +11468,7 @@ eval("\n\nif (false) {} else {\n  module.exports = __webpack_require__(/*! ./cjs
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ArrayType: function() { return /* binding */ ArrayType; },\n/* harmony export */   \"default\": function() { return /* binding */ getArrayType; }\n/* harmony export */ });\n/* harmony import */ var _MixedType__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MixedType */ \"./node_modules/schema-typed/es/MixedType.js\");\n\nclass ArrayType extends _MixedType__WEBPACK_IMPORTED_MODULE_0__.MixedType {\n    constructor(errorMessage) {\n        super('array');\n        this.isArrayTypeNested = false;\n        super.pushRule({\n            onValid: v => {\n                // Skip array type check for nested array elements\n                if (this.isArrayTypeNested) {\n                    return true;\n                }\n                return Array.isArray(v);\n            },\n            errorMessage: errorMessage || this.locale.type\n        });\n    }\n    rangeLength(minLength, maxLength, errorMessage = this.locale.rangeLength) {\n        super.pushRule({\n            onValid: (value) => value.length >= minLength && value.length <= maxLength,\n            errorMessage,\n            params: { minLength, maxLength }\n        });\n        return this;\n    }\n    minLength(minLength, errorMessage = this.locale.minLength) {\n        super.pushRule({\n            onValid: value => value.length >= minLength,\n            errorMessage,\n            params: { minLength }\n        });\n        return this;\n    }\n    maxLength(maxLength, errorMessage = this.locale.maxLength) {\n        super.pushRule({\n            onValid: value => value.length <= maxLength,\n            errorMessage,\n            params: { maxLength }\n        });\n        return this;\n    }\n    unrepeatable(errorMessage = this.locale.unrepeatable) {\n        super.pushRule({\n            onValid: items => {\n                const hash = {};\n                for (const i in items) {\n                    if (hash[items[i]]) {\n                        return false;\n                    }\n                    hash[items[i]] = true;\n                }\n                return true;\n            },\n            errorMessage\n        });\n        return this;\n    }\n    of(type) {\n        this[_MixedType__WEBPACK_IMPORTED_MODULE_0__.arrayTypeSchemaSpec] = type;\n        // Mark inner ArrayType as nested when dealing with nested arrays\n        if (type instanceof ArrayType) {\n            type.isArrayTypeNested = true;\n        }\n        super.pushRule({\n            onValid: (items, data, fieldName) => {\n                // For non-array values in nested arrays, pass directly to inner type validation\n                if (!Array.isArray(items) && this.isArrayTypeNested) {\n                    return type.check(items, data, fieldName);\n                }\n                // For non-array values in non-nested arrays, return array type error\n                if (!Array.isArray(items)) {\n                    return {\n                        hasError: true,\n                        errorMessage: this.locale.type\n                    };\n                }\n                const checkResults = items.map((value, index) => {\n                    const name = Array.isArray(fieldName)\n                        ? [...fieldName, `[${index}]`]\n                        : [fieldName, `[${index}]`];\n                    return type.check(value, data, name);\n                });\n                const hasError = !!checkResults.find(item => item === null || item === void 0 ? void 0 : item.hasError);\n                return {\n                    hasError,\n                    array: checkResults\n                };\n            }\n        });\n        return this;\n    }\n}\nfunction getArrayType(errorMessage) {\n    return new ArrayType(errorMessage);\n}\n//# sourceMappingURL=ArrayType.js.map\n\n//# sourceURL=webpack://rsuite/./node_modules/schema-typed/es/ArrayType.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ArrayType: function() { return /* binding */ ArrayType; },\n/* harmony export */   \"default\": function() { return /* binding */ getArrayType; }\n/* harmony export */ });\n/* harmony import */ var _MixedType__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MixedType */ \"./node_modules/schema-typed/es/MixedType.js\");\n\nclass ArrayType extends _MixedType__WEBPACK_IMPORTED_MODULE_0__.MixedType {\n    constructor(errorMessage) {\n        super('array');\n        this.isArrayTypeNested = false;\n        super.pushRule({\n            onValid: v => {\n                // Skip array type check for nested array elements\n                if (this.isArrayTypeNested) {\n                    return true;\n                }\n                return Array.isArray(v);\n            },\n            errorMessage: errorMessage || this.locale.type\n        });\n    }\n    rangeLength(minLength, maxLength, errorMessage = this.locale.rangeLength) {\n        super.pushRule({\n            onValid: (value) => value.length >= minLength && value.length <= maxLength,\n            errorMessage,\n            params: { minLength, maxLength }\n        });\n        return this;\n    }\n    minLength(minLength, errorMessage = this.locale.minLength) {\n        super.pushRule({\n            onValid: value => value.length >= minLength,\n            errorMessage,\n            params: { minLength }\n        });\n        return this;\n    }\n    maxLength(maxLength, errorMessage = this.locale.maxLength) {\n        super.pushRule({\n            onValid: value => value.length <= maxLength,\n            errorMessage,\n            params: { maxLength }\n        });\n        return this;\n    }\n    unrepeatable(errorMessage = this.locale.unrepeatable) {\n        super.pushRule({\n            onValid: items => {\n                const hash = {};\n                for (const i in items) {\n                    if (hash[items[i]]) {\n                        return false;\n                    }\n                    hash[items[i]] = true;\n                }\n                return true;\n            },\n            errorMessage\n        });\n        return this;\n    }\n    of(...types) {\n        if (types.length === 1) {\n            const type = types[0];\n            this[_MixedType__WEBPACK_IMPORTED_MODULE_0__.arrayTypeSchemaSpec] = type;\n            // Mark inner ArrayType as nested when dealing with nested arrays\n            if (type instanceof ArrayType) {\n                type.isArrayTypeNested = true;\n            }\n            super.pushRule({\n                onValid: (items, data, fieldName) => {\n                    // For non-array values in nested arrays, pass directly to inner type validation\n                    if (!Array.isArray(items) && this.isArrayTypeNested) {\n                        return type.check(items, data, fieldName);\n                    }\n                    // For non-array values in non-nested arrays, return array type error\n                    if (!Array.isArray(items)) {\n                        return {\n                            hasError: true,\n                            errorMessage: this.locale.type\n                        };\n                    }\n                    const checkResults = items.map((value, index) => {\n                        const name = Array.isArray(fieldName)\n                            ? [...fieldName, `[${index}]`]\n                            : [fieldName, `[${index}]`];\n                        return type.check(value, data, name);\n                    });\n                    const hasError = !!checkResults.find(item => item === null || item === void 0 ? void 0 : item.hasError);\n                    return {\n                        hasError,\n                        array: checkResults\n                    };\n                }\n            });\n        }\n        else {\n            this[_MixedType__WEBPACK_IMPORTED_MODULE_0__.arrayTypeSchemaSpec] = types;\n            super.pushRule({\n                onValid: (items, data, fieldName) => {\n                    const checkResults = items.map((value, index) => {\n                        const name = Array.isArray(fieldName)\n                            ? [...fieldName, `[${index}]`]\n                            : [fieldName, `[${index}]`];\n                        return types[index].check(value, data, name);\n                    });\n                    const hasError = !!checkResults.find(item => item === null || item === void 0 ? void 0 : item.hasError);\n                    return {\n                        hasError,\n                        array: checkResults\n                    };\n                }\n            });\n        }\n        return this;\n    }\n}\nfunction getArrayType(errorMessage) {\n    return new ArrayType(errorMessage);\n}\n//# sourceMappingURL=ArrayType.js.map\n\n//# sourceURL=webpack://rsuite/./node_modules/schema-typed/es/ArrayType.js?");
 
 /***/ }),
 
@@ -11391,7 +11501,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MixedType: function() { return /* binding */ MixedType; },\n/* harmony export */   arrayTypeSchemaSpec: function() { return /* binding */ arrayTypeSchemaSpec; },\n/* harmony export */   \"default\": function() { return /* binding */ getMixedType; },\n/* harmony export */   getFieldType: function() { return /* binding */ getFieldType; },\n/* harmony export */   getFieldValue: function() { return /* binding */ getFieldValue; },\n/* harmony export */   schemaSpecKey: function() { return /* binding */ schemaSpecKey; }\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./node_modules/schema-typed/es/utils/index.js\");\n/* harmony import */ var _utils_formatErrorMessage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/formatErrorMessage */ \"./node_modules/schema-typed/es/utils/formatErrorMessage.js\");\n/* harmony import */ var _locales__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./locales */ \"./node_modules/schema-typed/es/locales/index.js\");\n\n\n\nconst schemaSpecKey = 'objectTypeSchemaSpec';\nconst arrayTypeSchemaSpec = 'arrayTypeSchemaSpec';\n/**\n * Get the field type from the schema object\n */\nfunction getFieldType(schemaSpec, fieldName, nestedObject) {\n    if (nestedObject) {\n        const namePath = fieldName.split('.');\n        const currentField = namePath[0];\n        const arrayMatch = currentField.match(/(\\w+)\\[(\\d+)\\]/);\n        if (arrayMatch) {\n            const [, arrayField] = arrayMatch;\n            const type = schemaSpec[arrayField];\n            if (type === null || type === void 0 ? void 0 : type[arrayTypeSchemaSpec]) {\n                // If there are remaining paths and the type is ObjectType (has schemaSpecKey)\n                if (namePath.length > 1 && type[arrayTypeSchemaSpec][schemaSpecKey]) {\n                    return getFieldType(type[arrayTypeSchemaSpec][schemaSpecKey], namePath.slice(1).join('.'), true);\n                }\n                // Otherwise return the array element type directly\n                return type[arrayTypeSchemaSpec];\n            }\n            return type;\n        }\n        const joinedPath = namePath.join(`.${schemaSpecKey}.`);\n        return (0,_utils__WEBPACK_IMPORTED_MODULE_0__.get)(schemaSpec, joinedPath);\n    }\n    return schemaSpec === null || schemaSpec === void 0 ? void 0 : schemaSpec[fieldName];\n}\n/**\n * Get the field value from the data object\n */\nfunction getFieldValue(data, fieldName, nestedObject) {\n    return nestedObject ? (0,_utils__WEBPACK_IMPORTED_MODULE_0__.get)(data, fieldName) : data === null || data === void 0 ? void 0 : data[fieldName];\n}\nclass MixedType {\n    constructor(name) {\n        this.required = false;\n        this.requiredMessage = '';\n        this.trim = false;\n        this.emptyAllowed = false;\n        this.rules = [];\n        this.priorityRules = [];\n        // The field name that depends on the verification of other fields\n        this.otherFields = [];\n        this.proxyOptions = {};\n        this.$typeName = name;\n        this.locale = Object.assign(name ? _locales__WEBPACK_IMPORTED_MODULE_2__[\"default\"][name] : {}, _locales__WEBPACK_IMPORTED_MODULE_2__[\"default\"].mixed);\n    }\n    setSchemaOptions(schemaSpec, value) {\n        this.$schemaSpec = schemaSpec;\n        this.value = value;\n    }\n    check(value = this.value, data, fieldName) {\n        if (this.required && !(0,_utils__WEBPACK_IMPORTED_MODULE_0__.checkRequired)(value, this.trim, this.emptyAllowed)) {\n            return {\n                hasError: true,\n                errorMessage: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.formatErrorMessage)(this.requiredMessage, {\n                    name: this.fieldLabel || (0,_utils_formatErrorMessage__WEBPACK_IMPORTED_MODULE_1__.joinName)(fieldName)\n                })\n            };\n        }\n        const validator = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.createValidator)(data, fieldName, this.fieldLabel);\n        const checkResult = validator(value, this.priorityRules);\n        // If the priority rule fails, return the result directly\n        if (checkResult) {\n            return checkResult;\n        }\n        if (!this.required && (0,_utils__WEBPACK_IMPORTED_MODULE_0__.isEmpty)(value)) {\n            return { hasError: false };\n        }\n        return validator(value, this.rules) || { hasError: false };\n    }\n    checkAsync(value = this.value, data, fieldName) {\n        if (this.required && !(0,_utils__WEBPACK_IMPORTED_MODULE_0__.checkRequired)(value, this.trim, this.emptyAllowed)) {\n            return Promise.resolve({\n                hasError: true,\n                errorMessage: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.formatErrorMessage)(this.requiredMessage, {\n                    name: this.fieldLabel || (0,_utils_formatErrorMessage__WEBPACK_IMPORTED_MODULE_1__.joinName)(fieldName)\n                })\n            });\n        }\n        const validator = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.createValidatorAsync)(data, fieldName, this.fieldLabel);\n        return new Promise(resolve => validator(value, this.priorityRules)\n            .then((checkResult) => {\n            // If the priority rule fails, return the result directly\n            if (checkResult) {\n                resolve(checkResult);\n            }\n        })\n            .then(() => {\n            if (!this.required && (0,_utils__WEBPACK_IMPORTED_MODULE_0__.isEmpty)(value)) {\n                resolve({ hasError: false });\n            }\n        })\n            .then(() => validator(value, this.rules))\n            .then((checkResult) => {\n            if (checkResult) {\n                resolve(checkResult);\n            }\n            resolve({ hasError: false });\n        }));\n    }\n    pushRule(rule) {\n        var _a, _b;\n        const { onValid, errorMessage, priority, params } = rule;\n        const nextRule = {\n            onValid,\n            params,\n            isAsync: rule.isAsync,\n            errorMessage: errorMessage || ((_b = (_a = this.rules) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errorMessage)\n        };\n        if (priority) {\n            this.priorityRules.push(nextRule);\n        }\n        else {\n            this.rules.push(nextRule);\n        }\n    }\n    addRule(onValid, errorMessage, priority) {\n        this.pushRule({ onValid, errorMessage, priority });\n        return this;\n    }\n    addAsyncRule(onValid, errorMessage, priority) {\n        this.pushRule({ onValid, isAsync: true, errorMessage, priority });\n        return this;\n    }\n    isRequired(errorMessage = this.locale.isRequired, trim = true) {\n        this.required = true;\n        this.trim = trim;\n        this.requiredMessage = errorMessage;\n        return this;\n    }\n    isRequiredOrEmpty(errorMessage = this.locale.isRequiredOrEmpty, trim = true) {\n        this.required = true;\n        this.trim = trim;\n        this.emptyAllowed = true;\n        this.requiredMessage = errorMessage;\n        return this;\n    }\n    /**\n     * Define data verification rules based on conditions.\n     * @param condition\n     * @example\n     *\n     * ```js\n     * SchemaModel({\n     *   option: StringType().isOneOf(['a', 'b', 'other']),\n     *   other: StringType().when(schema => {\n     *     const { value } = schema.option;\n     *     return value === 'other' ? StringType().isRequired('Other required') : StringType();\n     *   })\n     * });\n     * ```\n     */\n    when(condition) {\n        this.addRule((value, data, fieldName) => {\n            return condition(this.$schemaSpec).check(value, data, fieldName);\n        }, undefined, true);\n        return this;\n    }\n    /**\n     * Check if the value is equal to the value of another field.\n     * @example\n     *\n     * ```js\n     * SchemaModel({\n     *   password: StringType().isRequired(),\n     *   confirmPassword: StringType().equalTo('password').isRequired()\n     * });\n     * ```\n     */\n    equalTo(fieldName, errorMessage = this.locale.equalTo) {\n        const errorMessageFunc = () => {\n            const type = getFieldType(this.$schemaSpec, fieldName, true);\n            return (0,_utils__WEBPACK_IMPORTED_MODULE_0__.formatErrorMessage)(errorMessage, { toFieldName: (type === null || type === void 0 ? void 0 : type.fieldLabel) || fieldName });\n        };\n        this.addRule((value, data) => {\n            return (0,_utils__WEBPACK_IMPORTED_MODULE_0__.shallowEqual)(value, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.get)(data, fieldName));\n        }, errorMessageFunc);\n        return this;\n    }\n    /**\n     * After the field verification passes, proxy verification of other fields.\n     * @param options.checkIfValueExists When the value of other fields exists, the verification is performed (default: false)\n     * @example\n     *\n     * ```js\n     * SchemaModel({\n     *   password: StringType().isRequired().proxy(['confirmPassword']),\n     *   confirmPassword: StringType().equalTo('password').isRequired()\n     * });\n     * ```\n     */\n    proxy(fieldNames, options) {\n        this.otherFields = fieldNames;\n        this.proxyOptions = options || {};\n        return this;\n    }\n    /**\n     * Overrides the key name in error messages.\n     *\n     * @example\n     * ```js\n     * SchemaModel({\n     *  first_name: StringType().label('First name'),\n     *  age: NumberType().label('Age')\n     * });\n     * ```\n     */\n    label(label) {\n        this.fieldLabel = label;\n        return this;\n    }\n}\nfunction getMixedType() {\n    return new MixedType();\n}\n//# sourceMappingURL=MixedType.js.map\n\n//# sourceURL=webpack://rsuite/./node_modules/schema-typed/es/MixedType.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   MixedType: function() { return /* binding */ MixedType; },\n/* harmony export */   arrayTypeSchemaSpec: function() { return /* binding */ arrayTypeSchemaSpec; },\n/* harmony export */   \"default\": function() { return /* binding */ getMixedType; },\n/* harmony export */   getFieldType: function() { return /* binding */ getFieldType; },\n/* harmony export */   getFieldValue: function() { return /* binding */ getFieldValue; },\n/* harmony export */   schemaSpecKey: function() { return /* binding */ schemaSpecKey; }\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./node_modules/schema-typed/es/utils/index.js\");\n/* harmony import */ var _utils_formatErrorMessage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/formatErrorMessage */ \"./node_modules/schema-typed/es/utils/formatErrorMessage.js\");\n/* harmony import */ var _locales__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./locales */ \"./node_modules/schema-typed/es/locales/index.js\");\n\n\n\nconst schemaSpecKey = 'objectTypeSchemaSpec';\nconst arrayTypeSchemaSpec = 'arrayTypeSchemaSpec';\n/**\n * Get the field type from the schema object\n */\nfunction getFieldType(schemaSpec, fieldName, nestedObject) {\n    if (schemaSpec) {\n        if (nestedObject) {\n            const namePath = fieldName.split('.');\n            const currentField = namePath[0];\n            const arrayMatch = currentField.match(/(\\w+)\\[(\\d+)\\]/);\n            if (arrayMatch) {\n                const [, arrayField, arrayIndex] = arrayMatch;\n                const type = schemaSpec[arrayField];\n                if (type === null || type === void 0 ? void 0 : type[arrayTypeSchemaSpec]) {\n                    const arrayType = type[arrayTypeSchemaSpec];\n                    if (namePath.length > 1) {\n                        if (arrayType[schemaSpecKey]) {\n                            return getFieldType(arrayType[schemaSpecKey], namePath.slice(1).join('.'), true);\n                        }\n                        if (Array.isArray(arrayType) && arrayType[parseInt(arrayIndex)][schemaSpecKey]) {\n                            return getFieldType(arrayType[parseInt(arrayIndex)][schemaSpecKey], namePath.slice(1).join('.'), true);\n                        }\n                    }\n                    if (Array.isArray(arrayType)) {\n                        return arrayType[parseInt(arrayIndex)];\n                    }\n                    // Otherwise return the array element type directly\n                    return arrayType;\n                }\n                return type;\n            }\n            else {\n                const type = schemaSpec[currentField];\n                if (namePath.length === 1) {\n                    return type;\n                }\n                if (namePath.length > 1 && type && type[schemaSpecKey]) {\n                    return getFieldType(type[schemaSpecKey], namePath.slice(1).join('.'), true);\n                }\n            }\n        }\n        return schemaSpec === null || schemaSpec === void 0 ? void 0 : schemaSpec[fieldName];\n    }\n}\n/**\n * Get the field value from the data object\n */\nfunction getFieldValue(data, fieldName, nestedObject) {\n    return nestedObject ? (0,_utils__WEBPACK_IMPORTED_MODULE_0__.get)(data, fieldName) : data === null || data === void 0 ? void 0 : data[fieldName];\n}\nclass MixedType {\n    constructor(name) {\n        this.required = false;\n        this.requiredMessage = '';\n        this.trim = false;\n        this.emptyAllowed = false;\n        this.rules = [];\n        this.priorityRules = [];\n        // The field name that depends on the verification of other fields\n        this.otherFields = [];\n        this.proxyOptions = {};\n        this.$typeName = name;\n        this.locale = Object.assign(name ? _locales__WEBPACK_IMPORTED_MODULE_2__[\"default\"][name] : {}, _locales__WEBPACK_IMPORTED_MODULE_2__[\"default\"].mixed);\n    }\n    setSchemaOptions(schemaSpec, value) {\n        this.$schemaSpec = schemaSpec;\n        this.value = value;\n    }\n    check(value = this.value, data, fieldName) {\n        if (this.required && !(0,_utils__WEBPACK_IMPORTED_MODULE_0__.checkRequired)(value, this.trim, this.emptyAllowed)) {\n            return {\n                hasError: true,\n                errorMessage: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.formatErrorMessage)(this.requiredMessage, {\n                    name: this.fieldLabel || (0,_utils_formatErrorMessage__WEBPACK_IMPORTED_MODULE_1__.joinName)(fieldName)\n                })\n            };\n        }\n        const validator = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.createValidator)(data, fieldName, this.fieldLabel);\n        const checkResult = validator(value, this.priorityRules);\n        // If the priority rule fails, return the result directly\n        if (checkResult) {\n            return checkResult;\n        }\n        if (!this.required && (0,_utils__WEBPACK_IMPORTED_MODULE_0__.isEmpty)(value)) {\n            return { hasError: false };\n        }\n        return validator(value, this.rules) || { hasError: false };\n    }\n    checkAsync(value = this.value, data, fieldName) {\n        if (this.required && !(0,_utils__WEBPACK_IMPORTED_MODULE_0__.checkRequired)(value, this.trim, this.emptyAllowed)) {\n            return Promise.resolve({\n                hasError: true,\n                errorMessage: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.formatErrorMessage)(this.requiredMessage, {\n                    name: this.fieldLabel || (0,_utils_formatErrorMessage__WEBPACK_IMPORTED_MODULE_1__.joinName)(fieldName)\n                })\n            });\n        }\n        const validator = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.createValidatorAsync)(data, fieldName, this.fieldLabel);\n        return new Promise(resolve => validator(value, this.priorityRules)\n            .then((checkResult) => {\n            // If the priority rule fails, return the result directly\n            if (checkResult) {\n                resolve(checkResult);\n            }\n        })\n            .then(() => {\n            if (!this.required && (0,_utils__WEBPACK_IMPORTED_MODULE_0__.isEmpty)(value)) {\n                resolve({ hasError: false });\n            }\n        })\n            .then(() => validator(value, this.rules))\n            .then((checkResult) => {\n            if (checkResult) {\n                resolve(checkResult);\n            }\n            resolve({ hasError: false });\n        }));\n    }\n    pushRule(rule) {\n        var _a, _b;\n        const { onValid, errorMessage, priority, params } = rule;\n        const nextRule = {\n            onValid,\n            params,\n            isAsync: rule.isAsync,\n            errorMessage: errorMessage || ((_b = (_a = this.rules) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errorMessage)\n        };\n        if (priority) {\n            this.priorityRules.push(nextRule);\n        }\n        else {\n            this.rules.push(nextRule);\n        }\n    }\n    addRule(onValid, errorMessage, priority) {\n        this.pushRule({ onValid, errorMessage, priority });\n        return this;\n    }\n    addAsyncRule(onValid, errorMessage, priority) {\n        this.pushRule({ onValid, isAsync: true, errorMessage, priority });\n        return this;\n    }\n    isRequired(errorMessage = this.locale.isRequired, trim = true) {\n        this.required = true;\n        this.trim = trim;\n        this.requiredMessage = errorMessage;\n        return this;\n    }\n    isRequiredOrEmpty(errorMessage = this.locale.isRequiredOrEmpty, trim = true) {\n        this.required = true;\n        this.trim = trim;\n        this.emptyAllowed = true;\n        this.requiredMessage = errorMessage;\n        return this;\n    }\n    /**\n     * Define data verification rules based on conditions.\n     * @param condition\n     * @example\n     *\n     * ```js\n     * SchemaModel({\n     *   option: StringType().isOneOf(['a', 'b', 'other']),\n     *   other: StringType().when(schema => {\n     *     const { value } = schema.option;\n     *     return value === 'other' ? StringType().isRequired('Other required') : StringType();\n     *   })\n     * });\n     * ```\n     */\n    when(condition) {\n        this.addRule((value, data, fieldName) => {\n            return condition(this.$schemaSpec).check(value, data, fieldName);\n        }, undefined, true);\n        return this;\n    }\n    /**\n     * Check if the value is equal to the value of another field.\n     * @example\n     *\n     * ```js\n     * SchemaModel({\n     *   password: StringType().isRequired(),\n     *   confirmPassword: StringType().equalTo('password').isRequired()\n     * });\n     * ```\n     */\n    equalTo(fieldName, errorMessage = this.locale.equalTo) {\n        const errorMessageFunc = () => {\n            const type = getFieldType(this.$schemaSpec, fieldName, true);\n            return (0,_utils__WEBPACK_IMPORTED_MODULE_0__.formatErrorMessage)(errorMessage, { toFieldName: (type === null || type === void 0 ? void 0 : type.fieldLabel) || fieldName });\n        };\n        this.addRule((value, data) => {\n            return (0,_utils__WEBPACK_IMPORTED_MODULE_0__.shallowEqual)(value, (0,_utils__WEBPACK_IMPORTED_MODULE_0__.get)(data, fieldName));\n        }, errorMessageFunc);\n        return this;\n    }\n    /**\n     * After the field verification passes, proxy verification of other fields.\n     * @param options.checkIfValueExists When the value of other fields exists, the verification is performed (default: false)\n     * @example\n     *\n     * ```js\n     * SchemaModel({\n     *   password: StringType().isRequired().proxy(['confirmPassword']),\n     *   confirmPassword: StringType().equalTo('password').isRequired()\n     * });\n     * ```\n     */\n    proxy(fieldNames, options) {\n        this.otherFields = fieldNames;\n        this.proxyOptions = options || {};\n        return this;\n    }\n    /**\n     * Overrides the key name in error messages.\n     *\n     * @example\n     * ```js\n     * SchemaModel({\n     *  first_name: StringType().label('First name'),\n     *  age: NumberType().label('Age')\n     * });\n     * ```\n     */\n    label(label) {\n        this.fieldLabel = label;\n        return this;\n    }\n}\nfunction getMixedType() {\n    return new MixedType();\n}\n//# sourceMappingURL=MixedType.js.map\n\n//# sourceURL=webpack://rsuite/./node_modules/schema-typed/es/MixedType.js?");
 
 /***/ }),