@ndla/ui 10.1.0 → 11.0.1

package/lib/Notion/NotionImage.js

@@ -17,8 +17,6 @@ var _Image = _interopRequireDefault(require("../Image"));
 
 var _Figure = require("../Figure");
 
-var _FigureNotion = _interopRequireDefault(require("./FigureNotion"));
-
 var _core2 = require("@emotion/core");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -34,50 +32,39 @@ var StyledImageWrapper = (0, _styledBase["default"])("div", {
   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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQnFDIiwiZmlsZSI6Ik5vdGlvbkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBhbmltYXRpb25zLCBicmVha3BvaW50cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgSW1hZ2UgZnJvbSAnLi4vSW1hZ2UnO1xuaW1wb3J0IHsgRmlndXJlT3BlbkRpYWxvZ0J1dHRvbiB9IGZyb20gJy4uL0ZpZ3VyZSc7XG5pbXBvcnQgeyBDb3B5cmlnaHQgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgRmlndXJlTm90aW9uIGZyb20gJy4vRmlndXJlTm90aW9uJztcblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgd2lkdGg6IDI2MHB4O1xuICBwYWRkaW5nLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgbWFyZ2luOiAwIGF1dG87XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC1oZWlnaHQ6IDE2MnB4O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHthbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0fTtcbiAgJjpob3ZlciB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICAgIG9wYWNpdHk6IDEuMTtcbiAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAwLjVzO1xuICB9XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIG1pbi13aWR0aDogMjYwcHg7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHR5cGU6ICdpbWFnZScgfCAndmlkZW8nIHwgJ2g1cCcgfCAnaWZyYW1lJyB8ICdleHRlcm5hbCcgfCB1bmRlZmluZWQ7XG4gIGlkOiBzdHJpbmc7XG4gIHNyYzogc3RyaW5nO1xuICBhbHQ6IHN0cmluZztcbiAgaW1hZ2VDb3B5cmlnaHQ/OiBQYXJ0aWFsPENvcHlyaWdodD47XG59XG5leHBvcnQgY29uc3QgTm90aW9uSW1hZ2UgPSAoeyBpZCwgc3JjLCBhbHQsIGltYWdlQ29weXJpZ2h0LCB0eXBlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCBpbWFnZUlkID0gYGltYWdlLSR7aWR9YDtcbiAgY29uc3QgaW1hZ2VGaWd1cmVJZCA9IGBpbWFnZS1maWd1cmUtJHtpZH1gO1xuXG4gIHJldHVybiAoXG4gICAgPEZpZ3VyZU5vdGlvblxuICAgICAgaGlkZUZpZ0NhcHRpb25cbiAgICAgIGZpZ3VyZUlkPXtpbWFnZUZpZ3VyZUlkfVxuICAgICAgaWQ9e2ltYWdlSWR9XG4gICAgICB0aXRsZT17YWx0fVxuICAgICAgY29weXJpZ2h0PXtpbWFnZUNvcHlyaWdodH1cbiAgICAgIGxpY2Vuc2VTdHJpbmc9e2ltYWdlQ29weXJpZ2h0Py5saWNlbnNlPy5saWNlbnNlID8/ICcnfVxuICAgICAgdHlwZT17J2ltYWdlJ30+XG4gICAgICB7KHsgdHlwZUNsYXNzIH0pID0+IChcbiAgICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgICA8U3R5bGVkSW1hZ2VcbiAgICAgICAgICAgIGFsdD17YWx0fVxuICAgICAgICAgICAgc3JjPXtzcmN9XG4gICAgICAgICAgICBleHBhbmRCdXR0b249e1xuICAgICAgICAgICAgICA8RmlndXJlT3BlbkRpYWxvZ0J1dHRvblxuICAgICAgICAgICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgICAgICAgICAgbWVzc2FnZXM9e3tcbiAgICAgICAgICAgICAgICAgIHpvb21JbWFnZUJ1dHRvbkxhYmVsOiB0KCdsaWNlbnNlLmltYWdlcy5pdGVtSW1hZ2Uuem9vbUltYWdlQnV0dG9uTGFiZWwnKSxcbiAgICAgICAgICAgICAgICAgIHpvb21PdXRJbWFnZUJ1dHRvbkxhYmVsOiB0KCdsaWNlbnNlLmltYWdlLml0ZW1JbWFnZS56b29tT3V0SW1hZ2VCdXR0b25MYWJlbCcpLFxuICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICApfVxuICAgIDwvRmlndXJlTm90aW9uPlxuICApO1xufTtcbiJdfQ== */"));
+}), "{margin:0 auto;}&:hover{img{transform:scale(1.1);opacity:1.1;transition-duration:0.5s;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjcUMiLCJmaWxlIjoiTm90aW9uSW1hZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGFuaW1hdGlvbnMsIGJyZWFrcG9pbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBJbWFnZSBmcm9tICcuLi9JbWFnZSc7XG5pbXBvcnQgeyBGaWd1cmUsIEZpZ3VyZU9wZW5EaWFsb2dCdXR0b24gfSBmcm9tICcuLi9GaWd1cmUnO1xuXG5jb25zdCBTdHlsZWRJbWFnZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdzogaGlkZGVuO1xuICB3aWR0aDogMjYwcHg7XG4gIHBhZGRpbmctdG9wOiAke3NwYWNpbmcuc21hbGx9O1xuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICBtYXJnaW46IDAgYXV0bztcbiAgfVxuICAmOmhvdmVyIHtcbiAgICBpbWcge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICAgICAgb3BhY2l0eTogMS4xO1xuICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC41cztcbiAgICB9XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC1oZWlnaHQ6IDE2MnB4O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHthbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0fTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgbWluLXdpZHRoOiAyNjBweDtcbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogJ2ltYWdlJyB8ICd2aWRlbycgfCAnaDVwJyB8ICdpZnJhbWUnIHwgJ2V4dGVybmFsJyB8IHVuZGVmaW5lZDtcbiAgaWQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG4gIGFsdDogc3RyaW5nO1xufVxuZXhwb3J0IGNvbnN0IE5vdGlvbkltYWdlID0gKHsgaWQsIHNyYywgYWx0LCB0eXBlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCBpbWFnZUZpZ3VyZUlkID0gYGltYWdlLWZpZ3VyZS0ke2lkfWA7XG5cbiAgcmV0dXJuIChcbiAgICA8RmlndXJlIHJlc2l6ZUlmcmFtZSBpZD17aW1hZ2VGaWd1cmVJZH0gdHlwZT17J2Z1bGwtY29sdW1uJ30+XG4gICAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgICA8U3R5bGVkSW1hZ2VcbiAgICAgICAgICBhbHQ9e2FsdH1cbiAgICAgICAgICBzcmM9e3NyY31cbiAgICAgICAgICBleHBhbmRCdXR0b249e1xuICAgICAgICAgICAgPEZpZ3VyZU9wZW5EaWFsb2dCdXR0b25cbiAgICAgICAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgICAgICAgbWVzc2FnZXM9e3tcbiAgICAgICAgICAgICAgICB6b29tSW1hZ2VCdXR0b25MYWJlbDogdCgnbGljZW5zZS5pbWFnZXMuaXRlbUltYWdlLnpvb21JbWFnZUJ1dHRvbkxhYmVsJyksXG4gICAgICAgICAgICAgICAgem9vbU91dEltYWdlQnV0dG9uTGFiZWw6IHQoJ2xpY2Vuc2UuaW1hZ2UuaXRlbUltYWdlLnpvb21PdXRJbWFnZUJ1dHRvbkxhYmVsJyksXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIH1cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgIDwvRmlndXJlPlxuICApO1xufTtcbiJdfQ== */"));
 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({
+})("object-fit:cover;max-height:162px;transition:transform ", _core.animations.durations.fast, ";", _core.mq.range({
   until: _core.breakpoints.tabletWide
-}), "{min-width:260px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmlDIiwiZmlsZSI6Ik5vdGlvbkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBhbmltYXRpb25zLCBicmVha3BvaW50cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgSW1hZ2UgZnJvbSAnLi4vSW1hZ2UnO1xuaW1wb3J0IHsgRmlndXJlT3BlbkRpYWxvZ0J1dHRvbiB9IGZyb20gJy4uL0ZpZ3VyZSc7XG5pbXBvcnQgeyBDb3B5cmlnaHQgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgRmlndXJlTm90aW9uIGZyb20gJy4vRmlndXJlTm90aW9uJztcblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgd2lkdGg6IDI2MHB4O1xuICBwYWRkaW5nLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgbWFyZ2luOiAwIGF1dG87XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC1oZWlnaHQ6IDE2MnB4O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHthbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0fTtcbiAgJjpob3ZlciB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICAgIG9wYWNpdHk6IDEuMTtcbiAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAwLjVzO1xuICB9XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIG1pbi13aWR0aDogMjYwcHg7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHR5cGU6ICdpbWFnZScgfCAndmlkZW8nIHwgJ2g1cCcgfCAnaWZyYW1lJyB8ICdleHRlcm5hbCcgfCB1bmRlZmluZWQ7XG4gIGlkOiBzdHJpbmc7XG4gIHNyYzogc3RyaW5nO1xuICBhbHQ6IHN0cmluZztcbiAgaW1hZ2VDb3B5cmlnaHQ/OiBQYXJ0aWFsPENvcHlyaWdodD47XG59XG5leHBvcnQgY29uc3QgTm90aW9uSW1hZ2UgPSAoeyBpZCwgc3JjLCBhbHQsIGltYWdlQ29weXJpZ2h0LCB0eXBlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCBpbWFnZUlkID0gYGltYWdlLSR7aWR9YDtcbiAgY29uc3QgaW1hZ2VGaWd1cmVJZCA9IGBpbWFnZS1maWd1cmUtJHtpZH1gO1xuXG4gIHJldHVybiAoXG4gICAgPEZpZ3VyZU5vdGlvblxuICAgICAgaGlkZUZpZ0NhcHRpb25cbiAgICAgIGZpZ3VyZUlkPXtpbWFnZUZpZ3VyZUlkfVxuICAgICAgaWQ9e2ltYWdlSWR9XG4gICAgICB0aXRsZT17YWx0fVxuICAgICAgY29weXJpZ2h0PXtpbWFnZUNvcHlyaWdodH1cbiAgICAgIGxpY2Vuc2VTdHJpbmc9e2ltYWdlQ29weXJpZ2h0Py5saWNlbnNlPy5saWNlbnNlID8/ICcnfVxuICAgICAgdHlwZT17J2ltYWdlJ30+XG4gICAgICB7KHsgdHlwZUNsYXNzIH0pID0+IChcbiAgICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgICA8U3R5bGVkSW1hZ2VcbiAgICAgICAgICAgIGFsdD17YWx0fVxuICAgICAgICAgICAgc3JjPXtzcmN9XG4gICAgICAgICAgICBleHBhbmRCdXR0b249e1xuICAgICAgICAgICAgICA8RmlndXJlT3BlbkRpYWxvZ0J1dHRvblxuICAgICAgICAgICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgICAgICAgICAgbWVzc2FnZXM9e3tcbiAgICAgICAgICAgICAgICAgIHpvb21JbWFnZUJ1dHRvbkxhYmVsOiB0KCdsaWNlbnNlLmltYWdlcy5pdGVtSW1hZ2Uuem9vbUltYWdlQnV0dG9uTGFiZWwnKSxcbiAgICAgICAgICAgICAgICAgIHpvb21PdXRJbWFnZUJ1dHRvbkxhYmVsOiB0KCdsaWNlbnNlLmltYWdlLml0ZW1JbWFnZS56b29tT3V0SW1hZ2VCdXR0b25MYWJlbCcpLFxuICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICApfVxuICAgIDwvRmlndXJlTm90aW9uPlxuICApO1xufTtcbiJdfQ== */"));
+}), "{min-width:260px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QmlDIiwiZmlsZSI6Ik5vdGlvbkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBhbmltYXRpb25zLCBicmVha3BvaW50cywgbXEsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgSW1hZ2UgZnJvbSAnLi4vSW1hZ2UnO1xuaW1wb3J0IHsgRmlndXJlLCBGaWd1cmVPcGVuRGlhbG9nQnV0dG9uIH0gZnJvbSAnLi4vRmlndXJlJztcblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgd2lkdGg6IDI2MHB4O1xuICBwYWRkaW5nLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgbWFyZ2luOiAwIGF1dG87XG4gIH1cbiAgJjpob3ZlciB7XG4gICAgaW1nIHtcbiAgICAgIHRyYW5zZm9ybTogc2NhbGUoMS4xKTtcbiAgICAgIG9wYWNpdHk6IDEuMTtcbiAgICAgIHRyYW5zaXRpb24tZHVyYXRpb246IDAuNXM7XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRJbWFnZSA9IHN0eWxlZChJbWFnZSlgXG4gIG9iamVjdC1maXQ6IGNvdmVyO1xuICBtYXgtaGVpZ2h0OiAxNjJweDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtICR7YW5pbWF0aW9ucy5kdXJhdGlvbnMuZmFzdH07XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIG1pbi13aWR0aDogMjYwcHg7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHR5cGU6ICdpbWFnZScgfCAndmlkZW8nIHwgJ2g1cCcgfCAnaWZyYW1lJyB8ICdleHRlcm5hbCcgfCB1bmRlZmluZWQ7XG4gIGlkOiBzdHJpbmc7XG4gIHNyYzogc3RyaW5nO1xuICBhbHQ6IHN0cmluZztcbn1cbmV4cG9ydCBjb25zdCBOb3Rpb25JbWFnZSA9ICh7IGlkLCBzcmMsIGFsdCwgdHlwZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaW1hZ2VGaWd1cmVJZCA9IGBpbWFnZS1maWd1cmUtJHtpZH1gO1xuXG4gIHJldHVybiAoXG4gICAgPEZpZ3VyZSByZXNpemVJZnJhbWUgaWQ9e2ltYWdlRmlndXJlSWR9IHR5cGU9eydmdWxsLWNvbHVtbid9PlxuICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgPFN0eWxlZEltYWdlXG4gICAgICAgICAgYWx0PXthbHR9XG4gICAgICAgICAgc3JjPXtzcmN9XG4gICAgICAgICAgZXhwYW5kQnV0dG9uPXtcbiAgICAgICAgICAgIDxGaWd1cmVPcGVuRGlhbG9nQnV0dG9uXG4gICAgICAgICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgICAgICAgIG1lc3NhZ2VzPXt7XG4gICAgICAgICAgICAgICAgem9vbUltYWdlQnV0dG9uTGFiZWw6IHQoJ2xpY2Vuc2UuaW1hZ2VzLml0ZW1JbWFnZS56b29tSW1hZ2VCdXR0b25MYWJlbCcpLFxuICAgICAgICAgICAgICAgIHpvb21PdXRJbWFnZUJ1dHRvbkxhYmVsOiB0KCdsaWNlbnNlLmltYWdlLml0ZW1JbWFnZS56b29tT3V0SW1hZ2VCdXR0b25MYWJlbCcpLFxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICB9XG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgICA8L0ZpZ3VyZT5cbiAgKTtcbn07XG4iXX0= */"));
 
 var NotionImage = function NotionImage(_ref) {
-  var _imageCopyright$licen, _imageCopyright$licen2;
-
   var id = _ref.id,
       src = _ref.src,
       alt = _ref.alt,
-      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, _core2.jsx)(_FigureNotion["default"], {
-    hideFigCaption: true,
-    figureId: imageFigureId,
-    id: imageId,
-    title: alt,
-    copyright: imageCopyright,
-    licenseString: (_imageCopyright$licen = imageCopyright === null || imageCopyright === void 0 ? void 0 : (_imageCopyright$licen2 = imageCopyright.license) === null || _imageCopyright$licen2 === void 0 ? void 0 : _imageCopyright$licen2.license) !== null && _imageCopyright$licen !== void 0 ? _imageCopyright$licen : '',
-    type: 'image'
-  }, function (_ref2) {
-    var typeClass = _ref2.typeClass;
-    return (0, _core2.jsx)(StyledImageWrapper, null, (0, _core2.jsx)(StyledImage, {
-      alt: alt,
-      src: src,
-      expandButton: (0, _core2.jsx)(_Figure.FigureOpenDialogButton, {
-        type: type,
-        messages: {
-          zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
-          zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel')
-        }
-      })
-    }));
-  });
+  return (0, _core2.jsx)(_Figure.Figure, {
+    resizeIframe: true,
+    id: imageFigureId,
+    type: 'full-column'
+  }, (0, _core2.jsx)(StyledImageWrapper, null, (0, _core2.jsx)(StyledImage, {
+    alt: alt,
+    src: src,
+    expandButton: (0, _core2.jsx)(_Figure.FigureOpenDialogButton, {
+      type: type,
+      messages: {
+        zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
+        zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel')
+      }
+    })
+  })));
 };
 
 exports.NotionImage = NotionImage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "10.1.0",
