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

package/Tabs/styles/index.css

@@ -21,9 +21,10 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/TagInput/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/TagPicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Text/styles/index.css

@@ -13,16 +13,6 @@
 }
 :root {
   --rs-font-family-base: -apple-system, BlinkMacSystemFont, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
-  --rs-font-size-xs: 0.75rem;
-  --rs-font-size-sm: 0.875rem;
-  --rs-font-size-md: 1rem;
-  --rs-font-size-lg: 1.125rem;
-  --rs-font-size-xl: 1.25rem;
-  --rs-font-size-2xl: 1.5rem;
-  --rs-font-size-3xl: 1.875rem;
-  --rs-font-size-4xl: 2.25rem;
-  --rs-font-size-5xl: 3rem;
-  --rs-font-size-6xl: 3.75rem;
   --rs-text-line-height-xs: calc(1 / 0.75);
   --rs-text-line-height-sm: calc(1.25 / 0.875);
   --rs-text-line-height-md: calc(1.5 / 1);
@@ -105,8 +95,9 @@
   font-family: var(--rs-font-family-base);
   margin: 0;
   color: var(--rs-text-color, var(--rs-text-primary));
-  font-size: var(--rs-text-font-size);
+  font-size: var(--rs-font-size);
   line-height: var(--rs-text-line-height, 1.42857143);
+  line-clamp: var(--rs-text-max-lines);
 }
 blockquote.rs-text {
   font-style: italic;
@@ -222,43 +213,33 @@ kbd.rs-text {
 .rs-text-violet {
   --rs-text-color: var(--rs-violet-500);
 }
-.rs-text-xs {
-  --rs-text-font-size: var(--rs-font-size-xs);
+.rs-text:where([style*='size-xs']) {
   --rs-text-line-height: var(--rs-text-line-height-xs);
 }
-.rs-text-sm {
-  --rs-text-font-size: var(--rs-font-size-sm);
+.rs-text:where([style*='size-sm']) {
   --rs-text-line-height: var(--rs-text-line-height-sm);
 }
-.rs-text-md {
-  --rs-text-font-size: var(--rs-font-size-md);
+.rs-text:where([style*='size-md']) {
   --rs-text-line-height: var(--rs-text-line-height-md);
 }
-.rs-text-lg {
-  --rs-text-font-size: var(--rs-font-size-lg);
+.rs-text:where([style*='size-lg']) {
   --rs-text-line-height: var(--rs-text-line-height-lg);
 }
-.rs-text-xl {
-  --rs-text-font-size: var(--rs-font-size-xl);
+.rs-text:where([style*='size-xl']) {
   --rs-text-line-height: var(--rs-text-line-height-xl);
 }
-.rs-text-2xl {
-  --rs-text-font-size: var(--rs-font-size-2xl);
+.rs-text:where([style*='size-2xl']) {
   --rs-text-line-height: var(--rs-text-line-height-2xl);
 }
-.rs-text-3xl {
-  --rs-text-font-size: var(--rs-font-size-3xl);
+.rs-text:where([style*='size-3xl']) {
   --rs-text-line-height: var(--rs-text-line-height-3xl);
 }
-.rs-text-4xl {
-  --rs-text-font-size: var(--rs-font-size-4xl);
+.rs-text:where([style*='size-4xl']) {
   --rs-text-line-height: var(--rs-text-line-height-4xl);
 }
-.rs-text-5xl {
-  --rs-text-font-size: var(--rs-font-size-5xl);
+.rs-text:where([style*='size-5xl']) {
   --rs-text-line-height: var(--rs-text-line-height-5xl);
 }
-.rs-text-6xl {
-  --rs-text-font-size: var(--rs-font-size-6xl);
+.rs-text:where([style*='size-6xl']) {
   --rs-text-line-height: var(--rs-text-line-height-6xl);
 }

package/Text/styles/index.less

@@ -8,6 +8,10 @@
 .rs-text {
   font-family: var(--rs-font-family-base);
   margin: 0;
+  color: var(--rs-text-color, var(--rs-text-primary));
+  font-size: var(--rs-font-size);
+  line-height: var(--rs-text-line-height, @line-height-base);
+  line-clamp: var(--rs-text-max-lines);
 
   blockquote& {
     font-style: italic;
@@ -108,17 +112,11 @@
     }
   });
 
-  color: var(--rs-text-color, var(--rs-text-primary));
-
   // Size variants
   @sizes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl;
   each(@sizes, .(@size) {
-    &-@{size} {
-      --rs-text-font-size: var(~'--rs-font-size-@{size}');
+    &:where([style*='size-@{size}']) {
       --rs-text-line-height: var(~'--rs-text-line-height-@{size}');
     }
   });
-
-  font-size: var(--rs-text-font-size);
-  line-height: var(--rs-text-line-height, @line-height-base);
 }

package/TimePicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/TimeRangePicker/styles/index.css

@@ -20,8 +20,9 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {

package/Tree/styles/indent-line.less

@@ -2,7 +2,7 @@
   border-left: 1px solid var(--rs-tree-indent-line-color);
   position: absolute;
   width: 1px;
-  top: -10px;
+  top: -4px;
   inset-inline-start: 12px;
   bottom: -4px;
 }

package/Tree/styles/index.css

@@ -21,9 +21,10 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {
@@ -2101,7 +2102,7 @@ textarea.rs-input {
   border-left: 1px solid var(--rs-tree-indent-line-color);
   position: absolute;
   width: 1px;
-  top: -10px;
+  top: -4px;
   inset-inline-start: 12px;
   bottom: -4px;
 }

package/TreePicker/styles/index.css

@@ -21,9 +21,10 @@
   --rs-radius-sm: 0.25rem;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
+  --rs-shadow-color: rgba(0, 0, 0, 0.1);
   --rs-shadow-none: 0 0 #0000;
-  --rs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-  --rs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --rs-shadow-sm: 0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color);
+  --rs-shadow-md: 0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color);
 }
 :root,
 .rs-theme-light {
@@ -2101,7 +2102,7 @@ textarea.rs-input {
   border-left: 1px solid var(--rs-tree-indent-line-color);
   position: absolute;
   width: 1px;
-  top: -10px;
+  top: -4px;
   inset-inline-start: 12px;
   bottom: -4px;
 }

package/cjs/Affix/Affix.d.ts

@@ -1,5 +1,6 @@
-import { Offset, WithAsProps } from '../internals/types';
-export interface AffixProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Offset } from '../internals/types';
+export interface AffixProps extends BoxProps {
     /** Specify the container. */
     container?: HTMLElement | (() => HTMLElement);
     /** Distance from top */

package/cjs/Affix/Affix.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -106,7 +107,7 @@ const Affix = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Affix', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'affix',
     className,
     children,
@@ -145,7 +146,9 @@ const Affix = (0, _utils.forwardRef)((props, ref) => {
     zIndex: 10
   };
   const affixStyles = fixed ? fixedStyles : undefined;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: (0, _utils.mergeRefs)(mountRef, ref)
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: classes,

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { FormControlPickerProps, WithAsProps, Placement, Option, Size, ListboxProps, PopupProps } from '../internals/types';
-export interface AutoCompleteProps<T = string> extends WithAsProps, FormControlPickerProps<T, any, Option | string>, ListboxProps, PopupProps {
+import { BoxProps } from '../internals/Box';
+import type { FormControlPickerProps, Placement, Option, Size, ListboxProps, PopupProps } from '../internals/types';
+export interface AutoCompleteProps<T = string> extends BoxProps, FormControlPickerProps<T, any, Option | string>, ListboxProps, PopupProps {
     /** The placement of component */
     placement?: Placement;
     /** When set to false, the Enter key selection function is invalid */

package/cjs/AutoComplete/AutoComplete.js

@@ -10,6 +10,7 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _Combobox = _interopRequireDefault(require("./Combobox"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _Picker = require("../internals/Picker");
@@ -29,7 +30,7 @@ const AutoComplete = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('AutoComplete', props);
   const {
-    as: Component = 'div',
+    as,
     disabled,
     className,
     placement = 'bottomStart',
@@ -193,7 +194,8 @@ const AutoComplete = (0, _utils.forwardRef)((props, ref) => {
     trigger: ['click', 'focus'],
     open: expanded,
     speaker: renderPopup
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     className: classes,
     style: style,
     ref: root

package/cjs/Avatar/Avatar.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react';
-import type { WithAsProps, ColorScheme, Size } from '../internals/types';
-export interface AvatarProps extends WithAsProps {
+import type { BoxProps } from '../internals/Box';
+import type { ColorScheme, Size } from '../internals/types';
+export interface AvatarProps extends BoxProps {
     /**
      * A avatar can have different sizes.
      *

package/cjs/AvatarGroup/AvatarGroup.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Size } from '../internals/types';
-export interface AvatarGroupProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface AvatarGroupProps extends BoxProps {
     /**
      * Render all avatars as stacks
      */

package/cjs/AvatarGroup/AvatarGroup.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = exports.AvatarGroupContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -22,7 +23,7 @@ const AvatarGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('AvatarGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'avatar-group',
     spacing,
     className,
@@ -44,7 +45,8 @@ const AvatarGroup = (0, _utils.forwardRef)((props, ref) => {
     size
   }), [size]);
   const styles = (0, _utils.mergeStyles)(style, 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,
     role: "group"
   }, rest, {
     ref: ref,

package/cjs/Badge/Badge.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Color, WithAsProps, PlacementCorners } from '../internals/types';
-export interface BadgeProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Color, PlacementCorners } from '../internals/types';
+export interface BadgeProps extends BoxProps {
     /**
      * The content of the badge
      */

package/cjs/Badge/Badge.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
@@ -21,7 +22,7 @@ const Badge = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Badge', props);
   const {
-    as: Component = 'div',
+    as,
     content,
     color,
     className,
@@ -58,13 +59,15 @@ const Badge = (0, _utils.forwardRef)((props, ref) => {
   }));
   const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createOffsetStyles)(offset, '--rs-badge-offset'), (0, _utils.createColorVariables)(color, '--rs-badge-bg')), [style, offset, color]);
   if (!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: classes,
       style: styles
     }, rest), text);
   }
-  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/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { BoxProps } from '../internals/Box';
 import type { BreadcrumbLocale } from '../locales';
-import type { WithAsProps } from '../internals/types';
-export interface BreadcrumbProps extends WithAsProps {
+export interface BreadcrumbProps extends BoxProps {
     /**
      * The separator between each breadcrumb item.
      */

package/cjs/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
-export interface BreadcrumbItemProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface BreadcrumbItemProps extends BoxProps {
     /**
      * The wrapper element of the BreadcrumbItem.
      */

package/cjs/Breadcrumb/BreadcrumbItem.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
+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 BreadcrumbItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    wrapperAs: WrapperComponent = 'li',
+    wrapperAs = 'li',
     href,
     as: Component = href ? _SafeAnchor.default : 'span',
     classPrefix = 'breadcrumb-item',
@@ -36,7 +37,8 @@ const BreadcrumbItem = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     active
   }));
-  return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: wrapperAs,
     style: style,
     className: classes,
     ref: ref

package/cjs/Button/Button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Color, Size, AppearanceType, WithAsProps } from '../internals/types';
-export interface ButtonProps extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
+import { BoxProps } from '../internals/Box';
+import { Color, Size, AppearanceType } from '../internals/types';
+export interface ButtonProps extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
     /** A button can have different appearances. */
     appearance?: AppearanceType;
     /** A button can show it is currently the active user selection */

package/cjs/Button/Button.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 var _ButtonGroup = require("../ButtonGroup");
 var _utils = require("../internals/utils");
@@ -19,6 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @see https://rsuitejs.com/components/button
  */
 const Button = (0, _utils.forwardRef)((props, ref) => {
+  var _rest$role;
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Button', props);
@@ -75,20 +77,12 @@ const Button = (0, _utils.forwardRef)((props, ref) => {
     }
     onClick === null || onClick === void 0 || onClick(event);
   });
-  if (rest.href) {
-    return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({}, rest, {
-      as: as,
-      ref: ref,
-      "aria-disabled": disabled,
-      disabled: disabled,
-      className: classes,
-      onClick: handleClick
-    }), buttonContent);
-  }
-  const Component = as || 'button';
-  const type = typeProp || (Component === 'button' ? 'button' : undefined);
-  const role = rest.role || (Component !== 'button' ? 'button' : undefined);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const buttonAs = as || (rest.href ? _SafeAnchor.default : 'button');
+  const isCustomElement = buttonAs !== 'button' && buttonAs !== _SafeAnchor.default;
+  const type = typeProp !== null && typeProp !== void 0 ? typeProp : buttonAs === 'button' ? 'button' : undefined;
+  const role = (_rest$role = rest.role) !== null && _rest$role !== void 0 ? _rest$role : isCustomElement ? 'button' : undefined;
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({}, rest, {
+    as: buttonAs,
     role: role,
     type: type,
     ref: ref,

package/cjs/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,6 @@
-import { WithAsProps, Size } from '../internals/types';
-export interface ButtonGroupProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface ButtonGroupProps extends BoxProps {
     /** Display block buttongroups */
     block?: boolean;
     /** A button can show it is currently unable to be interacted with */

package/cjs/ButtonGroup/ButtonGroup.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _ButtonGroupContext = _interopRequireDefault(require("./ButtonGroupContext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -21,7 +22,7 @@ const ButtonGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('ButtonGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'btn-group',
     role = 'group',
     className,
@@ -50,7 +51,9 @@ const ButtonGroup = (0, _utils.forwardRef)((props, ref) => {
   }), [disabled, size]);
   return /*#__PURE__*/_react.default.createElement(_ButtonGroupContext.default.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     role: role,
     ref: ref,
     className: classes

package/cjs/ButtonToolbar/ButtonToolbar.d.ts

@@ -1,6 +1,5 @@
 import { StackProps } from '../Stack';
-import { WithAsProps } from '../internals/types';
-export interface ButtonToolbarProps extends WithAsProps {
+export interface ButtonToolbarProps extends StackProps {
     /**
      * The ARIA role describing the button toolbar. Generally the default
      * "toolbar" role is correct. An `aria-label` or `aria-labelledby`

package/cjs/ButtonToolbar/ButtonToolbar.js

@@ -19,26 +19,23 @@ const ButtonToolbar = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('ButtonToolbar', props);
   const {
-    as: Component = _Stack.default,
+    as,
     className,
     classPrefix = 'btn-toolbar',
     role = 'toolbar',
     ...rest
   } = propsWithDefaults;
-  const stackProps = Component === _Stack.default ? {
-    wrap: true,
-    spacing: 10
-  } : null;
   const {
     withPrefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, stackProps, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
+    as: as,
     role: role,
     ref: ref,
     className: classes
-  }));
+  }, rest));
 });
 ButtonToolbar.displayName = 'ButtonToolbar';
 var _default = exports.default = ButtonToolbar;

package/cjs/Calendar/Calendar.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import type { CalendarLocale } from '../locales';
-import type { WithAsProps } from '../internals/types';
 import type { MonthDropdownProps } from './types';
-export interface CalendarProps extends WithAsProps {
+export interface CalendarProps extends BoxProps {
     /**
      * Controlled value
      */