@ndla/ui 56.0.52-alpha.0 → 56.0.54-alpha.0

package/dist/panda.buildinfo.json

@@ -97,25 +97,6 @@
       "minWidth]___[value:small",
       "paddingInline]___[value:small",
       "srOnly]___[value:true",
-      "backgroundColor]___[value:background.default",
-      "transitionDuration]___[value:fast",
-      "transitionProperty]___[value:background-color, border-color, max-width",
-      "transitionTimingFunction]___[value:default",
-      "height]___[value:100%",
-      "borderColor]___[value:stroke.hover]___[cond:&:hover, &:focus-visible",
-      "backgroundColor]___[value:surface.actionSubtle.hover]___[cond:&:hover, &:focus-visible",
-      "textDecoration]___[value:underline]___[cond:&:hover, &:focus-visible<___>& h1, h2, h3, h4, h5, h6",
-      "maxWidth]___[value:350px]___[cond:tabletWide",
-      "paddingBlock]___[value:xlarge",
-      "paddingInline]___[value:xxlarge",
-      "maxWidth]___[value:532px]___[cond:tabletWide",
-      "textTransform]___[value:uppercase",
-      "textStyle]___[value:body.large",
-      "objectFit]___[value:cover",
-      "border]___[value:0",
-      "display]___[value:inline-block",
-      "width]___[value:fit-content",
-      "maxWidth]___[value:8xl",
       "flexWrap]___[value:wrap",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",
@@ -128,15 +109,18 @@
       "textDecoration]___[value:none]___[cond:_hover",
       "textDecoration]___[value:none]___[cond:_focusVisible",
       "display]___[value:none]___[cond:tabletDown",
+      "height]___[value:100%",
       "containerType]___[value:inline-size",
       "display]___[value:grid",
       "gridTemplateColumns]___[value:1fr",
+      "backgroundColor]___[value:background.default",
       "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:@/tablet",
       "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
       "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:@/tablet",
       "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
       "backgroundColor]___[value:surface.brand.1",
       "backgroundColor]___[value:surface.brand.3",
+      "objectFit]___[value:cover",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:@/tablet",
       "height]___[value:265px]___[cond:@supports not (container-type: inline-size)<___>tablet",
@@ -146,6 +130,8 @@
       "position]___[value:relative]___[cond:tablet",
       "lineClamp]___[value:4]___[cond:tablet",
       "boxOrient]___[value:vertical]___[cond:tablet",
+      "maxWidth]___[value:8xl",
+      "textStyle]___[value:body.large",
       "display]___[value:inline",
       "display]___[value:inline]___[cond:& p",
       "minWidth]___[value:surface.xxsmall",
@@ -211,6 +197,7 @@
       "cursor]___[value:pointer",
       "opacity]___[value:1]___[cond:&:focus, &:focus-visible, &:active",
       "marginInlineStart]___[value:xsmall",
+      "border]___[value:0",
       "height]___[value:auto",
       "textStyle]___[value:label.large",
       "fontWeight]___[value:bold",
@@ -255,6 +242,7 @@
       "borderStyle]___[value:dashed",
       "borderColor]___[value:stroke.hover",
       "paddingBlockStart]___[value:5xsmall",
+      "width]___[value:fit-content",
       "borderColor]___[value:text.link]___[cond:_hover",
       "background]___[value:surface.actionSubtle.hover]___[cond:_hover",
       "borderColor]___[value:text.link]___[cond:_active",
@@ -396,6 +384,10 @@
       "width]___[value:large]___[cond:_hover<___>& [data-forward]",
       "height]___[value:large]___[cond:_hover<___>& [data-forward]",
       "color]___[value:icon.strong",
+      "paddingBlockStart]___[value:medium",
+      "paddingBlockEnd]___[value:medium",
+      "aspectRatio]___[value:16/9",
+      "height]___[value:unset",
       "gridTemplateColumns]___[value:repeat(2, 1fr)",
       "gridTemplateColumns]___[value:1fr]___[cond:tabletDown",
       "marginBlockStart]___[value:xsmall",

package/dist/styles.css

