@ndla/ui 27.1.7 → 29.0.0

package/es/TagSelector/DropdownIndicator.js

@@ -0,0 +1,66 @@
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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 { ChevronDown, ChevronUp } from '@ndla/icons/common';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { components } from 'react-select';
+import { iconButtonStyle } from '@ndla/button';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var StyledIconWrapper = _styled("span", {
+  target: "eerusii0",
+  label: "StyledIconWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "qy2yus",
+  styles: "svg{pointer-events:none;}"
+} : {
+  name: "qy2yus",
+  styles: "svg{pointer-events:none;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRyb3Bkb3duSW5kaWNhdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQnFDIiwiZmlsZSI6IkRyb3Bkb3duSW5kaWNhdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ2hldnJvbkRvd24sIENoZXZyb25VcCB9IGZyb20gJ0BuZGxhL2ljb25zL2NvbW1vbic7XG5pbXBvcnQgUmVhY3QsIHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBEcm9wZG93bkluZGljYXRvclByb3BzLCBjb21wb25lbnRzIH0gZnJvbSAncmVhY3Qtc2VsZWN0JztcbmltcG9ydCB7IGljb25CdXR0b25TdHlsZSB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBUYWdUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IFN0eWxlZEljb25XcmFwcGVyID0gc3R5bGVkLnNwYW5gXG4gIHN2ZyB7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IERyb3Bkb3duSW5kaWNhdG9yID0gKHsgc2VsZWN0UHJvcHMsIGNoaWxkcmVuLCAuLi5wcm9wcyB9OiBEcm9wZG93bkluZGljYXRvclByb3BzPFRhZ1R5cGUsIHRydWU+KSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCB7IG1lbnVJc09wZW4gfSA9IHNlbGVjdFByb3BzO1xuICBjb25zdCBJY29uID0gbWVudUlzT3BlbiA/IENoZXZyb25VcCA6IENoZXZyb25Eb3duO1xuXG4gIGNvbnN0IGNzcyA9IHVzZU1lbW8oXG4gICAgKCkgPT4gaWNvbkJ1dHRvblN0eWxlKHsgY29sb3JUaGVtZTogJ2dyZXlMaWdodGVyJywgdmFyaWFudDogJ2dob3N0Jywgc2hhcGU6ICdwaWxsJywgc2l6ZTogJ3NtYWxsJyB9KSxcbiAgICBbXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxjb21wb25lbnRzLkRyb3Bkb3duSW5kaWNhdG9yXG4gICAgICBjc3M9e2Nzc31cbiAgICAgIHsuLi5wcm9wc31cbiAgICAgIHNlbGVjdFByb3BzPXtzZWxlY3RQcm9wc31cbiAgICAgIGFyaWEtbGFiZWw9e21lbnVJc09wZW4gPyB0KCd0YWdTZWxlY3Rvci5oaWRlVGFncycpIDogdCgndGFnU2VsZWN0b3Iuc2hvd1RhZ3MnKX0+XG4gICAgICA8U3R5bGVkSWNvbldyYXBwZXIgYXJpYS1oaWRkZW4+XG4gICAgICAgIDxJY29uIC8+XG4gICAgICA8L1N0eWxlZEljb25XcmFwcGVyPlxuICAgIDwvY29tcG9uZW50cy5Ecm9wZG93bkluZGljYXRvcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IERyb3Bkb3duSW5kaWNhdG9yO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var DropdownIndicator = function DropdownIndicator(_ref) {
+  var selectProps = _ref.selectProps,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["selectProps", "children"]);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var menuIsOpen = selectProps.menuIsOpen;
+  var Icon = menuIsOpen ? ChevronUp : ChevronDown;
+  var css = useMemo(function () {
+    return iconButtonStyle({
+      colorTheme: 'greyLighter',
+      variant: 'ghost',
+      shape: 'pill',
+      size: 'small'
+    });
+  }, []);
+  return ___EmotionJSX(components.DropdownIndicator, _extends({
+    css: css
+  }, props, {
+    selectProps: selectProps,
+    "aria-label": menuIsOpen ? t('tagSelector.hideTags') : t('tagSelector.showTags')
+  }), ___EmotionJSX(StyledIconWrapper, {
+    "aria-hidden": true
+  }, ___EmotionJSX(Icon, null)));
+};
+
+export default DropdownIndicator;

