@ringcentral/spring-ui 1.7.0

package/chunks/Modal.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, forwardRef, useState, useRef, 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';
+import { motion } from 'framer-motion';
+import './Icon.js';
+import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
+import { g as getFade } from './getFade.js';
+import { u as useFocusTrapStack } from './useFocusTrapStack.js';
+import { B as Backdrop } from './Backdrop.js';
+
+const ModalContext = createContext(null);
+const useModalContext = () => useContext(ModalContext);
+
+const InnerModal = forwardRef((props, ref) => {
+    const { hideBackdrop, children, motionProps, disableBackdropClick = false, onBackdropClick, disableEscapeKeyDown = false, onEscapeKeyDown, onClose, onKeyDown, disableAutoFocus, disableEnforceFocus, disableRestoreFocus, classes, className, backdropProps, open, isEnabled, blocking = true, ...rest } = props;
+    const { ariaHideOutsideRef, ariaHideEnabled } = useAriaHideOutside({
+        enable: blocking,
+    });
+    const handleRef = useForkRef(ref, ariaHideOutsideRef);
+    const cls = useClasses('modal', classes, className);
+    const { onClick: externalOnClick, ...restBackdropProps } = backdropProps || {};
+    const handleBackdropClick = useEventCallback((event) => {
+        if (disableBackdropClick)
+            return;
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        externalOnClick?.(event);
+        onBackdropClick?.(event);
+        onClose?.(event, 'backdropClick');
+    });
+    return (jsx(ModalContext.Provider, { value: { ariaHideEnabled }, children: jsxs(motion.div, { ...rest, ...motionProps, role: "presentation", className: cls('root'), onKeyDown: (e) => {
+                onKeyDown?.(e);
+                if (!disableEscapeKeyDown &&
+                    e.key === 'Escape' &&
+                    (isEnabled?.() ?? true)) {
+                    onEscapeKeyDown?.(e);
+                    onClose?.(e, 'escapeKeyDown');
+                }
+            }, ref: handleRef, children: [jsx(Backdrop, { ...restBackdropProps, isTransparent: hideBackdrop, onClick: handleBackdropClick }), jsx(FocusTrap, { open: open, isEnabled: isEnabled, disableAutoFocus: disableAutoFocus || !blocking, disableEnforceFocus: disableEnforceFocus || !blocking, disableRestoreFocus: disableRestoreFocus || !blocking, children: children })] }) }));
+});
+InnerModal.displayName = 'SuiInnerModal';
+
+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 prefersReducedMotion = usePrefersReducedMotion();
+    const { isEnabled } = useFocusTrapStack({ open });
+    useBodyScrollLock(open, modalRef.current, {
+        disabled: disableScrollLock,
+        reserveScrollBarGap: true,
+        allowTouchMove: (el) => {
+            return modalRef.current?.contains(el) ?? false;
+        },
+    });
+    useEffect(() => {
+        if (open) {
+            setShouldRender(true);
+        }
+        else {
+            if (disableBackdropAnimation) {
+                setShouldRender(false);
+            }
+        }
+    }, [open, disableBackdropAnimation]);
+    const { document } = useWindowContext();
+    const container = containerProp ?? document?.body;
+    const { scopeProps } = useTheme();
+    const onAnimationComplete = (e) => {
+        motionProps?.onAnimationComplete?.(e);
+        if (!open) {
+            onExitComplete?.();
+            setShouldRender(false);
+        }
+    };
+    return shouldRender ? (jsx(Portal, { disablePortal: disablePortal, container: container, children: jsx("div", { ...scopeProps, children: jsx(InnerModal, { ...rest, ref: handleRef, open: open, isEnabled: isEnabled, motionProps: {
+                    ...(motionProps ?? getFade({ prefersReducedMotion, toggle: open })),
+                    onAnimationComplete,
+                }, children: children }) }) })) : null;
+});
+Modal.displayName = 'SuiModal';
+
+export { InnerModal as I, Modal as M, ModalContext as a, useModalContext as u };