@@ -329,42 +329,6 @@
     border-width: 0;
 }
 
-  .h_100\% {
-    height: 100%;
-}
-
-  .py_xlarge {
-    padding-block: var(--spacing-xlarge);
-}
-
-  .px_xxlarge {
-    padding-inline: var(--spacing-xxlarge);
-}
-
-  .tt_uppercase {
-    text-transform: uppercase;
-}
-
-  .obj-f_cover {
-    object-fit: cover;
-}
-
-  .bd_0 {
-    border: 0;
-}
-
-  .d_inline-block {
-    display: inline-block;
-}
-
-  .w_fit-content {
-    width: fit-content;
-}
-
-  .max-w_8xl {
-    max-width: 8xl;
-}
-
   .c_inherit {
     color: inherit;
 }
@@ -373,6 +337,10 @@
     text-decoration: underline;
 }
 
+  .h_100\% {
+    height: 100%;
+}
+
   .cq-t_inline-size {
     container-type: inline-size;
 }
@@ -381,10 +349,18 @@
     display: grid;
 }
 
+  .obj-f_cover {
+    object-fit: cover;
+}
+
   .h_215px {
     height: 215px;
 }
 
+  .max-w_8xl {
+    max-width: 8xl;
+}
+
   .d_inline {
     display: inline;
 }
@@ -469,6 +445,10 @@
     margin-inline-start: var(--spacing-xsmall);
 }
 
+  .bd_0 {
+    border: 0;
+}
+
   .h_auto {
     height: auto;
 }
@@ -529,6 +509,10 @@
     padding-block-start: var(--spacing-5xsmall);
 }
 
+  .w_fit-content {
+    width: fit-content;
+}
+
   .ps_4xsmall {
     padding-inline-start: var(--spacing-4xsmall);
 }
@@ -617,6 +601,22 @@
     color: var(--colors-icon-strong);
 }
 
+  .pbs_medium {
+    padding-block-start: var(--spacing-medium);
+}
+
+  .pbe_medium {
+    padding-block-end: var(--spacing-medium);
+}
+
+  .asp_16\/9 {
+    aspect-ratio: 16/9;
+}
+
+  .h_unset {
+    height: unset;
+}
+
   .mbs_xsmall {
     margin-block-start: var(--spacing-xsmall);
 }
@@ -665,25 +665,6 @@
     justify-content: center;
 }
 
-  .bg-c_background\.default {
-    background-color: var(--colors-background-default);
-}
-
-  .trs-dur_fast {
-    --transition-duration: var(--durations-fast);
-    transition-duration: var(--durations-fast);
-}
-
-  .trs-prop_background-color\,_border-color\,_max-width {
-    --transition-prop: background-color, border-color, max-width;
-    transition-property: background-color, border-color, max-width;
-}
-
-  .trs-tmf_default {
-    --transition-easing: var(--easings-default);
-    transition-timing-function: var(--easings-default);
-}
-
   .flex-wrap_wrap {
     flex-wrap: wrap;
 }
@@ -696,6 +677,10 @@
     grid-template-columns: 1fr;
 }
 
+  .bg-c_background\.default {
+    background-color: var(--colors-background-default);
+}
+
   .bg-c_surface\.brand\.1 {
     background-color: var(--colors-surface-brand-1);
 }
@@ -1229,14 +1214,6 @@
     border-radius: 0;
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:focus-visible {
-    border-color: var(--colors-stroke-hover);
-}
-
-  .\[\&\:hover\,_\&\:focus-visible\]\:bg-c_surface\.actionSubtle\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bg-c_surface\.actionSubtle\.hover:focus-visible {
-    background-color: var(--colors-surface-action-subtle-hover);
-}
-
   .hover\:td_none:is(:hover, [data-hover]) {
     text-decoration: none;
 }
@@ -1281,10 +1258,6 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h6,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h6 {
-    text-decoration: underline;
-}
-
   .focusVisible\:after\:pos_absolute:is(:focus-visible, [data-focus-visible])::after {
     position: absolute;
 }
