@ndla/ui 34.6.2 → 34.6.3

package/lib/Embed/ConceptListEmbed.d.ts

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

package/lib/Embed/ConceptListEmbed.js

@@ -0,0 +1,70 @@
+"use strict";
+
+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 _Figure = require("../Figure");
+var _ConceptEmbed = require("./ConceptEmbed");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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)."; }
+var 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbmNlcHRMaXN0RW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1COEIiLCJmaWxlIjoiQ29uY2VwdExpc3RFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IENvbmNlcHRMaXN0TWV0YURhdGEgfSBmcm9tICdAbmRsYS90eXBlcy1lbWJlZCc7XG5pbXBvcnQgeyBGaWd1cmUgfSBmcm9tICcuLi9GaWd1cmUnO1xuaW1wb3J0IHsgQmxvY2tDb25jZXB0IH0gZnJvbSAnLi9Db25jZXB0RW1iZWQnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBlbWJlZDogQ29uY2VwdExpc3RNZXRhRGF0YTtcbn1cblxuY29uc3QgQ29uY2VwdExpc3QgPSBzdHlsZWQuZGl2YFxuICAmID4gZmlndXJlOmZpcnN0LW9mLXR5cGUge1xuICAgIG1hcmdpbi10b3A6IDMycHg7XG4gIH1cbiAgJiBsaSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQuc3BhbmBcbiAgY29sb3I6ICR7Y29sb3JzLnN1cHBvcnQucmVkfTtcbmA7XG5cbmNvbnN0IENvbmNlcHRMaXN0RW1iZWQgPSAoeyBlbWJlZCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGlmIChlbWJlZC5zdGF0dXMgPT09ICdlcnJvcicpIHtcbiAgICByZXR1cm4gPFN0eWxlZFNwYW4+e3QoJ2VtYmVkLmNvbmNlcHRMaXN0RXJyb3InKX08L1N0eWxlZFNwYW4+O1xuICB9XG4gIGNvbnN0IHsgZW1iZWREYXRhLCBkYXRhIH0gPSBlbWJlZDtcbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPEZpZ3VyZSB0eXBlPVwiZnVsbFwiIHJlc2l6ZUlmcmFtZT5cbiAgICAgICAge2VtYmVkRGF0YS50aXRsZSAmJiA8aDI+e2VtYmVkRGF0YS50aXRsZX08L2gyPn1cbiAgICAgICAgPENvbmNlcHRMaXN0PlxuICAgICAgICAgIDx1bD5cbiAgICAgICAgICAgIHtkYXRhLmNvbmNlcHRzLm1hcCgoeyBjb25jZXB0LCB2aXN1YWxFbGVtZW50IH0pID0+IChcbiAgICAgICAgICAgICAgPGxpIGtleT17Y29uY2VwdC5pZH0+XG4gICAgICAgICAgICAgICAgPEJsb2NrQ29uY2VwdFxuICAgICAgICAgICAgICAgICAgdGl0bGU9e2NvbmNlcHQudGl0bGUudGl0bGV9XG4gICAgICAgICAgICAgICAgICBjb250ZW50PXtjb25jZXB0LmNvbnRlbnQuY29udGVudH1cbiAgICAgICAgICAgICAgICAgIG1ldGFJbWFnZT17Y29uY2VwdC5tZXRhSW1hZ2V9XG4gICAgICAgICAgICAgICAgICBjb3B5cmlnaHQ9e2NvbmNlcHQuY29weXJpZ2h0fVxuICAgICAgICAgICAgICAgICAgc291cmNlPXtjb25jZXB0LnNvdXJjZX1cbiAgICAgICAgICAgICAgICAgIHZpc3VhbEVsZW1lbnQ9e3Zpc3VhbEVsZW1lbnR9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICkpfVxuICAgICAgICAgIDwvdWw+XG4gICAgICAgIDwvQ29uY2VwdExpc3Q+XG4gICAgICA8L0ZpZ3VyZT5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENvbmNlcHRMaXN0RW1iZWQ7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbmNlcHRMaXN0RW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCOEIiLCJmaWxlIjoiQ29uY2VwdExpc3RFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IENvbmNlcHRMaXN0TWV0YURhdGEgfSBmcm9tICdAbmRsYS90eXBlcy1lbWJlZCc7XG5pbXBvcnQgeyBGaWd1cmUgfSBmcm9tICcuLi9GaWd1cmUnO1xuaW1wb3J0IHsgQmxvY2tDb25jZXB0IH0gZnJvbSAnLi9Db25jZXB0RW1iZWQnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBlbWJlZDogQ29uY2VwdExpc3RNZXRhRGF0YTtcbn1cblxuY29uc3QgQ29uY2VwdExpc3QgPSBzdHlsZWQuZGl2YFxuICAmID4gZmlndXJlOmZpcnN0LW9mLXR5cGUge1xuICAgIG1hcmdpbi10b3A6IDMycHg7XG4gIH1cbiAgJiBsaSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQuc3BhbmBcbiAgY29sb3I6ICR7Y29sb3JzLnN1cHBvcnQucmVkfTtcbmA7XG5cbmNvbnN0IENvbmNlcHRMaXN0RW1iZWQgPSAoeyBlbWJlZCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGlmIChlbWJlZC5zdGF0dXMgPT09ICdlcnJvcicpIHtcbiAgICByZXR1cm4gPFN0eWxlZFNwYW4+e3QoJ2VtYmVkLmNvbmNlcHRMaXN0RXJyb3InKX08L1N0eWxlZFNwYW4+O1xuICB9XG4gIGNvbnN0IHsgZW1iZWREYXRhLCBkYXRhIH0gPSBlbWJlZDtcbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPEZpZ3VyZSB0eXBlPVwiZnVsbFwiIHJlc2l6ZUlmcmFtZT5cbiAgICAgICAge2VtYmVkRGF0YS50aXRsZSAmJiA8aDI+e2VtYmVkRGF0YS50aXRsZX08L2gyPn1cbiAgICAgICAgPENvbmNlcHRMaXN0PlxuICAgICAgICAgIDx1bD5cbiAgICAgICAgICAgIHtkYXRhLmNvbmNlcHRzLm1hcCgoeyBjb25jZXB0LCB2aXN1YWxFbGVtZW50IH0pID0+IChcbiAgICAgICAgICAgICAgPGxpIGtleT17Y29uY2VwdC5pZH0+XG4gICAgICAgICAgICAgICAgPEJsb2NrQ29uY2VwdFxuICAgICAgICAgICAgICAgICAgdGl0bGU9e2NvbmNlcHQudGl0bGUudGl0bGV9XG4gICAgICAgICAgICAgICAgICBjb250ZW50PXtjb25jZXB0LmNvbnRlbnQuY29udGVudH1cbiAgICAgICAgICAgICAgICAgIG1ldGFJbWFnZT17Y29uY2VwdC5tZXRhSW1hZ2V9XG4gICAgICAgICAgICAgICAgICBjb3B5cmlnaHQ9e2NvbmNlcHQuY29weXJpZ2h0fVxuICAgICAgICAgICAgICAgICAgc291cmNlPXtjb25jZXB0LnNvdXJjZX1cbiAgICAgICAgICAgICAgICAgIHZpc3VhbEVsZW1lbnQ9e3Zpc3VhbEVsZW1lbnR9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICkpfVxuICAgICAgICAgIDwvdWw+XG4gICAgICAgIDwvQ29uY2VwdExpc3Q+XG4gICAgICA8L0ZpZ3VyZT5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENvbmNlcHRMaXN0RW1iZWQ7XG4iXX0= */"));
+var ConceptListEmbed = function ConceptListEmbed(_ref) {
+  var embed = _ref.embed;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  if (embed.status === 'error') {
+    return (0, _jsxRuntime.jsx)(StyledSpan, {
+      children: t('embed.conceptListError')
+    });
+  }
+  var embedData = embed.embedData,
+    data = embed.data;
+  return (0, _jsxRuntime.jsx)("div", {
+    children: (0, _jsxRuntime.jsxs)(_Figure.Figure, {
+      type: "full",
+      resizeIframe: true,
+      children: [embedData.title && (0, _jsxRuntime.jsx)("h2", {
+        children: embedData.title
+      }), (0, _jsxRuntime.jsx)(ConceptList, {
+        children: (0, _jsxRuntime.jsx)("ul", {
+          children: data.concepts.map(function (_ref2) {
+            var concept = _ref2.concept,
+              visualElement = _ref2.visualElement;
+            return (0, _jsxRuntime.jsx)("li", {
+              children: (0, _jsxRuntime.jsx)(_ConceptEmbed.BlockConcept, {
+                title: concept.title.title,
+                content: concept.content.content,
+                metaImage: concept.metaImage,
+                copyright: concept.copyright,
+                source: concept.source,
+                visualElement: visualElement
+              })
+            }, concept.id);
+          })
+        })
+      })]
+    })
+  });
+};
+var _default = ConceptListEmbed;
+exports["default"] = _default;

