@ndla/ui 56.0.2-alpha.0 → 56.0.4-alpha.0

package/dist/panda.buildinfo.json

@@ -2,7 +2,6 @@
   "schemaVersion": "0.44.0",
   "styles": {
     "atomic": [
-      "width]___[value:100%",
       "display]___[value:flex",
       "flexDirection]___[value:column",
       "color]___[value:text.default",
@@ -11,6 +10,7 @@
       "paddingBlock]___[value:xsmall",
       "paddingInline]___[value:8%",
       "alignItems]___[value:center",
+      "width]___[value:100%",
       "overflowWrap]___[value:break-word",
       "position]___[value:relative",
       "paddingBlock]___[value:medium]___[cond:tablet",
@@ -331,14 +331,46 @@
       "transitionDuration]___[value:fast]___[cond:& svg",
       "transform]___[value:rotate(180deg)]___[cond:_open<___>& svg",
       "display]___[value:none]___[cond:_print",
+      "textUnderlineOffset]___[value:2px",
+      "paddingBlock]___[value:small",
+      "paddingInlineEnd]___[value:medium",
+      "paddingInlineStart]___[value:small",
+      "flexDirection]___[value:row",
+      "inset]___[value:0]___[cond:_before",
+      "zIndex]___[value:0]___[cond:_before",
+      "background]___[value:surface.infoSubtle",
+      "borderBlockEnd]___[value:1px solid",
+      "backgroundColor]___[value:surface.infoSubtle.hover]___[cond:_hover",
       "gap]___[value:small",
       "paddingInline]___[value:0",
       "marginBlockStart]___[value:3xsmall",
-      "paddingBlock]___[value:small",
       "background]___[value:surface.brand.1.subtle]___[cond:_first",
       "borderColor]___[value:stroke.default]___[cond:_first",
       "fontWeight]___[value:bold]___[cond:_first<___>& p",
       "fontStyle]___[value:italic",
+      "display]___[value:grid",
+      "gridRowGap]___[value:large",
+      "gridColumnGap]___[value:medium",
+      "backgroundColor]___[value:background.subtle",
+      "maxWidth]___[value:surface.4xlarge",
+      "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))",
+      "gridTemplateColumns]___[value:repeat(1, minmax(0, 1fr))]___[cond:tabletDown",
+      "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))]___[cond:tabletToDesktop",
+      "display]___[value:flex]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "flexFlow]___[value:column]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "justifyContent]___[value:center]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "alignItems]___[value:center]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "gridColumn]___[value:span 2]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "gridTemplateColumns]___[value:repeat(3, minmax(0, 1fr))]___[cond:desktop",
+      "gridTemplateColumns]___[value:repeat(4, minmax(0, 1fr))]___[cond:desktop",
+      "backgroundColor]___[value:surface.default",
+      "backgroundColor]___[value:transparent",
+      "borderColor]___[value:surface.brand.2",
+      "top]___[value:var(--masthead-height, 0px)]___[cond:& > div",
+      "position]___[value:sticky]___[cond:& > div",
+      "width]___[value:surface.3xsmall",
+      "textStyle]___[value:heading.large",
+      "textStyle]___[value:title.medium",
       "position]___[value:relative!",
       "width]___[value:83.333%",
       "right]___[value:auto !important",
@@ -388,9 +420,6 @@
       "width]___[value:large]___[cond:_hover<___>& [data-forward]",
       "height]___[value:large]___[cond:_hover<___>& [data-forward]",
       "color]___[value:icon.strong",
-      "inset]___[value:0]___[cond:_before",
-      "zIndex]___[value:0]___[cond:_before",
-      "display]___[value:grid",
       "gridTemplateColumns]___[value:repeat(2, 1fr)",
       "gridTemplateColumns]___[value:1fr]___[cond:tabletDown",
       "marginBlockStart]___[value:xsmall",

package/dist/styles.css

@@ -48,6 +48,30 @@
       line-height: calc(var(--line-heights-medium) * 1.11);
 }
 
+    .textStyle_heading\.large {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-bold);
+      font-size: var(--font-sizes-4xlarge);
+      line-height: var(--line-heights-4xlarge);
+}
+
+    .textStyle_heading\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-4xlarge) * 1.11);
+      line-height: calc(var(--line-heights-4xlarge) * 1.11);
+}
+
+    .textStyle_title\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-bold);
+      font-size: var(--font-sizes-large);
+      line-height: var(--line-heights-large);
+}
+
+    .textStyle_title\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-large) * 1.11);
+      line-height: calc(var(--line-heights-large) * 1.11);
+}
+
     .\[\&_a\]\:textStyle_label\.xsmall a {
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
@@ -61,10 +85,6 @@
 }
 }
 
