venice-ui 2.4.12 → 3.0.1

package/dist/cjs/components/Sidepanel/Sidepanel.styles.js

@@ -1,19 +1,90 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidepanelElement = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme/Theme");
-exports.SidepanelElement = styled_components_1.default.div `
-  height: calc( 100vh - ${p => p.top}px);
+exports.SidepanelOverlayer = exports.SidepanelContent = exports.SidepanelRoot = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const slideInLeft = (0, styled_components_1.keyframes) `
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+const slideInRight = (0, styled_components_1.keyframes) `
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+const overlayerFadeIn = (0, styled_components_1.keyframes) `
+  from { opacity: 0; }
+  to   { opacity: 1; }
+`;
+exports.SidepanelRoot = styled_components_1.default.div `
+  height: calc(100vh - ${(p) => p.top}px);
   width: 20rem;
-  background-color: ${Theme_1.Theme.colors.white};
+  background-color: ${({ config }) => config.color.background};
+  position: fixed;
+  top: ${(p) => p.top}px;
+  z-index: ${({ config }) => config.size.zIndex};
+  box-shadow: ${({ config }) => config.color.shadow};
+  ${(p) => (p.right ? `right:0;` : 'left:0;')}
+  display: flex;
+  flex-direction: column;
+  animation: ${(p) => (p.right ? slideInRight : slideInLeft)} 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+`;
+exports.SidepanelContent = styled_components_1.default.div `
+  width: 100%;
+  padding: ${({ config }) => config.size.paddingY}px
+    ${({ config }) => config.size.paddingX}px;
+  box-sizing: border-box;s
+`;
+exports.SidepanelOverlayer = styled_components_1.default.div `
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   position: fixed;
-  top: ${p => p.top}px;
-  z-index: 1001;
-  box-shadow: ${Theme_1.Theme.shadow.m};
-  ${p => p.right ? `right:0;` : 'left:0;'}
-
+    background-color: ${({ config, theme }) => config.color.overlayer};
+  z-index: ${({ config, theme }) => config.size.overlayerZIndex};
+  animation: ${overlayerFadeIn} 200ms ease-out;
 `;

package/dist/cjs/components/Sort/Sort.js

@@ -5,22 +5,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sort = void 0;
 const react_1 = __importDefault(require("react"));
-const Theme_1 = require("../../Theme");
-const Icons_1 = require("../Icons");
 const Sort_styles_1 = require("./Sort.styles");
-const Sort = ({ theme = Theme_1.mainTheme, handleSort, activeOrder, activeField, }) => {
-    return (react_1.default.createElement(Sort_styles_1.SortWrapper, null,
-        react_1.default.createElement(Sort_styles_1.SortIcon, { onClick: () => handleSort('desc') },
-            react_1.default.createElement(Icons_1.Icon, { name: 'sort_up', iconColor: activeField && activeOrder === 'desc'
-                    ? theme.tableCellSortIconActive
-                    : theme.tableCellSortIcon, size: 14, noPadding: true, iconBgHoverColor: "transparent", iconHoverColor: activeField && activeOrder === 'deasc'
-                    ? theme.tableCellSortIconActive
-                    : theme.tableCellSortIcon })),
-        react_1.default.createElement(Sort_styles_1.SortIcon, { onClick: () => handleSort('asc') },
-            react_1.default.createElement(Icons_1.Icon, { name: 'sort_down', iconColor: activeField && activeOrder === 'asc'
-                    ? theme.tableCellSortIconActive
-                    : theme.tableCellSortIcon, size: 14, noPadding: true, iconBgHoverColor: "transparent", iconHoverColor: activeField && activeOrder === 'asc'
-                    ? theme.tableCellSortIconActive
-                    : theme.tableCellSortIcon }))));
+const Icon_1 = require("../Icon");
+const config_1 = require("../../config");
+const styled_components_1 = require("styled-components");
+const Sort = ({ theme, themeVariant = 'default', handleSort, activeOrder, activeField, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const tableConfig = componentsConfig.table;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Sort_styles_1.SortRoot, null,
+            react_1.default.createElement(Icon_1.Icon, { size: "xs", name: 'sort_up', onClick: () => handleSort('desc'), color: activeField && activeOrder === 'desc'
+                    ? tableConfig.color.active.header.sortIcon
+                    : tableConfig.color.default.header.sortIcon }),
+            react_1.default.createElement(Icon_1.Icon, { name: 'sort_down', size: "xs", onClick: () => handleSort('asc'), color: activeField && activeOrder === 'asc'
+                    ? tableConfig.color.active.header.sortIcon
+                    : tableConfig.color.default.header.sortIcon }))));
 };
 exports.Sort = Sort;

package/dist/cjs/components/Sort/Sort.styles.js

@@ -3,25 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortIcon = exports.SortWrapper = void 0;
-const Theme_1 = require("../../Theme");
+exports.SortRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.SortWrapper = styled_components_1.default.div `
-  width:1.6rem;
-  height: 32px;
-  position: absolute;
-  right: 0;
-  transition: 300ms;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items:center;
-`;
-exports.SortIcon = styled_components_1.default.div `
-  display: flex;
+exports.SortRoot = styled_components_1.default.div `
+  dissplay: flex;
   align-items: center;
-  :hover {
-    background-color: ${Theme_1.mainTheme.iconBgHoverColor};
-  }
+  justify-content: center;
+  flex-direction: column;
 `;

