@mailstep/design-system 0.8.16-beta.6 → 0.8.17

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.d.ts

@@ -9,3 +9,33 @@ export declare const ComplexWithPaginationAndRedux: {
         name: string;
     };
 };
+export declare const ComplexWithReload: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ComplexWithTooManyResults: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ComplexWithCheckbox: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ComplexWithEditButton: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ComplexWithStickyColumn: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -5,16 +5,9 @@ import withReduxActions from '../../HoC/withReduxActions';
 import { useAddFilter } from '../../hooks/useAddFilter';
 import { ExtraControlButtonPosition } from '../../types';
 import { onRowEditClick, onRowReadClick, onRowAction, onRowClick, onBatchAction } from '../utils/actions';
-import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
+import { columnDefinitions, enumColumn, columnDefinitionsWithSticky } from '../utils/columnDefinition';
 import { ReduxGrid, createRandomData, enumValues, gridDummyActions, onAsyncLoadFilterOptions } from '../utils/utils';
 import withRedux from '../utils/withRedux';
-var ActionColumnButtons = {
-    flexBasis: 80,
-    forceCheckboxes: true,
-    addRowNumbers: false,
-    canRowEdit: true,
-    canRowRead: false
-};
 var FilterSetter = function (_a) {
     var gridActions = _a.gridActions;
     var handleAddFilter = useAddFilter(gridActions === null || gridActions === void 0 ? void 0 : gridActions.addFilter);
@@ -30,6 +23,29 @@ var extraControlButtons = [
         position: ExtraControlButtonPosition.TopRight,
         label: 'Create',
         onClick: alert
+    },
+    {
+        position: ExtraControlButtonPosition.TopRight,
+        label: 'Print',
+        onSelect: function (value) {
+            console.log(value);
+        },
+        options: [
+            { label: 'CSV', value: 'CSV' },
+            { label: 'ODS', value: 'ODS' },
+            { label: 'XLSX', value: 'XLSX' }
+        ]
+    },
+    {
+        position: ExtraControlButtonPosition.TopRight,
+        label: 'Allocate',
+        onSelect: function (value) {
+            console.log(value);
+        },
+        options: [
+            { label: 'Allocate all', value: 'all' },
+            { label: 'Allocate selected', value: 'selected' }
+        ]
     }
 ];
 var comparators = {
@@ -47,7 +63,41 @@ export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };
+export var ComplexWithReload = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName", onReload: function () {
+                console.log('reload');
+            } })] })); };
+ComplexWithReload.story = {
+    name: 'Complex, with reload button'
+};
+export var ComplexWithTooManyResults = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName", allowSortingOnlyUnderTotalRows: [10, 10] })] })); };
+ComplexWithTooManyResults.story = {
+    name: 'Complex, with too many results'
+};
+export var ComplexWithCheckbox = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName", actionColumnDefinition: {
+                flexBasis: 40,
+                forceCheckboxes: true,
+                addRowNumbers: false,
+                canRowEdit: false,
+                canRowRead: false
+            } })] })); };
+ComplexWithCheckbox.story = {
+    name: 'Complex, with checkbox'
+};
+export var ComplexWithEditButton = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName", actionColumnDefinition: {
+                flexBasis: 70,
+                forceCheckboxes: true,
+                addRowNumbers: false,
+                canRowEdit: true,
+                canRowRead: false
+            } })] })); };
+ComplexWithEditButton.story = {
+    name: 'Complex, with edit button'
+};
+export var ComplexWithStickyColumn = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitionsWithSticky, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridNameSticky" })] })); };
+ComplexWithStickyColumn.story = {
+    name: 'Complex, with sticky column'
+};

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.d.ts

@@ -8,3 +8,5 @@ export declare const oversizedColumnDefinition: {
 }[];
 export declare const enumColumn: ColumnDefinition;
 export declare const columnDefinitions: ColumnDefinition[];
+export declare const stickyColumn: ColumnDefinition;
+export declare const columnDefinitionsWithSticky: ColumnDefinition[];

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -1,3 +1,12 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { ComplexCell } from '../components/ComplexCell';
 import { EnumCellExample } from '../components/EnumCellExample';
 import { enumValues } from './utils';
@@ -101,18 +110,19 @@ export var columnDefinitions = [
         flexBasis: 350,
         cellComponent: ComplexCell
     },
