@mailstep/design-system 0.8.26 → 0.8.27

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

@@ -0,0 +1,225 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 10px;\n  & > div > H4 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    height: 300px;\n    min-width: 300px;\n    margin-bottom: 50px;\n    & > div > H4 {\n      display: block;\n    }\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  margin-top: 15px;\n  width: 100%;\n  @media (min-width: 1024px) {\n    display: inline-block;\n    margin-top: 40px;\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import Button from "../../../Elements/Button/Button";
+import SingleSelect from "../../../Elements/SingleSelect/SingleSelect";
+import { Input } from "../../../Forms/Input/Input";
+import { i18n } from "@lingui/core";
+import { Trans } from "@lingui/react";
+import styled, { x } from "@xstyled/styled-components";
+var Container = styled.div(_templateObject());
+var ButtonsContainer = styled.div(_templateObject1());
+var LoginForm = function LoginForm(param) {
+    var onSubmit = param.onSubmit, isSubmitting = param.isSubmitting, isSubmitDisabled = param.isSubmitDisabled, distributionCenterOptions = param.distributionCenterOptions, withDistributionCenterSelect = param.withDistributionCenterSelect, onChangeDistributionCenter = param.onChangeDistributionCenter, selectedDistributionCenter = param.selectedDistributionCenter, withPassword = param.withPassword, withLogin = param.withLogin, loginLabel = param.loginLabel, passwordLabel = param.passwordLabel;
+    var _useState = _sliced_to_array(useState(""), 2), login = _useState[0], setLogin = _useState[1];
+    var _useState1 = _sliced_to_array(useState(""), 2), password = _useState1[0], setPassword = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(""), 2), submitError = _useState2[0], setSubmitError = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(""), 2), loginError = _useState3[0], setLoginError = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(""), 2), passwordError = _useState4[0], setPasswordError = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(""), 2), dcCenterError = _useState5[0], setDCCenterError = _useState5[1];
+    var handleChangeLogin = useCallback(function(e) {
+        setLogin(e.target.value);
+    }, []);
+    var handleChangePassword = useCallback(function(e) {
+        setPassword(e.target.value);
+    }, []);
+    var handleSubmit = useCallback(function() {
+        setLoginError("");
+        setPasswordError("");
+        setDCCenterError("");
+        setSubmitError("");
+        if (withLogin && !login) {
+            setLoginError(i18n._({
+                id: "requiredField",
+                message: "Required field"
+            }));
+            return;
+        }
+        if (withPassword && !password) {
+            setPasswordError(i18n._({
+                id: "requiredField",
+                message: "Required field"
+            }));
+            return;
+        }
+        if (withDistributionCenterSelect && !selectedDistributionCenter) {
+            setDCCenterError(i18n._({
+                id: "requiredField",
+                message: "Required field"
+            }));
+            return;
+        }
+        onSubmit({
+            login: login,
+            password: password
+        }).catch(function(error) {
+            error && setSubmitError(String(error));
+        }).finally(function() {
+            setPassword("");
+        });
+    }, [
+        login,
+        password,
+        selectedDistributionCenter,
+        withDistributionCenterSelect,
+        withPassword,
+        onSubmit
+    ]);
+    var handleChangeDistributionCenter = useCallback(function(e) {
+        onChangeDistributionCenter === null || onChangeDistributionCenter === void 0 ? void 0 : onChangeDistributionCenter(e.target.value);
+    }, [
+        onChangeDistributionCenter
+    ]);
+    return /* @__PURE__ */ jsxs(Container, {
+        children: [
+            withLogin && /* @__PURE__ */ jsx(x.div, {
+                mt: "24px",
+                children: /* @__PURE__ */ jsx(Input, {
+                    label: loginLabel || i18n._({
+                        id: "form.login.label",
+                        message: "Login"
+                    }),
+                    placeholder: i18n._({
+                        id: "form.login.label",
+                        message: "Login"
+                    }),
+                    type: "text",
+                    name: "login",
+                    autoFocus: true,
+                    error: loginError,
+                    value: login,
+                    onChange: handleChangeLogin,
+                    onEnter: handleSubmit
+                })
+            }),
+            withPassword && /* @__PURE__ */ jsx(x.div, {
+                mt: "12px",
+                children: /* @__PURE__ */ jsx(Input, {
+                    label: passwordLabel || i18n._({
+                        id: "form.password.label",
+                        message: "Password"
+                    }),
+                    placeholder: i18n._({
+                        id: "form.password.label",
+                        message: "Password"
+                    }),
+                    name: "password",
+                    type: "password",
+                    value: password,
+                    onChange: handleChangePassword,
+                    error: passwordError,
+                    onEnter: handleSubmit
+                })
+            }),
+            withDistributionCenterSelect && /* @__PURE__ */ jsx(x.div, {
+                mt: "12px",
+                children: /* @__PURE__ */ jsx(SingleSelect, {
+                    onChange: handleChangeDistributionCenter,
+                    options: distributionCenterOptions,
+                    value: selectedDistributionCenter,
+                    placeholder: i18n._({
+                        id: "form.distributionCenter.label",
+                        message: "Distribution center"
+                    }),
+                    label: i18n._({
+                        id: "form.distributionCenter.label",
+                        message: "Distribution center"
+                    }),
+                    error: dcCenterError
+                })
+            }),
+            submitError && /* @__PURE__ */ jsx(x.div, {
+                mt: "12px",
+                color: "red1",
+                children: submitError
+            }),
+            /* @__PURE__ */ jsx(ButtonsContainer, {
+                children: /* @__PURE__ */ jsx(Button, {
+                    onClick: handleSubmit,
+                    iconLeft: "login",
+                    isLoading: isSubmitting,
+                    disabled: isSubmitDisabled,
+                    fullWidth: true,
+                    children: /* @__PURE__ */ jsx(Trans, {
+                        id: "form.buttonSignIn",
+                        message: "Sign in"
+                    })
+                })
+            })
+        ]
+    });
+};
+export { LoginForm };