package/lib/Embed/ContentLinkEmbed.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ */
+import { ContentLinkMetaData } from '@ndla/types-embed';
+interface Props {
+    embed: ContentLinkMetaData;
+    isOembed?: boolean;
+}
+declare const ContentLinkEmbed: ({ embed, isOembed }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ContentLinkEmbed;

package/lib/Embed/ContentLinkEmbed.js

@@ -0,0 +1,50 @@
+"use strict";
+
+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 _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/**
+ * 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.
+ *
+ */
+
+var 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRlbnRMaW5rRW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCOEIiLCJmaWxlIjoiQ29udGVudExpbmtFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IENvbnRlbnRMaW5rTWV0YURhdGEgfSBmcm9tICdAbmRsYS90eXBlcy1lbWJlZCc7XG5pbnRlcmZhY2UgUHJvcHMge1xuICBlbWJlZDogQ29udGVudExpbmtNZXRhRGF0YTtcbiAgaXNPZW1iZWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWRTcGFuID0gc3R5bGVkLnNwYW5gXG4gIGNvbG9yOiAke2NvbG9ycy5zdXBwb3J0LnJlZH07XG5gO1xuXG5jb25zdCBDb250ZW50TGlua0VtYmVkID0gKHsgZW1iZWQsIGlzT2VtYmVkIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgaWYgKGVtYmVkLnN0YXR1cyA9PT0gJ2Vycm9yJykge1xuICAgIHJldHVybiA8U3R5bGVkU3Bhbj57YCR7dCgnZW1iZWQubGlua0Vycm9yJyl9OiAke2VtYmVkLmVtYmVkRGF0YS5saW5rVGV4dH1gfTwvU3R5bGVkU3Bhbj47XG4gIH1cblxuICBjb25zdCB7IGVtYmVkRGF0YSwgZGF0YSB9ID0gZW1iZWQ7XG5cbiAgaWYgKGVtYmVkRGF0YS5vcGVuSW4gPT09ICduZXctY29udGV4dCcgfHwgaXNPZW1iZWQpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGEgaHJlZj17ZW1iZWQuZGF0YS5wYXRofSB0YXJnZXQ9XCJfYmxhbmtcIiByZWw9XCJub29wZW5lciBub3JlZmVycmVyXCI+XG4gICAgICAgIHtlbWJlZERhdGEubGlua1RleHR9XG4gICAgICA8L2E+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiA8YSBocmVmPXtkYXRhLnBhdGh9PntlbWJlZERhdGEubGlua1RleHR9PC9hPjtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENvbnRlbnRMaW5rRW1iZWQ7XG4iXX0= */"));
+var ContentLinkEmbed = function ContentLinkEmbed(_ref) {
+  var embed = _ref.embed,
+    isOembed = _ref.isOembed;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  if (embed.status === 'error') {
+    return (0, _jsxRuntime.jsx)(StyledSpan, {
+      children: "".concat(t('embed.linkError'), ": ").concat(embed.embedData.linkText)
+    });
+  }
+  var embedData = embed.embedData,
+    data = embed.data;
+  if (embedData.openIn === 'new-context' || isOembed) {
+    return (0, _jsxRuntime.jsx)("a", {
+      href: embed.data.path,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: embedData.linkText
+    });
+  }
+  return (0, _jsxRuntime.jsx)("a", {
+    href: data.path,
+    children: embedData.linkText
+  });
+};
+var _default = ContentLinkEmbed;
+exports["default"] = _default;

package/lib/Embed/ExternalEmbed.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ */
+import { OembedMetaData } from '@ndla/types-embed';
+interface Props {
+    embed: OembedMetaData;
+    isConcept?: boolean;
+}
+declare const ExternalEmbed: ({ embed, isConcept }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ExternalEmbed;

package/lib/Embed/ExternalEmbed.js

@@ -0,0 +1,90 @@
+"use strict";
+
+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 _Figure = require("../Figure");
+var _ResourceBox = require("../ResourceBox");
+var _ImageEmbed = require("./ImageEmbed");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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)."; }
+var StyledFigure = /*#__PURE__*/(0, _base["default"])("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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4dGVybmFsRW1iZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCa0MiLCJmaWxlIjoiRXh0ZXJuYWxFbWJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IE9lbWJlZE1ldGFEYXRhIH0gZnJvbSAnQG5kbGEvdHlwZXMtZW1iZWQnO1xuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHsgRmlndXJlIH0gZnJvbSAnLi4vRmlndXJlJztcbmltcG9ydCB7IFJlc291cmNlQm94IH0gZnJvbSAnLi4vUmVzb3VyY2VCb3gnO1xuaW1wb3J0IHsgZXJyb3JTdmdTcmMgfSBmcm9tICcuL0ltYWdlRW1iZWQnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBlbWJlZDogT2VtYmVkTWV0YURhdGE7XG4gIGlzQ29uY2VwdD86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZEZpZ3VyZSA9IHN0eWxlZC5maWd1cmVgXG4gIGlmcmFtZSB7XG4gICAgaGVpZ2h0OiBhdXRvO1xuICB9XG5gO1xuXG5jb25zdCBFeHRlcm5hbEVtYmVkID0gKHsgZW1iZWQsIGlzQ29uY2VwdCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGZpZ1JlZiA9IHVzZVJlZjxIVE1MRWxlbWVudD4obnVsbCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBpZnJhbWUgPSBmaWdSZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcihgaWZyYW1lYCk7XG4gICAgaWYgKGlmcmFtZSkge1xuICAgICAgY29uc3QgW3dpZHRoLCBoZWlnaHRdID0gW3BhcnNlSW50KGlmcmFtZS53aWR0aCksIHBhcnNlSW50KGlmcmFtZS5oZWlnaHQpXTtcbiAgICAgIGlmcmFtZS5zdHlsZS5hc3BlY3RSYXRpbyA9IGAke3dpZHRoID8gd2lkdGggOiAxNn0vJHtoZWlnaHQgPyBoZWlnaHQgOiA5fWA7XG4gICAgfVxuICB9LCBbXSk7XG4gIGlmIChlbWJlZC5zdGF0dXMgPT09ICdlcnJvcicpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGZpZ3VyZSBjbGFzc05hbWU9e2lzQ29uY2VwdCA/ICcnIDogJ2MtZmlndXJlJ30+XG4gICAgICAgIDxpbWcgYWx0PXt0KCdleHRlcm5hbC5lcnJvcicpfSBzcmM9e2Vycm9yU3ZnU3JjfSAvPlxuICAgICAgICA8ZmlnY2FwdGlvbj57dCgnZXh0ZXJuYWwuZXJyb3InKX08L2ZpZ2NhcHRpb24+XG4gICAgICA8L2ZpZ3VyZT5cbiAgICApO1xuICB9XG5cbiAgY29uc3QgeyBlbWJlZERhdGEsIGRhdGEgfSA9IGVtYmVkO1xuXG4gIGlmIChlbWJlZERhdGEudHlwZSA9PT0gJ2Z1bGxzY3JlZW4nKSB7XG4gICAgY29uc3QgaW1hZ2UgPSB7IHNyYzogZGF0YS5pZnJhbWVJbWFnZT8uaW1hZ2VVcmwgPz8gJycsIGFsdDogZGF0YS5pZnJhbWVJbWFnZT8uYWx0dGV4dD8uYWx0dGV4dCA/PyAnJyB9O1xuICAgIHJldHVybiAoXG4gICAgICA8RmlndXJlIHR5cGU9XCJmdWxsXCI+XG4gICAgICAgIDxSZXNvdXJjZUJveFxuICAgICAgICAgIGltYWdlPXtpbWFnZX1cbiAgICAgICAgICB0aXRsZT17ZW1iZWREYXRhLnRpdGxlID8/ICcnfVxuICAgICAgICAgIHVybD17ZW1iZWREYXRhLnVybH1cbiAgICAgICAgICBjYXB0aW9uPXtlbWJlZERhdGEuY2FwdGlvbiA/PyAnJ31cbiAgICAgICAgICBidXR0b25UZXh0PXt0KCdsaWNlbnNlLm90aGVyLml0ZW1JbWFnZS5hcmlhTGFiZWwnKX1cbiAgICAgICAgLz5cbiAgICAgIDwvRmlndXJlPlxuICAgICk7XG4gIH1cblxuICBjb25zdCBmdWxsQ29sdW1uQ2xhc3MgPSBpc0NvbmNlcHQgPyAnYy1maWd1cmUtLWZ1bGwtY29sdW1uJyA6ICcnO1xuICBjb25zdCBjbGFzc2VzID0gYGMtZmlndXJlICR7ZnVsbENvbHVtbkNsYXNzfSBjLWZpZ3VyZS0tcmVzaXplYDtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmVcbiAgICAgIHJlZj17ZmlnUmVmfVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc2VzfVxuICAgICAgLy9AdHMtaWdub3JlXG4gICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3Qvbm8tdW5rbm93bi1wcm9wZXJ0eVxuICAgICAgcmVzaXplaWZyYW1lPVwidHJ1ZVwiXG4gICAgICBkYW5nZXJvdXNseVNldElubmVySFRNTD17eyBfX2h0bWw6IGRhdGEub2VtYmVkLmh0bWwgPz8gJycgfX1cbiAgICAvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRXh0ZXJuYWxFbWJlZDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var ExternalEmbed = function ExternalEmbed(_ref) {
+  var _data$oembed$html;
+  var embed = _ref.embed,
+    isConcept = _ref.isConcept;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var figRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _figRef$current;
+    var iframe = (_figRef$current = figRef.current) === null || _figRef$current === void 0 ? void 0 : _figRef$current.querySelector("iframe");
+    if (iframe) {
+      var _ref2 = [parseInt(iframe.width), parseInt(iframe.height)],
+        width = _ref2[0],
+        height = _ref2[1];
+      iframe.style.aspectRatio = "".concat(width ? width : 16, "/").concat(height ? height : 9);
+    }
+  }, []);
+  if (embed.status === 'error') {
+    return (0, _jsxRuntime.jsxs)("figure", {
+      className: isConcept ? '' : 'c-figure',
+      children: [(0, _jsxRuntime.jsx)("img", {
+        alt: t('external.error'),
+        src: _ImageEmbed.errorSvgSrc
+      }), (0, _jsxRuntime.jsx)("figcaption", {
+        children: t('external.error')
+      })]
+    });
+  }
+  var embedData = embed.embedData,
+    data = embed.data;
+  if (embedData.type === 'fullscreen') {
+    var _data$iframeImage$ima, _data$iframeImage, _data$iframeImage$alt, _data$iframeImage2, _data$iframeImage2$al, _embedData$title, _embedData$caption;
+    var image = {
+      src: (_data$iframeImage$ima = (_data$iframeImage = data.iframeImage) === null || _data$iframeImage === void 0 ? void 0 : _data$iframeImage.imageUrl) !== null && _data$iframeImage$ima !== void 0 ? _data$iframeImage$ima : '',
+      alt: (_data$iframeImage$alt = (_data$iframeImage2 = data.iframeImage) === null || _data$iframeImage2 === void 0 ? void 0 : (_data$iframeImage2$al = _data$iframeImage2.alttext) === null || _data$iframeImage2$al === void 0 ? void 0 : _data$iframeImage2$al.alttext) !== null && _data$iframeImage$alt !== void 0 ? _data$iframeImage$alt : ''
+    };
+    return (0, _jsxRuntime.jsx)(_Figure.Figure, {
+      type: "full",
+      children: (0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
+        image: image,
+        title: (_embedData$title = embedData.title) !== null && _embedData$title !== void 0 ? _embedData$title : '',
+        url: embedData.url,
+        caption: (_embedData$caption = embedData.caption) !== null && _embedData$caption !== void 0 ? _embedData$caption : '',
+        buttonText: t('license.other.itemImage.ariaLabel')
+      })
+    });
+  }
+  var fullColumnClass = isConcept ? 'c-figure--full-column' : '';
+  var classes = "c-figure ".concat(fullColumnClass, " c-figure--resize");
+  return (0, _jsxRuntime.jsx)(StyledFigure, {
+    ref: figRef,
+    className: classes
+    //@ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+    resizeiframe: "true",
+    dangerouslySetInnerHTML: {
+      __html: (_data$oembed$html = data.oembed.html) !== null && _data$oembed$html !== void 0 ? _data$oembed$html : ''
+    }
+  });
+};
+var _default = ExternalEmbed;
+exports["default"] = _default;

