@ndla/ui 56.0.185-alpha.0 → 56.0.187-alpha.0

package/lib/AudioPlayer/SpeechControl.d.ts

@@ -8,7 +8,6 @@
 type Props = {
     src: string;
     title: string;
-    type?: "gloss" | "audio";
 };
-export declare const SpeechControl: ({ src, title, type }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SpeechControl: ({ src, title }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/AudioPlayer/SpeechControl.js

@@ -1,7 +1,6 @@
 require("../_virtual/_rolldown/runtime.js");
-let _ndla_primitives = require("@ndla/primitives");
-let react = require("react");
-let react_i18next = require("react-i18next");
+const require_PlayButton = require("./PlayButton.js");
+const require_useAudioControls = require("./useAudioControls.js");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/AudioPlayer/SpeechControl.tsx
@@ -12,16 +11,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-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();
-		}
-	};
+const SpeechControl = ({ src, title }) => {
+	const { audioRef, togglePlay } = require_useAudioControls.useAudioControls();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-embed-type": "speech",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
@@ -29,10 +20,8 @@ const SpeechControl = ({ src, title, type = "audio" }) => {
 			src,
 			title,
 			preload: "metadata"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.IconButton, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PlayButton.PlayButton, {
 			variant: "tertiary",
-			"aria-label": t(`${type}.play`),
-			title: t(`${type}.play`),
 			onClick: togglePlay,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.VolumeUpFill, {})
 		})]

package/lib/AudioPlayer/SpeechControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeechControl.js","names":["IconButton","VolumeUpFill"],"sources":["../../src/AudioPlayer/SpeechControl.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ntype Props = {\n  src: string;\n  title: string;\n  type?: \"gloss\" | \"audio\";\n};\n\nexport const SpeechControl = ({ src, title, type = \"audio\" }: Props) => {\n  const { t } = useTranslation();\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (audioElement.paused) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n    }\n  };\n  return (\n    <div data-embed-type=\"speech\">\n      {/* oxlint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <IconButton variant=\"tertiary\" aria-label={t(`${type}.play`)} title={t(`${type}.play`)} onClick={togglePlay}>\n        <VolumeUpFill />\n      </IconButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAAE,KAAK,OAAO,OAAO,cAAqB;CACtE,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,YAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,aAAa,OACf,cAAa,MAAM;OAEnB,cAAa,OAAO;;;AAI1B,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,KAACA,iBAAAA,YAAD;GAAY,SAAQ;GAAW,cAAY,EAAE,GAAG,KAAK,OAAO;GAAE,OAAO,EAAE,GAAG,KAAK,OAAO;GAAE,SAAS;aAC/F,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 */}\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"}

package/lib/AudioPlayer/VolumeSlider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2026-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { SliderValueChangeDetails } from "@ark-ui/react";
+interface Props {
+    value: number;
+    onValueChange: (value: SliderValueChangeDetails) => void;
+}
+export declare const VolumeSlider: ({ value, onValueChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/AudioPlayer/VolumeSlider.js

@@ -0,0 +1,32 @@
+require("../_virtual/_rolldown/runtime.js");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let react_jsx_runtime = require("react/jsx-runtime");
+let i18next = require("i18next");
+//#region src/AudioPlayer/VolumeSlider.tsx
+const StyledSliderControl = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SliderControl, { base: {
+	height: "surface.3xsmall",
+	minWidth: "small"
+} });
+const VolumeSlider = ({ value, onValueChange }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.SliderRoot, {
+		orientation: "vertical",
+		value: [value],
+		min: 0,
+		max: 100,
+		defaultValue: [100],
+		step: 1,
+		onValueChange,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderLabel, {
+			srOnly: true,
+			children: (0, i18next.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, {})
+		})] })]
+	});
+};
+//#endregion
+exports.VolumeSlider = VolumeSlider;
+
+//# sourceMappingURL=VolumeSlider.js.map

package/lib/AudioPlayer/VolumeSlider.js.map

@@ -0,0 +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"}

package/lib/AudioPlayer/audioUtils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2026-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare const formatTime: (seconds: number) => string;

package/lib/AudioPlayer/audioUtils.js