package/chunks/Overlap.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+function isKeyPosition(position) {
+    return typeof position === 'string';
+}
+const Overlap = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Overlap' });
+    const { classes, floater, position, children, className, showFloaterOnHoverOnly = false, component: OverlapRoot = 'div', ...rest } = props;
+    const cls = useClasses('overlap', classes, className);
+    let widget = null;
+    if (floater) {
+        const style = !isKeyPosition(position) ? position : undefined;
+        const classes = cls('floater', isKeyPosition(position) && position);
+        widget = jsx("div", { style: style, className: classes, children: floater });
+    }
+    return (jsxs(OverlapRoot, { ...rest, ref: ref, className: cls('root', {
+            'show-floater-on-hover-only': showFloaterOnHoverOnly,
+        }), children: [children, widget] }));
+});
+Overlap.displayName = 'SuiOverlap';
+
+export { Overlap as O };

package/chunks/PickerTextField.js

@@ -0,0 +1,75 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useImperativeHandle, useMemo } from 'react';
+import { useId, useClasses, useForkRef, useA11yKeyEvent, useEventCallback, combineClasses } from '@ringcentral/spring-base';
+import { I as Icon } from './Icon.js';
+import { P as Popover } from './Popover.js';
+import { T as TextField } from './TextField.js';
+import { V as VisuallyHidden } from './VisuallyHidden.js';
+
+const PICKER_DISPLAY_NAME = 'SuiPickerTextField';
+const PickerTextField = forwardRef((props, ref) => {
+    const { disabled, value, defaultValue, onClear, action, inputProps = {}, announcementText, PopoverProps, children, endIconSymbol, clearText, clearBtn, ClearButtonProps, onKeyDown, onClick, onClose, classes, textInputClasses, className, ...rest } = props;
+    const idForInput = useId(PICKER_DISPLAY_NAME, true);
+    const [open, setOpen] = useState(false);
+    const [isPopoverExited, setIsPopoverExited] = useState(!open);
+    const cls = useClasses('picker-text-field', classes, className);
+    const anchorRef = useRef(null);
+    const handleRef = useForkRef(ref, anchorRef);
+    const idForHelperText = `${idForInput}-helper-text`;
+    const idForInstruction = `${idForInput}-instruction`;
+    const handleA11yKeydown = useA11yKeyEvent(() => {
+        handleOpen(true);
+    });
+    const handleOpen = useEventCallback((open) => {
+        if (disabled && open) {
+            return;
+        }
+        if (open) {
+            setIsPopoverExited(false);
+        }
+        setOpen(open);
+    });
+    useImperativeHandle(action, () => ({
+        close: () => {
+            handleOpen(false);
+        },
+    }), [handleOpen]);
+    const toClasses = useMemo(() => combineClasses(textInputClasses, {
+        formFieldContent: cls('form-field-content', {
+            'has-value': Boolean(value),
+        }),
+        root: cls('root', {
+            'has-value': Boolean(value),
+        }),
+        input: cls('input'),
+    }), [cls, textInputClasses, value]);
+    return (jsxs(Fragment, { children: [jsx(TextField, { classes: toClasses, value: value, defaultValue: defaultValue, endAdornment: endIconSymbol && (jsx(Icon, { className: cls('end-icon'), symbol: endIconSymbol })), id: idForInput, ref: handleRef, focused: open || (!open && !isPopoverExited), disabled: disabled, clearBtn: clearBtn, onClick: (e) => {
+                    handleOpen(true);
+                    onClick?.(e);
+                }, onKeyDown: (e) => {
+                    if (disabled)
+                        return;
+                    handleA11yKeydown(e);
+                    onKeyDown?.(e);
+                }, inputProps: {
+                    'aria-describedby': `${idForHelperText} ${idForInstruction}`,
+                    'aria-haspopup': true,
+                    ...inputProps,
+                }, ...rest, readOnly: true, onClear: (e) => {
+                    onClear?.(e);
+                    // prevent open popover
+                    e.stopPropagation();
+                } }), jsx(Popover, { bordered: true, open: open, anchorEl: anchorRef.current, onClose: (...args) => {
+                    handleOpen(false);
+                    onClose?.(...args);
+                }, placement: "bottom-start", transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, ...PopoverProps, onExitComplete: () => {
+                    PopoverProps?.onExitComplete?.();
+                    setIsPopoverExited(true);
+                }, children: children }), jsx(VisuallyHidden, { id: idForInstruction, children: announcementText })] }));
+});
+PickerTextField.displayName = PICKER_DISPLAY_NAME;
+
+export { PickerTextField as P };