package/dist/cjs/components/Table/Cell.js

@@ -5,29 +5,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cell = void 0;
 const react_1 = __importDefault(require("react"));
+const config_1 = require("../../config");
 const Table_styles_1 = require("./Table.styles");
 const DropdownMenu_1 = require("../DropdownMenu");
-const Theme_1 = require("../../Theme");
-const date_fns_1 = require("date-fns");
 const tableHelper_1 = require("./tableHelper");
-const Cell = ({ header, theme = Theme_1.mainTheme, moreActions, item, marked = false, isDisabled = false, }) => {
+const date_fns_1 = require("date-fns");
+const Cell = ({ theme, themeVariant = 'default', header, moreActions, item, selected = false, isDisabled = false, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const tableConfig = componentsConfig.table;
+    const cellSize = header.size || 'md';
     if (header.action) {
         const cellAction = item.disabled
             ? moreActions.map((a) => ({ ...a, disabled: true }))
             : moreActions.map((a) => ({ ...a }));
-        return (react_1.default.createElement(Table_styles_1.OptionTableCell, null,
+        return (react_1.default.createElement(Table_styles_1.OptionTableCell, { theme: resolvedTheme, config: tableConfig },
             react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: cellAction, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))));
+                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: cellAction, targetID: item.id }))));
     }
     if (header.scope) {
-        return (react_1.default.createElement(Table_styles_1.TableCell, { marked: marked, disabled: isDisabled }, (0, tableHelper_1.getValueFormScope)(item[header.valueSource], header.scope)));
+        return (react_1.default.createElement(Table_styles_1.TableCell, { size: cellSize, selected: selected, theme: resolvedTheme, config: tableConfig },
+            react_1.default.createElement(Table_styles_1.TableCellContent, { theme: resolvedTheme, config: tableConfig, disabled: isDisabled }, (0, tableHelper_1.getValueFormScope)(item[header.valueSource], header.scope))));
     }
-    return (react_1.default.createElement(Table_styles_1.TableCell, { marked: marked, disabled: isDisabled }, header.date
-        ? item[header.valueSource] !== undefined
-            ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
-            : ''
-        : header.isCount
-            ? item[header.valueSource].length
-            : item[header.valueSource]));
+    return (react_1.default.createElement(Table_styles_1.TableCell, { size: cellSize, selected: selected, theme: resolvedTheme, config: tableConfig },
+        react_1.default.createElement(Table_styles_1.TableCellContent, { theme: resolvedTheme, config: tableConfig, disabled: isDisabled }, header.date
+            ? item[header.valueSource] !== undefined
+                ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
+                : ''
+            : header.isCount
+                ? item[header.valueSource].length
+                : item[header.valueSource])));
 };
 exports.Cell = Cell;

package/dist/cjs/components/Table/HeaderCell.js

@@ -6,18 +6,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderCell = void 0;
 const react_1 = __importDefault(require("react"));
 const Table_styles_1 = require("./Table.styles");
-const Theme_1 = require("../../Theme");
+const config_1 = require("../../config");
 const Sort_1 = require("../Sort");
