@mailstep/design-system 0.8.16-beta.23 → 0.8.16-beta.24

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 (11) hide show
  1. package/package.json +1 -1
  2. package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js +1 -1
  3. package/ui/Elements/DatePicker/Datetime/components/Timepicker.js +2 -2
  4. package/ui/Elements/Select/components/CountMultiValue.js +1 -1
  5. package/ui/Elements/Select/components/IconValueContainer.js +1 -1
  6. package/ui/ThemeProvider/themes/dark.d.ts +2 -0
  7. package/ui/ThemeProvider/themes/default.d.ts +2 -0
  8. package/ui/ThemeProvider/themes/default.js +2 -0
  9. package/ui/ThemeProvider/themes/index.d.ts +4 -0
  10. package/ui/index.es.js +6440 -6442
  11. package/ui/index.umd.js +361 -359
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.8.16-beta.23",
3
+ "version": "0.8.16-beta.24",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
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, 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] })] })] }) }));
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] })] })] }) }));
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 &: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 &: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 &: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 &:disabled {\n opacity: 0.5;\n }\n"])));
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'));
17
17
  var regExp = '^[0-9]*$';
18
18
  export var Timepicker = function (_a) {
19
19
  var _b, _c, _d, _e;
package/ui/Elements/Select/components/CountMultiValue.js CHANGED
@@ -18,7 +18,7 @@ import { components as selectComponents } from 'react-select';
18
18
  import styled, { th } from '@xstyled/styled-components';
19
19
  // MultiValue container with count of selected options
20
20
  var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"], ["\n background-color: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"])), th.color('lightGray7'));
21
- var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n white-space: nowrap;\n position: absolute;\n color: textPrimary;\n padding-left: ", ";\n"], ["\n white-space: nowrap;\n position: absolute;\n color: textPrimary;\n padding-left: ", ";\n"])), function (_a) {
21
+ var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n white-space: nowrap;\n position: absolute;\n color: gray;\n padding-left: ", ";\n"], ["\n white-space: nowrap;\n position: absolute;\n color: gray;\n padding-left: ", ";\n"])), function (_a) {
22
22
  var isFocused = _a.isFocused;
23
23
  return (isFocused ? '8px' : '0');
24
24
  });
package/ui/Elements/Select/components/IconValueContainer.js CHANGED
@@ -40,7 +40,7 @@ var IconValueContainer = function (props) {
40
40
  var icon = (_a = rest.selectProps) === null || _a === void 0 ? void 0 : _a.icon;
41
41
  var hasValue = rest.hasValue;
42
42
  var onIconClick = (_b = rest.selectProps) === null || _b === void 0 ? void 0 : _b.onIconClick;
43
- return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, onMouseDown: onIconClick, children: _jsx(Icon, { icon: icon, fill: "textPrimary" }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
43
+ return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, onMouseDown: onIconClick, children: _jsx(Icon, { icon: icon, fill: "gray" }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
44
44
  };
45
45
  export default IconValueContainer;
46
46
  var templateObject_1;
package/ui/ThemeProvider/themes/dark.d.ts CHANGED
@@ -67,6 +67,8 @@ declare const darkTheme: {
67
67
  yellow20: string;
68
68
  yellow60: string;
69
69
  yellow70: string;
70
+ yellow80: string;
71
+ yellow90: string;
70
72
  yellow1: string;
71
73
  yellow2: string;
72
74
  red10: string;
package/ui/ThemeProvider/themes/default.d.ts CHANGED
@@ -65,6 +65,8 @@ declare const defaultTheme: {
65
65
  yellow20: string;
66
66
  yellow60: string;
67
67
  yellow70: string;
68
+ yellow80: string;
69
+ yellow90: string;
68
70
  yellow1: string;
69
71
  yellow2: string;
70
72
  red10: string;
package/ui/ThemeProvider/themes/default.js CHANGED
@@ -65,6 +65,8 @@ var defaultTheme = {
65
65
  yellow20: '#FFF9C4',
66
66
  yellow60: '#FFE600',
67
67
  yellow70: '#FFD702',
68
+ yellow80: '#D9B600',
69
+ yellow90: '#857000',
68
70
  yellow1: '#FFD702',
69
71
  yellow2: '#F2E871',
70
72
  red10: '#FFF6F4',
package/ui/ThemeProvider/themes/index.d.ts CHANGED
@@ -66,6 +66,8 @@ declare const themes: {
66
66
  yellow20: string;
67
67
  yellow60: string;
68
68
  yellow70: string;
69
+ yellow80: string;
70
+ yellow90: string;
69
71
  yellow1: string;
70
72
  yellow2: string;
71
73
  red10: string;
@@ -425,6 +427,8 @@ declare const themes: {
425
427
  yellow20: string;
426
428
  yellow60: string;
427
429
  yellow70: string;
430
+ yellow80: string;
431
+ yellow90: string;
428
432
  yellow1: string;
429
433
  yellow2: string;
430
434
  red10: string;