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

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Button from '../../../../Elements/Button/Button';
+import Button from '../../../../Elements/Button/Button.js';
 export var ButtonInCell = function (props) {
     return _jsx(Button, __assign({}, props, { appearance: "secondaryLg", sizing: "grid" }));
 };

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

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import styled from '@xstyled/styled-components';
-import HighlightBox from '../../../../Elements/HighlightBox';
+import HighlightBox from '../../../../Elements/HighlightBox/index.js';
 var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"])));
 export var EnumInCell = function (_a) {
     var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size;

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

@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '@xstyled/styled-components';
 import { Link as ReactLink } from 'react-router-dom';
-import Spinner from '../../../../Elements/Spinner/Spinner';
-import Icon from '../../../../Elements/Icon/Icon';
+import Spinner from '../../../../Elements/Spinner/Spinner.js';
+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    cursor: pointer;\n    color: gray1;\n    :hover {\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  & > * {\n    cursor: pointer;\n    color: gray1;\n    :hover {\n      color: blue2;\n    }\n  }\n"])));
 export var IconButtonInCell = function (_a) {
     var icon = _a.icon, isLoading = _a.isLoading, onClick = _a.onClick, linkTo = _a.linkTo;

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

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '@xstyled/styled-components';
 import get from 'lodash/fp/get';
-import Image from '../../../../Elements/Image/Image';
+import Image from '../../../../Elements/Image/Image.js';
 var ImageWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  ", "\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var onClick = _a.onClick;
     return (onClick ? 'cursor: pointer;' : '');

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

@@ -3,6 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '@xstyled/styled-components';
-import { SimpleLink } from '../../../../Elements/SimpleLink';
+import { SimpleLink } from '../../../../Elements/SimpleLink/index.js';
 export var LinkInCell = styled(SimpleLink)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: underline;\n"], ["\n  text-decoration: underline;\n"])));
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/gridCells/RemoveItem.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 { Trans } from '@lingui/react';
-import Icon from '../../../../Elements/Icon/Icon';
+import Icon from '../../../../Elements/Icon/Icon.js';
 export var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var Trigger = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  color: gray;\n  font-weight: bold;\n  font-size: 10px;\n  & .faIcon {\n    margin-right: 4px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  color: gray;\n  font-weight: bold;\n  font-size: 10px;\n  & .faIcon {\n    margin-right: 4px;\n  }\n"])));
 export var RemoveCell = function (_a) {

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

@@ -6,7 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import styled from '@xstyled/styled-components';
 import { isFunction } from 'lodash/fp';
-import { IconButtonInCell } from './IconButtonInCell';
+import { IconButtonInCell } from './IconButtonInCell.js';
 var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  width: 100%;\n\n  svg {\n    color: blue2;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  width: 100%;\n\n  svg {\n    color: blue2;\n  }\n"])));
 export var RowActionsCell = function (_a) {
     var canEdit = _a.canEdit, onClick = _a.onClick, linkTo = _a.linkTo;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Toggle from '../../../../Elements/Toggle/Toggle';
+import Toggle from '../../../../Elements/Toggle/Toggle.js';
 export var SwitchInCell = function (props) {
     return _jsx(Toggle, __assign({}, props, { variant: "grid" }));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
-import { SwitchInCell } from './SwitchInCell';
+import { SwitchInCell } from './SwitchInCell.js';
 import get from 'lodash/fp/get';
 export var ToggleCell = function (_a) {
     var _b;

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

@@ -1,14 +1,14 @@
-export { DateCell } from './Date';
-export { DateTimeCell } from './DateTime';
-export { StringJoinCell } from './StringJoin';
-export { BoolIconCell } from './BoolIcon';
-export { RemoveCell } from './RemoveItem';
-export { LinkInCell } from './LinkInCell';
-export { ButtonInCell } from './ButtonInCell';
-export { IconButtonInCell } from './IconButtonInCell';
-export { SwitchInCell } from './SwitchInCell';
-export { ImageCell } from './ImageCell';
-export { EnumInCell } from './EnumInCell';
-export { HoverBubble } from './HoverBubble';
-export { RowActionsCell } from './RowActionsCell';
-export { ToggleCell } from './ToggleCell';
+export { DateCell } from './Date.js';
+export { DateTimeCell } from './DateTime.js';
+export { StringJoinCell } from './StringJoin.js';
+export { BoolIconCell } from './BoolIcon.js';
+export { RemoveCell } from './RemoveItem.js';
+export { LinkInCell } from './LinkInCell.js';
+export { ButtonInCell } from './ButtonInCell.js';
+export { IconButtonInCell } from './IconButtonInCell.js';
+export { SwitchInCell } from './SwitchInCell.js';
+export { ImageCell } from './ImageCell.js';
+export { EnumInCell } from './EnumInCell.js';
+export { HoverBubble } from './HoverBubble.js';
+export { RowActionsCell } from './RowActionsCell.js';
+export { ToggleCell } from './ToggleCell.js';

package/ui/Blocks/CommonGrid/hooks/useAddFilter.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { createFilterType, getFilterName } from '../utils';
+import { createFilterType, getFilterName } from '../utils/index.js';
 export var useAddFilter = function (onChange) {
     return useCallback(function (value, column) {
         if (onChange) {

package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js

@@ -8,7 +8,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useCallback, useMemo } from 'react';
-import getReadEditButtonCell from '../components/ReadEditButtonCell';
+import getReadEditButtonCell from '../components/ReadEditButtonCell/index.js';
 /**
  * Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
  * easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).

package/ui/Blocks/CommonGrid/index.js

@@ -1,10 +1,10 @@
-import CommonGrid from './CommonGridContainer';
-import withReduxActions from './HoC/withReduxActions';
-import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
-import useFloatingButton from './hooks/useFloatingButton';
-import * as Types from './types';
-export * from './StandardButtons';
-export * from './components/gridCells';
-import { useAddFilter } from './hooks/useAddFilter';
+import CommonGrid from './CommonGridContainer.js';
+import withReduxActions from './HoC/withReduxActions.js';
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store/index.js';
+import useFloatingButton from './hooks/useFloatingButton.js';
+import * as Types from './types.js';
+export * from './StandardButtons.js';
+export * from './components/gridCells/index.js';
+import { useAddFilter } from './hooks/useAddFilter.js';
 export default CommonGrid;
 export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, };

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

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import produce from 'immer';
 import getOr from 'lodash/fp/getOr';
-import migrateState from './migrateState';
+import migrateState from './migrateState.js';
 import { createSelector } from 'reselect';
 export var initialState = {
     page: 1,

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
-import { onRowEditClick, onRowReadClick, onRowAction, onBatchAction } from '../utils/actions';
-import { useAddFilter } from '../../hooks/useAddFilter';
-import withReduxActions from '../../HoC/withReduxActions';
-import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
-import withRedux from '../utils/withRedux';
-import { LinguiContainer } from '../utils/linguiContainer';
+import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils.js';
+import { onRowEditClick, onRowReadClick, onRowAction, onBatchAction } from '../utils/actions.js';
+import { useAddFilter } from '../../hooks/useAddFilter.js';
+import withReduxActions from '../../HoC/withReduxActions.js';
+import { columnDefinitions, enumColumn } from '../utils/columnDefinition.js';
+import withRedux from '../utils/withRedux.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 var ActionColumnButtons = {
     flexBasis: 160,
     canRowRead: true,

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGridContainer';
-import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
-import { columnDefinitions } from '../utils/columnDefinition';
-import withTheme from '../utils/withTheme';
-import withRouter from '../utils/withRouter';
-import withRedux from '../utils/withRedux';
-import { LinguiContainer } from '../utils/linguiContainer';
+import CommonGrid from '../../CommonGridContainer.js';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import withTheme from '../utils/withTheme.js';
+import withRouter from '../utils/withRouter.js';
+import withRedux from '../utils/withRedux.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 export default {
     title: '@Blocks/CommonGrid',
     decorators: [withTheme, withRouter, withRedux],

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGridContainer';
-import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
-import { columnDefinitions } from '../utils/columnDefinition';
-import { LinguiContainer } from '../utils/linguiContainer';
+import CommonGrid from '../../CommonGridContainer.js';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 export default {
     title: '@Blocks/CommonGrid',
 };

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGridContainer';
-import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
-import { oversizedColumnDefinition } from '../utils/columnDefinition';
-import { LinguiContainer } from '../utils/linguiContainer';
+import CommonGrid from '../../CommonGridContainer.js';
+import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { oversizedColumnDefinition } from '../utils/columnDefinition.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 export default {
     title: '@Blocks/CommonGrid',
 };

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGridContainer';
-import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
-import { oversizedColumnDefinition } from '../utils/columnDefinition';
-import { LinguiContainer } from '../utils/linguiContainer';
+import CommonGrid from '../../CommonGridContainer.js';
+import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { oversizedColumnDefinition } from '../utils/columnDefinition.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 export default {
     title: '@Blocks/CommonGrid',
 };

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
-import { onRowAction } from '../utils/actions';
-import { columnDefinitions } from '../utils/columnDefinition';
-import withTheme from '../utils/withTheme';
-import withRouter from '../utils/withRouter';
-import withRedux from '../utils/withRedux';
-import { LinguiContainer } from '../utils/linguiContainer';
+import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { onRowAction } from '../utils/actions.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import withTheme from '../utils/withTheme.js';
+import withRouter from '../utils/withRouter.js';
+import withRedux from '../utils/withRedux.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 export default {
     title: '@Blocks/CommonGrid',
     decorators: [withTheme, withRouter, withRedux],

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGridContainer';
-import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
-import { columnDefinitions } from '../utils/columnDefinition';
-import { onRowAction } from '../utils/actions';
-import { LinguiContainer } from '../utils/linguiContainer';
+import CommonGrid from '../../CommonGridContainer.js';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import { onRowAction } from '../utils/actions.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 export default {
     title: '@Blocks/CommonGrid',
 };

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ReduxGrid, createRandomData } from '../utils/utils';
-import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions';
-import { columnDefinitions } from '../utils/columnDefinition';
-import withRedux from '../utils/withRedux';
-import { LinguiContainer } from '../utils/linguiContainer';
+import { ReduxGrid, createRandomData } from '../utils/utils.js';
+import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions.js';
+import { columnDefinitions } from '../utils/columnDefinition.js';
+import withRedux from '../utils/withRedux.js';
+import { LinguiContainer } from '../utils/linguiContainer.js';
 export var ActionColumnCheckboxes = {
     flexBasis: 160,
     forceCheckboxes: true,

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

@@ -12,9 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import faker from 'faker';
-import { rowClassSymbol } from '../../types';
-import withReduxActions from '../../HoC/withReduxActions';
-import CommonGrid from '../../CommonGridContainer';
+import { rowClassSymbol } from '../../types.js';
+import withReduxActions from '../../HoC/withReduxActions.js';
+import CommonGrid from '../../CommonGridContainer.js';
 export var enumValues = ['option A', 'option B', 'option C'];
 export var oversizedArrayColumns = 25;
 export var gridSelectors = {};

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from 'react-redux';
 import { combineReducers, createStore } from 'redux';
-import commonGridReducer from '../../store';
+import commonGridReducer from '../../store/index.js';
 export var withProvider = function (story) {
     var reducers = combineReducers({
         commonGrid: commonGridReducer,

package/ui/Blocks/CommonGrid/styles.js

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled, { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
-import { Button } from '../../Elements/Button';
-import CommonGrid from './CommonGrid';
+import { Button } from '../../Elements/Button/index.js';
+import CommonGrid from './CommonGrid.js';
 export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"], ["\n  padding-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"])), function (_a) {
     var isFixed = _a.isFixed;
     return (isFixed ? 'fixed' : 'relative');

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

@@ -1,8 +1,8 @@
-import NumberRange from '../components/NumberRange';
-import TextRange from '../components/TextRange';
-import DatePickerRange from '../components/DatePickerRange';
-import BooleanSelect from '../components/BooleanSelect';
-import GridSelect from '../components/GridSelect';
+import NumberRange from '../components/NumberRange/index.js';
+import TextRange from '../components/TextRange/index.js';
+import DatePickerRange from '../components/DatePickerRange/index.js';
+import BooleanSelect from '../components/BooleanSelect/index.js';
+import GridSelect from '../components/GridSelect/index.js';
 var isDefined = function (val) { return typeof val !== 'undefined'; };
 export var getActionCellSizeProps = function (column) {
     return {

package/ui/Blocks/CornerDialog/CornerDialog.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { statusToColors, statusToIcon } from './utils';
-import { Portal } from '../../Elements/Portal';
-import { Icon } from '../../Elements/Icon';
-import { Container, Header, Status, StatusText, Wrapper, CloseBtn } from './styles';
+import { statusToColors, statusToIcon } from './utils.js';
+import { Portal } from '../../Elements/Portal/index.js';
+import { Icon } from '../../Elements/Icon/index.js';
+import { Container, Header, Status, StatusText, Wrapper, CloseBtn } from './styles.js';
 export var CornerDialog = function (_a) {
     var title = _a.title, children = _a.children, onClose = _a.onClose, statusToTitle = _a.statusToTitle, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, _intent = _a.intent;
     var _c = useState(false), isMounted = _c[0], setIsMounted = _c[1];

package/ui/Blocks/CornerDialog/index.js

@@ -1,2 +1,2 @@
-import { CornerDialog } from './CornerDialog';
+import { CornerDialog } from './CornerDialog.js';
 export default CornerDialog;

package/ui/Blocks/CornerDialog/stories/CornerDialog.stories.js

@@ -1,4 +1,4 @@
-import { CornerDialog } from '../CornerDialog';
+import { CornerDialog } from '../CornerDialog.js';
 var meta = {
     title: 'Blocks/CornerDialog',
     component: CornerDialog,

package/ui/Blocks/ImageList/ImageList.js

@@ -12,11 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { useDraggable } from 'react-use-draggable-scroll';
-import LightBox, { useLightBox } from '../LightBox';
-import { AddPhoto } from './components/AddPhoto';
-import { ImageElement } from './components/ImageElement';
+import LightBox, { useLightBox } from '../LightBox/index.js';
+import { AddPhoto } from './components/AddPhoto/index.js';
+import { ImageElement } from './components/ImageElement/index.js';
 import { x } from '@xstyled/styled-components';
-import { ImageListContainer } from './styles';
+import { ImageListContainer } from './styles.js';
 export var ImageList = function (_a) {
     var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled;
     var ref = useRef();

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -36,8 +36,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { Container, HiddenInput } from './styles';
-import { AddPhoto as AddPhotoIcon } from '../../../../Elements/Icon/icons/AddPhoto';
+import { Container, HiddenInput } from './styles.js';
+import { AddPhoto as AddPhotoIcon } from '../../../../Elements/Icon/icons/AddPhoto.js';
 export var AddPhoto = function (_a) {
     var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled;
     var handleImageUpload = useCallback(function (event) {

package/ui/Blocks/ImageList/components/CloseButton/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '../../../../Elements/Icon';
-import { Container } from './styles';
+import { Icon } from '../../../../Elements/Icon/index.js';
+import { Container } from './styles.js';
 export var CloseButton = function (_a) {
     var onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled;
     return (_jsx(Container, { onClick: !isDisabled ? onImageRemove : undefined, isDisabled: isDisabled, children: _jsx(Icon, { icon: "close", size: "22px", fill: isDisabled ? 'magenta60' : 'red1' }) }));

package/ui/Blocks/ImageList/components/ImageElement/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Image } from './styles';
-import { ImageTag } from '../ImageTag';
-import { CloseButton } from '../CloseButton';
+import { Image } from './styles.js';
+import { ImageTag } from '../ImageTag/index.js';
+import { CloseButton } from '../CloseButton/index.js';
 import { x } from '@xstyled/styled-components';
 export var ImageElement = function (_a) {
     var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;

package/ui/Blocks/ImageList/components/ImageTag/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Tag from '../../../../Elements/Tag';
-import { Container } from './styles';
+import Tag from '../../../../Elements/Tag/index.js';
+import { Container } from './styles.js';
 export var ImageTag = function (_a) {
     var label = _a.label;
     if (!label)

package/ui/Blocks/ImageList/index.js

@@ -1,2 +1,2 @@
-import { ImageList } from './ImageList';
+import { ImageList } from './ImageList.js';
 export default ImageList;

package/ui/Blocks/ImageList/stories/ImageList.stories.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { ImageList } from '../ImageList';
+import { ImageList } from '../ImageList.js';
 var meta = {
     title: 'Blocks/ImageList',
     component: ImageList,

package/ui/Blocks/LightBox/LightBox.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../Elements/Button';
-import Modal from '../Modal';
+import { Button } from '../../Elements/Button/index.js';
+import Modal from '../Modal/index.js';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Container, Image, ButtonContainer, Description } from './styles';
+import { Container, Image, ButtonContainer, Description } from './styles.js';
 export var LightBox = function (_a) {
     var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
     if (!(images === null || images === void 0 ? void 0 : images.length))

package/ui/Blocks/LightBox/hooks/useLightBox.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useModal } from '../../Modal';
+import { useModal } from '../../Modal/index.js';
 export var useLightBox = function () {
     var _a = useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;
     var onOpenLightBox = useCallback(function (index) {

package/ui/Blocks/LightBox/index.js

@@ -1,3 +1,3 @@
-import { LightBox } from './LightBox';
-export { useLightBox } from './hooks/useLightBox';
+import { LightBox } from './LightBox.js';
+export { useLightBox } from './hooks/useLightBox.js';
 export default LightBox;

package/ui/Blocks/LightBox/stories/LightBox.stories.js

@@ -1,4 +1,4 @@
-import { LightBox } from '../LightBox';
+import { LightBox } from '../LightBox.js';
 var meta = {
     title: 'Blocks/LightBox',
     component: LightBox,

package/ui/Blocks/Modal/Modal.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useEffect } from 'react';
-import { Icon, Cancel } from '../../Elements/Icon';
-import { H2, H5 } from '../../Elements/Typography';
-import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper, } from './styles';
+import { Icon, Cancel } from '../../Elements/Icon/index.js';
+import { H2, H5 } from '../../Elements/Typography/index.js';
+import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper, } from './styles.js';
 import { x } from '@xstyled/styled-components';
-import { Button } from '../../Elements/Button';
-import { Portal } from '../../Elements/Portal';
-import { useClickOutside } from './hooks/useClickOutside';
-import { widthMap } from './utils';
+import { Button } from '../../Elements/Button/index.js';
+import { Portal } from '../../Elements/Portal/index.js';
+import { useClickOutside } from './hooks/useClickOutside.js';
+import { widthMap } from './utils.js';
 export var Modal = memo(function (_a) {
     var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onExtraAction = _a.onExtraAction, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, extraActionLabel = _a.extraActionLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, onClose = _a.onClose, _d = _a.hasFooter, hasFooter = _d === void 0 ? true : _d, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e, background = _a.background, _f = _a.ignoreClickOutside, ignoreClickOutside = _f === void 0 ? false : _f, _g = _a.closeEverywhere, closeEverywhere = _g === void 0 ? false : _g, _h = _a.withCloseIcon, withCloseIcon = _h === void 0 ? true : _h, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _j = _a.variant, variant = _j === void 0 ? 'compact' : _j, top = _a.top;
     var closeDialog = useCallback(function () {

package/ui/Blocks/Modal/index.js

@@ -1,4 +1,4 @@
-import { Modal } from './Modal';
-export { useModal } from './hooks/useModal';
-export { useClickOutside } from './hooks/useClickOutside';
+import { Modal } from './Modal.js';
+export { useModal } from './hooks/useModal.js';
+export { useClickOutside } from './hooks/useClickOutside.js';
 export default Modal;

package/ui/Blocks/Modal/stories/Modal.stories.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import Modal from '../';
+import Modal from '../index.js';
 var meta = {
     title: 'Blocks/Modal',
     component: Modal,

package/ui/Blocks/Modal/styles.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { css, th } from '@xstyled/styled-components';
-import { createRgba } from '../../utils';
+import { createRgba } from '../../utils/index.js';
 var Component;
 (function (Component) {
     Component["Header"] = "header";

package/ui/Blocks/Popover/index.js

@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '@xstyled/styled-components';
 import { Popper } from 'react-popper';
-import { useClickOutside } from '../Modal/hooks/useClickOutside';
-import Portal from '../../Elements/Portal';
+import { useClickOutside } from '../Modal/hooks/useClickOutside.js';
+import Portal from '../../Elements/Portal/index.js';
 var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n"], ["\n  z-index: 5;\n"])));
 var Popover = function (_a) {
     var placement = _a.placement, wrapper = _a.wrapper, children = _a.children, onClose = _a.onClose, parentRef = _a.parentRef;

package/ui/Blocks/Tabs/Tabs.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
-import { Text } from '../../Elements/Text';
-import { Icon } from '../../Elements/Icon';
+import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles.js';
+import { Text } from '../../Elements/Text/index.js';
+import { Icon } from '../../Elements/Icon/index.js';
 var Tab = function (_a) {
     var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;
     var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount;

package/ui/Blocks/Tabs/index.js

@@ -1,4 +1,4 @@
-import { Tabs } from './Tabs';
-export { TabContent } from './TabContent';
-export { useTabs } from './hooks/useTabs';
+import { Tabs } from './Tabs.js';
+export { TabContent } from './TabContent.js';
+export { useTabs } from './hooks/useTabs.js';
 export default Tabs;

package/ui/Blocks/Tabs/stories/Tabs.stories.js

@@ -1,4 +1,4 @@
-import { Tabs } from '../Tabs';
+import { Tabs } from '../Tabs.js';
 var meta = {
     title: 'Blocks/Tabs',
     component: Tabs,