@mailstep/design-system 0.3.5 → 0.4.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.3.5",
+  "version": "0.4.0-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -28,13 +28,13 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@storybook/addon-controls": "7.5.2",
-    "@storybook/addon-essentials": "7.5.2",
-    "@storybook/addon-interactions": "7.5.2",
-    "@storybook/addon-links": "7.5.2",
-    "@storybook/blocks": "7.5.2",
-    "@storybook/react": "7.5.2",
-    "@storybook/react-webpack5": "7.5.2",
+    "@storybook/addon-controls": "7.6.8",
+    "@storybook/addon-essentials": "7.6.8",
+    "@storybook/addon-interactions": "7.6.8",
+    "@storybook/addon-links": "7.6.8",
+    "@storybook/blocks": "7.6.8",
+    "@storybook/react": "7.6.8",
+    "@storybook/react-webpack5": "7.6.8",
     "@storybook/testing-library": "0.2.2",
     "@svgr/rollup": "^8.0.1",
     "@types/node": "^20.1.7",
@@ -57,7 +57,7 @@
     "react-script": "^2.0.5",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
-    "storybook": "7.5.2",
+    "storybook": "7.6.8",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",

package/ui/Blocks/LightBox/LightBox.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Elements/Button';
-import Modal from '../Modal';
+import Modal, { Variant } from '../Modal';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Container, Image, ButtonContainer } 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, mobileFullscreen: true, miniCloseBtn: true, withCloseIcon: true, children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
+    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: Variant.MobileFullscreen, 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.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
             }) }) }));

package/ui/Blocks/Modal/Modal.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useEffect } from 'react';
-import { Icon } from '../../Elements/Icon';
-import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, H4, } from './styles';
+import { Variant } from './types';
+import { Icon, Cancel } from '../../Elements/Icon';
+import { H2, H5 } from '../../Elements/Typography';
+import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, } from './styles';
 import { x } from '@xstyled/styled-components';
 import { Button } from '../../Elements/Button';
 import { Portal } from '../../Elements/Portal';
 import { useClickOutside } from './hooks/useClickOutside';
-import { topSpaceMap, widthMap } from './utils';
+import { widthMap } from './utils';
 export var Modal = memo(function (_a) {
-    var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, _d = _a.topSpace, topSpace = _d === void 0 ? 'default' : _d, onClose = _a.onClose, _e = _a.hasFooter, hasFooter = _e === void 0 ? true : _e, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, _g = _a.whiteBg, whiteBg = _g === void 0 ? false : _g, _h = _a.miniCloseBtn, miniCloseBtn = _h === void 0 ? false : _h, _j = _a.ignoreClickOutside, ignoreClickOutside = _j === void 0 ? false : _j, _k = _a.closeEverywhere, closeEverywhere = _k === void 0 ? false : _k, _l = _a.withCloseIcon, withCloseIcon = _l === void 0 ? true : _l, _m = _a.mobileFullscreen, mobileFullscreen = _m === void 0 ? false : _m, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
+    var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, 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, _f = _a.whiteBg, whiteBg = _f === void 0 ? false : _f, _g = _a.ignoreClickOutside, ignoreClickOutside = _g === void 0 ? false : _g, _h = _a.closeEverywhere, closeEverywhere = _h === void 0 ? false : _h, _j = _a.withCloseIcon, withCloseIcon = _j === void 0 ? true : _j, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _k = _a.variant, variant = _k === void 0 ? Variant.Compact : _k;
     var closeDialog = useCallback(function () {
         if (onClose) {
             onClose();
@@ -31,5 +33,5 @@ export var Modal = memo(function (_a) {
     if (!isShown) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$whiteBg": whiteBg, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$mobileFullscreen": mobileFullscreen, children: [title && hasHeader && (_jsx(HeaderContainer, { topSpace: topSpaceMap[topSpace], children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), _jsx(H4, { children: title })] }) })), _jsx(ContentContainer, { topSpace: topSpaceMap[topSpace], "$mobileFullscreen": mobileFullscreen, children: children }), hasFooter && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })), hasHeader && !closeEverywhere && withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Icon, { icon: "close", size: miniCloseBtn ? '20px' : '26px' }) }))] }) }) }));
+    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$whiteBg": whiteBg, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == Variant.Default ? (_jsx(H2, { mt: 0, mb: 0, children: title })) : (_jsx(H5, { mt: 0, mb: 0, children: title }))] }) })), hasHeader && !closeEverywhere && withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] }))] }) }) }));
 });

package/ui/Blocks/Modal/index.d.ts

@@ -1,5 +1,6 @@
 import { Modal } from './Modal';
 export { useModal } from './hooks/useModal';
 export { useClickOutside } from './hooks/useClickOutside';
