@ndla/ui 28.0.0 → 30.0.0

package/lib/TagSelector/TagSelector.js

@@ -7,17 +7,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _creatable = _interopRequireDefault(require("react-select/creatable"));
+
 var _core = require("@ndla/core");
 
-var _util = require("@ndla/util");
+var _reactI18next = require("react-i18next");
+
+var _ValueButton = _interopRequireDefault(require("./ValueButton"));
+
+var _DropdownIndicator = _interopRequireDefault(require("./DropdownIndicator"));
+
+var _SelectContainer = _interopRequireDefault(require("./SelectContainer"));
+
+var _MenuList = _interopRequireDefault(require("./MenuList"));
+
+var _Control = _interopRequireDefault(require("./Control"));
+
+var _Option = _interopRequireDefault(require("./Option"));
+
+var _Menu = _interopRequireDefault(require("./Menu"));
+
+var _ariaMessages = require("./ariaMessages");
 
-var _SuggestionInput = _interopRequireDefault(require("./SuggestionInput"));
+var _Input = _interopRequireDefault(require("./Input"));
 
-var _core2 = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -37,113 +55,168 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var DEFAULT_DROPDOWN_MAXHEIGHT = '240px';
-var StyledLabel = (0, _styledBase["default"])("label", {
-  target: "eor9swf0",
-  label: "StyledLabel"
-})("font-weight:", _core.fonts.weight.semibold, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ1NlbGVjdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQmdDIiwiZmlsZSI6IlRhZ1NlbGVjdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgdXNlU3RhdGUsIHVzZVJlZiwgdXNlRWZmZWN0LCBDaGFuZ2VFdmVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHNwYWNpbmdVbml0LCBmb250cyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXVpZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuaW1wb3J0IFN1Z2dlc3Rpb25JbnB1dCBmcm9tICcuL1N1Z2dlc3Rpb25JbnB1dCc7XG5cbmNvbnN0IERFRkFVTFRfRFJPUERPV05fTUFYSEVJR0hUID0gJzI0MHB4JztcblxuY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWxgXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG5gO1xuXG5leHBvcnQgaW50ZXJmYWNlIFRhZ1R5cGUge1xuICBuYW1lOiBzdHJpbmc7XG4gIGlkOiBzdHJpbmc7XG59XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIHRhZ3M6IFRhZ1R5cGVbXTtcbiAgdGFnc1NlbGVjdGVkOiBzdHJpbmdbXTtcbiAgb25Ub2dnbGVUYWc6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkNyZWF0ZVRhZzogKHRhZ05hbWU6IHN0cmluZykgPT4gdm9pZDtcbiAgaW5saW5lPzogYm9vbGVhbjtcbiAgcHJlZml4Pzogc3RyaW5nO1xufVxuXG5jb25zdCBzb3J0ZWRUYWdzID0gKHRhZ3M6IFRhZ1R5cGVbXSwgc2VsZWN0ZWRUYWdzOiBzdHJpbmdbXSk6IFRhZ1R5cGVbXSA9PiB7XG4gIGNvbnN0IHJldHVyblRhZ3MgPSBzZWxlY3RlZFRhZ3NcbiAgICAubWFwKChzZWxlY3RlZElkKSA9PiB0YWdzLmZpbmQoKHsgaWQgfSkgPT4gc2VsZWN0ZWRJZCA9PT0gaWQpKVxuICAgIC5maWx0ZXIoKG5vdFVuZGVmaW5lZCkgPT4gbm90VW5kZWZpbmVkKSBhcyB1bmtub3duIGFzIFRhZ1R5cGVbXTtcbiAgcmV0dXJuIHJldHVyblRhZ3M7XG59O1xuXG5jb25zdCBnZXRTdWdnZXN0aW9ucyA9ICh0YWdzOiBUYWdUeXBlW10sIGlucHV0VmFsdWU6IHN0cmluZyk6IFRhZ1R5cGVbXSA9PiB7XG4gIGlmIChpbnB1dFZhbHVlID09PSAnJykge1xuICAgIHJldHVybiBbXTtcbiAgfVxuICBjb25zdCBpbnB1dExvd2VyY2FzZSA9IGlucHV0VmFsdWUudG9Mb3dlckNhc2UoKTtcbiAgcmV0dXJuIHRhZ3NcbiAgICAuZmlsdGVyKCh7IG5hbWUgfSkgPT4gbmFtZS50b0xvd2VyQ2FzZSgpLnN0YXJ0c1dpdGgoaW5wdXRMb3dlcmNhc2UpKVxuICAgIC5zb3J0KChhLCBiKSA9PiBhLm5hbWUubG9jYWxlQ29tcGFyZShiLm5hbWUsICduYicpKTtcbn07XG5cbmNvbnN0IFRhZ1NlbGVjdG9yID0gKHsgbGFiZWwsIHRhZ3MsIHRhZ3NTZWxlY3RlZCwgb25DcmVhdGVUYWcsIG9uVG9nZ2xlVGFnLCBpbmxpbmUsIHByZWZpeCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbaW5wdXRWYWx1ZSwgc2V0SW5wdXRWYWx1ZV0gPSB1c2VTdGF0ZSgnJyk7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbZHJvcGRvd25NYXhIZWlnaHQsIHNldERyb3Bkb3duTWF4SGVpZ2h0XSA9IHVzZVN0YXRlKERFRkFVTFRfRFJPUERPV05fTUFYSEVJR0hUKTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcbiAgY29uc3QgaW5wdXRJZFJlZiA9IHVzZVJlZjxzdHJpbmc+KHV1aWQoKSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBzZXRFeHBhbmRlZChmYWxzZSk7XG4gIH0sIFt0YWdzU2VsZWN0ZWRdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHNldE1heERyb3Bkb3duTWF4SGVpZ2h0ID0gKCkgPT4ge1xuICAgICAgaWYgKCFpbmxpbmUgJiYgY29udGFpbmVyUmVmLmN1cnJlbnQgJiYgdHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgICAgLy8gQ2FsY3VsYXRlIGRpc3RhbmNlIGZyb20gYm90dG9tIG9mIGNvbnRhaW5lciB0byBib3R0b20gb2Ygdmlld3BvcnRcbiAgICAgICAgY29uc3QgY29udGFpbmVyQm90dG9tID0gY29udGFpbmVyUmVmLmN1cnJlbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuYm90dG9tO1xuICAgICAgICBjb25zdCB2aWV3cG9ydEJvdHRvbSA9IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zY3JvbGxIZWlnaHQ7XG4gICAgICAgIGNvbnN0IG1heERyb3Bkb3duSGVpZ2h0ID0gdmlld3BvcnRCb3R0b20gLSBjb250YWluZXJCb3R0b207XG4gICAgICAgIHNldERyb3Bkb3duTWF4SGVpZ2h0KGAke21heERyb3Bkb3duSGVpZ2h0IC0gc3BhY2luZ1VuaXR9cHhgKTtcbiAgICAgIH1cbiAgICB9O1xuICAgIGlmICghaW5saW5lICYmIHR5cGVvZiB3aW5kb3cgIT09ICd1bmRlZmluZWQnKSB7XG4gICAgICBpZiAoZXhwYW5kZWQpIHtcbiAgICAgICAgc2V0TWF4RHJvcGRvd25NYXhIZWlnaHQoKTtcbiAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHNldE1heERyb3Bkb3duTWF4SGVpZ2h0KTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdyZXNpemUnLCBzZXRNYXhEcm9wZG93bk1heEhlaWdodCk7XG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICB0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJyAmJiB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcigncmVzaXplJywgc2V0TWF4RHJvcGRvd25NYXhIZWlnaHQpO1xuICAgIH07XG4gIH0sIFtleHBhbmRlZCwgaW5saW5lXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IHJlZj17Y29udGFpbmVyUmVmfT5cbiAgICAgIDxTdHlsZWRMYWJlbCBodG1sRm9yPXtpbnB1dElkUmVmLmN1cnJlbnR9PntsYWJlbH08L1N0eWxlZExhYmVsPlxuICAgICAgPFN1Z2dlc3Rpb25JbnB1dFxuICAgICAgICBvbkNoYW5nZT17KGU6IENoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgICAgICBzZXRJbnB1dFZhbHVlKHRhcmdldC52YWx1ZSk7XG4gICAgICAgICAgc2V0RXhwYW5kZWQoZmFsc2UpO1xuICAgICAgICB9fVxuICAgICAgICBzdWdnZXN0aW9ucz17ZXhwYW5kZWQgPyB0YWdzIDogZ2V0U3VnZ2VzdGlvbnModGFncywgaW5wdXRWYWx1ZSl9XG4gICAgICAgIHZhbHVlPXtpbnB1dFZhbHVlfVxuICAgICAgICBvbkNyZWF0ZVRhZz17b25DcmVhdGVUYWd9XG4gICAgICAgIG9uVG9nZ2xlVGFnPXtvblRvZ2dsZVRhZ31cbiAgICAgICAgc2V0SW5wdXRWYWx1ZT17c2V0SW5wdXRWYWx1ZX1cbiAgICAgICAgYWRkZWRUYWdzPXtzb3J0ZWRUYWdzKHRhZ3MsIHRhZ3NTZWxlY3RlZCl9XG4gICAgICAgIGV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgc2V0RXhwYW5kZWQ9e3NldEV4cGFuZGVkfVxuICAgICAgICBkcm9wZG93bk1heEhlaWdodD17ZHJvcGRvd25NYXhIZWlnaHR9XG4gICAgICAgIGlubGluZT17aW5saW5lfVxuICAgICAgICBzY3JvbGxBbmNob3JFbGVtZW50PXtjb250YWluZXJSZWZ9XG4gICAgICAgIHByZWZpeD17cHJlZml4fVxuICAgICAgLz5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRhZ1NlbGVjdG9yO1xuIl19 */"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-var sortedTags = function sortedTags(tags, selectedTags) {
-  var returnTags = selectedTags.map(function (selectedId) {
-    return tags.find(function (_ref) {
-      var id = _ref.id;
-      return selectedId === id;
-    });
-  }).filter(function (notUndefined) {
-    return notUndefined;
-  });
-  return returnTags;
-};
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var getSuggestions = function getSuggestions(tags, inputValue) {
-  if (inputValue === '') {
-    return [];
-  }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  var inputLowercase = inputValue.toLowerCase();
-  return tags.filter(function (_ref2) {
-    var name = _ref2.name;
-    return name.toLowerCase().startsWith(inputLowercase);
-  }).sort(function (a, b) {
-    return a.name.localeCompare(b.name, 'nb');
-  });
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var styles = {
+  menu: function menu() {
+    return {};
+  },
+  dropdownIndicator: function dropdownIndicator() {
+    return {};
+  },
+  placeholder: function placeholder(provided) {
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      padding: "0 ".concat(_core.spacing.small),
+      color: _core.colors.brand.primary,
+      margin: 0
+    });
+  },
+  valueContainer: function valueContainer(provided) {
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      padding: 0
+    });
+  },
+  indicatorSeparator: function indicatorSeparator() {
+    return {
+      display: 'none'
+    };
+  },
+  indicatorsContainer: function indicatorsContainer(provided) {
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      alignSelf: 'flex-end'
+    });
+  }
 };
