venice-ui 2.4.12 → 3.0.1

package/dist/esm/components/Sidepanel/Sidepanel.js

@@ -1,20 +1,30 @@
-import * as ReactDOM from 'react-dom';
-import { ElementHeader } from '../ElementHeader';
+import { resolveThemeWithComponentsConfig } from '../../config';
 import React, { useEffect, useRef } from 'react';
-import { ModalOverlayer } from '../Modal/Modal.styles';
-import { SidepanelElement } from './Sidepanel.styles';
-import { Icon } from '../Icons';
-export const Sidepanel = ({ isOpen, handleClose, children, right = false, overlayer = true, top = 0, iconOptions, }) => {
+import { createPortal } from 'react-dom';
+import { SidepanelContent, SidepanelOverlayer, SidepanelRoot, } from './Sidepanel.styles';
+import { Header } from '../Header';
+import { Icon } from '../Icon';
+export const Sidepanel = ({ isOpen, theme, themeVariant = 'default', children, handleClose, right = false, overlayer = true, top = 0, iconOptions, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const sidepanelConfig = componentsConfig.sidepanel;
     const ref = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
-                handleClose && handleClose();
+            const target = event.target;
+            if (ref.current &&
+                target instanceof Node &&
+                !ref.current.contains(target)) {
+                handleClose();
             }
         };
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
-                handleClose && handleClose();
+                handleClose();
             }
         };
         document.addEventListener('click', handleClickOutside, true);
