rsuite 5.2.1 → 5.2.2

package/Button/styles/index.less

@@ -180,6 +180,9 @@ each(@spectrum, .(@color) {
     --rs-btn-link-text: @C700;
     --rs-btn-link-hover-text: @C800;
     --rs-btn-link-active-text: @C900;
+    --rs-iconbtn-primary-addon: @C600;
+    --rs-iconbtn-primary-activated-addon: @C700;
+    --rs-iconbtn-primary-pressed-addon: @C800;
 
     .dark-mode({
       --rs-btn-primary-bg: @C700;
@@ -198,6 +201,9 @@ each(@spectrum, .(@color) {
       --rs-btn-link-text: @C500;
       --rs-btn-link-hover-text: @C400;
       --rs-btn-link-active-text: @C200;
+      --rs-iconbtn-primary-addon: @C600;
+      --rs-iconbtn-primary-activated-addon: @C500;
+      --rs-iconbtn-primary-pressed-addon: @C400;
     });
 
     .high-contrast-mode({

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [5.2.2](https://github.com/rsuite/rsuite/compare/v5.2.1...v5.2.2) (2021-11-19)
+
+### Bug Fixes
+
+- **Dropdown:** dropdown item panel not rendering content ([#2128](https://github.com/rsuite/rsuite/issues/2128)) ([6631500](https://github.com/rsuite/rsuite/commit/6631500c74b0305026931a6379980fda9b587c6e))
+- **IconButton:** primary icon button with text wrong bg ([#2141](https://github.com/rsuite/rsuite/issues/2141)) ([fde0cd4](https://github.com/rsuite/rsuite/commit/fde0cd4bce84c8f5d054d1722e9dfa61de49a7fa))
+- **PanelGroup:** missing border for nested panels ([#2142](https://github.com/rsuite/rsuite/issues/2142)) ([225821f](https://github.com/rsuite/rsuite/commit/225821f2cdeba8637d70f4626f02ae1acd93eb24))
+
+### Performance Improvements
+
+- **resize:** improve the rerender performance of components after resize ([#2135](https://github.com/rsuite/rsuite/issues/2135)) ([71648ab](https://github.com/rsuite/rsuite/commit/71648ab061f7b4057675de2d0a6e08f2f8a70a61))
+
 ## [5.2.1](https://github.com/rsuite/rsuite/compare/v5.2.0...v5.2.1) (2021-11-12)
 
 ### Bug Fixes

package/PanelGroup/styles/index.less

@@ -14,21 +14,21 @@
   }
 
   // Panel in Panel group haven't border.
-  .rs-panel {
+  > .rs-panel {
     border: none;
-  }
 
-  // Draw a split line for panel
-  .rs-panel + .rs-panel {
-    position: relative;
+    // Draw a split line for panel
+    & + .rs-panel {
+      position: relative;
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      border-top: 1px solid var(--rs-border-primary);
-      left: 20px;
-      right: 20px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        border-top: 1px solid var(--rs-border-primary);
+        left: 20px;
+        right: 20px;
+      }
     }
   }
 }

package/cjs/Dropdown/DropdownItem.js

@@ -133,7 +133,8 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   if (panel) {
     return renderDropdownItem((0, _extends2.default)({
       ref: ref,
-      className: merge(prefix('panel'), className)
+      className: merge(prefix('panel'), className),
+      children: children
     }, restProps));
   }
 

package/cjs/MaskedInput/MaskedInput.d.ts

@@ -1,43 +1,6 @@
-import React from 'react';
-import { MaskType, MaskFunctionType, ConfigType } from './types';
-/**
- * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
- */
-interface TextMaskProps {
-    /**
-     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
-     */
-    guide?: boolean;
-    /**
-     * `mask` is an array or a function that defines how the user input is going to be masked.
-     */
-    mask?: MaskType | MaskFunctionType | boolean;
-    /**
-     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
-     * in place of the regular placeholder when the input element value is empty.
-     */
-    showMask?: boolean;
-    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
-    placeholderChar?: string;
-    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
-    keepCharPositions?: boolean;
-    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
-    pipe?: (conformedValue: string, config: ConfigType) => string;
-}
-export declare type MaskedInputProps = TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
-    /** Custom rendering DOM */
-    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string | number;
-    readOnly?: boolean;
-    disabled?: boolean;
-};
-declare const MaskedInput: React.ForwardRefExoticComponent<TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
-    /** Custom rendering DOM */
-    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string | number;
-    readOnly?: boolean;
-    disabled?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
+import { InputProps } from '../Input';
+import type { TextMaskProps } from './TextMask';
+import { RsRefForwardingComponent } from '../@types/common';
+export declare type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;
+declare const MaskedInput: RsRefForwardingComponent<'input', MaskedInputProps>;
 export default MaskedInput;

package/cjs/MaskedInput/MaskedInput.js

@@ -1,80 +1,26 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports.default = void 0;
 
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _omit = _interopRequireDefault(require("lodash/omit"));
+var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TextMask = _interopRequireDefault(require("./TextMask"));
 
-var _createTextMaskInputElement = _interopRequireDefault(require("./createTextMaskInputElement"));
-
-var _utils = require("../utils");
-
-var defaultRender = function defaultRender(ref, props) {
-  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-    ref: ref
-  }, props));
-};
+var _Input = _interopRequireDefault(require("../Input"));
 
 var MaskedInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var mask = props.mask,
-      _props$guide = props.guide,
-      guide = _props$guide === void 0 ? true : _props$guide,
-      placeholderChar = props.placeholderChar,
-      value = props.value,
-      showMask = props.showMask,
-      pipe = props.pipe,
-      _props$render = props.render,
-      render = _props$render === void 0 ? defaultRender : _props$render,
-      onChange = props.onChange,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
-  var inputRef = (0, _react.useRef)(null);
-  var textMaskInputElement = (0, _react.useRef)();
-  var initTextMask = (0, _react.useCallback)(function () {
-    var _textMaskInputElement;
-
-    textMaskInputElement.current = (0, _createTextMaskInputElement.default)((0, _extends2.default)({
-      inputElement: inputRef.current
-    }, props));
-    (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
-  }, [props, value]);
-  var handleChange = (0, _react.useCallback)(function (event) {
-    var _textMaskInputElement2;
-
-    (_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
-    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-  }, [onChange]);
-  (0, _react.useEffect)(function () {
-    initTextMask();
-  }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
-  return render((0, _utils.mergeRefs)(inputRef, ref), (0, _extends2.default)({
-    onChange: handleChange,
-    defaultValue: value
-  }, (0, _omit.default)(rest, ['keepCharPositions'])));
+  var _props$as = props.as,
+      inputAs = _props$as === void 0 ? _TextMask.default : _props$as;
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, props, {
+    as: inputAs,
+    ref: ref
+  }));
 });
 
-MaskedInput.displayName = 'MaskedInput';
-MaskedInput.propTypes = {
-  render: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  mask: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.bool]).isRequired,
-  guide: _propTypes.default.bool,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  pipe: _propTypes.default.func,
-  placeholderChar: _propTypes.default.string,
-  keepCharPositions: _propTypes.default.bool,
-  showMask: _propTypes.default.bool
-};
 var _default = MaskedInput;
 exports.default = _default;

package/cjs/MaskedInput/TextMask.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MaskType, MaskFunctionType, ConfigType } from './types';
+/**
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+ */
+interface TextMaskBaseProps {
+    /**
+     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
+     */
+    guide?: boolean;
+    /**
+     * `mask` is an array or a function that defines how the user input is going to be masked.
+     */
+    mask?: MaskType | MaskFunctionType | boolean;
+    /**
+     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
+     * in place of the regular placeholder when the input element value is empty.
+     */
+    showMask?: boolean;
+    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
+    placeholderChar?: string;
+    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
+    keepCharPositions?: boolean;
+    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
+    pipe?: (conformedValue: string, config: ConfigType) => string;
+}
+export declare type TextMaskProps = TextMaskBaseProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+};
+declare const TextMask: React.ForwardRefExoticComponent<TextMaskBaseProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export default TextMask;

package/cjs/MaskedInput/TextMask.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _createTextMaskInputElement = _interopRequireDefault(require("./createTextMaskInputElement"));
+
+var _utils = require("../utils");
+
+var defaultRender = function defaultRender(ref, props) {
+  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    ref: ref
+  }, props));
+};
+
+var TextMask = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var mask = props.mask,
+      _props$guide = props.guide,
+      guide = _props$guide === void 0 ? true : _props$guide,
+      placeholderChar = props.placeholderChar,
+      value = props.value,
+      showMask = props.showMask,
+      pipe = props.pipe,
+      _props$render = props.render,
+      render = _props$render === void 0 ? defaultRender : _props$render,
+      onChange = props.onChange,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
+  var inputRef = (0, _react.useRef)(null);
+  var textMaskInputElement = (0, _react.useRef)();
+  var initTextMask = (0, _react.useCallback)(function () {
+    var _textMaskInputElement;
+
+    textMaskInputElement.current = (0, _createTextMaskInputElement.default)((0, _extends2.default)({
+      inputElement: inputRef.current
+    }, props));
+    (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
+  }, [props, value]);
+  var handleChange = (0, _react.useCallback)(function (event) {
+    var _textMaskInputElement2;
+
+    (_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [onChange]);
+  (0, _react.useEffect)(function () {
+    initTextMask();
+  }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
+  return render((0, _utils.mergeRefs)(inputRef, ref), (0, _extends2.default)({
+    onChange: handleChange,
+    defaultValue: value
+  }, (0, _omit.default)(rest, ['keepCharPositions'])));
+});
+
+TextMask.displayName = 'TextMask';
+TextMask.propTypes = {
+  render: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  mask: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.bool]).isRequired,
+  guide: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  pipe: _propTypes.default.func,
+  placeholderChar: _propTypes.default.string,
+  keepCharPositions: _propTypes.default.bool,
+  showMask: _propTypes.default.bool
+};
+var _default = TextMask;
+exports.default = _default;

package/cjs/Modal/utils.js

@@ -2,19 +2,17 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 exports.__esModule = true;
 exports.useBodyStyles = void 0;
 
 var _react = require("react");
 
-var _elementResizeEvent = _interopRequireWildcard(require("element-resize-event"));
-
 var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
 
 var _on = _interopRequireDefault(require("dom-lib/on"));
 
+var _resizeObserver = require("@juggle/resize-observer");
+
 var useBodyStyles = function useBodyStyles(ref, options) {
   var _useState = (0, _react.useState)({}),
       bodyStyles = _useState[0],
@@ -25,6 +23,7 @@ var useBodyStyles = function useBodyStyles(ref, options) {
       prefix = options.prefix;
   var windowResizeListener = (0, _react.useRef)();
   var contentElement = (0, _react.useRef)();
+  var contentElementResizeObserver = (0, _react.useRef)();
   var updateBodyStyles = (0, _react.useCallback)(function (_event, entering) {
     var dialog = ref.current;
     var scrollHeight = dialog ? dialog.scrollHeight : 0;
@@ -53,13 +52,10 @@ var useBodyStyles = function useBodyStyles(ref, options) {
     setBodyStyles(styles);
   }, [prefix, ref]);
   var onDestroyEvents = (0, _react.useCallback)(function () {
-    var _windowResizeListener, _windowResizeListener2;
+    var _windowResizeListener, _windowResizeListener2, _contentElementResize;
 
     (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
-
-    if (contentElement.current) {
-      (0, _elementResizeEvent.unbind)(contentElement.current);
-    }
+    (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
   }, []);
   var onChangeBodyStyles = (0, _react.useCallback)(function (entering) {
     if (overflow && !drawer) {
@@ -68,7 +64,10 @@ var useBodyStyles = function useBodyStyles(ref, options) {
       updateBodyStyles(null, entering);
       contentElement.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("." + prefix('content'));
       windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);
-      (0, _elementResizeEvent.default)(contentElement.current, updateBodyStyles);
+      contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
+        return updateBodyStyles();
+      });
+      contentElementResizeObserver.current.observe(contentElement.current);
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   (0, _react.useEffect)(function () {

package/cjs/Overlay/Position.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _elementResizeEvent = _interopRequireDefault(require("element-resize-event"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -27,6 +25,8 @@ var _addClass = _interopRequireDefault(require("dom-lib/addClass"));
 
 var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
 
+var _resizeObserver = require("@juggle/resize-observer");
+
 var _isElement = _interopRequireDefault(require("../DOMHelper/isElement"));
 
 var _positionUtils = _interopRequireDefault(require("./positionUtils"));
@@ -43,6 +43,7 @@ var usePosition = function usePosition(props, ref) {
       triggerTarget = props.triggerTarget;
   var containerRef = (0, _react.useRef)();
   var lastTargetRef = (0, _react.useRef)();
+  var overlayResizeObserver = (0, _react.useRef)();
   var defaultPosition = {
     positionLeft: 0,
     positionTop: 0,
@@ -129,17 +130,19 @@ var usePosition = function usePosition(props, ref) {
 
     if (overlay) {
       // Update the position when the size of the overlay changes
-      (0, _elementResizeEvent.default)(overlay, function () {
+      overlayResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
         return updatePosition(true, true);
       });
+      overlayResizeObserver.current.observe(overlay);
     }
 
     return function () {
-      var _containerScrollListe;
+      var _containerScrollListe, _overlayResizeObserve;
 
       lastTargetRef.current = null;
       (_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 ? void 0 : _containerScrollListe.off();
       resizeListener === null || resizeListener === void 0 ? void 0 : resizeListener.off();
+      (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 ? void 0 : _overlayResizeObserve.disconnect();
     };
   }, [preventOverflow, ref, updatePosition]);
   (0, _utils.useUpdateEffect)(function () {

package/cjs/Picker/PickerToggle.js

@@ -29,7 +29,7 @@ var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 
 var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"));
 
-var _MaskedInput = _interopRequireDefault(require("../MaskedInput"));
+var _TextMask = _interopRequireDefault(require("../MaskedInput/TextMask"));
 
 var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
 
@@ -167,7 +167,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onFocus: !disabled ? handleFocus : null // The debounce is set to 200 to solve the flicker caused by the switch between input and div.
     ,
     onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null
-  }), /*#__PURE__*/_react.default.createElement(_MaskedInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_TextMask.default, {
     mask: inputMask,
     value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
     onBlur: handleInputBlur,

package/cjs/utils/useElementResize.d.ts

@@ -5,4 +5,4 @@
  * @param eventTarget The target to listen for events on
  * @param listener An event handler
  */
-export default function useElementResize(eventTarget: EventTarget | (() => EventTarget), listener: EventListenerOrEventListenerObject): void;
+export default function useElementResize(eventTarget: Element | (() => Element), listener: ResizeObserverCallback): void;

package/cjs/utils/useElementResize.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 exports.__esModule = true;
 exports.default = useElementResize;
 
 var _react = require("react");
 
-var _elementResizeEvent = _interopRequireWildcard(require("element-resize-event"));
+var _resizeObserver = require("@juggle/resize-observer");
 
 /**
  * Attach the event handler directly to the specified DOM element,
@@ -17,11 +15,15 @@ var _elementResizeEvent = _interopRequireWildcard(require("element-resize-event"
  * @param listener An event handler
  */
 function useElementResize(eventTarget, listener) {
+  var resizeObserver = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-    (0, _elementResizeEvent.default)(target, listener);
+    resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
+    resizeObserver.current.observe(target);
     return function () {
-      return (0, _elementResizeEvent.unbind)(target);
+      var _resizeObserver$curre;
+
+      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 ? void 0 : _resizeObserver$curre.disconnect();
     };
   }, [eventTarget, listener]);
 }

package/dist/rsuite-rtl.css

@@ -2057,6 +2057,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-red-700);
   --rs-btn-link-hover-text: var(--rs-red-800);
   --rs-btn-link-active-text: var(--rs-red-900);
+  --rs-iconbtn-primary-addon: var(--rs-red-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-red-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-red-800);
 }
 .rs-theme-dark .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-700);
@@ -2075,6 +2078,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-red-500);
   --rs-btn-link-hover-text: var(--rs-red-400);
   --rs-btn-link-active-text: var(--rs-red-200);
+  --rs-iconbtn-primary-addon: var(--rs-red-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-red-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-red-400);
 }
 .rs-theme-high-contrast .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-700);
@@ -2111,6 +2117,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-orange-700);
   --rs-btn-link-hover-text: var(--rs-orange-800);
   --rs-btn-link-active-text: var(--rs-orange-900);
+  --rs-iconbtn-primary-addon: var(--rs-orange-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-orange-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-orange-800);
 }
 .rs-theme-dark .rs-btn-orange {
   --rs-btn-primary-bg: var(--rs-orange-700);
@@ -2129,6 +2138,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-orange-500);
   --rs-btn-link-hover-text: var(--rs-orange-400);
   --rs-btn-link-active-text: var(--rs-orange-200);
+  --rs-iconbtn-primary-addon: var(--rs-orange-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-orange-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-orange-400);
 }
 .rs-theme-high-contrast .rs-btn-orange {
   --rs-btn-primary-bg: var(--rs-orange-700);
@@ -2165,6 +2177,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-yellow-700);
   --rs-btn-link-hover-text: var(--rs-yellow-800);
   --rs-btn-link-active-text: var(--rs-yellow-900);
+  --rs-iconbtn-primary-addon: var(--rs-yellow-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-yellow-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-yellow-800);
 }
 .rs-theme-dark .rs-btn-yellow {
   --rs-btn-primary-bg: var(--rs-yellow-700);
@@ -2183,6 +2198,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-yellow-500);
   --rs-btn-link-hover-text: var(--rs-yellow-400);
   --rs-btn-link-active-text: var(--rs-yellow-200);
+  --rs-iconbtn-primary-addon: var(--rs-yellow-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-yellow-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-yellow-400);
 }
 .rs-theme-high-contrast .rs-btn-yellow {
   --rs-btn-primary-bg: var(--rs-yellow-700);
@@ -2219,6 +2237,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-green-700);
   --rs-btn-link-hover-text: var(--rs-green-800);
   --rs-btn-link-active-text: var(--rs-green-900);
+  --rs-iconbtn-primary-addon: var(--rs-green-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-green-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-green-800);
 }
 .rs-theme-dark .rs-btn-green {
   --rs-btn-primary-bg: var(--rs-green-700);
@@ -2237,6 +2258,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-green-500);
   --rs-btn-link-hover-text: var(--rs-green-400);
   --rs-btn-link-active-text: var(--rs-green-200);
+  --rs-iconbtn-primary-addon: var(--rs-green-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-green-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-green-400);
 }
 .rs-theme-high-contrast .rs-btn-green {
   --rs-btn-primary-bg: var(--rs-green-700);
@@ -2273,6 +2297,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-cyan-700);
   --rs-btn-link-hover-text: var(--rs-cyan-800);
   --rs-btn-link-active-text: var(--rs-cyan-900);
+  --rs-iconbtn-primary-addon: var(--rs-cyan-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-cyan-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-cyan-800);
 }
 .rs-theme-dark .rs-btn-cyan {
   --rs-btn-primary-bg: var(--rs-cyan-700);
@@ -2291,6 +2318,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-cyan-500);
   --rs-btn-link-hover-text: var(--rs-cyan-400);
   --rs-btn-link-active-text: var(--rs-cyan-200);
