@ringcentral/spring-ui 1.7.0

package/Switch.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useLayoutEffect } from 'react';
+import { useSwitch } from '@mui/base';
+import { useClasses, useForkRef } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { u as useFormLabel } from './chunks/FormLabel.js';
+
+var Switch$1 = {"sui-switch-root":"sui-switch-root","sui-focus-visible":"sui-focus-visible","sui-switch-track":"sui-switch-track","sui-switch-dot":"sui-switch-dot","sui-switch-input":"sui-switch-input","sui-checked":"sui-checked"};
+
+const Switch = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Switch' });
+    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, 
+    /* ⬇️ for input */
+    checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, ...rest } = props;
+    const cls = useClasses('switch', classes, className);
+    const { disabled, id } = useFormLabel({
+        disabled: disabledProp,
+        id: inputPropsProp?.id,
+    });
+    const { getInputProps, focusVisible, checked } = useSwitch({
+        checked: checkedProp,
+        defaultChecked,
+        disabled,
+        onBlur,
+        onChange,
+        onFocus,
+        onFocusVisible,
+        required,
+    });
+    const inputProps = getInputProps({ role: undefined, ...inputPropsProp });
+    const inputRef = useRef();
+    const forkRef = useForkRef(inputRefProp, inputProps.ref, inputRef);
+    useLayoutEffect(() => {
+        if (autoFocus) {
+            inputRef.current?.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsxs("span", { className: cls('root', { focusVisible }), ...rest, ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot') })] }));
+});
+Switch.displayName = 'SuiSwitch';
+
+export { Switch, Switch$1 as switchStyle };

package/Tab.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
+import { useTab } from '@mui/base';
+import { useForkRef, useClasses, combineClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { B as Badge } from './chunks/Badge.js';
+import { I as Icon } from './chunks/Icon.js';
+import { u as useTabsContext } from './chunks/TabsContext.js';
+import { T as Tooltip } from './chunks/Tooltip.js';
+import 'framer-motion';
+import 'lodash/isNumber';
+import 'lodash/kebabCase';
+import './chunks/useMotionSafeTransition.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';
+
+var Tab$1 = {"sui-tab-container":"sui-tab-container","sui-tab-pill-badge":"sui-tab-pill-badge","sui-tab-badge-root":"sui-tab-badge-root","sui-tab-root":"sui-tab-root","sui-selected":"sui-selected","sui-focus-visible":"sui-focus-visible","sui-tab-badge":"sui-tab-badge","sui-active":"sui-active","sui-tab-label":"sui-tab-label","sui-tab-label-container":"sui-tab-label-container","sui-tab-label-text":"sui-tab-label-text","sui-tab-label-badge-root":"sui-tab-label-badge-root","sui-tab-icon":"sui-tab-icon","sui-tab-icon-container":"sui-tab-icon-container","sui-tab-icon-pill":"sui-tab-icon-pill","sui-tab-icon-badge-root":"sui-tab-icon-badge-root","sui-tab-pill":"sui-tab-pill","sui-tab-label-pill-cobranding":"sui-tab-label-pill-cobranding","sui-tab-icon-pill-cobranding":"sui-tab-icon-pill-cobranding"};
+
+const Tab = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Tab' });
+    const { classes, className, children: childrenProp, action, onChange, variant = 'label', color: colorProp, label, symbol, TooltipProps, BadgeProps: badgePropsProp, title, style, value, ...rest } = props;
+    const tabRef = useRef(null);
+    const handleRef = useForkRef(tabRef, ref);
+    const { pill, pillGap, color: contextColor, setFloatingUnderlineVisibility, } = useTabsContext();
+    const color = colorProp ?? contextColor ?? 'default';
+    const { active, focusVisible, setFocusVisible, selected, getRootProps, index, } = useTab({
+        ...rest,
+        value,
+        rootRef: handleRef,
+    });
+    useEffect(() => {
+        if (!setFloatingUnderlineVisibility)
+            return;
+        if (focusVisible && selected) {
+            // Hide the floating underline when the currently selected tab is also focused
+            setFloatingUnderlineVisibility(false);
+        }
+        else if (selected) {
+            // Show the floating underline when this tab is selected but not focused
+            setFloatingUnderlineVisibility(true);
+        }
+    }, [focusVisible, selected, setFloatingUnderlineVisibility]);
+    useImperativeHandle(action, () => ({
+        focusVisible: () => {
+            setFocusVisible(true);
+            tabRef.current?.focus();
+        },
+    }), [setFocusVisible]);
+    const cls = useClasses('tab', classes, className);
+    let children = null;
+    if (childrenProp) {
+        children = childrenProp;
+    }
+    else {
+        let badgeClasses = {
+            root: cls('badge-root', `${variant}-badge-root`, pill && 'pill-badge', pill && `${variant}-pill-badge`),
+            content: cls('badge', `${variant}-badge`),
+        };
+        if (badgePropsProp?.classes) {
+            badgeClasses = combineClasses(badgeClasses, badgePropsProp.classes);
+        }
+        let content = null;
+        if (variant === 'label' && label) {
+            content = (jsx("span", { className: cls('text', `${variant}-text`), children: label }));
+        }
+        if (variant === 'icon' && symbol) {
+            content = jsx(Icon, { size: "small", symbol: symbol });
+        }
+        const badgeProps = badgePropsProp && {
+            color: selected ? 'primary' : 'secondary',
+            variant: pill ? 'outlined' : 'contained',
+            size: badgePropsProp?.type === 'dot' ? 'medium' : badgePropsProp?.size,
+            ...badgePropsProp,
+            classes: badgeClasses,
+        };
+        children = (jsxs("div", { className: cls('container', `${variant}-container`), children: [content, badgeProps && jsx(Badge, { ...badgeProps })] }));
+    }
+    const tooltipTitle = title || (typeof label === 'string' ? label : undefined);
+    const nativeTitle = variant === 'label' ? tooltipTitle : undefined;
+    const tab = (jsx("button", { className: cls('root', variant, {
+            pill,
+            active,
+            focusVisible,
+            selected,
+        }, pill && `${variant}-pill`, pill && color !== 'default' && `${variant}-pill-${color}`), title: nativeTitle, tabIndex: selected ? 0 : -1, style: {
+            ...style,
+            ...(pill && index !== 0 ? { marginLeft: `${pillGap}px` } : {}),
+        }, ...getRootProps(rest), onChange: onChange, children: children }));
+    if (variant === 'label') {
+        return tab;
+    }
+    return (jsx(Tooltip, { ...TooltipProps, title: tooltipTitle, children: tab }));
+});
+Tab.displayName = 'SuiTab';
+
+export { Tab, Tab$1 as tabStyle };

package/TabContext.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTabs, TabsProvider } from '@mui/base';
+export { useTabsContext as useTabContext } from '@mui/base';
+import { createContext, useContext, useMemo } from 'react';
+import { useId } from '@ringcentral/spring-base';
+
+// Create a separate context for internal use that both Tab and TabPanel can access
+const InternalTabsContext = createContext({ tabsInstanceId: undefined });
+const useInternalTabsContext = () => useContext(InternalTabsContext);
+/**
+ * Generate stable IDs for tab and tabpanel pairs
+ * This ensures consistent IDs regardless of whether the tab is visible or in more menu
+ */
+const generateTabStableIds = (tabsInstanceId, identifier) => {
+    const prefix = tabsInstanceId || 'Tabs';
+    return {
+        tabId: `${prefix}-tab-${identifier}`,
+        panelId: `${prefix}-tabpanel-${identifier}`,
+    };
+};
+const useTabStableIds = (identifier) => {
+    const { tabsInstanceId } = useInternalTabsContext();
+    return generateTabStableIds(tabsInstanceId, identifier);
+};
+const TabContext = (props) => {
+    const { children } = props;
+    const { contextValue } = useTabs(props);
+    const generatedTabsInstanceId = useId('Tabs', true);
+    const internalContextValue = useMemo(() => ({ tabsInstanceId: generatedTabsInstanceId }), [generatedTabsInstanceId]);
+    return (jsx(TabsProvider, { value: contextValue, children: jsx(InternalTabsContext.Provider, { value: internalContextValue, children: children }) }));
+};
+TabContext.displayName = 'SuiTabContext';
+
+export { TabContext, generateTabStableIds, useInternalTabsContext, useTabStableIds };

package/TabPanel.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useTabPanel } from '@mui/base';
+import { useEver, useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { useTabStableIds } from './TabContext.js';
+
+var TabPanel$1 = {};
+
+const TabPanel = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TabPanel' });
+    const { classes, className, children, value, keepMounted, id, ...rest } = props;
+    const { panelId } = useTabStableIds(value);
+    const { hidden, getRootProps } = useTabPanel({
+        ...props,
+        id: id ?? panelId,
+    });
+    const isEverShown = useEver(!hidden);
+    const keepAlive = keepMounted && isEverShown;
+    const unmount = hidden && !keepAlive;
+    const cls = useClasses('tab-panel', classes, className);
+    return (jsx("div", { role: "tabpanel", className: cls('root'), ...rest, ...getRootProps(), ref: ref, children: !unmount && children }));
+});
+TabPanel.displayName = 'SuiTabPanel';
+
+export { TabPanel, TabPanel$1 as tabPanelStyle };

