rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/cjs/Sidenav/SidenavItem.js

@@ -8,7 +8,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
@@ -20,6 +19,10 @@ var _hooks = require("../internals/hooks");
 var _Sidenav = require("./Sidenav");
 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; }
+/**
+ * Props of SidenavItem component
+ */
+
 /**
  * @private
  */
@@ -31,18 +34,18 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
   const {
     as: Component = _SafeAnchor.default,
     active: activeProp,
+    classPrefix = 'sidenav-item',
     children,
     className,
     disabled,
-    classPrefix = 'sidenav-item',
-    icon,
+    divider,
     eventKey,
+    icon,
+    panel,
     style,
+    tooltip = children,
     onClick,
     onSelect,
-    divider,
-    panel,
-    tooltip = children,
     ...rest
   } = props;
   const {
@@ -51,9 +54,9 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _react.useContext)(_NavContext.default);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(activeKey, eventKey);
   const whisperRef = _react.default.useRef(null);
   const handleClick = (0, _react.useCallback)(event => {
@@ -67,7 +70,13 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
   const clonedIcon = icon ? /*#__PURE__*/_react.default.cloneElement(icon, {
     className: (0, _classnames.default)(prefix('icon'), icon.props.className)
   }) : null;
+  const title = typeof children === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('title')
+  }, children) : children;
   if (!sidenav.expanded) {
+    if (panel || divider) {
+      return null;
+    }
     return /*#__PURE__*/_react.default.createElement(_Whisper.default, {
       trigger: "hover",
       speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, null, tooltip),
@@ -83,7 +92,7 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
         active,
         ...menuitem
       } = _ref;
-      const classes = merge(className, withClassPrefix({
+      const classes = merge(className, withPrefix({
         focus: active,
         active: selected,
         disabled
@@ -98,7 +107,7 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
       }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {
         onMouseOver: (0, _utils.createChainedFunction)(menuitem.onMouseOver, triggerProps.onMouseOver),
         onMouseOut: (0, _utils.createChainedFunction)(menuitem.onMouseOut, triggerProps.onMouseOut)
-      }), clonedIcon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+      }), clonedIcon, title);
     }));
   }
   if (divider) {
@@ -119,7 +128,7 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
   }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
-    className: merge(className, withClassPrefix({
+    className: merge(className, withPrefix({
       active: selected,
       disabled
     })),
@@ -127,7 +136,7 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
     style: style,
     "aria-selected": selected || undefined,
     "data-event-key": eventKey
-  }, rest), clonedIcon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+  }, rest), clonedIcon, title);
 });
 SidenavItem.displayName = 'Sidenav.Item';
 var _default = exports.default = SidenavItem;

package/cjs/Sidenav/SidenavToggle.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
 import type { WithAsProps } from '../internals/types';
 export interface SidenavToggleProps extends WithAsProps {
-    /**
-     * Expand then nav
-     *
-     * @deprecated Use <Sidenav expanded> instead.
-     */
-    expanded?: boolean;
     /** Callback function for menu state switching */
     onToggle?: (expanded: boolean, event: React.MouseEvent) => void;
 }

package/cjs/Sidenav/SidenavToggle.js

