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

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -1,40 +1,53 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
-import DropdownMenu from '../../Elements/DropdownMenu';
-import Icon from '../../Elements/Icon/Icon';
-import Popover from '../Popover';
-import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap } from './styles';
-var placementMap = {
-    left: 'bottom-start',
-    right: 'bottom-end'
+import Icon from "../../Elements/Icon/Icon.js";
+import { DropdownMenu } from "../../Elements/DropdownMenu/DropdownMenu.js";
+import "../../Elements/DropdownMenu/index.js";
+import Popover from "../Popover/index.js";
+import { LanguageFlagWrap, LanguageSwitchWrap, StyledFlag } from "./styles.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/LanguageSwitch/LanguageSwitch.tsx
+const placementMap = {
+	left: "bottom-start",
+	right: "bottom-end"
 };
-var LanguageSwitch = function (_a) {
-    var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, withTitle = _a.withTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor;
-    var _c = useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
-    var flagWrapRef = useRef(null);
-    var onClose = useCallback(function () {
-        setFlagDropdownVisible(false);
-    }, []);
-    var handleFlagClick = useCallback(function () {
-        setFlagDropdownVisible(!flagDropdownVisible);
-    }, [flagDropdownVisible]);
-    var languageToggle = useCallback(function (languageCode) { return function () {
-        onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(languageCode);
-    }; }, [onLanguageChange]);
-    var activeLanguageObj = useMemo(function () { return languageItems === null || languageItems === void 0 ? void 0 : languageItems.find(function (language) { return language.languageCode === activeLanguage; }); }, [activeLanguage, languageItems]);
-    var filteredLanguages = useMemo(function () { return languageItems === null || languageItems === void 0 ? void 0 : languageItems.filter(function (language) { return language.languageCode !== activeLanguage; }); }, [languageItems, activeLanguage]);
-    var formattedLanguages = useMemo(function () {
-        return filteredLanguages === null || filteredLanguages === void 0 ? void 0 : filteredLanguages.map(function (_a) {
-            var title = _a.title, icon = _a.icon, languageCode = _a.languageCode;
-            return ({
-                title: title,
-                icon: icon,
-                onClick: languageToggle(languageCode)
-            });
-        });
-    }, [filteredLanguages, languageToggle]);
-    if (!activeLanguageObj || !languageItems)
-        return null;
-    return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(Popover, { parentRef: flagWrapRef, onClose: onClose, placement: placementMap[placement], children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
+const LanguageSwitch = ({ activeLanguage, onLanguageChange, languageItems, placement = "right", withTitle, languageFlagWrapBackgroundColor }) => {
+	const [flagDropdownVisible, setFlagDropdownVisible] = useState(false);
+	const flagWrapRef = useRef(null);
+	const onClose = useCallback(() => {
+		setFlagDropdownVisible(false);
+	}, []);
+	const handleFlagClick = useCallback(() => {
+		setFlagDropdownVisible(!flagDropdownVisible);
+	}, [flagDropdownVisible]);
+	const languageToggle = useCallback((languageCode) => () => {
+		onLanguageChange?.(languageCode);
+	}, [onLanguageChange]);
+	const activeLanguageObj = useMemo(() => languageItems?.find((language) => language.languageCode === activeLanguage), [activeLanguage, languageItems]);
+	const filteredLanguages = useMemo(() => languageItems?.filter((language) => language.languageCode !== activeLanguage), [languageItems, activeLanguage]);
+	const formattedLanguages = useMemo(() => filteredLanguages?.map(({ title, icon, languageCode }) => ({
+		title,
+		icon,
+		onClick: languageToggle(languageCode)
+	})), [filteredLanguages, languageToggle]);
+	if (!activeLanguageObj || !languageItems) return null;
+	return /* @__PURE__ */ jsxs(LanguageSwitchWrap, { children: [/* @__PURE__ */ jsxs(LanguageFlagWrap, {
+		ref: flagWrapRef,
+		onClick: handleFlagClick,
+		backgroundColor: languageFlagWrapBackgroundColor,
+		withTitle,
+		children: [/* @__PURE__ */ jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), /* @__PURE__ */ jsx(Icon, {
+			icon: "chevronDown",
+			size: "10px"
+		})]
+	}), flagDropdownVisible && /* @__PURE__ */ jsx(Popover, {
+		parentRef: flagWrapRef,
+		onClose,
+		placement: placementMap[placement],
+		children: /* @__PURE__ */ jsx(DropdownMenu, {
+			showMenu: true,
+			items: formattedLanguages
+		})
+	})] });
 };
-export default LanguageSwitch;
+//#endregion
+export { LanguageSwitch as default };

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

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

package/ui/Blocks/LanguageSwitch/index.js

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

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.d.ts

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

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

@@ -1,6 +1,6 @@
-export declare const StyledFlag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const LanguageSwitchWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const LanguageFlagWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    backgroundColor?: string | undefined;
-    withTitle?: boolean | undefined;
+export declare const StyledFlag: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LanguageSwitchWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    backgroundColor?: string;
+    withTitle?: boolean;
 }, never>;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -1,15 +1,32 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"])));
-export var LanguageSwitchWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
-export var LanguageFlagWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"])), function (_a) {
-    var withTitle = _a.withTitle;
-    return (withTitle ? '16px' : '8px');
-}, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return backgroundColor || 'white';
-});
-var templateObject_1, templateObject_2, templateObject_3;
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/LanguageSwitch/styles.ts
+const StyledFlag = styled$1.div`
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`;
+const LanguageSwitchWrap = styled$1.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+`;
+const LanguageFlagWrap = styled$1.div`
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ withTitle }) => withTitle ? "16px" : "8px"};
+  padding: 6px;
+  border-radius: 10px;
+  background: ${({ backgroundColor }) => backgroundColor || "white"};
+
+  @media (min-width: 768px) {
+    padding: 7px 12px;
+  }
+`;
+//#endregion
+export { LanguageFlagWrap, LanguageSwitchWrap, StyledFlag };

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

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-
 export type LanguageItem = {
     languageCode: string;
     icon: ReactElement;

package/ui/Blocks/LightBox/LightBox.d.ts

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

package/ui/Blocks/LightBox/LightBox.js

@@ -1,14 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../Elements/Button';
-import Modal from '../Modal';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Container, Image, ButtonContainer, Description } from './styles';
-export var LightBox = function (_a) {
-    var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
-    if (!(images === null || images === void 0 ? void 0 : images.length))
-        return null;
-    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
-                var _a;
-                return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && (_jsxs(Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primary", variant: 'default', children: lightBoxActionTitle }) }))] }) }, item.id));
-            }) }) }));
+import Button from "../../Elements/Button/Button.js";
+import "../../Elements/Button/index.js";
+import Modal_default from "../Modal/index.js";
+import { ButtonContainer, Container, Description, Image } from "./styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Swiper, SwiperSlide } from "swiper/react";
+//#region packages/ui/Blocks/LightBox/LightBox.tsx
+const LightBox = ({ isLightBoxOpen, onCloseLightBox, lightBoxAction, lightBoxActionTitle, images, initialSlide = 0 }) => {
+	if (!images?.length) return null;
+	return /* @__PURE__ */ jsx(Modal_default, {
+		isShown: isLightBoxOpen,
+		onClose: onCloseLightBox,
+		variant: "mobileFullscreen",
+		top: "10px",
+		children: /* @__PURE__ */ jsx(Swiper, {
+			initialSlide,
+			slidesPerView: 1,
+			autoHeight: true,
+			children: images.map((item) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsxs(Container, { children: [
+				/* @__PURE__ */ jsx(Image, {
+					src: item.originalUrl ?? item.url,
+					loading: "lazy",
+					alt: ""
+				}),
+				(item.date || item.description) && /* @__PURE__ */ jsxs(Description, { children: [
+					item.date,
+					" ",
+					item.description
+				] }),
+				!!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && /* @__PURE__ */ jsx(ButtonContainer, { children: /* @__PURE__ */ jsx(Button, {
+					onClick: lightBoxAction(item.id),
+					appearance: "primary",
+					variant: "default",
+					children: lightBoxActionTitle
+				}) })
+			] }) }, item.id))
+		})
+	});
 };
+//#endregion
+export { LightBox };

package/ui/Blocks/LightBox/hooks/useLightBox.d.ts

@@ -1,3 +1,2 @@
-import { UseLightBoxHookType } from '../types';
-
+import { type UseLightBoxHookType } from '../types';
 export declare const useLightBox: UseLightBoxHookType;

package/ui/Blocks/LightBox/hooks/useLightBox.js

@@ -1,17 +1,17 @@
-import { useCallback } from 'react';
-import { useModal } from '../../Modal';
-export var useLightBox = function () {
-    var _a = useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;
-    var onOpenLightBox = useCallback(function (index) {
-        if (index === void 0) { index = 0; }
-        return function () {
-            onOpen({ initialSlide: index });
-        };
-    }, [onOpen]);
-    return {
-        onOpenLightBox: onOpenLightBox,
-        onCloseLightBox: onClose,
-        isLightBoxOpen: isOpen,
-        lightBoxData: data
-    };
+import { useModal } from "../../Modal/hooks/useModal.js";
+import "../../Modal/index.js";
+import { useCallback } from "react";
+//#region packages/ui/Blocks/LightBox/hooks/useLightBox.ts
+const useLightBox = () => {
+	const { isOpen, onOpen, onClose, data } = useModal();
+	return {
+		onOpenLightBox: useCallback((index = 0) => () => {
+			onOpen({ initialSlide: index });
+		}, [onOpen]),
+		onCloseLightBox: onClose,
+		isLightBoxOpen: isOpen,
+		lightBoxData: data
+	};
 };
+//#endregion
+export { useLightBox };

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

@@ -1,5 +1,4 @@
 import { LightBox } from './LightBox';
-
 export { useLightBox } from './hooks/useLightBox';
 export type { ImageData } from './types';
 export default LightBox;

package/ui/Blocks/LightBox/index.js

@@ -1,3 +1,6 @@
-import { LightBox } from './LightBox';
-export { useLightBox } from './hooks/useLightBox';
-export default LightBox;
+import { LightBox } from "./LightBox.js";
+import { useLightBox } from "./hooks/useLightBox.js";
+//#region packages/ui/Blocks/LightBox/index.ts
+var LightBox_default = LightBox;
+//#endregion
+export { LightBox_default as default, useLightBox };

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

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

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

@@ -1,4 +1,4 @@
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Image: import('styled-components').StyledComponent<"img", import('@xstyled/system').Theme, {}, never>;
-export declare const ButtonContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Description: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ButtonContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/LightBox/styles.js

@@ -1,10 +1,28 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n"])));
-export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
-export var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: -60px;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: -60px;\n"])));
-export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.8);\n"], ["\n  padding: 10px;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.8);\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/LightBox/styles.ts
+const Container = styled$1.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+`;
+const Image = styled$1.img`
+  width: 100%;
+  height: 100%;
+`;
+const ButtonContainer = styled$1.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  bottom: -60px;
+`;
+const Description = styled$1.div`
+  padding: 10px;
+  position: absolute;
+  width: 100%;
+  bottom: 0px;
+  background: rgba(255, 255, 255, 0.8);
+`;
+//#endregion
+export { ButtonContainer, Container, Description, Image };

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { LoginPageProps } from './types';
-
+import type { FC } from 'react';
+import type { LoginPageProps } from './types';
 declare const Login: FC<LoginPageProps>;
 export default Login;

package/ui/Blocks/LoginPage/LoginPage.js

@@ -1,15 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Admin } from '../../Elements/Icon/icons/Admin';
-import { H6 } from '../../Elements/Typography/Typography';
-import LanguageSwitch from '../LanguageSwitch';
-import { LoginForm } from './components/LoginForm';
-import { SocialLinks } from './components/SocialLinks';
-import { EMAIL_ADDRESS } from './utils/links';
-import { Trans } from '@lingui/react';
-import { x } from '@xstyled/styled-components';
-import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from './styles';
-var Login = function (_a) {
-    var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, admin = _a.admin, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c, _d = _a.withPassword, withPassword = _d === void 0 ? true : _d, _e = _a.withLogin, withLogin = _e === void 0 ? true : _e, loginLabel = _a.loginLabel, passwordLabel = _a.passwordLabel;
-    return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsxs(LogoWrapper, { children: [_jsx(MainLogo, { brand: brand, variant: brandVariant }), admin && _jsx(Admin, {})] }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter, withPassword: withPassword, withLogin: withLogin, loginLabel: loginLabel, passwordLabel: passwordLabel })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));
+import { Admin } from "../../Elements/Icon/icons/Admin.js";
+import { H6 } from "../../Elements/Typography/Typography.js";
+import LanguageSwitch_default from "../LanguageSwitch/index.js";
+import { LoginForm } from "./components/LoginForm.js";
+import "./utils/links.js";
+import { SocialLinks } from "./components/SocialLinks.js";
+import { CardBodyWithLanguage, LanguageBox, LogoWrapper, MailTo, MainLogo, Version, Wrapper } from "./styles.js";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/LoginPage/LoginPage.tsx
+const Login = ({ onSubmit, activeLanguage, onLanguageChange, children, brand, brandVariant, isSubmitting, isSubmitDisabled, withDistributionCenterSelect, distributionCenterOptions, selectedDistributionCenter, onChangeDistributionCenter, languageItems, version, backgroundImage, admin, hasSupport = true, hasSocialLinks = true, withPassword = true, withLogin = true, loginLabel, passwordLabel }) => {
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		backgroundImage,
+		children: [
+			/* @__PURE__ */ jsxs(CardBodyWithLanguage, { children: [
+				/* @__PURE__ */ jsxs(LogoWrapper, { children: [/* @__PURE__ */ jsx(MainLogo, {
+					brand,
+					variant: brandVariant
+				}), admin && /* @__PURE__ */ jsx(Admin, {})] }),
+				/* @__PURE__ */ jsxs(LanguageBox, { children: [hasSupport && /* @__PURE__ */ jsxs(x.div, {
+					mr: 4,
+					children: [/* @__PURE__ */ jsx(H6, {
+						color: "gray1",
+						variant: "bold",
+						mt: "8px",
+						mb: "8px",
+						as: "h6",
+						children: /* @__PURE__ */ jsx(Trans, {
+							id: "form.heading.support",
+							message: "Support:"
+						})
+					}), /* @__PURE__ */ jsx(MailTo, {
+						href: "mailto:mailstep@mailstep.cz",
+						children: "mailstep@mailstep.cz"
+					})]
+				}), /* @__PURE__ */ jsx(LanguageSwitch_default, {
+					activeLanguage,
+					onLanguageChange,
+					languageItems
+				})] }),
+				/* @__PURE__ */ jsx(LoginForm, {
+					onSubmit,
+					isSubmitDisabled,
+					isSubmitting,
+					onChangeDistributionCenter,
+					withDistributionCenterSelect,
+					distributionCenterOptions,
+					selectedDistributionCenter,
+					withPassword,
+					withLogin,
+					loginLabel,
+					passwordLabel
+				})
+			] }),
+			children,
+			version && /* @__PURE__ */ jsx(Version, { children: version }),
+			hasSocialLinks && /* @__PURE__ */ jsx(SocialLinks, {})
+		]
+	});
 };
-export default Login;
+//#endregion
+export { Login as default };

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

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { Option } from '../../../Elements/Select/types';
 import { LoginData } from '../types';
-
 type Props = {
     onSubmit: (loginData: LoginData) => Promise<void>;
     isSubmitting?: boolean;