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

package/es/Embed/ConceptListEmbed.js

@@ -1,5 +1,3 @@
-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) 2023-present, NDLA.
  *
@@ -9,26 +7,25 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { useTranslation } from "react-i18next";
-import { colors } from "@ndla/core";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { BlockConcept } from "./ConceptEmbed";
-import { Figure } from "../Figure";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const ConceptList = /*#__PURE__*/_styled("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 = styled("div", {
+  base: {
+    "& li": {
+      display: "block"
+    }
+  }
+});
+const StyledSpan = styled("span", {
+  base: {
+    color: "text.error"
+  }
 });
-const StyledSpan = /*#__PURE__*/_styled("span", {
-  target: "e1g5p4xu0",
-  label: "StyledSpan"
-})("color:", 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,
@@ -48,7 +45,6 @@ const ConceptListEmbed = _ref => {
   } = embed;
   return _jsx("div", {
     children: _jsxs(Figure, {
-      type: "full",
       children: [embedData.title && _jsx("h2", {
         lang: lang,
         children: embedData.title
@@ -62,13 +58,11 @@ const ConceptListEmbed = _ref => {
             } = _ref2;
             return _jsx("li", {
               children: _jsx(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/es/Embed/ContentLinkEmbed.js

@@ -1,4 +1,3 @@
-import _styled from "@emotion/styled/base";
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -8,12 +7,8 @@ import _styled from "@emotion/styled/base";
  */
 
 import { useTranslation } from "react-i18next";
-import { colors } from "@ndla/core";
+import { Text } from "@ndla/primitives";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const StyledSpan = /*#__PURE__*/_styled("span", {
-  target: "e1s10cki0",
-  label: "StyledSpan"
-})("color:", 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,
@@ -24,10 +19,15 @@ const ContentLinkEmbed = _ref => {
     t
   } = useTranslation();
   if (embed.status === "error") {
-    return _jsxs(StyledSpan, {
-      children: [_jsx("span", {
-        children: "".concat(t("embed.linkError"), ": ")
-      }), children]
+    return _jsx(Text, {
+      color: "text.error",
+      asChild: true,
+      consumeCss: true,
+      children: _jsxs("span", {
+        children: [_jsx("span", {
+          children: `${t("embed.linkError")}: `
+        }), children]
+      })
     });
   }
   const {

package/es/Embed/CopyrightEmbed.js

@@ -1,5 +1,3 @@
-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) 2024-present, NDLA.
  *
@@ -10,31 +8,16 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { EmbedByline } from "../LicenseByline";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const StyledFigCaption = /*#__PURE__*/_styled("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 _jsxs("figure", {
-    children: [children, _jsx(StyledFigCaption, {
-      contentEditable: false,
-      children: _jsx(EmbedByline, {
-        type: "copyright",
-        copyright: embed.embedData.copyright,
-        bottomRounded: true
-      })
+    children: [children, _jsx(EmbedByline, {
+      type: "copyright",
+      copyright: embed.embedData.copyright,
+      bottomRounded: true
     })]
   });
 };

package/es/Embed/EmbedErrorPlaceholder.js

@@ -1,4 +1,3 @@
-import _styled from "@emotion/styled/base";
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -7,35 +6,51 @@ import _styled from "@emotion/styled/base";
  *
  */
 
-import { colors, spacing } from "@ndla/core";
 import { WarningOutline } from "@ndla/icons/common";
-import { Figure } from "../Figure";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const ErrorPlaceholder = /*#__PURE__*/_styled("div", {
-  target: "etnx1j51",
-  label: "ErrorPlaceholder"
-})("display:flex;align-items:center;justify-content:center;background-color:", colors.brand.greyLighter, ";height:330px;svg{fill:", 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__*/_styled(Figure, {
-  target: "etnx1j50",
-  label: "StyledFigure"
-})("display:flex;flex-direction:column;gap:", spacing.xsmall, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtYmVkRXJyb3JQbGFjZWhvbGRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNtQyIsImZpbGUiOiJFbWJlZEVycm9yUGxhY2Vob2xkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IFdhcm5pbmdPdXRsaW5lIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgRmlndXJlLCBGaWd1cmVUeXBlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmUgfSBmcm9tIFwiLi4vTGljZW5zZUJ5bGluZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmVFcnJvclByb3BzIH0gZnJvbSBcIi4uL0xpY2Vuc2VCeWxpbmUvRW1iZWRCeWxpbmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogRW1iZWRCeWxpbmVFcnJvclByb3BzW1widHlwZVwiXTtcbiAgZmlndXJlVHlwZT86IEZpZ3VyZVR5cGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBFcnJvclBsYWNlaG9sZGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgaGVpZ2h0OiAzMzBweDtcblxuICBzdmcge1xuICAgIGZpbGw6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICAgIGhlaWdodDogOTAlO1xuICAgIHdpZHRoOiA5MCU7XG4gIH1cbiAgJltkYXRhLWVtYmVkLXR5cGU9XCJhdWRpb1wiXSB7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkRmlndXJlID0gc3R5bGVkKEZpZ3VyZSlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5jb25zdCBFbWJlZEVycm9yUGxhY2Vob2xkZXIgPSAoeyB0eXBlLCBjaGlsZHJlbiwgZmlndXJlVHlwZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmUgdHlwZT17ZmlndXJlVHlwZX0+XG4gICAgICB7Y2hpbGRyZW4gPz8gKFxuICAgICAgICA8RXJyb3JQbGFjZWhvbGRlciBkYXRhLWVtYmVkLXR5cGU9e3R5cGV9PlxuICAgICAgICAgIDxXYXJuaW5nT3V0bGluZSAvPlxuICAgICAgICA8L0Vycm9yUGxhY2Vob2xkZXI+XG4gICAgICApfVxuICAgICAgPEVtYmVkQnlsaW5lIGVycm9yIHR5cGU9e3R5cGV9IHRvcFJvdW5kZWQgYm90dG9tUm91bmRlZCAvPlxuICAgIDwvU3R5bGVkRmlndXJlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRW1iZWRFcnJvclBsYWNlaG9sZGVyO1xuIl19 */"));
+const ErrorPlaceholder = 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 = styled(Figure, {
+  base: {
+    "& > *:not(:first-child)": {
+      marginBlockStart: "3xsmall"
+    }
+  }
+});
 const EmbedErrorPlaceholder = _ref => {
   let {
     type,
     children,
-    figureType
+    figureType,
+    float
   } = _ref;
   return _jsxs(StyledFigure, {
-    type: figureType,
-    children: [children !== null && children !== void 0 ? children : _jsx(ErrorPlaceholder, {
+    size: figureType,
+    float: float,
+    children: [children ?? _jsx(ErrorPlaceholder, {
       "data-embed-type": type,
       children: _jsx(WarningOutline, {})
     }), _jsx(EmbedByline, {
       error: true,
-      type: type,
-      topRounded: true,
-      bottomRounded: true
+      type: type
     })]
   });
 };

package/es/Embed/ExternalEmbed.js

@@ -1,5 +1,3 @@
-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) 2023-present, NDLA.
  *
@@ -10,38 +8,32 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Figure } from "../Figure";
 import { ResourceBox } from "../ResourceBox";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const StyledFigure = /*#__PURE__*/_styled(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 = styled(Figure, {
+  base: {
+    "& iframe": {
+      height: "auto",
+      width: "100%"
+    }
+  }
 });
 const ExternalEmbed = _ref => {
-  var _data$oembed$html;
   let {
-    embed,
-    isConcept
+    embed
   } = _ref;
   const {
     t
   } = useTranslation();
   const figRef = useRef(null);
   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 = "";
     }
@@ -56,27 +48,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 _jsx(Figure, {
-      type: "full",
       children: _jsx(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 _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/es/Embed/FootnoteEmbed.js

@@ -1,4 +1,3 @@
-import _styled from "@emotion/styled/base";
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -8,12 +7,16 @@ import _styled from "@emotion/styled/base";
  */
 
 import { useTranslation } from "react-i18next";
-import { spacing } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const FootnoteRef = /*#__PURE__*/_styled("span", {
-  target: "eva0wyf0",
-  label: "FootnoteRef"
-})("sup{a{margin-left:-2px;padding:", spacing.small, " ", 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 = styled("sup", {
+  base: {
+    "& a": {
+      textStyle: "label.xsmall",
+      marginInlineStart: "1"
+    }
+  }
+});
 const FootnoteEmbed = _ref => {
   let {
     embed
@@ -26,13 +29,13 @@ const FootnoteEmbed = _ref => {
       children: t("error")
     });
   }
-  return _jsx(FootnoteRef, {
-    id: "ref".concat(embed.data.entryNum),
-    children: _jsx("sup", {
+  return _jsx("span", {
+    id: `ref${embed.data.entryNum}`,
+    children: _jsx(StyledSup, {
       children: _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/es/Embed/GlossEmbed.js

@@ -0,0 +1,68 @@
+/**
+ * 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 { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { InlineTriggerButton } from "./InlineTriggerButton";
+import { Gloss } from "../Gloss";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const StyledPopoverContent = styled(PopoverContent, {
+  base: {
+    width: "surface.xlarge"
+  }
+});
+export const GlossEmbed = _ref => {
+  let {
+    embed
+  } = _ref;
+  if (embed.status === "error" && embed.embedData.type === "inline") {
+    return _jsx("span", {
+      children: embed.embedData.linkText
+    });
+  }
+  if (embed.status === "error" || !embed.data.concept.glossData) {
+    return _jsx(EmbedErrorPlaceholder, {
+      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 _jsxs(PopoverRoot, {
+      children: [_jsx(PopoverTrigger, {
+        asChild: true,
+        children: _jsx(InlineTriggerButton, {
+          children: embed.embedData.linkText
+        })
+      }), _jsx(StyledPopoverContent, {
+        children: _jsx(Figure, {
+          children: _jsx(Gloss, {
+            glossData: concept.glossData,
+            title: concept.title,
+            audio: audio
+          })
+        })
+      })]
+    });
+  }
+  return _jsx(Figure, {
+    children: _jsx(Gloss, {
+      glossData: concept.glossData,
+      title: concept.title,
+      audio: audio,
+      variant: "bordered"
+    })
+  });
+};

package/es/Embed/H5pEmbed.js

@@ -1,5 +1,3 @@
-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) 2023-present, NDLA.
  *
@@ -8,25 +6,29 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  *
  */
 
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Figure } from "../Figure";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const StyledFigure = /*#__PURE__*/_styled(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 = styled(Figure, {
+  base: {
+    "& iframe": {
+      height: "auto",
+      width: "100%"
+    }
+  }
+});
+const FigureOembed = styled(Figure, {
+  base: {
+    width: "100%",
+    "& iframe": {
+      width: "100%"
+    }
+  }
 });
 const H5pEmbed = _ref => {
   let {
-    embed,
-    isConcept
+    embed
   } = _ref;
   if (embed.status === "error") {
     return _jsx(EmbedErrorPlaceholder, {
@@ -34,16 +36,13 @@ const H5pEmbed = _ref => {
     });
   }
   if (embed.data.oembed) {
-    var _embed$data$oembed$ht;
-    return _jsx(Figure, {
-      type: isConcept ? "full-column" : undefined,
+    return _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 _jsx(StyledFigure, {
-    type: isConcept ? "full-column" : undefined,
     children: _jsx("iframe", {
       title: embed.embedData.url,
       "aria-label": embed.embedData.url,

package/es/Embed/IframeEmbed.js

@@ -8,14 +8,19 @@
 
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Figure } from "../Figure";
 import { ResourceBox } from "../ResourceBox";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+const StyledIframe = styled("iframe", {
+  base: {
+    width: "100%"
+  }
+});
 const IframeEmbed = _ref => {
   let {
-    embed,
-    isConcept
+    embed
   } = _ref;
   const {
     t
@@ -25,7 +30,7 @@ const IframeEmbed = _ref => {
     const iframe = iframeRef.current;
     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 = "";
     }
@@ -40,20 +45,18 @@ const IframeEmbed = _ref => {
     data
   } = embed;
   if (embedData.type === "fullscreen") {
-    var _iframeImage$image$im, _embedData$title, _embedData$caption;
     const iframeImage = embed.status === "success" ? data.iframeImage : undefined;
-    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage === null || iframeImage === void 0 ? void 0 : iframeImage.alttext.alttext;
+    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
     const image = {
-      src: (_iframeImage$image$im = iframeImage === null || iframeImage === void 0 ? void 0 : iframeImage.image.imageUrl) !== null && _iframeImage$image$im !== void 0 ? _iframeImage$image$im : "",
-      alt: alt !== null && alt !== void 0 ? alt : ""
+      src: iframeImage?.image.imageUrl ?? "",
+      alt: alt ?? ""
     };
     return _jsx(Figure, {
-      type: "full",
       children: _jsx(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")
       })
     });
@@ -64,12 +67,11 @@ const IframeEmbed = _ref => {
     title,
     url
   } = embedData;
-  const strippedWidth = typeof width === "number" ? width : width === null || width === void 0 ? void 0 : width.replace(/\s*px/, "");
-  const strippedHeight = typeof height === "number" ? height : height === null || height === void 0 ? void 0 : height.replace(/\s*px/, "");
+  const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
+  const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
   const urlOrTitle = title || url;
   return _jsx(Figure, {
-    type: isConcept ? "full-column" : undefined,
-    children: _jsx("iframe", {
+    children: _jsx(StyledIframe, {
       ref: iframeRef,
       title: urlOrTitle,
       "aria-label": urlOrTitle,