@@ -6,8 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _PagePrevious = _interopRequireDefault(require("@rsuite/icons/PagePrevious"));
-var _PageNext = _interopRequireDefault(require("@rsuite/icons/PageNext"));
+var _ArrowLeftLine = _interopRequireDefault(require("@rsuite/icons/ArrowLeftLine"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils = require("../internals/utils");
 var _Sidenav = require("./Sidenav");
@@ -17,37 +16,32 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const SidenavToggle = (0, _utils.forwardRef)((props, ref) => {
   const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
   if (!sidenav) {
-    throw new Error('<Sidenav.Toggle> must be rendered within a <Sidenav>');
+    console.error('<Sidenav.Toggle> must be rendered within a <Sidenav>');
+    return null;
   }
   const {
-    as: Component = 'div',
-    expanded: DEPRECATED_expanded,
     className,
     classPrefix = 'sidenav-toggle',
     onToggle,
     ...rest
   } = props;
-
-  // if `expanded` prop is provided, it takes priority
-  const expanded = DEPRECATED_expanded !== null && DEPRECATED_expanded !== void 0 ? DEPRECATED_expanded : sidenav.expanded;
+  const expanded = sidenav.expanded;
   const {
     merge,
-    withClassPrefix,
-    prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     collapsed: !expanded
   }));
-  const Icon = expanded ? _PagePrevious.default : _PageNext.default;
   const handleToggle = event => {
     onToggle === null || onToggle === void 0 || onToggle(!expanded, event);
   };
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({}, rest, {
     ref: ref,
-    className: classes
-  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    icon: /*#__PURE__*/_react.default.createElement(Icon, null),
-    className: prefix('button'),
+    className: classes,
+    icon: /*#__PURE__*/_react.default.createElement(_ArrowLeftLine.default, {
+      "aria-label": ""
+    }),
     onClick: handleToggle,
     "aria-label": expanded ? 'Collapse' : 'Expand'
   }));

package/cjs/Sidenav/index.d.ts

@@ -2,11 +2,13 @@ import Sidenav from './Sidenav';
 import SidenavToggle from './SidenavToggle';
 import SidenavHeader from './SidenavHeader';
 import SidenavBody from './SidenavBody';
+import SidenavFooter from './SidenavFooter';
 import SidenavItem from './SidenavItem';
 import SidenavDropdown from './SidenavDropdown';
 import SidenavDropdownItem from './SidenavDropdownItem';
 import SidenavDropdownMenu from './SidenavDropdownMenu';
 import SidenavDropdownToggle from './SidenavDropdownToggle';
+import SidenavGroupLabel from './SidenavGroupLabel';
 export type { SidenavProps } from './Sidenav';
 export type { SidenavToggleProps } from './SidenavToggle';
 export type { SidenavHeaderProps } from './SidenavHeader';
@@ -16,5 +18,5 @@ export type { SidenavDropdownProps } from './SidenavDropdown';
 export type { SidenavDropdownItemProps } from './SidenavDropdownItem';
 export type { SidenavDropdownMenuProps } from './SidenavDropdownMenu';
 export type { SidenavDropdownToggleProps } from './SidenavDropdownToggle';
-export { Sidenav, SidenavToggle, SidenavHeader, SidenavBody, SidenavItem, SidenavDropdown, SidenavDropdownItem, SidenavDropdownMenu, SidenavDropdownToggle };
+export { Sidenav, SidenavToggle, SidenavHeader, SidenavBody, SidenavFooter, SidenavItem, SidenavDropdown, SidenavDropdownItem, SidenavDropdownMenu, SidenavDropdownToggle, SidenavGroupLabel };
 export default Sidenav;

package/cjs/Sidenav/index.js

@@ -12,6 +12,8 @@ var _SidenavHeader = _interopRequireDefault(require("./SidenavHeader"));
 exports.SidenavHeader = _SidenavHeader.default;
 var _SidenavBody = _interopRequireDefault(require("./SidenavBody"));
 exports.SidenavBody = _SidenavBody.default;
+var _SidenavFooter = _interopRequireDefault(require("./SidenavFooter"));
+exports.SidenavFooter = _SidenavFooter.default;
 var _SidenavItem = _interopRequireDefault(require("./SidenavItem"));
 exports.SidenavItem = _SidenavItem.default;
 var _SidenavDropdown = _interopRequireDefault(require("./SidenavDropdown"));
@@ -22,6 +24,8 @@ var _SidenavDropdownMenu = _interopRequireDefault(require("./SidenavDropdownMenu
 exports.SidenavDropdownMenu = _SidenavDropdownMenu.default;
 var _SidenavDropdownToggle = _interopRequireDefault(require("./SidenavDropdownToggle"));
 exports.SidenavDropdownToggle = _SidenavDropdownToggle.default;
+var _SidenavGroupLabel = _interopRequireDefault(require("./SidenavGroupLabel"));
+exports.SidenavGroupLabel = _SidenavGroupLabel.default;
 // export types
 // export components
 var _default = exports.default = _Sidenav.default;

package/cjs/Slider/Graduated.js

@@ -24,7 +24,7 @@ const Graduated = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const activeIndexs = [];
   let startIndex = 0;
   let endIndex = 0;

package/cjs/Slider/Handle.js

@@ -37,14 +37,13 @@ const Handle = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const horizontalKey = rtl ? 'right' : 'left';
   const direction = vertical ? 'bottom' : horizontalKey;
-  const styles = {
-    ...style,
+  const styles = (0, _utils.mergeStyles)(style, {
     [direction]: `${position}%`
-  };
+  });
   const {
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     active,
     onMoveStart,

package/cjs/Slider/Input.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 _utils = require("../internals/utils");
 const rangeStyles = {
   position: 'absolute',
   overflow: 'hidden',
@@ -22,10 +23,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     type: "range",
     readOnly: true,
     ref: ref,
-    style: {
-      ...rangeStyles,
-      ...style
-    }
+    style: (0, _utils.mergeStyles)(rangeStyles, style)
   }, rest));
 });
 Input.displayName = 'Input';

