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

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

@@ -1,25 +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';
-import { th } from '@xstyled/system';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"], ["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"])), th.radius('lg'), function (_a) {
-    var selected = _a.selected;
-    return (selected ? "3px solid" : '0');
-});
-export var ImageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: ", ";\n  display: ", ";\n  user-select: none;\n"], ["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: ", ";\n  display: ", ";\n  user-select: none;\n"])), function (_a) {
-    var hasImageRemove = _a.hasImageRemove;
-    return (hasImageRemove ? '15px' : '0');
-}, function (_a) {
-    var hasImageRemove = _a.hasImageRemove;
-    return (hasImageRemove ? '15px' : '0');
-}, function (_a) {
-    var hasImageRemove = _a.hasImageRemove;
-    return (hasImageRemove ? '100px' : '85px');
-}, function (_a) {
-    var visible = _a.visible;
-    return (visible ? 'block' : 'none');
-});
-var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Tag from '../../../../Elements/Tag';
-import { Container } from './styles';
-export var ImageTag = function (_a) {
-    var label = _a.label;
-    if (!label)
-        return null;
-    return (_jsx(Container, { children: _jsx(Tag, { size: "small", color: "darkGreen", textColor: "white", children: _jsx("b", { children: label }) }) }));
-};

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

@@ -1,7 +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 Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"], ["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"])));
-var templateObject_1;

package/ui/Blocks/ImageList/hooks/useControls.js

@@ -1,15 +0,0 @@
-import { useState, useCallback } from 'react';
-export var useControls = function (_a) {
-    var max = _a.max, _b = _a.total, total = _b === void 0 ? 0 : _b;
-    var _c = useState(0), position = _c[0], setPosition = _c[1];
-    var moveList = useCallback(function (direction) { return function () {
-        if (max) {
-            setPosition(function (position) { return Math.min(Math.max(position + direction, 0), total - max); });
-        }
-    }; }, [total]);
-    return {
-        moveList: moveList,
-        position: position,
-        hasControls: !!max && total > max
-    };
-};

package/ui/Blocks/ImageList/hooks/useOnElementClick.js

@@ -1,20 +0,0 @@
-import { useCallback, useState } from 'react';
-export var useOnElementClick = function (_a) {
-    var onImageClick = _a.onImageClick, onOpenLightBox = _a.onOpenLightBox, selectable = _a.selectable;
-    var _b = useState(-1), selected = _b[0], setSelected = _b[1];
-    var handleOnClick = useCallback(function (item, index) { return function () {
-        if (onImageClick) {
-            onImageClick(item);
-        }
-        else {
-            onOpenLightBox(index)();
-        }
-        if (selectable) {
-            setSelected(function (selected) { return selected !== index ? index : -1; });
-        }
-    }; }, [onImageClick, onOpenLightBox]);
-    return {
-        handleOnClick: handleOnClick,
-        selected: selected
-    };
-};

package/ui/Blocks/ImageList/index.js

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

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

