rsuite 5.51.0 → 5.53.0

package/esm/{Picker → internals/Picker}/propTypes.js

@@ -1,14 +1,15 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
-import { PLACEMENT } from '../utils';
-import { animationPropTypes } from '../Animation/utils';
+import { PLACEMENT } from '../../utils';
+import { animationPropTypes } from '../../Animation/utils';
+import { oneOf } from '../propTypes';
 export var pickerPropTypes = _extends({}, animationPropTypes, {
   classPrefix: PropTypes.string,
   className: PropTypes.string,
   style: PropTypes.object,
   locale: PropTypes.any,
-  appearance: PropTypes.oneOf(['default', 'subtle']),
+  appearance: oneOf(['default', 'subtle']),
   block: PropTypes.bool,
   containerPadding: PropTypes.number,
   container: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
@@ -16,7 +17,7 @@ export var pickerPropTypes = _extends({}, animationPropTypes, {
   menuClassName: PropTypes.string,
   menuStyle: PropTypes.object,
   placeholder: PropTypes.node,
-  placement: PropTypes.oneOf(PLACEMENT),
+  placement: oneOf(PLACEMENT),
   preventOverflow: PropTypes.bool,
   open: PropTypes.bool,
   defaultOpen: PropTypes.bool,

package/{cjs → esm/internals}/Picker/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { RsRefForwardingComponent } from '../@types/common';
-import type { ListHandle } from '../Windowing';
+import { RsRefForwardingComponent } from '../../@types/common';
+import type { ListHandle } from '../../internals/Windowing';
 export interface PickerHandle {
     root: HTMLElement | null;
     list?: ListHandle;

package/esm/{Picker → internals/Picker}/utils.js

@@ -1,8 +1,8 @@
 'use client';
 import React from 'react';
 import trim from 'lodash/trim';
-import { findNodeOfTree } from '../utils/treeUtils';
-import { KEY_VALUES, reactToString } from '../utils';
+import { findNodeOfTree } from '../../utils/treeUtils';
+import { KEY_VALUES, reactToString } from '../../utils';
 var defaultNodeKeys = {
   valueKey: 'value',
   childrenKey: 'children'

package/esm/{Plaintext → internals/Plaintext}/Plaintext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps } from '../@types/common';
+import { WithAsProps } from '../../@types/common';
 declare type LocaleKey = 'unfilled' | 'notSelected' | 'notUploaded';
 export interface PlaintextProps extends WithAsProps {
     placeholder?: React.ReactNode;

package/esm/{Plaintext → internals/Plaintext}/Plaintext.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
-import { useClassNames, useCustom } from '../utils';
+import { useClassNames, useCustom } from '../../utils';
 /**
  * Make the component display in plain text, and display default characters when there is no children.
  * @private

package/esm/{Ripple → internals/Ripple}/Ripple.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps } from '../@types/common';
+import { WithAsProps } from '../../@types/common';
 export interface RippleProps extends WithAsProps {
     onMouseDown?: (position: any, event: React.MouseEvent) => void;
 }

package/esm/{Ripple → internals/Ripple}/Ripple.js

@@ -5,8 +5,8 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import getOffset from 'dom-lib/getOffset';
 import on from 'dom-lib/on';
-import Transition from '../Animation/Transition';
-import { mergeRefs, useClassNames, useCustom } from '../utils';
+import Transition from '../../Animation/Transition';
+import { mergeRefs, useClassNames, useCustom } from '../../utils';
 var getPosition = function getPosition(target, event) {
   var offset = getOffset(target);
   var offsetX = (event.pageX || 0) - offset.left;

package/esm/internals/SearchBox/SearchBox.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
+export interface SearchBoxProps extends WithAsProps {
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const SearchBox: RsRefForwardingComponent<'div', SearchBoxProps>;
+export default SearchBox;

package/esm/internals/SearchBox/SearchBox.js

@@ -0,0 +1,44 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject, _templateObject2;
+import React from 'react';
+import Search from '@rsuite/icons/legacy/Search';
+import Input from '../../Input';
+import InputGroup from '../..//InputGroup';
+import { useClassNames } from '../../utils';
+var SearchBox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'search-box' : _props$classPrefix,
+    value = props.value,
+    className = props.className,
+    placeholder = props.placeholder,
+    inputRef = props.inputRef,
+    onChange = props.onChange,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "value", "className", "placeholder", "inputRef", "onChange"]);
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
+  var classes = merge(className, withClassPrefix());
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: ref,
+    className: classes
+  }), /*#__PURE__*/React.createElement(InputGroup, {
+    inside: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    role: "searchbox",
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["input"]))),
+    value: value,
+    onChange: onChange,
+    placeholder: placeholder,
+    ref: inputRef
+  }), /*#__PURE__*/React.createElement(InputGroup.Addon, null, /*#__PURE__*/React.createElement(Search, {
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["icon"])))
+  }))));
+});
+SearchBox.displayName = 'SearchBox';
+export default SearchBox;

