@ntbjs/react-components 1.1.0-beta.94 → 1.1.0-beta.95
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/{AssetGallery-a8d38492.js → AssetGallery-62584d6b.js} +7 -7
- package/{CompactStarRating-de1bcfe9.js → CompactStarRating-a58976f6.js} +5 -4
- package/{CompactTextInput-480f59cc.js → CompactTextInput-bb2aee92.js} +16 -12
- package/{Instructions-ce729821.js → Instructions-934c0414.js} +7 -3
- package/{Switch-3ac11c97.js → Switch-1334fb9a.js} +11 -8
- package/{Tab-bd0f3345.js → Tab-9936ddea.js} +2 -2
- package/{Tabs-bf42275e.js → Tabs-93f6362c.js} +11 -9
- package/{TextArea-47ccdb63.js → TextArea-fdefcf6a.js} +51 -38
- package/{TextInput-5ff74c8e.js → TextInput-8658006a.js} +23 -21
- package/data/Tab/index.js +1 -1
- package/data/Tabs/index.js +3 -3
- package/data/index.js +2 -2
- package/inputs/CompactStarRating/index.js +1 -1
- package/inputs/CompactTextInput/index.js +3 -3
- package/inputs/Switch/index.js +1 -1
- package/inputs/TextArea/index.js +1 -1
- package/inputs/TextInput/index.js +1 -1
- package/inputs/index.js +7 -7
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +8 -8
- package/widgets/Instructions/index.js +2 -2
- package/widgets/index.js +9 -9
|
@@ -10,18 +10,18 @@ var ActionButton = require('./ActionButton-c3f5ed94.js');
|
|
|
10
10
|
require('./Button-432f87c6.js');
|
|
11
11
|
require('./Checkbox-85394137.js');
|
|
12
12
|
require('./CompactAutocompleteSelect-45b12179.js');
|
|
13
|
-
require('./CompactStarRating-
|
|
14
|
-
require('./CompactTextInput-
|
|
13
|
+
require('./CompactStarRating-a58976f6.js');
|
|
14
|
+
require('./CompactTextInput-bb2aee92.js');
|
|
15
15
|
require('./MultiSelect-01a257b8.js');
|
|
16
16
|
require('./Radio-c811ce4a.js');
|
|
17
|
-
require('./TextArea-
|
|
18
|
-
require('./TextInput-
|
|
19
|
-
require('./Switch-
|
|
17
|
+
require('./TextArea-fdefcf6a.js');
|
|
18
|
+
require('./TextInput-8658006a.js');
|
|
19
|
+
require('./Switch-1334fb9a.js');
|
|
20
20
|
require('./Alert-3e4f8be1.js');
|
|
21
21
|
require('./Badge-9bcebe96.js');
|
|
22
22
|
require('./Popover-d3a4b72e.js');
|
|
23
|
-
require('./Tab-
|
|
24
|
-
require('./Tabs-
|
|
23
|
+
require('./Tab-9936ddea.js');
|
|
24
|
+
require('./Tabs-93f6362c.js');
|
|
25
25
|
var Tooltip = require('./Tooltip-1b7b0052.js');
|
|
26
26
|
var styled = require('styled-components');
|
|
27
27
|
var polished = require('polished');
|
|
@@ -73,14 +73,14 @@ var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTh
|
|
|
73
73
|
});
|
|
74
74
|
var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
75
75
|
var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
76
|
-
var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n height: 24px;\n width: 100%;\n display: flex;\n align-items: center;\n input[type='number'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n\n ", "\n\n ", "\n"])), function (props) {
|
|
76
|
+
var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n height: 24px;\n width: 100%;\n display: flex;\n\n align-items: center;\n input[type='number'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n\n ", "\n\n ", "\n"])), function (props) {
|
|
77
77
|
return props.theme.primaryFontFamily;
|
|
78
78
|
}, function (props) {
|
|
79
79
|
return props.readOnly && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
|
|
80
80
|
}, function (props) {
|
|
81
81
|
return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
82
82
|
});
|
|
83
|
-
var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n width: 33.
|
|
83
|
+
var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n width: 33.33%;\n display: flex;\n align-items: center;\n text-align: left;\n font: normal normal normal 14px/16px Roboto;\n letter-spacing: 0px;\n padding: 0;\n height: 19px;\n cursor: default;\n justify-content: space-between;\n ", "\n"])), function (props) {
|
|
84
84
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
85
85
|
});
|
|
86
86
|
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = 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) {
|
|
@@ -90,7 +90,7 @@ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDe
|
|
|
90
90
|
}, function (props) {
|
|
91
91
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
92
92
|
});
|
|
93
|
-
var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.
|
|
93
|
+
var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.66%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n margin-left: 3px;\n padding-left: 6px;\n\n ", "\n\n ", "\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n }\n &&:hover:not(:focus) {\n ", "\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
|
|
94
94
|
return props.state === 'success' && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
95
95
|
return props.success ? fadeIn : fadeOut;
|
|
96
96
|
});
|
|
@@ -276,7 +276,8 @@ CompactStarRating.defaultProps = {
|
|
|
276
276
|
icon: React__default['default'].createElement(SvgStar, null),
|
|
277
277
|
iconFill: React__default['default'].createElement(SvgStarFilled, null),
|
|
278
278
|
hidden: false,
|
|
279
|
-
state: ''
|
|
279
|
+
state: '',
|
|
280
|
+
onChange: function onChange() {}
|
|
280
281
|
};
|
|
281
282
|
CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
282
283
|
readOnly: defaultTheme.PropTypes.bool,
|
|
@@ -9,8 +9,8 @@ var editNote = require('./edit-note-c47d292e.js');
|
|
|
9
9
|
require('./Alert-3e4f8be1.js');
|
|
10
10
|
require('./Badge-9bcebe96.js');
|
|
11
11
|
require('./Popover-d3a4b72e.js');
|
|
12
|
-
require('./Tab-
|
|
13
|
-
require('./Tabs-
|
|
12
|
+
require('./Tab-9936ddea.js');
|
|
13
|
+
require('./Tabs-93f6362c.js');
|
|
14
14
|
var Tooltip = require('./Tooltip-1b7b0052.js');
|
|
15
15
|
var styled = require('styled-components');
|
|
16
16
|
|
|
@@ -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;
|
|
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;
|
|
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) {
|
|
@@ -105,10 +105,10 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
105
105
|
}, function (props) {
|
|
106
106
|
return props.state === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
107
107
|
});
|
|
108
|
-
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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 padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n }\n\n &&:hover:not(:focus) {\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n ", ";\n\n ", "\n\n ", ";\n\n ", ";\n }\n\n &&:focus {\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) {
|
|
108
|
+
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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 padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n }\n\n &&:hover:not(:focus) {\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n ", ";\n\n ", "\n ", "\n\n ", ";\n\n ", ";\n }\n\n &&:focus {\n\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) {
|
|
109
109
|
return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
|
|
110
110
|
}, function (props) {
|
|
111
|
-
return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n
|
|
111
|
+
return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
112
112
|
}, function (props) {
|
|
113
113
|
return props.state === 'success' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
114
114
|
return props.state === 'success' ? fadeIn : fadeOut;
|
|
@@ -118,7 +118,7 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
118
118
|
}, function (props) {
|
|
119
119
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
120
120
|
}, function (props) {
|
|
121
|
-
return props.hasLink && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n
|
|
121
|
+
return props.hasLink && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n &&:read-only {\n cursor: default;\n }\n "])), function (props) {
|
|
122
122
|
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
123
123
|
});
|
|
124
124
|
}, function (props) {
|
|
@@ -139,30 +139,34 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
139
139
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
140
140
|
}, function (props) {
|
|
141
141
|
return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
142
|
+
}, function (props) {
|
|
143
|
+
return props.disabled && props.hasLink && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed !important;\n "])));
|
|
142
144
|
}, function (props) {
|
|
143
145
|
return props.state === 'warning' && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
|
|
144
146
|
}, function (props) {
|
|
145
147
|
return props.state === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
|
|
146
148
|
}, function (props) {
|
|
147
|
-
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
149
|
+
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
150
|
+
}, function (props) {
|
|
151
|
+
return props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
148
152
|
}, function (props) {
|
|
149
153
|
return props.state === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
150
154
|
}, function (props) {
|
|
151
|
-
return !props.readOnly && styled.css(
|
|
155
|
+
return !props.readOnly && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
152
156
|
return props.theme.getColor('gray-600');
|
|
153
157
|
});
|
|
154
158
|
}, function (props) {
|
|
155
|
-
return props.state === 'warning' && styled.css(
|
|
159
|
+
return props.state === 'warning' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
156
160
|
return props.theme.getColor('signal-yellow-500');
|
|
157
161
|
});
|
|
158
162
|
}, function (props) {
|
|
159
|
-
return props.state === 'error' && styled.css(
|
|
163
|
+
return props.state === 'error' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
160
164
|
return props.theme.getColor('red-500');
|
|
161
165
|
});
|
|
162
166
|
}, function (props) {
|
|
163
|
-
return props.bold && styled.css(
|
|
167
|
+
return props.bold && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
|
|
164
168
|
});
|
|
165
|
-
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
169
|
+
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 8px;\n\n a {\n font-size: 0.875rem;\n ", ";\n }\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), function (props) {
|
|
166
170
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
|
|
167
171
|
});
|
|
168
172
|
|
|
@@ -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-45b12179.js');
|
|
8
|
-
var TextArea = require('./TextArea-
|
|
8
|
+
var TextArea = require('./TextArea-fdefcf6a.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 }; }
|
|
@@ -49,8 +49,9 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
|
|
|
49
49
|
rows = _ref.rows,
|
|
50
50
|
showMore = _ref.showMore,
|
|
51
51
|
showMoreText = _ref.showMoreText,
|
|
52
|
+
showLessText = _ref.showLessText,
|
|
52
53
|
isExpanded = _ref.isExpanded,
|
|
53
|
-
props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "state", "edit", "rows", "showMore", "showMoreText", "isExpanded"]);
|
|
54
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "state", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded"]);
|
|
54
55
|
|
|
55
56
|
var _useState = React.useState(false),
|
|
56
57
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
@@ -202,6 +203,7 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
|
|
|
202
203
|
rows: rows,
|
|
203
204
|
showMore: showMore,
|
|
204
205
|
showMoreText: showMoreText,
|
|
206
|
+
showLessText: showLessText,
|
|
205
207
|
icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
|
|
206
208
|
})));
|
|
207
209
|
});
|
|
@@ -213,7 +215,8 @@ Instructions.defaultProps = {
|
|
|
213
215
|
edit: false,
|
|
214
216
|
disabled: false,
|
|
215
217
|
readOnly: false,
|
|
216
|
-
state: ''
|
|
218
|
+
state: '',
|
|
219
|
+
onUpdateCallback: function onUpdateCallback() {}
|
|
217
220
|
};
|
|
218
221
|
Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
219
222
|
name: defaultTheme.PropTypes.string,
|
|
@@ -230,6 +233,7 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
230
233
|
hidden: defaultTheme.PropTypes.bool,
|
|
231
234
|
showMore: defaultTheme.PropTypes.bool,
|
|
232
235
|
showMoreText: defaultTheme.PropTypes.string,
|
|
236
|
+
showLessText: defaultTheme.PropTypes.string,
|
|
233
237
|
availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
|
|
234
238
|
lightBackground: defaultTheme.PropTypes.bool,
|
|
235
239
|
edit: defaultTheme.PropTypes.bool,
|
|
@@ -11,32 +11,34 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
13
|
|
|
14
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
14
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
15
15
|
var switchButtonSize = '16px';
|
|
16
|
-
var Switch$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n * {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (props) {
|
|
17
|
-
return props.
|
|
16
|
+
var Switch$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n * {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n\n ", "\n\n ", "\n"])), function (props) {
|
|
17
|
+
return props.readOnly && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n cursor: default;\n > * {\n pointer-events: none;\n }\n "])));
|
|
18
|
+
}, function (props) {
|
|
19
|
+
return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n opacity: 0.5;\n cursor: not-allowed;\n * {\n pointer-events: none;\n }\n "])));
|
|
18
20
|
});
|
|
19
|
-
var SwitchIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
21
|
+
var SwitchIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n ", "\n height: ", ";\n width: 32px;\n border-radius: 20px;\n border: 1px solid;\n ", "\n transition: background 200ms;\n"])), function (props) {
|
|
20
22
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
|
|
21
23
|
}, polished.math("".concat(switchButtonSize, " + 2px")), function (props) {
|
|
22
24
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300'));
|
|
23
25
|
});
|
|
24
|
-
var SwitchIndicatorButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
26
|
+
var SwitchIndicatorButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n ", "\n height: ", ";\n width: ", ";\n border-radius: 50%;\n box-shadow: ", " 0 0px 2px 0px;\n transition: left 200ms;\n"])), function (props) {
|
|
25
27
|
return props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white'));
|
|
26
28
|
}, switchButtonSize, switchButtonSize, function (props) {
|
|
27
29
|
return props.theme.getColor('gray-500');
|
|
28
30
|
});
|
|
29
|
-
var SwitchIndicatorLabelText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
31
|
+
var SwitchIndicatorLabelText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 18px;\n\n ", ";\n"])), function (props) {
|
|
30
32
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
31
33
|
});
|
|
32
|
-
var SwitchLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
34
|
+
var SwitchLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n margin-right: auto;\n cursor: pointer;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n }\n\n &:has(input[type='checkbox']:not(:checked)) {\n ", " {\n left: 0;\n }\n }\n\n &:has(input[type='checkbox']:checked) {\n ", " {\n left: calc(100% - ", ");\n }\n\n ", " {\n background: ", ";\n\n ", "\n }\n }\n\n &:has(input[type='checkbox']:focus-visible) {\n ", " {\n ", "\n }\n }\n"])), SwitchIndicatorButton, SwitchIndicatorButton, switchButtonSize, SwitchIndicator, function (props) {
|
|
33
35
|
return props.theme.getColor('emerald-500');
|
|
34
36
|
}, function (props) {
|
|
35
37
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1);
|
|
36
38
|
}, SwitchIndicatorButton, function (props) {
|
|
37
39
|
return props.theme.themeProp('outline', "8px solid ".concat(polished.rgba(props.theme.getColor('emerald-500'), 0.5)), "8px solid ".concat(polished.rgba(props.theme.getColor('emerald-500'), 0.3)), 1);
|
|
38
40
|
});
|
|
39
|
-
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
41
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n margin: ", " 0 0 0;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n"])), function (props) {
|
|
40
42
|
return props.spaciousDescription ? '16px' : '6px';
|
|
41
43
|
}, function (props) {
|
|
42
44
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
@@ -62,6 +64,7 @@ var Switch = React__default['default'].forwardRef(function Switch(_ref, forwarde
|
|
|
62
64
|
|
|
63
65
|
return React__default['default'].createElement(Switch$1, {
|
|
64
66
|
disabled: disabled,
|
|
67
|
+
readOnly: readOnly,
|
|
65
68
|
className: className,
|
|
66
69
|
style: style
|
|
67
70
|
}, React__default['default'].createElement(SwitchLabel, {
|
|
@@ -19,9 +19,9 @@ var Tab = React__default['default'].forwardRef(function Tab(_ref, forwardedRef)
|
|
|
19
19
|
hidden = _ref.hidden,
|
|
20
20
|
props = defaultTheme._objectWithoutProperties(_ref, ["children", "hidden"]);
|
|
21
21
|
|
|
22
|
+
if (hidden) return null;
|
|
22
23
|
return React__default['default'].createElement(Tab$1, defaultTheme._extends({
|
|
23
|
-
ref: forwardedRef
|
|
24
|
-
hidden: hidden
|
|
24
|
+
ref: forwardedRef
|
|
25
25
|
}, props), children);
|
|
26
26
|
});
|
|
27
27
|
Tab.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -1,27 +1,25 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var defaultTheme = require('./defaultTheme-50f2b88f.js');
|
|
4
|
+
var lodash = require('lodash');
|
|
4
5
|
var React = require('react');
|
|
6
|
+
var Tab = require('./Tab-9936ddea.js');
|
|
5
7
|
var styled = require('styled-components');
|
|
6
|
-
var Tab = require('./Tab-bd0f3345.js');
|
|
7
|
-
var lodash = require('lodash');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
10
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
13
|
|
|
14
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
14
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
15
15
|
var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n ", ";\n"])), function (props) {
|
|
16
16
|
return props.backgroundColor && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n background-color: ", ";\n "])), props.backgroundColor);
|
|
17
17
|
});
|
|
18
18
|
var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n white-space: nowrap;\n gap: 24px;\n margin: 0;\n padding: 0;\n"])));
|
|
19
|
-
var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-weight: 600;\n font-size: 0.875rem;\n display: flex;\n padding-bottom: 8px;\n letter-spacing: 0.6px;\n cursor: pointer;\n border-bottom: 1px solid;\n border-color: transparent;\n margin-bottom: 1px;\n
|
|
19
|
+
var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-weight: 600;\n font-size: 0.875rem;\n display: flex;\n padding-bottom: 8px;\n letter-spacing: 0.6px;\n cursor: pointer;\n border-bottom: 1px solid;\n border-color: transparent;\n margin-bottom: 1px;\n\n ", ";\n &&:hover:not(:focus) {\n ", ";\n }\n"])), function (props) {
|
|
20
20
|
return props.theme.secondaryFontFamily;
|
|
21
21
|
}, function (props) {
|
|
22
|
-
return props.
|
|
23
|
-
}, function (props) {
|
|
24
|
-
return props.active && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
22
|
+
return props.active && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
25
23
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
|
|
26
24
|
});
|
|
27
25
|
}, function (props) {
|
|
@@ -39,7 +37,7 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
|
|
|
39
37
|
}
|
|
40
38
|
});
|
|
41
39
|
});
|
|
42
|
-
var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
40
|
+
var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n border-top: 1px solid;\n margin-top: -2px;\n display: block;\n ", ";\n"])), function (props) {
|
|
43
41
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
|
|
44
42
|
});
|
|
45
43
|
|
|
@@ -95,7 +93,11 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
|
|
|
95
93
|
extractChildren(child.props.children);
|
|
96
94
|
}
|
|
97
95
|
|
|
98
|
-
if (child.
|
|
96
|
+
if (child.props.hidden) {
|
|
97
|
+
return null;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger)) {
|
|
99
101
|
visibleTabs.push({
|
|
100
102
|
key: index,
|
|
101
103
|
content: child.props.children
|
|
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
15
15
|
|
|
16
|
-
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;
|
|
16
|
+
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;
|
|
17
17
|
var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
18
18
|
var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
19
19
|
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"])));
|
|
@@ -27,18 +27,26 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
27
27
|
}, function (props) {
|
|
28
28
|
return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
|
|
29
29
|
});
|
|
30
|
-
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = 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\n ", "\n ", "\n\n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n ", "\n\n\n\n ", "\n \n
|
|
31
|
-
return
|
|
30
|
+
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = 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\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\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 &&:hover:not(:focus) {\n ", ";\n }\n\n ", " \n\n ", " \n ", "\n ", ";\n\n ", ";\n\n ", ";\n\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n ", "\n ", "\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n ", "\n ", "\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n\n ", ";\n }\n"])), function (props) {
|
|
31
|
+
return props.padding === 'small' && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
|
|
32
32
|
}, function (props) {
|
|
33
|
-
return props.
|
|
33
|
+
return props.padding === 'medium' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
|
|
34
|
+
}, function (props) {
|
|
35
|
+
return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return !props.expanded && props.showMore && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])), props.defaultHeight);
|
|
38
|
+
}, function (props) {
|
|
39
|
+
return props.expanded && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.maxHeight);
|
|
34
40
|
}, function (props) {
|
|
35
41
|
return props.theme.themeProp('color', 'white', 'black');
|
|
36
42
|
}, function (props) {
|
|
37
|
-
return props.
|
|
43
|
+
return props.readOnly && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
|
|
44
|
+
}, function (props) {
|
|
45
|
+
return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
38
46
|
}, function (props) {
|
|
39
|
-
return props.readOnly && styled.css(
|
|
47
|
+
return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
|
|
40
48
|
}, function (props) {
|
|
41
|
-
return props.showMore && styled.css(
|
|
49
|
+
return props.showMore && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
|
|
42
50
|
}, function (props) {
|
|
43
51
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
44
52
|
}, function (props) {
|
|
@@ -48,19 +56,19 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
48
56
|
}, function (props) {
|
|
49
57
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
50
58
|
}, function (props) {
|
|
51
|
-
return props.noBorder && styled.css(
|
|
59
|
+
return props.noBorder && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n border-color: transparent !important;\n "])));
|
|
52
60
|
}, function (props) {
|
|
53
|
-
return props.state === 'error-border' && styled.css(
|
|
61
|
+
return props.state === 'error-border' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
54
62
|
}, function (props) {
|
|
55
63
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
56
64
|
}, function (props) {
|
|
57
|
-
return props.state === 'warning' && styled.css(
|
|
58
|
-
return props.disabled && styled.css(
|
|
65
|
+
return props.state === 'warning' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01 ', props.theme.getColor('signal-yellow-400')), function (props) {
|
|
66
|
+
return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n "])));
|
|
59
67
|
}, props.theme.themeProp('background', '#816600', '#F4E21E'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
|
|
60
68
|
}, function (props) {
|
|
61
|
-
return props.state === 'error' && styled.css(
|
|
69
|
+
return props.state === 'error' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: #f7d5d0 !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('red-200'), props.theme.getColor('red-200'));
|
|
62
70
|
}, function (props) {
|
|
63
|
-
return props.lightBackground && styled.css(
|
|
71
|
+
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'));
|
|
64
72
|
}, function (props) {
|
|
65
73
|
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
66
74
|
}, function (props) {
|
|
@@ -70,15 +78,13 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
70
78
|
}, function (props) {
|
|
71
79
|
return props.noBorder && !props.readOnly && props.state != 'warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
72
80
|
}, InputIconContainer, function (props) {
|
|
73
|
-
return props.state === 'success' && styled.css(
|
|
81
|
+
return props.state === 'success' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
74
82
|
}, function (props) {
|
|
75
|
-
return props.state === 'warning' && styled.css(
|
|
83
|
+
return props.state === 'warning' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('orange-500'));
|
|
76
84
|
}, function (props) {
|
|
77
|
-
return props.state === 'error' && styled.css(
|
|
85
|
+
return props.state === 'error' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('red-500'));
|
|
78
86
|
}, function (props) {
|
|
79
|
-
return props.hasIcon && styled.css(
|
|
80
|
-
}, function (props) {
|
|
81
|
-
return props.instructionsTextArea && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 15px;\n padding-right: 50px;\n "])));
|
|
87
|
+
return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
|
|
82
88
|
}, function (props) {
|
|
83
89
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
84
90
|
}, function (props) {
|
|
@@ -88,50 +94,56 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
88
94
|
}, function (props) {
|
|
89
95
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
90
96
|
}, function (props) {
|
|
91
|
-
return props.state === 'warning' && styled.css(
|
|
97
|
+
return props.state === 'warning' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n "])), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
98
|
+
}, function (props) {
|
|
99
|
+
return props.state === 'error' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n "])), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
92
100
|
}, function (props) {
|
|
93
|
-
return props.
|
|
101
|
+
return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
102
|
+
}, function (props) {
|
|
103
|
+
return props.edit && props.state === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
|
|
94
104
|
});
|
|
95
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
105
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = 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 content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
|
|
96
106
|
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%)"));
|
|
97
107
|
}, function (props) {
|
|
98
|
-
return !props.inputIsEmpty && styled.css(
|
|
108
|
+
return !props.inputIsEmpty && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
|
|
99
109
|
}, function (props) {
|
|
100
|
-
return props.hasPlaceholder && styled.css(
|
|
110
|
+
return props.hasPlaceholder && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
|
|
101
111
|
}, function (props) {
|
|
102
|
-
return props.hasIcon && styled.css(
|
|
112
|
+
return props.hasIcon && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
|
|
103
113
|
});
|
|
104
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
105
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
114
|
+
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = 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"])));
|
|
115
|
+
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n height: 2.625rem;\n display: flex;\n padding: 0 10px 0 30px;\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n margin-top: -3px;\n ", "\n }\n"])), function (props) {
|
|
106
116
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
|
|
107
117
|
});
|
|
108
|
-
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
109
|
-
return props.
|
|
118
|
+
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\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) {
|
|
119
|
+
return props.readOnly && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
|
|
120
|
+
}, function (props) {
|
|
121
|
+
return props.disabled && styled.css(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
110
122
|
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
111
123
|
return props.state === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
112
|
-
}, function (props) {
|
|
113
|
-
return props.disabled && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
114
124
|
});
|
|
115
|
-
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
125
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = 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) {
|
|
116
126
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
117
127
|
}, function (props) {
|
|
118
|
-
return (props.state === '
|
|
128
|
+
return (props.state === 'warning-border' || props.state === 'warning') && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
|
|
129
|
+
}, function (props) {
|
|
130
|
+
return (props.state === 'error-border' || props.state === 'error') && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
119
131
|
});
|
|
120
|
-
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
132
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = 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) {
|
|
121
133
|
return props.fadeIn ? 0 : 1;
|
|
122
134
|
}, function (props) {
|
|
123
135
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
124
136
|
}, function (props) {
|
|
125
137
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
126
138
|
});
|
|
127
|
-
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
128
|
-
return props.expanded && styled.css(
|
|
139
|
+
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = 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\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 5px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
140
|
+
return props.expanded && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
|
|
129
141
|
}, function (props) {
|
|
130
142
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
131
143
|
}, function (props) {
|
|
132
144
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
|
|
133
145
|
}, function (props) {
|
|
134
|
-
return props.state === 'error' && styled.css(
|
|
146
|
+
return props.state === 'error' && styled.css(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
135
147
|
});
|
|
136
148
|
|
|
137
149
|
var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
@@ -272,7 +284,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
272
284
|
htmlFor: "text-input-".concat(uniqueId),
|
|
273
285
|
hasPlaceholder: Boolean(placeholder),
|
|
274
286
|
hasIcon: Boolean(icon),
|
|
275
|
-
state: state,
|
|
276
287
|
inputIsEmpty: inputIsEmpty
|
|
277
288
|
}, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
|
|
278
289
|
state: state
|
|
@@ -291,6 +302,7 @@ TextArea.defaultProps = {
|
|
|
291
302
|
showMoreText: '',
|
|
292
303
|
showLessText: '',
|
|
293
304
|
state: '',
|
|
305
|
+
padding: 'medium',
|
|
294
306
|
instructionsTextArea: false
|
|
295
307
|
};
|
|
296
308
|
TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -315,6 +327,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
315
327
|
rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
|
|
316
328
|
className: defaultTheme.PropTypes.string,
|
|
317
329
|
style: defaultTheme.PropTypes.object,
|
|
330
|
+
padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large']),
|
|
318
331
|
lightBackground: defaultTheme.PropTypes.bool,
|
|
319
332
|
onChange: defaultTheme.PropTypes.func,
|
|
320
333
|
onBlur: defaultTheme.PropTypes.func,
|
|
@@ -15,7 +15,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
15
15
|
|
|
16
16
|
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;
|
|
17
17
|
var activeLabel = styled.css(_templateObject || (_templateObject = 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"])));
|
|
18
|
-
var Adornment = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: initial;\n padding: 13px 10px;\n ", "\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n ", "\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem;\n\n ", "\n ", "\n"])), function (props) {
|
|
18
|
+
var Adornment = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: initial;\n padding: 13px 10px;\n\n ", "\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n ", "\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem;\n\n ", "\n ", "\n"])), function (props) {
|
|
19
19
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
20
20
|
}, function (props) {
|
|
21
21
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
@@ -38,12 +38,12 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
38
38
|
}, function (props) {
|
|
39
39
|
return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
40
40
|
});
|
|
41
|
-
var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: 1;\n padding: 13px 10px;\n ", "\n ", "\n border: 1px solid;\n ", ";\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank\n margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank\n\n ", "\n ", "\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n
|
|
41
|
+
var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: 1;\n padding: 13px 10px;\n ", "\n ", "\n border: 1px solid;\n ", ";\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank\n margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank\n\n ", "\n ", "\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n transition: opacity 350ms;\n }\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n"])), function (props) {
|
|
42
42
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
43
43
|
}, function (props) {
|
|
44
44
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
45
45
|
}, function (props) {
|
|
46
|
-
return props.noBorder ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
46
|
+
return props.noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
47
47
|
}, function (props) {
|
|
48
48
|
return props.warning && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
|
|
49
49
|
}, function (props) {
|
|
@@ -54,38 +54,40 @@ var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDe
|
|
|
54
54
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
55
55
|
}, function (props) {
|
|
56
56
|
return props.theme.themeProp('opacity', 0.6, 0.5, 1);
|
|
57
|
-
}, function (props) {
|
|
58
|
-
return props.warning && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('orange-500'));
|
|
59
57
|
}, function (props) {
|
|
60
58
|
return props.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : 'background: transparent';
|
|
61
59
|
}, InputIconContainer, function (props) {
|
|
62
60
|
return props.theme.getColor('gray-600');
|
|
63
61
|
});
|
|
64
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
62
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 15px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n ", "\n"])), function (props) {
|
|
65
63
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
66
64
|
}, function (props) {
|
|
67
65
|
return props.theme.themeProp('opacity', 0.6, 0.5);
|
|
68
66
|
}, function (props) {
|
|
69
67
|
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%)"));
|
|
70
68
|
}, function (props) {
|
|
71
|
-
return (props.hasPlaceholder || props.hasAdornments) && styled.css(
|
|
69
|
+
return (props.hasPlaceholder || props.hasAdornments) && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
|
|
72
70
|
}, function (props) {
|
|
73
|
-
return props.hasIcon && styled.css(
|
|
71
|
+
return props.hasIcon && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
|
|
74
72
|
});
|
|
75
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
76
|
-
var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
77
|
-
return props.
|
|
73
|
+
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = 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"])));
|
|
74
|
+
var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\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 ", " \n } \n \n}\n"])), function (props) {
|
|
75
|
+
return props.readOnly && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n cursor: default;\n > * {\n pointer-events: none;\n }\n "])));
|
|
78
76
|
}, function (props) {
|
|
79
|
-
return props.
|
|
77
|
+
return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n opacity: 0.5;\n cursor: not-allowed;\n > * {\n pointer-events: none;\n }\n "])));
|
|
78
|
+
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
79
|
+
return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
80
80
|
}, function (props) {
|
|
81
|
-
return props.
|
|
81
|
+
return props.error && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('red-500'));
|
|
82
82
|
}, function (props) {
|
|
83
|
-
return props.
|
|
83
|
+
return props.warning && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('orange-500'));
|
|
84
84
|
});
|
|
85
|
-
var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(
|
|
85
|
+
var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = 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) {
|
|
86
86
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
87
87
|
}, function (props) {
|
|
88
|
-
return props.error && styled.css(
|
|
88
|
+
return props.error && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
89
|
+
}, function (props) {
|
|
90
|
+
return props.warning && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
|
|
89
91
|
});
|
|
90
92
|
|
|
91
93
|
var TextInput = React__default['default'].forwardRef(function TextInput(_ref, forwardedRef) {
|
|
@@ -148,8 +150,9 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
|
|
|
148
150
|
return null;
|
|
149
151
|
}, [description, error, warning]);
|
|
150
152
|
return React__default['default'].createElement(TextInput$1, {
|
|
151
|
-
disabled: disabled,
|
|
152
153
|
error: hasError,
|
|
154
|
+
disabled: disabled,
|
|
155
|
+
readOnly: readOnly,
|
|
153
156
|
warning: hasWarning,
|
|
154
157
|
className: className,
|
|
155
158
|
style: style
|
|
@@ -169,8 +172,6 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
|
|
|
169
172
|
placeholder: placeholder || ' ',
|
|
170
173
|
type: type,
|
|
171
174
|
required: required,
|
|
172
|
-
disabled: disabled,
|
|
173
|
-
readOnly: readOnly,
|
|
174
175
|
autoComplete: autoComplete,
|
|
175
176
|
hasIcon: Boolean(icon),
|
|
176
177
|
error: hasError,
|
|
@@ -178,12 +179,12 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
|
|
|
178
179
|
id: "text-input-".concat(uniqueId),
|
|
179
180
|
onChange: onChange,
|
|
180
181
|
onBlur: onBlur,
|
|
182
|
+
readOnly: readOnly,
|
|
181
183
|
noBorder: noBorder
|
|
182
184
|
}, rest)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
|
|
183
185
|
error: error,
|
|
184
186
|
warning: warning
|
|
185
187
|
}, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
|
|
186
|
-
noBorder: noBorder,
|
|
187
188
|
htmlFor: "text-input-".concat(uniqueId),
|
|
188
189
|
hasPlaceholder: Boolean(placeholder),
|
|
189
190
|
hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
|
|
@@ -197,7 +198,8 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
|
|
|
197
198
|
return textInputDomNode.current.focus();
|
|
198
199
|
}
|
|
199
200
|
}, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
|
|
200
|
-
error: hasError
|
|
201
|
+
error: hasError,
|
|
202
|
+
warning: hasWarning
|
|
201
203
|
}, descriptionText));
|
|
202
204
|
});
|
|
203
205
|
TextInput.defaultProps = {
|
package/data/Tab/index.js
CHANGED
package/data/Tabs/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Tabs = require('../../Tabs-
|
|
3
|
+
var Tabs = require('../../Tabs-93f6362c.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
|
-
require('react');
|
|
7
|
-
require('../../Tab-bd0f3345.js');
|
|
8
6
|
require('lodash');
|
|
7
|
+
require('react');
|
|
8
|
+
require('../../Tab-9936ddea.js');
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
package/data/index.js
CHANGED
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var Alert = require('../Alert-3e4f8be1.js');
|
|
6
6
|
var Badge = require('../Badge-9bcebe96.js');
|
|
7
7
|
var Popover = require('../Popover-d3a4b72e.js');
|
|
8
|
-
var Tab = require('../Tab-
|
|
9
|
-
var Tabs = require('../Tabs-
|
|
8
|
+
var Tab = require('../Tab-9936ddea.js');
|
|
9
|
+
var Tabs = require('../Tabs-93f6362c.js');
|
|
10
10
|
var Tooltip = require('../Tooltip-1b7b0052.js');
|
|
11
11
|
require('../defaultTheme-50f2b88f.js');
|
|
12
12
|
require('styled-components');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var CompactTextInput = require('../../CompactTextInput-
|
|
3
|
+
var CompactTextInput = require('../../CompactTextInput-bb2aee92.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -14,8 +14,8 @@ require('../../Popover-d3a4b72e.js');
|
|
|
14
14
|
require('polished');
|
|
15
15
|
require('@tippyjs/react');
|
|
16
16
|
require('../../shift-away-subtle-cfdf1dbe.js');
|
|
17
|
-
require('../../Tab-
|
|
18
|
-
require('../../Tabs-
|
|
17
|
+
require('../../Tab-9936ddea.js');
|
|
18
|
+
require('../../Tabs-93f6362c.js');
|
|
19
19
|
require('../../Tooltip-1b7b0052.js');
|
|
20
20
|
|
|
21
21
|
|
package/inputs/Switch/index.js
CHANGED
package/inputs/TextArea/index.js
CHANGED
package/inputs/index.js
CHANGED
|
@@ -6,13 +6,13 @@ var ActionButton = require('../ActionButton-c3f5ed94.js');
|
|
|
6
6
|
var Button = require('../Button-432f87c6.js');
|
|
7
7
|
var Checkbox = require('../Checkbox-85394137.js');
|
|
8
8
|
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-45b12179.js');
|
|
9
|
-
var CompactStarRating = require('../CompactStarRating-
|
|
10
|
-
var CompactTextInput = require('../CompactTextInput-
|
|
9
|
+
var CompactStarRating = require('../CompactStarRating-a58976f6.js');
|
|
10
|
+
var CompactTextInput = require('../CompactTextInput-bb2aee92.js');
|
|
11
11
|
var MultiSelect = require('../MultiSelect-01a257b8.js');
|
|
12
12
|
var Radio = require('../Radio-c811ce4a.js');
|
|
13
|
-
var TextArea = require('../TextArea-
|
|
14
|
-
var TextInput = require('../TextInput-
|
|
15
|
-
var Switch = require('../Switch-
|
|
13
|
+
var TextArea = require('../TextArea-fdefcf6a.js');
|
|
14
|
+
var TextInput = require('../TextInput-8658006a.js');
|
|
15
|
+
var Switch = require('../Switch-1334fb9a.js');
|
|
16
16
|
require('../defaultTheme-50f2b88f.js');
|
|
17
17
|
require('styled-components');
|
|
18
18
|
require('react');
|
|
@@ -33,8 +33,8 @@ require('../close-ebf2f3cf.js');
|
|
|
33
33
|
require('../edit-note-c47d292e.js');
|
|
34
34
|
require('../Alert-3e4f8be1.js');
|
|
35
35
|
require('../Badge-9bcebe96.js');
|
|
36
|
-
require('../Tab-
|
|
37
|
-
require('../Tabs-
|
|
36
|
+
require('../Tab-9936ddea.js');
|
|
37
|
+
require('../Tabs-93f6362c.js');
|
|
38
38
|
require('../Tooltip-1b7b0052.js');
|
|
39
39
|
require('../useMergedRefs-b6d2f8fc.js');
|
|
40
40
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetGallery = require('../../AssetGallery-
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-62584d6b.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -25,19 +25,19 @@ require('react-select-async-paginate');
|
|
|
25
25
|
require('../../react-select-creatable.esm-7231b55e.js');
|
|
26
26
|
require('react-dom');
|
|
27
27
|
require('../../close-ebf2f3cf.js');
|
|
28
|
-
require('../../CompactStarRating-
|
|
29
|
-
require('../../CompactTextInput-
|
|
28
|
+
require('../../CompactStarRating-a58976f6.js');
|
|
29
|
+
require('../../CompactTextInput-bb2aee92.js');
|
|
30
30
|
require('../../edit-note-c47d292e.js');
|
|
31
31
|
require('../../Alert-3e4f8be1.js');
|
|
32
32
|
require('../../Badge-9bcebe96.js');
|
|
33
|
-
require('../../Tab-
|
|
34
|
-
require('../../Tabs-
|
|
33
|
+
require('../../Tab-9936ddea.js');
|
|
34
|
+
require('../../Tabs-93f6362c.js');
|
|
35
35
|
require('../../Tooltip-1b7b0052.js');
|
|
36
36
|
require('../../MultiSelect-01a257b8.js');
|
|
37
37
|
require('../../Radio-c811ce4a.js');
|
|
38
|
-
require('../../TextArea-
|
|
39
|
-
require('../../TextInput-
|
|
40
|
-
require('../../Switch-
|
|
38
|
+
require('../../TextArea-fdefcf6a.js');
|
|
39
|
+
require('../../TextInput-8658006a.js');
|
|
40
|
+
require('../../Switch-1334fb9a.js');
|
|
41
41
|
require('../../warning-circle-24522402.js');
|
|
42
42
|
|
|
43
43
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Instructions = require('../../Instructions-
|
|
3
|
+
var Instructions = require('../../Instructions-934c0414.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -15,7 +15,7 @@ require('../../react-select-creatable.esm-7231b55e.js');
|
|
|
15
15
|
require('react-dom');
|
|
16
16
|
require('../../close-ebf2f3cf.js');
|
|
17
17
|
require('../../expand-more-94585605.js');
|
|
18
|
-
require('../../TextArea-
|
|
18
|
+
require('../../TextArea-fdefcf6a.js');
|
|
19
19
|
require('../../useMergedRefs-b6d2f8fc.js');
|
|
20
20
|
require('../../edit-note-c47d292e.js');
|
|
21
21
|
|
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-62584d6b.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-d088833b.js');
|
|
7
7
|
var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
|
|
8
|
-
var Instructions = require('../Instructions-
|
|
8
|
+
var Instructions = require('../Instructions-934c0414.js');
|
|
9
9
|
require('../defaultTheme-50f2b88f.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('react');
|
|
@@ -29,19 +29,19 @@ require('react-select-async-paginate');
|
|
|
29
29
|
require('../react-select-creatable.esm-7231b55e.js');
|
|
30
30
|
require('react-dom');
|
|
31
31
|
require('../close-ebf2f3cf.js');
|
|
32
|
-
require('../CompactStarRating-
|
|
33
|
-
require('../CompactTextInput-
|
|
32
|
+
require('../CompactStarRating-a58976f6.js');
|
|
33
|
+
require('../CompactTextInput-bb2aee92.js');
|
|
34
34
|
require('../edit-note-c47d292e.js');
|
|
35
35
|
require('../Alert-3e4f8be1.js');
|
|
36
36
|
require('../Badge-9bcebe96.js');
|
|
37
|
-
require('../Tab-
|
|
38
|
-
require('../Tabs-
|
|
37
|
+
require('../Tab-9936ddea.js');
|
|
38
|
+
require('../Tabs-93f6362c.js');
|
|
39
39
|
require('../Tooltip-1b7b0052.js');
|
|
40
40
|
require('../MultiSelect-01a257b8.js');
|
|
41
41
|
require('../Radio-c811ce4a.js');
|
|
42
|
-
require('../TextArea-
|
|
43
|
-
require('../TextInput-
|
|
44
|
-
require('../Switch-
|
|
42
|
+
require('../TextArea-fdefcf6a.js');
|
|
43
|
+
require('../TextInput-8658006a.js');
|
|
44
|
+
require('../Switch-1334fb9a.js');
|
|
45
45
|
require('../warning-circle-24522402.js');
|
|
46
46
|
|
|
47
47
|
|