-  .w_100\% {
-    width: 100%;
-}
-
   .d_flex {
     display: flex;
 }
@@ -89,6 +109,10 @@
     padding-inline: 8%;
 }
 
+  .w_100\% {
+    width: 100%;
+}
+
   .ov-wrap_break-word {
     overflow-wrap: break-word;
 }
@@ -491,6 +515,30 @@
     clear: both;
 }
 
+  .tu-o_2px {
+    text-underline-offset: 2px;
+}
+
+  .py_small {
+    padding-block: var(--spacing-small);
+}
+
+  .pe_medium {
+    padding-inline-end: var(--spacing-medium);
+}
+
+  .ps_small {
+    padding-inline-start: var(--spacing-small);
+}
+
+  .bg_surface\.infoSubtle {
+    background: var(--colors-surface-info-subtle);
+}
+
+  .bd-be_1px_solid {
+    border-block-end: 1px solid;
+}
+
   .gap_small {
     gap: var(--spacing-small);
 }
@@ -503,8 +551,16 @@
     margin-block-start: var(--spacing-3xsmall);
 }
 
-  .py_small {
-    padding-block: var(--spacing-small);
+  .d_grid {
+    display: grid;
+}
+
+  .max-w_surface\.4xlarge {
+    max-width: var(--sizes-surface-4xlarge);
+}
+
+  .w_surface\.3xsmall {
+    width: var(--sizes-surface-3xsmall);
 }
 
   .pos_relative\! {
@@ -547,10 +603,6 @@
     color: var(--colors-icon-strong);
 }
 
-  .d_grid {
-    display: grid;
-}
-
   .mbs_xsmall {
     margin-block-start: var(--spacing-xsmall);
 }
@@ -760,10 +812,42 @@
     bottom: calc(var(--spacing-medium) * -1);
 }
 
+  .flex-d_row {
+    flex-direction: row;
+}
+
   .font-style_italic {
     font-style: italic;
 }
 
+  .grid-rg_large {
+    grid-row-gap: var(--spacing-large);
+}
+
+  .grid-cg_medium {
+    grid-column-gap: var(--spacing-medium);
+}
+
+  .bg-c_background\.subtle {
+    background-color: var(--colors-background-subtle);
+}
+
+  .grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+  .bg-c_surface\.default {
+    background-color: var(--colors-surface-default);
+}
+
+  .bg-c_transparent {
+    background-color: transparent;
+}
+
+  .bd-c_surface\.brand\.2 {
+    border-color: var(--colors-surface-brand-2);
+}
+
   .right_auto\! {
     right: auto !important;
 }
@@ -1059,10 +1143,22 @@
     padding-block-end: var(--spacing-xsmall);
 }
 
+  .before\:inset_0::before {
+    inset: 0;
+}
+
+  .before\:z_0::before {
+    z-index: 0;
+}
+
   .first\:bg_surface\.brand\.1\.subtle:first-child {
     background: var(--colors-surface-brand-1-subtle);
 }
 
+  .\[\&_\>_div\]\:pos_sticky > div {
+    position: sticky;
+}
+
   .after\:d_block\!::after {
     display: block !important;
 }
@@ -1075,14 +1171,6 @@
     text-decoration: underline;
 }
 
-  .before\:inset_0::before {
-    inset: 0;
-}
-
-  .before\:z_0::before {
-    z-index: 0;
-}
-
   .after\:content_0::after {
     content: 0;
 }
@@ -1187,6 +1275,10 @@
     border-color: var(--colors-stroke-default);
 }
 
+  .\[\&_\>_div\]\:top_var\(--masthead-height\,_0px\) > div {
+    top: var(--masthead-height, 0px);
+}
+
   .after\:content_\"\"\!::after {
     content: "" !important;
 }
@@ -1243,6 +1335,10 @@
     border-color: var(--colors-text-link);
 }
 
+  .hover\:bg-c_surface\.infoSubtle\.hover:is(:hover, [data-hover]) {
+    background-color: var(--colors-surface-info-subtle-hover);
+}
+
   .active\:bg_surface\.actionSubtle\.active:is(:active, [data-active]) {
     background: var(--colors-surface-action-subtle-active);
 }
