@ndla/ui 55.0.13-alpha.0 → 55.0.15-alpha.0

package/lib/TagSelector/TagSelector.js

@@ -3,148 +3,143 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
+exports.TagSelectorTrigger = exports.TagSelectorRoot = exports.TagSelectorLabel = exports.TagSelectorItemInput = exports.TagSelectorInputBase = exports.TagSelectorInput = exports.TagSelectorControl = exports.TagSelectorClearTrigger = void 0;
 var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _creatable = _interopRequireDefault(require("react-select/creatable"));
-var _core = require("@ndla/core");
-var _ariaMessages = require("./ariaMessages");
-var _Control = _interopRequireDefault(require("./Control"));
-var _DropdownIndicator = _interopRequireDefault(require("./DropdownIndicator"));
-var _Input = _interopRequireDefault(require("./Input"));
-var _Menu = _interopRequireDefault(require("./Menu"));
-var _MenuList = _interopRequireDefault(require("./MenuList"));
-var _Option = _interopRequireDefault(require("./Option"));
-var _SelectContainer = _interopRequireDefault(require("./SelectContainer"));
-var _ValueButton = _interopRequireDefault(require("./ValueButton"));
+var _react2 = require("@ark-ui/react");
+var _action = require("@ndla/icons/action");
+var _primitives = require("@ndla/primitives");
+var _util = require("@ndla/util");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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.
+/**
+ * Copyright (c) 2024-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
  *
  */