package/es/TagSelector/Input.js

@@ -0,0 +1,19 @@
+import _css from "@emotion/css";
+
+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); }
+
+import { colors, spacing } from '@ndla/core';
+import React from 'react';
+import { components } from 'react-select';
+import { StyledValueButton } from './ValueButton';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var inputStyle = /*#__PURE__*/_css("&&{padding:0 ", spacing.small, ";color:", colors.brand.primary, ";margin:0;", StyledValueButton, " + &{padding-left:", spacing.xxsmall, ";}};label:inputStyle;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlc0IiLCJmaWxlIjoiSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcyc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjb21wb25lbnRzLCBJbnB1dFByb3BzIH0gZnJvbSAncmVhY3Qtc2VsZWN0JztcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCB7IFN0eWxlZFZhbHVlQnV0dG9uIH0gZnJvbSAnLi9WYWx1ZUJ1dHRvbic7XG5cbmNvbnN0IGlucHV0U3R5bGUgPSBjc3NgXG4gICYmIHtcbiAgICBwYWRkaW5nOiAwICR7c3BhY2luZy5zbWFsbH07XG4gICAgY29sb3I6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICAgIG1hcmdpbjogMDtcbiAgICAke1N0eWxlZFZhbHVlQnV0dG9ufSArICYge1xuICAgICAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcueHhzbWFsbH07XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBJbnB1dCA9IChwcm9wczogSW5wdXRQcm9wczxUYWdUeXBlLCB0cnVlPikgPT4ge1xuICByZXR1cm4gPGNvbXBvbmVudHMuSW5wdXQgY3NzPXtpbnB1dFN0eWxlfSB7Li4ucHJvcHN9IC8+O1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSW5wdXQ7XG4iXX0= */"));
+
+var Input = function Input(props) {
+  return ___EmotionJSX(components.Input, _extends({
+    css: inputStyle
+  }, props));
+};
+
+export default Input;

package/es/TagSelector/Menu.js

@@ -0,0 +1,26 @@
+import _css from "@emotion/css";
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import { colors } from '@ndla/core';
+import React from 'react';
+import { components } from 'react-select';
+import { StyledMenuList } from './MenuList';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var menuStyle = /*#__PURE__*/_css("display:flex;position:relative;flex-direction:column;margin:0;overflow:hidden;border-top:1px solid ", colors.brand.tertiary, ";min-height:70px;:has(", StyledMenuList, ">*:only-child){min-height:40px;};label:menuStyle;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVxQiIsImZpbGUiOiJNZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnO1xuaW1wb3J0IHsgY29sb3JzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgTWVudVByb3BzLCBjb21wb25lbnRzIH0gZnJvbSAncmVhY3Qtc2VsZWN0JztcbmltcG9ydCB7IFN0eWxlZE1lbnVMaXN0IH0gZnJvbSAnLi9NZW51TGlzdCc7XG5pbXBvcnQgeyBUYWdUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IG1lbnVTdHlsZSA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBtYXJnaW46IDA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC50ZXJ0aWFyeX07XG4gIG1pbi1oZWlnaHQ6IDcwcHg7XG5cbiAgOmhhcygke1N0eWxlZE1lbnVMaXN0fT4qOm9ubHktY2hpbGQpIHtcbiAgICBtaW4taGVpZ2h0OiA0MHB4O1xuICB9XG5gO1xuXG5jb25zdCBNZW51ID0gKHsgY2hpbGRyZW4sIC4uLnByb3BzIH06IE1lbnVQcm9wczxUYWdUeXBlLCB0cnVlPikgPT4ge1xuICByZXR1cm4gKFxuICAgIDxjb21wb25lbnRzLk1lbnUgY3NzPXttZW51U3R5bGV9IHsuLi5wcm9wc30+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9jb21wb25lbnRzLk1lbnU+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBNZW51O1xuIl19 */"));
+
+var Menu = function Menu(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["children"]);
+
+  return ___EmotionJSX(components.Menu, _extends({
+    css: menuStyle
+  }, props), children);
+};
+
+export default Menu;

