@ringcentral/spring-ui 1.7.0

package/Avatar.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import clsx from 'clsx';
+import { useImgLoaded, useClasses, useFocusVisible, useForkRef } from '@ringcentral/spring-base';
+import { ProfileMd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { A as AvatarGroupContext } from './chunks/AvatarGroup.js';
+import { I as Icon } from './chunks/Icon.js';
+import { O as Overlap } from './chunks/Overlap.js';
+import { S as Squircle } from './chunks/Squircle.js';
+import { S as StatusIndicator } from './chunks/StatusIndicator.js';
+
+var Avatar$1 = {"sui-avatar-shape":"sui-avatar-shape","sui-avatar-content":"sui-avatar-content","sui-avatar-default":"sui-avatar-default","sui-avatar-primary":"sui-avatar-primary","sui-avatar-circle":"sui-avatar-circle","sui-avatar-circle-content":"sui-avatar-circle-content","sui-avatar-circle-default":"sui-avatar-circle-default","sui-avatar-circle-primary":"sui-avatar-circle-primary","sui-focus-visible":"sui-focus-visible","sui-avatar-img":"sui-avatar-img","sui-avatar-indicator":"sui-avatar-indicator","sui-avatar-root":"sui-avatar-root","sui-disabled":"sui-disabled","sui-avatar-xxlarge-content":"sui-avatar-xxlarge-content","sui-avatar-xlarge-content":"sui-avatar-xlarge-content","sui-avatar-xxlarge":"sui-avatar-xxlarge","sui-avatar-xlarge":"sui-avatar-xlarge","sui-avatar-large":"sui-avatar-large","sui-avatar-large-content":"sui-avatar-large-content","sui-avatar-medium":"sui-avatar-medium","sui-avatar-medium-content":"sui-avatar-medium-content","sui-avatar-small":"sui-avatar-small","sui-avatar-small-content":"sui-avatar-small-content","sui-avatar-xsmall-content":"sui-avatar-xsmall-content","sui-avatar-xxsmall-content":"sui-avatar-xxsmall-content","sui-avatar-xsmall":"sui-avatar-xsmall","sui-avatar-xxsmall":"sui-avatar-xxsmall","sui-avatar-clickable-shape":"sui-avatar-clickable-shape","sui-avatar-clickable-indicator":"sui-avatar-clickable-indicator","sui-avatar-clickable-hover-tint":"sui-avatar-clickable-hover-tint","sui-avatar-clickable-hover-tint-default-circle":"sui-avatar-clickable-hover-tint-default-circle","sui-avatar-clickable-hover-tint-primary-circle":"sui-avatar-clickable-hover-tint-primary-circle","sui-avatar-clickable":"sui-avatar-clickable","sui-avatar-hover-tint":"sui-avatar-hover-tint","sui-active":"sui-active"};
+
+const IconSizeMap = {
+    xxlarge: 'large',
+    xlarge: 'medium',
+    large: 'small',
+    medium: 'small',
+    small: 'xsmall',
+    xsmall: 'xsmall',
+    xxsmall: 'xsmall',
+};
+const Avatar = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Avatar' });
+    const { component, classes, className, children: childrenProp, imgProps, alt, src, srcSet, size: sizeProp, color = 'default', variant = 'circle', clickable: clickableProp, symbol, avatarShapeRef, showStatusIndicator, IndicatorProps, rootProps, disabled, ...rest } = props;
+    let children = null;
+    const loaded = useImgLoaded({
+        ...imgProps,
+        src,
+        srcSet,
+    });
+    const hasImg = src || srcSet;
+    const hasImgNotFailing = hasImg && loaded !== 'error';
+    const cls = useClasses('avatar', classes, className);
+    const imageProps = {
+        alt,
+        src,
+        srcSet,
+        ...imgProps,
+        className: cls('img'),
+    };
+    const groupContext = useContext(AvatarGroupContext);
+    const size = sizeProp || groupContext?.size || 'xlarge';
+    const groupClassName = groupContext?.className || '';
+    let fillShape = false;
+    if (hasImgNotFailing) {
+        const AvatarImg = 'img';
+        children = jsx(AvatarImg, { ...imageProps });
+        fillShape = true;
+    }
+    else if (symbol) {
+        children = jsx(Icon, { size: IconSizeMap[size], symbol: symbol });
+    }
+    else if (childrenProp) {
+        children = childrenProp;
+    }
+    else if (hasImg && alt) {
+        children = alt[0];
+        fillShape = true;
+    }
+    else {
+        children = jsx(Icon, { size: IconSizeMap[size], symbol: ProfileMd });
+    }
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
+    const avatarRef = useForkRef(avatarShapeRef, focusVisibleRef);
+    const clickable = clickableProp !== false && rest.onClick ? true : clickableProp ?? false;
+    const supportsStatusIndicator = size !== 'xxsmall' && size !== 'xsmall';
+    let AvatarShape = component ?? 'div';
+    if (variant === 'squircle') {
+        AvatarShape = Squircle;
+    }
+    else if (clickable) {
+        AvatarShape = 'button';
+    }
+    const shapeProps = variant === 'squircle'
+        ? {
+            component,
+            focusVisible: focusVisible && clickable,
+            fillShape,
+            interactive: clickable,
+        }
+        : {};
+    const ariaProps = component === 'button'
+        ? {
+            disabled,
+        }
+        : {
+            'aria-disabled': disabled,
+        };
+    const nonInteractiveShapeProps = {
+        tabIndex: -1,
+    };
+    const indicatorSize = variant === 'circle' && size === 'xxlarge' ? 'large' : 'medium';
+    return (jsx(Overlap, { position: {
+            bottom: '-1px',
+            right: '-1px',
+        }, floater: supportsStatusIndicator && showStatusIndicator ? (jsx(StatusIndicator, { size: indicatorSize, ...IndicatorProps })) : undefined, className: clsx(className, groupClassName), classes: {
+            root: cls('root', size, { disabled }),
+            floater: cls('indicator', clickable && 'clickable-indicator'),
+        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, clickable && 'clickable-shape', clickable && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...(!clickable ? nonInteractiveShapeProps : {}), ...rest, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', clickable && 'clickable-hover-tint', clickable && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && clickable && (jsx(Squircle, { interactive: false, className: cls('hover-tint', clickable && 'clickable-hover-tint', clickable && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
+});
+Avatar.displayName = 'SuiAvatar';
+
+export { Avatar, Avatar$1 as avatarStyles };

package/AvatarGroup.js

@@ -0,0 +1,9 @@
+export { a as AvatarGroup, A as AvatarGroupContext } from './chunks/AvatarGroup.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var AvatarGroup = {"sui-avatar-group-root":"sui-avatar-group-root","sui-avatar-group-item":"sui-avatar-group-item"};
+
+export { AvatarGroup as avatarGroupStyles };

package/Backdrop.js

@@ -0,0 +1,9 @@
+export { B as Backdrop } from './chunks/Backdrop.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var Backdrop = {"sui-backdrop-root":"sui-backdrop-root","sui-backdrop-transparent":"sui-backdrop-transparent"};
+
+export { Backdrop as backdropStyles };

package/Badge.js

@@ -0,0 +1,15 @@
+export { B as Badge } from './chunks/Badge.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'framer-motion';
+import 'lodash/isNumber';
+import 'lodash/kebabCase';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+
+var Badge = {"sui-badge-root":"sui-badge-root","sui-badge-content":"sui-badge-content","sui-badge-primary":"sui-badge-primary","sui-badge-danger":"sui-badge-danger","sui-badge-success":"sui-badge-success","sui-badge-warning":"sui-badge-warning","sui-badge-secondary":"sui-badge-secondary","sui-badge-absolute":"sui-badge-absolute","sui-badge-standard":"sui-badge-standard","sui-badge-standard-small":"sui-badge-standard-small","sui-badge-standard-medium":"sui-badge-standard-medium","sui-badge-standard-primary":"sui-badge-standard-primary","sui-badge-standard-contained":"sui-badge-standard-contained","sui-badge-standard-contained-small":"sui-badge-standard-contained-small","sui-badge-standard-contained-medium":"sui-badge-standard-contained-medium","sui-badge-standard-outlined":"sui-badge-standard-outlined","sui-badge-standard-outlined-small":"sui-badge-standard-outlined-small","sui-badge-standard-outlined-medium":"sui-badge-standard-outlined-medium","sui-badge-dot":"sui-badge-dot","sui-badge-dot-primary":"sui-badge-dot-primary","sui-badge-dot-danger":"sui-badge-dot-danger","sui-badge-dot-success":"sui-badge-dot-success","sui-badge-dot-warning":"sui-badge-dot-warning","sui-badge-dot-contained-small":"sui-badge-dot-contained-small","sui-badge-dot-contained-medium":"sui-badge-dot-contained-medium","sui-badge-dot-outlined":"sui-badge-dot-outlined","sui-badge-dot-outlined-small":"sui-badge-dot-outlined-small","sui-badge-dot-outlined-medium":"sui-badge-dot-outlined-medium","sui-badge-rectangular":"sui-badge-rectangular","sui-badge-circular":"sui-badge-circular","sui-badge-rectangular-top-right":"sui-badge-rectangular-top-right","sui-badge-rectangular-bottom-right":"sui-badge-rectangular-bottom-right","sui-badge-rectangular-top-left":"sui-badge-rectangular-top-left","sui-badge-rectangular-bottom-left":"sui-badge-rectangular-bottom-left","sui-badge-circular-top-right":"sui-badge-circular-top-right","sui-badge-circular-bottom-right":"sui-badge-circular-bottom-right","sui-badge-circular-top-left":"sui-badge-circular-top-left","sui-badge-circular-bottom-left":"sui-badge-circular-bottom-left"};
+
+export { Badge as badgeStyles };

package/Block.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+var Block$1 = {"sui-block-root":"sui-block-root","sui-block-row":"sui-block-row","sui-block-padding":"sui-block-padding","sui-block-bordered":"sui-block-bordered","sui-block-border-radius-none":"sui-block-border-radius-none","sui-block-border-radius-xsmall":"sui-block-border-radius-xsmall","sui-block-border-radius-small":"sui-block-border-radius-small","sui-block-border-radius-medium":"sui-block-border-radius-medium","sui-block-default":"sui-block-default","sui-block-neutral":"sui-block-neutral","sui-block-hide-background":"sui-block-hide-background"};
+
+const Block = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Block' });
+    const { component: BlockRoot = 'div', classes, className, children, row = false, padding = true, bordered = true, borderRadius = 'medium', color = 'default', background = true, ...rest } = props;
+    const cls = useClasses('block', classes, className);
+    return (jsx(BlockRoot, { className: cls('root', `border-radius-${borderRadius}`, background ? color : 'hide-background', {
+            row,
+            padding,
+            bordered,
+        }), ...rest, ref: ref, children: children }));
+});
+Block.displayName = 'SuiBlock';
+
+export { Block, Block$1 as blockStyles };

package/BlockHeader.js

@@ -0,0 +1,18 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { D as Divider } from './chunks/Divider.js';
+
+var BlockHeader$1 = {"sui-block-header-root":"sui-block-header-root","sui-block-header-title":"sui-block-header-title","sui-block-header-end-slot":"sui-block-header-end-slot","sui-block-header-divider":"sui-block-header-divider"};
+
+const BlockHeader = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'BlockHeader' });
+    const { component: BlockHeaderRoot = 'div', classes, className, children, endSlot, divider = false, ...rest } = props;
+    const cls = useClasses('block-header', classes, className);
+    const title = typeof children === 'string' ? children : undefined;
+    return (jsxs(Fragment, { children: [jsxs(BlockHeaderRoot, { className: cls('root'), ...rest, ref: ref, children: [jsx("div", { title: title, className: cls('title'), children: children }), endSlot && jsx("div", { className: cls('end-slot'), children: endSlot })] }), divider && (jsx(Divider, { className: cls('divider'), orientation: "horizontal", flexItem: true }))] }));
+});
+BlockHeader.displayName = 'SuiBlockHeader';
+
+export { BlockHeader, BlockHeader$1 as blockHeaderStyles };

