@mailstep/design-system 0.8.27 → 0.8.28

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

@@ -1,36 +1,22 @@
-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  display: flex;\n  gap: 10px;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
-var MenuItemsList = styled.ul(_templateObject());
-var MenuItemsListItem = styled.li(_templateObject1(), function(param) {
-    var pointer = param.pointer;
-    return pointer && "cursor: pointer;";
-});
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Header/components/MenuItems/styles.ts
+const MenuItemsList = styled$1.ul`
+  display: flex;
+  gap: 10px;
+`;
+const MenuItemsListItem = styled$1.li`
+  ${({ pointer }) => pointer && "cursor: pointer;"};
+
+  a {
+    text-decoration: none;
+    border-color: red1;
+    color: typoPrimary;
+  }
+
+  a:hover {
+    border-bottom: 1px solid;
+    color: red1;
+  }
+`;
+//#endregion
 export { MenuItemsList, MenuItemsListItem };

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

@@ -1,31 +1,23 @@
+import { H7 } from "../../../../../../Elements/Typography/Typography.js";
+import "../../../../../../Elements/Typography/index.js";
+import Avatar_default from "../../../../../../Elements/Avatar/index.js";
+import { AvatarWrapper, UserInfo } from "./styles.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Avatar from "../../../../../../Elements/Avatar";
-import { H7 } from "../../../../../../Elements/Typography";
-import { AvatarWrapper, UserInfo } from "./styles";
-var UserInfoBlock = function UserInfoBlock(param) {
-    var userName = param.userName, role = param.role;
-    return /* @__PURE__ */ jsxs(AvatarWrapper, {
-        children: [
-            /* @__PURE__ */ jsx(Avatar, {
-                colorBack: "lightGray7",
-                size: 34
-            }),
-            /* @__PURE__ */ jsxs(UserInfo, {
-                children: [
-                    /* @__PURE__ */ jsx(H7, {
-                        variant: "bold",
-                        mt: 0,
-                        mb: "4px",
-                        children: userName
-                    }),
-                    /* @__PURE__ */ jsx(H7, {
-                        mt: 0,
-                        mb: 0,
-                        children: role
-                    })
-                ]
-            })
-        ]
-    });
+//#region packages/ui/Blocks/Header/components/UserMenu/components/UserInfo/index.tsx
+const UserInfoBlock = ({ userName, role }) => {
+	return /* @__PURE__ */ jsxs(AvatarWrapper, { children: [/* @__PURE__ */ jsx(Avatar_default, {
+		colorBack: "lightGray7",
+		size: 34
+	}), /* @__PURE__ */ jsxs(UserInfo, { children: [/* @__PURE__ */ jsx(H7, {
+		variant: "bold",
+		mt: 0,
+		mb: "4px",
+		children: userName
+	}), /* @__PURE__ */ jsx(H7, {
+		mt: 0,
+		mb: 0,
+		children: role
+	})] })] });
 };
+//#endregion
 export { UserInfoBlock };

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

@@ -1,32 +1,14 @@
-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  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  column-gap: 15px;\n  margin-bottom: 20px;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
-var UserInfo = styled.div(_templateObject());
-var AvatarWrapper = styled.div(_templateObject1());
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Header/components/UserMenu/components/UserInfo/styles.ts
+const UserInfo = styled$1.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const AvatarWrapper = styled$1.div`
+  display: flex;
+  column-gap: 15px;
+  margin-bottom: 20px;
+`;
+//#endregion
 export { AvatarWrapper, UserInfo };

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

@@ -1,2 +1,2 @@
-import { useLogout } from "./useLogout";
+import { useLogout } from "./useLogout.js";
 export { useLogout };

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

@@ -1,11 +1,10 @@
-var useLogout = function useLogout(param) {
-    var closeDropdown = param.closeDropdown, onLogout = param.onLogout;
-    var handleLogout = function handleLogout() {
-        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.js

@@ -1,103 +1,49 @@
-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 _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);
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+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 Avatar from "../../../../Elements/Avatar";
-import Button from "../../../../Elements/Button";
-import { useToggleAndClose } from "../../../../hooks/useToggleAndClose";
-import Popover from "../../../Popover";
-import { UserInfoBlock } from "./components/UserInfo";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
-import { useLogout } from "./hooks";
-import { DropdownContentWrap, Line, UserWrap } from "./styles";
-var UserMenu = function UserMenu(param) {
-    var user = param.user, onLogout = param.onLogout;
-    var _ref, _ref1, _ref2;
-    var _user_roles;
-    var _useToggleAndClose = _sliced_to_array(useToggleAndClose(false), 3), isDropdownOpen = _useToggleAndClose[0], toggleDropdown = _useToggleAndClose[1], closeDropdown = _useToggleAndClose[2];
-    var parentRef = useRef(null);
-    var handleLogout = useLogout({
-        closeDropdown: closeDropdown,
-        onLogout: onLogout
-    }).handleLogout;
-    return /* @__PURE__ */ jsxs(UserWrap, {
-        children: [
-            /* @__PURE__ */ jsx("div", {
-                ref: parentRef,
-                onClick: toggleDropdown,
-                children: /* @__PURE__ */ jsx(Avatar, {
-                    colorBack: isDropdownOpen ? "lightGray7" : "neutral20",
-                    size: 34
-                })
-            }),
-            isDropdownOpen && /* @__PURE__ */ jsx(Popover, {
-                parentRef: parentRef,
-                onClose: closeDropdown,
-                children: /* @__PURE__ */ jsxs(DropdownContentWrap, {
-                    children: [
-                        /* @__PURE__ */ jsx(UserInfoBlock, {
-                            userName: "".concat((_ref = user === null || user === void 0 ? void 0 : user.firstName) !== null && _ref !== void 0 ? _ref : "", " ").concat((_ref1 = user === null || user === void 0 ? void 0 : user.lastName) !== null && _ref1 !== void 0 ? _ref1 : ""),
-                            role: (_ref2 = user === null || user === void 0 ? void 0 : (_user_roles = user.roles) === null || _user_roles === void 0 ? void 0 : _user_roles[0]) !== null && _ref2 !== void 0 ? _ref2 : ""
-                        }),
-                        /* @__PURE__ */ jsx(Line, {}),
-                        /* @__PURE__ */ jsx(Button, {
-                            onClick: handleLogout,
-                            iconLeft: "logout",
-                            variant: "ghost",
-                            fullWidth: true,
-                            children: /* @__PURE__ */ jsx(Trans, {
-                                id: "logout",
-                                message: "Logout"
-                            })
-                        })
-                    ]
-                })
-            })
-        ]
-    });
+//#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.js

@@ -1,45 +1,25 @@
-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  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  align-items: center;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  width: 100%;\n  height: 1px;\n  background-color: ",
-        ";\n  margin: 4px 0;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { th } from "@xstyled/styled-components";
-var UserWrap = styled.div(_templateObject());
-var DropdownContentWrap = styled.div(_templateObject1(), th.shadow("dropShadow"), th.color("lightGray6"));
-var Line = styled.div(_templateObject2(), th.color("lightGray6"));
+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,10 +1,9 @@
-var useChangeLanguage = function useChangeLanguage(param) {
-    var onChangeLanguage = param.onChangeLanguage;
-    var handleChangeLanguage = function handleChangeLanguage(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.js

@@ -1,61 +1,45 @@
+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";
-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";
-var Header = function Header(param) {
-    var isMobileMenuOpen = param.isMobileMenuOpen, homeLink = param.homeLink, logo = param.logo, logoVariant = param.logoVariant, logoSrc = param.logoSrc, logoSrcWidth = param.logoSrcWidth, user = param.user, currentLanguage = param.currentLanguage, _param_hasUserMenu = param.hasUserMenu, hasUserMenu = _param_hasUserMenu === void 0 ? false : _param_hasUserMenu, rightMenuItems = param.rightMenuItems, showLanguageWithTitle = param.showLanguageWithTitle, languageFlagWrapBackgroundColor = param.languageFlagWrapBackgroundColor, _param_languageItems = param.languageItems, languageItems = _param_languageItems === void 0 ? defaultLanguageItems : _param_languageItems, _param_withLanguageSwitch = param.withLanguageSwitch, withLanguageSwitch = _param_withLanguageSwitch === void 0 ? true : _param_withLanguageSwitch, onOpenMobileSideMenu = param.onOpenMobileSideMenu, onChangeLanguage = param.onChangeLanguage, onLogout = param.onLogout;
-    var handleChangeLanguage = useChangeLanguage({
-        onChangeLanguage: onChangeLanguage
-    }).handleChangeLanguage;
-    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, {
-                            brand: logo,
-                            variant: logoVariant,
-                            width: "145px"
-                        })
-                    })
-                ]
-            }),
-            /* @__PURE__ */ jsxs(RightSide, {
-                children: [
-                    Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && /* @__PURE__ */ jsx(MenuItems, {
-                        items: rightMenuItems
-                    }),
-                    withLanguageSwitch && /* @__PURE__ */ jsx(LanguageWrapper, {
-                        children: /* @__PURE__ */ jsx(LanguageSwitch, {
-                            languageItems: languageItems,
-                            withTitle: showLanguageWithTitle,
-                            onLanguageChange: handleChangeLanguage,
-                            activeLanguage: currentLanguage,
-                            languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor
-                        })
-                    }),
-                    hasUserMenu && /* @__PURE__ */ jsx(UserMenu, {
-                        user: user,
-                        onLogout: onLogout
-                    })
-                ]
-            })
-        ]
-    });
+//#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/styles.js

@@ -1,55 +1,34 @@
-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  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"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: flex-end;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { headerHeight } from "./utils/constants";
-import styled, { th } from "@xstyled/styled-components";
-var Container = styled.header(_templateObject(), headerHeight, th.color("lightGray7"));
-var LeftSide = styled.div(_templateObject1());
-var LanguageWrapper = styled.div(_templateObject2());
-var RightSide = styled.div(_templateObject3());
+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/types.js

@@ -0,0 +1 @@
+export {};

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

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