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

package/cjs/InlineEdit/EditableControls.js

@@ -10,7 +10,7 @@ var _Check = _interopRequireDefault(require("@rsuite/icons/Check"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Stack = _interopRequireDefault(require("../Stack"));
-const EditableControls = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const EditableControls = /*#__PURE__*/_react.default.forwardRef(function EditableControls(props, ref) {
   const {
     onSave,
     onCancel,

package/cjs/InputGroup/InputGroup.js

@@ -17,7 +17,7 @@ const InputGroupContext = exports.InputGroupContext = /*#__PURE__*/_react.defaul
  * The `InputGroup` component is used to specify an input field with an add-on.
  * @see https://rsuitejs.com/components/input/#input-group
  */
-const InputGroup = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const InputGroup = /*#__PURE__*/_react.default.forwardRef(function InputGroup(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('InputGroup', props);

package/cjs/InputNumber/InputNumber.js

@@ -200,7 +200,7 @@ const InputNumber = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   });
   const handleChange = (0, _hooks.useEventCallback)((value, event) => {
     const separator = decimalSeparator || '.';
-    const escapedSeparator = separator.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+    const escapedSeparator = separator.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
     const regex = new RegExp(`^-?(?:\\d+)?(${escapedSeparator})?\\d*$`);
     if (!regex.test(value) && value !== '') {
       return;

package/cjs/InputPicker/InputPicker.js

@@ -192,7 +192,6 @@ const InputPicker = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   (0, _react.useEffect)(() => {
     var _triggerRef$current2, _triggerRef$current2$;
     (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || (_triggerRef$current2$ = _triggerRef$current2.updatePosition) === null || _triggerRef$current2$ === void 0 || _triggerRef$current2$.call(_triggerRef$current2);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchKeyword, value]);
   const getDataItem = value => {
     // Find active `MenuItem` by `value`

package/cjs/InputPicker/TagList.js

@@ -26,4 +26,5 @@ const TagList = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     className: prefix`tag-list`
   }, rest), children);
 });
+TagList.displayName = 'TagList';
 var _default = exports.default = TagList;

package/cjs/InputPicker/TextBox.js

@@ -44,4 +44,5 @@ const TextBox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     value: inputValue
   })));
 });
+TextBox.displayName = 'TextBox';
 var _default = exports.default = TextBox;

package/cjs/InputPicker/hooks/useMaxWidth.js

@@ -15,7 +15,6 @@ function useMaxWidth(triggerRef) {
       var _triggerRef$current2;
       setMaxWidth((0, _getWidth.default)((_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.root));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return maxWidth;
 }

package/cjs/List/List.js

@@ -18,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * The `List` component is used to specify the layout of the list.
  * @see https://rsuitejs.com/components/list
  */
-const List = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const List = /*#__PURE__*/_react.default.forwardRef(function List(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('List', props);

package/cjs/MaskedInput/MaskedInput.js

@@ -21,4 +21,5 @@ const MaskedInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ref: ref
   }));
 });
+MaskedInput.displayName = 'MaskedInput';
 var _default = exports.default = MaskedInput;

package/cjs/MaskedInput/conformToMask.js

