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

package/lib/Embed/InlineTriggerButton.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineTriggerButton = void 0;
+var _react = require("react");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _util = require("@ndla/util");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/**
+ * 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 StyledSpan = (0, _jsx2.styled)("span", {
+  base: {
+    position: "relative",
+    overflow: "visible",
+    borderBottom: "1px solid",
+    borderStyle: "dashed",
+    borderColor: "stroke.hover",
+    paddingBlock: "4xsmall",
+    paddingInline: "4xsmall",
+    width: "fit-content",
+    cursor: "pointer",
+    _hover: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.hover"
+    },
+    _active: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.active"
+    },
+    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
+    _focusVisible: {
+      outline: "none",
+      borderRadius: "0",
+      _after: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        outline: "3px",
+        borderRadius: "xsmall",
+        outlineColor: "stroke.default",
+        outlineOffset: "3px",
+        outlineStyle: "solid"
+      }
+    }
+  }
+});
+const InlineTriggerButton = exports.InlineTriggerButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    onClick,
+    ...props
+  } = _ref;
+  const spanRef = (0, _react.useRef)(null);
+
+  // Emulate a button click when pressing Enter or Space
+  const onKeyboardEvent = (0, _react.useCallback)(event => {
+    if (event.key === "Enter" || event.key === " ") {
+      spanRef.current?.click();
+    }
+  }, []);
+  return (0, _jsxRuntime.jsx)(StyledSpan, {
+    ref: (0, _util.composeRefs)(spanRef, ref),
+    onKeyUp: onKeyboardEvent,
+    onClick: onClick,
+    role: "button",
+    tabIndex: 0,
+    ...props
+  });
+});

package/lib/Embed/RelatedContentEmbed.js

@@ -36,29 +36,27 @@ const RelatedContentEmbed = _ref => {
     embedData
   } = embed;
   if (embedData.articleId && data) {
-    var _data$resource, _ref2, _data$resource$paths$, _data$resource2, _data$resource3, _data$article$title$t, _data$article$title, _data$article$metaDes, _data$article$metaDes2;
-    const typeId = (_data$resource = data.resource) === null || _data$resource === void 0 || (_data$resource = _data$resource.resourceTypes.find(rt => _ContentType.contentTypeMapping[rt.id])) === null || _data$resource === void 0 ? void 0 : _data$resource.id;
+    const typeId = data.resource?.resourceTypes.find(rt => _ContentType.contentTypeMapping[rt.id])?.id;
     const type = typeId ? _ContentType.contentTypeMapping[typeId] : undefined;
-    const path = (_ref2 = (_data$resource$paths$ = (_data$resource2 = data.resource) === null || _data$resource2 === void 0 ? void 0 : _data$resource2.paths.find(p => p.split("/")[1] === (subject === null || subject === void 0 ? void 0 : subject.replace("urn:", "")))) !== null && _data$resource$paths$ !== void 0 ? _data$resource$paths$ : (_data$resource3 = data.resource) === null || _data$resource3 === void 0 ? void 0 : _data$resource3.path) !== null && _ref2 !== void 0 ? _ref2 : "/article/".concat(embedData.articleId);
+    const path = data.resource?.paths.find(p => p.split("/")[1] === subject?.replace("urn:", "")) ?? data.resource?.path ?? `/article/${embedData.articleId}`;
     return (0, _jsxRuntime.jsx)(_RelatedArticleList.RelatedArticle, {
-      title: (_data$article$title$t = (_data$article$title = data.article.title) === null || _data$article$title === void 0 ? void 0 : _data$article$title.title) !== null && _data$article$title$t !== void 0 ? _data$article$title$t : "",
-      introduction: (_data$article$metaDes = (_data$article$metaDes2 = data.article.metaDescription) === null || _data$article$metaDes2 === void 0 ? void 0 : _data$article$metaDes2.metaDescription) !== null && _data$article$metaDes !== void 0 ? _data$article$metaDes : "",
+      title: data.article.title?.title ?? "",
+      introduction: data.article.metaDescription?.metaDescription ?? "",
       target: isOembed ? "_blank" : undefined,
-      to: "".concat(ndlaFrontendDomain !== null && ndlaFrontendDomain !== void 0 ? ndlaFrontendDomain : "").concat(path !== null && path !== void 0 ? path : ""),
+      to: `${ndlaFrontendDomain ?? ""}${path ?? ""}`,
       type: type
     });
   }
   if (typeof embedData.url === "string") {
-    var _embedData$title, _embedData$url$match;
     return (0, _jsxRuntime.jsx)(_RelatedArticleList.RelatedArticle, {
-      title: (_embedData$title = embedData.title) !== null && _embedData$title !== void 0 ? _embedData$title : "",
+      title: embedData.title ?? "",
       introduction: "",
       to: embedData.url,
       target: "_blank",
       type: "external",
-      linkInfo: "".concat(t("related.linkInfo"), " ").concat(
+      linkInfo: `${t("related.linkInfo")} ${
       // Get domain name only from url
-      _punycode.default.toUnicode(((_embedData$url$match = embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)) === null || _embedData$url$match === void 0 ? void 0 : _embedData$url$match[1]) || embedData.url))
+      _punycode.default.toUnicode(embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url)}`
     });
   }
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});

package/lib/Embed/UnknownEmbed.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _reactI18next = require("react-i18next");
-var _core = require("@ndla/core");
+var _primitives = require("@ndla/primitives");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -17,10 +15,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const StyledSpan = /*#__PURE__*/(0, _base.default)("span", {
-  target: "e1rt6jrv0",
-  label: "StyledSpan"
-})("color:", _core.colors.support.red, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlVua25vd25FbWJlZC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUI4QiIsImZpbGUiOiJVbmtub3duRW1iZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNvbG9ycyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBNZXRhRGF0YSB9IGZyb20gXCJAbmRsYS90eXBlcy1lbWJlZFwiO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBlbWJlZDogTWV0YURhdGE8YW55LCBhbnk+O1xufVxuXG5jb25zdCBTdHlsZWRTcGFuID0gc3R5bGVkLnNwYW5gXG4gIGNvbG9yOiAke2NvbG9ycy5zdXBwb3J0LnJlZH07XG5gO1xuXG5jb25zdCBVbmtub3duRW1iZWQgPSAoeyBlbWJlZCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIHJldHVybiA8U3R5bGVkU3Bhbj57dChcImVtYmVkLnVuc3VwcG9ydGVkXCIsIHsgdHlwZTogZW1iZWQucmVzb3VyY2UgfSl9PC9TdHlsZWRTcGFuPjtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFVua25vd25FbWJlZDtcbiJdfQ== */"));
 const UnknownEmbed = _ref => {
   let {
     embed
@@ -28,9 +22,14 @@ const UnknownEmbed = _ref => {
   const {
     t
   } = (0, _reactI18next.useTranslation)();
-  return (0, _jsxRuntime.jsx)(StyledSpan, {
-    children: t("embed.unsupported", {
-      type: embed.resource
+  return (0, _jsxRuntime.jsx)(_primitives.Text, {
+    color: "text.error",
+    asChild: true,
+    consumeCss: true,
+    children: (0, _jsxRuntime.jsx)("span", {
+      children: t("embed.unsupported", {
+        type: embed.resource
+      })
     })
   });
 };

package/lib/Embed/UuDisclaimerEmbed.js

@@ -4,41 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _reactI18next = require("react-i18next");
-var _core = require("@ndla/core");
 var _common = require("@ndla/icons/common");
+var _primitives = require("@ndla/primitives");
 var _safelink = require("@ndla/safelink");
-var _Messages = require("../Messages");
+var _jsx2 = require("@ndla/styled-system/jsx");
 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) 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 StyledMessageBox = /*#__PURE__*/(0, _base.default)(_Messages.MessageBox, {
-  target: "e1pgbrp22",
-  label: "StyledMessageBox"
-})(process.env.NODE_ENV === "production" ? {
-  name: "nvjrcv",
-  styles: "display:flex;flex-align:center"
-} : {
-  name: "nvjrcv",
-  styles: "display:flex;flex-align:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlV1RGlzY2xhaW1lckVtYmVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQjJDIiwiZmlsZSI6IlV1RGlzY2xhaW1lckVtYmVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDI0LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEluZm9ybWF0aW9uT3V0bGluZSB9IGZyb20gXCJAbmRsYS9pY29ucy9jb21tb25cIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5pbXBvcnQgeyBVdURpc2NsYWltZXJNZXRhRGF0YSB9IGZyb20gXCJAbmRsYS90eXBlcy1lbWJlZFwiO1xuaW1wb3J0IHsgTWVzc2FnZUJveCB9IGZyb20gXCIuLi9NZXNzYWdlc1wiO1xuaW50ZXJmYWNlIFByb3BzIHtcbiAgZW1iZWQ6IFV1RGlzY2xhaW1lck1ldGFEYXRhO1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbn1cblxuY29uc3QgU3R5bGVkTWVzc2FnZUJveCA9IHN0eWxlZChNZXNzYWdlQm94KWBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1hbGlnbjogY2VudGVyO1xuYDtcblxuY29uc3QgRGlzY2xhaW1lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsb3c7XG4gICR7Zm9udHMuc2l6ZXMoXCIxOHB4XCIsIFwiMjRweFwiKX07XG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICAtbW96LXVzZXItc2VsZWN0OiBub25lO1xuICAtbXMtdXNlci1zZWxlY3Q6IG5vbmU7XG5gO1xuXG5jb25zdCBEaXNjbGFpbWVyV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gID4gOm50aC1jaGlsZCgyKSB7XG4gICAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFV1RGlzY2xhaW1lckVtYmVkID0gKHsgZW1iZWQsIGNoaWxkcmVuIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBpZiAoZW1iZWQuc3RhdHVzID09PSBcImVycm9yXCIpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIGNvbnN0IHsgZW1iZWREYXRhLCBkYXRhIH0gPSBlbWJlZDtcblxuICBjb25zdCBkaXNjbGFpbWVyTGluayA9IGRhdGE/LmRpc2NsYWltZXJMaW5rID8gKFxuICAgIDw+XG4gICAgICB7YCAke3QoXCJ1dURpc2NsYWltZXIuYWx0ZXJuYXRpdmVcIil9IGB9XG4gICAgICA8U2FmZUxpbmsgdG89e2RhdGEuZGlzY2xhaW1lckxpbmsuaHJlZn0gdGFyZ2V0PVwiX2JsYW5rXCIgcmVsPVwibm9vcGVuZXIgbm9yZWZlcnJlclwiPlxuICAgICAgICB7ZGF0YS5kaXNjbGFpbWVyTGluay50ZXh0fVxuICAgICAgPC9TYWZlTGluaz5cbiAgICA8Lz5cbiAgKSA6IG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8RGlzY2xhaW1lcldyYXBwZXIgcm9sZT1cInJlZ2lvblwiPlxuICAgICAgPFN0eWxlZE1lc3NhZ2VCb3ggdHlwZT1cImluZm9cIiBjb250ZW50RWRpdGFibGU9e2ZhbHNlfT5cbiAgICAgICAgPEluZm9ybWF0aW9uT3V0bGluZSAvPlxuICAgICAgICA8RGlzY2xhaW1lcj5cbiAgICAgICAgICB7ZW1iZWREYXRhLmRpc2NsYWltZXJ9XG4gICAgICAgICAge2Rpc2NsYWltZXJMaW5rfVxuICAgICAgICA8L0Rpc2NsYWltZXI+XG4gICAgICA8L1N0eWxlZE1lc3NhZ2VCb3g+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9EaXNjbGFpbWVyV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFV1RGlzY2xhaW1lckVtYmVkO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+
+const StyledMessageBox = (0, _jsx2.styled)(_primitives.MessageBox, {
+  base: {
+    display: "flex",
+    alignItems: "center"
+  }
+});
+const Disclaimer = (0, _jsx2.styled)("div", {
+  base: {
+    textStyle: "body.medium"
+  }
 });
-const Disclaimer = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1pgbrp21",
-  label: "Disclaimer"
-})("display:flow;", _core.fonts.sizes("18px", "24px"), ";user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlV1RGlzY2xhaW1lckVtYmVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQjZCIiwiZmlsZSI6IlV1RGlzY2xhaW1lckVtYmVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDI0LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEluZm9ybWF0aW9uT3V0bGluZSB9IGZyb20gXCJAbmRsYS9pY29ucy9jb21tb25cIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5pbXBvcnQgeyBVdURpc2NsYWltZXJNZXRhRGF0YSB9IGZyb20gXCJAbmRsYS90eXBlcy1lbWJlZFwiO1xuaW1wb3J0IHsgTWVzc2FnZUJveCB9IGZyb20gXCIuLi9NZXNzYWdlc1wiO1xuaW50ZXJmYWNlIFByb3BzIHtcbiAgZW1iZWQ6IFV1RGlzY2xhaW1lck1ldGFEYXRhO1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbn1cblxuY29uc3QgU3R5bGVkTWVzc2FnZUJveCA9IHN0eWxlZChNZXNzYWdlQm94KWBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1hbGlnbjogY2VudGVyO1xuYDtcblxuY29uc3QgRGlzY2xhaW1lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsb3c7XG4gICR7Zm9udHMuc2l6ZXMoXCIxOHB4XCIsIFwiMjRweFwiKX07XG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICAtbW96LXVzZXItc2VsZWN0OiBub25lO1xuICAtbXMtdXNlci1zZWxlY3Q6IG5vbmU7XG5gO1xuXG5jb25zdCBEaXNjbGFpbWVyV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gID4gOm50aC1jaGlsZCgyKSB7XG4gICAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFV1RGlzY2xhaW1lckVtYmVkID0gKHsgZW1iZWQsIGNoaWxkcmVuIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBpZiAoZW1iZWQuc3RhdHVzID09PSBcImVycm9yXCIpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIGNvbnN0IHsgZW1iZWREYXRhLCBkYXRhIH0gPSBlbWJlZDtcblxuICBjb25zdCBkaXNjbGFpbWVyTGluayA9IGRhdGE/LmRpc2NsYWltZXJMaW5rID8gKFxuICAgIDw+XG4gICAgICB7YCAke3QoXCJ1dURpc2NsYWltZXIuYWx0ZXJuYXRpdmVcIil9IGB9XG4gICAgICA8U2FmZUxpbmsgdG89e2RhdGEuZGlzY2xhaW1lckxpbmsuaHJlZn0gdGFyZ2V0PVwiX2JsYW5rXCIgcmVsPVwibm9vcGVuZXIgbm9yZWZlcnJlclwiPlxuICAgICAgICB7ZGF0YS5kaXNjbGFpbWVyTGluay50ZXh0fVxuICAgICAgPC9TYWZlTGluaz5cbiAgICA8Lz5cbiAgKSA6IG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8RGlzY2xhaW1lcldyYXBwZXIgcm9sZT1cInJlZ2lvblwiPlxuICAgICAgPFN0eWxlZE1lc3NhZ2VCb3ggdHlwZT1cImluZm9cIiBjb250ZW50RWRpdGFibGU9e2ZhbHNlfT5cbiAgICAgICAgPEluZm9ybWF0aW9uT3V0bGluZSAvPlxuICAgICAgICA8RGlzY2xhaW1lcj5cbiAgICAgICAgICB7ZW1iZWREYXRhLmRpc2NsYWltZXJ9XG4gICAgICAgICAge2Rpc2NsYWltZXJMaW5rfVxuICAgICAgICA8L0Rpc2NsYWltZXI+XG4gICAgICA8L1N0eWxlZE1lc3NhZ2VCb3g+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9EaXNjbGFpbWVyV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFV1RGlzY2xhaW1lckVtYmVkO1xuIl19 */"));
-const DisclaimerWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1pgbrp20",
-  label: "DisclaimerWrapper"
-})(">:nth-child(2){margin-top:", _core.spacing.xsmall, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlV1RGlzY2xhaW1lckVtYmVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQ29DIiwiZmlsZSI6IlV1RGlzY2xhaW1lckVtYmVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDI0LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEluZm9ybWF0aW9uT3V0bGluZSB9IGZyb20gXCJAbmRsYS9pY29ucy9jb21tb25cIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5pbXBvcnQgeyBVdURpc2NsYWltZXJNZXRhRGF0YSB9IGZyb20gXCJAbmRsYS90eXBlcy1lbWJlZFwiO1xuaW1wb3J0IHsgTWVzc2FnZUJveCB9IGZyb20gXCIuLi9NZXNzYWdlc1wiO1xuaW50ZXJmYWNlIFByb3BzIHtcbiAgZW1iZWQ6IFV1RGlzY2xhaW1lck1ldGFEYXRhO1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbn1cblxuY29uc3QgU3R5bGVkTWVzc2FnZUJveCA9IHN0eWxlZChNZXNzYWdlQm94KWBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1hbGlnbjogY2VudGVyO1xuYDtcblxuY29uc3QgRGlzY2xhaW1lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsb3c7XG4gICR7Zm9udHMuc2l6ZXMoXCIxOHB4XCIsIFwiMjRweFwiKX07XG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuICAtbW96LXVzZXItc2VsZWN0OiBub25lO1xuICAtbXMtdXNlci1zZWxlY3Q6IG5vbmU7XG5gO1xuXG5jb25zdCBEaXNjbGFpbWVyV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gID4gOm50aC1jaGlsZCgyKSB7XG4gICAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFV1RGlzY2xhaW1lckVtYmVkID0gKHsgZW1iZWQsIGNoaWxkcmVuIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBpZiAoZW1iZWQuc3RhdHVzID09PSBcImVycm9yXCIpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIGNvbnN0IHsgZW1iZWREYXRhLCBkYXRhIH0gPSBlbWJlZDtcblxuICBjb25zdCBkaXNjbGFpbWVyTGluayA9IGRhdGE/LmRpc2NsYWltZXJMaW5rID8gKFxuICAgIDw+XG4gICAgICB7YCAke3QoXCJ1dURpc2NsYWltZXIuYWx0ZXJuYXRpdmVcIil9IGB9XG4gICAgICA8U2FmZUxpbmsgdG89e2RhdGEuZGlzY2xhaW1lckxpbmsuaHJlZn0gdGFyZ2V0PVwiX2JsYW5rXCIgcmVsPVwibm9vcGVuZXIgbm9yZWZlcnJlclwiPlxuICAgICAgICB7ZGF0YS5kaXNjbGFpbWVyTGluay50ZXh0fVxuICAgICAgPC9TYWZlTGluaz5cbiAgICA8Lz5cbiAgKSA6IG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8RGlzY2xhaW1lcldyYXBwZXIgcm9sZT1cInJlZ2lvblwiPlxuICAgICAgPFN0eWxlZE1lc3NhZ2VCb3ggdHlwZT1cImluZm9cIiBjb250ZW50RWRpdGFibGU9e2ZhbHNlfT5cbiAgICAgICAgPEluZm9ybWF0aW9uT3V0bGluZSAvPlxuICAgICAgICA8RGlzY2xhaW1lcj5cbiAgICAgICAgICB7ZW1iZWREYXRhLmRpc2NsYWltZXJ9XG4gICAgICAgICAge2Rpc2NsYWltZXJMaW5rfVxuICAgICAgICA8L0Rpc2NsYWltZXI+XG4gICAgICA8L1N0eWxlZE1lc3NhZ2VCb3g+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9EaXNjbGFpbWVyV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFV1RGlzY2xhaW1lckVtYmVkO1xuIl19 */"));
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
@@ -54,18 +44,18 @@ const UuDisclaimerEmbed = _ref => {
     embedData,
     data
   } = embed;
-  const disclaimerLink = data !== null && data !== void 0 && data.disclaimerLink ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [" ".concat(t("uuDisclaimer.alternative"), " "), (0, _jsxRuntime.jsx)(_safelink.SafeLink, {
+  const disclaimerLink = data?.disclaimerLink ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [` ${t("uuDisclaimer.alternative")} `, (0, _jsxRuntime.jsx)(_safelink.SafeLink, {
       to: data.disclaimerLink.href,
       target: "_blank",
       rel: "noopener noreferrer",
       children: data.disclaimerLink.text
     })]
   }) : null;
-  return (0, _jsxRuntime.jsxs)(DisclaimerWrapper, {
+  return (0, _jsxRuntime.jsxs)("div", {
     role: "region",
     children: [(0, _jsxRuntime.jsxs)(StyledMessageBox, {
-      type: "info",
+      variant: "warning",
       contentEditable: false,
       children: [(0, _jsxRuntime.jsx)(_common.InformationOutline, {}), (0, _jsxRuntime.jsxs)(Disclaimer, {
         children: [embedData.disclaimer, disclaimerLink]

package/lib/Embed/index.d.ts

@@ -14,11 +14,10 @@ export { default as FootnoteEmbed } from "./FootnoteEmbed";
 export { default as BrightcoveEmbed } from "./BrightcoveEmbed";
 export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
 export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
-export { default as ConceptEmbed } from "./ConceptEmbed";
-export { ConceptNotionV2 } from "./conceptComponents";
+export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
+export type { InlineConceptProps, BlockConceptProps } from "./ConceptEmbed";
 export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
-export { InlineConcept, BlockConcept } from "./ConceptEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";
 export { default as CodeEmbed } from "./CodeEmbed";

package/lib/Embed/index.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "CodeEmbed", {
 Object.defineProperty(exports, "ConceptEmbed", {
   enumerable: true,
   get: function () {
-    return _ConceptEmbed.default;
+    return _ConceptEmbed.ConceptEmbed;
   }
 });
 Object.defineProperty(exports, "ConceptListEmbed", {
@@ -39,12 +39,6 @@ Object.defineProperty(exports, "ConceptListEmbed", {
     return _ConceptListEmbed.default;
   }
 });
-Object.defineProperty(exports, "ConceptNotionV2", {
-  enumerable: true,
-  get: function () {
-    return _conceptComponents.ConceptNotionV2;
-  }
-});
 Object.defineProperty(exports, "ContentLinkEmbed", {
   enumerable: true,
   get: function () {
@@ -132,8 +126,7 @@ var _FootnoteEmbed = _interopRequireDefault(require("./FootnoteEmbed"));
 var _BrightcoveEmbed = _interopRequireDefault(require("./BrightcoveEmbed"));
 var _ContentLinkEmbed = _interopRequireDefault(require("./ContentLinkEmbed"));
 var _RelatedContentEmbed = _interopRequireDefault(require("./RelatedContentEmbed"));
-var _ConceptEmbed = _interopRequireWildcard(require("./ConceptEmbed"));
-var _conceptComponents = require("./conceptComponents");
+var _ConceptEmbed = require("./ConceptEmbed");
 var _ConceptListEmbed = _interopRequireDefault(require("./ConceptListEmbed"));
 var _UnknownEmbed = _interopRequireDefault(require("./UnknownEmbed"));
 var _UuDisclaimerEmbed = _interopRequireDefault(require("./UuDisclaimerEmbed"));

package/lib/ErrorMessage/ErrorMessage.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ErrorMessage = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _core = require("@ndla/core");
+var _primitives = require("@ndla/primitives");
 var _safelink = require("@ndla/safelink");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2019-present, NDLA.
  *
@@ -17,26 +16,44 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const StyledErrorMessage = /*#__PURE__*/(0, _base.default)("article", {
-  target: "e1n5vqts4",
-  label: "StyledErrorMessage"
-})("text-align:center;a{color:", _core.colors.brand.primary, ";}h1{margin-top:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVycm9yTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYXlDIiwiZmlsZSI6IkVycm9yTWVzc2FnZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcsIGJyZWFrcG9pbnRzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5cbmNvbnN0IFN0eWxlZEVycm9yTWVzc2FnZSA9IHN0eWxlZC5hcnRpY2xlYFxuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGEge1xuICAgIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuXG4gIGgxIHtcbiAgICBtYXJnaW4tdG9wOiAwO1xuICB9XG5gO1xuXG5jb25zdCBJbGx1c3RyYXRpb25XcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpYFxuICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgQG1lZGlhIChtaW4td2lkdGg6ICR7YnJlYWtwb2ludHMudGFibGV0fSkge1xuICAgIG1hcmdpbi10b3A6ICR7c3BhY2luZy5sYXJnZX07XG4gIH1cbmA7XG5cbmNvbnN0IERlc2NyaXB0aW9uID0gc3R5bGVkKFwicFwiKWBcbiAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIEBtZWRpYSAobWluLXdpZHRoOiAke2JyZWFrcG9pbnRzLnRhYmxldH0pIHtcbiAgICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmcubGFyZ2V9O1xuICB9XG5gO1xuXG5jb25zdCBDdXN0b21FbGVtZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbjogJHtzcGFjaW5nLmxhcmdlfSAwO1xuYDtcblxuY29uc3QgTWVzc2FnZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW4tdG9wOiAke3NwYWNpbmcueHNtYWxsfTtcbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIG1lc3NhZ2VzOiB7XG4gICAgdGl0bGU6IHN0cmluZztcbiAgICBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgICBsaW5rc1RpdGxlPzogc3RyaW5nO1xuICAgIGJhY2s/OiBzdHJpbmc7XG4gICAgZ29Ub0Zyb250UGFnZT86IHN0cmluZztcbiAgICBsb2dJbkZhaWxlZD86IHN0cmluZztcbiAgfTtcbiAgaWxsdXN0cmF0aW9uPzoge1xuICAgIHVybDogc3RyaW5nO1xuICAgIGFsdFRleHQ6IHN0cmluZztcbiAgfTtcbiAgaWxsdXN0cmF0aW9uRWxlbWVudD86IFJlYWN0Tm9kZTtcbiAgY3VzdG9tRWxlbWVudD86IFJlYWN0Tm9kZTtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG59XG5leHBvcnQgY29uc3QgRXJyb3JNZXNzYWdlID0gKHsgY2hpbGRyZW4sIG1lc3NhZ2VzLCBpbGx1c3RyYXRpb24sIGlsbHVzdHJhdGlvbkVsZW1lbnQsIGN1c3RvbUVsZW1lbnQgfTogUHJvcHMpID0+IChcbiAgPFN0eWxlZEVycm9yTWVzc2FnZT5cbiAgICB7aWxsdXN0cmF0aW9uICYmIChcbiAgICAgIDxJbGx1c3RyYXRpb25XcmFwcGVyPlxuICAgICAgICA8aW1nIHNyYz17aWxsdXN0cmF0aW9uLnVybH0gYWx0PXtpbGx1c3RyYXRpb24uYWx0VGV4dH0gLz5cbiAgICAgIDwvSWxsdXN0cmF0aW9uV3JhcHBlcj5cbiAgICApfVxuICAgIHtpbGx1c3RyYXRpb25FbGVtZW50ICYmIDxJbGx1c3RyYXRpb25XcmFwcGVyPntpbGx1c3RyYXRpb25FbGVtZW50fTwvSWxsdXN0cmF0aW9uV3JhcHBlcj59XG4gICAgPGgxPnttZXNzYWdlcy50aXRsZX08L2gxPlxuICAgIHttZXNzYWdlcy5kZXNjcmlwdGlvbiAmJiA8RGVzY3JpcHRpb24+e21lc3NhZ2VzLmRlc2NyaXB0aW9ufTwvRGVzY3JpcHRpb24+fVxuICAgIHtjdXN0b21FbGVtZW50ICYmIDxDdXN0b21FbGVtZW50V3JhcHBlcj57Y3VzdG9tRWxlbWVudH08L0N1c3RvbUVsZW1lbnRXcmFwcGVyPn1cbiAgICB7bWVzc2FnZXMubGlua3NUaXRsZSAmJiA8aDI+e21lc3NhZ2VzLmxpbmtzVGl0bGV9PC9oMj59XG4gICAge21lc3NhZ2VzLmJhY2sgJiYgKFxuICAgICAgPFNhZmVMaW5rIHRvPXtgLyMke2VuY29kZVVSSShtZXNzYWdlcy5iYWNrKX1gfSBvbkNsaWNrPXsoKSA9PiB3aW5kb3cuaGlzdG9yeS5iYWNrKCl9PlxuICAgICAgICB7bWVzc2FnZXMuYmFja31cbiAgICAgIDwvU2FmZUxpbms+XG4gICAgKX1cbiAgICB7bWVzc2FnZXMuZ29Ub0Zyb250UGFnZSAmJiAoXG4gICAgICA8TWVzc2FnZVdyYXBwZXI+XG4gICAgICAgIDxTYWZlTGluayB0bz1cIi9cIj57bWVzc2FnZXMuZ29Ub0Zyb250UGFnZX08L1NhZmVMaW5rPlxuICAgICAgPC9NZXNzYWdlV3JhcHBlcj5cbiAgICApfVxuICAgIHttZXNzYWdlcy5sb2dJbkZhaWxlZCAmJiAoXG4gICAgICA8TWVzc2FnZVdyYXBwZXI+XG4gICAgICAgIDxTYWZlTGluayB0bz1cIi9taW5uZGxhXCI+e21lc3NhZ2VzLmxvZ0luRmFpbGVkfTwvU2FmZUxpbms+XG4gICAgICA8L01lc3NhZ2VXcmFwcGVyPlxuICAgICl9XG4gICAge2NoaWxkcmVufVxuICA8L1N0eWxlZEVycm9yTWVzc2FnZT5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IEVycm9yTWVzc2FnZTtcbiJdfQ== */"));
-const IllustrationWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1n5vqts3",
-  label: "IllustrationWrapper"
-})("margin-bottom:", _core.spacing.normal, ";@media (min-width: ", _core.breakpoints.tablet, "){margin-top:", _core.spacing.large, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVycm9yTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0J5QyIsImZpbGUiOiJFcnJvck1lc3NhZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTktcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nLCBicmVha3BvaW50cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBTYWZlTGluayB9IGZyb20gXCJAbmRsYS9zYWZlbGlua1wiO1xuXG5jb25zdCBTdHlsZWRFcnJvck1lc3NhZ2UgPSBzdHlsZWQuYXJ0aWNsZWBcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBhIHtcbiAgICBjb2xvcjogJHtjb2xvcnMuYnJhbmQucHJpbWFyeX07XG4gIH1cblxuICBoMSB7XG4gICAgbWFyZ2luLXRvcDogMDtcbiAgfVxuYDtcblxuY29uc3QgSWxsdXN0cmF0aW9uV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKWBcbiAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIEBtZWRpYSAobWluLXdpZHRoOiAke2JyZWFrcG9pbnRzLnRhYmxldH0pIHtcbiAgICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubGFyZ2V9O1xuICB9XG5gO1xuXG5jb25zdCBEZXNjcmlwdGlvbiA9IHN0eWxlZChcInBcIilgXG4gIG1hcmdpbi1ib3R0b206ICR7c3BhY2luZy5ub3JtYWx9O1xuICBAbWVkaWEgKG1pbi13aWR0aDogJHticmVha3BvaW50cy50YWJsZXR9KSB7XG4gICAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLmxhcmdlfTtcbiAgfVxuYDtcblxuY29uc3QgQ3VzdG9tRWxlbWVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbmA7XG5cbmNvbnN0IE1lc3NhZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBtZXNzYWdlczoge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gICAgbGlua3NUaXRsZT86IHN0cmluZztcbiAgICBiYWNrPzogc3RyaW5nO1xuICAgIGdvVG9Gcm9udFBhZ2U/OiBzdHJpbmc7XG4gICAgbG9nSW5GYWlsZWQ/OiBzdHJpbmc7XG4gIH07XG4gIGlsbHVzdHJhdGlvbj86IHtcbiAgICB1cmw6IHN0cmluZztcbiAgICBhbHRUZXh0OiBzdHJpbmc7XG4gIH07XG4gIGlsbHVzdHJhdGlvbkVsZW1lbnQ/OiBSZWFjdE5vZGU7XG4gIGN1c3RvbUVsZW1lbnQ/OiBSZWFjdE5vZGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuZXhwb3J0IGNvbnN0IEVycm9yTWVzc2FnZSA9ICh7IGNoaWxkcmVuLCBtZXNzYWdlcywgaWxsdXN0cmF0aW9uLCBpbGx1c3RyYXRpb25FbGVtZW50LCBjdXN0b21FbGVtZW50IH06IFByb3BzKSA9PiAoXG4gIDxTdHlsZWRFcnJvck1lc3NhZ2U+XG4gICAge2lsbHVzdHJhdGlvbiAmJiAoXG4gICAgICA8SWxsdXN0cmF0aW9uV3JhcHBlcj5cbiAgICAgICAgPGltZyBzcmM9e2lsbHVzdHJhdGlvbi51cmx9IGFsdD17aWxsdXN0cmF0aW9uLmFsdFRleHR9IC8+XG4gICAgICA8L0lsbHVzdHJhdGlvbldyYXBwZXI+XG4gICAgKX1cbiAgICB7aWxsdXN0cmF0aW9uRWxlbWVudCAmJiA8SWxsdXN0cmF0aW9uV3JhcHBlcj57aWxsdXN0cmF0aW9uRWxlbWVudH08L0lsbHVzdHJhdGlvbldyYXBwZXI+fVxuICAgIDxoMT57bWVzc2FnZXMudGl0bGV9PC9oMT5cbiAgICB7bWVzc2FnZXMuZGVzY3JpcHRpb24gJiYgPERlc2NyaXB0aW9uPnttZXNzYWdlcy5kZXNjcmlwdGlvbn08L0Rlc2NyaXB0aW9uPn1cbiAgICB7Y3VzdG9tRWxlbWVudCAmJiA8Q3VzdG9tRWxlbWVudFdyYXBwZXI+e2N1c3RvbUVsZW1lbnR9PC9DdXN0b21FbGVtZW50V3JhcHBlcj59XG4gICAge21lc3NhZ2VzLmxpbmtzVGl0bGUgJiYgPGgyPnttZXNzYWdlcy5saW5rc1RpdGxlfTwvaDI+fVxuICAgIHttZXNzYWdlcy5iYWNrICYmIChcbiAgICAgIDxTYWZlTGluayB0bz17YC8jJHtlbmNvZGVVUkkobWVzc2FnZXMuYmFjayl9YH0gb25DbGljaz17KCkgPT4gd2luZG93Lmhpc3RvcnkuYmFjaygpfT5cbiAgICAgICAge21lc3NhZ2VzLmJhY2t9XG4gICAgICA8L1NhZmVMaW5rPlxuICAgICl9XG4gICAge21lc3NhZ2VzLmdvVG9Gcm9udFBhZ2UgJiYgKFxuICAgICAgPE1lc3NhZ2VXcmFwcGVyPlxuICAgICAgICA8U2FmZUxpbmsgdG89XCIvXCI+e21lc3NhZ2VzLmdvVG9Gcm9udFBhZ2V9PC9TYWZlTGluaz5cbiAgICAgIDwvTWVzc2FnZVdyYXBwZXI+XG4gICAgKX1cbiAgICB7bWVzc2FnZXMubG9nSW5GYWlsZWQgJiYgKFxuICAgICAgPE1lc3NhZ2VXcmFwcGVyPlxuICAgICAgICA8U2FmZUxpbmsgdG89XCIvbWlubmRsYVwiPnttZXNzYWdlcy5sb2dJbkZhaWxlZH08L1NhZmVMaW5rPlxuICAgICAgPC9NZXNzYWdlV3JhcHBlcj5cbiAgICApfVxuICAgIHtjaGlsZHJlbn1cbiAgPC9TdHlsZWRFcnJvck1lc3NhZ2U+XG4pO1xuXG5leHBvcnQgZGVmYXVsdCBFcnJvck1lc3NhZ2U7XG4iXX0= */"));
-const Description = /*#__PURE__*/(0, _base.default)("p", {
-  target: "e1n5vqts2",
-  label: "Description"
-})("margin-bottom:", _core.spacing.normal, ";@media (min-width: ", _core.breakpoints.tablet, "){margin-bottom:", _core.spacing.large, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVycm9yTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0IrQiIsImZpbGUiOiJFcnJvck1lc3NhZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTktcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nLCBicmVha3BvaW50cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBTYWZlTGluayB9IGZyb20gXCJAbmRsYS9zYWZlbGlua1wiO1xuXG5jb25zdCBTdHlsZWRFcnJvck1lc3NhZ2UgPSBzdHlsZWQuYXJ0aWNsZWBcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBhIHtcbiAgICBjb2xvcjogJHtjb2xvcnMuYnJhbmQucHJpbWFyeX07XG4gIH1cblxuICBoMSB7XG4gICAgbWFyZ2luLXRvcDogMDtcbiAgfVxuYDtcblxuY29uc3QgSWxsdXN0cmF0aW9uV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKWBcbiAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIEBtZWRpYSAobWluLXdpZHRoOiAke2JyZWFrcG9pbnRzLnRhYmxldH0pIHtcbiAgICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubGFyZ2V9O1xuICB9XG5gO1xuXG5jb25zdCBEZXNjcmlwdGlvbiA9IHN0eWxlZChcInBcIilgXG4gIG1hcmdpbi1ib3R0b206ICR7c3BhY2luZy5ub3JtYWx9O1xuICBAbWVkaWEgKG1pbi13aWR0aDogJHticmVha3BvaW50cy50YWJsZXR9KSB7XG4gICAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLmxhcmdlfTtcbiAgfVxuYDtcblxuY29uc3QgQ3VzdG9tRWxlbWVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbmA7XG5cbmNvbnN0IE1lc3NhZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBtZXNzYWdlczoge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gICAgbGlua3NUaXRsZT86IHN0cmluZztcbiAgICBiYWNrPzogc3RyaW5nO1xuICAgIGdvVG9Gcm9udFBhZ2U/OiBzdHJpbmc7XG4gICAgbG9nSW5GYWlsZWQ/OiBzdHJpbmc7XG4gIH07XG4gIGlsbHVzdHJhdGlvbj86IHtcbiAgICB1cmw6IHN0cmluZztcbiAgICBhbHRUZXh0OiBzdHJpbmc7XG4gIH07XG4gIGlsbHVzdHJhdGlvbkVsZW1lbnQ/OiBSZWFjdE5vZGU7XG4gIGN1c3RvbUVsZW1lbnQ/OiBSZWFjdE5vZGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuZXhwb3J0IGNvbnN0IEVycm9yTWVzc2FnZSA9ICh7IGNoaWxkcmVuLCBtZXNzYWdlcywgaWxsdXN0cmF0aW9uLCBpbGx1c3RyYXRpb25FbGVtZW50LCBjdXN0b21FbGVtZW50IH06IFByb3BzKSA9PiAoXG4gIDxTdHlsZWRFcnJvck1lc3NhZ2U+XG4gICAge2lsbHVzdHJhdGlvbiAmJiAoXG4gICAgICA8SWxsdXN0cmF0aW9uV3JhcHBlcj5cbiAgICAgICAgPGltZyBzcmM9e2lsbHVzdHJhdGlvbi51cmx9IGFsdD17aWxsdXN0cmF0aW9uLmFsdFRleHR9IC8+XG4gICAgICA8L0lsbHVzdHJhdGlvbldyYXBwZXI+XG4gICAgKX1cbiAgICB7aWxsdXN0cmF0aW9uRWxlbWVudCAmJiA8SWxsdXN0cmF0aW9uV3JhcHBlcj57aWxsdXN0cmF0aW9uRWxlbWVudH08L0lsbHVzdHJhdGlvbldyYXBwZXI+fVxuICAgIDxoMT57bWVzc2FnZXMudGl0bGV9PC9oMT5cbiAgICB7bWVzc2FnZXMuZGVzY3JpcHRpb24gJiYgPERlc2NyaXB0aW9uPnttZXNzYWdlcy5kZXNjcmlwdGlvbn08L0Rlc2NyaXB0aW9uPn1cbiAgICB7Y3VzdG9tRWxlbWVudCAmJiA8Q3VzdG9tRWxlbWVudFdyYXBwZXI+e2N1c3RvbUVsZW1lbnR9PC9DdXN0b21FbGVtZW50V3JhcHBlcj59XG4gICAge21lc3NhZ2VzLmxpbmtzVGl0bGUgJiYgPGgyPnttZXNzYWdlcy5saW5rc1RpdGxlfTwvaDI+fVxuICAgIHttZXNzYWdlcy5iYWNrICYmIChcbiAgICAgIDxTYWZlTGluayB0bz17YC8jJHtlbmNvZGVVUkkobWVzc2FnZXMuYmFjayl9YH0gb25DbGljaz17KCkgPT4gd2luZG93Lmhpc3RvcnkuYmFjaygpfT5cbiAgICAgICAge21lc3NhZ2VzLmJhY2t9XG4gICAgICA8L1NhZmVMaW5rPlxuICAgICl9XG4gICAge21lc3NhZ2VzLmdvVG9Gcm9udFBhZ2UgJiYgKFxuICAgICAgPE1lc3NhZ2VXcmFwcGVyPlxuICAgICAgICA8U2FmZUxpbmsgdG89XCIvXCI+e21lc3NhZ2VzLmdvVG9Gcm9udFBhZ2V9PC9TYWZlTGluaz5cbiAgICAgIDwvTWVzc2FnZVdyYXBwZXI+XG4gICAgKX1cbiAgICB7bWVzc2FnZXMubG9nSW5GYWlsZWQgJiYgKFxuICAgICAgPE1lc3NhZ2VXcmFwcGVyPlxuICAgICAgICA8U2FmZUxpbmsgdG89XCIvbWlubmRsYVwiPnttZXNzYWdlcy5sb2dJbkZhaWxlZH08L1NhZmVMaW5rPlxuICAgICAgPC9NZXNzYWdlV3JhcHBlcj5cbiAgICApfVxuICAgIHtjaGlsZHJlbn1cbiAgPC9TdHlsZWRFcnJvck1lc3NhZ2U+XG4pO1xuXG5leHBvcnQgZGVmYXVsdCBFcnJvck1lc3NhZ2U7XG4iXX0= */"));
-const CustomElementWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1n5vqts1",
-  label: "CustomElementWrapper"
-})("margin:", _core.spacing.large, " 0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVycm9yTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0N1QyIsImZpbGUiOiJFcnJvck1lc3NhZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTktcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nLCBicmVha3BvaW50cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBTYWZlTGluayB9IGZyb20gXCJAbmRsYS9zYWZlbGlua1wiO1xuXG5jb25zdCBTdHlsZWRFcnJvck1lc3NhZ2UgPSBzdHlsZWQuYXJ0aWNsZWBcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBhIHtcbiAgICBjb2xvcjogJHtjb2xvcnMuYnJhbmQucHJpbWFyeX07XG4gIH1cblxuICBoMSB7XG4gICAgbWFyZ2luLXRvcDogMDtcbiAgfVxuYDtcblxuY29uc3QgSWxsdXN0cmF0aW9uV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKWBcbiAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIEBtZWRpYSAobWluLXdpZHRoOiAke2JyZWFrcG9pbnRzLnRhYmxldH0pIHtcbiAgICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubGFyZ2V9O1xuICB9XG5gO1xuXG5jb25zdCBEZXNjcmlwdGlvbiA9IHN0eWxlZChcInBcIilgXG4gIG1hcmdpbi1ib3R0b206ICR7c3BhY2luZy5ub3JtYWx9O1xuICBAbWVkaWEgKG1pbi13aWR0aDogJHticmVha3BvaW50cy50YWJsZXR9KSB7XG4gICAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLmxhcmdlfTtcbiAgfVxuYDtcblxuY29uc3QgQ3VzdG9tRWxlbWVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbmA7XG5cbmNvbnN0IE1lc3NhZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBtZXNzYWdlczoge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gICAgbGlua3NUaXRsZT86IHN0cmluZztcbiAgICBiYWNrPzogc3RyaW5nO1xuICAgIGdvVG9Gcm9udFBhZ2U/OiBzdHJpbmc7XG4gICAgbG9nSW5GYWlsZWQ/OiBzdHJpbmc7XG4gIH07XG4gIGlsbHVzdHJhdGlvbj86IHtcbiAgICB1cmw6IHN0cmluZztcbiAgICBhbHRUZXh0OiBzdHJpbmc7XG4gIH07XG4gIGlsbHVzdHJhdGlvbkVsZW1lbnQ/OiBSZWFjdE5vZGU7XG4gIGN1c3RvbUVsZW1lbnQ/OiBSZWFjdE5vZGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuZXhwb3J0IGNvbnN0IEVycm9yTWVzc2FnZSA9ICh7IGNoaWxkcmVuLCBtZXNzYWdlcywgaWxsdXN0cmF0aW9uLCBpbGx1c3RyYXRpb25FbGVtZW50LCBjdXN0b21FbGVtZW50IH06IFByb3BzKSA9PiAoXG4gIDxTdHlsZWRFcnJvck1lc3NhZ2U+XG4gICAge2lsbHVzdHJhdGlvbiAmJiAoXG4gICAgICA8SWxsdXN0cmF0aW9uV3JhcHBlcj5cbiAgICAgICAgPGltZyBzcmM9e2lsbHVzdHJhdGlvbi51cmx9IGFsdD17aWxsdXN0cmF0aW9uLmFsdFRleHR9IC8+XG4gICAgICA8L0lsbHVzdHJhdGlvbldyYXBwZXI+XG4gICAgKX1cbiAgICB7aWxsdXN0cmF0aW9uRWxlbWVudCAmJiA8SWxsdXN0cmF0aW9uV3JhcHBlcj57aWxsdXN0cmF0aW9uRWxlbWVudH08L0lsbHVzdHJhdGlvbldyYXBwZXI+fVxuICAgIDxoMT57bWVzc2FnZXMudGl0bGV9PC9oMT5cbiAgICB7bWVzc2FnZXMuZGVzY3JpcHRpb24gJiYgPERlc2NyaXB0aW9uPnttZXNzYWdlcy5kZXNjcmlwdGlvbn08L0Rlc2NyaXB0aW9uPn1cbiAgICB7Y3VzdG9tRWxlbWVudCAmJiA8Q3VzdG9tRWxlbWVudFdyYXBwZXI+e2N1c3RvbUVsZW1lbnR9PC9DdXN0b21FbGVtZW50V3JhcHBlcj59XG4gICAge21lc3NhZ2VzLmxpbmtzVGl0bGUgJiYgPGgyPnttZXNzYWdlcy5saW5rc1RpdGxlfTwvaDI+fVxuICAgIHttZXNzYWdlcy5iYWNrICYmIChcbiAgICAgIDxTYWZlTGluayB0bz17YC8jJHtlbmNvZGVVUkkobWVzc2FnZXMuYmFjayl9YH0gb25DbGljaz17KCkgPT4gd2luZG93Lmhpc3RvcnkuYmFjaygpfT5cbiAgICAgICAge21lc3NhZ2VzLmJhY2t9XG4gICAgICA8L1NhZmVMaW5rPlxuICAgICl9XG4gICAge21lc3NhZ2VzLmdvVG9Gcm9udFBhZ2UgJiYgKFxuICAgICAgPE1lc3NhZ2VXcmFwcGVyPlxuICAgICAgICA8U2FmZUxpbmsgdG89XCIvXCI+e21lc3NhZ2VzLmdvVG9Gcm9udFBhZ2V9PC9TYWZlTGluaz5cbiAgICAgIDwvTWVzc2FnZVdyYXBwZXI+XG4gICAgKX1cbiAgICB7bWVzc2FnZXMubG9nSW5GYWlsZWQgJiYgKFxuICAgICAgPE1lc3NhZ2VXcmFwcGVyPlxuICAgICAgICA8U2FmZUxpbmsgdG89XCIvbWlubmRsYVwiPnttZXNzYWdlcy5sb2dJbkZhaWxlZH08L1NhZmVMaW5rPlxuICAgICAgPC9NZXNzYWdlV3JhcHBlcj5cbiAgICApfVxuICAgIHtjaGlsZHJlbn1cbiAgPC9TdHlsZWRFcnJvck1lc3NhZ2U+XG4pO1xuXG5leHBvcnQgZGVmYXVsdCBFcnJvck1lc3NhZ2U7XG4iXX0= */"));
-const MessageWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1n5vqts0",
-  label: "MessageWrapper"
-})("margin-top:", _core.spacing.xsmall, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVycm9yTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMENpQyIsImZpbGUiOiJFcnJvck1lc3NhZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTktcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nLCBicmVha3BvaW50cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBTYWZlTGluayB9IGZyb20gXCJAbmRsYS9zYWZlbGlua1wiO1xuXG5jb25zdCBTdHlsZWRFcnJvck1lc3NhZ2UgPSBzdHlsZWQuYXJ0aWNsZWBcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBhIHtcbiAgICBjb2xvcjogJHtjb2xvcnMuYnJhbmQucHJpbWFyeX07XG4gIH1cblxuICBoMSB7XG4gICAgbWFyZ2luLXRvcDogMDtcbiAgfVxuYDtcblxuY29uc3QgSWxsdXN0cmF0aW9uV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKWBcbiAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIEBtZWRpYSAobWluLXdpZHRoOiAke2JyZWFrcG9pbnRzLnRhYmxldH0pIHtcbiAgICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubGFyZ2V9O1xuICB9XG5gO1xuXG5jb25zdCBEZXNjcmlwdGlvbiA9IHN0eWxlZChcInBcIilgXG4gIG1hcmdpbi1ib3R0b206ICR7c3BhY2luZy5ub3JtYWx9O1xuICBAbWVkaWEgKG1pbi13aWR0aDogJHticmVha3BvaW50cy50YWJsZXR9KSB7XG4gICAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLmxhcmdlfTtcbiAgfVxuYDtcblxuY29uc3QgQ3VzdG9tRWxlbWVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbmA7XG5cbmNvbnN0IE1lc3NhZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBtZXNzYWdlczoge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gICAgbGlua3NUaXRsZT86IHN0cmluZztcbiAgICBiYWNrPzogc3RyaW5nO1xuICAgIGdvVG9Gcm9udFBhZ2U/OiBzdHJpbmc7XG4gICAgbG9nSW5GYWlsZWQ/OiBzdHJpbmc7XG4gIH07XG4gIGlsbHVzdHJhdGlvbj86IHtcbiAgICB1cmw6IHN0cmluZztcbiAgICBhbHRUZXh0OiBzdHJpbmc7XG4gIH07XG4gIGlsbHVzdHJhdGlvbkVsZW1lbnQ/OiBSZWFjdE5vZGU7XG4gIGN1c3RvbUVsZW1lbnQ/OiBSZWFjdE5vZGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuZXhwb3J0IGNvbnN0IEVycm9yTWVzc2FnZSA9ICh7IGNoaWxkcmVuLCBtZXNzYWdlcywgaWxsdXN0cmF0aW9uLCBpbGx1c3RyYXRpb25FbGVtZW50LCBjdXN0b21FbGVtZW50IH06IFByb3BzKSA9PiAoXG4gIDxTdHlsZWRFcnJvck1lc3NhZ2U+XG4gICAge2lsbHVzdHJhdGlvbiAmJiAoXG4gICAgICA8SWxsdXN0cmF0aW9uV3JhcHBlcj5cbiAgICAgICAgPGltZyBzcmM9e2lsbHVzdHJhdGlvbi51cmx9IGFsdD17aWxsdXN0cmF0aW9uLmFsdFRleHR9IC8+XG4gICAgICA8L0lsbHVzdHJhdGlvbldyYXBwZXI+XG4gICAgKX1cbiAgICB7aWxsdXN0cmF0aW9uRWxlbWVudCAmJiA8SWxsdXN0cmF0aW9uV3JhcHBlcj57aWxsdXN0cmF0aW9uRWxlbWVudH08L0lsbHVzdHJhdGlvbldyYXBwZXI+fVxuICAgIDxoMT57bWVzc2FnZXMudGl0bGV9PC9oMT5cbiAgICB7bWVzc2FnZXMuZGVzY3JpcHRpb24gJiYgPERlc2NyaXB0aW9uPnttZXNzYWdlcy5kZXNjcmlwdGlvbn08L0Rlc2NyaXB0aW9uPn1cbiAgICB7Y3VzdG9tRWxlbWVudCAmJiA8Q3VzdG9tRWxlbWVudFdyYXBwZXI+e2N1c3RvbUVsZW1lbnR9PC9DdXN0b21FbGVtZW50V3JhcHBlcj59XG4gICAge21lc3NhZ2VzLmxpbmtzVGl0bGUgJiYgPGgyPnttZXNzYWdlcy5saW5rc1RpdGxlfTwvaDI+fVxuICAgIHttZXNzYWdlcy5iYWNrICYmIChcbiAgICAgIDxTYWZlTGluayB0bz17YC8jJHtlbmNvZGVVUkkobWVzc2FnZXMuYmFjayl9YH0gb25DbGljaz17KCkgPT4gd2luZG93Lmhpc3RvcnkuYmFjaygpfT5cbiAgICAgICAge21lc3NhZ2VzLmJhY2t9XG4gICAgICA8L1NhZmVMaW5rPlxuICAgICl9XG4gICAge21lc3NhZ2VzLmdvVG9Gcm9udFBhZ2UgJiYgKFxuICAgICAgPE1lc3NhZ2VXcmFwcGVyPlxuICAgICAgICA8U2FmZUxpbmsgdG89XCIvXCI+e21lc3NhZ2VzLmdvVG9Gcm9udFBhZ2V9PC9TYWZlTGluaz5cbiAgICAgIDwvTWVzc2FnZVdyYXBwZXI+XG4gICAgKX1cbiAgICB7bWVzc2FnZXMubG9nSW5GYWlsZWQgJiYgKFxuICAgICAgPE1lc3NhZ2VXcmFwcGVyPlxuICAgICAgICA8U2FmZUxpbmsgdG89XCIvbWlubmRsYVwiPnttZXNzYWdlcy5sb2dJbkZhaWxlZH08L1NhZmVMaW5rPlxuICAgICAgPC9NZXNzYWdlV3JhcHBlcj5cbiAgICApfVxuICAgIHtjaGlsZHJlbn1cbiAgPC9TdHlsZWRFcnJvck1lc3NhZ2U+XG4pO1xuXG5leHBvcnQgZGVmYXVsdCBFcnJvck1lc3NhZ2U7XG4iXX0= */"));
+// TODO: This has not been redesignet yet. This is just a rewrite of the previous design in panda
+const StyledErrorMessage = (0, _jsx2.styled)("article", {
+  base: {
+    textAlign: "center",
+    "& a": {
+      color: "text.strong"
+    },
+    "& h1": {
+      marginTop: "0"
+    }
+  }
+});
+const IllustrationWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    marginBottom: "medium",
+    tablet: {
+      marginTop: "xxlarge"
+    }
+  }
+});
+const Description = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    marginBottom: "medium",
+    tablet: {
+      marginBottom: "xxlarge"
+    }
+  }
+});
+const CustomElementWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    marginBlock: "xxlarge"
+  }
+});
+const MessageWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    marginTop: "3xsmall"
+  }
+});
 const ErrorMessage = _ref => {
   let {
     children,
@@ -62,7 +79,7 @@ const ErrorMessage = _ref => {
     }), messages.linksTitle && (0, _jsxRuntime.jsx)("h2", {
       children: messages.linksTitle
     }), messages.back && (0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-      to: "/#".concat(encodeURI(messages.back)),
+      to: `/#${encodeURI(messages.back)}`,
       onClick: () => window.history.back(),
       children: messages.back
     }), messages.goToFrontPage && (0, _jsxRuntime.jsx)(MessageWrapper, {

package/lib/ErrorMessage/ErrorResourceAccessDenied.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _reactI18next = require("react-i18next");
 var _button = require("@ndla/button");
-var _core = require("@ndla/core");
 var _common = require("@ndla/icons/common");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,10 +19,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const StyledLogInIconWrapper = /*#__PURE__*/(0, _base.default)("span", {
-  target: "e1a7kjll0",
-  label: "StyledLogInIconWrapper"
-})("margin-left:", _core.spacing.xsmall, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVycm9yUmVzb3VyY2VBY2Nlc3NEZW5pZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCMEMiLCJmaWxlIjoiRXJyb3JSZXNvdXJjZUFjY2Vzc0RlbmllZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgQnV0dG9uVjIgfSBmcm9tIFwiQG5kbGEvYnV0dG9uXCI7XG5pbXBvcnQgeyBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEh1bWFuTWFsZUJvYXJkLCBMb2dJbiB9IGZyb20gXCJAbmRsYS9pY29ucy9jb21tb25cIjtcblxuaW1wb3J0IEVycm9yTWVzc2FnZSBmcm9tIFwiLi9FcnJvck1lc3NhZ2VcIjtcblxuY29uc3QgU3R5bGVkTG9nSW5JY29uV3JhcHBlciA9IHN0eWxlZC5zcGFuYFxuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG50eXBlIFByb3BzID0ge1xuICBvbkF1dGhlbnRpY2F0ZUNsaWNrOiAoKSA9PiB2b2lkO1xufTtcbmNvbnN0IEVycm9yUmVzb3VyY2VBY2Nlc3NEZW5pZWQgPSAoeyBvbkF1dGhlbnRpY2F0ZUNsaWNrIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgcmV0dXJuIChcbiAgICA8RXJyb3JNZXNzYWdlXG4gICAgICBtZXNzYWdlcz17e1xuICAgICAgICB0aXRsZTogdChcInVzZXIucmVzb3VyY2UuYWNjZXNzRGVuaWVkXCIpLFxuICAgICAgICBiYWNrOiB0KFwiZXJyb3JNZXNzYWdlLmJhY2tcIiksXG4gICAgICAgIGdvVG9Gcm9udFBhZ2U6IHQoXCJlcnJvck1lc3NhZ2UuZ29Ub0Zyb250UGFnZVwiKSxcbiAgICAgIH19XG4gICAgICBpbGx1c3RyYXRpb25FbGVtZW50PXs8SHVtYW5NYWxlQm9hcmQgc2l6ZT1cIm1lZGl1bVwiIC8+fVxuICAgICAgY3VzdG9tRWxlbWVudD17XG4gICAgICAgIDxCdXR0b25WMiBzaXplPVwibWVkaXVtXCIgb25DbGljaz17b25BdXRoZW50aWNhdGVDbGlja30+XG4gICAgICAgICAge3QoXCJ1c2VyLmJ1dHRvbkxvZ0luXCIpfVxuICAgICAgICAgIDxTdHlsZWRMb2dJbkljb25XcmFwcGVyIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgPExvZ0luIHNpemU9XCJtZWRpdW1cIiAvPlxuICAgICAgICAgIDwvU3R5bGVkTG9nSW5JY29uV3JhcHBlcj5cbiAgICAgICAgPC9CdXR0b25WMj5cbiAgICAgIH1cbiAgICAvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRXJyb3JSZXNvdXJjZUFjY2Vzc0RlbmllZDtcbiJdfQ== */"));
+// TODO: This has not been redesignet yet. This is just a rewrite of the previous design in panda
+const StyledLogInIconWrapper = (0, _jsx2.styled)("span", {
+  base: {
+    marginLeft: "3xsmall"
+  }
+});
 const ErrorResourceAccessDenied = _ref => {
   let {
     onAuthenticateClick

package/lib/FactBox/FactBox.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/** @jsxImportSource @emotion/react */
 import { ComponentProps, ReactNode } from "react";
 interface Props extends ComponentProps<"aside"> {
     children?: ReactNode;