@mailstep/design-system 0.8.20-beta.1 → 0.8.20-beta.2

package/package.json

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

package/ui/Blocks/LanguageSwitch/styles.js

@@ -13,7 +13,7 @@ export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templa
     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 LanguageFlagWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 7px 12px;\n  border-radius: 10px;\n  background: ", ";\n"])), function (_a) {
+export var LanguageFlagWrap = styled.div(templateObject_4 || (templateObject_4 = __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) {

package/ui/index.es.js

@@ -44188,11 +44188,15 @@ const Ewe = _.img`
   gap: ${({
   withTitle: e
 }) => e ? "16px" : "8px"};
-  padding: 7px 12px;
+  padding: 6px;
   border-radius: 10px;
   background: ${({
   backgroundColor: e
 }) => e || "white"};
+
+  @media (min-width: 768px) {
+    padding: 7px 12px;
+  }
 `, jwe = ({
   activeLanguage: e,
   onLanguageChange: t,

package/ui/index.umd.js

@@ -3063,9 +3063,13 @@ ${q.current.stack}
   align-items: center;
   justify-content: space-between;
   gap: ${({withTitle:e})=>e?"16px":"8px"};
-  padding: 7px 12px;
+  padding: 6px;
   border-radius: 10px;
   background: ${({backgroundColor:e})=>e||"white"};
+
+  @media (min-width: 768px) {
+    padding: 7px 12px;
+  }
 `,WF=({activeLanguage:e,onLanguageChange:t,languageItems:n,placement:r="right",withTitle:i,languageFlagWrapBackgroundColor:o})=>{const[l,c]=b.useState(!1),d=b.useCallback(()=>{c(!1)},[]),f=Eo({onClose:d}),A=b.useCallback(()=>{c(!l)},[l]),g=b.useCallback(I=>()=>{t==null||t(I)},[t]),v=b.useMemo(()=>n==null?void 0:n.find(I=>I.languageCode===e),[e,n]),y=b.useMemo(()=>n==null?void 0:n.filter(I=>I.languageCode!==e),[n,e]),w=b.useMemo(()=>y==null?void 0:y.map(({title:I,icon:E,languageCode:S})=>({title:I,icon:E,onClick:g(S)})),[y,g]);return!v||!n?null:h.jsxs(kwe,{ref:f,children:[h.jsxs(Mwe,{onClick:A,backgroundColor:o,withTitle:i,children:[h.jsxs(Iwe,{children:[v.icon,i&&v.title]}),h.jsx(st,{icon:"chevronDown",size:"10px"})]}),h.jsx(Ewe,{showMenu:l,items:w,placement:r})]})},Lwe=Y.div`
   display: block;
   width: 100%;