@ringcentral/spring-ui 1.8.0 → 1.9.1

package/chunks/CircularProgressIndicator.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import clsx from 'clsx';
 import { MotionConfig, motion } from 'framer-motion';
 import { useClasses } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
@@ -55,7 +56,8 @@ const CircularProgressIndicator = forwardRef((inProps, ref) => {
         const offset = circumference - (value / 100) * circumference;
         content = (jsx("svg", { width: '100%', height: '100%', viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("circle", { className: cls('progress-circle', `${variant}-progress-circle`), cx: "28", cy: "28", r: radius, fill: "none", strokeWidth: 18, strokeDasharray: circumference, strokeDashoffset: offset, transform: "rotate(-90 28 28)" }) }));
     }
-    return (jsx("span", { className: cls('root', variant, size, color, `${variant}-${size}`, `${variant}-${color}`), ...rest, ...progressBarProps, role: "progressbar", ref: ref, children: content }));
+    const { className: progressBarClassName, ...restProgressBarProps } = progressBarProps;
+    return (jsx("span", { className: clsx(cls('root', variant, size, color, `${variant}-${size}`, `${variant}-${color}`), progressBarClassName), ...rest, ...restProgressBarProps, role: "progressbar", ref: ref, children: content }));
 });
 CircularProgressIndicator.displayName = 'SuiProgressIndicator';
 

package/chunks/IconButtonLabel.js

