@ntbjs/react-components 1.1.0-beta.3 → 1.1.0-beta.30

package/Alert-fcc0bb50.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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) {
+  return props.warning && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
+}, function (props) {
+  return props.error && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
+}, function (props) {
+  return props.align === 'left' && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      text-align: left;\n    "])));
+}, function (props) {
+  return props.align === 'center' && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      text-align: center;\n    "])));
+});
+var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n"])));
+
+var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
+  var warning = _ref.warning,
+      error = _ref.error,
+      alertMessage = _ref.alertMessage,
+      align = _ref.align,
+      icon = _ref.icon,
+      props = defaultTheme._objectWithoutProperties(_ref, ["warning", "error", "alertMessage", "align", "icon"]);
+
+  var boxRender = function boxRender(warning, error) {
+    if (warning) {
+      return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
+    } else if (error) {
+      return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
+    }
+  };
+
+  return React__default['default'].createElement(Alert$1, defaultTheme._extends({
+    ref: forwardedRef,
+    alertMessage: alertMessage,
+    warning: warning,
+    error: error,
+    align: align
+  }, props), boxRender(warning, error));
+});
+Alert.propTypes = process.env.NODE_ENV !== "production" ? {
+  warning: defaultTheme.PropTypes.bool,
+  error: defaultTheme.PropTypes.bool,
+  icon: defaultTheme.PropTypes.element,
+  align: defaultTheme.PropTypes.oneOf(['left', 'center']),
+  alertMessage: defaultTheme.PropTypes.string
+} : {};
+Alert.defaultProps = {
+  warning: false,
+  error: false,
+  align: 'left',
+  alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.'
+};
+
+exports.Alert = Alert;

package/{AssetGallery-3696cf3c.js → AssetGallery-b79759c3.js}

@@ -7,22 +7,24 @@ var TextInput = require('./TextInput-e4c6d536.js');
 var ResizeObserver = require('resize-observer-polyfill');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var ActionButton = require('./ActionButton-90485300.js');
-require('./AutocompleteSelect-46dbe1eb.js');
-require('./Button-01371eb4.js');
+require('./AutocompleteSelect-e82bd937.js');
+require('./Button-0df54220.js');
 require('./Checkbox-50f1f3c7.js');
-require('./CompactStarRating-f9997240.js');
-require('./CompactTextInput-15118df5.js');
-require('./MultiSelect-1568f6e9.js');
+require('./CompactStarRating-36e6b7b0.js');
+require('./CompactTextInput-f1505e29.js');
+require('./MultiSelect-3eca3c3e.js');
 require('./Radio-0b46b2a8.js');
-require('./TextArea-8a0bd754.js');
+require('./TextArea-efe4fa88.js');
 require('./Switch-aa384260.js');
-require('./Popover-616682bf.js');
-var Tooltip = require('./Tooltip-860530ff.js');
-require('./Tab-06b7a58d.js');
-require('./Tabs-cfbf45fe.js');
-require('./Badge-86593df4.js');
+require('./Alert-fcc0bb50.js');
+require('./Badge-34ad2850.js');
+require('./Popover-de874e41.js');
+require('./Tab-fc380f0b.js');
+require('./Tabs-0aa159fa.js');
+var Tooltip = require('./Tooltip-afbc71d7.js');
 var styled = require('styled-components');
 var polished = require('polished');
+var warningCircle = require('./warning-circle-24522402.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -153,29 +155,15 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
 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"])));
 var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
 
-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); }
+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); }
 
-var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
+var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   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",
   fillOpacity: 0.9
 });
 
 function SvgCheckCircleFilled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _ref$6);
-}
-
-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); }
-
-var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  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"
-});
-
-function SvgWarningCircle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
@@ -509,7 +497,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
     title: asset.note.title,
     assetTitle: asset.title
-  }, 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, {
+  }, 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, {
     selected: selected
   }, React__default['default'].createElement(SvgCheckCircleFilled, {
     onClick: onSelectClick
@@ -808,7 +796,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     ref: cardRef
   }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
     title: asset.note.title
-  }, 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, {
+  }, 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, {
     "data-id": "ss"
   }, asset.previewUrl && renderPreview(asset)), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
     style: {

package/{AssetPreviewTopBar-777c726a.js → AssetPreviewTopBar-020a6f96.js}

@@ -32,7 +32,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-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) {
+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) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));