package/BottomNavigation.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useMemo, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { tabbable } from 'tabbable';
+import { useClasses, useControlled, logInDev, useEventCallback, getTitle, useTabOut, combineProps } from '@ringcentral/spring-base';
+import { OverflowMd } from '@ringcentral/spring-icon';
+import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
+import { ClickAwayListener } from '@mui/base';
+import { a as BottomNavigationContext, B as BottomNavigationItem } from './chunks/BottomNavigationItem.js';
+export { u as useBottomNavigationContext } from './chunks/BottomNavigationItem.js';
+import { S as Squircle } from './chunks/Squircle.js';
+import './chunks/Icon.js';
+import { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
+import './chunks/Badge.js';
+import 'lodash/isNumber';
+import 'lodash/kebabCase';
+import './chunks/IconButtonLabel.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'clsx';
+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';
+import './chunks/useTooltipForceHide.js';
+
+var BottomNavigationGroup$1 = {"sui-bottom-navigation-group-root":"sui-bottom-navigation-group-root"};
+
+const BottomNavigationGroup = forwardRef((props, ref) => {
+    const { classes, className, children, ...rest } = props;
+    const cls = useClasses('bottom-navigation-group', classes, className);
+    return (jsx("div", { className: cls('root'), ...rest, ref: ref, children: children }));
+});
+BottomNavigationGroup.displayName = 'SuiBottomNavigationGroup';
+
+var BottomNavigation$1 = {"sui-bottom-navigation-root":"sui-bottom-navigation-root","sui-bottom-navigation-full-width":"sui-bottom-navigation-full-width","sui-bottom-navigation-item-wrapper":"sui-bottom-navigation-item-wrapper","sui-bottom-navigation-description":"sui-bottom-navigation-description","sui-bottom-navigation-empty-slot":"sui-bottom-navigation-empty-slot","sui-expanded":"sui-expanded"};
+
+const ROW_HEIGHT = 56;
+const BottomNavigation = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'BottomNavigation' });
+    const { classes, className, children, defaultValue, value: valueProp, defaultData, data: dataProp, onChange, renderItem, MoreProps, description, onTouchEnd, onClick, onKeyDown, onKeyUp, onBlur, onCollapse, fullWidth, ...rest } = props;
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'SuiBottomNavigation',
+        state: 'value',
+    });
+    // TODO: setData will be used when dnd is implemented
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [data, setData] = useControlled({
+        controlled: dataProp,
+        default: defaultData,
+        name: 'SuiBottomNavigation',
+        state: 'data',
+    });
+    const { visible, more } = data;
+    const VISIBLE_MAX_COUNT = more?.length ? 5 : 6;
+    if (process.env.NODE_ENV !== 'production' &&
+        visible.length > VISIBLE_MAX_COUNT) {
+        logInDev({
+            scope: 'BottomNavigation',
+            message: `You can not have more than ${VISIBLE_MAX_COUNT} visible items.`,
+            level: 'warn',
+        });
+    }
+    const emptySlots = VISIBLE_MAX_COUNT - visible.length;
+    const cls = useClasses('bottom-navigation', classes, className);
+    const [expanded, setExpanded] = useState(false);
+    const [animationComplete, setAnimationComplete] = useState();
+    const transition = useMotionSafeTransition(motionTransition['haste-01-fast']);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleClose = (e, reason) => {
+        if (!expanded)
+            return;
+        setExpanded(false);
+        onCollapse?.(e, reason);
+    };
+    const onSelected = useEventCallback((e, newValue) => {
+        handleClose(e, 'ItemSelected');
+        setValue(newValue);
+        if (onChange) {
+            onChange(e, newValue);
+        }
+    });
+    const contextValue = useMemo(() => {
+        return {
+            value,
+            expanded,
+            onSelected,
+            animationComplete,
+        };
+    }, [expanded, onSelected, animationComplete, value]);
+    const handleMoreClick = (e) => {
+        if (expanded) {
+            handleClose(e, 'ToggleMore');
+        }
+        else {
+            setExpanded(true);
+        }
+        MoreProps?.onClick?.(e);
+    };
+    const descriptionTitle = getTitle(description);
+    const handleClickAway = useEventCallback((e) => {
+        if (!expanded)
+            return;
+        handleClose(e, 'ClickAway');
+    });
+    const { tabOutHandler } = useTabOut((e) => {
+        handleClose(e, 'TabBlur');
+    });
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            handleClose(e, 'EscapeKeyDown');
+        }
+        onKeyDown?.(e);
+    };
+    const tabOutProps = combineProps(tabOutHandler, {
+        onKeyDown: handleKeyDown,
+        onKeyUp,
+        onBlur,
+    });
+    const moreGroupRef = useRef(null);
+    const moreButtonRef = useRef(null);
+    const handleAnimationComplete = () => {
+        setAnimationComplete(true);
+        if (expanded && moreGroupRef.current) {
+            const allTabbable = tabbable(moreGroupRef.current);
+            allTabbable.at(0)?.focus();
+        }
+        if (!expanded && moreButtonRef.current) {
+            moreButtonRef.current.focus();
+        }
+    };
+    const itemWrapperClassName = cls('item-wrapper');
+    return (jsx(ClickAwayListener, { onClickAway: handleClickAway, children: jsx(motion.div, { transition: transition, onAnimationStart: () => {
+                setAnimationComplete(false);
+            }, onAnimationComplete: handleAnimationComplete, initial: false, animate: expanded ? { height: 'auto' } : { height: ROW_HEIGHT }, className: cls('root', { expanded, 'full-width': fullWidth }), ...rest, ...tabOutProps, onClick: onClick, onTouchEnd: onTouchEnd, ref: ref, children: jsxs(BottomNavigationContext.Provider, { value: contextValue, children: [jsxs(BottomNavigationGroup, { children: [visible.slice(0, VISIBLE_MAX_COUNT).map((item) => (jsx("span", { className: itemWrapperClassName, children: renderItem(item) }, item))), [...Array(emptySlots > 0 ? emptySlots : 0)].map((e, i) => (jsx("span", { className: itemWrapperClassName, children: jsx(Squircle, { interactive: false, className: cls('empty-slot', { expanded }) }) }, 'bottom-navigation-slot-' + i))), more?.length ? (jsx("span", { className: itemWrapperClassName, children: jsx(BottomNavigationItem, { symbol: OverflowMd, activated: expanded, expanded: false, ButtonProps: { 'aria-expanded': expanded }, ...MoreProps, count: expanded ? 0 : MoreProps?.count, onClick: handleMoreClick, ref: moreButtonRef }) })) : null] }), jsxs(AnimatePresence, { children: [expanded && more?.length ? (jsx(BottomNavigationGroup, { ref: moreGroupRef, children: more.map((item) => (jsx("span", { title: item, className: itemWrapperClassName, children: renderItem(item) }, item))) }, "more")) : null, expanded && description && (jsx("div", { className: cls('description'), title: descriptionTitle, children: description }))] })] }) }) }));
+});
+BottomNavigation.displayName = 'SuiBottomNavigation';
+
+export { BottomNavigation, BottomNavigationContext, BottomNavigationGroup, BottomNavigationGroup$1 as bottomNavigationGroupStyles, BottomNavigation$1 as bottomNavigationStyles };

