rsuite 6.0.0-canary-2025031415 → 6.0.0-canary-20250319

package/esm/Affix/Affix.d.ts

@@ -1,5 +1,6 @@
-import { Offset, WithAsProps } from '../internals/types';
-export interface AffixProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Offset } from '../internals/types';
+export interface AffixProps extends BoxProps {
     /** Specify the container. */
     container?: HTMLElement | (() => HTMLElement);
     /** Distance from top */

package/esm/Affix/Affix.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
 import getOffset from 'dom-lib/getOffset';
+import Box from "../internals/Box/index.js";
 import { useStyles, useElementResize, useEventListener, useMount } from "../internals/hooks/index.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -99,7 +100,7 @@ const Affix = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Affix', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'affix',
     className,
     children,
@@ -138,7 +139,9 @@ const Affix = forwardRef((props, ref) => {
     zIndex: 10
   };
   const affixStyles = fixed ? fixedStyles : undefined;
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: mergeRefs(mountRef, ref)
   }), /*#__PURE__*/React.createElement("div", {
     className: classes,

package/esm/AutoComplete/AutoComplete.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { FormControlPickerProps, WithAsProps, Placement, Option, Size, ListboxProps, PopupProps } from '../internals/types';
-export interface AutoCompleteProps<T = string> extends WithAsProps, FormControlPickerProps<T, any, Option | string>, ListboxProps, PopupProps {
+import { BoxProps } from '../internals/Box';
+import type { FormControlPickerProps, Placement, Option, Size, ListboxProps, PopupProps } from '../internals/types';
+export interface AutoCompleteProps<T = string> extends BoxProps, FormControlPickerProps<T, any, Option | string>, ListboxProps, PopupProps {
     /** The placement of component */
     placement?: Placement;
     /** When set to false, the Enter key selection function is invalid */

package/esm/AutoComplete/AutoComplete.js

@@ -5,6 +5,7 @@ import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import Combobox from "./Combobox.js";
 import Plaintext from "../internals/Plaintext/index.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs, partitionHTMLProps } from "../internals/utils/index.js";
 import { PickerToggleTrigger, onMenuKeyDown, Listbox, ListItem, PickerPopup, useFocusItemValue, usePickerRef, pickTriggerPropKeys } from "../internals/Picker/index.js";
@@ -22,7 +23,7 @@ const AutoComplete = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('AutoComplete', props);
   const {
-    as: Component = 'div',
+    as,
     disabled,
     className,
     placement = 'bottomStart',
@@ -186,7 +187,8 @@ const AutoComplete = forwardRef((props, ref) => {
     trigger: ['click', 'focus'],
     open: expanded,
     speaker: renderPopup
-  }, /*#__PURE__*/React.createElement(Component, _extends({
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     className: classes,
     style: style,
     ref: root

package/esm/Avatar/Avatar.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react';
-import type { WithAsProps, ColorScheme, Size } from '../internals/types';
-export interface AvatarProps extends WithAsProps {
+import type { BoxProps } from '../internals/Box';
+import type { ColorScheme, Size } from '../internals/types';
+export interface AvatarProps extends BoxProps {
     /**
      * A avatar can have different sizes.
      *

package/esm/AvatarGroup/AvatarGroup.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Size } from '../internals/types';
-export interface AvatarGroupProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface AvatarGroupProps extends BoxProps {
     /**
      * Render all avatars as stacks
      */

package/esm/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -15,7 +16,7 @@ const AvatarGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('AvatarGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'avatar-group',
     spacing,
     className,
@@ -37,7 +38,8 @@ const AvatarGroup = forwardRef((props, ref) => {
     size
   }), [size]);
   const styles = mergeStyles(style, cssVar('spacing', spacing, getCssValue));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "group"
   }, rest, {
     ref: ref,

package/esm/Badge/Badge.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Color, WithAsProps, PlacementCorners } from '../internals/types';
-export interface BadgeProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Color, PlacementCorners } from '../internals/types';
+export interface BadgeProps extends BoxProps {
     /**
      * The content of the badge
      */

package/esm/Badge/Badge.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import kebabCase from 'lodash/kebabCase';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, mergeStyles, createOffsetStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
@@ -14,7 +15,7 @@ const Badge = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Badge', props);
   const {
-    as: Component = 'div',
+    as,
     content,
     color,
     className,
@@ -51,13 +52,15 @@ const Badge = forwardRef((props, ref) => {
   }));
   const styles = useMemo(() => mergeStyles(style, createOffsetStyles(offset, '--rs-badge-offset'), createColorVariables(color, '--rs-badge-bg')), [style, offset, color]);
   if (!children) {
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
       ref: ref,
       className: classes,
       style: styles
     }, rest), text);
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

package/esm/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { BoxProps } from '../internals/Box';
 import type { BreadcrumbLocale } from '../locales';
-import type { WithAsProps } from '../internals/types';
-export interface BreadcrumbProps extends WithAsProps {
+export interface BreadcrumbProps extends BoxProps {
     /**
      * The separator between each breadcrumb item.
      */

package/esm/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
-export interface BreadcrumbItemProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface BreadcrumbItemProps extends BoxProps {
     /**
      * The wrapper element of the BreadcrumbItem.
      */

package/esm/Breadcrumb/BreadcrumbItem.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import SafeAnchor from "../SafeAnchor/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 /**
@@ -10,7 +11,7 @@ import { useStyles } from "../internals/hooks/index.js";
  */
 const BreadcrumbItem = forwardRef((props, ref) => {
   const {
-    wrapperAs: WrapperComponent = 'li',
+    wrapperAs = 'li',
     href,
     as: Component = href ? SafeAnchor : 'span',
     classPrefix = 'breadcrumb-item',
@@ -31,7 +32,8 @@ const BreadcrumbItem = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix({
     active
   }));
-  return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: wrapperAs,
     style: style,
     className: classes,
     ref: ref

package/esm/Button/Button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Color, Size, AppearanceType, WithAsProps } from '../internals/types';
-export interface ButtonProps extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
+import { BoxProps } from '../internals/Box';
+import { Color, Size, AppearanceType } from '../internals/types';
+export interface ButtonProps extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
     /** A button can have different appearances. */
     appearance?: AppearanceType;
     /** A button can show it is currently the active user selection */

package/esm/Button/Button.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useMemo } from 'react';
 import Ripple from "../internals/Ripple/index.js";
+import Box from "../internals/Box/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
 import { ButtonGroupContext } from "../ButtonGroup/index.js";
 import { forwardRef, isOneOf } from "../internals/utils/index.js";
@@ -12,6 +13,7 @@ import { useCustom } from "../CustomProvider/index.js";
  * @see https://rsuitejs.com/components/button
  */
 const Button = forwardRef((props, ref) => {
+  var _rest$role;
   const {
     propsWithDefaults
   } = useCustom('Button', props);
@@ -68,20 +70,12 @@ const Button = forwardRef((props, ref) => {
     }
     onClick === null || onClick === void 0 || onClick(event);
   });
-  if (rest.href) {
-    return /*#__PURE__*/React.createElement(SafeAnchor, _extends({}, rest, {
-      as: as,
-      ref: ref,
-      "aria-disabled": disabled,
-      disabled: disabled,
-      className: classes,
-      onClick: handleClick
-    }), buttonContent);
-  }
-  const Component = as || 'button';
-  const type = typeProp || (Component === 'button' ? 'button' : undefined);
-  const role = rest.role || (Component !== 'button' ? 'button' : undefined);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  const buttonAs = as || (rest.href ? SafeAnchor : 'button');
+  const isCustomElement = buttonAs !== 'button' && buttonAs !== SafeAnchor;
+  const type = typeProp !== null && typeProp !== void 0 ? typeProp : buttonAs === 'button' ? 'button' : undefined;
+  const role = (_rest$role = rest.role) !== null && _rest$role !== void 0 ? _rest$role : isCustomElement ? 'button' : undefined;
+  return /*#__PURE__*/React.createElement(Box, _extends({}, rest, {
+    as: buttonAs,
     role: role,
     type: type,
     ref: ref,

package/esm/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,6 @@
-import { WithAsProps, Size } from '../internals/types';
-export interface ButtonGroupProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface ButtonGroupProps extends BoxProps {
     /** Display block buttongroups */
     block?: boolean;
     /** A button can show it is currently unable to be interacted with */

package/esm/ButtonGroup/ButtonGroup.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import ButtonGroupContext from "./ButtonGroupContext.js";
+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 ButtonGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('ButtonGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'btn-group',
     role = 'group',
     className,
@@ -43,7 +44,9 @@ const ButtonGroup = forwardRef((props, ref) => {
   }), [disabled, size]);
   return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     role: role,
     ref: ref,
     className: classes

package/esm/ButtonToolbar/ButtonToolbar.d.ts

@@ -1,6 +1,5 @@
 import { StackProps } from '../Stack';
-import { WithAsProps } from '../internals/types';
-export interface ButtonToolbarProps extends WithAsProps {
+export interface ButtonToolbarProps extends StackProps {
     /**
      * The ARIA role describing the button toolbar. Generally the default
      * "toolbar" role is correct. An `aria-label` or `aria-labelledby`

package/esm/ButtonToolbar/ButtonToolbar.js

@@ -14,26 +14,23 @@ const ButtonToolbar = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('ButtonToolbar', props);
   const {
-    as: Component = Stack,
+    as,
     className,
     classPrefix = 'btn-toolbar',
     role = 'toolbar',
     ...rest
   } = propsWithDefaults;
-  const stackProps = Component === Stack ? {
-    wrap: true,
-    spacing: 10
-  } : null;
   const {
     withPrefix,
     merge
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
-  return /*#__PURE__*/React.createElement(Component, _extends({}, stackProps, rest, {
+  return /*#__PURE__*/React.createElement(Stack, _extends({
+    as: as,
     role: role,
     ref: ref,
     className: classes
-  }));
+  }, rest));
 });
 ButtonToolbar.displayName = 'ButtonToolbar';
 export default ButtonToolbar;

package/esm/Calendar/Calendar.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import type { CalendarLocale } from '../locales';
-import type { WithAsProps } from '../internals/types';
 import type { MonthDropdownProps } from './types';
-export interface CalendarProps extends WithAsProps {
+export interface CalendarProps extends BoxProps {
     /**
      * Controlled value
      */

package/esm/Calendar/Calendar.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import CalendarContainer from "./CalendarContainer.js";
 import Button from "../Button/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { isSameMonth, startOfDay } from "../internals/utils/date/index.js";
 import { FormattedDate } from "../CustomProvider/index.js";
@@ -18,7 +19,7 @@ const Calendar = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Calendar', props);
   const {
-    as: Component = CalendarContainer,
+    as = CalendarContainer,
     bordered,
     className,
     classPrefix = 'calendar',
@@ -27,12 +28,12 @@ const Calendar = forwardRef((props, ref) => {
     isoWeek,
     weekStart = 0,
     locale,
+    cellClassName,
     onChange,
     onMonthChange,
     onSelect,
     renderCell,
     value,
-    cellClassName,
     ...rest
   } = propsWithDefaults;
   const {
@@ -55,8 +56,7 @@ const Calendar = forwardRef((props, ref) => {
   });
   const {
     prefix,
-    merge,
-    withPrefix
+    merge
   } = useStyles(classPrefix);
   const renderToolbar = () => /*#__PURE__*/React.createElement(Button, {
     className: prefix('btn-today'),
@@ -67,11 +67,12 @@ const Calendar = forwardRef((props, ref) => {
     date: date,
     formatStr: (locale === null || locale === void 0 ? void 0 : locale.formattedMonthPattern) || 'MMMM  yyyy'
   });
-  const classes = merge(className, withPrefix('panel', {
+  const classes = merge(className, prefix('panel', {
     bordered,
     compact
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({}, rest, {
+    as: as,
     inline: true,
     className: classes,
     ref: ref,

package/esm/Card/Card.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface CardProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface CardProps extends BoxProps {
     /**
      * Show border
      */
@@ -22,17 +22,8 @@ export interface CardProps extends WithAsProps {
     size?: 'lg' | 'md' | 'sm';
 }
 declare const Card: import("../internals/types").InternalRefForwardingComponent<"div", CardProps, never> & {
-    Header: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-        componentAs: "div";
-    }>, never> & Record<string, never>;
-    Body: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-        componentAs: "div";
-    }>, never> & Record<string, never>;
-    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-        componentAs: "div";
-    }>, never> & Record<string, never>;
+    Header: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    Body: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
 };
 export default Card;

package/esm/Card/Card.js

@@ -4,6 +4,7 @@ import React from 'react';
 import CardHeader from "./CardHeader.js";
 import CardBody from "./CardBody.js";
 import CardFooter from "./CardFooter.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { useStyles } from "../internals/hooks/index.js";
@@ -17,7 +18,7 @@ const Card = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Card', props);
   const {
-    as: Component = 'div',
+    as,
     bordered = true,
     classPrefix = 'card',
     className,
@@ -40,7 +41,8 @@ const Card = forwardRef((props, ref) => {
     ['shaded-hover']: shaded === 'hover'
   }));
   const styles = mergeStyles(style, cssVar('width', width, getCssValue));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

package/esm/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/esm/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/esm/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/esm/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/esm/CardGroup/CardGroup.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, getCssValue, mergeStyles } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -9,7 +10,7 @@ const CardGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('CardGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'card-group',
     className,
     children,
@@ -25,7 +26,8 @@ const CardGroup = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
   const styles = mergeStyles(style, cssVar('columns', columns), cssVar('spacing', spacing, getCssValue));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

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

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useMemo, useCallback, useRef } from 'react';
 import classNames from 'classnames';
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useUpdateEffect, useTimeout } from "../internals/hooks/index.js";
 import { forwardRef, guid, ReactChildren, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -15,7 +16,7 @@ const Carousel = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Carousel', props);
   const {
-    as: Component = 'div',
+    as,
     children,
     classPrefix = 'carousel',
     className,
@@ -119,7 +120,9 @@ const Carousel = forwardRef((props, ref) => {
     transform: vertical ? `translate3d(0, ${activeRatio} ,0)` : `translate3d(${activeRatio}, 0 ,0)`
   };
   const showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: mergeRefs(ref, rootRef),
     className: classes
   }), /*#__PURE__*/React.createElement("div", {

package/esm/CascadeTree/CascadeTree.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback, useMemo } from 'react';
 import TreeView from "./TreeView.js";
 import SearchView from "./SearchView.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { getParentMap } from "../internals/Tree/utils/index.js";
 import { flattenTree } from "../Tree/utils/index.js";
@@ -19,7 +20,7 @@ const CascadeTree = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('CascadeTree', props);
   const {
-    as: Component = 'div',
+    as,
     data = [],
     defaultValue,
     className,
@@ -129,7 +130,8 @@ const CascadeTree = forwardRef((props, ref) => {
     handleSelect(node, event);
     setSearchKeyword('');
   });
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     className: classes
   }, rest, {
     ref: ref

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