rsuite 5.50.0 → 5.52.0

package/esm/internals/Picker/utils.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface NodeKeys {
+    valueKey: string;
+    childrenKey: string;
+}
+export declare function createConcatChildrenFunction<T = any>(node: any, nodeValue?: any, nodeKeys?: NodeKeys): (data: T[], children: T[]) => T[];
+export declare function shouldDisplay(label: React.ReactNode, searchKeyword: string): boolean;
+export interface KeyboardEvents {
+    down?: React.KeyboardEventHandler;
+    up?: React.KeyboardEventHandler;
+    enter?: React.KeyboardEventHandler;
+    del?: React.KeyboardEventHandler;
+    esc?: React.KeyboardEventHandler;
+    right?: React.KeyboardEventHandler;
+    left?: React.KeyboardEventHandler;
+}
+/**
+ * Handling keyboard events...
+ * @param event Keyboard event object
+ * @param events Event callback functions
+ */
+export declare function onMenuKeyDown(event: React.KeyboardEvent, events: KeyboardEvents): void;

package/esm/internals/Picker/utils.js

@@ -0,0 +1,88 @@
+'use client';
+import React from 'react';
+import trim from 'lodash/trim';
+import { findNodeOfTree } from '../../utils/treeUtils';
+import { KEY_VALUES, reactToString } from '../../utils';
+var defaultNodeKeys = {
+  valueKey: 'value',
+  childrenKey: 'children'
+};
+export function createConcatChildrenFunction(node, nodeValue, nodeKeys) {
+  if (nodeKeys === void 0) {
+    nodeKeys = defaultNodeKeys;
+  }
+  var _nodeKeys = nodeKeys,
+    valueKey = _nodeKeys.valueKey,
+    childrenKey = _nodeKeys.childrenKey;
+  return function (data, children) {
+    if (nodeValue) {
+      node = findNodeOfTree(data, function (item) {
+        return nodeValue === item[valueKey];
+      });
+    }
+    node[childrenKey] = children;
+    return data.concat([]);
+  };
+}
+export function shouldDisplay(label, searchKeyword) {
+  if (!trim(searchKeyword)) {
+    return true;
+  }
+  var keyword = searchKeyword.toLocaleLowerCase();
+  if (typeof label === 'string' || typeof label === 'number') {
+    return ("" + label).toLocaleLowerCase().indexOf(keyword) >= 0;
+  } else if ( /*#__PURE__*/React.isValidElement(label)) {
+    var nodes = reactToString(label);
+    return nodes.join('').toLocaleLowerCase().indexOf(keyword) >= 0;
+  }
+  return false;
+}
+/**
+ * Handling keyboard events...
+ * @param event Keyboard event object
+ * @param events Event callback functions
+ */
+export function onMenuKeyDown(event, events) {
+  var down = events.down,
+    up = events.up,
+    enter = events.enter,
+    del = events.del,
+    esc = events.esc,
+    right = events.right,
+    left = events.left;
+  switch (event.key) {
+    // down
+    case KEY_VALUES.DOWN:
+      down === null || down === void 0 ? void 0 : down(event);
+      event.preventDefault();
+      break;
+    // up
+    case KEY_VALUES.UP:
+      up === null || up === void 0 ? void 0 : up(event);
+      event.preventDefault();
+      break;
+    // enter
+    case KEY_VALUES.ENTER:
+      enter === null || enter === void 0 ? void 0 : enter(event);
+      event.preventDefault();
+      break;
+    // delete
+    case KEY_VALUES.BACKSPACE:
+      del === null || del === void 0 ? void 0 : del(event);
+      break;
+    // esc | tab
+    case KEY_VALUES.ESC:
+    case KEY_VALUES.TAB:
+      esc === null || esc === void 0 ? void 0 : esc(event);
+      break;
+    // left arrow
+    case KEY_VALUES.LEFT:
+      left === null || left === void 0 ? void 0 : left(event);
+      break;
+    // right arrow
+    case KEY_VALUES.RIGHT:
+      right === null || right === void 0 ? void 0 : right(event);
+      break;
+    default:
+  }
+}

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/{cjs → esm/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

@@ -2,7 +2,7 @@ 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 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

@@ -26,8 +26,21 @@ export function map(children, func, context) {
     return handle;
   });
 }
+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');
+}
 export function mapCloneElement(children, func, context) {
-  return map(children, function (child, index) {
+  var elements = children;
+  if (isFragment(children)) {
+    var _props;
+    elements = (_props = children.props) === null || _props === void 0 ? void 0 : _props.children;
+  }
+  return map(elements, function (child, index) {
     return /*#__PURE__*/React.cloneElement(child, _extends({
       key: index
     }, func(child, index)));

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';

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';

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 {
@@ -287,10 +294,10 @@
 }
 
 // Picker Menu
-.rs-picker-menu {
+.rs-picker-popup {
   position: absolute;
   text-align: left;
-  z-index: @zindex-picker-menu;
+  z-index: @zindex-picker-popup;
   border-radius: @border-radius;
   background-color: var(--rs-bg-overlay);
   box-shadow: var(--rs-shadow-overlay);
@@ -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>

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 {
@@ -223,14 +221,14 @@
 }
 
 .tag-picker-search-input-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
-  .rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-tag-wrapper .rs-picker-search-input {
+  .rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-textbox .rs-picker-search-input {
     padding: (@padding-vertical - 1px) @padding-horizontal;
     font-size: @font-size;
     line-height: @line-height;
   }
 
   // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
-  .rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  .rs-picker-tag & ~ .rs-picker-textbox {
     padding-bottom: @padding-vertical - 3px;
 
     .rs-tag {
@@ -281,7 +279,7 @@
   );
   /* stylelint-enable */
 
-  .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  .rs-picker-input.rs-picker-tag & ~ .rs-picker-textbox {
     padding-bottom: @padding-y-xs - 1px;
 
     .rs-tag {

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.50.0",
+  "version": "5.52.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/dark.less

@@ -366,4 +366,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%);
+  }
 }