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

package/ui/Blocks/Header/components/UserMenu/hooks/useLogout.js

@@ -1,10 +1,10 @@
-export var useLogout = function (_a) {
-    var closeDropdown = _a.closeDropdown, onLogout = _a.onLogout;
-    var handleLogout = function () {
-        closeDropdown();
-        onLogout === null || onLogout === void 0 ? void 0 : onLogout();
-    };
-    return {
-        handleLogout: handleLogout
-    };
+//#region packages/ui/Blocks/Header/components/UserMenu/hooks/useLogout.ts
+const useLogout = ({ closeDropdown, onLogout }) => {
+	const handleLogout = () => {
+		closeDropdown();
+		onLogout?.();
+	};
+	return { handleLogout };
 };
+//#endregion
+export { useLogout };

package/ui/Blocks/Header/components/UserMenu/index.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { User } from '../../types';
-
+import type { FC } from 'react';
+import type { User } from '../../types';
 type Props = {
     user?: User | null;
     onLogout?: () => void;

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -1,18 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import Avatar from '../../../../Elements/Avatar';
-import Button from '../../../../Elements/Button';
-import { useToggleAndClose } from '../../../../hooks/useToggleAndClose';
-import Popover from '../../../Popover';
-import { UserInfoBlock } from './components/UserInfo';
-import { Trans } from '@lingui/react';
-import { useLogout } from './hooks';
-import { DropdownContentWrap, Line, UserWrap } from './styles';
-export var UserMenu = function (_a) {
-    var _b, _c, _d, _e;
-    var user = _a.user, onLogout = _a.onLogout;
-    var _f = useToggleAndClose(false), isDropdownOpen = _f[0], toggleDropdown = _f[1], closeDropdown = _f[2];
-    var parentRef = useRef(null);
-    var handleLogout = useLogout({ closeDropdown: closeDropdown, onLogout: onLogout }).handleLogout;
-    return (_jsxs(UserWrap, { children: [_jsx("div", { ref: parentRef, onClick: toggleDropdown, children: _jsx(Avatar, { colorBack: isDropdownOpen ? 'lightGray7' : 'neutral20', size: 34 }) }), isDropdownOpen && (_jsx(Popover, { parentRef: parentRef, onClose: closeDropdown, children: _jsxs(DropdownContentWrap, { children: [_jsx(UserInfoBlock, { userName: "".concat((_b = user === null || user === void 0 ? void 0 : user.firstName) !== null && _b !== void 0 ? _b : '', " ").concat((_c = user === null || user === void 0 ? void 0 : user.lastName) !== null && _c !== void 0 ? _c : ''), role: (_e = (_d = user === null || user === void 0 ? void 0 : user.roles) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : '' }), _jsx(Line, {}), _jsx(Button, { onClick: handleLogout, iconLeft: "logout", variant: "ghost", fullWidth: true, children: _jsx(Trans, { id: "logout", message: "Logout" }) })] }) }))] }));
+import Button_default from "../../../../Elements/Button/index.js";
+import Popover from "../../../Popover/index.js";
+import { useToggleAndClose } from "../../../../hooks/useToggleAndClose.js";
+import Avatar_default from "../../../../Elements/Avatar/index.js";
+import { UserInfoBlock } from "./components/UserInfo/index.js";
+import { useLogout } from "./hooks/useLogout.js";
+import { DropdownContentWrap, Line, UserWrap } from "./styles.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/Header/components/UserMenu/index.tsx
+const UserMenu = ({ user, onLogout }) => {
+	const [isDropdownOpen, toggleDropdown, closeDropdown] = useToggleAndClose(false);
+	const parentRef = useRef(null);
+	const { handleLogout } = useLogout({
+		closeDropdown,
+		onLogout
+	});
+	return /* @__PURE__ */ jsxs(UserWrap, { children: [/* @__PURE__ */ jsx("div", {
+		ref: parentRef,
+		onClick: toggleDropdown,
+		children: /* @__PURE__ */ jsx(Avatar_default, {
+			colorBack: isDropdownOpen ? "lightGray7" : "neutral20",
+			size: 34
+		})
+	}), isDropdownOpen && /* @__PURE__ */ jsx(Popover, {
+		parentRef,
+		onClose: closeDropdown,
+		children: /* @__PURE__ */ jsxs(DropdownContentWrap, { children: [
+			/* @__PURE__ */ jsx(UserInfoBlock, {
+				userName: `${user?.firstName ?? ""} ${user?.lastName ?? ""}`,
+				role: user?.roles?.[0] ?? ""
+			}),
+			/* @__PURE__ */ jsx(Line, {}),
+			/* @__PURE__ */ jsx(Button_default, {
+				onClick: handleLogout,
+				iconLeft: "logout",
+				variant: "ghost",
+				fullWidth: true,
+				children: /* @__PURE__ */ jsx(Trans, {
+					id: "logout",
+					message: "Logout"
+				})
+			})
+		] })
+	})] });
 };
+//#endregion
+export { UserMenu };

package/ui/Blocks/Header/components/UserMenu/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const UserWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const DropdownContentWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const UserWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const DropdownContentWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Header/components/UserMenu/styles.js

@@ -1,9 +1,25 @@
-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, { th } from '@xstyled/styled-components';
-export var UserWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"])));
-export var DropdownContentWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 295px;\n  background-color: white;\n  box-shadow: ", ";\n  padding: 24px 12px 12px 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin: 5px 10px 0 0;\n"], ["\n  width: 295px;\n  background-color: white;\n  box-shadow: ", ";\n  padding: 24px 12px 12px 12px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin: 5px 10px 0 0;\n"])), th.shadow('dropShadow'), th.color('lightGray6'));
-export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 4px 0;\n"], ["\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 4px 0;\n"])), th.color('lightGray6'));
-var templateObject_1, templateObject_2, templateObject_3;
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Header/components/UserMenu/styles.ts
+const UserWrap = styled$1.div`
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  align-items: center;
+`;
+const DropdownContentWrap = styled$1.div`
+  width: 295px;
+  background-color: white;
+  box-shadow: ${th.shadow("dropShadow")};
+  padding: 24px 12px 12px 12px;
+  border: 1px solid ${th.color("lightGray6")};
+  border-radius: 8px;
+  margin: 5px 10px 0 0;
+`;
+const Line = styled$1.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${th.color("lightGray6")};
+  margin: 4px 0;
+`;
+//#endregion
+export { DropdownContentWrap, Line, UserWrap };

package/ui/Blocks/Header/hooks/useChangeLanguage.js

@@ -1,9 +1,9 @@
-export var useChangeLanguage = function (_a) {
-    var onChangeLanguage = _a.onChangeLanguage;
-    var handleChangeLanguage = function (languageCode) {
-        onChangeLanguage === null || onChangeLanguage === void 0 ? void 0 : onChangeLanguage(languageCode);
-    };
-    return {
-        handleChangeLanguage: handleChangeLanguage
-    };
+//#region packages/ui/Blocks/Header/hooks/useChangeLanguage.ts
+const useChangeLanguage = ({ onChangeLanguage }) => {
+	const handleChangeLanguage = (languageCode) => {
+		onChangeLanguage?.(languageCode);
+	};
+	return { handleChangeLanguage };
 };
+//#endregion
+export { useChangeLanguage };

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

@@ -1,9 +1,8 @@
-import { FC } from 'react';
-import { Brand, Variant } from '../../Elements/Logo';
-import { LanguageItem } from '../LanguageSwitch';
-import { MenuItemType } from '../SideMenu/types';
-import { User } from './types';
-
+import { type FC } from 'react';
+import type { Brand, Variant } from '../../Elements/Logo';
+import { type LanguageItem } from '../LanguageSwitch';
+import type { MenuItemType } from '../SideMenu/types';
+import type { User } from './types';
 type Props = {
     homeLink: string;
     isMobileMenuOpen?: boolean;

package/ui/Blocks/Header/index.js

@@ -1,15 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from 'react-router-dom';
-import Logo from '../../Elements/Logo';
-import LanguageSwitch from '../LanguageSwitch';
-import { HamburgerMenuButton } from '../SideMenu';
-import { MenuItems } from './components/MenuItems';
-import { UserMenu } from './components/UserMenu';
-import { useChangeLanguage } from './hooks/useChangeLanguage';
-import { languageItems as defaultLanguageItems } from './utils/languageItems';
-import { Container, LeftSide, RightSide, LanguageWrapper } from './styles';
-export var Header = function (_a) {
-    var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, showLanguageWithTitle = _a.showLanguageWithTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor, _c = _a.languageItems, languageItems = _c === void 0 ? defaultLanguageItems : _c, _d = _a.withLanguageSwitch, withLanguageSwitch = _d === void 0 ? true : _d, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
-    var handleChangeLanguage = useChangeLanguage({ onChangeLanguage: onChangeLanguage }).handleChangeLanguage;
-    return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [onOpenMobileSideMenu && _jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? (_jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth })) : (logo && _jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" })) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), withLanguageSwitch && (_jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, withTitle: showLanguageWithTitle, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage, languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor }) })), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
+import LanguageSwitch_default from "../LanguageSwitch/index.js";
+import { HamburgerMenuButton } from "../SideMenu/components/HamburgerMenu.js";
+import "../SideMenu/index.js";
+import Logo_default from "../../Elements/Logo/index.js";
+import { MenuItems } from "./components/MenuItems/index.js";
+import { UserMenu } from "./components/UserMenu/index.js";
+import { useChangeLanguage } from "./hooks/useChangeLanguage.js";
+import { languageItems } from "./utils/languageItems.js";
+import { Container, LanguageWrapper, LeftSide, RightSide } from "./styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+//#region packages/ui/Blocks/Header/index.tsx
+const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoSrc, logoSrcWidth, user, currentLanguage, hasUserMenu = false, rightMenuItems, showLanguageWithTitle, languageFlagWrapBackgroundColor, languageItems: languageItems$1 = languageItems, withLanguageSwitch = true, onOpenMobileSideMenu, onChangeLanguage, onLogout }) => {
+	const { handleChangeLanguage } = useChangeLanguage({ onChangeLanguage });
+	return /* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsxs(LeftSide, { children: [onOpenMobileSideMenu && /* @__PURE__ */ jsx(HamburgerMenuButton, {
+		isLeftMenuOpen: isMobileMenuOpen,
+		onClick: onOpenMobileSideMenu
+	}), /* @__PURE__ */ jsx(Link, {
+		to: homeLink,
+		children: logoSrc ? /* @__PURE__ */ jsx("img", {
+			src: logoSrc,
+			alt: "logo",
+			width: logoSrcWidth
+		}) : logo && /* @__PURE__ */ jsx(Logo_default, {
+			brand: logo,
+			variant: logoVariant,
+			width: "145px"
+		})
+	})] }), /* @__PURE__ */ jsxs(RightSide, { children: [
+		Array.isArray(rightMenuItems) && rightMenuItems?.length > 0 && /* @__PURE__ */ jsx(MenuItems, { items: rightMenuItems }),
+		withLanguageSwitch && /* @__PURE__ */ jsx(LanguageWrapper, { children: /* @__PURE__ */ jsx(LanguageSwitch_default, {
+			languageItems: languageItems$1,
+			withTitle: showLanguageWithTitle,
+			onLanguageChange: handleChangeLanguage,
+			activeLanguage: currentLanguage,
+			languageFlagWrapBackgroundColor
+		}) }),
+		hasUserMenu && /* @__PURE__ */ jsx(UserMenu, {
+			user,
+			onLogout
+		})
+	] })] });
 };
+//#endregion
+export { Header };

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

@@ -1,25 +1,24 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 declare const meta: {
     title: string;
     component: FC<{
         homeLink: string;
-        isMobileMenuOpen?: boolean | undefined;
-        logo?: import('../../..').Brand | undefined;
-        logoVariant?: import('../../..').Variant | undefined;
-        logoSrc?: string | undefined;
-        logoSrcWidth?: string | undefined;
-        user?: import('../types').User | null | undefined;
-        currentLanguage?: string | undefined;
-        hasUserMenu?: boolean | undefined;
-        rightMenuItems?: import('../../SideMenu').MenuItemType[] | undefined;
-        languageItems?: import('../../LanguageSwitch').LanguageItem[] | undefined;
-        showLanguageWithTitle?: boolean | undefined;
-        languageFlagWrapBackgroundColor?: string | undefined;
-        onOpenMobileSideMenu?: (() => void) | undefined;
-        onChangeLanguage?: ((language: string) => void) | undefined;
-        onLogout?: (() => void) | undefined;
-        withLanguageSwitch?: boolean | undefined;
+        isMobileMenuOpen?: boolean;
+        logo?: import("../../..").Brand;
+        logoVariant?: import("../../..").Variant;
+        logoSrc?: string;
+        logoSrcWidth?: string;
+        user?: import("../types").User | null;
+        currentLanguage?: string;
+        hasUserMenu?: boolean;
+        rightMenuItems?: import("../../SideMenu").MenuItemType[];
+        languageItems?: import("../../LanguageSwitch").LanguageItem[];
+        showLanguageWithTitle?: boolean;
+        languageFlagWrapBackgroundColor?: string;
+        onOpenMobileSideMenu?: () => void;
+        onChangeLanguage?: (language: string) => void;
+        onLogout?: () => void;
+        withLanguageSwitch?: boolean;
     }>;
     tags: string[];
     argTypes: {};

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

@@ -1,4 +1,4 @@
-export declare const Container: import('styled-components').StyledComponent<"header", import('@xstyled/system').Theme, {}, never>;
-export declare const LeftSide: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const LanguageWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const RightSide: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"header", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LeftSide: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LanguageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const RightSide: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Header/styles.js

@@ -1,11 +1,34 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { headerHeight } from './utils/constants';
-import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"])), headerHeight, th.color('lightGray7'));
-export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var LanguageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n"])));
-export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import { headerHeight } from "./utils/constants.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Header/styles.ts
+const Container = styled$1.header`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 8px;
+  height: ${headerHeight};
+  border-bottom: 1px solid ${th.color("lightGray7")};
+
+  @media (min-width: 768px) {
+    padding: 0 20px;
+  }
+`;
+const LeftSide = styled$1.div`
+  display: flex;
+`;
+const LanguageWrapper = styled$1.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+const RightSide = styled$1.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    gap: 20px;
+  }
+`;
+//#endregion
+export { Container, LanguageWrapper, LeftSide, RightSide };

package/ui/Blocks/Header/utils/constants.js

@@ -1 +1,4 @@
-export var headerHeight = '52px';
+//#region packages/ui/Blocks/Header/utils/constants.ts
+const headerHeight = "52px";
+//#endregion
+export { headerHeight };

package/ui/Blocks/Header/utils/languageItems.d.ts

@@ -1,3 +1,2 @@
-import { LanguageItem } from '../../LanguageSwitch';
-
+import type { LanguageItem } from '../../LanguageSwitch';
 export declare const languageItems: LanguageItem[];

package/ui/Blocks/Header/utils/languageItems.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FlagCZ } from '../../../Elements/Icon/icons/FlagCZ';
-import { FlagUSA } from '../../../Elements/Icon/icons/FlagUSA';
-export var languageItems = [
-    {
-        languageCode: 'cs',
-        icon: _jsx(FlagCZ, { height: "16px" }),
-        title: 'Česky'
-    },
-    {
-        languageCode: 'en',
-        icon: _jsx(FlagUSA, { height: "16px" }),
-        title: 'English'
-    }
-];
+import { FlagUSA } from "../../../Elements/Icon/icons/FlagUSA.js";
+import { FlagCZ } from "../../../Elements/Icon/icons/FlagCZ.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Header/utils/languageItems.tsx
+const languageItems = [{
+	languageCode: "cs",
+	icon: /* @__PURE__ */ jsx(FlagCZ, { height: "16px" }),
+	title: "Česky"
+}, {
+	languageCode: "en",
+	icon: /* @__PURE__ */ jsx(FlagUSA, { height: "16px" }),
+	title: "English"
+}];
+//#endregion
+export { languageItems };

package/ui/Blocks/HidePrint/HidePrint.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 type Props = {
     children: React.ReactNode;
 };

package/ui/Blocks/HidePrint/HidePrint.js

@@ -1,13 +1,13 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-var HideWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: contents;\n  @media print {\n    display: none;\n  }\n"], ["\n  display: contents;\n  @media print {\n    display: none;\n  }\n"])));
-var HidePrint = function (_a) {
-    var children = _a.children;
-    return _jsx(HideWrapper, { children: children });
-};
-export default HidePrint;
-var templateObject_1;
+import "react";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+//#region packages/ui/Blocks/HidePrint/HidePrint.tsx
+const HideWrapper = styled.div`
+  display: contents;
+  @media print {
+    display: none;
+  }
+`;
+const HidePrint = ({ children }) => /* @__PURE__ */ jsx(HideWrapper, { children });
+//#endregion
+export { HidePrint as default };

package/ui/Blocks/ImageList/ImageList.d.ts

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

package/ui/Blocks/ImageList/ImageList.js

@@ -1,34 +1,80 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useDraggable } from 'react-use-draggable-scroll';
-import Icon from '../../Elements/Icon/Icon';
-import LightBox, { useLightBox } from '../LightBox';
-import { AddPhoto } from './components/AddPhoto';
-import { ImageElement } from './components/ImageElement';
-import { useControls } from './hooks/useControls';
-import { useOnElementClick } from './hooks/useOnElementClick';
-import { x } from '@xstyled/styled-components';
-import { ImageListContainer, Control } from './styles';
-export var ImageList = function (_a) {
-    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, onImageClick = _a.onImageClick, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled, selectable = _a.selectable, max = _a.max;
-    var ref = useRef(null);
-    var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
-    var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
-    var _c = useOnElementClick({ onImageClick: onImageClick, onOpenLightBox: onOpenLightBox, selectable: selectable }), handleOnClick = _c.handleOnClick, selected = _c.selected;
-    var _d = useControls({ max: max, total: images === null || images === void 0 ? void 0 : images.length }), hasControls = _d.hasControls, position = _d.position, moveList = _d.moveList;
-    return (_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled, hasRemove: !!onImageRemove }), hasControls && (_jsx(Control, { onClick: moveList(-1), isLeft: true, isDisabled: position === 0, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "lessThen", size: "24px" }) })), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
-                    var _a, _b;
-                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onClick: handleOnClick(item, index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label, selected: index === selected, visible: !max || (index >= position && index < position + max) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
-                }) }))), hasControls && (_jsx(Control, { onClick: moveList(1), isDisabled: !!images && !!max && position >= (images === null || images === void 0 ? void 0 : images.length) - max, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "greaterThan", size: "24px" }) })), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
+import Icon from "../../Elements/Icon/Icon.js";
+import { useLightBox } from "../LightBox/hooks/useLightBox.js";
+import LightBox_default from "../LightBox/index.js";
+import { AddPhoto } from "./components/AddPhoto/index.js";
+import { ImageElement } from "./components/ImageElement/index.js";
+import { useControls } from "./hooks/useControls.js";
+import { useOnElementClick } from "./hooks/useOnElementClick.js";
+import { Control, ImageListContainer } from "./styles.js";
+import { useRef } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDraggable } from "react-use-draggable-scroll";
+//#region packages/ui/Blocks/ImageList/ImageList.tsx
+const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction, lightBoxActionTitle, images, isDisabled, selectable, max }) => {
+	const ref = useRef(null);
+	const { events } = useDraggable(ref, { isMounted: !!images?.length });
+	const { isLightBoxOpen, onCloseLightBox, onOpenLightBox, lightBoxData } = useLightBox();
+	const { handleOnClick, selected } = useOnElementClick({
+		onImageClick,
+		onOpenLightBox,
+		selectable
+	});
+	const { hasControls, position, moveList } = useControls({
+		max,
+		total: images?.length
+	});
+	return /* @__PURE__ */ jsxs(x.div, {
+		display: "flex",
+		alignItems: "center",
+		children: [
+			/* @__PURE__ */ jsx(AddPhoto, {
+				onImageUpload,
+				isDisabled,
+				hasRemove: !!onImageRemove
+			}),
+			hasControls && /* @__PURE__ */ jsx(Control, {
+				onClick: moveList(-1),
+				isLeft: true,
+				isDisabled: position === 0,
+				hasRemove: !!onImageRemove,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "lessThen",
+					size: "24px"
+				})
+			}),
+			images && /* @__PURE__ */ jsx(ImageListContainer, {
+				ref,
+				...events,
+				children: images.map((item, index) => /* @__PURE__ */ jsx(ImageElement, {
+					imageUrl: item.smallUrl ?? item.url,
+					onImageRemove: onImageRemove?.(item.id),
+					onClick: handleOnClick(item, index),
+					isDisabled,
+					label: item?.label,
+					selected: index === selected,
+					visible: !max || index >= position && index < position + max
+				}, item.id ?? index))
+			}),
+			hasControls && /* @__PURE__ */ jsx(Control, {
+				onClick: moveList(1),
+				isDisabled: !!images && !!max && position >= images?.length - max,
+				hasRemove: !!onImageRemove,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "greaterThan",
+					size: "24px"
+				})
+			}),
+			/* @__PURE__ */ jsx(LightBox_default, {
+				initialSlide: lightBoxData?.initialSlide,
+				isLightBoxOpen,
+				onCloseLightBox,
+				lightBoxAction,
+				lightBoxActionTitle,
+				images
+			})
+		]
+	});
 };
+//#endregion
+export { ImageList };

package/ui/Blocks/ImageList/components/AddPhoto/index.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ImageUploadProps } from '../../types';
-
+import { type FC } from 'react';
+import { type ImageUploadProps } from '../../types';
 interface AddPhotoProps {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     isDisabled?: boolean;