@ndla/ui 41.2.6 → 41.3.0

package/es/Article/index.js

@@ -11,6 +11,5 @@ import ArticleByline from './ArticleByline';
 import ArticleContent from './ArticleContent';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
-import ArticleSideBar from './ArticleSideBar';
-export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleHeaderWrapper, ArticleSideBar, ArticleTitle, ArticleIntroduction, ArticleWrapper };
+export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleHeaderWrapper, ArticleTitle, ArticleIntroduction, ArticleWrapper };
 export default Article;

package/es/ContentTypeBadge/ContentTypeBadge.js

@@ -8,7 +8,7 @@ import React from 'react';
 import BEMHelper from 'react-bem-helper';
 import { SubjectMaterial, TasksAndActivities, AssessmentResource, Subject, ExternalLearningResource, SharedResource, LearningPath, MultidisciplinaryTopic } from '@ndla/icons/contentType';
 import { MenuBook } from '@ndla/icons/action';
-import { Concept, Media, SquareAudio, SquareVideo } from '@ndla/icons/editor';
+import { Concept, ImageNormal, SquareAudio, SquareVideo } from '@ndla/icons/editor';
 import * as contentTypes from '../model/ContentType';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 var classes = new BEMHelper({
@@ -72,7 +72,7 @@ export var ContentTypeBadge = function ContentTypeBadge(_ref) {
       icon = _jsx(MultidisciplinaryTopic, {});
       break;
     case contentTypes.resourceEmbedTypeMapping.image:
-      icon = _jsx(Media, {});
+      icon = _jsx(ImageNormal, {});
       embedResource = true;
       break;
     case contentTypes.resourceEmbedTypeMapping.audio:

package/es/Embed/ImageEmbed.js

@@ -88,7 +88,8 @@ var ImageEmbed = function ImageEmbed(_ref) {
   var _embedData$caption;
   var embed = _ref.embed,
     previewAlt = _ref.previewAlt,
-    HeartButton = _ref.heartButton;
+    HeartButton = _ref.heartButton,
+    inGrid = _ref.inGrid;
   var _useState = useState(hideByline(embed.embedData.size)),
     _useState2 = _slicedToArray(_useState, 2),
     isBylineHidden = _useState2[0],
@@ -131,6 +132,7 @@ var ImageEmbed = function ImageEmbed(_ref) {
         sizes: imageSizes !== null && imageSizes !== void 0 ? imageSizes : sizes,
         alt: altText,
         src: data.image.imageUrl,
+        inGrid: inGrid,
         expandButton: _jsx(ExpandButton, {
           size: embedData.size,
           expanded: !!imageSizes,
@@ -153,6 +155,7 @@ var ImageEmbed = function ImageEmbed(_ref) {
       description: (_embedData$caption = embedData.caption) !== null && _embedData$caption !== void 0 ? _embedData$caption : data.caption.caption,
       bottomRounded: true,
       visibleAlt: previewAlt ? embed.embedData.alt : '',
+      inGrid: inGrid,
       children: HeartButton && data.copyright.license.license.toLowerCase() !== COPYRIGHTED && _jsx(HeartButton, {
         embed: embed
       })

package/es/FrontpageArticle/FrontpageArticle.js

@@ -0,0 +1,78 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
+import LayoutItem from '../Layout';
+import { Heading } from '../Typography';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+var StyledArticle = /*#__PURE__*/_styled("article", {
+  target: "e10a6yg82",
+  label: "StyledArticle"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1j6pb2o",
+  styles: "max-width:773px;&[data-wide='true']{max-width:1100px;}"
+} : {
+  name: "1j6pb2o",
+  styles: "max-width:773px;&[data-wide='true']{max-width:1100px;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZyb250cGFnZUFydGljbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCb0MiLCJmaWxlIjoiRnJvbnRwYWdlQXJ0aWNsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBmb250cywgbXEsIHNwYWNpbmcsIHV0aWxzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBBcnRpY2xlIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IExheW91dEl0ZW0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9UeXBvZ3JhcGh5JztcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYXJ0aWNsZTogQXJ0aWNsZTtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIGlkOiBzdHJpbmc7XG4gIGlzV2lkZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZEFydGljbGUgPSBzdHlsZWQuYXJ0aWNsZWBcbiAgbWF4LXdpZHRoOiA3NzNweDtcbiAgJltkYXRhLXdpZGU9J3RydWUnXSB7XG4gICAgbWF4LXdpZHRoOiAxMTAwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZExheW91dEl0ZW0gPSBzdHlsZWQoTGF5b3V0SXRlbSlgXG4gID4gc2VjdGlvbiB7XG4gICAgPiBmaWd1cmUsXG4gICAgPiBpZnJhbWUge1xuICAgICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRJbnRyb2R1Y3Rpb24gPSBzdHlsZWQuZGl2YFxuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubGlnaHR9O1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHtmb250cy5zaXplcygnMjJweCcsICczMHB4Jyl9O1xuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubWVkaXVtbGFyZ2V9O1xuICAgICR7Zm9udHMuc2l6ZXMoJzI2cHgnLCAnMzZweCcpfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEZyb250cGFnZUFydGljbGUgPSAoeyBhcnRpY2xlLCBpZCwgaXNXaWRlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdGl0bGUsIGludHJvZHVjdGlvbiwgY29udGVudCB9ID0gYXJ0aWNsZTtcblxuICBpZiAoaXNXaWRlKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRBcnRpY2xlIGRhdGEtd2lkZT17aXNXaWRlfT5cbiAgICAgICAgPFN0eWxlZExheW91dEl0ZW0+e2NvbnRlbnR9PC9TdHlsZWRMYXlvdXRJdGVtPlxuICAgICAgPC9TdHlsZWRBcnRpY2xlPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRBcnRpY2xlPlxuICAgICAgPFN0eWxlZExheW91dEl0ZW0+XG4gICAgICAgIDxIZWFkaW5nIGlkPXtpZH0gaGVhZGluZ1N0eWxlPVwiaDFcIiBlbGVtZW50PVwiaDFcIiBtYXJnaW49XCJub3JtYWxcIiB0YWJJbmRleD17LTF9PlxuICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgPC9IZWFkaW5nPlxuICAgICAgICA8U3R5bGVkSW50cm9kdWN0aW9uPntpbnRyb2R1Y3Rpb259PC9TdHlsZWRJbnRyb2R1Y3Rpb24+XG4gICAgICA8L1N0eWxlZExheW91dEl0ZW0+XG4gICAgICA8U3R5bGVkTGF5b3V0SXRlbT57Y29udGVudH08L1N0eWxlZExheW91dEl0ZW0+XG4gICAgPC9TdHlsZWRBcnRpY2xlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRnJvbnRwYWdlQXJ0aWNsZTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledLayoutItem = /*#__PURE__*/_styled(LayoutItem, {
+  target: "e10a6yg81",
+  label: "StyledLayoutItem"
+})(process.env.NODE_ENV === "production" ? {
+  name: "bqgf11",
+  styles: ">section{>figure,>iframe{width:100%!important;left:0;}}"
+} : {
+  name: "bqgf11",
+  styles: ">section{>figure,>iframe{width:100%!important;left:0;}}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZyb250cGFnZUFydGljbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCMkMiLCJmaWxlIjoiRnJvbnRwYWdlQXJ0aWNsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBmb250cywgbXEsIHNwYWNpbmcsIHV0aWxzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBBcnRpY2xlIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IExheW91dEl0ZW0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9UeXBvZ3JhcGh5JztcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYXJ0aWNsZTogQXJ0aWNsZTtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIGlkOiBzdHJpbmc7XG4gIGlzV2lkZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZEFydGljbGUgPSBzdHlsZWQuYXJ0aWNsZWBcbiAgbWF4LXdpZHRoOiA3NzNweDtcbiAgJltkYXRhLXdpZGU9J3RydWUnXSB7XG4gICAgbWF4LXdpZHRoOiAxMTAwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZExheW91dEl0ZW0gPSBzdHlsZWQoTGF5b3V0SXRlbSlgXG4gID4gc2VjdGlvbiB7XG4gICAgPiBmaWd1cmUsXG4gICAgPiBpZnJhbWUge1xuICAgICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRJbnRyb2R1Y3Rpb24gPSBzdHlsZWQuZGl2YFxuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubGlnaHR9O1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHtmb250cy5zaXplcygnMjJweCcsICczMHB4Jyl9O1xuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubWVkaXVtbGFyZ2V9O1xuICAgICR7Zm9udHMuc2l6ZXMoJzI2cHgnLCAnMzZweCcpfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEZyb250cGFnZUFydGljbGUgPSAoeyBhcnRpY2xlLCBpZCwgaXNXaWRlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdGl0bGUsIGludHJvZHVjdGlvbiwgY29udGVudCB9ID0gYXJ0aWNsZTtcblxuICBpZiAoaXNXaWRlKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRBcnRpY2xlIGRhdGEtd2lkZT17aXNXaWRlfT5cbiAgICAgICAgPFN0eWxlZExheW91dEl0ZW0+e2NvbnRlbnR9PC9TdHlsZWRMYXlvdXRJdGVtPlxuICAgICAgPC9TdHlsZWRBcnRpY2xlPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRBcnRpY2xlPlxuICAgICAgPFN0eWxlZExheW91dEl0ZW0+XG4gICAgICAgIDxIZWFkaW5nIGlkPXtpZH0gaGVhZGluZ1N0eWxlPVwiaDFcIiBlbGVtZW50PVwiaDFcIiBtYXJnaW49XCJub3JtYWxcIiB0YWJJbmRleD17LTF9PlxuICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgPC9IZWFkaW5nPlxuICAgICAgICA8U3R5bGVkSW50cm9kdWN0aW9uPntpbnRyb2R1Y3Rpb259PC9TdHlsZWRJbnRyb2R1Y3Rpb24+XG4gICAgICA8L1N0eWxlZExheW91dEl0ZW0+XG4gICAgICA8U3R5bGVkTGF5b3V0SXRlbT57Y29udGVudH08L1N0eWxlZExheW91dEl0ZW0+XG4gICAgPC9TdHlsZWRBcnRpY2xlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRnJvbnRwYWdlQXJ0aWNsZTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledIntroduction = /*#__PURE__*/_styled("div", {
+  target: "e10a6yg80",
+  label: "StyledIntroduction"
+})("font-weight:", fonts.weight.light, ";font-family:", fonts.sans, ";margin-top:", spacing.small, ";", fonts.sizes('22px', '30px'), ";", mq.range({
+  from: breakpoints.tablet
+}), "{margin-top:", spacing.mediumlarge, ";", fonts.sizes('26px', '36px'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZyb250cGFnZUFydGljbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDcUMiLCJmaWxlIjoiRnJvbnRwYWdlQXJ0aWNsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBmb250cywgbXEsIHNwYWNpbmcsIHV0aWxzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBBcnRpY2xlIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IExheW91dEl0ZW0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9UeXBvZ3JhcGh5JztcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYXJ0aWNsZTogQXJ0aWNsZTtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIGlkOiBzdHJpbmc7XG4gIGlzV2lkZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZEFydGljbGUgPSBzdHlsZWQuYXJ0aWNsZWBcbiAgbWF4LXdpZHRoOiA3NzNweDtcbiAgJltkYXRhLXdpZGU9J3RydWUnXSB7XG4gICAgbWF4LXdpZHRoOiAxMTAwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZExheW91dEl0ZW0gPSBzdHlsZWQoTGF5b3V0SXRlbSlgXG4gID4gc2VjdGlvbiB7XG4gICAgPiBmaWd1cmUsXG4gICAgPiBpZnJhbWUge1xuICAgICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRJbnRyb2R1Y3Rpb24gPSBzdHlsZWQuZGl2YFxuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubGlnaHR9O1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHtmb250cy5zaXplcygnMjJweCcsICczMHB4Jyl9O1xuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubWVkaXVtbGFyZ2V9O1xuICAgICR7Zm9udHMuc2l6ZXMoJzI2cHgnLCAnMzZweCcpfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEZyb250cGFnZUFydGljbGUgPSAoeyBhcnRpY2xlLCBpZCwgaXNXaWRlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdGl0bGUsIGludHJvZHVjdGlvbiwgY29udGVudCB9ID0gYXJ0aWNsZTtcblxuICBpZiAoaXNXaWRlKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRBcnRpY2xlIGRhdGEtd2lkZT17aXNXaWRlfT5cbiAgICAgICAgPFN0eWxlZExheW91dEl0ZW0+e2NvbnRlbnR9PC9TdHlsZWRMYXlvdXRJdGVtPlxuICAgICAgPC9TdHlsZWRBcnRpY2xlPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRBcnRpY2xlPlxuICAgICAgPFN0eWxlZExheW91dEl0ZW0+XG4gICAgICAgIDxIZWFkaW5nIGlkPXtpZH0gaGVhZGluZ1N0eWxlPVwiaDFcIiBlbGVtZW50PVwiaDFcIiBtYXJnaW49XCJub3JtYWxcIiB0YWJJbmRleD17LTF9PlxuICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgPC9IZWFkaW5nPlxuICAgICAgICA8U3R5bGVkSW50cm9kdWN0aW9uPntpbnRyb2R1Y3Rpb259PC9TdHlsZWRJbnRyb2R1Y3Rpb24+XG4gICAgICA8L1N0eWxlZExheW91dEl0ZW0+XG4gICAgICA8U3R5bGVkTGF5b3V0SXRlbT57Y29udGVudH08L1N0eWxlZExheW91dEl0ZW0+XG4gICAgPC9TdHlsZWRBcnRpY2xlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRnJvbnRwYWdlQXJ0aWNsZTtcbiJdfQ== */"));
+export var FrontpageArticle = function FrontpageArticle(_ref) {
+  var article = _ref.article,
+    id = _ref.id,
+    isWide = _ref.isWide;
+  var title = article.title,
+    introduction = article.introduction,
+    content = article.content;
+  if (isWide) {
+    return _jsx(StyledArticle, {
+      "data-wide": isWide,
+      children: _jsx(StyledLayoutItem, {
+        children: content
+      })
+    });
+  }
+  return _jsxs(StyledArticle, {
+    children: [_jsxs(StyledLayoutItem, {
+      children: [_jsx(Heading, {
+        id: id,
+        headingStyle: "h1",
+        element: "h1",
+        margin: "normal",
+        tabIndex: -1,
+        children: title
+      }), _jsx(StyledIntroduction, {
+        children: introduction
+      })]
+    }), _jsx(StyledLayoutItem, {
+      children: content
+    })]
+  });
+};
+export default FrontpageArticle;

package/es/FrontpageArticle/index.js

@@ -0,0 +1,10 @@
+/**
+ * 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 FrontpageArticle from './FrontpageArticle';
+export default FrontpageArticle;

package/es/Hero/Hero.js

@@ -1,5 +1,6 @@
-var _excluded = ["hasImage"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import _styled from "@emotion/styled/base";
+var _excluded = ["hasImage"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -16,48 +17,57 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  */
 
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import * as contentTypes from '../model/ContentType';
+import { breakpoints, colors, mq, spacing, spacingUnit } from '@ndla/core';
+import { ASSESSMENT_RESOURCES, EXTERNAL_LEARNING_RESOURCES, SOURCE_MATERIAL, SUBJECT, SUBJECT_MATERIAL, TASKS_AND_ACTIVITIES } from '../model/ContentType';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-var classes = new BEMHelper({
-  name: 'hero',
-  prefix: 'c-'
-});
+var StyledDiv = /*#__PURE__*/_styled("div", {
+  target: "e5tcv8a0",
+  label: "StyledDiv"
+})("background-repeat:repeat;background-size:", spacing.normal, ";background-color:", colors.brand.greyLightest, ";", mq.range({
+  from: breakpoints.tablet
+}), "{min-height:246px;padding-bottom:", spacingUnit * 6.5, "px;}&[data-contenttype='subject-material']{background-color:", colors.subjectMaterial.light, ";}&[data-contenttype='tasks-and-activities']{background-color:", colors.tasksAndActivities.background, ";}&[data-contenttype='assessment-resources']{background-color:", colors.assessmentResource.background, ";}&[data-contenttype='subject']{background-color:", colors.subject.light, ";}&[data-contenttype='external-learning-resources']{background-color:", colors.externalLearningResource.background, ";}&[data-contenttype='source-material']{background-color:", colors.sourceMaterial.light, ";}&[data-contenttype='beta']{background-color:", colors.brand.primary, ";}&[data-contenttype='ndla-film has-image'],&[data-contenttype='ndla-film']{background:", colors.ndlaFilm.filmColor, ";", mq.range({
+  from: breakpoints.tablet
+}), "{height:2000px;margin-bottom:-1910px;}&[data-contenttype='ndla-film has-image']{", mq.range({
+  from: breakpoints.tablet
+}), "{margin-bottom:-1800px;@media (min-height: 720px){margin-bottom:-1750px;}@media (min-height: 1020px){margin-bottom:-1700px;}}}", mq.range({
+  until: breakpoints.tablet
+}), "{+div article.c-article{margin-left:-", spacing.normal, ";margin-right:-", spacing.normal, ";margin-top:0;background:", colors.white, ";padding-left:", spacing.normal, ";padding-right:", spacing.normal, ";padding-top:", spacing.large, ";}}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlcm8udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CNEIiLCJmaWxlIjoiSGVyby50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBIVE1MQXR0cmlidXRlcywgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIGNvbG9ycywgbXEsIHNwYWNpbmcsIHNwYWNpbmdVbml0IH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQge1xuICBBU1NFU1NNRU5UX1JFU09VUkNFUyxcbiAgRVhURVJOQUxfTEVBUk5JTkdfUkVTT1VSQ0VTLFxuICBTT1VSQ0VfTUFURVJJQUwsXG4gIFNVQkpFQ1QsXG4gIFNVQkpFQ1RfTUFURVJJQUwsXG4gIFRBU0tTX0FORF9BQ1RJVklUSUVTLFxufSBmcm9tICcuLi9tb2RlbC9Db250ZW50VHlwZSc7XG5cbmNvbnN0IFN0eWxlZERpdiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQtcmVwZWF0OiByZXBlYXQ7XG4gIGJhY2tncm91bmQtc2l6ZTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIG1pbi1oZWlnaHQ6IDI0NnB4O1xuICAgIHBhZGRpbmctYm90dG9tOiAke3NwYWNpbmdVbml0ICogNi41fXB4O1xuICB9XG5cbiAgJltkYXRhLWNvbnRlbnR0eXBlPSdzdWJqZWN0LW1hdGVyaWFsJ10ge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLnN1YmplY3RNYXRlcmlhbC5saWdodH07XG4gIH1cblxuICAmW2RhdGEtY29udGVudHR5cGU9J3Rhc2tzLWFuZC1hY3Rpdml0aWVzJ10ge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLnRhc2tzQW5kQWN0aXZpdGllcy5iYWNrZ3JvdW5kfTtcbiAgfVxuXG4gICZbZGF0YS1jb250ZW50dHlwZT0nYXNzZXNzbWVudC1yZXNvdXJjZXMnXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMuYXNzZXNzbWVudFJlc291cmNlLmJhY2tncm91bmR9O1xuICB9XG5cbiAgJltkYXRhLWNvbnRlbnR0eXBlPSdzdWJqZWN0J10ge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLnN1YmplY3QubGlnaHR9O1xuICB9XG5cbiAgJltkYXRhLWNvbnRlbnR0eXBlPSdleHRlcm5hbC1sZWFybmluZy1yZXNvdXJjZXMnXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMuZXh0ZXJuYWxMZWFybmluZ1Jlc291cmNlLmJhY2tncm91bmR9O1xuICB9XG5cbiAgJltkYXRhLWNvbnRlbnR0eXBlPSdzb3VyY2UtbWF0ZXJpYWwnXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMuc291cmNlTWF0ZXJpYWwubGlnaHR9O1xuICB9XG5cbiAgJltkYXRhLWNvbnRlbnR0eXBlPSdiZXRhJ10ge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICB9XG5cbiAgJltkYXRhLWNvbnRlbnR0eXBlPSduZGxhLWZpbG0gaGFzLWltYWdlJ10sXG4gICZbZGF0YS1jb250ZW50dHlwZT0nbmRsYS1maWxtJ10ge1xuICAgIGJhY2tncm91bmQ6ICR7Y29sb3JzLm5kbGFGaWxtLmZpbG1Db2xvcn07XG5cbiAgICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgICBoZWlnaHQ6IDIwMDBweDtcbiAgICAgIG1hcmdpbi1ib3R0b206IC0xOTEwcHg7XG4gICAgfVxuXG4gICAgJltkYXRhLWNvbnRlbnR0eXBlPSduZGxhLWZpbG0gaGFzLWltYWdlJ10ge1xuICAgICAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgICAgICBtYXJnaW4tYm90dG9tOiAtMTgwMHB4O1xuICAgICAgICBAbWVkaWEgKG1pbi1oZWlnaHQ6IDcyMHB4KSB7XG4gICAgICAgICAgbWFyZ2luLWJvdHRvbTogLTE3NTBweDtcbiAgICAgICAgfVxuICAgICAgICBAbWVkaWEgKG1pbi1oZWlnaHQ6IDEwMjBweCkge1xuICAgICAgICAgIG1hcmdpbi1ib3R0b206IC0xNzAwcHg7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgICAgKyBkaXYgYXJ0aWNsZS5jLWFydGljbGUge1xuICAgICAgICBtYXJnaW4tbGVmdDogLSR7c3BhY2luZy5ub3JtYWx9O1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IC0ke3NwYWNpbmcubm9ybWFsfTtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgYmFja2dyb3VuZDogJHtjb2xvcnMud2hpdGV9O1xuICAgICAgICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgICAgICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcubm9ybWFsfTtcbiAgICAgICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5sYXJnZX07XG4gICAgICB9XG4gICAgfVxuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBIZXJvQ29udGVudFR5cGUgPVxuICB8ICdzdWJqZWN0LW1hdGVyaWFsJ1xuICB8ICd0YXNrcy1hbmQtYWN0aXZpdGllcydcbiAgfCAnYXNzZXNzbWVudC1yZXNvdXJjZXMnXG4gIHwgJ3N1YmplY3QnXG4gIHwgJ2V4dGVybmFsLWxlYXJuaW5nLXJlc291cmNlcydcbiAgfCAnc291cmNlLW1hdGVyaWFsJ1xuICB8ICdsZWFybmluZy1wYXRoJ1xuICB8ICd0b3BpYydcbiAgfCAnYmV0YSdcbiAgfCAnbmRsYS1maWxtJ1xuICB8ICduZGxhLWZpbG0gaGFzLWltYWdlJ1xuICB8ICdmcm9udHBhZ2UtYXJ0aWNsZSc7XG5cbmludGVyZmFjZSBIZXJvUHJvcHMgZXh0ZW5kcyBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4ge1xuICBjb250ZW50VHlwZT86IEhlcm9Db250ZW50VHlwZTtcbn1cblxuZXhwb3J0IGNvbnN0IEhlcm8gPSAoeyBjaGlsZHJlbiwgY29udGVudFR5cGUgfTogSGVyb1Byb3BzKSA9PiAoXG4gIDxTdHlsZWREaXYgZGF0YS1jb250ZW50dHlwZT17Y29udGVudFR5cGV9PntjaGlsZHJlbiB8fCBudWxsfTwvU3R5bGVkRGl2PlxuKTtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIGhhc0ltYWdlPzogYm9vbGVhbjtcbn1cbmV4cG9ydCBjb25zdCBTdWJqZWN0TWF0ZXJpYWxIZXJvID0gKHByb3BzOiBQcm9wcykgPT4gPEhlcm8gY29udGVudFR5cGU9e1NVQkpFQ1RfTUFURVJJQUx9IHsuLi5wcm9wc30gLz47XG5leHBvcnQgY29uc3QgVGFza3NBbmRBY3Rpdml0aWVzSGVybyA9IChwcm9wczogUHJvcHMpID0+IDxIZXJvIGNvbnRlbnRUeXBlPXtUQVNLU19BTkRfQUNUSVZJVElFU30gey4uLnByb3BzfSAvPjtcbmV4cG9ydCBjb25zdCBBc3Nlc3NtZW50UmVzb3VyY2VzSGVybyA9IChwcm9wczogUHJvcHMpID0+IDxIZXJvIGNvbnRlbnRUeXBlPXtBU1NFU1NNRU5UX1JFU09VUkNFU30gey4uLnByb3BzfSAvPjtcbmV4cG9ydCBjb25zdCBTdWJqZWN0SGVybyA9IChwcm9wczogUHJvcHMpID0+IDxIZXJvIGNvbnRlbnRUeXBlPXtTVUJKRUNUfSB7Li4ucHJvcHN9IC8+O1xuZXhwb3J0IGNvbnN0IEV4dGVybmFsTGVhcm5pbmdSZXNvdXJjZXNIZXJvID0gKHByb3BzOiBQcm9wcykgPT4gKFxuICA8SGVybyBjb250ZW50VHlwZT17RVhURVJOQUxfTEVBUk5JTkdfUkVTT1VSQ0VTfSB7Li4ucHJvcHN9IC8+XG4pO1xuZXhwb3J0IGNvbnN0IFNvdXJjZU1hdGVyaWFsSGVybyA9IChwcm9wczogUHJvcHMpID0+IDxIZXJvIGNvbnRlbnRUeXBlPXtTT1VSQ0VfTUFURVJJQUx9IHsuLi5wcm9wc30gLz47XG5leHBvcnQgY29uc3QgTmRsYUZpbG1IZXJvID0gKHsgaGFzSW1hZ2UsIC4uLnJlc3QgfTogUHJvcHMpID0+IChcbiAgPEhlcm8gey4uLnJlc3R9IGNvbnRlbnRUeXBlPXtoYXNJbWFnZSA/ICduZGxhLWZpbG0gaGFzLWltYWdlJyA6ICduZGxhLWZpbG0nfSAvPlxuKTtcbiJdfQ== */"));
 export var Hero = function Hero(_ref) {
   var children = _ref.children,
     contentType = _ref.contentType;
-  return _jsx("div", _objectSpread(_objectSpread({}, classes('', contentType)), {}, {
+  return _jsx(StyledDiv, {
+    "data-contenttype": contentType,
     children: children || null
-  }));
+  });
 };
 export var SubjectMaterialHero = function SubjectMaterialHero(props) {
   return _jsx(Hero, _objectSpread({
-    contentType: contentTypes.SUBJECT_MATERIAL
+    contentType: SUBJECT_MATERIAL
   }, props));
 };
 export var TasksAndActivitiesHero = function TasksAndActivitiesHero(props) {
   return _jsx(Hero, _objectSpread({
-    contentType: contentTypes.TASKS_AND_ACTIVITIES
+    contentType: TASKS_AND_ACTIVITIES
   }, props));
 };
 export var AssessmentResourcesHero = function AssessmentResourcesHero(props) {
   return _jsx(Hero, _objectSpread({
-    contentType: contentTypes.ASSESSMENT_RESOURCES
+    contentType: ASSESSMENT_RESOURCES
   }, props));
 };
 export var SubjectHero = function SubjectHero(props) {
   return _jsx(Hero, _objectSpread({
-    contentType: contentTypes.SUBJECT
+    contentType: SUBJECT
   }, props));
 };
 export var ExternalLearningResourcesHero = function ExternalLearningResourcesHero(props) {
   return _jsx(Hero, _objectSpread({
-    contentType: contentTypes.EXTERNAL_LEARNING_RESOURCES
+    contentType: EXTERNAL_LEARNING_RESOURCES
   }, props));
 };
 export var SourceMaterialHero = function SourceMaterialHero(props) {
   return _jsx(Hero, _objectSpread({
-    contentType: contentTypes.SOURCE_MATERIAL
+    contentType: SOURCE_MATERIAL
   }, props));
 };
 export var NdlaFilmHero = function NdlaFilmHero(_ref2) {

package/es/Hero/HeroContent.js

@@ -0,0 +1,16 @@
+import _styled from "@emotion/styled/base";
+/**
+ * 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 { spacing, mq, breakpoints } from '@ndla/core';
+export var HeroContent = /*#__PURE__*/_styled("div", {
+  target: "ejq412a0",
+  label: "HeroContent"
+})("display:flex;flex-wrap:wrap;align-items:flex-end;padding:", spacing.small, " 0 ", spacing.small, ";z-index:9;", mq.range({
+  from: breakpoints.tablet
+}), "{min-height:90px;padding-bottom:", spacing.xxsmall, ";&[data-image='true']{min-height:190px;@media (min-height: 720px){min-height:240px;}@media (min-height: 1020px){min-height:290px;}}}&[data-film='true']{.c-breadcrumb__item,.c-breadcrumb__item--home:after,a,a:focus,a:hover{color:#fff;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlcm9Db250ZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXcUMiLCJmaWxlIjoiSGVyb0NvbnRlbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBtcSwgYnJlYWtwb2ludHMgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuZXhwb3J0IGNvbnN0IEhlcm9Db250ZW50ID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC13cmFwOiB3cmFwO1xuICBhbGlnbi1pdGVtczogZmxleC1lbmQ7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gMCAke3NwYWNpbmcuc21hbGx9O1xuICB6LWluZGV4OiA5O1xuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBtaW4taGVpZ2h0OiA5MHB4O1xuICAgIHBhZGRpbmctYm90dG9tOiAke3NwYWNpbmcueHhzbWFsbH07XG5cbiAgICAmW2RhdGEtaW1hZ2U9J3RydWUnXSB7XG4gICAgICBtaW4taGVpZ2h0OiAxOTBweDtcbiAgICAgIEBtZWRpYSAobWluLWhlaWdodDogNzIwcHgpIHtcbiAgICAgICAgbWluLWhlaWdodDogMjQwcHg7XG4gICAgICB9XG4gICAgICBAbWVkaWEgKG1pbi1oZWlnaHQ6IDEwMjBweCkge1xuICAgICAgICBtaW4taGVpZ2h0OiAyOTBweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAmW2RhdGEtZmlsbT0ndHJ1ZSddIHtcbiAgICAuYy1icmVhZGNydW1iX19pdGVtLFxuICAgIC5jLWJyZWFkY3J1bWJfX2l0ZW0tLWhvbWU6YWZ0ZXIsXG4gICAgYSxcbiAgICBhOmZvY3VzLFxuICAgIGE6aG92ZXIge1xuICAgICAgY29sb3I6ICNmZmY7XG4gICAgfVxuICB9XG5gO1xuIl19 */"));

package/es/Hero/index.js

@@ -6,4 +6,5 @@
  *
  */
 
-export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero } from './Hero';
+export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero } from './Hero';
+export { HeroContent } from './HeroContent';

package/es/Image/Image.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 import _styled from "@emotion/styled/base";
-var _excluded = ["alt", "src", "lazyLoad", "lazyLoadSrc", "crop", "focalPoint", "contentType", "sizes", "expandButton", "fallbackWidth"];
+var _excluded = ["alt", "src", "lazyLoad", "lazyLoadSrc", "crop", "focalPoint", "contentType", "sizes", "expandButton", "fallbackWidth", "inGrid"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -18,7 +18,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import React from 'react';
-import { css } from '@emotion/react';
+import { colors } from '@ndla/core';
 import LazyLoadImage from './LazyLoadImage';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
@@ -37,45 +37,49 @@ var getSrcSet = function getSrcSet(src, crop, focalPoint) {
     return "".concat(src, "?").concat(makeSrcQueryString(width, crop, focalPoint), " ").concat(width, "w");
   }).join(', ');
 };
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1u5anae-StyledImageWrapper",
-  styles: "display:flex justify-content:center;label:StyledImageWrapper;"
-} : {
-  name: "1u5anae-StyledImageWrapper",
-  styles: "display:flex justify-content:center;label:StyledImageWrapper;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRFMiLCJmaWxlIjoiSW1hZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IExhenlMb2FkSW1hZ2UgZnJvbSAnLi9MYXp5TG9hZEltYWdlJztcblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUNyb3Age1xuICBzdGFydFg6IG51bWJlcjtcbiAgc3RhcnRZOiBudW1iZXI7XG4gIGVuZFg6IG51bWJlcjtcbiAgZW5kWTogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEltYWdlRm9jYWxQb2ludCB7XG4gIHg6IG51bWJlcjtcbiAgeTogbnVtYmVyO1xufVxuXG5leHBvcnQgY29uc3QgbWFrZVNyY1F1ZXJ5U3RyaW5nID0gKHdpZHRoOiBudW1iZXIgfCB1bmRlZmluZWQsIGNyb3A/OiBJbWFnZUNyb3AsIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQpID0+IHtcbiAgY29uc3Qgd2lkdGhQYXJhbXMgPSB3aWR0aCAmJiBgd2lkdGg9JHt3aWR0aH1gO1xuICBjb25zdCBjcm9wUGFyYW1zID1cbiAgICBjcm9wICYmIGBjcm9wU3RhcnRYPSR7Y3JvcC5zdGFydFh9JmNyb3BFbmRYPSR7Y3JvcC5lbmRYfSZjcm9wU3RhcnRZPSR7Y3JvcC5zdGFydFl9JmNyb3BFbmRZPSR7Y3JvcC5lbmRZfWA7XG4gIGNvbnN0IGZvY2FsUG9pbnRQYXJhbXMgPSBmb2NhbFBvaW50ICYmIGBmb2NhbFg9JHtmb2NhbFBvaW50Lnh9JmZvY2FsWT0ke2ZvY2FsUG9pbnQueX1gO1xuICBjb25zdCBwYXJhbXMgPSBbd2lkdGhQYXJhbXMsIGNyb3BQYXJhbXMsIGZvY2FsUG9pbnRQYXJhbXNdLmZpbHRlcigocCkgPT4gcCkuam9pbignJicpO1xuXG4gIHJldHVybiBwYXJhbXM7XG59O1xuXG5jb25zdCBnZXRTcmNTZXQgPSAoc3JjOiBzdHJpbmcsIGNyb3A6IEltYWdlQ3JvcCB8IHVuZGVmaW5lZCwgZm9jYWxQb2ludDogSW1hZ2VGb2NhbFBvaW50IHwgdW5kZWZpbmVkKSA9PiB7XG4gIGNvbnN0IHdpZHRocyA9IFsyNzIwLCAyMDgwLCAxNzYwLCAxNDQwLCAxMTIwLCAxMDAwLCA5NjAsIDgwMCwgNjQwLCA0ODAsIDMyMCwgMjQwLCAxODBdO1xuICByZXR1cm4gd2lkdGhzLm1hcCgod2lkdGgpID0+IGAke3NyY30/JHttYWtlU3JjUXVlcnlTdHJpbmcod2lkdGgsIGNyb3AsIGZvY2FsUG9pbnQpfSAke3dpZHRofXdgKS5qb2luKCcsICcpO1xufTtcblxuaW50ZXJmYWNlIFN0eWxlZEltYWdlV3JhcHBlclByb3BzIHtcbiAgc3ZnPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdjxTdHlsZWRJbWFnZVdyYXBwZXJQcm9wcz5gXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgJHsoeyBzdmcgfSkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICBzdmcgJiZcbiAgICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXhcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGBcbiAgICApO1xuICB9fVxuYDtcbmludGVyZmFjZSBQcm9wcyB7XG4gIGFsdDogc3RyaW5nO1xuICBzcmM6IHN0cmluZztcbiAgc2l6ZXM/OiBzdHJpbmc7XG4gIGZhbGxiYWNrV2lkdGg/OiBudW1iZXI7XG4gIGNvbnRlbnRUeXBlPzogc3RyaW5nO1xuICBzcmNTZXQ/OiBzdHJpbmc7XG4gIGxhenlMb2FkPzogYm9vbGVhbjtcbiAgbGF6eUxvYWRTcmM/OiBzdHJpbmc7XG4gIGV4cGFuZEJ1dHRvbj86IFJlYWN0Tm9kZTtcbiAgY3JvcD86IEltYWdlQ3JvcDtcbiAgZm9jYWxQb2ludD86IEltYWdlRm9jYWxQb2ludDtcbn1cblxuY29uc3QgSW1hZ2UgPSAoe1xuICBhbHQsXG4gIHNyYyxcbiAgbGF6eUxvYWQsXG4gIGxhenlMb2FkU3JjLFxuICBjcm9wLFxuICBmb2NhbFBvaW50LFxuICBjb250ZW50VHlwZSxcbiAgc2l6ZXMgPSAnKG1pbi13aWR0aDogMTAyNHB4KSAxMDI0cHgsIDEwMHZ3JyxcbiAgZXhwYW5kQnV0dG9uLFxuICBmYWxsYmFja1dpZHRoID0gMTAyNCxcbiAgLi4ucmVzdFxufTogUHJvcHMpID0+IHtcbiAgY29uc3Qgc3JjU2V0ID0gcmVzdC5zcmNTZXQgPz8gZ2V0U3JjU2V0KHNyYywgY3JvcCwgZm9jYWxQb2ludCk7XG4gIGNvbnN0IHF1ZXJ5U3RyaW5nID0gbWFrZVNyY1F1ZXJ5U3RyaW5nKGZhbGxiYWNrV2lkdGgsIGNyb3AsIGZvY2FsUG9pbnQpO1xuXG4gIGlmIChjb250ZW50VHlwZSAmJiBjb250ZW50VHlwZSA9PT0gJ2ltYWdlL2dpZicpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgPGltZyBhbHQ9e2FsdH0gc3JjPXtgJHtzcmN9YH0gey4uLnJlc3R9IC8+XG4gICAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgICApO1xuICB9XG5cbiAgaWYgKGxhenlMb2FkKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxMYXp5TG9hZEltYWdlXG4gICAgICAgICAgYWx0PXthbHR9XG4gICAgICAgICAgc3JjPXtgJHtzcmN9PyR7cXVlcnlTdHJpbmd9YH1cbiAgICAgICAgICBzcmNTZXQ9e3NyY1NldH1cbiAgICAgICAgICBzaXplcz17c2l6ZXN9XG4gICAgICAgICAgbGF6eUxvYWRTcmM9e2xhenlMb2FkU3JjfVxuICAgICAgICAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEltYWdlV3JhcHBlciBzdmc9e2NvbnRlbnRUeXBlID09PSAnaW1hZ2Uvc3ZnK3htbCd9PlxuICAgICAgPHBpY3R1cmU+XG4gICAgICAgIDxzb3VyY2UgdHlwZT17Y29udGVudFR5cGV9IHNyY1NldD17c3JjU2V0fSBzaXplcz17c2l6ZXN9IC8+XG4gICAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17YCR7c3JjfT8ke3F1ZXJ5U3RyaW5nfWB9IHsuLi5yZXN0fSAvPlxuICAgICAgPC9waWN0dXJlPlxuICAgICAge2V4cGFuZEJ1dHRvbn1cbiAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEltYWdlO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 var StyledImageWrapper = /*#__PURE__*/_styled("div", {
-  target: "ejtxxex0",
+  target: "ejtxxex1",
   label: "StyledImageWrapper"
-})("position:relative;", function (_ref2) {
-  var svg = _ref2.svg;
-  return svg && _ref;
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QzhEIiwiZmlsZSI6IkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBMYXp5TG9hZEltYWdlIGZyb20gJy4vTGF6eUxvYWRJbWFnZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW1hZ2VDcm9wIHtcbiAgc3RhcnRYOiBudW1iZXI7XG4gIHN0YXJ0WTogbnVtYmVyO1xuICBlbmRYOiBudW1iZXI7XG4gIGVuZFk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUZvY2FsUG9pbnQge1xuICB4OiBudW1iZXI7XG4gIHk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IG1ha2VTcmNRdWVyeVN0cmluZyA9ICh3aWR0aDogbnVtYmVyIHwgdW5kZWZpbmVkLCBjcm9wPzogSW1hZ2VDcm9wLCBmb2NhbFBvaW50PzogSW1hZ2VGb2NhbFBvaW50KSA9PiB7XG4gIGNvbnN0IHdpZHRoUGFyYW1zID0gd2lkdGggJiYgYHdpZHRoPSR7d2lkdGh9YDtcbiAgY29uc3QgY3JvcFBhcmFtcyA9XG4gICAgY3JvcCAmJiBgY3JvcFN0YXJ0WD0ke2Nyb3Auc3RhcnRYfSZjcm9wRW5kWD0ke2Nyb3AuZW5kWH0mY3JvcFN0YXJ0WT0ke2Nyb3Auc3RhcnRZfSZjcm9wRW5kWT0ke2Nyb3AuZW5kWX1gO1xuICBjb25zdCBmb2NhbFBvaW50UGFyYW1zID0gZm9jYWxQb2ludCAmJiBgZm9jYWxYPSR7Zm9jYWxQb2ludC54fSZmb2NhbFk9JHtmb2NhbFBvaW50Lnl9YDtcbiAgY29uc3QgcGFyYW1zID0gW3dpZHRoUGFyYW1zLCBjcm9wUGFyYW1zLCBmb2NhbFBvaW50UGFyYW1zXS5maWx0ZXIoKHApID0+IHApLmpvaW4oJyYnKTtcblxuICByZXR1cm4gcGFyYW1zO1xufTtcblxuY29uc3QgZ2V0U3JjU2V0ID0gKHNyYzogc3RyaW5nLCBjcm9wOiBJbWFnZUNyb3AgfCB1bmRlZmluZWQsIGZvY2FsUG9pbnQ6IEltYWdlRm9jYWxQb2ludCB8IHVuZGVmaW5lZCkgPT4ge1xuICBjb25zdCB3aWR0aHMgPSBbMjcyMCwgMjA4MCwgMTc2MCwgMTQ0MCwgMTEyMCwgMTAwMCwgOTYwLCA4MDAsIDY0MCwgNDgwLCAzMjAsIDI0MCwgMTgwXTtcbiAgcmV0dXJuIHdpZHRocy5tYXAoKHdpZHRoKSA9PiBgJHtzcmN9PyR7bWFrZVNyY1F1ZXJ5U3RyaW5nKHdpZHRoLCBjcm9wLCBmb2NhbFBvaW50KX0gJHt3aWR0aH13YCkuam9pbignLCAnKTtcbn07XG5cbmludGVyZmFjZSBTdHlsZWRJbWFnZVdyYXBwZXJQcm9wcyB7XG4gIHN2Zz86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXY8U3R5bGVkSW1hZ2VXcmFwcGVyUHJvcHM+YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICR7KHsgc3ZnIH0pID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgc3ZnICYmXG4gICAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBmbGV4XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgXG4gICAgKTtcbiAgfX1cbmA7XG5pbnRlcmZhY2UgUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG4gIHNpemVzPzogc3RyaW5nO1xuICBmYWxsYmFja1dpZHRoPzogbnVtYmVyO1xuICBjb250ZW50VHlwZT86IHN0cmluZztcbiAgc3JjU2V0Pzogc3RyaW5nO1xuICBsYXp5TG9hZD86IGJvb2xlYW47XG4gIGxhenlMb2FkU3JjPzogc3RyaW5nO1xuICBleHBhbmRCdXR0b24/OiBSZWFjdE5vZGU7XG4gIGNyb3A/OiBJbWFnZUNyb3A7XG4gIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQ7XG59XG5cbmNvbnN0IEltYWdlID0gKHtcbiAgYWx0LFxuICBzcmMsXG4gIGxhenlMb2FkLFxuICBsYXp5TG9hZFNyYyxcbiAgY3JvcCxcbiAgZm9jYWxQb2ludCxcbiAgY29udGVudFR5cGUsXG4gIHNpemVzID0gJyhtaW4td2lkdGg6IDEwMjRweCkgMTAyNHB4LCAxMDB2dycsXG4gIGV4cGFuZEJ1dHRvbixcbiAgZmFsbGJhY2tXaWR0aCA9IDEwMjQsXG4gIC4uLnJlc3Rcbn06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHNyY1NldCA9IHJlc3Quc3JjU2V0ID8/IGdldFNyY1NldChzcmMsIGNyb3AsIGZvY2FsUG9pbnQpO1xuICBjb25zdCBxdWVyeVN0cmluZyA9IG1ha2VTcmNRdWVyeVN0cmluZyhmYWxsYmFja1dpZHRoLCBjcm9wLCBmb2NhbFBvaW50KTtcblxuICBpZiAoY29udGVudFR5cGUgJiYgY29udGVudFR5cGUgPT09ICdpbWFnZS9naWYnKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17YCR7c3JjfWB9IHsuLi5yZXN0fSAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgKTtcbiAgfVxuXG4gIGlmIChsYXp5TG9hZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgICA8TGF6eUxvYWRJbWFnZVxuICAgICAgICAgIGFsdD17YWx0fVxuICAgICAgICAgIHNyYz17YCR7c3JjfT8ke3F1ZXJ5U3RyaW5nfWB9XG4gICAgICAgICAgc3JjU2V0PXtzcmNTZXR9XG4gICAgICAgICAgc2l6ZXM9e3NpemVzfVxuICAgICAgICAgIGxhenlMb2FkU3JjPXtsYXp5TG9hZFNyY31cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRJbWFnZVdyYXBwZXIgc3ZnPXtjb250ZW50VHlwZSA9PT0gJ2ltYWdlL3N2Zyt4bWwnfT5cbiAgICAgIDxwaWN0dXJlPlxuICAgICAgICA8c291cmNlIHR5cGU9e2NvbnRlbnRUeXBlfSBzcmNTZXQ9e3NyY1NldH0gc2l6ZXM9e3NpemVzfSAvPlxuICAgICAgICA8aW1nIGFsdD17YWx0fSBzcmM9e2Ake3NyY30/JHtxdWVyeVN0cmluZ31gfSB7Li4ucmVzdH0gLz5cbiAgICAgIDwvcGljdHVyZT5cbiAgICAgIHtleHBhbmRCdXR0b259XG4gICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJbWFnZTtcbiJdfQ== */"));
-var Image = function Image(_ref3) {
+})("position:relative;&[data-svg='true']{display:flex;justify-content:center;}&[data-in-grid='true']{border:1px solid ", colors.brand.tertiary, ";border-bottom:0;border-radius:4px;border-bottom-left-radius:0;border-bottom-right-radius:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Q3FDIiwiZmlsZSI6IkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IExhenlMb2FkSW1hZ2UgZnJvbSAnLi9MYXp5TG9hZEltYWdlJztcblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUNyb3Age1xuICBzdGFydFg6IG51bWJlcjtcbiAgc3RhcnRZOiBudW1iZXI7XG4gIGVuZFg6IG51bWJlcjtcbiAgZW5kWTogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEltYWdlRm9jYWxQb2ludCB7XG4gIHg6IG51bWJlcjtcbiAgeTogbnVtYmVyO1xufVxuXG5leHBvcnQgY29uc3QgbWFrZVNyY1F1ZXJ5U3RyaW5nID0gKHdpZHRoOiBudW1iZXIgfCB1bmRlZmluZWQsIGNyb3A/OiBJbWFnZUNyb3AsIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQpID0+IHtcbiAgY29uc3Qgd2lkdGhQYXJhbXMgPSB3aWR0aCAmJiBgd2lkdGg9JHt3aWR0aH1gO1xuICBjb25zdCBjcm9wUGFyYW1zID1cbiAgICBjcm9wICYmIGBjcm9wU3RhcnRYPSR7Y3JvcC5zdGFydFh9JmNyb3BFbmRYPSR7Y3JvcC5lbmRYfSZjcm9wU3RhcnRZPSR7Y3JvcC5zdGFydFl9JmNyb3BFbmRZPSR7Y3JvcC5lbmRZfWA7XG4gIGNvbnN0IGZvY2FsUG9pbnRQYXJhbXMgPSBmb2NhbFBvaW50ICYmIGBmb2NhbFg9JHtmb2NhbFBvaW50Lnh9JmZvY2FsWT0ke2ZvY2FsUG9pbnQueX1gO1xuICBjb25zdCBwYXJhbXMgPSBbd2lkdGhQYXJhbXMsIGNyb3BQYXJhbXMsIGZvY2FsUG9pbnRQYXJhbXNdLmZpbHRlcigocCkgPT4gcCkuam9pbignJicpO1xuXG4gIHJldHVybiBwYXJhbXM7XG59O1xuXG5jb25zdCBnZXRTcmNTZXQgPSAoc3JjOiBzdHJpbmcsIGNyb3A6IEltYWdlQ3JvcCB8IHVuZGVmaW5lZCwgZm9jYWxQb2ludDogSW1hZ2VGb2NhbFBvaW50IHwgdW5kZWZpbmVkKSA9PiB7XG4gIGNvbnN0IHdpZHRocyA9IFsyNzIwLCAyMDgwLCAxNzYwLCAxNDQwLCAxMTIwLCAxMDAwLCA5NjAsIDgwMCwgNjQwLCA0ODAsIDMyMCwgMjQwLCAxODBdO1xuICByZXR1cm4gd2lkdGhzLm1hcCgod2lkdGgpID0+IGAke3NyY30/JHttYWtlU3JjUXVlcnlTdHJpbmcod2lkdGgsIGNyb3AsIGZvY2FsUG9pbnQpfSAke3dpZHRofXdgKS5qb2luKCcsICcpO1xufTtcblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICZbZGF0YS1zdmc9J3RydWUnXSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxuICAmW2RhdGEtaW4tZ3JpZD0ndHJ1ZSddIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC50ZXJ0aWFyeX07XG4gICAgYm9yZGVyLWJvdHRvbTogMDtcbiAgICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogMDtcbiAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogMDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICAmW2RhdGEtaW4tZ3JpZD0ndHJ1ZSddIHtcbiAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogMDtcbiAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogMDtcbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYWx0OiBzdHJpbmc7XG4gIHNyYzogc3RyaW5nO1xuICBzaXplcz86IHN0cmluZztcbiAgZmFsbGJhY2tXaWR0aD86IG51bWJlcjtcbiAgY29udGVudFR5cGU/OiBzdHJpbmc7XG4gIHNyY1NldD86IHN0cmluZztcbiAgbGF6eUxvYWQ/OiBib29sZWFuO1xuICBsYXp5TG9hZFNyYz86IHN0cmluZztcbiAgZXhwYW5kQnV0dG9uPzogUmVhY3ROb2RlO1xuICBjcm9wPzogSW1hZ2VDcm9wO1xuICBmb2NhbFBvaW50PzogSW1hZ2VGb2NhbFBvaW50O1xuICBpbkdyaWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBJbWFnZSA9ICh7XG4gIGFsdCxcbiAgc3JjLFxuICBsYXp5TG9hZCxcbiAgbGF6eUxvYWRTcmMsXG4gIGNyb3AsXG4gIGZvY2FsUG9pbnQsXG4gIGNvbnRlbnRUeXBlLFxuICBzaXplcyA9ICcobWluLXdpZHRoOiAxMDI0cHgpIDEwMjRweCwgMTAwdncnLFxuICBleHBhbmRCdXR0b24sXG4gIGZhbGxiYWNrV2lkdGggPSAxMDI0LFxuICBpbkdyaWQsXG4gIC4uLnJlc3Rcbn06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHNyY1NldCA9IHJlc3Quc3JjU2V0ID8/IGdldFNyY1NldChzcmMsIGNyb3AsIGZvY2FsUG9pbnQpO1xuICBjb25zdCBxdWVyeVN0cmluZyA9IG1ha2VTcmNRdWVyeVN0cmluZyhmYWxsYmFja1dpZHRoLCBjcm9wLCBmb2NhbFBvaW50KTtcblxuICBpZiAoY29udGVudFR5cGUgJiYgY29udGVudFR5cGUgPT09ICdpbWFnZS9naWYnKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXIgZGF0YS1pbi1ncmlkPXtpbkdyaWR9PlxuICAgICAgICA8U3R5bGVkSW1hZ2UgYWx0PXthbHR9IHNyYz17YCR7c3JjfWB9IHsuLi5yZXN0fSBkYXRhLWluLWdyaWQ9e2luR3JpZH0gLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICBpZiAobGF6eUxvYWQpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgPExhenlMb2FkSW1hZ2VcbiAgICAgICAgICBhbHQ9e2FsdH1cbiAgICAgICAgICBzcmM9e2Ake3NyY30/JHtxdWVyeVN0cmluZ31gfVxuICAgICAgICAgIHNyY1NldD17c3JjU2V0fVxuICAgICAgICAgIHNpemVzPXtzaXplc31cbiAgICAgICAgICBsYXp5TG9hZFNyYz17bGF6eUxvYWRTcmN9XG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyIGRhdGEtc3ZnPXtjb250ZW50VHlwZSA9PT0gJ2ltYWdlL3N2Zyt4bWwnfSBkYXRhLWluLWdyaWQ9e2luR3JpZH0+XG4gICAgICA8cGljdHVyZT5cbiAgICAgICAgPHNvdXJjZSB0eXBlPXtjb250ZW50VHlwZX0gc3JjU2V0PXtzcmNTZXR9IHNpemVzPXtzaXplc30gLz5cbiAgICAgICAgPFN0eWxlZEltYWdlIGFsdD17YWx0fSBzcmM9e2Ake3NyY30/JHtxdWVyeVN0cmluZ31gfSB7Li4ucmVzdH0gZGF0YS1pbi1ncmlkPXtpbkdyaWR9IC8+XG4gICAgICA8L3BpY3R1cmU+XG4gICAgICB7ZXhwYW5kQnV0dG9ufVxuICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSW1hZ2U7XG4iXX0= */"));
+var StyledImage = /*#__PURE__*/_styled("img", {
+  target: "ejtxxex0",
+  label: "StyledImage"
+})(process.env.NODE_ENV === "production" ? {
+  name: "m12tii",
+  styles: "&[data-in-grid='true']{border-radius:3px;border-bottom-left-radius:0;border-bottom-right-radius:0;}"
+} : {
+  name: "m12tii",
+  styles: "&[data-in-grid='true']{border-radius:3px;border-bottom-left-radius:0;border-bottom-right-radius:0;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3RDhCIiwiZmlsZSI6IkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IExhenlMb2FkSW1hZ2UgZnJvbSAnLi9MYXp5TG9hZEltYWdlJztcblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUNyb3Age1xuICBzdGFydFg6IG51bWJlcjtcbiAgc3RhcnRZOiBudW1iZXI7XG4gIGVuZFg6IG51bWJlcjtcbiAgZW5kWTogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEltYWdlRm9jYWxQb2ludCB7XG4gIHg6IG51bWJlcjtcbiAgeTogbnVtYmVyO1xufVxuXG5leHBvcnQgY29uc3QgbWFrZVNyY1F1ZXJ5U3RyaW5nID0gKHdpZHRoOiBudW1iZXIgfCB1bmRlZmluZWQsIGNyb3A/OiBJbWFnZUNyb3AsIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQpID0+IHtcbiAgY29uc3Qgd2lkdGhQYXJhbXMgPSB3aWR0aCAmJiBgd2lkdGg9JHt3aWR0aH1gO1xuICBjb25zdCBjcm9wUGFyYW1zID1cbiAgICBjcm9wICYmIGBjcm9wU3RhcnRYPSR7Y3JvcC5zdGFydFh9JmNyb3BFbmRYPSR7Y3JvcC5lbmRYfSZjcm9wU3RhcnRZPSR7Y3JvcC5zdGFydFl9JmNyb3BFbmRZPSR7Y3JvcC5lbmRZfWA7XG4gIGNvbnN0IGZvY2FsUG9pbnRQYXJhbXMgPSBmb2NhbFBvaW50ICYmIGBmb2NhbFg9JHtmb2NhbFBvaW50Lnh9JmZvY2FsWT0ke2ZvY2FsUG9pbnQueX1gO1xuICBjb25zdCBwYXJhbXMgPSBbd2lkdGhQYXJhbXMsIGNyb3BQYXJhbXMsIGZvY2FsUG9pbnRQYXJhbXNdLmZpbHRlcigocCkgPT4gcCkuam9pbignJicpO1xuXG4gIHJldHVybiBwYXJhbXM7XG59O1xuXG5jb25zdCBnZXRTcmNTZXQgPSAoc3JjOiBzdHJpbmcsIGNyb3A6IEltYWdlQ3JvcCB8IHVuZGVmaW5lZCwgZm9jYWxQb2ludDogSW1hZ2VGb2NhbFBvaW50IHwgdW5kZWZpbmVkKSA9PiB7XG4gIGNvbnN0IHdpZHRocyA9IFsyNzIwLCAyMDgwLCAxNzYwLCAxNDQwLCAxMTIwLCAxMDAwLCA5NjAsIDgwMCwgNjQwLCA0ODAsIDMyMCwgMjQwLCAxODBdO1xuICByZXR1cm4gd2lkdGhzLm1hcCgod2lkdGgpID0+IGAke3NyY30/JHttYWtlU3JjUXVlcnlTdHJpbmcod2lkdGgsIGNyb3AsIGZvY2FsUG9pbnQpfSAke3dpZHRofXdgKS5qb2luKCcsICcpO1xufTtcblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICZbZGF0YS1zdmc9J3RydWUnXSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxuICAmW2RhdGEtaW4tZ3JpZD0ndHJ1ZSddIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC50ZXJ0aWFyeX07XG4gICAgYm9yZGVyLWJvdHRvbTogMDtcbiAgICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogMDtcbiAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogMDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICAmW2RhdGEtaW4tZ3JpZD0ndHJ1ZSddIHtcbiAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogMDtcbiAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogMDtcbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYWx0OiBzdHJpbmc7XG4gIHNyYzogc3RyaW5nO1xuICBzaXplcz86IHN0cmluZztcbiAgZmFsbGJhY2tXaWR0aD86IG51bWJlcjtcbiAgY29udGVudFR5cGU/OiBzdHJpbmc7XG4gIHNyY1NldD86IHN0cmluZztcbiAgbGF6eUxvYWQ/OiBib29sZWFuO1xuICBsYXp5TG9hZFNyYz86IHN0cmluZztcbiAgZXhwYW5kQnV0dG9uPzogUmVhY3ROb2RlO1xuICBjcm9wPzogSW1hZ2VDcm9wO1xuICBmb2NhbFBvaW50PzogSW1hZ2VGb2NhbFBvaW50O1xuICBpbkdyaWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBJbWFnZSA9ICh7XG4gIGFsdCxcbiAgc3JjLFxuICBsYXp5TG9hZCxcbiAgbGF6eUxvYWRTcmMsXG4gIGNyb3AsXG4gIGZvY2FsUG9pbnQsXG4gIGNvbnRlbnRUeXBlLFxuICBzaXplcyA9ICcobWluLXdpZHRoOiAxMDI0cHgpIDEwMjRweCwgMTAwdncnLFxuICBleHBhbmRCdXR0b24sXG4gIGZhbGxiYWNrV2lkdGggPSAxMDI0LFxuICBpbkdyaWQsXG4gIC4uLnJlc3Rcbn06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHNyY1NldCA9IHJlc3Quc3JjU2V0ID8/IGdldFNyY1NldChzcmMsIGNyb3AsIGZvY2FsUG9pbnQpO1xuICBjb25zdCBxdWVyeVN0cmluZyA9IG1ha2VTcmNRdWVyeVN0cmluZyhmYWxsYmFja1dpZHRoLCBjcm9wLCBmb2NhbFBvaW50KTtcblxuICBpZiAoY29udGVudFR5cGUgJiYgY29udGVudFR5cGUgPT09ICdpbWFnZS9naWYnKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXIgZGF0YS1pbi1ncmlkPXtpbkdyaWR9PlxuICAgICAgICA8U3R5bGVkSW1hZ2UgYWx0PXthbHR9IHNyYz17YCR7c3JjfWB9IHsuLi5yZXN0fSBkYXRhLWluLWdyaWQ9e2luR3JpZH0gLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICBpZiAobGF6eUxvYWQpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgPExhenlMb2FkSW1hZ2VcbiAgICAgICAgICBhbHQ9e2FsdH1cbiAgICAgICAgICBzcmM9e2Ake3NyY30/JHtxdWVyeVN0cmluZ31gfVxuICAgICAgICAgIHNyY1NldD17c3JjU2V0fVxuICAgICAgICAgIHNpemVzPXtzaXplc31cbiAgICAgICAgICBsYXp5TG9hZFNyYz17bGF6eUxvYWRTcmN9XG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyIGRhdGEtc3ZnPXtjb250ZW50VHlwZSA9PT0gJ2ltYWdlL3N2Zyt4bWwnfSBkYXRhLWluLWdyaWQ9e2luR3JpZH0+XG4gICAgICA8cGljdHVyZT5cbiAgICAgICAgPHNvdXJjZSB0eXBlPXtjb250ZW50VHlwZX0gc3JjU2V0PXtzcmNTZXR9IHNpemVzPXtzaXplc30gLz5cbiAgICAgICAgPFN0eWxlZEltYWdlIGFsdD17YWx0fSBzcmM9e2Ake3NyY30/JHtxdWVyeVN0cmluZ31gfSB7Li4ucmVzdH0gZGF0YS1pbi1ncmlkPXtpbkdyaWR9IC8+XG4gICAgICA8L3BpY3R1cmU+XG4gICAgICB7ZXhwYW5kQnV0dG9ufVxuICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSW1hZ2U7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var Image = function Image(_ref) {
   var _rest$srcSet;
-  var alt = _ref3.alt,
-    src = _ref3.src,
-    lazyLoad = _ref3.lazyLoad,
-    lazyLoadSrc = _ref3.lazyLoadSrc,
-    crop = _ref3.crop,
-    focalPoint = _ref3.focalPoint,
-    contentType = _ref3.contentType,
-    _ref3$sizes = _ref3.sizes,
-    sizes = _ref3$sizes === void 0 ? '(min-width: 1024px) 1024px, 100vw' : _ref3$sizes,
-    expandButton = _ref3.expandButton,
-    _ref3$fallbackWidth = _ref3.fallbackWidth,
-    fallbackWidth = _ref3$fallbackWidth === void 0 ? 1024 : _ref3$fallbackWidth,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+  var alt = _ref.alt,
+    src = _ref.src,
+    lazyLoad = _ref.lazyLoad,
+    lazyLoadSrc = _ref.lazyLoadSrc,
+    crop = _ref.crop,
+    focalPoint = _ref.focalPoint,
+    contentType = _ref.contentType,
+    _ref$sizes = _ref.sizes,
+    sizes = _ref$sizes === void 0 ? '(min-width: 1024px) 1024px, 100vw' : _ref$sizes,
+    expandButton = _ref.expandButton,
+    _ref$fallbackWidth = _ref.fallbackWidth,
+    fallbackWidth = _ref$fallbackWidth === void 0 ? 1024 : _ref$fallbackWidth,
+    inGrid = _ref.inGrid,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var srcSet = (_rest$srcSet = rest.srcSet) !== null && _rest$srcSet !== void 0 ? _rest$srcSet : getSrcSet(src, crop, focalPoint);
   var queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
   if (contentType && contentType === 'image/gif') {
     return _jsx(StyledImageWrapper, {
-      children: _jsx("img", _objectSpread({
+      "data-in-grid": inGrid,
+      children: _jsx(StyledImage, _objectSpread(_objectSpread({
         alt: alt,
         src: "".concat(src)
-      }, rest))
+      }, rest), {}, {
+        "data-in-grid": inGrid
+      }))
     });
   }
   if (lazyLoad) {
@@ -90,16 +94,19 @@ var Image = function Image(_ref3) {
     });
   }
   return _jsxs(StyledImageWrapper, {
-    svg: contentType === 'image/svg+xml',
+    "data-svg": contentType === 'image/svg+xml',
+    "data-in-grid": inGrid,
     children: [_jsxs("picture", {
       children: [_jsx("source", {
         type: contentType,
         srcSet: srcSet,
         sizes: sizes
-      }), _jsx("img", _objectSpread({
+      }), _jsx(StyledImage, _objectSpread(_objectSpread({
         alt: alt,
         src: "".concat(src, "?").concat(queryString)
-      }, rest))]
+      }, rest), {}, {
+        "data-in-grid": inGrid
+      }))]
     }), expandButton]
   });
 };

package/es/Layout/LayoutItem.js

@@ -1,3 +1,12 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "layout"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * Copyright (c) 2016-present, NDLA.
  *
@@ -10,7 +19,8 @@ import React from 'react';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export var LayoutItem = function LayoutItem(_ref) {
   var children = _ref.children,
-    layout = _ref.layout;
+    layout = _ref.layout,
+    rest = _objectWithoutProperties(_ref, _excluded);
   switch (layout) {
     case 'extend':
       {
@@ -35,10 +45,11 @@ export var LayoutItem = function LayoutItem(_ref) {
       }
     default:
       {
-        return _jsx("section", {
-          className: "o-layout__item",
+        return _jsx("section", _objectSpread(_objectSpread({
+          className: "o-layout__item"
+        }, rest), {}, {
           children: children
-        });
+        }));
       }
   }
 };

package/es/LearningPaths/LearningPathWrapper.js

@@ -8,24 +8,19 @@ import _styled from "@emotion/styled/base";
  */
 
 import React from 'react';
-import { css } from '@emotion/react';
 import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 var StyledWrapper = /*#__PURE__*/_styled("section", {
   target: "e179wekn0",
   label: "StyledWrapper"
-})("max-width:", 1402 + spacingUnit, "px;padding:0 ", spacing.normal, ";margin:0 auto;.o-wrapper{padding-right:0;padding-left:0;}.c-hero__content{display:none;}", mq.range({
-  from: breakpoints.tablet
-}), "{.c-hero__content{display:flex;}}", function (props) {
-  return props.invertedStyle && /*#__PURE__*/css(mq.range({
-    until: breakpoints.tablet
-  }), "{background:#fff;};label:StyledWrapper;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxlYXJuaW5nUGF0aFdyYXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DTyIsImZpbGUiOiJMZWFybmluZ1BhdGhXcmFwcGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE5LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHNwYWNpbmcsIHNwYWNpbmdVbml0LCBicmVha3BvaW50cywgbXEgfSBmcm9tICdAbmRsYS9jb3JlJztcblxudHlwZSBQcm9wU3R5bGVkV3JhcHBlciA9IHtcbiAgaW52ZXJ0ZWRTdHlsZT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBTdHlsZWRXcmFwcGVyID0gc3R5bGVkLnNlY3Rpb248UHJvcFN0eWxlZFdyYXBwZXI+YFxuICBtYXgtd2lkdGg6ICR7MTQwMiArIHNwYWNpbmdVbml0fXB4O1xuICBwYWRkaW5nOiAwICR7c3BhY2luZy5ub3JtYWx9O1xuICBtYXJnaW46IDAgYXV0bztcbiAgLm8td3JhcHBlciB7XG4gICAgcGFkZGluZy1yaWdodDogMDtcbiAgICBwYWRkaW5nLWxlZnQ6IDA7XG4gIH1cbiAgLmMtaGVyb19fY29udGVudCB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgLmMtaGVyb19fY29udGVudCB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cbiAgfVxuICAkeyhwcm9wcykgPT5cbiAgICBwcm9wcy5pbnZlcnRlZFN0eWxlICYmXG4gICAgY3NzYFxuICAgICAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICAgICAgYmFja2dyb3VuZDogI2ZmZjtcbiAgICAgIH1cbiAgICBgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW52ZXJ0ZWRTdHlsZT86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBjb25zdCBMZWFybmluZ1BhdGhXcmFwcGVyID0gKHsgY2hpbGRyZW4sIGludmVydGVkU3R5bGUgfTogUHJvcHMpID0+IChcbiAgPFN0eWxlZFdyYXBwZXIgaW52ZXJ0ZWRTdHlsZT17aW52ZXJ0ZWRTdHlsZX0+e2NoaWxkcmVufTwvU3R5bGVkV3JhcHBlcj5cbik7XG4iXX0= */"));
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxlYXJuaW5nUGF0aFdyYXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCdUQiLCJmaWxlIjoiTGVhcm5pbmdQYXRoV3JhcHBlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBzcGFjaW5nVW5pdCwgYnJlYWtwb2ludHMsIG1xIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5cbnR5cGUgUHJvcFN0eWxlZFdyYXBwZXIgPSB7XG4gIGludmVydGVkU3R5bGU/OiBib29sZWFuO1xufTtcblxuY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZC5zZWN0aW9uPFByb3BTdHlsZWRXcmFwcGVyPmBcbiAgbWF4LXdpZHRoOiAkezE0MDIgKyBzcGFjaW5nVW5pdH1weDtcbiAgcGFkZGluZzogMCAke3NwYWNpbmcubm9ybWFsfTtcbiAgbWFyZ2luOiAwIGF1dG87XG4gIC5vLXdyYXBwZXIge1xuICAgIHBhZGRpbmctcmlnaHQ6IDA7XG4gICAgcGFkZGluZy1sZWZ0OiAwO1xuICB9XG4gIC5jLWhlcm9fX2NvbnRlbnQge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIC5jLWhlcm9fX2NvbnRlbnQge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMuaW52ZXJ0ZWRTdHlsZSAmJlxuICAgIGNzc2BcbiAgICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgICB9XG4gICAgYH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGludmVydGVkU3R5bGU/OiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgTGVhcm5pbmdQYXRoV3JhcHBlciA9ICh7IGNoaWxkcmVuLCBpbnZlcnRlZFN0eWxlIH06IFByb3BzKSA9PiAoXG4gIDxTdHlsZWRXcmFwcGVyIGludmVydGVkU3R5bGU9e2ludmVydGVkU3R5bGV9PntjaGlsZHJlbn08L1N0eWxlZFdyYXBwZXI+XG4pO1xuIl19 */"));
+})("max-width:", 1402 + spacingUnit, "px;padding:0 ", spacing.normal, ";margin:0 auto;.o-wrapper{padding-right:0;padding-left:0;}&[data-inverted='true']{", mq.range({
+  until: breakpoints.tablet
+}), "{background:#fff;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxlYXJuaW5nUGF0aFdyYXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlvQyIsImZpbGUiOiJMZWFybmluZ1BhdGhXcmFwcGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE5LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHNwYWNpbmcsIHNwYWNpbmdVbml0LCBicmVha3BvaW50cywgbXEgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuY29uc3QgU3R5bGVkV3JhcHBlciA9IHN0eWxlZC5zZWN0aW9uYFxuICBtYXgtd2lkdGg6ICR7MTQwMiArIHNwYWNpbmdVbml0fXB4O1xuICBwYWRkaW5nOiAwICR7c3BhY2luZy5ub3JtYWx9O1xuICBtYXJnaW46IDAgYXV0bztcbiAgLm8td3JhcHBlciB7XG4gICAgcGFkZGluZy1yaWdodDogMDtcbiAgICBwYWRkaW5nLWxlZnQ6IDA7XG4gIH1cblxuICAmW2RhdGEtaW52ZXJ0ZWQ9J3RydWUnXSB7XG4gICAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgfVxuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBpbnZlcnRlZFN0eWxlPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IExlYXJuaW5nUGF0aFdyYXBwZXIgPSAoeyBjaGlsZHJlbiwgaW52ZXJ0ZWRTdHlsZSB9OiBQcm9wcykgPT4gKFxuICA8U3R5bGVkV3JhcHBlciBkYXRhLWludmVydGVkPXshIWludmVydGVkU3R5bGV9PntjaGlsZHJlbn08L1N0eWxlZFdyYXBwZXI+XG4pO1xuIl19 */"));
 export var LearningPathWrapper = function LearningPathWrapper(_ref) {
   var children = _ref.children,
     invertedStyle = _ref.invertedStyle;
   return _jsx(StyledWrapper, {
-    invertedStyle: invertedStyle,
+    "data-inverted": !!invertedStyle,
     children: children
   });
 };