-    {
-        name: 'stickyColumn',
-        title: 'Sticky Column',
-        flexBasis: 160,
-        alwaysOn: true,
-        sticky: true,
-        stickTo: 'right'
-    },
     {
         name: 'alwaysOffColumn',
         title: 'Always Off Column',
         flexBasis: 0,
-        alwaysOff: true,
+        alwaysOff: true
     }
 ];
+export var stickyColumn = {
+    name: 'stickyColumn',
+    title: 'Sticky Column',
+    flexBasis: 160,
+    alwaysOn: true,
+    sticky: true,
+    stickTo: 'right'
+};
+export var columnDefinitionsWithSticky = __spreadArray(__spreadArray([], columnDefinitions, true), [stickyColumn], false);

package/ui/Blocks/CommonGrid/styles.d.ts

@@ -16,4 +16,5 @@ export declare const CommonGridWithStyles: import('styled-components').StyledCom
 }>, import('@xstyled/system').Theme, {
     withButtonStrip: boolean;
     hasGroupsOrFilters: boolean;
+    hasGroups: boolean;
 }, never>;

package/ui/Blocks/CommonGrid/styles.js

@@ -21,14 +21,17 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
     var withPagination = _a.withPagination;
     return (withPagination ? gridFooterHeight : 0);
 });
-export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: ", "px;\n  flex-wrap: wrap;\n  z-index: 3;\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: ", "px;\n  flex-wrap: wrap;\n  z-index: 3;\n"])), gridButtonStripHeight);
-export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background-color: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background-color: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), function (_a) {
+export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ", "px;\n    padding: 18px 20px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ", "px;\n    padding: 18px 20px;\n  }\n"])), gridButtonStripHeight);
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), function (_a) {
     var withButtonStrip = _a.withButtonStrip;
     return (withButtonStrip ? gridButtonStripHeight : 0);
 }, th('fonts.primary'), gridRowHeight, function (_a) {
+    var hasGroups = _a.hasGroups;
+    return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
+}, th('colors.lightGray6'), function (_a) {
     var hasGroupsOrFilters = _a.hasGroupsOrFilters;
     return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
-}, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
+}, th('fonts.primary'), function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 });

package/ui/Blocks/CommonGrid/types.d.ts

@@ -229,6 +229,7 @@ export type GridActionsType = {
     setFilters?: (filters: Filtering) => void;
     resetFilters?: () => void;
     addSorting?: (column: string, direction: SortingValueType) => void;
+    resetSorting?: () => void;
     openConfigForm?: () => void;
     closeConfigForm?: () => void;
     clearSettings?: () => void;

package/ui/Blocks/CommonGrid/utils/index.d.ts

@@ -19,5 +19,7 @@ export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
 export declare const getGroupClassNames: (group?: Group) => string;
 export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
 export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;
+/** Returns true when a filter value should be counted / applied */
+export declare const isFilterActive: (value: any) => boolean;
 export declare const checksColumnsOrder: (colsOrder: string[], columnsDefinitions: ColumnDefinition[]) => void;
 export {};

package/ui/Blocks/CommonGrid/utils/index.js

@@ -76,6 +76,16 @@ export var getFilters = function (optimizeFilters) {
     }
     return filters;
 };
+/** Returns true when a filter value should be counted / applied */
+export var isFilterActive = function (value) {
+    if (value == null)
+        return false;
+    if (Array.isArray(value))
+        return !!value.length;
+    if (typeof value === 'object')
+        return value.value != null && value.value !== '';
+    return value !== '';
+};
 export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
     var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
     var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -18,7 +18,7 @@ import { useCallback } from 'react';
 import { useLocation } from 'react-router';
 import Link from '../../Link/Link';
 import styled, { css } from '@xstyled/styled-components';