package/esm/internals/SearchBox/index.d.ts

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

package/esm/internals/SearchBox/index.js

@@ -0,0 +1,3 @@
+'use client';
+import SearchBox from './SearchBox';
+export default SearchBox;

package/esm/{Windowing → internals/Windowing}/AutoSizer.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useState, useRef } from 'react';
 import { useCallback } from 'react';
 import getStyle from 'dom-lib/getStyle';
-import { mergeRefs, useElementResize, useMount } from '../utils';
+import { mergeRefs, useElementResize, useMount } from '../../utils';
 /**
  * High-order component that automatically adjusts the width and height of a single child.
  *

package/esm/{Windowing → internals/Windowing}/List.d.ts

@@ -1,5 +1,5 @@
 import { VariableSizeList, ListItemKeySelector, ListOnScrollProps, ListOnItemsRenderedProps } from 'react-window';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
 export interface ListProps<T = any> extends WithAsProps {
     /**
      * @deprecated use itemSize instead

package/esm/{Windowing → internals/Windowing}/List.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useRef, useImperativeHandle, useCallback, useMemo } from 'react';
 import { VariableSizeList } from 'react-window';
-import { useCustom } from '../utils';
+import { useCustom } from '../../utils';
 /**
  * This component renders a virtualized list of elements with either fixed or dynamic heights.
  *

package/esm/internals/index.js

@@ -0,0 +1 @@
+'use client';

package/esm/{utils → internals/propTypes}/deprecatePropType.js

@@ -1,7 +1,7 @@
 'use client';
 // Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
 
-import warnOnce from './warnOnce';
+import warnOnce from '../../utils/warnOnce';
 
 /**
  * Prints deprecation message when user uses a deprecated prop

package/esm/{utils/propTypeChecker.d.ts → internals/propTypes/index.d.ts}

@@ -1,3 +1,5 @@
 import PropTypes from 'prop-types';
+export { default as oneOf } from './oneOf';
+export { default as deprecatePropType, deprecatePropTypeNew } from './deprecatePropType';
 export declare function tupleType<T>(...typeCheckers: any[]): PropTypes.Requireable<T>;
 export declare const refType: PropTypes.Requireable<any>;

package/esm/{utils/propTypeChecker.js → internals/propTypes/index.js}

@@ -1,5 +1,7 @@
 'use client';
 import PropTypes from 'prop-types';
+export { default as oneOf } from './oneOf';
+export { default as deprecatePropType, deprecatePropTypeNew } from './deprecatePropType';
 export function tupleType() {
   for (var _len = arguments.length, typeCheckers = new Array(_len), _key = 0; _key < _len; _key++) {
     typeCheckers[_key] = arguments[_key];

package/esm/internals/propTypes/oneOf.d.ts

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+declare const oneOf: typeof PropTypes.oneOf;
+export default oneOf;

package/esm/internals/propTypes/oneOf.js

@@ -0,0 +1,13 @@
+'use client';
+import PropTypes from 'prop-types';
+var oneOf = function oneOf(arr) {
+  var checkType = PropTypes.oneOf(arr);
+
+  // for [storybook/utils/propTypesToArgType.ts]
+  checkType._argType_ = {
+    type: 'oneOf',
+    value: arr
+  };
+  return checkType;
+};
+export default oneOf;

package/esm/utils/ReactChildren.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export declare function find(children: React.ReactNode, func: any, context?: any): React.ReactNode;
-export declare function map(children: React.ReactNode, func: any, context?: any): any[] | null | undefined;
-export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any[] | null | undefined;
-export declare function count(children: React.ReactChildren): number;
+export declare function map(children: React.ReactNode, func: any, context?: any): any;
+export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any;
+export declare function count(children: React.ReactNode): number;
 declare function some(children: React.ReactNode, func: any, context?: any): boolean;
 declare const _default: {
     mapCloneElement: typeof mapCloneElement;

package/esm/utils/ReactChildren.js

@@ -1,10 +1,22 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    return object.type || object.$$typeof;
+  }
+}
+function isFragment(children) {
+  return React.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
+}
+function getChildren(children) {
+  var _props;
+  return isFragment(children) ? (_props = children.props) === null || _props === void 0 ? void 0 : _props.children : children;
+}
 export function find(children, func, context) {
   var index = 0;
   var result;
-  React.Children.forEach(children, function (child) {
+  React.Children.forEach(getChildren(children), function (child) {
     if (result) {
       return;
     }
@@ -17,7 +29,7 @@ export function find(children, func, context) {
 }
 export function map(children, func, context) {
   var index = 0;
-  return React.Children.map(children, function (child) {
+  return React.Children.map(getChildren(children), function (child) {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;
     }
@@ -41,7 +53,7 @@ export function count(children) {
 function some(children, func, context) {
   var index = 0;
   var result = false;
-  React.Children.forEach(children, function (child) {
+  React.Children.forEach(getChildren(children), function (child) {
     if (result) {
       return;
     }

package/esm/utils/dateUtils.js

@@ -8,6 +8,7 @@ import getMinutes from 'date-fns/getMinutes';
 import getSeconds from 'date-fns/getSeconds';
 import addDays from 'date-fns/addDays';
 import set from 'date-fns/set';
+import isValid from 'date-fns/isValid';
 export { default as addDays } from 'date-fns/addDays';
 export { default as addMonths } from 'date-fns/addMonths';
 export { default as addYears } from 'date-fns/addYears';
@@ -137,6 +138,9 @@ export function getMonthView(monthDate, isoWeek) {
 export function copyTime(_ref) {
   var from = _ref.from,
     to = _ref.to;
+  if (!isValid(from) || !isValid(to)) {
+    return to;
+  }
   return set(to, {
     hours: getHours(from),
     minutes: getMinutes(from),

package/esm/utils/index.d.ts

@@ -2,7 +2,6 @@ export * from './BrowserDetection';
 export * from './htmlPropsUtils';
 export * from './constants';
 export * as DateUtils from './dateUtils';
-export * as TypeChecker from './propTypeChecker';
 export * from './statusIcons';
 export { default as guid } from './guid';
 export { default as prefix, defaultClassPrefix, getClassNamePrefix, globalKey } from './prefix';
@@ -45,3 +44,5 @@ export { default as useIsMounted } from './useIsMounted';
 export { default as useMount } from './useMount';
 export { default as useUniqueId } from './useUniqueId';
 export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { default as useInternalId } from './useInternalId';
+export { default as useEnsuredRef } from './useEnsuredRef';

package/esm/utils/index.js

@@ -4,8 +4,6 @@ export * from './htmlPropsUtils';
 export * from './constants';
 import * as _DateUtils from './dateUtils';
 export { _DateUtils as DateUtils };
-import * as _TypeChecker from './propTypeChecker';
-export { _TypeChecker as TypeChecker };
 export * from './statusIcons';
 export { default as guid } from './guid';
 export { default as prefix, defaultClassPrefix, getClassNamePrefix, globalKey } from './prefix';
@@ -48,4 +46,6 @@ export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useIsMounted } from './useIsMounted';
 export { default as useMount } from './useMount';
 export { default as useUniqueId } from './useUniqueId';
-export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { default as useInternalId } from './useInternalId';
+export { default as useEnsuredRef } from './useEnsuredRef';

package/esm/utils/statusIcons.js

@@ -3,14 +3,14 @@ import React from 'react';
 import Info from '@rsuite/icons/legacy/Info';
 import CheckCircle from '@rsuite/icons/legacy/CheckCircle';
 import CloseCircle from '@rsuite/icons/legacy/CloseCircle';
-import Remind from '@rsuite/icons/legacy/Remind';
 import Check from '@rsuite/icons/Check';
 import Close from '@rsuite/icons/Close';
+import RemindRoundIcon from '@rsuite/icons/RemindRound';
 export var MESSAGE_STATUS_ICONS = {
   info: /*#__PURE__*/React.createElement(Info, null),
   success: /*#__PURE__*/React.createElement(CheckCircle, null),
   error: /*#__PURE__*/React.createElement(CloseCircle, null),
