rsuite 6.0.0-canary-20250624 → 6.0.0-canary-20250702

package/esm/Nav/NavDropdownMenu.js

@@ -67,16 +67,15 @@ const NavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
       active,
       ...menuitem
     }, menuitemRef) => {
-      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
-        'with-icon': icon,
-        open,
-        active: selected,
-        disabled,
-        focus: active
-      }));
+      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix());
       return /*#__PURE__*/React.createElement("div", _extends({
         ref: mergeRefs(buttonRef, menuitemRef),
         className: classes,
+        "data-open": open,
+        "data-focus": active,
+        "data-active": selected,
+        "data-disabled": disabled,
+        "data-with-icon": icon,
         "data-event-key": eventKey,
         "data-event-key-type": typeof eventKey
       }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
@@ -102,14 +101,12 @@ const NavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     open,
     ...menuContainer
   }, menuContainerRef) => {
-    const classes = mergeItemClassNames(className, withItemClassPrefix({
-      disabled,
-      open,
-      submenu: true
-    }));
+    const classes = mergeItemClassNames(className, withItemClassPrefix('submenu'));
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: mergeRefs(ref, menuContainerRef),
-      className: classes
+      className: classes,
+      "data-open": open,
+      "data-disabled": disabled
     }, menuContainer));
   });
 });

package/esm/Nav/NavItem.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { BaseBoxProps } from '../internals/Box';
 import type { HTMLPropsWithoutSelect } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface NavItemProps<T = string | number> extends BoxProps, HTMLPropsWithoutSelect {
+export interface NavItemProps<T = string | number> extends BaseBoxProps, HTMLPropsWithoutSelect {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/esm/Nav/NavItem.js

@@ -52,10 +52,7 @@ const NavItem = forwardRef((props, ref) => {
     merge,
     prefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix({
-    active,
-    disabled
-  }));
+  const classes = merge(className, withPrefix());
   const handleClick = useCallback(event => {
     if (!disabled) {
       emitSelect(event);
@@ -80,13 +77,14 @@ const NavItem = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
-    tabIndex: disabled ? -1 : undefined
-  }, rest, {
+    tabIndex: disabled ? -1 : undefined,
     className: classes,
     onClick: handleClick,
     style: style,
-    "aria-selected": active || undefined
-  }), icon && /*#__PURE__*/React.cloneElement(icon, {
+    "aria-selected": active || undefined,
+    "data-active": active || undefined,
+    "data-disabled": disabled
+  }, rest), icon && /*#__PURE__*/React.cloneElement(icon, {
     className: classNames(prefix('icon'), icon.props.className)
   }), children, /*#__PURE__*/React.createElement(Ripple, null));
 });

package/esm/Navbar/Navbar.js

@@ -1,6 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import NavbarBrand from "./NavbarBrand.js";
 import NavbarContent from "./NavbarContent.js";
 import NavbarToggle from "./NavbarToggle.js";
@@ -36,8 +36,8 @@ const Navbar = forwardRef((props, ref) => {
     withPrefix,
     merge
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(appearance));
-  const [open, setOpen] = React.useState(false);
+  const classes = merge(className, withPrefix());
+  const [open, setOpen] = useState(false);
   const handleToggle = useEventCallback(nextOpen => {
     setOpen(nextOpen);
     onDrawerOpenChange === null || onDrawerOpenChange === void 0 || onDrawerOpenChange(nextOpen);
@@ -52,11 +52,11 @@ const Navbar = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(NavbarContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Box, _extends({
-    as: as
-  }, rest, {
+    as: as,
     ref: ref,
-    className: classes
-  })));
+    className: classes,
+    "data-appearance": appearance
+  }, rest)));
 }, Subcomponents);
 Navbar.displayName = 'Navbar';
 export default Navbar;

package/esm/Navbar/NavbarDropdown.d.ts