@@ -1,63 +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 { ImageList } from '../ImageList';
-var meta = {
-    title: 'Blocks/ImageList',
-    component: ImageList,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-var images = [
-    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/200/300' },
-    { id: '2', smallUrl: 'https://picsum.photos/200/400', url: 'https://picsum.photos/200/400' },
-    { id: '3', smallUrl: 'https://picsum.photos/200/500', url: 'https://picsum.photos/200/500' },
-    { id: '4', smallUrl: 'https://picsum.photos/200/700', url: 'https://picsum.photos/200/700' },
-    { id: '5', smallUrl: 'https://picsum.photos/200/800', url: 'https://picsum.photos/200/800' },
-    { id: '6', smallUrl: 'https://picsum.photos/100/300', url: 'https://picsum.photos/100/300' },
-    { id: '7', smallUrl: 'https://picsum.photos/100/400', url: 'https://picsum.photos/100/400' },
-    { id: '8', smallUrl: 'https://picsum.photos/100/500', url: 'https://picsum.photos/100/500' },
-];
-export var ImageListDefault = {
-    args: {
-        images: images,
-        isDisabled: false,
-        onImageRemove: function (id) { return function () { return null; }; }
-    },
-};
-export var ImageListDisabled = {
-    args: {
-        images: images,
-        isDisabled: true,
-    },
-};
-export var ImageListWithItemDescription = {
-    args: {
-        images: images.map(function (img) { return (__assign(__assign({}, img), { label: 'Lorem Ipsum', date: '24.12.2024', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum' })); }),
-    },
-};
-export var ImageListSelectable = {
-    args: {
-        images: images,
-        selectable: true,
-    },
-};
-export var ImageListLimited = {
-    args: {
-        images: [
-            { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/200/300' },
-            { id: '2', smallUrl: 'https://picsum.photos/200/400', url: 'https://picsum.photos/200/400' },
-        ],
-        selectable: true,
-        max: 1,
-    },
-};

package/ui/Blocks/ImageList/styles.js

@@ -1,20 +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 ImageListContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
-    var isLeft = _a.isLeft;
-    return (isLeft ? '15px' : 0);
-}, function (_a) {
-    var hasRemove = _a.hasRemove;
-    return (hasRemove ? '15px' : 0);
-}, function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 'gray' : 'black');
-}, function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 'gray' : 'red1');
-});
-var templateObject_1, templateObject_2;

package/ui/Blocks/ImageList/types.js

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

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -1,40 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
-import DropdownMenu from '../../Elements/DropdownMenu';
-import Icon from '../../Elements/Icon/Icon';
-import Popover from '../Popover';
-import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap } from './styles';
-var placementMap = {
-    left: 'bottom-start',
-    right: 'bottom-end'
-};
-var LanguageSwitch = function (_a) {
-    var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, withTitle = _a.withTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor;
-    var _c = useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
-    var flagWrapRef = useRef(null);
-    var onClose = useCallback(function () {
-        setFlagDropdownVisible(false);
-    }, []);
-    var handleFlagClick = useCallback(function () {
-        setFlagDropdownVisible(!flagDropdownVisible);
-    }, [flagDropdownVisible]);
-    var languageToggle = useCallback(function (languageCode) { return function () {
-        onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(languageCode);
-    }; }, [onLanguageChange]);
-    var activeLanguageObj = useMemo(function () { return languageItems === null || languageItems === void 0 ? void 0 : languageItems.find(function (language) { return language.languageCode === activeLanguage; }); }, [activeLanguage, languageItems]);
-    var filteredLanguages = useMemo(function () { return languageItems === null || languageItems === void 0 ? void 0 : languageItems.filter(function (language) { return language.languageCode !== activeLanguage; }); }, [languageItems, activeLanguage]);
-    var formattedLanguages = useMemo(function () {
-        return filteredLanguages === null || filteredLanguages === void 0 ? void 0 : filteredLanguages.map(function (_a) {
-            var title = _a.title, icon = _a.icon, languageCode = _a.languageCode;
-            return ({
-                title: title,
-                icon: icon,
-                onClick: languageToggle(languageCode)
-            });
-        });
-    }, [filteredLanguages, languageToggle]);
-    if (!activeLanguageObj || !languageItems)
-        return null;
-    return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(Popover, { parentRef: flagWrapRef, onClose: onClose, placement: placementMap[placement], children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
-};
-export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/index.js

@@ -1,2 +0,0 @@
-import LanguageSwitch from './LanguageSwitch';
-export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import LanguageSwitch from '../';
-import { FlagCZ, FlagUSA } from '../../../Elements/Icon';
-var languageItems = [
-    {
-        languageCode: 'cs',
-        icon: _jsx(FlagCZ, {}),
-        title: 'Česky'
-    },
-    {
-        languageCode: 'en',
-        icon: _jsx(FlagUSA, {}),
-        title: 'English'
-    }
-];
-var meta = {
-    title: 'Blocks/LanguageSwitch',
-    component: LanguageSwitch,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-export var Default = {
-    args: {
-        languageItems: languageItems,
-        activeLanguage: 'en',
-        onLanguageChange: function (languageCode) {
-            console.log('Language changed:', languageCode);
-        }
-    }
-};

package/ui/Blocks/LanguageSwitch/styles.js

@@ -1,15 +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 StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"])));
-export var LanguageSwitchWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
-export var LanguageFlagWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"])), function (_a) {
-    var withTitle = _a.withTitle;
-    return (withTitle ? '16px' : '8px');
-}, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return backgroundColor || 'white';
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/LanguageSwitch/types.js

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

package/ui/Blocks/LightBox/LightBox.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../Elements/Button';
-import Modal from '../Modal';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Container, Image, ButtonContainer, Description } from './styles';
-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))
-        return null;
-    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
-                var _a;
-                return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && (_jsxs(Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primary", variant: 'default', children: lightBoxActionTitle }) }))] }) }, item.id));
-            }) }) }));
-};

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

