@ringcentral/spring-ui 1.7.0

package/Slider.js

@@ -0,0 +1,110 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { motion } from 'framer-motion';
+import { useSlider } from '@mui/base';
+import { useHover, useClasses, combineProps, useEventCallback } from '@ringcentral/spring-base';
+import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+import { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
+import { T as Tooltip } from './chunks/Tooltip.js';
+import './chunks/usePrefersReducedMotion.js';
+import 'clsx';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+const valueToPercent = (value, min, max) => ((value - min) * 100) / (max - min);
+
+const Identity = (x) => x;
+const SliderThumb = (props) => {
+    const { value, min, max, axis, axisProps, focusVisible, valueLabelDisplay, valueLabelFormat, valueLabelTooltipProps, orientation, scale = Identity, classes, transition, dragging, 'aria-label': ariaLabel, 'aria-valuetext': ariaValuetext, getThumbProps, getAriaValueText, getHiddenInputProps, index, } = props;
+    const { hover, hoverHandlers } = useHover();
+    const thumbProps = getThumbProps(hoverHandlers);
+    const cls = useClasses('slider', classes);
+    const percent = valueToPercent(value, min, max);
+    const style = axisProps[axis].offset(percent);
+    const scaledValue = scale(value);
+    // Format value label for tooltip display
+    const valueLabel = typeof valueLabelFormat === 'function'
+        ? valueLabelFormat(scaledValue)
+        : typeof valueLabelFormat === 'string'
+            ? valueLabelFormat
+            : scaledValue;
+    // Calculate aria-valuetext
+    const ariaValueText = getAriaValueText
+        ? getAriaValueText(scaledValue)
+        : typeof valueLabelFormat === 'function' ||
+            typeof valueLabelFormat === 'string'
+            ? String(valueLabel)
+            : ariaValuetext;
+    return (jsxs(motion.div, { className: cls('thumb', `thumb-${orientation}`, {
+            focusVisible,
+        }), ...thumbProps, initial: false, animate: style, transition: transition, children: [jsx("span", { className: cls('thumb-inner') }), jsx(Tooltip, { open: valueLabelDisplay === 'on' ||
+                    (valueLabelDisplay === 'auto' && (hover || focusVisible || dragging)), title: valueLabel, ...combineProps({
+                    placement: orientation === 'vertical' ? 'left' : 'top',
+                    className: cls('value-label', {
+                        'show-on-hover-only': valueLabelDisplay === 'auto', // kept for backward compatibility
+                    }),
+                    classes: {
+                        paper: cls('value-label-paper'),
+                        paperContent: 'justify-center',
+                    },
+                    PopperProps: {
+                        disablePortal: true,
+                        autoUpdate: {
+                            ancestorScroll: true,
+                            ancestorResize: true,
+                            elementResize: true,
+                            animationFrame: true,
+                        },
+                    },
+                }, valueLabelTooltipProps), children: jsx("input", { "data-index": index, role: 'slider', "aria-label": ariaLabel, "aria-valuenow": scale(value), "aria-valuetext": ariaValueText, value: value, ...getHiddenInputProps() }) })] }));
+};
+SliderThumb.displayName = 'SuiSliderThumb';
+
+var Slider$1 = {"sui-slider-root":"sui-slider-root","sui-disabled":"sui-disabled","sui-slider-thumb":"sui-slider-thumb","sui-slider-mark":"sui-slider-mark","sui-slider-mark-label":"sui-slider-mark-label","sui-slider-value-label-paper":"sui-slider-value-label-paper","sui-slider-show-color-at-rest":"sui-slider-show-color-at-rest","sui-slider-neutral":"sui-slider-neutral","sui-slider-success":"sui-slider-success","sui-slider-danger":"sui-slider-danger","sui-slider-warning":"sui-slider-warning","sui-slider-horizontal":"sui-slider-horizontal","sui-slider-vertical":"sui-slider-vertical","sui-slider-has-marks":"sui-slider-has-marks","sui-slider-rail":"sui-slider-rail","sui-slider-track":"sui-slider-track","sui-slider-rail-horizontal":"sui-slider-rail-horizontal","sui-slider-rail-vertical":"sui-slider-rail-vertical","sui-slider-track-horizontal":"sui-slider-track-horizontal","sui-slider-track-vertical":"sui-slider-track-vertical","sui-focus-visible":"sui-focus-visible","sui-slider-thumb-horizontal":"sui-slider-thumb-horizontal","sui-slider-thumb-vertical":"sui-slider-thumb-vertical","sui-slider-thumb-inner":"sui-slider-thumb-inner","sui-slider-marks":"sui-slider-marks","sui-slider-marks-horizontal":"sui-slider-marks-horizontal","sui-slider-marks-vertical":"sui-slider-marks-vertical","sui-slider-mark-container":"sui-slider-mark-container","sui-slider-mark-container-horizontal":"sui-slider-mark-container-horizontal","sui-slider-mark-container-vertical":"sui-slider-mark-container-vertical","sui-slider-mark-vertical":"sui-slider-mark-vertical","sui-slider-mark-horizontal":"sui-slider-mark-horizontal"};
+
+const InnerSlider = (inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Slider' });
+    const { classes, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-valuetext': ariaValuetext, disabled = false, defaultValue, getAriaValueText, max = 100, min = 0, name, disableSwap, color = 'neutral', marks: marksProp = false, onChange, onChangeCommitted, onMouseDown, scale, step, tabIndex, valueLabelDisplay = 'off', valueLabelFormat, valueLabelTooltipProps, value: valueProp, shiftStep, orientation = 'horizontal', showColorAtRest = false, ...rest } = props;
+    const handleChange = useEventCallback((event, value, activeThumb) => {
+        onChange?.(event, value, activeThumb);
+    });
+    const { dragging, axisProps, getRootProps, getHiddenInputProps, getThumbProps, axis = orientation, focusedThumbIndex, values, trackOffset, trackLeap, marks, } = useSlider({
+        ...props,
+        onChangeCommitted: onChangeCommitted,
+        marks: marksProp,
+        onChange: handleChange,
+        rootRef: ref,
+        orientation,
+    });
+    const cls = useClasses('slider', classes, className);
+    const hasMarks = marks.length > 0;
+    const isEmpty = values.every((value) => value === min);
+    const transition = useMotionSafeTransition(dragging ? motionTransition['instant'] : motionTransition['haste-01-fast']);
+    return (jsxs("span", { className: cls('root', color, orientation, {
+            disabled,
+            empty: isEmpty,
+            'has-marks': hasMarks,
+            'show-color-at-rest': showColorAtRest,
+        }), "aria-disabled": disabled, ...rest, ...getRootProps({
+            onMouseDown,
+        }), children: [jsx("span", { className: cls('rail', `rail-${orientation}`) }), jsx(motion.span, { className: cls('track', `track-${orientation}`, {
+                    'track-empty': isEmpty,
+                }), initial: false, animate: {
+                    ...axisProps[axis].offset(trackOffset),
+                    ...axisProps[axis].leap(trackLeap),
+                }, transition: transition }), values.map((value, index) => (jsx(SliderThumb, { value: value, index: index, min: min, max: max, axis: axis, axisProps: axisProps, focusVisible: focusedThumbIndex === index, dragging: dragging, valueLabelDisplay: valueLabelDisplay, valueLabelFormat: valueLabelFormat, valueLabelTooltipProps: valueLabelTooltipProps, orientation: orientation, scale: scale, classes: classes, transition: transition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getThumbProps: getThumbProps, getAriaValueText: getAriaValueText, getHiddenInputProps: getHiddenInputProps }, `value-${index}`))), hasMarks && (jsx("span", { className: cls('marks', `marks-${orientation}`), children: marks.map((mark, index) => {
+                    return (jsxs("span", { "data-index": index, className: cls('mark-container', `mark-container-${orientation}`), style: axisProps[axis].offset(valueToPercent(mark.value, min, max)), children: [jsx("span", { className: cls('mark', `mark-${orientation}`) }), mark.label &&
+                                (typeof mark.label === 'string' ? (jsx("span", { className: cls('mark-label'), children: mark.label })) : (mark.label))] }, `${mark.value}`));
+                }) }))] }));
+};
+// forwardRef doesn't handle generic types well, so we need to cast through an intermediate variable
+const Slider = forwardRef(InnerSlider);
+Slider.displayName = 'SuiSlider';
+
+export { Slider, Slider$1 as sliderStyle };

package/Snackbar.js

@@ -0,0 +1,118 @@
+import { useWindowContext, useClasses, useTimeout } from '@ringcentral/spring-base';
+import { useTheme, useThemeProps } from '@ringcentral/spring-theme';
+import { useMemo, forwardRef, isValidElement, cloneElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { Portal } from '@mui/base';
+import { A as Alert } from './chunks/Alert.js';
+import '@ringcentral/spring-icon';
+import 'clsx';
+import './chunks/Icon.js';
+import './chunks/IconButtonLabel.js';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'framer-motion';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+const WRAPPER_ID = 'sui-snackbar-wrapper';
+const useSnackbarWrapper = (className) => {
+    const { document } = useWindowContext();
+    const { scopeProps } = useTheme();
+    /**
+     * We must memoize the container otherwise other components that
+     * are a child of the wrapper which are conditionally rendered
+     * can throw a "Cannot update a component while rendering a different component" error.
+     */
+    return useMemo(() => {
+        const container = document?.getElementById(WRAPPER_ID) ?? document?.createElement('div');
+        if (container) {
+            Object.entries({
+                class: className,
+                id: WRAPPER_ID,
+            }).forEach(([key, value]) => container.setAttribute(key, value));
+            // create one more div wrapper to wrap the container
+            if (document) {
+                const wrapper = document.createElement('div');
+                // Apply the scope props directly to the wrapper
+                Object.entries({
+                    ...scopeProps,
+                }).forEach(([key, value]) => {
+                    /**
+                     * Map the key to an attribute. scopeProps is set on a ReactElement so
+                     * setting a key like className will automatically be set to class,
+                     * but as we're mutating the DOM element directly we need to manually
+                     * map the key name to the DOM attribute name.
+                     */
+                    let attribute = key;
+                    if (attribute === 'className') {
+                        attribute = 'class';
+                    }
+                    wrapper.setAttribute(attribute, value);
+                });
+                wrapper?.appendChild(container);
+                document.body.appendChild(wrapper);
+            }
+        }
+        return container;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [className, scopeProps]);
+};
+
+var SnackbarContent$1 = {"sui-snackbar-content-root":"sui-snackbar-content-root","sui-snackbar-content-icon":"sui-snackbar-content-icon","sui-snackbar-content-close":"sui-snackbar-content-close","sui-snackbar-content-action":"sui-snackbar-content-action","sui-snackbar-content-body":"sui-snackbar-content-body","sui-snackbar-content-info":"sui-snackbar-content-info","sui-snackbar-content-error":"sui-snackbar-content-error","sui-snackbar-content-warning":"sui-snackbar-content-warning","sui-snackbar-content-success":"sui-snackbar-content-success","sui-snackbar-content-neutral":"sui-snackbar-content-neutral"};
+
+const SnackbarContent = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Snackbar' });
+    const { classes, className, severity = 'neutral', ...rest } = props;
+    const cls = useClasses('snackbar-content', classes, className);
+    return (jsx(Alert, { ref: ref, ...rest, severity: severity, className: cls('root'), classes: {
+            body: cls('body'),
+            icon: cls('icon'),
+            close: cls('close'),
+            action: cls('action'),
+            [severity]: cls(severity),
+        } }));
+});
+SnackbarContent.displayName = 'SuiSnackbarContent';
+
+var Snackbar$1 = {"sui-snackbar-root":"sui-snackbar-root"};
+
+const Snackbar = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Snackbar' });
+    const { onClose, classes, className, open = true, autoHideDuration = 5000, disablePortal, closeButton, children, ...rest } = props;
+    const cls = useClasses('snackbar', classes, className);
+    const wrapper = useSnackbarWrapper(cls('root'));
+    useTimeout(() => onClose?.(), open ? autoHideDuration : null);
+    const content = useMemo(() => {
+        if (!children)
+            return null;
+        const isSnackbarContent = isValidElement(children) && children.type === SnackbarContent;
+        if (!isSnackbarContent) {
+            return (jsx(SnackbarContent, { ...rest, classes: classes, className: className, ref: ref, onClose: closeButton ? onClose : undefined, children: children }));
+        }
+        return cloneElement(children, {
+            ...rest,
+            classes,
+            className,
+            ...(children.props || {}),
+            ref,
+            onClose: 'onClose' in children.props
+                ? children.props.onClose
+                : closeButton
+                    ? onClose
+                    : undefined,
+        });
+    }, [children, rest, classes, className, ref, onClose, closeButton]);
+    if (!open)
+        return null;
+    return (jsx(Portal, { container: wrapper, disablePortal: disablePortal, children: content }));
+});
+Snackbar.displayName = 'SuiSnackbar';
+
+export { Snackbar, SnackbarContent, SnackbarContent$1 as snackbarContentStyles, Snackbar$1 as snackbarStyle, useSnackbarWrapper };