-const HeaderCell = ({ header, sortable, handleSort, theme = Theme_1.mainTheme, sort, }) => {
+const HeaderCell = ({ header, sortable, handleSort, theme, themeVariant = 'default', sort, size = 'md', }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const tableConfig = componentsConfig.table;
     if (header.action) {
-        return react_1.default.createElement(Table_styles_1.OptionTableHeaderCell, null);
+        return react_1.default.createElement(Table_styles_1.OptionTableHeaderCell, { theme: resolvedTheme, config: tableConfig });
     }
     const setSort = (order) => {
-        console.log('setSort', order);
         handleSort(header.valueSource, order);
     };
-    return (react_1.default.createElement(Table_styles_1.TableHeaderCell, { sortable: sortable, isSorted: sort.name === header.valueSource && sort.order !== 'none' },
-        header.name,
-        sortable && react_1.default.createElement(Sort_1.Sort, { handleSort: setSort, activeOrder: sort.order, activeField: sort.name === header.valueSource })));
+    return (react_1.default.createElement(Table_styles_1.TableHeaderCell, { theme: resolvedTheme, config: tableConfig, size: size },
+        react_1.default.createElement(Table_styles_1.HeaderCellContent, { isSorted: sort.name === header.valueSource && sort.order !== 'none', theme: resolvedTheme, config: tableConfig },
+            header.name,
+            sortable && (react_1.default.createElement(Sort_1.Sort, { handleSort: setSort, activeOrder: sort.order, activeField: sort.name === header.valueSource })))));
 };
 exports.HeaderCell = HeaderCell;

package/dist/cjs/components/Table/Table.js

@@ -15,29 +15,46 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
+const config_1 = require("../../config");
 const react_1 = __importStar(require("react"));
+const tableHelper_1 = require("./tableHelper");
+const config_2 = require("../../config");
 const styled_components_1 = require("styled-components");
 const Table_styles_1 = require("./Table.styles");
-const Theme_1 = require("../../Theme");
-const tableHelper_1 = require("./tableHelper");
+const Filters_1 = require("../Filters");
+const Pagination_1 = require("../Pagination");
 const HeaderCell_1 = require("./HeaderCell");
 const Cell_1 = require("./Cell");
-const Pagination_1 = require("../Pagination");
-const Filters_1 = require("../Filters");
-const Typography_1 = require("../Typography");
-const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, selectable = true, filtrable = false, sortable = true, sort = {
+const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, filterLabels, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const tableConfig = componentsConfig.table;
     const initialElementsRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (!initialElementsRef.current &&
@@ -58,6 +75,7 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
                 name: 'option',
                 valueSource: 'empty',
                 action: true,
+                size: 'sm',
             });
         }
         return tableHeaders;
@@ -105,7 +123,7 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
         }));
         setCurrentPage(1);
         setNoResultsMessage(filteredElements && filteredElements.length === 0
-            ? 'Nie ma żadnych wyników'
+            ? config_2.wordbook.table.filterEmptyState
             : null);
     }, [setCurrentPage, setTableProps]);
     const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
@@ -124,36 +142,37 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
         setNoResultsMessage(null);
     }, [elements, setCurrentPage, setNoResultsMessage]);
     const tableElements = (0, react_1.useMemo)(() => {
-        if (ifPagination) {
+        if (pagination) {
             return paginatedElements;
         }
         return tableProps.elements;
-    }, [ifPagination, paginatedElements, tableProps.elements]);
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        filtrable && (react_1.default.createElement("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: 12,
-                marginBottom: 12,
-            } },
-            react_1.default.createElement(Filters_1.Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current &&
-                    initialElementsRef.current.length > 0
-                    ? initialElementsRef.current
-                    : elements, fullElements: initialElementsRef.current &&
-                    initialElementsRef.current.length > 0
-                    ? initialElementsRef.current
-                    : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
-        react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
-            react_1.default.createElement(Table_styles_1.TableHead, null,
-                react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
-            react_1.default.createElement("tbody", null, tableElements.map((item) => {
-                return (react_1.default.createElement(Table_styles_1.TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
-                    return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0, isDisabled: item.disabled }));
-                })));
-            }))),
-        noResultsMessage && (react_1.default.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } },
-            react_1.default.createElement(Typography_1.TextAccent, null, noResultsMessage))),
-        ifPagination && (react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize }))));
+    }, [pagination, paginatedElements, tableProps.elements]);
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Table_styles_1.TableRoot, null,
+            react_1.default.createElement(react_1.default.Fragment, null,
+                (filtrable || pagination) && (react_1.default.createElement(Table_styles_1.TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        filtrable && (react_1.default.createElement(Table_styles_1.HeaderSection, null,
+                            react_1.default.createElement(Filters_1.Filters, { labels: filterLabels, headers: headers, elements: initialElementsRef.current &&
+                                    initialElementsRef.current.length > 0
+                                    ? initialElementsRef.current
+                                    : elements, fullElements: initialElementsRef.current &&
+                                    initialElementsRef.current.length > 0
+                                    ? initialElementsRef.current
+                                    : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
+                        pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, null,
+                            react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize })))))),
+                react_1.default.createElement(Table_styles_1.TableContentWrapper, null,
+                    react_1.default.createElement(Table_styles_1.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
+                        react_1.default.createElement(Table_styles_1.TableHead, null,
+                            react_1.default.createElement(Table_styles_1.TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort, size: header.size || 'md' }))))),
+                        react_1.default.createElement(Table_styles_1.TableBody, null, tableElements.map((item) => {
+                            return (react_1.default.createElement(Table_styles_1.TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
+                                    ? () => handleRowClick(item.id)
+                                    : undefined }, tableProps.headers.map((header, index) => {
+                                return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }));
+                            })));
+                        })))),
+                noResultsMessage && (react_1.default.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } }, noResultsMessage))))));
 };
 exports.Table = Table;