@@ -1,17 +0,0 @@
-import { useCallback } from 'react';
-import { useModal } from '../../Modal';
-export var useLightBox = function () {
-    var _a = useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;
-    var onOpenLightBox = useCallback(function (index) {
-        if (index === void 0) { index = 0; }
-        return function () {
-            onOpen({ initialSlide: index });
-        };
-    }, [onOpen]);
-    return {
-        onOpenLightBox: onOpenLightBox,
-        onCloseLightBox: onClose,
-        isLightBoxOpen: isOpen,
-        lightBoxData: data
-    };
-};

package/ui/Blocks/LightBox/index.js

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

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

@@ -1,21 +0,0 @@
-import { LightBox } from '../LightBox';
-var meta = {
-    title: 'Blocks/LightBox',
-    component: LightBox,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-var images = [
-    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400', date: '1.12.2024', description: 'Lorem ipsum' },
-    { id: '2', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400', description: 'Lorem ipsum' },
-    { id: '3', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400', date: '1.12.2024' },
-    { id: '3', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
-];
-export var LightBoxDefault = {
-    args: {
-        images: images,
-        isLightBoxOpen: true,
-        onCloseLightBox: console.log
-    },
-};

package/ui/Blocks/LightBox/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 from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n"])));
-export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
-export var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: -60px;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: -60px;\n"])));
-export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.8);\n"], ["\n  padding: 10px;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.8);\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/LightBox/types.js

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

package/ui/Blocks/LoginPage/LoginPage.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Admin } from '../../Elements/Icon/icons/Admin';
-import { H6 } from '../../Elements/Typography/Typography';
-import LanguageSwitch from '../LanguageSwitch';
-import { LoginForm } from './components/LoginForm';
-import { SocialLinks } from './components/SocialLinks';
-import { EMAIL_ADDRESS } from './utils/links';
-import { Trans } from '@lingui/react';
-import { x } from '@xstyled/styled-components';
-import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from './styles';
-var Login = function (_a) {
-    var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, admin = _a.admin, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c, _d = _a.withPassword, withPassword = _d === void 0 ? true : _d, _e = _a.withLogin, withLogin = _e === void 0 ? true : _e, loginLabel = _a.loginLabel, passwordLabel = _a.passwordLabel;
-    return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsxs(LogoWrapper, { children: [_jsx(MainLogo, { brand: brand, variant: brandVariant }), admin && _jsx(Admin, {})] }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter, withPassword: withPassword, withLogin: withLogin, loginLabel: loginLabel, passwordLabel: passwordLabel })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));
-};
-export default Login;

package/ui/Blocks/LoginPage/components/LoginForm.js