package/Table.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { T as TableContext } from './chunks/TableContext.js';
+export { u as useTableContext } from './chunks/TableContext.js';
+export { T as Tablelvl2Context, u as useTablelvl2Context } from './chunks/Tablelvl2Context.js';
+
+var Table$1 = {"sui-table-root":"sui-table-root","sui-table-sticky-header":"sui-table-sticky-header","sui-table-sticky-footer":"sui-table-sticky-footer"};
+
+const defaultComponent = 'table';
+const Table = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Table' });
+    const { component: TableRoot = defaultComponent, classes, className, children, stickyHeader = false, stickyFooter = false, columnDivider = false, ...rest } = props;
+    const cls = useClasses('table', classes, className);
+    const table = useMemo(() => ({ stickyHeader, stickyFooter, columnDivider }), [stickyHeader, stickyFooter, columnDivider]);
+    return (jsx(TableContext.Provider, { value: table, children: jsx(TableRoot, { role: TableRoot === defaultComponent ? undefined : 'table', className: cls('root', {
+                'sticky-header': stickyHeader,
+                'sticky-footer': stickyFooter,
+            }), ...rest, ref: ref, children: children }) }));
+});
+Table.displayName = 'SuiTable';
+
+export { Table, TableContext, Table$1 as tableStyle };

