@ndla/ui 56.0.122-alpha.0 → 56.0.124-alpha.0

package/lib/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,158 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_Controls = require('./Controls.js');
+const require_SpeechControl = require('./SpeechControl.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/AudioPlayer/AudioPlayer.tsx
+const AudioPlayerWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	border: "1px solid",
+	borderColor: "stroke.default",
+	borderRadius: "xsmall",
+	boxShadow: "full",
+	marginBlockEnd: "4xsmall",
+	overflow: "hidden"
+} });
+const InfoWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	tabletWideDown: { display: "block" }
+} });
+const ImageWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	flex: "1 0 auto",
+	width: "surface.4xsmall",
+	height: "surface.4xsmall",
+	overflow: "hidden",
+	"& img": {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover"
+	},
+	desktop: {
+		width: "260px",
+		height: "260px"
+	},
+	tabletWideDown: {
+		maxHeight: "surface.small",
+		maxWidth: "100%",
+		width: "100%",
+		height: "auto"
+	}
+} });
+const TextWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	alignItems: "flex-start",
+	flexDirection: "column",
+	gap: "xsmall",
+	padding: "xsmall",
+	width: "100%",
+	"&[data-has-image='true']": { tablet: {
+		paddingBlock: "xsmall",
+		paddingInline: "medium"
+	} }
+} });
+const TitleWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	fontFamily: "sans",
+	tabletWide: {
+		width: "100%",
+		flexDirection: "row",
+		justifyContent: "space-between"
+	}
+} });
+const TextVersionWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	borderBlockStart: "1px solid",
+	borderColor: "stroke.default",
+	paddingBlock: "medium",
+	paddingInline: "xsmall",
+	tablet: { paddingInline: "medium" }
+} });
+const TextVersionText = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	maxWidth: "surface.xlarge",
+	"& span > *": { whiteSpace: "pre-wrap" },
+	"& p:not(:first-child):not(:last-child)": { marginBlock: "small" },
+	"& p[data-align=\"center\"]": { textAlign: "center" },
+	"& p:has(span[dir=\"rtl\"])": { direction: "rtl" }
+} });
+const TextVersionButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { alignSelf: "flex-start" } });
+const ShowMoreButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { marginInlineStart: "3xsmall" } });
+const DESCRIPTION_MAX_LENGTH = 200;
+const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const [showTextVersion, setShowTextVersion] = (0, react.useState)(false);
+	const [showFullDescription, setShowFullDescription] = (0, react.useState)(false);
+	const truncatedDescription = (0, react.useMemo)(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
+	const textDescriptionId = (0, react.useId)();
+	if (speech) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.SpeechControl_default, {
+		src,
+		title
+	});
+	const toggleTextVersion = () => {
+		setShowTextVersion((curr) => !curr);
+	};
+	const textVersionButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextVersionButton, {
+		variant: "secondary",
+		"aria-expanded": showTextVersion,
+		"aria-controls": textDescriptionId,
+		size: "small",
+		onClick: toggleTextVersion,
+		children: t(showTextVersion ? "audio.textVersion.close" : "audio.textVersion.heading")
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AudioPlayerWrapper, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InfoWrapper, { children: [!!img && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: img.url,
+			alt: img.alt
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextWrapper, {
+			"data-has-image": !!img,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [subtitle?.url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+					to: subtitle.url,
+					children: subtitle.title
+				}) : subtitle?.title, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+					asChild: true,
+					consumeCss: true,
+					textStyle: "title.large",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title })
+				})] }), !!textVersion && !img && textVersionButton] }),
+				!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Text, {
+					textStyle: "body.medium",
+					children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShowMoreButton, {
+						variant: "link",
+						onClick: () => setShowFullDescription((p) => !p),
+						children: t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)
+					})]
+				}),
+				!!textVersion && !!img && textVersionButton
+			]
+		})] }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Controls.Controls_default, {
+			src,
+			title
+		}),
+		!!textVersion && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextVersionWrapper, {
+			id: textDescriptionId,
+			hidden: !showTextVersion,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+				asChild: true,
+				textStyle: "title.medium",
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", { children: t("audio.textVersion.heading") })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextVersionText, { children: textVersion })]
+		})
+	] });
+};
+var AudioPlayer_default = AudioPlayer;
+
+//#endregion
+exports.AudioPlayer_default = AudioPlayer_default;
+//# sourceMappingURL=AudioPlayer.js.map

