rsuite 5.64.2 → 5.65.1

package/Table/styles/index.less

@@ -34,7 +34,7 @@
     bottom: 0;
     width: 100%;
     z-index: 4;
-    border-top: 1px solid var(--rs-border-secondary);
+    border-top: 1px solid var(--rs-table-border-color);
     padding: 10px;
     background-color: var(--rs-bg-card);
   }
@@ -160,7 +160,7 @@
     position: absolute;
     white-space: normal;
     background-color: var(--rs-bg-card);
-    border-bottom: 1px solid var(--rs-border-secondary);
+    border-bottom: 1px solid var(--rs-table-border-color);
 
     &.first {
       border-left-width: 0;
@@ -204,7 +204,7 @@
     }
 
     &-rowspan {
-      border-bottom: 1px solid var(--rs-border-secondary) !important;
+      border-bottom: 1px solid var(--rs-table-border-color) !important;
     }
   }
 
@@ -308,11 +308,11 @@
   }
 
   &-bordered {
-    border: 1px solid var(--rs-border-secondary);
+    border: 1px solid var(--rs-table-border-color);
   }
 
   &-cell-bordered &-cell {
-    border-right: 1px solid var(--rs-border-secondary);
+    border-right: 1px solid var(--rs-table-border-color);
   }
 
   &-column-group {
@@ -323,7 +323,7 @@
     width: 100%;
 
     &-header {
-      border-bottom: 1px solid var(--rs-border-secondary);
+      border-bottom: 1px solid var(--rs-table-border-color);
       position: absolute;
       width: 100%;
 
@@ -335,11 +335,15 @@
 
     &-cell {
       position: absolute;
-      border-right: 1px solid var(--rs-border-secondary);
+      border-right: 1px solid var(--rs-table-border-color);
     }
   }
 }
 
+.rs-table-row:not(.rs-table-row-rowspan) {
+  border-bottom: 1px solid var(--rs-table-border-color);
+}
+
 // Tree Table
 
 .rs-table-cell-expand-wrapper {

package/TagInput/styles/index.css

@@ -132,6 +132,8 @@
   --rs-picker-value: var(--rs-primary-700);
   --rs-picker-count-bg: var(--rs-primary-500);
   --rs-picker-count-text: #fff;
+  --rs-picker-state-error: var(--rs-state-error);
+  --rs-picker-state-error-outline: var(--rs-state-error-outline);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -2792,13 +2794,19 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
       -ms-flex-align: center;
           align-items: center;
 }
