venice-ui 1.0.42 → 1.0.45

package/dist/cjs/Theme/Theme.js

@@ -12,6 +12,7 @@ exports.Theme = {
         black: "#333333",
         gray_1: "#b7b7b7",
         gray_2: "#e3e3e3",
+        gray_3: '#f3f3f3',
         overlayer: 'rgba(0,0,0,0.4)',
         red: '#ad1616'
     },
@@ -79,5 +80,17 @@ exports.mainTheme = {
     contentBackground: exports.Theme.colors.white,
     // selector / dropdown
     optionActiveColor: exports.Theme.colors.primary,
-    optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary)
+    optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
+    //table
+    tableBorderColor: exports.Theme.colors.gray_2,
+    tableHeaderBackground: exports.Theme.colors.white,
+    tableHeaderActiveBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
+    tableCellBackground: exports.Theme.colors.white,
+    tableCellEvenBackground: exports.Theme.colors.gray_3,
+    tableCellHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
+    tableCellActiveBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
+    tableCellSortIcon: exports.Theme.colors.primary,
+    // chips
+    chipsNeutralBackground: exports.Theme.colors.primary,
+    chipsNeutralTextColor: exports.Theme.colors.white
 };

package/dist/cjs/components/Chips/Chips.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chips = void 0;
+const Aligment_1 = require("../Aligment");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = require("styled-components");
+const Theme_1 = require("../../Theme");
+const Chips_styles_1 = require("./Chips.styles");
+const Icons_1 = require("../Icons");
+const Chips = ({ theme = Theme_1.mainTheme, label, handleClose, }) => {
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Chips_styles_1.ChipsElement, { onClick: () => handleClose() },
+            react_1.default.createElement(Aligment_1.Aligment, { gap: 4 },
+                react_1.default.createElement(Chips_styles_1.ChipsLabel, null, label),
+                react_1.default.createElement(Icons_1.Icon, { name: 'close', color: theme.chipsNeutralTextColor, size: 14 })))));
+};
+exports.Chips = Chips;

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChipsLabel = exports.ChipsElement = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.ChipsElement = styled_components_1.default.div `
+  display:inline-block;
+  cursor: pointer;
+  background-color:${p => p.theme.chipsNeutralBackground};
+  color:${p => p.theme.chipsNeutralTextColor};
+  padding:4px 8px;
+  width:auto;
+  box-sizing: border-box;
+  border-radius:30px;
+`;
+exports.ChipsLabel = styled_components_1.default.div `
+  font-size:${Theme_1.Theme.fontSize.s}
+`;

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

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Chips"), exports);

package/dist/cjs/components/Filters/Filters.js