package/BottomNavigationItem.js

@@ -0,0 +1,30 @@
+export { B as BottomNavigationItem } from './chunks/BottomNavigationItem.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/Badge.js';
+import 'framer-motion';
+import 'lodash/isNumber';
+import 'lodash/kebabCase';
+import './chunks/Icon.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/IconButtonLabel.js';
+import '@mui/base';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.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';
+import './chunks/useTooltipForceHide.js';
+
+var BottomNavigationItem = {"sui-bottom-navigation-item-button":"sui-bottom-navigation-item-button","sui-expanded":"sui-expanded","sui-bottom-navigation-item-activated":"sui-bottom-navigation-item-activated"};
+
+export { BottomNavigationItem as bottomNavigationItemStyles };

package/Button.js

@@ -0,0 +1,24 @@
+export { B as Button, b as buttonIconSizeMap } from './chunks/Button.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import '@mui/base';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/CircularProgressIndicator.js';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/Tooltip.js';
+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';
+import './chunks/withTooltip.js';
+
+var Button = {"sui-button-root":"sui-button-root","sui-disabled":"sui-disabled","sui-button-loading-indicator":"sui-button-loading-indicator","sui-button-xlarge":"sui-button-xlarge","sui-button-large":"sui-button-large","sui-button-medium":"sui-button-medium","sui-button-small":"sui-button-small","sui-button-xsmall":"sui-button-xsmall","sui-button-contained-xlarge":"sui-button-contained-xlarge","sui-button-outlined-xlarge":"sui-button-outlined-xlarge","sui-button-inverted-xlarge":"sui-button-inverted-xlarge","sui-button-contained-large":"sui-button-contained-large","sui-button-outlined-large":"sui-button-outlined-large","sui-button-inverted-large":"sui-button-inverted-large","sui-button-contained-medium":"sui-button-contained-medium","sui-button-outlined-medium":"sui-button-outlined-medium","sui-button-inverted-medium":"sui-button-inverted-medium","sui-button-contained-small":"sui-button-contained-small","sui-button-outlined-small":"sui-button-outlined-small","sui-button-inverted-small":"sui-button-inverted-small","sui-button-contained-xsmall":"sui-button-contained-xsmall","sui-button-outlined-xsmall":"sui-button-outlined-xsmall","sui-button-inverted-xsmall":"sui-button-inverted-xsmall","sui-button-loading":"sui-button-loading","sui-button-content":"sui-button-content","sui-button-contained":"sui-button-contained","sui-focus-visible":"sui-focus-visible","sui-button-outlined":"sui-button-outlined","sui-button-inverted":"sui-button-inverted","sui-button-text":"sui-button-text","sui-button-contained-primary":"sui-button-contained-primary","sui-button-contained-secondary":"sui-button-contained-secondary","sui-button-contained-neutral":"sui-button-contained-neutral","sui-button-contained-danger":"sui-button-contained-danger","sui-button-contained-warning":"sui-button-contained-warning","sui-button-contained-success":"sui-button-contained-success","sui-button-contained-hide-background":"sui-button-contained-hide-background","sui-button-outlined-primary":"sui-button-outlined-primary","sui-button-outlined-secondary":"sui-button-outlined-secondary","sui-button-outlined-neutral":"sui-button-outlined-neutral","sui-button-outlined-danger":"sui-button-outlined-danger","sui-button-outlined-warning":"sui-button-outlined-warning","sui-button-outlined-success":"sui-button-outlined-success","sui-button-text-primary":"sui-button-text-primary","sui-button-text-secondary":"sui-button-text-secondary","sui-button-text-neutral":"sui-button-text-neutral","sui-button-text-danger":"sui-button-text-danger","sui-button-text-warning":"sui-button-text-warning","sui-button-text-success":"sui-button-text-success","sui-button-inverted-primary":"sui-button-inverted-primary","sui-button-inverted-secondary":"sui-button-inverted-secondary","sui-button-inverted-neutral":"sui-button-inverted-neutral","sui-button-inverted-danger":"sui-button-inverted-danger","sui-button-inverted-warning":"sui-button-inverted-warning","sui-button-inverted-success":"sui-button-inverted-success","sui-button-start-slot":"sui-button-start-slot","sui-button-end-slot":"sui-button-end-slot","sui-button-has-start-slot":"sui-button-has-start-slot","sui-button-has-end-slot":"sui-button-has-end-slot","sui-button-hide-background":"sui-button-hide-background","sui-button-full-width":"sui-button-full-width"};
+
+export { Button as buttonClasses };