package/lib/AudioPlayer/AudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.js","names":["Button","SpeechControl","SafeLink","Heading","Text","Controls"],"sources":["../../src/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport Controls from \"./Controls\";\nimport SpeechControl from \"./SpeechControl\";\n\n// TODO: Could the audio metadata be more tightly coupled to the audio player?\n\nconst AudioPlayerWrapper = styled(\"div\", {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"4xsmall\",\n    overflow: \"hidden\",\n  },\n});\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    tabletWideDown: {\n      display: \"block\",\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flex: \"1 0 auto\",\n    width: \"surface.4xsmall\",\n    height: \"surface.4xsmall\",\n    overflow: \"hidden\",\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"cover\",\n    },\n    desktop: {\n      width: \"260px\",\n      height: \"260px\",\n    },\n    tabletWideDown: {\n      maxHeight: \"surface.small\",\n      maxWidth: \"100%\",\n      width: \"100%\",\n      height: \"auto\",\n    },\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    padding: \"xsmall\",\n    width: \"100%\",\n    \"&[data-has-image='true']\": {\n      tablet: {\n        paddingBlock: \"xsmall\",\n        paddingInline: \"medium\",\n      },\n    },\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    fontFamily: \"sans\",\n    tabletWide: {\n      width: \"100%\",\n      flexDirection: \"row\",\n      justifyContent: \"space-between\",\n    },\n  },\n});\n\nconst TextVersionWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    paddingBlock: \"medium\",\n    paddingInline: \"xsmall\",\n    tablet: {\n      paddingInline: \"medium\",\n    },\n  },\n});\n\nconst TextVersionText = styled(\"div\", {\n  base: {\n    maxWidth: \"surface.xlarge\",\n    \"& span > *\": {\n      whiteSpace: \"pre-wrap\",\n    },\n    \"& p:not(:first-child):not(:last-child)\": {\n      marginBlock: \"small\",\n    },\n    '& p[data-align=\"center\"]': {\n      textAlign: \"center\",\n    },\n    '& p:has(span[dir=\"rtl\"])': {\n      direction: \"rtl\",\n    },\n  },\n});\n\nconst TextVersionButton = styled(Button, {\n  base: {\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ShowMoreButton = styled(Button, {\n  base: {\n    marginInlineStart: \"3xsmall\",\n  },\n});\n\nconst DESCRIPTION_MAX_LENGTH = 200;\n\ntype Props = {\n  src: string;\n  title: string;\n  subtitle?: {\n    title: string;\n    url?: string;\n  };\n  speech?: boolean;\n  description?: string;\n  textVersion?: ReactNode;\n  img?: {\n    url: string;\n    alt: string;\n  };\n};\n\nconst AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }: Props) => {\n  const { t } = useTranslation();\n  const [showTextVersion, setShowTextVersion] = useState(false);\n  const [showFullDescription, setShowFullDescription] = useState(false);\n  const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);\n  const textDescriptionId = useId();\n\n  if (speech) {\n    return <SpeechControl src={src} title={title} />;\n  }\n\n  const toggleTextVersion = () => {\n    setShowTextVersion((curr) => !curr);\n  };\n\n  const textVersionButton = (\n    <TextVersionButton\n      variant=\"secondary\"\n      aria-expanded={showTextVersion}\n      aria-controls={textDescriptionId}\n      size=\"small\"\n      onClick={toggleTextVersion}\n    >\n      {t(showTextVersion ? \"audio.textVersion.close\" : \"audio.textVersion.heading\")}\n    </TextVersionButton>\n  );\n\n  return (\n    <AudioPlayerWrapper>\n      <InfoWrapper>\n        {!!img && (\n          <ImageWrapper>\n            <img src={img.url} alt={img.alt} />\n          </ImageWrapper>\n        )}\n        <TextWrapper data-has-image={!!img}>\n          <TitleWrapper>\n            <div>\n              {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}\n              <Heading asChild consumeCss textStyle=\"title.large\">\n                <h3>{title}</h3>\n              </Heading>\n            </div>\n            {!!textVersion && !img && textVersionButton}\n          </TitleWrapper>\n          {!!description && (\n            <Text textStyle=\"body.medium\">\n              {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH\n                ? description\n                : `${truncatedDescription}...`}\n              {description.length > DESCRIPTION_MAX_LENGTH && (\n                <ShowMoreButton variant=\"link\" onClick={() => setShowFullDescription((p) => !p)}>\n                  {t(`audio.${showFullDescription ? \"readLessDescriptionLabel\" : \"readMoreDescriptionLabel\"}`)}\n                </ShowMoreButton>\n              )}\n            </Text>\n          )}\n          {!!textVersion && !!img && textVersionButton}\n        </TextWrapper>\n      </InfoWrapper>\n      <Controls src={src} title={title} />\n      {!!textVersion && (\n        <TextVersionWrapper id={textDescriptionId} hidden={!showTextVersion}>\n          <Heading asChild textStyle=\"title.medium\" consumeCss>\n            <h4>{t(\"audio.textVersion.heading\")}</h4>\n          </Heading>\n          <TextVersionText>{textVersion}</TextVersionText>\n        </TextVersionWrapper>\n      )}\n    </AudioPlayerWrapper>\n  );\n};\n\nexport default AudioPlayer;\n"],"mappings":"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"}