@@ -0,0 +1,198 @@
+"use strict";
+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 (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filters = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const Typography_1 = require("../Typography");
+const Aligment_1 = require("../Aligment");
+const Icons_1 = require("../Icons");
+const Modal_1 = require("../Modal");
+const Filters_styles_1 = require("./Filters.styles");
+const Theme_1 = require("../../Theme");
+const common_1 = require("../common");
+const Input_1 = require("../Input");
+const Chips_1 = require("../Chips");
+const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelConfirm = 'Approve', labelClose = "Cancel", filters = [], labelClearAll = 'Clear all filters', handleSubmitFilters }) => {
+    const generateStateObj = () => {
+        const obj = {};
+        filters.forEach((filter) => {
+            obj[filter.name] = {
+                name: filter.name,
+                type: filter.type,
+                value: [],
+                rangeMin: filter.min,
+                rangeMax: filter.max,
+                min: '',
+                max: '',
+            };
+        });
+        return obj;
+    };
+    const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
+    const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
+    const toogleFilter = () => {
+        setOpenFilters(!openFilters);
+    };
+    const isFilterActive = (filter) => {
+        let isActive = false;
+        if (filter.type === 'select') {
+            isActive = filter.value.length > 0;
+        }
+        else if (filter.type === 'range') {
+            isActive = filter.min.length > 0 || filter.max.length > 0;
+        }
+        return isActive;
+    };
+    const isAnyFilterActive = () => {
+        const activs = Object.keys(activeFilters).find((key) => isFilterActive(activeFilters[key]));
+        if (activs) {
+            return activs.length > 0;
+        }
+        return false;
+    };
+    const setIconColor = () => {
+        return isAnyFilterActive() ? theme.action : theme.textColor;
+    };
+    const clearAll = () => {
+        const resetedFilter = { ...activeFilters };
+        Object.keys(resetedFilter).forEach((key) => {
+            if (resetedFilter[key].type === 'select') {
+                resetedFilter[key].value = [];
+            }
+            else if (resetedFilter[key].type === 'range') {
+                resetedFilter[key].min = '';
+                resetedFilter[key].max = '';
+            }
+        });
+        return resetedFilter;
+    };
+    const resetAllFilters = () => {
+        const cleared = clearAll();
+        setActiveFilters({
+            ...cleared,
+        });
+    };
+    const resetAllFiltersAndSubmit = () => {
+        resetAllFilters();
+        applyFilter();
+    };
+    const resetFilter = (filterName, filterType) => {
+        if (filterType === 'select') {
+            setActiveFilters({
+                ...activeFilters,
+                [filterName]: {
+                    ...activeFilters[filterName],
+                    value: [],
+                },
+            });
+        }
+        if (filterType === 'range') {
+            setActiveFilters({
+                ...activeFilters,
+                [filterName]: {
+                    ...activeFilters[filterName],
+                    min: '',
+                    max: '',
+                },
+            });
+        }
+    };
+    const setSelectFilter = (filterValue, filterName) => {
+        let values = [];
+        const existingValues = activeFilters[filterName].value;
+        if (existingValues.includes(filterValue)) {
+            values = existingValues.filter((item) => item !== filterValue);
+        }
+        else {
+            existingValues.push(filterValue);
+            values = [...existingValues];
+        }
+        setActiveFilters({
+            ...activeFilters,
+            [filterName]: {
+                ...activeFilters[filterName],
+                value: values,
+            },
+        });
+    };
+    const setRangeFilter = (name, value) => {
+        const filterName = name.split('_')[0];
+        const filterParam = name.split('_')[1];
+        setActiveFilters({
+            ...activeFilters,
+            [filterName]: {
+                ...activeFilters[filterName],
+                [filterParam]: value,
+            },
+        });
+    };
+    const applyFilter = () => {
+        const obj = [];
+        Object.keys(activeFilters).forEach((key) => {
+            if (activeFilters[key].type === 'select') {
+                if (activeFilters[key].value.length > 0) {
+                    obj.push({
+                        name: activeFilters[key].name,
+                        type: activeFilters[key].type,
+                        value: activeFilters[key].value,
+                    });
+                }
+            }
+            else if (activeFilters[key].type === 'range') {
+                if (activeFilters[key].min.length > 0 || activeFilters[key].max.length > 0) {
+                    obj.push({
+                        name: activeFilters[key].name,
+                        type: activeFilters[key].type,
+                        min: activeFilters[key].min.length > 0 ? activeFilters[key].min : undefined,
+                        max: activeFilters[key].max.length > 0 ? activeFilters[key].max : undefined,
+                    });
+                }
+            }
+        });
+        handleSubmitFilters && handleSubmitFilters(obj);
+        setOpenFilters(false);
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Filters_styles_1.FilterIconArea, null,
+            react_1.default.createElement(Icons_1.Icon, { name: "filters", onClick: toogleFilter, color: setIconColor() }),
+            isAnyFilterActive() && (react_1.default.createElement(Chips_1.Chips, { label: labelClearAll, handleClose: resetAllFiltersAndSubmit }))),
+        openFilters && (react_1.default.createElement(Modal_1.Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, labelConfirm: labelConfirm, labelClose: labelClose },
+            react_1.default.createElement(Aligment_1.Aligment, { direction: "column", align: 'flex-end' },
+                react_1.default.createElement(Chips_1.Chips, { handleClose: resetAllFilters, label: labelClearAll }),
+                react_1.default.createElement(Filters_styles_1.FiltersArea, null, filters.map((filter) => (react_1.default.createElement(Filters_styles_1.FilterSection, null,
+                    react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap" },
+                        react_1.default.createElement(Typography_1.TextAccent, null, filter.label),
+                        react_1.default.createElement(Icons_1.Icon, { name: "close", size: 14, onClick: () => resetFilter(filter.name, filter.type) })),
+                    filter.type === 'select' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "column", align: "flex-start", vPadding: Theme_1.Theme.padding.s }, filter.allowValues?.map((item) => {
+                        return (react_1.default.createElement(common_1.PanelOption, { width: "100%", key: item, active: activeFilters[filter.name].value.includes(item), onClick: () => setSelectFilter(item, filter.name) }, item));
+                    }))),
+                    filter.type === 'range' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme_1.Theme.padding.s, justify: "flex-start", gap: 8 },
+                        react_1.default.createElement(Filters_styles_1.FilterInputWrapper, null,
+                            react_1.default.createElement(Input_1.Input, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name].min, placeholder: activeFilters[filter.name].rangeMin, handleChange: setRangeFilter })),
+                        react_1.default.createElement(Filters_styles_1.FilterInputWrapper, null,
+                            react_1.default.createElement(Input_1.Input, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name].max, placeholder: activeFilters[filter.name].rangeMax, handleChange: setRangeFilter })))))))))))));
+};
+exports.Filters = Filters;

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterInputWrapper = exports.FilterOption = exports.FilterSection = exports.FiltersArea = exports.FilterIconArea = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.FilterIconArea = styled_components_1.default.div `
+  display:flex;
+  flex-direction: row;
+  align-items: center;
+  gap:8px;
+}
+`;
+exports.FiltersArea = styled_components_1.default.div `
+  width:100%;
+`;
+exports.FilterSection = styled_components_1.default.div `
+  width:100%;
+  display:flex;
+  flex-direction:column;
+  padding-bottom:${Theme_1.Theme.padding.m}
+`;
+exports.FilterOption = styled_components_1.default.div `
+  width:100%;
+  display:flex;
+  flex-direction:column;
+`;
+exports.FilterInputWrapper = styled_components_1.default.div `
+  width:100px
+`;

