@mailstep/design-system 0.8.16-beta.5 → 0.8.16-beta.7

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 (9) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/CommonGrid/components/Filters/TextRange/TextRange.js +1 -1
  3. package/ui/Blocks/Modal/styles.js +1 -1
  4. package/ui/Elements/Select/components/CountMultiValue.js +1 -1
  5. package/ui/Elements/Select/themes/selectStyles.js +1 -1
  6. package/ui/Forms/Checkbox/styles.js +1 -1
  7. package/ui/Forms/Input/styles.js +1 -1
  8. package/ui/index.es.js +13133 -13764
  9. package/ui/index.umd.js +441 -440
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.8.16-beta.5",
3
+ "version": "0.8.16-beta.7",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/CommonGrid/components/Filters/TextRange/TextRange.js CHANGED
@@ -91,6 +91,6 @@ var TextRange = function (props) {
91
91
  var onChangeComparator = useEvent(function (option) {
92
92
  onChange({ comparator: option.value, value: fieldValue, isInvalid: isInvalid });
93
93
  });
94
- return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
94
+ return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: "tooltip", autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
95
95
  };
96
96
  export default TextRange;
package/ui/Blocks/Modal/styles.js CHANGED
@@ -38,7 +38,7 @@ export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 =
38
38
  });
39
39
  export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"], ["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"])), function (_a) {
40
40
  var $backgroundColor = _a.$backgroundColor;
41
- return $backgroundColor || '#fefefe';
41
+ return $backgroundColor || th.color('white');
42
42
  }, function (_a) {
43
43
  var $minWidth = _a.$minWidth;
44
44
  return $minWidth || '10%';
package/ui/Elements/Select/components/CountMultiValue.js CHANGED
@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
17
17
  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
- var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\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: ", ";\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'));
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
21
  var CountMultiValue = function (props) {
22
22
  var _a, _b;
23
23
  var shortValues = props.selectProps.shortValues;
package/ui/Elements/Select/themes/selectStyles.js CHANGED
@@ -37,7 +37,7 @@ export var CustomStyles = {
37
37
  },
38
38
  multiValue: function (styles, state) {
39
39
  var theme = state.theme;
40
- return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: '#E7EBEF', borderRadius: '4px', '& svg': {
40
+ return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: theme.colors.lightGray7, borderRadius: '4px', '& svg': {
41
41
  color: theme.colors.inputTextColor,
42
42
  }, ' > div': {
43
43
  fontSize: '12px',
package/ui/Forms/Checkbox/styles.js CHANGED
@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import styled, { th } from '@xstyled/styled-components';
6
6
  import { Icon } from '../../Elements/Icon';
7
- export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: white;\n border-color: lightGray5;\n }\n"], ["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: white;\n border-color: lightGray5;\n }\n"])), function (_a) {
7
+ export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: transparent;\n border-color: lightGray5;\n }\n"], ["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: transparent;\n border-color: lightGray5;\n }\n"])), function (_a) {
8
8
  var size = _a.size;
9
9
  return size;
10
10
  }, function (_a) {
package/ui/Forms/Input/styles.js CHANGED
@@ -29,7 +29,7 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
29
29
  export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
30
30
  export var StyledInput = styled.input.attrs(function (props) { return ({
31
31
  as: props.$asTextArea ? 'textarea' : 'input'
32
- }); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
32
+ }); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n background-color: transparent;\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n background-color: transparent;\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
33
33
  var $isInvalid = _a.$isInvalid;
34
34
  return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
35
35
  }, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {