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

package/cjs/Nav/NavDropdownItem.js

@@ -23,17 +23,17 @@ const NavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Nav.Dropdown.Item> should be used within a <Nav> component.');
   }
   const {
+    as = 'li',
+    active: activeProp,
     classPrefix = 'dropdown-item',
     className,
-    active: activeProp,
     eventKey,
-    onSelect,
     icon,
-    as: Component = 'li',
     divider,
     panel,
     children,
     disabled,
+    onSelect,
     ...restProps
   } = props;
   const {
@@ -50,7 +50,7 @@ const NavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
     onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);
   }, [onSelect, eventKey, onSelectFromNav]);
-  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
   if (divider) {
     return renderDropdownItem({
       ref,

package/cjs/Nav/NavDropdownToggle.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { NavItemProps } from './NavItem';
-import type { WithAsProps, PlacementCorners } from '../internals/types';
-export interface NavDropdownToggleProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners } from '../internals/types';
+export interface NavDropdownToggleProps extends BoxProps {
     icon?: NavItemProps['icon'];
     noCaret?: boolean;
-    renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
+    renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;
     placement?: PlacementCorners;
 }
 /**

package/cjs/Nav/NavDropdownToggle.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
 var _NavItem = _interopRequireDefault(require("./NavItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 /**
@@ -21,7 +22,7 @@ var _utils = require("../internals/utils");
  */
 const NavDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = _NavItem.default,
+    as = _NavItem.default,
     className,
     classPrefix = 'dropdown-toggle',
     renderToggle,
@@ -39,7 +40,9 @@ const NavDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     'no-caret': noCaret
   }));
