@ntbjs/react-components 1.1.0-beta.82 → 1.1.0-beta.84

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.
@@ -9,22 +9,21 @@ var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
9
9
  var ActionButton = require('./ActionButton-c3f5ed94.js');
10
10
  require('./Button-432f87c6.js');
11
11
  require('./Checkbox-85394137.js');
12
- require('./CompactAutocompleteSelect-160b1620.js');
13
- require('./CompactStarRating-53593d92.js');
14
- require('./CompactTextInput-9980612c.js');
15
- require('./MultiSelect-9729cedf.js');
12
+ require('./CompactAutocompleteSelect-d1a7836f.js');
13
+ require('./CompactStarRating-de1bcfe9.js');
14
+ require('./CompactTextInput-3a85bb3e.js');
15
+ require('./MultiSelect-01a257b8.js');
16
16
  require('./Radio-c811ce4a.js');
17
- require('./TextArea-45d39ab0.js');
17
+ require('./TextArea-9a78ac53.js');
18
18
  require('./Switch-3ac11c97.js');
19
19
  require('./Alert-3e4f8be1.js');
20
20
  require('./Badge-9bcebe96.js');
21
21
  require('./Popover-d3a4b72e.js');
22
22
  require('./Tab-bd0f3345.js');
23
23
  require('./Tabs-bf42275e.js');
24
- var Tooltip = require('./Tooltip-f4f9ab8f.js');
24
+ var Tooltip = require('./Tooltip-1b7b0052.js');
25
25
  var styled = require('styled-components');
26
26
  var polished = require('polished');
27
- var checkCircleFilled = require('./check-circle-filled-1640873e.js');
28
27
  var warningCircle = require('./warning-circle-24522402.js');
29
28
 
30
29
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -156,6 +155,21 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
156
155
  var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
157
156
  var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
158
157
 
158
+ function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
159
+
160
+ var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
161
+ fill: "currentColor",
162
+ d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
163
+ fillOpacity: 0.9
164
+ });
165
+
166
+ function SvgCheckCircleFilled(props) {
167
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
168
+ xmlns: "http://www.w3.org/2000/svg",
169
+ viewBox: "0 0 24 24"
170
+ }, props), _ref$5);
171
+ }
172
+
159
173
  function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
160
174
 
161
175
  var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -485,7 +499,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
485
499
  assetTitle: asset.title
486
500
  }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
487
501
  selected: selected
488
- }, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, {
502
+ }, React__default['default'].createElement(SvgCheckCircleFilled, {
489
503
  onClick: onSelectClick
490
504
  })), React__default['default'].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
491
505
  return React__default['default'].createElement(Tooltip.Tooltip, {
@@ -800,7 +814,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
800
814
  as: SvgFile
801
815
  })), React__default['default'].createElement(InfoDescription, null, asset.description)), React__default['default'].createElement(Bottom, null, selectable && React__default['default'].createElement(BottomSelectButton, {
802
816
  selected: selected
803
- }, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, {
817
+ }, React__default['default'].createElement(SvgCheckCircleFilled, {
804
818
  onClick: onSelectClick
805
819
  })), React__default['default'].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
806
820
  return React__default['default'].createElement(Tooltip.Tooltip, {
@@ -1,16 +1,16 @@
1
1
  'use strict';
2
2
 
3
3
  var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
- var React = require('react');
5
- var nanoid = require('nanoid');
6
4
  var lodash = require('lodash');
5
+ var nanoid = require('nanoid');
6
+ var React = require('react');
7
+ var check = require('./check-555d831b.js');
7
8
  var styled = require('styled-components');
8
9
  var Select = require('react-select');
9
10
  var reactSelectAsyncPaginate = require('react-select-async-paginate');
10
- var reactSelectCreatable_esm = require('./react-select-creatable.esm-4c3da560.js');
11
+ var reactSelectCreatable_esm = require('./react-select-creatable.esm-7231b55e.js');
11
12
  var close = require('./close-ebf2f3cf.js');
12
13
  var expandMore = require('./expand-more-94585605.js');
13
- var checkCircleFilled = require('./check-circle-filled-1640873e.js');
14
14
 
15
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
16
 
@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
19
19
  var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
20
20
 
21
- 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;
21
+ 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;
22
22
  var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
23
23
  return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
24
24
  }, function (props) {
@@ -37,94 +37,104 @@ var sharedStyle = styled.css(_templateObject5 || (_templateObject5 = defaultThem
37
37
  }, function (props) {
38
38
  return props.$hasLabel ? '66.66%' : '100%';
39
39
  });
40
- var CompactAutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
40
+ var CompactAutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n ", "\n"])), function (props) {
41
41
  return props.theme.primaryFontFamily;
42
+ }, function (props) {
43
+ return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
42
44
  });
43
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = 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 padding-top: 2px;\n"])), function (props) {
45
+ var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n height: 19px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 2px;\n ", "\n"])), function (props) {
44
46
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
47
+ }, function (props) {
48
+ return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
45
49
  });