-.rs-picker-error > .rs-input-group {
-  border-color: #f44336 !important;
-  border-color: var(--rs-state-error) !important;
+.rs-picker-error > .rs-picker-input-group {
+  border-color: #f44336;
+  border-color: var(--rs-picker-state-error);
+}
+.rs-picker-error > .rs-picker-input-group:hover {
+  border-color: #f44336;
+  border-color: var(--rs-picker-state-error);
 }
-.rs-picker-error > .rs-input-group:focus-within {
-  outline: 3px solid rgb(from #f44336 r g b / 25%) !important;
-  outline: var(--rs-state-error-outline) !important;
+.rs-picker-error > .rs-picker-input-group:focus-within {
+  border-color: #f44336;
+  border-color: var(--rs-picker-state-error);
+  outline: 3px solid rgb(from #f44336 r g b / 25%);
+  outline: var(--rs-picker-state-error-outline);
 }
 .rs-picker-toggle {
   display: -webkit-inline-box;

package/TagPicker/styles/index.css

@@ -132,6 +132,8 @@
   --rs-picker-value: var(--rs-primary-700);
   --rs-picker-count-bg: var(--rs-primary-500);
   --rs-picker-count-text: #fff;
+  --rs-picker-state-error: var(--rs-state-error);
+  --rs-picker-state-error-outline: var(--rs-state-error-outline);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -2792,13 +2794,19 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
       -ms-flex-align: center;
           align-items: center;
 }
-.rs-picker-error > .rs-input-group {
-  border-color: #f44336 !important;
-  border-color: var(--rs-state-error) !important;
+.rs-picker-error > .rs-picker-input-group {
+  border-color: #f44336;
+  border-color: var(--rs-picker-state-error);
+}
+.rs-picker-error > .rs-picker-input-group:hover {
+  border-color: #f44336;
+  border-color: var(--rs-picker-state-error);
 }
-.rs-picker-error > .rs-input-group:focus-within {
-  outline: 3px solid rgb(from #f44336 r g b / 25%) !important;
-  outline: var(--rs-state-error-outline) !important;
+.rs-picker-error > .rs-picker-input-group:focus-within {
+  border-color: #f44336;
+  border-color: var(--rs-picker-state-error);
+  outline: 3px solid rgb(from #f44336 r g b / 25%);
+  outline: var(--rs-picker-state-error-outline);
 }
 .rs-picker-toggle {
   display: -webkit-inline-box;

package/Uploader/styles/index.css

@@ -1248,6 +1248,9 @@
   opacity: 0.3;
   cursor: not-allowed;
 }
+.rs-uploader-file-item-disabled:hover {
+  background-color: transparent !important;
+}
 .rs-uploader-picture .rs-uploader-file-item-disabled .rs-uploader-file-item-status {
   cursor: not-allowed;
 }

package/Uploader/styles/index.less

@@ -18,6 +18,10 @@
     opacity: 0.3;
     cursor: not-allowed;
 
+    &:hover {
+      background-color: transparent !important;
+    }
+
     .rs-uploader-picture & .rs-uploader-file-item-status {
       cursor: not-allowed;
     }

package/VStack/package.json

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

package/cjs/DatePicker/DatePicker.js

@@ -30,7 +30,7 @@ var _utils2 = require("./utils");
 var _useMonthView2 = _interopRequireDefault(require("./hooks/useMonthView"));
 var _useFocus2 = _interopRequireDefault(require("./hooks/useFocus"));
 var _useCustomizedInput2 = _interopRequireDefault(require("./hooks/useCustomizedInput"));
-var _templateObject;
+var _templateObject, _templateObject2;
 var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
@@ -508,9 +508,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     inside: true,
     size: size,
     disabled: disabled,
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["input-group"]))),
     onClick: handleClick
   }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
-    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
+    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
   }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({
     "aria-haspopup": "dialog",

package/cjs/DateRangePicker/DateRangePicker.js

@@ -31,7 +31,7 @@ var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _Header = _interopRequireDefault(require("./Header"));
 var _useDateDisabled = _interopRequireDefault(require("./hooks/useDateDisabled"));
 var _useCustomizedInput2 = _interopRequireDefault(require("../DatePicker/hooks/useCustomizedInput"));
-var _templateObject;
+var _templateObject, _templateObject2;
 var _excluded = ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onExit", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
@@ -783,10 +783,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     plaintext: plaintext
   }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _date.calendarOnlyProps)), {
     inside: true,
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["input-group"]))),
     disabled: disabled,
     size: size
   }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