-  const toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const toggle = /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {

package/cjs/Nav/NavItem.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface NavItemProps<T = string | number> extends WithAsProps, HTMLPropsWithoutSelect {
+export interface NavItemProps<T = string | number> extends BoxProps, HTMLPropsWithoutSelect {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/cjs/Nav/NavItem.js

@@ -11,6 +11,7 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 var _NavContext = _interopRequireDefault(require("./NavContext"));
+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); }
@@ -29,7 +30,7 @@ const NavItem = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Nav.Item> must be rendered within a <Nav> component.');
   }
   const {
-    as: Component = _SafeAnchor.default,
+    as = _SafeAnchor.default,
     active: activeProp,
     disabled,
     eventKey,
@@ -83,7 +84,8 @@ const NavItem = (0, _utils.forwardRef)((props, ref) => {
       className: merge(className, prefix('panel'))
     }, rest), children);
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     tabIndex: disabled ? -1 : undefined
   }, rest, {

package/cjs/Navbar/Navbar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface NavbarProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface NavbarProps extends BoxProps {
     /**
      * The appearance style of the Navbar component.
      */
@@ -15,12 +15,8 @@ export interface NavbarProps extends WithAsProps {
  * @see https://rsuitejs.com/components/navbar
  */
 declare const Navbar: import("../internals/types").InternalRefForwardingComponent<"div", NavbarProps, never> & {
-    Brand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<{
-        name: string;
-        componentAs: "a";
-        componentClassPrefix: string;
-    }>, never> & Record<string, never>;
-    Content: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("..").BoxProps, never> & Record<string, never>, Partial<import("./NavbarContent").NavbarContentProps>, never> & Record<string, never>;
+    Brand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    Content: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>, Partial<import("./NavbarContent").NavbarContentProps>, never> & Record<string, never>;
     Toggle: React.ForwardRefExoticComponent<import("..").IconButtonProps & React.RefAttributes<any>>;
     Drawer: React.ForwardRefExoticComponent<import("..").DrawerProps & React.RefAttributes<any>>;
 };

package/cjs/Navbar/Navbar.js

@@ -10,6 +10,7 @@ var _NavbarBrand = _interopRequireDefault(require("./NavbarBrand"));
 var _NavbarContent = _interopRequireDefault(require("./NavbarContent"));
 var _NavbarToggle = _interopRequireDefault(require("./NavbarToggle"));
 var _NavbarDrawer = _interopRequireDefault(require("./NavbarDrawer"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -33,7 +34,7 @@ const Navbar = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _CustomProvider.useCustom)('Navbar', props);
   const {
     className,
-    as: Component = 'nav',
+    as = 'nav',
     classPrefix = 'navbar',
     appearance = 'default',
     onDrawerOpenChange,
@@ -58,7 +59,9 @@ const Navbar = (0, _utils.forwardRef)((props, ref) => {
   }), [appearance, navbarId, open]);
   return /*#__PURE__*/_react.default.createElement(_NavbarContext.NavbarContext.Provider, {
     value: context
-  }, /*#__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
   })));

package/cjs/Navbar/NavbarBrand.d.ts

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

package/cjs/Navbar/NavbarContent.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from '../internals/utils';
 import { BoxProps } from '../internals/Box';
-export type NavbarContentProps = Omit<ComponentProps, 'hidden'> & BoxProps;
+export type NavbarContentProps = ComponentProps & BoxProps;
 declare const NavbarContent: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>, Partial<NavbarContentProps>, never> & Record<string, never>;
 export default NavbarContent;

package/cjs/Navbar/NavbarDropdown.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import type { PlacementCorners, WithAsProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
 export type NavbarDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface NavbarDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title'> {
+export interface NavbarDropdownProps<T = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title'> {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */

package/cjs/Navbar/NavbarDropdown.js

@@ -12,6 +12,7 @@ var _Disclosure = _interopRequireDefault(require("../internals/Disclosure/Disclo
 var _NavDropdownItem = _interopRequireDefault(require("../Nav/NavDropdownItem"));
 var _NavDropdownMenu = _interopRequireDefault(require("../Nav/NavDropdownMenu"));
 var _NavbarDropdownToggle = _interopRequireDefault(require("./NavbarDropdownToggle"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _NavbarContext = require("./NavbarContext");
@@ -31,7 +32,7 @@ const NavbarDropdown = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Navbar.Dropdown> should be used within a <Navbar> component.');
   }
   const {
-    as: Component = 'div',
+    as,
     title,
     onClose,
     onOpen,
@@ -76,7 +77,8 @@ const NavbarDropdown = (0, _utils.forwardRef)((props, ref) => {
       disabled,
       open
     }));
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as,
       ref: (0, _utils.mergeRefs)(ref, containerRef),
       className: classes,
       style: style,

package/cjs/Navbar/NavbarDropdownItem.d.ts

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

package/cjs/Navbar/NavbarDropdownItem.js

@@ -25,17 +25,17 @@ const NavbarDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Navbar.Dropdown.Item> must be rendered within a <Nav> component within a <Navbar> component.');
   }
   const {
+    as = 'li',
+    active: activeProp,
     classPrefix = 'dropdown-item',
     className,
-    active: activeProp,
+    children,
+    disabled,
+    divider,
     eventKey,
-    onSelect,
     icon,
-    as: Component = 'li',
-    divider,
     panel,
-    children,
-    disabled,
+    onSelect,
     ...restProps
   } = props;
   const {
@@ -58,7 +58,7 @@ const NavbarDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     handleSelectItem === null || handleSelectItem === void 0 || handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
   const selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(nav.activeKey, eventKey);
-  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
   if (divider) {
     return renderDropdownItem({
       ref,

package/cjs/Navbar/NavbarDropdownToggle.d.ts

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

package/cjs/Navbar/NavbarDropdownToggle.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
 var _NavbarItem = _interopRequireDefault(require("./NavbarItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 /**
@@ -21,7 +22,7 @@ var _hooks = require("../internals/hooks");
  */
 const NavbarDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = _NavbarItem.default,
+    as = _NavbarItem.default,
     className,
     classPrefix = 'navbar-item',
     renderToggle,
@@ -37,7 +38,9 @@ const NavbarDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     'no-caret': noCaret
   }));
-  const toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const toggle = /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {

package/cjs/Navbar/NavbarItem.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
-export interface NavbarItemProps<T = string | number> extends WithAsProps, HTMLPropsWithoutSelect {
+import type { HTMLPropsWithoutSelect } from '../internals/types';
+export interface NavbarItemProps<T = string | number> extends BoxProps, HTMLPropsWithoutSelect {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/cjs/Navbar/NavbarItem.js

@@ -9,8 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
-var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
+var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
+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); }
@@ -20,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const NavbarItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = _SafeAnchor.default,
+    as = _SafeAnchor.default,
     active: activeProp,
     disabled,
     eventKey,
@@ -57,7 +58,8 @@ const NavbarItem = (0, _utils.forwardRef)((props, ref) => {
       onClick === null || onClick === void 0 || onClick(event);
     }
   }, [disabled, emitSelect, onClick]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     "aria-selected": active || undefined
   }, rest, {

package/cjs/Notification/Notification.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsPropsWithoutChildren, StatusType } from '../internals/types';
-export interface NotificationProps extends WithAsPropsWithoutChildren {
+import { BoxProps } from '../internals/Box';
+import type { StatusType } from '../internals/types';
+export interface NotificationProps extends Omit<BoxProps, 'children'> {
     children?: React.ReactNode | (() => React.ReactNode);
     /** Title of the message */
     header?: React.ReactNode;

package/cjs/Notification/Notification.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _useDelayedClosure = _interopRequireDefault(require("../toaster/hooks/useDelayedClosure"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _statusIcons = require("../internals/constants/statusIcons");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
@@ -24,7 +25,7 @@ const Notification = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Notification', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'notification',
     closable,
     duration = 4500,
@@ -70,7 +71,8 @@ const Notification = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix(type, {
     closable
   }));
-  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/Pagination/Pagination.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { WithAsProps, Size } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
 import type { PaginationLocale } from '../locales';
-export interface PaginationProps extends WithAsProps {
+export interface PaginationProps extends BoxProps {
     /** Current page number */
     activePage?: number;
     /** Page buttons display the maximum number of */

package/cjs/Pagination/Pagination.js

@@ -12,6 +12,7 @@ var _PageTop = _interopRequireDefault(require("@rsuite/icons/PageTop"));
 var _PageNext = _interopRequireDefault(require("@rsuite/icons/PageNext"));
 var _PageEnd = _interopRequireDefault(require("@rsuite/icons/PageEnd"));
 var _PaginationButton = _interopRequireDefault(require("./PaginationButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -32,7 +33,7 @@ const Pagination = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Pagination', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'pagination',
     disabled: disabledProp,
@@ -189,10 +190,11 @@ const Pagination = (0, _utils.forwardRef)((props, ref) => {
     });
   };
   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,
     ref: ref,
     className: classes
-  }), renderFirst(), renderPrev(), renderPageButtons(), renderNext(), renderLast());
+  }, rest), renderFirst(), renderPrev(), renderPageButtons(), renderNext(), renderLast());
 });
 Pagination.displayName = 'Pagination';
 var _default = exports.default = Pagination;

package/cjs/Pagination/PaginationGroup.js

@@ -11,6 +11,7 @@ var _Pagination = _interopRequireDefault(require("./Pagination"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _LimitPicker = _interopRequireDefault(require("./LimitPicker"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -28,7 +29,7 @@ const defaultLimitOptions = [30, 50, 100];
  */
 const PaginationGroup = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     activePage: activePageProp,
     classPrefix = 'pagination-group',
     className,
@@ -78,7 +79,8 @@ const PaginationGroup = (0, _utils.forwardRef)((props, ref) => {
     setLimit(value);
     onChangeLimit === null || onChangeLimit === void 0 || onChangeLimit(value);
   });
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     ref: ref,
     className: classes,
     style: style

package/cjs/Panel/Panel.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { AnimationEventProps, WithAsProps } from '../internals/types';
-export interface PanelProps<T = string | number> extends WithAsProps, AnimationEventProps {
+import { BoxProps } from '../internals/Box';
+import type { AnimationEventProps } from '../internals/types';
+export interface PanelProps<T = string | number> extends BoxProps, AnimationEventProps {
     /**
      * Show border
      */

package/cjs/Panel/Panel.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _PanelHeader = _interopRequireDefault(require("./PanelHeader"));
 var _PanelBody = _interopRequireDefault(require("./PanelBody"));
 var _useExpanded = _interopRequireDefault(require("./hooks/useExpanded"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -24,7 +25,7 @@ const Panel = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Panel', props);
   const {
-    as: Component = 'div',
+    as,
     bodyFill,
     bodyProps,
     bordered,
@@ -79,11 +80,12 @@ const Panel = (0, _utils.forwardRef)((props, ref) => {
     bordered,
     shaded
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes,
     id: idProp
-  }), header && /*#__PURE__*/_react.default.createElement(_PanelHeader.default, {
+  }, rest), header && /*#__PURE__*/_react.default.createElement(_PanelHeader.default, {
     collapsible: collapsible,
     expanded: expanded,
     caretAs: caretAs,

package/cjs/Panel/PanelBody.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, AnimationEventProps } from '../internals/types';
+import type { WithAsProps, AnimationEventProps } from '../internals/types';
 export interface PanelBodyProps extends WithAsProps, AnimationEventProps, React.HTMLAttributes<HTMLDivElement> {
     collapsible?: boolean;
     expanded?: boolean;

package/cjs/Panel/PanelBody.js

@@ -7,8 +7,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));
-var _hooks = require("../internals/hooks");
 var _ScrollView = _interopRequireDefault(require("../internals/ScrollView"));
+var _hooks = require("../internals/hooks");
 const PanelBody = props => {
   const {
     classPrefix = 'panel-body',

package/cjs/Panel/PanelHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
-export interface PanelHeaderProps extends WithAsProps, React.HTMLAttributes<HTMLHeadingElement> {
+import { BoxProps } from '../internals/Box';
+export interface PanelHeaderProps extends BoxProps, React.HTMLAttributes<HTMLHeadingElement> {
     caretAs?: React.ElementType;
     collapsible?: boolean;
     disabled?: boolean;

package/cjs/Panel/PanelHeader.js

@@ -9,12 +9,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _AccordionButton = _interopRequireDefault(require("./AccordionButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const PanelHeader = props => {
   const {
-    as: Component = _Heading.default,
+    as = _Heading.default,
     classPrefix = 'panel',
     className,
     children,
@@ -43,7 +44,8 @@ const PanelHeader = props => {
       className
     });
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     level: 2,
     className: merge(className, prefix('header'))
   }, rest), collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {

package/cjs/PanelGroup/PanelGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 type KeyType = string | number;
-export interface PanelGroupProps<T = KeyType> extends WithAsProps {
+export interface PanelGroupProps<T = KeyType> extends BoxProps {
     /** Whether it is a collapsible panel. */
     accordion?: boolean;
     /** Expand the Panel, corresponding to the 'Panel' of 'eventkey' */

package/cjs/PanelGroup/PanelGroup.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = exports.PanelGroupContext = 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");
@@ -22,7 +23,7 @@ const PanelGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('PanelGroup', props);
   const {
-    as: Component = 'div',
+    as,
     accordion,
     defaultActiveKey,
     bordered,
@@ -51,7 +52,9 @@ const PanelGroup = (0, _utils.forwardRef)((props, ref) => {
     activeKey,
     onGroupSelect: handleSelect
   }), [accordion, activeKey, handleSelect]);
-  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
   }), /*#__PURE__*/_react.default.createElement(PanelGroupContext.Provider, {

package/cjs/Placeholder/PlaceholderGraph.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface PlaceholderGraphProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface PlaceholderGraphProps extends BoxProps {
     /**
      * The height of the graph.
      *