package/chunks/Popover.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { size } from '@floating-ui/react-dom';
+import { useClasses, useForkRef, combineProps } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import 'framer-motion';
+import './Icon.js';
+import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
+import { g as getGrow, a as getTransformOriginStringForPlacement } from './getGrow.js';
+import { M as Modal } from './Modal.js';
+import { Popper } from '../Popper.js';
+import { P as PopperPaper } from './PopperPaper.js';
+
+const Popover = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Popover' });
+    const { classes, className, children, PopperProps, variant = 'standard', bordered = false, shadow = true, transformOrigin, motionProps: motionPropsProp, popperRef, placement, anchorEl, actions, onAvailableHeightChange, PopperPaperProps: popperPaperPropsProp, ...rest } = props;
+    const cls = useClasses('popover', classes, className);
+    const paperContentRef = useRef(null);
+    const handlePaperContentRef = useForkRef(popperPaperPropsProp?.contentRef, paperContentRef);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    return (jsx(Modal, { disableScrollLock: true, ...rest, className: cls('root', 'popper'), ref: ref, motionProps: null, hideBackdrop: true, children: jsx(Popper, { arrowHeight: variant === 'standard' ? 0 : 10, arrowPadding: 12, offset: variant === 'standard' ? 2 : 4, ...combineProps({
+                middlewares: [
+                    size({
+                        padding: PopperProps?.padding,
+                        apply({ availableHeight, availableWidth, }) {
+                            onAvailableHeightChange?.(availableHeight);
+                            if (paperContentRef.current) {
+                                paperContentRef.current.style.maxHeight = `${availableHeight}px`;
+                                paperContentRef.current.style.maxWidth = `${availableWidth}px`;
+                            }
+                        },
+                    }),
+                ],
+            }, PopperProps), className: cls('popper'), disablePortal: true, tabIndex: -1, ref: popperRef, placement: placement, anchorEl: anchorEl, actions: actions, children: ({ arrowStyle, arrowRef, placement: computedPlacement }) => {
+                const motionProps = motionPropsProp ??
+                    getGrow({ transformOrigin, prefersReducedMotion });
+                const popperPaperProps = {
+                    className: cls('paper', { bordered, shadow }),
+                };
+                /**
+                 * If no transform origin is set, determine the transform origin using
+                 * the computed placement. This ensures the transition used for the
+                 * grow animation is always faithful to where the Popover is positioned.
+                 */
+                if (!transformOrigin) {
+                    popperPaperProps.style = {
+                        ...popperPaperProps.style,
+                        transformOrigin: getTransformOriginStringForPlacement({
+                            placement: computedPlacement,
+                        }),
+                    };
+                }
+                return (jsx(PopperPaper, { contentRef: handlePaperContentRef, arrowRef: arrowRef, arrowStyle: arrowStyle, ...combineProps(combineProps(motionProps, popperPaperProps), popperPaperPropsProp), children: children }));
+            } }) }));
+});
+Popover.displayName = 'SuiPopover';
+
+export { Popover as P };