@@ -1397,6 +1493,27 @@
     .\[\&_svg\]\:tablet\:h_12px svg {
       height: 12px;
 }
+}
+
+  @media screen and (min-width: 37.5625rem) and (max-width: 61.31rem) {
+    .tabletToDesktop\:grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:d_flex > div:nth-child(3):last-child {
+      display: flex;
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:flex-flow_column > div:nth-child(3):last-child {
+      flex-flow: column;
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:grid-c_span_2 > div:nth-child(3):last-child {
+      grid-column: span 2;
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:jc_center > div:nth-child(3):last-child {
+      justify-content: center;
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:ai_center > div:nth-child(3):last-child {
+      align-items: center;
+}
 }
 
   @media screen and (min-width: 48rem) {
@@ -1435,6 +1552,12 @@
 }
     .desktop\:top_xxlarge {
       top: var(--spacing-xxlarge);
+}
+    .desktop\:grid-tc_repeat\(3\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+    .desktop\:grid-tc_repeat\(4\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 }
 
@@ -1495,6 +1618,9 @@
 }
     .tabletDown\:bdr_0 {
       border-radius: 0;
+}
+    .tabletDown\:grid-tc_repeat\(1\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
 }
     .tabletDown\:grid-tc_1fr {
       grid-template-columns: 1fr;

package/es/Article/Article.js

@@ -9,13 +9,9 @@
 import { Heading, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import ArticleByline from "./ArticleByline";
+import { ArticleContent } from "./ArticleContent";
 import { ContentTypeBadgeNew } from "..";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArticleContent = styled("section", {
-  base: {
-    width: "100%"
-  }
-});
 export const ArticleWrapper = styled("article", {
   base: {
     display: "flex",

package/es/Article/ArticleByline.js

@@ -9,7 +9,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import { ChevronDown } from "@ndla/icons/common";
+import { ArrowDownShortLine } from "@ndla/icons/common";
 import { getLicenseByAbbreviation } from "@ndla/licenses";
 import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -158,7 +158,7 @@ const ArticleByline = _ref => {
             })
           }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
             asChild: true,
-            children: /*#__PURE__*/_jsx(ChevronDown, {})
+            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
           })]
         }), /*#__PURE__*/_jsx(AccordionItemContent, {
           children: licenseBox
@@ -176,7 +176,7 @@ const ArticleByline = _ref => {
             })
           }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
             asChild: true,
-            children: /*#__PURE__*/_jsx(ChevronDown, {})
+            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
           })]
         }), /*#__PURE__*/_jsx(AccordionItemContent, {
           children: /*#__PURE__*/_jsx(ArticleFootNotes, {

package/es/Article/ArticleContent.js

@@ -0,0 +1,27 @@
+/**
+ * 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 { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledArticleContent = styled(ark.section, {}, {
+  baseComponent: true
+});
+export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledArticleContent, {
+    className: cx("ndla-article", className),
+    ...props,
+    ref: ref
+  });
+});

package/es/Article/index.js

@@ -8,6 +8,7 @@
 
 import ArticleByline from "./ArticleByline";
 import ArticleFootNotes from "./ArticleFootNotes";
-export { Article, ArticleContent, ArticleWrapper, ArticleHeader, ArticleFooter } from "./Article";
+export { Article, ArticleWrapper, ArticleHeader, ArticleFooter } from "./Article";
+export { ArticleContent } from "./ArticleContent";
 export { ArticleByline, ArticleFootNotes };
 export { ArticleParagraph } from "./ArticleParagraph";

package/es/AudioPlayer/Controls.js

@@ -8,9 +8,9 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Back15, Forward15 } from "@ndla/icons/action";
-import { Play, Pause, VolumeUp } from "@ndla/icons/common";
-import { Done } from "@ndla/icons/editor";
+import { Replay15Line, Forward15Line } from "@ndla/icons/action";
+import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
+import { CheckLine } from "@ndla/icons/editor";
 import { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { visuallyHidden } from "@ndla/styled-system/patterns";
@@ -195,18 +195,18 @@ const Controls = _ref => {
         title: t("audio.controls.rewind15sec"),
         "aria-label": t("audio.controls.rewind15sec"),
         onClick: () => onSeekSeconds(-15),
-        children: /*#__PURE__*/_jsx(Back15, {})
+        children: /*#__PURE__*/_jsx(Replay15Line, {})
       }), /*#__PURE__*/_jsx(PlayButton, {
         "aria-label": t(playing ? t("audio.pause") : t("audio.play")),
         variant: "primary",
         onClick: togglePlay,
-        children: playing ? /*#__PURE__*/_jsx(Pause, {}) : /*#__PURE__*/_jsx(Play, {})
+        children: playing ? /*#__PURE__*/_jsx(PauseLine, {}) : /*#__PURE__*/_jsx(PlayFill, {})
       }), /*#__PURE__*/_jsx(Forward15SecButton, {
         variant: "tertiary",
         title: t("audio.controls.forward15sec"),
         "aria-label": t("audio.controls.forward15sec"),
         onClick: () => onSeekSeconds(15),
-        children: /*#__PURE__*/_jsx(Forward15, {})
+        children: /*#__PURE__*/_jsx(Forward15Line, {})
       }), /*#__PURE__*/_jsxs(ProgressWrapper, {
         children: [/*#__PURE__*/_jsx(Text, {
           textStyle: "label.medium",
@@ -270,7 +270,7 @@ const Controls = _ref => {
               children: [/*#__PURE__*/_jsxs(SelectItemText, {
                 children: [speed, "x"]
               }), /*#__PURE__*/_jsx(SelectItemIndicator, {
-                children: /*#__PURE__*/_jsx(Done, {})
+                children: /*#__PURE__*/_jsx(CheckLine, {})
               })]
             }, speed))
           })
@@ -284,7 +284,7 @@ const Controls = _ref => {
           children: /*#__PURE__*/_jsx(VolumeButton, {
             variant: "tertiary",
             "aria-label": t("audio.controls.adjustVolume"),
-            children: /*#__PURE__*/_jsx(VolumeUp, {})
+            children: /*#__PURE__*/_jsx(VolumeUpFill, {})
           })
         }), /*#__PURE__*/_jsx(PopoverContent, {
           children: /*#__PURE__*/_jsxs(SliderRoot, {

package/es/AudioPlayer/SpeechControl.js

@@ -8,7 +8,7 @@
 
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { VolumeUp } from "@ndla/icons/common";
+import { VolumeUpFill } from "@ndla/icons/common";
 import { TooltipRoot, TooltipTrigger, TooltipContent, IconButton } from "@ndla/primitives";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SpeechControl = _ref => {
@@ -45,7 +45,7 @@ const SpeechControl = _ref => {
           variant: "tertiary",
           "aria-label": t(`${type}.play`),
           onClick: togglePlay,
-          children: /*#__PURE__*/_jsx(VolumeUp, {})
+          children: /*#__PURE__*/_jsx(VolumeUpFill, {})
         })
       }), /*#__PURE__*/_jsx(TooltipContent, {
         children: t(`${type}.play`)

package/es/Breadcrumb/BreadcrumbItem.js

@@ -7,7 +7,7 @@
  */
 
 import { useRef, useImperativeHandle, forwardRef } from "react";
-import { ChevronRight } from "@ndla/icons/common";
+import { ArrowRightShortLine } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -51,7 +51,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((_ref, ref) => {
       children: /*#__PURE__*/_jsx("span", {
         children: name
       })
-    }), renderSeparator ? renderSeparator(item, totalCount) : !isLast && /*#__PURE__*/_jsx(ChevronRight, {})]
+    }), renderSeparator ? renderSeparator(item, totalCount) : !isLast && /*#__PURE__*/_jsx(ArrowRightShortLine, {})]
   });
 });
 export default BreadcrumbItem;