-    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
+    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
   }, label), /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({
     "aria-haspopup": "dialog",

package/cjs/Drawer/Drawer.js

@@ -54,6 +54,7 @@ var Drawer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
     ref: ref,
+    overflow: false,
     classPrefix: classPrefix,
     className: classes,
     animation: animation,

package/cjs/FormControl/hooks/useField.d.ts

@@ -10,7 +10,7 @@ interface FieldProps {
 }
 declare function useField(props: FieldProps): {
     fieldValue: any;
-    fieldError: any;
+    fieldError: import("react").ReactNode;
     setFieldValue: (fieldName: string, fieldValue: any) => {
         [x: string]: any;
     };

package/cjs/FormControl/hooks/useField.js

@@ -6,9 +6,20 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
-var _get2 = _interopRequireDefault(require("lodash/get"));
+var _get = _interopRequireDefault(require("lodash/get"));
 var _set = _interopRequireDefault(require("lodash/set"));
 var _utils = require("../utils");
+function getErrorMessage(error) {
+  var _error$array;
+  /**
+   * When using some components as the field, such as TagInput, and using `ArrayType().of` as the validation rule,
+   * the error object won't contain the errorMessage directly. @see https://github.com/rsuite/rsuite/issues/3866
+   */
+  if (error !== null && error !== void 0 && error.array && ((_error$array = error.array) === null || _error$array === void 0 ? void 0 : _error$array.length) > 0) {
+    return error.array[0].errorMessage;
+  }
+  return error === null || error === void 0 ? void 0 : error.errorMessage;
+}
 function useField(props) {
   var name = props.name,
     formValue = props.formValue,
@@ -21,21 +32,20 @@ function useField(props) {
     if (typeof value !== 'undefined') {
       return value;
     }
-    return nestedField ? (0, _get2.default)(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
+    return nestedField ? (0, _get.default)(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
   }, [formValue, name, nestedField, value]);
   var fieldError = (0, _react.useMemo)(function () {
     if (typeof errorMessage !== 'undefined' || !errorFromContext) {
       return errorMessage;
     }
     if (nestedField) {
-      var _get;
-      return (_get = (0, _get2.default)(formError, (0, _utils.nameToPath)(name))) === null || _get === void 0 ? void 0 : _get.errorMessage;
+      return getErrorMessage((0, _get.default)(formError, (0, _utils.nameToPath)(name)));
     }
     var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];
     if (typeof fieldError === 'string') {
       return fieldError;
     }
-    return fieldError === null || fieldError === void 0 ? void 0 : fieldError.errorMessage;
+    return getErrorMessage(fieldError);
   }, [errorFromContext, errorMessage, formError, name, nestedField]);
   var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {
     var _extends2;

package/cjs/Message/Message.js

@@ -12,9 +12,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("../internals/constants");
 var _statusIcons = require("../internals/constants/statusIcons");
 var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _propTypes2 = require("../internals/propTypes");
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
-var _ToastContext = _interopRequireDefault(require("../toaster/ToastContext"));
+var _useDelayedClosure2 = _interopRequireDefault(require("../toaster/hooks/useDelayedClosure"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var _excluded = ["as", "bordered", "centered", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -51,12 +52,15 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var isMounted = (0, _hooks.useIsMounted)();
-  var _useContext = (0, _react.useContext)(_ToastContext.default),
-    usedToaster = _useContext.usedToaster;
+  var targetRef = _react.default.useRef(null);
 
   // Timed close message
-  var _useTimeout = (0, _hooks.useTimeout)(onClose, duration, usedToaster && duration > 0),
-    clear = _useTimeout.clear;
+  var _useDelayedClosure = (0, _useDelayedClosure2.default)({
+      targetRef: targetRef,
+      onClose: onClose,
+      duration: duration
+    }),
+    clear = _useDelayedClosure.clear;
   var handleClose = (0, _hooks.useEventCallback)(function (event) {
     setDisplay('hiding');
     onClose === null || onClose === void 0 ? void 0 : onClose(event);
@@ -78,7 +82,7 @@ var Message = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "alert"
   }, rest, {
-    ref: ref,
+    ref: (0, _utils.mergeRefs)(targetRef, ref),
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["container"])))

package/cjs/Notification/Notification.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
-export type MessageType = 'info' | 'success' | 'warning' | 'error';
+import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../internals/types';
 export interface NotificationProps extends WithAsProps {
     /** Title of the message */
     header?: React.ReactNode;
@@ -11,15 +10,20 @@ export interface NotificationProps extends WithAsProps {
      *
      * @default 4500
      * @deprecated Use `toaster.push(<Notification />, { duration: 4500 })` instead.
+     * @internal
      */
     duration?: number;
     /**
      * The remove button is displayed.
      */
     closable?: boolean;
-    /** Type of message */
-    type?: MessageType;
-    /** Callback after the message is removed */
+    /**
+     * Type of message
+     */
+    type?: TypeAttributes.Status;
+    /**
+     * Callback after the message is removed
+     */
     onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**

package/cjs/Notification/Notification.js

@@ -13,7 +13,8 @@ var _statusIcons = require("../internals/constants/statusIcons");
 var _hooks = require("../internals/hooks");
 var _propTypes2 = require("../internals/propTypes");
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
-var _ToastContext = _interopRequireDefault(require("../toaster/ToastContext"));
+var _utils = require("../internals/utils");
+var _useDelayedClosure2 = _interopRequireDefault(require("../toaster/hooks/useDelayedClosure"));
 var _templateObject, _templateObject2;
 var _excluded = ["as", "classPrefix", "closable", "duration", "className", "type", "header", "children", "onClose"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -45,12 +46,15 @@ var Notification = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var isMounted = (0, _hooks.useIsMounted)();
-  var _useContext = (0, _react.useContext)(_ToastContext.default),
-    usedToaster = _useContext.usedToaster;
+  var targetRef = _react.default.useRef(null);
 
   // Timed close message
-  var _useTimeout = (0, _hooks.useTimeout)(onClose, duration, usedToaster && duration > 0),
-    clear = _useTimeout.clear;
+  var _useDelayedClosure = (0, _useDelayedClosure2.default)({
+      targetRef: targetRef,
+      onClose: onClose,
+      duration: duration
+    }),
+    clear = _useDelayedClosure.clear;
 
   // Click to trigger to close the message
   var handleClose = (0, _hooks.useEventCallback)(function (event) {
@@ -84,7 +88,7 @@ var Notification = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "alert"
   }, rest, {
-    ref: ref,
+    ref: (0, _utils.mergeRefs)(targetRef, ref),
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["content"])))

package/cjs/Stack/HStack.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StackProps } from './Stack';
+export interface HStackProps extends Omit<StackProps, 'direction'> {
+    /**
+     * Reverse the order of the children in the stack
+     */
+    reverse?: boolean;
+}
+declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<unknown>>;
+export default HStack;

package/cjs/Stack/HStack.js

@@ -0,0 +1,29 @@
+'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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Stack = _interopRequireDefault(require("./Stack"));
+var _excluded = ["reverse", "spacing", "childrenRenderMode"];
+var HStack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var reverse = props.reverse,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 6 : _props$spacing,
+    _props$childrenRender = props.childrenRenderMode,
+    childrenRenderMode = _props$childrenRender === void 0 ? 'clone' : _props$childrenRender,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var direction = reverse ? 'row-reverse' : 'row';
+  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
+    spacing: spacing,
+    childrenRenderMode: childrenRenderMode
+  }, rest, {
+    direction: direction,
+    ref: ref
+  }));
+});
+HStack.displayName = 'HStack';
+var _default = exports.default = HStack;

package/cjs/Stack/VStack.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StackProps } from './Stack';
+export interface VStackProps extends Omit<StackProps, 'direction'> {
+    reverse?: boolean;
+}
+declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<unknown>>;
+export default VStack;

package/cjs/Stack/VStack.js

@@ -0,0 +1,32 @@
+'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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Stack = _interopRequireDefault(require("./Stack"));
+var _excluded = ["reverse", "spacing", "alignItems", "childrenRenderMode"];
+var VStack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var reverse = props.reverse,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 6 : _props$spacing,
+    _props$alignItems = props.alignItems,
+    alignItems = _props$alignItems === void 0 ? 'flex-start' : _props$alignItems,
+    _props$childrenRender = props.childrenRenderMode,
+    childrenRenderMode = _props$childrenRender === void 0 ? 'clone' : _props$childrenRender,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var direction = reverse ? 'column-reverse' : 'column';
+  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
+    spacing: spacing,
+    childrenRenderMode: childrenRenderMode,
+    alignItems: alignItems
+  }, rest, {
+    direction: direction,
+    ref: ref
+  }));
+});
+VStack.displayName = 'VStack';
+var _default = exports.default = VStack;

