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

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 (6) 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/SideMenu/components/HamburgerMenu.js +2 -3
  5. package/ui/index.es.js +14349 -14975
  6. package/ui/index.umd.js +440 -440
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.1",
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/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;