package/chunks/PopperPaper.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { motion } from 'framer-motion';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const PopperPaper = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'PopperPaper' });
+    const { classes, className, children, arrowRef, arrowStyle, contentRef, ...rest } = props;
+    const cls = useClasses('popper-paper', classes, className);
+    return (jsxs(motion.div, { className: cls('root'), ...rest, ref: ref, children: [jsx("div", { ref: contentRef, className: cls('content'), children: children }), jsx("div", { className: cls('arrow'), ref: arrowRef, style: arrowStyle })] }));
+});
+PopperPaper.displayName = 'SuiPopperPaper';
+
+export { PopperPaper as P };

package/chunks/RadioGroup.context.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+const RadioGroupContext = createContext({});
+function callbacksInSeries(...callbacks) {
+    return function (...params) {
+        callbacks.forEach((cb) => cb?.(...params));
+    };
+}
+function useRadioGroup({ name, value, checked, onChange, }) {
+    const context = useContext(RadioGroupContext);
+    if (context.onChange) {
+        name = context.name ?? name;
+        checked = value === context.value;
+        onChange = callbacksInSeries(onChange, context.onChange);
+    }
+    return { name, checked, onChange };
+}
+
+export { RadioGroupContext as R, callbacksInSeries as c, useRadioGroup as u };

package/chunks/Select.js