package/TableBody.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { u as useTableContext } from './chunks/TableContext.js';
+
+var TableBody$1 = {"sui-table-body-root":"sui-table-body-root"};
+
+const defaultComponent = 'tbody';
+const TableBody = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TableBody' });
+    const { component: TableBodyRoot = defaultComponent, classes, className, children, ...rest } = props;
+    const cls = useClasses('table-body', classes, className);
+    const table = useTableContext();
+    const fillerRowForStickyFooter = table && table.stickyFooter ? (jsx("tr", { "aria-hidden": true, className: "invisible" })) : null; // If the table has a sticky footer, we need to add an empty row to prevent any row from stretching vertically.
+    return (jsxs(TableBodyRoot, { role: TableBodyRoot === defaultComponent ? undefined : 'rowgroup', className: cls('root'), ...rest, ref: ref, children: [children, fillerRowForStickyFooter] }));
+});
+TableBody.displayName = 'SuiTableBody';
+
+export { TableBody, TableBody$1 as tableBodyStyle };

package/TableCell.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses, useHover, useFocusVisible } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import clsx from 'clsx';
+import 'framer-motion';
+import './chunks/Icon.js';
+import { S as SortableArrow } from './chunks/SortableArrow.js';
+import { u as useTableContext } from './chunks/TableContext.js';
+import { u as useTablelvl2Context } from './chunks/Tablelvl2Context.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+
+var TableCell$1 = {"sui-table-cell-root":"sui-table-cell-root","sui-table-cell-padding-checkbox":"sui-table-cell-padding-checkbox","sui-table-cell-content":"sui-table-cell-content","sui-table-cell-head":"sui-table-cell-head","sui-table-cell-sortable":"sui-table-cell-sortable","sui-table-cell-content-sortable":"sui-table-cell-content-sortable","sui-table-cell-sort-icon":"sui-table-cell-sort-icon","sui-focus-visible":"sui-focus-visible","sui-table-cell-padding-none":"sui-table-cell-padding-none","sui-table-cell-align-left":"sui-table-cell-align-left","sui-table-cell-align-center":"sui-table-cell-align-center","sui-table-cell-align-right":"sui-table-cell-align-right","sui-table-cell-align-justify":"sui-table-cell-align-justify","sui-table-cell-sticky-header-default-bg":"sui-table-cell-sticky-header-default-bg","sui-table-cell-content-padding-checkbox":"sui-table-cell-content-padding-checkbox","sui-table-cell-content-align-center":"sui-table-cell-content-align-center","sui-table-cell-content-align-right":"sui-table-cell-content-align-right","sui-table-cell-content-align-justify":"sui-table-cell-content-align-justify","sui-table-cell-sorted":"sui-table-cell-sorted","sui-table-cell-sort-indicator":"sui-table-cell-sort-indicator","sui-table-cell-sort-icon-sorted":"sui-table-cell-sort-icon-sorted","sui-table-cell-column-divider":"sui-table-cell-column-divider"};
+
+/**
+ * The component renders a `<th>` element when the parent context is a header
+ * or otherwise a `<td>` element.
+ */
+const TableCell = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TableCell' });
+    const { component: componentProp, variant: variantProp, padding = 'normal', align = 'inherit', scope: scopeProp, sortDirection, showSortIndicator = false, initialSortIconDirection = 'asc', classes, className, children, SortIconProps, ...rest } = props;
+    const cls = useClasses('table-cell', classes, className);
+    const sortable = sortDirection !== undefined;
+    const sorted = !!sortDirection;
+    const table = useTableContext();
+    const tablelvl2 = useTablelvl2Context();
+    const { hover, hoverHandlers } = useHover();
+    const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
+    let TableCellRoot = 'td';
+    if (componentProp) {
+        TableCellRoot = componentProp;
+    }
+    else {
+        TableCellRoot = isHeadCell ? 'th' : 'td';
+    }
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible();
+    let scope = scopeProp;
+    // scope is not a valid attribute for <td/> elements.
+    // source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element
+    if (TableCellRoot === 'td') {
+        scope = undefined;
+    }
+    else if (!scope && isHeadCell) {
+        scope = 'col';
+    }
+    const variant = variantProp || (tablelvl2 && tablelvl2.variant);
+    let ariaSort = undefined;
+    let sortIcon = null;
+    const sortIconDirection = sorted
+        ? sortDirection
+        : (showSortIndicator && (hover || focusVisible)) || !showSortIndicator
+            ? initialSortIconDirection
+            : false;
+    if (sorted)
+        ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+    if (sortable) {
+        sortIcon = (jsx(SortableArrow, { direction: sortIconDirection, size: "small", className: clsx(cls('sort-icon', sorted && 'sort-icon-sorted', showSortIndicator && 'sort-indicator'), SortIconProps?.className), ...SortIconProps }));
+    }
+    const ContentElement = sortable ? 'button' : 'div';
+    const sortableProps = sortable
+        ? {
+            ref: focusVisibleRef,
+            type: 'button',
+            ...focusVisibleHandlers,
+            ...hoverHandlers,
+        }
+        : {};
+    return (jsx(TableCellRoot, { className: cls('root', variant, align !== 'inherit' && `align-${align}`, padding !== 'normal' && `padding-${padding}`, {
+            sortable,
+            sorted,
+            'sticky-header-default-bg': variant === 'head' &&
+                table &&
+                table.stickyHeader &&
+                tablelvl2?.useDefaultBgColor,
+            'column-divider': table.columnDivider,
+        }), "aria-sort": ariaSort, scope: scope, ...rest, ref: ref, children: jsxs(ContentElement, { ...sortableProps, className: cls('content', padding !== 'normal' &&
+                padding !== 'none' &&
+                `content-padding-${padding}`, align !== 'inherit' && align !== 'left' && `content-align-${align}`, {
+                'content-sortable': sortable,
+                focusVisible: sortable && focusVisible,
+            }), children: [children, sortIcon] }) }));
+});
+TableCell.displayName = 'SuiTableCell';
+
+export { TableCell, TableCell$1 as tableCellStyle };

