@ndla/ui 56.0.191-alpha.0 → 56.0.194-alpha.0

package/lib/AudioPlayer/CompactAudioPlayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompactAudioPlayer.js","names":["Text","IconButton","useAudioControls","AudioElement","PlayButton","formatTime","PopoverRoot","PopoverTrigger","VolumeUpFill","PopoverContent","PopoverTitle","VolumeSlider","AudioProgress"],"sources":["../../src/AudioPlayer/CompactAudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { VolumeUpFill } from \"@ndla/icons\";\nimport { PopoverRoot, PopoverTrigger, IconButton, PopoverContent, Text, PopoverTitle } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { AudioElement } from \"./AudioElement\";\nimport { AudioProgress } from \"./AudioProgress\";\nimport { formatTime } from \"./audioUtils\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\nimport { VolumeSlider } from \"./VolumeSlider\";\n\nconst AudioContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexDirection: \"column\",\n    padding: \"xsmall\",\n    paddingBlockEnd: \"0\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"xsmall\",\n    background: \"surface.brand.1.subtle\",\n  },\n});\n\nconst ControlsContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n  },\n});\n\ninterface Props {\n  src: string;\n  title: string;\n}\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"4xlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    marginInlineStart: \"auto\",\n  },\n});\n\nconst EllipsedText = styled(Text, {\n  base: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n});\n\nexport const CompactAudioPlayer = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const {\n    audioRef,\n    playing,\n    togglePlay,\n    currentTime,\n    duration,\n    handleSliderChange,\n    volumeValue,\n    handleVolumeSliderChange,\n    onEnded,\n    onHandleTime,\n  } = useAudioControls();\n  return (\n    <AudioContainer>\n      <AudioElement\n        ref={audioRef}\n        src={src}\n        title={title}\n        onEnded={onEnded}\n        onLoadedMetadata={onHandleTime}\n        onTimeUpdate={onHandleTime}\n      />\n      <ControlsContainer>\n        <PlayButton playing={playing} onClick={togglePlay} />\n        <StyledText>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span>{formatTime(currentTime)}</span>\n          </Text>\n          {\"/ \"}\n          <Text textStyle=\"label.medium\" color=\"text.subtle\" asChild consumeCss>\n            <span>{formatTime(duration)}</span>\n          </Text>\n        </StyledText>\n        <EllipsedText textStyle=\"title.medium\">{title}</EllipsedText>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <StyledIconButton variant=\"tertiary\">\n              <VolumeUpFill />\n            </StyledIconButton>\n          </PopoverTrigger>\n          <PopoverContent>\n            <PopoverTitle srOnly>{t(\"audio.controls.adjustVolume\")}</PopoverTitle>\n            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n          </PopoverContent>\n        </PopoverRoot>\n      </ControlsContainer>\n      <AudioProgress\n        currentTime={currentTime}\n        duration={duration}\n        onValueChange={handleSliderChange}\n        variant=\"simple\"\n      />\n    </AudioContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,eAAe;CACf,SAAS;CACT,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,qBAAA,GAAA,wBAAA,QAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAOF,MAAM,cAAA,GAAA,wBAAA,QAAoBA,iBAAAA,MAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,YAAY,EAC1C,MAAM,EACJ,mBAAmB,QACpB,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,iBAAAA,MAAM,EAChC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,YAAY;CACb,EACF,CAAC;AAEF,MAAa,sBAAsB,EAAE,KAAK,YAAmB;CAC3D,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,EACJ,UACA,SACA,YACA,aACA,UACA,oBACA,aACA,0BACA,SACA,iBACEE,yBAAAA,kBAAkB;AACtB,QACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;GACE,KAAK;GACA;GACE;GACE;GACT,kBAAkB;GAClB,cAAc;GACd,CAAA;EACF,iBAAA,GAAA,kBAAA,MAAC,mBAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAqB;IAAS,SAAS;IAAc,CAAA;GACrD,iBAAA,GAAA,kBAAA,MAAC,YAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,KAACJ,iBAAAA,MAAD;KAAM,WAAU;KAAe,SAAA;KAAQ,YAAA;eACrC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAOK,mBAAAA,WAAW,YAAY,EAAQ,CAAA;KACjC,CAAA;IACN;IACD,iBAAA,GAAA,kBAAA,KAACL,iBAAAA,MAAD;KAAM,WAAU;KAAe,OAAM;KAAc,SAAA;KAAQ,YAAA;eACzD,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAOK,mBAAAA,WAAW,SAAS,EAAQ,CAAA;KAC9B,CAAA;IACI,EAAA,CAAA;GACb,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,WAAU;cAAgB;IAAqB,CAAA;GAC7D,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;IAAa,aAAa,EAAE,WAAW,OAAO;cAA9C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;KAAgB,SAAA;eACd,iBAAA,GAAA,kBAAA,KAAC,kBAAD;MAAkB,SAAQ;gBACxB,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,EAAgB,CAAA;MACC,CAAA;KACJ,CAAA,EACjB,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,cAAD;KAAc,QAAA;eAAQ,EAAE,8BAA8B;KAAgB,CAAA,EACtE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;KAAc,OAAO;KAAa,eAAe;KAA4B,CAAA,CAC9D,EAAA,CAAA,CACL;;GACI,EAAA,CAAA;EACpB,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;GACe;GACH;GACV,eAAe;GACf,SAAQ;GACR,CAAA;EACa,EAAA,CAAA"}
+{"version":3,"file":"CompactAudioPlayer.js","names":["Text","IconButton","useAudioControls","AudioElement","PlayButton","formatTime","PopoverRoot","PopoverTrigger","VolumeUpFill","PopoverContent","PopoverTitle","VolumeSlider","AudioProgress"],"sources":["../../src/AudioPlayer/CompactAudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { VolumeUpFill } from \"@ndla/icons\";\nimport { PopoverRoot, PopoverTrigger, IconButton, PopoverContent, Text, PopoverTitle } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { AudioElement } from \"./AudioElement\";\nimport { AudioProgress } from \"./AudioProgress\";\nimport { formatTime } from \"./audioUtils\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\nimport { VolumeSlider } from \"./VolumeSlider\";\n\nconst AudioContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexDirection: \"column\",\n    padding: \"xsmall\",\n    paddingBlockEnd: \"0\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"xsmall\",\n    background: \"surface.brand.1.subtle\",\n  },\n});\n\nconst ControlsContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n  },\n});\n\ninterface Props {\n  src: string;\n  title: string;\n}\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"4xlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    marginInlineStart: \"auto\",\n  },\n});\n\nconst EllipsedText = styled(Text, {\n  base: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n});\n\nexport const CompactAudioPlayer = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const {\n    audioRef,\n    playing,\n    togglePlay,\n    currentTime,\n    duration,\n    handleSliderChange,\n    volumeValue,\n    handleVolumeSliderChange,\n    onEnded,\n    onHandleTime,\n  } = useAudioControls();\n  return (\n    <AudioContainer>\n      <AudioElement\n        ref={audioRef}\n        src={src}\n        title={title}\n        onEnded={onEnded}\n        onLoadedMetadata={onHandleTime}\n        onTimeUpdate={onHandleTime}\n      />\n      <ControlsContainer>\n        <PlayButton playing={playing} onClick={togglePlay} />\n        <StyledText>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span>{formatTime(currentTime)}</span>\n          </Text>\n          {\"/ \"}\n          <Text textStyle=\"label.medium\" color=\"text.subtle\" asChild consumeCss>\n            <span>{formatTime(duration)}</span>\n          </Text>\n        </StyledText>\n        <EllipsedText textStyle=\"title.medium\">{title}</EllipsedText>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <StyledIconButton variant=\"tertiary\">\n              <VolumeUpFill />\n            </StyledIconButton>\n          </PopoverTrigger>\n          <PopoverContent>\n            <PopoverTitle srOnly>{t(\"audio.controls.adjustVolume\")}</PopoverTitle>\n            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n          </PopoverContent>\n        </PopoverRoot>\n      </ControlsContainer>\n      <AudioProgress\n        currentTime={currentTime}\n        duration={duration}\n        onValueChange={handleSliderChange}\n        variant=\"simple\"\n      />\n    </AudioContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,eAAe;CACf,SAAS;CACT,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;AACd,EACF,CAAC;AAED,MAAM,qBAAA,GAAA,wBAAA,QAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;AACd,EACF,CAAC;AAOD,MAAM,cAAA,GAAA,wBAAA,QAAoBA,iBAAAA,MAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;AACb,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,YAAY,EAC1C,MAAM,EACJ,mBAAmB,OACrB,EACF,CAAC;AAED,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,iBAAAA,MAAM,EAChC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,YAAY;AACd,EACF,CAAC;AAED,MAAa,sBAAsB,EAAE,KAAK,YAAmB;CAC3D,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAC7B,MAAM,EACJ,UACA,SACA,YACA,aACA,UACA,oBACA,aACA,0BACA,SACA,iBACEE,yBAAAA,iBAAiB;CACrB,OACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;GACE,KAAK;GACA;GACE;GACE;GACT,kBAAkB;GAClB,cAAc;EACf,CAAA;EACD,iBAAA,GAAA,kBAAA,MAAC,mBAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAqB;IAAS,SAAS;GAAa,CAAA;GACpD,iBAAA,GAAA,kBAAA,MAAC,YAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,KAACJ,iBAAAA,MAAD;KAAM,WAAU;KAAe,SAAA;KAAQ,YAAA;eACrC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAOK,mBAAAA,WAAW,WAAW,EAAQ,CAAA;IACjC,CAAA;IACL;IACD,iBAAA,GAAA,kBAAA,KAACL,iBAAAA,MAAD;KAAM,WAAU;KAAe,OAAM;KAAc,SAAA;KAAQ,YAAA;eACzD,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAOK,mBAAAA,WAAW,QAAQ,EAAQ,CAAA;IAC9B,CAAA;GACI,EAAA,CAAA;GACZ,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,WAAU;cAAgB;GAAoB,CAAA;GAC5D,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;IAAa,aAAa,EAAE,WAAW,MAAM;cAA7C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;KAAgB,SAAA;eACd,iBAAA,GAAA,kBAAA,KAAC,kBAAD;MAAkB,SAAQ;gBACxB,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,CAAe,CAAA;KACC,CAAA;IACJ,CAAA,GAChB,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,cAAD;KAAc,QAAA;eAAQ,EAAE,6BAA6B;IAAgB,CAAA,GACrE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;KAAc,OAAO;KAAa,eAAe;IAA2B,CAAA,CAC9D,EAAA,CAAA,CACL;;EACI,EAAA,CAAA;EACnB,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;GACe;GACH;GACV,eAAe;GACf,SAAQ;EACT,CAAA;CACa,EAAA,CAAA;AAEpB"}

package/lib/AudioPlayer/Controls.js

@@ -10,7 +10,7 @@ let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_collection = require("@ark-ui/react/collection");
 //#region src/AudioPlayer/Controls.tsx
 /**
 * Copyright (c) 2021-present, NDLA.
@@ -71,7 +71,7 @@ const SpeedButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button,
 } });
 const StyledSelectRoot = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SelectRoot, { base: { gridArea: "speed" } });
 const StyledPopoverContent = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.PopoverContent, { base: { paddingInline: "small" } });
-const speedValues = (0, _ark_ui_react.createListCollection)({ items: [
+const speedValues = (0, _ark_ui_react_collection.createListCollection)({ items: [
 	"0.5",
 	"0.75",
 	"1",

package/lib/AudioPlayer/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","names":["PlayButton","IconButton","Text","Button","SelectRoot","PopoverContent","useAudioControls","AudioElement","Replay15Line","Forward15Line","formatTime","AudioProgress","FieldRoot","SelectLabel","SelectControl","SelectTrigger","SelectContent","SelectItem","SelectItemText","SelectItemIndicator","CheckLine","PopoverRoot","PopoverTrigger","VolumeUpFill","VolumeSlider"],"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 { createListCollection } from \"@ark-ui/react\";\nimport { Replay15Line, Forward15Line, 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  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { AudioElement } from \"./AudioElement\";\nimport { AudioProgress } from \"./AudioProgress\";\nimport { formatTime } from \"./audioUtils\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\nimport { VolumeSlider } from \"./VolumeSlider\";\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 StyledPlayButton = styled(PlayButton, {\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 StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\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  variant?: \"full\" | \"simplified\";\n}\n\nexport const Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const {\n    audioRef,\n    onEnded,\n    onHandleTime,\n    onSeekSeconds,\n    playing,\n    togglePlay,\n    handleSliderChange,\n    handleVolumeSliderChange,\n    currentTime,\n    duration,\n    speedValue,\n    onPlaybackRateChange,\n    volumeValue,\n  } = useAudioControls();\n\n  return (\n    <div>\n      <AudioElement\n        src={src}\n        title={title}\n        ref={audioRef}\n        onEnded={onEnded}\n        onLoadedMetadata={onHandleTime}\n        onTimeUpdate={onHandleTime}\n      />\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        <StyledPlayButton playing={playing} onClick={togglePlay} />\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          <AudioProgress currentTime={currentTime} duration={duration} onValueChange={handleSliderChange} />\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            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Controls.js","names":["PlayButton","IconButton","Text","Button","SelectRoot","PopoverContent","useAudioControls","AudioElement","Replay15Line","Forward15Line","formatTime","AudioProgress","FieldRoot","SelectLabel","SelectControl","SelectTrigger","SelectContent","SelectItem","SelectItemText","SelectItemIndicator","CheckLine","PopoverRoot","PopoverTrigger","VolumeUpFill","VolumeSlider"],"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 { createListCollection } from \"@ark-ui/react/collection\";\nimport { Replay15Line, Forward15Line, 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  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { AudioElement } from \"./AudioElement\";\nimport { AudioProgress } from \"./AudioProgress\";\nimport { formatTime } from \"./audioUtils\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\nimport { VolumeSlider } from \"./VolumeSlider\";\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 StyledPlayButton = styled(PlayButton, {\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 StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\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  variant?: \"full\" | \"simplified\";\n}\n\nexport const Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const {\n    audioRef,\n    onEnded,\n    onHandleTime,\n    onSeekSeconds,\n    playing,\n    togglePlay,\n    handleSliderChange,\n    handleVolumeSliderChange,\n    currentTime,\n    duration,\n    speedValue,\n    onPlaybackRateChange,\n    volumeValue,\n  } = useAudioControls();\n\n  return (\n    <div>\n      <AudioElement\n        src={src}\n        title={title}\n        ref={audioRef}\n        onEnded={onEnded}\n        onLoadedMetadata={onHandleTime}\n        onTimeUpdate={onHandleTime}\n      />\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        <StyledPlayButton playing={playing} onClick={togglePlay} />\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          <AudioProgress currentTime={currentTime} duration={duration} onValueChange={handleSliderChange} />\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            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/lib/AudioPlayer/PlayButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayButton.js","names":["IconButton","PauseLine","PlayFill"],"sources":["../../src/AudioPlayer/PlayButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { PauseLine, PlayFill } from \"@ndla/icons\";\nimport { IconButton, type IconButtonProps } from \"@ndla/primitives\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends IconButtonProps {\n  playing?: boolean;\n}\n\nexport const PlayButton = ({ playing, children, ...rest }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <IconButton aria-label={playing ? t(\"audio.pause\") : t(\"audio.play\")} {...rest}>\n      {children ?? (playing ? <PauseLine /> : <PlayFill />)}\n    </IconButton>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,cAAc,EAAE,SAAS,UAAU,GAAG,WAAkB;CACnE,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAC9B,QACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,YAAD;EAAY,cAAY,UAAU,EAAE,cAAc,GAAG,EAAE,aAAa;EAAE,GAAI;YACvE,aAAa,UAAU,iBAAA,GAAA,kBAAA,KAACC,YAAAA,WAAD,EAAa,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAACC,YAAAA,UAAD,EAAY,CAAA;EACzC,CAAA"}
+{"version":3,"file":"PlayButton.js","names":["IconButton","PauseLine","PlayFill"],"sources":["../../src/AudioPlayer/PlayButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { PauseLine, PlayFill } from \"@ndla/icons\";\nimport { IconButton, type IconButtonProps } from \"@ndla/primitives\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends IconButtonProps {\n  playing?: boolean;\n}\n\nexport const PlayButton = ({ playing, children, ...rest }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <IconButton aria-label={playing ? t(\"audio.pause\") : t(\"audio.play\")} {...rest}>\n      {children ?? (playing ? <PauseLine /> : <PlayFill />)}\n    </IconButton>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,cAAc,EAAE,SAAS,UAAU,GAAG,WAAkB;CACnE,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAC7B,OACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,YAAD;EAAY,cAAY,UAAU,EAAE,aAAa,IAAI,EAAE,YAAY;EAAG,GAAI;YACvE,aAAa,UAAU,iBAAA,GAAA,kBAAA,KAACC,YAAAA,WAAD,CAAY,CAAA,IAAI,iBAAA,GAAA,kBAAA,KAACC,YAAAA,UAAD,CAAW,CAAA;CACzC,CAAA;AAEhB"}

package/lib/AudioPlayer/SpeechControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeechControl.js","names":["useAudioControls","PlayButton","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 { VolumeUpFill } from \"@ndla/icons\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\n\ntype Props = {\n  src: string;\n  title: string;\n};\n\nexport const SpeechControl = ({ src, title }: Props) => {\n  const { audioRef, togglePlay } = useAudioControls();\n\n  return (\n    <div data-embed-type=\"speech\">\n      {/* oxlint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <PlayButton variant=\"tertiary\" onClick={togglePlay}>\n        <VolumeUpFill />\n      </PlayButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,iBAAiB,EAAE,KAAK,YAAmB;CACtD,MAAM,EAAE,UAAU,eAAeA,yBAAAA,kBAAkB;AAEnD,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,mBAAgB;YAArB,CAEE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GAAO,KAAK;GAAe;GAAY;GAAO,SAAQ;GAAa,CAAA,EACnE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GAAY,SAAQ;GAAW,SAAS;aACtC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,EAAgB,CAAA;GACL,CAAA,CACT"}
+{"version":3,"file":"SpeechControl.js","names":["useAudioControls","PlayButton","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 { VolumeUpFill } from \"@ndla/icons\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\n\ntype Props = {\n  src: string;\n  title: string;\n};\n\nexport const SpeechControl = ({ src, title }: Props) => {\n  const { audioRef, togglePlay } = useAudioControls();\n\n  return (\n    <div data-embed-type=\"speech\">\n      {/* oxlint-disable-next-line jsx-a11y/media-has-caption oxlint-disable-next-line jsx-a11y/control-has-associated-label */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <PlayButton variant=\"tertiary\" onClick={togglePlay}>\n        <VolumeUpFill />\n      </PlayButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,iBAAiB,EAAE,KAAK,YAAmB;CACtD,MAAM,EAAE,UAAU,eAAeA,yBAAAA,iBAAiB;CAElD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,mBAAgB;YAArB,CAEE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GAAO,KAAK;GAAe;GAAY;GAAO,SAAQ;EAAY,CAAA,GAClE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GAAY,SAAQ;GAAW,SAAS;aACtC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,CAAe,CAAA;EACL,CAAA,CACT;;AAET"}

