@mailstep/design-system 0.8.31-beta.3 → 0.8.31

package/ui/Blocks/Modal/Modal.js

@@ -1,36 +1,125 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useEffect } from 'react';
-import Button from '../../Elements/Button';
-import { Icon, Cancel } from '../../Elements/Icon';
-import { Portal } from '../../Elements/Portal';
-import { H2, H5 } from '../../Elements/Typography';
-import { useClickOutside } from './hooks/useClickOutside';
-import { x } from '@xstyled/styled-components';
-import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper } from './styles';
-import { widthMap } from './utils';
-export var Modal = memo(function (_a) {
-    var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onExtraAction = _a.onExtraAction, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, extraActionLabel = _a.extraActionLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, onClose = _a.onClose, _d = _a.hasFooter, hasFooter = _d === void 0 ? true : _d, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e, background = _a.background, _f = _a.ignoreClickOutside, ignoreClickOutside = _f === void 0 ? false : _f, _g = _a.closeEverywhere, closeEverywhere = _g === void 0 ? false : _g, _h = _a.withCloseIcon, withCloseIcon = _h === void 0 ? true : _h, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, _j = _a.variant, variant = _j === void 0 ? 'compact' : _j, top = _a.top, name = _a.name;
-    var closeDialog = useCallback(function () {
-        if (onClose) {
-            onClose();
-        }
-        else if (onCancel) {
-            onCancel();
-        }
-    }, [onClose, onCancel]);
-    var dialogStyle = useMemo(function () { return ({ width: widthMap[width] }); }, [width]);
-    var dialogRef = useClickOutside({ onClose: closeDialog, ignoreClickOutside: ignoreClickOutside, closeCurrent: true, allowScrollbarClick: true });
-    var onDialogConfirmClick = useCallback(function () {
-        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(closeDialog);
-    }, [onConfirm, closeDialog]);
-    useEffect(function () {
-        window.addEventListener('popstate', closeDialog);
-        return function () {
-            window.removeEventListener('popstate', closeDialog);
-        };
-    }, []);
-    if (!isShown) {
-        return null;
-    }
-    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "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 == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "secondary", variant: "ghost", children: extraActionLabel })), _jsxs(ButtonsWrapper, { hasExtraAction: !!onExtraAction, hasBothButtons: !!onCancel && !!onConfirm, children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "secondary", variant: "default", "data-testid": name ? "button-".concat(name, "-cancel") : undefined, children: cancelLabel || 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", appearance: "primary", variant: "default", "data-testid": name ? "button-".concat(name, "-confirm") : undefined, children: confirmLabel || 'Submit' }))] })] }))] }) }) }));
+import { Cancel } from "../../Elements/Icon/icons/Cancel.js";
+import Icon from "../../Elements/Icon/Icon.js";
+import "../../Elements/Icon/index.js";
+import Button_default from "../../Elements/Button/index.js";
+import { useClickOutside } from "./hooks/useClickOutside.js";
+import { H2, H5 } from "../../Elements/Typography/Typography.js";
+import "../../Elements/Typography/index.js";
+import { Portal } from "../../Elements/Portal/index.js";
+import { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer } from "./styles.js";
+import { widthMap } from "./utils.js";
+import { memo, useCallback, useEffect, useMemo } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Modal/Modal.tsx
+const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title, titleIcon, onConfirm, confirmLabel, cancelLabel, extraActionLabel, isLoading, isConfirmDisabled, width = "narrow", onClose, hasFooter = true, hasHeader = true, background, ignoreClickOutside = false, closeEverywhere = false, withCloseIcon = true, overlayColor, minWidth, minHeight, maxWidth, maxHeight, variant = "compact", top, name }) => {
+	const closeDialog = useCallback(() => {
+		if (onClose) onClose();
+		else if (onCancel) onCancel();
+	}, [onClose, onCancel]);
+	const dialogStyle = useMemo(() => ({ width: widthMap[width] }), [width]);
+	const dialogRef = useClickOutside({
+		onClose: closeDialog,
+		ignoreClickOutside,
+		closeCurrent: true,
+		allowScrollbarClick: true
+	});
+	const onDialogConfirmClick = useCallback(() => {
+		onConfirm?.(closeDialog);
+	}, [onConfirm, closeDialog]);
+	useEffect(() => {
+		window.addEventListener("popstate", closeDialog);
+		return () => {
+			window.removeEventListener("popstate", closeDialog);
+		};
+	}, []);
+	if (!isShown) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DialogOverlay, {
+		backgroundColor: overlayColor,
+		children: /* @__PURE__ */ jsxs(DialogWindow, {
+			ref: dialogRef,
+			style: dialogStyle,
+			$backgroundColor: background,
+			top,
+			"data-cy": "dialogWindow",
+			onClick: closeEverywhere ? closeDialog : void 0,
+			$minWidth: minWidth,
+			$minHeight: minHeight,
+			$maxWidth: maxWidth,
+			$maxHeight: maxHeight,
+			variant,
+			children: [
+				title && hasHeader && /* @__PURE__ */ jsx(HeaderContainer, {
+					variant,
+					children: /* @__PURE__ */ jsxs(TitleContainer, { children: [titleIcon && /* @__PURE__ */ jsx(x.div, {
+						as: "span",
+						className: "icon",
+						children: typeof titleIcon === "string" ? /* @__PURE__ */ jsx(Icon, {
+							icon: titleIcon,
+							fill: "blue2"
+						}) : titleIcon
+					}), variant == "default" ? /* @__PURE__ */ jsx(H2, {
+						mt: 0,
+						mb: 0,
+						variant: "bold",
+						children: title
+					}) : /* @__PURE__ */ jsx(H5, {
+						mt: 0,
+						mb: 0,
+						variant: "bold",
+						children: title
+					})] })
+				}),
+				withCloseIcon && /* @__PURE__ */ jsx(CloseButton, {
+					onClick: closeDialog,
+					"data-cy": "dialogCloseBtn",
+					children: /* @__PURE__ */ jsx(Cancel, {
+						width: "11px",
+						height: "11px"
+					})
+				}),
+				/* @__PURE__ */ jsx(ContentContainer, {
+					variant,
+					children
+				}),
+				hasFooter && (onExtraAction || onCancel || onConfirm) && /* @__PURE__ */ jsxs(ButtonsContainer, {
+					hasSpaceBetween: !!onExtraAction,
+					children: [onExtraAction && /* @__PURE__ */ jsx(Button_default, {
+						type: "button",
+						onClick: onExtraAction,
+						isLoading,
+						"data-cy": "extraActionBtn",
+						appearance: "secondary",
+						variant: "ghost",
+						children: extraActionLabel
+					}), /* @__PURE__ */ jsxs(ButtonsWrapper, {
+						hasExtraAction: !!onExtraAction,
+						hasBothButtons: !!onCancel && !!onConfirm,
+						children: [onCancel && /* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							onClick: onCancel,
+							isLoading,
+							"data-cy": "cancelBtn",
+							appearance: "secondary",
+							variant: "default",
+							"data-testid": name ? `button-${name}-cancel` : void 0,
+							children: cancelLabel || "Cancel"
+						}), onConfirm && /* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							onClick: onDialogConfirmClick,
+							isLoading,
+							disabled: isConfirmDisabled,
+							"data-cy": "submitBtn",
+							appearance: "primary",
+							variant: "default",
+							"data-testid": name ? `button-${name}-confirm` : void 0,
+							children: confirmLabel || "Submit"
+						})]
+					})]
+				})
+			]
+		})
+	}) });
 });
+//#endregion
+export { Modal };

package/ui/Blocks/Modal/hooks/useClickOutside.d.ts

@@ -1,4 +1,3 @@
-import { RefObject } from 'react';
-import { UseClickOutsideProps } from '../types';
-
+import { type RefObject } from 'react';
+import { type UseClickOutsideProps } from '../types';
 export declare const useClickOutside: ({ onClose, parentRef, ignoreClickOutside, closeCurrent, allowScrollbarClick }: UseClickOutsideProps) => RefObject<HTMLDivElement>;

package/ui/Blocks/Modal/hooks/useClickOutside.js

@@ -1,30 +1,28 @@
-import { useCallback, useEffect, useRef } from 'react';
-export var useClickOutside = function (_a) {
-    var onClose = _a.onClose, parentRef = _a.parentRef, _b = _a.ignoreClickOutside, ignoreClickOutside = _b === void 0 ? false : _b, _c = _a.closeCurrent, closeCurrent = _c === void 0 ? false : _c, _d = _a.allowScrollbarClick, allowScrollbarClick = _d === void 0 ? false : _d;
-    var elementRef = useRef(null);
-    var onCloseModal = !ignoreClickOutside ? onClose : undefined;
-    var handleClickOutside = useCallback(function (e) {
-        var _a;
-        var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;
-        if (!ignoreEvent &&
-            elementRef.current &&
-            !elementRef.current.contains(e.target) &&
-            !((_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-            closeCurrent ? e.target.contains(elementRef.current) && (onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal()) : onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
-        }
-    }, [allowScrollbarClick, parentRef, closeCurrent, onCloseModal]);
-    var keyPress = useCallback(function (e) {
-        if (e.key === 'Escape') {
-            onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
-        }
-    }, [onCloseModal]);
-    useEffect(function () {
-        document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', keyPress);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', keyPress);
-        };
-    }, [handleClickOutside, keyPress]);
-    return elementRef;
+import { useCallback, useEffect, useRef } from "react";
+//#region packages/ui/Blocks/Modal/hooks/useClickOutside.ts
+const useClickOutside = ({ onClose, parentRef, ignoreClickOutside = false, closeCurrent = false, allowScrollbarClick = false }) => {
+	const elementRef = useRef(null);
+	const onCloseModal = !ignoreClickOutside ? onClose : void 0;
+	const handleClickOutside = useCallback((e) => {
+		if (!(allowScrollbarClick && e.offsetX > e.target.clientWidth) && elementRef.current && !elementRef.current.contains(e.target) && !parentRef?.current?.contains(e.target)) closeCurrent ? e.target.contains(elementRef.current) && onCloseModal?.() : onCloseModal?.();
+	}, [
+		allowScrollbarClick,
+		parentRef,
+		closeCurrent,
+		onCloseModal
+	]);
+	const keyPress = useCallback((e) => {
+		if (e.key === "Escape") onCloseModal?.();
+	}, [onCloseModal]);
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", keyPress);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", keyPress);
+		};
+	}, [handleClickOutside, keyPress]);
+	return elementRef;
 };
+//#endregion
+export { useClickOutside };

package/ui/Blocks/Modal/hooks/useModal.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps, ModalData } from '../types';
-
 export declare const useModal: <TData = ModalData>(initialState?: boolean) => ControlProps<TData>;

package/ui/Blocks/Modal/hooks/useModal.js

@@ -1,15 +1,20 @@
-import { useCallback, useState } from 'react';
-export var useModal = function (initialState) {
-    if (initialState === void 0) { initialState = false; }
-    var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];
-    var _b = useState(), data = _b[0], setData = _b[1];
-    var onClose = useCallback(function () {
-        setIsOpen(false);
-        setData(undefined);
-    }, []);
-    var onOpen = useCallback(function (data) {
-        data && setData(data);
-        setIsOpen(true);
-    }, []);
-    return { isOpen: isOpen, onClose: onClose, onOpen: onOpen, data: data };
+import { useCallback, useState } from "react";
+//#region packages/ui/Blocks/Modal/hooks/useModal.ts
+const useModal = (initialState = false) => {
+	const [isOpen, setIsOpen] = useState(initialState);
+	const [data, setData] = useState();
+	return {
+		isOpen,
+		onClose: useCallback(() => {
+			setIsOpen(false);
+			setData(void 0);
+		}, []),
+		onOpen: useCallback((data) => {
+			data && setData(data);
+			setIsOpen(true);
+		}, []),
+		data
+	};
 };
+//#endregion
+export { useModal };

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

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

package/ui/Blocks/Modal/index.js

@@ -1,4 +1,7 @@
-import { Modal } from './Modal';
-export { useModal } from './hooks/useModal';
-export { useClickOutside } from './hooks/useClickOutside';
-export default Modal;
+import { useModal } from "./hooks/useModal.js";
+import { useClickOutside } from "./hooks/useClickOutside.js";
+import { Modal } from "./Modal.js";
+//#region packages/ui/Blocks/Modal/index.ts
+var Modal_default = Modal;
+//#endregion
+export { Modal_default as default, useClickOutside, useModal };

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

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react-webpack5';
-
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').ModalProps>;
+    component: import("react").FC<import("../types").ModalProps>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,29 +1,28 @@
-import { Variant } from './types';
-
-export declare const DialogOverlay: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    backgroundColor?: string | undefined;
+import { type Variant } from './types';
+export declare const DialogOverlay: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    backgroundColor?: string;
 }, never>;
-export declare const DialogWindow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $backgroundColor?: string | undefined;
-    $minWidth?: string | undefined;
-    $minHeight?: string | undefined;
-    $maxWidth?: string | undefined;
-    $maxHeight?: string | undefined;
+export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    $backgroundColor?: string;
+    $minWidth?: string;
+    $minHeight?: string;
+    $maxWidth?: string;
+    $maxHeight?: string;
     variant: Variant;
-    top?: string | undefined;
+    top?: string;
 }, never>;
-export declare const HeaderContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     variant: Variant;
 }, never>;
-export declare const ContentContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     variant: Variant;
 }, never>;
-export declare const TitleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ButtonsContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     hasSpaceBetween: boolean;
 }, never>;
-export declare const ButtonsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     hasExtraAction: boolean;
     hasBothButtons: boolean;
 }, never>;
-export declare const CloseButton: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Modal/styles.js

@@ -1,82 +1,183 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { createRgba } from '../../utils';
-import styled, { css, th } from '@xstyled/styled-components';
-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 = '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: 9;\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: 9;\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 backgroundColor = _a.backgroundColor, theme = _a.theme;
-    return createRgba(backgroundColor || theme.colors.blue2, 0.6);
-});
-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: ", " 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: ", " auto 0 auto;\n  }\n"])), function (_a) {
-    var $backgroundColor = _a.$backgroundColor;
-    return $backgroundColor || th.color('white');
-}, function (_a) {
-    var $minWidth = _a.$minWidth;
-    return $minWidth || '10%';
-}, function (_a) {
-    var $minHeight = _a.$minHeight;
-    return $minHeight || 'auto';
-}, function (_a) {
-    var $maxHeight = _a.$maxHeight;
-    return $maxHeight || 'none';
-}, function (_a) {
-    var variant = _a.variant;
-    return variantStyles(Component.DialogWindow, variant);
-}, function (_a) {
-    var $maxWidth = _a.$maxWidth;
-    return $maxWidth && "max-width: ".concat($maxWidth);
-}, function (_a) {
-    var _b = _a.top, top = _b === void 0 ? '100px' : _b;
-    return top;
-});
-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_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  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\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  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\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"])), th.color('lightGray6'), function (_a) {
-    var hasSpaceBetween = _a.hasSpaceBetween;
-    return (hasSpaceBetween ? 'space-between' : 'flex-end');
-});
-export var ButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"])), function (_a) {
-    var hasExtraAction = _a.hasExtraAction;
-    return (hasExtraAction ? 'auto' : '100%');
-}, function (_a) {
-    var hasBothButtons = _a.hasBothButtons;
-    return (hasBothButtons ? '50%' : 'auto');
-});
-export var CloseButton = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray2;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray2;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\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, templateObject_17;
+import { createRgba } from "../../utils/CreateRgba/createRgba.js";
+import "../../utils/index.js";
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Modal/styles.ts
+const variantStyles = (component, variant = "default") => ({
+	header: {
+		default: css`
+        padding: 20px;
+        border-bottom: 1px solid ${th.color("lightGray6")};
+        @media (min-width: 576px) {
+          padding: 30px;
+          border-bottom: 0;
+        }
+      `,
+		compact: css`
+        padding: 20px 20px;
+        border-bottom: 1px solid ${th.color("lightGray6")};
+      `,
+		mobileFullscreen: css`
+        padding: 20px;
+      `
+	},
+	dialogWindow: {
+		default: css`
+        border-radius: 10px;
+        max-width: calc(100% - 32px);
+      `,
+		compact: css`
+        border-radius: 10px;
+        max-width: calc(100% - 32px);
+      `,
+		mobileFullscreen: css`
+        border-radius: 0;
+        max-width: 100% !important;
+      `
+	},
+	contentContainer: {
+		default: css`
+        padding: 20px 20px 15px;
+        @media (min-width: 576px) {
+          padding: 30px;
+        }
+      `,
+		compact: css`
+        padding: 20px 20px 15px;
+      `,
+		mobileFullscreen: css`
+        padding: 0;
+      `
+	},
+	title: {}
+})[component][variant];
+const DialogOverlay = styled$1.div`
+  position: fixed;
+  z-index: 9;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: ${({ backgroundColor, theme }) => createRgba(backgroundColor || theme.colors.blue2, .6)};
+  text-align: center;
+
+  @media print {
+    position: absolute !important;
+    left: 0 !important;
+    top: 0 !important;
+    height: auto !important;
+    visibility: hidden;
+  }
+
+  @media (max-width: 576px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+  }
+`;
+const DialogWindow = styled$1.div`
+  background-color: ${({ $backgroundColor }) => $backgroundColor || th.color("white")};
+  margin: auto;
+  box-shadow: dialogShadow;
+  min-width: ${({ $minWidth }) => $minWidth || "10%"};
+  min-height: ${({ $minHeight }) => $minHeight || "auto"};
+  max-height: ${({ $maxHeight }) => $maxHeight || "none"};
+  display: inline-block;
+  position: relative;
+  text-align: left;
+
+  ${({ variant }) => variantStyles("dialogWindow", variant)}
+  ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth}`};
+
+  @media print {
+    background-color: #fff;
+    margin: 0;
+    visibility: visible;
+    overflow: visible;
+    box-shadow: none;
+    max-width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    margin: ${({ top = "100px" }) => top} auto 0 auto;
+  }
+`;
+const HeaderContainer = styled$1.div`
+  display: flex;
+  justify-content: space-between;
+  ${({ variant }) => variantStyles("header", variant)}
+`;
+const ContentContainer = styled$1.div`
+  min-height: 50px;
+  ${({ variant }) => variantStyles("contentContainer", variant)}
+`;
+const TitleContainer = styled$1.div`
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  color: typoPrimary;
+  padding-right: 34px;
+
+  > div:first-of-type {
+    margin-right: 0.5em;
+    display: block;
+  }
+
+  .icon {
+    font-size: 24px;
+    margin-right: 15px;
+    display: flex;
+
+    @media (max-width: 576px) {
+      font-size: 18px;
+      margin-right: 12px;
+    }
+  }
+`;
+const ButtonsContainer = styled$1.div`
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  border-top: 1px solid ${th.color("lightGray6")};
+  text-align: right;
+  justify-content: ${({ hasSpaceBetween }) => hasSpaceBetween ? "space-between" : "flex-end"};
+
+  @media (max-width: 576px) {
+    display: flex;
+    justify-content: space-around;
+    padding: 32px 18px 18px;
+
+    > * {
+      margin: 0;
+    }
+  }
+`;
+const ButtonsWrapper = styled$1.div`
+  width: ${({ hasExtraAction }) => hasExtraAction ? "auto" : "100%"};
+  display: flex;
+  justify-content: inherit;
+  column-gap: 8px;
+
+  @media (max-width: 576px) {
+    & > button {
+      width: ${({ hasBothButtons }) => hasBothButtons ? "50%" : "auto"};
+    }
+  }
+`;
+const CloseButton = styled$1.div`
+  position: absolute;
+  z-index: 2;
+  background-color: bgLightGray2;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  top: 11px;
+  right: 20px;
+  width: 34px;
+  height: 34px;
+`;
+//#endregion
+export { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer };