@ndla/ui 28.0.0 → 29.0.0

package/lib/TagSelector/Menu.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _css2 = _interopRequireDefault(require("@emotion/css"));
+
+var _core = require("@ndla/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactSelect = require("react-select");
+
+var _MenuList = require("./MenuList");
+
+var _core2 = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+var menuStyle = /*#__PURE__*/(0, _css2["default"])("display:flex;position:relative;flex-direction:column;margin:0;overflow:hidden;border-top:1px solid ", _core.colors.brand.tertiary, ";min-height:70px;:has(", _MenuList.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 (0, _core2.jsx)(_reactSelect.components.Menu, _extends({
+    css: menuStyle
+  }, props), children);
+};
+
+var _default = Menu;
+exports["default"] = _default;

package/lib/TagSelector/MenuList.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 { MenuListProps } from 'react-select';
+import { TagType } from './types';
+export declare const StyledMenuList: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, object>;
+declare const MenuList: ({ innerProps, innerRef, children }: MenuListProps<TagType, true>) => JSX.Element;
+export default MenuList;

package/lib/TagSelector/MenuList.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.StyledMenuList = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@ndla/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core2 = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var StyledMenuList = (0, _styledBase["default"])("div", {
+  target: "e1e7c4ob0",
+  label: "StyledMenuList"
+})("overflow:overlay;", _core.utils.scrollbar, " display:flex;flex-direction:column;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lbnVMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjd0MiLCJmaWxlIjoiTWVudUxpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1dGlscyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IE1lbnVMaXN0UHJvcHMgfSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuaW1wb3J0IHsgVGFnVHlwZSB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTWVudUxpc3QgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdzogb3ZlcmxheTtcbiAgJHt1dGlscy5zY3JvbGxiYXJ9XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG5gO1xuXG5jb25zdCBNZW51TGlzdCA9ICh7IGlubmVyUHJvcHMsIGlubmVyUmVmLCBjaGlsZHJlbiB9OiBNZW51TGlzdFByb3BzPFRhZ1R5cGUsIHRydWU+KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZE1lbnVMaXN0IHJlZj17aW5uZXJSZWZ9IHsuLi5pbm5lclByb3BzfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1N0eWxlZE1lbnVMaXN0PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTWVudUxpc3Q7XG4iXX0= */"));
+exports.StyledMenuList = StyledMenuList;
+
+var MenuList = function MenuList(_ref) {
+  var innerProps = _ref.innerProps,
+      innerRef = _ref.innerRef,
+      children = _ref.children;
+  return (0, _core2.jsx)(StyledMenuList, _extends({
+    ref: innerRef
+  }, innerProps), children);
+};
+
+var _default = MenuList;
+exports["default"] = _default;

package/lib/TagSelector/Option.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import { OptionProps } from 'react-select';
+import { TagType } from './types';
+declare const Option: ({ innerProps, innerRef, children, isSelected, isFocused }: OptionProps<TagType, true>) => JSX.Element;
+export default Option;

