@ringcentral/spring-ui 1.12.0 → 1.13.0

package/TableCell.js

@@ -1,80 +1,114 @@
-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"};
-
-const TableCell = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'TableCell' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses, useFocusVisible, useHover } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import clsx from "clsx";
+import { SortableArrow } from "./chunks/4476.js";
+import { useTableContext } from "./chunks/7279.js";
+import { useTableRowContext } from "./chunks/987.js";
+import { useTablelvl2Context } from "./chunks/8011.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TableCell = ({"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-small":"sui-table-cell-small","sui-table-cell-large":"sui-table-cell-large","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","sui-table-cell-hide-row-divider":"sui-table-cell-hide-row-divider"});
+
+
+
+
+
+
+
+
+
+
+/**
+ * The component renders a `<th>` element when the parent context is a header
+ * or otherwise a `<td>` element.
+ */ const TableCell_TableCell = /*#__PURE__*/ 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 tableRow = useTableRowContext();
     const tablelvl2 = useTablelvl2Context();
+    const size = tableRow.size ?? table.size;
     const { hover, hoverHandlers } = useHover();
     const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
     let TableCellRoot = 'td';
     if (componentProp) {
         TableCellRoot = componentProp;
-    }
-    else {
+    } 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) {
+    } else if (!scope && isHeadCell) {
         scope = 'col';
     }
-    const variant = variantProp || (tablelvl2 && tablelvl2.variant);
+    const variant = variantProp || tablelvl2 && tablelvl2.variant;
+    const isBodyVariant = variant !== 'head';
     let ariaSort = undefined;
     let sortIcon = null;
-    const sortIconDirection = sorted
-        ? sortDirection
-        : (showSortIndicator && (hover || focusVisible)) || !showSortIndicator
-            ? initialSortIconDirection
-            : false;
-    if (sorted)
-        ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+    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", ...SortIconProps, className: clsx(cls('sort-icon', sorted && 'sort-icon-sorted', showSortIndicator && 'sort-indicator'), SortIconProps?.className) }));
+        sortIcon = /*#__PURE__*/ jsx(SortableArrow, {
+            direction: sortIconDirection,
+            size: "small",
+            ...SortIconProps,
+            className: clsx(cls('sort-icon', sorted && 'sort-icon-sorted', showSortIndicator && 'sort-indicator'), SortIconProps?.className)
+        });
     }
     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}`, {
+    const sortableProps = sortable ? {
+        ref: focusVisibleRef,
+        type: 'button',
+        ...focusVisibleHandlers,
+        ...hoverHandlers
+    } : {};
+    return /*#__PURE__*/ jsx(TableCellRoot, {
+        className: cls('root', variant, align !== 'inherit' && `align-${align}`, padding !== 'normal' && `padding-${padding}`, isBodyVariant && size !== 'medium' && size, {
             sortable,
             sorted,
-            'sticky-header-default-bg': variant === 'head' &&
-                table &&
-                table.stickyHeader &&
-                tablelvl2?.useDefaultBgColor,
+            '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}`, {
+            'hide-row-divider': isBodyVariant && !table.rowDivider
+        }),
+        "aria-sort": ariaSort,
+        scope: scope,
+        ...rest,
+        ref: ref,
+        children: /*#__PURE__*/ 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] }) }));
+                focusVisible: sortable && focusVisible
+            }),
+            children: [
+                children,
+                sortIcon
+            ]
+        })
+    });
 });
-TableCell.displayName = 'SuiTableCell';
+TableCell_TableCell.displayName = 'SuiTableCell';
+
+
+
+
+
 
-export { TableCell, TableCell$1 as tableCellStyle };
+export { TableCell as tableCellStyle, TableCell_TableCell as TableCell };

package/TableContainer.js

@@ -1,16 +1,38 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+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' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TableContainer = ({"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_TableContainer = /*#__PURE__*/ 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 }));
+    return /*#__PURE__*/ jsx(TableContainerRoot, {
+        className: cls('root', border, `${border}-border`),
+        ...rest,
+        ref: ref,
+        children: children
+    });
 });
-TableContainer.displayName = 'SuiTableContainer';
+TableContainer_TableContainer.displayName = 'SuiTableContainer';
+
+
+
+
+
 
-export { TableContainer, TableContainer$1 as tableContainerStyle };
+export { TableContainer as tableContainerStyle, TableContainer_TableContainer as TableContainer };

package/TableFooter.js

