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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/Header/components/MenuItems/styles.js +1 -1
  3. package/ui/Blocks/Header/styles.js +1 -1
  4. package/ui/Blocks/LanguageSwitch/styles.js +1 -1
  5. package/ui/Blocks/SideMenu/components/HamburgerMenu.js +2 -3
  6. package/ui/index.es.js +14354 -14976
  7. package/ui/index.umd.js +445 -441
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.8.20-beta.0",
3
+ "version": "0.8.20-beta.2",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/Header/components/MenuItems/styles.js CHANGED
@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import styled from '@xstyled/styled-components';
6
- export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: none;\n gap: 10px;\n\n @media (min-width: 1024px) {\n display: flex;\n }\n"], ["\n display: none;\n gap: 10px;\n\n @media (min-width: 1024px) {\n display: flex;\n }\n"])));
6
+ export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: 10px;\n"], ["\n display: flex;\n gap: 10px;\n"])));
7
7
  export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
8
8
  var pointer = _a.pointer;
9
9
  return pointer && 'cursor: pointer;';
package/ui/Blocks/Header/styles.js CHANGED
@@ -7,5 +7,5 @@ import styled, { th } from '@xstyled/styled-components';
7
7
  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'));
8
8
  export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
9
9
  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"])));
10
- export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: 20px;\n align-items: center;\n"], ["\n display: flex;\n gap: 20px;\n align-items: center;\n"])));
10
+ 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"])));
11
11
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/ui/Blocks/LanguageSwitch/styles.js CHANGED
@@ -13,7 +13,7 @@ export var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templa
13
13
  return "".concat(placement, ": 15px");
14
14
  });
15
15
  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"])));
16
- 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) {
16
+ 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) {
17
17
  var withTitle = _a.withTitle;
18
18
  return (withTitle ? '16px' : '8px');
19
19
  }, function (_a) {
package/ui/Blocks/SideMenu/components/HamburgerMenu.js CHANGED
@@ -6,8 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import styled from 'styled-components';
7
7
  import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
8
8
  import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
9
- import { css, x } from '@xstyled/styled-components';
10
- import { useTheme } from '@xstyled/styled-components';
9
+ import { css, x, useTheme } from '@xstyled/styled-components';
11
10
  import { th } from '@xstyled/system';
12
11
  var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 36px;\n height: 36px;\n border-radius: 70px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: ", ";\n &:hover {\n cursor: pointer;\n }\n\n ", ";\n\n @media (min-width: 1024px) {\n display: none;\n }\n"], ["\n width: 36px;\n height: 36px;\n border-radius: 70px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: ", ";\n &:hover {\n cursor: pointer;\n }\n\n ", ";\n\n @media (min-width: 1024px) {\n display: none;\n }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
13
12
  var isLeftMenuOpen = _a.isLeftMenuOpen;
@@ -19,6 +18,6 @@ export var HamburgerMenuButton = function (_a) {
19
18
  var theme = useTheme();
20
19
  var neutralColor = th.color('neutral20')({ theme: theme });
21
20
  var dispalyedIcon = isLeftMenuOpen ? (_jsx(MobileCancel, { fill: neutralColor })) : (_jsx(HamburgerMenuIcon, { fill: neutralColor, stroke: 'none' }));
22
- return (_jsx(HamburgerMenuWrapper, { mr: 3, onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
21
+ return (_jsx(HamburgerMenuWrapper, { mr: "8px", onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
23
22
  };
24
23
  var templateObject_1, templateObject_2, templateObject_3;