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

package/cjs/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/cjs/Sidenav/SidenavItem.js

@@ -14,6 +14,7 @@ var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _Whisper = _interopRequireDefault(require("../Whisper"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _Sidenav = require("./Sidenav");
@@ -32,7 +33,7 @@ const SidenavItem = (0, _utils.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.default,
+    as = _SafeAnchor.default,
     active: activeProp,
     classPrefix = 'sidenav-item',
     children,
@@ -99,9 +100,10 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
       }));
 
       // Show tooltip when inside a collapse <Sidenav>
-      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)((0, _utils.mergeRefs)(ref, menuitemRef), triggerRef),
-        disabled: Component === _SafeAnchor.default ? disabled : undefined,
+        disabled: as === _SafeAnchor.default ? disabled : undefined,
         className: classes,
         "data-event-key": eventKey
       }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {
@@ -126,7 +128,8 @@ const SidenavItem = (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,
     className: merge(className, withPrefix({
       active: selected,

package/cjs/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/cjs/Sidenav/SidenavToggle.js

@@ -23,6 +23,7 @@ const SidenavToggle = (0, _utils.forwardRef)((props, ref) => {
     className,
     classPrefix = 'sidenav-toggle',
     onToggle,
+    onClick,
     ...rest
   } = props;
   const expanded = sidenav.expanded;
@@ -33,10 +34,11 @@ const SidenavToggle = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     collapsed: !expanded
   }));
-  const handleToggle = event => {
+  const handleToggle = (0, _hooks.useEventCallback)(event => {
     onToggle === null || onToggle === void 0 || onToggle(!expanded, event);
-  };
-  return /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({}, rest, {
+    onClick === null || onClick === void 0 || onClick(event);
+  });
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({
     ref: ref,
     className: classes,
     icon: /*#__PURE__*/_react.default.createElement(_ArrowLeftLine.default, {
@@ -44,7 +46,7 @@ const SidenavToggle = (0, _utils.forwardRef)((props, ref) => {
     }),
     onClick: handleToggle,
     "aria-label": expanded ? 'Collapse' : 'Expand'
-  }));
+  }, rest));
 });
 SidenavToggle.displayName = 'Sidenav.Toggle';
 var _default = exports.default = SidenavToggle;

package/cjs/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/cjs/Slider/Graduated.js

@@ -4,14 +4,16 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Mark = _interopRequireDefault(require("./Mark"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _utils2 = require("./utils");
 const Graduated = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     step,
     min,
     max,
@@ -19,7 +21,8 @@ const Graduated = (0, _utils.forwardRef)((props, ref) => {
     value,
     classPrefix = 'slider',
     className,
-    renderMark
+    renderMark,
+    ...rest
   } = props;
   const {
     merge,
@@ -60,10 +63,11 @@ const Graduated = (0, _utils.forwardRef)((props, ref) => {
     }) : null));
   }
   const classes = merge(className, prefix('graduator'));
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
-  }, /*#__PURE__*/_react.default.createElement("ol", null, graduatedItems));
+  }, rest), /*#__PURE__*/_react.default.createElement("ol", null, graduatedItems));
 });
 Graduated.displayName = 'Graduated';
 var _default = exports.default = Graduated;

package/cjs/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/cjs/Slider/Handle.js