46
- var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 19px;\n"])));
47
- var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n margin-top: 0;\n pointer-events: none;\n padding-right: 60px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 2px;\n bottom: 0;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
50
+ var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 19px;\n"])));
51
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = 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) {
48
52
  return props.fadeIn ? 0 : 1;
49
53
  }, function (props) {
50
54
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
51
55
  }, function (props) {
52
- return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
56
+ return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
53
57
  });
54
- var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
55
- var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
56
- var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
57
- var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
58
- var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n && {\n height: 22px;\n min-height: 22px;\n background: ", ";\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 10px;\n cursor: pointer;\n border: 1px solid transparent;\n ", "\n\n ", ";\n ", ";\n ", ";\n ", "\n ", "\n ", "\n }\n\n & .dropdown-indicator {\n display: none;\n }\n\n &:hover .dropdown-indicator {\n display: flex;\n }\n\n &&:hover {\n border-color: transparent;\n ", ";\n ", ";\n ", ";\n\n ", ";\n }\n &&:not(:hover):not(:focus) {\n ", ";\n }\n\n &&:focus {\n ", ";\n }\n"])), function (props) {
59
- return props.success ? props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200')) : 'transparent';
58
+ var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n }\n"])), sharedStyle, function (props) {
59
+ return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
60
60
  }, function (props) {
61
- return props.success && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
62
- return props.success ? fadeIn : fadeOut;
63
- });
64
- }, function (props) {
65
- return props.warning && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C');
61
+ return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
62
+ });
63
+ var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n }\n"])), sharedStyle, function (props) {
64
+ return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
66
65
  }, function (props) {
67
- return props.error && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
66
+ return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
67
+ });
68
+ var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n }\n"])), sharedStyle, function (props) {
69
+ return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
68
70
  }, function (props) {
69
- return props.success && !props.isFocused && props.theme.themeProp('background-color', '#64b49d', '#f3f9f7');
71
+ return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
72
+ });
73
+ var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), sharedStyle, function (props) {
74
+ return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
75
+ });
76
+ var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n\n height: 22px;\n min-height: 22px;\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 2px 0 10px;\n cursor: pointer;\n border: 1px solid transparent;\n ", "\n\n ", ";\n ", ";\n\n ", "\n ", "\n ", "\n }\n\n & .dropdown-indicator {\n display: none;\n }\n\n &:hover .dropdown-indicator {\n display: flex;\n }\n\n &&:hover {\n border-color: transparent;\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
77
+ return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
70
78
  }, function (props) {
71
- return props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
79
+ return props.state && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
80
+ return props.state === 'success' ? fadeIn : fadeOut;
81
+ });
72
82
  }, function (props) {
73
- return props.warning && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-500'));
83
+ return props.state === 'warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C');
74
84
  }, function (props) {
75
- return props.error && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'));
85
+ return props.state === 'error' && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
76
86
  }, function (props) {
77
- return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
87
+ return props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
78
88
  }, function (props) {
79
- return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-200'));
89
+ return props.state === 'warning' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-500'));
80
90
  }, function (props) {
81
- return props.warning && !props.isFocused && props.theme.themeProp('background', '#816600', '#F4E21E');
91
+ return props.state === 'error' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'));
82
92
  }, function (props) {
83
- return props.error && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
93
+ return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
84
94
  }, function (props) {
85
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
95
+ return props.state === 'warning' && !props.isFocused && props.theme.themeProp('background', '#816600', '#F4E21E');
86
96
  }, function (props) {
87
- return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-200'));
97
+ return props.state === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
88
98
  });
