@ndla/ui 56.0.172-alpha.0 → 56.0.174-alpha.0

package/lib/i18n/useComponentTranslations.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentTranslations.js","names":[],"sources":["../../src/i18n/useComponentTranslations.ts"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport type { CollectionItem } from \"@ark-ui/react\";\nimport type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from \"@ndla/primitives\";\nimport { type TagSelectorRootProps } from \"../TagSelector/TagSelector\";\nimport { useMemo } from \"react\";\n\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport const useTagsInputTranslations = (\n  translations?: Partial<TagsInputRootProps[\"translations\"]>,\n): TagsInputRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.tagsInput\" });\n\n  return useMemo(\n    () => ({\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      deleteTagTriggerLabel: (tag) => t(\"deleteTagTriggerLabel\", { tag }),\n      tagAdded: (tag) => t(\"tagAdded\", { tag }),\n      tagsPasted: (tag) => t(\"tagsPasted\", { length: tag.length }),\n      tagEdited: (tag) => t(\"tagEdited\", { tag }),\n      tagUpdated: (tag) => t(\"tagUpdated\", { tag }),\n      tagDeleted: (tag) => t(\"tagDeleted\", { tag }),\n      tagSelected: (tag) => t(\"tagSelected\", { tag }),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useComboboxTranslations = <T extends CollectionItem>(\n  translations?: Partial<ComboboxRootProps<T>[\"translations\"]>,\n): ComboboxRootProps<T>[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.combobox\" });\n\n  return useMemo(\n    () => ({\n      triggerLabel: t(\"triggerLabel\"),\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useTagSelectorTranslations = <T extends CollectionItem>(\n  translations?: Partial<TagSelectorRootProps<T>[\"translations\"]>,\n): TagSelectorRootProps<T>[\"translations\"] => {\n  const tagsInputTranslations = useTagsInputTranslations();\n  const comboboxTranslations = useComboboxTranslations();\n\n  return useMemo(\n    () =>\n      ({\n        ...comboboxTranslations,\n        ...tagsInputTranslations,\n        ...translations,\n      }) as TagSelectorRootProps<T>[\"translations\"],\n    [comboboxTranslations, tagsInputTranslations, translations],\n  );\n};\n\nexport const usePaginationTranslations = (\n  translations?: Partial<PaginationRootProps[\"translations\"]>,\n): PaginationRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.pagination\" });\n\n  return useMemo(\n    () => ({\n      rootLabel: t(\"rootLabel\"),\n      prevTriggerLabel: t(\"prevTriggerLabel\"),\n      nextTriggerLabel: t(\"nextTriggerLabel\"),\n      itemLabel: (details) => {\n        const lastPage = details.totalPages > 1 && details.page === details.totalPages;\n        return lastPage ? t(\"lastPage\", { page: details.page }) : t(\"page\", { page: details.page });\n      },\n      ...translations,\n    }),\n    [translations, t],\n  );\n};\n\n// TODO: Deduplicate this and place it somewhere smart. Maybe core?\ninterface AudioSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  useAudio: string;\n  noResults: string;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\ninterface VideoTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  loadMoreVideos: string;\n  noResults: string;\n  is360Video: string;\n  previewVideo: string;\n  addVideo: string;\n  close: string;\n}\ninterface PreviewTranslations {\n  creatorsLabel: string;\n  license: string;\n  caption: string;\n  altText: string;\n  modelRelease: string;\n  tags: string;\n  close: string;\n  checkboxLabel?: string;\n  missingTitleFallback?: string;\n  useImageTitle: string;\n}\n\ninterface ImageSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  imagePreview: PreviewTranslations;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport const useImageSearchTranslations = (\n  translations: DeepPartial<ImageSearchTranslations> = {},\n): ImageSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.imageSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      imagePreview: {\n        creatorsLabel: t(\"imagePreview.creatorsLabel\"),\n        license: t(\"imagePreview.license\"),\n        caption: t(\"imagePreview.caption\"),\n        altText: t(\"imagePreview.altText\"),\n        modelRelease: t(\"imagePreview.modelRelease\"),\n        tags: t(\"imagePreview.tags\"),\n        close: t(\"close\"),\n        checkboxLabel: t(\"imagePreview.checkboxLabel\"),\n        useImageTitle: t(\"imagePreview.useImageTitle\"),\n        ...imagePreview,\n      },\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useAudioSearchTranslations = (\n  translations: DeepPartial<AudioSearchTranslations> = {},\n): AudioSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.audioSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      useAudio: t(\"useAudio\"),\n      noResults: t(\"noResults\"),\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useVideoSearchTranslations = (translations?: Partial<VideoTranslations>): VideoTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.videoSearch\" });\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      loadMoreVideos: t(\"loadMoreVideos\"),\n      noResults: t(\"noResults\"),\n      is360Video: t(\"is360Video\"),\n      previewVideo: t(\"previewVideo\"),\n      addVideo: t(\"addVideo\"),\n      close: t(\"close\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useDatePickerTranslations = (\n  translations?: Partial<DatePickerRootProps[\"translations\"]>,\n): NonNullable<DatePickerRootProps[\"translations\"]> => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.datePicker\" });\n\n  return useMemo(\n    () => ({\n      dayCell: (state) => {\n        if (state.unavailable) {\n          return t(\"dayCell.unavailable\", { date: state.formattedDate });\n        } else if (state.selected) {\n          return t(\"dayCell.selected\", { date: state.formattedDate });\n        } else return t(\"dayCell.select\", { date: state.formattedDate });\n      },\n      nextTrigger: (view) => t(`nextTrigger.${view}`),\n      prevTrigger: (view) => t(`prevTrigger.${view}`),\n      monthSelect: t(\"monthSelect\"),\n      yearSelect: t(\"yearSelect\"),\n      viewTrigger: (view) => t(`viewTrigger.${view}`),\n      presetTrigger: (value) => {\n        if (Array.isArray(value)) {\n          return t(\"presetTrigger.range\", { start: value[0], end: value[1] });\n        } else return t(\"presetTrigger.single\", { date: value });\n      },\n      clearTrigger: t(\"clearTrigger\"),\n      trigger: (open) => t(`trigger.${open ? \"close\" : \"open\"}`),\n      content: t(\"content\"),\n      placeholder: (_locale) => {\n        return { day: \"dd\", month: \"mm\", year: \"yyyy\" };\n      },\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"useComponentTranslations.js","names":[],"sources":["../../src/i18n/useComponentTranslations.ts"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { CollectionItem } from \"@ark-ui/react\";\nimport type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from \"@ndla/primitives\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type TagSelectorRootProps } from \"../TagSelector/TagSelector\";\n\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport const useTagsInputTranslations = (\n  translations?: Partial<TagsInputRootProps[\"translations\"]>,\n): TagsInputRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.tagsInput\" });\n\n  return useMemo(\n    () => ({\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      deleteTagTriggerLabel: (tag) => t(\"deleteTagTriggerLabel\", { tag }),\n      tagAdded: (tag) => t(\"tagAdded\", { tag }),\n      tagsPasted: (tag) => t(\"tagsPasted\", { length: tag.length }),\n      tagEdited: (tag) => t(\"tagEdited\", { tag }),\n      tagUpdated: (tag) => t(\"tagUpdated\", { tag }),\n      tagDeleted: (tag) => t(\"tagDeleted\", { tag }),\n      tagSelected: (tag) => t(\"tagSelected\", { tag }),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useComboboxTranslations = <T extends CollectionItem>(\n  translations?: Partial<ComboboxRootProps<T>[\"translations\"]>,\n): ComboboxRootProps<T>[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.combobox\" });\n\n  return useMemo(\n    () => ({\n      triggerLabel: t(\"triggerLabel\"),\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useTagSelectorTranslations = <T extends CollectionItem>(\n  translations?: Partial<TagSelectorRootProps<T>[\"translations\"]>,\n): TagSelectorRootProps<T>[\"translations\"] => {\n  const tagsInputTranslations = useTagsInputTranslations();\n  const comboboxTranslations = useComboboxTranslations();\n\n  return useMemo(\n    () =>\n      ({\n        ...comboboxTranslations,\n        ...tagsInputTranslations,\n        ...translations,\n      }) as TagSelectorRootProps<T>[\"translations\"],\n    [comboboxTranslations, tagsInputTranslations, translations],\n  );\n};\n\nexport const usePaginationTranslations = (\n  translations?: Partial<PaginationRootProps[\"translations\"]>,\n): PaginationRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.pagination\" });\n\n  return useMemo(\n    () => ({\n      rootLabel: t(\"rootLabel\"),\n      prevTriggerLabel: t(\"prevTriggerLabel\"),\n      nextTriggerLabel: t(\"nextTriggerLabel\"),\n      itemLabel: (details) => {\n        const lastPage = details.totalPages > 1 && details.page === details.totalPages;\n        return lastPage ? t(\"lastPage\", { page: details.page }) : t(\"page\", { page: details.page });\n      },\n      ...translations,\n    }),\n    [translations, t],\n  );\n};\n\n// TODO: Deduplicate this and place it somewhere smart. Maybe core?\ninterface AudioSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  useAudio: string;\n  noResults: string;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\ninterface VideoTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  loadMoreVideos: string;\n  noResults: string;\n  is360Video: string;\n  previewVideo: string;\n  addVideo: string;\n  close: string;\n}\ninterface PreviewTranslations {\n  creatorsLabel: string;\n  license: string;\n  caption: string;\n  altText: string;\n  modelRelease: string;\n  tags: string;\n  close: string;\n  checkboxLabel?: string;\n  missingTitleFallback?: string;\n  useImageTitle: string;\n}\n\ninterface ImageSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  imagePreview: PreviewTranslations;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport const useImageSearchTranslations = (\n  translations: DeepPartial<ImageSearchTranslations> = {},\n): ImageSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.imageSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      imagePreview: {\n        creatorsLabel: t(\"imagePreview.creatorsLabel\"),\n        license: t(\"imagePreview.license\"),\n        caption: t(\"imagePreview.caption\"),\n        altText: t(\"imagePreview.altText\"),\n        modelRelease: t(\"imagePreview.modelRelease\"),\n        tags: t(\"imagePreview.tags\"),\n        close: t(\"close\"),\n        checkboxLabel: t(\"imagePreview.checkboxLabel\"),\n        useImageTitle: t(\"imagePreview.useImageTitle\"),\n        ...imagePreview,\n      },\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useAudioSearchTranslations = (\n  translations: DeepPartial<AudioSearchTranslations> = {},\n): AudioSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.audioSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      useAudio: t(\"useAudio\"),\n      noResults: t(\"noResults\"),\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useVideoSearchTranslations = (translations?: Partial<VideoTranslations>): VideoTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.videoSearch\" });\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      loadMoreVideos: t(\"loadMoreVideos\"),\n      noResults: t(\"noResults\"),\n      is360Video: t(\"is360Video\"),\n      previewVideo: t(\"previewVideo\"),\n      addVideo: t(\"addVideo\"),\n      close: t(\"close\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useDatePickerTranslations = (\n  translations?: Partial<DatePickerRootProps[\"translations\"]>,\n): NonNullable<DatePickerRootProps[\"translations\"]> => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.datePicker\" });\n\n  return useMemo(\n    () => ({\n      dayCell: (state) => {\n        if (state.unavailable) {\n          return t(\"dayCell.unavailable\", { date: state.formattedDate });\n        } else if (state.selected) {\n          return t(\"dayCell.selected\", { date: state.formattedDate });\n        } else return t(\"dayCell.select\", { date: state.formattedDate });\n      },\n      nextTrigger: (view) => t(`nextTrigger.${view}`),\n      prevTrigger: (view) => t(`prevTrigger.${view}`),\n      monthSelect: t(\"monthSelect\"),\n      yearSelect: t(\"yearSelect\"),\n      viewTrigger: (view) => t(`viewTrigger.${view}`),\n      presetTrigger: (value) => {\n        if (Array.isArray(value)) {\n          return t(\"presetTrigger.range\", { start: value[0], end: value[1] });\n        } else return t(\"presetTrigger.single\", { date: value });\n      },\n      clearTrigger: t(\"clearTrigger\"),\n      trigger: (open) => t(`trigger.${open ? \"close\" : \"open\"}`),\n      content: t(\"content\"),\n      placeholder: (_locale) => {\n        return { day: \"dd\", month: \"mm\", year: \"yyyy\" };\n      },\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n"],"mappings":";;;;;AAkBA,MAAa,4BACX,iBACuC;CACvC,MAAM,EAAE,wCAAqB,eAAe,EAAE,WAAW,uBAAuB,CAAC;AAEjF,kCACS;EACL,mBAAmB,EAAE,oBAAoB;EACzC,wBAAwB,QAAQ,EAAE,yBAAyB,EAAE,KAAK,CAAC;EACnE,WAAW,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC;EACzC,aAAa,QAAQ,EAAE,cAAc,EAAE,QAAQ,IAAI,QAAQ,CAAC;EAC5D,YAAY,QAAQ,EAAE,aAAa,EAAE,KAAK,CAAC;EAC3C,aAAa,QAAQ,EAAE,cAAc,EAAE,KAAK,CAAC;EAC7C,aAAa,QAAQ,EAAE,cAAc,EAAE,KAAK,CAAC;EAC7C,cAAc,QAAQ,EAAE,eAAe,EAAE,KAAK,CAAC;EAC/C,GAAG;EACJ,GACD,CAAC,GAAG,aAAa,CAClB;;AAGH,MAAa,2BACX,iBACyC;CACzC,MAAM,EAAE,wCAAqB,eAAe,EAAE,WAAW,sBAAsB,CAAC;AAEhF,kCACS;EACL,cAAc,EAAE,eAAe;EAC/B,mBAAmB,EAAE,oBAAoB;EACzC,GAAG;EACJ,GACD,CAAC,GAAG,aAAa,CAClB;;AAGH,MAAa,8BACX,iBAC4C;CAC5C,MAAM,wBAAwB,0BAA0B;CACxD,MAAM,uBAAuB,yBAAyB;AAEtD,kCAEK;EACC,GAAG;EACH,GAAG;EACH,GAAG;EACJ,GACH;EAAC;EAAsB;EAAuB;EAAa,CAC5D;;AAGH,MAAa,6BACX,iBACwC;CACxC,MAAM,EAAE,wCAAqB,eAAe,EAAE,WAAW,wBAAwB,CAAC;AAElF,kCACS;EACL,WAAW,EAAE,YAAY;EACzB,kBAAkB,EAAE,mBAAmB;EACvC,kBAAkB,EAAE,mBAAmB;EACvC,YAAY,YAAY;AAEtB,UADiB,QAAQ,aAAa,KAAK,QAAQ,SAAS,QAAQ,aAClD,EAAE,YAAY,EAAE,MAAM,QAAQ,MAAM,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,MAAM,CAAC;;EAE7F,GAAG;EACJ,GACD,CAAC,cAAc,EAAE,CAClB;;AA0CH,MAAa,8BACX,eAAqD,EAAE,KAC3B;CAC5B,MAAM,EAAE,wCAAqB,eAAe,EAAE,WAAW,yBAAyB,CAAC;CACnF,MAAM,yBAAyB,2BAA2B;CAE1D,MAAM,EAAE,cAAc,wBAAwB,gCAAgC,GAAG,cAAc;AAE/F,kCACS;EACL,mBAAmB,EAAE,oBAAoB;EACzC,mBAAmB,EAAE,oBAAoB;EACzC,cAAc;GACZ,eAAe,EAAE,6BAA6B;GAC9C,SAAS,EAAE,uBAAuB;GAClC,SAAS,EAAE,uBAAuB;GAClC,SAAS,EAAE,uBAAuB;GAClC,cAAc,EAAE,4BAA4B;GAC5C,MAAM,EAAE,oBAAoB;GAC5B,OAAO,EAAE,QAAQ;GACjB,eAAe,EAAE,6BAA6B;GAC9C,eAAe,EAAE,6BAA6B;GAC9C,GAAG;GACJ;EACD,wBAAwB;GAAE,GAAG;GAAwB,GAAG;GAAgC;EACxF,GAAG;EACJ,GACD;EAAC;EAAG;EAAwB;EAAc;EAAgC;EAAU,CACrF;;AAGH,MAAa,8BACX,eAAqD,EAAE,KAC3B;CAC5B,MAAM,EAAE,wCAAqB,eAAe,EAAE,WAAW,yBAAyB,CAAC;CACnF,MAAM,yBAAyB,2BAA2B;CAE1D,MAAM,EAAE,wBAAwB,gCAAgC,GAAG,cAAc;AAEjF,kCACS;EACL,mBAAmB,EAAE,oBAAoB;EACzC,mBAAmB,EAAE,oBAAoB;EACzC,UAAU,EAAE,WAAW;EACvB,WAAW,EAAE,YAAY;EACzB,wBAAwB;GAAE,GAAG;GAAwB,GAAG;GAAgC;EACxF,GAAG;EACJ,GACD;EAAC;EAAG;EAAwB;EAAgC;EAAU,CACvE;;AAGH,MAAa,8BAA8B,iBAAiE;CAC1G,MAAM,EAAE,wCAAqB,eAAe,EAAE,WAAW,yBAAyB,CAAC;AAEnF,kCACS;EACL,mBAAmB,EAAE,oBAAoB;EACzC,mBAAmB,EAAE,oBAAoB;EACzC,gBAAgB,EAAE,iBAAiB;EACnC,WAAW,EAAE,YAAY;EACzB,YAAY,EAAE,aAAa;EAC3B,cAAc,EAAE,eAAe;EAC/B,UAAU,EAAE,WAAW;EACvB,OAAO,EAAE,QAAQ;EACjB,GAAG;EACJ,GACD,CAAC,GAAG,aAAa,CAClB;;AAGH,MAAa,6BACX,iBACqD;CACrD,MAAM,EAAE,wCAAqB,eAAe,EAAE,WAAW,wBAAwB,CAAC;AAElF,kCACS;EACL,UAAU,UAAU;AAClB,OAAI,MAAM,YACR,QAAO,EAAE,uBAAuB,EAAE,MAAM,MAAM,eAAe,CAAC;YACrD,MAAM,SACf,QAAO,EAAE,oBAAoB,EAAE,MAAM,MAAM,eAAe,CAAC;OACtD,QAAO,EAAE,kBAAkB,EAAE,MAAM,MAAM,eAAe,CAAC;;EAElE,cAAc,SAAS,EAAE,eAAe,OAAO;EAC/C,cAAc,SAAS,EAAE,eAAe,OAAO;EAC/C,aAAa,EAAE,cAAc;EAC7B,YAAY,EAAE,aAAa;EAC3B,cAAc,SAAS,EAAE,eAAe,OAAO;EAC/C,gBAAgB,UAAU;AACxB,OAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,EAAE,uBAAuB;IAAE,OAAO,MAAM;IAAI,KAAK,MAAM;IAAI,CAAC;OAC9D,QAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;;EAE1D,cAAc,EAAE,eAAe;EAC/B,UAAU,SAAS,EAAE,WAAW,OAAO,UAAU,SAAS;EAC1D,SAAS,EAAE,UAAU;EACrB,cAAc,YAAY;AACxB,UAAO;IAAE,KAAK;IAAM,OAAO;IAAM,MAAM;IAAQ;;EAEjD,GAAG;EACJ,GACD,CAAC,GAAG,aAAa,CAClB"}

