@ntbjs/react-components 1.1.12 → 1.1.14
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/.eslintrc +7 -8
- package/{AssetGallery-6f665c7a.js → AssetGallery-a049cc20.js} +2 -2
- package/{AssetPreviewTopBar-912c3469.js → AssetPreviewTopBar-2197a160.js} +16 -8
- package/{CompactTextInput-c0d45782.js → CompactTextInput-77fa43d7.js} +38 -36
- package/{Instructions-2babb8a3.js → Instructions-eb7065cc.js} +1 -1
- package/{TextArea-18fbcc9f.js → TextArea-cc9bce9a.js} +57 -73
- package/inputs/CompactTextInput/index.js +1 -1
- package/inputs/TextArea/index.js +1 -1
- package/inputs/index.js +2 -2
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +3 -3
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +1 -1
- package/widgets/Instructions/index.js +2 -2
- package/widgets/index.js +5 -5
package/.eslintrc
CHANGED
|
@@ -8,13 +8,12 @@
|
|
|
8
8
|
"parserOptions": {
|
|
9
9
|
"sourceType": "module"
|
|
10
10
|
},
|
|
11
|
-
"ignorePatterns": [
|
|
12
|
-
"build",
|
|
13
|
-
"storybook-static"
|
|
14
|
-
],
|
|
11
|
+
"ignorePatterns": ["build", "storybook-static"],
|
|
15
12
|
"parser": "@babel/eslint-parser",
|
|
16
|
-
"extends": [
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
|
|
13
|
+
"extends": ["eslint:recommended", "plugin:react/recommended"],
|
|
14
|
+
"settings": {
|
|
15
|
+
"react": {
|
|
16
|
+
"version": "detect"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
20
19
|
}
|
|
@@ -21,10 +21,10 @@ require('./Button-49f82b31.js');
|
|
|
21
21
|
require('./Checkbox-68dc38a8.js');
|
|
22
22
|
require('./CompactAutocompleteSelect-96137f48.js');
|
|
23
23
|
require('./CompactStarRating-15c1b812.js');
|
|
24
|
-
require('./CompactTextInput-
|
|
24
|
+
require('./CompactTextInput-77fa43d7.js');
|
|
25
25
|
require('./MultiSelect-efd60232.js');
|
|
26
26
|
require('./Radio-32d0513a.js');
|
|
27
|
-
require('./TextArea-
|
|
27
|
+
require('./TextArea-cc9bce9a.js');
|
|
28
28
|
require('./TextInput-0d109708.js');
|
|
29
29
|
require('./Switch-4a41585f.js');
|
|
30
30
|
var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
|
|
@@ -45,8 +45,8 @@ function SvgArrowBack(props) {
|
|
|
45
45
|
}, props), _ref);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
49
|
-
var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: ", ";\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n"])), function (props) {
|
|
48
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
49
|
+
var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: ", ";\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
|
|
50
50
|
return props.border ? "1px solid" : "none";
|
|
51
51
|
}, function (props) {
|
|
52
52
|
return props.theme.primaryFontFamily;
|
|
@@ -54,14 +54,18 @@ var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.app
|
|
|
54
54
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
|
|
55
55
|
}, function (props) {
|
|
56
56
|
return props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9');
|
|
57
|
+
}, function (props) {
|
|
58
|
+
return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
57
59
|
});
|
|
58
|
-
var BackButtonContainer = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(
|
|
60
|
+
var BackButtonContainer = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n font-size: 1.125rem;\n ", ";\n\n ", "\n\n &:hover {\n cursor: pointer;\n }\n\n > svg {\n height: 24px;\n margin-right: 16px;\n width: 24px;\n }\n"])), function (props) {
|
|
59
61
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
62
|
+
}, function (props) {
|
|
63
|
+
return props.disabled && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n pointer-events: none;\n "])));
|
|
60
64
|
});
|
|
61
|
-
var LeftText = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(
|
|
65
|
+
var LeftText = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1.125rem;\n margin-left: 16px;\n\n ", ";\n"])), function (props) {
|
|
62
66
|
return props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
63
67
|
});
|
|
64
|
-
var ButtonsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
68
|
+
var ButtonsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n margin-left: auto;\n\n > span {\n margin-left: 16px;\n }\n"])));
|
|
65
69
|
|
|
66
70
|
var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPreviewTopBar(_ref, forwardedRef) {
|
|
67
71
|
var onBackButtonClick = _ref.onBackButtonClick,
|
|
@@ -71,14 +75,17 @@ var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPrev
|
|
|
71
75
|
buttons = _ref.buttons,
|
|
72
76
|
shadow = _ref.shadow,
|
|
73
77
|
border = _ref.border,
|
|
74
|
-
|
|
78
|
+
disabled = _ref.disabled,
|
|
79
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow", "border", "disabled"]);
|
|
75
80
|
|
|
76
81
|
return React__default['default'].createElement(AssetPreviewTopBar$1, defaultTheme._extends({
|
|
77
82
|
ref: forwardedRef,
|
|
78
83
|
shadow: shadow,
|
|
79
|
-
border: border
|
|
84
|
+
border: border,
|
|
85
|
+
disabled: disabled
|
|
80
86
|
}, props), React__default['default'].createElement(BackButtonContainer, {
|
|
81
|
-
onClick: onBackButtonClick
|
|
87
|
+
onClick: onBackButtonClick,
|
|
88
|
+
disabled: disabled
|
|
82
89
|
}, backButtonAsClose ? React__default['default'].createElement(close.SvgClose, null) : React__default['default'].createElement(SvgArrowBack, null), backButtonText), leftText && React__default['default'].createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default['default'].createElement(ButtonsContainer, null, buttons.map(function (button, index) {
|
|
83
90
|
return React__default['default'].createElement("span", {
|
|
84
91
|
key: 'topBarButton-' + index
|
|
@@ -88,6 +95,7 @@ var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPrev
|
|
|
88
95
|
AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
89
96
|
onBackButtonClick: defaultTheme.PropTypes.func.isRequired,
|
|
90
97
|
backButtonText: defaultTheme.PropTypes.string.isRequired,
|
|
98
|
+
disabled: defaultTheme.PropTypes.bool,
|
|
91
99
|
backButtonAsClose: defaultTheme.PropTypes.bool,
|
|
92
100
|
leftText: defaultTheme.PropTypes.string,
|
|
93
101
|
shadow: defaultTheme.PropTypes.bool,
|
|
@@ -7,7 +7,7 @@ var React = require('react');
|
|
|
7
7
|
var editNote = require('./edit-note-c47d292e.js');
|
|
8
8
|
require('./Alert-13b75102.js');
|
|
9
9
|
require('./Badge-757b0a39.js');
|
|
10
|
-
require('./Popover-569cd272.js');
|
|
10
|
+
var Popover = require('./Popover-569cd272.js');
|
|
11
11
|
require('./Tab-f499ecbc.js');
|
|
12
12
|
require('./Tabs-116aa951.js');
|
|
13
13
|
var Tooltip = require('./Tooltip-66daf6e3.js');
|
|
@@ -54,7 +54,7 @@ function SvgLink(props) {
|
|
|
54
54
|
}, props), _ref);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
|
|
57
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
|
|
58
58
|
var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
59
59
|
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
60
60
|
}, function (props) {
|
|
@@ -70,36 +70,39 @@ var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defa
|
|
|
70
70
|
var linkColor = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
71
71
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
72
72
|
});
|
|
73
|
-
var commonAnchorTagStyle = styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n
|
|
74
|
-
var
|
|
73
|
+
var commonAnchorTagStyle = styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n a,\n && {\n font-size: 0.875rem;\n text-decoration: underline;\n }\n"])));
|
|
74
|
+
var readOnlyBackground = styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
75
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
76
|
+
});
|
|
77
|
+
var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
|
|
75
78
|
return props.theme.primaryFontFamily;
|
|
76
79
|
});
|
|
77
|
-
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
80
|
+
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n justify-content: space-between;\n height: 19px;\n display: flex;\n align-items: center;\n ", "\n"])), function (props) {
|
|
78
81
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
79
82
|
}, function (props) {
|
|
80
|
-
return props.disabled && styled.css(
|
|
83
|
+
return props.disabled && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
81
84
|
});
|
|
82
|
-
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
85
|
+
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
|
|
83
86
|
return props.$hasLabel ? '66.66%' : '100%';
|
|
84
87
|
});
|
|
85
|
-
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
88
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
86
89
|
return props.fadeIn ? 0 : 1;
|
|
87
90
|
}, function (props) {
|
|
88
91
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
89
92
|
}, function (props) {
|
|
90
93
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
91
94
|
});
|
|
92
|
-
var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
95
|
+
var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n justify-content: flex-end;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: relative;\n margin-top: -20px;\n margin-right: 8px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
93
96
|
return props.fadeIn ? 0 : 1;
|
|
94
97
|
}, function (props) {
|
|
95
98
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
96
99
|
}, function (props) {
|
|
97
100
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
98
101
|
});
|
|
99
|
-
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
100
|
-
return props.theme.themeProp('background', styled.css(
|
|
102
|
+
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding: 5px 10px 0 0;\n ", ";\n\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ", ";\n\n ", "\n\n ", "\n\n > svg {\n width: 12px;\n }\n"])), function (props) {
|
|
103
|
+
return props.theme.themeProp('background', styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
101
104
|
return props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700');
|
|
102
|
-
}), styled.css(
|
|
105
|
+
}), styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
103
106
|
return props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100');
|
|
104
107
|
}));
|
|
105
108
|
}, function (props) {
|
|
@@ -109,26 +112,24 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
109
112
|
}, function (props) {
|
|
110
113
|
return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
111
114
|
});
|
|
112
|
-
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(
|
|
113
|
-
return props.readOnly && styled.css(
|
|
115
|
+
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n padding: 1px 10px;\n border-radius: 3px;\n border: 1px solid transparent;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n\n &&:not(:hover):not(:focus) {\n \n ", ";\n ", ";\n \n ", "\n }\n\n &&:hover:not(:focus) {\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n\n ", "\n ", "\n\n }\n\n &&:focus {\n ", ";\n\n ", ";\n \n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
|
|
116
|
+
return props.readOnly && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
|
|
114
117
|
}, function (props) {
|
|
115
|
-
return props.disabled && styled.css(
|
|
118
|
+
return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
116
119
|
}, function (props) {
|
|
117
|
-
return props.type === 'success' && styled.css(
|
|
120
|
+
return props.type === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
118
121
|
return props.type === 'success' ? fadeIn : fadeOut;
|
|
119
122
|
});
|
|
120
123
|
}, function (props) {
|
|
121
124
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
122
125
|
}, function (props) {
|
|
123
126
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
124
|
-
}, function (props) {
|
|
125
|
-
return props.hasLink && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n &&:read-only {\n cursor: default;\n }\n "])), linkColor);
|
|
126
|
-
}, function (props) {
|
|
127
|
-
return !props.readOnly && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
|
|
128
127
|
}, function (props) {
|
|
129
128
|
return props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8');
|
|
130
129
|
}, function (props) {
|
|
131
130
|
return props.type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
|
|
131
|
+
}, function (props) {
|
|
132
|
+
return props.hasLink && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n &&:read-only {\n cursor: default;\n }\n "])), linkColor);
|
|
132
133
|
}, function (props) {
|
|
133
134
|
return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
|
|
134
135
|
}, function (props) {
|
|
@@ -138,7 +139,7 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
138
139
|
}, function (props) {
|
|
139
140
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
140
141
|
}, function (props) {
|
|
141
|
-
return props.readOnly &&
|
|
142
|
+
return props.readOnly && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
|
|
142
143
|
}, function (props) {
|
|
143
144
|
return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
144
145
|
}, function (props) {
|
|
@@ -146,34 +147,35 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
146
147
|
}, function (props) {
|
|
147
148
|
return props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0');
|
|
148
149
|
}, function (props) {
|
|
149
|
-
return props.hasLink && styled.css(
|
|
150
|
+
return props.hasLink && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n "])));
|
|
150
151
|
}, InputIconContainer, function (props) {
|
|
151
|
-
return props.disabled && styled.css(
|
|
152
|
+
return props.disabled && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
152
153
|
}, function (props) {
|
|
153
|
-
return props.disabled && props.hasLink && styled.css(
|
|
154
|
+
return props.disabled && props.hasLink && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed !important;\n "])));
|
|
154
155
|
}, function (props) {
|
|
155
156
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
156
157
|
}, function (props) {
|
|
157
|
-
return props.readOnly &&
|
|
158
|
+
return props.readOnly && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
|
|
158
159
|
}, function (props) {
|
|
159
160
|
return props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
160
161
|
}, function (props) {
|
|
161
|
-
return !props.readOnly && styled.css(
|
|
162
|
+
return !props.readOnly && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
162
163
|
return props.theme.getColor('gray-600');
|
|
163
164
|
});
|
|
164
165
|
}, function (props) {
|
|
165
|
-
return props.type === 'warning' && styled.css(
|
|
166
|
+
return props.type === 'warning' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
166
167
|
return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
|
|
167
168
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
168
169
|
}, function (props) {
|
|
169
|
-
return props.type === 'error' && styled.css(
|
|
170
|
+
return props.type === 'error' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
170
171
|
return props.theme.themeProp('border-color', '#D83018', '#D83018');
|
|
171
172
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
172
173
|
}, function (props) {
|
|
173
|
-
return props.bold && styled.css(
|
|
174
|
+
return props.bold && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
|
|
174
175
|
});
|
|
175
|
-
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
176
|
-
var StyledLink = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(
|
|
176
|
+
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n padding: 5px 8px;\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), commonAnchorTagStyle);
|
|
177
|
+
var StyledLink = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), commonAnchorTagStyle, linkColor);
|
|
178
|
+
var ReadOnlyLinkContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0 10px 1px;\n"])), readOnlyBackground);
|
|
177
179
|
|
|
178
180
|
var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref, forwardedRef) {
|
|
179
181
|
var label = _ref.label,
|
|
@@ -283,7 +285,8 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
283
285
|
placement: "bottom-end",
|
|
284
286
|
trigger: 'mouseenter',
|
|
285
287
|
zIndex: 999999
|
|
286
|
-
}, input())), link && !readOnly && React__default['default'].createElement("div", null, React__default['default'].createElement(
|
|
288
|
+
}, input())), link && !readOnly && React__default['default'].createElement("div", null, React__default['default'].createElement(Popover.Popover, {
|
|
289
|
+
arrow: false,
|
|
287
290
|
content: React__default['default'].createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default['default'].createElement(StyledLink, {
|
|
288
291
|
href: link,
|
|
289
292
|
target: linkTarget,
|
|
@@ -301,18 +304,17 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
301
304
|
}, React__default['default'].createElement(SvgLink, null), currentValue)),
|
|
302
305
|
key: "tooltip2",
|
|
303
306
|
placement: "bottom-start",
|
|
307
|
+
trigger: "focusin",
|
|
304
308
|
zIndex: 999999,
|
|
305
309
|
interactive: true
|
|
306
|
-
}, input())), link && readOnly && React__default['default'].createElement(StyledLink, {
|
|
310
|
+
}, input())), link && readOnly && React__default['default'].createElement(ReadOnlyLinkContainer, null, React__default['default'].createElement(StyledLink, {
|
|
307
311
|
href: link,
|
|
308
312
|
rel: "noreferrer",
|
|
309
313
|
style: {
|
|
310
|
-
marginLeft: 3,
|
|
311
|
-
marginTop: -2,
|
|
312
314
|
display: 'inline-block'
|
|
313
315
|
},
|
|
314
316
|
target: linkTarget
|
|
315
|
-
}, currentValue), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
|
|
317
|
+
}, currentValue)), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
|
|
316
318
|
type: type
|
|
317
319
|
}, React__default['default'].createElement(editNote.SvgEditNote, null)), lodash.isEmpty(label) && React__default['default'].createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
|
|
318
320
|
});
|
|
@@ -5,7 +5,7 @@ var lodash = require('lodash');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
7
7
|
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-96137f48.js');
|
|
8
|
-
var TextArea = require('./TextArea-
|
|
8
|
+
var TextArea = require('./TextArea-cc9bce9a.js');
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
|
|
11
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -20,7 +20,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
20
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
21
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
22
22
|
|
|
23
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46
|
|
23
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
|
|
24
24
|
var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
25
25
|
var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
26
26
|
var activeLabel = styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
|
|
@@ -29,95 +29,93 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
|
|
|
29
29
|
}, function (props) {
|
|
30
30
|
return props.theme.themeProp('opacity', 0.6, 0.5);
|
|
31
31
|
});
|
|
32
|
-
var
|
|
33
|
-
|
|
32
|
+
var warningPlaceholder = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
33
|
+
return props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'), 1);
|
|
34
|
+
});
|
|
35
|
+
var errorPlaceholder = styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
36
|
+
return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'), 1);
|
|
37
|
+
});
|
|
38
|
+
var warningPlaceholderHover = styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
39
|
+
return props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'), 1);
|
|
40
|
+
});
|
|
41
|
+
var errorPlaceholderHover = styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
42
|
+
return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'), 1);
|
|
43
|
+
});
|
|
44
|
+
var TextAreaContainter = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
45
|
+
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n height: 19px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 13px;\n ", "\n"])), function (props) {
|
|
34
46
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
35
47
|
}, function (props) {
|
|
36
|
-
return props.disabled && styled.css(
|
|
48
|
+
return props.disabled && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
37
49
|
});
|
|
38
|
-
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
50
|
+
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ", "\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n\n ", "\n }\n"])), function (props) {
|
|
39
51
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
|
|
40
52
|
}, function (props) {
|
|
41
|
-
return props.disabled && styled.css(
|
|
53
|
+
return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
|
|
42
54
|
});
|
|
43
|
-
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(
|
|
44
|
-
return props.borderRadius && styled.css(
|
|
55
|
+
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n transition: height 550ms ease-in-out; border-color 350ms;\n\n\n ", "\n\n\n\n ", "\n\n ", "\n\n ", "\n\n \n ", "\n\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n \n\n ", " \n\n \n \n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n ", "\n ", "\n\n }\n\n &:hover::placeholder {\n ", " \n ", " \n }\n\n &:focus::placeholder {\n ", " \n ", " \n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n\n ", "\n \n }\n"])), function (props) {
|
|
56
|
+
return props.borderRadius && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
|
|
45
57
|
}, function (props) {
|
|
46
58
|
return props.theme.themeProp('color', 'white', 'black');
|
|
47
59
|
}, function (props) {
|
|
48
|
-
return props.readOnly && styled.css(
|
|
49
|
-
}, function (props) {
|
|
50
|
-
return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
60
|
+
return props.readOnly && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n padding: 12px 10px; ;\n "])));
|
|
51
61
|
}, function (props) {
|
|
52
|
-
return props.
|
|
62
|
+
return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
53
63
|
}, function (props) {
|
|
54
64
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
55
|
-
}, function (props) {
|
|
56
|
-
return (props.state === 'warning' || props.state === 'error') && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
|
|
57
65
|
}, function (props) {
|
|
58
66
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
59
67
|
}, function (props) {
|
|
60
68
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
61
69
|
}, function (props) {
|
|
62
|
-
return props.noBorder && styled.css(
|
|
70
|
+
return props.noBorder && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
63
71
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
64
72
|
});
|
|
65
73
|
}, function (props) {
|
|
66
|
-
return props.type === 'warning' && styled.css(
|
|
74
|
+
return props.type === 'warning' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8'));
|
|
67
75
|
}, function (props) {
|
|
68
|
-
return props.type === 'error' && styled.css(
|
|
76
|
+
return props.type === 'error' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
|
|
69
77
|
}, function (props) {
|
|
70
|
-
return props.noBorder && props.type === 'warning' && styled.css(
|
|
71
|
-
return props.theme.themeProp('border-color', '#
|
|
78
|
+
return props.noBorder && props.type === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
79
|
+
return props.theme.themeProp('border-color', '#634E01', '#FFFDE8');
|
|
72
80
|
});
|
|
73
81
|
}, function (props) {
|
|
74
|
-
return props.noBorder && props.type === 'error' && styled.css(
|
|
82
|
+
return props.noBorder && props.type === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
75
83
|
return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
|
|
76
84
|
});
|
|
77
85
|
}, function (props) {
|
|
78
|
-
return props.type === 'warning-border' && styled.css(
|
|
79
|
-
}, function (props) {
|
|
80
|
-
return props.type === 'error-border' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
81
|
-
}, function (props) {
|
|
82
|
-
return props.lightBackground && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
|
|
83
|
-
}, function (props) {
|
|
84
|
-
return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
86
|
+
return props.type === 'warning-border' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
|
|
85
87
|
}, function (props) {
|
|
86
|
-
return props.
|
|
88
|
+
return props.type === 'error-border' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
87
89
|
}, function (props) {
|
|
88
|
-
return props.padding === 'small' && styled.css(
|
|
90
|
+
return props.padding === 'small' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
|
|
89
91
|
}, function (props) {
|
|
90
|
-
return props.padding === 'medium' && styled.css(
|
|
92
|
+
return props.padding === 'medium' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
|
|
91
93
|
}, function (props) {
|
|
92
|
-
return props.padding === 'large' && styled.css(
|
|
94
|
+
return props.padding === 'large' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
|
|
93
95
|
}, function (props) {
|
|
94
|
-
return props.hasIcon && styled.css(
|
|
96
|
+
return props.hasIcon && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
|
|
95
97
|
}, function (props) {
|
|
96
98
|
return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
97
99
|
}, function (props) {
|
|
98
100
|
return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
99
101
|
}, function (props) {
|
|
100
|
-
return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#
|
|
102
|
+
return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
|
|
101
103
|
}, function (props) {
|
|
102
|
-
return props.type === 'error' && props.theme.themeProp('background', '#
|
|
104
|
+
return props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0');
|
|
103
105
|
}, function (props) {
|
|
104
106
|
return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
105
107
|
}, InputIconContainer, function (props) {
|
|
106
|
-
return props.type === 'success' && styled.css(
|
|
107
|
-
}, function (props) {
|
|
108
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
109
|
-
}, function (props) {
|
|
110
|
-
return props.theme.themeProp('opacity', 0.6, 0.5, 1);
|
|
111
|
-
}, function (props) {
|
|
108
|
+
return props.type === 'success' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
109
|
+
}, placeholderBaseStyle, warningPlaceholder, errorPlaceholder, warningPlaceholderHover, errorPlaceholderHover, warningPlaceholderHover, errorPlaceholderHover, function (props) {
|
|
112
110
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
|
|
113
111
|
}, function (props) {
|
|
114
|
-
return props.theme.themeProp('background',
|
|
112
|
+
return props.theme.themeProp('background', 'transparent', props.theme.getColor('white'));
|
|
115
113
|
}, function (props) {
|
|
116
|
-
return props.type === 'warning' && styled.css(
|
|
114
|
+
return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
117
115
|
return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
|
|
118
116
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
119
117
|
}, function (props) {
|
|
120
|
-
return props.type === 'error' && styled.css(
|
|
118
|
+
return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
121
119
|
return props.theme.themeProp('border-color', '#D83018', '#D83018');
|
|
122
120
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
123
121
|
}, function (props) {
|
|
@@ -125,66 +123,55 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
125
123
|
}, function (props) {
|
|
126
124
|
return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
|
|
127
125
|
}, function (props) {
|
|
128
|
-
return props.noBorder && props.edit && styled.css(
|
|
126
|
+
return props.noBorder && props.edit && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
129
127
|
return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
|
|
130
128
|
});
|
|
131
|
-
}, function (props) {
|
|
132
|
-
return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
|
|
133
129
|
});
|
|
134
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
130
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
|
|
135
131
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
136
132
|
}, placeholderBaseStyle, function (props) {
|
|
137
133
|
return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
|
|
138
134
|
}, function (props) {
|
|
139
|
-
return !props.inputIsEmpty && styled.css(
|
|
135
|
+
return !props.inputIsEmpty && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
|
|
140
136
|
}, function (props) {
|
|
141
|
-
return props.hasPlaceholder && styled.css(
|
|
137
|
+
return props.hasPlaceholder && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
|
|
142
138
|
}, function (props) {
|
|
143
|
-
return props.hasIcon && styled.css(
|
|
139
|
+
return props.hasIcon && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
|
|
144
140
|
});
|
|
145
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
146
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
141
|
+
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
|
|
142
|
+
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n svg {\n margin-top: 12px;\n width: 15px;\n }\n"])), function (props) {
|
|
147
143
|
return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
|
|
148
144
|
});
|
|
149
|
-
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
145
|
+
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n flex-basis: ", ";\n\n ", "\n\n ", "\n\n \n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n"])), function (props) {
|
|
150
146
|
return props.$fieldLabel ? '66.66%' : '100%';
|
|
151
147
|
}, function (props) {
|
|
152
|
-
return props.readOnly && styled.css(
|
|
148
|
+
return props.readOnly && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n overflow: auto;\n "])));
|
|
153
149
|
}, function (props) {
|
|
154
|
-
return props.disabled && styled.css(
|
|
150
|
+
return props.disabled && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
155
151
|
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
156
152
|
return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
157
153
|
});
|
|
158
|
-
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
154
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
|
|
159
155
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
160
156
|
}, function (props) {
|
|
161
|
-
return (props.type === 'warning-border' || props.type === 'warning') && styled.css(
|
|
157
|
+
return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
|
|
162
158
|
}, function (props) {
|
|
163
|
-
return (props.type === 'error-border' || props.type === 'error') && styled.css(
|
|
159
|
+
return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
164
160
|
});
|
|
165
|
-
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
161
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
|
|
166
162
|
return props.fadeIn ? 0 : 1;
|
|
167
163
|
}, function (props) {
|
|
168
164
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
169
165
|
}, function (props) {
|
|
170
166
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
171
167
|
});
|
|
172
|
-
var SuccessContainerLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
168
|
+
var SuccessContainerLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n margin-top: -7px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
173
169
|
return props.fadeIn ? 0 : 1;
|
|
174
170
|
}, function (props) {
|
|
175
171
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
176
172
|
}, function (props) {
|
|
177
173
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
178
174
|
});
|
|
179
|
-
styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
180
|
-
return props.expanded && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
|
|
181
|
-
}, function (props) {
|
|
182
|
-
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
183
|
-
}, function (props) {
|
|
184
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
|
|
185
|
-
}, function (props) {
|
|
186
|
-
return props.type === 'error' && styled.css(_templateObject47 || (_templateObject47 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
187
|
-
});
|
|
188
175
|
|
|
189
176
|
var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
190
177
|
var value = _ref.value,
|
|
@@ -206,7 +193,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
206
193
|
style = _ref.style,
|
|
207
194
|
_onChange = _ref.onChange,
|
|
208
195
|
onBlur = _ref.onBlur,
|
|
209
|
-
lightBackground = _ref.lightBackground,
|
|
210
196
|
noBorder = _ref.noBorder,
|
|
211
197
|
instructionsTextArea = _ref.instructionsTextArea,
|
|
212
198
|
loadingIcon = _ref.loadingIcon,
|
|
@@ -215,7 +201,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
215
201
|
descriptionToolTip = _ref.descriptionToolTip,
|
|
216
202
|
borderRadius = _ref.borderRadius,
|
|
217
203
|
fieldLabel = _ref.fieldLabel,
|
|
218
|
-
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "
|
|
204
|
+
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"]);
|
|
219
205
|
|
|
220
206
|
var textInputDomNode = React.useRef(null);
|
|
221
207
|
var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
|
|
@@ -279,7 +265,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
279
265
|
icon: icon,
|
|
280
266
|
id: "text-input-".concat(uniqueId),
|
|
281
267
|
key: uniqueId,
|
|
282
|
-
lightBackground: lightBackground,
|
|
283
268
|
padding: padding,
|
|
284
269
|
onChange: function onChange(e) {
|
|
285
270
|
if (e.target.value) {
|
|
@@ -359,7 +344,6 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
359
344
|
className: defaultTheme.PropTypes.string,
|
|
360
345
|
style: defaultTheme.PropTypes.object,
|
|
361
346
|
padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
|
|
362
|
-
lightBackground: defaultTheme.PropTypes.bool,
|
|
363
347
|
onChange: defaultTheme.PropTypes.func,
|
|
364
348
|
onBlur: defaultTheme.PropTypes.func,
|
|
365
349
|
noBorder: defaultTheme.PropTypes.bool,
|
package/inputs/TextArea/index.js
CHANGED
package/inputs/index.js
CHANGED
|
@@ -7,10 +7,10 @@ var Button = require('../Button-49f82b31.js');
|
|
|
7
7
|
var Checkbox = require('../Checkbox-68dc38a8.js');
|
|
8
8
|
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-96137f48.js');
|
|
9
9
|
var CompactStarRating = require('../CompactStarRating-15c1b812.js');
|
|
10
|
-
var CompactTextInput = require('../CompactTextInput-
|
|
10
|
+
var CompactTextInput = require('../CompactTextInput-77fa43d7.js');
|
|
11
11
|
var MultiSelect = require('../MultiSelect-efd60232.js');
|
|
12
12
|
var Radio = require('../Radio-32d0513a.js');
|
|
13
|
-
var TextArea = require('../TextArea-
|
|
13
|
+
var TextArea = require('../TextArea-cc9bce9a.js');
|
|
14
14
|
var TextInput = require('../TextInput-0d109708.js');
|
|
15
15
|
var Switch = require('../Switch-4a41585f.js');
|
|
16
16
|
var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-e6e5cb90.js');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetGallery = require('../../AssetGallery-
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-a049cc20.js');
|
|
4
4
|
require('../../defaultTheme-ea44e34a.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -38,10 +38,10 @@ require('react-select-async-paginate');
|
|
|
38
38
|
require('../../react-select-creatable.esm-2f23d6c6.js');
|
|
39
39
|
require('react-dom');
|
|
40
40
|
require('../../CompactStarRating-15c1b812.js');
|
|
41
|
-
require('../../CompactTextInput-
|
|
41
|
+
require('../../CompactTextInput-77fa43d7.js');
|
|
42
42
|
require('../../MultiSelect-efd60232.js');
|
|
43
43
|
require('../../Radio-32d0513a.js');
|
|
44
|
-
require('../../TextArea-
|
|
44
|
+
require('../../TextArea-cc9bce9a.js');
|
|
45
45
|
require('../../Switch-4a41585f.js');
|
|
46
46
|
require('../../ContextMenuItem-ba2b697e.js');
|
|
47
47
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-
|
|
3
|
+
var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-2197a160.js');
|
|
4
4
|
require('../../../defaultTheme-ea44e34a.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Instructions = require('../../Instructions-
|
|
3
|
+
var Instructions = require('../../Instructions-eb7065cc.js');
|
|
4
4
|
require('../../defaultTheme-ea44e34a.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -25,7 +25,7 @@ require('../../react-select-creatable.esm-2f23d6c6.js');
|
|
|
25
25
|
require('react-dom');
|
|
26
26
|
require('../../close-ebf2f3cf.js');
|
|
27
27
|
require('../../expand-more-94585605.js');
|
|
28
|
-
require('../../TextArea-
|
|
28
|
+
require('../../TextArea-cc9bce9a.js');
|
|
29
29
|
require('../../useMergedRefs-b6d2f8fc.js');
|
|
30
30
|
require('../../edit-note-c47d292e.js');
|
|
31
31
|
|
package/widgets/index.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var AssetGallery = require('../AssetGallery-
|
|
5
|
+
var AssetGallery = require('../AssetGallery-a049cc20.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
|
|
7
|
-
var AssetPreviewTopBar = require('../AssetPreviewTopBar-
|
|
8
|
-
var Instructions = require('../Instructions-
|
|
7
|
+
var AssetPreviewTopBar = require('../AssetPreviewTopBar-2197a160.js');
|
|
8
|
+
var Instructions = require('../Instructions-eb7065cc.js');
|
|
9
9
|
require('../defaultTheme-ea44e34a.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('lodash');
|
|
@@ -42,10 +42,10 @@ require('react-select-async-paginate');
|
|
|
42
42
|
require('../react-select-creatable.esm-2f23d6c6.js');
|
|
43
43
|
require('react-dom');
|
|
44
44
|
require('../CompactStarRating-15c1b812.js');
|
|
45
|
-
require('../CompactTextInput-
|
|
45
|
+
require('../CompactTextInput-77fa43d7.js');
|
|
46
46
|
require('../MultiSelect-efd60232.js');
|
|
47
47
|
require('../Radio-32d0513a.js');
|
|
48
|
-
require('../TextArea-
|
|
48
|
+
require('../TextArea-cc9bce9a.js');
|
|
49
49
|
require('../Switch-4a41585f.js');
|
|
50
50
|
require('../ContextMenuItem-ba2b697e.js');
|
|
51
51
|
|