@mailstep/design-system 0.6.53 → 0.6.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.53",
+  "version": "0.6.54",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -1,9 +1,4 @@
 import { FC } from 'react';
-import { LanguageItem } from './types';
-type Props = {
-    activeLanguage?: string;
-    onLanguageChange: (languageCode: string) => void;
-    languageItems?: LanguageItem[];
-};
-declare const LanguageSwitch: FC<Props>;
+import { LanguageSwitchProps } from './types';
+declare const LanguageSwitch: FC<LanguageSwitchProps>;
 export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -3,8 +3,8 @@ import React, { useCallback, useMemo } from 'react';
 import { useClickOutside } from '../Modal/hooks/useClickOutside';
 import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap, DownImg, StyledDropdownMenu } from './styles';
 var LanguageSwitch = function (_a) {
-    var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems;
-    var _b = React.useState(false), flagDropdownVisible = _b[0], setFlagDropdownVisible = _b[1];
+    var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b;
+    var _c = React.useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
     var onClose = useCallback(function () {
         setFlagDropdownVisible(false);
     }, []);
@@ -29,6 +29,6 @@ var LanguageSwitch = function (_a) {
     }, [filteredLanguages, languageToggle]);
     if (!activeLanguageObj || !languageItems)
         return null;
-    return (_jsxs(LanguageSwitchWrap, { ref: flagMenuRef, children: [_jsxs(LanguageFlagWrap, { onClick: handleFlagClick, children: [_jsx(StyledFlag, { children: activeLanguageObj.icon }), _jsx(DownImg, { width: "10", height: "10", src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2YwZjsKICAgICAgICBvcGFjaXR5OiAwOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICM3MDcwNzA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJDaGV2cm9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4KSByb3RhdGUoOTApIj4KICAgIDxyZWN0IGlkPSJGcmFtZSIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIvPgogICAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0iY2xzLTIiIGQ9Ik0xMCwxQTEsMSwwLDAsMCw4LjI5My4yOTNMNSwzLjU4NiwxLjcwNy4yOTNBMSwxLDAsMSwwLC4yOTMsMS43MDdsNCw0YTEsMSwwLDAsMCwxLjQxNSwwbDQtNEExLDEsMCwwLDAsMTAsMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgOCkgcm90YXRlKC05MCkiLz4KICA8L2c+Cjwvc3ZnPgo=" })] }), _jsx(StyledDropdownMenu, { showMenu: flagDropdownVisible, items: formattedLanguages })] }));
+    return (_jsxs(LanguageSwitchWrap, { ref: flagMenuRef, children: [_jsxs(LanguageFlagWrap, { onClick: handleFlagClick, children: [_jsx(StyledFlag, { children: activeLanguageObj.icon }), _jsx(DownImg, { width: "10", height: "10", src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2YwZjsKICAgICAgICBvcGFjaXR5OiAwOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICM3MDcwNzA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJDaGV2cm9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4KSByb3RhdGUoOTApIj4KICAgIDxyZWN0IGlkPSJGcmFtZSIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIvPgogICAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0iY2xzLTIiIGQ9Ik0xMCwxQTEsMSwwLDAsMCw4LjI5My4yOTNMNSwzLjU4NiwxLjcwNy4yOTNBMSwxLDAsMSwwLC4yOTMsMS43MDdsNCw0YTEsMSwwLDAsMCwxLjQxNSwwbDQtNEExLDEsMCwwLDAsMTAsMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgOCkgcm90YXRlKC05MCkiLz4KICA8L2c+Cjwvc3ZnPgo=" })] }), _jsx(StyledDropdownMenu, { showMenu: flagDropdownVisible, items: formattedLanguages, placement: placement })] }));
 };
 export default LanguageSwitch;

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

@@ -2,11 +2,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<{
-        activeLanguage?: string | undefined;
-        onLanguageChange: (languageCode: string) => void;
-        languageItems?: import("../types").LanguageItem[] | undefined;
-    }>;
+    component: import("react").FC<import("../types").LanguageSwitchProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.js

@@ -24,6 +24,7 @@ export var Default = {
     args: {
         languageItems: languageItems,
         activeLanguage: 'en',
+        placement: 'left',
         onLanguageChange: function (languageCode) {
             console.log('Language changed:', languageCode);
         }

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

@@ -1,6 +1,9 @@
 /// <reference types="react" />
+import { Placement } from './types';
 export declare const StyledFlag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const StyledDropdownMenu: import("styled-components").StyledComponent<(<T extends import("../../Elements/DropdownMenu/types").Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import("../../Elements/DropdownMenu/types").DropdownMenuProps<T>) => JSX.Element), import("@xstyled/system").Theme, {}, never>;
+export declare const StyledDropdownMenu: import("styled-components").StyledComponent<(<T extends import("../../Elements/DropdownMenu/types").Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import("../../Elements/DropdownMenu/types").DropdownMenuProps<T>) => JSX.Element), import("@xstyled/system").Theme, {
+    placement: Placement;
+}, never>;
 export declare const LanguageSwitchWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const DownImg: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {}, never>;
 export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -5,8 +5,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import styled from '@xstyled/styled-components';
 import DropdownMenu from '../../Elements/DropdownMenu';
 export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: auto;\n  cursor: pointer;\n"], ["\n  width: auto;\n  cursor: pointer;\n"])));
-export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n  width: max-content;\n  @media (min-width: 1024px) {\n    left: -5px;\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      left: 15px;\n    }\n  }\n"], ["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n  width: max-content;\n  @media (min-width: 1024px) {\n    left: -5px;\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      left: 15px;\n    }\n  }\n"])));
-export var LanguageSwitchWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
+export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"], ["\n  position: absolute;\n  top: 30px;\n  right: -5px;\n\n  width: max-content;\n  @media (min-width: 1024px) {\n    ", "\n  }\n  & > ul > a > * {\n    display: flex;\n    align-items: center;\n  }\n\n  :before {\n    content: '';\n    top: -1px;\n    right: 15px;\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    -webkit-transform: rotate(45deg) translate(-7px);\n    -ms-transform: rotate(45deg) translate(-7px);\n    transform: rotate(45deg) translate(-7px);\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    background: white;\n    border-top: 1px solid rgba(0, 0, 0, 0.1);\n    @media (min-width: 1024px) {\n      ", "\n    }\n  }\n"])), function (_a) {
+    var placement = _a.placement;
+    return "".concat(placement, ": -5px");
+}, function (_a) {
+    var placement = _a.placement;
+    return "".concat(placement, ": 15px");
+});
+export var LanguageSwitchWrap = styled.div(templateObject_3 || (templateObject_3 = __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 DownImg = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 15px;\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n"], ["\n  margin-left: 15px;\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n"])));
 export var LanguageFlagWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: grid;\n  grid-template-columns: 20px auto;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: grid;\n  grid-template-columns: 20px auto;\n  align-items: center;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -4,3 +4,10 @@ export type LanguageItem = {
     icon: ReactElement;
     title: string;
 };
+export type Placement = 'left' | 'right';
+export type LanguageSwitchProps = {
+    activeLanguage?: string;
+    onLanguageChange: (languageCode: string) => void;
+    languageItems?: LanguageItem[];
+    placement?: Placement;
+};

package/ui/index.es.js

@@ -51341,9 +51341,12 @@ const QCe = te.img`
   position: absolute;
   top: 30px;
   right: -5px;
+
   width: max-content;
   @media (min-width: 1024px) {
-    left: -5px;
+    ${({
+  placement: e
+}) => `${e}: -5px`}
   }
   & > ul > a > * {
     display: flex;
@@ -51364,13 +51367,16 @@ const QCe = te.img`
     background: white;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     @media (min-width: 1024px) {
-      left: 15px;
+      ${({
+  placement: e
+}) => `${e}: 15px`}
     }
   }
 `, qxe = te.div`
   position: relative;
   display: flex;
   align-items: center;
+  width: fit-content;
 `, $xe = te.img`
   margin-left: 15px;
   display: inline-block;
@@ -51385,31 +51391,32 @@ const QCe = te.img`
 `, tSe = ({
   activeLanguage: e,
   onLanguageChange: t,
-  languageItems: r
+  languageItems: r,
+  placement: n = "right"
 }) => {
-  const [n, i] = de.useState(!1), o = Ee(() => {
-    i(!1);
-  }, []), l = Lc({
-    onClose: o
-  }), c = Ee(() => {
-    i(!n);
-  }, [n]), u = Ee((g) => () => {
-    t && t(g);
-  }, [t]), f = at(() => r == null ? void 0 : r.find((g) => g.languageCode === e), [e, r]), A = at(() => r == null ? void 0 : r.filter((g) => g.languageCode !== e), [r, e]), p = at(() => A == null ? void 0 : A.map(({
-    title: g,
-    icon: v,
-    languageCode: b
+  const [i, o] = de.useState(!1), l = Ee(() => {
+    o(!1);
+  }, []), c = Lc({
+    onClose: l
+  }), u = Ee(() => {
+    o(!i);
+  }, [i]), f = Ee((v) => () => {
+    t && t(v);
+  }, [t]), A = at(() => r == null ? void 0 : r.find((v) => v.languageCode === e), [e, r]), p = at(() => r == null ? void 0 : r.filter((v) => v.languageCode !== e), [r, e]), g = at(() => p == null ? void 0 : p.map(({
+    title: v,
+    icon: b,
+    languageCode: C
   }) => ({
-    title: g,
-    icon: v,
-    onClick: u(b)
-  })), [A, u]);
-  return !f || !r ? null : /* @__PURE__ */ m.jsxs(qxe, { ref: l, children: [
-    /* @__PURE__ */ m.jsxs(eSe, { onClick: c, children: [
-      /* @__PURE__ */ m.jsx(Qxe, { children: f.icon }),
+    title: v,
+    icon: b,
+    onClick: f(C)
+  })), [p, f]);
+  return !A || !r ? null : /* @__PURE__ */ m.jsxs(qxe, { ref: c, children: [
+    /* @__PURE__ */ m.jsxs(eSe, { onClick: u, children: [
+      /* @__PURE__ */ m.jsx(Qxe, { children: A.icon }),
       /* @__PURE__ */ m.jsx($xe, { width: "10", height: "10", src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2YwZjsKICAgICAgICBvcGFjaXR5OiAwOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICM3MDcwNzA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJDaGV2cm9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4KSByb3RhdGUoOTApIj4KICAgIDxyZWN0IGlkPSJGcmFtZSIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIvPgogICAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0iY2xzLTIiIGQ9Ik0xMCwxQTEsMSwwLDAsMCw4LjI5My4yOTNMNSwzLjU4NiwxLjcwNy4yOTNBMSwxLDAsMSwwLC4yOTMsMS43MDdsNCw0YTEsMSwwLDAsMCwxLjQxNSwwbDQtNEExLDEsMCwwLDAsMTAsMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgOCkgcm90YXRlKC05MCkiLz4KICA8L2c+Cjwvc3ZnPgo=" })
     ] }),
-    /* @__PURE__ */ m.jsx(Kxe, { showMenu: n, items: p })
+    /* @__PURE__ */ m.jsx(Kxe, { showMenu: i, items: g, placement: n })
   ] });
 }, TEe = ({
   onSubmit: e,

package/ui/index.umd.js

@@ -3501,9 +3501,10 @@ ${q.current.stack}
   position: absolute;
   top: 30px;
   right: -5px;
+
   width: max-content;
   @media (min-width: 1024px) {
-    left: -5px;
+    ${({placement:e})=>`${e}: -5px`}
   }
   & > ul > a > * {
     display: flex;
@@ -3524,13 +3525,14 @@ ${q.current.stack}
     background: white;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     @media (min-width: 1024px) {
-      left: 15px;
+      ${({placement:e})=>`${e}: 15px`}
     }
   }
 `,HSe=te.div`
   position: relative;
   display: flex;
   align-items: center;
+  width: fit-content;
 `,GSe=te.img`
   margin-left: 15px;
   display: inline-block;
@@ -3542,7 +3544,7 @@ ${q.current.stack}
   display: grid;
   grid-template-columns: 20px auto;
   align-items: center;
-`,lz=({activeLanguage:e,onLanguageChange:t,languageItems:r})=>{const[n,i]=I.useState(!1),o=I.useCallback(()=>{i(!1)},[]),l=Cs({onClose:o}),u=I.useCallback(()=>{i(!n)},[n]),c=I.useCallback(g=>()=>{t&&t(g)},[t]),f=I.useMemo(()=>r==null?void 0:r.find(g=>g.languageCode===e),[e,r]),A=I.useMemo(()=>r==null?void 0:r.filter(g=>g.languageCode!==e),[r,e]),p=I.useMemo(()=>A==null?void 0:A.map(({title:g,icon:v,languageCode:y})=>({title:g,icon:v,onClick:c(y)})),[A,c]);return!f||!r?null:m.jsxs(HSe,{ref:l,children:[m.jsxs(_Se,{onClick:u,children:[m.jsx(jSe,{children:f.icon}),m.jsx(GSe,{width:"10",height:"10",src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2YwZjsKICAgICAgICBvcGFjaXR5OiAwOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICM3MDcwNzA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJDaGV2cm9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4KSByb3RhdGUoOTApIj4KICAgIDxyZWN0IGlkPSJGcmFtZSIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIvPgogICAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0iY2xzLTIiIGQ9Ik0xMCwxQTEsMSwwLDAsMCw4LjI5My4yOTNMNSwzLjU4NiwxLjcwNy4yOTNBMSwxLDAsMSwwLC4yOTMsMS43MDdsNCw0YTEsMSwwLDAsMCwxLjQxNSwwbDQtNEExLDEsMCwwLDAsMTAsMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgOCkgcm90YXRlKC05MCkiLz4KICA8L2c+Cjwvc3ZnPgo="})]}),m.jsx(zSe,{showMenu:n,items:p})]})},USe=({onSubmit:e,activeLanguage:t,onLanguageChange:r,children:n,brand:i,brandVariant:o,isSubmitting:l,isSubmitDisabled:u,withDistributionCenterSelect:c,distributionCenterOptions:f,selectedDistributionCenter:A,onChangeDistributionCenter:p,languageItems:g,version:v,backgroundImage:y})=>m.jsxs(ISe,{backgroundImage:y,children:[m.jsxs(OSe,{children:[m.jsx(TSe,{children:m.jsx(MSe,{brand:i,variant:o})}),m.jsxs(kSe,{children:[m.jsxs(nt.div,{mr:4,children:[m.jsx(c1,{color:"gray1",variant:"bold",mt:"8px",mb:"8px",as:"h6",children:m.jsx(jr,{id:"form.heading.support",message:"Support:"})}),m.jsx(PSe,{href:"mailto:mailstep@mailstep.cz",children:aSe})]}),m.jsx(lz,{activeLanguage:t,onLanguageChange:r,languageItems:g})]}),m.jsx(WSe,{onSubmit:e,isSubmitDisabled:u,isSubmitting:l,onChangeDistributionCenter:p,withDistributionCenterSelect:c,distributionCenterOptions:f,selectedDistributionCenter:A})]}),n,v&&m.jsx(DSe,{children:v}),m.jsx(BSe,{})]}),ZSe=te(nt.div)`
+`,lz=({activeLanguage:e,onLanguageChange:t,languageItems:r,placement:n="right"})=>{const[i,o]=I.useState(!1),l=I.useCallback(()=>{o(!1)},[]),u=Cs({onClose:l}),c=I.useCallback(()=>{o(!i)},[i]),f=I.useCallback(v=>()=>{t&&t(v)},[t]),A=I.useMemo(()=>r==null?void 0:r.find(v=>v.languageCode===e),[e,r]),p=I.useMemo(()=>r==null?void 0:r.filter(v=>v.languageCode!==e),[r,e]),g=I.useMemo(()=>p==null?void 0:p.map(({title:v,icon:y,languageCode:C})=>({title:v,icon:y,onClick:f(C)})),[p,f]);return!A||!r?null:m.jsxs(HSe,{ref:u,children:[m.jsxs(_Se,{onClick:c,children:[m.jsx(jSe,{children:A.icon}),m.jsx(GSe,{width:"10",height:"10",src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2YwZjsKICAgICAgICBvcGFjaXR5OiAwOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICM3MDcwNzA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJDaGV2cm9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4KSByb3RhdGUoOTApIj4KICAgIDxyZWN0IGlkPSJGcmFtZSIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIvPgogICAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0iY2xzLTIiIGQ9Ik0xMCwxQTEsMSwwLDAsMCw4LjI5My4yOTNMNSwzLjU4NiwxLjcwNy4yOTNBMSwxLDAsMSwwLC4yOTMsMS43MDdsNCw0YTEsMSwwLDAsMCwxLjQxNSwwbDQtNEExLDEsMCwwLDAsMTAsMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgOCkgcm90YXRlKC05MCkiLz4KICA8L2c+Cjwvc3ZnPgo="})]}),m.jsx(zSe,{showMenu:i,items:g,placement:n})]})},USe=({onSubmit:e,activeLanguage:t,onLanguageChange:r,children:n,brand:i,brandVariant:o,isSubmitting:l,isSubmitDisabled:u,withDistributionCenterSelect:c,distributionCenterOptions:f,selectedDistributionCenter:A,onChangeDistributionCenter:p,languageItems:g,version:v,backgroundImage:y})=>m.jsxs(ISe,{backgroundImage:y,children:[m.jsxs(OSe,{children:[m.jsx(TSe,{children:m.jsx(MSe,{brand:i,variant:o})}),m.jsxs(kSe,{children:[m.jsxs(nt.div,{mr:4,children:[m.jsx(c1,{color:"gray1",variant:"bold",mt:"8px",mb:"8px",as:"h6",children:m.jsx(jr,{id:"form.heading.support",message:"Support:"})}),m.jsx(PSe,{href:"mailto:mailstep@mailstep.cz",children:aSe})]}),m.jsx(lz,{activeLanguage:t,onLanguageChange:r,languageItems:g})]}),m.jsx(WSe,{onSubmit:e,isSubmitDisabled:u,isSubmitting:l,onChangeDistributionCenter:p,withDistributionCenterSelect:c,distributionCenterOptions:f,selectedDistributionCenter:A})]}),n,v&&m.jsx(DSe,{children:v}),m.jsx(BSe,{})]}),ZSe=te(nt.div)`
   margin-right: 1em;
 `,YSe=te.div`
   display: flex;