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

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

package/cjs/Tabs/TabPanel.js

@@ -6,11 +6,12 @@ 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");
 const TabPanel = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'tab-panel',
     children,
     active,
@@ -21,7 +22,8 @@ const TabPanel = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "tabpanel",
     ref: ref,
     tabIndex: 0,

package/cjs/Tabs/Tabs.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 /**
  * Props for the Tabs component.
  */
-export interface TabsProps extends WithAsProps {
+export interface TabsProps extends BoxProps {
     /**
      * The appearance of the tabs.
      * @default 'tabs'

package/cjs/Tabs/Tabs.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Nav = _interopRequireDefault(require("../Nav"));
 var _Tab = _interopRequireDefault(require("./Tab"));
 var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -118,7 +119,7 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
     rtl
   } = (0, _CustomProvider.useCustom)('Tabs', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'tabs',
     appearance = 'tabs',
     className,
@@ -184,7 +185,8 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
     }
   });
   const hasChildren = _react.default.Children.toArray(children).some(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.children);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     className: merge(className, withPrefix({
       reversed,
       vertical

package/cjs/Tag/Tag.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { WithAsProps, Color } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { Color } from '../internals/types';
 import type { CommonLocale } from '../locales';
-export interface TagProps extends WithAsProps {
+export interface TagProps extends BoxProps {
     /** Different sizes */
     size?: 'lg' | 'md' | 'sm';
     /** A tag can have different colors */