+  "version": "11.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "daa7a2dd4e2740341982f3530721ffe7a791b562"
+  "gitHead": "d1b3670f9f578ba1da7d49db2b9e577a4b0433cb"
 }

package/src/Article/ArticleSideBar.tsx

@@ -24,7 +24,8 @@ type CursorWrapperProps = {
   hide: boolean;
 };
 const CursorWrapper = styled.div<CursorWrapperProps>`
-  @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');
+  font-family: 'Shadows Into Light Two';
+  font-display: swap;
   width: 120px;
   font-family: 'Shadows Into Light Two', cursive;
   margin-top: 40px;

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -68,7 +68,8 @@ const HighlightWrapper = styled.div`
 `;
 
 const HighlightText = styled.span`
-  @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');
+  font-family: 'Shadows Into Light Two';
+  font-display: swap;
   display: inline-block;
   color: ${colors.text.light};
   transform: rotate(14deg);

package/src/ComponentCursor/ComponentCursor.tsx

@@ -10,7 +10,8 @@ type CursorStyleProps = {
 };
 
 const Wrapper = styled.div<CursorStyleProps>`
-  @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');
+  font-family: 'Shadows Into Light Two';
+  font-display: swap;
   position: absolute;
   top: -5px;
   max-width: 155px;

package/src/Figure/FigureOpenDialogButton.tsx

@@ -19,11 +19,10 @@ interface Props {
   };
 }
 
-export function FigureOpenDialogButton({ messages, type }: Props) {
+export const FigureOpenDialogButton = ({ messages, type }: Props) => {
   return (
-    <button
+    <div
       className="c-figure__fullscreen-btn"
-      type="button"
       data-aria={messages.zoomImageButtonLabel}
       data-ariaexpanded={messages.zoomOutImageButtonLabel}
       aria-label={messages.zoomImageButtonLabel}>
@@ -32,6 +31,6 @@ export function FigureOpenDialogButton({ messages, type }: Props) {
       {type === 'iframe' && <CursorClick style={{ width: '24px', height: '24px' }} />}
       {type === 'external' && <CursorClick style={{ width: '24px', height: '24px' }} />}
       {type === 'video' && <Play style={{ width: '24px', height: '24px' }} />}
-    </button>
+    </div>
   );
-}
+};

package/src/Frontpage/FrontpageProgramMenu.tsx

@@ -36,7 +36,8 @@ const CursorPlaceholder = styled.div`
 `;
 
 const CursorWrapper = styled.div`
