@pdg/react-table 1.0.140 → 1.1.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import*as React from'react';import React__default,{useRef,useState,useCallback,useEffect,createContext,useContext,useMemo,useLayoutEffect,useId}from'react';import {styled,TableRow,lighten,TableCell,Stack,Pagination,Checkbox,useTheme,TableHead,Box,Tooltip,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import {useSortable,SortableContext,verticalListSortingStrategy,sortableKeyboardCoordinates,arrayMove}from'@dnd-kit/sortable';import {v4}from'uuid';import {formatPersonalNo,formatBusinessNo,formatTelNo,formatNumber}from'@pdg/formatting';import {useInView}from'react-intersection-observer';import {ifUndefined,notEmpty,equal,empty}from'@pdg/compare';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';import {PdgButton,PdgIcon,PdgCopyToClipboard}from'@pdg/react-component';function insertStyle(css) {
+import*as React from'react';import React__default,{useRef,useState,useCallback,useEffect,createContext,useContext,useMemo,useLayoutEffect,useId}from'react';import {styled,TableRow,lighten,TableCell,Stack,Pagination,Checkbox,useTheme,TableHead,Box,Tooltip,TableBody,Icon,TableFooter,Paper,Table,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import {useSortable,SortableContext,verticalListSortingStrategy,sortableKeyboardCoordinates,arrayMove}from'@dnd-kit/sortable';import {v4}from'uuid';import {formatPersonalNo,formatBusinessNo,formatTelNo,formatNumber}from'@pdg/formatting';import {useInView}from'react-intersection-observer';import {ifUndefined,notEmpty,equal,empty}from'@pdg/compare';import {PSearch,PSearchGroup,PFormHidden}from'@pdg/react-form';import {PButton,PIcon,PCopyToClipboard}from'@pdg/react-component';function insertStyle(css) {
     if (typeof window === 'undefined')
         return;
     const style = document.createElement('style');
@@ -6,7 +6,7 @@ import*as React from'react';import React__default,{useRef,useState,useCallback,u
     style.innerHTML = css;
     document.head.appendChild(style);
     return css;
-}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.Table .TableHead .TableHeadRow th{position:relative;transform:translateY(-100%)}.Table.sticky-header .TableHead .TableHeadRow th{position:sticky;transform:none}");/******************************************************************************
+}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.PTable .PTableHead .PTableHeadRow th{position:relative;transform:translateY(-100%)}.PTable.sticky-header .PTableHead .PTableHeadRow th{position:sticky;transform:none}");/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -1008,7 +1008,7 @@ function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 100
         };
     }, [resizeHandler, refElement]);
     return Object.assign({ ref: refProxy }, size);
