@mailstep/design-system 0.8.31-beta.1 → 0.8.31-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 (15) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.js +1 -1
  3. package/ui/Blocks/Modal/styles.js +1 -1
  4. package/ui/Elements/Avatar/Avatar.js +1 -1
  5. package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js +1 -1
  6. package/ui/Elements/DatePicker/Datetime/components/Timepicker.js +2 -2
  7. package/ui/ThemeProvider/themes/dark.d.ts +1 -0
  8. package/ui/ThemeProvider/themes/dark.js +1 -1
  9. package/ui/ThemeProvider/themes/default.d.ts +1 -0
  10. package/ui/ThemeProvider/themes/default.js +2 -2
  11. package/ui/ThemeProvider/themes/index.d.ts +4 -1
  12. package/ui/ThemeProvider/themes/mailwise.d.ts +2 -1
  13. package/ui/ThemeProvider/themes/mailwise.js +1 -1
  14. package/ui/index.es.js +14006 -14635
  15. package/ui/index.umd.js +614 -614
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.8.31-beta.1",
3
+ "version": "0.8.31-beta.2",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.js CHANGED
@@ -12,7 +12,7 @@ import { i18n } from '@lingui/core';
12
12
  import { Trans } from '@lingui/react';
13
13
  import styled from '@xstyled/styled-components';
14
14
  var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-right: 2;\n gap: 24px;\n background-color: red;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-right: 2;\n gap: 24px;\n background-color: red;\n position: relative;\n"])));
15
- var ActionsWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translate(-50%);\n width: 596px;\n padding: 12px 24px;\n border-radius: 10px;\n background-color: #fff;\n box-shadow: dropShadow;\n z-index: 2;\n"], ["\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translate(-50%);\n width: 596px;\n padding: 12px 24px;\n border-radius: 10px;\n background-color: #fff;\n box-shadow: dropShadow;\n z-index: 2;\n"])));
15
+ var ActionsWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translate(-50%);\n width: 596px;\n padding: 12px 24px;\n border-radius: 10px;\n background-color: white;\n box-shadow: dropShadow;\n z-index: 2;\n"], ["\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translate(-50%);\n width: 596px;\n padding: 12px 24px;\n border-radius: 10px;\n background-color: white;\n box-shadow: dropShadow;\n z-index: 2;\n"])));
16
16
  var StyledText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 18px;\n color: blue2;\n font-weight: 600;\n"], ["\n font-size: 14px;\n line-height: 18px;\n color: blue2;\n font-weight: 600;\n"])));
17
17
  var ContentWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
18
18
  var ButtonsWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: 10px;\n\n & > * {\n margin-left: 10px;\n }\n"], ["\n display: flex;\n align-items: center;\n margin-left: 10px;\n\n & > * {\n margin-left: 10px;\n }\n"])));
package/ui/Blocks/Modal/styles.js CHANGED
@@ -78,5 +78,5 @@ export var ButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 =
78
78
  var hasBothButtons = _a.hasBothButtons;
79
79
  return (hasBothButtons ? '50%' : 'auto');
80
80
  });
81
- export var CloseButton = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n position: absolute;\n z-index: 2;\n background-color: bgLightGray1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"], ["\n position: absolute;\n z-index: 2;\n background-color: bgLightGray1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"])));
81
+ export var CloseButton = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n position: absolute;\n z-index: 2;\n background-color: bgLightGray2;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"], ["\n position: absolute;\n z-index: 2;\n background-color: bgLightGray2;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n top: 11px;\n right: 20px;\n width: 34px;\n height: 34px;\n"])));
82
82
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
package/ui/Elements/Avatar/Avatar.js CHANGED
@@ -31,6 +31,6 @@ var defaultDimension = 100;
31
31
  var StyledAvatarWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n overflow: hidden;\n color: ", ";\n background-color: ", ";\n width: ", ";\n height: ", ";\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n overflow: hidden;\n color: ", ";\n background-color: ", ";\n width: ", ";\n height: ", ";\n :hover {\n background-color: ", ";\n }\n"])), function (props) { return (props.$colorFront ? th.color(props.$colorFront) : 'auto'); }, function (props) { return (props.$colorBack ? th.color(props.$colorBack) : 'auto'); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return (props.$hoverColorBack ? th.color(props.$hoverColorBack) : 'auto'); });