package/lib/AudioPlayer/Controls.js

@@ -0,0 +1,255 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+
+//#region src/AudioPlayer/Controls.tsx
+const ControlsWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	borderBlockStart: "1px solid",
+	borderColor: "stroke.default",
+	borderBottomRadius: "xsmall",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	background: "background.default",
+	gap: "xsmall",
+	paddingBlock: "xsmall",
+	paddingInline: "medium",
+	tabletWideDown: {
+		display: "grid",
+		paddingBlock: "xsmall",
+		paddingInline: "xsmall",
+		gridTemplateColumns: "1fr repeat(5, auto) 1fr",
+		gridTemplateAreas: `
+  "track  track track     track track     track   track"
+  ".      speed backwards play  forwards  volume  ."
+`
+	},
+	mobileWideDown: { columnGap: "3xsmall" }
+} });
+const PlayButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "play" } });
+const Forward15SecButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "forwards" } });
+const Back15SecButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "backwards" } });
+const ProgressWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	flex: "1",
+	display: "flex",
+	alignItems: "center",
+	gap: "xxsmall",
+	gridArea: "track",
+	paddingBlock: "xsmall",
+	mobileDown: { paddingInline: "xsmall" }
+} });
+const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: {
+	minWidth: "xxlarge",
+	flexShrink: "0",
+	textAlign: "center"
+} });
+const VolumeButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "volume" } });
+const SpeedButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: {
+	paddingBlock: "auto",
+	paddingInline: "auto",
+	maxWidth: "xxlarge",
+	maxHeight: "xxlarge",
+	minWidth: "xxlarge",
+	minHeight: "xxlarge",
+	"& span": { flex: "1" }
+} });
+const StyledSelectRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.SelectRoot, { base: { gridArea: "speed" } });
+const StyledSliderControl = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.SliderControl, { base: {
+	height: "surface.3xsmall",
+	minWidth: "small"
+} });
+const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: { paddingInline: "small" } });
+const formatTime = (seconds) => {
+	const minutes = Math.floor(seconds / 60);
+	const currentSeconds = seconds % 60;
+	const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
+	return `${minutes}:${formattedSeconds}`;
+};
+const speedValues = (0, __ark_ui_react.createListCollection)({ items: [
+	"0.5",
+	"0.75",
+	"1",
+	"1.25",
+	"1.5",
+	"1.75",
+	"2"
+] });
+const Controls = ({ src, title }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const [speedValue, setSpeedValue] = (0, react.useState)(1);
+	const [volumeValue, setVolumeValue] = (0, react.useState)(100);
+	const [currentTime, setCurrentTime] = (0, react.useState)(0);
+	const [remainingTime, setRemainingTime] = (0, react.useState)(0);
+	const [playing, setPlaying] = (0, react.useState)(false);
+	const audioRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (audioRef.current) audioRef.current.playbackRate = speedValue;
+	}, [speedValue]);
+	(0, react.useEffect)(() => {
+		if (audioRef.current) {
+			const audioElement = audioRef.current;
+			const handleTimeUpdate = () => {
+				const { currentTime: currentTime$1, duration } = audioElement;
+				setCurrentTime(Math.round(currentTime$1));
+				setRemainingTime(Math.round(duration - currentTime$1));
+			};
+			const handleLoadedMetaData = () => {
+				const { currentTime: currentTime$1, duration } = audioElement;
+				setCurrentTime(Math.round(currentTime$1));
+				setRemainingTime(Math.round(duration - currentTime$1));
+			};
+			const handleTimeEnded = () => {
+				setPlaying(false);
+			};
+			audioElement.addEventListener("timeupdate", handleTimeUpdate);
+			audioElement.addEventListener("loadedmetadata", handleLoadedMetaData);
+			audioElement.addEventListener("ended", handleTimeEnded);
+			return () => {
+				audioElement.removeEventListener("timeupdate", handleTimeUpdate);
+				audioElement.removeEventListener("loadedmetadata", handleLoadedMetaData);
+				audioElement.removeEventListener("ended", handleTimeEnded);
+			};
+		}
+	}, []);
+	const togglePlay = () => {
+		if (audioRef.current) {
+			const audioElement = audioRef.current;
+			if (!playing) audioElement.play();
+			else audioElement.pause();
+			setPlaying(!playing);
+		}
+	};
+	const onSeekSeconds = (seconds) => {
+		if (audioRef.current) audioRef.current.currentTime += seconds;
+	};
+	const handleSliderChange = (details) => {
+		const newValue = details.value[0];
+		if (audioRef.current && newValue != null && !isNaN(newValue)) audioRef.current.currentTime = details.value[0];
+	};
+	const handleVolumeSliderChange = (details) => {
+		if (audioRef.current) {
+			audioRef.current.volume = details.value[0] / 100;
+			setVolumeValue(details.value[0]);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+		ref: audioRef,
+		src,
+		title,
+		preload: "metadata"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ControlsWrapper, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Back15SecButton, {
+			variant: "tertiary",
+			title: t("audio.controls.rewind15sec"),
+			"aria-label": t("audio.controls.rewind15sec"),
+			onClick: () => onSeekSeconds(-15),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.Replay15Line, {})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayButton, {
+			"aria-label": t(playing ? t("audio.pause") : t("audio.play")),
+			variant: "primary",
+			onClick: togglePlay,
+			children: playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.PauseLine, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.PlayFill, {})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Forward15SecButton, {
+			variant: "tertiary",
+			title: t("audio.controls.forward15sec"),
+			"aria-label": t("audio.controls.forward15sec"),
+			onClick: () => onSeekSeconds(15),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.Forward15Line, {})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ProgressWrapper, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+				textStyle: "label.medium",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: formatTime(currentTime) })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderRoot, {
+				value: [audioRef.current?.currentTime ?? 0],
+				defaultValue: [0],
+				step: 1,
+				max: Math.round(audioRef.current?.duration ?? 0),
+				onValueChange: handleSliderChange,
+				getAriaValueText: (value) => t("audio.valueText", {
+					start: formatTime(Math.round(value.value)),
+					end: formatTime(Math.round(audioRef.current?.duration ?? 0))
+				}),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderLabel, {
+					srOnly: true,
+					children: t("audio.progressBar")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderControl, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderTrack, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderRange, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderThumb, {
+					index: 0,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderHiddenInput, {})
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+				textStyle: "label.medium",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: ["-", formatTime(remainingTime)] })
+			})
+		] }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.FieldRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSelectRoot, {
+			collection: speedValues,
+			value: [speedValue.toString()],
+			onValueChange: (details) => setSpeedValue(parseFloat(details.value[0])),
+			positioning: { placement: "top" },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectLabel, {
+					srOnly: true,
+					children: t("audio.controls.selectSpeed")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeedButton, {
+						variant: "tertiary",
+						title: t("audio.controls.selectSpeed"),
+						"aria-label": t("audio.controls.selectSpeed"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: `${speedValue}x` })
+					})
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectContent, { children: speedValues.items.map((speed) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SelectItem, {
+					item: speed,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SelectItemText, { children: [speed, "x"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CheckLine, {}) })]
+				}, speed)) })
+			]
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.PopoverRoot, {
+			positioning: { placement: "top" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VolumeButton, {
+					variant: "tertiary",
+					"aria-label": t("audio.controls.adjustVolume"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.VolumeUpFill, {})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderRoot, {
+				orientation: "vertical",
+				value: [volumeValue],
+				min: 0,
+				max: 100,
+				defaultValue: [100],
+				step: 1,
+				onValueChange: handleVolumeSliderChange,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderLabel, {
+					srOnly: true,
+					children: t("audio.controls.adjustVolume")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSliderControl, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderTrack, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderRange, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderThumb, {
+					index: 0,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderHiddenInput, {})
+				})] })]
+			}) })]
+		})
+	] })] });
+};
+var Controls_default = Controls;
+
+//#endregion
+exports.Controls_default = Controls_default;
+//# sourceMappingURL=Controls.js.map

