@mailstep/design-system 0.8.16-beta.21 → 0.8.16-beta.23
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.
- package/package.json +1 -1
- package/ui/Elements/Icon/icons/Add.js +1 -1
- package/ui/Elements/Select/components/CountMultiValue.js +1 -1
- package/ui/Elements/Select/components/IconValueContainer.js +1 -1
- package/ui/Elements/Select/stories/Select.stories.js +3 -2
- package/ui/ThemeProvider/themes/dark.d.ts +1 -0
- package/ui/ThemeProvider/themes/default.d.ts +1 -0
- package/ui/ThemeProvider/themes/default.js +1 -1
- package/ui/ThemeProvider/themes/index.d.ts +2 -0
- package/ui/index.es.js +6444 -6438
- package/ui/index.umd.js +359 -359
package/package.json
CHANGED
|
@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
export var Add = function (props) { return (_jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "
|
|
13
|
+
export var Add = function (props) { return (_jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor" }, props, { children: [_jsxs("g", { clipPath: "url(#clip0_1232_3409)", children: [_jsx("path", { d: "M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", fill: "currentColor", stroke: "none", d: "M5.81115 7.89697C5.39693 7.89697 5.06115 8.23276 5.06115 8.64697C5.06115 9.06119 5.39693 9.39697 5.81115 9.39697L8.23954 9.39697L8.23954 11.8254C8.23954 12.2396 8.57533 12.5754 8.98954 12.5754C9.40376 12.5754 9.73954 12.2396 9.73954 11.8254V9.39697H12.1679C12.5822 9.39697 12.9179 9.06119 12.9179 8.64697C12.9179 8.23276 12.5822 7.89697 12.1679 7.89697L9.73954 7.89697L9.73954 5.46858C9.73954 5.05436 9.40376 4.71858 8.98954 4.71858C8.57533 4.71858 8.23954 5.05436 8.23954 5.46858L8.23954 7.89697L5.81115 7.89697Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1232_3409", children: _jsx("rect", { width: "18", height: "18" }) }) })] }))); };
|
|
@@ -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:
|
|
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) {
|
|
22
22
|
var isFocused = _a.isFocused;
|
|
23
23
|
return (isFocused ? '8px' : '0');
|
|
24
24
|
});
|
|
@@ -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 }) })), _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: "textPrimary" }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
|
|
44
44
|
};
|
|
45
45
|
export default IconValueContainer;
|
|
46
46
|
var templateObject_1;
|
|
@@ -11,5 +11,6 @@ var options = [
|
|
|
11
11
|
{ value: '2', label: 'Option 2' },
|
|
12
12
|
{ value: '3', label: 'Option 3' }
|
|
13
13
|
];
|
|
14
|
-
|
|
15
|
-
export var
|
|
14
|
+
var mutliValue = ['1', '2'];
|
|
15
|
+
export var Default = function () { return _jsx(Select, { label: "Primary Select", onChange: console.log, options: options, value: "1" }); };
|
|
16
|
+
export var MultiSelect = function () { return (_jsx(Select, { label: "Multi Select Input", onChange: console.log, options: options, isMulti: true, value: mutliValue })); };
|
|
@@ -94,6 +94,7 @@ declare const themes: {
|
|
|
94
94
|
magenta70: string;
|
|
95
95
|
magenta80: string;
|
|
96
96
|
magenta90: string;
|
|
97
|
+
sideMenuSelectedText: string;
|
|
97
98
|
};
|
|
98
99
|
fonts: {
|
|
99
100
|
primary: string;
|
|
@@ -449,6 +450,7 @@ declare const themes: {
|
|
|
449
450
|
magenta70: string;
|
|
450
451
|
magenta80: string;
|
|
451
452
|
magenta90: string;
|
|
453
|
+
sideMenuSelectedText: string;
|
|
452
454
|
};
|
|
453
455
|
shadows: {
|
|
454
456
|
dialogShadow: string;
|