@ntbjs/react-components 1.1.0-beta.2 → 1.1.0-beta.21

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 (44) hide show
  1. package/Alert-fcc0bb50.js +62 -0
  2. package/{AssetGallery-7ff60131.js → AssetGallery-763861f4.js} +17 -27
  3. package/{AssetPreviewTopBar-a172fc5c.js → AssetPreviewTopBar-020a6f96.js} +6 -19
  4. package/AutocompleteSelect-e82bd937.js +358 -0
  5. package/{Badge-86593df4.js → Badge-34ad2850.js} +1 -1
  6. package/{Button-00ce7d0f.js → Button-0df54220.js} +5 -39
  7. package/{CompactStarRating-f9997240.js → CompactStarRating-b379f623.js} +6 -5
  8. package/{CompactTextInput-f00e46a3.js → CompactTextInput-46a00295.js} +7 -10
  9. package/{ContextMenu-a68d4f28.js → ContextMenu-ccb7a26a.js} +1 -1
  10. package/Instructions-98d6fe45.js +210 -0
  11. package/MultiSelect-3eca3c3e.js +361 -0
  12. package/{Popover-616682bf.js → Popover-de874e41.js} +1 -6
  13. package/{Tab-06b7a58d.js → Tab-fc380f0b.js} +1 -1
  14. package/{Tabs-cfbf45fe.js → Tabs-0aa159fa.js} +2 -2
  15. package/{TextArea-06d9e80b.js → TextArea-efe4fa88.js} +42 -33
  16. package/{Tooltip-860530ff.js → Tooltip-8c51cc72.js} +12 -10
  17. package/close-ebf2f3cf.js +41 -0
  18. package/data/Alert/index.js +10 -0
  19. package/data/Badge/index.js +1 -1
  20. package/data/Popover/index.js +2 -1
  21. package/data/Tab/index.js +1 -1
  22. package/data/Tabs/index.js +2 -2
  23. package/data/Tooltip/index.js +12 -0
  24. package/data/index.js +10 -7
  25. package/expand-more-94585605.js +41 -0
  26. package/icons/arrow-drop-down.svg +4 -0
  27. package/inputs/AutocompleteSelect/index.js +18 -0
  28. package/inputs/Button/index.js +5 -3
  29. package/inputs/CompactStarRating/index.js +1 -1
  30. package/inputs/CompactTextInput/index.js +8 -6
  31. package/inputs/MultiSelect/index.js +15 -0
  32. package/inputs/TextArea/index.js +1 -1
  33. package/inputs/index.js +23 -11
  34. package/package.json +4 -2
  35. package/react-select-creatable.esm-eb462367.js +7622 -0
  36. package/shift-away-subtle-0bdd3b0d.js +9 -0
  37. package/warning-circle-24522402.js +41 -0
  38. package/widgets/AssetGallery/index.js +22 -11
  39. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -1
  40. package/widgets/ContextMenu/ContextMenuItem/index.js +112 -0
  41. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +32 -0
  42. package/widgets/ContextMenu/index.js +1 -1
  43. package/widgets/Instructions/index.js +22 -0
  44. package/widgets/index.js +25 -12
@@ -0,0 +1,62 @@
1
+ 'use strict';
2
+
3
+ var defaultTheme = require('./defaultTheme-870f7df1.js');
4
+ var React = require('react');
5
+ var styled = require('styled-components');
6
+
7
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
+
9
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
+
12
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
13
+ var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 17px 30px;\n svg {\n width: 12px;\n padding-right: 5px;\n }\n\n ", "\n\n ", "\n\n ", ";\n\n ", ";\n"])), function (props) {
14
+ return props.warning && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
15
+ }, function (props) {
16
+ return props.error && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
17
+ }, function (props) {
18
+ return props.align === 'left' && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n text-align: left;\n "])));
19
+ }, function (props) {
20
+ return props.align === 'center' && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n text-align: center;\n "])));
21
+ });
22
+ var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n"])));
23
+
24
+ var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
25
+ var warning = _ref.warning,
26
+ error = _ref.error,
27
+ alertMessage = _ref.alertMessage,
28
+ align = _ref.align,
29
+ icon = _ref.icon,
30
+ props = defaultTheme._objectWithoutProperties(_ref, ["warning", "error", "alertMessage", "align", "icon"]);
31
+
32
+ var boxRender = function boxRender(warning, error) {
33
+ if (warning) {
34
+ return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
35
+ } else if (error) {
36
+ return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
37
+ }
38
+ };
39
+
40
+ return React__default['default'].createElement(Alert$1, defaultTheme._extends({
41
+ ref: forwardedRef,
42
+ alertMessage: alertMessage,
43
+ warning: warning,
44
+ error: error,
45
+ align: align
46
+ }, props), boxRender(warning, error));
47
+ });
48
+ Alert.propTypes = process.env.NODE_ENV !== "production" ? {
49
+ warning: defaultTheme.PropTypes.bool,
50
+ error: defaultTheme.PropTypes.bool,
51
+ icon: defaultTheme.PropTypes.element,
52
+ align: defaultTheme.PropTypes.oneOf(['left', 'center']),
53
+ alertMessage: defaultTheme.PropTypes.string
54
+ } : {};
55
+ Alert.defaultProps = {
56
+ warning: false,
57
+ error: false,
58
+ align: 'left',
59
+ alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.'
60
+ };
61
+
62
+ exports.Alert = Alert;
@@ -7,20 +7,24 @@ var TextInput = require('./TextInput-e4c6d536.js');
7
7
  var ResizeObserver = require('resize-observer-polyfill');