@@ -9,11 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _useDrag = _interopRequireDefault(require("./useDrag"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 const Handle = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'slider',
     className,
     disabled,
@@ -60,7 +61,8 @@ const Handle = (0, _utils.forwardRef)((props, ref) => {
   const handleClasses = merge(className, prefix('handle'), {
     active
   });
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     role: role,
     tabIndex: tabIndex,
     ref: (0, _utils.mergeRefs)(ref, rootRef),

package/cjs/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/cjs/Slider/Mark.js

@@ -5,11 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 const Mark = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'span',
+    as = 'span',
     mark,
     last,
     classPrefix = 'slider-mark',
@@ -25,7 +26,8 @@ const Mark = (0, _utils.forwardRef)((props, ref) => {
     last
   }));
   if (renderMark) {
-    return /*#__PURE__*/_react.default.createElement(Component, {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, {
+      as: as,
       ref: ref,
       className: classes
     }, /*#__PURE__*/_react.default.createElement("span", {

package/cjs/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/cjs/Slider/ProgressBar.js

@@ -4,19 +4,22 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 const ProgressBar = (0, _utils.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,
@@ -30,12 +33,13 @@ const ProgressBar = (0, _utils.forwardRef)((props, ref) => {
     [sizeKey]: `${end - start}%`
   });
   const classes = merge(className, withPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     style: styles,
     className: classes,
     "data-testid": "slider-progress-bar"
-  });
+  }, rest));
 });
 ProgressBar.displayName = 'ProgressBar';
 var _default = exports.default = ProgressBar;

package/cjs/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/cjs/Slider/Slider.js

@@ -13,6 +13,7 @@ var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 var _Handle = _interopRequireDefault(require("./Handle"));
 var _Graduated = _interopRequireDefault(require("./Graduated"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
@@ -32,7 +33,7 @@ const Slider = (0, _utils.forwardRef)((props, ref) => {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-valuetext': ariaValuetext,
-    as: Componnet = 'div',
+    as,
     graduated,
     className,
     barClassName,
@@ -180,11 +181,12 @@ const Slider = (0, _utils.forwardRef)((props, ref) => {
       placeholder: placeholder
     }, value);
   }
-  return /*#__PURE__*/_react.default.createElement(Componnet, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
-    className: classes,
-    role: "presentation"
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    role: "presentation",
+    className: classes
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
     ref: barRef,
     className: merge(barClassName, prefix('bar')),
     onClick: handleClickBar,

package/cjs/Stack/Stack.js

@@ -52,7 +52,6 @@ const Stack = (0, _utils.forwardRef)((props, ref) => {
   const filteredChildren = _react.default.Children.toArray(children);
   const childCount = filteredChildren.length;
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
-    display: "flex",
     as: as,
     ref: ref,
     className: classes,

package/cjs/Stack/StackItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
-export interface StackItemProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface StackItemProps extends BoxProps {
     alignSelf?: React.CSSProperties['alignSelf'];
     flex?: React.CSSProperties['flex'];
     grow?: React.CSSProperties['flexGrow'];

package/cjs/Stack/StackItem.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 /**
@@ -15,7 +16,7 @@ var _hooks = require("../internals/hooks");
  */
 const StackItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'stack-item',
     style,
     className,
@@ -34,7 +35,8 @@ const StackItem = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
   const styles = (0, _utils.mergeStyles)(style, cssVar('align-self', alignSelf), cssVar('order', order), cssVar('flex', flex), cssVar('grow', grow), cssVar('shrink', shrink), cssVar('basis', basis));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

package/cjs/Stat/Stat.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface StatProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface StatProps extends BoxProps {
     /**
      * Add a border to the component.
      */
@@ -14,13 +14,7 @@ declare const Stat: import("../internals/types").InternalRefForwardingComponent<
     Label: import("../internals/types").InternalRefForwardingComponent<"dt", import("./StatLabel").StatLabelProps, never> & Record<string, never>;
     Value: import("../internals/types").InternalRefForwardingComponent<"dd", import("./StatValue").StatValueProps, never> & Record<string, never>;
     Trend: import("../internals/types").InternalRefForwardingComponent<"dd", import("./StatTrend").StatTrendProps, never> & Record<string, never>;
-    ValueUnit: import("../internals/types").InternalRefForwardingComponent<"span", Partial<{
-        name: string;
-        componentAs: "span";
-    }>, never> & Record<string, never>;
-    HelpText: import("../internals/types").InternalRefForwardingComponent<"span", Partial<{
-        name: string;
-        componentAs: "span";
-    }>, never> & Record<string, never>;
+    ValueUnit: import("../internals/types").InternalRefForwardingComponent<"span", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    HelpText: import("../internals/types").InternalRefForwardingComponent<"span", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
 };
 export default Stat;

package/cjs/Stat/Stat.js

@@ -11,6 +11,7 @@ var _StatValue = _interopRequireDefault(require("./StatValue"));
 var _StatValueUnit = _interopRequireDefault(require("./StatValueUnit"));
 var _StatHelpText = _interopRequireDefault(require("./StatHelpText"));
 var _StatTrend = _interopRequireDefault(require("./StatTrend"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -26,7 +27,7 @@ const Stat = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Stat', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'stat',
     className,
     children,
@@ -42,7 +43,8 @@ const Stat = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     bordered
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     className: classes,
     ref: ref
   }, rest), icon && /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Stat/StatHelpText.d.ts

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

package/cjs/Stat/StatLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface StatLabelProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface StatLabelProps extends BoxProps {
     /**
      * The info tip of the label
      */

package/cjs/Stat/StatLabel.js

@@ -10,11 +10,12 @@ var _InfoOutline = _interopRequireDefault(require("@rsuite/icons/InfoOutline"));
 var _Whisper = _interopRequireDefault(require("../Whisper"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 const StatLabel = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'dt',
+    as = 'dt',
     classPrefix = 'stat-label',
     className,
     children,
@@ -29,7 +30,8 @@ const StatLabel = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     uppercase
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
   }, rest), children, info && /*#__PURE__*/_react.default.createElement(_Whisper.default, {

package/cjs/Stat/StatTrend.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface StatTrendProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface StatTrendProps extends BoxProps {
     indicator?: 'up' | 'down';
     appearance?: 'default' | 'subtle';
 }

package/cjs/Stat/StatTrend.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 const svgProps = {
@@ -35,7 +36,7 @@ const ArrowDown = props => {
 };
 const StatTrend = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'span',
+    as = 'span',
     appearance = 'default',
     classPrefix = 'stat-trend',
     indicator = 'up',
@@ -50,7 +51,8 @@ const StatTrend = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix(appearance, indicator));
   const IndicatorIcon = indicator === 'up' ? ArrowUp : ArrowDown;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
   }, rest), children, /*#__PURE__*/_react.default.createElement(IndicatorIcon, {

package/cjs/Stat/StatValue.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface StatValueProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface StatValueProps extends BoxProps {
     value?: number;
     formatOptions?: Intl.NumberFormatOptions;
 }

package/cjs/Stat/StatValue.js

@@ -6,12 +6,13 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 const StatValue = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'dd',
+    as = 'dd',
     classPrefix = 'stat-value',
     className,
     children,
@@ -24,7 +25,8 @@ const StatValue = (0, _utils.forwardRef)((props, ref) => {
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
   }, rest), value && /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedNumber, {

package/cjs/Stat/StatValueUnit.d.ts

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

package/cjs/StatGroup/StatGroup.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface StatGroupProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface StatGroupProps extends BoxProps {
     /**
      * The number of columns in the group
      */

package/cjs/StatGroup/StatGroup.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -14,7 +15,7 @@ const StatGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('StatGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'stat-group',
     className,
     children,
@@ -30,7 +31,8 @@ const StatGroup = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
   const styles = (0, _utils.mergeStyles)(style, cssVar('columns', columns), cssVar('spacing', spacing, _utils.getCssValue));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

package/cjs/Steps/Steps.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface StepsProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface StepsProps extends BoxProps {
     /** Vertical display */
     vertical?: boolean;
     /** Small size Step Bar */

package/cjs/Steps/Steps.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _StepItem = _interopRequireDefault(require("./StepItem"));
+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 Steps = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Steps', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'steps',
     className,
     children,
@@ -72,10 +73,11 @@ const Steps = (0, _utils.forwardRef)((props, ref) => {
     }
     return itemProps;
   });
-  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
-  }), items);
+  }, rest), items);
 }, Subcomponents);
 Steps.displayName = 'Steps';
 var _default = exports.default = Steps;

package/cjs/Tabs/TabPanel.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface TabPanelProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface TabPanelProps extends BoxProps {
     /** The active state of the tab. */
     active?: boolean;
     /** The HTML id attribute, which should be unique. */