rsuite 6.0.0-canary-2025031915 → 6.0.0-canary-2025032014

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;
 }

package/cjs/FormHelpText/FormHelpText.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _HelpOutline = _interopRequireDefault(require("@rsuite/icons/HelpOutline"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Whisper = _interopRequireDefault(require("../Whisper"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _FormGroup = require("../FormGroup");
@@ -25,7 +26,7 @@ const FormHelpText = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('FormHelpText', props);
   const {
-    as: Component = 'span',
+    as = 'span',
     classPrefix = 'form-help-text',
     className,
     tooltip,
@@ -47,7 +48,8 @@ const FormHelpText = (0, _utils.forwardRef)((props, ref) => {
       speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
         id: id
       }, rest), children)
-    }, /*#__PURE__*/_react.default.createElement(Component, {
+    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+      as: as,
       role: "img",
       "aria-label": "help",
       className: classes
@@ -55,7 +57,8 @@ const FormHelpText = (0, _utils.forwardRef)((props, ref) => {
       "aria-hidden": true
     })));
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     id: id
   }, rest, {
     ref: ref,

package/cjs/FormStack/FormStack.d.ts

@@ -0,0 +1,27 @@
+import { BoxProps } from '../internals/Box';
+export interface FormStackProps extends BoxProps {
+    /**
+     * Set the layout of the elements within the form.
+     * 'horizontal': Left and right columns layout.
+     * 'vertical': Top and bottom layout.
+     * 'inline': Elements are placed inline.
+     */
+    layout?: 'horizontal' | 'vertical' | 'inline';
+    /**
+     * The fluid property allows the form elements to fill 100% of the container width.
+     * Only valid in vertical layouts.
+     */
+    fluid?: boolean;
+    /**
+     * Define the spacing between immediate children.
+     * Can be a number, string, or an array of numbers/strings for responsive spacing.
+     */
+    spacing?: number | string | (number | string)[];
+}
+/**
+ * The `<Form.Stack>` component is a quick layout component through Flexbox,
+ * supporting vertical and horizontal stacking, custom spacing and line wrapping.
+ * @see https://rsuitejs.com/components/form/
+ */
+declare const FormStack: import("../internals/types").InternalRefForwardingComponent<"span", FormStackProps, never> & Record<string, never>;
+export default FormStack;

package/cjs/FormStack/FormStack.js

@@ -0,0 +1,50 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _CustomProvider = require("../CustomProvider");
+/**
+ * The `<Form.Stack>` component is a quick layout component through Flexbox,
+ * supporting vertical and horizontal stacking, custom spacing and line wrapping.
+ * @see https://rsuitejs.com/components/form/
+ */
+const FormStack = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('FormStack', props);
+  const {
+    as,
+    classPrefix = 'form-stack',
+    className,
+    children,
+    layout = 'vertical',
+    fluid,
+    spacing,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(layout, {
+    fluid
+  }));
+  const styles = (0, _utils.mergeStyles)(style, cssVar('spacing', spacing, _utils.getCssValue));
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    ref: ref,
+    style: styles,
+    className: classes
+  }, rest), children);
+});
+FormStack.displayName = 'FormStack';
+var _default = exports.default = FormStack;

package/cjs/FormStack/index.d.ts

@@ -0,0 +1,4 @@
+import FormStack from './FormStack';
+export type { FormStackProps } from './FormStack';
+export { FormStack };
+export default FormStack;

package/cjs/FormStack/index.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _FormStack = _interopRequireDefault(require("./FormStack"));
+exports.FormStack = _FormStack.default;
+// export types
+// export components
+var _default = exports.default = _FormStack.default;

package/cjs/index.d.ts

@@ -33,6 +33,7 @@ export * from './Breadcrumb';
 export * from './Pagination';
 export * from './Steps';
 export * from './Form';
+export * from './FormStack';
 export * from './FormGroup';
 export * from './FormErrorMessage';
 export * from './FormControlLabel';

package/cjs/index.js

@@ -212,6 +212,12 @@ Object.keys(_Form).forEach(function (key) {
   if (key in exports && exports[key] === _Form[key]) return;
   exports[key] = _Form[key];
 });
