@ndla/ui 55.0.13-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: `${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/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,37 +4,33 @@ 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 => {
   let {
-    embed,
-    isConcept
+    embed
   } = _ref;
   const {
     t
@@ -63,8 +59,7 @@ const ExternalEmbed = _ref => {
       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 ?? "",
@@ -76,7 +71,6 @@ const ExternalEmbed = _ref => {
   }
   return (0, _jsxRuntime.jsx)(StyledFigure, {
     ref: figRef,
-    type: isConcept ? "full-column" : undefined,
     dangerouslySetInnerHTML: {
       __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,9 +35,9 @@ const FootnoteEmbed = _ref => {
       children: t("error")
     });
   }
-  return (0, _jsxRuntime.jsx)(FootnoteRef, {
+  return (0, _jsxRuntime.jsx)("span", {
     id: `ref${embed.data.entryNum}`,
-    children: (0, _jsxRuntime.jsx)("sup", {
+    children: (0, _jsxRuntime.jsx)(StyledSup, {
       children: (0, _jsxRuntime.jsx)("a", {
         href: `#note${embed.data.entryNum}`,
         target: "_self",

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,15 +43,13 @@ const H5pEmbed = _ref => {
     });
   }
   if (embed.data.oembed) {
-    return (0, _jsxRuntime.jsx)(_Figure.Figure, {
-      type: isConcept ? "full-column" : undefined,
+    return (0, _jsxRuntime.jsx)(FigureOembed, {
       dangerouslySetInnerHTML: {
         __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,

package/lib/Embed/IframeEmbed.d.ts

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

package/lib/Embed/IframeEmbed.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 }; }
@@ -19,10 +20,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
+const StyledIframe = (0, _jsx2.styled)("iframe", {
+  base: {
+    width: "100%"
+  }
+});
 const IframeEmbed = _ref => {
   let {
-    embed,
-    isConcept
+    embed
   } = _ref;
   const {
     t
@@ -53,8 +58,7 @@ const IframeEmbed = _ref => {
       src: iframeImage?.image.imageUrl ?? "",
       alt: alt ?? ""
     };
-    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 ?? "",
@@ -73,9 +77,8 @@ const IframeEmbed = _ref => {
   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 (0, _jsxRuntime.jsx)(_Figure.Figure, {
-    type: isConcept ? "full-column" : undefined,
-    children: (0, _jsxRuntime.jsx)("iframe", {
+  return (0, _jsxRuntime.jsx)(_primitives.Figure, {
+    children: (0, _jsxRuntime.jsx)(StyledIframe, {
       ref: iframeRef,
       title: urlOrTitle,
       "aria-label": urlOrTitle,

package/lib/Embed/InlineTriggerButton.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+export declare const InlineTriggerButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

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
+  });
+});