@ntbjs/react-components 1.1.0-beta.9 → 1.1.0-beta.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/{ActionButton-90485300.js → ActionButton-c3f5ed94.js} +1 -1
  2. package/Alert-3e4f8be1.js +62 -0
  3. package/{AssetGallery-28fd6d5c.js → AssetGallery-d38688e4.js} +24 -36
  4. package/{AssetPreviewTopBar-020a6f96.js → AssetPreviewTopBar-449e6019.js} +4 -2
  5. package/{Badge-34ad2850.js → Badge-9bcebe96.js} +1 -1
  6. package/{Button-e6a6139c.js → Button-432f87c6.js} +3 -3
  7. package/{Checkbox-50f1f3c7.js → Checkbox-85394137.js} +5 -5
  8. package/{AutocompleteSelect-e82bd937.js → CompactAutocompleteSelect-45b12179.js} +137 -77
  9. package/CompactStarRating-de1bcfe9.js +300 -0
  10. package/CompactTextInput-480f59cc.js +314 -0
  11. package/{ContextMenu-a68d4f28.js → ContextMenu-d088833b.js} +2 -2
  12. package/{InputGroup-66dd343c.js → InputGroup-09ce9572.js} +1 -1
  13. package/Instructions-34b22002.js +246 -0
  14. package/{MultiSelect-3eca3c3e.js → MultiSelect-01a257b8.js} +62 -46
  15. package/{Popover-63d38274.js → Popover-d3a4b72e.js} +9 -16
  16. package/{Radio-0b46b2a8.js → Radio-c811ce4a.js} +3 -3
  17. package/{SectionSeparator-12aff748.js → SectionSeparator-225719cd.js} +1 -1
  18. package/{Switch-aa384260.js → Switch-3ac11c97.js} +3 -3
  19. package/{Tab-51124003.js → Tab-bd0f3345.js} +11 -6
  20. package/{Tabs-452079b5.js → Tabs-bf42275e.js} +66 -13
  21. package/TextArea-dba4fd6c.js +321 -0
  22. package/{TextInput-e4c6d536.js → TextInput-8ea31a7b.js} +43 -43
  23. package/{Tooltip-556138de.js → Tooltip-1b7b0052.js} +15 -13
  24. package/check-555d831b.js +213 -0
  25. package/data/Alert/index.js +10 -0
  26. package/data/Badge/index.js +2 -2
  27. package/data/Popover/index.js +4 -3
  28. package/data/Tab/index.js +2 -2
  29. package/data/Tabs/index.js +3 -3
  30. package/data/Tooltip/index.js +12 -0
  31. package/data/index.js +11 -8
  32. package/{defaultTheme-870f7df1.js → defaultTheme-50f2b88f.js} +17 -0
  33. package/inputs/ActionButton/index.js +2 -2
  34. package/inputs/Button/index.js +5 -4
  35. package/inputs/Checkbox/index.js +2 -2
  36. package/inputs/CompactAutocompleteSelect/index.js +19 -0
  37. package/inputs/CompactStarRating/index.js +4 -3
  38. package/inputs/CompactTextInput/index.js +12 -9
  39. package/inputs/MultiSelect/index.js +4 -3
  40. package/inputs/Radio/index.js +2 -2
  41. package/inputs/Switch/index.js +2 -2
  42. package/inputs/TextArea/index.js +3 -3
  43. package/inputs/TextInput/index.js +2 -2
  44. package/inputs/index.js +28 -25
  45. package/layout/InputGroup/index.js +2 -2
  46. package/layout/SectionSeparator/index.js +2 -2
  47. package/layout/index.js +3 -3
  48. package/package.json +3 -2
  49. package/{react-select-creatable.esm-eb462367.js → react-select-creatable.esm-7231b55e.js} +132 -41
  50. package/shift-away-subtle-cfdf1dbe.js +9 -0
  51. package/warning-circle-24522402.js +41 -0
  52. package/widgets/AssetGallery/index.js +28 -24
  53. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
  54. package/widgets/ContextMenu/ContextMenuItem/index.js +3 -5
  55. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +1 -1
  56. package/widgets/ContextMenu/index.js +2 -2
  57. package/widgets/Instructions/index.js +23 -0
  58. package/widgets/index.js +31 -25
  59. package/CompactStarRating-f7a58649.js +0 -246
  60. package/CompactTextInput-a5bc6ec3.js +0 -265
  61. package/TextArea-efe4fa88.js +0 -213
  62. package/inputs/AutocompleteSelect/index.js +0 -18