package/{AutocompleteSelect-46dbe1eb.js → AutocompleteSelect-e82bd937.js}

@@ -6,7 +6,7 @@ var nanoid = require('nanoid');
 var lodash = require('lodash');
 var styled = require('styled-components');
 var Select = require('react-select');
-var reactSelectCreatable_esm = require('./react-select-creatable.esm-efe1e1ae.js');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-eb462367.js');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 var close = require('./close-ebf2f3cf.js');
 var expandMore = require('./expand-more-94585605.js');

package/{Badge-86593df4.js → Badge-34ad2850.js}

@@ -129,7 +129,7 @@ var Badge = React__default['default'].forwardRef(function Badge(_ref, forwardedR
   }, badgeContent));
 });
 Badge.propTypes = process.env.NODE_ENV !== "production" ? {
-  badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]).isRequired,
+  badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]),
   children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.node, defaultTheme.PropTypes.string]),
   elevated: defaultTheme.PropTypes.bool,
   active: defaultTheme.PropTypes.bool,

package/{Button-01371eb4.js → Button-0df54220.js}

@@ -3,8 +3,8 @@
 var defaultTheme = require('./defaultTheme-870f7df1.js');
 var React = require('react');
 var styled = require('styled-components');
-var Popover = require('./Popover-616682bf.js');
-var ContextMenu = require('./ContextMenu-a68d4f28.js');
+var Popover = require('./Popover-de874e41.js');
+var ContextMenu = require('./ContextMenu-ccb7a26a.js');
 var expandMore = require('./expand-more-94585605.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{CompactStarRating-f9997240.js → CompactStarRating-36e6b7b0.js}

@@ -32,7 +32,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  height: 24px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  ", "\n"])), function (props) {
+var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  height: 24px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  input[type=\"number\"] {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    margin: 0;\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      button {\n        cursor: not-allowed;\n      }\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
@@ -40,12 +40,12 @@ var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.appl
 var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 33.3%;\n  display: flex;\n  align-items: center;\n  text-align: left;\n  font: normal normal normal 14px/16px Roboto;\n  letter-spacing: 0px;\n  padding: 0;\n  height: 19px;\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
 });
-var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 66.6%;\n  border-radius: 3px;\n  height: 24px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 66.6%;\n  border-radius: 3px;\n  height: 24px;\n  align-items: center;\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.error && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
 }, function (props) {
   return props.warning && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
 });
-var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+var Star = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -54,7 +54,7 @@ var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultThem
 }, function (props) {
   return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
 });
-var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+var StarFill = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -105,11 +105,12 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
       error = _ref.error,
       warning = _ref.warning,
       readOnly = _ref.readOnly,
-      props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly"]);
+      getRatingProp = _ref.getRating,
+      props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "getRating"]);
 
   var stars = Array.from(Array(max).keys());
 
-  var _useState = React.useState(defaultValue),
+  var _useState = React.useState(value || defaultValue),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
       rating = _useState2[0],
       setRating = _useState2[1];