package/lib/AudioPlayer/VolumeSlider.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import type { SliderValueChangeDetails } from "@ark-ui/react/slider";
 interface Props {
     value: number;
     onValueChange: (value: SliderValueChangeDetails) => void;

package/lib/AudioPlayer/VolumeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeSlider.js","names":["SliderControl","SliderRoot","SliderLabel","SliderTrack","SliderRange","SliderThumb","SliderHiddenInput"],"sources":["../../src/AudioPlayer/VolumeSlider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport {\n  SliderControl,\n  SliderRoot,\n  SliderLabel,\n  SliderTrack,\n  SliderRange,\n  SliderHiddenInput,\n  SliderThumb,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { t } from \"i18next\";\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\ninterface Props {\n  value: number;\n  onValueChange: (value: SliderValueChangeDetails) => void;\n}\n\nexport const VolumeSlider = ({ value, onValueChange }: Props) => {\n  return (\n    <SliderRoot\n      orientation=\"vertical\"\n      value={[value]}\n      min={0}\n      max={100}\n      defaultValue={[100]}\n      step={1}\n      onValueChange={onValueChange}\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  );\n};\n"],"mappings":";;;;;;AAqBA,MAAM,uBAAA,GAAA,wBAAA,QAA6BA,iBAAAA,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;CACX,EACF,CAAC;AAOF,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;AAC/D,QACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,MAAM;EACd,KAAK;EACL,KAAK;EACL,cAAc,CAAC,IAAI;EACnB,MAAM;EACS;YAPjB,CASE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;4BAAU,8BAA8B;GAAe,CAAA,EACpE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAe,CAAA,EACH,CAAA,EACd,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,OAAO;aAClB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,EAAqB,CAAA;GACT,CAAA,CACM,EAAA,CAAA,CACX"}
+{"version":3,"file":"VolumeSlider.js","names":["SliderControl","SliderRoot","SliderLabel","SliderTrack","SliderRange","SliderThumb","SliderHiddenInput"],"sources":["../../src/AudioPlayer/VolumeSlider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { SliderValueChangeDetails } from \"@ark-ui/react/slider\";\nimport {\n  SliderControl,\n  SliderRoot,\n  SliderLabel,\n  SliderTrack,\n  SliderRange,\n  SliderHiddenInput,\n  SliderThumb,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { t } from \"i18next\";\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\ninterface Props {\n  value: number;\n  onValueChange: (value: SliderValueChangeDetails) => void;\n}\n\nexport const VolumeSlider = ({ value, onValueChange }: Props) => {\n  return (\n    <SliderRoot\n      orientation=\"vertical\"\n      value={[value]}\n      min={0}\n      max={100}\n      defaultValue={[100]}\n      step={1}\n      onValueChange={onValueChange}\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  );\n};\n"],"mappings":";;;;;;AAqBA,MAAM,uBAAA,GAAA,wBAAA,QAA6BA,iBAAAA,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;AACZ,EACF,CAAC;AAOD,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;CAC/D,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,KAAK;EACb,KAAK;EACL,KAAK;EACL,cAAc,CAAC,GAAG;EAClB,MAAM;EACS;YAPjB,CASE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;4BAAU,6BAA6B;EAAe,CAAA,GACnE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,CAAc,CAAA,EACH,CAAA,GACb,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,OAAO;aAClB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,CAAoB,CAAA;EACT,CAAA,CACM,EAAA,CAAA,CACX;;AAEhB"}

