@mailstep/design-system 0.8.25 → 0.8.26-beta.0

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

@@ -1,10 +0,0 @@
-export var hasSortTerminated = function (_a) {
-    var allowSortingOnlyUnderTotalRows = _a.allowSortingOnlyUnderTotalRows, totalRowsCount = _a.totalRowsCount;
-    var allowSorting = allowSortingOnlyUnderTotalRows && totalRowsCount;
-    var isSortTerminatedAppeal = !!(allowSorting && totalRowsCount > allowSortingOnlyUnderTotalRows[0]);
-    var isSortTerminated = !!(allowSorting && totalRowsCount > allowSortingOnlyUnderTotalRows[1]);
-    return {
-        isSortTerminatedAppeal: isSortTerminatedAppeal,
-        isSortTerminated: isSortTerminated
-    };
-};

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

@@ -1,105 +0,0 @@
-import ActionsFilter from '../components/Filters/ActionsFilter';
-import BooleanSelect from '../components/Filters/BooleanSelect';
-import DatePickerRange from '../components/Filters/DatePickerRange';
-import GridSelect from '../components/Filters/GridSelect';
-import NumberRange from '../components/Filters/NumberRange';
-import TextRange from '../components/Filters/TextRange';
-var isDefined = function (val) { return typeof val !== 'undefined'; };
-export var getCellSizeProps = function (column, columnWidth) {
-    if (!column)
-        return {};
-    var fixedSize = column.fixedSize, flexGrow = column.flexGrow, flexShrink = column.flexShrink, sticky = column.sticky;
-    return {
-        flexBasis: columnWidth,
-        flexGrow: fixedSize ? 0 : isDefined(flexGrow) ? flexGrow : 1,
-        flexShrink: isDefined(flexShrink) ? flexShrink : 1,
-        maxWidth: sticky ? columnWidth : 'auto'
-    };
-};
-export var getSortName = function (column) {
-    return column.systemName || column.name;
-};
-export var getFilterName = function (column) {
-    return column.systemFilter || column.systemName || column.name;
-};
-export var isColumnOn = function (column, columnConfig) {
-    var _a;
-    if (column.alwaysOn)
-        return true;
-    if (column.alwaysOff)
-        return false;
-    var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
-    if (typeof isHidden === 'boolean')
-        return !isHidden; // isHidden is defined/stored => use user value
-    if (!!column.defaultHidden && !!(columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]))
-        return true; // is default hidden but activated
-    else
-        return !column.defaultHidden;
-};
-export var calculatePaginator = function (page, rowsPerPage) { return ({
-    offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
-    limit: rowsPerPage
-}); };
-export var createFilterType = function (columnDefinition) {
-    if (columnDefinition.filterOptions || columnDefinition.asyncLoadKey)
-        return 'options';
-    else
-        return columnDefinition.filteringType || 'text';
-};
-export var getGroups = function (columns) {
-    return columns.map(function (column, key) {
-        var previousGroup = key > 0 && columns[key - 1].group;
-        return {
-            name: column.group,
-            start: !!(column.group && (!previousGroup || (previousGroup && previousGroup !== column.group))),
-            end: !!(column.group && (!columns[key + 1] || columns[key + 1].group !== column.group))
-        };
-    });
-};
-export var getGroupClassNames = function (group) {
-    return "".concat((group === null || group === void 0 ? void 0 : group.start) ? 'group-start' : '', " ").concat((group === null || group === void 0 ? void 0 : group.end) ? 'group-end' : '');
-};
-export var getStickyCollClassNames = function (sticky, stickTo) {
-    return !sticky ? '' : "".concat(stickTo ? " sticky sticky-".concat(stickTo) : ' sticky sticky-left');
-};
-export var getFilters = function (optimizeFilters) {
-    var filters = {
-        number: { CellComponent: NumberRange },
-        text: { CellComponent: TextRange },
-        date: { CellComponent: DatePickerRange },
-        flag: { CellComponent: BooleanSelect },
-        options: { CellComponent: GridSelect },
-        actions: { CellComponent: ActionsFilter }
-    };
-    if (optimizeFilters) {
-        filters.text.defaultExtraProps = { defaultComparator: 'eq' };
-    }
-    return filters;
-};
-/** Returns true when a filter value should be counted / applied */
-export var isFilterActive = function (value) {
-    if (value == null)
-        return false;
-    if (Array.isArray(value))
-        return !!value.length;
-    if (typeof value === 'object')
-        return value.value != null && value.value !== '';
-    return value !== '';
-};
-export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
-    var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
-    var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });
-    if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) {
-        console.error('Grid can have only sticky column on each side.');
-    }
-    if (stickyLeftColls.length &&
-        colsOrder.indexOf(stickyLeftColls[0].name) !== 0 &&
-        stickyLeftColls[0].name !== 'actions-cell-cg') {
-        console.error('The left sticky column should be the first one in a row');
-    }
-    if (stickyRightColls.length &&
-        colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1 &&
-        stickyRightColls[0].name !== 'actions-cell-cg') {
-        console.error('The Right sticky column should be the last one in a row');
-    }
-};

