rsuite 6.0.0-canary-20250315 → 6.0.0-canary-2025031915

package/esm/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/esm/Cascader/Cascader.js

@@ -7,6 +7,7 @@ import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import TreeView from "../CascadeTree/TreeView.js";
 import SearchView from "../CascadeTree/SearchView.js";
+import Box from "../internals/Box/index.js";
 import { usePaths, useSelect, useSearch } from "../CascadeTree/hooks/index.js";
 import { flattenTree } from "../Tree/utils/index.js";
 import { findNodeOfTree, getParentMap } from "../internals/Tree/utils/index.js";
@@ -26,7 +27,7 @@ const Cascader = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Cascader', props);
   const {
-    as: Component = 'div',
+    as,
     data = emptyArray,
     classPrefix = 'picker',
     childrenKey = 'children',
@@ -357,7 +358,8 @@ const Cascader = forwardRef((props, ref) => {
     onEntered: handleEntered,
     onExited: handleExited,
     speaker: renderTreeView
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/esm/CheckPicker/CheckPicker.js

@@ -8,6 +8,7 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import SearchBox from "../internals/SearchBox/index.js";
+import Box from "../internals/Box/index.js";
 import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -23,7 +24,7 @@ const CheckPicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('CheckPicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     classPrefix = 'picker',
     countable = true,
@@ -290,7 +291,8 @@ const CheckPicker = forwardRef((props, ref) => {
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
     speaker: renderPopup
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/esm/CheckTree/CheckTreeView.js

@@ -5,6 +5,7 @@ import isNil from 'lodash/isNil';
 import CheckTreeNode from "./CheckTreeNode.js";
 import IndentLine from "../Tree/IndentLine.js";
 import SearchBox from "../internals/SearchBox/index.js";
+import Box from "../internals/Box/index.js";
 import useTreeSearch from "../Tree/hooks/useTreeSearch.js";
 import useFocusTree from "../Tree/hooks/useFocusTree.js";
 import useVirtualizedTreeData from "../Tree/hooks/useVirtualizedTreeData.js";
@@ -27,7 +28,7 @@ import { useCustom } from "../CustomProvider/index.js";
 
 const CheckTreeView = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'check-tree',
     cascade = true,
@@ -260,7 +261,8 @@ const CheckTreeView = forwardRef((props, ref) => {
   const treeNodesClass = merge(prefix('root'), {
     [prefix('all-uncheckable')]: isEveryFirstLevelNodeUncheckable(flattenedNodes, uncheckableItemValues, valueKey)
   });
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: as,
     ref: ref,
     className: classes,
     style: style

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import CheckTreeView from "../CheckTree/CheckTreeView.js";
+import Box from "../internals/Box/index.js";
 import useTreeValue from "../CheckTree/hooks/useTreeValue.js";
 import useFlattenTree from "../Tree/hooks/useFlattenTree.js";
 import useTreeWithChildren from "../Tree/hooks/useTreeWithChildren.js";
@@ -28,7 +29,7 @@ const CheckTreePicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('CheckTreePicker', props);
   const {
-    as: Component = 'div',
+    as,
     id,
     appearance = 'default',
     cleanable = true,
@@ -267,7 +268,8 @@ const CheckTreePicker = forwardRef((props, ref) => {
     ref: trigger,
     placement: placement,
     speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/React.createElement(Component, {
+  }, triggerProps), /*#__PURE__*/React.createElement(Box, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/esm/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/esm/Checkbox/Checkbox.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useMemo, useRef } from 'react';
+import Box from "../internals/Box/index.js";
 import { useControlled, useStyles, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { forwardRef, partitionHTMLProps, mergeRefs } from "../internals/utils/index.js";
 import { CheckboxGroupContext } from "../CheckboxGroup/index.js";
@@ -23,7 +24,7 @@ const Checkbox = forwardRef((props, ref) => {
     onChange: onGroupChange
   } = checkboxGroupContext !== null && checkboxGroupContext !== void 0 ? checkboxGroupContext : {};
   const {
-    as: Component = 'div',
+    as,
     checked: controlledChecked,
     className,
     children,
@@ -98,7 +99,9 @@ const Checkbox = forwardRef((props, ref) => {
   });
   const labelId = useUniqueId('label-');
   if (plaintext) {
-    return checked ? /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
+    return checked ? /*#__PURE__*/React.createElement(Box, _extends({
+      as: as
+    }, restProps, {
       ref: ref,
       className: classes
     }), children) : null;
@@ -123,7 +126,9 @@ const Checkbox = forwardRef((props, ref) => {
     "aria-hidden": true,
     "data-testid": "checkbox-control-inner"
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, restProps, {
     ref: ref,
     onClick: onClick,
     className: classes

package/esm/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/esm/CheckboxGroup/CheckboxGroup.js

@@ -4,6 +4,7 @@ import React, { useCallback, useMemo } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import remove from 'lodash/remove';
 import Plaintext from "../internals/Plaintext/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, shallowEqual } from "../internals/utils/index.js";
 import { useStyles, useControlled } from "../internals/hooks/index.js";
 import { CheckboxGroupContext } from "./CheckboxGroupContext.js";
@@ -17,7 +18,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('CheckboxGroup', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     inline,
     children,
@@ -64,7 +65,9 @@ const CheckboxGroup = forwardRef((props, ref) => {
   }, plaintext ? /*#__PURE__*/React.createElement(Plaintext, _extends({
     ref: ref,
     localeKey: "notSelected"
-  }, rest), value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, rest), value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     role: "group",
     className: classes

package/esm/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/esm/Container/Container.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useMemo } from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -14,7 +15,7 @@ const Container = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Container', props);
   const {
-    as: Component = 'section',
+    as = 'section',
     classPrefix = 'container',
     className,
     children,
@@ -33,7 +34,9 @@ const Container = forwardRef((props, ref) => {
   }), [setHasSidebar]);
   return /*#__PURE__*/React.createElement(ContainerContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), children));

package/esm/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/esm/DatePicker/DatePicker.js

@@ -11,6 +11,7 @@ import Stack from "../Stack/index.js";
 import PredefinedRanges from "./PredefinedRanges.js";
 import DateInput from "../DateInput/index.js";
 import InputGroup from "../InputGroup/index.js";
+import Box from "../internals/Box/index.js";
 import useMonthView from "./hooks/useMonthView.js";
 import useFocus from "./hooks/useFocus.js";
 import useCustomizedInput from "./hooks/useCustomizedInput.js";
@@ -34,7 +35,7 @@ const DatePicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('DatePicker', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'picker',
     calendarDefaultDate,
@@ -462,7 +463,8 @@ const DatePicker = forwardRef((props, ref) => {
     onEnter: createChainedFunction(events.onActive, onEnter),
     onExit: createChainedFunction(events.onInactive, onExit),
     speaker: renderCalendarOverlay
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: as,
     className: merge(classes, {
       [prefix('error')]: invalidValue
     }),

package/esm/DateRangePicker/DateRangePicker.js

@@ -15,6 +15,7 @@ import Header from "./Header.js";
 import useDateDisabled from "./hooks/useDateDisabled.js";
 import useCustomizedInput from "../DatePicker/hooks/useCustomizedInput.js";
 import Calendar from "./Calendar.js";
+import Box from "../internals/Box/index.js";
 import * as StaticMethods from "./disabledDateUtils.js";
 import { DateRangePickerProvider } from "./DateRangePickerProvider.js";
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from "./utils.js";
@@ -36,7 +37,7 @@ const DateRangePicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('DateRangePicker', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'picker',
     className,
     appearance = 'default',
@@ -763,7 +764,8 @@ const DateRangePicker = forwardRef((props, ref) => {
     onEnter: createChainedFunction(events.onActive, handleEnter, onEnter),
     onExit: createChainedFunction(events.onInactive, handleExit, onExit),
     speaker: renderCalendarOverlay
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: as,
     ref: root,
     className: merge(classes, {
       [prefix('error')]: invalidValue

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/Dropdown/DropdownItem.js

@@ -21,7 +21,7 @@ import { DropdownActionType } from "./DropdownState.js";
  */
 const DropdownItem = forwardRef((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     active: activeProp,
     classPrefix = 'dropdown-item',
     className,
@@ -72,7 +72,7 @@ const DropdownItem = forwardRef((props, ref) => {
       };
     }
   }, [internalId, selected, dispatch]);
-  const renderDropdownItem = useRenderMenuItem(Component);
+  const renderDropdownItem = useRenderMenuItem(as);
 
   // If using <Dropdown.Item> within <Nav>
   // Suggest <Nav.Item>

package/esm/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/esm/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 */

package/esm/Grid/Col.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import omit from 'lodash/omit';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { BREAKPOINTS } from "../internals/constants/index.js";
 import { useStyles } from "../internals/hooks/index.js";
@@ -15,7 +16,7 @@ const Col = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Col', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'col',
     className,
     span,
@@ -98,7 +99,9 @@ const Col = forwardRef((props, ref) => {
   }, [prefix, rootPrefix, span, offset, push, pull, order, hidden, ...BREAKPOINTS.map(size => rest[size])]);
   const classes = merge(className, withPrefix(), colClasses);
   const unhandledProps = omit(rest, Object.keys(omitKeys));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, unhandledProps, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, unhandledProps, {
     ref: ref,
     className: classes
   }));

package/esm/Grid/Grid.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface GridProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface GridProps extends BoxProps {
     /** Whether the grid container should have a fluid width */
     fluid?: boolean;
 }

package/esm/Grid/Grid.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -13,7 +14,7 @@ const Grid = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Grid', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'grid-container',
     className,
     fluid,
@@ -27,7 +28,9 @@ const Grid = forwardRef((props, ref) => {
   const classes = merge(className, fluid ? prefix({
     fluid
   }) : withPrefix());
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }));

package/esm/Grid/Row.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 { RowAlignment, RowJustify } from './types';
-export interface RowProps extends WithAsProps {
+export interface RowProps extends BoxProps {
     /** Spacing between columns. Support responsive values */
     gutter?: number | string | ResponsiveValue<number | string>;
     /** Vertical alignment of columns. Support responsive values */

package/esm/Grid/Row.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
@@ -17,9 +18,10 @@ const getResponsiveGutterStyles = gutter => {
   return BREAKPOINTS.reduce((styles, breakpoint) => {
     const breakpointValue = gutter[breakpoint];
     if (!breakpointValue) return styles;
-    return mergeStyles(styles, {
+    const newStyles = {
       [`--rs-grid-gutter${breakpoint === 'xs' ? '' : `-${breakpoint}`}`]: getCssValue(breakpointValue)
-    });
+    };
+    return mergeStyles(styles, newStyles);
   }, {});
 };
 /**
@@ -31,7 +33,7 @@ const Row = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Row', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'row',
     style,
@@ -47,7 +49,9 @@ const Row = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix(), ...responsive(align), ...responsive(justify));
   const rowStyles = mergeStyles(style, getResponsiveGutterStyles(gutter));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes,
     style: rowStyles

package/esm/Header/Header.d.ts

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

package/esm/Heading/Heading.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface HeadingProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface HeadingProps extends BoxProps {
     /**
      * Sets heading level, h1 through h6.
      * @default 3

package/esm/Heading/Heading.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -26,8 +27,9 @@ const Heading = forwardRef((props, ref) => {
     merge
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
-  const Component = as || `h${level}`;
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as || `h${level}`
+  }, rest, {
     ref: ref,
     className: classes
   }));

package/esm/HeadingGroup/HeadingGroup.d.ts

@@ -4,8 +4,5 @@ export type HeadingGroupProps = ComponentProps;
  * HeadingGroup is a group of headings.
  * @see https://rsuitejs.com/components/heading
  */
-declare const HeadingGroup: import("../internals/types").InternalRefForwardingComponent<"hgroup", Partial<{
-    name: string;
-    componentAs: "hgroup";
-}>, never> & Record<string, never>;
+declare const HeadingGroup: import("../internals/types").InternalRefForwardingComponent<"hgroup", Partial<ComponentProps>, never> & Record<string, never>;
 export default HeadingGroup;

package/esm/Highlight/Highlight.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface HighlightProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface HighlightProps extends BoxProps {
     query?: string | string[];
     renderMark?: (match: string, index: number) => React.ReactNode;
 }

package/esm/Highlight/Highlight.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { highlightText } from "./utils/highlightText.js";
 import { forwardRef, stringifyReactNode } from "../internals/utils/index.js";
@@ -23,7 +24,7 @@ const Highlight = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Highlight', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'highlight',
     className,
     children,
@@ -37,7 +38,8 @@ const Highlight = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
   const text = stringifyReactNode(children);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
   }, rest), highlightText(text, {