package/CallButton.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { CallFilledMd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as IconButton } from './chunks/IconButtonLabel.js';
+import '@mui/base';
+import './chunks/Icon.js';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'framer-motion';
+import 'clsx';
+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';
+
+var CallButton$1 = {"sui-call-button-end":"sui-call-button-end"};
+
+const IconButtonPropsSizeMap = {
+    large: { size: 'xxxlarge', iconSize: 'large' },
+    medium: { size: 'xxlarge', iconSize: 'medium' },
+    small: { size: 'large', iconSize: 'small' },
+};
+const CallButton = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'CallButton' });
+    const { variant, className, size = 'medium', classes, ...rest } = props;
+    const color = variant === 'end' ? 'danger' : 'success';
+    const cls = useClasses('call-button', classes, className);
+    return (jsx(IconButton, { ...rest, ...IconButtonPropsSizeMap[size], ref: ref, color: color, variant: "contained", symbol: CallFilledMd, className: cls('root', variant) }));
+});
+CallButton.displayName = 'SuiCallButton';
+
+export { CallButton, CallButton$1 as callButtonStyle };

package/Checkbox.js

@@ -0,0 +1,55 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useLayoutEffect, useEffect } from 'react';
+import { useSwitch } from '@mui/base';
+import { useClasses, useForkRef } from '@ringcentral/spring-base';
+import { MinusBoldMd, CheckBoldMd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { u as useFormLabel } from './chunks/FormLabel.js';
+import { I as Icon } from './chunks/Icon.js';
+import { S as Squircle } from './chunks/Squircle.js';
+
+var Checkbox$1 = {"sui-checkbox-input":"sui-checkbox-input","sui-checkbox-root":"sui-checkbox-root","sui-disabled":"sui-disabled","sui-checkbox-rectangular":"sui-checkbox-rectangular","sui-checkbox-inner":"sui-checkbox-inner","sui-focus-visible":"sui-focus-visible","sui-checkbox-squircle":"sui-checkbox-squircle","sui-checkbox":"sui-checkbox","sui-checked":"sui-checked","sui-checkbox-indeterminate":"sui-checkbox-indeterminate","sui-checkbox-inner-rectangular":"sui-checkbox-inner-rectangular"};
+
+const Checkbox = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Checkbox' });
+    const { classes, inputRef: inputRefProp, rootProps, inputProps, indeterminate, autoFocus = false, className: rootClass, disabled: disabledProp, shape = 'rectangular', ...rest } = props;
+    const cls = useClasses('checkbox', classes, rootClass);
+    const inputRef = useRef();
+    const forkRef = useForkRef(inputRefProp, inputRef);
+    const { disabled, id } = useFormLabel({
+        disabled: disabledProp,
+        id: inputProps?.id,
+    });
+    // TODO: wait useCheckBox ready, see https://github.com/mui/material-ui/issues/27170
+    const { getInputProps, checked, focusVisible } = useSwitch({
+        ...rest,
+        disabled,
+    });
+    const widgetProps = getInputProps({
+        role: undefined,
+        ...inputProps,
+        itemType: 'checkbox',
+    });
+    useLayoutEffect(() => {
+        if (autoFocus) {
+            inputRef.current?.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = !!indeterminate;
+        }
+    }, [indeterminate]);
+    const states = { checked, disabled, indeterminate, focusVisible };
+    const symbol = indeterminate ? MinusBoldMd : checked ? CheckBoldMd : null;
+    const rootClassName = cls('root', shape, states);
+    const checkboxContent = (jsxs(Fragment, { children: [symbol ? (jsx(Icon, { symbol: symbol, size: "xsmall" })) : (jsx("span", { className: cls('inner', `inner-${shape}`) })), jsx("input", { ...widgetProps, checked: checked, ref: forkRef, className: cls('input'), id: id })] }));
+    if (shape === 'squircle') {
+        return (jsx(Squircle, { ...rootProps, ref: ref, className: rootClassName, interactive: !disabled, focusVisible: focusVisible, children: checkboxContent }));
+    }
+    return (jsx("div", { ...rootProps, ref: ref, className: rootClassName, children: checkboxContent }));
+});
+Checkbox.displayName = 'SuiCheckbox';
+
+export { Checkbox, Checkbox$1 as checkboxStyle };