package/ui/Blocks/CornerDialog/CornerDialog.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import Icon from '../../Elements/Icon/Icon';
-import { Portal } from '../../Elements/Portal';
-import { Container, Header, Status, StatusText, Wrapper, CloseBtn } from './styles';
-import { statusToColors, statusToIcon } from './utils';
-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];
-    useEffect(function () {
-        setIsMounted(true);
-    }, []);
-    var intent = _intent !== null && _intent !== void 0 ? _intent : 'info';
-    var _d = statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;
-    if (!isOpen)
-        return null;
-    return (_jsx(Portal, { children: _jsxs(Container, { "$mounted": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, "data-testid": "corner-dialog-close-btn", children: _jsx(Icon, { icon: "close", size: "25px" }) }), _jsx(Wrapper, { children: children })] }) }));
-};

package/ui/Blocks/CornerDialog/index.js

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

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

@@ -1,54 +0,0 @@
-import { CornerDialog } from '../CornerDialog';
-var meta = {
-    title: 'Blocks/CornerDialog',
-    component: CornerDialog,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-var statusToTitle = {
-    info: function () { return 'Info'; },
-    success: function () { return 'Success'; },
-    error: function () { return 'Error'; },
-    warning: function () { return 'Warning'; },
-};
-export var InfoCornerDialog = {
-    args: {
-        title: 'Info Title',
-        children: 'Info corner dialog content',
-        statusToTitle: statusToTitle,
-        intent: 'info',
-        isOpen: true,
-        onClose: console.log
-    },
-};
-export var SuccessCornerDialog = {
-    args: {
-        title: 'Success Title',
-        children: 'Success corner dialog content',
-        statusToTitle: statusToTitle,
-        intent: 'success',
-        isOpen: true,
-        onClose: console.log
-    },
-};
-export var ErrorCornerDialog = {
-    args: {
-        title: 'Error Title',
-        children: 'Error corner dialog content',
-        statusToTitle: statusToTitle,
-        intent: 'error',
-        isOpen: true,
-        onClose: console.log
-    },
-};
-export var WarningCornerDialog = {
-    args: {
-        title: 'Warning Title',
-        children: 'Warning corner dialog content',
-        statusToTitle: statusToTitle,
-        intent: 'warning',
-        isOpen: true,
-        onClose: console.log
-    },
-};

package/ui/Blocks/CornerDialog/styles.js

@@ -1,21 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 10;\n  bottom: 3rem;\n  right: 0.6rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: cornerDialogShadow;\n  width: 95vw;\n  max-width: 400px;\n  padding: 50px 30px 30px;\n  color: typoPrimary;\n  transition: opacity 225ms linear;\n  opacity: ", ";\n  @media (min-width: 768px) {\n    right: 3rem;\n    width: 400px;\n  }\n"], ["\n  position: fixed;\n  z-index: 10;\n  bottom: 3rem;\n  right: 0.6rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: cornerDialogShadow;\n  width: 95vw;\n  max-width: 400px;\n  padding: 50px 30px 30px;\n  color: typoPrimary;\n  transition: opacity 225ms linear;\n  opacity: ", ";\n  @media (min-width: 768px) {\n    right: 3rem;\n    width: 400px;\n  }\n"])), function (_a) {
-    var $mounted = _a.$mounted;
-    return ($mounted ? 1 : 0);
-});
-export var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 15px;\n  color: typoPrimary;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n"], ["\n  margin-bottom: 15px;\n  color: typoPrimary;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n"])));
-export var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n"])));
-export var Status = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  padding: 6px 10px;\n  text-transform: uppercase;\n  border-radius: 12px 0 12px 0;\n  background-color: ", ";\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  padding: 6px 10px;\n  text-transform: uppercase;\n  border-radius: 12px 0 12px 0;\n  background-color: ", ";\n"])), function (_a) {
-    var background = _a.background;
-    return th.color(background);
-});
-export var CloseBtn = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n"], ["\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n"])));
-export var StatusText = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: 6px;\n  font-size: 14px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: inline-block;\n  margin-left: 6px;\n  font-size: 14px;\n  font-weight: 700;\n  color: ", ";\n"])), function (_a) {
-    var fontColor = _a.fontColor;
-    return th.color(fontColor);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Blocks/CornerDialog/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Blocks/CornerDialog/utils.js