-  @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');
+  font-family: 'Shadows Into Light Two';
+  font-display: swap;
   position: absolute;
   top: -55px;
   left: 38px;

package/src/Notion/ConceptNotion.tsx

@@ -100,7 +100,6 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors }: P
                     id={visualElementId}
                     src={concept.visualElement.image.src}
                     alt={concept.visualElement.image.alt ?? ''}
-                    imageCopyright={concept.visualElement.copyright}
                   />
                 )}
               </Notion>
@@ -136,7 +135,6 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors }: P
                     id={visualElementId}
                     src={concept.image?.src}
                     alt={concept.image?.alt ?? ''}
-                    imageCopyright={concept.visualElement.copyright}
                   />
                 )}
               </Notion>

package/src/Notion/NotionImage.tsx

@@ -10,9 +10,7 @@ import styled from '@emotion/styled';
 import { animations, breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import Image from '../Image';
-import { FigureOpenDialogButton } from '../Figure';
-import { Copyright } from '../types';
-import FigureNotion from './FigureNotion';
+import { Figure, FigureOpenDialogButton } from '../Figure';
 
 const StyledImageWrapper = styled.div`
   overflow: hidden;
@@ -21,17 +19,19 @@ const StyledImageWrapper = styled.div`
   ${mq.range({ until: breakpoints.tabletWide })} {
     margin: 0 auto;
   }
+  &:hover {
+    img {
+      transform: scale(1.1);
+      opacity: 1.1;
+      transition-duration: 0.5s;
+    }
+  }
 `;
 
 const StyledImage = styled(Image)`
   object-fit: cover;
   max-height: 162px;
   transition: transform ${animations.durations.fast};
-  &:hover {
-    transform: scale(1.1);
-    opacity: 1.1;
-    transition-duration: 0.5s;
-  }
   ${mq.range({ until: breakpoints.tabletWide })} {
     min-width: 260px;
   }
@@ -42,40 +42,29 @@ interface Props {
   id: string;
   src: string;
   alt: string;
-  imageCopyright?: Partial<Copyright>;
 }
-export const NotionImage = ({ id, src, alt, imageCopyright, type }: Props) => {
+export const NotionImage = ({ id, src, alt, type }: Props) => {
   const { t } = useTranslation();
 
-  const imageId = `image-${id}`;
   const imageFigureId = `image-figure-${id}`;
 
   return (
-    <FigureNotion
-      hideFigCaption
-      figureId={imageFigureId}
-      id={imageId}
-      title={alt}
-      copyright={imageCopyright}
-      licenseString={imageCopyright?.license?.license ?? ''}
-      type={'image'}>
-      {({ typeClass }) => (
-        <StyledImageWrapper>
-          <StyledImage
-            alt={alt}
-            src={src}
-            expandButton={
-              <FigureOpenDialogButton
-                type={type}
-                messages={{
-                  zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
-                  zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
-                }}
-              />
-            }
-          />
-        </StyledImageWrapper>
-      )}
-    </FigureNotion>
+    <Figure resizeIframe id={imageFigureId} type={'full-column'}>
+      <StyledImageWrapper>
+        <StyledImage
+          alt={alt}
+          src={src}
+          expandButton={
+            <FigureOpenDialogButton
+              type={type}
+              messages={{
+                zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
+                zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
+              }}
+            />
+          }
+        />
+      </StyledImageWrapper>
+    </Figure>
   );
 };