8
8
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
9
9
  var ActionButton = require('./ActionButton-90485300.js');
10
- require('./Button-00ce7d0f.js');
10
+ require('./AutocompleteSelect-e82bd937.js');
11
+ require('./Button-0df54220.js');
11
12
  require('./Checkbox-50f1f3c7.js');
12
- require('./CompactStarRating-f9997240.js');
13
- require('./CompactTextInput-f00e46a3.js');
13
+ require('./CompactStarRating-b379f623.js');
14
+ require('./CompactTextInput-46a00295.js');
15
+ require('./MultiSelect-3eca3c3e.js');
14
16
  require('./Radio-0b46b2a8.js');
15
- require('./TextArea-06d9e80b.js');
17
+ require('./TextArea-efe4fa88.js');
16
18
  require('./Switch-aa384260.js');
17
- require('./Popover-616682bf.js');
18
- var Tooltip = require('./Tooltip-860530ff.js');
19
- require('./Tab-06b7a58d.js');
20
- require('./Tabs-cfbf45fe.js');
21
- require('./Badge-86593df4.js');
19
+ require('./Alert-fcc0bb50.js');
20
+ require('./Badge-34ad2850.js');
21
+ require('./Popover-de874e41.js');
22
+ require('./Tab-fc380f0b.js');
23
+ require('./Tabs-0aa159fa.js');
24
+ var Tooltip = require('./Tooltip-8c51cc72.js');
22
25
  var styled = require('styled-components');
23
26
  var polished = require('polished');
27
+ var warningCircle = require('./warning-circle-24522402.js');
24
28
 
25
29
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
26
30
 
@@ -151,29 +155,15 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
151
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"])));
152
156
  var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
153
157
 
154
- function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
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); }
155
159
 
156
- var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
160
+ var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
157
161
  fill: "currentColor",
158
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",
159
163
  fillOpacity: 0.9
160
164
  });
161
165
 
162
166
  function SvgCheckCircleFilled(props) {
163
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
164
- xmlns: "http://www.w3.org/2000/svg",
165
- viewBox: "0 0 24 24"
166
- }, props), _ref$6);
167
- }
168
-
169
- 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); }
170
-
171
- var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
172
- fill: "currentColor",
173
- d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
174
- });
175
-
176
- function SvgWarningCircle(props) {
177
167
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
178
168
  xmlns: "http://www.w3.org/2000/svg",
179
169
  viewBox: "0 0 24 24"
@@ -507,7 +497,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
507
497
  }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
508
498
  title: asset.note.title,
509
499
  assetTitle: asset.title
510
- }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
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, {
511
501
  selected: selected
512
502
  }, React__default['default'].createElement(SvgCheckCircleFilled, {
513
503
  onClick: onSelectClick
@@ -806,7 +796,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
806
796
  ref: cardRef
807
797
  }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
808
798
  title: asset.note.title
809
- }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
799
+ }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
810
800
  "data-id": "ss"
811
801
  }, asset.previewUrl && renderPreview(asset)), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
