@ntbjs/react-components 1.3.0-rc.24 → 1.3.0-rc.25
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-036bf8bc.js → AssetGallery-a049cc20.js} +2 -2
- package/{AssetPreviewTopBar-912c3469.js → AssetPreviewTopBar-2197a160.js} +16 -8
- package/{CompactTextInput-cfc495fc.js → CompactTextInput-77fa43d7.js} +21 -21
- package/{Instructions-9a0fd247.js → Instructions-eb7065cc.js} +1 -1
- package/{TextArea-a869b1a9.js → TextArea-cc9bce9a.js} +56 -72
- 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, _templateObject32, _templateObject33, _templateObject34
|
|
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) {
|
|
@@ -112,7 +112,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
112
112
|
}, function (props) {
|
|
113
113
|
return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
114
114
|
});
|
|
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\n ", "\n\n ", "\n\n ", "\n\n ", "\n
|
|
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
116
|
return props.readOnly && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
|
|
117
117
|
}, function (props) {
|
|
118
118
|
return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
@@ -124,24 +124,22 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
124
124
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
125
125
|
}, function (props) {
|
|
126
126
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
127
|
-
}, function (props) {
|
|
128
|
-
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);
|
|
129
|
-
}, function (props) {
|
|
130
|
-
return !props.readOnly && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
|
|
131
127
|
}, function (props) {
|
|
132
128
|
return props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8');
|
|
133
129
|
}, function (props) {
|
|
134
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);
|
|
135
133
|
}, function (props) {
|
|
136
134
|
return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
|
|
137
135
|
}, function (props) {
|
|
138
136
|
return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
|
|
139
137
|
}, function (props) {
|
|
140
|
-
return props.hasLink && styled.css(
|
|
138
|
+
return props.hasLink && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n cursor: default;\n ", "\n }\n "])), linkColor);
|
|
141
139
|
}, function (props) {
|
|
142
140
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
143
141
|
}, function (props) {
|
|
144
|
-
return props.readOnly && styled.css(
|
|
142
|
+
return props.readOnly && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
|
|
145
143
|
}, function (props) {
|
|
146
144
|
return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
147
145
|
}, function (props) {
|
|
@@ -149,35 +147,35 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
149
147
|
}, function (props) {
|
|
150
148
|
return props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0');
|
|
151
149
|
}, function (props) {
|
|
152
|
-
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 "])));
|
|
153
151
|
}, InputIconContainer, function (props) {
|
|
154
|
-
return props.disabled && styled.css(
|
|
152
|
+
return props.disabled && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
155
153
|
}, function (props) {
|
|
156
|
-
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 "])));
|
|
157
155
|
}, function (props) {
|
|
158
156
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
159
157
|
}, function (props) {
|
|
160
|
-
return props.readOnly && styled.css(
|
|
158
|
+
return props.readOnly && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
|
|
161
159
|
}, function (props) {
|
|
162
160
|
return props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
163
161
|
}, function (props) {
|
|
164
|
-
return !props.readOnly && styled.css(
|
|
162
|
+
return !props.readOnly && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
165
163
|
return props.theme.getColor('gray-600');
|
|
166
164
|
});
|
|
167
165
|
}, function (props) {
|
|
168
|
-
return props.type === 'warning' && styled.css(
|
|
166
|
+
return props.type === 'warning' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
169
167
|
return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
|
|
170
168
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
171
169
|
}, function (props) {
|
|
172
|
-
return props.type === 'error' && styled.css(
|
|
170
|
+
return props.type === 'error' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
173
171
|
return props.theme.themeProp('border-color', '#D83018', '#D83018');
|
|
174
172
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
175
173
|
}, function (props) {
|
|
176
|
-
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 "])));
|
|
177
175
|
});
|
|
178
|
-
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
179
|
-
var StyledLink = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(
|
|
180
|
-
var ReadOnlyLinkContainer = styled__default['default'].div.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);
|
|
181
179
|
|
|
182
180
|
var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref, forwardedRef) {
|
|
183
181
|
var label = _ref.label,
|
|
@@ -287,7 +285,8 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
287
285
|
placement: "bottom-end",
|
|
288
286
|
trigger: 'mouseenter',
|
|
289
287
|
zIndex: 999999
|
|
290
|
-
}, 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,
|
|
291
290
|
content: React__default['default'].createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default['default'].createElement(StyledLink, {
|
|
292
291
|
href: link,
|
|
293
292
|
target: linkTarget,
|
|
@@ -305,6 +304,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
305
304
|
}, React__default['default'].createElement(SvgLink, null), currentValue)),
|
|
306
305
|
key: "tooltip2",
|
|
307
306
|
placement: "bottom-start",
|
|
307
|
+
trigger: "focusin",
|
|
308
308
|
zIndex: 999999,
|
|
309
309
|
interactive: true
|
|
310
310
|
}, input())), link && readOnly && React__default['default'].createElement(ReadOnlyLinkContainer, null, React__default['default'].createElement(StyledLink, {
|
|
@@ -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
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
|
|