+var StyledTagSelector = /*#__PURE__*/(0, _base["default"])("div", process.env.NODE_ENV === "production" ? {
+  target: "eor9swf1"
+} : {
+  target: "eor9swf1",
+  label: "StyledTagSelector"
+})(process.env.NODE_ENV === "production" ? {
+  name: "3z2sxu",
+  styles: "display:flex;flex-direction:column;flex:1;overflow:hidden"
+} : {
+  name: "3z2sxu",
+  styles: "display:flex;flex-direction:column;flex:1;overflow:hidden",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ1NlbGVjdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q29DIiwiZmlsZSI6IlRhZ1NlbGVjdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IEtleWJvYXJkRXZlbnQsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IENyZWF0YWJsZVNlbGVjdCBmcm9tICdyZWFjdC1zZWxlY3QvY3JlYXRhYmxlJztcbmltcG9ydCB7IE11bHRpVmFsdWUsIFN0eWxlc0NvbmZpZyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzLCBzcGFjaW5nLCB1dGlscyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCBWYWx1ZUJ1dHRvbiBmcm9tICcuL1ZhbHVlQnV0dG9uJztcbmltcG9ydCBEcm9wZG93bkluZGljYXRvciBmcm9tICcuL0Ryb3Bkb3duSW5kaWNhdG9yJztcbmltcG9ydCBTZWxlY3RDb250YWluZXIgZnJvbSAnLi9TZWxlY3RDb250YWluZXInO1xuaW1wb3J0IE1lbnVMaXN0IGZyb20gJy4vTWVudUxpc3QnO1xuaW1wb3J0IENvbnRyb2wgZnJvbSAnLi9Db250cm9sJztcbmltcG9ydCBPcHRpb24gZnJvbSAnLi9PcHRpb24nO1xuaW1wb3J0IE1lbnUgZnJvbSAnLi9NZW51JztcbmltcG9ydCB7IGNyZWF0ZUFyaWFNZXNzYWdlcyB9IGZyb20gJy4vYXJpYU1lc3NhZ2VzJztcbmltcG9ydCBJbnB1dCBmcm9tICcuL0lucHV0JztcblxuY29uc3Qgc3R5bGVzOiBTdHlsZXNDb25maWc8VGFnVHlwZSwgdHJ1ZT4gPSB7XG4gIG1lbnU6ICgpID0+ICh7fSksXG4gIGRyb3Bkb3duSW5kaWNhdG9yOiAoKSA9PiAoe30pLFxuICBwbGFjZWhvbGRlcjogKHByb3ZpZGVkKSA9PiAoe1xuICAgIC4uLnByb3ZpZGVkLFxuICAgIHBhZGRpbmc6IGAwICR7c3BhY2luZy5zbWFsbH1gLFxuICAgIGNvbG9yOiBjb2xvcnMuYnJhbmQucHJpbWFyeSxcbiAgICBtYXJnaW46IDAsXG4gIH0pLFxuICB2YWx1ZUNvbnRhaW5lcjogKHByb3ZpZGVkKSA9PiAoeyAuLi5wcm92aWRlZCwgcGFkZGluZzogMCB9KSxcbiAgaW5kaWNhdG9yU2VwYXJhdG9yOiAoKSA9PiAoe1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSksXG4gIGluZGljYXRvcnNDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBhbGlnblNlbGY6ICdmbGV4LWVuZCcsXG4gIH0pLFxufTtcblxuY29uc3QgU3R5bGVkVGFnU2VsZWN0b3IgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBmbGV4OiAxO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuYDtcblxuaW50ZXJmYWNlIFN0eWxlZExhYmVsUHJvcHMge1xuICBsYWJlbEhpZGRlbj86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsPFN0eWxlZExhYmVsUHJvcHM+YFxuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICAkeyhwKSA9PiBwLmxhYmVsSGlkZGVuICYmIHV0aWxzLmxhYmVsSGlkZGVufVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgbGFiZWw6IHN0cmluZztcbiAgdGFnczogc3RyaW5nW107XG4gIHNlbGVjdGVkOiBzdHJpbmdbXTtcbiAgb25DaGFuZ2U6ICh0YWdzOiBzdHJpbmdbXSkgPT4gdm9pZDtcbiAgb25DcmVhdGVUYWc6IChuYW1lOiBzdHJpbmcpID0+IHZvaWQ7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbiAgbGFiZWxIaWRkZW4/OiBib29sZWFuO1xufVxuXG5jb25zdCBUYWdTZWxlY3RvciA9ICh7IHNlbGVjdGVkOiBfc2VsZWN0ZWQsIHRhZ3M6IF90YWdzLCBvbkNoYW5nZSwgb25DcmVhdGVUYWcsIGNsYXNzTmFtZSwgbGFiZWwgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBbaW5wdXQsIHNldElucHV0XSA9IHVzZVN0YXRlKCcnKTtcbiAgY29uc3QgdGFncyA9IHVzZU1lbW8oKCkgPT4gX3RhZ3MubWFwKCh0YWcpID0+ICh7IHZhbHVlOiB0YWcsIGxhYmVsOiB0YWcgfSkpLCBbX3RhZ3NdKTtcbiAgY29uc3Qgc2VsZWN0ZWQgPSB1c2VNZW1vKCgpID0+IF9zZWxlY3RlZC5tYXAoKHRhZykgPT4gKHsgdmFsdWU6IHRhZywgbGFiZWw6IHRhZyB9KSksIFtfc2VsZWN0ZWRdKTtcblxuICBjb25zdCBoYW5kbGVTcGFjZUNsaWNrID0gKGU6IEtleWJvYXJkRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgaWYgKGUua2V5ID09PSAnICcpIHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGlmICghX3NlbGVjdGVkLmZpbmQoKHRhZykgPT4gdGFnID09PSBpbnB1dCkgJiYgaW5wdXQgIT09ICcnKSB7XG4gICAgICAgIG9uQ2hhbmdlKF9zZWxlY3RlZC5jb25jYXQoaW5wdXQpKTtcbiAgICAgIH1cbiAgICAgIHNldElucHV0KCcnKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gKHRhZ3M6IE11bHRpVmFsdWU8VGFnVHlwZT4pID0+IHtcbiAgICBvbkNoYW5nZSh0YWdzLm1hcCgodGFnKSA9PiB0YWcudmFsdWUpKTtcbiAgfTtcblxuICBjb25zdCBjcmVhdGVMYWJlbCA9ICh0YWc6IHN0cmluZykgPT4gdCgndGFnU2VsZWN0b3IuY3JlYXRlTGFiZWwnLCB7IHRhZyB9KTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRUYWdTZWxlY3RvciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8U3R5bGVkTGFiZWwgbGFiZWxIaWRkZW4gaHRtbEZvcj1cInRhZ3NlbGVjdG9yLWNyZWF0YWJsZVwiIGlkPVwidGFnc2VsZWN0b3ItbGFiZWxcIj5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvU3R5bGVkTGFiZWw+XG4gICAgICApfVxuICAgICAgPENyZWF0YWJsZVNlbGVjdFxuICAgICAgICBpZD1cInRhZ3NlbGVjdG9yLWNyZWF0YWJsZVwiXG4gICAgICAgIGFyaWEtbGFiZWxsZWRieT17bGFiZWwgPyAndGFnc2VsZWN0b3ItbGFiZWwnIDogdW5kZWZpbmVkfVxuICAgICAgICBhcmlhTGl2ZU1lc3NhZ2VzPXtjcmVhdGVBcmlhTWVzc2FnZXModCl9XG4gICAgICAgIGNvbXBvbmVudHM9e3tcbiAgICAgICAgICBEcm9wZG93bkluZGljYXRvcixcbiAgICAgICAgICBNdWx0aVZhbHVlOiBWYWx1ZUJ1dHRvbixcbiAgICAgICAgICBTZWxlY3RDb250YWluZXIsXG4gICAgICAgICAgTWVudUxpc3QsXG4gICAgICAgICAgQ29udHJvbCxcbiAgICAgICAgICBPcHRpb24sXG4gICAgICAgICAgTWVudSxcbiAgICAgICAgICBJbnB1dCxcbiAgICAgICAgfX1cbiAgICAgICAgZm9ybWF0Q3JlYXRlTGFiZWw9e2NyZWF0ZUxhYmVsfVxuICAgICAgICBpbnB1dFZhbHVlPXtpbnB1dH1cbiAgICAgICAgaXNDbGVhcmFibGU9e2ZhbHNlfVxuICAgICAgICBpc011bHRpXG4gICAgICAgIG5vT3B0aW9uc01lc3NhZ2U9eygpID0+IHQoJ3RhZ1NlbGVjdG9yLm5vT3B0aW9ucycpfVxuICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICBvbkNyZWF0ZU9wdGlvbj17b25DcmVhdGVUYWd9XG4gICAgICAgIG9uSW5wdXRDaGFuZ2U9e3NldElucHV0fVxuICAgICAgICBvbktleURvd249e2hhbmRsZVNwYWNlQ2xpY2t9XG4gICAgICAgIG9wdGlvbnM9e3RhZ3N9XG4gICAgICAgIHBsYWNlaG9sZGVyPXt0KCd0YWdTZWxlY3Rvci5wbGFjZWhvbGRlcicpfVxuICAgICAgICBzY3JlZW5SZWFkZXJTdGF0dXM9eyh7IGNvdW50IH0pID0+IHQoJ3RhZ1NlbGVjdG9yLmFyaWEuc2NyZWVuUmVhZGVyU3RhdHVzJywgeyBjb3VudCB9KX1cbiAgICAgICAgc3R5bGVzPXtzdHlsZXN9XG4gICAgICAgIHRhYlNlbGVjdHNWYWx1ZT17ZmFsc2V9XG4gICAgICAgIHZhbHVlPXtzZWxlY3RlZH1cbiAgICAgIC8+XG4gICAgPC9TdHlsZWRUYWdTZWxlY3Rvcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRhZ1NlbGVjdG9yO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledLabel = /*#__PURE__*/(0, _base["default"])("label", process.env.NODE_ENV === "production" ? {
+  target: "eor9swf0"
+} : {
+  target: "eor9swf0",
+  label: "StyledLabel"
+})("font-weight:", _core.fonts.weight.semibold, ";", function (p) {
+  return p.labelHidden && _core.utils.labelHidden;
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ1NlbGVjdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RGtEIiwiZmlsZSI6IlRhZ1NlbGVjdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IEtleWJvYXJkRXZlbnQsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IENyZWF0YWJsZVNlbGVjdCBmcm9tICdyZWFjdC1zZWxlY3QvY3JlYXRhYmxlJztcbmltcG9ydCB7IE11bHRpVmFsdWUsIFN0eWxlc0NvbmZpZyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzLCBzcGFjaW5nLCB1dGlscyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCBWYWx1ZUJ1dHRvbiBmcm9tICcuL1ZhbHVlQnV0dG9uJztcbmltcG9ydCBEcm9wZG93bkluZGljYXRvciBmcm9tICcuL0Ryb3Bkb3duSW5kaWNhdG9yJztcbmltcG9ydCBTZWxlY3RDb250YWluZXIgZnJvbSAnLi9TZWxlY3RDb250YWluZXInO1xuaW1wb3J0IE1lbnVMaXN0IGZyb20gJy4vTWVudUxpc3QnO1xuaW1wb3J0IENvbnRyb2wgZnJvbSAnLi9Db250cm9sJztcbmltcG9ydCBPcHRpb24gZnJvbSAnLi9PcHRpb24nO1xuaW1wb3J0IE1lbnUgZnJvbSAnLi9NZW51JztcbmltcG9ydCB7IGNyZWF0ZUFyaWFNZXNzYWdlcyB9IGZyb20gJy4vYXJpYU1lc3NhZ2VzJztcbmltcG9ydCBJbnB1dCBmcm9tICcuL0lucHV0JztcblxuY29uc3Qgc3R5bGVzOiBTdHlsZXNDb25maWc8VGFnVHlwZSwgdHJ1ZT4gPSB7XG4gIG1lbnU6ICgpID0+ICh7fSksXG4gIGRyb3Bkb3duSW5kaWNhdG9yOiAoKSA9PiAoe30pLFxuICBwbGFjZWhvbGRlcjogKHByb3ZpZGVkKSA9PiAoe1xuICAgIC4uLnByb3ZpZGVkLFxuICAgIHBhZGRpbmc6IGAwICR7c3BhY2luZy5zbWFsbH1gLFxuICAgIGNvbG9yOiBjb2xvcnMuYnJhbmQucHJpbWFyeSxcbiAgICBtYXJnaW46IDAsXG4gIH0pLFxuICB2YWx1ZUNvbnRhaW5lcjogKHByb3ZpZGVkKSA9PiAoeyAuLi5wcm92aWRlZCwgcGFkZGluZzogMCB9KSxcbiAgaW5kaWNhdG9yU2VwYXJhdG9yOiAoKSA9PiAoe1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSksXG4gIGluZGljYXRvcnNDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBhbGlnblNlbGY6ICdmbGV4LWVuZCcsXG4gIH0pLFxufTtcblxuY29uc3QgU3R5bGVkVGFnU2VsZWN0b3IgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBmbGV4OiAxO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuYDtcblxuaW50ZXJmYWNlIFN0eWxlZExhYmVsUHJvcHMge1xuICBsYWJlbEhpZGRlbj86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsPFN0eWxlZExhYmVsUHJvcHM+YFxuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICAkeyhwKSA9PiBwLmxhYmVsSGlkZGVuICYmIHV0aWxzLmxhYmVsSGlkZGVufVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgbGFiZWw6IHN0cmluZztcbiAgdGFnczogc3RyaW5nW107XG4gIHNlbGVjdGVkOiBzdHJpbmdbXTtcbiAgb25DaGFuZ2U6ICh0YWdzOiBzdHJpbmdbXSkgPT4gdm9pZDtcbiAgb25DcmVhdGVUYWc6IChuYW1lOiBzdHJpbmcpID0+IHZvaWQ7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbiAgbGFiZWxIaWRkZW4/OiBib29sZWFuO1xufVxuXG5jb25zdCBUYWdTZWxlY3RvciA9ICh7IHNlbGVjdGVkOiBfc2VsZWN0ZWQsIHRhZ3M6IF90YWdzLCBvbkNoYW5nZSwgb25DcmVhdGVUYWcsIGNsYXNzTmFtZSwgbGFiZWwgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBbaW5wdXQsIHNldElucHV0XSA9IHVzZVN0YXRlKCcnKTtcbiAgY29uc3QgdGFncyA9IHVzZU1lbW8oKCkgPT4gX3RhZ3MubWFwKCh0YWcpID0+ICh7IHZhbHVlOiB0YWcsIGxhYmVsOiB0YWcgfSkpLCBbX3RhZ3NdKTtcbiAgY29uc3Qgc2VsZWN0ZWQgPSB1c2VNZW1vKCgpID0+IF9zZWxlY3RlZC5tYXAoKHRhZykgPT4gKHsgdmFsdWU6IHRhZywgbGFiZWw6IHRhZyB9KSksIFtfc2VsZWN0ZWRdKTtcblxuICBjb25zdCBoYW5kbGVTcGFjZUNsaWNrID0gKGU6IEtleWJvYXJkRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgaWYgKGUua2V5ID09PSAnICcpIHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGlmICghX3NlbGVjdGVkLmZpbmQoKHRhZykgPT4gdGFnID09PSBpbnB1dCkgJiYgaW5wdXQgIT09ICcnKSB7XG4gICAgICAgIG9uQ2hhbmdlKF9zZWxlY3RlZC5jb25jYXQoaW5wdXQpKTtcbiAgICAgIH1cbiAgICAgIHNldElucHV0KCcnKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gKHRhZ3M6IE11bHRpVmFsdWU8VGFnVHlwZT4pID0+IHtcbiAgICBvbkNoYW5nZSh0YWdzLm1hcCgodGFnKSA9PiB0YWcudmFsdWUpKTtcbiAgfTtcblxuICBjb25zdCBjcmVhdGVMYWJlbCA9ICh0YWc6IHN0cmluZykgPT4gdCgndGFnU2VsZWN0b3IuY3JlYXRlTGFiZWwnLCB7IHRhZyB9KTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRUYWdTZWxlY3RvciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8U3R5bGVkTGFiZWwgbGFiZWxIaWRkZW4gaHRtbEZvcj1cInRhZ3NlbGVjdG9yLWNyZWF0YWJsZVwiIGlkPVwidGFnc2VsZWN0b3ItbGFiZWxcIj5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvU3R5bGVkTGFiZWw+XG4gICAgICApfVxuICAgICAgPENyZWF0YWJsZVNlbGVjdFxuICAgICAgICBpZD1cInRhZ3NlbGVjdG9yLWNyZWF0YWJsZVwiXG4gICAgICAgIGFyaWEtbGFiZWxsZWRieT17bGFiZWwgPyAndGFnc2VsZWN0b3ItbGFiZWwnIDogdW5kZWZpbmVkfVxuICAgICAgICBhcmlhTGl2ZU1lc3NhZ2VzPXtjcmVhdGVBcmlhTWVzc2FnZXModCl9XG4gICAgICAgIGNvbXBvbmVudHM9e3tcbiAgICAgICAgICBEcm9wZG93bkluZGljYXRvcixcbiAgICAgICAgICBNdWx0aVZhbHVlOiBWYWx1ZUJ1dHRvbixcbiAgICAgICAgICBTZWxlY3RDb250YWluZXIsXG4gICAgICAgICAgTWVudUxpc3QsXG4gICAgICAgICAgQ29udHJvbCxcbiAgICAgICAgICBPcHRpb24sXG4gICAgICAgICAgTWVudSxcbiAgICAgICAgICBJbnB1dCxcbiAgICAgICAgfX1cbiAgICAgICAgZm9ybWF0Q3JlYXRlTGFiZWw9e2NyZWF0ZUxhYmVsfVxuICAgICAgICBpbnB1dFZhbHVlPXtpbnB1dH1cbiAgICAgICAgaXNDbGVhcmFibGU9e2ZhbHNlfVxuICAgICAgICBpc011bHRpXG4gICAgICAgIG5vT3B0aW9uc01lc3NhZ2U9eygpID0+IHQoJ3RhZ1NlbGVjdG9yLm5vT3B0aW9ucycpfVxuICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICBvbkNyZWF0ZU9wdGlvbj17b25DcmVhdGVUYWd9XG4gICAgICAgIG9uSW5wdXRDaGFuZ2U9e3NldElucHV0fVxuICAgICAgICBvbktleURvd249e2hhbmRsZVNwYWNlQ2xpY2t9XG4gICAgICAgIG9wdGlvbnM9e3RhZ3N9XG4gICAgICAgIHBsYWNlaG9sZGVyPXt0KCd0YWdTZWxlY3Rvci5wbGFjZWhvbGRlcicpfVxuICAgICAgICBzY3JlZW5SZWFkZXJTdGF0dXM9eyh7IGNvdW50IH0pID0+IHQoJ3RhZ1NlbGVjdG9yLmFyaWEuc2NyZWVuUmVhZGVyU3RhdHVzJywgeyBjb3VudCB9KX1cbiAgICAgICAgc3R5bGVzPXtzdHlsZXN9XG4gICAgICAgIHRhYlNlbGVjdHNWYWx1ZT17ZmFsc2V9XG4gICAgICAgIHZhbHVlPXtzZWxlY3RlZH1cbiAgICAgIC8+XG4gICAgPC9TdHlsZWRUYWdTZWxlY3Rvcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRhZ1NlbGVjdG9yO1xuIl19 */"));
 
-var TagSelector = function TagSelector(_ref3) {
-  var label = _ref3.label,
-      tags = _ref3.tags,
-      tagsSelected = _ref3.tagsSelected,
-      onCreateTag = _ref3.onCreateTag,
-      onToggleTag = _ref3.onToggleTag,
-      inline = _ref3.inline,
-      prefix = _ref3.prefix;
+var TagSelector = function TagSelector(_ref) {
+  var _selected = _ref.selected,
+      _tags = _ref.tags,
+      onChange = _ref.onChange,
+      onCreateTag = _ref.onCreateTag,
+      className = _ref.className,
+      label = _ref.label;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
 
   var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      expanded = _useState4[0],
-      setExpanded = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(DEFAULT_DROPDOWN_MAXHEIGHT),
-      _useState6 = _slicedToArray(_useState5, 2),
-      dropdownMaxHeight = _useState6[0],
-      setDropdownMaxHeight = _useState6[1];
-
-  var containerRef = (0, _react.useRef)(null);
-  var inputIdRef = (0, _react.useRef)((0, _util.uuid)());
-  (0, _react.useEffect)(function () {
-    setExpanded(false);
-  }, [tagsSelected]);
-  (0, _react.useEffect)(function () {
-    var setMaxDropdownMaxHeight = function setMaxDropdownMaxHeight() {
-      if (!inline && containerRef.current && typeof window !== 'undefined') {
-        // Calculate distance from bottom of container to bottom of viewport
-        var containerBottom = containerRef.current.getBoundingClientRect().bottom;
-        var viewportBottom = document.documentElement.scrollHeight;
-        var maxDropdownHeight = viewportBottom - containerBottom;
-        setDropdownMaxHeight("".concat(maxDropdownHeight - _core.spacingUnit, "px"));
-      }
-    };
+      input = _useState2[0],
+      setInput = _useState2[1];
+
+  var tags = (0, _react.useMemo)(function () {
+    return _tags.map(function (tag) {
+      return {
+        value: tag,
+        label: tag
+      };
+    });
+  }, [_tags]);
+  var selected = (0, _react.useMemo)(function () {
+    return _selected.map(function (tag) {
+      return {
+        value: tag,
+        label: tag
+      };
+    });
+  }, [_selected]);
+
+  var handleSpaceClick = function handleSpaceClick(e) {
+    if (e.key === ' ') {
+      e.preventDefault();
 
-    if (!inline && typeof window !== 'undefined') {
-      if (expanded) {
-        setMaxDropdownMaxHeight();
-        window.addEventListener('resize', setMaxDropdownMaxHeight);
-      } else {
-        window.removeEventListener('resize', setMaxDropdownMaxHeight);
+      if (!_selected.find(function (tag) {
+        return tag === input;
+      }) && input !== '') {
+        onChange(_selected.concat(input));
       }
+
+      setInput('');
     }
+  };
 
-    return function () {
-      typeof window !== 'undefined' && window.removeEventListener('resize', setMaxDropdownMaxHeight);
-    };
-  }, [expanded, inline]);
-  return (0, _core2.jsx)("div", {
-    ref: containerRef
-  }, (0, _core2.jsx)(StyledLabel, {
-    htmlFor: inputIdRef.current
-  }, label), (0, _core2.jsx)(_SuggestionInput["default"], {
-    onChange: function onChange(e) {
-      var target = e.target;
-      setInputValue(target.value);
-      setExpanded(false);
+  var handleChange = function handleChange(tags) {
+    onChange(tags.map(function (tag) {
+      return tag.value;
+    }));
+  };
+
+  var createLabel = function createLabel(tag) {
+    return t('tagSelector.createLabel', {
+      tag: tag
+    });
+  };
+
+  return (0, _react2.jsx)(StyledTagSelector, {
+    className: className
+  }, label && (0, _react2.jsx)(StyledLabel, {
+    labelHidden: true,
+    htmlFor: "tagselector-creatable",
+    id: "tagselector-label"
+  }, label), (0, _react2.jsx)(_creatable["default"], {
+    id: "tagselector-creatable",
+    "aria-labelledby": label ? 'tagselector-label' : undefined,
+    ariaLiveMessages: (0, _ariaMessages.createAriaMessages)(t),
+    components: {
+      DropdownIndicator: _DropdownIndicator["default"],
+      MultiValue: _ValueButton["default"],
+      SelectContainer: _SelectContainer["default"],
+      MenuList: _MenuList["default"],
+      Control: _Control["default"],
+      Option: _Option["default"],
+      Menu: _Menu["default"],
+      Input: _Input["default"]
+    },
+    formatCreateLabel: createLabel,
+    inputValue: input,
+    isClearable: false,
+    isMulti: true,
+    noOptionsMessage: function noOptionsMessage() {
+      return t('tagSelector.noOptions');
+    },
+    onChange: handleChange,
+    onCreateOption: onCreateTag,
+    onInputChange: setInput,
+    onKeyDown: handleSpaceClick,
+    options: tags,
+    placeholder: t('tagSelector.placeholder'),
+    screenReaderStatus: function screenReaderStatus(_ref2) {
+      var count = _ref2.count;
+      return t('tagSelector.aria.screenReaderStatus', {
+        count: count
+      });
     },
-    suggestions: expanded ? tags : getSuggestions(tags, inputValue),
-    value: inputValue,
-    onCreateTag: onCreateTag,
-    onToggleTag: onToggleTag,
-    setInputValue: setInputValue,
-    addedTags: sortedTags(tags, tagsSelected),
-    expanded: expanded,
-    setExpanded: setExpanded,
-    dropdownMaxHeight: dropdownMaxHeight,
-    inline: inline,
-    scrollAnchorElement: containerRef,
-    prefix: prefix
+    styles: styles,
+    tabSelectsValue: false,
+    value: selected
   }));
 };
 

package/lib/TagSelector/ValueButton.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import React from 'react';
+import { MultiValueProps } from 'react-select';
+import { TagType } from './types';
+interface StyledProps {
+    selected: boolean;
+}
+export declare const StyledValueButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+} & StyledProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ValueButton: ({ innerProps, children, removeProps, isFocused }: MultiValueProps<TagType, true>) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ValueButton;

package/lib/TagSelector/ValueButton.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.StyledValueButton = void 0;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("@ndla/button");
+
+var _core = require("@ndla/core");
+
+var _action = require("@ndla/icons/action");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+var StyledValueButton = /*#__PURE__*/(0, _base["default"])("div", process.env.NODE_ENV === "production" ? {
+  target: "e1m4p4cx0"
+} : {
+  target: "e1m4p4cx0",
+  label: "StyledValueButton"
+})("&&{background:", function (_ref) {
+  var selected = _ref.selected;
+  return selected && _core.colors.brand.primary;
+}, ";color:", function (_ref2) {
+  var selected = _ref2.selected;
+  return selected && _core.colors.white;
+}, ";padding:", _core.spacing.xxsmall, " ", _core.spacing.small, ";margin:", _core.spacing.xxsmall, ";border:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZhbHVlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQndEIiwiZmlsZSI6IlZhbHVlQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IE11bHRpVmFsdWVQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBidXR0b25TdHlsZVYyIGFzIGJ1dHRvblN0eWxlIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgQ3Jvc3MgfSBmcm9tICdAbmRsYS9pY29ucy9hY3Rpb24nO1xuaW1wb3J0IHsgVGFnVHlwZSB9IGZyb20gJy4vdHlwZXMnO1xuXG5pbnRlcmZhY2UgU3R5bGVkUHJvcHMge1xuICBzZWxlY3RlZDogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZhbHVlQnV0dG9uID0gc3R5bGVkLmRpdjxTdHlsZWRQcm9wcz5gXG4gICYmIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHNlbGVjdGVkIH0pID0+IHNlbGVjdGVkICYmIGNvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgICBjb2xvcjogJHsoeyBzZWxlY3RlZCB9KSA9PiBzZWxlY3RlZCAmJiBjb2xvcnMud2hpdGV9O1xuICAgIHBhZGRpbmc6ICR7c3BhY2luZy54eHNtYWxsfSAke3NwYWNpbmcuc21hbGx9O1xuICAgIG1hcmdpbjogJHtzcGFjaW5nLnh4c21hbGx9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgVmFsdWVCdXR0b24gPSAoeyBpbm5lclByb3BzLCBjaGlsZHJlbiwgcmVtb3ZlUHJvcHMsIGlzRm9jdXNlZCB9OiBNdWx0aVZhbHVlUHJvcHM8VGFnVHlwZSwgdHJ1ZT4pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkVmFsdWVCdXR0b25cbiAgICAgIHNlbGVjdGVkPXtpc0ZvY3VzZWR9XG4gICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgIGNzcz17YnV0dG9uU3R5bGUoeyBjb2xvclRoZW1lOiAnbGlnaHRlcicsIHNoYXBlOiAncGlsbCcsIHNpemU6ICdzbWFsbCcgfSl9XG4gICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgIHsuLi5yZW1vdmVQcm9wc30+XG4gICAgICA8c3BhbiBhcmlhLWhpZGRlbj4jPC9zcGFuPlxuICAgICAge2NoaWxkcmVufVxuICAgICAgPENyb3NzIC8+XG4gICAgPC9TdHlsZWRWYWx1ZUJ1dHRvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFZhbHVlQnV0dG9uO1xuIl19 */"));
+exports.StyledValueButton = StyledValueButton;
+
+var ValueButton = function ValueButton(_ref3) {
+  var innerProps = _ref3.innerProps,
+      children = _ref3.children,
+      removeProps = _ref3.removeProps,
+      isFocused = _ref3.isFocused;
+  return (0, _react2.jsx)(StyledValueButton, _extends({
+    selected: isFocused,
+    role: "button",
+    css: (0, _button.buttonStyleV2)({
+      colorTheme: 'lighter',
+      shape: 'pill',
+      size: 'small'
+    })
+  }, innerProps, removeProps), (0, _react2.jsx)("span", {
+    "aria-hidden": true
+  }, "#"), children, (0, _react2.jsx)(_action.Cross, null));
+};
+
+var _default = ValueButton;
+exports["default"] = _default;

package/lib/TagSelector/ariaMessages.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { TFunction } from 'react-i18next';
+import { AriaGuidanceProps, AriaOnChangeProps, AriaOnFilterProps, AriaOnFocusProps, GroupBase } from 'react-select';
+import { TagType } from './types';
+export declare const createAriaMessages: (t: TFunction) => {
+    guidance: (props: AriaGuidanceProps) => string;
+    onChange: (props: AriaOnChangeProps<TagType, true>) => string;
+    onFocus: (props: AriaOnFocusProps<TagType, GroupBase<TagType>>) => string;
+    onFilter: (props: AriaOnFilterProps) => string;
+};

package/lib/TagSelector/ariaMessages.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAriaMessages = void 0;
+
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var createAriaMessages = function createAriaMessages(t) {
+  return {
+    guidance: function guidance(props) {
+      var isSearchable = props.isSearchable,
+          isMulti = props.isMulti,
+          isDisabled = props.isDisabled,
+          tabSelectsValue = props.tabSelectsValue,
+          context = props.context;
+
+      switch (context) {
+        case 'menu':
+          return "".concat(t('tagSelector.aria.guidance.menu.updown')).concat(isDisabled ? '' : ", ".concat(t('tagSelector.aria.guidance.menu.enter')), ", ").concat(t('tagSelector.aria.guidance.menu.escape')).concat(tabSelectsValue ? ", ".concat(t('tagSelector.aria.guidance.menu.tab')) : '', ".");
+
+        case 'input':
+          return "".concat(props['aria-label'] || t('tagSelector.aria.guidance.input.select'), " ").concat(t('tagSelector.aria.guidance.input.focused'), " ").concat(isSearchable ? ", ".concat(t('tagSelector.aria.guidance.input.refine')) : '', ", ").concat(t('tagSelector.aria.guidance.input.down'), ", ").concat(isMulti ? " ".concat(t('tagSelector.aria.guidance.input.left')) : '', ", ").concat(t('tagSelector.aria.guidance.input.space'));
+
+        case 'value':
+          return t('tagSelector.aria.guidance.value');
+
+        default:
+          return '';
+      }
+    },
+    onChange: function onChange(props) {
+      var action = props.action,
+          _props$label = props.label,
+          label = _props$label === void 0 ? '' : _props$label,
+          labels = props.labels,
+          isDisabled = props.isDisabled;
+
+      switch (action) {
+        case 'deselect-option':
+        case 'pop-value':
+        case 'remove-value':
+          return t('tagSelector.aria.onChange.deselect', {
+            label: label
+          });
+
+        case 'clear':
+          return t('tagSelector.aria.onChange.clear');
+
+        case 'initial-input-focus':
+          return t('tagSelector.aria.onChange.initialFocus', {
+            labels: labels.join(',')
+          });
+
+        case 'select-option':
+          return isDisabled ? t('tagSelector.aria.onChange.selectedDisabled', {
+            label: label
+          }) : t('tagSelector.aria.onChange.selected', {
+            label: label
+          });
+
+        default:
+          return '';
+      }
+    },
+    onFocus: function onFocus(props) {
+      var context = props.context,
+          focused = props.focused,
+          options = props.options,
+          _props$label2 = props.label,
+          label = _props$label2 === void 0 ? '' : _props$label2,
+          selectValue = props.selectValue,
+          isDisabled = props.isDisabled,
+          isSelected = props.isSelected;
+
+      var getArrayIndex = function getArrayIndex(arr, item) {
+        return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " ").concat(t('tagSelector.aria.onFocus.of'), " ").concat(arr.length) : '';
+      };
+
+      if (context === 'value' && selectValue) {
+        return t('tagSelector.aria.onFocus.value', {
+          label: label,
+          position: getArrayIndex(selectValue, focused)
+        });
+      }
+
+      if (context === 'menu') {
+        var disabled = isDisabled ? " ".concat(t('tagSelector.aria.disabled')) : '';
+        var status = "".concat(isSelected ? t('tagSelector.aria.selected') : t('tagSelector.aria.focused')).concat(disabled);
+        return t('tagSelector.aria.onFocus.menu', {
+          label: label,
+          status: status,
+          position: getArrayIndex(options, focused)
+        });
+      }
+
+      return '';
+    },
+    onFilter: function onFilter(props) {
+      var inputValue = props.inputValue,
+          resultsMessage = props.resultsMessage;
+      return "".concat(resultsMessage).concat(inputValue ? " ".concat(t('tagSelector.aria.onFilter'), " ") + inputValue : '', ".");
+    }
+  };
+};
+
+exports.createAriaMessages = createAriaMessages;

package/lib/TagSelector/index.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import TagSelector, { TagType } from './TagSelector';
+import TagSelector from './TagSelector';
+import { TagType } from './types';
 export type { TagType };
 export { TagSelector };

package/lib/TagSelector/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,8 +10,8 @@ Object.defineProperty(exports, "TagSelector", {
   }
 });
 
-var _TagSelector = _interopRequireWildcard(require("./TagSelector"));
+var _TagSelector = _interopRequireDefault(require("./TagSelector"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _types = require("./types");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/TagSelector/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export interface TagType {
+    readonly value: string;
+    readonly label: string;
+}

package/lib/TagSelector/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/ToolboxPage/ToolboxInfo.d.ts

@@ -14,5 +14,5 @@ declare type Props = {
     topics: ItemProps[];
     onSelectTopic?: (event: MouseEvent<HTMLElement>, id?: string) => void;
 };
-declare const _default: React.ComponentType<Pick<Pick<Props & WithTranslation<"translation">, "title" | "t" | "tReady" | "introduction" | "topics" | "onSelectTopic">, "title" | "introduction" | "topics" | "onSelectTopic"> & import("react-i18next").WithTranslationProps>;
+declare const _default: React.ComponentType<Pick<Pick<Props & WithTranslation<"translation", undefined>, "title" | "t" | "tReady" | "introduction" | "topics" | "onSelectTopic">, "title" | "introduction" | "topics" | "onSelectTopic"> & import("react-i18next").WithTranslationProps>;
 export default _default;