+export { Variant } from './types';
 export type { ControlProps, ModalProps, ModalData } from './types';
 export default Modal;

package/ui/Blocks/Modal/index.js

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

package/ui/Blocks/Modal/stories/Modal.stories.d.ts

@@ -2,18 +2,20 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("..").ModalProps>;
+    component: import("react").FC<import("../types").ModalProps>;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Compact: Story;
+export declare const MobileFullscreen: Story;
 export declare const ModalWithCloseAndConfirmBtns: Story;
-export declare const MobileNotificationModal: Story;
-export declare const ModalWithIcon: Story;
+export declare const ModalWithoutCloseButton: Story;
+export declare const ModalWithIconInTitle: Story;
 export declare const ModalLoading: Story;
 export declare const ModalWithWhiteBg: Story;
-export declare const ModalWithoutCloseIcon: Story;
 export declare const ModalWithoutHeader: Story;
 export declare const ModalWithoutFooter: Story;
 export declare const ModalWithoutHeaderAndFooter: Story;

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 '../Modal';
+import Modal, { Variant } from '../';
 var meta = {
     title: 'Blocks/Modal',
     component: Modal,
@@ -7,26 +7,43 @@ var meta = {
     argTypes: {},
 };
 export default meta;
+export var Default = {
+    args: {
+        title: 'Modal default version',
+        children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
+    },
+};
+export var Compact = {
+    args: {
+        title: 'Modal title',
+        children: _jsx(_Fragment, { children: "Modal compact version" }),
+        variant: Variant.Compact,
+    },
+};
+export var MobileFullscreen = {
+    args: {
+        children: _jsx(_Fragment, { children: "Mobile full screen version without title" }),
+        variant: Variant.MobileFullscreen,
+    },
+};
 export var ModalWithCloseAndConfirmBtns = {
     args: {
-        children: _jsx(_Fragment, { children: "Modal Content with Cancel and Submit buttons" }),
+        children: _jsx(_Fragment, { children: "Modal with narrow width" }),
         title: 'Modal title',
         width: 'narrow',
-        onClose: function () { return console.log('Close'); },
-        onConfirm: function () { return console.log('Submit'); },
     },
 };
-export var MobileNotificationModal = {
+export var ModalWithoutCloseButton = {
     args: {
+        title: 'Note',
         children: (_jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum, inventore natus qui repellendus suscipit vitae. Alias aliquam earum et ipsa labore, laboriosam maxime numquam odio recusandae, repellat, voluptas." })),
-        title: 'Poznamka',
         width: 'narrow',
         withCloseIcon: false,
         onClose: function () { return console.log('Close'); },
         onConfirm: undefined,
     },
 };
-export var ModalWithIcon = {
+export var ModalWithIconInTitle = {
     args: {
         children: _jsx(_Fragment, { children: "Modal with icon" }),
         title: 'Modal title',
@@ -47,17 +64,10 @@ export var ModalWithWhiteBg = {
         children: _jsx(_Fragment, { children: "Modal with white background" }),
         title: 'Modal title',
         width: 'narrow',
+        // @TODO fix this for SOLID requirements
         whiteBg: true,
     },
 };
-export var ModalWithoutCloseIcon = {
-    args: {
-        children: _jsx(_Fragment, { children: "Modal without close icon" }),
-        title: 'Modal title',
-        width: 'narrow',
-        withCloseIcon: false,
-    },
-};
 export var ModalWithoutHeader = {
     args: {
         children: _jsx(_Fragment, { children: "Modal without header" }),

package/ui/Blocks/Modal/styles.d.ts

@@ -1,3 +1,4 @@
+import { Variant } from './types';
 export declare const DialogOverlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     backgroundColor?: string | undefined;
 }, never>;
@@ -7,16 +8,14 @@ export declare const DialogWindow: import("styled-components").StyledComponent<"
     $minHeight?: string | undefined;
     $maxWidth?: string | undefined;
     $maxHeight?: string | undefined;
-    $mobileFullscreen: boolean;
+    variant: Variant;
 }, never>;
 export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    topSpace: string;
+    variant: Variant;
 }, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    topSpace: string;
-    $mobileFullscreen: boolean;
+    variant: Variant;
 }, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const H4: import("styled-components").StyledComponent<"h4", import("@xstyled/system").Theme, {}, never>;
 export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Modal/styles.js

@@ -2,44 +2,69 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { th } from '@xstyled/styled-components';
+import styled, { css, th } from '@xstyled/styled-components';
 import { createRgba } from '../../utils';
-export var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"], ["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"])), function (_a) {
+import { Variant } from './types';
+var Component;
+(function (Component) {
+    Component["Header"] = "header";
+    Component["DialogWindow"] = "dialogWindow";
+    Component["ContentContainer"] = "contentContainer";
+    Component["Title"] = "title";
+})(Component || (Component = {}));
+var variantStyles = function (component, variant) {
+    if (variant === void 0) { variant = Variant.Default; }
+    return ({
+        header: {
+            default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "], ["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "])), th.color('lightGray6')),
+            compact: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "], ["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "])), th.color('lightGray6')),
+            mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "]))),
+        },
+        dialogWindow: {
+            default: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
+            compact: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
+            mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 0;\n        max-width: 100% !important;\n      "], ["\n        border-radius: 0;\n        max-width: 100% !important;\n      "]))),
+        },
+        contentContainer: {
+            default: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "], ["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "]))),
+            compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n      "], ["\n        padding: 20px 20px 15px;\n      "]))),
+            mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "]))),
+        },
+        title: {}
+    }[component][variant]);
+};
+export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"])), function (_a) {
     var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
     return createRgba(backgroundColor, 0.6);
 });
-export var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (max-width: 576px) {\n    margin: auto;\n    ", ";\n  }\n"], ["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (max-width: 576px) {\n    margin: auto;\n    ", ";\n  }\n"])), function (_a) {
+export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: 100px auto 0 auto;\n  }\n"], ["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: 100px auto 0 auto;\n  }\n"])), function (_a) {
     var $whiteBg = _a.$whiteBg;
     return ($whiteBg ? th.color('white') : '#fefefe');
 }, function (_a) {
     var $minWidth = _a.$minWidth;
     return $minWidth || '10%';
-}, function (_a) {
-    var $maxWidth = _a.$maxWidth;
-    return $maxWidth || 'calc(100% - 32px)';
 }, function (_a) {
     var $minHeight = _a.$minHeight;
     return $minHeight || 'auto';
 }, function (_a) {
     var $maxHeight = _a.$maxHeight;
-    return $maxHeight || 'auto';
+    return $maxHeight || 'none';
 }, function (_a) {
-    var $mobileFullscreen = _a.$mobileFullscreen;
-    return $mobileFullscreen && 'border-radius: 0; max-width: 100% !important;';
-});
-export var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding: 30px;\n  padding-bottom: ", ";\n\n  @media (max-width: 576px) {\n    padding: 18px;\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding: 30px;\n  padding-bottom: ", ";\n\n  @media (max-width: 576px) {\n    padding: 18px;\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
-    var topSpace = _a.topSpace;
-    return topSpace;
-}, th.color('lightGray6'));
-export var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n"], ["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n"])), function (_a) {
-    var topSpace = _a.topSpace;
-    return topSpace;
+    var variant = _a.variant;
+    return variantStyles(Component.DialogWindow, variant);
 }, function (_a) {
-    var $mobileFullscreen = _a.$mobileFullscreen;
-    return ($mobileFullscreen ? '0' : '18px');
+    var $maxWidth = _a.$maxWidth;
+    return $maxWidth && "max-width: ".concat($maxWidth);
+});
+export var HeaderContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"])), function (_a) {
+    var variant = _a.variant;
+    return variantStyles(Component.Header, variant);
+});
+export var ContentContainer = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  min-height: 50px;\n  ", "\n"], ["\n  min-height: 50px;\n  ", "\n"])), function (_a) {
+    var variant = _a.variant;
+    return variantStyles(Component.ContentContainer, variant);
 });
