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

package/esm/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -8,6 +8,7 @@ import Ripple from "../internals/Ripple/index.js";
 import Disclosure from "../internals/Disclosure/Disclosure.js";
 import ArrowLeftLine from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLine from '@rsuite/icons/ArrowRightLine';
+import Box from "../internals/Box/index.js";
 import { forwardRef, createChainedFunction } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { SidenavContext } from "./Sidenav.js";
@@ -22,7 +23,7 @@ const ExpandedSidenavDropdownMenu = forwardRef((props, ref) => {
     throw new Error('<SidenavDropdownMenu> component is not supposed to be used standalone. Use <Nav.Menu> inside <Sidenav> instead.');
   }
   const {
-    as: Component = 'li',
+    as = 'li',
     children,
     disabled,
     className,
@@ -71,13 +72,13 @@ const ExpandedSidenavDropdownMenu = forwardRef((props, ref) => {
       disabled
     }));
     const iconClasses = merge(className, prefix('toggle-icon'), prefix(`${open ? 'expand' : 'collapse'}-icon`));
-    return /*#__PURE__*/React.createElement(Component, _extends({
-      ref: ref
-    }, rest, {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
+      ref: ref,
       tabIndex: disabled ? -1 : tabIndex,
       style: style,
       className: classes
-    }, menuitemEventHandlers), /*#__PURE__*/React.createElement(Disclosure.Button, null, buttonProps => {
+    }, rest, menuitemEventHandlers), /*#__PURE__*/React.createElement(Disclosure.Button, null, buttonProps => {
       return /*#__PURE__*/React.createElement("button", _extends({
         className: prefix`toggle`,
         onClick: handleClick

package/esm/Sidenav/Sidenav.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface SidenavProps<T = string | number> extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface SidenavProps<T = string | number> extends BoxProps {
     /** Whether to expand the Sidenav */
     expanded?: boolean;
     /** Menu style */
@@ -42,18 +42,10 @@ export interface SidenavContextType<T = string | number> {
  * @see https://rsuitejs.com/components/sidenav/
  */
 declare const Sidenav: import("../internals/types").InternalRefForwardingComponent<"div", SidenavProps<string | number>, never> & {
-    Header: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
-    Body: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
-    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
-    GroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
+    Header: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    Body: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    GroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
     Toggle: import("../internals/types").InternalRefForwardingComponent<"div", import("./SidenavToggle").SidenavToggleProps, never> & Record<string, never>;
 };
 export default Sidenav;

package/esm/Sidenav/Sidenav.js

@@ -8,6 +8,7 @@ import SidenavHeader from "./SidenavHeader.js";
 import SidenavFooter from "./SidenavFooter.js";
 import SidenavToggle from "./SidenavToggle.js";
 import SidenavGroupLabel from "./SidenavGroupLabel.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, mergeRefs, shallowEqual } from "../internals/utils/index.js";
 import { useStyles, useControlled } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -30,7 +31,7 @@ const Sidenav = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Sidenav', props);
   const {
-    as: Component = 'nav',
+    as = 'nav',
     className,
     classPrefix = 'sidenav',
     appearance = 'default',
@@ -82,7 +83,9 @@ const Sidenav = forwardRef((props, ref) => {
       className,
       ...transitionRest
     } = transitionProps;
-    return /*#__PURE__*/React.createElement(Component, _extends({}, rest, transitionRest, {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as
+    }, rest, transitionRest, {
       ref: mergeRefs(ref, transitionRef),
       className: merge(classes, className)
     }));

package/esm/Sidenav/SidenavBody.d.ts

@@ -5,7 +5,5 @@ export type SidenavBodyProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/sidenav
  */
-declare const SidenavBody: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const SidenavBody: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default SidenavBody;

package/esm/Sidenav/SidenavDropdown.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { PlacementCorners, WithAsProps, SanitizedHTMListProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners, SanitizedHTMListProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
 export type SidenavDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface SidenavDropdownProps<T = any> extends WithAsProps, SanitizedHTMListProps {
+export interface SidenavDropdownProps<T = any> extends BoxProps, SanitizedHTMListProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */
@@ -28,12 +29,8 @@ export interface SidenavDropdownProps<T = any> extends WithAsProps, SanitizedHTM
      * @deprecated
      */
     open?: boolean;
-    /**
-     * @deprecated
-     */
-    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/Sidenav/SidenavDropdown.js

@@ -10,6 +10,7 @@ import ExpandedSidenavDropdown from "./ExpandedSidenavDropdown.js";
 import NavContext from "../Nav/NavContext.js";
 import NavDropdownItem from "../Nav/NavDropdownItem.js";
 import NavDropdownMenu from "../Nav/NavDropdownMenu.js";
+import Box from "../internals/Box/index.js";
 import { NavMenuContext } from "../Nav/NavMenu.js";
 import { forwardRef, mergeRefs, kebabPlace } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
@@ -38,11 +39,8 @@ const SidenavDropdown = forwardRef((props, ref) => {
     throw new Error('<Sidenav.Dropdown> must be rendered within a <Nav> component within a <Sidenav> component.');
   }
   const {
-    as: Component = 'div',
+    as,
     title,
-    onClose,
-    onOpen,
-    onToggle,
     eventKey,
     trigger = 'click',
     placement = 'bottomStart',
@@ -54,6 +52,9 @@ const SidenavDropdown = forwardRef((props, ref) => {
     children,
     menuStyle,
     style,
+    onClose,
+    onOpen,
+    onToggle,
     ...toggleProps
   } = props;
   const {
@@ -153,7 +154,8 @@ const SidenavDropdown = forwardRef((props, ref) => {
       open,
       submenu: true
     }));
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
       ref: mergeRefs(ref, menuContainerRef),
       className: classes,
       style: style,

package/esm/Sidenav/SidenavDropdownCollapse.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { StandardProps } from '../internals/types';
-export interface SidenavDropdownCollapseProps extends StandardProps {
+import { BoxProps } from '../internals/Box';
+export interface SidenavDropdownCollapseProps extends BoxProps {
     open?: boolean;
 }
 declare const SidenavDropdownCollapse: React.ForwardRefExoticComponent<SidenavDropdownCollapseProps & React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<unknown>>;

package/esm/Sidenav/SidenavDropdownCollapse.js

@@ -3,10 +3,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import classNames from 'classnames';
 import Collapse from "../Animation/Collapse.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
 const SidenavDropdownCollapse = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
+    as = 'ul',
     className,
     classPrefix = 'dropdown-menu',
     open,
@@ -29,7 +31,8 @@ const SidenavDropdownCollapse = /*#__PURE__*/React.forwardRef((props, ref) => {
       className: transitionClassName,
       ...transitionRestProps
     } = transitionProps;
-    return /*#__PURE__*/React.createElement("ul", _extends({
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
       ref: mergeRefs(ref, transitionRef),
       role: "group",
       className: classNames(classes, transitionClassName)

package/esm/Sidenav/SidenavDropdownItem.d.ts

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

package/esm/Sidenav/SidenavDropdownItem.js

@@ -29,17 +29,17 @@ const SidenavDropdownItem = forwardRef((props, ref) => {
     throw new Error('<Sidenav.Dropdown.Item> must be used within a <Nav> within a <Sidenav> component.');
   }
   const {
+    as = 'li',
+    active: activeProp,
     classPrefix = 'dropdown-item',
     className,
-    active: activeProp,
+    children,
+    divider,
+    disabled,
     eventKey,
-    onSelect,
     icon,
-    as: Component = 'li',
-    divider,
     panel,
-    children,
-    disabled,
+    onSelect,
     ...restProps
   } = props;
   const {
@@ -53,7 +53,7 @@ const SidenavDropdownItem = forwardRef((props, ref) => {
     (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 || _nav$onSelect.call(nav, eventKey, event);
   }, [onSelect, eventKey, nav]);
   const selected = activeProp || !isNil(eventKey) && shallowEqual(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey);
-  const renderDropdownItem = useRenderMenuItem(Component);
+  const renderDropdownItem = useRenderMenuItem(as);
   if (sidenav.expanded) {
     return /*#__PURE__*/React.createElement(ExpandedSidenavDropdownItem, _extends({
       ref: ref

package/esm/Sidenav/SidenavFooter.d.ts

@@ -5,7 +5,5 @@ export type SidenavFooterProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/sidenav
  */
-declare const SidenavFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const SidenavFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default SidenavFooter;

package/esm/Sidenav/SidenavGroupLabel.d.ts

@@ -5,7 +5,5 @@ export type SidenavGroupLabelProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/sidenav
  */
-declare const SidenavGroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const SidenavGroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default SidenavGroupLabel;

package/esm/Sidenav/SidenavHeader.d.ts

@@ -5,7 +5,5 @@ export type SidenavHeaderProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/sidenav
  */
-declare const SidenavHeader: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const SidenavHeader: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default SidenavHeader;

package/esm/Sidenav/SidenavItem.d.ts

@@ -1,10 +1,11 @@
 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';
 /**
  * Props of SidenavItem component
  */
-export interface SidenavItemProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
+export interface SidenavItemProps<T = any> extends BoxProps, HTMLPropsWithoutSelect {
     /**
      * Whether the item is activated
      */

package/esm/Sidenav/SidenavItem.js

@@ -9,6 +9,7 @@ import MenuItem from "../internals/Menu/MenuItem.js";
 import omit from 'lodash/omit';
 import Whisper from "../Whisper/index.js";
 import Tooltip from "../Tooltip/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, shallowEqual, mergeRefs, createChainedFunction } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { SidenavContext } from "./Sidenav.js";
@@ -26,7 +27,7 @@ const SidenavItem = forwardRef((props, ref) => {
     throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
   }
   const {
-    as: Component = SafeAnchor,
+    as = SafeAnchor,
     active: activeProp,
     classPrefix = 'sidenav-item',
     children,
@@ -93,9 +94,10 @@ const SidenavItem = forwardRef((props, ref) => {
       }));
 
       // Show tooltip when inside a collapse <Sidenav>
-      return /*#__PURE__*/React.createElement(Component, _extends({
+      return /*#__PURE__*/React.createElement(Box, _extends({
+        as: as,
         ref: mergeRefs(mergeRefs(ref, menuitemRef), triggerRef),
-        disabled: Component === SafeAnchor ? disabled : undefined,
+        disabled: as === SafeAnchor ? disabled : undefined,
         className: classes,
         "data-event-key": eventKey
       }, omit(rest, ['divider', 'panel']), triggerProps, menuitem, {
@@ -120,7 +122,8 @@ const SidenavItem = 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,
     className: merge(className, withPrefix({
       active: selected,

package/esm/Sidenav/SidenavToggle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface SidenavToggleProps extends WithAsProps {
+import { IconButtonProps } from '../IconButton';
+export interface SidenavToggleProps extends IconButtonProps {
     /** Callback function for menu state switching */
     onToggle?: (expanded: boolean, event: React.MouseEvent) => void;
 }

package/esm/Sidenav/SidenavToggle.js

@@ -5,7 +5,7 @@ import ArrowLeftLineIcon from '@rsuite/icons/ArrowLeftLine';
 import IconButton from "../IconButton/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { SidenavContext } from "./Sidenav.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 const SidenavToggle = forwardRef((props, ref) => {
   const sidenav = useContext(SidenavContext);
   if (!sidenav) {
@@ -16,6 +16,7 @@ const SidenavToggle = forwardRef((props, ref) => {
     className,
     classPrefix = 'sidenav-toggle',
     onToggle,
+    onClick,
     ...rest
   } = props;
   const expanded = sidenav.expanded;
@@ -26,10 +27,11 @@ const SidenavToggle = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix({
     collapsed: !expanded
   }));
-  const handleToggle = event => {
+  const handleToggle = useEventCallback(event => {
     onToggle === null || onToggle === void 0 || onToggle(!expanded, event);
-  };
-  return /*#__PURE__*/React.createElement(IconButton, _extends({}, rest, {
+    onClick === null || onClick === void 0 || onClick(event);
+  });
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
     ref: ref,
     className: classes,
     icon: /*#__PURE__*/React.createElement(ArrowLeftLineIcon, {
@@ -37,7 +39,7 @@ const SidenavToggle = forwardRef((props, ref) => {
     }),
     onClick: handleToggle,
     "aria-label": expanded ? 'Collapse' : 'Expand'
-  }));
+  }, rest));
 });
 SidenavToggle.displayName = 'Sidenav.Toggle';
 export default SidenavToggle;

package/esm/Slider/Graduated.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface GraduatedProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface GraduatedProps extends BoxProps {
     step: number;
     min: number;
     max: number;

package/esm/Slider/Graduated.js

@@ -1,12 +1,14 @@
 'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Mark from "./Mark.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { precisionMath } from "./utils.js";
 const Graduated = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     step,
     min,
     max,
@@ -14,7 +16,8 @@ const Graduated = forwardRef((props, ref) => {
     value,
     classPrefix = 'slider',
     className,
-    renderMark
+    renderMark,
+    ...rest
   } = props;
   const {
     merge,
@@ -55,10 +58,11 @@ const Graduated = forwardRef((props, ref) => {
     }) : null));
   }
   const classes = merge(className, prefix('graduator'));
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
-  }, /*#__PURE__*/React.createElement("ol", null, graduatedItems));
+  }, rest), /*#__PURE__*/React.createElement("ol", null, graduatedItems));
 });
 Graduated.displayName = 'Graduated';
 export default Graduated;

package/esm/Slider/Handle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface HandleProps extends WithAsProps, React.HTMLAttributes<HTMLDivElement> {
+import { BoxProps } from '../internals/Box';
+export interface HandleProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     vertical?: boolean;
     tooltip?: boolean;

package/esm/Slider/Handle.js

@@ -4,11 +4,12 @@ import React from 'react';
 import Tooltip from "../Tooltip/index.js";
 import Input from "./Input.js";
 import useDrag from "./useDrag.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, mergeRefs, mergeStyles } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 const Handle = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'slider',
     className,
     disabled,
@@ -55,7 +56,8 @@ const Handle = forwardRef((props, ref) => {
   const handleClasses = merge(className, prefix('handle'), {
     active
   });
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: as,
     role: role,
     tabIndex: tabIndex,
     ref: mergeRefs(ref, rootRef),

package/esm/Slider/Mark.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface MarkProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface MarkProps extends BoxProps {
     mark: number;
     last?: boolean;
     renderMark?: (mark: number) => React.ReactNode;

package/esm/Slider/Mark.js

@@ -1,10 +1,11 @@
 'use client';
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 const Mark = forwardRef((props, ref) => {
   const {
-    as: Component = 'span',
+    as = 'span',
     mark,
     last,
     classPrefix = 'slider-mark',
@@ -20,7 +21,8 @@ const Mark = forwardRef((props, ref) => {
     last
   }));
   if (renderMark) {
-    return /*#__PURE__*/React.createElement(Component, {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: as,
       ref: ref,
       className: classes
     }, /*#__PURE__*/React.createElement("span", {

package/esm/Slider/ProgressBar.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-interface ProgressBarProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+interface ProgressBarProps extends BoxProps {
     vertical?: boolean;
     rtl?: boolean;
     start?: number;

package/esm/Slider/ProgressBar.js

@@ -1,17 +1,20 @@
 '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 ProgressBar = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'slider-progress-bar',
     vertical,
     rtl,
     end = 0,
     start = 0,
     style,
-    className
+    className,
+    ...rest
   } = props;
   const {
     merge,
@@ -25,12 +28,13 @@ const ProgressBar = forwardRef((props, ref) => {
     [sizeKey]: `${end - start}%`
   });
   const classes = merge(className, withPrefix());
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     style: styles,
     className: classes,
     "data-testid": "slider-progress-bar"
-  });
+  }, rest));
 });
 ProgressBar.displayName = 'ProgressBar';
 export default ProgressBar;

package/esm/Slider/Slider.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import type { WithAsProps, FormControlBaseProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { FormControlBaseProps } from '../internals/types';
 export interface LocaleType {
     placeholder?: string;
     searchPlaceholder?: string;
     noResultsText?: string;
     loading?: string;
 }
-export interface SliderProps<T = number> extends WithAsProps, FormControlBaseProps<T> {
+export interface SliderProps<T = number> extends BoxProps, FormControlBaseProps<T> {
     /**
      * The label of the slider.
      */

package/esm/Slider/Slider.js

@@ -8,6 +8,7 @@ import ProgressBar from "./ProgressBar.js";
 import Handle from "./Handle.js";
 import Graduated from "./Graduated.js";
 import Plaintext from "../internals/Plaintext/index.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef } from "../internals/utils/index.js";
@@ -25,7 +26,7 @@ const Slider = forwardRef((props, ref) => {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-valuetext': ariaValuetext,
-    as: Componnet = 'div',
+    as,
     graduated,
     className,
     barClassName,
@@ -173,11 +174,12 @@ const Slider = forwardRef((props, ref) => {
       placeholder: placeholder
     }, value);
   }
-  return /*#__PURE__*/React.createElement(Componnet, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
-    className: classes,
-    role: "presentation"
-  }), /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: classes
+  }, rest), /*#__PURE__*/React.createElement("div", {
     ref: barRef,
     className: merge(barClassName, prefix('bar')),
     onClick: handleClickBar,

package/esm/Stack/Stack.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties } from 'react';
-import type { WithAsProps, ResponsiveValue } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { ResponsiveValue } from '../internals/types';
 interface DeprecatedStackProps {
     /**
      * Define the alignment of the children in the stack on the inline axis
@@ -12,7 +13,7 @@ interface DeprecatedStackProps {
      */
     alignItems?: CSSProperties['alignItems'];
 }
-export interface StackProps extends WithAsProps, DeprecatedStackProps {
+export interface StackProps extends BoxProps, DeprecatedStackProps {
     /** Define the alignment of the children in the stack on the cross axis */
     align?: CSSProperties['alignItems'];
     /** The direction of the children in the stack */

package/esm/Stack/Stack.js

@@ -47,7 +47,6 @@ const Stack = forwardRef((props, ref) => {
   const filteredChildren = React.Children.toArray(children);
   const childCount = filteredChildren.length;
   return /*#__PURE__*/React.createElement(Box, _extends({
-    display: "flex",
     as: as,
     ref: ref,
     className: classes,