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

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

@@ -1,63 +1,170 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import Button from "../../../Elements/Button/Button.js";
+import SingleSelect from "../../../Elements/SingleSelect/SingleSelect.js";
+import { Input } from "../../../Forms/Input/Input.js";
+import { useCallback, useState } from "react";
+import styled$1, { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/LoginPage/components/LoginForm.tsx
+const Container = styled$1.div`
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  & > div > H4 {
+    display: none;
+  }
+  @media (min-width: 1024px) {
+    height: 300px;
+    min-width: 300px;
+    margin-bottom: 50px;
+    & > div > H4 {
+      display: block;
+    }
+  }
+`;
+const ButtonsContainer = styled$1.div`
+  display: flex;
+  margin-top: 15px;
+  width: 100%;
+  @media (min-width: 1024px) {
+    display: inline-block;
+    margin-top: 40px;
+  }
+`;
+const LoginForm = ({ onSubmit, isSubmitting, isSubmitDisabled, distributionCenterOptions, withDistributionCenterSelect, onChangeDistributionCenter, selectedDistributionCenter, withPassword, withLogin, loginLabel, passwordLabel }) => {
+	const [login, setLogin] = useState("");
+	const [password, setPassword] = useState("");
+	const [submitError, setSubmitError] = useState("");
+	const [loginError, setLoginError] = useState("");
+	const [passwordError, setPasswordError] = useState("");
+	const [dcCenterError, setDCCenterError] = useState("");
+	const handleChangeLogin = useCallback((e) => {
+		setLogin(e.target.value);
+	}, []);
+	const handleChangePassword = useCallback((e) => {
+		setPassword(e.target.value);
+	}, []);
+	const handleSubmit = useCallback(() => {
+		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,
+			password
+		}).catch((error) => {
+			error && setSubmitError(String(error));
+		}).finally(() => {
+			setPassword("");
+		});
+	}, [
+		login,
+		password,
+		selectedDistributionCenter,
+		withDistributionCenterSelect,
+		withPassword,
+		onSubmit
+	]);
+	const handleChangeDistributionCenter = useCallback((e) => {
+		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"
+			})
+		}) })
+	] });
 };
