rsuite 6.0.0-canary-20250315 → 6.0.0-canary-20250319

package/esm/Stack/StackItem.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef, mergeStyles } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 /**
@@ -10,7 +11,7 @@ import { useStyles } from "../internals/hooks/index.js";
  */
 const StackItem = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'stack-item',
     style,
     className,
@@ -29,7 +30,8 @@ const StackItem = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
   const styles = mergeStyles(style, cssVar('align-self', alignSelf), cssVar('order', order), cssVar('flex', flex), cssVar('grow', grow), cssVar('shrink', shrink), cssVar('basis', basis));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

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

@@ -6,6 +6,7 @@ import StatValue from "./StatValue.js";
 import StatValueUnit from "./StatValueUnit.js";
 import StatHelpText from "./StatHelpText.js";
 import StatTrend from "./StatTrend.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -21,7 +22,7 @@ const Stat = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Stat', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'stat',
     className,
     children,
@@ -37,7 +38,8 @@ const Stat = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix({
     bordered
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     className: classes,
     ref: ref
   }, rest), icon && /*#__PURE__*/React.createElement("div", {

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

@@ -5,11 +5,12 @@ import InfoOutlineIcon from '@rsuite/icons/InfoOutline';
 import Whisper from "../Whisper/index.js";
 import Tooltip from "../Tooltip/index.js";
 import IconButton from "../IconButton/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 const StatLabel = forwardRef((props, ref) => {
   const {
-    as: Component = 'dt',
+    as = 'dt',
     classPrefix = 'stat-label',
     className,
     children,
@@ -24,7 +25,8 @@ const StatLabel = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix({
     uppercase
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
   }, rest), children, info && /*#__PURE__*/React.createElement(Whisper, {

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

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 const svgProps = {
@@ -30,7 +31,7 @@ const ArrowDown = props => {
 };
 const StatTrend = forwardRef((props, ref) => {
   const {
-    as: Component = 'span',
+    as = 'span',
     appearance = 'default',
     classPrefix = 'stat-trend',
     indicator = 'up',
@@ -45,7 +46,8 @@ const StatTrend = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix(appearance, indicator));
   const IndicatorIcon = indicator === 'up' ? ArrowUp : ArrowDown;
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
   }, rest), children, /*#__PURE__*/React.createElement(IndicatorIcon, {

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

@@ -1,12 +1,13 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { FormattedNumber } from "../CustomProvider/index.js";
 const StatValue = forwardRef((props, ref) => {
   const {
-    as: Component = 'dd',
+    as = 'dd',
     classPrefix = 'stat-value',
     className,
     children,
@@ -19,7 +20,8 @@ const StatValue = forwardRef((props, ref) => {
     withPrefix
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
   }, rest), value && /*#__PURE__*/React.createElement(FormattedNumber, {

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

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -9,7 +10,7 @@ const StatGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('StatGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'stat-group',
     className,
     children,
@@ -25,7 +26,8 @@ const StatGroup = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
   const styles = mergeStyles(style, cssVar('columns', columns), cssVar('spacing', spacing, getCssValue));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

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

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import StepItem from "./StepItem.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, ReactChildren } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -19,7 +20,7 @@ const Steps = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Steps', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'steps',
     className,
     children,
@@ -67,10 +68,11 @@ const Steps = forwardRef((props, ref) => {
     }
     return itemProps;
   });
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
-  }), items);
+  }, rest), items);
 }, Subcomponents);
 Steps.displayName = 'Steps';
 export default Steps;

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

@@ -1,11 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 const TabPanel = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'tab-panel',
     children,
     active,
@@ -16,7 +17,8 @@ const TabPanel = forwardRef((props, ref) => {
     withPrefix,
     merge
   } = useStyles(classPrefix);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "tabpanel",
     ref: ref,
     tabIndex: 0,

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

@@ -4,6 +4,7 @@ import React from 'react';
 import Nav from "../Nav/index.js";
 import Tab from "./Tab.js";
 import TabPanel from "./TabPanel.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, ReactChildren } from "../internals/utils/index.js";
 import { useStyles, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -114,7 +115,7 @@ const Tabs = forwardRef((props, ref) => {
     rtl
   } = useCustom('Tabs', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'tabs',
     appearance = 'tabs',
     className,
@@ -180,7 +181,8 @@ const Tabs = forwardRef((props, ref) => {
     }
   });
   const hasChildren = React.Children.toArray(children).some(child => /*#__PURE__*/React.isValidElement(child) && child.props.children);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     className: merge(className, withPrefix({
       reversed,
       vertical

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

package/esm/Tag/Tag.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import CloseButton from "../internals/CloseButton/index.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, mergeStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
@@ -17,7 +18,7 @@ const Tag = forwardRef((props, ref) => {
     getLocale
   } = useCustom('Tag', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'tag',
     size = 'md',
     color,
@@ -39,7 +40,8 @@ const Tag = forwardRef((props, ref) => {
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix(size, isPresetColor(color) && color));
   const styles = useMemo(() => mergeStyles(style, createColorVariables(color, '--rs-tag-bg', '--rs-tag-text')), [style, color]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

package/esm/TagGroup/TagGroup.d.ts

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

package/esm/Text/Text.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { WithAsProps, Color, TextSize } from '../internals/types';
-export interface TextProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import { TextSize } from '../internals/types';
+export interface TextProps extends BoxProps {
     /**
      * The font color of the text.
      * Accepts preset colors or CSS color values
      */
-    color?: Color | React.CSSProperties['color'];
+    color?: BoxProps['c'];
     /**
      * The font size of the text.
      */

package/esm/Text/Text.js

@@ -1,11 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useMemo } from 'react';
+import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef, mergeStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
-import { TypographySizeEnum } from "../internals/types/index.js";
-const fontSizes = Object.values(TypographySizeEnum);
+import { forwardRef, mergeStyles, getSizeStyle } from "../internals/utils/index.js";
 /**
  *
  * The `Text` component is used to display text.
@@ -17,7 +16,7 @@ const Text = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Text', props);
   const {
-    as: Component = 'p',
+    as = 'p',
     align,
     classPrefix = 'text',
     color,
@@ -32,29 +31,21 @@ const Text = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const {
     withPrefix,
+    cssVar,
     merge
   } = useStyles(classPrefix);
-  const hasSize = size && fontSizes.includes(size);
-  const classes = merge(className, withPrefix(isPresetColor(color) && color, align, weight, transform, hasSize && size, {
+  const classes = merge(className, withPrefix(align, weight, transform, {
     muted,
     ellipsis: maxLines
   }));
-  const styles = useMemo(() => {
-    const textStyles = mergeStyles({
-      ...(maxLines ? {
-        WebkitLineClamp: maxLines
-      } : null)
-    }, createColorVariables(color, '--rs-text-color'), style);
-    if (size && !hasSize) {
-      textStyles.fontSize = size;
-    }
-    return textStyles;
-  }, [style, color, size, maxLines]);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  const styles = mergeStyles(style, getSizeStyle(size, 'font'), cssVar('max-lines', maxLines));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    c: color,
     ref: ref,
     className: classes,
     style: styles
-  }));
+  }, rest));
 });
 Text.displayName = 'Text';
 export default Text;

package/esm/Timeline/Timeline.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface TimelineProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface TimelineProps extends BoxProps {
     /** The content of the component */
     children?: React.ReactNode;
     /** TimeLine content relative position  **/

package/esm/Timeline/Timeline.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import some from 'lodash/some';
 import TimelineItem from "./TimelineItem.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, ReactChildren } from "../internals/utils/index.js";
@@ -24,8 +25,8 @@ const Timeline = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Timeline', props);
   const {
+    as = 'ul',
     children,
-    as: Component = 'ul',
     classPrefix = 'timeline',
     className,
     align = 'left',
@@ -46,10 +47,11 @@ const Timeline = forwardRef((props, ref) => {
     endless,
     'with-time': withTime
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
-  }), ReactChildren.mapCloneElement(children, (_child, index) => ({
+  }, rest), ReactChildren.mapCloneElement(children, (_child, index) => ({
     last: index + 1 === count,
     INTERNAL_active: isItemActive(index, count),
     align

package/esm/Timeline/TimelineItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface TimelineItemProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface TimelineItemProps extends BoxProps {
     /**
      * Whether the last item
      *

package/esm/Timeline/TimelineItem.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 /**
@@ -10,7 +11,7 @@ import { forwardRef } from "../internals/utils/index.js";
  */
 const TimelineItem = forwardRef((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     children,
     classPrefix = 'timeline-item',
     last: DEPRECATED_last,
@@ -29,10 +30,11 @@ const TimelineItem = forwardRef((props, ref) => {
     last: DEPRECATED_last,
     active: INTERNAL_active
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
-  }), /*#__PURE__*/React.createElement("span", {
+  }, rest), /*#__PURE__*/React.createElement("span", {
     className: prefix('tail')
   }), /*#__PURE__*/React.createElement("span", {
     className: prefix('dot', {

package/esm/Toggle/Toggle.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { SanitizedInputProps, WithAsProps, Color, Size } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { SanitizedInputProps, Color, Size } from '../internals/types';
 import type { ToggleLocale } from '../locales';
-export interface ToggleProps extends WithAsProps, SanitizedInputProps {
+export interface ToggleProps extends BoxProps, SanitizedInputProps {
     /**
      * The color of the toggle.
      */

package/esm/Toggle/Toggle.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useRef } from 'react';
 import Plaintext from "../internals/Plaintext/index.js";
 import Loader from "../Loader/index.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, partitionHTMLProps } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -16,7 +17,7 @@ const Toggle = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Toggle', props);
   const {
-    as: Component = 'span',
+    as = 'label',
     disabled,
     readOnly,
     loading = false,
@@ -65,7 +66,8 @@ const Toggle = forwardRef((props, ref) => {
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, null, inner || label);
   }
-  return /*#__PURE__*/React.createElement("label", _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
   }, restProps), /*#__PURE__*/React.createElement("input", _extends({}, htmlInputProps, {
@@ -83,7 +85,7 @@ const Toggle = forwardRef((props, ref) => {
     "aria-labelledby": labelledby,
     "aria-label": labelledby ? undefined : label,
     "aria-busy": loading || undefined
-  })), /*#__PURE__*/React.createElement(Component, {
+  })), /*#__PURE__*/React.createElement("span", {
     className: prefix('presentation')
   }, /*#__PURE__*/React.createElement("span", {
     className: prefix('inner'),

package/esm/Tooltip/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { Placement, WithAsProps } from '../internals/types';
-export interface TooltipProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Placement } from '../internals/types';
+export interface TooltipProps extends BoxProps {
     /** Dispaly placement */
     placement?: Placement;
     /** Whether visible */