@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -0,0 +1,113 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import LoginPage from '../';
+import { FlagCZ, FlagUSA } from '../../../Elements/Icon';
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+var languageItems = [
+    {
+        languageCode: 'cs',
+        icon: _jsx(FlagCZ, {}),
+        title: 'Česky'
+    },
+    {
+        languageCode: 'en',
+        icon: _jsx(FlagUSA, {}),
+        title: 'English'
+    }
+];
+var distributionCenterOptions = [
+    { value: 'PRG1', label: 'PRG1' },
+    { value: 'ATH1', label: 'ATH1' },
+    { value: 'MLN1', label: 'MLN1' }
+];
+var meta = {
+    title: 'Blocks/LoginPage',
+    tags: ['autodocs']
+};
+export default meta;
+export var Default = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
+                console.log('Language changed:', language);
+            }, brand: "mailship", brandVariant: "s", admin: true, languageItems: languageItems }) }));
+};
+export var WithDistributionCenterSelect = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
+                console.log('Language changed:', language);
+            }, brand: "mailship", brandVariant: "s", languageItems: languageItems, distributionCenterOptions: distributionCenterOptions, onChangeDistributionCenter: function (dcId) {
+                console.log('onChangeDistributionCenter:', dcId);
+            }, selectedDistributionCenter: "PRG1", withDistributionCenterSelect: true }) }));
+};
+export var WithBackgroundImage = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
+                console.log('Language changed:', language);
+            }, brand: "mailship", brandVariant: "s", languageItems: languageItems, backgroundImage: "mailship" }) }));
+};
+export var WarehouseBrand = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: function (language) {
+                console.log('Language changed:', language);
+            }, brand: "warehouse", brandVariant: "m", languageItems: languageItems, hasSupport: false, hasSocialLinks: false }) }));
+};
+export var WarehouseBrandWithAccessKey = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(LoginPage, { onSubmit: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    alert("submit");
+                    console.log('Login data:', data);
+                    return [2 /*return*/];
+                });
+            }); }, isSubmitting: false, isSubmitDisabled: false, activeLanguage: "en", version: "1.0.0", onLanguageChange: console.log, brand: "warehouse", brandVariant: "m", languageItems: languageItems, hasSupport: false, hasSocialLinks: false, withPassword: false, loginLabel: "Access Key" }) }));
+};

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

@@ -1,10 +1,10 @@
-import { BackgroundImages } from './types';
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    backgroundImage?: BackgroundImages;
+/// <reference types="react" />
+export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    backgroundImage?: "mailship" | undefined;
 }, never>;
-export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const MailTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
-export declare const LogoWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const MainLogo: import("styled-components").StyledComponent<import("react").FC<import("../../Elements/Logo/types").LogoProps>, import("@xstyled/system").Theme, {}, never>;
-export declare const Version: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const LanguageBox: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const CardBodyWithLanguage: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const MailTo: import('styled-components').StyledComponent<"a", import('@xstyled/system').Theme, {}, never>;
+export declare const LogoWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const MainLogo: import('styled-components').StyledComponent<import('react').FC<import('../../Elements/Logo/types').LogoProps>, import('@xstyled/system').Theme, {}, never>;
+export declare const Version: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/LoginPage/styles.js

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

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

@@ -1,7 +1,8 @@
-import type { ReactNode } from 'react';
-import type { Brand, Variant } from '../../Elements/Logo/types';
-import type { Option } from '../../Elements/Select/types';
-import type { LanguageItem } from '../LanguageSwitch';
+import { ReactNode } from 'react';
+import { Brand, Variant } from '../../Elements/Logo/types';
+import { Option } from '../../Elements/Select/types';
+import { LanguageItem } from '../LanguageSwitch';
+
 export type BackgroundImages = 'mailship';
 export type LoginData = {
     login: string;

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

@@ -1,10 +1,7 @@
-//#region packages/ui/Blocks/LoginPage/utils/links.ts
-const KB_URL = "https://help.mailship.eu/kb/";
-const MAILSHIP_CONTACT_URL = "https://www.mailstep.cz/kontakt/";
-const FACEBOOK_LINK = "https://cs-cz.facebook.com/mailstepfulfillment";
-const INSTAGRAM_LINK = "https://www.instagram.com/mailstep_fulfillment";
-const LINKEDIN_LINK = "https://cz.linkedin.com/company/mail-step";
-const TWITTER_LINK = "https://twitter.com/mailstep";
-const EMAIL_ADDRESS = "mailstep@mailstep.cz";
-//#endregion
-export { EMAIL_ADDRESS, FACEBOOK_LINK, INSTAGRAM_LINK, KB_URL, LINKEDIN_LINK, MAILSHIP_CONTACT_URL, TWITTER_LINK };
+export var KB_URL = 'https://help.mailship.eu/kb/';
+export var MAILSHIP_CONTACT_URL = 'https://www.mailstep.cz/kontakt/';
+export var FACEBOOK_LINK = 'https://cs-cz.facebook.com/mailstepfulfillment';
+export var INSTAGRAM_LINK = 'https://www.instagram.com/mailstep_fulfillment';
+export var LINKEDIN_LINK = 'https://cz.linkedin.com/company/mail-step';
+export var TWITTER_LINK = 'https://twitter.com/mailstep';
+export var EMAIL_ADDRESS = 'mailstep@mailstep.cz';

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

@@ -1,3 +1,4 @@
-import { type FC } from 'react';
-import { type ModalProps } from './types';
+import { FC } from 'react';
+import { ModalProps } from './types';
+
 export declare const Modal: FC<ModalProps>;

package/ui/Blocks/Modal/Modal.js

@@ -1,125 +1,36 @@
-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"
-						})]
-					})]
-				})
-			]
-		})
-	}) });
+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' }))] })] }))] }) }) }));
 });
-//#endregion
-export { Modal };

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

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

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

@@ -1,28 +1,30 @@
-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;
+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;
 };
-//#endregion
-export { useClickOutside };

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

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

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

@@ -1,20 +1,15 @@
-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
-	};
+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 };
 };
-//#endregion
-export { useModal };

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

@@ -1,4 +1,5 @@
 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,7 +1,4 @@
-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 };
+import { Modal } from './Modal';
+export { useModal } from './hooks/useModal';
+export { useClickOutside } from './hooks/useClickOutside';
+export default Modal;

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

@@ -1,7 +1,8 @@
 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: {};
 };