rsuite 6.0.0-canary-20250319 → 6.0.0-canary-20250320

package/Form/styles/index.css

@@ -11,16 +11,3 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
-:root {
-  --rs-spacing: 0.25rem;
-}
-.rs-form {
-  --rs-form-direction: column;
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
-  display: flex;
-  flex-direction: var(--rs-form-direction);
-  gap: var(--rs-form-spacing);
-}
-.rs-form-inline {
-  --rs-form-direction: row;
-}

package/Form/styles/index.less

@@ -1,17 +1 @@
 @import '../../styles/common.less';
-
-// Form
-
-.rs-form {
-  --rs-form-direction: column;
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
-  --rs-form-group-spacing: var(--rs-spacing);
-  --rs-form-group-direction: column;
-  display: flex;
-  flex-direction: var(--rs-form-direction);
-  gap: var(--rs-form-spacing);
-}
-
-.rs-form-inline {
-  --rs-form-direction: row;
-}

package/FormControl/styles/index.css

@@ -14,19 +14,16 @@
 :root {
   --rs-radius-none: 0;
 }
-.rs-form-fluid .rs-form-control-wrapper {
+.rs-form-stack-fluid .rs-form-control-wrapper {
   width: 100%;
 }
-.rs-form-fluid .rs-form-control-wrapper > .rs-input-number,
-.rs-form-fluid .rs-form-control-wrapper > .rs-input {
+.rs-form-stack-fluid .rs-form-control-wrapper > .rs-input-number,
+.rs-form-stack-fluid .rs-form-control-wrapper > .rs-input {
   width: 100%;
 }
-.rs-form-fluid.rs-form-vertical .rs-form-group .rs-input-group {
+.rs-form-stack-fluid.rs-form-stack-vertical .rs-form-group .rs-input-group {
   width: 100%;
 }
-.rs-form-fluid.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
-  max-width: 100%;
-}
 .rs-form-control-wrapper {
   position: relative;
 }
@@ -38,24 +35,22 @@
   pointer-events: none;
   touch-action: none;
 }
-.rs-form-vertical .rs-form-group .rs-input-group {
+.rs-form-stack-vertical .rs-form-group .rs-input-group {
   width: 300px;
 }
-.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-vertical .rs-form-group .rs-form-control-wrapper {
   display: inline-block;
-  max-width: -moz-max-content;
-  max-width: max-content;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-wrapper {
   float: inline-start;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-wrapper + .rs-form-help-text {
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-wrapper + .rs-form-help-text {
   clear: both;
 }
-.rs-form-inline .rs-form-group .rs-form-control-wrapper {
+.rs-form-stack-inline .rs-form-group .rs-form-control-wrapper {
   display: inline-block;
 }
-.rs-form-inline .rs-form-group .rs-sr-only + .rs-form-control-wrapper {
+.rs-form-stack-inline .rs-form-group .rs-sr-only + .rs-form-control-wrapper {
   margin-inline-start: 0;
 }
 .rs-input-group > .rs-form-control > .rs-input {

package/FormControl/styles/index.less

@@ -1,7 +1,7 @@
 @import '../../styles/common.less';
 
 // Full container.
-.rs-form-fluid {
+.rs-form-stack-fluid {
   .rs-form-control-wrapper {
     width: 100%;
 
@@ -11,13 +11,10 @@
     }
   }
 
-  &.rs-form-vertical .rs-form-group {
+  &.rs-form-stack-vertical .rs-form-group {
     .rs-input-group {
       width: 100%;
     }
-    .rs-form-control-wrapper {
-      max-width: 100%;
-    }
   }
 }
 
@@ -38,13 +35,14 @@
 }
 
 // Vertical forms
-.rs-form-vertical .rs-form-group .rs-input-group {
-  width: @form-control-width;
-}
+.rs-form-stack-vertical .rs-form-group {
+  .rs-input-group {
+    width: @form-control-width;
+  }
 
-.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
-  display: inline-block;
-  max-width: max-content;
+  .rs-form-control-wrapper {
+    display: inline-block;
+  }
 }
 
 // Horizontal forms
@@ -52,7 +50,7 @@
 // Horizontal forms are built on grid classes and allow you to create forms with
 // labels on the left and inputs on the right.
 
-.rs-form-horizontal .rs-form-group {
+.rs-form-stack-horizontal .rs-form-group {
   .rs-form-control-wrapper {
     float: inline-start;
   }
@@ -63,7 +61,7 @@
 }
 
 // Inline
-.rs-form-inline .rs-form-group {
+.rs-form-stack-inline .rs-form-group {
   .rs-form-control-wrapper {
     display: inline-block;
   }

package/FormControlLabel/styles/index.css

@@ -27,6 +27,6 @@
   --rs-gray-600: #3c3f43;
   --rs-text-secondary: var(--rs-gray-200);
 }
-.rs-form-plaintext .rs-form-control-label {
+[data-rs='form'][data-plaintext='true'] .rs-form-control-label {
   color: var(--rs-text-secondary);
 }

package/FormControlLabel/styles/index.less

@@ -2,6 +2,6 @@
 
 // FormControlLabel
 
-.rs-form-plaintext .rs-form-control-label {
+[data-rs='form'][data-plaintext='true'] .rs-form-control-label {
   color: var(--rs-text-secondary);
 }

package/FormGroup/styles/index.css

@@ -15,18 +15,6 @@
   --rs-font-size-sm: 0.875rem;
   --rs-spacing: 0.25rem;
 }
-.rs-form {
-  --rs-form-direction: column;
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
-  --rs-form-group-spacing: var(--rs-spacing);
-  --rs-form-group-direction: column;
-  display: flex;
-  flex-direction: var(--rs-form-direction);
-  gap: var(--rs-form-spacing);
-}
-.rs-form-inline {
-  --rs-form-direction: row;
-}
 .rs-form-group {
   position: relative;
   display: flex;
@@ -39,31 +27,37 @@
 .rs-form-group textarea.rs-input {
   vertical-align: bottom;
 }
-.rs-form-vertical .rs-form-group .rs-form-control-label {
+.rs-form-stack-vertical .rs-form-group .rs-form-control-label {
   display: block;
 }
-.rs-form-horizontal {
+.rs-form-stack {
+  --rs-form-group-spacing: var(--rs-spacing);
+  --rs-form-group-direction: column;
+}
+.rs-form-stack-horizontal {
   --rs-form-control-label-width: 170px;
   --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
   --rs-form-group-direction: row;
 }
-.rs-form-horizontal .rs-form-group {
+.rs-form-stack-horizontal .rs-form-group {
   align-items: baseline;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-label {
+.rs-form-stack-horizontal .rs-form-group .rs-form-control-label {
   display: inline-block;
   font-size: var(--rs-font-size-sm);
   width: var(--rs-form-control-label-width);
   text-align: end;
 }
-.rs-form-horizontal .rs-form-group .rs-btn-toolbar {
+.rs-form-stack-horizontal .rs-form-group .rs-btn-toolbar {
   padding-inline-start: calc(var(--rs-form-control-label-width) + var(--rs-form-group-spacing));
 }
-.rs-form-inline {
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+.rs-form-stack-inline {
   --rs-form-group-direction: row;
   --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
 }
-.rs-form-inline .rs-form-group {
+.rs-form-stack-inline .rs-form-group {
   align-items: center;
 }
+.rs-form-stack-fluid .rs-form-group {
+  width: 100%;
+}

package/FormGroup/styles/index.less

@@ -21,18 +21,23 @@
 }
 
 // Vertical forms
-.rs-form-vertical .rs-form-group {
+.rs-form-stack-vertical .rs-form-group {
   .rs-form-control-label {
     display: block;
   }
 }
 
+.rs-form-stack {
+  --rs-form-group-spacing: var(--rs-spacing);
+  --rs-form-group-direction: column;
+}
+
 // Horizontal forms
 //
 // Horizontal forms are built on grid classes and allow you to create forms with
 // labels on the left and inputs on the right.
 
-.rs-form-horizontal {
+.rs-form-stack-horizontal {
   --rs-form-control-label-width: @form-control-label-width;
   --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
   --rs-form-group-direction: row;
@@ -54,11 +59,17 @@
 }
 
 // Inline
-.rs-form-inline {
-  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+.rs-form-stack-inline {
   --rs-form-group-direction: row;
   --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+
   .rs-form-group {
     align-items: center;
   }
 }
+
+.rs-form-stack-fluid {
+  .rs-form-group {
+    width: 100%;
+  }
+}

package/FormStack/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/FormStack",
+  "private": true,
+  "main": "../cjs/FormStack/index.js",
+  "module": "../esm/FormStack/index.js",
+  "types": "../esm/FormStack/index.d.ts"
+}

package/FormStack/styles/index.css

@@ -0,0 +1,27 @@
+/**
+  * Map mixin
+  * @param {string} @size-name - The size name
+  * @param {string} @suffix - The suffix
+  */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-spacing: 0.25rem;
+}
+.rs-form-stack {
+  --rs-form-stack-dir: column;
+  --rs-form-stack-spacing: calc(var(--rs-spacing) * 4);
+  display: flex;
+  flex-direction: var(--rs-form-stack-dir);
+  gap: var(--rs-form-stack-spacing);
+  align-items: flex-start;
+}
+.rs-form-stack-inline {
+  --rs-form-stack-dir: row;
+}

package/FormStack/styles/index.less

@@ -0,0 +1,15 @@
+@import '../../styles/common';
+
+.rs-form-stack {
+  --rs-form-stack-dir: column;
+  --rs-form-stack-spacing: calc(var(--rs-spacing) * 4);
+
+  display: flex;
+  flex-direction: var(--rs-form-stack-dir);
+  gap: var(--rs-form-stack-spacing);
+  align-items: flex-start;
+}
+
+.rs-form-stack-inline {
+  --rs-form-stack-dir: row;
+}

package/cjs/CustomProvider/types.d.ts

@@ -42,6 +42,7 @@ import type { FormControlLabelProps } from '../FormControlLabel';
 import type { FormErrorMessageProps } from '../FormErrorMessage';
 import type { FormGroupProps } from '../FormGroup';
 import type { FormHelpTextProps } from '../FormHelpText';
+import type { FormStackProps } from '../FormStack';
 import type { GridProps } from '../Grid';
 import type { HeaderProps } from '../Header';
 import type { HeadingProps } from '../Heading';
@@ -155,6 +156,7 @@ export interface ReactSuiteComponents {
     FormErrorMessage: ComponentProps<FormErrorMessageProps>;
     FormGroup: ComponentProps<FormGroupProps>;
     FormHelpText: ComponentProps<FormHelpTextProps>;
+    FormStack: ComponentProps<FormStackProps>;
     Grid: ComponentProps<GridProps>;
     Header: ComponentProps<HeaderProps>;
     Heading: ComponentProps<HeadingProps>;

package/cjs/Form/Form.d.ts

@@ -102,10 +102,19 @@ declare const Form: import("../internals/types").InternalRefForwardingComponent<
         [x: string]: string | undefined;
     }>> | undefined;
 }, never> & {
+    Stack: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormStack").FormStackProps, never> & Record<string, never>;
     Control: FormControlComponent;
-    ControlLabel: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
+    Label: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
     ErrorMessage: import("../internals/types").InternalRefForwardingComponent<"div", import("../FormErrorMessage").FormErrorMessageProps, never> & Record<string, never>;
     Group: import("../internals/types").InternalRefForwardingComponent<"div", import("../FormGroup").FormGroupProps, never> & Record<string, never>;
+    Text: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormHelpText").FormHelpTextProps, never> & Record<string, never>;
+    /**
+     * @deprecated Use `Form.Label` instead
+     */
+    ControlLabel: import("../internals/types").InternalRefForwardingComponent<"label", import("../FormControlLabel").FormControlLabelProps, never> & Record<string, never>;
+    /**
+     * @deprecated Use `Form.Text` instead
+     */
     HelpText: import("../internals/types").InternalRefForwardingComponent<"span", import("../FormHelpText").FormHelpTextProps, never> & Record<string, never>;
 };
 export default Form;

package/cjs/Form/Form.js

@@ -5,28 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _FormControl = _interopRequireDefault(require("../FormControl"));
 var _FormControlLabel = _interopRequireDefault(require("../FormControlLabel"));
 var _FormErrorMessage = _interopRequireDefault(require("../FormErrorMessage"));
 var _FormGroup = _interopRequireDefault(require("../FormGroup"));
 var _FormHelpText = _interopRequireDefault(require("../FormHelpText"));
+var _FormStack = _interopRequireDefault(require("../FormStack"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _useSchemaModel = _interopRequireDefault(require("./hooks/useSchemaModel"));
 var _useFormValidate = _interopRequireDefault(require("./hooks/useFormValidate"));
 var _useFormValue = _interopRequireDefault(require("./hooks/useFormValue"));
-var _useFormClassNames = _interopRequireDefault(require("./hooks/useFormClassNames"));
 var _useFormRef = _interopRequireDefault(require("./hooks/useFormRef"));
 var _utils = require("../internals/utils");
 var _schemaTyped = require("schema-typed");
 var _hooks = require("../internals/hooks");
 var _FormContext = require("./FormContext");
 var _CustomProvider = require("../CustomProvider");
+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 defaultSchema = (0, _schemaTyped.SchemaModel)({});
 const Subcomponents = {
+  Stack: _FormStack.default,
   Control: _FormControl.default,
-  ControlLabel: _FormControlLabel.default,
+  Label: _FormControlLabel.default,
   ErrorMessage: _FormErrorMessage.default,
   Group: _FormGroup.default,
+  Text: _FormHelpText.default,
+  /**
+   * @deprecated Use `Form.Label` instead
+   */
+  ControlLabel: _FormControlLabel.default,
+  /**
+   * @deprecated Use `Form.Text` instead
+   */
   HelpText: _FormHelpText.default
 };
 
@@ -40,18 +52,16 @@ const Form = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _CustomProvider.useCustom)('Form', props);
   const {
     checkTrigger = 'change',
-    classPrefix = 'form',
     errorFromContext = true,
     formDefaultValue = {},
     formValue: controlledFormValue,
     formError: controlledFormError,
-    fluid,
     nestedField = false,
-    layout = 'vertical',
+    fluid,
+    layout,
     model: formModel = defaultSchema,
     readOnly,
     plaintext,
-    className,
     children,
     disabled,
     onSubmit,
@@ -95,15 +105,6 @@ const Form = (0, _utils.forwardRef)((props, ref) => {
     resetErrors,
     cleanErrorForField
   } = (0, _useFormValidate.default)(controlledFormError, formValidateProps);
-  const classes = (0, _useFormClassNames.default)({
-    classPrefix,
-    className,
-    fluid,
-    layout,
-    readOnly,
-    plaintext,
-    disabled
-  });
   const submit = (0, _hooks.useEventCallback)(event => {
     // Check the form before submitting
     if (check()) {
@@ -177,16 +178,26 @@ const Form = (0, _utils.forwardRef)((props, ref) => {
     checkFieldForNextValue,
     checkFieldAsyncForNextValue
   };
-  return /*#__PURE__*/_react.default.createElement("form", (0, _extends2.default)({}, rest, {
+  const formChild = (0, _react.useMemo)(() => {
+    return fluid || layout ? /*#__PURE__*/_react.default.createElement(_FormStack.default, {
+      fluid: fluid,
+      layout: layout
+    }, children) : children;
+  }, [fluid, children, layout]);
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: "form",
+    "data-rs": "form",
+    "data-disabled": disabled,
+    "data-readonly": readOnly,
+    "data-plaintext": plaintext,
     ref: formRef,
     onSubmit: handleSubmit,
-    onReset: handleReset,
-    className: classes
-  }), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {
+    onReset: handleReset
+  }, rest), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {
     value: formContextValue
   }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueProvider, {
     value: formValue
-  }, children)));
+  }, formChild)));
 }, Subcomponents);
 Form.displayName = 'Form';
 var _default = exports.default = Form;

package/cjs/FormControl/FormControl.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import Input from '../Input';
+import { BoxProps } from '../internals/Box';
 import type { CheckType } from 'schema-typed';
-import type { PlacementCorners, FormControlBaseProps, WithAsProps, CheckTriggerType } from '../internals/types';
+import type { PlacementCorners, FormControlBaseProps, CheckTriggerType } from '../internals/types';
 /**
  * Props that FormControl passes to its accepter
  */
 export type FormControlAccepterProps<ValueType = any> = FormControlBaseProps<ValueType>;
-export interface FormControlProps<ValueType = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLFormElement>, 'value' | 'onChange'> {
+export interface FormControlProps<ValueType = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLFormElement>, 'value' | 'onChange'> {
     /** Proxied components */
     accepter?: React.ElementType;
     /**

package/cjs/FormControl/FormControl.js

@@ -12,6 +12,7 @@ var _FormContext = _interopRequireWildcard(require("../Form/FormContext"));
 var _useRegisterModel = _interopRequireDefault(require("./hooks/useRegisterModel"));
 var _useField = _interopRequireDefault(require("./hooks/useField"));
 var _Toggle = _interopRequireDefault(require("../Toggle"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _FormGroup = require("../FormGroup");
@@ -45,7 +46,7 @@ const FormControl = (0, _utils.forwardRef)((props, ref) => {
     checkFieldAsyncForNextValue
   } = (0, _react.useContext)(_FormContext.default);
   const {
-    as: Component = 'div',
+    as,
     accepter: AccepterComponent = _Input.default,
     classPrefix = 'form-control',
     checkAsync,
@@ -133,7 +134,8 @@ const FormControl = (0, _utils.forwardRef)((props, ref) => {
     // need to distinguish between undefined and null
     [valueKey]: fieldValue === undefined ? defaultValue : fieldValue
   };
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     className: classes,
     ref: ref,
     "data-testid": "form-control-wrapper"

package/cjs/FormControlLabel/FormControlLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface FormControlLabelProps extends WithAsProps, React.LabelHTMLAttributes<HTMLLabelElement> {
+import { BoxProps } from '../internals/Box';
+export interface FormControlLabelProps extends BoxProps, React.LabelHTMLAttributes<HTMLLabelElement> {
     /** Attribute of the html label tag, defaults to the controlId of the FormGroup */
     htmlFor?: string;
 }

package/cjs/FormControlLabel/FormControlLabel.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");
 var _CustomProvider = require("../CustomProvider");
@@ -23,7 +24,7 @@ const FormControlLabel = (0, _utils.forwardRef)((props, ref) => {
     controlId
   } = (0, _FormGroup.useFormGroup)();
   const {
-    as: Component = 'label',
+    as = 'label',
     classPrefix = 'form-control-label',
     htmlFor = controlId,
     className,
@@ -35,7 +36,8 @@ const FormControlLabel = (0, _utils.forwardRef)((props, ref) => {
     merge
   } = (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,
     id: id,
     htmlFor: htmlFor
   }, rest, {

package/cjs/FormErrorMessage/FormErrorMessage.d.ts

@@ -1,5 +1,6 @@
-import type { PlacementCorners, WithAsProps } from '../internals/types';
-export interface FormErrorMessageProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners } from '../internals/types';
+export interface FormErrorMessageProps extends BoxProps {
     /** Show error messages */
     show?: boolean;
     /** The placement of error messages */

package/cjs/FormErrorMessage/FormErrorMessage.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");
 var _CustomProvider = require("../CustomProvider");
@@ -18,7 +19,7 @@ const FormErrorMessage = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('FormErrorMessage', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'form-error-message',
     className,
     show,
@@ -33,7 +34,8 @@ const FormErrorMessage = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = withPrefix('show');
   const wrapperClasses = merge(className, prefix('wrapper'));
-  return show ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return show ? /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     "data-placement": (0, _utils.kebabPlace)(placement),
     className: wrapperClasses

package/cjs/FormGroup/FormGroup.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface FormGroupProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface FormGroupProps extends BoxProps {
     /**
      * Sets id on `<Form.Control>` and `htmlFor` on `<Form.ControlLabel>`.
      * And generate ʻaria-labelledby` and ʻaria-describedby` for `<Form.Control>`.

package/cjs/FormGroup/FormGroup.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.useFormGroup = exports.default = 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");
@@ -49,7 +50,7 @@ const FormGroup = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('FormGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'form-group',
     controlId: controlIdProp,
     className,
@@ -66,7 +67,9 @@ const FormGroup = (0, _utils.forwardRef)((props, ref) => {
   }), [controlId]);
   return /*#__PURE__*/_react.default.createElement(FormGroupContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes,
     role: "group"

package/cjs/FormHelpText/FormHelpText.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface FormHelpTextProps extends WithAsProps, React.HTMLAttributes<HTMLSpanElement> {
+import { BoxProps } from '../internals/Box';
+export interface FormHelpTextProps extends BoxProps, React.HTMLAttributes<HTMLSpanElement> {
     /** Whether to show through the Tooltip component */
     tooltip?: boolean;
 }