-const styles = {
-  menu: () => ({}),
-  dropdownIndicator: () => ({}),
-  placeholder: provided => ({
-    ...provided,
-    padding: `0 ${_core.spacing.small}`,
-    color: _core.colors.brand.primary,
-    margin: 0
-  }),
-  valueContainer: provided => ({
-    ...provided,
-    padding: 0
-  }),
-  indicatorSeparator: () => ({
-    display: "none"
-  }),
-  indicatorsContainer: provided => ({
-    ...provided,
-    alignSelf: "flex-end"
-  })
-};
-const StyledTagSelector = /*#__PURE__*/(0, _base.default)("div", {
-  target: "eor9swf1",
-  label: "StyledTagSelector"
-})(process.env.NODE_ENV === "production" ? {
-  name: "3z2sxu",
-  styles: "display:flex;flex-direction:column;flex:1;overflow:hidden"
-} : {
-  name: "3z2sxu",
-  styles: "display:flex;flex-direction:column;flex:1;overflow:hidden",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ1NlbGVjdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q29DIiwiZmlsZSI6IlRhZ1NlbGVjdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgS2V5Ym9hcmRFdmVudCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCB7IE11bHRpVmFsdWUsIFN0eWxlc0NvbmZpZyB9IGZyb20gXCJyZWFjdC1zZWxlY3RcIjtcbmltcG9ydCBDcmVhdGFibGVTZWxlY3QgZnJvbSBcInJlYWN0LXNlbGVjdC9jcmVhdGFibGVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZywgdXRpbHMgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgY3JlYXRlQXJpYU1lc3NhZ2VzIH0gZnJvbSBcIi4vYXJpYU1lc3NhZ2VzXCI7XG5pbXBvcnQgQ29udHJvbCBmcm9tIFwiLi9Db250cm9sXCI7XG5pbXBvcnQgRHJvcGRvd25JbmRpY2F0b3IgZnJvbSBcIi4vRHJvcGRvd25JbmRpY2F0b3JcIjtcbmltcG9ydCBJbnB1dCBmcm9tIFwiLi9JbnB1dFwiO1xuaW1wb3J0IE1lbnUgZnJvbSBcIi4vTWVudVwiO1xuaW1wb3J0IE1lbnVMaXN0IGZyb20gXCIuL01lbnVMaXN0XCI7XG5pbXBvcnQgT3B0aW9uIGZyb20gXCIuL09wdGlvblwiO1xuaW1wb3J0IFNlbGVjdENvbnRhaW5lciBmcm9tIFwiLi9TZWxlY3RDb250YWluZXJcIjtcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tIFwiLi90eXBlc1wiO1xuaW1wb3J0IFZhbHVlQnV0dG9uIGZyb20gXCIuL1ZhbHVlQnV0dG9uXCI7XG5cbmNvbnN0IHN0eWxlczogU3R5bGVzQ29uZmlnPFRhZ1R5cGUsIHRydWU+ID0ge1xuICBtZW51OiAoKSA9PiAoe30pLFxuICBkcm9wZG93bkluZGljYXRvcjogKCkgPT4gKHt9KSxcbiAgcGxhY2Vob2xkZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBwYWRkaW5nOiBgMCAke3NwYWNpbmcuc21hbGx9YCxcbiAgICBjb2xvcjogY29sb3JzLmJyYW5kLnByaW1hcnksXG4gICAgbWFyZ2luOiAwLFxuICB9KSxcbiAgdmFsdWVDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHsgLi4ucHJvdmlkZWQsIHBhZGRpbmc6IDAgfSksXG4gIGluZGljYXRvclNlcGFyYXRvcjogKCkgPT4gKHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSksXG4gIGluZGljYXRvcnNDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBhbGlnblNlbGY6IFwiZmxleC1lbmRcIixcbiAgfSksXG59O1xuXG5jb25zdCBTdHlsZWRUYWdTZWxlY3RvciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGZsZXg6IDE7XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5pbnRlcmZhY2UgU3R5bGVkTGFiZWxQcm9wcyB7XG4gIGxhYmVsSGlkZGVuPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWw8U3R5bGVkTGFiZWxQcm9wcz5gXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG4gICR7KHApID0+IHAubGFiZWxIaWRkZW4gJiYgdXRpbHMubGFiZWxIaWRkZW59XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBsYWJlbDogc3RyaW5nO1xuICB0YWdzOiBzdHJpbmdbXTtcbiAgc2VsZWN0ZWQ6IHN0cmluZ1tdO1xuICBvbkNoYW5nZTogKHRhZ3M6IHN0cmluZ1tdKSA9PiB2b2lkO1xuICBvbkNyZWF0ZVRhZzogKG5hbWU6IHN0cmluZykgPT4gdm9pZDtcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xuICBsYWJlbEhpZGRlbj86IGJvb2xlYW47XG59XG5cbmNvbnN0IFRhZ1NlbGVjdG9yID0gKHtcbiAgc2VsZWN0ZWQ6IF9zZWxlY3RlZCxcbiAgdGFnczogX3RhZ3MsXG4gIG9uQ2hhbmdlLFxuICBvbkNyZWF0ZVRhZyxcbiAgY2xhc3NOYW1lLFxuICBsYWJlbCxcbiAgbGFiZWxIaWRkZW4sXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IFtpbnB1dCwgc2V0SW5wdXRdID0gdXNlU3RhdGUoXCJcIik7XG4gIGNvbnN0IHRhZ3MgPSB1c2VNZW1vKCgpID0+IF90YWdzLm1hcCgodGFnKSA9PiAoeyB2YWx1ZTogdGFnLCBsYWJlbDogdGFnIH0pKSwgW190YWdzXSk7XG4gIGNvbnN0IHNlbGVjdGVkID0gdXNlTWVtbygoKSA9PiBfc2VsZWN0ZWQubWFwKCh0YWcpID0+ICh7IHZhbHVlOiB0YWcsIGxhYmVsOiB0YWcgfSkpLCBbX3NlbGVjdGVkXSk7XG5cbiAgY29uc3QgaGFuZGxlU3BhY2VDbGljayA9IChlOiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGlmIChlLmtleSA9PT0gXCIgXCIpIHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGlmICghX3NlbGVjdGVkLmZpbmQoKHRhZykgPT4gdGFnID09PSBpbnB1dCkgJiYgaW5wdXQgIT09IFwiXCIpIHtcbiAgICAgICAgb25DaGFuZ2UoX3NlbGVjdGVkLmNvbmNhdChpbnB1dCkpO1xuICAgICAgfVxuICAgICAgc2V0SW5wdXQoXCJcIik7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9ICh0YWdzOiBNdWx0aVZhbHVlPFRhZ1R5cGU+KSA9PiB7XG4gICAgb25DaGFuZ2UodGFncy5tYXAoKHRhZykgPT4gdGFnLnZhbHVlKSk7XG4gIH07XG5cbiAgY29uc3QgY3JlYXRlTGFiZWwgPSAodGFnOiBzdHJpbmcpID0+IHQoXCJ0YWdTZWxlY3Rvci5jcmVhdGVMYWJlbFwiLCB7IHRhZyB9KTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRUYWdTZWxlY3RvciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8U3R5bGVkTGFiZWwgbGFiZWxIaWRkZW49e2xhYmVsSGlkZGVufSBodG1sRm9yPVwidGFnc2VsZWN0b3ItY3JlYXRhYmxlXCIgaWQ9XCJ0YWdzZWxlY3Rvci1sYWJlbFwiPlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9TdHlsZWRMYWJlbD5cbiAgICAgICl9XG4gICAgICA8Q3JlYXRhYmxlU2VsZWN0XG4gICAgICAgIGlkPVwidGFnc2VsZWN0b3ItY3JlYXRhYmxlXCJcbiAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtsYWJlbCA/IFwidGFnc2VsZWN0b3ItbGFiZWxcIiA6IHVuZGVmaW5lZH1cbiAgICAgICAgYXJpYUxpdmVNZXNzYWdlcz17Y3JlYXRlQXJpYU1lc3NhZ2VzKHQpfVxuICAgICAgICBjb21wb25lbnRzPXt7XG4gICAgICAgICAgRHJvcGRvd25JbmRpY2F0b3IsXG4gICAgICAgICAgTXVsdGlWYWx1ZTogVmFsdWVCdXR0b24sXG4gICAgICAgICAgU2VsZWN0Q29udGFpbmVyLFxuICAgICAgICAgIE1lbnVMaXN0LFxuICAgICAgICAgIENvbnRyb2wsXG4gICAgICAgICAgT3B0aW9uLFxuICAgICAgICAgIE1lbnUsXG4gICAgICAgICAgSW5wdXQsXG4gICAgICAgIH19XG4gICAgICAgIGZvcm1hdENyZWF0ZUxhYmVsPXtjcmVhdGVMYWJlbH1cbiAgICAgICAgaW5wdXRWYWx1ZT17aW5wdXR9XG4gICAgICAgIGlzQ2xlYXJhYmxlPXtmYWxzZX1cbiAgICAgICAgaXNNdWx0aVxuICAgICAgICBub09wdGlvbnNNZXNzYWdlPXsoKSA9PiB0KFwidGFnU2VsZWN0b3Iubm9PcHRpb25zXCIpfVxuICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICBvbkNyZWF0ZU9wdGlvbj17b25DcmVhdGVUYWd9XG4gICAgICAgIG9uSW5wdXRDaGFuZ2U9e3NldElucHV0fVxuICAgICAgICBvbktleURvd249e2hhbmRsZVNwYWNlQ2xpY2t9XG4gICAgICAgIG9wdGlvbnM9e3RhZ3N9XG4gICAgICAgIHBsYWNlaG9sZGVyPXt0KFwidGFnU2VsZWN0b3IucGxhY2Vob2xkZXJcIil9XG4gICAgICAgIHNjcmVlblJlYWRlclN0YXR1cz17KHsgY291bnQgfSkgPT4gdChcInRhZ1NlbGVjdG9yLmFyaWEuc2NyZWVuUmVhZGVyU3RhdHVzXCIsIHsgY291bnQgfSl9XG4gICAgICAgIHN0eWxlcz17c3R5bGVzfVxuICAgICAgICB0YWJTZWxlY3RzVmFsdWU9e2ZhbHNlfVxuICAgICAgICB2YWx1ZT17c2VsZWN0ZWR9XG4gICAgICAvPlxuICAgIDwvU3R5bGVkVGFnU2VsZWN0b3I+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBUYWdTZWxlY3RvcjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledLabel = /*#__PURE__*/(0, _base.default)("label", {
-  target: "eor9swf0",
-  label: "StyledLabel"
-})("font-weight:", _core.fonts.weight.semibold, ";", p => p.labelHidden && _core.utils.labelHidden, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZ1NlbGVjdG9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RGtEIiwiZmlsZSI6IlRhZ1NlbGVjdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgS2V5Ym9hcmRFdmVudCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCB7IE11bHRpVmFsdWUsIFN0eWxlc0NvbmZpZyB9IGZyb20gXCJyZWFjdC1zZWxlY3RcIjtcbmltcG9ydCBDcmVhdGFibGVTZWxlY3QgZnJvbSBcInJlYWN0LXNlbGVjdC9jcmVhdGFibGVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZywgdXRpbHMgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgY3JlYXRlQXJpYU1lc3NhZ2VzIH0gZnJvbSBcIi4vYXJpYU1lc3NhZ2VzXCI7XG5pbXBvcnQgQ29udHJvbCBmcm9tIFwiLi9Db250cm9sXCI7XG5pbXBvcnQgRHJvcGRvd25JbmRpY2F0b3IgZnJvbSBcIi4vRHJvcGRvd25JbmRpY2F0b3JcIjtcbmltcG9ydCBJbnB1dCBmcm9tIFwiLi9JbnB1dFwiO1xuaW1wb3J0IE1lbnUgZnJvbSBcIi4vTWVudVwiO1xuaW1wb3J0IE1lbnVMaXN0IGZyb20gXCIuL01lbnVMaXN0XCI7XG5pbXBvcnQgT3B0aW9uIGZyb20gXCIuL09wdGlvblwiO1xuaW1wb3J0IFNlbGVjdENvbnRhaW5lciBmcm9tIFwiLi9TZWxlY3RDb250YWluZXJcIjtcbmltcG9ydCB7IFRhZ1R5cGUgfSBmcm9tIFwiLi90eXBlc1wiO1xuaW1wb3J0IFZhbHVlQnV0dG9uIGZyb20gXCIuL1ZhbHVlQnV0dG9uXCI7XG5cbmNvbnN0IHN0eWxlczogU3R5bGVzQ29uZmlnPFRhZ1R5cGUsIHRydWU+ID0ge1xuICBtZW51OiAoKSA9PiAoe30pLFxuICBkcm9wZG93bkluZGljYXRvcjogKCkgPT4gKHt9KSxcbiAgcGxhY2Vob2xkZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBwYWRkaW5nOiBgMCAke3NwYWNpbmcuc21hbGx9YCxcbiAgICBjb2xvcjogY29sb3JzLmJyYW5kLnByaW1hcnksXG4gICAgbWFyZ2luOiAwLFxuICB9KSxcbiAgdmFsdWVDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHsgLi4ucHJvdmlkZWQsIHBhZGRpbmc6IDAgfSksXG4gIGluZGljYXRvclNlcGFyYXRvcjogKCkgPT4gKHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSksXG4gIGluZGljYXRvcnNDb250YWluZXI6IChwcm92aWRlZCkgPT4gKHtcbiAgICAuLi5wcm92aWRlZCxcbiAgICBhbGlnblNlbGY6IFwiZmxleC1lbmRcIixcbiAgfSksXG59O1xuXG5jb25zdCBTdHlsZWRUYWdTZWxlY3RvciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGZsZXg6IDE7XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5pbnRlcmZhY2UgU3R5bGVkTGFiZWxQcm9wcyB7XG4gIGxhYmVsSGlkZGVuPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWw8U3R5bGVkTGFiZWxQcm9wcz5gXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG4gICR7KHApID0+IHAubGFiZWxIaWRkZW4gJiYgdXRpbHMubGFiZWxIaWRkZW59XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBsYWJlbDogc3RyaW5nO1xuICB0YWdzOiBzdHJpbmdbXTtcbiAgc2VsZWN0ZWQ6IHN0cmluZ1tdO1xuICBvbkNoYW5nZTogKHRhZ3M6IHN0cmluZ1tdKSA9PiB2b2lkO1xuICBvbkNyZWF0ZVRhZzogKG5hbWU6IHN0cmluZykgPT4gdm9pZDtcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xuICBsYWJlbEhpZGRlbj86IGJvb2xlYW47XG59XG5cbmNvbnN0IFRhZ1NlbGVjdG9yID0gKHtcbiAgc2VsZWN0ZWQ6IF9zZWxlY3RlZCxcbiAgdGFnczogX3RhZ3MsXG4gIG9uQ2hhbmdlLFxuICBvbkNyZWF0ZVRhZyxcbiAgY2xhc3NOYW1lLFxuICBsYWJlbCxcbiAgbGFiZWxIaWRkZW4sXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IFtpbnB1dCwgc2V0SW5wdXRdID0gdXNlU3RhdGUoXCJcIik7XG4gIGNvbnN0IHRhZ3MgPSB1c2VNZW1vKCgpID0+IF90YWdzLm1hcCgodGFnKSA9PiAoeyB2YWx1ZTogdGFnLCBsYWJlbDogdGFnIH0pKSwgW190YWdzXSk7XG4gIGNvbnN0IHNlbGVjdGVkID0gdXNlTWVtbygoKSA9PiBfc2VsZWN0ZWQubWFwKCh0YWcpID0+ICh7IHZhbHVlOiB0YWcsIGxhYmVsOiB0YWcgfSkpLCBbX3NlbGVjdGVkXSk7XG5cbiAgY29uc3QgaGFuZGxlU3BhY2VDbGljayA9IChlOiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGlmIChlLmtleSA9PT0gXCIgXCIpIHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGlmICghX3NlbGVjdGVkLmZpbmQoKHRhZykgPT4gdGFnID09PSBpbnB1dCkgJiYgaW5wdXQgIT09IFwiXCIpIHtcbiAgICAgICAgb25DaGFuZ2UoX3NlbGVjdGVkLmNvbmNhdChpbnB1dCkpO1xuICAgICAgfVxuICAgICAgc2V0SW5wdXQoXCJcIik7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9ICh0YWdzOiBNdWx0aVZhbHVlPFRhZ1R5cGU+KSA9PiB7XG4gICAgb25DaGFuZ2UodGFncy5tYXAoKHRhZykgPT4gdGFnLnZhbHVlKSk7XG4gIH07XG5cbiAgY29uc3QgY3JlYXRlTGFiZWwgPSAodGFnOiBzdHJpbmcpID0+IHQoXCJ0YWdTZWxlY3Rvci5jcmVhdGVMYWJlbFwiLCB7IHRhZyB9KTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRUYWdTZWxlY3RvciBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8U3R5bGVkTGFiZWwgbGFiZWxIaWRkZW49e2xhYmVsSGlkZGVufSBodG1sRm9yPVwidGFnc2VsZWN0b3ItY3JlYXRhYmxlXCIgaWQ9XCJ0YWdzZWxlY3Rvci1sYWJlbFwiPlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9TdHlsZWRMYWJlbD5cbiAgICAgICl9XG4gICAgICA8Q3JlYXRhYmxlU2VsZWN0XG4gICAgICAgIGlkPVwidGFnc2VsZWN0b3ItY3JlYXRhYmxlXCJcbiAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtsYWJlbCA/IFwidGFnc2VsZWN0b3ItbGFiZWxcIiA6IHVuZGVmaW5lZH1cbiAgICAgICAgYXJpYUxpdmVNZXNzYWdlcz17Y3JlYXRlQXJpYU1lc3NhZ2VzKHQpfVxuICAgICAgICBjb21wb25lbnRzPXt7XG4gICAgICAgICAgRHJvcGRvd25JbmRpY2F0b3IsXG4gICAgICAgICAgTXVsdGlWYWx1ZTogVmFsdWVCdXR0b24sXG4gICAgICAgICAgU2VsZWN0Q29udGFpbmVyLFxuICAgICAgICAgIE1lbnVMaXN0LFxuICAgICAgICAgIENvbnRyb2wsXG4gICAgICAgICAgT3B0aW9uLFxuICAgICAgICAgIE1lbnUsXG4gICAgICAgICAgSW5wdXQsXG4gICAgICAgIH19XG4gICAgICAgIGZvcm1hdENyZWF0ZUxhYmVsPXtjcmVhdGVMYWJlbH1cbiAgICAgICAgaW5wdXRWYWx1ZT17aW5wdXR9XG4gICAgICAgIGlzQ2xlYXJhYmxlPXtmYWxzZX1cbiAgICAgICAgaXNNdWx0aVxuICAgICAgICBub09wdGlvbnNNZXNzYWdlPXsoKSA9PiB0KFwidGFnU2VsZWN0b3Iubm9PcHRpb25zXCIpfVxuICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICBvbkNyZWF0ZU9wdGlvbj17b25DcmVhdGVUYWd9XG4gICAgICAgIG9uSW5wdXRDaGFuZ2U9e3NldElucHV0fVxuICAgICAgICBvbktleURvd249e2hhbmRsZVNwYWNlQ2xpY2t9XG4gICAgICAgIG9wdGlvbnM9e3RhZ3N9XG4gICAgICAgIHBsYWNlaG9sZGVyPXt0KFwidGFnU2VsZWN0b3IucGxhY2Vob2xkZXJcIil9XG4gICAgICAgIHNjcmVlblJlYWRlclN0YXR1cz17KHsgY291bnQgfSkgPT4gdChcInRhZ1NlbGVjdG9yLmFyaWEuc2NyZWVuUmVhZGVyU3RhdHVzXCIsIHsgY291bnQgfSl9XG4gICAgICAgIHN0eWxlcz17c3R5bGVzfVxuICAgICAgICB0YWJTZWxlY3RzVmFsdWU9e2ZhbHNlfVxuICAgICAgICB2YWx1ZT17c2VsZWN0ZWR9XG4gICAgICAvPlxuICAgIDwvU3R5bGVkVGFnU2VsZWN0b3I+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBUYWdTZWxlY3RvcjtcbiJdfQ== */"));
-const TagSelector = _ref => {
+
+const TagSelectorRoot = _ref => {
   let {
-    selected: _selected,
-    tags: _tags,
-    onChange,
-    onCreateTag,
-    className,
-    label,
-    labelHidden
+    allowCustomValue = true,
+    multiple = true,
+    selectionBehavior = "clear",
+    editable,
+    addOnPaste = false,
+    onValueChange,
+    children,
+    value,
+    translations,
+    ...rest
   } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [input, setInput] = (0, _react.useState)("");
-  const tags = (0, _react.useMemo)(() => _tags.map(tag => ({
-    value: tag,
-    label: tag
-  })), [_tags]);
-  const selected = (0, _react.useMemo)(() => _selected.map(tag => ({
-    value: tag,
-    label: tag
-  })), [_selected]);
-  const handleSpaceClick = e => {
-    if (e.key === " ") {
-      e.preventDefault();
-      if (!_selected.find(tag => tag === input) && input !== "") {
-        onChange(_selected.concat(input));
-      }
-      setInput("");
-    }
+  const ids = {
+    root: (0, _react.useId)(),
+    input: (0, _react.useId)(),
+    control: (0, _react.useId)()
   };
-  const handleChange = tags => {
-    onChange(tags.map(tag => tag.value));
-  };
-  const createLabel = tag => t("tagSelector.createLabel", {
-    tag
+  const controlRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    if (!controlRef.current) {
+      controlRef.current = document.getElementById(ids.control);
+    }
+  }, [ids.control]);
+  return (0, _jsxRuntime.jsx)(_primitives.ComboboxRoot, {
+    ids: ids,
+    asChild: true,
+    allowCustomValue: allowCustomValue,
+    multiple: multiple,
+    selectionBehavior: selectionBehavior,
+    onValueChange: onValueChange,
+    translations: translations,
+    onPointerDownOutside: event => {
+      if ((0, _util.contains)(controlRef.current, event.detail.originalEvent.target)) {
+        event.preventDefault();
+      }
+    },
+    value: value,
+    ...rest,
+    children: (0, _jsxRuntime.jsx)(_react2.ComboboxContext, {
+      children: api => (0, _jsxRuntime.jsx)(_primitives.TagsInputRoot, {
+        ids: ids,
+        value: value,
+        onInputValueChange: details => api.setInputValue(details.inputValue),
+        editable: editable,
+        onValueChange: onValueChange,
+        addOnPaste: addOnPaste,
+        translations: translations,
+        children: children
+      })
+    })
   });
-  return (0, _jsxRuntime.jsxs)(StyledTagSelector, {
-    className: className,
-    children: [label && (0, _jsxRuntime.jsx)(StyledLabel, {
-      labelHidden: labelHidden,
-      htmlFor: "tagselector-creatable",
-      id: "tagselector-label",
-      children: label
-    }), (0, _jsxRuntime.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: () => t("tagSelector.noOptions"),
-      onChange: handleChange,
-      onCreateOption: onCreateTag,
-      onInputChange: setInput,
-      onKeyDown: handleSpaceClick,
-      options: tags,
-      placeholder: t("tagSelector.placeholder"),
-      screenReaderStatus: _ref2 => {
-        let {
-          count
-        } = _ref2;
-        return t("tagSelector.aria.screenReaderStatus", {
-          count
-        });
+};
+exports.TagSelectorRoot = TagSelectorRoot;
+const TagSelectorLabel = exports.TagSelectorLabel = _primitives.ComboboxLabel;
+const TagSelectorItemInput = exports.TagSelectorItemInput = _primitives.TagsInputItemInput;
+const TagSelectorTrigger = exports.TagSelectorTrigger = _primitives.ComboboxTrigger;
+const TagSelectorControl = exports.TagSelectorControl = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return (0, _jsxRuntime.jsx)(_primitives.ComboboxControl, {
+    asChild: true,
+    children: (0, _jsxRuntime.jsx)(_primitives.TagsInputControl, {
+      ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+const TagSelectorClearTrigger = exports.TagSelectorClearTrigger = _primitives.ComboboxClearTrigger;
+// If you need to modify the TagsInputItem, you can use this.
+const TagSelectorInputBase = exports.TagSelectorInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  const tagsApi = (0, _react2.useTagsInputContext)();
+  return (0, _jsxRuntime.jsx)(_primitives.ComboboxInput, {
+    asChild: true,
+    children: (0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
+      ...props,
+      onKeyDown: event => {
+        if (event.key === "Enter") {
+          tagsApi.addValue(tagsApi.inputValue);
+        }
       },
-      styles: styles,
-      tabSelectsValue: false,
-      value: selected
+      ref: ref,
+      children: children
+    })
+  });
+});
+const TagSelectorInput = exports.TagSelectorInput = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  const tagsApi = (0, _react2.useTagsInputContext)();
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [tagsApi.value.map((value, index) => (0, _jsxRuntime.jsxs)(_primitives.TagsInputItem, {
+      index: index,
+      value: value,
+      children: [(0, _jsxRuntime.jsxs)(_primitives.TagsInputItemPreview, {
+        children: [(0, _jsxRuntime.jsx)(_primitives.TagsInputItemText, {
+          children: value
+        }), (0, _jsxRuntime.jsx)(_primitives.TagsInputItemDeleteTrigger, {
+          children: (0, _jsxRuntime.jsx)(_action.Cross, {})
+        })]
+      }), (0, _jsxRuntime.jsx)(_primitives.TagsInputItemInput, {})]
+    }, value)), (0, _jsxRuntime.jsx)(_primitives.ComboboxInput, {
+      asChild: true,
+      children: (0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
+        ...props,
+        onKeyDown: event => {
+          if (event.key === "Enter") {
+            tagsApi.addValue(tagsApi.inputValue);
+          }
+        },
+        ref: ref,
+        children: children
+      })
     })]
   });
-};
-var _default = exports.default = TagSelector;
+});

package/lib/i18n/index.d.ts

@@ -7,3 +7,4 @@
  */
 export { i18nInstance } from "./i18n";
 export { formatNestedMessages } from "./formatNestedMessages";
+export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, } from "./useComponentTranslations";

package/lib/i18n/index.js

@@ -15,5 +15,24 @@ Object.defineProperty(exports, "i18nInstance", {
     return _i18n.i18nInstance;
   }
 });
+Object.defineProperty(exports, "useComboboxTranslations", {
+  enumerable: true,
+  get: function () {
+    return _useComponentTranslations.useComboboxTranslations;
+  }
+});
+Object.defineProperty(exports, "useTagSelectorTranslations", {
+  enumerable: true,
+  get: function () {
+    return _useComponentTranslations.useTagSelectorTranslations;
+  }
+});
+Object.defineProperty(exports, "useTagsInputTranslations", {
+  enumerable: true,
+  get: function () {
+    return _useComponentTranslations.useTagsInputTranslations;
+  }
+});
 var _i18n = require("./i18n");
-var _formatNestedMessages = require("./formatNestedMessages");
+var _formatNestedMessages = require("./formatNestedMessages");
+var _useComponentTranslations = require("./useComponentTranslations");

package/lib/i18n/useComponentTranslations.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2024-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 type { ComboboxCollectionItem } from "@ark-ui/react";
+import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
+import { TagSelectorRootProps } from "../TagSelector/TagSelector";
+export declare const useTagsInputTranslations: (translations?: Partial<TagsInputRootProps["translations"]>) => TagsInputRootProps["translations"];
+export declare const useComboboxTranslations: <T extends ComboboxCollectionItem>(translations?: Partial<ComboboxRootProps<T>["translations"]>) => ComboboxRootProps<T>["translations"];
+export declare const useTagSelectorTranslations: <T extends ComboboxCollectionItem>(translations?: Partial<TagSelectorRootProps<T>["translations"]>) => TagSelectorRootProps<T>["translations"];
+export declare const usePaginationTranslations: (translations?: Partial<PaginationRootProps["translations"]>) => PaginationRootProps["translations"];

package/lib/i18n/useComponentTranslations.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTagsInputTranslations = exports.useTagSelectorTranslations = exports.usePaginationTranslations = exports.useComboboxTranslations = void 0;
+var _reactI18next = require("react-i18next");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const useTagsInputTranslations = translations => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)("translation", {
+    keyPrefix: "component.tagsInput"
+  });
+  return {
+    clearTriggerLabel: t("clearTriggerLabel"),
+    deleteTagTriggerLabel: tag => t("deleteTagTriggerLabel", {
+      tag
+    }),
+    tagAdded: tag => t("tagAdded", {
+      tag
+    }),
+    tagsPasted: tag => t("tagsPasted", {
+      length: tag.length
+    }),
+    tagEdited: tag => t("tagEdited", {
+      tag
+    }),
+    tagUpdated: tag => t("tagUpdated", {
+      tag
+    }),
+    tagDeleted: tag => t("tagDeleted", {
+      tag
+    }),
+    tagSelected: tag => t("tagSelected", {
+      tag
+    }),
+    ...translations
+  };
+};
+exports.useTagsInputTranslations = useTagsInputTranslations;
+const useComboboxTranslations = translations => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)("translation", {
+    keyPrefix: "component.combobox"
+  });
+  return {
+    triggerLabel: t("triggerLabel"),
+    clearTriggerLabel: t("clearTriggerLabel"),
+    ...translations
+  };
+};
+exports.useComboboxTranslations = useComboboxTranslations;
+const useTagSelectorTranslations = translations => {
+  const tagsInputTranslations = useTagsInputTranslations();
+  const comboboxTranslations = useComboboxTranslations();
+  return {
+    ...comboboxTranslations,
+    ...tagsInputTranslations,
+    ...translations
+  };
+};
+exports.useTagSelectorTranslations = useTagSelectorTranslations;
+const usePaginationTranslations = translations => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)("translation", {
+    keyPrefix: "component.pagination"
+  });
+  return {
+    rootLabel: t("rootLabel"),
+    prevTriggerLabel: t("prevTriggerLabel"),
+    nextTriggerLabel: t("nextTriggerLabel"),
+    itemLabel: details => {
+      const lastPage = details.totalPages > 1 && details.page === details.totalPages;
+      return lastPage ? t("lastPage", {
+        page: details.page
+      }) : t("page", {
+        page: details.page
+      });
+    },
+    ...translations
+  };
+};
+exports.usePaginationTranslations = usePaginationTranslations;

