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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.3.4",
+  "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/Info.js

@@ -9,5 +9,5 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-export var Info = function (props) { return (_jsx("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", stroke: "#374151", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { d: "M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var Info = function (props) { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", stroke: "#374151", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 16V12", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 8H12.01", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };

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

@@ -9,5 +9,5 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-export var MakePhoto = function (props) { return (_jsx("svg", __assign({ width: "20", height: "19", viewBox: "0 0 20 19", fill: "none", stroke: "#22394E", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6377 4.10987C15.2647 4.10987 14.9267 3.89487 14.7677 3.55887C14.4807 2.95087 14.1157 2.17387 13.8997 1.75087C13.5807 1.12187 13.0637 0.755872 12.3477 0.750872C12.3357 0.749872 7.66376 0.749872 7.65176 0.750872C6.93576 0.755872 6.41976 1.12187 6.09976 1.75087C5.88476 2.17387 5.51976 2.95087 5.23276 3.55887C5.07376 3.89487 4.73476 4.10987 4.36276 4.10987C2.36676 4.10987 0.749756 5.72687 0.749756 7.72187L0.749756 13.6579C0.749756 15.6519 2.36676 17.2699 4.36276 17.2699L15.6377 17.2699C17.6327 17.2699 19.2497 15.6519 19.2497 13.6579L19.2497 7.72187C19.2497 5.72687 17.6327 4.10987 15.6377 4.10987Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var MakePhoto = function (props) { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#22394E", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.6377 7.10987C17.2647 7.10987 16.9267 6.89487 16.7677 6.55887C16.4807 5.95087 16.1157 5.17387 15.8997 4.75087C15.5807 4.12187 15.0637 3.75587 14.3477 3.75087C14.3357 3.74987 9.66376 3.74987 9.65176 3.75087C8.93576 3.75587 8.41976 4.12187 8.09976 4.75087C7.88476 5.17387 7.51976 5.95087 7.23276 6.55887C7.07376 6.89487 6.73476 7.10987 6.36276 7.10987C4.36676 7.10987 2.74976 8.72687 2.74976 10.7219L2.74976 16.6579C2.74976 18.6519 4.36676 20.2699 6.36276 20.2699L17.6377 20.2699C19.6327 20.2699 21.2497 18.6519 21.2497 16.6579L21.2497 10.7219C21.2497 8.72687 19.6327 7.10987 17.6377 7.10987Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.82139 13.3345C8.82039 15.0875 10.2514 16.5215 12.0014 16.5205C13.7484 16.5185 15.1754 15.0905 15.1784 13.3415C15.1814 11.5855 13.7554 10.1545 12.0034 10.1525C10.2414 10.1505 8.80739 11.6055 8.82139 13.3345Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M16.5392 9.80995L16.5392 9.80995L16.54 9.80805C16.571 9.73747 16.5999 9.69016 16.6574 9.63231C16.7068 9.59037 16.7521 9.56032 16.8148 9.5318C17.0023 9.46148 17.2237 9.51198 17.3508 9.63902L17.3508 9.63903L17.3534 9.64159C17.3735 9.66141 17.3933 9.68463 17.4102 9.70806C17.4226 9.72528 17.4311 9.73931 17.4363 9.74872L17.4511 9.7867L17.4553 9.79744L17.46 9.80798C17.486 9.8665 17.5 9.9322 17.5 10.0005C17.5 10.1214 17.4561 10.2419 17.3488 10.3579C17.2703 10.4349 17.169 10.4834 17.06 10.4964L17.0002 10.4994L16.9431 10.4965C16.9056 10.4917 16.8609 10.4809 16.7989 10.4565C16.7374 10.4284 16.6907 10.3971 16.6427 10.3492C16.5483 10.2468 16.5 10.1205 16.5 10.0005C16.5 9.93165 16.5142 9.86606 16.5392 9.80995ZM16.0823 9.60681C16.1368 9.48285 16.2014 9.37829 16.3182 9.26456L16.0823 9.60681Z", fill: "#200E32" })] }))); };

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

@@ -9,5 +9,5 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-export var Print = function (props) { return (_jsx("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", stroke: "#22394E", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { d: "M15 15H17C18.1046 15 19 14.1046 19 13L19 9C19 7.89543 18.1046 7 17 7L3 7C1.89543 7 1 7.89543 1 9L1 13C1 14.1046 1.89543 15 3 15H5M7 19L13 19C14.1046 19 15 18.1046 15 17V13C15 11.8954 14.1046 11 13 11H7C5.89543 11 5 11.8954 5 13L5 17C5 18.1046 5.89543 19 7 19ZM15 7L15 3C15 1.89543 14.1046 1 13 1L7 1C5.89543 1 5 1.89543 5 3L5 7L15 7Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var Print = function (props) { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", stroke: "#22394E", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M17 17H19C20.1046 17 21 16.1046 21 15L21 11C21 9.89543 20.1046 9 19 9L5 9C3.89543 9 3 9.89543 3 11L3 15C3 16.1046 3.89543 17 5 17H7M9 21L15 21C16.1046 21 17 20.1046 17 19V15C17 13.8954 16.1046 13 15 13H9C7.89543 13 7 13.8954 7 15L7 19C7 20.1046 7.89543 21 9 21ZM17 9V5C17 3.89543 16.1046 3 15 3L9 3C7.89543 3 7 3.89543 7 5L7 9L17 9Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "17", y: "11", width: "2", height: "1" }), _jsx("rect", { x: "9.25", y: "15.25", width: "5.5", height: "0.5", strokeWidth: "0.5" }), _jsx("rect", { x: "9.25", y: "18.25", width: "5.5", height: "0.5", strokeWidth: "0.5" })] }))); };

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',