rsuite 6.0.0-canary-20250315 → 6.0.0-canary-20250319

package/cjs/Card/Card.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _CardHeader = _interopRequireDefault(require("./CardHeader"));
 var _CardBody = _interopRequireDefault(require("./CardBody"));
 var _CardFooter = _interopRequireDefault(require("./CardFooter"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
 var _hooks = require("../internals/hooks");
@@ -22,7 +23,7 @@ const Card = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Card', props);
   const {
-    as: Component = 'div',
+    as,
     bordered = true,
     classPrefix = 'card',
     className,
@@ -45,7 +46,8 @@ const Card = (0, _utils.forwardRef)((props, ref) => {
     ['shaded-hover']: shaded === 'hover'
   }));
   const styles = (0, _utils.mergeStyles)(style, cssVar('width', width, _utils.getCssValue));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

package/cjs/Card/CardBody.d.ts

@@ -1,7 +1,4 @@
 import { ComponentProps } from '../internals/utils';
 export type CardBodyProps = ComponentProps;
-declare const CardBody: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-    componentAs: "div";
-}>, never> & Record<string, never>;
+declare const CardBody: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default CardBody;

package/cjs/Card/CardFooter.d.ts

@@ -1,7 +1,4 @@
 import { ComponentProps } from '../internals/utils';
 export type CardFooterProps = ComponentProps;
-declare const CardFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-    componentAs: "div";
-}>, never> & Record<string, never>;
+declare const CardFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default CardFooter;

package/cjs/Card/CardHeader.d.ts

@@ -1,7 +1,4 @@
 import { ComponentProps } from '../internals/utils';
 export type CardHeaderProps = ComponentProps;
-declare const CardHeader: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-    componentAs: "div";
-}>, never> & Record<string, never>;
+declare const CardHeader: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default CardHeader;