@@ -23,15 +33,19 @@ export const Sidepanel = ({ isOpen, handleClose, children, right = false, overla
             document.removeEventListener('click', handleClickOutside, true);
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [isOpen]);
-    const modalRoot = document.getElementById('root');
+    }, [isOpen, handleClose]);
+    const header = () => {
+        if (iconOptions) {
+            return (React.createElement(React.Fragment, null, iconOptions.map((icon) => (React.createElement(Icon, { name: icon.iconName, onClick: () => icon.action(), key: icon.iconName })))));
+        }
+        return null;
+    };
     if (isOpen) {
-        return ReactDOM.createPortal(React.createElement(React.Fragment, null,
-            React.createElement(SidepanelElement, { right: right, top: top, ref: ref },
-                React.createElement(ElementHeader, { handleClose: handleClose }, iconOptions &&
-                    iconOptions.map((icon) => (React.createElement(Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
-                children),
-            overlayer && React.createElement(ModalOverlayer, { onClick: handleClose })), modalRoot);
+        return createPortal(React.createElement(React.Fragment, null,
+            React.createElement(SidepanelRoot, { config: sidepanelConfig, right: right, top: top, ref: ref, theme: resolvedTheme },
+                React.createElement(Header, { handleClose: handleClose, header: header() }),
+                React.createElement(SidepanelContent, { config: sidepanelConfig, theme: resolvedTheme }, children)),
+            overlayer && (React.createElement(SidepanelOverlayer, { onClick: handleClose, config: sidepanelConfig, theme: resolvedTheme }))), document.body);
     }
     return null;
 };

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

@@ -1,13 +1,54 @@
-import styled from "styled-components";
-import { Theme } from '../../Theme/Theme';
-export const SidepanelElement = styled.div `
-  height: calc( 100vh - ${p => p.top}px);
+import styled, { keyframes } from 'styled-components';
+const slideInLeft = keyframes `
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+const slideInRight = keyframes `
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+const overlayerFadeIn = keyframes `
+  from { opacity: 0; }
+  to   { opacity: 1; }
+`;
+export const SidepanelRoot = styled.div `
+  height: calc(100vh - ${(p) => p.top}px);
   width: 20rem;
-  background-color: ${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);
+`;
+export const SidepanelContent = styled.div `
+  width: 100%;
+  padding: ${({ config }) => config.size.paddingY}px
+    ${({ config }) => config.size.paddingX}px;
+  box-sizing: border-box;s
+`;
+export const SidepanelOverlayer = styled.div `
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   position: fixed;
-  top: ${p => p.top}px;
-  z-index: 1001;
-  box-shadow: ${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/esm/components/Sort/Sort.js

@@ -1,19 +1,22 @@
 import React from 'react';
-import { mainTheme } from '../../Theme';
-import { Icon } from '../Icons';
-import { SortIcon, SortWrapper } from './Sort.styles';
-export const Sort = ({ theme = mainTheme, handleSort, activeOrder, activeField, }) => {
-    return (React.createElement(SortWrapper, null,
-        React.createElement(SortIcon, { onClick: () => handleSort('desc') },
-            React.createElement(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.createElement(SortIcon, { onClick: () => handleSort('asc') },
-            React.createElement(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 }))));
+import { SortRoot } from './Sort.styles';
+import { Icon } from '../Icon';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { ThemeProvider } from 'styled-components';
+export const Sort = ({ theme, themeVariant = 'default', handleSort, activeOrder, activeField, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const tableConfig = componentsConfig.table;
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(SortRoot, null,
+            React.createElement(Icon, { size: "xs", name: 'sort_up', onClick: () => handleSort('desc'), color: activeField && activeOrder === 'desc'
+                    ? tableConfig.color.active.header.sortIcon
+                    : tableConfig.color.default.header.sortIcon }),
+            React.createElement(Icon, { name: 'sort_down', size: "xs", onClick: () => handleSort('asc'), color: activeField && activeOrder === 'asc'
+                    ? tableConfig.color.active.header.sortIcon
+                    : tableConfig.color.default.header.sortIcon }))));
 };

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

@@ -1,21 +1,7 @@
-import { mainTheme } from '../../Theme';
 import styled from 'styled-components';
-export const SortWrapper = styled.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;
-`;
-export const SortIcon = styled.div `
-  display: flex;
+export const SortRoot = styled.div `
+  dissplay: flex;
   align-items: center;
-  :hover {
-    background-color: ${mainTheme.iconBgHoverColor};
-  }
+  justify-content: center;
+  flex-direction: column;
 `;

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

@@ -1,26 +1,36 @@
 import React from 'react';
-import { OptionTableCell, OptionTableCellWrapper, TableCell, } from './Table.styles';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { OptionTableCell, OptionTableCellWrapper, TableCell, TableCellContent, } from './Table.styles';
 import { DropdownMenu } from '../DropdownMenu';
-import { mainTheme } from '../../Theme';
-import { format } from 'date-fns';
 import { getValueFormScope } from './tableHelper';
-export const Cell = ({ header, theme = mainTheme, moreActions, item, marked = false, isDisabled = false, }) => {
+import { format } from 'date-fns';
+export const Cell = ({ theme, themeVariant = 'default', header, moreActions, item, selected = false, isDisabled = false, }) => {
+    const resolvedThemeData = 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.createElement(OptionTableCell, null,
+        return (React.createElement(OptionTableCell, { theme: resolvedTheme, config: tableConfig },
             React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                React.createElement(DropdownMenu, { options: cellAction, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))));
+                React.createElement(DropdownMenu, { options: cellAction, targetID: item.id }))));
     }
     if (header.scope) {
-        return (React.createElement(TableCell, { marked: marked, disabled: isDisabled }, getValueFormScope(item[header.valueSource], header.scope)));
+        return (React.createElement(TableCell, { size: cellSize, selected: selected, theme: resolvedTheme, config: tableConfig },
+            React.createElement(TableCellContent, { theme: resolvedTheme, config: tableConfig, disabled: isDisabled }, getValueFormScope(item[header.valueSource], header.scope))));
     }
-    return (React.createElement(TableCell, { marked: marked, disabled: isDisabled }, header.date
-        ? item[header.valueSource] !== undefined
-            ? format(item[header.valueSource], 'dd-MM-yyyy')
-            : ''
-        : header.isCount
-            ? item[header.valueSource].length
-            : item[header.valueSource]));
+    return (React.createElement(TableCell, { size: cellSize, selected: selected, theme: resolvedTheme, config: tableConfig },
+        React.createElement(TableCellContent, { theme: resolvedTheme, config: tableConfig, disabled: isDisabled }, header.date
+            ? item[header.valueSource] !== undefined
+                ? format(item[header.valueSource], 'dd-MM-yyyy')
+                : ''
+            : header.isCount
+                ? item[header.valueSource].length
+                : item[header.valueSource])));
 };

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

@@ -1,16 +1,23 @@
 import React from 'react';
-import { OptionTableHeaderCell, TableHeaderCell } from './Table.styles';
-import { mainTheme } from '../../Theme';
+import { HeaderCellContent, OptionTableHeaderCell, TableHeaderCell, } from './Table.styles';
+import { resolveThemeWithComponentsConfig } from '../../config';
 import { Sort } from '../Sort';
-export const HeaderCell = ({ header, sortable, handleSort, theme = mainTheme, sort, }) => {
+export const HeaderCell = ({ header, sortable, handleSort, theme, themeVariant = 'default', sort, size = 'md', }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const tableConfig = componentsConfig.table;
     if (header.action) {
-        return React.createElement(OptionTableHeaderCell, null);
+        return React.createElement(OptionTableHeaderCell, { theme: resolvedTheme, config: tableConfig });
     }
     const setSort = (order) => {
-        console.log('setSort', order);
         handleSort(header.valueSource, order);
     };
-    return (React.createElement(TableHeaderCell, { sortable: sortable, isSorted: sort.name === header.valueSource && sort.order !== 'none' },
-        header.name,
-        sortable && React.createElement(Sort, { handleSort: setSort, activeOrder: sort.order, activeField: sort.name === header.valueSource })));
+    return (React.createElement(TableHeaderCell, { theme: resolvedTheme, config: tableConfig, size: size },
+        React.createElement(HeaderCellContent, { isSorted: sort.name === header.valueSource && sort.order !== 'none', theme: resolvedTheme, config: tableConfig },
+            header.name,
+            sortable && (React.createElement(Sort, { handleSort: setSort, activeOrder: sort.order, activeField: sort.name === header.valueSource })))));
 };

package/dist/esm/components/Table/Table.js

@@ -1,17 +1,24 @@
-import React, { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { TableHead, TableRow, TableWrapper } from './Table.styles';
-import { mainTheme } from '../../Theme';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { applySort, setSortParams } from './tableHelper';
+import { wordbook } from '../../config';
+import { ThemeProvider } from 'styled-components';
+import { HeaderSection, TableBody, TableContent, TableContentWrapper, TableHead, TableHeader, TableHeaderRow, TableRoot, TableRow, } from './Table.styles';
+import { Filters } from '../Filters';
+import { Pagination } from '../Pagination';
 import { HeaderCell } from './HeaderCell';
 import { Cell } from './Cell';
-import { Pagination } from '../Pagination';
-import { Filters } from '../Filters';
-import { TextAccent } from '../Typography';
-export const Table = ({ theme = mainTheme, headers, elements, hover = true, selectable = true, filtrable = false, sortable = true, sort = {
+export 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 = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const tableConfig = componentsConfig.table;
     const initialElementsRef = useRef(null);
     useEffect(() => {
         if (!initialElementsRef.current &&
@@ -32,6 +39,7 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
                 name: 'option',
                 valueSource: 'empty',
                 action: true,
+                size: 'sm',
             });
         }
         return tableHeaders;
@@ -79,7 +87,7 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
         }));
         setCurrentPage(1);
         setNoResultsMessage(filteredElements && filteredElements.length === 0
-            ? 'Nie ma żadnych wyników'
+            ? wordbook.table.filterEmptyState
             : null);
     }, [setCurrentPage, setTableProps]);
     const [filtersClearSignal, setFiltersClearSignal] = useState(0);
@@ -98,35 +106,36 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
         setNoResultsMessage(null);
     }, [elements, setCurrentPage, setNoResultsMessage]);
     const tableElements = useMemo(() => {
-        if (ifPagination) {
+        if (pagination) {
             return paginatedElements;
         }
         return tableProps.elements;
-    }, [ifPagination, paginatedElements, tableProps.elements]);
-    return (React.createElement(ThemeProvider, { theme: theme },
-        filtrable && (React.createElement("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: 12,
-                marginBottom: 12,
-            } },
-            React.createElement(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.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
-            React.createElement(TableHead, null,
-                React.createElement(TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
-            React.createElement("tbody", null, tableElements.map((item) => {
-                return (React.createElement(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.createElement(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.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } },
-            React.createElement(TextAccent, null, noResultsMessage))),
-        ifPagination && (React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize }))));
+    }, [pagination, paginatedElements, tableProps.elements]);
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(TableRoot, null,
+            React.createElement(React.Fragment, null,
+                (filtrable || pagination) && (React.createElement(TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
+                    React.createElement(React.Fragment, null,
+                        filtrable && (React.createElement(HeaderSection, null,
+                            React.createElement(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.createElement(HeaderSection, null,
+                            React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize })))))),
+                React.createElement(TableContentWrapper, null,
+                    React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
+                        React.createElement(TableHead, null,
+                            React.createElement(TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort, size: header.size || 'md' }))))),
+                        React.createElement(TableBody, null, tableElements.map((item) => {
+                            return (React.createElement(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.createElement(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.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } }, noResultsMessage))))));
 };

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