-  warning: /*#__PURE__*/React.createElement(Remind, null)
+  warning: /*#__PURE__*/React.createElement(RemindRoundIcon, null)
 };
 export var PROGRESS_STATUS_ICON = {
   success: /*#__PURE__*/React.createElement(Check, null),

package/esm/utils/treeUtils.d.ts

@@ -3,7 +3,7 @@ import { TreeNodeType, TreeNodesType } from '../CheckTreePicker/utils';
 import { TREE_NODE_DROP_POSITION } from '../utils';
 import { CheckTreePickerProps } from '../CheckTreePicker/CheckTreePicker';
 import { TreePickerProps } from '../TreePicker/TreePicker';
-import { ListHandle } from '../Windowing';
+import { ListHandle } from '../internals/Windowing';
 declare type PartialTreeProps = Partial<TreePickerProps | CheckTreePickerProps>;
 /**
  * according node parentNode expand state decide node whether to show

package/esm/utils/treeUtils.js

@@ -14,7 +14,7 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import shallowEqualArray from '../utils/shallowEqualArray';
 import { getNodeCheckState } from '../CheckTreePicker/utils';
 import { TREE_NODE_DROP_POSITION, shallowEqual } from '../utils';
-import { shouldDisplay } from '../Picker';
+import { shouldDisplay } from '../internals/Picker';
 import reactToString from './reactToString';
 import { TREE_NODE_PADDING, TREE_NODE_ROOT_PADDING } from './constants';
 import { attachParent } from './attachParent';

package/esm/utils/useUniqueId.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import uniqueId from 'lodash/uniqueId';
-var reactUseId = React['useId' + ''];
+var reactUseId = React['useId'.toString()];
 
 /**
  * Used for generating unique ID for DOM elements

package/{CloseButton → internals/CloseButton}/styles/index.less

@@ -1,4 +1,4 @@
-@import '../../styles/common';
+@import '../../../styles/common';
 
 // Close button
 .rs-btn-close {

package/{Picker → internals/Picker}/styles/index.less

@@ -1,9 +1,14 @@
-@import '../../styles/common.less';
-@import '../../styles/mixins/listbox.less';
-@import '../../styles/mixins/combobox.less';
-@import (reference) '../../Button/styles/index.less';
-@import '../../Form/styles/mixin.less';
-@import 'mixin.less';
+@import '../../../styles/common.less';
+@import '../../../Button/styles/index.less';
+@import '../../../styles/mixins/listbox.less';
+@import '../../../styles/mixins/combobox.less';
+@import '../../../Stack/styles/index.less';
+@import '../../../Form/styles/mixin.less';
+@import '../../CloseButton/styles/index.less';
+@import '../../../Loader/styles/index.less';
+@import '../../../Input/styles/index.less';
+@import '../../../InputGroup/styles/index.less';
+@import './mixin.less';
 
 //
 // Pickers
@@ -145,7 +150,6 @@
   }
 }
 
-.rs-btn,
 .rs-picker-toggle {
   .rs-picker-default & {
     transition: @picker-transition;
@@ -230,8 +234,11 @@
   .picker-default-toggle();
   .picker-subtle-toggle();
 
-  width: 100%;
-  text-align: left;
+  &.rs-btn {
+    width: 100%;
+    text-align: left;
+  }
+
   .ellipsis();
 
   &-label {
@@ -299,6 +306,7 @@
   transition: none;
   display: flex;
   flex-direction: column;
+  padding: @border-radius 0;
 
   .high-contrast-mode({
     border: 1px solid var(--rs-border-primary);
@@ -314,44 +322,15 @@
     z-index: (@zindex-drawer + @zindex-picker-toggle);
   }
 
-  // Select picker menu & Check select picker menu always has 6px gap
-  &.rs-picker-select-menu,
-  &.rs-picker-check-menu {
-    padding-top: @border-radius;
-  }
-
-  // Searchbar
-  .rs-picker-search-bar {
-    position: relative;
-    padding: (@picker-menu-padding - @border-radius) @picker-menu-padding @picker-menu-padding;
-
-    .rs-picker-search-bar-input {
-      .default-input();
-
-      min-width: @picker-content-min-width;
-      padding-right: @picker-search-bar-icon-width + (@input-padding-x - @input-border-width) * 2;
-    }
-
-    .rs-picker-search-bar-search-icon {
-      position: absolute;
-      width: @picker-search-bar-icon-width;
-      color: var(--rs-text-secondary);
-      font-size: @font-size-base;
-      height: @line-height-computed;
-      top: (@picker-menu-padding - @border-radius + @input-padding-y);
-      right: (@picker-menu-padding + @input-padding-x);
-
-      .rs-@{tree-picker-prefix}-menu&,
-      .rs-@{check-tree-picker-prefix}-menu& {
-        top: (@input-padding-y - @input-border-width);
-      }
-    }
-  }
-
   &.rs-picker-inline {
     position: relative;
     box-shadow: none;
   }
+
+  .rs-search-box {
+    padding: (@picker-menu-padding - @border-radius) @picker-menu-padding
+      (@picker-menu-padding - @border-radius);
+  }
 }
 
 // Make sure styles the same with <Input>
@@ -375,7 +354,7 @@
   &:not(.rs-checkbox-disabled):hover,
   &:focus,
   &&-focus {
-    .listbox-option-active(true);
+    .listbox-option-active();
 
     .high-contrast-mode({
       .rs-check-tree-node-text-wrapper {

package/{Picker → internals/Picker}/styles/mixin.less

@@ -1,11 +1,9 @@
-@import '../../styles/variables';
-@import '../../styles/mixins/color-modes';
-@import '../../Dropdown/styles/mixin';
+@import '../../../styles/variables.less';
+@import '../../../styles/mixins/color-modes.less';
+@import '../../../Dropdown/styles/mixin.less';
 
 // Picker Menu items common styles
 .picker-menu-items-reset() {
-  // Set aside border-radius borders
-  margin-bottom: @border-radius;
   overflow-y: auto;
 
   ul {

package/{Ripple → internals/Ripple}/styles/index.less

@@ -1,4 +1,4 @@
-@import '../../styles/common';
+@import '../../../styles/common';
 
 .rs-ripple {
   position: absolute;

package/internals/SearchBox/styles/index.less

@@ -0,0 +1,11 @@
+@import '../../../styles/common.less';
+@import '../../../Input/styles/index.less';
+@import '../../../InputGroup/styles/index.less';
+
+.rs-search-box {
+  position: relative;
+
+  &-icon {
+    color: var(--rs-text-secondary);
+  }
+}

package/internals/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/internals",
+  "private": true,
+  "main": "../cjs/internals/index.js",
+  "module": "../esm/internals/index.js",
+  "types": "../esm/internals/index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.51.0",
+  "version": "5.53.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/dark.less

@@ -134,18 +134,22 @@
   --rs-message-success-text: #fff;
   --rs-message-success-icon: #fff;
   --rs-message-success-bg: var(--rs-green-500);
+  --rs-message-success-border: var(--rs-green-800);
   --rs-message-info-header: #fff;
   --rs-message-info-text: #fff;
   --rs-message-info-icon: #fff;
   --rs-message-info-bg: var(--rs-blue-500);
+  --rs-message-info-border: var(--rs-blue-800);
   --rs-message-warning-header: var(--rs-gray-900);
   --rs-message-warning-text: var(--rs-gray-900);
   --rs-message-warning-icon: var(--rs-gray-900);
   --rs-message-warning-bg: var(--rs-yellow-500);
+  --rs-message-warning-border: var(--rs-yellow-800);
   --rs-message-error-header: #fff;
   --rs-message-error-text: #fff;
   --rs-message-error-icon: #fff;
   --rs-message-error-bg: var(--rs-red-500);
+  --rs-message-error-border: var(--rs-red-800);
 
   // Tooltip
   --rs-tooltip-bg: var(--rs-gray-500);
@@ -366,4 +370,44 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+
+  // CSS relative color syntax is not supported
+  // https://developer.chrome.com/blog/css-relative-color-syntax/
+  @supports not (color: rgb(from white r g b)) {
+    // Misc
+    --rs-bg-backdrop: fade(@B900-dark, 80%);
+    --rs-color-focus-ring: 0 0 0 3px fade(@H500-dark, 25%);
+    --rs-state-focus-shadow: 0 0 0 3px fade(@H500-dark, 25%);
+    --rs-state-focus-outline: 3px solid fade(@H500-dark, 25%);
+
+    // Loader
+    --rs-loader-ring: fade(@B050-dark, 30);
+    --rs-loader-backdrop: fade(@B900-dark, 83%);
+    --rs-loader-ring-inverse: fade(@B050-dark, 80);
+    --rs-loader-backdrop-inverse: fade(@B000-dark, 90);
+
+    // Dropdown
+    --rs-dropdown-item-bg-active: fade(@H900-dark, 20);
+
+    // ARIA Listboxes
+    --rs-listbox-option-selected-bg: fade(@H900-dark, 20%);
+
+    // Slider
+    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-dark, 25);
+
+    // Uploader
+    --rs-uploader-overlay-bg: fade(@B600-dark, 80);
+
+    // Carousel
+    --rs-carousel-indicator: fade(@B000-dark, 40);
+
+    // List
+    --rs-list-placeholder-bg: fade(@H900-dark, 20%);
+
+    // Calendar
+    --rs-calendar-range-bg: fade(@H900-dark, 50%);
+
+    // Placeholder
+    --rs-placeholder-active: lighten(@B600-dark, 5%);
+  }
 }