package/cjs/Slider/Mark.js

@@ -19,9 +19,9 @@ const Mark = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     last
   }));
   if (renderMark) {

package/cjs/Slider/ProgressBar.js

@@ -20,17 +20,16 @@ const ProgressBar = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const sizeKey = vertical ? 'height' : 'width';
   const dirKey = rtl ? 'right' : 'left';
   const startKey = vertical ? 'bottom' : dirKey;
-  const styles = {
-    ...style,
+  const styles = (0, _utils.mergeStyles)(style, {
     [startKey]: `${start}%`,
     [sizeKey]: `${end - start}%`
-  };
-  const classes = merge(className, withClassPrefix());
+  });
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, {
     ref: ref,
     style: styles,

package/cjs/Slider/Slider.js

@@ -62,13 +62,13 @@ const Slider = (0, _utils.forwardRef)((props, ref) => {
   const barRef = (0, _react.useRef)(null);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     rtl
   } = (0, _CustomProvider.useCustom)('Slider');
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     vertical,
     disabled,
     graduated,

package/cjs/Slider/useDrag.d.ts

@@ -8,8 +8,8 @@ interface DragProps {
 }
 declare const useDrag: (props: DragProps) => {
     active: boolean;
-    rootRef: import("react").RefObject<HTMLDivElement>;
-    tooltipRef: import("react").RefObject<HTMLDivElement>;
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    tooltipRef: import("react").RefObject<HTMLDivElement | null>;
     onMoveStart: (...args: any[]) => any;
     onMouseEnter: (...args: any[]) => any;
 };

package/cjs/Slider/useDrag.js

@@ -20,7 +20,7 @@ const useDrag = props => {
     onDragStart
   } = props;
   const [active, setActive] = (0, _react.useState)(false);
-  const moveTracker = (0, _react.useRef)();
+  const moveTracker = (0, _react.useRef)(null);
 
   // Release the move event
   const releaseMoves = (0, _react.useCallback)(() => {

package/cjs/Stack/HStack.d.ts

@@ -6,6 +6,6 @@ export interface HStackProps extends Omit<StackProps, 'direction'> {
     reverse?: boolean;
 }
 declare const HStack: import("../internals/types").InternalRefForwardingComponent<"div", HStackProps, never> & {
-    Item: typeof import("./StackItem").default;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./StackItem").StackItemProps, never> & Record<string, never>;
 };
 export default HStack;

package/cjs/Stack/HStack.js

@@ -14,15 +14,10 @@ const Subcomponents = {
 const HStack = (0, _utils.forwardRef)((props, ref) => {
   const {
     reverse,
-    spacing = 6,
-    childrenRenderMode = 'clone',
     ...rest
   } = props;
   const direction = reverse ? 'row-reverse' : 'row';
-  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
-    spacing: spacing,
-    childrenRenderMode: childrenRenderMode
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({}, rest, {
     direction: direction,
     ref: ref
   }));

package/cjs/Stack/Stack.d.ts

@@ -1,35 +1,30 @@
-import React from 'react';
-import StackItem from './StackItem';
-import type { WithAsProps } from '../internals/types';
-export interface StackProps extends WithAsProps {
+import React, { CSSProperties } from 'react';
+import type { WithAsProps, ResponsiveValue } from '../internals/types';
+interface DeprecatedStackProps {
     /**
-     * The direction of the children in the stack.
+     * Define the alignment of the children in the stack on the inline axis
+     * @deprecated  Use `justify` instead
      */
-    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    justifyContent?: CSSProperties['justifyContent'];
     /**
      * Define the alignment of the children in the stack on the cross axis
+     * @deprecated  Use `align` instead
      */
-    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-    /**
-     *  Define the alignment of the children in the stack on the inline axis
-     */
-    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
-    /**
-     * Define the spacing between immediate children
-     */
+    alignItems?: CSSProperties['alignItems'];
+}
+export interface StackProps extends WithAsProps, DeprecatedStackProps {
+    /** Define the alignment of the children in the stack on the cross axis */
+    align?: CSSProperties['alignItems'];
+    /** The direction of the children in the stack */
+    direction?: CSSProperties['flexDirection'] | ResponsiveValue<CSSProperties['flexDirection']>;
+    /** Define the alignment of the children in the stack on the inline axis */
+    justify?: CSSProperties['justifyContent'];
+    /** Define the spacing between immediate children */
     spacing?: number | string | (number | string)[];
-    /**
-     * Add an element between each child
-     */
+    /** Add an element between each child */
     divider?: React.ReactNode;
-    /**
-     * Define whether the children in the stack are forced onto one line or can wrap onto multiple lines
-     */
+    /** Define whether the children in the stack are forced onto one line or can wrap onto multiple lines */
     wrap?: boolean;
-    /**
-     * The render mode of the children.
-     */
-    childrenRenderMode?: 'clone' | 'wrap';
 }
 /**
  * The `Stack` component is a quick layout component through Flexbox,
@@ -38,6 +33,6 @@ export interface StackProps extends WithAsProps {
  * @see https://rsuitejs.com/components/stack
  */
 declare const Stack: import("../internals/types").InternalRefForwardingComponent<"div", StackProps, never> & {
-    Item: typeof StackItem;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./StackItem").StackItemProps, never> & Record<string, never>;
 };
 export default Stack;

package/cjs/Stack/Stack.js

@@ -7,13 +7,10 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _StackItem = _interopRequireDefault(require("./StackItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
-function isStackItem(child) {
-  var _child$type;
-  return child.type === _StackItem.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'StackItem';
-}
 const Subcomponents = {
   Item: _StackItem.default
 };
@@ -29,14 +26,15 @@ const Stack = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Stack', props);
   const {
-    as: Component = 'div',
-    alignItems = 'center',
+    as,
+    alignItems,
+    align = alignItems,
     classPrefix = 'stack',
-    childrenRenderMode = 'wrap',
     className,
     children,
     direction,
     justifyContent,
+    justify = justifyContent,
     spacing,
     divider,
     style,
@@ -44,38 +42,24 @@ const Stack = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
-    prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix());
-  const styles = {
-    alignItems,
-    justifyContent,
-    flexDirection: direction,
-    flexWrap: wrap ? 'wrap' : undefined,
-    gap: spacing,
-    ...style
-  };
-
-  /*
-   * toArray remove undefined, null and boolean
-   */
-  const filterChildren = _react.default.Children.toArray(children);
-  const count = _utils.ReactChildren.count(filterChildren);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    cssVar,
+    responsive
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(), ...responsive(direction));
+  const styles = (0, _utils.mergeStyles)(style, cssVar('spacing', spacing, _utils.getCssValue), cssVar('align', align), cssVar('justify', justify), cssVar('wrap', wrap ? 'wrap' : undefined));
+  const filteredChildren = _react.default.Children.toArray(children);
+  const childCount = filteredChildren.length;
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    display: "flex",
+    as: as,
     ref: ref,
     className: classes,
     style: styles
-  }), _utils.ReactChildren.map(filterChildren, (child, index) => {
-    const childNode = childrenRenderMode === 'wrap' && !isStackItem(child) ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {
-      key: index,
-      className: prefix('item')
-    }, child) : (/*#__PURE__*/_react.default.cloneElement(child, {
-      className: merge(prefix('item'), child.props.className)
-    }));
-    return [childNode, index < count - 1 ? divider : null];
-  }));
+  }, rest), filteredChildren.map((child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: index
+  }, child, index < childCount - 1 && divider)));
 }, Subcomponents);
 Stack.displayName = 'Stack';
 var _default = exports.default = Stack;