@@ -3,7 +3,7 @@ import { BoxProps } from '../internals/Box';
 import type { PlacementCorners, WithAsProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
 export type NavbarDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface NavbarDropdownProps<T = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title'> {
+export interface NavbarDropdownProps<T = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title' | 'color'> {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */

package/esm/Navbar/NavbarDropdown.js

@@ -65,15 +65,14 @@ const NavbarDropdown = forwardRef((props, ref) => {
     open,
     ...props
   }, containerRef) => {
-    const classes = merge(className, withPrefix({
-      disabled,
-      open
-    }));
+    const classes = merge(className, withPrefix());
     return /*#__PURE__*/React.createElement(Box, _extends({
       as: as,
       ref: mergeRefs(ref, containerRef),
       className: classes,
       style: style,
+      "data-open": open,
+      "data-disabled": disabled,
       "data-placement": kebabPlace(placement)
     }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, (buttonProps, buttonRef) => /*#__PURE__*/React.createElement(NavbarDropdownToggle, _extends({
       ref: buttonRef,

package/esm/Navbar/NavbarDropdownItem.js

@@ -69,13 +69,13 @@ const NavbarDropdownItem = forwardRef((props, ref) => {
     });
   }
   const classes = merge(className, withPrefix({
-    'with-icon': icon,
-    disabled,
     divider,
-    panel,
-    active: selected
+    panel
   }));
   const dataAttributes = {
+    'data-active': selected,
+    'data-with-icon': !!icon,
+    'data-disabled': disabled,
     'data-event-key': eventKey
   };
   if (!isNil(eventKey) && typeof eventKey !== 'string') {

package/esm/Navbar/NavbarDropdownMenu.js

@@ -71,24 +71,21 @@ const NavbarDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     open,
     ...props
   }, containerRef) => {
-    const classes = mergeItemClassNames(className, withItemClassPrefix({
-      disabled,
-      open,
-      submenu: true
-    }));
+    const classes = mergeItemClassNames(className, withItemClassPrefix('submenu'));
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: mergeRefs(ref, containerRef),
-      className: classes
+      className: classes,
+      "data-open": open,
+      "data-disabled": disabled
     }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, ({
       open,
       ...buttonProps
     }, buttonRef) => {
-      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
-        'with-icon': icon,
-        open,
-        disabled
-      }));
+      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix());
       const dataAttributes = {
+        'data-open': open,
+        'data-disabled': disabled,
+        'data-with-icon': !!icon,
         'data-event-key': eventKey
       };
       if (!isNil(eventKey) && typeof eventKey !== 'string') {

package/esm/NumberInput/NumberInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
 import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, BasicSize } from '../internals/types';
-export interface NumberInputProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, BoxProps, FormControlBaseProps<T> {
+export interface NumberInputProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, Omit<BoxProps, 'height' | 'width'>, FormControlBaseProps<T> {
     /**
      * Button can have different appearances
      */

package/esm/Pagination/Pagination.js

@@ -183,11 +183,12 @@ const Pagination = forwardRef((props, ref) => {
       }, last === true ? icons.last : last)
     });
   };
-  const classes = merge(className, withPrefix(size));
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-size": size
   }, rest), renderFirst(), renderPrev(), renderPageButtons(), renderNext(), renderLast());
 });
 Pagination.displayName = 'Pagination';