@@ -1,63 +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, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import Button from '../../../Elements/Button/Button';
-import SingleSelect from '../../../Elements/SingleSelect/SingleSelect';
-import { Input } from '../../../Forms/Input/Input';
-import { i18n } from '@lingui/core';
-import { Trans } from '@lingui/react';
-import styled, { x } from '@xstyled/styled-components';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 10px;\n  & > div > H4 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    height: 300px;\n    min-width: 300px;\n    margin-bottom: 50px;\n    & > div > H4 {\n      display: block;\n    }\n  }\n"], ["\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 10px;\n  & > div > H4 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    height: 300px;\n    min-width: 300px;\n    margin-bottom: 50px;\n    & > div > H4 {\n      display: block;\n    }\n  }\n"])));
-var ButtonsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 15px;\n  width: 100%;\n  @media (min-width: 1024px) {\n    display: inline-block;\n    margin-top: 40px;\n  }\n"], ["\n  display: flex;\n  margin-top: 15px;\n  width: 100%;\n  @media (min-width: 1024px) {\n    display: inline-block;\n    margin-top: 40px;\n  }\n"])));
-export var LoginForm = function (_a) {
-    var onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, distributionCenterOptions = _a.distributionCenterOptions, withDistributionCenterSelect = _a.withDistributionCenterSelect, onChangeDistributionCenter = _a.onChangeDistributionCenter, selectedDistributionCenter = _a.selectedDistributionCenter, withPassword = _a.withPassword, withLogin = _a.withLogin, loginLabel = _a.loginLabel, passwordLabel = _a.passwordLabel;
-    var _b = useState(''), login = _b[0], setLogin = _b[1];
-    var _c = useState(''), password = _c[0], setPassword = _c[1];
-    var _d = useState(''), submitError = _d[0], setSubmitError = _d[1];
-    var _e = useState(''), loginError = _e[0], setLoginError = _e[1];
-    var _f = useState(''), passwordError = _f[0], setPasswordError = _f[1];
-    var _g = useState(''), dcCenterError = _g[0], setDCCenterError = _g[1];
-    var handleChangeLogin = useCallback(function (e) {
-        setLogin(e.target.value);
-    }, []);
-    var handleChangePassword = useCallback(function (e) {
-        setPassword(e.target.value);
-    }, []);
-    var handleSubmit = useCallback(function () {
-        setLoginError('');
-        setPasswordError('');
-        setDCCenterError('');
-        setSubmitError('');
-        if (withLogin && !login) {
-            setLoginError(i18n._({ id: 'requiredField', message: 'Required field' }));
-            return;
-        }
-        if (withPassword && !password) {
-            setPasswordError(i18n._({ id: 'requiredField', message: 'Required field' }));
-            return;
-        }
-        if (withDistributionCenterSelect && !selectedDistributionCenter) {
-            setDCCenterError(i18n._({ id: 'requiredField', message: 'Required field' }));
-            return;
-        }
-        onSubmit({ login: login, password: password })
-            .catch(function (error) {
-            error && setSubmitError(String(error));
-        })
-            .finally(function () {
-            setPassword('');
-        });
-    }, [login, password, selectedDistributionCenter, withDistributionCenterSelect, withPassword, onSubmit]);
-    var handleChangeDistributionCenter = useCallback(function (e) {
-        onChangeDistributionCenter === null || onChangeDistributionCenter === void 0 ? void 0 : onChangeDistributionCenter(e.target.value);
-    }, [onChangeDistributionCenter]);
-    return (_jsxs(Container, { children: [withLogin && (_jsx(x.div, { mt: "24px", children: _jsx(Input, { label: loginLabel || i18n._({ id: 'form.login.label', message: 'Login' }), placeholder: i18n._({ id: 'form.login.label', message: 'Login' }), type: "text", name: "login", autoFocus: true, error: loginError, value: login, onChange: handleChangeLogin, onEnter: handleSubmit }) })), withPassword && (_jsx(x.div, { mt: "12px", children: _jsx(Input, { label: passwordLabel || i18n._({ id: 'form.password.label', message: 'Password' }), placeholder: i18n._({ id: 'form.password.label', message: 'Password' }), name: "password", type: "password", value: password, onChange: handleChangePassword, error: passwordError, onEnter: handleSubmit }) })), withDistributionCenterSelect && (_jsx(x.div, { mt: "12px", children: _jsx(SingleSelect
-                // @ts-ignore
-                , { 
-                    // @ts-ignore
-                    onChange: handleChangeDistributionCenter, options: distributionCenterOptions, value: selectedDistributionCenter, placeholder: i18n._({ id: 'form.distributionCenter.label', message: 'Distribution center' }), label: i18n._({ id: 'form.distributionCenter.label', message: 'Distribution center' }), error: dcCenterError }) })), submitError && (_jsx(x.div, { mt: "12px", color: "red1", children: submitError })), _jsx(ButtonsContainer, { children: _jsx(Button, { onClick: handleSubmit, iconLeft: "login", isLoading: isSubmitting, disabled: isSubmitDisabled, fullWidth: true, children: _jsx(Trans, { id: "form.buttonSignIn", message: "Sign in" }) }) })] }));
-};
-var templateObject_1, templateObject_2;