package/TableContainer.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+var TableContainer$1 = {"sui-table-container":"sui-table-container","sui-table-container-root":"sui-table-container-root","sui-table-container-standard-border":"sui-table-container-standard-border","sui-table-container-rounded-border":"sui-table-container-rounded-border"};
+
+const TableContainer = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TableContainer' });
+    const { component: TableContainerRoot = 'div', classes, className, children, border = 'standard', ...rest } = props;
+    const cls = useClasses('table-container', classes, className);
+    return (jsx(TableContainerRoot, { className: cls('root', border, `${border}-border`), ...rest, ref: ref, children: children }));
+});
+TableContainer.displayName = 'SuiTableContainer';
+
+export { TableContainer, TableContainer$1 as tableContainerStyle };

package/TableFooter.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { useClasses } from '@ringcentral/spring-base';
+import { forwardRef } from 'react';
+import { u as useTableContext } from './chunks/TableContext.js';
+
+var TableFooter$1 = {"sui-table-footer-root":"sui-table-footer-root","sui-table-footer-content":"sui-table-footer-content","sui-table-footer-padding-none":"sui-table-footer-padding-none","sui-table-footer-padding-checkbox":"sui-table-footer-padding-checkbox","sui-table-footer-sticky":"sui-table-footer-sticky"};
+
+const TableFooter = forwardRef((inProps, ref) => {
+    const { classes, colSpan, children, className, padding = 'normal', ...rest } = inProps;
+    const cls = useClasses('table-footer', classes, className);
+    const table = useTableContext();
+    return (jsx("tfoot", { ...rest, className: cls('root', { sticky: table.stickyFooter }), ref: ref, children: jsx("tr", { children: jsx("td", { colSpan: colSpan || 1000, children: jsx("div", { className: cls('content', padding !== 'normal' && `padding-${padding}`), children: children }) }) }) }));
+});
+TableFooter.displayName = 'SuiTableFooter';
+
+export { TableFooter, TableFooter$1 as tableFooterStyles };