-export var TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
-export var H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: typoPrimary;\n  margin: 0;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 700;\n\n  @media (max-width: 576px) {\n    font-size: 18px;\n    line-height: 18px;\n  }\n"], ["\n  color: typoPrimary;\n  margin: 0;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 700;\n\n  @media (max-width: 576px) {\n    font-size: 18px;\n    line-height: 18px;\n  }\n"])));
-export var ButtonsContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 1.5rem;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  padding: 1.5rem;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])));
-export var CloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n  top: 32px;\n  right: 24px;\n\n  @media (max-width: 576px) {\n    padding: 0;\n    width: 32px;\n    height: 32px;\n    background-color: bgLightGray1;\n    border-radius: 50%;\n    top: 12px;\n    right: 12px;\n  }\n"], ["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n  top: 32px;\n  right: 24px;\n\n  @media (max-width: 576px) {\n    padding: 0;\n    width: 32px;\n    height: 32px;\n    background-color: bgLightGray1;\n    border-radius: 50%;\n    top: 12px;\n    right: 12px;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+export var TitleContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n  \n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n  \n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
+export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  padding: 1.5rem;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  padding: 1.5rem;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])));
+export var CloseButton = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: absolute;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 1;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 1;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

package/ui/Blocks/Modal/types.d.ts

@@ -1,5 +1,9 @@
 import { MutableRefObject } from 'react';