package/dist/cjs/components/Table/Table.styles.js

@@ -3,73 +3,173 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionTableCellWrapper = exports.OptionTableCell = exports.TableCell = exports.TableRow = exports.OptionTableHeaderCell = exports.TableHeaderCell = exports.TableHead = exports.TableWrapper = void 0;
+exports.TableCellContent = exports.TableCell = exports.TableRow = exports.OptionTableCellWrapper = exports.OptionTableCell = exports.IconTableHeaderCell = exports.OptionTableHeaderCell = exports.HeaderCellContent = exports.TableHeaderCell = exports.TableHeaderRow = exports.TableBody = exports.TableHead = exports.TableContent = exports.HeaderSection = exports.TableContentWrapper = exports.TableHeader = exports.TableRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.TableWrapper = styled_components_1.default.table `
+exports.TableRoot = styled_components_1.default.div `
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`;
+exports.TableHeader = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
+  height: ${({ theme, config }) => config.size.header.height}px;
+`;
+exports.TableContentWrapper = styled_components_1.default.div `
+  display: flex;
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  max-width: 100vw;
+  overflow-y: hidden;
+  overflow-x: auto;
+  height: 100%;
+`;
+exports.HeaderSection = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 50%;
+`;
+exports.TableContent = styled_components_1.default.table `
+  box-sizing: border-box;
+  display: block;
   width: 100%;
+  min-width: max-content;
+  overflow-x: auto;
+  overflow-y: auto;
+  height: 100%;
+  //   border: 1px solid ${({ theme, config }) => config.color.default.common.border};
+  border-radius: ${({ theme, config }) => config.size.common.borderRadius}px;
+  border-collapse: separate;
+  border-spacing: 0;
 `;
 exports.TableHead = styled_components_1.default.thead `
+  box-sizing: border-box;
   tr:first-child {
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: 0;
   }
 `;
+exports.TableBody = styled_components_1.default.tbody `
+  box-sizing: border-box;
+`;
+exports.TableHeaderRow = styled_components_1.default.tr `
+  background-color: ${({ theme, config }) => config.color.default.common.background};
+  height: ${({ theme, config }) => config.size.header.height}px;
+  color: ${({ theme, config }) => config.color.default.header.text};
+  box-sizing: border-box;
+`;
 exports.TableHeaderCell = styled_components_1.default.th `