@@ -1,16 +1,44 @@
-import { jsx } from 'react/jsx-runtime';
-import { useClasses } from '@ringcentral/spring-base';
-import { forwardRef } from 'react';
-import { u as useTableContext } from './chunks/TableContext.js';
+import { jsx } from "react/jsx-runtime";
+import { useClasses } from "@ringcentral/spring-base";
+import { forwardRef } from "react";
+import { useTableContext } from "./chunks/7279.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;
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TableFooter = ({"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","sui-table-footer-hide-divider":"sui-table-footer-hide-divider"});
+
+
+
+
+
+const TableFooter_TableFooter = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const { classes, colSpan, children, className, padding = 'normal', divider = true, ...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 }) }) }) }));
+    return /*#__PURE__*/ jsx("tfoot", {
+        ...rest,
+        className: cls('root', {
+            sticky: table.stickyFooter,
+            'hide-divider': !divider
+        }),
+        ref: ref,
+        children: /*#__PURE__*/ jsx("tr", {
+            children: /*#__PURE__*/ jsx("td", {
+                colSpan: colSpan || 1000,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: cls('content', padding !== 'normal' && `padding-${padding}`),
+                    children: children
+                })
+            })
+        })
+    });
 });
-TableFooter.displayName = 'SuiTableFooter';
+TableFooter_TableFooter.displayName = 'SuiTableFooter';
+
+
+
+
 
-export { TableFooter, TableFooter$1 as tableFooterStyles };
+export { TableFooter as tableFooterStyles, TableFooter_TableFooter as TableFooter };

package/TableHead.js

@@ -1,24 +1,58 @@
-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';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useTableContext } from "./chunks/7279.js";
+import { Tablelvl2Context } from "./chunks/8011.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TableHead = ({"sui-table-head-root":"sui-table-head-root","sui-table-head-background":"sui-table-head-background","sui-table-head-sticky":"sui-table-head-sticky","sui-table-head-hide-divider":"sui-table-head-hide-divider","sui-table-cell-root":"sui-table-cell-root"});
+
+
+
+
+
 
-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 TableHead_TableHead = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'TableHead'
+    });
+    const { component: TableHeadRoot = defaultComponent, classes, className, children, useDefaultBgColor, divider = true, ...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', {
+    const tablelvl2 = useMemo(()=>({
+            variant: 'head',
+            useDefaultBgColor
+        }), [
+        useDefaultBgColor
+    ]);
+    return /*#__PURE__*/ jsx(Tablelvl2Context.Provider, {
+        value: tablelvl2,
+        children: /*#__PURE__*/ jsx(TableHeadRoot, {
+            className: cls('root', {
                 background: !useDefaultBgColor,
                 sticky: table && table.stickyHeader,
-            }), role: TableHeadRoot === defaultComponent ? undefined : 'rowgroup', ...rest, ref: ref, children: children }) }));
+                'hide-divider': !divider
+            }),
+            role: TableHeadRoot === defaultComponent ? undefined : 'rowgroup',
+            ...rest,
+            ref: ref,
+            children: children
+        })
+    });
 });
-TableHead.displayName = 'SuiTableHead';
+TableHead_TableHead.displayName = 'SuiTableHead';
+
+
+
+
+
 
-export { TableHead, TableHead$1 as tableHeadStyle };
+export { TableHead as tableHeadStyle, TableHead_TableHead as TableHead };

package/TablePagination.js