package/ui/Blocks/LoginPage/components/SocialLinks.d.ts

@@ -1,7 +1,6 @@
 import { FC } from 'react';
-
-export declare const SocialLinksWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const SocialLinksBody: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const LinkTo: import('styled-components').StyledComponent<"a", import('@xstyled/system').Theme, {}, never>;
-export declare const SocialFooter: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const SocialLinksWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const SocialLinksBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const LinkTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
+export declare const SocialFooter: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const SocialLinks: FC;

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

@@ -0,0 +1,102 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  height: 600px;\n  margin: auto;\n  display: none;\n\n  @media (min-height: 520px) {\n    display: block;\n  }\n  @media (min-width: 1024px) {\n    position: relative;\n    width: 500px;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  position: absolute;\n  bottom: 30px;\n  right: 0;\n  padding: 0 10px;\n  justify-content: center;\n\n  @media (min-width: 1024px) {\n    width: initial;\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  color: ",
+        ";\n  margin: 0 15px;\n\n  @media (min-width: 1024px) {\n    margin-left: 20px;\n    margin-right: 0;\n  }\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  display: none;\n\n  @media (min-width: 1024px) {\n    font-size: 14px;\n    display: block;\n    position: absolute;\n    color: ",
+        ";\n    font-weight: 600;\n    bottom: 0;\n    right: 0;\n  }\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "../../../Elements/Icon/Icon";
+import { FACEBOOK_LINK, INSTAGRAM_LINK, LINKEDIN_LINK, TWITTER_LINK } from "../utils/links";
+import { Trans } from "@lingui/react";
+import styled, { th } from "@xstyled/styled-components";
+var SocialLinksWrapper = styled.div(_templateObject());
+var SocialLinksBody = styled.div(_templateObject1());
+var LinkTo = styled.a(_templateObject2(), th.color("typoPrimary"));
+var SocialFooter = styled.div(_templateObject3(), th.color("typoPrimary"));
+var SocialLinks = function SocialLinks() {
+    return /* @__PURE__ */ jsxs(SocialLinksWrapper, {
+        children: [
+            /* @__PURE__ */ jsxs(SocialLinksBody, {
+                children: [
+                    /* @__PURE__ */ jsx(LinkTo, {
+                        target: "_blank",
+                        href: FACEBOOK_LINK,
+                        children: /* @__PURE__ */ jsx(Icon, {
+                            icon: "facebook"
+                        })
+                    }),
+                    /* @__PURE__ */ jsx(LinkTo, {
+                        target: "_blank",
+                        href: INSTAGRAM_LINK,
+                        children: /* @__PURE__ */ jsx(Icon, {
+                            icon: "instagram"
+                        })
+                    }),
+                    /* @__PURE__ */ jsx(LinkTo, {
+                        target: "_blank",
+                        href: LINKEDIN_LINK,
+                        children: /* @__PURE__ */ jsx(Icon, {
+                            icon: "linkedin"
+                        })
+                    }),
+                    /* @__PURE__ */ jsx(LinkTo, {
+                        target: "_blank",
+                        href: TWITTER_LINK,
+                        children: /* @__PURE__ */ jsx(Icon, {
+                            icon: "twitter"
+                        })
+                    })
+                ]
+            }),
+            /* @__PURE__ */ jsx(SocialFooter, {
+                children: /* @__PURE__ */ jsx(Trans, {
+                    id: "card.entrustLogisticsEshopProfessionals",
+                    message: "Entrust the logistics of your e-shop to professionals."
+                })
+            })
+        ]
+    });
+};
+export { LinkTo, SocialFooter, SocialLinks, SocialLinksBody, SocialLinksWrapper };

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

@@ -1,5 +1,4 @@
-import { default as LoginPage } from './LoginPage';
+import LoginPage from './LoginPage';
 import { LoginPageProps, LoginData } from './types';
-
 export default LoginPage;
 export type { LoginPageProps, LoginData };

package/ui/Blocks/LoginPage/index.js

@@ -0,0 +1,3 @@
+import LoginPage from "./LoginPage";
+var LoginPage_default = LoginPage;
+export { LoginPage_default as default };

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

@@ -1,11 +1,10 @@
 import { BackgroundImages } from './types';
-
-export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     backgroundImage?: BackgroundImages;
 }, 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

@@ -0,0 +1,95 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  color: ",
+        ";\n  &:hover {\n    color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n  width: 50%;\n  height: auto;\n"
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n  color: gray;\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  font-size: 12px;\n"
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import Logo from "../../Elements/Logo/Logo";
+import mailship from "./assets/mailship.jpg";
+import styled, { th } from "@xstyled/styled-components";
+var backgroundImageMap = {
+    mailship: mailship
+};
+var Wrapper = styled.div(_templateObject(), th("fonts.primary"), th("colors.bgLightGray"), function(param) {
+    var backgroundImage = param.backgroundImage;
+    return "transparent ".concat(backgroundImage ? "url(".concat(backgroundImageMap[backgroundImage], ")") : "", " 50% 0% no-repeat padding-box;");
+});
+var LanguageBox = styled.div(_templateObject1());
+var CardBodyWithLanguage = styled.div(_templateObject2());
+var MailTo = styled.a(_templateObject3(), th.color("typoPrimary"), th.color("red1"));
+var LogoWrapper = styled.div(_templateObject4());
+var MainLogo = styled(Logo)(_templateObject5());
+var Version = styled.div(_templateObject6());
+export { CardBodyWithLanguage, LanguageBox, LogoWrapper, MailTo, MainLogo, Version, Wrapper };

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

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

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

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

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

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

package/ui/Blocks/Modal/Modal.js

@@ -0,0 +1,151 @@
+import { jsx, 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";
+var Modal = memo(function(param) {
+    var children = param.children, _param_isShown = param.isShown, isShown = _param_isShown === void 0 ? true : _param_isShown, onExtraAction = param.onExtraAction, onCancel = param.onCancel, title = param.title, titleIcon = param.titleIcon, onConfirm = param.onConfirm, confirmLabel = param.confirmLabel, cancelLabel = param.cancelLabel, extraActionLabel = param.extraActionLabel, isLoading = param.isLoading, isConfirmDisabled = param.isConfirmDisabled, _param_width = param.width, width = _param_width === void 0 ? "narrow" : _param_width, onClose = param.onClose, _param_hasFooter = param.hasFooter, hasFooter = _param_hasFooter === void 0 ? true : _param_hasFooter, _param_hasHeader = param.hasHeader, hasHeader = _param_hasHeader === void 0 ? true : _param_hasHeader, background = param.background, _param_ignoreClickOutside = param.ignoreClickOutside, ignoreClickOutside = _param_ignoreClickOutside === void 0 ? false : _param_ignoreClickOutside, _param_closeEverywhere = param.closeEverywhere, closeEverywhere = _param_closeEverywhere === void 0 ? false : _param_closeEverywhere, _param_withCloseIcon = param.withCloseIcon, withCloseIcon = _param_withCloseIcon === void 0 ? true : _param_withCloseIcon, overlayColor = param.overlayColor, minWidth = param.minWidth, minHeight = param.minHeight, maxWidth = param.maxWidth, maxHeight = param.maxHeight, _param_variant = param.variant, variant = _param_variant === void 0 ? "compact" : _param_variant, top = param.top, name = param.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 /* @__PURE__ */ jsx(Portal, {
+        children: /* @__PURE__ */ jsx(DialogOverlay, {
+            backgroundColor: overlayColor,
+            children: /* @__PURE__ */ jsxs(DialogWindow, {
+                ref: dialogRef,
+                style: dialogStyle,
+                $backgroundColor: background,
+                top: top,
+                "data-cy": "dialogWindow",
+                onClick: closeEverywhere ? closeDialog : void 0,
+                $minWidth: minWidth,
+                $minHeight: minHeight,
+                $maxWidth: maxWidth,
+                $maxHeight: maxHeight,
+                variant: variant,
+                children: [
+                    title && hasHeader && /* @__PURE__ */ jsx(HeaderContainer, {
+                        variant: 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: variant,
+                        children: children
+                    }),
+                    hasFooter && (onExtraAction || onCancel || onConfirm) && /* @__PURE__ */ jsxs(ButtonsContainer, {
+                        hasSpaceBetween: !!onExtraAction,
+                        children: [
+                            onExtraAction && /* @__PURE__ */ jsx(Button, {
+                                type: "button",
+                                onClick: onExtraAction,
+                                isLoading: isLoading,
+                                "data-cy": "extraActionBtn",
+                                appearance: "secondary",
+                                variant: "ghost",
+                                children: extraActionLabel
+                            }),
+                            /* @__PURE__ */ jsxs(ButtonsWrapper, {
+                                hasExtraAction: !!onExtraAction,
+                                hasBothButtons: !!onCancel && !!onConfirm,
+                                children: [
+                                    onCancel && /* @__PURE__ */ jsx(Button, {
+                                        type: "button",
+                                        onClick: onCancel,
+                                        isLoading: isLoading,
+                                        "data-cy": "cancelBtn",
+                                        appearance: "secondary",
+                                        variant: "default",
+                                        "data-testid": name ? "button-".concat(name, "-cancel") : void 0,
+                                        children: cancelLabel || "Cancel"
+                                    }),
+                                    onConfirm && /* @__PURE__ */ jsx(Button, {
+                                        type: "button",
+                                        onClick: onDialogConfirmClick,
+                                        isLoading: isLoading,
+                                        disabled: isConfirmDisabled,
+                                        "data-cy": "submitBtn",
+                                        appearance: "primary",
+                                        variant: "default",
+                                        "data-testid": name ? "button-".concat(name, "-confirm") : void 0,
+                                        children: confirmLabel || "Submit"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+});
+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>;