@@ -126,8 +127,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
 
   var inputRef = React.useRef();
   React.useEffect(function () {
-    setRating(value);
-  }, [value]);
+    setRating(value || defaultValue);
+  }, [value, defaultValue]);
   var hasError = React.useMemo(function () {
     if (lodash.isBoolean(error)) {
       return error;
@@ -143,13 +144,9 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
     return !lodash.isEmpty(warning);
   }, [warning]);
   React.useEffect(function () {
-    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
-    nativeInputValueSetter.call(inputRef.current, String(rating));
-    var ev2 = new Event('input', {
-      bubbles: true
-    });
-    ev2.simulated = true;
-    inputRef.current.dispatchEvent(ev2);
+    if (lodash.isFunction(getRatingProp)) {
+      getRatingProp(rating);
+    }
   }, [rating]);
 
   var starIconRender = function starIconRender(key) {
@@ -202,17 +199,21 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
 
   return React__default['default'].createElement(CompactStarRating$1, defaultTheme._extends({
     disabled: readOnly,
-    ref: forwardedRef
-  }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement("input", {
-    type: "hidden",
-    ref: inputRef,
+    ref: forwardedRef,
     onChange: onChange,
     onBlur: onBlur
-  }), React__default['default'].createElement(starsWidth, {
+  }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement(starsWidth, {
     error: hasError,
     warning: hasWarning
   }, stars.map(function (key) {
-    return starIconRender(key);
+    return React__default['default'].createElement("div", {
+      key: key
+    }, React__default['default'].createElement("input", {
+      type: "number",
+      ref: inputRef,
+      onChange: onChange,
+      onBlur: onBlur
+    }), starIconRender(key));
   })));
 });
 CompactStarRating.defaultProps = {
@@ -236,7 +237,8 @@ CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
   onBlur: defaultTheme.PropTypes.func,
   error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
   warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
-  readOnly: defaultTheme.PropTypes.bool
+  readOnly: defaultTheme.PropTypes.bool,
+  getRating: defaultTheme.PropTypes.func
 } : {};
 
 exports.CompactStarRating = CompactStarRating;

package/{CompactTextInput-15118df5.js → CompactTextInput-f1505e29.js}

@@ -6,11 +6,12 @@ var nanoid = require('nanoid');
 var lodash = require('lodash');
 var styled = require('styled-components');
 var editNote = require('./edit-note-c47d292e.js');
-var Popover = require('./Popover-616682bf.js');
-var Tooltip = require('./Tooltip-860530ff.js');
-require('./Tab-06b7a58d.js');
-require('./Tabs-cfbf45fe.js');
-require('./Badge-86593df4.js');
+require('./Alert-fcc0bb50.js');
+require('./Badge-34ad2850.js');
+var Popover = require('./Popover-de874e41.js');
+require('./Tab-fc380f0b.js');
+require('./Tabs-0aa159fa.js');
+var Tooltip = require('./Tooltip-afbc71d7.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/{ContextMenu-a68d4f28.js → ContextMenu-ccb7a26a.js}

@@ -25,7 +25,7 @@ var ContextMenu = React__default['default'].forwardRef(function ContextMenu(_ref
   }), children);
 });
 ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.node).isRequired
+  children: defaultTheme.PropTypes.array
 } : {};
 ContextMenu.defaultProps = {};
 

package/Instructions-f8301b0b.js