package/es/Breadcrumb/HomeBreadcrumb.js

@@ -6,7 +6,7 @@
  *
  */
 
-import { ChevronRight, Home } from "@ndla/icons/common";
+import { ArrowRightShortLine, HomeFill } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import Breadcrumb from "./Breadcrumb";
@@ -23,7 +23,7 @@ const StyledSafeLink = styled(SafeLink, {
     }
   }
 });
-const StyledChevronRight = styled(ChevronRight, {
+const StyledArrowRight = styled(ArrowRightShortLine, {
   base: {
     tabletDown: {
       display: "none"
@@ -49,7 +49,7 @@ const HomeBreadcrumb = _ref => {
       return /*#__PURE__*/_jsx(IconSafeLink, {
         "aria-label": item.name,
         to: item.to,
-        children: /*#__PURE__*/_jsx(Home, {
+        children: /*#__PURE__*/_jsx(HomeFill, {
           title: item.name
         })
       });
@@ -64,9 +64,9 @@ const HomeBreadcrumb = _ref => {
       return null;
     }
     if (item.index === 0) {
-      return /*#__PURE__*/_jsx(StyledChevronRight, {});
+      return /*#__PURE__*/_jsx(StyledArrowRight, {});
     }
-    return /*#__PURE__*/_jsx(ChevronRight, {});
+    return /*#__PURE__*/_jsx(ArrowRightShortLine, {});
   };
   return /*#__PURE__*/_jsx(Breadcrumb, {
     items: items,

package/es/CampaignBlock/CampaignBlock.js

@@ -7,7 +7,7 @@
  */
 
 import parse from "html-react-parser";
-import { Forward } from "@ndla/icons/common";
+import { ArrowRightLine } from "@ndla/icons/common";
 import { Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
@@ -130,7 +130,7 @@ const CampaignBlock = _ref2 => {
           path: path,
           children: /*#__PURE__*/_jsxs(LinkText, {
             textStyle: "body.medium",
-            children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(Forward, {})]
+            children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
           })
         })]
       }), imageSide !== "left" && imageComponent]

package/es/ContentTypeBadge/ContentTypeBadge.js

@@ -8,10 +8,10 @@
 
 import { useMemo } from "react";
 import { colors } from "@ndla/core";
-import { Minus, MenuBook } from "@ndla/icons/action";
-import { Audio } from "@ndla/icons/common";
-import { AssessmentResource, ExternalLearningResource, LearningPath, MultidisciplinaryTopic, SharedResource, Subject, SubjectMaterial, TasksAndActivities } from "@ndla/icons/contentType";
-import { Concept, Media, Video } from "@ndla/icons/editor";
+import { BookmarkLine, SubtractLine } from "@ndla/icons/action";
+import { BookReadFill, ShareFill, VoicePrintLine } from "@ndla/icons/common";
+import { MenuSearchLine, LearningPath, SharedResource, TasksAndActivities } from "@ndla/icons/contentType";
+import { ChatLine, FileListLine, LinkMedium, ImageLine, MovieLine } from "@ndla/icons/editor";
 import { styled } from "@ndla/styled-system/jsx";
 import * as contentTypes from "../model/ContentType";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -85,7 +85,7 @@ const StyledContentTypeBadge = styled("div", {
 });
 const iconMap = {
   [contentTypes.SUBJECT_MATERIAL]: {
-    icon: SubjectMaterial,
+    icon: FileListLine,
     iconColor: colors.subjectMaterial.dark,
     backgroundColor: colors.subjectMaterial.light
   },
@@ -95,12 +95,12 @@ const iconMap = {
     backgroundColor: colors.tasksAndActivities.light
   },
   [contentTypes.ASSESSMENT_RESOURCES]: {
-    icon: AssessmentResource,
+    icon: MenuSearchLine,
     iconColor: colors.assessmentResource.dark,
     backgroundColor: colors.assessmentResource.light
   },
   [contentTypes.SUBJECT]: {
-    icon: MenuBook,
+    icon: BookReadFill,
     iconColor: colors.subject.dark,
     backgroundColor: colors.subject.light
   },
@@ -115,41 +115,41 @@ const iconMap = {
     backgroundColor: colors.learningPath.light
   },
   [contentTypes.TOPIC]: {
-    icon: Subject,
+    icon: BookmarkLine,
     iconColor: colors.subject.dark,
     backgroundColor: colors.subject.light
   },
   [contentTypes.MULTIDISCIPLINARY_TOPIC]: {
-    icon: MultidisciplinaryTopic,
+    icon: ShareFill,
     backgroundColor: "#b9b37b"
   },
   [contentTypes.CONCEPT]: {
-    icon: Concept,
+    icon: ChatLine,
     iconColor: colors.concept.text,
     backgroundColor: colors.concept.light
   },
   [contentTypes.EXTERNAL]: {
-    icon: ExternalLearningResource,
+    icon: LinkMedium,
     iconColor: colors.external.dark,
     backgroundColor: colors.external.light
   },
   [contentTypes.resourceEmbedTypeMapping.image]: {
-    icon: Media,
+    icon: ImageLine,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight
   },
   [contentTypes.resourceEmbedTypeMapping.audio]: {
-    icon: Audio,
+    icon: VoicePrintLine,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight
   },
   [contentTypes.resourceEmbedTypeMapping.video]: {
-    icon: Video,
+    icon: MovieLine,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight
   },
   [contentTypes.MISSING]: {
-    icon: Minus,
+    icon: SubtractLine,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight
   }