package/dist/cjs/components/Filters/filtersHelper.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyFiltersToTable = exports.setTableFilterSet = exports.getMaxValue = exports.getMinValue = exports.getUniqueValues = void 0;
+const getUniqueValues = (elements, source) => {
+    const result = [...new Set(elements.map((item) => item[source]))];
+    return result;
+};
+exports.getUniqueValues = getUniqueValues;
+const getMinValue = (elements, source) => {
+    return Math.min(...elements.map((item) => item[source]));
+};
+exports.getMinValue = getMinValue;
+const getMaxValue = (elements, source) => {
+    return Math.max(...elements.map((item) => item[source]));
+};
+exports.getMaxValue = getMaxValue;
+const setTableFilterSet = (headers, elements) => {
+    const filterSetting = [];
+    headers.forEach((filter) => {
+        if (filter.filter) {
+            filterSetting.push({
+                label: filter.name,
+                name: filter.valueSource,
+                type: filter.filterType ? filter.filterType : 'select',
+                allowValues: (0, exports.getUniqueValues)(elements, filter.valueSource),
+                min: (0, exports.getMinValue)(elements, filter.valueSource),
+                max: (0, exports.getMaxValue)(elements, filter.valueSource),
+            });
+        }
+    });
+    return filterSetting;
+};
+exports.setTableFilterSet = setTableFilterSet;
+const applyFiltersToTable = (elements, filters) => {
+    let filtered = [...elements];
+    filters.forEach((filter) => {
+        if (filter.type === 'select') {
+            filtered = filtered.filter((item) => filter.value?.includes(item[filter.name]));
+        }
+        else if (filter.type === 'range') {
+            filtered = filtered.filter((item) => {
+                const minValue = filter.min ? filter.min : item[filter.name];
+                const maxValue = filter.max ? filter.max : item[filter.name];
+                return (item[filter.name] >= minValue &&
+                    item[filter.name] <= maxValue);
+            });
+        }
+    });
+    return filtered;
+};
+exports.applyFiltersToTable = applyFiltersToTable;

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

@@ -0,0 +1,18 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Filters"), exports);
+__exportStar(require("./filtersHelper"), exports);

package/dist/cjs/components/Icons/IconsPath.js

@@ -27,4 +27,6 @@ exports.iconsPath = {
     check_circle: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z",
     check_box: "m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z",
     check: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z",
+    arrow_drop_down: 'M7 14L12 9L17 14H7Z',
+    arrow_drop_up: 'M12 15L7 10H17L12 15Z',
 };

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