package/cjs/Stack/index.d.ts

@@ -1,3 +1,7 @@
 import Stack from './Stack';
 export type { StackProps } from './Stack';
+export type { HStackProps } from './HStack';
+export type { VStackProps } from './VStack';
+export { default as HStack } from './HStack';
+export { default as VStack } from './VStack';
 export default Stack;

package/cjs/Stack/index.js

@@ -3,6 +3,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.VStack = exports.HStack = void 0;
 var _Stack = _interopRequireDefault(require("./Stack"));
+var _HStack = _interopRequireDefault(require("./HStack"));
+exports.HStack = _HStack.default;
+var _VStack = _interopRequireDefault(require("./VStack"));
+exports.VStack = _VStack.default;
 var _default = exports.default = _Stack.default;

package/cjs/index.d.ts

@@ -167,8 +167,8 @@ export { default as Footer } from './Footer';
 export type { FooterProps } from './Footer';
 export { default as Divider } from './Divider';
 export type { DividerProps } from './Divider';
-export { default as Stack } from './Stack';
-export type { StackProps } from './Stack';
+export { default as Stack, HStack, VStack } from './Stack';
+export type { StackProps, HStackProps, VStackProps } from './Stack';
 export { default as Schema } from './Schema';
 export { default as Animation } from './Animation';
 export type { TransitionProps, SlideProps, CollapseProps, FadeProps, BounceProps } from './Animation';