-export type TopSpace = 'default' | 'medium';
+export declare enum Variant {
+    Default = "default",
+    Compact = "compact",
+    MobileFullscreen = "mobileFullscreen"
+}
 export type Width = 'wide' | 'mediumLarge' | 'medium' | 'narrow' | 'auto';
 export interface ModalProps {
     isShown?: boolean;
@@ -17,7 +21,6 @@ export interface ModalProps {
     hasHeader?: boolean;
     width?: Width;
     whiteBg?: boolean;
-    miniCloseBtn?: boolean;
     ignoreClickOutside?: boolean;
     closeEverywhere?: boolean;
     withCloseIcon?: boolean;
@@ -26,8 +29,7 @@ export interface ModalProps {
     minHeight?: string;
     maxWidth?: string;
     maxHeight?: string;
-    topSpace?: TopSpace;
-    mobileFullscreen?: boolean;
+    variant?: Variant;
 }
 export type ModalData = Record<string, any>;
 export type ControlProps<T = ModalData> = {

package/ui/Blocks/Modal/types.js

@@ -1 +1,6 @@
-export {};
+export var Variant;
+(function (Variant) {
+    Variant["Default"] = "default";
+    Variant["Compact"] = "compact";
+    Variant["MobileFullscreen"] = "mobileFullscreen";
+})(Variant || (Variant = {}));

package/ui/Blocks/Modal/utils.d.ts

@@ -1,3 +1,2 @@
-import { TopSpace, Width } from './types';
+import { Width } from './types';
 export declare const widthMap: Record<Width, string>;
-export declare const topSpaceMap: Record<TopSpace, string>;

package/ui/Blocks/Modal/utils.js

@@ -5,7 +5,3 @@ export var widthMap = {
     narrow: '600px',
     auto: 'auto',
 };
-export var topSpaceMap = {
-    default: '30px',
-    medium: '15px',
-};

package/ui/Elements/Icon/icons/Cancel.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const Cancel: FC<SvgProps>;

package/ui/Elements/Icon/icons/Cancel.js

@@ -0,0 +1,13 @@
+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 } from "react/jsx-runtime";
+export var Cancel = function (props) { return (_jsx("svg", __assign({ width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { id: "cancel", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.61873 0.375917C1.26726 0.0244455 0.697412 0.0244455 0.34594 0.375917C-0.00553197 0.727389 -0.00553197 1.29724 0.34594 1.64871L4.21225 5.51502L0.34594 9.38133C-0.00553159 9.7328 -0.00553156 10.3026 0.34594 10.6541C0.697412 11.0056 1.26726 11.0056 1.61873 10.6541L5.48504 6.78781L9.35135 10.6541C9.70282 11.0056 10.2727 11.0056 10.6241 10.6541C10.9756 10.3026 10.9756 9.7328 10.6241 9.38133L6.75783 5.51502L10.6241 1.64871C10.9756 1.29724 10.9756 0.727391 10.6241 0.375919C10.2727 0.024447 9.70282 0.024447 9.35135 0.375919L5.48504 4.24223L1.61873 0.375917Z", fill: "#22394E" }) }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -1,3 +1,4 @@
+export { Cancel } from './Cancel';
 export { FlagUSA } from './FlagUSA';
 export { FlagCZ } from './FlagCZ';
 export { FlagEL } from './FlagEL';

package/ui/Elements/Icon/icons/index.js

@@ -1,3 +1,4 @@
+export { Cancel } from './Cancel';
 export { FlagUSA } from './FlagUSA';
 export { FlagCZ } from './FlagCZ';
 export { FlagEL } from './FlagEL';

package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts

@@ -5,7 +5,7 @@ declare const meta: {
     component: ({ badge, ...iconProps }: {
         badge: "warning";
     } & import("..").IconProps) => JSX.Element;
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, {
         badge: "warning";
         icon: string;
         style?: "normal" | "light" | "solid" | undefined;

package/ui/ThemeProvider/themes/default.js

@@ -128,7 +128,7 @@ var defaultTheme = {
         cardShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)',
         smooth: '0px 4px 25px 0px #0000001a',
         // redesign:
-        dialogShadow: '1px 4px 7px rgba(0, 0, 0, 0.4)',
+        dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
         tooltipShadow: '0px 1px 4px 0 #B1B8C3',
         headerShadow: '1px 2px 3px #00000029',
         headerShadowB: '1px 1px 3px #00000029',

package/ui/ThemeProvider/themes/mailwise.js

@@ -159,7 +159,7 @@ var defaultTheme = {
         cardShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)',
         smooth: '0px 4px 25px 0px #0000001a',
         // redesign:
-        dialogShadow: '1px 4px 7px rgba(0, 0, 0, 0.4)',
+        dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
         tooltipShadow: '0px 1px 4px 0 #B1B8C3',
         headerShadow: '1px 2px 3px #00000029',
         headerShadowB: '1px 1px 3px #00000029',