package/ui/Blocks/LoginPage/components/SocialLinks.js

@@ -1,17 +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, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '../../../Elements/Icon/Icon';
-import { FACEBOOK_LINK, INSTAGRAM_LINK, LINKEDIN_LINK, TWITTER_LINK } from '../utils/links';
-import { Trans } from '@lingui/react';
-import styled, { th } from '@xstyled/styled-components';
-export var SocialLinksWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 600px;\n  margin: auto;\n  display: none;\n\n  @media (min-height: 520px) {\n    display: block;\n  }\n  @media (min-width: 1024px) {\n    position: relative;\n    width: 500px;\n  }\n"], ["\n  height: 600px;\n  margin: auto;\n  display: none;\n\n  @media (min-height: 520px) {\n    display: block;\n  }\n  @media (min-width: 1024px) {\n    position: relative;\n    width: 500px;\n  }\n"])));
-export var SocialLinksBody = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  bottom: 30px;\n  right: 0;\n  padding: 0 10px;\n  justify-content: center;\n\n  @media (min-width: 1024px) {\n    width: initial;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  bottom: 30px;\n  right: 0;\n  padding: 0 10px;\n  justify-content: center;\n\n  @media (min-width: 1024px) {\n    width: initial;\n  }\n"])));
-export var LinkTo = styled.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  margin: 0 15px;\n\n  @media (min-width: 1024px) {\n    margin-left: 20px;\n    margin-right: 0;\n  }\n"], ["\n  color: ", ";\n  margin: 0 15px;\n\n  @media (min-width: 1024px) {\n    margin-left: 20px;\n    margin-right: 0;\n  }\n"])), th.color('typoPrimary'));
-export var SocialFooter = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    font-size: 14px;\n    display: block;\n    position: absolute;\n    color: ", ";\n    font-weight: 600;\n    bottom: 0;\n    right: 0;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    font-size: 14px;\n    display: block;\n    position: absolute;\n    color: ", ";\n    font-weight: 600;\n    bottom: 0;\n    right: 0;\n  }\n"])), th.color('typoPrimary'));
-export var SocialLinks = function () {
-    return (_jsxs(SocialLinksWrapper, { children: [_jsxs(SocialLinksBody, { children: [_jsx(LinkTo, { target: "_blank", href: FACEBOOK_LINK, children: _jsx(Icon, { icon: "facebook" }) }), _jsx(LinkTo, { target: "_blank", href: INSTAGRAM_LINK, children: _jsx(Icon, { icon: "instagram" }) }), _jsx(LinkTo, { target: "_blank", href: LINKEDIN_LINK, children: _jsx(Icon, { icon: "linkedin" }) }), _jsx(LinkTo, { target: "_blank", href: TWITTER_LINK, children: _jsx(Icon, { icon: "twitter" }) })] }), _jsx(SocialFooter, { children: _jsx(Trans, { id: "card.entrustLogisticsEshopProfessionals", message: "Entrust the logistics of your e-shop to professionals." }) })] }));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/LoginPage/index.js

@@ -1,2 +0,0 @@
-import LoginPage from './LoginPage';
-export default LoginPage;

package/ui/Blocks/LoginPage/stories/LoginPage.stories.js

@@ -1,113 +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 } from "react/jsx-runtime";
-import LoginPage from '../';
-import { FlagCZ, FlagUSA } from '../../../Elements/Icon';
-import { LinguiContainer } from '../../../utils/LinguiContainer';
-var languageItems = [
-    {
-        languageCode: 'cs',
-        icon: _jsx(FlagCZ, {}),
-        title: 'Česky'
-    },
-    {
-        languageCode: 'en',
-        icon: _jsx(FlagUSA, {}),
-        title: 'English'
-    }
-];
-var distributionCenterOptions = [
-    { value: 'PRG1', label: 'PRG1' },
-    { value: 'ATH1', label: 'ATH1' },
-    { value: 'MLN1', label: 'MLN1' }
-];
-var meta = {
-    title: 'Blocks/LoginPage',
-    tags: ['autodocs']
-};
-export default meta;
-export var Default = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    console.log('Login data:', data);
-                    return [2 /*return*/];
-                });
-            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
-                console.log('Language changed:', language);
-            }, brand: "mailship", brandVariant: "s", admin: true, languageItems: languageItems }) }));
-};
-export var WithDistributionCenterSelect = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    console.log('Login data:', data);
-                    return [2 /*return*/];
-                });
-            }); }, isSubmitting: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
-                console.log('Language changed:', language);
-            }, brand: "mailship", brandVariant: "s", languageItems: languageItems, distributionCenterOptions: distributionCenterOptions, onChangeDistributionCenter: function (dcId) {
-                console.log('onChangeDistributionCenter:', dcId);
-            }, selectedDistributionCenter: "PRG1", withDistributionCenterSelect: true }) }));
-};
-export var WithBackgroundImage = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    console.log('Login data:', data);
-                    return [2 /*return*/];
-                });
-            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
-                console.log('Language changed:', language);
-            }, brand: "mailship", brandVariant: "s", languageItems: languageItems, backgroundImage: "mailship" }) }));
-};
-export var WarehouseBrand = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    console.log('Login data:', data);
-                    return [2 /*return*/];
-                });
-            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
-                console.log('Language changed:', language);
-            }, brand: "warehouse", brandVariant: "m", languageItems: languageItems, hasSupport: false, hasSocialLinks: false }) }));
-};
-export var WarehouseBrandWithAccessKey = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    alert("submit");
-                    console.log('Login data:', data);
-                    return [2 /*return*/];
-                });
-            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: console.log, brand: "warehouse", brandVariant: "m", languageItems: languageItems, hasSupport: false, hasSocialLinks: false, withPassword: false, loginLabel: "Access Key" }) }));
-};