package/lib/AudioPlayer/Controls.js.map

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

package/lib/AudioPlayer/SpeechControl.js

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/AudioPlayer/SpeechControl.tsx
+const SpeechControl = ({ src, title, type = "audio" }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const audioRef = (0, react.useRef)(null);
+	const togglePlay = () => {
+		if (audioRef.current) {
+			const audioElement = audioRef.current;
+			if (audioElement.paused) audioElement.play();
+			else audioElement.pause();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-embed-type": "speech",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+			ref: audioRef,
+			src,
+			title,
+			preload: "metadata"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.TooltipRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.IconButton, {
+				variant: "tertiary",
+				"aria-label": t(`${type}.play`),
+				onClick: togglePlay,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.VolumeUpFill, {})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TooltipContent, { children: t(`${type}.play`) })] })]
+	});
+};
+var SpeechControl_default = SpeechControl;
+
+//#endregion
+exports.SpeechControl_default = SpeechControl_default;
+//# sourceMappingURL=SpeechControl.js.map

package/lib/AudioPlayer/SpeechControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeechControl.js","names":["TooltipRoot","TooltipTrigger","IconButton","VolumeUpFill","TooltipContent"],"sources":["../../src/AudioPlayer/SpeechControl.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { TooltipRoot, TooltipTrigger, TooltipContent, IconButton } from \"@ndla/primitives\";\n\ntype Props = {\n  src: string;\n  title: string;\n  type?: \"gloss\" | \"audio\";\n};\n\nconst SpeechControl = ({ src, title, type = \"audio\" }: Props) => {\n  const { t } = useTranslation();\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (audioElement.paused) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n    }\n  };\n  return (\n    <div data-embed-type=\"speech\">\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <TooltipRoot>\n        <TooltipTrigger asChild>\n          <IconButton variant=\"tertiary\" aria-label={t(`${type}.play`)} onClick={togglePlay}>\n            <VolumeUpFill />\n          </IconButton>\n        </TooltipTrigger>\n        <TooltipContent>{t(`${type}.play`)}</TooltipContent>\n      </TooltipRoot>\n    </div>\n  );\n};\n\nexport default SpeechControl;\n"],"mappings":";;;;;;;;AAmBA,MAAM,gBAAgB,CAAC,EAAE,KAAK,OAAO,OAAO,SAAgB,KAAK;CAC/D,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,WAAW,kBAAyB,KAAK;CAE/C,MAAM,aAAa,MAAM;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,aAAa,OACf,cAAa,MAAM;OAEnB,cAAa,OAAO;EAEvB;CACF;AACD,wBACE,4BAAC;EAAI,mBAAgB;6BAEnB,2BAAC;GAAM,KAAK;GAAe;GAAY;GAAO,SAAQ;IAAa,kBACnE,4BAACA,4DACC,2BAACC;GAAe;6BACd,2BAACC;IAAW,SAAQ;IAAW,cAAY,GAAG,EAAE,KAAK,OAAO;IAAE,SAAS;8BACrE,2BAACC,8BAAe;KACL;IACE,kBACjB,2BAACC,8CAAgB,GAAG,EAAE,KAAK,OAAO,GAAkB,IACxC;GACV;AAET;AAED,4BAAe"}

