@mailstep/design-system 0.6.2-beta.2 → 0.6.2-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.2-beta.2",
+  "version": "0.6.2-beta.4",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "storybook": "storybook dev -p 6006",
-    "build": "rm -rf ./build && tsc && vite build && cp package.json build && cp README.md build",
+    "build": "rm -rf ./build && tsc && tsc-alias && vite build && cp package.json build && cp README.md build",
     "build-storybook": "storybook build",
     "deploy": "npm run build && npm publish ./build",
     "dev": "yarn storybook",
@@ -30,8 +30,8 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/react": "3.17.2",
     "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-controls": "7.6.8",
     "@storybook/addon-essentials": "7.6.8",
@@ -83,6 +83,7 @@
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",
+    "tsc-alias": "1.8.8",
     "tslib": "^2.6.2",
     "typescript": "^5.0.4",
     "vite": "^5.0.10",
@@ -98,8 +99,8 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/react": "3.17.2",
     "@lingui/core": "3.17.2",
+    "@lingui/react": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",
     "babel-plugin-macros": "^3.1.0",

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -12,19 +12,19 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { x } from '@xstyled/styled-components';
-import { Row, MessageCell } from './components/Table';
-import OversizedScroll from './components/OversizedScroll';
-import GroupRow from './components/GroupRow';
-import FilterRow from './components/FilterRow';
-import DataRow from './components/DataRow';
-import HeadRow from './components/HeadRow';
-import useUxReset from './hooks/useUxReset';
-import useRowsKeyControls from './hooks/useRowsKeyControls';
-import useColumnSizes from './hooks/useColumnSizes';
-import { isColumnOn, getGroups } from './utils';
-import { initialState } from './store';
+import { Row, MessageCell } from './components/Table.js';
+import OversizedScroll from './components/OversizedScroll.js';
+import GroupRow from './components/GroupRow.js';
+import FilterRow from './components/FilterRow.js';
+import DataRow from './components/DataRow.js';
+import HeadRow from './components/HeadRow.js';
+import useUxReset from './hooks/useUxReset.js';
+import useRowsKeyControls from './hooks/useRowsKeyControls.js';
+import useColumnSizes from './hooks/useColumnSizes.js';
+import { isColumnOn, getGroups } from './utils/index.js';
+import { initialState } from './store/index.js';
 import { Trans } from '@lingui/react';
-import FloatingButton from './components/FloatingButton/FloatingButton';
+import FloatingButton from './components/FloatingButton/FloatingButton.js';
 var rowsStyles = { outline: 'none' };
 var defaultVoidFunction = function () {
     var args = [];

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -21,24 +21,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import useGetGridHeight from './hooks/useGetGridHeight';
+import useGetGridHeight from './hooks/useGetGridHeight.js';
 import { useEffect, useMemo } from 'react';
-import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils';
-import useEditReadAsColumn from './hooks/useEditReadAsColumn';
-import { useModal } from '../Modal/hooks/useModal';
-import useManageColumn from './hooks/useManageColumn';
-import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip, StyledColumnButton, } from './styles';
-import { H6 } from '../../Elements/Typography';
-import HidePrint from '../HidePrint/HidePrint';
-import ControlButtons from './components/ControlButtons';
+import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils/index.js';
+import useEditReadAsColumn from './hooks/useEditReadAsColumn.js';
+import { useModal } from '../Modal/hooks/useModal.js';
+import useManageColumn from './hooks/useManageColumn.js';
+import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip, StyledColumnButton, } from './styles.js';
+import { H6 } from '../../Elements/Typography/index.js';
+import HidePrint from '../HidePrint/HidePrint.js';
+import ControlButtons from './components/ControlButtons/index.js';
 import { x } from '@xstyled/styled-components';
-import ActionHead from './components/ActionHead';
-import { Pagination } from '../../Elements/Pagination';
-import TablePagination from './components/TablePagination';
-import Modal from '../Modal';
-import ManageColumnForm from './components/ManageColumnForm';
+import ActionHead from './components/ActionHead/index.js';
+import { Pagination } from '../../Elements/Pagination/index.js';
+import TablePagination from './components/TablePagination/index.js';
+import Modal from '../Modal/index.js';
+import ManageColumnForm from './components/ManageColumnForm/index.js';
 import { Trans } from '@lingui/react';
