rsuite 6.0.0-canary-20241227 → 6.0.0-canary-20250103

package/dist/rsuite.js

@@ -1082,7 +1082,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
 /***/ (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 _PanelGroup = _interopRequireDefault(__webpack_require__(/*! ../PanelGroup */ \"./src/PanelGroup/index.tsx\"));\nvar _AccordionPanel = _interopRequireDefault(__webpack_require__(/*! ./AccordionPanel */ \"./src/Accordion/AccordionPanel.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Accordion/Accordion.tsx\";\n/**\n * The `Accordion` component is used to display content that can be collapsed.\n * @see https://rsuitejs.com/components/accordion\n */\nconst Accordion = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Accordion', props);\n  return /*#__PURE__*/_react.default.createElement(_PanelGroup.default, (0, _extends2.default)({\n    accordion: true,\n    ref: ref\n  }, propsWithDefaults, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 20,\n      columnNumber: 10\n    }\n  }));\n});\nAccordion.Panel = _AccordionPanel.default;\nAccordion.displayName = 'Accordion';\nvar _default = exports[\"default\"] = Accordion;\n\n//# sourceURL=webpack://rsuite/./src/Accordion/Accordion.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 _PanelGroup = _interopRequireDefault(__webpack_require__(/*! ../PanelGroup */ \"./src/PanelGroup/index.tsx\"));\nvar _AccordionPanel = _interopRequireDefault(__webpack_require__(/*! ./AccordionPanel */ \"./src/Accordion/AccordionPanel.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Accordion/Accordion.tsx\";\n/**\n * The `Accordion` component is used to display content that can be collapsed.\n * @see https://rsuitejs.com/components/accordion\n */\nconst Accordion = /*#__PURE__*/_react.default.forwardRef(function Accordion(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Accordion', props);\n  return /*#__PURE__*/_react.default.createElement(_PanelGroup.default, (0, _extends2.default)({\n    accordion: true,\n    ref: ref\n  }, propsWithDefaults, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 20,\n      columnNumber: 10\n    }\n  }));\n});\nAccordion.Panel = _AccordionPanel.default;\nAccordion.displayName = 'Accordion';\nvar _default = exports[\"default\"] = Accordion;\n\n//# sourceURL=webpack://rsuite/./src/Accordion/Accordion.tsx?");
 
 /***/ }),
 
@@ -1214,7 +1214,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 _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 _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/AutoComplete/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Combobox = _interopRequireDefault(__webpack_require__(/*! ./Combobox */ \"./src/AutoComplete/Combobox.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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('AutoComplete', props);\n  const {\n    as: Component = 'div',\n    disabled,\n    className,\n    placement = 'bottomStart',\n    selectOnEnter = true,\n    classPrefix = 'auto-complete',\n    defaultValue = '',\n    menuAutoWidth = true,\n    data,\n    value: valueProp,\n    open,\n    style,\n    size,\n    menuClassName,\n    id,\n    readOnly,\n    plaintext,\n    renderMenu,\n    renderMenuItem,\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    withClassPrefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix({\n    disabled\n  }));\n  const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys));\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      left,\n      top,\n      className\n    } = positionProps;\n    const styles = {\n      left,\n      top\n    };\n    const menu = /*#__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      renderMenuItem: renderMenuItem,\n      data: items,\n      className: menuClassName,\n      query: value,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 237,\n        columnNumber: 9\n      }\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      style: styles,\n      className: className,\n      onKeyDown: handleKeyDownEvent,\n      target: trigger,\n      autoWidth: menuAutoWidth,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 251,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu);\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: 266,\n        columnNumber: 9\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: 275,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: classes,\n    style: style,\n    ref: root\n  }, restProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 284,\n      columnNumber: 9\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: 11\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 _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 _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/AutoComplete/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _Combobox = _interopRequireDefault(__webpack_require__(/*! ./Combobox */ \"./src/AutoComplete/Combobox.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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('AutoComplete', props);\n  const {\n    as: Component = 'div',\n    disabled,\n    className,\n    placement = 'bottomStart',\n    selectOnEnter = true,\n    classPrefix = 'auto-complete',\n    defaultValue = '',\n    menuAutoWidth = true,\n    data,\n    value: valueProp,\n    open,\n    style,\n    size,\n    menuClassName,\n    id,\n    readOnly,\n    plaintext,\n    renderMenu,\n    renderMenuItem,\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    withClassPrefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix({\n    disabled\n  }));\n  const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys));\n  const renderPopup = (positionProps, speakerRef) => {\n    const {\n      left,\n      top,\n      className\n    } = positionProps;\n    const styles = {\n      left,\n      top\n    };\n    const menu = /*#__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      renderMenuItem: renderMenuItem,\n      data: items,\n      className: menuClassName,\n      query: value,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 238,\n        columnNumber: 9\n      }\n    });\n    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {\n      ref: (0, _utils.mergeRefs)(overlay, speakerRef),\n      style: styles,\n      className: className,\n      onKeyDown: handleKeyDownEvent,\n      target: trigger,\n      autoWidth: menuAutoWidth,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 252,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu);\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: 267,\n        columnNumber: 9\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: 276,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: classes,\n    style: style,\n    ref: root\n  }, restProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 285,\n      columnNumber: 9\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: 286,\n      columnNumber: 11\n    }\n  }))));\n});\nAutoComplete.displayName = 'AutoComplete';\nvar _default = exports[\"default\"] = AutoComplete;\n\n//# sourceURL=webpack://rsuite/./src/AutoComplete/AutoComplete.tsx?");
 
 /***/ }),
 
@@ -1225,7 +1225,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 _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/AutoComplete/Combobox.tsx\";\nconst Combobox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    id,\n    popupType\n  } = (0, _Picker.useCombobox)();\n  const {\n    expanded,\n    focusItemValue,\n    ...rest\n  } = props;\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    role: \"combobox\",\n    \"aria-autocomplete\": \"list\",\n    \"aria-haspopup\": popupType,\n    \"aria-expanded\": expanded,\n    \"aria-activedescendant\": focusItemValue ? `${id}-opt-${focusItemValue}` : undefined,\n    autoComplete: \"off\",\n    id: id,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 15,\n      columnNumber: 5\n    }\n  }));\n});\nvar _default = exports[\"default\"] = Combobox;\n\n//# sourceURL=webpack://rsuite/./src/AutoComplete/Combobox.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 _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/AutoComplete/Combobox.tsx\";\nconst Combobox = /*#__PURE__*/_react.default.forwardRef(function Combobox(props, ref) {\n  const {\n    id,\n    popupType\n  } = (0, _Picker.useCombobox)();\n  const {\n    expanded,\n    focusItemValue,\n    ...rest\n  } = props;\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({\n    role: \"combobox\",\n    \"aria-autocomplete\": \"list\",\n    \"aria-haspopup\": popupType,\n    \"aria-expanded\": expanded,\n    \"aria-activedescendant\": focusItemValue ? `${id}-opt-${focusItemValue}` : undefined,\n    autoComplete: \"off\",\n    id: id,\n    ref: ref\n  }, rest, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 18,\n      columnNumber: 5\n    }\n  }));\n});\nvar _default = exports[\"default\"] = Combobox;\n\n//# sourceURL=webpack://rsuite/./src/AutoComplete/Combobox.tsx?");
 
 /***/ }),
 
@@ -1324,7 +1324,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 _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/Badge/Badge.tsx\";\n/**\n * The Badge component is usually used to mark or highlight the status or quantity of an object.\n * @see https://rsuitejs.com/components/badge\n */\nconst Badge = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Badge', props);\n  const {\n    as: Component = 'div',\n    content: contentText,\n    color,\n    className,\n    classPrefix = 'badge',\n    children,\n    maxCount = 99,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withClassPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const dot = contentText === undefined || contentText === null;\n  const classes = merge(className, withClassPrefix(color, {\n    independent: !children,\n    wrapper: children,\n    dot\n  }));\n  if (contentText === false) {\n    return /*#__PURE__*/_react.default.cloneElement(children, {\n      ref\n    });\n  }\n  const content = typeof contentText === 'number' && contentText > maxCount ? `${maxCount}+` : contentText;\n  if (!children) {\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n      ref: ref,\n      className: classes,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 54,\n        columnNumber: 9\n      }\n    }), content);\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 60,\n      columnNumber: 7\n    }\n  }), children, /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('content'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 62,\n      columnNumber: 9\n    }\n  }, content));\n});\nBadge.displayName = 'Badge';\nvar _default = exports[\"default\"] = Badge;\n\n//# sourceURL=webpack://rsuite/./src/Badge/Badge.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 _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\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/Badge/Badge.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 Badge component is usually used to mark or highlight the status or quantity of an object.\n * @see https://rsuitejs.com/components/badge\n */\nconst Badge = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Badge', props);\n  const {\n    as: Component = 'div',\n    content,\n    color,\n    className,\n    classPrefix = 'badge',\n    children,\n    compact,\n    maxCount = 99,\n    offset,\n    outline = true,\n    placement = 'topEnd',\n    shape,\n    style,\n    invisible,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withClassPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const text = typeof content === 'number' && content > maxCount ? `${maxCount}+` : content;\n  const classes = merge(className, withClassPrefix((0, _utils.isPresetColor)(color) && color, shape, {\n    compact,\n    outline,\n    hidden: invisible,\n    wrapper: children,\n    independent: !children,\n    [(0, _kebabCase.default)(placement)]: children\n  }));\n  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createOffsetStyles)(offset, '--rs-badge-offset'), (0, _utils.createColorVariables)(color, '--rs-badge-bg')), [style, offset, color]);\n  if (!children) {\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref,\n      className: classes,\n      style: styles\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 119,\n        columnNumber: 7\n      }\n    }), text);\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: classes,\n    style: styles\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 125,\n      columnNumber: 5\n    }\n  }), children, /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('content'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 127,\n      columnNumber: 7\n    }\n  }, text));\n});\nBadge.displayName = 'Badge';\nvar _default = exports[\"default\"] = Badge;\n\n//# sourceURL=webpack://rsuite/./src/Badge/Badge.tsx?");
 
 /***/ }),
 
@@ -1346,7 +1346,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 _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _BreadcrumbItem = _interopRequireDefault(__webpack_require__(/*! ./BreadcrumbItem */ \"./src/Breadcrumb/BreadcrumbItem.tsx\"));\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 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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Breadcrumb', props);\n  const {\n    as: Component = 'nav',\n    className,\n    classPrefix = 'breadcrumb',\n    children,\n    ellipsis = '...',\n    maxItems = 5,\n    separator = '/',\n    locale,\n    onExpand,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(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: 81,\n            columnNumber: 36\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: 94,\n            columnNumber: 24\n          }\n        }, separator),\n        onClick: handleClickEllipsis,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 89,\n          columnNumber: 11\n        }\n      }, /*#__PURE__*/_react.default.createElement(\"span\", {\n        \"aria-hidden\": true,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 97,\n          columnNumber: 13\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, withClassPrefix());\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 117,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"ol\", {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 118,\n      columnNumber: 7\n    }\n  }, content));\n});\nBreadcrumb.Item = _BreadcrumbItem.default;\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 _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _BreadcrumbItem = _interopRequireDefault(__webpack_require__(/*! ./BreadcrumbItem */ \"./src/Breadcrumb/BreadcrumbItem.tsx\"));\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 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 = /*#__PURE__*/_react.default.forwardRef(function Breadcrumb(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Breadcrumb', props);\n  const {\n    as: Component = 'nav',\n    className,\n    classPrefix = 'breadcrumb',\n    children,\n    ellipsis = '...',\n    maxItems = 5,\n    separator = '/',\n    locale,\n    onExpand,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(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: this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 84,\n            columnNumber: 36\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: this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 97,\n            columnNumber: 24\n          }\n        }, separator),\n        onClick: handleClickEllipsis,\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 92,\n          columnNumber: 11\n        }\n      }, /*#__PURE__*/_react.default.createElement(\"span\", {\n        \"aria-hidden\": true,\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 100,\n          columnNumber: 13\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, withClassPrefix());\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 120,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"ol\", {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 121,\n      columnNumber: 7\n    }\n  }, content));\n});\nBreadcrumb.Item = _BreadcrumbItem.default;\nBreadcrumb.displayName = 'Breadcrumb';\nvar _default = exports[\"default\"] = Breadcrumb;\n\n//# sourceURL=webpack://rsuite/./src/Breadcrumb/Breadcrumb.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 _Ripple = _interopRequireDefault(__webpack_require__(/*! ../internals/Ripple */ \"./src/internals/Ripple/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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Button', props);\n  const {\n    as,\n    active,\n    appearance = 'default',\n    block,\n    className,\n    children,\n    classPrefix = 'btn',\n    color,\n    disabled,\n    loading,\n    ripple = true,\n    size: sizeProp,\n    startIcon,\n    endIcon,\n    type: typeProp,\n    ...rest\n  } = propsWithDefaults;\n  const buttonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);\n  const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;\n  const {\n    withClassPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(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: 88,\n        columnNumber: 20\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: 89,\n        columnNumber: 81\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: 94,\n        columnNumber: 24\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: 96,\n        columnNumber: 22\n      }\n    }, endIcon) : null, rippleElement);\n  }, [appearance, children, endIcon, loading, prefix, ripple, startIcon]);\n  if (rest.href) {\n    return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({}, rest, {\n      as: as,\n      ref: ref,\n      \"aria-disabled\": disabled,\n      disabled: disabled,\n      className: classes,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 104,\n        columnNumber: 9\n      }\n    }), buttonContent);\n  }\n  const Component = as || 'button';\n  const type = typeProp || (Component === 'button' ? 'button' : undefined);\n  const role = rest.role || (Component !== 'button' ? 'button' : undefined);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    role: role,\n    type: type,\n    ref: ref,\n    disabled: disabled,\n    \"aria-disabled\": disabled,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 122,\n      columnNumber: 7\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 _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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Button', props);\n  const {\n    as,\n    active: activeProp,\n    appearance = 'default',\n    block,\n    className,\n    children,\n    classPrefix = 'btn',\n    color,\n    disabled,\n    loading,\n    ripple = true,\n    size: sizeProp,\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 buttonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);\n  const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;\n  const {\n    withClassPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(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: 100,\n        columnNumber: 20\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: 101,\n        columnNumber: 81\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: 106,\n        columnNumber: 24\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: 108,\n        columnNumber: 22\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  if (rest.href) {\n    return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({}, rest, {\n      as: as,\n      ref: ref,\n      \"aria-disabled\": disabled,\n      disabled: disabled,\n      className: classes,\n      onClick: handleClick,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 126,\n        columnNumber: 9\n      }\n    }), buttonContent);\n  }\n  const Component = as || 'button';\n  const type = typeProp || (Component === 'button' ? 'button' : undefined);\n  const role = rest.role || (Component !== 'button' ? 'button' : undefined);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\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: 145,\n      columnNumber: 7\n    }\n  }), buttonContent);\n});\nButton.displayName = 'Button';\nvar _default = exports[\"default\"] = Button;\n\n//# sourceURL=webpack://rsuite/./src/Button/Button.tsx?");
 
 /***/ }),
 
@@ -1775,7 +1775,7 @@ eval("\n\nexports.__esModule = true;\nexports.isEveryDateInMonth = isEveryDateIn
 /***/ (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 _CardHeader = _interopRequireDefault(__webpack_require__(/*! ./CardHeader */ \"./src/Card/CardHeader.tsx\"));\nvar _CardBody = _interopRequireDefault(__webpack_require__(/*! ./CardBody */ \"./src/Card/CardBody.tsx\"));\nvar _CardFooter = _interopRequireDefault(__webpack_require__(/*! ./CardFooter */ \"./src/Card/CardFooter.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Card/Card.tsx\";\nconst Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Card', props);\n  const {\n    as: Component = 'div',\n    bordered = true,\n    classPrefix = 'card',\n    className,\n    children,\n    direction,\n    shaded,\n    style,\n    size,\n    width,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(direction, size, {\n    bordered,\n    shaded: shaded === true,\n    ['shaded-hover']: shaded === 'hover'\n  }));\n  const styles = {\n    ...style,\n    '--rs-card-width': typeof width === 'number' ? `${width}px` : width\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: classes,\n    style: styles\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 70,\n      columnNumber: 5\n    }\n  }), children);\n});\nCard.displayName = 'Card';\nCard.Header = _CardHeader.default;\nCard.Body = _CardBody.default;\nCard.Footer = _CardFooter.default;\nvar _default = exports[\"default\"] = Card;\n\n//# sourceURL=webpack://rsuite/./src/Card/Card.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 _CardHeader = _interopRequireDefault(__webpack_require__(/*! ./CardHeader */ \"./src/Card/CardHeader.tsx\"));\nvar _CardBody = _interopRequireDefault(__webpack_require__(/*! ./CardBody */ \"./src/Card/CardBody.tsx\"));\nvar _CardFooter = _interopRequireDefault(__webpack_require__(/*! ./CardFooter */ \"./src/Card/CardFooter.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Card/Card.tsx\";\nconst Card = /*#__PURE__*/_react.default.forwardRef(function Card(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Card', props);\n  const {\n    as: Component = 'div',\n    bordered = true,\n    classPrefix = 'card',\n    className,\n    children,\n    direction,\n    shaded,\n    style,\n    size,\n    width,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(direction, size, {\n    bordered,\n    shaded: shaded === true,\n    ['shaded-hover']: shaded === 'hover'\n  }));\n  const styles = {\n    ...style,\n    '--rs-card-width': typeof width === 'number' ? `${width}px` : width\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: classes,\n    style: styles\n  }, rest, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 70,\n      columnNumber: 5\n    }\n  }), children);\n});\nCard.displayName = 'Card';\nCard.Header = _CardHeader.default;\nCard.Body = _CardBody.default;\nCard.Footer = _CardFooter.default;\nvar _default = exports[\"default\"] = Card;\n\n//# sourceURL=webpack://rsuite/./src/Card/Card.tsx?");
 
 /***/ }),
 
@@ -1962,7 +1962,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.getColumnsAndPaths = getColumnsAndPaths;\n/**\n * Calculate columns to be displayed:\n *\n * - Every ancestor level of activeItem should be displayed\n * - The level that activeItem is at should be displayed\n * - If activeItem is a parent node, its child level should be displayed\n *\n * @param items\n * @param value\n * @param options\n * @returns\n */\nfunction getColumnsAndPaths(items, pathTarget, options) {\n  const {\n    getParent,\n    getChildren\n  } = options;\n  if (!pathTarget) {\n    return {\n      columns: [items],\n      path: []\n    };\n  }\n  const columns = [];\n  const path = [pathTarget];\n  const children = getChildren(pathTarget);\n  if (children && children.length > 0) {\n    columns.unshift(children);\n  }\n  for (let parent = getParent(pathTarget); !!parent; parent = getParent(parent)) {\n    var _getChildren;\n    columns.unshift((_getChildren = getChildren(parent)) !== null && _getChildren !== void 0 ? _getChildren : []);\n    path.unshift(parent);\n  }\n  columns.unshift(items);\n  return {\n    columns,\n    path\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/utils.ts?");
+eval("\n\nexports.__esModule = true;\nexports.getColumnsAndPaths = getColumnsAndPaths;\n/**\n * Calculate columns to be displayed:\n *\n * - Every ancestor level of activeItem should be displayed\n * - The level that activeItem is at should be displayed\n * - If activeItem is a parent node, its child level should be displayed\n *\n * @param items\n * @param value\n * @param options\n * @returns\n */\nfunction getColumnsAndPaths(items, pathTarget, options) {\n  const {\n    getParent,\n    getChildren\n  } = options;\n  if (!pathTarget) {\n    return {\n      columns: [items],\n      path: []\n    };\n  }\n  const columns = [];\n  const path = [pathTarget];\n  const children = getChildren(pathTarget);\n  if (children && children.length > 0) {\n    columns.unshift(children);\n  }\n  for (let parent = getParent(pathTarget); parent; parent = getParent(parent)) {\n    var _getChildren;\n    columns.unshift((_getChildren = getChildren(parent)) !== null && _getChildren !== void 0 ? _getChildren : []);\n    path.unshift(parent);\n  }\n  columns.unshift(items);\n  return {\n    columns,\n    path\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/CascadeTree/utils.ts?");
 
 /***/ }),
 
@@ -2270,7 +2270,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.CustomContext = void 0;\nexports[\"default\"] = CustomProvider;\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _IconProvider = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/IconProvider */ \"./node_modules/@rsuite/icons/esm/IconProvider.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _prefix = __webpack_require__(/*! ../internals/utils/prefix */ \"./src/internals/utils/prefix.ts\");\nvar _DOMHelper = __webpack_require__(/*! ../DOMHelper */ \"./src/DOMHelper/index.ts\");\nvar _ToastContainer = _interopRequireWildcard(__webpack_require__(/*! ../toaster/ToastContainer */ \"./src/toaster/ToastContainer.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/CustomProvider/CustomProvider.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 CustomContext = exports.CustomContext = /*#__PURE__*/_react.default.createContext({});\nconst themes = ['light', 'dark', 'high-contrast'];\n\n/**\n * CustomProvider is used to provide global configuration, such as language, theme, etc.\n *\n * @see https://rsuitejs.com/components/custom-provider\n */\nfunction CustomProvider(props) {\n  const {\n    children,\n    classPrefix = (0, _prefix.getClassNamePrefix)(),\n    components,\n    iconClassPrefix = classPrefix,\n    theme,\n    toastContainer: container,\n    disableRipple,\n    csp,\n    disableInlineStyles,\n    ...rest\n  } = props;\n  const toasters = (0, _react.useRef)(new Map());\n  const {\n    Portal\n  } = (0, _hooks.usePortal)({\n    container,\n    waitMount: true\n  });\n  const value = (0, _react.useMemo)(() => ({\n    classPrefix,\n    theme,\n    toasters,\n    disableRipple,\n    components,\n    ...rest\n  }), [classPrefix, theme, disableRipple, components, rest]);\n  const iconContext = (0, _react.useMemo)(() => ({\n    classPrefix: iconClassPrefix,\n    csp,\n    disableInlineStyles\n  }), [iconClassPrefix, csp, disableInlineStyles]);\n  (0, _hooks.useIsomorphicLayoutEffect)(() => {\n    if (_DOMHelper.canUseDOM && theme) {\n      (0, _DOMHelper.addClass)(document.body, (0, _prefix.prefix)(classPrefix, `theme-${theme}`));\n\n      // Remove the className that will cause style conflicts\n      themes.forEach(t => {\n        if (t !== theme) {\n          (0, _DOMHelper.removeClass)(document.body, (0, _prefix.prefix)(classPrefix, `theme-${t}`));\n        }\n      });\n    }\n  }, [classPrefix, theme]);\n  return /*#__PURE__*/_react.default.createElement(CustomContext.Provider, {\n    value: value,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 176,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_IconProvider.default, {\n    value: iconContext,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 177,\n      columnNumber: 7\n    }\n  }, children, /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 179,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: `${classPrefix}toast-provider`,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 180,\n      columnNumber: 11\n    }\n  }, _ToastContainer.toastPlacements.map(placement => /*#__PURE__*/_react.default.createElement(_ToastContainer.default, {\n    key: placement,\n    placement: placement,\n    ref: ref => {\n      toasters.current.set(placement, ref);\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 182,\n      columnNumber: 15\n    }\n  }))))));\n}\n\n//# sourceURL=webpack://rsuite/./src/CustomProvider/CustomProvider.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.CustomContext = void 0;\nexports[\"default\"] = CustomProvider;\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _IconProvider = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/IconProvider */ \"./node_modules/@rsuite/icons/esm/IconProvider.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _prefix = __webpack_require__(/*! ../internals/utils/prefix */ \"./src/internals/utils/prefix.ts\");\nvar _DOMHelper = __webpack_require__(/*! ../DOMHelper */ \"./src/DOMHelper/index.ts\");\nvar _ToastContainer = _interopRequireWildcard(__webpack_require__(/*! ../toaster/ToastContainer */ \"./src/toaster/ToastContainer.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/CustomProvider/CustomProvider.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 CustomContext = exports.CustomContext = /*#__PURE__*/_react.default.createContext({});\nconst themes = ['light', 'dark', 'high-contrast'];\n\n/**\n * CustomProvider is used to provide global configuration, such as language, theme, etc.\n *\n * @see https://rsuitejs.com/components/custom-provider\n */\nfunction CustomProvider(props) {\n  const {\n    children,\n    classPrefix = (0, _prefix.getClassNamePrefix)(),\n    components,\n    iconClassPrefix = classPrefix,\n    theme,\n    toastContainer = _ToastContainer.defaultToasterContainer,\n    disableRipple,\n    csp,\n    disableInlineStyles,\n    ...rest\n  } = props;\n  const toasters = (0, _react.useRef)(new Map());\n  const {\n    Portal\n  } = (0, _hooks.usePortal)({\n    container: toastContainer,\n    waitMount: true\n  });\n  const value = (0, _react.useMemo)(() => ({\n    classPrefix,\n    theme,\n    toasters,\n    disableRipple,\n    components,\n    toastContainer,\n    ...rest\n  }), [classPrefix, theme, disableRipple, components, toastContainer, rest]);\n  const iconContext = (0, _react.useMemo)(() => ({\n    classPrefix: iconClassPrefix,\n    csp,\n    disableInlineStyles\n  }), [iconClassPrefix, csp, disableInlineStyles]);\n  (0, _hooks.useIsomorphicLayoutEffect)(() => {\n    if (_DOMHelper.canUseDOM && theme) {\n      (0, _DOMHelper.addClass)(document.body, (0, _prefix.prefix)(classPrefix, `theme-${theme}`));\n\n      // Remove the className that will cause style conflicts\n      themes.forEach(t => {\n        if (t !== theme) {\n          (0, _DOMHelper.removeClass)(document.body, (0, _prefix.prefix)(classPrefix, `theme-${t}`));\n        }\n      });\n    }\n  }, [classPrefix, theme]);\n  return /*#__PURE__*/_react.default.createElement(CustomContext.Provider, {\n    value: value,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 180,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_IconProvider.default, {\n    value: iconContext,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 181,\n      columnNumber: 7\n    }\n  }, children, /*#__PURE__*/_react.default.createElement(Portal, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 183,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: `${classPrefix}toast-provider`,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 184,\n      columnNumber: 11\n    }\n  }, _ToastContainer.toastPlacements.map(placement => /*#__PURE__*/_react.default.createElement(_ToastContainer.default, {\n    key: placement,\n    placement: placement,\n    ref: ref => {\n      toasters.current.set(placement, ref);\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 186,\n      columnNumber: 15\n    }\n  }))))));\n}\n\n//# sourceURL=webpack://rsuite/./src/CustomProvider/CustomProvider.tsx?");
 
 /***/ }),
 
@@ -2369,7 +2369,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.useDateInputState = useDateInputState;\nvar _startCase = _interopRequireDefault(__webpack_require__(/*! lodash/startCase */ \"./node_modules/lodash/startCase.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _date = __webpack_require__(/*! ../../internals/utils/date */ \"./src/internals/utils/date/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _DateField = __webpack_require__(/*! ../DateField */ \"./src/DateInput/DateField.ts\");\nfunction useDateInputState(_ref) {\n  let {\n    formatStr,\n    locale,\n    date,\n    isControlledDate\n  } = _ref;\n  const {\n    formatDate\n  } = (0, _CustomProvider.useCustom)();\n  const {\n    dateField,\n    dispatch,\n    toDateString,\n    toDate,\n    isEmptyValue\n  } = (0, _DateField.useDateField)(formatStr, locale.localize, date);\n  const setDateOffset = (pattern, offset, callback) => {\n    const currentDate = new Date();\n    const year = dateField.year || currentDate.getFullYear();\n    const month = dateField.month ? dateField.month - 1 : currentDate.getMonth();\n    const day = dateField.day || 0;\n    const hour = dateField.hour || 0;\n    const minute = dateField.minute || 0;\n    const second = dateField.second || 0;\n    let actionName;\n    let value;\n    switch (pattern) {\n      case 'y':\n        actionName = 'setYear';\n        value = (0, _date.addYears)(new Date(year, 0), offset).getFullYear();\n        break;\n      case 'M':\n        actionName = 'setMonth';\n        value = (0, _date.addMonths)(new Date(year, month), offset).getMonth() + 1;\n        break;\n      case 'd':\n        actionName = 'setDay';\n        const prevDate = new Date(year, month, day);\n        value = (0, _date.addDays)(prevDate, offset).getDate();\n        if (offset > 0) {\n          value = (0, _date.isLastDayOfMonth)(prevDate) ? 1 : value;\n        } else {\n          value = prevDate.getDate() === 1 ? (0, _date.lastDayOfMonth)(prevDate).getDate() : value;\n        }\n        break;\n      case 'H':\n      case 'h':\n        actionName = 'setHour';\n        value = (0, _date.addHours)(new Date(year, month, day, hour), offset).getHours();\n        break;\n      case 'm':\n        actionName = 'setMinute';\n        value = (0, _date.addMinutes)(new Date(year, month, day, hour, minute), offset).getMinutes();\n        break;\n      case 's':\n        actionName = 'setSecond';\n        value = (0, _date.addSeconds)(new Date(year, month, day, hour, minute, second), offset).getSeconds();\n        break;\n      case 'a':\n        actionName = 'setHour';\n        value = hour >= 12 ? hour - 12 : hour + 12;\n        break;\n    }\n    if (actionName && typeof value === 'number') {\n      dispatch({\n        type: actionName,\n        value\n      });\n      const field = _DateField.patternMap[pattern];\n      callback === null || callback === void 0 || callback(toDate(field, value));\n    }\n  };\n  const setDateField = (pattern, value, callback) => {\n    const field = _DateField.patternMap[pattern];\n    const actionName = `set${(0, _startCase.default)(field)}`;\n    dispatch({\n      type: actionName,\n      value\n    });\n    callback === null || callback === void 0 || callback(toDate(field, value));\n  };\n  const getDateField = pattern => {\n    const fieldName = _DateField.patternMap[pattern];\n    return {\n      name: fieldName,\n      value: dateField[fieldName]\n    };\n  };\n  const toControlledDateString = () => {\n    if (date && (0, _date.isValid)(date)) {\n      return formatDate(date, formatStr, {\n        locale\n      });\n    }\n    // if date is not valid, return uncontrolled date string\n    return toDateString();\n  };\n  const setNewDate = (0, _react.useCallback)(value => {\n    dispatch({\n      type: 'setNewDate',\n      value\n    });\n  }, [dispatch]);\n  (0, _react.useEffect)(() => {\n    if (isControlledDate) {\n      if (date && (0, _date.isValid)(date)) {\n        setNewDate(date);\n      } else if (date === null) {\n        setNewDate(null);\n      }\n    }\n  }, [date, dispatch, isControlledDate, setNewDate]);\n  return {\n    dateField,\n    setDateOffset,\n    setDateField,\n    setNewDate,\n    getDateField,\n    toDateString: isControlledDate ? toControlledDateString : toDateString,\n    isEmptyValue\n  };\n}\nvar _default = exports[\"default\"] = useDateInputState;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useDateInputState.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.useDateInputState = useDateInputState;\nvar _startCase = _interopRequireDefault(__webpack_require__(/*! lodash/startCase */ \"./node_modules/lodash/startCase.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _date = __webpack_require__(/*! ../../internals/utils/date */ \"./src/internals/utils/date/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _DateField = __webpack_require__(/*! ../DateField */ \"./src/DateInput/DateField.ts\");\nfunction useDateInputState(_ref) {\n  let {\n    formatStr,\n    locale,\n    date,\n    isControlledDate\n  } = _ref;\n  const {\n    formatDate\n  } = (0, _CustomProvider.useCustom)();\n  const {\n    dateField,\n    dispatch,\n    toDateString,\n    toDate,\n    isEmptyValue\n  } = (0, _DateField.useDateField)(formatStr, locale.localize, date);\n  const setDateOffset = (pattern, offset, callback) => {\n    const currentDate = new Date();\n    const year = dateField.year || currentDate.getFullYear();\n    const month = dateField.month ? dateField.month - 1 : currentDate.getMonth();\n    const day = dateField.day || 0;\n    const hour = dateField.hour || 0;\n    const minute = dateField.minute || 0;\n    const second = dateField.second || 0;\n    let actionName;\n    let value;\n    switch (pattern) {\n      case 'y':\n        actionName = 'setYear';\n        value = (0, _date.addYears)(new Date(year, 0), offset).getFullYear();\n        break;\n      case 'M':\n        actionName = 'setMonth';\n        value = (0, _date.addMonths)(new Date(year, month), offset).getMonth() + 1;\n        break;\n      case 'd':\n        {\n          actionName = 'setDay';\n          const prevDate = new Date(year, month, day);\n          value = (0, _date.addDays)(prevDate, offset).getDate();\n          if (offset > 0) {\n            value = (0, _date.isLastDayOfMonth)(prevDate) ? 1 : value;\n          } else {\n            value = prevDate.getDate() === 1 ? (0, _date.lastDayOfMonth)(prevDate).getDate() : value;\n          }\n          break;\n        }\n      case 'H':\n      case 'h':\n        actionName = 'setHour';\n        value = (0, _date.addHours)(new Date(year, month, day, hour), offset).getHours();\n        break;\n      case 'm':\n        actionName = 'setMinute';\n        value = (0, _date.addMinutes)(new Date(year, month, day, hour, minute), offset).getMinutes();\n        break;\n      case 's':\n        actionName = 'setSecond';\n        value = (0, _date.addSeconds)(new Date(year, month, day, hour, minute, second), offset).getSeconds();\n        break;\n      case 'a':\n        actionName = 'setHour';\n        value = hour >= 12 ? hour - 12 : hour + 12;\n        break;\n    }\n    if (actionName && typeof value === 'number') {\n      dispatch({\n        type: actionName,\n        value\n      });\n      const field = _DateField.patternMap[pattern];\n      callback === null || callback === void 0 || callback(toDate(field, value));\n    }\n  };\n  const setDateField = (pattern, value, callback) => {\n    const field = _DateField.patternMap[pattern];\n    const actionName = `set${(0, _startCase.default)(field)}`;\n    dispatch({\n      type: actionName,\n      value\n    });\n    callback === null || callback === void 0 || callback(toDate(field, value));\n  };\n  const getDateField = pattern => {\n    const fieldName = _DateField.patternMap[pattern];\n    return {\n      name: fieldName,\n      value: dateField[fieldName]\n    };\n  };\n  const toControlledDateString = () => {\n    if (date && (0, _date.isValid)(date)) {\n      return formatDate(date, formatStr, {\n        locale\n      });\n    }\n    // if date is not valid, return uncontrolled date string\n    return toDateString();\n  };\n  const setNewDate = (0, _react.useCallback)(value => {\n    dispatch({\n      type: 'setNewDate',\n      value\n    });\n  }, [dispatch]);\n  (0, _react.useEffect)(() => {\n    if (isControlledDate) {\n      if (date && (0, _date.isValid)(date)) {\n        setNewDate(date);\n      } else if (date === null) {\n        setNewDate(null);\n      }\n    }\n  }, [date, dispatch, isControlledDate, setNewDate]);\n  return {\n    dateField,\n    setDateOffset,\n    setDateField,\n    setNewDate,\n    getDateField,\n    toDateString: isControlledDate ? toControlledDateString : toDateString,\n    isEmptyValue\n  };\n}\nvar _default = exports[\"default\"] = useDateInputState;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useDateInputState.ts?");
 
 /***/ }),
 
@@ -2402,7 +2402,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.us
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.useKeyboardInputEvent = useKeyboardInputEvent;\nfunction useKeyboardInputEvent(_ref) {\n  let {\n    onSegmentChange,\n    onSegmentValueChange,\n    onSegmentValueChangeWithNumericKeys,\n    onSegmentValueRemove,\n    onKeyDown\n  } = _ref;\n  return event => {\n    var _key$match, _key$match2;\n    const key = event.key;\n    switch (key) {\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        onSegmentChange === null || onSegmentChange === void 0 || onSegmentChange(event);\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        onSegmentValueChange === null || onSegmentValueChange === void 0 || onSegmentValueChange(event);\n        event.preventDefault();\n        break;\n      case 'Backspace':\n        onSegmentValueRemove === null || onSegmentValueRemove === void 0 || onSegmentValueRemove(event);\n        event.preventDefault();\n        break;\n      case (_key$match = key.match(/\\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:\n        // Allow numeric keys to be entered\n        onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 || onSegmentValueChangeWithNumericKeys(event);\n        event.preventDefault();\n      case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:\n        // Determine whether the Ctrl or Command key is pressed, does not affect user copy and paste\n        if (event.ctrlKey || event.metaKey) {\n          break;\n        }\n\n        // Prevent letters from being entered\n        event.preventDefault();\n        break;\n    }\n    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);\n  };\n}\nvar _default = exports[\"default\"] = useKeyboardInputEvent;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useKeyboardInputEvent.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.useKeyboardInputEvent = useKeyboardInputEvent;\nfunction useKeyboardInputEvent(_ref) {\n  let {\n    onSegmentChange,\n    onSegmentValueChange,\n    onSegmentValueChangeWithNumericKeys,\n    onSegmentValueRemove,\n    onKeyDown\n  } = _ref;\n  return event => {\n    var _key$match, _key$match2;\n    const key = event.key;\n    switch (key) {\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        onSegmentChange === null || onSegmentChange === void 0 || onSegmentChange(event);\n        event.preventDefault();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        onSegmentValueChange === null || onSegmentValueChange === void 0 || onSegmentValueChange(event);\n        event.preventDefault();\n        break;\n      case 'Backspace':\n        onSegmentValueRemove === null || onSegmentValueRemove === void 0 || onSegmentValueRemove(event);\n        event.preventDefault();\n        break;\n      case (_key$match = key.match(/\\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:\n        // Allow numeric keys to be entered\n        onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 || onSegmentValueChangeWithNumericKeys(event);\n        event.preventDefault();\n        break;\n      case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:\n        // Determine whether the Ctrl or Command key is pressed, does not affect user copy and paste\n        if (event.ctrlKey || event.metaKey) {\n          break;\n        }\n\n        // Prevent letters from being entered\n        event.preventDefault();\n        break;\n    }\n    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);\n  };\n}\nvar _default = exports[\"default\"] = useKeyboardInputEvent;\n\n//# sourceURL=webpack://rsuite/./src/DateInput/hooks/useKeyboardInputEvent.ts?");
 
 /***/ }),
 
@@ -2457,7 +2457,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 _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/DatePicker/PredefinedRanges.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 PredefinedRanges = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    className,\n    disableShortcut,\n    onShortcutClick,\n    calendarDate,\n    ranges: rangesProp,\n    locale,\n    ...rest\n  } = props;\n  const [ranges, setRanges] = (0, _react.useState)((0, _utils.getRanges)(props));\n  (0, _hooks.useUpdateEffect)(() => {\n    setRanges((0, _utils.getRanges)({\n      ranges: rangesProp,\n      calendarDate\n    }));\n  }, [calendarDate, rangesProp]);\n  const hasLocaleKey = (0, _react.useCallback)(key => (0, _utils.getDefaultRanges)(calendarDate).some(item => item.label === key), [calendarDate]);\n  if (ranges.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    className: className,\n    ref: ref,\n    alignItems: \"flex-start\",\n    spacing: 4\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 47,\n      columnNumber: 5\n    }\n  }), ranges.map((range, index) => {\n    const {\n      value,\n      closeOverlay,\n      label,\n      ...rest\n    } = range;\n    const disabled = disableShortcut === null || disableShortcut === void 0 ? void 0 : disableShortcut(value);\n    const handleClickShortcut = event => {\n      if (disabled) {\n        return;\n      }\n      onShortcutClick === null || onShortcutClick === void 0 || onShortcutClick(range, closeOverlay !== false ? true : false, event);\n    };\n    return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({\n      appearance: \"link\",\n      size: \"sm\",\n      key: index,\n      disabled: disabled,\n      onClick: handleClickShortcut\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 60,\n        columnNumber: 11\n      }\n    }), hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);\n  }));\n});\nvar _default = exports[\"default\"] = PredefinedRanges;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/PredefinedRanges.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 _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/DatePicker/utils.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/DatePicker/PredefinedRanges.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 PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function PredefinedRanges(props, ref) {\n  const {\n    className,\n    disableShortcut,\n    onShortcutClick,\n    calendarDate,\n    ranges: rangesProp,\n    locale,\n    ...rest\n  } = props;\n  const [ranges, setRanges] = (0, _react.useState)((0, _utils.getRanges)(props));\n  (0, _hooks.useUpdateEffect)(() => {\n    setRanges((0, _utils.getRanges)({\n      ranges: rangesProp,\n      calendarDate\n    }));\n  }, [calendarDate, rangesProp]);\n  const hasLocaleKey = (0, _react.useCallback)(key => (0, _utils.getDefaultRanges)(calendarDate).some(item => item.label === key), [calendarDate]);\n  if (ranges.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    className: className,\n    ref: ref,\n    alignItems: \"flex-start\",\n    spacing: 4\n  }, rest, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 48,\n      columnNumber: 7\n    }\n  }), ranges.map((range, index) => {\n    const {\n      value,\n      closeOverlay,\n      label,\n      ...rest\n    } = range;\n    const disabled = disableShortcut === null || disableShortcut === void 0 ? void 0 : disableShortcut(value);\n    const handleClickShortcut = event => {\n      if (disabled) {\n        return;\n      }\n      onShortcutClick === null || onShortcutClick === void 0 || onShortcutClick(range, closeOverlay !== false ? true : false, event);\n    };\n    return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({\n      appearance: \"link\",\n      size: \"sm\",\n      key: index,\n      disabled: disabled,\n      onClick: handleClickShortcut\n    }, rest, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 61,\n        columnNumber: 13\n      }\n    }), hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);\n  }));\n});\nvar _default = exports[\"default\"] = PredefinedRanges;\n\n//# sourceURL=webpack://rsuite/./src/DatePicker/PredefinedRanges.tsx?");
 
 /***/ }),
 
@@ -2578,7 +2578,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 _DateRangePickerProvider = __webpack_require__(/*! ./DateRangePickerProvider */ \"./src/DateRangePicker/DateRangePickerProvider.ts\");\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 _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 _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 _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  var _ref, _ref2;\n  const {\n    formatDate,\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('DateRangePicker', props);\n  const {\n    as: Component = 'div',\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    disabledDate: DEPRECATED_disabledDate,\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    menuClassName,\n    menuStyle,\n    oneTap,\n    placeholder = '',\n    placement = 'bottomStart',\n    ranges,\n    readOnly,\n    showOneCalendar = false,\n    showWeekNumbers,\n    showMeridian: DEPRECATED_showMeridian,\n    showMeridiem = DEPRECATED_showMeridian,\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    ...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.useClassNames)(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    DEPRECATED_disabledDate\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    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      left,\n      top,\n      className\n    } = positionProps;\n    const classes = merge(className, menuClassName, 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 styles = {\n      ...menuStyle,\n      left,\n      top\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    };\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: 927,\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: 932,\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: 933,\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: styles,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 944,\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: 953,\n        columnNumber: 11\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 954,\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: 956,\n        columnNumber: 17\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 969,\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: 970,\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: 972,\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: 982,\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: 985,\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: 990,\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    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: 1075,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, {\n      [prefix('error')]: invalidValue\n    }),\n    style: style,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1084,\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: 1090,\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: 1092,\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: 1103,\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: 1106,\n      columnNumber: 15\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1123,\n      columnNumber: 15\n    }\n  }))));\n});\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 _DateRangePickerProvider = __webpack_require__(/*! ./DateRangePickerProvider */ \"./src/DateRangePicker/DateRangePickerProvider.ts\");\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 _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 _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 _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\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 = /*#__PURE__*/_react.default.forwardRef(function DateRangePicker(props, ref) {\n  var _ref, _ref2;\n  const {\n    formatDate,\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('DateRangePicker', props);\n  const {\n    as: Component = 'div',\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    disabledDate: DEPRECATED_disabledDate,\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    menuClassName,\n    menuStyle,\n    oneTap,\n    placeholder = '',\n    placement = 'bottomStart',\n    ranges,\n    readOnly,\n    showOneCalendar = false,\n    showWeekNumbers,\n    showMeridian: DEPRECATED_showMeridian,\n    showMeridiem = DEPRECATED_showMeridian,\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    ...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.useClassNames)(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    DEPRECATED_disabledDate\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    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      left,\n      top,\n      className\n    } = positionProps;\n    const classes = merge(className, menuClassName, 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 styles = {\n      ...menuStyle,\n      left,\n      top\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    };\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: this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 923,\n            columnNumber: 16\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: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 928,\n          columnNumber: 11\n        }\n      })), /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({\n        index: 1\n      }, calendarProps, {\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 929,\n          columnNumber: 11\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: styles,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 940,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: panelClasses,\n      style: panelStyles,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 949,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {\n      alignItems: \"flex-start\",\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 950,\n        columnNumber: 11\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: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 952,\n        columnNumber: 15\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 965,\n        columnNumber: 13\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix('daterange-content'),\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 966,\n        columnNumber: 15\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: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 968,\n        columnNumber: 19\n      }\n    }), /*#__PURE__*/_react.default.createElement(\"div\", {\n      className: prefix(`daterange-calendar-${showOneCalendar ? 'single' : 'group'}`),\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 978,\n        columnNumber: 17\n      }\n    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerProvider.DateRangePickerProvider, {\n      value: {\n        isSelectedIdle\n      },\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 981,\n        columnNumber: 19\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: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 986,\n        columnNumber: 15\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    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: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1071,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    ref: root,\n    className: merge(className, classes, {\n      [prefix('error')]: invalidValue\n    }),\n    style: style,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1080,\n      columnNumber: 7\n    }\n  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {\n    value: value,\n    format: formatStr,\n    plaintext: plaintext,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1086,\n      columnNumber: 11\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: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1088,\n      columnNumber: 11\n    }\n  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {\n    className: prefix`label`,\n    id: `${id}-label`,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1099,\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: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1102,\n      columnNumber: 13\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {\n    loading: loading,\n    caretAs: caretAs,\n    onClose: handleClean,\n    showCleanButton: showCleanButton,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 1119,\n      columnNumber: 13\n    }\n  }))));\n});\nDateRangePicker.displayName = 'DateRangePicker';\nvar _default = exports[\"default\"] = DateRangePicker;\n\n//# sourceURL=webpack://rsuite/./src/DateRangePicker/DateRangePicker.tsx?");
 
 /***/ }),
 
@@ -2710,7 +2710,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 _Slide = _interopRequireDefault(__webpack_require__(/*! ../Animation/Slide */ \"./src/Animation/Slide.tsx\"));\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! ../Modal */ \"./src/Modal/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 _DrawerBody = _interopRequireDefault(__webpack_require__(/*! ./DrawerBody */ \"./src/Drawer/DrawerBody.tsx\"));\nvar _DrawerHeader = _interopRequireDefault(__webpack_require__(/*! ./DrawerHeader */ \"./src/Drawer/DrawerHeader.tsx\"));\nvar _DrawerActions = _interopRequireDefault(__webpack_require__(/*! ./DrawerActions */ \"./src/Drawer/DrawerActions.tsx\"));\nvar _DrawerFooter = _interopRequireDefault(__webpack_require__(/*! ./DrawerFooter */ \"./src/Drawer/DrawerFooter.tsx\"));\nvar _DrawerTitle = _interopRequireDefault(__webpack_require__(/*! ./DrawerTitle */ \"./src/Drawer/DrawerTitle.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/Drawer.tsx\";\n/**\n * The Drawer component is used to display extra content from a main content.\n * @see https://rsuitejs.com/components/drawer\n */\nconst Drawer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Drawer', props);\n  const {\n    className,\n    placement = 'right',\n    classPrefix = 'drawer',\n    animation = _Slide.default,\n    closeButton = true,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, prefix(placement));\n  const animationProps = {\n    placement\n  };\n  return /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    overflow: false,\n    classPrefix: classPrefix,\n    className: classes,\n    animation: animation,\n    animationProps: animationProps,\n    isDrawer: true,\n    closeButton: closeButton,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 55,\n      columnNumber: 5\n    }\n  }));\n});\n_DrawerBody.default.displayName = 'DrawerBody';\n_DrawerHeader.default.displayName = 'DrawerHeader';\n_DrawerActions.default.displayName = 'DrawerActions';\n_DrawerFooter.default.displayName = 'DrawerFooter';\n_DrawerTitle.default.displayName = 'DrawerTitle';\nDrawer.Body = _DrawerBody.default;\nDrawer.Header = _DrawerHeader.default;\nDrawer.Actions = _DrawerActions.default;\nDrawer.Footer = (0, _utils.deprecateComponent)(_DrawerFooter.default, '<Drawer.Footer> has been deprecated, use <Drawer.Actions> instead.');\nDrawer.Title = _DrawerTitle.default;\nDrawer.displayName = 'Drawer';\nvar _default = exports[\"default\"] = Drawer;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/Drawer.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 _Slide = _interopRequireDefault(__webpack_require__(/*! ../Animation/Slide */ \"./src/Animation/Slide.tsx\"));\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! ../Modal */ \"./src/Modal/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 _DrawerBody = _interopRequireDefault(__webpack_require__(/*! ./DrawerBody */ \"./src/Drawer/DrawerBody.tsx\"));\nvar _DrawerHeader = _interopRequireDefault(__webpack_require__(/*! ./DrawerHeader */ \"./src/Drawer/DrawerHeader.tsx\"));\nvar _DrawerActions = _interopRequireDefault(__webpack_require__(/*! ./DrawerActions */ \"./src/Drawer/DrawerActions.tsx\"));\nvar _DrawerFooter = _interopRequireDefault(__webpack_require__(/*! ./DrawerFooter */ \"./src/Drawer/DrawerFooter.tsx\"));\nvar _DrawerTitle = _interopRequireDefault(__webpack_require__(/*! ./DrawerTitle */ \"./src/Drawer/DrawerTitle.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/Drawer.tsx\";\n/**\n * The Drawer component is used to display extra content from a main content.\n * @see https://rsuitejs.com/components/drawer\n */\nconst Drawer = /*#__PURE__*/_react.default.forwardRef(function Drawer(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Drawer', props);\n  const {\n    className,\n    placement = 'right',\n    classPrefix = 'drawer',\n    animation = _Slide.default,\n    closeButton = true,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, prefix(placement));\n  const animationProps = {\n    placement\n  };\n  return /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    overflow: false,\n    classPrefix: classPrefix,\n    className: classes,\n    animation: animation,\n    animationProps: animationProps,\n    isDrawer: true,\n    closeButton: closeButton,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 55,\n      columnNumber: 5\n    }\n  }));\n});\n_DrawerBody.default.displayName = 'DrawerBody';\n_DrawerHeader.default.displayName = 'DrawerHeader';\n_DrawerActions.default.displayName = 'DrawerActions';\n_DrawerFooter.default.displayName = 'DrawerFooter';\n_DrawerTitle.default.displayName = 'DrawerTitle';\nDrawer.Body = _DrawerBody.default;\nDrawer.Header = _DrawerHeader.default;\nDrawer.Actions = _DrawerActions.default;\nDrawer.Footer = (0, _utils.deprecateComponent)(_DrawerFooter.default, '<Drawer.Footer> has been deprecated, use <Drawer.Actions> instead.');\nDrawer.Title = _DrawerTitle.default;\nDrawer.displayName = 'Drawer';\nvar _default = exports[\"default\"] = Drawer;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/Drawer.tsx?");
 
 /***/ }),
 
@@ -2732,7 +2732,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 = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _ModalBody = _interopRequireDefault(__webpack_require__(/*! ../Modal/ModalBody */ \"./src/Modal/ModalBody.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/DrawerBody.tsx\";\nconst DrawerBody = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_ModalBody.default, (0, _extends2.default)({\n  classPrefix: \"drawer-body\"\n}, props, {\n  ref: ref,\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 7,\n    columnNumber: 5\n  }\n})));\nvar _default = exports[\"default\"] = DrawerBody;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/DrawerBody.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 _ModalBody = _interopRequireDefault(__webpack_require__(/*! ../Modal/ModalBody */ \"./src/Modal/ModalBody.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/DrawerBody.tsx\";\nconst DrawerBody = /*#__PURE__*/_react.default.forwardRef(function DrawerBody(props, ref) {\n  return /*#__PURE__*/_react.default.createElement(_ModalBody.default, (0, _extends2.default)({\n    classPrefix: \"drawer-body\"\n  }, props, {\n    ref: ref,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 7,\n      columnNumber: 12\n    }\n  }));\n});\nvar _default = exports[\"default\"] = DrawerBody;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/DrawerBody.tsx?");
 
 /***/ }),
 
@@ -2743,7 +2743,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 _ModalFooter = _interopRequireDefault(__webpack_require__(/*! ../Modal/ModalFooter */ \"./src/Modal/ModalFooter.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/DrawerFooter.tsx\";\nconst DrawerFooter = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_ModalFooter.default, (0, _extends2.default)({\n  classPrefix: \"drawer-footer\"\n}, props, {\n  ref: ref,\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 7,\n    columnNumber: 5\n  }\n})));\nvar _default = exports[\"default\"] = DrawerFooter;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/DrawerFooter.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 _ModalFooter = _interopRequireDefault(__webpack_require__(/*! ../Modal/ModalFooter */ \"./src/Modal/ModalFooter.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/DrawerFooter.tsx\";\nconst DrawerFooter = /*#__PURE__*/_react.default.forwardRef(function DrawerFooter(props, ref) {\n  return /*#__PURE__*/_react.default.createElement(_ModalFooter.default, (0, _extends2.default)({\n    classPrefix: \"drawer-footer\"\n  }, props, {\n    ref: ref,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 7,\n      columnNumber: 12\n    }\n  }));\n});\nvar _default = exports[\"default\"] = DrawerFooter;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/DrawerFooter.tsx?");
 
 /***/ }),
 
@@ -2754,7 +2754,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 _ModalHeader = _interopRequireDefault(__webpack_require__(/*! ../Modal/ModalHeader */ \"./src/Modal/ModalHeader.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/DrawerHeader.tsx\";\nconst DrawerHeader = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_ModalHeader.default, (0, _extends2.default)({\n  classPrefix: \"drawer-header\"\n}, props, {\n  ref: ref,\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 7,\n    columnNumber: 5\n  }\n})));\nvar _default = exports[\"default\"] = DrawerHeader;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/DrawerHeader.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 _ModalHeader = _interopRequireDefault(__webpack_require__(/*! ../Modal/ModalHeader */ \"./src/Modal/ModalHeader.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/DrawerHeader.tsx\";\nconst DrawerHeader = /*#__PURE__*/_react.default.forwardRef(function DrawerHeader(props, ref) {\n  return /*#__PURE__*/_react.default.createElement(_ModalHeader.default, (0, _extends2.default)({\n    classPrefix: \"drawer-header\"\n  }, props, {\n    ref: ref,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 7,\n      columnNumber: 12\n    }\n  }));\n});\nvar _default = exports[\"default\"] = DrawerHeader;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/DrawerHeader.tsx?");
 
 /***/ }),
 
@@ -2765,7 +2765,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 _ModalTitle = _interopRequireDefault(__webpack_require__(/*! ../Modal/ModalTitle */ \"./src/Modal/ModalTitle.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/DrawerTitle.tsx\";\nconst DrawerTitle = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_ModalTitle.default, (0, _extends2.default)({\n  classPrefix: \"drawer-title\"\n}, props, {\n  ref: ref,\n  __self: void 0,\n  __source: {\n    fileName: _jsxFileName,\n    lineNumber: 7,\n    columnNumber: 5\n  }\n})));\nvar _default = exports[\"default\"] = DrawerTitle;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/DrawerTitle.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 _ModalTitle = _interopRequireDefault(__webpack_require__(/*! ../Modal/ModalTitle */ \"./src/Modal/ModalTitle.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Drawer/DrawerTitle.tsx\";\nconst DrawerTitle = /*#__PURE__*/_react.default.forwardRef(function DrawerTitle(props, ref) {\n  return /*#__PURE__*/_react.default.createElement(_ModalTitle.default, (0, _extends2.default)({\n    classPrefix: \"drawer-title\"\n  }, props, {\n    ref: ref,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 7,\n      columnNumber: 12\n    }\n  }));\n});\nvar _default = exports[\"default\"] = DrawerTitle;\n\n//# sourceURL=webpack://rsuite/./src/Drawer/DrawerTitle.tsx?");
 
 /***/ }),
 
@@ -2787,7 +2787,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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/Dropdown/DropdownMenu.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _DropdownState = __webpack_require__(/*! ./DropdownState */ \"./src/Dropdown/DropdownState.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _DropdownItem = _interopRequireDefault(__webpack_require__(/*! ./DropdownItem */ \"./src/Dropdown/DropdownItem.tsx\"));\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menu */ \"./src/internals/Menu/Menu.tsx\"));\nvar _DropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./DropdownToggle */ \"./src/Dropdown/DropdownToggle.tsx\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\nvar _DropdownSeparator = _interopRequireDefault(__webpack_require__(/*! ./DropdownSeparator */ \"./src/Dropdown/DropdownSeparator.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Dropdown/Dropdown.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 `Dropdown` component is used to select an option from a set of options.\n * @see https://rsuitejs.com/components/dropdown\n *\n * The `<Dropdown>` API\n * - When used inside `<Sidenav>`, renders a `<TreeviewRootItem>`;\n * - Otherwise renders a `<MenuRoot>`\n */\nconst Dropdown = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Dropdown', props);\n  const {\n    as: Component = 'div',\n    activeKey,\n    title,\n    trigger = 'click',\n    placement = 'bottomStart',\n    toggleAs,\n    toggleClassName,\n    open,\n    defaultOpen,\n    classPrefix = 'dropdown',\n    className,\n    disabled,\n    children,\n    menuStyle,\n    style,\n    onClose,\n    onOpen,\n    onToggle,\n    onSelect,\n    ...toggleProps\n  } = propsWithDefaults;\n  const nav = (0, _react.useContext)(_NavContext.default);\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    withClassPrefix: withMenuClassPrefix,\n    merge: mergeMenuClassName\n  } = (0, _hooks.useClassNames)('dropdown-menu');\n  const menuButtonTriggers = (0, _react.useMemo)(() => {\n    if (!trigger) {\n      return undefined;\n    }\n    const triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n    return trigger.map(t => triggerMap[t]);\n  }, [trigger]);\n  const [{\n    items\n  }, dispatch] = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState);\n  const hasSelectedItem = (0, _react.useMemo)(() => {\n    return items.some(item => item.props.selected);\n  }, [items]);\n  const dropdownContextValue = (0, _react.useMemo)(() => {\n    return {\n      activeKey,\n      onSelect,\n      hasSelectedItem,\n      dispatch\n    };\n  }, [activeKey, onSelect, hasSelectedItem, dispatch]);\n\n  // Deprecate <Dropdown> within <Nav> usage\n  // in favor of <Nav.Menu> API\n  if (nav) {\n    (0, _utils.warnOnce)('Usage of <Dropdown> within <Nav> is deprecated. Replace with <Nav.Menu>');\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Menu, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 175,\n        columnNumber: 12\n      }\n    }));\n  }\n  const renderMenuButton = (menuButtonProps, menuButtonRef) => /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({\n    ref: menuButtonRef,\n    as: toggleAs,\n    className: toggleClassName,\n    placement: placement,\n    disabled: disabled\n  }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid']), {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 179,\n      columnNumber: 5\n    }\n  }), title);\n  return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {\n    value: dropdownContextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 193,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    open: open,\n    defaultOpen: defaultOpen,\n    menuButtonText: title,\n    renderMenuButton: renderMenuButton,\n    disabled: disabled,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: (_ref, popupRef) => {\n      let {\n        open,\n        ...popupProps\n      } = _ref;\n      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix({}));\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 205,\n          columnNumber: 13\n        }\n      }), children);\n    },\n    onToggleMenu: open => {\n      onToggle === null || onToggle === void 0 || onToggle(open);\n      if (open) {\n        onOpen === null || onOpen === void 0 || onOpen();\n      } else {\n        onClose === null || onClose === void 0 || onClose();\n      }\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 194,\n      columnNumber: 7\n    }\n  }, (_ref2, menuContainerRef) => {\n    let {\n      open,\n      ...menuContainer\n    } = _ref2;\n    const classes = merge(className, withClassPrefix({\n      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,\n      disabled,\n      open,\n      'selected-within': hasSelectedItem\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 236,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\nDropdown.Item = _DropdownItem.default;\nDropdown.Menu = _DropdownMenu.default;\nDropdown.Separator = _DropdownSeparator.default;\nDropdown.displayName = 'Dropdown';\nvar _default = exports[\"default\"] = Dropdown;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/Dropdown.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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _DropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./DropdownMenu */ \"./src/Dropdown/DropdownMenu.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _DropdownState = __webpack_require__(/*! ./DropdownState */ \"./src/Dropdown/DropdownState.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _DropdownItem = _interopRequireDefault(__webpack_require__(/*! ./DropdownItem */ \"./src/Dropdown/DropdownItem.tsx\"));\nvar _DropdownContext = _interopRequireDefault(__webpack_require__(/*! ./DropdownContext */ \"./src/Dropdown/DropdownContext.ts\"));\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menu */ \"./src/internals/Menu/Menu.tsx\"));\nvar _DropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./DropdownToggle */ \"./src/Dropdown/DropdownToggle.tsx\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _Nav = _interopRequireDefault(__webpack_require__(/*! ../Nav */ \"./src/Nav/index.tsx\"));\nvar _DropdownSeparator = _interopRequireDefault(__webpack_require__(/*! ./DropdownSeparator */ \"./src/Dropdown/DropdownSeparator.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Dropdown/Dropdown.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 `Dropdown` component is used to select an option from a set of options.\n * @see https://rsuitejs.com/components/dropdown\n *\n * The `<Dropdown>` API\n * - When used inside `<Sidenav>`, renders a `<TreeviewRootItem>`;\n * - Otherwise renders a `<MenuRoot>`\n */\nconst Dropdown = /*#__PURE__*/_react.default.forwardRef(function Dropdown(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Dropdown', props);\n  const {\n    as: Component = 'div',\n    activeKey,\n    title,\n    trigger = 'click',\n    placement = 'bottomStart',\n    toggleAs,\n    toggleClassName,\n    open,\n    defaultOpen,\n    classPrefix = 'dropdown',\n    className,\n    disabled,\n    children,\n    menuStyle,\n    style,\n    onClose,\n    onOpen,\n    onToggle,\n    onSelect,\n    ...toggleProps\n  } = propsWithDefaults;\n  const nav = (0, _react.useContext)(_NavContext.default);\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    withClassPrefix: withMenuClassPrefix,\n    merge: mergeMenuClassName\n  } = (0, _hooks.useClassNames)('dropdown-menu');\n  const menuButtonTriggers = (0, _react.useMemo)(() => {\n    if (!trigger) {\n      return undefined;\n    }\n    const triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n    return trigger.map(t => triggerMap[t]);\n  }, [trigger]);\n  const [{\n    items\n  }, dispatch] = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState);\n  const hasSelectedItem = (0, _react.useMemo)(() => {\n    return items.some(item => item.props.selected);\n  }, [items]);\n  const dropdownContextValue = (0, _react.useMemo)(() => {\n    return {\n      activeKey,\n      onSelect,\n      hasSelectedItem,\n      dispatch\n    };\n  }, [activeKey, onSelect, hasSelectedItem, dispatch]);\n\n  // Deprecate <Dropdown> within <Nav> usage\n  // in favor of <Nav.Menu> API\n  if (nav) {\n    (0, _utils.warnOnce)('Usage of <Dropdown> within <Nav> is deprecated. Replace with <Nav.Menu>');\n    return /*#__PURE__*/_react.default.createElement(_Nav.default.Menu, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 178,\n        columnNumber: 12\n      }\n    }));\n  }\n  const renderMenuButton = (menuButtonProps, menuButtonRef) => /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({\n    ref: menuButtonRef,\n    as: toggleAs,\n    className: toggleClassName,\n    placement: placement,\n    disabled: disabled\n  }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid']), {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 182,\n      columnNumber: 5\n    }\n  }), title);\n  return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {\n    value: dropdownContextValue,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 196,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    open: open,\n    defaultOpen: defaultOpen,\n    menuButtonText: title,\n    renderMenuButton: renderMenuButton,\n    disabled: disabled,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: (_ref, popupRef) => {\n      let {\n        open,\n        ...popupProps\n      } = _ref;\n      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix({}));\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 208,\n          columnNumber: 13\n        }\n      }), children);\n    },\n    onToggleMenu: open => {\n      onToggle === null || onToggle === void 0 || onToggle(open);\n      if (open) {\n        onOpen === null || onOpen === void 0 || onOpen();\n      } else {\n        onClose === null || onClose === void 0 || onClose();\n      }\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 197,\n      columnNumber: 7\n    }\n  }, (_ref2, menuContainerRef) => {\n    let {\n      open,\n      ...menuContainer\n    } = _ref2;\n    const classes = merge(className, withClassPrefix({\n      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,\n      disabled,\n      open,\n      'selected-within': hasSelectedItem\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 239,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\nDropdown.Item = _DropdownItem.default;\nDropdown.Menu = _DropdownMenu.default;\nDropdown.Separator = _DropdownSeparator.default;\nDropdown.displayName = 'Dropdown';\nvar _default = exports[\"default\"] = Dropdown;\n\n//# sourceURL=webpack://rsuite/./src/Dropdown/Dropdown.tsx?");
 
 /***/ }),
 
@@ -2886,7 +2886,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 _FlexboxGridItem = _interopRequireDefault(__webpack_require__(/*! ./FlexboxGridItem */ \"./src/FlexboxGrid/FlexboxGridItem.tsx\"));\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/FlexboxGrid/FlexboxGrid.tsx\";\n/**\n * The FlexboxGrid component is a box that can be used to layout other components.\n * @see https://rsuitejs.com/components/flexbox-grid\n */\nconst FlexboxGrid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('FlexboxGrid', props);\n  const {\n    as: Component = 'div',\n    className,\n    classPrefix = 'flex-box-grid',\n    align = 'top',\n    justify = 'start',\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(align, justify));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 35,\n      columnNumber: 10\n    }\n  }));\n});\nFlexboxGrid.Item = _FlexboxGridItem.default;\nFlexboxGrid.displayName = 'FlexboxGrid';\nvar _default = exports[\"default\"] = FlexboxGrid;\n\n//# sourceURL=webpack://rsuite/./src/FlexboxGrid/FlexboxGrid.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 _FlexboxGridItem = _interopRequireDefault(__webpack_require__(/*! ./FlexboxGridItem */ \"./src/FlexboxGrid/FlexboxGridItem.tsx\"));\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/FlexboxGrid/FlexboxGrid.tsx\";\n/**\n * The FlexboxGrid component is a box that can be used to layout other components.\n * @see https://rsuitejs.com/components/flexbox-grid\n */\nconst FlexboxGrid = /*#__PURE__*/_react.default.forwardRef(function FlexboxGrid(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('FlexboxGrid', props);\n  const {\n    as: Component = 'div',\n    className,\n    classPrefix = 'flex-box-grid',\n    align = 'top',\n    justify = 'start',\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(align, justify));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 38,\n      columnNumber: 10\n    }\n  }));\n});\nFlexboxGrid.Item = _FlexboxGridItem.default;\nFlexboxGrid.displayName = 'FlexboxGrid';\nvar _default = exports[\"default\"] = FlexboxGrid;\n\n//# sourceURL=webpack://rsuite/./src/FlexboxGrid/FlexboxGrid.tsx?");
 
 /***/ }),
 
@@ -2941,7 +2941,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 _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _FormControl = _interopRequireDefault(__webpack_require__(/*! ../FormControl */ \"./src/FormControl/index.tsx\"));\nvar _FormControlLabel = _interopRequireDefault(__webpack_require__(/*! ../FormControlLabel */ \"./src/FormControlLabel/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _FormGroup = _interopRequireDefault(__webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\"));\nvar _FormHelpText = _interopRequireDefault(__webpack_require__(/*! ../FormHelpText */ \"./src/FormHelpText/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _FormContext = __webpack_require__(/*! ./FormContext */ \"./src/Form/FormContext.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _useSchemaModel = _interopRequireDefault(__webpack_require__(/*! ./hooks/useSchemaModel */ \"./src/Form/hooks/useSchemaModel.ts\"));\nvar _useFormValidate = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValidate */ \"./src/Form/hooks/useFormValidate.ts\"));\nvar _useFormValue = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValue */ \"./src/Form/hooks/useFormValue.ts\"));\nvar _useFormClassNames = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormClassNames */ \"./src/Form/hooks/useFormClassNames.ts\"));\nvar _useFormRef = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormRef */ \"./src/Form/hooks/useFormRef.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Form/Form.tsx\";\nconst defaultSchema = (0, _schemaTyped.SchemaModel)({});\n\n/**\n * The `Form` component is a form interface for collecting and validating user input.\n * @see https://rsuitejs.com/components/form\n */\nconst Form = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Form', props);\n  const {\n    checkTrigger = 'change',\n    classPrefix = 'form',\n    errorFromContext = true,\n    formDefaultValue = {},\n    formValue: controlledFormValue,\n    formError: controlledFormError,\n    fluid,\n    nestedField = false,\n    layout = 'vertical',\n    model: formModel = defaultSchema,\n    readOnly,\n    plaintext,\n    className,\n    children,\n    disabled,\n    onSubmit,\n    onReset,\n    onCheck,\n    onError,\n    onChange,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    getCombinedModel,\n    pushFieldRule,\n    removeFieldRule\n  } = (0, _useSchemaModel.default)(formModel, nestedField);\n  const {\n    formValue,\n    onRemoveValue,\n    setFieldValue,\n    resetFormValue\n  } = (0, _useFormValue.default)(controlledFormValue, {\n    formDefaultValue,\n    nestedField\n  });\n  const formValidateProps = {\n    formValue,\n    getCombinedModel,\n    onCheck,\n    onError,\n    nestedField\n  };\n  const {\n    formError,\n    onRemoveError,\n    check,\n    checkAsync,\n    checkForField,\n    checkFieldForNextValue,\n    checkForFieldAsync,\n    checkFieldAsyncForNextValue,\n    cleanErrors,\n    resetErrors,\n    cleanErrorForField\n  } = (0, _useFormValidate.default)(controlledFormError, formValidateProps);\n  const classes = (0, _useFormClassNames.default)({\n    classPrefix,\n    className,\n    fluid,\n    layout,\n    readOnly,\n    plaintext,\n    disabled\n  });\n  const submit = (0, _hooks.useEventCallback)(event => {\n    // Check the form before submitting\n    if (check()) {\n      onSubmit === null || onSubmit === void 0 || onSubmit(formValue, event);\n    }\n  });\n  const reset = (0, _hooks.useEventCallback)(event => {\n    resetErrors();\n    onReset === null || onReset === void 0 || onReset(resetFormValue(), event);\n  });\n  const handleSubmit = (0, _hooks.useEventCallback)(event => {\n    var _event$preventDefault, _event$stopPropagatio;\n    event === null || event === void 0 || (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 || _event$preventDefault.call(event);\n    event === null || event === void 0 || (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);\n\n    // Prevent submission when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    submit(event);\n  });\n  const handleReset = (0, _hooks.useEventCallback)(event => {\n    var _event$preventDefault2, _event$stopPropagatio2;\n    event === null || event === void 0 || (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 || _event$preventDefault2.call(event);\n    event === null || event === void 0 || (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 || _event$stopPropagatio2.call(event);\n\n    // Prevent reset when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    reset(event);\n  });\n  const imperativeMethods = {\n    check,\n    checkForField,\n    checkAsync,\n    checkForFieldAsync,\n    cleanErrors,\n    cleanErrorForField,\n    reset,\n    resetErrors,\n    submit\n  };\n  const formRef = (0, _useFormRef.default)(ref, {\n    imperativeMethods\n  });\n  const removeFieldValue = (0, _hooks.useEventCallback)(name => {\n    const formValue = onRemoveValue(name);\n    onChange === null || onChange === void 0 || onChange(formValue);\n  });\n  const removeFieldError = (0, _hooks.useEventCallback)(name => {\n    onRemoveError(name);\n  });\n  const onFieldChange = (0, _hooks.useEventCallback)((name, value, event) => {\n    const nextFormValue = setFieldValue(name, value);\n    onChange === null || onChange === void 0 || onChange(nextFormValue, event);\n  });\n  const formContextValue = {\n    errorFromContext,\n    checkTrigger,\n    plaintext,\n    readOnly,\n    disabled,\n    formError,\n    nestedField,\n    pushFieldRule,\n    removeFieldValue,\n    removeFieldError,\n    removeFieldRule,\n    onFieldChange,\n    checkFieldForNextValue,\n    checkFieldAsyncForNextValue\n  };\n  return /*#__PURE__*/_react.default.createElement(\"form\", (0, _extends2.default)({}, rest, {\n    ref: formRef,\n    onSubmit: handleSubmit,\n    onReset: handleReset,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 289,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {\n    value: formContextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 290,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueProvider, {\n    value: formValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 291,\n      columnNumber: 9\n    }\n  }, children)));\n});\nForm.Control = _FormControl.default;\nForm.ControlLabel = _FormControlLabel.default;\nForm.ErrorMessage = _FormErrorMessage.default;\nForm.Group = _FormGroup.default;\nForm.HelpText = _FormHelpText.default;\nForm.displayName = 'Form';\nvar _default = exports[\"default\"] = Form;\n\n//# sourceURL=webpack://rsuite/./src/Form/Form.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 _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _FormControl = _interopRequireDefault(__webpack_require__(/*! ../FormControl */ \"./src/FormControl/index.tsx\"));\nvar _FormControlLabel = _interopRequireDefault(__webpack_require__(/*! ../FormControlLabel */ \"./src/FormControlLabel/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _FormGroup = _interopRequireDefault(__webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\"));\nvar _FormHelpText = _interopRequireDefault(__webpack_require__(/*! ../FormHelpText */ \"./src/FormHelpText/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _FormContext = __webpack_require__(/*! ./FormContext */ \"./src/Form/FormContext.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _useSchemaModel = _interopRequireDefault(__webpack_require__(/*! ./hooks/useSchemaModel */ \"./src/Form/hooks/useSchemaModel.ts\"));\nvar _useFormValidate = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValidate */ \"./src/Form/hooks/useFormValidate.ts\"));\nvar _useFormValue = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValue */ \"./src/Form/hooks/useFormValue.ts\"));\nvar _useFormClassNames = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormClassNames */ \"./src/Form/hooks/useFormClassNames.ts\"));\nvar _useFormRef = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormRef */ \"./src/Form/hooks/useFormRef.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Form/Form.tsx\";\nconst defaultSchema = (0, _schemaTyped.SchemaModel)({});\n\n/**\n * The `Form` component is a form interface for collecting and validating user input.\n * @see https://rsuitejs.com/components/form\n */\nconst Form = /*#__PURE__*/_react.default.forwardRef(function Form(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Form', props);\n  const {\n    checkTrigger = 'change',\n    classPrefix = 'form',\n    errorFromContext = true,\n    formDefaultValue = {},\n    formValue: controlledFormValue,\n    formError: controlledFormError,\n    fluid,\n    nestedField = false,\n    layout = 'vertical',\n    model: formModel = defaultSchema,\n    readOnly,\n    plaintext,\n    className,\n    children,\n    disabled,\n    onSubmit,\n    onReset,\n    onCheck,\n    onError,\n    onChange,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    getCombinedModel,\n    pushFieldRule,\n    removeFieldRule\n  } = (0, _useSchemaModel.default)(formModel, nestedField);\n  const {\n    formValue,\n    onRemoveValue,\n    setFieldValue,\n    resetFormValue\n  } = (0, _useFormValue.default)(controlledFormValue, {\n    formDefaultValue,\n    nestedField\n  });\n  const formValidateProps = {\n    formValue,\n    getCombinedModel,\n    onCheck,\n    onError,\n    nestedField\n  };\n  const {\n    formError,\n    onRemoveError,\n    check,\n    checkAsync,\n    checkForField,\n    checkFieldForNextValue,\n    checkForFieldAsync,\n    checkFieldAsyncForNextValue,\n    cleanErrors,\n    resetErrors,\n    cleanErrorForField\n  } = (0, _useFormValidate.default)(controlledFormError, formValidateProps);\n  const classes = (0, _useFormClassNames.default)({\n    classPrefix,\n    className,\n    fluid,\n    layout,\n    readOnly,\n    plaintext,\n    disabled\n  });\n  const submit = (0, _hooks.useEventCallback)(event => {\n    // Check the form before submitting\n    if (check()) {\n      onSubmit === null || onSubmit === void 0 || onSubmit(formValue, event);\n    }\n  });\n  const reset = (0, _hooks.useEventCallback)(event => {\n    resetErrors();\n    onReset === null || onReset === void 0 || onReset(resetFormValue(), event);\n  });\n  const handleSubmit = (0, _hooks.useEventCallback)(event => {\n    var _event$preventDefault, _event$stopPropagatio;\n    event === null || event === void 0 || (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 || _event$preventDefault.call(event);\n    event === null || event === void 0 || (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 || _event$stopPropagatio.call(event);\n\n    // Prevent submission when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    submit(event);\n  });\n  const handleReset = (0, _hooks.useEventCallback)(event => {\n    var _event$preventDefault2, _event$stopPropagatio2;\n    event === null || event === void 0 || (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 || _event$preventDefault2.call(event);\n    event === null || event === void 0 || (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 || _event$stopPropagatio2.call(event);\n\n    // Prevent reset when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    reset(event);\n  });\n  const imperativeMethods = {\n    check,\n    checkForField,\n    checkAsync,\n    checkForFieldAsync,\n    cleanErrors,\n    cleanErrorForField,\n    reset,\n    resetErrors,\n    submit\n  };\n  const formRef = (0, _useFormRef.default)(ref, {\n    imperativeMethods\n  });\n  const removeFieldValue = (0, _hooks.useEventCallback)(name => {\n    const formValue = onRemoveValue(name);\n    onChange === null || onChange === void 0 || onChange(formValue);\n  });\n  const removeFieldError = (0, _hooks.useEventCallback)(name => {\n    onRemoveError(name);\n  });\n  const onFieldChange = (0, _hooks.useEventCallback)((name, value, event) => {\n    const nextFormValue = setFieldValue(name, value);\n    onChange === null || onChange === void 0 || onChange(nextFormValue, event);\n  });\n  const formContextValue = {\n    errorFromContext,\n    checkTrigger,\n    plaintext,\n    readOnly,\n    disabled,\n    formError,\n    nestedField,\n    pushFieldRule,\n    removeFieldValue,\n    removeFieldError,\n    removeFieldRule,\n    onFieldChange,\n    checkFieldForNextValue,\n    checkFieldAsyncForNextValue\n  };\n  return /*#__PURE__*/_react.default.createElement(\"form\", (0, _extends2.default)({}, rest, {\n    ref: formRef,\n    onSubmit: handleSubmit,\n    onReset: handleReset,\n    className: classes,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 292,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {\n    value: formContextValue,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 293,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueProvider, {\n    value: formValue,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 294,\n      columnNumber: 9\n    }\n  }, children)));\n});\nForm.Control = _FormControl.default;\nForm.ControlLabel = _FormControlLabel.default;\nForm.ErrorMessage = _FormErrorMessage.default;\nForm.Group = _FormGroup.default;\nForm.HelpText = _FormHelpText.default;\nForm.displayName = 'Form';\nvar _default = exports[\"default\"] = Form;\n\n//# sourceURL=webpack://rsuite/./src/Form/Form.tsx?");
 
 /***/ }),
 
@@ -3029,7 +3029,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 _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _FormContext = _interopRequireWildcard(__webpack_require__(/*! ../Form/FormContext */ \"./src/Form/FormContext.tsx\"));\nvar _useRegisterModel = _interopRequireDefault(__webpack_require__(/*! ./hooks/useRegisterModel */ \"./src/FormControl/hooks/useRegisterModel.ts\"));\nvar _useField = _interopRequireDefault(__webpack_require__(/*! ./hooks/useField */ \"./src/FormControl/hooks/useField.ts\"));\nvar _Toggle = _interopRequireDefault(__webpack_require__(/*! ../Toggle */ \"./src/Toggle/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _FormGroup = __webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/FormControl/FormControl.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 that FormControl passes to its accepter\n */\n\n/**\n * The `<Form.Control>` component is used to wrap the components that need to be validated.\n * @see https://rsuitejs.com/components/form/\n */\nconst FormControl = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('FormControl', props);\n  const {\n    readOnly: readOnlyContext,\n    plaintext: plaintextContext,\n    disabled: disabledContext,\n    errorFromContext,\n    formError,\n    nestedField,\n    removeFieldValue,\n    removeFieldError,\n    onFieldChange,\n    checkTrigger: contextCheckTrigger,\n    checkFieldForNextValue,\n    checkFieldAsyncForNextValue\n  } = (0, _react.useContext)(_FormContext.default);\n  const {\n    as: Component = 'div',\n    accepter: AccepterComponent = _Input.default,\n    classPrefix = 'form-control',\n    checkAsync,\n    checkTrigger,\n    errorPlacement = 'bottomStart',\n    errorMessage,\n    name,\n    value,\n    readOnly = readOnlyContext,\n    plaintext = plaintextContext,\n    disabled = disabledContext,\n    onChange,\n    onBlur,\n    defaultValue,\n    shouldResetWithUnmount = false,\n    rule,\n    id,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    controlId,\n    helpTextId,\n    labelId,\n    errorMessageId\n  } = (0, _FormGroup.useFormGroup)(id);\n  if (!onFieldChange) {\n    throw new Error(`\n      <FormControl> must be inside a component decorated with <Form>.\n      And need to update React to 16.6.0 +.\n    `);\n  }\n  (0, _useRegisterModel.default)(name, rule);\n  (0, _hooks.useWillUnmount)(() => {\n    if (shouldResetWithUnmount) {\n      removeFieldValue === null || removeFieldValue === void 0 || removeFieldValue(name);\n      removeFieldError === null || removeFieldError === void 0 || removeFieldError(name);\n    }\n  });\n  const trigger = checkTrigger || contextCheckTrigger;\n  const formValue = (0, _react.useContext)(_FormContext.FormValueContext);\n  const {\n    fieldValue,\n    fieldError,\n    setFieldValue\n  } = (0, _useField.default)({\n    name,\n    errorMessage,\n    formValue,\n    formError,\n    value,\n    nestedField,\n    errorFromContext\n  });\n  const {\n    withClassPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = withClassPrefix('wrapper');\n  const handleFieldChange = (0, _hooks.useEventCallback)((value, event) => {\n    if (trigger === 'change') {\n      handleFieldCheck(value);\n    }\n    onFieldChange === null || onFieldChange === void 0 || onFieldChange(name, value, event);\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleFieldBlur = (0, _hooks.useEventCallback)(event => {\n    if (trigger === 'blur') {\n      handleFieldCheck(fieldValue);\n    }\n    onBlur === null || onBlur === void 0 || onBlur(event);\n  });\n  const handleFieldCheck = (0, _hooks.useEventCallback)(value => {\n    const nextFormValue = setFieldValue(name, value);\n    if (checkAsync) {\n      checkFieldAsyncForNextValue(name, nextFormValue);\n    } else {\n      checkFieldForNextValue(name, nextFormValue);\n    }\n  });\n  const fieldHasError = Boolean(fieldError);\n\n  // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.\n  const valueKey = AccepterComponent === _Toggle.default ? 'checked' : 'value';\n  const accepterProps = {\n    // need to distinguish between undefined and null\n    [valueKey]: fieldValue === undefined ? defaultValue : fieldValue\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    ref: ref,\n    \"data-testid\": \"form-control-wrapper\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 191,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends2.default)({\n    id: controlId,\n    \"aria-labelledby\": labelId,\n    \"aria-describedby\": helpTextId,\n    \"aria-invalid\": fieldHasError || undefined,\n    \"aria-errormessage\": fieldHasError ? errorMessageId : undefined\n  }, accepterProps, rest, {\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled,\n    name: name,\n    onChange: handleFieldChange,\n    onBlur: handleFieldBlur,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 192,\n      columnNumber: 7\n    }\n  })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {\n    id: errorMessageId,\n    role: \"alert\",\n    \"aria-relevant\": \"all\",\n    show: fieldHasError,\n    className: prefix`message-wrapper`,\n    placement: errorPlacement,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 208,\n      columnNumber: 7\n    }\n  }, fieldError));\n});\nFormControl.displayName = 'FormControl';\nvar _default = exports[\"default\"] = FormControl;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/FormControl.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 _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _FormContext = _interopRequireWildcard(__webpack_require__(/*! ../Form/FormContext */ \"./src/Form/FormContext.tsx\"));\nvar _useRegisterModel = _interopRequireDefault(__webpack_require__(/*! ./hooks/useRegisterModel */ \"./src/FormControl/hooks/useRegisterModel.ts\"));\nvar _useField = _interopRequireDefault(__webpack_require__(/*! ./hooks/useField */ \"./src/FormControl/hooks/useField.ts\"));\nvar _Toggle = _interopRequireDefault(__webpack_require__(/*! ../Toggle */ \"./src/Toggle/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _FormGroup = __webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/FormControl/FormControl.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 that FormControl passes to its accepter\n */\n\n/**\n * The `<Form.Control>` component is used to wrap the components that need to be validated.\n * @see https://rsuitejs.com/components/form/\n */\nconst FormControl = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('FormControl', props);\n  const {\n    readOnly: readOnlyContext,\n    plaintext: plaintextContext,\n    disabled: disabledContext,\n    errorFromContext,\n    formError,\n    nestedField,\n    removeFieldValue,\n    removeFieldError,\n    onFieldChange,\n    checkTrigger: contextCheckTrigger,\n    checkFieldForNextValue,\n    checkFieldAsyncForNextValue\n  } = (0, _react.useContext)(_FormContext.default);\n  const {\n    as: Component = 'div',\n    accepter: AccepterComponent = _Input.default,\n    classPrefix = 'form-control',\n    checkAsync,\n    checkTrigger,\n    errorPlacement = 'bottomStart',\n    errorMessage,\n    name,\n    value,\n    readOnly = readOnlyContext,\n    plaintext = plaintextContext,\n    disabled = disabledContext,\n    onChange,\n    onBlur,\n    defaultValue,\n    shouldResetWithUnmount = false,\n    rule,\n    id,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    controlId,\n    helpTextId,\n    labelId,\n    errorMessageId\n  } = (0, _FormGroup.useFormGroup)(id);\n  if (!onFieldChange) {\n    throw new Error(`\n      <FormControl> must be inside a component decorated with <Form>.\n      And need to update React to 16.6.0 +.\n    `);\n  }\n  (0, _useRegisterModel.default)(name, rule);\n  (0, _hooks.useWillUnmount)(() => {\n    if (shouldResetWithUnmount) {\n      removeFieldValue === null || removeFieldValue === void 0 || removeFieldValue(name);\n      removeFieldError === null || removeFieldError === void 0 || removeFieldError(name);\n    }\n  });\n  const trigger = checkTrigger || contextCheckTrigger;\n  const formValue = (0, _react.useContext)(_FormContext.FormValueContext);\n  const {\n    fieldValue,\n    fieldError,\n    setFieldValue\n  } = (0, _useField.default)({\n    name,\n    errorMessage,\n    formValue,\n    formError,\n    value,\n    nestedField,\n    errorFromContext\n  });\n  const {\n    withClassPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = withClassPrefix('wrapper');\n  const handleFieldChange = (0, _hooks.useEventCallback)((value, event) => {\n    if (trigger === 'change') {\n      handleFieldCheck(value);\n    }\n    onFieldChange === null || onFieldChange === void 0 || onFieldChange(name, value, event);\n    onChange === null || onChange === void 0 || onChange(value, event);\n  });\n  const handleFieldBlur = (0, _hooks.useEventCallback)(event => {\n    if (trigger === 'blur') {\n      handleFieldCheck(fieldValue);\n    }\n    onBlur === null || onBlur === void 0 || onBlur(event);\n  });\n  const handleFieldCheck = (0, _hooks.useEventCallback)(value => {\n    const nextFormValue = setFieldValue(name, value);\n    if (checkAsync) {\n      checkFieldAsyncForNextValue(name, nextFormValue);\n    } else {\n      checkFieldForNextValue(name, nextFormValue);\n    }\n  });\n  const fieldHasError = Boolean(fieldError);\n\n  // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.\n  const valueKey = AccepterComponent === _Toggle.default ? 'checked' : 'value';\n  const accepterProps = {\n    // need to distinguish between undefined and null\n    [valueKey]: fieldValue === undefined ? defaultValue : fieldValue\n  };\n  return /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    ref: ref,\n    \"data-testid\": \"form-control-wrapper\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 196,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends2.default)({\n    id: controlId,\n    \"aria-labelledby\": labelId,\n    \"aria-describedby\": helpTextId,\n    \"aria-invalid\": fieldHasError || undefined,\n    \"aria-errormessage\": fieldHasError ? errorMessageId : undefined\n  }, accepterProps, rest, {\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled,\n    name: name,\n    onChange: handleFieldChange,\n    onBlur: handleFieldBlur,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 197,\n      columnNumber: 7\n    }\n  })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {\n    id: errorMessageId,\n    role: \"alert\",\n    \"aria-relevant\": \"all\",\n    show: fieldHasError,\n    className: prefix`message-wrapper`,\n    placement: errorPlacement,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 213,\n      columnNumber: 7\n    }\n  }, fieldError));\n});\nFormControl.displayName = 'FormControl';\nvar _default = exports[\"default\"] = FormControl;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/FormControl.tsx?");
 
 /***/ }),
 
@@ -3359,7 +3359,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 _Check = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Check */ \"./node_modules/@rsuite/icons/esm/react/Check.js\"));\nvar _Close = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Close */ \"./node_modules/@rsuite/icons/esm/react/Close.js\"));\nvar _IconButton = _interopRequireDefault(__webpack_require__(/*! ../IconButton */ \"./src/IconButton/index.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/InlineEdit/EditableControls.tsx\";\nconst EditableControls = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    onSave,\n    onCancel,\n    ...rest\n  } = props;\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    ref: ref,\n    spacing: 6\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 15,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {\n    size: \"sm\",\n    icon: /*#__PURE__*/_react.default.createElement(_Check.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 16,\n        columnNumber: 35\n      }\n    }),\n    \"aria-label\": \"Save\",\n    onClick: onSave,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 16,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {\n    size: \"sm\",\n    icon: /*#__PURE__*/_react.default.createElement(_Close.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 17,\n        columnNumber: 35\n      }\n    }),\n    \"aria-label\": \"Cancel\",\n    onClick: onCancel,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 17,\n      columnNumber: 7\n    }\n  }));\n});\nvar _default = exports[\"default\"] = EditableControls;\n\n//# sourceURL=webpack://rsuite/./src/InlineEdit/EditableControls.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 _Check = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Check */ \"./node_modules/@rsuite/icons/esm/react/Check.js\"));\nvar _Close = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Close */ \"./node_modules/@rsuite/icons/esm/react/Close.js\"));\nvar _IconButton = _interopRequireDefault(__webpack_require__(/*! ../IconButton */ \"./src/IconButton/index.tsx\"));\nvar _Stack = _interopRequireDefault(__webpack_require__(/*! ../Stack */ \"./src/Stack/index.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/InlineEdit/EditableControls.tsx\";\nconst EditableControls = /*#__PURE__*/_react.default.forwardRef(function EditableControls(props, ref) {\n  const {\n    onSave,\n    onCancel,\n    ...rest\n  } = props;\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    ref: ref,\n    spacing: 6\n  }, rest, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 16,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {\n    size: \"sm\",\n    icon: /*#__PURE__*/_react.default.createElement(_Check.default, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 17,\n        columnNumber: 37\n      }\n    }),\n    \"aria-label\": \"Save\",\n    onClick: onSave,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 17,\n      columnNumber: 9\n    }\n  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {\n    size: \"sm\",\n    icon: /*#__PURE__*/_react.default.createElement(_Close.default, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 18,\n        columnNumber: 37\n      }\n    }),\n    \"aria-label\": \"Cancel\",\n    onClick: onCancel,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 18,\n      columnNumber: 9\n    }\n  }));\n});\nvar _default = exports[\"default\"] = EditableControls;\n\n//# sourceURL=webpack://rsuite/./src/InlineEdit/EditableControls.tsx?");
 
 /***/ }),
 
@@ -3447,7 +3447,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\"] = exports.InputGroupContext = 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 _InputGroupAddon = _interopRequireDefault(__webpack_require__(/*! ./InputGroupAddon */ \"./src/InputGroup/InputGroupAddon.tsx\"));\nvar _InputGroupButton = _interopRequireDefault(__webpack_require__(/*! ./InputGroupButton */ \"./src/InputGroup/InputGroupButton.tsx\"));\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/InputGroup/InputGroup.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 InputGroupContext = exports.InputGroupContext = /*#__PURE__*/_react.default.createContext(null);\n/**\n * The `InputGroup` component is used to specify an input field with an add-on.\n * @see https://rsuitejs.com/components/input/#input-group\n */\nconst InputGroup = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('InputGroup', props);\n  const {\n    as: Component = 'div',\n    classPrefix = 'input-group',\n    className,\n    disabled,\n    inside,\n    size,\n    children,\n    ...rest\n  } = propsWithDefaults;\n  const [focus, setFocus] = (0, _react.useState)(false);\n  const handleFocus = (0, _react.useCallback)(() => {\n    setFocus(true);\n  }, []);\n  const handleBlur = (0, _react.useCallback)(() => {\n    setFocus(false);\n  }, []);\n  const {\n    withClassPrefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(size, {\n    inside,\n    focus,\n    disabled\n  }));\n  const renderChildren = (0, _react.useCallback)(() => {\n    return _react.default.Children.map(children, item => {\n      if (/*#__PURE__*/_react.default.isValidElement(item)) {\n        if (/*#__PURE__*/_react.default.isValidElement(item)) {\n          // Fix: Add type assertion to pass the disabled prop to the child element\n          return disabled ? /*#__PURE__*/_react.default.cloneElement(item, {\n            disabled\n          }) : item;\n        }\n      }\n      return item;\n    });\n  }, [children, disabled]);\n  const contextValue = (0, _react.useMemo)(() => ({\n    onFocus: handleFocus,\n    onBlur: handleBlur\n  }), [handleFocus, handleBlur]);\n  return /*#__PURE__*/_react.default.createElement(InputGroupContext.Provider, {\n    value: contextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 79,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 80,\n      columnNumber: 7\n    }\n  }), renderChildren()));\n});\nInputGroup.displayName = 'InputGroup';\nInputGroup.Addon = _InputGroupAddon.default;\nInputGroup.Button = _InputGroupButton.default;\nvar _default = exports[\"default\"] = InputGroup;\n\n//# sourceURL=webpack://rsuite/./src/InputGroup/InputGroup.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.InputGroupContext = 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 _InputGroupAddon = _interopRequireDefault(__webpack_require__(/*! ./InputGroupAddon */ \"./src/InputGroup/InputGroupAddon.tsx\"));\nvar _InputGroupButton = _interopRequireDefault(__webpack_require__(/*! ./InputGroupButton */ \"./src/InputGroup/InputGroupButton.tsx\"));\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/InputGroup/InputGroup.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 InputGroupContext = exports.InputGroupContext = /*#__PURE__*/_react.default.createContext(null);\n/**\n * The `InputGroup` component is used to specify an input field with an add-on.\n * @see https://rsuitejs.com/components/input/#input-group\n */\nconst InputGroup = /*#__PURE__*/_react.default.forwardRef(function InputGroup(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('InputGroup', props);\n  const {\n    as: Component = 'div',\n    classPrefix = 'input-group',\n    className,\n    disabled,\n    inside,\n    size,\n    children,\n    ...rest\n  } = propsWithDefaults;\n  const [focus, setFocus] = (0, _react.useState)(false);\n  const handleFocus = (0, _react.useCallback)(() => {\n    setFocus(true);\n  }, []);\n  const handleBlur = (0, _react.useCallback)(() => {\n    setFocus(false);\n  }, []);\n  const {\n    withClassPrefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(size, {\n    inside,\n    focus,\n    disabled\n  }));\n  const renderChildren = (0, _react.useCallback)(() => {\n    return _react.default.Children.map(children, item => {\n      if (/*#__PURE__*/_react.default.isValidElement(item)) {\n        if (/*#__PURE__*/_react.default.isValidElement(item)) {\n          // Fix: Add type assertion to pass the disabled prop to the child element\n          return disabled ? /*#__PURE__*/_react.default.cloneElement(item, {\n            disabled\n          }) : item;\n        }\n      }\n      return item;\n    });\n  }, [children, disabled]);\n  const contextValue = (0, _react.useMemo)(() => ({\n    onFocus: handleFocus,\n    onBlur: handleBlur\n  }), [handleFocus, handleBlur]);\n  return /*#__PURE__*/_react.default.createElement(InputGroupContext.Provider, {\n    value: contextValue,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 82,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 83,\n      columnNumber: 7\n    }\n  }), renderChildren()));\n});\nInputGroup.displayName = 'InputGroup';\nInputGroup.Addon = _InputGroupAddon.default;\nInputGroup.Button = _InputGroupButton.default;\nvar _default = exports[\"default\"] = InputGroup;\n\n//# sourceURL=webpack://rsuite/./src/InputGroup/InputGroup.tsx?");
 
 /***/ }),
 
@@ -3491,7 +3491,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 _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _ArrowUpLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowUpLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowUpLine.js\"));\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowDownLine.js\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup/InputGroup */ \"./src/InputGroup/InputGroup.tsx\"));\nvar _InputGroupAddon = _interopRequireDefault(__webpack_require__(/*! ../InputGroup/InputGroupAddon */ \"./src/InputGroup/InputGroupAddon.tsx\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/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/InputNumber/InputNumber.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 * Check if the value is a number.\n * @param value\n */\nconst isNumber = value => /(^-?|^\\+?|^\\d?)\\d*\\.\\d+$/.test(value + '');\n\n/**\n * Get the length of the decimal.\n * @param value\n */\nfunction getDecimalLength(value) {\n  if (isNumber(value)) {\n    return value.toString().split('.')[1].length;\n  }\n  return 0;\n}\n\n/**\n * Get the value after the decimal point.\n * @param values\n */\nfunction decimals() {\n  for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {\n    values[_key] = arguments[_key];\n  }\n  const lengths = values.map(getDecimalLength);\n  return Math.max(...lengths);\n}\n\n/**\n * Disable the upper limit of the number.\n * @param value\n * @param max\n */\nfunction valueReachesMax(value, max) {\n  if (!(0, _isNil.default)(value)) {\n    return +value >= max;\n  }\n  return false;\n}\n\n/**\n * Disable the lower limit of the number.\n * @param value\n * @param min\n */\nfunction valueReachesMin(value, min) {\n  if (!(0, _isNil.default)(value)) {\n    return +value <= min;\n  }\n  return false;\n}\n\n/**\n * The `InputNumber` component is used to enter a numerical value.\n * @see https://rsuitejs.com/components/input-number\n */\nconst InputNumber = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('InputNumber', props);\n  const {\n    as: Component = _InputGroup.default,\n    className,\n    classPrefix = 'input-number',\n    disabled,\n    decimalSeparator,\n    formatter,\n    readOnly,\n    plaintext,\n    value: valueProp,\n    defaultValue,\n    size,\n    prefix: prefixElement,\n    postfix,\n    step = 1,\n    buttonAppearance = 'subtle',\n    min: minProp,\n    max: maxProp,\n    scrollable = true,\n    onChange,\n    onWheel,\n    onBlur,\n    onFocus,\n    ...restProps\n  } = propsWithDefaults;\n  const min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;\n  const max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n  const [isFocused, setIsFocused] = (0, _react.useState)(false);\n  const {\n    withClassPrefix,\n    merge,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix());\n  const [htmlInputProps, rest] = (0, _utils.partitionHTMLProps)(restProps);\n  const inputRef = (0, _react.useRef)();\n  const getSafeValue = value => {\n    if (!Number.isNaN(value)) {\n      if (+value > max) {\n        value = max;\n      }\n      if (+value < min) {\n        value = min;\n      }\n    } else {\n      value = '';\n    }\n    return value.toString();\n  };\n  const handleChangeValue = (0, _hooks.useEventCallback)((currentValue, event) => {\n    if (currentValue !== value) {\n      setValue(currentValue);\n      onChange === null || onChange === void 0 || onChange(currentValue, event);\n    }\n  });\n\n  // Increment value by step\n  const handleStepUp = (0, _hooks.useEventCallback)(event => {\n    const val = +(value || 0);\n    const bit = decimals(val, step);\n    handleChangeValue(getSafeValue((val + step).toFixed(bit)), event);\n  });\n\n  // Decrement value by step\n  const handleStepDown = (0, _hooks.useEventCallback)(event => {\n    const val = +(value || 0);\n    const bit = decimals(val, step);\n    handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);\n  });\n\n  // Disables step up/down button when\n  // - InputNumber is disabled/readonly\n  // - value reaches max/min limits\n  const stepUpDisabled = disabled || readOnly || valueReachesMax(value, max);\n  const stepDownDisabled = disabled || readOnly || valueReachesMin(value, min);\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    switch (event.key) {\n      case _constants.KEY_VALUES.UP:\n        event.preventDefault();\n        handleStepUp(event);\n        break;\n      case _constants.KEY_VALUES.DOWN:\n        event.preventDefault();\n        handleStepDown(event);\n        break;\n      case _constants.KEY_VALUES.HOME:\n        if (typeof minProp !== 'undefined') {\n          event.preventDefault();\n          handleChangeValue(getSafeValue(minProp), event);\n        }\n        break;\n      case _constants.KEY_VALUES.END:\n        if (typeof maxProp !== 'undefined') {\n          event.preventDefault();\n          handleChangeValue(getSafeValue(maxProp), event);\n        }\n        break;\n    }\n  });\n  const handleWheel = (0, _hooks.useEventCallback)(event => {\n    if (!scrollable) {\n      event.preventDefault();\n      return;\n    }\n    if (!disabled && !readOnly && event.target === document.activeElement) {\n      event.preventDefault();\n      const delta = event['wheelDelta'] || -event.deltaY || -(event === null || event === void 0 ? void 0 : event.detail);\n      if (delta > 0) {\n        handleStepDown(event);\n      }\n      if (delta < 0) {\n        handleStepUp(event);\n      }\n    }\n    onWheel === null || onWheel === void 0 || onWheel(event);\n  });\n  const handleChange = (0, _hooks.useEventCallback)((value, event) => {\n    const separator = decimalSeparator || '.';\n    const escapedSeparator = separator.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n    const regex = new RegExp(`^-?(?:\\\\d+)?(${escapedSeparator})?\\\\d*$`);\n    if (!regex.test(value) && value !== '') {\n      return;\n    }\n    handleChangeValue(value, event);\n  });\n  const replaceDecimalSeparator = (0, _react.useCallback)(value => {\n    if (decimalSeparator && value) {\n      return value.toString().replace('.', decimalSeparator);\n    }\n    return value;\n  }, [decimalSeparator]);\n  const restoreDecimalSeparator = (0, _react.useCallback)(value => {\n    if (decimalSeparator && value) {\n      return value.replace(decimalSeparator, '.');\n    }\n    return value;\n  }, [decimalSeparator]);\n  const handleBlur = (0, _hooks.useEventCallback)(event => {\n    var _event$target;\n    const value = restoreDecimalSeparator((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);\n    const targetValue = Number.parseFloat(value);\n    handleChangeValue(getSafeValue(targetValue), event);\n    setIsFocused(false);\n  });\n  (0, _react.useEffect)(() => {\n    let wheelListener;\n    if (inputRef.current) {\n      wheelListener = (0, _on.default)(inputRef.current, 'wheel', handleWheel, {\n        passive: false\n      });\n    }\n    return () => {\n      var _wheelListener;\n      (_wheelListener = wheelListener) === null || _wheelListener === void 0 || _wheelListener.off();\n    };\n  }, [handleWheel, scrollable]);\n  const inputValue = (0, _react.useMemo)(() => {\n    if ((0, _isNil.default)(value)) {\n      return '';\n    }\n    if (isFocused) {\n      return replaceDecimalSeparator(value);\n    }\n    if (formatter) {\n      return formatter(value);\n    }\n    return replaceDecimalSeparator(value);\n  }, [formatter, isFocused, replaceDecimalSeparator, value]);\n  const input = /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {\n    ref: plaintext ? ref : undefined,\n    inputRef: inputRef,\n    autoComplete: \"off\",\n    inputMode: \"numeric\",\n    step: step,\n    value: inputValue,\n    disabled: disabled,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    onKeyDown: handleKeyDown,\n    onChange: handleChange,\n    onBlur: (0, _utils.createChainedFunction)(handleBlur, onBlur),\n    onFocus: (0, _utils.createChainedFunction)(() => setIsFocused(true), onFocus),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 347,\n      columnNumber: 5\n    }\n  }));\n  if (plaintext) {\n    return input;\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    disabled: disabled,\n    size: size,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 370,\n      columnNumber: 5\n    }\n  }), prefixElement && /*#__PURE__*/_react.default.createElement(_InputGroupAddon.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 371,\n      columnNumber: 25\n    }\n  }, prefixElement), input, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('btn-group-vertical'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 373,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Button.default, {\n    tabIndex: -1,\n    appearance: buttonAppearance,\n    className: prefix('touchspin-up'),\n    onClick: handleStepUp,\n    disabled: stepUpDisabled,\n    \"aria-label\": \"Increment\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 374,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_ArrowUpLine.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 382,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Button.default, {\n    tabIndex: -1,\n    appearance: buttonAppearance,\n    className: prefix('touchspin-down'),\n    onClick: handleStepDown,\n    disabled: stepDownDisabled,\n    \"aria-label\": \"Decrement\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 384,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 392,\n      columnNumber: 11\n    }\n  }))), postfix && /*#__PURE__*/_react.default.createElement(_InputGroupAddon.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 395,\n      columnNumber: 19\n    }\n  }, postfix));\n});\nInputNumber.displayName = 'InputNumber';\nvar _default = exports[\"default\"] = InputNumber;\n\n//# sourceURL=webpack://rsuite/./src/InputNumber/InputNumber.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 _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _ArrowUpLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowUpLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowUpLine.js\"));\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowDownLine.js\"));\nvar _InputGroup = _interopRequireDefault(__webpack_require__(/*! ../InputGroup/InputGroup */ \"./src/InputGroup/InputGroup.tsx\"));\nvar _InputGroupAddon = _interopRequireDefault(__webpack_require__(/*! ../InputGroup/InputGroupAddon */ \"./src/InputGroup/InputGroupAddon.tsx\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/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/InputNumber/InputNumber.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 * Check if the value is a number.\n * @param value\n */\nconst isNumber = value => /(^-?|^\\+?|^\\d?)\\d*\\.\\d+$/.test(value + '');\n\n/**\n * Get the length of the decimal.\n * @param value\n */\nfunction getDecimalLength(value) {\n  if (isNumber(value)) {\n    return value.toString().split('.')[1].length;\n  }\n  return 0;\n}\n\n/**\n * Get the value after the decimal point.\n * @param values\n */\nfunction decimals() {\n  for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {\n    values[_key] = arguments[_key];\n  }\n  const lengths = values.map(getDecimalLength);\n  return Math.max(...lengths);\n}\n\n/**\n * Disable the upper limit of the number.\n * @param value\n * @param max\n */\nfunction valueReachesMax(value, max) {\n  if (!(0, _isNil.default)(value)) {\n    return +value >= max;\n  }\n  return false;\n}\n\n/**\n * Disable the lower limit of the number.\n * @param value\n * @param min\n */\nfunction valueReachesMin(value, min) {\n  if (!(0, _isNil.default)(value)) {\n    return +value <= min;\n  }\n  return false;\n}\n\n/**\n * The `InputNumber` component is used to enter a numerical value.\n * @see https://rsuitejs.com/components/input-number\n */\nconst InputNumber = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('InputNumber', props);\n  const {\n    as: Component = _InputGroup.default,\n    className,\n    classPrefix = 'input-number',\n    disabled,\n    decimalSeparator,\n    formatter,\n    readOnly,\n    plaintext,\n    value: valueProp,\n    defaultValue,\n    size,\n    prefix: prefixElement,\n    postfix,\n    step = 1,\n    buttonAppearance = 'subtle',\n    min: minProp,\n    max: maxProp,\n    scrollable = true,\n    onChange,\n    onWheel,\n    onBlur,\n    onFocus,\n    ...restProps\n  } = propsWithDefaults;\n  const min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;\n  const max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n  const [isFocused, setIsFocused] = (0, _react.useState)(false);\n  const {\n    withClassPrefix,\n    merge,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix());\n  const [htmlInputProps, rest] = (0, _utils.partitionHTMLProps)(restProps);\n  const inputRef = (0, _react.useRef)();\n  const getSafeValue = value => {\n    if (!Number.isNaN(value)) {\n      if (+value > max) {\n        value = max;\n      }\n      if (+value < min) {\n        value = min;\n      }\n    } else {\n      value = '';\n    }\n    return value.toString();\n  };\n  const handleChangeValue = (0, _hooks.useEventCallback)((currentValue, event) => {\n    if (currentValue !== value) {\n      setValue(currentValue);\n      onChange === null || onChange === void 0 || onChange(currentValue, event);\n    }\n  });\n\n  // Increment value by step\n  const handleStepUp = (0, _hooks.useEventCallback)(event => {\n    const val = +(value || 0);\n    const bit = decimals(val, step);\n    handleChangeValue(getSafeValue((val + step).toFixed(bit)), event);\n  });\n\n  // Decrement value by step\n  const handleStepDown = (0, _hooks.useEventCallback)(event => {\n    const val = +(value || 0);\n    const bit = decimals(val, step);\n    handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);\n  });\n\n  // Disables step up/down button when\n  // - InputNumber is disabled/readonly\n  // - value reaches max/min limits\n  const stepUpDisabled = disabled || readOnly || valueReachesMax(value, max);\n  const stepDownDisabled = disabled || readOnly || valueReachesMin(value, min);\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    switch (event.key) {\n      case _constants.KEY_VALUES.UP:\n        event.preventDefault();\n        handleStepUp(event);\n        break;\n      case _constants.KEY_VALUES.DOWN:\n        event.preventDefault();\n        handleStepDown(event);\n        break;\n      case _constants.KEY_VALUES.HOME:\n        if (typeof minProp !== 'undefined') {\n          event.preventDefault();\n          handleChangeValue(getSafeValue(minProp), event);\n        }\n        break;\n      case _constants.KEY_VALUES.END:\n        if (typeof maxProp !== 'undefined') {\n          event.preventDefault();\n          handleChangeValue(getSafeValue(maxProp), event);\n        }\n        break;\n    }\n  });\n  const handleWheel = (0, _hooks.useEventCallback)(event => {\n    if (!scrollable) {\n      event.preventDefault();\n      return;\n    }\n    if (!disabled && !readOnly && event.target === document.activeElement) {\n      event.preventDefault();\n      const delta = event['wheelDelta'] || -event.deltaY || -(event === null || event === void 0 ? void 0 : event.detail);\n      if (delta > 0) {\n        handleStepDown(event);\n      }\n      if (delta < 0) {\n        handleStepUp(event);\n      }\n    }\n    onWheel === null || onWheel === void 0 || onWheel(event);\n  });\n  const handleChange = (0, _hooks.useEventCallback)((value, event) => {\n    const separator = decimalSeparator || '.';\n    const escapedSeparator = separator.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n    const regex = new RegExp(`^-?(?:\\\\d+)?(${escapedSeparator})?\\\\d*$`);\n    if (!regex.test(value) && value !== '') {\n      return;\n    }\n    handleChangeValue(value, event);\n  });\n  const replaceDecimalSeparator = (0, _react.useCallback)(value => {\n    if (decimalSeparator && value) {\n      return value.toString().replace('.', decimalSeparator);\n    }\n    return value;\n  }, [decimalSeparator]);\n  const restoreDecimalSeparator = (0, _react.useCallback)(value => {\n    if (decimalSeparator && value) {\n      return value.replace(decimalSeparator, '.');\n    }\n    return value;\n  }, [decimalSeparator]);\n  const handleBlur = (0, _hooks.useEventCallback)(event => {\n    var _event$target;\n    const value = restoreDecimalSeparator((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);\n    const targetValue = Number.parseFloat(value);\n    handleChangeValue(getSafeValue(targetValue), event);\n    setIsFocused(false);\n  });\n  (0, _react.useEffect)(() => {\n    let wheelListener;\n    if (inputRef.current) {\n      wheelListener = (0, _on.default)(inputRef.current, 'wheel', handleWheel, {\n        passive: false\n      });\n    }\n    return () => {\n      var _wheelListener;\n      (_wheelListener = wheelListener) === null || _wheelListener === void 0 || _wheelListener.off();\n    };\n  }, [handleWheel, scrollable]);\n  const inputValue = (0, _react.useMemo)(() => {\n    if ((0, _isNil.default)(value)) {\n      return '';\n    }\n    if (isFocused) {\n      return replaceDecimalSeparator(value);\n    }\n    if (formatter) {\n      return formatter(value);\n    }\n    return replaceDecimalSeparator(value);\n  }, [formatter, isFocused, replaceDecimalSeparator, value]);\n  const input = /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {\n    ref: plaintext ? ref : undefined,\n    inputRef: inputRef,\n    autoComplete: \"off\",\n    inputMode: \"numeric\",\n    step: step,\n    value: inputValue,\n    disabled: disabled,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    onKeyDown: handleKeyDown,\n    onChange: handleChange,\n    onBlur: (0, _utils.createChainedFunction)(handleBlur, onBlur),\n    onFocus: (0, _utils.createChainedFunction)(() => setIsFocused(true), onFocus),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 347,\n      columnNumber: 5\n    }\n  }));\n  if (plaintext) {\n    return input;\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    disabled: disabled,\n    size: size,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 370,\n      columnNumber: 5\n    }\n  }), prefixElement && /*#__PURE__*/_react.default.createElement(_InputGroupAddon.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 371,\n      columnNumber: 25\n    }\n  }, prefixElement), input, /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix('btn-group-vertical'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 373,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Button.default, {\n    tabIndex: -1,\n    appearance: buttonAppearance,\n    className: prefix('touchspin-up'),\n    onClick: handleStepUp,\n    disabled: stepUpDisabled,\n    \"aria-label\": \"Increment\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 374,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_ArrowUpLine.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 382,\n      columnNumber: 11\n    }\n  })), /*#__PURE__*/_react.default.createElement(_Button.default, {\n    tabIndex: -1,\n    appearance: buttonAppearance,\n    className: prefix('touchspin-down'),\n    onClick: handleStepDown,\n    disabled: stepDownDisabled,\n    \"aria-label\": \"Decrement\",\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 384,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 392,\n      columnNumber: 11\n    }\n  }))), postfix && /*#__PURE__*/_react.default.createElement(_InputGroupAddon.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 395,\n      columnNumber: 19\n    }\n  }, postfix));\n});\nInputNumber.displayName = 'InputNumber';\nvar _default = exports[\"default\"] = InputNumber;\n\n//# sourceURL=webpack://rsuite/./src/InputNumber/InputNumber.tsx?");
 
 /***/ }),
 
@@ -3524,7 +3524,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 _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\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 _InputPickerContext = __webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _utils3 = __webpack_require__(/*! ./utils */ \"./src/InputPicker/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('InputPicker', props);\n  const {\n    as: Component = 'div',\n    appearance = 'default',\n    cleanable = true,\n    cacheData = [],\n    classPrefix = 'picker',\n    data: controlledData = [],\n    disabled,\n    readOnly,\n    plaintext,\n    defaultValue,\n    defaultOpen = false,\n    disabledItemValues = [],\n    locale,\n    toggleAs,\n    style,\n    size,\n    searchable = true,\n    open: controlledOpen,\n    placeholder,\n    placement = 'bottomStart',\n    groupBy,\n    menuClassName,\n    menuStyle,\n    menuAutoWidth = true,\n    menuMaxHeight = 320,\n    creatable,\n    shouldDisplayCreateOption,\n    value: valueProp,\n    valueKey = 'value',\n    virtualized,\n    labelKey = 'label',\n    listProps,\n    id,\n    tabIndex,\n    sort,\n    renderMenu,\n    renderExtraFooter,\n    renderValue,\n    renderMenuItem,\n    renderMenuGroup,\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.useClassNames)(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    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchKeyword, value]);\n  const getDataItem = value => {\n    // Find active `MenuItem` by `value`\n    const activeItem = dataWithCache.find(item => (0, _utils.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, _utils.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, _utils.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, _utils.shallowEqual)(v, newItemValue))) {\n      val.push(newItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, itemVal => (0, _utils.shallowEqual)(itemVal, newItemValue));\n    }\n    let focusItem = data.find(item => (0, _utils.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, _utils.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 || 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, _utils.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, _utils.isOneOf)('Comma', trigger) && event.key === _constants.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils.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    ...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: 498,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;\n    return renderMenuItem ? renderMenuItem(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, _utils3.convertSize)(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 543,\n          columnNumber: 13\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      left,\n      top,\n      className\n    } = positionProps;\n    const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    const classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    const styles = {\n      ...menuStyle,\n      left,\n      top\n    };\n    let items = (0, _utils2.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, _utils.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, _utils.mergeRefs)(overlay, speakerRef),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 590,\n          columnNumber: 16\n        }\n      });\n    }\n    const menu = 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: menuMaxHeight,\n      data: items,\n      query: searchKeyword,\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderListItem,\n      virtualized: virtualized,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 594,\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: 616,\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: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 620,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, 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 && !rest.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      plaintextProps.childrenRenderMode = 'clone';\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: 677,\n        columnNumber: 9\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, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    placement: placement,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 686,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focus,\n    onKeyDown: onPickerKeyDown,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 699,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\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: 706,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: hasValue && 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: 727,\n      columnNumber: 11\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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../internals/Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _Picker = __webpack_require__(/*! ../internals/Picker */ \"./src/internals/Picker/index.ts\");\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 _InputPickerContext = __webpack_require__(/*! ./InputPickerContext */ \"./src/InputPicker/InputPickerContext.tsx\");\nvar _utils3 = __webpack_require__(/*! ./utils */ \"./src/InputPicker/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('InputPicker', props);\n  const {\n    as: Component = 'div',\n    appearance = 'default',\n    cleanable = true,\n    cacheData = [],\n    classPrefix = 'picker',\n    data: controlledData = [],\n    disabled,\n    readOnly,\n    plaintext,\n    defaultValue,\n    defaultOpen = false,\n    disabledItemValues = [],\n    locale,\n    toggleAs,\n    style,\n    size,\n    searchable = true,\n    open: controlledOpen,\n    placeholder,\n    placement = 'bottomStart',\n    groupBy,\n    menuClassName,\n    menuStyle,\n    menuAutoWidth = true,\n    menuMaxHeight = 320,\n    creatable,\n    shouldDisplayCreateOption,\n    value: valueProp,\n    valueKey = 'value',\n    virtualized,\n    labelKey = 'label',\n    listProps,\n    id,\n    tabIndex,\n    sort,\n    renderMenu,\n    renderExtraFooter,\n    renderValue,\n    renderMenuItem,\n    renderMenuGroup,\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.useClassNames)(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, _utils.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, _utils.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, _utils.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, _utils.shallowEqual)(v, newItemValue))) {\n      val.push(newItemValue);\n    } else if (!disabledOptions) {\n      (0, _remove.default)(val, itemVal => (0, _utils.shallowEqual)(itemVal, newItemValue));\n    }\n    let focusItem = data.find(item => (0, _utils.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, _utils.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 || 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, _utils.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, _utils.isOneOf)('Comma', trigger) && event.key === _constants.KEY_VALUES.COMMA) {\n      handleTagKeyPress(event);\n      event.preventDefault();\n    }\n  });\n  if (multi) {\n    if ((0, _utils.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    ...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: 497,\n        columnNumber: 9\n      }\n    }, (0, _utils.tplTransform)((locale === null || locale === void 0 ? void 0 : locale.createOption) || '', label)) : label;\n    return renderMenuItem ? renderMenuItem(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, _utils3.convertSize)(size),\n        closable: !disabled && closable && !readOnly && !plaintext,\n        title: typeof itemNode === 'string' ? itemNode : undefined,\n        onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 542,\n          columnNumber: 13\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      left,\n      top,\n      className\n    } = positionProps;\n    const menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';\n    const classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));\n    const styles = {\n      ...menuStyle,\n      left,\n      top\n    };\n    let items = (0, _utils2.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, _utils.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, _utils.mergeRefs)(overlay, speakerRef),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 589,\n          columnNumber: 16\n        }\n      });\n    }\n    const menu = 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: menuMaxHeight,\n      data: items,\n      query: searchKeyword,\n      groupBy: groupBy,\n      onSelect: multi ? handleCheckTag : handleSelectItem,\n      renderMenuGroup: renderMenuGroup,\n      renderMenuItem: renderListItem,\n      virtualized: virtualized,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 593,\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: 615,\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: menuAutoWidth,\n      className: classes,\n      style: styles,\n      target: triggerRef,\n      onKeyDown: onPickerKeyDown,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 619,\n        columnNumber: 9\n      }\n    }, renderMenu ? renderMenu(menu) : menu, 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 && !rest.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      plaintextProps.childrenRenderMode = 'clone';\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: 676,\n        columnNumber: 9\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, _utils.createChainedFunction)(handleEnter, onEnter),\n    onEntered: onEntered,\n    onExit: (0, _utils.createChainedFunction)(handleExit, onExit),\n    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),\n    speaker: renderPopup,\n    placement: placement,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 685,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, {\n    className: classes,\n    style: style,\n    onClick: focus,\n    onKeyDown: onPickerKeyDown,\n    ref: root,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 698,\n      columnNumber: 9\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {\n    appearance: appearance,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    ref: target,\n    as: toggleAs,\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: 705,\n      columnNumber: 11\n    }\n  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {\n    showTagList: hasValue && 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: 726,\n      columnNumber: 11\n    }\n  })));\n});\nInputPicker.displayName = 'InputPicker';\nvar _default = exports[\"default\"] = InputPicker;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/InputPicker.tsx?");
 
 /***/ }),
 
@@ -3557,7 +3557,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 _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ../internals/Picker/hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/InputPicker/TagList.tsx\";\nconst TagList = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    children,\n    ...rest\n  } = props;\n  const {\n    prefix\n  } = (0, _hooks.useClassNames)('picker');\n  const {\n    id\n  } = (0, _useCombobox.default)();\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    ref: ref,\n    role: \"listbox\",\n    id: `${id}-describe`,\n    className: prefix`tag-list`\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 12,\n      columnNumber: 7\n    }\n  }), children);\n});\nvar _default = exports[\"default\"] = TagList;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/TagList.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 _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _useCombobox = _interopRequireDefault(__webpack_require__(/*! ../internals/Picker/hooks/useCombobox */ \"./src/internals/Picker/hooks/useCombobox.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/InputPicker/TagList.tsx\";\nconst TagList = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    children,\n    ...rest\n  } = props;\n  const {\n    prefix\n  } = (0, _hooks.useClassNames)('picker');\n  const {\n    id\n  } = (0, _useCombobox.default)();\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    ref: ref,\n    role: \"listbox\",\n    id: `${id}-describe`,\n    className: prefix`tag-list`\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 12,\n      columnNumber: 7\n    }\n  }), children);\n});\nTagList.displayName = 'TagList';\nvar _default = exports[\"default\"] = TagList;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/TagList.tsx?");
 
 /***/ }),
 
@@ -3568,7 +3568,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 _TagList = _interopRequireDefault(__webpack_require__(/*! ./TagList */ \"./src/InputPicker/TagList.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _InputSearch = _interopRequireDefault(__webpack_require__(/*! ./InputSearch */ \"./src/InputPicker/InputSearch.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/InputPicker/TextBox.tsx\";\nconst TextBox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    tags,\n    inputProps,\n    readOnly,\n    disabled,\n    multiple,\n    onBlur,\n    onFocus,\n    onChange,\n    inputValue,\n    inputRef,\n    editable,\n    showTagList,\n    ...rest\n  } = props;\n  const {\n    prefix\n  } = (0, _hooks.useClassNames)('picker');\n  if (!multiple && disabled) {\n    return null;\n  }\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    className: prefix`textbox`,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 45,\n      columnNumber: 5\n    }\n  }), showTagList ? /*#__PURE__*/_react.default.createElement(_TagList.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 46,\n      columnNumber: 22\n    }\n  }, tags) : null, editable && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {\n    tabIndex: -1,\n    readOnly: readOnly,\n    onBlur: onBlur,\n    onFocus: onFocus,\n    inputRef: inputRef,\n    onChange: onChange,\n    value: inputValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 48,\n      columnNumber: 9\n    }\n  })));\n});\nvar _default = exports[\"default\"] = TextBox;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/TextBox.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 _TagList = _interopRequireDefault(__webpack_require__(/*! ./TagList */ \"./src/InputPicker/TagList.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _InputSearch = _interopRequireDefault(__webpack_require__(/*! ./InputSearch */ \"./src/InputPicker/InputSearch.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/InputPicker/TextBox.tsx\";\nconst TextBox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    tags,\n    inputProps,\n    readOnly,\n    disabled,\n    multiple,\n    onBlur,\n    onFocus,\n    onChange,\n    inputValue,\n    inputRef,\n    editable,\n    showTagList,\n    ...rest\n  } = props;\n  const {\n    prefix\n  } = (0, _hooks.useClassNames)('picker');\n  if (!multiple && disabled) {\n    return null;\n  }\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    className: prefix`textbox`,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 45,\n      columnNumber: 5\n    }\n  }), showTagList ? /*#__PURE__*/_react.default.createElement(_TagList.default, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 46,\n      columnNumber: 22\n    }\n  }, tags) : null, editable && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {\n    tabIndex: -1,\n    readOnly: readOnly,\n    onBlur: onBlur,\n    onFocus: onFocus,\n    inputRef: inputRef,\n    onChange: onChange,\n    value: inputValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 48,\n      columnNumber: 9\n    }\n  })));\n});\nTextBox.displayName = 'TextBox';\nvar _default = exports[\"default\"] = TextBox;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/TextBox.tsx?");
 
 /***/ }),
 
@@ -3601,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 _react = __webpack_require__(/*! react */ \"react\");\nvar _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nfunction useMaxWidth(triggerRef) {\n  const [maxWidth, setMaxWidth] = (0, _react.useState)(100);\n  (0, _react.useEffect)(() => {\n    var _triggerRef$current;\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.root) {\n      var _triggerRef$current2;\n      setMaxWidth((0, _getWidth.default)((_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.root));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return maxWidth;\n}\nvar _default = exports[\"default\"] = useMaxWidth;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/hooks/useMaxWidth.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 _getWidth = _interopRequireDefault(__webpack_require__(/*! dom-lib/getWidth */ \"./node_modules/dom-lib/esm/getWidth.js\"));\nfunction useMaxWidth(triggerRef) {\n  const [maxWidth, setMaxWidth] = (0, _react.useState)(100);\n  (0, _react.useEffect)(() => {\n    var _triggerRef$current;\n    // In multiple selection, you need to set a maximum width for the input.\n    if ((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.root) {\n      var _triggerRef$current2;\n      setMaxWidth((0, _getWidth.default)((_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.root));\n    }\n  }, []);\n  return maxWidth;\n}\nvar _default = exports[\"default\"] = useMaxWidth;\n\n//# sourceURL=webpack://rsuite/./src/InputPicker/hooks/useMaxWidth.ts?");
 
 /***/ }),
 
@@ -3634,7 +3634,7 @@ eval("\n\nexports.__esModule = true;\nexports.convertSize = void 0;\nconst conve
 /***/ (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 _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; }\n/**\n * The `List` component is used to specify the layout of the list.\n * @see https://rsuitejs.com/components/list\n */\nconst List = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('List', props);\n  const {\n    as: Component = 'div',\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    withClassPrefix,\n    merge\n  } = (0, _hooks.useClassNames)(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, withClassPrefix({\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(Component, (0, _extends2.default)({\n    role: \"list\"\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(containerRef, ref),\n    className: classes,\n    onMouseDown: sortable ? handleStart : undefined,\n    onMouseUp: sortable ? handleEnd : undefined,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 90,\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: 98,\n      columnNumber: 7\n    }\n  }, children));\n});\nList.Item = _ListItem.default;\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 _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; }\n/**\n * The `List` component is used to specify the layout of the list.\n * @see https://rsuitejs.com/components/list\n */\nconst List = /*#__PURE__*/_react.default.forwardRef(function List(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('List', props);\n  const {\n    as: Component = 'div',\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    withClassPrefix,\n    merge\n  } = (0, _hooks.useClassNames)(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, withClassPrefix({\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(Component, (0, _extends2.default)({\n    role: \"list\"\n  }, rest, {\n    ref: (0, _utils.mergeRefs)(containerRef, ref),\n    className: classes,\n    onMouseDown: sortable ? handleStart : undefined,\n    onMouseUp: sortable ? handleEnd : undefined,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 93,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {\n    value: contextValue,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 101,\n      columnNumber: 7\n    }\n  }, children));\n});\nList.Item = _ListItem.default;\nList.displayName = 'List';\nvar _default = exports[\"default\"] = List;\n\n//# sourceURL=webpack://rsuite/./src/List/List.tsx?");
 
 /***/ }),
 
@@ -3744,7 +3744,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 _TextMask = _interopRequireDefault(__webpack_require__(/*! ./TextMask */ \"./src/MaskedInput/TextMask.tsx\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/MaskedInput/MaskedInput.tsx\";\nconst MaskedInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('MaskedInput', props);\n  const {\n    as: inputAs = _TextMask.default\n  } = propsWithDefaults;\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, propsWithDefaults, {\n    as: inputAs,\n    ref: ref,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 18,\n      columnNumber: 10\n    }\n  }));\n});\nvar _default = exports[\"default\"] = MaskedInput;\n\n//# sourceURL=webpack://rsuite/./src/MaskedInput/MaskedInput.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 _TextMask = _interopRequireDefault(__webpack_require__(/*! ./TextMask */ \"./src/MaskedInput/TextMask.tsx\"));\nvar _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ \"./src/Input/index.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/MaskedInput/MaskedInput.tsx\";\nconst MaskedInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('MaskedInput', props);\n  const {\n    as: inputAs = _TextMask.default\n  } = propsWithDefaults;\n  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, propsWithDefaults, {\n    as: inputAs,\n    ref: ref,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 18,\n      columnNumber: 10\n    }\n  }));\n});\nMaskedInput.displayName = 'MaskedInput';\nvar _default = exports[\"default\"] = MaskedInput;\n\n//# sourceURL=webpack://rsuite/./src/MaskedInput/MaskedInput.tsx?");
 
 /***/ }),
 
@@ -3777,7 +3777,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = adjustCaretPosition
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = conformToMask;\nexports.isArray = isArray;\nvar _utilities = __webpack_require__(/*! ./utilities */ \"./src/MaskedInput/utilities.ts\");\nfunction isArray(value) {\n  return Array.isArray && Array.isArray(value) || value instanceof Array;\n}\nfunction conformToMask(rawValue, mask, config) {\n  if (rawValue === void 0) {\n    rawValue = '';\n  }\n  if (mask === void 0) {\n    mask = [];\n  }\n  if (config === void 0) {\n    config = {};\n  }\n  if (!isArray(mask)) {\n    // If someone passes a function as the mask property, we should call the\n    // function to get the mask array - Normally this is handled by the\n    // `createTextMaskInputElement:update` function - this allows mask functions\n    // to be used directly with `conformToMask`\n    if (typeof mask === 'function') {\n      // call the mask function to get the mask array\n      mask = mask(rawValue, config);\n\n      // mask functions can setup caret traps to have some control over how the caret moves. We need to process\n      // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask\n      mask = (0, _utilities.processCaretTraps)(mask).maskWithoutCaretTraps;\n    } else {\n      throw new Error('Text-mask:conformToMask; The mask property must be an array.');\n    }\n  }\n\n  // These configurations tell us how to conform the mask\n  const {\n    guide = true,\n    previousConformedValue = '',\n    placeholderChar = _utilities.defaultPlaceholderChar,\n    placeholder = (0, _utilities.convertMaskToPlaceholder)(mask, placeholderChar),\n    currentCaretPosition = 0,\n    keepCharPositions\n  } = config;\n\n  // The configs below indicate that the user wants the algorithm to work in *no guide* mode\n  const suppressGuide = guide === false && previousConformedValue !== undefined;\n\n  // Calculate lengths once for performance\n  const rawValueLength = rawValue.length;\n  const previousConformedValueLength = previousConformedValue.length;\n  const placeholderLength = placeholder.length;\n  const maskLength = mask.length;\n\n  // This tells us the number of edited characters and the direction in which they were edited (+/-)\n  const editDistance = rawValueLength - previousConformedValueLength;\n\n  // In *no guide* mode, we need to know if the user is trying to add a character or not\n  const isAddition = editDistance > 0;\n\n  // Tells us the index of the first change. For (438) 394-4938 to (38) 394-4938, that would be 1\n  const indexOfFirstChange = currentCaretPosition + (isAddition ? -editDistance : 0);\n\n  // We're also gonna need the index of last change, which we can derive as follows...\n  const indexOfLastChange = indexOfFirstChange + Math.abs(editDistance);\n\n  // If `conformToMask` is configured to keep character positions, that is, for mask 111, previous value\n  // _2_ and raw value 3_2_, the new conformed value should be 32_, not 3_2 (default behavior). That's in the case of\n  // addition. And in the case of deletion, previous value _23, raw value _3, the new conformed string should be\n  // __3, not _3_ (default behavior)\n  //\n  // The next block of logic handles keeping character positions for the case of deletion. (Keeping\n  // character positions for the case of addition is further down since it is handled differently.)\n  // To do this, we want to compensate for all characters that were deleted\n  if (keepCharPositions === true && !isAddition) {\n    // We will be storing the new placeholder characters in this variable.\n    let compensatingPlaceholderChars = '';\n\n    // For every character that was deleted from a placeholder position, we add a placeholder char\n    for (let i = indexOfFirstChange; i < indexOfLastChange; i++) {\n      if (placeholder[i] === placeholderChar) {\n        compensatingPlaceholderChars += placeholderChar;\n      }\n    }\n\n    // Now we trick our algorithm by modifying the raw value to make it contain additional placeholder characters\n    // That way when the we start laying the characters again on the mask, it will keep the non-deleted characters\n    // in their positions.\n    rawValue = rawValue.slice(0, indexOfFirstChange) + compensatingPlaceholderChars + rawValue.slice(indexOfFirstChange, rawValueLength);\n  }\n\n  // Convert `rawValue` string to an array, and mark characters based on whether they are newly added or have\n  // existed in the previous conformed value. Identifying new and old characters is needed for `conformToMask`\n  // to work if it is configured to keep character positions.\n  const rawValueArr = rawValue.split('').map((char, i) => ({\n    char,\n    isNew: i >= indexOfFirstChange && i < indexOfLastChange\n  }));\n\n  // The loop below removes masking characters from user input. For example, for mask\n  // `00 (111)`, the placeholder would be `00 (___)`. If user input is `00 (234)`, the loop below\n  // would remove all characters but `234` from the `rawValueArr`. The rest of the algorithm\n  // then would lay `234` on top of the available placeholder positions in the mask.\n  for (let i = rawValueLength - 1; i >= 0; i--) {\n    const {\n      char\n    } = rawValueArr[i];\n    if (char !== placeholderChar) {\n      const shouldOffset = i >= indexOfFirstChange && previousConformedValueLength === maskLength;\n      if (char === placeholder[shouldOffset ? i - editDistance : i]) {\n        rawValueArr.splice(i, 1);\n      }\n    }\n  }\n\n  // This is the variable that we will be filling with characters as we figure them out\n  // in the algorithm below\n  let conformedValue = '';\n  let someCharsRejected = false;\n\n  // Ok, so first we loop through the placeholder looking for placeholder characters to fill up.\n  placeholderLoop: for (let i = 0; i < placeholderLength; i++) {\n    const charInPlaceholder = placeholder[i];\n\n    // We see one. Let's find out what we can put in it.\n    if (charInPlaceholder === placeholderChar) {\n      // But before that, do we actually have any user characters that need a place?\n      if (rawValueArr.length > 0) {\n        // We will keep chipping away at user input until either we run out of characters\n        // or we find at least one character that we can map.\n        while (rawValueArr.length > 0) {\n          // Let's retrieve the first user character in the queue of characters we have left\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          const {\n            char: rawValueChar,\n            isNew\n          } = rawValueArr.shift();\n\n          // If the character we got from the user input is a placeholder character (which happens\n          // regularly because user input could be something like (540) 90_-____, which includes\n          // a bunch of `_` which are placeholder characters) and we are not in *no guide* mode,\n          // then we map this placeholder character to the current spot in the placeholder\n          if (rawValueChar === placeholderChar && suppressGuide !== true) {\n            conformedValue += placeholderChar;\n\n            // And we go to find the next placeholder character that needs filling\n            continue placeholderLoop;\n\n            // Else if, the character we got from the user input is not a placeholder, let's see\n            // if the current position in the mask can accept it.\n          } else if (mask[i].test(rawValueChar)) {\n            // we map the character differently based on whether we are keeping character positions or not.\n            // If any of the conditions below are met, we simply map the raw value character to the\n            // placeholder position.\n            if (keepCharPositions !== true || isNew === false || previousConformedValue === '' || guide === false || !isAddition) {\n              conformedValue += rawValueChar;\n            } else {\n              // We enter this block of code if we are trying to keep character positions and none of the conditions\n              // above is met. In this case, we need to see if there's an available spot for the raw value character\n              // to be mapped to. If we couldn't find a spot, we will discard the character.\n              //\n              // For example, for mask `1111`, previous conformed value `_2__`, raw value `942_2__`. We can map the\n              // `9`, to the first available placeholder position, but then, there are no more spots available for the\n              // `4` and `2`. So, we discard them and end up with a conformed value of `92__`.\n              const rawValueArrLength = rawValueArr.length;\n              let indexOfNextAvailablePlaceholderChar = null;\n\n              // Let's loop through the remaining raw value characters. We are looking for either a suitable spot, ie,\n              // a placeholder character or a non-suitable spot, ie, a non-placeholder character that is not new.\n              // If we see a suitable spot first, we store its position and exit the loop. If we see a non-suitable\n              // spot first, we exit the loop and our `indexOfNextAvailablePlaceholderChar` will stay as `null`.\n              for (let i = 0; i < rawValueArrLength; i++) {\n                const charData = rawValueArr[i];\n                if (charData.char !== placeholderChar && charData.isNew === false) {\n                  break;\n                }\n                if (charData.char === placeholderChar) {\n                  indexOfNextAvailablePlaceholderChar = i;\n                  break;\n                }\n              }\n\n              // If `indexOfNextAvailablePlaceholderChar` is not `null`, that means the character is not blocked.\n              // We can map it. And to keep the character positions, we remove the placeholder character\n              // from the remaining characters\n              if (indexOfNextAvailablePlaceholderChar !== null) {\n                conformedValue += rawValueChar;\n                rawValueArr.splice(indexOfNextAvailablePlaceholderChar, 1);\n\n                // If `indexOfNextAvailablePlaceholderChar` is `null`, that means the character is blocked. We have to\n                // discard it.\n              } else {\n                i--;\n              }\n            }\n\n            // Since we've mapped this placeholder position. We move on to the next one.\n            continue placeholderLoop;\n          } else {\n            someCharsRejected = true;\n          }\n        }\n      }\n\n      // We reach this point when we've mapped all the user input characters to placeholder\n      // positions in the mask. In *guide* mode, we append the left over characters in the\n      // placeholder to the `conformedString`, but in *no guide* mode, we don't wanna do that.\n      //\n      // That is, for mask `(111)` and user input `2`, we want to return `(2`, not `(2__)`.\n      if (suppressGuide === false) {\n        conformedValue += placeholder.substr(i, placeholderLength);\n      }\n\n      // And we break\n      break;\n\n      // Else, the charInPlaceholder is not a placeholderChar. That is, we cannot fill it\n      // with user input. So we just map it to the final output\n    } else {\n      conformedValue += charInPlaceholder;\n    }\n  }\n\n  // The following logic is needed to deal with the case of deletion in *no guide* mode.\n  //\n  // Consider the silly mask `(111) /// 1`. What if user tries to delete the last placeholder\n  // position? Something like `(589) /// `. We want to conform that to `(589`. Not `(589) /// `.\n  // That's why the logic below finds the last filled placeholder character, and removes everything\n  // from that point on.\n  if (suppressGuide && isAddition === false) {\n    let indexOfLastFilledPlaceholderChar = null;\n\n    // Find the last filled placeholder position and substring from there\n    for (let i = 0; i < conformedValue.length; i++) {\n      if (placeholder[i] === placeholderChar) {\n        indexOfLastFilledPlaceholderChar = i;\n      }\n    }\n    if (indexOfLastFilledPlaceholderChar !== null) {\n      // We substring from the beginning until the position after the last filled placeholder char.\n      conformedValue = conformedValue.substr(0, indexOfLastFilledPlaceholderChar + 1);\n    } else {\n      // If we couldn't find `indexOfLastFilledPlaceholderChar` that means the user deleted\n      // the first character in the mask. So we return an empty string.\n      conformedValue = '';\n    }\n  }\n  return {\n    conformedValue,\n    meta: {\n      someCharsRejected\n    }\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/MaskedInput/conformToMask.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = conformToMask;\nexports.isArray = isArray;\nvar _utilities = __webpack_require__(/*! ./utilities */ \"./src/MaskedInput/utilities.ts\");\nfunction isArray(value) {\n  return Array.isArray && Array.isArray(value) || value instanceof Array;\n}\nfunction conformToMask(rawValue, mask, config) {\n  if (rawValue === void 0) {\n    rawValue = '';\n  }\n  if (mask === void 0) {\n    mask = [];\n  }\n  if (config === void 0) {\n    config = {};\n  }\n  if (!isArray(mask)) {\n    // If someone passes a function as the mask property, we should call the\n    // function to get the mask array - Normally this is handled by the\n    // `createTextMaskInputElement:update` function - this allows mask functions\n    // to be used directly with `conformToMask`\n    if (typeof mask === 'function') {\n      // call the mask function to get the mask array\n      mask = mask(rawValue, config);\n\n      // mask functions can setup caret traps to have some control over how the caret moves. We need to process\n      // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask\n      mask = (0, _utilities.processCaretTraps)(mask).maskWithoutCaretTraps;\n    } else {\n      throw new Error('Text-mask:conformToMask; The mask property must be an array.');\n    }\n  }\n\n  // These configurations tell us how to conform the mask\n  const {\n    guide = true,\n    previousConformedValue = '',\n    placeholderChar = _utilities.defaultPlaceholderChar,\n    placeholder = (0, _utilities.convertMaskToPlaceholder)(mask, placeholderChar),\n    currentCaretPosition = 0,\n    keepCharPositions\n  } = config;\n\n  // The configs below indicate that the user wants the algorithm to work in *no guide* mode\n  const suppressGuide = guide === false && previousConformedValue !== undefined;\n\n  // Calculate lengths once for performance\n  const rawValueLength = rawValue.length;\n  const previousConformedValueLength = previousConformedValue.length;\n  const placeholderLength = placeholder.length;\n  const maskLength = mask.length;\n\n  // This tells us the number of edited characters and the direction in which they were edited (+/-)\n  const editDistance = rawValueLength - previousConformedValueLength;\n\n  // In *no guide* mode, we need to know if the user is trying to add a character or not\n  const isAddition = editDistance > 0;\n\n  // Tells us the index of the first change. For (438) 394-4938 to (38) 394-4938, that would be 1\n  const indexOfFirstChange = currentCaretPosition + (isAddition ? -editDistance : 0);\n\n  // We're also gonna need the index of last change, which we can derive as follows...\n  const indexOfLastChange = indexOfFirstChange + Math.abs(editDistance);\n\n  // If `conformToMask` is configured to keep character positions, that is, for mask 111, previous value\n  // _2_ and raw value 3_2_, the new conformed value should be 32_, not 3_2 (default behavior). That's in the case of\n  // addition. And in the case of deletion, previous value _23, raw value _3, the new conformed string should be\n  // __3, not _3_ (default behavior)\n  //\n  // The next block of logic handles keeping character positions for the case of deletion. (Keeping\n  // character positions for the case of addition is further down since it is handled differently.)\n  // To do this, we want to compensate for all characters that were deleted\n  if (keepCharPositions === true && !isAddition) {\n    // We will be storing the new placeholder characters in this variable.\n    let compensatingPlaceholderChars = '';\n\n    // For every character that was deleted from a placeholder position, we add a placeholder char\n    for (let i = indexOfFirstChange; i < indexOfLastChange; i++) {\n      if (placeholder[i] === placeholderChar) {\n        compensatingPlaceholderChars += placeholderChar;\n      }\n    }\n\n    // Now we trick our algorithm by modifying the raw value to make it contain additional placeholder characters\n    // That way when the we start laying the characters again on the mask, it will keep the non-deleted characters\n    // in their positions.\n    rawValue = rawValue.slice(0, indexOfFirstChange) + compensatingPlaceholderChars + rawValue.slice(indexOfFirstChange, rawValueLength);\n  }\n\n  // Convert `rawValue` string to an array, and mark characters based on whether they are newly added or have\n  // existed in the previous conformed value. Identifying new and old characters is needed for `conformToMask`\n  // to work if it is configured to keep character positions.\n  const rawValueArr = rawValue.split('').map((char, i) => ({\n    char,\n    isNew: i >= indexOfFirstChange && i < indexOfLastChange\n  }));\n\n  // The loop below removes masking characters from user input. For example, for mask\n  // `00 (111)`, the placeholder would be `00 (___)`. If user input is `00 (234)`, the loop below\n  // would remove all characters but `234` from the `rawValueArr`. The rest of the algorithm\n  // then would lay `234` on top of the available placeholder positions in the mask.\n  for (let i = rawValueLength - 1; i >= 0; i--) {\n    const {\n      char\n    } = rawValueArr[i];\n    if (char !== placeholderChar) {\n      const shouldOffset = i >= indexOfFirstChange && previousConformedValueLength === maskLength;\n      if (char === placeholder[shouldOffset ? i - editDistance : i]) {\n        rawValueArr.splice(i, 1);\n      }\n    }\n  }\n\n  // This is the variable that we will be filling with characters as we figure them out\n  // in the algorithm below\n  let conformedValue = '';\n  let someCharsRejected = false;\n\n  // Ok, so first we loop through the placeholder looking for placeholder characters to fill up.\n  placeholderLoop: for (let i = 0; i < placeholderLength; i++) {\n    const charInPlaceholder = placeholder[i];\n\n    // We see one. Let's find out what we can put in it.\n    if (charInPlaceholder === placeholderChar) {\n      // But before that, do we actually have any user characters that need a place?\n      if (rawValueArr.length > 0) {\n        // We will keep chipping away at user input until either we run out of characters\n        // or we find at least one character that we can map.\n        while (rawValueArr.length > 0) {\n          // Let's retrieve the first user character in the queue of characters we have left\n          const {\n            char: rawValueChar,\n            isNew\n          } = rawValueArr.shift();\n\n          // If the character we got from the user input is a placeholder character (which happens\n          // regularly because user input could be something like (540) 90_-____, which includes\n          // a bunch of `_` which are placeholder characters) and we are not in *no guide* mode,\n          // then we map this placeholder character to the current spot in the placeholder\n          if (rawValueChar === placeholderChar && suppressGuide !== true) {\n            conformedValue += placeholderChar;\n\n            // And we go to find the next placeholder character that needs filling\n            continue placeholderLoop;\n\n            // Else if, the character we got from the user input is not a placeholder, let's see\n            // if the current position in the mask can accept it.\n          } else if (mask[i].test(rawValueChar)) {\n            // we map the character differently based on whether we are keeping character positions or not.\n            // If any of the conditions below are met, we simply map the raw value character to the\n            // placeholder position.\n            if (keepCharPositions !== true || isNew === false || previousConformedValue === '' || guide === false || !isAddition) {\n              conformedValue += rawValueChar;\n            } else {\n              // We enter this block of code if we are trying to keep character positions and none of the conditions\n              // above is met. In this case, we need to see if there's an available spot for the raw value character\n              // to be mapped to. If we couldn't find a spot, we will discard the character.\n              //\n              // For example, for mask `1111`, previous conformed value `_2__`, raw value `942_2__`. We can map the\n              // `9`, to the first available placeholder position, but then, there are no more spots available for the\n              // `4` and `2`. So, we discard them and end up with a conformed value of `92__`.\n              const rawValueArrLength = rawValueArr.length;\n              let indexOfNextAvailablePlaceholderChar = null;\n\n              // Let's loop through the remaining raw value characters. We are looking for either a suitable spot, ie,\n              // a placeholder character or a non-suitable spot, ie, a non-placeholder character that is not new.\n              // If we see a suitable spot first, we store its position and exit the loop. If we see a non-suitable\n              // spot first, we exit the loop and our `indexOfNextAvailablePlaceholderChar` will stay as `null`.\n              for (let i = 0; i < rawValueArrLength; i++) {\n                const charData = rawValueArr[i];\n                if (charData.char !== placeholderChar && charData.isNew === false) {\n                  break;\n                }\n                if (charData.char === placeholderChar) {\n                  indexOfNextAvailablePlaceholderChar = i;\n                  break;\n                }\n              }\n\n              // If `indexOfNextAvailablePlaceholderChar` is not `null`, that means the character is not blocked.\n              // We can map it. And to keep the character positions, we remove the placeholder character\n              // from the remaining characters\n              if (indexOfNextAvailablePlaceholderChar !== null) {\n                conformedValue += rawValueChar;\n                rawValueArr.splice(indexOfNextAvailablePlaceholderChar, 1);\n\n                // If `indexOfNextAvailablePlaceholderChar` is `null`, that means the character is blocked. We have to\n                // discard it.\n              } else {\n                i--;\n              }\n            }\n\n            // Since we've mapped this placeholder position. We move on to the next one.\n            continue placeholderLoop;\n          } else {\n            someCharsRejected = true;\n          }\n        }\n      }\n\n      // We reach this point when we've mapped all the user input characters to placeholder\n      // positions in the mask. In *guide* mode, we append the left over characters in the\n      // placeholder to the `conformedString`, but in *no guide* mode, we don't wanna do that.\n      //\n      // That is, for mask `(111)` and user input `2`, we want to return `(2`, not `(2__)`.\n      if (suppressGuide === false) {\n        conformedValue += placeholder.substr(i, placeholderLength);\n      }\n\n      // And we break\n      break;\n\n      // Else, the charInPlaceholder is not a placeholderChar. That is, we cannot fill it\n      // with user input. So we just map it to the final output\n    } else {\n      conformedValue += charInPlaceholder;\n    }\n  }\n\n  // The following logic is needed to deal with the case of deletion in *no guide* mode.\n  //\n  // Consider the silly mask `(111) /// 1`. What if user tries to delete the last placeholder\n  // position? Something like `(589) /// `. We want to conform that to `(589`. Not `(589) /// `.\n  // That's why the logic below finds the last filled placeholder character, and removes everything\n  // from that point on.\n  if (suppressGuide && isAddition === false) {\n    let indexOfLastFilledPlaceholderChar = null;\n\n    // Find the last filled placeholder position and substring from there\n    for (let i = 0; i < conformedValue.length; i++) {\n      if (placeholder[i] === placeholderChar) {\n        indexOfLastFilledPlaceholderChar = i;\n      }\n    }\n    if (indexOfLastFilledPlaceholderChar !== null) {\n      // We substring from the beginning until the position after the last filled placeholder char.\n      conformedValue = conformedValue.substr(0, indexOfLastFilledPlaceholderChar + 1);\n    } else {\n      // If we couldn't find `indexOfLastFilledPlaceholderChar` that means the user deleted\n      // the first character in the mask. So we return an empty string.\n      conformedValue = '';\n    }\n  }\n  return {\n    conformedValue,\n    meta: {\n      someCharsRejected\n    }\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/MaskedInput/conformToMask.ts?");
 
 /***/ }),
 
@@ -3843,7 +3843,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 _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _getAnimationEnd = _interopRequireDefault(__webpack_require__(/*! dom-lib/getAnimationEnd */ \"./node_modules/dom-lib/esm/getAnimationEnd.js\"));\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! ../internals/Overlay/Modal */ \"./src/internals/Overlay/Modal.tsx\"));\nvar _Bounce = _interopRequireDefault(__webpack_require__(/*! ../Animation/Bounce */ \"./src/Animation/Bounce.tsx\"));\nvar _ModalDialog = _interopRequireDefault(__webpack_require__(/*! ./ModalDialog */ \"./src/Modal/ModalDialog.tsx\"));\nvar _ModalBody = _interopRequireDefault(__webpack_require__(/*! ./ModalBody */ \"./src/Modal/ModalBody.tsx\"));\nvar _ModalHeader = _interopRequireDefault(__webpack_require__(/*! ./ModalHeader */ \"./src/Modal/ModalHeader.tsx\"));\nvar _ModalTitle = _interopRequireDefault(__webpack_require__(/*! ./ModalTitle */ \"./src/Modal/ModalTitle.tsx\"));\nvar _ModalFooter = _interopRequireDefault(__webpack_require__(/*! ./ModalFooter */ \"./src/Modal/ModalFooter.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _ModalContext = __webpack_require__(/*! ./ModalContext */ \"./src/Modal/ModalContext.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Modal/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Modal/Modal.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 modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];\n/**\n * The `Modal` component is used to show content in a layer above the app.\n * @see https://rsuitejs.com/components/modal\n */\nconst Modal = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Modal', props);\n  const {\n    animation = _Bounce.default,\n    animationProps,\n    animationTimeout = 300,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    backdropClassName,\n    backdrop = true,\n    className,\n    classPrefix = 'modal',\n    dialogClassName,\n    dialogStyle,\n    dialogAs: Dialog = _ModalDialog.default,\n    enforceFocus: enforceFocusProp,\n    full,\n    overflow = true,\n    open,\n    onClose,\n    onEntered,\n    onEntering,\n    onExited,\n    role = 'dialog',\n    size = 'sm',\n    id: idProp,\n    isDrawer = false,\n    closeButton,\n    ...rest\n  } = propsWithDefaults;\n  const inClass = {\n    in: open && !animation\n  };\n  const {\n    merge,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const [shake, setShake] = (0, _react.useState)(false);\n  const classes = merge(className, prefix({\n    full,\n    [size]: modalSizes.includes(size)\n  }));\n  const dialogRef = (0, _react.useRef)(null);\n  const transitionEndListener = (0, _react.useRef)();\n\n  // The style of the Modal body will be updated with the size of the window or container.\n  const [bodyStyles, onChangeBodyStyles, onDestroyEvents] = (0, _utils2.useBodyStyles)(dialogRef, {\n    overflow,\n    prefix,\n    size\n  });\n  const dialogId = (0, _hooks.useUniqueId)('dialog-', idProp);\n  const modalContextValue = (0, _react.useMemo)(() => ({\n    dialogId,\n    onModalClose: onClose,\n    getBodyStyles: () => bodyStyles,\n    closeButton,\n    isDrawer\n  }), [dialogId, onClose, closeButton, isDrawer, bodyStyles]);\n  const handleExited = (0, _react.useCallback)(node => {\n    var _transitionEndListene;\n    onExited === null || onExited === void 0 || onExited(node);\n    onDestroyEvents();\n    (_transitionEndListene = transitionEndListener.current) === null || _transitionEndListene === void 0 || _transitionEndListene.off();\n    transitionEndListener.current = null;\n  }, [onDestroyEvents, onExited]);\n  const handleEntered = (0, _react.useCallback)(node => {\n    onEntered === null || onEntered === void 0 || onEntered(node);\n    onChangeBodyStyles();\n  }, [onChangeBodyStyles, onEntered]);\n  const handleEntering = (0, _react.useCallback)(node => {\n    onEntering === null || onEntering === void 0 || onEntering(node);\n    onChangeBodyStyles(true);\n  }, [onChangeBodyStyles, onEntering]);\n  const backdropClick = _react.default.useRef();\n  const handleMouseDown = (0, _react.useCallback)(event => {\n    backdropClick.current = event.target === event.currentTarget;\n  }, []);\n  const handleBackdropClick = (0, _react.useCallback)(event => {\n    // Ignore click events from non-backdrop.\n    // fix: https://github.com/rsuite/rsuite/issues/3394\n    if (!backdropClick.current) {\n      return;\n    }\n\n    // Ignore click events from dialog.\n    if (event.target === dialogRef.current) {\n      return;\n    }\n\n    // Ignore click events from dialog children.\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n\n    // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.\n    if (backdrop === 'static') {\n      setShake(true);\n      if (!transitionEndListener.current && dialogRef.current) {\n        //fix: https://github.com/rsuite/rsuite/blob/a93d13c14fb20cc58204babe3331d3c3da3fe1fd/src/Modal/styles/index.less#L59\n        transitionEndListener.current = (0, _on.default)(dialogRef.current, (0, _getAnimationEnd.default)(), () => {\n          setShake(false);\n        });\n      }\n      return;\n    }\n    onClose === null || onClose === void 0 || onClose(event);\n  }, [backdrop, onClose]);\n  (0, _hooks.useWillUnmount)(() => {\n    var _transitionEndListene2;\n    (_transitionEndListene2 = transitionEndListener.current) === null || _transitionEndListene2 === void 0 || _transitionEndListene2.off();\n  });\n  let sizeKey = 'width';\n  if (isDrawer) {\n    const {\n      placement\n    } = animationProps || {};\n    // The width or height of the drawer depends on the placement.\n    sizeKey = placement === 'top' || placement === 'bottom' ? 'height' : 'width';\n  }\n  const enforceFocus = (0, _react.useMemo)(() => {\n    if (typeof enforceFocusProp === 'boolean') {\n      return enforceFocusProp;\n    }\n\n    // When the Drawer is displayed and the backdrop is not displayed, the focus is not restricted.\n    if (isDrawer && backdrop === false) {\n      return false;\n    }\n  }, [backdrop, enforceFocusProp, isDrawer]);\n  const wrapperClassName = merge(prefix`wrapper`, {\n    [prefix`no-backdrop`]: backdrop === false\n  });\n  return /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, {\n    value: modalContextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 224,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({\n    \"data-testid\": isDrawer ? 'drawer-wrapper' : 'modal-wrapper'\n  }, rest, {\n    ref: ref,\n    backdrop: backdrop,\n    enforceFocus: enforceFocus,\n    open: open,\n    onClose: onClose,\n    className: wrapperClassName,\n    onEntered: handleEntered,\n    onEntering: handleEntering,\n    onExited: handleExited,\n    backdropClassName: merge(prefix`backdrop`, backdropClassName, inClass),\n    containerClassName: prefix({\n      open,\n      'has-backdrop': backdrop\n    }),\n    transition: animation ? animation : undefined,\n    animationProps: animationProps,\n    dialogTransitionTimeout: animationTimeout,\n    backdropTransitionTimeout: 150,\n    onClick: backdrop ? handleBackdropClick : undefined,\n    onMouseDown: handleMouseDown,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 225,\n      columnNumber: 9\n    }\n  }), (transitionProps, transitionRef) => {\n    const {\n      className: transitionClassName,\n      ...transitionRest\n    } = transitionProps;\n    return /*#__PURE__*/_react.default.createElement(Dialog, (0, _extends2.default)({\n      role: role,\n      id: dialogId,\n      \"aria-labelledby\": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : `${dialogId}-title`,\n      \"aria-describedby\": ariaDescribedby,\n      style: {\n        [sizeKey]: modalSizes.includes(size) ? undefined : size\n      }\n    }, transitionRest, (0, _pick.default)(rest, ['size', 'className', 'classPrefix', 'dialogClassName', 'style', 'dialogStyle', 'children']), {\n      ref: (0, _utils.mergeRefs)(dialogRef, transitionRef),\n      classPrefix: classPrefix,\n      className: merge(classes, transitionClassName, prefix({\n        shake\n      })),\n      dialogClassName: dialogClassName,\n      dialogStyle: dialogStyle,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 249,\n        columnNumber: 15\n      }\n    }));\n  }));\n});\nModal.Body = _ModalBody.default;\nModal.Header = _ModalHeader.default;\nModal.Title = _ModalTitle.default;\nModal.Footer = _ModalFooter.default;\nModal.Dialog = _ModalDialog.default;\nModal.displayName = 'Modal';\nvar _default = exports[\"default\"] = Modal;\n\n//# sourceURL=webpack://rsuite/./src/Modal/Modal.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 _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _getAnimationEnd = _interopRequireDefault(__webpack_require__(/*! dom-lib/getAnimationEnd */ \"./node_modules/dom-lib/esm/getAnimationEnd.js\"));\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! ../internals/Overlay/Modal */ \"./src/internals/Overlay/Modal.tsx\"));\nvar _Bounce = _interopRequireDefault(__webpack_require__(/*! ../Animation/Bounce */ \"./src/Animation/Bounce.tsx\"));\nvar _ModalDialog = _interopRequireDefault(__webpack_require__(/*! ./ModalDialog */ \"./src/Modal/ModalDialog.tsx\"));\nvar _ModalBody = _interopRequireDefault(__webpack_require__(/*! ./ModalBody */ \"./src/Modal/ModalBody.tsx\"));\nvar _ModalHeader = _interopRequireDefault(__webpack_require__(/*! ./ModalHeader */ \"./src/Modal/ModalHeader.tsx\"));\nvar _ModalTitle = _interopRequireDefault(__webpack_require__(/*! ./ModalTitle */ \"./src/Modal/ModalTitle.tsx\"));\nvar _ModalFooter = _interopRequireDefault(__webpack_require__(/*! ./ModalFooter */ \"./src/Modal/ModalFooter.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _ModalContext = __webpack_require__(/*! ./ModalContext */ \"./src/Modal/ModalContext.ts\");\nvar _utils2 = __webpack_require__(/*! ./utils */ \"./src/Modal/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Modal/Modal.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 modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];\n/**\n * The `Modal` component is used to show content in a layer above the app.\n * @see https://rsuitejs.com/components/modal\n */\nconst Modal = /*#__PURE__*/_react.default.forwardRef(function Modal(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Modal', props);\n  const {\n    animation = _Bounce.default,\n    animationProps,\n    animationTimeout = 300,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    backdropClassName,\n    backdrop = true,\n    className,\n    classPrefix = 'modal',\n    dialogClassName,\n    dialogStyle,\n    dialogAs: Dialog = _ModalDialog.default,\n    enforceFocus: enforceFocusProp,\n    full,\n    overflow = true,\n    open,\n    onClose,\n    onEntered,\n    onEntering,\n    onExited,\n    role = 'dialog',\n    size = 'sm',\n    id: idProp,\n    isDrawer = false,\n    closeButton,\n    ...rest\n  } = propsWithDefaults;\n  const inClass = {\n    in: open && !animation\n  };\n  const {\n    merge,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const [shake, setShake] = (0, _react.useState)(false);\n  const classes = merge(className, prefix({\n    full,\n    [size]: modalSizes.includes(size)\n  }));\n  const dialogRef = (0, _react.useRef)(null);\n  const transitionEndListener = (0, _react.useRef)();\n\n  // The style of the Modal body will be updated with the size of the window or container.\n  const [bodyStyles, onChangeBodyStyles, onDestroyEvents] = (0, _utils2.useBodyStyles)(dialogRef, {\n    overflow,\n    prefix,\n    size\n  });\n  const dialogId = (0, _hooks.useUniqueId)('dialog-', idProp);\n  const modalContextValue = (0, _react.useMemo)(() => ({\n    dialogId,\n    onModalClose: onClose,\n    getBodyStyles: () => bodyStyles,\n    closeButton,\n    isDrawer\n  }), [dialogId, onClose, closeButton, isDrawer, bodyStyles]);\n  const handleExited = (0, _react.useCallback)(node => {\n    var _transitionEndListene;\n    onExited === null || onExited === void 0 || onExited(node);\n    onDestroyEvents();\n    (_transitionEndListene = transitionEndListener.current) === null || _transitionEndListene === void 0 || _transitionEndListene.off();\n    transitionEndListener.current = null;\n  }, [onDestroyEvents, onExited]);\n  const handleEntered = (0, _react.useCallback)(node => {\n    onEntered === null || onEntered === void 0 || onEntered(node);\n    onChangeBodyStyles();\n  }, [onChangeBodyStyles, onEntered]);\n  const handleEntering = (0, _react.useCallback)(node => {\n    onEntering === null || onEntering === void 0 || onEntering(node);\n    onChangeBodyStyles(true);\n  }, [onChangeBodyStyles, onEntering]);\n  const backdropClick = _react.default.useRef();\n  const handleMouseDown = (0, _react.useCallback)(event => {\n    backdropClick.current = event.target === event.currentTarget;\n  }, []);\n  const handleBackdropClick = (0, _react.useCallback)(event => {\n    // Ignore click events from non-backdrop.\n    // fix: https://github.com/rsuite/rsuite/issues/3394\n    if (!backdropClick.current) {\n      return;\n    }\n\n    // Ignore click events from dialog.\n    if (event.target === dialogRef.current) {\n      return;\n    }\n\n    // Ignore click events from dialog children.\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n\n    // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.\n    if (backdrop === 'static') {\n      setShake(true);\n      if (!transitionEndListener.current && dialogRef.current) {\n        //fix: https://github.com/rsuite/rsuite/blob/a93d13c14fb20cc58204babe3331d3c3da3fe1fd/src/Modal/styles/index.less#L59\n        transitionEndListener.current = (0, _on.default)(dialogRef.current, (0, _getAnimationEnd.default)(), () => {\n          setShake(false);\n        });\n      }\n      return;\n    }\n    onClose === null || onClose === void 0 || onClose(event);\n  }, [backdrop, onClose]);\n  (0, _hooks.useWillUnmount)(() => {\n    var _transitionEndListene2;\n    (_transitionEndListene2 = transitionEndListener.current) === null || _transitionEndListene2 === void 0 || _transitionEndListene2.off();\n  });\n  let sizeKey = 'width';\n  if (isDrawer) {\n    const {\n      placement\n    } = animationProps || {};\n    // The width or height of the drawer depends on the placement.\n    sizeKey = placement === 'top' || placement === 'bottom' ? 'height' : 'width';\n  }\n  const enforceFocus = (0, _react.useMemo)(() => {\n    if (typeof enforceFocusProp === 'boolean') {\n      return enforceFocusProp;\n    }\n\n    // When the Drawer is displayed and the backdrop is not displayed, the focus is not restricted.\n    if (isDrawer && backdrop === false) {\n      return false;\n    }\n  }, [backdrop, enforceFocusProp, isDrawer]);\n  const wrapperClassName = merge(prefix`wrapper`, {\n    [prefix`no-backdrop`]: backdrop === false\n  });\n  return /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, {\n    value: modalContextValue,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 226,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({\n    \"data-testid\": isDrawer ? 'drawer-wrapper' : 'modal-wrapper'\n  }, rest, {\n    ref: ref,\n    backdrop: backdrop,\n    enforceFocus: enforceFocus,\n    open: open,\n    onClose: onClose,\n    className: wrapperClassName,\n    onEntered: handleEntered,\n    onEntering: handleEntering,\n    onExited: handleExited,\n    backdropClassName: merge(prefix`backdrop`, backdropClassName, inClass),\n    containerClassName: prefix({\n      open,\n      'has-backdrop': backdrop\n    }),\n    transition: animation ? animation : undefined,\n    animationProps: animationProps,\n    dialogTransitionTimeout: animationTimeout,\n    backdropTransitionTimeout: 150,\n    onClick: backdrop ? handleBackdropClick : undefined,\n    onMouseDown: handleMouseDown,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 227,\n      columnNumber: 7\n    }\n  }), (transitionProps, transitionRef) => {\n    const {\n      className: transitionClassName,\n      ...transitionRest\n    } = transitionProps;\n    return /*#__PURE__*/_react.default.createElement(Dialog, (0, _extends2.default)({\n      role: role,\n      id: dialogId,\n      \"aria-labelledby\": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : `${dialogId}-title`,\n      \"aria-describedby\": ariaDescribedby,\n      style: {\n        [sizeKey]: modalSizes.includes(size) ? undefined : size\n      }\n    }, transitionRest, (0, _pick.default)(rest, ['size', 'className', 'classPrefix', 'dialogClassName', 'style', 'dialogStyle', 'children']), {\n      ref: (0, _utils.mergeRefs)(dialogRef, transitionRef),\n      classPrefix: classPrefix,\n      className: merge(classes, transitionClassName, prefix({\n        shake\n      })),\n      dialogClassName: dialogClassName,\n      dialogStyle: dialogStyle,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 251,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\nModal.Body = _ModalBody.default;\nModal.Header = _ModalHeader.default;\nModal.Title = _ModalTitle.default;\nModal.Footer = _ModalFooter.default;\nModal.Dialog = _ModalDialog.default;\nModal.displayName = 'Modal';\nvar _default = exports[\"default\"] = Modal;\n\n//# sourceURL=webpack://rsuite/./src/Modal/Modal.tsx?");
 
 /***/ }),
 
@@ -3931,7 +3931,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.useBodyStyles = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _resizeObserver = __webpack_require__(/*! @juggle/resize-observer */ \"./node_modules/@juggle/resize-observer/lib/exports/resize-observer.js\");\nconst useBodyStyles = (ref, options) => {\n  const [bodyStyles, setBodyStyles] = (0, _react.useState)({});\n  const {\n    overflow,\n    prefix,\n    size\n  } = options;\n  const windowResizeListener = (0, _react.useRef)();\n  const contentElement = (0, _react.useRef)(null);\n  const contentElementResizeObserver = (0, _react.useRef)();\n  const updateBodyStyles = (0, _react.useCallback)((_event, entering) => {\n    const dialog = ref.current;\n    const scrollHeight = dialog ? dialog.scrollHeight : 0;\n    const styles = {\n      overflow: 'auto'\n    };\n    if (dialog) {\n      // default margin\n      let headerHeight = 46;\n      let footerHeight = 46;\n      const headerDOM = dialog.querySelector(`.${prefix('header')}`);\n      const footerDOM = dialog.querySelector(`.${prefix('footer')}`);\n      headerHeight = headerDOM ? (0, _getHeight.default)(headerDOM) + headerHeight : headerHeight;\n      footerHeight = footerDOM ? (0, _getHeight.default)(footerDOM) + footerHeight : footerHeight;\n\n      /**\n       * Header height + Footer height + Dialog margin\n       */\n      const excludeHeight = headerHeight + footerHeight + (entering ? 70 : 60);\n      const bodyHeight = (0, _getHeight.default)(window) - excludeHeight;\n      const maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;\n      styles.maxHeight = maxHeight;\n    }\n    setBodyStyles(styles);\n  }, [prefix, ref]);\n  const onDestroyEvents = (0, _react.useCallback)(() => {\n    var _windowResizeListener, _windowResizeListener2, _contentElementResize;\n    (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 || (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 || _windowResizeListener2.call(_windowResizeListener);\n    (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 || _contentElementResize.disconnect();\n    windowResizeListener.current = null;\n    contentElementResizeObserver.current = null;\n  }, []);\n  const onChangeBodyStyles = (0, _react.useCallback)(entering => {\n    if (!overflow || size === 'full') {\n      setBodyStyles(null);\n      return;\n    }\n    if (ref.current) {\n      updateBodyStyles(undefined, entering);\n      contentElement.current = ref.current.querySelector(`.${prefix('content')}`);\n      if (!windowResizeListener.current) {\n        windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);\n      }\n      if (contentElement.current && !contentElementResizeObserver.current) {\n        contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(() => updateBodyStyles());\n        contentElementResizeObserver.current.observe(contentElement.current);\n      }\n    }\n  }, [overflow, prefix, ref, size, updateBodyStyles]);\n  (0, _react.useEffect)(() => {\n    return onDestroyEvents;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return [overflow ? bodyStyles : null, onChangeBodyStyles, onDestroyEvents];\n};\nexports.useBodyStyles = useBodyStyles;\n\n//# sourceURL=webpack://rsuite/./src/Modal/utils.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.useBodyStyles = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _getHeight = _interopRequireDefault(__webpack_require__(/*! dom-lib/getHeight */ \"./node_modules/dom-lib/esm/getHeight.js\"));\nvar _on = _interopRequireDefault(__webpack_require__(/*! dom-lib/on */ \"./node_modules/dom-lib/esm/on.js\"));\nvar _resizeObserver = __webpack_require__(/*! @juggle/resize-observer */ \"./node_modules/@juggle/resize-observer/lib/exports/resize-observer.js\");\nconst useBodyStyles = (ref, options) => {\n  const [bodyStyles, setBodyStyles] = (0, _react.useState)({});\n  const {\n    overflow,\n    prefix,\n    size\n  } = options;\n  const windowResizeListener = (0, _react.useRef)();\n  const contentElement = (0, _react.useRef)(null);\n  const contentElementResizeObserver = (0, _react.useRef)();\n  const updateBodyStyles = (0, _react.useCallback)((_event, entering) => {\n    const dialog = ref.current;\n    const scrollHeight = dialog ? dialog.scrollHeight : 0;\n    const styles = {\n      overflow: 'auto'\n    };\n    if (dialog) {\n      // default margin\n      let headerHeight = 46;\n      let footerHeight = 46;\n      const headerDOM = dialog.querySelector(`.${prefix('header')}`);\n      const footerDOM = dialog.querySelector(`.${prefix('footer')}`);\n      headerHeight = headerDOM ? (0, _getHeight.default)(headerDOM) + headerHeight : headerHeight;\n      footerHeight = footerDOM ? (0, _getHeight.default)(footerDOM) + footerHeight : footerHeight;\n\n      /**\n       * Header height + Footer height + Dialog margin\n       */\n      const excludeHeight = headerHeight + footerHeight + (entering ? 70 : 60);\n      const bodyHeight = (0, _getHeight.default)(window) - excludeHeight;\n      const maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;\n      styles.maxHeight = maxHeight;\n    }\n    setBodyStyles(styles);\n  }, [prefix, ref]);\n  const onDestroyEvents = (0, _react.useCallback)(() => {\n    var _windowResizeListener, _windowResizeListener2, _contentElementResize;\n    (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 || (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 || _windowResizeListener2.call(_windowResizeListener);\n    (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 || _contentElementResize.disconnect();\n    windowResizeListener.current = null;\n    contentElementResizeObserver.current = null;\n  }, []);\n  const onChangeBodyStyles = (0, _react.useCallback)(entering => {\n    if (!overflow || size === 'full') {\n      setBodyStyles(null);\n      return;\n    }\n    if (ref.current) {\n      updateBodyStyles(undefined, entering);\n      contentElement.current = ref.current.querySelector(`.${prefix('content')}`);\n      if (!windowResizeListener.current) {\n        windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);\n      }\n      if (contentElement.current && !contentElementResizeObserver.current) {\n        contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(() => updateBodyStyles());\n        contentElementResizeObserver.current.observe(contentElement.current);\n      }\n    }\n  }, [overflow, prefix, ref, size, updateBodyStyles]);\n  (0, _react.useEffect)(() => {\n    return onDestroyEvents;\n  }, []);\n  return [overflow ? bodyStyles : null, onChangeBodyStyles, onDestroyEvents];\n};\nexports.useBodyStyles = useBodyStyles;\n\n//# sourceURL=webpack://rsuite/./src/Modal/utils.ts?");
 
 /***/ }),
 
@@ -4096,7 +4096,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 _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _Menubar = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menubar */ \"./src/internals/Menu/Menubar.tsx\"));\nvar _NavDropdown = _interopRequireDefault(__webpack_require__(/*! ./NavDropdown */ \"./src/Nav/NavDropdown.tsx\"));\nvar _NavMenu = _interopRequireDefault(__webpack_require__(/*! ./NavMenu */ \"./src/Nav/NavMenu.tsx\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _AdaptiveNavItem = _interopRequireDefault(__webpack_require__(/*! ./AdaptiveNavItem */ \"./src/Nav/AdaptiveNavItem.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _Navbar = __webpack_require__(/*! ../Navbar/Navbar */ \"./src/Navbar/Navbar.tsx\");\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\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/Nav/Nav.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` component is used to create navigation links.\n * @see https://rsuitejs.com/components/nav\n */\nconst Nav = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Nav', props);\n  const {\n    as: Component = 'div',\n    classPrefix = 'nav',\n    appearance = 'default',\n    vertical,\n    justified,\n    reversed,\n    pullRight,\n    className,\n    children,\n    activeKey: activeKeyProp,\n    defaultActiveKey,\n    onSelect: onSelectProp,\n    ...rest\n  } = propsWithDefaults;\n  const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  // Whether inside a <Navbar>\n  const navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  const menubarRef = (0, _hooks.useEnsuredRef)(ref);\n  const {\n    withClassPrefix,\n    merge,\n    rootPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, rootPrefix({\n    'navbar-nav': navbar,\n    'navbar-right': pullRight,\n    'sidenav-nav': sidenav\n  }), withClassPrefix(appearance, {\n    horizontal: navbar || !vertical && !sidenav,\n    vertical: vertical || sidenav,\n    justified,\n    reversed\n  }));\n  const {\n    activeKey: activeKeyFromSidenav,\n    onSelect: onSelectFromSidenav\n  } = sidenav || {};\n  const [activeKey, setActiveKey] = (0, _hooks.useControlled)(activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav, defaultActiveKey);\n  const contextValue = (0, _react.useMemo)(() => ({\n    activeKey,\n    onSelect: (eventKey, event) => {\n      setActiveKey(eventKey);\n      onSelectProp === null || onSelectProp === void 0 || onSelectProp(eventKey, event);\n      onSelectFromSidenav === null || onSelectFromSidenav === void 0 || onSelectFromSidenav(eventKey, event);\n    }\n  }), [activeKey, onSelectFromSidenav, onSelectProp, setActiveKey]);\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 139,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n      ref: ref,\n      className: classes\n    }, rest, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 140,\n        columnNumber: 9\n      }\n    }), children));\n  }\n  const hasWaterline = appearance !== 'default';\n\n  // If inside a collapsed <Sidenav>, render an ARIA `menubar` (vertical)\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 152,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {\n      vertical: !!sidenav,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 153,\n        columnNumber: 9\n      }\n    }, (menubar, ref) => /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref\n    }, rest, {\n      className: classes\n    }, menubar, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 155,\n        columnNumber: 13\n      }\n    }), children)));\n  }\n  return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n    value: contextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 164,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: menubarRef,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 165,\n      columnNumber: 7\n    }\n  }), children, hasWaterline && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('bar'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 167,\n      columnNumber: 26\n    }\n  })));\n});\nconst DeprecatedNavDropdown = (0, _utils.deprecateComponent)(_NavDropdown.default, '<Nav.Dropdown> is deprecated, use <Nav.Menu> instead.');\nDeprecatedNavDropdown.Menu = (0, _utils.deprecateComponent)(_NavDropdownMenu.default, '<Nav.Dropdown.Menu> is deprecated, use <Nav.Menu> instead');\nDeprecatedNavDropdown.Item = (0, _utils.deprecateComponent)(_NavDropdownItem.default, '<Nav.Dropdown.Item> is deprecated, use <Nav.Item> instead');\nNav.Dropdown = DeprecatedNavDropdown;\nNav.Item = _AdaptiveNavItem.default;\nNav.Menu = _NavMenu.default;\nNav.displayName = 'Nav';\nvar _default = exports[\"default\"] = Nav;\n\n//# sourceURL=webpack://rsuite/./src/Nav/Nav.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 _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _Menubar = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menubar */ \"./src/internals/Menu/Menubar.tsx\"));\nvar _NavDropdown = _interopRequireDefault(__webpack_require__(/*! ./NavDropdown */ \"./src/Nav/NavDropdown.tsx\"));\nvar _NavMenu = _interopRequireDefault(__webpack_require__(/*! ./NavMenu */ \"./src/Nav/NavMenu.tsx\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _AdaptiveNavItem = _interopRequireDefault(__webpack_require__(/*! ./AdaptiveNavItem */ \"./src/Nav/AdaptiveNavItem.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _Navbar = __webpack_require__(/*! ../Navbar/Navbar */ \"./src/Navbar/Navbar.tsx\");\nvar _Sidenav = __webpack_require__(/*! ../Sidenav/Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\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/Nav/Nav.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` component is used to create navigation links.\n * @see https://rsuitejs.com/components/nav\n */\nconst Nav = /*#__PURE__*/_react.default.forwardRef(function Nav(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Nav', props);\n  const {\n    as: Component = 'div',\n    classPrefix = 'nav',\n    appearance = 'default',\n    vertical,\n    justified,\n    reversed,\n    pullRight,\n    className,\n    children,\n    activeKey: activeKeyProp,\n    defaultActiveKey,\n    onSelect: onSelectProp,\n    ...rest\n  } = propsWithDefaults;\n  const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n\n  // Whether inside a <Navbar>\n  const navbar = (0, _react.useContext)(_Navbar.NavbarContext);\n  const menubarRef = (0, _hooks.useEnsuredRef)(ref);\n  const {\n    withClassPrefix,\n    merge,\n    rootPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, rootPrefix({\n    'navbar-nav': navbar,\n    'navbar-right': pullRight,\n    'sidenav-nav': sidenav\n  }), withClassPrefix(appearance, {\n    horizontal: navbar || !vertical && !sidenav,\n    vertical: vertical || sidenav,\n    justified,\n    reversed\n  }));\n  const {\n    activeKey: activeKeyFromSidenav,\n    onSelect: onSelectFromSidenav\n  } = sidenav || {};\n  const [activeKey, setActiveKey] = (0, _hooks.useControlled)(activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav, defaultActiveKey);\n  const contextValue = (0, _react.useMemo)(() => ({\n    activeKey,\n    onSelect: (eventKey, event) => {\n      setActiveKey(eventKey);\n      onSelectProp === null || onSelectProp === void 0 || onSelectProp(eventKey, event);\n      onSelectFromSidenav === null || onSelectFromSidenav === void 0 || onSelectFromSidenav(eventKey, event);\n    }\n  }), [activeKey, onSelectFromSidenav, onSelectProp, setActiveKey]);\n  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 142,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n      ref: ref,\n      className: classes\n    }, rest, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 143,\n        columnNumber: 9\n      }\n    }), children));\n  }\n  const hasWaterline = appearance !== 'default';\n\n  // If inside a collapsed <Sidenav>, render an ARIA `menubar` (vertical)\n  if (sidenav) {\n    return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n      value: contextValue,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 155,\n        columnNumber: 7\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {\n      vertical: !!sidenav,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 156,\n        columnNumber: 9\n      }\n    }, (menubar, ref) => /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: ref\n    }, rest, {\n      className: classes\n    }, menubar, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 158,\n        columnNumber: 13\n      }\n    }), children)));\n  }\n  return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {\n    value: contextValue,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 167,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: menubarRef,\n    className: classes,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 168,\n      columnNumber: 7\n    }\n  }), children, hasWaterline && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('bar'),\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 170,\n      columnNumber: 26\n    }\n  })));\n});\nconst DeprecatedNavDropdown = (0, _utils.deprecateComponent)(_NavDropdown.default, '<Nav.Dropdown> is deprecated, use <Nav.Menu> instead.');\nDeprecatedNavDropdown.Menu = (0, _utils.deprecateComponent)(_NavDropdownMenu.default, '<Nav.Dropdown.Menu> is deprecated, use <Nav.Menu> instead');\nDeprecatedNavDropdown.Item = (0, _utils.deprecateComponent)(_NavDropdownItem.default, '<Nav.Dropdown.Item> is deprecated, use <Nav.Item> instead');\nNav.Dropdown = DeprecatedNavDropdown;\nNav.Item = _AdaptiveNavItem.default;\nNav.Menu = _NavMenu.default;\nNav.displayName = 'Nav';\nvar _default = exports[\"default\"] = Nav;\n\n//# sourceURL=webpack://rsuite/./src/Nav/Nav.tsx?");
 
 /***/ }),
 
@@ -4118,7 +4118,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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _DropdownState = __webpack_require__(/*! ../Dropdown/DropdownState */ \"./src/Dropdown/DropdownState.ts\");\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menu */ \"./src/internals/Menu/Menu.tsx\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _NavDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownToggle */ \"./src/Nav/NavDropdownToggle.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Nav/NavDropdown.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 this component is not supposed to be used directly\n *          Instead it's rendered by a `<Nav.Menu>` call\n *\n * @example\n * <Nav>\n *   <Nav.Menu> -> This will render <NavDropdown> component\n *   </Nav.Menu>\n * </Nav>\n */\nconst NavDropdown = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const nav = (0, _react.useContext)(_NavContext.default);\n  if (!nav) {\n    throw new Error('<Nav.Dropdown> must be rendered within a <Nav> component.');\n  }\n  const {\n    as: Component = 'div',\n    title,\n    onClose,\n    onOpen,\n    onToggle,\n    eventKey,\n    trigger = 'click',\n    placement = 'bottomStart',\n    toggleAs,\n    toggleClassName,\n    classPrefix = 'dropdown',\n    className,\n    disabled,\n    children,\n    menuStyle,\n    style,\n    ...toggleProps\n  } = props;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    withClassPrefix: withMenuClassPrefix,\n    merge: mergeMenuClassName\n  } = (0, _hooks.useClassNames)('dropdown-menu');\n  const menuButtonTriggers = (0, _react.useMemo)(() => {\n    if (!trigger) {\n      return undefined;\n    }\n    const triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n    return trigger.map(t => triggerMap[t]);\n  }, [trigger]);\n  const [{\n    items\n  }] = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState);\n  const hasSelectedItem = (0, _react.useMemo)(() => {\n    return items.some(item => item.props.selected);\n  }, [items]);\n  const renderMenuButton = (menuButtonProps, menuButtonRef) => /*#__PURE__*/_react.default.createElement(_NavDropdownToggle.default, (0, _extends2.default)({\n    ref: menuButtonRef,\n    as: toggleAs,\n    className: toggleClassName,\n    placement: placement,\n    disabled: disabled\n  }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid']), {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 163,\n      columnNumber: 7\n    }\n  }), title);\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    renderMenuButton: renderMenuButton,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: (_ref, popupRef) => {\n      let {\n        open,\n        ...popupProps\n      } = _ref;\n      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 184,\n          columnNumber: 13\n        }\n      }), children);\n    },\n    onToggleMenu: (open, event) => {\n      onToggle === null || onToggle === void 0 || onToggle(open, eventKey, event);\n      if (open) {\n        onOpen === null || onOpen === void 0 || onOpen();\n      } else {\n        onClose === null || onClose === void 0 || onClose();\n      }\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 177,\n      columnNumber: 7\n    }\n  }, (_ref2, menuContainerRef) => {\n    let {\n      open,\n      ...menuContainer\n    } = _ref2;\n    const classes = merge(className, withClassPrefix({\n      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,\n      disabled,\n      open,\n      'selected-within': hasSelectedItem\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 215,\n        columnNumber: 13\n      }\n    }));\n  });\n});\nNavDropdown.Item = _NavDropdownItem.default;\nNavDropdown.Menu = _NavDropdownMenu.default;\nNavDropdown.displayName = 'Nav.Dropdown';\nvar _default = exports[\"default\"] = NavDropdown;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavDropdown.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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _DropdownState = __webpack_require__(/*! ../Dropdown/DropdownState */ \"./src/Dropdown/DropdownState.ts\");\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menu */ \"./src/internals/Menu/Menu.tsx\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ./NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _NavDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./NavDropdownToggle */ \"./src/Nav/NavDropdownToggle.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Nav/NavDropdown.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 this component is not supposed to be used directly\n *          Instead it's rendered by a `<Nav.Menu>` call\n *\n * @example\n * <Nav>\n *   <Nav.Menu> -> This will render <NavDropdown> component\n *   </Nav.Menu>\n * </Nav>\n */\nconst NavDropdown = /*#__PURE__*/_react.default.forwardRef(function NavDropdown(props, ref) {\n  const nav = (0, _react.useContext)(_NavContext.default);\n  if (!nav) {\n    throw new Error('<Nav.Dropdown> must be rendered within a <Nav> component.');\n  }\n  const {\n    as: Component = 'div',\n    title,\n    onClose,\n    onOpen,\n    onToggle,\n    eventKey,\n    trigger = 'click',\n    placement = 'bottomStart',\n    toggleAs,\n    toggleClassName,\n    classPrefix = 'dropdown',\n    className,\n    disabled,\n    children,\n    menuStyle,\n    style,\n    ...toggleProps\n  } = props;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    withClassPrefix: withMenuClassPrefix,\n    merge: mergeMenuClassName\n  } = (0, _hooks.useClassNames)('dropdown-menu');\n  const menuButtonTriggers = (0, _react.useMemo)(() => {\n    if (!trigger) {\n      return undefined;\n    }\n    const triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n    return trigger.map(t => triggerMap[t]);\n  }, [trigger]);\n  const [{\n    items\n  }] = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState);\n  const hasSelectedItem = (0, _react.useMemo)(() => {\n    return items.some(item => item.props.selected);\n  }, [items]);\n  const renderMenuButton = (menuButtonProps, menuButtonRef) => /*#__PURE__*/_react.default.createElement(_NavDropdownToggle.default, (0, _extends2.default)({\n    ref: menuButtonRef,\n    as: toggleAs,\n    className: toggleClassName,\n    placement: placement,\n    disabled: disabled\n  }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid']), {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 165,\n      columnNumber: 5\n    }\n  }), title);\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    renderMenuButton: renderMenuButton,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: (_ref, popupRef) => {\n      let {\n        open,\n        ...popupProps\n      } = _ref;\n      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 186,\n          columnNumber: 11\n        }\n      }), children);\n    },\n    onToggleMenu: (open, event) => {\n      onToggle === null || onToggle === void 0 || onToggle(open, eventKey, event);\n      if (open) {\n        onOpen === null || onOpen === void 0 || onOpen();\n      } else {\n        onClose === null || onClose === void 0 || onClose();\n      }\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 179,\n      columnNumber: 5\n    }\n  }, (_ref2, menuContainerRef) => {\n    let {\n      open,\n      ...menuContainer\n    } = _ref2;\n    const classes = merge(className, withClassPrefix({\n      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,\n      disabled,\n      open,\n      'selected-within': hasSelectedItem\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 217,\n        columnNumber: 11\n      }\n    }));\n  });\n});\nNavDropdown.Item = _NavDropdownItem.default;\nNavDropdown.Menu = _NavDropdownMenu.default;\nNavDropdown.displayName = 'Nav.Dropdown';\nvar _default = exports[\"default\"] = NavDropdown;\n\n//# sourceURL=webpack://rsuite/./src/Nav/NavDropdown.tsx?");
 
 /***/ }),
 
@@ -4195,7 +4195,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\"] = exports.NavbarContext = 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 _NavbarBody = _interopRequireDefault(__webpack_require__(/*! ./NavbarBody */ \"./src/Navbar/NavbarBody.tsx\"));\nvar _NavbarHeader = _interopRequireDefault(__webpack_require__(/*! ./NavbarHeader */ \"./src/Navbar/NavbarHeader.tsx\"));\nvar _NavbarBrand = _interopRequireDefault(__webpack_require__(/*! ./NavbarBrand */ \"./src/Navbar/NavbarBrand.tsx\"));\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/Navbar/Navbar.tsx\";\nconst NavbarContext = exports.NavbarContext = /*#__PURE__*/_react.default.createContext(false);\n/**\n * The `Navbar` component is used to create a navigation header.\n * @see https://rsuitejs.com/components/navbar\n */\nconst Navbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Navbar', props);\n  const {\n    className,\n    as: Component = 'nav',\n    classPrefix = 'navbar',\n    appearance = 'default',\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withClassPrefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(appearance));\n  return /*#__PURE__*/_react.default.createElement(NavbarContext.Provider, {\n    value: true,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 47,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 48,\n      columnNumber: 9\n    }\n  })));\n});\nNavbar.Header = _NavbarHeader.default;\nNavbar.Body = _NavbarBody.default;\nNavbar.Brand = _NavbarBrand.default;\nNavbar.displayName = 'Navbar';\nvar _default = exports[\"default\"] = Navbar;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/Navbar.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.NavbarContext = 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 _NavbarBody = _interopRequireDefault(__webpack_require__(/*! ./NavbarBody */ \"./src/Navbar/NavbarBody.tsx\"));\nvar _NavbarHeader = _interopRequireDefault(__webpack_require__(/*! ./NavbarHeader */ \"./src/Navbar/NavbarHeader.tsx\"));\nvar _NavbarBrand = _interopRequireDefault(__webpack_require__(/*! ./NavbarBrand */ \"./src/Navbar/NavbarBrand.tsx\"));\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/Navbar/Navbar.tsx\";\nconst NavbarContext = exports.NavbarContext = /*#__PURE__*/_react.default.createContext(false);\n/**\n * The `Navbar` component is used to create a navigation header.\n * @see https://rsuitejs.com/components/navbar\n */\nconst Navbar = /*#__PURE__*/_react.default.forwardRef(function Navbar(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Navbar', props);\n  const {\n    className,\n    as: Component = 'nav',\n    classPrefix = 'navbar',\n    appearance = 'default',\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withClassPrefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(appearance));\n  return /*#__PURE__*/_react.default.createElement(NavbarContext.Provider, {\n    value: true,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 49,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 50,\n      columnNumber: 7\n    }\n  })));\n});\nNavbar.Header = _NavbarHeader.default;\nNavbar.Body = _NavbarBody.default;\nNavbar.Brand = _NavbarBrand.default;\nNavbar.displayName = 'Navbar';\nvar _default = exports[\"default\"] = Navbar;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/Navbar.tsx?");
 
 /***/ }),
 
@@ -4228,7 +4228,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 _castArray = _interopRequireDefault(__webpack_require__(/*! lodash/castArray */ \"./node_modules/lodash/castArray.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 _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _ = __webpack_require__(/*! . */ \"./src/Navbar/index.tsx\");\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../internals/Disclosure/Disclosure */ \"./src/internals/Disclosure/Disclosure.tsx\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _NavbarDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./NavbarDropdownToggle */ \"./src/Navbar/NavbarDropdownToggle.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Navbar/NavbarDropdown.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 NavbarDropdown = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const navbar = (0, _react.useContext)(_.NavbarContext);\n  if (!navbar) {\n    throw new Error('<Navbar.Dropdown> should be used within a <Navbar> component.');\n  }\n  const {\n    as: Component = 'div',\n    title,\n    onClose,\n    onOpen,\n    onToggle,\n    trigger = 'click',\n    placement = 'bottomStart',\n    toggleAs,\n    toggleClassName,\n    classPrefix = 'dropdown',\n    className,\n    disabled,\n    children,\n    menuStyle,\n    style,\n    ...toggleProps\n  } = props;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    withClassPrefix: withMenuClassPrefix,\n    merge: mergeMenuClassName\n  } = (0, _hooks.useClassNames)('dropdown-menu');\n  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n    trigger: (0, _castArray.default)(trigger),\n    hideOnClickOutside: true,\n    onToggle: open => {\n      onToggle === null || onToggle === void 0 || onToggle(open);\n      if (open) {\n        onOpen === null || onOpen === void 0 || onOpen();\n      } else {\n        onClose === null || onClose === void 0 || onClose();\n      }\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 122,\n      columnNumber: 7\n    }\n  }, (_ref, containerRef) => {\n    let {\n      open,\n      ...props\n    } = _ref;\n    const classes = merge(className, withClassPrefix({\n      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,\n      disabled,\n      open\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, containerRef),\n      className: classes,\n      style: style\n    }, props, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 144,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 150,\n        columnNumber: 15\n      }\n    }, (buttonProps, buttonRef) => /*#__PURE__*/_react.default.createElement(_NavbarDropdownToggle.default, (0, _extends2.default)({\n      ref: buttonRef,\n      as: toggleAs,\n      className: toggleClassName,\n      placement: placement,\n      disabled: disabled\n    }, (0, _omit.default)(buttonProps, ['open']), toggleProps, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 152,\n        columnNumber: 19\n      }\n    }), title)), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 165,\n        columnNumber: 15\n      }\n    }, (_ref2, elementRef) => {\n      let {\n        open\n      } = _ref2;\n      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", {\n        ref: elementRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open,\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 169,\n          columnNumber: 21\n        }\n      }, children);\n    }));\n  });\n});\nNavbarDropdown.Item = _NavDropdownItem.default;\nNavbarDropdown.Menu = _NavDropdownMenu.default;\nNavbarDropdown.displayName = 'Navbar.Dropdown';\nvar _default = exports[\"default\"] = NavbarDropdown;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarDropdown.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 _castArray = _interopRequireDefault(__webpack_require__(/*! lodash/castArray */ \"./node_modules/lodash/castArray.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 _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _ = __webpack_require__(/*! . */ \"./src/Navbar/index.tsx\");\nvar _Disclosure = _interopRequireDefault(__webpack_require__(/*! ../internals/Disclosure/Disclosure */ \"./src/internals/Disclosure/Disclosure.tsx\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _NavbarDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./NavbarDropdownToggle */ \"./src/Navbar/NavbarDropdownToggle.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Navbar/NavbarDropdown.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 NavbarDropdown = /*#__PURE__*/_react.default.forwardRef(function NavbarDropdown(props, ref) {\n  const navbar = (0, _react.useContext)(_.NavbarContext);\n  if (!navbar) {\n    throw new Error('<Navbar.Dropdown> should be used within a <Navbar> component.');\n  }\n  const {\n    as: Component = 'div',\n    title,\n    onClose,\n    onOpen,\n    onToggle,\n    trigger = 'click',\n    placement = 'bottomStart',\n    toggleAs,\n    toggleClassName,\n    classPrefix = 'dropdown',\n    className,\n    disabled,\n    children,\n    menuStyle,\n    style,\n    ...toggleProps\n  } = props;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    withClassPrefix: withMenuClassPrefix,\n    merge: mergeMenuClassName\n  } = (0, _hooks.useClassNames)('dropdown-menu');\n  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {\n    trigger: (0, _castArray.default)(trigger),\n    hideOnClickOutside: true,\n    onToggle: open => {\n      onToggle === null || onToggle === void 0 || onToggle(open);\n      if (open) {\n        onOpen === null || onOpen === void 0 || onOpen();\n      } else {\n        onClose === null || onClose === void 0 || onClose();\n      }\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 122,\n      columnNumber: 7\n    }\n  }, (_ref, containerRef) => {\n    let {\n      open,\n      ...props\n    } = _ref;\n    const classes = merge(className, withClassPrefix({\n      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,\n      disabled,\n      open\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, containerRef),\n      className: classes,\n      style: style\n    }, props, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 144,\n        columnNumber: 13\n      }\n    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 150,\n        columnNumber: 15\n      }\n    }, (buttonProps, buttonRef) => /*#__PURE__*/_react.default.createElement(_NavbarDropdownToggle.default, (0, _extends2.default)({\n      ref: buttonRef,\n      as: toggleAs,\n      className: toggleClassName,\n      placement: placement,\n      disabled: disabled\n    }, (0, _omit.default)(buttonProps, ['open']), toggleProps, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 152,\n        columnNumber: 19\n      }\n    }), title)), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 165,\n        columnNumber: 15\n      }\n    }, (_ref2, elementRef) => {\n      let {\n        open\n      } = _ref2;\n      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());\n      return /*#__PURE__*/_react.default.createElement(\"ul\", {\n        ref: elementRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open,\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 169,\n          columnNumber: 21\n        }\n      }, children);\n    }));\n  });\n});\nNavbarDropdown.Item = _NavDropdownItem.default;\nNavbarDropdown.Menu = _NavDropdownMenu.default;\nNavbarDropdown.displayName = 'Navbar.Dropdown';\nvar _default = exports[\"default\"] = NavbarDropdown;\n\n//# sourceURL=webpack://rsuite/./src/Navbar/NavbarDropdown.tsx?");
 
 /***/ }),
 
@@ -4679,7 +4679,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 _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __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 = /*#__PURE__*/_react.default.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: Component = 'div',\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    withClassPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)('RangeSlider');\n  const classes = merge(className, withClassPrefix({\n    vertical,\n    disabled,\n    graduated,\n    'with-mark': renderMark\n  }));\n  const max = (0, _react.useMemo)(() => (0, _utils.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, _utils.checkValue)(value[0], min, max), (0, _utils.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, _utils.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, _utils.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, _utils.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    var _event$target;\n    const {\n      key\n    } = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$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(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 342,\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: 343,\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: 345,\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: 353,\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: 363,\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: 367,\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 _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __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 = /*#__PURE__*/_react.default.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: Component = 'div',\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    withClassPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)('RangeSlider');\n  const classes = merge(className, withClassPrefix({\n    vertical,\n    disabled,\n    graduated,\n    'with-mark': renderMark\n  }));\n  const max = (0, _react.useMemo)(() => (0, _utils.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, _utils.checkValue)(value[0], min, max), (0, _utils.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, _utils.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, _utils.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, _utils.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(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 343,\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: 344,\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: 346,\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: 354,\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: 364,\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: 368,\n      columnNumber: 7\n    }\n  }), handleTitle));\n});\nRangeSlider.displayName = 'RangeSlider';\nvar _default = exports[\"default\"] = RangeSlider;\n\n//# sourceURL=webpack://rsuite/./src/RangeSlider/RangeSlider.tsx?");
 
 /***/ }),
 
@@ -4701,7 +4701,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 _isNil2 = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Rate/Character.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 characterStatus = {\n  [0]: 'empty',\n  [0.5]: 'half',\n  [1]: 'full'\n};\nconst getKey = (a, b) => (0, _contains.default)(a, b) ? 'before' : 'after';\nconst Character = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    as: Component = 'li',\n    classPrefix = 'rate-character',\n    className,\n    children,\n    vertical,\n    status,\n    disabled,\n    onClick,\n    onKeyDown,\n    onMouseMove,\n    ...rest\n  } = props;\n  const {\n    merge,\n    prefix,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const beforeRef = (0, _react.useRef)(null);\n  const classes = merge(className, withClassPrefix(!(0, _isNil2.default)(status) && characterStatus[status]));\n  const handleMouseMove = (0, _react.useCallback)(event => {\n    onMouseMove === null || onMouseMove === void 0 || onMouseMove(getKey(beforeRef.current, event.target), event);\n  }, [onMouseMove]);\n  const handleClick = (0, _react.useCallback)(event => {\n    onClick === null || onClick === void 0 || onClick(getKey(beforeRef.current, event.target), event);\n  }, [onClick]);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    tabIndex: 0,\n    onClick: disabled ? null : handleClick,\n    onKeyDown: disabled ? null : onKeyDown,\n    onMouseMove: disabled ? null : handleMouseMove,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 59,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: beforeRef,\n    className: prefix('before', {\n      vertical\n    }),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 68,\n      columnNumber: 9\n    }\n  }, children), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('after'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 71,\n      columnNumber: 9\n    }\n  }, children));\n});\nCharacter.displayName = 'Character';\nvar _default = exports[\"default\"] = Character;\n\n//# sourceURL=webpack://rsuite/./src/Rate/Character.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 _contains = _interopRequireDefault(__webpack_require__(/*! dom-lib/contains */ \"./node_modules/dom-lib/esm/contains.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Rate/Character.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 characterStatus = {\n  [0]: 'empty',\n  [0.5]: 'half',\n  [1]: 'full'\n};\nconst getKey = (a, b) => (0, _contains.default)(a, b) ? 'before' : 'after';\nconst Character = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    as: Component = 'li',\n    classPrefix = 'rate-character',\n    className,\n    children,\n    vertical,\n    status,\n    disabled,\n    onClick,\n    onKeyDown,\n    onMouseMove,\n    ...rest\n  } = props;\n  const {\n    merge,\n    prefix,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const beforeRef = (0, _react.useRef)(null);\n  const classes = merge(className, withClassPrefix(!(0, _isNil.default)(status) && characterStatus[status]));\n  const handleMouseMove = (0, _hooks.useEventCallback)(event => {\n    onMouseMove === null || onMouseMove === void 0 || onMouseMove(getKey(beforeRef.current, event.target), event);\n  });\n  const handleClick = (0, _hooks.useEventCallback)(event => {\n    onClick === null || onClick === void 0 || onClick(getKey(beforeRef.current, event.target), event);\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    tabIndex: 0,\n    onClick: disabled ? null : handleClick,\n    onKeyDown: disabled ? null : onKeyDown,\n    onMouseMove: disabled ? null : handleMouseMove,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 53,\n      columnNumber: 7\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: beforeRef,\n    className: prefix('before', {\n      vertical\n    }),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 62,\n      columnNumber: 9\n    }\n  }, children), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('after'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 9\n    }\n  }, children));\n});\nCharacter.displayName = 'Character';\nvar _default = exports[\"default\"] = Character;\n\n//# sourceURL=webpack://rsuite/./src/Rate/Character.tsx?");
 
 /***/ }),
 
@@ -4712,7 +4712,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 _Star = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Star */ \"./node_modules/@rsuite/icons/esm/react/Star.js\"));\nvar _Character = _interopRequireDefault(__webpack_require__(/*! ./Character */ \"./src/Rate/Character.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\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/Rate/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Rate/Rate.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 `Rate` component is used for rating. It can be used to evaluate the quality of the content.\n * @see https://rsuitejs.com/components/rate/\n */\nconst Rate = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Rate', props);\n  const {\n    as: Component = 'ul',\n    character = /*#__PURE__*/_react.default.createElement(_Star.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 59,\n        columnNumber: 19\n      }\n    }),\n    className,\n    classPrefix = 'rate',\n    disabled,\n    max = 5,\n    readOnly,\n    vertical,\n    size = 'md',\n    color,\n    allowHalf = false,\n    value: valueProp,\n    defaultValue = 0,\n    cleanable = true,\n    plaintext,\n    onChange,\n    renderCharacter,\n    onChangeActive,\n    ...rest\n  } = propsWithDefaults;\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n  const getCharacterMap = (0, _react.useCallback)(v => {\n    return (0, _utils2.transformValueToCharacterMap)(typeof v !== 'undefined' ? v : value, max, allowHalf);\n  }, [allowHalf, max, value]);\n  const [characterMap, setCharacterMap] = (0, _react.useState)(getCharacterMap());\n  const hoverValue = (0, _utils2.transformCharacterMapToValue)(characterMap);\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(size, color, {\n    disabled,\n    readonly: readOnly\n  }));\n  const resetCharacterMap = (0, _react.useCallback)(() => {\n    setCharacterMap(getCharacterMap());\n  }, [getCharacterMap]);\n  (0, _react.useEffect)(() => {\n    // Update characterMap when value is updated.\n    setCharacterMap(getCharacterMap(valueProp));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueProp]);\n  const handleMouseLeave = (0, _react.useCallback)(event => {\n    resetCharacterMap();\n    onChangeActive === null || onChangeActive === void 0 || onChangeActive(value, event);\n  }, [onChangeActive, resetCharacterMap, value]);\n  const handleChangeValue = (0, _react.useCallback)((index, event) => {\n    let nextValue = (0, _utils2.transformCharacterMapToValue)(characterMap);\n    if (cleanable && value === nextValue && getCharacterMap(value)[index] === characterMap[index]) {\n      nextValue = 0;\n    }\n    if (nextValue !== value) {\n      setValue(nextValue);\n      setCharacterMap(getCharacterMap(nextValue));\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n  }, [characterMap, cleanable, getCharacterMap, onChange, setValue, value]);\n  const handleKeyDown = (0, _react.useCallback)((index, event) => {\n    const {\n      key\n    } = event;\n    let nextValue = (0, _utils2.transformCharacterMapToValue)(characterMap);\n    if (key === _constants.KEY_VALUES.RIGHT && nextValue < max) {\n      nextValue = allowHalf ? nextValue + 0.5 : nextValue + 1;\n    } else if (key === _constants.KEY_VALUES.LEFT && nextValue > 0) {\n      nextValue = allowHalf ? nextValue - 0.5 : nextValue - 1;\n    }\n    setCharacterMap(getCharacterMap(nextValue));\n    if (key === _constants.KEY_VALUES.ENTER) {\n      handleChangeValue(index, event);\n    }\n  }, [allowHalf, characterMap, getCharacterMap, handleChangeValue, max]);\n  const handleChangeCharacterMap = (0, _react.useCallback)((index, key, event) => {\n    const nextCharacterMap = characterMap.map((_item, i) => {\n      if (i === index && key === 'before' && allowHalf) {\n        return 0.5;\n      }\n      return index >= i ? 1 : 0;\n    });\n    if (!(0, _utils.shallowEqualArray)(characterMap, nextCharacterMap)) {\n      setCharacterMap(nextCharacterMap);\n      onChangeActive === null || onChangeActive === void 0 || onChangeActive((0, _utils2.transformCharacterMapToValue)(nextCharacterMap), event);\n    }\n  }, [allowHalf, characterMap, onChangeActive]);\n  const handleClick = (0, _react.useCallback)((index, key, event) => {\n    handleChangeCharacterMap(index, key, event);\n    handleChangeValue(index, event);\n  }, [handleChangeCharacterMap, handleChangeValue]);\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notSelected\",\n      className: className,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 183,\n        columnNumber: 9\n      }\n    }, !(0, _isNil.default)(value) ? `${value}(${max})` : null);\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"radiogroup\",\n    tabIndex: 0\n  }, rest, {\n    ref: ref,\n    className: classes,\n    onMouseLeave: handleMouseLeave,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 190,\n      columnNumber: 7\n    }\n  }), characterMap.map((item, index) => /*#__PURE__*/_react.default.createElement(_Character.default, {\n    role: \"radio\",\n    \"aria-posinset\": index + 1,\n    \"aria-setsize\": max,\n    \"aria-checked\": value === index + 1,\n    key: index,\n    status: item,\n    disabled: disabled || readOnly,\n    vertical: vertical,\n    onClick: (key, event) => handleClick(index, key, event),\n    onKeyDown: event => handleKeyDown(index, event),\n    onMouseMove: (key, event) => handleChangeCharacterMap(index, key, event),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 199,\n      columnNumber: 11\n    }\n  }, renderCharacter ? renderCharacter(hoverValue, index) : character)));\n});\nRate.displayName = 'Rate';\nvar _default = exports[\"default\"] = Rate;\n\n//# sourceURL=webpack://rsuite/./src/Rate/Rate.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 _Star = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/Star */ \"./node_modules/@rsuite/icons/esm/react/Star.js\"));\nvar _Character = _interopRequireDefault(__webpack_require__(/*! ./Character */ \"./src/Rate/Character.tsx\"));\nvar _Plaintext = _interopRequireDefault(__webpack_require__(/*! ../internals/Plaintext */ \"./src/internals/Plaintext/index.tsx\"));\nvar _constants = __webpack_require__(/*! ../internals/constants */ \"./src/internals/constants/index.ts\");\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/Rate/utils.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Rate/Rate.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 `Rate` component is used for rating. It can be used to evaluate the quality of the content.\n * @see https://rsuitejs.com/components/rate/\n */\nconst Rate = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Rate', props);\n  const {\n    as: Component = 'ul',\n    character = /*#__PURE__*/_react.default.createElement(_Star.default, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 65,\n        columnNumber: 19\n      }\n    }),\n    className,\n    classPrefix = 'rate',\n    disabled,\n    max = 5,\n    readOnly,\n    vertical,\n    size = 'md',\n    color,\n    allowHalf = false,\n    value: valueProp,\n    defaultValue = 0,\n    cleanable = true,\n    plaintext,\n    style,\n    onChange,\n    renderCharacter,\n    onChangeActive,\n    ...rest\n  } = propsWithDefaults;\n  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);\n  const getCharacterMap = (0, _react.useCallback)(v => {\n    return (0, _utils2.transformValueToCharacterMap)(typeof v !== 'undefined' ? v : value, max, allowHalf);\n  }, [allowHalf, max, value]);\n  const [characterMap, setCharacterMap] = (0, _react.useState)(getCharacterMap());\n  const hoverValue = (0, _utils2.transformCharacterMapToValue)(characterMap);\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(size, (0, _utils.isPresetColor)(color) && color, {\n    disabled,\n    readonly: readOnly\n  }));\n  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-rate-symbol-checked')), [style, color]);\n  const resetCharacterMap = (0, _react.useCallback)(() => {\n    setCharacterMap(getCharacterMap());\n  }, [getCharacterMap]);\n  (0, _react.useEffect)(() => {\n    // Update characterMap when value is updated.\n    setCharacterMap(getCharacterMap(valueProp));\n  }, [valueProp]);\n  const handleMouseLeave = (0, _hooks.useEventCallback)(event => {\n    resetCharacterMap();\n    onChangeActive === null || onChangeActive === void 0 || onChangeActive(value, event);\n  });\n  const handleChangeValue = (0, _hooks.useEventCallback)((index, event) => {\n    let nextValue = (0, _utils2.transformCharacterMapToValue)(characterMap);\n    if (cleanable && value === nextValue && getCharacterMap(value)[index] === characterMap[index]) {\n      nextValue = 0;\n    }\n    if (nextValue !== value) {\n      setValue(nextValue);\n      setCharacterMap(getCharacterMap(nextValue));\n      onChange === null || onChange === void 0 || onChange(nextValue, event);\n    }\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)((index, event) => {\n    const {\n      key\n    } = event;\n    let nextValue = (0, _utils2.transformCharacterMapToValue)(characterMap);\n    if (key === _constants.KEY_VALUES.RIGHT && nextValue < max) {\n      nextValue = allowHalf ? nextValue + 0.5 : nextValue + 1;\n    } else if (key === _constants.KEY_VALUES.LEFT && nextValue > 0) {\n      nextValue = allowHalf ? nextValue - 0.5 : nextValue - 1;\n    }\n    setCharacterMap(getCharacterMap(nextValue));\n    if (key === _constants.KEY_VALUES.ENTER) {\n      handleChangeValue(index, event);\n    }\n  });\n  const handleChangeCharacterMap = (0, _hooks.useEventCallback)((index, key, event) => {\n    const nextCharacterMap = characterMap.map((_item, i) => {\n      if (i === index && key === 'before' && allowHalf) {\n        return 0.5;\n      }\n      return index >= i ? 1 : 0;\n    });\n    if (!(0, _utils.shallowEqualArray)(characterMap, nextCharacterMap)) {\n      setCharacterMap(nextCharacterMap);\n      onChangeActive === null || onChangeActive === void 0 || onChangeActive((0, _utils2.transformCharacterMapToValue)(nextCharacterMap), event);\n    }\n  });\n  const handleClick = (0, _hooks.useEventCallback)((index, key, event) => {\n    handleChangeCharacterMap(index, key, event);\n    handleChangeValue(index, event);\n  });\n  if (plaintext) {\n    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {\n      localeKey: \"notSelected\",\n      className: className,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 181,\n        columnNumber: 9\n      }\n    }, !(0, _isNil.default)(value) ? `${value}(${max})` : null);\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    role: \"radiogroup\",\n    tabIndex: 0,\n    ref: ref,\n    className: classes,\n    style: styles,\n    onMouseLeave: handleMouseLeave\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 188,\n      columnNumber: 7\n    }\n  }), characterMap.map((item, index) => /*#__PURE__*/_react.default.createElement(_Character.default, {\n    role: \"radio\",\n    \"aria-posinset\": index + 1,\n    \"aria-setsize\": max,\n    \"aria-checked\": value === index + 1,\n    key: index,\n    status: item,\n    disabled: disabled || readOnly,\n    vertical: vertical,\n    onClick: (key, event) => handleClick(index, key, event),\n    onKeyDown: event => handleKeyDown(index, event),\n    onMouseMove: (key, event) => handleChangeCharacterMap(index, key, event),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 198,\n      columnNumber: 11\n    }\n  }, renderCharacter ? renderCharacter(hoverValue, index) : character)));\n});\nRate.displayName = 'Rate';\nvar _default = exports[\"default\"] = Rate;\n\n//# sourceURL=webpack://rsuite/./src/Rate/Rate.tsx?");
 
 /***/ }),
 
@@ -4888,7 +4888,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\"] = exports.SidenavContext = 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 _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _Transition = _interopRequireDefault(__webpack_require__(/*! ../Animation/Transition */ \"./src/Animation/Transition.tsx\"));\nvar _SidenavBody = _interopRequireDefault(__webpack_require__(/*! ./SidenavBody */ \"./src/Sidenav/SidenavBody.tsx\"));\nvar _SidenavHeader = _interopRequireDefault(__webpack_require__(/*! ./SidenavHeader */ \"./src/Sidenav/SidenavHeader.tsx\"));\nvar _SidenavToggle = _interopRequireDefault(__webpack_require__(/*! ./SidenavToggle */ \"./src/Sidenav/SidenavToggle.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/Sidenav/Sidenav.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 SidenavContext = exports.SidenavContext = /*#__PURE__*/_react.default.createContext(null);\nconst emptyArray = [];\n\n/**\n * The `Sidenav` component is an encapsulation of the page sidebar `Nav`.\n * @see https://rsuitejs.com/components/sidenav/\n */\nconst Sidenav = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Sidenav', props);\n  const {\n    as: Component = 'nav',\n    className,\n    classPrefix = 'sidenav',\n    appearance = 'default',\n    expanded = true,\n    activeKey,\n    defaultOpenKeys = emptyArray,\n    openKeys: openKeysProp,\n    onSelect,\n    onOpenChange,\n    ...rest\n  } = propsWithDefaults;\n  const [openKeys, setOpenKeys] = (0, _hooks.useControlled)(openKeysProp, defaultOpenKeys);\n  const {\n    prefix,\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(appearance));\n  const handleOpenChange = (0, _react.useCallback)((eventKey, event) => {\n    const find = key => (0, _utils.shallowEqual)(key, eventKey);\n    const nextOpenKeys = [...openKeys];\n    if (nextOpenKeys.some(find)) {\n      (0, _remove.default)(nextOpenKeys, find);\n    } else {\n      nextOpenKeys.push(eventKey);\n    }\n    setOpenKeys(nextOpenKeys);\n    onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpenKeys, event);\n  }, [onOpenChange, openKeys, setOpenKeys]);\n  const contextValue = (0, _react.useMemo)(() => ({\n    expanded,\n    activeKey,\n    sidenav: true,\n    openKeys: openKeys !== null && openKeys !== void 0 ? openKeys : [],\n    onOpenChange: handleOpenChange,\n    onSelect\n  }), [activeKey, expanded, handleOpenChange, onSelect, openKeys]);\n  return /*#__PURE__*/_react.default.createElement(SidenavContext.Provider, {\n    value: contextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 120,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Transition.default, {\n    in: expanded,\n    timeout: 300,\n    exitedClassName: prefix('collapse-out'),\n    exitingClassName: prefix('collapse-out', 'collapsing'),\n    enteredClassName: prefix('collapse-in'),\n    enteringClassName: prefix('collapse-in', 'collapsing'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 121,\n      columnNumber: 7\n    }\n  }, (transitionProps, transitionRef) => {\n    const {\n      className,\n      ...transitionRest\n    } = transitionProps;\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, transitionRest, {\n      ref: (0, _utils.mergeRefs)(ref, transitionRef),\n      className: merge(classes, className),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 132,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\nSidenav.Header = _SidenavHeader.default;\nSidenav.Body = _SidenavBody.default;\nSidenav.Toggle = _SidenavToggle.default;\nSidenav.displayName = 'Sidenav';\nvar _default = exports[\"default\"] = Sidenav;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/Sidenav.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = exports.SidenavContext = 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 _remove = _interopRequireDefault(__webpack_require__(/*! lodash/remove */ \"./node_modules/lodash/remove.js\"));\nvar _Transition = _interopRequireDefault(__webpack_require__(/*! ../Animation/Transition */ \"./src/Animation/Transition.tsx\"));\nvar _SidenavBody = _interopRequireDefault(__webpack_require__(/*! ./SidenavBody */ \"./src/Sidenav/SidenavBody.tsx\"));\nvar _SidenavHeader = _interopRequireDefault(__webpack_require__(/*! ./SidenavHeader */ \"./src/Sidenav/SidenavHeader.tsx\"));\nvar _SidenavToggle = _interopRequireDefault(__webpack_require__(/*! ./SidenavToggle */ \"./src/Sidenav/SidenavToggle.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/Sidenav/Sidenav.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 SidenavContext = exports.SidenavContext = /*#__PURE__*/_react.default.createContext(null);\nconst emptyArray = [];\n\n/**\n * The `Sidenav` component is an encapsulation of the page sidebar `Nav`.\n * @see https://rsuitejs.com/components/sidenav/\n */\nconst Sidenav = /*#__PURE__*/_react.default.forwardRef(function Sidenav(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Sidenav', props);\n  const {\n    as: Component = 'nav',\n    className,\n    classPrefix = 'sidenav',\n    appearance = 'default',\n    expanded = true,\n    activeKey,\n    defaultOpenKeys = emptyArray,\n    openKeys: openKeysProp,\n    onSelect,\n    onOpenChange,\n    ...rest\n  } = propsWithDefaults;\n  const [openKeys, setOpenKeys] = (0, _hooks.useControlled)(openKeysProp, defaultOpenKeys);\n  const {\n    prefix,\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(appearance));\n  const handleOpenChange = (0, _react.useCallback)((eventKey, event) => {\n    const find = key => (0, _utils.shallowEqual)(key, eventKey);\n    const nextOpenKeys = [...openKeys];\n    if (nextOpenKeys.some(find)) {\n      (0, _remove.default)(nextOpenKeys, find);\n    } else {\n      nextOpenKeys.push(eventKey);\n    }\n    setOpenKeys(nextOpenKeys);\n    onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpenKeys, event);\n  }, [onOpenChange, openKeys, setOpenKeys]);\n  const contextValue = (0, _react.useMemo)(() => ({\n    expanded,\n    activeKey,\n    sidenav: true,\n    openKeys: openKeys !== null && openKeys !== void 0 ? openKeys : [],\n    onOpenChange: handleOpenChange,\n    onSelect\n  }), [activeKey, expanded, handleOpenChange, onSelect, openKeys]);\n  return /*#__PURE__*/_react.default.createElement(SidenavContext.Provider, {\n    value: contextValue,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 120,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(_Transition.default, {\n    in: expanded,\n    timeout: 300,\n    exitedClassName: prefix('collapse-out'),\n    exitingClassName: prefix('collapse-out', 'collapsing'),\n    enteredClassName: prefix('collapse-in'),\n    enteringClassName: prefix('collapse-in', 'collapsing'),\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 121,\n      columnNumber: 7\n    }\n  }, (transitionProps, transitionRef) => {\n    const {\n      className,\n      ...transitionRest\n    } = transitionProps;\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, transitionRest, {\n      ref: (0, _utils.mergeRefs)(ref, transitionRef),\n      className: merge(classes, className),\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 132,\n        columnNumber: 13\n      }\n    }));\n  }));\n});\nSidenav.Header = _SidenavHeader.default;\nSidenav.Body = _SidenavBody.default;\nSidenav.Toggle = _SidenavToggle.default;\nSidenav.displayName = 'Sidenav';\nvar _default = exports[\"default\"] = Sidenav;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/Sidenav.tsx?");
 
 /***/ }),
 
@@ -4910,7 +4910,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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menu */ \"./src/internals/Menu/Menu.tsx\"));\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/MenuItem */ \"./src/internals/Menu/MenuItem.tsx\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _ExpandedSidenavDropdown = _interopRequireDefault(__webpack_require__(/*! ./ExpandedSidenavDropdown */ \"./src/Sidenav/ExpandedSidenavDropdown.tsx\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _SidenavDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./SidenavDropdownToggle */ \"./src/Sidenav/SidenavDropdownToggle.tsx\"));\nvar _NavMenu = __webpack_require__(/*! ../Nav/NavMenu */ \"./src/Nav/NavMenu.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Sidenav/SidenavDropdown.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 this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> within a <Sidenav>\n *\n * <Sidenav>\n *   <Nav>\n *     <Nav.Menu> -> This submenu will render <SidenavDropdown> component\n *     </Nav.Menu>\n *   </Nav>\n * </Sidenav>\n */\nconst SidenavDropdown = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  const nav = (0, _react.useContext)(_NavContext.default);\n  const navMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);\n  if (!sidenav || !nav || !navMenu) {\n    throw new Error('<Sidenav.Dropdown> must be rendered within a <Nav> component within a <Sidenav> component.');\n  }\n  const {\n    as: Component = 'div',\n    title,\n    onClose,\n    onOpen,\n    onToggle,\n    eventKey,\n    trigger = 'click',\n    placement = 'bottomStart',\n    toggleAs,\n    toggleClassName,\n    classPrefix = 'dropdown',\n    className,\n    disabled,\n    children,\n    menuStyle,\n    style,\n    ...toggleProps\n  } = props;\n  const {\n    merge,\n    withClassPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    withClassPrefix: withMenuClassPrefix,\n    merge: mergeMenuClassName\n  } = (0, _hooks.useClassNames)('dropdown-menu');\n  const {\n    withClassPrefix: withNavItemClassPrefix,\n    merge: mergeNavItemClassNames\n  } = (0, _hooks.useClassNames)('nav-item');\n  const [{\n    items\n  }] = navMenu;\n  const hasSelectedItems =\n  // has items that is active indicated by <Nav activeKey>\n  nav.activeKey && items.some(item => item.eventKey === nav.activeKey) ||\n  // has items that is active indicated by <Nav.Item active>\n  items.some(item => item.active);\n  const menuButtonTriggers = (0, _react.useMemo)(() => {\n    if (!trigger) {\n      return undefined;\n    }\n    const triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n    return trigger.map(t => triggerMap[t]);\n  }, [trigger]);\n\n  // Render a disclosure when inside expanded <Sidenav>\n  if (sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_ExpandedSidenavDropdown.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 172,\n        columnNumber: 14\n      }\n    }));\n  }\n  const renderMenuButton = (menuButtonProps, buttonRef) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n    disabled: disabled,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 176,\n      columnNumber: 7\n    }\n  }, (_ref, menuitemRef) => {\n    let {\n      active,\n      ...menuitemProps\n    } = _ref;\n    return /*#__PURE__*/_react.default.createElement(_SidenavDropdownToggle.default, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),\n      as: toggleAs,\n      className: mergeNavItemClassNames(toggleClassName, withNavItemClassPrefix({\n        focus: active\n      }))\n    }, menuButtonProps, (0, _omit.default)(menuitemProps, ['onClick']), (0, _omit.default)(toggleProps, 'data-testid'), {\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 179,\n        columnNumber: 13\n      }\n    }), title);\n  });\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    menuButtonText: title,\n    renderMenuButton: renderMenuButton,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: (_ref2, popupRef) => {\n      let {\n        open,\n        ...popupProps\n      } = _ref2;\n      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix({}));\n      // When inside a collapsed <Sidenav>, render a header in menu\n      const showHeader = !!sidenav;\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 210,\n          columnNumber: 13\n        }\n      }), showHeader && /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('header'),\n        __self: void 0,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 217,\n          columnNumber: 30\n        }\n      }, title), children);\n    },\n    onToggleMenu: (open, event) => {\n      onToggle === null || onToggle === void 0 || onToggle(open, eventKey, event);\n      sidenav === null || sidenav === void 0 || sidenav.onOpenChange(eventKey, event);\n      if (open) {\n        onOpen === null || onOpen === void 0 || onOpen();\n      } else {\n        onClose === null || onClose === void 0 || onClose();\n      }\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 200,\n      columnNumber: 7\n    }\n  }, (_ref3, menuContainerRef) => {\n    let {\n      open,\n      ...menuContainer\n    } = _ref3;\n    const classes = merge(className, withClassPrefix({\n      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,\n      disabled,\n      open,\n      submenu: true,\n      'selected-within': hasSelectedItems\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 244,\n        columnNumber: 13\n      }\n    }));\n  });\n});\nSidenavDropdown.Item = _NavDropdownItem.default;\nSidenavDropdown.Menu = _NavDropdownMenu.default;\nSidenavDropdown.displayName = 'Sidenav.Dropdown';\nvar _default = exports[\"default\"] = SidenavDropdown;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdown.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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _pick = _interopRequireDefault(__webpack_require__(/*! lodash/pick */ \"./node_modules/lodash/pick.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _Sidenav = __webpack_require__(/*! ./Sidenav */ \"./src/Sidenav/Sidenav.tsx\");\nvar _Menu = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/Menu */ \"./src/internals/Menu/Menu.tsx\"));\nvar _MenuItem = _interopRequireDefault(__webpack_require__(/*! ../internals/Menu/MenuItem */ \"./src/internals/Menu/MenuItem.tsx\"));\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _ExpandedSidenavDropdown = _interopRequireDefault(__webpack_require__(/*! ./ExpandedSidenavDropdown */ \"./src/Sidenav/ExpandedSidenavDropdown.tsx\"));\nvar _NavContext = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavContext */ \"./src/Nav/NavContext.ts\"));\nvar _NavDropdownItem = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownItem */ \"./src/Nav/NavDropdownItem.tsx\"));\nvar _NavDropdownMenu = _interopRequireDefault(__webpack_require__(/*! ../Nav/NavDropdownMenu */ \"./src/Nav/NavDropdownMenu.tsx\"));\nvar _SidenavDropdownToggle = _interopRequireDefault(__webpack_require__(/*! ./SidenavDropdownToggle */ \"./src/Sidenav/SidenavDropdownToggle.tsx\"));\nvar _NavMenu = __webpack_require__(/*! ../Nav/NavMenu */ \"./src/Nav/NavMenu.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Sidenav/SidenavDropdown.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 this component is not supposed to be used directly\n *          Instead it's rendered by a <Nav.Menu> within a <Sidenav>\n *\n * <Sidenav>\n *   <Nav>\n *     <Nav.Menu> -> This submenu will render <SidenavDropdown> component\n *     </Nav.Menu>\n *   </Nav>\n * </Sidenav>\n */\nconst SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function SidenavDropdown(props, ref) {\n  const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);\n  const nav = (0, _react.useContext)(_NavContext.default);\n  const navMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);\n  if (!sidenav || !nav || !navMenu) {\n    throw new Error('<Sidenav.Dropdown> must be rendered within a <Nav> component within a <Sidenav> component.');\n  }\n  const {\n    as: Component = 'div',\n    title,\n    onClose,\n    onOpen,\n    onToggle,\n    eventKey,\n    trigger = 'click',\n    placement = 'bottomStart',\n    toggleAs,\n    toggleClassName,\n    classPrefix = 'dropdown',\n    className,\n    disabled,\n    children,\n    menuStyle,\n    style,\n    ...toggleProps\n  } = props;\n  const {\n    merge,\n    withClassPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const {\n    withClassPrefix: withMenuClassPrefix,\n    merge: mergeMenuClassName\n  } = (0, _hooks.useClassNames)('dropdown-menu');\n  const {\n    withClassPrefix: withNavItemClassPrefix,\n    merge: mergeNavItemClassNames\n  } = (0, _hooks.useClassNames)('nav-item');\n  const [{\n    items\n  }] = navMenu;\n  const hasSelectedItems =\n  // has items that is active indicated by <Nav activeKey>\n  nav.activeKey && items.some(item => item.eventKey === nav.activeKey) ||\n  // has items that is active indicated by <Nav.Item active>\n  items.some(item => item.active);\n  const menuButtonTriggers = (0, _react.useMemo)(() => {\n    if (!trigger) {\n      return undefined;\n    }\n    const triggerMap = {\n      hover: 'mouseover',\n      click: 'click',\n      contextMenu: 'contextmenu'\n    };\n    if (!Array.isArray(trigger)) {\n      return [triggerMap[trigger]];\n    }\n    return trigger.map(t => triggerMap[t]);\n  }, [trigger]);\n\n  // Render a disclosure when inside expanded <Sidenav>\n  if (sidenav.expanded) {\n    return /*#__PURE__*/_react.default.createElement(_ExpandedSidenavDropdown.default, (0, _extends2.default)({\n      ref: ref\n    }, props, {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 172,\n        columnNumber: 14\n      }\n    }));\n  }\n  const renderMenuButton = (menuButtonProps, buttonRef) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {\n    disabled: disabled,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 176,\n      columnNumber: 7\n    }\n  }, (_ref, menuitemRef) => {\n    let {\n      active,\n      ...menuitemProps\n    } = _ref;\n    return /*#__PURE__*/_react.default.createElement(_SidenavDropdownToggle.default, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),\n      as: toggleAs,\n      className: mergeNavItemClassNames(toggleClassName, withNavItemClassPrefix({\n        focus: active\n      }))\n    }, menuButtonProps, (0, _omit.default)(menuitemProps, ['onClick']), (0, _omit.default)(toggleProps, 'data-testid'), {\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 179,\n        columnNumber: 13\n      }\n    }), title);\n  });\n  return /*#__PURE__*/_react.default.createElement(_Menu.default, {\n    menuButtonText: title,\n    renderMenuButton: renderMenuButton,\n    openMenuOn: menuButtonTriggers,\n    renderMenuPopup: (_ref2, popupRef) => {\n      let {\n        open,\n        ...popupProps\n      } = _ref2;\n      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix({}));\n      // When inside a collapsed <Sidenav>, render a header in menu\n      const showHeader = !!sidenav;\n      return /*#__PURE__*/_react.default.createElement(\"ul\", (0, _extends2.default)({\n        ref: popupRef,\n        className: menuClassName,\n        style: menuStyle,\n        hidden: !open\n      }, popupProps, {\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 210,\n          columnNumber: 13\n        }\n      }), showHeader && /*#__PURE__*/_react.default.createElement(\"div\", {\n        className: prefix('header'),\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 217,\n          columnNumber: 30\n        }\n      }, title), children);\n    },\n    onToggleMenu: (open, event) => {\n      onToggle === null || onToggle === void 0 || onToggle(open, eventKey, event);\n      sidenav === null || sidenav === void 0 || sidenav.onOpenChange(eventKey, event);\n      if (open) {\n        onOpen === null || onOpen === void 0 || onOpen();\n      } else {\n        onClose === null || onClose === void 0 || onClose();\n      }\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 200,\n      columnNumber: 7\n    }\n  }, (_ref3, menuContainerRef) => {\n    let {\n      open,\n      ...menuContainer\n    } = _ref3;\n    const classes = merge(className, withClassPrefix({\n      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,\n      disabled,\n      open,\n      submenu: true,\n      'selected-within': hasSelectedItems\n    }));\n    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n      ref: (0, _utils.mergeRefs)(ref, menuContainerRef),\n      className: classes\n    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {\n      style: style,\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 244,\n        columnNumber: 13\n      }\n    }));\n  });\n});\nSidenavDropdown.Item = _NavDropdownItem.default;\nSidenavDropdown.Menu = _NavDropdownMenu.default;\nSidenavDropdown.displayName = 'Sidenav.Dropdown';\nvar _default = exports[\"default\"] = SidenavDropdown;\n\n//# sourceURL=webpack://rsuite/./src/Sidenav/SidenavDropdown.tsx?");
 
 /***/ }),
 
@@ -5108,7 +5108,7 @@ eval("\n\nexports.__esModule = true;\nexports.checkValue = checkValue;\nexports.
 /***/ (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 _Stack = _interopRequireDefault(__webpack_require__(/*! ./Stack */ \"./src/Stack/Stack.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Stack/HStack.tsx\";\nconst HStack = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    reverse,\n    spacing = 6,\n    childrenRenderMode = 'clone',\n    ...rest\n  } = props;\n  const direction = reverse ? 'row-reverse' : 'row';\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    spacing: spacing,\n    childrenRenderMode: childrenRenderMode\n  }, rest, {\n    direction: direction,\n    ref: ref,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 21,\n      columnNumber: 5\n    }\n  }));\n});\nHStack.displayName = 'HStack';\nHStack.Item = _Stack.default.Item;\nvar _default = exports[\"default\"] = HStack;\n\n//# sourceURL=webpack://rsuite/./src/Stack/HStack.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 _Stack = _interopRequireDefault(__webpack_require__(/*! ./Stack */ \"./src/Stack/Stack.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Stack/HStack.tsx\";\nconst HStack = /*#__PURE__*/_react.default.forwardRef(function HStack(props, ref) {\n  const {\n    reverse,\n    spacing = 6,\n    childrenRenderMode = 'clone',\n    ...rest\n  } = props;\n  const direction = reverse ? 'row-reverse' : 'row';\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    spacing: spacing,\n    childrenRenderMode: childrenRenderMode\n  }, rest, {\n    direction: direction,\n    ref: ref,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 21,\n      columnNumber: 5\n    }\n  }));\n});\nHStack.displayName = 'HStack';\nHStack.Item = _Stack.default.Item;\nvar _default = exports[\"default\"] = HStack;\n\n//# sourceURL=webpack://rsuite/./src/Stack/HStack.tsx?");
 
 /***/ }),
 
@@ -5119,7 +5119,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 _StackItem = _interopRequireDefault(__webpack_require__(/*! ./StackItem */ \"./src/Stack/StackItem.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/Stack/Stack.tsx\";\nfunction isStackItem(child) {\n  var _child$type;\n  return child.type === _StackItem.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'StackItem';\n}\n\n/**\n * The `Stack` component is a quick layout component through Flexbox,\n * supporting vertical and horizontal stacking, custom spacing and line wrapping.\n *\n * @see https://rsuitejs.com/components/stack\n */\nconst Stack = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Stack', props);\n  const {\n    as: Component = 'div',\n    alignItems = 'center',\n    classPrefix = 'stack',\n    childrenRenderMode = 'wrap',\n    className,\n    children,\n    direction,\n    justifyContent,\n    spacing,\n    divider,\n    style,\n    wrap,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withClassPrefix,\n    merge,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix());\n  const styles = {\n    alignItems,\n    justifyContent,\n    flexDirection: direction,\n    flexWrap: wrap ? 'wrap' : undefined,\n    gap: spacing,\n    ...style\n  };\n\n  /*\n   * toArray remove undefined, null and boolean\n   */\n  const filterChildren = _react.default.Children.toArray(children);\n  const count = _utils.ReactChildren.count(filterChildren);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 97,\n      columnNumber: 5\n    }\n  }), _utils.ReactChildren.map(filterChildren, (child, index) => {\n    const childNode = childrenRenderMode === 'wrap' && !isStackItem(child) ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {\n      key: index,\n      className: prefix('item'),\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 101,\n        columnNumber: 13\n      }\n    }, child) : (/*#__PURE__*/_react.default.cloneElement(child, {\n      className: merge(prefix('item'), child.props.className)\n    }));\n    return [childNode, index < count - 1 ? divider : null];\n  }));\n});\nStack.Item = _StackItem.default;\nStack.displayName = 'Stack';\nvar _default = exports[\"default\"] = Stack;\n\n//# sourceURL=webpack://rsuite/./src/Stack/Stack.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 _StackItem = _interopRequireDefault(__webpack_require__(/*! ./StackItem */ \"./src/Stack/StackItem.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/Stack/Stack.tsx\";\nfunction isStackItem(child) {\n  var _child$type;\n  return child.type === _StackItem.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'StackItem';\n}\n\n/**\n * The `Stack` component is a quick layout component through Flexbox,\n * supporting vertical and horizontal stacking, custom spacing and line wrapping.\n *\n * @see https://rsuitejs.com/components/stack\n */\nconst Stack = /*#__PURE__*/_react.default.forwardRef(function Stack(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Stack', props);\n  const {\n    as: Component = 'div',\n    alignItems = 'center',\n    classPrefix = 'stack',\n    childrenRenderMode = 'wrap',\n    className,\n    children,\n    direction,\n    justifyContent,\n    spacing,\n    divider,\n    style,\n    wrap,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    withClassPrefix,\n    merge,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix());\n  const styles = {\n    alignItems,\n    justifyContent,\n    flexDirection: direction,\n    flexWrap: wrap ? 'wrap' : undefined,\n    gap: spacing,\n    ...style\n  };\n\n  /*\n   * toArray remove undefined, null and boolean\n   */\n  const filterChildren = _react.default.Children.toArray(children);\n  const count = _utils.ReactChildren.count(filterChildren);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    style: styles,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 97,\n      columnNumber: 5\n    }\n  }), _utils.ReactChildren.map(filterChildren, (child, index) => {\n    const childNode = childrenRenderMode === 'wrap' && !isStackItem(child) ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {\n      key: index,\n      className: prefix('item'),\n      __self: this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 101,\n        columnNumber: 13\n      }\n    }, child) : (/*#__PURE__*/_react.default.cloneElement(child, {\n      className: merge(prefix('item'), child.props.className)\n    }));\n    return [childNode, index < count - 1 ? divider : null];\n  }));\n});\nStack.Item = _StackItem.default;\nStack.displayName = 'Stack';\nvar _default = exports[\"default\"] = Stack;\n\n//# sourceURL=webpack://rsuite/./src/Stack/Stack.tsx?");
 
 /***/ }),
 
@@ -5141,7 +5141,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 _Stack = _interopRequireDefault(__webpack_require__(/*! ./Stack */ \"./src/Stack/Stack.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Stack/VStack.tsx\";\nconst VStack = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    reverse,\n    spacing = 6,\n    alignItems = 'flex-start',\n    childrenRenderMode = 'clone',\n    ...rest\n  } = props;\n  const direction = reverse ? 'column-reverse' : 'column';\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    spacing: spacing,\n    childrenRenderMode: childrenRenderMode,\n    alignItems: alignItems\n  }, rest, {\n    direction: direction,\n    ref: ref,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 25,\n      columnNumber: 5\n    }\n  }));\n});\nVStack.displayName = 'VStack';\nVStack.Item = _Stack.default.Item;\nvar _default = exports[\"default\"] = VStack;\n\n//# sourceURL=webpack://rsuite/./src/Stack/VStack.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 _Stack = _interopRequireDefault(__webpack_require__(/*! ./Stack */ \"./src/Stack/Stack.tsx\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Stack/VStack.tsx\";\nconst VStack = /*#__PURE__*/_react.default.forwardRef(function VStack(props, ref) {\n  const {\n    reverse,\n    spacing = 6,\n    alignItems = 'flex-start',\n    childrenRenderMode = 'clone',\n    ...rest\n  } = props;\n  const direction = reverse ? 'column-reverse' : 'column';\n  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({\n    spacing: spacing,\n    childrenRenderMode: childrenRenderMode,\n    alignItems: alignItems\n  }, rest, {\n    direction: direction,\n    ref: ref,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 25,\n      columnNumber: 5\n    }\n  }));\n});\nVStack.displayName = 'VStack';\nVStack.Item = _Stack.default.Item;\nvar _default = exports[\"default\"] = VStack;\n\n//# sourceURL=webpack://rsuite/./src/Stack/VStack.tsx?");
 
 /***/ }),
 
@@ -5163,7 +5163,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 _StatLabel = _interopRequireDefault(__webpack_require__(/*! ./StatLabel */ \"./src/Stat/StatLabel.tsx\"));\nvar _StatValue = _interopRequireDefault(__webpack_require__(/*! ./StatValue */ \"./src/Stat/StatValue.tsx\"));\nvar _StatValueUnit = _interopRequireDefault(__webpack_require__(/*! ./StatValueUnit */ \"./src/Stat/StatValueUnit.tsx\"));\nvar _StatHelpText = _interopRequireDefault(__webpack_require__(/*! ./StatHelpText */ \"./src/Stat/StatHelpText.tsx\"));\nvar _StatTrend = _interopRequireDefault(__webpack_require__(/*! ./StatTrend */ \"./src/Stat/StatTrend.tsx\"));\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/Stat/Stat.tsx\";\nconst Stat = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Stat', props);\n  const {\n    as: Component = 'div',\n    classPrefix = 'stat',\n    className,\n    children,\n    bordered,\n    icon,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    prefix,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix({\n    bordered\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: classes,\n    ref: ref\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 46,\n      columnNumber: 5\n    }\n  }), icon && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('icon'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 47,\n      columnNumber: 16\n    }\n  }, icon), /*#__PURE__*/_react.default.createElement(\"dl\", {\n    className: prefix('body'),\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 48,\n      columnNumber: 7\n    }\n  }, children));\n});\nStat.displayName = 'Stat';\nStat.Label = _StatLabel.default;\nStat.Value = _StatValue.default;\nStat.Trend = _StatTrend.default;\nStat.ValueUnit = _StatValueUnit.default;\nStat.HelpText = _StatHelpText.default;\nvar _default = exports[\"default\"] = Stat;\n\n//# sourceURL=webpack://rsuite/./src/Stat/Stat.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 _StatLabel = _interopRequireDefault(__webpack_require__(/*! ./StatLabel */ \"./src/Stat/StatLabel.tsx\"));\nvar _StatValue = _interopRequireDefault(__webpack_require__(/*! ./StatValue */ \"./src/Stat/StatValue.tsx\"));\nvar _StatValueUnit = _interopRequireDefault(__webpack_require__(/*! ./StatValueUnit */ \"./src/Stat/StatValueUnit.tsx\"));\nvar _StatHelpText = _interopRequireDefault(__webpack_require__(/*! ./StatHelpText */ \"./src/Stat/StatHelpText.tsx\"));\nvar _StatTrend = _interopRequireDefault(__webpack_require__(/*! ./StatTrend */ \"./src/Stat/StatTrend.tsx\"));\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/Stat/Stat.tsx\";\nconst Stat = /*#__PURE__*/_react.default.forwardRef(function Stat(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Stat', props);\n  const {\n    as: Component = 'div',\n    classPrefix = 'stat',\n    className,\n    children,\n    bordered,\n    icon,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    prefix,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix({\n    bordered\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: classes,\n    ref: ref\n  }, rest, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 46,\n      columnNumber: 5\n    }\n  }), icon && /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix('icon'),\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 47,\n      columnNumber: 16\n    }\n  }, icon), /*#__PURE__*/_react.default.createElement(\"dl\", {\n    className: prefix('body'),\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 48,\n      columnNumber: 7\n    }\n  }, children));\n});\nStat.displayName = 'Stat';\nStat.Label = _StatLabel.default;\nStat.Value = _StatValue.default;\nStat.Trend = _StatTrend.default;\nStat.ValueUnit = _StatValueUnit.default;\nStat.HelpText = _StatHelpText.default;\nvar _default = exports[\"default\"] = Stat;\n\n//# sourceURL=webpack://rsuite/./src/Stat/Stat.tsx?");
 
 /***/ }),
 
@@ -5273,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 = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _StepItem = _interopRequireDefault(__webpack_require__(/*! ./StepItem */ \"./src/Steps/StepItem.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\";\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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Steps', props);\n  const {\n    as: Component = 'div',\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    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const horizontal = !vertical;\n  const classes = merge(className, withClassPrefix({\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(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 83,\n      columnNumber: 5\n    }\n  }), items);\n});\nSteps.Item = _StepItem.default;\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 _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\";\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 = /*#__PURE__*/_react.default.forwardRef(function Steps(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Steps', props);\n  const {\n    as: Component = 'div',\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    withClassPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const horizontal = !vertical;\n  const classes = merge(className, withClassPrefix({\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(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 83,\n      columnNumber: 5\n    }\n  }), items);\n});\nSteps.Item = _StepItem.default;\nSteps.displayName = 'Steps';\nvar _default = exports[\"default\"] = Steps;\n\n//# sourceURL=webpack://rsuite/./src/Steps/Steps.tsx?");
 
 /***/ }),
 
@@ -5295,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 _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _TableCell = _interopRequireDefault(__webpack_require__(/*! ./TableCell */ \"./src/Table/TableCell.tsx\"));\nvar _TableHeaderCell = _interopRequireDefault(__webpack_require__(/*! ./TableHeaderCell */ \"./src/Table/TableHeaderCell.tsx\"));\nvar _TableColumn = _interopRequireDefault(__webpack_require__(/*! ./TableColumn */ \"./src/Table/TableColumn.tsx\"));\nvar _TableColumnGroup = _interopRequireDefault(__webpack_require__(/*! ./TableColumnGroup */ \"./src/Table/TableColumnGroup.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _rsuiteTable = __webpack_require__(/*! rsuite-table */ \"./node_modules/rsuite-table/es/index.js\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Table/Table.tsx\";\nconst CustomTable = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults,\n    rtl,\n    getLocale\n  } = (0, _CustomProvider.useCustom)('Table', props);\n  const {\n    locale: overrideLocale,\n    loadAnimation = true,\n    ...rest\n  } = propsWithDefaults;\n  const locale = getLocale('Calendar', overrideLocale);\n  return /*#__PURE__*/_react.default.createElement(_rsuiteTable.Table, (0, _extends2.default)({}, rest, {\n    rtl: rtl,\n    ref: ref,\n    locale: locale,\n    loadAnimation: loadAnimation,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 30,\n      columnNumber: 10\n    }\n  }));\n});\n\n/**\n * The `Table` component is used to display data in a table.\n *\n * @see https://rsuitejs.com/components/table/\n */\nconst Table = Object.assign(CustomTable, {\n  /**\n   * The `Table.Cell` component  is used to display data in a table cell.\n   */\n  Cell: _TableCell.default,\n  /**\n   * The `Table.Column` component  is used to define a column in a table.\n   */\n  Column: _TableColumn.default,\n  /**\n   * The `Table.HeaderCell` component  is used to define a header cell in a table.\n   */\n  HeaderCell: _TableHeaderCell.default,\n  /**\n   * The `Table.ColumnGroup` component  is used to define a column group in a table.\n   */\n  ColumnGroup: _TableColumnGroup.default\n});\nvar _default = exports[\"default\"] = Table;\n\n//# sourceURL=webpack://rsuite/./src/Table/Table.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 _TableCell = _interopRequireDefault(__webpack_require__(/*! ./TableCell */ \"./src/Table/TableCell.tsx\"));\nvar _TableHeaderCell = _interopRequireDefault(__webpack_require__(/*! ./TableHeaderCell */ \"./src/Table/TableHeaderCell.tsx\"));\nvar _TableColumn = _interopRequireDefault(__webpack_require__(/*! ./TableColumn */ \"./src/Table/TableColumn.tsx\"));\nvar _TableColumnGroup = _interopRequireDefault(__webpack_require__(/*! ./TableColumnGroup */ \"./src/Table/TableColumnGroup.tsx\"));\nvar _CustomProvider = __webpack_require__(/*! ../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _rsuiteTable = __webpack_require__(/*! rsuite-table */ \"./node_modules/rsuite-table/es/index.js\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Table/Table.tsx\";\nconst CustomTable = /*#__PURE__*/_react.default.forwardRef(function Table(props, ref) {\n  const {\n    propsWithDefaults,\n    rtl,\n    getLocale\n  } = (0, _CustomProvider.useCustom)('Table', props);\n  const {\n    locale: overrideLocale,\n    loadAnimation = true,\n    ...rest\n  } = propsWithDefaults;\n  const locale = getLocale('common', overrideLocale);\n  return /*#__PURE__*/_react.default.createElement(_rsuiteTable.Table, (0, _extends2.default)({}, rest, {\n    rtl: rtl,\n    ref: ref,\n    locale: locale,\n    loadAnimation: loadAnimation,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 30,\n      columnNumber: 10\n    }\n  }));\n});\n\n/**\n * The `Table` component is used to display data in a table.\n *\n * @see https://rsuitejs.com/components/table/\n */\nconst Table = Object.assign(CustomTable, {\n  /**\n   * The `Table.Cell` component  is used to display data in a table cell.\n   */\n  Cell: _TableCell.default,\n  /**\n   * The `Table.Column` component  is used to define a column in a table.\n   */\n  Column: _TableColumn.default,\n  /**\n   * The `Table.HeaderCell` component  is used to define a header cell in a table.\n   */\n  HeaderCell: _TableHeaderCell.default,\n  /**\n   * The `Table.ColumnGroup` component  is used to define a column group in a table.\n   */\n  ColumnGroup: _TableColumnGroup.default\n});\nvar _default = exports[\"default\"] = Table;\n\n//# sourceURL=webpack://rsuite/./src/Table/Table.tsx?");
 
 /***/ }),
 
@@ -5383,7 +5383,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 _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/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: 122,\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: 143,\n        columnNumber: 7\n      }\n    }, title);\n  });\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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults,\n    rtl\n  } = (0, _CustomProvider.useCustom)('Tabs', props);\n  const {\n    as: Component = 'div',\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    withClassPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useClassNames)(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        const tabs = getFocusableTabs(tablistRef.current);\n        item = tabs[tabs.length - 1];\n        event.preventDefault();\n        break;\n    }\n    if (item) {\n      var _item;\n      const {\n        eventKey\n      } = (_item = item) === null || _item === void 0 ? void 0 : _item.dataset;\n      handleSelect(eventKey, event);\n      item.focus();\n    }\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: merge(className, withClassPrefix({\n      reversed,\n      vertical\n    }))\n  }, rest, {\n    ref: ref,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 243,\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: 248,\n      columnNumber: 7\n    }\n  }, renderTabs(children, {\n    id,\n    activeKey\n  })), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix`content`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 261,\n      columnNumber: 7\n    }\n  }, renderPanels(children, {\n    id,\n    activeKey\n  })));\n});\nTabs.Tab = _Tab.default;\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 _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/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: 122,\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: 143,\n        columnNumber: 7\n      }\n    }, title);\n  });\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 = /*#__PURE__*/_react.default.forwardRef(function Tabs(props, ref) {\n  const {\n    propsWithDefaults,\n    rtl\n  } = (0, _CustomProvider.useCustom)('Tabs', props);\n  const {\n    as: Component = 'div',\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    withClassPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useClassNames)(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  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    className: merge(className, withClassPrefix({\n      reversed,\n      vertical\n    }))\n  }, rest, {\n    ref: ref,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 247,\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: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 252,\n      columnNumber: 7\n    }\n  }, renderTabs(children, {\n    id,\n    activeKey\n  })), /*#__PURE__*/_react.default.createElement(\"div\", {\n    className: prefix`content`,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 265,\n      columnNumber: 7\n    }\n  }, renderPanels(children, {\n    id,\n    activeKey\n  })));\n});\nTabs.Tab = _Tab.default;\nTabs.displayName = 'Tabs';\nvar _default = exports[\"default\"] = Tabs;\n\n//# sourceURL=webpack://rsuite/./src/Tabs/Tabs.tsx?");
 
 /***/ }),
 
@@ -5405,7 +5405,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 _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../internals/CloseButton */ \"./src/internals/CloseButton/index.tsx\"));\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/Tag/Tag.tsx\";\n/**\n * The `Tag` component is used to label and categorize.\n * It can be used to mark the status of an object or classify it into different categories.\n *\n * @see https://rsuitejs.com/components/tag\n */\nconst Tag = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults,\n    getLocale\n  } = (0, _CustomProvider.useCustom)('Tag', props);\n  const {\n    as: Component = 'div',\n    classPrefix = 'tag',\n    size = 'md',\n    color = 'default',\n    children,\n    closable,\n    className,\n    locale: overrideLocale,\n    onClose,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    remove\n  } = getLocale('common', overrideLocale);\n  const {\n    withClassPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(size, color, {\n    closable\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 54,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix`text`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 55,\n      columnNumber: 7\n    }\n  }, children), closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n    className: prefix`icon-close`,\n    onClick: onClose,\n    tabIndex: -1,\n    locale: {\n      closeLabel: remove\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 57,\n      columnNumber: 9\n    }\n  }));\n});\nTag.displayName = 'Tag';\nvar _default = exports[\"default\"] = Tag;\n\n//# sourceURL=webpack://rsuite/./src/Tag/Tag.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 _CloseButton = _interopRequireDefault(__webpack_require__(/*! ../internals/CloseButton */ \"./src/internals/CloseButton/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/Tag/Tag.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 `Tag` component is used to label and categorize.\n * It can be used to mark the status of an object or classify it into different categories.\n *\n * @see https://rsuitejs.com/components/tag\n */\nconst Tag = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults,\n    getLocale\n  } = (0, _CustomProvider.useCustom)('Tag', props);\n  const {\n    as: Component = 'div',\n    classPrefix = 'tag',\n    size = 'md',\n    color,\n    children,\n    closable,\n    className,\n    locale: overrideLocale,\n    style,\n    onClose,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    remove\n  } = getLocale('common', overrideLocale);\n  const {\n    withClassPrefix,\n    prefix,\n    merge\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix(size, (0, _utils.isPresetColor)(color) && color, {\n    closable\n  }));\n  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-tag-bg', '--rs-tag-text')), [style, color]);\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: ref,\n    className: classes,\n    style: styles\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 64,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(\"span\", {\n    className: prefix`text`,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 7\n    }\n  }, children), closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {\n    className: prefix`icon-close`,\n    onClick: onClose,\n    tabIndex: -1,\n    locale: {\n      closeLabel: remove\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 67,\n      columnNumber: 9\n    }\n  }));\n});\nTag.displayName = 'Tag';\nvar _default = exports[\"default\"] = Tag;\n\n//# sourceURL=webpack://rsuite/./src/Tag/Tag.tsx?");
 
 /***/ }),
 
@@ -5537,7 +5537,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 _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\";\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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Timeline', props);\n  const {\n    children,\n    as: Component = 'ul',\n    classPrefix = 'timeline',\n    className,\n    align = 'left',\n    endless,\n    isItemActive = Timeline.ACTIVE_LAST,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(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, withClassPrefix(`align-${align}`, {\n    endless,\n    'with-time': withTime\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 63,\n      columnNumber: 5\n    }\n  }), _utils.ReactChildren.mapCloneElement(children, (_child, index) => ({\n    last: index + 1 === count,\n    INTERNAL_active: isItemActive(index, count),\n    align\n  })));\n});\nTimeline.ACTIVE_FIRST = index => index === 0;\nTimeline.ACTIVE_LAST = (index, totalItemsCount) => index === totalItemsCount - 1;\nTimeline.Item = _TimelineItem.default;\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 _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;\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 = /*#__PURE__*/_react.default.forwardRef(function Timeline(props, ref) {\n  const {\n    propsWithDefaults\n  } = (0, _CustomProvider.useCustom)('Timeline', props);\n  const {\n    children,\n    as: Component = 'ul',\n    classPrefix = 'timeline',\n    className,\n    align = 'left',\n    endless,\n    isItemActive = ACTIVE_LAST,\n    ...rest\n  } = propsWithDefaults;\n  const {\n    merge,\n    withClassPrefix\n  } = (0, _hooks.useClassNames)(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, withClassPrefix(`align-${align}`, {\n    endless,\n    'with-time': withTime\n  }));\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: ref,\n    className: classes,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 66,\n      columnNumber: 5\n    }\n  }), _utils.ReactChildren.mapCloneElement(children, (_child, index) => ({\n    last: index + 1 === count,\n    INTERNAL_active: isItemActive(index, count),\n    align\n  })));\n});\nTimeline.displayName = 'Timeline';\nTimeline.ACTIVE_FIRST = ACTIVE_FIRST;\nTimeline.ACTIVE_LAST = ACTIVE_LAST;\nTimeline.Item = _TimelineItem.default;\nvar _default = exports[\"default\"] = Timeline;\n\n//# sourceURL=webpack://rsuite/./src/Timeline/Timeline.tsx?");
 
 /***/ }),
 
@@ -5680,7 +5680,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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _utils = __webpack_require__(/*! ../../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../utils */ \"./src/Tree/utils/index.ts\");\nvar _useForceUpdate = _interopRequireDefault(__webpack_require__(/*! ./useForceUpdate */ \"./src/Tree/hooks/useForceUpdate.ts\"));\n/**\n * Custom hook that flattens a tree data structure into a map of nodes.\n *\n */\nfunction useFlattenTree(data, options) {\n  const {\n    value,\n    labelKey,\n    valueKey,\n    childrenKey,\n    uncheckableItemValues = [],\n    cascade,\n    multiple,\n    callback\n  } = options;\n  const forceUpdate = (0, _useForceUpdate.default)();\n  const flattenedNodes = (0, _react.useRef)({});\n  const updateTreeNodeCheckState = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n    // Reset values to false\n    Object.keys(flattenedNodes.current).forEach(refKey => {\n      const node = flattenedNodes.current[refKey];\n      if (cascade && !(0, _isNil.default)(node.parent) && !(0, _isNil.default)(node.parent.refKey)) {\n        node.check = flattenedNodes.current[node.parent.refKey].check;\n      } else {\n        node.check = false;\n      }\n      value.forEach(nodeVal => {\n        if ((0, _utils.shallowEqual)(flattenedNodes.current[refKey][valueKey], nodeVal) && !uncheckableItemValues.some(uncheckableValue => (0, _utils.shallowEqual)(nodeVal, uncheckableValue))) {\n          flattenedNodes.current[refKey].check = true;\n        }\n      });\n    });\n  }, [cascade, uncheckableItemValues, valueKey]);\n  const flattenTreeData = (0, _react.useCallback)(function (treeData, parent, layer) {\n    if (layer === void 0) {\n      layer = 1;\n    }\n    if (!Array.isArray(treeData) || treeData.length === 0) {\n      return [];\n    }\n    treeData.map(node => {\n      const value = node[valueKey];\n      /**\n       * because the value of the node's type is string or number,\n       * so it can used as the key of the object directly\n       * to avoid number value is converted to string. 1 and '1' will be convert to '1'\n       * we used `String_` or `Number_` prefix\n       */\n      const refKey = (0, _utils2.formatNodeRefKey)(value);\n      node.refKey = refKey;\n      flattenedNodes.current[refKey] = {\n        layer,\n        [labelKey]: node[labelKey],\n        [valueKey]: node[valueKey],\n        uncheckable: uncheckableItemValues.some(value => (0, _utils.shallowEqual)(node[valueKey], value)),\n        ...node\n      };\n      if (parent) {\n        flattenedNodes.current[refKey].parent = (0, _omit.default)(parent, 'parent', 'children');\n      }\n      flattenTreeData(node[childrenKey], node, layer + 1);\n    });\n    callback === null || callback === void 0 || callback(flattenedNodes.current);\n    forceUpdate();\n  }, [callback, forceUpdate, valueKey, labelKey, uncheckableItemValues, childrenKey]);\n  (0, _react.useEffect)(() => {\n    // when data is changed, should clear the flattenedNodes, avoid duplicate keys\n    flattenedNodes.current = {};\n    flattenTreeData(data);\n  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  (0, _react.useEffect)(() => {\n    if (multiple) {\n      updateTreeNodeCheckState(value);\n      forceUpdate();\n    }\n\n    /**\n     * Add a dependency on data, because when loading data asynchronously through getChildren,\n     * data may change and the node status needs to be updated.\n     * @see https://github.com/rsuite/rsuite/issues/3973\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value, data]);\n  return flattenedNodes.current;\n}\nvar _default = exports[\"default\"] = useFlattenTree;\n\n//# sourceURL=webpack://rsuite/./src/Tree/hooks/useFlattenTree.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 _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _utils = __webpack_require__(/*! ../../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../utils */ \"./src/Tree/utils/index.ts\");\nvar _useForceUpdate = _interopRequireDefault(__webpack_require__(/*! ./useForceUpdate */ \"./src/Tree/hooks/useForceUpdate.ts\"));\n/**\n * Custom hook that flattens a tree data structure into a map of nodes.\n *\n */\nfunction useFlattenTree(data, options) {\n  const {\n    value,\n    labelKey,\n    valueKey,\n    childrenKey,\n    uncheckableItemValues = [],\n    cascade,\n    multiple,\n    callback\n  } = options;\n  const forceUpdate = (0, _useForceUpdate.default)();\n  const flattenedNodes = (0, _react.useRef)({});\n  const updateTreeNodeCheckState = (0, _react.useCallback)(function (value) {\n    if (value === void 0) {\n      value = [];\n    }\n    // Reset values to false\n    Object.keys(flattenedNodes.current).forEach(refKey => {\n      const node = flattenedNodes.current[refKey];\n      if (cascade && !(0, _isNil.default)(node.parent) && !(0, _isNil.default)(node.parent.refKey)) {\n        node.check = flattenedNodes.current[node.parent.refKey].check;\n      } else {\n        node.check = false;\n      }\n      value.forEach(nodeVal => {\n        if ((0, _utils.shallowEqual)(flattenedNodes.current[refKey][valueKey], nodeVal) && !uncheckableItemValues.some(uncheckableValue => (0, _utils.shallowEqual)(nodeVal, uncheckableValue))) {\n          flattenedNodes.current[refKey].check = true;\n        }\n      });\n    });\n  }, [cascade, uncheckableItemValues, valueKey]);\n  const flattenTreeData = (0, _react.useCallback)(function (treeData, parent, layer) {\n    if (layer === void 0) {\n      layer = 1;\n    }\n    if (!Array.isArray(treeData) || treeData.length === 0) {\n      return [];\n    }\n    treeData.map(node => {\n      const value = node[valueKey];\n      /**\n       * because the value of the node's type is string or number,\n       * so it can used as the key of the object directly\n       * to avoid number value is converted to string. 1 and '1' will be convert to '1'\n       * we used `String_` or `Number_` prefix\n       */\n      const refKey = (0, _utils2.formatNodeRefKey)(value);\n      node.refKey = refKey;\n      flattenedNodes.current[refKey] = {\n        layer,\n        [labelKey]: node[labelKey],\n        [valueKey]: node[valueKey],\n        uncheckable: uncheckableItemValues.some(value => (0, _utils.shallowEqual)(node[valueKey], value)),\n        ...node\n      };\n      if (parent) {\n        flattenedNodes.current[refKey].parent = (0, _omit.default)(parent, 'parent', 'children');\n      }\n      flattenTreeData(node[childrenKey], node, layer + 1);\n    });\n    callback === null || callback === void 0 || callback(flattenedNodes.current);\n    forceUpdate();\n  }, [callback, forceUpdate, valueKey, labelKey, uncheckableItemValues, childrenKey]);\n  (0, _react.useEffect)(() => {\n    // when data is changed, should clear the flattenedNodes, avoid duplicate keys\n    flattenedNodes.current = {};\n    flattenTreeData(data);\n  }, [data]);\n  (0, _react.useEffect)(() => {\n    if (multiple) {\n      updateTreeNodeCheckState(value);\n      forceUpdate();\n    }\n\n    /**\n     * Add a dependency on data, because when loading data asynchronously through getChildren,\n     * data may change and the node status needs to be updated.\n     * @see https://github.com/rsuite/rsuite/issues/3973\n     */\n  }, [value, data]);\n  return flattenedNodes.current;\n}\nvar _default = exports[\"default\"] = useFlattenTree;\n\n//# sourceURL=webpack://rsuite/./src/Tree/hooks/useFlattenTree.ts?");
 
 /***/ }),
 
@@ -5691,7 +5691,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 _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _constants = __webpack_require__(/*! ../../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _hooks = __webpack_require__(/*! ../../internals/hooks */ \"./src/internals/hooks/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 _utils = __webpack_require__(/*! ../utils */ \"./src/Tree/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _useTreeNodeRefs = _interopRequireDefault(__webpack_require__(/*! ./useTreeNodeRefs */ \"./src/Tree/hooks/useTreeNodeRefs.ts\"));\n/**\n * Custom hook that manages the focus behavior of a tree component.\n */\nfunction useFocusTree(props) {\n  const {\n    filteredData,\n    searchKeyword,\n    flattenedNodes,\n    expandItemValues,\n    disabledItemValues,\n    onExpand,\n    onFocused\n  } = props;\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)();\n  const {\n    valueKey,\n    childrenKey\n  } = (0, _TreeProvider.useItemDataKeys)();\n  const {\n    treeNodesRefs,\n    saveTreeNodeRef\n  } = (0, _useTreeNodeRefs.default)();\n  const treeViewRef = (0, _react.useRef)(null);\n  const [focusItemValue, setFocusItemValue] = (0, _react.useState)(null);\n  const register = (0, _TreeProvider.useRegisterTreeMethods)();\n  const flattenedNodesRef = (0, _react.useRef)(flattenedNodes);\n  const getFocusProps = value => {\n    const options = {\n      disabledItemValues,\n      valueKey,\n      childrenKey,\n      expandItemValues\n    };\n    const focusableItems = (0, _utils.getFocusableItems)(filteredData, options, (0, _utils.isSearching)(searchKeyword));\n    return {\n      focusItemValue: value || focusItemValue,\n      valueKey,\n      focusableItems,\n      treeNodesRefs\n    };\n  };\n  const handleFocusItem = (0, _hooks.useEventCallback)(key => {\n    const focusProps = getFocusProps();\n    let focusedValue = null;\n    if (key === _constants.KEY_VALUES.DOWN) {\n      focusedValue = (0, _utils.focusNextItem)(focusProps);\n    } else if (key === _constants.KEY_VALUES.UP) {\n      focusedValue = (0, _utils.focusPreviousItem)(focusProps);\n    }\n    if (focusedValue) {\n      setFocusItemValue(focusedValue);\n      onFocused === null || onFocused === void 0 || onFocused(focusedValue);\n    }\n  });\n  const handleLeftArrowEvent = (0, _hooks.useEventCallback)(() => {\n    if ((0, _isNil.default)(focusItemValue)) {\n      return;\n    }\n    const focusItem = (0, _utils.getActiveItem)(focusItemValue, flattenedNodes, valueKey);\n    const expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);\n    const onFocusItem = () => {\n      var _focusItem$parent, _focusItem$parent2;\n      const focusedValue = focusItem === null || focusItem === void 0 || (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];\n      setFocusItemValue(focusedValue);\n      onFocused === null || onFocused === void 0 || onFocused(focusedValue);\n      (0, _utils.focusTreeNode)(focusItem === null || focusItem === void 0 || (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs);\n    };\n    (0, _utils.handleLeftArrow)({\n      focusItem,\n      expand,\n      onExpand,\n      childrenKey,\n      onFocusItem\n    });\n  });\n  const handleRightArrowEvent = (0, _hooks.useEventCallback)(() => {\n    if ((0, _isNil.default)(focusItemValue)) {\n      return;\n    }\n    const focusItem = (0, _utils.getActiveItem)(focusItemValue, flattenedNodes, valueKey);\n    const expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);\n    const onFocusItem = () => handleFocusItem(_constants.KEY_VALUES.DOWN);\n    (0, _utils.handleRightArrow)({\n      focusItem,\n      expand,\n      childrenKey,\n      onExpand,\n      onFocusItem\n    });\n  });\n  const onTreeKeydown = (0, _hooks.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: () => handleFocusItem(_constants.KEY_VALUES.DOWN),\n      up: () => handleFocusItem(_constants.KEY_VALUES.UP),\n      left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,\n      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent\n    });\n  });\n  const focusTreeFirstNode = (0, _hooks.useEventCallback)(() => {\n    handleFocusItem(_constants.KEY_VALUES.DOWN);\n  });\n  const focusTreeActiveNode = (0, _react.useCallback)(() => {\n    const refKey = (0, _utils.focusCurrentItem)({\n      container: treeViewRef.current\n    });\n    if (refKey) {\n      var _flattenedNodesRef$cu;\n      const node = (_flattenedNodesRef$cu = flattenedNodesRef.current) === null || _flattenedNodesRef$cu === void 0 ? void 0 : _flattenedNodesRef$cu[refKey];\n      if (node) {\n        setFocusItemValue(node[valueKey]);\n        onFocused === null || onFocused === void 0 || onFocused(node[valueKey]);\n      }\n    }\n  }, [onFocused, valueKey]);\n  (0, _react.useEffect)(() => {\n    const unregister = register === null || register === void 0 ? void 0 : register({\n      focusTreeFirstNode,\n      focusTreeActiveNode\n    });\n    return () => {\n      unregister === null || unregister === void 0 || unregister();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  (0, _react.useEffect)(() => {\n    flattenedNodesRef.current = flattenedNodes;\n  }, [flattenedNodes]);\n  return {\n    treeViewRef,\n    focusTreeFirstNode,\n    focusItemValue,\n    treeNodesRefs,\n    saveTreeNodeRef,\n    setFocusItemValue,\n    onTreeKeydown\n  };\n}\nvar _default = exports[\"default\"] = useFocusTree;\n\n//# sourceURL=webpack://rsuite/./src/Tree/hooks/useFocusTree.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 _isNil = _interopRequireDefault(__webpack_require__(/*! lodash/isNil */ \"./node_modules/lodash/isNil.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _constants = __webpack_require__(/*! ../../internals/constants */ \"./src/internals/constants/index.ts\");\nvar _hooks = __webpack_require__(/*! ../../internals/hooks */ \"./src/internals/hooks/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 _utils = __webpack_require__(/*! ../utils */ \"./src/Tree/utils/index.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _useTreeNodeRefs = _interopRequireDefault(__webpack_require__(/*! ./useTreeNodeRefs */ \"./src/Tree/hooks/useTreeNodeRefs.ts\"));\n/**\n * Custom hook that manages the focus behavior of a tree component.\n */\nfunction useFocusTree(props) {\n  const {\n    filteredData,\n    searchKeyword,\n    flattenedNodes,\n    expandItemValues,\n    disabledItemValues,\n    onExpand,\n    onFocused\n  } = props;\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)();\n  const {\n    valueKey,\n    childrenKey\n  } = (0, _TreeProvider.useItemDataKeys)();\n  const {\n    treeNodesRefs,\n    saveTreeNodeRef\n  } = (0, _useTreeNodeRefs.default)();\n  const treeViewRef = (0, _react.useRef)(null);\n  const [focusItemValue, setFocusItemValue] = (0, _react.useState)(null);\n  const register = (0, _TreeProvider.useRegisterTreeMethods)();\n  const flattenedNodesRef = (0, _react.useRef)(flattenedNodes);\n  const getFocusProps = value => {\n    const options = {\n      disabledItemValues,\n      valueKey,\n      childrenKey,\n      expandItemValues\n    };\n    const focusableItems = (0, _utils.getFocusableItems)(filteredData, options, (0, _utils.isSearching)(searchKeyword));\n    return {\n      focusItemValue: value || focusItemValue,\n      valueKey,\n      focusableItems,\n      treeNodesRefs\n    };\n  };\n  const handleFocusItem = (0, _hooks.useEventCallback)(key => {\n    const focusProps = getFocusProps();\n    let focusedValue = null;\n    if (key === _constants.KEY_VALUES.DOWN) {\n      focusedValue = (0, _utils.focusNextItem)(focusProps);\n    } else if (key === _constants.KEY_VALUES.UP) {\n      focusedValue = (0, _utils.focusPreviousItem)(focusProps);\n    }\n    if (focusedValue) {\n      setFocusItemValue(focusedValue);\n      onFocused === null || onFocused === void 0 || onFocused(focusedValue);\n    }\n  });\n  const handleLeftArrowEvent = (0, _hooks.useEventCallback)(() => {\n    if ((0, _isNil.default)(focusItemValue)) {\n      return;\n    }\n    const focusItem = (0, _utils.getActiveItem)(focusItemValue, flattenedNodes, valueKey);\n    const expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);\n    const onFocusItem = () => {\n      var _focusItem$parent, _focusItem$parent2;\n      const focusedValue = focusItem === null || focusItem === void 0 || (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];\n      setFocusItemValue(focusedValue);\n      onFocused === null || onFocused === void 0 || onFocused(focusedValue);\n      (0, _utils.focusTreeNode)(focusItem === null || focusItem === void 0 || (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs);\n    };\n    (0, _utils.handleLeftArrow)({\n      focusItem,\n      expand,\n      onExpand,\n      childrenKey,\n      onFocusItem\n    });\n  });\n  const handleRightArrowEvent = (0, _hooks.useEventCallback)(() => {\n    if ((0, _isNil.default)(focusItemValue)) {\n      return;\n    }\n    const focusItem = (0, _utils.getActiveItem)(focusItemValue, flattenedNodes, valueKey);\n    const expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);\n    const onFocusItem = () => handleFocusItem(_constants.KEY_VALUES.DOWN);\n    (0, _utils.handleRightArrow)({\n      focusItem,\n      expand,\n      childrenKey,\n      onExpand,\n      onFocusItem\n    });\n  });\n  const onTreeKeydown = (0, _hooks.useEventCallback)(event => {\n    (0, _Picker.onMenuKeyDown)(event, {\n      down: () => handleFocusItem(_constants.KEY_VALUES.DOWN),\n      up: () => handleFocusItem(_constants.KEY_VALUES.UP),\n      left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,\n      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent\n    });\n  });\n  const focusTreeFirstNode = (0, _hooks.useEventCallback)(() => {\n    handleFocusItem(_constants.KEY_VALUES.DOWN);\n  });\n  const focusTreeActiveNode = (0, _react.useCallback)(() => {\n    const refKey = (0, _utils.focusCurrentItem)({\n      container: treeViewRef.current\n    });\n    if (refKey) {\n      var _flattenedNodesRef$cu;\n      const node = (_flattenedNodesRef$cu = flattenedNodesRef.current) === null || _flattenedNodesRef$cu === void 0 ? void 0 : _flattenedNodesRef$cu[refKey];\n      if (node) {\n        setFocusItemValue(node[valueKey]);\n        onFocused === null || onFocused === void 0 || onFocused(node[valueKey]);\n      }\n    }\n  }, [onFocused, valueKey]);\n  (0, _react.useEffect)(() => {\n    const unregister = register === null || register === void 0 ? void 0 : register({\n      focusTreeFirstNode,\n      focusTreeActiveNode\n    });\n    return () => {\n      unregister === null || unregister === void 0 || unregister();\n    };\n  }, []);\n  (0, _react.useEffect)(() => {\n    flattenedNodesRef.current = flattenedNodes;\n  }, [flattenedNodes]);\n  return {\n    treeViewRef,\n    focusTreeFirstNode,\n    focusItemValue,\n    treeNodesRefs,\n    saveTreeNodeRef,\n    setFocusItemValue,\n    onTreeKeydown\n  };\n}\nvar _default = exports[\"default\"] = useFocusTree;\n\n//# sourceURL=webpack://rsuite/./src/Tree/hooks/useFocusTree.ts?");
 
 /***/ }),
 
@@ -5746,7 +5746,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\"] = useTreeSearch;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _Picker = __webpack_require__(/*! ../../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _TreeProvider = __webpack_require__(/*! ../../internals/Tree/TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\n/**\n * Custom hook for searching and filtering data in a tree structure.\n */\nfunction useTreeSearch(props) {\n  const {\n    labelKey,\n    childrenKey\n  } = (0, _TreeProvider.useItemDataKeys)();\n  const {\n    searchKeyword,\n    data,\n    searchBy,\n    callback\n  } = props;\n  const filterVisibleData = (0, _react.useCallback)((data, searchKeyword) => {\n    const setVisible = nodes => nodes.forEach(item => {\n      item.visible = searchBy ? searchBy(searchKeyword, item[labelKey], item) : (0, _Picker.shouldDisplay)(item[labelKey], searchKeyword);\n      if ((0, _isArray.default)(item[childrenKey])) {\n        filterVisibleData(item[childrenKey], searchKeyword);\n        item[childrenKey].forEach(child => {\n          if (child.visible) {\n            item.visible = child.visible;\n          }\n        });\n      }\n    });\n    setVisible(data);\n    return data;\n  }, [childrenKey, labelKey, searchBy]);\n\n  // Use search keywords to filter options.\n  const [keyword, setSearchKeyword] = (0, _react.useState)(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  const [filteredData, setFilteredData] = (0, _react.useState)(() => filterVisibleData(data, keyword));\n  const handleSearch = (searchKeyword, event) => {\n    const filteredData = filterVisibleData(data, searchKeyword);\n    setFilteredData(filteredData);\n    setSearchKeyword(searchKeyword);\n    if (event) {\n      callback === null || callback === void 0 || callback(searchKeyword, filteredData, event);\n    }\n  };\n  (0, _react.useEffect)(() => {\n    handleSearch(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchKeyword]);\n  (0, _react.useEffect)(() => {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  const setVisibleData = (0, _react.useCallback)((data, searchKeyword) => {\n    setFilteredData(filterVisibleData(data, searchKeyword));\n  }, [filterVisibleData]);\n  return {\n    keyword,\n    filteredData,\n    setFilteredData: setVisibleData,\n    setSearchKeyword,\n    handleSearch\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Tree/hooks/useTreeSearch.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = useTreeSearch;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _isArray = _interopRequireDefault(__webpack_require__(/*! lodash/isArray */ \"./node_modules/lodash/isArray.js\"));\nvar _Picker = __webpack_require__(/*! ../../internals/Picker */ \"./src/internals/Picker/index.ts\");\nvar _TreeProvider = __webpack_require__(/*! ../../internals/Tree/TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\n/**\n * Custom hook for searching and filtering data in a tree structure.\n */\nfunction useTreeSearch(props) {\n  const {\n    labelKey,\n    childrenKey\n  } = (0, _TreeProvider.useItemDataKeys)();\n  const {\n    searchKeyword,\n    data,\n    searchBy,\n    callback\n  } = props;\n  const filterVisibleData = (0, _react.useCallback)((data, searchKeyword) => {\n    const setVisible = nodes => nodes.forEach(item => {\n      item.visible = searchBy ? searchBy(searchKeyword, item[labelKey], item) : (0, _Picker.shouldDisplay)(item[labelKey], searchKeyword);\n      if ((0, _isArray.default)(item[childrenKey])) {\n        filterVisibleData(item[childrenKey], searchKeyword);\n        item[childrenKey].forEach(child => {\n          if (child.visible) {\n            item.visible = child.visible;\n          }\n        });\n      }\n    });\n    setVisible(data);\n    return data;\n  }, [childrenKey, labelKey, searchBy]);\n\n  // Use search keywords to filter options.\n  const [keyword, setSearchKeyword] = (0, _react.useState)(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  const [filteredData, setFilteredData] = (0, _react.useState)(() => filterVisibleData(data, keyword));\n  const handleSearch = (searchKeyword, event) => {\n    const filteredData = filterVisibleData(data, searchKeyword);\n    setFilteredData(filteredData);\n    setSearchKeyword(searchKeyword);\n    if (event) {\n      callback === null || callback === void 0 || callback(searchKeyword, filteredData, event);\n    }\n  };\n  (0, _react.useEffect)(() => {\n    handleSearch(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword]);\n  (0, _react.useEffect)(() => {\n    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');\n  }, [searchKeyword, setSearchKeyword]);\n  const setVisibleData = (0, _react.useCallback)((data, searchKeyword) => {\n    setFilteredData(filterVisibleData(data, searchKeyword));\n  }, [filterVisibleData]);\n  return {\n    keyword,\n    filteredData,\n    setFilteredData: setVisibleData,\n    setSearchKeyword,\n    handleSearch\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Tree/hooks/useTreeSearch.ts?");
 
 /***/ }),
 
@@ -5966,7 +5966,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 _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/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/Uploader/UploadTrigger.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 UploadTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    as: Component = _Button.default,\n    name,\n    accept,\n    multiple,\n    disabled,\n    readOnly,\n    children,\n    classPrefix = 'uploader-trigger',\n    className,\n    draggable,\n    locale,\n    onChange,\n    onDragEnter,\n    onDragLeave,\n    onDragOver,\n    onDrop,\n    ...rest\n  } = props;\n  const rootRef = (0, _react.useRef)(null);\n  const [dragOver, setDragOver] = (0, _react.useState)(false);\n  const inputRef = (0, _react.useRef)(null);\n  const {\n    merge,\n    withClassPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix({\n    disabled,\n    customize: children,\n    'drag-over': dragOver\n  }));\n  const handleClick = (0, _react.useCallback)(() => {\n    var _inputRef$current;\n    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();\n  }, []);\n  const handleClearInput = (0, _react.useCallback)(() => {\n    if (inputRef.current) {\n      inputRef.current.value = '';\n    }\n  }, []);\n  const handleDragEnter = (0, _react.useCallback)(event => {\n    if (draggable) {\n      event.preventDefault();\n      setDragOver(true);\n    }\n    onDragEnter === null || onDragEnter === void 0 || onDragEnter(event);\n  }, [draggable, onDragEnter]);\n  const handleDragLeave = (0, _react.useCallback)(event => {\n    if (draggable) {\n      event.preventDefault();\n      setDragOver(false);\n    }\n    onDragLeave === null || onDragLeave === void 0 || onDragLeave(event);\n  }, [draggable, onDragLeave]);\n  const handleDragOver = (0, _react.useCallback)(event => {\n    draggable && event.preventDefault();\n    onDragOver === null || onDragOver === void 0 || onDragOver(event);\n  }, [draggable, onDragOver]);\n  const handleDrop = (0, _react.useCallback)(event => {\n    if (draggable) {\n      event.preventDefault();\n      setDragOver(false);\n      onChange === null || onChange === void 0 || onChange(event);\n    }\n    onDrop === null || onDrop === void 0 || onDrop(event);\n  }, [draggable, onChange, onDrop]);\n  const handleChange = (0, _react.useCallback)(event => {\n    if ((0, _utils.isIE11)()) {\n      var _event$target;\n      /**\n       * IE11 triggers onChange event of file input when element.value is assigned\n       * https://github.com/facebook/react/issues/8793\n       */\n      if (((_event$target = event.target) === null || _event$target === void 0 || (_event$target = _event$target.files) === null || _event$target === void 0 ? void 0 : _event$target.length) > 0) {\n        onChange === null || onChange === void 0 || onChange(event);\n      }\n      return;\n    }\n    onChange === null || onChange === void 0 || onChange(event);\n  }, [onChange]);\n  (0, _react.useImperativeHandle)(ref, () => ({\n    root: rootRef.current,\n    clearInput: handleClearInput\n  }));\n  const buttonProps = {\n    ...rest,\n    disabled,\n    className: prefix('btn')\n  };\n  if (!disabled && !readOnly) {\n    buttonProps.onClick = handleClick;\n    buttonProps.onDragEnter = handleDragEnter;\n    buttonProps.onDragLeave = handleDragLeave;\n    buttonProps.onDragOver = handleDragOver;\n    buttonProps.onDrop = handleDrop;\n  }\n  const trigger = children ? (/*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(children), buttonProps)) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, buttonProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 151,\n      columnNumber: 5\n    }\n  }), locale === null || locale === void 0 ? void 0 : locale.upload);\n  return /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: rootRef,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 155,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", {\n    type: \"file\",\n    name: name,\n    multiple: multiple,\n    disabled: disabled,\n    readOnly: readOnly,\n    accept: accept,\n    ref: inputRef,\n    onChange: handleChange,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 156,\n      columnNumber: 7\n    }\n  }), trigger);\n});\nUploadTrigger.displayName = 'UploadTrigger';\nvar _default = exports[\"default\"] = UploadTrigger;\n\n//# sourceURL=webpack://rsuite/./src/Uploader/UploadTrigger.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 _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ \"./src/Button/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/Uploader/UploadTrigger.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 UploadTrigger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    as: Component = _Button.default,\n    name,\n    accept,\n    multiple,\n    disabled,\n    readOnly,\n    children,\n    classPrefix = 'uploader-trigger',\n    className,\n    draggable,\n    locale,\n    onChange,\n    onDragEnter,\n    onDragLeave,\n    onDragOver,\n    onDrop,\n    ...rest\n  } = props;\n  const rootRef = (0, _react.useRef)(null);\n  const [dragOver, setDragOver] = (0, _react.useState)(false);\n  const inputRef = (0, _react.useRef)(null);\n  const {\n    merge,\n    withClassPrefix,\n    prefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix({\n    disabled,\n    customize: children,\n    'drag-over': dragOver\n  }));\n  const handleClick = (0, _hooks.useEventCallback)(() => {\n    var _inputRef$current;\n    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();\n  });\n  const handleClearInput = (0, _hooks.useEventCallback)(() => {\n    if (inputRef.current) {\n      inputRef.current.value = '';\n    }\n  });\n  const handleDragEnter = (0, _hooks.useEventCallback)(event => {\n    if (draggable) {\n      event.preventDefault();\n      setDragOver(true);\n    }\n    onDragEnter === null || onDragEnter === void 0 || onDragEnter(event);\n  });\n  const handleDragLeave = (0, _hooks.useEventCallback)(event => {\n    if (draggable) {\n      event.preventDefault();\n      setDragOver(false);\n    }\n    onDragLeave === null || onDragLeave === void 0 || onDragLeave(event);\n  });\n  const handleDragOver = (0, _hooks.useEventCallback)(event => {\n    draggable && event.preventDefault();\n    onDragOver === null || onDragOver === void 0 || onDragOver(event);\n  });\n  const handleDrop = (0, _hooks.useEventCallback)(event => {\n    if (draggable) {\n      event.preventDefault();\n      setDragOver(false);\n      onChange === null || onChange === void 0 || onChange(event);\n    }\n    onDrop === null || onDrop === void 0 || onDrop(event);\n  });\n  (0, _react.useImperativeHandle)(ref, () => ({\n    root: rootRef.current,\n    clearInput: handleClearInput\n  }));\n  const buttonProps = {\n    ...rest,\n    disabled,\n    className: prefix('btn')\n  };\n  if (!disabled && !readOnly) {\n    buttonProps.onClick = handleClick;\n    buttonProps.onDragEnter = handleDragEnter;\n    buttonProps.onDragLeave = handleDragLeave;\n    buttonProps.onDragOver = handleDragOver;\n    buttonProps.onDrop = handleDrop;\n  }\n  const trigger = children ? (/*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(children), buttonProps)) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, buttonProps, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 120,\n      columnNumber: 5\n    }\n  }), locale === null || locale === void 0 ? void 0 : locale.upload);\n  return /*#__PURE__*/_react.default.createElement(\"div\", {\n    ref: rootRef,\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 124,\n      columnNumber: 5\n    }\n  }, /*#__PURE__*/_react.default.createElement(\"input\", {\n    type: \"file\",\n    name: name,\n    multiple: multiple,\n    disabled: disabled,\n    readOnly: readOnly,\n    accept: accept,\n    ref: inputRef,\n    onChange: onChange,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 125,\n      columnNumber: 7\n    }\n  }), trigger);\n});\nUploadTrigger.displayName = 'UploadTrigger';\nvar _default = exports[\"default\"] = UploadTrigger;\n\n//# sourceURL=webpack://rsuite/./src/Uploader/UploadTrigger.tsx?");
 
 /***/ }),
 
@@ -5999,7 +5999,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = ajaxUpload;\nfunction getResponse(xhr) {\n  const text = xhr.responseText || xhr.response;\n  if (!text) {\n    return text;\n  }\n  try {\n    return JSON.parse(text);\n  } catch (e) {\n    return text;\n  }\n}\nfunction ajaxUpload(options) {\n  const {\n    name,\n    timeout,\n    headers = {},\n    data = {},\n    method = 'POST',\n    onError,\n    onSuccess,\n    onProgress,\n    file,\n    url,\n    withCredentials,\n    disableMultipart\n  } = options;\n  const xhr = new XMLHttpRequest();\n  let sendableData;\n  xhr.open(method, url, true);\n  if (!disableMultipart) {\n    sendableData = new FormData();\n    sendableData.append(name, file, file.name);\n    for (const key in data) {\n      sendableData.append(key, data[key]);\n    }\n  } else {\n    sendableData = file;\n  }\n  Object.keys(headers).forEach(key => {\n    if (headers[key] !== null) {\n      xhr.setRequestHeader(key, headers[key]);\n    }\n  });\n  if (headers['X-Requested-With'] !== null) {\n    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');\n  }\n  if (timeout) {\n    xhr.timeout = timeout;\n    xhr.ontimeout = event => {\n      onError === null || onError === void 0 || onError({\n        type: 'timeout'\n      }, event, xhr);\n    };\n  }\n  if (withCredentials && 'withCredentials' in xhr) {\n    xhr.withCredentials = true;\n  }\n  xhr.onload = event => {\n    const resp = getResponse(xhr);\n    if (xhr.status < 200 || xhr.status >= 300) {\n      onError === null || onError === void 0 || onError({\n        type: 'server_error',\n        response: resp\n      }, event, xhr);\n      return;\n    }\n    onSuccess === null || onSuccess === void 0 || onSuccess(resp, event, xhr);\n  };\n  if (xhr.upload) {\n    xhr.upload.onprogress = event => {\n      let percent = 0;\n      if (event.lengthComputable) {\n        percent = event.loaded / event.total * 100;\n      }\n      onProgress === null || onProgress === void 0 || onProgress(percent, event, xhr);\n    };\n  }\n  xhr.onerror = event => {\n    onError === null || onError === void 0 || onError({\n      type: 'xhr_error'\n    }, event, xhr);\n  };\n  xhr.send(sendableData);\n  return {\n    xhr,\n    data: sendableData\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Uploader/utils/ajaxUpload.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = ajaxUpload;\nfunction getResponse(xhr) {\n  const text = xhr.responseText || xhr.response;\n  if (!text) {\n    return text;\n  }\n  try {\n    return JSON.parse(text);\n  } catch {\n    return text;\n  }\n}\nfunction ajaxUpload(options) {\n  const {\n    name,\n    timeout,\n    headers = {},\n    data = {},\n    method = 'POST',\n    onError,\n    onSuccess,\n    onProgress,\n    file,\n    url,\n    withCredentials,\n    disableMultipart\n  } = options;\n  const xhr = new XMLHttpRequest();\n  let sendableData;\n  xhr.open(method, url, true);\n  if (!disableMultipart) {\n    sendableData = new FormData();\n    sendableData.append(name, file, file.name);\n    for (const key in data) {\n      sendableData.append(key, data[key]);\n    }\n  } else {\n    sendableData = file;\n  }\n  Object.keys(headers).forEach(key => {\n    if (headers[key] !== null) {\n      xhr.setRequestHeader(key, headers[key]);\n    }\n  });\n  if (headers['X-Requested-With'] !== null) {\n    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');\n  }\n  if (timeout) {\n    xhr.timeout = timeout;\n    xhr.ontimeout = event => {\n      onError === null || onError === void 0 || onError({\n        type: 'timeout'\n      }, event, xhr);\n    };\n  }\n  if (withCredentials && 'withCredentials' in xhr) {\n    xhr.withCredentials = true;\n  }\n  xhr.onload = event => {\n    const resp = getResponse(xhr);\n    if (xhr.status < 200 || xhr.status >= 300) {\n      onError === null || onError === void 0 || onError({\n        type: 'server_error',\n        response: resp\n      }, event, xhr);\n      return;\n    }\n    onSuccess === null || onSuccess === void 0 || onSuccess(resp, event, xhr);\n  };\n  if (xhr.upload) {\n    xhr.upload.onprogress = event => {\n      let percent = 0;\n      if (event.lengthComputable) {\n        percent = event.loaded / event.total * 100;\n      }\n      onProgress === null || onProgress === void 0 || onProgress(percent, event, xhr);\n    };\n  }\n  xhr.onerror = event => {\n    onError === null || onError === void 0 || onError({\n      type: 'xhr_error'\n    }, event, xhr);\n  };\n  xhr.send(sendableData);\n  return {\n    xhr,\n    data: sendableData\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Uploader/utils/ajaxUpload.ts?");
 
 /***/ }),
 
@@ -6098,7 +6098,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 _DisclosureContext = _interopRequireWildcard(__webpack_require__(/*! ./DisclosureContext */ \"./src/internals/Disclosure/DisclosureContext.ts\"));\nvar _DisclosureButton = _interopRequireDefault(__webpack_require__(/*! ./DisclosureButton */ \"./src/internals/Disclosure/DisclosureButton.tsx\"));\nvar _DisclosureContent = _interopRequireDefault(__webpack_require__(/*! ./DisclosureContent */ \"./src/internals/Disclosure/DisclosureContent.tsx\"));\nvar _useClickOutside = _interopRequireDefault(__webpack_require__(/*! ../hooks/useClickOutside */ \"./src/internals/hooks/useClickOutside.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Disclosure/Disclosure.tsx\"; // Headless Disclosure\n// Ref: https://w3c.github.io/aria-practices/#disclosure\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 initialDisclosureState = {\n  open: false\n};\nfunction disclosureReducer(state, action) {\n  switch (action.type) {\n    case _DisclosureContext.DisclosureActionTypes.Show:\n      return {\n        ...state,\n        open: true\n      };\n    case _DisclosureContext.DisclosureActionTypes.Hide:\n      return {\n        ...state,\n        open: false\n      };\n  }\n  return state;\n}\nconst Disclosure = /*#__PURE__*/_react.default.memo(props => {\n  const {\n    children,\n    open: openProp,\n    defaultOpen = false,\n    hideOnClickOutside = false,\n    onToggle,\n    trigger = ['click']\n  } = props;\n  const parentDisclosure = (0, _react.useContext)(_DisclosureContext.default);\n  const [{\n    open: openState\n  }, dispatch] = (0, _react.useReducer)(disclosureReducer, {\n    ...initialDisclosureState,\n    open: defaultOpen\n  });\n  const containerElementRef = (0, _react.useRef)(null);\n  const open = openProp !== null && openProp !== void 0 ? openProp : openState;\n  (0, _useClickOutside.default)({\n    enabled: hideOnClickOutside,\n    isOutside: event => {\n      var _containerElementRef$;\n      return !((_containerElementRef$ = containerElementRef.current) !== null && _containerElementRef$ !== void 0 && _containerElementRef$.contains(event.target));\n    },\n    handle: () => dispatch({\n      type: _DisclosureContext.DisclosureActionTypes.Hide\n    })\n  });\n  const onMouseEnter = (0, _react.useCallback)(event => {\n    if (!open) {\n      dispatch({\n        type: _DisclosureContext.DisclosureActionTypes.Show\n      });\n      onToggle === null || onToggle === void 0 || onToggle(true, event);\n    }\n  }, [open, dispatch, onToggle]);\n  const onMouseLeave = (0, _react.useCallback)(event => {\n    if (open) {\n      dispatch({\n        type: _DisclosureContext.DisclosureActionTypes.Hide\n      });\n      onToggle === null || onToggle === void 0 || onToggle(false, event);\n    }\n  }, [open, dispatch, onToggle]);\n  const contextValue = (0, _react.useMemo)(() => {\n    const cascadeDispatch = action => {\n      const result = dispatch(action);\n      if ('cascade' in action) {\n        parentDisclosure === null || parentDisclosure === void 0 || parentDisclosure[1](action);\n      }\n      return result;\n    };\n    return [{\n      open\n    }, cascadeDispatch, {\n      onToggle,\n      trigger\n    }];\n  }, [parentDisclosure, open, dispatch, onToggle, trigger]);\n  const renderProps = (0, _react.useMemo)(() => {\n    const renderProps = {\n      open\n    };\n    if (trigger.includes('hover')) {\n      renderProps.onMouseEnter = onMouseEnter;\n      renderProps.onMouseLeave = onMouseLeave;\n    }\n    return renderProps;\n  }, [open, trigger, onMouseEnter, onMouseLeave]);\n  return /*#__PURE__*/_react.default.createElement(_DisclosureContext.default.Provider, {\n    value: contextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 127,\n      columnNumber: 5\n    }\n  }, children(renderProps, containerElementRef));\n});\nDisclosure.Button = _DisclosureButton.default;\nDisclosure.Content = _DisclosureContent.default;\nvar _default = exports[\"default\"] = Disclosure;\n\n//# sourceURL=webpack://rsuite/./src/internals/Disclosure/Disclosure.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 _DisclosureContext = _interopRequireWildcard(__webpack_require__(/*! ./DisclosureContext */ \"./src/internals/Disclosure/DisclosureContext.ts\"));\nvar _DisclosureButton = _interopRequireDefault(__webpack_require__(/*! ./DisclosureButton */ \"./src/internals/Disclosure/DisclosureButton.tsx\"));\nvar _DisclosureContent = _interopRequireDefault(__webpack_require__(/*! ./DisclosureContent */ \"./src/internals/Disclosure/DisclosureContent.tsx\"));\nvar _useClickOutside = _interopRequireDefault(__webpack_require__(/*! ../hooks/useClickOutside */ \"./src/internals/hooks/useClickOutside.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Disclosure/Disclosure.tsx\"; // Headless Disclosure\n// Ref: https://w3c.github.io/aria-practices/#disclosure\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 initialDisclosureState = {\n  open: false\n};\nfunction disclosureReducer(state, action) {\n  switch (action.type) {\n    case _DisclosureContext.DisclosureActionTypes.Show:\n      return {\n        ...state,\n        open: true\n      };\n    case _DisclosureContext.DisclosureActionTypes.Hide:\n      return {\n        ...state,\n        open: false\n      };\n  }\n  return state;\n}\nconst Disclosure = /*#__PURE__*/_react.default.memo(props => {\n  const {\n    children,\n    open: openProp,\n    defaultOpen = false,\n    hideOnClickOutside = false,\n    onToggle,\n    trigger = ['click']\n  } = props;\n  const parentDisclosure = (0, _react.useContext)(_DisclosureContext.default);\n  const [{\n    open: openState\n  }, dispatch] = (0, _react.useReducer)(disclosureReducer, {\n    ...initialDisclosureState,\n    open: defaultOpen\n  });\n  const containerElementRef = (0, _react.useRef)(null);\n  const open = openProp !== null && openProp !== void 0 ? openProp : openState;\n  (0, _useClickOutside.default)({\n    enabled: hideOnClickOutside,\n    isOutside: event => {\n      var _containerElementRef$;\n      return !((_containerElementRef$ = containerElementRef.current) !== null && _containerElementRef$ !== void 0 && _containerElementRef$.contains(event.target));\n    },\n    handle: () => dispatch({\n      type: _DisclosureContext.DisclosureActionTypes.Hide\n    })\n  });\n  const onMouseEnter = (0, _react.useCallback)(event => {\n    if (!open) {\n      dispatch({\n        type: _DisclosureContext.DisclosureActionTypes.Show\n      });\n      onToggle === null || onToggle === void 0 || onToggle(true, event);\n    }\n  }, [open, dispatch, onToggle]);\n  const onMouseLeave = (0, _react.useCallback)(event => {\n    if (open) {\n      dispatch({\n        type: _DisclosureContext.DisclosureActionTypes.Hide\n      });\n      onToggle === null || onToggle === void 0 || onToggle(false, event);\n    }\n  }, [open, dispatch, onToggle]);\n  const contextValue = (0, _react.useMemo)(() => {\n    const cascadeDispatch = action => {\n      const result = dispatch(action);\n      if ('cascade' in action) {\n        parentDisclosure === null || parentDisclosure === void 0 || parentDisclosure[1](action);\n      }\n      return result;\n    };\n    return [{\n      open\n    }, cascadeDispatch, {\n      onToggle,\n      trigger\n    }];\n  }, [parentDisclosure, open, dispatch, onToggle, trigger]);\n  const renderProps = (0, _react.useMemo)(() => {\n    const renderProps = {\n      open\n    };\n    if (trigger.includes('hover')) {\n      renderProps.onMouseEnter = onMouseEnter;\n      renderProps.onMouseLeave = onMouseLeave;\n    }\n    return renderProps;\n  }, [open, trigger, onMouseEnter, onMouseLeave]);\n  return /*#__PURE__*/_react.default.createElement(_DisclosureContext.default.Provider, {\n    value: contextValue,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 127,\n      columnNumber: 5\n    }\n  }, children(renderProps, containerElementRef));\n});\nDisclosure.displayName = 'Disclosure';\nDisclosure.Button = _DisclosureButton.default;\nDisclosure.Content = _DisclosureContent.default;\nvar _default = exports[\"default\"] = Disclosure;\n\n//# sourceURL=webpack://rsuite/./src/internals/Disclosure/Disclosure.tsx?");
 
 /***/ }),
 
@@ -6208,7 +6208,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\"] = useMenu;\nexports.initialMenuState = void 0;\nexports.menuReducer = menuReducer;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _MenuContext = __webpack_require__(/*! ./MenuContext */ \"./src/internals/Menu/MenuContext.ts\");\n// Inspired by tailwindlabs/headlessui\n\nconst initialMenuState = exports.initialMenuState = {\n  role: 'menu',\n  open: false,\n  items: [],\n  activeItemIndex: null\n};\nfunction menuReducer(state, action) {\n  const {\n    items,\n    activeItemIndex\n  } = state;\n  switch (action.type) {\n    case _MenuContext.MenuActionTypes.RegisterItem:\n      return {\n        ...state,\n        items: [...items, {\n          element: action.element,\n          props: action.props\n        }]\n      };\n    case _MenuContext.MenuActionTypes.UnregisterItem:\n      return {\n        ...state,\n        items: items.filter(item => item.element.id !== action.id)\n      };\n    case _MenuContext.MenuActionTypes.OpenMenu:\n      return {\n        ...state,\n        open: true\n      };\n    case _MenuContext.MenuActionTypes.CloseMenu:\n      return {\n        ...state,\n        open: false\n      };\n    case _MenuContext.MenuActionTypes.MoveFocus:\n      let nextActiveItemIndex = activeItemIndex;\n      switch (action.to) {\n        case _MenuContext.MoveFocusTo.Next:\n          for (let i = activeItemIndex === null ? 0 : activeItemIndex + 1; i < items.length; i++) {\n            var _items$i$props;\n            if (!((_items$i$props = items[i].props) !== null && _items$i$props !== void 0 && _items$i$props.disabled)) {\n              nextActiveItemIndex = i;\n              break;\n            }\n          }\n          break;\n        case _MenuContext.MoveFocusTo.Prev:\n          for (let i = activeItemIndex === null ? items.length - 1 : activeItemIndex - 1; i >= 0; i--) {\n            var _items$i$props2;\n            if (!((_items$i$props2 = items[i].props) !== null && _items$i$props2 !== void 0 && _items$i$props2.disabled)) {\n              nextActiveItemIndex = i;\n              break;\n            }\n          }\n          break;\n        case _MenuContext.MoveFocusTo.First:\n          for (let i = 0; i < items.length; i++) {\n            var _items$i$props3;\n            if (!((_items$i$props3 = items[i].props) !== null && _items$i$props3 !== void 0 && _items$i$props3.disabled)) {\n              nextActiveItemIndex = i;\n              break;\n            }\n          }\n          break;\n        case _MenuContext.MoveFocusTo.Last:\n          for (let i = items.length - 1; i >= 0; i--) {\n            var _items$i$props4;\n            if (!((_items$i$props4 = items[i].props) !== null && _items$i$props4 !== void 0 && _items$i$props4.disabled)) {\n              nextActiveItemIndex = i;\n              break;\n            }\n          }\n          break;\n        case _MenuContext.MoveFocusTo.Specific:\n          for (let i = 0; i < items.length; i++) {\n            var _items$i$props5;\n            if (items[i].element.id === action.id && !((_items$i$props5 = items[i].props) !== null && _items$i$props5 !== void 0 && _items$i$props5.disabled)) {\n              nextActiveItemIndex = i;\n              break;\n            }\n          }\n          break;\n        case _MenuContext.MoveFocusTo.None:\n          nextActiveItemIndex = null;\n          break;\n      }\n      return {\n        ...state,\n        activeItemIndex: nextActiveItemIndex\n      };\n    default:\n      return state;\n  }\n}\nfunction useMenu(initialState) {\n  // `menuitem`s\n  const [state, dispatch] = (0, _react.useReducer)(menuReducer, {\n    ...initialMenuState,\n    ...initialState\n  });\n  return [state, dispatch];\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/Menu/useMenu.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = useMenu;\nexports.initialMenuState = void 0;\nexports.menuReducer = menuReducer;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _MenuContext = __webpack_require__(/*! ./MenuContext */ \"./src/internals/Menu/MenuContext.ts\");\n// Inspired by tailwindlabs/headlessui\n\nconst initialMenuState = exports.initialMenuState = {\n  role: 'menu',\n  open: false,\n  items: [],\n  activeItemIndex: null\n};\nfunction menuReducer(state, action) {\n  const {\n    items,\n    activeItemIndex\n  } = state;\n  switch (action.type) {\n    case _MenuContext.MenuActionTypes.RegisterItem:\n      return {\n        ...state,\n        items: [...items, {\n          element: action.element,\n          props: action.props\n        }]\n      };\n    case _MenuContext.MenuActionTypes.UnregisterItem:\n      return {\n        ...state,\n        items: items.filter(item => item.element.id !== action.id)\n      };\n    case _MenuContext.MenuActionTypes.OpenMenu:\n      return {\n        ...state,\n        open: true\n      };\n    case _MenuContext.MenuActionTypes.CloseMenu:\n      return {\n        ...state,\n        open: false\n      };\n    case _MenuContext.MenuActionTypes.MoveFocus:\n      {\n        let nextActiveItemIndex = activeItemIndex;\n        switch (action.to) {\n          case _MenuContext.MoveFocusTo.Next:\n            for (let i = activeItemIndex === null ? 0 : activeItemIndex + 1; i < items.length; i++) {\n              var _items$i$props;\n              if (!((_items$i$props = items[i].props) !== null && _items$i$props !== void 0 && _items$i$props.disabled)) {\n                nextActiveItemIndex = i;\n                break;\n              }\n            }\n            break;\n          case _MenuContext.MoveFocusTo.Prev:\n            for (let i = activeItemIndex === null ? items.length - 1 : activeItemIndex - 1; i >= 0; i--) {\n              var _items$i$props2;\n              if (!((_items$i$props2 = items[i].props) !== null && _items$i$props2 !== void 0 && _items$i$props2.disabled)) {\n                nextActiveItemIndex = i;\n                break;\n              }\n            }\n            break;\n          case _MenuContext.MoveFocusTo.First:\n            for (let i = 0; i < items.length; i++) {\n              var _items$i$props3;\n              if (!((_items$i$props3 = items[i].props) !== null && _items$i$props3 !== void 0 && _items$i$props3.disabled)) {\n                nextActiveItemIndex = i;\n                break;\n              }\n            }\n            break;\n          case _MenuContext.MoveFocusTo.Last:\n            for (let i = items.length - 1; i >= 0; i--) {\n              var _items$i$props4;\n              if (!((_items$i$props4 = items[i].props) !== null && _items$i$props4 !== void 0 && _items$i$props4.disabled)) {\n                nextActiveItemIndex = i;\n                break;\n              }\n            }\n            break;\n          case _MenuContext.MoveFocusTo.Specific:\n            for (let i = 0; i < items.length; i++) {\n              var _items$i$props5;\n              if (items[i].element.id === action.id && !((_items$i$props5 = items[i].props) !== null && _items$i$props5 !== void 0 && _items$i$props5.disabled)) {\n                nextActiveItemIndex = i;\n                break;\n              }\n            }\n            break;\n          case _MenuContext.MoveFocusTo.None:\n            nextActiveItemIndex = null;\n            break;\n        }\n        return {\n          ...state,\n          activeItemIndex: nextActiveItemIndex\n        };\n      }\n    default:\n      return state;\n  }\n}\nfunction useMenu(initialState) {\n  // `menuitem`s\n  const [state, dispatch] = (0, _react.useReducer)(menuReducer, {\n    ...initialMenuState,\n    ...initialState\n  });\n  return [state, dispatch];\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/Menu/useMenu.ts?");
 
 /***/ }),
 
@@ -6439,7 +6439,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _react
 /***/ (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 _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _find = _interopRequireDefault(__webpack_require__(/*! lodash/find */ \"./node_modules/lodash/find.js\"));\nvar _domLib = __webpack_require__(/*! dom-lib */ \"./node_modules/dom-lib/esm/index.js\");\nvar _hooks = __webpack_require__(/*! ../../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../../Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _utils3 = __webpack_require__(/*! ../utils */ \"./src/internals/Picker/utils.ts\");\n/**\n * A hook that manages the focus state of the option.\n * @param defaultFocusItemValue\n * @param props\n */\nconst useFocusItemValue = (defaultFocusItemValue, props) => {\n  const {\n    valueKey = 'value',\n    focusableQueryKey = '[data-key][aria-disabled=\"false\"]',\n    defaultLayer = 0,\n    focusToOption = true,\n    data,\n    target,\n    rtl,\n    callback,\n    // TODO-Doma This legacy behavior of using `.parent` property should be deprecated\n    //           Always explicitly pass `getParent` when there's need to traverse upwards\n    getParent = item => item === null || item === void 0 ? void 0 : item.parent\n  } = props;\n  const [focusItemValue, setFocusItemValue] = (0, _react.useState)(defaultFocusItemValue);\n  const [layer, setLayer] = (0, _react.useState)(defaultLayer);\n  const [keys, setKeys] = (0, _react.useState)([]);\n  const focusCallback = (0, _hooks.useEventCallback)((value, event) => {\n    if (focusToOption) {\n      const menu = (0, _isFunction.default)(target) ? target() : target;\n      const focusElement = menu === null || menu === void 0 ? void 0 : menu.querySelector(`[data-key=\"${value}\"]`);\n      focusElement === null || focusElement === void 0 || focusElement.focus();\n    }\n    callback === null || callback === void 0 || callback(value, event);\n  });\n  const getScrollContainer = (0, _hooks.useEventCallback)(() => {\n    const menu = (0, _isFunction.default)(target) ? target() : target;\n\n    // For Cascader and MutiCascader\n    const subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(`[data-layer=\"${layer}\"]`);\n    if (subMenu) {\n      return subMenu;\n    }\n\n    // For SelectPicker、CheckPicker、Autocomplete、InputPicker、TagPicker\n    return menu === null || menu === void 0 ? void 0 : menu.querySelector('[role=\"listbox\"]');\n  });\n\n  /**\n   * Get the elements visible in all options.\n   */\n  const getFocusableMenuItems = () => {\n    if (!target) {\n      return [];\n    }\n    let currentKeys = keys;\n    if (layer < 1) {\n      const popup = (0, _isFunction.default)(target) ? target() : target;\n      const rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer=\"0\"]');\n      if (rootMenu) {\n        var _rootMenu$querySelect;\n        currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(item => {\n          var _item$dataset;\n          return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;\n        });\n      } else {\n        var _popup$querySelectorA;\n        currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(item => {\n          var _item$dataset2;\n          return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;\n        });\n      }\n    }\n\n    // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.\n    // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string\n    return currentKeys.map(key => (0, _find.default)(data, i => `${i[valueKey]}` === key));\n  };\n\n  /**\n   * Get the index of the focus item.\n   */\n  const findFocusItemIndex = (0, _hooks.useEventCallback)(callback => {\n    const items = getFocusableMenuItems();\n    for (let i = 0; i < items.length; i += 1) {\n      var _items$i;\n      if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {\n        callback(items, i);\n        return;\n      }\n    }\n    callback(items, -1);\n  });\n  const scrollListItem = (0, _hooks.useEventCallback)((direction, itemValue, willOverflow) => {\n    const container = getScrollContainer();\n    const item = container === null || container === void 0 ? void 0 : container.querySelector(`[data-key=\"${itemValue}\"]`);\n    if (willOverflow && container) {\n      const {\n        scrollHeight,\n        clientHeight\n      } = container;\n      container.scrollTop = direction === 'top' ? scrollHeight - clientHeight : 0;\n      return;\n    }\n    if (item && container) {\n      if (!isVisible(item, container, direction)) {\n        const height = (0, _domLib.getHeight)(item);\n        scrollTo(container, direction, height);\n      }\n    }\n  });\n  const focusNextMenuItem = (0, _hooks.useEventCallback)(event => {\n    findFocusItemIndex((items, index) => {\n      const willOverflow = index + 2 > items.length;\n      const nextIndex = willOverflow ? 0 : index + 1;\n      const focusItem = items[nextIndex];\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        focusCallback(focusItem[valueKey], event);\n        scrollListItem('bottom', focusItem[valueKey], willOverflow);\n      }\n    });\n  });\n  const focusPrevMenuItem = (0, _hooks.useEventCallback)(event => {\n    findFocusItemIndex((items, index) => {\n      const willOverflow = index === 0;\n      const nextIndex = willOverflow ? items.length - 1 : index - 1;\n      const focusItem = items[nextIndex];\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        focusCallback(focusItem[valueKey], event);\n        scrollListItem('top', focusItem[valueKey], willOverflow);\n      }\n    });\n  });\n  const getSubMenuKeys = nextLayer => {\n    const menu = (0, _isFunction.default)(target) ? target() : target;\n    const subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(`[data-layer=\"${nextLayer}\"]`);\n    if (subMenu) {\n      var _Array$from;\n      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(item => {\n        var _item$dataset3;\n        return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;\n      });\n    }\n    return null;\n  };\n  const focusNextLevelMenu = (0, _hooks.useEventCallback)(event => {\n    const nextLayer = layer + 1;\n    const nextKeys = getSubMenuKeys(nextLayer);\n    if (nextKeys) {\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      setFocusItemValue(nextKeys[0]);\n      focusCallback(nextKeys[0], event);\n    }\n  });\n  const focusPrevLevelMenu = (0, _hooks.useEventCallback)(event => {\n    const nextLayer = layer - 1;\n    const nextKeys = getSubMenuKeys(nextLayer);\n    if (nextKeys) {\n      var _getParent;\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      const focusItem = (0, _utils2.findNodeOfTree)(data, item => item[valueKey] === focusItemValue);\n      const parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];\n      if (parentItemValue) {\n        setFocusItemValue(parentItemValue);\n        focusCallback(parentItemValue, event);\n      }\n    }\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    (0, _utils3.onMenuKeyDown)(event, {\n      down: focusNextMenuItem,\n      up: focusPrevMenuItem,\n      [rtl ? 'left' : 'right']: focusNextLevelMenu,\n      [rtl ? 'right' : 'left']: focusPrevLevelMenu\n    });\n  });\n  return {\n    focusItemValue,\n    setFocusItemValue,\n    layer,\n    setLayer,\n    keys,\n    setKeys,\n    onKeyDown: handleKeyDown\n  };\n};\nfunction scrollTo(container, direction, step) {\n  const {\n    scrollTop\n  } = container;\n  container.scrollTop = direction === 'top' ? scrollTop - step : scrollTop + step;\n}\n\n/**\n * Checks if the element has a vertical scrollbar.\n */\nfunction hasVerticalScroll(element) {\n  const {\n    scrollHeight,\n    clientHeight\n  } = element;\n  return scrollHeight > clientHeight;\n}\n\n/**\n * Checks if the element is within the visible area of the container\n */\nfunction isVisible(element, container, direction) {\n  if (!hasVerticalScroll(container)) {\n    return true;\n  }\n  const {\n    top,\n    bottom,\n    height\n  } = element.getBoundingClientRect();\n  const {\n    top: containerTop,\n    bottom: containerBottom\n  } = container.getBoundingClientRect();\n  if (direction === 'top') {\n    return top + height > containerTop;\n  }\n  return bottom - height < containerBottom;\n}\nvar _default = exports[\"default\"] = useFocusItemValue;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/useFocusItemValue.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 _isFunction = _interopRequireDefault(__webpack_require__(/*! lodash/isFunction */ \"./node_modules/lodash/isFunction.js\"));\nvar _isUndefined = _interopRequireDefault(__webpack_require__(/*! lodash/isUndefined */ \"./node_modules/lodash/isUndefined.js\"));\nvar _find = _interopRequireDefault(__webpack_require__(/*! lodash/find */ \"./node_modules/lodash/find.js\"));\nvar _domLib = __webpack_require__(/*! dom-lib */ \"./node_modules/dom-lib/esm/index.js\");\nvar _hooks = __webpack_require__(/*! ../../hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../../utils */ \"./src/internals/utils/index.ts\");\nvar _utils2 = __webpack_require__(/*! ../../Tree/utils */ \"./src/internals/Tree/utils/index.ts\");\nvar _utils3 = __webpack_require__(/*! ../utils */ \"./src/internals/Picker/utils.ts\");\n/**\n * A hook that manages the focus state of the option.\n * @param defaultFocusItemValue\n * @param props\n */\nconst useFocusItemValue = (defaultFocusItemValue, props) => {\n  const {\n    valueKey = 'value',\n    focusableQueryKey = '[data-key][aria-disabled=\"false\"]',\n    defaultLayer = 0,\n    focusToOption = true,\n    data,\n    target,\n    rtl,\n    callback,\n    // TODO-Doma This legacy behavior of using `.parent` property should be deprecated\n    //           Always explicitly pass `getParent` when there's need to traverse upwards\n    getParent = item => item === null || item === void 0 ? void 0 : item.parent\n  } = props;\n  const [focusItemValue, setFocusItemValue] = (0, _react.useState)(defaultFocusItemValue);\n  const [layer, setLayer] = (0, _react.useState)(defaultLayer);\n  const [keys, setKeys] = (0, _react.useState)([]);\n  const focusCallback = (0, _hooks.useEventCallback)((value, event) => {\n    if (focusToOption) {\n      const menu = (0, _isFunction.default)(target) ? target() : target;\n      const focusElement = menu === null || menu === void 0 ? void 0 : menu.querySelector(`[data-key=\"${value}\"]`);\n      focusElement === null || focusElement === void 0 || focusElement.focus();\n    }\n    callback === null || callback === void 0 || callback(value, event);\n  });\n  const getScrollContainer = (0, _hooks.useEventCallback)(() => {\n    const menu = (0, _isFunction.default)(target) ? target() : target;\n\n    // For Cascader and MutiCascader\n    const subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(`[data-layer=\"${layer}\"]`);\n    if (subMenu) {\n      return subMenu;\n    }\n\n    // For SelectPicker、CheckPicker、Autocomplete、InputPicker、TagPicker\n    return menu === null || menu === void 0 ? void 0 : menu.querySelector('[role=\"listbox\"]');\n  });\n\n  /**\n   * Get the elements visible in all options.\n   */\n  const getFocusableMenuItems = () => {\n    if (!target) {\n      return [];\n    }\n    let currentKeys = keys;\n    if (layer < 1) {\n      const popup = (0, _isFunction.default)(target) ? target() : target;\n      const rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer=\"0\"]');\n      if (rootMenu) {\n        var _rootMenu$querySelect;\n        currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(item => {\n          var _item$dataset;\n          return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;\n        });\n      } else {\n        var _popup$querySelectorA;\n        currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(item => {\n          var _item$dataset2;\n          return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;\n        });\n      }\n    }\n\n    // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.\n    // 2. The values in `keys` are all string, so the corresponding value of `data` should also be converted to string\n    return currentKeys.map(key => (0, _find.default)(data, i => `${i[valueKey]}` === key));\n  };\n\n  /**\n   * Get the index of the focus item.\n   */\n  const findFocusItemIndex = (0, _hooks.useEventCallback)(callback => {\n    const items = getFocusableMenuItems();\n    for (let i = 0; i < items.length; i += 1) {\n      var _items$i;\n      if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {\n        callback(items, i);\n        return;\n      }\n    }\n    callback(items, -1);\n  });\n  const scrollListItem = (0, _hooks.useEventCallback)((direction, itemValue, willOverflow) => {\n    const container = getScrollContainer();\n    const item = container === null || container === void 0 ? void 0 : container.querySelector(`[data-key=\"${itemValue}\"]`);\n    if (willOverflow && container) {\n      const {\n        scrollHeight,\n        clientHeight\n      } = container;\n      container.scrollTop = direction === 'top' ? scrollHeight - clientHeight : 0;\n      return;\n    }\n    if (item && container) {\n      if (!isVisible(item, container, direction)) {\n        const height = (0, _domLib.getHeight)(item);\n        scrollTo(container, direction, height);\n      }\n    }\n  });\n  const focusNextMenuItem = (0, _hooks.useEventCallback)(event => {\n    findFocusItemIndex((items, index) => {\n      const willOverflow = index + 2 > items.length;\n      const nextIndex = willOverflow ? 0 : index + 1;\n      const focusItem = items[nextIndex];\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        focusCallback(focusItem[valueKey], event);\n        scrollListItem('bottom', focusItem[valueKey], willOverflow);\n      }\n    });\n  });\n  const focusPrevMenuItem = (0, _hooks.useEventCallback)(event => {\n    findFocusItemIndex((items, index) => {\n      const willOverflow = index === 0;\n      const nextIndex = willOverflow ? items.length - 1 : index - 1;\n      const focusItem = items[nextIndex];\n      if (!(0, _isUndefined.default)(focusItem)) {\n        setFocusItemValue(focusItem[valueKey]);\n        focusCallback(focusItem[valueKey], event);\n        scrollListItem('top', focusItem[valueKey], willOverflow);\n      }\n    });\n  });\n  const getSubMenuKeys = nextLayer => {\n    const menu = (0, _isFunction.default)(target) ? target() : target;\n    const subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(`[data-layer=\"${nextLayer}\"]`);\n    if (subMenu) {\n      var _Array$from;\n      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(item => {\n        var _item$dataset3;\n        return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;\n      });\n    }\n    return null;\n  };\n  const focusNextLevelMenu = (0, _hooks.useEventCallback)(event => {\n    const nextLayer = layer + 1;\n    const nextKeys = getSubMenuKeys(nextLayer);\n    if (nextKeys) {\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      setFocusItemValue(nextKeys[0]);\n      focusCallback(nextKeys[0], event);\n    }\n  });\n  const focusPrevLevelMenu = (0, _hooks.useEventCallback)(event => {\n    const nextLayer = layer - 1;\n    const nextKeys = getSubMenuKeys(nextLayer);\n    if (nextKeys) {\n      var _getParent;\n      setKeys(nextKeys);\n      setLayer(nextLayer);\n      const focusItem = (0, _utils2.findNodeOfTree)(data, item => item[valueKey] === focusItemValue);\n      const parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];\n      if (parentItemValue) {\n        setFocusItemValue(parentItemValue);\n        focusCallback(parentItemValue, event);\n      }\n    }\n  });\n  const handleKeyDown = (0, _hooks.useEventCallback)(event => {\n    (0, _utils3.onMenuKeyDown)(event, {\n      down: focusNextMenuItem,\n      up: focusPrevMenuItem,\n      [rtl ? 'left' : 'right']: focusNextLevelMenu,\n      [rtl ? 'right' : 'left']: focusPrevLevelMenu\n    });\n  });\n  return {\n    focusItemValue,\n    setFocusItemValue,\n    layer,\n    setLayer,\n    keys,\n    setKeys,\n    onKeyDown: handleKeyDown\n  };\n};\nfunction scrollTo(container, direction, step) {\n  const {\n    scrollTop\n  } = container;\n  container.scrollTop = direction === 'top' ? scrollTop - step : scrollTop + step;\n}\n\n/**\n * Checks if the element has a vertical scrollbar.\n */\nfunction hasVerticalScroll(element) {\n  const {\n    scrollHeight,\n    clientHeight\n  } = element;\n  return scrollHeight > clientHeight;\n}\n\n/**\n * Checks if the element is within the visible area of the container\n */\nfunction isVisible(element, container, direction) {\n  if (!hasVerticalScroll(container)) {\n    return true;\n  }\n  const {\n    top,\n    bottom,\n    height\n  } = element.getBoundingClientRect();\n  const {\n    top: containerTop,\n    bottom: containerBottom\n  } = container.getBoundingClientRect();\n  if (direction === 'top') {\n    return top + height > containerTop;\n  }\n  return bottom - height < containerBottom;\n}\nvar _default = exports[\"default\"] = useFocusItemValue;\n\n//# sourceURL=webpack://rsuite/./src/internals/Picker/hooks/useFocusItemValue.ts?");
 
 /***/ }),
 
@@ -6626,7 +6626,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 _TreeProvider = __webpack_require__(/*! ./TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Tree/TreeView.tsx\";\nconst ScrollShadowView = /*#__PURE__*/_react.default.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: 12\n    }\n  }));\n});\nconst TreeView = /*#__PURE__*/_react.default.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 Component = 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(Component, (0, _extends2.default)({\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: 39,\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});\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 _TreeProvider = __webpack_require__(/*! ./TreeProvider */ \"./src/internals/Tree/TreeProvider.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Tree/TreeView.tsx\";\nconst ScrollShadowView = /*#__PURE__*/_react.default.forwardRef(function ScrollShadowView(props, ref) {\n  return /*#__PURE__*/_react.default.createElement(_ScrollView.default, (0, _extends2.default)({\n    scrollShadow: true,\n    ref: ref\n  }, props, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 17,\n      columnNumber: 10\n    }\n  }));\n});\nconst TreeView = /*#__PURE__*/_react.default.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 Component = 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(Component, (0, _extends2.default)({\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: 49,\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?");
 
 /***/ }),
 
@@ -6681,7 +6681,7 @@ eval("\n\nexports.__esModule = true;\nexports.getKeyParentMap = getKeyParentMap;
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.getPathTowardsItem = getPathTowardsItem;\n/**\n * Returns an array indicating the hierarchy path from root towards `target` item\n */\nfunction getPathTowardsItem(target, getParent) {\n  if (!target) return [];\n  const path = [target];\n  for (let parent = getParent(target); !!parent; parent = getParent(parent)) {\n    path.unshift(parent);\n  }\n  return path;\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/Tree/utils/getPathTowardsItem.ts?");
+eval("\n\nexports.__esModule = true;\nexports.getPathTowardsItem = getPathTowardsItem;\n/**\n * Returns an array indicating the hierarchy path from root towards `target` item\n */\nfunction getPathTowardsItem(target, getParent) {\n  if (!target) return [];\n  const path = [target];\n  for (let parent = getParent(target); parent; parent = getParent(parent)) {\n    path.unshift(parent);\n  }\n  return path;\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/Tree/utils/getPathTowardsItem.ts?");
 
 /***/ }),
 
@@ -6703,7 +6703,7 @@ eval("\n\nexports.__esModule = true;\nexports.getPathTowardsItem = exports.getPa
 /***/ (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 _getStyle = _interopRequireDefault(__webpack_require__(/*! dom-lib/getStyle */ \"./node_modules/dom-lib/esm/getStyle.js\"));\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/Windowing/AutoSizer.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 * High-order component that automatically adjusts the width and height of a single child.\n *\n * @private\n */\nconst AutoSizer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    disableHeight,\n    disableWidth,\n    defaultHeight,\n    defaultWidth,\n    style,\n    onResize,\n    ...rest\n  } = props;\n  const [height, setHeight] = (0, _react.useState)(defaultHeight || 0);\n  const [width, setWidth] = (0, _react.useState)(defaultWidth || 0);\n  const rootRef = (0, _react.useRef)(null);\n  const getParentNode = (0, _react.useCallback)(() => {\n    var _rootRef$current;\n    if ((_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 && _rootRef$current.parentNode && rootRef.current.parentNode.ownerDocument && rootRef.current.parentNode.ownerDocument.defaultView && rootRef.current.parentNode instanceof rootRef.current.parentNode.ownerDocument.defaultView.HTMLElement) {\n      return rootRef.current.parentNode;\n    }\n    return null;\n  }, []);\n  const handleResize = (0, _react.useCallback)(() => {\n    const parentNode = getParentNode();\n    if (parentNode) {\n      const offsetHeight = parentNode.offsetHeight || 0;\n      const offsetWidth = parentNode.offsetWidth || 0;\n      const style = (0, _getStyle.default)(parentNode);\n      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;\n      const paddingRight = parseInt(style.paddingRight, 10) || 0;\n      const paddingTop = parseInt(style.paddingTop, 10) || 0;\n      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;\n      const newHeight = offsetHeight - paddingTop - paddingBottom;\n      const newWidth = offsetWidth - paddingLeft - paddingRight;\n      if (!disableHeight && height !== newHeight || !disableWidth && width !== newWidth) {\n        setHeight(offsetHeight - paddingTop - paddingBottom);\n        setWidth(offsetWidth - paddingLeft - paddingRight);\n        onResize === null || onResize === void 0 || onResize({\n          height: offsetHeight,\n          width: offsetWidth\n        });\n      }\n    }\n  }, [disableHeight, disableWidth, getParentNode, height, onResize, width]);\n  (0, _hooks.useMount)(handleResize);\n  (0, _hooks.useElementResize)(getParentNode(), handleResize);\n  const outerStyle = {\n    overflow: 'visible'\n  };\n  const childParams = {\n    width: 0,\n    height: 0\n  };\n  if (!disableHeight) {\n    outerStyle.height = 0;\n    childParams.height = height;\n  }\n  if (!disableWidth) {\n    outerStyle.width = 0;\n    childParams.width = width;\n  }\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    className: className,\n    ref: (0, _utils.mergeRefs)(rootRef, ref),\n    style: {\n      ...outerStyle,\n      ...style\n    }\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 113,\n      columnNumber: 5\n    }\n  }), children(childParams));\n});\nvar _default = exports[\"default\"] = AutoSizer;\n\n//# sourceURL=webpack://rsuite/./src/internals/Windowing/AutoSizer.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 _getStyle = _interopRequireDefault(__webpack_require__(/*! dom-lib/getStyle */ \"./node_modules/dom-lib/esm/getStyle.js\"));\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/Windowing/AutoSizer.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 * High-order component that automatically adjusts the width and height of a single child.\n *\n * @private\n */\nconst AutoSizer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    disableHeight,\n    disableWidth,\n    defaultHeight,\n    defaultWidth,\n    style,\n    onResize,\n    ...rest\n  } = props;\n  const [height, setHeight] = (0, _react.useState)(defaultHeight || 0);\n  const [width, setWidth] = (0, _react.useState)(defaultWidth || 0);\n  const rootRef = (0, _react.useRef)(null);\n  const getParentNode = (0, _react.useCallback)(() => {\n    var _rootRef$current;\n    if ((_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 && _rootRef$current.parentNode && rootRef.current.parentNode.ownerDocument && rootRef.current.parentNode.ownerDocument.defaultView && rootRef.current.parentNode instanceof rootRef.current.parentNode.ownerDocument.defaultView.HTMLElement) {\n      return rootRef.current.parentNode;\n    }\n    return null;\n  }, []);\n  const handleResize = (0, _react.useCallback)(() => {\n    const parentNode = getParentNode();\n    if (parentNode) {\n      const offsetHeight = parentNode.offsetHeight || 0;\n      const offsetWidth = parentNode.offsetWidth || 0;\n      const style = (0, _getStyle.default)(parentNode);\n      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;\n      const paddingRight = parseInt(style.paddingRight, 10) || 0;\n      const paddingTop = parseInt(style.paddingTop, 10) || 0;\n      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;\n      const newHeight = offsetHeight - paddingTop - paddingBottom;\n      const newWidth = offsetWidth - paddingLeft - paddingRight;\n      if (!disableHeight && height !== newHeight || !disableWidth && width !== newWidth) {\n        setHeight(offsetHeight - paddingTop - paddingBottom);\n        setWidth(offsetWidth - paddingLeft - paddingRight);\n        onResize === null || onResize === void 0 || onResize({\n          height: offsetHeight,\n          width: offsetWidth\n        });\n      }\n    }\n  }, [disableHeight, disableWidth, getParentNode, height, onResize, width]);\n  (0, _hooks.useMount)(handleResize);\n  (0, _hooks.useElementResize)(getParentNode(), handleResize);\n  const outerStyle = {\n    overflow: 'visible'\n  };\n  const childParams = {\n    width: 0,\n    height: 0\n  };\n  if (!disableHeight) {\n    outerStyle.height = 0;\n    childParams.height = height;\n  }\n  if (!disableWidth) {\n    outerStyle.width = 0;\n    childParams.width = width;\n  }\n  return /*#__PURE__*/_react.default.createElement(\"div\", (0, _extends2.default)({\n    className: className,\n    ref: (0, _utils.mergeRefs)(rootRef, ref),\n    style: {\n      ...outerStyle,\n      ...style\n    }\n  }, rest, {\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 113,\n      columnNumber: 5\n    }\n  }), children(childParams));\n});\nAutoSizer.displayName = 'AutoSizer';\nvar _default = exports[\"default\"] = AutoSizer;\n\n//# sourceURL=webpack://rsuite/./src/internals/Windowing/AutoSizer.tsx?");
 
 /***/ }),
 
@@ -6714,7 +6714,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.defaultItemSize = exports[\"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 _ScrollView = _interopRequireDefault(__webpack_require__(/*! ../ScrollView */ \"./src/internals/ScrollView/index.tsx\"));\nvar _reactWindow = __webpack_require__(/*! react-window */ \"./node_modules/react-window/dist/index.esm.js\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Windowing/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 defaultItemSize = () => 36;\nexports.defaultItemSize = defaultItemSize;\nconst OuterElementType = /*#__PURE__*/_react.default.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: 78,\n      columnNumber: 10\n    }\n  }));\n});\n\n/**\n * This component renders a virtualized list of elements with either fixed or dynamic heights.\n *\n * @private\n */\nconst List = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    rowHeight,\n    as: Component = _reactWindow.VariableSizeList,\n    itemSize: itemSizeProp,\n    scrollShadow,\n    ...rest\n  } = props;\n  const listRef = (0, _react.useRef)(null);\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)();\n  (0, _react.useImperativeHandle)(ref, () => ({\n    resetAfterIndex: (index, shouldForceUpdate) => {\n      var _listRef$current, _listRef$current$rese;\n      (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current$rese = _listRef$current.resetAfterIndex) === null || _listRef$current$rese === void 0 || _listRef$current$rese.call(_listRef$current, index, shouldForceUpdate);\n    },\n    scrollTo: scrollOffset => {\n      var _listRef$current2, _listRef$current2$scr;\n      (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || (_listRef$current2$scr = _listRef$current2.scrollTo) === null || _listRef$current2$scr === void 0 || _listRef$current2$scr.call(_listRef$current2, scrollOffset);\n    },\n    scrollToItem: (index, align) => {\n      var _listRef$current3, _listRef$current3$scr;\n      (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || (_listRef$current3$scr = _listRef$current3.scrollToItem) === null || _listRef$current3$scr === void 0 || _listRef$current3$scr.call(_listRef$current3, index, align);\n    },\n    scrollToRow: index => {\n      var _listRef$current4, _listRef$current4$scr;\n      (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 || (_listRef$current4$scr = _listRef$current4.scrollToItem) === null || _listRef$current4$scr === void 0 || _listRef$current4$scr.call(_listRef$current4, index);\n    }\n  }));\n  const setRowHeight = (0, _react.useCallback)(index => {\n    return typeof rowHeight === 'function' ? rowHeight({\n      index\n    }) : rowHeight || 0;\n  }, [rowHeight]);\n  const itemSize = (0, _react.useMemo)(() => {\n    if (typeof itemSizeProp === 'function') return itemSizeProp;\n    return () => itemSizeProp;\n  }, [itemSizeProp]);\n  const compatibleProps = {\n    itemSize,\n    ...rest\n  };\n  if (rowHeight) {\n    compatibleProps.itemSize = Component === _reactWindow.VariableSizeList ? setRowHeight : rowHeight;\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: listRef,\n    direction: rtl ? 'rtl' : 'ltr'\n  }, compatibleProps, {\n    outerElementType: scrollShadow ? OuterElementType : undefined,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 5\n    }\n  }));\n});\nvar _default = exports[\"default\"] = List;\n\n//# sourceURL=webpack://rsuite/./src/internals/Windowing/List.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.defaultItemSize = exports[\"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 _ScrollView = _interopRequireDefault(__webpack_require__(/*! ../ScrollView */ \"./src/internals/ScrollView/index.tsx\"));\nvar _reactWindow = __webpack_require__(/*! react-window */ \"./node_modules/react-window/dist/index.esm.js\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/Windowing/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 defaultItemSize = () => 36;\nexports.defaultItemSize = defaultItemSize;\nconst OuterElementType = /*#__PURE__*/_react.default.forwardRef(function OuterElementType(props, ref) {\n  return /*#__PURE__*/_react.default.createElement(_ScrollView.default, (0, _extends2.default)({\n    scrollShadow: true,\n    ref: ref\n  }, props, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 78,\n      columnNumber: 10\n    }\n  }));\n});\n\n/**\n * This component renders a virtualized list of elements with either fixed or dynamic heights.\n *\n * @private\n */\nconst List = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    rowHeight,\n    as: Component = _reactWindow.VariableSizeList,\n    itemSize: itemSizeProp,\n    scrollShadow,\n    ...rest\n  } = props;\n  const listRef = (0, _react.useRef)(null);\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)();\n  (0, _react.useImperativeHandle)(ref, () => ({\n    resetAfterIndex: (index, shouldForceUpdate) => {\n      var _listRef$current, _listRef$current$rese;\n      (_listRef$current = listRef.current) === null || _listRef$current === void 0 || (_listRef$current$rese = _listRef$current.resetAfterIndex) === null || _listRef$current$rese === void 0 || _listRef$current$rese.call(_listRef$current, index, shouldForceUpdate);\n    },\n    scrollTo: scrollOffset => {\n      var _listRef$current2, _listRef$current2$scr;\n      (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || (_listRef$current2$scr = _listRef$current2.scrollTo) === null || _listRef$current2$scr === void 0 || _listRef$current2$scr.call(_listRef$current2, scrollOffset);\n    },\n    scrollToItem: (index, align) => {\n      var _listRef$current3, _listRef$current3$scr;\n      (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || (_listRef$current3$scr = _listRef$current3.scrollToItem) === null || _listRef$current3$scr === void 0 || _listRef$current3$scr.call(_listRef$current3, index, align);\n    },\n    scrollToRow: index => {\n      var _listRef$current4, _listRef$current4$scr;\n      (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 || (_listRef$current4$scr = _listRef$current4.scrollToItem) === null || _listRef$current4$scr === void 0 || _listRef$current4$scr.call(_listRef$current4, index);\n    }\n  }));\n  const setRowHeight = (0, _react.useCallback)(index => {\n    return typeof rowHeight === 'function' ? rowHeight({\n      index\n    }) : rowHeight || 0;\n  }, [rowHeight]);\n  const itemSize = (0, _react.useMemo)(() => {\n    if (typeof itemSizeProp === 'function') return itemSizeProp;\n    return () => itemSizeProp;\n  }, [itemSizeProp]);\n  const compatibleProps = {\n    itemSize,\n    ...rest\n  };\n  if (rowHeight) {\n    compatibleProps.itemSize = Component === _reactWindow.VariableSizeList ? setRowHeight : rowHeight;\n  }\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({\n    ref: listRef,\n    direction: rtl ? 'rtl' : 'ltr'\n  }, compatibleProps, {\n    outerElementType: scrollShadow ? OuterElementType : undefined,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 132,\n      columnNumber: 5\n    }\n  }));\n});\nList.displayName = 'List';\nvar _default = exports[\"default\"] = List;\n\n//# sourceURL=webpack://rsuite/./src/internals/Windowing/List.tsx?");
 
 /***/ }),
 
@@ -6769,7 +6769,7 @@ eval("\n\nexports.__esModule = true;\nexports.useWillUnmount = exports.useUpdate
 /***/ (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.useClassNames = useClassNames;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _prefix = __webpack_require__(/*! ../utils/prefix */ \"./src/internals/utils/prefix.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider/CustomProvider */ \"./src/CustomProvider/CustomProvider.tsx\");\n// This is the only way I found to break circular references between ClassArray and ClassValue\n// https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540\n\n//eslint-disable-line @typescript-eslint/no-empty-interface\n\n/**\n * Add a prefix to all classNames.\n *\n * @param str prefix of className\n * @returns { withClassPrefix, merge, prefix }\n *  - withClassPrefix: A function of combining className and adding a prefix to each className.\n *    At the same time, the default `classPrefix` is the first className.\n *  - merge: A merge className function.\n *  - prefix: Add a prefix to className\n *  - rootPrefix\n */\nfunction useClassNames(str) {\n  const {\n    classPrefix = 'rs'\n  } = (0, _react.useContext)(_CustomProvider.CustomContext) || {};\n  const componentName = (0, _prefix.prefix)(classPrefix, str);\n\n  /**\n   * @example\n   *\n   * if str = 'button':\n   * prefix('red', { active: true }) => 'rs-button-red rs-button-active'\n   */\n  const prefix = (0, _react.useCallback)(function () {\n    const mergeClasses = arguments.length ? (0, _classnames.default)(...arguments).split(' ').map(item => (0, _prefix.prefix)(componentName, item)) : [];\n    return mergeClasses.filter(cls => cls).join(' ');\n  }, [componentName]);\n\n  /**\n   * @example\n   *\n   * if str = 'button':\n   * withClassPrefix('red', { active: true }) => 'rs-button rs-button-red rs-button-active'\n   */\n  const withClassPrefix = (0, _react.useCallback)(function () {\n    for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {\n      classes[_key] = arguments[_key];\n    }\n    const mergeClasses = prefix(classes);\n    return mergeClasses ? `${componentName} ${mergeClasses}` : componentName;\n  }, [componentName, prefix]);\n\n  /**\n   * @example\n   * rootPrefix('btn') => 'rs-btn'\n   * rootPrefix('btn', { active: true }) => 'rs-btn rs-active'\n   */\n  const rootPrefix = function () {\n    const mergeClasses = arguments.length ? (0, _classnames.default)(...arguments).split(' ').map(item => (0, _prefix.prefix)(classPrefix, item)) : [];\n    return mergeClasses.filter(cls => cls).join(' ');\n  };\n  return {\n    withClassPrefix,\n    merge: _classnames.default,\n    prefix,\n    rootPrefix\n  };\n}\nvar _default = exports[\"default\"] = useClassNames;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useClassNames.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.useClassNames = useClassNames;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ \"./node_modules/classnames/index.js\"));\nvar _prefix = __webpack_require__(/*! ../utils/prefix */ \"./src/internals/utils/prefix.ts\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider/CustomProvider */ \"./src/CustomProvider/CustomProvider.tsx\");\n// This is the only way I found to break circular references between ClassArray and ClassValue\n// https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540\n\n/**\n * Add a prefix to all classNames.\n *\n * @param str prefix of className\n * @returns { withClassPrefix, merge, prefix }\n *  - withClassPrefix: A function of combining className and adding a prefix to each className.\n *    At the same time, the default `classPrefix` is the first className.\n *  - merge: A merge className function.\n *  - prefix: Add a prefix to className\n *  - rootPrefix\n */\nfunction useClassNames(str) {\n  const {\n    classPrefix = 'rs'\n  } = (0, _react.useContext)(_CustomProvider.CustomContext) || {};\n  const componentName = (0, _prefix.prefix)(classPrefix, str);\n\n  /**\n   * @example\n   *\n   * if str = 'button':\n   * prefix('red', { active: true }) => 'rs-button-red rs-button-active'\n   */\n  const prefix = (0, _react.useCallback)(function () {\n    const mergeClasses = arguments.length ? (0, _classnames.default)(...arguments).split(' ').map(item => (0, _prefix.prefix)(componentName, item)) : [];\n    return mergeClasses.filter(cls => cls).join(' ');\n  }, [componentName]);\n\n  /**\n   * @example\n   *\n   * if str = 'button':\n   * withClassPrefix('red', { active: true }) => 'rs-button rs-button-red rs-button-active'\n   */\n  const withClassPrefix = (0, _react.useCallback)(function () {\n    for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {\n      classes[_key] = arguments[_key];\n    }\n    const mergeClasses = prefix(classes);\n    return mergeClasses ? `${componentName} ${mergeClasses}` : componentName;\n  }, [componentName, prefix]);\n\n  /**\n   * @example\n   * rootPrefix('btn') => 'rs-btn'\n   * rootPrefix('btn', { active: true }) => 'rs-btn rs-active'\n   */\n  const rootPrefix = function () {\n    const mergeClasses = arguments.length ? (0, _classnames.default)(...arguments).split(' ').map(item => (0, _prefix.prefix)(classPrefix, item)) : [];\n    return mergeClasses.filter(cls => cls).join(' ');\n  };\n  return {\n    withClassPrefix,\n    merge: _classnames.default,\n    prefix,\n    rootPrefix\n  };\n}\nvar _default = exports[\"default\"] = useClassNames;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useClassNames.ts?");
 
 /***/ }),
 
@@ -6923,7 +6923,7 @@ eval("\n\nexports.__esModule = true;\nexports.useMount = exports[\"default\"] =
 /***/ (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.usePortal = usePortal;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _reactDom = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/hooks/usePortal.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 MountedPortal = /*#__PURE__*/_react.default.memo(_ref => {\n  let {\n    children,\n    container\n  } = _ref;\n  const [mounted, setMounted] = (0, _react.useState)(false);\n  (0, _react.useEffect)(() => setMounted(true), []);\n  if (container && mounted) {\n    return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);\n  }\n  return null;\n});\nfunction usePortal(props) {\n  if (props === void 0) {\n    props = {};\n  }\n  const {\n    container,\n    waitMount = false\n  } = props;\n  const containerElement = typeof container === 'function' ? container() : container;\n  const rootElement = (0, _react.useMemo)(() => _canUseDOM.default ? containerElement || document.body : null, [containerElement]);\n  const Portal = (0, _react.useCallback)(_ref2 => {\n    let {\n      children\n    } = _ref2;\n    return rootElement != null ? /*#__PURE__*/(0, _reactDom.createPortal)(children, rootElement) : null;\n  }, [rootElement]);\n  const WaitMountPortal = (0, _react.useCallback)(props => /*#__PURE__*/_react.default.createElement(MountedPortal, (0, _extends2.default)({\n    container: rootElement\n  }, props, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 41,\n      columnNumber: 14\n    }\n  })), [rootElement]);\n  return {\n    target: rootElement,\n    Portal: waitMount ? WaitMountPortal : Portal\n  };\n}\nvar _default = exports[\"default\"] = usePortal;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/usePortal.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;\nexports.usePortal = usePortal;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = _interopRequireWildcard(__webpack_require__(/*! react */ \"react\"));\nvar _reactDom = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/internals/hooks/usePortal.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 MountedPortal = /*#__PURE__*/_react.default.memo(function MountedPortal(_ref) {\n  let {\n    children,\n    container\n  } = _ref;\n  const [mounted, setMounted] = (0, _react.useState)(false);\n  (0, _react.useEffect)(() => setMounted(true), []);\n  if (container && mounted) {\n    return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);\n  }\n  return null;\n});\nfunction usePortal(props) {\n  if (props === void 0) {\n    props = {};\n  }\n  const {\n    container,\n    waitMount = false\n  } = props;\n  const containerElement = typeof container === 'function' ? container() : container;\n  const rootElement = (0, _react.useMemo)(() => _canUseDOM.default ? containerElement || document.body : null, [containerElement]);\n  const Portal = (0, _react.useCallback)(_ref2 => {\n    let {\n      children\n    } = _ref2;\n    return rootElement != null ? /*#__PURE__*/(0, _reactDom.createPortal)(children, rootElement) : null;\n  }, [rootElement]);\n  const WaitMountPortal = (0, _react.useCallback)(props => /*#__PURE__*/_react.default.createElement(MountedPortal, (0, _extends2.default)({\n    container: rootElement\n  }, props, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 45,\n      columnNumber: 14\n    }\n  })), [rootElement]);\n  return {\n    target: rootElement,\n    Portal: waitMount ? WaitMountPortal : Portal\n  };\n}\nvar _default = exports[\"default\"] = usePortal;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/usePortal.tsx?");
 
 /***/ }),
 
@@ -6956,7 +6956,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.us
 /***/ (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.useToggleCaret = useToggleCaret;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _ArrowUpLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowUpLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowUpLine.js\"));\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowDownLine.js\"));\nvar _ArrowLeftLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowLeftLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowLeftLine.js\"));\nvar _ArrowRightLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowRightLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowRightLine.js\"));\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nfunction useToggleCaret(placement) {\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)();\n  return (0, _react.useMemo)(() => {\n    switch (true) {\n      case /^top/.test(placement):\n        return _ArrowUpLine.default;\n      case /^right/.test(placement):\n        return rtl ? _ArrowLeftLine.default : _ArrowRightLine.default;\n      case /^left/.test(placement):\n        return rtl ? _ArrowRightLine.default : _ArrowLeftLine.default;\n      case /^bottom/.test(placement):\n      default:\n        return _ArrowDownLine.default;\n    }\n  }, [placement, rtl]);\n}\nvar _default = exports[\"default\"] = useToggleCaret;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useToggleCaret.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;\nexports.useToggleCaret = useToggleCaret;\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _CustomProvider = __webpack_require__(/*! ../../CustomProvider */ \"./src/CustomProvider/index.tsx\");\nvar _ArrowUpLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowUpLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowUpLine.js\"));\nvar _ArrowDownLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowDownLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowDownLine.js\"));\nvar _ArrowLeftLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowLeftLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowLeftLine.js\"));\nvar _ArrowRightLine = _interopRequireDefault(__webpack_require__(/*! @rsuite/icons/ArrowRightLine */ \"./node_modules/@rsuite/icons/esm/react/ArrowRightLine.js\"));\nfunction useToggleCaret(placement) {\n  const {\n    rtl\n  } = (0, _CustomProvider.useCustom)();\n  return (0, _react.useMemo)(() => {\n    switch (true) {\n      case /^top/.test(placement):\n        return _ArrowUpLine.default;\n      case /^right/.test(placement):\n        return rtl ? _ArrowLeftLine.default : _ArrowRightLine.default;\n      case /^left/.test(placement):\n        return rtl ? _ArrowRightLine.default : _ArrowLeftLine.default;\n      case /^bottom/.test(placement):\n      default:\n        return _ArrowDownLine.default;\n    }\n  }, [placement, rtl]);\n}\nvar _default = exports[\"default\"] = useToggleCaret;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useToggleCaret.tsx?");
 
 /***/ }),
 
@@ -6978,7 +6978,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.us
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.useUpdateEffect = exports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nconst useUpdateEffect = (effect, deps) => {\n  const isMounting = (0, _react.useRef)(true);\n  (0, _react.useEffect)(() => {\n    if (isMounting.current) {\n      isMounting.current = false;\n      return;\n    }\n    effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\nexports.useUpdateEffect = useUpdateEffect;\nvar _default = exports[\"default\"] = useUpdateEffect;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useUpdateEffect.ts?");
+eval("\n\nexports.__esModule = true;\nexports.useUpdateEffect = exports[\"default\"] = void 0;\nvar _react = __webpack_require__(/*! react */ \"react\");\nconst useUpdateEffect = (effect, deps) => {\n  const isMounting = (0, _react.useRef)(true);\n  (0, _react.useEffect)(() => {\n    if (isMounting.current) {\n      isMounting.current = false;\n      return;\n    }\n    effect();\n  }, deps);\n};\nexports.useUpdateEffect = useUpdateEffect;\nvar _default = exports[\"default\"] = useUpdateEffect;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useUpdateEffect.ts?");
 
 /***/ }),
 
@@ -7000,7 +7000,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.us
 /***/ (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.useWillUnmount = useWillUnmount;\nvar _useUpdatedRef = _interopRequireDefault(__webpack_require__(/*! ./useUpdatedRef */ \"./src/internals/hooks/useUpdatedRef.ts\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\n/**\n * Attach a callback that fires when a component unmounts\n *\n * @param fn Handler to run when the component unmounts\n * @category effects\n */\nfunction useWillUnmount(fn) {\n  const onUnmount = (0, _useUpdatedRef.default)(fn);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  (0, _react.useEffect)(() => () => onUnmount.current(), []);\n}\nvar _default = exports[\"default\"] = useWillUnmount;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useWillUnmount.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.useWillUnmount = useWillUnmount;\nvar _useUpdatedRef = _interopRequireDefault(__webpack_require__(/*! ./useUpdatedRef */ \"./src/internals/hooks/useUpdatedRef.ts\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\n/**\n * Attach a callback that fires when a component unmounts\n *\n * @param fn Handler to run when the component unmounts\n * @category effects\n */\nfunction useWillUnmount(fn) {\n  const onUnmount = (0, _useUpdatedRef.default)(fn);\n  (0, _react.useEffect)(() => () => onUnmount.current(), []);\n}\nvar _default = exports[\"default\"] = useWillUnmount;\n\n//# sourceURL=webpack://rsuite/./src/internals/hooks/useWillUnmount.ts?");
 
 /***/ }),
 
@@ -7011,7 +7011,18 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.RSUITE_PICKER_TYPE = exports.RSUITE_PICKER_GROUP_KEY = void 0;\nconst RSUITE_PICKER_TYPE = exports.RSUITE_PICKER_TYPE = Symbol.for('rsuite.picker');\nconst RSUITE_PICKER_GROUP_KEY = exports.RSUITE_PICKER_GROUP_KEY = Symbol.for('rsuite.picker_group_key');\n\n//# sourceURL=webpack://rsuite/./src/internals/symbols.ts?");
+eval("\n\nexports.__esModule = true;\nexports.RSUITE_TOASTER_ID = exports.RSUITE_PICKER_TYPE = exports.RSUITE_PICKER_GROUP_KEY = void 0;\nconst RSUITE_PICKER_TYPE = exports.RSUITE_PICKER_TYPE = Symbol.for('rsuite.picker');\nconst RSUITE_PICKER_GROUP_KEY = exports.RSUITE_PICKER_GROUP_KEY = Symbol.for('rsuite.picker_group_key');\nconst RSUITE_TOASTER_ID = exports.RSUITE_TOASTER_ID = Symbol.for('rsuite.toaster_id');\n\n//# sourceURL=webpack://rsuite/./src/internals/symbols.ts?");
+
+/***/ }),
+
+/***/ "./src/internals/types/colours.ts":
+/*!****************************************!*\
+  !*** ./src/internals/types/colours.ts ***!
+  \****************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.Colours = void 0;\nlet Colours = exports.Colours = /*#__PURE__*/function (Colours) {\n  Colours[\"Red\"] = \"red\";\n  Colours[\"Orange\"] = \"orange\";\n  Colours[\"Yellow\"] = \"yellow\";\n  Colours[\"Green\"] = \"green\";\n  Colours[\"Cyan\"] = \"cyan\";\n  Colours[\"Blue\"] = \"blue\";\n  Colours[\"Violet\"] = \"violet\";\n  return Colours;\n}({});\n\n//# sourceURL=webpack://rsuite/./src/internals/types/colours.ts?");
 
 /***/ }),
 
@@ -7022,7 +7033,7 @@ eval("\n\nexports.__esModule = true;\nexports.RSUITE_PICKER_TYPE = exports.RSUIT
 /***/ (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.isIE11 = exports.isIE = exports.isAndroid = exports.getChromeVersion = void 0;\nvar _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\n// from http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser\n\n// Internet Explorer 6-11\nconst isIE = () => _canUseDOM.default && /MSIE |Trident\\/|Edge\\//.test(window.navigator.userAgent);\nexports.isIE = isIE;\nconst isIE11 = () => _canUseDOM.default && window.navigator.userAgent.indexOf('Trident') > -1 && window.navigator.userAgent.indexOf('rv:11.0') > -1;\nexports.isIE11 = isIE11;\nconst isAndroid = () => _canUseDOM.default && /Android/i.test(navigator.userAgent);\nexports.isAndroid = isAndroid;\nconst getChromeVersion = () => {\n  if (_canUseDOM.default) {\n    const match = window.navigator.userAgent.match(/Chrom(e|ium)\\/([\\d\\.]+)\\./);\n    return match ? parseFloat(match[2]) : false;\n  }\n  return false;\n};\nexports.getChromeVersion = getChromeVersion;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/BrowserDetection.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.isIE = exports.isAndroid = void 0;\nvar _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\n// from http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser\n\n// Internet Explorer 6-11\nconst isIE = () => _canUseDOM.default && /MSIE |Trident\\/|Edge\\//.test(window.navigator.userAgent);\nexports.isIE = isIE;\nconst isAndroid = () => _canUseDOM.default && /Android/i.test(navigator.userAgent);\nexports.isAndroid = isAndroid;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/BrowserDetection.ts?");
 
 /***/ }),
 
@@ -7033,7 +7044,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.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\n    /* eslint-disable */\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?");
+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?");
 
 /***/ }),
 
@@ -7048,6 +7059,17 @@ eval("\n\nexports.__esModule = true;\nexports.attachParent = attachParent;\nexpo
 
 /***/ }),
 
+/***/ "./src/internals/utils/colours.ts":
+/*!****************************************!*\
+  !*** ./src/internals/utils/colours.ts ***!
+  \****************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.isPresetColor = exports.getLuminance = exports.getContrastText = exports.expandHexColor = exports.createColorVariables = void 0;\nvar _colours = __webpack_require__(/*! ../types/colours */ \"./src/internals/types/colours.ts\");\nconst isPresetColor = color => {\n  if (!color) {\n    return false;\n  }\n  if (color === 'default') {\n    return true;\n  }\n  return Object.values(_colours.Colours).includes(color);\n};\n\n/**\n * Convert short hex color to full hex color\n * e.g. #fff -> #ffffff\n */\nexports.isPresetColor = isPresetColor;\nconst expandHexColor = color => {\n  const hex = color.toLowerCase().replace('#', '');\n  if (hex.length === 3) {\n    return `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;\n  }\n  return `#${hex}`;\n};\n\n/**\n * Calculate relative luminance of a color\n * Using the formula from WCAG 2.0\n */\nexports.expandHexColor = expandHexColor;\nconst getLuminance = color => {\n  // Convert hex to rgb\n  const fullHex = expandHexColor(color);\n  const hex = fullHex.replace('#', '');\n  const r = parseInt(hex.substring(0, 2), 16) / 255;\n  const g = parseInt(hex.substring(2, 4), 16) / 255;\n  const b = parseInt(hex.substring(4, 6), 16) / 255;\n\n  // Convert rgb to relative luminance\n  const rs = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);\n  const gs = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);\n  const bs = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);\n  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n};\n\n/**\n * Get contrasting text color (black or white) based on background color\n */\nexports.getLuminance = getLuminance;\nconst getContrastText = bgColor => {\n  // For non-hex colors, return default dark text\n  if (!bgColor.startsWith('#')) {\n    return 'var(--rs-text-primary)';\n  }\n  const luminance = getLuminance(bgColor);\n  return luminance > 0.5 ? '#000000' : '#ffffff';\n};\n\n/**\n * Create CSS color variables for custom colors\n * Returns background and optional text color variables\n */\nexports.getContrastText = getContrastText;\nconst createColorVariables = function (color, bgFieldName, textFieldName) {\n  if (bgFieldName === void 0) {\n    bgFieldName = '--rs-color-bg';\n  }\n  if (color && !isPresetColor(color)) {\n    const colorStr = color.toString();\n    // Only convert to hex if it's a hex color\n    const bgColor = colorStr.startsWith('#') ? expandHexColor(colorStr) : colorStr;\n    const styles = {\n      [bgFieldName]: bgColor\n    };\n    if (textFieldName) {\n      styles[textFieldName] = getContrastText(bgColor);\n    }\n    return styles;\n  }\n  return undefined;\n};\nexports.createColorVariables = createColorVariables;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/colours.ts?");
+
+/***/ }),
+
 /***/ "./src/internals/utils/composeFunctions.ts":
 /*!*************************************************!*\
   !*** ./src/internals/utils/composeFunctions.ts ***!
@@ -7088,7 +7110,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports.getCssValue = getCssValue;\n/**\n * Processes and returns a value suitable for CSS (with a unit).\n */\nfunction getCssValue(value, unit) {\n  if (unit === void 0) {\n    unit = 'px';\n  }\n  // If the value is a number, append the default unit (defaults to 'px')\n  if (typeof value === 'number') {\n    return `${value}${unit}`;\n  }\n\n  // If the value is already a string (and likely contains a unit), return it as is\n  if (typeof value === 'string') {\n    return value;\n  }\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/css.ts?");
+eval("\n\nexports.__esModule = true;\nexports.createOffsetStyles = createOffsetStyles;\nexports.getCssValue = getCssValue;\nexports.mergeStyles = mergeStyles;\n/**\n * Processes and returns a value suitable for CSS (with a unit).\n */\nfunction getCssValue(value, unit) {\n  if (unit === void 0) {\n    unit = 'px';\n  }\n  if (value === undefined || value === null || value === '') {\n    return '';\n  }\n\n  // If the value is 0, return it as a string without unit\n  if (value === 0) {\n    return '0';\n  }\n\n  // If the value is a number, append the default unit (defaults to 'px')\n  if (typeof value === 'number') {\n    return `${value}${unit}`;\n  }\n\n  // Return string values as is\n  return value.toString();\n}\n/**\n * Merge multiple style objects, filtering out undefined values\n */\nfunction mergeStyles() {\n  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {\n    styles[_key] = arguments[_key];\n  }\n  return styles.filter(Boolean).reduce((acc, style) => {\n    if (!style) return acc;\n    return {\n      ...acc,\n      ...style\n    };\n  }, {});\n}\n\n/**\n * Create CSS variables for offset positioning\n */\nfunction createOffsetStyles(offset, prefix) {\n  if (prefix === void 0) {\n    prefix = '--rs-offset';\n  }\n  if (!offset) return undefined;\n  const [x, y] = offset;\n  return {\n    [`${prefix}-x`]: getCssValue(x),\n    [`${prefix}-y`]: getCssValue(y)\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/css.ts?");
 
 /***/ }),
 
@@ -7253,7 +7275,7 @@ eval("\n\nexports.__esModule = true;\nexports.isFocusEntering = isFocusEntering;
 /***/ (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.getDOMNode = getDOMNode;\nvar _reactDom = _interopRequireDefault(__webpack_require__(/*! react-dom */ \"react-dom\"));\nfunction safeFindDOMNode(componentOrElement) {\n  if (componentOrElement && 'setState' in componentOrElement) {\n    var _ReactDOM$findDOMNode;\n    // eslint-disable-next-line react/no-find-dom-node\n    return (_ReactDOM$findDOMNode = _reactDom.default.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(_reactDom.default, componentOrElement);\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\n  // If you can't get the native HTML element, you can only get it through findDOMNode.\n  // eslint-disable-next-line react/no-find-dom-node\n  return safeFindDOMNode(element);\n}\nvar _default = exports[\"default\"] = getDOMNode;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/getDOMNode.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.getDOMNode = getDOMNode;\nvar _reactDom = _interopRequireDefault(__webpack_require__(/*! react-dom */ \"react-dom\"));\n/* eslint-disable react/no-find-dom-node */\n\nfunction safeFindDOMNode(componentOrElement) {\n  if (componentOrElement && 'setState' in componentOrElement) {\n    var _ReactDOM$findDOMNode;\n    return (_ReactDOM$findDOMNode = _reactDom.default.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(_reactDom.default, componentOrElement);\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\n  // If you can't get the native HTML element, you can only get it through findDOMNode.\n  return safeFindDOMNode(element);\n}\nvar _default = exports[\"default\"] = getDOMNode;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/getDOMNode.ts?");
 
 /***/ }),
 
@@ -7275,7 +7297,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (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  return str.replace(/([\\^\\$\\.\\|\\*\\+\\?\\{\\\\\\[\\(\\)])/g, '\\\\$1');\n}\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/getSafeRegExpString.ts?");
+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?");
 
 /***/ }),
 
@@ -7319,7 +7341,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 _exportNames = {\n  stringifyReactNode: true,\n  reactToString: true,\n  getSafeRegExpString: true,\n  getDOMNode: true,\n  guid: true,\n  prefix: true,\n  defaultClassPrefix: true,\n  getClassNamePrefix: true,\n  createChainedFunction: true,\n  isOneOf: true,\n  ReactChildren: true,\n  tplTransform: true,\n  placementPolyfill: true,\n  mergeRefs: true,\n  shallowEqual: true,\n  shallowEqualArray: true,\n  composeFunctions: true,\n  render: 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  getCssValue: true\n};\nexports.warnOnce = exports.tplTransform = exports.stringifyReactNode = exports.shallowEqualArray = exports.shallowEqual = exports.safeSetSelection = exports.render = exports.reactToString = exports.prefix = exports.placementPolyfill = exports.mergeRefs = exports.isOneOf = exports.isFocusableElement = exports.isFocusLeaving = exports.isFocusEntering = exports.guid = exports.getStringLength = exports.getSafeRegExpString = exports.getDataGroupBy = exports.getDOMNode = exports.getCssValue = exports.getClassNamePrefix = exports.deprecateComponent = exports.defaultClassPrefix = 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 _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 _prefix = __webpack_require__(/*! ./prefix */ \"./src/internals/utils/prefix.ts\");\nexports.prefix = _prefix.prefix;\nexports.defaultClassPrefix = _prefix.defaultClassPrefix;\nexports.getClassNamePrefix = _prefix.getClassNamePrefix;\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 _placementPolyfill = __webpack_require__(/*! ./placementPolyfill */ \"./src/internals/utils/placementPolyfill.ts\");\nexports.placementPolyfill = _placementPolyfill.placementPolyfill;\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 _render = __webpack_require__(/*! ./render */ \"./src/internals/utils/render.ts\");\nexports.render = _render.render;\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 _css = __webpack_require__(/*! ./css */ \"./src/internals/utils/css.ts\");\nexports.getCssValue = _css.getCssValue;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/index.ts?");
+eval("\n\nexports.__esModule = true;\nvar _exportNames = {\n  stringifyReactNode: true,\n  reactToString: true,\n  getSafeRegExpString: true,\n  getDOMNode: true,\n  guid: true,\n  prefix: true,\n  defaultClassPrefix: true,\n  getClassNamePrefix: true,\n  createChainedFunction: true,\n  isOneOf: true,\n  ReactChildren: true,\n  tplTransform: true,\n  placementPolyfill: 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};\nexports.warnOnce = exports.tplTransform = exports.stringifyReactNode = exports.shallowEqualArray = exports.shallowEqual = exports.safeSetSelection = exports.reactToString = exports.prefix = exports.placementPolyfill = exports.mergeRefs = exports.isOneOf = exports.isFocusableElement = exports.isFocusLeaving = exports.isFocusEntering = exports.guid = exports.getStringLength = exports.getSafeRegExpString = exports.getDataGroupBy = exports.getDOMNode = exports.getClassNamePrefix = exports.deprecateComponent = exports.defaultClassPrefix = 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 _css = __webpack_require__(/*! ./css */ \"./src/internals/utils/css.ts\");\nObject.keys(_css).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] === _css[key]) return;\n  exports[key] = _css[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 _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 _prefix = __webpack_require__(/*! ./prefix */ \"./src/internals/utils/prefix.ts\");\nexports.prefix = _prefix.prefix;\nexports.defaultClassPrefix = _prefix.defaultClassPrefix;\nexports.getClassNamePrefix = _prefix.getClassNamePrefix;\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 _placementPolyfill = __webpack_require__(/*! ./placementPolyfill */ \"./src/internals/utils/placementPolyfill.ts\");\nexports.placementPolyfill = _placementPolyfill.placementPolyfill;\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;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/index.ts?");
 
 /***/ }),
 
@@ -7367,17 +7389,6 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
-/***/ "./src/internals/utils/render.ts":
-/*!***************************************!*\
-  !*** ./src/internals/utils/render.ts ***!
-  \***************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nexports.render = render;\nvar _client = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/**\n * Renders a React element into a container element.\n *\n */\nasync function render(element, container) {\n  const mountElement = document.createElement('div');\n  mountElement.className = 'rs-mount-element';\n  const containerElement = container || document.body;\n\n  // Add the detached element to the root\n  containerElement.appendChild(mountElement);\n  const root = containerElement.__root || (0, _client.createRoot)(mountElement, {\n    identifierPrefix: 'rs-root-'\n  });\n  root.render(element);\n  containerElement.__root = root;\n  return root;\n}\nvar _default = exports[\"default\"] = render;\n\n//# sourceURL=webpack://rsuite/./src/internals/utils/render.ts?");
-
-/***/ }),
-
 /***/ "./src/internals/utils/safeSetSelection.ts":
 /*!*************************************************!*\
   !*** ./src/internals/utils/safeSetSelection.ts ***!
@@ -7451,7 +7462,7 @@ eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _enGB
 /***/ (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.toastPlacements = exports[\"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 _reactDom = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _Transition = _interopRequireDefault(__webpack_require__(/*! ../Animation/Transition */ \"./src/Animation/Transition.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _ToastContext = _interopRequireDefault(__webpack_require__(/*! ./ToastContext */ \"./src/toaster/ToastContext.ts\"));\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/toaster/ToastContainer.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 toastPlacements = exports.toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];\nconst useMessages = () => {\n  const [messages, setMessages] = (0, _react.useState)([]);\n  const getKey = (0, _react.useCallback)(key => {\n    if (typeof key === 'undefined' && messages.length) {\n      return messages[messages.length - 1].key;\n    }\n    return key;\n  }, [messages]);\n  const push = (0, _react.useCallback)((message, options) => {\n    const {\n      duration,\n      mouseReset = true,\n      container\n    } = options || {};\n    const key = (0, _utils.guid)();\n    setMessages(prevMessages => [...prevMessages, {\n      key,\n      visible: true,\n      node: message,\n      duration,\n      mouseReset,\n      container\n    }]);\n    return key;\n  }, []);\n  const clear = (0, _react.useCallback)(() => {\n    // Set all existing messages to be invisible.\n    setMessages(messages.map(msg => ({\n      ...msg,\n      visible: false\n    })));\n\n    // Remove all invisible messages after 400ms.\n    // The delay removal here is to preserve the animation.\n    setTimeout(() => {\n      setMessages([]);\n    }, 400);\n  }, [messages]);\n  const remove = (0, _react.useCallback)(key => {\n    // Set the message of the specified key to invisible.\n    setMessages(messages.map(n => {\n      if (n.key === getKey(key)) {\n        n.visible = false;\n      }\n      return n;\n    }));\n\n    // Remove invisible messages after 400ms.\n    setTimeout(() => {\n      setMessages(messages.filter(msg => msg.visible));\n    }, 400);\n  }, [messages, getKey]);\n  return {\n    messages,\n    push,\n    clear,\n    remove\n  };\n};\nconst ToastContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const rootRef = (0, _react.useRef)();\n  const {\n    as: Component = 'div',\n    className,\n    classPrefix = 'toast-container',\n    placement = 'topCenter',\n    callback,\n    ...rest\n  } = props;\n  const {\n    withClassPrefix,\n    merge,\n    rootPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix((0, _kebabCase.default)(placement)));\n  const {\n    push,\n    clear,\n    remove,\n    messages\n  } = useMessages();\n  (0, _react.useImperativeHandle)(ref, () => ({\n    root: rootRef.current,\n    push,\n    clear,\n    remove\n  }));\n  const elements = messages.map(item => {\n    const {\n      mouseReset,\n      duration,\n      node,\n      container\n    } = item;\n    const toastWithTransition = /*#__PURE__*/_react.default.createElement(_Transition.default, {\n      in: item.visible,\n      exitedClassName: rootPrefix('toast-fade-exited'),\n      exitingClassName: rootPrefix('toast-fade-exiting'),\n      enteringClassName: rootPrefix('toast-fade-entering'),\n      enteredClassName: rootPrefix('toast-fade-entered'),\n      timeout: 300,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 167,\n        columnNumber: 9\n      }\n    }, (transitionProps, ref) => {\n      var _node$props, _node$props2;\n      const {\n        className: transitionClassName,\n        ...rest\n      } = transitionProps;\n      return /*#__PURE__*/_react.default.cloneElement(node, {\n        ...rest,\n        ref,\n        duration,\n        onClose: (0, _utils.createChainedFunction)((_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.onClose, () => remove(item.key)),\n        className: merge(rootPrefix('toast'), (_node$props2 = node.props) === null || _node$props2 === void 0 ? void 0 : _node$props2.className, transitionClassName)\n      });\n    });\n    return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {\n      value: {\n        usedToaster: true,\n        mouseReset,\n        duration\n      },\n      key: item.key,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 189,\n        columnNumber: 9\n      }\n    }, container ? /*#__PURE__*/(0, _reactDom.createPortal)(toastWithTransition, typeof container === 'function' ? container() : container) : toastWithTransition);\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    ref: selfRef => {\n      rootRef.current = selfRef;\n      callback === null || callback === void 0 || callback(selfRef);\n    },\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 201,\n      columnNumber: 7\n    }\n  }), elements);\n});\nToastContainer.getInstance = props => {\n  const {\n    container,\n    ...rest\n  } = props;\n  const containerRef = /*#__PURE__*/_react.default.createRef();\n  const containerElement = (typeof container === 'function' ? container() : container) || document.body;\n  return new Promise(resolve => {\n    const renderCallback = () => {\n      resolve([containerRef, unmount]);\n    };\n    const {\n      unmount\n    } = (0, _utils.render)(/*#__PURE__*/_react.default.createElement(ToastContainer, (0, _extends2.default)({}, rest, {\n      ref: containerRef,\n      callback: renderCallback,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 228,\n        columnNumber: 7\n      }\n    })), containerElement);\n  });\n};\nToastContainer.displayName = 'ToastContainer';\nvar _default = exports[\"default\"] = ToastContainer;\n\n//# sourceURL=webpack://rsuite/./src/toaster/ToastContainer.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports.toastPlacements = exports.defaultToasterContainer = exports[\"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 _kebabCase = _interopRequireDefault(__webpack_require__(/*! lodash/kebabCase */ \"./node_modules/lodash/kebabCase.js\"));\nvar _Transition = _interopRequireDefault(__webpack_require__(/*! ../Animation/Transition */ \"./src/Animation/Transition.tsx\"));\nvar _ToastContext = _interopRequireDefault(__webpack_require__(/*! ./ToastContext */ \"./src/toaster/ToastContext.ts\"));\nvar _canUseDOM = _interopRequireDefault(__webpack_require__(/*! dom-lib/canUseDOM */ \"./node_modules/dom-lib/esm/canUseDOM.js\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _render = __webpack_require__(/*! ./render */ \"./src/toaster/render.ts\");\nvar _jsxFileName = \"/Users/apple/workspace/rsuite/rsuite/src/toaster/ToastContainer.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 defaultToasterContainer = () => {\n  return _canUseDOM.default ? document.body : null;\n};\nexports.defaultToasterContainer = defaultToasterContainer;\nconst toastPlacements = exports.toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];\nconst useMessages = () => {\n  const [messages, setMessages] = (0, _react.useState)([]);\n  const getKey = (0, _react.useCallback)(key => {\n    if (typeof key === 'undefined' && messages.length) {\n      return messages[messages.length - 1].key;\n    }\n    return key;\n  }, [messages]);\n  const push = (0, _react.useCallback)((message, options) => {\n    const {\n      duration,\n      mouseReset = true,\n      container\n    } = options || {};\n    const key = (0, _utils.guid)();\n    setMessages(prevMessages => [...prevMessages, {\n      key,\n      visible: true,\n      node: message,\n      duration,\n      mouseReset,\n      container\n    }]);\n    return key;\n  }, []);\n  const clear = (0, _react.useCallback)(() => {\n    // Set all existing messages to be invisible.\n    setMessages(messages.map(msg => ({\n      ...msg,\n      visible: false\n    })));\n\n    // Remove all invisible messages after 400ms.\n    // The delay removal here is to preserve the animation.\n    setTimeout(() => {\n      setMessages([]);\n    }, 400);\n  }, [messages]);\n  const remove = (0, _react.useCallback)(key => {\n    // Set the message of the specified key to invisible.\n    setMessages(messages.map(n => {\n      if (n.key === getKey(key)) {\n        n.visible = false;\n      }\n      return n;\n    }));\n\n    // Remove invisible messages after 400ms.\n    setTimeout(() => {\n      setMessages(messages.filter(msg => msg.visible));\n    }, 400);\n  }, [messages, getKey]);\n  return {\n    messages,\n    push,\n    clear,\n    remove\n  };\n};\nconst ToastContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {\n  const {\n    as: Component = 'div',\n    className,\n    classPrefix = 'toast-container',\n    placement = 'topCenter',\n    ...rest\n  } = props;\n  const {\n    withClassPrefix,\n    merge,\n    rootPrefix\n  } = (0, _hooks.useClassNames)(classPrefix);\n  const classes = merge(className, withClassPrefix((0, _kebabCase.default)(placement)));\n  const {\n    push,\n    clear,\n    remove,\n    messages\n  } = useMessages();\n  (0, _react.useImperativeHandle)(ref, () => ({\n    push,\n    clear,\n    remove\n  }));\n  const elements = messages.map(item => {\n    const {\n      mouseReset,\n      duration,\n      node\n    } = item;\n    return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {\n      value: {\n        usedToaster: true,\n        mouseReset,\n        duration\n      },\n      key: item.key,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 168,\n        columnNumber: 9\n      }\n    }, /*#__PURE__*/_react.default.createElement(_Transition.default, {\n      in: item.visible,\n      exitedClassName: rootPrefix('toast-fade-exited'),\n      exitingClassName: rootPrefix('toast-fade-exiting'),\n      enteringClassName: rootPrefix('toast-fade-entering'),\n      enteredClassName: rootPrefix('toast-fade-entered'),\n      timeout: 300,\n      __self: void 0,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 169,\n        columnNumber: 11\n      }\n    }, (transitionProps, ref) => {\n      var _node$props, _node$props2;\n      const {\n        className: transitionClassName,\n        ...rest\n      } = transitionProps;\n      return /*#__PURE__*/_react.default.cloneElement(node, {\n        ...rest,\n        ref,\n        duration,\n        onClose: (0, _utils.createChainedFunction)((_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.onClose, () => remove(item.key)),\n        className: merge(rootPrefix('toast'), (_node$props2 = node.props) === null || _node$props2 === void 0 ? void 0 : _node$props2.className, transitionClassName)\n      });\n    }));\n  });\n  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {\n    className: classes,\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 193,\n      columnNumber: 7\n    }\n  }), elements);\n});\nToastContainer.getInstance = async props => {\n  const {\n    container,\n    ...toastProps\n  } = props;\n\n  // Promise to wait for containerRef to be assigned\n  let resolveContainerRef = null;\n  const containerRefReady = new Promise(resolve => {\n    resolveContainerRef = resolve;\n  });\n\n  // Create a React ref for the ToastContainer instance\n  const toastContainerRef = /*#__PURE__*/_react.default.createRef();\n\n  // Render the ToastContainer component into the specified container\n  const containerId = (0, _render.render)(/*#__PURE__*/_react.default.createElement(ToastContainer, (0, _extends2.default)({}, toastProps, {\n    ref: ref => {\n      var _resolveContainerRef;\n      toastContainerRef.current = ref;\n      (_resolveContainerRef = resolveContainerRef) === null || _resolveContainerRef === void 0 || _resolveContainerRef();\n    },\n    __self: void 0,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 214,\n      columnNumber: 5\n    }\n  })), container);\n  await containerRefReady;\n  return [toastContainerRef, containerId];\n};\nToastContainer.displayName = 'ToastContainer';\nvar _default = exports[\"default\"] = ToastContainer;\n\n//# sourceURL=webpack://rsuite/./src/toaster/ToastContainer.tsx?");
 
 /***/ }),
 
@@ -7488,6 +7499,17 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 
 /***/ }),
 
+/***/ "./src/toaster/render.ts":
+/*!*******************************!*\
+  !*** ./src/toaster/render.ts ***!
+  \*******************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nexports.__esModule = true;\nexports.render = render;\nvar _client = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\nvar _utils = __webpack_require__(/*! ../internals/utils */ \"./src/internals/utils/index.ts\");\nvar _symbols = __webpack_require__(/*! ../internals/symbols */ \"./src/internals/symbols.ts\");\nfunction render(element, container) {\n  const mountElement = document.createElement('div');\n  mountElement.className = 'rs-toaster-mount-element';\n  const containerElement = container;\n\n  // Add the detached element to the root\n  containerElement.appendChild(mountElement);\n  if (!containerElement[_symbols.RSUITE_TOASTER_ID]) {\n    // Attach the containerId to the containerElement\n    containerElement[_symbols.RSUITE_TOASTER_ID] = (0, _utils.guid)();\n  }\n  const root = (0, _client.createRoot)(mountElement, {\n    identifierPrefix: 'rs-root-'\n  });\n  root.render(element);\n  return containerElement[_symbols.RSUITE_TOASTER_ID];\n}\n\n//# sourceURL=webpack://rsuite/./src/toaster/render.ts?");
+
+/***/ }),
+
 /***/ "./src/toaster/toaster.tsx":
 /*!*********************************!*\
   !*** ./src/toaster/toaster.tsx ***!
@@ -7495,7 +7517,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 _ToastContainer = _interopRequireDefault(__webpack_require__(/*! ./ToastContainer */ \"./src/toaster/ToastContainer.tsx\"));\nconst defaultContainerId = 'default';\nconst containers = new Map();\n\n/**\n * Create a container by Id.\n * @param containerId\n * @param options\n */\nasync function createContainer(containerId, props) {\n  const [container] = await _ToastContainer.default.getInstance(props);\n  containers.set(containerId || defaultContainerId, container);\n  return container;\n}\n\n/**\n * Get the container by ID. Use default ID when ID is not available.\n * @param containerId\n */\nfunction getContainer(containerId) {\n  if (containers.size == 0) {\n    return null;\n  }\n  return containers.get(containerId || defaultContainerId);\n}\nconst toaster = message => toaster.push(message);\ntoaster.push = function (message, options) {\n  if (options === void 0) {\n    options = {};\n  }\n  const {\n    placement: containerId,\n    ...restOptions\n  } = options;\n  const container = getContainer(containerId);\n  if (container !== null && container !== void 0 && container.current) {\n    return container.current.push(message, restOptions);\n  }\n  return createContainer(containerId !== null && containerId !== void 0 ? containerId : '', options).then(ref => {\n    var _ref$current;\n    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.push(message, restOptions);\n  });\n};\ntoaster.remove = key => {\n  containers.forEach(c => {\n    var _c$current;\n    return (_c$current = c.current) === null || _c$current === void 0 ? void 0 : _c$current.remove(key);\n  });\n};\ntoaster.clear = () => {\n  containers.forEach(c => {\n    var _c$current2;\n    return (_c$current2 = c.current) === null || _c$current2 === void 0 ? void 0 : _c$current2.clear();\n  });\n};\nvar _default = exports[\"default\"] = toaster;\n\n//# sourceURL=webpack://rsuite/./src/toaster/toaster.tsx?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _ToastContainer = _interopRequireWildcard(__webpack_require__(/*! ./ToastContainer */ \"./src/toaster/ToastContainer.tsx\"));\nvar _symbols = __webpack_require__(/*! ../internals/symbols */ \"./src/internals/symbols.ts\");\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 containers = new Map();\n\n/**\n * Create a container instance.\n * @param placement\n * @param props\n */\nasync function createContainer(placement, props) {\n  const [container, containerId] = await _ToastContainer.default.getInstance(props);\n  containers.set(`${containerId}_${placement}`, container);\n  return container;\n}\n\n/**\n * Get the container by ID. Use default ID when ID is not available.\n * @param containerId\n * @param placement\n */\nfunction getContainer(containerId, placement) {\n  return containers.get(`${containerId}_${placement}`);\n}\nconst toaster = message => toaster.push(message);\ntoaster.push = function (message, options) {\n  if (options === void 0) {\n    options = {};\n  }\n  const {\n    placement = 'topCenter',\n    container = _ToastContainer.defaultToasterContainer,\n    ...restOptions\n  } = options;\n  const containerElement = typeof container === 'function' ? container() : container;\n  const containerElementId = containerElement ? containerElement[_symbols.RSUITE_TOASTER_ID] : null;\n  if (containerElementId) {\n    const existedContainer = getContainer(containerElementId, placement);\n    if (existedContainer) {\n      var _existedContainer$cur;\n      return (_existedContainer$cur = existedContainer.current) === null || _existedContainer$cur === void 0 ? void 0 : _existedContainer$cur.push(message, restOptions);\n    }\n  }\n  const newOptions = {\n    ...options,\n    container: containerElement,\n    placement\n  };\n  return createContainer(placement, newOptions).then(ref => {\n    var _ref$current;\n    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.push(message, restOptions);\n  });\n};\ntoaster.remove = key => {\n  containers.forEach(c => {\n    var _c$current;\n    return (_c$current = c.current) === null || _c$current === void 0 ? void 0 : _c$current.remove(key);\n  });\n};\ntoaster.clear = () => {\n  containers.forEach(c => {\n    var _c$current2;\n    return (_c$current2 = c.current) === null || _c$current2 === void 0 ? void 0 : _c$current2.clear();\n  });\n};\nvar _default = exports[\"default\"] = toaster;\n\n//# sourceURL=webpack://rsuite/./src/toaster/toaster.tsx?");
 
 /***/ }),
 
@@ -7539,7 +7561,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),\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  [...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.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?");
 
 /***/ }),
 
@@ -7561,7 +7583,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  } = (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      var _toasters$current;\n      const customToaster = toasters === null || toasters === void 0 || (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');\n      return customToaster ? customToaster.push(message, options) : _toaster.default.push(message, options);\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  }), [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/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?");
 
 /***/ }),