@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

package/ui/Blocks/CommonGrid/components/OversizedScroll.js

@@ -1,49 +1,21 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var ScrollWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  min-height: ", ";\n"], ["\n  ", ";\n\n  min-height: ", ";\n"])), function (props) {
-    return props.columnLayout != 'no-scroll' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "], ["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "])), props.columnLayout == 'sticky' ? 'inherit' : 'auto');
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled, { css } from '@xstyled/styled-components';
+var ScrollWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  min-height: ", ";\n"], ["\n  ", ";\n\n  min-height: ", ";\n"])), function (props) {
+    return props.columnLayout != 'no-scroll' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "], ["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "])), props.columnLayout == 'sticky' ? 'inherit' : 'auto');
 }, function (props) { return (props.columnLayout == 'normal' ? '360px' : '0'); });
-var ScrollSizer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) {
-    return props.columnLayout != 'no-scroll' && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), props.totalColumnsWidth);
+var ScrollSizer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) {
+    return props.columnLayout != 'no-scroll' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), props.totalColumnsWidth);
 });
-var FloatPosition = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  left: 0;\n"], ["\n  position: sticky;\n  left: 0;\n"])));
+var FloatPosition = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  left: 0;\n"], ["\n  position: sticky;\n  left: 0;\n"])));
 var OversizedScroll = function (_a, ref) {
     var columnLayout = _a.columnLayout, isLoading = _a.isLoading, children = _a.children, floatingChildren = _a.floatingChildren, totalColumnsWidth = _a.totalColumnsWidth;
-    return ((0, jsx_runtime_1.jsxs)(ScrollWrapper, { columnLayout: columnLayout, isLoading: isLoading, className: "gridWrapper", ref: ref, children: [(0, jsx_runtime_1.jsx)(ScrollSizer, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, children: children }), floatingChildren && (0, jsx_runtime_1.jsx)(FloatPosition, { children: floatingChildren })] }));
+    return (_jsxs(ScrollWrapper, { columnLayout: columnLayout, isLoading: isLoading, className: "gridWrapper", ref: ref, children: [_jsx(ScrollSizer, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, children: children }), floatingChildren && _jsx(FloatPosition, { children: floatingChildren })] }));
 };
-var forwardedWrapper = react_1.default.forwardRef(OversizedScroll);
-exports.default = forwardedWrapper;
+var forwardedWrapper = React.forwardRef(OversizedScroll);
+export default forwardedWrapper;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/ReadEditButtonCell.js

