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

package/cjs/Panel/Panel.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { AnimationEventProps, WithAsProps } from '../internals/types';
-export interface PanelProps<T = string | number> extends WithAsProps, AnimationEventProps {
+import { BoxProps } from '../internals/Box';
+import type { AnimationEventProps } from '../internals/types';
+export interface PanelProps<T = string | number> extends BoxProps, AnimationEventProps {
     /**
      * Show border
      */

package/cjs/Panel/Panel.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _PanelHeader = _interopRequireDefault(require("./PanelHeader"));
 var _PanelBody = _interopRequireDefault(require("./PanelBody"));
 var _useExpanded = _interopRequireDefault(require("./hooks/useExpanded"));
+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 Panel = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Panel', props);
   const {
-    as: Component = 'div',
+    as,
     bodyFill,
     bodyProps,
     bordered,
@@ -79,11 +80,12 @@ const Panel = (0, _utils.forwardRef)((props, ref) => {
     bordered,
     shaded
   }));
-  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,
     id: idProp
-  }), header && /*#__PURE__*/_react.default.createElement(_PanelHeader.default, {
+  }, rest), header && /*#__PURE__*/_react.default.createElement(_PanelHeader.default, {
     collapsible: collapsible,
     expanded: expanded,
     caretAs: caretAs,

package/cjs/Panel/PanelBody.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, AnimationEventProps } from '../internals/types';
+import type { WithAsProps, AnimationEventProps } from '../internals/types';
 export interface PanelBodyProps extends WithAsProps, AnimationEventProps, React.HTMLAttributes<HTMLDivElement> {
     collapsible?: boolean;
     expanded?: boolean;

package/cjs/Panel/PanelBody.js

@@ -7,8 +7,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));
-var _hooks = require("../internals/hooks");
 var _ScrollView = _interopRequireDefault(require("../internals/ScrollView"));
+var _hooks = require("../internals/hooks");
 const PanelBody = props => {
   const {
     classPrefix = 'panel-body',

package/cjs/Panel/PanelHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
-export interface PanelHeaderProps extends WithAsProps, React.HTMLAttributes<HTMLHeadingElement> {
+import { BoxProps } from '../internals/Box';
+export interface PanelHeaderProps extends BoxProps, React.HTMLAttributes<HTMLHeadingElement> {
     caretAs?: React.ElementType;
     collapsible?: boolean;
     disabled?: boolean;

package/cjs/Panel/PanelHeader.js

@@ -9,12 +9,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _AccordionButton = _interopRequireDefault(require("./AccordionButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const PanelHeader = props => {
   const {
-    as: Component = _Heading.default,
+    as = _Heading.default,
     classPrefix = 'panel',
     className,
     children,
@@ -43,7 +44,8 @@ const PanelHeader = props => {
       className
     });
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     level: 2,
     className: merge(className, prefix('header'))
   }, rest), collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {

package/cjs/PanelGroup/PanelGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 type KeyType = string | number;
-export interface PanelGroupProps<T = KeyType> extends WithAsProps {
+export interface PanelGroupProps<T = KeyType> extends BoxProps {
     /** Whether it is a collapsible panel. */
     accordion?: boolean;
     /** Expand the Panel, corresponding to the 'Panel' of 'eventkey' */

package/cjs/PanelGroup/PanelGroup.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = exports.PanelGroupContext = 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 PanelGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('PanelGroup', props);
   const {
-    as: Component = 'div',
+    as,
     accordion,
     defaultActiveKey,
     bordered,
@@ -51,7 +52,9 @@ const PanelGroup = (0, _utils.forwardRef)((props, ref) => {
     activeKey,
     onGroupSelect: handleSelect
   }), [accordion, activeKey, handleSelect]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(PanelGroupContext.Provider, {

package/cjs/Placeholder/PlaceholderGraph.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface PlaceholderGraphProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface PlaceholderGraphProps extends BoxProps {
     /**
      * The height of the graph.
      *

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;