32
32
  export var Avatar = function (_a) {
33
33
  var src = _a.src, _b = _a.size, size = _b === void 0 ? defaultDimension : _b, colorFront = _a.colorFront, colorBack = _a.colorBack, className = _a.className, hoverColorBack = _a.hoverColorBack, rest = __rest(_a, ["src", "size", "colorFront", "colorBack", "className", "hoverColorBack"]);
34
- return (_jsx(_Fragment, { children: _jsx(StyledAvatarWrap, __assign({ size: size || 34, className: className, "$colorBack": colorBack || 'neutral20', "$colorFront": colorFront || 'blue2', "$hoverColorBack": hoverColorBack || 'lightGray7' }, rest, { children: src ? _jsx("img", { src: src, width: size, height: size }) : _jsx(Profile, {}) })) }));
34
+ return (_jsx(_Fragment, { children: _jsx(StyledAvatarWrap, __assign({ size: size || 34, className: className, "$colorBack": colorBack || 'neutral20', "$colorFront": colorFront || 'blue2', "$hoverColorBack": hoverColorBack || 'lightGray7' }, rest, { children: src ? _jsx("img", { src: src, width: size, height: size }) : _jsx(Profile, { stroke: colorFront || 'blue2' }) })) }));
35
35
  };
36
36
  var templateObject_1;
package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js CHANGED
@@ -27,5 +27,5 @@ export var DateRepeater = function (_a) {
27
27
  }
28
28
  onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
29
29
  }, [onChangeOthers, reset, others]);
30
- return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, backgroundColor: "white", cursor: "pointer", border: "none", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
30
+ return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, background: "white", cursor: "pointer", border: "none", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
31
31
  };
package/ui/Elements/DatePicker/Datetime/components/Timepicker.js CHANGED
@@ -12,8 +12,8 @@ import { FooterRow } from './FooterRow';
12
12
  import { FooterRowLabel } from './FooterRowLabel';
13
13
  var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transform: rotate(90deg);\n font-size: 18px;\n margin: -4px 0;\n background-color: transparent !important;\n border: none;\n color: ", ";\n &:disabled:hover {\n color: ", ";\n cursor: default;\n }\n &:hover {\n color: ", ";\n background-color: transparent !important;\n }\n"], ["\n transform: rotate(90deg);\n font-size: 18px;\n margin: -4px 0;\n background-color: transparent !important;\n border: none;\n color: ", ";\n &:disabled:hover {\n color: ", ";\n cursor: default;\n }\n &:hover {\n color: ", ";\n background-color: transparent !important;\n }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
14
14
  var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 6px;\n padding: 0 4px;\n margin: 0 4px;\n"], ["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 6px;\n padding: 0 4px;\n margin: 0 4px;\n"])), th('colors.lightGray2'));
15
- var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: ", ";\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: ", ";\n &:disabled {\n opacity: 0.5;\n }\n"])), th('colors.white'));
16
- var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: ", ";\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: ", ";\n &:disabled {\n opacity: 0.5;\n }\n"])), th('colors.white'));
15
+ var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: white;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: white;\n &:disabled {\n opacity: 0.5;\n }\n"])));
16
+ var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: white;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: white;\n &:disabled {\n opacity: 0.5;\n }\n"])));
17
17
  var regExp = '^[0-9]*$';