@@ -1,28 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var fp_1 = require("lodash/fp");
-var gridCells_1 = require("../gridCells");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { isFunction } from 'lodash/fp';
+import { RowActionsCell } from '../gridCells/index.js';
 var getReadEditButtonCell = function (actionColumn) {
     return function ReadEditButtonCell(_a) {
         var rowData = _a.rowData, onRowAction = _a.onRowAction;
-        var canEdit = (0, fp_1.isFunction)(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit;
-        var canRead = (0, fp_1.isFunction)(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead;
+        var canEdit = isFunction(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit;
+        var canRead = isFunction(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) ? actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead(rowData) : actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead;
         // if canEdit and canRead are both true, canEdit supersedes canRead
-        var handleOnClick = (0, react_1.useCallback)(function () {
+        var handleOnClick = useCallback(function () {
             var action = canEdit ? 'row_edit' : 'row_read';
             if (onRowAction)
                 onRowAction(rowData === null || rowData === void 0 ? void 0 : rowData.id, action, rowData);
         }, [canEdit, onRowAction, rowData]);
-        var linkTo = (0, react_1.useMemo)(function () {
+        var linkTo = useMemo(function () {
             var _a;
             var mode = canEdit ? 'edit' : 'read';
             return (_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumn, { mode: mode, id: rowData === null || rowData === void 0 ? void 0 : rowData.id });
         }, [canEdit, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
         if (!canEdit && !canRead)
             return null;
-        return (0, jsx_runtime_1.jsx)(gridCells_1.RowActionsCell, { canEdit: !!canEdit, onClick: handleOnClick, linkTo: linkTo });
+        return _jsx(RowActionsCell, { canEdit: !!canEdit, onClick: handleOnClick, linkTo: linkTo });
     };
 };
-exports.default = getReadEditButtonCell;
+export default getReadEditButtonCell;

package/ui/Blocks/CommonGrid/components/ReadEditButtonCell/index.js

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ReadEditButtonCell_1 = __importDefault(require("./ReadEditButtonCell"));
-exports.default = ReadEditButtonCell_1.default;
+import ReadEditButtonCell from './ReadEditButtonCell.js';
+export default ReadEditButtonCell;

package/ui/Blocks/CommonGrid/components/Resize.js

@@ -1,19 +1,14 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var Resizer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"], ["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"])));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import styled from '@xstyled/styled-components';
+var Resizer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"], ["\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"])));
 var Resize = function (_a) {
     var onResize = _a.onResize, onResizeOver = _a.onResizeOver, onResizeOut = _a.onResizeOut;
-    var handleMouseDown = (0, react_1.useCallback)(function (downEvent) {
+    var handleMouseDown = useCallback(function (downEvent) {
         if ((downEvent === null || downEvent === void 0 ? void 0 : downEvent.button) !== 0) {
             return;
         }
@@ -32,7 +27,7 @@ var Resize = function (_a) {
         downEvent.stopPropagation();
         downEvent.preventDefault();
     }, [onResize]);
-    return (0, jsx_runtime_1.jsx)(Resizer, { className: "resizer", onMouseDown: handleMouseDown, onMouseOver: onResizeOver, onMouseOut: onResizeOut });
+    return _jsx(Resizer, { className: "resizer", onMouseDown: handleMouseDown, onMouseOver: onResizeOver, onMouseOut: onResizeOut });
 };
-exports.default = Resize;
+export default Resize;
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/Table.js

@@ -1,4 +1,3 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -14,40 +13,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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.MessageCell = exports.TextCell = exports.Cell = exports.StyledDataRow = exports.Row = exports.StyledRow = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-exports.StyledRow = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"], ["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"])), styled_components_1.system, function (props) { return (props.hasRowClick ? 'pointer' : 'cursor'); });
-var Row = function (props) { return (0, jsx_runtime_1.jsx)(exports.StyledRow, __assign({ ref: props.innerRef }, props)); };
-exports.Row = Row;
-var StyledCell = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n"], ["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n"])), styled_components_1.system, function (props) { return props.align; });
-exports.StyledDataRow = (0, styled_components_1.default)(exports.Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? (0, styled_components_1.th)('colors.bgLightGray') : 'white'); });
-var Cell = function (props) { return (0, jsx_runtime_1.jsx)(StyledCell, __assign({ ref: props.innerRef }, props)); };
-exports.Cell = Cell;
-exports.TextCell = (0, styled_components_1.default)(exports.Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
-exports.MessageCell = (0, styled_components_1.default)(exports.Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { system, th } from '@xstyled/styled-components';
+export var StyledRow = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"], ["\n  ", ";\n  display: flex;\n  min-height: 32px;\n  border-bottom: 1px solid rgb(228, 231, 235);\n  cursor: ", ";\n"])), system, function (props) { return (props.hasRowClick ? 'pointer' : 'cursor'); });
+export var Row = function (props) { return _jsx(StyledRow, __assign({ ref: props.innerRef }, props)); };
+var StyledCell = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n"], ["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n"])), system, function (props) { return props.align; });
+export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
+export var Cell = function (props) { return _jsx(StyledCell, __assign({ ref: props.innerRef }, props)); };
+export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/CommonGrid/components/TablePagination/TablePagination.js

@@ -1,43 +1,15 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var react_1 = require("@lingui/react");
-var react_2 = require("react");
-var Select_1 = __importDefault(require("../../../../Elements/Select/Select"));
-var Typography_1 = require("../../../../Elements/Typography/Typography");
-var Wrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"])));
-var StyledSelect = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"], ["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"])));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { x } from '@xstyled/styled-components';
+import { Trans } from '@lingui/react';
+import { useCallback, useMemo } from 'react';
+import Select from '../../../../Elements/Select/Select.js';
+import { Paragraph4 } from '../../../../Elements/Typography/Typography.js';
+var Wrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"])));
+var StyledSelect = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"], ["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"])));
 var rowsPerPageOptionValues = [10, 20, 50, 100];
 var LABEL_VALUE = '_label_';
 var filterRowsOption = function (option) { return option.value !== LABEL_VALUE; };
@@ -45,16 +17,16 @@ var TablePagination = function (_a) {
     var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, customPaginationHandler = _a.customPaginationHandler;
     var setRowsPerPage = gridActions.setRowsPerPage;
     var page = gridSelectors.page;
-    var onSetRowsPerPage = (0, react_2.useCallback)(function (option) {
+    var onSetRowsPerPage = useCallback(function (option) {
         if (option && 'value' in option) {
             setRowsPerPage === null || setRowsPerPage === void 0 ? void 0 : setRowsPerPage(Number(option.value));
             customPaginationHandler === null || customPaginationHandler === void 0 ? void 0 : customPaginationHandler(page !== null && page !== void 0 ? page : 1, Number(option.value));
         }
     }, [setRowsPerPage, page, customPaginationHandler]);
-    var rowsPerPageOptions = (0, react_2.useMemo)(function () {
+    var rowsPerPageOptions = useMemo(function () {
         return rowsPerPageOptionValues.map(function (value) { return ({ value: value, label: value }); });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(StyledSelect, { minWidth: "80px", children: (0, jsx_runtime_1.jsx)(Select_1.default, { name: "rowsPerPage", menuPlacement: "auto", style: "gridFilter", placeholder: "".concat(gridSelectors.rowsPerPage), options: rowsPerPageOptions, value: gridSelectors.rowsPerPage, filterOption: filterRowsOption, isDarkPlaceholderText: true, onChange: onSetRowsPerPage }) }), (0, jsx_runtime_1.jsx)(Typography_1.Paragraph4, { variant: "normal", mr: "20px", children: (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }) })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(StyledSelect, { minWidth: "80px", children: _jsx(Select, { name: "rowsPerPage", menuPlacement: "auto", style: "gridFilter", placeholder: "".concat(gridSelectors.rowsPerPage), options: rowsPerPageOptions, value: gridSelectors.rowsPerPage, filterOption: filterRowsOption, isDarkPlaceholderText: true, onChange: onSetRowsPerPage }) }), _jsx(Paragraph4, { variant: "normal", mr: "20px", children: _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }) })] }));
 };
-exports.default = TablePagination;
+export default TablePagination;
 var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/TablePagination/index.js

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var TablePagination_1 = __importDefault(require("./TablePagination"));
-exports.default = TablePagination_1.default;
+import TablePagination from './TablePagination.js';
+export default TablePagination;

package/ui/Blocks/CommonGrid/components/TextRange/TextRange.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,49 +20,44 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ipv4 = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_2 = require("@lingui/react");
-var useClickOutside_1 = require("../../../Modal/hooks/useClickOutside");
-var Input_1 = require("../../../../Forms/Input/Input");
-var IconList_1 = __importDefault(require("../IconList/IconList"));
-var core_1 = require("@lingui/core");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Trans } from '@lingui/react';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside.js';
+import { Input } from '../../../../Forms/Input/Input.js';
+import IconList from '../IconList/IconList.js';
+import { i18n } from '@lingui/core';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
-    return (0, jsx_runtime_1.jsx)("div", { children: children });
+    return _jsx("div", { children: children });
 };
-exports.ipv4 = /^([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/;
+export var ipv4 = /^([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/;
 var createTextComparators = function () { return [
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.notContains', message: 'Not contains' }), value: 'notLike', icon: 'false' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
+    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: i18n._({ id: 'dataGrid.comparator.notContains', message: 'Not contains' }), value: 'notLike', icon: 'false' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: i18n._({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
+    { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
 ]; };
 var createPresentTextComparators = function () { return [
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
 ]; };
 var createEqualComparators = function () { return [
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
-    { label: core_1.i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
+    { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
+    { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
 ]; };
 var validations = {
     ip: {
-        check: function (value) { return exports.ipv4.test(value.trim()); },
-        errorMsg: (0, jsx_runtime_1.jsx)(react_2.Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }),
+        check: function (value) { return ipv4.test(value.trim()); },
+        errorMsg: _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }),
     },
 };
 var TextRange = function (props) {
     var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "validation"]);
-    var eqOnlyTxt = core_1.i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
-    var _c = (0, react_1.useState)(false), isOpen = _c[0], setOpen = _c[1];
+    var eqOnlyTxt = i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
+    var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
     var textComparators = createTextComparators();
     var presentTextComparators = createPresentTextComparators();
     var equalComparators = createEqualComparators();
@@ -71,14 +65,14 @@ var TextRange = function (props) {
     var comparator = eqOnly ? 'eq' : (value === null || value === void 0 ? void 0 : value.comparator) || fallbackComparator;
     var renderedComparator = isEqual ? equalComparators : isPresent ? presentTextComparators : textComparators;
     var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || '';
-    var onClose = (0, react_1.useCallback)(function () {
+    var onClose = useCallback(function () {
         setOpen(false);
     }, []);
-    var pickerRef = (0, useClickOutside_1.useClickOutside)({ onClose: onClose });
-    var togglePicker = (0, react_1.useCallback)(function () { return setOpen(!isOpen); }, [isOpen, setOpen]);
+    var pickerRef = useClickOutside({ onClose: onClose });
+    var togglePicker = useCallback(function () { return setOpen(!isOpen); }, [isOpen, setOpen]);
     var validation = !!validationKey && validations[validationKey];
     var isInvalid = validation && Boolean(fieldValue && !validation.check(String(fieldValue)));
-    var onChangeTextInput = (0, react_1.useCallback)(function (event) {
+    var onChangeTextInput = useCallback(function (event) {
         var txtValue = event.target.value;
         if (txtValue) {
             onChange({ comparator: comparator, value: txtValue, isInvalid: validation && !validation.check(txtValue) });
@@ -87,9 +81,9 @@ var TextRange = function (props) {
             onChange(null);
         }
     }, [onChange, comparator, validation]);
-    var onChangeComparator = (0, react_1.useCallback)(function (option) {
+    var onChangeComparator = useCallback(function (option) {
         onChange({ comparator: option.value, value: fieldValue, isInvalid: isInvalid });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: pickerRef, children: [(0, jsx_runtime_1.jsx)(Input_1.Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, appearance: "grid", icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && ((0, jsx_runtime_1.jsx)(OverlayComponent, { children: (0, jsx_runtime_1.jsx)(IconList_1.default, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
+    return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, appearance: "grid", icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
 };
-exports.default = TextRange;
+export default TextRange;

package/ui/Blocks/CommonGrid/components/TextRange/index.js

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var TextRange_1 = __importDefault(require("./TextRange"));
-exports.default = TextRange_1.default;
+import TextRange from './TextRange.js';
+export default TextRange;

package/ui/Blocks/CommonGrid/components/TextRange/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/BoolIcon.js

@@ -1,51 +1,22 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoolIconCell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var system_1 = require("@xstyled/system");
-var get_1 = __importDefault(require("lodash/fp/get"));
-var Icon_1 = __importDefault(require("../../../../Elements/Icon/Icon"));
-var Center = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"])));
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled, { useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import get from 'lodash/fp/get';
+import Icon from '../../../../Elements/Icon/Icon.js';
+var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n"])));
 var BoolIcon = function (_a) {
     var rowData = _a.rowData, column = _a.column;
-    var theme = (0, styled_components_1.useTheme)();
-    var value = (0, get_1.default)(column.name, rowData);
+    var theme = useTheme();
+    var value = get(column.name, rowData);
     var icon = value ? 'check' : 'false';
     var colorName = value ? 'green' : 'lightGray3';
-    var themeColor = system_1.th.color(colorName)({ theme: theme });
-    return ((0, jsx_runtime_1.jsx)(Center, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: icon, fill: themeColor, size: "14px" }) }));
+    var themeColor = th.color(colorName)({ theme: theme });
+    return (_jsx(Center, { children: _jsx(Icon, { icon: icon, fill: themeColor, size: "14px" }) }));
 };
-exports.BoolIconCell = react_1.default.memo(BoolIcon);
+export var BoolIconCell = React.memo(BoolIcon);
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/gridCells/ButtonInCell.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,14 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from '../../../../Elements/Button/Button.js';
+export var ButtonInCell = function (props) {
+    return _jsx(Button, __assign({}, props, { appearance: "secondaryLg", sizing: "grid" }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonInCell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Button_1 = __importDefault(require("../../../../Elements/Button/Button"));
-var ButtonInCell = function (props) {
-    return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, props, { appearance: "secondaryLg", sizing: "grid" }));
-};
-exports.ButtonInCell = ButtonInCell;

package/ui/Blocks/CommonGrid/components/gridCells/Date.js

@@ -1,15 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateCell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var get_1 = __importDefault(require("lodash/fp/get"));
-var luxon_1 = require("luxon");
-var DateCell = function (_a) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import get from 'lodash/fp/get';
+import { DateTime } from 'luxon';
+export var DateCell = function (_a) {
     var rowData = _a.rowData, column = _a.column;
-    var value = (0, get_1.default)(column.name, rowData);
-    return value ? (0, jsx_runtime_1.jsx)("span", { className: "cell", children: luxon_1.DateTime.fromISO(value).toFormat('dd. MM. yyyy') }) : null;
+    var value = get(column.name, rowData);
+    return value ? _jsx("span", { className: "cell", children: DateTime.fromISO(value).toFormat('dd. MM. yyyy') }) : null;
 };
-exports.DateCell = DateCell;

package/ui/Blocks/CommonGrid/components/gridCells/DateTime.js

@@ -1,20 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateTimeCell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var get_1 = __importDefault(require("lodash/fp/get"));
-var luxon_1 = require("luxon");
+import { jsx as _jsx } from "react/jsx-runtime";
+import get from 'lodash/fp/get';
+import { DateTime } from 'luxon';
 var defaultProps = {
     dateTimeFormat: 'dd. MM. yyyy HH:mm',
 };
-var DateTimeCell = function (_a) {
+export var DateTimeCell = function (_a) {
     var _b;
     var rowData = _a.rowData, column = _a.column;
-    var value = (0, get_1.default)(column.name, rowData);
+    var value = get(column.name, rowData);
     var dateTimeFormat = ((_b = column === null || column === void 0 ? void 0 : column.passProps) !== null && _b !== void 0 ? _b : defaultProps).dateTimeFormat;
-    return value ? (0, jsx_runtime_1.jsx)("span", { className: "cell", children: luxon_1.DateTime.fromISO(value, { setZone: true }).toFormat(dateTimeFormat) }) : null;
+    return value ? _jsx("span", { className: "cell", children: DateTime.fromISO(value, { setZone: true }).toFormat(dateTimeFormat) }) : null;
 };
-exports.DateTimeCell = DateTimeCell;