package/cjs/index.js

@@ -3,7 +3,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.useToaster = exports.useMediaQuery = exports.useFormClassNames = exports.useBreakpointValue = exports.toaster = exports.Whisper = exports.VisuallyHidden = exports.Uploader = exports.TreePicker = exports.Tree = exports.Tooltip = exports.Toggle = exports.Timeline = exports.Text = exports.TagPicker = exports.TagInput = exports.TagGroup = exports.Tag = exports.Tabs = exports.Table = exports.Steps = exports.Stack = exports.Slider = exports.Sidenav = exports.Sidebar = exports.SelectPicker = exports.Schema = exports.SafeAnchor = exports.Row = exports.Rate = exports.RangeSlider = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.Progress = exports.Popover = exports.Placeholder = exports.PanelGroup = exports.Panel = exports.Pagination = exports.Notification = exports.Navbar = exports.Nav = exports.MultiCascader = exports.MultiCascadeTree = exports.Modal = exports.Message = exports.MaskedInput = exports.Loader = exports.List = exports.InputPicker = exports.InputNumber = exports.InputGroup = exports.Input = exports.InlineEdit = exports.IconButton = exports.Highlight = exports.HeadingGroup = exports.Heading = exports.Header = exports.Grid = exports.Form = exports.Footer = exports.FlexboxGrid = exports.Dropdown = exports.Drawer = exports.Divider = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.DOMHelper = exports.CustomProvider = exports.Content = exports.Container = exports.Col = exports.CheckboxGroup = exports.Checkbox = exports.CheckTreePicker = exports.CheckTree = exports.CheckPicker = exports.Cascader = exports.CascadeTree = exports.Carousel = exports.Calendar = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = exports.Breadcrumb = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoComplete = exports.Animation = exports.Affix = exports.Accordion = void 0;
+exports.useToaster = exports.useMediaQuery = exports.useFormClassNames = exports.useBreakpointValue = exports.toaster = exports.Whisper = exports.VisuallyHidden = exports.VStack = exports.Uploader = exports.TreePicker = exports.Tree = exports.Tooltip = exports.Toggle = exports.Timeline = exports.Text = exports.TagPicker = exports.TagInput = exports.TagGroup = exports.Tag = exports.Tabs = exports.Table = exports.Steps = exports.Stack = exports.Slider = exports.Sidenav = exports.Sidebar = exports.SelectPicker = exports.Schema = exports.SafeAnchor = exports.Row = exports.Rate = exports.RangeSlider = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.Progress = exports.Popover = exports.Placeholder = exports.PanelGroup = exports.Panel = exports.Pagination = exports.Notification = exports.Navbar = exports.Nav = exports.MultiCascader = exports.MultiCascadeTree = exports.Modal = exports.Message = exports.MaskedInput = exports.Loader = exports.List = exports.InputPicker = exports.InputNumber = exports.InputGroup = exports.Input = exports.InlineEdit = exports.IconButton = exports.Highlight = exports.HeadingGroup = exports.Heading = exports.Header = exports.HStack = exports.Grid = exports.Form = exports.Footer = exports.FlexboxGrid = exports.Dropdown = exports.Drawer = exports.Divider = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.DOMHelper = exports.CustomProvider = exports.Content = exports.Container = exports.Col = exports.CheckboxGroup = exports.Checkbox = exports.CheckTreePicker = exports.CheckTree = exports.CheckPicker = exports.Cascader = exports.CascadeTree = exports.Carousel = exports.Calendar = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = exports.Breadcrumb = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoComplete = exports.Animation = exports.Affix = exports.Accordion = void 0;
 var _Text = _interopRequireDefault(require("./Text"));
 exports.Text = _Text.default;
 var _Heading = _interopRequireDefault(require("./Heading"));
