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

package/cjs/InputPicker/InputPicker.js

@@ -19,6 +19,7 @@ var _Stack = _interopRequireDefault(require("../Stack"));
 var _useInput = _interopRequireDefault(require("./hooks/useInput"));
 var _useData = _interopRequireDefault(require("./hooks/useData"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/Tree/utils");
 var _hooks = require("../internals/hooks");
 var _constants = require("../internals/constants");
@@ -40,11 +41,12 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('InputPicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     cleanable = true,
     cacheData = [],
     classPrefix = 'picker',
+    caretAs,
     data: controlledData = [],
     disabled,
     readOnly,
@@ -74,6 +76,8 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     listProps,
     id,
     tabIndex,
+    loading,
+    label,
     sort,
     renderListbox,
     renderExtraFooter,
@@ -412,6 +416,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     trigger: triggerRef,
     target,
     overlay,
+    loading,
     ...events,
     ...rest
   });
@@ -581,7 +586,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     [prefix`disabled-options`]: disabledOptions
   });
   const searching = !!searchKeyword && open;
-  const editable = searchable && !disabled && !rest.loading;
+  const editable = searchable && !disabled && !loading;
   if (plaintext) {
     const plaintextProps = {};
 
@@ -609,18 +614,22 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),
     speaker: renderPopup,
     placement: placement
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     className: classes,
     style: style,
     onClick: focus,
     onKeyDown: onPickerKeyDown,
     ref: root
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys]), {
+  }, (0, _omit.default)(rest, [..._Picker.omitTriggerPropKeys, ...usedClassNamePropKeys])), /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, {
+    loading: loading,
+    label: label,
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
     ref: target,
     as: toggleAs,
+    caretAs: caretAs,
     tabIndex: tabIndex,
     onClean: handleClean,
     cleanable: cleanable && !disabled,
@@ -632,7 +641,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
     focusItemValue: focusItemValue,
     caret: !disabledOptions,
     size: size
-  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {
+  }, searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {
     showTagList: multi,
     inputRef: inputRef,
     inputValue: open ? searchKeyword : '',

package/cjs/Kbd/Kbd.d.ts

@@ -1,5 +1,6 @@
-import type { WithAsProps, Size } from '../internals/types';
-export interface KbdProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface KbdProps extends BoxProps {
     /**
      * Sets Kbd size.
      */

package/cjs/Kbd/Kbd.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");
@@ -20,7 +21,7 @@ const Kbd = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Kbd', props);
   const {
-    as: Component = 'kbd',
+    as = 'kbd',
     classPrefix = 'kbd',
     className,
     size = 'md',
@@ -31,7 +32,9 @@ const Kbd = (0, _utils.forwardRef)((props, ref) => {
     merge
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix(size));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }));

package/cjs/List/List.d.ts

@@ -1,6 +1,6 @@
 import { SortConfig } from './helper/useSortHelper';
-import type { WithAsProps } from '../internals/types';
-export interface ListProps extends WithAsProps, SortConfig {
+import { BoxProps } from '../internals/Box';
+export interface ListProps extends BoxProps, SortConfig {
     /**
      * Size of list item.
      */

package/cjs/List/List.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _useSortHelper = _interopRequireDefault(require("./helper/useSortHelper"));
 var _ListContext = _interopRequireDefault(require("./ListContext"));
 var _ListItem = _interopRequireDefault(require("./ListItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -27,7 +28,7 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('List', props);
   const {
-    as: Component = 'div',
+    as,
     autoScroll = true,
     bordered,
     classPrefix = 'list',
@@ -76,14 +77,14 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     size,
     register
   }), [bordered, register, size]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "list"
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    role: "list",
     ref: (0, _utils.mergeRefs)(containerRef, ref),
     className: classes,
     onMouseDown: sortable ? handleStart : undefined,
     onMouseUp: sortable ? handleEnd : undefined
-  }), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {
     value: contextValue
   }, children));
 }, Subcomponents);

package/cjs/List/ListItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 import { Collection } from './helper/useManager';
-export interface ListItemProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+export interface ListItemProps extends BoxProps, React.HTMLAttributes<HTMLElement> {
     index?: number;
     collection?: Collection;
     disabled?: boolean;

package/cjs/List/ListItem.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _ListContext = _interopRequireDefault(require("./ListContext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 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); }
@@ -17,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const ListItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     children,
     className,
     classPrefix = 'list-item',
@@ -58,13 +59,13 @@ const ListItem = (0, _utils.forwardRef)((props, ref) => {
     disabled,
     bordered
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "listitem",
-    "aria-disabled": disabled
-  }, rest, {
+    "aria-disabled": disabled,
     ref: (0, _utils.mergeRefs)(listItemRef, ref),
     className: classes
-  }), children);
+  }, rest), children);
 });
 ListItem.displayName = 'ListItem';
 var _default = exports.default = ListItem;

