@ndla/ui 56.0.74-alpha.0 → 56.0.75-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.46.0",
+  "schemaVersion": "0.48.0",
   "styles": {
     "atomic": [
       "background]___[value:background.default",
@@ -171,26 +171,6 @@
       "width]___[value:surface.xsmall",
       "height]___[value:surface.xsmall",
       "fontFamily]___[value:serif",
-      "display]___[value:inline-flex",
-      "borderRadius]___[value:100%",
-      "color]___[value:var(--icon-color)",
-      "width]___[value:20px",
-      "height]___[value:20px",
-      "width]___[value:10px]___[cond:& svg",
-      "height]___[value:10px]___[cond:& svg",
-      "height]___[value:26px]___[cond:tablet",
-      "width]___[value:26px]___[cond:tablet",
-      "width]___[value:12px]___[cond:& svg<___>tablet",
-      "height]___[value:12px]___[cond:& svg<___>tablet",
-      "width]___[value:34px",
-      "height]___[value:34px",
-      "width]___[value:50px",
-      "height]___[value:50px",
-      "width]___[value:25px]___[cond:& svg",
-      "height]___[value:25px]___[cond:& svg",
-      "border]___[value:2px solid",
-      "borderColor]___[value:var(--icon-color)",
-      "backgroundColor]___[value:var(--background-color)",
       "opacity]___[value:1]___[cond:_hover<___>& [data-copy-button]",
       "cursor]___[value:pointer]___[cond:_hover<___>& [data-copy-button]",
       "position]___[value:absolute",
@@ -250,6 +230,7 @@
       "right]___[value:xsmall",
       "width]___[value:medium",
       "height]___[value:medium",
+      "border]___[value:2px solid",
       "borderColor]___[value:background.default",
       "transitionProperty]___[value:transform, background-color, color",
       "transitionDuration]___[value:normal",
@@ -349,6 +330,7 @@
       "color]___[value:text.subtle",
       "borderColor]___[value:stroke.error",
       "background]___[value:surface.dangerSubtle",
+      "display]___[value:inline-flex",
       "whiteSpace]___[value:pre-wrap",
       "display]___[value:grid]___[cond:mobileWideDown",
       "gridTemplateColumns]___[value:1fr auto]___[cond:mobileWideDown",

package/dist/styles.css

@@ -393,46 +393,6 @@
     height: var(--sizes-surface-xsmall);
 }
 
-  .d_inline-flex {
-    display: inline-flex;
-}
-
-  .bdr_100\% {
-    border-radius: 100%;
-}
-
-  .c_var\(--icon-color\) {
-    color: var(--icon-color);
-}
-
-  .w_20px {
-    width: 20px;
-}
-
-  .h_20px {
-    height: 20px;
-}
-
-  .w_34px {
-    width: 34px;
-}
-
-  .h_34px {
-    height: 34px;
-}
-
-  .w_50px {
-    width: 50px;
-}
-
-  .h_50px {
-    height: 50px;
-}
-
-  .bd_2px_solid {
-    border: 2px solid;
-}
-
   .pos_absolute {
     position: absolute;
 }
@@ -509,6 +469,10 @@
     height: var(--sizes-medium);
 }
 
+  .bd_2px_solid {
+    border: 2px solid;
+}
+
   .c_background\.default {
     color: var(--colors-background-default);
 }
@@ -577,6 +541,10 @@
     background: var(--colors-surface-danger-subtle);
 }
 
+  .d_inline-flex {
+    display: inline-flex;
+}
+
   .white-space_pre-wrap {
     white-space: pre-wrap;
 }
@@ -685,14 +653,6 @@
     font-family: var(--fonts-serif);
 }
 
-  .bd-c_var\(--icon-color\) {
-    border-color: var(--icon-color);
-}
-
-  .bg-c_var\(--background-color\) {
-    background-color: var(--background-color);
-}
-
   .left_-xxlarge {
     left: calc(var(--spacing-xxlarge) * -1);
 }
@@ -911,22 +871,6 @@
     z-index: var(--z-index-hide);
 }
 
-  .\[\&_svg\]\:w_10px svg {
-    width: 10px;
-}
-
-  .\[\&_svg\]\:h_10px svg {
-    height: 10px;
-}
-
-  .\[\&_svg\]\:w_25px svg {
-    width: 25px;
-}
-
-  .\[\&_svg\]\:h_25px svg {
-    height: 25px;
-}
-
   .\[\&_\>_\*\:not\(\:where\(\:first-child\)\)\]\:mbs_xsmall > *:not(:where(:first-child)) {
     margin-block-start: var(--spacing-xsmall);
 }