package/SortableList.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { SortableContext } from '@dnd-kit/sortable';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { forwardRef } from 'react';
+import { L as List } from './chunks/List.js';
+import '@ringcentral/spring-base';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+
+const SortableList = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'SortableList' });
+    const { children, data, ...rest } = props;
+    return (jsx(SortableContext, { items: data, children: jsx(List, { ...rest, ref: ref, children: data.map((itemData, index) => children(itemData, index)) }) }));
+});
+SortableList.displayName = 'SuiSortableList';
+
+export { SortableList };

package/SortableListDndContext.js

@@ -0,0 +1,49 @@
+import { useDndContext, KeyboardCode, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext } from '@dnd-kit/core';
+import { ownerDocument } from '@ringcentral/spring-base';
+import { useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+export { arrayMove } from '@dnd-kit/sortable';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const DndKeyboardBlocker = () => {
+    const { activeNode } = useDndContext();
+    useEffect(() => {
+        if (activeNode) {
+            const externalDocument = ownerDocument(activeNode);
+            const listener = (e) => {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                }
+            };
+            externalDocument.addEventListener('keydown', listener);
+            return () => externalDocument.removeEventListener('keydown', listener);
+        }
+        return undefined;
+    }, [activeNode]);
+    return null;
+};
+
+const pointerSensorOpts = { activationConstraint: { distance: 10 } };
+const keyboardSensorOpts = {
+    coordinateGetter: sortableKeyboardCoordinates,
+    keyboardCodes: {
+        start: [KeyboardCode.Space],
+        cancel: [KeyboardCode.Esc],
+        end: [KeyboardCode.Space, KeyboardCode.Enter],
+    },
+};
+const SortableListDndContext = (inProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'SortableListDndContext',
+    });
+    const { children, ...rest } = props;
+    const sensors = useSensors(useSensor(PointerSensor, pointerSensorOpts), useSensor(KeyboardSensor, keyboardSensorOpts));
+    return (jsxs(DndContext, { sensors: sensors, ...rest, children: [jsx(DndKeyboardBlocker, {}), children] }));
+};
+SortableListDndContext.displayName = 'SortableListDndContext';
+
+const useSortableListDndContext = useDndContext;
+
+export { DndKeyboardBlocker, SortableListDndContext, useSortableListDndContext };