package/lib/AudioPlayer/index.js

@@ -0,0 +1,8 @@
+const require_AudioPlayer = require('./AudioPlayer.js');
+
+//#region src/AudioPlayer/index.ts
+var AudioPlayer_default$1 = require_AudioPlayer.AudioPlayer_default;
+
+//#endregion
+exports.AudioPlayer_default = AudioPlayer_default$1;
+//# sourceMappingURL=index.js.map

package/lib/AudioPlayer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AudioPlayer"],"sources":["../../src/AudioPlayer/index.ts"],"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 AudioPlayer from \"./AudioPlayer\";\n\nexport default AudioPlayer;\n"],"mappings":";;;AAUA,4BAAeA"}

package/lib/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,45 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_BreadcrumbItem = require('./BreadcrumbItem.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Breadcrumb/Breadcrumb.tsx
+const StyledList = (0, __ndla_styled_system_jsx.styled)("ol", { base: {
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	listStyle: "none",
+	gap: "xxsmall",
+	mobileDown: {
+		alignItems: "flex-start",
+		justifyContent: "center",
+		flexDirection: "column"
+	}
+} });
+const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collapseLast = true }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": t("breadcrumb.breadcrumb"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList, { children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BreadcrumbItem.BreadcrumbItem_default, {
+			renderItem,
+			renderSeparator,
+			ref: (element) => {
+				if (element === null || !collapseFirst && index === 0 || !collapseLast && index === items.length - 1) {
+					if (element) element.setMaxWidth("none");
+				}
+			},
+			totalCount: items.length,
+			item: {
+				...item,
+				index
+			}
+		}, typeof item.to === "string" ? item.to : item.to.pathname)) })
+	});
+};
+var Breadcrumb_default = Breadcrumb;
+
+//#endregion
+exports.Breadcrumb_default = Breadcrumb_default;
+//# sourceMappingURL=Breadcrumb.js.map

