@ndla/ui 45.0.8 → 45.0.10

package/lib/Notion/NotionImage.js

@@ -23,13 +23,13 @@ var StyledImageWrapper = /*#__PURE__*/(0, _base.default)("div", {
   label: "StyledImageWrapper"
 })("overflow:hidden;width:260px;padding-top:", _core.spacing.small, ";", _core.mq.range({
   until: _core.breakpoints.tabletWide
-}), "{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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhcUMiLCJmaWxlIjoiTm90aW9uSW1hZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgYW5pbWF0aW9ucywgYnJlYWtwb2ludHMsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IEltYWdlIGZyb20gJy4uL0ltYWdlJztcbmltcG9ydCB7IEZpZ3VyZSwgRmlndXJlT3BlbkRpYWxvZ0J1dHRvbiB9IGZyb20gJy4uL0ZpZ3VyZSc7XG5cbmNvbnN0IFN0eWxlZEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHdpZHRoOiAyNjBweDtcbiAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIG1hcmdpbjogMCBhdXRvO1xuICB9XG4gICY6aG92ZXIge1xuICAgIGltZyB7XG4gICAgICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7XG4gICAgICBvcGFjaXR5OiAxLjE7XG4gICAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAwLjVzO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQoSW1hZ2UpYFxuICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgbWF4LWhlaWdodDogMTYycHg7XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9O1xuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICBtaW4td2lkdGg6IDI2MHB4O1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICB0eXBlOiAnaW1hZ2UnIHwgJ3ZpZGVvJyB8ICdoNXAnIHwgJ2lmcmFtZScgfCAnZXh0ZXJuYWwnIHwgdW5kZWZpbmVkO1xuICBpZDogc3RyaW5nO1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG59XG5leHBvcnQgY29uc3QgTm90aW9uSW1hZ2UgPSAoeyBpZCwgc3JjLCBhbHQsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuXG4gIGNvbnN0IGltYWdlRmlndXJlSWQgPSBgaW1hZ2UtZmlndXJlLSR7aWR9YDtcblxuICByZXR1cm4gKFxuICAgIDxGaWd1cmUgcmVzaXplSWZyYW1lIGlkPXtpbWFnZUZpZ3VyZUlkfSB0eXBlPXsnZnVsbC1jb2x1bW4nfT5cbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxTdHlsZWRJbWFnZVxuICAgICAgICAgIGFsdD17YWx0fVxuICAgICAgICAgIHNyYz17c3JjfVxuICAgICAgICAgIGV4cGFuZEJ1dHRvbj17XG4gICAgICAgICAgICA8RmlndXJlT3BlbkRpYWxvZ0J1dHRvblxuICAgICAgICAgICAgICB0eXBlPXt0eXBlfVxuICAgICAgICAgICAgICBtZXNzYWdlcz17e1xuICAgICAgICAgICAgICAgIHpvb21JbWFnZUJ1dHRvbkxhYmVsOiB0KCdsaWNlbnNlLmltYWdlcy5pdGVtSW1hZ2Uuem9vbUltYWdlQnV0dG9uTGFiZWwnKSxcbiAgICAgICAgICAgICAgICB6b29tT3V0SW1hZ2VCdXR0b25MYWJlbDogdCgnbGljZW5zZS5pbWFnZS5pdGVtSW1hZ2Uuem9vbU91dEltYWdlQnV0dG9uTGFiZWwnKSxcbiAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgfVxuICAgICAgICAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgPC9GaWd1cmU+XG4gICk7XG59O1xuIl19 */"));
+}), "{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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhcUMiLCJmaWxlIjoiTm90aW9uSW1hZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgYW5pbWF0aW9ucywgYnJlYWtwb2ludHMsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IEltYWdlIGZyb20gJy4uL0ltYWdlJztcbmltcG9ydCB7IEZpZ3VyZSwgRmlndXJlT3BlbkRpYWxvZ0J1dHRvbiB9IGZyb20gJy4uL0ZpZ3VyZSc7XG5cbmNvbnN0IFN0eWxlZEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHdpZHRoOiAyNjBweDtcbiAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIG1hcmdpbjogMCBhdXRvO1xuICB9XG4gICY6aG92ZXIge1xuICAgIGltZyB7XG4gICAgICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7XG4gICAgICBvcGFjaXR5OiAxLjE7XG4gICAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAwLjVzO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQoSW1hZ2UpYFxuICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgbWF4LWhlaWdodDogMTYycHg7XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9O1xuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICBtaW4td2lkdGg6IDI2MHB4O1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICB0eXBlOiAnaW1hZ2UnIHwgJ3ZpZGVvJyB8ICdoNXAnIHwgJ2lmcmFtZScgfCAnZXh0ZXJuYWwnIHwgJ2F1ZGlvJyB8IHVuZGVmaW5lZDtcbiAgaWQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG4gIGFsdDogc3RyaW5nO1xufVxuZXhwb3J0IGNvbnN0IE5vdGlvbkltYWdlID0gKHsgaWQsIHNyYywgYWx0LCB0eXBlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCBpbWFnZUZpZ3VyZUlkID0gYGltYWdlLWZpZ3VyZS0ke2lkfWA7XG5cbiAgcmV0dXJuIChcbiAgICA8RmlndXJlIHJlc2l6ZUlmcmFtZSBpZD17aW1hZ2VGaWd1cmVJZH0gdHlwZT17J2Z1bGwtY29sdW1uJ30+XG4gICAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgICA8U3R5bGVkSW1hZ2VcbiAgICAgICAgICBhbHQ9e2FsdH1cbiAgICAgICAgICBzcmM9e3NyY31cbiAgICAgICAgICBleHBhbmRCdXR0b249e1xuICAgICAgICAgICAgPEZpZ3VyZU9wZW5EaWFsb2dCdXR0b25cbiAgICAgICAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgICAgICAgbWVzc2FnZXM9e3tcbiAgICAgICAgICAgICAgICB6b29tSW1hZ2VCdXR0b25MYWJlbDogdCgnbGljZW5zZS5pbWFnZXMuaXRlbUltYWdlLnpvb21JbWFnZUJ1dHRvbkxhYmVsJyksXG4gICAgICAgICAgICAgICAgem9vbU91dEltYWdlQnV0dG9uTGFiZWw6IHQoJ2xpY2Vuc2UuaW1hZ2UuaXRlbUltYWdlLnpvb21PdXRJbWFnZUJ1dHRvbkxhYmVsJyksXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIH1cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgIDwvRmlndXJlPlxuICApO1xufTtcbiJdfQ== */"));
 var StyledImage = /*#__PURE__*/(0, _base.default)(_Image.default, {
   target: "e1beccco0",
   label: "StyledImage"
 })("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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QmlDIiwiZmlsZSI6Ik5vdGlvbkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGFuaW1hdGlvbnMsIGJyZWFrcG9pbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBJbWFnZSBmcm9tICcuLi9JbWFnZSc7XG5pbXBvcnQgeyBGaWd1cmUsIEZpZ3VyZU9wZW5EaWFsb2dCdXR0b24gfSBmcm9tICcuLi9GaWd1cmUnO1xuXG5jb25zdCBTdHlsZWRJbWFnZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdzogaGlkZGVuO1xuICB3aWR0aDogMjYwcHg7XG4gIHBhZGRpbmctdG9wOiAke3NwYWNpbmcuc21hbGx9O1xuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICBtYXJnaW46IDAgYXV0bztcbiAgfVxuICAmOmhvdmVyIHtcbiAgICBpbWcge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICAgICAgb3BhY2l0eTogMS4xO1xuICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC41cztcbiAgICB9XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC1oZWlnaHQ6IDE2MnB4O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHthbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0fTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgbWluLXdpZHRoOiAyNjBweDtcbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogJ2ltYWdlJyB8ICd2aWRlbycgfCAnaDVwJyB8ICdpZnJhbWUnIHwgJ2V4dGVybmFsJyB8IHVuZGVmaW5lZDtcbiAgaWQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG4gIGFsdDogc3RyaW5nO1xufVxuZXhwb3J0IGNvbnN0IE5vdGlvbkltYWdlID0gKHsgaWQsIHNyYywgYWx0LCB0eXBlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCBpbWFnZUZpZ3VyZUlkID0gYGltYWdlLWZpZ3VyZS0ke2lkfWA7XG5cbiAgcmV0dXJuIChcbiAgICA8RmlndXJlIHJlc2l6ZUlmcmFtZSBpZD17aW1hZ2VGaWd1cmVJZH0gdHlwZT17J2Z1bGwtY29sdW1uJ30+XG4gICAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgICA8U3R5bGVkSW1hZ2VcbiAgICAgICAgICBhbHQ9e2FsdH1cbiAgICAgICAgICBzcmM9e3NyY31cbiAgICAgICAgICBleHBhbmRCdXR0b249e1xuICAgICAgICAgICAgPEZpZ3VyZU9wZW5EaWFsb2dCdXR0b25cbiAgICAgICAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgICAgICAgbWVzc2FnZXM9e3tcbiAgICAgICAgICAgICAgICB6b29tSW1hZ2VCdXR0b25MYWJlbDogdCgnbGljZW5zZS5pbWFnZXMuaXRlbUltYWdlLnpvb21JbWFnZUJ1dHRvbkxhYmVsJyksXG4gICAgICAgICAgICAgICAgem9vbU91dEltYWdlQnV0dG9uTGFiZWw6IHQoJ2xpY2Vuc2UuaW1hZ2UuaXRlbUltYWdlLnpvb21PdXRJbWFnZUJ1dHRvbkxhYmVsJyksXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIH1cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgIDwvRmlndXJlPlxuICApO1xufTtcbiJdfQ== */"));
