rsuite 5.46.1 → 5.48.0

package/cjs/toaster/toaster.d.ts

@@ -2,19 +2,21 @@ import React from 'react';
 import { ToastContainerProps } from './ToastContainer';
 export interface Toaster {
     /**
-     * Add a message to the container.
-     * When the container does not exist, create a new container. Use `placement` as the ID of the container
-     * @param message
-     * @param options
+     * Push a toast message.
+     * @param message The message to be displayed.
+     *                eg: `<Message type="success" description="Success" />` or `<Notification type="success" closable>Success</Notification>`
+     * @param options The options of the toast message. (optional)
+     *                eg: `{ placement: 'topCenter', duration: 5000 }`
+     * @returns The key of the toast message.
      */
     push(message: React.ReactNode, options?: ToastContainerProps): string | undefined | Promise<string | undefined>;
     /**
-     * Remove a message by key
-     * @param key
+     * Remove a toast message.
+     * @param key  The key of the toast message.
      */
     remove(key: string): void;
     /**
-     * Clear all messages
+     * Clear all toast messages.
      */
     clear(): void;
 }

package/cjs/toaster/useToaster.d.ts

@@ -1,12 +1,30 @@
 import React from 'react';
 import { ToastContainerProps } from './ToastContainer';
 /**
- * Hook to use the toaster
+ * The 'useToaster' hook is a wrapper for the 'toaster' module.
  * @returns toaster { push, remove, clear }
+ *
+ * @see https://rsuitejs.com/components/message/
+ * @see https://rsuitejs.com/components/notification/
  */
 declare const useToaster: () => {
+    /**
+     * Push a toast message.
+     * @param message The message to be displayed.
+     *                eg: `<Message type="success" description="Success" />` or `<Notification type="success" closable>Success</Notification>`
+     * @param options The options of the toast message. (optional)
+     *                eg: `{ placement: 'topCenter', duration: 5000 }`
+     * @returns The key of the toast message.
+     */
     push: (message: React.ReactNode, options?: ToastContainerProps) => string | Promise<string | undefined> | undefined;
+    /**
+     * Remove a toast message.
+     * @param key  The key of the toast message.
+     */
     remove: (key: string) => void;
+    /**
+     * Clear all toast messages.
+     */
     clear: () => void;
 };
 export default useToaster;

package/cjs/toaster/useToaster.js