package/lib/AudioPlayer/audioUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"audioUtils.js","names":[],"sources":["../../src/AudioPlayer/audioUtils.ts"],"sourcesContent":["/**\n * Copyright (c) 2026-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 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"],"mappings":";;;;;;;;AAQA,MAAa,cAAc,YAAoB;CAC7C,MAAM,UAAU,KAAK,MAAM,UAAU,GAAG;CACxC,MAAM,iBAAiB,UAAU;AAGjC,QAAO,GAAG,QAAQ,GADO,iBAAiB,KAAK,IAAI,mBAAmB"}
+{"version":3,"file":"audioUtils.js","names":[],"sources":["../../src/AudioPlayer/audioUtils.ts"],"sourcesContent":["/**\n * Copyright (c) 2026-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 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"],"mappings":";;;;;;;;AAQA,MAAa,cAAc,YAAoB;CAC7C,MAAM,UAAU,KAAK,MAAM,UAAU,EAAE;CACvC,MAAM,iBAAiB,UAAU;CAGjC,OAAO,GAAG,QAAQ,GADO,iBAAiB,KAAK,IAAI,mBAAmB;AAExE"}

package/lib/AudioPlayer/useAudioControls.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import type { SliderValueChangeDetails } from "@ark-ui/react/slider";
 import { type ReactEventHandler } from "react";
 export declare const useAudioControls: () => {
     togglePlay: () => void;

package/lib/AudioPlayer/useAudioControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioControls.js","names":[],"sources":["../../src/AudioPlayer/useAudioControls.ts"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport { useCallback, useRef, useState, type ReactEventHandler } from \"react\";\n\nexport const useAudioControls = () => {\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  const togglePlay = useCallback(() => {\n    if (!audioRef.current) return;\n    if (audioRef.current.paused) {\n      audioRef.current.play();\n    } else {\n      audioRef.current.pause();\n    }\n    setPlaying((p) => !p);\n  }, []);\n\n  const onPlaybackRateChange = useCallback((rate: number) => {\n    setSpeedValue(rate);\n    if (audioRef.current) {\n      audioRef.current.playbackRate = rate;\n    }\n  }, []);\n\n  const onSeekSeconds = useCallback((seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  }, []);\n\n  const handleSliderChange = useCallback((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 = useCallback((details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  }, []);\n\n  const onEnded = useCallback(() => setPlaying(false), []);\n\n  const onHandleTime: ReactEventHandler<HTMLAudioElement> = useCallback((meta) => {\n    const target = meta.currentTarget;\n    setCurrentTime(Math.round(target.currentTime));\n    setDuration(Math.round(target.duration));\n  }, []);\n\n  return {\n    togglePlay,\n    onPlaybackRateChange,\n    onSeekSeconds,\n    handleVolumeSliderChange,\n    handleSliderChange,\n    onEnded,\n    onHandleTime,\n    speedValue,\n    volumeValue,\n    currentTime,\n    duration,\n    playing,\n    audioRef,\n  };\n};\n"],"mappings":";;;AAWA,MAAa,yBAAyB;CACpC,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,UAA0B,EAAE;CAC/C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,IAAI;CACnD,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,EAAE;CACjD,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,EAAE;CAC3C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,YAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,cAAA,GAAA,MAAA,mBAA+B;AACnC,MAAI,CAAC,SAAS,QAAS;AACvB,MAAI,SAAS,QAAQ,OACnB,UAAS,QAAQ,MAAM;MAEvB,UAAS,QAAQ,OAAO;AAE1B,cAAY,MAAM,CAAC,EAAE;IACpB,EAAE,CAAC;CAEN,MAAM,wBAAA,GAAA,MAAA,cAAoC,SAAiB;AACzD,gBAAc,KAAK;AACnB,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,EAAE,CAAC;CAEN,MAAM,iBAAA,GAAA,MAAA,cAA6B,YAAoB;AACrD,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,EAAE,CAAC;CAEN,MAAM,sBAAA,GAAA,MAAA,cAAkC,YAAsC;EAC5E,MAAM,WAAW,QAAQ,MAAM;AAC/B,MAAI,SAAS,WAAW,YAAY,QAAQ,CAAC,MAAM,SAAS,CAC1D,UAAS,QAAQ,cAAc,QAAQ,MAAM;IAE9C,EAAE,CAAC;AAiBN,QAAO;EACL;EACA;EACA;EACA,2BAAA,GAAA,MAAA,cAnB4C,YAAsC;AAClF,OAAI,SAAS,SAAS;AACpB,aAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;AAC7C,mBAAe,QAAQ,MAAM,GAAG;;KAEjC,EAAE,CAcqB;EACxB;EACA,UAAA,GAAA,MAAA,mBAdgC,WAAW,MAAM,EAAE,EAAE,CAc9C;EACP,eAAA,GAAA,MAAA,cAbqE,SAAS;GAC9E,MAAM,SAAS,KAAK;AACpB,kBAAe,KAAK,MAAM,OAAO,YAAY,CAAC;AAC9C,eAAY,KAAK,MAAM,OAAO,SAAS,CAAC;KACvC,EAAE,CASS;EACZ;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"useAudioControls.js","names":[],"sources":["../../src/AudioPlayer/useAudioControls.ts"],"sourcesContent":["/**\n * Copyright (c) 2026-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 { SliderValueChangeDetails } from \"@ark-ui/react/slider\";\nimport { useCallback, useRef, useState, type ReactEventHandler } from \"react\";\n\nexport const useAudioControls = () => {\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  const togglePlay = useCallback(() => {\n    if (!audioRef.current) return;\n    if (audioRef.current.paused) {\n      audioRef.current.play();\n    } else {\n      audioRef.current.pause();\n    }\n    setPlaying((p) => !p);\n  }, []);\n\n  const onPlaybackRateChange = useCallback((rate: number) => {\n    setSpeedValue(rate);\n    if (audioRef.current) {\n      audioRef.current.playbackRate = rate;\n    }\n  }, []);\n\n  const onSeekSeconds = useCallback((seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  }, []);\n\n  const handleSliderChange = useCallback((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 = useCallback((details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  }, []);\n\n  const onEnded = useCallback(() => setPlaying(false), []);\n\n  const onHandleTime: ReactEventHandler<HTMLAudioElement> = useCallback((meta) => {\n    const target = meta.currentTarget;\n    setCurrentTime(Math.round(target.currentTime));\n    setDuration(Math.round(target.duration));\n  }, []);\n\n  return {\n    togglePlay,\n    onPlaybackRateChange,\n    onSeekSeconds,\n    handleVolumeSliderChange,\n    handleSliderChange,\n    onEnded,\n    onHandleTime,\n    speedValue,\n    volumeValue,\n    currentTime,\n    duration,\n    playing,\n    audioRef,\n  };\n};\n"],"mappings":";;;AAWA,MAAa,yBAAyB;CACpC,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,UAA0B,CAAC;CAC9C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,GAAG;CAClD,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,CAAC;CAChD,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,CAAC;CAC1C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAC5C,MAAM,YAAA,GAAA,MAAA,QAAoC,IAAI;CAE9C,MAAM,cAAA,GAAA,MAAA,mBAA+B;EACnC,IAAI,CAAC,SAAS,SAAS;EACvB,IAAI,SAAS,QAAQ,QACnB,SAAS,QAAQ,KAAK;OAEtB,SAAS,QAAQ,MAAM;EAEzB,YAAY,MAAM,CAAC,CAAC;CACtB,GAAG,CAAC,CAAC;CAEL,MAAM,wBAAA,GAAA,MAAA,cAAoC,SAAiB;EACzD,cAAc,IAAI;EAClB,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAA,GAAA,MAAA,cAA6B,YAAoB;EACrD,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAA,GAAA,MAAA,cAAkC,YAAsC;EAC5E,MAAM,WAAW,QAAQ,MAAM;EAC/B,IAAI,SAAS,WAAW,YAAY,QAAQ,CAAC,MAAM,QAAQ,GACzD,SAAS,QAAQ,cAAc,QAAQ,MAAM;CAEjD,GAAG,CAAC,CAAC;CAiBL,OAAO;EACL;EACA;EACA;EACA,2BAAA,GAAA,MAAA,cAnB4C,YAAsC;GAClF,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;IAC7C,eAAe,QAAQ,MAAM,EAAE;GACjC;EACF,GAAG,CAAC,CAcqB;EACvB;EACA,UAAA,GAAA,MAAA,mBAdgC,WAAW,KAAK,GAAG,CAAC,CAc9C;EACN,eAAA,GAAA,MAAA,cAbqE,SAAS;GAC9E,MAAM,SAAS,KAAK;GACpB,eAAe,KAAK,MAAM,OAAO,WAAW,CAAC;GAC7C,YAAY,KAAK,MAAM,OAAO,QAAQ,CAAC;EACzC,GAAG,CAAC,CASS;EACX;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

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 { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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,cAAA,GAAA,wBAAA,QAAoB,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,OAAA,GAAA,cAAA,iBAAsB;AAE9B,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,cAAY,EAAE,wBAAwB;YACzC,iBAAA,GAAA,kBAAA,KAAC,YAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,gBAAD;GACc;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;IAAO;GACxB,EAHK,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,EACS,CAAA;EACT,CAAA"}
+{"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 { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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,cAAA,GAAA,wBAAA,QAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,UAAU;CACV,YAAY;CACZ,WAAW;CACX,KAAK;CACL,YAAY;EACV,YAAY;EACZ,gBAAgB;EAChB,eAAe;CACjB;AACF,EACF,CAAC;AAED,MAAa,cAAc,EAAE,OAAO,YAAY,sBAA6B;CAC3E,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAE7B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,cAAY,EAAE,uBAAuB;YACxC,iBAAA,GAAA,kBAAA,KAAC,YAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,gBAAD;GACc;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;GAAM;EACxB,GAHM,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,QAGtD,CACF,EACS,CAAA;CACT,CAAA;AAET"}

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 { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\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,kBAAA,GAAA,wBAAA,QAAwB,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;AAE1F,QACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EAAgB,gBAFH,KAAK,UAAU,aAAa,IAEF,SAAS,KAAA;YAAhD,CACG,WAAW,MAAM,WAAW,EAC5B,gBAAgB,MAAM,WAAW,CACnB"}
+{"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 { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\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,kBAAA,GAAA,wBAAA,QAAwB,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,KAAK;CACL,YAAY;CACZ,YAAY,EACV,SAAS,QACX;CACA,OAAO,EACL,UAAU,EACR,OAAO,UACT,EACF;AACF,EACF,CAAC;AAUD,MAAa,kBAAkB,EAAE,YAAY,iBAAiB,MAAM,iBAAwB;CAE1F,OACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EAAgB,gBAFH,KAAK,UAAU,aAAa,IAEF,SAAS,KAAA;YAAhD,CACG,WAAW,MAAM,UAAU,GAC3B,gBAAgB,MAAM,UAAU,CACnB;;AAEpB"}

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,kBAAA,GAAA,wBAAA,QAAwBA,eAAAA,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACD,eAAe,EACb,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,YAAAA,qBAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,QACV,EACF,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,eAAAA,UAAU,EACpC,MAAM,EACJ,OAAO,WACR,EACF,CAAC;AAMF,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;AACtE,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;AAEjC,MAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,SAC3C,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;GAAc,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,iBAAA,GAAA,kBAAA,KAACE,YAAAA,UAAD,EAAU,OAAO,KAAK,MAAQ,CAAA;GACjB,CAAA;AAGnB,SAAO,iBAAA,GAAA,kBAAA,KAAC,gBAAD;GAAgB,IAAI,KAAK;aAAK,KAAK;GAAsB,CAAA;;CAGlE,MAAM,mBAAmB,MAA6B,eAAuB;AAC3E,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO;AAET,MAAI,KAAK,UAAU,EACjB,QAAO,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAkB,eAAA,MAAc,CAAA;AAEzC,SAAO,iBAAA,GAAA,kBAAA,KAACD,YAAAA,qBAAD,EAAqB,eAAA,MAAc,CAAA;;AAG5C,QAAO,iBAAA,GAAA,kBAAA,KAACE,mBAAAA,YAAD;EAAmB;EAAmB;EAA6B;EAAmB,CAAA"}
+{"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,kBAAA,GAAA,wBAAA,QAAwBA,eAAAA,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OAClB;CACA,eAAe,EACb,gBAAgB,OAClB;AACF,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,YAAAA,qBAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,OACX,EACF,EACF,CAAC;AAED,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,eAAAA,UAAU,EACpC,MAAM,EACJ,OAAO,UACT,EACF,CAAC;AAMD,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;EACtE,IAAI,KAAK,UAAU,aAAa,GAC9B,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,KAAW,CAAA;EAEhC,IAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,UAC3C,OACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;GAAc,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,iBAAA,GAAA,kBAAA,KAACE,YAAAA,UAAD,EAAU,OAAO,KAAK,KAAO,CAAA;EACjB,CAAA;EAGlB,OAAO,iBAAA,GAAA,kBAAA,KAAC,gBAAD;GAAgB,IAAI,KAAK;aAAK,KAAK;EAAqB,CAAA;CACjE;CAEA,MAAM,mBAAmB,MAA6B,eAAuB;EAC3E,IAAI,KAAK,UAAU,aAAa,GAC9B,OAAO;EAET,IAAI,KAAK,UAAU,GACjB,OAAO,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAkB,eAAA,KAAa,CAAA;EAExC,OAAO,iBAAA,GAAA,kBAAA,KAACD,YAAAA,qBAAD,EAAqB,eAAA,KAAa,CAAA;CAC3C;CAEA,OAAO,iBAAA,GAAA,kBAAA,KAACE,mBAAAA,YAAD;EAAmB;EAAmB;EAA6B;CAAkB,CAAA;AAC9F"}

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 { 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 parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\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":"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"}
+{"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 { 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 parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\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":"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"}

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 { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\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,OAAA,GAAA,wBAAA,QAAa,OAAO,EAAE,CAAC;AAE7B,MAAa,aAAA,GAAA,MAAA,aAA+C,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,uBAAA,GAAA,MAAA,eAAoC;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,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,YAAA,GAAA,wBAAA,IAAc,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;EACL,CAAA;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 { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\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,OAAA,GAAA,wBAAA,QAAa,OAAO,CAAC,CAAC;AAE5B,MAAa,aAAA,GAAA,MAAA,aAA+C,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,uBAAA,GAAA,MAAA,eAAoC;EACxC,OAAO,gBACJ,MAAM,IAAI,EACV,KAAK,MAAM,MAAM;GAChB,OAAO,4BAA4B,IAAI,EAAE,SAAS;EACpD,CAAC,EACA,KAAK,IAAI;CACd,GAAG,CAAC,eAAe,CAAC;CAEpB,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,YAAA,GAAA,wBAAA,IAAc,aAAa,YAAY,UAAU,SAAS;EAC1D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,oBAAoB;EAClD;CACN,CAAA;AAEL,CAAC"}

package/lib/CodeBlock/codeLanguageOptions.js.map

@@ -1 +1 @@
-{"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"}
+{"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;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;AACF"}

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 { 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 { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\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,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAa,WAAA,GAAA,MAAA,aACV,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAeC,0BAAAA,kBAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAmB;EAAK,GAAI;EAAM,GAAI;YAAtC;GACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;IAAsB;cAAtB,CACG,CAAC,CAAC,SACD,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD,EAAA,UAAI,OAAU,CAAA,EACb,MACA,EAAA,CAAA,EAEJ,SACc;;GAChB,eAAe,aAAa,UAC3B,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAY,OAAO;IAAqB;IAAkB;IAAc,CAAA,GACtE,eAAe,aAAa,eAC9B,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD,EAAiB,OAAO,eAAiB,CAAA,GACvC,eAAe,aAAa,QAC9B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD,EAAU,OAAO,eAAiB,CAAA,GAChC,eAAe,aAAa,WAC9B,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,EAAa,OAAO,eAAiB,CAAA,GACnC,eAAe,aAAa,aAC9B,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD,EAAe,OAAO,eAAiB,CAAA,GACrC;GACH,CAAC,CAAC,aAAa,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;IAAwB;IAAW,MAAK;IAAY,CAAA;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 { 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 { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\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,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACP,EACF,CAAC;AAED,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,SACX;AACF,EACF,CAAC;AAED,MAAa,WAAA,GAAA,MAAA,aACV,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAeC,0BAAAA,kBAAkB,WAAW,SAAS,SAAS,MAAM,MAAM;CAEhF,OACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAmB;EAAK,GAAI;EAAM,GAAI;YAAtC;GACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;IAAsB;cAAtB,CACG,CAAC,CAAC,SACD,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD,EAAA,UAAI,MAAS,CAAA,GACZ,KACD,EAAA,CAAA,GAEH,QACa;;GACf,eAAe,aAAa,UAC3B,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAY,OAAO;IAAqB;IAAkB;GAAa,CAAA,IACrE,eAAe,aAAa,eAC9B,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD,EAAiB,OAAO,cAAgB,CAAA,IACtC,eAAe,aAAa,QAC9B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD,EAAU,OAAO,cAAgB,CAAA,IAC/B,eAAe,aAAa,WAC9B,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,EAAa,OAAO,cAAgB,CAAA,IAClC,eAAe,aAAa,aAC9B,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD,EAAe,OAAO,cAAgB,CAAA,IACpC;GACH,CAAC,CAAC,aAAa,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;IAAwB;IAAW,MAAK;GAAW,CAAA;EACvD;;AAElB,CACF"}

package/lib/ContactBlock/ContactBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactBlock.js","names":["Text","LicenseContainerContent"],"sources":["../../src/ContactBlock/ContactBlock.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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useTranslation } from \"react-i18next\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n  strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n  moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n  subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    minWidth: \"surface.xxsmall\",\n    padding: \"medium\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    gap: \"medium\",\n    position: \"relative\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    overflow: \"hidden\",\n    background: \"surface.default\",\n    flexDirection: \"column-reverse\",\n    tablet: {\n      alignItems: \"unset\",\n      flexDirection: \"row\",\n    },\n  },\n});\n\nconst EmailLink = styled(\"a\", {\n  base: {\n    color: \"text.default\",\n    textDecoration: \"underline\",\n    _hover: { textDecoration: \"none\" },\n    _focusVisible: { textDecoration: \"none\" },\n  },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    zIndex: \"base\",\n    _before: {\n      content: '\"\"',\n      position: \"absolute\",\n      top: \"-60px\",\n      left: \"-50px\",\n      right: \"0\",\n      bottom: \"0\",\n      height: \"calc(100% + 50px)\",\n      width: \"surface.3xlarge\",\n      transform: \"rotate(-4deg)\",\n      zIndex: \"hide\",\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n    imageExists: {\n      true: {\n        tabletDown: {\n          _before: {\n            display: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    alignItems: \"flex-start\",\n    justifyContent: \"flex-start\",\n    flexDirection: \"column\",\n    zIndex: \"base\",\n    tabletDown: {\n      _before: {\n        content: '\"\"',\n        position: \"absolute\",\n        top: \"-50px\",\n        left: \"-50px\",\n        right: \"0\",\n        bottom: \"0\",\n        height: \"surface.xxsmall\",\n        width: \"surface.3xlarge\",\n        transform: \"rotate(-4deg)\",\n        zIndex: \"hide\",\n      },\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    borderRadius: \"xsmall\",\n    width: \"surface.xsmall\",\n    height: \"surface.xsmall\",\n    objectFit: \"cover\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"1\",\n    width: \"100%\",\n  },\n});\n\nconst StyledDescription = styled(Text, {\n  base: {\n    fontFamily: \"serif\",\n  },\n});\n\ninterface Props {\n  image?: ImageMetaInformationV3DTO;\n  jobTitle: string;\n  description: string;\n  backgroundColor?: ContactBlockBackground;\n  imageWidth?: number;\n  name: string;\n  email: string;\n  embedAlt?: string;\n  lang?: string;\n}\n\nexport const ContactBlock = ({\n  image,\n  jobTitle,\n  description,\n  name,\n  email,\n  embedAlt,\n  lang,\n  backgroundColor = \"strong\",\n}: Props) => {\n  const { t } = useTranslation();\n  return (\n    <StyledWrapper data-embed-type=\"contact-block\">\n      <ContentWrapper>\n        <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n          <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n            {name}\n          </Text>\n          <Text lang={lang}>{jobTitle}</Text>\n          <Text>\n            {`${t(\"email\")}: `}\n            <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n          </Text>\n        </HeaderWrapper>\n        <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n      </ContentWrapper>\n      {!!image && (\n        <ImageWrapper variant={backgroundColor}>\n          <StyledImage\n            alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n            src={image.image.imageUrl}\n            width={300}\n            height={300}\n          />\n          <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n        </ImageWrapper>\n      )}\n    </StyledWrapper>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ContactBlock.js","names":["Text","LicenseContainerContent"],"sources":["../../src/ContactBlock/ContactBlock.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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useTranslation } from \"react-i18next\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n  strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n  moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n  subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    minWidth: \"surface.xxsmall\",\n    padding: \"medium\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    gap: \"medium\",\n    position: \"relative\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    overflow: \"hidden\",\n    background: \"surface.default\",\n    flexDirection: \"column-reverse\",\n    tablet: {\n      alignItems: \"unset\",\n      flexDirection: \"row\",\n    },\n  },\n});\n\nconst EmailLink = styled(\"a\", {\n  base: {\n    color: \"text.default\",\n    textDecoration: \"underline\",\n    _hover: { textDecoration: \"none\" },\n    _focusVisible: { textDecoration: \"none\" },\n  },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    zIndex: \"base\",\n    _before: {\n      content: '\"\"',\n      position: \"absolute\",\n      top: \"-60px\",\n      left: \"-50px\",\n      right: \"0\",\n      bottom: \"0\",\n      height: \"calc(100% + 50px)\",\n      width: \"surface.3xlarge\",\n      transform: \"rotate(-4deg)\",\n      zIndex: \"hide\",\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n    imageExists: {\n      true: {\n        tabletDown: {\n          _before: {\n            display: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    alignItems: \"flex-start\",\n    justifyContent: \"flex-start\",\n    flexDirection: \"column\",\n    zIndex: \"base\",\n    tabletDown: {\n      _before: {\n        content: '\"\"',\n        position: \"absolute\",\n        top: \"-50px\",\n        left: \"-50px\",\n        right: \"0\",\n        bottom: \"0\",\n        height: \"surface.xxsmall\",\n        width: \"surface.3xlarge\",\n        transform: \"rotate(-4deg)\",\n        zIndex: \"hide\",\n      },\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    borderRadius: \"xsmall\",\n    width: \"surface.xsmall\",\n    height: \"surface.xsmall\",\n    objectFit: \"cover\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"1\",\n    width: \"100%\",\n  },\n});\n\nconst StyledDescription = styled(Text, {\n  base: {\n    fontFamily: \"serif\",\n  },\n});\n\ninterface Props {\n  image?: ImageMetaInformationV3DTO;\n  jobTitle: string;\n  description: string;\n  backgroundColor?: ContactBlockBackground;\n  imageWidth?: number;\n  name: string;\n  email: string;\n  embedAlt?: string;\n  lang?: string;\n}\n\nexport const ContactBlock = ({\n  image,\n  jobTitle,\n  description,\n  name,\n  email,\n  embedAlt,\n  lang,\n  backgroundColor = \"strong\",\n}: Props) => {\n  const { t } = useTranslation();\n  return (\n    <StyledWrapper data-embed-type=\"contact-block\">\n      <ContentWrapper>\n        <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n          <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n            {name}\n          </Text>\n          <Text lang={lang}>{jobTitle}</Text>\n          <Text>\n            {`${t(\"email\")}: `}\n            <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n          </Text>\n        </HeaderWrapper>\n        <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n      </ContentWrapper>\n      {!!image && (\n        <ImageWrapper variant={backgroundColor}>\n          <StyledImage\n            alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n            src={image.image.imageUrl}\n            width={300}\n            height={300}\n          />\n          <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n        </ImageWrapper>\n      )}\n    </StyledWrapper>\n  );\n};\n"],"mappings":"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"}

package/lib/Embed/AudioEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","licenseAttributes","AudioPlayer","EmbedByline"],"sources":["../../src/Embed/AudioEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport { AudioPlayer, type AudioPlayerVariant } from \"../AudioPlayer/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\ninterface Props {\n  embed: AudioMetaData;\n  lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n  creators: Author[];\n  rightsholders: Author[];\n  processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nexport const AudioEmbed = ({ embed, lang }: Props) => {\n  const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type={type} />;\n  }\n\n  const { data, embedData } = embed;\n\n  const variant = embedData.type === \"podcast\" ? \"standard\" : (embedData.type as AudioPlayerVariant);\n\n  const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n  const coverPhoto = data.podcastMeta?.coverPhoto;\n\n  const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n  return (\n    <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n      <AudioPlayer\n        variant={variant}\n        description={data.podcastMeta?.introduction ?? \"\"}\n        img={img}\n        src={data.audioFile.url}\n        textVersion={\n          data.manuscript?.manuscript.length ? (\n            <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n          ) : undefined\n        }\n        title={data.title.title}\n        subtitle={subtitle}\n      />\n      {variant === \"standard\" && (\n        <EmbedByline\n          error={false}\n          type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n          copyright={embed.data.copyright}\n        />\n      )}\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAaF,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAA6B,MAAQ,CAAA;CAG9C,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,UAAU,UAAU,SAAS,YAAY,aAAc,UAAU;CAEvE,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;EAAM,GAAG,KAAA;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;EAAS;AAI1E,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAoB;EAAM,mBAAiB;EAAM,GAH9BC,0BAAAA,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAGpB;YAAjE,CACE,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GACW;GACT,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,EAAI,CAAA,GACtE,KAAA;GAEN,OAAO,KAAK,MAAM;GACR;GACV,CAAA,EACD,YAAY,cACX,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;GACtB,CAAA,CAES"}
+{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","licenseAttributes","AudioPlayer","EmbedByline"],"sources":["../../src/Embed/AudioEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport { AudioPlayer, type AudioPlayerVariant } from \"../AudioPlayer/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\ninterface Props {\n  embed: AudioMetaData;\n  lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n  creators: Author[];\n  rightsholders: Author[];\n  processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nexport const AudioEmbed = ({ embed, lang }: Props) => {\n  const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type={type} />;\n  }\n\n  const { data, embedData } = embed;\n\n  const variant = embedData.type === \"podcast\" ? \"standard\" : (embedData.type as AudioPlayerVariant);\n\n  const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n  const coverPhoto = data.podcastMeta?.coverPhoto;\n\n  const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n  return (\n    <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n      <AudioPlayer\n        variant={variant}\n        description={data.podcastMeta?.introduction ?? \"\"}\n        img={img}\n        src={data.audioFile.url}\n        textVersion={\n          data.manuscript?.manuscript.length ? (\n            <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n          ) : undefined\n        }\n        title={data.title.title}\n        subtitle={subtitle}\n      />\n      {variant === \"standard\" && (\n        <EmbedByline\n          error={false}\n          type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n          copyright={embed.data.copyright}\n        />\n      )}\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM,EACJ,OAAO,OACT,EACF,CAAC;AAaD,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;CAC7D,IAAI,MAAM,WAAW,SACnB,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAA6B,KAAO,CAAA;CAG7C,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,UAAU,UAAU,SAAS,YAAY,aAAc,UAAU;CAEvE,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;CAAK,IAAI,KAAA;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;CAAQ;CAIzE,OACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAoB;EAAM,mBAAiB;EAAM,GAH9BC,0BAAAA,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,GAGrB;YAAhE,CACE,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GACW;GACT,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,WAAW,WAAW,EAAI,CAAA,IACrE,KAAA;GAEN,OAAO,KAAK,MAAM;GACR;EACX,CAAA,GACA,YAAY,cACX,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;EACvB,CAAA,CAES;;AAElB"}

package/lib/Embed/BrightcoveEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrightcoveEmbed.js","names":["Button","EmbedErrorPlaceholder","licenseAttributes","Figure","EmbedByline"],"sources":["../../src/Embed/BrightcoveEmbed.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 { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\n\ninterface Props {\n  embed: BrightcoveMetaData;\n  renderContext?: RenderContext;\n  lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n  base: {\n    border: 0,\n    height: \"auto\",\n    width: \"100%\",\n  },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n  const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n  const urlOrTitle = title || url;\n  return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" style=\"border: none;\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n  // oxlint-disable-next-line typescript/no-useless-default-assignment\n  const { account, videoid, player = \"default\" } = data;\n\n  const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n  return {\n    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n    height: source?.height ?? \"480\",\n    width: source?.width ?? \"640\",\n  };\n};\nexport const BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n  const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const { embedData } = embed;\n  const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n  const parsedDescription = useMemo(() => {\n    if (embed.embedData.caption || renderContext === \"article\") {\n      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n    } else if (embed.status === \"success\" && embed.data.description) {\n      return parse(embed.data.description);\n    }\n  }, [embed, renderContext]);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width}/${height}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n  if (embed.status === \"error\") {\n    return (\n      <EmbedErrorPlaceholder type=\"video\">\n        <BrightcoveIframe\n          ref={iframeRef}\n          title={embedData.alt || fallbackTitle}\n          aria-label={embedData.alt || fallbackTitle}\n          {...getIframeProps(embedData, [])}\n          allow=\"fullscreen; encrypted-media\"\n        />\n      </EmbedErrorPlaceholder>\n    );\n  }\n  const { data } = embed;\n\n  const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n  const originalVideoProps = getIframeProps(embedData, data.sources);\n  const alternativeVideoProps = linkedVideoId\n    ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n    : undefined;\n\n  const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n  const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n  return (\n    <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n      <div className=\"brightcove-video\">\n        <BrightcoveIframe\n          ref={iframeRef}\n          className=\"original\"\n          title={title}\n          aria-label={title}\n          {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n          allow=\"fullscreen; encrypted-media\"\n        />\n      </div>\n      <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n        <div>\n          {!!linkedVideoId && (\n            <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n              {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n            </LinkedVideoButton>\n          )}\n        </div>\n      </EmbedByline>\n    </Figure>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"BrightcoveEmbed.js","names":["Button","EmbedErrorPlaceholder","licenseAttributes","Figure","EmbedByline"],"sources":["../../src/Embed/BrightcoveEmbed.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 { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\n\ninterface Props {\n  embed: BrightcoveMetaData;\n  renderContext?: RenderContext;\n  lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n  base: {\n    border: 0,\n    height: \"auto\",\n    width: \"100%\",\n  },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n  const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n  const urlOrTitle = title || url;\n  return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" style=\"border: none;\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n  // oxlint-disable-next-line typescript/no-useless-default-assignment\n  const { account, videoid, player = \"default\" } = data;\n\n  const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n  return {\n    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n    height: source?.height ?? \"480\",\n    width: source?.width ?? \"640\",\n  };\n};\nexport const BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n  const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const { embedData } = embed;\n  const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n  const parsedDescription = useMemo(() => {\n    if (embed.embedData.caption || renderContext === \"article\") {\n      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n    } else if (embed.status === \"success\" && embed.data.description) {\n      return parse(embed.data.description);\n    }\n  }, [embed, renderContext]);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width}/${height}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n  if (embed.status === \"error\") {\n    return (\n      <EmbedErrorPlaceholder type=\"video\">\n        <BrightcoveIframe\n          ref={iframeRef}\n          title={embedData.alt || fallbackTitle}\n          aria-label={embedData.alt || fallbackTitle}\n          {...getIframeProps(embedData, [])}\n          allow=\"fullscreen; encrypted-media\"\n        />\n      </EmbedErrorPlaceholder>\n    );\n  }\n  const { data } = embed;\n\n  const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n  const originalVideoProps = getIframeProps(embedData, data.sources);\n  const alternativeVideoProps = linkedVideoId\n    ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n    : undefined;\n\n  const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n  const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n  return (\n    <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n      <div className=\"brightcove-video\">\n        <BrightcoveIframe\n          ref={iframeRef}\n          className=\"original\"\n          title={title}\n          aria-label={title}\n          {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n          allow=\"fullscreen; encrypted-media\"\n        />\n      </div>\n      <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n        <div>\n          {!!linkedVideoId && (\n            <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n              {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n            </LinkedVideoButton>\n          )}\n        </div>\n      </EmbedByline>\n    </Figure>\n  );\n};\n"],"mappings":"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"}

package/lib/Embed/CodeEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEmbed.js","names":["Figure","codeLanguageOptions","EmbedErrorPlaceholder","CodeBlock","Button","CheckLine","FileCopyLine"],"sources":["../../src/Embed/CodeEmbed.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 { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, type ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n  base: {\n    textStyle: \"label.large\",\n    fontWeight: \"bold\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n    // We apply margin here to allow for the float and size props on figure to work as intended.\n    \"& > *:not(:where(:first-child))\": {\n      marginBlockStart: \"xsmall\",\n    },\n  },\n});\n\nconst getTitleFromFormat = (format: string) => {\n  const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n  if (selectedLanguage) {\n    return selectedLanguage.title;\n  }\n  return;\n};\n\nexport const CodeEmbed = ({ embed }: Props) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (isCopied) {\n      const timer = setInterval(() => setIsCopied(false), 3000);\n      // ensure interval is cleared - also if unmounted\n      return () => {\n        clearTimeout(timer);\n      };\n    }\n  }, [isCopied]);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"code\" />;\n  }\n\n  return (\n    <StyledFigure data-embed-type=\"code-block\">\n      <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n      <CodeBlock\n        highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n        format={embed.embedData.codeFormat}\n      />\n      <Button\n        variant=\"secondary\"\n        onClick={async () => {\n          if (embed.status === \"success\") {\n            try {\n              await navigator.clipboard.writeText(embed.data.decodedContent);\n              setIsCopied(true);\n            } catch {\n              // do nothing\n            }\n          }\n        }}\n      >\n        {isCopied ? <CheckLine /> : <FileCopyLine />}\n        {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n      </Button>\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,MAAM,oBAAA,GAAA,wBAAA,QAA0B,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,UACnB;CACF,EACF,CAAC;AAEF,MAAM,sBAAsB,WAAmB;CAC7C,MAAM,mBAAmBC,4BAAAA,oBAAoB,MAAM,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;;AAK5B,MAAa,aAAa,EAAE,YAAmB;CAC7C,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,MAAM;CAC/C,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAE9B,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,kBAAkB,YAAY,MAAM,EAAE,IAAK;AAEzD,gBAAa;AACX,iBAAa,MAAM;;;IAGtB,CAAC,SAAS,CAAC;AAEd,KAAI,MAAM,WAAW,QACnB,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,QAAS,CAAA;AAG9C,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAc,mBAAgB;YAA9B;GACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UAAmB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,EAAoB,CAAA;GAC9G,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IACE,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;IACxB,CAAA;GACF,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,QAAD;IACE,SAAQ;IACR,SAAS,YAAY;AACnB,SAAI,MAAM,WAAW,UACnB,KAAI;AACF,YAAM,UAAU,UAAU,UAAU,MAAM,KAAK,eAAe;AAC9D,kBAAY,KAAK;aACX;;cAPd,CAaG,WAAW,iBAAA,GAAA,kBAAA,KAACC,YAAAA,WAAD,EAAa,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,EAAgB,CAAA,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB,CACxD;;GACI"}
+{"version":3,"file":"CodeEmbed.js","names":["Figure","codeLanguageOptions","EmbedErrorPlaceholder","CodeBlock","Button","CheckLine","FileCopyLine"],"sources":["../../src/Embed/CodeEmbed.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 { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, type ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n  base: {\n    textStyle: \"label.large\",\n    fontWeight: \"bold\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n    // We apply margin here to allow for the float and size props on figure to work as intended.\n    \"& > *:not(:where(:first-child))\": {\n      marginBlockStart: \"xsmall\",\n    },\n  },\n});\n\nconst getTitleFromFormat = (format: string) => {\n  const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n  if (selectedLanguage) {\n    return selectedLanguage.title;\n  }\n  return;\n};\n\nexport const CodeEmbed = ({ embed }: Props) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (isCopied) {\n      const timer = setInterval(() => setIsCopied(false), 3000);\n      // ensure interval is cleared - also if unmounted\n      return () => {\n        clearTimeout(timer);\n      };\n    }\n  }, [isCopied]);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"code\" />;\n  }\n\n  return (\n    <StyledFigure data-embed-type=\"code-block\">\n      <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n      <CodeBlock\n        highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n        format={embed.embedData.codeFormat}\n      />\n      <Button\n        variant=\"secondary\"\n        onClick={async () => {\n          if (embed.status === \"success\") {\n            try {\n              await navigator.clipboard.writeText(embed.data.decodedContent);\n              setIsCopied(true);\n            } catch {\n              // do nothing\n            }\n          }\n        }}\n      >\n        {isCopied ? <CheckLine /> : <FileCopyLine />}\n        {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n      </Button>\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,MAAM,oBAAA,GAAA,wBAAA,QAA0B,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;AACd,EACF,CAAC;AAED,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,SACpB;AACF,EACF,CAAC;AAED,MAAM,sBAAsB,WAAmB;CAC7C,MAAM,mBAAmBC,4BAAAA,oBAAoB,MAAM,SAA6B,KAAK,WAAW,MAAM;CACtG,IAAI,kBACF,OAAO,iBAAiB;AAG5B;AAEA,MAAa,aAAa,EAAE,YAAmB;CAC7C,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,KAAK;CAC9C,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAE7B,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,UAAU;GACZ,MAAM,QAAQ,kBAAkB,YAAY,KAAK,GAAG,GAAI;GAExD,aAAa;IACX,aAAa,KAAK;GACpB;EACF;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,IAAI,MAAM,WAAW,SACnB,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,OAAQ,CAAA;CAG7C,OACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAc,mBAAgB;YAA9B;GACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UAAmB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,UAAU,EAAoB,CAAA;GAC7G,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IACE,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;GACzB,CAAA;GACD,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,QAAD;IACE,SAAQ;IACR,SAAS,YAAY;KACnB,IAAI,MAAM,WAAW,WACnB,IAAI;MACF,MAAM,UAAU,UAAU,UAAU,MAAM,KAAK,cAAc;MAC7D,YAAY,IAAI;KAClB,QAAQ,CAER;IAEJ;cAXF,CAaG,WAAW,iBAAA,GAAA,kBAAA,KAACC,YAAAA,WAAD,CAAY,CAAA,IAAI,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,CAAe,CAAA,GAC1C,WAAW,EAAE,sBAAsB,IAAI,EAAE,oBAAoB,CACxD;;EACI;;AAElB"}

package/lib/Embed/ConceptEmbed.js

@@ -9,7 +9,7 @@ let react = require("react");
 let html_react_parser = require("html-react-parser");
 html_react_parser = require_runtime.__toESM(html_react_parser);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_portal = require("@ark-ui/react/portal");
 //#region src/Embed/ConceptEmbed.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -65,7 +65,7 @@ const InlineConcept = (0, react.forwardRef)(({ linkContent, copyright, visualEle
 			ref,
 			...rest,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children: linkContent })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
 			ref: contentRef,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Concept.Concept, {
 				copyright,

package/lib/Embed/ConceptEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\n\ninterface BaseProps {\n  renderContext?: RenderContext;\n  lang?: string;\n  previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n  const parsedContent = useMemo(() => {\n    if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n    return parse(embed.data.concept.content.htmlContent);\n  }, [embed]);\n\n  const parsedTitle = useMemo(\n    () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n    [embed],\n  );\n\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\") {\n    // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  // TODO: Consider whether we should do this in article-converter instead.\n  if (embed.data.concept.glossData) {\n    return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n  }\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <InlineConcept\n        previewAlt={previewAlt}\n        linkContent={children}\n        copyright={concept.copyright}\n        visualElement={visualElement}\n        lang={lang}\n        title={parsedTitle}\n        source={concept.source}\n      >\n        {parsedContent}\n      </InlineConcept>\n    );\n  }\n\n  return (\n    <BlockConcept\n      previewAlt={previewAlt}\n      copyright={concept.copyright}\n      visualElement={visualElement}\n      lang={lang}\n      title={renderContext === \"embed\" ? undefined : parsedTitle}\n      source={concept.source}\n    >\n      {parsedContent}\n    </BlockConcept>\n  );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n  linkContent?: ReactNode;\n  source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n  ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n        <PopoverTrigger asChild ref={ref} {...rest}>\n          <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Concept\n              copyright={copyright}\n              visualElement={visualElement}\n              title={title}\n              lang={lang}\n              source={source}\n              previewAlt={previewAlt}\n            >\n              {children}\n            </Concept>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n  <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,wBAAA,GAAA,wBAAA,QAA8BA,iBAAAA,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,iBAAA,GAAA,MAAA,eAA8B;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO,KAAA;AACpE,UAAA,GAAA,kBAAA,SAAa,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,eAAA,GAAA,MAAA,eACG,MAAM,WAAW,aAAA,GAAA,kBAAA,SAAkB,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,KAAA,GAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,UAAgB,CAAA;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,SAAU,CAAA;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EAAmB;EAAQ;EAAsB,CAAA;AAG1D,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EACc;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;EACa,CAAA;AAIpB,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;EACc;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,KAAA,IAAY;EAC/C,QAAQ,QAAQ;YAEf;EACY,CAAA;;AASnB,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,cAAA,GAAA,MAAA,QAAoC,KAAK;AAC/C,QACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CAEE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;GAAgB,SAAA;GAAa;GAAK,GAAI;aACpC,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,4BAAD,EAAA,UAA6B,aAAyC,CAAA;GACvD,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAACC,cAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAsB,KAAK;aACzB,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;IACa;IACI;IACR;IACD;IACE;IACI;IAEX;IACO,CAAA;GACW,CAAA,EAChB,CAAA,CACG;;EAGnB;AAID,MAAa,gBAAA,GAAA,MAAA,aAA2D,OAAO,QAC7E,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;CAAS,GAAI;CAAO,mBAAgB;CAAe;CAAO,CAAA,CAC1D"}
+{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.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 { Portal } from \"@ark-ui/react/portal\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\n\ninterface BaseProps {\n  renderContext?: RenderContext;\n  lang?: string;\n  previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n  const parsedContent = useMemo(() => {\n    if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n    return parse(embed.data.concept.content.htmlContent);\n  }, [embed]);\n\n  const parsedTitle = useMemo(\n    () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n    [embed],\n  );\n\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\") {\n    // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  // TODO: Consider whether we should do this in article-converter instead.\n  if (embed.data.concept.glossData) {\n    return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n  }\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <InlineConcept\n        previewAlt={previewAlt}\n        linkContent={children}\n        copyright={concept.copyright}\n        visualElement={visualElement}\n        lang={lang}\n        title={parsedTitle}\n        source={concept.source}\n      >\n        {parsedContent}\n      </InlineConcept>\n    );\n  }\n\n  return (\n    <BlockConcept\n      previewAlt={previewAlt}\n      copyright={concept.copyright}\n      visualElement={visualElement}\n      lang={lang}\n      title={renderContext === \"embed\" ? undefined : parsedTitle}\n      source={concept.source}\n    >\n      {parsedContent}\n    </BlockConcept>\n  );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n  linkContent?: ReactNode;\n  source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n  ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n        <PopoverTrigger asChild ref={ref} {...rest}>\n          <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Concept\n              copyright={copyright}\n              visualElement={visualElement}\n              title={title}\n              lang={lang}\n              source={source}\n              previewAlt={previewAlt}\n            >\n              {children}\n            </Concept>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n  <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,wBAAA,GAAA,wBAAA,QAA8BA,iBAAAA,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,iBAAA,GAAA,MAAA,eAA8B;EAClC,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,SAAS,OAAO,KAAA;EACpE,QAAA,GAAA,kBAAA,SAAa,MAAM,KAAK,QAAQ,QAAQ,WAAW;CACrD,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAA,GAAA,MAAA,eACG,MAAM,WAAW,aAAA,GAAA,kBAAA,SAAkB,MAAM,KAAK,QAAQ,MAAM,SAAS,IAAI,KAAA,GAChF,CAAC,KAAK,CACR;CAEA,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,SAEnB,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAGzC,IAAI,MAAM,KAAK,QAAQ,WACrB,OAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EAAmB;EAAQ;CAAqB,CAAA;CAGzD,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EACc;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;CACY,CAAA;CAInB,OACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;EACc;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,KAAA,IAAY;EAC/C,QAAQ,QAAQ;YAEf;CACW,CAAA;AAElB;AAOA,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,cAAA,GAAA,MAAA,QAAoC,IAAI;CAC9C,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CAEE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;GAAgB,SAAA;GAAa;GAAK,GAAI;aACpC,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,4BAAD,EAAA,UAA6B,YAAwC,CAAA;EACvD,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAsB,KAAK;aACzB,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;IACa;IACI;IACR;IACD;IACE;IACI;IAEX;GACM,CAAA;EACW,CAAA,EAChB,CAAA,CACG;;AAEjB,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,aAA2D,OAAO,QAC7E,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;CAAS,GAAI;CAAO,mBAAgB;CAAe;AAAM,CAAA,CAC1D"}