package/TableHead.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { u as useTableContext } from './chunks/TableContext.js';
+import { T as Tablelvl2Context } from './chunks/Tablelvl2Context.js';
+
+var TableHead$1 = {"sui-table-head-root":"sui-table-head-root","sui-table-head-background":"sui-table-head-background","sui-table-head-sticky":"sui-table-head-sticky"};
+
+const defaultComponent = 'thead';
+const TableHead = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TableHead' });
+    const { component: TableHeadRoot = defaultComponent, classes, className, children, useDefaultBgColor, ...rest } = props;
+    const cls = useClasses('table-head', classes, className);
+    const table = useTableContext();
+    const tablelvl2 = useMemo(() => ({ variant: 'head', useDefaultBgColor }), [useDefaultBgColor]);
+    return (jsx(Tablelvl2Context.Provider, { value: tablelvl2, children: jsx(TableHeadRoot, { className: cls('root', {
+                background: !useDefaultBgColor,
+                sticky: table && table.stickyHeader,
+            }), role: TableHeadRoot === defaultComponent ? undefined : 'rowgroup', ...rest, ref: ref, children: children }) }));
+});
+TableHead.displayName = 'SuiTableHead';
+
+export { TableHead, TableHead$1 as tableHeadStyle };

package/TablePagination.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useClasses, useEventCallback, combineProps } from '@ringcentral/spring-base';
+import { CaretLeftMd, CaretRightMd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { forwardRef } from 'react';
+import { I as IconButton } from './chunks/IconButtonLabel.js';
+import { M as MenuItemText } from './chunks/MenuItemText.js';
+import { Option } from './Option.js';
+import { S as Select } from './chunks/Select.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';
+import './chunks/useMenuItemSelect.js';
+import './chunks/useNestedParentMenu.js';
+import './chunks/useNestedMenuItem.js';
+import './VirtualizedList.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+import './ListNavigation.js';
+import './chunks/Menu.js';
+import './chunks/Popover.js';
+import './chunks/getGrow.js';
+import './chunks/ExpandCollapseCaret.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/useHelperTextId.js';
+import './chunks/MenuList.js';
+import './chunks/VirtualizedMenu.js';
+
+var TablePagination$1 = {"sui-table-pagination-content":"sui-table-pagination-content","sui-table-pagination-rows-per-page-controls":"sui-table-pagination-rows-per-page-controls","sui-table-pagination-rows-per-page-label":"sui-table-pagination-rows-per-page-label","sui-table-pagination-current-page-controls":"sui-table-pagination-current-page-controls","sui-table-pagination-range-container":"sui-table-pagination-range-container"};
+
+const TablePagination = forwardRef((inProps, ref) => {
+    const { classes, className, component: Root = 'td', colSpan = 1000, page, variant = 'range', count = -1, rowsPerPage = 10, rowsPerPageLabel = 'Rows per page', rowsPerPageOptions = [10, 25, 50, 100], onRowsPerPageChange, rangeSeparatorLabel = 'of', previousPageButtonProps, nextPageButtonProps, onPageChange, ...rest } = useThemeProps({
+        props: inProps,
+        name: 'TablePagination',
+    });
+    const rootProps = {
+        ...rest,
+    };
+    if (Root === 'td') {
+        rootProps.colSpan = colSpan;
+    }
+    const cls = useClasses('table-pagination', classes, className);
+    const totalPages = Math.ceil(count / rowsPerPage);
+    const hasPreviousPage = page > 0;
+    const hasNextPage = page < totalPages - 1;
+    const startOfRange = page * rowsPerPage + 1;
+    let total = count;
+    let endOfRange;
+    let showRowRange = true;
+    if (variant === 'select-page') {
+        endOfRange = totalPages;
+        showRowRange = false;
+        total = totalPages;
+    }
+    else {
+        endOfRange = page * rowsPerPage + rowsPerPage;
+        if (endOfRange > count)
+            endOfRange = count;
+    }
+    const handlePreviousPageButtonClick = useEventCallback((e) => {
+        if (!hasPreviousPage)
+            return;
+        onPageChange?.(e, page - 1);
+    });
+    const handleNextPageButtonClick = useEventCallback((e) => {
+        if (!hasNextPage)
+            return;
+        onPageChange?.(e, page + 1);
+    });
+    const handleSelectPageChange = useEventCallback((e) => {
+        onPageChange?.(e, parseInt(e.target.value, 10));
+    });
+    const handleRowsPerPageChange = useEventCallback((e, child) => {
+        onPageChange?.(e, 0);
+        onRowsPerPageChange?.(e, child);
+    });
+    return (jsx(Root, { className: cls('root'), ...rootProps, ref: ref, children: jsxs("div", { className: cls('content'), children: [variant === 'page-size' && (jsxs("div", { className: cls('rows-per-page-controls'), children: [jsx("span", { className: cls('rows-per-page-label'), children: rowsPerPageLabel }), jsx(Select, { value: rowsPerPage, variant: "outlined", size: "medium", classes: {
+                                selector: 'min-w-16',
+                            }, MenuProps: {
+                                PopperProps: {
+                                    matchAnchorWidth: false,
+                                },
+                                classes: {
+                                    paper: 'min-w-16',
+                                },
+                            }, onChange: handleRowsPerPageChange, children: rowsPerPageOptions?.map((option) => (jsx(Option, { value: option, children: jsx(MenuItemText, { children: option }) }, option))) })] })), jsxs("div", { className: cls('range-container'), children: [variant === 'select-page' && (jsx(Select, { value: page, variant: "outlined", size: "medium", classes: {
+                                content: 'mr-0.5',
+                                selector: 'min-w-16',
+                            }, MenuProps: {
+                                PopperProps: {
+                                    matchAnchorWidth: false,
+                                },
+                                classes: {
+                                    paper: 'min-w-16',
+                                },
+                            }, renderValue: (value) => value + 1, onChange: handleSelectPageChange, children: Array(totalPages)
+                                .fill(totalPages)
+                                .map((_, i) => (jsx(Option, { value: i, children: jsx(MenuItemText, { children: i + 1 }) }, i))) })), showRowRange && jsx("span", { children: `${startOfRange}-${endOfRange}` }), jsx("span", { children: rangeSeparatorLabel }), jsx("span", { children: total })] }), jsxs("div", { className: cls('current-page-controls'), children: [jsx(IconButton, { shape: "squircle", color: "secondary", variant: "contained", size: "small", symbol: CaretLeftMd, background: false, disabled: !hasPreviousPage, ...combineProps({
+                                onClick: handlePreviousPageButtonClick,
+                                'aria-label': 'Go to previous page',
+                            }, previousPageButtonProps) }), jsx(IconButton, { shape: "squircle", color: "secondary", variant: "contained", size: "small", symbol: CaretRightMd, background: false, disabled: !hasNextPage, ...combineProps({
+                                onClick: handleNextPageButtonClick,
+                                'aria-label': 'Go to next page',
+                            }, nextPageButtonProps) })] })] }) }));
+});
+TablePagination.displayName = 'SuiTablePagination';
+
+export { TablePagination, TablePagination$1 as tablePaginationStyles };

package/TableRow.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useButton } from '@mui/base';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { u as useTablelvl2Context } from './chunks/Tablelvl2Context.js';
+
+var TableRow$1 = {"sui-table-row-root":"sui-table-row-root","sui-table-row-clickable":"sui-table-row-clickable","sui-table-row-hoverable":"sui-table-row-hoverable","sui-focus-visible":"sui-focus-visible","sui-active":"sui-active","sui-table-row-body":"sui-table-row-body","sui-selected":"sui-selected","sui-table-cell":"sui-table-cell"};
+
+const defaultComponent = 'tr';
+const TableRow = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TableRow' });
+    const { component: TableRowRoot = defaultComponent, classes, className, children, hoverable = false, clickable: clickableProp, selected, role: roleProp, ...rest } = props;
+    const cls = useClasses('table-row', classes, className);
+    const tablelvl2 = useTablelvl2Context();
+    const variant = (tablelvl2 && tablelvl2.variant) || 'body';
+    const clickable = clickableProp !== false && rest.onClick ? true : clickableProp ?? false;
+    const { getRootProps, focusVisible, active } = useButton({
+        ...props,
+        disabled: !clickable,
+        rootElementName: TableRowRoot,
+        rootRef: ref,
+    });
+    const rootProps = getRootProps();
+    // Determine the appropriate role
+    const role = roleProp ?? (TableRowRoot !== defaultComponent ? 'row' : undefined);
+    return (jsx(TableRowRoot, { className: cls('root', variant, {
+            hoverable,
+            clickable,
+            selected,
+            focusVisible: clickable && focusVisible,
+            active: clickable && active,
+        }), ...rest, ...(clickable && rootProps), role: role, ref: ref, children: children }));
+});
+TableRow.displayName = 'SuiTableRow';
+
+export { TableRow, TableRow$1 as tableRowStyle };