package/lib/model/ContentType.d.ts

@@ -24,6 +24,8 @@ export declare const GLOSS = "gloss";
 export declare const PROGRAMME = "programme";
 export declare const PODCAST_SERIES = "podcast-series";
 export declare const FRONTPAGE_ARTICLE = "frontpage-article";
+export declare const GAME = "game";
+export declare const CASE = "case";
 export declare const contentTypes: {
     SUBJECT_MATERIAL: string;
     TASKS_AND_ACTIVITIES: string;
@@ -38,6 +40,8 @@ export declare const contentTypes: {
     MISSING: string;
     PROGRAMME: string;
     PODCAST_SERIES: string;
+    GAME: string;
+    CASE: string;
 };
 export declare const RESOURCE_TYPE_LEARNING_PATH = "urn:resourcetype:learningPath";
 export declare const RESOURCE_TYPE_SUBJECT_MATERIAL = "urn:resourcetype:subjectMaterial";
@@ -45,5 +49,6 @@ export declare const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = "urn:resourcetype:task
 export declare const RESOURCE_TYPE_ASSESSMENT_RESOURCES = "urn:resourcetype:reviewResource";
 export declare const RESOURCE_TYPE_SOURCE_MATERIAL = "urn:resourcetype:SourceMaterial";
 export declare const RESOURCE_TYPE_CONCEPT = "urn:resourcetype:concept";
+export declare const RESOURCE_TYPE_GAME = "urn:resourcetype:game";
 export declare const contentTypeMapping: Record<string, string>;
 export declare const resourceEmbedTypeMapping: Record<string, string>;

package/lib/model/ContentType.js

@@ -21,6 +21,8 @@ const MISSING = "missing";
 const PROGRAMME = "programme";
 const PODCAST_SERIES = "podcast-series";
 const FRONTPAGE_ARTICLE = "frontpage-article";
+const GAME = "game";
+const CASE = "case";
 const contentTypes = {
 	SUBJECT_MATERIAL,
 	TASKS_AND_ACTIVITIES,
@@ -34,7 +36,9 @@ const contentTypes = {
 	EXTERNAL,
 	MISSING,
 	PROGRAMME,
-	PODCAST_SERIES
+	PODCAST_SERIES,
+	GAME,
+	CASE
 };
 const RESOURCE_TYPE_LEARNING_PATH = "urn:resourcetype:learningPath";
 const RESOURCE_TYPE_SUBJECT_MATERIAL = "urn:resourcetype:subjectMaterial";
@@ -42,6 +46,7 @@ const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = "urn:resourcetype:tasksAndActivities"
 const RESOURCE_TYPE_ASSESSMENT_RESOURCES = "urn:resourcetype:reviewResource";
 const RESOURCE_TYPE_SOURCE_MATERIAL = "urn:resourcetype:SourceMaterial";
 const RESOURCE_TYPE_CONCEPT = "urn:resourcetype:concept";
+const RESOURCE_TYPE_GAME = "urn:resourcetype:game";
 const contentTypeMapping = {
 	[RESOURCE_TYPE_LEARNING_PATH]: LEARNING_PATH,
 	[RESOURCE_TYPE_SUBJECT_MATERIAL]: SUBJECT_MATERIAL,
@@ -49,7 +54,9 @@ const contentTypeMapping = {
 	[RESOURCE_TYPE_ASSESSMENT_RESOURCES]: ASSESSMENT_RESOURCES,
 	[RESOURCE_TYPE_SOURCE_MATERIAL]: SOURCE_MATERIAL,
 	[RESOURCE_TYPE_CONCEPT]: CONCEPT,
+	[RESOURCE_TYPE_GAME]: GAME,
 	[MULTIDISCIPLINARY]: MULTIDISCIPLINARY,
+	[CASE]: CASE,
 	[TOPIC]: TOPIC,
 	[FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,
 	default: SUBJECT_MATERIAL

package/lib/model/ContentType.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentType.js","names":[],"sources":["../../src/model/ContentType.ts"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nexport const SUBJECT_MATERIAL = \"subject-material\";\nexport const TASKS_AND_ACTIVITIES = \"tasks-and-activities\";\nexport const ASSESSMENT_RESOURCES = \"assessment-resources\";\nexport const SUBJECT = \"subject\";\nexport const SOURCE_MATERIAL = \"source-material\";\nexport const LEARNING_PATH = \"learning-path\";\nexport const TOPIC = \"topic\";\nexport const MULTIDISCIPLINARY = \"multidisciplinary\";\nexport const CONCEPT = \"concept\";\nexport const EXTERNAL = \"external\";\nexport const MISSING = \"missing\";\nexport const IMAGE = \"image\";\nexport const VIDEO = \"video\";\nexport const AUDIO = \"audio\";\nexport const PODCAST = \"podcast\";\nexport const GLOSS = \"gloss\";\nexport const PROGRAMME = \"programme\";\nexport const PODCAST_SERIES = \"podcast-series\";\nexport const FRONTPAGE_ARTICLE = \"frontpage-article\";\n\nexport const contentTypes = {\n  SUBJECT_MATERIAL,\n  TASKS_AND_ACTIVITIES,\n  ASSESSMENT_RESOURCES,\n  SUBJECT,\n  SOURCE_MATERIAL,\n  LEARNING_PATH,\n  TOPIC,\n  MULTIDISCIPLINARY,\n  CONCEPT,\n  EXTERNAL,\n  MISSING,\n  PROGRAMME,\n  PODCAST_SERIES,\n};\n\nexport const RESOURCE_TYPE_LEARNING_PATH = \"urn:resourcetype:learningPath\";\nexport const RESOURCE_TYPE_SUBJECT_MATERIAL = \"urn:resourcetype:subjectMaterial\";\nexport const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = \"urn:resourcetype:tasksAndActivities\";\nexport const RESOURCE_TYPE_ASSESSMENT_RESOURCES = \"urn:resourcetype:reviewResource\";\nexport const RESOURCE_TYPE_SOURCE_MATERIAL = \"urn:resourcetype:SourceMaterial\";\nexport const RESOURCE_TYPE_CONCEPT = \"urn:resourcetype:concept\";\n\nexport const contentTypeMapping: Record<string, string> = {\n  [RESOURCE_TYPE_LEARNING_PATH]: LEARNING_PATH,\n  [RESOURCE_TYPE_SUBJECT_MATERIAL]: SUBJECT_MATERIAL,\n  [RESOURCE_TYPE_TASKS_AND_ACTIVITIES]: TASKS_AND_ACTIVITIES,\n  [RESOURCE_TYPE_ASSESSMENT_RESOURCES]: ASSESSMENT_RESOURCES,\n  [RESOURCE_TYPE_SOURCE_MATERIAL]: SOURCE_MATERIAL,\n  [RESOURCE_TYPE_CONCEPT]: CONCEPT,\n  [MULTIDISCIPLINARY]: MULTIDISCIPLINARY,\n  [TOPIC]: TOPIC,\n  [FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,\n  default: SUBJECT_MATERIAL,\n};\n\nexport const resourceEmbedTypeMapping: Record<string, string> = {\n  image: \"image\",\n  video: \"video\",\n  concept: \"concept\",\n  audio: \"audio\",\n  podcast: \"podcast\",\n  gloss: \"gloss\",\n};\n"],"mappings":";;;;;;;;;AAQA,MAAa,mBAAmB;AAChC,MAAa,uBAAuB;AACpC,MAAa,uBAAuB;AACpC,MAAa,UAAU;AACvB,MAAa,kBAAkB;AAC/B,MAAa,gBAAgB;AAC7B,MAAa,QAAQ;AACrB,MAAa,oBAAoB;AACjC,MAAa,UAAU;AACvB,MAAa,WAAW;AACxB,MAAa,UAAU;AAMvB,MAAa,YAAY;AACzB,MAAa,iBAAiB;AAC9B,MAAa,oBAAoB;AAEjC,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,8BAA8B;AAC3C,MAAa,iCAAiC;AAC9C,MAAa,qCAAqC;AAClD,MAAa,qCAAqC;AAClD,MAAa,gCAAgC;AAC7C,MAAa,wBAAwB;AAErC,MAAa,qBAA6C;EACvD,8BAA8B;EAC9B,iCAAiC;EACjC,qCAAqC;EACrC,qCAAqC;EACrC,gCAAgC;EAChC,wBAAwB;EACxB,oBAAoB;EACpB,QAAQ;EACR,oBAAoB;CACrB,SAAS;CACV;AAED,MAAa,2BAAmD;CAC9D,OAAO;CACP,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;CACT,OAAO;CACR"}
+{"version":3,"file":"ContentType.js","names":[],"sources":["../../src/model/ContentType.ts"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nexport const SUBJECT_MATERIAL = \"subject-material\";\nexport const TASKS_AND_ACTIVITIES = \"tasks-and-activities\";\nexport const ASSESSMENT_RESOURCES = \"assessment-resources\";\nexport const SUBJECT = \"subject\";\nexport const SOURCE_MATERIAL = \"source-material\";\nexport const LEARNING_PATH = \"learning-path\";\nexport const TOPIC = \"topic\";\nexport const MULTIDISCIPLINARY = \"multidisciplinary\";\nexport const CONCEPT = \"concept\";\nexport const EXTERNAL = \"external\";\nexport const MISSING = \"missing\";\nexport const IMAGE = \"image\";\nexport const VIDEO = \"video\";\nexport const AUDIO = \"audio\";\nexport const PODCAST = \"podcast\";\nexport const GLOSS = \"gloss\";\nexport const PROGRAMME = \"programme\";\nexport const PODCAST_SERIES = \"podcast-series\";\nexport const FRONTPAGE_ARTICLE = \"frontpage-article\";\nexport const GAME = \"game\";\nexport const CASE = \"case\";\n\nexport const contentTypes = {\n  SUBJECT_MATERIAL,\n  TASKS_AND_ACTIVITIES,\n  ASSESSMENT_RESOURCES,\n  SUBJECT,\n  SOURCE_MATERIAL,\n  LEARNING_PATH,\n  TOPIC,\n  MULTIDISCIPLINARY,\n  CONCEPT,\n  EXTERNAL,\n  MISSING,\n  PROGRAMME,\n  PODCAST_SERIES,\n  GAME,\n  CASE,\n};\n\nexport const RESOURCE_TYPE_LEARNING_PATH = \"urn:resourcetype:learningPath\";\nexport const RESOURCE_TYPE_SUBJECT_MATERIAL = \"urn:resourcetype:subjectMaterial\";\nexport const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = \"urn:resourcetype:tasksAndActivities\";\nexport const RESOURCE_TYPE_ASSESSMENT_RESOURCES = \"urn:resourcetype:reviewResource\";\nexport const RESOURCE_TYPE_SOURCE_MATERIAL = \"urn:resourcetype:SourceMaterial\";\nexport const RESOURCE_TYPE_CONCEPT = \"urn:resourcetype:concept\";\nexport const RESOURCE_TYPE_GAME = \"urn:resourcetype:game\";\n\nexport const contentTypeMapping: Record<string, string> = {\n  [RESOURCE_TYPE_LEARNING_PATH]: LEARNING_PATH,\n  [RESOURCE_TYPE_SUBJECT_MATERIAL]: SUBJECT_MATERIAL,\n  [RESOURCE_TYPE_TASKS_AND_ACTIVITIES]: TASKS_AND_ACTIVITIES,\n  [RESOURCE_TYPE_ASSESSMENT_RESOURCES]: ASSESSMENT_RESOURCES,\n  [RESOURCE_TYPE_SOURCE_MATERIAL]: SOURCE_MATERIAL,\n  [RESOURCE_TYPE_CONCEPT]: CONCEPT,\n  [RESOURCE_TYPE_GAME]: GAME,\n  [MULTIDISCIPLINARY]: MULTIDISCIPLINARY,\n  [CASE]: CASE,\n  [TOPIC]: TOPIC,\n  [FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,\n  default: SUBJECT_MATERIAL,\n};\n\nexport const resourceEmbedTypeMapping: Record<string, string> = {\n  image: \"image\",\n  video: \"video\",\n  concept: \"concept\",\n  audio: \"audio\",\n  podcast: \"podcast\",\n  gloss: \"gloss\",\n};\n"],"mappings":";;;;;;;;;AAQA,MAAa,mBAAmB;AAChC,MAAa,uBAAuB;AACpC,MAAa,uBAAuB;AACpC,MAAa,UAAU;AACvB,MAAa,kBAAkB;AAC/B,MAAa,gBAAgB;AAC7B,MAAa,QAAQ;AACrB,MAAa,oBAAoB;AACjC,MAAa,UAAU;AACvB,MAAa,WAAW;AACxB,MAAa,UAAU;AAMvB,MAAa,YAAY;AACzB,MAAa,iBAAiB;AAC9B,MAAa,oBAAoB;AACjC,MAAa,OAAO;AACpB,MAAa,OAAO;AAEpB,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,8BAA8B;AAC3C,MAAa,iCAAiC;AAC9C,MAAa,qCAAqC;AAClD,MAAa,qCAAqC;AAClD,MAAa,gCAAgC;AAC7C,MAAa,wBAAwB;AACrC,MAAa,qBAAqB;AAElC,MAAa,qBAA6C;EACvD,8BAA8B;EAC9B,iCAAiC;EACjC,qCAAqC;EACrC,qCAAqC;EACrC,gCAAgC;EAChC,wBAAwB;EACxB,qBAAqB;EACrB,oBAAoB;EACpB,OAAO;EACP,QAAQ;EACR,oBAAoB;CACrB,SAAS;CACV;AAED,MAAa,2BAAmD;CAC9D,OAAO;CACP,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;CACT,OAAO;CACR"}

package/lib/model/index.d.ts

@@ -23,6 +23,8 @@ export declare const constants: {
         MISSING: string;
         PROGRAMME: string;
         PODCAST_SERIES: string;
+        GAME: string;
+        CASE: string;
     };
     subjectCategories: typeof subjectCategories;
     subjectTypes: typeof subjectTypes;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/ui",
   "type": "module",
-  "version": "56.0.172-alpha.0",
+  "version": "56.0.174-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -38,11 +38,11 @@
   "dependencies": {
     "@ark-ui/react": "^5.30.0",
     "@ndla/core": "^6.0.7-alpha.0",
-    "@ndla/icons": "^8.0.77-alpha.0",
-    "@ndla/licenses": "^10.0.9-alpha.0",
-    "@ndla/locales": "^0.0.1",
-    "@ndla/primitives": "^1.0.119-alpha.0",
-    "@ndla/safelink": "^7.0.122-alpha.0",
+    "@ndla/icons": "^8.0.79-alpha.0",
+    "@ndla/licenses": "^10.0.10-alpha.0",
+    "@ndla/locales": "^0.0.2",
+    "@ndla/primitives": "^1.0.120-alpha.0",
+    "@ndla/safelink": "^7.0.123-alpha.0",
     "@ndla/styled-system": "^0.0.46",
     "@ndla/util": "^5.0.18-alpha.0",
     "html-react-parser": "^5.2.8"
@@ -55,13 +55,13 @@
     "react-router": ">= 7.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.70",
+    "@ndla/preset-panda": "^0.0.71",
     "@ndla/types-backend": "^1.0.89",
-    "@ndla/types-embed": "^5.0.20-alpha.0",
+    "@ndla/types-embed": "^5.0.21-alpha.0",
     "@pandacss/dev": "^1.7.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "36c5e7334db527a79bf6c0b498e21b72c643ebf2"
+  "gitHead": "04d83d133eb6a3f2f0944fe217cf407f05716d4c"
 }

package/src/AnchorHeading/AnchorHeading.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { type ReactNode, useMemo } from "react";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
+import { type ReactNode, useMemo } from "react";
 
 const StyledAnchor = styled(SafeLink, {
   base: {

package/src/Article/Article.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { type ComponentPropsWithRef, type ReactNode, forwardRef } from "react";
+import type { StyledProps } from "@ndla/styled-system/types";
 import { ark, type HTMLArkProps } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import type { StyledProps } from "@ndla/styled-system/types";
+import { type ComponentPropsWithRef, type ReactNode, forwardRef } from "react";
 import { BadgesContainer } from "./BadgesContainer";
 
 const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });

package/src/Article/ArticleByline.stories.tsx

@@ -7,7 +7,6 @@
  */
 
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
-
 import { ArticleByline } from "./ArticleByline";
 
 /**

package/src/Article/ArticleByline.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import { type ReactNode, forwardRef, useCallback, useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
 import { useAccordionContext } from "@ark-ui/react";
 import { ArrowDownShortLine } from "@ndla/icons";
 import {
@@ -21,8 +19,10 @@ import {
 } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import { ArticleFootNotes } from "./ArticleFootNotes";
+import { type ReactNode, forwardRef, useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import type { FootNote } from "../types";
+import { ArticleFootNotes } from "./ArticleFootNotes";
 
 const Wrapper = styled("div", {
   base: {

package/src/AudioPlayer/AudioPlayer.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { type ReactNode, useId, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Heading, Text, Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
+import { type ReactNode, useId, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Controls } from "./Controls";
 import { SpeechControl } from "./SpeechControl";
 

package/src/AudioPlayer/Controls.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { type SliderValueChangeDetails, createListCollection } from "@ark-ui/react";
 import { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from "@ndla/icons";
 import {
@@ -35,6 +33,8 @@ import {
   Text,
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 const ControlsWrapper = styled("div", {
   base: {

package/src/AudioPlayer/SpeechControl.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
 import { VolumeUpFill } from "@ndla/icons";
 import { IconButton } from "@ndla/primitives";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   src: string;

package/src/Breadcrumb/Breadcrumb.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { styled } from "@ndla/styled-system/jsx";
 import { type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { styled } from "@ndla/styled-system/jsx";
 import { BreadcrumbItem, type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface Props {

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { type ReactNode } from "react";
 import { styled } from "@ndla/styled-system/jsx";
+import { type ReactNode } from "react";
 
 export interface SimpleBreadcrumbItem {
   to: string | Partial<Location>;

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -9,8 +9,8 @@
 import { ArrowRightShortLine, HomeLine } from "@ndla/icons";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import { Breadcrumb } from "./Breadcrumb";
 import type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
+import { Breadcrumb } from "./Breadcrumb";
 
 const StyledSafeLink = styled(SafeLink, {
   base: {

package/src/CampaignBlock/CampaignBlock.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import parse from "html-react-parser";
-import { type ReactNode } from "react";
+import type { CampaignBlockEmbedData } from "@ndla/types-embed";
 import { ArrowRightLine } from "@ndla/icons";
 import { Text } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import type { CampaignBlockEmbedData } from "@ndla/types-embed";
+import parse from "html-react-parser";
+import { type ReactNode } from "react";
 import type { HeadingLevel } from "../types";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 

package/src/CodeBlock/CodeBlock.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { type ComponentPropsWithRef, forwardRef, useMemo } from "react";
+import type { StyledProps } from "@ndla/styled-system/types";
 import { cx } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import type { StyledProps } from "@ndla/styled-system/types";
+import { type ComponentPropsWithRef, forwardRef, useMemo } from "react";
 
 interface Props extends StyledProps, ComponentPropsWithRef<"pre"> {
   highlightedCode: string;

package/src/Concept/Concept.stories.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import type { Meta, StoryObj } from "@storybook/react";
 import type { ConceptData } from "@ndla/types-embed";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Concept } from "./Concept";
 
 const visualElementData: ConceptData["visualElement"] = {

package/src/Concept/Concept.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { type ComponentPropsWithRef, type ReactNode, forwardRef } from "react";
-import { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
 import type { DraftCopyrightDTO as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import type { ConceptVisualElementMeta } from "@ndla/types-embed";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { type ComponentPropsWithRef, type ReactNode, forwardRef } from "react";
 import { BrightcoveEmbed } from "../Embed/BrightcoveEmbed";
 import { ExternalEmbed } from "../Embed/ExternalEmbed";
 import { H5pEmbed } from "../Embed/H5pEmbed";

package/src/ContactBlock/ContactBlock.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
-import { Text } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
 import type { SystemStyleObject } from "@ndla/styled-system/types";
 import type { ImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
 import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
 
 export type ContactBlockBackground = "strong" | "moderate" | "subtle";

package/src/Embed/AudioEmbed.stories.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import type { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import type { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
-import { AudioEmbed } from "./AudioEmbed";
 import { ArticleContent, ArticleWrapper } from "../Article/Article";
+import { AudioEmbed } from "./AudioEmbed";
 
 const embedData: AudioEmbedData = {
   resource: "audio",

package/src/Embed/AudioEmbed.tsx

@@ -6,14 +6,14 @@
  *
  */
 
+import type { AudioMetaData } from "@ndla/types-embed";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { AudioMetaData } from "@ndla/types-embed";
-import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 import type { Author } from "./ImageEmbed";
 import { AudioPlayer } from "../AudioPlayer/AudioPlayer";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 
 const StyledFigure = styled(Figure, {
   base: {

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import type { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import type { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
-import { BrightcoveEmbed } from "./BrightcoveEmbed";
 import { ArticleContent, ArticleWrapper } from "../Article/Article";
+import { BrightcoveEmbed } from "./BrightcoveEmbed";
 
 const embedData: BrightcoveEmbedData = {
   resource: "brightcove",

package/src/Embed/BrightcoveEmbed.tsx

@@ -6,16 +6,16 @@
  *
  */
 
+import type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from "@ndla/types-embed";
+import { Button, Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import parse from "html-react-parser";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from "@ndla/types-embed";
-import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 import type { RenderContext } from "./types";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 
 interface Props {
   embed: BrightcoveMetaData;

package/src/Embed/CodeEmbed.stories.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import type { Meta, StoryObj } from "@storybook/react";
 import type { CodeEmbedData, CodeMetaData } from "@ndla/types-embed";
+import type { Meta, StoryObj } from "@storybook/react";
 import { CodeEmbed } from "./CodeEmbed";
 
 const codeEmbedData: CodeEmbedData = {

package/src/Embed/CodeEmbed.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import type { CodeMetaData } from "@ndla/types-embed";
 import { FileCopyLine, CheckLine } from "@ndla/icons";
 import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { CodeMetaData } from "@ndla/types-embed";
-import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { CodeBlock } from "../CodeBlock/CodeBlock";
 import { codeLanguageOptions, type ICodeLangugeOption } from "../CodeBlock/codeLanguageOptions";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 
 interface Props {
   embed: CodeMetaData;

package/src/Embed/ConceptEmbed.stories.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import type { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import type { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
-import { ConceptEmbed } from "./ConceptEmbed";
 import { ArticleContent, ArticleWrapper } from "../Article/Article";
+import { ConceptEmbed } from "./ConceptEmbed";
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: "35",

package/src/Embed/ConceptEmbed.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import parse from "html-react-parser";
-import { forwardRef, useMemo, useRef, type ReactNode } from "react";
+import type { ConceptMetaData } from "@ndla/types-embed";
 import { Portal } from "@ark-ui/react";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { ConceptMetaData } from "@ndla/types-embed";
+import parse from "html-react-parser";
+import { forwardRef, useMemo, useRef, type ReactNode } from "react";
+import type { RenderContext } from "./types";
+import { Concept, type ConceptProps } from "../Concept/Concept";
 import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
 import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 import { GlossEmbed } from "./GlossEmbed";
-import type { RenderContext } from "./types";
-import { Concept, type ConceptProps } from "../Concept/Concept";
 
 interface BaseProps {
   renderContext?: RenderContext;

package/src/Embed/ContentLinkEmbed.tsx

@@ -6,10 +6,10 @@
  *
  */
 
+import type { ContentLinkMetaData } from "@ndla/types-embed";
 import type { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 import { Text } from "@ndla/primitives";
-import type { ContentLinkMetaData } from "@ndla/types-embed";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   embed: ContentLinkMetaData;

package/src/Embed/CopyrightEmbed.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import type { CopyrightMetaData } from "@ndla/types-embed";
 import type { ReactNode } from "react";
 import { styled } from "@ndla/styled-system/jsx";
-import type { CopyrightMetaData } from "@ndla/types-embed";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 
 interface Props {

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { type ReactNode } from "react";
 import { ErrorWarningLine } from "@ndla/icons";
 import { Figure, type FigureFloat, type FigureSize } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
+import { type ReactNode } from "react";
 import { EmbedByline, type EmbedBylineErrorProps } from "../LicenseByline/EmbedByline";
 
 interface Props {

package/src/Embed/EmbedWrapper.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { forwardRef } from "react";
+import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { ark, type HTMLArkProps } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
+import { forwardRef } from "react";
 
 const embedWrapperRecipe = cva({
   base: {

package/src/Embed/ExternalEmbed.stories.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import type { OembedEmbedData, OembedData } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import type { OembedEmbedData, OembedData } from "@ndla/types-embed";
-import { ExternalEmbed } from "./ExternalEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
+import { ExternalEmbed } from "./ExternalEmbed";
 
 const embedData: OembedEmbedData = {
   resource: "external",