package/Chip.js

@@ -0,0 +1,26 @@
+export { C as Chip } from './chunks/Chip.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/base';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-icon';
+import '@ringcentral/spring-theme';
+import './chunks/IconButtonLabel.js';
+import './chunks/Icon.js';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'framer-motion';
+import 'clsx';
+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';
+
+var Chip = {"sui-chip-root":"sui-chip-root","sui-disabled":"sui-disabled","sui-chip-truncate":"sui-chip-truncate","sui-chip-label":"sui-chip-label","sui-chip-large":"sui-chip-large","sui-chip-medium":"sui-chip-medium","sui-chip-small":"sui-chip-small","sui-chip-delete-icon":"sui-chip-delete-icon","sui-chip-default":"sui-chip-default","sui-chip-error":"sui-chip-error","sui-chip-clickable":"sui-chip-clickable"};
+
+export { Chip as chipStyle };

package/CircularProgressIndicator.js

@@ -0,0 +1,10 @@
+export { C as CircularProgressIndicator } from './chunks/CircularProgressIndicator.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'framer-motion';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var CircularProgressIndicator = {"sui-circular-progress-indicator-root":"sui-circular-progress-indicator-root","sui-circular-progress-indicator-xlarge":"sui-circular-progress-indicator-xlarge","sui-circular-progress-indicator-large":"sui-circular-progress-indicator-large","sui-circular-progress-indicator-medium":"sui-circular-progress-indicator-medium","sui-circular-progress-indicator-small":"sui-circular-progress-indicator-small","sui-circular-progress-indicator-xsmall":"sui-circular-progress-indicator-xsmall","sui-circular-progress-indicator-indeterminate":"sui-circular-progress-indicator-indeterminate","sui-circular-progress-indicator-indeterminate-outer-circle":"sui-circular-progress-indicator-indeterminate-outer-circle","sui-circular-progress-indicator-indeterminate-inner-circle":"sui-circular-progress-indicator-indeterminate-inner-circle","sui-circular-progress-indicator-indeterminate-xlarge":"sui-circular-progress-indicator-indeterminate-xlarge","sui-circular-progress-indicator-indeterminate-large":"sui-circular-progress-indicator-indeterminate-large","sui-circular-progress-indicator-indeterminate-medium":"sui-circular-progress-indicator-indeterminate-medium","sui-circular-progress-indicator-indeterminate-small":"sui-circular-progress-indicator-indeterminate-small","sui-circular-progress-indicator-indeterminate-xsmall":"sui-circular-progress-indicator-indeterminate-xsmall","sui-circular-progress-indicator-indeterminate-primary":"sui-circular-progress-indicator-indeterminate-primary","sui-circular-progress-indicator-indeterminate-neutral":"sui-circular-progress-indicator-indeterminate-neutral","sui-circular-progress-indicator-indeterminate-danger":"sui-circular-progress-indicator-indeterminate-danger","sui-circular-progress-indicator-indeterminate-warning":"sui-circular-progress-indicator-indeterminate-warning","sui-circular-progress-indicator-indeterminate-success":"sui-circular-progress-indicator-indeterminate-success","sui-circular-progress-indicator-determinate-progress-circle":"sui-circular-progress-indicator-determinate-progress-circle","sui-circular-progress-indicator-determinate-primary":"sui-circular-progress-indicator-determinate-primary","sui-circular-progress-indicator-determinate-neutral":"sui-circular-progress-indicator-determinate-neutral","sui-circular-progress-indicator-determinate-danger":"sui-circular-progress-indicator-determinate-danger","sui-circular-progress-indicator-determinate-warning":"sui-circular-progress-indicator-determinate-warning","sui-circular-progress-indicator-determinate-success":"sui-circular-progress-indicator-determinate-success"};
+
+export { CircularProgressIndicator as circularProgressIndicatorStyle };

package/ClickAwayListener.js

@@ -0,0 +1 @@
+export { ClickAwayListener } from '@mui/base';

package/ComponentsProps.js

@@ -0,0 +1 @@
+