package/lib/TagSelector/Option.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("@ndla/button");
+
+var _core = require("@ndla/core");
+
+var _editor = require("@ndla/icons/editor");
+
+var _core2 = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var StyledMenuOption = (0, _styledBase["default"])("div", {
+  target: "ec486650",
+  label: "StyledMenuOption"
+})("&&{background:", function (_ref) {
+  var focused = _ref.focused;
+  return focused && _core.colors.brand.lighter;
+}, ";color:", function (_ref2) {
+  var focused = _ref2.focused;
+  return focused && _core.colors.brand.primary;
+}, ";justify-content:space-between;", _core.fonts.sizes(16), ";font-weight:", _core.fonts.weight.normal, ";color:", function (_ref3) {
+  var selected = _ref3.selected;
+  return selected && _core.colors.brand.grey;
+}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJnRCIsImZpbGUiOiJPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgT3B0aW9uUHJvcHMgfSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuaW1wb3J0IHsgYnV0dG9uU3R5bGVWMiBhcyBidXR0b25TdHlsZSB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBEb25lIH0gZnJvbSAnQG5kbGEvaWNvbnMvZWRpdG9yJztcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tICcuL3R5cGVzJztcblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIHtcbiAgc2VsZWN0ZWQ6IGJvb2xlYW47XG4gIGZvY3VzZWQ6IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZE1lbnVPcHRpb24gPSBzdHlsZWQuZGl2PFN0eWxlZFByb3BzPmBcbiAgJiYge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgZm9jdXNlZCB9KSA9PiBmb2N1c2VkICYmIGNvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgICBjb2xvcjogJHsoeyBmb2N1c2VkIH0pID0+IGZvY3VzZWQgJiYgY29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAke2ZvbnRzLnNpemVzKDE2KX07XG4gICAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gICAgY29sb3I6ICR7KHsgc2VsZWN0ZWQgfSkgPT4gc2VsZWN0ZWQgJiYgY29sb3JzLmJyYW5kLmdyZXl9O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRDaGVjayA9IHN0eWxlZChEb25lKWBcbiAgd2lkdGg6IDI0cHg7XG4gIGhlaWdodDogMjRweDtcbiAgZmlsbDogJHtjb2xvcnMuYnJhbmQudGVydGlhcnl9O1xuYDtcblxuY29uc3QgT3B0aW9uID0gKHsgaW5uZXJQcm9wcywgaW5uZXJSZWYsIGNoaWxkcmVuLCBpc1NlbGVjdGVkLCBpc0ZvY3VzZWQgfTogT3B0aW9uUHJvcHM8VGFnVHlwZSwgdHJ1ZT4pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkTWVudU9wdGlvblxuICAgICAgZm9jdXNlZD17aXNGb2N1c2VkfVxuICAgICAgc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICBjc3M9e2J1dHRvblN0eWxlKHsgY29sb3JUaGVtZTogJ2xpZ2h0ZXInLCB2YXJpYW50OiAnZ2hvc3QnLCBzaGFwZTogJ3NoYXJwJyB9KX1cbiAgICAgIHJlZj17aW5uZXJSZWZ9XG4gICAgICB7Li4uaW5uZXJQcm9wc30+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICB7aXNTZWxlY3RlZCAmJiA8U3R5bGVkQ2hlY2sgLz59XG4gICAgPC9TdHlsZWRNZW51T3B0aW9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgT3B0aW9uO1xuIl19 */"));
+var StyledCheck = ( /*#__PURE__*/0, _styledBase["default"])(_editor.Done, {
+  target: "ec486651",
+  label: "StyledCheck"
+})("width:24px;height:24px;fill:", _core.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 (0, _core2.jsx)(StyledMenuOption, _extends({
+    focused: isFocused,
+    selected: isSelected,
+    css: (0, _button.buttonStyleV2)({
+      colorTheme: 'lighter',
+      variant: 'ghost',
+      shape: 'sharp'
+    }),
+    ref: innerRef
+  }, innerProps), children, isSelected && (0, _core2.jsx)(StyledCheck, null));
+};
+
+var _default = Option;
+exports["default"] = _default;

package/lib/TagSelector/SelectContainer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import { ContainerProps } from 'react-select';
+import { TagType } from './types';
+declare const SelectContainer: ({ innerProps, selectProps, children }: ContainerProps<TagType, true>) => JSX.Element;
+export default SelectContainer;

package/lib/TagSelector/SelectContainer.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@ndla/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core2 = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var StyledContainer = (0, _styledBase["default"])("div", {
+  target: "exs06kq0",
+  label: "StyledContainer"
+})("display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid ", _core.colors.brand.neutral7, ";border-radius:", _core.misc.borderRadius, ";&:focus-within{border-color:", _core.colors.brand.tertiary, ";}", _core.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 (0, _core2.jsx)(StyledContainer, innerProps, children);
+};
+
+var _default = SelectContainer;
+exports["default"] = _default;

package/lib/TagSelector/TagSelector.d.ts

@@ -1,16 +1,19 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 /// <reference types="react" />
-export interface TagType {
-    name: string;
-    id: string;
-}
 interface Props {
     label: string;
-    tags: TagType[];
-    tagsSelected: string[];
-    onToggleTag: (id: string) => void;
-    onCreateTag: (tagName: string) => void;
-    inline?: boolean;
-    prefix?: string;
+    tags: string[];
+    selected: string[];
+    onChange: (tags: string[]) => void;
+    onCreateTag: (name: string) => void;
+    className?: string;
+    labelHidden?: boolean;
 }
-declare const TagSelector: ({ label, tags, tagsSelected, onCreateTag, onToggleTag, inline, prefix }: Props) => JSX.Element;
+declare const TagSelector: ({ selected: _selected, tags: _tags, onChange, onCreateTag, className, label }: Props) => JSX.Element;
 export default TagSelector;

package/lib/TagSelector/TagSelector.js

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

package/lib/TagSelector/ValueButton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import React from 'react';
+import { MultiValueProps } from 'react-select';
+import { TagType } from './types';
+interface StyledProps {
+    selected: boolean;
+}
+export declare const StyledValueButton: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps, object>;
+declare const ValueButton: ({ innerProps, children, removeProps, isFocused }: MultiValueProps<TagType, true>) => JSX.Element;
+export default ValueButton;