@@ -0,0 +1,257 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
+import { combineProps, useControlled, useClasses, useId, useEventCallback, combineClasses, getTitle } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { E as ExpandCollapseCaret } from './ExpandCollapseCaret.js';
+import 'framer-motion';
+import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
+import { g as getGrow } from './getGrow.js';
+import './Icon.js';
+import { u as useHelperTextId, F as FormField } from './useHelperTextId.js';
+import { M as Menu, a as MenuContext } from './Menu.js';
+import { c as useMenuItemSelect, a as MenuItemSelectContext } from './useMenuItemSelect.js';
+import 'tabbable';
+import './useListNavigation.js';
+import '../VirtualizedList.js';
+import { M as MenuList } from './MenuList.js';
+import { S as Squircle } from './Squircle.js';
+import { a as VirtualizedMenu } from './VirtualizedMenu.js';
+
+const useSelect = (props) => {
+    const { open, handleOpen } = props;
+    const getButtonProps = (otherHandlers = {}) => {
+        const eventHandlers = combineProps({
+            onClick: () => {
+                handleOpen(!open);
+            },
+            onKeyDown: (e) => {
+                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    // prevent scroll
+                    e.preventDefault();
+                    handleOpen(true);
+                }
+            },
+        }, otherHandlers);
+        return {
+            'aria-expanded': open,
+            'aria-haspopup': 'listbox',
+            ...eventHandlers,
+        };
+    };
+    const getListboxProps = () => ({
+        role: 'listbox',
+    });
+    return {
+        getButtonProps,
+        getListboxProps,
+    };
+};
+
+const DEFAULT_PLACEMENT = 'bottom';
+const Select = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Select' });
+    const { classes, className, children, name, id: idProp, value: valueProp, selectMode = 'single', defaultValue = selectMode === 'multiple' ? [] : null, onChange: onChangeProp, renderValue = (value) => Array.isArray(value) ? value.join(', ') : String(value), label, helperText, disabled, required, error, displayEmpty, placeholder, open: openProp, defaultOpen, onOpen, onClose, selectorProps: selectorPropsProp, MenuProps, variant = 'standard', inputProps, size = 'xlarge', virtualize = false, VirtualizedMenuProps: virtualizedMenuPropsProp, data, getSelectedIndex, FormHelperTextProps, ...rest } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [open, setOpen] = useControlled({
+        controlled: openProp,
+        default: defaultOpen,
+        name: 'SuiSelect',
+        state: 'open',
+    });
+    const [didMenuExit, setDidMenuExit] = useState(!open);
+    const inputRef = useRef(null);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const cls = useClasses('select', classes, className);
+    const id = useId(idProp);
+    const helperTextId = useHelperTextId({
+        helperText,
+        id,
+        FormHelperTextProps,
+    });
+    const formFieldContentRef = useRef(null);
+    useEffect(() => {
+        setAnchorEl(formFieldContentRef.current);
+    }, []);
+    const handleOpen = useEventCallback((newOpen) => {
+        if (disabled && newOpen)
+            return;
+        if (newOpen)
+            setDidMenuExit(false);
+        setOpen(newOpen);
+        if (newOpen) {
+            onOpen?.();
+        }
+        else {
+            onClose?.();
+        }
+    });
+    useEffect(() => {
+        // close menu when disabled
+        if (disabled) {
+            handleOpen(false);
+        }
+    }, [disabled, handleOpen]);
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'SuiSelect',
+        state: 'value',
+    });
+    const handleInputChange = useEventCallback((e) => {
+        onChangeProp?.(e, inputRef.current);
+    });
+    const handleClose = useEventCallback(() => {
+        handleOpen(false);
+    });
+    const handleInitialFocus = useEventCallback(() => {
+        if (data && value !== null) {
+            if (getSelectedIndex)
+                return getSelectedIndex(value);
+            if (Array.isArray(value)) {
+                // For multiple selection, focus on the last selected item
+                const lastSelectedItem = value.at(-1);
+                return lastSelectedItem ? data.indexOf(lastSelectedItem) : -1;
+            }
+            return data.findIndex((v) => v === value);
+        }
+        return true;
+    });
+    const handleMenuListChange = useEventCallback((newValue) => {
+        // for uncontrolled mode
+        setValue(newValue);
+        if (inputRef.current) {
+            /**
+             * Programatically trigger the onChange event of the native input element.
+             * Doing this means we can avoid cloning another event to mimic the ChangeEvent.
+             */
+            /**
+             * Set the value property of the input element, avoiding React's overridden setter.
+             * This will cause the input element to update its value and fire the onChange event,
+             * `handleInputChange` will then call onChange
+             */
+            Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set?.call(inputRef.current, newValue);
+            const event = new Event('input', { bubbles: true });
+            /**
+             * When `selectMode` is `multiple`, the default `event.target.value` type is `string`,
+             * but it should actually be `string[]`. Since browsers do not natively support this,
+             * we need to override the `value` property to ensure it correctly reflects an array.
+             *
+             * Why do we need `Object.defineProperty` to override `event.target.value`?
+             * - The `target` property of an event object is read-only, so we cannot modify it directly.
+             * - `Object.defineProperty` allows us to override `event.target`, but it requires returning
+             *   an object from the getter.
+             * - To dynamically override only the `value` property while preserving all other properties
+             *   and methods of the input element, we use a `Proxy`.
+             *
+             * How does this approach help?
+             * - Ensures `event.target.value` correctly returns a `string[]` instead of a `string`.
+             * - Keeps the event object behaving as expected when accessed by event handlers.
+             * - Preserves other native properties (`name`, `id`, `type`, etc.) and methods
+             *   (`focus()`, `blur()`, etc.), preventing potential "Illegal Invocation" errors.
+             */
+            Object.defineProperty(event, 'target', {
+                configurable: true,
+                get: () => {
+                    return new Proxy(inputRef.current, {
+                        get(obj, prop) {
+                            if (prop === 'value') {
+                                return newValue; // override 'value'
+                            }
+                            return obj[prop];
+                        },
+                    });
+                },
+            });
+            inputRef.current?.dispatchEvent(event);
+        }
+    });
+    const { getButtonProps, getListboxProps } = useSelect({
+        open,
+        handleOpen,
+    });
+    /**
+     * The non-virtualized Menu/MenuList components have the necessary contexts
+     * baked in. For the virtualized Menu, we need to provide the context values.
+     */
+    const { contextValue: virtualizedContextValue } = useMenuItemSelect({
+        value,
+        onChange: handleMenuListChange,
+        onClose: handleClose,
+        selectMode,
+    });
+    const virtualizedMenuContextValue = useMemo(() => ({
+        close: handleClose,
+        autoFocus: true,
+    }), [handleClose]);
+    const selectorProps = getButtonProps(selectorPropsProp);
+    const selectedValue = value !== null || displayEmpty ? renderValue(value) : null;
+    const valueId = `${id}-value`;
+    const labelId = `${id}-label`;
+    let menu = null;
+    const baseMenuProps = {
+        onExitComplete: () => {
+            setDidMenuExit(true);
+        },
+        placement: DEFAULT_PLACEMENT,
+        open,
+        anchorEl,
+        PopperProps: {
+            offset: 4,
+            matchAnchorWidth: true,
+        },
+        classes: {
+            paper: cls('menu'),
+        },
+        onClose: handleClose,
+    };
+    const popperProps = combineProps(baseMenuProps.PopperProps, !virtualize
+        ? MenuProps?.PopperProps
+        : virtualizedMenuPropsProp?.PopperProps);
+    if (popperProps.matchAnchorWidth) {
+        baseMenuProps.classes = combineClasses(baseMenuProps.classes, {
+            paper: 'min-w-0',
+        });
+    }
+    if (!virtualize) {
+        menu = (jsx(Menu, { ...baseMenuProps, ...MenuProps, PopperProps: popperProps, classes: combineClasses(baseMenuProps.classes, MenuProps?.classes), motionProps: getYAxisGrowMotion({
+                placement: MenuProps?.placement,
+                prefersReducedMotion: prefersReducedMotion,
+            }), children: jsx(MenuList, { value: value, onChange: handleMenuListChange, nowrap: false, widget: "select", selectMode: selectMode, ...getListboxProps(), children: children }) }));
+    }
+    else {
+        menu = (jsx(MenuContext.Provider, { value: virtualizedMenuContextValue, children: jsx(MenuItemSelectContext.Provider, { value: virtualizedContextValue, children: jsx(VirtualizedMenu, { ...baseMenuProps, ...virtualizedMenuPropsProp, PopperProps: popperProps, classes: combineClasses(baseMenuProps.classes, virtualizedMenuPropsProp?.classes), initialFocus: handleInitialFocus, data: data, motionProps: getYAxisGrowMotion({
+                        placement: virtualizedMenuPropsProp?.placement,
+                        prefersReducedMotion: prefersReducedMotion,
+                    }), children: children }) }) }));
+    }
+    return (jsxs(Fragment, { children: [jsxs(FormField, { disabled: disabled, required: required, variant: variant, error: error, 
+                // Make sure the focus style doesn't disappear when the Menu is in its close transition
+                focused: open || (!open && !didMenuExit), htmlFor: id, label: label, labelProps: {
+                    id: labelId,
+                }, ref: ref, contentRef: formFieldContentRef, helperText: helperText, FormHelperTextProps: { id: helperTextId, ...FormHelperTextProps }, className: cls('root', { error }), classes: {
+                    outlined: cls('outlined'),
+                    standard: cls('standard'),
+                    contained: cls('contained'),
+                    content: cls('content'),
+                }, size: size, ...rest, children: [jsxs("button", { className: cls('selector', `${variant}-selector`, `${variant}-selector-${size}`, {
+                            expanded: open,
+                        }), type: 'button', disabled: disabled, "aria-labelledby": label ? `${labelId} ${valueId}` : valueId, "aria-describedby": helperTextId, ...selectorProps, id: id, children: [selectedValue ? (jsx("span", { id: valueId, "aria-live": "polite", className: cls('value'), title: getTitle(selectedValue), children: selectedValue })) : (jsx("span", { id: valueId, className: cls('placeholder'), title: getTitle(placeholder), children: placeholder })), jsx(Squircle, { className: cls('chevron'), interactive: false, children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }) })] }), jsx("input", { ref: inputRef, name: name, value: `${value}`, disabled: disabled, className: cls('native-input'), tabIndex: -1, "aria-hidden": true, "aria-invalid": error, onChange: handleInputChange, ...inputProps })] }), anchorEl && menu] }));
+});
+Select.displayName = 'SuiSelect';
+function getYAxisGrowMotion(params) {
+    const { placement = DEFAULT_PLACEMENT, ...rest } = params;
+    let verticalTransformOrigin = 'top';
+    if (placement === 'top') {
+        verticalTransformOrigin = 'bottom';
+    }
+    return getGrow({
+        ...rest,
+        direction: 'y',
+        transformOrigin: {
+            vertical: verticalTransformOrigin,
+            horizontal: 'center',
+        },
+    });
+}
+
+export { Select as S, useSelect as u };