@@ -1472,12 +1445,6 @@
   @media screen and (min-width: 48rem) {
     .tabletWide\:w_100\% {
       width: 100%;
-}
-    .tabletWide\:max-w_350px {
-      max-width: 350px;
-}
-    .tabletWide\:max-w_532px {
-      max-width: 532px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;

package/es/Pitch/Pitch.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2024-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 parse from "html-react-parser";
+import { CardHeading, CardImage, CardRoot, Text } from "@ndla/primitives";
+import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCardHeading = styled(CardHeading, {
+  base: {
+    paddingBlockStart: "medium"
+  }
+});
+const StyledText = styled(Text, {
+  base: {
+    paddingBlockEnd: "medium"
+  }
+});
+const StyledCardRoot = styled(CardRoot, {
+  base: {
+    border: "0",
+    display: "flex",
+    flexDirection: "column",
+    gap: "small"
+  }
+});
+const StyledCardImage = styled(CardImage, {
+  base: {
+    aspectRatio: "16/9",
+    height: "unset"
+  }
+});
+export const Pitch = _ref => {
+  let {
+    title,
+    url,
+    metaImage,
+    path,
+    description
+  } = _ref;
+  const href = getPossiblyRelativeUrl(url, path);
+  return /*#__PURE__*/_jsx(StyledCardRoot, {
+    variant: "subtle",
+    "data-embed-type": "pitch",
+    asChild: true,
+    consumeCss: true,
+    children: /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(StyledCardHeading, {
+        textStyle: "heading.small",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/_jsx(SafeLink, {
+          to: href,
+          unstyled: true,
+          css: linkOverlay.raw(),
+          children: parse(title)
+        })
+      }), !!description && /*#__PURE__*/_jsx(StyledText, {
+        textStyle: "body.xlarge",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/_jsx("div", {
+          children: parse(description)
+        })
+      }), /*#__PURE__*/_jsx(StyledCardImage, {
+        variant: "rounded",
+        src: metaImage.url,
+        alt: metaImage.alt,
+        sizes: "180px",
+        fallbackWidth: 300,
+        width: 550,
+        height: 310
+      })]
+    })
+  });
+};

package/es/{BlogPost → Pitch}/index.js

@@ -6,4 +6,4 @@
  *
  */
 
-export { default as BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";

package/es/index.js

@@ -37,7 +37,7 @@ export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQ
 export { ContentTypeFramedContent } from "./ContentTypeFramedContent/ContentTypeFramedContent";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput } from "./TagSelector/TagSelector";
