@ndla/ui 8.2.5 → 9.0.2

package/lib/Notion/NotionImage.js

@@ -5,15 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NotionImage = void 0;
 
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _core = require("@ndla/core");
+
 var _reactI18next = require("react-i18next");
 
-var _ = require("..");
+var _Image = _interopRequireDefault(require("../Image"));
+
+var _Figure = require("../Figure");
 
 var _FigureNotion = _interopRequireDefault(require("./FigureNotion"));
 
-var _core = require("@emotion/core");
+var _core2 = require("@emotion/core");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -23,20 +29,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree. *
  */
+var StyledImageWrapper = (0, _styledBase["default"])("div", {
+  target: "e1beccco0",
+  label: "StyledImageWrapper"
+})("overflow:hidden;width:260px;padding-top:", _core.spacing.small, ";", _core.mq.range({
+  until: _core.breakpoints.tabletWide
+}), "{margin:0 auto;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQnFDIiwiZmlsZSI6Ik5vdGlvbkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBhbmltYXRpb25zLCBicmVha3BvaW50cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgSW1hZ2UgZnJvbSAnLi4vSW1hZ2UnO1xuaW1wb3J0IHsgRmlndXJlT3BlbkRpYWxvZ0J1dHRvbiB9IGZyb20gJy4uL0ZpZ3VyZSc7XG5pbXBvcnQgeyBDb3B5cmlnaHQgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgRmlndXJlTm90aW9uIGZyb20gJy4vRmlndXJlTm90aW9uJztcblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgd2lkdGg6IDI2MHB4O1xuICBwYWRkaW5nLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgbWFyZ2luOiAwIGF1dG87XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC1oZWlnaHQ6IDE2MnB4O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHthbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0fTtcbiAgJjpob3ZlciB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICAgIG9wYWNpdHk6IDEuMTtcbiAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAwLjVzO1xuICB9XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIG1pbi13aWR0aDogMjYwcHg7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHR5cGU/OiAnaW1hZ2UnIHwgJ3ZpZGVvJyB8ICdoNXAnIHwgJ2lmcmFtZScgfCAnZXh0ZXJuYWwnO1xuICBpZDogc3RyaW5nO1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG4gIGltYWdlQ29weXJpZ2h0PzogUGFydGlhbDxDb3B5cmlnaHQ+O1xufVxuZXhwb3J0IGNvbnN0IE5vdGlvbkltYWdlID0gKHsgaWQsIHNyYywgYWx0LCBpbWFnZUNvcHlyaWdodCwgdHlwZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaW1hZ2VJZCA9IGBpbWFnZS0ke2lkfWA7XG4gIGNvbnN0IGltYWdlRmlndXJlSWQgPSBgaW1hZ2UtZmlndXJlLSR7aWR9YDtcblxuICByZXR1cm4gKFxuICAgIDxGaWd1cmVOb3Rpb25cbiAgICAgIGhpZGVGaWdDYXB0aW9uXG4gICAgICBmaWd1cmVJZD17aW1hZ2VGaWd1cmVJZH1cbiAgICAgIGlkPXtpbWFnZUlkfVxuICAgICAgdGl0bGU9e2FsdH1cbiAgICAgIGNvcHlyaWdodD17aW1hZ2VDb3B5cmlnaHR9XG4gICAgICBsaWNlbnNlU3RyaW5nPXtpbWFnZUNvcHlyaWdodD8ubGljZW5zZT8ubGljZW5zZSA/PyAnJ31cbiAgICAgIHR5cGU9eydpbWFnZSd9PlxuICAgICAgeyh7IHR5cGVDbGFzcyB9KSA9PiAoXG4gICAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgICAgPFN0eWxlZEltYWdlXG4gICAgICAgICAgICBhbHQ9e2FsdH1cbiAgICAgICAgICAgIHNyYz17c3JjfVxuICAgICAgICAgICAgZXhwYW5kQnV0dG9uPXtcbiAgICAgICAgICAgICAgPEZpZ3VyZU9wZW5EaWFsb2dCdXR0b25cbiAgICAgICAgICAgICAgICB0eXBlPXt0eXBlfVxuICAgICAgICAgICAgICAgIG1lc3NhZ2VzPXt7XG4gICAgICAgICAgICAgICAgICB6b29tSW1hZ2VCdXR0b25MYWJlbDogdCgnbGljZW5zZS5pbWFnZXMuaXRlbUltYWdlLnpvb21JbWFnZUJ1dHRvbkxhYmVsJyksXG4gICAgICAgICAgICAgICAgICB6b29tT3V0SW1hZ2VCdXR0b25MYWJlbDogdCgnbGljZW5zZS5pbWFnZS5pdGVtSW1hZ2Uuem9vbU91dEltYWdlQnV0dG9uTGFiZWwnKSxcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgKX1cbiAgICA8L0ZpZ3VyZU5vdGlvbj5cbiAgKTtcbn07XG4iXX0= */"));
+var StyledImage = ( /*#__PURE__*/0, _styledBase["default"])(_Image["default"], {
+  target: "e1beccco1",
+  label: "StyledImage"
+})("object-fit:cover;max-height:162px;transition:transform ", _core.animations.durations.fast, ";&:hover{transform:scale(1.1);opacity:1.1;transition-duration:0.5s;}", _core.mq.range({
+  until: _core.breakpoints.tabletWide
+}), "{min-width:260px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmlDIiwiZmlsZSI6Ik5vdGlvbkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBhbmltYXRpb25zLCBicmVha3BvaW50cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgSW1hZ2UgZnJvbSAnLi4vSW1hZ2UnO1xuaW1wb3J0IHsgRmlndXJlT3BlbkRpYWxvZ0J1dHRvbiB9IGZyb20gJy4uL0ZpZ3VyZSc7XG5pbXBvcnQgeyBDb3B5cmlnaHQgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgRmlndXJlTm90aW9uIGZyb20gJy4vRmlndXJlTm90aW9uJztcblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgd2lkdGg6IDI2MHB4O1xuICBwYWRkaW5nLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgbWFyZ2luOiAwIGF1dG87XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC1oZWlnaHQ6IDE2MnB4O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHthbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0fTtcbiAgJjpob3ZlciB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICAgIG9wYWNpdHk6IDEuMTtcbiAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAwLjVzO1xuICB9XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIG1pbi13aWR0aDogMjYwcHg7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHR5cGU/OiAnaW1hZ2UnIHwgJ3ZpZGVvJyB8ICdoNXAnIHwgJ2lmcmFtZScgfCAnZXh0ZXJuYWwnO1xuICBpZDogc3RyaW5nO1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG4gIGltYWdlQ29weXJpZ2h0PzogUGFydGlhbDxDb3B5cmlnaHQ+O1xufVxuZXhwb3J0IGNvbnN0IE5vdGlvbkltYWdlID0gKHsgaWQsIHNyYywgYWx0LCBpbWFnZUNvcHlyaWdodCwgdHlwZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaW1hZ2VJZCA9IGBpbWFnZS0ke2lkfWA7XG4gIGNvbnN0IGltYWdlRmlndXJlSWQgPSBgaW1hZ2UtZmlndXJlLSR7aWR9YDtcblxuICByZXR1cm4gKFxuICAgIDxGaWd1cmVOb3Rpb25cbiAgICAgIGhpZGVGaWdDYXB0aW9uXG4gICAgICBmaWd1cmVJZD17aW1hZ2VGaWd1cmVJZH1cbiAgICAgIGlkPXtpbWFnZUlkfVxuICAgICAgdGl0bGU9e2FsdH1cbiAgICAgIGNvcHlyaWdodD17aW1hZ2VDb3B5cmlnaHR9XG4gICAgICBsaWNlbnNlU3RyaW5nPXtpbWFnZUNvcHlyaWdodD8ubGljZW5zZT8ubGljZW5zZSA/PyAnJ31cbiAgICAgIHR5cGU9eydpbWFnZSd9PlxuICAgICAgeyh7IHR5cGVDbGFzcyB9KSA9PiAoXG4gICAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgICAgPFN0eWxlZEltYWdlXG4gICAgICAgICAgICBhbHQ9e2FsdH1cbiAgICAgICAgICAgIHNyYz17c3JjfVxuICAgICAgICAgICAgZXhwYW5kQnV0dG9uPXtcbiAgICAgICAgICAgICAgPEZpZ3VyZU9wZW5EaWFsb2dCdXR0b25cbiAgICAgICAgICAgICAgICB0eXBlPXt0eXBlfVxuICAgICAgICAgICAgICAgIG1lc3NhZ2VzPXt7XG4gICAgICAgICAgICAgICAgICB6b29tSW1hZ2VCdXR0b25MYWJlbDogdCgnbGljZW5zZS5pbWFnZXMuaXRlbUltYWdlLnpvb21JbWFnZUJ1dHRvbkxhYmVsJyksXG4gICAgICAgICAgICAgICAgICB6b29tT3V0SW1hZ2VCdXR0b25MYWJlbDogdCgnbGljZW5zZS5pbWFnZS5pdGVtSW1hZ2Uuem9vbU91dEltYWdlQnV0dG9uTGFiZWwnKSxcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgKX1cbiAgICA8L0ZpZ3VyZU5vdGlvbj5cbiAgKTtcbn07XG4iXX0= */"));
+
 var NotionImage = function NotionImage(_ref) {
   var _imageCopyright$licen, _imageCopyright$licen2;
 
   var id = _ref.id,
       src = _ref.src,
       alt = _ref.alt,
-      imageCopyright = _ref.imageCopyright;
+      imageCopyright = _ref.imageCopyright,
+      type = _ref.type;
 
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
 
   var imageId = "image-".concat(id);
   var imageFigureId = "image-figure-".concat(id);
-  return (0, _core.jsx)(_FigureNotion["default"], {
+  return (0, _core2.jsx)(_FigureNotion["default"], {
     hideFigCaption: true,
     figureId: imageFigureId,
     id: imageId,
@@ -46,17 +66,17 @@ var NotionImage = function NotionImage(_ref) {
     type: 'image'
   }, function (_ref2) {
     var typeClass = _ref2.typeClass;
-    return (0, _core.jsx)(_.Image, {
+    return (0, _core2.jsx)(StyledImageWrapper, null, (0, _core2.jsx)(StyledImage, {
       alt: alt,
       src: src,
-      expandButton: (0, _core.jsx)(_.FigureExpandButton, {
-        typeClass: typeClass,
+      expandButton: (0, _core2.jsx)(_Figure.FigureOpenDialogButton, {
+        type: type,
         messages: {
           zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
           zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel')
         }
       })
-    });
+    }));
   });
 };
 

package/lib/Notion/NotionVisualElement.d.ts

@@ -1,11 +1,8 @@
-/**
- * Copyright (c) 2022-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 { ReactNode } from 'react';
 import { Copyright } from '../types';
 export declare type NotionVisualElementType = {
+    element?: ReactNode;
+    type?: 'video' | 'image' | 'h5p';
     resource?: string;
     title?: string;
     url?: string;
@@ -17,6 +14,8 @@ export declare type NotionVisualElementType = {
 };
 interface Props {
     visualElement: NotionVisualElementType;
+    id: string;
+    figureId: string;
 }
-declare const NotionVisualElement: ({ visualElement }: Props) => JSX.Element;
+declare const NotionVisualElement: ({ visualElement, id, figureId }: Props) => JSX.Element;
 export default NotionVisualElement;

package/lib/Notion/NotionVisualElement.js

@@ -5,34 +5,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@emotion/core");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _FigureNotion = _interopRequireDefault(require("./FigureNotion"));
 
-var _core = require("@emotion/core");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/**
- * Copyright (c) 2022-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 supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external'];
+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 _ref = process.env.NODE_ENV === "production" ? {
+  name: "fifnyn-StyledIframe",
+  styles: "min-height:400px;;label:StyledIframe;"
+} : {
+  name: "fifnyn-StyledIframe",
+  styles: "min-height:400px;;label:StyledIframe;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvblZpc3VhbEVsZW1lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVXIiwiZmlsZSI6Ik5vdGlvblZpc3VhbEVsZW1lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLiAqXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IENvcHlyaWdodCB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBGaWd1cmVOb3Rpb24gZnJvbSAnLi9GaWd1cmVOb3Rpb24nO1xuXG5jb25zdCBTdHlsZWRJZnJhbWUgPSBzdHlsZWQuaWZyYW1lPHsgdHlwZTogc3RyaW5nIH0+YFxuICAkeyhwcm9wcykgPT5cbiAgICBwcm9wcy50eXBlID09PSAndmlkZW8nXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBtaW4taGVpZ2h0OiA0MDBweDtcbiAgICAgICAgYFxuICAgICAgOiAnJ31cbmA7XG5cbmV4cG9ydCB0eXBlIE5vdGlvblZpc3VhbEVsZW1lbnRUeXBlID0ge1xuICBlbGVtZW50PzogUmVhY3ROb2RlO1xuICB0eXBlPzogJ3ZpZGVvJyB8ICdpbWFnZScgfCAnaDVwJztcbiAgcmVzb3VyY2U/OiBzdHJpbmc7XG4gIHRpdGxlPzogc3RyaW5nO1xuICB1cmw/OiBzdHJpbmc7XG4gIGNvcHlyaWdodD86IFBhcnRpYWw8Q29weXJpZ2h0PjtcbiAgaW1hZ2U/OiB7XG4gICAgc3JjOiBzdHJpbmc7XG4gICAgYWx0Pzogc3RyaW5nO1xuICB9O1xufTtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdmlzdWFsRWxlbWVudDogTm90aW9uVmlzdWFsRWxlbWVudFR5cGU7XG4gIGlkOiBzdHJpbmc7XG4gIGZpZ3VyZUlkOiBzdHJpbmc7XG59XG5jb25zdCBzdXBwb3J0ZWRFbWJlZFR5cGVzID0gWydicmlnaHRjb3ZlJywgJ2g1cCcsICdpZnJhbWUnLCAnZXh0ZXJuYWwnLCAnaW1hZ2UnXTtcblxuY29uc3QgZ2V0VHlwZSA9IChyZXNvdXJjZTogc3RyaW5nKSA9PiB7XG4gIGlmIChyZXNvdXJjZSA9PT0gJ2JyaWdodGNvdmUnKSB7XG4gICAgcmV0dXJuICd2aWRlbyc7XG4gIH1cbiAgaWYgKHJlc291cmNlID09PSAnaW1hZ2UnKSB7XG4gICAgcmV0dXJuICdpbWFnZSc7XG4gIH1cbiAgcmV0dXJuICdoNXAnO1xufTtcblxuY29uc3QgTm90aW9uVmlzdWFsRWxlbWVudCA9ICh7IHZpc3VhbEVsZW1lbnQsIGlkLCBmaWd1cmVJZCB9OiBQcm9wcykgPT4ge1xuICBpZiAoIXZpc3VhbEVsZW1lbnQucmVzb3VyY2UgfHwgIXN1cHBvcnRlZEVtYmVkVHlwZXMuaW5jbHVkZXModmlzdWFsRWxlbWVudC5yZXNvdXJjZSkpIHtcbiAgICByZXR1cm4gPHA+RW1iZWQgdHlwZSBpcyBub3Qgc3VwcG9ydGVkITwvcD47XG4gIH1cblxuICBjb25zdCB0eXBlID0gZ2V0VHlwZSh2aXN1YWxFbGVtZW50LnJlc291cmNlKTtcblxuICByZXR1cm4gKFxuICAgIDxGaWd1cmVOb3Rpb25cbiAgICAgIHJlc2l6ZUlmcmFtZVxuICAgICAgaWQ9e2lkfVxuICAgICAgZmlndXJlSWQ9e2ZpZ3VyZUlkfVxuICAgICAgdGl0bGU9e3Zpc3VhbEVsZW1lbnQudGl0bGUgPz8gJyd9XG4gICAgICBjb3B5cmlnaHQ9e3Zpc3VhbEVsZW1lbnQuY29weXJpZ2h0fVxuICAgICAgbGljZW5zZVN0cmluZz17dmlzdWFsRWxlbWVudC5jb3B5cmlnaHQ/LmxpY2Vuc2U/LmxpY2Vuc2UgPz8gJyd9XG4gICAgICB0eXBlPXt0eXBlfT5cbiAgICAgIHt2aXN1YWxFbGVtZW50LmltYWdlPy5zcmMgPyAoXG4gICAgICAgIDxpbWcgc3JjPXt2aXN1YWxFbGVtZW50LmltYWdlPy5zcmN9IGFsdD17dmlzdWFsRWxlbWVudC5pbWFnZS5hbHR9IC8+XG4gICAgICApIDogKFxuICAgICAgICA8U3R5bGVkSWZyYW1lIHR5cGU9e3R5cGV9IHNyYz17dmlzdWFsRWxlbWVudC51cmx9IHRpdGxlPXt2aXN1YWxFbGVtZW50LnRpdGxlfSAvPlxuICAgICAgKX1cbiAgICA8L0ZpZ3VyZU5vdGlvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE5vdGlvblZpc3VhbEVsZW1lbnQ7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var StyledIframe = (0, _styledBase["default"])("iframe", {
+  target: "e1hql2mu0",
+  label: "StyledIframe"
+})(function (props) {
+  return props.type === 'video' ? _ref : '';
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvblZpc3VhbEVsZW1lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlvRCIsImZpbGUiOiJOb3Rpb25WaXN1YWxFbGVtZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBDb3B5cmlnaHQgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgRmlndXJlTm90aW9uIGZyb20gJy4vRmlndXJlTm90aW9uJztcblxuY29uc3QgU3R5bGVkSWZyYW1lID0gc3R5bGVkLmlmcmFtZTx7IHR5cGU6IHN0cmluZyB9PmBcbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMudHlwZSA9PT0gJ3ZpZGVvJ1xuICAgICAgPyBjc3NgXG4gICAgICAgICAgbWluLWhlaWdodDogNDAwcHg7XG4gICAgICAgIGBcbiAgICAgIDogJyd9XG5gO1xuXG5leHBvcnQgdHlwZSBOb3Rpb25WaXN1YWxFbGVtZW50VHlwZSA9IHtcbiAgZWxlbWVudD86IFJlYWN0Tm9kZTtcbiAgdHlwZT86ICd2aWRlbycgfCAnaW1hZ2UnIHwgJ2g1cCc7XG4gIHJlc291cmNlPzogc3RyaW5nO1xuICB0aXRsZT86IHN0cmluZztcbiAgdXJsPzogc3RyaW5nO1xuICBjb3B5cmlnaHQ/OiBQYXJ0aWFsPENvcHlyaWdodD47XG4gIGltYWdlPzoge1xuICAgIHNyYzogc3RyaW5nO1xuICAgIGFsdD86IHN0cmluZztcbiAgfTtcbn07XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHZpc3VhbEVsZW1lbnQ6IE5vdGlvblZpc3VhbEVsZW1lbnRUeXBlO1xuICBpZDogc3RyaW5nO1xuICBmaWd1cmVJZDogc3RyaW5nO1xufVxuY29uc3Qgc3VwcG9ydGVkRW1iZWRUeXBlcyA9IFsnYnJpZ2h0Y292ZScsICdoNXAnLCAnaWZyYW1lJywgJ2V4dGVybmFsJywgJ2ltYWdlJ107XG5cbmNvbnN0IGdldFR5cGUgPSAocmVzb3VyY2U6IHN0cmluZykgPT4ge1xuICBpZiAocmVzb3VyY2UgPT09ICdicmlnaHRjb3ZlJykge1xuICAgIHJldHVybiAndmlkZW8nO1xuICB9XG4gIGlmIChyZXNvdXJjZSA9PT0gJ2ltYWdlJykge1xuICAgIHJldHVybiAnaW1hZ2UnO1xuICB9XG4gIHJldHVybiAnaDVwJztcbn07XG5cbmNvbnN0IE5vdGlvblZpc3VhbEVsZW1lbnQgPSAoeyB2aXN1YWxFbGVtZW50LCBpZCwgZmlndXJlSWQgfTogUHJvcHMpID0+IHtcbiAgaWYgKCF2aXN1YWxFbGVtZW50LnJlc291cmNlIHx8ICFzdXBwb3J0ZWRFbWJlZFR5cGVzLmluY2x1ZGVzKHZpc3VhbEVsZW1lbnQucmVzb3VyY2UpKSB7XG4gICAgcmV0dXJuIDxwPkVtYmVkIHR5cGUgaXMgbm90IHN1cHBvcnRlZCE8L3A+O1xuICB9XG5cbiAgY29uc3QgdHlwZSA9IGdldFR5cGUodmlzdWFsRWxlbWVudC5yZXNvdXJjZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RmlndXJlTm90aW9uXG4gICAgICByZXNpemVJZnJhbWVcbiAgICAgIGlkPXtpZH1cbiAgICAgIGZpZ3VyZUlkPXtmaWd1cmVJZH1cbiAgICAgIHRpdGxlPXt2aXN1YWxFbGVtZW50LnRpdGxlID8/ICcnfVxuICAgICAgY29weXJpZ2h0PXt2aXN1YWxFbGVtZW50LmNvcHlyaWdodH1cbiAgICAgIGxpY2Vuc2VTdHJpbmc9e3Zpc3VhbEVsZW1lbnQuY29weXJpZ2h0Py5saWNlbnNlPy5saWNlbnNlID8/ICcnfVxuICAgICAgdHlwZT17dHlwZX0+XG4gICAgICB7dmlzdWFsRWxlbWVudC5pbWFnZT8uc3JjID8gKFxuICAgICAgICA8aW1nIHNyYz17dmlzdWFsRWxlbWVudC5pbWFnZT8uc3JjfSBhbHQ9e3Zpc3VhbEVsZW1lbnQuaW1hZ2UuYWx0fSAvPlxuICAgICAgKSA6IChcbiAgICAgICAgPFN0eWxlZElmcmFtZSB0eXBlPXt0eXBlfSBzcmM9e3Zpc3VhbEVsZW1lbnQudXJsfSB0aXRsZT17dmlzdWFsRWxlbWVudC50aXRsZX0gLz5cbiAgICAgICl9XG4gICAgPC9GaWd1cmVOb3Rpb24+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBOb3Rpb25WaXN1YWxFbGVtZW50O1xuIl19 */");
+var supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external', 'image'];
+
+var getType = function getType(resource) {
+  if (resource === 'brightcove') {
+    return 'video';
+  }
+
+  if (resource === 'image') {
+    return 'image';
+  }
+
+  return 'h5p';
+};
 
-var NotionVisualElement = function NotionVisualElement(_ref) {
-  var _visualElement$title, _visualElement$copyri, _visualElement$copyri2, _visualElement$copyri3;
+var NotionVisualElement = function NotionVisualElement(_ref2) {
+  var _visualElement$title, _visualElement$copyri, _visualElement$copyri2, _visualElement$copyri3, _visualElement$image, _visualElement$image2;
 
-  var visualElement = _ref.visualElement;
-  var id = '1';
-  var figureId = 'figure-1';
+  var visualElement = _ref2.visualElement,
+      id = _ref2.id,
+      figureId = _ref2.figureId;
 
   if (!visualElement.resource || !supportedEmbedTypes.includes(visualElement.resource)) {
     return (0, _core.jsx)("p", null, "Embed type is not supported!");
   }
 
-  var type = visualElement.resource === 'brightcove' ? 'video' : 'h5p';
+  var type = getType(visualElement.resource);
   return (0, _core.jsx)(_FigureNotion["default"], {
     resizeIframe: true,
     id: id,
@@ -41,9 +67,13 @@ var NotionVisualElement = function NotionVisualElement(_ref) {
     copyright: visualElement.copyright,
     licenseString: (_visualElement$copyri = (_visualElement$copyri2 = visualElement.copyright) === null || _visualElement$copyri2 === void 0 ? void 0 : (_visualElement$copyri3 = _visualElement$copyri2.license) === null || _visualElement$copyri3 === void 0 ? void 0 : _visualElement$copyri3.license) !== null && _visualElement$copyri !== void 0 ? _visualElement$copyri : '',
     type: type
-  }, (0, _core.jsx)("iframe", {
-    title: visualElement.title,
-    src: visualElement.url
+  }, ((_visualElement$image = visualElement.image) === null || _visualElement$image === void 0 ? void 0 : _visualElement$image.src) ? (0, _core.jsx)("img", {
+    src: (_visualElement$image2 = visualElement.image) === null || _visualElement$image2 === void 0 ? void 0 : _visualElement$image2.src,
+    alt: visualElement.image.alt
+  }) : (0, _core.jsx)(StyledIframe, {
+    type: type,
+    src: visualElement.url,
+    title: visualElement.title
   }));
 };