@@ -1,12 +0,0 @@
-export var statusToColors = {
-    info: { fontColor: 'gray1', backgroundColor: 'lightGray7', fill: 'gray1' },
-    success: { fontColor: 'white', backgroundColor: 'green', fill: 'white' },
-    error: { fontColor: 'white', backgroundColor: 'red1', fill: 'white' },
-    warning: { fontColor: 'blue2', backgroundColor: 'yellow1', fill: 'blue2' },
-};
-export var statusToIcon = {
-    info: 'info',
-    success: 'circleCheck',
-    error: 'circleX',
-    warning: 'circleTriangle',
-};

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Link } from 'react-router-dom';
-import { MenuItemsListItem } from '../../styles';
-export var MenuItem = function (_a) {
-    var item = _a.item;
-    return (_jsx(MenuItemsListItem, { onClick: item.onClick, pointer: !!item.onClick, children: item.link ? _jsx(Link, { to: item.link, children: item.title }) : item.title }));
-};

package/ui/Blocks/Header/components/MenuItems/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MenuItem } from './components/MenuItem';
-import { MenuItemsList } from './styles';
-export var MenuItems = function (_a) {
-    var items = _a.items;
-    return (_jsx(MenuItemsList, { children: items === null || items === void 0 ? void 0 : items.map(function (item, key) { return (_jsx(MenuItem, { item: item }, key)); }) }));
-};

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -1,11 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n"], ["\n  display: flex;\n  gap: 10px;\n"])));
-export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"], ["\n  ", ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"])), function (_a) {
-    var pointer = _a.pointer;
-    return pointer && 'cursor: pointer;';
-});
-var templateObject_1, templateObject_2;

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/index.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Avatar from '../../../../../../Elements/Avatar';
-import { H7 } from '../../../../../../Elements/Typography';
-import { AvatarWrapper, UserInfo } from './styles';
-export var UserInfoBlock = function (_a) {
-    var userName = _a.userName, role = _a.role;
-    return (_jsxs(AvatarWrapper, { children: [_jsx(Avatar, { colorBack: "lightGray7", size: 34 }), _jsxs(UserInfo, { children: [_jsx(H7, { variant: "bold", mt: 0, mb: "4px", children: userName }), _jsx(H7, { mt: 0, mb: 0, children: role })] })] }));
-};

package/ui/Blocks/Header/components/UserMenu/components/UserInfo/styles.js

@@ -1,8 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var UserInfo = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
-export var AvatarWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 15px;\n  margin-bottom: 20px;\n"], ["\n  display: flex;\n  column-gap: 15px;\n  margin-bottom: 20px;\n"])));
-var templateObject_1, templateObject_2;