89
- var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n && {\n min-height: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n padding: 6px;\n cursor: pointer;\n padding: 1px 13px;\n ", "\n ", "\n ", "\n ", "\n }\n svg {\n width: 15px;\n margin: 0 9px 0 0;\n }\n a {\n display: flex;\n text-decoration: none;\n color: inherit;\n }\n"])), function (props) {
99
+ var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n && {\n min-height: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n padding: 6px;\n cursor: pointer;\n padding: 1px 13px;\n ", "\n ", "\n ", "\n ", "\n }\n svg {\n width: 15px;\n margin: 0 9px 0 0;\n }\n a {\n display: flex;\n text-decoration: none;\n color: inherit;\n }\n"])), function (props) {
90
100
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
91
101
  }, function (props) {
92
- return props.isFocused && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
102
+ return props.isFocused && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
93
103
  }, function (props) {
94
- return props.isSelected && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
104
+ return props.isSelected && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
95
105
  }, function (props) {
96
- return props.isFocused && props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
106
+ return props.isFocused && props.isSelected && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
97
107
  });
98
- var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", "\n ", ";\n }\n"])), function (props) {
99
- return (props.error || props.warning) && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
108
+ var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", "\n ", ";\n }\n"])), function (props) {
109
+ return (props.state === 'error' || props.state === 'warning') && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
100
110
  }, function (props) {
101
- return (props.error || props.warning) && props.theme.themeProp('opacity', '0.6', '0.6');
111
+ return (props.state === 'error' || props.state === 'warning') && props.theme.themeProp('opacity', '0.6', '0.6');
102
112
  });
103
- var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
113
+ var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
104
114
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
105
115
  });
106
- var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n margin: 0;\n padding: 0;\n padding-left: 2px;\n ", "\n }\n"])), function (props) {
116
+ var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n && {\n margin: 0;\n padding: 0;\n padding-left: 2px;\n ", "\n }\n"])), function (props) {
107
117
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
108
118
  });
109
- var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
119
+ var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
110
120
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
111
121
  });
112
- var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n && {\n padding: 0;\n }\n"])));
113
- var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n cursor: pointer;\n ", ";\n }\n"])), function (props) {
122
+ var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n && {\n padding: 0;\n }\n"])));
123
+ var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n cursor: pointer;\n ", ";\n }\n"])), function (props) {
114
124
  return props.isFocused ? 'flex' : 'none';
115
125
  }, function (props) {
116
126
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
117
127
  });
118
- var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n width: 18px;\n margin-left: 2px;\n cursor: pointer;\n margin-top: 1px;\n ", ";\n }\n"])), function (props) {
128
+ var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n width: 18px;\n margin-left: 2px;\n cursor: pointer;\n margin-top: 1px;\n ", ";\n }\n"])), function (props) {
119
129
  return props.isFocused ? 'flex' : 'none';
120
130
  }, function (props) {
121
131
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
122
132
  });
123
- var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n width: 12px;\n"])));
124
- var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n width: 8px;\n margin-right: 4px;\n ", ";\n stroke-width: 2px;\n"])), function (props) {
133
+ var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n width: 12px;\n"])));
134
+ var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n width: 8px;\n margin-right: 4px;\n ", ";\n stroke-width: 2px;\n"])), function (props) {
125
135
  return props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
126
136
  });
127
- var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n margin: 4px;\n ", ";\n }\n"])), function (props) {
137
+ var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n margin: 4px;\n ", ";\n }\n"])), function (props) {
128
138
  return props.isFocused ? 'flex' : 'none';
129
139
  }, function (props) {
130
140
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
@@ -142,13 +152,11 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
142
152
  loadingMessageFunc = _ref.loadingMessageFunc,
143
153
  creatable = _ref.creatable,
144
154
  readOnly = _ref.readOnly,
145
- success = _ref.success,
146
155
  edit = _ref.edit,
147
156
  disabled = _ref.disabled,
148
- error = _ref.error,
149
157
  hidden = _ref.hidden,
150
- warning = _ref.warning,
151
- props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "success", "edit", "disabled", "error", "hidden", "warning"]);
158
+ state = _ref.state,
159
+ props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "hidden", "state"]);
152
160
 
153
161
  var _useState = React.useState(nanoid.nanoid()),
154
162
  _useState2 = defaultTheme._slicedToArray(_useState, 1),
@@ -169,32 +177,24 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
169
177
  cacheUnique = _useState8[0],
170
178
  setCacheUnique = _useState8[1];
171
179
 