+var _FormStack = require("./FormStack");
+Object.keys(_FormStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FormStack[key]) return;
+  exports[key] = _FormStack[key];
+});
 var _FormGroup = require("./FormGroup");
 Object.keys(_FormGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/rsuite-no-reset-rtl.css

@@ -3858,9 +3858,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-content {
   flex: 1 1 auto;
 }
-.rs-form-plaintext .rs-form-control-label {
-  color: var(--rs-text-secondary);
-}
 .rs-picker-toolbar {
   padding: 10px;
   border-top: 1px solid var(--rs-divider-border);
@@ -4954,31 +4951,72 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-footer {
   flex: 0 0 auto;
 }
-.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;
+.rs-form-stack {
+  --rs-form-stack-dir: column;
+  --rs-form-stack-spacing: calc(var(--rs-spacing) * 4);
   display: flex;
-  flex-direction: var(--rs-form-direction);
-  gap: var(--rs-form-spacing);
+  flex-direction: var(--rs-form-stack-dir);
+  gap: var(--rs-form-stack-spacing);
   align-items: flex-start;
 }
-.rs-form-inline {
-  --rs-form-direction: row;
+.rs-form-stack-inline {
+  --rs-form-stack-dir: row;
+}
+.rs-form-group {
+  position: relative;
+  display: flex;
+  flex-direction: var(--rs-form-group-direction);
+  gap: var(--rs-form-group-spacing);
+}
+.rs-form-group .rs-input {
+  display: inline-block;
+}
+.rs-form-group textarea.rs-input {
+  vertical-align: bottom;
+}
+.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;
+}
+.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-fluid .rs-form-control-wrapper {
+.rs-form-stack-horizontal .rs-form-group {
+  align-items: baseline;
+}
+.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-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-stack-inline {
+  --rs-form-group-direction: row;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+}
+.rs-form-stack-inline .rs-form-group {
+  align-items: center;
+}
+.rs-form-stack-fluid .rs-form-group {
   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 {
   width: 100%;
 }
-.rs-form-fluid.rs-form-vertical .rs-form-group .rs-input-group {
+.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-form-control-wrapper {
-  max-width: 100%;
+.rs-form-stack-fluid.rs-form-stack-vertical .rs-form-group .rs-input-group {
+  width: 100%;
 }
 .rs-form-control-wrapper {
   position: relative;
@@ -4991,24 +5029,22 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   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 {
@@ -5016,45 +5052,8 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border: none;
   outline: none;
 }
-.rs-form-group {
-  position: relative;
-  display: flex;
-  flex-direction: var(--rs-form-group-direction);
-  gap: var(--rs-form-group-spacing);
-}
-.rs-form-group .rs-input {
-  display: inline-block;
-}
-.rs-form-group textarea.rs-input {
-  vertical-align: bottom;
-}
-.rs-form-vertical .rs-form-group .rs-form-control-label {
-  display: block;
-}
-.rs-form-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 {
-  align-items: baseline;
-}
-.rs-form-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 {
-  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-group-direction: row;
-  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
-}
-.rs-form-inline .rs-form-group {
-  align-items: center;
+[data-rs='form'][data-plaintext='true'] .rs-form-control-label {
+  color: var(--rs-text-secondary);
 }
 @keyframes errorMessageSlideUpIn {
   0% {
@@ -5239,6 +5238,18 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-form-error-message-wrapper:where([data-placement='left-end'], [data-placement='right-end']) .rs-form-error-message-arrow::after {
   bottom: 4px;
 }
+.rs-form-help-text {
+  display: block;
+  color: var(--rs-text-secondary);
+  min-height: 20px;
+  line-height: 1.66666667;
+  font-size: var(--rs-font-size-xs);
+}
+.rs-form-help-text-tooltip {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--rs-font-size-md);
+}
 :root {
   --rs-grid-gutter: calc(var(--rs-spacing) * 3);
   --rs-row-gutter: calc(var(--rs-grid-gutter) / -2);
@@ -7818,18 +7829,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-header {
   flex: 0 0 auto;
 }
-.rs-form-help-text {
-  display: block;
-  color: var(--rs-text-secondary);
-  min-height: 20px;
-  line-height: 1.66666667;
-  font-size: var(--rs-font-size-xs);
-}
-.rs-form-help-text-tooltip {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--rs-font-size-md);
-}
 .rs-btn-icon {
   padding: calc((var(--rs-btn-size) - var(--rs-btn-icon-size)) / 2);
   line-height: var(--rs-btn-icon-size);
@@ -14545,7 +14544,7 @@ kbd.rs-text {
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
-  padding-inline-end: 4px !important;
+  padding-inline: calc(var(--rs-input-group-inside-btn-padding) * 2 - var(--rs-picker-toggle-border-width));
 }
 .rs-picker-loader {
   width: var(--rs-picker-loader-size);