-  font-weight: normal;
+  box-sizing: border-box;
+  border-bottom: 1px solid
+    ${({ theme, config }) => config.color.default.header.border};
+  position: relative;
+  width: 100%;
+  min-width: ${({ config, size }) => config.size.cell.sizes[size || 'md'].width}px;
+`;
+exports.HeaderCellContent = styled_components_1.default.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 ${({ config }) => config.size.cell.common.paddingX}px;
+  font-size: ${({ theme, config }) => config.size.header.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.header.lineHeight}px;
   text-align: left;
-  padding: 8px;
   transition: 300ms;
-  font-size: 14px;
-  color: ${(p) => (p.isSorted ? p.theme.tableHeaderActive : p.theme.text)};
-  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
-  position: relative;
+  color: ${({ theme, config, isSorted }) => isSorted
+    ? config.color.active.header.textHeader
+    : config.color.default.header.text};
+  width: 100%;
 `;
 exports.OptionTableHeaderCell = styled_components_1.default.th `
-  font-weight: bold;
   text-align: left;
-  width: 28px;
+  font-size: ${({ theme, config }) => config.size.header.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.header.lineHeight}px;
+  font-weight: 500;
+  transition: 300ms;
+  color: ${({ theme, config }) => config.color.default.header.text};
+  border-bottom: 1px solid
+    ${({ theme, config }) => config.color.default.header.border};
+  position: relative;
+  width: ${({ config }) => config.size.cell.sizes.option.width}px;
+`;
+exports.IconTableHeaderCell = styled_components_1.default.th `
+  text-align: left;
+  font-size: ${({ theme, config }) => config.size.header.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.header.lineHeight}px;
+  font-weight: 500;
   transition: 300ms;
-  font-size: 14px;
-  background-color: ${(p) => p.theme.tableHeaderBackground};
-  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+  color: ${({ theme, config }) => config.color.default.header.text};
+  border-bottom: 1px solid
+    ${({ theme, config }) => config.color.default.header.border};
+  position: relative;
+  width: ${({ config }) => config.size.cell.sizes.icon.width}px;
+`;
+exports.OptionTableCell = styled_components_1.default.td `
+  text-align: center;
+  border-bottom: 1px solid
+    ${({ theme, config }) => config.color.default.common.border};
+  width: ${({ config }) => config.size.cell.sizes.option.width}px;
+`;
+exports.OptionTableCellWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 `;
 exports.TableRow = styled_components_1.default.tr `
-  background-color: ${(p) => p.active
-    ? p.theme.tableCellActiveBackground
-    : p.theme.tableCellEvenBackground};
-  :nth-child(odd) {
-    background-color: ${(p) => p.active
-    ? p.theme.tableCellActiveBackground
-    : p.theme.tableCellBackground};
-    transition: 300ms;
+  height: ${({ theme, config }) => config.size.header.height}px;
+  ${({ selectable, onClick, isDisabled }) => selectable || onClick
+    ? isDisabled
+        ? 'cursor: not-allowed;'
+        : 'cursor:pointer;'
+    : ''}
+
+  > td {
+    background-color: ${({ config, active }) => active
+    ? config.color.active.background
+    : config.color.default.common.background};
   }
-  ${(p) => (p.selectable || p.onClick) &&
-    `
-  cursor:pointer;`}
-  ${(p) => p.hover &&
-    `
-  :hover{
-    background-color:${p.theme.tableCellHoverBackground};
 
+  ${({ hover, active, config, isDisabled }) => hover &&
+    !isDisabled &&
+    `
+    :hover {
+      > td {
+        background-color: ${active
+        ? config.color.hover.activeBackground
+        : config.color.hover.background};
+      }
   }
   `}
 `;
 exports.TableCell = styled_components_1.default.td `
-  padding: 8px;
-  ${(p) => p.marked &&
-    `
-    border-left:2px solid ${p.theme.action};
-    padding-left:6px;
-    `}
-  ${p => p.disabled && `
-    color: ${p.theme.inputDisabledTextColor}!important;
-  `}
-`;
-exports.OptionTableCell = styled_components_1.default.td `
-  text-align: center;
+  box-sizing: border-box;
+  border-bottom: 1px solid
+    ${({ theme, config }) => config.color.default.common.border};
+  position: relative;
+  width: 100%;
+  min-width: ${({ config, size }) => config.size.cell.sizes[size || 'md'].width}px;
+  background-color: ${({ theme, config, selected }) => selected
+    ? config.color.active.background
+    : config.color.default.common.background};
 `;
-exports.OptionTableCellWrapper = styled_components_1.default.div `
-  width: 40px;
+exports.TableCellContent = styled_components_1.default.div `
+  box-sizing: border-box;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 ${({ config }) => config.size.cell.common.paddingX}px;
+  font-size: ${({ theme, config }) => config.size.header.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.header.lineHeight}px;
+  text-align: left;
+  font-weight: 500;
+  transition: 300ms;
+  color: ${({ theme, config, disabled }) => disabled ? config.color.disabled.text : config.color.default.header.text};
+  width: 100%;
 `;

package/dist/cjs/components/Table/index.js

@@ -15,3 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Table"), exports);
+__exportStar(require("./Cell"), exports);
+__exportStar(require("./HeaderCell"), exports);