-export { BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
 export { CampaignBlock } from "./CampaignBlock";

package/es/locale/messages-en.js

@@ -229,7 +229,7 @@ const messages = {
     introduction: "What will it mean to work exploratory? How can you learn better? What is needed in order to make group work function? In the toolbox both students and teach find resources that are current for every subject, and that support learning work and development of knowledge, skills and understanding."
   },
   meta: {
-    description: "Norwegian Digital Learning Arena, Open Educational Resources",
+    description: "Norwegian Digital Learning Arena, Open Educational Resources for upper secondary education.",
     keywords: "open educational resources,teaching,learning"
   },
   masthead: {

package/es/locale/messages-nb.js

@@ -229,7 +229,7 @@ const messages = {
     introduction: "Hva vil det si å arbeide utforskende? Hvordan kan du lære bedre? Hva skal til for å få gruppearbeid til å fungere? I Verktøykassa finner både elever og lærere ressurser som er aktuelle for alle fag, og som støtter opp under læringsarbeid og utvikling av kunnskap, ferdigheter og forståelse."
   },
   meta: {
-    description: "Kvalitetssikrede og fritt tilgjengelige nettbaserte læremidler for videregående opplæring",
+    description: "Åpne og fritt tilgjengelige ressurser for videregående opplæring. Utviklet og oppdatert i samarbeid med dyktige lærere og elever.",
     keywords: "læremiddel,fag,skole,videregående,lærling,pensum,fagstoff"
   },
   masthead: {

package/es/locale/messages-nn.js

@@ -229,7 +229,7 @@ const messages = {
     introduction: "Kva vil det seie å arbeide utforskande? Korleis kan du lære betre? Kva skal til for å få gruppearbeid til å fungere? I Verktøykassa finn både elevar og lærerar ressursar som er aktuelle for alle fag, og som støtter opp under læringsarbeid og utvikling av kunnskap, ferdigheter og forståing."
   },
   meta: {
-    description: "Kvalitetssikra og fritt tilgjengelege nettbaserte læremiddel for vidaregåande opplæring",
+    description: "Opne og fritt tilgjengelege ressursar for vidaregåande opplæring. Utvikla og oppdaterte i samarbeid med dyktige lærarar og elevar.",
     keywords: "læremiddel,fag,skole,skule,vidaregåande,lærling,pensum,fagstoff, "
   },
   masthead: {

package/lib/Pitch/Pitch.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export interface Props {
+    title: string;
+    url: string;
+    description?: string;
+    metaImage: {
+        url: string;
+        alt: string;
+    };
+    path?: string;
+}
+export declare const Pitch: ({ title, url, metaImage, path, description }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/Pitch/Pitch.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pitch = void 0;
+var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
+var _primitives = require("@ndla/primitives");
+var _safelink = require("@ndla/safelink");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _patterns = require("@ndla/styled-system/patterns");
+var _relativeUrl = require("../utils/relativeUrl");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const StyledCardHeading = (0, _jsx2.styled)(_primitives.CardHeading, {
+  base: {
+    paddingBlockStart: "medium"
+  }
+});
+const StyledText = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    paddingBlockEnd: "medium"
+  }
+});
+const StyledCardRoot = (0, _jsx2.styled)(_primitives.CardRoot, {
+  base: {
+    border: "0",
+    display: "flex",
+    flexDirection: "column",
+    gap: "small"
+  }
+});
+const StyledCardImage = (0, _jsx2.styled)(_primitives.CardImage, {
+  base: {
+    aspectRatio: "16/9",
+    height: "unset"
+  }
+});
+const Pitch = _ref => {
+  let {
+    title,
+    url,
+    metaImage,
+    path,
+    description
+  } = _ref;
+  const href = (0, _relativeUrl.getPossiblyRelativeUrl)(url, path);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardRoot, {
+    variant: "subtle",
+    "data-embed-type": "pitch",
+    asChild: true,
+    consumeCss: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardHeading, {
+        textStyle: "heading.small",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
+          to: href,
+          unstyled: true,
+          css: _patterns.linkOverlay.raw(),
+          children: (0, _htmlReactParser.default)(title)
+        })
+      }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
+        textStyle: "body.xlarge",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: (0, _htmlReactParser.default)(description)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardImage, {
+        variant: "rounded",
+        src: metaImage.url,
+        alt: metaImage.alt,
+        sizes: "180px",
+        fallbackWidth: 300,
+        width: 550,
+        height: 310
+      })]
+    })
+  });
+};
+exports.Pitch = Pitch;

package/lib/{BlogPost → Pitch}/index.d.ts

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { default as BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";

package/lib/Pitch/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Pitch", {
+  enumerable: true,
+  get: function () {
+    return _Pitch.Pitch;
+  }
+});
+var _Pitch = require("./Pitch");

package/lib/index.d.ts

@@ -40,7 +40,7 @@ export { type ContentTypeFramedContentVariant } from "./ContentTypeFramedContent
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export type { TagSelectorControlProps, TagSelectorInputProps, TagSelectorRootProps } from "./TagSelector/TagSelector";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
-export { BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
 export type { ContactBlockBackground } from "./ContactBlock";

package/lib/index.js

@@ -87,12 +87,6 @@ Object.defineProperty(exports, "BlockConcept", {
     return _Embed.BlockConcept;
   }
 });
-Object.defineProperty(exports, "BlogPostV2", {
-  enumerable: true,
-  get: function () {
-    return _BlogPost.BlogPostV2;
-  }
-});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function () {
@@ -381,6 +375,12 @@ Object.defineProperty(exports, "PdfFile", {
     return _FileList.PdfFile;
   }
 });