package/cjs/Stack/StackItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAsProps } from '../internals/types';
 export interface StackItemProps extends WithAsProps {
-    alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    alignSelf?: React.CSSProperties['alignSelf'];
     flex?: React.CSSProperties['flex'];
     grow?: React.CSSProperties['flexGrow'];
     shrink?: React.CSSProperties['flexShrink'];
@@ -13,8 +13,5 @@ export interface StackItemProps extends WithAsProps {
  *
  * @see https://rsuitejs.com/components/stack
  */
-declare function StackItem(props: StackItemProps): React.JSX.Element;
-declare namespace StackItem {
-    var displayName: string;
-}
+declare const StackItem: import("../internals/types").InternalRefForwardingComponent<"div", StackItemProps, never> & Record<string, never>;
 export default StackItem;

package/cjs/Stack/StackItem.js

@@ -3,17 +3,20 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = StackItem;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
 /**
  * The `Stack.Item` component is used to set the layout of the child element in the `Stack` component.
  *
  * @see https://rsuitejs.com/components/stack
  */
-function StackItem(props) {
+const StackItem = (0, _utils.forwardRef)((props, ref) => {
   const {
     as: Component = 'div',
+    classPrefix = 'stack-item',
     style,
     className,
     alignSelf,
@@ -24,20 +27,18 @@ function StackItem(props) {
     basis,
     ...rest
   } = props;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = (0, _utils.mergeStyles)(style, cssVar('align-self', alignSelf), cssVar('order', order), cssVar('flex', flex), cssVar('grow', grow), cssVar('shrink', shrink), cssVar('basis', basis));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    className: className,
-    style: {
-      alignSelf,
-      order,
-      ...(flex ? {
-        flex
-      } : {
-        flexGrow: grow,
-        flexShrink: shrink,
-        flexBasis: basis
-      }),
-      ...style
-    }
+    ref: ref,
+    className: classes,
+    style: styles
   }, rest));
-}
-StackItem.displayName = 'StackItem';
+});
+StackItem.displayName = 'StackItem';
+var _default = exports.default = StackItem;

package/cjs/Stack/VStack.d.ts

@@ -3,6 +3,6 @@ export interface VStackProps extends Omit<StackProps, 'direction'> {
     reverse?: boolean;
 }
 declare const VStack: import("../internals/types").InternalRefForwardingComponent<"div", VStackProps, never> & {
-    Item: typeof import("./StackItem").default;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./StackItem").StackItemProps, never> & Record<string, never>;
 };
 export default VStack;

package/cjs/Stack/VStack.js

@@ -14,16 +14,11 @@ const Subcomponents = {
 const VStack = (0, _utils.forwardRef)((props, ref) => {
   const {
     reverse,
-    spacing = 6,
-    alignItems = 'flex-start',
-    childrenRenderMode = 'clone',
     ...rest
   } = props;
   const direction = reverse ? 'column-reverse' : 'column';
   return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
-    spacing: spacing,
-    childrenRenderMode: childrenRenderMode,
-    alignItems: alignItems
+    align: "flex-start"
   }, rest, {
     direction: direction,
     ref: ref

package/cjs/Stat/Stat.js

@@ -37,9 +37,9 @@ const Stat = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     bordered
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({