package/lib/Embed/FootnoteEmbed.d.ts

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

package/lib/Embed/FootnoteEmbed.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _reactI18next = require("react-i18next");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+var FootnoteEmbed = function FootnoteEmbed(_ref) {
+  var embed = _ref.embed;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  if (embed.status === 'error') {
+    return (0, _jsxRuntime.jsx)("div", {
+      children: t('error')
+    });
+  }
+  return (0, _jsxRuntime.jsx)("span", {
+    id: "ref".concat(embed.data.entryNum),
+    className: "c-footnotes__ref",
+    children: (0, _jsxRuntime.jsx)("sup", {
+      children: (0, _jsxRuntime.jsx)("a", {
+        href: "#note".concat(embed.data.entryNum),
+        target: "_self",
+        children: "[".concat(embed.data.entryNum, "]")
+      })
+    })
+  });
+};
+var _default = FootnoteEmbed;
+exports["default"] = _default;

package/lib/Embed/H5pEmbed.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ */
+import { H5pMetaData } from '@ndla/types-embed';
+interface Props {
+    embed: H5pMetaData;
+    isConcept?: boolean;
+}
+declare const H5pEmbed: ({ embed, isConcept }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default H5pEmbed;

package/lib/Embed/H5pEmbed.js

@@ -0,0 +1,86 @@
+"use strict";
+
+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 _ImageEmbed = require("./ImageEmbed");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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)."; }
+var StyledFigure = /*#__PURE__*/(0, _base["default"])("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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkg1cEVtYmVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQmtDIiwiZmlsZSI6Ikg1cEVtYmVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgSDVwTWV0YURhdGEgfSBmcm9tICdAbmRsYS90eXBlcy1lbWJlZCc7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBlcnJvclN2Z1NyYyB9IGZyb20gJy4vSW1hZ2VFbWJlZCc7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGVtYmVkOiBINXBNZXRhRGF0YTtcbiAgaXNDb25jZXB0PzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkRmlndXJlID0gc3R5bGVkLmZpZ3VyZWBcbiAgaWZyYW1lIHtcbiAgICBoZWlnaHQ6IGF1dG87XG4gIH1cbmA7XG5cbmNvbnN0IEg1cEVtYmVkID0gKHsgZW1iZWQsIGlzQ29uY2VwdCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaWZyYW1lUmVmID0gdXNlUmVmPEhUTUxJRnJhbWVFbGVtZW50PihudWxsKTtcbiAgY29uc3QgZmlnUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50PihudWxsKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IGlmcmFtZSA9XG4gICAgICBlbWJlZC5zdGF0dXMgPT09ICdzdWNjZXNzJyAmJiBlbWJlZC5kYXRhLm9lbWJlZCA/IGZpZ1JlZi5jdXJyZW50Py5xdWVyeVNlbGVjdG9yKCdpZnJhbWUnKSA6IGlmcmFtZVJlZi5jdXJyZW50O1xuICAgIGlmIChpZnJhbWUpIHtcbiAgICAgIGNvbnN0IFt3aWR0aCwgaGVpZ2h0XSA9IFtwYXJzZUludChpZnJhbWUud2lkdGgpLCBwYXJzZUludChpZnJhbWUuaGVpZ2h0KV07XG4gICAgICBpZnJhbWUuc3R5bGUuYXNwZWN0UmF0aW8gPSBgJHt3aWR0aCA/IHdpZHRoIDogMTZ9LyR7aGVpZ2h0ID8gaGVpZ2h0IDogOX1gO1xuICAgIH1cbiAgfSwgW2VtYmVkXSk7XG5cbiAgaWYgKGVtYmVkLnN0YXR1cyA9PT0gJ2Vycm9yJykge1xuICAgIHJldHVybiAoXG4gICAgICA8ZmlndXJlIGNsYXNzTmFtZT17aXNDb25jZXB0ID8gJycgOiAnYy1maWd1cmUnfT5cbiAgICAgICAgPGltZyBhbHQ9e3QoJ2g1cC5lcnJvcicpfSBzcmM9e2Vycm9yU3ZnU3JjfSAvPlxuICAgICAgICA8ZmlnY2FwdGlvbj57dCgnaDVwLmVycm9yJyl9PC9maWdjYXB0aW9uPlxuICAgICAgPC9maWd1cmU+XG4gICAgKTtcbiAgfVxuICBjb25zdCBmdWxsQ29sdW1uQ2xhc3MgPSBpc0NvbmNlcHQgPyAnYy1maWd1cmUtLWZ1bGwtY29sdW1uJyA6ICcnO1xuICBjb25zdCBjbGFzc2VzID0gYGMtZmlndXJlICR7ZnVsbENvbHVtbkNsYXNzfSBjLWZpZ3VyZS0tcmVzaXplYDtcblxuICBpZiAoZW1iZWQuZGF0YS5vZW1iZWQpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZEZpZ3VyZVxuICAgICAgICBjbGFzc05hbWU9e2NsYXNzZXN9XG4gICAgICAgIHJlZj17ZmlnUmVmfVxuICAgICAgICAvL0B0cy1pZ25vcmVcbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0L25vLXVua25vd24tcHJvcGVydHlcbiAgICAgICAgcmVzaXplaWZyYW1lPVwidHJ1ZVwiXG4gICAgICAgIGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPXt7IF9faHRtbDogZW1iZWQuZGF0YS5vZW1iZWQuaHRtbCA/PyAnJyB9fVxuICAgICAgLz5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICAvL0B0cy1pZ25vcmVcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3Qvbm8tdW5rbm93bi1wcm9wZXJ0eVxuICAgIDxTdHlsZWRGaWd1cmUgY2xhc3NOYW1lPXtjbGFzc2VzfSByZXNpemVpZnJhbWU9XCJ0cnVlXCI+XG4gICAgICA8aWZyYW1lIHRpdGxlPXtlbWJlZC5lbWJlZERhdGEudXJsfSByZWY9e2lmcmFtZVJlZn0gYXJpYS1sYWJlbD17ZW1iZWQuZW1iZWREYXRhLnVybH0gc3JjPXtlbWJlZC5lbWJlZERhdGEudXJsfSAvPlxuICAgIDwvU3R5bGVkRmlndXJlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSDVwRW1iZWQ7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var H5pEmbed = function H5pEmbed(_ref) {
+  var embed = _ref.embed,
+    isConcept = _ref.isConcept;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var iframeRef = (0, _react.useRef)(null);
+  var figRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _figRef$current;
+    var iframe = embed.status === 'success' && embed.data.oembed ? (_figRef$current = figRef.current) === null || _figRef$current === void 0 ? void 0 : _figRef$current.querySelector('iframe') : iframeRef.current;
+    if (iframe) {
+      var _ref2 = [parseInt(iframe.width), parseInt(iframe.height)],
+        width = _ref2[0],
+        height = _ref2[1];
+      iframe.style.aspectRatio = "".concat(width ? width : 16, "/").concat(height ? height : 9);
+    }
+  }, [embed]);
+  if (embed.status === 'error') {
+    return (0, _jsxRuntime.jsxs)("figure", {
+      className: isConcept ? '' : 'c-figure',
+      children: [(0, _jsxRuntime.jsx)("img", {
+        alt: t('h5p.error'),
+        src: _ImageEmbed.errorSvgSrc
+      }), (0, _jsxRuntime.jsx)("figcaption", {
+        children: t('h5p.error')
+      })]
+    });
+  }
+  var fullColumnClass = isConcept ? 'c-figure--full-column' : '';
+  var classes = "c-figure ".concat(fullColumnClass, " c-figure--resize");
+  if (embed.data.oembed) {
+    var _embed$data$oembed$ht;
+    return (0, _jsxRuntime.jsx)(StyledFigure, {
+      className: classes,
+      ref: figRef
+      //@ts-ignore
+      // eslint-disable-next-line react/no-unknown-property
+      ,
+      resizeiframe: "true",
+      dangerouslySetInnerHTML: {
+        __html: (_embed$data$oembed$ht = embed.data.oembed.html) !== null && _embed$data$oembed$ht !== void 0 ? _embed$data$oembed$ht : ''
+      }
+    });
+  }
+  return (
+    //@ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
+    (0, _jsxRuntime.jsx)(StyledFigure, {
+      className: classes,
+      resizeiframe: "true",
+      children: (0, _jsxRuntime.jsx)("iframe", {
+        title: embed.embedData.url,
+        ref: iframeRef,
+        "aria-label": embed.embedData.url,
+        src: embed.embedData.url
+      })
+    })
+  );
+};
+var _default = H5pEmbed;
+exports["default"] = _default;