+Object.defineProperty(exports, "Pitch", {
+  enumerable: true,
+  get: function () {
+    return _Pitch.Pitch;
+  }
+});
 Object.defineProperty(exports, "RelatedArticle", {
   enumerable: true,
   get: function () {
@@ -655,7 +655,7 @@ var _ContentTypeBlockQuote = require("./ContentTypeBlockQuote/ContentTypeBlockQu
 var _ContentTypeFramedContent = require("./ContentTypeFramedContent/ContentTypeFramedContent");
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 var _TagSelector = require("./TagSelector/TagSelector");
-var _BlogPost = require("./BlogPost");
+var _Pitch = require("./Pitch");
 var _KeyFigure = require("./KeyFigure");
 var _ContactBlock = require("./ContactBlock");
 var _CampaignBlock = require("./CampaignBlock");

package/lib/locale/messages-en.js

@@ -236,7 +236,7 @@ const messages = {
     introduction: "What will it mean to work exploratory? How can you learn better? What is needed in order to make group work function? In the toolbox both students and teach find resources that are current for every subject, and that support learning work and development of knowledge, skills and understanding."
   },
   meta: {
-    description: "Norwegian Digital Learning Arena, Open Educational Resources",
+    description: "Norwegian Digital Learning Arena, Open Educational Resources for upper secondary education.",
     keywords: "open educational resources,teaching,learning"
   },
   masthead: {

package/lib/locale/messages-nb.js

@@ -236,7 +236,7 @@ const messages = {
     introduction: "Hva vil det si å arbeide utforskende? Hvordan kan du lære bedre? Hva skal til for å få gruppearbeid til å fungere? I Verktøykassa finner både elever og lærere ressurser som er aktuelle for alle fag, og som støtter opp under læringsarbeid og utvikling av kunnskap, ferdigheter og forståelse."
   },
   meta: {
-    description: "Kvalitetssikrede og fritt tilgjengelige nettbaserte læremidler for videregående opplæring",
+    description: "Åpne og fritt tilgjengelige ressurser for videregående opplæring. Utviklet og oppdatert i samarbeid med dyktige lærere og elever.",
     keywords: "læremiddel,fag,skole,videregående,lærling,pensum,fagstoff"
   },
   masthead: {

package/lib/locale/messages-nn.js

@@ -236,7 +236,7 @@ const messages = {
     introduction: "Kva vil det seie å arbeide utforskande? Korleis kan du lære betre? Kva skal til for å få gruppearbeid til å fungere? I Verktøykassa finn både elevar og lærerar ressursar som er aktuelle for alle fag, og som støtter opp under læringsarbeid og utvikling av kunnskap, ferdigheter og forståing."
   },
   meta: {
-    description: "Kvalitetssikra og fritt tilgjengelege nettbaserte læremiddel for vidaregåande opplæring",
+    description: "Opne og fritt tilgjengelege ressursar for vidaregåande opplæring. Utvikla og oppdaterte i samarbeid med dyktige lærarar og elevar.",
     keywords: "læremiddel,fag,skole,skule,vidaregåande,lærling,pensum,fagstoff, "
   },
   masthead: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.52-alpha.0",
+  "version": "56.0.54-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,10 +33,10 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.31-alpha.0",
+    "@ndla/icons": "^8.0.32-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.46-alpha.0",
-    "@ndla/safelink": "^7.0.46-alpha.0",
+    "@ndla/primitives": "^1.0.47-alpha.0",
+    "@ndla/safelink": "^7.0.47-alpha.0",
     "@ndla/styled-system": "^0.0.24",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -50,13 +50,13 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.40",
+    "@ndla/preset-panda": "^0.0.41",
     "@ndla/types-backend": "^0.2.86",
-    "@ndla/types-embed": "^5.0.3-alpha.0",
+    "@ndla/types-embed": "^5.0.4-alpha.0",
     "@pandacss/dev": "^0.46.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2277fee3427d8c14db9b299485dc57f2779af69f"
+  "gitHead": "2cb315cb7418685fb4e4d28f83ec2affad062482"
 }