@@ -1,62 +1,50 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { combineProps, useClasses, useEventCallback } 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/hasContent.js';
-import '@mui/utils';
-import './chunks/composeEventHandlers.js';
-import './chunks/useMenuItemSelect.js';
-import './chunks/useAnimationFrame.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-selector":"sui-table-pagination-selector","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, selectorProps, MenuProps, onPageChange, ...rest } = useThemeProps({
+import { jsx, jsxs } from "react/jsx-runtime";
+import { combineProps, useClasses, useEventCallback } from "@ringcentral/spring-base";
+import { CaretLeftMd, CaretRightMd } from "@ringcentral/spring-icon";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { forwardRef } from "react";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { MenuItemText as MenuItemText_MenuItemText } from "./MenuItemText.js";
+import { Option } from "./Option.js";
+import { Select as Select_Select } from "./Select.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TablePagination = ({"sui-table-pagination-content":"sui-table-pagination-content","sui-table-pagination-selector":"sui-table-pagination-selector","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_TablePagination = /*#__PURE__*/ 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, selectorProps, MenuProps, onPageChange, ...rest } = useThemeProps({
         props: inProps,
-        name: 'TablePagination',
+        name: 'TablePagination'
     });
     const mergedSelectMenuProps = combineProps({
-        PopperProps: { matchAnchorWidth: false },
-        classes: { paper: 'min-w-16' },
+        PopperProps: {
+            matchAnchorWidth: false
+        },
+        classes: {
+            paper: 'min-w-16'
+        }
     }, MenuProps);
     const rootProps = {
-        ...rest,
+        ...rest
     };
     if (Root === 'td') {
         rootProps.colSpan = colSpan;
@@ -73,44 +61,130 @@ const TablePagination = forwardRef((inProps, ref) => {
         endOfRange = totalPages;
         showRowRange = false;
         total = totalPages;
-    }
-    else {
+    } else {
         endOfRange = page * rowsPerPage + rowsPerPage;
-        if (endOfRange > count)
-            endOfRange = count;
+        if (endOfRange > count) endOfRange = count;
     }
-    const handlePreviousPageButtonClick = useEventCallback((e) => {
-        if (!hasPreviousPage)
-            return;
+    const handlePreviousPageButtonClick = useEventCallback((e)=>{
+        if (!hasPreviousPage) return;
         onPageChange?.(e, page - 1);
     });
-    const handleNextPageButtonClick = useEventCallback((e) => {
-        if (!hasNextPage)
-            return;
+    const handleNextPageButtonClick = useEventCallback((e)=>{
+        if (!hasNextPage) return;
         onPageChange?.(e, page + 1);
     });
-    const handleSelectPageChange = useEventCallback((e) => {
+    const handleSelectPageChange = useEventCallback((e)=>{
         onPageChange?.(e, parseInt(e.target.value, 10));
     });
-    const handleRowsPerPageChange = useEventCallback((e, child) => {
+    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: cls('selector'),
-                            }, selectorProps: selectorProps, MenuProps: mergedSelectMenuProps, 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: {
+    return /*#__PURE__*/ jsx(Root, {
+        className: cls('root'),
+        ...rootProps,
+        ref: ref,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cls('content'),
+            children: [
+                variant === 'page-size' && /*#__PURE__*/ jsxs("div", {
+                    className: cls('rows-per-page-controls'),
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            className: cls('rows-per-page-label'),
+                            children: rowsPerPageLabel
+                        }),
+                        /*#__PURE__*/ jsx(Select_Select, {
+                            value: rowsPerPage,
+                            variant: "outlined",
+                            size: "medium",
+                            classes: {
+                                selector: cls('selector')
+                            },
+                            selectorProps: selectorProps,
+                            MenuProps: mergedSelectMenuProps,
+                            onChange: handleRowsPerPageChange,
+                            children: rowsPerPageOptions?.map((option)=>/*#__PURE__*/ jsx(Option, {
+                                    value: option,
+                                    children: /*#__PURE__*/ jsx(MenuItemText_MenuItemText, {
+                                        children: option
+                                    })
+                                }, option))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: cls('range-container'),
+                    children: [
+                        variant === 'select-page' && /*#__PURE__*/ jsx(Select_Select, {
+                            value: page,
+                            variant: "outlined",
+                            size: "medium",
+                            classes: {
                                 content: 'mr-0.5',
-                                selector: cls('selector'),
-                            }, selectorProps: selectorProps, MenuProps: mergedSelectMenuProps, 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({
+                                selector: cls('selector')
+                            },
+                            selectorProps: selectorProps,
+                            MenuProps: mergedSelectMenuProps,
+                            renderValue: (value)=>value + 1,
+                            onChange: handleSelectPageChange,
+                            children: Array(totalPages).fill(totalPages).map((_, i)=>/*#__PURE__*/ jsx(Option, {
+                                    value: i,
+                                    children: /*#__PURE__*/ jsx(MenuItemText_MenuItemText, {
+                                        children: i + 1
+                                    })
+                                }, i))
+                        }),
+                        showRowRange && /*#__PURE__*/ jsx("span", {
+                            children: `${startOfRange}-${endOfRange}`
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: rangeSeparatorLabel
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: total
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: cls('current-page-controls'),
+                    children: [
+                        /*#__PURE__*/ jsx(IconButton_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({
+                                'aria-label': 'Go to previous page'
+                            }, previousPageButtonProps)
+                        }),
+                        /*#__PURE__*/ jsx(IconButton_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) })] })] }) }));
+                                'aria-label': 'Go to next page'
+                            }, nextPageButtonProps)
+                        })
+                    ]
+                })
+            ]
+        })
+    });
 });
-TablePagination.displayName = 'SuiTablePagination';
+TablePagination_TablePagination.displayName = 'SuiTablePagination';
+
+
+
+
 
-export { TablePagination, TablePagination$1 as tablePaginationStyles };
+export { TablePagination as tablePaginationStyles, TablePagination_TablePagination as TablePagination };