@ndla/ui 56.0.166-alpha.0 → 56.0.168-alpha.0

package/lib/AudioPlayer/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","names":["IconButton","Text","Button","SelectRoot","SliderControl","PopoverContent","currentTime","duration","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\nexport const 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 [duration, setDuration] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\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        setDuration(Math.round(duration));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setDuration(Math.round(duration));\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 onPlaybackRateChange = (rate: number) => {\n    setSpeedValue(rate);\n    if (audioRef.current) {\n      audioRef.current.playbackRate = rate;\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={[currentTime]}\n            defaultValue={[0]}\n            step={1}\n            max={duration}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(duration)),\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(Math.round(duration - currentTime))}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => onPlaybackRateChange(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"],"mappings":"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"}
+{"version":3,"file":"Controls.js","names":["IconButton","Text","Button","SelectRoot","SliderControl","PopoverContent","currentTime","duration","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\nexport const 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 [duration, setDuration] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\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        setDuration(Math.round(duration));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setDuration(Math.round(duration));\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 onPlaybackRateChange = (rate: number) => {\n    setSpeedValue(rate);\n    if (audioRef.current) {\n      audioRef.current.playbackRate = rate;\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={[currentTime]}\n            defaultValue={[0]}\n            step={1}\n            max={duration}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(duration)),\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(Math.round(duration - currentTime))}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => onPlaybackRateChange(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"],"mappings":";;;;;;;;;;;;;;;;;AAsCA,MAAM,sDAAyB,OAAO,EACpC,MAAM;CACJ,kBAAkB;CAClB,aAAa;CACb,oBAAoB;CACpB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACL,cAAc;CACd,eAAe;CACf,gBAAgB;EACd,SAAS;EACT,cAAc;EACd,eAAe;EACf,qBAAqB;EACrB,mBAAmB;;;;EAIpB;CACD,gBAAgB,EACd,WAAW,WACZ;CACF,EACF,CAAC;AAEF,MAAM,iDAAoBA,6BAAY,EACpC,MAAM,EACJ,UAAU,QACX,EACF,CAAC;AAEF,MAAM,yDAA4BA,6BAAY,EAC5C,MAAM,EACJ,UAAU,YACX,EACF,CAAC;AAEF,MAAM,sDAAyBA,6BAAY,EACzC,MAAM,EACJ,UAAU,aACX,EACF,CAAC;AAEF,MAAM,sDAAyB,OAAO,EACpC,MAAM;CACJ,MAAM;CACN,SAAS;CACT,YAAY;CACZ,KAAK;CACL,UAAU;CACV,cAAc;CACd,YAAY,EACV,eAAe,UAChB;CACF,EACF,CAAC;AAEF,MAAM,iDAAoBC,uBAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,mDAAsBD,6BAAY,EACtC,MAAM,EACJ,UAAU,UACX,EACF,CAAC;AAEF,MAAM,kDAAqBE,yBAAQ,EACjC,MAAM;CACJ,cAAc;CACd,eAAe;CACf,UAAU;CACV,WAAW;CACX,UAAU;CACV,WAAW;CACX,UAAU,EACR,MAAM,KACP;CACF,EACF,CAAC;AAEF,MAAM,uDAA0BC,6BAAoB,EAClD,MAAM,EACJ,UAAU,SACX,EACF,CAAC;AAEF,MAAM,0DAA6BC,gCAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;CACX,EACF,CAAC;AAEF,MAAM,2DAA8BC,iCAAgB,EAClD,MAAM,EACJ,eAAe,SAChB,EACF,CAAC;AAEF,MAAM,cAAc,YAAoB;CACtC,MAAM,UAAU,KAAK,MAAM,UAAU,GAAG;CACxC,MAAM,iBAAiB,UAAU;AAGjC,QAAO,GAAG,QAAQ,GADO,iBAAiB,KAAK,IAAI,mBAAmB;;AAIxE,MAAM,sDAAmC,EAAE,OAAO;CAAC;CAAO;CAAQ;CAAK;CAAQ;CAAO;CAAQ;CAAI,EAAE,CAAC;AAOrG,MAAa,YAAY,EAAE,KAAK,YAAmB;CACjD,MAAM,EAAE,yCAAsB;CAC9B,MAAM,CAAC,YAAY,qCAA0B,EAAE;CAC/C,MAAM,CAAC,aAAa,sCAA2B,IAAI;CACnD,MAAM,CAAC,aAAa,sCAA2B,EAAE;CACjD,MAAM,CAAC,UAAU,mCAAwB,EAAE;CAC3C,MAAM,CAAC,SAAS,kCAAuB,MAAM;CAC7C,MAAM,6BAAoC,KAAK;AAE/C,4BAAgB;AACd,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;GAC9B,MAAM,yBAAyB;IAC7B,MAAM,EAAE,4BAAa,yBAAa;AAClC,mBAAe,KAAK,MAAMC,cAAY,CAAC;AACvC,gBAAY,KAAK,MAAMC,WAAS,CAAC;;GAGnC,MAAM,6BAA6B;IACjC,MAAM,EAAE,4BAAa,yBAAa;AAClC,mBAAe,KAAK,MAAMD,cAAY,CAAC;AACvC,gBAAY,KAAK,MAAMC,WAAS,CAAC;;GAGnC,MAAM,wBAAwB;AAC5B,eAAW,MAAM;;AAGnB,gBAAa,iBAAiB,cAAc,iBAAiB;AAC7D,gBAAa,iBAAiB,kBAAkB,qBAAqB;AACrE,gBAAa,iBAAiB,SAAS,gBAAgB;AACvD,gBAAa;AACX,iBAAa,oBAAoB,cAAc,iBAAiB;AAChE,iBAAa,oBAAoB,kBAAkB,qBAAqB;AACxE,iBAAa,oBAAoB,SAAS,gBAAgB;;;IAG7D,EAAE,CAAC;CAEN,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,CAAC,QACH,cAAa,MAAM;OAEnB,cAAa,OAAO;AAEtB,cAAW,CAAC,QAAQ;;;CAIxB,MAAM,wBAAwB,SAAiB;AAC7C,gBAAc,KAAK;AACnB,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;;CAIpC,MAAM,iBAAiB,YAAoB;AACzC,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;;CAIpC,MAAM,sBAAsB,YAAsC;EAChE,MAAM,WAAW,QAAQ,MAAM;AAC/B,MAAI,SAAS,WAAW,YAAY,QAAQ,CAAC,MAAM,SAAS,CAC1D,UAAS,QAAQ,cAAc,QAAQ,MAAM;;CAIjD,MAAM,4BAA4B,YAAsC;AACtE,MAAI,SAAS,SAAS;AACpB,YAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;AAC7C,kBAAe,QAAQ,MAAM,GAAG;;;AAIpC,QACE,4CAAC,oBAGC,2CAAC;EAAM,KAAK;EAAe;EAAY;EAAO,SAAQ;GAAa,EACnE,4CAAC;EACC,2CAAC;GACC,SAAQ;GACR,OAAO,EAAE,6BAA6B;GACtC,cAAY,EAAE,6BAA6B;GAC3C,eAAe,cAAc,IAAI;aAEjC,2CAACC,6BAAe;IACA;EAClB,2CAAC;GAAW,cAAY,EAAE,UAAU,EAAE,cAAc,GAAG,EAAE,aAAa,CAAC;GAAE,SAAQ;GAAU,SAAS;aACjG,UAAU,2CAACC,0BAAY,GAAG,2CAACC,yBAAW;IAC5B;EACb,2CAAC;GACC,SAAQ;GACR,OAAO,EAAE,8BAA8B;GACvC,cAAY,EAAE,8BAA8B;GAC5C,eAAe,cAAc,GAAG;aAEhC,2CAACC,8BAAgB;IACE;EACrB,4CAAC;GACC,2CAAC;IAAW,WAAU;IAAe;IAAQ;cAC3C,2CAAC,mBAAK,WAAW,YAAY,GAAO;KACzB;GACb,4CAACC;IACC,OAAO,CAAC,YAAY;IACpB,cAAc,CAAC,EAAE;IACjB,MAAM;IACN,KAAK;IACL,eAAe;IACf,mBAAmB,UACjB,EAAE,mBAAmB;KACnB,OAAO,WAAW,KAAK,MAAM,MAAM,MAAM,CAAC;KAC1C,KAAK,WAAW,KAAK,MAAM,SAAS,CAAC;KACtC,CAAC;eAGJ,2CAACC;KAAY;eAAQ,EAAE,oBAAoB;MAAe,EAC1D,4CAACT,6CACC,2CAACU,0CACC,2CAACC,iCAAc,GACH,EACd,2CAACC;KAAY,OAAO;eAClB,2CAACC,uCAAoB;MACT,IACA;KACL;GACb,2CAAC;IAAW,WAAU;IAAe;IAAQ;cAC3C,4CAAC,oBAAI,KAAE,WAAW,KAAK,MAAM,WAAW,YAAY,CAAC,IAAO;KACjD;MACG;EAClB,2CAACC,wCACC,4CAAC;GACC,YAAY;GACZ,OAAO,CAAC,WAAW,UAAU,CAAC;GAC9B,gBAAgB,YAAY,qBAAqB,WAAW,QAAQ,MAAM,GAAG,CAAC;GAC9E,aAAa,EAAE,WAAW,OAAO;;IAEjC,2CAACC;KAAY;eAAQ,EAAE,6BAA6B;MAAe;IACnE,2CAACC,4CACC,2CAACC;KAAc;eACb,2CAAC;MACC,SAAQ;MACR,OAAO,EAAE,6BAA6B;MACtC,cAAY,EAAE,6BAA6B;gBAE3C,2CAAC,oBAAM,GAAG,WAAW,KAAU;OACnB;MACA,GACF;IAChB,2CAACC,4CACE,YAAY,MAAM,KAAK,UACtB,4CAACC;KAAuB,MAAM;gBAC5B,4CAACC,8CAAgB,OAAM,OAAkB,EACzC,2CAACC,kDACC,2CAACC,0BAAY,GACO;OAJP,MAKJ,CACb,GACY;;IACC,GACT;EACZ,4CAACC;GAAY,aAAa,EAAE,WAAW,OAAO;cAC5C,2CAACC;IAAe;cACd,2CAAC;KAAa,SAAQ;KAAW,cAAY,EAAE,8BAA8B;eAC3E,2CAACC,6BAAe;MACH;KACA,EACjB,2CAAC,kCACC,4CAACjB;IACC,aAAY;IACZ,OAAO,CAAC,YAAY;IACpB,KAAK;IACL,KAAK;IACL,cAAc,CAAC,IAAI;IACnB,MAAM;IACN,eAAe;eAEf,2CAACC;KAAY;eAAQ,EAAE,8BAA8B;MAAe,EACpE,4CAAC,kCACC,2CAACC,0CACC,2CAACC,iCAAc,GACH,EACd,2CAACC;KAAY,OAAO;eAClB,2CAACC,uCAAoB;MACT,IACM;KACX,GACQ;IACX;KACE,IACd"}

package/lib/AudioPlayer/SpeechControl.js

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
+let _ndla_primitives = require("@ndla/primitives");
 let react_i18next = require("react-i18next");
-let __ndla_icons = require("@ndla/icons");
+let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/AudioPlayer/SpeechControl.tsx
@@ -30,12 +30,12 @@ const SpeechControl = ({ src, title, type = "audio" }) => {
 			src,
 			title,
 			preload: "metadata"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.IconButton, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.IconButton, {
 			variant: "tertiary",
 			"aria-label": t(`${type}.play`),
 			title: t(`${type}.play`),
 			onClick: togglePlay,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.VolumeUpFill, {})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.VolumeUpFill, {})
 		})]
 	});
 };