@@ -33,7 +33,7 @@ const IconButton = withTooltip(forwardRef((inProps, ref) => {
         ...props,
         rootRef: ref,
     });
-    const rootProps = {
+    const rootProps = getRootProps({
         className: cls('root', size, variant, color, shape, `${size}-${shape}`, `${size}-${variant}`, `${variant}-${color}`, `${variant}-${shape}`, ...(!background
             ? [
                 'hide-background',
@@ -45,9 +45,8 @@ const IconButton = withTooltip(forwardRef((inProps, ref) => {
             focusVisible,
         }),
         'aria-label': label,
-        ...getRootProps(),
         ...rest,
-    };
+    });
     const content = (jsxs(Fragment, { children: [children || (jsx(Icon, { symbol: symbol, size: iconSize ?? IconSizeMap[size] })), sizeSupportsLabel(size) && label && (jsx("span", { className: cls('label', `${size}-label`, shape === 'squircle' && `${shape}-label`, `${size}-${shape}-label`), children: label }))] }));
     if (shape === 'squircle') {
         return (jsx(Squircle, { ...rootProps, component: component, interactive: !disabled, focusVisible: focusVisible, children: content }));

package/chunks/Menu.js

@@ -30,8 +30,9 @@ const Menu = forwardRef((inProps, ref) => {
         onClose?.(undefined, 'Other');
     });
     const menuContextValue = useMemo(() => {
-        return { close: closeHandler, autoFocus };
-    }, [autoFocus, closeHandler]);
+        const effectiveAutoFocus = open ? autoFocus : false;
+        return { close: closeHandler, autoFocus: effectiveAutoFocus };
+    }, [autoFocus, closeHandler, open]);
     return (jsx(Popover, { bordered: true, className: cls('root'), PopperProps: { ...PopperProps, padding: popperPadding }, ...rest, open: open, onClose: (e, reason) => {
             onClose?.(e, reason);
         }, ref: ref, children: jsx("div", { className: cls('paper'), children: jsx(MenuContext.Provider, { value: menuContextValue, children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }) }));

package/chunks/MenuList.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useRef, useEffect } from 'react';
+import { forwardRef, useMemo, useRef, useLayoutEffect } from 'react';
 import { useClasses, useForkRef, useWindowContext } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { L as List } from './List.js';
@@ -29,12 +29,12 @@ const MenuList = forwardRef((inProps, ref) => {
     const listRef = useRef(null);
     const handleListRef = useForkRef(listRef, ref);
     const { document } = useWindowContext();
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (autoFocus &&
             !listRef.current?.contains(document?.activeElement ?? null)) {
             actions.current?.focus();
         }
-    }, []);
+    }, [autoFocus]);
     const listRole = widget === 'select' ? 'listbox' : 'menu';
     const listboxProps = widget === 'select'
         ? { 'aria-multiselectable': selectMode === 'multiple' }

package/chunks/Modal.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, forwardRef, useState, useRef, useEffect } from 'react';
+import { createContext, useContext, forwardRef, useState, useEffect } from 'react';
 import { useAriaHideOutside, useForkRef, useClasses, useEventCallback, useBodyScrollLock, useWindowContext } from '@ringcentral/spring-base';
 import { useThemeProps, useTheme } from '@ringcentral/spring-theme';
 import { FocusTrap, Portal } from '@mui/base';
@@ -31,7 +31,7 @@ const InnerModal = forwardRef((props, ref) => {
         onBackdropClick?.(event);
         onClose?.(event, 'backdropClick');
     });
-    return (jsx(ModalContext.Provider, { value: { ariaHideEnabled }, children: jsxs(motion.div, { ...rest, ...motionProps, role: "presentation", className: cls('root'), onKeyDown: (e) => {
+    return (jsx(ModalContext.Provider, { value: { ariaHideEnabled }, children: jsxs(motion.div, { ...rest, ...motionProps, role: "presentation", className: cls('root', { 'non-blocking': !blocking }), onKeyDown: (e) => {
                 onKeyDown?.(e);
                 if (!disableEscapeKeyDown &&
                     e.key === 'Escape' &&
@@ -47,16 +47,12 @@ const Modal = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Modal' });
     const { children, open, container: containerProp, disablePortal, onExitComplete, disableBackdropAnimation, motionProps, disableScrollLock = false, ...rest } = props;
     const [shouldRender, setShouldRender] = useState(open);
-    const modalRef = useRef(null);
-    const handleRef = useForkRef(modalRef, ref);
+    const [modalElement, setModalElement] = useState(null);
+    const handleRef = useForkRef(setModalElement, ref);
     const prefersReducedMotion = usePrefersReducedMotion();
     const { isEnabled } = useFocusTrapStack({ open });
-    useBodyScrollLock(open, modalRef.current, {
+    useBodyScrollLock(open, modalElement, {
         disabled: disableScrollLock,
-        reserveScrollBarGap: true,
-        allowTouchMove: (el) => {
-            return modalRef.current?.contains(el) ?? false;
-        },
     });
     useEffect(() => {
         if (open) {

package/chunks/Tooltip.js

@@ -196,7 +196,7 @@ const TooltipView = forwardRef((props, ref) => {
                 arrowStyle,
                 classes: {
                     root: cls('paper', color),
-                    content: cls('paper-content', size),
+                    content: cls('paper-content', `paper-content-${size}`),
                 },
             }, popperPaperPropsProp), children: [icon && jsx(Icon, { symbol: icon, size: "small", className: cls('icon') }), jsx("div", { className: cls('content', `content-${size}`), children: children })] })) }));
 });

package/chunks/VirtualizedMenu.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useEffect, forwardRef, useState, useMemo } from 'react';
+import { createContext, useContext, useRef, useLayoutEffect, forwardRef, useState, useMemo, useEffect } from 'react';
 import { useForkRef, combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import clsx from 'clsx';
@@ -14,7 +14,11 @@ const VirtualizedMenuList = (props) => {
     const actions = useRef(null);
     const handleListActions = useForkRef(actions, actionsProp);
     const listRef = useRef(null);
-    useEffect(() => {
+    const virtualizedMenuContext = useVirtualizedMenuContext();
+    useLayoutEffect(() => {
+        if (!virtualizedMenuContext?.open) {
+            return;
+        }
         const initialFocus = typeof initialFocusProps === 'function'
             ? initialFocusProps()
             : initialFocusProps;
@@ -24,20 +28,21 @@ const VirtualizedMenuList = (props) => {
         else if (typeof initialFocus === 'number') {
             actions.current?.focusByIndex(initialFocus);
         }
-    }, []);
+    }, [virtualizedMenuContext?.open]);
     return (jsx(VirtualizedList, { actions: handleListActions, ...rest, ListProps: combineProps({
             role: 'menu',
         }, rest.ListProps), ref: listRef, totalListHeightChanged: totalListHeightChangedProp, children: children }));
 };
 
+const MENU_VERTICAL_PADDING = 8;
 const VirtualizedMenu = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'VirtualizedMenu' });
     const { classes, className, children, open, onClose, data, totalCount, isItemDisabled, VirtualizedListProps, popperActions: popperActionsProp, initialFocus = true, maxHeight, PopperProps, ...rest } = props;
     const popperPaperContentRef = useRef(null);
     const paperContentContainerRef = useRef(null);
-    const waitForListHeightComputeCallsCount = useRef(0);
+    const hasItemsRenderedRef = useRef(false);
     const [waitForHeightCompute, setWaitForHeightCompute] = useState(true);
-    const [menuHeight, setMenuHeight] = useState(0);
+    const [menuHeight, setMenuHeight] = useState(MENU_VERTICAL_PADDING * 2);
     const [deferPendingVirtualizedListActions, setDeferPendingVirtualizedListActions,] = useState(true);
     const computedListHeight = useRef(-1);
     const availableHeight = useRef(-1);
@@ -75,13 +80,14 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         }
     });
     const handleTotalListHeightChanged = useEventCallback((listHeight) => {
-        if (waitForListHeightComputeCallsCount.current < 2) {
-            waitForListHeightComputeCallsCount.current += 1;
+        if (!hasItemsRenderedRef.current) {
             return;
         }
-        computedListHeight.current = listHeight;
+        const adjustedHeight = listHeight + MENU_VERTICAL_PADDING * 2
+            ;
+        computedListHeight.current = adjustedHeight;
         if (paperContentContainerRef.current) {
-            paperContentContainerRef.current.style.height = `${listHeight}px`;
+            paperContentContainerRef.current.style.height = `${adjustedHeight}px`;
         }
         updateMenuHeight();
         popperActions.current?.update();
@@ -95,7 +101,7 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         }
     });
     const handleAvailableHeightChange = useEventCallback((value) => {
-        if (computedListHeight.current === -1) {
+        if (computedListHeight.current === -1 || !hasItemsRenderedRef.current) {
             return;
         }
         availableHeight.current = value;
@@ -104,13 +110,20 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
     });
     useEffect(() => {
         if (!open) {
-            waitForListHeightComputeCallsCount.current = 0;
-            computedListHeight.current = -1;
-            availableHeight.current = -1;
+            hasItemsRenderedRef.current = false;
         }
         if (open) {
-            setWaitForHeightCompute(true);
-            setDeferPendingVirtualizedListActions(true);
+            if (computedListHeight.current !== -1) {
+                updateMenuHeight();
+                setWaitForHeightCompute(false);
+                setDeferPendingVirtualizedListActions(false);
+                popperActions.current?.update();
+            }
+            else {
+                setMenuHeight(MENU_VERTICAL_PADDING * 2);
+                setWaitForHeightCompute(true);
+                setDeferPendingVirtualizedListActions(true);
+            }
             if (popperPaperContentRef.current) {
                 popperPaperContentRef.current.style.maxHeight = 'none';
             }
@@ -119,11 +132,23 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
     return (jsx(Popover, { bordered: true, PopperProps: { ...PopperProps, padding: popperPadding }, ...rest, open: open, className: clsx(cls('root'), waitForHeightCompute && 'opacity-0'), PopperPaperProps: {
             contentRef: popperPaperContentRef,
         }, onClose: onClose, onAvailableHeightChange: handleAvailableHeightChange, ref: ref, motionProps: { variants: undefined }, actions: handlePopperActions, children: jsx("div", { className: cls('paper'), children: jsx("div", { ref: paperContentContainerRef, className: cls('paper-content-container'), children: jsx(VirtualizedMenuContext.Provider, { value: menuContextValue, children: jsx(VirtualizedMenuList, { data: data, totalCount: totalCount, isReady: !deferPendingVirtualizedListActions, isItemDisabled: isItemDisabled, initialFocus: initialFocus, style: { height: menuHeight }, ...combineProps(VirtualizedListProps, {
-                            components: {
-                                Header: VirtualizedListVerticalPadding,
-                                Footer: VirtualizedListVerticalPadding,
-                            },
+                            ListProps: combineProps(VirtualizedListProps?.ListProps, {
+                                className: cls('list'),
+                                style: {
+                                    ['--sui-virtualized-menu-vertical-padding']: `${MENU_VERTICAL_PADDING}px`,
+                                },
+                            }),
                             totalListHeightChanged: handleTotalListHeightChanged,
+                            itemsRendered: (items) => {
+                                if (totalCount === 0 ||
+                                    (totalCount === undefined &&
+                                        data !== undefined &&
+                                        data.length === 0) ||
+                                    (items && items.length > 0)) {
+                                    hasItemsRenderedRef.current = true;
+                                }
+                                VirtualizedListProps?.itemsRendered?.(items);
+                            },
                             onKeyDown: (e) => {
                                 if (e.key === 'Tab') {
                                     e.preventDefault();
@@ -132,9 +157,6 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
                             },
                         }), children: children }) }) }) }) }));
 });
-function VirtualizedListVerticalPadding() {
-    return jsx("div", { className: "h-2" });
-}
 VirtualizedMenu.displayName = 'SuiVirtualizedMenu';
 
 export { VirtualizedMenuContext as V, VirtualizedMenu as a, VirtualizedMenuList as b, useVirtualizedMenuContext as u };

package/chunks/getFade.js

@@ -10,7 +10,6 @@ const getFade = ({ toggle = true, prefersReducedMotion = false, toggleOnTransiti
             transition: prefersReducedMotion
                 ? motionTransition.instant
                 : toggleOnTransition || motionTransition['haste-01-fast'],
-            pointerEvents: 'auto',
         },
         hidden: {
             opacity: 0,
@@ -18,6 +17,9 @@ const getFade = ({ toggle = true, prefersReducedMotion = false, toggleOnTransiti
                 ? motionTransition.instant
                 : toggleOffTransition || motionTransition['haste-01-slow'],
             pointerEvents: 'none',
+            transitionEnd: {
+                pointerEvents: undefined,
+            },
         },
     },
 });

package/chunks/useListNavigation.js

@@ -120,6 +120,9 @@ const useListNavigation = (props) => {
 const isUnfocusable = (el) => el.matches('.sui-disabled, :disabled, hr, [role="separator"], [disabled]');
 const defaultSearchAndFocusItem = (searchElementOption, helperElements) => {
     const { list, sentinelEnd } = helperElements;
+    if (list.firstElementChild === sentinelEnd) {
+        return { focused: false };
+    }
     const getFirstItem = () => {
         const firstItem = list.firstElementChild;
         if (firstItem === sentinelEnd) {

package/chunks/useMenuItemSelect.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, forwardRef, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createContext, useContext, forwardRef, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
 import { useFocusVisible, useActive, useForkRef, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
 import { CheckBoldMd } from '@ringcentral/spring-icon';
 import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
@@ -131,7 +131,7 @@ const MenuItem = forwardRef((inProps, ref) => {
     const id = useId();
     const { hover, hoverHandlers } = useHover({ onMouseEnter, onMouseLeave });
     useNestedMenuItem({ hovered: hover, id });
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (autoFocus) {
             itemRef.current?.focus();
             requestAnimationFrame(() => {
@@ -145,7 +145,7 @@ const MenuItem = forwardRef((inProps, ref) => {
                 });
             });
         }
-    }, []);
+    }, [autoFocus]);
     return (jsx("div", { className: cls('root', {
             selectable,
             selected,

package/chunks/useNestedParentMenu.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef, useState, useMemo, useEffect, useLayoutEffect } from 'react';
+import { createContext, useContext, useRef, useMemo, useLayoutEffect } from 'react';
 
 const NestedMenuContext = createContext(null);
 const useNestedMenuContext = () => {
@@ -7,19 +7,14 @@ const useNestedMenuContext = () => {
 
 const useNestedParentMenu = (props) => {
     const openedSubMenuSymbolRef = useRef(null);
-    const [hoveredItemId, setHoveredItemId] = useState();
     const { open } = props;
     const contextValue = useMemo(() => {
         return {
             registHoveredItem: (id) => {
-                setHoveredItemId(id);
-                return () => {
-                    setHoveredItemId((pre) => {
-                        if (pre === id)
-                            return undefined;
-                        return pre;
-                    });
-                };
+                const symbol = openedSubMenuSymbolRef.current;
+                if (symbol && id !== symbol.anchorId) {
+                    symbol.closeSubMenu();
+                }
             },
             registOpenedSubMenu: (menuItemSymbol) => {
                 openedSubMenuSymbolRef.current?.closeSubMenu();
@@ -32,12 +27,6 @@ const useNestedParentMenu = (props) => {
             },
         };
     }, []);
-    useEffect(() => {
-        const symbol = openedSubMenuSymbolRef.current;
-        if (symbol && hoveredItemId && hoveredItemId !== symbol.anchorId) {
-            symbol.closeSubMenu();
-        }
-    }, [hoveredItemId]);
     useLayoutEffect(() => {
         if (!open) {
             openedSubMenuSymbolRef.current?.closeSubMenu();

package/chunks/usePrefersReducedMotion.js

@@ -20,10 +20,14 @@ const usePrefersReducedMotion = () => {
         target: mediaQuery,
         customKey: 'prefers-reduced-motion',
     });
-    if (context.reducedMotion === 'always') {
+    if (context.reducedMotion === 'user') {
+        return shouldReduceMotion;
+    }
+    if (context.reducedMotion === 'always' ||
+        process.env.NODE_ENV === 'test') {
         return true;
     }
-    else if (context.reducedMotion === 'never') {
+    if (context.reducedMotion === 'never') {
         return false;
     }
     return shouldReduceMotion;

package/index.css

@@ -534,13 +534,28 @@
 }
 
 .sui-modal-root {
+
     position: fixed;
+
     inset: var(--sui-spacing-0);
+
     z-index: 1300;
+
     outline: 2px solid transparent;
+
     outline-offset: 2px
 }
 
+.sui-modal-non-blocking {
+
+    pointer-events: none
+}
+
+.sui-modal-non-blocking > :not(.sui-backdrop-root) {
+
+    pointer-events: auto
+}
+
 .sui-popper-paper-root {
   --sui-popper-paper-arrow-radius: 2px;
 }
@@ -677,21 +692,6 @@
  overflow-wrap: break-word;
 }
 
-.sui-tooltip-view-content-medium {
-
- font-size: var(--sui-typography-descriptor-font-size);
-
- font-weight: var(--sui-typography-descriptor-font-weight);
-
- line-height: var(--sui-typography-descriptor-line-height);
-
- text-decoration: var(--sui-typography-descriptor-text-decoration);
-
- text-transform: var(--sui-typography-descriptor-text-transform);
-
- font-family: var(--sui-font-family);
-}
-
 .sui-tooltip-view-neutral {
 
  --tw-border-opacity: 1;
@@ -1592,6 +1592,8 @@
 
     justify-content: center;
 
+    flex-shrink: 0;
+
     border-style: none;
 
     text-decoration-line: none;
@@ -2788,19 +2790,29 @@
 }
 
 .sui-virtualized-menu-paper {
-
     min-width: var(--sui-spacing-50);
-
     max-width: var(--sui-spacing-112);
-
-    overflow: hidden
+    overflow: hidden;
 }
 
 .sui-virtualized-menu-paper-content-container {
-
-    width: 100%
+    width: 100%;
 }
 
+.sui-virtualized-menu-list::before {
+    content: '';
+    display: block;
+    height: var(--sui-virtualized-menu-vertical-padding, 0px);
+    width: 0;
+  }
+
+.sui-virtualized-menu-list::after {
+    content: '';
+    display: block;
+    height: var(--sui-virtualized-menu-vertical-padding, 0px);
+    width: 0;
+  }
+
 .sui-select-chevron {
 
   height: var(--sui-spacing-6);
@@ -5057,14 +5069,13 @@ display: none
 
   /* Compact Mode */
   .sui-alert-title-root:where(.sui-compact) {
-    font-size: var(--sui-typography-subtitle-mini-font-size);
-    font-weight: var(--sui-typography-subtitle-mini-font-weight);
-    line-height: var(--sui-typography-subtitle-mini-line-height);
-    text-decoration: var(--sui-typography-subtitle-mini-text-decoration);
-    text-transform: var(--sui-typography-subtitle-mini-text-transform);
+    font-size: var(--sui-typography-subtitle-mini-semi-bold-font-size);
+    font-weight: var(--sui-typography-subtitle-mini-semi-bold-font-weight);
+    line-height: var(--sui-typography-subtitle-mini-semi-bold-line-height);
+    text-decoration: var(--sui-typography-subtitle-mini-semi-bold-text-decoration);
+    text-transform: var(--sui-typography-subtitle-mini-semi-bold-text-transform);
     font-family: var(--sui-font-family);
-    margin-bottom: var(--sui-spacing-0);
-    font-weight: var(--sui-font-weight-semi-bold)
+    margin-bottom: var(--sui-spacing-0)
 }
 
 .sui-announcement-icon,
@@ -9766,11 +9777,15 @@ height: var(--sui-spacing-25);
       position: fixed;
       max-height: 80vh;
       max-width: calc(100% - var(--sui-spacing-12));
+      pointer-events: auto;
 }
   .sui-dialog-root {
       display: flex;
       align-items: center;
       justify-content: center;
+}
+  .sui-dialog-non-blocking {
+      pointer-events: none;
 }
   .sui-dialog-small {
       width: var(--sui-spacing-71);
@@ -10722,12 +10737,13 @@ height: var(--sui-spacing-25);
     color: rgb(var(--s-neutral-w0), calc(var(--s-neutral-w0-opacity, 1) * var(--tw-text-opacity)));
   }
 }
-  .sui-tab-root.sui-active,
-    .sui-tab-root:active {
+  /* Use :active pseudo-class for pressed state.
+       .sui-active class is still applied by JS for backward compatibility. */
+  .sui-tab-root:active {
   --tw-text-opacity: 1;
   color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
 }
-  .sui-tab-root.sui-active .sui-tab-badge, .sui-tab-root:active .sui-tab-badge {
+  .sui-tab-root:active .sui-tab-badge {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-bg-opacity)));
 }
@@ -10845,8 +10861,7 @@ height: var(--sui-spacing-25);
     color: rgb(var(--s-neutral-b0), calc(var(--s-neutral-b0-opacity, 1) * var(--tw-text-opacity)));
   }
 }
-  .sui-tab-pill.sui-active,
-    .sui-tab-pill:active {
+  .sui-tab-pill:active {
   --tw-border-opacity: 1;
   border-color: rgb(var(--s-neutral-b3), calc(var(--s-neutral-b3-opacity, 1) * var(--tw-border-opacity)));
   --tw-bg-opacity: 1;
@@ -10889,10 +10904,7 @@ height: var(--sui-spacing-25);
     color: rgb(var(--s-neutral-high-contrast-b0), calc(var(--s-neutral-high-contrast-b0-opacity, 1) * var(--tw-text-opacity)));
   }
 }
-  .sui-tab-label-pill-cobranding.sui-selected.sui-active,
-      .sui-tab-label-pill-cobranding.sui-selected:active,
-      .sui-tab-icon-pill-cobranding.sui-selected.sui-active,
-      .sui-tab-icon-pill-cobranding.sui-selected:active {
+  .sui-tab-label-pill-cobranding.sui-selected:active, .sui-tab-icon-pill-cobranding.sui-selected:active {
   --tw-border-opacity: 1;
   border-color: rgb(var(--s-neutral-high-contrast-w0), calc(var(--s-neutral-high-contrast-w0-opacity, 1) * var(--tw-border-opacity)));
   --tw-bg-opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/spring-ui",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "author": "RingCentral",
   "description": "A comprehensive React component library built with Tailwind CSS, featuring production-ready components",
   "main": "./index.js",
@@ -14,9 +14,9 @@
     "@floating-ui/react-dom": "2.1.1",
     "@juggle/resize-observer": "3.4.0",
     "@mui/base": "5.0.0-beta.40",
-    "@ringcentral/spring-base": "^1.8.0",
-    "@ringcentral/spring-icon": "^1.8.0",
-    "@ringcentral/spring-theme": "^1.8.0",
+    "@ringcentral/spring-base": "^1.9.1",
+    "@ringcentral/spring-icon": "^1.9.1",
+    "@ringcentral/spring-theme": "^1.9.1",
     "@types/lodash": "^4.14.182",
     "@use-gesture/react": "10.3.1",
     "clsx": "^1.2.1",

package/src/Accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { AccordionProps } from './Accordion.type';
 import accordionStyles from './styles/Accordion.css';
-declare const Accordion: import("react").ForwardRefExoticComponent<Pick<AccordionProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "header" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "expanded" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "keepMounted" | "defaultExpanded"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Accordion: import("react").ForwardRefExoticComponent<Pick<AccordionProps, "children" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onClick" | "aria-hidden" | "dir" | "header" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "expanded" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "keepMounted" | "defaultExpanded"> & import("react").RefAttributes<HTMLDivElement>>;
 export { Accordion, accordionStyles };

package/src/AccordionHeader/AccordionHeader.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { AccordionHeaderProps } from './AccordionHeader.type';
 import accordionHeaderStyles from './styles/AccordionHeader.css';
-declare const AccordionHeader: import("react").ForwardRefExoticComponent<Pick<AccordionHeaderProps, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "aria-hidden" | "dir" | "form" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "name" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "placeholder" | "type" | "onFocusVisible" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "autoFocus" | "formEncType" | "secondarySlot" | "expandIcon" | "ExpandCollapseCaretProps"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const AccordionHeader: import("react").ForwardRefExoticComponent<Pick<AccordionHeaderProps, "value" | "children" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onClick" | "disabled" | "aria-hidden" | "dir" | "form" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "name" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "placeholder" | "type" | "onFocusVisible" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "autoFocus" | "formEncType" | "secondarySlot" | "expandIcon" | "ExpandCollapseCaretProps"> & import("react").RefAttributes<HTMLButtonElement>>;
 export { AccordionHeader, accordionHeaderStyles };