-var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"], ["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"])), function (_a) {
+var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n  text-decoration: none;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"], ["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n  text-decoration: none;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"])), function (_a) {
     var $hasSeparator = _a.$hasSeparator;
     return ($hasSeparator ? '1px solid #D2D8DF' : 'none');
 }, function (_a) {

package/ui/Elements/Icon/icons/Filter.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const Filter: FC<SvgProps>;

package/ui/Elements/Icon/icons/Filter.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Filter = function (props) { return (_jsx("svg", __assign({ width: "14", height: "9", viewBox: "0 0 14 9", fill: "#DB2B19", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 0V1.5H13.5V0H0ZM5.25 9H8.25V7.5H5.25V9ZM11.25 5.25H2.25V3.75H11.25V5.25Z" }) }))); };

package/ui/Elements/Icon/icons/FlagHU.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var FlagHU = function (props) { return (_jsxs("svg", __assign({ width: "28", height: "20" }, props, { children: [_jsx("path", { d: "M0 0h1200v600H0", fill: "#477050" }), _jsx("path", { d: "M0 0h1200v400H0", fill: "#fff" }), _jsx("path", { d: "M0 0h1200v200H0", fill: "#ce2939" })] }))); };
+export var FlagHU = function (props) { return (_jsxs("svg", __assign({ width: "28", height: "20", viewBox: "0 0 1200 600" }, props, { children: [_jsx("path", { d: "M0 0h1200v600H0", fill: "#477050" }), _jsx("path", { d: "M0 0h1200v400H0", fill: "#fff" }), _jsx("path", { d: "M0 0h1200v200H0", fill: "#ce2939" })] }))); };

package/ui/Elements/Icon/icons/Sort.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const Sort: FC<SvgProps>;

package/ui/Elements/Icon/icons/Sort.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var Sort = function (props) { return (_jsxs("svg", __assign({ width: "14", height: "14", viewBox: "0 0 14 14", stroke: "#DB2B19", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M3.5 1.5V12.5M3.5 12.5L1.5 10.5M3.5 12.5L5.5 10.5", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.5 12.5V1.5M10.5 1.5L8.5 3.5M10.5 1.5L12.5 3.5", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -87,3 +87,5 @@ export { ArrowsLeftRight } from './ArrowsLeftRight';
 export { ArrowsUpDown } from './ArrowsUpDown';
 export { Weight } from './Weight';
 export { ArrowUpRightDownLeft } from './ArrowUpRightDownLeft';
+export { Filter } from './Filter';
+export { Sort } from './Sort';

package/ui/Elements/Icon/icons/index.js

@@ -87,3 +87,5 @@ export { ArrowsLeftRight } from './ArrowsLeftRight';
 export { ArrowsUpDown } from './ArrowsUpDown';
 export { Weight } from './Weight';
 export { ArrowUpRightDownLeft } from './ArrowUpRightDownLeft';
+export { Filter } from './Filter';
+export { Sort } from './Sort';

package/ui/Elements/Select/components/CountMultiValue.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { components as selectComponents } from 'react-select';
 import styled, { th } from '@xstyled/styled-components';
 // MultiValue container with count of selected options
-var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background-color: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
+var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
 var CountMultiValue = function (props) {
     var _a, _b;
     var shortValues = props.selectProps.shortValues;

package/ui/Elements/Select/themes/selectStyles.js

@@ -37,7 +37,7 @@ export var CustomStyles = {
     },
     multiValue: function (styles, state) {
         var theme = state.theme;
-        return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: theme.colors.lightGray7, borderRadius: '4px', '& svg': {
+        return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: '#E7EBEF', borderRadius: '4px', '& svg': {
                 color: theme.colors.inputTextColor,
             }, ' > div': {
                 fontSize: '12px',

package/ui/Forms/Checkbox/styles.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled, { th } from '@xstyled/styled-components';
 import { Icon } from '../../Elements/Icon';
-export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: transparent;\n    border-color: lightGray5;\n  }\n"], ["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: transparent;\n    border-color: lightGray5;\n  }\n"])), function (_a) {
+export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"], ["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size;
 }, function (_a) {

package/ui/Forms/Input/styles.js

@@ -29,7 +29,7 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
 export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"])));
 export var StyledInput = styled.input.attrs(function (props) { return ({
     as: props.$asTextArea ? 'textarea' : 'input'
-}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: transparent;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: transparent;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
+}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
     var $isInvalid = _a.$isInvalid;
     return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
 }, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {

package/ui/ThemeProvider/themes/index.d.ts

@@ -150,6 +150,7 @@ declare const themes: {
         };
         zIndices: number[];
     };
+    light: import('..').Theme;
     mailwise: {
         screens: {
             _: number;
@@ -353,156 +354,5 @@ declare const themes: {
         };
         zIndices: number[];
     };
-    dark: {
-        colors: {
-            bgLightGray: string;
-            bgLightGray1: string;
-            lightGray1: string;
-            lightGray2: string;
-            lightGray3: string;
-            lightGray4: string;
-            lightGray5: string;
-            lightGray6: string;
-            lightGray7: string;
-            neutral20: string;
-            neutral300: string;
-            neutral500: string;
-            gray: string;
-            gray1: string;
-            gray2: string;
-            gray3: string;
-            gray4: string;
-            gray5: string;
-            blue1: string;
-            blue2: string;
-            blue3: string;
-            blue4: string;
-            textPrimary: string;
-            textTertiary: string;
-            typoPrimary: string;
-            blue10: string;
-            blue20: string;
-            blue30: string;
-            blue40: string;
-            blue50: string;
-            blue60: string;
-            blue70: string;
-            blue80: string;
-            blue90: string;
-            teal20: string;
-            teal40: string;
-            teal50: string;
-            teal60: string;
-            teal70: string;
-            teal80: string;
-            teal90: string;
-            green10: string;
-            green20: string;
-            green30: string;
-            green50: string;
-            green60: string;
-            green70: string;
-            green80: string;
-            green90: string;
-            green: string;
-            successColor: string;
-            darkGreen: string;
-            orange20: string;
-            orange30: string;
-            orange50: string;
-            orange60: string;
-            orange80: string;
-            yellow10: string;
-            yellow20: string;
-            yellow60: string;
-            yellow70: string;
-            yellow1: string;
-            yellow2: string;
-            red10: string;
-            red20: string;
-            red30: string;
-            red50: string;
-            red70: string;
-            red1: string;
-            red2: string;
-            red3: string;
-            red60: string;
-            red80: string;
-            dangerColor: string;
-            purple20: string;
-            purple40: string;
-            purple50: string;
-            purple60: string;
-            purple80: string;
-            purple90: string;
-            magenta10: string;
-            magenta20: string;
-            magenta30: string;
-            magenta40: string;
-            magenta50: string;
-            magenta60: string;
-            magenta70: string;
-            magenta80: string;
-            magenta90: string;
-            white: string;
-        };
-        shadows: {
-            boxShadow: string;
-            dropShadow: string;
-            inputFocusBoxShadow: string;
-            dropdownMenuShadow: string;
-            tooltipBoxShadow: string;
-            cardShadow: string;
-            smooth: string;
-            dialogShadow: string;
-            headerShadow: string;
-            headerShadowB: string;
-            headerShadowNotifications: string;
-            cornerDialogShadow: string;
-            gridShadow: string;
-            tooltipShadow: string;
-        };
-        breakpoints: string[];
-        fonts: {
-            primary: string;
-            heading: string;
-        };
-        fontLinks: string[];
-        fontSizes: string[];
-        lineHeights: number[];
-        fontWeights: {
-            light: number;
-            normal: number;
-            medium: number;
-            semiBold: number;
-            bold: number;
-        };
-        letterSpacings: {
-            default: null;
-            sm: string;
-            md: string;
-            lg: string;
-        };
-        borders: {
-            slim: string;
-            mediumSlim: string;
-            medium: string;
-            mediumThick: string;
-            thick: string;
-        };
-        radii: {
-            sm: string;
-            md: string;
-            ml: string;
-            lg: string;
-            xl: string;
-        };
-        space: number[];
-        transitions: {
-            simpleLong: string;
-            inputTransition: string;
-        };
-        zIndices: number[];
-    };
 };
 export default themes;

package/ui/ThemeProvider/themes/index.js

@@ -1,9 +1,9 @@
 import defaultTheme from './default';
+import light from './light';
 import mailwise from './mailwise';
-import darkTheme from './dark';
 var themes = {
     default: defaultTheme,
-    mailwise: mailwise,
-    dark: darkTheme
+    light: light,
+    mailwise: mailwise
 };
 export default themes;

package/ui/ThemeProvider/themes/light.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../types';
+
+declare const lightTheme: Theme;
+export default lightTheme;

package/ui/ThemeProvider/themes/light.js

@@ -0,0 +1,7 @@
+var lightTheme = {
+    colors: {
+        primary: "#219615",
+        warning: "purple",
+    },
+};
+export default lightTheme;

package/ui/ThemeProvider/types.d.ts

@@ -26,7 +26,7 @@ export type Theme = {
 export type Themes = Record<string, Theme>;
 export interface Props {
     children: ReactNode;
-    theme: 'default' | 'mailwise' | 'dark';
+    theme: 'default' | 'light' | 'mailwise';
     preflight?: boolean;
     language?: string;
 }