package/es/TagSelector/MenuList.js

@@ -0,0 +1,22 @@
+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); }
+
+import { utils } from '@ndla/core';
+import React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+export var StyledMenuList = _styled("div", {
+  target: "e1e7c4ob0",
+  label: "StyledMenuList"
+})("overflow:overlay;", utils.scrollbar, " display:flex;flex-direction:column;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lbnVMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjd0MiLCJmaWxlIjoiTWVudUxpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1dGlscyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IE1lbnVMaXN0UHJvcHMgfSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuaW1wb3J0IHsgVGFnVHlwZSB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTWVudUxpc3QgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdzogb3ZlcmxheTtcbiAgJHt1dGlscy5zY3JvbGxiYXJ9XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG5gO1xuXG5jb25zdCBNZW51TGlzdCA9ICh7IGlubmVyUHJvcHMsIGlubmVyUmVmLCBjaGlsZHJlbiB9OiBNZW51TGlzdFByb3BzPFRhZ1R5cGUsIHRydWU+KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZE1lbnVMaXN0IHJlZj17aW5uZXJSZWZ9IHsuLi5pbm5lclByb3BzfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1N0eWxlZE1lbnVMaXN0PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTWVudUxpc3Q7XG4iXX0= */"));
+
+var MenuList = function MenuList(_ref) {
+  var innerProps = _ref.innerProps,
+      innerRef = _ref.innerRef,
+      children = _ref.children;
+  return ___EmotionJSX(StyledMenuList, _extends({
+    ref: innerRef
+  }, innerProps), children);
+};
+
+export default MenuList;

package/es/TagSelector/Option.js

