@ndla/ui 56.0.131-alpha.0 → 56.0.133-alpha.0

package/es/AudioPlayer/Controls.js

@@ -170,10 +170,10 @@ const Controls = ({ src, title }) => {
 				children: /* @__PURE__ */ jsx("div", { children: formatTime(currentTime) })
 			}),
 			/* @__PURE__ */ jsxs(SliderRoot, {
-				value: [audioRef.current?.currentTime ?? 0],
+				value: [audioRef.current?.currentTime || 0],
 				defaultValue: [0],
 				step: 1,
-				max: Math.round(audioRef.current?.duration ?? 0),
+				max: Math.round(audioRef.current?.duration || 0),
 				onValueChange: handleSliderChange,
 				getAriaValueText: (value) => t("audio.valueText", {
 					start: formatTime(Math.round(value.value)),

package/es/AudioPlayer/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","names":["seconds: number","currentTime","details: SliderValueChangeDetails"],"sources":["../../src/AudioPlayer/Controls.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-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 { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type SliderValueChangeDetails, createListCollection } from \"@ark-ui/react\";\nimport { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from \"@ndla/icons\";\nimport {\n  Button,\n  FieldRoot,\n  IconButton,\n  PopoverContent,\n  PopoverRoot,\n  PopoverTrigger,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectLabel,\n  SelectRoot,\n  SelectTrigger,\n  SliderControl,\n  SliderHiddenInput,\n  SliderLabel,\n  SliderRange,\n  SliderRoot,\n  SliderThumb,\n  SliderTrack,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ControlsWrapper = styled(\"div\", {\n  base: {\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderBottomRadius: \"xsmall\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.default\",\n    gap: \"xsmall\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    tabletWideDown: {\n      display: \"grid\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xsmall\",\n      gridTemplateColumns: \"1fr repeat(5, auto) 1fr\",\n      gridTemplateAreas: `\n  \"track  track track     track track     track   track\"\n  \".      speed backwards play  forwards  volume  .\"\n`,\n    },\n    mobileWideDown: {\n      columnGap: \"3xsmall\",\n    },\n  },\n});\n\nconst PlayButton = styled(IconButton, {\n  base: {\n    gridArea: \"play\",\n  },\n});\n\nconst Forward15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"forwards\",\n  },\n});\n\nconst Back15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"backwards\",\n  },\n});\n\nconst ProgressWrapper = styled(\"div\", {\n  base: {\n    flex: \"1\",\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n    gridArea: \"track\",\n    paddingBlock: \"xsmall\",\n    mobileDown: {\n      paddingInline: \"xsmall\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"xxlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst VolumeButton = styled(IconButton, {\n  base: {\n    gridArea: \"volume\",\n  },\n});\n\nconst SpeedButton = styled(Button, {\n  base: {\n    paddingBlock: \"auto\",\n    paddingInline: \"auto\",\n    maxWidth: \"xxlarge\",\n    maxHeight: \"xxlarge\",\n    minWidth: \"xxlarge\",\n    minHeight: \"xxlarge\",\n    \"& span\": {\n      flex: \"1\",\n    },\n  },\n});\n\nconst StyledSelectRoot = styled(SelectRoot<string>, {\n  base: {\n    gridArea: \"speed\",\n  },\n});\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\n});\n\nconst formatTime = (seconds: number) => {\n  const minutes = Math.floor(seconds / 60);\n  const currentSeconds = seconds % 60;\n\n  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;\n  return `${minutes}:${formattedSeconds}`;\n};\n\nconst speedValues = createListCollection({ items: [\"0.5\", \"0.75\", \"1\", \"1.25\", \"1.5\", \"1.75\", \"2\"] });\n\ninterface Props {\n  src: string;\n  title: string;\n}\n\nconst Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const [speedValue, setSpeedValue] = useState(1);\n  const [volumeValue, setVolumeValue] = useState(100);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [remainingTime, setRemainingTime] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      audioRef.current.playbackRate = speedValue;\n    }\n  }, [speedValue]);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      const handleTimeUpdate = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleTimeEnded = () => {\n        setPlaying(false);\n      };\n\n      audioElement.addEventListener(\"timeupdate\", handleTimeUpdate);\n      audioElement.addEventListener(\"loadedmetadata\", handleLoadedMetaData);\n      audioElement.addEventListener(\"ended\", handleTimeEnded);\n      return () => {\n        audioElement.removeEventListener(\"timeupdate\", handleTimeUpdate);\n        audioElement.removeEventListener(\"loadedmetadata\", handleLoadedMetaData);\n        audioElement.removeEventListener(\"ended\", handleTimeEnded);\n      };\n    }\n  }, []);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (!playing) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n      setPlaying(!playing);\n    }\n  };\n\n  const onSeekSeconds = (seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  };\n\n  const handleSliderChange = (details: SliderValueChangeDetails) => {\n    const newValue = details.value[0];\n    if (audioRef.current && newValue != null && !isNaN(newValue)) {\n      audioRef.current.currentTime = details.value[0];\n    }\n  };\n\n  const handleVolumeSliderChange = (details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  };\n\n  return (\n    <div>\n      {/* TODO: We should tie this up to the textual description somehow */}\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <ControlsWrapper>\n        <Back15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.rewind15sec\")}\n          aria-label={t(\"audio.controls.rewind15sec\")}\n          onClick={() => onSeekSeconds(-15)}\n        >\n          <Replay15Line />\n        </Back15SecButton>\n        <PlayButton aria-label={t(playing ? t(\"audio.pause\") : t(\"audio.play\"))} variant=\"primary\" onClick={togglePlay}>\n          {playing ? <PauseLine /> : <PlayFill />}\n        </PlayButton>\n        <Forward15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.forward15sec\")}\n          aria-label={t(\"audio.controls.forward15sec\")}\n          onClick={() => onSeekSeconds(15)}\n        >\n          <Forward15Line />\n        </Forward15SecButton>\n        <ProgressWrapper>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>{formatTime(currentTime)}</div>\n          </StyledText>\n          <SliderRoot\n            value={[audioRef.current?.currentTime ?? 0]}\n            defaultValue={[0]}\n            step={1}\n            max={Math.round(audioRef.current?.duration ?? 0)}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(audioRef.current?.duration ?? 0)),\n              })\n            }\n          >\n            <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n            <SliderControl>\n              <SliderTrack>\n                <SliderRange />\n              </SliderTrack>\n              <SliderThumb index={0}>\n                <SliderHiddenInput />\n              </SliderThumb>\n            </SliderControl>\n          </SliderRoot>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>-{formatTime(remainingTime)}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}\n            positioning={{ placement: \"top\" }}\n          >\n            <SelectLabel srOnly>{t(\"audio.controls.selectSpeed\")}</SelectLabel>\n            <SelectControl>\n              <SelectTrigger asChild>\n                <SpeedButton\n                  variant=\"tertiary\"\n                  title={t(\"audio.controls.selectSpeed\")}\n                  aria-label={t(\"audio.controls.selectSpeed\")}\n                >\n                  <span>{`${speedValue}x`}</span>\n                </SpeedButton>\n              </SelectTrigger>\n            </SelectControl>\n            <SelectContent>\n              {speedValues.items.map((speed) => (\n                <SelectItem key={speed} item={speed}>\n                  <SelectItemText>{speed}x</SelectItemText>\n                  <SelectItemIndicator>\n                    <CheckLine />\n                  </SelectItemIndicator>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </StyledSelectRoot>\n        </FieldRoot>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <VolumeButton variant=\"tertiary\" aria-label={t(\"audio.controls.adjustVolume\")}>\n              <VolumeUpFill />\n            </VolumeButton>\n          </PopoverTrigger>\n          <StyledPopoverContent>\n            <SliderRoot\n              orientation=\"vertical\"\n              value={[volumeValue]}\n              min={0}\n              max={100}\n              defaultValue={[100]}\n              step={1}\n              onValueChange={handleVolumeSliderChange}\n            >\n              <SliderLabel srOnly>{t(\"audio.controls.adjustVolume\")}</SliderLabel>\n              <StyledSliderControl>\n                <SliderTrack>\n                  <SliderRange />\n                </SliderTrack>\n                <SliderThumb index={0}>\n                  <SliderHiddenInput />\n                </SliderThumb>\n              </StyledSliderControl>\n            </SliderRoot>\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n\nexport default Controls;\n"],"mappings":"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"}
+{"version":3,"file":"Controls.js","names":["seconds: number","currentTime","details: SliderValueChangeDetails"],"sources":["../../src/AudioPlayer/Controls.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-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 { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type SliderValueChangeDetails, createListCollection } from \"@ark-ui/react\";\nimport { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from \"@ndla/icons\";\nimport {\n  Button,\n  FieldRoot,\n  IconButton,\n  PopoverContent,\n  PopoverRoot,\n  PopoverTrigger,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectLabel,\n  SelectRoot,\n  SelectTrigger,\n  SliderControl,\n  SliderHiddenInput,\n  SliderLabel,\n  SliderRange,\n  SliderRoot,\n  SliderThumb,\n  SliderTrack,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ControlsWrapper = styled(\"div\", {\n  base: {\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderBottomRadius: \"xsmall\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.default\",\n    gap: \"xsmall\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    tabletWideDown: {\n      display: \"grid\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xsmall\",\n      gridTemplateColumns: \"1fr repeat(5, auto) 1fr\",\n      gridTemplateAreas: `\n  \"track  track track     track track     track   track\"\n  \".      speed backwards play  forwards  volume  .\"\n`,\n    },\n    mobileWideDown: {\n      columnGap: \"3xsmall\",\n    },\n  },\n});\n\nconst PlayButton = styled(IconButton, {\n  base: {\n    gridArea: \"play\",\n  },\n});\n\nconst Forward15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"forwards\",\n  },\n});\n\nconst Back15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"backwards\",\n  },\n});\n\nconst ProgressWrapper = styled(\"div\", {\n  base: {\n    flex: \"1\",\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n    gridArea: \"track\",\n    paddingBlock: \"xsmall\",\n    mobileDown: {\n      paddingInline: \"xsmall\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"xxlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst VolumeButton = styled(IconButton, {\n  base: {\n    gridArea: \"volume\",\n  },\n});\n\nconst SpeedButton = styled(Button, {\n  base: {\n    paddingBlock: \"auto\",\n    paddingInline: \"auto\",\n    maxWidth: \"xxlarge\",\n    maxHeight: \"xxlarge\",\n    minWidth: \"xxlarge\",\n    minHeight: \"xxlarge\",\n    \"& span\": {\n      flex: \"1\",\n    },\n  },\n});\n\nconst StyledSelectRoot = styled(SelectRoot<string>, {\n  base: {\n    gridArea: \"speed\",\n  },\n});\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\n});\n\nconst formatTime = (seconds: number) => {\n  const minutes = Math.floor(seconds / 60);\n  const currentSeconds = seconds % 60;\n\n  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;\n  return `${minutes}:${formattedSeconds}`;\n};\n\nconst speedValues = createListCollection({ items: [\"0.5\", \"0.75\", \"1\", \"1.25\", \"1.5\", \"1.75\", \"2\"] });\n\ninterface Props {\n  src: string;\n  title: string;\n}\n\nconst Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const [speedValue, setSpeedValue] = useState(1);\n  const [volumeValue, setVolumeValue] = useState(100);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [remainingTime, setRemainingTime] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      audioRef.current.playbackRate = speedValue;\n    }\n  }, [speedValue]);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      const handleTimeUpdate = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleTimeEnded = () => {\n        setPlaying(false);\n      };\n\n      audioElement.addEventListener(\"timeupdate\", handleTimeUpdate);\n      audioElement.addEventListener(\"loadedmetadata\", handleLoadedMetaData);\n      audioElement.addEventListener(\"ended\", handleTimeEnded);\n      return () => {\n        audioElement.removeEventListener(\"timeupdate\", handleTimeUpdate);\n        audioElement.removeEventListener(\"loadedmetadata\", handleLoadedMetaData);\n        audioElement.removeEventListener(\"ended\", handleTimeEnded);\n      };\n    }\n  }, []);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (!playing) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n      setPlaying(!playing);\n    }\n  };\n\n  const onSeekSeconds = (seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  };\n\n  const handleSliderChange = (details: SliderValueChangeDetails) => {\n    const newValue = details.value[0];\n    if (audioRef.current && newValue != null && !isNaN(newValue)) {\n      audioRef.current.currentTime = details.value[0];\n    }\n  };\n\n  const handleVolumeSliderChange = (details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  };\n\n  return (\n    <div>\n      {/* TODO: We should tie this up to the textual description somehow */}\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <ControlsWrapper>\n        <Back15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.rewind15sec\")}\n          aria-label={t(\"audio.controls.rewind15sec\")}\n          onClick={() => onSeekSeconds(-15)}\n        >\n          <Replay15Line />\n        </Back15SecButton>\n        <PlayButton aria-label={t(playing ? t(\"audio.pause\") : t(\"audio.play\"))} variant=\"primary\" onClick={togglePlay}>\n          {playing ? <PauseLine /> : <PlayFill />}\n        </PlayButton>\n        <Forward15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.forward15sec\")}\n          aria-label={t(\"audio.controls.forward15sec\")}\n          onClick={() => onSeekSeconds(15)}\n        >\n          <Forward15Line />\n        </Forward15SecButton>\n        <ProgressWrapper>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>{formatTime(currentTime)}</div>\n          </StyledText>\n          <SliderRoot\n            value={[audioRef.current?.currentTime || 0]}\n            defaultValue={[0]}\n            step={1}\n            max={Math.round(audioRef.current?.duration || 0)}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(audioRef.current?.duration ?? 0)),\n              })\n            }\n          >\n            <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n            <SliderControl>\n              <SliderTrack>\n                <SliderRange />\n              </SliderTrack>\n              <SliderThumb index={0}>\n                <SliderHiddenInput />\n              </SliderThumb>\n            </SliderControl>\n          </SliderRoot>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>-{formatTime(remainingTime)}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}\n            positioning={{ placement: \"top\" }}\n          >\n            <SelectLabel srOnly>{t(\"audio.controls.selectSpeed\")}</SelectLabel>\n            <SelectControl>\n              <SelectTrigger asChild>\n                <SpeedButton\n                  variant=\"tertiary\"\n                  title={t(\"audio.controls.selectSpeed\")}\n                  aria-label={t(\"audio.controls.selectSpeed\")}\n                >\n                  <span>{`${speedValue}x`}</span>\n                </SpeedButton>\n              </SelectTrigger>\n            </SelectControl>\n            <SelectContent>\n              {speedValues.items.map((speed) => (\n                <SelectItem key={speed} item={speed}>\n                  <SelectItemText>{speed}x</SelectItemText>\n                  <SelectItemIndicator>\n                    <CheckLine />\n                  </SelectItemIndicator>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </StyledSelectRoot>\n        </FieldRoot>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <VolumeButton variant=\"tertiary\" aria-label={t(\"audio.controls.adjustVolume\")}>\n              <VolumeUpFill />\n            </VolumeButton>\n          </PopoverTrigger>\n          <StyledPopoverContent>\n            <SliderRoot\n              orientation=\"vertical\"\n              value={[volumeValue]}\n              min={0}\n              max={100}\n              defaultValue={[100]}\n              step={1}\n              onValueChange={handleVolumeSliderChange}\n            >\n              <SliderLabel srOnly>{t(\"audio.controls.adjustVolume\")}</SliderLabel>\n              <StyledSliderControl>\n                <SliderTrack>\n                  <SliderRange />\n                </SliderTrack>\n                <SliderThumb index={0}>\n                  <SliderHiddenInput />\n                </SliderThumb>\n              </StyledSliderControl>\n            </SliderRoot>\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n\nexport default Controls;\n"],"mappings":"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"}

package/lib/Article/Article.js

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_ContentTypeBadge_ContentTypeBadge = require('../ContentTypeBadge/ContentTypeBadge.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Article_ArticleByline = require('./ArticleByline.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ContentTypeBadge_ContentTypeBadge = require('../ContentTypeBadge/ContentTypeBadge.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Article_ArticleByline = require('./ArticleByline.js');
 const react = require_rolldown_runtime.__toESM(require("react"));
 const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
 const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
@@ -76,7 +76,7 @@ const ArticleTitle = ({ contentType, heartButton, title, lang, id, introduction,
 			align: "center",
 			direction: "row",
 			gap: "small",
-			children: [!!contentType && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_ContentTypeBadge_ContentTypeBadge.ContentTypeBadge, {
+			children: [!!contentType && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ContentTypeBadge_ContentTypeBadge.ContentTypeBadge, {
 				contentType,
 				children: contentTypeLabel
 			}), heartButton]
@@ -113,7 +113,7 @@ const Article = ({ article, contentType, licenseBox, children, competenceGoals,
 			disclaimer
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArticleContent, { children: content }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Article_ArticleByline.ArticleByline, {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Article_ArticleByline.ArticleByline, {
 			lang,
 			footnotes: footNotes,
 			authors,

package/lib/Article/ArticleByline.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Article_ArticleFootNotes = require('./ArticleFootNotes.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Article_ArticleFootNotes = require('./ArticleFootNotes.js');
 const react = require_rolldown_runtime.__toESM(require("react"));
 const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
 const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
@@ -93,7 +93,7 @@ const ArticleByline = ({ lang, authors = [], suppliers = [], footnotes, licenseB
 		}), !!footnotes?.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArticleBylineAccordionItem, {
 			value: footnotesAccordionId,
 			accordionTitle: t("article.footnotes"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Article_ArticleFootNotes.ArticleFootNotes, { footNotes: footnotes })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Article_ArticleFootNotes.ArticleFootNotes, { footNotes: footnotes })
 		})]
 	})] });
 };

package/lib/Article/ArticleByline.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleByline.js","names":["list: SupplierProps[]","listFormatter: Intl.ListFormat","AccordionRoot","e: HashChangeEvent","SafeLink","ArticleFootNotes","AccordionItem","Heading","AccordionItemTrigger","AccordionItemIndicator","ArrowDownShortLine","AccordionItemContent"],"sources":["../../src/Article/ArticleByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-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 ReactNode, forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useLocation } from \"react-router-dom\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  type AccordionItemProps,\n  AccordionItemTrigger,\n  AccordionRoot,\n  Heading,\n} from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { ArticleFootNotes } from \"./ArticleFootNotes\";\nimport type { FootNote } from \"../types\";\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    // TODO: Figure out if we want to remove this margin. It's only here to add some gap between the article content and the byline.\n    marginBlockStart: \"medium\",\n    paddingBlockStart: \"xsmall\",\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"body.medium\",\n    '& [data-contributors=\"false\"]': {\n      marginInlineStart: \"auto\",\n    },\n  },\n  variants: {\n    learningpath: {\n      true: {},\n      false: {\n        tabletWide: {\n          flexDirection: \"row\",\n        },\n      },\n    },\n  },\n});\n\ntype AuthorProps = {\n  name: string;\n};\n\ntype SupplierProps = {\n  name: string;\n};\n\ntype Props = {\n  lang?: string;\n  authors?: AuthorProps[];\n  suppliers?: SupplierProps[];\n  published?: string;\n  licenseBox?: ReactNode;\n  footnotes?: FootNote[];\n  displayByline?: boolean;\n  bylineType?: \"article\" | \"learningPath\" | \"external\";\n  bylineSuffix?: ReactNode;\n  learningpathCopiedFrom?: string;\n};\n\nfunction formatList(list: SupplierProps[], listFormatter: Intl.ListFormat) {\n  return listFormatter.format(list.map((l) => l.name));\n}\n\nconst StyledAccordionRoot = styled(AccordionRoot, {\n  base: {\n    paddingBlockStart: \"xxlarge\",\n  },\n});\n\nconst refRegexp = /note\\d/;\nconst footnotesAccordionId = \"footnotes\";\n\nexport const ArticleByline = ({\n  lang,\n  authors = [],\n  suppliers = [],\n  footnotes,\n  licenseBox,\n  published,\n  displayByline = true,\n  bylineType = \"article\",\n  bylineSuffix,\n  learningpathCopiedFrom,\n}: Props) => {\n  const { t } = useTranslation();\n  const { pathname } = useLocation();\n  const [openAccordions, setOpenAccordions] = useState<string[]>([]);\n  const accordionItemValue = \"rulesForUse\";\n\n  const onHashChange = useCallback(\n    (e: HashChangeEvent) => {\n      const hash = e.newURL.split(\"#\")[1];\n      if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {\n        setOpenAccordions([...openAccordions, footnotesAccordionId]);\n        const el = document.getElementById(`#${hash}`);\n        el?.click();\n        el?.focus();\n      }\n    },\n    [openAccordions],\n  );\n\n  useEffect(() => {\n    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));\n  }, [pathname]);\n\n  useEffect(() => {\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, [onHashChange]);\n\n  const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;\n  const listFormatter = new Intl.ListFormat(lang, { style: \"long\", type: \"conjunction\" });\n\n  return (\n    <Wrapper>\n      {!!displayByline && (\n        <TextWrapper learningpath={bylineType === \"learningPath\"}>\n          {!!showPrimaryContributors && (\n            <span>\n              {authors.length > 0 &&\n                `${t(\"article.authorsLabel\", { context: bylineType })} ${formatList(authors, listFormatter)}. `}\n              {suppliers.length > 0 &&\n                `${t(\"article.supplierLabel\", { count: suppliers.length })} ${formatList(suppliers, listFormatter)}.`}\n            </span>\n          )}\n          {learningpathCopiedFrom ? (\n            <SafeLink to={learningpathCopiedFrom}>{t(`learningPath.copiedFrom`)}</SafeLink>\n          ) : null}\n          {published ? (\n            <div data-contributors={showPrimaryContributors}>\n              {t(`${bylineType}.lastUpdated`)} {published}\n            </div>\n          ) : null}\n          {bylineSuffix}\n        </TextWrapper>\n      )}\n      {(!!licenseBox || !!footnotes?.length) && (\n        <StyledAccordionRoot\n          multiple\n          value={openAccordions}\n          onValueChange={(details) => setOpenAccordions(details.value)}\n        >\n          {!!licenseBox && (\n            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t(\"article.useContent\")}>\n              {licenseBox}\n            </ArticleBylineAccordionItem>\n          )}\n          {!!footnotes?.length && (\n            <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t(\"article.footnotes\")}>\n              <ArticleFootNotes footNotes={footnotes} />\n            </ArticleBylineAccordionItem>\n          )}\n        </StyledAccordionRoot>\n      )}\n    </Wrapper>\n  );\n};\n\ninterface ArticleBylineAccordionprops extends AccordionItemProps {\n  accordionTitle: ReactNode;\n}\n\nexport const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleBylineAccordionprops>(\n  ({ value, accordionTitle, children, ...props }, ref) => {\n    return (\n      <AccordionItem value={value} ref={ref} {...props}>\n        <Heading asChild consumeCss textStyle=\"label.medium\" fontWeight=\"bold\">\n          <h2>\n            <AccordionItemTrigger>\n              {accordionTitle}\n              <AccordionItemIndicator asChild>\n                <ArrowDownShortLine />\n              </AccordionItemIndicator>\n            </AccordionItemTrigger>\n          </h2>\n        </Heading>\n        <AccordionItemContent>{children}</AccordionItemContent>\n      </AccordionItem>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ArticleByline.js","names":["list: SupplierProps[]","listFormatter: Intl.ListFormat","AccordionRoot","e: HashChangeEvent","SafeLink","ArticleFootNotes","AccordionItem","Heading","AccordionItemTrigger","AccordionItemIndicator","ArrowDownShortLine","AccordionItemContent"],"sources":["../../src/Article/ArticleByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-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 ReactNode, forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useLocation } from \"react-router-dom\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  type AccordionItemProps,\n  AccordionItemTrigger,\n  AccordionRoot,\n  Heading,\n} from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { ArticleFootNotes } from \"./ArticleFootNotes\";\nimport type { FootNote } from \"../types\";\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    // TODO: Figure out if we want to remove this margin. It's only here to add some gap between the article content and the byline.\n    marginBlockStart: \"medium\",\n    paddingBlockStart: \"xsmall\",\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"body.medium\",\n    '& [data-contributors=\"false\"]': {\n      marginInlineStart: \"auto\",\n    },\n  },\n  variants: {\n    learningpath: {\n      true: {},\n      false: {\n        tabletWide: {\n          flexDirection: \"row\",\n        },\n      },\n    },\n  },\n});\n\ntype AuthorProps = {\n  name: string;\n};\n\ntype SupplierProps = {\n  name: string;\n};\n\ntype Props = {\n  lang?: string;\n  authors?: AuthorProps[];\n  suppliers?: SupplierProps[];\n  published?: string;\n  licenseBox?: ReactNode;\n  footnotes?: FootNote[];\n  displayByline?: boolean;\n  bylineType?: \"article\" | \"learningPath\" | \"external\";\n  bylineSuffix?: ReactNode;\n  learningpathCopiedFrom?: string;\n};\n\nfunction formatList(list: SupplierProps[], listFormatter: Intl.ListFormat) {\n  return listFormatter.format(list.map((l) => l.name));\n}\n\nconst StyledAccordionRoot = styled(AccordionRoot, {\n  base: {\n    paddingBlockStart: \"xxlarge\",\n  },\n});\n\nconst refRegexp = /note\\d/;\nconst footnotesAccordionId = \"footnotes\";\n\nexport const ArticleByline = ({\n  lang,\n  authors = [],\n  suppliers = [],\n  footnotes,\n  licenseBox,\n  published,\n  displayByline = true,\n  bylineType = \"article\",\n  bylineSuffix,\n  learningpathCopiedFrom,\n}: Props) => {\n  const { t } = useTranslation();\n  const { pathname } = useLocation();\n  const [openAccordions, setOpenAccordions] = useState<string[]>([]);\n  const accordionItemValue = \"rulesForUse\";\n\n  const onHashChange = useCallback(\n    (e: HashChangeEvent) => {\n      const hash = e.newURL.split(\"#\")[1];\n      if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {\n        setOpenAccordions([...openAccordions, footnotesAccordionId]);\n        const el = document.getElementById(`#${hash}`);\n        el?.click();\n        el?.focus();\n      }\n    },\n    [openAccordions],\n  );\n\n  useEffect(() => {\n    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));\n  }, [pathname]);\n\n  useEffect(() => {\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, [onHashChange]);\n\n  const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;\n  const listFormatter = new Intl.ListFormat(lang, { style: \"long\", type: \"conjunction\" });\n\n  return (\n    <Wrapper>\n      {!!displayByline && (\n        <TextWrapper learningpath={bylineType === \"learningPath\"}>\n          {!!showPrimaryContributors && (\n            <span>\n              {authors.length > 0 &&\n                `${t(\"article.authorsLabel\", { context: bylineType })} ${formatList(authors, listFormatter)}. `}\n              {suppliers.length > 0 &&\n                `${t(\"article.supplierLabel\", { count: suppliers.length })} ${formatList(suppliers, listFormatter)}.`}\n            </span>\n          )}\n          {learningpathCopiedFrom ? (\n            <SafeLink to={learningpathCopiedFrom}>{t(`learningPath.copiedFrom`)}</SafeLink>\n          ) : null}\n          {published ? (\n            <div data-contributors={showPrimaryContributors}>\n              {t(`${bylineType}.lastUpdated`)} {published}\n            </div>\n          ) : null}\n          {bylineSuffix}\n        </TextWrapper>\n      )}\n      {(!!licenseBox || !!footnotes?.length) && (\n        <StyledAccordionRoot\n          multiple\n          value={openAccordions}\n          onValueChange={(details) => setOpenAccordions(details.value)}\n        >\n          {!!licenseBox && (\n            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t(\"article.useContent\")}>\n              {licenseBox}\n            </ArticleBylineAccordionItem>\n          )}\n          {!!footnotes?.length && (\n            <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t(\"article.footnotes\")}>\n              <ArticleFootNotes footNotes={footnotes} />\n            </ArticleBylineAccordionItem>\n          )}\n        </StyledAccordionRoot>\n      )}\n    </Wrapper>\n  );\n};\n\ninterface ArticleBylineAccordionprops extends AccordionItemProps {\n  accordionTitle: ReactNode;\n}\n\nexport const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleBylineAccordionprops>(\n  ({ value, accordionTitle, children, ...props }, ref) => {\n    return (\n      <AccordionItem value={value} ref={ref} {...props}>\n        <Heading asChild consumeCss textStyle=\"label.medium\" fontWeight=\"bold\">\n          <h2>\n            <AccordionItemTrigger>\n              {accordionTitle}\n              <AccordionItemIndicator asChild>\n                <ArrowDownShortLine />\n              </AccordionItemIndicator>\n            </AccordionItemTrigger>\n          </h2>\n        </Heading>\n        <AccordionItemContent>{children}</AccordionItemContent>\n      </AccordionItem>\n    );\n  },\n);\n"],"mappings":"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"}

package/lib/AudioPlayer/AudioPlayer.js

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_Controls = require('./Controls.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl = require('./SpeechControl.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_Controls = require('./Controls.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl = require('./SpeechControl.js');
 const react = require_rolldown_runtime.__toESM(require("react"));
 const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
 const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
@@ -93,7 +93,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
 	const [showFullDescription, setShowFullDescription] = (0, react.useState)(false);
 	const truncatedDescription = (0, react.useMemo)(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
 	const textDescriptionId = (0, react.useId)();
-	if (speech) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl.SpeechControl_default, {
+	if (speech) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl.SpeechControl_default, {
 		src,
 		title
 	});
@@ -135,7 +135,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
 				!!textVersion && !!img && textVersionButton
 			]
 		})] }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_Controls.Controls_default, {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_Controls.Controls_default, {
 			src,
 			title
 		}),

package/lib/AudioPlayer/Controls.js

@@ -171,10 +171,10 @@ const Controls = ({ src, title }) => {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: formatTime(currentTime) })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderRoot, {
-				value: [audioRef.current?.currentTime ?? 0],
+				value: [audioRef.current?.currentTime || 0],
 				defaultValue: [0],
 				step: 1,
-				max: Math.round(audioRef.current?.duration ?? 0),
+				max: Math.round(audioRef.current?.duration || 0),
 				onValueChange: handleSliderChange,
 				getAriaValueText: (value) => t("audio.valueText", {
 					start: formatTime(Math.round(value.value)),

package/lib/AudioPlayer/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","names":["IconButton","Text","Button","SelectRoot","SliderControl","PopoverContent","seconds: number","currentTime","details: SliderValueChangeDetails","Replay15Line","PauseLine","PlayFill","Forward15Line","SliderRoot","SliderLabel","SliderTrack","SliderRange","SliderThumb","SliderHiddenInput","FieldRoot","SelectLabel","SelectControl","SelectTrigger","SelectContent","SelectItem","SelectItemText","SelectItemIndicator","CheckLine","PopoverRoot","PopoverTrigger","VolumeUpFill"],"sources":["../../src/AudioPlayer/Controls.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-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 { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type SliderValueChangeDetails, createListCollection } from \"@ark-ui/react\";\nimport { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from \"@ndla/icons\";\nimport {\n  Button,\n  FieldRoot,\n  IconButton,\n  PopoverContent,\n  PopoverRoot,\n  PopoverTrigger,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectLabel,\n  SelectRoot,\n  SelectTrigger,\n  SliderControl,\n  SliderHiddenInput,\n  SliderLabel,\n  SliderRange,\n  SliderRoot,\n  SliderThumb,\n  SliderTrack,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ControlsWrapper = styled(\"div\", {\n  base: {\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderBottomRadius: \"xsmall\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.default\",\n    gap: \"xsmall\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    tabletWideDown: {\n      display: \"grid\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xsmall\",\n      gridTemplateColumns: \"1fr repeat(5, auto) 1fr\",\n      gridTemplateAreas: `\n  \"track  track track     track track     track   track\"\n  \".      speed backwards play  forwards  volume  .\"\n`,\n    },\n    mobileWideDown: {\n      columnGap: \"3xsmall\",\n    },\n  },\n});\n\nconst PlayButton = styled(IconButton, {\n  base: {\n    gridArea: \"play\",\n  },\n});\n\nconst Forward15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"forwards\",\n  },\n});\n\nconst Back15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"backwards\",\n  },\n});\n\nconst ProgressWrapper = styled(\"div\", {\n  base: {\n    flex: \"1\",\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n    gridArea: \"track\",\n    paddingBlock: \"xsmall\",\n    mobileDown: {\n      paddingInline: \"xsmall\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"xxlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst VolumeButton = styled(IconButton, {\n  base: {\n    gridArea: \"volume\",\n  },\n});\n\nconst SpeedButton = styled(Button, {\n  base: {\n    paddingBlock: \"auto\",\n    paddingInline: \"auto\",\n    maxWidth: \"xxlarge\",\n    maxHeight: \"xxlarge\",\n    minWidth: \"xxlarge\",\n    minHeight: \"xxlarge\",\n    \"& span\": {\n      flex: \"1\",\n    },\n  },\n});\n\nconst StyledSelectRoot = styled(SelectRoot<string>, {\n  base: {\n    gridArea: \"speed\",\n  },\n});\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\n});\n\nconst formatTime = (seconds: number) => {\n  const minutes = Math.floor(seconds / 60);\n  const currentSeconds = seconds % 60;\n\n  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;\n  return `${minutes}:${formattedSeconds}`;\n};\n\nconst speedValues = createListCollection({ items: [\"0.5\", \"0.75\", \"1\", \"1.25\", \"1.5\", \"1.75\", \"2\"] });\n\ninterface Props {\n  src: string;\n  title: string;\n}\n\nconst Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const [speedValue, setSpeedValue] = useState(1);\n  const [volumeValue, setVolumeValue] = useState(100);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [remainingTime, setRemainingTime] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      audioRef.current.playbackRate = speedValue;\n    }\n  }, [speedValue]);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      const handleTimeUpdate = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleTimeEnded = () => {\n        setPlaying(false);\n      };\n\n      audioElement.addEventListener(\"timeupdate\", handleTimeUpdate);\n      audioElement.addEventListener(\"loadedmetadata\", handleLoadedMetaData);\n      audioElement.addEventListener(\"ended\", handleTimeEnded);\n      return () => {\n        audioElement.removeEventListener(\"timeupdate\", handleTimeUpdate);\n        audioElement.removeEventListener(\"loadedmetadata\", handleLoadedMetaData);\n        audioElement.removeEventListener(\"ended\", handleTimeEnded);\n      };\n    }\n  }, []);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (!playing) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n      setPlaying(!playing);\n    }\n  };\n\n  const onSeekSeconds = (seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  };\n\n  const handleSliderChange = (details: SliderValueChangeDetails) => {\n    const newValue = details.value[0];\n    if (audioRef.current && newValue != null && !isNaN(newValue)) {\n      audioRef.current.currentTime = details.value[0];\n    }\n  };\n\n  const handleVolumeSliderChange = (details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  };\n\n  return (\n    <div>\n      {/* TODO: We should tie this up to the textual description somehow */}\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <ControlsWrapper>\n        <Back15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.rewind15sec\")}\n          aria-label={t(\"audio.controls.rewind15sec\")}\n          onClick={() => onSeekSeconds(-15)}\n        >\n          <Replay15Line />\n        </Back15SecButton>\n        <PlayButton aria-label={t(playing ? t(\"audio.pause\") : t(\"audio.play\"))} variant=\"primary\" onClick={togglePlay}>\n          {playing ? <PauseLine /> : <PlayFill />}\n        </PlayButton>\n        <Forward15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.forward15sec\")}\n          aria-label={t(\"audio.controls.forward15sec\")}\n          onClick={() => onSeekSeconds(15)}\n        >\n          <Forward15Line />\n        </Forward15SecButton>\n        <ProgressWrapper>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>{formatTime(currentTime)}</div>\n          </StyledText>\n          <SliderRoot\n            value={[audioRef.current?.currentTime ?? 0]}\n            defaultValue={[0]}\n            step={1}\n            max={Math.round(audioRef.current?.duration ?? 0)}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(audioRef.current?.duration ?? 0)),\n              })\n            }\n          >\n            <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n            <SliderControl>\n              <SliderTrack>\n                <SliderRange />\n              </SliderTrack>\n              <SliderThumb index={0}>\n                <SliderHiddenInput />\n              </SliderThumb>\n            </SliderControl>\n          </SliderRoot>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>-{formatTime(remainingTime)}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}\n            positioning={{ placement: \"top\" }}\n          >\n            <SelectLabel srOnly>{t(\"audio.controls.selectSpeed\")}</SelectLabel>\n            <SelectControl>\n              <SelectTrigger asChild>\n                <SpeedButton\n                  variant=\"tertiary\"\n                  title={t(\"audio.controls.selectSpeed\")}\n                  aria-label={t(\"audio.controls.selectSpeed\")}\n                >\n                  <span>{`${speedValue}x`}</span>\n                </SpeedButton>\n              </SelectTrigger>\n            </SelectControl>\n            <SelectContent>\n              {speedValues.items.map((speed) => (\n                <SelectItem key={speed} item={speed}>\n                  <SelectItemText>{speed}x</SelectItemText>\n                  <SelectItemIndicator>\n                    <CheckLine />\n                  </SelectItemIndicator>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </StyledSelectRoot>\n        </FieldRoot>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <VolumeButton variant=\"tertiary\" aria-label={t(\"audio.controls.adjustVolume\")}>\n              <VolumeUpFill />\n            </VolumeButton>\n          </PopoverTrigger>\n          <StyledPopoverContent>\n            <SliderRoot\n              orientation=\"vertical\"\n              value={[volumeValue]}\n              min={0}\n              max={100}\n              defaultValue={[100]}\n              step={1}\n              onValueChange={handleVolumeSliderChange}\n            >\n              <SliderLabel srOnly>{t(\"audio.controls.adjustVolume\")}</SliderLabel>\n              <StyledSliderControl>\n                <SliderTrack>\n                  <SliderRange />\n                </SliderTrack>\n                <SliderThumb index={0}>\n                  <SliderHiddenInput />\n                </SliderThumb>\n              </StyledSliderControl>\n            </SliderRoot>\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n\nexport default Controls;\n"],"mappings":"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"}
+{"version":3,"file":"Controls.js","names":["IconButton","Text","Button","SelectRoot","SliderControl","PopoverContent","seconds: number","currentTime","details: SliderValueChangeDetails","Replay15Line","PauseLine","PlayFill","Forward15Line","SliderRoot","SliderLabel","SliderTrack","SliderRange","SliderThumb","SliderHiddenInput","FieldRoot","SelectLabel","SelectControl","SelectTrigger","SelectContent","SelectItem","SelectItemText","SelectItemIndicator","CheckLine","PopoverRoot","PopoverTrigger","VolumeUpFill"],"sources":["../../src/AudioPlayer/Controls.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-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 { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type SliderValueChangeDetails, createListCollection } from \"@ark-ui/react\";\nimport { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from \"@ndla/icons\";\nimport {\n  Button,\n  FieldRoot,\n  IconButton,\n  PopoverContent,\n  PopoverRoot,\n  PopoverTrigger,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectLabel,\n  SelectRoot,\n  SelectTrigger,\n  SliderControl,\n  SliderHiddenInput,\n  SliderLabel,\n  SliderRange,\n  SliderRoot,\n  SliderThumb,\n  SliderTrack,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ControlsWrapper = styled(\"div\", {\n  base: {\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderBottomRadius: \"xsmall\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.default\",\n    gap: \"xsmall\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    tabletWideDown: {\n      display: \"grid\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xsmall\",\n      gridTemplateColumns: \"1fr repeat(5, auto) 1fr\",\n      gridTemplateAreas: `\n  \"track  track track     track track     track   track\"\n  \".      speed backwards play  forwards  volume  .\"\n`,\n    },\n    mobileWideDown: {\n      columnGap: \"3xsmall\",\n    },\n  },\n});\n\nconst PlayButton = styled(IconButton, {\n  base: {\n    gridArea: \"play\",\n  },\n});\n\nconst Forward15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"forwards\",\n  },\n});\n\nconst Back15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"backwards\",\n  },\n});\n\nconst ProgressWrapper = styled(\"div\", {\n  base: {\n    flex: \"1\",\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n    gridArea: \"track\",\n    paddingBlock: \"xsmall\",\n    mobileDown: {\n      paddingInline: \"xsmall\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"xxlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst VolumeButton = styled(IconButton, {\n  base: {\n    gridArea: \"volume\",\n  },\n});\n\nconst SpeedButton = styled(Button, {\n  base: {\n    paddingBlock: \"auto\",\n    paddingInline: \"auto\",\n    maxWidth: \"xxlarge\",\n    maxHeight: \"xxlarge\",\n    minWidth: \"xxlarge\",\n    minHeight: \"xxlarge\",\n    \"& span\": {\n      flex: \"1\",\n    },\n  },\n});\n\nconst StyledSelectRoot = styled(SelectRoot<string>, {\n  base: {\n    gridArea: \"speed\",\n  },\n});\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\n});\n\nconst formatTime = (seconds: number) => {\n  const minutes = Math.floor(seconds / 60);\n  const currentSeconds = seconds % 60;\n\n  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;\n  return `${minutes}:${formattedSeconds}`;\n};\n\nconst speedValues = createListCollection({ items: [\"0.5\", \"0.75\", \"1\", \"1.25\", \"1.5\", \"1.75\", \"2\"] });\n\ninterface Props {\n  src: string;\n  title: string;\n}\n\nconst Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const [speedValue, setSpeedValue] = useState(1);\n  const [volumeValue, setVolumeValue] = useState(100);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [remainingTime, setRemainingTime] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      audioRef.current.playbackRate = speedValue;\n    }\n  }, [speedValue]);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      const handleTimeUpdate = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleTimeEnded = () => {\n        setPlaying(false);\n      };\n\n      audioElement.addEventListener(\"timeupdate\", handleTimeUpdate);\n      audioElement.addEventListener(\"loadedmetadata\", handleLoadedMetaData);\n      audioElement.addEventListener(\"ended\", handleTimeEnded);\n      return () => {\n        audioElement.removeEventListener(\"timeupdate\", handleTimeUpdate);\n        audioElement.removeEventListener(\"loadedmetadata\", handleLoadedMetaData);\n        audioElement.removeEventListener(\"ended\", handleTimeEnded);\n      };\n    }\n  }, []);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (!playing) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n      setPlaying(!playing);\n    }\n  };\n\n  const onSeekSeconds = (seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  };\n\n  const handleSliderChange = (details: SliderValueChangeDetails) => {\n    const newValue = details.value[0];\n    if (audioRef.current && newValue != null && !isNaN(newValue)) {\n      audioRef.current.currentTime = details.value[0];\n    }\n  };\n\n  const handleVolumeSliderChange = (details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  };\n\n  return (\n    <div>\n      {/* TODO: We should tie this up to the textual description somehow */}\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <ControlsWrapper>\n        <Back15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.rewind15sec\")}\n          aria-label={t(\"audio.controls.rewind15sec\")}\n          onClick={() => onSeekSeconds(-15)}\n        >\n          <Replay15Line />\n        </Back15SecButton>\n        <PlayButton aria-label={t(playing ? t(\"audio.pause\") : t(\"audio.play\"))} variant=\"primary\" onClick={togglePlay}>\n          {playing ? <PauseLine /> : <PlayFill />}\n        </PlayButton>\n        <Forward15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.forward15sec\")}\n          aria-label={t(\"audio.controls.forward15sec\")}\n          onClick={() => onSeekSeconds(15)}\n        >\n          <Forward15Line />\n        </Forward15SecButton>\n        <ProgressWrapper>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>{formatTime(currentTime)}</div>\n          </StyledText>\n          <SliderRoot\n            value={[audioRef.current?.currentTime || 0]}\n            defaultValue={[0]}\n            step={1}\n            max={Math.round(audioRef.current?.duration || 0)}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(audioRef.current?.duration ?? 0)),\n              })\n            }\n          >\n            <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n            <SliderControl>\n              <SliderTrack>\n                <SliderRange />\n              </SliderTrack>\n              <SliderThumb index={0}>\n                <SliderHiddenInput />\n              </SliderThumb>\n            </SliderControl>\n          </SliderRoot>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>-{formatTime(remainingTime)}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}\n            positioning={{ placement: \"top\" }}\n          >\n            <SelectLabel srOnly>{t(\"audio.controls.selectSpeed\")}</SelectLabel>\n            <SelectControl>\n              <SelectTrigger asChild>\n                <SpeedButton\n                  variant=\"tertiary\"\n                  title={t(\"audio.controls.selectSpeed\")}\n                  aria-label={t(\"audio.controls.selectSpeed\")}\n                >\n                  <span>{`${speedValue}x`}</span>\n                </SpeedButton>\n              </SelectTrigger>\n            </SelectControl>\n            <SelectContent>\n              {speedValues.items.map((speed) => (\n                <SelectItem key={speed} item={speed}>\n                  <SelectItemText>{speed}x</SelectItemText>\n                  <SelectItemIndicator>\n                    <CheckLine />\n                  </SelectItemIndicator>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </StyledSelectRoot>\n        </FieldRoot>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <VolumeButton variant=\"tertiary\" aria-label={t(\"audio.controls.adjustVolume\")}>\n              <VolumeUpFill />\n            </VolumeButton>\n          </PopoverTrigger>\n          <StyledPopoverContent>\n            <SliderRoot\n              orientation=\"vertical\"\n              value={[volumeValue]}\n              min={0}\n              max={100}\n              defaultValue={[100]}\n              step={1}\n              onValueChange={handleVolumeSliderChange}\n            >\n              <SliderLabel srOnly>{t(\"audio.controls.adjustVolume\")}</SliderLabel>\n              <StyledSliderControl>\n                <SliderTrack>\n                  <SliderRange />\n                </SliderTrack>\n                <SliderThumb index={0}>\n                  <SliderHiddenInput />\n                </SliderThumb>\n              </StyledSliderControl>\n            </SliderRoot>\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n\nexport default Controls;\n"],"mappings":"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"}

package/lib/AudioPlayer/index.js

@@ -1,7 +1,7 @@
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_AudioPlayer = require('./AudioPlayer.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_AudioPlayer = require('./AudioPlayer.js');
 
 //#region src/AudioPlayer/index.ts
-var AudioPlayer_default$1 = require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_AudioPlayer.AudioPlayer_default$1;
+var AudioPlayer_default$1 = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_AudioPlayer.AudioPlayer_default$1;
 
 //#endregion
 exports.AudioPlayer_default = AudioPlayer_default$1;

package/lib/Breadcrumb/Breadcrumb.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_BreadcrumbItem = require('./BreadcrumbItem.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_BreadcrumbItem = require('./BreadcrumbItem.js');
 const react = require_rolldown_runtime.__toESM(require("react"));
 const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
 const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
@@ -22,7 +22,7 @@ const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collaps
 	const { t } = (0, react_i18next.useTranslation)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		"aria-label": t("breadcrumb.breadcrumb"),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList, { children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_BreadcrumbItem.BreadcrumbItem_default, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList, { children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_BreadcrumbItem.BreadcrumbItem_default, {
 			renderItem,
 			renderSeparator,
 			ref: (element) => {

package/lib/Breadcrumb/HomeBreadcrumb.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_Breadcrumb = require('./Breadcrumb.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_Breadcrumb = require('./Breadcrumb.js');
 const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
 const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
 const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
@@ -32,7 +32,7 @@ const HomeBreadcrumb = ({ items }) => {
 		if (item.index === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArrowRight, {});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightShortLine, {});
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_Breadcrumb.Breadcrumb_default$1, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_Breadcrumb.Breadcrumb_default$1, {
 		items,
 		renderItem,
 		renderSeparator

package/lib/Breadcrumb/index.js

@@ -1,8 +1,8 @@
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_Breadcrumb = require('./Breadcrumb.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_HomeBreadcrumb = require('./HomeBreadcrumb.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_Breadcrumb = require('./Breadcrumb.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_HomeBreadcrumb = require('./HomeBreadcrumb.js');
 
 //#region src/Breadcrumb/index.ts
-var Breadcrumb_default$1 = require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_Breadcrumb.Breadcrumb_default$1;
+var Breadcrumb_default$1 = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Breadcrumb_Breadcrumb.Breadcrumb_default$1;
 
 //#endregion
 exports.Breadcrumb_default = Breadcrumb_default$1;

package/lib/CampaignBlock/CampaignBlock.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl = require('../utils/relativeUrl.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl = require('../utils/relativeUrl.js');
 const react = require_rolldown_runtime.__toESM(require("react"));
 const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
 const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
@@ -83,7 +83,7 @@ const StyledSafeLinkButton = (0, __ndla_styled_system_jsx.styled)(__ndla_safelin
 } });
 const LinkButton = ({ url, children, path }) => {
 	if (url) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSafeLinkButton, {
-		to: require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl.getPossiblyRelativeUrl(url, path),
+		to: require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl.getPossiblyRelativeUrl(url, path),
 		variant: "secondary",
 		rel: "noopener noreferrer",
 		children

package/lib/CampaignBlock/CampaignBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CampaignBlock.js","names":["Text","SafeLinkButton","ArrowRightLine"],"sources":["../../src/CampaignBlock/CampaignBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n  src: string;\n  alt: string;\n}\n\ninterface Props {\n  title: string;\n  description: string;\n  headingLevel?: HeadingLevel;\n  url: {\n    url?: string;\n    text?: string;\n  };\n  image?: Image;\n  imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n  className?: string;\n  path?: string;\n  background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    height: \"100%\",\n    containerType: \"inline-size\",\n  },\n});\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"1fr\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    backgroundColor: \"background.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    imageSide: {\n      left: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"minmax(230px, 455px) auto\",\n          },\n        },\n      },\n      right: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"auto minmax(230px, 455px)\",\n          },\n        },\n      },\n    },\n    background: {\n      neutral: {},\n      brand1: {\n        backgroundColor: \"surface.brand.1\",\n      },\n      brand3: {\n        backgroundColor: \"surface.brand.3\",\n      },\n    },\n  },\n  defaultVariants: {\n    imageSide: \"left\",\n    background: \"neutral\",\n  },\n});\n\nconst StyledImg = styled(\"img\", {\n  base: {\n    objectFit: \"cover\",\n    width: \"100%\",\n    height: \"215px\",\n    \"@/tablet\": {\n      height: \"340px\",\n    },\n    \"@supports not (container-type: inline-size)\": {\n      tablet: {\n        height: \"265px\",\n      },\n      tabletWide: {\n        height: \"340px\",\n      },\n    },\n    backgroundColor: \"background.default\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    alignItems: \"flex-start\",\n    justifyContent: \"center\",\n    paddingBlock: \"medium\",\n    paddingInline: \"medium\",\n    position: \"relative\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    tablet: {\n      display: \"block\",\n      overflow: \"hidden\",\n      position: \"relative\",\n      lineClamp: 4,\n      boxOrient: \"vertical\",\n    },\n  },\n});\n\ninterface LinkButtonProps {\n  url?: string;\n  path?: string;\n  children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n  base: {\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n  },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n  if (url)\n    return (\n      <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n        {children}\n      </StyledSafeLinkButton>\n    );\n  return children;\n};\n\nconst CampaignBlock = ({\n  title,\n  image,\n  imageSide = \"left\",\n  description,\n  headingLevel: InternalHeading = \"h2\",\n  url,\n  path,\n  className,\n  background,\n}: Props) => {\n  const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n  return (\n    <Wrapper>\n      <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n        {imageSide === \"left\" && imageComponent}\n        <ContentWrapper>\n          <Text asChild consumeCss textStyle=\"heading.small\">\n            <InternalHeading>{parse(title)}</InternalHeading>\n          </Text>\n          <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n          {!!url?.url && (\n            <LinkButton url={url.url} path={path}>\n              {parse(url.text ?? \"\")}\n              <ArrowRightLine />\n            </LinkButton>\n          )}\n        </ContentWrapper>\n        {imageSide !== \"left\" && imageComponent}\n      </Container>\n    </Wrapper>\n  );\n};\n\nexport default CampaignBlock;\n"],"mappings":";;;;;;;;;;;AAsCA,MAAM,UAAU,qCAAO,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;AAChB,EACF,EAAC;AAEF,MAAM,YAAY,qCAAO,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;CACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,4BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,4BACtB,EACF;GACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,4BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,4BACtB,EACF;GACF;EACF;EACD,YAAY;GACV,SAAS,CAAE;GACX,QAAQ,EACN,iBAAiB,kBAClB;GACD,QAAQ,EACN,iBAAiB,kBAClB;EACF;CACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;CACb;AACF,EAAC;AAEF,MAAM,YAAY,qCAAO,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,QACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,QACT;EACD,YAAY,EACV,QAAQ,QACT;CACF;CACD,iBAAiB;AAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;AACX,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOA,wBAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;AACZ,EACF,EACF,EAAC;AAQF,MAAM,uBAAuB,qCAAOC,gCAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;AACd,EACF,EAAC;AAEF,MAAM,aAAa,CAAC,EAAE,KAAK,UAAU,MAAuB,KAAK;AAC/D,KAAI,IACF,wBACE,2BAAC;EAAqB,IAAI,gHAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;AACR;AAED,MAAM,gBAAgB,CAAC,EACrB,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,YACM,KAAK;CACX,MAAM,iBAAiB,yBAAS,2BAAC;EAAU,MAAM,EAAE,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,wBACE,2BAAC,qCACC,4BAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;mBACzB,4BAAC;oBACC,2BAACD;KAAK;KAAQ;KAAW,WAAU;+BACjC,2BAAC,6BAAiB,+BAAM,MAAM,GAAmB;MAC5C;oBACP,2BAAC;KAAW,WAAU;eAAe,+BAAM,YAAY;MAAc;MAClE,KAAK,uBACN,4BAAC;KAAW,KAAK,IAAI;KAAW;gBAC7B,+BAAM,IAAI,QAAQ,GAAG,kBACtB,2BAACE,gCAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ;AAEb;AAED,4BAAe"}
+{"version":3,"file":"CampaignBlock.js","names":["Text","SafeLinkButton","ArrowRightLine"],"sources":["../../src/CampaignBlock/CampaignBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-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 parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n  src: string;\n  alt: string;\n}\n\ninterface Props {\n  title: string;\n  description: string;\n  headingLevel?: HeadingLevel;\n  url: {\n    url?: string;\n    text?: string;\n  };\n  image?: Image;\n  imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n  className?: string;\n  path?: string;\n  background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    height: \"100%\",\n    containerType: \"inline-size\",\n  },\n});\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"1fr\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    backgroundColor: \"background.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    imageSide: {\n      left: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"minmax(230px, 455px) auto\",\n          },\n        },\n      },\n      right: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"auto minmax(230px, 455px)\",\n          },\n        },\n      },\n    },\n    background: {\n      neutral: {},\n      brand1: {\n        backgroundColor: \"surface.brand.1\",\n      },\n      brand3: {\n        backgroundColor: \"surface.brand.3\",\n      },\n    },\n  },\n  defaultVariants: {\n    imageSide: \"left\",\n    background: \"neutral\",\n  },\n});\n\nconst StyledImg = styled(\"img\", {\n  base: {\n    objectFit: \"cover\",\n    width: \"100%\",\n    height: \"215px\",\n    \"@/tablet\": {\n      height: \"340px\",\n    },\n    \"@supports not (container-type: inline-size)\": {\n      tablet: {\n        height: \"265px\",\n      },\n      tabletWide: {\n        height: \"340px\",\n      },\n    },\n    backgroundColor: \"background.default\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    alignItems: \"flex-start\",\n    justifyContent: \"center\",\n    paddingBlock: \"medium\",\n    paddingInline: \"medium\",\n    position: \"relative\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    tablet: {\n      display: \"block\",\n      overflow: \"hidden\",\n      position: \"relative\",\n      lineClamp: 4,\n      boxOrient: \"vertical\",\n    },\n  },\n});\n\ninterface LinkButtonProps {\n  url?: string;\n  path?: string;\n  children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n  base: {\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n  },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n  if (url)\n    return (\n      <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n        {children}\n      </StyledSafeLinkButton>\n    );\n  return children;\n};\n\nconst CampaignBlock = ({\n  title,\n  image,\n  imageSide = \"left\",\n  description,\n  headingLevel: InternalHeading = \"h2\",\n  url,\n  path,\n  className,\n  background,\n}: Props) => {\n  const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n  return (\n    <Wrapper>\n      <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n        {imageSide === \"left\" && imageComponent}\n        <ContentWrapper>\n          <Text asChild consumeCss textStyle=\"heading.small\">\n            <InternalHeading>{parse(title)}</InternalHeading>\n          </Text>\n          <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n          {!!url?.url && (\n            <LinkButton url={url.url} path={path}>\n              {parse(url.text ?? \"\")}\n              <ArrowRightLine />\n            </LinkButton>\n          )}\n        </ContentWrapper>\n        {imageSide !== \"left\" && imageComponent}\n      </Container>\n    </Wrapper>\n  );\n};\n\nexport default CampaignBlock;\n"],"mappings":";;;;;;;;;;;AAsCA,MAAM,UAAU,qCAAO,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;AAChB,EACF,EAAC;AAEF,MAAM,YAAY,qCAAO,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;CACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,4BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,4BACtB,EACF;GACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,4BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,4BACtB,EACF;GACF;EACF;EACD,YAAY;GACV,SAAS,CAAE;GACX,QAAQ,EACN,iBAAiB,kBAClB;GACD,QAAQ,EACN,iBAAiB,kBAClB;EACF;CACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;CACb;AACF,EAAC;AAEF,MAAM,YAAY,qCAAO,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,QACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,QACT;EACD,YAAY,EACV,QAAQ,QACT;CACF;CACD,iBAAiB;AAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;AACX,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOA,wBAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;AACZ,EACF,EACF,EAAC;AAQF,MAAM,uBAAuB,qCAAOC,gCAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;AACd,EACF,EAAC;AAEF,MAAM,aAAa,CAAC,EAAE,KAAK,UAAU,MAAuB,KAAK;AAC/D,KAAI,IACF,wBACE,2BAAC;EAAqB,IAAI,+GAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;AACR;AAED,MAAM,gBAAgB,CAAC,EACrB,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,YACM,KAAK;CACX,MAAM,iBAAiB,yBAAS,2BAAC;EAAU,MAAM,EAAE,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,wBACE,2BAAC,qCACC,4BAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;mBACzB,4BAAC;oBACC,2BAACD;KAAK;KAAQ;KAAW,WAAU;+BACjC,2BAAC,6BAAiB,+BAAM,MAAM,GAAmB;MAC5C;oBACP,2BAAC;KAAW,WAAU;eAAe,+BAAM,YAAY;MAAc;MAClE,KAAK,uBACN,4BAAC;KAAW,KAAK,IAAI;KAAW;gBAC7B,+BAAM,IAAI,QAAQ,GAAG,kBACtB,2BAACE,gCAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ;AAEb;AAED,4BAAe"}

package/lib/Concept/Concept.js

@@ -1,11 +1,11 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes = require('../utils/licenseAttributes.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_ImageEmbed = require('../Embed/ImageEmbed.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_H5pEmbed = require('../Embed/H5pEmbed.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_ExternalEmbed = require('../Embed/ExternalEmbed.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_IframeEmbed = require('../Embed/IframeEmbed.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_BrightcoveEmbed = require('../Embed/BrightcoveEmbed.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes = require('../utils/licenseAttributes.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_ImageEmbed = require('../Embed/ImageEmbed.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_H5pEmbed = require('../Embed/H5pEmbed.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_ExternalEmbed = require('../Embed/ExternalEmbed.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_IframeEmbed = require('../Embed/IframeEmbed.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_BrightcoveEmbed = require('../Embed/BrightcoveEmbed.js');
 const react = require_rolldown_runtime.__toESM(require("react"));
 const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
 const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
@@ -23,7 +23,7 @@ const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	"& p": { display: "inline" }
 } });
 const Concept = (0, react.forwardRef)(({ copyright, visualElement, lang, children, title, source, previewAlt,...rest }, ref) => {
-	const licenseProps = require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes.licenseAttributes(copyright?.license?.license, lang, source);
+	const licenseProps = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes.licenseAttributes(copyright?.license?.license, lang, source);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
 		ref,
 		...rest,
@@ -33,12 +33,12 @@ const Concept = (0, react.forwardRef)(({ copyright, visualElement, lang, childre
 				lang,
 				children: [!!title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: title }), ` – `] }), children]
 			}),
-			visualElement?.resource === "image" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_ImageEmbed.ImageEmbed_default, {
+			visualElement?.resource === "image" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_ImageEmbed.ImageEmbed_default, {
 				embed: visualElement,
 				lang,
 				previewAlt
-			}) : visualElement?.resource === "brightcove" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_BrightcoveEmbed.BrightcoveEmbed_default, { embed: visualElement }) : visualElement?.resource === "h5p" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_H5pEmbed.H5pEmbed_default, { embed: visualElement }) : visualElement?.resource === "iframe" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_IframeEmbed.IframeEmbed_default, { embed: visualElement }) : visualElement?.resource === "external" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_Embed_ExternalEmbed.ExternalEmbed_default, { embed: visualElement }) : null,
-			!!copyright && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
+			}) : visualElement?.resource === "brightcove" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_BrightcoveEmbed.BrightcoveEmbed_default, { embed: visualElement }) : visualElement?.resource === "h5p" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_H5pEmbed.H5pEmbed_default, { embed: visualElement }) : visualElement?.resource === "iframe" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_IframeEmbed.IframeEmbed_default, { embed: visualElement }) : visualElement?.resource === "external" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_ExternalEmbed.ExternalEmbed_default, { embed: visualElement }) : null,
+			!!copyright && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
 				copyright,
 				type: "concept"
 			})

package/lib/Concept/Concept.js.map

@@ -1 +1 @@
-{"version":3,"file":"Concept.js","names":["Figure","ImageEmbed","BrightcoveEmbed","H5pEmbed","IframeEmbed","ExternalEmbed","EmbedByline"],"sources":["../../src/Concept/Concept.tsx"],"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 ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IDraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from \"../Embed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends Omit<ComponentPropsWithRef<\"figure\">, \"title\"> {\n  copyright?: ConceptCopyright;\n  visualElement?: ConceptVisualElementMeta;\n  lang?: string;\n  title?: ReactNode;\n  children?: ReactNode;\n  source?: string;\n  previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"body.large\",\n    display: \"inline\",\n    \"& p\": {\n      display: \"inline\",\n    },\n  },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n  ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n    const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n    return (\n      <StyledFigure ref={ref} {...rest} {...licenseProps}>\n        <ContentWrapper lang={lang}>\n          {!!title && (\n            <>\n              <b>{title}</b>\n              {` – `}\n            </>\n          )}\n          {children}\n        </ContentWrapper>\n        {visualElement?.resource === \"image\" ? (\n          <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n        ) : visualElement?.resource === \"brightcove\" ? (\n          <BrightcoveEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"h5p\" ? (\n          <H5pEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"iframe\" ? (\n          <IframeEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"external\" ? (\n          <ExternalEmbed embed={visualElement} />\n        ) : null}\n        {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n      </StyledFigure>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,SACV;AACF,EACF,EAAC;AAEF,MAAa,UAAU,sBACrB,CAAC,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,WAAY,GAAG,MAAM,EAAE,QAAQ;CACzF,MAAM,eAAe,iHAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,wBACE,4BAAC;EAAkB;EAAK,GAAI;EAAM,GAAI;;mBACpC,4BAAC;IAAqB;iBACjB,yBACD,qFACE,2BAAC,iBAAG,QAAU,GACZ,QACD,EAEJ;KACc;GAChB,eAAe,aAAa,0BAC3B,2BAACC;IAAW,OAAO;IAAqB;IAAkB;KAAc,GACtE,eAAe,aAAa,+BAC9B,2BAACC,wHAAgB,OAAO,gBAAiB,GACvC,eAAe,aAAa,wBAC9B,2BAACC,0GAAS,OAAO,gBAAiB,GAChC,eAAe,aAAa,2BAC9B,2BAACC,gHAAY,OAAO,gBAAiB,GACnC,eAAe,aAAa,6BAC9B,2BAACC,oHAAc,OAAO,gBAAiB,GACrC;KACD,6BAAa,2BAACC;IAAuB;IAAW,MAAK;KAAY;;GACvD;AAElB,EACF"}
+{"version":3,"file":"Concept.js","names":["Figure","ImageEmbed","BrightcoveEmbed","H5pEmbed","IframeEmbed","ExternalEmbed","EmbedByline"],"sources":["../../src/Concept/Concept.tsx"],"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 ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IDraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from \"../Embed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends Omit<ComponentPropsWithRef<\"figure\">, \"title\"> {\n  copyright?: ConceptCopyright;\n  visualElement?: ConceptVisualElementMeta;\n  lang?: string;\n  title?: ReactNode;\n  children?: ReactNode;\n  source?: string;\n  previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"body.large\",\n    display: \"inline\",\n    \"& p\": {\n      display: \"inline\",\n    },\n  },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n  ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n    const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n    return (\n      <StyledFigure ref={ref} {...rest} {...licenseProps}>\n        <ContentWrapper lang={lang}>\n          {!!title && (\n            <>\n              <b>{title}</b>\n              {` – `}\n            </>\n          )}\n          {children}\n        </ContentWrapper>\n        {visualElement?.resource === \"image\" ? (\n          <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n        ) : visualElement?.resource === \"brightcove\" ? (\n          <BrightcoveEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"h5p\" ? (\n          <H5pEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"iframe\" ? (\n          <IframeEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"external\" ? (\n          <ExternalEmbed embed={visualElement} />\n        ) : null}\n        {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n      </StyledFigure>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,SACV;AACF,EACF,EAAC;AAEF,MAAa,UAAU,sBACrB,CAAC,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,WAAY,GAAG,MAAM,EAAE,QAAQ;CACzF,MAAM,eAAe,gHAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,wBACE,4BAAC;EAAkB;EAAK,GAAI;EAAM,GAAI;;mBACpC,4BAAC;IAAqB;iBACjB,yBACD,qFACE,2BAAC,iBAAG,QAAU,GACZ,QACD,EAEJ;KACc;GAChB,eAAe,aAAa,0BAC3B,2BAACC;IAAW,OAAO;IAAqB;IAAkB;KAAc,GACtE,eAAe,aAAa,+BAC9B,2BAACC,uHAAgB,OAAO,gBAAiB,GACvC,eAAe,aAAa,wBAC9B,2BAACC,yGAAS,OAAO,gBAAiB,GAChC,eAAe,aAAa,2BAC9B,2BAACC,+GAAY,OAAO,gBAAiB,GACnC,eAAe,aAAa,6BAC9B,2BAACC,mHAAc,OAAO,gBAAiB,GACrC;KACD,6BAAa,2BAACC;IAAuB;IAAW,MAAK;KAAY;;GACvD;AAElB,EACF"}

package/lib/ContactBlock/ContactBlock.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
 const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
 const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
 const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
@@ -133,7 +133,7 @@ const ContactBlock = ({ image, jobTitle, description, name, email, embedAlt, lan
 				src: image.image.imageUrl,
 				width: 300,
 				height: 300
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.LicenseContainerContent, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.LicenseContainerContent, {
 				type: "image",
 				copyright: image.copyright
 			})]

package/lib/ContentTypeBadge/ContentTypeBadge.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType = require('../model/ContentType.js');
+const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType = require('../model/ContentType.js');
 const react = require_rolldown_runtime.__toESM(require("react"));
 const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
 const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
@@ -7,25 +7,25 @@ const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-ru
 
 //#region src/ContentTypeBadge/ContentTypeBadge.tsx
 const contentTypeToBadgeVariantMap = {
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.SUBJECT_MATERIAL]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.TASKS_AND_ACTIVITIES]: "brand2",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.ASSESSMENT_RESOURCES]: "brand2",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.SUBJECT]: "neutral",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.SOURCE_MATERIAL]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.LEARNING_PATH]: "brand3",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.TOPIC]: "neutral",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.MULTIDISCIPLINARY]: "neutral",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.CONCEPT]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.EXTERNAL]: "brand2",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.IMAGE]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.AUDIO]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.PODCAST]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.VIDEO]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.MISSING]: "neutral",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.PODCAST_SERIES]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.GLOSS]: "brand1",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.PROGRAMME]: "neutral",
-	[require__Users_amatho_code_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.FRONTPAGE_ARTICLE]: "brand2"
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.SUBJECT_MATERIAL]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.TASKS_AND_ACTIVITIES]: "brand2",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.ASSESSMENT_RESOURCES]: "brand2",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.SUBJECT]: "neutral",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.SOURCE_MATERIAL]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.LEARNING_PATH]: "brand3",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.TOPIC]: "neutral",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.MULTIDISCIPLINARY]: "neutral",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.CONCEPT]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.EXTERNAL]: "brand2",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.IMAGE]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.AUDIO]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.PODCAST]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.VIDEO]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.MISSING]: "neutral",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.PODCAST_SERIES]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.GLOSS]: "brand1",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.PROGRAMME]: "neutral",
+	[require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.FRONTPAGE_ARTICLE]: "brand2"
 };
 const ContentTypeBadge = (0, react.forwardRef)(({ contentType, children,...props }, ref) => {
 	const { t } = (0, react_i18next.useTranslation)();