@ndla/ui 41.2.6 → 41.3.0

package/es/index.js

@@ -11,7 +11,7 @@
 
 export { default as SectionHeading } from './SectionHeading';
 export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed } from './Embed';
-export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article } from './Article';
+export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article } from './Article';
 export { default as Table } from './Table';
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
@@ -28,7 +28,7 @@ export { default as InfoWidget } from './InfoWidget';
 export { FrontpageInfo, FrontpageFilm, FrontpageToolbox, FrontpageMultidisciplinarySubject, FrontpageHeader, FrontpageSubjectIllustration, FrontpageSearch, FrontpageProgramMenu } from './Frontpage';
 export { default as FactBox, FactBoxV2 } from './FactBox';
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';
-export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero } from './Hero';
+export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, HeroContent } from './Hero';
 export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from './Filter';
 export { Footer, EditorName, FooterText } from './Footer';
 export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton } from './Figure';
@@ -88,4 +88,5 @@ export { default as ContactBlock } from './ContactBlock';
 export { CampaignBlock } from './CampaignBlock';
 export { Grid } from './Grid';
 export { Heading } from './Typography';
+export { default as FrontpageArticle } from './FrontpageArticle';
 export { DefinitionTerm, DefinitionDescription } from './DefinitionList';

package/es/locale/messages-en.js

@@ -1158,7 +1158,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'In order to use the My NDLA service you have to be a student or work at a school in a county that partakes in the NDLA collaboration. We ask you not to write offensive or personally sensitive information in text fields. Read our ',
       loginTextLink: 'privacy policy here',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',
-      loginResourcePitch: 'Do you want to favorite this page?',
+      loginResourcePitch: 'Do you want to favorite this resource?',
       loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your <i>own</i> way!',
       deleteAccount: 'Delete My NDLA',
       welcome: 'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',

package/es/locale/messages-nb.js