@@ -0,0 +1,55 @@
+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, fonts } from '@ndla/core';
+import { Done } from '@ndla/icons/editor';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var StyledMenuOption = _styled("div", {
+  target: "ec486650",
+  label: "StyledMenuOption"
+})("&&{background:", function (_ref) {
+  var focused = _ref.focused;
+  return focused && colors.brand.lighter;
+}, ";color:", function (_ref2) {
+  var focused = _ref2.focused;
+  return focused && colors.brand.primary;
+}, ";justify-content:space-between;", fonts.sizes(16), ";font-weight:", fonts.weight.normal, ";color:", function (_ref3) {
+  var selected = _ref3.selected;
+  return selected && colors.brand.grey;
+}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJnRCIsImZpbGUiOiJPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgT3B0aW9uUHJvcHMgfSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuaW1wb3J0IHsgYnV0dG9uU3R5bGVWMiBhcyBidXR0b25TdHlsZSB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBEb25lIH0gZnJvbSAnQG5kbGEvaWNvbnMvZWRpdG9yJztcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tICcuL3R5cGVzJztcblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIHtcbiAgc2VsZWN0ZWQ6IGJvb2xlYW47XG4gIGZvY3VzZWQ6IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZE1lbnVPcHRpb24gPSBzdHlsZWQuZGl2PFN0eWxlZFByb3BzPmBcbiAgJiYge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgZm9jdXNlZCB9KSA9PiBmb2N1c2VkICYmIGNvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgICBjb2xvcjogJHsoeyBmb2N1c2VkIH0pID0+IGZvY3VzZWQgJiYgY29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAke2ZvbnRzLnNpemVzKDE2KX07XG4gICAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gICAgY29sb3I6ICR7KHsgc2VsZWN0ZWQgfSkgPT4gc2VsZWN0ZWQgJiYgY29sb3JzLmJyYW5kLmdyZXl9O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRDaGVjayA9IHN0eWxlZChEb25lKWBcbiAgd2lkdGg6IDI0cHg7XG4gIGhlaWdodDogMjRweDtcbiAgZmlsbDogJHtjb2xvcnMuYnJhbmQudGVydGlhcnl9O1xuYDtcblxuY29uc3QgT3B0aW9uID0gKHsgaW5uZXJQcm9wcywgaW5uZXJSZWYsIGNoaWxkcmVuLCBpc1NlbGVjdGVkLCBpc0ZvY3VzZWQgfTogT3B0aW9uUHJvcHM8VGFnVHlwZSwgdHJ1ZT4pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkTWVudU9wdGlvblxuICAgICAgZm9jdXNlZD17aXNGb2N1c2VkfVxuICAgICAgc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICBjc3M9e2J1dHRvblN0eWxlKHsgY29sb3JUaGVtZTogJ2xpZ2h0ZXInLCB2YXJpYW50OiAnZ2hvc3QnLCBzaGFwZTogJ3NoYXJwJyB9KX1cbiAgICAgIHJlZj17aW5uZXJSZWZ9XG4gICAgICB7Li4uaW5uZXJQcm9wc30+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICB7aXNTZWxlY3RlZCAmJiA8U3R5bGVkQ2hlY2sgLz59XG4gICAgPC9TdHlsZWRNZW51T3B0aW9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgT3B0aW9uO1xuIl19 */"));
+
+var StyledCheck = /*#__PURE__*/_styled(Done, {
+  target: "ec486651",
+  label: "StyledCheck"
+})("width:24px;height:24px;fill:", colors.brand.tertiary, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NnQyIsImZpbGUiOiJPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgT3B0aW9uUHJvcHMgfSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuaW1wb3J0IHsgYnV0dG9uU3R5bGVWMiBhcyBidXR0b25TdHlsZSB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBEb25lIH0gZnJvbSAnQG5kbGEvaWNvbnMvZWRpdG9yJztcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tICcuL3R5cGVzJztcblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIHtcbiAgc2VsZWN0ZWQ6IGJvb2xlYW47XG4gIGZvY3VzZWQ6IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZE1lbnVPcHRpb24gPSBzdHlsZWQuZGl2PFN0eWxlZFByb3BzPmBcbiAgJiYge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgZm9jdXNlZCB9KSA9PiBmb2N1c2VkICYmIGNvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgICBjb2xvcjogJHsoeyBmb2N1c2VkIH0pID0+IGZvY3VzZWQgJiYgY29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAke2ZvbnRzLnNpemVzKDE2KX07XG4gICAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gICAgY29sb3I6ICR7KHsgc2VsZWN0ZWQgfSkgPT4gc2VsZWN0ZWQgJiYgY29sb3JzLmJyYW5kLmdyZXl9O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRDaGVjayA9IHN0eWxlZChEb25lKWBcbiAgd2lkdGg6IDI0cHg7XG4gIGhlaWdodDogMjRweDtcbiAgZmlsbDogJHtjb2xvcnMuYnJhbmQudGVydGlhcnl9O1xuYDtcblxuY29uc3QgT3B0aW9uID0gKHsgaW5uZXJQcm9wcywgaW5uZXJSZWYsIGNoaWxkcmVuLCBpc1NlbGVjdGVkLCBpc0ZvY3VzZWQgfTogT3B0aW9uUHJvcHM8VGFnVHlwZSwgdHJ1ZT4pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkTWVudU9wdGlvblxuICAgICAgZm9jdXNlZD17aXNGb2N1c2VkfVxuICAgICAgc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICBjc3M9e2J1dHRvblN0eWxlKHsgY29sb3JUaGVtZTogJ2xpZ2h0ZXInLCB2YXJpYW50OiAnZ2hvc3QnLCBzaGFwZTogJ3NoYXJwJyB9KX1cbiAgICAgIHJlZj17aW5uZXJSZWZ9XG4gICAgICB7Li4uaW5uZXJQcm9wc30+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICB7aXNTZWxlY3RlZCAmJiA8U3R5bGVkQ2hlY2sgLz59XG4gICAgPC9TdHlsZWRNZW51T3B0aW9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgT3B0aW9uO1xuIl19 */"));
+
+var Option = function Option(_ref4) {
+  var innerProps = _ref4.innerProps,
+      innerRef = _ref4.innerRef,
+      children = _ref4.children,
+      isSelected = _ref4.isSelected,
+      isFocused = _ref4.isFocused;
+  return ___EmotionJSX(StyledMenuOption, _extends({
+    focused: isFocused,
+    selected: isSelected,
+    css: buttonStyle({
+      colorTheme: 'lighter',
+      variant: 'ghost',
+      shape: 'sharp'
+    }),
+    ref: innerRef
+  }, innerProps), children, isSelected && ___EmotionJSX(StyledCheck, null));
+};
+
+export default Option;

package/es/TagSelector/SelectContainer.js

@@ -0,0 +1,18 @@
+import _styled from "@emotion/styled-base";
+import { colors, fonts, misc } from '@ndla/core';
+import React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var StyledContainer = _styled("div", {
+  target: "exs06kq0",
+  label: "StyledContainer"
+})("display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid ", colors.brand.neutral7, ";border-radius:", misc.borderRadius, ";&:focus-within{border-color:", colors.brand.tertiary, ";}", fonts.sizes(16), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdENvbnRhaW5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY2tDIiwiZmlsZSI6IlNlbGVjdENvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIG1pc2MgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBDb250YWluZXJQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBUYWdUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtcm93czogYXV0byAxZnI7XG4gIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgYm9yZGVyOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubmV1dHJhbDd9O1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgJjpmb2N1cy13aXRoaW4ge1xuICAgIGJvcmRlci1jb2xvcjogJHtjb2xvcnMuYnJhbmQudGVydGlhcnl9O1xuICB9XG4gICR7Zm9udHMuc2l6ZXMoMTYpfTtcbmA7XG5cbmNvbnN0IFNlbGVjdENvbnRhaW5lciA9ICh7IGlubmVyUHJvcHMsIHNlbGVjdFByb3BzLCBjaGlsZHJlbiB9OiBDb250YWluZXJQcm9wczxUYWdUeXBlLCB0cnVlPikgPT4ge1xuICByZXR1cm4gPFN0eWxlZENvbnRhaW5lciB7Li4uaW5uZXJQcm9wc30+e2NoaWxkcmVufTwvU3R5bGVkQ29udGFpbmVyPjtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNlbGVjdENvbnRhaW5lcjtcbiJdfQ== */"));
+
+var SelectContainer = function SelectContainer(_ref) {
+  var innerProps = _ref.innerProps,
+      selectProps = _ref.selectProps,
+      children = _ref.children;
+  return ___EmotionJSX(StyledContainer, innerProps, children);
+};
+
+export default SelectContainer;

package/es/TagSelector/TagSelector.js

@@ -12,126 +12,187 @@ 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 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/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;
+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
+    });
+  },
+  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'
     });
-  }).filter(function (notUndefined) {
-    return notUndefined;
-  });
-  return returnTags;
+  }
 };
 
-var getSuggestions = function getSuggestions(tags, inputValue) {
-  if (inputValue === '') {
-    return [];
-  }
+var StyledTagSelector = _styled("div", {
+  target: "eor9swf0",
+  label: "StyledTagSelector"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1x7p52c",
+  styles: "display:flex;flex-direction:column;flex:1;overflow:hidden;"
+} : {
+  name: "1x7p52c",
+  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 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 StyledLabel = _styled("label", {
+  target: "eor9swf1",
+  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 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]);
 
-    if (!inline && typeof window !== 'undefined') {
-      if (expanded) {
-        setMaxDropdownMaxHeight();
-        window.addEventListener('resize', setMaxDropdownMaxHeight);
-      } else {
-        window.removeEventListener('resize', setMaxDropdownMaxHeight);
+  var handleSpaceClick = function handleSpaceClick(e) {
+    if (e.key === ' ') {
+      e.preventDefault();
+
+      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,46 @@
+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/core";
+export var StyledValueButton = _styled("div", {
+  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;