@@ -0,0 +1,206 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var styled = require('styled-components');
+var TextArea = require('./TextArea-efe4fa88.js');
+var AutocompleteSelect = require('./AutocompleteSelect-e82bd937.js');
+var warningCircle = require('./warning-circle-24522402.js');
+var lodash = require('lodash');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var Instructions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  ", ";\n"])), function (props) {
+  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
+});
+var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  justify-content: end;\n  ", ";\n\n  ", ";\n\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n"])), function (props) {
+  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
+}, function (props) {
+  return props.initialHover && props.theme.themeProp('background', '#FFFDE8', '#FFFDE8');
+});
+var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 35%;\n  margin-right: 3px;\n"])));
+var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  margin: auto;\n  ", ";\n"])), function (props) {
+  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
+});
+
+var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
+  var clickToAdd = _ref.clickToAdd,
+      customAddMessage = _ref.customAddMessage,
+      selectedOption = _ref.selectedOption,
+      readOnly = _ref.readOnly,
+      lightBackground = _ref.lightBackground,
+      options = _ref.options,
+      subscribeCurrentValueProp = _ref.subscribeCurrentValue,
+      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "readOnly", "lightBackground", "options", "subscribeCurrentValue"]);
+
+  var _useState = React.useState(false),
+      _useState2 = defaultTheme._slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var _useState3 = React.useState({}),
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
+  var _useState5 = React.useState(clickToAdd),
+      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+      addInstructions = _useState6[0],
+      setAddInstructions = _useState6[1];
+
+  var _useState7 = React.useState(customAddMessage),
+      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+      customMessage = _useState8[0],
+      setCustomMessage = _useState8[1];
+
+  var _useState9 = React.useState(lightBackground),
+      _useState10 = defaultTheme._slicedToArray(_useState9, 2),
+      background = _useState10[0],
+      setBackground = _useState10[1];
+
+  var _useState11 = React.useState(true),
+      _useState12 = defaultTheme._slicedToArray(_useState11, 2),
+      initialHover = _useState12[0],
+      setInitialHover = _useState12[1];
+
+  var _useState13 = React.useState(),
+      _useState14 = defaultTheme._slicedToArray(_useState13, 2),
+      currentValue = _useState14[0],
+      setCurrentValue = _useState14[1];
+
+  var filterOptions = function filterOptions(inputValue) {
+    return options.filter(function (option) {
+      return option.label.toLowerCase().includes(inputValue.toLowerCase());
+    });
+  };
+
+  var loadOptions = function loadOptions(inputValue, prevOptions) {
+    var pageLength = 10;
+    var filteredOptions;
+
+    if (!inputValue) {
+      filteredOptions = options;
+    } else {
+      filteredOptions = filterOptions(inputValue);
+    }
+
+    var hasMore = filteredOptions.length > prevOptions.length + pageLength;
+    var slicedOptions = filteredOptions.slice(prevOptions.length, prevOptions.length + pageLength);
+    return {
+      options: slicedOptions,
+      hasMore: hasMore
+    };
+  };
+
+  var loadOptionsPromise = function loadOptionsPromise(inputValue, prevOptions) {
+    return new Promise(function (resolve) {
+      resolve(loadOptions(inputValue, prevOptions));
+    });
+  };
+
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsHovered(true);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsHovered(false);
+  };
+
+  var handleOnFocus = function handleOnFocus() {
+    if (customMessage === currentValue) {
+      setCurrentValue('');
+    }
+  };
+
+  var handleChange = function handleChange(selected) {
+    if (selected === null) {
+      setSelected({});
+      setAddInstructions(true);
+      setBackground(true);
+      setInitialHover(true);
+      setCustomMessage(customAddMessage);
+    } else {
+      setSelected(selected);
+      setCurrentValue(selected.value);
+      setAddInstructions(false);
+      setBackground(false);
+      setInitialHover(false);
+    }
+  };
+
+  var handleLabelChange = function handleLabelChange(event) {
+    var newValue = event.target.value;
+
+    if (lodash.isEmpty(selected) && newValue) {
+      setCurrentValue(newValue);
+    }
+
+    if (newValue) {
+      setCurrentValue(newValue);
+    }
+  };
+
+  React.useEffect(function () {
+    if (lodash.isFunction(subscribeCurrentValueProp)) {
+      subscribeCurrentValueProp(currentValue);
+    }
+  }, [currentValue]);
+  React.useEffect(function () {
+    handleChange(selected);
+  }, [selected]);
+  React.useEffect(function () {
+    if (selectedOption) {
+      setCurrentValue(selectedOption.value);
+    }
+  }, [selectedOption]);
+  React.useEffect(function () {
+    if (addInstructions) {
+      setCurrentValue(customMessage);
+      setInitialHover(true);
+    }
+  }, [addInstructions, handleOnFocus]);
+  return React__default['default'].createElement(Instructions$1, defaultTheme._extends({
+    ref: forwardedRef,
+    initialHover: initialHover,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, props), React__default['default'].createElement(TopBarContainer, {
+    initialHover: initialHover,
+    className: isHovered && !readOnly && 'slide-in'
+  }, React__default['default'].createElement(SelectContainer, null, React__default['default'].createElement(AutocompleteSelect.AutocompleteSelect, {
+    warning: true,
+    creatable: false,
+    value: selectedOption,
+    loadOptions: loadOptionsPromise,
+    onChange: handleChange
+  }))), React__default['default'].createElement(InstructionsArea, null, React__default['default'].createElement(TextArea.TextArea, {
+    noBorder: true,
+    lightBackground: background,
+    readOnly: readOnly,
+    warningAlert: true,
+    value: currentValue,
+    onChange: handleLabelChange,
+    onFocus: handleOnFocus,
+    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
+  })));
+});
+Instructions.defaultProps = {
+  clickToAdd: false,
+  lightBackground: false
+};
+Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
+  selectedOption: defaultTheme.PropTypes.object,
+  clickToAdd: defaultTheme.PropTypes.bool,
+  customAddMessage: defaultTheme.PropTypes.string,
+  disabled: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  lightBackground: defaultTheme.PropTypes.bool,
+  options: defaultTheme.PropTypes.array,
+  subscribeCurrentValue: defaultTheme.PropTypes.func
+} : {};
+
+exports.Instructions = Instructions;

