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

package/es/ResourceBox/ResourceBox.js

@@ -1,4 +1,3 @@
-import _styled from "@emotion/styled/base";
 /**
  * Copyright (c) 2022-present, NDLA.
  *
@@ -7,37 +6,60 @@ import _styled from "@emotion/styled/base";
  *
  */
 
-import { breakpoints, fonts, mq, colors, spacing } from "@ndla/core";
 import { Launch } from "@ndla/icons/common";
-import { Image } from "@ndla/primitives";
+import { Heading, Image, Text } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
+import { token } from "@ndla/styled-system/tokens";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const ResourceBoxContainer = /*#__PURE__*/_styled("div", {
-  target: "e1byxq9a4",
-  label: "ResourceBoxContainer"
-})("display:flex;position:relative;padding:", spacing.nsmall, ";border-radius:5px;border:1px solid ", colors.brand.light, ";font-family:", fonts.sans, ";box-shadow:0px 20px 35px -15px rgba(32, 88, 143, 0.15);gap:", spacing.medium, ";", mq.range({
-  until: breakpoints.desktop
-}), "{gap:0;flex-direction:column;padding-top:", spacing.medium, ";text-align:center;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlQm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjdUMiLCJmaWxlIjoiUmVzb3VyY2VCb3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBmb250cywgbXEsIGNvbG9ycywgc3BhY2luZyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBMYXVuY2ggfSBmcm9tIFwiQG5kbGEvaWNvbnMvY29tbW9uXCI7XG5pbXBvcnQgeyBJbWFnZSB9IGZyb20gXCJAbmRsYS9wcmltaXRpdmVzXCI7XG5pbXBvcnQgeyBTYWZlTGlua0J1dHRvbiB9IGZyb20gXCJAbmRsYS9zYWZlbGlua1wiO1xuXG5jb25zdCBSZXNvdXJjZUJveENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLm5zbWFsbH07XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYm9yZGVyOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubGlnaHR9O1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgYm94LXNoYWRvdzogMHB4IDIwcHggMzVweCAtMTVweCByZ2JhKDMyLCA4OCwgMTQzLCAwLjE1KTtcbiAgZ2FwOiAke3NwYWNpbmcubWVkaXVtfTtcblxuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLmRlc2t0b3AgfSl9IHtcbiAgICBnYXA6IDA7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBwYWRkaW5nLXRvcDogJHtzcGFjaW5nLm1lZGl1bX07XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB9XG5gO1xuXG5jb25zdCBUaXRsZSA9IHN0eWxlZC5oM2BcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICAke2ZvbnRzLnNpemVzKDE4KX07XG4gIG1hcmdpbi10b3A6IDA7XG5gO1xuXG5jb25zdCBDYXB0aW9uID0gc3R5bGVkLnBgXG4gICR7Zm9udHMuc2l6ZXMoMTQpfTtcbmA7XG5cbmNvbnN0IENvbnRlbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxleC1iYXNpczogMDtcbiAgZmxleC1ncm93OiAxO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBwYWRkaW5nLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQoSW1hZ2UpYFxuICAmJiB7XG4gICAgb2JqZWN0LWZpdDogY292ZXI7XG4gICAgd2lkdGg6IDEzNHB4O1xuICAgIGhlaWdodDogMTM0cHg7XG4gICAgYm9yZGVyLXJhZGl1czogNXB4O1xuXG4gICAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICBoZWlnaHQ6IDIwMHB4O1xuICAgIH1cbiAgfVxuYDtcblxuaW50ZXJmYWNlIEltYWdlTWV0YSB7XG4gIHNyYzogc3RyaW5nO1xuICBhbHQ6IHN0cmluZztcbn1cblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaW1hZ2U6IEltYWdlTWV0YTtcbiAgdGl0bGU6IHN0cmluZztcbiAgY2FwdGlvbjogc3RyaW5nO1xuICB1cmw6IHN0cmluZztcbiAgYnV0dG9uVGV4dDogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgUmVzb3VyY2VCb3ggPSAoeyBpbWFnZSwgdGl0bGUsIGNhcHRpb24sIHVybCwgYnV0dG9uVGV4dCB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxSZXNvdXJjZUJveENvbnRhaW5lcj5cbiAgICAgIDxTdHlsZWRJbWFnZSBzcmM9e2ltYWdlLnNyY30gYWx0PXtpbWFnZS5hbHR9IC8+XG4gICAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICAgIDxUaXRsZT57dGl0bGV9PC9UaXRsZT5cbiAgICAgICAgPENhcHRpb24+e2NhcHRpb259PC9DYXB0aW9uPlxuICAgICAgICA8U2FmZUxpbmtCdXR0b24gdG89e3VybH0gdGFyZ2V0PVwiX2JsYW5rXCIgdmFyaWFudD1cInNlY29uZGFyeVwiPlxuICAgICAgICAgIHtidXR0b25UZXh0fVxuICAgICAgICAgIDxMYXVuY2ggYXJpYS1oaWRkZW4gLz5cbiAgICAgICAgPC9TYWZlTGlua0J1dHRvbj5cbiAgICAgIDwvQ29udGVudFdyYXBwZXI+XG4gICAgPC9SZXNvdXJjZUJveENvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFJlc291cmNlQm94O1xuIl19 */"));
-const Title = /*#__PURE__*/_styled("h3", {
-  target: "e1byxq9a3",
-  label: "Title"
-})("font-weight:", fonts.weight.bold, ";", fonts.sizes(18), ";margin-top:0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlQm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ3VCIiwiZmlsZSI6IlJlc291cmNlQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBicmVha3BvaW50cywgZm9udHMsIG1xLCBjb2xvcnMsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgTGF1bmNoIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgSW1hZ2UgfSBmcm9tIFwiQG5kbGEvcHJpbWl0aXZlc1wiO1xuaW1wb3J0IHsgU2FmZUxpbmtCdXR0b24gfSBmcm9tIFwiQG5kbGEvc2FmZWxpbmtcIjtcblxuY29uc3QgUmVzb3VyY2VCb3hDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5uc21hbGx9O1xuICBib3JkZXItcmFkaXVzOiA1cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmxpZ2h0fTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIGJveC1zaGFkb3c6IDBweCAyMHB4IDM1cHggLTE1cHggcmdiYSgzMiwgODgsIDE0MywgMC4xNSk7XG4gIGdhcDogJHtzcGFjaW5nLm1lZGl1bX07XG5cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgZ2FwOiAwO1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5tZWRpdW19O1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgfVxuYDtcblxuY29uc3QgVGl0bGUgPSBzdHlsZWQuaDNgXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgJHtmb250cy5zaXplcygxOCl9O1xuICBtYXJnaW4tdG9wOiAwO1xuYDtcblxuY29uc3QgQ2FwdGlvbiA9IHN0eWxlZC5wYFxuICAke2ZvbnRzLnNpemVzKDE0KX07XG5gO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGZsZXgtYmFzaXM6IDA7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgJiYge1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIHdpZHRoOiAxMzRweDtcbiAgICBoZWlnaHQ6IDEzNHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDVweDtcblxuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgICAgd2lkdGg6IDIwMHB4O1xuICAgICAgaGVpZ2h0OiAyMDBweDtcbiAgICB9XG4gIH1cbmA7XG5cbmludGVyZmFjZSBJbWFnZU1ldGEge1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG59XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlOiBJbWFnZU1ldGE7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGNhcHRpb246IHN0cmluZztcbiAgdXJsOiBzdHJpbmc7XG4gIGJ1dHRvblRleHQ6IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFJlc291cmNlQm94ID0gKHsgaW1hZ2UsIHRpdGxlLCBjYXB0aW9uLCB1cmwsIGJ1dHRvblRleHQgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8UmVzb3VyY2VCb3hDb250YWluZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZS5zcmN9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgPENvbnRlbnRXcmFwcGVyPlxuICAgICAgICA8VGl0bGU+e3RpdGxlfTwvVGl0bGU+XG4gICAgICAgIDxDYXB0aW9uPntjYXB0aW9ufTwvQ2FwdGlvbj5cbiAgICAgICAgPFNhZmVMaW5rQnV0dG9uIHRvPXt1cmx9IHRhcmdldD1cIl9ibGFua1wiIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIj5cbiAgICAgICAgICB7YnV0dG9uVGV4dH1cbiAgICAgICAgICA8TGF1bmNoIGFyaWEtaGlkZGVuIC8+XG4gICAgICAgIDwvU2FmZUxpbmtCdXR0b24+XG4gICAgICA8L0NvbnRlbnRXcmFwcGVyPlxuICAgIDwvUmVzb3VyY2VCb3hDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBSZXNvdXJjZUJveDtcbiJdfQ== */"));
-const Caption = /*#__PURE__*/_styled("p", {
-  target: "e1byxq9a2",
-  label: "Caption"
-})(fonts.sizes(14), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlQm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ3dCIiwiZmlsZSI6IlJlc291cmNlQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBicmVha3BvaW50cywgZm9udHMsIG1xLCBjb2xvcnMsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgTGF1bmNoIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgSW1hZ2UgfSBmcm9tIFwiQG5kbGEvcHJpbWl0aXZlc1wiO1xuaW1wb3J0IHsgU2FmZUxpbmtCdXR0b24gfSBmcm9tIFwiQG5kbGEvc2FmZWxpbmtcIjtcblxuY29uc3QgUmVzb3VyY2VCb3hDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5uc21hbGx9O1xuICBib3JkZXItcmFkaXVzOiA1cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmxpZ2h0fTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIGJveC1zaGFkb3c6IDBweCAyMHB4IDM1cHggLTE1cHggcmdiYSgzMiwgODgsIDE0MywgMC4xNSk7XG4gIGdhcDogJHtzcGFjaW5nLm1lZGl1bX07XG5cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgZ2FwOiAwO1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5tZWRpdW19O1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgfVxuYDtcblxuY29uc3QgVGl0bGUgPSBzdHlsZWQuaDNgXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgJHtmb250cy5zaXplcygxOCl9O1xuICBtYXJnaW4tdG9wOiAwO1xuYDtcblxuY29uc3QgQ2FwdGlvbiA9IHN0eWxlZC5wYFxuICAke2ZvbnRzLnNpemVzKDE0KX07XG5gO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGZsZXgtYmFzaXM6IDA7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgJiYge1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIHdpZHRoOiAxMzRweDtcbiAgICBoZWlnaHQ6IDEzNHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDVweDtcblxuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgICAgd2lkdGg6IDIwMHB4O1xuICAgICAgaGVpZ2h0OiAyMDBweDtcbiAgICB9XG4gIH1cbmA7XG5cbmludGVyZmFjZSBJbWFnZU1ldGEge1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG59XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlOiBJbWFnZU1ldGE7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGNhcHRpb246IHN0cmluZztcbiAgdXJsOiBzdHJpbmc7XG4gIGJ1dHRvblRleHQ6IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFJlc291cmNlQm94ID0gKHsgaW1hZ2UsIHRpdGxlLCBjYXB0aW9uLCB1cmwsIGJ1dHRvblRleHQgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8UmVzb3VyY2VCb3hDb250YWluZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZS5zcmN9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgPENvbnRlbnRXcmFwcGVyPlxuICAgICAgICA8VGl0bGU+e3RpdGxlfTwvVGl0bGU+XG4gICAgICAgIDxDYXB0aW9uPntjYXB0aW9ufTwvQ2FwdGlvbj5cbiAgICAgICAgPFNhZmVMaW5rQnV0dG9uIHRvPXt1cmx9IHRhcmdldD1cIl9ibGFua1wiIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIj5cbiAgICAgICAgICB7YnV0dG9uVGV4dH1cbiAgICAgICAgICA8TGF1bmNoIGFyaWEtaGlkZGVuIC8+XG4gICAgICAgIDwvU2FmZUxpbmtCdXR0b24+XG4gICAgICA8L0NvbnRlbnRXcmFwcGVyPlxuICAgIDwvUmVzb3VyY2VCb3hDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBSZXNvdXJjZUJveDtcbiJdfQ== */"));
-const ContentWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1byxq9a1",
-  label: "ContentWrapper"
-})("flex-basis:0;flex-grow:1;display:flex;flex-direction:column;align-items:flex-start;", mq.range({
-  until: breakpoints.desktop
-}), "{align-items:center;padding-top:", spacing.small, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlQm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ2lDIiwiZmlsZSI6IlJlc291cmNlQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBicmVha3BvaW50cywgZm9udHMsIG1xLCBjb2xvcnMsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgTGF1bmNoIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgSW1hZ2UgfSBmcm9tIFwiQG5kbGEvcHJpbWl0aXZlc1wiO1xuaW1wb3J0IHsgU2FmZUxpbmtCdXR0b24gfSBmcm9tIFwiQG5kbGEvc2FmZWxpbmtcIjtcblxuY29uc3QgUmVzb3VyY2VCb3hDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5uc21hbGx9O1xuICBib3JkZXItcmFkaXVzOiA1cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmxpZ2h0fTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIGJveC1zaGFkb3c6IDBweCAyMHB4IDM1cHggLTE1cHggcmdiYSgzMiwgODgsIDE0MywgMC4xNSk7XG4gIGdhcDogJHtzcGFjaW5nLm1lZGl1bX07XG5cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgZ2FwOiAwO1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5tZWRpdW19O1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgfVxuYDtcblxuY29uc3QgVGl0bGUgPSBzdHlsZWQuaDNgXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgJHtmb250cy5zaXplcygxOCl9O1xuICBtYXJnaW4tdG9wOiAwO1xuYDtcblxuY29uc3QgQ2FwdGlvbiA9IHN0eWxlZC5wYFxuICAke2ZvbnRzLnNpemVzKDE0KX07XG5gO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGZsZXgtYmFzaXM6IDA7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgJiYge1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIHdpZHRoOiAxMzRweDtcbiAgICBoZWlnaHQ6IDEzNHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDVweDtcblxuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgICAgd2lkdGg6IDIwMHB4O1xuICAgICAgaGVpZ2h0OiAyMDBweDtcbiAgICB9XG4gIH1cbmA7XG5cbmludGVyZmFjZSBJbWFnZU1ldGEge1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG59XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlOiBJbWFnZU1ldGE7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGNhcHRpb246IHN0cmluZztcbiAgdXJsOiBzdHJpbmc7XG4gIGJ1dHRvblRleHQ6IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFJlc291cmNlQm94ID0gKHsgaW1hZ2UsIHRpdGxlLCBjYXB0aW9uLCB1cmwsIGJ1dHRvblRleHQgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8UmVzb3VyY2VCb3hDb250YWluZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZS5zcmN9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgPENvbnRlbnRXcmFwcGVyPlxuICAgICAgICA8VGl0bGU+e3RpdGxlfTwvVGl0bGU+XG4gICAgICAgIDxDYXB0aW9uPntjYXB0aW9ufTwvQ2FwdGlvbj5cbiAgICAgICAgPFNhZmVMaW5rQnV0dG9uIHRvPXt1cmx9IHRhcmdldD1cIl9ibGFua1wiIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIj5cbiAgICAgICAgICB7YnV0dG9uVGV4dH1cbiAgICAgICAgICA8TGF1bmNoIGFyaWEtaGlkZGVuIC8+XG4gICAgICAgIDwvU2FmZUxpbmtCdXR0b24+XG4gICAgICA8L0NvbnRlbnRXcmFwcGVyPlxuICAgIDwvUmVzb3VyY2VCb3hDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBSZXNvdXJjZUJveDtcbiJdfQ== */"));
-const StyledImage = /*#__PURE__*/_styled(Image, {
-  target: "e1byxq9a0",
-  label: "StyledImage"
-})("&&{object-fit:cover;width:134px;height:134px;border-radius:5px;", mq.range({
-  until: breakpoints.desktop
-}), "{width:200px;height:200px;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlQm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRGlDIiwiZmlsZSI6IlJlc291cmNlQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBicmVha3BvaW50cywgZm9udHMsIG1xLCBjb2xvcnMsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgTGF1bmNoIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgSW1hZ2UgfSBmcm9tIFwiQG5kbGEvcHJpbWl0aXZlc1wiO1xuaW1wb3J0IHsgU2FmZUxpbmtCdXR0b24gfSBmcm9tIFwiQG5kbGEvc2FmZWxpbmtcIjtcblxuY29uc3QgUmVzb3VyY2VCb3hDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5uc21hbGx9O1xuICBib3JkZXItcmFkaXVzOiA1cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmxpZ2h0fTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIGJveC1zaGFkb3c6IDBweCAyMHB4IDM1cHggLTE1cHggcmdiYSgzMiwgODgsIDE0MywgMC4xNSk7XG4gIGdhcDogJHtzcGFjaW5nLm1lZGl1bX07XG5cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgZ2FwOiAwO1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5tZWRpdW19O1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgfVxuYDtcblxuY29uc3QgVGl0bGUgPSBzdHlsZWQuaDNgXG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgJHtmb250cy5zaXplcygxOCl9O1xuICBtYXJnaW4tdG9wOiAwO1xuYDtcblxuY29uc3QgQ2FwdGlvbiA9IHN0eWxlZC5wYFxuICAke2ZvbnRzLnNpemVzKDE0KX07XG5gO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGZsZXgtYmFzaXM6IDA7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgJiYge1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIHdpZHRoOiAxMzRweDtcbiAgICBoZWlnaHQ6IDEzNHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDVweDtcblxuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgICAgd2lkdGg6IDIwMHB4O1xuICAgICAgaGVpZ2h0OiAyMDBweDtcbiAgICB9XG4gIH1cbmA7XG5cbmludGVyZmFjZSBJbWFnZU1ldGEge1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG59XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlOiBJbWFnZU1ldGE7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGNhcHRpb246IHN0cmluZztcbiAgdXJsOiBzdHJpbmc7XG4gIGJ1dHRvblRleHQ6IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFJlc291cmNlQm94ID0gKHsgaW1hZ2UsIHRpdGxlLCBjYXB0aW9uLCB1cmwsIGJ1dHRvblRleHQgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8UmVzb3VyY2VCb3hDb250YWluZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtpbWFnZS5zcmN9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgPENvbnRlbnRXcmFwcGVyPlxuICAgICAgICA8VGl0bGU+e3RpdGxlfTwvVGl0bGU+XG4gICAgICAgIDxDYXB0aW9uPntjYXB0aW9ufTwvQ2FwdGlvbj5cbiAgICAgICAgPFNhZmVMaW5rQnV0dG9uIHRvPXt1cmx9IHRhcmdldD1cIl9ibGFua1wiIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIj5cbiAgICAgICAgICB7YnV0dG9uVGV4dH1cbiAgICAgICAgICA8TGF1bmNoIGFyaWEtaGlkZGVuIC8+XG4gICAgICAgIDwvU2FmZUxpbmtCdXR0b24+XG4gICAgICA8L0NvbnRlbnRXcmFwcGVyPlxuICAgIDwvUmVzb3VyY2VCb3hDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBSZXNvdXJjZUJveDtcbiJdfQ== */"));
+const Container = styled("div", {
+  base: {
+    display: "flex",
+    padding: "medium",
+    borderRadius: "xsmall",
+    border: "1px solid",
+    borderColor: "stroke.default",
+    boxShadow: "full",
+    gap: "medium",
+    tabletWideDown: {
+      padding: "xsmall"
+    },
+    tabletDown: {
+      flexDirection: "column",
+      gap: "0",
+      padding: "0"
+    }
+  }
+});
+const ContentWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "xsmall",
+    flex: "1",
+    tabletDown: {
+      padding: "xsmall"
+    }
+  }
+});
+const StyledImage = styled(Image, {
+  base: {
+    objectFit: "cover",
+    borderRadius: "xsmall",
+    width: "fit-content",
+    aspectRatio: "1/1",
+    tabletDown: {
+      width: "100%",
+      borderRadius: "0"
+    }
+  }
+});
+const StyledText = styled(Text, {
+  base: {
+    flex: "1"
+  }
+});
 export const ResourceBox = _ref => {
   let {
     image,
@@ -46,22 +68,28 @@ export const ResourceBox = _ref => {
     url,
     buttonText
   } = _ref;
-  return _jsxs(ResourceBoxContainer, {
+  return _jsxs(Container, {
     children: [_jsx(StyledImage, {
       src: image.src,
-      alt: image.alt
+      alt: image.alt,
+      sizes: `(min-width: ${token("breakpoints.desktop")}) 150px, (max-width: ${token("breakpoints.tablet")} ) 400px, 200px`
     }), _jsxs(ContentWrapper, {
-      children: [_jsx(Title, {
-        children: title
-      }), _jsx(Caption, {
+      children: [_jsx(Heading, {
+        textStyle: "label.large",
+        fontWeight: "bold",
+        asChild: true,
+        consumeCss: true,
+        children: _jsx("h3", {
+          children: title
+        })
+      }), _jsx(StyledText, {
+        textStyle: "body.medium",
         children: caption
       }), _jsxs(SafeLinkButton, {
         to: url,
         target: "_blank",
         variant: "secondary",
-        children: [buttonText, _jsx(Launch, {
-          "aria-hidden": true
-        })]
+        children: [buttonText, _jsx(Launch, {})]
       })]
     })]
   });

package/es/TagSelector/TagSelector.js

@@ -1,145 +1,138 @@
-import _styled from "@emotion/styled/base";
-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.
  *
  */
 
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import CreatableSelect from "react-select/creatable";
-import { colors, fonts, spacing, utils } from "@ndla/core";
-import { createAriaMessages } from "./ariaMessages";
-import Control from "./Control";
-import DropdownIndicator from "./DropdownIndicator";
-import Input from "./Input";
-import Menu from "./Menu";
-import MenuList from "./MenuList";
-import Option from "./Option";
-import SelectContainer from "./SelectContainer";
-import ValueButton from "./ValueButton";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const styles = {
-  menu: () => ({}),
-  dropdownIndicator: () => ({}),
-  placeholder: provided => ({
-    ...provided,
-    padding: `0 ${spacing.small}`,
-    color: colors.brand.primary,
-    margin: 0
-  }),
-  valueContainer: provided => ({
-    ...provided,
-    padding: 0
-  }),
-  indicatorSeparator: () => ({
-    display: "none"
-  }),
-  indicatorsContainer: provided => ({
-    ...provided,
-    alignSelf: "flex-end"
-  })
-};
-const StyledTagSelector = /*#__PURE__*/_styled("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__*/_styled("label", {
-  target: "eor9swf0",
-  label: "StyledLabel"
-})("font-weight:", fonts.weight.semibold, ";", p => p.labelHidden && 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 => {
+import { forwardRef, useEffect, useId, useRef } from "react";
+import { ComboboxContext, useTagsInputContext } from "@ark-ui/react";
+import { Cross } from "@ndla/icons/action";
+import { ComboboxClearTrigger, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxRoot, ComboboxTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemPreview, TagsInputItemText, TagsInputRoot, TagsInputItemInput } from "@ndla/primitives";
+import { contains } from "@ndla/util";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+export 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
-  } = useTranslation();
-  const [input, setInput] = useState("");
-  const tags = useMemo(() => _tags.map(tag => ({
-    value: tag,
-    label: tag
-  })), [_tags]);
-  const selected = 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 handleChange = tags => {
-    onChange(tags.map(tag => tag.value));
+  const ids = {
+    root: useId(),
+    input: useId(),
+    control: useId()
   };
-  const createLabel = tag => t("tagSelector.createLabel", {
-    tag
+  const controlRef = useRef(undefined);
+  useEffect(() => {
+    if (!controlRef.current) {
+      controlRef.current = document.getElementById(ids.control);
+    }
+  }, [ids.control]);
+  return _jsx(ComboboxRoot, {
+    ids: ids,
+    asChild: true,
+    allowCustomValue: allowCustomValue,
+    multiple: multiple,
+    selectionBehavior: selectionBehavior,
+    onValueChange: onValueChange,
+    translations: translations,
+    onPointerDownOutside: event => {
+      if (contains(controlRef.current, event.detail.originalEvent.target)) {
+        event.preventDefault();
+      }
+    },
+    value: value,
+    ...rest,
+    children: _jsx(ComboboxContext, {
+      children: api => _jsx(TagsInputRoot, {
+        ids: ids,
+        value: value,
+        onInputValueChange: details => api.setInputValue(details.inputValue),
+        editable: editable,
+        onValueChange: onValueChange,
+        addOnPaste: addOnPaste,
+        translations: translations,
+        children: children
+      })
+    })
   });
-  return _jsxs(StyledTagSelector, {
-    className: className,
-    children: [label && _jsx(StyledLabel, {
-      labelHidden: labelHidden,
-      htmlFor: "tagselector-creatable",
-      id: "tagselector-label",
-      children: label
-    }), _jsx(CreatableSelect, {
-      id: "tagselector-creatable",
-      "aria-labelledby": label ? "tagselector-label" : undefined,
-      ariaLiveMessages: createAriaMessages(t),
-      components: {
-        DropdownIndicator,
-        MultiValue: ValueButton,
-        SelectContainer,
-        MenuList,
-        Control,
-        Option,
-        Menu,
-        Input
-      },
-      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
-        });
+};
+export const TagSelectorLabel = ComboboxLabel;
+export const TagSelectorItemInput = TagsInputItemInput;
+export const TagSelectorTrigger = ComboboxTrigger;
+export const TagSelectorControl = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return _jsx(ComboboxControl, {
+    asChild: true,
+    children: _jsx(TagsInputControl, {
+      ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+export const TagSelectorClearTrigger = ComboboxClearTrigger;
+// If you need to modify the TagsInputItem, you can use this.
+export const TagSelectorInputBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  const tagsApi = useTagsInputContext();
+  return _jsx(ComboboxInput, {
+    asChild: true,
+    children: _jsx(TagsInputInput, {
+      ...props,
+      onKeyDown: event => {
+        if (event.key === "Enter") {
+          tagsApi.addValue(tagsApi.inputValue);
+        }
       },
-      styles: styles,
-      tabSelectsValue: false,
-      value: selected
+      ref: ref,
+      children: children
+    })
+  });
+});
+export const TagSelectorInput = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  const tagsApi = useTagsInputContext();
+  return _jsxs(_Fragment, {
+    children: [tagsApi.value.map((value, index) => _jsxs(TagsInputItem, {
+      index: index,
+      value: value,
+      children: [_jsxs(TagsInputItemPreview, {
+        children: [_jsx(TagsInputItemText, {
+          children: value
+        }), _jsx(TagsInputItemDeleteTrigger, {
+          children: _jsx(Cross, {})
+        })]
+      }), _jsx(TagsInputItemInput, {})]
+    }, value)), _jsx(ComboboxInput, {
+      asChild: true,
+      children: _jsx(TagsInputInput, {
+        ...props,
+        onKeyDown: event => {
+          if (event.key === "Enter") {
+            tagsApi.addValue(tagsApi.inputValue);
+          }
+        },
+        ref: ref,
+        children: children
+      })
     })]
   });
-};
-export default TagSelector;
+});

package/es/i18n/index.js

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

package/es/i18n/useComponentTranslations.js

@@ -0,0 +1,83 @@
+/**
+ * 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 { useTranslation } from "react-i18next";
+export const useTagsInputTranslations = translations => {
+  const {
+    t
+  } = 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
+  };
+};
+export const useComboboxTranslations = translations => {
+  const {
+    t
+  } = useTranslation("translation", {
+    keyPrefix: "component.combobox"
+  });
+  return {
+    triggerLabel: t("triggerLabel"),
+    clearTriggerLabel: t("clearTriggerLabel"),
+    ...translations
+  };
+};
+export const useTagSelectorTranslations = translations => {
+  const tagsInputTranslations = useTagsInputTranslations();
+  const comboboxTranslations = useComboboxTranslations();
+  return {
+    ...comboboxTranslations,
+    ...tagsInputTranslations,
+    ...translations
+  };
+};
+export const usePaginationTranslations = translations => {
+  const {
+    t
+  } = 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
+  };
+};

package/es/index.js

@@ -9,23 +9,18 @@
 // Ignore typescript implicit any warning and export all javascript components
 // Move components to this file when they are migrated to typescript
 
-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 { 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 { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, SourceMaterialHero, Hero, NdlaFilmHero, ConceptHero, HeroContent } from "./Hero";
 export { FooterBlock } from "./Footer";
-export { Figure } from "./Figure";
 export { LanguageSelector } from "./LanguageSelector";
 export { default as SearchResultSleeve } from "./Search/SearchResultSleeve";
 export { default as ContentTypeResult } from "./Search/ContentTypeResult";
@@ -42,17 +37,16 @@ export { default as messagesEN } from "./locale/messages-en";
 export { default as messagesSE } from "./locale/messages-se";
 export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } 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 { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { default as ContentPlaceholder } from "./ContentPlaceholder";
-export { Notion } from "./Notion";
-export { TagSelector } from "./TagSelector";
+export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput } from "./TagSelector/TagSelector";
 export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from "./SnackBar";
 export { TreeStructure } 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";
@@ -61,7 +55,6 @@ export { default as ContactBlock } from "./ContactBlock";
 export { CampaignBlock } from "./CampaignBlock";
 export { Grid, GridParallaxItem } from "./Grid";
 export { default as FrontpageArticle, FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH } from "./FrontpageArticle";
-export { DefinitionTerm, DefinitionDescription } from "./DefinitionList";
 export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";