package/lib/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","names":["BreadcrumbItem"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport BreadcrumbItem, { type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n  collapseFirst?: boolean;\n  collapseLast?: boolean;\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\nconst Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collapseLast = true }: 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            ref={(element) => {\n              if (\n                element === null ||\n                (!collapseFirst && index === 0) ||\n                (!collapseLast && index === items.length - 1)\n              ) {\n                if (element) {\n                  element.setMaxWidth(\"none\");\n                }\n              }\n            }}\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\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;AAqBA,MAAM,aAAa,qCAAO,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,UAAU;CACV,YAAY;CACZ,WAAW;CACX,KAAK;CACL,YAAY;EACV,YAAY;EACZ,gBAAgB;EAChB,eAAe;CAChB;AACF,EACF,EAAC;AAEF,MAAM,aAAa,CAAC,EAAE,OAAO,YAAY,iBAAiB,eAAe,eAAe,MAAa,KAAK;CACxG,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAE9B,wBACE,2BAAC;EAAI,cAAY,EAAE,wBAAwB;4BACzC,2BAAC,wBACE,MAAM,IAAI,CAAC,MAAM,0BAChB,2BAACA;GACa;GACK;GACjB,KAAK,CAAC,YAAY;AAChB,QACE,YAAY,SACV,iBAAiB,UAAU,MAC3B,gBAAgB,UAAU,MAAM,SAAS,GAE3C;SAAI,QACF,SAAQ,YAAY,OAAO;IAC5B;GAEJ;GAED,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;GAAO;YAFZ,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,GACS;GACT;AAET;AAED,yBAAe"}