@@ -1,69 +1,169 @@
 import styled from 'styled-components';
-export const TableWrapper = styled.table `
+export const TableRoot = styled.div `
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`;
+export const TableHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
+  height: ${({ theme, config }) => config.size.header.height}px;
+`;
+export const TableContentWrapper = styled.div `
+  display: flex;
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  max-width: 100vw;
+  overflow-y: hidden;
+  overflow-x: auto;
+  height: 100%;
+`;
+export const HeaderSection = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 50%;
+`;
+export const TableContent = styled.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;
 `;
 export const TableHead = styled.thead `
+  box-sizing: border-box;
   tr:first-child {
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: 0;
   }
 `;
+export const TableBody = styled.tbody `
+  box-sizing: border-box;
+`;
+export const TableHeaderRow = styled.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;
+`;
 export const TableHeaderCell = styled.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;
+`;
+export const HeaderCellContent = styled.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%;
 `;
 export const OptionTableHeaderCell = styled.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;
+`;
+export const IconTableHeaderCell = styled.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;
+`;
+export const OptionTableCell = styled.td `
+  text-align: center;
+  border-bottom: 1px solid
+    ${({ theme, config }) => config.color.default.common.border};
+  width: ${({ config }) => config.size.cell.sizes.option.width}px;
+`;
+export const OptionTableCellWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 `;
 export const TableRow = styled.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};