@@ -8,25 +8,43 @@ var _react = require("react");
 var _toaster = _interopRequireDefault(require("./toaster"));
 var _utils = require("../utils");
 /**
- * Hook to use the toaster
+ * The 'useToaster' hook is a wrapper for the 'toaster' module.
  * @returns toaster { push, remove, clear }
+ *
+ * @see https://rsuitejs.com/components/message/
+ * @see https://rsuitejs.com/components/notification/
  */
 var useToaster = function useToaster() {
   var _useCustom = (0, _utils.useCustom)(),
     toasters = _useCustom.toasters;
   return (0, _react.useMemo)(function () {
     return {
+      /**
+       * Push a toast message.
+       * @param message The message to be displayed.
+       *                eg: `<Message type="success" description="Success" />` or `<Notification type="success" closable>Success</Notification>`
+       * @param options The options of the toast message. (optional)
+       *                eg: `{ placement: 'topCenter', duration: 5000 }`
+       * @returns The key of the toast message.
+       */
       push: function push(message, options) {
         var _toasters$current;
         var customToaster = toasters === null || toasters === void 0 ? 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');
         return customToaster ? customToaster.push(message, options) : _toaster.default.push(message, options);
       },
+      /**
+       * Remove a toast message.
+       * @param key  The key of the toast message.
+       */
       remove: function remove(key) {
         toasters ? Array.from(toasters.current).forEach(function (_ref) {
           var c = _ref[1];
           return c === null || c === void 0 ? void 0 : c.remove(key);
         }) : _toaster.default.remove(key);
       },
+      /**
+       * Clear all toast messages.
+       */
       clear: function clear() {
         toasters ? Array.from(toasters.current).forEach(function (_ref2) {
           var c = _ref2[1];

package/cjs/useMediaQuery/index.d.ts

@@ -0,0 +1,2 @@
+import useMediaQuery from './useMediaQuery';
+export default useMediaQuery;

package/cjs/useMediaQuery/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _useMediaQuery = _interopRequireDefault(require("./useMediaQuery"));
+var _default = _useMediaQuery.default;
+exports.default = _default;

package/cjs/useMediaQuery/useMediaQuery.d.ts

@@ -0,0 +1,23 @@
+export declare const mediaQuerySizeMap: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
+/**
+ * React hook that tracks state of a CSS media query.
+ * @deprecated Use useMediaQuery instead.
+ *
+ * @see https://rsuitejs.com/components/use-media-query
+ */
+export declare function useMediaQueryLegacy(query: string | keyof typeof mediaQuerySizeMap | (string | keyof typeof mediaQuerySizeMap)[]): boolean[];
+/**
+ * React hook that tracks state of a CSS media query
+ * @version 5.48.0
+ * @see https://rsuitejs.com/components/use-media-query
+ */
+export declare function useMediaQuery(query: string | keyof typeof mediaQuerySizeMap | (string | keyof typeof mediaQuerySizeMap)[]): boolean[];
+declare const _default: typeof useMediaQuery;
+export default _default;

package/cjs/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,123 @@
+'use client';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useMediaQueryLegacy = useMediaQueryLegacy;
+exports.useMediaQuery = useMediaQuery;
+exports.default = exports.mediaQuerySizeMap = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
+var mediaQuerySizeMap = {
+  xs: '(max-width: 575px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
+  xxl: '(min-width: 1400px)'
+};
+exports.mediaQuerySizeMap = mediaQuerySizeMap;
+var matchMedia = function matchMedia(query) {
+  if (_canUseDOM.default) {
+    return window.matchMedia(query);
+  }
+  return {
+    matches: false,
+    media: query
+  };
+};
+
+/**
+ * React hook that tracks state of a CSS media query.
+ * @deprecated Use useMediaQuery instead.
+ *
+ * @see https://rsuitejs.com/components/use-media-query
+ */
+function useMediaQueryLegacy(query) {
+  var queries = Array.isArray(query) ? query : [query];
+  var mediaQueries = queries.map(function (query) {
+    return mediaQuerySizeMap[query] || query;
+  });
+  var _useState = (0, _react.useState)(function () {
+      return mediaQueries.map(function (query) {
+        return matchMedia(query);
+      });
+    }),
+    mediaQueryArray = _useState[0],
+    setMediaQueryArray = _useState[1];
+  function handleChange(event) {
+    setMediaQueryArray(function (prevMediaQueryArray) {
+      return prevMediaQueryArray.map(function (item) {
+        return item.media === event.media ? (0, _extends2.default)({}, item, {
+          matches: event.matches
+        }) : item;
+      });
+    });
+  }
+  (0, _react.useEffect)(function () {
+    var mediaQueryList = mediaQueries.map(function (query) {
+      return matchMedia(query);
+    });
+    mediaQueryList.forEach(function (query) {
+      query.addEventListener('change', handleChange);
+    });
+    return function () {
+      mediaQueryList.forEach(function (query) {
+        query.removeEventListener('change', handleChange);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mediaQueries]);
+  return mediaQueryArray.map(function (query) {
+    return query.matches;
+  });
+}
+
+/**
+ * React hook that tracks state of a CSS media query
+ * @version 5.48.0
+ * @see https://rsuitejs.com/components/use-media-query
+ */
+function useMediaQuery(query) {
+  var _React$useSyncExterna;
+  var queries = Array.isArray(query) ? query : [query];
+  var mediaQueries = queries.map(function (query) {
+    return mediaQuerySizeMap[query] || query;
+  });
+  var mediaQueryArray = (0, _react.useRef)(mediaQueries.map(function (query) {
+    return matchMedia(query).matches;
+  }));
+  var subscribe = (0, _react.useCallback)(function (callback) {
+    var list = mediaQueries.map(function (query) {
+      return matchMedia(query);
+    });
+    var handleChange = function handleChange(event) {
+      var index = list.findIndex(function (item) {
+        return item.media === event.media;
+      });
+      if (index !== -1) {
+        mediaQueryArray.current[index] = event.matches;
+      }
+      callback();
+    };
+    list.forEach(function (query) {
+      query.addEventListener('change', handleChange);
+    });
+    return function () {
+      list.forEach(function (query) {
+        query.removeEventListener('change', handleChange);
+      });
+    };
+  }, [mediaQueries]);
+  var getSnapshot = function getSnapshot() {
+    return mediaQueryArray.current;
+  };
+  var getServerSnapshot = function getServerSnapshot() {
+    throw Error('useMediaQuery is a client-only hook');
+  };
+  return (_React$useSyncExterna = _react.default['useSyncExternalStore']) === null || _React$useSyncExterna === void 0 ? void 0 : _React$useSyncExterna.call(_react.default, subscribe, getSnapshot, getServerSnapshot);
+}
+var _default = typeof _react.default['useSyncExternalStore'] === 'function' ? useMediaQuery : useMediaQueryLegacy;
+exports.default = _default;

package/cjs/utils/BrowserDetection.d.ts

@@ -2,6 +2,7 @@ export declare const isIE: () => boolean;
 export declare const isIE10: () => boolean;
 export declare const isIE11: () => boolean;
 export declare const isEdge: () => boolean;
+export declare const isAndroid: () => boolean;
 export declare const getChromeVersion: () => number | false;
 export declare const getSafariVersion: () => number | false;
 /**

package/cjs/utils/BrowserDetection.js

@@ -3,7 +3,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.isSupportFlexGap = exports.getSafariVersion = exports.getChromeVersion = exports.isEdge = exports.isIE11 = exports.isIE10 = exports.isIE = void 0;
+exports.isSupportFlexGap = exports.getSafariVersion = exports.getChromeVersion = exports.isAndroid = exports.isEdge = exports.isIE11 = exports.isIE10 = exports.isIE = void 0;
 var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
 // from http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
 
@@ -26,6 +26,10 @@ var isEdge = function isEdge() {
   return _canUseDOM.default && !isIE() && 'styleMedia' in window;
 };
 exports.isEdge = isEdge;
+var isAndroid = function isAndroid() {
+  return _canUseDOM.default && /Android/i.test(navigator.userAgent);
+};
+exports.isAndroid = isAndroid;
 var getChromeVersion = function getChromeVersion() {
   if (_canUseDOM.default) {
     var match = window.navigator.userAgent.match(/Chrom(e|ium)\/([\d\.]+)\./);

package/cjs/utils/dateUtils.d.ts

@@ -1,5 +1,9 @@
 export { default as addDays } from 'date-fns/addDays';
 export { default as addMonths } from 'date-fns/addMonths';
+export { default as addYears } from 'date-fns/addYears';
+export { default as addSeconds } from 'date-fns/addSeconds';
+export { default as addMinutes } from 'date-fns/addMinutes';
+export { default as addHours } from 'date-fns/addHours';
 export { default as compareAsc } from 'date-fns/compareAsc';
 export { default as endOfDay } from 'date-fns/endOfDay';
 export { default as endOfISOWeek } from 'date-fns/endOfISOWeek';
@@ -37,6 +41,8 @@ export { default as isMatch } from 'date-fns/isMatch';
 export { default as isValid } from 'date-fns/isValid';
 export { default as set } from 'date-fns/set';
 export { default as differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
+export { default as isLastDayOfMonth } from 'date-fns/isLastDayOfMonth';
+export { default as lastDayOfMonth } from 'date-fns/lastDayOfMonth';
 export declare type CalendarOnlyPropsType = 'disabledHours' | 'disabledMinutes' | 'disabledSeconds' | 'hideHours' | 'hideMinutes' | 'hideSeconds';
 export declare const calendarOnlyProps: CalendarOnlyPropsType[];
 /**

package/cjs/utils/dateUtils.js

@@ -8,7 +8,7 @@ exports.getMonthView = getMonthView;
 exports.getDateMask = getDateMask;
 exports.copyTime = copyTime;
 exports.reverseDateRangeOmitTime = reverseDateRangeOmitTime;
-exports.getReversedTimeMeridian = exports.shouldOnlyRenderTime = exports.shouldRenderDate = exports.shouldRenderMonth = exports.shouldRenderTime = exports.omitHideDisabledProps = exports.calendarOnlyProps = exports.differenceInCalendarMonths = exports.set = exports.isValid = exports.isMatch = exports.subDays = exports.startOfWeek = exports.startOfMonth = exports.startOfISOWeek = exports.startOfDay = exports.setYear = exports.setSeconds = exports.setMonth = exports.setMinutes = exports.setHours = exports.setDate = exports.parseISO = exports.parse = exports.isSameSecond = exports.isSameMonth = exports.isSameDay = exports.isEqual = exports.isBefore = exports.isAfter = exports.getYear = exports.getSeconds = exports.getMonth = exports.getMinutes = exports.getHours = exports.getDaysInMonth = exports.getDay = exports.getDate = exports.format = exports.endOfWeek = exports.endOfMonth = exports.endOfISOWeek = exports.endOfDay = exports.compareAsc = exports.addMonths = exports.addDays = void 0;
+exports.getReversedTimeMeridian = exports.shouldOnlyRenderTime = exports.shouldRenderDate = exports.shouldRenderMonth = exports.shouldRenderTime = exports.omitHideDisabledProps = exports.calendarOnlyProps = exports.lastDayOfMonth = exports.isLastDayOfMonth = exports.differenceInCalendarMonths = exports.set = exports.isValid = exports.isMatch = exports.subDays = exports.startOfWeek = exports.startOfMonth = exports.startOfISOWeek = exports.startOfDay = exports.setYear = exports.setSeconds = exports.setMonth = exports.setMinutes = exports.setHours = exports.setDate = exports.parseISO = exports.parse = exports.isSameSecond = exports.isSameMonth = exports.isSameDay = exports.isEqual = exports.isBefore = exports.isAfter = exports.getYear = exports.getSeconds = exports.getMonth = exports.getMinutes = exports.getHours = exports.getDaysInMonth = exports.getDay = exports.getDate = exports.format = exports.endOfWeek = exports.endOfMonth = exports.endOfISOWeek = exports.endOfDay = exports.compareAsc = exports.addHours = exports.addMinutes = exports.addSeconds = exports.addYears = exports.addMonths = exports.addDays = void 0;
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omitBy = _interopRequireDefault(require("lodash/omitBy"));
 var _getHours = _interopRequireDefault(require("date-fns/getHours"));
@@ -27,6 +27,14 @@ var _set = _interopRequireDefault(require("date-fns/set"));
 exports.set = _set.default;
 var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
 exports.addMonths = _addMonths.default;
+var _addYears = _interopRequireDefault(require("date-fns/addYears"));
+exports.addYears = _addYears.default;
+var _addSeconds = _interopRequireDefault(require("date-fns/addSeconds"));
+exports.addSeconds = _addSeconds.default;
+var _addMinutes = _interopRequireDefault(require("date-fns/addMinutes"));
+exports.addMinutes = _addMinutes.default;
+var _addHours = _interopRequireDefault(require("date-fns/addHours"));
+exports.addHours = _addHours.default;
 var _compareAsc = _interopRequireDefault(require("date-fns/compareAsc"));
 exports.compareAsc = _compareAsc.default;
 var _endOfDay = _interopRequireDefault(require("date-fns/endOfDay"));
@@ -89,6 +97,10 @@ var _isValid = _interopRequireDefault(require("date-fns/isValid"));
 exports.isValid = _isValid.default;
 var _differenceInCalendarMonths = _interopRequireDefault(require("date-fns/differenceInCalendarMonths"));
 exports.differenceInCalendarMonths = _differenceInCalendarMonths.default;
+var _isLastDayOfMonth = _interopRequireDefault(require("date-fns/isLastDayOfMonth"));
+exports.isLastDayOfMonth = _isLastDayOfMonth.default;
+var _lastDayOfMonth = _interopRequireDefault(require("date-fns/lastDayOfMonth"));
+exports.lastDayOfMonth = _lastDayOfMonth.default;
 var disabledTimeProps = ['disabledHours', 'disabledMinutes', 'disabledSeconds'];
 var hideTimeProps = ['hideHours', 'hideMinutes', 'hideSeconds'];
 var calendarOnlyProps = disabledTimeProps.concat(hideTimeProps);

package/cjs/utils/index.d.ts

@@ -23,6 +23,7 @@ export { default as reactToString } from './reactToString';
 export { default as scrollTopAnimation } from './scrollTopAnimation';
 export { default as appendTooltip } from './appendTooltip';
 export { default as render } from './render';
+export { default as safeSetSelection } from './safeSetSelection';
 /** Hooks **/
 export { default as useClassNames } from './useClassNames';
 export { default as useEventListener } from './useEventListener';

package/cjs/utils/index.js

@@ -24,6 +24,7 @@ var _exportNames = {
   scrollTopAnimation: true,
   appendTooltip: true,
   render: true,
+  safeSetSelection: true,
   useClassNames: true,
   useEventListener: true,
   useElementResize: true,
@@ -47,7 +48,7 @@ var _exportNames = {
   DateUtils: true,
   TypeChecker: true
 };
-exports.TypeChecker = exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
+exports.TypeChecker = exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
 var _BrowserDetection = require("./BrowserDetection");
 Object.keys(_BrowserDetection).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -121,6 +122,8 @@ var _appendTooltip = _interopRequireDefault(require("./appendTooltip"));
 exports.appendTooltip = _appendTooltip.default;
 var _render = _interopRequireDefault(require("./render"));
 exports.render = _render.default;
+var _safeSetSelection = _interopRequireDefault(require("./safeSetSelection"));
+exports.safeSetSelection = _safeSetSelection.default;
 var _useClassNames = _interopRequireDefault(require("./useClassNames"));
 exports.useClassNames = _useClassNames.default;
 var _useEventListener = _interopRequireDefault(require("./useEventListener"));

package/cjs/utils/safeSetSelection.d.ts

@@ -0,0 +1,2 @@
+declare function safeSetSelection(element: HTMLInputElement, selectionStart: number, selectionEnd: number): void;
+export default safeSetSelection;

package/cjs/utils/safeSetSelection.js

@@ -0,0 +1,21 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _BrowserDetection = require("./BrowserDetection");
+var defer = typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame : setTimeout;
+var strNone = 'none';
+function safeSetSelection(element, selectionStart, selectionEnd) {
+  if (document.activeElement === element) {
+    if ((0, _BrowserDetection.isAndroid)()) {
+      defer(function () {
+        return element.setSelectionRange(selectionStart, selectionEnd, strNone);
+      }, 0);
+    } else {
+      element.setSelectionRange(selectionStart, selectionEnd, strNone);
+    }
+  }
+}
+var _default = safeSetSelection;
+exports.default = _default;

package/cjs/utils/treeUtils.d.ts

@@ -180,11 +180,11 @@ export declare function useTreeDrag<T>(): {
     dragNode: T | null;
     dragOverNodeKey: null;
     dragNodeKeys: (string | number)[];
-    dropNodePosition: TREE_NODE_DROP_POSITION | null;
+    dropNodePosition: -1 | TREE_NODE_DROP_POSITION | null;
     setDragNode: (node: T | null) => void;
     setDragOverNodeKey: React.Dispatch<React.SetStateAction<null>>;
     setDragNodeKeys: React.Dispatch<React.SetStateAction<(string | number)[]>>;
-    setDropNodePosition: React.Dispatch<React.SetStateAction<TREE_NODE_DROP_POSITION | null>>;
+    setDropNodePosition: React.Dispatch<React.SetStateAction<-1 | TREE_NODE_DROP_POSITION | null>>;
 };
 interface FlattenTreeDataProps {
     data: TreeNodeType[];

package/dist/rsuite-no-reset-rtl.css

@@ -305,8 +305,8 @@
   --rs-avatar-text: var(--rs-gray-0);
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-50);
-  --rs-tag-close: var(--rs-color-red);
   --rs-carousel-bg: var(--rs-gray-600);
   --rs-carousel-indicator: rgb(from var(--rs-gray-0) r g b / 40%);
   --rs-carousel-indicator-hover: var(--rs-gray-0);
@@ -647,8 +647,8 @@
   --rs-avatar-text: var(--rs-gray-0);
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-600);
-  --rs-tag-close: var(--rs-color-red);
   --rs-carousel-bg: var(--rs-gray-600);
   --rs-carousel-indicator: rgb(from var(--rs-gray-0) r g b / 40%);
   --rs-carousel-indicator-hover: var(--rs-gray-0);
@@ -992,8 +992,8 @@
   --rs-avatar-text: var(--rs-gray-0);
   --rs-badge-bg: var(--rs-red-500);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-tag-bg: var(--rs-gray-600);
-  --rs-tag-close: var(--rs-color-red);
   --rs-carousel-bg: var(--rs-gray-600);
   --rs-carousel-indicator: rgb(from var(--rs-gray-0) r g b / 40%);
   --rs-carousel-indicator-hover: var(--rs-gray-0);
@@ -9344,6 +9344,13 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-message-success-text);
 }
+.rs-message-success .rs-btn-close {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-message-success .rs-message-icon-wrapper > .rs-icon,
 .rs-message-success .rs-btn-close {
   color: #4caf50;
@@ -9364,6 +9371,13 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-message-info-text);
 }
+.rs-message-info .rs-btn-close {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-message-info .rs-message-icon-wrapper > .rs-icon,
 .rs-message-info .rs-btn-close {
   color: #2196f3;
@@ -9384,6 +9398,13 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-message-warning-text);
 }
+.rs-message-warning .rs-btn-close {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-message-warning .rs-message-icon-wrapper > .rs-icon,
 .rs-message-warning .rs-btn-close {
   color: #ffb300;
@@ -9404,6 +9425,13 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-message-error-text);
 }
+.rs-message-error .rs-btn-close {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-message-error .rs-message-icon-wrapper > .rs-icon,
 .rs-message-error .rs-btn-close {
   color: #f44336;
@@ -10180,6 +10208,13 @@ textarea.rs-picker-search-input {
 .rs-notification.rs-notification-hiding ~ .rs-notification {
   margin-top: 0;
 }
+.rs-notification .rs-btn-close {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 8px;
+  font-size: 12px;
+}
 .rs-notification-success .rs-notification-content .rs-notification-title + .rs-notification-description {
   margin-right: 34px;
 }
@@ -11699,15 +11734,6 @@ textarea.rs-picker-search-input {
 .rs-picker-toggle-clean.rs-btn-close {
   padding: 4px 0;
 }
-.rs-picker-toggle-clean:hover {
-  color: #f44336;
-  color: var(--rs-state-error);
-}
-.rs-picker-toggle-clean:hover svg path {
-  stroke: #f44336;
-  stroke: var(--rs-state-error);
-  stroke-width: 1;
-}
 .rs-picker-date .rs-picker-toggle-clean,
 .rs-picker-daterange .rs-picker-toggle-clean {
   left: 38px;
@@ -14675,11 +14701,8 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-tag-icon-close {
   position: absolute;
-  font-size: 12px;
-}
-.rs-tag-default .rs-tag-icon-close:hover {
-  color: #f44336;
-  color: var(--rs-tag-close);
+  top: 0;
+  left: 0;
 }
 .rs-tag-group {
   margin: -10px -10px 0 0;
@@ -15930,7 +15953,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-uploader-text .rs-uploader-file-item-btn-remove {
   position: absolute;
-  font-size: 12px;
+  font-size: 14px;
   top: 12px;
   left: 12px;
   color: #8e8e93;
@@ -16787,20 +16810,26 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
           animation-name: notificationMoveOut;
 }
 .rs-btn-close {
-  background: transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 8px 8px 0;
-  font-size: 12px;
-  line-height: 1;
   border: none;
   outline: none !important;
+  background: transparent;
+  line-height: 1;
   cursor: pointer;
 }
 .rs-btn-close .rs-icon {
   vertical-align: bottom;
 }
+.rs-btn-close:hover,
+.rs-btn-close:focus {
+  color: #f44336;
+  color: var(--rs-close-button-hover-color);
+}
+.rs-btn-close:hover svg path,
+.rs-btn-close:focus svg path {
+  stroke: #f44336;
+  stroke: var(--rs-close-button-hover-color);
+  stroke-width: 1;
+}
 .rs-stack {
   display: -webkit-box;
   display: -ms-flexbox;