package/cjs/CardGroup/CardGroup.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface CardGroupProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface CardGroupProps extends BoxProps {
     /**
      * The number of columns in the group
      */

package/cjs/CardGroup/CardGroup.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -14,7 +15,7 @@ const CardGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('CardGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'card-group',
     className,
     children,
@@ -30,7 +31,8 @@ const CardGroup = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
   const styles = (0, _utils.mergeStyles)(style, cssVar('columns', columns), cssVar('spacing', spacing, _utils.getCssValue));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

package/cjs/Carousel/Carousel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
-export interface CarouselProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface CarouselProps extends BoxProps {
     /** Autoplay element */
     autoplay?: boolean;
     /** Autoplay interval */

package/cjs/Carousel/Carousel.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -22,7 +23,7 @@ const Carousel = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Carousel', props);
   const {
-    as: Component = 'div',
+    as,
     children,
     classPrefix = 'carousel',
     className,
@@ -126,7 +127,9 @@ const Carousel = (0, _utils.forwardRef)((props, ref) => {
     transform: vertical ? `translate3d(0, ${activeRatio} ,0)` : `translate3d(${activeRatio}, 0 ,0)`
   };
   const showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: (0, _utils.mergeRefs)(ref, rootRef),
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {

package/cjs/CascadeTree/CascadeTree.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _TreeView = _interopRequireDefault(require("./TreeView"));
 var _SearchView = _interopRequireDefault(require("./SearchView"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _utils2 = require("../internals/Tree/utils");
 var _utils3 = require("../Tree/utils");
@@ -26,7 +27,7 @@ const CascadeTree = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('CascadeTree', props);
   const {
-    as: Component = 'div',
+    as,
     data = [],
     defaultValue,
     className,
@@ -136,7 +137,8 @@ const CascadeTree = (0, _utils.forwardRef)((props, ref) => {
     handleSelect(node, event);
     setSearchKeyword('');
   });
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     className: classes
   }, rest, {
     ref: ref

package/cjs/CascadeTree/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { Option, DataProps, WithAsProps, ToArray } from '../internals/types';
+import type { Option, DataProps, ToArray } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
 export interface SelectNode<T> {
     itemData: Option<T>;
     cascadePaths: Option<T>[];
@@ -10,7 +11,7 @@ export interface CascadeColumn<T> {
     parentItem?: Option<T>;
     layer?: number;
 }
-export interface CascadeTreeProps<T = any, V = T, L = any> extends WithAsProps, DataProps<Option<T>> {
+export interface CascadeTreeProps<T = any, V = T, L = any> extends BoxProps, DataProps<Option<T>> {
     /**
      * Initial value
      */

package/cjs/Cascader/Cascader.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { CascadeTreeProps } from '../CascadeTree/types';
 import { PickerLocale } from '../locales';
 import { PickerToggleProps } from '../internals/Picker';
 import { Option, OptionValue, FormControlPickerProps, DeprecatedMenuProps } from '../internals/types';
+import type { CascadeTreeProps } from '../CascadeTree/types';
 interface DeprecatedProps extends DeprecatedMenuProps {
     /**
      * The panel is displayed directly when the component is initialized

package/cjs/Cascader/Cascader.js

@@ -12,6 +12,7 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _TreeView = _interopRequireDefault(require("../CascadeTree/TreeView"));
 var _SearchView = _interopRequireDefault(require("../CascadeTree/SearchView"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../CascadeTree/hooks");
 var _utils = require("../Tree/utils");
 var _utils2 = require("../internals/Tree/utils");
@@ -33,7 +34,7 @@ const Cascader = (0, _utils3.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Cascader', props);
   const {
-    as: Component = 'div',
+    as,
     data = emptyArray,
     classPrefix = 'picker',
     childrenKey = 'children',
@@ -364,7 +365,8 @@ const Cascader = (0, _utils3.forwardRef)((props, ref) => {
     onEntered: handleEntered,
     onExited: handleExited,
     speaker: renderTreeView
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/cjs/CheckPicker/CheckPicker.js

@@ -13,6 +13,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/Tree/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -30,7 +31,7 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('CheckPicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     classPrefix = 'picker',
     countable = true,
@@ -297,7 +298,8 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     onEntered: (0, _utils2.createChainedFunction)(handleEntered, onEntered),
     onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),
     speaker: renderPopup
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/cjs/CheckTree/CheckTreeView.js

@@ -10,6 +10,7 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _CheckTreeNode = _interopRequireDefault(require("./CheckTreeNode"));
 var _IndentLine = _interopRequireDefault(require("../Tree/IndentLine"));
 var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _useTreeSearch = _interopRequireDefault(require("../Tree/hooks/useTreeSearch"));
 var _useFocusTree = _interopRequireDefault(require("../Tree/hooks/useFocusTree"));
 var _useVirtualizedTreeData = _interopRequireDefault(require("../Tree/hooks/useVirtualizedTreeData"));
@@ -33,7 +34,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const CheckTreeView = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'check-tree',
     cascade = true,
@@ -266,7 +267,8 @@ const CheckTreeView = (0, _utils.forwardRef)((props, ref) => {
   const treeNodesClass = merge(prefix('root'), {
     [prefix('all-uncheckable')]: (0, _utils3.isEveryFirstLevelNodeUncheckable)(flattenedNodes, uncheckableItemValues, valueKey)
   });
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     ref: ref,
     className: classes,
     style: style

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _CheckTreeView = _interopRequireDefault(require("../CheckTree/CheckTreeView"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _useTreeValue = _interopRequireDefault(require("../CheckTree/hooks/useTreeValue"));
 var _useFlattenTree = _interopRequireDefault(require("../Tree/hooks/useFlattenTree"));
 var _useTreeWithChildren = _interopRequireDefault(require("../Tree/hooks/useTreeWithChildren"));
@@ -35,7 +36,7 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('CheckTreePicker', props);
   const {
-    as: Component = 'div',
+    as,
     id,
     appearance = 'default',
     cleanable = true,
@@ -274,7 +275,8 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
     ref: trigger,
     placement: placement,
     speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/_react.default.createElement(Component, {
+  }, triggerProps), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/cjs/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { WithAsProps, Color, HTMLPropsWithoutChange } from '../internals/types';
-export interface CheckboxProps<V = string | number> extends WithAsProps, HTMLPropsWithoutChange<HTMLDivElement> {
+import { BoxProps } from '../internals/Box';
+import type { Color, HTMLPropsWithoutChange } from '../internals/types';
+export interface CheckboxProps<V = string | number> extends BoxProps, HTMLPropsWithoutChange<HTMLDivElement> {
     /**
      * The color of the checkbox when checked or indeterminate
      *

package/cjs/Checkbox/Checkbox.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CheckboxGroup = require("../CheckboxGroup");
@@ -30,7 +31,7 @@ const Checkbox = (0, _utils.forwardRef)((props, ref) => {
     onChange: onGroupChange
   } = checkboxGroupContext !== null && checkboxGroupContext !== void 0 ? checkboxGroupContext : {};
   const {
-    as: Component = 'div',
+    as,
     checked: controlledChecked,
     className,
     children,
@@ -105,7 +106,9 @@ const Checkbox = (0, _utils.forwardRef)((props, ref) => {
   });
   const labelId = (0, _hooks.useUniqueId)('label-');
   if (plaintext) {
-    return checked ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
+    return checked ? /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as
+    }, restProps, {
       ref: ref,
       className: classes
     }), children) : null;
@@ -130,7 +133,9 @@ const Checkbox = (0, _utils.forwardRef)((props, ref) => {
     "aria-hidden": true,
     "data-testid": "checkbox-control-inner"
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, restProps, {
     ref: ref,
     onClick: onClick,
     className: classes

package/cjs/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { WithAsProps, FormControlBaseProps } from '../internals/types';
-export interface CheckboxGroupProps<V = (string | number)[]> extends WithAsProps, FormControlBaseProps<V> {
+import { BoxProps } from '../internals/Box';
+import type { FormControlBaseProps } from '../internals/types';
+export interface CheckboxGroupProps<V = (string | number)[]> extends BoxProps, FormControlBaseProps<V> {
     /** Used for the name of the form */
     name?: string;
     /** Primary content */

package/cjs/CheckboxGroup/CheckboxGroup.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _remove = _interopRequireDefault(require("lodash/remove"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CheckboxGroupContext = require("./CheckboxGroupContext");
@@ -24,7 +25,7 @@ const CheckboxGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('CheckboxGroup', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     inline,
     children,
@@ -71,7 +72,9 @@ const CheckboxGroup = (0, _utils.forwardRef)((props, ref) => {
   }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
     ref: ref,
     localeKey: "notSelected"
-  }, rest), value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, rest), value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     role: "group",
     className: classes

package/cjs/Container/Container.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export type ContainerProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
+import { BoxProps } from '../internals/Box';
+export type ContainerProps = BoxProps & React.HTMLAttributes<HTMLDivElement>;
 export declare const ContainerContext: React.Context<ContainerContextValue>;
 interface ContainerContextValue {
     setHasSidebar?: (value: boolean) => void;

package/cjs/Container/Container.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = exports.ContainerContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -21,7 +22,7 @@ const Container = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Container', props);
   const {
-    as: Component = 'section',
+    as = 'section',
     classPrefix = 'container',
     className,
     children,
@@ -40,7 +41,9 @@ const Container = (0, _utils.forwardRef)((props, ref) => {
   }), [setHasSidebar]);
   return /*#__PURE__*/_react.default.createElement(ContainerContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), children));

package/cjs/Content/Content.d.ts

@@ -7,8 +7,5 @@ export type ContentProps = ComponentProps;
  * For Internet Explorer 11 and lower, it's suggested that an ARIA role of "main"
  * be added to the <main> element to ensure it is accessible
  */
-declare const Content: import("../internals/types").InternalRefForwardingComponent<"main", Partial<{
-    name: string;
-    componentAs: "main";
-}>, never> & Record<string, never>;
+declare const Content: import("../internals/types").InternalRefForwardingComponent<"main", Partial<ComponentProps>, never> & Record<string, never>;
 export default Content;

package/cjs/DatePicker/DatePicker.js

@@ -16,6 +16,7 @@ var _Stack = _interopRequireDefault(require("../Stack"));
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _useMonthView = _interopRequireDefault(require("./hooks/useMonthView"));
 var _useFocus = _interopRequireDefault(require("./hooks/useFocus"));
 var _useCustomizedInput = _interopRequireDefault(require("./hooks/useCustomizedInput"));
@@ -40,7 +41,7 @@ const DatePicker = (0, _utils2.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('DatePicker', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'picker',
     calendarDefaultDate,
@@ -468,7 +469,8 @@ const DatePicker = (0, _utils2.forwardRef)((props, ref) => {
     onEnter: (0, _utils2.createChainedFunction)(events.onActive, onEnter),
     onExit: (0, _utils2.createChainedFunction)(events.onInactive, onExit),
     speaker: renderCalendarOverlay
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     className: merge(classes, {
       [prefix('error')]: invalidValue
     }),

package/cjs/DateRangePicker/DateRangePicker.js

@@ -20,6 +20,7 @@ var _Header = _interopRequireDefault(require("./Header"));
 var _useDateDisabled = _interopRequireDefault(require("./hooks/useDateDisabled"));
 var _useCustomizedInput = _interopRequireDefault(require("../DatePicker/hooks/useCustomizedInput"));
 var _Calendar2 = _interopRequireDefault(require("./Calendar"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var StaticMethods = _interopRequireWildcard(require("./disabledDateUtils"));
 var _DateRangePickerProvider = require("./DateRangePickerProvider");
 var _utils = require("./utils");
@@ -43,7 +44,7 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('DateRangePicker', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'picker',
     className,
     appearance = 'default',
@@ -770,7 +771,8 @@ const DateRangePicker = (0, _utils2.forwardRef)((props, ref) => {
     onEnter: (0, _utils2.createChainedFunction)(events.onActive, handleEnter, onEnter),
     onExit: (0, _utils2.createChainedFunction)(events.onInactive, handleExit, onExit),
     speaker: renderCalendarOverlay
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     ref: root,
     className: merge(classes, {
       [prefix('error')]: invalidValue

package/cjs/Divider/Divider.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Size, Color } from '../internals/types';
-export interface DividerProps extends WithAsProps {
+import type { Size, Color } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
+export interface DividerProps extends BoxProps {
     /**
      * The appearance of the divider.
      */

package/cjs/Drawer/Drawer.d.ts

@@ -12,11 +12,9 @@ export interface DrawerProps extends Omit<ModalProps, 'overflow'> {
  * @see https://rsuitejs.com/components/drawer
  */
 declare const Drawer: import("../internals/types").InternalRefForwardingComponent<"div", DrawerProps, never> & {
-    Body: import("../internals/types").InternalRefForwardingComponent<"div", import("../Modal").ModalBodyProps, never> & Record<string, never>;
+    Body: import("../internals/types").InternalRefForwardingComponent<"div", import("..").BoxProps, never> & Record<string, never>;
     Header: import("../internals/types").InternalRefForwardingComponent<"div", import("../Modal").ModalHeaderProps, never> & Record<string, never>;
-    Actions: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
+    Actions: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
     Title: import("../internals/types").InternalRefForwardingComponent<"div", import("../internals/utils").ComponentProps, never> & Record<string, never>;
     /**
      * @deprecated use <Drawer.Actions> instead

package/cjs/Drawer/DrawerActions.d.ts

@@ -1,6 +1,4 @@
 import { ComponentProps } from '../internals/utils';
 export type DrawerActionsProps = ComponentProps;
-declare const DrawerActions: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const DrawerActions: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default DrawerActions;

package/cjs/Drawer/DrawerBody.d.ts

@@ -1,4 +1,4 @@
 import { ModalBodyProps } from '../Modal/ModalBody';
 export type DrawerBodyProps = ModalBodyProps;
-declare const DrawerBody: import("../internals/types").InternalRefForwardingComponent<"div", ModalBodyProps, never> & Record<string, never>;
+declare const DrawerBody: import("../internals/types").InternalRefForwardingComponent<"div", import("..").BoxProps, never> & Record<string, never>;
 export default DrawerBody;

package/cjs/Dropdown/DropdownItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
 import type { DeprecatedDropdownItemProps } from './types';
 interface DeprecatedDropdownMenuItemProps extends DeprecatedDropdownItemProps {
     /**
@@ -10,7 +11,7 @@ interface DeprecatedDropdownMenuItemProps extends DeprecatedDropdownItemProps {
      */
     divider?: boolean;
 }
-export interface DropdownMenuItemProps<T = any> extends WithAsProps, DeprecatedDropdownMenuItemProps, HTMLPropsWithoutSelect {
+export interface DropdownMenuItemProps<T = any> extends BoxProps, DeprecatedDropdownMenuItemProps, HTMLPropsWithoutSelect {
     /** Active the current option */
     active?: boolean;
     /** Disable the current option */

package/cjs/Dropdown/DropdownItem.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const DropdownItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     active: activeProp,
     classPrefix = 'dropdown-item',
     className,
@@ -79,7 +79,7 @@ const DropdownItem = (0, _utils.forwardRef)((props, ref) => {
       };
     }
   }, [internalId, selected, dispatch]);
-  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
 
   // If using <Dropdown.Item> within <Nav>
   // Suggest <Nav.Item>

package/cjs/Footer/Footer.d.ts

@@ -4,8 +4,5 @@ export type FooterProps = ComponentProps;
  * The `<Footer>` component is used to specify the footer of the page.
  * @see https://rsuitejs.com/components/container/
  */
-declare const Footer: import("../internals/types").InternalRefForwardingComponent<"footer", Partial<{
-    name: string;
-    componentAs: "footer";
-}>, never> & Record<string, never>;
+declare const Footer: import("../internals/types").InternalRefForwardingComponent<"footer", Partial<ComponentProps>, never> & Record<string, never>;
 export default Footer;

package/cjs/Grid/Col.d.ts

@@ -1,6 +1,7 @@
-import type { WithAsProps, ResponsiveValue } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { ResponsiveValue } from '../internals/types';
 import type { DeprecatedColProps } from './types';
-export interface ColProps extends WithAsProps {
+export interface ColProps extends BoxProps {
     /** Grid column span for different breakpoints */
     span?: number | 'auto' | ResponsiveValue<number | 'auto'>;
     /** Grid column offset for different breakpoints */