@@ -175,8 +175,10 @@ var _Footer = _interopRequireDefault(require("./Footer"));
 exports.Footer = _Footer.default;
 var _Divider = _interopRequireDefault(require("./Divider"));
 exports.Divider = _Divider.default;
-var _Stack = _interopRequireDefault(require("./Stack"));
+var _Stack = _interopRequireWildcard(require("./Stack"));
 exports.Stack = _Stack.default;
+exports.HStack = _Stack.HStack;
+exports.VStack = _Stack.VStack;
 var _Schema = _interopRequireDefault(require("./Schema"));
 exports.Schema = _Schema.default;
 var _Animation = _interopRequireDefault(require("./Animation"));

package/cjs/internals/hooks/useCustom.js

@@ -17,7 +17,7 @@ var mergeObject = function mergeObject(list) {
   }, {});
 };
 var getDefaultRTL = function getDefaultRTL() {
-  return typeof window !== 'undefined' && (document.body.getAttribute('dir') || document.dir) === 'rtl';
+  return typeof document !== 'undefined' && (document.body.getAttribute('dir') || document.dir) === 'rtl';
 };
 
 /**

package/cjs/internals/hooks/useIsomorphicLayoutEffect.js

@@ -4,5 +4,5 @@
 exports.__esModule = true;
 exports.useIsomorphicLayoutEffect = exports.default = void 0;
 var _react = require("react");
-var useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+var useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = typeof document !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
 var _default = exports.default = useIsomorphicLayoutEffect;

package/cjs/internals/types/index.d.ts

@@ -172,6 +172,7 @@ export declare namespace TypeAttributes {
     type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
     type Placement = Placement4 | Placement8 | PlacementAuto;
     type CheckTrigger = 'change' | 'blur' | 'none' | null;
+    type DisplayState = 'show' | 'hide' | 'hiding';
 }
 export interface SVGIcon {
     viewBox: string;

package/cjs/toaster/ToastContainer.d.ts

@@ -11,15 +11,24 @@ export interface ToastContainerProps extends WithAsProps {
     placement?: PlacementType;
     /**
      * Set the message to appear in the specified container
-     *
      */
     container?: HTMLElement | (() => HTMLElement);
-    /** The number of milliseconds to wait before automatically closing a message. */
+    /**
+     * The number of milliseconds to wait before automatically closing a message.
+     */
     duration?: number;
+    /**
+     * Reset the hide timer if the mouse moves over the message.
+     */
+    mouseReset?: boolean;
+    /**
+     * Callback fired when the component mounts
+     */
     callback?: (ref: React.RefObject<ToastContainerInstance>) => void;
 }
 interface PushOptions {
     duration?: number;
+    mouseReset?: boolean;
 }
 export interface ToastContainerInstance {
     root: HTMLElement;