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

package/cjs/Placeholder/PlaceholderGraph.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 _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
@@ -18,7 +19,7 @@ const PlaceholderGraph = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('PlaceholderGraph', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'placeholder',
     width,
@@ -29,20 +30,19 @@ const PlaceholderGraph = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
+    cssVar,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix('graph', {
     active
   }));
-  const styles = {
-    '--rs-placeholder-graph-width': (0, _utils.getCssValue)(width),
-    '--rs-placeholder-graph-height': (0, _utils.getCssValue)(height)
-  };
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const styles = (0, _utils.mergeStyles)(style, cssVar('graph-width', width, _utils.getCssValue), cssVar('graph-height', height, _utils.getCssValue));
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes,
-    style: (0, _utils.mergeStyles)(styles, style)
-  }));
+    style: styles
+  }, rest));
 });
 PlaceholderGraph.displayName = 'PlaceholderGraph';
 var _default = exports.default = PlaceholderGraph;

package/cjs/Placeholder/PlaceholderGrid.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface PlaceholderGridProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface PlaceholderGridProps extends BoxProps {
     /**
      * The number of rows.
      *

package/cjs/Placeholder/PlaceholderGrid.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
@@ -20,7 +21,7 @@ const PlaceholderGrid = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('PlaceholderGrid', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'placeholder',
     rows = 5,
@@ -34,15 +35,13 @@ const PlaceholderGrid = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
+    cssVar,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix('grid', {
     active
   }));
-  const styles = {
-    '--rs-placeholder-row-height': (0, _utils.getCssValue)(rowHeight),
-    '--rs-placeholder-row-spacing': (0, _utils.getCssValue)(rowSpacing)
-  };
+  const styles = (0, _utils.mergeStyles)(style, cssVar('row-height', rowHeight, _utils.getCssValue), cssVar('row-spacing', rowSpacing, _utils.getCssValue));
   const items = (0, _react.useMemo)(() => {
     const colItems = [];
     const rowClassName = prefix`row`;
@@ -62,11 +61,12 @@ const PlaceholderGrid = (0, _utils.forwardRef)((props, ref) => {
     }
     return colItems;
   }, [columns, prefix, rowHeight, rowSpacing, rows]);
-  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,
-    style: (0, _utils.mergeStyles)(styles, style)
-  }), items);
+    style: styles
+  }, rest), items);
 });
 PlaceholderGrid.displayName = 'PlaceholderGrid';
 var _default = exports.default = PlaceholderGrid;

package/cjs/Placeholder/PlaceholderParagraph.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface PlaceholderParagraphProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface PlaceholderParagraphProps extends BoxProps {
     /**
      * The number of rows.
      * @default 2

package/cjs/Placeholder/PlaceholderParagraph.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
@@ -20,7 +21,7 @@ const PlaceholderParagraph = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('PlaceholderParagraph', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'placeholder',
     rows = 3,
@@ -34,13 +35,11 @@ const PlaceholderParagraph = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
+    cssVar,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const graphShape = graph === true ? 'square' : graph;
-  const styles = {
-    '--rs-placeholder-row-height': (0, _utils.getCssValue)(rowHeight),
-    '--rs-placeholder-row-spacing': (0, _utils.getCssValue)(rowSpacing)
-  };
+  const styles = (0, _utils.mergeStyles)(style, cssVar('row-height', rowHeight, _utils.getCssValue), cssVar('row-spacing', rowSpacing, _utils.getCssValue));
   const rowElements = (0, _react.useMemo)(() => {
     const rowArr = [];
     for (let i = 0; i < rows; i++) {
@@ -55,11 +54,12 @@ const PlaceholderParagraph = (0, _utils.forwardRef)((props, ref) => {
     active
   }));
   const graphClasses = prefix('paragraph-graph', `paragraph-graph-${graphShape}`);
-  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,
-    style: (0, _utils.mergeStyles)(styles, style)
-  }), graphShape && /*#__PURE__*/_react.default.createElement("div", {
+    style: styles
+  }, rest), graphShape && /*#__PURE__*/_react.default.createElement("div", {
     className: graphClasses
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('paragraph-graph-inner')

package/cjs/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface PopoverProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface PopoverProps extends BoxProps {
     /** The title of the component. */
     title?: React.ReactNode;
     /** The component is visible by default. */

package/cjs/Popover/Popover.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _Heading = _interopRequireDefault(require("../Heading"));
+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 Popover = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Popover', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'popover',
     title,
     children,
@@ -43,13 +44,13 @@ const Popover = (0, _utils.forwardRef)((props, ref) => {
   const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, {
     ['--rs-opacity']: visible ? 1 : undefined
   }), [visible, style]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "dialog"
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    role: "dialog",
     ref: ref,
     className: classes,
     style: styles
-  }), arrow && /*#__PURE__*/_react.default.createElement("div", {
+  }, rest), arrow && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix`arrow`,
     "aria-hidden": true
   }), title && /*#__PURE__*/_react.default.createElement(_Heading.default, {

package/cjs/Progress/ProgressCircle.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface ProgressCircleProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface ProgressCircleProps extends BoxProps {
     /** Line color */
     strokeColor?: string;
     /** The end of different types of open paths */

package/cjs/Progress/ProgressCircle.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _statusIcons = require("../internals/constants/statusIcons");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
@@ -21,7 +22,7 @@ const ProgressCircle = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('ProgressCircle', props);
   const {
-    as: Component = 'div',
+    as,
     strokeWidth = 6,
     trailWidth = 6,
     percent = 0,
@@ -99,7 +100,8 @@ const ProgressCircle = (0, _utils.forwardRef)((props, ref) => {
   }, _statusIcons.PROGRESS_STATUS_ICON[status]) : /*#__PURE__*/_react.default.createElement("span", {
     key: 1
   }, percent, "%");
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     role: "progressbar",
     "aria-valuemin": "0",
     "aria-valuemax": "100",

package/cjs/Progress/ProgressLine.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface ProgressLineProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface ProgressLineProps extends BoxProps {
     /** Line color */
     strokeColor?: string;
     /** Percent of progress */

package/cjs/Progress/ProgressLine.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 _statusIcons = require("../internals/constants/statusIcons");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
@@ -19,7 +20,7 @@ const ProgressLine = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('ProgressLine', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     percent = 0,
     strokeColor,
@@ -56,7 +57,8 @@ const ProgressLine = (0, _utils.forwardRef)((props, ref) => {
   }, _statusIcons.PROGRESS_STATUS_ICON[status]) : /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('info-status')
   }, percent, "%");
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "progressbar",
     "aria-valuemin": "0",
     "aria-valuemax": "100",

package/cjs/Radio/Radio.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Color, HTMLPropsWithoutChange } from '../internals/types';
-export interface RadioProps<T = string | number> extends WithAsProps, HTMLPropsWithoutChange {
+import { BoxProps } from '../internals/Box';
+import { Color, HTMLPropsWithoutChange } from '../internals/types';
+export interface RadioProps<T = string | number> extends BoxProps, HTMLPropsWithoutChange {
     /**
      * The color of the radio when checked
      *

package/cjs/Radio/Radio.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _RadioGroup = require("../RadioGroup/RadioGroup");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
@@ -31,7 +32,7 @@ const Radio = (0, _utils.forwardRef)((props, ref) => {
     onChange: onGroupChange
   } = radioContext !== null && radioContext !== void 0 ? radioContext : {};
   const {
-    as: Component = 'div',
+    as,
     title,
     className,
     children,
@@ -79,10 +80,11 @@ const Radio = (0, _utils.forwardRef)((props, ref) => {
   }
   const labelId = (0, _hooks.useUniqueId)('label-');
   if (plaintext) {
-    return checked ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
+    return checked ? /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as,
       ref: ref,
       className: classes
-    }), children) : null;
+    }, restProps), children) : null;
   }
   const control = /*#__PURE__*/_react.default.createElement("span", {
     className: prefix`control`
@@ -102,11 +104,12 @@ const Radio = (0, _utils.forwardRef)((props, ref) => {
     className: prefix`inner`,
     "aria-hidden": true
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     onClick: onClick,
     className: classes
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, restProps), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix`checker`
   }, children ? /*#__PURE__*/_react.default.createElement("label", {
     title: title

package/cjs/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { WithAsProps, PrependParameters, FormControlBaseProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { PrependParameters, FormControlBaseProps } from '../internals/types';
 export interface RadioContextProps {
     inline?: boolean;
     name?: string;
@@ -12,7 +13,7 @@ export interface RadioContextProps {
         value: string | number | undefined
     ]>;
 }
-export interface RadioGroupProps<T = string | number> extends WithAsProps, FormControlBaseProps<T> {
+export interface RadioGroupProps<T = string | number> extends BoxProps, FormControlBaseProps<T> {
     /** A radio group can have different appearances */
     appearance?: 'default' | 'picker';
     /** Name to use for form */

package/cjs/RadioGroup/RadioGroup.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = exports.RadioContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
@@ -23,7 +24,7 @@ const RadioGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('RadioGroup', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     inline,
     children,
@@ -65,7 +66,8 @@ const RadioGroup = (0, _utils.forwardRef)((props, ref) => {
   }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
     ref: ref,
     localeKey: "notSelected"
-  }, rest), value ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  }, rest), value ? children : null) : /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "radiogroup"
   }, rest, {
     ref: ref,

package/cjs/RadioTile/RadioTile.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, HTMLPropsWithoutChange } from '../internals/types';
-export interface RadioTileProps<T = string | number> extends WithAsProps, HTMLPropsWithoutChange {
+import { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutChange } from '../internals/types';
+export interface RadioTileProps<T = string | number> extends BoxProps, HTMLPropsWithoutChange {
     /** Additional description, if needed*/
     children?: React.ReactNode;
     /** Specifies whether the radio is selected */
@@ -25,7 +26,5 @@ export interface RadioTileProps<T = string | number> extends WithAsProps, HTMLPr
  * @version 5.35.0
  * @see https://rsuitejs.com/components/radio-tile/
  */
-declare const RadioTile: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("../Stack").StackProps, never> & {
-    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("../Stack/StackItem").StackItemProps, never> & Record<string, never>;
-}, RadioTileProps<string | number>, never> & Record<string, never>;
+declare const RadioTile: import("../internals/types").InternalRefForwardingComponent<"label", RadioTileProps<string | number>, never> & Record<string, never>;
 export default RadioTile;

package/cjs/RadioTile/RadioTile.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _Check = _interopRequireDefault(require("@rsuite/icons/Check"));
-var _Stack = _interopRequireDefault(require("../Stack"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _RadioTileGroup = require("../RadioTileGroup/RadioTileGroup");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
@@ -30,7 +30,7 @@ const RadioTile = (0, _utils.forwardRef)((props, ref) => {
     onChange: onGroupChange
   } = (0, _react.useContext)(_RadioTileGroup.RadioTileContext);
   const {
-    as: Component = _Stack.default,
+    as = 'label',
     children,
     classPrefix = 'radio-tile',
     checked: checkedProp,
@@ -62,13 +62,11 @@ const RadioTile = (0, _utils.forwardRef)((props, ref) => {
     disabled
   }));
   const radioId = (0, _hooks.useUniqueId)('radio-');
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    spacing: 6
-  }, restProps, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
-    className: classes,
-    as: "label"
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, restProps), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('icon')
   }, icon), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('body')

package/cjs/RadioTileGroup/RadioTileGroup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { WithAsProps, FormControlBaseProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { FormControlBaseProps } from '../internals/types';
 export interface RadioTileContextProps {
     name?: string;
     value?: number | string | null;
@@ -7,7 +8,7 @@ export interface RadioTileContextProps {
     disabled?: boolean;
     onChange?: (value: number | string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export interface RadioTileGroupProps<T = number | string> extends WithAsProps, FormControlBaseProps<T> {
+export interface RadioTileGroupProps<T = number | string> extends BoxProps, FormControlBaseProps<T> {
     /** Name to use for form */
     name?: string;
     /** Inline layout */

package/cjs/RadioTileGroup/RadioTileGroup.js

@@ -7,6 +7,7 @@ exports.default = exports.RadioTileContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _Stack = _interopRequireDefault(require("../Stack"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -24,7 +25,7 @@ const RadioTileGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('RadioTileGroup', props);
   const {
-    as: Component = _Stack.default,
+    as = _Stack.default,
     className,
     inline,
     children,
@@ -54,15 +55,15 @@ const RadioTileGroup = (0, _utils.forwardRef)((props, ref) => {
   }), [disabled, handleChange, name, value]);
   return /*#__PURE__*/_react.default.createElement(RadioTileContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     alignItems: "stretch",
-    spacing: 10
-  }, rest, {
+    spacing: 10,
     role: "radiogroup",
     direction: inline ? 'row' : 'column',
     ref: ref,
     className: classes
-  }), children));
+  }, rest), children));
 });
 RadioTileGroup.displayName = 'RadioTileGroup';
 var _default = exports.default = RadioTileGroup;

package/cjs/RangeSlider/RangeSlider.js

@@ -12,6 +12,7 @@ var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
 var _ProgressBar = _interopRequireDefault(require("../Slider/ProgressBar"));
 var _Handle = _interopRequireDefault(require("../Slider/Handle"));
 var _Graduated = _interopRequireDefault(require("../Slider/Graduated"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _utils2 = require("../Slider/utils");
@@ -32,7 +33,7 @@ const RangeSlider = (0, _utils.forwardRef)((props, ref) => {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-valuetext': ariaValuetext,
-    as: Component = 'div',
+    as,
     barClassName,
     className,
     classPrefix = 'slider',
@@ -284,10 +285,11 @@ const RangeSlider = (0, _utils.forwardRef)((props, ref) => {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby
   };
-  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
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
     className: merge(barClassName, prefix('bar')),
     ref: barRef,
     onClick: handleBarClick

package/cjs/Rate/Character.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-interface CharacterProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+interface CharacterProps extends BoxProps {
     vertical?: boolean;
     status?: 0 | 0.5 | 1;
     disabled?: boolean;

package/cjs/Rate/Character.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _contains = _interopRequireDefault(require("dom-lib/contains"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -20,7 +21,7 @@ const characterStatus = {
 const getKey = (a, b) => (0, _contains.default)(a, b) ? 'before' : 'after';
 const Character = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     classPrefix = 'rate-character',
     className,
     children,
@@ -45,14 +46,15 @@ const Character = (0, _utils.forwardRef)((props, ref) => {
   const handleClick = (0, _hooks.useEventCallback)(event => {
     onClick === null || onClick === void 0 || onClick(getKey(beforeRef.current, event.target), event);
   });
-  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,
     tabIndex: 0,
     onClick: disabled ? null : handleClick,
     onKeyDown: disabled ? null : onKeyDown,
     onMouseMove: disabled ? null : handleMouseMove
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
     ref: beforeRef,
     className: prefix('before', {
       vertical

package/cjs/Rate/Rate.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Color, FormControlBaseProps, Size } from '../internals/types';
-export interface RateProps<T = number> extends WithAsProps, FormControlBaseProps<T> {
+import { BoxProps } from '../internals/Box';
+import type { Color, FormControlBaseProps, Size } from '../internals/types';
+export interface RateProps<T = number> extends BoxProps, FormControlBaseProps<T> {
     allowHalf?: boolean;
     character?: React.ReactNode;
     classPrefix?: string;

package/cjs/Rate/Rate.js

@@ -10,6 +10,7 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _Star = _interopRequireDefault(require("@rsuite/icons/Star"));
 var _Character = _interopRequireDefault(require("./Character"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _constants = require("../internals/constants");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
@@ -26,7 +27,7 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Rate', props);
   const {
-    as: Component = 'ul',
+    as = 'ul',
     character = /*#__PURE__*/_react.default.createElement(_Star.default, null),
     className,
     classPrefix = 'rate',
@@ -121,7 +122,8 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
       className: className
     }, !(0, _isNil.default)(value) ? `${value}(${max})` : null);
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "radiogroup",
     tabIndex: 0,
     ref: ref,

package/cjs/SafeAnchor/SafeAnchor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface SafeAnchorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+import { BoxProps } from '../internals/Box';
+export interface SafeAnchorProps extends BoxProps, React.HTMLAttributes<HTMLElement> {
     /** Link specified url */
     href?: string;
     /** A link can show it is currently unable to be interacted with */