package/esm/Pagination/PaginationButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
-export interface PaginationButtonProps<T = number | string> extends WithAsProps, HTMLPropsWithoutSelect<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>> {
+import { ButtonProps } from '../Button';
+export interface PaginationButtonProps<T = number | string> extends Omit<ButtonProps, 'onSelect'> {
     /** The value of the current option */
     eventKey: T;
     /** A button can show it is currently unable to be interacted with */
@@ -18,5 +18,5 @@ export interface PaginationButtonProps<T = number | string> extends WithAsProps,
  * PaginationButton component for pagination navigation.
  * Renders a button that can be used in pagination contexts.
  */
-declare const PaginationButton: import("../internals/types").InternalRefForwardingComponent<"button", PaginationButtonProps<string | number>, never> & Record<string, never>;
+declare const PaginationButton: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"button", ButtonProps, never> & Record<string, never>, PaginationButtonProps<string | number>, never> & Record<string, never>;
 export default PaginationButton;

package/esm/Pagination/PaginationButton.js

@@ -1,6 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useMemo } from 'react';
+import React from 'react';
 import Button from "../Button/index.js";
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
@@ -10,7 +10,7 @@ import { forwardRef } from "../internals/utils/index.js";
  */
 const PaginationButton = forwardRef((props, ref) => {
   const {
-    as: Component = Button,
+    as,
     active,
     disabled,
     className,
@@ -25,10 +25,7 @@ const PaginationButton = forwardRef((props, ref) => {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix({
-    active,
-    disabled
-  }));
+  const classes = merge(className, withPrefix());
   const handleClick = useEventCallback(event => {
     if (disabled) {
       return;
@@ -40,21 +37,17 @@ const PaginationButton = forwardRef((props, ref) => {
       onSelect(eventKey, event);
     }
   });
-
-  // Determine props to pass based on component type
-  const asProps = useMemo(() => Component !== Button && typeof Component !== 'string' ? {
-    eventKey,
-    active,
-    role: 'button'
-  } : {}, [Component, eventKey, active]);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, asProps, {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    as: as,
     disabled: disabled,
     onClick: handleClick,
     ref: ref,
     className: classes,
-    role: "button",
+    appearance: "subtle",
     "aria-disabled": disabled,
-    "aria-current": active ? 'page' : undefined
+    "aria-current": active ? 'page' : undefined,
+    active: active,
+    "data-event-key": eventKey
   }), children);
 });
 PaginationButton.displayName = 'PaginationButton';

package/esm/Pagination/PaginationGroup.js

@@ -53,7 +53,7 @@ const PaginationGroup = forwardRef((props, ref) => {
   const [limit, setLimit] = useControlled(limitProp, 30);
   const [activePage, setActivePage] = useControlled(activePageProp, 1);
   const pages = Math.floor(total / limit) + (total % limit ? 1 : 0);
-  const classes = merge(className, withPrefix(size));
+  const classes = merge(className, withPrefix());
   const {
     getLocale
   } = useCustom();
@@ -78,6 +78,7 @@ const PaginationGroup = forwardRef((props, ref) => {
     as: as,
     ref: ref,
     className: classes,
+    "data-size": size,
     style: style
   }, layout.map((key, index) => {
     const onlyKey = `${key}${index}`;

package/esm/Panel/PanelHeader.d.ts

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

package/esm/Radio/Radio.js

@@ -51,11 +51,7 @@ const Radio = forwardRef((props, ref) => {
     withPrefix,
     prefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(color, {
-    inline,
-    disabled,
-    checked
-  }));
+  const classes = merge(className, withPrefix());
   const [htmlInputProps, restProps] = partitionHTMLProps(rest);
   const handleChange = useEventCallback(event => {
     if (disabled || readOnly) {
@@ -100,7 +96,11 @@ const Radio = forwardRef((props, ref) => {
     as: as,
     ref: ref,
     onClick: onClick,
-    className: classes
+    className: classes,
+    "data-color": color,
+    "data-checked": checked,
+    "data-disabled": disabled,
+    "data-inline": inline
   }, restProps), /*#__PURE__*/React.createElement("div", {
     className: prefix`checker`
   }, children ? /*#__PURE__*/React.createElement("label", {

package/esm/RadioGroup/RadioGroup.js

@@ -35,9 +35,7 @@ const RadioGroup = forwardRef((props, ref) => {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(appearance, {
-    inline
-  }));
+  const classes = merge(className, withPrefix());
   const [value, setValue, isControlled] = useControlled(valueProp, defaultValue);
   const handleChange = useEventCallback((nextValue, event) => {
     setValue(nextValue);
@@ -63,7 +61,9 @@ const RadioGroup = forwardRef((props, ref) => {
     role: "radiogroup"
   }, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    "data-inline": inline,
+    "data-appearance": appearance
   }), children));
 });
 RadioGroup.displayName = 'RadioGroup';

package/esm/Sidenav/ExpandedSidenavDropdown.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BoxProps } from '../internals/Box';
 import type { PlacementCorners } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface SidenavDropdownProps<T = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle' | 'title'> {
+export interface SidenavDropdownProps<T = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle' | 'title' | 'color'> {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */

package/esm/Sidenav/Sidenav.js

@@ -48,7 +48,7 @@ const Sidenav = forwardRef((props, ref) => {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(appearance));
+  const classes = merge(className, withPrefix());
   const handleOpenChange = useCallback((eventKey, event) => {
     const find = key => shallowEqual(key, eventKey);
     const nextOpenKeys = [...openKeys];
@@ -86,7 +86,8 @@ const Sidenav = forwardRef((props, ref) => {
       as: as
     }, rest, transitionRest, {
       ref: mergeRefs(ref, transitionRef),
-      className: merge(classes, className)
+      className: merge(classes, className),
+      "data-appearance": appearance
     }));
   }));
 }, Subcomponents);

package/esm/Sidenav/SidenavDropdown.js

@@ -146,16 +146,14 @@ const SidenavDropdown = forwardRef((props, ref) => {
     open,
     ...menuContainer
   }, menuContainerRef) => {
-    const classes = merge(className, withPrefix({
-      disabled,
-      open,
-      submenu: true
-    }));
+    const classes = merge(className, withPrefix('submenu'));
     return /*#__PURE__*/React.createElement(Box, _extends({
       as: as,
       ref: mergeRefs(ref, menuContainerRef),
       className: classes,
       style: style,
+      "data-open": open,
+      "data-disabled": disabled,
       "data-placement": kebabPlace(placement),
       "data-active-descendant": hasSelectedItems
     }, menuContainer, pick(toggleProps, ['data-testid'])));

package/esm/Sidenav/SidenavDropdownItem.js

@@ -85,14 +85,14 @@ const SidenavDropdownItem = forwardRef((props, ref) => {
     ...menuitem
   }, menuitemRef) => {
     const classes = merge(className, withPrefix({
-      'with-icon': icon,
-      active: selected,
-      disabled,
-      focus: active,
       divider,
       panel
     }));
     const dataAttributes = {
+      'data-active': selected,
+      'data-disabled': disabled,
+      'data-focus': active,
+      'data-with-icon': !!icon,
       'data-event-key': eventKey
     };
     if (!isNil(eventKey) && typeof eventKey !== 'string') {

package/esm/Sidenav/SidenavDropdownMenu.js

@@ -82,16 +82,15 @@ const SidenavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
       active,
       ...menuitem
     }, menuitemRef) => {
-      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
-        'with-icon': icon,
-        open,
-        active: selected,
-        disabled,
-        focus: active
-      }));
+      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix());
       return /*#__PURE__*/React.createElement("div", _extends({
         ref: mergeRefs(buttonRef, menuitemRef),
         className: classes,
+        "data-open": open,
+        "data-disabled": disabled,
+        "data-active": selected,
+        "data-focus": active,
+        "data-with-icon": icon,
         "data-event-key": eventKey,
         "data-event-key-type": typeof eventKey
       }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
@@ -116,14 +115,12 @@ const SidenavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     open,
     ...menuContainer
   }, menuContainerRef) => {
-    const classes = mergeItemClassNames(className, withItemClassPrefix({
-      disabled,
-      open,
-      submenu: true
-    }));
+    const classes = mergeItemClassNames(className, withItemClassPrefix('submenu'));
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: mergeRefs(ref, menuContainerRef),
-      className: classes
+      className: classes,
+      "data-open": open,
+      "data-disabled": disabled
     }, menuContainer));
   });
 });

package/esm/Sidenav/SidenavItem.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { BaseBoxProps } from '../internals/Box';
 import type { HTMLPropsWithoutSelect } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
 /**
  * Props of SidenavItem component
  */
-export interface SidenavItemProps<T = any> extends BoxProps, HTMLPropsWithoutSelect {
+export interface SidenavItemProps<T = any> extends BaseBoxProps, HTMLPropsWithoutSelect {
     /**
      * Whether the item is activated
      */

package/esm/Sidenav/SidenavItem.js

@@ -86,11 +86,7 @@ const SidenavItem = forwardRef((props, ref) => {
       active,
       ...menuitem
     }, menuitemRef) => {
-      const classes = merge(className, withPrefix({
-        focus: active,
-        active: selected,
-        disabled
-      }));
+      const classes = merge(className, withPrefix());
 
       // Show tooltip when inside a collapse <Sidenav>
       return /*#__PURE__*/React.createElement(Box, _extends({
@@ -98,6 +94,9 @@ const SidenavItem = forwardRef((props, ref) => {
         ref: mergeRefs(mergeRefs(ref, menuitemRef), triggerRef),
         disabled: as === SafeAnchor ? disabled : undefined,
         className: classes,
+        "data-active": selected,
+        "data-disabled": disabled,
+        "data-focus": active,
         "data-event-key": eventKey
       }, omit(rest, ['divider', 'panel']), triggerProps, menuitem, {
         onMouseOver: createChainedFunction(menuitem.onMouseOver, triggerProps.onMouseOver),

package/esm/Slider/Handle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-export interface HandleProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
+export interface HandleProps extends Omit<BoxProps, 'color' | 'position' | 'height' | 'width'>, React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     vertical?: boolean;
     tooltip?: boolean;

package/esm/Stack/Stack.d.ts

@@ -1,25 +1,9 @@
 import React, { CSSProperties } from 'react';
 import { BoxProps } from '../internals/Box';
 import type { WithResponsive } from '../internals/types';
-interface DeprecatedStackProps {
-    /**
-     * Define the alignment of the children in the stack on the inline axis
-     * @deprecated  Use `justify` instead
-     */
-    justifyContent?: CSSProperties['justifyContent'];
-    /**
-     * Define the alignment of the children in the stack on the cross axis
-     * @deprecated  Use `align` instead
-     */
-    alignItems?: CSSProperties['alignItems'];
-}
-export interface StackProps extends BoxProps, DeprecatedStackProps {
-    /** Define the alignment of the children in the stack on the cross axis */
-    align?: CSSProperties['alignItems'];
+export interface StackProps extends BoxProps {
     /** The direction of the children in the stack */
     direction?: WithResponsive<CSSProperties['flexDirection']>;
-    /** Define the alignment of the children in the stack on the inline axis */
-    justify?: CSSProperties['justifyContent'];
     /** 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 */

package/esm/Stack/Stack.js

@@ -34,15 +34,14 @@ const Stack = forwardRef((props, ref) => {
     merge,
     responsive
   } = useStyles(classPrefix);
-  const baseClasses = merge(className, withPrefix({
-    wrap
-  }), ...responsive(direction));
+  const baseClasses = merge(className, withPrefix(), ...responsive(direction));
   const filteredChildren = React.Children.toArray(children);
   const childCount = filteredChildren.length;
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
-    className: baseClasses
+    className: baseClasses,
+    "data-wrap": wrap
   }, rest), filteredChildren.map((child, index) => /*#__PURE__*/React.createElement(React.Fragment, {
     key: index
   }, child, index < childCount - 1 && divider)));

package/esm/Stack/StackItem.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
 export interface StackItemProps extends BoxProps {
+    /**
+     * Define the alignment of the children in the stack on the cross axis
+     * @deprecated Use `self` instead
+     */
     alignSelf?: React.CSSProperties['alignSelf'];
-    flex?: React.CSSProperties['flex'];
-    grow?: React.CSSProperties['flexGrow'];
-    shrink?: React.CSSProperties['flexShrink'];
-    basis?: React.CSSProperties['flexBasis'];
-    order?: React.CSSProperties['order'];
 }
 /**
  * The `Stack.Item` component is used to set the layout of the child element in the `Stack` component.

package/esm/Stack/StackItem.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
-import { forwardRef, mergeStyles } from "../internals/utils/index.js";
+import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 /**
  * The `Stack.Item` component is used to set the layout of the child element in the `Stack` component.
@@ -13,28 +13,22 @@ const StackItem = forwardRef((props, ref) => {
   const {
     as,
     classPrefix = 'stack-item',
-    style,
     className,
     alignSelf,
-    flex,
-    grow,
-    shrink,
-    order,
-    basis,
+    self = alignSelf,
     ...rest
   } = props;
   const {
     withPrefix,
-    merge,
-    cssVar
+    merge
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
-  const styles = mergeStyles(style, cssVar('align-self', alignSelf), cssVar('order', order), cssVar('flex', flex), cssVar('grow', grow), cssVar('shrink', shrink), cssVar('basis', basis));
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
     className: classes,
-    style: styles
+    self: self,
+    paddingTop: 0
   }, rest));
 });
 StackItem.displayName = 'StackItem';