package/lib/index.d.ts

@@ -5,27 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
-export { default as FramedContent } from "./FramedContent";
-export { ConceptNotionV2, ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, } from "./Embed";
+export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
 export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, ArticleParagraph, } from "./Article";
 export type { ArticleModifier } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
-export { default as Table, TableStyling } from "./Table";
 export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
 export { ErrorResourceAccessDenied, default as ErrorMessage } from "./ErrorMessage";
 export { default as FileList, File, PdfFile, Format } from "./FileList";
 export { default as Logo } from "./Logo";
 export { default as FactBox } from "./FactBox";
-export { default as Image, ImageLink, makeSrcQueryString } from "./Image";
-export type { ImageCrop, ImageFocalPoint } from "./Image";
 export type { HeroContentType } from "./Hero";
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, SourceMaterialHero, Hero, NdlaFilmHero, ConceptHero, HeroContent, } from "./Hero";
 export { FooterBlock } from "./Footer";
-export { Figure } from "./Figure";
-export type { FigureType } from "./Figure";
 export { LanguageSelector } from "./LanguageSelector";
 export { default as SearchResultSleeve } from "./Search/SearchResultSleeve";
 export { default as ContentTypeResult } from "./Search/ContentTypeResult";
@@ -43,21 +36,19 @@ export { default as messagesSE } from "./locale/messages-se";
 export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