@@ -1159,7 +1159,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'For å kunne bruke tjenesten Min NDLA må du være elev eller jobbe på en skole i et fylke som er med i NDLA-samarbeidet. Vi ber om at du ikke skriver noe støtende, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome: 'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
       read: {

package/es/locale/messages-nn.js

@@ -1159,7 +1159,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'For å kunne bruke tjenesten Min NDLA må du vere elev eller jobbe på ein skule i eit fylke som er med i NDLA-samarbeidet. Vi ber om at du ikkje skriv noko støtande, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne resursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome: 'Velkommen til Min NDLA! No kan du lagre favorittressursane dine frå NDLA og organisere dei i mapper og med emneknaggar.',
       read: {

package/es/locale/messages-se.js

@@ -1159,7 +1159,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'Jus galggat sáhttit geavahit bálvalusa Mu NDLA fertet leat oahppi dahje bargat muhtin skuvllas fylkkas mii lea mielde NDLA-ovttasbarggus. Mii bivdit ahte it čále maidege unohasaid, persovdnasensitiivvalaš dieđuid dahje eará persovdnadáhtaid min teakstagieddái. Loga min ',
       loginTextLink: 'personsuodjalusjulggaštusa dákko',
       loginTerms: 'Logge Feide bokte vai oaččut beassanlobi. Go logget sisa de dohkkehat min geavahaneavttuid.',
-      loginResourcePitch: 'Dáhtut go merket siiddu oiddohin?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Bures boahtin NDLA:ii! Dáppe sáhtát fágaávdnasiid ordnet iežat vuogi mielde',
       welcome: 'Bures boahtin Mu NDLA:ii! Dál sáhtát vurket iežat oiddotresurssaid NDLA:s ja ordnet daid nu go dáhtut máhpaide ja fáddágilkoriiguin.',
       read: {

package/es/locale/messages-sma.js

@@ -1159,7 +1159,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'For å kunne bruke tjenesten Min NDLA må du vere elev eller jobbe på ein skule i eit fylke som er med i NDLA-samarbeidet. Vi ber om at du ikkje skriv noko støtande, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome: 'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
       read: {

package/lib/Article/index.d.ts

@@ -10,6 +10,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/lib/Article/index.js

@@ -34,12 +34,6 @@ Object.defineProperty(exports, "ArticleIntroduction", {
     return _Article.ArticleIntroduction;
   }
 });
-Object.defineProperty(exports, "ArticleSideBar", {
-  enumerable: true,
-  get: function get() {
-    return _ArticleSideBar.default;
-  }
-});
 Object.defineProperty(exports, "ArticleTitle", {
   enumerable: true,
   get: function get() {
@@ -58,7 +52,6 @@ var _ArticleByline = _interopRequireDefault(require("./ArticleByline"));
 var _ArticleContent = _interopRequireDefault(require("./ArticleContent"));
 var _ArticleFootNotes = _interopRequireDefault(require("./ArticleFootNotes"));
 var _ArticleHeaderWrapper = _interopRequireDefault(require("./ArticleHeaderWrapper"));
-var _ArticleSideBar = _interopRequireDefault(require("./ArticleSideBar"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/ContentTypeBadge/ContentTypeBadge.js

@@ -81,7 +81,7 @@ var ContentTypeBadge = function ContentTypeBadge(_ref) {
       icon = (0, _jsxRuntime.jsx)(_contentType.MultidisciplinaryTopic, {});
       break;
     case contentTypes.resourceEmbedTypeMapping.image:
-      icon = (0, _jsxRuntime.jsx)(_editor.Media, {});
+      icon = (0, _jsxRuntime.jsx)(_editor.ImageNormal, {});
       embedResource = true;
       break;
     case contentTypes.resourceEmbedTypeMapping.audio:

package/lib/Embed/ImageEmbed.d.ts

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

package/lib/Embed/ImageEmbed.js

@@ -96,7 +96,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 = (0, _react.useState)(hideByline(embed.embedData.size)),
     _useState2 = _slicedToArray(_useState, 2),
     isBylineHidden = _useState2[0],
@@ -139,6 +140,7 @@ var ImageEmbed = function ImageEmbed(_ref) {
         sizes: imageSizes !== null && imageSizes !== void 0 ? imageSizes : sizes,
         alt: altText,
         src: data.image.imageUrl,
+        inGrid: inGrid,
         expandButton: (0, _jsxRuntime.jsx)(ExpandButton, {
           size: embedData.size,
           expanded: !!imageSizes,
@@ -161,6 +163,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() !== _licenses.COPYRIGHTED && (0, _jsxRuntime.jsx)(HeartButton, {
         embed: embed
       })

package/lib/FrontpageArticle/FrontpageArticle.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { ReactNode } from 'react';
+import { Article } from '../types';
+interface Props {
+    article: Article;
+    children?: ReactNode;
+    id: string;
+    isWide?: boolean;
+}
+export declare const FrontpageArticle: ({ article, id, isWide }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default FrontpageArticle;

package/lib/FrontpageArticle/FrontpageArticle.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FrontpageArticle = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _core = require("@ndla/core");
+var _Layout = _interopRequireDefault(require("../Layout"));
+var _Typography = require("../Typography");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /**
+                                                                                                                                                                                                                                                                                           * Copyright (c) 2023-present, NDLA.
+                                                                                                                                                                                                                                                                                           *
+                                                                                                                                                                                                                                                                                           * This source code is licensed under the GPLv3 license found in the
+                                                                                                                                                                                                                                                                                           * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                           *
+                                                                                                                                                                                                                                                                                           */
+var StyledArticle = /*#__PURE__*/(0, _base.default)("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__*/(0, _base.default)(_Layout.default, {
+  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__*/(0, _base.default)("div", {
+  target: "e10a6yg80",
+  label: "StyledIntroduction"
+})("font-weight:", _core.fonts.weight.light, ";font-family:", _core.fonts.sans, ";margin-top:", _core.spacing.small, ";", _core.fonts.sizes('22px', '30px'), ";", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{margin-top:", _core.spacing.mediumlarge, ";", _core.fonts.sizes('26px', '36px'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZyb250cGFnZUFydGljbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDcUMiLCJmaWxlIjoiRnJvbnRwYWdlQXJ0aWNsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBmb250cywgbXEsIHNwYWNpbmcsIHV0aWxzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBBcnRpY2xlIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IExheW91dEl0ZW0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9UeXBvZ3JhcGh5JztcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYXJ0aWNsZTogQXJ0aWNsZTtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIGlkOiBzdHJpbmc7XG4gIGlzV2lkZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZEFydGljbGUgPSBzdHlsZWQuYXJ0aWNsZWBcbiAgbWF4LXdpZHRoOiA3NzNweDtcbiAgJltkYXRhLXdpZGU9J3RydWUnXSB7XG4gICAgbWF4LXdpZHRoOiAxMTAwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZExheW91dEl0ZW0gPSBzdHlsZWQoTGF5b3V0SXRlbSlgXG4gID4gc2VjdGlvbiB7XG4gICAgPiBmaWd1cmUsXG4gICAgPiBpZnJhbWUge1xuICAgICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRJbnRyb2R1Y3Rpb24gPSBzdHlsZWQuZGl2YFxuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubGlnaHR9O1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgbWFyZ2luLXRvcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHtmb250cy5zaXplcygnMjJweCcsICczMHB4Jyl9O1xuXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBtYXJnaW4tdG9wOiAke3NwYWNpbmcubWVkaXVtbGFyZ2V9O1xuICAgICR7Zm9udHMuc2l6ZXMoJzI2cHgnLCAnMzZweCcpfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEZyb250cGFnZUFydGljbGUgPSAoeyBhcnRpY2xlLCBpZCwgaXNXaWRlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdGl0bGUsIGludHJvZHVjdGlvbiwgY29udGVudCB9ID0gYXJ0aWNsZTtcblxuICBpZiAoaXNXaWRlKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRBcnRpY2xlIGRhdGEtd2lkZT17aXNXaWRlfT5cbiAgICAgICAgPFN0eWxlZExheW91dEl0ZW0+e2NvbnRlbnR9PC9TdHlsZWRMYXlvdXRJdGVtPlxuICAgICAgPC9TdHlsZWRBcnRpY2xlPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRBcnRpY2xlPlxuICAgICAgPFN0eWxlZExheW91dEl0ZW0+XG4gICAgICAgIDxIZWFkaW5nIGlkPXtpZH0gaGVhZGluZ1N0eWxlPVwiaDFcIiBlbGVtZW50PVwiaDFcIiBtYXJnaW49XCJub3JtYWxcIiB0YWJJbmRleD17LTF9PlxuICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgPC9IZWFkaW5nPlxuICAgICAgICA8U3R5bGVkSW50cm9kdWN0aW9uPntpbnRyb2R1Y3Rpb259PC9TdHlsZWRJbnRyb2R1Y3Rpb24+XG4gICAgICA8L1N0eWxlZExheW91dEl0ZW0+XG4gICAgICA8U3R5bGVkTGF5b3V0SXRlbT57Y29udGVudH08L1N0eWxlZExheW91dEl0ZW0+XG4gICAgPC9TdHlsZWRBcnRpY2xlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRnJvbnRwYWdlQXJ0aWNsZTtcbiJdfQ== */"));
+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 (0, _jsxRuntime.jsx)(StyledArticle, {
+      "data-wide": isWide,
+      children: (0, _jsxRuntime.jsx)(StyledLayoutItem, {
+        children: content
+      })
+    });
+  }
+  return (0, _jsxRuntime.jsxs)(StyledArticle, {
+    children: [(0, _jsxRuntime.jsxs)(StyledLayoutItem, {
+      children: [(0, _jsxRuntime.jsx)(_Typography.Heading, {
+        id: id,
+        headingStyle: "h1",
+        element: "h1",
+        margin: "normal",
+        tabIndex: -1,
+        children: title
+      }), (0, _jsxRuntime.jsx)(StyledIntroduction, {
+        children: introduction
+      })]
+    }), (0, _jsxRuntime.jsx)(StyledLayoutItem, {
+      children: content
+    })]
+  });
+};
+exports.FrontpageArticle = FrontpageArticle;
+var _default = FrontpageArticle;
+exports.default = _default;

package/lib/FrontpageArticle/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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/lib/FrontpageArticle/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _FrontpageArticle = _interopRequireDefault(require("./FrontpageArticle"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var _default = _FrontpageArticle.default;
+exports.default = _default;

package/lib/Hero/Hero.d.ts

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ReactNode } from 'react';
-export type HeroContentType = 'subject-material' | 'tasks-and-activities' | 'assessment-resources' | 'subject' | 'external-learning-resources' | 'source-material' | 'learning-path' | 'topic' | 'beta' | 'ndla-film' | 'ndla-film has-image';
-interface HeroProps {
-    children?: ReactNode;
+import { HTMLAttributes, ReactNode } from 'react';
+export type HeroContentType = 'subject-material' | 'tasks-and-activities' | 'assessment-resources' | 'subject' | 'external-learning-resources' | 'source-material' | 'learning-path' | 'topic' | 'beta' | 'ndla-film' | 'ndla-film has-image' | 'frontpage-article';
+interface HeroProps extends HTMLAttributes<HTMLDivElement> {
     contentType?: HeroContentType;
 }
 export declare const Hero: ({ children, contentType }: HeroProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 interface Props {
     children?: ReactNode;
+    hasImage?: boolean;
 }
 export declare const SubjectMaterialHero: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const TasksAndActivitiesHero: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -21,7 +21,5 @@ export declare const AssessmentResourcesHero: (props: Props) => import("@emotion
 export declare const SubjectHero: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const ExternalLearningResourcesHero: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SourceMaterialHero: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const NdlaFilmHero: ({ hasImage, ...rest }: Props & {
-    hasImage?: boolean | undefined;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NdlaFilmHero: ({ hasImage, ...rest }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/lib/Hero/Hero.js

@@ -1,18 +1,17 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TasksAndActivitiesHero = exports.SubjectMaterialHero = exports.SubjectHero = exports.SourceMaterialHero = exports.NdlaFilmHero = exports.Hero = exports.ExternalLearningResourcesHero = exports.AssessmentResourcesHero = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = _interopRequireDefault(require("react"));
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-var contentTypes = _interopRequireWildcard(require("../model/ContentType"));
+var _core = require("@ndla/core");
+var _ContentType = require("../model/ContentType");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _excluded = ["hasImage"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
 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; }
@@ -26,51 +25,60 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
                                                                                                                                                                                                                                                                                                                                                                                                * LICENSE file in the root directory of this source tree.
                                                                                                                                                                                                                                                                                                                                                                                                *
                                                                                                                                                                                                                                                                                                                                                                                                */
-var classes = new _reactBemHelper.default({
-  name: 'hero',
-  prefix: 'c-'
-});
+var StyledDiv = /*#__PURE__*/(0, _base.default)("div", {
+  target: "e5tcv8a0",
+  label: "StyledDiv"
+})("background-repeat:repeat;background-size:", _core.spacing.normal, ";background-color:", _core.colors.brand.greyLightest, ";", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{min-height:246px;padding-bottom:", _core.spacingUnit * 6.5, "px;}&[data-contenttype='subject-material']{background-color:", _core.colors.subjectMaterial.light, ";}&[data-contenttype='tasks-and-activities']{background-color:", _core.colors.tasksAndActivities.background, ";}&[data-contenttype='assessment-resources']{background-color:", _core.colors.assessmentResource.background, ";}&[data-contenttype='subject']{background-color:", _core.colors.subject.light, ";}&[data-contenttype='external-learning-resources']{background-color:", _core.colors.externalLearningResource.background, ";}&[data-contenttype='source-material']{background-color:", _core.colors.sourceMaterial.light, ";}&[data-contenttype='beta']{background-color:", _core.colors.brand.primary, ";}&[data-contenttype='ndla-film has-image'],&[data-contenttype='ndla-film']{background:", _core.colors.ndlaFilm.filmColor, ";", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{height:2000px;margin-bottom:-1910px;}&[data-contenttype='ndla-film has-image']{", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{margin-bottom:-1800px;@media (min-height: 720px){margin-bottom:-1750px;}@media (min-height: 1020px){margin-bottom:-1700px;}}}", _core.mq.range({
+  until: _core.breakpoints.tablet
+}), "{+div article.c-article{margin-left:-", _core.spacing.normal, ";margin-right:-", _core.spacing.normal, ";margin-top:0;background:", _core.colors.white, ";padding-left:", _core.spacing.normal, ";padding-right:", _core.spacing.normal, ";padding-top:", _core.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== */"));
 var Hero = function Hero(_ref) {
   var children = _ref.children,
     contentType = _ref.contentType;
-  return (0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, classes('', contentType)), {}, {
+  return (0, _jsxRuntime.jsx)(StyledDiv, {
+    "data-contenttype": contentType,
     children: children || null
-  }));
+  });
 };
 exports.Hero = Hero;
 var SubjectMaterialHero = function SubjectMaterialHero(props) {
   return (0, _jsxRuntime.jsx)(Hero, _objectSpread({
-    contentType: contentTypes.SUBJECT_MATERIAL
+    contentType: _ContentType.SUBJECT_MATERIAL
   }, props));
 };
 exports.SubjectMaterialHero = SubjectMaterialHero;
 var TasksAndActivitiesHero = function TasksAndActivitiesHero(props) {
   return (0, _jsxRuntime.jsx)(Hero, _objectSpread({
-    contentType: contentTypes.TASKS_AND_ACTIVITIES
+    contentType: _ContentType.TASKS_AND_ACTIVITIES
   }, props));
 };
 exports.TasksAndActivitiesHero = TasksAndActivitiesHero;
 var AssessmentResourcesHero = function AssessmentResourcesHero(props) {
   return (0, _jsxRuntime.jsx)(Hero, _objectSpread({
-    contentType: contentTypes.ASSESSMENT_RESOURCES
+    contentType: _ContentType.ASSESSMENT_RESOURCES
   }, props));
 };
 exports.AssessmentResourcesHero = AssessmentResourcesHero;
 var SubjectHero = function SubjectHero(props) {
   return (0, _jsxRuntime.jsx)(Hero, _objectSpread({
-    contentType: contentTypes.SUBJECT
+    contentType: _ContentType.SUBJECT
   }, props));
 };
 exports.SubjectHero = SubjectHero;
 var ExternalLearningResourcesHero = function ExternalLearningResourcesHero(props) {
   return (0, _jsxRuntime.jsx)(Hero, _objectSpread({
-    contentType: contentTypes.EXTERNAL_LEARNING_RESOURCES
+    contentType: _ContentType.EXTERNAL_LEARNING_RESOURCES
   }, props));
 };
 exports.ExternalLearningResourcesHero = ExternalLearningResourcesHero;
 var SourceMaterialHero = function SourceMaterialHero(props) {
   return (0, _jsxRuntime.jsx)(Hero, _objectSpread({
-    contentType: contentTypes.SOURCE_MATERIAL
+    contentType: _ContentType.SOURCE_MATERIAL
   }, props));
 };
 exports.SourceMaterialHero = SourceMaterialHero;

package/lib/Hero/HeroContent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+export declare const HeroContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/Hero/HeroContent.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeroContent = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _core = require("@ndla/core");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+var HeroContent = /*#__PURE__*/(0, _base.default)("div", {
+  target: "ejq412a0",
+  label: "HeroContent"
+})("display:flex;flex-wrap:wrap;align-items:flex-end;padding:", _core.spacing.small, " 0 ", _core.spacing.small, ";z-index:9;", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{min-height:90px;padding-bottom:", _core.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 */"));
+exports.HeroContent = HeroContent;

package/lib/Hero/index.d.ts

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

package/lib/Hero/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "Hero", {
     return _Hero.Hero;
   }
 });
+Object.defineProperty(exports, "HeroContent", {
+  enumerable: true,
+  get: function get() {
+    return _HeroContent.HeroContent;
+  }
+});
 Object.defineProperty(exports, "NdlaFilmHero", {
   enumerable: true,
   get: function get() {
@@ -51,4 +57,5 @@ Object.defineProperty(exports, "TasksAndActivitiesHero", {
     return _Hero.TasksAndActivitiesHero;
   }
 });
-var _Hero = require("./Hero");
+var _Hero = require("./Hero");
+var _HeroContent = require("./HeroContent");

package/lib/Image/Image.d.ts

@@ -29,6 +29,7 @@ interface Props {
     expandButton?: ReactNode;
     crop?: ImageCrop;
     focalPoint?: ImageFocalPoint;
+    inGrid?: boolean;
 }
-declare const Image: ({ alt, src, lazyLoad, lazyLoadSrc, crop, focalPoint, contentType, sizes, expandButton, fallbackWidth, ...rest }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Image: ({ alt, src, lazyLoad, lazyLoadSrc, crop, focalPoint, contentType, sizes, expandButton, fallbackWidth, inGrid, ...rest }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Image;