-import { Settings2 } from '../../Elements/Icon/icons/Settings2';
+import { Settings2 } from '../../Elements/Icon/icons/Settings2.js';
 var StyledCommonGrid = function (props) {
     var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;

package/ui/Blocks/CommonGrid/HoC/withReduxActions.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { createActions, createFullSelector } from '../store';
+import { createActions, createFullSelector } from '../store/index.js';
 var withReduxActions = function (gridName, prefix) {
     if (prefix === void 0) { prefix = 'grid'; }
     var actions = createActions(gridName);

package/ui/Blocks/CommonGrid/StandardButtons.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Trans } from '@lingui/react';
-import ButtonMore from './components/ButtonMore/ButtonMore';
+import ButtonMore from './components/ButtonMore/ButtonMore.js';
 export var getCreateButton = function (onCreate, canCreate, disabled) { return ({
     label: _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }),
     style: 'primary',

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

@@ -6,11 +6,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import styled from '@xstyled/styled-components';
 import { Trans } from '@lingui/react';
-import { Button } from '../../../../Elements/Button';
-import ButtonMore from '../ButtonMore/ButtonMore';
+import { Button } from '../../../../Elements/Button/index.js';
+import ButtonMore from '../ButtonMore/ButtonMore.js';
 import { i18n } from '@lingui/core';
-import { useToggleAllCheckbox } from '../../hooks/useToggleAllCheckbox';
-import { useGridActionTrigger } from '../../hooks/useGridActionTrigger';
+import { useToggleAllCheckbox } from '../../hooks/useToggleAllCheckbox.js';
+import { useGridActionTrigger } from '../../hooks/useGridActionTrigger.js';
 var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"])));
 var ActionsWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"], ["\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"])));
 var StyledText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"])));

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.js

@@ -7,9 +7,9 @@ import React, { memo, useRef } from 'react';
 import styled from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 import { Trans } from '@lingui/react';
-import ActionDropdownMenu from './ActionDropdownMenu';
-import Popover from '../../../../Popover';
-import Icon from '../../../../../Elements/Icon/Icon';
+import ActionDropdownMenu from './ActionDropdownMenu.js';
+import Popover from '../../../../Popover/index.js';
+import Icon from '../../../../../Elements/Icon/Icon.js';
 var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1 2;\n  min-width: 9rem;\n  height: 28px;\n  background-color: ", ";\n  color: ", ";\n  border: slim;\n  border-color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: ", ";\n  transition: 0.2s;\n  &:not(:disabled):hover {\n    color: ", ";\n    border-color: ", ";\n  }\n  p {\n    margin: 0;\n    margin-right: auto;\n    padding-right: 36px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1 2;\n  min-width: 9rem;\n  height: 28px;\n  background-color: ", ";\n  color: ", ";\n  border: slim;\n  border-color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: ", ";\n  transition: 0.2s;\n  &:not(:disabled):hover {\n    color: ", ";\n    border-color: ", ";\n  }\n  p {\n    margin: 0;\n    margin-right: auto;\n    padding-right: 36px;\n  }\n"])), th.color('white'), function (_a) {
     var $isDisabled = _a.$isDisabled;
     return ($isDisabled ? th.color('lightGray7') : th.color('lightGray5'));

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

@@ -1,2 +1,2 @@
-import ActionHead from './ActionHead';
+import ActionHead from './ActionHead.js';
 export default ActionHead;

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

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import GridSelect from '../GridSelect';
+import GridSelect from '../GridSelect/index.js';
 import { i18n } from '@lingui/core';
 var getFlagOptions = function () { return [
     { value: '', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.all', message: 'All' }) },

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

@@ -1,2 +1,2 @@
-import BooleanSelect from './BooleanSelect';
+import BooleanSelect from './BooleanSelect.js';
 export default BooleanSelect;

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

@@ -5,9 +5,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import styled from '@xstyled/styled-components';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
-import Button from '../../../../Elements/Button/Button';
-import DropdownMenu from '../../../../Elements/DropdownMenu';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside.js';
+import Button from '../../../../Elements/Button/Button.js';
+import DropdownMenu from '../../../../Elements/DropdownMenu/index.js';
 var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
 var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {
     var dropdownPosition = _a.dropdownPosition;

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

@@ -1,2 +1,2 @@
-import ButtonMore from './ButtonMore';
+import ButtonMore from './ButtonMore.js';
 export default ButtonMore;

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

@@ -12,11 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { x } from '@xstyled/styled-components';
-import { Cell } from './Table';
-import { useAddFilter } from '../hooks/useAddFilter';
-import { createFilterType, getStickyCollClassNames } from '../utils';
-import { getCellSizeProps, getGroupClassNames } from '../utils';
-import OverlayComponent from './FilterDropdown';
+import { Cell } from './Table.js';
+import { useAddFilter } from '../hooks/useAddFilter.js';
+import { createFilterType, getStickyCollClassNames } from '../utils/index.js';
+import { getCellSizeProps, getGroupClassNames } from '../utils/index.js';
+import OverlayComponent from './FilterDropdown.js';
 var ColumnFilterCell = function (_a) {
     var onChange = _a.onChange, value = _a.value, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group;
     var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);

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

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useEffect } from 'react';
 import styled, { x, css } from '@xstyled/styled-components';
-import Icon from '../../../../Elements/Icon/Icon';
+import Icon from '../../../../Elements/Icon/Icon.js';
 // ArrowWrap and WarningWrap need to have the same size to solve resizing issues
 var WRAPPER_WIDTH = 35;
 var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  font-size: 0.8rem;\n"], ["\n  width: 100%;\n  font-size: 0.8rem;\n"])));

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

@@ -1,2 +1,2 @@
-import ColumnTitle from './ColumnTitle';
+import ColumnTitle from './ColumnTitle.js';
 export default ColumnTitle;

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

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import styled from '@xstyled/styled-components';
-import { SortingUp, SortingDown } from './icons/Sorting';
+import { SortingUp, SortingDown } from './icons/Sorting.js';
 var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
 var ColumnTitle = function (_a) {
     var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;

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

@@ -5,9 +5,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { x } from '@xstyled/styled-components';
 import { Trans } from '@lingui/react';
-import ExtraControlButtons from '../ExtraControlButtons';
-import { ExtraControlButtonPosition } from '../../types';
-import Button from '../../../../Elements/Button/Button';
+import ExtraControlButtons from '../ExtraControlButtons/index.js';
+import { ExtraControlButtonPosition } from '../../types.js';
+import Button from '../../../../Elements/Button/Button.js';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"])));
 var ControlButtons = function (_a) {
     var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;

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

@@ -1,2 +1,2 @@
-import ControlButtons from './ControlButtons';
+import ControlButtons from './ControlButtons.js';
 export default ControlButtons;

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

@@ -12,8 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import get from 'lodash/fp/get';
-import { TextCell } from './Table';
-import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
+import { TextCell } from './Table.js';
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils/index.js';
 var DataCell = function (_a) {
     var column = _a.column, group = _a.group, rowData = _a.rowData, onRowAction = _a.onRowAction, displayColumnWidth = _a.displayColumnWidth;
     var Wrapper = column.fixedSize ? 'div' : TextCell;

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

@@ -24,16 +24,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { x } from '@xstyled/styled-components';
 import { Link } from 'react-router-dom';
-import { Cell, StyledDataRow } from './Table';
-import MemoDataCell from './DataCell';
-import EditIcon from './icons/Edit';
-import EyeOpenIcon from './icons/EyeOpen';
-import { getActionCellSizeProps } from '../utils';
-import { rowClassSymbol } from '../types';
+import { Cell, StyledDataRow } from './Table.js';
+import MemoDataCell from './DataCell.js';
+import EditIcon from './icons/Edit.js';
+import EyeOpenIcon from './icons/EyeOpen.js';
+import { getActionCellSizeProps } from '../utils/index.js';
+import { rowClassSymbol } from '../types.js';
 import { isFunction } from 'lodash/fp';
-import { useTimeMeasurement } from './utils';
-import Checkbox from '../../../Forms/Checkbox';
-import Button from '../../../Elements/Button/Button';
+import { useTimeMeasurement } from './utils.js';
+import Checkbox from '../../../Forms/Checkbox/index.js';
+import Button from '../../../Elements/Button/Button.js';
 var EmptySpan = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     return _jsx("span", __assign({}, props, { children: children }));

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

@@ -28,10 +28,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState, useCallback, useMemo } from 'react';
 import { DateTime } from 'luxon';
 import styled from '@xstyled/styled-components';
-import { sameDate } from './utils/sameDate';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
-import DatePicker from '../../../../Elements/DatePicker';
-import Input from '../../../../Forms/Input';
+import { sameDate } from './utils/sameDate.js';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside.js';
+import DatePicker from '../../../../Elements/DatePicker/index.js';
+import Input from '../../../../Forms/Input/index.js';
 import { i18n } from '@lingui/core';
 var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"
     // User readable date range.

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

@@ -1,2 +1,2 @@
-import DatePickerRange from './DatePickerRange';
+import DatePickerRange from './DatePickerRange.js';
 export default DatePickerRange;

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

@@ -15,8 +15,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import styled, { x } from '@xstyled/styled-components';
-import Button from '../../../../Elements/Button/Button';
-import DropdownSelect from '../../../../Elements/DropdownSelect';
+import Button from '../../../../Elements/Button/Button.js';
+import DropdownSelect from '../../../../Elements/DropdownSelect/index.js';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
 var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
 var ControlButton = function (_a) {

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

@@ -1,2 +1,2 @@
-import ExtraControlButtons from './ExtraControlButtons';
+import ExtraControlButtons from './ExtraControlButtons.js';
 export default ExtraControlButtons;

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

@@ -13,11 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import get from 'lodash/fp/get';
 import throttle from 'lodash/throttle';
-import ColumnFilterCell from './ColumnFilterCell';
-import { Row, Cell } from './Table';
-import { getActionCellSizeProps, getFilterName } from '../utils';
-import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
-import Checkbox from '../../../Forms/Checkbox';
+import ColumnFilterCell from './ColumnFilterCell.js';
+import { Row, Cell } from './Table.js';
+import { getActionCellSizeProps, getFilterName } from '../utils/index.js';
+import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox.js';
+import Checkbox from '../../../Forms/Checkbox/index.js';
 var FilterRow = function (_a) {
     var _b, _c;
     var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;

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

@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
 import styled from '@xstyled/styled-components';
-import DropdownMenu from '../../../../Elements/DropdownMenu';
-import Popover from '../../../Popover';
+import DropdownMenu from '../../../../Elements/DropdownMenu/index.js';
+import Popover from '../../../Popover/index.js';
 var FloatingWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  display: block;\n  position: absolute;\n  bottom: 20px;\n  right: 24px;\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])));
 var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 160px;\n  width: max-content;\n"], ["\n  min-width: 160px;\n  width: max-content;\n"])));
 export var StyledButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"], ["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));

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

@@ -1,2 +1,2 @@
-import FloatingButton from './FloatingButton';
+import FloatingButton from './FloatingButton.js';
 export default FloatingButton;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import MultiSelect from '../../../../Elements/MultiSelect';
-import SingleSelect from '../../../../Elements/SingleSelect';
+import MultiSelect from '../../../../Elements/MultiSelect/index.js';
+import SingleSelect from '../../../../Elements/SingleSelect/index.js';
 import isArray from 'lodash/isArray';
 var emptyValue = [];
 var SelectFilter = function (_a) {

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

@@ -1,2 +1,2 @@
-import GridSelect from './GridSelect';
+import GridSelect from './GridSelect.js';
 export default GridSelect;

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

@@ -11,8 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Row, Cell } from './Table';
-import { getCellSizeProps, getActionCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
+import { Row, Cell } from './Table.js';
+import { getCellSizeProps, getActionCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils/index.js';
 var GroupCell = function (_a) {
     var column = _a.column, group = _a.group, displayColumnWidth = _a.displayColumnWidth;
     var cellSizeProps = getCellSizeProps(column, displayColumnWidth);

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

@@ -16,10 +16,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import styled from '@xstyled/styled-components';
-import { Cell } from './Table';
-import ColumnTitle from './ColumnTitle';
-import Resize from './Resize';
-import { getGroupClassNames, getStickyCollClassNames } from '../utils';
+import { Cell } from './Table.js';
+import ColumnTitle from './ColumnTitle.js';
+import Resize from './Resize.js';
+import { getGroupClassNames, getStickyCollClassNames } from '../utils/index.js';
 var DraggableCell = styled(Cell)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var $isDragging = _a.$isDragging;
     return ($isDragging ? 'transparentRed' : 'transparent');

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

@@ -21,9 +21,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
-import { Row, Cell } from './Table';
-import HeadCell from './HeadCell';
-import { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils';
+import { Row, Cell } from './Table.js';
+import HeadCell from './HeadCell.js';
+import { getActionCellSizeProps, getCellSizeProps, getSortName } from '../utils/index.js';
 var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     var _a;
     return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return (_jsx(HeadCell, __assign({ name: column.name, systemName: column.systemName, isSortable: false, hasResize: false, isDragging: false, sortValue: null }, getCellSizeProps(column, displayColumnsWidth[column.name]), { title: column.title, sticky: column.sticky, stickTo: column.stickTo }), column.name)); });

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import styled from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
-import Icon from '../../../../Elements/Icon/Icon';
+import Icon from '../../../../Elements/Icon/Icon.js';
 export var List = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"], ["\n  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"])));
 export var ListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n\n  &:hover > span {\n    background-color: bgLightGray1;\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  padding: 1 0;\n  cursor: pointer;\n\n  &:hover > span {\n    background-color: bgLightGray1;\n  }\n"])), th('colors.bgLightGray1'));
 export var ListItemContent = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: ", ";\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    font-weight: bold;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: ", ";\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    font-weight: bold;\n  }\n"])), function (_a) {

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

@@ -1,2 +1,2 @@
-import IconList from './IconList';
+import IconList from './IconList.js';
 export default IconList;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { x } from '@xstyled/styled-components';
-import { ActionRow } from './components/ActionRow';
-import { Input } from '../../../../Forms/Input/Input';
+import { ActionRow } from './components/ActionRow.js';
+import { Input } from '../../../../Forms/Input/Input.js';
 import { i18n } from '@lingui/core';
 var ManageColumnForm = function (_a) {
     var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.js

@@ -17,10 +17,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { x, th } from '@xstyled/styled-components';
 import styled from 'styled-components';
-import Toggle from '../../../../../Elements/Toggle/Toggle';
-import { Group } from '../../../../../Elements/Icon/icons/Group';
+import Toggle from '../../../../../Elements/Toggle/Toggle.js';
+import { Group } from '../../../../../Elements/Icon/icons/Group.js';
 import { isObject } from 'lodash';
-import { H6 } from '../../../../../Elements/Typography/Typography';
+import { H6 } from '../../../../../Elements/Typography/Typography.js';
 import { i18n } from '@lingui/core';
 var RowLayout = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
     var $isVisible = _a.$isVisible;

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

@@ -1,2 +1,2 @@
-import ManageColumnForm from './ManageColumnForm';
+import ManageColumnForm from './ManageColumnForm.js';
 export default ManageColumnForm;

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

@@ -22,9 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
-import { Input } from '../../../../Forms/Input/Input';
-import IconList from '../IconList';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside.js';
+import { Input } from '../../../../Forms/Input/Input.js';
+import IconList from '../IconList/index.js';
 import { i18n } from '@lingui/core';
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;

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

@@ -1,2 +1,2 @@
-import NumberRange from './NumberRange';
+import NumberRange from './NumberRange.js';
 export default NumberRange;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { isFunction } from 'lodash/fp';
-import { RowActionsCell } from '../gridCells';
+import { RowActionsCell } from '../gridCells/index.js';
 var getReadEditButtonCell = function (actionColumn) {
     return function ReadEditButtonCell(_a) {
         var rowData = _a.rowData, onRowAction = _a.onRowAction;

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

@@ -1,2 +1,2 @@
-import ReadEditButtonCell from './ReadEditButtonCell';
+import ReadEditButtonCell from './ReadEditButtonCell.js';
 export default ReadEditButtonCell;

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

@@ -6,8 +6,8 @@ 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';
-import { Paragraph4 } from '../../../../Elements/Typography/Typography';
+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];

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

@@ -1,2 +1,2 @@
-import TablePagination from './TablePagination';
+import TablePagination from './TablePagination.js';
 export default TablePagination;

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

@@ -23,9 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 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';
-import { Input } from '../../../../Forms/Input/Input';
-import IconList from '../IconList/IconList';
+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;

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

@@ -1,2 +1,2 @@
-import TextRange from './TextRange';
+import TextRange from './TextRange.js';
 export default TextRange;

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

@@ -7,7 +7,7 @@ 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';
+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;