package/ui/Blocks/Header/components/UserMenu/hooks/index.js

@@ -1 +0,0 @@
-export { useLogout } from './useLogout';

package/ui/Blocks/Header/components/UserMenu/hooks/useLogout.js

@@ -1,10 +0,0 @@
-export var useLogout = function (_a) {
-    var closeDropdown = _a.closeDropdown, onLogout = _a.onLogout;
-    var handleLogout = function () {
-        closeDropdown();
-        onLogout === null || onLogout === void 0 ? void 0 : onLogout();
-    };
-    return {
-        handleLogout: handleLogout
-    };
-};

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import Avatar from '../../../../Elements/Avatar';
-import Button from '../../../../Elements/Button';
-import { useToggleAndClose } from '../../../../hooks/useToggleAndClose';
-import Popover from '../../../Popover';
-import { UserInfoBlock } from './components/UserInfo';
-import { Trans } from '@lingui/react';
-import { useLogout } from './hooks';
-import { DropdownContentWrap, Line, UserWrap } from './styles';
-export var UserMenu = function (_a) {
-    var _b, _c, _d, _e;
-    var user = _a.user, onLogout = _a.onLogout;
-    var _f = useToggleAndClose(false), isDropdownOpen = _f[0], toggleDropdown = _f[1], closeDropdown = _f[2];
-    var parentRef = useRef(null);
-    var handleLogout = useLogout({ closeDropdown: closeDropdown, onLogout: onLogout }).handleLogout;
-    return (_jsxs(UserWrap, { children: [_jsx("div", { ref: parentRef, onClick: toggleDropdown, children: _jsx(Avatar, { colorBack: isDropdownOpen ? 'lightGray7' : 'neutral20', size: 34 }) }), isDropdownOpen && (_jsx(Popover, { parentRef: parentRef, onClose: closeDropdown, children: _jsxs(DropdownContentWrap, { children: [_jsx(UserInfoBlock, { userName: "".concat((_b = user === null || user === void 0 ? void 0 : user.firstName) !== null && _b !== void 0 ? _b : '', " ").concat((_c = user === null || user === void 0 ? void 0 : user.lastName) !== null && _c !== void 0 ? _c : ''), role: (_e = (_d = user === null || user === void 0 ? void 0 : user.roles) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : '' }), _jsx(Line, {}), _jsx(Button, { onClick: handleLogout, iconLeft: "logout", variant: "ghost", fullWidth: true, children: _jsx(Trans, { id: "logout", message: "Logout" }) })] }) }))] }));
-};

package/ui/Blocks/Header/components/UserMenu/styles.js

@@ -1,9 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { th } from '@xstyled/styled-components';
-export var UserWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"])));
-export var DropdownContentWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 295px;\n  background-color: white;\n  box-shadow: ", ";\n  padding: 24px 12px 12px 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin: 5px 10px 0 0;\n"], ["\n  width: 295px;\n  background-color: white;\n  box-shadow: ", ";\n  padding: 24px 12px 12px 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin: 5px 10px 0 0;\n"])), th.shadow('dropShadow'), th.color('lightGray6'));
-export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 4px 0;\n"], ["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 4px 0;\n"])), th.color('lightGray6'));
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/Header/hooks/useChangeLanguage.js

@@ -1,9 +0,0 @@
-export var useChangeLanguage = function (_a) {
-    var onChangeLanguage = _a.onChangeLanguage;
-    var handleChangeLanguage = function (languageCode) {
-        onChangeLanguage === null || onChangeLanguage === void 0 ? void 0 : onChangeLanguage(languageCode);
-    };
-    return {
-        handleChangeLanguage: handleChangeLanguage
-    };
-};

package/ui/Blocks/Header/index.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from 'react-router-dom';
-import Logo from '../../Elements/Logo';
-import LanguageSwitch from '../LanguageSwitch';
-import { HamburgerMenuButton } from '../SideMenu';
-import { MenuItems } from './components/MenuItems';
-import { UserMenu } from './components/UserMenu';
-import { useChangeLanguage } from './hooks/useChangeLanguage';
-import { languageItems as defaultLanguageItems } from './utils/languageItems';
-import { Container, LeftSide, RightSide, LanguageWrapper } from './styles';
-export var Header = function (_a) {
-    var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, showLanguageWithTitle = _a.showLanguageWithTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor, _c = _a.languageItems, languageItems = _c === void 0 ? defaultLanguageItems : _c, _d = _a.withLanguageSwitch, withLanguageSwitch = _d === void 0 ? true : _d, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
-    var handleChangeLanguage = useChangeLanguage({ onChangeLanguage: onChangeLanguage }).handleChangeLanguage;
-    return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [onOpenMobileSideMenu && _jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? (_jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth })) : (logo && _jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" })) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), withLanguageSwitch && (_jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, withTitle: showLanguageWithTitle, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage, languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor }) })), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
-};

package/ui/Blocks/Header/stories/Header.stories.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Header } from '../';
-import { LinguiContainer } from '../../../utils/LinguiContainer';
-var meta = {
-    title: 'Blocks/Header',
-    component: Header,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-var user = {
-    firstName: 'John',
-    lastName: 'Black',
-    roles: ['ADMIN']
-};
-var menuItems = [
-    {
-        id: 'aboutUs',
-        title: 'About us',
-        link: 'http://mailstep.com'
-    },
-    {
-        id: 'trackingPage',
-        title: 'Tracking package',
-        link: 'http://mailstep.com/tracking'
-    },
-    {
-        id: 'customerService',
-        title: 'Customer service',
-        link: 'http://mailstep.com/cc'
-    }
-];
-export default meta;
-export var HeaderBasic = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black" }) })); };
-export var HeaderWithUser = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", hasUserMenu: true, user: user }) })); };
-export var HeaderWithRightLinks = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", rightMenuItems: menuItems }) })); };
-export var HeaderWithLanguageSwitch = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs" }) })); };
-export var HeaderWithCustomLogo = function () { return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "//google.com", logoSrc: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", logoSrcWidth: "100px" }) })); };
-export var HeaderWithAllItems = function () {
-    var _a = useState(false), isMobileMenuOpen = _a[0], setIsMobileMenuOpen = _a[1];
-    return (_jsx(LinguiContainer, { children: _jsx(Header, { homeLink: "/", logo: "mailstep", logoVariant: "black", currentLanguage: "cs", rightMenuItems: menuItems, hasUserMenu: true, user: user, showLanguageWithTitle: true, isMobileMenuOpen: isMobileMenuOpen, languageFlagWrapBackgroundColor: "pink", onOpenMobileSideMenu: function () {
-                setIsMobileMenuOpen(function (state) { return !state; });
-            } }) }));
-};

package/ui/Blocks/Header/styles.js

@@ -1,11 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { headerHeight } from './utils/constants';
-import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"])), headerHeight, th.color('lightGray7'));
-export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var LanguageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n"])));
-export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/Header/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Blocks/Header/utils/constants.js

@@ -1 +0,0 @@
-export var headerHeight = '52px';

package/ui/Blocks/Header/utils/languageItems.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FlagCZ } from '../../../Elements/Icon/icons/FlagCZ';
-import { FlagUSA } from '../../../Elements/Icon/icons/FlagUSA';
-export var languageItems = [
-    {
-        languageCode: 'cs',
-        icon: _jsx(FlagCZ, { height: "16px" }),
-        title: 'Česky'
-    },
-    {
-        languageCode: 'en',
-        icon: _jsx(FlagUSA, { height: "16px" }),
-        title: 'English'
-    }
-];

package/ui/Blocks/HidePrint/HidePrint.js

@@ -1,13 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-var HideWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: contents;\n  @media print {\n    display: none;\n  }\n"], ["\n  display: contents;\n  @media print {\n    display: none;\n  }\n"])));
-var HidePrint = function (_a) {
-    var children = _a.children;
-    return _jsx(HideWrapper, { children: children });
-};
-export default HidePrint;
-var templateObject_1;

package/ui/Blocks/ImageList/ImageList.js

@@ -1,34 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useDraggable } from 'react-use-draggable-scroll';
-import Icon from '../../Elements/Icon/Icon';
-import LightBox, { useLightBox } from '../LightBox';
-import { AddPhoto } from './components/AddPhoto';
-import { ImageElement } from './components/ImageElement';
-import { useControls } from './hooks/useControls';
-import { useOnElementClick } from './hooks/useOnElementClick';
-import { x } from '@xstyled/styled-components';
-import { ImageListContainer, Control } from './styles';
-export var ImageList = function (_a) {
-    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, onImageClick = _a.onImageClick, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled, selectable = _a.selectable, max = _a.max;
-    var ref = useRef(null);
-    var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
-    var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
-    var _c = useOnElementClick({ onImageClick: onImageClick, onOpenLightBox: onOpenLightBox, selectable: selectable }), handleOnClick = _c.handleOnClick, selected = _c.selected;
-    var _d = useControls({ max: max, total: images === null || images === void 0 ? void 0 : images.length }), hasControls = _d.hasControls, position = _d.position, moveList = _d.moveList;
-    return (_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled, hasRemove: !!onImageRemove }), hasControls && (_jsx(Control, { onClick: moveList(-1), isLeft: true, isDisabled: position === 0, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "lessThen", size: "24px" }) })), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
-                    var _a, _b;
-                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onClick: handleOnClick(item, index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label, selected: index === selected, visible: !max || (index >= position && index < position + max) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
-                }) }))), hasControls && (_jsx(Control, { onClick: moveList(1), isDisabled: !!images && !!max && position >= (images === null || images === void 0 ? void 0 : images.length) - max, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "greaterThan", size: "24px" }) })), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
-};

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