@@ -0,0 +1,17 @@
+//#region src/AudioPlayer/audioUtils.ts
+/**
+* Copyright (c) 2026-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const formatTime = (seconds) => {
+	const minutes = Math.floor(seconds / 60);
+	const currentSeconds = seconds % 60;
+	return `${minutes}:${currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}`;
+};
+//#endregion
+exports.formatTime = formatTime;
+
+//# sourceMappingURL=audioUtils.js.map

package/lib/AudioPlayer/audioUtils.js.map

@@ -0,0 +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"}

package/lib/AudioPlayer/useAudioControls.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2026-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { SliderValueChangeDetails } from "@ark-ui/react";
+import { type ReactEventHandler } from "react";
+export declare const useAudioControls: () => {
+    togglePlay: () => void;
+    onPlaybackRateChange: (rate: number) => void;
+    onSeekSeconds: (seconds: number) => void;
+    handleVolumeSliderChange: (details: SliderValueChangeDetails) => void;
+    handleSliderChange: (details: SliderValueChangeDetails) => void;
+    onEnded: () => void;
+    onHandleTime: ReactEventHandler<HTMLAudioElement>;
+    speedValue: number;
+    volumeValue: number;
+    currentTime: number;
+    duration: number;
+    playing: boolean;
+    audioRef: import("react").RefObject<HTMLAudioElement | null>;
+};

package/lib/AudioPlayer/useAudioControls.js

@@ -0,0 +1,56 @@
+require("../_virtual/_rolldown/runtime.js");
+let react = require("react");
+//#region src/AudioPlayer/useAudioControls.ts
+const useAudioControls = () => {
+	const [speedValue, setSpeedValue] = (0, react.useState)(1);
+	const [volumeValue, setVolumeValue] = (0, react.useState)(100);
+	const [currentTime, setCurrentTime] = (0, react.useState)(0);
+	const [duration, setDuration] = (0, react.useState)(0);
+	const [playing, setPlaying] = (0, react.useState)(false);
+	const audioRef = (0, react.useRef)(null);
+	const togglePlay = (0, react.useCallback)(() => {
+		if (!audioRef.current) return;
+		if (audioRef.current.paused) audioRef.current.play();
+		else audioRef.current.pause();
+		setPlaying((p) => !p);
+	}, []);
+	const onPlaybackRateChange = (0, react.useCallback)((rate) => {
+		setSpeedValue(rate);
+		if (audioRef.current) audioRef.current.playbackRate = rate;
+	}, []);
+	const onSeekSeconds = (0, react.useCallback)((seconds) => {
+		if (audioRef.current) audioRef.current.currentTime += seconds;
+	}, []);
+	const handleSliderChange = (0, react.useCallback)((details) => {
+		const newValue = details.value[0];
+		if (audioRef.current && newValue != null && !isNaN(newValue)) audioRef.current.currentTime = details.value[0];
+	}, []);
+	return {
+		togglePlay,
+		onPlaybackRateChange,
+		onSeekSeconds,
+		handleVolumeSliderChange: (0, react.useCallback)((details) => {
+			if (audioRef.current) {
+				audioRef.current.volume = details.value[0] / 100;
+				setVolumeValue(details.value[0]);
+			}
+		}, []),
+		handleSliderChange,
+		onEnded: (0, react.useCallback)(() => setPlaying(false), []),
+		onHandleTime: (0, react.useCallback)((meta) => {
+			const target = meta.currentTarget;
+			setCurrentTime(Math.round(target.currentTime));
+			setDuration(Math.round(target.duration));
+		}, []),
+		speedValue,
+		volumeValue,
+		currentTime,
+		duration,
+		playing,
+		audioRef
+	};
+};
+//#endregion
+exports.useAudioControls = useAudioControls;
+
+//# sourceMappingURL=useAudioControls.js.map

package/lib/AudioPlayer/useAudioControls.js.map

@@ -0,0 +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,CAAC;EAeJ;EACA,UAAA,GAAA,MAAA,mBAdgC,WAAW,MAAM,EAAE,EAAE,CAAC;EAetD,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,CAAC;EAUJ;EACA;EACA;EACA;EACA;EACA;EACD"}

package/lib/Breadcrumb/BreadcrumbItem.js

@@ -19,9 +19,8 @@ const StyledListItem = (0, _ndla_styled_system_jsx.styled)("li", { base: {
 	"& a": { _visited: { color: "inherit" } }
 } });
 const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }) => {
-	const isLast = item.index === totalCount - 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledListItem, {
-		"aria-current": isLast ? "page" : void 0,
+		"aria-current": item.index === totalCount - 1 ? "page" : void 0,
 		children: [renderItem(item, totalCount), renderSeparator(item, totalCount)]
 	});
 };

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;CAC1F,MAAM,SAAS,KAAK,UAAU,aAAa;AAC3C,QACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EAAgB,gBAAc,SAAS,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,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"}

package/lib/Embed/AudioEmbed.js

@@ -19,11 +19,7 @@ const AudioEmbed = ({ embed, lang }) => {
 	const type = embed.embedData.type === "standard" ? "audio" : "podcast";
 	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, { type });
 	const { data, embedData } = embed;
-	if (embedData.type === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AudioPlayer.AudioPlayer, {
-		speech: true,
-		src: data.audioFile.url,
-		title: data.title.title
-	});
+	const variant = embedData.type === "podcast" ? "standard" : embedData.type;
 	const subtitle = data.series ? {
 		title: data.series.title.title,
 		url: `/podkast/${data.series.id}`
@@ -33,12 +29,12 @@ const AudioEmbed = ({ embed, lang }) => {
 		url: coverPhoto.url,
 		alt: coverPhoto.altText
 	};
-	const licenseProps = require_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
 		lang,
 		"data-embed-type": type,
-		...licenseProps,
+		...require_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AudioPlayer.AudioPlayer, {
+			variant,
 			description: data.podcastMeta?.introduction ?? "",
 			img,
 			src: data.audioFile.url,

package/lib/Embed/AudioEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","AudioPlayer","licenseAttributes","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 } 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  if (embedData.type === \"minimal\") {\n    return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n  }\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        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      <EmbedByline\n        error={false}\n        type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n        copyright={embed.data.copyright}\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;AAE5B,KAAI,UAAU,SAAS,UACrB,QAAO,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;EAAa,QAAA;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;EAAS,CAAA;CAGjF,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;CAE1E,MAAM,eAAeC,0BAAAA,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;AAE3F,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAoB;EAAM,mBAAiB;EAAM,GAAI;YAArD,CACE,iBAAA,GAAA,kBAAA,KAACD,oBAAAA,aAAD;GACE,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,EACF,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;GACtB,CAAA,CACW"}
+{"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      <EmbedByline\n        error={false}\n        type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n        copyright={embed.data.copyright}\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,IAAI;YAGzF,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,EACF,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;GACtB,CAAA,CACW"}

package/lib/Embed/ExternalEmbed.js

@@ -32,22 +32,19 @@ const ExternalEmbed = ({ embed }) => {
 	}, []);
 	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, { type: "external" });
 	const { embedData, data } = embed;
-	if (embedData.type === "fullscreen") {
-		const image = {
-			src: data.iframeImage?.image.imageUrl,
-			alt: embedData.alt !== void 0 ? embedData.alt : data.iframeImage?.alttext?.alttext ?? ""
-		};
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Figure, {
-			"data-embed-type": "external",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.ResourceBox, {
-				image,
-				title: embedData.title ?? "",
-				url: embedData.url,
-				caption: embedData.caption ?? "",
-				buttonText: t("license.other.itemImage.ariaLabel")
-			})
-		});
-	}
+	if (embedData.type === "fullscreen") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Figure, {
+		"data-embed-type": "external",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.ResourceBox, {
+			image: {
+				src: data.iframeImage?.image.imageUrl,
+				alt: embedData.alt !== void 0 ? embedData.alt : data.iframeImage?.alttext?.alttext ?? ""
+			},
+			title: embedData.title ?? "",
+			url: embedData.url,
+			caption: embedData.caption ?? "",
+			buttonText: t("license.other.itemImage.ariaLabel")
+		})
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
 		"data-embed-type": "external",
 		ref: figRef,

package/lib/Embed/ExternalEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.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 { OembedMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const figRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const iframe = figRef.current?.querySelector(\"iframe\");\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const image = {\n      src: data.iframeImage?.image.imageUrl,\n      alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n    };\n    return (\n      <Figure data-embed-type=\"external\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </Figure>\n    );\n  }\n\n  return (\n    <StyledFigure\n      data-embed-type=\"external\"\n      ref={figRef}\n      dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,UAAA,GAAA,MAAA,QAA6B,KAAK;AAExC,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,YAAa,CAAA;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,KAAA,IAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,iBAAA,GAAA,kBAAA,KAACD,iBAAAA,QAAD;GAAQ,mBAAgB;aACtB,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,aAAD;IACS;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;IAClD,CAAA;GACK,CAAA;;AAIb,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;EACE,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;EAC7D,CAAA"}
+{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.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 { OembedMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const figRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const iframe = figRef.current?.querySelector(\"iframe\");\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const image = {\n      src: data.iframeImage?.image.imageUrl,\n      alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n    };\n    return (\n      <Figure data-embed-type=\"external\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </Figure>\n    );\n  }\n\n  return (\n    <StyledFigure\n      data-embed-type=\"external\"\n      ref={figRef}\n      dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,UAAA,GAAA,MAAA,QAA6B,KAAK;AAExC,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,YAAa,CAAA;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,aAKrB,QACE,iBAAA,GAAA,kBAAA,KAACD,iBAAAA,QAAD;EAAQ,mBAAgB;YACtB,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,aAAD;GACE,OAPQ;IACZ,KAAK,KAAK,aAAa,MAAM;IAC7B,KAAK,UAAU,QAAQ,KAAA,IAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;IAC3F;GAKK,OAAO,UAAU,SAAS;GAC1B,KAAK,UAAU;GACf,SAAS,UAAU,WAAW;GAC9B,YAAY,EAAE,oCAAoC;GAClD,CAAA;EACK,CAAA;AAIb,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;EACE,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;EAC7D,CAAA"}

package/lib/Embed/IframeEmbed.js

@@ -36,14 +36,13 @@ const IframeEmbed = ({ embed }) => {
 	if (embedData.type === "fullscreen") {
 		const iframeImage = embed.status === "success" ? data.iframeImage : void 0;
 		const alt = embedData.alt !== void 0 ? embedData.alt : iframeImage?.alttext.alttext;
-		const image = {
-			src: iframeImage?.image.imageUrl,
-			alt: alt ?? ""
-		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
 			"data-embed-type": "iframe",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.ResourceBox, {
-				image,
+				image: {
+					src: iframeImage?.image.imageUrl,
+					alt: alt ?? ""
+				},
 				title: embedData.title ?? "",
 				url: embedData.url,
 				caption: embedData.caption ?? "",

package/lib/Embed/IframeEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"IframeEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.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 { IframeMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n    border: 0,\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\nexport const IframeEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n    const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n    return (\n      <StyledFigure data-embed-type=\"iframe\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </StyledFigure>\n    );\n  }\n\n  const { width, height, url } = embedData;\n\n  const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n  const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n  return (\n    <StyledFigure data-embed-type=\"iframe\">\n      <StyledIframe\n        ref={iframeRef}\n        title={title}\n        aria-label={title}\n        src={url}\n        width={strippedWidth}\n        height={strippedHeight}\n        allow=\"autoplay; encrypted-media; fullscreen\"\n        loading=\"lazy\"\n      />\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,gBAAA,GAAA,wBAAA,QAAsB,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAa,eAAe,EAAE,YAAmB;CAC/C,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,aAAA,GAAA,MAAA,QAAsC,KAAK;AAEjD,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,YAAa,CAAA;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK,cAAc,KAAA;EACpE,MAAM,MAAM,UAAU,QAAQ,KAAA,IAAY,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;GAAI;AAClE,SACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;GAAc,mBAAgB;aAC5B,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;IACS;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;IAClD,CAAA;GACW,CAAA;;CAInB,MAAM,EAAE,OAAO,QAAQ,QAAQ;CAE/B,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,iBAAiB,OAAO,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,QAAQ,GAAG,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ;AAE1F,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;EAAc,mBAAgB;YAC5B,iBAAA,GAAA,kBAAA,KAAC,cAAD;GACE,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;GACR,CAAA;EACW,CAAA"}
+{"version":3,"file":"IframeEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.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 { IframeMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n    border: 0,\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\nexport const IframeEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n    const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n    return (\n      <StyledFigure data-embed-type=\"iframe\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </StyledFigure>\n    );\n  }\n\n  const { width, height, url } = embedData;\n\n  const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n  const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n  return (\n    <StyledFigure data-embed-type=\"iframe\">\n      <StyledIframe\n        ref={iframeRef}\n        title={title}\n        aria-label={title}\n        src={url}\n        width={strippedWidth}\n        height={strippedHeight}\n        allow=\"autoplay; encrypted-media; fullscreen\"\n        loading=\"lazy\"\n      />\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,gBAAA,GAAA,wBAAA,QAAsB,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAa,eAAe,EAAE,YAAmB;CAC/C,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,aAAA,GAAA,MAAA,QAAsC,KAAK;AAEjD,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,YAAa,CAAA;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK,cAAc,KAAA;EACpE,MAAM,MAAM,UAAU,QAAQ,KAAA,IAAY,UAAU,MAAM,aAAa,QAAQ;AAE/E,SACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;GAAc,mBAAgB;aAC5B,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;IACE,OAJQ;KAAE,KAAK,aAAa,MAAM;KAAU,KAAK,OAAO;KAAI;IAK5D,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;IAClD,CAAA;GACW,CAAA;;CAInB,MAAM,EAAE,OAAO,QAAQ,QAAQ;CAE/B,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,iBAAiB,OAAO,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,QAAQ,GAAG,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ;AAE1F,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;EAAc,mBAAgB;YAC5B,iBAAA,GAAA,kBAAA,KAAC,cAAD;GACE,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;GACR,CAAA;EACW,CAAA"}

package/lib/FactBox/FactBox.js

@@ -4,7 +4,6 @@ let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_i18next = require("react-i18next");
-let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/FactBox/FactBox.tsx
 /**
@@ -29,52 +28,29 @@ const StyledAside = (0, _ndla_styled_system_jsx.styled)("aside", {
 		borderRadius: "xsmall",
 		clear: "both",
 		_open: { gridTemplateRows: "1fr" },
-		_closed: { _print: {
+		_print: {
+			gridTemplateRows: "1fr",
 			overflow: "visible",
 			maxHeight: "500vh"
-		} },
+		},
 		"& > div": { minHeight: "surface.3xsmall" }
 	},
-	variants: { overflowHidden: { true: { "& > div": { overflow: "hidden" } } } }
+	variants: { overflowHidden: { true: { "& > div": {
+		overflow: "hidden",
+		_print: { overflow: "visible" }
+	} } } }
 });
 const StyledContent = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	position: "relative",
 	width: "100%",
 	"& :first-child": { marginBlockStart: "0" },
-	_after: {
-		content: "\"\"",
-		textAlign: "center",
-		position: "absolute",
-		inset: "0",
-		transitionProperty: "opacity",
-		transitionDuration: "slow",
-		transitionTimingFunction: "ease-in-out",
-		gradientFrom: "surface.default/20",
-		gradientTo: "surface.default/95",
-		backgroundGradient: "to-b",
-		opacity: "1",
-		zIndex: "base",
-		pointerEvents: "none"
-	},
-	_print: {
-		overflow: "visible",
-		_after: { display: "none" }
-	},
-	_open: {
-		paddingBlockEnd: "xsmall",
-		_after: { opacity: "0" }
-	}
+	_print: { overflow: "visible" },
+	_open: { paddingBlockEnd: "xsmall" }
 } });
-const StyledIconButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.IconButton, { base: {
+const StyledButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: {
 	position: "absolute",
 	bottom: "-medium",
 	zIndex: "base",
-	"& svg": {
-		transitionProperty: "transform",
-		transitionTimingFunction: "ease-in-out",
-		transitionDuration: "fast"
-	},
-	_open: { "& svg": { transform: "rotate(180deg)" } },
 	_print: { display: "none" }
 } });
 const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {
@@ -105,14 +81,14 @@ const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOp
 		onTransitionEnd: (e) => {
 			if (e.target === e.currentTarget && state === "open") setOverflowHidden(false);
 		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconButton, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
 			"data-state": state,
 			onClick,
 			contentEditable: false,
 			"aria-expanded": state === "open",
+			variant: "secondary",
 			"aria-controls": contentId,
-			"aria-label": t(`factbox.${state === "open" ? "close" : "open"}`),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ArrowDownShortLine, {})
+			children: t(`factbox.${state === "open" ? "showLess" : "showMore"}`)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledContent, {
 			id: contentId,
 			"data-state": state,

package/lib/FactBox/FactBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FactBox.js","names":["IconButton","React","ArrowDownShortLine"],"sources":["../../src/FactBox/FactBox.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 { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport React, {\n  type ComponentProps,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n  base: {\n    position: \"relative\",\n    padding: \"medium\",\n    display: \"grid\",\n    gridTemplateRows: \"0fr\",\n    transitionProperty: \"grid-template-rows\",\n    transitionDuration: \"slow\",\n    transitionTimingFunction: \"ease-in-out\",\n    justifyItems: \"center\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    clear: \"both\",\n    _open: {\n      gridTemplateRows: \"1fr\",\n    },\n    _closed: {\n      _print: {\n        overflow: \"visible\",\n        maxHeight: \"500vh\",\n      },\n    },\n    \"& > div\": {\n      minHeight: \"surface.3xsmall\",\n    },\n  },\n  variants: {\n    overflowHidden: {\n      true: {\n        \"& > div\": {\n          overflow: \"hidden\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledContent = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    width: \"100%\",\n    // Reset the top margin of the very first child.\n    \"& :first-child\": {\n      marginBlockStart: \"0\",\n    },\n    _after: {\n      content: '\"\"',\n      textAlign: \"center\",\n      position: \"absolute\",\n      inset: \"0\",\n      transitionProperty: \"opacity\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in-out\",\n      gradientFrom: \"surface.default/20\",\n      gradientTo: \"surface.default/95\",\n      backgroundGradient: \"to-b\",\n      opacity: \"1\",\n      zIndex: \"base\",\n      pointerEvents: \"none\",\n    },\n    _print: {\n      overflow: \"visible\",\n      _after: {\n        display: \"none\",\n      },\n    },\n    _open: {\n      paddingBlockEnd: \"xsmall\",\n      _after: {\n        opacity: \"0\",\n      },\n    },\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    position: \"absolute\",\n    bottom: \"-medium\",\n    zIndex: \"base\",\n    \"& svg\": {\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _open: {\n      \"& svg\": {\n        transform: \"rotate(180deg)\",\n      },\n    },\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nexport const FactBox = forwardRef<HTMLElement, Props>(\n  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n    const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n    const contentId = useId();\n    // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n    // When running in React 18, we need to use an empty string instead of true.\n    // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n    const inertAttribute = useMemo(() => {\n      return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n    }, [state]) as { inert?: boolean };\n\n    useEffect(() => {\n      if (open !== undefined) {\n        setState(open ? \"open\" : \"closed\");\n      }\n    }, [open]);\n\n    const onClick = useCallback(() => {\n      const newState = state === \"open\" ? \"closed\" : \"open\";\n      setState(newState);\n      onOpenChange?.(newState === \"open\");\n    }, [state, onOpenChange]);\n\n    return (\n      <StyledAside\n        data-state={state}\n        data-embed-type=\"factbox\"\n        {...rest}\n        ref={ref}\n        overflowHidden={overflowHidden}\n        onTransitionStart={(e) => {\n          if (e.target === e.currentTarget && state === \"closed\") {\n            setOverflowHidden(true);\n          }\n        }}\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && state === \"open\") {\n            setOverflowHidden(false);\n          }\n        }}\n      >\n        <StyledIconButton\n          data-state={state}\n          onClick={onClick}\n          contentEditable={false}\n          aria-expanded={state === \"open\"}\n          aria-controls={contentId}\n          aria-label={t(`factbox.${state === \"open\" ? \"close\" : \"open\"}`)}\n        >\n          <ArrowDownShortLine />\n        </StyledIconButton>\n        <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n          {children}\n        </StyledContent>\n      </StyledAside>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAM,eAAA,GAAA,wBAAA,QAAqB,SAAS;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,QAAQ;EACR,aAAa;EACb,cAAc;EACd,OAAO;EACP,OAAO,EACL,kBAAkB,OACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;GACZ,EACF;EACD,WAAW,EACT,WAAW,mBACZ;EACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,UACX,EACF,EACF,EACF;CACF,CAAC;AAEF,MAAM,iBAAA,GAAA,wBAAA,QAAuB,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,KACnB;CACD,QAAQ;EACN,SAAS;EACT,WAAW;EACX,UAAU;EACV,OAAO;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,YAAY;EACZ,oBAAoB;EACpB,SAAS;EACT,QAAQ;EACR,eAAe;EAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,QACV;EACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,KACV;EACF;CACF,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,iBAAAA,YAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,kBACZ,EACF;CACD,QAAQ,EACN,SAAS,QACV;CACF,EACF,CAAC;AAIF,MAAa,WAAA,GAAA,MAAA,aACV,EAAE,UAAU,MAAM,cAAc,cAAc,OAAO,GAAG,QAAQ,QAAQ;CACvE,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAwC,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,CAAC,YAAY;CAClE,MAAM,aAAA,GAAA,MAAA,QAAmB;CAIzB,MAAM,kBAAA,GAAA,MAAA,eAA+B;AACnC,SAAO,UAAU,WAAW,EAAE,OAAO,OAAOC,MAAAA,QAAM,QAAQ,aAAa,OAAO,IAAI,GAAG,EAAE;IACtF,CAAC,MAAM,CAAC;AAEX,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,SAAS,KAAA,EACX,UAAS,OAAO,SAAS,SAAS;IAEnC,CAAC,KAAK,CAAC;CAEV,MAAM,WAAA,GAAA,MAAA,mBAA4B;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;IAClC,CAAC,OAAO,aAAa,CAAC;AAEzB,QACE,iBAAA,GAAA,kBAAA,MAAC,aAAD;EACE,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,oBAAoB,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;;EAG3B,kBAAkB,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;;YAb9B,CAiBE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;GACE,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,EAAE,WAAW,UAAU,SAAS,UAAU,SAAS;aAE/D,iBAAA,GAAA,kBAAA,KAACC,YAAAA,oBAAD,EAAsB,CAAA;GACL,CAAA,EACnB,iBAAA,GAAA,kBAAA,KAAC,eAAD;GAAe,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;GACa,CAAA,CACJ;;EAGnB"}
+{"version":3,"file":"FactBox.js","names":["Button","React"],"sources":["../../src/FactBox/FactBox.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 { Button } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport React, {\n  type ComponentProps,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n  base: {\n    position: \"relative\",\n    padding: \"medium\",\n    display: \"grid\",\n    gridTemplateRows: \"0fr\",\n    transitionProperty: \"grid-template-rows\",\n    transitionDuration: \"slow\",\n    transitionTimingFunction: \"ease-in-out\",\n    justifyItems: \"center\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    clear: \"both\",\n    _open: {\n      gridTemplateRows: \"1fr\",\n    },\n    _print: {\n      gridTemplateRows: \"1fr\",\n      overflow: \"visible\",\n      maxHeight: \"500vh\",\n    },\n    \"& > div\": {\n      minHeight: \"surface.3xsmall\",\n    },\n  },\n  variants: {\n    overflowHidden: {\n      true: {\n        \"& > div\": {\n          overflow: \"hidden\",\n          _print: {\n            overflow: \"visible\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst StyledContent = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    width: \"100%\",\n    // Reset the top margin of the very first child.\n    \"& :first-child\": {\n      marginBlockStart: \"0\",\n    },\n    _print: {\n      overflow: \"visible\",\n    },\n    _open: {\n      paddingBlockEnd: \"xsmall\",\n    },\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    position: \"absolute\",\n    bottom: \"-medium\",\n    zIndex: \"base\",\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nexport const FactBox = forwardRef<HTMLElement, Props>(\n  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n    const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n    const contentId = useId();\n    // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n    // When running in React 18, we need to use an empty string instead of true.\n    // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n    const inertAttribute = useMemo(() => {\n      return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n    }, [state]) as { inert?: boolean };\n\n    useEffect(() => {\n      if (open !== undefined) {\n        setState(open ? \"open\" : \"closed\");\n      }\n    }, [open]);\n\n    const onClick = useCallback(() => {\n      const newState = state === \"open\" ? \"closed\" : \"open\";\n      setState(newState);\n      onOpenChange?.(newState === \"open\");\n    }, [state, onOpenChange]);\n\n    return (\n      <StyledAside\n        data-state={state}\n        data-embed-type=\"factbox\"\n        {...rest}\n        ref={ref}\n        overflowHidden={overflowHidden}\n        onTransitionStart={(e) => {\n          if (e.target === e.currentTarget && state === \"closed\") {\n            setOverflowHidden(true);\n          }\n        }}\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && state === \"open\") {\n            setOverflowHidden(false);\n          }\n        }}\n      >\n        <StyledButton\n          data-state={state}\n          onClick={onClick}\n          contentEditable={false}\n          aria-expanded={state === \"open\"}\n          variant=\"secondary\"\n          aria-controls={contentId}\n        >\n          {t(`factbox.${state === \"open\" ? \"showLess\" : \"showMore\"}`)}\n        </StyledButton>\n        <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n          {children}\n        </StyledContent>\n      </StyledAside>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,eAAA,GAAA,wBAAA,QAAqB,SAAS;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,QAAQ;EACR,aAAa;EACb,cAAc;EACd,OAAO;EACP,OAAO,EACL,kBAAkB,OACnB;EACD,QAAQ;GACN,kBAAkB;GAClB,UAAU;GACV,WAAW;GACZ;EACD,WAAW,EACT,WAAW,mBACZ;EACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW;EACT,UAAU;EACV,QAAQ,EACN,UAAU,WACX;EACF,EACF,EACF,EACF;CACF,CAAC;AAEF,MAAM,iBAAA,GAAA,wBAAA,QAAuB,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,KACnB;CACD,QAAQ,EACN,UAAU,WACX;CACD,OAAO,EACL,iBAAiB,UAClB;CACF,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,QAAQ,EACN,SAAS,QACV;CACF,EACF,CAAC;AAIF,MAAa,WAAA,GAAA,MAAA,aACV,EAAE,UAAU,MAAM,cAAc,cAAc,OAAO,GAAG,QAAQ,QAAQ;CACvE,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAwC,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,CAAC,YAAY;CAClE,MAAM,aAAA,GAAA,MAAA,QAAmB;CAIzB,MAAM,kBAAA,GAAA,MAAA,eAA+B;AACnC,SAAO,UAAU,WAAW,EAAE,OAAO,OAAOC,MAAAA,QAAM,QAAQ,aAAa,OAAO,IAAI,GAAG,EAAE;IACtF,CAAC,MAAM,CAAC;AAEX,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,SAAS,KAAA,EACX,UAAS,OAAO,SAAS,SAAS;IAEnC,CAAC,KAAK,CAAC;CAEV,MAAM,WAAA,GAAA,MAAA,mBAA4B;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;IAClC,CAAC,OAAO,aAAa,CAAC;AAEzB,QACE,iBAAA,GAAA,kBAAA,MAAC,aAAD;EACE,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,oBAAoB,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;;EAG3B,kBAAkB,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;;YAb9B,CAiBE,iBAAA,GAAA,kBAAA,KAAC,cAAD;GACE,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,SAAQ;GACR,iBAAe;aAEd,EAAE,WAAW,UAAU,SAAS,aAAa,aAAa;GAC9C,CAAA,EACf,iBAAA,GAAA,kBAAA,KAAC,eAAD;GAAe,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;GACa,CAAA,CACJ;;EAGnB"}

package/lib/Gloss/Gloss.js

@@ -112,8 +112,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 					})
 				] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.SpeechControl, {
 					src: audio.src,
-					title: audio.title,
-					type: "gloss"
+					title: audio.title
 				})] }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
 					textStyle: "label.medium",