+}), "{min-width:260px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvbkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QmlDIiwiZmlsZSI6Ik5vdGlvbkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGFuaW1hdGlvbnMsIGJyZWFrcG9pbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBJbWFnZSBmcm9tICcuLi9JbWFnZSc7XG5pbXBvcnQgeyBGaWd1cmUsIEZpZ3VyZU9wZW5EaWFsb2dCdXR0b24gfSBmcm9tICcuLi9GaWd1cmUnO1xuXG5jb25zdCBTdHlsZWRJbWFnZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdzogaGlkZGVuO1xuICB3aWR0aDogMjYwcHg7XG4gIHBhZGRpbmctdG9wOiAke3NwYWNpbmcuc21hbGx9O1xuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICBtYXJnaW46IDAgYXV0bztcbiAgfVxuICAmOmhvdmVyIHtcbiAgICBpbWcge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpO1xuICAgICAgb3BhY2l0eTogMS4xO1xuICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC41cztcbiAgICB9XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkKEltYWdlKWBcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC1oZWlnaHQ6IDE2MnB4O1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHthbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0fTtcbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgbWluLXdpZHRoOiAyNjBweDtcbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogJ2ltYWdlJyB8ICd2aWRlbycgfCAnaDVwJyB8ICdpZnJhbWUnIHwgJ2V4dGVybmFsJyB8ICdhdWRpbycgfCB1bmRlZmluZWQ7XG4gIGlkOiBzdHJpbmc7XG4gIHNyYzogc3RyaW5nO1xuICBhbHQ6IHN0cmluZztcbn1cbmV4cG9ydCBjb25zdCBOb3Rpb25JbWFnZSA9ICh7IGlkLCBzcmMsIGFsdCwgdHlwZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG5cbiAgY29uc3QgaW1hZ2VGaWd1cmVJZCA9IGBpbWFnZS1maWd1cmUtJHtpZH1gO1xuXG4gIHJldHVybiAoXG4gICAgPEZpZ3VyZSByZXNpemVJZnJhbWUgaWQ9e2ltYWdlRmlndXJlSWR9IHR5cGU9eydmdWxsLWNvbHVtbid9PlxuICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgPFN0eWxlZEltYWdlXG4gICAgICAgICAgYWx0PXthbHR9XG4gICAgICAgICAgc3JjPXtzcmN9XG4gICAgICAgICAgZXhwYW5kQnV0dG9uPXtcbiAgICAgICAgICAgIDxGaWd1cmVPcGVuRGlhbG9nQnV0dG9uXG4gICAgICAgICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgICAgICAgIG1lc3NhZ2VzPXt7XG4gICAgICAgICAgICAgICAgem9vbUltYWdlQnV0dG9uTGFiZWw6IHQoJ2xpY2Vuc2UuaW1hZ2VzLml0ZW1JbWFnZS56b29tSW1hZ2VCdXR0b25MYWJlbCcpLFxuICAgICAgICAgICAgICAgIHpvb21PdXRJbWFnZUJ1dHRvbkxhYmVsOiB0KCdsaWNlbnNlLmltYWdlLml0ZW1JbWFnZS56b29tT3V0SW1hZ2VCdXR0b25MYWJlbCcpLFxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICB9XG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgICA8L0ZpZ3VyZT5cbiAgKTtcbn07XG4iXX0= */"));
 var NotionImage = function NotionImage(_ref) {
   var id = _ref.id,
     src = _ref.src,

package/lib/locale/messages-en.d.ts

@@ -287,6 +287,7 @@ declare const messages: {
             concept: string;
             h5p: string;
             external: string;
+            gloss: string;
         };
     };
     gloss: {
@@ -496,9 +497,10 @@ declare const messages: {
             notionsHeading: string;
             notionsRemove: string;
             showVideo: string;
-            showNotion: string;
+            concept: string;
             gridView: string;
             listView: string;
+            gloss: string;
         };
         contextModal: {
             button: string;

package/lib/locale/messages-en.js

@@ -215,9 +215,10 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Explanations',
       notionsRemove: 'Remove',
       showVideo: 'Watch video',
-      showNotion: 'Show notion',
+      concept: 'Show notion',
       gridView: 'Grid-view',
-      listView: 'List-view'
+      listView: 'List-view',
+      gloss: 'Show gloss'
     },
     contextModal: {
       button: '+ {{count}} more contexts',
@@ -1291,7 +1292,8 @@ var messages = _objectSpread(_objectSpread({
       podcast: 'Podcast',
       concept: 'Concept',
       h5p: 'H5P',
-      external: 'External resource'
+      external: 'External resource',
+      gloss: 'Gloss'
     }
   },
   gloss: {

package/lib/locale/messages-nb.d.ts

@@ -287,6 +287,7 @@ declare const messages: {
             concept: string;
             h5p: string;
             external: string;
+            gloss: string;
         };
     };
     gloss: {
@@ -496,7 +497,8 @@ declare const messages: {
             notionsHeading: string;
             notionsRemove: string;
             showVideo: string;
-            showNotion: string;
+            concept: string;
+            gloss: string;
             gridView: string;
             listView: string;
         };

package/lib/locale/messages-nb.js

@@ -213,7 +213,8 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Se video',
-      showNotion: 'Se forklaring',
+      concept: 'Se forklaring',
+      gloss: 'Se glose',
       gridView: 'Gallerivisning',
       listView: 'Listevisning'
     },
@@ -1289,7 +1290,8 @@ var messages = _objectSpread(_objectSpread({
       podcast: 'Podkast',
       concept: 'Forklaring',
       h5p: 'H5P',
-      external: 'Ekstern ressurs'
+      external: 'Ekstern ressurs',
+      gloss: 'Glose'
     }
   },
   gloss: {

package/lib/locale/messages-nn.d.ts

@@ -287,6 +287,7 @@ declare const messages: {
             concept: string;
             h5p: string;
             external: string;
+            gloss: string;
         };
     };
     gloss: {
@@ -496,9 +497,10 @@ declare const messages: {
             notionsHeading: string;
             notionsRemove: string;
             showVideo: string;
-            showNotion: string;
+            concept: string;
             gridView: string;
             listView: string;
+            gloss: string;
         };
         contextModal: {
             button: string;

package/lib/locale/messages-nn.js

@@ -213,9 +213,10 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Sjå video',
-      showNotion: 'Sjå forklaring',
+      concept: 'Sjå forklaring',
       gridView: 'Gallerivisning',
-      listView: 'Listevisning'
+      listView: 'Listevisning',
+      gloss: 'Sjå glose'
     },
     contextModal: {
       button: '+ {{count}} fleire stader',
@@ -1289,7 +1290,8 @@ var messages = _objectSpread(_objectSpread({
       podcast: 'Podkast',
       concept: 'Forklaring',
       h5p: 'H5P',
-      external: 'Ekstern ressurs'
+      external: 'Ekstern ressurs',
+      gloss: 'Glose'
     }
   },
   gloss: {

package/lib/locale/messages-se.d.ts

@@ -287,6 +287,7 @@ declare const messages: {
             concept: string;
             h5p: string;
             external: string;
+            gloss: string;
         };
     };
     gloss: {
@@ -496,9 +497,10 @@ declare const messages: {
             notionsHeading: string;
             notionsRemove: string;
             showVideo: string;
-            showNotion: string;
+            concept: string;
             gridView: string;
             listView: string;
+            gloss: string;
         };
         contextModal: {
             button: string;

package/lib/locale/messages-se.js

@@ -213,9 +213,10 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Doabačilgehus',
       notionsRemove: 'Sihko',
       showVideo: 'Geahča video',
-      showNotion: 'Geahča čilgehusa',
+      concept: 'Geahča čilgehusa',
       gridView: 'Galleriijačájáhus',
-      listView: 'Čájáhus listtu vuođul'
+      listView: 'Čájáhus listtu vuođul',
+      gloss: 'Se glose'
     },
     contextModal: {
       button: '+ {{count}} eanet sajiin',
@@ -1289,7 +1290,8 @@ var messages = _objectSpread(_objectSpread({
       podcast: 'Podkast',
       concept: 'Forklaring',
       h5p: 'H5P',
-      external: 'Ekstern ressurs'
+      external: 'Ekstern ressurs',
+      gloss: 'Glose'
     }
   },
   gloss: {

package/lib/locale/messages-sma.d.ts

@@ -287,6 +287,7 @@ declare const messages: {
             concept: string;
             h5p: string;
             external: string;
+            gloss: string;
         };
     };
     gloss: {
@@ -496,9 +497,10 @@ declare const messages: {
             notionsHeading: string;
             notionsRemove: string;
             showVideo: string;
-            showNotion: string;
+            concept: string;
             gridView: string;
             listView: string;
+            gloss: string;
         };
         contextModal: {
             button: string;

package/lib/locale/messages-sma.js

@@ -213,9 +213,10 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Baakoebuerkiestimmie',
       notionsRemove: 'Skubph',
       showVideo: 'Gïehtjh videjovem',
-      showNotion: 'Gïehtjh buerkiestimmiem ',
+      concept: 'Gïehtjh buerkiestimmiem ',
       gridView: 'Gallerivisning',
-      listView: 'Listevisning'
+      listView: 'Listevisning',
+      gloss: 'Se glose'
     },
     contextModal: {
       button: '+ {{count}} jieniebinie sijjine',
@@ -1289,7 +1290,8 @@ var messages = _objectSpread(_objectSpread({
       podcast: 'Podkast',
       concept: 'Forklaring',
       h5p: 'H5P',
-      external: 'Ekstern ressurs'
+      external: 'Ekstern ressurs',
+      gloss: 'Glose'
     }
   },
   gloss: {

package/lib/types.d.ts

@@ -44,6 +44,7 @@ export interface Copyright {
     rightsholders: Array<Contributor>;
     processors: Array<Contributor>;
     origin?: string;
+    processed: boolean;
 }
 export interface FootNote {
     ref: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "45.0.8",
+  "version": "45.0.10",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -42,7 +42,7 @@
     "@ndla/icons": "^4.0.6",
     "@ndla/licenses": "^7.1.4",
     "@ndla/modal": "^4.0.7",
-    "@ndla/notion": "^5.0.24",
+    "@ndla/notion": "^5.0.25",
     "@ndla/safelink": "^4.1.21",
     "@ndla/select": "^2.4.12",
     "@ndla/switch": "^1.1.12",
@@ -72,8 +72,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@ndla/types-backend": "^0.2.5",
-    "@ndla/types-embed": "^4.0.0",
+    "@ndla/types-backend": "^0.2.21",
+    "@ndla/types-embed": "^4.0.1",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4fcf1c6c35e6612269adbe3878fd773d7fdd9cd2"
+  "gitHead": "8abb4a1a790af81f4a4eb14e6c355817160c938d"
 }

package/src/BannerCard/BannerCard.tsx

@@ -79,9 +79,9 @@ type BannerProps = {
   content: { content: string; lang?: string };
   linkText: { text: string; lang?: string };
 };
-export const BannerCard = ({ link, title, content, linkText, image }: BannerProps) => {
+export const BannerCard = ({ link, title, content, linkText, image, ...rest }: BannerProps) => {
   return (
-    <BannerWrapper>
+    <BannerWrapper {...rest}>
       <ImageWrapper>
         <StyledImage alt={image.altText} src={image.imageSrc} />
       </ImageWrapper>

package/src/ContactBlock/Contactblock.stories.tsx

@@ -41,6 +41,7 @@ export default {
         ],
         processors: [],
         rightsholders: [],
+        processed: false,
       },
       tags: {
         tags: ['Sigurd', 'Trageton', 'Portrett'],

package/src/Embed/AudioEmbed.stories.tsx

@@ -39,6 +39,7 @@ const successData: AudioMeta = {
     creators: [{ type: 'originator', name: 'Radio Metro AS' }],
     processors: [],
     rightsholders: [],
+    processed: false,
   },
   tags: { tags: ["Ain't I a Woman?", 'Sojourner Truth', 'speech', 'abolitionist'], language: 'nb' },
   supportedLanguages: ['nb'],
@@ -79,6 +80,7 @@ const podcastSuccessData: AudioMeta = {
       { type: 'editorial', name: 'Maren Aftret-Sandal' },
     ],
     rightsholders: [{ type: 'rightsholder', name: 'Både Og' }],
+    processed: false,
   },
   tags: { tags: ['reklame', 'radio', 'lyddesign'], language: 'nb' },
   supportedLanguages: ['nb', 'nn'],
@@ -148,6 +150,7 @@ const podcastSuccessData: AudioMeta = {
         },
       ],
       rightsholders: [],
+      processed: false,
     },
     tags: {
       tags: ['lytt gjennom mediefaget', 'podcastserie', 'podcast', 'mediefaget', 'medier', 'podkastserie', 'podkast'],

package/src/Embed/ConceptEmbed.stories.tsx

@@ -47,6 +47,7 @@ const conceptMetaData: ConceptData['concept'] = {
       { type: 'Correction', name: 'Arbeidets art' },
     ],
     rightsholders: [],
+    processed: false,
   },
   source: '',
   metaImage: {
@@ -67,6 +68,7 @@ const conceptMetaData: ConceptData['concept'] = {
       '<ndlaembed data-resource="image" data-resource_id="52863" data-alt="Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon." data-size="full" data-align="" data-url="https://api.test.ndla.no/image-api/v2/images/52863"></ndlaembed>',
     language: 'nb',
   },
+  conceptType: 'standard',
 };
 
 const visualElementData: ConceptData['visualElement'] = {
@@ -106,6 +108,7 @@ const visualElementData: ConceptData['visualElement'] = {
       ],
       processors: [],
       rightsholders: [],
+      processed: false,
     },
     tags: {
       tags: ['skin', 'formasjonsskade', 'nærbrønn', 'permeabilitet'],

package/src/Embed/ConceptEmbed.tsx

@@ -14,16 +14,17 @@ import { Root, Trigger, Content, Anchor, Close, Portal } from '@radix-ui/react-p
 import { IconButtonV2 } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
-import { ConceptMetaData } from '@ndla/types-embed';
+import { AudioMeta, ConceptMetaData } from '@ndla/types-embed';
 import Tooltip from '@ndla/tooltip';
 import { COPYRIGHTED } from '@ndla/licenses';
 import { Notion as UINotion } from '../Notion';
 import { Figure } from '../Figure';
 import { NotionImage } from '../Notion/NotionImage';
-import { ConceptNotionV2, ConceptNotionData } from './conceptComponents';
+import { ConceptNotionV2, ConceptNotionData, ConceptType } from './conceptComponents';
 import { EmbedByline } from '../LicenseByline';
 import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
 import { HeartButtonType } from './types';
+import { Gloss } from '../Gloss';
 
 const BottomBorder = styled.div`
   margin-top: ${spacing.normal};
@@ -110,7 +111,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
     return (
       <BlockConcept
         fullWidth={fullWidth}
-        title={concept.title.title}
+        title={concept.title}
         content={concept.content?.content}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
@@ -118,12 +119,14 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         visualElement={visualElement}
         heartButton={HeartButton}
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
+        conceptType={concept.conceptType}
+        glossData={concept.glossData}
       />
     );
   } else if (embed.embedData.type === 'inline') {
     return (
       <InlineConcept
-        title={concept.title.title}
+        title={concept.title}
         content={concept.content?.content}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
@@ -132,12 +135,14 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         linkText={embed.embedData.linkText}
         heartButton={HeartButton}
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
+        conceptType={concept.conceptType}
+        glossData={concept.glossData}
       />
     );
   } else {
     return (
       <ConceptNotionV2
-        title={concept.title.title}
+        title={concept.title}
         content={concept.content?.content}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
@@ -145,6 +150,8 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         visualElement={visualElement}
         heartButton={HeartButton}
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
+        conceptType={concept.conceptType}
+        glossData={concept.glossData}
       />
     );
   }
@@ -223,6 +230,8 @@ const InlineConcept = ({
   linkText,
   heartButton,
   conceptHeartButton,
+  glossData,
+  conceptType,
 }: InlineConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -270,6 +279,8 @@ const InlineConcept = ({
                   </IconButtonV2>
                 </Close>
               }
+              conceptType={conceptType}
+              glossData={glossData}
             />
           </Content>
         </PopoverWrapper>
@@ -294,6 +305,8 @@ export const BlockConcept = ({
   fullWidth,
   heartButton,
   conceptHeartButton,
+  glossData,
+  conceptType,
 }: ConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -318,71 +331,85 @@ export const BlockConcept = ({
     <Root modal={isMobile} onOpenChange={onOpenChange}>
       <StyledAnchor ref={anchorRef} />
       <Figure resizeIframe type={fullWidth ? 'full' : 'full-column'}>
-        <UINotion
-          id=""
-          title={title}
-          text={content}
-          visualElement={
-            visualElement?.status === 'success' && (
-              <>
-                <ImageWrapper>
-                  <Tooltip tooltip={t('searchPage.resultType.showNotion')}>
-                    <Trigger asChild>
-                      <StyledButton type="button" aria-label={t('concept.showDescription', { title: title })}>
-                        {visualElement.resource === 'image' ? (
-                          <NotionImage
-                            type={visualElementType}
-                            id={''}
-                            src={visualElement.data.image.imageUrl}
-                            alt={visualElement.data.alttext.alttext}
-                          />
-                        ) : metaImage ? (
-                          <NotionImage
-                            type={visualElementType}
-                            id={''}
-                            src={metaImage?.url ?? ''}
-                            alt={metaImage?.alt ?? ''}
-                          />
-                        ) : undefined}
-                      </StyledButton>
-                    </Trigger>
-                  </Tooltip>
-                </ImageWrapper>
-                <Portal
-                  container={
-                    typeof document !== 'undefined'
-                      ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
-                      : undefined
-                  }
-                >
-                  <PopoverWrapper top={modalPos}>
-                    <Content avoidCollisions={false} asChild side="bottom">
-                      <ConceptNotionV2
-                        title={title}
-                        content={content}
-                        copyright={copyright}
-                        source={source}
-                        visualElement={visualElement}
-                        heartButton={heartButton}
-                        conceptHeartButton={conceptHeartButton}
-                        inPopover
-                        closeButton={
-                          <Close asChild>
-                            <IconButtonV2 aria-label={t('close')} variant="ghost">
-                              <Cross />
-                            </IconButtonV2>
-                          </Close>
-                        }
-                      />
-                    </Content>
-                  </PopoverWrapper>
-                </Portal>
-              </>
-            )
-          }
-        />
+        {conceptType === 'concept' ? (
+          <UINotion
+            id=""
+            title={title.title}
+            text={content}
+            visualElement={
+              visualElement?.status === 'success' && (
+                <>
+                  <ImageWrapper>
+                    <Tooltip tooltip={t(`searchPage.resultType.${conceptType}`)}>
+                      <Trigger asChild>
+                        <StyledButton type="button" aria-label={t('concept.showDescription', { title: title })}>
+                          {visualElement.resource === 'image' ? (
+                            <NotionImage
+                              type={visualElementType}
+                              id={''}
+                              src={visualElement.data.image.imageUrl}
+                              alt={visualElement.data.alttext.alttext}
+                            />
+                          ) : metaImage ? (
+                            <NotionImage
+                              type={visualElementType}
+                              id={''}
+                              src={metaImage?.url ?? ''}
+                              alt={metaImage?.alt ?? ''}
+                            />
+                          ) : undefined}
+                        </StyledButton>
+                      </Trigger>
+                    </Tooltip>
+                  </ImageWrapper>
+                  <Portal
+                    container={
+                      typeof document !== 'undefined'
+                        ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
+                        : undefined
+                    }
+                  >
+                    <PopoverWrapper top={modalPos}>
+                      <Content avoidCollisions={false} asChild side="bottom">
+                        <ConceptNotionV2
+                          title={title}
+                          content={content}
+                          copyright={copyright}
+                          source={source}
+                          visualElement={visualElement}
+                          heartButton={heartButton}
+                          conceptHeartButton={conceptHeartButton}
+                          inPopover
+                          closeButton={
+                            <Close asChild>
+                              <IconButtonV2 aria-label={t('close')} variant="ghost">
+                                <Cross />
+                              </IconButtonV2>
+                            </Close>
+                          }
+                          conceptType={conceptType}
+                          glossData={glossData}
+                        />
+                      </Content>
+                    </PopoverWrapper>
+                  </Portal>
+                </>
+              )
+            }
+          />
+        ) : (
+          <Gloss
+            glossData={glossData!}
+            title={title}
+            audio={
+              visualElement?.status === 'success' && visualElement.resource === 'audio'
+                ? { src: visualElement.data.audioFile.url, title: visualElement.data.title.title }
+                : undefined
+            }
+          />
+        )}
         {copyright ? (
-          <EmbedByline copyright={copyright} bottomRounded topRounded type="concept">
+          <EmbedByline copyright={copyright} bottomRounded topRounded type={conceptType as ConceptType}>
             {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>
         ) : (

package/src/Embed/ConceptListEmbed.tsx

@@ -45,12 +45,13 @@ const ConceptListEmbed = ({ embed }: Props) => {
             {data.concepts.map(({ concept, visualElement }) => (
               <li key={concept.id}>
                 <BlockConcept
-                  title={concept.title.title}
+                  title={concept.title}
                   content={concept.content.content}
                   metaImage={concept.metaImage}
                   copyright={concept.copyright}
                   source={concept.source}
                   visualElement={visualElement}
+                  conceptType={concept.conceptType}
                 />
               </li>
             ))}

package/src/Embed/IframeEmbed.stories.tsx

@@ -98,6 +98,7 @@ const opensInnewMetaData: IframeData = {
           name: 'Folkehelseprosjektet Helsefremmende miljø på sosial medier, Bergen kommune 2019-2022',
         },
       ],
+      processed: false,
     },
     tags: {
       tags: ['samtale', 'Dialog', 'gutter'],

package/src/Embed/ImageEmbed.stories.tsx

@@ -54,6 +54,7 @@ const metaData: IImageMetaInformationV3 = {
         name: 'NTB',
       },
     ],
+    processed: false,
   },
   tags: {
     tags: ['danser', 'kultur', 'identitet'],