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

package/esm/Navbar/NavbarDropdown.js

@@ -7,6 +7,7 @@ import Disclosure from "../internals/Disclosure/Disclosure.js";
 import NavDropdownItem from "../Nav/NavDropdownItem.js";
 import NavDropdownMenu from "../Nav/NavDropdownMenu.js";
 import NavbarDropdownToggle from "./NavbarDropdownToggle.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 { NavbarContext } from "./NavbarContext.js";
@@ -24,7 +25,7 @@ const NavbarDropdown = forwardRef((props, ref) => {
     throw new Error('<Navbar.Dropdown> should be used within a <Navbar> component.');
   }
   const {
-    as: Component = 'div',
+    as,
     title,
     onClose,
     onOpen,
@@ -69,7 +70,8 @@ const NavbarDropdown = forwardRef((props, ref) => {
       disabled,
       open
     }));
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
       ref: mergeRefs(ref, containerRef),
       className: classes,
       style: style,

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

@@ -18,17 +18,17 @@ const NavbarDropdownItem = 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 {
@@ -51,7 +51,7 @@ const NavbarDropdownItem = forwardRef((props, ref) => {
     handleSelectItem === null || handleSelectItem === void 0 || handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
   const selected = activeProp || !isNil(eventKey) && shallowEqual(nav.activeKey, eventKey);
-  const renderDropdownItem = useRenderMenuItem(Component);
+  const renderDropdownItem = useRenderMenuItem(as);
   if (divider) {
     return renderDropdownItem({
       ref,

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import NavbarItem from "./NavbarItem.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 /**
@@ -16,7 +17,7 @@ import { useStyles } from "../internals/hooks/index.js";
  */
 const NavbarDropdownToggle = forwardRef((props, ref) => {
   const {
-    as: Component = NavbarItem,
+    as = NavbarItem,
     className,
     classPrefix = 'navbar-item',
     renderToggle,
@@ -32,7 +33,9 @@ const NavbarDropdownToggle = 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/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/esm/Navbar/NavbarItem.js

@@ -4,8 +4,9 @@ import React, { useCallback, useContext } from 'react';
 import classNames from 'classnames';
 import isNil from 'lodash/isNil';
 import NavContext from "../Nav/NavContext.js";
-import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
+import Ripple from "../internals/Ripple/index.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, shallowEqual } from "../internals/utils/index.js";
 /**
@@ -13,7 +14,7 @@ import { forwardRef, shallowEqual } from "../internals/utils/index.js";
  */
 const NavbarItem = forwardRef((props, ref) => {
   const {
-    as: Component = SafeAnchor,
+    as = SafeAnchor,
     active: activeProp,
     disabled,
     eventKey,
@@ -50,7 +51,8 @@ const NavbarItem = forwardRef((props, ref) => {
       onClick === null || onClick === void 0 || onClick(event);
     }
   }, [disabled, emitSelect, onClick]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     "aria-selected": active || undefined
   }, rest, {

package/esm/Navbar/NavbarMegaMenu.js

@@ -23,14 +23,16 @@ const NavbarMegaMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     withPrefix
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
-  const renderMenu = useCallback((_ref, ref) => {
-    let {
-      onClose
-    } = _ref;
+  const renderMenu = useCallback((menuProps, ref) => {
+    const {
+      onClose,
+      className
+    } = menuProps;
     return /*#__PURE__*/React.createElement(Popover, {
       ref: ref,
       full: true,
-      arrow: false
+      arrow: false,
+      className: className
     }, typeof children === 'function' ? children({
       onClose
     }) : children);

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState } from 'react';
 import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
 import CloseButton from "../internals/CloseButton/index.js";
+import Box from "../internals/Box/index.js";
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
 import { useStyles, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
@@ -17,7 +18,7 @@ const Notification = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Notification', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'notification',
     closable,
     duration = 4500,
@@ -63,7 +64,8 @@ const Notification = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix(type, {
     closable
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "alert"
   }, rest, {
     ref: mergeRefs(targetRef, ref),

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

@@ -7,6 +7,7 @@ import PageTopIcon from '@rsuite/icons/PageTop';
 import PageNextIcon from '@rsuite/icons/PageNext';
 import PageEndIcon from '@rsuite/icons/PageEnd';
 import PaginationButton from "./PaginationButton.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";
@@ -27,7 +28,7 @@ const Pagination = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Pagination', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'pagination',
     disabled: disabledProp,
@@ -184,10 +185,11 @@ const Pagination = forwardRef((props, ref) => {
     });
   };
   const classes = merge(className, withPrefix(size));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
-  }), renderFirst(), renderPrev(), renderPageButtons(), renderNext(), renderLast());
+  }, rest), renderFirst(), renderPrev(), renderPageButtons(), renderNext(), renderLast());
 });
 Pagination.displayName = 'Pagination';
 export default Pagination;

package/esm/Pagination/PaginationGroup.js

@@ -6,6 +6,7 @@ import Pagination from "./Pagination.js";
 import Divider from "../Divider/index.js";
 import Input from "../Input/index.js";
 import LimitPicker from "./LimitPicker.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, tplTransform } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -24,7 +25,7 @@ const defaultLimitOptions = [30, 50, 100];
  */
 const PaginationGroup = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     activePage: activePageProp,
     classPrefix = 'pagination-group',
     className,
@@ -74,7 +75,8 @@ const PaginationGroup = forwardRef((props, ref) => {
     setLimit(value);
     onChangeLimit === null || onChangeLimit === void 0 || onChangeLimit(value);
   });
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: as,
     ref: ref,
     className: classes,
     style: style

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

@@ -4,6 +4,7 @@ import React, { useContext } from 'react';
 import PanelHeader from "./PanelHeader.js";
 import PanelBody from "./PanelBody.js";
 import useExpanded from "./hooks/useExpanded.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -17,7 +18,7 @@ const Panel = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Panel', props);
   const {
-    as: Component = 'div',
+    as,
     bodyFill,
     bodyProps,
     bordered,
@@ -72,11 +73,12 @@ const Panel = forwardRef((props, ref) => {
     bordered,
     shaded
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
     id: idProp
-  }), header && /*#__PURE__*/React.createElement(PanelHeader, {
+  }, rest), header && /*#__PURE__*/React.createElement(PanelHeader, {
     collapsible: collapsible,
     expanded: expanded,
     caretAs: caretAs,

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

@@ -2,8 +2,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Collapse from "../Animation/Collapse.js";
-import { useStyles } from "../internals/hooks/index.js";
 import ScrollView from "../internals/ScrollView/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const PanelBody = props => {
   const {
     classPrefix = 'panel-body',

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

@@ -4,10 +4,11 @@ import React, { isValidElement, cloneElement } from 'react';
 import get from 'lodash/get';
 import Heading from "../Heading/index.js";
 import AccordionButton from "./AccordionButton.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 const PanelHeader = props => {
   const {
-    as: Component = Heading,
+    as = Heading,
     classPrefix = 'panel',
     className,
     children,
@@ -36,7 +37,8 @@ const PanelHeader = props => {
       className
     });
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     level: 2,
     className: merge(className, prefix('header'))
   }, rest), collapsible ? /*#__PURE__*/React.createElement(AccordionButton, {

package/esm/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/esm/PanelGroup/PanelGroup.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 } from "../internals/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -15,7 +16,7 @@ const PanelGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('PanelGroup', props);
   const {
-    as: Component = 'div',
+    as,
     accordion,
     defaultActiveKey,
     bordered,
@@ -44,7 +45,9 @@ const PanelGroup = forwardRef((props, ref) => {
     activeKey,
     onGroupSelect: handleSelect
   }), [accordion, activeKey, handleSelect]);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/React.createElement(PanelGroupContext.Provider, {

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

package/esm/Placeholder/PlaceholderGraph.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
@@ -13,7 +14,7 @@ const PlaceholderGraph = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('PlaceholderGraph', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'placeholder',
     width,
@@ -24,20 +25,19 @@ const PlaceholderGraph = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
+    cssVar,
     withPrefix
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix('graph', {
     active
   }));
-  const styles = {
-    '--rs-placeholder-graph-width': getCssValue(width),
-    '--rs-placeholder-graph-height': getCssValue(height)
-  };
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  const styles = mergeStyles(style, cssVar('graph-width', width, getCssValue), cssVar('graph-height', height, getCssValue));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
-    style: mergeStyles(styles, style)
-  }));
+    style: styles
+  }, rest));
 });
 PlaceholderGraph.displayName = 'PlaceholderGraph';
 export default PlaceholderGraph;

package/esm/Placeholder/PlaceholderGrid.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface PlaceholderGridProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface PlaceholderGridProps extends BoxProps {
     /**
      * The number of rows.
      *

package/esm/Placeholder/PlaceholderGrid.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 { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
@@ -13,7 +14,7 @@ const PlaceholderGrid = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('PlaceholderGrid', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'placeholder',
     rows = 5,
@@ -27,15 +28,13 @@ const PlaceholderGrid = forwardRef((props, ref) => {
   const {
     merge,
     prefix,
+    cssVar,
     withPrefix
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix('grid', {
     active
   }));
-  const styles = {
-    '--rs-placeholder-row-height': getCssValue(rowHeight),
-    '--rs-placeholder-row-spacing': getCssValue(rowSpacing)
-  };
+  const styles = mergeStyles(style, cssVar('row-height', rowHeight, getCssValue), cssVar('row-spacing', rowSpacing, getCssValue));
   const items = useMemo(() => {
     const colItems = [];
     const rowClassName = prefix`row`;
@@ -55,11 +54,12 @@ const PlaceholderGrid = forwardRef((props, ref) => {
     }
     return colItems;
   }, [columns, prefix, rowHeight, rowSpacing, rows]);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
-    style: mergeStyles(styles, style)
-  }), items);
+    style: styles
+  }, rest), items);
 });
 PlaceholderGrid.displayName = 'PlaceholderGrid';
 export default PlaceholderGrid;

package/esm/Placeholder/PlaceholderParagraph.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface PlaceholderParagraphProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface PlaceholderParagraphProps extends BoxProps {
     /**
      * The number of rows.
      * @default 2

package/esm/Placeholder/PlaceholderParagraph.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 { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
@@ -13,7 +14,7 @@ const PlaceholderParagraph = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('PlaceholderParagraph', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'placeholder',
     rows = 3,
@@ -27,13 +28,11 @@ const PlaceholderParagraph = forwardRef((props, ref) => {
   const {
     merge,
     prefix,
+    cssVar,
     withPrefix
   } = useStyles(classPrefix);
   const graphShape = graph === true ? 'square' : graph;
-  const styles = {
-    '--rs-placeholder-row-height': getCssValue(rowHeight),
-    '--rs-placeholder-row-spacing': getCssValue(rowSpacing)
-  };
+  const styles = mergeStyles(style, cssVar('row-height', rowHeight, getCssValue), cssVar('row-spacing', rowSpacing, getCssValue));
   const rowElements = useMemo(() => {
     const rowArr = [];
     for (let i = 0; i < rows; i++) {
@@ -48,11 +47,12 @@ const PlaceholderParagraph = forwardRef((props, ref) => {
     active
   }));
   const graphClasses = prefix('paragraph-graph', `paragraph-graph-${graphShape}`);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
-    style: mergeStyles(styles, style)
-  }), graphShape && /*#__PURE__*/React.createElement("div", {
+    style: styles
+  }, rest), graphShape && /*#__PURE__*/React.createElement("div", {
     className: graphClasses
   }, /*#__PURE__*/React.createElement("span", {
     className: prefix('paragraph-graph-inner')

package/esm/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface PopoverProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface PopoverProps extends BoxProps {
     /** The title of the component. */
     title?: React.ReactNode;
     /** The component is visible by default. */

package/esm/Popover/Popover.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import Heading from "../Heading/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, mergeStyles } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -14,7 +15,7 @@ const Popover = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Popover', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'popover',
     title,
     children,
@@ -36,13 +37,13 @@ const Popover = forwardRef((props, ref) => {
   const styles = useMemo(() => mergeStyles(style, {
     ['--rs-opacity']: visible ? 1 : undefined
   }), [visible, style]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "dialog"
-  }, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    role: "dialog",
     ref: ref,
     className: classes,
     style: styles
-  }), arrow && /*#__PURE__*/React.createElement("div", {
+  }, rest), arrow && /*#__PURE__*/React.createElement("div", {
     className: prefix`arrow`,
     "aria-hidden": true
   }), title && /*#__PURE__*/React.createElement(Heading, {