package/SortableListItem.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useForkRef, combineProps } from '@ringcentral/spring-base';
+import { forwardRef } from 'react';
+import '@ringcentral/spring-theme';
+import 'framer-motion';
+import './chunks/Icon.js';
+import { L as ListItem } from './chunks/ListItem.js';
+import { useDndContext, DragOverlay } from '@dnd-kit/core';
+import './chunks/Divider.js';
+import './ListNavigation.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+import './VirtualizedList.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/SlideIn.js';
+import './chunks/getSlideIn.js';
+
+const SortableListItem = forwardRef((props, ref) => {
+    const { style, children, dragId, role = 'listitem', ...rest } = props;
+    const { setNodeRef, setActivatorNodeRef, listeners, attributes, transform, transition, isDragging, isSorting, } = useSortable({
+        id: dragId,
+        attributes: {
+            tabIndex: -1,
+            role,
+        },
+    });
+    const handleRef = useForkRef(ref, setNodeRef, setActivatorNodeRef);
+    return (jsx(ListItem, { ...combineProps(combineProps(rest, {
+            onKeyDown: (e) => {
+                // prevent trigger keyboard navigation
+                if (isSorting &&
+                    ['End', 'Home', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+                    e.preventDefault();
+                }
+            },
+            onKeyUp: (e) => {
+                if (e.target === e.currentTarget && e.key === ' ') {
+                    e.preventDefault();
+                }
+            },
+        }), listeners), ...attributes, style: {
+            ...style,
+            transform: CSS.Transform.toString(transform),
+            opacity: isDragging ? 0 : 1,
+            touchAction: 'none',
+            transition,
+        }, ref: handleRef, hoverable: !isSorting, children: children }));
+});
+SortableListItem.displayName = 'SuiSortableListItem';
+
+const SortableListItemOverlay = forwardRef((props, ref) => {
+    const { children, OverlayProps, ...rest } = props;
+    const { active, activatorEvent } = useDndContext();
+    return (jsx(DragOverlay, { ...OverlayProps, style: {
+            pointerEvents: activatorEvent instanceof PointerEvent &&
+                activatorEvent.pointerType === 'mouse'
+                ? 'none'
+                : 'auto',
+            touchAction: 'none',
+        }, children: active && (jsx(ListItem, { ...rest, ref: ref, dragged: true, tabIndex: undefined, children: typeof children === 'function' ? children(active.id) : children })) }));
+});
+SortableListItemOverlay.displayName = 'SortableListItemOverlay';
+
+export { SortableListItem, SortableListItemOverlay };

package/SortableVirtualizedList.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { useDndContext } from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { forwardRef, useMemo } from 'react';
+import { VirtualizedList } from './VirtualizedList.js';
+import '@ringcentral/spring-base';
+import 'react-virtuoso';
+import './chunks/List.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+
+const SortableVirtualizedList = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'SortableVirtualizedList',
+    });
+    const { children, data, ...rest } = props;
+    const { active } = useDndContext();
+    const keepInvisibleItems = useMemo(() => {
+        return active
+            ? [
+                data.findIndex((value) => {
+                    if (typeof value === 'object') {
+                        return value.id === active.id;
+                    }
+                    return value === active.id;
+                }),
+            ]
+            : undefined;
+    }, [active, data]);
+    return (jsx(SortableContext, { items: data, children: jsx(VirtualizedList, { ...rest, data: data, keepInvisibleItems: keepInvisibleItems, computeItemKey: (_, item) => typeof item === 'object' ? item.id : item, ref: ref, children: (index, data) => children(data, index) }) }));
+});
+SortableVirtualizedList.displayName = 'SuiSortableVirtualizedList';
+
+export { SortableVirtualizedList };