@@ -132,7 +132,6 @@ function conformToMask(rawValue, mask, config) {
         // or we find at least one character that we can map.
         while (rawValueArr.length > 0) {
           // Let's retrieve the first user character in the queue of characters we have left
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           const {
             char: rawValueChar,
             isNew

package/cjs/Modal/Modal.js

@@ -28,7 +28,7 @@ const modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
  * The `Modal` component is used to show content in a layer above the app.
  * @see https://rsuitejs.com/components/modal
  */
-const Modal = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Modal = /*#__PURE__*/_react.default.forwardRef(function Modal(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Modal', props);

package/cjs/Modal/utils.js

@@ -69,7 +69,6 @@ const useBodyStyles = (ref, options) => {
   }, [overflow, prefix, ref, size, updateBodyStyles]);
   (0, _react.useEffect)(() => {
     return onDestroyEvents;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return [overflow ? bodyStyles : null, onChangeBodyStyles, onDestroyEvents];
 };

package/cjs/Nav/Nav.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * The `Nav` component is used to create navigation links.
  * @see https://rsuitejs.com/components/nav
  */
-const Nav = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Nav = /*#__PURE__*/_react.default.forwardRef(function Nav(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Nav', props);

package/cjs/Nav/NavDropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import { PlacementCorners, WithAsProps, RsRefForwardingComponent } from '../internals/types';
 import Button from '../Button';
 import NavDropdownItem from './NavDropdownItem';
 import NavDropdownMenu from './NavDropdownMenu';
@@ -13,7 +13,7 @@ export interface NavDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLA
     /** Triggering events */
     trigger?: NavDropdownTrigger | readonly NavDropdownTrigger[];
     /** The placement of Menu */
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
     /** Whether or not component is disabled */
     disabled?: boolean;
     /** The style of the menu */

package/cjs/Nav/NavDropdown.js

@@ -29,7 +29,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *   </Nav.Menu>
  * </Nav>
  */
-const NavDropdown = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const NavDropdown = /*#__PURE__*/_react.default.forwardRef(function NavDropdown(props, ref) {
   const nav = (0, _react.useContext)(_NavContext.default);
   if (!nav) {
     throw new Error('<Nav.Dropdown> must be rendered within a <Nav> component.');

package/cjs/Nav/NavDropdownToggle.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import Button from '../Button';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../internals/types';
+import { WithAsProps, RsRefForwardingComponent, PlacementCorners } from '../internals/types';
 import { NavItemProps } from './NavItem';
 export interface NavDropdownToggleProps extends WithAsProps {
     icon?: NavItemProps['icon'];
     noCaret?: boolean;
     renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
 }
 /**
  * @private this component is not supposed to be used directly

package/cjs/Navbar/Navbar.js

@@ -16,7 +16,7 @@ const NavbarContext = exports.NavbarContext = /*#__PURE__*/_react.default.create
  * The `Navbar` component is used to create a navigation header.
  * @see https://rsuitejs.com/components/navbar
  */
-const Navbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Navbar = /*#__PURE__*/_react.default.forwardRef(function Navbar(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Navbar', props);

package/cjs/Navbar/NavbarDropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import { PlacementCorners, WithAsProps, RsRefForwardingComponent } from '../internals/types';
 import { IconProps } from '@rsuite/icons/Icon';
 import Button from '../Button';
 import NavDropdownItem from '../Nav/NavDropdownItem';
@@ -13,7 +13,7 @@ export interface NavbarDropdownProps<T = any> extends WithAsProps, Omit<React.HT
     /** Triggering events */
     trigger?: NavbarDropdownTrigger | readonly NavbarDropdownTrigger[];
     /** The placement of Menu */
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
     /** Whether or not component is disabled */
     disabled?: boolean;
     /** The style of the menu */

package/cjs/Navbar/NavbarDropdown.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /**
  * @private
  */
-const NavbarDropdown = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const NavbarDropdown = /*#__PURE__*/_react.default.forwardRef(function NavbarDropdown(props, ref) {
   const navbar = (0, _react.useContext)(_.NavbarContext);
   if (!navbar) {
     throw new Error('<Navbar.Dropdown> should be used within a <Navbar> component.');

package/cjs/Navbar/NavbarDropdownToggle.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import Button from '../Button';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../internals/types';
+import { WithAsProps, RsRefForwardingComponent, PlacementCorners } from '../internals/types';
 export interface NavbarDropdownToggleProps extends WithAsProps {
     noCaret?: boolean;
     renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
 }
 /**
  * @private this component is not supposed to be used directly

package/cjs/RangeSlider/RangeSlider.js

@@ -88,7 +88,7 @@ const RangeSlider = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }, [max, min]);
   const [value, setValue] = (0, _hooks.useControlled)(getValidValue(valueProp), getValidValue(defaultValue));
 
-  // The count of values ​​that can be entered.
+  // The count of values that can be entered.
   const count = (0, _react.useMemo)(() => (0, _utils.precisionMath)((max - min) / step), [max, min, step]);
 
   // Get the height of the progress bar
@@ -191,10 +191,10 @@ const RangeSlider = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
   });
   const handleKeyDown = (0, _hooks.useEventCallback)(event => {
-    var _event$target;
+    const target = event.target;
     const {
       key
-    } = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target['dataset'];
+    } = (target === null || target === void 0 ? void 0 : target.dataset) || {};
     const nextValue = [...value];
     const increaseKey = rtl ? 'ArrowLeft' : 'ArrowRight';
     const decreaseKey = rtl ? 'ArrowRight' : 'ArrowLeft';
@@ -238,7 +238,7 @@ const RangeSlider = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     let [start, end] = value;
     const v = getValueByPosition(event);
 
-    //  Judging that the current click value is closer to the values ​​of `start` and` end`.
+    // Judging that the current click value is closer to the values of `start` and `end`.
     if (Math.abs(start - v) < Math.abs(end - v)) {
       start = v;
     } else {

package/cjs/Rate/Character.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
 var _react = _interopRequireWildcard(require("react"));
 var _contains = _interopRequireDefault(require("dom-lib/contains"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _hooks = require("../internals/hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,13 +37,13 @@ const Character = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     withClassPrefix
   } = (0, _hooks.useClassNames)(classPrefix);
   const beforeRef = (0, _react.useRef)(null);
-  const classes = merge(className, withClassPrefix(!(0, _isNil2.default)(status) && characterStatus[status]));
-  const handleMouseMove = (0, _react.useCallback)(event => {
+  const classes = merge(className, withClassPrefix(!(0, _isNil.default)(status) && characterStatus[status]));
+  const handleMouseMove = (0, _hooks.useEventCallback)(event => {
     onMouseMove === null || onMouseMove === void 0 || onMouseMove(getKey(beforeRef.current, event.target), event);
-  }, [onMouseMove]);
-  const handleClick = (0, _react.useCallback)(event => {
+  });
+  const handleClick = (0, _hooks.useEventCallback)(event => {
     onClick === null || onClick === void 0 || onClick(getKey(beforeRef.current, event.target), event);
-  }, [onClick]);
+  });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,

package/cjs/Rate/Rate.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import type { WithAsProps, TypeAttributes, RsRefForwardingComponent, FormControlBaseProps } from '../internals/types';
+import type { WithAsProps, Color, TypeAttributes, RsRefForwardingComponent, FormControlBaseProps } from '../internals/types';
 export interface RateProps<T = number> extends WithAsProps, FormControlBaseProps<T> {
     allowHalf?: boolean;
     character?: React.ReactNode;
     classPrefix?: string;
     cleanable?: boolean;
-    /** A tate can have different sizes */
+    /** A rate can have different sizes */
     size?: TypeAttributes.Size;
-    /** A tate can have different colors */
-    color?: TypeAttributes.Color;
+    /** A rate can have different colors */
+    color?: Color | React.CSSProperties['color'];
     max?: number;
     vertical?: boolean;
     renderCharacter?: (value: number, index: number) => React.ReactNode;

package/cjs/Rate/Rate.js

@@ -41,6 +41,7 @@ const Rate = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     defaultValue = 0,
     cleanable = true,
     plaintext,
+    style,
     onChange,
     renderCharacter,
     onChangeActive,
@@ -56,23 +57,23 @@ const Rate = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     merge,
     withClassPrefix
   } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(size, color, {
+  const classes = merge(className, withClassPrefix(size, (0, _utils.isPresetColor)(color) && color, {
     disabled,
     readonly: readOnly
   }));
+  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-rate-symbol-checked')), [style, color]);
   const resetCharacterMap = (0, _react.useCallback)(() => {
     setCharacterMap(getCharacterMap());
   }, [getCharacterMap]);
   (0, _react.useEffect)(() => {
     // Update characterMap when value is updated.
     setCharacterMap(getCharacterMap(valueProp));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [valueProp]);
-  const handleMouseLeave = (0, _react.useCallback)(event => {
+  const handleMouseLeave = (0, _hooks.useEventCallback)(event => {
     resetCharacterMap();
     onChangeActive === null || onChangeActive === void 0 || onChangeActive(value, event);
-  }, [onChangeActive, resetCharacterMap, value]);
-  const handleChangeValue = (0, _react.useCallback)((index, event) => {
+  });
+  const handleChangeValue = (0, _hooks.useEventCallback)((index, event) => {
     let nextValue = (0, _utils2.transformCharacterMapToValue)(characterMap);
     if (cleanable && value === nextValue && getCharacterMap(value)[index] === characterMap[index]) {
       nextValue = 0;
@@ -82,8 +83,8 @@ const Rate = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       setCharacterMap(getCharacterMap(nextValue));
       onChange === null || onChange === void 0 || onChange(nextValue, event);
     }
-  }, [characterMap, cleanable, getCharacterMap, onChange, setValue, value]);
-  const handleKeyDown = (0, _react.useCallback)((index, event) => {
+  });
+  const handleKeyDown = (0, _hooks.useEventCallback)((index, event) => {
     const {
       key
     } = event;
@@ -97,8 +98,8 @@ const Rate = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     if (key === _constants.KEY_VALUES.ENTER) {
       handleChangeValue(index, event);
     }
-  }, [allowHalf, characterMap, getCharacterMap, handleChangeValue, max]);
-  const handleChangeCharacterMap = (0, _react.useCallback)((index, key, event) => {
+  });
+  const handleChangeCharacterMap = (0, _hooks.useEventCallback)((index, key, event) => {
     const nextCharacterMap = characterMap.map((_item, i) => {
       if (i === index && key === 'before' && allowHalf) {
         return 0.5;
@@ -109,11 +110,11 @@ const Rate = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       setCharacterMap(nextCharacterMap);
       onChangeActive === null || onChangeActive === void 0 || onChangeActive((0, _utils2.transformCharacterMapToValue)(nextCharacterMap), event);
     }
-  }, [allowHalf, characterMap, onChangeActive]);
-  const handleClick = (0, _react.useCallback)((index, key, event) => {
+  });
+  const handleClick = (0, _hooks.useEventCallback)((index, key, event) => {
     handleChangeCharacterMap(index, key, event);
     handleChangeValue(index, event);
-  }, [handleChangeCharacterMap, handleChangeValue]);
+  });
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
       localeKey: "notSelected",
@@ -122,12 +123,12 @@ const Rate = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "radiogroup",
-    tabIndex: 0
-  }, rest, {
+    tabIndex: 0,
     ref: ref,
     className: classes,
+    style: styles,
     onMouseLeave: handleMouseLeave
-  }), characterMap.map((item, index) => /*#__PURE__*/_react.default.createElement(_Character.default, {
+  }, rest), characterMap.map((item, index) => /*#__PURE__*/_react.default.createElement(_Character.default, {
     role: "radio",
     "aria-posinset": index + 1,
     "aria-setsize": max,

package/cjs/Sidenav/ExpandedSidenavDropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import { PlacementCorners, WithAsProps, RsRefForwardingComponent } from '../internals/types';
 import { IconProps } from '@rsuite/icons/Icon';
 export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle' | 'title'> {
     /** Define the title as a submenu */
@@ -7,7 +7,7 @@ export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.H
     /** Set the icon */
     icon?: React.ReactElement<IconProps>;
     /** The placement of Menu */
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
     /** Whether or not component is disabled */
     disabled?: boolean;
     /** The style of the menu */

package/cjs/Sidenav/Sidenav.js

@@ -23,7 +23,7 @@ const emptyArray = [];
  * The `Sidenav` component is an encapsulation of the page sidebar `Nav`.
  * @see https://rsuitejs.com/components/sidenav/
  */
-const Sidenav = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Sidenav = /*#__PURE__*/_react.default.forwardRef(function Sidenav(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Sidenav', props);

package/cjs/Sidenav/SidenavDropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import { PlacementCorners, WithAsProps, RsRefForwardingComponent } from '../internals/types';
 import { IconProps } from '@rsuite/icons/Icon';
 import Button from '../Button';
 import NavDropdownItem from '../Nav/NavDropdownItem';
@@ -13,7 +13,7 @@ export interface NavDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLA
     /** Triggering events */
     trigger?: SidenavDropdownTrigger | readonly SidenavDropdownTrigger[];
     /** The placement of Menu */
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
     /** Whether or not component is disabled */
     disabled?: boolean;
     /** The style of the menu */

package/cjs/Sidenav/SidenavDropdown.js

@@ -33,7 +33,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *   </Nav>
  * </Sidenav>
  */
-const SidenavDropdown = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function SidenavDropdown(props, ref) {
   const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
   const nav = (0, _react.useContext)(_NavContext.default);
   const navMenu = (0, _react.useContext)(_NavMenu.NavMenuContext);

package/cjs/Sidenav/SidenavDropdownToggle.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import Button from '../Button';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../internals/types';
+import { WithAsProps, RsRefForwardingComponent, PlacementCorners } from '../internals/types';
 export interface SidenavDropdownToggleProps extends WithAsProps {
     noCaret?: boolean;
     renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
 }
 /**
  * @private this component is not supposed to be used directly

package/cjs/Stack/HStack.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Stack = _interopRequireDefault(require("./Stack"));
-const HStack = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const HStack = /*#__PURE__*/_react.default.forwardRef(function HStack(props, ref) {
   const {
     reverse,
     spacing = 6,

package/cjs/Stack/Stack.js

@@ -21,7 +21,7 @@ function isStackItem(child) {
  *
  * @see https://rsuitejs.com/components/stack
  */
-const Stack = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Stack = /*#__PURE__*/_react.default.forwardRef(function Stack(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Stack', props);

package/cjs/Stack/VStack.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Stack = _interopRequireDefault(require("./Stack"));
-const VStack = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const VStack = /*#__PURE__*/_react.default.forwardRef(function VStack(props, ref) {
   const {
     reverse,
     spacing = 6,

package/cjs/Stat/Stat.js

@@ -13,7 +13,7 @@ var _StatHelpText = _interopRequireDefault(require("./StatHelpText"));
 var _StatTrend = _interopRequireDefault(require("./StatTrend"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
-const Stat = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Stat = /*#__PURE__*/_react.default.forwardRef(function Stat(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Stat', props);

package/cjs/Steps/Steps.js

@@ -15,7 +15,7 @@ var _CustomProvider = require("../CustomProvider");
  *
  * @see https://rsuitejs.com/components/steps
  */
-const Steps = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Steps = /*#__PURE__*/_react.default.forwardRef(function Steps(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Steps', props);

package/cjs/Table/Table.js

@@ -12,7 +12,7 @@ var _TableColumn = _interopRequireDefault(require("./TableColumn"));
 var _TableColumnGroup = _interopRequireDefault(require("./TableColumnGroup"));
 var _CustomProvider = require("../CustomProvider");
 var _rsuiteTable = require("rsuite-table");
-const CustomTable = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const CustomTable = /*#__PURE__*/_react.default.forwardRef(function Table(props, ref) {
   const {
     propsWithDefaults,
     rtl,
@@ -23,7 +23,7 @@ const CustomTable = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     loadAnimation = true,
     ...rest
   } = propsWithDefaults;
-  const locale = getLocale('Calendar', overrideLocale);
+  const locale = getLocale('common', overrideLocale);
   return /*#__PURE__*/_react.default.createElement(_rsuiteTable.Table, (0, _extends2.default)({}, rest, {
     rtl: rtl,
     ref: ref,

package/cjs/Tabs/Tabs.js

@@ -109,7 +109,7 @@ const renderTabs = (children, tabPanelProps) => {
  * @version 5.53.0
  * @see https://rsuitejs.com/components/tabs
  */
-const Tabs = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Tabs = /*#__PURE__*/_react.default.forwardRef(function Tabs(props, ref) {
   const {
     propsWithDefaults,
     rtl
@@ -167,16 +167,15 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         event.preventDefault();
         break;
       case 'End':
-        const tabs = getFocusableTabs(tablistRef.current);
-        item = tabs[tabs.length - 1];
-        event.preventDefault();
-        break;
+        {
+          const tabs = getFocusableTabs(tablistRef.current);
+          item = tabs[tabs.length - 1];
+          event.preventDefault();
+          break;
+        }
     }
     if (item) {
-      var _item;
-      const {
-        eventKey
-      } = (_item = item) === null || _item === void 0 ? void 0 : _item.dataset;
+      const eventKey = item ? item.dataset.eventKey : undefined;
       handleSelect(eventKey, event);
       item.focus();
     }

package/cjs/Tag/Tag.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../internals/types';
+import type { WithAsProps, Color, RsRefForwardingComponent } from '../internals/types';
 import type { CommonLocale } from '../locales';
 export interface TagProps extends WithAsProps {
     /** Different sizes */
     size?: 'lg' | 'md' | 'sm';
     /** A tag can have different colors */
-    color?: TypeAttributes.Color;
+    color?: Color | React.CSSProperties['color'];
     /** Whether to close */
     closable?: boolean;
     /** The content of the component */

package/cjs/Tag/Tag.js

@@ -5,10 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
+var _utils = require("../internals/utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * The `Tag` component is used to label and categorize.
  * It can be used to mark the status of an object or classify it into different categories.
@@ -24,11 +27,12 @@ const Tag = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     as: Component = 'div',
     classPrefix = 'tag',
     size = 'md',
-    color = 'default',
+    color,
     children,
     closable,
     className,
     locale: overrideLocale,
+    style,
     onClose,
     ...rest
   } = propsWithDefaults;
@@ -40,13 +44,15 @@ const Tag = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     prefix,
     merge
   } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(size, color, {
+  const classes = merge(className, withClassPrefix(size, (0, _utils.isPresetColor)(color) && color, {
     closable
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-tag-bg', '--rs-tag-text')), [style, color]);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
-    className: classes
-  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: classes,
+    style: styles
+  }, rest), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix`text`
   }, children), closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix`icon-close`,