package/{MultiSelect-1568f6e9.js → MultiSelect-3eca3c3e.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var styled = require('styled-components');
 var close = require('./close-ebf2f3cf.js');
 var Select = require('react-select');
-var reactSelectCreatable_esm = require('./react-select-creatable.esm-efe1e1ae.js');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-eb462367.js');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -127,6 +127,10 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
       cacheUnique = _useState8[0],
       setCacheUnique = _useState8[1];
 
+  React.useEffect(function () {
+    setSelected(selectedOptions);
+  }, [selectedOptions]);
+
   var handleShowMoreClick = function handleShowMoreClick() {
     setDisplayShowMore(false);
   };

package/{Popover-616682bf.js → Popover-de874e41.js}

@@ -6,6 +6,7 @@ var lodash = require('lodash');
 var styled = require('styled-components');
 var polished = require('polished');
 var TippyTooltip = require('@tippyjs/react');
+require('./shift-away-subtle-0bdd3b0d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,12 +14,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
 
-var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
-defaultTheme.styleInject(css_248z$1);
-
-var css_248z = ".tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}";
-defaultTheme.styleInject(css_248z);
-
 var _templateObject, _templateObject2, _templateObject3;
 var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  color: inherit;\n  border-radius: 0;\n  line-height: inherit;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n    ", "\n\n  .tippy-content {\n    padding: 0;\n  }\n\n  .tippy-arrow {\n    ", "\n  }\n\n  && > .tippy-arrow::before {\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  & > .tippy-arrow::after {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &[data-placement^='top'] {\n    & > .tippy-arrow:before {\n      bottom: -16px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -15px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      border-top-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='right'] {\n    & > .tippy-arrow:before {\n      bottom: -5px;\n      left: -16px;\n      border-width: 13px 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -5px;\n      left: -15px;\n      border-width: 13px 15px 13px 0;\n      border-right-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='bottom'] {\n    & > .tippy-arrow:before {\n      top: -16px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      top: -15px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      border-bottom-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='left'] {\n    & > .tippy-arrow::before {\n      bottom: -5px;\n      right: -16px;\n      border-width: 13px 0 13px 15px;\n      ", "\n    }\n\n    & > .tippy-arrow::after {\n      bottom: -5px;\n      right: -15px;\n      border-width: 13px 0 13px 15px;\n      border-left-color: initial;\n      transform-origin: center top;\n    }\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;

package/{Tab-06b7a58d.js → Tab-fc380f0b.js}

@@ -23,7 +23,7 @@ var Tab = React__default['default'].forwardRef(function Tab(_ref, forwardedRef)
   }, props), children);
 });
 Tab.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.element
+  children: defaultTheme.PropTypes.string
 } : {};
 Tab.defaultProps = {};
 

package/{Tabs-cfbf45fe.js → Tabs-0aa159fa.js}

@@ -3,7 +3,7 @@
 var defaultTheme = require('./defaultTheme-870f7df1.js');
 var React = require('react');
 var styled = require('styled-components');
-var Tab = require('./Tab-06b7a58d.js');
+var Tab = require('./Tab-fc380f0b.js');
 var lodash = require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -92,7 +92,7 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
   })));
 });
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.element
+  children: defaultTheme.PropTypes.array
 } : {};
 Tabs.defaultProps = {};
 

package/{TextArea-8a0bd754.js → TextArea-efe4fa88.js}

@@ -202,7 +202,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
   rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
   className: defaultTheme.PropTypes.string,
   style: defaultTheme.PropTypes.object,
-  lightBackground: defaultTheme.PropTypes["boolean"],
+  lightBackground: defaultTheme.PropTypes.bool,
   onChange: defaultTheme.PropTypes.func,
   onBlur: defaultTheme.PropTypes.func,
   noBorder: defaultTheme.PropTypes.bool,