812
802
  style: {
@@ -3,6 +3,7 @@
3
3
  var defaultTheme = require('./defaultTheme-870f7df1.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
+ var close = require('./close-ebf2f3cf.js');
6
7
 
7
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
9
 
@@ -31,7 +32,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
31
32
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
32
33
 
33
34
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
34
- var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: 1px solid;\n clip-path: inset(0px 0px -10px 0px);\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n"])), function (props) {
35
+ var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: 1px solid;\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n"])), function (props) {
35
36
  return props.theme.primaryFontFamily;
36
37
  }, function (props) {
37
38
  return props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
@@ -44,31 +45,17 @@ var LeftText = styled__default['default'].span.attrs(defaultTheme.applyDefaultTh
44
45
  });
45
46
  var ButtonsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n margin-left: auto;\n\n > span {\n margin-left: 16px;\n }\n"])));
46
47
 
47
- function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
48
-
49
- var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
50
- fill: "currentColor",
51
- d: "M16 32L0 16 16 0l2.1 2.1L5.7 14.5H32v3H5.7l12.4 12.4L16 32z"
52
- });
53
-
54
- function SvgArrowBack(props) {
55
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
56
- xmlns: "http://www.w3.org/2000/svg",
57
- viewBox: "0 0 32 32"
58
- }, props), _ref$1);
59
- }
60
-
61
48
  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); }
62
49
 
63
50
  var _ref = /*#__PURE__*/React__namespace.createElement("path", {
64
51
  fill: "currentColor",
65
- d: "M2.1 27.3L0 25.2l11.55-11.55L0 2.1 2.1 0l11.55 11.55L25.2 0l2.1 2.1-11.55 11.55L27.3 25.2l-2.1 2.1-11.55-11.55L2.1 27.3z"
52
+ d: "M16 32L0 16 16 0l2.1 2.1L5.7 14.5H32v3H5.7l12.4 12.4L16 32z"
66
53
  });
67
54
 
68
- function SvgClose(props) {
55
+ function SvgArrowBack(props) {
69
56
  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
70
57
  xmlns: "http://www.w3.org/2000/svg",
71
- viewBox: "0 0 27.3 27.3"
58
+ viewBox: "0 0 32 32"
72
59
  }, props), _ref);
73
60
  }
74
61
 
@@ -86,7 +73,7 @@ var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPrev
86
73
  shadow: shadow