+  --rs-iconbtn-primary-addon: var(--rs-cyan-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-cyan-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-cyan-400);
 }
 .rs-theme-high-contrast .rs-btn-cyan {
   --rs-btn-primary-bg: var(--rs-cyan-700);
@@ -2327,6 +2357,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-blue-700);
   --rs-btn-link-hover-text: var(--rs-blue-800);
   --rs-btn-link-active-text: var(--rs-blue-900);
+  --rs-iconbtn-primary-addon: var(--rs-blue-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-blue-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-blue-800);
 }
 .rs-theme-dark .rs-btn-blue {
   --rs-btn-primary-bg: var(--rs-blue-700);
@@ -2345,6 +2378,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-blue-500);
   --rs-btn-link-hover-text: var(--rs-blue-400);
   --rs-btn-link-active-text: var(--rs-blue-200);
+  --rs-iconbtn-primary-addon: var(--rs-blue-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-blue-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-blue-400);
 }
 .rs-theme-high-contrast .rs-btn-blue {
   --rs-btn-primary-bg: var(--rs-blue-700);
@@ -2381,6 +2417,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-violet-700);
   --rs-btn-link-hover-text: var(--rs-violet-800);
   --rs-btn-link-active-text: var(--rs-violet-900);
+  --rs-iconbtn-primary-addon: var(--rs-violet-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-violet-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-violet-800);
 }
 .rs-theme-dark .rs-btn-violet {
   --rs-btn-primary-bg: var(--rs-violet-700);
@@ -2399,6 +2438,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-violet-500);
   --rs-btn-link-hover-text: var(--rs-violet-400);
   --rs-btn-link-active-text: var(--rs-violet-200);
+  --rs-iconbtn-primary-addon: var(--rs-violet-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-violet-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-violet-400);
 }
 .rs-theme-high-contrast .rs-btn-violet {
   --rs-btn-primary-bg: var(--rs-violet-700);
@@ -10021,13 +10063,13 @@ textarea.rs-picker-search-input {
   border: 1px solid #e5e5ea;
   border: 1px solid var(--rs-border-primary);
 }
-.rs-panel-group .rs-panel {
+.rs-panel-group > .rs-panel {
   border: none;
 }
-.rs-panel-group .rs-panel + .rs-panel {
+.rs-panel-group > .rs-panel + .rs-panel {
   position: relative;
 }
-.rs-panel-group .rs-panel + .rs-panel::before {
+.rs-panel-group > .rs-panel + .rs-panel::before {
   content: '';
   position: absolute;
   top: 0;