package/ui/Blocks/LoginPage/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 Logo from '../../Elements/Logo/Logo';
-import mailship from './assets/mailship.jpg';
-import styled, { th } from '@xstyled/styled-components';
-var backgroundImageMap = {
-    mailship: mailship
-};
-export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  font-family: ", ";\n  flex-grow: 1;\n  background: ", ";\n  opacity: 1;\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    background: ", "\n    background-size: cover;\n  }\n"])), th('fonts.primary'), th('colors.bgLightGray'), function (_a) {
-    var backgroundImage = _a.backgroundImage;
-    return "transparent ".concat(backgroundImage ? "url(".concat(backgroundImageMap[backgroundImage], ")") : '', " 50% 0% no-repeat padding-box;");
-});
-export var LanguageBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"], ["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"])));
-export var CardBodyWithLanguage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"])));
-export var MailTo = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n"])), th.color('typoPrimary'), th.color('red1'));
-export var LogoWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin-top: 30px;\n  @media (min-width: 1024px) {\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  margin-top: 30px;\n  @media (min-width: 1024px) {\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 0;\n  }\n"])));
-export var MainLogo = styled(Logo)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 50%;\n  height: auto;\n"], ["\n  width: 50%;\n  height: auto;\n"])));
-export var Version = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: gray;\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  font-size: 12px;\n"], ["\n  color: gray;\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  font-size: 12px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Blocks/LoginPage/types.js

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

package/ui/Blocks/LoginPage/utils/links.js

@@ -1,7 +0,0 @@
-export var KB_URL = 'https://help.mailship.eu/kb/';
-export var MAILSHIP_CONTACT_URL = 'https://www.mailstep.cz/kontakt/';
-export var FACEBOOK_LINK = 'https://cs-cz.facebook.com/mailstepfulfillment';
-export var INSTAGRAM_LINK = 'https://www.instagram.com/mailstep_fulfillment';
-export var LINKEDIN_LINK = 'https://cz.linkedin.com/company/mail-step';
-export var TWITTER_LINK = 'https://twitter.com/mailstep';
-export var EMAIL_ADDRESS = 'mailstep@mailstep.cz';