+      }
   }
   `}
 `;
 export const TableCell = styled.td `
-  padding: 8px;
-  ${(p) => p.marked &&
-    `
-    border-left:2px solid ${p.theme.action};
-    padding-left:6px;
-    `}
-  ${p => p.disabled && `
-    color: ${p.theme.inputDisabledTextColor}!important;
-  `}
-`;
-export const OptionTableCell = styled.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};
 `;
-export const OptionTableCellWrapper = styled.div `
-  width: 40px;
+export const TableCellContent = styled.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/esm/components/Table/index.js

@@ -1 +1,3 @@
 export * from './Table';
+export * from './Cell';
+export * from './HeaderCell';

package/dist/esm/components/Tag/Tag.js

@@ -0,0 +1,17 @@
+import { resolveThemeWithComponentsConfig } from '../../config';
+import React from 'react';
+import { TagRoot } from './Tag.styles';
+import { Icon } from '../Icon';
+export const Tag = ({ theme, themeVariant, size = 'md', label, mode = 'default', handleClose, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const dropdownMenuConfig = componentsConfig.tag;
+    const iconSize = dropdownMenuConfig.size[size].iconSize || 'xs';
+    return (React.createElement(TagRoot, { size: size, theme: resolvedTheme, config: dropdownMenuConfig, mode: mode },
+        label,
+        React.createElement(Icon, { name: "close", color: "currentColor", hoverBackground: "transparent", size: iconSize, onClick: handleClose, hoverColor: "currentColor" })));
+};