package/chunks/ShowHideEye.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useClasses } from '@ringcentral/spring-base';
+import { motionTransition } from '@ringcentral/spring-theme';
+import { motion } from 'framer-motion';
+import { I as Icon } from './Icon.js';
+import 'react';
+import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
+
+const topEyelidVariants = {
+    show: {
+        d: 'M 17.5 12.25 C 16.75 10.25 13.8 7 10 7 C 6.2 7 3.25 10.25 2.5 12.25',
+    },
+    hide: {
+        d: 'M 17.5 6.75 C 16.75 8.75 14 12.2 10 12.2 C 6 12.2 3.25 8.75 2.5 6.75',
+    },
+};
+const bottomEyelidVariants = {
+    show: {
+        d: 'M 17.5 11.75 C 16.75 13.75 13.8 17 10 17 C 6.2 17 3.25 13.75 2.5 11.75',
+    },
+    hide: {
+        d: 'M 17.5 6.75 C 16.75 8.75 14 12.2 10 12.2 C 6 12.2 3.25 8.75 2.5 6.75',
+    },
+};
+const eyelashVariants = {
+    show: {
+        d: 'M 10 4.5 L 10 1.5 M 4 6.35 L 2.5 3.7 M 16 6.35 L 17.5 3.7',
+    },
+    hide: {
+        d: 'M 10 15.5 L 10 18.5 M 16 13.75 L 17.5 16.4 M 4 13.75 L 2.5 16.4',
+    },
+};
+const ShowHideEye = (props) => {
+    const { classes, size = 'medium', hide = false, className, ...rest } = props;
+    const cls = useClasses('show-hide-eye', classes, className);
+    const transition = useMotionSafeTransition(motionTransition['spring-01-fast']);
+    const pupilShowTransition = useMotionSafeTransition({
+        delay: 0.05,
+    });
+    const pupilHideTransition = useMotionSafeTransition({
+        duration: 0.1,
+    });
+    const pupilVariants = {
+        show: {
+            ry: 3.75,
+            transition: pupilShowTransition,
+        },
+        hide: {
+            ry: 0,
+            transition: pupilHideTransition,
+        },
+    };
+    return (jsx(Icon, { ...rest, size: size, className: cls('root'), children: jsxs(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 20 20', animate: hide ? 'hide' : 'show', transition: transition, children: [jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: topEyelidVariants, transition: transition, fill: "transparent" }), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: bottomEyelidVariants, transition: transition, fill: "transparent" }), jsx(motion.ellipse, { initial: false, cx: 10, cy: 10.5, rx: 3.75, fill: "currentColor", variants: pupilVariants }), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: eyelashVariants, transition: transition, fill: "transparent" })] }) }));
+};
+
+export { ShowHideEye as S };

package/chunks/SlideIn.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
+import '@ringcentral/spring-theme';
+import { g as getSlideIn } from './getSlideIn.js';
+
+const SlideIn = (props) => {
+    const { toggle, toggleOnTransition, toggleOffTransition, children, from = 'right', ...rest } = props;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    return (jsx(motion.div, { ...getSlideIn({
+            toggle,
+            from,
+            prefersReducedMotion,
+            toggleOnTransition,
+            toggleOffTransition,
+        }), ...rest, children: children }));
+};
+
+export { SlideIn as S };