@@ -1,68 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { AddPhoto as AddPhotoIcon } from '../../../../Elements/Icon/icons/AddPhoto';
-import { Container, HiddenInput } from './styles';
-export var AddPhoto = function (_a) {
-    var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled, hasRemove = _a.hasRemove;
-    var handleImageUpload = useCallback(function (event) {
-        var _a, _b;
-        if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]))
-            return;
-        var reader = new FileReader();
-        reader.readAsDataURL(event.target.files[0]);
-        reader.onload = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({
-                            base64image: (_a = reader.result) === null || _a === void 0 ? void 0 : _a.split(',').pop(),
-                            base64WithDataDeclaration: reader.result,
-                            file: (_b = event.target.files) === null || _b === void 0 ? void 0 : _b[0]
-                        }))];
-                    case 1:
-                        _c.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-    }, [onImageUpload]);
-    if (!onImageUpload)
-        return null;
-    return (_jsxs(Container, { isDisabled: isDisabled, hasRemove: hasRemove, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
-};

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

@@ -1,14 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n  margin-top: ", ";\n"], ["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n  margin-top: ", ";\n"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'), function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 0.6 : 1);
-}, function (_a) {
-    var hasRemove = _a.hasRemove;
-    return (hasRemove ? '15px' : '');
-});
-export var HiddenInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"], ["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"])));
-var templateObject_1, templateObject_2;

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

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '../../../../Elements/Icon';
-import { Container } from './styles';
-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/CloseButton/styles.js

@@ -1,10 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 30px;\n  height: 30px;\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s linear;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 30px;\n  height: 30px;\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s linear;\n"])), function (_a) {
-    var isDisabled = _a.isDisabled;
-    return th.color(isDisabled ? 'bgLightGray1' : 'red20');
-});
-var templateObject_1;

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

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseButton } from '../CloseButton';
-import { ImageTag } from '../ImageTag';
-import { Image, ImageWrapper } from './styles';
-export var ImageElement = function (_a) {
-    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onClick = _a.onClick, imageUrl = _a.imageUrl, selected = _a.selected, visible = _a.visible;
-    if (!imageUrl)
-        return null;
-    return (_jsxs(ImageWrapper, { visible: visible, hasImageRemove: !!onImageRemove, children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onClick, selected: selected }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
-};