@@ -0,0 +1,107 @@
+"use strict";
+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 (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const Table_styles_1 = require("./Table.styles");
+const Theme_1 = require("../../Theme");
+const date_fns_1 = require("date-fns");
+const Icons_1 = require("../Icons");
+const Aligment_1 = require("../Aligment");
+const Filters_1 = require("../Filters");
+const tableHelper_1 = require("./tableHelper");
+const Chips_1 = require("../Chips");
+const Table = ({ theme = Theme_1.mainTheme, headers, elements, 
+// isBulkAction = false,
+hover = true, selectable = true, sortable = true, filtrable = false, sort = {
+    name: '',
+    order: 'none',
+}, filters = [], 
+// haveMore = false,
+// moreActions = [],
+onRowClick, filtersTitle = 'Select filters', filtersConfirmLabel = 'Approve', filtersCancelLabel = 'Cancel', filterClearAllLabel = 'Clear all filters', sortClearLabel = 'Clear sorting', }) => {
+    const [tableProps, setTableProps] = (0, react_1.useState)({
+        elements: (0, tableHelper_1.setElements)(elements, sort, filters),
+        sort: sort,
+        filters: filters,
+    });
+    const [selectedRow, setSelectedRow] = (0, react_1.useState)('');
+    const handleRowClick = (id) => {
+        if (selectable) {
+            setSelectedRow(id);
+        }
+        onRowClick && onRowClick(id);
+    };
+    const handleHeaderCellClick = (targetValue) => {
+        if (sortable) {
+            const newSort = (0, tableHelper_1.setSortParams)(targetValue, tableProps.sort);
+            setTableProps({
+                ...tableProps,
+                elements: (0, tableHelper_1.applySort)(newSort, tableProps.elements),
+                sort: newSort,
+            });
+        }
+    };
+    const handleFilters = (newFilters) => {
+        setTableProps({
+            ...tableProps,
+            elements: (0, tableHelper_1.setElements)(elements, tableProps.sort, newFilters),
+            filters: newFilters,
+        });
+    };
+    const resetSorting = () => {
+        setTableProps({
+            ...tableProps,
+            elements: (0, tableHelper_1.setElements)(elements, { name: '', order: 'asc' }, tableProps.filters),
+            sort: {
+                name: '',
+                order: 'asc',
+            },
+        });
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        (filtrable || sortable) && (react_1.default.createElement(Table_styles_1.TableTopBar, null,
+            react_1.default.createElement(Aligment_1.Aligment, { justify: "flex-start", gap: 10 },
+                filtrable && (react_1.default.createElement(Filters_1.Filters, { title: filtersTitle, labelConfirm: filtersConfirmLabel, labelClose: filtersCancelLabel, labelClearAll: filterClearAllLabel, handleSubmitFilters: handleFilters, filters: (0, Filters_1.setTableFilterSet)(headers, elements) })),
+                sortable && tableProps.sort.name !== '' && (react_1.default.createElement(Chips_1.Chips, { label: sortClearLabel, handleClose: resetSorting }))))),
+        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 }, headers.map((header) => (react_1.default.createElement(Table_styles_1.TableHeaderCell, { key: header.name, sortable: sortable, onClick: () => handleHeaderCellClick(header.valueSource), isSorted: tableProps.sort.name === header.valueSource &&
+                        tableProps.sort.order != 'none' },
+                    header.name,
+                    tableProps.sort.name === header.valueSource &&
+                        tableProps.sort.order != 'none' && (react_1.default.createElement(Table_styles_1.TableHeaderSortIcon, null,
+                        react_1.default.createElement(Icons_1.Icon, { name: tableProps.sort.order === 'asc'
+                                ? 'arrow_drop_down'
+                                : 'arrow_drop_up', color: theme.tableCellSortIcon, size: 20 })))))))),
+            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, headers.map((header) => {
+                return (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
+                    ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
+                    : item[header.valueSource]));
+                // }
+            }))))))));
+};
+exports.Table = Table;

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

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableTopBar = exports.TableCell = exports.TableRow = exports.TableHeaderSortIcon = exports.TableHeaderCell = exports.TableHead = exports.TableWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.TableWrapper = styled_components_1.default.table `
+  width: 100%;
+`;
+exports.TableHead = styled_components_1.default.thead `
+  tr:first-child {
+    position: sticky;
+    top: 0;
+  }
+`;
+exports.TableHeaderCell = styled_components_1.default.th `
+  font-weight: bold;
+  text-align: left;
+  padding: 8px;
+  transition: 300ms;
+  font-size: 14px;
+  background-color: ${(p) => p.isSorted ? p.theme.tableHeaderActiveBackground : p.theme.tableHeaderBackground};
+  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+
+  :hover {
+    background-color: ${(p) => p.isSorted ? p.theme.tableHeaderActiveBackground : p.theme.tableHeaderBackground};
+  }
+ 
+  ${(p) => p.sortable &&
+    `
+    cursor:pointer;
+  `}
+  position:relative;
+
+`;
+exports.TableHeaderSortIcon = styled_components_1.default.div `
+  width: 20px;
+  height: 20px;
+  position:absolute;
+  right:0;
+  transition: 300ms;
+  top: calc(50% - 10px);
+`;
+exports.TableRow = styled_components_1.default.tr `
+  background-color: ${(p) => p.active ? p.theme.tableCellActiveBackground : p.theme.tableCellEvenBackground};
+  :nth-child(even) {
+    background-color: ${(p) => p.active
+    ? p.theme.tableCellActiveBackground
+    : p.theme.tableCellBackground};
+    transition: 300ms;
+  }
+  ${(p) => p.selectable &&
+    `
+  cursor:pointer;`}
+  ${(p) => p.hover &&
+    `
+  :hover{
+    background-color:${p.theme.tableCellHoverBackground};
+  }
+  `}
+`;
+exports.TableCell = styled_components_1.default.td `
+  padding: 8px;
+  border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
+`;
+exports.TableTopBar = styled_components_1.default.div `
+  padding-bottom:4px;
+`;

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

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Table"), exports);

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setElements = exports.applySort = exports.setSortParams = void 0;
+const lodash_1 = require("lodash");
+const Filters_1 = require("../Filters");
+const setSortParams = (target, sort) => {
+    const newSort = {
+        name: target,
+        order: target === sort.name ? (sort.order === 'asc' ? 'desc' : 'asc') : 'asc',
+    };
+    return newSort;
+};
+exports.setSortParams = setSortParams;
+const applySort = (sort, elements) => {
+    let sorted = [...elements];
+    if (sort.name !== '') {
+        sorted = (0, lodash_1.orderBy)(sorted, sort.name, sort.order);
+    }
+    return sorted;
+};
+exports.applySort = applySort;
+const setElements = (elements, sort, filters) => {
+    let tableElements = [...(0, Filters_1.applyFiltersToTable)(elements, filters)];
+    if (sort.name !== '') {
+        tableElements = (0, exports.applySort)(sort, tableElements);
+    }
+    return tableElements;
+};
+exports.setElements = setElements;

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

