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

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.2-alpha.0",
+  "version": "56.0.4-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,13 +33,13 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^15.0.2-alpha.0",
+    "@ndla/button": "^15.0.4-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^8.0.2-alpha.0",
+    "@ndla/icons": "^8.0.4-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/primitives": "^1.0.2-alpha.0",
-    "@ndla/safelink": "^7.0.2-alpha.0",
+    "@ndla/primitives": "^1.0.4-alpha.0",
+    "@ndla/safelink": "^7.0.4-alpha.0",
     "@ndla/styled-system": "^0.0.10",
     "@ndla/typography": "^0.4.23",
     "@ndla/util": "^4.1.0",
@@ -60,7 +60,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.14",
+    "@ndla/preset-panda": "^0.0.15",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.0-alpha.0",
     "@pandacss/dev": "^0.44.0",
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "45fb10125bc642d020ed37c03b9492976ef7f0d6"
+  "gitHead": "0fdd094fea36baa5ee2bdfe5b2bc6c423d304f22"
 }

package/src/Article/Article.tsx

@@ -10,16 +10,11 @@ import { ReactNode } from "react";
 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 { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
 
-export const ArticleContent = styled("section", {
-  base: {
-    width: "100%",
-  },
-});
-
 export const ArticleWrapper = styled("article", {
   base: {
     display: "flex",

package/src/Article/ArticleByline.tsx

@@ -10,7 +10,7 @@ import { TFunction } from "i18next";
 import { ReactNode, 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,
@@ -195,7 +195,7 @@ const ArticleByline = ({
                 <h2>{t("article.useContent")}</h2>
               </Heading>
               <AccordionItemIndicator asChild>
-                <ChevronDown />
+                <ArrowDownShortLine />
               </AccordionItemIndicator>
             </AccordionItemTrigger>
             <AccordionItemContent>{licenseBox}</AccordionItemContent>
@@ -209,7 +209,7 @@ const ArticleByline = ({
                 <h2>{t("article.footnotes")}</h2>
               </Heading>
               <AccordionItemIndicator asChild>
-                <ChevronDown />
+                <ArrowDownShortLine />
               </AccordionItemIndicator>
             </AccordionItemTrigger>
             <AccordionItemContent>

package/src/Article/ArticleContent.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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, type HTMLArkProps } from "@ark-ui/react";
+import { cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+
+const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
+
+export const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<"div"> & JsxStyleProps>(
+  ({ className, ...props }, ref) => (
+    <StyledArticleContent className={cx("ndla-article", className)} {...props} ref={ref} />
+  ),
+);

package/src/Article/index.ts

@@ -9,7 +9,8 @@
 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/src/AudioPlayer/Controls.tsx

@@ -9,9 +9,9 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { SliderValueChangeDetails } from "@ark-ui/react";
-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,
@@ -234,10 +234,10 @@ const Controls = ({ src, title }: Props) => {
           aria-label={t("audio.controls.rewind15sec")}
           onClick={() => onSeekSeconds(-15)}
         >
-          <Back15 />
+          <Replay15Line />
         </Back15SecButton>
         <PlayButton aria-label={t(playing ? t("audio.pause") : t("audio.play"))} variant="primary" onClick={togglePlay}>
-          {playing ? <Pause /> : <Play />}
+          {playing ? <PauseLine /> : <PlayFill />}
         </PlayButton>
         <Forward15SecButton
           variant="tertiary"
@@ -245,7 +245,7 @@ const Controls = ({ src, title }: Props) => {
           aria-label={t("audio.controls.forward15sec")}
           onClick={() => onSeekSeconds(15)}
         >
-          <Forward15 />
+          <Forward15Line />
         </Forward15SecButton>
         <ProgressWrapper>
           <Text textStyle="label.medium" asChild consumeCss>
@@ -301,7 +301,7 @@ const Controls = ({ src, title }: Props) => {
                 <SelectItem key={speed} item={speed}>
                   <SelectItemText>{speed}x</SelectItemText>
                   <SelectItemIndicator>
-                    <Done />
+                    <CheckLine />
                   </SelectItemIndicator>
                 </SelectItem>
               ))}
@@ -311,7 +311,7 @@ const Controls = ({ src, title }: Props) => {
         <PopoverRoot positioning={{ placement: "top" }}>
           <PopoverTrigger asChild>
             <VolumeButton variant="tertiary" aria-label={t("audio.controls.adjustVolume")}>
-              <VolumeUp />
+              <VolumeUpFill />
             </VolumeButton>
           </PopoverTrigger>
           <PopoverContent>

package/src/AudioPlayer/SpeechControl.tsx

@@ -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";
 
 type Props = {
@@ -38,7 +38,7 @@ const SpeechControl = ({ src, title, type = "audio" }: Props) => {
       <TooltipRoot>
         <TooltipTrigger asChild>
           <IconButton variant="tertiary" aria-label={t(`${type}.play`)} onClick={togglePlay}>
-            <VolumeUp />
+            <VolumeUpFill />
           </IconButton>
         </TooltipTrigger>
         <TooltipContent>{t(`${type}.play`)}</TooltipContent>

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useRef, useImperativeHandle, ReactNode, 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";
 
@@ -67,7 +67,7 @@ const BreadcrumbItem = forwardRef<any, Props>(({ renderItem, renderSeparator, it
           <span>{name}</span>
         </SafeLink>
       )}
-      {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <ChevronRight />}
+      {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <ArrowRightShortLine />}
     </StyledListItem>
   );
 });

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -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";
@@ -25,7 +25,7 @@ const StyledSafeLink = styled(SafeLink, {
   },
 });
 
-const StyledChevronRight = styled(ChevronRight, {
+const StyledArrowRight = styled(ArrowRightShortLine, {
   base: {
     tabletDown: {
       display: "none",
@@ -51,7 +51,7 @@ const HomeBreadcrumb = ({ items }: Props) => {
     if (item.index === 0 && typeof item.name === "string") {
       return (
         <IconSafeLink aria-label={item.name} to={item.to}>
-          <Home title={item.name} />
+          <HomeFill title={item.name} />
         </IconSafeLink>
       );
     }
@@ -63,9 +63,9 @@ const HomeBreadcrumb = ({ items }: Props) => {
       return null;
     }
     if (item.index === 0) {
-      return <StyledChevronRight />;
+      return <StyledArrowRight />;
     }
-    return <ChevronRight />;
+    return <ArrowRightShortLine />;
   };
 
   return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;

package/src/CampaignBlock/CampaignBlock.tsx

@@ -8,7 +8,7 @@
 
 import parse from "html-react-parser";
 import { ReactNode } from "react";
-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";
@@ -136,7 +136,7 @@ const CampaignBlock = ({
           <MaybeLinkText url={url.url} path={path}>
             <LinkText textStyle="body.medium">
               {parse(url.text ?? "")}
-              <Forward />
+              <ArrowRightLine />
             </LinkText>
           </MaybeLinkText>
         )}

package/src/ContentTypeBadge/ContentTypeBadge.stories.tsx

@@ -6,9 +6,8 @@
  *
  */
 
-import styled from "@emotion/styled";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { spacing } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 import { ContentTypeBadge } from "./ContentTypeBadge";
 import * as contentTypes from "../model/ContentType";
 
@@ -54,11 +53,13 @@ export const NoBackground: StoryObj<typeof ContentTypeBadge> = {
   },
 };
 
-const BadgesWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.small};
-`;
+const BadgesWrapper = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "xsmall",
+  },
+});
 
 export const AllBadges: StoryFn<typeof ContentTypeBadge> = ({ ...args }) => (
   <BadgesWrapper>

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -9,19 +9,10 @@
 import { CSSProperties, ComponentPropsWithoutRef, 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";
@@ -106,7 +97,7 @@ const StyledContentTypeBadge = styled("div", {
 
 const iconMap = {
   [contentTypes.SUBJECT_MATERIAL]: {
-    icon: SubjectMaterial,
+    icon: FileListLine,
     iconColor: colors.subjectMaterial.dark,
     backgroundColor: colors.subjectMaterial.light,
   },
@@ -116,12 +107,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,
   },
@@ -136,41 +127,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,
   },

package/src/ContentTypeBadge/ContentTypeBadgeNew.stories.tsx

@@ -8,7 +8,7 @@
 
 import { useTranslation } from "react-i18next";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { Video } from "@ndla/icons/editor";
+import { MovieLine } from "@ndla/icons/editor";
 import { HStack, styled } from "@ndla/styled-system/jsx";
 import { ContentTypeBadge } from "./ContentTypeBadgeNew";
 
@@ -63,7 +63,7 @@ export const ContentOverride: StoryFn<typeof ContentTypeBadge> = () => {
   const { t } = useTranslation();
   return (
     <StyledContentTypeBadge contentType="video">
-      <Video size="small" />
+      <MovieLine size="small" />
       {t("contentTypes.video")}
     </StyledContentTypeBadge>
   );