@ndla/ui 28.0.0 → 30.0.0

package/es/TagSelector/TagSelector.js

@@ -1,4 +1,4 @@
-import _styled from "@emotion/styled-base";
+import _styled from "@emotion/styled/base";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -12,126 +12,191 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-/*
+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; }
+
+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; }
+
+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; }
+
+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)."; }
+
+/**
  * 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, { useState, useRef, useEffect } from 'react';
-import { spacingUnit, fonts } from '@ndla/core';
-import { uuid } from '@ndla/util';
-import SuggestionInput from './SuggestionInput';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-var DEFAULT_DROPDOWN_MAXHEIGHT = '240px';
-
-var StyledLabel = _styled("label", {
-  target: "eor9swf0",
-  label: "StyledLabel"
-})("font-weight:", fonts.weight.semibold, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ1NlbGVjdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQmdDIiwiZmlsZSI6IlRhZ1NlbGVjdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgdXNlU3RhdGUsIHVzZVJlZiwgdXNlRWZmZWN0LCBDaGFuZ2VFdmVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHNwYWNpbmdVbml0LCBmb250cyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXVpZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuaW1wb3J0IFN1Z2dlc3Rpb25JbnB1dCBmcm9tICcuL1N1Z2dlc3Rpb25JbnB1dCc7XG5cbmNvbnN0IERFRkFVTFRfRFJPUERPV05fTUFYSEVJR0hUID0gJzI0MHB4JztcblxuY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWxgXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG5gO1xuXG5leHBvcnQgaW50ZXJmYWNlIFRhZ1R5cGUge1xuICBuYW1lOiBzdHJpbmc7XG4gIGlkOiBzdHJpbmc7XG59XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIHRhZ3M6IFRhZ1R5cGVbXTtcbiAgdGFnc1NlbGVjdGVkOiBzdHJpbmdbXTtcbiAgb25Ub2dnbGVUYWc6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkNyZWF0ZVRhZzogKHRhZ05hbWU6IHN0cmluZykgPT4gdm9pZDtcbiAgaW5saW5lPzogYm9vbGVhbjtcbiAgcHJlZml4Pzogc3RyaW5nO1xufVxuXG5jb25zdCBzb3J0ZWRUYWdzID0gKHRhZ3M6IFRhZ1R5cGVbXSwgc2VsZWN0ZWRUYWdzOiBzdHJpbmdbXSk6IFRhZ1R5cGVbXSA9PiB7XG4gIGNvbnN0IHJldHVyblRhZ3MgPSBzZWxlY3RlZFRhZ3NcbiAgICAubWFwKChzZWxlY3RlZElkKSA9PiB0YWdzLmZpbmQoKHsgaWQgfSkgPT4gc2VsZWN0ZWRJZCA9PT0gaWQpKVxuICAgIC5maWx0ZXIoKG5vdFVuZGVmaW5lZCkgPT4gbm90VW5kZWZpbmVkKSBhcyB1bmtub3duIGFzIFRhZ1R5cGVbXTtcbiAgcmV0dXJuIHJldHVyblRhZ3M7XG59O1xuXG5jb25zdCBnZXRTdWdnZXN0aW9ucyA9ICh0YWdzOiBUYWdUeXBlW10sIGlucHV0VmFsdWU6IHN0cmluZyk6IFRhZ1R5cGVbXSA9PiB7XG4gIGlmIChpbnB1dFZhbHVlID09PSAnJykge1xuICAgIHJldHVybiBbXTtcbiAgfVxuICBjb25zdCBpbnB1dExvd2VyY2FzZSA9IGlucHV0VmFsdWUudG9Mb3dlckNhc2UoKTtcbiAgcmV0dXJuIHRhZ3NcbiAgICAuZmlsdGVyKCh7IG5hbWUgfSkgPT4gbmFtZS50b0xvd2VyQ2FzZSgpLnN0YXJ0c1dpdGgoaW5wdXRMb3dlcmNhc2UpKVxuICAgIC5zb3J0KChhLCBiKSA9PiBhLm5hbWUubG9jYWxlQ29tcGFyZShiLm5hbWUsICduYicpKTtcbn07XG5cbmNvbnN0IFRhZ1NlbGVjdG9yID0gKHsgbGFiZWwsIHRhZ3MsIHRhZ3NTZWxlY3RlZCwgb25DcmVhdGVUYWcsIG9uVG9nZ2xlVGFnLCBpbmxpbmUsIHByZWZpeCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbaW5wdXRWYWx1ZSwgc2V0SW5wdXRWYWx1ZV0gPSB1c2VTdGF0ZSgnJyk7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCBbZHJvcGRvd25NYXhIZWlnaHQsIHNldERyb3Bkb3duTWF4SGVpZ2h0XSA9IHVzZVN0YXRlKERFRkFVTFRfRFJPUERPV05fTUFYSEVJR0hUKTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcbiAgY29uc3QgaW5wdXRJZFJlZiA9IHVzZVJlZjxzdHJpbmc+KHV1aWQoKSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBzZXRFeHBhbmRlZChmYWxzZSk7XG4gIH0sIFt0YWdzU2VsZWN0ZWRdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IHNldE1heERyb3Bkb3duTWF4SGVpZ2h0ID0gKCkgPT4ge1xuICAgICAgaWYgKCFpbmxpbmUgJiYgY29udGFpbmVyUmVmLmN1cnJlbnQgJiYgdHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgICAgLy8gQ2FsY3VsYXRlIGRpc3RhbmNlIGZyb20gYm90dG9tIG9mIGNvbnRhaW5lciB0byBib3R0b20gb2Ygdmlld3BvcnRcbiAgICAgICAgY29uc3QgY29udGFpbmVyQm90dG9tID0gY29udGFpbmVyUmVmLmN1cnJlbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkuYm90dG9tO1xuICAgICAgICBjb25zdCB2aWV3cG9ydEJvdHRvbSA9IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zY3JvbGxIZWlnaHQ7XG4gICAgICAgIGNvbnN0IG1heERyb3Bkb3duSGVpZ2h0ID0gdmlld3BvcnRCb3R0b20gLSBjb250YWluZXJCb3R0b207XG4gICAgICAgIHNldERyb3Bkb3duTWF4SGVpZ2h0KGAke21heERyb3Bkb3duSGVpZ2h0IC0gc3BhY2luZ1VuaXR9cHhgKTtcbiAgICAgIH1cbiAgICB9O1xuICAgIGlmICghaW5saW5lICYmIHR5cGVvZiB3aW5kb3cgIT09ICd1bmRlZmluZWQnKSB7XG4gICAgICBpZiAoZXhwYW5kZWQpIHtcbiAgICAgICAgc2V0TWF4RHJvcGRvd25NYXhIZWlnaHQoKTtcbiAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHNldE1heERyb3Bkb3duTWF4SGVpZ2h0KTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdyZXNpemUnLCBzZXRNYXhEcm9wZG93bk1heEhlaWdodCk7XG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICB0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJyAmJiB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcigncmVzaXplJywgc2V0TWF4RHJvcGRvd25NYXhIZWlnaHQpO1xuICAgIH07XG4gIH0sIFtleHBhbmRlZCwgaW5saW5lXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IHJlZj17Y29udGFpbmVyUmVmfT5cbiAgICAgIDxTdHlsZWRMYWJlbCBodG1sRm9yPXtpbnB1dElkUmVmLmN1cnJlbnR9PntsYWJlbH08L1N0eWxlZExhYmVsPlxuICAgICAgPFN1Z2dlc3Rpb25JbnB1dFxuICAgICAgICBvbkNoYW5nZT17KGU6IENoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgICAgICBzZXRJbnB1dFZhbHVlKHRhcmdldC52YWx1ZSk7XG4gICAgICAgICAgc2V0RXhwYW5kZWQoZmFsc2UpO1xuICAgICAgICB9fVxuICAgICAgICBzdWdnZXN0aW9ucz17ZXhwYW5kZWQgPyB0YWdzIDogZ2V0U3VnZ2VzdGlvbnModGFncywgaW5wdXRWYWx1ZSl9XG4gICAgICAgIHZhbHVlPXtpbnB1dFZhbHVlfVxuICAgICAgICBvbkNyZWF0ZVRhZz17b25DcmVhdGVUYWd9XG4gICAgICAgIG9uVG9nZ2xlVGFnPXtvblRvZ2dsZVRhZ31cbiAgICAgICAgc2V0SW5wdXRWYWx1ZT17c2V0SW5wdXRWYWx1ZX1cbiAgICAgICAgYWRkZWRUYWdzPXtzb3J0ZWRUYWdzKHRhZ3MsIHRhZ3NTZWxlY3RlZCl9XG4gICAgICAgIGV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgc2V0RXhwYW5kZWQ9e3NldEV4cGFuZGVkfVxuICAgICAgICBkcm9wZG93bk1heEhlaWdodD17ZHJvcGRvd25NYXhIZWlnaHR9XG4gICAgICAgIGlubGluZT17aW5saW5lfVxuICAgICAgICBzY3JvbGxBbmNob3JFbGVtZW50PXtjb250YWluZXJSZWZ9XG4gICAgICAgIHByZWZpeD17cHJlZml4fVxuICAgICAgLz5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRhZ1NlbGVjdG9yO1xuIl19 */"));
-
-var sortedTags = function sortedTags(tags, selectedTags) {
-  var returnTags = selectedTags.map(function (selectedId) {
-    return tags.find(function (_ref) {
-      var id = _ref.id;
-      return selectedId === id;
+import React, { useMemo, useState } from 'react';
+import CreatableSelect from 'react-select/creatable';
+import { colors, fonts, spacing, utils } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
+import ValueButton from './ValueButton';
+import DropdownIndicator from './DropdownIndicator';
+import SelectContainer from './SelectContainer';
+import MenuList from './MenuList';
+import Control from './Control';
+import Option from './Option';
+import Menu from './Menu';
+import { createAriaMessages } from './ariaMessages';
+import Input from './Input';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var styles = {
+  menu: function menu() {
+    return {};
+  },
+  dropdownIndicator: function dropdownIndicator() {
+    return {};
+  },
+  placeholder: function placeholder(provided) {
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      padding: "0 ".concat(spacing.small),
+      color: colors.brand.primary,
+      margin: 0
     });
-  }).filter(function (notUndefined) {
-    return notUndefined;
-  });
-  return returnTags;
+  },
+  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 getSuggestions = function getSuggestions(tags, inputValue) {
-  if (inputValue === '') {
-    return [];
-  }
+var StyledTagSelector = /*#__PURE__*/_styled("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__*/_styled("label", process.env.NODE_ENV === "production" ? {
+  target: "eor9swf0"
+} : {
+  target: "eor9swf0",
+  label: "StyledLabel"
+})("font-weight:", fonts.weight.semibold, ";", function (p) {
+  return p.labelHidden && 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 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');
-  });
-};
+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 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 _useTranslation = useTranslation(),
+      t = _useTranslation.t;
 
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      expanded = _useState4[0],
-      setExpanded = _useState4[1];
-
-  var _useState5 = useState(DEFAULT_DROPDOWN_MAXHEIGHT),
-      _useState6 = _slicedToArray(_useState5, 2),
-      dropdownMaxHeight = _useState6[0],
-      setDropdownMaxHeight = _useState6[1];
-
-  var containerRef = useRef(null);
-  var inputIdRef = useRef(uuid());
-  useEffect(function () {
-    setExpanded(false);
-  }, [tagsSelected]);
-  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 - spacingUnit, "px"));
-      }
-    };
+      input = _useState2[0],
+      setInput = _useState2[1];
+
+  var tags = useMemo(function () {
+    return _tags.map(function (tag) {
+      return {
+        value: tag,
+        label: tag
+      };
+    });
+  }, [_tags]);
+  var selected = 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 ___EmotionJSX("div", {
-    ref: containerRef
-  }, ___EmotionJSX(StyledLabel, {
-    htmlFor: inputIdRef.current
-  }, label), ___EmotionJSX(SuggestionInput, {
-    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 ___EmotionJSX(StyledTagSelector, {
+    className: className
+  }, label && ___EmotionJSX(StyledLabel, {
+    labelHidden: true,
+    htmlFor: "tagselector-creatable",
+    id: "tagselector-label"
+  }, label), ___EmotionJSX(CreatableSelect, {
+    id: "tagselector-creatable",
+    "aria-labelledby": label ? 'tagselector-label' : undefined,
+    ariaLiveMessages: createAriaMessages(t),
+    components: {
+      DropdownIndicator: DropdownIndicator,
+      MultiValue: ValueButton,
+      SelectContainer: SelectContainer,
+      MenuList: MenuList,
+      Control: Control,
+      Option: Option,
+      Menu: Menu,
+      Input: Input
+    },
+    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/es/TagSelector/ValueButton.js

@@ -0,0 +1,48 @@
+import _styled from "@emotion/styled/base";
+
+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); }
+
+/**
+ * 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 { buttonStyleV2 as buttonStyle } from '@ndla/button';
+import { colors, spacing } from '@ndla/core';
+import { Cross } from '@ndla/icons/action';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var StyledValueButton = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1m4p4cx0"
+} : {
+  target: "e1m4p4cx0",
+  label: "StyledValueButton"
+})("&&{background:", function (_ref) {
+  var selected = _ref.selected;
+  return selected && colors.brand.primary;
+}, ";color:", function (_ref2) {
+  var selected = _ref2.selected;
+  return selected && colors.white;
+}, ";padding:", spacing.xxsmall, " ", spacing.small, ";margin:", spacing.xxsmall, ";border:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZhbHVlQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQndEIiwiZmlsZSI6IlZhbHVlQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IE11bHRpVmFsdWVQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBidXR0b25TdHlsZVYyIGFzIGJ1dHRvblN0eWxlIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgQ3Jvc3MgfSBmcm9tICdAbmRsYS9pY29ucy9hY3Rpb24nO1xuaW1wb3J0IHsgVGFnVHlwZSB9IGZyb20gJy4vdHlwZXMnO1xuXG5pbnRlcmZhY2UgU3R5bGVkUHJvcHMge1xuICBzZWxlY3RlZDogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZhbHVlQnV0dG9uID0gc3R5bGVkLmRpdjxTdHlsZWRQcm9wcz5gXG4gICYmIHtcbiAgICBiYWNrZ3JvdW5kOiAkeyh7IHNlbGVjdGVkIH0pID0+IHNlbGVjdGVkICYmIGNvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgICBjb2xvcjogJHsoeyBzZWxlY3RlZCB9KSA9PiBzZWxlY3RlZCAmJiBjb2xvcnMud2hpdGV9O1xuICAgIHBhZGRpbmc6ICR7c3BhY2luZy54eHNtYWxsfSAke3NwYWNpbmcuc21hbGx9O1xuICAgIG1hcmdpbjogJHtzcGFjaW5nLnh4c21hbGx9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgVmFsdWVCdXR0b24gPSAoeyBpbm5lclByb3BzLCBjaGlsZHJlbiwgcmVtb3ZlUHJvcHMsIGlzRm9jdXNlZCB9OiBNdWx0aVZhbHVlUHJvcHM8VGFnVHlwZSwgdHJ1ZT4pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkVmFsdWVCdXR0b25cbiAgICAgIHNlbGVjdGVkPXtpc0ZvY3VzZWR9XG4gICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgIGNzcz17YnV0dG9uU3R5bGUoeyBjb2xvclRoZW1lOiAnbGlnaHRlcicsIHNoYXBlOiAncGlsbCcsIHNpemU6ICdzbWFsbCcgfSl9XG4gICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgIHsuLi5yZW1vdmVQcm9wc30+XG4gICAgICA8c3BhbiBhcmlhLWhpZGRlbj4jPC9zcGFuPlxuICAgICAge2NoaWxkcmVufVxuICAgICAgPENyb3NzIC8+XG4gICAgPC9TdHlsZWRWYWx1ZUJ1dHRvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFZhbHVlQnV0dG9uO1xuIl19 */"));
+
+var ValueButton = function ValueButton(_ref3) {
+  var innerProps = _ref3.innerProps,
+      children = _ref3.children,
+      removeProps = _ref3.removeProps,
+      isFocused = _ref3.isFocused;
+  return ___EmotionJSX(StyledValueButton, _extends({
+    selected: isFocused,
+    role: "button",
+    css: buttonStyle({
+      colorTheme: 'lighter',
+      shape: 'pill',
+      size: 'small'
+    })
+  }, innerProps, removeProps), ___EmotionJSX("span", {
+    "aria-hidden": true
+  }, "#"), children, ___EmotionJSX(Cross, null));
+};
+
+export default ValueButton;

package/es/TagSelector/ariaMessages.js

@@ -0,0 +1,104 @@
+/**
+ * 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 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 : '', ".");
+    }
+  };
+};

package/es/TagSelector/index.js

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

package/es/ToolboxPage/ToolboxInfo.js

@@ -1,4 +1,4 @@
-import _styled from "@emotion/styled-base";
+import _styled from "@emotion/styled/base";
 
 /**
  * Copyright (c) 2021-present, NDLA.
@@ -11,10 +11,12 @@ import React from 'react';
 import { breakpoints, fonts, mq } from '@ndla/core';
 import { withTranslation } from 'react-i18next';
 import { NavigationBox } from '../Navigation';
-import { jsx as ___EmotionJSX } from "@emotion/core";
+import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var Heading = _styled("h1", {
-  target: "e1iamp440",
+var Heading = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? {
+  target: "e1iamp441"
+} : {
+  target: "e1iamp441",
   label: "Heading"
 })(fonts.sizes('30px', '35px'), ";", mq.range({
   from: breakpoints.tablet
@@ -22,8 +24,10 @@ var Heading = _styled("h1", {
   from: breakpoints.desktop
 }), "{", fonts.sizes('52px', '65px'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvb2xib3hJbmZvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFleUIiLCJmaWxlIjoiVG9vbGJveEluZm8udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgTW91c2VFdmVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBmb250cywgbXEgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IFdpdGhUcmFuc2xhdGlvbiwgd2l0aFRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBJdGVtUHJvcHMgfSBmcm9tICcuLi9OYXZpZ2F0aW9uL05hdmlnYXRpb25Cb3gnO1xuaW1wb3J0IHsgTmF2aWdhdGlvbkJveCB9IGZyb20gJy4uL05hdmlnYXRpb24nO1xuXG5jb25zdCBIZWFkaW5nID0gc3R5bGVkLmgxYFxuICAke2ZvbnRzLnNpemVzKCczMHB4JywgJzM1cHgnKX07XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgICR7Zm9udHMuc2l6ZXMoJzM2cHgnLCAnNDZweCcpfTtcbiAgfVxuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgJHtmb250cy5zaXplcygnNTJweCcsICc2NXB4Jyl9O1xuICB9XG5gO1xuXG5jb25zdCBJbnRyb2R1Y3Rpb24gPSBzdHlsZWQucGBcbiAgbWF4LXdpZHRoOiA4MDBweDtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmxpZ2h0fTtcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyOHB4Jyl9O1xuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICAke2ZvbnRzLnNpemVzKCcyMnB4JywgJzMycHgnKX07XG4gIH1cblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgICR7Zm9udHMuc2l6ZXMoJzI2cHgnLCAnMzZweCcpfTtcbiAgfVxuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgdGl0bGU6IHN0cmluZztcbiAgaW50cm9kdWN0aW9uOiBzdHJpbmc7XG4gIHRvcGljczogSXRlbVByb3BzW107XG4gIG9uU2VsZWN0VG9waWM/OiAoZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEVsZW1lbnQ+LCBpZD86IHN0cmluZykgPT4gdm9pZDtcbn07XG5cbmNvbnN0IFRvb2xib3hJbmZvID0gKHsgdGl0bGUsIGludHJvZHVjdGlvbiwgdG9waWNzLCBvblNlbGVjdFRvcGljLCB0IH06IFByb3BzICYgV2l0aFRyYW5zbGF0aW9uKSA9PiAoXG4gIDw+XG4gICAgPEhlYWRpbmc+e3RpdGxlfTwvSGVhZGluZz5cbiAgICA8SW50cm9kdWN0aW9uPntpbnRyb2R1Y3Rpb259PC9JbnRyb2R1Y3Rpb24+XG4gICAgPE5hdmlnYXRpb25Cb3hcbiAgICAgIGl0ZW1zPXt0b3BpY3N9XG4gICAgICBsaXN0RGlyZWN0aW9uPVwiZmxvYXRpbmdcIlxuICAgICAgaGVhZGluZz17dCgndG9waWNQYWdlLnRvcGljcycpfVxuICAgICAgY29sb3JNb2RlPVwiZ3JleUxpZ2h0ZXJcIlxuICAgICAgb25DbGljaz17b25TZWxlY3RUb3BpY31cbiAgICAvPlxuICA8Lz5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IHdpdGhUcmFuc2xhdGlvbigpKFRvb2xib3hJbmZvKTtcbiJdfQ== */"));
 
-var Introduction = _styled("p", {
-  target: "e1iamp441",
+var Introduction = /*#__PURE__*/_styled("p", process.env.NODE_ENV === "production" ? {
+  target: "e1iamp440"
+} : {
+  target: "e1iamp440",
   label: "Introduction"
 })("max-width:800px;font-weight:", fonts.weight.light, ";", fonts.sizes('18px', '28px'), ";", mq.range({
   from: breakpoints.tablet

package/es/Topic/Loader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ContentLoader from '../ContentLoader';
-import { jsx as ___EmotionJSX } from "@emotion/core";
+import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var Loader = function Loader() {
   return ___EmotionJSX(ContentLoader, {