18
18
  export var Timepicker = function (_a) {
19
19
  var _b, _c, _d, _e;
package/ui/ThemeProvider/themes/dark.d.ts CHANGED
@@ -2,6 +2,7 @@ declare const darkTheme: {
2
2
  colors: {
3
3
  bgLightGray: string;
4
4
  bgLightGray1: string;
5
+ bgLightGray2: string;
5
6
  typoPrimary: string;
6
7
  textPrimary: string;
7
8
  white: string;
package/ui/ThemeProvider/themes/dark.js CHANGED
@@ -10,5 +10,5 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import defaultTheme from './default';
13
- var darkTheme = __assign(__assign({}, defaultTheme), { colors: __assign(__assign({}, defaultTheme.colors), { bgLightGray: '#355069', bgLightGray1: '#3a667b', typoPrimary: '#ededed', textPrimary: '#ededed', white: '#1b2b38', lightGray7: '#5f5f5f', neutral10: '#1e2532', neutral20: '#2e475d', neutral30: '#42505d', neutral300: '#d6d9df', red1: '#55d1f3', red20: '#3a667b', red30: '#8594A5', red60: '#55d1f3', red70: '#d1f5ff', red80: '#d1f5ff', yellow20: '#857000', yellow60: '#D9B600', neutral500: '#55d1f3', lightGray1: '#162C3F', lightGray2: '#1a2b38', lightGray3: '#7e8489', lightGray4: '#7A90A1', lightGray6: '#7A90A1', blue1: '#ffffff', blue2: '#6a6a6a', blue3: '#081724', blue10: '#2e475d', sideMenuSelectedText: '#fff' }), shadows: __assign(__assign({}, defaultTheme.shadows), { dialogShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)', gridShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)' }) });
13
+ var darkTheme = __assign(__assign({}, defaultTheme), { colors: __assign(__assign({}, defaultTheme.colors), { bgLightGray: '#355069', bgLightGray1: '#3a667b', bgLightGray2: '#F1F5F9', typoPrimary: '#ededed', textPrimary: '#ededed', white: '#1b2b38', lightGray7: '#5f5f5f', neutral10: '#1e2532', neutral20: '#2e475d', neutral30: '#42505d', neutral300: '#d6d9df', red1: '#73e1ff', red20: '#3a667b', red30: '#8594A5', red60: '#55d1f3', red70: '#d1f5ff', red80: '#d1f5ff', yellow20: '#857000', yellow60: '#e77c00', neutral500: '#55d1f3', lightGray1: '#162C3F', lightGray2: '#1a2b38', lightGray3: '#7e8489', lightGray4: '#7A90A1', lightGray6: '#7A90A1', blue1: '#ffffff', blue2: '#d9fffa', blue3: '#081724', blue10: '#2e475d', sideMenuSelectedText: '#fff' }), shadows: __assign(__assign({}, defaultTheme.shadows), { dialogShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)', gridShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)' }) });
14
14
  export default darkTheme;
package/ui/ThemeProvider/themes/default.d.ts CHANGED
@@ -14,6 +14,7 @@ declare const defaultTheme: {
14
14
  white: string;
15
15
  bgLightGray: string;
16
16
  bgLightGray1: string;
17
+ bgLightGray2: string;
17
18
  lightGray1: string;
18
19
  lightGray2: string;
19
20
  lightGray3: string;
package/ui/ThemeProvider/themes/default.js CHANGED
@@ -1,5 +1,4 @@
1
- var defaultTheme = {
2
- screens: {
1
+ var defaultTheme = { screens: {
3
2
  // same as xstyled default
4
3
  _: 0,
5
4
  xs: 479,
@@ -15,6 +14,7 @@ var defaultTheme = {
15
14
  white: '#FFFFFF',
16
15
  bgLightGray: '#FAFBFC',
17
16
  bgLightGray1: '#F1F5F9',
17
+ bgLightGray2: '#F1F5F9',
18
18
  lightGray1: '#F5F7FA',
19
19
  lightGray2: '#EFF3F8',
20
20
  lightGray3: '#D4D8DE',
package/ui/ThemeProvider/themes/index.d.ts CHANGED
@@ -15,6 +15,7 @@ declare const themes: {
15
15
  white: string;
16
16
  bgLightGray: string;
17
17
  bgLightGray1: string;
18
+ bgLightGray2: string;
18
19
  lightGray1: string;
19
20
  lightGray2: string;
20
21
  lightGray3: string;
@@ -258,6 +259,7 @@ declare const themes: {
258
259
  80: string;
259
260
  96: string;
260
261
  };
262
+ zIndices: number[];
261
263
  screens: {
262
264
  _: number;
263
265
  xs: number;
@@ -273,6 +275,7 @@ declare const themes: {
273
275
  white: string;
274
276
  bgLightGray: string;
275
277
  bgLightGray1: string;
278
+ bgLightGray2: string;
276
279
  lightGray1: string;
277
280
  lightGray2: string;
278
281
  lightGray3: string;
@@ -383,12 +386,12 @@ declare const themes: {
383
386
  simpleLong: string;
384
387
  inputTransition: string;
385
388
  };
386
- zIndices: number[];
387
389
  };
388
390
  dark: {
389
391
  colors: {
390
392
  bgLightGray: string;
391
393
  bgLightGray1: string;
394
+ bgLightGray2: string;
392
395
  typoPrimary: string;
393
396
  textPrimary: string;
394
397
  white: string;
package/ui/ThemeProvider/themes/mailwise.d.ts CHANGED
@@ -90,6 +90,7 @@ declare const mailwiseTheme: {
90
90
  80: string;
91
91
  96: string;
92
92
  };
93
+ zIndices: number[];
93
94
  screens: {
94
95
  _: number;
95
96
  xs: number;
@@ -105,6 +106,7 @@ declare const mailwiseTheme: {
105
106
  white: string;
106
107
  bgLightGray: string;
107
108
  bgLightGray1: string;
109
+ bgLightGray2: string;
108
110
  lightGray1: string;
109
111
  lightGray2: string;
110
112
  lightGray3: string;
@@ -215,6 +217,5 @@ declare const mailwiseTheme: {
215
217
  simpleLong: string;
216
218
  inputTransition: string;
217
219
  };
218
- zIndices: number[];
219
220
  };
220
221
  export default mailwiseTheme;
package/ui/ThemeProvider/themes/mailwise.js CHANGED
@@ -79,5 +79,5 @@ var mailwiseTheme = __assign(__assign({}, defaultTheme), { fontSizes: ['0rem', '
79
79
  72: '18rem',
80
80
  80: '20rem',
81
81
  96: '24rem'
82
- } });
82
+ }, zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999] });
83
83
  export default mailwiseTheme;