-import { jsx as _jsx, jsxs as _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_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])));
-var ButtonsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])));
-export var LoginForm = function (_a) {
-    var onSubmit = _a.onSubmit, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, distributionCenterOptions = _a.distributionCenterOptions, withDistributionCenterSelect = _a.withDistributionCenterSelect, onChangeDistributionCenter = _a.onChangeDistributionCenter, selectedDistributionCenter = _a.selectedDistributionCenter, withPassword = _a.withPassword, withLogin = _a.withLogin, loginLabel = _a.loginLabel, passwordLabel = _a.passwordLabel;
-    var _b = useState(''), login = _b[0], setLogin = _b[1];
-    var _c = useState(''), password = _c[0], setPassword = _c[1];
-    var _d = useState(''), submitError = _d[0], setSubmitError = _d[1];
-    var _e = useState(''), loginError = _e[0], setLoginError = _e[1];
-    var _f = useState(''), passwordError = _f[0], setPasswordError = _f[1];
-    var _g = useState(''), dcCenterError = _g[0], setDCCenterError = _g[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 (_jsxs(Container, { children: [withLogin && (_jsx(x.div, { mt: "24px", children: _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 && (_jsx(x.div, { mt: "12px", children: _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 && (_jsx(x.div, { mt: "12px", children: _jsx(SingleSelect
-                // @ts-ignore
-                , { 
-                    // @ts-ignore
-                    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 && (_jsx(x.div, { mt: "12px", color: "red1", children: submitError })), _jsx(ButtonsContainer, { children: _jsx(Button, { onClick: handleSubmit, iconLeft: "login", isLoading: isSubmitting, disabled: isSubmitDisabled, fullWidth: true, children: _jsx(Trans, { id: "form.buttonSignIn", message: "Sign in" }) }) })] }));
-};
-var templateObject_1, templateObject_2;
+//#endregion
+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/styled-components").Theme, {}, never>;
+export declare const SocialLinksBody: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LinkTo: import("styled-components").StyledComponent<"a", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const SocialFooter: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const SocialLinks: FC;

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

@@ -1,17 +1,82 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import Icon from "../../../Elements/Icon/Icon.js";
+import { FACEBOOK_LINK, INSTAGRAM_LINK, LINKEDIN_LINK, TWITTER_LINK } from "../utils/links.js";
+import styled$1, { th } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/LoginPage/components/SocialLinks.tsx
+const SocialLinksWrapper = styled$1.div`
+  height: 600px;
+  margin: auto;
+  display: none;
+
+  @media (min-height: 520px) {
+    display: block;
+  }
+  @media (min-width: 1024px) {
+    position: relative;
+    width: 500px;
+  }
+`;
+const SocialLinksBody = styled$1.div`
+  display: flex;
+  position: absolute;
+  bottom: 30px;
+  right: 0;
+  padding: 0 10px;
+  justify-content: center;
+
+  @media (min-width: 1024px) {
+    width: initial;
+  }
+`;
+const LinkTo = styled$1.a`
+  color: ${th.color("typoPrimary")};
+  margin: 0 15px;
+
+  @media (min-width: 1024px) {
+    margin-left: 20px;
+    margin-right: 0;
+  }
+`;
+const SocialFooter = styled$1.div`
+  display: none;
+
+  @media (min-width: 1024px) {
+    font-size: 14px;
+    display: block;
+    position: absolute;
+    color: ${th.color("typoPrimary")};
+    font-weight: 600;
+    bottom: 0;
+    right: 0;
+  }
+`;
+const 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."
+	}) })] });
 };
-import { jsx as _jsx, jsxs as _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';
-export var SocialLinksWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])));
-export var SocialLinksBody = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])));
-export var LinkTo = styled.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  margin: 0 15px;\n\n  @media (min-width: 1024px) {\n    margin-left: 20px;\n    margin-right: 0;\n  }\n"], ["\n  color: ", ";\n  margin: 0 15px;\n\n  @media (min-width: 1024px) {\n    margin-left: 20px;\n    margin-right: 0;\n  }\n"])), th.color('typoPrimary'));
-export var SocialFooter = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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"], ["\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"])), th.color('typoPrimary'));
-export var SocialLinks = function () {
-    return (_jsxs(SocialLinksWrapper, { children: [_jsxs(SocialLinksBody, { children: [_jsx(LinkTo, { target: "_blank", href: FACEBOOK_LINK, children: _jsx(Icon, { icon: "facebook" }) }), _jsx(LinkTo, { target: "_blank", href: INSTAGRAM_LINK, children: _jsx(Icon, { icon: "instagram" }) }), _jsx(LinkTo, { target: "_blank", href: LINKEDIN_LINK, children: _jsx(Icon, { icon: "linkedin" }) }), _jsx(LinkTo, { target: "_blank", href: TWITTER_LINK, children: _jsx(Icon, { icon: "twitter" }) })] }), _jsx(SocialFooter, { children: _jsx(Trans, { id: "card.entrustLogisticsEshopProfessionals", message: "Entrust the logistics of your e-shop to professionals." }) })] }));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//#endregion
+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

@@ -1,2 +1,5 @@
-import LoginPage from './LoginPage';
-export default LoginPage;
+import Login from "./LoginPage.js";
+//#region packages/ui/Blocks/LoginPage/index.ts
+var LoginPage_default = Login;
+//#endregion
+export { LoginPage_default as default };

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

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

package/ui/Blocks/LoginPage/styles.js

@@ -1,21 +1,75 @@
-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;
+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 };

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

@@ -1,7 +1,10 @@
-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';
+//#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 };

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>;