package/lib/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,37 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Breadcrumb/BreadcrumbItem.tsx
+const StyledListItem = (0, __ndla_styled_system_jsx.styled)("li", { base: {
+	display: "flex",
+	color: "inherit",
+	gap: "3xsmall",
+	alignItems: "flex-end",
+	tabletDown: { display: "block" },
+	"& a": { _visited: { color: "inherit" } }
+} });
+const BreadcrumbItem = (0, react.forwardRef)(({ renderItem, renderSeparator, item, totalCount }, ref) => {
+	const liRef = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(ref, () => ({ setMaxWidth: (maxWidth) => {
+		liRef.current.children[0].style.maxWidth = maxWidth;
+	} }));
+	const { to, name, index } = item;
+	const isLast = index === totalCount - 1;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledListItem, {
+		ref: liRef,
+		"aria-current": isLast ? "page" : void 0,
+		children: [renderItem ? renderItem(item, totalCount) : isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: name }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+			to,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: name })
+		}), renderSeparator ? renderSeparator(item, totalCount) : !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightShortLine, {})]
+	});
+});
+var BreadcrumbItem_default = BreadcrumbItem;
+
+//#endregion
+exports.BreadcrumbItem_default = BreadcrumbItem_default;
+//# sourceMappingURL=BreadcrumbItem.js.map

package/lib/Breadcrumb/BreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItem.js","names":["maxWidth: number","SafeLink","ArrowRightShortLine"],"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 { useRef, useImperativeHandle, type ReactNode, forwardRef } from \"react\";\nimport { ArrowRightShortLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nexport interface SimpleBreadcrumbItem {\n  to: string | Partial<Location>;\n  name: ReactNode;\n}\n\nexport interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {\n  index: number;\n}\n\nexport interface BreadcrumbRenderProps {\n  item: IndexedBreadcrumbItem;\n  totalCount: number;\n}\n\nconst StyledListItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    color: \"inherit\",\n    gap: \"3xsmall\",\n    alignItems: \"flex-end\",\n    tabletDown: {\n      display: \"block\",\n    },\n    \"& a\": {\n      _visited: {\n        color: \"inherit\",\n      },\n    },\n  },\n});\n\ninterface Props {\n  item: IndexedBreadcrumbItem;\n  autoCollapse?: boolean;\n  totalCount: number;\n  renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nconst BreadcrumbItem = forwardRef<any, Props>(({ renderItem, renderSeparator, item, totalCount }, ref) => {\n  const liRef = useRef<any>(null);\n\n  useImperativeHandle(ref, () => ({\n    setMaxWidth: (maxWidth: number) => {\n      liRef.current.children[0].style.maxWidth = maxWidth;\n    },\n  }));\n\n  const { to, name, index } = item;\n  const isLast = index === totalCount - 1;\n  return (\n    <StyledListItem ref={liRef} aria-current={isLast ? \"page\" : undefined}>\n      {renderItem ? (\n        renderItem(item, totalCount)\n      ) : isLast ? (\n        <span>{name}</span>\n      ) : (\n        <SafeLink to={to}>\n          <span>{name}</span>\n        </SafeLink>\n      )}\n      {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <ArrowRightShortLine />}\n    </StyledListItem>\n  );\n});\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;;;;;AA2BA,MAAM,iBAAiB,qCAAO,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,KAAK;CACL,YAAY;CACZ,YAAY,EACV,SAAS,QACV;CACD,OAAO,EACL,UAAU,EACR,OAAO,UACR,EACF;AACF,EACF,EAAC;AAUF,MAAM,iBAAiB,sBAAuB,CAAC,EAAE,YAAY,iBAAiB,MAAM,YAAY,EAAE,QAAQ;CACxG,MAAM,QAAQ,kBAAY,KAAK;AAE/B,gCAAoB,KAAK,OAAO,EAC9B,aAAa,CAACA,aAAqB;AACjC,QAAM,QAAQ,SAAS,GAAG,MAAM,WAAW;CAC5C,EACF,GAAE;CAEH,MAAM,EAAE,IAAI,MAAM,OAAO,GAAG;CAC5B,MAAM,SAAS,UAAU,aAAa;AACtC,wBACE,4BAAC;EAAe,KAAK;EAAO,gBAAc,SAAS;aAChD,aACC,WAAW,MAAM,WAAW,GAC1B,yBACF,2BAAC,oBAAM,OAAY,mBAEnB,2BAACC;GAAa;6BACZ,2BAAC,oBAAM,OAAY;IACV,EAEZ,kBAAkB,gBAAgB,MAAM,WAAW,IAAI,0BAAU,2BAACC,qCAAsB;GAC1E;AAEpB,EAAC;AAEF,6BAAe"}