-export { i18nInstance, formatNestedMessages } from "./i18n";
+export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, } from "./i18n";
 export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge, } from "./ContentTypeBadge";
+export type { ContentTypeBadgeProps } from "./ContentTypeBadge/ContentTypeBadgeNew";
+export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap, } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { default as ContentPlaceholder } from "./ContentPlaceholder";
-export { Notion } from "./Notion";
-export type { TagType } from "./TagSelector";
-export { TagSelector } from "./TagSelector";
+export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
 export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from "./SnackBar";
 export type { Snack, SnackContext } from "./SnackBar";
 export { TreeStructure } from "./TreeStructure";
 export type { TreeStructureProps } from "./TreeStructure";
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters } from "./Search";
-export { default as LetterFilter } from "./LetterFilter";
-export { OrderedList, UnOrderedList } from "./List";
 export { BlogPostV2 } from "./BlogPost";
 export { ProgrammeCard } from "./ProgrammeCard";
 export { KeyFigure } from "./KeyFigure";
@@ -67,7 +58,6 @@ export { CampaignBlock } from "./CampaignBlock";
 export { Grid, GridParallaxItem } from "./Grid";
 export type { GridType } from "./Grid";
 export { default as FrontpageArticle, FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH, } from "./FrontpageArticle";
-export { DefinitionTerm, DefinitionDescription } from "./DefinitionList";
 export type { ProgrammeV2 } from "./ProgrammeCard";
 export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";