@@ -1351,12 +1295,6 @@
 }
     .tablet\:box-orient_vertical {
       box-orient: vertical;
-}
-    .tablet\:h_26px {
-      height: 26px;
-}
-    .tablet\:w_26px {
-      width: 26px;
 }
     .tablet\:ai_unset {
       align-items: unset;
@@ -1375,12 +1313,6 @@
 }
     .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:px_medium[data-has-image='true'] {
       padding-inline: var(--spacing-medium);
-}
-    .\[\&_svg\]\:tablet\:w_12px svg {
-      width: 12px;
-}
-    .\[\&_svg\]\:tablet\:h_12px svg {
-      height: 12px;
 }
 }
 

package/es/Article/Article.js

@@ -11,7 +11,7 @@ import { ark } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
 import { Stack, styled } from "@ndla/styled-system/jsx";
-import { ContentTypeBadgeNew } from "..";
+import { ContentTypeBadge } from "..";
 import { ArticleByline } from "./ArticleByline";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledArticleContent = styled(ark.section, {}, {
@@ -118,7 +118,7 @@ export const ArticleTitle = _ref2 => {
         align: "center",
         direction: "row",
         gap: "small",
-        children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
+        children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadge, {
           contentType: contentType,
           children: contentTypeLabel
         }), heartButton]

package/es/ContentTypeBadge/ContentTypeBadge.js

@@ -1,228 +1,50 @@
 /**
- * Copyright (c) 2018-present, NDLA.
+ * 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 { useMemo } from "react";
-import { colors } from "@ndla/core";
-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 { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Badge } from "@ndla/primitives";
 import * as contentTypes from "../model/ContentType";
-
-// TODO: Remove this component
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledContentTypeBadge = styled("div", {
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "100%",
-    color: "var(--icon-color)"
-  },
-  defaultVariants: {
-    size: "small",
-    border: true,
-    background: false
-  },
-  variants: {
-    size: {
-      "xx-small": {
-        width: "20px",
-        height: "20px",
-        border: "1px solid",
-        "& svg": {
-          width: "10px",
-          height: "10px"
-        }
-      },
-      "x-small": {
-        width: "20px",
-        height: "20px",
-        border: "1px solid",
-        tablet: {
-          height: "26px",
-          width: "26px"
-        },
-        "& svg": {
-          width: "10px",
-          height: "10px",
-          tablet: {
-            width: "12px",
-            height: "12px"
-          }
-        }
-      },
-      small: {
-        width: "34px",
-        height: "34px"
-      },
-      large: {
-        width: "50px",
-        height: "50px",
-        "& svg": {
-          width: "25px",
-          height: "25px"
-        }
-      }
-    },
-    border: {
-      true: {
-        border: "2px solid",
-        borderColor: "var(--icon-color)"
-      },
-      false: {}
-    },
-    background: {
-      true: {
-        backgroundColor: "var(--background-color)"
-      }
-    }
-  }
-});
-const iconMap = {
-  [contentTypes.SUBJECT_MATERIAL]: {
-    icon: FileListLine,
-    iconColor: colors.subjectMaterial.dark,
-    backgroundColor: colors.subjectMaterial.light
-  },
-  [contentTypes.TASKS_AND_ACTIVITIES]: {
-    icon: TasksAndActivities,
-    iconColor: colors.tasksAndActivities.dark,
-    backgroundColor: colors.tasksAndActivities.light
-  },
-  [contentTypes.ASSESSMENT_RESOURCES]: {
-    icon: MenuSearchLine,
-    iconColor: colors.assessmentResource.dark,
-    backgroundColor: colors.assessmentResource.light
-  },
-  [contentTypes.SUBJECT]: {
-    icon: BookReadFill,
-    iconColor: colors.subject.dark,
-    backgroundColor: colors.subject.light
-  },
-  [contentTypes.SOURCE_MATERIAL]: {
-    icon: SharedResource,
-    iconColor: colors.sourceMaterial.dark,
-    backgroundColor: colors.sourceMaterial.light
-  },
-  [contentTypes.LEARNING_PATH]: {
-    icon: LearningPath,
-    iconColor: colors.learningPath.dark,
-    backgroundColor: colors.learningPath.light
-  },
-  [contentTypes.TOPIC]: {
-    icon: BookmarkLine,
-    iconColor: colors.subject.dark,
-    backgroundColor: colors.subject.light
-  },
-  [contentTypes.MULTIDISCIPLINARY]: {
-    icon: ShareFill,
-    backgroundColor: "#b9b37b"
-  },
-  [contentTypes.CONCEPT]: {
-    icon: ChatLine,
-    iconColor: colors.concept.text,
-    backgroundColor: colors.concept.light
-  },
-  [contentTypes.EXTERNAL]: {
-    icon: LinkMedium,
-    iconColor: colors.external.dark,
-    backgroundColor: colors.external.light
-  },
-  [contentTypes.resourceEmbedTypeMapping.image]: {
-    icon: ImageLine,
-    iconColor: colors.brand.grey,
-    backgroundColor: colors.brand.greyLight
-  },
-  [contentTypes.resourceEmbedTypeMapping.audio]: {
-    icon: VoicePrintLine,
-    iconColor: colors.brand.grey,
-    backgroundColor: colors.brand.greyLight
-  },
-  [contentTypes.resourceEmbedTypeMapping.video]: {
-    icon: MovieLine,
-    iconColor: colors.brand.grey,
-    backgroundColor: colors.brand.greyLight
-  },
-  [contentTypes.MISSING]: {
-    icon: SubtractLine,
-    iconColor: colors.brand.grey,
-    backgroundColor: colors.brand.greyLight
-  }
+export const contentTypeToBadgeVariantMap = {
+  [contentTypes.SUBJECT_MATERIAL]: "brand1",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2",
+  [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
+  [contentTypes.SUBJECT]: "neutral",
+  [contentTypes.SOURCE_MATERIAL]: "brand1",
+  [contentTypes.LEARNING_PATH]: "brand3",
+  [contentTypes.TOPIC]: "neutral",
+  [contentTypes.MULTIDISCIPLINARY]: "neutral",
+  [contentTypes.CONCEPT]: "brand1",
+  [contentTypes.EXTERNAL]: "brand2",
+  [contentTypes.IMAGE]: "brand1",
+  [contentTypes.AUDIO]: "brand1",
+  [contentTypes.PODCAST]: "brand1",
+  [contentTypes.VIDEO]: "brand1",
+  [contentTypes.MISSING]: "neutral",
+  [contentTypes.PODCAST_SERIES]: "brand1",
+  [contentTypes.GLOSS]: "brand1",
+  [contentTypes.PROGRAMME]: "neutral",
+  [contentTypes.FRONTPAGE_ARTICLE]: "brand2"
 };
-export const ContentTypeBadge = _ref => {
+export const ContentTypeBadge = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    type,
-    background,
-    title,
-    size = "small",
-    border = true,
-    className,
-    ...rest
+    contentType,
+    children,
+    ...props
   } = _ref;
   const {
-    Icon,
-    style
-  } = useMemo(() => {
-    const fromMap = iconMap[type];
-    const style = {
-      "--icon-color": fromMap.iconColor,
-      "--background-color": fromMap.backgroundColor
-    };
-    return {
-      Icon: fromMap.icon,
-      style
-    };
-  }, [type]);
-  return /*#__PURE__*/_jsx(StyledContentTypeBadge, {
-    title: title,
-    background: background,
-    size: size,
-    border: border,
-    style: style,
-    "aria-label": title,
-    className: className,
-    "data-badge": "",
-    "data-type": type,
-    ...rest,
-    children: /*#__PURE__*/_jsx(Icon, {})
+    t
+  } = useTranslation();
+  return /*#__PURE__*/_jsx(Badge, {
+    colorTheme: contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"],
+    ...props,
+    ref: ref,
+    children: children ?? t(`contentTypes.${contentType}`)
   });
-};
-export const SubjectMaterialBadge = props => /*#__PURE__*/_jsx(ContentTypeBadge, {
-  ...props,
-  type: contentTypes.SUBJECT_MATERIAL
-});
-export const TasksAndActivitiesBadge = props => /*#__PURE__*/_jsx(ContentTypeBadge, {
-  ...props,
-  type: contentTypes.TASKS_AND_ACTIVITIES
-});
-export const AssessmentResourcesBadge = props => /*#__PURE__*/_jsx(ContentTypeBadge, {
-  ...props,
-  type: contentTypes.ASSESSMENT_RESOURCES
-});
-export const SubjectBadge = props => /*#__PURE__*/_jsx(ContentTypeBadge, {
-  ...props,
-  type: contentTypes.SUBJECT
-});
-export const SourceMaterialBadge = props => /*#__PURE__*/_jsx(ContentTypeBadge, {
-  ...props,
-  type: contentTypes.SOURCE_MATERIAL
-});
-export const LearningPathBadge = props => /*#__PURE__*/_jsx(ContentTypeBadge, {
-  ...props,
-  type: contentTypes.LEARNING_PATH
-});
-export const MultidisciplinaryTopicBadge = props => /*#__PURE__*/_jsx(ContentTypeBadge, {
-  ...props,
-  type: contentTypes.MULTIDISCIPLINARY
-});
-export const ConceptBadge = props => /*#__PURE__*/_jsx(ContentTypeBadge, {
-  ...props,
-  type: contentTypes.CONCEPT
 });

package/es/ContentTypeHero/ContentTypeHero.js

@@ -32,7 +32,8 @@ export const contentTypeToHeroMap = {
   // this will never happen
   [contentTypes.PROGRAMME]: "primary",
   // this will never happen
-  [contentTypes.PODCAST_SERIES]: "primary"
+  [contentTypes.PODCAST_SERIES]: "primary",
+  [contentTypes.FRONTPAGE_ARTICLE]: "primary"
 };
 export const ContentTypeHero = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/es/RelatedArticleList/RelatedArticleList.js

@@ -13,7 +13,7 @@ import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { linkOverlay } from "@ndla/styled-system/patterns";
-import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadgeNew";
+import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge";
 import { contentTypes } from "../model/ContentType";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledSpan = styled("span", {

package/es/index.js

@@ -14,7 +14,6 @@ export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed
 export { LicenseLink, EmbedByline } from "./LicenseByline";
 export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleTitle } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
-export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
 export { ErrorResourceAccessDenied, default as ErrorMessage } from "./ErrorMessage";
 export { FileListEmbed, File, PdfFile, FileListItem, FileListElement, FileListWrapper } from "./FileList";
@@ -30,8 +29,7 @@ export { default as messagesSE } from "./locale/messages-se";
 export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations } from "./i18n";
-export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge } from "./ContentTypeBadge";
-export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadgeNew";
+export { ContentTypeBadge, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadge";
 export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
 export { ContentTypeFramedContent } from "./ContentTypeFramedContent/ContentTypeFramedContent";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";

package/es/locale/messages-en.js

@@ -573,7 +573,8 @@ const messages = {
     external: "External",
     gloss: "Gloss",
     programme: "Programme",
-    "podcast-series": "Podcast series"
+    "podcast-series": "Podcast series",
+    "frontpage-article": "About NDLA article"
   },
   modal: {
     closeModal: "Close"

package/es/locale/messages-nb.js

@@ -573,7 +573,8 @@ const messages = {
     external: "Ekstern",
     gloss: "Glose",
     programme: "Programfag",
-    "podcast-series": "Podkast-serie"
+    "podcast-series": "Podkast-serie",
+    "frontpage-article": "Om NDLA-artikkel"
   },
   modal: {
     closeModal: "Lukk"

package/es/locale/messages-nn.js

@@ -573,7 +573,8 @@ const messages = {
     external: "Ekstern",
     gloss: "Glose",
     programme: "Programfag",
-    "podcast-series": "Podkast-serie"
+    "podcast-series": "Podkast-serie",
+    "frontpage-article": "Om NDLA-artikkel"
   },
   modal: {
     closeModal: "Lukk"

package/es/locale/messages-se.js

@@ -573,7 +573,8 @@ const messages = {
     external: "Ekstern",
     gloss: "Glose",
     programme: "Programfag",
-    "podcast-series": "Podkast-serie"
+    "podcast-series": "Podkast-serie",
+    "frontpage-article": "Om NDLA-artikkel"
   },
   modal: {
     closeModal: "Govčča"

package/es/locale/messages-sma.js

@@ -573,7 +573,8 @@ const messages = {
     external: "Ekstern",
     gloss: "Glose",
     programme: "Programfag",
-    "podcast-series": "Podkast-serie"
+    "podcast-series": "Podkast-serie",
+    "frontpage-article": "Om NDLA-artikkel"
   },
   modal: {
     closeModal: "Dahph"

package/es/model/ContentType.js

@@ -24,6 +24,7 @@ export const PODCAST = "podcast";
 export const GLOSS = "gloss";
 export const PROGRAMME = "programme";
 export const PODCAST_SERIES = "podcast-series";
+export const FRONTPAGE_ARTICLE = "frontpage-article";
 export const contentTypes = {
   SUBJECT_MATERIAL,
   TASKS_AND_ACTIVITIES,
@@ -54,6 +55,7 @@ export const contentTypeMapping = {
   [RESOURCE_TYPE_CONCEPT]: CONCEPT,
   [MULTIDISCIPLINARY]: MULTIDISCIPLINARY,
   [TOPIC]: TOPIC,
+  [FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,
   default: SUBJECT_MATERIAL
 };
 export const resourceEmbedTypeMapping = {

package/lib/Article/Article.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { ReactNode } from "react";
-import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadge";
 import { Article as ArticleType } from "../types";
 export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean;

package/lib/Article/Article.js

@@ -124,7 +124,7 @@ const ArticleTitle = _ref2 => {
         align: "center",
         direction: "row",
         gap: "small",
-        children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
+        children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadge, {
           contentType: contentType,
           children: contentTypeLabel
         }), heartButton]

package/lib/ContentTypeBadge/ContentTypeBadge.d.ts

@@ -1,26 +1,16 @@
 /**
- * Copyright (c) 2018-present, NDLA.
+ * 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 { ComponentPropsWithoutRef } from "react";
-interface Props extends ComponentPropsWithoutRef<"div"> {
-    size?: "xx-small" | "x-small" | "small" | "large";
-    type: string;
-    title?: string;
-    background?: boolean;
-    border?: boolean;
-    className?: string;
+import { BadgeProps, type BadgeVariant } from "@ndla/primitives";
+import * as contentTypes from "../model/ContentType";
+export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
+    contentType: ContentType | undefined;
 }
-export declare const ContentTypeBadge: ({ type, background, title, size, border, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export declare const SubjectMaterialBadge: (props: Omit<Props, "type">) => import("react/jsx-runtime").JSX.Element;
-export declare const TasksAndActivitiesBadge: (props: Omit<Props, "type">) => import("react/jsx-runtime").JSX.Element;
-export declare const AssessmentResourcesBadge: (props: Omit<Props, "type">) => import("react/jsx-runtime").JSX.Element;
-export declare const SubjectBadge: (props: Omit<Props, "type">) => import("react/jsx-runtime").JSX.Element;
-export declare const SourceMaterialBadge: (props: Omit<Props, "type">) => import("react/jsx-runtime").JSX.Element;
-export declare const LearningPathBadge: (props: Omit<Props, "type">) => import("react/jsx-runtime").JSX.Element;
-export declare const MultidisciplinaryTopicBadge: (props: Omit<Props, "type">) => import("react/jsx-runtime").JSX.Element;
-export declare const ConceptBadge: (props: Omit<Props, "type">) => import("react/jsx-runtime").JSX.Element;
-export {};
+export type StrictContentType = typeof contentTypes.SUBJECT_MATERIAL | typeof contentTypes.TASKS_AND_ACTIVITIES | typeof contentTypes.ASSESSMENT_RESOURCES | typeof contentTypes.SUBJECT | typeof contentTypes.SOURCE_MATERIAL | typeof contentTypes.LEARNING_PATH | typeof contentTypes.TOPIC | typeof contentTypes.MULTIDISCIPLINARY | typeof contentTypes.CONCEPT | typeof contentTypes.EXTERNAL | typeof contentTypes.IMAGE | typeof contentTypes.AUDIO | typeof contentTypes.VIDEO | typeof contentTypes.MISSING | typeof contentTypes.PODCAST | typeof contentTypes.GLOSS | typeof contentTypes.PROGRAMME | typeof contentTypes.PODCAST_SERIES | typeof contentTypes.FRONTPAGE_ARTICLE;
+export type ContentType = StrictContentType | (string & {});
+export declare const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant>;
+export declare const ContentTypeBadge: import("react").ForwardRefExoticComponent<ContentTypeBadgeProps & import("react").RefAttributes<HTMLDivElement>>;