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

package/lib/Embed/ConceptListEmbed.js

@@ -4,36 +4,34 @@ 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 _jsx2 = require("@ndla/styled-system/jsx");
 var _ConceptEmbed = require("./ConceptEmbed");
-var _Figure = require("../Figure");
 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) 2023-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 ConceptList = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1g5p4xu1",
-  label: "ConceptList"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1m0jptr",
-  styles: "&>figure:first-of-type{margin-top:32px;}& li{display:block;}"
-} : {
-  name: "1m0jptr",
-  styles: "&>figure:first-of-type{margin-top:32px;}& li{display:block;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbmNlcHRMaXN0RW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9COEIiLCJmaWxlIjoiQ29uY2VwdExpc3RFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IENvbmNlcHRMaXN0TWV0YURhdGEgfSBmcm9tIFwiQG5kbGEvdHlwZXMtZW1iZWRcIjtcbmltcG9ydCB7IEJsb2NrQ29uY2VwdCB9IGZyb20gXCIuL0NvbmNlcHRFbWJlZFwiO1xuaW1wb3J0IHsgRmlndXJlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBlbWJlZDogQ29uY2VwdExpc3RNZXRhRGF0YTtcbiAgbGFuZz86IHN0cmluZztcbn1cblxuY29uc3QgQ29uY2VwdExpc3QgPSBzdHlsZWQuZGl2YFxuICAmID4gZmlndXJlOmZpcnN0LW9mLXR5cGUge1xuICAgIG1hcmdpbi10b3A6IDMycHg7XG4gIH1cbiAgJiBsaSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQuc3BhbmBcbiAgY29sb3I6ICR7Y29sb3JzLnN1cHBvcnQucmVkfTtcbmA7XG5cbmNvbnN0IENvbmNlcHRMaXN0RW1iZWQgPSAoeyBlbWJlZCwgbGFuZyB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGlmIChlbWJlZC5zdGF0dXMgPT09IFwiZXJyb3JcIikge1xuICAgIHJldHVybiA8U3R5bGVkU3Bhbj57dChcImVtYmVkLmNvbmNlcHRMaXN0RXJyb3JcIil9PC9TdHlsZWRTcGFuPjtcbiAgfVxuICBjb25zdCB7IGVtYmVkRGF0YSwgZGF0YSB9ID0gZW1iZWQ7XG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxGaWd1cmUgdHlwZT1cImZ1bGxcIj5cbiAgICAgICAge2VtYmVkRGF0YS50aXRsZSAmJiA8aDIgbGFuZz17bGFuZ30+e2VtYmVkRGF0YS50aXRsZX08L2gyPn1cbiAgICAgICAgPENvbmNlcHRMaXN0PlxuICAgICAgICAgIDx1bCBsYW5nPXtsYW5nfT5cbiAgICAgICAgICAgIHtkYXRhLmNvbmNlcHRzLm1hcCgoeyBjb25jZXB0LCB2aXN1YWxFbGVtZW50IH0pID0+IChcbiAgICAgICAgICAgICAgPGxpIGtleT17Y29uY2VwdC5pZH0+XG4gICAgICAgICAgICAgICAgPEJsb2NrQ29uY2VwdFxuICAgICAgICAgICAgICAgICAgdGl0bGU9e2NvbmNlcHQudGl0bGV9XG4gICAgICAgICAgICAgICAgICBjb250ZW50PXtjb25jZXB0LmNvbnRlbnQuY29udGVudH1cbiAgICAgICAgICAgICAgICAgIG1ldGFJbWFnZT17Y29uY2VwdC5tZXRhSW1hZ2V9XG4gICAgICAgICAgICAgICAgICBjb3B5cmlnaHQ9e2NvbmNlcHQuY29weXJpZ2h0fVxuICAgICAgICAgICAgICAgICAgc291cmNlPXtjb25jZXB0LnNvdXJjZX1cbiAgICAgICAgICAgICAgICAgIHZpc3VhbEVsZW1lbnQ9e3Zpc3VhbEVsZW1lbnR9XG4gICAgICAgICAgICAgICAgICBjb25jZXB0VHlwZT17Y29uY2VwdC5jb25jZXB0VHlwZX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2xpPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC91bD5cbiAgICAgICAgPC9Db25jZXB0TGlzdD5cbiAgICAgIDwvRmlndXJlPlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ29uY2VwdExpc3RFbWJlZDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+
+// TODO: Find out if we're actually still going to use this.
+// If we are, we need to re-add some margin between the list items. We should also probably parse the concept content to HTML, like we do in ConceptEmbed.
+
+const ConceptList = (0, _jsx2.styled)("div", {
+  base: {
+    "& li": {
+      display: "block"
+    }
+  }
+});
+const StyledSpan = (0, _jsx2.styled)("span", {
+  base: {
+    color: "text.error"
+  }
 });
-const StyledSpan = /*#__PURE__*/(0, _base.default)("span", {
-  target: "e1g5p4xu0",
-  label: "StyledSpan"
-})("color:", _core.colors.support.red, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbmNlcHRMaXN0RW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCOEIiLCJmaWxlIjoiQ29uY2VwdExpc3RFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IENvbmNlcHRMaXN0TWV0YURhdGEgfSBmcm9tIFwiQG5kbGEvdHlwZXMtZW1iZWRcIjtcbmltcG9ydCB7IEJsb2NrQ29uY2VwdCB9IGZyb20gXCIuL0NvbmNlcHRFbWJlZFwiO1xuaW1wb3J0IHsgRmlndXJlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBlbWJlZDogQ29uY2VwdExpc3RNZXRhRGF0YTtcbiAgbGFuZz86IHN0cmluZztcbn1cblxuY29uc3QgQ29uY2VwdExpc3QgPSBzdHlsZWQuZGl2YFxuICAmID4gZmlndXJlOmZpcnN0LW9mLXR5cGUge1xuICAgIG1hcmdpbi10b3A6IDMycHg7XG4gIH1cbiAgJiBsaSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQuc3BhbmBcbiAgY29sb3I6ICR7Y29sb3JzLnN1cHBvcnQucmVkfTtcbmA7XG5cbmNvbnN0IENvbmNlcHRMaXN0RW1iZWQgPSAoeyBlbWJlZCwgbGFuZyB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGlmIChlbWJlZC5zdGF0dXMgPT09IFwiZXJyb3JcIikge1xuICAgIHJldHVybiA8U3R5bGVkU3Bhbj57dChcImVtYmVkLmNvbmNlcHRMaXN0RXJyb3JcIil9PC9TdHlsZWRTcGFuPjtcbiAgfVxuICBjb25zdCB7IGVtYmVkRGF0YSwgZGF0YSB9ID0gZW1iZWQ7XG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxGaWd1cmUgdHlwZT1cImZ1bGxcIj5cbiAgICAgICAge2VtYmVkRGF0YS50aXRsZSAmJiA8aDIgbGFuZz17bGFuZ30+e2VtYmVkRGF0YS50aXRsZX08L2gyPn1cbiAgICAgICAgPENvbmNlcHRMaXN0PlxuICAgICAgICAgIDx1bCBsYW5nPXtsYW5nfT5cbiAgICAgICAgICAgIHtkYXRhLmNvbmNlcHRzLm1hcCgoeyBjb25jZXB0LCB2aXN1YWxFbGVtZW50IH0pID0+IChcbiAgICAgICAgICAgICAgPGxpIGtleT17Y29uY2VwdC5pZH0+XG4gICAgICAgICAgICAgICAgPEJsb2NrQ29uY2VwdFxuICAgICAgICAgICAgICAgICAgdGl0bGU9e2NvbmNlcHQudGl0bGV9XG4gICAgICAgICAgICAgICAgICBjb250ZW50PXtjb25jZXB0LmNvbnRlbnQuY29udGVudH1cbiAgICAgICAgICAgICAgICAgIG1ldGFJbWFnZT17Y29uY2VwdC5tZXRhSW1hZ2V9XG4gICAgICAgICAgICAgICAgICBjb3B5cmlnaHQ9e2NvbmNlcHQuY29weXJpZ2h0fVxuICAgICAgICAgICAgICAgICAgc291cmNlPXtjb25jZXB0LnNvdXJjZX1cbiAgICAgICAgICAgICAgICAgIHZpc3VhbEVsZW1lbnQ9e3Zpc3VhbEVsZW1lbnR9XG4gICAgICAgICAgICAgICAgICBjb25jZXB0VHlwZT17Y29uY2VwdC5jb25jZXB0VHlwZX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2xpPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC91bD5cbiAgICAgICAgPC9Db25jZXB0TGlzdD5cbiAgICAgIDwvRmlndXJlPlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ29uY2VwdExpc3RFbWJlZDtcbiJdfQ== */"));
 const ConceptListEmbed = _ref => {
   let {
     embed,
@@ -52,8 +50,7 @@ const ConceptListEmbed = _ref => {
     data
   } = embed;
   return (0, _jsxRuntime.jsx)("div", {
-    children: (0, _jsxRuntime.jsxs)(_Figure.Figure, {
-      type: "full",
+    children: (0, _jsxRuntime.jsxs)(_primitives.Figure, {
       children: [embedData.title && (0, _jsxRuntime.jsx)("h2", {
         lang: lang,
         children: embedData.title
@@ -67,13 +64,11 @@ const ConceptListEmbed = _ref => {
             } = _ref2;
             return (0, _jsxRuntime.jsx)("li", {
               children: (0, _jsxRuntime.jsx)(_ConceptEmbed.BlockConcept, {
-                title: concept.title,
+                title: concept.title.title,
                 content: concept.content.content,
-                metaImage: concept.metaImage,
                 copyright: concept.copyright,
-                source: concept.source,
                 visualElement: visualElement,
-                conceptType: concept.conceptType
+                lang: lang
               })
             }, concept.id);
           })

package/lib/Embed/ContentLinkEmbed.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: "e1s10cki0",
-  label: "StyledSpan"
-})("color:", _core.colors.support.red, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRlbnRMaW5rRW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1COEIiLCJmaWxlIjoiQ29udGVudExpbmtFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgQ29udGVudExpbmtNZXRhRGF0YSB9IGZyb20gXCJAbmRsYS90eXBlcy1lbWJlZFwiO1xuaW50ZXJmYWNlIFByb3BzIHtcbiAgZW1iZWQ6IENvbnRlbnRMaW5rTWV0YURhdGE7XG4gIGlzT2VtYmVkPzogYm9vbGVhbjtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQuc3BhbmBcbiAgY29sb3I6ICR7Y29sb3JzLnN1cHBvcnQucmVkfTtcbmA7XG5cbmNvbnN0IENvbnRlbnRMaW5rRW1iZWQgPSAoeyBlbWJlZCwgaXNPZW1iZWQsIGNoaWxkcmVuIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgaWYgKGVtYmVkLnN0YXR1cyA9PT0gXCJlcnJvclwiKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRTcGFuPlxuICAgICAgICA8c3Bhbj57YCR7dChcImVtYmVkLmxpbmtFcnJvclwiKX06IGB9PC9zcGFuPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1N0eWxlZFNwYW4+XG4gICAgKTtcbiAgfVxuXG4gIGNvbnN0IHsgZW1iZWREYXRhLCBkYXRhIH0gPSBlbWJlZDtcblxuICBpZiAoZW1iZWREYXRhLm9wZW5JbiA9PT0gXCJuZXctY29udGV4dFwiIHx8IGlzT2VtYmVkKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxhIGhyZWY9e2RhdGEucGF0aH0gdGFyZ2V0PVwiX2JsYW5rXCIgcmVsPVwibm9vcGVuZXIgbm9yZWZlcnJlclwiPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L2E+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiA8YSBocmVmPXtkYXRhLnBhdGh9PntjaGlsZHJlbn08L2E+O1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ29udGVudExpbmtFbWJlZDtcbiJdfQ== */"));
 const ContentLinkEmbed = _ref => {
   let {
     embed,
@@ -31,10 +25,15 @@ const ContentLinkEmbed = _ref => {
     t
   } = (0, _reactI18next.useTranslation)();
   if (embed.status === "error") {
-    return (0, _jsxRuntime.jsxs)(StyledSpan, {
-      children: [(0, _jsxRuntime.jsx)("span", {
-        children: "".concat(t("embed.linkError"), ": ")
-      }), children]
+    return (0, _jsxRuntime.jsx)(_primitives.Text, {
+      color: "text.error",
+      asChild: true,
+      consumeCss: true,
+      children: (0, _jsxRuntime.jsxs)("span", {
+        children: [(0, _jsxRuntime.jsx)("span", {
+          children: `${t("embed.linkError")}: `
+        }), children]
+      })
     });
   }
   const {

package/lib/Embed/CopyrightEmbed.js

@@ -4,42 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _LicenseByline = require("../LicenseByline");
 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 StyledFigCaption = /*#__PURE__*/(0, _base.default)("figcaption", {
-  target: "eds2zp40",
-  label: "StyledFigCaption"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1oo694u",
-  styles: "background:unset;font-size:unset;padding:unset;color:unset"
-} : {
-  name: "1oo694u",
-  styles: "background:unset;font-size:unset;padding:unset;color:unset",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlyaWdodEVtYmVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBDIiwiZmlsZSI6IkNvcHlyaWdodEVtYmVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDI0LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IENvcHlyaWdodE1ldGFEYXRhIH0gZnJvbSBcIkBuZGxhL3R5cGVzLWVtYmVkXCI7XG5pbXBvcnQgeyBFbWJlZEJ5bGluZSB9IGZyb20gXCIuLi9MaWNlbnNlQnlsaW5lXCI7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGVtYmVkOiBDb3B5cmlnaHRNZXRhRGF0YTtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IFN0eWxlZEZpZ0NhcHRpb24gPSBzdHlsZWQuZmlnY2FwdGlvbmBcbiAgYmFja2dyb3VuZDogdW5zZXQ7XG4gIGZvbnQtc2l6ZTogdW5zZXQ7XG4gIHBhZGRpbmc6IHVuc2V0O1xuICBjb2xvcjogdW5zZXQ7XG5gO1xuXG5jb25zdCBDb3B5cmlnaHRFbWJlZCA9ICh7IGVtYmVkLCBjaGlsZHJlbiB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxmaWd1cmU+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICA8U3R5bGVkRmlnQ2FwdGlvbiBjb250ZW50RWRpdGFibGU9e2ZhbHNlfT5cbiAgICAgICAgPEVtYmVkQnlsaW5lIHR5cGU9XCJjb3B5cmlnaHRcIiBjb3B5cmlnaHQ9e2VtYmVkLmVtYmVkRGF0YS5jb3B5cmlnaHR9IGJvdHRvbVJvdW5kZWQgLz5cbiAgICAgIDwvU3R5bGVkRmlnQ2FwdGlvbj5cbiAgICA8L2ZpZ3VyZT5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENvcHlyaWdodEVtYmVkO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+
 const CopyrightEmbed = _ref => {
   let {
     embed,
     children
   } = _ref;
   return (0, _jsxRuntime.jsxs)("figure", {
-    children: [children, (0, _jsxRuntime.jsx)(StyledFigCaption, {
-      contentEditable: false,
-      children: (0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
-        type: "copyright",
-        copyright: embed.embedData.copyright,
-        bottomRounded: true
-      })
+    children: [children, (0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
+      type: "copyright",
+      copyright: embed.embedData.copyright,
+      bottomRounded: true
     })]
   });
 };

package/lib/Embed/EmbedErrorPlaceholder.d.ts

@@ -6,12 +6,13 @@
  *
  */
 import { ReactNode } from "react";
-import { FigureType } from "../Figure";
+import { type FigureFloat, type FigureSize } from "@ndla/primitives";
 import { EmbedBylineErrorProps } from "../LicenseByline/EmbedByline";
 interface Props {
     type: EmbedBylineErrorProps["type"];
-    figureType?: FigureType;
+    figureType?: FigureSize;
+    float?: FigureFloat;
     children?: ReactNode;
 }
-declare const EmbedErrorPlaceholder: ({ type, children, figureType }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const EmbedErrorPlaceholder: ({ type, children, figureType, float }: Props) => import("react/jsx-runtime").JSX.Element;
 export default EmbedErrorPlaceholder;

package/lib/Embed/EmbedErrorPlaceholder.js

@@ -4,13 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _core = require("@ndla/core");
 var _common = require("@ndla/icons/common");
-var _Figure = require("../Figure");
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _LicenseByline = require("../LicenseByline");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -19,30 +17,46 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const ErrorPlaceholder = /*#__PURE__*/(0, _base.default)("div", {
-  target: "etnx1j51",
-  label: "ErrorPlaceholder"
-})("display:flex;align-items:center;justify-content:center;background-color:", _core.colors.brand.greyLighter, ";height:330px;svg{fill:", _core.colors.text.light, ";height:90%;width:90%;}&[data-embed-type=\"audio\"]{height:150px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtYmVkRXJyb3JQbGFjZWhvbGRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JtQyIsImZpbGUiOiJFbWJlZEVycm9yUGxhY2Vob2xkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IFdhcm5pbmdPdXRsaW5lIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgRmlndXJlLCBGaWd1cmVUeXBlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmUgfSBmcm9tIFwiLi4vTGljZW5zZUJ5bGluZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmVFcnJvclByb3BzIH0gZnJvbSBcIi4uL0xpY2Vuc2VCeWxpbmUvRW1iZWRCeWxpbmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogRW1iZWRCeWxpbmVFcnJvclByb3BzW1widHlwZVwiXTtcbiAgZmlndXJlVHlwZT86IEZpZ3VyZVR5cGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBFcnJvclBsYWNlaG9sZGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgaGVpZ2h0OiAzMzBweDtcblxuICBzdmcge1xuICAgIGZpbGw6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICAgIGhlaWdodDogOTAlO1xuICAgIHdpZHRoOiA5MCU7XG4gIH1cbiAgJltkYXRhLWVtYmVkLXR5cGU9XCJhdWRpb1wiXSB7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkRmlndXJlID0gc3R5bGVkKEZpZ3VyZSlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5jb25zdCBFbWJlZEVycm9yUGxhY2Vob2xkZXIgPSAoeyB0eXBlLCBjaGlsZHJlbiwgZmlndXJlVHlwZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmUgdHlwZT17ZmlndXJlVHlwZX0+XG4gICAgICB7Y2hpbGRyZW4gPz8gKFxuICAgICAgICA8RXJyb3JQbGFjZWhvbGRlciBkYXRhLWVtYmVkLXR5cGU9e3R5cGV9PlxuICAgICAgICAgIDxXYXJuaW5nT3V0bGluZSAvPlxuICAgICAgICA8L0Vycm9yUGxhY2Vob2xkZXI+XG4gICAgICApfVxuICAgICAgPEVtYmVkQnlsaW5lIGVycm9yIHR5cGU9e3R5cGV9IHRvcFJvdW5kZWQgYm90dG9tUm91bmRlZCAvPlxuICAgIDwvU3R5bGVkRmlndXJlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRW1iZWRFcnJvclBsYWNlaG9sZGVyO1xuIl19 */"));
-const StyledFigure = /*#__PURE__*/(0, _base.default)(_Figure.Figure, {
-  target: "etnx1j50",
-  label: "StyledFigure"
-})("display:flex;flex-direction:column;gap:", _core.spacing.xsmall, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtYmVkRXJyb3JQbGFjZWhvbGRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNtQyIsImZpbGUiOiJFbWJlZEVycm9yUGxhY2Vob2xkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IFdhcm5pbmdPdXRsaW5lIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgRmlndXJlLCBGaWd1cmVUeXBlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmUgfSBmcm9tIFwiLi4vTGljZW5zZUJ5bGluZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmVFcnJvclByb3BzIH0gZnJvbSBcIi4uL0xpY2Vuc2VCeWxpbmUvRW1iZWRCeWxpbmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogRW1iZWRCeWxpbmVFcnJvclByb3BzW1widHlwZVwiXTtcbiAgZmlndXJlVHlwZT86IEZpZ3VyZVR5cGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBFcnJvclBsYWNlaG9sZGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgaGVpZ2h0OiAzMzBweDtcblxuICBzdmcge1xuICAgIGZpbGw6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICAgIGhlaWdodDogOTAlO1xuICAgIHdpZHRoOiA5MCU7XG4gIH1cbiAgJltkYXRhLWVtYmVkLXR5cGU9XCJhdWRpb1wiXSB7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkRmlndXJlID0gc3R5bGVkKEZpZ3VyZSlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5jb25zdCBFbWJlZEVycm9yUGxhY2Vob2xkZXIgPSAoeyB0eXBlLCBjaGlsZHJlbiwgZmlndXJlVHlwZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmUgdHlwZT17ZmlndXJlVHlwZX0+XG4gICAgICB7Y2hpbGRyZW4gPz8gKFxuICAgICAgICA8RXJyb3JQbGFjZWhvbGRlciBkYXRhLWVtYmVkLXR5cGU9e3R5cGV9PlxuICAgICAgICAgIDxXYXJuaW5nT3V0bGluZSAvPlxuICAgICAgICA8L0Vycm9yUGxhY2Vob2xkZXI+XG4gICAgICApfVxuICAgICAgPEVtYmVkQnlsaW5lIGVycm9yIHR5cGU9e3R5cGV9IHRvcFJvdW5kZWQgYm90dG9tUm91bmRlZCAvPlxuICAgIDwvU3R5bGVkRmlndXJlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRW1iZWRFcnJvclBsYWNlaG9sZGVyO1xuIl19 */"));
+const ErrorPlaceholder = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "surface.disabled",
+    height: "surface.xsmall",
+    "& svg": {
+      fill: "text.subtle",
+      height: "90%",
+      width: "90%"
+    },
+    "&[data-embed-type='audio']": {
+      height: "surface.3xsmall"
+    }
+  }
+});
+const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    "& > *:not(:first-child)": {
+      marginBlockStart: "3xsmall"
+    }
+  }
+});
 const EmbedErrorPlaceholder = _ref => {
   let {
     type,
     children,
-    figureType
+    figureType,
+    float
   } = _ref;
   return (0, _jsxRuntime.jsxs)(StyledFigure, {
-    type: figureType,
-    children: [children !== null && children !== void 0 ? children : (0, _jsxRuntime.jsx)(ErrorPlaceholder, {
+    size: figureType,
+    float: float,
+    children: [children ?? (0, _jsxRuntime.jsx)(ErrorPlaceholder, {
       "data-embed-type": type,
       children: (0, _jsxRuntime.jsx)(_common.WarningOutline, {})
     }), (0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       error: true,
-      type: type,
-      topRounded: true,
-      bottomRounded: true
+      type: type
     })]
   });
 };

package/lib/Embed/ExternalEmbed.d.ts

@@ -8,7 +8,6 @@
 import { OembedMetaData } from "@ndla/types-embed";
 interface Props {
     embed: OembedMetaData;
-    isConcept?: boolean;
 }
-declare const ExternalEmbed: ({ embed, isConcept }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ExternalEmbed: ({ embed }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ExternalEmbed;

package/lib/Embed/ExternalEmbed.js

@@ -4,49 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = require("react");
 var _reactI18next = require("react-i18next");
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _Figure = require("../Figure");
 var _ResourceBox = require("../ResourceBox");
 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) 2023-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 StyledFigure = /*#__PURE__*/(0, _base.default)(_Figure.Figure, {
-  target: "e13ppouw0",
-  label: "StyledFigure"
-})(process.env.NODE_ENV === "production" ? {
-  name: "9y4sui",
-  styles: "iframe{height:auto;}"
-} : {
-  name: "9y4sui",
-  styles: "iframe{height:auto;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4dGVybmFsRW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCbUMiLCJmaWxlIjoiRXh0ZXJuYWxFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IE9lbWJlZE1ldGFEYXRhIH0gZnJvbSBcIkBuZGxhL3R5cGVzLWVtYmVkXCI7XG5pbXBvcnQgRW1iZWRFcnJvclBsYWNlaG9sZGVyIGZyb20gXCIuL0VtYmVkRXJyb3JQbGFjZWhvbGRlclwiO1xuaW1wb3J0IHsgRmlndXJlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuaW1wb3J0IHsgUmVzb3VyY2VCb3ggfSBmcm9tIFwiLi4vUmVzb3VyY2VCb3hcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgZW1iZWQ6IE9lbWJlZE1ldGFEYXRhO1xuICBpc0NvbmNlcHQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWRGaWd1cmUgPSBzdHlsZWQoRmlndXJlKWBcbiAgaWZyYW1lIHtcbiAgICBoZWlnaHQ6IGF1dG87XG4gIH1cbmA7XG5cbmNvbnN0IEV4dGVybmFsRW1iZWQgPSAoeyBlbWJlZCwgaXNDb25jZXB0IH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgZmlnUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50PihudWxsKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IGlmcmFtZSA9IGZpZ1JlZi5jdXJyZW50Py5xdWVyeVNlbGVjdG9yKFwiaWZyYW1lXCIpO1xuICAgIGlmIChpZnJhbWUpIHtcbiAgICAgIGNvbnN0IFt3aWR0aCwgaGVpZ2h0XSA9IFtOdW1iZXIucGFyc2VJbnQoaWZyYW1lLndpZHRoKSwgTnVtYmVyLnBhcnNlSW50KGlmcmFtZS5oZWlnaHQpXTtcbiAgICAgIGlmcmFtZS5zdHlsZS5hc3BlY3RSYXRpbyA9IGAke3dpZHRoID8gd2lkdGggOiAxNn0vJHtoZWlnaHQgPyBoZWlnaHQgOiA5fWA7XG4gICAgICBpZnJhbWUud2lkdGggPSBcIlwiO1xuICAgICAgaWZyYW1lLmhlaWdodCA9IFwiXCI7XG4gICAgfVxuICB9LCBbXSk7XG4gIGlmIChlbWJlZC5zdGF0dXMgPT09IFwiZXJyb3JcIikge1xuICAgIHJldHVybiA8RW1iZWRFcnJvclBsYWNlaG9sZGVyIHR5cGU9XCJleHRlcm5hbFwiIC8+O1xuICB9XG5cbiAgY29uc3QgeyBlbWJlZERhdGEsIGRhdGEgfSA9IGVtYmVkO1xuXG4gIGlmIChlbWJlZERhdGEudHlwZSA9PT0gXCJmdWxsc2NyZWVuXCIpIHtcbiAgICBjb25zdCBpbWFnZSA9IHtcbiAgICAgIHNyYzogZGF0YS5pZnJhbWVJbWFnZT8uaW1hZ2UuaW1hZ2VVcmwgPz8gXCJcIixcbiAgICAgIGFsdDogZW1iZWREYXRhLmFsdCAhPT0gdW5kZWZpbmVkID8gZW1iZWREYXRhLmFsdCA6IGRhdGEuaWZyYW1lSW1hZ2U/LmFsdHRleHQ/LmFsdHRleHQgPz8gXCJcIixcbiAgICB9O1xuICAgIHJldHVybiAoXG4gICAgICA8RmlndXJlIHR5cGU9XCJmdWxsXCI+XG4gICAgICAgIDxSZXNvdXJjZUJveFxuICAgICAgICAgIGltYWdlPXtpbWFnZX1cbiAgICAgICAgICB0aXRsZT17ZW1iZWREYXRhLnRpdGxlID8/IFwiXCJ9XG4gICAgICAgICAgdXJsPXtlbWJlZERhdGEudXJsfVxuICAgICAgICAgIGNhcHRpb249e2VtYmVkRGF0YS5jYXB0aW9uID8/IFwiXCJ9XG4gICAgICAgICAgYnV0dG9uVGV4dD17dChcImxpY2Vuc2Uub3RoZXIuaXRlbUltYWdlLmFyaWFMYWJlbFwiKX1cbiAgICAgICAgLz5cbiAgICAgIDwvRmlndXJlPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmVcbiAgICAgIHJlZj17ZmlnUmVmfVxuICAgICAgdHlwZT17aXNDb25jZXB0ID8gXCJmdWxsLWNvbHVtblwiIDogdW5kZWZpbmVkfVxuICAgICAgZGFuZ2Vyb3VzbHlTZXRJbm5lckhUTUw9e3sgX19odG1sOiBkYXRhLm9lbWJlZC5odG1sID8/IFwiXCIgfX1cbiAgICAvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRXh0ZXJuYWxFbWJlZDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+
+const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    "& iframe": {
+      height: "auto",
+      width: "100%"
+    }
+  }
 });
 const ExternalEmbed = _ref => {
-  var _data$oembed$html;
   let {
-    embed,
-    isConcept
+    embed
   } = _ref;
   const {
     t
   } = (0, _reactI18next.useTranslation)();
   const figRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    var _figRef$current;
-    const iframe = (_figRef$current = figRef.current) === null || _figRef$current === void 0 ? void 0 : _figRef$current.querySelector("iframe");
+    const iframe = figRef.current?.querySelector("iframe");
     if (iframe) {
       const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
-      iframe.style.aspectRatio = "".concat(width ? width : 16, "/").concat(height ? height : 9);
+      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
       iframe.width = "";
       iframe.height = "";
     }
@@ -61,27 +55,24 @@ const ExternalEmbed = _ref => {
     data
   } = embed;
   if (embedData.type === "fullscreen") {
-    var _data$iframeImage$ima, _data$iframeImage, _data$iframeImage$alt, _data$iframeImage2, _embedData$title, _embedData$caption;
     const image = {
-      src: (_data$iframeImage$ima = (_data$iframeImage = data.iframeImage) === null || _data$iframeImage === void 0 ? void 0 : _data$iframeImage.image.imageUrl) !== null && _data$iframeImage$ima !== void 0 ? _data$iframeImage$ima : "",
-      alt: embedData.alt !== undefined ? embedData.alt : (_data$iframeImage$alt = (_data$iframeImage2 = data.iframeImage) === null || _data$iframeImage2 === void 0 || (_data$iframeImage2 = _data$iframeImage2.alttext) === null || _data$iframeImage2 === void 0 ? void 0 : _data$iframeImage2.alttext) !== null && _data$iframeImage$alt !== void 0 ? _data$iframeImage$alt : ""
+      src: data.iframeImage?.image.imageUrl ?? "",
+      alt: embedData.alt !== undefined ? embedData.alt : data.iframeImage?.alttext?.alttext ?? ""
     };
-    return (0, _jsxRuntime.jsx)(_Figure.Figure, {
-      type: "full",
+    return (0, _jsxRuntime.jsx)(_primitives.Figure, {
       children: (0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
         image: image,
-        title: (_embedData$title = embedData.title) !== null && _embedData$title !== void 0 ? _embedData$title : "",
+        title: embedData.title ?? "",
         url: embedData.url,
-        caption: (_embedData$caption = embedData.caption) !== null && _embedData$caption !== void 0 ? _embedData$caption : "",
+        caption: embedData.caption ?? "",
         buttonText: t("license.other.itemImage.ariaLabel")
       })
     });
   }
   return (0, _jsxRuntime.jsx)(StyledFigure, {
     ref: figRef,
-    type: isConcept ? "full-column" : undefined,
     dangerouslySetInnerHTML: {
-      __html: (_data$oembed$html = data.oembed.html) !== null && _data$oembed$html !== void 0 ? _data$oembed$html : ""
+      __html: data.oembed.html ?? ""
     }
   });
 };

package/lib/Embed/FootnoteEmbed.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 _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) 2023-present, NDLA.
  *
@@ -17,10 +15,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const FootnoteRef = /*#__PURE__*/(0, _base.default)("span", {
-  target: "eva0wyf0",
-  label: "FootnoteRef"
-})("sup{a{margin-left:-2px;padding:", _core.spacing.small, " ", _core.spacing.xsmall, ";box-shadow:none;text-decoration:underline;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZvb3Rub3RlRW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCK0IiLCJmaWxlIjoiRm9vdG5vdGVFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgc3BhY2luZyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5pbXBvcnQgeyBGb290bm90ZU1ldGFEYXRhIH0gZnJvbSBcIkBuZGxhL3R5cGVzLWVtYmVkXCI7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGVtYmVkOiBGb290bm90ZU1ldGFEYXRhO1xufVxuXG5jb25zdCBGb290bm90ZVJlZiA9IHN0eWxlZC5zcGFuYFxuICBzdXAge1xuICAgIGEge1xuICAgICAgbWFyZ2luLWxlZnQ6IC0ycHg7XG4gICAgICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy54c21hbGx9O1xuICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgRm9vdG5vdGVFbWJlZCA9ICh7IGVtYmVkIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgaWYgKGVtYmVkLnN0YXR1cyA9PT0gXCJlcnJvclwiKSB7XG4gICAgcmV0dXJuIDxkaXY+e3QoXCJlcnJvclwiKX08L2Rpdj47XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxGb290bm90ZVJlZiBpZD17YHJlZiR7ZW1iZWQuZGF0YS5lbnRyeU51bX1gfT5cbiAgICAgIDxzdXA+XG4gICAgICAgIDxhIGhyZWY9e2Ajbm90ZSR7ZW1iZWQuZGF0YS5lbnRyeU51bX1gfSB0YXJnZXQ9XCJfc2VsZlwiPntgWyR7ZW1iZWQuZGF0YS5lbnRyeU51bX1dYH08L2E+XG4gICAgICA8L3N1cD5cbiAgICA8L0Zvb3Rub3RlUmVmPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRm9vdG5vdGVFbWJlZDtcbiJdfQ== */"));
+const StyledSup = (0, _jsx2.styled)("sup", {
+  base: {
+    "& a": {
+      textStyle: "label.xsmall",
+      marginInlineStart: "1"
+    }
+  }
+});
 const FootnoteEmbed = _ref => {
   let {
     embed
@@ -33,13 +35,13 @@ const FootnoteEmbed = _ref => {
       children: t("error")
     });
   }
-  return (0, _jsxRuntime.jsx)(FootnoteRef, {
-    id: "ref".concat(embed.data.entryNum),
-    children: (0, _jsxRuntime.jsx)("sup", {
+  return (0, _jsxRuntime.jsx)("span", {
+    id: `ref${embed.data.entryNum}`,
+    children: (0, _jsxRuntime.jsx)(StyledSup, {
       children: (0, _jsxRuntime.jsx)("a", {
-        href: "#note".concat(embed.data.entryNum),
+        href: `#note${embed.data.entryNum}`,
         target: "_self",
-        children: "[".concat(embed.data.entryNum, "]")
+        children: `[${embed.data.entryNum}]`
       })
     })
   });

package/lib/Embed/GlossEmbed.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 { ConceptMetaData } from "@ndla/types-embed";
+interface Props {
+    embed: ConceptMetaData;
+}
+export declare const GlossEmbed: ({ embed }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Embed/GlossEmbed.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlossEmbed = void 0;
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
+var _InlineTriggerButton = require("./InlineTriggerButton");
+var _Gloss = require("../Gloss");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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 StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
+  base: {
+    width: "surface.xlarge"
+  }
+});
+const GlossEmbed = _ref => {
+  let {
+    embed
+  } = _ref;
+  if (embed.status === "error" && embed.embedData.type === "inline") {
+    return (0, _jsxRuntime.jsx)("span", {
+      children: embed.embedData.linkText
+    });
+  }
+  if (embed.status === "error" || !embed.data.concept.glossData) {
+    return (0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
+      type: "gloss"
+    });
+  }
+  const {
+    concept,
+    visualElement
+  } = embed.data;
+  const audio = visualElement?.status === "success" && visualElement.resource === "audio" ? {
+    src: visualElement.data.audioFile.url,
+    title: visualElement.data.title.title
+  } : undefined;
+  if (embed.embedData.type === "inline") {
+    return (0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
+      children: [(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
+        asChild: true,
+        children: (0, _jsxRuntime.jsx)(_InlineTriggerButton.InlineTriggerButton, {
+          children: embed.embedData.linkText
+        })
+      }), (0, _jsxRuntime.jsx)(StyledPopoverContent, {
+        children: (0, _jsxRuntime.jsx)(_primitives.Figure, {
+          children: (0, _jsxRuntime.jsx)(_Gloss.Gloss, {
+            glossData: concept.glossData,
+            title: concept.title,
+            audio: audio
+          })
+        })
+      })]
+    });
+  }
+  return (0, _jsxRuntime.jsx)(_primitives.Figure, {
+    children: (0, _jsxRuntime.jsx)(_Gloss.Gloss, {
+      glossData: concept.glossData,
+      title: concept.title,
+      audio: audio,
+      variant: "bordered"
+    })
+  });
+};
+exports.GlossEmbed = GlossEmbed;

package/lib/Embed/H5pEmbed.d.ts

@@ -8,7 +8,6 @@
 import { H5pMetaData } from "@ndla/types-embed";
 interface Props {
     embed: H5pMetaData;
-    isConcept?: boolean;
 }
-declare const H5pEmbed: ({ embed, isConcept }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const H5pEmbed: ({ embed }: Props) => import("react/jsx-runtime").JSX.Element;
 export default H5pEmbed;

package/lib/Embed/H5pEmbed.js

@@ -4,34 +4,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _Figure = require("../Figure");
 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) 2023-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 StyledFigure = /*#__PURE__*/(0, _base.default)(_Figure.Figure, {
-  target: "etjdel10",
-  label: "StyledFigure"
-})(process.env.NODE_ENV === "production" ? {
-  name: "9y4sui",
-  styles: "iframe{height:auto;}"
-} : {
-  name: "9y4sui",
-  styles: "iframe{height:auto;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkg1cEVtYmVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQm1DIiwiZmlsZSI6Ikg1cEVtYmVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBINXBNZXRhRGF0YSB9IGZyb20gXCJAbmRsYS90eXBlcy1lbWJlZFwiO1xuaW1wb3J0IEVtYmVkRXJyb3JQbGFjZWhvbGRlciBmcm9tIFwiLi9FbWJlZEVycm9yUGxhY2Vob2xkZXJcIjtcbmltcG9ydCB7IEZpZ3VyZSB9IGZyb20gXCIuLi9GaWd1cmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgZW1iZWQ6IEg1cE1ldGFEYXRhO1xuICBpc0NvbmNlcHQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWRGaWd1cmUgPSBzdHlsZWQoRmlndXJlKWBcbiAgaWZyYW1lIHtcbiAgICBoZWlnaHQ6IGF1dG87XG4gIH1cbmA7XG5cbmNvbnN0IEg1cEVtYmVkID0gKHsgZW1iZWQsIGlzQ29uY2VwdCB9OiBQcm9wcykgPT4ge1xuICBpZiAoZW1iZWQuc3RhdHVzID09PSBcImVycm9yXCIpIHtcbiAgICByZXR1cm4gPEVtYmVkRXJyb3JQbGFjZWhvbGRlciB0eXBlPVwiaDVwXCIgLz47XG4gIH1cblxuICBpZiAoZW1iZWQuZGF0YS5vZW1iZWQpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPEZpZ3VyZVxuICAgICAgICB0eXBlPXtpc0NvbmNlcHQgPyBcImZ1bGwtY29sdW1uXCIgOiB1bmRlZmluZWR9XG4gICAgICAgIGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPXt7IF9faHRtbDogZW1iZWQuZGF0YS5vZW1iZWQuaHRtbCA/PyBcIlwiIH19XG4gICAgICAvPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmUgdHlwZT17aXNDb25jZXB0ID8gXCJmdWxsLWNvbHVtblwiIDogdW5kZWZpbmVkfT5cbiAgICAgIDxpZnJhbWUgdGl0bGU9e2VtYmVkLmVtYmVkRGF0YS51cmx9IGFyaWEtbGFiZWw9e2VtYmVkLmVtYmVkRGF0YS51cmx9IHNyYz17ZW1iZWQuZW1iZWREYXRhLnVybH0gLz5cbiAgICA8L1N0eWxlZEZpZ3VyZT5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEg1cEVtYmVkO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+
+const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    "& iframe": {
+      height: "auto",
+      width: "100%"
+    }
+  }
+});
+const FigureOembed = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    width: "100%",
+    "& iframe": {
+      width: "100%"
+    }
+  }
 });
 const H5pEmbed = _ref => {
   let {
-    embed,
-    isConcept
+    embed
   } = _ref;
   if (embed.status === "error") {
     return (0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
@@ -39,16 +43,13 @@ const H5pEmbed = _ref => {
     });
   }
   if (embed.data.oembed) {
-    var _embed$data$oembed$ht;
-    return (0, _jsxRuntime.jsx)(_Figure.Figure, {
-      type: isConcept ? "full-column" : undefined,
+    return (0, _jsxRuntime.jsx)(FigureOembed, {
       dangerouslySetInnerHTML: {
-        __html: (_embed$data$oembed$ht = embed.data.oembed.html) !== null && _embed$data$oembed$ht !== void 0 ? _embed$data$oembed$ht : ""
+        __html: embed.data.oembed.html ?? ""
       }
     });
   }
   return (0, _jsxRuntime.jsx)(StyledFigure, {
-    type: isConcept ? "full-column" : undefined,
     children: (0, _jsxRuntime.jsx)("iframe", {
       title: embed.embedData.url,
       "aria-label": embed.embedData.url,