@@ -47,7 +47,7 @@ exports.TextLabel = styled_components_1.default.div `
   ${(p) => p.size && p.labelPosition === 'left'
     ? (0, common_1.setLabelFontSize)(p.size)
     : `
-  font-size: ${Theme_1.Theme.fontSize.xs};
-  line-height: ${Theme_1.Theme.lineHeight.xs};
+  font-size: ${Theme_1.Theme.fontSize.s};
+  line-height: ${Theme_1.Theme.lineHeight.s};
   `}
 `;

package/dist/cjs/components/common/commonComponents.js

@@ -41,4 +41,5 @@ exports.PanelOption = styled_components_1.default.div `
   :hover {
     background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
   }
+  ${p => p.width && `width:${p.width};`}
 `;

package/dist/cjs/index.js

@@ -17,11 +17,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/Aligment"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Card"), exports);
+__exportStar(require("./components/Chips"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
 __exportStar(require("./components/ElementHeader"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
 __exportStar(require("./components/File"), exports);
+__exportStar(require("./components/Filters"), exports);
 __exportStar(require("./components/Icons"), exports);
 __exportStar(require("./components/Input"), exports);
 __exportStar(require("./components/Loader"), exports);
@@ -29,5 +31,6 @@ __exportStar(require("./components/Modal"), exports);
 __exportStar(require("./components/Section"), exports);
 __exportStar(require("./components/Selector"), exports);
 __exportStar(require("./components/Sidepanel"), exports);
+__exportStar(require("./components/Table"), exports);
 __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Typography"), exports);