package/lib/AudioPlayer/SpeechControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeechControl.js","names":["IconButton","VolumeUpFill"],"sources":["../../src/AudioPlayer/SpeechControl.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 { useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\n\ntype Props = {\n  src: string;\n  title: string;\n  type?: \"gloss\" | \"audio\";\n};\n\nexport const SpeechControl = ({ src, title, type = \"audio\" }: Props) => {\n  const { t } = useTranslation();\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (audioElement.paused) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n    }\n  };\n  return (\n    <div data-embed-type=\"speech\">\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <IconButton variant=\"tertiary\" aria-label={t(`${type}.play`)} title={t(`${type}.play`)} onClick={togglePlay}>\n        <VolumeUpFill />\n      </IconButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAAE,KAAK,OAAO,OAAO,cAAqB;CACtE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,6BAAoC,KAAK;CAE/C,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,aAAa,OACf,cAAa,MAAM;OAEnB,cAAa,OAAO;;;AAI1B,QACE,4CAAC;EAAI,mBAAgB;aAEnB,2CAAC;GAAM,KAAK;GAAe;GAAY;GAAO,SAAQ;IAAa,EACnE,2CAACA;GAAW,SAAQ;GAAW,cAAY,EAAE,GAAG,KAAK,OAAO;GAAE,OAAO,EAAE,GAAG,KAAK,OAAO;GAAE,SAAS;aAC/F,2CAACC,8BAAe;IACL;GACT"}
+{"version":3,"file":"SpeechControl.js","names":["IconButton","VolumeUpFill"],"sources":["../../src/AudioPlayer/SpeechControl.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 { useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\n\ntype Props = {\n  src: string;\n  title: string;\n  type?: \"gloss\" | \"audio\";\n};\n\nexport const SpeechControl = ({ src, title, type = \"audio\" }: Props) => {\n  const { t } = useTranslation();\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (audioElement.paused) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n    }\n  };\n  return (\n    <div data-embed-type=\"speech\">\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <IconButton variant=\"tertiary\" aria-label={t(`${type}.play`)} title={t(`${type}.play`)} onClick={togglePlay}>\n        <VolumeUpFill />\n      </IconButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAAE,KAAK,OAAO,OAAO,cAAqB;CACtE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,6BAAoC,KAAK;CAE/C,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,aAAa,OACf,cAAa,MAAM;OAEnB,cAAa,OAAO;;;AAI1B,QACE,4CAAC;EAAI,mBAAgB;aAEnB,2CAAC;GAAM,KAAK;GAAe;GAAY;GAAO,SAAQ;IAAa,EACnE,2CAACA;GAAW,SAAQ;GAAW,cAAY,EAAE,GAAG,KAAK,OAAO;GAAE,OAAO,EAAE,GAAG,KAAK,OAAO;GAAE,SAAS;aAC/F,2CAACC,6BAAe;IACL;GACT"}

package/lib/Breadcrumb/Breadcrumb.js

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_BreadcrumbItem = require('./BreadcrumbItem.js');
 let react = require("react");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 
@@ -13,7 +13,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledList = (0, __ndla_styled_system_jsx.styled)("ol", { base: {
+const StyledList = (0, _ndla_styled_system_jsx.styled)("ol", { base: {
 	display: "flex",
 	flexWrap: "wrap",
 	alignItems: "center",

package/lib/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":["BreadcrumbItem"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-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 } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { BreadcrumbItem, type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nconst StyledList = styled(\"ol\", {\n  base: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    listStyle: \"none\",\n    gap: \"xxsmall\",\n    mobileDown: {\n      alignItems: \"flex-start\",\n      justifyContent: \"center\",\n      flexDirection: \"column\",\n    },\n  },\n});\n\nexport const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {\n  const { t } = useTranslation();\n\n  return (\n    <nav aria-label={t(\"breadcrumb.breadcrumb\")}>\n      <StyledList>\n        {items.map((item, index) => (\n          <BreadcrumbItem\n            renderItem={renderItem}\n            renderSeparator={renderSeparator}\n            key={typeof item.to === \"string\" ? item.to : item.to.pathname}\n            totalCount={items.length}\n            item={{ ...item, index }}\n          />\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAM,kDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,UAAU;CACV,YAAY;CACZ,WAAW;CACX,KAAK;CACL,YAAY;EACV,YAAY;EACZ,gBAAgB;EAChB,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,YAAY,sBAA6B;CAC3E,MAAM,EAAE,yCAAsB;AAE9B,QACE,2CAAC;EAAI,cAAY,EAAE,wBAAwB;YACzC,2CAAC,wBACE,MAAM,KAAK,MAAM,UAChB,2CAACA;GACa;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;IAAO;KAFnB,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,GACS;GACT"}
+{"version":3,"file":"Breadcrumb.js","names":["BreadcrumbItem"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-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 } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { BreadcrumbItem, type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nconst StyledList = styled(\"ol\", {\n  base: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    listStyle: \"none\",\n    gap: \"xxsmall\",\n    mobileDown: {\n      alignItems: \"flex-start\",\n      justifyContent: \"center\",\n      flexDirection: \"column\",\n    },\n  },\n});\n\nexport const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {\n  const { t } = useTranslation();\n\n  return (\n    <nav aria-label={t(\"breadcrumb.breadcrumb\")}>\n      <StyledList>\n        {items.map((item, index) => (\n          <BreadcrumbItem\n            renderItem={renderItem}\n            renderSeparator={renderSeparator}\n            key={typeof item.to === \"string\" ? item.to : item.to.pathname}\n            totalCount={items.length}\n            item={{ ...item, index }}\n          />\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAM,iDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,UAAU;CACV,YAAY;CACZ,WAAW;CACX,KAAK;CACL,YAAY;EACV,YAAY;EACZ,gBAAgB;EAChB,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,YAAY,sBAA6B;CAC3E,MAAM,EAAE,yCAAsB;AAE9B,QACE,2CAAC;EAAI,cAAY,EAAE,wBAAwB;YACzC,2CAAC,wBACE,MAAM,KAAK,MAAM,UAChB,2CAACA;GACa;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;IAAO;KAFnB,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,GACS;GACT"}

package/lib/Breadcrumb/BreadcrumbItem.js

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/Breadcrumb/BreadcrumbItem.tsx
@@ -11,7 +11,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledListItem = (0, __ndla_styled_system_jsx.styled)("li", { base: {
+const StyledListItem = (0, _ndla_styled_system_jsx.styled)("li", { base: {
 	display: "flex",
 	color: "inherit",
 	gap: "3xsmall",

package/lib/Breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","names":[],"sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-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 } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nexport interface SimpleBreadcrumbItem {\n  to: string | Partial<Location>;\n  name: ReactNode;\n}\n\nexport interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {\n  index: number;\n}\n\nexport interface BreadcrumbRenderProps {\n  item: IndexedBreadcrumbItem;\n  totalCount: number;\n}\n\nconst StyledListItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    color: \"inherit\",\n    gap: \"3xsmall\",\n    alignItems: \"flex-end\",\n    tabletDown: {\n      display: \"block\",\n    },\n    \"& a\": {\n      _visited: {\n        color: \"inherit\",\n      },\n    },\n  },\n});\n\ninterface Props {\n  item: IndexedBreadcrumbItem;\n  autoCollapse?: boolean;\n  totalCount: number;\n  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nexport const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {\n  const isLast = item.index === totalCount - 1;\n  return (\n    <StyledListItem aria-current={isLast ? \"page\" : undefined}>\n      {renderItem(item, totalCount)}\n      {renderSeparator(item, totalCount)}\n    </StyledListItem>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAM,sDAAwB,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,KAAK;CACL,YAAY;CACZ,YAAY,EACV,SAAS,SACV;CACD,OAAO,EACL,UAAU,EACR,OAAO,WACR,EACF;CACF,EACF,CAAC;AAUF,MAAa,kBAAkB,EAAE,YAAY,iBAAiB,MAAM,iBAAwB;CAC1F,MAAM,SAAS,KAAK,UAAU,aAAa;AAC3C,QACE,4CAAC;EAAe,gBAAc,SAAS,SAAS;aAC7C,WAAW,MAAM,WAAW,EAC5B,gBAAgB,MAAM,WAAW;GACnB"}
+{"version":3,"file":"BreadcrumbItem.js","names":[],"sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-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 } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nexport interface SimpleBreadcrumbItem {\n  to: string | Partial<Location>;\n  name: ReactNode;\n}\n\nexport interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {\n  index: number;\n}\n\nexport interface BreadcrumbRenderProps {\n  item: IndexedBreadcrumbItem;\n  totalCount: number;\n}\n\nconst StyledListItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    color: \"inherit\",\n    gap: \"3xsmall\",\n    alignItems: \"flex-end\",\n    tabletDown: {\n      display: \"block\",\n    },\n    \"& a\": {\n      _visited: {\n        color: \"inherit\",\n      },\n    },\n  },\n});\n\ninterface Props {\n  item: IndexedBreadcrumbItem;\n  autoCollapse?: boolean;\n  totalCount: number;\n  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nexport const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {\n  const isLast = item.index === totalCount - 1;\n  return (\n    <StyledListItem aria-current={isLast ? \"page\" : undefined}>\n      {renderItem(item, totalCount)}\n      {renderSeparator(item, totalCount)}\n    </StyledListItem>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAyBA,MAAM,qDAAwB,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,KAAK;CACL,YAAY;CACZ,YAAY,EACV,SAAS,SACV;CACD,OAAO,EACL,UAAU,EACR,OAAO,WACR,EACF;CACF,EACF,CAAC;AAUF,MAAa,kBAAkB,EAAE,YAAY,iBAAiB,MAAM,iBAAwB;CAC1F,MAAM,SAAS,KAAK,UAAU,aAAa;AAC3C,QACE,4CAAC;EAAe,gBAAc,SAAS,SAAS;aAC7C,WAAW,MAAM,WAAW,EAC5B,gBAAgB,MAAM,WAAW;GACnB"}

package/lib/Breadcrumb/HomeBreadcrumb.js

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_Breadcrumb = require('./Breadcrumb.js');
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let __ndla_icons = require("@ndla/icons");
-let __ndla_safelink = require("@ndla/safelink");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_icons = require("@ndla/icons");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/Breadcrumb/HomeBreadcrumb.tsx
@@ -13,21 +13,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
+const StyledSafeLink = (0, _ndla_styled_system_jsx.styled)(_ndla_safelink.SafeLink, { base: {
 	color: "inherit",
 	textDecoration: "underline",
 	_hover: { textDecoration: "none" },
 	_focusVisible: { textDecoration: "none" }
 } });
-const StyledArrowRight = (0, __ndla_styled_system_jsx.styled)(__ndla_icons.ArrowRightShortLine, { base: { tabletDown: { display: "none" } } });
-const IconSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: { color: "inherit" } });
+const StyledArrowRight = (0, _ndla_styled_system_jsx.styled)(_ndla_icons.ArrowRightShortLine, { base: { tabletDown: { display: "none" } } });
+const IconSafeLink = (0, _ndla_styled_system_jsx.styled)(_ndla_safelink.SafeLink, { base: { color: "inherit" } });
 const HomeBreadcrumb = ({ items }) => {
 	const renderItem = (item, totalCount) => {
 		if (item.index === totalCount - 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.name });
 		if (item.index === 0 && typeof item.name === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSafeLink, {
 			"aria-label": item.name,
 			to: item.to,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.HomeLine, { title: item.name })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.HomeLine, { title: item.name })
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSafeLink, {
 			to: item.to,
@@ -37,7 +37,7 @@ const HomeBreadcrumb = ({ items }) => {
 	const renderSeparator = (item, totalCount) => {
 		if (item.index === totalCount - 1) return null;
 		if (item.index === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArrowRight, { "aria-hidden": true });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightShortLine, { "aria-hidden": true });
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ArrowRightShortLine, { "aria-hidden": true });
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Breadcrumb.Breadcrumb, {
 		items,

package/lib/Breadcrumb/HomeBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"HomeBreadcrumb.js","names":["SafeLink","ArrowRightShortLine","HomeLine","Breadcrumb"],"sources":["../../src/Breadcrumb/HomeBreadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-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 { ArrowRightShortLine, HomeLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { Breadcrumb } from \"./Breadcrumb\";\nimport type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"inherit\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusVisible: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst StyledArrowRight = styled(ArrowRightShortLine, {\n  base: {\n    tabletDown: {\n      display: \"none\",\n    },\n  },\n});\n\nconst IconSafeLink = styled(SafeLink, {\n  base: {\n    color: \"inherit\",\n  },\n});\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n}\n\nexport const HomeBreadcrumb = ({ items }: Props) => {\n  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {\n    if (item.index === totalCount - 1) {\n      return <span>{item.name}</span>;\n    }\n    if (item.index === 0 && typeof item.name === \"string\") {\n      return (\n        <IconSafeLink aria-label={item.name} to={item.to}>\n          <HomeLine title={item.name} />\n        </IconSafeLink>\n      );\n    }\n    return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;\n  };\n\n  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {\n    if (item.index === totalCount - 1) {\n      return null;\n    }\n    if (item.index === 0) {\n      return <StyledArrowRight aria-hidden />;\n    }\n    return <ArrowRightShortLine aria-hidden />;\n  };\n\n  return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACD,eAAe,EACb,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,wDAA0BC,kCAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,QACV,EACF,EACF,CAAC;AAEF,MAAM,oDAAsBD,0BAAU,EACpC,MAAM,EACJ,OAAO,WACR,EACF,CAAC;AAMF,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;AACtE,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO,2CAAC,oBAAM,KAAK,OAAY;AAEjC,MAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,SAC3C,QACE,2CAAC;GAAa,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,2CAACE,yBAAS,OAAO,KAAK,OAAQ;IACjB;AAGnB,SAAO,2CAAC;GAAe,IAAI,KAAK;aAAK,KAAK;IAAsB;;CAGlE,MAAM,mBAAmB,MAA6B,eAAuB;AAC3E,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO;AAET,MAAI,KAAK,UAAU,EACjB,QAAO,2CAAC,oBAAiB,sBAAc;AAEzC,SAAO,2CAACD,oCAAoB,sBAAc;;AAG5C,QAAO,2CAACE;EAAkB;EAAmB;EAA6B;GAAmB"}
+{"version":3,"file":"HomeBreadcrumb.js","names":["SafeLink","ArrowRightShortLine","HomeLine","Breadcrumb"],"sources":["../../src/Breadcrumb/HomeBreadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-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 { ArrowRightShortLine, HomeLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { Breadcrumb } from \"./Breadcrumb\";\nimport type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"inherit\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusVisible: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst StyledArrowRight = styled(ArrowRightShortLine, {\n  base: {\n    tabletDown: {\n      display: \"none\",\n    },\n  },\n});\n\nconst IconSafeLink = styled(SafeLink, {\n  base: {\n    color: \"inherit\",\n  },\n});\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n}\n\nexport const HomeBreadcrumb = ({ items }: Props) => {\n  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {\n    if (item.index === totalCount - 1) {\n      return <span>{item.name}</span>;\n    }\n    if (item.index === 0 && typeof item.name === \"string\") {\n      return (\n        <IconSafeLink aria-label={item.name} to={item.to}>\n          <HomeLine title={item.name} />\n        </IconSafeLink>\n      );\n    }\n    return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;\n  };\n\n  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {\n    if (item.index === totalCount - 1) {\n      return null;\n    }\n    if (item.index === 0) {\n      return <StyledArrowRight aria-hidden />;\n    }\n    return <ArrowRightShortLine aria-hidden />;\n  };\n\n  return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,qDAAwBA,yBAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACD,eAAe,EACb,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,uDAA0BC,iCAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,QACV,EACF,EACF,CAAC;AAEF,MAAM,mDAAsBD,yBAAU,EACpC,MAAM,EACJ,OAAO,WACR,EACF,CAAC;AAMF,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;AACtE,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO,2CAAC,oBAAM,KAAK,OAAY;AAEjC,MAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,SAC3C,QACE,2CAAC;GAAa,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,2CAACE,wBAAS,OAAO,KAAK,OAAQ;IACjB;AAGnB,SAAO,2CAAC;GAAe,IAAI,KAAK;aAAK,KAAK;IAAsB;;CAGlE,MAAM,mBAAmB,MAA6B,eAAuB;AAC3E,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO;AAET,MAAI,KAAK,UAAU,EACjB,QAAO,2CAAC,oBAAiB,sBAAc;AAEzC,SAAO,2CAACD,mCAAoB,sBAAc;;AAG5C,QAAO,2CAACE;EAAkB;EAAmB;EAA6B;GAAmB"}

package/lib/CampaignBlock/CampaignBlock.js

@@ -1,12 +1,12 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_relativeUrl = require('../utils/relativeUrl.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let html_react_parser = require("html-react-parser");
 html_react_parser = require_rolldown_runtime.__toESM(html_react_parser);
-let __ndla_icons = require("@ndla/icons");
-let __ndla_safelink = require("@ndla/safelink");
+let _ndla_icons = require("@ndla/icons");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/CampaignBlock/CampaignBlock.tsx
@@ -17,12 +17,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const Wrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const Wrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	width: "100%",
 	height: "100%",
 	containerType: "inline-size"
 } });
-const Container = (0, __ndla_styled_system_jsx.styled)("div", {
+const Container = (0, _ndla_styled_system_jsx.styled)("div", {
 	base: {
 		display: "grid",
 		gridTemplateColumns: "1fr",
@@ -55,7 +55,7 @@ const Container = (0, __ndla_styled_system_jsx.styled)("div", {
 		background: "neutral"
 	}
 });
-const StyledImg = (0, __ndla_styled_system_jsx.styled)("img", { base: {
+const StyledImg = (0, _ndla_styled_system_jsx.styled)("img", { base: {
 	objectFit: "cover",
 	width: "100%",
 	height: "215px",
@@ -66,7 +66,7 @@ const StyledImg = (0, __ndla_styled_system_jsx.styled)("img", { base: {
 	},
 	backgroundColor: "background.default"
 } });
-const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const ContentWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	width: "100%",
 	display: "flex",
 	flexDirection: "column",
@@ -77,14 +77,14 @@ const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	paddingInline: "medium",
 	position: "relative"
 } });
-const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { tablet: {
+const StyledText = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Text, { base: { tablet: {
 	display: "block",
 	overflow: "hidden",
 	position: "relative",
 	lineClamp: 4,
 	boxOrient: "vertical"
 } } });
-const StyledSafeLinkButton = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLinkButton, { base: {
+const StyledSafeLinkButton = (0, _ndla_styled_system_jsx.styled)(_ndla_safelink.SafeLinkButton, { base: {
 	boxShadow: "full",
 	border: "1px solid",
 	borderColor: "stroke.default"
@@ -113,7 +113,7 @@ const CampaignBlock = ({ title, image, imageSide = "left", description, headingL
 		children: [
 			imageSide === "left" && imageComponent,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
 					asChild: true,
 					consumeCss: true,
 					textStyle: "heading.small",
@@ -126,7 +126,7 @@ const CampaignBlock = ({ title, image, imageSide = "left", description, headingL
 				!!url?.url && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinkButton, {
 					url: url.url,
 					path,
-					children: [(0, html_react_parser.default)(url.text ?? ""), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightLine, {})]
+					children: [(0, html_react_parser.default)(url.text ?? ""), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ArrowRightLine, {})]
 				})
 			] }),
 			imageSide !== "left" && imageComponent

package/lib/CampaignBlock/CampaignBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CampaignBlock.js","names":["Text","SafeLinkButton","getPossiblyRelativeUrl","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\nexport const 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"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,MAAM,+CAAiB,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;CAChB,EACF,CAAC;AAEF,MAAM,iDAAmB,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;EACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACF;EACD,YAAY;GACV,SAAS,EAAE;GACX,QAAQ,EACN,iBAAiB,mBAClB;GACD,QAAQ,EACN,iBAAiB,mBAClB;GACF;EACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,iDAAmB,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,SACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,SACT;EACD,YAAY,EACV,QAAQ,SACT;EACF;CACD,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;CACX,EACF,CAAC;AAEF,MAAM,kDAAoBA,wBAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;AAQF,MAAM,4DAA8BC,gCAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;CACd,EACF,CAAC;AAEF,MAAM,cAAc,EAAE,KAAK,UAAU,WAA4B;AAC/D,KAAI,IACF,QACE,2CAAC;EAAqB,IAAIC,2CAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;;AAGT,MAAa,iBAAiB,EAC5B,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,iBACW;CACX,MAAM,iBAAiB,SAAS,2CAAC;EAAU,KAAK,GAAG,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,QACE,2CAAC,qBACC,4CAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;GACzB,4CAAC;IACC,2CAACF;KAAK;KAAQ;KAAW,WAAU;eACjC,2CAAC,4DAAuB,MAAM,GAAmB;MAC5C;IACP,2CAAC;KAAW,WAAU;8CAAqB,YAAY;MAAc;IACpE,CAAC,CAAC,KAAK,OACN,4CAAC;KAAW,KAAK,IAAI;KAAW;+CACvB,IAAI,QAAQ,GAAG,EACtB,2CAACG,gCAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ"}
+{"version":3,"file":"CampaignBlock.js","names":["Text","SafeLinkButton","getPossiblyRelativeUrl","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\nexport const 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"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,MAAM,8CAAiB,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;CAChB,EACF,CAAC;AAEF,MAAM,gDAAmB,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;EACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACF;EACD,YAAY;GACV,SAAS,EAAE;GACX,QAAQ,EACN,iBAAiB,mBAClB;GACD,QAAQ,EACN,iBAAiB,mBAClB;GACF;EACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,gDAAmB,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,SACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,SACT;EACD,YAAY,EACV,QAAQ,SACT;EACF;CACD,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAM,qDAAwB,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;CACX,EACF,CAAC;AAEF,MAAM,iDAAoBA,uBAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;AAQF,MAAM,2DAA8BC,+BAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;CACd,EACF,CAAC;AAEF,MAAM,cAAc,EAAE,KAAK,UAAU,WAA4B;AAC/D,KAAI,IACF,QACE,2CAAC;EAAqB,IAAIC,2CAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;;AAGT,MAAa,iBAAiB,EAC5B,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,iBACW;CACX,MAAM,iBAAiB,SAAS,2CAAC;EAAU,KAAK,GAAG,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,QACE,2CAAC,qBACC,4CAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;GACzB,4CAAC;IACC,2CAACF;KAAK;KAAQ;KAAW,WAAU;eACjC,2CAAC,4DAAuB,MAAM,GAAmB;MAC5C;IACP,2CAAC;KAAW,WAAU;8CAAqB,YAAY;MAAc;IACpE,CAAC,CAAC,KAAK,OACN,4CAAC;KAAW,KAAK,IAAI;KAAW;+CACvB,IAAI,QAAQ,GAAG,EACtB,2CAACG,+BAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ"}

package/lib/CodeBlock/CodeBlock.js

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __ndla_styled_system_css = require("@ndla/styled-system/css");
+let _ndla_styled_system_css = require("@ndla/styled-system/css");
 
 //#region src/CodeBlock/CodeBlock.tsx
 /**
@@ -12,7 +12,7 @@ let __ndla_styled_system_css = require("@ndla/styled-system/css");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const Pre = (0, __ndla_styled_system_jsx.styled)("pre", {});
+const Pre = (0, _ndla_styled_system_jsx.styled)("pre", {});
 const CodeBlock = (0, react.forwardRef)(({ highlightedCode, format, className, ...props }, ref) => {
 	const codeWithLineNumbers = (0, react.useMemo)(() => {
 		return highlightedCode.split("\n").map((line, i) => {
@@ -20,7 +20,7 @@ const CodeBlock = (0, react.forwardRef)(({ highlightedCode, format, className, .
 		}).join("\n");
 	}, [highlightedCode]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pre, {
-		className: (0, __ndla_styled_system_css.cx)("codeblock", `language-${format}`, className),
+		className: (0, _ndla_styled_system_css.cx)("codeblock", `language-${format}`, className),
 		...props,
 		dangerouslySetInnerHTML: { __html: codeWithLineNumbers },
 		ref

package/lib/CodeBlock/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../src/CodeBlock/CodeBlock.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 ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n  highlightedCode: string;\n  format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n  const codeWithLineNumbers = useMemo(() => {\n    return highlightedCode\n      .split(\"\\n\")\n      .map((line, i) => {\n        return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n      })\n      .join(\"\\n\");\n  }, [highlightedCode]);\n\n  return (\n    <Pre\n      className={cx(\"codeblock\", `language-${format}`, className)}\n      {...props}\n      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n      ref={ref}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,2CAAa,OAAO,EAAE,CAAC;AAE7B,MAAa,mCAA+C,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,+CAAoC;AACxC,SAAO,gBACJ,MAAM,KAAK,CACX,KAAK,MAAM,MAAM;AAChB,UAAO,4BAA4B,IAAI,EAAE,SAAS;IAClD,CACD,KAAK,KAAK;IACZ,CAAC,gBAAgB,CAAC;AAErB,QACE,2CAAC;EACC,4CAAc,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;GACL;EAEJ"}
+{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../src/CodeBlock/CodeBlock.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 ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n  highlightedCode: string;\n  format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n  const codeWithLineNumbers = useMemo(() => {\n    return highlightedCode\n      .split(\"\\n\")\n      .map((line, i) => {\n        return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n      })\n      .join(\"\\n\");\n  }, [highlightedCode]);\n\n  return (\n    <Pre\n      className={cx(\"codeblock\", `language-${format}`, className)}\n      {...props}\n      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n      ref={ref}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,0CAAa,OAAO,EAAE,CAAC;AAE7B,MAAa,mCAA+C,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,+CAAoC;AACxC,SAAO,gBACJ,MAAM,KAAK,CACX,KAAK,MAAM,MAAM;AAChB,UAAO,4BAA4B,IAAI,EAAE,SAAS;IAClD,CACD,KAAK,KAAK;IACZ,CAAC,gBAAgB,CAAC;AAErB,QACE,2CAAC;EACC,2CAAc,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;GACL;EAEJ"}

package/lib/CodeBlock/codeLanguageOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeLanguageOptions.js","names":["codeLanguageOptions: Array<ICodeLangugeOption>"],"sources":["../../src/CodeBlock/codeLanguageOptions.ts"],"sourcesContent":["/**\n * Copyright (c) 2019-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nexport const codeLanguageOptions: Array<ICodeLangugeOption> = [\n  {\n    title: \"Bash\",\n    format: \"bash\",\n  },\n  {\n    title: \"C\",\n    format: \"c\",\n  },\n  {\n    title: \"CSharp\",\n    format: \"csharp\",\n  },\n  {\n    title: \"CSS\",\n    format: \"css\",\n  },\n  {\n    title: \"Diff\",\n    format: \"diff\",\n  },\n  {\n    title: \"HTML\",\n    format: \"markup\",\n  },\n  {\n    title: \"Ini\",\n    format: \"ini\",\n  },\n  {\n    title: \"Java\",\n    format: \"java\",\n  },\n  {\n    title: \"Javascript\",\n    format: \"js\",\n  },\n  {\n    title: \"JSON\",\n    format: \"json\",\n  },\n  {\n    title: \"JSX\",\n    format: \"jsx\",\n  },\n  {\n    title: \"Kotlin\",\n    format: \"kotlin\",\n  },\n  {\n    title: \"LUA\",\n    format: \"lua\",\n  },\n  {\n    title: \"Markdown\",\n    format: \"markdown\",\n  },\n  {\n    title: \"Matlab\",\n    format: \"matlab\",\n  },\n  {\n    title: \"NSIS\",\n    format: \"nsis\",\n  },\n  {\n    title: \"PHP\",\n    format: \"php\",\n  },\n  {\n    title: \"Powershell\",\n    format: \"powershell\",\n  },\n  {\n    title: \"Python\",\n    format: \"python\",\n  },\n  {\n    title: \"Ruby\",\n    format: \"ruby\",\n  },\n  {\n    title: \"Rust\",\n    format: \"rust\",\n  },\n  {\n    title: \"SQL\",\n    format: \"sql\",\n  },\n  {\n    title: \"Text\",\n    format: \"text\",\n  },\n  {\n    title: \"VHDL\",\n    format: \"vhdl\",\n  },\n  {\n    title: \"XML\",\n    format: \"xml\",\n  },\n];\n\nexport interface ICodeLangugeOption {\n  title: string;\n  format: string;\n}\n"],"mappings":";;;;;;;;;AAQA,MAAaA,sBAAiD;CAC5D;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACF"}
+{"version":3,"file":"codeLanguageOptions.js","names":[],"sources":["../../src/CodeBlock/codeLanguageOptions.ts"],"sourcesContent":["/**\n * Copyright (c) 2019-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nexport const codeLanguageOptions: Array<ICodeLangugeOption> = [\n  {\n    title: \"Bash\",\n    format: \"bash\",\n  },\n  {\n    title: \"C\",\n    format: \"c\",\n  },\n  {\n    title: \"CSharp\",\n    format: \"csharp\",\n  },\n  {\n    title: \"CSS\",\n    format: \"css\",\n  },\n  {\n    title: \"Diff\",\n    format: \"diff\",\n  },\n  {\n    title: \"HTML\",\n    format: \"markup\",\n  },\n  {\n    title: \"Ini\",\n    format: \"ini\",\n  },\n  {\n    title: \"Java\",\n    format: \"java\",\n  },\n  {\n    title: \"Javascript\",\n    format: \"js\",\n  },\n  {\n    title: \"JSON\",\n    format: \"json\",\n  },\n  {\n    title: \"JSX\",\n    format: \"jsx\",\n  },\n  {\n    title: \"Kotlin\",\n    format: \"kotlin\",\n  },\n  {\n    title: \"LUA\",\n    format: \"lua\",\n  },\n  {\n    title: \"Markdown\",\n    format: \"markdown\",\n  },\n  {\n    title: \"Matlab\",\n    format: \"matlab\",\n  },\n  {\n    title: \"NSIS\",\n    format: \"nsis\",\n  },\n  {\n    title: \"PHP\",\n    format: \"php\",\n  },\n  {\n    title: \"Powershell\",\n    format: \"powershell\",\n  },\n  {\n    title: \"Python\",\n    format: \"python\",\n  },\n  {\n    title: \"Ruby\",\n    format: \"ruby\",\n  },\n  {\n    title: \"Rust\",\n    format: \"rust\",\n  },\n  {\n    title: \"SQL\",\n    format: \"sql\",\n  },\n  {\n    title: \"Text\",\n    format: \"text\",\n  },\n  {\n    title: \"VHDL\",\n    format: \"vhdl\",\n  },\n  {\n    title: \"XML\",\n    format: \"xml\",\n  },\n];\n\nexport interface ICodeLangugeOption {\n  title: string;\n  format: string;\n}\n"],"mappings":";;;;;;;;;AAQA,MAAa,sBAAiD;CAC5D;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACF"}

package/lib/Concept/Concept.js

@@ -7,8 +7,8 @@ const require_H5pEmbed = require('../Embed/H5pEmbed.js');
 const require_IframeEmbed = require('../Embed/IframeEmbed.js');
 const require_ImageEmbed = require('../Embed/ImageEmbed.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/Concept/Concept.tsx
@@ -19,12 +19,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: {
+const StyledFigure = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Figure, { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "medium"
 } });
-const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const ContentWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	textStyle: "body.large",
 	display: "inline",
 	"& p": { display: "inline" }

package/lib/Concept/Concept.js.map

@@ -1 +1 @@
-{"version":3,"file":"Concept.js","names":["Figure","licenseAttributes","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 { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { BrightcoveEmbed } from \"../Embed/BrightcoveEmbed\";\nimport { ExternalEmbed } from \"../Embed/ExternalEmbed\";\nimport { H5pEmbed } from \"../Embed/H5pEmbed\";\nimport { IframeEmbed } from \"../Embed/IframeEmbed\";\nimport { ImageEmbed } from \"../Embed/ImageEmbed\";\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":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAa,iCACV,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAeC,4CAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,QACE,4CAAC;EAAkB;EAAK,GAAI;EAAM,GAAI;;GACpC,4CAAC;IAAqB;eACnB,CAAC,CAAC,SACD,qFACE,2CAAC,iBAAG,QAAU,EACb,SACA,EAEJ;KACc;GAChB,eAAe,aAAa,UAC3B,2CAACC;IAAW,OAAO;IAAqB;IAAkB;KAAc,GACtE,eAAe,aAAa,eAC9B,2CAACC,2CAAgB,OAAO,gBAAiB,GACvC,eAAe,aAAa,QAC9B,2CAACC,6BAAS,OAAO,gBAAiB,GAChC,eAAe,aAAa,WAC9B,2CAACC,mCAAY,OAAO,gBAAiB,GACnC,eAAe,aAAa,aAC9B,2CAACC,uCAAc,OAAO,gBAAiB,GACrC;GACH,CAAC,CAAC,aAAa,2CAACC;IAAuB;IAAW,MAAK;KAAY;;GACvD;EAGpB"}
+{"version":3,"file":"Concept.js","names":["Figure","licenseAttributes","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 { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { BrightcoveEmbed } from \"../Embed/BrightcoveEmbed\";\nimport { ExternalEmbed } from \"../Embed/ExternalEmbed\";\nimport { H5pEmbed } from \"../Embed/H5pEmbed\";\nimport { IframeEmbed } from \"../Embed/IframeEmbed\";\nimport { ImageEmbed } from \"../Embed/ImageEmbed\";\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":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,mDAAsBA,yBAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,qDAAwB,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAa,iCACV,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAeC,4CAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,QACE,4CAAC;EAAkB;EAAK,GAAI;EAAM,GAAI;;GACpC,4CAAC;IAAqB;eACnB,CAAC,CAAC,SACD,qFACE,2CAAC,iBAAG,QAAU,EACb,SACA,EAEJ;KACc;GAChB,eAAe,aAAa,UAC3B,2CAACC;IAAW,OAAO;IAAqB;IAAkB;KAAc,GACtE,eAAe,aAAa,eAC9B,2CAACC,2CAAgB,OAAO,gBAAiB,GACvC,eAAe,aAAa,QAC9B,2CAACC,6BAAS,OAAO,gBAAiB,GAChC,eAAe,aAAa,WAC9B,2CAACC,mCAAY,OAAO,gBAAiB,GACnC,eAAe,aAAa,aAC9B,2CAACC,uCAAc,OAAO,gBAAiB,GACrC;GACH,CAAC,CAAC,aAAa,2CAACC;IAAuB;IAAW,MAAK;KAAY;;GACvD;EAGpB"}

package/lib/ContactBlock/ContactBlock.js

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 
@@ -19,7 +19,7 @@ const BackgroundVariant = {
 	subtle: { _before: { backgroundColor: "surface.brand.3.subtle" } }
 };
 const contactBlockBackgrounds = Object.keys(BackgroundVariant);
-const StyledWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const StyledWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	minWidth: "surface.xxsmall",
 	padding: "medium",
@@ -39,13 +39,13 @@ const StyledWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 		flexDirection: "row"
 	}
 } });
-const EmailLink = (0, __ndla_styled_system_jsx.styled)("a", { base: {
+const EmailLink = (0, _ndla_styled_system_jsx.styled)("a", { base: {
 	color: "text.default",
 	textDecoration: "underline",
 	_hover: { textDecoration: "none" },
 	_focusVisible: { textDecoration: "none" }
 } });
-const HeaderWrapper = (0, __ndla_styled_system_jsx.styled)("div", {
+const HeaderWrapper = (0, _ndla_styled_system_jsx.styled)("div", {
 	base: {
 		position: "relative",
 		display: "flex",
@@ -70,7 +70,7 @@ const HeaderWrapper = (0, __ndla_styled_system_jsx.styled)("div", {
 		imageExists: { true: { tabletDown: { _before: { display: "none" } } } }
 	}
 });
-const ImageWrapper = (0, __ndla_styled_system_jsx.styled)("div", {
+const ImageWrapper = (0, _ndla_styled_system_jsx.styled)("div", {
 	base: {
 		display: "flex",
 		gap: "xxsmall",
@@ -93,20 +93,20 @@ const ImageWrapper = (0, __ndla_styled_system_jsx.styled)("div", {
 	},
 	variants: { variant: BackgroundVariant }
 });
-const StyledImage = (0, __ndla_styled_system_jsx.styled)("img", { base: {
+const StyledImage = (0, _ndla_styled_system_jsx.styled)("img", { base: {
 	borderRadius: "xsmall",
 	width: "surface.xsmall",
 	height: "surface.xsmall",
 	objectFit: "cover"
 } });
-const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const ContentWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "medium",
 	flex: "1",
 	width: "100%"
 } });
-const StyledDescription = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { fontFamily: "serif" } });
+const StyledDescription = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Text, { base: { fontFamily: "serif" } });
 const ContactBlock = ({ image, jobTitle, description, name, email, embedAlt, lang, backgroundColor = "strong" }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledWrapper, {
@@ -115,17 +115,17 @@ const ContactBlock = ({ image, jobTitle, description, name, email, embedAlt, lan
 			variant: backgroundColor,
 			imageExists: !!image,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
 					lang,
 					fontWeight: "bold",
 					textStyle: "heading.small",
 					children: name
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
 					lang,
 					children: jobTitle
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Text, { children: [`${t("email")}: `, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmailLink, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Text, { children: [`${t("email")}: `, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmailLink, {
 					href: `mailto:${email}`,
 					children: email
 				})] })