package/SplitButton.js

@@ -0,0 +1,173 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useState, useRef, useEffect, useMemo, isValidElement } from 'react';
+import { useEventCallback, useClasses, combineProps, logInDev } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import clsx from 'clsx';
+import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
+import 'framer-motion';
+import { I as Icon } from './chunks/Icon.js';
+import { b as buttonIconSizeMap, B as Button } from './chunks/Button.js';
+import { D as Divider } from './chunks/Divider.js';
+import { I as IconButton } from './chunks/IconButtonLabel.js';
+import { M as Menu } from './chunks/Menu.js';
+import { M as MenuList } from './chunks/MenuList.js';
+import './chunks/useMenuItemSelect.js';
+import { u as useSelect } from './chunks/Select.js';
+import { w as withTooltip } from './chunks/withTooltip.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+import '@mui/base';
+import './chunks/CircularProgressIndicator.js';
+import './chunks/Tooltip.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+import './chunks/Squircle.js';
+import './chunks/useNestedParentMenu.js';
+import './chunks/Popover.js';
+import './chunks/getGrow.js';
+import './chunks/List.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+import './VirtualizedList.js';
+import 'react-virtuoso';
+import '@ringcentral/spring-icon';
+import './chunks/useNestedMenuItem.js';
+import './ListNavigation.js';
+import './chunks/useHelperTextId.js';
+import './chunks/VirtualizedMenu.js';
+
+var SplitButton$1 = {"sui-split-button-root":"sui-split-button-root","sui-split-button-bg":"sui-split-button-bg","sui-button-outlined":"sui-button-outlined","sui-split-button-action-button-root":"sui-split-button-action-button-root","sui-focus-visible":"sui-focus-visible","sui-split-button-divider-contained-primary":"sui-split-button-divider-contained-primary","sui-split-button-divider-contained-danger":"sui-split-button-divider-contained-danger","sui-split-button-divider-contained-warning":"sui-split-button-divider-contained-warning","sui-split-button-divider-contained-success":"sui-split-button-divider-contained-success","sui-split-button-divider-contained-secondary":"sui-split-button-divider-contained-secondary","sui-split-button-divider-contained-neutral":"sui-split-button-divider-contained-neutral","sui-split-button-divider-inverted-primary":"sui-split-button-divider-inverted-primary","sui-split-button-divider-outlined-primary":"sui-split-button-divider-outlined-primary","sui-split-button-divider-inverted-danger":"sui-split-button-divider-inverted-danger","sui-split-button-divider-outlined-danger":"sui-split-button-divider-outlined-danger","sui-split-button-divider-inverted-warning":"sui-split-button-divider-inverted-warning","sui-split-button-divider-outlined-warning":"sui-split-button-divider-outlined-warning","sui-split-button-divider-inverted-success":"sui-split-button-divider-inverted-success","sui-split-button-divider-outlined-success":"sui-split-button-divider-outlined-success","sui-split-button-divider-inverted-secondary":"sui-split-button-divider-inverted-secondary","sui-split-button-divider-inverted-neutral":"sui-split-button-divider-inverted-neutral","sui-disabled":"sui-disabled","sui-split-button-divider-outlined-secondary":"sui-split-button-divider-outlined-secondary","sui-split-button-divider-outlined-neutral":"sui-split-button-divider-outlined-neutral","sui-split-button-divider-text":"sui-split-button-divider-text","sui-split-button-menu-button-root":"sui-split-button-menu-button-root"};
+
+const ButtonVariantIconButtonVariantMap = {
+    contained: 'contained',
+    outlined: 'outlined',
+    text: 'icon',
+    inverted: 'inverted',
+};
+const ExpandCollapseCaretSizeMap = {
+    xlarge: 'large',
+    large: 'medium',
+    medium: 'small',
+    small: 'small',
+    xsmall: 'xsmall',
+};
+const SplitButton = withTooltip(forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'SplitButton' });
+    const { classes, className, size = 'medium', variant = 'contained', color, background = true, loading, disabled, MenuProps, ActionButtonProps: actionButtonPropsProp, MenuButtonProps: menuButtonPropsProp, children: childrenProp, ...rest } = props;
+    const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+    const [open, setOpen] = useState(false);
+    const menuButtonRef = useRef(null);
+    const handleOpen = useEventCallback((newOpen) => {
+        setOpen(newOpen);
+    });
+    const { getButtonProps, getListboxProps } = useSelect({
+        open: false,
+        handleOpen,
+    });
+    const handleMenuClose = useEventCallback(() => {
+        handleOpen(false);
+    });
+    useEffect(() => {
+        setMenuAnchorEl(menuButtonRef.current);
+    }, []);
+    const cls = useClasses('split-button', classes, className);
+    const actionButtonCls = useClasses('button');
+    const menuButtonProps = combineProps({
+        variant: ButtonVariantIconButtonVariantMap[variant],
+        size,
+        color,
+        disabled,
+        background: false,
+        shape: 'rectangular',
+        classes: {
+            root: cls('menu-button-root', {
+                disabled,
+                active: open,
+            }),
+        },
+    }, menuButtonPropsProp);
+    const { actionButtonProps, menuItems } = useMemo(() => {
+        let _actionButtonProps = {};
+        const menuItems = [];
+        React.Children.forEach(childrenProp, (child, i) => {
+            if (!isValidElement(child) || child.type === React.Fragment) {
+                return;
+            }
+            const childProps = child.props;
+            let hasIconChild = false;
+            if (i === 0) {
+                let actionButtonContent = actionButtonPropsProp?.title ??
+                    childProps.title ??
+                    childProps.children;
+                if (React.isValidElement(childProps.children) &&
+                    childProps.children.type === Icon) {
+                    hasIconChild = true;
+                    actionButtonContent = React.cloneElement(childProps.children, {
+                        size: buttonIconSizeMap[size],
+                    });
+                }
+                _actionButtonProps = combineProps({
+                    size,
+                    variant,
+                    color,
+                    loading,
+                    disabled,
+                    background: false,
+                    children: actionButtonContent,
+                    onClick: childProps.onClick,
+                    classes: {
+                        root: clsx(cls('action-button-root'), 
+                        // Reduces the padding when only an icon is provided
+                        actionButtonCls(hasIconChild && 'has-start-slot', hasIconChild && 'has-end-slot')),
+                    },
+                }, actionButtonPropsProp);
+                if (process.env.NODE_ENV !== 'production' &&
+                    _actionButtonProps.children === undefined) {
+                    logInDev({
+                        scope: 'SplitButton',
+                        level: 'error',
+                        message: 'The first MenuItem must either have children, a title prop or ActionButtonProps.title must be provided',
+                    });
+                }
+                return;
+            }
+            menuItems.push(React.cloneElement(child, {
+                ...child.props,
+                ...combineProps({
+                    onClick: handleMenuClose,
+                }, {
+                    onClick: childProps.onClick,
+                }),
+                key: `${i}`,
+            }));
+        });
+        return { actionButtonProps: _actionButtonProps, menuItems: menuItems };
+    }, [
+        childrenProp,
+        handleMenuClose,
+        actionButtonPropsProp,
+        size,
+        variant,
+        color,
+        loading,
+        disabled,
+        cls,
+        actionButtonCls,
+    ]);
+    return (jsxs("div", { className: cls('root'), role: "group", ...rest, ref: ref, children: [jsx("div", { className: clsx(cls('bg'), actionButtonCls('root', variant, color, size, !background && 'hide-background', !background && `${variant}-hide-background`, `${variant}-${color}`, `${variant}-${size}`, {
+                    loading,
+                    disabled,
+                })) }), jsx(Button, { ...actionButtonProps }), jsx(Divider, { className: cls('divider', `divider-${variant}`, `divider-${variant}-${color}`, `divider-${color}`, {
+                    disabled,
+                }), orientation: "vertical", flexItem: true }), jsx(IconButton, { ...combineProps(menuButtonProps, getButtonProps()), ref: menuButtonRef, children: jsx(ExpandCollapseCaret, { expanded: open, size: ExpandCollapseCaretSizeMap[size] }) }), menuAnchorEl && (jsx(Menu, { placement: "bottom", variant: "pointed", ...combineProps(MenuProps, {
+                    onClose: handleMenuClose,
+                }), anchorEl: menuAnchorEl, open: open, children: jsx(MenuList, { nowrap: false, widget: "select", ...getListboxProps(), children: menuItems }) }))] }));
+}));
+SplitButton.displayName = 'SuiSplitButton';
+
+export { SplitButton, SplitButton$1 as splitButtonStyle };

package/Squircle.js

@@ -0,0 +1,9 @@
+export { S as Squircle } from './chunks/Squircle.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var squircle = {"sui-squircle-root":"sui-squircle-root","sui-squircle-interactive":"sui-squircle-interactive","sui-active":"sui-active","sui-squircle-content":"sui-squircle-content","sui-squircle-ring":"sui-squircle-ring"};
+
+export { squircle as squircleStyle };

package/StatusIndicator.js

@@ -0,0 +1,11 @@
+export { S as StatusIndicator } from './chunks/StatusIndicator.js';
+import 'react/jsx-runtime';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-icon';
+import '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+import 'react';
+
+var StatusIndicator = {"sui-status-indicator-root":"sui-status-indicator-root","sui-status-indicator-large":"sui-status-indicator-large","sui-status-indicator-medium":"sui-status-indicator-medium","sui-status-indicator-dnd":"sui-status-indicator-dnd","sui-status-indicator-busy":"sui-status-indicator-busy","sui-status-indicator-available":"sui-status-indicator-available","sui-status-indicator-unavailable":"sui-status-indicator-unavailable"};
+
+export { StatusIndicator as statusIndicatorStyle };