@@ -1,265 +0,0 @@
1
- 'use strict';
2
-
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
4
- var React = require('react');
5
- var nanoid = require('nanoid');
6
- var lodash = require('lodash');
7
- var styled = require('styled-components');
8
- var editNote = require('./edit-note-c47d292e.js');
9
- var Popover = require('./Popover-63d38274.js');
10
- var Tooltip = require('./Tooltip-556138de.js');
11
- require('./Tab-51124003.js');
12
- require('./Tabs-452079b5.js');
13
- require('./Badge-34ad2850.js');
14
-
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- function _interopNamespace(e) {
18
- if (e && e.__esModule) return e;
19
- var n = Object.create(null);
20
- if (e) {
21
- Object.keys(e).forEach(function (k) {
22
- if (k !== 'default') {
23
- var d = Object.getOwnPropertyDescriptor(e, k);
24
- Object.defineProperty(n, k, d.get ? d : {
25
- enumerable: true,
26
- get: function () {
27
- return e[k];
28
- }
29
- });
30
- }
31
- });
32
- }
33
- n['default'] = e;
34
- return Object.freeze(n);
35
- }
36
-
37
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
38
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
39
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
40
-
41
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
42
- var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
43
- return props.theme.primaryFontFamily;
44
- });
45
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n"])), function (props) {
46
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
47
- });
48
- var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
49
- return props.$hasLabel ? '66.66%' : '100%';
50
- });
51
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding-right: 4px;\n ", ";\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ", ";\n\n ", "\n\n ", "\n\n > svg {\n width: 12px;\n }\n"])), function (props) {
52
- return props.theme.themeProp('background', styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
53
- return props.error ? '#901d1d' : props.warning ? '#816600' : props.theme.getColor('gray-700');
54
- }), styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
55
- return props.error ? '#f7d5d0' : props.warning ? '#fffebf' : props.theme.getColor('gray-100');
56
- }));
57
- }, function (props) {
58
- return props.theme.getColor('gray-400');
59
- }, function (props) {
60
- return props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43');
61
- }, function (props) {
62
- return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
63
- });
64
- var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = 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 padding: 1px 4px;\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 &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n & + ", " {\n opacity: 1;\n }\n }\n\n &&:focus {\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) {
65
- return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
66
- }, function (props) {
67
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
68
- }, function (props) {
69
- return props.hasLink && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor: pointer;\n }\n "])), function (props) {
70
- return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
71
- });
72
- }, function (props) {
73
- return props.warning && props.theme.themeProp('background', '#634e01', '#fffde8');
74
- }, function (props) {
75
- return props.error && props.theme.themeProp('background', '#7f1b1b', '#fbeae6');
76
- }, function (props) {
77
- return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
78
- }, function (props) {
79
- return props.warning && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
80
- }, function (props) {
81
- return props.error && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
82
- }, InputIconContainer, function (props) {
83
- return props.error && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
84
- }, function (props) {
85
- return !props.readOnly && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
86
- return props.theme.getColor('gray-600');
87
- });
88
- }, function (props) {
89
- return props.warning && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
90
- return props.theme.getColor('signal-yellow-500');
91
- });
92
- }, function (props) {
93
- return props.error && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
94
- return props.theme.getColor('red-500');
95
- });
96
- }, function (props) {
97
- return props.bold && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
98
- });
99
- var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = 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) {
100
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
101
- });
102
-
103
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
104
-
105
- var _ref = /*#__PURE__*/React__namespace.createElement("path", {
106
- fill: "currentColor",
107
- d: "M9 10H5c-1.38 0-2.56-.49-3.54-1.46S0 6.39 0 5s.49-2.56 1.46-3.54S3.62 0 5 0h4v2H5c-.83 0-1.54.29-2.13.88s-.88 1.29-.88 2.13.29 1.54.88 2.13 1.29.88 2.13.88h4v2zM6 6V4h8v2H6zm5 4V8h4c.83 0 1.54-.29 2.13-.88s.88-1.29.88-2.13-.29-1.54-.88-2.13-1.29-.88-2.13-.88h-4V0h4c1.38 0 2.56.49 3.54 1.46S20 3.61 20 5s-.49 2.56-1.46 3.54S16.39 10 15 10h-4z"
108
- });
109
-
110
- function SvgLink(props) {
111
- return /*#__PURE__*/React__namespace.createElement("svg", _extends({
112
- xmlns: "http://www.w3.org/2000/svg",
113
- viewBox: "0 0 20 10"
114
- }, props), _ref);
115
- }
116
-
117
- var ConditionalWrapper = function ConditionalWrapper(_ref) {
118
- var condition = _ref.condition,
119
- wrapper = _ref.wrapper,
120
- children = _ref.children;
121
- return condition ? wrapper(children) : children;
122
- };
123
-
124
- var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref2, forwardedRef) {
125
- var label = _ref2.label,
126
- type = _ref2.type,
127
- name = _ref2.name,
128
- defaultValue = _ref2.defaultValue,
129
- value = _ref2.value,
130
- placeholder = _ref2.placeholder,
131
- link = _ref2.link,
132
- linkTarget = _ref2.linkTarget,
133
- autoSelect = _ref2.autoSelect,
134
- readOnly = _ref2.readOnly,
135
- error = _ref2.error,
136
- warning = _ref2.warning,
137
- bold = _ref2.bold,
138
- onChangeProp = _ref2.onChange,
139
- onFocusProp = _ref2.onFocus,
140
- onBlurProp = _ref2.onBlur,
141
- props = defaultTheme._objectWithoutProperties(_ref2, ["label", "type", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "autoSelect", "readOnly", "error", "warning", "bold", "onChange", "onFocus", "onBlur"]);
142
-
143
- var _useState = React.useState(nanoid.nanoid()),
144
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
145
- uniqueId = _useState2[0];
146
-
147
- var _useState3 = React.useState(defaultValue || value),
148
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
149
- currentValue = _useState4[0],
150
- setCurrentValue = _useState4[1];
151
-
152
- var _useState5 = React.useState(false),
153
- _useState6 = defaultTheme._slicedToArray(_useState5, 2),
154
- showPopover = _useState6[0],
155
- setShowPopover = _useState6[1];
156
-
157
- var onChange = React.useCallback(function (event) {
158
- setCurrentValue(event.target.value);
159
-
160
- if (lodash.isFunction(onChangeProp)) {
161
- onChangeProp(event);
162
- }
163
- }, [onChangeProp]);
164
- var onFocus = React.useCallback(function (event) {
165
- if (autoSelect) {
166
- event.target.select();
167
- }
168
-
169
- if (lodash.isFunction(onFocusProp)) {
170
- onFocusProp(event);
171
- }
172
-
173
- setShowPopover(true);
174
- }, [autoSelect, readOnly, onFocusProp]);
175
- var onBlur = React.useCallback(function (event) {
176
- if (lodash.isFunction(onBlurProp)) {
177
- onBlurProp(event);
178
- }
179
-
180
- setShowPopover(false);
181
- }, [onBlurProp]);
182
- return React__default['default'].createElement(CompactTextInput$1, props, label && React__default['default'].createElement(Label, {
183
- htmlFor: uniqueId
184
- }, label), React__default['default'].createElement(ConditionalWrapper, {
185
- wrapper: function wrapper(children) {
186
- return React__default['default'].createElement(Tooltip.Tooltip, {
187
- content: error || warning
188
- }, children);
189
- },
190
- condition: lodash.isString(error) || lodash.isString(warning)
191
- }, React__default['default'].createElement(ConditionalWrapper, {
192
- wrapper: function wrapper(children) {
193
- return readOnly ? React__default['default'].createElement("a", {
194
- href: link,
195
- target: linkTarget
196
- }, children) : React__default['default'].createElement(Popover.Popover, {
197
- arrow: false,
198
- trigger: "manuel",
199
- visible: showPopover,
200
- placement: 'bottom-start',
201
- offset: [4, 2],
202
- content: React__default['default'].createElement(LinkPopoverContainer, {
203
- onMouseDown: function onMouseDown(event) {
204
- event.preventDefault();
205
- }
206
- }, React__default['default'].createElement("a", {
207
- href: link,
208
- target: "_blank",
209
- rel: "noreferrer"
210
- }, React__default['default'].createElement(SvgLink, null), currentValue))
211
- }, children);
212
- },
213
- condition: !lodash.isEmpty(link)
214
- }, React__default['default'].createElement(InputContainer, {
215
- $hasLabel: !lodash.isEmpty(label)
216
- }, React__default['default'].createElement(Input, {
217
- ref: forwardedRef,
218
- id: uniqueId,
219
- type: type,
220
- name: name,
221
- readOnly: readOnly,
222
- placeholder: placeholder,
223
- defaultValue: defaultValue,
224
- value: value,
225
- error: error,
226
- warning: warning,
227
- bold: bold,
228
- hasLink: !lodash.isEmpty(link),
229
- onFocus: onFocus,
230
- onChange: onChange,
231
- onBlur: onBlur
232
- }), !readOnly && React__default['default'].createElement(InputIconContainer, {
233
- error: error,
234
- warning: warning
235
- }, React__default['default'].createElement(editNote.SvgEditNote, null))))));
236
- });
237
- CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
238
- label: defaultTheme.PropTypes.string,
239
- type: defaultTheme.PropTypes.string,
240
- name: defaultTheme.PropTypes.string,
241
- defaultValue: defaultTheme.PropTypes.string,
242
- value: defaultTheme.PropTypes.string,
243
- placeholder: defaultTheme.PropTypes.string,
244
- link: defaultTheme.PropTypes.string,
245
- linkTarget: defaultTheme.PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
246
- autoSelect: defaultTheme.PropTypes.bool,
247
- readOnly: defaultTheme.PropTypes.bool,
248
- error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
249
- warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
250
- bold: defaultTheme.PropTypes.bool,
251
- onChange: defaultTheme.PropTypes.func,
252
- onFocus: defaultTheme.PropTypes.func,
253
- onBlur: defaultTheme.PropTypes.func
254
- } : {};
255
- CompactTextInput.defaultProps = {
256
- type: 'text',
257
- autoSelect: true,
258
- linkTarget: '_self',
259
- bold: false,
260
- readOnly: false,
261
- error: false,
262
- warning: false
263
- };
264
-
265
- exports.CompactTextInput = CompactTextInput;
@@ -1,213 +0,0 @@
1
- 'use strict';
2
-
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
4
- var React = require('react');
5
- var nanoid = require('nanoid');
6
- var styled = require('styled-components');
7
- var lodash = require('lodash');
8
- var editNote = require('./edit-note-c47d292e.js');
9
-
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
-
12
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
-
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
16
- 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"])));
17
- var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
18
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
19
- }, function (props) {
20
- return props.theme.themeProp('opacity', 0.6, 0.5);
21
- });
22
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = 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 position: absolute;\n right: 5px;\n top: 10px;\n bottom: 0;\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n }\n"])), function (props) {
23
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
24
- });
25
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 13px 10px;\n resize: vertical;\n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n\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 border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
26
- return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
27
- }, function (props) {
28
- return (props.warningAlert || props.errorAlert) && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
29
- }, function (props) {
30
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
31
- }, function (props) {
32
- return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
33
- }, function (props) {
34
- return props.noBorder && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n border-color: transparent !important;\n "])));
35
- }, function (props) {
36
- return props.warningAlert && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: ", " !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('signal-yellow-400'), props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400'));
37
- }, function (props) {
38
- return props.errorAlert && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\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'));
39
- }, function (props) {
40
- return props.lightBackground && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n background: #fffde8 !important;\n :focus {\n background: white !important;\n }\n "])));
41
- }, function (props) {
42
- return props.noBorder && !props.readOnly ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
43
- }, InputIconContainer, function (props) {
44
- return props.warning && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
45
- }, function (props) {
46
- return props.error && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
47
- }, function (props) {
48
- return props.hasIcon && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
49
- }, function (props) {
50
- return (props.warningAlert || props.errorAlert) && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 60px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
51
- }, function (props) {
52
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
53
- }, function (props) {
54
- return props.theme.themeProp('opacity', 0.6, 0.5, 1);
55
- }, function (props) {
56
- return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
57
- }, function (props) {
58
- return props.theme.getColor('gray-600');
59
- });
60
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = 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\n ", ";\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
61
- 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%)"));
62
- }, function (props) {
63
- return props.hasPlaceholder && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
64
- }, function (props) {
65
- return props.hasIcon && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
66
- });
67
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = 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"])));
68
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 25px;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n }\n"])), function (props) {
69
- return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
70
- });
71
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\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"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
72
- return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
73
- }, function (props) {
74
- return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
75
- });
76
- var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = 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"])), function (props) {
77
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
78
- }, function (props) {
79
- return props.error && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
80
- });
81
-
82
- var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
83
- var value = _ref.value,
84
- defaultValue = _ref.defaultValue,
85
- name = _ref.name,
86
- label = _ref.label,
87
- placeholder = _ref.placeholder,
88
- required = _ref.required,
89
- disabled = _ref.disabled,
90
- readOnly = _ref.readOnly,
91
- autoComplete = _ref.autoComplete,
92
- description = _ref.description,
93
- error = _ref.error,
94
- warning = _ref.warning,
95
- icon = _ref.icon,
96
- rows = _ref.rows,
97
- className = _ref.className,
98
- style = _ref.style,
99
- onChange = _ref.onChange,
100
- onBlur = _ref.onBlur,
101
- lightBackground = _ref.lightBackground,
102
- noBorder = _ref.noBorder,
103
- warningAlert = _ref.warningAlert,
104
- errorAlert = _ref.errorAlert,
105
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
106
-
107
- var _useState = React.useState(nanoid.nanoid()),
108
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
109
- uniqueId = _useState2[0];
110
-
111
- var hasError = React.useMemo(function () {
112
- if (lodash.isBoolean(error)) {
113
- return error;
114
- }
115
-
116
- return !lodash.isEmpty(error);
117
- }, [error]);
118
- var hasWarning = React.useMemo(function () {
119
- if (lodash.isBoolean(warning)) {
120
- return warning;
121
- }
122
-
123
- return !lodash.isEmpty(warning);
124
- }, [warning]);
125
- var descriptionText = React.useMemo(function () {
126
- if (!lodash.isEmpty(error)) {
127
- return error;
128
- }
129
-
130
- if (!lodash.isEmpty(warning)) {
131
- return warning;
132
- }
133
-
134
- if (!lodash.isEmpty(description)) {
135
- return description;
136
- }
137
-
138
- return null;
139
- }, [description, error, warning]);
140
- return React__default['default'].createElement(TextInput, {
141
- disabled: disabled,
142
- readOnly: readOnly,
143
- error: hasError,
144
- warning: hasWarning,
145
- className: className,
146
- style: style
147
- }, !warningAlert && !errorAlert && React__default['default'].createElement(TextInputFieldIcon, null, icon), (warningAlert || errorAlert) && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
148
- ref: forwardedRef,
149
- rows: rows,
150
- value: value,
151
- defaultValue: defaultValue,
152
- name: name,
153
- placeholder: placeholder || ' ',
154
- required: required,
155
- disabled: disabled || readOnly,
156
- readOnly: readOnly,
157
- autoComplete: autoComplete,
158
- hasIcon: Boolean(icon),
159
- icon: icon,
160
- error: hasError,
161
- warning: hasWarning,
162
- id: "text-input-".concat(uniqueId),
163
- lightBackground: lightBackground,
164
- onChange: onChange,
165
- onBlur: onBlur,
166
- noBorder: noBorder,
167
- warningAlert: warningAlert,
168
- errorAlert: errorAlert
169
- }, rest)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
170
- warningAlert: warningAlert,
171
- errorAlert: errorAlert
172
- }, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
173
- htmlFor: "text-input-".concat(uniqueId),
174
- hasPlaceholder: Boolean(placeholder),
175
- hasIcon: Boolean(icon),
176
- error: hasError
177
- }, label, required && ' *'), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
178
- error: hasError
179
- }, descriptionText));
180
- });
181
- TextArea.defaultProps = {
182
- rows: 4,
183
- noBorder: false,
184
- readOnly: false,
185
- warningAlert: false,
186
- errorAlert: false
187
- };
188
- TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
189
- value: defaultTheme.PropTypes.string,
190
- defaultValue: defaultTheme.PropTypes.string,
191
- name: defaultTheme.PropTypes.string,
192
- label: defaultTheme.PropTypes.string,
193
- placeholder: defaultTheme.PropTypes.string,
194
- required: defaultTheme.PropTypes.bool,
195
- disabled: defaultTheme.PropTypes.bool,
196
- readOnly: defaultTheme.PropTypes.bool,
197
- autoComplete: defaultTheme.PropTypes.string,
198
- description: defaultTheme.PropTypes.string,
199
- error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
200
- warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
201
- icon: defaultTheme.PropTypes.element,
202
- rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
203
- className: defaultTheme.PropTypes.string,
204
- style: defaultTheme.PropTypes.object,
205
- lightBackground: defaultTheme.PropTypes.bool,
206
- onChange: defaultTheme.PropTypes.func,
207
- onBlur: defaultTheme.PropTypes.func,
208
- noBorder: defaultTheme.PropTypes.bool,
209
- warningAlert: defaultTheme.PropTypes.bool,
210
- errorAlert: defaultTheme.PropTypes.bool
211
- } : {};
212
-
213
- exports.TextArea = TextArea;
@@ -1,18 +0,0 @@
1
- 'use strict';
2
-
3
- var AutocompleteSelect = require('../../AutocompleteSelect-e82bd937.js');
4
- require('../../defaultTheme-870f7df1.js');
5
- require('styled-components');
6
- require('react');
7
- require('nanoid');
8
- require('lodash');
9
- require('react-select');
10
- require('../../react-select-creatable.esm-eb462367.js');
11
- require('react-dom');
12
- require('react-select-async-paginate');
13
- require('../../close-ebf2f3cf.js');
14
- require('../../expand-more-94585605.js');
15
-
16
-
17
-
18
- module.exports = AutocompleteSelect.AutocompleteSelect;