172
- var Control$1 = React.useMemo(function () {
173
- var control = function control(props) {
174
- return React__default['default'].createElement(Control, defaultTheme._extends({
175
- className: "select-control",
176
- edit: edit,
177
- error: error,
178
- success: success,
179
- warning: warning
180
- }, props));
181
- };
180
+ var Control$1 = function Control$1(props) {
181
+ return React__default['default'].createElement(Control, defaultTheme._extends({
182
+ className: "select-control",
183
+ edit: edit,
184
+ state: state
185
+ }, props));
186
+ };
182
187
 
183
- control.displayName = 'ControlWrapper';
184
- return control;
185
- }, [error, warning]);
186
188
  var ValueContainer$1 = React.useMemo(function () {
187
189
  var valueContainer = function valueContainer(props) {
188
190
  return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(ValueContainer, defaultTheme._extends({
189
- className: "value-container",
190
- error: error,
191
- warning: warning
192
- }, props)), ' ', success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)));
191
+ state: state
192
+ }, props)));
193
193
  };
194
194
 
195
195
  valueContainer.displayName = 'ValueContainerWrapper';
196
196
  return valueContainer;
197
- }, [error, warning]);
197
+ }, [state]);
198
198
  var Input$1 = React.useMemo(function () {
199
199
  var selectInput = function selectInput(props) {
200
200
  return React__default['default'].createElement(Input, defaultTheme._extends({
@@ -219,8 +219,7 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
219
219
  var Placeholder$1 = function Placeholder$1(props) {
220
220
  return React__default['default'].createElement(Placeholder, defaultTheme._extends({
221
221
  className: "select-placeholder",
222
- error: error,
223
- warning: warning
222
+ state: state
224
223
  }, props));
225
224
  };
226
225
 
@@ -253,7 +252,6 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
253
252
  setFocused(false);
254
253
  },
255
254
  focused: focused,
256
- readOnly: readOnly,
257
255
  isDisabled: disabled || readOnly,
258
256
  components: innerComponents,
259
257
  isClearable: true,
@@ -322,9 +320,15 @@ var CompactAutocompleteSelect = React__default['default'].forwardRef(function Co
322
320
  }
323
321
  };
324
322
  if (hidden) return null;
325
- return React__default['default'].createElement(CompactAutocompleteSelect$1, null, React__default['default'].createElement(InputContainer, null, label && React__default['default'].createElement(Label, {
326
- htmlFor: uniqueId
327
- }, label), loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
323
+ return React__default['default'].createElement(CompactAutocompleteSelect$1, {
324
+ disabled: disabled
325
+ }, React__default['default'].createElement(InputContainer, null, label && React__default['default'].createElement(Label, {
326
+ htmlFor: uniqueId,
327
+ disabled: disabled
328
+ }, label, React__default['default'].createElement(SuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
329
+ color: '#b0b6b9',
330
+ size: 15
331
+ }), state === 'success' && React__default['default'].createElement(check.SvgCheck, null))), loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
328
332
  $hasLabel: !lodash.isEmpty(label)
329
333
  }, sharedSelectProps, props)) : React__default['default'].createElement(AsyncAutocompleteSelect, defaultTheme._extends({
330
334
  $hasLabel: !lodash.isEmpty(label)
@@ -345,13 +349,13 @@ CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
345
349
  noOptionsMessageFunc: defaultTheme.PropTypes.func,
346
350
  readOnly: defaultTheme.PropTypes.bool,
347
351
  edit: defaultTheme.PropTypes.bool,
348
- success: defaultTheme.PropTypes.bool,
349
352
  hidden: defaultTheme.PropTypes.bool,
350
353
  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
351
354
  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
352
355
  onUpdateCallback: defaultTheme.PropTypes.func,
353
356
  creatable: defaultTheme.PropTypes.bool,
354
- disabled: defaultTheme.PropTypes.bool
357
+ disabled: defaultTheme.PropTypes.bool,
358
+ state: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success'])
355
359
  } : {};
356
360
  CompactAutocompleteSelect.defaultProps = {
357
361
  noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
@@ -362,13 +366,13 @@ CompactAutocompleteSelect.defaultProps = {
362
366
  }
363
367
  },
364
368
  readOnly: false,
365
- success: false,
366
369
  disabled: false,
367
370
  creatable: true,
368
371
  edit: false,
369
372
  error: false,
370
373
  warning: false,
371
- hidden: false
374
+ hidden: false,
375
+ state: ''
372
376
  };
373
377
 
374
378
  var Option = function Option(props) {