package/lib/Embed/IframeEmbed.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ */
+import { IframeMetaData } from '@ndla/types-embed';
+interface Props {
+    embed: IframeMetaData;
+    isConcept?: boolean;
+}
+declare const ExternalEmbed: ({ embed, isConcept }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ExternalEmbed;

package/lib/Embed/IframeEmbed.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
+var _react = require("react");
+var _reactI18next = require("react-i18next");
+var _Figure = require("../Figure");
+var _ResourceBox = require("../ResourceBox");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/**
+ * 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.
+ *
+ */
+
+var ExternalEmbed = function ExternalEmbed(_ref) {
+  var embed = _ref.embed,
+    isConcept = _ref.isConcept;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var iframeRef = (0, _react.useRef)(null);
+  var embedData = embed.embedData;
+  (0, _react.useEffect)(function () {
+    var iframe = iframeRef.current;
+    if (iframe) {
+      var _ref2 = [parseInt(iframe.width), parseInt(iframe.height)],
+        _width = _ref2[0],
+        _height = _ref2[1];
+      iframe.style.aspectRatio = "".concat(_width ? _width : 16, "/").concat(_height ? _height : 9);
+    }
+  }, []);
+  if (embedData.type === 'fullscreen') {
+    var _iframeImage$imageUrl, _iframeImage$alttext$, _iframeImage$alttext, _embedData$title, _embedData$caption;
+    var iframeImage = embed.status === 'success' ? embed.data.iframeImage : undefined;
+    var image = {
+      src: (_iframeImage$imageUrl = iframeImage === null || iframeImage === void 0 ? void 0 : iframeImage.imageUrl) !== null && _iframeImage$imageUrl !== void 0 ? _iframeImage$imageUrl : '',
+      alt: (_iframeImage$alttext$ = iframeImage === null || iframeImage === void 0 ? void 0 : (_iframeImage$alttext = iframeImage.alttext) === null || _iframeImage$alttext === void 0 ? void 0 : _iframeImage$alttext.alttext) !== null && _iframeImage$alttext$ !== void 0 ? _iframeImage$alttext$ : ''
+    };
+    return (0, _jsxRuntime.jsx)(_Figure.Figure, {
+      type: "full",
+      children: (0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
+        image: image,
+        title: (_embedData$title = embedData.title) !== null && _embedData$title !== void 0 ? _embedData$title : '',
+        url: embedData.url,
+        caption: (_embedData$caption = embedData.caption) !== null && _embedData$caption !== void 0 ? _embedData$caption : '',
+        buttonText: t('license.other.itemImage.ariaLabel')
+      })
+    });
+  }
+  var resize = !embedData.url.includes('trinket.io');
+  var fullColumnClass = isConcept ? 'c-figure--full-column' : '';
+  var resizeClass = resize ? 'c-figure--resize' : '';
+  var classes = "c-figure ".concat(fullColumnClass, " ").concat(resizeClass);
+  var width = embedData.width,
+    height = embedData.height,
+    title = embedData.title,
+    url = embedData.url;
+  var strippedWidth = (0, _isNumber["default"])(width) ? width : width === null || width === void 0 ? void 0 : width.replace(/\s*px/, '');
+  var strippedHeight = (0, _isNumber["default"])(height) ? height : height === null || height === void 0 ? void 0 : height.replace(/\s*px/, '');
+  var urlOrTitle = title || url;
+  return (
+    //@ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
+    (0, _jsxRuntime.jsx)("figure", {
+      className: classes,
+      resizeiframe: "".concat(resize),
+      children: (0, _jsxRuntime.jsx)("iframe", {
+        ref: iframeRef,
+        title: urlOrTitle,
+        "aria-label": urlOrTitle,
+        src: url,
+        width: strippedWidth,
+        height: strippedHeight
+        // eslint-disable-next-line react/no-unknown-property
+        ,
+        allowFullScreen: true,
+        scrolling: "no",
+        frameBorder: "0",
+        loading: "lazy"
+      })
+    })
+  );
+};
+var _default = ExternalEmbed;
+exports["default"] = _default;

package/lib/Embed/ImageEmbed.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ *
+ */
+import { ImageMetaData } from '@ndla/types-embed';
+import { Copyright } from '../types';
+interface Props {
+    embed: ImageMetaData;
+    articlePath?: string;
+    previewAlt?: boolean;
+}
+export interface Author {
+    name: string;
+    type: string;
+}
+export declare const getLicenseCredits: (copyright?: {
+    creators?: Author[];
+    rightsholders?: Author[];
+    processors?: Author[];
+}) => {
+    creators: Author[];
+    rightsholders: Author[];
+    processors: Author[];
+};
+export declare const errorSvgSrc = "data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E";
+declare const ImageEmbed: ({ embed, articlePath, previewAlt }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface ImageLicenseButtonsProps {
+    imageUrl: string;
+    title?: string;
+    articlePath?: string;
+    copyright?: Partial<Copyright>;
+}
+export declare const ImageLicenseButtons: ({ imageUrl, title, articlePath, copyright }: ImageLicenseButtonsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export default ImageEmbed;