package/cjs/Loader/Loader.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Size } from '../internals/types';
-export interface LoaderProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface LoaderProps extends BoxProps {
     /** Centered in the container */
     center?: boolean;
     /** Whether the background is displayed */

package/cjs/Loader/Loader.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");
@@ -18,7 +19,7 @@ const Loader = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Loader', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'loader',
     className,
     inverse,
@@ -41,13 +42,13 @@ const Loader = (0, _utils.forwardRef)((props, ref) => {
     vertical,
     inverse
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "status",
-    "aria-labelledby": content ? labelId : undefined
-  }, rest, {
+    "aria-labelledby": content ? labelId : undefined,
     ref: ref,
     className: classes
-  }), backdrop && /*#__PURE__*/_react.default.createElement("div", {
+  }, rest), backdrop && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('backdrop')
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: withPrefix()

package/cjs/Menu/Menu.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { StandardProps, HTMLPropsWithoutSelect } from '../internals/types';
-export interface MenuProps<T = string | number> extends StandardProps, HTMLPropsWithoutSelect<HTMLUListElement> {
+import { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
+export interface MenuProps<T = string | number> extends BoxProps, HTMLPropsWithoutSelect<HTMLUListElement> {
     /** Set the active key for the menu */
     activeKey?: T;
     /** Callback function triggered when an item is selected */

package/cjs/Menu/Menu.js

@@ -10,6 +10,7 @@ var _Menubar = _interopRequireDefault(require("../internals/Menu/Menubar"));
 var _MenuContext = _interopRequireDefault(require("./MenuContext"));
 var _MenuItem = _interopRequireDefault(require("./MenuItem"));
 var _MenuSeparator = _interopRequireDefault(require("./MenuSeparator"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 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); }
@@ -26,6 +27,7 @@ const Subcomponents = {
  */
 const Menu = (0, _utils.forwardRef)((props, ref) => {
   const {
+    as = 'ul',
     activeKey,
     classPrefix = 'menu',
     className,
@@ -46,7 +48,9 @@ const Menu = (0, _utils.forwardRef)((props, ref) => {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
     vertical: true
-  }, (menubar, menubarRef) => /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({}, menubar, rest, {
+  }, (menubar, menubarRef) => /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, menubar, rest, {
     ref: (0, _utils.mergeRefs)(menubarRef, ref),
     className: classes,
     role: "menu"

package/cjs/Menu/MenuItem.d.ts

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

package/cjs/Menu/MenuItem.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const MenuItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     active: activeProp,
     classPrefix = 'menu-item',
     className,
@@ -42,7 +42,7 @@ const MenuItem = (0, _utils.forwardRef)((props, ref) => {
     menu === null || menu === void 0 || (_menu$onSelect = menu.onSelect) === null || _menu$onSelect === void 0 || _menu$onSelect.call(menu, eventKey, event);
   }, [onSelect, eventKey, menu]);
   const selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(menu === null || menu === void 0 ? void 0 : menu.activeKey, eventKey);
-  const renderMenuItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderMenuItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
   return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
     selected: selected,
     disabled: disabled,

package/cjs/Menu/MenuSeparator.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface MenuSeparatorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+import { BoxProps } from '../internals/Box';
+export interface MenuSeparatorProps extends BoxProps, React.HTMLAttributes<HTMLElement> {
     /** You can use a custom element for this component */
     as?: React.ElementType;
 }

package/cjs/Menu/MenuSeparator.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");
 /**
@@ -14,20 +15,21 @@ var _hooks = require("../internals/hooks");
  */
 const MenuSeparator = (0, _utils.forwardRef)((props, ref) => {
   const {
+    as = 'li',
     classPrefix = 'menu-item-divider',
     className,
-    as: Component = 'li',
-    ...restProps
+    ...rest
   } = props;
   const {
     merge,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     role: "separator",
     className: merge(withPrefix(), className)
-  }, restProps));
+  }, rest));
 });
 MenuSeparator.displayName = 'MenuSeparator';
 var _default = exports.default = MenuSeparator;

package/cjs/Message/Message.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, StatusType } from '../internals/types';
-export interface MessageProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { StatusType } from '../internals/types';
+export interface MessageProps extends BoxProps {
     /**
      * The type of the message box.
      */

package/cjs/Message/Message.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
 var _useDelayedClosure = _interopRequireDefault(require("../toaster/hooks/useDelayedClosure"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _statusIcons = require("../internals/constants/statusIcons");
 var _hooks = require("../internals/hooks");
@@ -23,7 +24,7 @@ const Message = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Message', props);
   const {
-    as: Component = 'div',
+    as = 'div',
     bordered,
     centered,
     className,
@@ -75,7 +76,8 @@ const Message = (0, _utils.forwardRef)((props, ref) => {
     ['has-title']: header,
     ['has-icon']: showIcon
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "alert"
   }, rest, {
     ref: (0, _utils.mergeRefs)(targetRef, ref),

package/cjs/Modal/Modal.d.ts

@@ -33,12 +33,10 @@ export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HT
  * @see https://rsuitejs.com/components/modal
  */
 declare const Modal: import("../internals/types").InternalRefForwardingComponent<"div", ModalProps, never> & {
-    Body: import("../internals/types").InternalRefForwardingComponent<"div", import("./ModalBody").ModalBodyProps, never> & Record<string, never>;
+    Body: import("../internals/types").InternalRefForwardingComponent<"div", import("..").BoxProps, never> & Record<string, never>;
     Header: import("../internals/types").InternalRefForwardingComponent<"div", import("./ModalHeader").ModalHeaderProps, never> & Record<string, never>;
     Title: import("../internals/types").InternalRefForwardingComponent<"h4", import("../internals/utils").ComponentProps, never> & Record<string, never>;
-    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
+    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
     Dialog: import("../internals/types").InternalRefForwardingComponent<"div", import("./ModalDialog").ModalDialogProps, never> & Record<string, never>;
 };
 export default Modal;

package/cjs/Modal/ModalBody.d.ts

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

package/cjs/Modal/ModalBody.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _ModalContext = require("./ModalContext");
 var _utils = require("../internals/utils");
@@ -15,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const ModalBody = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'modal-body',
     className,
     style,
@@ -46,7 +47,9 @@ const ModalBody = (0, _utils.forwardRef)((props, ref) => {
       onClick: onModalClose
     }) : closeButton;
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     id: dialogId ? `${dialogId}-description` : undefined,
     ref: ref,
     style: (0, _utils.mergeStyles)(bodyStyles, style),

package/cjs/Modal/ModalDialog.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Size } from '../internals/types';
-export interface ModalDialogProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface ModalDialogProps extends BoxProps {
     /** A modal can have different sizes */
     size?: Size;
     dialogClassName?: string;

package/cjs/Modal/ModalDialog.js

@@ -6,11 +6,12 @@ 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 _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 const ModalDialog = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     style,
     children,
     dialogClassName,
@@ -30,7 +31,8 @@ const ModalDialog = (0, _utils.forwardRef)((props, ref) => {
   const modalStyle = (0, _utils.mergeStyles)({
     display: 'block'
   }, style);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "dialog",
     "aria-modal": true,
     ref: ref,

package/cjs/Modal/ModalFooter.d.ts

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

package/cjs/Modal/ModalHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface ModalHeaderProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface ModalHeaderProps extends BoxProps {
     /** Primary content */
     children?: React.ReactNode;
     /** Display close button */

package/cjs/Modal/ModalHeader.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _ModalContext = require("./ModalContext");
@@ -15,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const ModalHeader = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'modal-header',
     className,
     closeButton = true,
@@ -34,7 +35,9 @@ const ModalHeader = (0, _utils.forwardRef)((props, ref) => {
     isDrawer,
     onModalClose
   } = context || {};
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), closeButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {

package/cjs/Modal/ModalTitle.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 _ModalContext = require("./ModalContext");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
@@ -13,7 +14,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const ModalTitle = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'h4',
+    as = 'h4',
     classPrefix = 'modal-title',
     className,
     role,
@@ -25,7 +26,8 @@ const ModalTitle = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
   const context = (0, _react.useContext)(_ModalContext.ModalContext);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     id: context ? `${context.dialogId}-title` : undefined
   }, rest, {
     role: role,

package/cjs/MultiCascadeTree/MultiCascadeTree.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _TreeView = _interopRequireDefault(require("./TreeView"));
 var _SearchView = _interopRequireDefault(require("./SearchView"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("./hooks");
 var _hooks2 = require("../internals/hooks");
@@ -23,7 +24,7 @@ const MultiCascadeTree = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('MultiCascadeTree', props);
   const {
-    as: Component = 'div',
+    as,
     data = emptyArray,
     defaultValue,
     className,
@@ -96,7 +97,8 @@ const MultiCascadeTree = (0, _utils.forwardRef)((props, ref) => {
     merge
   } = (0, _hooks2.useStyles)(classPrefix);
   const classes = merge(className, withPrefix('multi'));
-  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
   }, rest), searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {

package/cjs/MultiCascadeTree/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import type { CascadeTreeProps } from '../CascadeTree/types';
-import type { Option, ToArray, WithAsProps } from '../internals/types';
+import type { Option, ToArray } from '../internals/types';
 export interface ItemKeys {
     valueKey: string;
     labelKey: string;
     childrenKey: string;
 }
-export interface MultiCascadeTreeProps<T = any, V = T[], L = any> extends WithAsProps, CascadeTreeProps<T, V> {
+export interface MultiCascadeTreeProps<T = any, V = T[], L = any> extends CascadeTreeProps<T, V> {
     /**
      * When set to true, selecting a child node will update the state of the parent node.
      */