-}var StyledBodyRow$1 = styled(TableRow)(function (_a) {
+}var StyledBodyRow = styled(TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
         '&.odd-color:nth-of-type(odd):not(:hover)': {
@@ -1054,7 +1054,7 @@ function typographyColorToSxColor(color) {
     else {
         return color;
     }
-}var TableContextDefaultValue = {
+}var PTableContextDefaultValue = {
     menuOpen: false,
     openMenuId: undefined,
     setMenuOpen: function () { },
@@ -1063,14 +1063,14 @@ function typographyColorToSxColor(color) {
     setItemColumnCommands: function () { },
     setHeadColumnChecked: function () { },
     setHeadColumnCommands: function () { },
-};var TableContext = createContext(TableContextDefaultValue);function useTableState() {
-    var value = useContext(TableContext);
+};var PTableContext = createContext(PTableContextDefaultValue);function useTableState() {
+    var value = useContext(PTableContext);
     if (value === undefined) {
         throw new Error('useFormState should be used within TableContext.Provider');
     }
     return value;
 }var StyledTableCell = styled(TableCell)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  &.ellipsis {\n    position: relative;\n    max-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"], ["\n  &.ellipsis {\n    position: relative;\n    max-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])));
-var TableCommonCell = React__default.forwardRef(function (_a, ref) {
+var PTableCommonCell = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -1224,9 +1224,9 @@ var TableCommonCell = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React__default.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
+    return (React__default.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'PTableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
 });
-var templateObject_1$3;var TableFooterCell = function (_a) {
+var templateObject_1$3;var PTableFooterCell = function (_a) {
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -1243,18 +1243,18 @@ var templateObject_1$3;var TableFooterCell = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React__default.createElement(TableCommonCell, { type: 'head', className: 'TableFooterCell', column: column, defaultAlign: defaultAlign }, data));
-};var TablePagination = function (_a) {
+    return (React__default.createElement(PTableCommonCell, { type: 'head', className: 'PTableFooterCell', column: column, defaultAlign: defaultAlign }, data));
+};var PTablePagination = function (_a) {
     var className = _a.className, style = _a.style, sx = _a.sx, paging = _a.paging, align = _a.align, onChange = _a.onChange;
     return (React__default.createElement(Stack, { alignItems: align },
-        React__default.createElement(Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('TablePagination', className), style: style, sx: sx, onChange: function (e, page) {
+        React__default.createElement(Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('PTablePagination', className), style: style, sx: sx, onChange: function (e, page) {
                 if (onChange)
                     onChange(page);
             } })));
-};var TableContextProvider = function (_a) {
+};var PTableContextProvider = function (_a) {
     var children = _a.children, value = _a.value;
-    return React__default.createElement(TableContext.Provider, { value: value }, children);
-};var TableTopHeadCaptionRow = styled(TableRow)(function (_a) {
+    return React__default.createElement(PTableContext.Provider, { value: value }, children);
+};var PTableTopHeadCaptionRow = styled(TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
         '> th': {
@@ -1263,7 +1263,7 @@ var templateObject_1$3;var TableFooterCell = function (_a) {
             fontWeight: 700,
         },
     });
-});var TableHeadCell = function (_a) {
+});var PTableHeadCell = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -1339,9 +1339,9 @@ var templateObject_1$3;var TableFooterCell = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React__default.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: top !== undefined ? { top: top } : undefined, column: column, defaultAlign: defaultAlign }, data));
+    return (React__default.createElement(PTableCommonCell, { type: 'head', className: 'PTableHeadCell', style: top !== undefined ? { top: top } : undefined, column: column, defaultAlign: defaultAlign }, data));
 };var BottomLine = styled('div')(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"], ["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"])));
-var TableTopHead = function (_a) {
+var PTableTopHead = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -1390,19 +1390,19 @@ var TableTopHead = function (_a) {
     }, [columns, theme.palette.divider]);
     var columnRow = useMemo(function () {
         var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
-        return (React__default.createElement(TableRow, null, columns.map(function (column, idx) { return (React__default.createElement(TableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
+        return (React__default.createElement(TableRow, null, columns.map(function (column, idx) { return (React__default.createElement(PTableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
     }, [captionHeight, columns, defaultAlign, items, onCheckChange, row1Height, row2Height, row3Height]);
     /********************************************************************************************************************
      * Variable
      * ******************************************************************************************************************/
-    var captionRow = !!caption && (React__default.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
+    var captionRow = !!caption && (React__default.createElement(PTableTopHeadCaptionRow, { ref: captionRef, className: 'PTableTopHeadCaptionRow' },
         React__default.createElement(TableCell, { colSpan: columns.length }, caption)));
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
     if (rows) {
         if (Array.isArray(rows[0])) {
-            return (React__default.createElement(TableHead, { className: 'TableHead' },
+            return (React__default.createElement(TableHead, { className: 'PTableHead' },
                 captionRow,
                 rows.map(function (row, idx) {
                     var ref = undefined;
@@ -1423,18 +1423,18 @@ var TableTopHead = function (_a) {
                         case 3:
                             top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
                     }
-                    return (React__default.createElement(TableRow, { key: idx, ref: ref, className: 'TableHeadRow' }, makeRowCells(row, top)));
+                    return (React__default.createElement(TableRow, { key: idx, ref: ref, className: 'PTableHeadRow' }, makeRowCells(row, top)));
                 })));
         }
         else {
-            return (React__default.createElement(TableHead, { className: 'TableHead' },
+            return (React__default.createElement(TableHead, { className: 'PTableHead' },
                 captionRow,
-                React__default.createElement(TableRow, { ref: row1Ref, className: 'TableHeadRow' }, makeRowCells(rows, captionHeight)),
+                React__default.createElement(TableRow, { ref: row1Ref, className: 'PTableHeadRow' }, makeRowCells(rows, captionHeight)),
                 columnRow));
         }
     }
     else {
-        return (React__default.createElement(TableHead, { className: 'TableHead' },
+        return (React__default.createElement(TableHead, { className: 'PTableHead' },
             captionRow,
             columnRow));
     }
@@ -3059,7 +3059,7 @@ function requireDayjs_min () {
 	return dayjs_min$1.exports;
 }var dayjs_minExports = requireDayjs_min();
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);var StyledButtonsBox = styled(Box)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"])));
-var TableBodyCell = React__default.forwardRef(function (_a, ref) {
+var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -3164,7 +3164,7 @@ var TableBodyCell = React__default.forwardRef(function (_a, ref) {
                 }
                 break;
             case 'check':
-                data = (React__default.createElement(Box, { className: 'TableBoxyCell-check-box', onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } },
+                data = (React__default.createElement(Box, { className: 'PTableBoxyCell-check-box', onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } },
                     React__default.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
                             setChecked(newChecked);
                             column.onCheckChange && column.onCheckChange(item, newChecked);
@@ -3172,10 +3172,10 @@ var TableBodyCell = React__default.forwardRef(function (_a, ref) {
                         } })));
                 break;
             case 'button':
-                data = (React__default.createElement(Box, { className: 'TableBoxyCell-button-box', onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } }, data));
+                data = (React__default.createElement(Box, { className: 'PTableBoxyCell-button-box', onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } }, data));
                 break;
             case 'buttons':
-                data = (React__default.createElement(StyledButtonsBox, { className: 'TableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } }, data));
+                data = (React__default.createElement(StyledButtonsBox, { className: 'PTableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } }, data));
                 break;
             case 'img':
                 {
@@ -3186,7 +3186,7 @@ var TableBodyCell = React__default.forwardRef(function (_a, ref) {
                             : function (e) {
                                 e.stopPropagation();
                             } },
-                        React__default.createElement(Tooltip, __assign$2({ className: 'TableBodyCell-tooltip', title: React__default.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
+                        React__default.createElement(Tooltip, __assign$2({ className: 'PTableBodyCell-tooltip', title: React__default.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
                 }
                 break;
             case 'date':
@@ -3228,7 +3228,7 @@ var TableBodyCell = React__default.forwardRef(function (_a, ref) {
                 tooltip = column.onGetTooltip(item, index);
             }
             if (tooltip) {
-                data = (React__default.createElement(Tooltip, __assign$2({ className: 'TableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React__default.isValidElement(data) ? (data.type === React__default.Fragment ? (React__default.createElement("span", null, data)) : (data)) : (React__default.createElement("span", null, data))));
+                data = (React__default.createElement(Tooltip, __assign$2({ className: 'PTableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React__default.isValidElement(data) ? (data.type === React__default.Fragment ? (React__default.createElement("span", null, data)) : (data)) : (React__default.createElement("span", null, data))));
             }
         }
         return data;
@@ -3248,9 +3248,9 @@ var TableBodyCell = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React__default.createElement(TableCommonCell, { ref: ref, type: 'body', className: classNames('TableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
+    return (React__default.createElement(PTableCommonCell, { ref: ref, type: 'body', className: classNames('PTableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
 });
-var templateObject_1$1;var StyledBodyRow = styled(TableRow)(function (_a) {
+var templateObject_1$1;var PStyledBodyRow = styled(TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
         '&.odd-color:nth-of-type(odd):not(:hover)': {
@@ -3261,7 +3261,7 @@ var templateObject_1$1;var StyledBodyRow = styled(TableRow)(function (_a) {
         },
     });
 });
-var TableBodyRow = function (_a) {
+var PTableBodyRow = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -3276,9 +3276,9 @@ var TableBodyRow = function (_a) {
      * Render
      * ******************************************************************************************************************/
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledBodyRow, __assign$2({ className: classNames('TableBodyRow', className), style: sortable
-                ? __assign$2(__assign$2({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React__default.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); }))));
-};var TableSortableBodyBlock = function (_a) {
+        React__default.createElement(PStyledBodyRow, __assign$2({ className: classNames('PTableBodyRow', className), style: sortable
+                ? __assign$2(__assign$2({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React__default.createElement(PTableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); }))));
+};var PTableSortableBodyBlock = function (_a) {
     var items = _a.items, baseIndex = _a.baseIndex, columns = _a.columns, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
     var progressiveVisible = useTableState().progressiveVisible;
     /********************************************************************************************************************
@@ -3304,7 +3304,7 @@ var TableBodyRow = function (_a) {
      * Memo
      * ******************************************************************************************************************/
     var renderItems = useMemo(function () {
-        return !progressiveVisible || inView ? (items.map(function (item, idx) { return (React__default.createElement(TableBodyRow, { key: item.id, id: item.id, index: baseIndex + idx, className: classNames(showOddColor && 'odd-color', showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, baseIndex + idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, baseIndex + idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, baseIndex + idx) : undefined, hover: true, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: columns, item: item, onClick: onClick, onCheckChange: onCheckChange })); })) : (React__default.createElement(TableRow, { ref: canInView ? ref : undefined },
+        return !progressiveVisible || inView ? (items.map(function (item, idx) { return (React__default.createElement(PTableBodyRow, { key: item.id, id: item.id, index: baseIndex + idx, className: classNames(showOddColor && 'odd-color', showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, baseIndex + idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, baseIndex + idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, baseIndex + idx) : undefined, hover: true, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: columns, item: item, onClick: onClick, onCheckChange: onCheckChange })); })) : (React__default.createElement(TableRow, { ref: canInView ? ref : undefined },
             React__default.createElement(TableCell, { colSpan: columns.length, style: { height: progressiveVisible.rowHeight * items.length, border: 'none' } })));
     }, [
         baseIndex,
@@ -3338,7 +3338,7 @@ var TableBodyRow = function (_a) {
         result.push(array.slice(i, i + size));
     }
     return result;
-};var TableSortableBody = function (_a) {
+};var PTableSortableBody = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -3349,10 +3349,10 @@ var TableBodyRow = function (_a) {
      * ******************************************************************************************************************/
     var renderBlock = useMemo(function () {
         if (progressiveVisible) {
-            return (React__default.createElement(React__default.Fragment, null, chunkArray(items, ifUndefined(progressiveVisible.blockSize, 20)).map(function (bItems, index) { return (React__default.createElement(TableSortableBodyBlock, { key: index, items: bItems, baseIndex: index, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: onCheckChange })); })));
+            return (React__default.createElement(React__default.Fragment, null, chunkArray(items, ifUndefined(progressiveVisible.blockSize, 20)).map(function (bItems, index) { return (React__default.createElement(PTableSortableBodyBlock, { key: index, items: bItems, baseIndex: index, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: onCheckChange })); })));
         }
         else {
-            return (React__default.createElement(TableSortableBodyBlock, { items: items, baseIndex: 0, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: onCheckChange }));
+            return (React__default.createElement(PTableSortableBodyBlock, { items: items, baseIndex: 0, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: onCheckChange }));
         }
     }, [
         columns,
@@ -3380,7 +3380,7 @@ var TableBodyRow = function (_a) {
     return v !== undefined && v !== null && v !== false;
 }
 var _columnId = 0;
-var Table = React__default.forwardRef(function (_a, ref) {
+var PTable = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
@@ -3875,10 +3875,10 @@ var Table = React__default.forwardRef(function (_a, ref) {
         return { contentContainerStyle: contentContainerStyle, tableStyle: tableStyle };
     }, [containerHeight, finalPagingHeight, fullHeight, height, isNoData, maxHeight, minHeight]), contentContainerStyle = _q.contentContainerStyle, tableStyle = _q.tableStyle;
     var tableTopHead = useMemo(function () {
-        return finalColumns && (React__default.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
+        return finalColumns && (React__default.createElement(PTableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
     }, [caption, defaultAlign, finalColumns, handleHeadCheckChange, items, topHeadRows]);
     var tableBody = useMemo(function () {
-        return finalColumns && (React__default.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React__default.createElement(TableSortableBody, { items: sortableItems, columns: finalColumns, showOddColor: showOddColor, showEvenColor: showEvenColor, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: handleBodyCheckChange, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnSx: onGetBodyColumnSx, onGetBodyColumnStyle: onGetBodyColumnStyle })) : (React__default.createElement(StyledBodyRow$1, null,
+        return finalColumns && (React__default.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React__default.createElement(PTableSortableBody, { items: sortableItems, columns: finalColumns, showOddColor: showOddColor, showEvenColor: showEvenColor, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: handleBodyCheckChange, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnSx: onGetBodyColumnSx, onGetBodyColumnStyle: onGetBodyColumnStyle })) : (React__default.createElement(StyledBodyRow, null,
             React__default.createElement(TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React__default.createElement(StyledNoDataDiv, null,
                 React__default.createElement("div", null,
                     React__default.createElement(Icon, null, "error")),
@@ -3905,12 +3905,12 @@ var Table = React__default.forwardRef(function (_a, ref) {
         return finalColumns &&
             !isNoData &&
             footer && (React__default.createElement(TableFooter, null,
-            React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })); }))));
+            React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(PTableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })); }))));
     }, [defaultAlign, finalColumns, footer, isNoData, items]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return finalColumns ? (React__default.createElement(TableContextProvider, { value: {
+    return finalColumns ? (React__default.createElement(PTableContextProvider, { value: {
             menuOpen: menuOpen,
             openMenuId: openMenuId,
             progressiveVisible: progressiveVisible,
@@ -3921,20 +3921,20 @@ var Table = React__default.forwardRef(function (_a, ref) {
             setHeadColumnChecked: TableContextSetHeadColumnChecked,
             setHeadColumnCommands: TableContextSetHeadColumnCommands,
         } },
-        React__default.createElement(Paper, { ref: fullHeight ? containerHeightDetector : undefined, className: classNames('Table', className, !!stickyHeader && 'sticky-header', !!fullHeight && 'full-height', !!showOddColor && 'odd-color', !!showEvenColor && 'even-color', !!sortable && 'sortable'), variant: 'outlined', style: style, sx: sx },
+        React__default.createElement(Paper, { ref: fullHeight ? containerHeightDetector : undefined, className: classNames('PTable', className, !!stickyHeader && 'sticky-header', !!fullHeight && 'full-height', !!showOddColor && 'odd-color', !!showEvenColor && 'even-color', !!sortable && 'sortable'), variant: 'outlined', style: style, sx: sx },
             fullHeight ? (React__default.createElement(SimpleBar, { ref: simpleBarRef, style: contentContainerStyle },
                 React__default.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
-                    React__default.createElement(Table$1, { stickyHeader: stickyHeader, sx: tableSx, style: tableStyle },
+                    React__default.createElement(Table, { stickyHeader: stickyHeader, sx: tableSx, style: tableStyle },
                         tableTopHead,
                         tableBody,
                         tableFooter)))) : (React__default.createElement(Box, { style: contentContainerStyle },
                 React__default.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
-                    React__default.createElement(Table$1, { stickyHeader: stickyHeader, sx: tableSx, style: tableStyle },
+                    React__default.createElement(Table, { stickyHeader: stickyHeader, sx: tableSx, style: tableStyle },
                         tableTopHead,
                         tableBody,
                         tableFooter)))),
             finalColumns && paging && paging.total > 0 && (React__default.createElement(Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
-                React__default.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })))))) : null;
+                React__default.createElement(PTablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })))))) : null;
 });var getSearchInfo = function (search) {
     var searchInfo = {};
     if (search) {
@@ -3962,7 +3962,7 @@ var deHash = function () {
         return substring;
     });
     return values;
-};var SearchTable = React__default.forwardRef(function (_a, ref) {
+};var PSearchTable = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
@@ -4026,7 +4026,7 @@ var deHash = function () {
                     var itemCommands = commands.getItem(name);
                     if (itemCommands) {
                         switch (itemCommands.getType()) {
-                            case 'FormCheckbox':
+                            case 'PFormCheckbox':
                                 if (notEmpty(value)) {
                                     var checkCommands = itemCommands;
                                     if (value.toString() === ((_a = itemCommands.getValue()) === null || _a === void 0 ? void 0 : _a.toString())) {
@@ -4037,9 +4037,9 @@ var deHash = function () {
                                     }
                                 }
                                 break;
-                            case 'FormDatePicker':
-                            case 'FormDateTimePicker':
-                            case 'FormTimePicker':
+                            case 'PFormDatePicker':
+                            case 'PFormDateTimePicker':
+                            case 'PFormTimePicker':
                                 {
                                     if (notEmpty(value)) {
                                         var dateCommands = itemCommands;
@@ -4052,7 +4052,7 @@ var deHash = function () {
                                     }
                                 }
                                 break;
-                            case 'FormDateRangePicker':
+                            case 'PFormDateRangePicker':
                                 {
                                     var dateRangePickerCommands = itemCommands;
                                     var fromName = dateRangePickerCommands.getFormValueFromName();
@@ -4078,7 +4078,7 @@ var deHash = function () {
                                     }
                                 }
                                 break;
-                            case 'FormYearRangePicker':
+                            case 'PFormYearRangePicker':
                                 {
                                     var dateRangePickerCommands = itemCommands;
                                     var fromName = dateRangePickerCommands.getFormValueFromName();
@@ -4091,7 +4091,7 @@ var deHash = function () {
                                     }
                                 }
                                 break;
-                            case 'FormMonthPicker':
+                            case 'PFormMonthPicker':
                                 {
                                     var monthCommands = itemCommands;
                                     var yearName = monthCommands.getFormValueYearName();
@@ -4104,7 +4104,7 @@ var deHash = function () {
                                     }
                                 }
                                 break;
-                            case 'FormMonthRangePicker':
+                            case 'PFormMonthRangePicker':
                                 {
                                     var monthRangeCommands = itemCommands;
                                     var fromYearName = monthRangeCommands.getFormValueFromYearName();
@@ -4204,8 +4204,8 @@ var deHash = function () {
                         if (itemCommands) {
                             var resetValue = null;
                             switch (itemCommands.getType()) {
-                                case 'FormDateRangePicker':
-                                case 'FormYearRangePicker':
+                                case 'PFormDateRangePicker':
+                                case 'PFormYearRangePicker':
                                     {
                                         var commands = itemCommands;
                                         var itemName = itemCommands.getName();
@@ -4221,7 +4221,7 @@ var deHash = function () {
                                         }
                                     }
                                     break;
-                                case 'FormMonthPicker':
+                                case 'PFormMonthPicker':
                                     {
                                         var commands = itemCommands;
                                         var itemName = commands.getName();
@@ -4237,7 +4237,7 @@ var deHash = function () {
                                         }
                                     }
                                     break;
-                                case 'FormMonthRangePicker':
+                                case 'PFormMonthRangePicker':
                                     {
                                         var commands = itemCommands;
                                         var itemName = commands.getName();
@@ -4328,7 +4328,7 @@ var deHash = function () {
      * Render
      * ******************************************************************************************************************/
     var searchView = useMemo(function () { return (React__default.createElement(Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
-        React__default.createElement(Search, __assign$2({ color: color }, searchInfo.props, { ref: function (commands) {
+        React__default.createElement(PSearch, __assign$2({ color: color }, searchInfo.props, { ref: function (commands) {
                 if (searchInfo.ref) {
                     if (typeof searchInfo.ref === 'function') {
                         searchInfo.ref(commands);
@@ -4339,13 +4339,13 @@ var deHash = function () {
                 }
                 searchRef.current = commands || undefined;
             }, autoSubmit: true, onSubmit: handleSearchSubmit }),
-            React__default.createElement(SearchGroup, { hidden: true },
-                React__default.createElement(FormHidden, { name: 'page', value: 1 })),
+            React__default.createElement(PSearchGroup, { hidden: true },
+                React__default.createElement(PFormHidden, { name: 'page', value: 1 })),
             searchInfo.searchGroups))); }, [color, handleSearchSubmit, searchInfo]);
     var tableView = useMemo(function () {
         var _a, _b;
         return (React__default.createElement(Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
-            React__default.createElement(Table, __assign$2({}, tableInfo.props, { stickyHeader: stickyHeader || ((_a = tableInfo.props) === null || _a === void 0 ? void 0 : _a.stickyHeader), fullHeight: fullHeight || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.fullHeight), ref: function (commands) {
+            React__default.createElement(PTable, __assign$2({}, tableInfo.props, { stickyHeader: stickyHeader || ((_a = tableInfo.props) === null || _a === void 0 ? void 0 : _a.stickyHeader), fullHeight: fullHeight || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.fullHeight), ref: function (commands) {
                     if (tableInfo.ref) {
                         if (typeof tableInfo.ref === 'function') {
                             tableInfo.ref(commands);
@@ -4357,19 +4357,19 @@ var deHash = function () {
                     tableRef.current = commands || undefined;
                 }, items: tableData === null || tableData === void 0 ? void 0 : tableData.items, paging: tableData === null || tableData === void 0 ? void 0 : tableData.paging, onPageChange: handlePageChange }))));
     }, [fullHeight, handlePageChange, stickyHeader, tableData === null || tableData === void 0 ? void 0 : tableData.items, tableData === null || tableData === void 0 ? void 0 : tableData.paging, tableInfo]);
-    return (React__default.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: fullHeight ? __assign$2(__assign$2({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
+    return (React__default.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('PSearchTable', className), style: fullHeight ? __assign$2(__assign$2({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
         searchView,
         betweenSearchTableComponent && React__default.createElement(Grid, null, betweenSearchTableComponent),
         tableView));
-});var TableButton = React__default.forwardRef(function (_a, ref) {
+});var PTableButton = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, initSx = _a.sx, _b = _a.variant, variant = _b === void 0 ? 'outlined' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest$1(_a, ["children", "className", "sx", "variant", "color", "startIcon", "endIcon", "onClick"]);
-    return (React__default.createElement(PdgButton, __assign$2({ ref: ref, className: classNames(className, 'TableButton'), variant: variant, type: 'button', size: 'small', sx: __assign$2({ minWidth: 0, px: empty(startIcon) && empty(endIcon)
+    return (React__default.createElement(PButton, __assign$2({ ref: ref, className: classNames(className, 'PTableButton'), variant: variant, type: 'button', size: 'small', sx: __assign$2({ minWidth: 0, px: empty(startIcon) && empty(endIcon)
                 ? '7px !important'
                 : empty(children)
                     ? '5px !important'
                     : '7px !important' }, initSx), color: color, startIcon: startIcon, endIcon: endIcon, onClick: onClick }, props), children));
 });
-var TableButton$1 = React__default.memo(TableButton);var TableMenuButton = React__default.forwardRef(function (_a, ref) {
+var PTableButton$1 = React__default.memo(PTableButton);var PTableMenuButton = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * ID
      * ******************************************************************************************************************/
@@ -4449,7 +4449,7 @@ var TableButton$1 = React__default.memo(TableButton);var TableMenuButton = React
      * Render
      * ******************************************************************************************************************/
     return (React__default.createElement("span", null,
-        React__default.createElement(PdgButton, __assign$2({ ref: function (r) {
+        React__default.createElement(PButton, __assign$2({ ref: function (r) {
                 if (ref) {
                     if (typeof ref === 'function') {
                         ref(r);
@@ -4459,8 +4459,8 @@ var TableButton$1 = React__default.memo(TableButton);var TableMenuButton = React
                     }
                 }
                 anchorRef.current = r;
-            }, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: __assign$2({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx), color: color, startIcon: icon, onClick: handleClick }, props), children),
-        React__default.createElement(Popper, { className: 'TableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, function (_a) {
+            }, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'PTableMenuButton'), type: 'button', size: 'small', sx: __assign$2({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx), color: color, startIcon: icon, onClick: handleClick }, props), children),
+        React__default.createElement(Popper, { className: 'PTableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, function (_a) {
             var TransitionProps = _a.TransitionProps, placement = _a.placement;
             var placements = placement.split('-');
             var transformOrigin;
@@ -4520,7 +4520,7 @@ var ValueEllipsis = styled('div')(templateObject_4 || (templateObject_4 = __make
 var ValueClipboard = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
 var ClipboardIconButton = styled(IconButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: -10px;\n  margin-bottom: -10px;\n"], ["\n  margin-top: -10px;\n  margin-bottom: -10px;\n"])));
 var Line = styled('div')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-top: 1px solid #efefef;\n  height: 1px;\n  flex: 1;\n"], ["\n  border-top: 1px solid #efefef;\n  height: 1px;\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;var InfoTable = function (_a) {
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;var PInfoTable = function (_a) {
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -4678,19 +4678,19 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
                 : undefined;
             return item.type === 'divider' ? (React__default.createElement(Grid, { key: idx, size: { xs: 12 } },
                 React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
-                    item.icon && (React__default.createElement(PdgIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
+                    item.icon && (React__default.createElement(PIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
                     item.label && (React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$2(__assign$2({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
                     item.dividerLine && (React__default.createElement(React__default.Fragment, null, item.icon || item.label ? (React__default.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
                         React__default.createElement(Line, null))) : (React__default.createElement(Line, null))))))) : (React__default.createElement(Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
                 React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
-                    item.icon && (React__default.createElement(PdgIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
+                    item.icon && (React__default.createElement(PIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
                     React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$2(__assign$2({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
                 React__default.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign$2(__assign$2(__assign$2({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
                     item.ellipsis || ellipsis ? React__default.createElement(ValueEllipsis, null, data) : React__default.createElement(Value, null, data),
                     item.clipboard && notEmpty(copyToClipboardText) && (React__default.createElement(ValueClipboard, null,
-                        React__default.createElement(PdgCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
+                        React__default.createElement(PCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
                             React__default.createElement(ClipboardIconButton, __assign$2({ size: 'small', color: 'primary' }, item.clipboardProps),
-                                React__default.createElement(PdgIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
+                                React__default.createElement(PIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
         });
     }, [
         dividerColor,
@@ -4709,5 +4709,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React__default.createElement(Grid, { container: true, spacing: spacing, columnSpacing: columnSpacing, rowSpacing: rowSpacing, className: classNames('InfoTable', className), style: style, sx: sx }, content));
-};export{InfoTable,SearchTable,Table,TableButton$1 as TableButton,TableMenuButton};
+    return (React__default.createElement(Grid, { container: true, spacing: spacing, columnSpacing: columnSpacing, rowSpacing: rowSpacing, className: classNames('PInfoTable', className), style: style, sx: sx }, content));
+};export{PInfoTable,PSearchTable,PTable,PTableButton$1 as PTableButton,PTableMenuButton};