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

package/esm/Menu/MenuSeparator.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";
 /**
@@ -9,20 +10,21 @@ import { useStyles } from "../internals/hooks/index.js";
  */
 const MenuSeparator = forwardRef((props, ref) => {
   const {
+    as = 'li',
     classPrefix = 'menu-item-divider',
     className,
-    as: Component = 'li',
-    ...restProps
+    ...rest
   } = props;
   const {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     role: "separator",
     className: merge(withPrefix(), className)
-  }, restProps));
+  }, rest));
 });
 MenuSeparator.displayName = 'MenuSeparator';
 export default MenuSeparator;

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useRef } from 'react';
 import CloseButton from "../internals/CloseButton/index.js";
 import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
+import Box from "../internals/Box/index.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
 import { useStyles, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
@@ -16,7 +17,7 @@ const Message = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Message', props);
   const {
-    as: Component = 'div',
+    as = 'div',
     bordered,
     centered,
     className,
@@ -68,7 +69,8 @@ const Message = forwardRef((props, ref) => {
     ['has-title']: header,
     ['has-icon']: showIcon
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "alert"
   }, rest, {
     ref: mergeRefs(targetRef, ref),

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

@@ -3,12 +3,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import IconButton from "../IconButton/index.js";
 import Close from '@rsuite/icons/Close';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { ModalContext } from "./ModalContext.js";
 import { forwardRef, mergeStyles } from "../internals/utils/index.js";
 const ModalBody = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'modal-body',
     className,
     style,
@@ -39,7 +40,9 @@ const ModalBody = forwardRef((props, ref) => {
       onClick: onModalClose
     }) : closeButton;
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     id: dialogId ? `${dialogId}-description` : undefined,
     ref: ref,
     style: mergeStyles(bodyStyles, style),

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

@@ -1,11 +1,12 @@
 '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 { forwardRef, mergeStyles } from "../internals/utils/index.js";
 const ModalDialog = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     style,
     children,
     dialogClassName,
@@ -25,7 +26,8 @@ const ModalDialog = forwardRef((props, ref) => {
   const modalStyle = mergeStyles({
     display: 'block'
   }, style);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "dialog",
     "aria-modal": true,
     ref: ref,

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

@@ -3,12 +3,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import CloseButton from "../internals/CloseButton/index.js";
 import IconButton from "../IconButton/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, createChainedFunction } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { ModalContext } from "./ModalContext.js";
 const ModalHeader = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'modal-header',
     className,
     closeButton = true,
@@ -27,7 +28,9 @@ const ModalHeader = forwardRef((props, ref) => {
     isDrawer,
     onModalClose
   } = context || {};
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), closeButton && /*#__PURE__*/React.createElement(CloseButton, {

package/esm/Modal/ModalTitle.js

@@ -1,12 +1,13 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
+import Box from "../internals/Box/index.js";
 import { ModalContext } from "./ModalContext.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 const ModalTitle = forwardRef((props, ref) => {
   const {
-    as: Component = 'h4',
+    as = 'h4',
     classPrefix = 'modal-title',
     className,
     role,
@@ -18,7 +19,8 @@ const ModalTitle = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
   const context = useContext(ModalContext);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     id: context ? `${context.dialogId}-title` : undefined
   }, rest, {
     role: role,

package/esm/MultiCascadeTree/MultiCascadeTree.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React 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 { useCascadeValue, useSelect, useSearch } from "./hooks/index.js";
 import { useStyles, useControlled } from "../internals/hooks/index.js";
@@ -18,7 +19,7 @@ const MultiCascadeTree = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('MultiCascadeTree', props);
   const {
-    as: Component = 'div',
+    as,
     data = emptyArray,
     defaultValue,
     className,
@@ -91,7 +92,8 @@ const MultiCascadeTree = forwardRef((props, ref) => {
     merge
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix('multi'));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
   }, rest), searchable && /*#__PURE__*/React.createElement(SearchView, {

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

package/esm/MultiCascader/MultiCascader.js

@@ -7,6 +7,7 @@ import isFunction from 'lodash/isFunction';
 import isNil from 'lodash/isNil';
 import TreeView from "../MultiCascadeTree/TreeView.js";
 import SearchView from "../MultiCascadeTree/SearchView.js";
+import Box from "../internals/Box/index.js";
 import useActive from "../Cascader/useActive.js";
 import { findNodeOfTree } from "../internals/Tree/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
@@ -28,7 +29,7 @@ const MultiCascader = forwardRef((props, ref) => {
     rtl
   } = useCustom('MultiCascader', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     classPrefix = 'picker',
     defaultValue,
@@ -306,7 +307,8 @@ const MultiCascader = forwardRef((props, ref) => {
     onEnter: handleEntered,
     onExited: handleExited,
     speaker: renderTreeView
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/esm/Nav/Nav.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
-export interface NavProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
+import { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
+export interface NavProps<T = any> extends BoxProps, HTMLPropsWithoutSelect {
     /**
      * The appearance style of the Nav component.
      *

package/esm/Nav/Nav.js

@@ -9,6 +9,7 @@ import NavMegaMenu from "./NavMegaMenu.js";
 import NavDropdownItem from "./NavDropdownItem.js";
 import NavDropdownMenu from "./NavDropdownMenu.js";
 import AdaptiveNavItem from "./AdaptiveNavItem.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, deprecateComponent } from "../internals/utils/index.js";
 import { useStyles, useEnsuredRef, useControlled } from "../internals/hooks/index.js";
 import { NavbarContext } from "../Navbar/NavbarContext.js";
@@ -36,7 +37,7 @@ const Nav = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Nav', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'nav',
     appearance = 'default',
     vertical,
@@ -98,7 +99,8 @@ const Nav = forwardRef((props, ref) => {
       value: contextValue
     }, /*#__PURE__*/React.createElement(Menubar, {
       vertical: !!sidenav
-    }, (menubar, ref) => /*#__PURE__*/React.createElement(Component, _extends({
+    }, (menubar, ref) => /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
       ref: ref
     }, rest, {
       className: classes
@@ -106,7 +108,9 @@ const Nav = forwardRef((props, ref) => {
   }
   return /*#__PURE__*/React.createElement(NavContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: menubarRef,
     className: classes
   }), children, hasWaterline && /*#__PURE__*/React.createElement("div", {

package/esm/Nav/NavDropdown.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { NavDropdownToggleProps } from './NavDropdownToggle';
-import type { PlacementCorners, WithAsProps, SanitizedHTMListProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners, SanitizedHTMListProps } from '../internals/types';
 export type NavDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface NavDropdownProps<T = any> extends WithAsProps, SanitizedHTMListProps {
+export interface NavDropdownProps<T = any> extends BoxProps, SanitizedHTMListProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */
@@ -33,7 +34,7 @@ export interface NavDropdownProps<T = any> extends WithAsProps, SanitizedHTMList
      */
     renderTitle?: (children: React.ReactNode) => React.ReactNode;
     /** Custom Toggle */
-    renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
+    renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;
     /** The callback function that the menu closes */
     onClose?: () => void;
     /** Menu Pop-up callback function */

package/esm/Nav/NavDropdown.js

@@ -8,6 +8,7 @@ import NavContext from "./NavContext.js";
 import NavDropdownItem from "./NavDropdownItem.js";
 import NavDropdownMenu from "./NavDropdownMenu.js";
 import NavDropdownToggle from "./NavDropdownToggle.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs, kebabPlace } from "../internals/utils/index.js";
 import { initialState, reducer } from "../Dropdown/DropdownState.js";
@@ -32,7 +33,7 @@ const NavDropdown = forwardRef((props, ref) => {
     throw new Error('<Nav.Dropdown> must be rendered within a <Nav> component.');
   }
   const {
-    as: Component = 'div',
+    as,
     title,
     onClose,
     onOpen,
@@ -118,7 +119,8 @@ const NavDropdown = forwardRef((props, ref) => {
       disabled,
       open
     }));
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
       ref: mergeRefs(ref, menuContainerRef),
       className: classes,
       style: style,

package/esm/Nav/NavDropdownItem.d.ts

@@ -1,8 +1,9 @@
 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 '../Dropdown/types';
-export interface NavDropdownItemProps<T = any> extends WithAsProps, DeprecatedDropdownItemProps, HTMLPropsWithoutSelect {
+export interface NavDropdownItemProps<T = any> extends BoxProps, DeprecatedDropdownItemProps, HTMLPropsWithoutSelect {
     /** Active the current option */
     active?: boolean;
     /** Whether to display the divider */

package/esm/Nav/NavDropdownItem.js

@@ -16,17 +16,17 @@ const NavDropdownItem = 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 {
@@ -43,7 +43,7 @@ const NavDropdownItem = forwardRef((props, ref) => {
     onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
     onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);
   }, [onSelect, eventKey, onSelectFromNav]);
-  const renderDropdownItem = useRenderMenuItem(Component);
+  const renderDropdownItem = useRenderMenuItem(as);
   if (divider) {
     return renderDropdownItem({
       ref,

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import NavItem from "./NavItem.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 /**
@@ -16,7 +17,7 @@ import { forwardRef } from "../internals/utils/index.js";
  */
 const NavDropdownToggle = forwardRef((props, ref) => {
   const {
-    as: Component = NavItem,
+    as = NavItem,
     className,
     classPrefix = 'dropdown-toggle',
     renderToggle,
@@ -34,7 +35,9 @@ const NavDropdownToggle = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix({
     'no-caret': noCaret
   }));
-  const toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  const toggle = /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), children, !noCaret && /*#__PURE__*/React.createElement(ArrowDownLineIcon, {

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

@@ -6,6 +6,7 @@ import isNil from 'lodash/isNil';
 import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
 import NavContext from "./NavContext.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, shallowEqual } from "../internals/utils/index.js";
 /**
@@ -22,7 +23,7 @@ const NavItem = forwardRef((props, ref) => {
     throw new Error('<Nav.Item> must be rendered within a <Nav> component.');
   }
   const {
-    as: Component = SafeAnchor,
+    as = SafeAnchor,
     active: activeProp,
     disabled,
     eventKey,
@@ -76,7 +77,8 @@ const NavItem = forwardRef((props, ref) => {
       className: merge(className, prefix('panel'))
     }, rest), children);
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     tabIndex: disabled ? -1 : undefined
   }, rest, {

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

@@ -5,6 +5,7 @@ import NavbarBrand from "./NavbarBrand.js";
 import NavbarContent from "./NavbarContent.js";
 import NavbarToggle from "./NavbarToggle.js";
 import NavbarDrawer from "./NavbarDrawer.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -26,7 +27,7 @@ const Navbar = forwardRef((props, ref) => {
   } = useCustom('Navbar', props);
   const {
     className,
-    as: Component = 'nav',
+    as = 'nav',
     classPrefix = 'navbar',
     appearance = 'default',
     onDrawerOpenChange,
@@ -51,7 +52,9 @@ const Navbar = forwardRef((props, ref) => {
   }), [appearance, navbarId, open]);
   return /*#__PURE__*/React.createElement(NavbarContext.Provider, {
     value: context
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   })));

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