87
74
  }, props), React__default['default'].createElement(BackButtonContainer, {
88
75
  onClick: onBackButtonClick
89
- }, backButtonAsClose ? React__default['default'].createElement(SvgClose, null) : React__default['default'].createElement(SvgArrowBack, null), backButtonText), leftText && React__default['default'].createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default['default'].createElement(ButtonsContainer, null, buttons.map(function (button, index) {
76
+ }, backButtonAsClose ? React__default['default'].createElement(close.SvgClose, null) : React__default['default'].createElement(SvgArrowBack, null), backButtonText), leftText && React__default['default'].createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default['default'].createElement(ButtonsContainer, null, buttons.map(function (button, index) {
90
77
  return React__default['default'].createElement("span", {
91
78
  key: 'topBarButton-' + index
92
79
  }, button);
@@ -0,0 +1,358 @@
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 Select = require('react-select');
9
+ var reactSelectCreatable_esm = require('./react-select-creatable.esm-eb462367.js');
10
+ var reactSelectAsyncPaginate = require('react-select-async-paginate');
11
+ var close = require('./close-ebf2f3cf.js');
12
+ var expandMore = require('./expand-more-94585605.js');
13
+
14
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
+
16
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
18
+ var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
19
+
20
+ 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;
21
+ var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
22
+ var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n line-height: 1rem;\n width: 100%;\n display: block;\n box-shadow: 'none';\n flex-basis: ", ";\n"])), function (props) {
23
+ return props.theme.primaryFontFamily;
24
+ }, function (props) {
25
+ return props.$hasLabel ? '66.66%' : '100%';
26
+ });
27
+ var AutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
28
+ return props.theme.primaryFontFamily;
29
+ });
30
+ var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = 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 margin-right: 8px;\n"])), function (props) {
31
+ return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
32
+ });
33
+ var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 19px;\n"])));
34
+ var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
35
+ var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
36
+ var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
37
+ var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
38
+ var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n && {\n height: 22px;\n min-height: 22px;\n background: transparent;\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 4px;\n cursor: text;\n border: 1px solid transparent;\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"])), function (props) {
39
+ return props.warning && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#fffde8');
40
+ }, function (props) {
41
+ return props.error && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
42
+ }, function (props) {
43
+ return props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
44
+ }, function (props) {
45
+ return props.warning && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-500'));
46
+ }, function (props) {
47
+ return props.error && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'));
48
+ }, function (props) {
49
+ return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
50
+ }, function (props) {
51
+ return props.warning && !props.isFocused && props.theme.themeProp('background', '#816600', '#fffebf');
52
+ }, function (props) {
53
+ return props.error && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
54
+ });
55
+ var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n && {\n min-height: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n padding: 6px;\n cursor: pointer;\n ", "\n ", "\n ", "\n ", "\n }\n"])), function (props) {
56
+ return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
57
+ }, function (props) {
58
+ return props.isFocused && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
59
+ }, function (props) {
60
+ return props.isSelected && styled.css(_templateObject12 || (_templateObject12 = 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')));
61
+ }, function (props) {
62
+ return props.isFocused && props.isSelected && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
63
+ });
64
+ var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", "\n ", ";\n }\n"])), function (props) {
65
+ return (props.error || props.warning) && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
66
+ }, function (props) {
67
+ return (props.error || props.warning) && props.theme.themeProp('opacity', '0.6', '0.6');
68
+ });
69
+ var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
70
+ return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
71
+ });
72
+ var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n && {\n margin: 0;\n padding: 0;\n padding-left: 2px;\n ", "\n }\n"])), function (props) {
73
+ return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
74
+ });
75
+ var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
76
+ return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
77
+ });
78
+ var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n && {\n padding: 0;\n"])));
79
+ var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n cursor: pointer;\n ", ";\n }\n"])), function (props) {
80
+ return props.isFocused ? 'flex' : 'none';
81
+ }, function (props) {
82
+ return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
83
+ });
84
+ var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = 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) {
85
+ return props.isFocused ? 'flex' : 'none';
86
+ }, function (props) {
87
+ return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
88
+ });
89
+ var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n width: 12px;\n"])));
90
+ var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n width: 8px;\n margin-right: 4px;\n ", ";\n stroke-width: 2px;\n"])), function (props) {
91
+ return props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
92
+ });
93
+ var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n margin: 4px;\n ", ";\n }\n"])), function (props) {
94
+ return props.isFocused ? 'flex' : 'none';
95
+ }, function (props) {
96
+ return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
97
+ });
98
+
99
+ var AutocompleteSelect = React__default['default'].forwardRef(function AutocompleteSelect(_ref, forwardedRef) {
100
+ var label = _ref.label,
101
+ availableOptions = _ref.availableOptions,
102
+ placeholder = _ref.placeholder,
103
+ selectedOption = _ref.selectedOption,
104
+ loadOptions = _ref.loadOptions,
105
+ noOptionsMessageFunc = _ref.noOptionsMessageFunc,
106
+ createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
107
+ onUpdateCallback = _ref.onUpdateCallback,
108
+ loadingMessageFunc = _ref.loadingMessageFunc,
109
+ creatable = _ref.creatable,
110
+ readOnly = _ref.readOnly,
111
+ disabled = _ref.disabled,
112
+ error = _ref.error,
113
+ warning = _ref.warning,
114
+ props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "disabled", "error", "warning"]);
115
+
116
+ var _useState = React.useState(nanoid.nanoid()),
117
+ _useState2 = defaultTheme._slicedToArray(_useState, 1),
118
+ uniqueId = _useState2[0];
119
+
120
+ var _useState3 = React.useState(selectedOption),
121
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
122
+ selected = _useState4[0],
123
+ setSelected = _useState4[1];
124
+
125
+ var _useState5 = React.useState(false),
126
+ _useState6 = defaultTheme._slicedToArray(_useState5, 2),
127
+ focused = _useState6[0],
128
+ setFocused = _useState6[1];
129
+
130
+ var _useState7 = React.useState(0),
131
+ _useState8 = defaultTheme._slicedToArray(_useState7, 2),
132
+ cacheUnique = _useState8[0],
133
+ setCacheUnique = _useState8[1];
134
+
135
+ var Control$1 = React.useMemo(function () {
136
+ var control = function control(props) {
137
+ return React__default['default'].createElement(Control, defaultTheme._extends({
138
+ className: "select-control",
139
+ error: error,
140
+ warning: warning
141
+ }, props));
142
+ };
143
+
144
+ control.displayName = 'ControlWrapper';
145
+ return control;
146
+ }, [error, warning]);
147
+ var ValueContainer$1 = React.useMemo(function () {
148
+ var valueContainer = function valueContainer(props) {
149
+ return React__default['default'].createElement(ValueContainer, defaultTheme._extends({
150
+ className: "value-container",
151
+ error: error,
152
+ warning: warning
153
+ }, props));
154
+ };
155
+
156
+ valueContainer.displayName = 'ValueContainerWrapper';
157
+ return valueContainer;
158
+ }, [error, warning]);
159
+ var Input$1 = React.useMemo(function () {
160
+ var selectInput = function selectInput(props) {
161
+ return React__default['default'].createElement(Input, defaultTheme._extends({
162
+ className: "select-input"
163
+ }, props));
164
+ };
165
+
166
+ selectInput.displayName = 'InputWrapper';
167
+ return selectInput;
168
+ }, []);
169
+ var Menu$1 = React.useMemo(function () {
170
+ var menu = function menu(props) {
171
+ return React__default['default'].createElement(Menu, defaultTheme._extends({
172
+ className: "select-menu"
173
+ }, props));
174
+ };
175
+
176
+ menu.displayName = 'MenuWrapper';
177
+ return menu;
178
+ }, []);
179
+
180
+ var Placeholder$1 = function Placeholder$1(props) {
181
+ return React__default['default'].createElement(Placeholder, defaultTheme._extends({
182
+ className: "select-placeholder",
183
+ error: error,
184
+ warning: warning
185
+ }, props));
186
+ };
187
+
188
+ var innerComponents = {
189
+ Control: Control$1,
190
+ ValueContainer: ValueContainer$1,
191
+ DropdownIndicator: DropdownIndicator,
192
+ IndicatorSeparator: IndicatorSeparator,
193
+ ClearIndicator: ClearIndicator,
194
+ Option: Option,
195
+ SingleValue: SingleValue,
196
+ Input: Input$1,
197
+ Placeholder: Placeholder$1,
198
+ Menu: Menu$1
199
+ };
200
+ var sharedSelectProps = {
201
+ ref: forwardedRef,
202
+ options: loadOptions ? undefined : availableOptions,
203
+ value: selected,
204
+ loadOptions: loadOptions,
205
+ loadingMessage: loadingMessageFunc,
206
+ formatCreateLabel: createNewOptionMessageFunc,
207
+ noOptionsMessage: function noOptionsMessage(input) {
208
+ return noOptionsMessageFunc(input.inputValue);
209
+ },
210
+ onFocus: function onFocus() {
211
+ setFocused(true);
212
+ },
213
+ onBlur: function onBlur() {
214
+ setFocused(false);
215
+ },
216
+ focused: focused,
217
+ readOnly: readOnly,
218
+ isDisabled: disabled || readOnly,
219
+ components: innerComponents,
220
+ isClearable: true,
221
+ isSearchable: true,
222
+ placeholder: placeholder,
223
+ id: uniqueId,
224
+ cacheUniqs: loadOptions ? [cacheUnique] : undefined,
225
+ onChange: function onChange(selected, actionMeta) {
226
+ switch (actionMeta.action) {
227
+ case 'create-option':
228
+ if (onUpdateCallback) {
229
+ onUpdateCallback(actionMeta.action, actionMeta.option);
230
+ }
231
+
232
+ if (loadOptions) {
233
+ setCacheUnique(cacheUnique + 1);
234
+ }
235
+
236
+ setSelected(selected);
237
+ break;
238
+
239
+ case 'select-option':
240
+ if (onUpdateCallback) {
241
+ onUpdateCallback(actionMeta.action, actionMeta.option);
242
+ }
243
+
244
+ setSelected(selected);
245
+ break;
246
+
247
+ case 'remove-value':
248
+ if (onUpdateCallback) {
249
+ onUpdateCallback(actionMeta.action, actionMeta.removedValue);
250
+ }
251
+
252
+ setSelected(selected);
253
+ break;
254
+
255
+ case 'pop-value':
256
+ if (onUpdateCallback) {
257
+ onUpdateCallback(actionMeta.action, actionMeta.removedValue);
258
+ }
259
+
260
+ setSelected(selected);
261
+ break;
262
+
263
+ case 'deselect-option':
264
+ if (onUpdateCallback) {
265
+ onUpdateCallback(actionMeta.action, actionMeta.option);
266
+ }
267
+
268
+ setSelected(selected);
269
+ break;
270
+
271
+ case 'clear':
272
+ setSelected(selected);
273
+ break;
274
+
275
+ default:
276
+ if (onUpdateCallback) {
277
+ onUpdateCallback(actionMeta.action, actionMeta.option);
278
+ }
279
+
280
+ setSelected(selected);
281
+ break;
282
+ }
283
+ }
284
+ };
285
+ return React__default['default'].createElement(AutocompleteSelect$1, null, React__default['default'].createElement(InputContainer, null, label && React__default['default'].createElement(Label, {
286
+ htmlFor: uniqueId
287
+ }, label), loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
288
+ $hasLabel: !lodash.isEmpty(label)
289
+ }, sharedSelectProps, props)) : React__default['default'].createElement(AsyncAutocompleteSelect, defaultTheme._extends({
290
+ $hasLabel: !lodash.isEmpty(label)
291
+ }, sharedSelectProps, props)) : creatable ? React__default['default'].createElement(AutocompletCreatableSelect, defaultTheme._extends({
292
+ $hasLabel: !lodash.isEmpty(label)
293
+ }, sharedSelectProps, props)) : React__default['default'].createElement(AutocompletSelect, defaultTheme._extends({
294
+ $hasLabel: !lodash.isEmpty(label)
295
+ }, sharedSelectProps, props))));
296
+ });
297
+ AutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
298
+ label: defaultTheme.PropTypes.string,
299
+ placeholder: defaultTheme.PropTypes.string,
300
+ availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
301
+ selectedOption: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
302
+ loadOptions: defaultTheme.PropTypes.func,
303
+ loadingMessageFunc: defaultTheme.PropTypes.func,
304
+ createNewOptionMessageFunc: defaultTheme.PropTypes.func,
305
+ noOptionsMessageFunc: defaultTheme.PropTypes.func,
306
+ readOnly: defaultTheme.PropTypes.bool,
307
+ error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
308
+ warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
309
+ onUpdateCallback: defaultTheme.PropTypes.func,
310
+ creatable: defaultTheme.PropTypes.bool,
311
+ disabled: defaultTheme.PropTypes.bool
312
+ } : {};
313
+ AutocompleteSelect.defaultProps = {
314
+ noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
315
+ if (inputValue) {
316
+ return "No matches for \"".concat(inputValue, "\"");
317
+ } else {
318
+ return 'No available options';
319
+ }
320
+ },
321
+ readOnly: false,
322
+ disabled: false,
323
+ creatable: true,
324
+ error: false,
325
+ warning: false
326
+ };
327
+
328
+ var Option = function Option(props) {
329
+ return React__default['default'].createElement(Option$1, defaultTheme._extends({
330
+ className: "menu-item"
331
+ }, props));
332
+ };
333
+
334
+ var SingleValue = function SingleValue(props) {
335
+ return React__default['default'].createElement(SingleValue$1, defaultTheme._extends({
336
+ className: "menu-value"
337
+ }, props));
338
+ };
339
+
340
+ var DropdownIndicator = function DropdownIndicator(props) {
341
+ return React__default['default'].createElement(DropdownIndicator$1, defaultTheme._extends({
342
+ className: "dropdown-indicator"
343
+ }, props), React__default['default'].createElement(DropdownIndicatorIcon, null));
344
+ };
345
+
346
+ var ClearIndicator = function ClearIndicator(props) {
347
+ return React__default['default'].createElement(ClearIndicator$1, defaultTheme._extends({
348
+ className: "clear-indicator"
349
+ }, props), React__default['default'].createElement(ClearIndicatorIcon, null));
350
+ };
351
+
352
+ var IndicatorSeparator = function IndicatorSeparator(props) {
353
+ return React__default['default'].createElement(IndicatorSeparator$1, defaultTheme._extends({
354
+ className: "indicator-separator"
355
+ }, props));
356
+ };
357
+
358
+ exports.AutocompleteSelect = AutocompleteSelect;
@@ -129,7 +129,7 @@ var Badge = React__default['default'].forwardRef(function Badge(_ref, forwardedR
129
129
  }, badgeContent));
130
130
  });
131
131
  Badge.propTypes = process.env.NODE_ENV !== "production" ? {
132
- badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]).isRequired,
132
+ badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]),
133
133
  children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.node, defaultTheme.PropTypes.string]),
134
134
  elevated: defaultTheme.PropTypes.bool,
135
135
  active: defaultTheme.PropTypes.bool,